/* ===========================================================================
   leasuredigital.com  |  Space Glass
   ---------------------------------------------------------------------------
   Tokens are the Command Center's, lifted from the retired ../Website/src/
   index.css so the site and Brad's dashboard read as one object. Two of them
   (--ink-3, --error) are deliberately lighter than the dashboard because the
   dashboard values fail WCAG AA on this ground. Do not re-sync them.

   The one rule that carries the design: cyan is structure, gold is action.
   Gold appears on the primary button and nowhere else, artwork included.
   =========================================================================== */

:root {
  --night:     #04060D;
  --surface:   rgba(127, 180, 255, .06);
  --surface-2: rgba(127, 180, 255, .11);
  --line:      rgba(127, 196, 255, .30);
  --line-soft: rgba(127, 196, 255, .16);

  --cyan:      #7FC4FF;
  --cyan-dim:  #4A86C2;
  --gold:      #B8AC3B;
  --gold-lt:   #D0C55A;
  --on-gold:   #14202E;

  --ink:       #EAF1F8;
  --ink-2:     #A9BDD4;
  --ink-3:     #92ACCC;
  --error:     #FF8B85;

  --r:    16px;
  --r-sm: 10px;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Work Sans', 'Segoe UI', system-ui, sans-serif;

  --col: 1160px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* === Base ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; color-scheme: dark; scrollbar-color: rgba(127,196,255,.28) transparent; scrollbar-width: thin; }
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--night);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--gold);
}

img { display: block; max-width: 100%; }
a { color: var(--cyan); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button, a { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(127,196,255,.18); }

::selection { background: rgba(184, 172, 59, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left)); }

/* Hidden by clipping, not by parking it at -9999px. Off-screen positioning is
   what put 30px of horizontal scroll on the phone. */
.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: var(--gold); color: var(--on-gold);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
}
.skip:focus { width: auto; height: auto; clip-path: none; top: 16px; left: 16px; }

/* === Sky ================================================================= */

/* One fixed layer, not background-attachment on the body, which re-rasterised
   three gradients on every scroll frame. */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -18%, rgba(62,140,220,.22), transparent 60%),
    radial-gradient(1000px 640px at -12% 110%, rgba(44,74,140,.28), transparent 58%),
    linear-gradient(175deg, #03040A 0%, #071224 46%, #0B2140 100%);
}
.starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 22% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px   1px   at 68% 44%, rgba(200,225,255,.40) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 84% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px   1px   at  8% 66%, rgba(200,225,255,.35) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 45% 82%, rgba(255,255,255,.40) 50%, transparent 51%),
    radial-gradient(1px   1px   at 92% 74%, rgba(200,225,255,.35) 50%, transparent 51%);
  background-size: 420px 420px;
}

main, header, footer { position: relative; z-index: 1; }

/* === Glass =============================================================== */

.glass {
  background: linear-gradient(160deg, rgba(127,196,255,.10), rgba(10,22,44,.48) 55%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: 0 20px 52px -14px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Blur only where a panel actually sits over something moving or textured. */
.blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* === Type ================================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 5.8vw, 76px); }
h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.22; }

p { margin: 0; }
.lede { font-size: clamp(17px, 1.55vw, 20px); color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* === Buttons ============================================================= */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: var(--r-sm);
  font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

/* The one gold thing. The gradient ends at --gold, not darker, so the label
   holds 7:1 in the corner where a darker stop dropped it below AA. */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--on-gold);
  border: 1px solid rgba(208,197,90,.5);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 10px 30px -10px rgba(184,172,59,.62), 0 0 44px -18px rgba(208,197,90,.7);
}
.btn-gold::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-2px); color: var(--on-gold); box-shadow: 0 16px 38px -12px rgba(184,172,59,.7), 0 0 58px -16px rgba(208,197,90,.85); }
.btn-gold:hover::before { transform: translateX(130%); }

.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--cyan); transform: translateY(-2px); color: var(--ink); }

/* === Nav ================================================================= */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.nav.stuck {
  background: rgba(4, 8, 18, .76);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand img { height: 30px; width: auto; }     /* 370x280 mark. Height only, never a square. */
.brand b { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; letter-spacing: -.015em; }

.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: 11px 20px; font-size: 14.5px; }

@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 420px) { .brand b { font-size: 16px; } .brand img { height: 26px; } .nav .btn { padding: 10px 15px; font-size: 13.5px; } }

/* === Sections ============================================================ */

section { padding: 112px 0; }
/* The form answers what the bento just promised, so the two sit closer than
   the sections above. A full 224px of sky between them read as a gap in the
   page rather than as breathing room. */
#services { padding-top: 96px; }
#contact  { padding-top: 96px; }
@media (max-width: 760px) {
  section { padding: 76px 0; }
  #services { padding-top: 64px; }
  #contact  { padding-top: 64px; }
}

.sec-head { max-width: 46ch; margin-bottom: 56px; }
.sec-head .lede { margin-top: 20px; }

/* === Hero ================================================================ */

.hero { padding-top: 150px; padding-bottom: 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 26px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* --- the signature figure ----------------------------------------------- */
/* Crisp geometry, not a picture and not a fake product screen: nested bezels,
   three orbiting nodes and a slow light sweep, with the real mark at centre. */
.figure { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; }

.figure::before {
  content: ''; position: absolute; inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(127,196,255,.20) 38deg, rgba(127,196,255,.03) 76deg, transparent 120deg);
  animation: spin 22s linear infinite;
}
.figure::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,140,220,.24), transparent 68%);
  filter: blur(14px);
}
.figure svg { position: relative; width: 100%; height: 100%; overflow: hidden; }

.fig-tick  { stroke: var(--cyan); stroke-width: 12; stroke-dasharray: 1.6 12.4; opacity: .34; }
.fig-ring  { stroke: var(--cyan); stroke-width: 1;  opacity: .24; }
.fig-dash  { stroke: var(--cyan); stroke-width: 1;  stroke-dasharray: 3 11; opacity: .28; }
.fig-hair  { stroke: var(--cyan); stroke-width: 1;  opacity: .14; }
.fig-spoke { stroke: var(--cyan); stroke-width: 1;  opacity: .1; }
.fig-node  { fill: #08111F; stroke: #9FD4FF; stroke-width: 2; }
.fig-core  { fill: #EAF1F8; }

/* Each ring turns at its own rate, so the figure never repeats a pose. The
   sweep is the slowest thing on the page and the only one you notice. */
.orbit { transform-box: view-box; transform-origin: 300px 300px; animation: spin linear infinite; }
.o1    { animation-duration: 26s; }
.o2    { animation-duration: 38s; animation-direction: reverse; }
.o3    { animation-duration: 17s; }
.sweep { animation-duration: 30s; }

.fig-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26%; height: auto;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.65));
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 940px) {
  .hero { padding-top: 122px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: none; }
  .figure { max-width: 360px; }
}

/* === Bento =============================================================== */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.tile {
  position: relative; overflow: hidden;
  padding: 30px 30px 0;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
/* The artwork sits in its own lit well at the foot of the tile. Without this
   the hairline figures floated in a near-black field and the whole band read
   as empty, which is what "the middle section looks bad" was. */
.tile-art::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(62,140,220,.20), transparent 70%),
    linear-gradient(180deg, transparent, rgba(127,196,255,.05));
  border-top: 1px solid var(--line-soft);
}
.tile:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 28px 60px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.10); }

/* Pointer spotlight. One custom property pair per tile, set on pointermove. */
.tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -30%), rgba(127,196,255,.16), transparent 62%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.tile:hover::after { opacity: 1; }

.tile h3 { margin-bottom: 10px; }
.tile p { color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.tile-body { position: relative; z-index: 1; }
.tile-art { position: relative; margin: 26px -30px 0; margin-top: auto; padding: 22px 30px 0; min-height: 190px; display: flex; align-items: flex-end; }
.tile-art svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }

.a-line   { fill: none; stroke: var(--cyan); stroke-width: 1.25; opacity: .34; }
.a-line2  { fill: none; stroke: var(--cyan); stroke-width: 1.25; opacity: .2; }
.a-dash   { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 2 8; opacity: .3; }
.a-node   { fill: #08111F; stroke: #9FD4FF; stroke-width: 1.6; }
.a-dot    { fill: var(--cyan); opacity: .3; }
.a-dot-b  { fill: #CFE8FF; opacity: .9; }
.a-junction { fill: #08111F; stroke: #9FD4FF; stroke-width: 1.6; }

/* Two figures breathe, and only while their tile is hovered, so nothing on
   the page loops forever at the edge of your eye. */
.a-pulse { fill: none; stroke: #9FD4FF; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tile:hover .a-pulse { animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse {
  0%   { opacity: .55; transform: scale(.86); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}

.a-dash-slow { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 4 10; opacity: .22; }
.tile:hover .a-dash-slow { animation: crawl 9s linear infinite; }
@keyframes crawl { to { stroke-dashoffset: -140; } }

/* The runner and its halo share one offset-path, so the glow travels with the
   dot. The path string must stay identical to the loop drawn in the markup. */
.a-runner, .a-runner-halo {
  offset-path: path('M60 48 H180 A40 40 0 0 1 180 128 H60 A40 40 0 0 1 60 48 Z');
  offset-distance: 0%;
  animation: run 4.2s linear infinite;
  animation-play-state: paused;
}
.a-runner      { fill: #EAF1F8; }
.a-runner-halo { fill: #7FC4FF; opacity: .3; }
.tile:hover .a-runner, .tile:hover .a-runner-halo { animation-play-state: running; }
@keyframes run { to { offset-distance: 100%; } }

.t7  { grid-column: span 7; }
.t5  { grid-column: span 5; }
.t12 { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 44px; align-items: center; padding: 36px 30px; }
.t12 .tile-art { margin: 0; padding: 0; min-height: 0; }
.t12 .tile-art::before { content: none; }

@media (max-width: 900px) {
  .t7, .t5, .t12 { grid-column: span 12; }
  .t12 { display: flex; flex-direction: column; align-items: stretch; padding: 30px 30px 0; }
  .t12 .tile-art { margin: 26px -30px 0; padding: 22px 30px 0; min-height: 190px; }
  .t12 .tile-art::before { content: ""; }
}

/* === Contact ============================================================= */

.contact-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.contact-inner .lede { margin: 20px auto 0; }
.contact-inner form { margin-top: 44px; text-align: left; }

.direct-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 22px; font-size: 15px; color: var(--ink-3); }
.direct-row a { color: var(--ink-2); text-decoration: none; }
.direct-row a:hover { color: var(--ink); }

form.glass { padding: 34px; position: relative; overflow: hidden; }
/* One lit edge along the top of the form, so the panel reads as the active
   object on the page rather than one more card. */
form.glass::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208,197,90,.55), transparent);
}
@media (max-width: 480px) { form.glass { padding: 26px 20px; } }

.field { margin-bottom: 20px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; gap: 0; } }

label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 15px; }
label .opt { color: var(--ink-3); font-weight: 400; }

input, select, textarea {
  width: 100%;
  padding: 14px 15px;
  font: inherit;
  font-size: 16px;                          /* 16px stops iOS zooming on focus */
  color: var(--ink);
  background: rgba(3, 8, 18, .55);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
input::placeholder, textarea::placeholder { color: #7E93AF; }   /* 5.5:1 on the field */
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cyan);
  background: rgba(3, 8, 18, .76);
  box-shadow: 0 0 0 3px rgba(127,196,255,.18);
}
.is-bad, .is-bad:hover { border-color: var(--error); }
.err { margin: 7px 0 0; font-size: 13.5px; color: var(--error); }

textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
select {
  appearance: none; padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select:invalid { color: #7E93AF; }
select option { background: #0A1526; color: var(--ink); }

/* Honeypot. Clipped rather than display:none, because some bots skip hidden
   fields and fill everything else. Clipping keeps it in the layout at 1px
   instead of dragging the page 5000px wide. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

form .btn-gold { width: 100%; padding: 17px; font-size: 16.5px; margin-top: 8px; }
form .btn-gold:disabled { filter: saturate(.6) brightness(.9); transform: none; cursor: progress; }
.form-foot { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); text-wrap: pretty; }

.notice { padding: 16px 18px; margin-bottom: 22px; border-radius: var(--r-sm); font-size: 15px; text-align: left; }
.notice-ok  { border: 1px solid rgba(63,191,116,.45);  background: rgba(63,191,116,.10); }
.notice-bad { border: 1px solid rgba(255,139,133,.45); background: rgba(255,139,133,.10); }

/* === Footer ============================================================== */

footer { border-top: 1px solid var(--line-soft); padding: 42px 0 56px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.foot-in .brand { margin-right: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot-links a { color: var(--ink-3); text-decoration: none; font-size: 14.5px; }
.foot-links a:hover { color: var(--ink); }
.foot-copy { width: 100%; color: var(--ink-3); font-size: 13.5px; }

/* === Motion ============================================================== */

/* One authored moment on load: the headline, lede and buttons rise, then the
   figure fades up under them. After that it is scroll reveal and hover only. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fig  { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }

.rise { opacity: 0; animation: rise .75s var(--ease) forwards; }
.d1 { animation-delay: .09s; } .d2 { animation-delay: .18s; }
.figure { opacity: 0; animation: fig 1s var(--ease) .26s forwards; }

/* Scoped to .js so the page is never blank when the script does not run.
   The class is set inline in <head>, before first paint, so there is no flash
   of visible content that then hides itself. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .rise, .figure, .js .reveal { opacity: 1; transform: none; }
  .figure::before, .orbit { animation: none; }
  .a-runner, .a-runner-halo { animation: none; offset-distance: 26%; }
  .a-pulse { animation: none; opacity: .4; }
  .btn:hover, .tile:hover { transform: none; }
}