/* Serene Ops. Hand-maintained. There is no build step: edit this file directly. */

/* ============ Fonts, self-hosted ============ */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============ Tokens ============ */
:root{
  --cloud-dancer:#F0EEE9;
  --chalk-blue:#C3D5D1;
  --chalk-band:#B8CFC9;
  --pumice:#CBC0B6;
  --blue-atoll:#00B4D2;
  --blue-atoll-hover:#00A2BD;
  --on-action:#04262C;

  --ink:#4C484F;
  --ink-muted:#656069;
  --ink-deep:#332F38;

  --rule:rgba(203,192,182,.75);

  /* Scheme independent. Dark grounds must never inherit --cloud-dancer. */
  --on-dark:#F0EEE9;
  --on-dark-muted:rgba(240,238,233,.8);
  --on-dark-rule:rgba(240,238,233,.22);
  --dark-ground:#332F38;

  --shell:1220px;
  --shell-narrow:860px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --band-y:clamp(4.75rem,9vw,8.5rem);
  --band-y-air:clamp(5.5rem,9.5vw,8.5rem);
  --band-y-tight:clamp(2.5rem,4vw,3.5rem);
  --t:200ms cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.32,.5,1);
}

/* ============ Reset and base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (max-width:959px){html{scroll-padding-top:84px}}
body{
  margin:0;background:var(--cloud-dancer);color:var(--ink);
  font-family:'Source Sans 3',system-ui,-apple-system,sans-serif;
  font-size:19px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (max-width:699px){body{font-size:18px}}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-weight:400;font-style:normal;letter-spacing:-.015em;line-height:1.12;margin:0;text-wrap:balance;color:var(--ink-deep)}
.band-dark h1,.band-dark h2,.band-dark h3,.ftr h2{color:inherit}
h1{font-size:clamp(2.9rem,7.2vw,5.25rem);line-height:1.02}
h2{font-size:clamp(2.1rem,4.4vw,3.35rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
p{margin:0;max-width:62ch;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--ink);text-decoration-color:var(--pumice);text-underline-offset:3px;transition:color var(--t)}
a:hover{color:var(--ink-deep)}
strong,b{font-weight:600}

:focus-visible{outline:3px solid var(--ink-deep);outline-offset:3px;border-radius:2px}
.band-dark :focus-visible,.ftr :focus-visible{outline-color:var(--on-dark)}

::selection{background:var(--chalk-blue);color:var(--ink-deep)}

/* ============ Utility ============ */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:var(--shell-narrow)}
.band{padding-block:var(--band-y)}
.band--air{padding-block:var(--band-y-air)}
.band--tight{padding-block:var(--band-y-tight)}
/* A surface fades into the page over several rem instead of starting at a hard
   rectangle edge, so it reads as a change in light rather than as a box. */
.band-chalk{--ink-muted:#494550;--rule:rgba(58,55,61,.28);--cfade:clamp(5rem,11vw,10rem);
  background:linear-gradient(to bottom,
    var(--cloud-dancer) 0,
    color-mix(in srgb,var(--chalk-band) 7%,var(--cloud-dancer)) calc(var(--cfade) * .14),
    color-mix(in srgb,var(--chalk-band) 20%,var(--cloud-dancer)) calc(var(--cfade) * .28),
    color-mix(in srgb,var(--chalk-band) 40%,var(--cloud-dancer)) calc(var(--cfade) * .42),
    color-mix(in srgb,var(--chalk-band) 62%,var(--cloud-dancer)) calc(var(--cfade) * .56),
    color-mix(in srgb,var(--chalk-band) 80%,var(--cloud-dancer)) calc(var(--cfade) * .70),
    color-mix(in srgb,var(--chalk-band) 92%,var(--cloud-dancer)) calc(var(--cfade) * .84),
    var(--chalk-band) var(--cfade),
    var(--chalk-band) calc(100% - var(--cfade)),
    color-mix(in srgb,var(--chalk-band) 92%,var(--cloud-dancer)) calc(100% - var(--cfade) * .84),
    color-mix(in srgb,var(--chalk-band) 80%,var(--cloud-dancer)) calc(100% - var(--cfade) * .70),
    color-mix(in srgb,var(--chalk-band) 62%,var(--cloud-dancer)) calc(100% - var(--cfade) * .56),
    color-mix(in srgb,var(--chalk-band) 40%,var(--cloud-dancer)) calc(100% - var(--cfade) * .42),
    color-mix(in srgb,var(--chalk-band) 20%,var(--cloud-dancer)) calc(100% - var(--cfade) * .28),
    color-mix(in srgb,var(--chalk-band) 7%,var(--cloud-dancer)) calc(100% - var(--cfade) * .14),
    var(--cloud-dancer) 100%)}
/* Flat ink. Two dark blocks in a row therefore read as one continuous field:
   the old per-section radial exposed the seam where one ended and the next began. */
.band-dark{position:relative;color:var(--on-dark);
  --ink:var(--on-dark);--ink-muted:var(--on-dark-muted);--rule:var(--on-dark-rule);
  background:var(--dark-ground)}
.eyebrow{display:flex;align-items:center;gap:.62rem;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-muted);margin:0}
/* Marker lifted from the two counter-facing triangles inside the Serene mark. */
.eyebrow::before{content:"";flex:0 0 auto;width:0;height:0;
  border-left:6px solid var(--blue-atoll);
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.band-dark .eyebrow::before{border-left-color:var(--blue-atoll)}
@media (max-width:699px){.eyebrow,.metabar dt{font-size:.8rem;letter-spacing:.14em}}
.lede{font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.6;color:inherit}
.muted{color:var(--ink-muted)}
.small{font-size:.92rem;line-height:1.6}
.num{font-family:'Source Serif 4',Georgia,serif;font-size:.95rem;letter-spacing:.08em;color:var(--ink-muted)}
.stack{display:flex;flex-direction:column}
.hr{border:0;border-top:1px solid var(--rule);margin:0}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-deep);color:var(--on-dark);padding:.85rem 1.4rem;border-radius:2px;font-weight:600}
.skip:focus{left:var(--gutter);top:.6rem}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:inherit;font-size:.98rem;font-weight:600;line-height:1.2;letter-spacing:.01em;
  padding:1rem 1.75rem;border-radius:1px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;min-height:48px;
  transition:background-color var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
.btn .ar{transition:transform var(--t)}
.btn:hover .ar{transform:translateX(3px)}
.btn--primary{background:var(--blue-atoll);color:var(--on-action);border-color:var(--blue-atoll)}
.btn--primary:hover{background:var(--blue-atoll-hover);border-color:var(--blue-atoll-hover);color:var(--on-action)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-muted)}
.btn--ghost{border-color:var(--rule)}
.btn--ghost:hover{background:transparent;color:var(--ink-deep);border-color:var(--ink-deep);
  box-shadow:inset 0 0 0 1px var(--ink-deep)}
.band-dark .btn--ghost,.ftr .btn--ghost{color:var(--on-dark);border-color:var(--on-dark-rule)}
.band-dark .btn--ghost:hover,.ftr .btn--ghost:hover{background:transparent;color:#fff;
  border-color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
@media (max-width:479px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

.arrowlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.98rem;
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;width:fit-content}
@media (max-width:899px),(hover:none),(pointer:coarse){
  .arrowlink{min-height:44px;padding-bottom:0;align-items:center}
}
.arrowlink .ar{transition:transform var(--t)}
.arrowlink:hover .ar{transform:translateX(2px)}

/* ============ Header ============ */
.hdr{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--t),border-color var(--t),backdrop-filter var(--t)}
.hdr.is-stuck{background:color-mix(in srgb,var(--cloud-dancer) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:76px;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
/* The mark is the identity, not an animation asset. It is complete and
   stationary from the first paint: no reveal, no transform, no hover effect. */
.brand__mark{position:relative;width:27px;height:50px;flex:0 0 auto}
.brand__mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.brand__name{font-size:.84rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  transition:color var(--t)}
.brand:hover .brand__name{color:var(--ink-deep)}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.9rem}
.nav a{position:relative;color:var(--ink);text-decoration:none;font-size:.97rem;transition:color var(--t);display:inline-flex;align-items:center;min-height:44px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;
  background:var(--ink-deep);transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms cubic-bezier(.4,0,.15,1)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a:hover{color:var(--ink-deep)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--pumice);text-underline-offset:5px}
.hdr .btn--primary,.nav .btn--primary{color:var(--on-action)}
.nav .btn{padding:.7rem 1.35rem;font-size:.95rem;min-height:44px}

.navtoggle{display:none;align-items:center;justify-content:center;gap:.5rem;
  margin-left:auto;background:transparent;border:1px solid var(--ink-muted);color:var(--ink);
  border-radius:2px;font-family:inherit;font-size:.95rem;font-weight:600;
  padding:.7rem 1.15rem;min-height:44px;cursor:pointer;transition:background-color var(--t),color var(--t)}
.navtoggle:hover{background:var(--ink);color:var(--cloud-dancer)}
.mobilenav{display:none}

@media (max-width:959px){
  .nav{display:none}
  .navtoggle{display:inline-flex}
  .hdr__cta{margin-left:auto}
  .navtoggle{margin-left:.6rem}
  .hdr__in{min-height:68px;gap:.6rem}
  .hdr__cta .btn{padding:.7rem 1.15rem;font-size:.95rem;min-height:44px}
  .mobilenav{display:block;position:fixed;inset:68px 0 0;background:var(--cloud-dancer);
    z-index:99;overflow-y:auto;padding:1rem var(--gutter) 3rem;
    visibility:hidden;opacity:0;transition:opacity var(--t),visibility var(--t)}
  .mobilenav.is-open{visibility:visible;opacity:1}
  .mobilenav a{display:block;text-decoration:none;color:var(--ink);font-size:1.22rem;
    font-family:'Source Serif 4',Georgia,serif;padding:1.05rem 0;border-top:1px solid var(--rule);min-height:48px}
  .mobilenav .btn{margin-top:1.75rem;width:100%}
  body.nav-open{overflow:hidden}
}

/* Below ~334px the mark, the wordmark, the Book a call button and Menu cannot all fit
   on one line, and the header pushed the page sideways. Drop the wordmark only: the mark
   still links home and the dominant CTA stays visible. */
@media (max-width:359px){
  .brand__name{display:none}
}
@media (min-width:960px){.mobilenav{display:none !important}.hdr__cta{display:none}}

/* JS off: the toggle is useless, so show the links inline and drop the button. */
.no-js .navtoggle{display:none}
@media (max-width:959px){
  .no-js .nav{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-left:0;width:100%;padding-bottom:.85rem}
  .no-js .hdr__in{flex-wrap:wrap;min-height:0;padding-top:.85rem}
  .no-js .nav .btn{display:none}
}

/* ============ Hero ============ */
.hero{position:relative;padding-block:clamp(3.5rem,8vw,7rem) clamp(4rem,9vw,8rem);overflow:clip}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__copy{position:relative;z-index:2}
.hero h1{letter-spacing:-.032em}
.hero h1 .calm{display:block;color:var(--ink-muted)}
.hero__lede{margin-top:clamp(1.5rem,3vw,2.25rem);text-wrap:balance}
.hero__body{margin-top:1.1rem;max-width:46ch}
.hero__take{margin-top:1.1rem;max-width:46ch;color:var(--ink-muted)}
.hero .btn-row{margin-top:clamp(2rem,4vw,2.75rem)}
.hero__model{position:relative;margin:0;max-width:none;flex:0 1 auto;
  display:flex;flex-direction:column;padding-left:1.5rem}
.hero__model::before{content:"";position:absolute;left:0;top:.6em;width:0;height:0;
  border-left:9px solid var(--blue-atoll);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.hero__model span{font-family:'Source Serif 4',Georgia,serif;font-weight:400;white-space:nowrap;
  font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.14;letter-spacing:-.018em;color:var(--ink-deep)}
.hero__model .hero__model-b{color:var(--ink-muted)}
.hero__note{margin-top:1.25rem;font-size:.92rem;color:var(--ink-muted)}

@media (max-width:899px){
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero{padding-block:clamp(2.5rem,7vw,4rem) clamp(3rem,8vw,5rem)}
}

/* ============ The pain list ============ */
.pain{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.pain{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start}}
.painlist{margin-top:.5rem}
.painlist li{border-top:1px solid var(--rule);padding:.85rem 0;font-size:1.2rem;line-height:1.45;max-width:46ch}
.painlist li:last-child{border-bottom:1px solid var(--rule)}
.paincore{margin-top:2.25rem;font-size:1.2rem;line-height:1.5;font-weight:600;max-width:44ch}

/* ============ Service index. Editorial rows, not cards. ============ */
.svcgrid{display:block;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.svc{position:relative;display:grid;align-items:baseline;text-decoration:none;color:inherit;
  grid-template-columns:clamp(2.9rem,4.4vw,4.4rem) minmax(0,1fr);
  column-gap:clamp(1.1rem,2.6vw,2.5rem);row-gap:.5rem;
  padding:clamp(1.5rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--rule)}
@media (min-width:900px){
  .svc{grid-template-columns:clamp(2.9rem,4.4vw,4.4rem) minmax(0,.95fr) minmax(0,1.05fr) auto}
}
/* .svc__head collapses so numeral, name, one-liner and link sit on one grid row. */
.svc__head{display:contents}
.svc .num{font-size:clamp(1.02rem,1.4vw,1.25rem);letter-spacing:.07em;
  font-variant-numeric:tabular-nums;transition:color 260ms var(--ease)}
.svc__name{margin:0;font-size:clamp(1.42rem,2.3vw,1.95rem);line-height:1.13;
  transition:transform 380ms var(--ease-out)}
.svc__one{display:block;color:var(--ink-muted);max-width:44ch;font-size:1rem;line-height:1.55}
.svc .arrowlink{border-bottom:0;padding:0;white-space:nowrap;font-size:.88rem;
  color:var(--ink-muted);transition:color 260ms var(--ease)}
/* The mark is one unbroken line, so the hover cue is a line extending, not a
   rectangle filling. Nothing about the row's own box is ever revealed. */
.svc{transition:transform 320ms var(--ease-out),border-bottom-color 260ms var(--ease)}
.svc:hover,.svc:focus-visible{transform:translateY(-4px)}
.svc:has(+ .svc:hover),.svc:has(+ .svc:focus-visible){border-bottom-color:var(--blue-atoll)}
.svcgrid{transition:border-top-color 260ms var(--ease)}
.svcgrid:has(> .svc:first-child:hover),.svcgrid:has(> .svc:first-child:focus-visible){border-top-color:var(--blue-atoll)}
.svclist .svcrow{transition:transform 320ms var(--ease-out),border-bottom-color 260ms var(--ease)}
.svclist .svcrow:hover{transform:translateY(-4px)}
.svclist .svcrow:has(+ .svcrow:hover){border-bottom-color:var(--blue-atoll)}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue-atoll);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 520ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .svc:hover::after{transform:scaleX(1)}
  .svc:hover .svc__name{transform:translateX(6px)}
  .svc:hover .num,.svc:hover .arrowlink{color:var(--ink-deep)}
  .svc:hover .ar{transform:translateX(3px)}
}
.svc:focus-visible{outline-offset:5px}
@media (max-width:899px){
  .svc__one{grid-column:2}
  .svc .arrowlink{display:none}
}
@media (max-width:479px){
  .svc{grid-template-columns:2.5rem minmax(0,1fr);column-gap:.85rem;padding:1.25rem 0}
  .svc__name{font-size:1.28rem}
  .svc__one{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .svc:hover .svc__name,.svc:hover,.trust>div:hover,.step:hover{transform:none}
  .svc::after{display:none}
}

/* ============ Two-column argument blocks ============ */
.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:900px){.cols2{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
/* The heading column is narrower than the page, so the heading is set smaller
   than a full-width h2. Without this the line boxes fall to a few words each. */
.cols2 h2{font-size:clamp(1.85rem,2.9vw,2.55rem);letter-spacing:-.02em}
.cols2--even{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cols2--even{grid-template-columns:1fr 1fr}}

.deflist{border-top:1px solid var(--rule)}
.deflist>*{border-bottom:1px solid var(--rule);padding:1.15rem 0}
.deflist dt,.deflist .dt{font-family:'Source Serif 4',Georgia,serif;font-size:1.18rem;line-height:1.3}
.deflist dd,.deflist .dd{margin:.3rem 0 0;color:var(--ink-muted);max-width:52ch}

.numlist{border-top:1px solid var(--rule)}
.numlist li{display:grid;grid-template-columns:2.75rem 1fr;gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:1rem 0}
.numlist .nm{font-family:'Source Serif 4',Georgia,serif;font-size:1.15rem}
.numlist .one{color:var(--ink-muted);font-size:.97rem;display:block;margin-top:.15rem}
.numlist a{text-decoration:none}
.numlist a:hover .nm{text-decoration:underline;text-decoration-color:var(--pumice);text-underline-offset:4px}

/* ============ Brand moment ============ */
.moment{padding-block:clamp(7rem,15vw,14rem);text-align:center;
  background:radial-gradient(70% 55% at 50% 46%,color-mix(in srgb,var(--chalk-blue) 34%,transparent),transparent 72%)}
.moment h2{font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.04}
.moment p{margin:3rem auto 0;max-width:46ch;color:var(--ink-muted)}

/* ============ Steps ============ */
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:700px){.steps{grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,3vw,2.5rem)}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
/* Three-item variant: never leave a single orphan on the second row. */
.steps--3{grid-template-columns:1fr}
@media (min-width:820px){.steps--3{grid-template-columns:repeat(3,1fr)}}
.step{border-top:1px solid var(--rule);padding:1.4rem 0 1.8rem;
  transition:border-top-color 260ms var(--ease),transform 320ms var(--ease-out)}
.step:hover{border-top-color:var(--blue-atoll);transform:translateY(-4px)}
.step .num{display:block;margin-bottom:.6rem}
.step h2,.step h3{font-size:1.28rem;margin-bottom:.4rem}
.h2--sm{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.step p{color:var(--ink-muted);font-size:.99rem}

/* ============ Picker ============ */
.picker{margin-top:clamp(2rem,4vw,3rem);max-width:920px}
.picker__grid{display:grid;grid-template-columns:1fr;gap:.7rem;margin-bottom:1.9rem}
@media (min-width:620px){.picker__grid{grid-template-columns:1fr 1fr}}
.pick{display:flex;align-items:center;gap:.9rem;border:1px solid var(--rule);border-radius:1px;
  padding:.95rem 1.15rem;min-height:56px;cursor:pointer;background:transparent;
  transition:background-color var(--t),border-color var(--t)}
.pick input{width:20px;height:20px;accent-color:#00B4D2;flex:0 0 auto;margin:0;cursor:pointer}
.pick:hover{border-color:var(--ink-muted)}
.pick:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--chalk-blue) 56%,transparent)}
.pick:has(input:focus-visible){outline:3px solid var(--ink-deep);outline-offset:3px}
.picker__out{margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.75rem}
.picker__out[hidden]{display:none}
.picker__rows{border-top:1px solid var(--rule);margin:1.2rem 0 0}
.picker__rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--rule);padding:.85rem 0}
.picker__rows a{text-decoration:none;display:flex;gap:.9rem;align-items:baseline}
.picker__rows a:hover .pn{text-decoration:underline;text-decoration-color:var(--pumice);text-underline-offset:4px}
.picker__rows .pn{font-family:'Source Serif 4',Georgia,serif;font-size:1.1rem}
.picker__note{margin-top:1rem;color:var(--ink-muted);font-size:.97rem}

/* ============ Comparison table ============ */
.tablewrap{margin-top:clamp(2.5rem,5vw,3.5rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:620px;border-collapse:collapse;text-align:left}
table.cmp caption{text-align:left;color:var(--ink-muted);font-size:.92rem;padding-bottom:1rem}
table.cmp th,table.cmp td{border-bottom:1px solid var(--rule);padding:.95rem 1.1rem .95rem 0;font-weight:400;font-size:1rem}
table.cmp thead th{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-muted);
  border-bottom:1px solid var(--ink-muted);padding-bottom:.75rem}
table.cmp th[scope="row"]{color:var(--ink-muted);padding-right:2rem}
table.cmp .col-serene{font-weight:600;color:var(--ink)}

@media (max-width:1039px){
  .tablewrap{overflow:visible}
  table.cmp{min-width:0;display:block}
  table.cmp caption{display:block}
  table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.cmp tbody,table.cmp tr{display:block}
  table.cmp tr{border-top:1px solid var(--rule);padding:1.1rem 0}
  table.cmp tr:last-child{border-bottom:1px solid var(--rule)}
  table.cmp th[scope="row"]{display:block;border:0;padding:0 0 .7rem;
    font-family:'Source Serif 4',Georgia,serif;font-size:1.18rem;line-height:1.3;color:var(--ink-deep)}
  table.cmp td{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
    border:0;padding:.3rem 0;font-size:1rem}
  table.cmp td::before{content:attr(data-label);font-size:.8rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;color:var(--ink-muted)}
  table.cmp td.col-serene{margin-top:.35rem;padding-top:.55rem;border-top:1px solid var(--rule)}
}

.stats{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(3rem,6vw,4.5rem)}
@media (min-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem)}}
@media (min-width:1100px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:1px solid var(--rule);padding:1.5rem 0}
.stat .fig{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(2.2rem,4vw,3rem);line-height:1.05;display:block}
.stat .lb{margin-top:.7rem;max-width:30ch}
.stat .src{margin-top:.7rem;font-size:.85rem;color:var(--ink-muted)}

/* ============ Reviews ============ */
.reviews__head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
.carousel{margin-top:clamp(2.5rem,5vw,3.5rem)}
.carousel__view{overflow:hidden}
.carousel__track{display:flex;transition:transform 420ms cubic-bezier(.4,0,.15,1)}
.carousel__track.no-anim{transition:none}
.rev{flex:0 0 100%;padding-right:clamp(1.5rem,3vw,2.5rem);min-width:0}
@media (min-width:760px){.rev{flex-basis:50%}}
@media (min-width:1100px){.rev{flex-basis:33.3333%}}
.rev figure{margin:0;height:100%;display:flex;flex-direction:column}
.rev blockquote{margin:0;font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.4;letter-spacing:-.012em;
  color:var(--ink-deep);text-wrap:pretty}
.rev figcaption{margin-top:auto;padding-top:1.5rem;color:var(--ink-muted);
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.5}
.rev .stars{display:block;color:var(--pumice);letter-spacing:.26em;font-size:.75rem;margin-bottom:.6rem}
.carousel__bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.25rem;
  border-top:1px solid var(--rule);padding-top:1.35rem}
.cbtn{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--ink-muted);color:var(--ink);border-radius:2px;
  cursor:pointer;font-family:inherit;font-size:1rem;transition:background-color var(--t),color var(--t)}
.cbtn:hover{background:var(--ink);color:var(--cloud-dancer)}
.cbtn--play{width:auto;padding-inline:1.1rem;gap:.5rem;font-weight:600;font-size:.92rem}
.dots{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:auto}
.carousel__pos{display:none;margin-left:auto;font-size:.95rem;color:var(--ink-muted);font-variant-numeric:tabular-nums}
@media (max-width:759px){.dots{display:none}.carousel__pos{display:block}}
.dot{width:24px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--pumice);transition:background-color var(--t)}
.dot[aria-current="true"]::after{background:var(--ink)}
.dot:hover::after{background:var(--ink-muted)}
.reviews__count{margin-top:clamp(2.5rem,5vw,3.5rem);font-family:'Source Serif 4',Georgia,serif;font-size:1.5rem}
.nojs-reviews{margin-top:2.5rem;display:grid;gap:1.75rem}
@media (min-width:760px){.nojs-reviews{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.nojs-reviews{grid-template-columns:repeat(3,1fr)}}

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

/* ============ FAQ ============ */
.faq{max-width:780px;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  cursor:pointer;list-style:none;padding:1.3rem 0;min-height:48px;
  font-family:'Source Serif 4',Georgia,serif;font-size:1.2rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:0 0 auto;width:14px;height:14px;margin-top:.45rem;
  border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);
  transform:rotate(45deg);transition:transform var(--t)}
.faq details[open] summary .chev{transform:rotate(-135deg)}
.faq .ans{padding:0 0 1.5rem;display:grid;gap:1rem}
.faq details[open] .ans{animation:ansIn 300ms var(--ease-out) both}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color 200ms var(--ease)}
.faq summary:hover{color:var(--ink-deep)}
.faq .ans p{color:var(--ink-muted);max-width:60ch}

/* ============ Service page bits ============ */
.crumb{font-size:.9rem;color:var(--ink-muted);padding-top:clamp(2rem,4vw,3rem)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumb a{text-decoration:none;color:var(--ink-muted)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--pumice)}
.pagehead{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.pagehead h1{font-size:clamp(2.5rem,6vw,4.4rem)}
.pagehead .lede{margin-top:clamp(1.25rem,2.5vw,1.75rem);max-width:44ch}
/* The flagship gets the largest setting on the site, and one statement carried
   on a single hairline instead of inside a bordered box. */
.pagehead--flag h1{font-size:clamp(2.9rem,7.4vw,5.6rem);letter-spacing:-.034em}
.pagehead--flag{padding-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.flagline{border-top:1px solid var(--rule);padding-top:clamp(1.75rem,3.5vw,2.75rem);
  max-width:26ch;font-family:'Source Serif 4',Georgia,serif;color:var(--ink-deep);
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.16;letter-spacing:-.022em}

.metabar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:clamp(1.75rem,6vw,5rem);padding:1.5rem 0;margin:0}
.metabar>div{min-width:0;flex:0 0 auto}
@media (min-width:600px){.metabar dd{white-space:nowrap}}
.metabar dt{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-muted)}
.metabar dd{margin:.4rem 0 0;font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.2}

.tasklist{display:grid;grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule)}
@media (min-width:800px){.tasklist{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}
.tasklist li{display:grid;grid-template-columns:1.5rem 1fr;gap:.5rem;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:.9rem 0;font-size:1.02rem;line-height:1.5}
.tasklist li .dash{display:block;width:11px;height:1px;background:var(--ink-muted);transform:translateY(-.55em)}
.callout{border-left:2px solid var(--blue-atoll);padding:.35rem 0 .35rem 1.6rem;margin-top:clamp(2rem,4vw,3rem);max-width:58ch}

/* ============ Forms ============ */
.formgrid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:700px){.formgrid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-weight:600;font-size:.97rem}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1.05rem;color:var(--ink);
  background:rgba(255,255,255,.55);border:1px solid var(--rule);border-radius:2px;
  padding:.9rem 1rem;width:100%;min-height:52px;
  transition:border-color var(--t),background-color var(--t)}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-atoll);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ink-deep);outline-offset:3px}
.field .hint{font-size:.9rem;color:var(--ink-muted)}
.req{color:var(--ink-muted);font-weight:400}
.consent{grid-column:1/-1;border:1px solid var(--rule);border-radius:2px;padding:1.25rem 1.4rem;
  display:grid;grid-template-columns:20px 1fr;gap:.9rem;align-items:start}
.consent input{width:20px;height:20px;accent-color:#00B4D2;margin:.32rem 0 0}
@media (max-width:899px),(hover:none),(pointer:coarse){
  .consent{grid-template-columns:26px 1fr}
  .consent input{width:26px;height:26px;margin:.15rem 0 0}
  .pick input{width:24px;height:24px}
}
.consent label{font-size:.95rem;line-height:1.6;color:var(--ink)}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{grid-column:1/-1;min-height:0}
.formstatus:not(:empty){border-left:2px solid var(--blue-atoll);padding:.35rem 0 .35rem 1.4rem;font-size:.97rem}

/* ============ Footer ============ */
.ftr{color:var(--on-dark);padding-block:clamp(4rem,8vw,6.5rem) 0;
  background:var(--dark-ground)}
/* When the closing band is already dark, it and the footer share one
   uninterrupted field, so no seam appears where one ends and the other starts. */
main:has(> section.band-dark:last-child) + .ftr{padding-block-start:clamp(2.25rem,4vw,3.25rem)}
.ftr a{color:var(--on-dark);text-decoration:none;transition:color var(--t)}
.ftr a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--on-dark-rule);text-underline-offset:4px}
.ftr__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,3rem)}
@media (min-width:700px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ftr h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--on-dark-muted);font-family:'Source Sans 3',sans-serif;margin-bottom:1.15rem}
.ftr li{display:flex}
.ftr li a{padding:.6rem 0;display:inline-flex;align-items:center;min-height:44px}
.ftr__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.ftr__brand img{width:20px;height:37px;object-fit:contain}
.ftr__brand span{font-size:.82rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.ftr__line{color:var(--on-dark-muted);max-width:34ch;font-size:.99rem}
.ftr__bottom{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--on-dark-rule);
  padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  color:var(--on-dark-muted);font-size:.9rem}

/* ============ Prose (privacy) ============ */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:clamp(2.75rem,5vw,3.75rem)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin-top:2rem}
.prose p,.prose li{color:var(--ink);max-width:70ch}
.prose p+p{margin-top:1.1rem}
.prose h2+p,.prose h3+p{margin-top:1rem}
.prose ul{margin-top:1rem;display:grid;gap:.6rem}
.prose ul li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem}
.prose ul li::before{content:"";width:5px;height:1px;background:var(--ink-muted);margin-top:.85rem}
.prose em{font-style:italic}
.prose .placeholder{background:color-mix(in srgb,var(--blue-atoll) 22%,transparent);
  padding:.05em .35em;border-radius:2px;font-weight:600}

/* The hero desk loop was replaced in Phase 5C.2 by the operations constellation
   (.field). Its markup and CSS are gone; the scene styles live at the end of
   this file under "Operational scenes". */

/* ============ Header logo ============ */
/* No reveal, no wipe, no delayed appearance, in any motion preference. Both
   layers are opaque from the first paint and never masked or transformed. */
.brand__mark img{opacity:1;animation:none;transform:none;-webkit-mask-image:none;mask-image:none}

/* ============ Calendly ============ */
.calwrap{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--rule);padding-top:clamp(1.5rem,3vw,2.5rem)}
.calendly-inline-widget{min-width:320px}

/* ============ Atmosphere ============ */
/* ONE environmental layer for the whole document, fixed to the viewport and
   painted over everything below the header. Because it is never a child of a
   card, a band or a grid, no component's rectangle can clip it: the light
   passes across section edges without seam or flash.
   Driven by --gx/--gy in viewport pixels, so the script never measures layout.
   With no fine pointer, or under reduced motion, it simply stays where it is:
   a static ambient wash rather than something chasing a cursor. */
/* Phase 5C.3 widened this substantially. Before: a 34vmax core at .72 alpha,
   with the blue body ending at 62-68% of its own radius. That put an
   identifiable edge roughly one section away from the pointer, and at that
   alpha a paragraph under the core picked up a visible halo.

   Now: a small restrained core (26vmax, .26 alpha), inside a very broad body
   (78vmax), inside an almost imperceptible outer field (130vmax). Every stop
   runs to 0 at 100% instead of being cut short, so the falloff has no
   detectable end. Peak alpha is down by two thirds.

   The brightest point is also pulled off the pointer: --ax/--ay ease 20% of the
   way back toward the middle of the viewport, so the core never sits on the
   word under the cursor. */
body::before,body::after{
  content:"";position:fixed;inset:0;pointer-events:none;
  --ax:calc(var(--gx,50vw) * .8 + 10vw);
  --ay:calc(var(--gy,30vh) * .8 + 10vh);
}
body::after{
  z-index:90;mix-blend-mode:soft-light;
  background:
    radial-gradient(26vmax 26vmax at var(--ax) var(--ay),
      rgba(255,255,255,.26),rgba(255,255,255,0) 100%),
    radial-gradient(78vmax 66vmax at var(--ax) var(--ay),
      rgba(0,180,210,.15),rgba(0,180,210,.05) 52%,rgba(0,180,210,0) 100%),
    radial-gradient(130vmax 106vmax at calc(var(--ax) * .6 + 22vw) 88vh,
      rgba(195,213,209,.16),rgba(195,213,209,.04) 58%,rgba(195,213,209,0) 100%);
}
/* The same room, in a blend mode that survives a dark ground. soft-light barely
   registers on --dark-ground, so without this the lighting would appear to stop
   at the Serene Complete band: not a rectangle exactly, but a section that had
   opted out of the environment. screen at this alpha is almost inert on
   cloud-dancer (a near-white base is already saturated) and lifts the dark
   bands by a few percent, so the change happens across the boundary rather
   than at it. Still one fixed layer, still never a child of a component. */
body::before{
  z-index:89;mix-blend-mode:screen;
  background:
    radial-gradient(62vmax 54vmax at var(--ax) var(--ay),
      rgba(0,180,210,.075),rgba(0,180,210,0) 100%),
    radial-gradient(116vmax 96vmax at var(--ax) var(--ay),
      rgba(240,238,233,.05),rgba(240,238,233,0) 100%);
}
@media (hover:none),(pointer:coarse){body::before,body::after{--gx:50vw;--gy:14vh}}
@media print{body::before,body::after{display:none}}

/* ============ Stats ============ */
.stat{transition:border-color 300ms var(--ease)}
.stat:hover{border-color:var(--ink-muted)}

/* ============ Hover response ============ */
/* Movement is reserved for rows you can actually click. Static lists respond
   with a hairline and a firming of the text, nothing that shifts position. */
.numlist li,.tasklist li,.picker__rows li,.painlist li,.deflist>*{
  transition:transform 320ms var(--ease-out),border-color 300ms var(--ease),color 220ms var(--ease)}

@media (hover:hover) and (pointer:fine){
  .numlist li:hover{transform:translateX(5px)}
  .numlist li:hover .nm{color:var(--ink-deep)}
  .band-dark .numlist li:hover .nm{color:#fff}
  .picker__rows li:hover{transform:translateX(5px)}
  .tasklist li:hover{color:var(--ink-deep)}
  .tasklist li:hover .dash{background:var(--blue-atoll);width:20px}
  .tasklist li .dash{transition:width 300ms var(--ease-out),background-color 260ms var(--ease)}
  .painlist li:hover{color:var(--ink-deep);border-top-color:var(--ink-muted)}
  .deflist>*:hover dt,.deflist>*:hover .dt{color:var(--ink-deep)}
  .deflist>*:hover dd,.deflist>*:hover .dd{color:var(--ink)}
  .band-dark .deflist>*:hover dd{color:var(--on-dark)}
  .step:hover{border-top-color:var(--ink-muted)}
  .step:hover h2,.step:hover h3{color:var(--ink-deep)}
  .band-dark .step:hover{border-top-color:var(--on-dark-muted)}
  .band-dark .step:hover h2,.band-dark .step:hover h3{color:#fff}
  table.cmp tbody tr{transition:background-color 240ms var(--ease)}
  table.cmp tbody tr:hover th[scope="row"]{color:var(--ink-deep)}
  .prose a{transition:color 200ms var(--ease),text-decoration-color 200ms var(--ease)}
  .prose a:hover{text-decoration-color:var(--blue-atoll)}
}
@media (prefers-reduced-motion:reduce){
  .numlist li,.tasklist li,.picker__rows li,.painlist li,.deflist>*{transform:none !important}
}


/* ============ Services dropdown (CSS only, works without JS) ============ */
.nav__grp{position:relative;display:flex;align-items:center}
.nav__grp>a{display:inline-flex;align-items:center;gap:.45rem}
.caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t)}
.nav__grp:hover .caret,.nav__grp:focus-within .caret{transform:rotate(-135deg) translateY(1px)}
.menu{position:absolute;top:calc(100% - 8px);left:-1rem;min-width:330px;
  background:var(--cloud-dancer);border:1px solid var(--rule);border-radius:2px;padding:.5rem;
  box-shadow:0 22px 44px -26px rgba(51,47,56,.55);display:grid;gap:.05rem;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 170ms var(--ease),transform 220ms var(--ease-out),visibility 170ms}
.nav__grp:hover .menu,.nav__grp:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:grid;grid-template-columns:2.2rem 1fr;align-items:baseline;gap:.55rem;
  padding:.6rem .85rem;min-height:44px;font-size:.97rem;text-decoration:none;border-radius:2px;
  transition:background-color var(--t)}
.nav .menu a::after{content:none}
.menu a:hover{background:color-mix(in srgb,var(--chalk-blue) 46%,transparent)}
.menu a.menu__all{display:flex;align-items:center;gap:.45em;white-space:nowrap;
  border-top:1px solid var(--rule);margin-top:.4rem;padding-top:.9rem;font-weight:600}

/* Mobile menu: services listed under a heading */
@media (max-width:959px){
  .mobilenav .mobnav__h{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
    color:var(--ink-muted);font-family:'Source Sans 3',sans-serif;margin:1.6rem 0 .2rem}
  .mobilenav .sub a{font-size:1.06rem;padding:.85rem 0}
  .mobilenav .sub .num{margin-right:.7rem}
}

/* ============ Trust strip ============ */
.trust{display:grid;grid-template-columns:1fr;gap:0 clamp(1.5rem,3vw,2.75rem);margin-top:0}
@media (min-width:600px){.trust{grid-template-columns:repeat(6,1fr)}.trust>div{grid-column:span 3}}
@media (min-width:820px){.trust>div{grid-column:span 2}.trust>div:nth-child(4),.trust>div:nth-child(5){grid-column:span 3}}
@media (min-width:1040px){.trust{grid-template-columns:repeat(5,1fr)}.trust>div,.trust>div:nth-child(4),.trust>div:nth-child(5){grid-column:auto}}
.trust>div{border-top:1px solid var(--rule);padding:1.25rem 0 1.5rem;
  transition:border-top-color 260ms var(--ease),transform 320ms var(--ease-out)}
.trust>div:hover{border-top-color:var(--blue-atoll);transform:translateY(-4px)}
.trust .num{display:block;margin-bottom:.65rem}
.trust h3,.trust .trust__h{display:block;font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.015em;color:var(--ink-deep);font-size:1.08rem;line-height:1.25}
.trust p{margin-top:.4rem;color:var(--ink-muted);font-size:.93rem;line-height:1.5;max-width:30ch}

/* ============ Flagship panel ============ */
.flag{position:relative;border:0;border-radius:0;background:transparent;padding:0;
  margin-top:clamp(2.25rem,4.5vw,3.25rem);display:grid;gap:clamp(2.25rem,4vw,3.25rem)}
@media (min-width:900px){.flag{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(3rem,6vw,5.5rem)}}
.flag__tag{display:none}
.flag h2{font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.03;letter-spacing:-.03em}
.flag .numlist{margin-top:0}
.flag__why{margin-top:1.6rem;display:grid;gap:.85rem}
.flag__why p{color:var(--ink-muted);font-size:.97rem;max-width:46ch}

/* ============ Footer additions ============ */
@media (min-width:1000px){.ftr__grid{grid-template-columns:1.25fr .95fr .8fr .8fr .95fr}}

.herofoot{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:clamp(1.4rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:679px){
  .herofoot{flex-direction:column;align-items:flex-start;gap:1.5rem}
}
.hero__creds{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0;margin:0;
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
.hero__creds li{display:flex;align-items:center;white-space:nowrap}
/* Separator trails its own item, so a wrapped line never opens with a stray mark. */
.hero__creds li:not(:last-child)::after{content:"\00B7";margin:0 .85rem;color:var(--pumice)}

/* Eyebrow to heading spacing, previously repeated as an inline style. */
.eyebrow + h1,.eyebrow + h2{margin-top:1.1rem}

/* Footer column labels: styled as headings, not competing in the heading outline. */
.ftr__h{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--on-dark-muted);font-family:'Source Sans 3',sans-serif;margin:0 0 1.15rem}

/* Services dropdown: JS adds intent, CSS keeps working without it. */
.nav__grp.is-open .menu{opacity:1;visibility:visible;transform:none}
.nav__grp.is-shut .menu{opacity:0;visibility:hidden;transform:translateY(-6px)}

/* Booking widget must not push the page sideways on a phone. */
.calwrap{max-width:100%;overflow:hidden}
.calwrap .calendly-inline-widget{width:100%;min-width:0 !important}
@media (max-width:600px){.calwrap .calendly-inline-widget{height:900px !important}}

/* Audit form state. While no endpoint is configured the form is not rendered at
   all, so no visitor can type into something that cannot send. */
.formstate[data-endpoint-configured="false"] #audit-form{display:none}
.formstate[data-endpoint-configured="true"] .formstate__notice{display:none}
.formstate__notice{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:clamp(2rem,4vw,3rem)}
.formstate__notice h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-top:1.1rem}

/* ============ Services hub rows ============ */
.svclist{border-top:1px solid var(--rule)}
.svcrow{position:relative;display:grid;grid-template-columns:2.75rem 1fr;gap:.4rem 1rem;align-items:start;
  border-bottom:1px solid var(--rule);padding:clamp(1.6rem,3vw,2.25rem) 0}
@media (min-width:900px){.svcrow{grid-template-columns:2.75rem minmax(0,1fr) auto;gap:2rem}}
.svcrow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue-atoll);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 520ms var(--ease-out)}
@media (hover:hover){.svcrow:hover::after{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.svcrow::after{display:none}}
.svcrow>.num{padding-top:.55rem;font-size:clamp(1.02rem,1.4vw,1.25rem);letter-spacing:.07em}
.svcrow h2,.svcrow h3{font-size:clamp(1.42rem,2.2vw,1.8rem);line-height:1.14}
.svcrow h2 a,.svcrow h3 a{text-decoration:none}
.svcrow h2 a:hover,.svcrow h3 a:hover{text-decoration:underline;text-decoration-color:var(--pumice);text-underline-offset:4px}
.svcrow__one{margin-top:.4rem;color:var(--ink-muted);max-width:46ch}
.svcrow__best{margin-top:.7rem;font-size:.92rem;color:var(--ink-muted);max-width:46ch}
.svcrow__best span{font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--ink);margin-right:.5rem}
.svcrow>.arrowlink{grid-column:2;margin-top:1rem;border-bottom-color:transparent;white-space:nowrap}
@media (min-width:900px){.svcrow>.arrowlink{grid-column:3;margin-top:.45rem;align-self:start}}
.svcrow:hover>.arrowlink{border-bottom-color:var(--rule)}

/* ============ Motion system ============ (Phase 5D)
   Six behaviours, each with one job. Everything is gated on html.rv, which
   site.js adds only when it has a working IntersectionObserver and the visitor
   has not asked for reduced motion. So no-JS, observer failure and
   prefers-reduced-motion all land on the resolved final state with no work.

   --p is the scroll progress of a cinematic band, 0 unresolved to 1 resolved.
   --q is the same progress remapped for the heading that lands last. Both are
   registered with initial-value 1, so an unset band is a finished band. */
@property --p{syntax:"<number>";inherits:true;initial-value:1}
@property --q{syntax:"<number>";inherits:true;initial-value:1}

/* --- B. Mask rise. Major headings only, once. ------------------------------ */
/* inset() rejects negative values, so the clip runs to the border box exactly.
   These headings are set at line-height 1.2, which leaves the ascenders and
   descenders inside that box. Nothing is added to the box itself, so once the
   reveal is over the element is byte-identical to an unanimated one. */
html.rv [data-rv="rise"]{
  clip-path:inset(0 0 100% 0);transform:translateY(11px);
  transition:clip-path 760ms var(--ease-out),transform 760ms var(--ease-out)}
html.rv [data-rv="rise"].is-in{clip-path:inset(0 0 0 0);transform:none}
/* Once the reveal has played, the clip comes off entirely. A heading left with
   a permanent clip-path keeps a paint boundary for no reason, and it renders
   badly in print and in screenshot capture. */
html.rv [data-rv="rise"].rv-done{clip-path:none;transition:none}

/* --- C. Row settle. Lists and copy groups. Capped at 7 children. ---------- */
html.rv [data-rv="settle"]>*:not([data-rv]){opacity:0;transform:translateY(7px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
html.rv [data-rv="settle"].is-in>*:not([data-rv]){opacity:1;transform:none}
html.rv [data-rv="settle"]>*:nth-child(2){transition-delay:70ms}
html.rv [data-rv="settle"]>*:nth-child(3){transition-delay:125ms}
html.rv [data-rv="settle"]>*:nth-child(4){transition-delay:180ms}
html.rv [data-rv="settle"]>*:nth-child(5){transition-delay:235ms}
html.rv [data-rv="settle"]>*:nth-child(6){transition-delay:290ms}
html.rv [data-rv="settle"]>*:nth-child(7){transition-delay:345ms}

/* --- A. Hairline draw. The rule IS the pseudo-element while rv is on, so the
   real border never double-draws. Draw only, no movement of any text. ------ */
html.rv [data-rv="rules"]>*{position:relative;border-top-color:transparent}
html.rv [data-rv="rules"]>*::before{content:"";position:absolute;left:0;top:-1px;
  width:100%;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 620ms var(--ease-out)}
html.rv [data-rv="rules"].is-in>*::before{transform:none}
html.rv [data-rv="rules"]>*:nth-child(2)::before{transition-delay:75ms}
html.rv [data-rv="rules"]>*:nth-child(3)::before{transition-delay:150ms}
html.rv [data-rv="rules"]>*:nth-child(4)::before{transition-delay:225ms}
html.rv [data-rv="rules"]>*:nth-child(5)::before{transition-delay:300ms}

/* The hero's closing rule and the trust strip's rules are one continuous line
   drawn through two sections. The hero rule goes first; the strip's five pick
   up as it finishes, so the eye reads one line, not a component boundary. */
html.rv .herofoot[data-rv="rule"]{border-top-color:transparent}
html.rv .herofoot[data-rv="rule"]::after{content:"";position:absolute;left:0;top:0;
  width:100%;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--ease-out) 300ms}
html.rv .herofoot[data-rv="rule"].is-in::after{transform:none}
/* Only where the hero rule and the strip are on screen together. Narrower than
   that the strip is its own arrival and should not sit waiting for a second. */
@media (min-width:900px){
  html.rv .trust[data-rv="rules"]>*::before{transition-delay:940ms}
  html.rv .trust[data-rv="rules"]>*:nth-child(2)::before{transition-delay:1015ms}
  html.rv .trust[data-rv="rules"]>*:nth-child(3)::before{transition-delay:1090ms}
  html.rv .trust[data-rv="rules"]>*:nth-child(4)::before{transition-delay:1165ms}
  html.rv .trust[data-rv="rules"]>*:nth-child(5)::before{transition-delay:1240ms}
}

/* --- Fade. One unit, no stagger. The desk visual and the comparison table. - */
html.rv [data-rv="fade"]{opacity:0;transform:translateY(5px);
  transition:opacity 800ms var(--ease-out) 340ms,transform 800ms var(--ease-out) 340ms}
html.rv [data-rv="fade"].is-in{opacity:1;transform:none}

/* --- Spine. How it works: the Complete spine turned on its side. Only where
   the four steps sit in one row, so no stacked step ever loses its rule. --- */
html.rv [data-rv="spine"]>.step{opacity:0;transform:translateY(7px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
html.rv [data-rv="spine"].is-in>.step{opacity:1;transform:none}
html.rv [data-rv="spine"]>.step:nth-child(2){transition-delay:90ms}
html.rv [data-rv="spine"]>.step:nth-child(3){transition-delay:180ms}
html.rv [data-rv="spine"]>.step:nth-child(4){transition-delay:270ms}
@media (min-width:1040px){
  html.rv [data-rv="spine"]{position:relative}
  html.rv [data-rv="spine"]>.step{border-top-color:transparent}
  html.rv [data-rv="spine"]::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:var(--rule);transform:scaleX(0);transform-origin:0 50%;
    transition:transform 1000ms var(--ease-out)}
  html.rv [data-rv="spine"].is-in::before{transform:none}
}

/* --- D. Cinematic 1 of 2. The problem: loose work resolves into one column.
   Offsets are deliberately small. transform and opacity only. ------------- */
html.rv [data-cine="pain"] .painlist li{opacity:calc(.42 + .58 * var(--p))}
@media (min-width:900px){
  /* Lateral drift is desktop only. On a phone a sideways offset would push the
     row past the viewport edge, and the brief asks for a plain state change
     there anyway: the rows simply resolve in place. */
  html.rv [data-cine="pain"] .painlist li{
    transform:translate3d(calc(var(--ox,0px) * (1 - var(--p))),0,0)
              rotate(calc(var(--rot,0deg) * (1 - var(--p))));will-change:transform}
  html.rv [data-cine="pain"] .painlist li:nth-child(1){--ox:24px;--rot:-.45deg}
  html.rv [data-cine="pain"] .painlist li:nth-child(2){--ox:-16px;--rot:.38deg}
  html.rv [data-cine="pain"] .painlist li:nth-child(3){--ox:31px;--rot:-.3deg}
  html.rv [data-cine="pain"] .painlist li:nth-child(4){--ox:-23px;--rot:.5deg}
  html.rv [data-cine="pain"] .painlist li:nth-child(5){--ox:18px;--rot:-.4deg}
}
html.rv [data-cine="pain"] h2{
  transform:translateY(calc(13px * (1 - var(--q))));opacity:calc(.34 + .66 * var(--q))}

/* --- D. Cinematic 2 of 2. Serene Complete: seven services onto one axis.
   The spine is the axis the numerals hang off. No rotation, no scaling, no
   glow: an architectural drawing assembling itself. ----------------------- */
html.rv [data-cine="flag"] .numlist li{opacity:calc(.3 + .7 * var(--p))}
html.rv [data-cine="flag"] h2{
  transform:translateY(calc(15px * (1 - var(--q))));opacity:calc(.38 + .62 * var(--q))}
@media (min-width:900px){
  /* Lateral convergence is desktop only: on a phone there is no width for it
     and the brief asks for the spine draw alone. */
  html.rv [data-cine="flag"] .numlist li{
    transform:translate3d(calc(var(--ox,0px) * (1 - var(--p))),0,0);will-change:transform}
  html.rv [data-cine="flag"] .numlist li:nth-child(1){--ox:74px}
  html.rv [data-cine="flag"] .numlist li:nth-child(2){--ox:-58px}
  html.rv [data-cine="flag"] .numlist li:nth-child(3){--ox:82px}
  html.rv [data-cine="flag"] .numlist li:nth-child(4){--ox:-46px}
  html.rv [data-cine="flag"] .numlist li:nth-child(5){--ox:66px}
  html.rv [data-cine="flag"] .numlist li:nth-child(6){--ox:-72px}
  html.rv [data-cine="flag"] .numlist li:nth-child(7){--ox:54px}
}

/* --- E. State transition. Finder result rows entering. -------------------- */
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.picker__rows li.rv-new{animation:rowin 380ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.picker__rows li.rv-new{animation:none}}

/* ============ Operational scenes ============ (Phase 5C.2)
   Four bespoke SVG compositions: the hero constellation, the problem field, the
   services system, and the Complete convergence. All four are decorative, so
   every one carries aria-hidden and pointer-events:none, and none of them ever
   paints its own pointer gradient: the single body::after atmosphere passes
   across them like it passes across everything else.

   Shared vocabulary. .pl is a plane (a paper-like surface), .sh is its dropped
   shadow drawn as a plain offset rect so nothing needs an SVG filter, .hl is a
   hairline, .lb is a label. Fill and stroke come from the palette only. */
.field .pl,.sys .pl,.cv rect,.fgfield rect{vector-effect:non-scaling-stroke}
.field,.sys,.cv,.fgfield{pointer-events:none;-webkit-user-select:none;user-select:none}

/* --- Hero constellation ------------------------------------------------- */
.field{position:relative;width:100%;justify-self:stretch}
.field__svg{display:block;width:100%;height:auto;overflow:visible}
.field .pth{fill:none;stroke:var(--rule);stroke-width:1}
.field .sh{fill:rgba(51,47,56,.11)}
.field .pl{fill:#FCFBF8;stroke:rgba(58,55,61,.34);stroke-width:1}
.field .lb{font-family:'Source Sans 3',system-ui,sans-serif;font-size:calc(12.4px / var(--s,1));font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;fill:var(--ink-muted)}
.field .mt{font-family:'Source Sans 3',system-ui,sans-serif;font-size:calc(11.6px / var(--s,1));font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;fill:var(--ink-muted)}
.field .mtn{font-family:'Source Serif 4',Georgia,serif;font-size:calc(19.6px / var(--s,1));fill:var(--ink-deep)}
/* Every module is now placed with its own scale, so stroke width has to stop
   scaling with it: one hairline weight across all three depth planes. */
.field line,.field path,.field rect,.field circle{vector-effect:non-scaling-stroke}
/* Depth is what carries the hierarchy: two dominant modules, three at middle
   distance, two peripheral. All seven are present; they are not equals.
   Phase 5C.4: the separation is wider, because at a true 1440 the three tiers
   read as one tier of pale rectangles. */
.field .dep--mid{opacity:.8}
.field .dep--back{opacity:.5}
.field .dep--front .pl{stroke:rgba(58,55,61,.44)}
.field .dep--front .sh{fill:rgba(51,47,56,.13)}
.field .hl{stroke:var(--pumice);stroke-width:1.5}
.field .hl--s{stroke:rgba(58,55,61,.3);stroke-width:1.5}
.field .bx{fill:none;stroke:var(--ink-muted);stroke-width:1.5}
.field .tick{fill:none;stroke:var(--blue-atoll);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.field .rm{fill:none;stroke:rgba(58,55,61,.3);stroke-width:1.5}
.field .tiles rect,.field .blocks rect,.field .cal rect{fill:none;stroke:rgba(58,55,61,.28);stroke-width:1.5}
.field .tilefill,.field .blockfill{fill:var(--chalk-blue);opacity:0}
.field .mark{fill:none;stroke:var(--blue-atoll);stroke-width:2;opacity:0}
.field .handled line{stroke:var(--blue-atoll);stroke-width:1.5;
  stroke-dasharray:200;stroke-dashoffset:200}
.field .slot{opacity:0}
.field .chip{fill:var(--blue-atoll);opacity:0}
.field .swp{fill:var(--chalk-blue);opacity:0}
.field .dot{fill:var(--pumice)}
.field .mod{transform-box:fill-box;transform-origin:50% 50%}
.field .dep{transition:transform 1200ms cubic-bezier(.22,1,.36,1)}

/* --- Problem field. Sits behind the copy, so it is faint by construction. - */
/* The band is the containing block. Without this the field escapes to the
   initial containing block and lands on top of the hero. */
[data-cine="pain"]{position:relative;overflow:hidden}
/* Masked away from where the copy sits, so the field reads as the operational
   world around the words rather than a texture printed over them. */
.fgfield{position:absolute;inset:0;overflow:hidden;opacity:.62;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 34%,transparent 68%,#000 100%);
  mask-image:linear-gradient(to bottom,#000 0,transparent 34%,transparent 68%,#000 100%)}
.fgfield svg{display:block;width:100%;height:100%}
/* Filled, so the fragments read as sheets of work rather than graph paper. */
.fgfield rect{fill:rgba(255,255,255,.5);stroke:var(--rule);stroke-width:1}
.fgfield line{stroke:var(--rule);stroke-width:1}
.fgfield .fg{transform-box:fill-box;transform-origin:50% 50%}
@media (max-width:899px){.fgfield{opacity:.32}}

/* --- Services system --------------------------------------------------- */
.sys{margin-top:clamp(2.5rem,5vw,4rem)}
.sys__svg{display:block;width:100%;height:auto}
.sys__bus line{stroke:var(--rule);stroke-width:1}
.sys__m .cn{stroke:var(--rule);stroke-width:1}
.sys__m .gl .t{fill:none;stroke:var(--blue-atoll);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sys__m .pl{fill:none;stroke:rgba(58,55,61,.26);stroke-width:1}
.sys__m .n{font-family:'Source Serif 4',Georgia,serif;font-size:15px;fill:var(--ink-muted);letter-spacing:.06em}
.sys__m .lb{font-family:'Source Sans 3',system-ui,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-muted)}
.sys__m .gl line,.sys__m .gl path{stroke:var(--pumice);stroke-width:1.5;fill:none}
.sys__m .gl rect{fill:none;stroke:var(--pumice);stroke-width:1.5}
.sys__m .acc{stroke:var(--blue-atoll);stroke-width:2;
  transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.sys__m{transform-box:fill-box;transform-origin:50% 100%;
  transition:opacity 420ms var(--ease),transform 520ms cubic-bezier(.22,1,.36,1)}
/* Touch drives this from scroll position, so the change should read as a
   settle rather than a snap: less lift, longer travel. */
@media (hover:none),(pointer:coarse){
  .sys .sys__m.is-on,html.rv .sys[data-rv="scene"].is-in .sys__m.is-on{transform:translateY(-4px)}
  .sys__m{transition:opacity 620ms var(--ease),transform 760ms cubic-bezier(.22,1,.36,1)}
  .sys__m .act{transition-duration:520ms}
}
.sys__m .acc{transition:transform 520ms cubic-bezier(.22,1,.36,1)}
.sys__m .n,.sys__m .lb{transition:fill 320ms var(--ease)}

/* --- Scene geometry that is true in every state -------------------------
   These transforms read --p, which is registered with initial-value 1. With no
   JS, no observer, or reduced motion, every scene therefore renders its
   RESOLVED composition: modules aligned, fragments on the grid, planes stacked.
   The scattered, energetic state only exists once a scrub is actually driving
   the band, which is what makes "fast market" a thing you scroll through. */
.field .mod{transform:translate(calc(var(--dx,0px) * var(--p)),calc(var(--dy,0px) * var(--p)))
  rotate(calc(var(--rot,0deg) * (1 - var(--p))))}
.fgfield .fg{transform:translate(calc(var(--fdx,0px) * var(--p)),calc(var(--fdy,0px) * var(--p)))
  rotate(calc(var(--frot,0deg) * (1 - var(--p))))}

  rotate(calc(var(--crot,0deg) * (1 - var(--p))))}
@media (max-width:899px){
  /* Mobile keeps the idea and drops the lateral choreography, exactly as the
     two earlier cinematic bands do. */
  .cv__p{--cdx:0px}
  .field .mod{--dx:0px}
}

/* --- Pointer depth. Presence, not tracking: 3 to 6px of differential travel
   between three planes, eased over more than a second. ------------------- */
.field .dep--back{transform:translate(calc(var(--hx,0) * 5px),calc(var(--hy,0) * 3px))}
.field .dep--mid{transform:translate(calc(var(--hx,0) * -7px),calc(var(--hy,0) * -5px))}
.field .dep--front{transform:translate(calc(var(--hx,0) * 10px),calc(var(--hy,0) * 8px))}

/* --- Entrance: the system coming online. Irregular, not a stagger. ------- */
html.rv .field .modin{opacity:0;transform:translate(var(--ex,0px),var(--ey,0px)) scale(.965);
  transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity 900ms var(--ease-out) var(--ed,0ms),transform 1150ms var(--ease-out) var(--ed,0ms)}
html.rv .field[data-rv="scene"].is-in .modin{opacity:1;transform:none}
html.rv .field .grd,html.rv .field .paths,html.rv .field .spine{opacity:0;
  transition:opacity 1400ms var(--ease-out) 220ms}
html.rv .field[data-rv="scene"].is-in .grd,
html.rv .field[data-rv="scene"].is-in .paths,
html.rv .field[data-rv="scene"].is-in .spine{opacity:1}

/* --- Ambient operational life. Seven unrelated periods, so nothing ever
   lines up into a tick-tick-tick rhythm, and every cycle is mostly pause. - */
@keyframes tickdraw{0%,7%{stroke-dashoffset:16}15%,88%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:16}}
@keyframes swpmove{0%,68%{opacity:0;transform:translateX(0)}76%{opacity:.5}90%,100%{opacity:0;transform:translateX(96px)}}
@keyframes slotin{0%,62%{opacity:0;transform:translateY(-11px)}71%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-11px)}}
@keyframes markstep{0%,10%{opacity:0;transform:translateX(0)}14%,26%{opacity:1;transform:translateX(0)}
  30%,44%{transform:translateX(72px)}48%,62%{transform:translateX(144px)}66%,80%{transform:translateX(216px)}
  84%{opacity:1;transform:translateX(216px)}92%,100%{opacity:0;transform:translateX(216px)}}
@keyframes handle{0%,58%{stroke-dashoffset:200}74%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:200}}
@keyframes fillin{0%,72%{opacity:0}80%,94%{opacity:.75}100%{opacity:0}}
@keyframes chiprun{0%,54%{opacity:0;transform:translate(0,0)}58%{opacity:1;transform:translate(0,0)}
  76%{opacity:1;transform:translate(372px,-58px)}82%,100%{opacity:0;transform:translate(372px,-58px)}}
html.rv .field .m1 .tick{animation:tickdraw 26s var(--ease) infinite}
html.rv .field .m1 .tk:nth-child(6) .tick{animation-delay:2.4s}
html.rv .field .m1 .tk:nth-child(7) .tick{animation-delay:5.2s}
html.rv .field .m1 .tk:nth-child(8) .tick{animation-delay:8.1s}
html.rv .field .m2 .swp{animation:swpmove 24s var(--ease-out) infinite;transform-box:fill-box}
html.rv .field .m3 .slot{animation:slotin 19s var(--ease-out) infinite;transform-box:fill-box}
html.rv .field .m5 .mark{animation:markstep 28s var(--ease) infinite;transform-box:fill-box}
html.rv .field .m5 .handled line{animation:handle 22s var(--ease-out) infinite}
html.rv .field .m6 .tilefill{animation:fillin 21s var(--ease) infinite}
html.rv .field .m7 .blockfill{animation:fillin 23s var(--ease) infinite}
html.rv .field .m4 .chipwrap{animation:chiprun 24s cubic-bezier(.4,0,.2,1) infinite;transform-box:fill-box}

/* --- Services system: one module at a time comes forward ---------------- */
.sys__m{opacity:.8}
html.rv .sys[data-rv="scene"] .sys__m{opacity:0;transform:translateY(10px)}
html.rv .sys[data-rv="scene"].is-in .sys__m{opacity:.8;transform:none}
html.rv .sys .sys__mods .sys__m:nth-child(2){transition-delay:60ms}
html.rv .sys .sys__mods .sys__m:nth-child(3){transition-delay:120ms}
html.rv .sys .sys__mods .sys__m:nth-child(4){transition-delay:180ms}
html.rv .sys .sys__mods .sys__m:nth-child(5){transition-delay:240ms}
html.rv .sys .sys__mods .sys__m:nth-child(6){transition-delay:300ms}
html.rv .sys .sys__mods .sys__m:nth-child(7){transition-delay:360ms}
.sys.is-live .sys__m{opacity:.3}
.sys .sys__m.is-on,html.rv .sys[data-rv="scene"].is-in .sys__m.is-on{opacity:1;transform:translateY(-7px)}
.sys__m.is-on .pl{stroke:var(--ink-muted)}
.sys__m.is-on .n,.sys__m.is-on .lb{fill:var(--ink-deep)}
.sys__m.is-on .gl line,.sys__m.is-on .gl rect,.sys__m.is-on .gl path{stroke:var(--ink-muted)}
.sys__m.is-on .acc{transform:none}

/* --- Hero proportions. The visual is a peer of the type, not an ornament.  */
/* Phase 5C.4, after looking at a real 1440 viewport: the hero is ONE canvas at
   every desktop width, not two columns. The grid becomes a vertical flow (type,
   then the closing row) and the field is a full-bleed layer underneath it. */
@media (min-width:900px){
  .hero__grid{display:flex;flex-direction:column;align-items:stretch;position:relative;
    min-height:min(calc(100svh - 12.5rem),40rem)}
  .hero__copy{max-width:min(56vw,34rem)}
  .herofoot{margin-top:auto}
  /* The canvas: full height of the section, bled to both viewport edges, and
     cropped by .hero{overflow:clip}. The viewBox is 1720x760, wider than any
     desktop hero is proportioned, so the SLICE fit is always driven by the
     HEIGHT: a module is the same physical size at 1280 and at 1920, and a wider
     viewport simply reveals more of the same drawing instead of magnifying it.
     Because the viewBox is centred on the viewport, the boundary between the
     type's half and the operational half is one fixed coordinate (x=920) at
     every width, which is what the module placement is built against. */
  /* Between 900 and 1199 the type column is a larger share of the viewport, so
     the drawing starts further in and crops harder on the right rather than
     bringing a plane edge up against the last word of a paragraph. */
  .field{position:absolute;inset:0;left:calc(50% - 50vw + 13vw);right:calc(50% - 50vw);
    width:auto;height:auto;margin:0;z-index:1;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.16) 26%,rgba(0,0,0,.5) 41%,#000 56%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.16) 26%,rgba(0,0,0,.5) 41%,#000 56%)}
  .field__svg{width:100%;height:100%;overflow:hidden}
}
@media (min-width:900px) and (max-width:1199px){
  .field__svg{position:absolute;left:0;top:50%;translate:0 -50%;height:56%}
}
@media (min-width:1200px){
  /* The grid no longer reserves height it does not need: with a min-height
     larger than the content, the closing row's auto margin pushed the rule and
     the credibility line below a 900px fold. */
  .hero__grid{min-height:min(calc(100svh - 15rem),41rem)}
  /* The type is the focal point, so it gets the scale it was missing, and its
     measure is set here rather than by the column it used to sit in. */
  .hero h1{font-size:clamp(3.1rem,5.6vw,5.1rem)}
  .hero__copy{max-width:min(46vw,39rem)}
  .hero__body,.hero__take{max-width:54ch}
  .field{left:calc(50% - 50vw)}
  /* The composition is tall, so the section does not also need its full airy
     top and floor: the first screen has to carry the scene, not the padding. */
  .hero{padding-block:clamp(2.4rem,3vw,3rem) clamp(1.5rem,2.4vw,2.4rem)}
  /* Measured at 1440x900 with the header in the flow: the closing row sat 60px
     below the fold, which cut the pull quote in half. The vertical gaps inside
     the type block are tightened just enough that the whole hero, rule and
     credibility row included, lands inside a 900px viewport. */
  .hero__grid{gap:2.4rem}
  .hero__lede{margin-top:1.55rem}
  .hero .btn-row{margin-top:1.9rem}
  .herofoot{margin-top:2.9rem;padding-top:1.6rem}
  .hero{padding-block:2rem clamp(1.5rem,2.4vw,2.4rem)}
}
@media (max-width:899px){
  /* A phone cannot hold 1720 units of composition at a readable size: at full
     width a 12px label renders at three pixels. So the phone gets a deliberate
     CROP of the same drawing at nearly full scale instead, with the transaction
     module dominant and the inbox module entering at the bottom edge. The
     offsets are percentages and the box carries an aspect ratio, so the window
     is identical at 320 and at 899. */
  .field{margin-top:2.25rem;order:2;position:relative;overflow:hidden;
    aspect-ratio:1/1.015}
  .field__svg{position:absolute;left:-212%;top:-30.6%;width:430%;max-width:none}
  .field .lb{font-size:calc(16.5px / var(--s,1))}
  .field .mod:not(.m1) .lb{display:none}
  .field .mt{font-size:calc(17px / var(--s,1))}
  .field .mtn{font-size:calc(30px / var(--s,1))}
  .field .st{font-size:calc(15px / var(--s,1))}
  /* Two of the seven step back on a phone so the composition stays readable
     rather than becoming seven small things. */
  .field .m2,.field .m4,.field .m6{display:none}
}


/* ============ Phase 5C.3 — Integrated interactive motion ============

   One pass with four jobs: stop the scenes reading as illustrations placed
   beside content, give every scene latent life, let the pointer explore the
   system, and widen the atmosphere so it is room lighting rather than a
   spotlight. Nothing about content, URLs, schema, metadata, pricing or
   form/analytics state changed.

   Every motion rule below is prefixed html.rv, exactly as Phase 5D requires,
   and every geometry rule reads --p (registered initial-value 1). No-JS,
   observer failure and prefers-reduced-motion therefore all render the
   RESOLVED composition with zero work.

   --- The audit asked for in section 24. Every object in every scene: -------
   ACTIVE   occasional meaningful state change
     field  m1 completion line + row highlight, m1 four ticks, m2 sweep,
            m2 metadata line, m2 plan block aligning, m3 record entering,
            m3 record above it shifting, m3 data marker, m4 lead routing with
            its status, m5 calendar indicator, m5 message handled, m5 message
            arriving, m6 tile filling, m6 crop resolving, m6 schedule marker,
            m7 block filling, m7 layout block snapping, m7 publish indicator
     cv     status marker completing on the resolved spine
   AMBIENT  very small continuous environmental movement
     field  intake pathways (two), vertical spine signal
     hero   the closing rule's travelling signal, which continues under the
            trust strip
     outcome carry axis signal
     cv     axis signal
     spine  how-it-works signal, after its one-time pass
   REACTIVE moves only from pointer, focus, tap or scroll
     field  three depth planes (fine pointer), whole-scene scrub
     fgfield fragments, crossing pathways, shared axis, statuses (scrub)
     fgrules the section's own three rules straightening (scrub)
     sys    module raise, connector send, per-service action (row hover/focus,
            or scroll position on a coarse pointer)
     cv     seven planes converging, incoming pathways, CTA arrival (scrub)
   ANCHOR   deliberately static, so the movement has something to be measured
            against
     the logo, always and in every motion preference; h1 and h2 positions;
     service numerals in the list and in the diagram; the field's grid; the
     m1 tasks-closed numeral; the cv frame; every section's real hairlines.

   --- Reusable vocabulary, for propagating to service pages later (33) -----
   --amb            ambient tempo multiplier, 1 desktop, 1.7 on phones
   .scene-idle      ambient loops paused because the scene is off screen
   html.doc-idle    ambient loops paused because the document is hidden
   background-position seam signals (.herofoot::before, .steps::after) are one
   element each, no extra DOM, and reusable on any full-bleed hairline. */

:root{--amb:1}
@media (max-width:899px){:root{--amb:1.7}}

/* --- Suspension (34, 35). No rAF, no timers. animation-play-state only, so a
   scene keeps the exact composition it had and no entrance ever replays. ---- */
.scene-idle,.scene-idle *,.scene-idle::before,.scene-idle::after,
.scene-idle *::before,.scene-idle *::after,
html.doc-idle .field *,html.doc-idle .fgfield *,html.doc-idle .sys *,
html.doc-idle .cv *,html.doc-idle .carry *,
html.doc-idle .sys{animation-play-state:paused}

/* ============ Hero: one composition, not text beside a picture ============
   The field keeps its own viewBox and its own scrub. What changed is that the
   composition no longer begins at the column boundary: .fieldx carries the
   operational pathways out of the field, across the gutter and behind the
   headline, at the same y scale as the field itself (identical height,
   preserveAspectRatio none, so y=232 in one lands on y=232 in the other and
   the lines read as one continuous system). Masked to almost nothing by the
   time it reaches the text, so nothing competes with reading. */
/* .fieldx is retired. A second SVG carrying the pathways across the gutter was
   the 5C.3 answer to the split; at a true 1440 it still read as two objects
   lining up. The field's own trunks now run the full width of its viewBox and
   the field itself starts inside the type, so there is one drawing. Its two
   travelling signals cross the whole canvas and pass behind the modules. */
.field .pathsig line{stroke:var(--pumice);stroke-width:1.5;fill:none;
  stroke-dasharray:120 1600;stroke-dashoffset:120}
html.rv .field .pathsig .s1{animation:fldrun calc(36s * var(--amb)) linear infinite}
html.rv .field .pathsig .s2{animation:fldrun calc(44s * var(--amb)) linear infinite}
@keyframes fldrun{0%,58%{stroke-dashoffset:120}100%{stroke-dashoffset:-1720}}

/* The closing row is the third item in .hero__grid, so at two columns it was
   being laid out inside column one: the pull quote and the credibility row
   stacked instead of sitting at opposite ends, and the rule stopped under the
   middle of the field. It spans the grid, which is what its own
   justify-content:space-between always assumed. */
@media (min-width:900px){.herofoot{grid-column:1 / -1}}

  100%{background-position:calc(100% + 150px) 0,0 0}}

/* --- Hero module life (3, 4, 5, 26, 27). One or more occasional behaviours per
   module, on unrelated long periods, every cycle mostly pause. Labels are
   neutral operational state only: no names, addresses, amounts or metrics. --- */
.field .st{font-family:'Source Sans 3',system-ui,sans-serif;font-size:calc(9.8px / var(--s,1));
  font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.field .st--a{fill:var(--ink-muted)}
.field .st--b{fill:var(--ink-deep);opacity:0}
.field .rowhi{fill:var(--chalk-blue);opacity:0}
.field .prog{stroke:var(--blue-atoll);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:216;stroke-dashoffset:216}
.field .meta{stroke:var(--pumice);stroke-width:1.5;stroke-dasharray:78;stroke-dashoffset:78}
.field .align{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.field .shiftup{transform-box:fill-box;transform-origin:50% 50%}
.field .pip{fill:var(--pumice);opacity:0}
.field .msgin{opacity:0}
.field .crop{fill:none;stroke:var(--ink-muted);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%}
.field .sched{fill:var(--pumice);opacity:0}
.field .snap{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.field .sn{fill:none;stroke:rgba(58,55,61,.28);stroke-width:1.5}
.field .pub{fill:var(--blue-atoll);opacity:0}

@keyframes progrun{0%,14%{stroke-dashoffset:216}32%,84%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:216}}
@keyframes rowlift{0%,12%{opacity:0}28%,80%{opacity:.5}92%,100%{opacity:0}}
@keyframes metadraw{0%,66%{stroke-dashoffset:78}76%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:78}}
@keyframes alignsnap{0%,56%{opacity:0;transform:translate(6px,-4px)}
  63%{opacity:1;transform:translate(6px,-4px)}78%,92%{opacity:1;transform:none}
  100%{opacity:0;transform:none}}
@keyframes nudgeup{0%,60%{transform:none}72%,93%{transform:translateY(-5px)}100%{transform:none}}
@keyframes pipsettle{0%,70%{opacity:0}77%{opacity:1}88%,94%{opacity:.45}100%{opacity:0}}
@keyframes msgarrive{0%,64%{opacity:0;transform:translateX(-11px)}
  75%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-11px)}}
@keyframes cropfit{0%,66%{opacity:0;transform:scale(1.1)}74%{opacity:1;transform:scale(1.1)}
  86%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes schedin{0%,70%{opacity:0}80%,94%{opacity:1}100%{opacity:0}}
@keyframes snapin{0%,60%{opacity:0;transform:translateX(7px)}68%{opacity:1;transform:translateX(7px)}
  80%,93%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes pubon{0%,72%{opacity:0}80%,92%{opacity:1}100%{opacity:0}}
@keyframes stflip{0%,76%{opacity:0}83%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes stfade{0%,76%{opacity:1}83%,95%{opacity:0}99%,100%{opacity:1}}
@keyframes spinerun{0%,66%{stroke-dashoffset:80}100%{stroke-dashoffset:-770}}

/* Existing loops, restated so they read the mobile tempo multiplier. */
html.rv .field .m1 .tick{animation-duration:calc(26s * var(--amb))}
html.rv .field .m2 .swp{animation-duration:calc(24s * var(--amb))}
html.rv .field .m3 .slot{animation-duration:calc(19s * var(--amb))}
html.rv .field .m5 .mark{animation-duration:calc(28s * var(--amb))}
html.rv .field .m5 .handled line{animation-duration:calc(22s * var(--amb))}
html.rv .field .m6 .tilefill{animation-duration:calc(21s * var(--amb))}
html.rv .field .m7 .blockfill{animation-duration:calc(23s * var(--amb))}
html.rv .field .m4 .chipwrap{animation-duration:calc(24s * var(--amb))}
/* New behaviours. m3's shift shares m3's period and phase, so the record
   entering and the record above it moving are one event, not two. Same for
   m4's status and m4's lead. */
html.rv .field .m1 .prog{animation:progrun calc(31s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m1 .rowhi{animation:rowlift calc(31s * var(--amb)) var(--ease) infinite}
html.rv .field .m2 .meta{animation:metadraw calc(29s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m2 .align{animation:alignsnap calc(33s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m3 .shiftup{animation:nudgeup calc(19s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m3 .pip{animation:pipsettle calc(41s * var(--amb)) var(--ease) infinite}
html.rv .field .m4 .st--a{animation:stfade calc(24s * var(--amb)) var(--ease) infinite}
html.rv .field .m4 .st--b{animation:stflip calc(24s * var(--amb)) var(--ease) infinite}
html.rv .field .m5 .msgin{animation:msgarrive calc(32s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m6 .crop{animation:cropfit calc(43s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m6 .sched{animation:schedin calc(47s * var(--amb)) var(--ease) infinite}
html.rv .field .m7 .snap{animation:snapin calc(39s * var(--amb)) var(--ease-out) infinite}
html.rv .field .m7 .pub{animation:pubon calc(53s * var(--amb)) var(--ease) infinite}

/* --- Pointer proximity (6, 7). A module the pointer is near gains a little
   depth and its own hairlines firm up; the others step back slightly. Set from
   site.js on a fine pointer only, and capped: 5px of lift, nothing chases. --- */
.field .mod .modin{transition:opacity 420ms var(--ease)}
.field .mod .pl{transition:stroke 380ms var(--ease)}
.field.is-near .mod{opacity:.62}
.field.is-near .mod.is-near{opacity:1}
.field .mod.is-near .pl{stroke:rgba(58,55,61,.6)}
@media (min-width:900px){
  html.rv .field .mod.is-near{transform:translate(calc(var(--dx,0px) * var(--p)),
    calc(var(--dy,0px) * var(--p) - 7px))
    rotate(calc(var(--rot,0deg) * (1 - var(--p))))}
}
.field .mod{transition:opacity 420ms var(--ease)}

/* ============ Services: the rows and the diagram are one object (11, 12) ===
   The diagram is no longer a rectangle sitting under the list. Its bus runs off
   both viewport edges, and every module raises a connector to the exact rule
   the service list closes on, so the list's bottom edge is the diagram's top
   edge. Activating a row sends a signal up that connector and makes that
   module perform the action its service describes. */
#services{overflow:clip}
.sys{margin-top:0;width:100vw;margin-inline:calc(50% - 50vw)}
.sys__m .up{stroke:var(--rule);stroke-width:1;opacity:.5}
.sys__m .upsig{stroke:var(--blue-atoll);stroke-width:2;
  stroke-dasharray:20 132;stroke-dashoffset:20;opacity:0}
.sys__m.is-on .upsig{opacity:1;animation:upsend 820ms var(--ease-out) 1 both}
@keyframes upsend{from{stroke-dashoffset:20}to{stroke-dashoffset:-132}}
.sys__m .act{opacity:0;transition:opacity 360ms var(--ease)}
.sys__m .act.af{fill:var(--chalk-blue);stroke:none}
.sys__m .act.ak{fill:none;stroke:var(--blue-atoll);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130;
  transition:stroke-dashoffset 640ms var(--ease-out) 120ms,opacity 300ms var(--ease)}
.sys__m.is-on .act{opacity:1}
/* 04 is a sequence, not a state: the route draws, then the destination fills. */
.sys__m[data-m="04"] .act.af{transition-delay:520ms}
/* 02's field line settles after its photo block, same reason. */
.sys__m[data-m="02"] .act.al{transition-delay:180ms,300ms}
.sys__m.is-on .act.ak{stroke-dashoffset:0}
.sys__m.is-on .up{opacity:1;stroke:var(--ink-muted)}
/* The rest of the system gets quieter rather than disappearing. */
.sys.is-live .sys__m{opacity:.24}
@media (max-width:899px){
  /* Seven modules across a phone gives each one 34px: the interior glyphs read
     as grey specks and the labels are unreadable. So the phone gets the system
     as a SCHEMATIC instead of seven small drawings: the numeral is the module,
     at a size that is actually legible, and lift, accent and connector carry
     the activation. Same object, one layer fewer. */
  .sys__m .lb,.sys__m .gl{display:none}
  .sys__m .n{font-size:46px;text-anchor:middle;transform:translate(58px,54px)}
  .sys__m .pl{fill:rgba(255,255,255,.42)}
  .sys__m.is-on .pl{fill:#FCFBF8}
}

/* ============ Serene Complete: the section converges, not a diagram (14, 15)
   Pathways arrive from beyond both edges of the section and land on the axis.
   The heading column carries that axis as a real page element. The CTA resolves
   last, with the system: never hidden, never unclickable, just quieter until
   the convergence has happened. After it resolves the spine stays alive with
   one travelling signal and one status completing: movement that has become
   organised rather than movement that stopped. */
[data-cine="flag"]{overflow:clip}
.cv{width:100vw;margin-inline:calc(50% - 50vw)}
.cv__in path{fill:none;stroke:var(--on-dark-rule);stroke-width:1;
  opacity:calc(.9 - .5 * var(--p))}
.cv__sig line{stroke:var(--on-dark-muted);stroke-width:1.5;
  stroke-dasharray:66 210;stroke-dashoffset:66}
html.rv .cv__sig line{animation:cvrun calc(44s * var(--amb)) linear infinite}
@keyframes cvrun{0%,70%{stroke-dashoffset:66}100%{stroke-dashoffset:-286}}
.cvst{fill:none;stroke:var(--on-dark-muted);stroke-width:1.5;
  opacity:calc(.2 + .8 * var(--p))}
html.rv .cvst{animation:cvdone calc(37s * var(--amb)) var(--ease) infinite}
@keyframes cvdone{0%,74%{fill:transparent}84%,94%{fill:rgba(240,238,233,.5)}100%{fill:transparent}}
.cv__p--sig rect{stroke:var(--on-dark-muted)}
html.rv [data-cine="flag"] .flag .btn-row{opacity:calc(.3 + .7 * var(--q))}

/* ============ How it works: the same spine, carrying work (17) =============
   No new graphic. The rule the four steps already hang off draws, then a signal
   travels it once and each numeral activates as it passes. Only at the width
   where the four steps sit in one row, exactly as the spine rule itself. */
@media (min-width:1040px){
  html.rv [data-rv="spine"]>.step .num{transition:color 520ms var(--ease)}
  html.rv [data-rv="spine"].is-in>.step:nth-child(1) .num{color:var(--ink-deep);transition-delay:1300ms}
  html.rv [data-rv="spine"].is-in>.step:nth-child(2) .num{color:var(--ink-deep);transition-delay:1850ms}
  html.rv [data-rv="spine"].is-in>.step:nth-child(3) .num{color:var(--ink-deep);transition-delay:2400ms}
  html.rv [data-rv="spine"].is-in>.step:nth-child(4) .num{color:var(--ink-deep);transition-delay:2950ms}
}

/* --- Mobile (36). Keeps state changes, pathway movement, row activation from
   scroll and the Complete spine. Drops the smallest markers, which are noise
   at phone scale, and slows every loop by the --amb multiplier above. ------- */
@media (max-width:899px){
  .field .m1 .rowhi,.field .m6 .sched,.field .m7 .pub,.field .m3 .pip{display:none}
}


/* ============ Phase 5C.4 — inner pages: the same room, quieter ============
   One reusable page-head canvas, propagated to the pages that carry the
   argument. The wrapper carries BOTH .field and .pfield, so every stroke,
   plane, label and ambient behaviour already written for the hero
   constellation applies unchanged and no new drawing vocabulary is invented;
   .pfield only re-lays it out. Each service page shows ONE module, the one its
   homepage row activates, sitting on the same operational grid with one
   pathway and one travelling signal. The hub and argument pages get the grid
   and pathways only. There is no second cinematic system anywhere: no scrub,
   no scroll story, no new keyframes, no page-specific JS. */
.pagehead--scene{position:relative;overflow:clip}
.pagehead--scene>.shell{position:relative;z-index:2;width:100%;align-self:stretch}
.pagehead--scene h1{max-width:min(50vw,620px)}
.pagehead--scene .lede{max-width:44ch}
@media (min-width:900px){
  /* The canvas needs a height to be cropped against, or the slice fit shows a
     20% horizontal slot through the middle of the module. */
  .pagehead--scene{display:flex;flex-direction:column;justify-content:center;
    min-height:clamp(320px,34vw,460px)}
}
/* The canvas takes the viewBox's own aspect from the section height, so the
   drawing neither letterboxes nor loses its label and metric rows to a slice
   crop: it runs edge to edge and off the right of the viewport. */
/* !important, deliberately and only here: this element carries .field so that
   the hero's entire drawing vocabulary applies to it unchanged, which means it
   also inherits the hero's own absolute-layer geometry. The box has to be
   stated in terms this page controls. */
.pagehead .pfield{position:absolute!important;top:50%!important;translate:0 -50%!important;
  bottom:auto!important;right:0!important;left:auto!important;margin:0!important;
  padding:0;z-index:0;display:block;order:0;aspect-ratio:auto!important;
  height:clamp(320px,34vw,460px)!important;width:calc(1.3986 * clamp(320px,34vw,460px))!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.34) 20%,#000 46%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.34) 20%,#000 46%)}
.pagehead .pfield__svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;overflow:hidden}
/* Label sizes are absolute here: the inner canvas has one scale, so the hero's
   divide-by-module-scale rule is not needed and would double-apply. */
/* Without the grid behind it the offset shadow made the module read as a card
   dropped on the page. Flat plane instead. */
.pagehead .pfield .sh{display:none}
.pagehead .pfield .lb{font-size:calc(7.8px / var(--s,1))}
.pagehead .pfield .mt{font-size:calc(7.4px / var(--s,1))}
.pagehead .pfield .mtn{font-size:calc(12.4px / var(--s,1))}
.pagehead .pfield .st{font-size:calc(6.2px / var(--s,1))}
/* The hub pages have no module for a trunk to arrive at, so every line runs to
   the viewBox edge and the canvas fades on all four sides: structure passing
   through the page, never a wireframe box sitting in it. */
html.rv .pagehead .pfield .pathsig .s1{animation:fldrun calc(38s * var(--amb)) linear infinite}
@media (min-width:1500px){.pagehead .pfield{width:min(46vw,820px)}}
@media (max-width:899px){
  /* Below the type, not beside it: a wide strip of the same drawing, fading at
     its foot so it does not become a boxed illustration. */
  .pagehead--scene{display:flex;flex-direction:column}
  .pagehead .pfield{position:relative!important;top:auto!important;right:auto!important;
    bottom:auto!important;left:auto!important;translate:none!important;order:2!important;
    width:100%!important;height:auto!important;aspect-ratio:400/286!important;margin-top:1.9rem!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 74%,rgba(0,0,0,.2) 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 74%,rgba(0,0,0,.2) 100%)}
  .pagehead .pfield .lb{font-size:calc(15px / var(--s,1))}
  .pagehead .pfield .mt{font-size:calc(14px / var(--s,1))}
  .pagehead .pfield .mtn{font-size:calc(24px / var(--s,1))}
  .pagehead .pfield .st{font-size:calc(12px / var(--s,1))}
  .pagehead--scene h1,.pagehead--scene .lede{max-width:none}
}


/* ============ Closing CTA: the system at rest ============
   The last scene on the page, and the quietest. One axis, the seven nodes
   connected and aligned, one slow signal, one node resolving on a long period.
   No convergence, no scatter, nothing that restarts the story. It is a
   background layer: it never takes z-order, contrast or attention from the
   heading and Book a call. Masked on the left so the copy is never on top of
   drawing, and at the foot so the field dissolves into the footer's dark
   ground rather than ending on an edge. */
.cta-final{position:relative;overflow:clip}
.cta-final>.shell{position:relative;z-index:2}
.rest{position:absolute;top:50%;translate:0 -50%;right:calc(50% - 50vw);left:auto;
  width:min(44vw,600px);height:min(100%,760px);z-index:1;pointer-events:none;
  -webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.36) 24%,#000 54%),
    linear-gradient(to bottom,transparent 0,#000 16%,#000 58%,transparent 92%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.36) 24%,#000 54%),
    linear-gradient(to bottom,transparent 0,#000 16%,#000 58%,transparent 92%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.rest svg{display:block;width:100%;height:100%;overflow:visible}
.rest line,.rest path,.rest rect{vector-effect:non-scaling-stroke}
.rest .restax line{stroke:var(--on-dark-rule);stroke-width:1}
.rest .cn{stroke:var(--on-dark-rule);stroke-width:1}
.rest .pl{fill:rgba(240,238,233,.04);stroke:var(--on-dark-rule);stroke-width:1}
.rest .n{font-family:'Source Serif 4',Georgia,serif;font-size:13px;letter-spacing:.06em;
  fill:var(--on-dark-muted);opacity:.55}
.rest .spinesig line{stroke:var(--on-dark-muted);stroke-width:1.5;opacity:.45;
  stroke-dasharray:80 690;stroke-dashoffset:80}
.rest .pip{fill:var(--blue-atoll);opacity:0}
html.rv .rest .spinesig line{animation:spinerun calc(46s * var(--amb)) linear infinite}
html.rv .rest .pip{animation:pipsettle calc(37s * var(--amb)) var(--ease) infinite}
@media (max-width:899px){
  /* Quieter and narrower on a phone, and still a background layer: it adds no
     height between the call to action and the footer. */
  .rest{width:74%;height:min(100%,520px);opacity:.72}
  .rest .n{display:none}
}
@media (max-width:479px){.rest{width:82%;opacity:.6}}

/* Social links carry their mark. Both are outlined at the same weight as the
   rest of the footer's hairlines, so they read as type, not as badges. */
.soclink{display:inline-flex;align-items:center;gap:.5rem}
.soclink svg{flex:0 0 auto;opacity:.8;transition:opacity var(--t)}
.soclink:hover svg{opacity:1}


/* ============ List rules carry the brand's teal ============ */
:root{--rule-list:#A9C6BF}
.band-chalk{--rule-list:rgba(23,80,74,.34)}
.band-dark,.ftr{--rule-list:rgba(184,207,201,.42)}
.numlist,.numlist li,
.tasklist,.tasklist li,
.painlist li,.painlist li:last-child,
.deflist,.deflist>*,
.picker__rows,.picker__rows li,
.trust>div,.step,
.svcgrid,.svc,
.svclist,.svcrow,
.faq,.faq details{border-color:var(--rule-list)}