/* ==========================================================================
   FIN V2 — design system

   Built ON our dark theme, not beside it: the tokens, the green, the 56px
   ambient grid, the mono eyebrows and the reveal timings are the ones from
   /services and /onboarding. What V2 adds is hierarchy, rhythm and component
   craft — bigger type scale, disciplined radii, real section structure — so
   it reads as the same product, one generation better.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root{
  /* surfaces — identical to services.css so the two never drift */
  --bg:#0a0a0c;
  --panel:#131316;
  --panel-2:#1a1b1f;
  --panel-glass:rgba(19,19,22,.82);

  /* text */
  --ink:#f2f4f7;
  --muted:#9aa0ab;
  --faint:#6f7680;

  /* accent — ours */
  --green:#22c55e;
  --green-light:#4ade80;
  --green-deep:#16a34a;
  --green-glow:rgba(34,197,94,.35);
  --green-wash:rgba(34,197,94,.08);

  /* lines */
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* type */
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num:"JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* three radii, no more */
  --r-s:8px; --r-m:14px; --r-pill:999px;

  --shell:1240px;

  /* motion, named as in services.css */
  --motion-fast:120ms; --motion-normal:220ms; --motion-slow:420ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease:var(--ease-out);
}

/* --------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--green) rgba(255,255,255,.05); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
*::-webkit-scrollbar-thumb{ background:var(--green); border-radius:999px; border:2px solid var(--bg); background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--green-light); }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* the ambient backdrop from /services: 56px grid plus a green bloom */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(34,197,94,.10), transparent 70%);
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--green-light); outline-offset:3px; border-radius:var(--r-s); }
::selection{ background:rgba(34,197,94,.35); color:#fff; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:24px; }
@media (max-width:600px){ .shell{ padding-inline:18px; } }

.v2-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#04140b; padding:12px 18px; border-radius:0 0 var(--r-m) 0; font-weight:700;
}
.v2-skip:focus{ left:0; }

/* ----------------------------------------------------------- typography - */
h1,h2,h3,h4{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1.06; color:var(--ink); }
p{ margin:0; }

.t-display{ font-size:clamp(38px,6.2vw,74px); font-weight:800; line-height:1.02; letter-spacing:-.042em; }
.t-h2{ font-size:clamp(28px,3.8vw,44px); font-weight:800; line-height:1.07; letter-spacing:-.035em; }
.t-h3{ font-size:clamp(20px,2.1vw,25px); font-weight:700; line-height:1.2; letter-spacing:-.022em; }
.t-lead{ font-size:clamp(17px,1.6vw,20px); font-weight:400; line-height:1.6; color:var(--muted); max-width:58ch; }
.t-body{ font-size:16px; line-height:1.7; color:var(--muted); max-width:68ch; }
.t-small{ font-size:14px; line-height:1.6; color:var(--faint); }
.t-fig{ font-family:var(--num); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--green); }

/* the mono eyebrow is ours — kept, but paired with a rule so it carries
   structure instead of just sitting there */
.sec-mark{
  display:flex; align-items:center; gap:14px;
  font-family:var(--num); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin-bottom:var(--s5);
}
.sec-mark::before{ content:"//"; color:var(--green); }
.sec-mark::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); }

/* ------------------------------------------------------------ sections -- */
.sec{ padding-block:clamp(64px,9vw,var(--s10)); position:relative; }
.sec-tight{ padding-block:clamp(48px,6vw,var(--s9)); position:relative; }
.sec-line{ border-top:1px solid var(--line); }

/* the lifted register — the .svc-stats treatment from /services, used for
   the moments where the product turns concrete */
.sec-ink{
  background:var(--panel-glass);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

/* -------------------------------------------------------------- buttons - */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 22px; border-radius:var(--r-pill);
  font-size:15px; font-weight:700; line-height:1; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background var(--motion-normal) var(--ease),
             border-color var(--motion-normal) var(--ease),
             transform var(--motion-normal) var(--ease),
             box-shadow var(--motion-normal) var(--ease);
}
.btn-primary{
  background:var(--green); color:#04140b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(34,197,94,.22);
}
.btn-primary:hover{ background:var(--green-light); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px rgba(34,197,94,.3); }
.btn-ghost{ background:rgba(255,255,255,.04); border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3); }
.btn-sm{ min-height:40px; padding:10px 16px; font-size:13.5px; }

.link-ul{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; color:var(--green-light);
  border-bottom:1px solid rgba(74,222,128,.32); padding-bottom:2px;
  transition:border-color var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease);
}
.link-ul:hover{ color:#86efac; border-color:#86efac; }

/* --------------------------------------------------------------- header - */
.v2-head{
  position:sticky; top:0; z-index:80;
  background:rgba(10,10,12,.78);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.v2-head-row{ display:flex; align-items:center; gap:28px; min-height:72px; }
.v2-logo{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.v2-logo-mark{
  width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 5px rgba(34,197,94,.12), 0 0 16px rgba(34,197,94,.55);
}
.v2-logo-word{ font-family:var(--num); font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.v2-nav{ display:flex; align-items:center; gap:2px; flex:1 1 auto; }
.v2-nav a{
  padding:9px 13px; border-radius:var(--r-s); font-size:14.5px; font-weight:600;
  color:rgba(242,244,247,.68);
  transition:color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.v2-nav a:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.v2-nav a[aria-current="page"]{ color:var(--ink); position:relative; }
.v2-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px;
  height:2px; border-radius:999px; background:var(--green);
}
.v2-head-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.v2-burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); cursor:pointer;
}
.v2-burger span{ display:block; width:17px; height:1.6px; background:var(--ink); position:relative; border-radius:2px; }
.v2-burger span::before,.v2-burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1.6px; background:var(--ink); border-radius:2px;
  transition:transform var(--motion-normal) var(--ease);
}
.v2-burger span::before{ top:-6px; } .v2-burger span::after{ top:6px; }
.v2-burger[aria-expanded="true"] span{ background:transparent; }
.v2-burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.v2-burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1000px){
  .v2-head-row{ min-height:64px; gap:12px; }
  .v2-burger{ display:flex; order:3; margin-left:auto; }
  .v2-nav,.v2-head-cta{
    display:none; order:4; width:100%;
    flex-direction:column; align-items:stretch; gap:4px; padding-bottom:var(--s5);
  }
  .v2-head-row.is-open{ flex-wrap:wrap; }
  .v2-head-row.is-open .v2-nav,.v2-head-row.is-open .v2-head-cta{ display:flex; }
  .v2-nav a{ padding:13px 12px; font-size:16px; border-radius:var(--r-m); }
  .v2-nav a[aria-current="page"]::after{ left:12px; right:auto; width:16px; bottom:9px; }
  .v2-head-cta .btn{ width:100%; min-height:46px; font-size:15px; }
}

/* --------------------------------------------------------------- hero --- */
.hero{ padding-top:clamp(56px,8vw,112px); padding-bottom:clamp(48px,6vw,84px); }
.hero-grid{ display:grid; grid-template-columns:7fr 4fr; gap:clamp(32px,5vw,80px); align-items:end; }
.hero h1{ text-wrap:balance; }
.hero-sub{ margin-top:var(--s5); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s6); }
.hero-rail{ display:flex; flex-direction:column; gap:var(--s5); padding-bottom:6px; }
.hero-rail-item{ border-top:1px solid var(--line); padding-top:var(--s3); }
.hero-rail-item dt{ font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.hero-rail-item dd{ margin:0; font-size:16px; font-weight:600; color:var(--ink); }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--s7); align-items:start; }
  .hero-rail{ flex-direction:row; flex-wrap:wrap; gap:var(--s4) var(--s6); }
  .hero-rail-item{ flex:1 1 180px; }
}

/* ------------------------------------------------------- problem index -- */
.prob-list{ border-top:1px solid var(--line); }
.prob{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s5);
  padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--motion-normal) var(--ease), background var(--motion-normal) var(--ease);
}
.prob:hover{ padding-left:14px; background:linear-gradient(90deg, rgba(34,197,94,.06), transparent 60%); }
.prob-q{ font-size:clamp(18px,2.2vw,26px); font-weight:700; line-height:1.24; letter-spacing:-.028em; color:var(--ink); }
.prob-to{ font-family:var(--num); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.prob:hover .prob-to{ color:var(--green-light); }
.prob-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); transition:background var(--motion-normal) var(--ease), box-shadow var(--motion-normal) var(--ease); }
.prob:hover .prob-dot{ background:var(--green); box-shadow:0 0 12px var(--green-glow); }
@media (max-width:720px){
  .prob{ grid-template-columns:auto 1fr; gap:var(--s4); }
  .prob-to{ grid-column:2; }
}

/* ------------------------------------------------------- service index -- */
.svc-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,44px); }
.svc-col h3{ padding-bottom:var(--s3); border-bottom:1px solid var(--line-strong); margin-bottom:var(--s4); }
.svc-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.svc-col li a{
  display:block; padding:10px 0; font-size:15px; color:var(--muted);
  border-bottom:1px solid var(--line);
  transition:color var(--motion-fast) var(--ease), padding-left var(--motion-fast) var(--ease);
}
.svc-col li a:hover{ color:var(--green-light); padding-left:6px; }
@media (max-width:980px){ .svc-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .svc-cols{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------- process - */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px); counter-reset:step; }
.step{ position:relative; padding-top:var(--s5); border-top:2px solid var(--green); counter-increment:step; }
.step::before{
  content:counter(step,decimal-leading-zero); position:absolute; top:-2px; left:0;
  transform:translateY(-100%); padding-bottom:8px;
  font-family:var(--num); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--green);
}
.step h3{ font-size:19px; margin-bottom:var(--s2); }
.step .t-small{ color:var(--muted); }
@media (max-width:840px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s7); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ----------------------------------------------------- before / after --- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); }
.ba-col h3{ font-family:var(--num); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s4); color:var(--faint); }
.ba-after h3{ color:var(--green-light); }
.ba-col ul{ list-style:none; margin:0; padding:0; }
.ba-col li{ padding:12px 0; border-bottom:1px solid var(--line); font-size:16px; display:flex; gap:12px; align-items:baseline; color:var(--muted); }
.ba-before li::before{ content:""; width:14px; height:1px; background:rgba(255,255,255,.28); flex:0 0 auto; position:relative; top:-5px; }
.ba-after li{ color:var(--ink); }
.ba-after li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green-glow); flex:0 0 auto; position:relative; top:-2px; }
@media (max-width:700px){ .ba{ grid-template-columns:1fr; gap:var(--s7); } }

/* --------------------------------------------------------- figure row --- */
.figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px); }
.fig-n{ font-family:var(--num); font-size:clamp(34px,4.6vw,52px); font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--green); text-shadow:0 0 20px var(--green-glow); font-variant-numeric:tabular-nums; }
.fig-l{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
@media (max-width:700px){ .figs{ grid-template-columns:1fr; gap:var(--s5); } }

/* ------------------------------------------------------------ selector - */
.sel-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sel{
  min-height:48px; padding:12px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.04); border:1px solid var(--line-strong); color:var(--ink);
  font-family:var(--num); font-size:14.5px; font-weight:700; cursor:pointer;
  transition:background var(--motion-normal) var(--ease), border-color var(--motion-normal) var(--ease),
             color var(--motion-normal) var(--ease), box-shadow var(--motion-normal) var(--ease);
}
.sel:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.sel[aria-pressed="true"]{
  background:var(--green); border-color:transparent; color:#04140b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px rgba(34,197,94,.24);
}
.sel-sans{ font-family:var(--sans); font-size:15px; }
.sel-out{
  margin-top:var(--s5); padding:var(--s6); border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.sel-out h4{ font-size:17px; font-weight:700; margin:0 0 var(--s2); letter-spacing:-.02em; color:var(--ink); }
.sel-out p{ color:var(--muted); }
.sel-out dl{ margin:var(--s5) 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px var(--s5); font-size:15px; }
.sel-out dt{ font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding-top:3px; }
.sel-out dd{ margin:0; color:var(--ink); }
@media (max-width:560px){ .sel-out dl{ grid-template-columns:1fr; gap:4px; } .sel-out dd{ margin-bottom:10px; } }

/* ---------------------------------------------------------------- form - */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); }
.field input,.field select{
  min-height:50px; padding:13px 15px; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04); color:var(--ink);
  font-family:var(--sans); font-size:16px;
  transition:border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.field input::placeholder{ color:var(--faint); }
.field input:focus,.field select:focus{
  outline:0; border-color:rgba(74,222,128,.6); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.field .hint{ font-size:13px; color:var(--faint); }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.qc{
  padding:clamp(22px,3vw,36px); border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--panel); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.34);
}
.qc-steps{ display:flex; flex-direction:column; gap:var(--s4); }
.qc [data-qc-progress]{ font-family:var(--num); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--green-light); }

/* ------------------------------------------------------------ accordion - */
.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer; padding:var(--s5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  font-size:clamp(17px,1.9vw,21px); font-weight:700; letter-spacing:-.024em; color:var(--ink);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--green-light); }
.acc summary::after{
  content:""; width:11px; height:11px; flex:0 0 auto;
  border-right:1.6px solid var(--green); border-bottom:1.6px solid var(--green);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--motion-normal) var(--ease);
}
.acc details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.acc-body{ padding-bottom:var(--s5); }

/* -------------------------------------------------------------- article - */
.art-list{ border-top:1px solid var(--line); }
.art{
  display:grid; grid-template-columns:1fr auto; gap:var(--s5); align-items:baseline;
  padding:var(--s5) 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--motion-normal) var(--ease);
}
.art:hover{ padding-left:10px; }
.art h3{ font-size:clamp(18px,2vw,23px); }
.art:hover h3{ color:var(--green-light); }
.art-meta{ font-family:var(--num); font-size:12px; color:var(--faint); white-space:nowrap; }
.art p{ margin-top:8px; color:var(--muted); font-size:15px; max-width:68ch; }
@media (max-width:640px){ .art{ grid-template-columns:1fr; gap:var(--s2); } }

.empty{
  padding:clamp(28px,4vw,44px); border:1px dashed var(--line-strong); border-radius:var(--r-m);
  background:rgba(255,255,255,.02); max-width:62ch;
}
.empty h3{ font-size:20px; margin-bottom:var(--s3); }

/* ---------------------------------------------------------------- team -- */
.team-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,40px); }
.person{ border-top:2px solid var(--green); padding-top:var(--s4); }
.person-name{ font-size:24px; font-weight:800; letter-spacing:-.03em; }
.person-role{ font-family:var(--num); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--green-light); margin-top:6px; }
.person dl{ margin:var(--s5) 0 0; font-size:14.5px; }
.person dt{ font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:var(--s4); }
.person dd{ margin:4px 0 0; color:var(--ink); }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; } }

/* content that must not be mistaken for finished copy */
.confirm{
  display:inline-block; padding:3px 9px; border-radius:var(--r-s);
  background:rgba(234,179,8,.12); color:#fbbf24; border:1px solid rgba(234,179,8,.32);
  font-family:var(--num); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* --------------------------------------------------------------- notice - */
.notice{
  display:flex; gap:12px; padding:16px 18px; border-radius:var(--r-m);
  background:var(--green-wash); border:1px solid rgba(74,222,128,.22);
  font-size:14.5px; line-height:1.65; color:var(--muted);
}
.notice strong{ color:var(--green-light); font-weight:700; }

/* --------------------------------------------------------------- footer - */
.v2-foot{
  background:linear-gradient(180deg, rgba(19,19,22,.9), var(--bg));
  border-top:1px solid var(--line);
  color:var(--muted); padding-block:var(--s9) var(--s6); position:relative;
}
.v2-foot::before{
  content:""; position:absolute; top:-1px; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(74,222,128,.5), transparent);
}
.v2-foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px); }
.v2-foot h4{ font-family:var(--num); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:var(--s4); }
.v2-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.v2-foot a{ font-size:14.5px; transition:color var(--motion-fast) var(--ease); }
.v2-foot a:hover{ color:var(--green-light); }
.v2-foot-legal{ margin-top:var(--s4); font-size:14px; line-height:1.75; max-width:42ch; }
.v2-foot-bottom{
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  font-family:var(--num); font-size:11.5px; letter-spacing:.04em; color:var(--faint);
}
@media (max-width:980px){ .v2-foot-grid{ grid-template-columns:1fr 1fr; row-gap:var(--s7); } .v2-foot-brand{ grid-column:1/-1; } }
@media (max-width:560px){ .v2-foot-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- preview ribbon - */
.v2-ribbon{
  background:rgba(34,197,94,.1); border-bottom:1px solid rgba(74,222,128,.2);
  color:var(--muted); font-family:var(--num); font-size:11.5px; letter-spacing:.06em;
  padding:8px 0; text-align:center;
}
.v2-ribbon b{ color:var(--green-light); font-weight:700; }

/* ---------------------------------------------------------------- misc -- */
.stack-s{ display:flex; flex-direction:column; gap:var(--s3); }
.stack-m{ display:flex; flex-direction:column; gap:var(--s5); }
.stack-l{ display:flex; flex-direction:column; gap:var(--s7); }
.split{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,72px); align-items:start; }
.split-even{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .split,.split-even{ grid-template-columns:1fr; gap:var(--s6); } }
.sticky-rail{ position:sticky; top:104px; }
@media (max-width:900px){ .sticky-rail{ position:static; } }

/* the reveal from /services — same curve, same blur+scale arrival */
@media (prefers-reduced-motion:no-preference){
  .rise{
    opacity:0; transform:translateY(22px) scale(.985); filter:blur(6px);
    transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  }
  .rise.is-in{ opacity:1; transform:none; filter:blur(0); }
}

/* ==========================================================================
   PREMIUM PASS — the "S", icons, depth, scroll
   ========================================================================== */

/* ------------------------------------------------------ hero sculpture -- */
/* Same stage as production: a fixed layer behind everything, with a green
   glow that stands in until WebGL is up and stays for devices that skip it. */
.fin-stage{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; }
.fin-stage .svc-page-bg{ position:absolute; inset:0; transition:transform .4s ease-out; }
.fin-canvas{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.fin-canvas canvas{ display:block; width:100%; height:100%; }
.fin-stage.is-live .fin-canvas{ opacity:1; }
.fin-stage::after{
  content:""; position:absolute; right:-8%; top:-12%;
  width:min(78vw,820px); height:min(78vw,820px); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(34,197,94,.2), rgba(34,197,94,.05) 46%, transparent 70%);
  opacity:.9; transition:opacity 1.1s ease;
}
.fin-stage.is-loading::after{ animation:finBreathe 2.6s ease-in-out infinite; }
.fin-stage.is-live::after{ opacity:0; }
@keyframes finBreathe{ 0%,100%{ opacity:.5; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
@media (prefers-reduced-motion:reduce){ .fin-stage.is-loading::after{ animation:none; } .fin-canvas{ transition:none; } }
@media (max-width:640px){ .fin-stage::after{ right:-25%; top:-6%; width:120vw; height:120vw; } }

/* The sculpture frames itself against the hero box, so the hero needs real
   height or the S scales up into a wall. */
.hero{ display:flex; align-items:center; min-height:min(72vh,640px); position:relative; }
.hero > .shell{ width:100%; position:relative; z-index:1; }
/* keeps the headline legible where the brighter ribbons pass behind it */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.5) 46%, rgba(10,10,12,0) 78%);
}
@media (max-width:900px){
  .hero{ min-height:0; }
  .hero::after{ background:linear-gradient(180deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,.82) 38%, rgba(10,10,12,.72) 70%, rgba(10,10,12,.35) 100%); }
}

/* --------------------------------------------------------------- icons -- */
/* the /services mark: a real Font Awesome glyph in a green-ringed circle */
.ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  background:rgba(34,197,94,.1); border:1px solid rgba(120,225,173,.3);
  color:var(--green); font-size:17px;
  transition:background var(--motion-normal) var(--ease), box-shadow var(--motion-normal) var(--ease), transform var(--motion-normal) var(--ease);
}
.ico-lg{ width:56px; height:56px; font-size:22px; }
.ico-sm{ width:36px; height:36px; font-size:14px; }
.prob:hover .ico,.svc-col:hover > h3 .ico,.step:hover .ico,.acc summary:hover .ico,.card-ico:hover .ico{
  background:rgba(34,197,94,.18); box-shadow:0 0 22px var(--green-glow); transform:scale(1.06);
}
.prob{ grid-template-columns:auto 1fr auto; }
.svc-col h3{ display:flex; align-items:center; gap:14px; }
.step .ico{ margin-bottom:var(--s4); }
.acc summary .sum-l{ display:flex; align-items:center; gap:16px; }
.ico-row{ display:flex; align-items:flex-start; gap:16px; }
.ico-row > div{ min-width:0; }

/* --------------------------------------------------------- scroll polish -- */
.v2-progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; }
.v2-progress span{
  display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(var(--p,0));
  background:linear-gradient(90deg, var(--green), var(--green-light)); box-shadow:0 0 12px var(--green-glow);
}
@media (prefers-reduced-motion:no-preference){
  .rise{ transition-delay:calc(var(--i,0) * 70ms); }
}

/* ------------------------------------------- portal illustration (mock) -- */
.mock{
  border:1px solid var(--line-strong); border-radius:var(--r-m);
  background:var(--panel); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 40px 90px -30px rgba(0,0,0,.85);
}
.mock-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
}
.mock-bar b{ color:var(--green-light); font-weight:700; }
.mock-body{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.mock-col{ padding:18px; border-left:1px solid var(--line); min-width:0; }
.mock-col:first-child{ border-left:0; }
.mock-col h4{ font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.mock-col h4 i{ color:var(--green-light); }
.mock-row{ padding:11px 0; border-top:1px solid var(--line); font-size:13.5px; line-height:1.4; color:var(--ink); }
.mock-row:first-of-type{ border-top:0; padding-top:0; }
.mock-row small{ display:block; margin-top:4px; color:var(--faint); font-size:12px; }
.pill{
  display:inline-block; margin-top:6px; padding:3px 9px; border-radius:var(--r-pill);
  font-family:var(--num); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--muted);
}
.pill-g{ border-color:rgba(74,222,128,.32); background:rgba(34,197,94,.1); color:var(--green-light); }
.pill-a{ border-color:rgba(234,179,8,.32); background:rgba(234,179,8,.1); color:#fbbf24; }
.mock-note{ padding:12px 18px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); }
@media (max-width:820px){
  .mock-body{ grid-template-columns:1fr; }
  .mock-col{ border-left:0; border-top:1px solid var(--line); }
  .mock-col:first-child{ border-top:0; }
}


/* ==========================================================================
   PREMIUM LAYER — depth, craft and states

   Everything above defines the vocabulary; this layer is what makes it feel
   finished. It adds nothing that changes layout. It works on four things:

     1. a real elevation and surface system (hairline sheen, spotlight, grain)
     2. typography that is tuned rather than defaulted
     3. every interactive state a person can actually reach
     4. the small components the pages were missing (toast, prose, tables)

   It is appended after the base on purpose, so it can refine any rule above
   without a specificity fight.
   ========================================================================== */

/* ------------------------------------------------------------ tokens+ ---- */
:root{
  color-scheme:dark;

  /* elevation: an inner highlight on the top edge plus a soft, long shadow.
     Never a grey blur — the shadow is near-black and pulled tight (negative
     spread), which is what stops dark surfaces looking muddy. */
  --elev-1:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px -12px rgba(0,0,0,.7);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -22px rgba(0,0,0,.85);
  --elev-3:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -30px rgba(0,0,0,.9);

  --ring:0 0 0 4px rgba(34,197,94,.14);
  --ring-strong:0 0 0 1px rgba(74,222,128,.55), 0 0 0 5px rgba(34,197,94,.16);
  --ring-danger:0 0 0 4px rgba(239,68,68,.13);

  --hair:linear-gradient(90deg, transparent, rgba(74,222,128,.5), transparent);
  --hair-soft:linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  --sheen:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 38%, rgba(74,222,128,.3));
  --surface:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%), var(--panel);
  --spot:rgba(74,222,128,.13);

  /* a static film grain, generated in the browser: no image to download */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234ade80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --nav-h:76px;
  --z-raised:10; --z-nav:80; --z-modal:9999; --z-toast:10000;
  --danger:#f87171; --warn:#fbbf24;

  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:.16s; --dur-2:.28s; --dur-3:.6s;
}

/* -------------------------------------------------------------- base+ ---- */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
:where([id]){ scroll-margin-top:calc(var(--nav-h) + 12px); }
body{
  accent-color:var(--green);
  caret-color:var(--green-light);
  font-optical-sizing:auto;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
}
a,button,summary,label,select,input,[role="button"]{ -webkit-tap-highlight-color:transparent; }
button,summary,[role="button"]{ touch-action:manipulation; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:2px solid var(--green-light); outline-offset:3px; }
::placeholder{ color:var(--faint); opacity:1; }

/* -------------------------------------------------------- typography+ ---- */
h1,h2,h3,h4{ text-wrap:balance; }
p,li,.t-body,.t-lead{ text-wrap:pretty; }

/* the display line falls off from white to a cool grey: it reads as light
   coming from above rather than as a flat colour */
.hero .t-display,
.hero h1,
.v2-legacy .hero-title{
  background:linear-gradient(180deg, #ffffff 22%, #aeb5c0 118%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .hero .t-display,.hero h1,.v2-legacy .hero-title{ -webkit-text-fill-color:currentColor; background:none; }
}

.t-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600; letter-spacing:-.005em; color:var(--muted);
}
.t-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green-glow); }
.t-num{ font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.t-quote{
  font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1.28; letter-spacing:-.03em;
  color:var(--ink); max-width:30ch; padding-left:22px; border-left:2px solid var(--green);
}
.t-muted{ color:var(--muted); }
.t-ink{ color:var(--ink); }
.t-green{ color:var(--green-light); }

.t-body strong,.t-body b,.t-lead strong{ color:var(--ink); font-weight:600; }
.t-body a:not(.btn):not(.link-ul){
  color:var(--green-light);
  text-decoration:underline; text-decoration-color:rgba(74,222,128,.4);
  text-decoration-thickness:1px; text-underline-offset:.22em;
  transition:text-decoration-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.t-body a:not(.btn):not(.link-ul):hover{ color:#86efac; text-decoration-color:currentColor; }
.t-body ul,.t-body ol{ margin:0; padding-left:1.35em; display:flex; flex-direction:column; gap:.55em; }
.t-body li::marker{ color:var(--green); }
mark{ background:rgba(34,197,94,.22); color:var(--ink); padding:.05em .3em; border-radius:4px; }
kbd{
  font-family:var(--num); font-size:.82em; padding:.15em .5em; border-radius:6px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.05); color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
code{ font-family:var(--num); font-size:.9em; }
hr{ border:0; height:1px; background:var(--hair-soft); margin:var(--s7) 0; }

/* ----------------------------------------------------------- surfaces --- */
.surface{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--elev-2); }
.surface-raised{ box-shadow:var(--elev-3); }
.surface-glass{
  background:var(--panel-glass); border:1px solid var(--line-strong); border-radius:var(--r-m);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
}

/* the three big containers get a hairline that catches light at the top-left
   and warms to green at the bottom-right — drawn as a masked gradient so it
   stays a true 1px line at any radius */
.qc,.sel-out,.mock{ position:relative; background:var(--surface); box-shadow:var(--elev-3); }
.qc,.sel-out{ border:1px solid transparent; }
.mock{ border:0; }
.qc::before,.sel-out::before,.mock::before{
  content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit;
  background:var(--sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.mock::before{ inset:0; }

/* a soft green light that follows the pointer across the surface. The
   coordinates come from v2-fx.js; without it the light simply never shows. */
.qc::after,.sel-out::after,.mock::after,
.v2-legacy .panel::after,.v2-legacy .panel-soft::after,.v2-legacy .bcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%), var(--spot), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.qc:hover::after,.sel-out:hover::after,.mock:hover::after,
.v2-legacy .panel:hover::after,.v2-legacy .panel-soft:hover::after,.v2-legacy .bcard:hover::after{ opacity:1; }
.v2-legacy .panel,.v2-legacy .panel-soft,.v2-legacy .bcard{ position:relative; }

/* lifted sections get grain and a lit top edge, so they read as a different
   material rather than just a darker rectangle */
.sec-ink{ position:relative; isolation:isolate; }
.sec-ink::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain); opacity:.05; mix-blend-mode:overlay;
}
.sec-ink::after{
  content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:var(--hair); pointer-events:none;
}

/* section rules fade out at the edges instead of ending in a hard line */
.sec-line{ border-top:0; }
.sec-line::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--hair-soft); pointer-events:none;
}

/* ------------------------------------------------------------- buttons+ -- */
.btn{ position:relative; overflow:hidden; isolation:isolate; letter-spacing:-.005em; }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .9s var(--ease-out-expo);
}
.btn-primary:hover::after{ transform:translateX(130%); }
.btn-lg{ min-height:56px; padding:16px 30px; font-size:16px; }
.btn-icon{ width:48px; padding:0; }
.btn-quiet{ background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; }
.btn-quiet:hover{ color:var(--ink); background:rgba(255,255,255,.05); transform:none; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; filter:saturate(.6); }
.btn.is-loading{ color:transparent; pointer-events:none; }
.btn.is-loading::before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(4,20,11,.25); border-top-color:#04140b;
  animation:v2spin .7s linear infinite;
}
@keyframes v2spin{ to{ transform:rotate(360deg); } }

.link-ul{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; border-bottom-color:rgba(74,222,128,.3); transition:background-size .4s var(--ease-out-expo), color var(--dur-1) var(--ease); }
.link-ul:hover{ background-size:100% 1px; }

/* ---------------------------------------------------------------- hero+ -- */
.hero{ border-bottom:0; }
.hero-rail-item{ position:relative; }
.hero-rail-item::before{
  content:""; position:absolute; top:-1px; left:0; width:28px; height:1px;
  background:var(--green); box-shadow:0 0 10px var(--green-glow);
}
.hero-actions{ align-items:center; }

/* ------------------------------------------------------ rows and lists --- */
.prob,.art{ position:relative; }
.prob::after,.art::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg, var(--green), transparent);
  transition:width .55s var(--ease-out-expo); pointer-events:none;
}
.prob:hover::after,.art:hover::after{ width:100%; }

.svc-col li a{
  background:linear-gradient(var(--green),var(--green)) 0 100%/0 1px no-repeat;
  transition:color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease), background-size .45s var(--ease-out-expo);
}
.svc-col li a:hover{ background-size:100% 1px; }

/* the timeline: a line that fades out along the way, and a lit node where
   each step begins — it is a sequence, so it should look like one */
.step{
  border-top:0 !important;
  background:linear-gradient(90deg, var(--green), rgba(34,197,94,.14)) 0 0/100% 2px no-repeat;
}
.step::after{
  content:""; position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:2px solid var(--green); box-shadow:0 0 12px var(--green-glow);
}
.v2-legacy .step{ background:linear-gradient(90deg, var(--green), rgba(34,197,94,.14)) 0 0/100% 2px no-repeat !important; border-top:0 !important; }
.v2-legacy .step::after{ content:""; position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--green); box-shadow:0 0 12px var(--green-glow); }

.ba-after li{ transition:transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ba-after li:hover{ transform:translateX(6px); }
.figs > *{ position:relative; }

/* ------------------------------------------------------------ accordion+ - */
.acc details{ transition:background var(--dur-3) var(--ease); }
.acc details[open]{ background:linear-gradient(90deg, rgba(34,197,94,.06), transparent 45%); }
.acc details[open] > summary{ color:var(--green-light); }
.acc summary{ transition:color var(--dur-1) var(--ease); }
.acc summary:focus-visible{ outline-offset:-2px; border-radius:var(--r-s); }
@supports (interpolate-size:allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .acc details::details-content{ block-size:0; overflow:clip; transition:block-size .38s var(--ease-out-expo), content-visibility .38s allow-discrete; }
  .acc details[open]::details-content{ block-size:auto; }
}

/* ------------------------------------------------------------- forms+ ---- */
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:13px 15px; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.4;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:hover:not(:focus):not(:disabled),
.field select:hover:not(:focus):not(:disabled),
.field textarea:hover:not(:focus):not(:disabled){ border-color:rgba(255,255,255,.3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:rgba(74,222,128,.6); background:rgba(255,255,255,.06); box-shadow:var(--ring);
}
.field input:disabled,.field select:disabled,.field textarea:disabled{ opacity:.5; cursor:not-allowed; }

/* the native arrow is replaced so every browser draws the same one */
.field select,.modal select.in2{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:46px; background-image:var(--chevron);
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.field select option,.modal select.in2 option{ background:#131316; color:var(--ink); }

/* errors and confirmation appear only after the person has interacted */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{ border-color:rgba(239,68,68,.65); box-shadow:var(--ring-danger); }
.field input:user-valid:not(:placeholder-shown){ border-color:rgba(74,222,128,.4); }
.field:has(:user-invalid) .hint{ color:var(--danger); }
.field-error{ font-size:13px; line-height:1.5; color:var(--danger); }

.field input[type="file"]{ padding:9px; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  margin-right:14px; padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.06);
  color:var(--ink); font:600 13.5px var(--sans); cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
.field input[type="file"]::file-selector-button:hover{ background:rgba(255,255,255,.12); }

.check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:14.5px; line-height:1.55; color:var(--muted); }
.check input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; margin:1px 0 0; width:22px; height:22px;
  display:grid; place-content:center; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:6px; background:rgba(255,255,255,.04);
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.check input::before{
  content:""; width:10px; height:6px; margin-top:-2px;
  border-left:2px solid #04140b; border-bottom:2px solid #04140b;
  transform:rotate(-45deg) scale(0); transition:transform .18s var(--ease-spring);
}
.check input:checked{ background:var(--green); border-color:transparent; }
.check input:checked::before{ transform:rotate(-45deg) scale(1); }
.check input:focus-visible{ box-shadow:var(--ring-strong); outline:0; }
.check a{ color:var(--green-light); text-decoration:underline; text-underline-offset:.2em; }

/* -------------------------------------------------------- data and tables */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); box-shadow:var(--elev-1); }
.tbl{ width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:15px; }
.tbl th{
  position:sticky; top:0; text-align:left; padding:14px 18px; background:rgba(19,19,22,.95);
  font-family:var(--num); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--line-strong);
}
.tbl td{ padding:15px 18px; color:var(--muted); border-bottom:1px solid var(--line); vertical-align:top; }
.tbl td:first-child{ color:var(--ink); font-weight:600; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background var(--dur-1) var(--ease); }
.tbl tbody tr:hover td{ background:rgba(255,255,255,.025); }

/* --------------------------------------------------- tags, tips, loading - */
.tag{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap;
}
.tag-g{ border-color:rgba(74,222,128,.3); background:rgba(34,197,94,.08); color:var(--green-light); }
.tag-a{ border-color:rgba(234,179,8,.32); background:rgba(234,179,8,.08); color:var(--warn); }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 var(--green-glow); animation:v2pulse 2.2s ease-out infinite; }
@keyframes v2pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); } 70%,100%{ box-shadow:0 0 0 9px rgba(34,197,94,0); } }

.skeleton{
  border-radius:var(--r-s); min-height:1em;
  background:linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 75%) 0 0/200% 100%;
  animation:v2shimmer 1.5s linear infinite;
}
@keyframes v2shimmer{ to{ background-position:-200% 0; } }

/* ----------------------------------------------------- notification toast
   app.js raises these on every validation message and on success. The base
   site carries their styles; V2 loads none of it, so without this block the
   messages would be unstyled text at the foot of the page. The transform is
   part of the contract: app.js overrides it inline to slide the toast out. */
.ps-toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:var(--z-toast);
  transform:translateX(-50%); width:min(520px, calc(100vw - 24px));
  padding:14px 14px 12px; border-radius:var(--r-m);
  background:rgba(19,19,22,.94); color:var(--ink);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-strong); box-shadow:var(--elev-3);
  font-family:var(--sans);
  transition:opacity .2s ease, transform .2s ease;
  animation:v2toastIn .34s var(--ease-spring);
}
@keyframes v2toastIn{
  from{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
.ps-toast.tone-success{ border-color:rgba(74,222,128,.42); }
.ps-toast.tone-warn{ border-color:rgba(234,179,8,.42); }
.ps-toast__row{ display:flex; gap:12px; align-items:flex-start; }
.ps-toast__msg{ flex:1 1 auto; font-size:14.5px; font-weight:600; line-height:1.45; }
.ps-toast__x{
  flex:0 0 auto; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); color:var(--muted); font-size:12px; cursor:pointer;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ps-toast__x:hover{ background:rgba(255,255,255,.12); color:var(--ink); }
.ps-toast__bar{ margin-top:12px; height:3px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.ps-toast__bar > div{ width:100%; height:100%; border-radius:99px; background:rgba(255,255,255,.7); transition:width 4.2s linear; }
.ps-toast.tone-success .ps-toast__bar > div{ background:var(--green); }
.ps-toast.tone-warn .ps-toast__bar > div{ background:var(--warn); }

/* -------------------------------------------------------- article prose --- */
.prose{ max-width:68ch; color:var(--muted); font-size:17px; line-height:1.78; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:clamp(26px,3vw,34px); line-height:1.12; color:var(--ink); margin-top:2.3em; letter-spacing:-.032em; }
.prose h3{ font-size:clamp(20px,2.2vw,24px); line-height:1.2; color:var(--ink); margin-top:1.9em; letter-spacing:-.024em; }
.prose h2 + *,.prose h3 + *{ margin-top:.7em; }
.prose strong,.prose b{ color:var(--ink); font-weight:600; }
.prose a{
  color:var(--green-light); text-decoration:underline; text-decoration-color:rgba(74,222,128,.4);
  text-decoration-thickness:1px; text-underline-offset:.22em; transition:text-decoration-color var(--dur-1) var(--ease);
}
.prose a:hover{ text-decoration-color:currentColor; }
.prose ul,.prose ol{ padding-left:1.4em; display:flex; flex-direction:column; gap:.5em; }
.prose li::marker{ color:var(--green); }
.prose blockquote{
  margin-inline:0; padding:.25em 0 .25em 1.4em; border-left:2px solid var(--green);
  color:var(--ink); font-size:1.12em; line-height:1.55;
}
.prose img,.prose figure{ border-radius:var(--r-m); border:1px solid var(--line); }
.prose figcaption{ margin-top:.7em; font-size:14px; color:var(--faint); }
.prose hr{ margin:2.6em 0; }
.prose code{ padding:.15em .45em; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.prose pre{ overflow:auto; padding:18px 20px; border-radius:var(--r-m); background:var(--panel); border:1px solid var(--line); box-shadow:var(--elev-1); }
.prose pre code{ padding:0; background:none; border:0; }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; }
.prose th,.prose td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.prose th{ color:var(--ink); font-weight:600; }

/* -------------------------------------------------------------- footer+ -- */
.v2-foot a{ background:linear-gradient(var(--green-light),var(--green-light)) 0 100%/0 1px no-repeat; transition:color var(--dur-1) var(--ease), background-size .4s var(--ease-out-expo); }
.v2-foot a:hover{ background-size:100% 1px; }
.v2-foot-brand .v2-logo-mark{ box-shadow:0 0 0 5px rgba(34,197,94,.12), 0 0 16px rgba(34,197,94,.55); }
.v2-foot-bottom{ align-items:center; }
.v2-ribbon{ position:relative; z-index:var(--z-raised); }

/* ------------------------------------------------------------ utilities -- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.nowrap{ white-space:nowrap; }
.center{ text-align:center; margin-inline:auto; }
.mt-0{ margin-top:0; } .mt-s{ margin-top:var(--s4); } .mt-m{ margin-top:var(--s6); } .mt-l{ margin-top:var(--s8); }
.row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.row-between{ justify-content:space-between; }
.grow{ flex:1 1 auto; }

/* ---------------------------------------------------------------- motion - */
@media (prefers-reduced-motion:no-preference){
  .rise-left{ opacity:0; transform:translateX(-24px); filter:blur(6px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
  .rise-left.is-in{ opacity:1; transform:none; filter:blur(0); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .btn-primary::after{ display:none; }
}

/* ------------------------------------------- touch, contrast, print, etc. */
@media (hover:none){
  .prob:hover{ padding-left:0; background:none; }
  .art:hover{ padding-left:0; }
  .btn-primary::after,.link-ul{ background-image:none; }
  .qc::after,.sel-out::after,.mock::after{ display:none; }
}
@media (pointer:coarse){
  .sel,.chip,.btn,.field input,.field select{ min-height:48px; }
  .acc summary{ padding-block:var(--s5); }
}
@supports (padding:max(0px)){
  .v2-foot{ padding-bottom:max(var(--s6), env(safe-area-inset-bottom)); }
}
@media (max-width:640px){
  .t-display{ letter-spacing:-.036em; }
  .hero-actions .btn{ flex:1 1 100%; }
  .qc{ padding:20px; }
  .sel-out{ padding:22px; }
  .prose{ font-size:16.5px; line-height:1.72; }
}
@media (prefers-contrast:more){
  :root{ --line:rgba(255,255,255,.24); --line-strong:rgba(255,255,255,.4); --muted:#c6ccd4; --faint:#a9b0bb; }
}
@media (forced-colors:active){
  .fin-stage,.hero::after,body::before,body::after{ display:none; }
  .btn,.sel,.chip,.svc-nav-pill{ border:1px solid ButtonText; }
  .btn-primary{ background:Highlight; color:HighlightText; }
}
@media print{
  :root{ --bg:#fff; --panel:#fff; --panel-2:#fff; --panel-glass:#fff; --ink:#000; --muted:#333; --faint:#555; --line:#ccc; --line-strong:#bbb; }
  html,body{ background:#fff; color:#000; }
  .svc-nav,.v2-ribbon,.v2-progress,.fin-stage,.modal,.ps-toast,.v2-skip,body::before,body::after,.hero::after,.sec-ink::before{ display:none !important; }
  .hero{ min-height:0; }
  .hero .t-display,.hero h1{ background:none; -webkit-text-fill-color:#000; color:#000; }
  .rise,.rise-left{ opacity:1 !important; transform:none !important; filter:none !important; }
  .sec,.sec-tight{ padding-block:24px; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.85em; color:#555; }
  main{ padding-top:0; }
}

/* ------------------------------------------------ keyboard, row by row --- */
/* rows are links, so they need a focus state that fits their shape: an inset
   ring, not an outline that would spill past the section edge */
.prob:focus-visible,.art:focus-visible{ outline:2px solid var(--green-light); outline-offset:-2px; border-radius:var(--r-s); background:rgba(34,197,94,.06); }
.prob:focus-visible::after,.art:focus-visible::after{ width:100%; }
.svc-col li a:focus-visible{ outline-offset:2px; color:var(--green-light); }
.sel:active{ transform:scale(.97); }
.sel:focus-visible{ box-shadow:var(--ring-strong); outline:0; }
.acc summary:active{ opacity:.8; }

/* ------------------------------------------------------------ team ------ */
/* a monogram until there is a photograph: the initials are the person's own,
   drawn inside the same green ring the icons use */
.avatar{
  width:76px; height:76px; border-radius:50%; margin-bottom:var(--s5);
  display:flex; align-items:center; justify-content:center;
  font:700 22px/1 var(--num); letter-spacing:.04em; color:var(--green-light);
  background:
    radial-gradient(circle at 30% 25%, rgba(74,222,128,.28), transparent 60%),
    var(--panel-2);
  border:1px solid rgba(120,225,173,.34);
  box-shadow:0 0 0 6px rgba(34,197,94,.06), var(--elev-2);
}
.person{ position:relative; transition:transform var(--dur-2) var(--ease); }
.person::before{
  content:""; position:absolute; top:-2px; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--green), transparent);
  transform-origin:0 50%; transition:transform .6s var(--ease-out-expo);
}
.person:hover::before{ transform:scaleX(1.02); box-shadow:0 0 14px var(--green-glow); }

/* ------------------------------------------------------- notice variants - */
.notice{ align-items:flex-start; }
.notice > i{ margin-top:3px; color:var(--green-light); flex:0 0 auto; }
.notice-warn{ background:rgba(234,179,8,.08); border-color:rgba(234,179,8,.28); }
.notice-warn strong,.notice-warn > i{ color:var(--warn); }
.notice-danger{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); }
.notice-danger strong,.notice-danger > i{ color:var(--danger); }
.empty{ position:relative; background:rgba(255,255,255,.02); }
.empty::before{
  content:""; position:absolute; top:-1px; left:24px; right:24px; height:1px;
  background:var(--hair); opacity:.7;
}

/* ------------------------------------------------------------ scrollbars - */
.ddmenu,.modal-body,.svc-nav-mobile-panel,.tbl-wrap,.prose pre{
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.ddmenu::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.tbl-wrap::-webkit-scrollbar{ width:8px; height:8px; }
.ddmenu::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.tbl-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.2); border-radius:99px; border:2px solid transparent; background-clip:padding-box;
}
.ddmenu::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover{ background:rgba(74,222,128,.55); background-clip:padding-box; }

/* ------------------------------------------- carried-over service pages -- */
/* the same light sweep the V2 buttons have, and a gentle lift on the small
   feature tiles, so the older pages do not feel like a different product */
.v2-legacy .btn.primary,.v2-legacy .btn-hero.primary{ position:relative; overflow:hidden; isolation:isolate; }
.v2-legacy .btn.primary::after,.v2-legacy .btn-hero.primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .9s var(--ease-out-expo);
}
.v2-legacy .btn.primary:hover::after,.v2-legacy .btn-hero.primary:hover::after{ transform:translateX(130%); }
.v2-legacy .bcard,.v2-legacy .cov{ transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
@media (hover:hover){
  .v2-legacy .bcard:hover,.v2-legacy .cov:hover{ transform:translateY(-3px); border-color:rgba(74,222,128,.3) !important; }
}
.v2-legacy .iconli{ transition:padding-left var(--dur-2) var(--ease); }
.v2-legacy .kpi .n{ background:linear-gradient(180deg,#86efac,#22c55e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; }
.v2-legacy .trustpill{ transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.v2-legacy .trustpill:hover{ border-color:rgba(74,222,128,.3) !important; background:rgba(34,197,94,.06) !important; }


/* ==========================================================================
   SECOND PASS — found by looking at it

   Everything in this block answers something seen on a real screen at 390px:
   the sculpture drawing across running text, toasts piling up in one spot, too
   much air between sections on a phone, no way to act without scrolling back
   up, filter chips wrapping into three rows, and Chrome painting autofilled
   fields white on a dark form. The last part prepares the image system.
   ========================================================================== */

/* ----------------------------------------------- the sculpture, dimmed ---
   The "S" is the hero. Below the hero it travels with the page, which is
   right on a wide screen and wrong on a phone, where it crosses the text.
   v2-fx.js writes --stage-o (1 in the hero, falling as you read); the canvas
   follows it. The floor is lower on phones, where there is less room. */
.fin-canvas canvas{ opacity:var(--stage-o,1); transition:opacity .45s linear; }

/* ------------------------------------------------------ hero choreography
   One orchestrated arrival on load, same curve and blur as /services. The
   fill mode is "backwards" on purpose: a "both" fill would keep the final
   transform locked and swallow every hover state on these elements. */
@media (prefers-reduced-motion:no-preference){
  @keyframes heroIn{
    from{ opacity:0; transform:translateY(22px); filter:blur(8px); }
    to{ opacity:1; transform:none; filter:blur(0); }
  }
  .hero .t-display,.hero .hero-sub,.hero .hero-actions,.hero .hero-rail-item,
  .v2-legacy .hero-badges,.v2-legacy .hero-title,.v2-legacy .hero-sub,.v2-legacy .hero-cta,.v2-legacy .trustbar{
    animation:heroIn .95s var(--ease-out-expo) backwards;
  }
  .hero .t-display,.v2-legacy .hero-badges{ animation-delay:.05s; }
  .hero .hero-sub,.v2-legacy .hero-title{ animation-delay:.18s; }
  .hero .hero-actions,.v2-legacy .hero-sub{ animation-delay:.32s; }
  .v2-legacy .hero-cta{ animation-delay:.44s; }
  .v2-legacy .trustbar{ animation-delay:.56s; }
  .hero .hero-rail-item:nth-child(1){ animation-delay:.42s; }
  .hero .hero-rail-item:nth-child(2){ animation-delay:.52s; }
  .hero .hero-rail-item:nth-child(3){ animation-delay:.62s; }
  .hero .hero-rail-item:nth-child(4){ animation-delay:.72s; }

  @keyframes pillIn{
    from{ opacity:0; transform:translateY(-14px) scale(.96); }
    to{ opacity:1; transform:none; }
  }
  .svc-nav-pills > *{ animation:pillIn .75s var(--ease-out-expo) backwards; }
  .svc-nav-pills > :nth-child(2){ animation-delay:.08s; }
  .svc-nav-pills > :nth-child(3){ animation-delay:.16s; }
}

/* the side rail sits over the sculpture on a wide screen: give it glass so its
   text never competes with the ribbons behind it */
@media (min-width:901px){
  .hero-rail{
    padding:22px 24px; border-radius:var(--r-m);
    background:linear-gradient(180deg, rgba(19,19,22,.66), rgba(19,19,22,.4));
    border:1px solid var(--line);
    -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
    box-shadow:var(--elev-2);
  }
  .hero-rail-item:first-child{ border-top:0; padding-top:0; }
  .hero-rail-item:first-child::before{ display:none; }
}

/* lifted sections carry a faint green light from above */
.sec-ink{
  background:
    radial-gradient(70% 140% at 50% -25%, rgba(34,197,94,.12), transparent 62%),
    var(--panel-glass);
}

/* ---------------------------------------------------------------- pills -- */
.svc-nav-pill:active,.svc-nav-lang .dd > button:active{ transform:scale(.97); }
.svc-nav-pill:focus-visible,.svc-nav-lang .dd > button:focus-visible{ outline:2px solid var(--green-light); outline-offset:3px; }
.svc-nav-pill-brand .v2-logo-mark{ transition:box-shadow .3s ease; }
.svc-nav-pill-brand:hover .v2-logo-mark{ box-shadow:0 0 0 6px rgba(34,197,94,.16), 0 0 20px rgba(34,197,94,.7); }
.svc-nav-scrolled .svc-nav-pills{ padding-top:10px; padding-bottom:10px; }
.svc-nav-pills{ transition:padding .25s ease; }

/* ------------------------------------------------- spacing on a phone ----
   The vertical rhythm was built for a desktop. On a phone the gaps between
   sections were larger than the sections' own content, so the page read as
   long and empty. The scale is pulled in below 640px, and nothing else. */
@media (max-width:640px){
  :root{ --s8:44px; --s9:64px; --s10:84px; }
  .sec{ padding-block:clamp(48px,13vw,72px); }
  .sec-tight{ padding-block:clamp(40px,11vw,60px); }
  .hero{ padding-bottom:28px; }
  .hero-sub{ margin-top:var(--s4); }
  .hero-actions{ margin-top:var(--s5); }
  .split,.split-even{ gap:var(--s5); }
  .split[style*="margin-bottom:48px"]{ margin-bottom:28px !important; }
  .sec-mark{ margin-bottom:var(--s4); }
  .steps{ row-gap:var(--s6); }
  .prob{ padding-block:18px; }
  .acc summary{ padding-block:20px; }
  .v2-foot{ padding-top:var(--s8); }
  .v2-foot-bottom{ margin-top:var(--s6); }
}

/* phones held sideways: the hero must not fill a 360px-tall screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:0; padding-block:24px; }
  main{ padding-top:64px; }
  .svc-nav-pills{ padding-block:8px; }
}

/* big screens: the type and the shell grow a little, the measure does not */
@media (min-width:1500px){
  :root{ --shell:1320px; }
  .t-display{ font-size:clamp(64px,5.2vw,88px); }
  .t-h2{ font-size:clamp(40px,3.1vw,54px); }
  .t-lead{ font-size:21px; }
}
@media (min-width:2000px){
  :root{ --shell:1480px; }
  html{ font-size:17px; }
}

/* notches: the shell keeps clear of the camera cut-out in landscape */
@supports (padding:max(0px)){
  .shell{ padding-inline:max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@media (max-width:600px){
  @supports (padding:max(0px)){
    .shell{ padding-inline:max(18px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  }
}

/* ------------------------------------------------------ filter chip rail --
   Eight topic chips wrapped into three rows on a phone. As a single swipeable
   row they stay one line, snap to their own edges and fade at the sides. */
@media (max-width:720px){
  .sel-row-scroll{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:-18px; padding:2px 18px 8px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 34px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 34px), transparent);
  }
  .sel-row-scroll::-webkit-scrollbar{ display:none; }
  .sel-row-scroll > *{ flex:0 0 auto; scroll-snap-align:start; }
}

/* --------------------------------------------------------- dark autofill --
   Chrome and Safari paint an autofilled field with a pale background that the
   author's own background cannot override, which turns a dark form white. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #1a1b1f inset;
  box-shadow:0 0 0 1000px #1a1b1f inset;
  border-color:rgba(74,222,128,.4);
  transition:background-color 9999s ease-out 0s;
}

/* ------------------------------------------------------------ toasts ----
   Two messages used to draw on top of each other at the same spot. The script
   now keeps only the latest; on a phone the toast also clears the action bar. */
@media (max-width:720px){
  body.v2-service.is-past-hero .ps-toast{ bottom:calc(86px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------- the action bar on service pages --
   The request button lives in the hero, and by the time someone has read to
   the bottom of the page it is a long way up. On a phone a bar appears once
   the hero has scrolled away, and steps aside for the menu and the popup. */
.cta-bar{ display:none; }
@media (max-width:720px){
  .cta-bar{
    display:flex; align-items:center; gap:12px;
    position:fixed; left:12px; right:12px; z-index:75;
    bottom:calc(12px + env(safe-area-inset-bottom));
    padding:10px 10px 10px 16px; border-radius:20px;
    background:rgba(19,19,22,.82);
    -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
    border:1px solid var(--line-strong);
    box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    transform:translateY(160%); opacity:0; pointer-events:none;
    transition:transform .5s var(--ease-out-expo), opacity .3s ease;
  }
  body.is-past-hero .cta-bar{ transform:none; opacity:1; pointer-events:auto; }
  body:has(.modal.open) .cta-bar,
  body:has(.svc-nav-mini[open]) .cta-bar,
  body:has(.svc-nav-lang .dd.open) .cta-bar{ transform:translateY(160%); opacity:0; pointer-events:none; }
  .cta-bar-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.25; }
  .cta-bar-txt b{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cta-bar-txt span{ font-size:12px; color:var(--muted); }
  .cta-bar .btn{ flex:0 0 auto; min-height:46px; padding:12px 18px; font-size:14.5px; }
  body.v2-service{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------- back to top --- */
.to-top{
  position:fixed; z-index:70; width:46px; height:46px; border-radius:50%;
  right:calc(14px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center;
  background:rgba(19,19,22,.72); color:var(--ink); font-size:14px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 24px rgba(0,0,0,.32);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .35s var(--ease-spring), border-color .2s ease, background .2s ease, color .2s ease;
}
body.is-scrolled-far .to-top{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.14); color:var(--green-light); }
.to-top:focus-visible{ outline:2px solid var(--green-light); outline-offset:3px; }
@media (max-width:720px){ body.v2-service .to-top{ bottom:calc(88px + env(safe-area-inset-bottom)); } }

/* ---------------------------------------------- page-to-page transition --
   A short crossfade between V2 pages, from the browser's own view-transition
   support; browsers without it navigate exactly as before. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  @keyframes vtOut{ to{ opacity:0; } }
  @keyframes vtIn{ from{ opacity:0; transform:translateY(8px); } }
  ::view-transition-old(root){ animation:.16s ease both vtOut; }
  ::view-transition-new(root){ animation:.34s var(--ease-out-expo) both vtIn; }
}

/* --------------------------------------------------------- image system --
   Nothing on the site uses photographs yet. This is the frame they will sit
   in, so that the first real image already looks like it belongs: a hairline
   that catches light, a slow zoom on hover, and a caption on a dark fade. */
.media{
  position:relative; margin:0; overflow:hidden; isolation:isolate;
  aspect-ratio:16 / 10; border-radius:var(--r-m);
  background:var(--panel-2); box-shadow:var(--elev-2);
}
.media img,.media video{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease-out-expo), filter .6s ease;
}
.media::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  background:linear-gradient(180deg, transparent 55%, rgba(10,10,12,.35));
}
@media (hover:hover){ .media:hover img,.media:hover video{ transform:scale(1.035); } }
.media-tall{ aspect-ratio:4 / 5; }
.media-wide{ aspect-ratio:21 / 9; }
.media-square{ aspect-ratio:1; }
.media-tint img{ filter:grayscale(1) contrast(1.05) brightness(.85); }
.media-tint::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg, rgba(34,197,94,.34), rgba(10,10,12,.2)); mix-blend-mode:color;
}
.media figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 18px 14px;
  background:linear-gradient(180deg, transparent, rgba(4,6,8,.86));
  font-size:13.5px; line-height:1.5; color:rgba(242,244,247,.8);
}
.avatar-photo{
  width:76px; height:76px; border-radius:50%; object-fit:cover; margin-bottom:var(--s5);
  border:1px solid rgba(120,225,173,.34); box-shadow:0 0 0 6px rgba(34,197,94,.06), var(--elev-2);
}
.logo-row{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 44px; opacity:.72; }
.logo-row img{ height:26px; width:auto; filter:grayscale(1) brightness(1.5); transition:filter .3s ease, opacity .3s ease; }
.logo-row img:hover{ filter:none; }
.art-thumb{ display:block; width:132px; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--line); }
@media (max-width:640px){ .art-thumb{ width:100%; aspect-ratio:16 / 9; } }

/* ------------------------------------------------------ carried-over pages */
@media (max-width:520px){
  .v2-legacy .hero-cta .btn,.v2-legacy .hero-cta .btn-hero{ flex:1 1 100%; }
  .v2-legacy .kpi{ padding:20px 18px; }
  .v2-legacy .trustpill{ font-size:12.5px; padding:8px 12px; }
}


/* ==========================================================================
   BRAND, HOMEPAGE, FOOTER

   The official logo in the header, the four line icons the earlier site
   already had (shield, bank, compass, crown) used as the marks of the service
   areas, a full-width photograph of Switzerland, and a footer that reads as
   the end of a company site rather than a list of links.
   ========================================================================== */

/* -------------------------------------------------------- the logo pill -- */
.svc-nav-pill-brand{ padding:0 18px; }
.svc-nav-logo{
  display:block; height:30px; width:auto;
  filter:drop-shadow(0 0 12px rgba(34,197,94,.32));
  transition:height .25s ease, filter .3s ease;
}
.svc-nav-pill-brand:hover .svc-nav-logo{ filter:drop-shadow(0 0 16px rgba(34,197,94,.55)); }
.svc-nav-scrolled .svc-nav-logo{ height:25px; }
@media (max-width:640px){
  .svc-nav-pill-brand{ padding:0 15px; }
  .svc-nav-logo{ height:26px; }
  .svc-nav-scrolled .svc-nav-logo{ height:23px; }
}
@media (max-width:370px){ .svc-nav-logo{ height:22px; } }

/* --------------------------------------------------------- the index ----- */
/* "what do you need to resolve" as a two-column index: the question stays in
   view while the eight situations scroll past it */
.split-index{ grid-template-columns:4fr 7fr; align-items:start; }
.split-index .prob-list{ border-top:1px solid var(--line); }
@media (max-width:900px){ .split-index{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- service areas --- */
.area-art{
  --ico:none;
  position:relative; display:block; width:88px; height:88px; margin-bottom:var(--s5);
  background:linear-gradient(160deg, #bbf7d0 0%, #4ade80 42%, #16a34a 100%);
  -webkit-mask:var(--ico) center / contain no-repeat;
          mask:var(--ico) center / contain no-repeat;
  filter:drop-shadow(0 0 16px rgba(34,197,94,.45));
  transition:filter .5s var(--ease), transform .6s var(--ease-out-expo);
}
.area-art-lg{ width:112px; height:112px; margin-bottom:var(--s6); }

.area-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.area{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,2.6vw,36px); border-radius:var(--r-m);
  background:var(--surface); border:1px solid transparent; box-shadow:var(--elev-3);
  transition:transform .5s var(--ease-out-expo), box-shadow .5s var(--ease);
}
.area::before{
  content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit; pointer-events:none;
  background:var(--sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.area::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%), var(--spot), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.area:hover::after{ opacity:1; }
@media (hover:hover){
  .area:hover{ transform:translateY(-4px); }
  .area:hover .area-art{ filter:drop-shadow(0 0 26px rgba(34,197,94,.7)); transform:scale(1.05); }
}
.area .t-h3{ margin-bottom:var(--s3); }
.area .t-body{ font-size:15.5px; }
.area-list{ list-style:none; margin:var(--s5) 0 var(--s5); padding:0; width:100%; display:flex; flex-direction:column; }
.area-list a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-top:1px solid var(--line); font-size:15px; font-weight:500; color:rgba(242,244,247,.82);
  transition:color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.area-list li:last-child a{ border-bottom:1px solid var(--line); }
.area-list a::after{
  content:""; width:7px; height:7px; flex:0 0 auto;
  border-right:1.6px solid rgba(255,255,255,.3); border-top:1.6px solid rgba(255,255,255,.3);
  transform:rotate(45deg); transition:transform .25s var(--ease), border-color .2s ease;
}
.area-list a:hover{ color:var(--green-light); padding-left:6px; }
.area-list a:hover::after{ border-color:var(--green-light); transform:rotate(45deg) translate(2px,-2px); }
.area .link-ul{ margin-top:auto; }
@media (max-width:1000px){ .area-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- premium ------ */
.premium-grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,5vw,80px); align-items:center; }
.premium-copy .sec-mark{ margin-bottom:var(--s4); }
.premium-grid .ba{ grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
@media (max-width:1000px){ .premium-grid{ grid-template-columns:1fr; gap:var(--s7); } }
@media (max-width:560px){ .premium-grid .ba{ grid-template-columns:1fr; gap:var(--s6); } }

/* ------------------------------------------------- the Swiss photograph ---
   A full-width band. On a wide screen the words sit on the dark water at the
   right, clear of the two people; on a phone the picture stands alone above
   the words, so nothing is ever set on top of a face. On browsers that support
   scroll-driven animation the photograph drifts slowly against the page. */
.band{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(440px, 50vw, 640px);
  border-block:1px solid var(--line);
}
.band-img{ position:absolute; inset:0; z-index:-2; display:block; }
.band-img img{
  position:absolute; inset:-8% 0; width:100%; height:116%;
  object-fit:cover; object-position:28% 50%;
  filter:saturate(.82) contrast(1.06) brightness(.92);
}
.band-shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.5) 52%, rgba(10,10,12,.9) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 26%, rgba(10,10,12,0) 58%, var(--bg) 100%),
    linear-gradient(135deg, rgba(34,197,94,.1), rgba(34,197,94,0) 45%);
}
.band-copy{ display:flex; justify-content:flex-end; padding-block:clamp(48px,7vw,96px); }
.band-in{ width:min(100%,520px); }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes bandDrift{ from{ transform:translateY(-6%); } to{ transform:translateY(6%); } }
    .band-img img{ animation:bandDrift linear both; animation-timeline:view(); animation-range:cover; }
  }
}
@media (max-width:700px){
  .band{ flex-direction:column; align-items:stretch; min-height:0; }
  .band-img{ position:relative; inset:auto; height:clamp(210px,62vw,300px); z-index:0; }
  .band-img img{ inset:0; height:100%; object-position:22% 50%; animation:none; }
  .band-shade{ display:none; }
  .band::after{
    content:""; position:absolute; left:0; right:0; top:0; height:clamp(210px,62vw,300px); pointer-events:none;
    background:linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 40%, var(--bg) 100%);
  }
  .band-copy{ justify-content:flex-start; padding-block:clamp(28px,8vw,44px); }
}

/* ----------------------------------------------------------- team teaser - */
.home-hero .t-display{ font-size:clamp(38px,4.6vw,64px); line-height:1.08; }
.home-hero-note{ margin-top:18px; max-width:56ch; }
.home-transparency{ display:inline-block; margin-top:12px; }
.home-founder-role{ margin:8px 0 20px; }
.home-team-actions{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.team-teaser{ display:flex; gap:clamp(20px,3vw,32px); align-items:flex-start; }
.team-teaser .avatar{ flex:0 0 auto; margin-bottom:0; }
.founder-portrait,.person-portrait{
  display:block; aspect-ratio:7 / 9; object-fit:cover; object-position:center;
  border:1px solid rgba(120,225,173,.25); border-radius:var(--r-m);
  background:var(--panel); box-shadow:0 16px 48px rgba(0,0,0,.22);
}
.founder-portrait{ width:clamp(140px,15vw,190px); height:auto; flex:0 0 auto; }
.person-portrait{ width:100%; max-width:350px; height:auto; margin-bottom:var(--s5); }
.team-teaser > div{ min-width:0; }
@media (max-width:520px){ .team-teaser{ flex-direction:column; } }
@media (max-width:520px){ .founder-portrait{ width:180px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.v2-foot{ padding-block:clamp(56px,7vw,96px) var(--s6); overflow:hidden; }
.foot-main{
  display:grid; grid-template-columns:minmax(260px,1.15fr) 3fr;
  gap:clamp(36px,6vw,104px); align-items:start;
}
.foot-logo{ display:inline-block; }
.foot-logo img{ display:block; width:clamp(168px,16vw,220px); height:auto; filter:drop-shadow(0 0 22px rgba(34,197,94,.3)); }
.foot-desc{ margin-top:var(--s5); max-width:38ch; font-size:15px; line-height:1.7; color:var(--muted); }
.foot-contact{ margin:var(--s6) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-contact a{ display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:rgba(242,244,247,.84); background:none; }
.foot-contact a:hover{ color:var(--green-light); }
.foot-contact .ico{ width:34px; height:34px; font-size:13px; }
.foot-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
.foot-cols h4{ margin-bottom:var(--s4); }

/* the wordmark, enormous and cut off at the bottom: it fades out as it goes
   down, so it reads as an ending, not as another block of content */
.foot-mark{
  position:relative; height:clamp(110px,20vw,270px); margin-top:clamp(40px,6vw,80px);
  overflow:hidden; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 96%);
}
.foot-mark img{
  display:block; width:100%; height:auto; opacity:.55;
  filter:drop-shadow(0 0 50px rgba(34,197,94,.28));
}
.foot-bottom{
  margin-top:0; padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; align-items:center;
  font-family:var(--num); font-size:11.5px; letter-spacing:.04em; color:var(--faint);
}
.foot-bottom span:first-child{ color:var(--muted); }
@media (max-width:980px){
  .foot-main{ grid-template-columns:1fr; gap:var(--s8); }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s7); }
}
@media (max-width:560px){
  .foot-cols{ gap:var(--s7) var(--s5); }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .foot-mark{ height:clamp(70px,24vw,120px); margin-top:var(--s7); }
}


/* ---- refinements after seeing it on screen -------------------------------- */

/* header logo: the official artwork is dark, thin-stroked green on a dark pill,
   so it gets more size and a touch of light. The "CONSULTING" line is still
   small at any pill height, which is inherent to the stacked logo. */
.svc-nav-logo{
  height:36px;
  filter:brightness(1.24) contrast(1.05) saturate(1.1) drop-shadow(0 0 12px rgba(34,197,94,.34));
}
.svc-nav-pill-brand:hover .svc-nav-logo{ filter:brightness(1.35) contrast(1.05) saturate(1.1) drop-shadow(0 0 18px rgba(34,197,94,.6)); }
.svc-nav-scrolled .svc-nav-logo{ height:29px; }
@media (max-width:640px){
  .svc-nav-logo{ height:31px; }
  .svc-nav-scrolled .svc-nav-logo{ height:26px; }
}
@media (max-width:370px){ .svc-nav-logo{ height:26px; } }

/* the footer's ul reset (".v2-foot ul") outranked the contact list's own
   margin, which glued the contacts to the paragraph above */
.v2-foot .foot-contact{ margin:var(--s6) 0 0; gap:12px; }
.v2-foot .foot-cols ul{ gap:11px; }

/* the giant mark: a shadow on the image was cut off by the box that crops it,
   drawing a visible rectangle. The glow is now a soft gradient behind it that
   fades out before it reaches any edge. */
.foot-mark img{ filter:none; opacity:.62; }
.foot-mark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 95% at 50% 25%, rgba(34,197,94,.16), transparent 72%);
}
.foot-mark img{ position:relative; z-index:1; }

/* ------------------------------------------------ Experience section (home) */
.xp-card{
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  padding:48px; border:1px solid var(--line); border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%, var(--green-wash), transparent 60%), var(--panel);
}
.xp-dot{
  display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 0 var(--green-glow); animation:hero-xp-pulse 2s infinite;
}
.xp-points{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.xp-points li{
  display:flex; gap:16px; align-items:center; padding:16px 18px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel-2);
}
.xp-points .ico{
  flex:0 0 40px; height:40px; display:grid; place-items:center;
  border-radius:10px; background:var(--green-wash); color:var(--green-light);
}
.xp-points b{ display:block; color:var(--ink); font-weight:600; margin-bottom:2px; }
.xp-points li span:last-child{ color:var(--muted); font-size:14px; line-height:1.4; }
@media (max-width:860px){ .xp-card{ grid-template-columns:1fr; gap:32px; padding:28px 20px; border-radius:20px; } }
@media (prefers-reduced-motion:reduce){ .xp-dot{ animation:none; } }
@keyframes hero-xp-pulse{ 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }

/* V2 home art direction: let the signature breathe beside the copy. */
.home-hero .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:32px 50px;}
.home-hero .hero-copy{position:relative;z-index:1;}
.hero-experience{min-width:0;}
.hero-experience-copy{position:relative;z-index:1;}
.hero-experience-copy .sec-mark{margin-bottom:14px;}
.hero-experience-copy h2{margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.035em;}
.hero-experience-copy p{max-width:40ch;margin:12px 0 16px;line-height:1.6;}
.hero-experience-copy .btn{gap:10px;}
.hero-sculpture-space{height:clamp(270px,25vw,330px);position:relative;pointer-events:none;margin-top:12px;}
.home-hero .hero-rail{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:12px 0 0;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.home-hero .hero-rail-item{border:0;padding:0;min-width:0;}
.home-hero .hero-rail-item::before{display:none;}
.home-hero .hero-rail-item dd{font-size:15px;}
.xp-card{position:relative;isolation:isolate;overflow:hidden;}
.xp-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(111,240,178,.09),transparent 70%);}
.xp-card:hover::after{opacity:1;}
.xp-experience{background:radial-gradient(100% 140% at 100% 0%,rgba(74,127,155,.13),transparent 65%),var(--panel);}
.xp-experience .ico{background:rgba(104,184,211,.1);color:#a8d9e7;}
.v2-foot .foot-copy{max-width:100%;}
.v2-foot .foot-copy>span{font-size:13px;line-height:1.6;}
@media(min-width:901px){.home-hero{padding-top:120px;padding-bottom:52px;}.home-hero .t-display{font-size:clamp(40px,4.25vw,62px);}}
@media(max-width:900px){
  .home-hero .hero-grid{grid-template-columns:1fr;gap:28px;}
  .hero-experience{width:100%;max-width:440px;justify-self:center;}
  /* In the stacked mobile/tablet layout the S is only a fixed backdrop,
     not a content block that creates an empty 300px row. */
  .home-hero .hero-sculpture-space{display:none;}
  .home-hero .hero-rail{gap:20px;}
}
@media(max-width:600px){
  .home-hero .hero-rail{grid-template-columns:1fr;gap:18px;}
  .home-hero .hero-rail-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start;}
  .home-hero .hero-rail-item dt{padding-top:3px;}
  .hero-sculpture-space{height:270px;}
  .v2-foot .foot-copy{align-items:flex-start;}
}
@media(prefers-reduced-motion:no-preference){
  .home-motion-ready .home-arrival{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
  .home-motion-ready .home-arrival.home-visible{opacity:1;transform:none;}
  .home-motion-ready .xp-card.home-visible .xp-points li{animation:homePointIn .65s var(--ease) backwards;}
  .home-motion-ready .xp-points li:nth-child(2){animation-delay:.1s;}
  .home-motion-ready .xp-points li:nth-child(3){animation-delay:.2s;}
  .home-motion-ready .xp-points li:nth-child(4){animation-delay:.3s;}
  @keyframes homePointIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
}
@media(prefers-reduced-motion:reduce){
  .home-arrival{opacity:1!important;transform:none!important;}
  .xp-card::after{display:none;}
}

/* ------------------------------------------------- footer: powered-by (as ds) */
.v2-foot .foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.v2-foot .powered-by a{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); transition:color .2s, transform .2s; }
.v2-foot .powered-by a:hover, .v2-foot .powered-by a:focus-visible{ color:var(--ink); transform:translateY(-1px); }
.v2-foot .powered-by-icon{ display:block; width:28px; height:28px; object-fit:cover; border-radius:50%; animation:ssc-glow 2.4s ease-in-out infinite; }
.v2-foot .powered-by-copy strong{ color:var(--ink); font-weight:750; }
@keyframes ssc-glow{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(255,190,42,.45)); transform:scale(1); } 50%{ filter:drop-shadow(0 0 10px rgba(255,190,42,.95)); transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .v2-foot .powered-by-icon{ animation:none; } }

/* ------------------------------------------- footer S icon + job cards (v2) */
.v2-foot .foot-copy{ display:inline-flex; align-items:center; gap:10px; }
.v2-foot .foot-copy-icon{ display:block; width:28px; height:28px; border-radius:50%; object-fit:cover; }

.job-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.job{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:32px 28px 28px;
  border:1px solid var(--line); border-radius:22px; text-decoration:none; color:var(--ink);
  background:radial-gradient(120% 90% at 0% 0%, var(--green-wash), transparent 60%), var(--panel);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.job:hover, .job:focus-visible{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 18px 40px -18px var(--green-glow); }
.job-ico{
  width:56px; height:56px; display:grid; place-items:center; font-size:22px;
  border-radius:16px; color:var(--green-light); background:var(--green-wash);
  border:1px solid rgba(34,197,94,.28);
}
.job-ico-lg{ width:68px; height:68px; font-size:28px; margin-bottom:20px; }
.job-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.job-title{ margin:0; font-size:26px; line-height:1.15; font-weight:650; letter-spacing:-.01em; }
.job-sum{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; flex:1; }
.job-go{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; color:var(--green-light); font-weight:600; font-size:14px; }
.job-go i{ transition:transform .25s; }
.job:hover .job-go i{ transform:translateX(4px); }
.job-open{ border-style:dashed; background:transparent; }
@media (max-width:980px){ .job-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .job-grid{ grid-template-columns:1fr; } .job{ padding:26px 22px 22px; } }

/* ------------------------------------ footer bottom: © left, powered-by centred */
.v2-foot .foot-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; }
.v2-foot .foot-bottom .powered-by{ justify-self:center; }
.v2-foot .foot-bottom .powered-by a{ flex-direction:column; gap:8px; text-align:center; }
.v2-foot .foot-bottom .powered-by-icon{ width:40px; height:40px; }
.v2-foot .foot-bottom .powered-by-copy{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:13px; line-height:1.3; }
.v2-foot .foot-bottom .foot-copy{ justify-self:start; }
@media (max-width:720px){
  .v2-foot .foot-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .v2-foot .foot-bottom .foot-copy{ justify-self:center; order:2; }
  .v2-foot .foot-bottom .powered-by{ order:1; }
}

/* footer bottom: Soares Consulting on top, powered-by below, both centred */
.v2-foot .foot-bottom{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; }
.v2-foot .foot-bottom .foot-copy{ order:1; justify-self:auto; }
.v2-foot .foot-bottom .powered-by{ order:2; justify-self:auto; }
/* ------------------------------------------------ consulting hub + native FAQ */
.hub-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hub-list li{ position:relative; padding-left:28px; color:var(--muted); line-height:1.5; }
.hub-list li::before{ content:""; position:absolute; left:0; top:.5em; width:14px; height:8px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg) translateY(-50%); }
.v2-faq details{ border-top:1px solid var(--line); padding:18px 0; }
.v2-faq details:last-child{ border-bottom:1px solid var(--line); }
.v2-faq summary{ cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.v2-faq summary::-webkit-details-marker{ display:none; }
.v2-faq summary::after{ content:"+"; color:var(--green-light); font-size:22px; line-height:1; transition:transform .2s; }
.v2-faq details[open] summary::after{ transform:rotate(45deg); }
.v2-faq details > div{ color:var(--muted); margin-top:12px; line-height:1.7; }