/* ============================================================
   HUNTERS STUDIO — websites page · scoped to .st-page
   Light-first, generous white space, navy + gold accents.
   Builds on styles.css tokens (navy / gold / ivory / type)
   ============================================================ */

body.st-page{
  --paper:#fbf9f4; --paper-2:#f3efe6; --ink:#14263b; --ink-dim:#5d6a78;
  --hair:rgba(20,38,59,.1); --em:#9a7327;
  background:var(--paper); color:var(--ink);
}
.st-page main{ overflow:hidden; }

/* nav stays solid navy over the light page */
.st-page .nav{ background:rgba(11,30,58,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(240,235,224,.08); }

/* ---------- shared type ---------- */
.st-kicker{ font-family:var(--ui); text-transform:uppercase; letter-spacing:.34em; font-size:clamp(.6rem,.76vw,.72rem);
  color:var(--gold); margin-bottom:1.1rem; }
.st-h2{ font-family:var(--display); font-weight:500; letter-spacing:-.015em; line-height:1.03;
  font-size:clamp(2.3rem,5.2vw,4.4rem); color:var(--ink); }
.st-h2 em, .st-h3 em{ font-style:italic; color:var(--em); }
.st-h3{ font-family:var(--display); font-weight:500; line-height:1.08; font-size:clamp(1.7rem,3vw,2.6rem); color:var(--ink); }
.st-h4{ font-family:var(--display); font-weight:500; line-height:1.15; font-size:clamp(1.12rem,1.5vw,1.32rem); color:var(--ink); margin-top:.35rem; }
.st-lead{ font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.6; color:var(--ink-dim); max-width:46ch; margin:1.4rem auto 0; }
.st-head{ text-align:center; max-width:900px; margin:0 auto clamp(3.5rem,8vh,6rem); }
.st-tag{ display:inline-block; font-family:var(--ui); font-size:.6rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--em); padding:.42rem .8rem; border:1px solid rgba(154,115,39,.3); border-radius:100px; background:rgba(230,200,127,.12); }

/* ---------- buttons ---------- */
.st-btn{ display:inline-flex; align-items:center; gap:1rem; font-family:var(--ui); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; text-decoration:none; padding:1.05rem 1.7rem; border-radius:100px;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s, color .4s; }
.st-btn svg{ width:30px; transition:transform .4s var(--ease-out); }
.st-btn:hover{ transform:translateY(-2px); }
.st-btn:hover svg{ transform:translateX(5px); }
.st-btn--dark{ background:var(--navy-dk); color:var(--ivory); box-shadow:0 14px 30px -14px rgba(11,30,58,.6); }
.st-btn--dark:hover{ box-shadow:0 20px 40px -16px rgba(11,30,58,.7); }
.st-btn--ghost{ color:var(--ink); border:1px solid rgba(20,38,59,.22); }
.st-btn--ghost:hover{ border-color:var(--ink); }
.st-btn--lg{ padding:1.25rem 2.2rem; font-size:.78rem; }
.st-link{ display:inline-flex; align-items:center; gap:.8rem; margin-top:1.6rem; font-family:var(--ui); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--gold-bright); text-decoration:none; }
.st-link svg{ width:28px; transition:transform .4s var(--ease-out); }
.st-link:hover svg{ transform:translateX(6px); }

/* ---------- device frames ---------- */
.st-browser{ position:relative; margin:0; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -40px rgba(11,30,58,.45), 0 12px 30px -18px rgba(11,30,58,.3);
  border:1px solid rgba(20,38,59,.08); }
.st-browser__bar{ display:flex; align-items:center; gap:.45rem; height:34px; padding:0 .9rem; background:#f1ede4;
  border-bottom:1px solid rgba(20,38,59,.08); }
.st-browser__bar i{ width:9px; height:9px; border-radius:50%; background:#d9d2c3; }
.st-browser__bar i:nth-child(1){ background:#e3a497; } .st-browser__bar i:nth-child(2){ background:#e7cf8e; } .st-browser__bar i:nth-child(3){ background:#a9c79a; }
.st-browser__bar span{ margin:0 auto; font-family:var(--ui); font-size:.62rem; letter-spacing:.04em; color:#8a8577;
  background:#fff; padding:.25rem 1rem; border-radius:100px; transform:translateX(-18px); }
.st-browser img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.st-browser--sm{ border-radius:10px; }
.st-browser--sm .st-browser__bar{ height:24px; }
.st-browser--sm .st-browser__bar i{ width:7px; height:7px; }

.st-phone{ position:relative; margin:0; container-type:inline-size; border-radius:clamp(16px,2.4vw,34px); padding:clamp(5px,.6vw,9px); background:#0f1a28;
  box-shadow:0 40px 70px -30px rgba(11,30,58,.6), 0 0 0 1px rgba(255,255,255,.06) inset; }
.st-phone img{ display:block; width:100%; height:auto; aspect-ratio:390/760; object-fit:cover; object-position:top; border-radius:clamp(11px,1.8vw,26px); }
.st-phone__notch{ position:absolute; top:6cqw; left:50%; transform:translateX(-50%); width:30%; height:7cqw; border-radius:20px; background:#0f1a28; z-index:2; }

/* ============ HERO ============ */
.st-hero{ position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center; gap:clamp(2rem,5vw,5rem); padding:clamp(8rem,16vh,11rem) var(--pad) clamp(4rem,10vh,7rem);
  max-width:1440px; margin:0 auto; }
.st-hero__bg{ position:absolute; inset:0 -50vw; z-index:-1; pointer-events:none; overflow:hidden; }
.st-hero__grid{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(20,38,59,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,38,59,.045) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 45%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 60% 55% at 60% 45%,#000 20%,transparent 75%); }
.st-orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.st-orb--a{ width:520px; height:520px; right:12%; top:8%; background:radial-gradient(circle,rgba(230,200,127,.38),transparent 70%); animation:st-drift 16s ease-in-out infinite; }
.st-orb--b{ width:440px; height:440px; left:30%; bottom:-10%; background:radial-gradient(circle,rgba(26,48,80,.14),transparent 70%); animation:st-drift 20s ease-in-out infinite reverse; }

.st-hero__title{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2.8rem,6vw,5.6rem); color:var(--ink); margin-bottom:1.8rem; }
.st-hero__title em{ font-style:italic; color:var(--em); }
.st-line{ display:block; overflow:hidden; padding-bottom:.08em; }
.st-line > *{ display:inline-block; }
.st-hero__sub{ font-family:var(--serif); font-size:clamp(1.2rem,1.6vw,1.45rem); line-height:1.6; color:var(--ink-dim); max-width:36ch; }
.st-hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

.st-hero__stage{ position:relative; }
.st-hero__browser{ width:100%; }
.st-hero__phone{ position:absolute; width:24%; min-width:118px; right:-3%; bottom:-14%; }
.st-hero__badge{ position:absolute; left:-4%; bottom:-7%; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ui); font-size:.64rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ink);
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:.8rem 1.1rem; border-radius:100px; box-shadow:0 18px 36px -18px rgba(11,30,58,.35); border:1px solid var(--hair); }
.st-dot{ width:8px; height:8px; border-radius:50%; background:#6fae7d; box-shadow:0 0 0 0 rgba(111,174,125,.5); animation:st-ping 2.2s ease-out infinite; }

/* hero entrance */
.st-in{ opacity:0; transform:translateY(30px); animation:st-rise 1.1s var(--ease-out) forwards; animation-delay:calc(.15s + var(--d,0) * .12s); }
.st-line .st-in{ transform:translateY(105%); }
.st-hero__stage{ opacity:0; transform:translateY(40px) scale(.97); animation:st-rise 1.4s var(--ease-out) .5s forwards; }
[data-float]{ will-change:transform; }

/* ============ FLAGSHIP · Hunters Countryside ============ */
.st-flag{ position:relative; overflow:hidden; text-align:center; color:var(--ivory);
  padding:clamp(6rem,14vh,10rem) var(--pad) clamp(6rem,14vh,9rem);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(58,96,70,.55), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(184,146,58,.14), transparent 60%),
    linear-gradient(180deg,#0f2a24 0%, #0c2130 55%, #0b1e3a 100%); }
.st-flag__bg{ position:absolute; inset:0; pointer-events:none; }
.st-orb--d{ width:620px; height:620px; left:-160px; top:20%; background:radial-gradient(circle,rgba(111,160,112,.25),transparent 70%); animation:st-drift 18s ease-in-out infinite; }
.st-orb--e{ width:520px; height:520px; right:-120px; bottom:-10%; background:radial-gradient(circle,rgba(230,200,127,.2),transparent 70%); animation:st-drift 22s ease-in-out infinite reverse; }
.st-flag > *:not(.st-flag__bg){ position:relative; z-index:1; }
.st-flag .st-kicker{ color:var(--gold-bright); }
.st-flag__title{ font-family:var(--display); font-weight:500; letter-spacing:-.025em; line-height:.98;
  font-size:clamp(3.2rem,9vw,8.4rem); color:var(--ivory); }
.st-flag__title em{ font-style:italic; color:var(--gold-bright); }
.st-flag__lead{ font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.6; color:rgba(240,235,224,.72);
  max-width:48ch; margin:1.6rem auto 0; }
.st-flag__stage{ position:relative; max-width:1080px; margin:clamp(3.5rem,8vh,5.5rem) auto 0; perspective:1600px; }
.st-flag__browser{ transform:rotateX(var(--tilt,14deg)); transform-origin:50% 100%; transition:transform .15s linear;
  border-color:rgba(240,235,224,.1); box-shadow:0 60px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(240,235,224,.06), 0 0 120px -30px rgba(230,200,127,.35); }
.st-browser__bar--dark{ background:#16241f; border-bottom-color:rgba(240,235,224,.08); }
.st-browser__bar--dark span{ background:rgba(240,235,224,.08); color:rgba(240,235,224,.6); }
.st-flag__phone{ position:absolute; width:19%; left:-5%; bottom:-16%; animation:st-bob 6s ease-in-out infinite; }
.st-flag__chip{ position:absolute; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--ui); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--ivory); padding:.75rem 1.05rem; border-radius:100px;
  background:rgba(15,34,40,.72); border:1px solid rgba(240,235,224,.14); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
.st-flag__chip--a{ right:-3%; top:14%; animation:st-bob 7s ease-in-out infinite; }
.st-flag__chip--b{ right:-2%; bottom:-6%; color:var(--gold-bright); animation:st-bob 8s ease-in-out 1s infinite; }
.st-flag__cats{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:clamp(4rem,9vh,6rem) auto 0; max-width:900px; }
.st-flag__cats li{ font-family:var(--ui); font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:rgba(240,235,224,.8);
  padding:.7rem 1.15rem; border-radius:100px; border:1px solid rgba(240,235,224,.16); transition:background .4s, color .4s, border-color .4s; }
.st-flag__cats li:hover{ background:var(--gold-bright); color:var(--navy-dk); border-color:var(--gold-bright); }
.st-flag__cta{ margin-top:2.6rem; }
.st-btn--light{ background:var(--ivory); color:var(--navy-dk); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }

/* ============ WHAT YOU GET · bento ============ */
.st-features{ background:var(--paper-2); padding:clamp(6rem,14vh,10rem) var(--pad); }
.st-bento{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(290px,auto); gap:clamp(1rem,1.6vw,1.4rem); }
.st-tile{ --mx:50%; --my:50%; position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
  padding:clamp(1.8rem,2.6vw,2.4rem); border-radius:24px; background:#fff; border:1px solid var(--hair);
  box-shadow:0 30px 60px -45px rgba(11,30,58,.45);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity 1s var(--ease-out); }
.st-tile::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(230,200,127,.22), transparent 60%); }
.st-tile:hover{ box-shadow:0 44px 80px -44px rgba(11,30,58,.55); }
.st-tile:hover::after{ opacity:1; }
.st-tile--wide{ grid-column:span 2; flex-direction:row; align-items:stretch; }
.st-tile--wide .st-tile__copy{ flex:1 1 50%; }
.st-tile--tall{ grid-row:span 2; }
.st-tile__n{ display:block; font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--em); margin-bottom:1rem; }
.st-tile h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,1.9vw,1.7rem); line-height:1.12; color:var(--ink); margin-bottom:.7rem; }
.st-tile p{ font-family:var(--serif); font-size:1.12rem; line-height:1.6; color:var(--ink-dim); max-width:34ch; }
.st-tile--navy{ background:linear-gradient(145deg,#132b47 0%,#0b1e3a 70%); border-color:rgba(240,235,224,.06); }
.st-tile--navy h3{ color:var(--ivory); } .st-tile--navy p{ color:rgba(240,235,224,.7); } .st-tile--navy .st-tile__n{ color:var(--gold-bright); }
.st-tile--gold{ background:linear-gradient(150deg,#f6e6bd 0%,#ecd18f 100%); border-color:rgba(154,115,39,.2); }
.st-tile--gold p{ color:#6d5a33; }
.st-tile__art{ position:relative; }

/* 01 · design */
.st-tile__art--design{ flex:1 1 50%; min-height:220px; }
.st-swatch{ display:inline-block; width:34px; height:34px; border-radius:50%; background:var(--c); margin-right:.45rem;
  border:2px solid rgba(240,235,224,.25); transform:scale(0); transition:transform .7s var(--ease-out); }
.is-in .st-swatch{ transform:scale(1); }
.is-in .st-swatch:nth-child(2){ transition-delay:.12s; } .is-in .st-swatch:nth-child(3){ transition-delay:.24s; } .is-in .st-swatch:nth-child(4){ transition-delay:.36s; }
.st-type{ position:absolute; right:0; top:-.6rem; font-family:var(--display); font-style:italic; font-size:3.4rem; color:var(--gold-bright); opacity:.85; }
.st-tile__art--design img{ position:absolute; right:-18%; bottom:-38%; width:92%; border-radius:12px; transform:rotate(-6deg) translateY(30px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); transition:transform 1.1s var(--ease-out) .2s; }
.is-in .st-tile__art--design img{ transform:rotate(-6deg) translateY(0); }
.st-tile--wide:hover .st-tile__art--design img{ transform:rotate(-3deg) translateY(-8px); }

/* 02 · phone */
.st-tile--tall .st-tile__art--phone{ flex:1; display:flex; justify-content:center; align-items:flex-end; margin:0 -1rem -3.2rem; }
.st-tile__art--phone .st-phone{ width:min(62%,230px); transform:translateY(40px) rotate(4deg); transition:transform 1.2s var(--ease-out) .2s; }
.is-in .st-tile__art--phone .st-phone{ transform:translateY(0) rotate(4deg); }
.st-tile--tall:hover .st-tile__art--phone .st-phone{ transform:translateY(-12px) rotate(0deg); }

/* 03 · search */
.st-search{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-radius:100px; background:var(--paper); border:1px solid var(--hair);
  font-family:var(--ui); font-size:.8rem; color:var(--ink); }
.st-search svg{ width:16px; height:16px; fill:none; stroke:var(--ink-dim); stroke-width:1.8; stroke-linecap:round; flex:none; }
.st-search__q{ display:inline-block; overflow:hidden; white-space:nowrap; width:0; border-right:2px solid var(--em); }
.is-in .st-search__q{ animation:st-type 1.6s steps(17) .4s forwards, st-caret .8s step-end 2.2s 6; }
.st-result{ display:flex; flex-direction:column; gap:.25rem; margin-top:.7rem; padding:.9rem 1rem; border-radius:14px; background:var(--paper);
  border:1px solid var(--hair); opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s var(--ease-out); transition-delay:2.2s; }
.is-in .st-result{ opacity:1; transform:none; }
.st-result b{ font-family:var(--display); font-weight:500; font-size:1.05rem; color:#1a4fa0; }
.st-result i{ font-style:normal; font-family:var(--ui); font-size:.68rem; color:#3d7a4a; }

/* 04 · open now */
.st-tile__art--open{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.st-open{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--ui); font-size:.72rem; font-weight:500; letter-spacing:.06em;
  color:#1f4d2c; background:#fff; padding:.65rem 1rem; border-radius:100px; box-shadow:0 12px 24px -14px rgba(109,90,51,.6); }
.st-open--ghost{ color:#6d5a33; background:rgba(255,255,255,.55); box-shadow:none; opacity:0; transform:translateX(-12px);
  transition:opacity .6s, transform .6s var(--ease-out); transition-delay:1s; }
.is-in .st-open--ghost{ opacity:1; transform:none; }

/* 05 · speed ring */
.st-tile__art--speed{ display:flex; justify-content:flex-end; margin-top:-.5rem; }
.st-tile__art--speed svg{ width:110px; height:110px; }
.st-ring__bg{ fill:none; stroke:var(--paper-2); stroke-width:8; }
.st-ring__fg{ fill:none; stroke:var(--gold); stroke-width:8; stroke-linecap:round; stroke-dasharray:302; stroke-dashoffset:302;
  transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset 1.8s var(--ease-out) .3s; }
.is-in .st-ring__fg{ stroke-dashoffset:0; }
.st-ring__lock{ fill:none; stroke:var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }

/* 06 · chat */
.st-tile__art--chat{ flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; gap:.7rem; }
.st-bubble{ max-width:90%; font-family:var(--ui); font-size:.8rem; line-height:1.45; padding:.85rem 1.1rem; border-radius:18px;
  opacity:0; transform:translateY(14px) scale(.96); transition:opacity .6s, transform .7s var(--ease-out); }
.st-bubble--you{ align-self:flex-start; background:rgba(240,235,224,.1); color:var(--ivory); border-bottom-left-radius:6px; transition-delay:.3s; }
.st-bubble--us{ align-self:flex-end; background:var(--gold-bright); color:var(--navy-dk); border-bottom-right-radius:6px; transition-delay:1.3s; }
.is-in .st-bubble{ opacity:1; transform:none; }

/* ============ STEPS (navy) ============ */
.st-steps{ position:relative; background:var(--navy-dk); color:var(--ivory); padding:clamp(6rem,14vh,10rem) var(--pad); overflow:hidden; }
.st-steps::before{ content:""; position:absolute; width:700px; height:700px; right:-200px; top:-300px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,200,127,.12),transparent 65%); animation:st-drift 18s ease-in-out infinite; }
.st-head--light .st-h2{ color:var(--ivory); }
.st-head--light .st-h2 em{ color:var(--gold-bright); }
.st-steps__list{ position:relative; z-index:1; list-style:none; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,4rem); }
.st-steps__n{ display:block; font-family:var(--display); font-style:italic; font-size:clamp(3.2rem,5vw,4.6rem); line-height:1; color:var(--gold-bright); margin-bottom:1.4rem; }
.st-steps__list h3{ font-family:var(--display); font-weight:500; font-size:1.55rem; margin-bottom:.8rem; }
.st-steps__list p{ font-family:var(--serif); font-size:1.15rem; line-height:1.6; color:var(--ivory-dim); }
.st-steps__line{ position:relative; z-index:1; display:block; max-width:1180px; height:1px; margin:clamp(3rem,7vh,5rem) auto 0; background:rgba(240,235,224,.14); }
.st-steps__line i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transition:transform 2.2s var(--ease-out); }
.st-steps.is-lit .st-steps__line i{ transform:scaleX(1); }

/* ============ AI (small) ============ */
.st-ai{ padding:clamp(5rem,12vh,8rem) var(--pad); background:var(--paper); }
.st-ai__inner{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center;
  padding:clamp(2.2rem,4vw,3.2rem); border-radius:22px; background:linear-gradient(135deg,#10233d,#0b1e3a);
  box-shadow:0 40px 80px -45px rgba(11,30,58,.7); color:var(--ivory); }
.st-ai__title{ color:var(--ivory); }
.st-ai__title em{ color:var(--gold-bright); }
.st-ai__text{ font-family:var(--serif); font-size:clamp(1.08rem,1.4vw,1.25rem); line-height:1.65; color:var(--ivory-dim); margin-top:1rem; max-width:52ch; }
.st-ai__viz{ position:relative; width:clamp(110px,14vw,150px); aspect-ratio:1; }
.st-ai__viz span{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(230,200,127,.45); animation:st-ring 3.6s ease-out infinite; }
.st-ai__viz span:nth-child(2){ animation-delay:1.2s; } .st-ai__viz span:nth-child(3){ animation-delay:2.4s; }
.st-ai__viz b{ position:absolute; inset:34%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f3dda2,#b8923a); box-shadow:0 0 40px rgba(230,200,127,.55); animation:st-breathe 3.6s ease-in-out infinite; }

/* ============ CLOSE ============ */
.st-close{ position:relative; text-align:center; padding:clamp(7rem,18vh,12rem) var(--pad) clamp(7rem,16vh,11rem); overflow:hidden; background:var(--paper); }
.st-close__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.st-orb--c{ width:620px; height:620px; left:50%; top:50%; margin:-310px 0 0 -310px; background:radial-gradient(circle,rgba(230,200,127,.3),transparent 68%); animation:st-breathe 8s ease-in-out infinite; }
.st-close > *:not(.st-close__bg){ position:relative; z-index:1; }
.st-close__title{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1; font-size:clamp(3.2rem,9vw,8rem); color:var(--ink); }
.st-close__title em{ font-style:italic; color:var(--em); }
.st-close__sub{ font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.4rem); color:var(--ink-dim); margin:1.6rem auto 2.6rem; max-width:40ch; }

/* footer sits on navy like every other page */
.st-page .foot{ background:var(--navy-dk); }

/* ============ scroll reveal ============ */
.st-reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay:var(--sd,0s); }
.st-reveal.is-in{ opacity:1; transform:none; }

/* ============ keyframes ============ */
@keyframes st-rise{ to{ opacity:1; transform:none; } }
@keyframes st-drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-60px,40px); } }
@keyframes st-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes st-type{ to{ width:17ch; } }
@keyframes st-caret{ 50%{ border-color:transparent; } }
@keyframes st-ping{ 0%{ box-shadow:0 0 0 0 rgba(111,174,125,.55); } 100%{ box-shadow:0 0 0 12px rgba(111,174,125,0); } }
@keyframes st-ring{ 0%{ transform:scale(.45); opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }
@keyframes st-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* ============ responsive ============ */
@media (max-width:1024px){
  .st-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-tile--tall{ grid-row:span 1; }
  .st-tile--tall .st-tile__art--phone{ max-height:250px; overflow:hidden; align-items:flex-start; margin-bottom:-2.4rem; }
  .st-tile__art--phone .st-phone{ width:min(52%,200px); }
}
@media (max-width:860px){
  .st-hero{ grid-template-columns:1fr; min-height:auto; text-align:left; }
  .st-hero__stage{ margin:1rem 4% 3rem; }
  .st-steps__list{ grid-template-columns:1fr; }
  .st-ai__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .st-flag__phone{ width:26%; left:-2%; }
  .st-flag__chip--a{ right:0; top:-8%; }
  .st-flag__chip--b{ display:none; }
}
@media (max-width:560px){
  .st-hero__badge{ left:0; bottom:-12%; }
  .st-hero__ctas .st-btn{ flex:1 1 auto; justify-content:center; }
  .st-bento{ grid-template-columns:1fr; }
  .st-tile--wide{ grid-column:auto; flex-direction:column; }
  .st-tile__art--design{ min-height:200px; }
  .st-tile__art--design img{ right:-10%; bottom:-30%; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .st-in, .st-hero__stage{ animation:none; opacity:1; transform:none; }
  .st-reveal{ opacity:1; transform:none; transition:none; }
  .st-orb, .st-steps::before, .st-ai__viz span, .st-ai__viz b, .st-dot, .st-flag__phone, .st-flag__chip{ animation:none; }
  .st-search__q{ width:auto; border:0; animation:none !important; }
  .st-swatch, .st-result, .st-open--ghost, .st-bubble, .st-ring__fg, .st-tile__art img, .st-tile__art .st-phone{ transition:none !important; }
  .st-flag__browser{ transform:none; }
}

/* hero kicker links out to huntersstudio.co.uk */
.st-kicker__link{ color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; padding-bottom:3px; transition:background-size .4s var(--ease-out); }
.st-kicker__link span{ display:inline-block; transition:transform .4s var(--ease-out); }
.st-kicker__link:hover{ background-size:100% 1px; }
.st-kicker__link:hover span{ transform:translate(3px,-3px); }