:root{
  /* ---- palette (Studio Paper — light, teal-forward; see DESIGN.md) ----
     Backgrounds run white → tinted paper as elevation increases. Text runs
     the opposite direction of the old dark scheme (darkest = primary, not
     lightest). Teal keeps its "only interactive color" role from the prior
     system; teal-700 exists solely for teal used AS text/on white, where
     teal-500/400 alone don't clear body-text contrast. Same for gold-700
     vs the original decorative-only gold-400. */
  --paper-000:#FFFFFF;
  --paper-050:#F6F9FA;
  --paper-100:#EDF3F5;
  --paper-200:#E1E9EC;
  --teal-500:#2F9AA0;
  --teal-400:#4FC3C9;
  --teal-700:#14636A;
  --gold-400:#D3AE55;
  --gold-700:#8A6B1F;
  --ink-900:#0A1B33;
  --ink-100:#0A1B33;
  --ink-300:#45566B;
  --ink-500:#5B6B7D;
  --scrim-ink:#F4F7FA;
  --danger:#B23A2A;
  --line:rgba(10,27,51,0.12);
  --line-strong:rgba(10,27,51,0.26);

  /* ---- type scale ---- */
  --t-xs:12px;
  --t-sm:13px;
  --t-base:15px;
  --t-md:17px;
  --t-lg:22px;
  --t-xl:26px;
  --t-display:clamp(40px, 5.4vw, 72px);
  --t-section:clamp(28px, 3.6vw, 42px);

  /* ---- spacing scale ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:132px;

  /* ---- motion: critically damped by default, per apple-design ---- */
  --ease-settle:cubic-bezier(.22,1,.36,1);
  --ease-press:cubic-bezier(.4,0,.2,1);

  --radius:14px;
  --max:1180px;

  /* ambient 3D mark opacity — modulated per section by main.js so the
     signature structure stays present throughout the page without ever
     sitting at full strength behind body copy; see #markCanvas below. */
  --mark-o:0.24;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--paper-000);
  color:var(--ink-100);
  font-family:'General Sans', system-ui, sans-serif;
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Cabinet Grotesk', system-ui, sans-serif;
  line-height:1.1;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--s-6);}

:focus-visible{
  outline:2px solid var(--teal-700);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- brand mark ---------- */
.mark{display:block; color:var(--teal-500); flex:none;}
.mark use, .mark path{fill:currentColor;}

/* ---------- ambient background ---------- */
.bg-field{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(47,154,160,0.14), transparent 60%),
    radial-gradient(900px 520px at 4% 108%, rgba(211,174,85,0.06), transparent 60%),
    var(--paper-000);
}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-6);
}
.brand{display:flex; align-items:center; gap:var(--s-3);}
.brand .mark{height:24px; width:28px;}
.brand-name{
  font-family:'Cabinet Grotesk', sans-serif;
  font-weight:600; font-size:var(--t-sm);
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-100);
}
.nav-cta{
  font-size:var(--t-sm); font-weight:600;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease-settle), background .3s var(--ease-settle);
}
.nav-cta:hover{border-color:var(--teal-500); background:rgba(47,154,160,0.09);}
.nav-cta:active{transform:scale(.97);}

/* ---------- buttons (shared tactile press) ---------- */
.btn-primary,.nav-cta,.submit-btn{transition:transform .12s var(--ease-press), border-color .3s var(--ease-settle), background .3s var(--ease-settle), box-shadow .3s var(--ease-settle);}
.btn-primary:active,.submit-btn:active:not(:disabled){transform:scale(.97);}

/* ---------- ambient 3D structure (fixed, behind all content) ----------
   The canvas is viewport-fixed, so whatever screen band the mask keeps
   opaque stays in that same band as the page scrolls beneath it. Two
   things keep it from ever sitting on top of body copy: the mask itself
   is pulled tight into the upper-right quadrant (the hero's negative
   space, where the focal entrance lives) rather than spanning near the
   full viewport, and main.js drives --mark-o per section so the
   structure quiets down to a background presence anywhere text needs
   the contrast, without ever fully disappearing (it's the page's
   signature element, not a hero-only flourish). ---------- */
#markCanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease-settle);
  transition-delay:.45s;
  -webkit-mask-image:radial-gradient(ellipse 58% 42% at 60% 36%, black 26%, transparent 64%);
  mask-image:radial-gradient(ellipse 58% 42% at 60% 36%, black 26%, transparent 64%);
}
#markCanvas.is-ready{opacity:var(--mark-o, 0.2);}

/* ---------- hero ---------- */
/* The one authored focal sequence (per animate.md): headline, subhead, CTA,
   and the mark itself enter as a deliberate stagger, not a simultaneous
   fade. Pure CSS keyframes on page load — no script dependency, so the
   sequence runs even if main.js fails, and it never re-triggers on scroll
   (unlike the routine .reveal sections below). */
.hero{position:relative; padding:var(--s-9) 0 var(--s-8); overflow:hidden;}
.hero-copy{position:relative; z-index:1; max-width:560px;}

@keyframes hero-rise{
  from{opacity:0; transform:translateY(28px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-h,.hero-sub,.hero-actions{animation:hero-rise .8s var(--ease-settle) both;}
.hero-sub{animation-duration:.7s; animation-delay:.14s;}
.hero-actions{animation-duration:.7s; animation-delay:.26s;}

h1.hero-h{
  font-size:var(--t-display);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-0.022em;
  max-width:14ch;
}
h1.hero-h .accent{color:var(--teal-700); font-weight:700;}
.hero-sub{
  margin:var(--s-5) 0 0;
  max-width:46ch;
  font-size:var(--t-md);
  line-height:1.6;
  color:var(--ink-300);
}
.hero-actions{
  margin-top:var(--s-7);
  display:flex; align-items:center;
  gap:var(--s-5); flex-wrap:wrap;
}
.btn-primary{
  background:var(--teal-500);
  color:var(--ink-900);
  font-weight:600; font-size:var(--t-base);
  padding:15px 28px; border-radius:999px;
  box-shadow:0 18px 40px -14px rgba(47,154,160,0.55);
  display:inline-flex; align-items:center; gap:10px;
}
.btn-primary:hover{background:var(--teal-400); box-shadow:0 22px 48px -12px rgba(47,154,160,0.68);}
.hero-note{font-size:var(--t-sm); color:var(--ink-500);}

/* ---------- services ---------- */
.services{padding:var(--s-9) 0;}
.services-grid{
  display:grid; grid-template-columns:0.8fr 1.6fr;
  gap:var(--s-8);
  align-items:start;
}
.services-intro h2{font-size:var(--t-section); font-weight:600; max-width:11ch;}
.services-intro p{margin:var(--s-4) 0 0; color:var(--ink-300); font-size:var(--t-md); line-height:1.65; max-width:32ch;}
.services-list{border-top:1px solid var(--line);}
.service-row{
  padding:var(--s-6) 0;
  border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease-settle), border-color .35s var(--ease-settle);
}
.service-row:hover{transform:translateX(var(--s-3)); border-bottom-color:var(--line-strong);}
.service-row h3{font-size:var(--t-lg); font-weight:600; display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;}
.service-row .cat{
  font-family:'General Sans', sans-serif;
  font-size:var(--t-xs); color:var(--gold-700);
  font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
}
.service-row p{margin:var(--s-2) 0 0; font-size:var(--t-base); line-height:1.65; color:var(--ink-300); max-width:52ch;}
@media (min-width:961px){
  .services-intro{position:sticky; top:112px;}
}

/* ---------- work ---------- */
.work{padding:var(--s-8) 0 var(--s-9);}
.work-head h2{font-size:var(--t-section); font-weight:600; max-width:14ch;}
.work-note{margin:var(--s-3) 0 0; color:var(--ink-500); font-size:var(--t-sm); line-height:1.6; max-width:52ch;}
.work-grid{
  margin-top:var(--s-7);
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:var(--s-5);
}
.work-item{
  margin:0; border-radius:var(--radius); overflow:hidden; background:var(--paper-050); position:relative;
  border:1px solid transparent;
  transition:border-color .4s var(--ease-settle);
}
.work-item:hover{border-color:var(--line-strong);}
.work-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-settle), filter .4s var(--ease-settle); filter:saturate(0.92);}
.work-item:hover img{transform:scale(1.035); filter:saturate(1.04);}
.work-item--lg{grid-row:1 / 3;}
.work-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s-4) var(--s-5);
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  /* sits over a dark scrim on top of a photo, not on page paper — stays
     light regardless of the page's own light/dark theme */
  color:var(--scrim-ink);
  background:linear-gradient(0deg, rgba(7,20,39,0.85), transparent);
  transform:translateY(4px);
  transition:transform .4s var(--ease-settle);
}
.work-item:hover figcaption{transform:translateY(0);}

/* ---------- process ---------- */
.process{padding:var(--s-8) 0;}
.process h2{font-size:var(--t-section); font-weight:600; max-width:14ch; margin-bottom:var(--s-7);}
.process-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--s-5);
  position:relative;
}
.process-steps::before{
  content:''; position:absolute; top:12px; left:0; right:0; height:1px;
  background:var(--line);
}
/* The connecting line draws left-to-right on scroll-in — legitimate
   continuity motion, not decoration: it explains that the four steps are
   one sequence rather than four parallel options. */
.process-steps::after{
  content:''; position:absolute; top:12px; left:0; width:100%; height:1px;
  background:var(--teal-500);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.1s var(--ease-settle);
}
.process-steps.is-drawn::after{transform:scaleX(1);}
.process-steps li{position:relative; padding-top:var(--s-6);}
.process-steps li::before{
  content:''; position:absolute; top:6px; left:0; width:11px; height:11px;
  border-radius:50%; background:var(--paper-000); border:2px solid var(--teal-500);
}
.process-steps h3{font-size:var(--t-md); font-weight:600; margin-bottom:var(--s-2);}
.process-steps p{margin:0; font-size:var(--t-sm); line-height:1.6; color:var(--ink-300);}

/* ---------- mission strip ---------- */
.strip{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:var(--s-8) 0;
  background:var(--paper-050);
}
/* A quiet textural break derived from the mark's own faceted language —
   flat low-opacity fills, no gradient text, no shadow. Sits behind the
   copy, never competing with it for contrast. */
.strip::before{
  content:''; position:absolute; top:-30%; right:-6%; width:52%; height:160%;
  background:
    linear-gradient(128deg, rgba(79,195,201,0.16) 0%, rgba(79,195,201,0) 55%),
    linear-gradient(-56deg, rgba(211,174,85,0.09) 0%, rgba(211,174,85,0) 50%);
  clip-path:polygon(34% 0%, 100% 12%, 78% 100%, 4% 82%);
  pointer-events:none;
}
.strip-inner{position:relative; z-index:1; display:flex; gap:var(--s-7); align-items:flex-start; flex-wrap:wrap;}
.strip h2{font-size:clamp(26px,3.2vw,34px); max-width:15ch; font-weight:600; flex:1 1 300px; letter-spacing:-0.014em;}
.strip p{font-size:var(--t-md); line-height:1.7; color:var(--ink-300); max-width:56ch; margin:0; flex:1 1 380px;}

/* ---------- form ---------- */
.form-section{padding:var(--s-9) 0; position:relative;}
.form-shell{display:grid; grid-template-columns:0.85fr 1.3fr; gap:var(--s-8); align-items:start;}
.form-head{max-width:420px; margin:0;}
.form-head h2{font-size:var(--t-section); font-weight:600;}
.form-head p{margin:var(--s-4) 0 0; color:var(--ink-300); font-size:var(--t-md); line-height:1.65;}
@media (min-width:961px){
  .form-head{position:sticky; top:112px;}
}

form{
  width:100%; max-width:640px; margin:0;
  /* elevated one background-step above the page (not a shadow) — the
     Flat-By-Default Rule reserves depth for borders and the one button
     glow, so contrast is the only lever here. */
  background:var(--paper-100);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:var(--s-7) var(--s-7) var(--s-6);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-5);}
.field{margin-bottom:var(--s-5);}
.field label{
  display:block; font-size:var(--t-sm); font-weight:600; color:var(--ink-300);
  margin-bottom:var(--s-2);
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;
  background:var(--paper-200);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 14px;
  color:var(--ink-100);
  font-family:'General Sans', sans-serif;
  font-size:var(--t-base);
  transition:border-color .25s var(--ease-settle), background .25s var(--ease-settle);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-500);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--teal-500); background:rgba(47,154,160,0.07);
}
.field textarea{min-height:104px; resize:vertical; line-height:1.6;}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6B7D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea{border-color:var(--danger);}
.field-error{
  display:none;
  margin:var(--s-2) 0 0;
  font-size:var(--t-xs); color:var(--danger); line-height:1.5;
}
.field[data-invalid] .field-error{display:block;}

.checks{display:grid; grid-template-columns:1fr 1fr; gap:10px var(--s-4);}
.check-item{
  display:flex; align-items:center; gap:9px;
  font-size:var(--t-sm); color:var(--ink-300);
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  cursor:pointer;
  transition:border-color .25s var(--ease-settle), color .25s var(--ease-settle), background .25s var(--ease-settle);
}
.check-item:hover{border-color:var(--line-strong); color:var(--ink-100);}
.check-item:has(input:checked){border-color:var(--teal-500); color:var(--ink-100); background:rgba(47,154,160,0.08);}
.check-item input{accent-color:var(--teal-500); flex:none;}

.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

.submit-row{margin-top:var(--s-2);}
.submit-btn{
  width:100%;
  background:var(--teal-500);
  color:var(--ink-900); font-weight:700; font-size:var(--t-base);
  font-family:'General Sans', sans-serif;
  border:none; border-radius:14px; padding:16px;
  cursor:pointer;
  box-shadow:0 18px 40px -16px rgba(47,154,160,0.55);
}
.submit-btn:hover:not(:disabled){background:var(--teal-400); box-shadow:0 22px 46px -14px rgba(47,154,160,0.65);}
.submit-btn:disabled{opacity:.6; cursor:progress;}
.form-fine{margin:var(--s-4) 0 0; font-size:var(--t-xs); color:var(--ink-500); text-align:center; line-height:1.55;}

.form-alert{
  display:none;
  margin-top:var(--s-4);
  border:1px solid var(--danger);
  background:rgba(178,58,42,0.08);
  border-radius:14px;
  padding:var(--s-4) var(--s-5);
  font-size:var(--t-sm); color:var(--ink-100); line-height:1.6;
}
.form-alert a{color:var(--teal-700); text-decoration:underline; text-underline-offset:2px;}

.success{
  display:none; text-align:center;
  padding:var(--s-9) var(--s-7);
  max-width:640px; margin:0;
  background:var(--paper-100); border:1px solid var(--teal-500);
  border-radius:20px;
}
.success h3{font-size:var(--t-xl); margin-bottom:var(--s-3);}
.success p{color:var(--ink-300); font-size:var(--t-md); line-height:1.65; margin:0 auto; max-width:44ch;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:var(--s-6) 0;}
.foot-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s-4);}
.foot-brand{display:flex; align-items:center; gap:10px; font-size:var(--t-sm); color:var(--ink-500);}
.foot-brand .mark{height:17px; width:20px; opacity:.75;}
.foot-links{display:flex; gap:var(--s-5); font-size:var(--t-sm); color:var(--ink-500);}
.foot-links a{transition:color .25s var(--ease-settle);}
.foot-links a:hover{color:var(--teal-700);}

/* ---------- scroll reveal (routine supporting motion) ----------
   Deliberately quieter and faster than the hero's authored entrance
   (smaller displacement, shorter duration): this is restrained sibling
   stagger for genuine lists (service rows, work items, process steps),
   not a repeat of the hero's focal choreography. Delay is capped so a
   five-item list (work) never makes the last item wait too long. */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease-settle), transform .5s var(--ease-settle);
  transition-delay:calc(min(var(--i, 0), 4) * 70ms);
}
.reveal.is-in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-copy{max-width:none;}
  .services-grid{grid-template-columns:1fr; gap:var(--s-5);}
  .services-intro{position:static;}
  .services-intro p{max-width:none;}
  .work-grid{grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:var(--s-4);}
  .work-item--lg{grid-row:1 / 3;}
  .process-steps{grid-template-columns:1fr 1fr; gap:var(--s-6) var(--s-5);}
  .form-shell{grid-template-columns:1fr; gap:var(--s-6);}
  .form-head{position:static; max-width:640px; margin:0 auto;}
  form,.success{max-width:640px; margin:0 auto;}
}
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .checks{grid-template-columns:1fr;}
  form{padding:var(--s-6) var(--s-5);}
  /* flex-basis of 300px/380px on .strip h2/p is a desktop row-layout width
     hint; left alone here it gets reinterpreted as a HEIGHT once the axis
     flips to column, leaving a tall near-empty box under the heading. */
  .strip-inner{flex-direction:column; gap:var(--s-4);}
  .strip h2,.strip p{flex:1 1 auto;}
  .hero{padding:var(--s-8) 0 var(--s-7);}
  .form-section{padding:var(--s-8) 0;}
  .success{padding:var(--s-8) var(--s-5);}
  .work-grid{grid-template-columns:1fr; grid-template-rows:none;}
  .work-item--lg{grid-row:auto;}
  .process-steps{grid-template-columns:1fr;}
  .process-steps::before,.process-steps::after{display:none;}

  /* Below 640px, content is a single full-width column, so the desktop
     mask's 58%/42% ellipse always lands on top of body text no matter
     which section scrolls into its fixed screen band — there's no
     off-column quadrant left to hide it in. Pull it into a small sliver
     tucked against the right edge instead, and cut the ceiling opacity
     further so the facets reads as a corner glow rather than a shape
     crossing the text. */
  #markCanvas{
    -webkit-mask-image:radial-gradient(ellipse 30% 16% at 90% 24%, black 12%, transparent 50%);
    mask-image:radial-gradient(ellipse 30% 16% at 90% 24%, black 12%, transparent 50%);
  }
  #markCanvas.is-ready{opacity:calc(var(--mark-o, 0.2) * 0.5);}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;}
  .hero-h,.hero-sub,.hero-actions{animation:none; opacity:1; transform:none;}
  .process-steps::after{transform:scaleX(1);}
}

@media (prefers-reduced-transparency: reduce){
  header{background:var(--paper-000); backdrop-filter:none; -webkit-backdrop-filter:none;}
}