/* ============================================================
   Blue Lattes: dark cinematic redesign
   Type: Instrument Serif (display) · General Sans (UI/body) · Space Mono (labels)
   ============================================================ */
:root{
  --blue:#3daee8;
  --blue-dark:#1a8cc4;
  --blue-light:#a8dff5;
  --cream:#f5edda;
  --cream-dim:rgba(245,237,218,.74);
  --cream-faint:rgba(245,237,218,.5);
  --foam:#f1dbbc;
  --milk-a:#e6d2a8;
  --milk-b:#f3e6c8;
  --latte:#cd9a5e;
  --ink:#14120f;
  --ink-2:#100e0b;
  --panel:#1d1914;
  --panel-2:#221d16;
  --line:rgba(245,237,218,.10);
  --line-2:rgba(245,237,218,.17);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'General Sans','Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--ink-2);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.hide{display:none!important}

/* selection */
::selection{background:var(--blue);color:#0a0b0d}

/* ---------- shared type bits ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--latte)}
.sec-head{max-width:680px}
.sec-title{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;font-size:clamp(34px,5vw,62px);color:var(--cream);margin:18px 0 0}
.sec-title em{font-style:italic;color:var(--blue)}
.sec-lede{margin-top:20px;font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;color:var(--cream-dim);max-width:560px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .sec-lede{margin-left:auto;margin-right:auto}
.sec-head.split{max-width:none;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:end}
.sec-head.split .sec-lede{margin-top:0;max-width:440px;padding-bottom:.4rem}
@media(max-width:820px){.sec-head.split{grid-template-columns:1fr;gap:18px;align-items:start}.sec-head.split .sec-lede{padding-bottom:0}}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-size:15px;font-weight:600;border-radius:999px;padding:15px 28px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:transform .25s ease,background .2s,box-shadow .25s;will-change:transform}
.btn-blue{background:var(--blue);color:#0a0b0d;box-shadow:0 14px 34px -12px rgba(61,174,232,.7),0 1px 0 rgba(255,255,255,.5) inset}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(61,174,232,.8),0 1px 0 rgba(255,255,255,.5) inset}
.btn-ghost{background:rgba(245,237,218,.05);color:var(--cream);border-color:var(--line-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(245,237,218,.1)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(16,14,11,.72);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:21px;letter-spacing:-.01em;cursor:pointer}
.brand img{width:32px;height:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;color:var(--cream-dim);transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-links .nav-cta{padding:10px 20px;font-size:14px;font-weight:600;border-radius:999px;background:var(--blue);color:#0a0b0d}
.nav-burger{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:8px}
.nav-burger svg{width:26px;height:26px;stroke:currentColor;fill:none}
.mobile-menu{display:none;position:fixed;inset:74px 0 auto 0;z-index:79;background:rgba(16,14,11,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:18px 28px 26px;flex-direction:column;gap:6px}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:13px 6px;font-size:17px;color:var(--cream-dim);border-bottom:1px solid var(--line)}
.mobile-menu a.mm-cta{margin-top:12px;border:none;background:var(--blue);color:#0a0b0d;text-align:center;border-radius:999px;font-weight:600}
@media(max-width:820px){.nav-links{display:none}.nav-burger{display:block}}

/* ============================================================ HERO / POUR */
.hero{position:relative;width:100%;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden;
  background:radial-gradient(125% 95% at 50% -8%, #241e16 0%, #15130f 50%, #0d0b08 100%)}
/* layered liquid stages */
.goo-stage{position:absolute;inset:0;filter:url(#gooFilter);z-index:1;pointer-events:none}
.fx-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.blob{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
/* milk / foam pool the pour splashes into */
.milk{position:absolute;left:0;right:0;bottom:0;height:24%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--milk-b) 46%, var(--milk-a) 100%);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 38%);mask:linear-gradient(180deg,transparent 0,#000 38%);opacity:.9}
.milk::before{content:"";position:absolute;left:0;right:0;top:18%;height:42%;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--milk-a) 55%, transparent), transparent 70%);filter:blur(14px)}
.milk-sheen{position:absolute;left:0;right:0;bottom:0;height:24%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, rgba(255,255,255,.06));
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 60%);mask:linear-gradient(180deg,transparent 0,#000 60%)}
.hero-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(82% 74% at 50% 42%,transparent 40%,rgba(13,11,8,.66) 100%)}
.grain{position:absolute;inset:0;z-index:4;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pour-cup{position:absolute;z-index:5;width:248px;height:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5));pointer-events:none;transform-origin:50% 50%;animation:cupSway 6.5s ease-in-out infinite}
@keyframes cupSway{0%,100%{transform:rotate(144deg)}50%{transform:rotate(146.5deg)}}
.hero-inner{position:relative;z-index:6;max-width:940px;padding:0 24px clamp(84px,11vh,150px)}
.hero h1{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(48px,8.6vw,124px);line-height:.96;letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(13,11,8,.55),0 1px 3px rgba(13,11,8,.5)}
.hero h1 em{font-style:italic;color:#fff}
/* auto-contrast: cream copy of the headline, masked to the blue drip's footprint */
.hero h1.h1-cream{position:absolute;margin:0;color:var(--blue);pointer-events:none;z-index:1;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));mask-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
  text-shadow:0 2px 26px rgba(61,174,232,.45),0 1px 3px rgba(13,11,8,.5)}
.hero h1.h1-cream em{color:inherit}
.hero-sub{margin:28px auto 0;max-width:none;color:var(--cream-dim);font-size:clamp(15px,1.55vw,18px);line-height:1.5;text-shadow:0 1px 14px rgba(13,11,8,.7)}
.hero-btns{margin-top:clamp(64px,10vh,120px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* hero CTAs: solid blue with black text */
.hero-btns .btn-blue,.hero-btns .btn-ghost{background:var(--blue);color:#0a0b0d;border-color:transparent;backdrop-filter:none;
  box-shadow:0 14px 34px -12px rgba(61,174,232,.7),0 1px 0 rgba(255,255,255,.35) inset}
.hero-btns .btn-blue:hover,.hero-btns .btn-ghost:hover{background:var(--blue);transform:translateY(-2px);
  box-shadow:0 20px 44px -12px rgba(61,174,232,.85),0 1px 0 rgba(255,255,255,.35) inset}
/* ---- hero on phones ----------------------------------------------------------
   Three guaranteed invariants on every viewport height:
   1. the cup sits ABOVE the copy (top padding always clears the cup body)
   2. the headline + subtitle are sized up and centered in the band BETWEEN the
      cup and the foam (the foam zone is reserved out of the flex box)
   3. the CTAs are pulled out of flow and anchored inside the foam, lifted off the
      bottom by the safe-area inset so they can never be clipped               */
@media (max-width:600px){
  .hero{align-items:stretch;min-height:100svh}      /* svh = visible viewport (excludes address bar) */
  .pour-cup{width:126px}

  .hero-inner{position:relative;width:100%;min-height:100%;
    display:flex;flex-direction:column;justify-content:center;text-align:center;
    /* top pad clears the cup body on any height; bottom pad reserves the foam zone */
    padding-left:22px;padding-right:22px;
    padding-top:clamp(168px, calc(0.04 * 100svh + 152px), 204px);
    padding-bottom:30svh}

  /* headline scales with width AND height so it fills the gap without ever
     overflowing the line or colliding with the cup/CTAs on short screens */
  .hero h1{font-size:clamp(44px, min(16vw, 8.6svh), 64px);line-height:1.0}
  .hero-sub{font-size:clamp(16px, 4.5vw, 20px);margin-top:clamp(16px,2.4svh,24px);
    line-height:1.45;max-width:30ch;margin-left:auto;margin-right:auto}

  /* CTAs live in the foam, out of the flex flow, safe-area lifted off the bottom */
  .hero-btns{position:absolute;left:22px;right:22px;bottom:0;margin:0;
    transform:translateY(calc(-1 * (env(safe-area-inset-bottom, 0px) + clamp(26px, 7svh, 60px))));
    padding-top:0;flex-direction:column;align-items:center;gap:11px;width:auto}
  .hero-btns .btn{width:100%;max-width:340px;justify-content:center;padding:16px 22px;font-size:16px}
}


/* ============================================================ SECTION SHELL */
section.block{position:relative;padding:clamp(80px,11vw,140px) 0}
.block.alt{background:var(--ink)}
.hairline{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto}

/* ============================================================ WORK */
.work-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin-top:60px}
.work-col{display:flex;flex-direction:column;gap:26px}
.showcase{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(0,0,0,.8);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.showcase:hover{box-shadow:0 44px 80px -34px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}
.browser-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;background:#15120e;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#e06c5a}.dots i:nth-child(2){background:#e3b54e}.dots i:nth-child(3){background:#5cc26b}
.url{flex:1;font-family:var(--mono);font-size:11px;color:var(--cream-faint);background:#0e0c0a;border:1px solid var(--line);border-radius:7px;padding:6px 12px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewport{position:relative;overflow:hidden}
.viewport .gloss{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(122deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.08) 100%)}
.showcase .cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-top:1px solid var(--line);background:#15120e}
.cap .ct{font-weight:600;font-size:15px;color:var(--cream)}
.cap .cs{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--cream-faint);text-transform:uppercase}
.cap .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-light);background:rgba(61,174,232,.12);border:1px solid rgba(61,174,232,.28);border-radius:999px;padding:5px 10px;white-space:nowrap}
.work-note{margin-top:30px;font-family:var(--mono);font-size:12px;color:var(--cream-faint);display:flex;align-items:center;gap:10px}
.work-note .d{width:6px;height:6px;border-radius:50%;background:var(--latte)}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}

/* ---------- mock sites (inside browser viewports) ---------- */
.mock{font-family:var(--sans);overflow:hidden}
.mock .m-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:11px;letter-spacing:.04em}
.mock .m-nav .ml{display:flex;gap:16px;opacity:.6}
.mock .m-hero{padding:8px 20px 22px}
.mock .m-eyebrow{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase}
.mock .m-h{font-family:var(--serif);line-height:1.05;margin-top:8px}
.mock .m-h em{font-style:italic}
.mock .m-img{margin-top:14px;border-radius:7px;overflow:hidden;position:relative}
.mock .m-pill{display:inline-block;margin-top:12px;font-size:9px;padding:6px 12px;border-radius:99px;font-weight:600}
.mock-solv{background:#f3ede1;color:#1c1a16;height:100%}
.mock-solv .m-nav .brand{font-family:var(--serif);font-size:18px;letter-spacing:.08em}
.mock-solv .m-eyebrow{color:#a98b5e}
.mock-solv .m-h{font-size:clamp(22px,3vw,32px)}
.mock-solv .m-h em{color:#3a3630}
.mock-solv .m-img{height:132px;background:linear-gradient(125deg,#dccfb6,#c5b596)}
.mock-halden{background:#16140f;color:#f1ead9;height:100%}
.mock-halden .m-nav .brand{font-weight:700;font-size:13px;letter-spacing:.2em}
.mock-halden .m-eyebrow{color:var(--blue)}
.mock-halden .m-h{font-size:clamp(22px,2.8vw,30px);color:#fff}
.mock-halden .m-h em{color:var(--blue)}
.mock-halden .m-img{height:120px;background:linear-gradient(125deg,#22384c,#3daee8)}
.mock-halden .m-pill{background:var(--blue);color:#0a0b0d}
.mock-marlow{background:#fff;color:#171717;height:100%}
.mock-marlow .m-nav .brand{font-weight:600;font-size:13px}
.mock-marlow .m-eyebrow{color:var(--blue-dark)}
.mock-marlow .m-h{font-size:clamp(20px,2.6vw,28px)}
.mock-marlow .m-img{height:108px;background:linear-gradient(125deg,#eaeaed,#d3d3d9)}

/* ============================================================ FEATURE CARDS (approach) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px}
.feature{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px;overflow:hidden;isolation:isolate;transition:transform .35s,border-color .35s}
.feature:hover{transform:translateY(-6px);border-color:var(--line-2)}
.feature::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 100% 0%,var(--glow) 0%,transparent 55%);opacity:.6}
.feature .ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(245,237,218,.05);border:1px solid var(--line-2);margin-bottom:22px}
.feature .ico svg{width:26px;height:26px;stroke:var(--blue);fill:none}
.feature.blue .ico{background:var(--blue)}
.feature.blue .ico svg{stroke:#0a0b0d}
.feature h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.05;margin-bottom:12px}
.feature p{color:var(--cream-dim);font-size:15px;line-height:1.6}
@media(max-width:820px){.feature-grid{grid-template-columns:1fr}}

/* ============================================================ AUDIENCE CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:44px auto 0;max-width:760px}
.sec-head.wide-head{max-width:none}
/* sidebar two-column section: header+desc together on the left, content on the right */
.colsec{display:grid;grid-template-columns:minmax(290px,380px) 1fr;gap:clamp(36px,6vw,84px);align-items:start}
.colhead .sec-title{margin-top:16px;font-size:clamp(30px,3.4vw,46px);line-height:1.14}
.colhead .sec-lede{margin-top:22px;max-width:380px}
.colsec .feature-grid{grid-template-columns:1fr;gap:16px;margin-top:0}
.colsec .feature{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;padding:24px 28px}
.colsec .feature .ico{grid-row:1 / span 2;margin-bottom:0;width:48px;height:48px}
.colsec .feature .ico svg{width:24px;height:24px}
.colsec .feature h3{margin-bottom:6px;font-size:24px}
.colsec .feature p{margin:0}
@media(max-width:880px){.colsec{grid-template-columns:1fr;gap:30px}.colhead .sec-lede{max-width:560px}}
.chip{flex:0 0 auto;text-align:center;font-size:15px;color:var(--cream);background:rgba(245,237,218,.04);border:1px solid var(--line-2);border-radius:999px;padding:11px 20px;transition:background .2s,border-color .2s}
.chip:hover{background:rgba(61,174,232,.1);border-color:rgba(61,174,232,.4)}

/* ============================================================ SERVICES / PRICING */
.svc-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:none;margin:64px 0 0}
.price{position:relative;border-radius:22px;padding:34px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel)}
.price.feat{background:linear-gradient(180deg,#1e2730,#161c22);border-color:rgba(61,174,232,.4);box-shadow:0 30px 70px -34px rgba(61,174,232,.45)}
.price .badge{position:absolute;top:-13px;right:26px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:#0a0b0d;font-weight:700;padding:6px 13px;border-radius:999px}
.price h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;margin-bottom:10px}
.price .pdesc{color:var(--cream-dim);font-size:15px;line-height:1.6;flex-grow:0;margin-bottom:22px}
.price .ptag{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-weight:600;font-size:14.5px;padding:9px 16px;border-radius:999px;margin-bottom:26px}
.price .ptag svg{width:16px;height:16px;stroke:var(--blue);fill:none}
.price.plain .ptag{background:rgba(61,174,232,.12);color:var(--blue-light)}
.price.feat .ptag{background:rgba(245,237,218,.08);color:var(--cream)}
.plist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:4px}
.plist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--cream-dim);line-height:1.45}
.plist li svg{width:19px;height:19px;stroke:var(--blue);fill:none;flex-shrink:0;margin-top:1px}
.price .pnote{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--cream-faint)}
.addons{max-width:760px;margin:30px auto 0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 28px;color:var(--cream-dim);font-size:15px;line-height:1.6}
.addons strong{color:var(--cream)}
.quote-cta{max-width:880px;margin:34px auto 0;text-align:center;border-radius:24px;padding:clamp(34px,5vw,56px);position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,#23303a 0%,#15130f 70%);border:1px solid var(--line-2)}
.quote-cta h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.05;margin-bottom:14px}
.quote-cta h3 em{font-style:italic;color:var(--blue)}
.quote-cta p{color:var(--cream-dim);max-width:520px;margin:0 auto 28px;font-size:16px;line-height:1.55}
@media(max-width:820px){.svc-top{grid-template-columns:1fr;gap:28px}.price-grid{grid-template-columns:1fr}}

/* floating mock for services intro */
.svc-art{position:relative;display:flex;justify-content:center}
.svc-art .halo{position:absolute;inset:10% 18%;background:radial-gradient(circle,rgba(61,174,232,.3),transparent 65%);filter:blur(20px)}
.svc-card{position:relative;width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:20px;box-shadow:0 40px 70px -34px rgba(0,0,0,.85);animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
.svc-card .row{height:13px;border-radius:5px;background:rgba(245,237,218,.08);margin-bottom:11px}
.svc-card .row.w1{width:62%}.svc-card .row.img{height:96px;background:linear-gradient(125deg,rgba(61,174,232,.4),rgba(61,174,232,.12));margin:6px 0 14px}.svc-card .row.w2{width:84%}.svc-card .row.w3{width:48%;background:var(--blue);opacity:.85}

/* ============================================================ PROCESS / STEPS */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:64px;position:relative}
.step{position:relative;padding:0 22px 0 0}
.step .sn{font-family:var(--serif);font-style:italic;font-size:54px;color:var(--blue);opacity:.85;line-height:1}
.step .sline{height:1px;background:var(--line-2);margin:18px 0 16px;position:relative}
.step .sline::after{content:"";position:absolute;left:0;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.step h4{font-family:var(--sans);font-weight:600;font-size:18px;margin-bottom:9px}
.step p{font-size:14px;color:var(--cream-dim);line-height:1.55}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:34px 22px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ============================================================ TEAM */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:60px auto 0}
.member{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:32px;transition:transform .35s,border-color .35s}
.member:hover{transform:translateY(-5px);border-color:var(--line-2)}
.member .photo{width:100%;aspect-ratio:5/4;border-radius:16px;overflow:hidden;position:relative;margin-bottom:24px;background:#1a1611;border:1px solid var(--line)}
.member .photo .ph-stripe{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(245,237,218,.05) 0 12px,rgba(245,237,218,0) 12px 24px)}
.member .photo .ph-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cream-faint);text-align:center;text-transform:uppercase}
.member .photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.member h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;margin-bottom:6px}
.member .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.member p{color:var(--cream-dim);font-size:15px;line-height:1.62}
@media(max-width:760px){.team-grid{grid-template-columns:1fr}}

/* ============================================================ FAQ */
.faq{max-width:760px;margin:54px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);color:var(--cream);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-light)}
.faq .chev{width:24px;height:24px;flex-shrink:0;stroke:var(--blue);fill:none;transition:transform .3s}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .ans{padding:0 4px 26px;color:var(--cream-dim);font-size:15.5px;line-height:1.66;max-width:640px}
.faq .ans strong{color:var(--cream)}

/* ============================================================ CONTACT / FOOTER */
.contact{position:relative;background:radial-gradient(120% 90% at 50% 0%,#1d2730 0%,#100e0b 60%);padding:clamp(80px,11vw,130px) 0 50px;overflow:hidden;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.1;letter-spacing:-.01em}
.contact h2 em{font-style:italic;color:var(--blue)}
.contact .lede{margin-top:28px;color:var(--cream-dim);font-size:17px;line-height:1.6;max-width:420px}
.cinfo{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.cinfo .ci{display:flex;align-items:center;gap:14px}
.cinfo .ci .ib{width:44px;height:44px;border-radius:50%;background:rgba(245,237,218,.06);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cinfo .ci .ib svg{width:20px;height:20px;stroke:var(--blue);fill:none}
.cinfo .ci .t{font-weight:600;font-size:15px}
.cinfo .ci .s{font-size:13.5px;color:var(--cream-faint)}
.cinfo .ci a.s:hover{color:var(--blue)}
.form{background:rgba(245,237,218,.035);border:1px solid var(--line-2);border-radius:24px;padding:30px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--cream-dim);margin-bottom:7px;font-weight:500}
.field label .opt{color:var(--cream-faint);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:rgba(16,14,11,.5);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;color:var(--cream);font-family:var(--sans);font-size:15px;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,237,218,.33)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:rgba(16,14,11,.75)}
.field textarea{resize:vertical;min-height:104px}
.field.sel{position:relative}
.field.sel .chev{position:absolute;right:14px;bottom:15px;width:16px;height:16px;stroke:var(--cream-faint);fill:none;pointer-events:none}
.field select{appearance:none;cursor:pointer}
.field select option{background:#15130f;color:var(--cream)}
.form .btn-blue{width:100%;justify-content:center;margin-top:6px}
.form .fnote{text-align:center;font-size:12px;color:var(--cream-faint);margin-top:14px}
.form-msg{margin-top:14px;padding:13px 16px;border-radius:12px;text-align:center;font-size:14px;font-weight:500}
.form-msg.ok{background:rgba(61,174,232,.16);color:var(--blue-light);border:1px solid rgba(61,174,232,.4)}
.form-msg.err{background:rgba(224,108,90,.14);color:#f0b3a8;border:1px solid rgba(224,108,90,.4)}
.form-msg.err a{text-decoration:underline}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:480px){.frow{grid-template-columns:1fr}}

.foot{border-top:1px solid var(--line);margin-top:64px;padding-top:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot .brand{font-size:18px}
.foot .brand img{width:28px}
.foot .fcopy{font-family:var(--mono);font-size:11.5px;color:var(--cream-faint);letter-spacing:.03em;text-align:right;line-height:1.6}

/* ============================================================ AMBIENT (subtle per-section light + texture) */
/* faint film grain over the whole page */
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}

/* every content section clips its own slow-drifting light pool */
section.block{overflow:hidden}
section.block::before{content:"";position:absolute;z-index:0;pointer-events:none;width:46rem;height:46rem;border-radius:50%;
  top:-13rem;right:-9rem;background:radial-gradient(circle, rgba(61,174,232,.15), transparent 62%);
  animation:driftGlow 23s ease-in-out infinite}
@keyframes driftGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3rem,2.6rem) scale(1.13)}}

/* per-section variation in hue, position + a second pool where it adds depth */
#approach::after{content:"";position:absolute;z-index:0;pointer-events:none;width:38rem;height:38rem;border-radius:50%;
  bottom:-13rem;left:-9rem;background:radial-gradient(circle, rgba(205,154,94,.10), transparent 62%);animation:driftGlow 28s ease-in-out infinite reverse}
#audience::before{background:radial-gradient(circle, rgba(205,154,94,.13), transparent 62%);top:auto;right:auto;bottom:-15rem;left:-10rem}
#audience::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,237,218,.06) 1px, transparent 1.6px);background-size:30px 30px;
  -webkit-mask:radial-gradient(58% 56% at 50% 45%, #000, transparent 78%);mask:radial-gradient(58% 56% at 50% 45%, #000, transparent 78%)}
#services::before{background:radial-gradient(circle, rgba(205,154,94,.13), transparent 62%);top:-10rem;left:-12rem;right:auto}
#process::before{background:radial-gradient(circle, rgba(61,174,232,.13), transparent 60%);top:auto;right:auto;bottom:-17rem;left:50%;margin-left:-23rem}
#team::before{background:radial-gradient(circle, rgba(168,223,245,.12), transparent 62%);top:-12rem;left:-8rem;right:auto}
#team::after{content:"";position:absolute;z-index:0;pointer-events:none;width:40rem;height:40rem;border-radius:50%;
  bottom:-15rem;right:-8rem;background:radial-gradient(circle, rgba(61,174,232,.10), transparent 62%);animation:driftGlow 26s ease-in-out infinite reverse}
#faq::before{background:radial-gradient(circle, rgba(61,174,232,.09), transparent 60%);top:40%;right:-17rem}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

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