/* Structure and motion follow frontal.so: 64px nav, 1280px framed shell, display serif, mono labels in bracket corners,
   layered SVG illustrations with hover states, reveal sweeps. Skin: Oriel Forest Morning. */
:root{
  --bg:#F4F3EE; --bg-2:#EDECE5; --surface:#FBFAF7; --white:#FFFFFF; --fg:#141B17; --fg-2:#38423D; --mut:#68706B; --faint:#9AA19C;
  --line:rgba(20,27,23,.10); --line-2:rgba(20,27,23,.16); --line-3:rgba(20,27,23,.30);
  --acc:#1F5A43; --acc-soft:#DCEBE1; --hi:#CFE6D8;
  --night:#0D1210; --ink:#18211C; --ink-fg:#ECEFEC; --nfg:#ECEFEC; --nmut:#8D9892; --nline:rgba(236,239,236,.09);
  --nacc:#9CC7B3; --nsurf:#18211C; --nlogo:none; --nglyph:invert(1); --plogo:brightness(0); --cta-glow:rgba(46,122,88,.20);
  --serif:'Instrument Serif',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --shell:1280px; --gut:clamp(24px,5.5556vw,80px); --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.shell{width:calc(100% - var(--gut)*2);max-width:var(--shell);margin-inline:auto;border-inline:1px solid var(--line);position:relative}
.band{border-bottom:1px solid var(--line)}
.full{margin:0 calc(var(--gut)*-1)}

/* bracket corners (four real elements so they can animate) */
.bk{position:relative}
.bk > i.c{position:absolute;width:7px;height:7px;border-color:var(--bc,currentColor);border-style:solid;border-width:0;transition:transform .5s var(--ease)}
.bk > i.c.tl{top:-5px;left:-5px;border-top-width:1px;border-left-width:1px}
.bk > i.c.tr{top:-5px;right:-5px;border-top-width:1px;border-right-width:1px}
.bk > i.c.bl{bottom:-5px;left:-5px;border-bottom-width:1px;border-left-width:1px}
.bk > i.c.br{bottom:-5px;right:-5px;border-bottom-width:1px;border-right-width:1px}
.bk:hover > i.c.tl{transform:translate(-2px,-2px)}.bk:hover > i.c.tr{transform:translate(2px,-2px)}.bk:hover > i.c.bl{transform:translate(-2px,2px)}.bk:hover > i.c.br{transform:translate(2px,2px)}
.rv-b > i.c{opacity:0;transform:scale(.4)}
.rv-b.in > i.c{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}

.eyebrow{align-self:flex-start;width:max-content;display:inline-flex;align-items:center;height:24px;padding:0 9px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);--bc:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .18s,color .18s,scale .14s var(--ease)}
.btn:active{scale:.97}
.btn-dark{background:var(--fg);color:var(--bg);--bc:var(--fg)}
.btn-dark:hover{background:#22302A}
.link{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);display:inline-flex;gap:8px;align-items:center}
.link svg{transition:transform .2s var(--ease)}
.link:hover svg{transform:translateX(3px)}
.h2{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.06;letter-spacing:-.03em}
.h2 .dim{color:var(--faint)}
.lede{color:var(--mut);font-size:15px;line-height:1.6;max-width:48ch}
.sec{padding:120px var(--gut) 0}
.sec-h{max-width:620px;margin:0 auto 64px;text-align:center}
.sec-h .h2{margin:18px 0 14px}
.sec-h .lede{margin-inline:auto}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.sec-row .h2{margin-top:18px;max-width:16ch}
.cap{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rv{opacity:0;translate:0 12px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.rv.in{opacity:1;translate:0 0}

/* NAV */
.nav{position:sticky;top:0;z-index:60;height:64px;background:rgba(244,243,238,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{height:64px;width:calc(100% - var(--gut)*2);max-width:var(--shell);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.menu{display:flex;gap:4px;font-size:14px;color:var(--fg-2);height:100%;align-items:center}
.menu > a,.menu > .dd > button{height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.menu > a:hover,.menu > .dd > button:hover{color:var(--acc)}
.dd{position:relative;height:100%;display:flex;align-items:center}
.dd button svg{transition:transform .2s var(--ease);opacity:.55}
.dd:hover button svg,.dd:focus-within button svg{transform:rotate(180deg)}
.mega{position:absolute;top:56px;left:-14px;width:440px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 30px 60px -30px rgba(20,27,23,.4);padding:8px;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .18s,translate .25s var(--ease),visibility .18s}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;translate:0 0}
.mega a{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px;transition:background .15s}
.mega a:hover{background:var(--bg)}
.mega b{font-weight:500;font-size:14px;color:var(--fg)}
.mega span{display:block;font-size:13px;color:var(--mut);line-height:1.45;margin-top:2px}
.mega svg{margin-top:2px;color:var(--acc)}
.mega .all{border-bottom:1px solid var(--line);margin-bottom:6px;align-items:center}
@media (max-width:920px){.menu{display:none}}

/* HERO */
.hero{position:relative;height:736px;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.waves .base path{fill:none;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s var(--ease) forwards}
.waves .flow path{fill:none;stroke-width:1.2;stroke-dasharray:.06 .94;stroke-dashoffset:1;animation:flow 6s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{to{stroke-dashoffset:0}}
.hero-copy{width:min(680px,100% - 48px);text-align:center;display:flex;flex-direction:column;align-items:center;background:radial-gradient(closest-side,var(--bg) 55%,transparent);padding:40px 20px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:60px;line-height:1;letter-spacing:-.035em;margin-top:24px;text-wrap:balance}
.hero .lede{font-size:16px;margin:18px auto 52px;max-width:46ch;text-wrap:balance}
.glint{background:linear-gradient(90deg,var(--acc),#3E9470 25%,#5FA07F 50%,#3E9470 75%,var(--acc));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glint 7s linear infinite}
@keyframes glint{to{background-position:-200% 0}}
.book{display:flex;width:min(420px,100%);height:44px;padding:4px 4px 4px 16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);--bc:var(--fg-2)}
.book input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:var(--fg);outline:none}
.book input::placeholder{color:var(--faint)}
.hero-note{margin-top:18px;font-size:13px;color:var(--mut)}
.hero-note b{color:var(--fg);font-weight:500}
@media (max-width:760px){.hero{height:auto;padding:90px 0 80px}.hero h1{font-size:40px}}

/* PROOF STRIP */
.strip{display:grid;grid-template-columns:repeat(5,1fr)}
.strip > div{padding:26px 24px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:150px;transition:background .25s}
.strip > div:hover{background:var(--surface)}
.strip > div:last-child{border-right:0}
.strip b{font-family:var(--serif);font-weight:400;font-size:38px;letter-spacing:-.035em;line-height:1}
.strip p{font-size:13px;color:var(--fg-2);margin-top:10px;line-height:1.45}
.strip .cap{margin-top:auto;padding-top:14px}
@media (max-width:1000px){.strip{grid-template-columns:1fr 1fr}.strip > div{border-bottom:1px solid var(--line)}}

/* WHAT YOU GET: three illustrations */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.cols3 > div{border-right:1px solid var(--line);padding:36px 34px 0;min-height:500px;display:flex;flex-direction:column;overflow:hidden}
.cols3 > div:last-child{border-right:0}
.ico{width:28px;height:28px;display:grid;place-items:center;color:var(--fg);--bc:var(--fg-2)}
.cols3 h3{font-size:16px;font-weight:500;margin:24px 0 8px}
.cols3 p{color:var(--mut);font-size:14.5px;max-width:34ch}
.stage-ill{flex:1;position:relative;display:grid;place-items:center;min-height:300px}
/* team */
.team{position:relative;width:300px;cursor:default}
.team .arcs{position:absolute;left:-200px;right:-200px;top:-30px;height:300px;width:calc(100% + 400px);pointer-events:none}
.team .hd{position:relative;display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 18px 36px -24px rgba(20,27,23,.35);--bc:var(--fg)}
.team .hd img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.team .hd b{display:block;font-weight:500;font-size:13.5px}
.team .hd span{color:var(--mut);font-size:12px}
.team .hd .live{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#3E9470;box-shadow:0 0 0 4px rgba(62,148,112,.15)}
.team .rows{position:relative;margin-top:12px;display:grid;gap:4px}
.team .rows div{display:flex;justify-content:space-between;padding:9px 14px;background:rgba(255,255,255,.72);box-shadow:0 0 0 1px var(--line);font-size:13px;transition:transform .6s var(--ease),background .3s}
.team .rows div span:last-child{color:var(--mut)}
.team:hover .rows div{transform:translateX(4px)}
.team:hover .rows div:nth-child(2){transition-delay:.04s}.team:hover .rows div:nth-child(3){transition-delay:.08s}.team:hover .rows div:nth-child(4){transition-delay:.12s}
/* system */
.sys{width:100%;max-width:380px;overflow:visible;cursor:default}
.sys .plate{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sys:hover .plate{transform:translateY(calc(var(--i) * 6px))}
.sys:hover .plate.top{transform:translateY(-8px)}
.sys text{font-family:var(--mono);font-size:10px;letter-spacing:.06em;fill:var(--fg);fill-opacity:.55}
.sys .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.sys.in .draw{stroke-dashoffset:0}
.sys .pin{opacity:0;transition:opacity .6s .6s}
.sys.in .pin{opacity:1}
.sys .cellpulse{animation:cell 3.2s ease-in-out infinite}
@keyframes cell{0%,100%{fill-opacity:.25}50%{fill-opacity:.85}}
/* tools globe */
.tools{position:relative;width:300px;height:300px;cursor:default}
.tools .globe{position:absolute;inset:22px;transition:transform 1.2s var(--ease)}
.tools .core{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--ink);display:grid;place-items:center;box-shadow:0 20px 40px -18px rgba(20,27,23,.6);transition:transform .9s var(--ease)}
.tools .core img{width:56px}
.tools:hover .globe{transform:scale(.96) rotate(-6deg)}
.tools:hover .core{transform:scale(1.07)}
.tools .t{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 10px 22px -14px rgba(20,27,23,.4);display:grid;place-items:center;transition:transform .9s var(--ease)}
.tools .t img{width:20px;height:20px;opacity:.82}
.tools:hover .t{transform:translate(calc(var(--dx) * 8px),calc(var(--dy) * 8px))}
.tools .orbit{animation:spin 60s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:980px){.cols3{grid-template-columns:1fr}.cols3 > div{border-right:0;border-bottom:1px solid var(--line)}}

/* HOW IT WORKS */
.flow-wrap{border-top:1px solid var(--line);position:relative;padding:72px var(--gut) 64px;background-image:radial-gradient(rgba(20,27,23,.11) 1px,transparent 1px);background-size:16px 16px}
.flow{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:36px;align-items:center}
.card{background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 22px 44px -28px rgba(20,27,23,.35);font-size:12.5px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-3),0 30px 50px -28px rgba(20,27,23,.4)}
.ph{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.ph .mono{color:var(--mut);font-size:10px}
.acct .r{display:grid;grid-template-columns:20px 1fr 26px 46px;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.acct .r:last-child{border-bottom:0}
.lg{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;font:600 9px/1 var(--sans);color:#fff}
.tier{font-family:var(--mono);font-size:10px;color:var(--mut)}
.fitbar{height:4px;background:var(--bg-2);overflow:hidden}
.fitbar i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.in .fitbar i{transform:scaleX(1)}
.mid{position:relative;height:270px;display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:center}
.chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 8px;background:var(--white);box-shadow:0 0 0 1px var(--line-2);font-size:12px;color:var(--fg-2);white-space:nowrap;transition:transform .4s var(--ease)}
.chip:hover{transform:translateX(3px)}
.chip img{width:14px;height:14px;opacity:.85}
.chip.on{box-shadow:0 0 0 1px rgba(31,90,67,.45);color:var(--fg)}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.flowsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.flowsvg path{fill:none;stroke:rgba(20,27,23,.28);stroke-width:1}
.flowsvg path.go{stroke:#1F5A43;stroke-dasharray:3 5;animation:dash 1s linear infinite}
.flowsvg rect{fill:#141B17}
.flow{position:relative;z-index:1}
.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lines path{fill:none;stroke:var(--line-3);stroke-width:1}
.lines path.go{stroke:var(--acc);stroke-dasharray:3 5;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.tag-top,.tag-bot{position:absolute;left:50%;transform:translateX(-50%);padding:6px 10px;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--mut);background:var(--bg);--bc:var(--faint);white-space:nowrap;text-transform:uppercase}
.tag-top{top:26px}.tag-bot{bottom:22px}
.pipe .bars{display:flex;gap:4px;padding:14px 12px 12px}
.pipe .bars i{height:14px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.in .pipe .bars i{transform:scaleX(1)}
.pipe .legend{padding:0 12px 12px;display:grid;gap:7px}
.pipe .legend div{display:flex;justify-content:space-between;font-size:12px}
.pipe .legend span:last-child{font-family:var(--mono);font-size:11px;color:var(--mut)}
.pipe .next{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:12px}
.pipe .next span:last-child{background:var(--bg);padding:4px 8px;font-size:11px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps4 > div{padding:28px 28px 40px;border-right:1px solid var(--line)}
.steps4 > div:last-child{border-right:0}
.steps4 h3{font-size:15px;font-weight:500;margin:14px 0 6px}
.steps4 p{font-size:14px;color:var(--mut)}
@media (max-width:980px){.flow{grid-template-columns:1fr}.mid{height:auto;padding:40px 0}.lines,.tag-top,.tag-bot{display:none}.steps4{grid-template-columns:1fr 1fr}}

/* SERVICES: workflow canvas */
.white{background:var(--white)}
.tabsbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabsbar button{position:relative;height:56px;font-size:14px;color:var(--mut);border-right:1px solid var(--line);transition:color .2s,background .2s}
.tabsbar button:last-child{border-right:0}
.tabsbar button:hover{color:var(--fg)}
.tabsbar button[aria-selected="true"]{color:var(--ink-fg);background:var(--ink)}
.tabsbar button[aria-selected="true"]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc)}
.tabbody{display:grid;grid-template-columns:.86fr 1.14fr;min-height:520px}
.tabbody .l{padding:44px var(--gut) 40px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.tabbody .l h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:16px 0 12px;max-width:22ch;line-height:1.25}
.tabbody .l p{color:var(--mut);font-size:15.5px;max-width:42ch;line-height:1.6}
.tabbody .l .link{margin-top:20px}
.tabbody ol{list-style:none;margin-top:auto;padding-top:28px;display:grid;gap:10px;font-size:15px;color:var(--fg)}
.tabbody ol li{display:flex;gap:16px}
.tabbody ol li span{font-family:var(--mono);font-size:11px;color:var(--faint);width:18px;padding-top:4px}
.canvas{position:relative;overflow:hidden;background-color:var(--surface);background-image:radial-gradient(rgba(20,27,23,.12) 1px,transparent 1px);background-size:14px 14px;padding:52px 36px 200px}
.cv{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0;align-items:start;max-width:600px}
.cv .sigs{display:flex;flex-direction:column;gap:14px;padding-top:12px;align-items:flex-end;position:relative;z-index:1}
.cv .sig{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 10px;background:var(--white);border-radius:999px;box-shadow:0 0 0 1px var(--line-2),0 8px 18px -12px rgba(20,27,23,.35);font-size:13.5px;white-space:nowrap}
.cv .sig img{width:16px;height:16px}
.cv .sig .em{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;background:#E7F25A;font-size:10px}
.cv .wire{width:44px;height:120px;flex:none;position:relative}
.cv .wire svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mail{position:relative;z-index:1;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 26px 50px -30px rgba(20,27,23,.45);font-size:14px;line-height:1.55;width:100%;max-width:350px;opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.mail.on{opacity:1;translate:0 0}
.mail .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mail .mh b{font-weight:500;display:block}
.mail .mh span{color:var(--mut);font-size:13px}
.pill{font-size:12.5px;font-weight:500;color:var(--acc);background:var(--acc-soft);padding:4px 10px;border-radius:999px;white-space:nowrap}
.mail .mb{padding:16px}
.mail .mb p+p{margin-top:10px}
.mail mark{background:var(--hi);color:inherit;padding:1px 3px}
.mail .mf{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.mail .mf img{width:26px;height:26px;border-radius:4px;object-fit:cover}
.mail .mf span{color:var(--mut);font-size:13px;flex:1}
.mail .mf .ed{flex:none;font-size:13px;padding:6px 10px;box-shadow:0 0 0 1px var(--line-2)}
.mail .mf .ap{flex:none;font-size:13px;padding:6px 10px;background:var(--ink);color:var(--ink-fg);display:inline-flex;gap:6px;align-items:center}
.seq{position:absolute;z-index:2;right:24px;bottom:22px;width:250px;background:var(--ink);color:var(--nfg);padding:16px 18px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);opacity:0;translate:0 10px;transition:opacity .5s .25s var(--ease),translate .6s .25s var(--ease)}
.seq.on{opacity:1;translate:0 0}
.seq .k{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--nmut);text-transform:uppercase}
.seq .k i{width:16px;height:16px;border-radius:3px;background:#5B5BD6;display:inline-block}
.seq b{display:block;font-weight:500;font-size:22px;letter-spacing:-.02em;margin:10px 0 2px}
.seq span{color:var(--nmut);font-size:13px}
.seq .rw{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--nline);font-size:13px}
.seq .rw span:last-child{color:var(--nfg)}
.cv-cap{position:absolute;left:40px;bottom:16px}
@media (max-width:980px){.tabsbar{grid-template-columns:1fr 1fr}.tabbody{grid-template-columns:1fr}.tabbody .l{border-right:0;border-bottom:1px solid var(--line)}.cv{grid-template-columns:1fr}.cv .sigs{align-items:flex-start;margin-bottom:16px}.cv .wire{display:none}.seq{position:relative;right:auto;bottom:auto;margin-top:16px}}

/* RESULTS */
.results{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:1px solid var(--line)}
.res{padding:36px 32px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:380px;transition:background .3s}
.res:hover{background:var(--surface)}
.res:last-child{border-right:0}
.res .big{font-family:var(--serif);font-size:64px;line-height:.95;letter-spacing:-.04em;margin:26px 0 12px}
.res p{color:var(--fg-2);font-size:15px;max-width:32ch}
.res .meas{margin-top:18px}
.res .who{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px}
.res .who span{font-size:13px;color:var(--mut)}
.res.feat{background:var(--ink);color:var(--ink-fg)}
.res.feat:hover{background:#18211C}
.res.feat .eyebrow{color:#9CC7B3;--bc:#9CC7B3}
.res.feat .big{font-size:96px}
.res.feat p{color:rgba(236,239,236,.86)}
.res.feat .cap{color:var(--nmut)}
.res.feat .who{border-color:var(--nline)}
.res.feat .who span{color:var(--nmut)}
.res.feat .link{color:#9CC7B3}
.attrib{padding:18px var(--gut);border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
@media (max-width:980px){.results{grid-template-columns:1fr}.res{border-right:0;border-bottom:1px solid var(--line)}}

/* FIRST 30 DAYS */
.pilot-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;padding-bottom:56px}
.promise{padding:24px 26px;background:var(--white);box-shadow:0 0 0 1px var(--line-2);--bc:var(--acc)}
.promise b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;letter-spacing:-.02em}
.promise p{color:var(--mut);font-size:13.5px;margin-top:8px}
.weeks{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);position:relative}
.weeks > div{padding:28px 26px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.weeks > div:last-child{border-right:0}
.weeks .w{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--acc);text-transform:uppercase}
.weeks h3{font-size:15px;font-weight:500;margin:14px 0 6px}
.weeks > div > p{font-size:14px;color:var(--mut);margin-bottom:20px}
.yd{margin-top:auto;padding:12px 14px;background:var(--acc-soft);font-size:13px;color:var(--fg-2)}
.yd .cap{color:var(--acc);display:block;margin-bottom:6px}
.prog{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--acc);transition:width 2.2s var(--ease)}
.weeks.in .prog{width:100%}
@media (max-width:980px){.pilot-top{grid-template-columns:1fr}.weeks{grid-template-columns:1fr 1fr}}

/* NIGHT (flat, line texture, no glows) */
.night{background:var(--night);color:var(--nfg)}
.night .shell{border-color:var(--nline)}
.night .lede{color:var(--nmut)}
.night .eyebrow{color:var(--nacc);--bc:var(--nacc)}
.night .h2 .dim{color:color-mix(in srgb,var(--nfg) 32%,var(--night))}
.lines-tex{background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--nfg) 3.5%,transparent) 0 1px,transparent 1px 6px)}
.tr-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:120px var(--gut) 64px;align-items:end}
.tr-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;border-top:1px solid var(--nline)}
.tr-cell{padding:30px 30px 34px;border-right:1px solid var(--nline);border-bottom:1px solid var(--nline);transition:background .3s}
.tr-cell:hover{background:color-mix(in srgb,var(--nfg) 2.5%,transparent)}
.tr-cell .ico{color:var(--nfg);--bc:color-mix(in srgb,var(--nfg) 32%,var(--night));margin-bottom:22px}
.tr-cell b{display:block;font-size:15px;font-weight:500}
.tr-cell p{color:var(--nmut);font-size:13.5px;margin-top:6px;max-width:30ch}
.tr-diagram{grid-row:span 2;display:grid;place-items:center;padding:30px;border-bottom:1px solid var(--nline)}
.tr-diagram svg{width:100%;max-width:360px}
.tr-diagram .tile{transition:transform .5s var(--ease)}
.tr-diagram:hover .tile{transform:translateY(-3px)}
@media (max-width:980px){.tr-top{grid-template-columns:1fr}.tr-grid{grid-template-columns:1fr 1fr}.tr-diagram{grid-column:span 2;grid-row:auto}}

/* FAQ */
.faq{max-width:740px;margin:0 auto;padding-bottom:120px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;cursor:pointer;font-size:15px;font-weight:500;transition:color .2s}
.faq summary:hover{color:var(--acc)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;font-family:var(--mono);color:var(--faint);transition:transform .25s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{color:var(--mut);font-size:14.5px;padding:0 40px 20px 4px}

/* CLOSING */
.final{padding:140px 24px;text-align:center}
.final h2{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.035em;max-width:15ch;margin:20px auto 0}
.final .lede{margin:16px auto 40px}
.final .book{margin:0 auto;background:color-mix(in srgb,var(--nfg) 5.0%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nfg) 20.0%,transparent);--bc:var(--nmut)}
.final .book input{color:var(--nfg)}
.final .book input::placeholder{color:var(--nmut)}
.final .btn-dark{background:var(--nfg);color:var(--night);--bc:var(--nfg)}
.final .btn-dark:hover{background:#FFFFFF}
.final .offer{margin-top:18px;font-size:13px;color:var(--nmut)}
.final .offer b{color:var(--nfg);font-weight:500}

/* FOOTER */
.foot{display:grid;grid-template-columns:1.5fr .9fr 1.2fr 1.3fr;gap:36px;padding:64px var(--gut) 40px;border-top:1px solid var(--nline)}
.foot h5{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nfg);margin-bottom:18px}
.foot li{list-style:none;font-size:14px;padding:5px 0;color:var(--nmut);transition:color .15s}
.foot li a:hover{color:var(--nfg)}
.soc{display:flex;gap:14px;margin-top:22px}
.soc a{color:var(--nmut);transition:color .15s}
.soc a:hover{color:var(--nfg)}
.contact{display:flex;gap:12px;align-items:center;padding:6px 0}
.contact img{width:38px;height:38px;object-fit:cover;transition:translate .3s var(--ease)}
.contact:hover img{translate:0 -1px}
.contact b{display:block;font-weight:500;font-size:14px;color:var(--nfg)}
.contact span{font-size:12.5px;color:var(--nmut)}
.mailrow{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:14px;color:var(--nfg)}
.mailrow i{width:38px;height:38px;display:grid;place-items:center;box-shadow:0 0 0 1px var(--nline);font-style:normal}
.talk{margin-top:36px}
.talk p{color:var(--nmut);font-size:14px;margin:-6px 0 14px}
.talk .book{height:42px;background:color-mix(in srgb,var(--nfg) 4.0%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nfg) 16.0%,transparent);--bc:color-mix(in srgb,var(--nfg) 32%,var(--night))}
.talk .book input{color:var(--nfg);font-size:13.5px}
.talk .btn{height:34px;background:var(--nfg);color:var(--night)}
.legal{display:flex;justify-content:space-between;padding:22px var(--gut);border-top:1px solid var(--nline);font-size:13px;color:var(--nmut)}
.legal a:hover{color:var(--nfg)}
.giant{position:relative;height:250px;overflow:hidden;display:grid;place-items:end center}
.giant img{width:92%;max-width:1100px;opacity:.06;margin-bottom:-70px}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.legal{flex-direction:column;gap:6px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.waves .base path{stroke-dashoffset:0}.rv{opacity:1;translate:0 0}.rv-b > i.c{opacity:1;transform:none}.mail,.seq{opacity:1;translate:0 0}}

/* ---- revision 2026-10-25: spacing, hero label, logos, pipeline, canvas connectors, footer legal ---- */
:root{--shell:1360px;--gut:clamp(20px,2.8vw,40px)}
.hero-copy .eyebrow{align-self:center}
.sec-row .h2{max-width:24ch}
.sec-row .lede{max-width:40ch}
.tools .t img{width:24px;height:24px;opacity:1;object-fit:contain}
.chip img{width:16px;height:16px;opacity:1;object-fit:contain;border-radius:3px}
.cv .sig img{width:18px;height:18px;object-fit:contain;border-radius:3px}
.brow .tools img{object-fit:contain}
.pipe .legend div span:first-child{display:inline-flex;align-items:center;gap:8px}
.pipe .legend div span:first-child::before{content:"";width:8px;height:8px;background:var(--c,#1F5A43)}
.pipe .legend div:nth-child(1){--c:#1F5A43}.pipe .legend div:nth-child(2){--c:#5E9E7E}.pipe .legend div:nth-child(3){--c:#9CC7B3}
.cv-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.cv-lines path{fill:none;stroke:rgba(20,27,23,.35);stroke-width:1}
.cv-lines path.go{stroke:#1F5A43;stroke-dasharray:3 5;animation:dash 1s linear infinite}
.cv-lines rect{fill:#141B17}
.canvas{padding-bottom:260px !important}
.seq{right:auto !important;bottom:auto !important}
.seq .k img{width:16px;height:16px;border-radius:3px}
.legal{align-items:center;gap:24px;flex-wrap:wrap}
.legal nav{display:flex;gap:22px;flex-wrap:wrap}
.legal nav a,.legal nav button{color:var(--nmut);font-size:13px;transition:color .15s}
.legal nav a:hover,.legal nav button:hover{color:var(--nfg)}
.legal .theme{display:inline-flex;align-items:center;gap:8px}
.legal .theme i{width:8px;height:8px;border-radius:50%;background:var(--nmut)}
.mega.mres{width:360px}
.legal .theme{color:var(--nmut);font-size:13px;background:none;border:0;cursor:pointer;font-family:inherit}
.legal .theme:hover{color:var(--nfg)}
.soon{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.soon > div{padding:30px var(--gut) 40px;border-right:1px solid var(--line);min-height:200px;display:flex;flex-direction:column;gap:10px}
.soon > div:last-child{border-right:0}
.soon b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.02em;line-height:1.15}
.soon p{font-size:14px;color:var(--mut)}
.pg-hero{padding:120px var(--gut) 88px;text-align:center}
.pg-hero h1{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.035em;margin:22px auto 16px;max-width:16ch}
.pg-hero .lede{margin:0 auto;font-size:16px}
.pg-hero .book{margin:32px auto 0}
@media (max-width:860px){.soon{grid-template-columns:1fr}.soon > div{border-right:0;border-bottom:1px solid var(--line)}.pg-hero h1{font-size:40px}}
.foot{grid-template-columns:1.5fr .8fr 1.1fr .9fr 1.3fr}
/* HOW IT WORKS v2: Frontal loop layout (review label, account table, signal fan, pipeline, change label) */
.flow-wrap{padding:40px var(--gut)}
.hw-fit-box{position:relative;width:100%}
.hw{position:relative;width:1260px;height:470px;transform-origin:0 0}
.hw-lines{position:absolute;left:0;top:0;width:1260px;height:100%;overflow:visible;pointer-events:none}
.hw-lines path{fill:none;stroke:rgba(20,27,23,.26);stroke-width:1}
.hw-lines path.dim{stroke:rgba(20,27,23,.2)}
.hw-lines path.act{stroke:rgba(20,27,23,.6)}
.hw-lines path.go{stroke:#1F5A43;stroke-width:1.4;stroke-dasharray:4 10;animation:dash 1.1s linear infinite}
.hw-tag{position:absolute;left:50%;transform:translateX(-50%);height:36px;padding:0 18px;display:inline-flex;align-items:center;white-space:nowrap;background:var(--bg);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);--bc:var(--fg)}
.hw-tag.bk:hover > i.c{transform:none}
.hw-top{top:22px}.hw-bot{top:412px}
.hw-card{position:absolute;top:98px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 24px 48px -30px rgba(20,27,23,.35)}
.hw-acct{left:70px;width:300px}
.hw-pipe{left:890px;width:300px}
.hw-h{display:grid;grid-template-columns:1fr 46px 62px;align-items:center;height:46px;padding:0 16px;background:var(--bg-2);border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
.hw-r{display:grid;grid-template-columns:1fr 46px 62px;align-items:center;height:42px;padding:0 16px;border-bottom:1px solid var(--line);font-size:14px}
.hw-r.act{background:#EEF4F0}
.hw-r.dim{opacity:.5}.hw-r.dim2{opacity:.26}
.hw-n{display:flex;align-items:center;gap:10px;white-space:nowrap}
.hw-lg{width:20px;height:20px;border-radius:4px;flex:none;display:grid;place-items:center;font:600 10px/1 var(--sans);color:#fff}
.hw-t{color:var(--mut);font-size:13px}
.hw-fit{display:flex;gap:3px}
.hw-fit i{width:18px;height:4px;border-radius:2px;background:var(--bg-2)}
.hw-fit i.on{background:var(--fg)}
.hw-src{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hw-ic{display:flex;gap:6px}
.hw-ic i{width:28px;height:28px;display:grid;place-items:center;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.hw-ic img{width:16px;height:16px;object-fit:contain}
.hw-pill{position:absolute;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 10px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px var(--line);font-size:14px;color:var(--mut);white-space:nowrap;opacity:.6;transition:opacity .3s}
.hw-pill:hover{opacity:1}
.hw-pill.on{background:var(--white);color:var(--fg);opacity:1;box-shadow:0 0 0 1px var(--line-3),0 14px 30px -18px rgba(20,27,23,.4)}
.hw-p1{left:560px;top:178px}.hw-p2{left:584px;top:228px}.hw-p3{left:560px;top:278px}
.hw-h2{display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 16px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.hw-h2 b{font-size:14px;font-weight:500}
.hw-h2 span{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hw-bar{display:flex;gap:4px;padding:16px 16px 12px}
.hw-bar i{height:22px;border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.in .hw-bar i{transform:scaleX(1)}
.hw-leg{display:grid;gap:2px;padding:4px 16px 14px}
.hw-leg div{display:flex;align-items:center;gap:10px;height:30px;font-size:14px;color:var(--fg)}
.hw-leg div::before{content:"";width:2px;height:18px;background:var(--c)}
.hw-leg svg{color:var(--fg-2);flex:none}
.hw-leg img{width:14px;height:14px}
.hw-next{display:flex;justify-content:space-between;align-items:center;gap:10px;height:56px;padding:0 16px;border-top:1px solid var(--line);font-size:14px}
.hw-next > span:first-child{display:inline-flex;align-items:center;gap:8px;color:var(--acc)}
.hw-np{background:var(--bg);box-shadow:0 0 0 1px var(--line);padding:6px 10px;font-size:12.5px;white-space:nowrap}
@media (max-width:760px){.hw{width:auto;height:auto;transform:none!important;margin:0!important;display:grid;gap:14px}.hw-lines,.hw-tag{display:none}.hw-card,.hw-pill{position:static}.hw-acct,.hw-pipe{width:100%}.hw-pill{justify-self:start;opacity:1}.hw-bar i{transform:none}}
.hw-acct{width:320px;left:60px}
.hw-pipe{width:320px;left:880px}
.hw-h,.hw-r{grid-template-columns:1fr 38px 64px}
.giant{height:auto;overflow:visible;display:block;padding:24px var(--gut) 40px;border-top:1px solid var(--nline)}
.giant img{display:block;width:100%;max-width:none;margin:0 auto;opacity:.07}
/* LOGO WALL (Frontal structure: 7 columns, label cell spans 3 in the top row) */
.logowall{display:grid;grid-template-columns:repeat(7,1fr)}
.logowall > div{height:112px;display:grid;place-items:center;padding:0 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.logowall > div:nth-child(7n+5),.logowall > div:nth-child(5){border-right:0}
.logowall > div:nth-child(n+6){border-bottom:0}
.logowall > div:last-child{border-right:0}
.logowall img{max-width:100%;width:auto;object-fit:contain;filter:brightness(0);opacity:.72;transition:opacity .2s}
.logowall > div:hover img{opacity:1}
.logowall .lw-k{grid-column:span 3;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.logowall .lw-k b{font-weight:500;color:var(--fg)}
@media (max-width:980px){.logowall{grid-template-columns:repeat(3,1fr)}.logowall .lw-k{grid-column:1/-1;order:-1}.logowall > div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;height:96px}}
.tools .t img{filter:grayscale(1) contrast(1.15);transition:filter .3s}
.tools .t:hover img{filter:none}
/* NAV: compact floating bar after the hero */
.nav{transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav-in{transition:max-width .5s var(--ease),height .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease),background .3s,box-shadow .3s}
.brand{display:flex;align-items:center;height:36px}
.brand .wm{display:block;height:27px;width:auto}
.brand .mk{display:none;height:24px;width:24px}
.nav.compact{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.compact .nav-in{max-width:780px;height:52px;margin-top:6px;padding:0 8px 0 18px;background:rgba(251,250,247,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line-2),0 18px 40px -26px rgba(20,27,23,.35)}
.nav.compact .brand .wm{display:none}
.nav.compact .brand .mk{display:block}
.nav.compact .mega{top:50px}
/* ---- audit pass 2026-10-25: every page, 1440 / 768 / 375 ---- */
:root{--faint:#7A827C}
.cap{line-height:1.5}
h1,h2,.h2,.lede,.pg-hero p{text-wrap:balance}
p{text-wrap:pretty}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr}
.nav-in > .btn{justify-self:end}
.nav-in > .burger{justify-self:end}
.burger{display:none;width:40px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform .25s var(--ease)}
.burger.x span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger.x span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;display:grid;max-height:calc(100vh - 64px);overflow:auto}
.mnav[hidden]{display:none}
.mnav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.mnav .btn{margin-top:16px;border:0;justify-self:start;padding:0 18px}
@media (max-width:920px){.nav-in{grid-template-columns:auto 1fr auto auto;gap:8px}.burger{display:flex;grid-column:3}.nav-in > .btn{grid-column:4}}
@media (max-width:420px){.nav-in > .btn{display:none}}
.book:focus-within{box-shadow:inset 0 0 0 1px var(--acc),0 0 0 3px var(--acc-soft)}
.final .book:focus-within,.talk .book:focus-within{box-shadow:inset 0 0 0 1px var(--nacc),0 0 0 3px color-mix(in srgb,var(--nacc) 18.0%,transparent)}
.strip b,.res .big,.nums b,.case .big,.proof .big,.trust b{letter-spacing:-.012em;font-variant-numeric:lining-nums}
.faq summary i{font-size:16px;color:var(--mut)}
.soon > div{min-height:150px}
/* footer: base 5 columns, collapse on small screens (the earlier override killed the mobile rule) */
.foot{grid-template-columns:1.6fr 1fr 1fr 1.2fr 1.4fr}
.foot a,.foot li{overflow-wrap:anywhere}
.contact img{box-shadow:0 0 0 1px var(--nline)}
.giant{padding:32px var(--gut) 36px}
.giant img{width:100%;max-width:1100px;height:auto;max-height:300px;object-fit:contain}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}
@media (max-width:560px){.foot > div:last-child{grid-column:1/-1}}
/* canvas: the deep bottom room is only needed where the sequencer card is absolutely placed */
@media (max-width:980px){.canvas{padding-bottom:28px !important}}
/* mobile forms stack so the placeholder never hides under the button */
@media (max-width:480px){.book{flex-wrap:wrap;height:auto;padding:4px;gap:4px}.book input{flex-basis:100%;height:40px;padding:0 12px}.book .btn{width:100%;height:40px}.faq details p{padding-right:16px}}
@media (max-width:640px){.weeks{grid-template-columns:1fr}.weeks > div{border-right:0;border-bottom:1px solid var(--line)}.steps4{grid-template-columns:1fr}.steps4 > div{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:980px){.pains > div,.rel a,.gets > div{border-right:0!important;border-bottom:1px solid var(--line)}}
/* service template parts */
.gets{gap:0;padding:0;border-top:1px solid var(--line)}
.gets > div{box-shadow:none;background:transparent;border-right:1px solid var(--line);padding:30px var(--gut) 36px}
.gets > div:last-child{border-right:0}
.gets > div:hover{transform:none;background:var(--surface)}
.buildt .brow:last-child{border-bottom:0}
/* about */
@media (max-width:900px){.ab-hero{grid-template-columns:minmax(0,1fr)!important}.ab-hero .r{padding:40px 20px}.portrait{width:100%;max-width:300px}.ab-hero h1{font-size:40px}.nums > div:nth-child(2n){border-right:0}.nums > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.nums p{min-height:2.9em}
/* results */
.case .k{display:flex;flex-direction:column}
.case .k .cap{margin-top:auto;padding-top:18px}
.note{padding-bottom:28px}
@media (max-width:600px){.trust .row{grid-template-columns:1fr}.trust .row div{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:860px){.svlist .go{margin-top:12px}}
/* hero sized so both logo rows sit above the fold, as on frontal.so */
.hero{height:clamp(520px,calc(100svh - 64px - 224px),760px)}
.hero .lede{margin-bottom:40px}
.logowall{border-bottom:1px solid var(--line)}
/* ---- pass 3: globe, track record tree and numbers, tools and people, FAQ cards, footer mark, resources menu ---- */
.tools .core{width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:18px;background:linear-gradient(160deg,#22302A,#141B17);box-shadow:0 0 0 1px rgba(20,27,23,.55),inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -18px rgba(20,27,23,.6)}
.tools .core img{width:34px;height:34px}
.tools .t{width:44px;height:44px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line-2),0 10px 22px -14px rgba(20,27,23,.4)}
.tools .t img{width:22px;height:22px;filter:grayscale(1) brightness(.35) contrast(1.4);opacity:.9}
.tools .t:hover img{filter:none;opacity:1}
/* track record: stack tree */
.tr-diagram{padding:44px 30px}
.stk{position:relative;width:100%;max-width:400px;margin:0 auto}
.stk-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stk-lines path{fill:none;stroke:color-mix(in srgb,var(--nfg) 18.0%,transparent);stroke-width:1}
.stk-head{position:relative;display:flex;align-items:center;gap:12px;width:280px;margin:0 auto;padding:14px 16px;background:var(--nsurf);box-shadow:0 0 0 1px color-mix(in srgb,var(--nfg) 12.0%,transparent);--bc:var(--nmut)}
.stk-head img{width:22px;height:22px}
.stk-head b{display:block;font-size:14px;font-weight:500;color:var(--nfg)}
.stk-head span{font-size:12.5px;color:var(--nmut)}
.stk-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);row-gap:22px;margin-top:44px}
.tt{display:flex;flex-direction:column;align-items:center;gap:9px}
.tt i{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--nsurf);box-shadow:0 0 0 1px color-mix(in srgb,var(--nfg) 10.0%,transparent);font-style:normal;transition:transform .4s var(--ease),background .3s}
.tt i:hover{transform:translateY(-2px);background:#202B25}
.tt img{width:26px;height:26px;object-fit:contain;filter:grayscale(1) brightness(1.9);opacity:.92}
.tt span{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmut)}
.tt.more i{background:transparent;box-shadow:none;outline:1px dashed color-mix(in srgb,var(--nacc) 50.0%,transparent);color:var(--nacc);font-size:18px}
.tt.more span{color:var(--nacc)}
.tr-nums{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--nline)}
.tr-nums > div{padding:30px 26px 32px;border-right:1px solid var(--nline)}
.tr-nums > div:last-child{border-right:0}
.tr-nums b{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.012em;color:var(--nfg)}
.tr-nums p{font-size:13.5px;color:var(--nmut);margin-top:12px;max-width:24ch}
@media (max-width:980px){.tr-nums{grid-template-columns:1fr 1fr}.tr-nums > div{border-bottom:1px solid var(--nline)}.tr-nums > div:nth-child(2n){border-right:0}}
/* tools and people */
.tlogos{display:grid;grid-template-columns:repeat(9,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tlogos > div{height:92px;display:grid;place-items:center;border-right:1px solid var(--line)}
.tlogos > div:last-child{border-right:0}
.tlogos img{width:28px;height:28px;object-fit:contain;filter:grayscale(1) brightness(.35) contrast(1.3);opacity:.8;transition:filter .3s,opacity .3s}
.tlogos > div:hover img{filter:none;opacity:1}
.quotes{display:grid;grid-template-columns:repeat(3,1fr)}
.quotes figure{padding:34px 32px 36px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:26px}
.quotes figure:last-child{border-right:0}
.quotes blockquote{font-size:15px;line-height:1.62;color:var(--fg-2)}
.quotes figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.quotes .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg);font:500 12px/1 var(--sans)}
.quotes b{display:block;font-size:14px;font-weight:500}
.quotes em{font-style:normal;font-size:12.5px;color:var(--mut)}
@media (max-width:980px){.tlogos{grid-template-columns:repeat(3,1fr)}.tlogos > div{border-bottom:1px solid var(--line)}.quotes{grid-template-columns:1fr}.quotes figure{border-right:0;border-bottom:1px solid var(--line)}}
/* FAQ: filled rows, bracket corners on the open one (frontal pattern) */
.faq details{border:0!important;background:var(--surface);margin-bottom:4px;position:relative}
.faq details:last-child{border:0!important}
.faq summary{padding:20px 22px}
.faq details p{padding:0 56px 22px 22px}
.faq details[open]{background:var(--white);box-shadow:0 0 0 1px var(--line)}
.faq details[open]::before,.faq details[open]::after{content:"";position:absolute;width:7px;height:7px;border-color:var(--fg-2);border-style:solid;pointer-events:none}
.faq details[open]::before{top:-4px;left:-4px;border-width:1px 0 0 1px}
.faq details[open]::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
/* footer mark: present, not dominant */
.giant{padding:28px var(--gut) 32px}
.giant img{max-height:150px;width:auto;max-width:100%;margin:0 auto;opacity:.08}
/* resources menu: two groups plus a featured card */
.mega.mres{width:560px;display:grid;grid-template-columns:1fr 170px;gap:8px}
.mg-cols{display:grid;grid-template-columns:1fr 1fr}
.mg-h{display:block;padding:10px 12px 4px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.mega a.mg-feat{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;background:var(--fg);color:var(--nfg)}
.mega a.mg-feat:hover{background:#22302A}
.mega a.mg-feat b{color:var(--nfg);font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.1}
.mega a.mg-feat span{color:var(--nmut);margin:0}
.mega a.mg-feat .cap{color:#9CC7B3}
.tools .t img{width:22px;height:22px;filter:none;opacity:.86}
.tools .t:hover img{filter:none;opacity:1}
.tlogos img{width:30px;height:30px;filter:none;opacity:.72}
.tlogos > div:hover img{filter:none;opacity:1}
.tt img{filter:invert(1);opacity:.88}
.tools .core img{width:62px;height:auto}
.nav.compact .brand .wm{display:block;height:22px}
.stk-head{justify-content:center;text-align:center}
.stk-lines{width:auto;height:auto}
/* resource listings */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.rgrid.g4{grid-template-columns:repeat(4,1fr)}
.rgrid article{padding:30px 30px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:background .25s}
.rgrid article:hover{background:var(--surface)}
.rgrid:not(.g4) article:nth-child(3n),.rgrid.g4 article:nth-child(4n){border-right:0}
.rgrid h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.12;letter-spacing:-.015em}
.rgrid p{font-size:14px;color:var(--mut)}
.rgrid .tag{align-self:flex-start;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:5px 8px}
.rgrid .meta{margin-top:auto;padding-top:8px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rgrid .api img{width:36px;height:36px;object-fit:contain;margin-bottom:6px}
.rgrid .api h3{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:-.01em}
.rgrid .vid .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#22302A,#0F1A15);margin-bottom:8px;display:grid;place-items:center}
.rgrid .vid .thumb i{width:46px;height:46px;border-radius:50%;background:rgba(236,239,236,.12);box-shadow:0 0 0 1px rgba(236,239,236,.25);position:relative}
.rgrid .vid .thumb i::after{content:"";position:absolute;left:18px;top:14px;border-left:13px solid #ECEFEC;border-top:9px solid transparent;border-bottom:9px solid transparent}
.rgrid .vid .dur{position:absolute;right:10px;bottom:10px;font:500 11px/1 var(--mono);color:#ECEFEC;background:rgba(0,0,0,.45);padding:4px 6px}
@media (max-width:980px){.rgrid,.rgrid.g4{grid-template-columns:1fr 1fr}.rgrid article{border-right:1px solid var(--line)!important}.rgrid article:nth-child(2n){border-right:0!important}}
@media (max-width:600px){.rgrid,.rgrid.g4{grid-template-columns:1fr}.rgrid article{border-right:0!important}}
/* pass 4 */
@media (max-width:900px){.portrait{width:100%!important;max-width:300px!important}}
.legal{display:grid;grid-template-columns:1fr auto 1fr}
.legal .theme{justify-self:end}
@media (max-width:860px){.legal{grid-template-columns:1fr;justify-items:start;gap:10px}.legal .theme{justify-self:start}}
.faq details[open]::before,.faq details[open]::after{display:none}
.faq details[open]{background:
 linear-gradient(var(--fg-2),var(--fg-2)) left top/8px 1px no-repeat,linear-gradient(var(--fg-2),var(--fg-2)) left top/1px 8px no-repeat,
 linear-gradient(var(--fg-2),var(--fg-2)) right top/8px 1px no-repeat,linear-gradient(var(--fg-2),var(--fg-2)) right top/1px 8px no-repeat,
 linear-gradient(var(--fg-2),var(--fg-2)) left bottom/8px 1px no-repeat,linear-gradient(var(--fg-2),var(--fg-2)) left bottom/1px 8px no-repeat,
 linear-gradient(var(--fg-2),var(--fg-2)) right bottom/8px 1px no-repeat,linear-gradient(var(--fg-2),var(--fg-2)) right bottom/1px 8px no-repeat,var(--white)}
.tlogos img[alt="salesforce"]{width:40px;height:40px}
.tlogos img[alt="linkedin"]{width:24px;height:24px}
.tlogos img[alt="n8n"]{width:36px}
@media (max-width:980px){.logowall > div{padding:0 12px}}
/* track record proof panel (replaces the stack tree and the number row) */
.tr-proof{width:100%;max-width:380px;padding:30px 30px 28px;background:var(--nsurf);box-shadow:0 0 0 1px color-mix(in srgb,var(--nfg) 10.0%,transparent);--bc:color-mix(in srgb,var(--nfg) 32%,var(--night))}
.tr-proof .cap{color:var(--nmut)}
.tr-big{display:block;font-family:var(--serif);font-weight:400;font-size:76px;line-height:1;letter-spacing:-.015em;color:var(--nfg);margin:16px 0 22px}
.tr-row{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--nline);align-items:baseline}
.tr-row span{font-family:var(--serif);font-size:22px;color:var(--nacc);letter-spacing:-.01em}
.tr-row p{font-size:13.5px;color:var(--nmut)}
.tr-proof .link{margin-top:16px;color:var(--nacc)}
.tr-proof .link svg{width:10px;max-width:10px}
/* ---- mobile pass 2026-10-25 ---- */
/* hero: the fold-height rule is desktop only; on phones the hero grows with its content */
@media (max-width:760px){.hero{height:auto!important;padding:64px 0 56px}.hero-copy{padding:24px 0}}
/* mobile menu: Services and Resources collapse behind toggles */
.mnav .mg{border-bottom:1px solid var(--line)}
.mnav .mg summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:15px;cursor:pointer}
.mnav .mg summary::-webkit-details-marker{display:none}
.mnav .mg summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.mnav .mg[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mnav .mg > div{display:grid;padding:0 0 8px 14px}
.mnav .mg > div a{padding:9px 0;border-bottom:0;font-size:14.5px;color:var(--fg-2)}
/* services canvas on phones: stacked, with the wires drawn as a dashed spine */
@media (max-width:980px){
  .cv .sigs{position:relative;margin-bottom:30px!important}
  .cv .sigs::after{content:"";position:absolute;left:30px;bottom:-30px;height:30px;border-left:1.5px dashed #1F5A43}
  .canvas .seq{position:relative!important;left:auto!important;top:auto!important;margin-top:30px!important}
  .canvas .seq::before{content:"";position:absolute;left:30px;top:-30px;height:30px;border-left:1.5px dashed #1F5A43}
  .cv-lines{display:none}
  .cv-cap{position:static!important;display:block;margin-top:20px}
  .mail .mf img + span{display:none}
  .mail .mf .ap{margin-left:auto}
}
/* how it works on phones: same spine between table, signals and pipeline */
@media (max-width:760px){
  .hw{gap:30px!important}
  .hw-card,.hw-pill{position:relative!important}
  .hw > .hw-pill::before,.hw > .hw-pipe::before{content:"";position:absolute;left:30px;top:-31px;height:30px;border-left:1.5px dashed rgba(20,27,23,.35)}
  .hw > .hw-p2::before,.hw > .hw-pipe::before{border-left-color:#1F5A43}
  .hw-pill{max-width:100%;white-space:normal}
}
@media (max-width:760px){.hw-card,.hw-pill{left:auto!important;top:auto!important}.hw-acct,.hw-pipe{width:100%!important}.hw{height:auto!important}}
@media (max-width:600px){.bk-steps{gap:6px!important;margin-bottom:28px!important}.bk-steps div{font-size:9px!important;letter-spacing:.05em!important}.trust .row{grid-template-columns:1fr!important}.trust .row div{border-right:0!important;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:left}.trust .row div:last-child{border-bottom:0}}
/* android pass: fill orphan grid cells, thumb-sized tap targets */
@media (max-width:980px){
  .logowall > div:last-child{grid-column:span 2}
  .tabsbar button:last-child{grid-column:1/-1;border-right:0}
}
@media (max-width:760px){
  .foot li{padding:0}
  .foot li a{display:block;padding:11px 0}
  .soc a{display:grid;place-items:center;width:44px;height:44px;margin-left:-13px}
  .legal nav a,.legal .theme{display:inline-flex;align-items:center;min-height:44px}
  .link{min-height:44px}
  .ldoc a{display:inline-block;padding:10px 0}
}

/* ---------- Resources menu, compact (frontal.so pattern): label rows, no blurbs, featured plays mosaic ---------- */
.nav-in{position:relative}


















/* ---------- theme switch (next to Book a call) ---------- */
.themesw{display:inline-flex;border:1px solid var(--line-2);background:var(--surface);height:32px;margin-left:auto}
.themesw button{width:32px;height:30px;display:grid;place-items:center;color:var(--mut);transition:color .15s,background .15s}
.themesw button:hover{color:var(--fg)}
.themesw button[aria-pressed=true]{background:var(--bg-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.nav-end{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-end .themesw{margin:0}
@media (max-width:920px){.nav-in > .nav-end{grid-column:4}}
@media (max-width:420px){.nav-end .btn{display:none}}
@media (max-width:420px){.themesw button{width:28px}}

/* testimonial photos (grayscale crops) */
.quotes img.av{object-fit:cover;background:var(--bg-2)}

/* ---------- newsletter and free resources sign-up (frontal.so free resources pattern) ---------- */
.subwrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:96px 56px}
.subcopy h1{font-family:var(--serif);font-weight:400;font-size:54px;line-height:1.02;letter-spacing:-.035em;margin:22px 0 16px;max-width:14ch}
.subcopy .lede{font-size:16px;max-width:46ch}
.sublist{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:14px}
.sublist li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;color:var(--fg-2);line-height:1.5}
.sublist svg{color:var(--acc);margin-top:3px}
.sublist b{color:var(--fg);font-weight:500}
.subcard{background:var(--surface);border:1px solid var(--line-2);padding:34px;--bc:var(--line-3)}
.subcard form{display:flex;flex-direction:column;gap:18px}
.subcard label{display:flex;flex-direction:column;gap:8px}
.subcard label span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.subcard label em{color:var(--acc);font-style:normal}
.subcard input{height:46px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font:inherit;font-size:15px;padding:0 14px;outline:0;transition:border-color .15s}
.subcard input:focus{border-color:var(--acc)}
.subcard .btn{height:46px;margin-top:4px}
.subcard .btn:disabled{opacity:.6;cursor:wait}
.subcard .hp{position:absolute;left:-9999px;width:1px;height:1px}
.subcard .fine{font-size:12.5px;color:var(--mut);text-align:center}
.sub-msg{font-size:15px;color:var(--acc);line-height:1.5}
.sub-msg.err{color:#C0563F}
@media (max-width:900px){.subwrap{grid-template-columns:1fr;padding:64px 20px;gap:40px}.subcopy h1{font-size:40px}}






/* compact nav: wide enough for the theme switch and the button, nothing wraps */
.btn{white-space:nowrap}
.nav.compact .nav-in{max-width:940px}
.nav.compact .nav-end{gap:8px}
.nav.compact .themesw{height:30px}
.nav.compact .themesw button{height:28px;width:30px}
.nav.compact .nav-end .btn{height:34px;padding:0 14px}

/* Resources menu at frontal.so scale: small labels, two narrow columns, a compact featured card */


















/* closing CTA vs footer (frontal.so pattern): the CTA sits in its own glow, a striped band closes it, the footer below is flat */
.night.lines-tex:has(.foot){background-image:none}
.final{position:relative;padding:150px 24px 170px;background:radial-gradient(60% 85% at 50% 100%,var(--cta-glow),transparent 72%)}
.final::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;border-top:1px solid var(--nline);background:repeating-linear-gradient(0deg,rgba(237,237,234,.07) 0 1px,transparent 1px 5px)}
.final h2{font-size:58px}
.foot{border-top:0;padding:72px var(--gut) 56px;gap:28px;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.85fr)) minmax(0,1.3fr)}
.foot h5{font-size:10.5px;letter-spacing:.12em;margin-bottom:16px}
.foot li{font-size:14px;padding:4px 0}
.foot .soc{gap:16px}
@media (max-width:860px){.final{padding:110px 20px 130px}.final h2{font-size:40px}.foot{grid-template-columns:1fr 1fr}}

/* Resources menu (frontal.so scale): two short columns of labels and one compact featured card */
.dd.dd-res{position:static}
.mega.mres{left:50%;right:auto;top:56px;width:600px;padding:0;display:grid;grid-template-columns:165px 170px 1fr;align-items:start;translate:-50% -6px}
.dd-res:hover .mega.mres,.dd-res:focus-within .mega.mres{translate:-50% 0}
.nav.compact .mega.mres{top:52px}
.mega.mres .mg-col{padding:10px 6px 12px;border-right:1px solid var(--line);align-self:stretch}
.mega.mres .mg-h{display:block;padding:10px 10px 8px;margin:0;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.mega.mres .mg-col a{display:flex;align-items:center;gap:10px;padding:9px 10px}
.mega.mres .mg-col a svg{width:15px;height:15px;margin:0;color:var(--fg-2);flex:none}
.mega.mres .mg-col a:hover svg{color:var(--acc)}
.mega.mres .mg-col b{font-size:14px;font-weight:400;color:var(--fg)}
.mega.mres a.mg-feat{display:flex;flex-direction:column;margin:8px;padding:0;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden;transition:border-color .2s}
.mega.mres a.mg-feat:hover{background:var(--bg-2);border-color:var(--line-3)}
.mega.mres .mg-mos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;height:112px;margin:0;background:var(--line);-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.mega.mres .mg-mos img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block}
.mega.mres .mg-ft{display:flex;flex-direction:column;gap:5px;margin:-16px 0 0;padding:0 14px 14px;position:relative}
.mega.mres .mg-ft b{font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.3;color:var(--fg)}
.mega.mres .mg-ft .cap,.mega.mres .mg-ft .cap span{display:inline;margin:0;font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--mut)}
@media (max-width:480px){.talk .book{height:auto}}
.mega.mres .mg-col b{white-space:nowrap}

/* Contrast sections. Light theme: dark sections between light ones. Dark theme flips them to paper (tokens in dark.css).
   The closing call to action and footer follow the page theme instead, the way frontal.so does it. */
.night:has(.foot){--night:var(--bg);--nfg:var(--fg);--nmut:var(--mut);--nline:var(--line);--nacc:var(--acc);--nsurf:var(--surface);--nlogo:var(--plogo)}
.foot img[src*="wordmark-cream"],.giant img{filter:var(--nlogo)}
.tt img{filter:var(--nglyph)}
.res.feat,.seq,.case.dark .k,.proof .k{--nfg:var(--ink-fg);--nmut:#8D9892;--nline:rgba(236,239,236,.09);--nacc:#9CC7B3}
.final .btn-dark,.talk .btn{background:var(--nfg);color:var(--night)}
.night:not(:has(.foot)){background:radial-gradient(80% 60% at 50% 100%,rgba(46,122,88,.16),transparent 72%),var(--night)}

/* nav end: theme switch and Book a call share one 36px height, brackets get their own breathing room (frontal.so) */
.nav-end{gap:18px}
.themesw,.nav.compact .themesw{height:36px;padding:3px;gap:2px;border:1px solid var(--line-2);background:var(--bg-2);display:inline-flex;align-items:stretch}
.themesw button,.nav.compact .themesw button{width:30px;height:auto;display:grid;place-items:center;color:var(--mut);background:transparent;box-shadow:none;transition:color .15s,background .15s}
.themesw button svg{width:15px;height:15px}
.themesw button:hover{color:var(--fg)}
.themesw button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.06)}
.nav-end .btn,.nav.compact .nav-end .btn{height:36px;padding:0 18px;font-size:11.5px;letter-spacing:.14em}
.nav.compact .nav-end{gap:16px}
.nav.compact .nav-in{padding-right:14px;padding-left:20px}

/* Forest gradient type: the highlight phrase and the proof numbers carry an evergreen-to-sage gradient.
   --gtx runs dark-to-green on paper; dark sections and dark mode swap it to light-to-sage. */
:root{--gtx:linear-gradient(180deg,#141B17 30%,#1F5A43 100%);--gtx-n:linear-gradient(180deg,#ECEFEC 30%,#9CC7B3 100%)}
.res .big,.nums b,.case .big,.proof .big,.tr-big{background:var(--gtx);-webkit-background-clip:text;background-clip:text;color:transparent}
.res.feat .big,.case.dark .k .big,.proof .k .big,.night .tr-big{background:var(--gtx-n);-webkit-background-clip:text;background-clip:text;color:transparent}

/* contrast floor: small mono labels never drop below 4.5:1 (audit 2026-10-25) */
:root{--faint:#757C77}
.cap,.svlist .n,.bk-steps div,.pstats dt,.pnav .cap,.case .k .cap{color:var(--mut)}
.rgrid .tag{background:#E6F0E9}
.rgrid .vid .dur{background:rgba(0,0,0,.66)}
.svlist a .n,section.svlist .n{color:var(--mut)!important}
.bk-steps div{color:var(--fg-2)}
.pill{background:#E6F0E9}
.bk-steps div{color:var(--fg-2)!important}
.hw-r.dim{opacity:.72}
.hw-r.dim2{opacity:.5}
.hw-pill{color:var(--fg-2)}
.hw-pill:not(.on){opacity:.9}
.logowall .lw-k,.logowall .lw-k span{color:var(--mut)}
.hw-h2 span{color:var(--fg-2)}
ol li > span:first-child{color:var(--mut)}
.pill{background:#EEF5F0}
.hw-r.dim .hw-t,.hw-r.dim2 .hw-t,.hw-r.dim2 .hw-n{color:var(--fg-2)}
.hw-r.dim2{opacity:.62}
.mail .mh span,.mail .mf .ed{color:var(--fg-2)}
.mail .pill{color:#174A37;background:#E6F0E9}
.hw-r.dim2{opacity:.72}

/* Section rhythm (frontal.so): in light mode Results goes dark (.cx-dl); in dark mode Services and Tools & people go light (.cx-ld).
   Each swaps the whole palette locally and paints edge to edge while keeping the frame lines. Track record stays dark in both. */
:root:not([data-theme=dark]) .cx-dl{color-scheme:dark;--bg:#0D1511;--bg-2:#121A16;--surface:#0F1612;--white:#141D18;--fg:#ECEFEC;--fg-2:#C3CBC6;--mut:#8D9892;--faint:#7E8983;--line:rgba(236,239,236,.09);--line-2:rgba(236,239,236,.15);--line-3:rgba(236,239,236,.28);--acc:#9CC7B3;--acc-soft:rgba(156,199,179,.11);--hi:rgba(156,199,179,.2);--gtx:linear-gradient(180deg,#ECEFEC 30%,#9CC7B3 100%);background:var(--bg);color:var(--fg);box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
:root[data-theme=dark] .cx-ld{color-scheme:light;--bg:#F4F3EE;--bg-2:#EDECE5;--surface:#FBFAF7;--white:#FFFFFF;--fg:#141B17;--fg-2:#38423D;--mut:#68706B;--faint:#757C77;--line:rgba(20,27,23,.10);--line-2:rgba(20,27,23,.16);--line-3:rgba(20,27,23,.30);--acc:#1F5A43;--acc-soft:#DCEBE1;--hi:#CFE6D8;--gtx:linear-gradient(180deg,#141B17 30%,#1F5A43 100%);background:var(--bg);color:var(--fg);box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cx-ld{color-scheme:light;--bg:#F4F3EE;--bg-2:#EDECE5;--surface:#FBFAF7;--white:#FFFFFF;--fg:#141B17;--fg-2:#38423D;--mut:#68706B;--faint:#757C77;--line:rgba(20,27,23,.10);--line-2:rgba(20,27,23,.16);--line-3:rgba(20,27,23,.30);--acc:#1F5A43;--acc-soft:#DCEBE1;--hi:#CFE6D8;--gtx:linear-gradient(180deg,#141B17 30%,#1F5A43 100%);background:var(--bg);color:var(--fg);box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}}
:root:not([data-theme=dark]) .cx-dl{background:radial-gradient(70% 60% at 50% 100%,rgba(46,122,88,.22),transparent 72%),var(--bg)}
/* the closing call to action sits on its own surface, ruled off from the FAQ above it */
.night:has(.foot){--night:var(--bg-2);border-top:1px solid var(--line-2)}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;border-bottom:1px solid var(--nline);background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--nfg) 7%,transparent) 0 1px,transparent 1px 5px)}

/* "how it works" connectors: one weight, readable, rounded elbows */
.hw-lines path{stroke:var(--line-3)}
.hw-lines path.br{stroke:var(--line-3);stroke-width:1.2}
.hw-lines path.act{stroke:var(--fg-2);stroke-width:1.2}
.hw-lines path.go{stroke:var(--acc);stroke-width:1.6}

/* Services menu: list plus a booking card on the right (our own mark, no URL on the card) */
.mega.msvc{width:480px;display:grid;grid-template-columns:1fr;gap:8px}
.mega.msvc a.mg-book{position:relative;display:flex;flex-direction:column;gap:0;padding:20px;overflow:hidden;background:#0D1511;box-shadow:inset 0 0 0 1px rgba(156,199,179,.16);color:#ECEFEC;min-height:100%}
.mega.msvc a.mg-book::before{content:"";position:absolute;inset:auto -40% -55% -40%;height:80%;background:radial-gradient(closest-side,rgba(31,90,67,.6),transparent);pointer-events:none}
.mega.msvc a.mg-book.mg-book:hover{background:#101B15}
.mega.msvc .mg-book-o{width:auto;height:20px;align-self:flex-start;opacity:.9;position:relative}
.mega.msvc .mg-book-h{display:block;margin:auto 0 0;padding-top:28px;font-family:var(--serif);font-size:26px;line-height:1.02;letter-spacing:-.02em;color:#ECEFEC;position:relative}
.mega.msvc .mg-book-p{display:flex;align-items:baseline;gap:10px;margin:16px 0 0;padding-left:10px;border-left:1px solid rgba(236,239,236,.25);position:relative}
.mega.msvc .mg-book-p b{font-family:var(--serif);font-weight:400;font-size:22px;color:#ECEFEC}
.mega.msvc .mg-book-p span{display:block;margin:0;font:500 9.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9CC7B3}
.mega.msvc .mg-book-a{position:absolute;top:20px;right:20px;margin:0;color:#9CC7B3;transition:translate .2s}
.mega.msvc a.mg-book:hover .mg-book-a{translate:2px -2px}

/* footer: Explore AI summary (frontal.so pattern): opens an answer engine with a prompt to summarise Oriel */
.foot > div:first-child{grid-row:span 2}
.aisum{grid-column:2/-1;align-self:end}
.aisum > div{display:flex;gap:10px;flex-wrap:wrap}
.aisum a{width:60px;height:60px;display:grid;place-items:center;background:color-mix(in srgb,var(--nfg) 5%,transparent);box-shadow:inset 0 0 0 1px var(--nline);color:var(--nfg);transition:background .15s,translate .2s var(--ease)}
.aisum a:hover{background:color-mix(in srgb,var(--nfg) 10%,transparent);translate:0 -1px}
.aisum a:focus-visible{outline:2px solid var(--nacc);outline-offset:2px}
.aisum img{width:20px;height:20px;object-fit:contain;filter:var(--nlogo,none)}
@media (max-width:860px){.foot > div:first-child{grid-row:auto}.aisum{grid-column:1/-1}}