/* ============ LIGHT MODE · BRAND NAVY #283049 ============
Navy is a neutral, not an accent — so it carries structure (type, blocks,
buttons, the footer) while colour is reserved for meaning only.
Committed single-theme: every colour painted explicitly.                  */
:root {
    
    --navy:#283049;
    /* the brand colour, exact */
    --navy-deep:#1C2238;
    /* footer + final CTA */
    --navy-hover:#353F63;
    
    --brand-2:#4E5E96;
    /* navy lifted — secondary marks, icons, rules */
    --wash:#E5EAF5;
    /* navy at 8% — icon tiles, highlights */
    
    --paper:#EDF0F7;
    /* navy-tinted neutral, never plain grey */
    --paper-2:#F6F8FC;
    
    --white:#FFFFFF;
    
    --line:#D8DFED;
    
    --line-2:#E8ECF5;

    --text:#1C2238;
    
    --text-2:#545E7D;
    
    --text-3:#828CA8;
    
    --on-navy:#EEF1F8;
    
    --on-navy-2:#A3ACC9;
    
    --navy-line:rgba(255,255,255,.13);

    --ok:#1C7A55;
    --ok-wash:#E2F2EA;
    /* semantic only: filed / fixed */
    --bad:#B4402C;
    --bad-wash:#FBEAE6;
    /* semantic only: the problem */
    
    --shadow:0 1px 2px rgba(40,48,73,.055), 0 10px 24px -14px rgba(40,48,73,.26);
    
    --shadow-lift:0 2px 6px rgba(40,48,73,.07), 0 26px 54px -26px rgba(40,48,73,.36);
    
    --maxw:1160px;
    --ease:cubic-bezier(.22,.7,.27,1);

}

* {
    box-sizing:border-box
}

[hidden] {
    display:none !important
}

body {
    margin:0;
    background:var(--paper);
    color:var(--text);
    
    font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}

h1,h2,h3,h4 {
    font-family:"Archivo",Helvetica,Arial,sans-serif;
    font-weight:800;
    font-stretch:90%;
    
    line-height:1.06;
    letter-spacing:-.028em;
    text-wrap:balance;
    margin:0;
    color:var(--navy)
}

p {
    margin:0
}

a {
    color:inherit
}

img,svg {
    max-width:100%
}

.mono {
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-variant-numeric:tabular-nums
}

.wrap {
    width:100%;
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:20px
}

section {
    padding-block:clamp(62px,7.5vw,106px)
}

/* ledger grid — navy lines at 4%, the motif survives on light */
.ledger {
    position:absolute;
    inset:0;
    pointer-events:none;
    
    background-image:linear-gradient(to right,rgba(40,48,73,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(40,48,73,.055) 1px,transparent 1px);
    
    background-size:68px 68px;
    
    -webkit-mask-image:radial-gradient(ellipse 120% 78% at 50% 0%,#000 10%,transparent 76%);
    
    mask-image:radial-gradient(ellipse 120% 78% at 50% 0%,#000 10%,transparent 76%)
}

.glow {
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(80px)
}

.eyebrow {
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:11px;
    font-weight:600;
    
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--brand-2);
    display:flex;
    align-items:center;
    gap:9px
}

.eyebrow::before {
    content:"";
    width:16px;
    height:1.5px;
    background:var(--brand-2);
    flex-shrink:0
}

.lede {
    color:var(--text-2);
    font-size:clamp(16px,1.55vw,18.5px);
    max-width:62ch;
    line-height:1.58
}

/* ============ buttons ============ */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:96%;
    font-size:15px;
    letter-spacing:-.008em;
    
    padding:13px 22px;
    border-radius:11px;
    border:1.5px solid transparent;
    text-decoration:none;
    cursor:pointer;
    
    transition:transform .14s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)
}

.btn:hover {
    transform:translateY(-1.5px)
}

.btn:active {
    transform:translateY(0)
}

.btn-primary {
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
    box-shadow:0 8px 22px -12px rgba(40,48,73,.85)
}

.btn-primary:hover {
    background:var(--navy-hover);
    box-shadow:0 14px 30px -12px rgba(40,48,73,.9)
}

.btn-ink {
    background:var(--navy);
    color:#fff;
    border-color:var(--navy)
}

.btn-ink:hover {
    background:var(--navy-hover)
}

.btn-glass,.btn-ghost {
    background:var(--white);
    color:var(--navy);
    border-color:var(--line)
}

.btn-glass:hover,.btn-ghost:hover {
    border-color:var(--brand-2);
    background:var(--paper-2)
}

.btn-lg {
    padding:15px 26px;
    font-size:16px
}

:focus-visible {
    outline:3px solid var(--brand-2);
    outline-offset:3px;
    border-radius:8px
}

/* ============ alert + nav ============ */
.alert {
    background:var(--navy);
    color:var(--on-navy);
    font-size:13px;
    text-align:center;
    
    padding-block:10px;
    padding-top:calc(10px + env(safe-area-inset-top,0px))
}

.pulse {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#4FD6A0;
    margin-right:9px;
    vertical-align:1px;
    
    box-shadow:0 0 0 0 rgba(79,214,160,.7);
    animation:pulse 2.6s infinite
}

@keyframes pulse {
    0% {
        box-shadow:0 0 0 0 rgba(79,214,160,.6)
    }
    
    70% {
        box-shadow:0 0 0 7px rgba(79,214,160,0)
    }
    
    100% {
        box-shadow:0 0 0 0 rgba(79,214,160,0)
    }

}

.alert a {
    color:#fff;
    text-underline-offset:3px
}

nav {
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:60;
    
    background:color-mix(in srgb,#FFFFFF 93%,transparent);
    
    backdrop-filter:saturate(1.6) blur(16px);
    border-bottom:1px solid var(--line)
}

.nav-in {
    display:flex;
    align-items:center;
    gap:26px;
    height:84px
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    flex-shrink:0
}

.brand-mark {
    width:38px;
    height:42px;
    flex-shrink:0
}

.brand-txt {
    display:flex;
    flex-direction:column;
    line-height:1
}

.brand-txt b {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    font-size:23px;
    
    letter-spacing:-.04em;
    color:var(--navy)
}

.brand-txt i {
    font-family:"Archivo",sans-serif;
    font-style:normal;
    font-weight:600;
    font-stretch:92%;
    
    font-size:13.5px;
    letter-spacing:-.018em;
    color:var(--navy);
    margin-top:3px
}

footer .brand-txt b,footer .brand-txt i {
    color:#fff
}

.brand-name {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    font-size:20px;
    letter-spacing:-.035em;
    color:var(--navy)
}

.nav-links {
    display:flex;
    gap:44px;
    margin-left:auto;
    align-items:center
}

.nav-links a {
    text-decoration:none;
    font-size:14.5px;
    font-weight:500;
    color:var(--text-2);
    position:relative;
    padding-block:4px
}

.nav-links a::after {
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:0;
    height:1.5px;
    background:var(--navy);
    transition:right .25s var(--ease)
}

.nav-links a:hover {
    color:var(--navy)
}

.nav-links a:hover::after {
    right:0
}

.nav-cta {
    margin-left:auto
}

.nav-links + .nav-cta {
    margin-left:0
}

@media(max-width:900px) {
    .nav-links {
        display:none
    }
    
    .nav-cta {
        margin-left:auto
    }
    
    .nav-in {
        height:62px
    }

}

@media(max-width:640px) {
    .nav-cta {
        display:none
    }

}

/* ============ hero ============ */
.hero {
    background:var(--paper-2);
    color:var(--text);
    position:relative;
    overflow:hidden;
    
    padding-block:clamp(58px,7vw,100px) clamp(66px,8vw,110px);
    border-bottom:1px solid var(--line)
}

.hero .glow.g1 {
    width:640px;
    height:520px;
    background:rgba(78,94,150,.20);
    right:-10%;
    top:0
}

.hero .glow.g2 {
    width:520px;
    height:420px;
    background:rgba(40,48,73,.10);
    left:-14%;
    bottom:-22%
}

.hero-grid {
    display:grid;
    grid-template-columns:1.16fr .84fr;
    gap:clamp(30px,4.6vw,62px);
    align-items:center;
    position:relative;
    z-index:2
}

.hero h1 {
    font-size:clamp(34px,4.2vw,54px);
    color:var(--navy);
    margin-bottom:22px;
    font-stretch:84%;
    letter-spacing:-.035em
}

.hero h1 em {
    font-style:normal;
    color:#9BA5CC
}

.hero p.lede {
    max-width:52ch
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px
}

.hero-note {
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid var(--line)
}

.hero-note span {
    font-size:13.5px;
    color:var(--text-2);
    display:flex;
    align-items:center;
    gap:8px
}

@media(max-width:940px) {
    .hero-grid {
        grid-template-columns:1fr;
        align-items:start
    }

}

/* ============ section heads ============ */
.sec-head {
    max-width:none;
    margin-bottom:clamp(32px,4.2vw,52px)
}

.sec-head h2 {
    max-width:24em
}

.sec-head .lede {
    max-width:64ch
}

br.lg {
    display:inline
}

@media(max-width:820px) {
    br.lg {
        display:none
    }

}

.sec-head h2 {
    font-size:clamp(27px,3.7vw,44px);
    margin-block:14px 16px;
    font-stretch:85%
}

/* ============ services bento ============ */
.svc-group + .svc-group {
    margin-top:14px
}

.bento {
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr);
    gap:14px
}

@media(max-width:900px) {
    .bento {
        grid-template-columns:1fr
    }

}

/* the one place navy appears as a solid block — it anchors each service group */
.pain {
    background:var(--navy);
    color:var(--on-navy);
    border-radius:18px;
    padding:26px 24px;
    position:relative;
    overflow:hidden;
    
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:22px;
    min-height:230px
}

.pain .glow {
    width:300px;
    height:230px;
    background:rgba(255,255,255,.07);
    right:-24%;
    bottom:-34%
}

.pain-idx {
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;
    letter-spacing:.16em;
    color:var(--on-navy-2);
    position:relative;
    z-index:2
}

.pain h3 {
    color:#fff;
    font-size:clamp(20px,2.2vw,25px);
    margin-top:12px;
    position:relative;
    z-index:2;
    font-stretch:88%
}

.pain-q {
    position:relative;
    z-index:2;
    font-family:"Archivo",sans-serif;
    font-weight:600;
    font-stretch:96%;
    font-size:15.5px;
    
    color:#fff;
    line-height:1.4;
    padding-left:14px;
    border-left:2.5px solid #E9836C
}

.pain-a {
    position:relative;
    z-index:2;
    font-size:14.5px;
    color:var(--on-navy-2);
    margin-top:11px;
    line-height:1.52
}

.svc-items {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}

@media(max-width:520px) {
    .svc-items {
        grid-template-columns:1fr
    }

}

.svc {
    background:var(--white);
    border:1px solid var(--line-2);
    border-radius:16px;
    padding:20px;
    box-shadow:var(--shadow);
    
    display:flex;
    flex-direction:column;
    gap:7px;
    position:relative;
    overflow:hidden;
    
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)
}

.svc::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2.5px;
    background:var(--navy);
    
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .32s var(--ease)
}

.svc:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
    border-color:var(--line)
}

.svc:hover::before {
    transform:scaleX(1)
}

.svc .tag {
    font-family:"JetBrains Mono",monospace;
    font-size:9.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--brand-2);
    font-weight:600
}

.svc h4 {
    font-family:"Archivo",sans-serif;
    font-size:17px;
    font-weight:700;
    font-stretch:94%;
    letter-spacing:-.02em;
    margin-top:4px
}

.svc p {
    font-size:14px;
    color:var(--text-2);
    line-height:1.5
}

/* ============ about / credentials ============ */
.creds {
    background:var(--navy);
    color:var(--on-navy);
    position:relative;
    overflow:hidden
}

.creds::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    
    background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
    
    background-size:92px 92px;
    mask-image:radial-gradient(130% 92% at 50% 0,#000 45%,transparent 100%)
}

.creds .glow {
    width:720px;
    height:460px;
    background:rgba(78,94,150,.30);
    left:50%;
    transform:translateX(-50%);
    top:-34%
}

.creds h2 {
    color:#fff
}

.creds .eyebrow {
    color:#9BA5CC
}

.creds .eyebrow::before {
    background:#9BA5CC
}

.creds .wrap {
    position:relative;
    z-index:2
}

.creds-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(26px,4vw,56px);
    align-items:start
}

@media(max-width:860px) {
    .creds-grid {
        grid-template-columns:1fr
    }

}

.creds h2 {
    font-size:clamp(26px,3.5vw,42px);
    font-stretch:85%;
    margin-top:14px
}

.creds p {
    color:var(--on-navy-2);
    font-size:16px;
    line-height:1.6
}

.creds p + p {
    margin-top:18px
}

.stack {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(40,48,73,.14);
    grid-column:1/-1
}

.chip {
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--line);
    border-radius:999px;
    
    padding:9px 18px;
    background:var(--white);
    
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    font-size:16px;
    letter-spacing:-.02em;
    color:var(--navy);
    
    box-shadow:var(--shadow);
    transition:transform .18s var(--ease),border-color .18s var(--ease)
}

.chip:hover {
    transform:translateY(-2px);
    border-color:var(--brand-2)
}

.chip.mtd {
    color:var(--ok);
    border-color:rgba(28,122,85,.4);
    background:var(--ok-wash);
    box-shadow:none;
    
    font-family:"JetBrains Mono",monospace;
    font-size:12.5px;
    letter-spacing:.06em;
    font-weight:600
}

.stack-label {
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;
    letter-spacing:.15em;
    text-transform:uppercase;
    
    color:var(--text-3);
    font-weight:600;
    width:100%;
    margin-bottom:4px
}

/* ============ switching rail ============ */
#how-it-works {
    background:var(--wash)
}

.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    position:relative;
    margin-top:10px
}

.steps::before {
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:9px;
    height:1.5px;
    background:var(--line)
}

.step {
    position:relative;
    padding-top:34px;
    display:flex;
    flex-direction:column
}

.step::before {
    content:"";
    position:absolute;
    top:2px;
    left:0;
    width:15px;
    height:15px;
    border-radius:50%;
    
    background:var(--white);
    border:2.5px solid var(--navy);
    box-shadow:0 0 0 5px rgba(40,48,73,.10)
}

.step-n {
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.15em;
    color:var(--text-3);
    font-weight:600
}

.step h4 {
    font-family:"Archivo",sans-serif;
    font-size:17.5px;
    font-weight:700;
    font-stretch:94%;
    margin-block:8px 8px;
    letter-spacing:-.02em
}

.step p {
    font-size:14.5px;
    color:var(--text-2);
    line-height:1.5
}

@media(max-width:900px) {
    .steps {
        grid-template-columns:1fr 1fr;
        gap:28px 20px
    }
    
    .steps::before {
        display:none
    }

}

@media(max-width:540px) {
    
    .steps {
        grid-template-columns:1fr;
        gap:0
    }

    .step {
        padding:0 0 26px 30px;
        border-left:2px solid var(--line);
        margin-left:7px
    }

    .step::before {
        top:0;
        left:-8.5px
    }

    .step:last-child {
        border-left-color:transparent;
        padding-bottom:0
    }

}

/* ============ before / after ledger ============ */
.problems {
    background:var(--white);
    border-block:1px solid var(--line)
}

.ledger-table {
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background:var(--white);
    box-shadow:var(--shadow)
}

.lt-head {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    background:var(--navy)
}

.lt-head div {
    padding:15px 20px;
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--on-navy-2)
}

.lt-head .h-a {
    color:#fff;
    border-left:1px solid var(--navy-line)
}

.lt-row {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    border-bottom:1px solid var(--line-2);
    transition:background .2s var(--ease)
}

.lt-row:last-child {
    border-bottom:0
}

.lt-row:hover {
    background:var(--paper-2)
}

.lt-b,.lt-a {
    padding:18px 20px;
    display:flex;
    gap:12px;
    align-items:flex-start
}

.lt-a {
    border-left:1px solid var(--line-2)
}

.lt-b span.t {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:95%;
    font-size:15.5px;
    color:var(--text-2);
    
    text-decoration:line-through;
    text-decoration-color:var(--bad);
    text-decoration-thickness:1.5px
}

.lt-a span.t {
    font-size:14.5px;
    color:var(--text);
    line-height:1.5
}

.mark {
    width:21px;
    height:21px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0;
    margin-top:1px
}

.mark-x {
    background:var(--bad-wash);
    color:var(--bad)
}

.mark-v {
    background:var(--ok);
    color:#fff
}

@media(max-width:720px) {
    
    .lt-head {
        grid-template-columns:1fr
    }

    .lt-head .h-a {
        display:none
    }

    .lt-row {
        grid-template-columns:1fr
    }

    .lt-a {
        border-left:0;
        border-top:1px dashed var(--line-2);
        padding-top:12px
    }

    .lt-b {
        padding-bottom:4px
    }

}

.prob-cta {
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px
}

.prob-cta p {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:92%;
    font-size:20px;
    color:var(--navy)
}

/* ============ why ============ */
.why {
    background:var(--wash);
    position:relative;
    overflow:hidden
}

.why .glow.w1 {
    width:580px;
    height:440px;
    background:rgba(255,255,255,.7);
    left:-12%;
    top:4%
}

.why .glow.w2 {
    width:500px;
    height:400px;
    background:rgba(78,94,150,.13);
    right:-10%;
    bottom:-8%
}

.why .wrap {
    position:relative;
    z-index:2
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

@media(max-width:880px) {
    .why-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:560px) {
    .why-grid {
        grid-template-columns:1fr
    }

}

.wcell {
    background:var(--white);
    border:1px solid #EAEEF7;
    border-radius:16px;
    padding:28px;
    
    box-shadow:0 1px 2px rgba(40,48,73,.05), 0 14px 28px -18px rgba(40,48,73,.28);
    
    transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)
}

.wcell:hover {
    border-color:var(--brand-2);
    transform:translateY(-3px);
    box-shadow:var(--shadow-lift)
}

.wcell h4 {
    font-family:"Archivo",sans-serif;
    font-size:17px;
    font-weight:700;
    font-stretch:94%;
    margin-bottom:22px;
    letter-spacing:-.02em
}

.wcell p {
    font-size:14.5px;
    color:var(--text-2);
    line-height:1.66
}

.wic {
    width:34px;
    height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    
    background:var(--wash);
    border:1px solid rgba(40,48,73,.12);
    color:var(--navy)
}

.quote-wrap {
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:26px;
    margin-top:22px;
    align-items:center
}

@media(max-width:880px) {
    .quote-wrap {
        grid-template-columns:1fr
    }

}

.bubble {
    background:var(--navy);
    color:#fff;
    border-radius:20px 20px 20px 5px;
    padding:28px 30px;
    position:relative;
    box-shadow:var(--shadow-lift)
}

.bubble::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-14px;
    width:28px;
    height:15px;
    background:var(--navy);
    
    clip-path:polygon(0 0,100% 0,0 100%)
}

.stars {
    color:#F0C25E;
    letter-spacing:4px;
    font-size:15px
}

.bubble blockquote {
    margin:14px 0 0;
    font-family:"Archivo",sans-serif;
    font-weight:600;
    font-stretch:96%;
    
    font-size:clamp(17px,2vw,21.5px);
    line-height:1.42;
    letter-spacing:-.02em;
    color:#fff
}

.bubble cite {
    display:block;
    margin-top:18px;
    font-style:normal;
    font-size:12.5px;
    color:var(--on-navy-2);
    font-family:"JetBrains Mono",monospace
}

/* ============ FAQ ============ */
.faq-head {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:end;
    justify-content:space-between;
    margin-bottom:28px
}

details.qa {
    border-top:1px solid var(--line)
}

details.qa:last-of-type {
    border-bottom:1px solid var(--line)
}

details.qa summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    
    padding-block:20px;
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    color:var(--navy);
    
    font-size:clamp(16px,1.9vw,19px);
    letter-spacing:-.02em;
    transition:color .18s
}

details.qa summary:hover {
    color:var(--brand-2)
}

details.qa summary::-webkit-details-marker {
    display:none
}

.qa-sign {
    width:26px;
    height:26px;
    flex-shrink:0;
    position:relative;
    border:1px solid var(--line);
    border-radius:8px
}

.qa-sign::before,.qa-sign::after {
    content:"";
    position:absolute;
    background:var(--text-2);
    border-radius:2px;
    transition:transform .2s var(--ease)
}

.qa-sign::before {
    left:6px;
    right:6px;
    top:11.5px;
    height:1.8px
}

.qa-sign::after {
    top:6px;
    bottom:6px;
    left:11.5px;
    width:1.8px
}

details.qa[open] .qa-sign::after {
    transform:scaleY(0)
}

details.qa[open] .qa-sign {
    border-color:var(--navy);
    background:var(--wash)
}

.qa-body {
    padding-bottom:24px;
    max-width:72ch;
    color:var(--text-2);
    font-size:15.5px
}

.tl {
    margin-top:22px;
    background:var(--paper-2);
    border:1px solid var(--line-2);
    border-radius:16px;
    padding:22px 20px 20px
}

.tl-title {
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--text-3);
    font-weight:600;
    margin-bottom:22px
}

.tl-track {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    position:relative
}

.tl-track::before {
    content:"";
    position:absolute;
    left:6px;
    right:6px;
    top:6px;
    height:2px;
    
    background:linear-gradient(90deg,var(--ok),#C9902E 62%,var(--bad))
}

.tl-stop {
    position:relative;
    padding-top:24px
}

.tl-stop::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--white);
    border:2.5px solid var(--ok)
}

.tl-stop:nth-child(3)::before {
    border-color:#C9902E
}

.tl-stop:nth-child(4)::before {
    border-color:var(--bad)
}

.tl-when {
    font-family:"JetBrains Mono",monospace;
    font-size:12.5px;
    font-weight:600;
    color:var(--navy);
    display:block;
    font-variant-numeric:tabular-nums
}

.tl-what {
    font-size:12.5px;
    color:var(--text-2);
    line-height:1.42;
    display:block;
    margin-top:4px
}

@media(max-width:640px) {
    
    .tl-track {
        grid-template-columns:1fr;
        gap:0
    }

    .tl-track::before {
        left:6px;
        right:auto;
        top:6px;
        bottom:14px;
        height:auto;
        width:2px;
        
        background:linear-gradient(180deg,var(--ok),#C9902E 62%,var(--bad))
    }

    .tl-stop {
        padding:0 0 18px 26px
    }

    .tl-stop::before {
        top:3px
    }

    .tl-stop:last-child {
        padding-bottom:0
    }

}

/* ============ final CTA — the single navy anchor ============ */
.final {
    background:var(--navy-deep);
    color:var(--on-navy);
    position:relative;
    /* Clip decorations without creating an internally scrollable section. */
    overflow: clip;
}

.final .ledger {
    background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px)
}

.final .glow.f1 {
    width:640px;
    height:500px;
    background:rgba(78,94,150,.32);
    left:-8%;
    top:-12%
}

.final .glow.f2 {
    width:520px;
    height:420px;
    background:rgba(78,94,150,.20);
    right:-10%;
    bottom:-20%
}

.final .formcard {
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.16);
    color:#fff
}

.final .formcard h3 {
    color:#fff
}

.final .formcard .sub,.final .field label {
    color:var(--on-navy-2)
}

.final .field input,.final .field select {
    background:rgba(0,0,0,.22);
    border-color:rgba(255,255,255,.16);
    color:#fff
}

.final .field input:focus,.final .field select:focus {
    background:rgba(0,0,0,.34);
    border-color:#9BA5CC
}

.final .field select option {
    color:#1C2238;
    background:#fff
}

.final .formcard .btn-primary {
    background:#C9D2EA;
    color:var(--navy);
    border-color:#C9D2EA
}

.final .formcard .btn-primary:hover {
    background:#fff
}

.final .form-foot {
    color:var(--on-navy-2)
}

.final .form-foot a {
    color:#fff
}

.final-grid {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:clamp(30px,5vw,62px);
    align-items:start;
    position:relative;
    z-index:2
}

.final h2 {
    color:#fff;
    font-size:clamp(27px,3.7vw,44px);
    margin-block:14px 16px;
    font-stretch:85%
}

.final .lede {
    color:var(--on-navy-2)
}

.final .eyebrow {
    color:#B9C3E4
}

.final .eyebrow::before {
    background:#B9C3E4
}

.final .btn-primary {
    background:#fff;
    color:var(--navy);
    border-color:#fff;
    box-shadow:0 8px 24px -12px rgba(0,0,0,.7)
}

.final .btn-primary:hover {
    background:var(--wash)
}

.final .btn-glass {
    background:rgba(255,255,255,.07);
    color:#fff;
    border-color:var(--navy-line)
}

.final .btn-glass:hover {
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.28)
}

.final-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px
}

.assure {
    list-style:none;
    margin:30px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px
}

.assure li {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:14.5px;
    color:var(--on-navy-2)
}

@media(max-width:940px) {
    .final-grid {
        grid-template-columns:1fr
    }

}

/* ============ help strip ============ */
.help {
    background:var(--wash);
    border-top:1px solid var(--line);
    padding-block:30px
}

.help-in {
    display:flex;
    flex-wrap:wrap;
    gap:16px 26px;
    align-items:center;
    justify-content:space-between
}

.help-in p {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    font-size:clamp(16px,1.9vw,19px);
    
    color:var(--navy);
    letter-spacing:-.02em;
    max-width:60ch
}

.help-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}

/* ============ forms ============ */
.formcard {
    scroll-margin-top:92px;
    background:var(--white);
    color:var(--text);
    border-radius:20px;
    border:1px solid var(--line-2);
    padding:26px;
    box-shadow:var(--shadow-lift)
}

.formcard h3 {
    font-size:22px;
    font-stretch:92%
}

.formcard .sub {
    font-size:14px;
    color:var(--text-2);
    margin-top:7px
}

.field {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:15px
}

.field label {
    font-size:12.5px;
    font-weight:600;
    color:var(--text-2)
}

.field input,.field select {
    font-family:inherit;
    font-size:15px;
    color:var(--text);
    background:var(--paper-2);
    
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:12px;
    width:100%;
    transition:border-color .18s,background .18s
}

.field input:focus,.field select:focus {
    border-color:var(--navy);
    outline:none;
    background:var(--white)
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

@media(max-width:540px) {
    .form-row {
        grid-template-columns:1fr
    }

}

.formcard .btn {
    width:100%;
    margin-top:20px
}

.form-foot {
    text-align:center;
    font-size:13px;
    color:var(--text-2);
    margin-top:13px
}

.form-foot a {
    font-weight:600;
    color:var(--navy)
}

.form-done {
    display:none;
    text-align:center;
    padding:34px 10px
}

.form-done.show {
    display:block
}

.form-done .tick {
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--ok-wash);
    color:var(--ok);
    display:grid;
    place-items:center;
    margin:0 auto 16px
}

.form-done h4 {
    font-family:"Archivo",sans-serif;
    font-size:20px;
    margin:0 0 7px;
    font-stretch:92%
}

.form-done p {
    font-size:14px;
    color:var(--text-2)
}

form.hide {
    display:none
}

/* ============ footer ============ */
.contactstrip {
    background:var(--white);
    padding-block:clamp(44px,5vw,70px)
}

.contact-in {
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:clamp(24px,4vw,56px);
    align-items:center
}

@media(max-width:780px) {
    .contact-in {
        grid-template-columns:1fr
    }

}

.contactstrip h2 {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    
    font-size:clamp(21px,2.3vw,26px);
    letter-spacing:-.03em;
    color:var(--navy);
    margin-bottom:12px
}

.contactstrip p {
    font-size:clamp(15px,1.6vw,18px);
    line-height:1.6;
    color:var(--text-2);
    max-width:56ch
}

.contact-acts {
    display:flex;
    flex-direction:column;
    gap:12px
}

.contact-acts .btn {
    justify-content:center;
    width:100%;
    border-radius:12px;
    padding:15px 22px
}

.btn-soft {
    background:#D9E0F2;
    color:var(--navy);
    border-color:#D9E0F2
}

.btn-soft:hover {
    background:#C9D2EA
}

footer {
    background:var(--navy-deep);
    color:var(--on-navy-2);
    padding-block:48px 34px;
    position:relative;
    overflow:hidden
}

footer .ledger {
    background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px)
}

footer .brand-name {
    color:#fff
}

.foot-grid {
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:36px;
    position:relative;
    z-index:2
}

.foot-grid p {
    font-size:14.5px;
    line-height:1.6;
    max-width:44ch;
    margin-top:16px
}

.foot-grid h5 {
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#fff;
    font-weight:600;
    margin:0 0 15px
}

.foot-grid ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px
}

.foot-grid a {
    text-decoration:none;
    font-size:14.5px;
    transition:color .18s
}

.foot-grid a:hover {
    color:#fff
}

.foot-bottom {
    margin-top:36px;
    padding-top:22px;
    border-top:1px solid var(--navy-line);
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    
    justify-content:space-between;
    font-size:13px;
    position:relative;
    z-index:2
}

@media(min-width:761px) {
    .foot-grid {
        align-items:start;
    }

    .foot-brand .brand {
        align-items:flex-start;
    }

    /* Remove the logo PNG's transparent top/bottom padding at its 250px display width. */
    .foot-brand .brand img {
        display:block;
        margin-block:-18.85px -11.89px;
    }
}

@media(max-width:760px) {
    .foot-grid {
        grid-template-columns:1fr 1fr
    }
    
    .foot-brand {
        grid-column:1/-1
    }

}

/* ================= FLOATING REVIEWS WIDGET ================= */
.grw {
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:80;
    
    padding-bottom:env(safe-area-inset-bottom,0px);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px
}

@media(max-width:700px) {
    .grw {
        right:16px;
        bottom:88px
    }

}

.grw-tab {
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    
    background:var(--white);
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 16px 9px 12px;
    
    box-shadow:var(--shadow-lift);
    font-family:inherit;
    
    transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)
}

.grw-tab:hover {
    transform:translateY(-2px);
    border-color:var(--brand-2)
}

.grw-stars {
    display:flex;
    gap:2px;
    color:#F0C25E
}

.grw-score {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    font-size:16px;
    
    letter-spacing:-.03em;
    color:var(--navy);
    line-height:1
}

.grw-label {
    font-family:"Figtree",sans-serif;
    font-size:13px;
    color:var(--text-2);
    line-height:1.2;
    text-align:left
}

.grw-label b {
    display:block;
    font-weight:600;
    color:var(--navy);
    font-size:13px
}

.grw-chev {
    width:14px;
    height:14px;
    color:var(--text-3);
    transition:transform .22s var(--ease)
}

.grw[data-open="true"] .grw-chev {
    transform:rotate(180deg)
}

/* modal */
.grw-scrim {
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(20,26,43,.58);
    backdrop-filter:blur(3px);
    
    display:grid;
    place-items:center;
    padding:24px
}

@media (prefers-reduced-motion: no-preference) {
    
    .grw-scrim {
        animation:grwFade .2s var(--ease) both
    }

    @keyframes grwFade {
        from {
            opacity:0
        }
        
        to {
            opacity:1
        }

    }

}

.grw-modal {
    width:min(52vw,760px);
    max-height:86vh;
    background:var(--white);
    border-radius:20px;
    
    box-shadow:0 40px 90px -30px rgba(12,16,30,.7);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative
}

@media(max-width:1100px) {
    .grw-modal {
        width:min(86vw,680px)
    }

}

@media(max-width:620px) {
    .grw-scrim {
        padding:12px
    }
    
    .grw-modal {
        width:100%;
        max-height:92vh
    }

    .grw-head {
        padding:22px 20px 18px
    }
    
    .grw-head .btn {
        margin-left:0;
        width:100%
    }

    .grw-item {
        padding:20px
    }
    
    .grw-note {
        padding:12px 20px
    }

}

@media (prefers-reduced-motion: no-preference) {
    
    .grw-modal {
        animation:grwPop .26s var(--ease) both
    }

    @keyframes grwPop {
        from {
            opacity:0;
            transform:translateY(14px) scale(.98)
        }
        
        to {
            opacity:1;
            transform:none
        }

    }

}

.grw-head {
    padding:26px 72px 22px 28px;
    border-bottom:1px solid var(--line-2);
    
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:18px
}

.grw-brand {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    font-size:22px;
    
    letter-spacing:-.035em;
    color:var(--navy);
    display:flex;
    align-items:center;
    gap:9px
}

.grw-slot {
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:8px;
    
    border:1px dashed var(--line);
    color:var(--text-3);
    font-family:"JetBrains Mono",monospace;
    font-size:8px;
    letter-spacing:.06em
}

.grw-rate {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:9px
}

.grw-big {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:80%;
    font-size:30px;
    line-height:1;
    
    letter-spacing:-.05em;
    color:var(--navy);
    font-variant-numeric:tabular-nums
}

.grw-stars {
    display:flex;
    gap:2px;
    color:#F0C25E
}

.grw-count {
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:.1em;
    color:var(--text-3)
}

.grw-head .btn {
    margin-left:auto;
    flex-shrink:0
}

.grw-close {
    position:absolute;
    right:20px;
    top:20px;
    width:34px;
    height:34px;
    border-radius:10px;
    cursor:pointer;
    
    background:var(--white);
    border:1px solid var(--line);
    color:var(--text-2);
    display:grid;
    place-items:center;
    z-index:3
}

.grw-close:hover {
    border-color:var(--text-2);
    color:var(--navy)
}

.grw-list {
    overflow-y:auto;
    padding:4px 0;
    flex:1
}

.grw-item {
    padding:22px 28px
}

.grw-item + .grw-item {
    border-top:1px solid var(--line-2)
}

.grw-by {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:12px
}

.grw-av {
    width:44px;
    height:44px;
    border-radius:50%;
    flex-shrink:0;
    display:grid;
    place-items:center;
    
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-size:17px;
    color:#fff;
    letter-spacing:-.02em
}

.grw-who {
    display:block;
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:-.02em;
    color:var(--navy)
}

.grw-when {
    display:block;
    margin-top:3px;
    font-size:12.5px;
    color:var(--text-3)
}

.grw-item p {
    font-size:14.5px;
    line-height:1.6;
    color:var(--text-2)
}

.grw-item .grw-stars {
    margin-bottom:10px
}

.grw-src {
    margin-top:14px;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.1em;
    
    text-transform:uppercase;
    color:var(--text-3)
}

.grw-item.is-slot {
    background:var(--paper-2)
}

.grw-item.is-slot .grw-av {
    background:var(--line);
    color:var(--text-3)
}

.grw-item.is-slot .grw-who,.grw-item.is-slot p {
    color:var(--text-3)
}

.grw-item.is-slot .grw-stars {
    color:var(--line)
}

.grw-note {
    padding:14px 28px;
    background:var(--wash);
    border-top:1px solid var(--line-2);
    
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--brand-2)
}

/* ============ mobile bar ============ */
.mobar {
    display:none
}

@media(max-width:700px) {
    
    .mobar {
        display:grid;
        grid-template-columns:1fr 1.25fr;
        gap:10px;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:70;
        
        background:color-mix(in srgb,var(--white) 94%,transparent);
        backdrop-filter:blur(14px);
        border-top:1px solid var(--line);
        
        padding:11px 16px;
        padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))
    }

    .mobar .btn {
        width:100%;
        padding:12px 8px;
        font-size:14.5px
    }

    body {
        padding-bottom:0
    }

    footer {
        padding-bottom:114px
    }
    
    /* sticky-bar gutter, in the footer's own colour */
    
}

/* ============ motion ============ */
.hero-note svg {
    stroke:var(--ok)
}

.assure svg {
    stroke:#fff
}

@media (prefers-reduced-motion: no-preference) {
    
    .rise {
        animation:rise .7s var(--ease) both
    }

    .rise-1 {
        animation-delay:.05s
    }
    
    .rise-2 {
        animation-delay:.12s
    }
    
    .rise-3 {
        animation-delay:.19s
    }

    .rise-4 {
        animation-delay:.26s
    }
    
    .rise-5 {
        animation-delay:.33s
    }

    @keyframes rise {
        from {
            opacity:0;
            transform:translateY(14px)
        }
        
        to {
            opacity:1;
            transform:none
        }

    }

}

@media (prefers-reduced-motion: reduce) {
    * {
        animation:none!important;
        transition:none!important
    }

}

/* ===== scattered tints — colour distributed, not banked on one side ===== */
:root {
    
    --t1-bg:#E4E9F7;
    --t1-ink:#2B3660;
    --t1-line:rgba(43,54,96,.16);
    
    --t2-bg:#DEEFEB;
    --t2-ink:#1A5B53;
    --t2-line:rgba(26,91,83,.16);
    
    --t3-bg:#F7EDDE;
    --t3-ink:#78551F;
    --t3-line:rgba(120,85,31,.18);

}

.bento.rev {
    grid-template-columns:minmax(0,1.6fr) minmax(0,.92fr)
}

.bento.rev .pain {
    order:2
}

@media(max-width:900px) {
    .bento.rev .pain {
        order:0
    }

}

.svc.t1 {
    background:var(--t1-bg);
    border-color:var(--t1-line)
}

.svc.t1 h4 {
    color:var(--t1-ink)
}

.svc.t1 .tag {
    color:var(--t1-ink);
    opacity:.72
}

.svc.t1 p {
    color:var(--t1-ink);
    opacity:.82
}

.svc.t2 {
    background:var(--t2-bg);
    border-color:var(--t2-line)
}

.svc.t2 h4 {
    color:var(--t2-ink)
}

.svc.t2 .tag {
    color:var(--t2-ink);
    opacity:.72
}

.svc.t2 p {
    color:var(--t2-ink);
    opacity:.82
}

.svc.t3 {
    background:var(--t3-bg);
    border-color:var(--t3-line)
}

.svc.t3 h4 {
    color:var(--t3-ink)
}

.svc.t3 .tag {
    color:var(--t3-ink);
    opacity:.72
}

.svc.t3 p {
    color:var(--t3-ink);
    opacity:.82
}

.svc.nv {
    background:var(--navy);
    border-color:var(--navy)
}

.svc.nv h4 {
    color:#fff
}

.svc.nv .tag {
    color:#B9C3E4
}

.svc.nv p {
    color:var(--on-navy-2)
}

.svc.nv::before {
    background:#fff
}

/* ===== layered glass icons ===== */
.gicon {
    position:relative;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    margin-bottom:14px
}

.wcell .gicon {
    width:44px;
    height:44px;
    margin-bottom:28px
}

.gicon .gl {
    position:absolute;
    border-radius:15px;
    transition:transform .32s var(--ease)
}

.gicon .gl-1 {
    inset:0;
    transform:rotate(-9deg);
    
    background:linear-gradient(150deg,rgba(78,94,150,.30),rgba(78,94,150,.08));
    
    border:1px solid rgba(255,255,255,.75);
    
    box-shadow:0 8px 18px -10px rgba(40,48,73,.55), inset 0 1px 0 rgba(255,255,255,.95)
}

.gicon .gl-2 {
    inset:5px;
    border-radius:12px;
    transform:rotate(7deg);
    
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(6px);
    
    border:1px solid rgba(255,255,255,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,1)
}

.gicon svg {
    position:relative;
    z-index:2;
    color:var(--navy)
}

.svc:hover .gl-1,.wcell:hover .gl-1 {
    transform:rotate(-15deg) scale(1.04)
}

.svc:hover .gl-2,.wcell:hover .gl-2 {
    transform:rotate(12deg)
}

.t1 .gicon .gl-1 {
    background:linear-gradient(150deg,rgba(43,54,96,.32),rgba(43,54,96,.08))
}

.t1 .gicon svg {
    color:var(--t1-ink)
}

.t2 .gicon .gl-1 {
    background:linear-gradient(150deg,rgba(26,91,83,.32),rgba(26,91,83,.08))
}

.t2 .gicon svg {
    color:var(--t2-ink)
}

.t3 .gicon .gl-1 {
    background:linear-gradient(150deg,rgba(120,85,31,.32),rgba(120,85,31,.08))
}

.t3 .gicon svg {
    color:var(--t3-ink)
}

.nv .gicon .gl-1 {
    background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.08));
    border-color:rgba(255,255,255,.35);
    box-shadow:none
}

.nv .gicon .gl-2 {
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.26);
    box-shadow:none
}

.nv .gicon svg {
    color:#fff
}

.wic {
    display:none
}

/* ===== about: software plates ===== */
.plates {
    grid-column:1/-1;
    margin-top:40px
}

.plate-row {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:12px
}

@media(max-width:820px) {
    .plate-row {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

.plate {
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    
    min-height:112px;
    display:grid;
    place-items:center;
    gap:9px;
    align-content:center;
    padding:20px 16px;
    text-align:center;
    
    transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)
}

.plate:hover {
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.20);
    transform:translateY(-3px)
}

.plate-name {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:88%;
    font-size:clamp(20px,2.2vw,27px);
    
    letter-spacing:-.035em;
    color:#fff;
    line-height:1
}

.plate-tp {
    gap:11px
}

.tp-stars {
    display:flex;
    gap:5px;
    color:#F0C25E
}

.tp-label {
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:.14em;
    
    text-transform:uppercase;
    color:var(--on-navy-2)
}

.creds .creds-line {
    margin-top:22px;
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    
    font-size:clamp(16px,1.8vw,19px);
    letter-spacing:-.022em;
    color:#fff;
    line-height:1.4
}

.creds .stack-label {
    color:var(--on-navy-2)
}

/* ===== problems: illustrated bento ===== */
.pgrid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px
}

@media(max-width:900px) {
    .pgrid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:600px) {
    .pgrid {
        grid-template-columns:1fr
    }

}

.pcard {
    border-radius:18px;
    padding:20px;
    border:1px solid var(--line-2);
    background:var(--white);
    box-shadow:var(--shadow);
    
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
    overflow:hidden;
    
    transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)
}

.pcard:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift)
}

.pcard.c1,.pcard.c3,.pcard.c5 {
    background:#FCFDFE;
    border-color:#E6EAF4
}

.pcard.c2,.pcard.c4 {
    background:#F4FAF6;
    border-color:#DCEBE1
}

.pcard {
    --ink:#5B6BA8;
    --soft:rgba(120,136,196,.62)
}

.ill {
    height:170px;
    border-radius:13px;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    
    background:rgba(255,255,255,.72);
    
    border:1px solid rgba(120,136,196,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,1)
}

.ill svg {
    width:100%;
    height:100%
}

.st-a,.st-b {
    transition:opacity .34s var(--ease)
}

.st-b {
    opacity:0
}

.pcard:hover .st-a,.pcard:focus-within .st-a {
    opacity:0
}

.pcard:hover .st-b,.pcard:focus-within .st-b {
    opacity:1
}

@media (hover:none) {
    
    .st-a {
        animation:sw-a 7s var(--ease) infinite
    }

    .st-b {
        animation:sw-b 7s var(--ease) infinite
    }

    @keyframes sw-a {
        0%,42% {
            opacity:1
        }
        
        54%,92% {
            opacity:0
        }
        
        100% {
            opacity:1
        }

    }

    @keyframes sw-b {
        0%,42% {
            opacity:0
        }
        
        54%,92% {
            opacity:1
        }
        
        100% {
            opacity:0
        }

    }

}

.p-prob {
    display:none
}

.p-prob .t {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    font-size:16.5px;
    letter-spacing:-.02em;
    
    color:var(--ink);
    text-decoration:line-through;
    text-decoration-color:var(--bad);
    text-decoration-thickness:1.6px
}

.p-fix {
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:14px;
    line-height:1.5;
    color:var(--ink);
    opacity:.88;
    
    padding-top:12px;
    border-top:1px dashed var(--soft)
}

.pcta {
    border-radius:18px;
    padding:26px;
    background:var(--t1-bg);
    border:1px solid var(--t1-line);
    
    color:var(--navy);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    text-align:center;
    position:relative;
    overflow:hidden
}

.pcta .ill {
    display:none
}

.pcta p {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:92%;
    font-size:20px;
    color:var(--navy);
    letter-spacing:-.025em;
    position:relative;
    z-index:2
}

.pcta .btn {
    position:relative;
    z-index:2;
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
    border-radius:999px;
    padding:14px 26px
}

.pcta .btn:hover {
    background:var(--navy)
}

/* ===== review ===== */
.reviewband {
    background:var(--white);
    padding-block:clamp(54px,6vw,86px) 0
}

.reviewband .review {
    margin-top:0
}

#faq {
    background:var(--white);
    padding-top:clamp(54px,6vw,86px)
}

.review {
    margin-top:22px;
    border-radius:22px;
    background:var(--navy);
    color:#fff;
    position:relative;
    overflow:hidden;
    
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:0;
    box-shadow:var(--shadow-lift)
}

@media(max-width:880px) {
    .review {
        grid-template-columns:1fr
    }

}

.review::before {
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    right:-14%;
    top:-56%;
    
    background:radial-gradient(circle,rgba(120,134,190,.22),transparent 68%)
}

.rv-main {
    padding:clamp(30px,4vw,52px);
    position:relative;
    z-index:2
}

.rv-q {
    display:block;
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-size:96px;
    line-height:.62;
    
    color:rgba(255,255,255,.22);
    user-select:none
}

.rv-stars {
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:20px
}

.rv-stars .s {
    color:#F0C25E;
    display:flex;
    gap:3px
}

.rv-stars b {
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.15em;
    
    text-transform:uppercase;
    color:var(--on-navy-2);
    font-weight:600
}

.rv-main blockquote {
    margin:16px 0 0;
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:94%;
    
    font-size:clamp(19px,2.3vw,27px);
    line-height:1.3;
    letter-spacing:-.03em;
    color:#fff
}

.rv-side {
    position:relative;
    z-index:2;
    padding:clamp(28px,3.4vw,52px);
    display:flex;
    flex-direction:column;
    
    justify-content:center;
    gap:28px
}

@media(max-width:880px) {
    .rv-side {
        padding-top:0
    }

}

.rv-by {
    display:flex;
    align-items:center;
    gap:13px
}

.rv-av {
    width:40px;
    height:40px;
    border-radius:50%;
    flex-shrink:0;
    display:grid;
    place-items:center;
    
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.25);
    color:#fff
}

.rv-by b {
    font-family:"Archivo",sans-serif;
    font-size:14.5px;
    font-weight:700;
    color:#fff;
    display:block;
    letter-spacing:-.02em
}

.rv-by small {
    display:block;
    margin-top:3px;
    font-family:"JetBrains Mono",monospace;
    font-size:9.5px;
    
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--on-navy-2)
}

.rv-side .btn {
    background:#fff;
    color:var(--navy);
    border-color:#fff;
    width:100%
}

.rv-side .btn:hover {
    background:var(--wash)
}

/* ================= DEADLINE MAPPER ================= */
.deadlines {
    background:var(--navy);
    color:#fff;
    position:relative;
    overflow:hidden
}

.deadlines .wrap {
    position:relative;
    z-index:2
}

.deadlines .eyebrow {
    color:#B9C3E4;
    justify-content:center
}

.deadlines .eyebrow::before {
    background:#B9C3E4
}

.dl-head {
    text-align:center;
    max-width:64ch;
    margin-inline:auto
}

.dl-head h2 {
    color:#fff;
    font-size:clamp(28px,3.9vw,46px);
    font-stretch:85%;
    margin-block:14px 16px
}

.dl-head p {
    color:var(--on-navy-2);
    font-size:clamp(15px,1.55vw,18px);
    line-height:1.58;
    max-width:56ch;
    margin-inline:auto
}

.dl-bar {
    margin:30px auto 0;
    max-width:560px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    border-radius:15px;
    padding:10px
}

.dl-bar label {
    flex:1 1 100%;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.14em;
    
    text-transform:uppercase;
    color:#8A95BC;
    padding:4px 6px 0
}

.dl-bar input[type="date"] {
    flex:1 1 200px;
    min-width:0;
    color-scheme:dark;
    
    font-family:"JetBrains Mono",monospace;
    font-size:15px;
    color:#fff;
    
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.16);
    border-radius:11px;
    padding:13px 14px
}

.dl-bar input[type="date"]:focus {
    outline:none;
    border-color:#4FD6A0;
    background:rgba(0,0,0,.34)
}

.dl-bar .btn {
    flex:0 0 auto;
    background:#fff;
    color:var(--navy);
    border-color:#fff
}

.dl-bar .btn:hover {
    background:var(--wash)
}

.dl-hint {
    margin-top:14px;
    text-align:center;
    font-size:13.5px;
    color:#6E7AA3
}

.dl-hint b {
    color:#8FE8C4;
    font-weight:600
}

/* the rail — three stops left to right, pressure building */
.dl-rail {
    margin-top:clamp(38px,5vw,60px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    
    gap:18px;
    position:relative;
    padding-top:42px
}

.dl-rail::before {
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:8px;
    height:2px;
    
    background:linear-gradient(90deg,#4FD6A0,#4FD6A0 30%,#F0C25E 62%,#F4816A)
}

.dl-stop {
    position:relative;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    
    border-radius:16px;
    padding:22px;
    display:flex;
    flex-direction:column;
    
    transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)
}

.dl-stop:hover {
    background:rgba(255,255,255,.085);
    border-color:rgba(255,255,255,.22);
    transform:translateY(-3px)
}

.dl-stop::before {
    content:"";
    position:absolute;
    left:0;
    top:-42px;
    width:17px;
    height:17px;
    border-radius:50%;
    
    background:var(--navy);
    border:3px solid var(--dot,#4FD6A0)
}

.dl-rule {
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.13em;
    
    text-transform:uppercase;
    color:var(--dot,#4FD6A0)
}

.dl-title {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:92%;
    font-size:19px;
    
    letter-spacing:-.024em;
    color:#fff;
    margin-block:9px 8px
}

.dl-desc {
    font-size:14px;
    color:var(--on-navy-2);
    line-height:1.5
}

/* results stay out until a date is submitted */
.dl-date,.dl-risk {
    display:none
}

.is-mapped .dl-date {
    display:block;
    font-family:"JetBrains Mono",monospace;
    font-size:16px;
    font-weight:600;
    
    color:#fff;
    margin-top:12px;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em
}

.is-mapped .dl-risk {
    display:block;
    margin-top:auto;
    padding:12px 14px;
    border-radius:0 9px 9px 0;
    
    background:rgba(244,129,106,.11);
    border-left:3px solid #F4816A;
    
    font-size:13px;
    color:#F8B7A6;
    line-height:1.5
}

.dl-risk b {
    color:#F4816A;
    font-weight:600
}

.is-mapped .dl-stop {
    padding-bottom:22px
}

.is-mapped .dl-desc {
    margin-bottom:16px
}

@media (prefers-reduced-motion: no-preference) {
    
    .is-mapped .dl-date,.is-mapped .dl-risk {
        animation:rise .5s var(--ease) both
    }

    .is-mapped .dl-stop:nth-child(2) .dl-date,.is-mapped .dl-stop:nth-child(2) .dl-risk {
        animation-delay:.07s
    }

    .is-mapped .dl-stop:nth-child(3) .dl-date,.is-mapped .dl-stop:nth-child(3) .dl-risk {
        animation-delay:.14s
    }

}

@media(max-width:860px) {
    
    .dl-rail {
        grid-template-columns:1fr;
        gap:0;
        padding-top:0
    }

    .dl-rail::before {
        left:8px;
        right:auto;
        top:10px;
        bottom:24px;
        height:auto;
        width:2px;
        
        background:linear-gradient(180deg,#4FD6A0,#4FD6A0 30%,#F0C25E 62%,#F4816A)
    }

    .dl-stop {
        margin:0 0 14px 34px
    }

    .dl-stop::before {
        left:-34px;
        top:22px
    }

}

#services {
    position:relative;
    overflow:hidden
}

#services::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    
    background:radial-gradient(ellipse 70% 60% at 85% 8%, rgba(247,250,255,.9), transparent 70%)
}

#services > .wrap {
    position:relative;
    z-index:2
}

/* ================= SERVICES · three columns ================= */
/* ---- services: one row of tabs, one panel ---- */
.stabs {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-bottom:20px
}

.stabs button {
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-weight:500;
    font-size:13px;
    
    line-height:1.5;
    letter-spacing:-.005em;
    color:var(--text-2);
    background:var(--white);
    
    border:1px solid transparent;
    border-radius:14px;
    padding:17px 16px;
    cursor:pointer;
    text-align:center;
    
    box-shadow:0 1px 2px rgba(40,48,73,.04);
    
    transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)
}

.stabs button:hover {
    color:var(--navy);
    box-shadow:0 2px 10px -4px rgba(40,48,73,.22)
}

.stabs button[aria-selected="true"] {
    background:var(--navy);
    color:#fff;
    box-shadow:none
}

@media(max-width:900px) {
    .stabs {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:520px) {
    .stabs {
        grid-template-columns:1fr
    }

}

.spanel {
    background:var(--white);
    border:1px solid var(--line-2);
    border-radius:24px;
    
    padding:clamp(24px,3vw,38px);
    box-shadow:var(--shadow)
}

.spanel-head {
    display:flex;
    flex-wrap:wrap;
    gap:12px 36px;
    align-items:baseline;
    
    padding-bottom:24px;
    margin-bottom:26px;
    border-bottom:1px solid var(--line-2)
}

.spanel-head h3 {
    font-family:"Archivo",sans-serif;
    font-weight:800;
    font-stretch:88%;
    
    font-size:clamp(21px,2.4vw,27px);
    letter-spacing:-.028em;
    color:var(--navy)
}

.spanel-head .ystrap {
    margin-top:0;
    flex:1 1 340px;
    max-width:62ch
}

.spanel .ysvc {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 36px;
    margin-top:0
}

@media(max-width:760px) {
    .spanel .ysvc {
        grid-template-columns:1fr
    }

}

.spanel .d {
    font-size:14px;
    line-height:1.55
}

.spanel .yic {
    width:36px;
    height:36px
}

.spanel .yic i.a {
    inset:0;
    transform:none;
    border-radius:10px;
    border:0
}

.spanel .yic i.b {
    display:none
}

.spanel .ysvc li {
    gap:14px
}

@media (prefers-reduced-motion: no-preference) {
    
    .spanel {
        animation:spanelIn .28s var(--ease) both
    }

    @keyframes spanelIn {
        from {
            opacity:0;
            transform:translateY(8px)
        }
        
        to {
            opacity:1;
            transform:none
        }

    }

}

.svc-foot {
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:18px
}

.svc-foot p {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-stretch:92%;
    font-size:19px;
    
    letter-spacing:-.025em;
    color:var(--navy)
}

#services .sec-head {
    max-width:none
}

.svc3 .ycell {
    background:#F7F9FD;
    border-color:var(--line-2);
    padding:26px 24px
}

.svc3 .ycell > h3 {
    margin-top:0;
    font-size:20px
}

.ystrap {
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    line-height:1.72;
    margin-top:11px
}

.s-blue .ystrap {
    color:#4E5E96
}

.s-sand .ystrap {
    color:#8A6420
}

.s-teal .ystrap {
    color:#1A5B53
}

.s-plum .ystrap {
    color:#5B4A7A
}

.yic.plum i.a {
    background:#E4DEF0
}

.yic.plum svg {
    color:#5B4A7A
}

.ysvc-cta {
    background:var(--wash);
    border-color:rgba(40,48,73,.14);
    justify-content:center;
    gap:16px
}

.ysvc-cta h3 {
    margin-top:0;
    font-size:20px
}

.ysvc-cta p {
    font-size:14.5px;
    color:var(--text-2);
    line-height:1.55
}

.ysvc-cta .btn {
    align-self:flex-start;
    margin-top:4px
}

.svc3 .ysvc {
    margin-top:24px;
    gap:18px
}

.yic.blue i.a {
    background:#DDE3F2
}

.yic.blue svg {
    color:#2B3660
}

.yic.sand i.a {
    background:#EFE0C9
}

.yic.sand svg {
    color:#78551F
}

.yic.teal i.a {
    background:#CFE5E0
}

.yic.teal svg {
    color:#1A5B53
}

.svc3 {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:stretch
}

@media(max-width:1000px) {
    .svc3 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:680px) {
    .svc3 {
        grid-template-columns:1fr
    }

}

/* ================= SERVICES · "The Year" bento ================= */
.ybento {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px
}

.yhero {
    grid-column:1/3;
    grid-row:1/3
}

.ym {
    grid-column:3;
    grid-row:1
}

.yq {
    grid-column:3;
    grid-row:2
}

.ya {
    grid-column:1;
    grid-row:3
}

.yo {
    grid-column:2;
    grid-row:3
}

.ycta {
    grid-column:3;
    grid-row:3
}

@media(max-width:940px) {
    
    .ybento {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .yhero {
        grid-column:1/3;
        grid-row:1
    }

    .ym {
        grid-column:1;
        grid-row:2
    }
    
    .yq {
        grid-column:2;
        grid-row:2
    }

    .ya {
        grid-column:1;
        grid-row:3
    }
    
    .yo {
        grid-column:2;
        grid-row:3
    }

    .ycta {
        grid-column:1/3;
        grid-row:4
    }

}

@media(max-width:620px) {
    
    .ybento {
        grid-template-columns:1fr
    }

    .yhero,.ym,.yq,.ya,.yo,.ycta {
        grid-column:1;
        grid-row:auto
    }

}

.ycell {
    border-radius:18px;
    border:1px solid var(--line-2);
    background:var(--white);
    padding:22px 20px;
    
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)
}

.ycell:not(.yhero):hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
    border-color:var(--brand-2)
}

.ykicker {
    display:flex;
    align-items:center;
    gap:9px;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--brand-2)
}

.ykicker::before {
    content:"";
    width:14px;
    height:1.5px;
    background:currentColor;
    flex-shrink:0
}

.ycell > h3 {
    font-family:"Archivo",sans-serif;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.025em;
    margin-top:10px
}

.ycell.t2 .ykicker {
    color:var(--t2-ink)
}

.ycell.t3 .ykicker {
    color:var(--t3-ink)
}

.ysvc {
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px
}

.ysvc li {
    display:flex;
    gap:12px;
    align-items:flex-start
}

.ysvc b {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:-.02em;
    display:block;
    color:var(--navy)
}

.ysvc span.d {
    font-size:13.5px;
    line-height:1.48;
    color:var(--text-2);
    display:block;
    margin-top:2px
}

.yic {
    position:relative;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    margin-top:1px
}

.yic i {
    position:absolute;
    border-radius:11px
}

.yic i.a {
    inset:0;
    transform:rotate(-9deg);
    background:#DDE3F2;
    border:1px solid rgba(255,255,255,.85)
}

.yic i.b {
    inset:4px;
    border-radius:9px;
    transform:rotate(7deg);
    background:#fff;
    border:1px solid #EDF0F8
}

.yic svg {
    position:relative;
    z-index:2;
    color:var(--navy)
}

.t2 .yic i.a {
    background:#CFE5E0
}

.t2 .yic svg {
    color:var(--t2-ink)
}

.t3 .yic i.a {
    background:#EFE0C9
}

.t3 .yic svg {
    color:var(--t3-ink)
}

/* ---- hero: the company year ---- */
.yhero {
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
    padding:26px 26px 22px;
    box-shadow:var(--shadow-lift)
}

.yhero .ykicker {
    color:#A9B4D8
}

.yhero h3 {
    color:#fff;
    font-size:clamp(20px,2.3vw,25px)
}

.yhero .sub {
    font-size:14.5px;
    color:var(--on-navy-2);
    margin-top:8px;
    max-width:48ch
}

.ypick {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:18px
}

.ypick label {
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--on-navy-2)
}

.ypick select {
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-size:15px;
    color:#fff;
    
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.25);
    border-radius:10px;
    padding:9px 12px;
    
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    
    background-position:calc(100% - 17px) 53%, calc(100% - 12px) 53%;
    
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    padding-right:34px
}

.ypick select:focus {
    outline:2px solid #4FD6A0;
    outline-offset:2px
}

.ypick select option {
    color:#1C2238;
    background:#fff
}

.rail {
    position:relative;
    margin-top:30px;
    padding-top:76px;
    padding-bottom:8px
}

.rail-line {
    position:absolute;
    left:0;
    right:0;
    top:76px;
    height:2px;
    
    background:linear-gradient(90deg,#4FD6A0 0%, #4FD6A0 68%, #F0C25E 80%, #F4816A 100%)
}

.pin {
    position:absolute;
    top:76px;
    transform:translate(-50%,0)
}

.pin::before {
    content:"";
    position:absolute;
    left:50%;
    top:-5px;
    width:12px;
    height:12px;
    border-radius:50%;
    
    transform:translateX(-50%);
    background:var(--navy);
    border:2.5px solid var(--pc,#4FD6A0)
}

.pin-lab {
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    width:150px;
    text-align:center
}

.pin.at-start .pin-lab {
    left:0;
    transform:none;
    text-align:left;
    width:120px
}

.pin.at-end .pin-lab {
    left:auto;
    right:0;
    transform:none;
    text-align:right;
    width:120px
}

.pin-when {
    display:block;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.11em;
    
    text-transform:uppercase;
    color:var(--on-navy-2)
}

.pin-what {
    display:block;
    font-family:"Archivo",sans-serif;
    font-weight:700;
    font-size:13.5px;
    color:#fff;
    letter-spacing:-.015em;
    margin-top:3px
}

.pin-date {
    display:block;
    font-family:"JetBrains Mono",monospace;
    font-size:11.5px;
    color:var(--pc,#4FD6A0);
    margin-top:3px;
    font-variant-numeric:tabular-nums
}

.pin.below .pin-lab {
    bottom:auto;
    top:16px
}

.pin.below::before {
    top:-5px
}

.band {
    margin-top:104px;
    border-radius:11px;
    border:1px dashed rgba(79,214,160,.45);
    background:rgba(79,214,160,.09);
    
    padding:10px 14px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px
}

.band b {
    font-family:"Archivo",sans-serif;
    font-size:13.5px;
    font-weight:700;
    color:#8FE8C4;
    letter-spacing:-.015em
}

.band span {
    font-size:13px;
    color:var(--on-navy-2)
}

.band .q {
    margin-left:auto;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.12em;
    
    text-transform:uppercase;
    color:#8FE8C4;
    border:1px solid rgba(79,214,160,.4);
    border-radius:999px;
    padding:4px 10px
}

.rail-note {
    margin-top:12px;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.1em;
    
    text-transform:uppercase;
    color:#6E7AA3
}

@media(max-width:760px) {
    
    .rail {
        padding-top:0;
        margin-top:22px
    }

    .rail-line {
        left:6px;
        right:auto;
        top:6px;
        bottom:10px;
        height:auto;
        width:2px;
        
        background:linear-gradient(180deg,#4FD6A0 0%,#4FD6A0 68%,#F0C25E 80%,#F4816A 100%)
    }

    .pin {
        position:relative;
        left:auto !important;
        top:auto;
        transform:none;
        padding:0 0 18px 28px
    }

    .pin::before {
        left:0;
        top:2px;
        transform:none
    }

    .pin-lab {
        position:static;
        transform:none;
        text-align:left !important;
        width:auto !important
    }

    .pin.at-start .pin-lab,.pin.at-end .pin-lab {
        left:auto;
        right:auto
    }

    .band {
        margin-top:10px
    }

}

/* ---- cta cell ---- */
.ycta {
    background:var(--wash);
    border-color:rgba(40,48,73,.14);
    justify-content:center;
    gap:16px
}

.ycta h3 {
    font-family:"Archivo",sans-serif;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.025em;
    margin:0
}

.ycta p {
    font-size:14px;
    color:var(--text-2);
    line-height:1.5
}

.ycta .btn {
    align-self:flex-start
}

/* ═══════════════ phone ═══════════════
a designed layout, not desktop rules collapsing. three moves:
the hero loses its form, the tab strip and the problem cards scroll
sideways instead of stacking. ~11,900px -> ~7,500px.          */
.hero-rating {
    display:none
}

@media(max-width:820px) {
    
    :root {
        --gut:20px
    }

    /* ── hero ── */
    .alert {
        font-size:12px;
        padding:9px 16px;
        line-height:1.46
    }

    .hero {
        padding-block:30px 40px
    }

    .hero h1 {
        font-size:clamp(32px,8.4vw,40px);
        margin-bottom:16px
    }

    .hero .lede {
        font-size:16px;
        line-height:1.56
    }

    .hero-actions {
        margin-top:24px;
        gap:10px
    }

    .hero-actions .btn {
        width:100%;
        justify-content:center
    }

    .hero-note {
        margin-top:22px;
        padding-top:20px;
        gap:10px
    }

    /* 700px of form nobody scrolls past — the CTAs jump to the one at the end */
    .hero .formcard {
        display:none
    }

    /* the floating pill lands on top of the hero copy at this width */
    .grw {
        display:none
    }

    .hero-rating {
        display:flex;
        align-items:center;
        gap:11px;
        width:100%;
        margin-top:24px;
        
        background:var(--white);
        border:1px solid var(--line);
        border-radius:16px;
        
        padding:13px 15px;
        cursor:pointer;
        font-family:inherit;
        text-align:left;
        
        box-shadow:0 1px 2px rgba(40,48,73,.05), 0 12px 24px -16px rgba(40,48,73,.3)
    }

    .hero-rating b {
        font-family:"Archivo",sans-serif;
        font-weight:800;
        font-stretch:88%;
        
        font-size:19px;
        letter-spacing:-.03em;
        color:var(--navy);
        line-height:1
    }

    .hr-stars {
        display:flex;
        gap:2px;
        color:#F0C25E;
        flex:none
    }

    .hr-txt {
        font-size:13px;
        font-weight:600;
        color:var(--navy);
        line-height:1.25;
        flex:1
    }

    .hr-txt i {
        display:block;
        font-style:normal;
        font-weight:400;
        color:var(--text-2);
        font-size:12.5px;
        margin-top:1px
    }

    .hr-chev {
        width:16px;
        height:16px;
        color:var(--text-3);
        flex:none
    }

    /* ── services: the strip scrolls, the way it would in an app ── */
    .stabs {
        display:flex;
        grid-template-columns:none;
        gap:9px;
        overflow-x:auto;
        
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        
        margin-inline: 0;
        padding: 12px 4px;
        scroll-padding-inline: 4px;
        margin-bottom:16px
    }

    .stabs::-webkit-scrollbar {
        display:none
    }

    .stabs button {
        flex:0 0 auto;
        scroll-snap-align: center;
        max-width: calc(100% - 8px);
        white-space: normal;
        
        padding:14px 20px;
        font-size:12.5px;
        border-radius:12px
    }

    .spanel {
        padding:24px 20px;
        border-radius:20px
    }

    .spanel-head {
        gap:10px
    }

    .spanel-head h3 {
        font-size:24px
    }

    /* mono is hard work as body copy at this size */
    .spanel-head .ystrap {
        font-family:"Figtree",sans-serif;
        font-size:14.5px;
        line-height:1.6;
        
        letter-spacing:0;
        color:var(--text-2);
        flex:1 1 100%
    }

    .spanel .ysvc {
        grid-template-columns:1fr;
        gap:22px
    }

    .svc-foot {
        margin-top:24px;
        gap:14px
    }

    .svc-foot .btn {
        width:100%;
        justify-content:center
    }

    /* ── problems: snap carousel, full bleed, next card peeking ── */
    .pgrid {
        display:flex;
        grid-template-columns:none;
        gap:12px;
        overflow-x:auto;
        
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        
        margin-inline:calc(var(--gut)*-1);
        padding:4px var(--gut) 12px
    }

    .pgrid::-webkit-scrollbar {
        display:none
    }

    .pcard,.pcta {
        flex:0 0 78%;
        scroll-snap-align:center
    }

    .pcard:hover {
        transform:none;
        box-shadow:var(--shadow)
    }

    .ill {
        height:148px
    }

    .pcta {
        padding:24px 20px;
        gap:18px
    }

    /* ── why: icon beside the text, not above it — six stacked cards
    otherwise run to 1,450px of mostly air ── */
    .why-grid {
        gap:11px
    }

    .wcell {
        padding:20px;
        display:grid;
        grid-template-columns:auto 1fr;
        column-gap:15px;
        row-gap:5px
    }

    .wcell .gicon {
        width:38px;
        height:38px;
        margin-bottom:0;
        grid-row:1/3;
        align-self:start
    }

    .wcell h4 {
        grid-column:2;
        margin-bottom:0;
        align-self:center;
        font-size:16.5px
    }

    .wcell p {
        grid-column:2;
        font-size:14px;
        line-height:1.6
    }

    /* ── review, faq, close ── */
    .review {
        border-radius:18px
    }

    .reviewband {
        padding-block:clamp(40px,9vw,60px) 0
    }

    #faq {
        padding-top:clamp(40px,9vw,60px)
    }

    .faq-head .btn {
        width:100%;
        justify-content:center
    }

    .final-grid {
        gap:28px
    }

    .final-actions .btn {
        width:100%;
        justify-content:center
    }

    .contact-acts {
        width:100%
    }

}

@media(max-width:560px) {
    
    .pcard,.pcta {
        flex-basis:84%
    }

    .hero-rating {
        padding:12px 13px;
        gap:9px
    }

}


/* Supplied brand images retain their original artwork. */
.menu-toggle,
.mobile-navigation {
    display: none;
}

@media (max-width: 900px) {
    .nav-in > .nav-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--navy);
        cursor: pointer;
    }

    .menu-toggle span {
        width: 23px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .mobile-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        padding: 16px 20px 20px;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .mobile-navigation > a:not(.btn) {
        padding: 12px 0;
        color: var(--navy);
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-navigation .btn {
        align-self: flex-start;
        margin-top: 4px;
    }
}

nav .brand img {
    width: 171px;
    height: 40px;
    object-fit: contain;
}

footer .brand img {
    width: 250px;
    max-width: 100%;
    height: auto;
}

.plate img {
    max-width: 80%;
    max-height: 64px;
    object-fit: contain;
}

.form-done .btn {
    margin: 12px 4px 0;
}

/* Preserve the previously requested neutral form focus appearance. */
.field input:focus,
.field select:focus,
.final .field input:focus,
.final .field select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--line);
}

/* Keep the supplied Google artwork in the reviews dialog. */
.grw-logo {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Keep confirmations readable on the dark consultation card. */
.final .form-done.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final .form-done h4 {
    color: #FFFFFF;
}

.final .form-done p {
    color: var(--on-navy);
}

/* Section links clear the sticky header and leave a little breathing room. */
html.faq-position-lock {
    overflow-anchor: none;
}

html {
    scroll-behavior: smooth;
    /* --section-scroll-offset: calc(112px + env(safe-area-inset-top, 0px)); */
}

header[id],
section[id],
.formcard[id],
form[id] {
    scroll-margin-top: var(--section-scroll-offset);
}

@media (max-width: 900px) {
    /* iPhone browsers zoom into focused form fields smaller than 16px. */
    .field input,
    .field select {
        font-size: 16px;
    }

    html {
        /* --section-scroll-offset: calc(90px + env(safe-area-inset-top, 0px)); */
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Consultation form delivery feedback. */
.consultation-honey { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
.consultation-error { color: #a12020; background: #fff2f2; border: 1px solid #efcccc; border-radius: 8px; padding: 12px; margin: 0 0 16px; font-size: 14px; }
.consultation-error[hidden] { display: none !important; }
#form-top button[disabled], #form-bottom button[disabled] { cursor: wait; opacity: .7; }