/*
Theme Name: AIYAO Biotech Child
Description: Flat, bordered design system for aiyao.shop (elayadesign/ai-design-skills landing-page-design ruleset).
Template: blocksy
Version: 2.0.0
*/

@font-face{font-family:'Geist Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('img/fonts/geist-var.woff2') format('woff2');}
@font-face{font-family:'Geist Label';font-style:normal;font-weight:500;font-display:swap;
  src:url('img/fonts/geistmono500.woff2') format('woff2');}

:root{
  /* flat neutral surfaces — dark base (~80% per the reference card) with neon accents */
  --ground:#0A0A0F; --surface:#131218; --raised:#18171F; --raised-2:#201F28;
  --border:#2E2C38; --border-soft:#201F28; --border-strong:#433F52;
  --ink:#FFFFFF; --ink-soft:#ADADAD; --ink-faint:#8C8A80;
  --accent:#05F5FF; --accent-2:#B106FF; --accent-ink:#061014;
  --neon-pink:#D3005F; --neon-red:#FF3450;
  --glow:rgba(5,245,255,.45); --glow-soft:rgba(5,245,255,.22);
  /* the one deliberately-contrasting section (CTA) — now light, since the page is dark */
  --contrast-bg:#FFFFFF; --contrast-ink:#0A0A0A; --contrast-soft:#5A5A5A; --contrast-border:#E5E5E5;

  --display:'Geist Display',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'Geist Label',ui-monospace,'SF Mono',Consolas,monospace;
  --ease: cubic-bezier(0.32,0.72,0,1);

  /* spacing tokens — fixed steps, not fluid clamp() */
  --sp-1:2px; --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px;
  --measure:64ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background-color:var(--ground);color:var(--ink);font-family:var(--display);
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
     background-image:radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);
     background-size:26px 26px}
:root{--theme-headings-color:var(--ink);--theme-heading-color:var(--ink);--theme-text-color:var(--ink);
      --theme-link-initial-color:var(--ink);--theme-link-hover-color:var(--accent)}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
/* fixed type scale, snapped to the nearest step below — not fluid */
h1{font-size:36px;line-height:1.1}
@media (min-width:640px){h1{font-size:48px}}
@media (min-width:960px){h1{font-size:60px}}
h2{font-size:30px;line-height:1.15}
@media (min-width:640px){h2{font-size:36px}}
h3{font-size:20px;line-height:1.3;font-weight:600}
h4{font-size:16px;line-height:1.3;font-weight:600}
p{margin:0}
a{color:inherit}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--sp-6)}
@media (min-width:960px){.wrap{padding-inline:var(--sp-9)}}
section{padding-block:var(--sp-10);border-top:1px solid var(--border-soft);position:relative}
@media (min-width:960px){section{padding-block:var(--sp-12)}}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:end;margin-bottom:var(--sp-8)}
@media (max-width:880px){.sec-head{grid-template-columns:1fr;gap:var(--sp-4)}}
.sec-head h2{margin-top:var(--sp-3)}
.sec-head p{color:var(--ink-soft);max-width:var(--measure)}
body>*{position:relative;z-index:1}

/* film-grain overlay — the flat dark surfaces read a little too clean/
   digital without it; a faint noise texture is what most premium dark UIs
   (Linear, Arc, Stripe) use to add depth without adding a single extra color */
body::before{content:"";position:fixed;inset:0;z-index:45;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='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 90%,transparent);
        backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft)}
.topbar .wrap{display:flex;align-items:center;gap:var(--sp-5);padding-block:var(--sp-4)}
.brand{display:flex;align-items:baseline;gap:var(--sp-2);font-weight:600;letter-spacing:-.02em;font-size:20px;text-decoration:none}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
nav.main{display:flex;gap:var(--sp-2);margin-inline:auto}
nav.main a{font-family:var(--mono);font-size:13px;letter-spacing:.02em;
   color:var(--ink-soft);text-decoration:none;border:1px solid var(--border);border-radius:var(--radius-md);
   padding:var(--sp-3) var(--sp-5);transition:border-color .3s var(--ease),color .3s var(--ease)}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--accent);color:var(--ink)}

/* nav dropdown — desktop "Services" mega-item */
.navdrop{position:relative}
.navdrop-trigger{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:var(--ink-soft);background:none;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-5);transition:border-color .3s var(--ease),color .3s var(--ease)}
.navdrop-trigger svg{width:10px;height:7px;transition:transform .25s var(--ease)}
.navdrop-trigger:hover,.navdrop-trigger[aria-current],.navdrop-trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--ink)}
.navdrop-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
/* The 10px gap between trigger and panel used to be dead space: moving the mouse
   straight down through it left both elements, so :hover cut out before the panel
   could be reached. It's now inside the panel's own padding box instead — still
   invisible, but still "hovering the panel" as far as CSS is concerned. */
.navdrop-panel{position:absolute;top:100%;left:50%;transform:translate(-50%,0);width:340px;
  padding:calc(10px + var(--sp-3)) var(--sp-3) var(--sp-3);display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.navdrop-panel::before{content:"";position:absolute;inset:10px 0 0;z-index:-1;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-lg)}
.navdrop:hover .navdrop-panel,.navdrop-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.navdrop-item{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  text-decoration:none;transition:background-color .2s var(--ease)}
.navdrop-item:hover{background:var(--raised-2)}
.navdrop-dot{width:8px;height:8px;border-radius:50%;background:var(--tile-c,var(--accent));flex:0 0 auto;margin-top:6px}
.navdrop-item b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.navdrop-item small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:2px}
.navdrop-all{display:block;margin-top:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent);text-decoration:none}

/* mobile drawer sub-list for services */
.drawer-sub{display:grid;gap:2px;margin:var(--sp-2) 0 var(--sp-4);padding-left:var(--sp-5);border-left:1px solid var(--border)}
.drawer-sub a{font-size:16px;font-weight:400;padding:var(--sp-2) 0;border-bottom:0;color:var(--ink-soft);opacity:1;transform:none}
.drawer-sub a:hover{color:var(--accent)}
@media (max-width:1000px){nav.main{display:none}}
.burger{display:none;width:40px;height:40px;flex:0 0 auto;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;background:none;border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:1000px){.burger{display:flex}}
.drawer{position:fixed;inset:0;z-index:28;background:var(--ground);
  padding:88px var(--sp-6) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-1);overflow-y:auto}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-size:32px;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);padding:var(--sp-4) 0;border-bottom:1px solid var(--border-soft);
  opacity:0;transform:translateY(var(--sp-6));transition:opacity .3s var(--ease),transform .3s var(--ease)}
.drawer:not([hidden]) nav a{opacity:1;transform:translateY(0)}
.drawer:not([hidden]) nav a:nth-child(2){transition-delay:.05s}
.drawer:not([hidden]) nav a:nth-child(3){transition-delay:.1s}
.drawer:not([hidden]) nav a:nth-child(4){transition-delay:.15s}
.drawer nav a[aria-current]{color:var(--accent)}
.drawer .btn{align-self:flex-start;margin-top:var(--sp-6)}
body.nv-locked{overflow:hidden}

/* buttons — rounded, not pill; real states */
.btn{display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--display);font-weight:600;font-size:16px;
  padding:var(--sp-3) var(--sp-4);text-decoration:none;
  border:1px solid var(--accent);border-radius:var(--radius-md);
  background:var(--accent);color:var(--accent-ink);
  transition:filter .3s var(--ease),transform .15s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{filter:brightness(1.08);box-shadow:0 0 14px 0 var(--glow-soft)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn--ghost{background:none;color:var(--ink);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--accent-2);color:var(--accent-2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* pill badge — smaller radius per nested-radius rule (outer 10 - gap 4 = 6) */
.badge{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-4);font-family:var(--mono);
  font-size:12px;letter-spacing:.04em;color:var(--ink-soft);background:var(--raised)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---------- hero: flat background, gradient text, empty visual slot ---------- */
.hero{position:relative;padding-block:var(--sp-12) var(--sp-10);border-top:0;background:var(--ground);overflow:hidden}
.hero::before{content:"";position:absolute;top:-20%;right:-10%;width:60%;aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:var(--sp-9)}
@media (min-width:960px){.hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}}
.hero-content{max-width:680px}
.hero-content h1{background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-content h1 em{font-style:normal}
.hero-content .sub{margin-top:var(--sp-6);color:var(--ink-soft);font-size:18px;line-height:1.5;max-width:56ch}
.hero-proof{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-8)}
.hero-proof div{display:flex;flex-direction:column;gap:var(--sp-1)}
.hero-proof b{font-family:var(--mono);font-size:18px;color:var(--accent)}
.hero-proof span{font-size:13px;color:var(--ink-faint)}

/* visual slot — a quiet bordered frame. Holds either the empty-state tag,
   or (once filled) a real photo cropped to fill the same frame. */
.imgslot{position:relative;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border-strong));
  border-radius:var(--radius-lg);background:var(--raised);
  display:flex;align-items:center;justify-content:center;
  min-height:280px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.6),0 0 60px -22px var(--glow-soft)}
.imgslot .tag{position:relative;z-index:1;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint);
  text-align:center;padding:var(--sp-5);max-width:36ch}
.imgslot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.05) saturate(1.08);transition:transform .8s var(--ease)}
.imgslot:hover img{transform:scale(1.03)}
.hero-visual{margin-top:var(--sp-10)}
@media (min-width:960px){.hero-visual{margin-top:0}}
.hero-visual .imgslot{min-height:220px}
@media (min-width:960px){.hero-visual .imgslot{min-height:340px}}
@media (min-width:960px){.hero-visual .imgslot{min-height:200px}}

/* page hero (inner pages) — flat, no canvas */
.phero{position:relative;border-top:0;padding-block:var(--sp-10);background:var(--ground);overflow:hidden}
.phero::before{content:"";position:absolute;top:-30%;right:-8%;width:50%;aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.phero .wrap{position:relative;z-index:1}
@media (min-width:960px){.phero{padding-block:var(--sp-12) var(--sp-10)}}
.phero h1{margin-block:var(--sp-5) var(--sp-6);
  background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero h1 em{font-style:normal}
.phero .lede{color:var(--ink-soft);max-width:var(--measure);font-size:18px}

/* colored tiles — bento layout: asymmetric spans instead of a uniform grid,
   and a hover color-wash instead of the plain border-hover the cell grid
   uses, so this reads as its own thing rather than the same card again. */
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.tile-grid .tile:nth-child(1){grid-column:span 3}
.tile-grid .tile:nth-child(4){grid-column:span 3}
@media (max-width:900px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-grid .tile:nth-child(1),.tile-grid .tile:nth-child(4){grid-column:span 1}}
@media (max-width:560px){.tile-grid{grid-template-columns:1fr}}
.tile{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6);position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:var(--sp-3);min-height:180px;justify-content:flex-end;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tile-c,var(--accent));
  opacity:0;transition:opacity .35s var(--ease)}
.tile:hover{transform:translateY(-2px);border-color:var(--tile-c,var(--accent))}
.tile:hover::after{opacity:.16}
.tile h3{color:var(--ink)}
.tile p{color:var(--ink-soft);font-size:14px;margin:0}
.tile--a{--tile-c:#05F5FF}
.tile--b{--tile-c:#B106FF}
.tile--c{--tile-c:#D3005F}
.tile--d{--tile-c:#FF3450}

/* ---------- kinetic list (services) — inspired by dogstudio.co's type-as-graphic index ---------- */
.klist{border-top:1px solid var(--border)}
.klist .kitem{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 24px;gap:var(--sp-6);
  align-items:baseline;padding-block:var(--sp-7);border-bottom:1px solid var(--border);
  text-decoration:none;transition:padding-left .4s var(--ease),background-color .4s var(--ease)}
.klist .kitem:hover{padding-left:var(--sp-5);background:var(--surface)}
.klist .knum{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.klist .kname{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink);transition:color .3s var(--ease)}
@media (min-width:640px){.klist .kname{font-size:36px}}
.klist .kitem:hover .kname{color:var(--accent)}
.klist .kdesc{color:var(--ink-soft);font-size:14px;max-width:34ch;align-self:center}
.klist .karrow{font-family:var(--mono);color:var(--ink-faint);opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);align-self:center}
.klist .kitem:hover .karrow{opacity:1;transform:translateX(0);color:var(--accent)}
@media (max-width:820px){.klist .kitem{grid-template-columns:28px 1fr;row-gap:var(--sp-2)}
  .klist .kdesc{grid-column:2}.klist .karrow{display:none}}

/* ---------- timeline (process) — inspired by ramotion.com's IA-led structure ---------- */
.timeline{position:relative;display:grid;gap:var(--sp-8);padding-left:var(--sp-9)}
.timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:1px;background:var(--border-strong)}
.titem{position:relative}
.titem::before{content:"";position:absolute;left:calc(-1 * var(--sp-9) + 8px);top:4px;width:14px;height:14px;
  border-radius:50%;background:var(--ground);border:2px solid var(--accent)}
.titem .tk{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.titem h3{margin-top:var(--sp-2)}
.titem p{color:var(--ink-soft);font-size:15px;margin-top:var(--sp-2);max-width:56ch}

/* strip stats — bordered cells instead of hairline dividers */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-4)}
.strip div{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.strip b{font-family:var(--mono);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent)}
.strip span{font-size:13px;color:var(--ink-faint)}

/* bordered grids — full borders on every side, rounded corners (never one-sided) */
.grid-1px{display:grid;gap:var(--sp-4)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cols-2,.cols-3{grid-template-columns:1fr}}
.cell{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);position:relative;isolation:isolate;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cell:hover{border-color:var(--accent);transform:translateY(-2px)}
/* cursor-spotlight — a soft light that tracks the pointer, à la Linear/Stripe
   card hovers. --mx/--my are set by JS on mousemove; z-index:-1 keeps the
   glow behind the card's own text without any extra markup. */
.cell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease)}
.cell:hover::before{opacity:1}
.cell p{color:var(--ink-soft);font-size:14px}
.cell ul{margin:var(--sp-2) 0 0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.cell li{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.cell li::before{content:"\2192 ";color:var(--accent)}
.cell .num{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent-2)}

/* steps — bordered rows, nested radius on the number chip (12 - 8 = 4) */
.steps{display:grid;gap:var(--sp-4)}
.step{background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp-5);
  padding:var(--sp-6);align-items:start;position:relative;isolation:isolate;
  transition:border-color .3s var(--ease)}
.step:hover{border-color:var(--accent)}
.step::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease)}
.step:hover::before{opacity:1}
@media (max-width:880px){.step{grid-template-columns:40px minmax(0,1fr)}.step .body{grid-column:2}}
.step .n{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:var(--sp-1)}
.step .body{color:var(--ink-soft);font-size:14px}
.step .dur{font-family:var(--mono);font-size:13px;color:var(--ink-faint);margin-top:var(--sp-2)}

/* faq — refined thin-divider accordion, inspired by basement.studio's restraint
   (deliberately not another bordered card — the page needs quieter moments too) */
.faq{display:grid;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:var(--sp-6) 0;display:flex;gap:var(--sp-5);align-items:baseline;
  font-weight:600;font-size:17px;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--ink-faint);font-weight:400;transition:transform .3s var(--ease),color .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 0 var(--sp-6);color:var(--ink-soft);max-width:var(--measure);font-size:15px}

/* comparison table */
.tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.tbl{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);vertical-align:top}
.tbl thead th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;background:var(--surface)}
.tbl thead th.us{color:var(--accent)}
.tbl tbody th{font-weight:600;color:var(--ink);width:20%}
.tbl td{color:var(--ink-soft)}
.tbl td.us{color:var(--ink);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}

/* infinite marquee — classic "tech stack ticker" pattern. The track holds
   the tag list twice back-to-back; translateX(-50%) lands exactly on the
   start of the second copy, so the loop has no visible seam. */
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ground),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ground),transparent)}
.marquee-track{display:flex;gap:var(--sp-4);width:max-content;animation:nv-marquee 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-5);
  font-size:14px;color:var(--ink-soft);white-space:nowrap;background:var(--raised);flex:0 0 auto}
@keyframes nv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* tag pills */
.tagset{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.tagset a,.tagset span{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-5);
  font-size:14px;color:var(--ink-soft);text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease);background:var(--raised)}
.tagset a:hover{border-color:var(--accent);color:var(--accent)}

/* cta — the one deliberately-contrasting section, inspired by deptagency.com / baunfire.com.
   The rest of the page is black-and-gold, so this is the light panel that pops against it. */
.cta{background:var(--contrast-bg);border-top-color:var(--contrast-border)}
.cta .label{color:var(--accent-2)}
.cta h2{color:var(--contrast-ink);font-size:40px;letter-spacing:-.02em;background:none;-webkit-text-fill-color:currentColor}
@media (min-width:640px){.cta h2{font-size:56px}}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-8);align-items:center}
@media (max-width:960px){.cta-grid{grid-template-columns:1fr}}
.cta .body{color:var(--contrast-soft);max-width:var(--measure);margin-top:var(--sp-5);font-size:17px}
.cta .btn{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.cta .btn:hover{filter:brightness(1.3)}
.checklist{display:grid;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:var(--sp-3);font-size:15px;color:var(--contrast-soft)}
.checklist li::before{content:"\2713";color:var(--accent-2);font-family:var(--mono)}

/* band: full-width empty image slot with a caption below (no photo yet) */
.band{border-top:1px solid var(--border-soft)}
.band .wrap{padding-block:var(--sp-8);display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center}
@media (min-width:800px){.band .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-9)}}
.band--flip .wrap{grid-template-areas:"cap" "img"}
@media (min-width:800px){.band--flip .wrap{grid-template-areas:"img cap"}.band--flip .imgslot{grid-area:img}.band--flip .cap{grid-area:cap}}
.band .imgslot{min-height:220px}
@media (min-width:960px){.band .imgslot{min-height:280px}}
.band .cap{margin-top:0;max-width:none}
.band .cap h3{font-size:24px}
.band .cap p{color:var(--ink-soft);margin-top:var(--sp-3);font-size:15px}

/* form */
.form{display:grid;gap:var(--sp-5)}
.form label{display:grid;gap:var(--sp-2);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}
.form input,.form textarea,.form select{background:var(--raised);border:1px solid var(--border);color:var(--ink);
  padding:var(--sp-4) var(--sp-5);font:inherit;font-size:15px;border-radius:var(--radius-md)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:120px;resize:vertical}
.nv-wpf .wpforms-container{margin:0}
.nv-wpf .wpforms-form{display:grid;gap:var(--sp-5)}
.nv-wpf .wpforms-field{padding:0!important}
.nv-wpf .wpforms-field-label{display:block;margin-bottom:var(--sp-2);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;font-weight:400;color:var(--ink-faint)}
.nv-wpf .wpforms-required-label{color:var(--accent);margin-left:var(--sp-1)}
.nv-wpf input[type=text],.nv-wpf input[type=email],.nv-wpf input[type=tel],.nv-wpf select,.nv-wpf textarea{
  width:100%;max-width:none;background:var(--raised);border:1px solid var(--border);color:var(--ink);
  padding:var(--sp-4) var(--sp-5);font:inherit;font-size:15px;border-radius:var(--radius-md);box-shadow:none}
.nv-wpf textarea{min-height:120px;resize:vertical}
.nv-wpf input:focus,.nv-wpf select:focus,.nv-wpf textarea:focus{outline:none;border-color:var(--accent);box-shadow:none}
.nv-wpf ::placeholder{color:var(--ink-faint)}
.nv-wpf .wpforms-field-description,.nv-wpf .wpforms-field-sublabel{color:var(--ink-faint);font-size:13px}
.nv-wpf .wpforms-submit-container{padding-top:var(--sp-2)}
.nv-wpf button[type=submit],.nv-wpf .wpforms-submit{
  display:inline-flex;align-items:center;gap:var(--sp-3);font-family:var(--display);font-weight:600;font-size:16px;
  padding:var(--sp-3) var(--sp-4);cursor:pointer;
  border:1px solid var(--accent);border-radius:var(--radius-md);background:var(--accent);color:var(--accent-ink);
  transition:filter .3s var(--ease);box-shadow:none}
.nv-wpf button[type=submit]:hover{filter:brightness(1.1)}
.nv-wpf .wpforms-error,.nv-wpf label.wpforms-error{color:#FF8A8A;font-size:13px;font-family:var(--mono)}
.nv-wpf input.wpforms-error,.nv-wpf textarea.wpforms-error,.nv-wpf select.wpforms-error{border-color:#FF8A8A}
.nv-wpf .wpforms-confirmation-container-full{
  background:var(--raised);border:1px solid var(--accent);color:var(--ink);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-6)}
.nv-wpf .wpforms-confirmation-container-full p{margin:0;color:var(--ink-soft);font-size:15px}

/* footer */
footer.site-footer{border-top:1px solid var(--border-soft);padding-block:var(--sp-8) var(--sp-9)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-8)}
.fcol h4{margin-bottom:var(--sp-4);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-faint);font-weight:500}
.fcol a{display:block;color:var(--ink-soft);text-decoration:none;font-size:14px;padding-block:var(--sp-2)}
.fcol a:hover{color:var(--accent)}
.fbot{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-8);justify-content:space-between;margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border-soft)}
.fbot p{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* note callout */
.note{border-left:2px solid var(--accent);padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);color:var(--ink-soft);max-width:var(--measure);font-size:15px}

/* ---------- manifesto — editorial ledger list, no card chrome.
   Used where a grid of bordered cells would be the third one on the same
   page (Home Principles / About mindset) — same content, a plain numbered
   list instead, so the page doesn't read as one repeated card template. ---------- */
.manifesto{border-top:1px solid var(--border)}
.mitem{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--sp-6);padding-block:var(--sp-7);
  border-bottom:1px solid var(--border);align-items:baseline;
  transition:padding-left .4s var(--ease),background-color .4s var(--ease)}
.mitem:hover{padding-left:var(--sp-5);background:var(--surface)}
.mitem .mnum{font-family:var(--mono);font-size:15px;color:var(--ink-faint);transition:color .3s var(--ease)}
.mitem:hover .mnum{color:var(--accent)}
.mitem h3{font-size:20px;margin-bottom:var(--sp-2)}
.mitem p{color:var(--ink-soft);font-size:15px;max-width:60ch;margin:0}
@media (max-width:640px){.mitem{grid-template-columns:32px minmax(0,1fr);gap:var(--sp-4);padding-block:var(--sp-6)}}

/* ---------- horizontal scroll-snap gallery — a different interaction than
   the bordered grids; used for parallel short items (Deliverables) where
   scanning left-to-right suits the content better than a static grid. ---------- */
.hscroll{display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-3);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-track{background:transparent}
.hscroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.hcard{scroll-snap-align:start;flex:0 0 260px;background:var(--raised);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4);
  position:relative;isolation:isolate;transition:border-color .3s var(--ease)}
.hcard:hover{border-color:var(--accent)}
.hcard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease)}
.hcard:hover::before{opacity:1}
@media (min-width:640px){.hcard{flex-basis:300px}}
.hcard .hnum{font-family:var(--mono);font-size:36px;font-weight:500;color:var(--accent);line-height:1}
.hcard h3{font-size:18px}
.hcard p{color:var(--ink-soft);font-size:14px;margin:0}
.hscroll-hint{margin-top:var(--sp-4);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}

/* ---------- faq split — sticky label column beside the accordion.
   Used for the longer FAQ lists, where a plain sec-head above a long
   accordion reads flat; the sticky side gives the list a spine. ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:var(--sp-9)}
@media (max-width:880px){.faq-split{grid-template-columns:1fr;gap:var(--sp-6)}}
.faq-side{position:sticky;top:96px;align-self:start}
@media (max-width:880px){.faq-side{position:static}}
.faq-side h2{margin-top:var(--sp-3)}
.faq-side .body{color:var(--ink-soft);margin-top:var(--sp-4);max-width:38ch}

/* per-service accent zones (Services page) — each of the 4 core services
   gets a faint wash of its own tile color instead of all four looking
   like identical grey sections back to back. */
#web,#cloud,#consulting,#integration{overflow:hidden}
#web{--sec-c:#05F5FF}
#cloud{--sec-c:#B106FF}
#consulting{--sec-c:#D3005F}
#integration{--sec-c:#FF3450}
#web::before,#cloud::before,#consulting::before,#integration::before{
  content:"";position:absolute;top:-15%;left:-8%;width:38%;aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--sec-c) 10%,transparent),transparent 70%)}
#web .wrap,#cloud .wrap,#consulting .wrap,#integration .wrap{position:relative;z-index:1}
#web .label,#cloud .label,#consulting .label,#integration .label{color:var(--sec-c)}
#web .cell:hover,#cloud .cell:hover,#consulting .cell:hover,#integration .cell:hover{border-color:var(--sec-c)}

/* motion: blur + translateY scroll reveal, spring-ish easing; IntersectionObserver-driven */
.nv-reveal{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.nv-reveal.nv-in{opacity:1;transform:translateY(0);filter:blur(0)}
@media (prefers-reduced-motion:reduce){.nv-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
#nv-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent);
  z-index:60;transition:width .1s linear}