/* ============================================================
   Outsourced Studio — site design system (FS-78 redesign).
   Ported from the CEO-approved concept. Brand tokens:
   accent #3B5BFF, near-black #15151A, Poppins.
   One shared stylesheet for every page. No external resources
   are loaded from here (fonts are linked from the HTML head);
   every hex colour stays inside the approved palette, and the
   lighter blue tints and placeholder photo fills use rgba().
   ============================================================ */
:root{
  --ink:#15151A;
  --white:#FFFFFF;
  --section-light:#F7F7FB;
  --card:#F1F1F7;
  --dark:#15151A;
  --border:#E6E6EE;
  --subtle:#B7C0D6;
  --text-secondary:#6E6E7C;
  --body-text:#55555F;
  --on-dark-muted:#B7C0D6;
  --accent:#3B5BFF;
  --accent-weak:rgba(59,91,255,.08);
  --accent-ring:rgba(59,91,255,.28);
  --accent-text:#FFFFFF;
  --accent-soft:rgba(142,162,255,1);
  --accent-softer:rgba(157,176,255,1);
  --on-dark-lede:rgba(198,206,226,1);
  --on-dark-dim:rgba(170,179,204,1);
  --radius:24px;
  --radius-sm:16px;
  --header-h:80px;
  --shadow:0 18px 50px -24px rgba(21,21,26,.28);
  --shadow-soft:0 10px 30px -18px rgba(21,21,26,.22);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}
.on-dark :focus-visible,.cta :focus-visible,.site-footer :focus-visible,.proof :focus-visible,.contact-band :focus-visible,.hero-banner :focus-visible{outline-color:var(--white);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:12px;background:var(--white);padding:8px 12px;z-index:60;border-radius:8px;}

/* ---------- brand / header ---------- */
.brand{font-weight:800;font-size:1.35rem;letter-spacing:-.5px;text-transform:lowercase;text-decoration:none;white-space:nowrap;}
.brand .b1{color:var(--ink);}
.brand .b2{color:var(--accent);}
.site-footer .brand .b1{color:var(--white);}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);padding:18px 0;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;color:var(--ink);position:relative;}
.nav a:hover{color:var(--accent);}
.nav a[aria-current="page"]{color:var(--accent);}

/* ---------- mobile nav toggle (CSS-only hamburger, no JS) ---------- */
/* The checkbox (#navtoggle, hidden) is flipped by its <label class="nav-burger">.
   On desktop the burger and the in-panel CTA are hidden; the horizontal nav and
   the Services dropdown behave exactly as before. The panel itself lives in the
   max-width:900px block below. */
.nav-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--white);color:var(--ink);cursor:pointer;transition:border-color .16s ease,color .16s ease;}
.nav-burger:hover{border-color:var(--accent-ring);color:var(--accent);}
.nav-burger .nav-burger-bars{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:background .18s ease;}
.nav-burger .nav-burger-bars::before,.nav-burger .nav-burger-bars::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease;}
.nav-burger .nav-burger-bars::before{top:-7px;}
.nav-burger .nav-burger-bars::after{top:7px;}
#navtoggle:checked ~ .nav-burger .nav-burger-bars{background:transparent;}
#navtoggle:checked ~ .nav-burger .nav-burger-bars::before{transform:translateY(7px) rotate(45deg);}
#navtoggle:checked ~ .nav-burger .nav-burger-bars::after{transform:translateY(-7px) rotate(-45deg);}
/* .nav .nav-cta (two classes) outranks .btn so the in-panel CTA stays hidden on desktop. */
.nav .nav-cta{display:none;}

/* ---------- buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:999px;font-family:inherit;font-weight:700;font-size:.95rem;white-space:nowrap;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-accent{background:var(--accent);color:var(--accent-text);box-shadow:0 10px 24px -12px var(--accent-ring);}
.btn-accent:hover{box-shadow:0 16px 30px -12px var(--accent-ring);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--white);}
.btn-light{background:var(--white);color:var(--ink);}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4);}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);}
.btn-sm{padding:10px 20px;font-size:.88rem;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--accent-weak);color:var(--accent);font-size:.75rem;font-weight:700;width:fit-content;}

/* ---------- typography ---------- */
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 18px;}
.on-dark .eyebrow,.proof .eyebrow,.contact-band .eyebrow{color:var(--on-dark-muted);}
h1,.display{font-weight:800;font-size:clamp(2.6rem,6vw,4.3rem);letter-spacing:-1.5px;line-height:1.03;margin:0 0 24px;}
h2,.section-title{font-weight:700;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.6px;line-height:1.14;margin:0 0 16px;}
h3{font-size:1.15rem;font-weight:700;margin:0;line-height:1.3;}
.lede{font-size:1.18rem;line-height:1.6;color:var(--body-text);max-width:600px;margin:0 0 36px;}
.lede--flush{margin-bottom:0;}
.on-dark .lede,.on-dark p,.proof .lede,.proof p{color:var(--on-dark-muted);}
.section-head{max-width:720px;margin:0 0 48px;}
.section-head.compact{margin-bottom:24px;}
.section-head p{color:var(--body-text);font-size:1.06rem;line-height:1.6;margin:0;}
.muted{color:var(--text-secondary);font-weight:600;font-size:1rem;}

/* ---------- sections ---------- */
.section{padding:88px 0;}
.section.flush-top{padding-top:0;}
.section.tight-top{padding-top:24px;}
.section-light{background:var(--section-light);}
.on-dark,.proof{background:var(--dark);color:var(--white);}

/* ---------- HERO base (sub pages) ---------- */
.hero{padding:84px 0 92px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-120px;right:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,var(--accent-weak),transparent 70%);z-index:0;}
.hero .wrap{position:relative;z-index:1;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;position:relative;z-index:1;}
.hero-small{padding:64px 0 52px;}
.hero-small .lede{margin-bottom:28px;}

/* ---------- SERVICE HERO: two-column, photo card "A" (FS-78) ---------- */
.svc-hero{padding:52px 0 60px;}
.svc-hero .wrap{position:relative;z-index:1;}
.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.svc-hero-copy{max-width:560px;}
.svc-hero-copy .crumb{margin-bottom:18px;}
.svc-hero-copy .eyebrow{margin-bottom:16px;}
.svc-hero-copy h1{font-size:clamp(2.1rem,4.4vw,3.25rem);letter-spacing:-1px;margin-bottom:20px;}
.svc-hero-copy .lede{margin-bottom:28px;}
.svc-hero .hero-actions{margin-bottom:0;}
/* photo card — accent panel offset behind, keyline + soft shadow */
.svc-hero-media{position:relative;}
.svc-hero-media::before{content:"";position:absolute;right:-18px;bottom:-18px;
  width:72%;height:74%;border-radius:var(--radius);background:var(--accent-weak);
  border:1px solid var(--accent-ring);z-index:0;}
.svc-photo-card{position:relative;z-index:1;margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--border);background:var(--card);}
.svc-photo-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.svc-photo-card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(59,91,255,.12);pointer-events:none;}
@media (max-width:980px){
  /* on mobile the photo goes BELOW the text */
  .svc-hero-grid{grid-template-columns:1fr;gap:36px;}
  .svc-hero-copy{max-width:640px;}
  .svc-hero-media{order:2;}
  .svc-hero-media::before{right:-12px;bottom:-12px;}
}
@media (max-width:640px){
  .svc-hero{padding:30px 0 44px;}
  .svc-hero-media::before{right:-8px;bottom:-8px;width:78%;height:70%;}
}

/* ---------- HERO BANNER (home) ---------- */
.hero-banner{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:calc(100svh - var(--header-h));padding:clamp(16px,4svh,48px) 0;}
.hero-banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(130% 120% at 74% 34%,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 46%,transparent 78%);
  mask-image:radial-gradient(130% 120% at 74% 34%,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 46%,transparent 78%);}
.hb-bg{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hb-bg::before{content:"";position:absolute;top:-24%;right:-8%;width:760px;height:760px;max-width:120vw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(59,91,255,.5),rgba(59,91,255,.12) 44%,transparent 70%);
  animation:hbGlow 16s ease-in-out infinite;}
.hb-bg::after{content:"";position:absolute;left:-18%;bottom:-42%;width:640px;height:640px;max-width:110vw;border-radius:50%;
  background:radial-gradient(circle,rgba(59,91,255,.2),transparent 66%);}
.hero-banner .wrap{position:relative;z-index:2;}
.hb-inner{display:grid;grid-template-columns:1.05fr .92fr;gap:52px;align-items:center;}
.hb-copy{max-width:600px;}
.hb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent-softer);margin:0 0 clamp(8px,1.6svh,16px);}
.hb-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent);}
.hb-title{font-weight:800;font-size:clamp(1.7rem,min(8vw,5svh),3.2rem);line-height:1.05;letter-spacing:-1.2px;margin:0 0 clamp(10px,2svh,18px);color:var(--white);}
.hb-title .hb-accent{color:var(--accent-soft);}
.hb-lede{font-size:clamp(0.98rem,min(2.6vw,1.9svh),1.1rem);line-height:1.5;color:var(--on-dark-lede);max-width:520px;margin:0 0 clamp(14px,2.6svh,26px);}
.hero-banner .hero-actions{margin-bottom:clamp(10px,2svh,18px);}
.hb-sub{display:inline-flex;align-items:center;gap:9px;color:var(--on-dark-dim);font-size:.92rem;font-weight:600;text-decoration:none;cursor:pointer;transition:color .16s ease;}
.hb-sub:hover{color:var(--white);}
.hb-sub .hb-arrow{color:var(--accent-soft);font-weight:800;transition:transform .18s ease;}
.hb-sub:hover .hb-arrow{transform:translateX(4px);}
.hb-visual{position:relative;display:flex;justify-content:center;align-items:center;}
.hb-visual svg{width:100%;max-width:480px;max-height:min(440px,52svh);height:auto;display:block;overflow:visible;}
.hb-rot{transform-box:view-box;transform-origin:260px 260px;animation:hbSpin 64s linear infinite;}
.hb-rot--rev{transform-box:view-box;transform-origin:260px 260px;animation:hbSpin 48s linear infinite reverse;}
.hb-coreglow{transform-origin:260px 260px;transform-box:fill-box;animation:hbPulse 6s ease-in-out infinite;}
.hb-float{animation:hbFloat 7s ease-in-out infinite;}
.hb-float--b{animation:hbFloat 9s ease-in-out infinite .7s;}
.hb-float--c{animation:hbFloat 8s ease-in-out infinite 1.2s;}
@keyframes hbSpin{to{transform:rotate(360deg);}}
@keyframes hbGlow{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.07);}}
@keyframes hbPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes hbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion:reduce){
  .hb-bg::before,.hb-rot,.hb-rot--rev,.hb-coreglow,.hb-float,.hb-float--b,.hb-float--c{animation:none;}
}

/* ---------- feature strip: number-forward stat tiles ---------- */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--white);}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:30px;padding-bottom:30px;}
.strip .item{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);transition:border-color .18s ease,box-shadow .18s ease;}
.strip .item:hover{border-color:var(--accent-ring);box-shadow:var(--shadow-soft);}
.strip .item .k{color:var(--accent);font-weight:800;font-size:3.1rem;letter-spacing:-2px;line-height:1;}
.strip .item b{font-size:1rem;}
.strip .item small{color:var(--text-secondary);font-size:.85rem;line-height:1.45;}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:10px;}
.section-light .card{background:var(--white);border:1px solid var(--border);}
.card p{font-size:.95rem;line-height:1.55;color:var(--body-text);margin:0;}
.step-no{font-weight:800;font-size:.9rem;color:var(--accent);}

/* ---------- services: icon boxes (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;}
.svc-box{grid-column:span 4;position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:26px 24px 22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.section-light .svc-box{background:var(--white);}
.svc-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--accent-ring);}
.svc-box .svc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.svc-box .svc-ico{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:14px;background:var(--accent-weak);border:1px solid var(--accent-ring);color:var(--accent);transition:background .18s ease,color .18s ease,transform .18s ease;}
.svc-box .svc-ico svg{width:28px;height:28px;}
.svc-box:hover .svc-ico{background:var(--accent);color:var(--white);transform:rotate(-4deg) scale(1.04);}
.svc-box .svc-no{font-size:.8rem;font-weight:800;letter-spacing:1px;color:var(--accent);}
.svc-box h3{font-size:1.16rem;}
.svc-box p{margin:0;font-size:.9rem;line-height:1.5;color:var(--body-text);flex-grow:1;}
.svc-box .svc-link{font-size:.85rem;font-weight:700;color:var(--ink);margin-top:4px;transition:transform .18s ease;}
.svc-box:hover .svc-link{color:var(--accent);transform:translateX(3px);}
.svc-box .svc-flag{background:var(--ink);color:var(--white);font-size:.58rem;letter-spacing:.5px;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:999px;}

/* ---------- studio / professionals teaser ---------- */
.people-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.people-head .section-head{margin:0;}
.people-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
.person{grid-column:span 3;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;padding:0;display:flex;flex-direction:column;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.person:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:var(--subtle);}
.person .photo{aspect-ratio:1/1;background:linear-gradient(140deg,#F1F1F7,#E6E6EE);display:grid;place-items:center;color:var(--subtle);font-size:.8rem;font-weight:700;letter-spacing:1px;position:relative;}
.person:hover .photo{background:linear-gradient(140deg,#F7F7FB,#E6E6EE);}
.person .photo .ph-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);color:var(--text-secondary);font-size:.62rem;letter-spacing:.5px;padding:4px 9px;border-radius:999px;font-weight:700;text-transform:uppercase;}
.person .photo .ph-tag--founder{background:var(--ink);color:var(--white);}
.person .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.person .meta{padding:18px 20px 22px;display:flex;flex-direction:column;gap:3px;}
.person .meta .role{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.3px;}
.person .meta .nm{font-size:1.1rem;font-weight:700;letter-spacing:-.3px;}
.person .meta .arrow{margin-top:10px;font-size:.85rem;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
.person:hover .meta .arrow{color:var(--accent);}
.founder-badge{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:var(--white);font-size:.62rem;letter-spacing:.5px;padding:4px 9px;border-radius:999px;font-weight:700;text-transform:uppercase;margin-bottom:14px;}

/* ---------- proof / trust dark band ---------- */
.proof{padding:84px 0;}
.proof .proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.proof .quote{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.5px;line-height:1.3;margin:0 0 20px;color:var(--white);}
.promises{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.promises li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);}
.promises li:first-child{border-top:0;}
.promises .pm-ico{color:var(--accent);flex:0 0 auto;margin-top:2px;}
.promises b{display:block;color:var(--white);font-size:1rem;}
.promises small{color:var(--on-dark-muted);font-size:.88rem;line-height:1.5;}

/* ---------- nav dropdown ---------- */
.nav .has-menu{position:relative;display:flex;align-items:center;}
.menu-trigger{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;}
.menu-trigger svg{width:12px;height:12px;transition:transform .2s ease;}
.nav .has-menu:hover .menu-trigger,.nav .has-menu:focus-within .menu-trigger{color:var(--accent);}
.nav .has-menu:hover .menu-trigger svg,.nav .has-menu:focus-within .menu-trigger svg{transform:rotate(180deg);}
.dropdown{position:absolute;top:100%;left:50%;width:380px;padding:10px;margin-top:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity .18s ease,transform .18s ease;z-index:45;}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav .has-menu:hover .dropdown,.nav .has-menu:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dd-item{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit;cursor:pointer;transition:background .16s ease;}
.dd-item:hover{background:var(--section-light);}
.dd-item .dd-no{color:var(--accent);font-weight:800;font-size:.8rem;min-width:22px;padding-top:1px;}
.dd-item b{display:block;font-size:.92rem;font-weight:700;}
.dd-item small{display:block;color:var(--text-secondary);font-size:.78rem;line-height:1.4;margin-top:1px;}
.dd-flag{display:inline-block;margin-left:6px;background:var(--accent-weak);color:var(--accent);font-size:.6rem;letter-spacing:.4px;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:999px;vertical-align:middle;}

/* ---------- service landing page ---------- */
.narrow{max-width:860px;}
.svc-page-intro{font-size:1.1rem;line-height:1.7;color:var(--body-text);max-width:760px;margin:0;}
.svc-page-intro+.svc-page-intro{margin-top:18px;}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.incl li{display:flex;gap:12px;font-size:.95rem;line-height:1.52;color:var(--body-text);}
.incl li svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:2px;}
.incl li b{color:var(--ink);font-weight:700;}
.flow{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:14px;}
.flow li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--body-text);counter-increment:step;}
.flow li::before{content:counter(step,decimal-leading-zero);flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-weak);color:var(--accent);font-weight:800;font-size:.78rem;display:grid;place-items:center;}
.flow li b{color:var(--ink);font-weight:700;}
.note-callout{display:flex;gap:12px;align-items:flex-start;background:var(--accent-weak);border:1px solid var(--accent-ring);border-radius:16px;padding:16px 18px;font-size:.95rem;line-height:1.55;color:var(--ink);margin:0 0 28px;max-width:860px;}
.note-callout svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto;margin-top:1px;}
.note-callout b{color:var(--accent);}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:820px;}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:1rem;line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;font-size:1.4rem;line-height:1;flex:0 0 auto;}
.faq details[open] summary::after{content:"\2013";}
.faq .faq-a{padding:0 22px 20px;color:var(--body-text);font-size:.95rem;line-height:1.65;margin:0;}
.faq .faq-a em{font-style:italic;color:var(--text-secondary);}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--text-secondary);margin:0 0 22px;}
.crumb a{color:var(--text-secondary);text-decoration:none;}
.crumb a:hover{color:var(--accent);}
.crumb span{color:var(--ink);font-weight:600;}

/* ---------- contact band + form ---------- */
.contact-band{background:var(--dark);border-radius:var(--radius);padding:52px;color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contact-band h2{margin:0 0 12px;}
.contact-band p{margin:0 0 8px;color:var(--on-dark-muted);line-height:1.6;max-width:460px;}
.contact-band .contact-emph{margin-top:14px;font-weight:700;color:var(--white);}
.contact-band .contact-mail{color:var(--accent-soft);font-weight:600;text-decoration:none;}
.contact-band .contact-mail:hover{color:var(--white);}
.cform{display:grid;gap:14px;}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cform label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.5px;color:var(--on-dark-muted);margin-bottom:6px;text-transform:uppercase;}
.cform input,.cform textarea{width:100%;font-family:inherit;font-size:.95rem;padding:13px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--white);}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.4);}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--accent);border-color:transparent;}
.cform textarea{resize:vertical;min-height:92px;}
.cform .hint{font-size:.78rem;color:var(--on-dark-muted);margin:2px 0 0;max-width:none;}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- professionals directory ---------- */
.dir-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;}
.dir-grid .person{grid-column:span 4;}
.count{color:var(--text-secondary);font-size:.9rem;font-weight:500;margin:0 0 24px;}
.join-card{grid-column:span 8;background:var(--card);border:1px dashed var(--accent-ring);border-radius:var(--radius);padding:30px 32px;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.join-card h2{font-size:1.3rem;}
.join-card p{margin:0;color:var(--body-text);font-size:.95rem;line-height:1.55;}
.join-card .btn{margin-top:14px;align-self:flex-start;}

/* ---------- professional page ---------- */
.ph-banner{background:var(--accent-weak);border:1px dashed var(--accent-ring);color:var(--accent);border-radius:16px;padding:14px 20px;font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:34px;}
.ph-banner svg{flex:0 0 auto;}
.profile-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.profile-photo{aspect-ratio:4/5;background:linear-gradient(140deg,#F1F1F7,#E6E6EE);border-radius:var(--radius);display:grid;place-items:center;color:var(--subtle);font-weight:700;letter-spacing:1px;border:1px solid var(--border);overflow:hidden;}
.profile-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-meta .role{color:var(--accent);font-weight:700;letter-spacing:.3px;margin:0 0 8px;}
.profile-meta h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:0 0 16px;}
.profile-meta .tagline{font-size:1.12rem;line-height:1.6;color:var(--body-text);max-width:520px;margin:0 0 24px;}
.profile-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{background:var(--section-light);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--ink);}
.bio p{color:var(--body-text);font-size:1.02rem;line-height:1.7;max-width:760px;margin:0 0 18px;}
.bio .ph-note{font-size:.8rem;color:var(--text-secondary);font-style:italic;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--accent);text-decoration:none;margin-bottom:24px;}

/* ---------- final cta (plain) ---------- */
.cta{border-radius:var(--radius);background:var(--dark);color:var(--white);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.cta h2{margin:0 0 8px;}
.cta p{margin:0;color:var(--on-dark-muted);max-width:560px;line-height:1.6;}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--white);padding:64px 0 36px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;}
.foot-grid h4{margin:0 0 14px;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot-grid a{text-decoration:none;font-size:.95rem;cursor:pointer;color:var(--white);}
.foot-grid a:hover{text-decoration:underline;}
.foot-grid p{color:var(--on-dark-muted);font-size:.95rem;margin:14px 0 0;line-height:1.6;max-width:320px;}
.foot-mail{margin-top:12px;}
.foot-mail a{color:var(--accent-soft);font-weight:600;text-decoration:none;}
.foot-mail a:hover{color:var(--white);}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;font-size:.82rem;line-height:1.6;color:var(--on-dark-muted);}
.foot-legal em{font-style:normal;color:var(--white);}
.foot-legal .ph{font-style:italic;opacity:.7;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:24px;font-size:.85rem;color:var(--on-dark-muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* The home hero no longer forces a full viewport on mobile: it flows naturally,
     top-aligned, so title/lede/CTA keep comfortable, ordered spacing and may scroll. */
  .hero-banner{min-height:auto;justify-content:flex-start;padding:52px 0 60px;}
  .hb-inner{grid-template-columns:1fr;gap:32px;}
  .hb-copy,.hb-lede{max-width:640px;}
  .hb-visual{order:2;}
  .hb-visual svg{max-width:360px;max-height:min(360px,38svh);}
  .proof .proof-grid,.contact-band{grid-template-columns:1fr;gap:32px;}
  .profile-top{grid-template-columns:1fr;gap:28px;}
  .profile-photo{max-width:360px;}
  .svc-box{grid-column:span 6;}
  .person{grid-column:span 6;}
  .dir-grid .person,.join-card{grid-column:span 6;}
  .strip .wrap{grid-template-columns:repeat(2,1fr);gap:24px;}
}
/* ---------- mobile header: hamburger panel (< 900px) ---------- */
@media (max-width:900px){
  /* Solid header, and no backdrop-filter: a backdrop-filtered ancestor would become
     the containing block for the position:fixed panel and trap it inside the bar. */
  .site-header{background:var(--white);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .site-header .wrap{flex-wrap:nowrap;gap:16px;}
  .nav-burger{display:inline-flex;}
  .header-cta{display:none;}

  /* The nav becomes a full-screen panel, revealed by the checkbox. Fixed + inset:0
     means it is exactly viewport-sized: it never adds horizontal (or vertical) page
     scroll, open or closed. It sits just under the sticky header (z-index 40). */
  .nav{
    position:fixed;inset:0;z-index:30;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    background:var(--white);
    padding:calc(var(--header-h) + 14px) 22px 32px;
    overflow-y:auto;overflow-x:hidden;
    opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  #navtoggle:checked ~ .nav{opacity:1;visibility:visible;}

  .nav > a:not(.nav-cta),.nav .menu-trigger{
    display:flex;align-items:center;
    padding:15px 2px;font-size:1.08rem;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--border);
  }
  .nav > a:not(.nav-cta):hover,.nav .menu-trigger:hover{color:var(--accent);}

  /* Services: shown expanded (no hover dropdown on touch). */
  .nav .has-menu{display:block;position:static;}
  .nav .menu-trigger{justify-content:space-between;width:100%;}
  .nav .menu-trigger svg{width:14px;height:14px;transform:rotate(180deg);}
  .nav .dropdown{
    position:static;display:block;opacity:1;visibility:visible;transform:none;
    width:auto;min-width:0;margin:0;padding:6px 0 10px;
    border:0;border-radius:0;box-shadow:none;background:transparent;
  }
  .nav .dd-item{padding:11px 10px 11px 12px;border-radius:12px;}
  .nav .dd-item b{font-size:.95rem;}

  .nav .nav-cta{display:inline-flex;margin-top:22px;width:100%;}
  .nav .nav-cta,.nav .nav-cta:hover{color:var(--accent-text);}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .section{padding:60px 0;}
  .hero{padding:52px 0 64px;}
  /* Home hero on small phones: drop the decorative SVG (it added no value shrunk down)
     and keep a clean, well-spaced text column. */
  .hero-banner{padding:44px 0 54px;}
  .hb-eyebrow{margin-bottom:14px;}
  .hb-title{letter-spacing:-1px;}
  .hb-lede{font-size:1.04rem;margin-bottom:24px;}
  .hb-visual{display:none;}
  .hero-banner .hero-actions{gap:12px;}
  .hero-banner .hero-actions .btn{flex:1 1 auto;justify-content:center;}
  .svc-box,.person,.dir-grid .person,.join-card{grid-column:1/-1;}
  .strip .wrap{grid-template-columns:1fr;}
  .cform .row{grid-template-columns:1fr;}
  .contact-band,.cta{padding:34px 26px;}
  /* Footer: stack the three columns on phones. The 1.5fr/1fr/1fr grid was never
     reflowed for mobile and overflowed on narrow screens (long tokens such as the
     email address forced the tracks wider than the viewport). */
  .foot-grid{grid-template-columns:1fr;gap:28px;}
  .foot-mail a{overflow-wrap:anywhere;}
}

/* ============================================================
   FS-78 home — dynamic / visual layer. CSS-only motion (no JS),
   palette-safe (existing tokens + existing rgba tints).
   ============================================================ */

/* --- on-brand marquee (seamless CSS loop; own class, not .chip) --- */
.marquee-band{background:var(--section-light);border-bottom:1px solid var(--border);padding:26px 0 28px;}
.marquee-label{text-align:center;margin:0 0 16px;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);}
.marquee{position:relative;overflow:hidden;}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}
.marquee::before{left:0;background:linear-gradient(90deg,var(--section-light),rgba(247,247,251,0));}
.marquee::after{right:0;background:linear-gradient(270deg,var(--section-light),rgba(247,247,251,0));}
.marquee-track{display:flex;align-items:center;gap:14px;width:max-content;margin:0;padding:0;list-style:none;}
.mq-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--white);border:1px solid var(--border);font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap;}
.mq-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --- "AI in action" feature band with a typing card --- */
.ai-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ai-feature-copy{max-width:480px;}
.ai-feature-copy .lede{font-size:1.06rem;line-height:1.6;color:var(--body-text);max-width:none;margin:0 0 22px;}
.ai-feature-media{position:relative;display:flex;justify-content:center;}
.ai-photo{position:absolute;z-index:0;top:-58px;right:-12px;width:60%;max-width:272px;border-radius:120px 120px var(--radius) var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);}
.ai-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.ai-card{position:relative;z-index:2;width:min(440px,100%);background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.ai-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ai-dots{display:inline-flex;gap:6px;}
.ai-dots i{width:10px;height:10px;border-radius:50%;background:var(--border);display:block;}
.ai-dots i:first-child{background:var(--accent);}
.ai-tag{font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-secondary);}
.ai-screen{background:var(--ink);border-radius:12px;padding:15px 16px 16px;overflow:hidden;}
.ai-prompt-label{margin:0 0 9px;font-size:.64rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-soft);}
.ai-line{margin:0;min-height:1.4em;}
.ai-type{display:inline-block;max-width:41ch;overflow:hidden;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.92rem;line-height:1.4;color:var(--white);border-right:2px solid transparent;}
.ai-reply{display:flex;align-items:center;gap:9px;margin:14px 2px 2px;font-size:.92rem;font-weight:600;color:var(--ink);}
.ai-reply svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto;}
@keyframes aiType{0%{width:0;}42%{width:41ch;}80%{width:41ch;}92%{width:0;}100%{width:0;}}
@keyframes aiCaret{0%,100%{border-right-color:var(--accent-soft);}50%{border-right-color:transparent;}}
@keyframes aiReply{0%,45%{opacity:0;transform:translateY(5px);}56%,80%{opacity:1;transform:translateY(0);}92%,100%{opacity:0;transform:translateY(5px);}}
@keyframes aiFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* --- "In practice" photo cluster (reuses existing service photos) --- */
.showcase-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;}
.showcase-copy{max-width:520px;}
.showcase-copy .lede{font-size:1.1rem;line-height:1.6;color:var(--body-text);max-width:none;margin:0 0 20px;}
.mini-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mini-list li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--body-text);line-height:1.45;}
.mini-list li svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:3px;}
.showcase-media{position:relative;}
.showcase-media::before{content:"";position:absolute;right:-18px;bottom:-18px;width:72%;height:74%;border-radius:var(--radius);background:var(--accent-weak);border:1px solid var(--accent-ring);z-index:0;}
.photo-cluster{position:relative;z-index:1;margin:0;padding:0 0 42px;}
.pc-main{display:block;position:relative;z-index:1;border-radius:clamp(96px,20vw,150px) clamp(96px,20vw,150px) var(--radius) var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);background:var(--card);}
.pc-main img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:inherit;}
.pc-main::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(59,91,255,.12);pointer-events:none;}
.pc-mini{position:absolute;z-index:2;width:40%;max-width:188px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);border:4px solid var(--white);background:var(--card);}
.pc-mini img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;}
.pc-mini--a{left:-14px;bottom:30px;}
.pc-mini--b{right:-12px;bottom:-22px;}

/* --- promises as icon tiles (home only; how-we-work keeps .promises) --- */
.promise-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.promise-tiles li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:20px 18px;display:flex;flex-direction:column;gap:10px;transition:border-color .18s ease,background .18s ease,transform .18s ease;}
.promise-tiles li:hover{border-color:var(--accent-ring);background:rgba(59,91,255,.06);transform:translateY(-3px);}
.promise-tiles .pm-ico{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:rgba(59,91,255,.12);border:1px solid var(--accent-ring);color:var(--accent-soft);}
.promise-tiles .pm-ico svg{width:22px;height:22px;}
.promise-tiles b{display:block;color:var(--white);font-size:1rem;}
.promise-tiles small{color:var(--on-dark-muted);font-size:.86rem;line-height:1.5;}

/* --- hero: one extra subtle twinkle --- */
.hb-twinkle{animation:hbTwinkle 4.5s ease-in-out infinite;}
@keyframes hbTwinkle{0%,100%{opacity:.25;}50%{opacity:.95;}}

/* --- scroll-reveal (CSS scroll-driven animations). The hidden-until-
   revealed state lives ONLY where animation-timeline is supported, so
   unsupported browsers show everything; reduced-motion keeps it still. --- */
@keyframes revealUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation-name:revealUp;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:view();animation-range:entry 0% entry 55%;}
    .reveal-stagger > *{animation-name:revealUp;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:view();animation-range:entry 0% entry 52%;}
    .reveal-stagger.cols4 > *:nth-child(2){animation-range:entry 6% entry 58%;}
    .reveal-stagger.cols4 > *:nth-child(3){animation-range:entry 12% entry 64%;}
    .reveal-stagger.cols4 > *:nth-child(4){animation-range:entry 18% entry 70%;}
    .reveal-stagger.cols3 > *:nth-child(3n+2){animation-range:entry 7% entry 59%;}
    .reveal-stagger.cols3 > *:nth-child(3n+3){animation-range:entry 14% entry 66%;}
    .reveal-stagger.cols2 > *:nth-child(2n){animation-range:entry 8% entry 60%;}
  }
}

/* --- time-based motion, only when motion is welcome --- */
@media (prefers-reduced-motion: no-preference){
  .marquee-track{animation:marquee 34s linear infinite;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .ai-type{width:0;animation:aiType 6s steps(41,end) infinite,aiCaret .8s step-end infinite;}
  .ai-reply{opacity:0;animation:aiReply 6s ease infinite;}
  .ai-card{animation:aiFloat 7s ease-in-out infinite;}
}

/* --- reduced motion: pin final/static states for the new motion --- */
@media (prefers-reduced-motion: reduce){
  .hb-twinkle,.marquee-track,.ai-type,.ai-reply,.ai-card{animation:none !important;}
  .marquee-track{transform:none !important;}
  .ai-type{width:auto !important;border-right-color:transparent !important;}
  .ai-reply{opacity:1 !important;transform:none !important;}
}

/* --- responsive for the new bands (mirrors the existing breakpoints) --- */
@media (max-width:980px){
  .ai-feature-grid{grid-template-columns:1fr;gap:34px;}
  .ai-feature-media{order:2;}
  .showcase-grid{grid-template-columns:1fr;gap:34px;}
  .showcase-media{order:2;}
}
@media (max-width:640px){
  .strip .wrap{grid-template-columns:repeat(2,1fr);}
  .ai-type{font-size:.82rem;}
  .photo-cluster{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:0;}
  .pc-main{grid-column:1/-1;}
  .pc-mini{position:static;width:auto;max-width:none;border-width:3px;}
  .ai-photo{top:-16px;right:0;width:46%;max-width:150px;}
  .promise-tiles{grid-template-columns:1fr;}
}