/* Jadoo AI — five pages in green and black: a black hero with live neon-green binary rain, dark pages,
     and two light "flip" pages. Each palette defines three surfaces: g = home ground + footer,
     d = dark pages, l / l2 = light pages. The palette switcher swaps these values. */
  :root{
    /* surface inputs (default palette: neon green on black) */
    --g-bg:#05070C; --g-tx:#F4F6FA; --g-ac:#24E070;
    --d-bg:#060B09; --d-tx:#F4F6FA; --d-ac:#24E070;
    --l-bg:#E7EEEA; --l-tx:#0A1611; --l-ac:#0E8F45;
    --l2-bg:#F1EDE7; --l2-tx:#141008; --l2-ac:#0E8F45;
    --btn-bg:#24E070; --btn-tx:#04120A; --btn-dk-bg:#24E070; --btn-dk-tx:#04120A; --btn-hover:#B9FFD2;
    --stripe:#24E070; --sel-bg:rgba(36,224,112,.3); --sel-tx:#FFFFFF;
    /* the surface in use: the home ground by default; each page re-points these */
    --bg:var(--g-bg); --text:var(--g-tx); --ac:var(--g-ac); --btn:var(--btn-bg); --btn-ink:var(--btn-tx);
    --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    color-scheme:dark;
  }
  :root,.sheet{
    --panel:var(--bg); --panel-2:color-mix(in srgb,var(--text) 4%,transparent);
    --muted:color-mix(in srgb,var(--text) 68%,var(--bg)); --dim:color-mix(in srgb,var(--text) 46%,var(--bg));
    --line:color-mix(in srgb,var(--ac) 28%,transparent); --hair:color-mix(in srgb,var(--text) 12%,transparent);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:64px; -webkit-text-size-adjust:100%}
  html,body{margin:0}
  body{background:var(--bg); color:var(--text); font-family:var(--mono); font-size:15px;
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

  #rain{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
  .vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb,var(--bg) 62%,transparent) 0%, color-mix(in srgb,var(--bg) 32%,transparent) 45%, transparent 75%),
      linear-gradient(to bottom, color-mix(in srgb,var(--bg) 50%,transparent), transparent 14%, transparent 86%, color-mix(in srgb,var(--bg) 70%,transparent))}
  .page{position:relative; z-index:2}
  a{color:inherit; text-decoration:none}
  ::selection{background:var(--sel-bg); color:var(--sel-tx)}

  /* nav */
  .nav{position:fixed; left:0; right:0; top:0; z-index:30; display:flex; align-items:center;
    gap:16px; justify-content:space-between; padding:calc(11px + env(safe-area-inset-top,0px)) clamp(16px,4vw,44px) 11px;
    background:color-mix(in srgb,var(--bg) 95%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair)}
  .brand{display:flex; align-items:center}
  .nav-links{display:flex; gap:22px; font-size:13px; letter-spacing:.04em; color:var(--muted)}
  .nav-links a{transition:color .15s} .nav-links a:hover{color:var(--text)}
  .nav-cta{font-family:var(--mono); font-weight:600; font-size:13px; color:var(--btn-ink); background:var(--btn);
    border:none; border-radius:8px; padding:9px 15px; cursor:pointer; white-space:nowrap; transition:.16s}
  a.nav-cta{display:inline-block}
  .nav-cta:hover{background:var(--btn-hover); box-shadow:0 8px 24px -12px color-mix(in srgb,var(--btn) 60%,transparent)}

  section{padding-block:clamp(52px,8vw,100px); padding-inline:clamp(16px,5vw,44px)}
  .wrap{max-width:1040px; margin:0 auto}
  .sheet{position:relative; background:var(--panel); color:var(--text); border-top:1px solid var(--hair)}
  .sheet::before{content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--ac),transparent 55%); opacity:.9}
  /* bold numbered section break */
  .sechead{display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,34px); align-items:start; margin:0 0 28px}
  .secnum{font-family:var(--display); font-weight:800; font-size:clamp(44px,8vw,92px); line-height:.76;
    letter-spacing:-.04em; color:color-mix(in srgb,var(--ac) 20%,transparent);
    -webkit-text-stroke:1.4px var(--ac)}
  .sechead .tx{min-width:0}
  .sechead .eyebrow{margin:8px 0 10px}
  .sechead h2{margin:0}
  @media (max-width:560px){ .sechead{grid-template-columns:1fr; gap:6px; margin-bottom:22px} .secnum{font-size:48px} }

  /* right-edge section index */
  .sideindex{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:25;
    display:flex; flex-direction:column; gap:13px; align-items:flex-end}
  .sideindex a{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--g-ac); opacity:.4;
    display:flex; align-items:center; gap:8px; transition:opacity .2s}
  .sideindex a::after{content:""; width:14px; height:1px; background:currentColor; opacity:.5; transition:width .2s, opacity .2s}
  .sideindex a:hover{opacity:.75}
  .sideindex a.on{opacity:1}
  .sideindex a.on::after{width:30px; opacity:1}
  @media (max-width:900px){ .sideindex{display:none} }
  /* Pages alternate between three surfaces. Dark: .s-d. Light: .s-l and .s-l2. The home ground and footer follow the palette. */
  .s-d{color-scheme:dark; --bg:var(--d-bg); --text:var(--d-tx); --ac:var(--d-ac); --btn:var(--btn-dk-bg); --btn-ink:var(--btn-dk-tx); overflow:hidden;
    background:radial-gradient(120% 360px at 50% -60px, color-mix(in srgb,var(--ac) 11%,transparent), transparent 62%), var(--bg)}
  .s-l{color-scheme:light; --bg:var(--l-bg); --text:var(--l-tx); --ac:var(--l-ac); --btn:var(--btn-bg); --btn-ink:var(--btn-tx); background:var(--bg)}
  .s-l2{color-scheme:light; --bg:var(--l2-bg); --text:var(--l2-tx); --ac:var(--l2-ac); --btn:var(--btn-bg); --btn-ink:var(--btn-tx); background:var(--bg)}
  /* dark-break extras: ghost number, binary strip, lit stage (dark sections only) */
  .sheet[data-ghost] .wrap, .sheet[data-ghost] .sechead{position:relative; z-index:1}
  .sheet[data-ghost]::after{content:attr(data-ghost); position:absolute; top:-.2em; right:-.02em; z-index:0;
    pointer-events:none; user-select:none; font-family:var(--display); font-weight:800; line-height:.76;
    letter-spacing:-.05em; font-size:clamp(190px,34vw,440px); color:transparent;
    -webkit-text-stroke:2px color-mix(in srgb,var(--ac) 20%,transparent); opacity:.55}
  .databar{position:absolute; top:4px; left:0; right:0; z-index:0; height:15px; line-height:15px; overflow:hidden;
    pointer-events:none; font-family:var(--mono); font-size:11px; letter-spacing:.3em; white-space:nowrap;
    color:color-mix(in srgb,var(--ac) 60%,transparent); opacity:.2;
    -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
            mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  @media (max-width:560px){ .sheet[data-ghost]::after{font-size:150px} }

  .eyebrow{font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--ac);
    display:flex; align-items:center; gap:10px; margin:0 0 16px}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--ac)}
  h2{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.04;
    font-size:clamp(28px,5vw,46px); margin:0 0 14px; text-wrap:balance}
  .lead{color:var(--muted); font-size:clamp(14.5px,1.8vw,16.5px); max-width:58ch; margin:0}

  /* hero */
  .hero{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:0 22px}
  .mark{display:flex; align-items:center; justify-content:center; gap:15px; opacity:0; animation:fade 1s .1s forwards}
  @keyframes fade{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){ .mark{animation:none; opacity:1} }


  /* industries carousel */
  .carousel{margin-top:6px}
  .car-track{display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
    padding:4px 2px 8px; -webkit-overflow-scrolling:touch; outline-offset:4px}
  .car-track::-webkit-scrollbar{display:none}
  .car-card{flex:0 0 clamp(236px,29%,310px); scroll-snap-align:start; min-height:150px; display:flex; align-items:center; justify-content:center; text-align:center;
    border:1px solid var(--hair); border-radius:14px; padding:28px 22px; background:var(--panel-2); transition:border-color .2s, transform .2s}
  .car-card:hover{border-color:var(--line); transform:translateY(-2px)}
  .car-card h3{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.8vw,31px); line-height:1.08; letter-spacing:-.02em; margin:0}
  .car-ctl{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px}
  .car-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text);
    font:600 17px var(--mono); cursor:pointer; transition:border-color .15s, color .15s, background .15s}
  .car-btn:hover,.car-btn:focus-visible{border-color:var(--ac); color:var(--ac); outline:none; background:var(--panel-2)}
  @media (prefers-reduced-motion:reduce){ .car-track{scroll-behavior:auto} }
  /* where we help */
  .stage-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:13px; margin-top:6px}
  .lead.soon{margin-top:4px; font-size:clamp(18px,2.4vw,24px); font-family:var(--display); font-weight:700; color:var(--dim)}
  .stage{border:1px solid var(--hair); border-radius:14px; padding:28px 24px; background:var(--panel-2); min-width:0}
  .stage h3,.stage h4{font-family:var(--display); font-weight:700; font-size:clamp(21px,2.6vw,28px); letter-spacing:-.015em; margin:0}
  .stage p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
  /* process */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:34px}
  @media (max-width:820px){ .steps{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:440px){ .steps{grid-template-columns:1fr} }
  .step{border:1px solid var(--hair); border-radius:14px; padding:20px; background:var(--panel-2); min-width:0}
  .step .num{font-family:var(--mono); font-size:12px; color:var(--ac); letter-spacing:.1em; margin-bottom:11px}
  .step h3{font-family:var(--display); font-weight:700; font-size:17px; margin:0 0 6px}
  .step p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5}

  /* about */
  .about-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,5vw,52px); align-items:center; margin-top:30px}
  @media (max-width:760px){ .about-grid{grid-template-columns:1fr} }
  .about-grid.solo{grid-template-columns:1fr}
  .about p{color:var(--muted); font-size:15px; line-height:1.68; margin:0 0 14px; max-width:56ch}
  .about p b{color:var(--text); font-weight:600}

  h2 .magic{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:7px}

  /* logo: the supplied wordmark as two masks, so the ink and the stripe each follow the palette */
  .logo{display:block; position:relative; flex:none; aspect-ratio:3452/868}
  .logo i{position:absolute; inset:0; display:block;
    -webkit-mask-position:center; mask-position:center; -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
  .lg-ink{background:var(--text); -webkit-mask-image:url(/assets/logo-ink.svg); mask-image:url(/assets/logo-ink.svg)}
  .lg-stripe{background:var(--stripe); -webkit-mask-image:url(/assets/logo-stripe.svg); mask-image:url(/assets/logo-stripe.svg)}
  .brand .logo{height:27px}
  .hero .logo{width:clamp(280px,72vw,820px)}

  .sa{display:inline-flex; align-items:center; gap:10px; margin:6px 0 0; padding:9px 15px 9px 12px; border:1px solid var(--line);
    border-radius:999px; font-size:13px; letter-spacing:.02em; color:var(--text)}
  .sa .flag{width:27px; height:18px; flex:none; border-radius:2px; box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}

  /* landing: only the logo and the binary rain until the first scroll, then the rest fades in */
  .nav,.sideindex{transition:opacity .5s ease, transform .5s ease}
  html.js.is-top .nav{opacity:0; transform:translateY(-14px); pointer-events:none}
  html.js.is-top .sideindex{opacity:0; pointer-events:none}
  @media (prefers-reduced-motion:reduce){ .nav,.sideindex{transition:none} }

  /* contact */
  .contact-card{margin-top:30px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    background:var(--panel-2); display:grid; grid-template-columns:1fr 1fr}
  @media (max-width:680px){ .contact-card{grid-template-columns:1fr} }
  .contact-left{padding:clamp(24px,4vw,38px); border-right:1px solid var(--hair); min-width:0}
  @media (max-width:680px){ .contact-left{border-right:none; border-bottom:1px solid var(--hair)} }
  .contact-left h2{font-size:clamp(25px,4vw,36px); margin-bottom:11px}
  .contact-left p{color:var(--muted); margin:0 0 18px; max-width:38ch; font-size:14.5px}
  .emailrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .email{font-size:14.5px; color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:9px 13px; user-select:all}
  .copy{font-family:var(--mono); font-size:12px; color:var(--text); background:var(--panel-2); border:1px solid var(--hair); border-radius:8px; padding:9px 12px; cursor:pointer; transition:.15s}
  .copy:hover{border-color:var(--text)}
  form.cform{padding:clamp(24px,4vw,38px); display:flex; flex-direction:column; gap:11px; min-width:0}
  .cform label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:-3px}
  .cform input,.cform textarea{width:100%; background:var(--panel-2); border:1px solid var(--hair); color:var(--text);
    border-radius:9px; padding:12px 14px; font-family:var(--mono); font-size:16px; outline:none; transition:.15s}
  .cform input:focus,.cform textarea:focus{border-color:var(--text); box-shadow:0 0 0 3px var(--hair)}
  .cform textarea{resize:vertical; min-height:84px}
  .cform button{margin-top:4px; background:var(--btn); color:var(--btn-ink); border:none; border-radius:9px; padding:14px; font-family:var(--mono); font-weight:600; font-size:14px; cursor:pointer; transition:.16s}
  .cform button:hover{opacity:.86}
  .cform .note{font-size:12px; color:var(--dim); margin:2px 0 0}
  .cok{color:var(--text); font-weight:600; padding:10px 0 2px}

  footer{position:relative; z-index:2; border-top:1px solid var(--hair); background:var(--bg); color:var(--text); padding:28px clamp(16px,5vw,44px)}
  .foot-in{max-width:1040px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; color:var(--dim); font-size:12px; letter-spacing:.04em}
  .foot-in .ai{color:var(--text)}
  .foot-tag{letter-spacing:.2em; text-transform:uppercase}

  /* scroll-in "page forming" transitions — runtime only; content stays visible without JS */
  body.js-reveal .reveal{opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.8,.2,1), transform .7s cubic-bezier(.22,.8,.2,1)}
  body.js-reveal .reveal.in{opacity:1; transform:none}
  body.js-reveal .sheet::before{transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.22,.8,.2,1)}
  body.js-reveal .sheet.seen::before{transform:scaleX(1)}
  @media (prefers-reduced-motion:reduce){
    body.js-reveal .reveal{opacity:1; transform:none; transition:none}
    body.js-reveal .sheet::before{transform:none}
  }

  /* ---------- additions: accessibility, navigation, services, work ---------- */
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .skip{position:absolute; left:-9999px; top:8px; z-index:60; background:var(--btn); color:var(--btn-ink); padding:9px 14px; border-radius:8px; font-size:13px}
  .skip:focus{left:12px}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ac); outline-offset:3px; border-radius:6px}
  .nav-links a[aria-current="page"]{color:var(--text)}

  /* mobile menu: a plain <details>, so it works without JavaScript */
  .menu{display:none}
  .menu summary{list-style:none; cursor:pointer; font-size:13px; letter-spacing:.06em; padding:9px 13px; border:1px solid var(--line); border-radius:8px; color:var(--text)}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{border-color:var(--ac); color:var(--ac)}
  .menu-panel{position:absolute; right:clamp(16px,4vw,44px); top:calc(100% + 8px); min-width:220px; display:flex; flex-direction:column; padding:8px;
    background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  .menu-panel a{padding:11px 12px; border-radius:8px; font-size:14px; color:var(--muted)}
  .menu-panel a:hover,.menu-panel a:focus-visible{background:var(--panel-2); color:var(--text)}
  .nav-right{display:flex; align-items:center; gap:10px}
  @media (max-width:980px){ .nav-links{display:none} .menu{display:block} }
  @media (max-width:420px){ .nav .nav-cta{padding:9px 11px; font-size:12px} .brand .logo{height:23px} }

  /* buttons */
  .btn{display:inline-block; font-family:var(--mono); font-weight:600; font-size:14px; padding:14px 22px; border-radius:9px; background:var(--btn); color:var(--btn-ink); border:1px solid var(--btn); transition:.16s}
  .btn:hover{background:var(--btn-hover); border-color:var(--btn-hover)}
  .btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--ac); color:var(--ac); background:transparent}
  .btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

  /* home intro: the statement that follows the landing */
  .intro h2{font-size:clamp(32px,6.4vw,68px); max-width:19ch; line-height:1.02}
  .intro .tag{font-family:var(--display); font-weight:700; font-size:clamp(16px,2.2vw,21px); color:var(--ac); margin:0 0 20px}
  .intro .lead{font-size:clamp(15.5px,2vw,18px); max-width:60ch}
  .intro .where{margin:22px 0 0; color:var(--dim); font-size:13.5px; letter-spacing:.02em}

  /* service cards (home) */
  .svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:6px}
  .svc{display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:16px; padding:26px 24px; background:var(--panel-2); min-width:0; transition:border-color .2s, transform .2s}
  .svc:hover{border-color:var(--line); transform:translateY(-2px)}
  .svc .ico{width:44px; height:44px; color:var(--ac); margin-bottom:18px}
  .svc h3{font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,25px); letter-spacing:-.02em; line-height:1.12; margin:0 0 10px}
  .svc p{margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.58}
  .svc .more{margin-top:auto; font-size:13px; font-weight:600; color:var(--ac); letter-spacing:.02em}
  .svc .more::after{content:" \2192"}

  /* selected work & research */
  .wk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-top:6px}
  .wk{display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:16px; padding:24px; background:var(--panel-2); min-width:0}
  .wk .cat{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac); margin:0 0 10px}
  .wk h3{font-family:var(--display); font-weight:800; font-size:clamp(19px,2.3vw,23px); letter-spacing:-.02em; line-height:1.14; margin:0 0 10px}
  .wk p{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.6}
  .wk .chips{margin-top:auto}
  .status{display:inline-block; align-self:flex-start; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac);
    border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:0 0 12px}
  .wk ul{margin:0 0 16px; padding-left:18px; color:var(--muted); font-size:13.5px; line-height:1.6}
  .wk-note{margin-top:22px; color:var(--dim); font-size:13px; max-width:70ch}
  .more-link{display:inline-block; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--ac)}
  .more-link::after{content:" \2192"}

  /* services vs products */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
  @media (max-width:680px){ .split{grid-template-columns:1fr} }
  .split .col{border:1px solid var(--hair); border-radius:16px; padding:26px 24px; background:var(--panel-2); min-width:0}
  .split h3{font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,25px); letter-spacing:-.02em; margin:0 0 10px}
  .split p{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.58}
  .sub-h{font-family:var(--display); font-weight:800; font-size:clamp(20px,3vw,26px); letter-spacing:-.02em; margin:44px 0 16px}
  .stage p{margin-top:8px}

  /* inner pages (services, work) */
  .page-top{padding-top:calc(clamp(52px,8vw,100px) + 58px)}
  .crumbs{font-size:12px; letter-spacing:.08em; color:var(--dim); margin:0 0 22px}
  .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ac)}
  .page-top h1{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(34px,6.2vw,64px); margin:0 0 18px; max-width:20ch; text-wrap:balance}
  .page-top .lead{font-size:clamp(15.5px,2vw,18px); max-width:62ch}
  .do-list{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
  .do-list li{border:1px solid var(--hair); border-radius:14px; padding:22px 22px 20px; background:var(--panel-2); min-width:0}
  .do-list h3{font-family:var(--display); font-weight:700; font-size:clamp(17px,2vw,20px); letter-spacing:-.015em; margin:0 0 8px}
  .do-list p{margin:0; color:var(--muted); font-size:14px; line-height:1.58}
  .prose p{color:var(--muted); font-size:15px; line-height:1.7; max-width:64ch; margin:0 0 14px}
  .prose p b{color:var(--text); font-weight:600}
  .related{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:6px}
  .related a{display:block; border:1px solid var(--hair); border-radius:14px; padding:22px; background:var(--panel-2); transition:border-color .2s}
  .related a:hover{border-color:var(--line)}
  .related b{display:block; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.015em; margin-bottom:6px}
  .related span{color:var(--muted); font-size:13.5px; line-height:1.5}
  .cta-band{text-align:left}
  .cta-band h2{max-width:20ch}
  .cta-band .lead{margin-bottom:0}

  @media (prefers-reduced-motion:reduce){ .svc,.related a{transition:none} .svc:hover{transform:none} }
  .sechead.plain{display:block}
  .sechead.plain h2{margin-top:0}
  .intro-in>*:last-child{margin-bottom:0}
  body.inner{background:var(--g-bg)}
  .foot-links{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center}
  .foot-links a{color:var(--muted)} .foot-links a:hover{color:var(--ac)}
  .stage h4{font-weight:700}
  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chip{font-size:11.5px; color:var(--muted); background:var(--panel-2); border:1px solid var(--hair); border-radius:999px; padding:4px 11px; letter-spacing:.02em}

  /* services dropdown in the main nav */
  .dd{position:relative}
  .dd summary{list-style:none; cursor:pointer; color:var(--muted); transition:color .15s}
  .dd summary::-webkit-details-marker{display:none}
  .dd summary::after{content:" \25BE"; font-size:10px}
  .dd summary:hover,.dd[open] summary,.dd[data-current] summary{color:var(--text)}
  .dd-panel{position:absolute; left:-14px; top:calc(100% + 14px); min-width:210px; display:flex; flex-direction:column; padding:8px;
    background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  .dd-panel a{padding:10px 12px; border-radius:8px; color:var(--muted); white-space:nowrap}
  .dd-panel a:hover,.dd-panel a:focus-visible{background:var(--panel-2); color:var(--text)}
  .nav-links{align-items:center}