/* ==========================================================================
   IITES - Web Developers
   Design concept: "The Digital Garden" — a domain is sown, rooted in hosting,
   grown through design and code, and made to flourish with SEO and marketing.
   Brand palette is taken straight from the logo: deep blue soil, orange seed,
   cyan neon light. Green appears only in the photography, never in the UI.
   ========================================================================== */

:root{
  /* --- brand, from IITES-Logo-Neon.svg --- */
  --blue:        #0D3692;
  --blue-deep:   #092A70;
  --ember:       #FA6F1A;
  --ember-soft:  #FFA45C;
  --ember-ink:   #B85410;   /* orange for small TEXT on light grounds — #FA6F1A
                               only reaches ~2.7:1 on sand, this clears AA */
  --glow:        #94EAFB;
  --glow-pale:   #EBFFFE;

  /* The one sanctioned green in the UI, for WhatsApp affordances and nothing
     else. Tuned to a narrow window: light enough to still separate from the
     dark sections the floating rail passes over (3.24:1 vs --soil), dark
     enough to carry a white glyph and label (5.67:1). WhatsApp's familiar
     #25D366 fails the second test badly at 1.98:1, and its darker #075E54
     fails the first at 2.4:1 — it disappears against the hero. */
  --whatsapp:    #0C7565;

  /* --- ground tones --- */
  --soil:        #07122B;   /* darkest ground, hero + contact base */
  --soil-2:      #0B1B3D;   /* raised dark surface */

  /* --- light tones --- */
  --paper:       #FFFFFF;
  --sand:        #FAF7F2;   /* warm off-white, the "field" */
  --mist:        #F3F7FD;   /* cool off-white */

  /* --- text --- */
  --ink:         #0E1D3B;
  --ink-soft:    #5A6684;
  --ink-faint:   #68718D;   /* de-emphasised text; #8B94AC only made 3.0:1 on white */
  --on-dark:     #EAF1FF;
  --on-dark-soft:#9FB2D6;

  /* Form feedback, and nothing else. --alert is 6.5:1 on --paper, --ok-ink
     4.9:1 — both clear AA at the small size the messages use. --ok-ink is a
     deeper green than --whatsapp on purpose: this one carries text, not a
     white glyph, and the rule that green belongs to the photography still
     holds everywhere outside these two states. */
  --alert:       #B3261E;
  --ok-ink:      #0B6A50;

  --line:        rgba(13,54,146,0.10);
  --line-dark:   rgba(148,234,251,0.14);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  /* Header height is a token because three things depend on it: the bar itself,
     the hero's top padding, and where the mobile panel starts. */
  --header-h: 104px;

  --pad: clamp(72px, 9vw, 132px);
  --shadow-soft: 0 18px 50px -24px rgba(9,42,112,0.30);
  --shadow-lift: 0 30px 70px -30px rgba(9,42,112,0.45);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* The header is fixed, so an anchor jump would otherwise land with the target
   tucked underneath it. Sections have enough top padding to survive that; a
   deep-linked card (/work/#schools) or timeline stage does not. */
section[id], .point[id], .stage[id]{ scroll-margin-top:calc(var(--header-h) + 18px); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
/* Photos ship as <picture> (desktop + mobile source); the wrapper must not
   reintroduce inline layout between the container and the image. */
picture{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }

/* Joan ships a single weight (400). Anything heavier is synthesised by the
   browser, which smears a high-contrast serif badly — so headings stay at 400
   and hierarchy is carried by size, colour and spacing instead. Keep it that
   way: do not add font-weight:600 to a Joan element. */
h1,h2,h3,h4,h5{
  font-family:'Joan', Georgia, 'Times New Roman', serif;
  font-weight:400;
  margin:0;
  line-height:1.14;
  letter-spacing:-0.012em;
  color:var(--blue);
}
h1{ font-size:clamp(2.6rem, 6.2vw, 4.7rem); }
h2{ font-size:clamp(2rem, 4.1vw, 3.15rem); }
h3{ font-size:1.2rem; }
p{ margin:0; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:1220px; margin:0 auto; padding:0 clamp(20px, 4vw, 44px); }
section{ padding:var(--pad) 0; position:relative; }
.sand{ background:var(--sand); }
.mist{ background:var(--mist); }

.lede{ font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ember-ink); margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50% 50% 50% 0;
  background:var(--ember-ink); transform:rotate(-45deg); flex-shrink:0;
}

.sec-head{ max-width:660px; margin-bottom:clamp(44px,5vw,68px); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head p{ margin-top:20px; color:var(--ink-soft); font-size:1.04rem; }

/* ---------- dark surfaces ---------- */
.dark{
  /* Light leaking through the canopy, painted straight onto the section's own
     background rather than into an extra absolutely-positioned layer — these
     sections get very tall and a second full-size layer is not free. */
  background-color:var(--soil);
  background-image:
    radial-gradient(900px 460px at 78% 0%,   rgba(148,234,251,0.16), transparent 62%),
    radial-gradient(760px 420px at 8% 100%,  rgba(250,111,26,0.13),  transparent 64%);
  background-repeat:no-repeat, no-repeat;
  color:var(--on-dark-soft);
  position:relative;
  overflow:hidden;
}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5{ color:#fff; }
.dark .sec-head p,.dark .lede{ color:var(--on-dark-soft); }
.dark .eyebrow{ color:var(--glow); }
.dark .eyebrow::before{ background:var(--glow); }
/* NOTE: there is deliberately no full-size overlay layer on .dark.
   The journey section is several thousand pixels tall, and a stretched
   noise/repeating-gradient layer at that size costs enough to drop frames
   and leave the section unpainted. The radial gradients above carry the
   depth on their own. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  font-family:'Outfit',sans-serif; font-size:0.93rem; font-weight:600; letter-spacing:0.01em;
  cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
/* Filled with --ember-ink, not --ember: white on #FA6F1A is only 2.86:1,
   white on #B85410 is 4.83:1. Shadows follow the fill so the halo matches. */
.btn-primary{ background:var(--ember-ink); color:#fff; box-shadow:0 12px 30px -12px rgba(184,84,16,0.75); }
.btn-primary:hover{ background:#A84A0C; box-shadow:0 20px 40px -14px rgba(184,84,16,0.85); }
.btn-solid{ background:var(--blue); color:#fff; box-shadow:0 12px 30px -14px rgba(13,54,146,0.7); }
.btn-outline{ border-color:var(--line); color:var(--blue); background:transparent; }
.btn-outline:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-on-dark{ border-color:rgba(234,241,255,0.28); color:#fff; background:rgba(255,255,255,0.05); }
.btn-on-dark:hover{ background:#fff; color:var(--blue); border-color:#fff; }
.btn-lg{ padding:17px 36px; font-size:0.98rem; }
.btn-wa{ background:var(--whatsapp); color:#fff; box-shadow:0 12px 30px -14px rgba(12,117,101,0.85); }
.btn-wa:hover{ background:#0A6355; }
.btn svg{ width:17px; height:17px; flex-shrink:0; }

/* three contact affordances, side by side in the contact column */
.contact-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.contact-actions .btn{ padding:13px 22px; font-size:0.87rem; }

/* the same three as a floating rail, pinned to the right edge and vertically
   centred, stacked with a gap. Present at every breakpoint. */
.contact-rail{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:98;
  display:flex; flex-direction:column; gap:12px;
}
.contact-rail a{
  position:relative;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-content:center; color:#fff;
  box-shadow:0 10px 24px -8px rgba(9,42,112,0.45);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.contact-rail a:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 16px 30px -10px rgba(9,42,112,0.55); }
.contact-rail svg{ width:21px; height:21px; }
.rail-email{ background:var(--ember-ink); }
.rail-call{ background:var(--blue); }
.rail-wa{ background:var(--whatsapp); }

/* label slides out to the left on hover; touch devices just get the icons */
.contact-rail a span{
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:#fff; border-radius:8px;
  padding:7px 11px; font-size:0.72rem; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
  .contact-rail a:hover span{ opacity:1; transform:translateY(-50%) translateX(0); }
}

.wa-inline{
  display:inline-flex; align-items:center; gap:6px; margin-left:8px;
  font-size:0.78rem; font-weight:600; color:var(--glow);
  vertical-align:middle;
}
.wa-inline svg{ width:15px; height:15px; }

.txt-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.88rem; font-weight:600; color:var(--ember-ink);
}
.txt-link span{ transition:transform .25s; }
.txt-link:hover span{ transform:translateX(4px); }

/* ---------- header ---------- */
/* The logo's lettering is deep blue, so the header stays light at every scroll
   position rather than starting transparent over the dark hero. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line);
  transition:background .35s, box-shadow .35s;
}
.site-header.stuck{
  background:rgba(255,255,255,0.97);
  box-shadow:0 10px 34px -22px rgba(9,42,112,0.55);
}
.nav-inner{
  max-width:1220px; margin:0 auto; padding:0 clamp(20px,4vw,44px);
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand img{ height:70px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  position:relative; font-size:0.9rem; font-weight:500; color:var(--ink);
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--ember); transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{ color:var(--blue); }
.nav-links a:hover::after{ right:0; }
/* ---------- Services dropdown ---------- */
.nav-item{ position:relative; }
.nav-drop-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:0; border:0; background:none; cursor:pointer; position:relative;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:500; color:var(--ink);
  transition:color .25s;
}
.nav-drop-btn .chev{ width:11px; height:11px; transition:transform .28s; }
.nav-item.open .nav-drop-btn .chev{ transform:rotate(180deg); }
/* same sliding underline as the plain nav links */
.nav-drop-btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--ember); transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav-drop-btn:hover, .nav-item.open .nav-drop-btn{ color:var(--blue); }
.nav-drop-btn:hover::after, .nav-item.open .nav-drop-btn::after{ right:0; }

.nav-drop{
  position:absolute; top:calc(100% + 28px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(600px, 76vw); padding:18px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 30px 70px -28px rgba(9,42,112,0.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .24s, transform .24s cubic-bezier(.2,.7,.3,1), visibility .24s;
}
/* invisible bridge across the gap, so moving the pointer down from the button
   into the panel doesn't leave .nav-item and close it mid-travel */
.nav-drop::before{ content:""; position:absolute; left:0; right:0; top:-28px; height:28px; }
.nav-item.open .nav-drop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* The 600px two-column panel is sized for the eleven services. A dropdown with
   a handful of items needs a narrower, single-column one or it reads as mostly
   empty space. */
.nav-drop.is-compact{ width:min(272px, 76vw); }
.nav-drop.is-compact .nav-drop-grid{ grid-template-columns:1fr; }

.nav-drop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-drop-grid a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:0.87rem; font-weight:500; color:var(--ink);
  transition:background .2s, color .2s;
}
.nav-drop-grid a:hover{ background:var(--mist); color:var(--blue); }
.nav-drop-grid a[aria-current]{ background:var(--mist); color:var(--blue); }
.nd-ico{ font-size:1rem; line-height:1; flex-shrink:0; }
.nav-drop-all{
  display:block; margin-top:12px; padding-top:14px; text-align:center;
  border-top:1px solid var(--line);
  font-size:0.82rem; font-weight:600; color:var(--ember-ink);
}
.nav-drop-all:hover{ color:var(--blue); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{ padding:12px 24px; font-size:0.87rem; }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:12px; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{
  display:block; width:18px; height:1.6px; background:var(--ink); border-radius:2px;
  transition:transform .3s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.mobile-panel{
  display:none; position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
  padding:22px clamp(20px,5vw,44px) 34px;
  border-bottom:1px solid var(--line);
  box-shadow:0 26px 50px -30px rgba(9,42,112,0.5);
  /* with the services group expanded this list is longer than a phone screen */
  max-height:calc(100vh - var(--header-h));
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .28s;
}
.mobile-panel.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-panel a{
  display:block; padding:13px 0; font-size:1.05rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* collapsible services group — <details>, so it works with JS disabled */
.m-services summary{
  position:relative; display:block; cursor:pointer; list-style:none;
  padding:13px 30px 13px 0; border-bottom:1px solid var(--line);
  font-size:1.05rem; font-weight:500; color:var(--ink);
}
.m-services summary::-webkit-details-marker{ display:none; }
.m-services summary::after{
  content:""; position:absolute; right:6px; top:19px; width:9px; height:9px;
  border-right:1.8px solid var(--ember-ink); border-bottom:1.8px solid var(--ember-ink);
  transform:rotate(45deg); transition:transform .25s;
}
.m-services[open] summary::after{ transform:translateY(4px) rotate(-135deg); }
.m-services a{ padding-left:18px; font-size:0.95rem; color:var(--ink-soft); }
.m-services a[aria-current]{ color:var(--blue); font-weight:600; }
.mobile-panel .btn{ margin-top:22px; width:100%; }

/* ---------- hero ---------- */
.hero{ padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 clamp(64px,7vw,104px); }
.hero-inner{ display:grid; grid-template-columns:1.03fr 0.97fr; gap:clamp(40px,5vw,76px); align-items:center; }
.hero h1{ max-width:11ch; }
.hero h1 em{
  font-style:normal; white-space:nowrap;
  background:linear-gradient(100deg, var(--ember) 12%, var(--ember-soft) 55%, var(--glow) 105%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{ margin-top:26px; max-width:50ch; }
.hero-ctas{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:clamp(24px,4vw,48px); margin-top:52px; padding-top:34px; flex-wrap:wrap;
  border-top:1px solid var(--line-dark);
}
.hero-stats b{
  display:block; font-family:'Joan',Georgia,serif; font-weight:400;
  font-size:1.85rem; color:#fff; line-height:1;
}
.hero-stats span{
  display:block; margin-top:8px; font-size:0.72rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--on-dark-soft);
}

.hero-media{ position:relative; }
.hero-media img{
  width:100%; height:clamp(400px,52vw,600px); object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 140px var(--r-lg);
  box-shadow:0 50px 90px -40px rgba(0,0,0,0.85);
}
.hero-media::after{  /* cyan rim, echoing the logo's neon banner */
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--r-lg) var(--r-lg) 140px var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(148,234,251,0.3);
}
.float-card{
  position:absolute; right:-24px; bottom:-10px;
  display:flex; align-items:center; gap:13px;
  background:rgba(11,27,61,0.82);
  border:1px solid rgba(148,234,251,0.26); border-radius:16px;
  padding:15px 21px; box-shadow:0 24px 50px -24px rgba(0,0,0,0.8);
}
.float-card .pulse{
  width:9px; height:9px; border-radius:50%; background:var(--glow); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(148,234,251,0.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 13px rgba(148,234,251,0); }
  100%{ box-shadow:0 0 0 0 rgba(148,234,251,0); }
}
.float-card b{ display:block; color:#fff; font-size:0.95rem; font-weight:600; line-height:1.3; }
.float-card span{ font-size:0.76rem; color:var(--on-dark-soft); }

/* ---------- falling domain seeds (hero) ---------- */
/* TLDs drift down through the hero like seed heads settling into soil — the
   "sowing your domain" idea made literal. Purely decorative: aria-hidden, sits
   behind the content, animates only transform/opacity (both compositor-only,
   so this costs no layout or paint), pauses when scrolled out of view, and is
   removed outright under prefers-reduced-motion. */
.seed-fall{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.seed{
  position:absolute; top:0; left:var(--x);
  width:var(--s); height:var(--s);
  display:grid; place-content:center;
  border-radius:50%;
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:calc(var(--s) * 0.20);
  letter-spacing:0.02em; white-space:nowrap;
  color:var(--glow);
  background:radial-gradient(circle at 34% 28%,
    rgba(255,255,255,0.22), rgba(148,234,251,0.10) 45%, rgba(148,234,251,0.03) 72%);
  border:1px solid rgba(148,234,251,0.30);
  box-shadow:0 0 26px -8px rgba(148,234,251,0.45),
             inset 0 1px 1px rgba(255,255,255,0.22);
  opacity:0;
  animation:seed-fall var(--d) linear var(--delay) infinite;
}
@keyframes seed-fall{
  /* Peak opacity is deliberately low. These pass behind the headline and lede
     at some viewport widths, and at full strength the TLD labels compete with
     the copy for attention. They should read as ambient texture, not content. */
  0%   { transform:translate3d(0, -22vh, 0) scale(.82); opacity:0; }
  12%  { opacity:.62; }
  80%  { opacity:.62; }
  100% { transform:translate3d(var(--drift), 104vh, 0) scale(1.02); opacity:0; }
}
.seed-fall.paused .seed{ animation-play-state:paused; }
/* hero copy and media must sit above the seeds */
.hero .wrap{ position:relative; z-index:2; }

/* ---------- marquee ---------- */
.marquee{
  background:var(--soil-2); border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark); padding:19px 0; overflow:hidden;
}
.marquee-track{
  display:flex; gap:52px; width:max-content; align-items:center;
  animation:slide 46s linear infinite;
  font-size:0.76rem; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--on-dark-soft); font-weight:500;
}
.marquee-track span{ display:flex; align-items:center; gap:52px; white-space:nowrap; }
.marquee-track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ember); opacity:.75; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- story ---------- */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); align-items:center; }
.story-quote{
  font-family:'Joan',Georgia,serif; font-weight:400; font-size:clamp(1.3rem,2.3vw,1.72rem);
  line-height:1.42; color:var(--blue); letter-spacing:-0.015em;
}
.story-quote strong{ font-weight:400; color:var(--ember-ink); }
.story-body{ margin-top:26px; color:var(--ink-soft); }
.story-body + .story-body{ margin-top:16px; }
.story-media{ position:relative; }
.story-media img{
  width:100%; height:clamp(360px,44vw,520px); object-fit:cover; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
}
.story-seal{
  position:absolute; right:-18px; top:-18px;
  width:128px; height:128px; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-content:center; text-align:center;
  font-family:'Joan',Georgia,serif; line-height:1.15; padding:16px;
  box-shadow:0 24px 50px -22px rgba(9,42,112,0.75);
}
.story-seal b{ display:block; font-size:1.6rem; font-weight:400; }
.story-seal span{ font-family:'Outfit',sans-serif; font-size:0.63rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--glow); }

/* ---------- growth journey (the vine) ---------- */
.vine{ position:relative; margin-top:clamp(20px,3vw,40px); }
.vine::before{  /* the stem */
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, rgba(148,234,251,0.55) 8%, rgba(148,234,251,0.55) 88%, transparent);
}
.stage{
  position:relative; display:grid; grid-template-columns:1fr 96px 1fr; align-items:center;
  padding:clamp(22px,3vw,38px) 0;
}
.stage-media img{
  width:100%; height:clamp(230px,26vw,310px); object-fit:cover; border-radius:var(--r-md);
  box-shadow:0 34px 70px -34px rgba(0,0,0,0.9);
  border:1px solid rgba(148,234,251,0.16);
}
.stage-copy{ max-width:430px; }
.stage:nth-child(odd) .stage-copy{ padding-right:clamp(12px,3vw,40px); text-align:right; margin-left:auto; }
.stage:nth-child(even) .stage-copy{ padding-left:clamp(12px,3vw,40px); grid-column:3; grid-row:1; }
.stage:nth-child(even) .stage-media{ grid-column:1; grid-row:1; }
.stage-step{
  font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ember); display:block; margin-bottom:12px;
}
.stage-copy h3{ font-size:clamp(1.45rem,2.4vw,1.95rem); color:#fff; }
.stage-copy p{ margin-top:14px; color:var(--on-dark-soft); font-size:0.97rem; }
.stage-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.stage:nth-child(odd) .stage-tags{ justify-content:flex-end; }
.stage-tags li{
  font-size:0.74rem; letter-spacing:0.04em; padding:6px 13px; border-radius:999px;
  border:1px solid rgba(148,234,251,0.24); color:var(--glow); background:rgba(148,234,251,0.06);
}
.stage-node{
  grid-column:2; grid-row:1; justify-self:center;
  width:56px; height:56px; border-radius:50%; display:grid; place-content:center;
  background:var(--soil); border:1px solid rgba(148,234,251,0.4);
  font-family:'Joan',Georgia,serif; font-size:1.12rem; color:var(--glow);
  box-shadow:0 0 0 8px var(--soil), 0 0 34px -4px rgba(148,234,251,0.5);
  position:relative; z-index:2;
}
.stage:last-child .stage-node{
  background:var(--ember-ink); border-color:var(--ember-ink); color:#fff;
  /* the outer glow stays the vivid brand orange — it is pure light, not a
     text background, so it keeps some of the logo's neon warmth */
  box-shadow:0 0 0 8px var(--soil), 0 0 40px -2px rgba(250,111,26,0.8);
}

/* ---------- services ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
/* .svc is an <a> to the service page (only .svc-lead is still a div), so it
   needs an explicit display and the hover state now means something. */
.svc{ display:block; background:var(--paper); padding:clamp(26px,3vw,38px); }
.svc-go{
  display:inline-block; margin-top:18px;
  font-size:0.8rem; font-weight:600; color:var(--ember-ink);
  transition:color .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.svc:hover .svc-go{ color:var(--glow); transform:translateX(3px); }
.svc, .svc h3, .svc p, .svc .ico{
  transition:background .32s cubic-bezier(.2,.7,.3,1), color .32s cubic-bezier(.2,.7,.3,1);
}
.svc .ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-content:center;
  background:linear-gradient(150deg, rgba(13,54,146,0.09), rgba(148,234,251,0.20));
  margin-bottom:20px; font-size:1.2rem;
}
.svc h3{ font-size:1.1rem; color:var(--ink); }
.svc p{ margin-top:10px; font-size:0.9rem; color:var(--ink-soft); line-height:1.62; }
.svc-lead{ background:var(--blue); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.svc-lead h3{ color:#fff; font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.2; }
.svc-lead p{ color:rgba(234,241,255,0.72); margin-top:14px; font-size:0.94rem; }
.svc-lead .txt-link{ margin-top:22px; color:var(--glow); }

/* Hovering a service card promotes it to the same blue treatment as the lead
   cell, so the grid reads as one system rather than two. Colours are reused
   from .svc-lead deliberately. Contrast on --blue: white 10.7:1, body 5.69:1.
   Guarded by (hover:hover) — these cards are not links, and on touch the state
   would stick after a tap and read as a selection. */
@media (hover:hover){
  .svc:hover{ background:var(--blue); }
  .svc:hover h3{ color:#fff; }
  .svc:hover p{ color:rgba(234,241,255,0.72); }
  .svc:hover .ico{
    background:linear-gradient(150deg, rgba(148,234,251,0.32), rgba(255,255,255,0.10));
  }
}

/* ---------- split (why us) ---------- */
.split{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(40px,6vw,84px); align-items:center; }
.split-media img{ width:100%; height:clamp(380px,46vw,540px); object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-lift); }
.reasons{ display:grid; gap:26px; margin-top:34px; }
.reasons li{ display:flex; gap:18px; align-items:flex-start; }
.reasons .num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; display:grid; place-content:center;
  border:1px solid var(--line); background:var(--paper); color:var(--blue);
  font-family:'Joan',Georgia,serif; font-size:0.95rem;
}
.reasons h4{ font-size:1.03rem; color:var(--ink); }
.reasons p{ margin-top:5px; font-size:0.92rem; color:var(--ink-soft); }

/* ---------- service pages ---------- */
/* breadcrumb under the hero copy */
.crumbs{ margin-top:30px; font-size:0.8rem; color:var(--on-dark-soft); }
.crumbs a{ color:var(--glow); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ margin:0 6px; }
.crumbs span[aria-current]{ margin:0; color:#fff; }

/* two-up variant of .reasons, for "what's included" */
.reasons.two-col{ grid-template-columns:1fr 1fr; gap:30px 44px; margin-top:0; }

/* numbered process steps, on a dark section */
/* the global reset only clears <ul>; .steps is an <ol> and would otherwise
   show native markers next to the 01/02/03 numerals */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px);
  list-style:none; margin:0; padding:0;
}
.steps li{ position:relative; padding-top:16px; border-top:1px solid var(--line-dark); }
.step-n{
  display:block; font-family:'Joan',Georgia,serif; font-size:1.9rem;
  color:var(--glow); line-height:1; margin-bottom:14px;
}
.steps h4{ font-size:1.12rem; color:#fff; }
.steps p{ margin-top:11px; font-size:0.94rem; color:var(--on-dark-soft); line-height:1.65; }

/* plain, non-linking feature cards — deliberately NOT .svc, which is an <a>
   and turns blue on hover to signal navigation */
.point-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.point{
  padding:clamp(24px,3vw,34px); border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--paper);
}
.point h4{ font-size:1.05rem; color:var(--ink); }
.point p{ margin-top:10px; font-size:0.9rem; color:var(--ink-soft); line-height:1.62; }

/* ---------- SEO band ---------- */
.seo-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,80px); align-items:center; }
.seo-media img{
  width:100%; height:clamp(340px,42vw,470px); object-fit:cover; border-radius:var(--r-lg);
  border:1px solid rgba(148,234,251,0.18); box-shadow:0 44px 80px -40px rgba(0,0,0,0.9);
}
.seo-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px; }
.metric{
  padding:22px 20px; border-radius:var(--r-sm);
  background:rgba(148,234,251,0.06); border:1px solid rgba(148,234,251,0.16);
}
.metric b{ display:block; font-family:'Joan',Georgia,serif; font-size:1.5rem; color:var(--glow); font-weight:400; }
.metric span{ display:block; margin-top:6px; font-size:0.76rem; color:var(--on-dark-soft); line-height:1.45; }

/* ---------- industries ---------- */
/* Small heading that sits directly above a .industries chip row, for when the
   row needs naming separately from the section's own h2. */
.chips-head{ margin-bottom:18px; color:var(--ink); }
.dark .chips-head{ color:#fff; }

.industries{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  display:inline-flex; align-items:center; gap:11px;
  padding:13px 22px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); font-size:0.93rem; font-weight:500; color:var(--ink);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s,
             background .28s, color .28s;
}
.chip i{ font-style:normal; font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); transition:color .28s; }
.chip.hot{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.hot i{ color:var(--glow); }

/* Hovering a chip gives it the same blue treatment .chip.hot already carries,
   so the row reads as one system. White on --blue is 10.7:1 and the cyan tag
   is 7.9:1. Guarded like .svc:hover — chips aren't links, and the fully-blue
   state would stick after a tap on touch and read as a selection. */
@media (hover:hover){
  .chip:hover{
    transform:translateY(-3px); box-shadow:var(--shadow-soft);
    background:var(--blue); border-color:var(--blue); color:#fff;
  }
  .chip:hover i{ color:var(--glow); }
}

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); align-items:stretch; }
.plan{
  display:flex; flex-direction:column; padding:clamp(30px,3vw,40px);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.plan h3{ font-size:1.18rem; color:var(--ink); }
.plan .grow-note{ font-size:0.8rem; color:var(--ink-faint); margin-top:6px; }
.plan .amount{
  font-family:'Joan',Georgia,serif; font-weight:400; font-size:2.5rem; color:var(--blue);
  margin:22px 0 4px; line-height:1;
}
.plan .amount small{ font-family:'Outfit',sans-serif; font-size:0.8rem; color:var(--ink-faint); font-weight:400; }
.plan ul{ display:grid; gap:12px; margin:26px 0 30px; flex-grow:1; }
.plan li{ display:flex; gap:11px; font-size:0.9rem; color:var(--ink-soft); line-height:1.5; }
.plan li::before{ content:"✓"; color:var(--ember-ink); font-weight:700; flex-shrink:0; }
.plan.featured{ background:var(--blue); border-color:var(--blue); position:relative; box-shadow:var(--shadow-lift); }
.plan.featured h3{ color:#fff; }
.plan.featured .grow-note{ color:var(--glow); }
.plan.featured .amount{ color:#fff; }
.plan.featured .amount small{ color:rgba(234,241,255,0.78); }
.plan.featured li{ color:rgba(234,241,255,0.82); }
.plan.featured li::before{ color:var(--glow); }
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--ember-ink); color:#fff; font-size:0.66rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; padding:7px 18px; border-radius:999px;
  white-space:nowrap;
}
.pricing-foot{ margin-top:34px; text-align:center; font-size:0.88rem; color:var(--ink-faint); }

/* ---------- portfolio ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.work{
  border-radius:var(--r-md); overflow:hidden; background:var(--paper);
  border:1px solid var(--line); transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
}
.work:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.work-img{ position:relative; overflow:hidden; }
.work-img img{ width:100%; height:250px; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.work:hover .work-img img{ transform:scale(1.06); }
.work-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(7,18,43,0.86); color:var(--glow);
  font-size:0.66rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
}
.work-body{ padding:26px; }
.work-body h4{ font-size:1.08rem; color:var(--ink); }
.work-body p{ margin-top:9px; font-size:0.89rem; color:var(--ink-soft); }
.work-metric{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:0.82rem; color:var(--ember-ink); font-weight:600;
}

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.quote{ padding:clamp(28px,3vw,36px); border-radius:var(--r-md); background:var(--paper); border:1px solid var(--line); }
.quote .mark{
  font-family:'Joan',Georgia,serif; font-size:3rem; line-height:0.6; color:var(--glow);
  display:block; margin-bottom:16px;
}
.quote p{ font-size:0.97rem; color:var(--ink-soft); line-height:1.68; }
.who{ display:flex; align-items:center; gap:13px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.who .av{
  width:42px; height:42px; border-radius:50%; display:grid; place-content:center;
  background:var(--blue); color:#fff; font-family:'Joan',Georgia,serif; font-size:1rem; flex-shrink:0;
}
.who b{ display:block; font-size:0.92rem; color:var(--ink); font-weight:600; }
.who span{ font-size:0.79rem; color:var(--ink-faint); }

/* ---------- faq ---------- */
.faq-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{
  list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative;
  font-family:'Joan',Georgia,serif; font-size:1.08rem; font-weight:400; color:var(--blue);
  letter-spacing:-0.01em; line-height:1.35;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.8px solid var(--ember); border-bottom:1.8px solid var(--ember);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.faq-list details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-list p{ padding:0 30px 26px 0; color:var(--ink-soft); font-size:0.94rem; }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.post{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--paper); transition:transform .32s, box-shadow .32s; }
.post:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.post img{ width:100%; height:200px; object-fit:cover; }
.post-body{ padding:24px; }
.post-kicker{ font-size:0.68rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--ember-ink); }
.post-body h4{ margin-top:11px; font-size:1.03rem; color:var(--ink); line-height:1.32; }
.post-body .txt-link{ margin-top:16px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,5vw,76px); align-items:start; }
.info-block{ padding:20px 0; border-bottom:1px solid var(--line-dark); }
.info-block:first-of-type{ border-top:1px solid var(--line-dark); }
.info-block h4{ font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--glow); font-family:'Outfit',sans-serif; font-weight:600; }
.info-block p{ margin-top:7px; color:#fff; font-size:1rem; }
.info-block p.sm{ font-size:0.88rem; color:var(--on-dark-soft); }

.form-card{
  background:var(--paper); border-radius:var(--r-lg); padding:clamp(28px,3.4vw,44px);
  display:grid; gap:18px; box-shadow:0 40px 90px -40px rgba(0,0,0,0.7);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-card label{
  display:block; margin-bottom:8px; font-size:0.78rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);
}
.form-card input, .form-card select, .form-card textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:'Outfit',sans-serif; font-size:0.94rem; color:var(--ink); background:var(--mist);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{
  outline:none; border-color:var(--blue); background:var(--paper);
  box-shadow:0 0 0 4px rgba(13,54,146,0.09);
}
.form-card textarea{ resize:vertical; min-height:118px; }
.form-card .btn{ width:100%; margin-top:4px; }
/* The honeypot. Off-screen rather than display:none or hidden — a bot that
   skips invisible fields still fills this one, which is the point. aria-hidden
   and tabindex=-1 in the markup keep it away from screen readers and tabbing. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* What the form says back: the fetch result inline (.form-status) and the
   no-JS round trip's ?sent=1 banner (.form-flash). Same two states, so the
   colours live in one place. Both sit on the card, never on the .dark section
   behind it: --ok-ink is 6.6:1 on --paper, --alert 6.5:1. */
.form-status, .form-flash{
  font-size:0.86rem; font-weight:500; line-height:1.5; text-align:center;
  border-radius:var(--r-sm); padding:11px 14px; border:1px solid;
}
.form-status.is-ok,  .form-flash.is-ok{
  color:var(--ok-ink); background:rgba(11,106,80,0.07); border-color:rgba(11,106,80,0.20);
}
.form-status.is-bad, .form-flash.is-bad{
  color:var(--alert); background:rgba(179,38,30,0.07); border-color:rgba(179,38,30,0.20);
}
.form-status[hidden]{ display:none; }
/* The button says "Sending…" while the request is in flight. */
.form-card .btn[disabled]{ opacity:0.65; cursor:progress; }
.form-note{ font-size:0.78rem; color:var(--ink-faint); text-align:center; }

/* ---------- map embed (/contact/) ---------- */
/* Height is a clamp rather than the embed's own 4:3 — at the wrap's full width
   a 600x450 ratio would stand ~900px tall and push the area chips off screen.
   line-height:0 on the frame kills the inline-descender gap under the iframe. */
.map-embed{
  border-radius:var(--r-md); overflow:hidden; line-height:0;
  border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-soft);
}
.map-embed iframe{ display:block; width:100%; height:clamp(300px,40vw,460px); border:0; }
.map-note{ margin:14px 0 clamp(40px,5vw,60px); }

/* ---------- "Plant Your Domain" modal ---------- */
/* A real <dialog>, so the focus trap, the inert background and Escape all come
   from the platform. It lives in the top layer, which is why nothing here needs
   a z-index — it sits above the fixed header and the contact rail by definition.

   Deliberately no backdrop-filter: this backdrop covers the whole viewport, and
   the perf rule on this site is that blur stays on the two small surfaces (the
   header bar and the mobile panel) and nowhere else. */
.modal{
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  padding:0; border:0; background:transparent; color:var(--ink);
  overflow:visible;
}
.modal::backdrop{ background:rgba(7,18,43,0.66); }
.modal[open]{ animation:modal-in .3s cubic-bezier(.2,.8,.3,1) both; }
.modal[open]::backdrop{ animation:modal-fade .3s ease both; }
@keyframes modal-in{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
@keyframes modal-fade{ from{ opacity:0; } }

/* The card is a fixed head over a scrolling body rather than one scrolling box,
   so the close button never scrolls out of reach on a phone. */
.modal-card{
  display:flex; flex-direction:column; max-height:inherit; overflow:hidden;
  border-radius:var(--r-lg);
  /* the 4px seam is the brand's own soil→seed gradient, and it is a background
     rather than a ::before so it cannot be scrolled away by the body below */
  background:linear-gradient(90deg, var(--blue), var(--ember)) top/100% 4px no-repeat, var(--paper);
  box-shadow:0 50px 110px -40px rgba(7,18,43,0.8);
}
.modal-head{
  flex:none; position:relative;
  padding:clamp(24px,3vw,32px) clamp(22px,3vw,34px) clamp(18px,2vw,22px);
  padding-right:64px;                       /* clear of the close button */
  border-bottom:1px solid var(--line);
}
.modal-head .eyebrow{ margin-bottom:12px; }
.modal-head h2{ font-size:clamp(1.5rem,3.4vw,1.95rem); }
.modal-head p{ margin-top:12px; color:var(--ink-soft); font-size:0.95rem; }
.modal-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(20px,2.4vw,26px) clamp(22px,3vw,34px) clamp(24px,3vw,32px);
}
.modal-x{
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.modal-x svg{ width:17px; height:17px; }
.modal-x:hover{ background:var(--mist); color:var(--blue); border-color:var(--blue); }
.modal-x:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.modal-alt{
  margin-top:18px; text-align:center; font-size:0.88rem; color:var(--ink-faint);
}
.modal-alt a{ color:var(--ember-ink); font-weight:600; }

/* the modal reuses the enquiry form, minus the card treatment it wears in
   #contact — the dialog already IS the card */
.form-card-flat{
  background:transparent; box-shadow:none; padding:0; border-radius:0;
}

/* <dialog> does not stop the page behind it scrolling; the class does */
html.modal-open{ overflow:hidden; }

/* ---------- final CTA ---------- */
/* #contact and .cta-final are both .dark and ran together as one slab, so the
   closing CTA takes brand blue as its own full-bleed ground. Overrides the
   soil + radial gradients that .dark sets. The hairline keeps the edge against
   #contact crisp — the two grounds are only 1.7:1 apart in luminance and the
   separation is carried by hue. */
.cta-final{
  text-align:center;
  background-color:var(--blue);
  background-image:linear-gradient(152deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-top:1px solid rgba(148,234,251,0.18);
}
.cta-final h2{ max-width:28ch; margin:0 auto; }
.cta-final p{ margin:22px auto 0; max-width:52ch; color:var(--on-dark-soft); }
.cta-final .hero-ctas{ justify-content:center; margin-top:38px; }
/* Filled buttons need a light ring here: against this blue ground the orange
   is only 2.2:1 and the WhatsApp green 1.9:1, so neither edge would read. */
.cta-final .btn-primary,
.cta-final .btn-wa{
  box-shadow:0 0 0 1px rgba(255,255,255,0.30), 0 12px 30px -12px rgba(0,0,0,0.5);
}

/* ---------- footer ---------- */
/* Light ground here too, so the deep-blue logo lettering reads properly. */
footer{
  background:var(--sand); padding:clamp(60px,7vw,90px) 0 0; color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,52px); }
.foot-grid img{ height:44px; width:auto; margin-bottom:20px; }
.foot-about{ max-width:34ch; font-size:0.9rem; line-height:1.65; }
.foot-grid h5{
  font-family:'Outfit',sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ember-ink); margin-bottom:18px;
}
.foot-grid li{ margin-bottom:11px; }
.foot-grid li a{ font-size:0.89rem; transition:color .25s; }
.foot-grid li a:hover{ color:var(--blue); }
.foot-bottom{
  margin-top:clamp(46px,5vw,68px); padding:26px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.8rem;
  color:var(--ink-soft);
}

/* ---------- scroll reveal ---------- */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.09s; } .rise.d2{ transition-delay:.18s; } .rise.d3{ transition-delay:.27s; }

/* ---------- responsive ---------- */
/* The 70px logo is ~241px wide, so the nav needs its gap back before the
   hamburger takes over at 900px. */
@media (max-width:1180px){
  .nav-links{ gap:24px; }
}
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .point-grid{ grid-template-columns:repeat(2,1fr); }
  .work-grid,.quotes,.blog-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:0.85rem; }
}
@media (max-width:900px){
  :root{ --header-h:78px; }
  .brand img{ height:50px; }
  /* the fixed action bar takes over from the inline one, and the page needs
     room underneath it so the footer is never trapped behind it */
  .contact-rail{ right:12px; gap:10px; }
  .contact-rail a{ width:44px; height:44px; }
  .contact-rail svg{ width:19px; height:19px; }
  .nav-links,.nav-right .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-panel{ display:block; }
  .hero-inner,.story-grid,.split,.seo-grid,.faq-grid,.contact-grid{ grid-template-columns:1fr; }
  .split-media{ order:-1; }
  .pricing-grid{ grid-template-columns:1fr; }
  .plan.featured{ order:-1; }

  /* the vine moves to the left edge and every stage stacks behind it */
  .vine::before{ left:27px; }
  .stage{ grid-template-columns:56px 1fr; gap:0 22px; padding:26px 0; align-items:start; }
  .stage-node{ grid-column:1; grid-row:1; justify-self:start; }
  .stage-copy,
  .stage:nth-child(odd) .stage-copy,
  .stage:nth-child(even) .stage-copy{
    grid-column:2; grid-row:1; text-align:left; padding:0; margin:0; max-width:none;
  }
  .stage:nth-child(odd) .stage-tags{ justify-content:flex-start; }
  .stage-media,
  .stage:nth-child(even) .stage-media{ grid-column:2; grid-row:2; margin-top:22px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .seed:nth-child(n+7){ display:none; }   /* thin the seeds out on small screens */
  .services-grid,.work-grid,.quotes,.blog-grid,.point-grid,.steps{ grid-template-columns:1fr; }
  .reasons.two-col{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .seo-metrics{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-media img,.hero-media::after{ border-radius:var(--r-md) var(--r-md) 90px var(--r-md); }
  .float-card{ left: 12px; right: 12px; bottom: -30px; padding: 10px;}
  .story-seal{ width:96px; height:96px; right:8px; top:-14px; }
  .story-seal b{ font-size:1.25rem; }
  .foot-bottom{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .seed-fall{ display:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; transform:none; }
}