/* Halko shared UI (2 Nov 2026). One token block for every page. Hard rules: reports/spacing-eye-2026-11-02/TAKEAWAYS.md
   Space: 4 base, 8 rhythm, tokens only (--s1..--s9) plus fluid --gut and --sec. Every line is 1px.
   Type: micro 13/20, small 14/20, body 16/24, lede 18/28, H3 22/28, section title 24/32, display as approved.
   Motion: hero Mirror, the Quiet Iris glint (6 s lap) and the calm package-mark loops (owner decision 7) share one --loop token.
   Hover: one property family, 140 ms in / 200 ms out / 220 ms hairline fill. Accent is warm metal only. */
@font-face{font-family:"Akt";src:url(akt.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--logo:#BE7638;--bg:#11151B;--bg2:#161B22;--bg3:#0F1318;--fg:#F3F4F6;--mut:#A3ADBA;--dim:#7D8797;--cu:#D28D4E;--cu-hi:#F9D1AC;--ink:#11151B;
 --line:rgba(243,244,246,.10);--line2:rgba(243,244,246,.18);--warm:rgba(210,141,78,.28);
 --c0:#F6C597;--c1:#E19E5F;--c2:#D28D4E;--c3:#BE7638;--c4:#8A4E22;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
 --gut:clamp(24px,6vw,72px);--sec:clamp(64px,8vw,96px);--max:1200px;--measure:34em;--measure-s:28em;--col:36rem;--hair:1px;
 --t-in:140ms;--t-out:200ms;--t-fill:220ms;--ease:cubic-bezier(.22,.61,.36,1);--loop:infinite;
 interpolate-size:allow-keywords}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);font-family:"Akt",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-size:16px;line-height:24px}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
::selection{background:rgba(210,141,78,.32);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:var(--s4);top:var(--s4);z-index:60;padding:var(--s3) var(--s4);background:var(--bg3);color:var(--fg);box-shadow:inset 0 0 0 1px var(--warm);border-radius:24px;transform:translateY(-200%)}
.skip:focus{transform:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cu-hi);outline-offset:4px}

/* ---------- NAV: same six items on every page, 32px ink-to-ink, 1px marker under the current page (adds no width) ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.wm{color:#FFFFFF;font-size:17px;font-weight:700;letter-spacing:.14em;line-height:1}
.lock{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;position:relative;color:var(--logo)}
.lk-m{width:17px;height:17px;flex:none;display:block}
.nav ul{display:flex;gap:var(--s6);list-style:none;font-size:16px;line-height:24px;color:var(--mut)}
.nav li a{position:relative;display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-out) var(--ease)}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:var(--s2);height:1px;background:var(--line2);opacity:0;transition:opacity var(--t-out) var(--ease)}
.nav li a[aria-current]{color:var(--fg)}.nav li a[aria-current]::after{opacity:1}
@media (hover:hover){.nav li a:hover{color:var(--fg);transition-duration:var(--t-in)}}
@media (max-width:920px){.nav ul{display:none}}

/* ---------- MENU BUTTON + SHEET ---------- */
.xi{display:none;place-items:center;width:48px;height:48px;margin-right:-12px;border:0;background:none;color:var(--fg);cursor:pointer;touch-action:manipulation;flex:none}
.xi svg{width:28px;height:28px;overflow:visible;display:block}
.xi path{fill:none;stroke-width:2;stroke-linecap:butt;transition:transform var(--t-fill) var(--ease),opacity var(--t-out) var(--ease)}
.xi .fg{stroke:var(--fg)}.xi .cu{stroke:var(--cu);transform-origin:14px 14px}
@media (hover:hover){.xi:hover .cu{transform:scaleX(1.5)}}
.xi:focus-visible{outline-offset:0}
@media (max-width:920px){.xi{display:inline-grid}}
.xi.x .fg:first-of-type{transform:translateY(6.5px) rotate(45deg);transform-origin:14px 7.5px}
.xi.x .fg:last-of-type{transform:translateY(-6.5px) rotate(-45deg);transform-origin:14px 20.5px}
.xi.x .cu{opacity:0}
.sheet{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;background:#11151B;opacity:0;transition:opacity var(--t-fill) var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.sheet::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 100% 0,rgba(210,141,78,.10),transparent 70%);pointer-events:none}
body.menu-on{overflow:hidden}body.menu-on .sheet{display:flex}body.menu-open .sheet{opacity:1}
.sheet>.wrap{width:100%}.sheet .nav{position:relative}.sheet .xi{display:inline-grid}
.sheet-nav{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--s5);padding-bottom:var(--s5)}
.sheet-nav ul{list-style:none;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.sheet-nav li{background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;opacity:0;transform:translateY(var(--s2));transition:opacity var(--t-fill) var(--ease),transform var(--t-fill) var(--ease)}
body.menu-open .sheet-nav li{opacity:1;transform:none;transition-delay:calc(40ms * var(--i,0))}
.sheet-nav a{display:flex;align-items:center;justify-content:space-between;min-height:64px;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.sheet-nav a::after{content:"";width:8px;height:8px;background:var(--cu);border-radius:0 100% 0 0;opacity:0;transition:opacity var(--t-out) var(--ease)}
.sheet-nav a[aria-current]::after,.sheet-nav a:active::after{opacity:1}
@media (hover:hover){.sheet-nav a:hover::after{opacity:1;transition-duration:var(--t-in)}}
.sheet-foot{position:relative;padding-top:var(--s5);padding-bottom:var(--s6);font-size:13px;line-height:20px;color:var(--dim)}
.sheet-foot a{color:var(--mut)}

/* ---------- QUIET IRIS v2 (bezel HQ, 2 Nov 2026): the only button on the site ----------
   Edge = one SVG stroke per button (built by halko.js), so the whole ring is one analytically anti-aliased path,
   never two clipped layers. Stroke width and position snap to device pixels (1x, 2x, 3x), straights land on whole pixels.
   Metal: lit from above (light top, deep copper bottom, never a dark gap). Life: one soft glint runs round the edge at an even
   speed, 6 s a lap (shared --loop token), with a fainter twin opposite. Warm copper highlight, never white-hot. Hover = brighter edge, glint glow up, inside warms, label white. No speed jump.
   No JS: a static gradient ring (mask) stands in. */
.iris{--h:44px;--edge:1.25px;--r:calc(var(--h) / 2);--lap:6s;position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--h);padding:0 26px;border-radius:var(--r);
 font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:20px;color:var(--cu-hi);text-decoration:none;cursor:pointer;isolation:isolate;touch-action:manipulation;
 -webkit-user-select:none;user-select:none;white-space:nowrap;flex:none;border:0;background:transparent;margin:0;-webkit-appearance:none;appearance:none;
 box-shadow:0 0 0 0 rgba(210,141,78,0);transition:color var(--t-out) var(--ease),box-shadow var(--t-out) var(--ease)}
.iris::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:var(--edge);
 background:linear-gradient(180deg,#EDB884,#D28D4E 42%,#9A5A2A);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.iris.bz-on::before{content:none}
.iris::after{content:"";position:absolute;inset:calc(var(--edge) / 2);z-index:-2;border-radius:calc(var(--r) - var(--edge) / 2);
 background:radial-gradient(120% 140% at 50% 120%,rgba(210,141,78,.14),transparent 60%) var(--bg3);transition:background-color var(--t-out) var(--ease)}
.iris .t{position:relative;z-index:2;display:inline-block}
.iris .bz{position:absolute;left:-8px;top:-8px;z-index:-1;overflow:visible;pointer-events:none}
.iris .bz .b{opacity:.88;transition:opacity var(--t-out) var(--ease)}
.iris .bz .g{fill:none;stroke-linecap:butt;animation:iris-g var(--lap) linear var(--loop);animation-delay:var(--dl,0s)}
.iris .bz .gl{opacity:.42;transition:opacity var(--t-out) var(--ease)}
.iris .bz .tw{opacity:.42}
.iris.bz-off .bz .g{animation-play-state:paused}
@keyframes iris-g{from{stroke-dashoffset:var(--o0)}to{stroke-dashoffset:calc(var(--o0) - var(--P))}}
@media (hover:hover){
 .iris:hover{color:#fff;box-shadow:0 0 24px -6px rgba(210,141,78,.34);transition-duration:var(--t-in)}
 .iris:hover::after{background-color:#1A1612;transition-duration:var(--t-in)}
 .iris:hover .bz .b{opacity:1;transition-duration:var(--t-in)}
 .iris:hover .bz .gl{opacity:.9;transition-duration:var(--t-in)}}
.iris:active::after{background-color:#1A1612}.iris:active .t{transform:translateY(1px)}
.iris:focus-visible{outline:2px solid var(--cu-hi);outline-offset:6px}
.send.iris{--edge:1.5px;padding:0 30px;min-width:132px}
.send[data-state=sending]{cursor:progress}.send[data-state=sending] .bz .g{animation-duration:2.4s}
.send[data-state=sent]{color:var(--mut);cursor:default}.send[data-state=sent] .bz{opacity:.5}.send[data-state=sent] .bz .g{animation-play-state:paused}

/* ---------- TEXT LINK: plain text on a 1px hairline that fills warm from the left (220 ms) ---------- */
.ln{position:relative;display:flex;align-items:flex-end;min-height:48px;padding-bottom:var(--s4);font-size:16px;line-height:24px;font-weight:600;color:var(--fg);touch-action:manipulation}
.ln .rule{position:absolute;left:0;right:0;bottom:var(--s2);height:1px;background:var(--line2)}
.ln .rule::after{content:"";position:absolute;inset:0;background:var(--cu);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fill) var(--ease)}
@media (hover:hover){.ln:hover .rule::after{transform:scaleX(1)}}
.ln:active .rule::after{transform:scaleX(1)}
.tl,.mail a,a.mail,.p a,.acc a,.ul a{color:var(--fg);background:linear-gradient(var(--cu),var(--cu)) 0 100%/0 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 0 100%/100% 1px no-repeat;padding-bottom:var(--s1);transition:background-size var(--t-fill) var(--ease)}
.tl{font-weight:600}
@media (hover:hover){.tl:hover,.mail a:hover,a.mail:hover,.p a:hover,.acc a:hover,.ul a:hover{background-size:100% 1px,100% 1px}}

/* ---------- SECTIONS: --sec above and below, hairline inset to the gutters ---------- */
.sec,.act,.foot{border-top:0;background:linear-gradient(var(--line),var(--line)) var(--gut) 0/calc(100% - 2*var(--gut)) 1px no-repeat}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.shead{display:flex;flex-direction:column;margin-bottom:var(--s6)}
.eb{display:flex;align-items:center;gap:var(--s2);font-size:13px;line-height:20px;color:var(--dim);margin-bottom:var(--s4)}
.eb::before{content:"";width:6px;height:6px;background:var(--cu);border-radius:0 100% 0 0}
.sh{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;max-width:20em}
.sh em{font-style:normal;color:var(--cu)}
.ss{margin-top:var(--s3);font-size:18px;line-height:28px;color:var(--mut);max-width:var(--measure-s)}

/* ---------- TALOS DISC ---------- */
.quad{display:grid;grid-template-columns:7px 7px;gap:2px}.quad i{width:7px;height:7px;background:var(--cu)}.quad i:nth-child(2){border-radius:50%;background:var(--cu-hi)}.quad i:nth-child(3){opacity:.55}
.disc{position:fixed;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:0;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--warm),0 12px 32px -16px rgba(0,0,0,.9);cursor:pointer;touch-action:manipulation}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--cu);opacity:0;transition:opacity var(--t-out) var(--ease)}
@media (hover:hover){.disc:hover::after{opacity:1;transition-duration:var(--t-in)}}
.talos-float{right:var(--s5);bottom:calc(var(--s5) + env(safe-area-inset-bottom));z-index:20;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--t-fill) var(--ease),visibility 0s var(--t-fill)}
body.talos-on .talos-float{opacity:1;pointer-events:auto;visibility:visible;transition:opacity var(--t-fill) var(--ease),visibility 0s}
body.talos-on.form-in .talos-float,body.menu-on .talos-float{opacity:0;pointer-events:none;visibility:hidden}

/* ---------- FOOTER: © on the content left edge, last link on the content right edge ---------- */
.foot{padding-top:var(--s6);padding-bottom:calc(var(--s7) + env(safe-area-inset-bottom))}
.foot-top{display:grid;gap:var(--s5)}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5);list-style:none;font-size:14px;line-height:20px;color:var(--mut)}
.foot-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-out) var(--ease)}
@media (hover:hover){.foot-nav a:hover{color:var(--fg);transition-duration:var(--t-in)}}
.foot-nav a[aria-current]{color:var(--fg)}
.foot-base{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s5);background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat;font-size:13px;line-height:20px;color:var(--dim)}
.foot-base a{color:var(--mut)}
@media (min-width:1101px){.foot-top{grid-template-columns:auto 1fr;align-items:center}.foot-nav{display:flex;justify-content:flex-end;gap:var(--s6)}.foot-base{flex-direction:row;justify-content:space-between}}

/* ---------- REVEAL: one-shot 8px rise + fade, 60 ms stagger. Only with JS and motion allowed. ---------- */
@media (prefers-reduced-motion:no-preference){
 .js .rv{opacity:0;transform:translateY(var(--s2));transition:opacity 400ms var(--ease),transform 400ms var(--ease);transition-delay:calc(var(--d,0) * 60ms)}
 .js .rv.on{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- TALOS POPUP (owner, 2 Nov): not on first paint. The disc arrives after a real scroll (1.2 screens),
   then a small note pops once per visit beside it. Tap the disc for the panel. Hidden over the form and the menu. ---------- */
.tal-pop{position:fixed;right:var(--s5);bottom:calc(var(--s5) + 48px + var(--s3) + env(safe-area-inset-bottom));z-index:21;display:none;width:min(288px,calc(100vw - 2*var(--s5)));
 padding:var(--s4);border-radius:12px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--warm),0 16px 40px -20px rgba(0,0,0,.9);opacity:0;transform:translateY(var(--s2));transition:opacity var(--t-fill) var(--ease),transform var(--t-fill) var(--ease)}
.tal-pop.on{display:block}.tal-pop.in{opacity:1;transform:none}
body.form-in .tal-pop,body.menu-on .tal-pop{opacity:0;pointer-events:none}
.tal-pop p{font-size:14px;line-height:20px;color:var(--mut);padding-right:var(--s6)}
.tal-pop p b{display:block;color:var(--fg);font-weight:600;margin-bottom:var(--s1)}
.tal-x{position:absolute;right:var(--s1);top:var(--s1);width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--dim);transition:color var(--t-out) var(--ease)}
.tal-x::before,.tal-x::after{content:"";position:absolute;left:16px;top:21.5px;width:12px;height:1px;background:currentColor;transform:rotate(45deg)}.tal-x::after{transform:rotate(-45deg)}
@media (hover:hover){.tal-x:hover{color:var(--fg);transition-duration:var(--t-in)}}
.tal-panel .tal-form{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.tal-panel input{width:100%;height:48px;padding:0;font:inherit;font-size:16px;line-height:24px;color:var(--fg);background:transparent;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--line2);transition:box-shadow var(--t-out) var(--ease)}
.tal-panel input:focus{outline:none;box-shadow:inset 0 -1px 0 var(--cu)}
.tal-panel input::placeholder{color:var(--dim)}
.tal-panel .tal-note{font-size:13px;line-height:20px;color:var(--dim)}

/* ---------- PACKAGE MARKS (flat, warm metal) ---------- */
/* ---------- PACKAGES PLATE ---------- */
.plate{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg2)}
/* Plate corner slashes removed (owner, 2 Nov): package CTAs are plain text + hairline only. */
.plate-wrap{position:relative}
.plate-wrap{margin-top:24px}
.cell{padding:32px 28px 28px;display:flex;flex-direction:column;gap:10px;min-height:280px}
.cell+.cell{box-shadow:inset 1px 0 0 var(--line)}
.cell .who{font-size:13px;color:var(--dim)}
/* Package marks v3 flat (pt366u, t367u): kin of the Halko mark (square + circle, the overlap cut away) and Talos (squares + circles, light-copper circle = the agent). Flat solid copper on dark: no gradients, no shadows, no bevels, no rivets. 24-unit grid shown at 40px.
   Launch = Golden ascent: the Halko mark pulled apart; the square (site) keeps the bite, the first circle sits in the bite as in the logo, then circles shrinking by 1/phi climb the 45° line (a geometric series = acceleration to go-live).
   Signature Year = Twelve-part ring: the site (square) held inside a ring cut into 12 equal arcs (months); the current month is light copper.
   Secure = Signed report: a page with two findings cut out; a round seal (light copper) overlaps its corner and the overlap is cut away.
   Team AI = Open seat: three squares (the team) and a light-copper circle (the AI) taking the fourth seat, biting into the team. */
.mk{position:relative;display:block;width:40px;height:40px;margin-bottom:14px}
.mk svg{width:40px;height:40px;display:block;overflow:visible}
/* Marks alive (2 Nov): CSS-only, transform/opacity/fill/stroke on 40px SVG parts. Hover transforms sit on wrapper <g>s, idle animations on the children, so hover never jumps the idle cycle.
   Runs only while the plate is on screen (.in), one-shots start on first view (.seen). Reduced motion = still, final state. */
.mk svg *{transform-box:fill-box;transform-origin:center}
.mk svg .lw,.mk svg .yw,.mk svg .sw,.mk svg .aw,.mk svg .now,.mk svg .nh{transition:transform 600ms var(--ease),stroke-width 600ms var(--ease),opacity 600ms var(--ease)}
.mk .lg,.mk .ag{opacity:0}.mk .lh,.mk .sr,.mk .f{opacity:0}
.mk .f{transform-origin:left center}
/* Year ring: 12 equal arcs, one tone, one width; no dimmed future months, no fixed glow spot (owner pt556u: no dark dead segment). */
.mk .ring .m,.mk .ring .now,.mk .ring .past{stroke:#D28D4E;stroke-width:2.5;opacity:1}
.mk .nh{display:none}
.plate:not(.in) .mk svg *{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
 /* Launch (calm loop 11.8s): light climbs square > circle > circle > lead dot, 0.8 s apart (1 s rise, 2 s fall), then one faint ring leaves the lead dot. */
 .seen .l0,.seen .l1,.seen .l2{animation:mkClimb 11.8s linear var(--loop)}
 .seen .l1{animation-delay:.8s}.seen .l2{animation-delay:1.6s}
 .seen .lo{animation:mkLead 11.8s linear 2.4s var(--loop)}
 .seen .lh{animation:mkRing 11.8s linear 2.6s var(--loop)}
 .seen .lg{animation:mkHalo 11.8s linear 2.4s var(--loop)}
 /* Signature Year (calm infinite loop 9.6s, owner pt556u): one soft light travels round all 12 arcs, 0.8 s an arc, clockwise from 12 o'clock. Every arc gets the same lift and the same fall; no arc is ever dim or stuck. Negative delays put the loop in its steady state from the first frame. */
 .seen .ring .m{animation:mkWalk 9.6s linear calc(var(--i) * .8s - 9.6s) var(--loop)}
 /* Secure (calm loop 14.6s): the two findings read across in turn, the seal settles with a 4% press, one faint ring leaves it; then rest. */
 .seen .f1,.seen .f2{animation:mkScan 14.6s linear 1s var(--loop)}.seen .f2{animation-delay:1.6s}
 .seen .seal{animation:mkSeal 14.6s linear 3s var(--loop)}
 .seen .sr{animation:mkRipple 14.6s linear 3.2s var(--loop)}
 /* Team AI (calm loop 9.4s): the AI seat breathes 3.5% and its bite in the team breathes with it, so the gap stays even. */
 .seen .ai,.seen .bite{animation:mkBreath 9.4s cubic-bezier(.37,0,.63,1) var(--loop)}
 .seen .ag{animation:mkAiGlow 9.4s cubic-bezier(.37,0,.63,1) var(--loop)}
 /* Hover: only a small wrapper nudge; loops keep their pace (no speed-up, no jump). */
 @media (hover:hover){.cell:nth-child(1):hover .lw{transform:translate(.6px,-.6px)}.cell:nth-child(3):hover .sw{transform:scale(1.04)}.cell:nth-child(4):hover .aw{transform:scale(1.04)}}
}
@keyframes mkClimb{0.00%{fill:#D28D4E;animation-timing-function:cubic-bezier(.37,0,.63,1)}8.47%{fill:#F2C08F;animation-timing-function:cubic-bezier(.37,0,.63,1)}25.42%{fill:#D28D4E}100.00%{fill:#D28D4E}}
@keyframes mkLead{0.00%{fill:#EDB27C;animation-timing-function:cubic-bezier(.37,0,.63,1)}8.47%{fill:#F2C08F;animation-timing-function:cubic-bezier(.37,0,.63,1)}27.12%{fill:#EDB27C}100.00%{fill:#EDB27C}}
@keyframes mkRing{0.00%{opacity:0;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}4.24%{opacity:.4;animation-timing-function:cubic-bezier(.22,.61,.36,1)}28.81%{opacity:0;transform:scale(1.9)}100.00%{opacity:0;transform:scale(1.9)}}
@keyframes mkHalo{0.00%{opacity:.06;animation-timing-function:cubic-bezier(.37,0,.63,1)}10.17%{opacity:.3;animation-timing-function:cubic-bezier(.37,0,.63,1)}33.90%{opacity:.06}100.00%{opacity:.06}}
@keyframes mkScan{0.00%{opacity:0;transform:scaleX(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}7.53%{opacity:.85;transform:scaleX(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}17.81%{opacity:0;transform:scaleX(1)}100.00%{opacity:0;transform:scaleX(1)}}
@keyframes mkSeal{0.00%{transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}4.11%{transform:scale(1.04);animation-timing-function:cubic-bezier(.37,0,.63,1)}10.96%{transform:scale(1)}100.00%{transform:scale(1)}}
@keyframes mkRipple{0.00%{opacity:0;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}2.74%{opacity:.35;animation-timing-function:cubic-bezier(.22,.61,.36,1)}23.29%{opacity:0;transform:scale(1.65)}100.00%{opacity:0;transform:scale(1.65)}}
@keyframes mkWalk{0%{stroke:#D28D4E;stroke-width:2.5;animation-timing-function:cubic-bezier(.37,0,.63,1)}8.33%{stroke:#F2C08F;stroke-width:2.9;animation-timing-function:cubic-bezier(.37,0,.63,1)}29.17%{stroke:#D28D4E;stroke-width:2.5}100%{stroke:#D28D4E;stroke-width:2.5}}
@keyframes mkBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes mkAiGlow{0%,100%{opacity:.05}50%{opacity:.24}}
@media (prefers-reduced-motion:reduce){.mk svg *{animation:none!important;transition:none!important}}
/* Package links: no trailing icons (owner t384u/t386u). The plate marks carry the identity; links stay clean text on a hairline that fills copper on hover/press. */
.cell h3{font-size:22px;font-weight:600;letter-spacing:-.01em}
.cell p{color:var(--mut);flex:1}
.rec{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cu-hi)}
.rec::before{content:"";width:5px;height:5px;background:var(--cu)}
.plate-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;color:var(--mut)}
@media (max-width:860px){.plate{grid-template-columns:1fr 1fr}.cell:nth-child(3){box-shadow:inset 0 1px 0 var(--line)}.cell:nth-child(4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}}
@media (max-width:560px){.plate{grid-template-columns:1fr}.cell{min-height:0}.cell+.cell{box-shadow:inset 0 1px 0 var(--line)}}


/* =================== HOME: SERVICES PLATE (mobile first) ===================
   Equal insets on every side (32). Stack: mark 16 who 4 title 8 text, link on a shared baseline (auto). */
.plate .cell{gap:0;padding:var(--s6) 0;min-height:0}
.plate .cell .mk{margin-bottom:var(--s4)}
.plate .cell .who{display:block;font-size:13px;line-height:20px;color:var(--dim);margin-bottom:var(--s1)}
.plate .cell h3{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s2)}
.plate .cell p{font-size:16px;line-height:24px;color:var(--mut);max-width:var(--measure);margin-bottom:var(--s4)}
.plate .cell .ln{margin-top:auto}
@media (max-width:860px){.plate{grid-template-columns:1fr!important;background:none!important}.plate .cell,.plate .cell+.cell{box-shadow:none!important;background:none;padding:var(--s6) 0}.plate .cell:first-child{padding-top:0}.plate .cell:last-child{padding-bottom:0}}
@media (min-width:861px){.plate{grid-template-columns:repeat(4,minmax(0,1fr));background:none}.plate .cell{padding:var(--s6)}.plate .cell+.cell{box-shadow:inset 1px 0 0 var(--line)}.plate .cell:first-child{padding-left:0}.plate .cell:last-child{padding-right:0}}
.aside{margin-top:var(--s4);font-size:13px;line-height:20px;color:var(--dim);max-width:var(--measure)}

/* =================== FORM: one centred 576 column; 8 equal chips 2x4, tick left; single-column fields ===================*/
#form,#contact{scroll-margin-top:var(--s5)}
#contact>*{max-width:var(--col);margin-inline:auto}
/* Contact head: eyebrow, H2, intro and form share ONE left edge (the 576 column), and the section hairline is inset to that same column so the centred block reads as one object, not a label stranded under a full-width rule */
#contact.sec{background:linear-gradient(var(--line),var(--line)) 50% 0/min(var(--col),calc(100% - 2*var(--gut))) 1px no-repeat}
#contact>.shead{align-items:flex-start;text-align:left}
#contact>.shead .eb{justify-content:flex-start;align-self:stretch}
.form{display:flex;flex-direction:column}
.chips{border:0;margin:0 0 var(--s2);padding:0;min-width:0}
.cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:479px){.cg{grid-template-columns:1fr}}
.chips legend{display:flex;align-items:baseline;gap:var(--s2);font-size:13px;line-height:20px;color:var(--mut);margin-bottom:var(--s2);padding:0}
.opt{font-style:normal;color:var(--dim);font-size:13px;line-height:20px}
.chip{position:relative;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip>span{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;min-height:64px;height:100%;padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 16px + var(--s3));border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow var(--t-out) var(--ease)}
.chip b{font-size:16px;line-height:24px;font-weight:600;color:var(--fg)}
.chip small{font-size:14px;line-height:20px;color:var(--mut)}
.chip>span::after{content:"";position:absolute;left:var(--s4);top:50%;width:16px;height:16px;margin-top:-8px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--mut);
 background:var(--cu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2311151B' stroke-width='1.8'/%3E%3C/svg%3E") center/16px no-repeat;background-color:transparent;background-size:0;transition:background-color var(--t-out) var(--ease),box-shadow var(--t-out) var(--ease)}
.chip input:checked+span{box-shadow:inset 0 0 0 1px var(--cu)}
.chip input:checked+span::after{background-color:var(--cu);background-size:16px;box-shadow:inset 0 0 0 1px var(--cu)}
.chip input:focus-visible+span{outline:2px solid var(--cu-hi);outline-offset:2px}
@media (hover:hover){.chip:hover>span{box-shadow:inset 0 0 0 1px rgba(243,244,246,.36);transition-duration:var(--t-in)}.chip input:checked:hover+span{box-shadow:inset 0 0 0 1px var(--cu-hi)}}
.about{font-size:13px;line-height:20px;color:var(--mut);margin:0 0 var(--s5)}.about b{color:var(--cu-hi);font-weight:600}
.fields{display:flex;flex-direction:column;gap:var(--s5);margin-bottom:var(--s5)}
.field{display:flex;flex-direction:column;gap:var(--s2);margin:0}
.field>span{display:flex;align-items:baseline;gap:var(--s2);font-size:13px;line-height:20px;color:var(--mut)}
.field input,.field textarea{width:100%;height:48px;padding:0;font:inherit;font-size:16px;line-height:24px;color:var(--fg);background:transparent;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--line2);transition:box-shadow var(--t-out) var(--ease);-webkit-appearance:none;appearance:none}
.field textarea{height:auto;min-height:96px;padding:var(--s3) 0;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 -1px 0 var(--cu)}
.field.bad input{box-shadow:inset 0 -1px 0 #E58B6B}.field .err{font-size:13px;line-height:20px;color:#F0A58A}
.more{margin-bottom:var(--s6)}
.more summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:var(--s3);font-size:16px;line-height:24px;font-weight:600;list-style:none;color:var(--fg)}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--cu),var(--cu)) center/12px 1px no-repeat,linear-gradient(var(--cu),var(--cu)) center/1px 12px no-repeat;transition:transform var(--t-fill) var(--ease)}
.more[open] summary::before{transform:rotate(45deg)}
.more .field{margin-top:var(--s2)}
.more::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-fill) var(--ease),content-visibility var(--t-fill) allow-discrete}
.more[open]::details-content{block-size:auto}
.send-row{display:flex;align-items:center;gap:var(--s5)}
.sent-note{font-size:13px;line-height:20px;color:var(--dim)}
/* Timeline: label column = the longest label ("In a few days"), shared by every row (subgrid); text wraps on its own column. */
.next{list-style:none;margin:var(--s7) 0 0;padding:var(--s5) 0 0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat;
 display:grid;grid-template-columns:max-content 1fr;column-gap:var(--s5);row-gap:var(--s3);font-size:14px;line-height:20px;color:var(--mut)}
.next li{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.next b{color:var(--fg);font-weight:600}

/* =================== INNER PAGES (same tokens, same edges) =================== */
main{position:relative;isolation:isolate}
.ph{position:relative;display:flex;flex-direction:column;padding-top:var(--s8);padding-bottom:var(--sec)}
body.inner{position:relative}
body.inner::before{content:"";position:absolute;left:0;right:0;top:0;height:720px;background:radial-gradient(ellipse 70% 100% at 88% 0,rgba(210,141,78,.10),transparent 70%);pointer-events:none;z-index:-1}
.ph .h1{font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:600;letter-spacing:-.02em;max-width:13ch}
.ph .h1 em{font-style:normal;color:var(--cu)}
.ph .lede{margin-top:var(--s4);font-size:18px;line-height:28px;color:var(--mut);max-width:var(--measure-s)}
.ph .sub{margin-top:var(--s3);font-size:13px;line-height:20px;color:var(--dim)}
.blk{display:grid;gap:var(--s5)}
.blk>.h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
@media (min-width:1024px){.blk{grid-template-columns:4fr 8fr;column-gap:var(--s7);align-items:start}}
.body{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.p{font-size:16px;line-height:24px;color:var(--mut);max-width:var(--measure)}
.p b{color:var(--fg)}
/* Lists as icon rows: a small warm mark, one line of ink, 1px rule between */
.ul{list-style:none;display:flex;flex-direction:column;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.ul li{position:relative;display:grid;grid-template-columns:24px 1fr;column-gap:var(--s3);padding:var(--s4) 0;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;font-size:16px;line-height:24px;color:var(--fg)}
.ul li::before{content:"";width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9v10h10v-2.5A5.5 5.5 0 0 1 9.5 9H5z' fill='%23D28D4E'/%3E%3Ccircle cx='15' cy='9' r='3.4' fill='%23F9D1AC'/%3E%3C/svg%3E") center/24px no-repeat}
.ul.no li{color:var(--mut)}
.ul.no li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%237D8797' stroke-width='1.5'/%3E%3C/svg%3E") center/24px no-repeat}
.steps{list-style:none;counter-reset:st;display:flex;flex-direction:column;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;column-gap:var(--s4);row-gap:var(--s1);padding:var(--s5) 0;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.steps li::before{content:counter(st,decimal-leading-zero);grid-row:1/3;font-size:13px;line-height:24px;font-weight:600;color:var(--cu);font-variant-numeric:tabular-nums}
.steps b{font-size:16px;line-height:24px;font-weight:600}
.steps span{font-size:14px;line-height:20px;color:var(--mut)}
.g2{display:grid;gap:var(--s5)}
.g2>div{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s5);background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.g2 .h3{font-size:22px;line-height:28px;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.g2 p{font-size:16px;line-height:24px;color:var(--mut)}
@media (min-width:640px){.g2{grid-template-columns:1fr 1fr;column-gap:var(--s5)}}
.rec{display:inline-flex;align-items:center;height:24px;padding:0 var(--s3);border-radius:12px;font-size:13px;line-height:20px;font-weight:600;color:var(--cu-hi);box-shadow:inset 0 0 0 1px var(--warm)}
.acc{background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.acc details{background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding:var(--s4) 0;font-size:16px;line-height:24px;font-weight:600;cursor:pointer;list-style:none;transition:color var(--t-out) var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--cu),var(--cu)) center/12px 1px no-repeat,linear-gradient(var(--cu),var(--cu)) center/1px 12px no-repeat;transition:transform var(--t-fill) var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.acc summary:hover{color:var(--cu-hi);transition-duration:var(--t-in)}}
.acc p{padding:0 var(--s7) var(--s5) 0;font-size:16px;line-height:24px;color:var(--mut);max-width:var(--measure)}
.acc details::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-fill) var(--ease),content-visibility var(--t-fill) allow-discrete}
.acc details[open]::details-content{block-size:auto}
.act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);padding-top:var(--sec);padding-bottom:var(--sec)}
.act .reply{font-size:13px;line-height:20px;color:var(--dim)}
.pkl{display:grid;gap:0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.pkr{display:grid;grid-template-columns:40px 1fr;column-gap:var(--s4);padding:var(--s5) 0;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.pkr .mk{grid-row:1/5;margin:0}
.pkr-w{font-size:13px;line-height:20px;color:var(--dim)}
.pkr-n{font-size:22px;line-height:28px;font-weight:600;margin-top:var(--s1)}
.pkr-l{font-size:16px;line-height:24px;color:var(--mut);margin-top:var(--s2)}
.pkr .ln{margin-top:var(--s2)}
@media (min-width:640px){.pkl{grid-template-columns:1fr 1fr;column-gap:var(--s5)}}
.legal .body{gap:var(--s4)}
.legal h2{font-size:16px;line-height:24px;font-weight:600;color:var(--fg);margin-top:var(--s5)}
.legal h2:first-child{margin-top:0}
.draft{display:flex;gap:var(--s3);padding:var(--s4);border-radius:12px;box-shadow:inset 0 0 0 1px var(--warm);font-size:13px;line-height:20px;color:var(--mut)}
.draft::before{content:"";width:6px;height:6px;flex:none;margin-top:var(--s2);background:var(--cu);border-radius:0 100% 0 0}
.todo{font-style:normal;color:var(--cu-hi);background:rgba(210,141,78,.08);box-shadow:inset 0 -1px 0 rgba(210,141,78,.5)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;color:var(--mut)}
.tbl th{text-align:left;font-weight:600;color:var(--fg);padding:var(--s3) var(--s4) var(--s3) 0;box-shadow:inset 0 -1px 0 var(--line2)}
.tbl td{padding:var(--s3) var(--s4) var(--s3) 0;box-shadow:inset 0 -1px 0 var(--line);vertical-align:top}
@media (max-width:639px){.tbl thead{display:none}.tbl tr{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) 0;box-shadow:inset 0 -1px 0 var(--line)}.tbl td{display:grid;grid-template-columns:64px 1fr;column-gap:var(--s3);padding:0;box-shadow:none}.tbl td::before{content:attr(data-label);color:var(--dim)}}
.plate-wrap{position:relative;margin-top:0}
.plate.pkl{grid-template-columns:1fr!important;background:none!important}
@media (min-width:640px){.plate.pkl{grid-template-columns:1fr 1fr!important}}

/* ---------- v6 (2 Nov 2026): footer as one measured bar; Halko Private strip; marks loop again ---------- */
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s5);row-gap:0}
.foot-bar .foot-lock{flex:0 0 100%;min-height:44px;margin-bottom:var(--s3)}
.foot-bar .foot-nav{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s5);row-gap:0;margin:0;padding:0}
.foot-bar .foot-c,.foot-bar .foot-m{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:20px}
.foot-bar .foot-c{color:var(--dim)}
.foot-bar .foot-m a{color:var(--mut);min-height:auto;padding:var(--s1) 0}
@media (min-width:1101px){
 .foot-bar{flex-wrap:nowrap;justify-content:space-between;column-gap:var(--s5)}
 .foot-bar .foot-lock{flex:0 0 auto;margin-bottom:0}
 .foot-bar .foot-nav{display:contents}
 .foot-bar > a,.foot-bar li{flex:0 0 auto}
}
.priv{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:var(--s1);margin-top:var(--s5);padding:var(--s4) 0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;font-size:14px;line-height:20px;color:var(--mut);max-width:none}
.priv .plk{flex:0 0 16px;width:16px;height:16px;color:#EDB27C;display:block}
.priv b{color:var(--fg);font-weight:600;letter-spacing:.01em}
.priv span{flex:1 1 280px}

/* ---------- v7 (2 Nov 2026): contact head tightened (owner: too much dead space, head floating) ----------
   Home #contact: hairline > eyebrow 48 (desk) / 32 (390), eyebrow > H2 8, H2 > intro 8, intro > legend 24.
   /contact/: the page head sits in the same 576 column as the form (one left edge), no hairline between head and form, mail line > legend 32. */
#contact.sec{padding-top:clamp(32px,4vw,48px)}
#contact>.shead{margin-bottom:var(--s5)}
#contact>.shead .eb{margin-bottom:var(--s2)}
#contact>.shead .ss{margin-top:var(--s2)}
.ph.ph-c{width:100%;max-width:calc(var(--col) + 2*var(--gut));margin-inline:auto;padding-bottom:0}
.ph.ph-c .h1{font-size:clamp(40px,5vw,56px);line-height:1.06;max-width:none}
.ph.ph-c .lede{margin-top:var(--s3)}
.ph-c+#contact.sec{background:none;padding-top:var(--s6)}

/* ---------- v7 assemble (2 Nov 2026): Security in the nav, Private strip links to it, Team AI sample exchange ---------- */
.priv-a{color:var(--fg);background:linear-gradient(var(--cu),var(--cu)) 0 100%/0 1px no-repeat,linear-gradient(var(--line2),var(--line2)) 0 100%/100% 1px no-repeat;padding-bottom:var(--s1);transition:background-size var(--t-fill) var(--ease)}
@media (hover:hover){.priv-a:hover{background-size:100% 1px,100% 1px}}
.acc p a{color:var(--fg);background:linear-gradient(var(--line2),var(--line2)) 0 100%/100% 1px no-repeat;padding-bottom:var(--s1)}
.ex{display:flex;flex-direction:column;gap:var(--s3);max-width:var(--measure);padding:var(--s5) 0;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.ex figcaption{font-size:13px;line-height:20px;color:var(--dim)}
.ex-q{font-size:16px;line-height:24px;color:var(--mut)}
.ex-a{font-size:18px;line-height:28px;color:var(--fg)}

/* Iris rest halo + label glow kept from v2 (soft copper under the pill). */
.iris{box-shadow:0 0 0 .5px rgba(242,192,143,.08),0 10px 28px -16px rgba(210,141,78,.5)}
.iris .t{text-shadow:0 0 18px rgba(210,141,78,.22)}
@media (hover:hover){.iris:hover{box-shadow:0 0 0 .5px rgba(242,192,143,.18),0 12px 32px -14px rgba(210,141,78,.7)}}

/* ---------- Ask Talos disc: one soft light runs round the copper rim, calm and continuous (9 s). ---------- */
@property --ta{syntax:"<angle>";inherits:false;initial-value:0deg}
.disc::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.25px;pointer-events:none;
 background:conic-gradient(from var(--ta),rgba(210,141,78,0) 0deg,rgba(210,141,78,0) 200deg,rgba(210,141,78,.55) 290deg,#F9D1AC 340deg,rgba(249,209,172,0) 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 animation:talos-r 9s linear var(--loop)}
.disc{box-shadow:inset 0 0 0 1px var(--warm),0 0 24px -8px rgba(210,141,78,.35),0 12px 32px -16px rgba(0,0,0,.9)}
@keyframes talos-r{to{--ta:360deg}}

/* ---------- Need chips: calm copper hover (warm ring, soft glow, 1px lift) ---------- */
.chip>span{transition:box-shadow var(--t-out) var(--ease),transform var(--t-out) var(--ease),background-color var(--t-out) var(--ease)}
@media (hover:hover){
 .chip:hover>span{box-shadow:inset 0 0 0 1px rgba(210,141,78,.55),0 12px 28px -18px rgba(210,141,78,.55);background-color:rgba(210,141,78,.04);transform:translateY(-1px);transition-duration:var(--t-in)}
 .chip input:checked:hover+span{box-shadow:inset 0 0 0 1px var(--cu-hi),0 12px 28px -18px rgba(210,141,78,.7)}
}
.chip input:checked+span{background-color:rgba(210,141,78,.06)}

/* ---------- Four jobs: real cards (home Services, pricing, Security two ways). Whole card is the link target. ---------- */
.blk.stack{grid-template-columns:1fr!important;row-gap:var(--s5)}
.plate-wrap .plate,.plate.pkl{gap:var(--s4)!important;background:none!important}
@media (min-width:1101px){.plate-wrap .plate:not(.two):not(.pkl){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (min-width:641px) and (max-width:1100px){.plate-wrap .plate:not(.pkl){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:641px){.plate.pkl{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.plate-wrap .plate,.plate.pkl{grid-template-columns:1fr!important}}
.plate-wrap .plate .cell,.plate.pkl .pkr{position:relative;padding:var(--s6) var(--s5) var(--s5)!important;border-radius:16px;
 background:linear-gradient(180deg,rgba(243,244,246,.03),rgba(243,244,246,0) 48%) var(--bg2)!important;box-shadow:inset 0 0 0 1px var(--line)!important;
 transition:box-shadow var(--t-out) var(--ease),transform var(--t-out) var(--ease)}
.plate.pkl .pkr{padding:var(--s5)!important}
@media (hover:hover){.plate-wrap .plate .cell:hover,.plate.pkl .pkr:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(210,141,78,.45),0 20px 40px -28px rgba(210,141,78,.6)!important;transition-duration:var(--t-in)}}
.plate .cell .ln,.pkr .ln{position:static;color:var(--cu-hi)}
.plate .cell .ln::before,.pkr .ln::before{content:"";position:absolute;inset:0;border-radius:16px;z-index:1}
.plate .cell .ln .rule{left:var(--s5);right:var(--s5);bottom:calc(var(--s5) + var(--s2));background:rgba(210,141,78,.32)}
.pkr .ln .rule{left:calc(var(--s5) + 40px + var(--s4));right:var(--s5);bottom:calc(var(--s5) + var(--s2));background:rgba(210,141,78,.32)}
.pkr .ln{padding-bottom:var(--s4);min-height:48px;display:flex;align-items:flex-end}
@media (hover:hover){.plate .cell:hover .rule::after,.pkr:hover .rule::after{transform:scaleX(1)}}
.plate .cell .ln:focus-visible,.pkr .ln:focus-visible{outline:none}
.plate .cell:has(.ln:focus-visible),.pkr:has(.ln:focus-visible){outline:2px solid var(--cu-hi);outline-offset:4px}
.plate-wrap .plate .cell .mk{margin-bottom:var(--s4)}

/* ---------- Halko Private strip: one quiet line in a warm hairline frame ---------- */
.priv{margin-top:var(--s4);padding:var(--s4) var(--s5);border-radius:16px;background:var(--bg3)!important;box-shadow:inset 0 0 0 1px var(--warm);column-gap:var(--s3)}
.priv span{color:var(--dim)}

/* ---------- Contact head v8 (owner locks 2 Nov 2026, from contact-form-eye research) ----------
   Home only (#services ~ #contact); the /contact/ page keeps its own page head.
   One rule per boundary, gutter-wide like every .sec. No eyebrows. Section H2s 32/40 phone, 40/48 desk.
   Desk two-column split reverted 2 Nov (contact beauty): one 576 column at every width. */
#services .sh,#services~#contact .sh{font-size:32px;line-height:40px;letter-spacing:-.02em;font-weight:600}
#services~#contact.sec{padding-top:var(--sec);background:linear-gradient(var(--line),var(--line)) var(--gut) 0/calc(100% - 2*var(--gut)) 1px no-repeat}
#services~#contact .sh{max-width:14em}
#services~#contact>.shead{margin-bottom:var(--s6)}
#services~#contact>.shead .ss{margin-top:var(--s3);text-wrap:pretty}
#need legend{font-size:16px;line-height:24px;color:var(--fg);font-weight:500;margin-bottom:var(--s3)}
#need legend .opt{font-size:13px;line-height:20px;color:var(--dim);font-weight:400}
@media (min-width:1024px){
 #services .sh,#services~#contact .sh{font-size:40px;line-height:48px}
}

/* ---------- Contact beauty (2 Nov 2026): two-column split reverted. One calm 576 column, stacked like the hero:
   heading, intro, form, then "What happens next". One rule (the section's own gutter-wide hairline). Spacing on the 4-96 scale.
   Chips: quiet hairline tiles, no lift, no glow, no copper until ticked. Shared by home and /contact/. ---------- */
#contact>.shead,#services~#contact>.shead{margin-bottom:var(--s6)}
#services~#contact .sh{max-width:none}
#services~#contact.sec{padding-top:var(--s8)}
#contact .chips{margin:0 0 var(--s3)}
#need .cg{gap:var(--s2)}
#need .chip>span{min-height:64px;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 16px + var(--s3));border-radius:12px;
 box-shadow:inset 0 0 0 1px rgba(243,244,246,.09);background-color:transparent;transform:none;
 transition:box-shadow var(--t-out) var(--ease),background-color var(--t-out) var(--ease)}
#need .chip b{font-size:16px;line-height:24px;font-weight:500;color:var(--fg)}
#need .chip small{font-size:13px;line-height:20px;color:var(--dim);transition:color var(--t-out) var(--ease)}
#need .chip>span::after{top:calc(var(--s3) + 4px);margin-top:0;box-shadow:inset 0 0 0 1px rgba(243,244,246,.30)}
#need .chip input:checked+span{box-shadow:inset 0 0 0 1px rgba(210,141,78,.55);background-color:rgba(210,141,78,.04)}
#need .chip input:checked+span small{color:var(--mut)}
#need .chip input:checked+span::after{box-shadow:inset 0 0 0 1px var(--cu)}
@media (hover:hover){
 #need .chip:hover>span{box-shadow:inset 0 0 0 1px rgba(243,244,246,.18);background-color:rgba(243,244,246,.015);transform:none;transition-duration:var(--t-in)}
 #need .chip input:checked:hover+span{box-shadow:inset 0 0 0 1px rgba(210,141,78,.8);background-color:rgba(210,141,78,.06)}
}
#contact .about{margin:0 0 var(--s6)}
#contact .fields{gap:var(--s5);margin-bottom:var(--s4)}
#contact .more{margin-bottom:var(--s6)}
#contact .next{margin-top:var(--s7);padding-top:0;background:none;row-gap:var(--s3)}
#contact .next b{font-weight:500}
@media (min-width:1024px){
 #services~#contact.sec{padding-top:var(--s9)}
 #contact>.shead,#services~#contact>.shead{margin-bottom:var(--s7)}
 #contact .next{margin-top:var(--s8)}
}

/* ---------- HALKO HOVER SYSTEM "Lit from within" (2 Nov 2026) ----------
   One idea: nothing lifts and no box glows. The object's own anatomy answers: the mark moves first, light comes from the mark,
   the link's copper ink draws itself and lands on a Halko dot. Secure and Private each get their own meaning: Secure is scanned, Private is sealed.
   Order on enter: mark 0 ms, field 0 to 420 ms, ink 60 to 380 ms, dot 240 to 460 ms. Exit is quicker (240 ms) and the ink leaves to the right.
   Easing: enter cubic-bezier(.25,1,.5,1) (fast start, long soft landing), exit cubic-bezier(.4,0,.6,1).
   Touch: none of this runs (hover:hover only). Reduced motion: the global rule stops every transition and animation, so states snap and nothing travels. */
:root{--h-q:cubic-bezier(.25,1,.5,1);--h-o:cubic-bezier(.4,0,.6,1);--h-ink:320ms;--h-lit:420ms;--h-back:240ms}
@property --lit{syntax:"<number>";inherits:true;initial-value:0}
@property --seal{syntax:"<angle>";inherits:false;initial-value:0deg}

/* 1. Four jobs (home, pricing): no lift, no copper rim, no outer glow. The rim stays the same hairline. Light comes out of the mark. */
.plate-wrap .plate:not(.two) .cell,.plate.pkl .pkr{--lx:44px;--ly:52px;transform:none!important;box-shadow:inset 0 0 0 1px var(--line)!important;
 background:radial-gradient(260px 220px at var(--lx) var(--ly),rgba(210,141,78,calc(.18 * var(--lit))),rgba(210,141,78,calc(.06 * var(--lit))) 45%,rgba(210,141,78,0) 72%),
  linear-gradient(180deg,rgba(243,244,246,.03),rgba(243,244,246,0) 48%) var(--bg2)!important;
 transition:--lit var(--h-back) var(--h-o)!important}
.plate.pkl .pkr{--lx:44px;--ly:44px}
.plate .cell .who,.pkr .pkr-w{transition:color var(--h-back) var(--h-o)}
.plate .cell .ln,.pkr .ln{transition:color var(--h-back) var(--h-o)}
.mk .ring{transform-box:view-box;transform-origin:12px 12px;transition:transform 600ms var(--h-q)}
@media (hover:hover){
 .plate-wrap .plate:not(.two) .cell:hover,.plate.pkl .pkr:hover{--lit:1;transform:none!important;box-shadow:inset 0 0 0 1px var(--line)!important;transition:--lit var(--h-lit) var(--h-q)!important}
 .plate .cell:hover .who,.pkr:hover .pkr-w{color:var(--mut);transition:color var(--t-in) var(--h-q) 40ms}
 .plate .cell:hover .ln,.pkr:hover .ln{color:#FFE6CE;transition:color var(--t-in) var(--h-q) 60ms}
 /* each mark answers in its own meaning */
 .cell:nth-child(1):hover .lw,.pkr:nth-child(1):hover .lw{transform:translate(1.4px,-1.4px)}            /* Launch: the lead dot takes off */
 .cell:nth-child(2):hover .ring,.pkr:nth-child(2):hover .ring{transform:rotate(30deg)}                   /* Signature Year: the year moves on one month */
 .cell:nth-child(3):hover .sw,.pkr:nth-child(3):hover .sw{transform:scale(1.1)}                          /* Secure: the seal presses in */
 .cell:nth-child(4):hover .aw,.pkr:nth-child(4):hover .aw{transform:translate(-.8px,.8px)}               /* Team AI: the agent settles into its place */
 .mk svg .lw,.mk svg .sw,.mk svg .aw{transition:transform 420ms var(--h-q)!important}
}

/* 2. Text links (.ln everywhere): copper ink draws left to right, then a 4 px Halko dot lands at the end. On leave the ink runs off to the right. */
.ln .rule::after{transform-origin:right;transition:transform var(--h-back) var(--h-o)}
.ln .rule::before{content:"";position:absolute;right:-2px;top:-1.5px;width:4px;height:4px;border-radius:50%;background:var(--cu-hi);transform:scale(0);transition:transform 160ms var(--h-o)}
@media (hover:hover){
 .ln:hover .rule::after,.plate .cell:hover .rule::after,.pkr:hover .rule::after{transform:scaleX(1);transform-origin:left;transition:transform var(--h-ink) var(--h-q) 60ms}
 .ln:hover .rule::before,.plate .cell:hover .rule::before,.pkr:hover .rule::before{transform:scale(1);transition:transform 220ms cubic-bezier(.3,1.5,.5,1) 240ms}
}

/* 3. Security, two ways in: Secure is scanned, Private is sealed. Neither card moves; neither rim glows outwards. */
.plate.two .cell{overflow:hidden;isolation:isolate;transform:none!important;box-shadow:inset 0 0 0 1px var(--line)!important;transition:box-shadow var(--h-back) var(--h-o)!important}
.plate.two .cell .who{transition:color var(--h-back) var(--h-o)}
/* Secure: one soft copper scan line passes top to bottom, once, like the test it describes */
.plate.two .cell:first-child::after{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;opacity:0;transform:translateY(-100%);
 background:linear-gradient(rgba(249,209,172,.55),rgba(249,209,172,.55)) 0 100%/100% 1px no-repeat,linear-gradient(180deg,rgba(210,141,78,0),rgba(210,141,78,.08));
 -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@keyframes hv-scan{0%{top:0;transform:translateY(-100%);opacity:1}80%{opacity:1}100%{top:100%;transform:translateY(0);opacity:0}}
/* Private: the shackle clicks shut, the room dims a step, and a copper seal runs once round the rim and closes by the lock */
.plate.two .cell:last-child::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:conic-gradient(from -62deg,rgba(210,141,78,.42) 0deg,rgba(210,141,78,.42) max(0deg,calc(var(--seal) - 28deg)),#F9D1AC var(--seal),rgba(249,209,172,0) var(--seal));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 transition:--seal var(--h-back) var(--h-o)}
.plate.two .pl path:first-child{transition:transform var(--h-back) var(--h-o)}
@media (hover:hover){
 .plate.two .cell:hover{transform:none!important;box-shadow:inset 0 0 0 1px var(--line)!important}
 .plate.two .cell:hover .who{color:var(--mut);transition:color var(--t-in) var(--h-q) 40ms}
 .plate.two .cell:hover .ln{color:#FFE6CE;transition:color var(--t-in) var(--h-q) 60ms}
 .plate.two .cell:first-child:hover::after{animation:hv-scan 900ms cubic-bezier(.45,0,.25,1) 1 both}
 .plate.two .cell:last-child:hover{box-shadow:inset 0 0 0 1px var(--line),inset 0 0 96px rgba(5,7,10,.45)!important;transition:box-shadow 600ms var(--h-q)!important}
 .plate.two .cell:last-child:hover::after{--seal:360deg;transition:--seal 1100ms cubic-bezier(.6,0,.3,1) 120ms}
 .plate.two .cell:last-child:hover .pl path:first-child{transform:translateY(1.5px);transition:transform 220ms cubic-bezier(.3,1.6,.5,1)}
}

/* 4. Need chips: left as the contact pass set them (quiet hairline to 18%, nothing moves). No hover rules here on purpose. */

/* 5. Header nav: a copper hairline draws in from the left under the word and leaves to the right. The current page keeps its quiet grey line. */
.nav li a::after{opacity:1;background:rgba(249,209,172,.7);transform:scaleX(0);transform-origin:right;transition:transform var(--h-back) var(--h-o)}
.nav li a[aria-current]::after{background:var(--line2);transform:none}
@media (hover:hover){.nav li a:not([aria-current]):hover::after{transform:scaleX(1);transform-origin:left;transition:transform 300ms var(--h-q)}}

/* 6. Reduced motion: still. The global rule stops everything else; these lines beat the !important transitions above. States snap, nothing travels. */
@media (prefers-reduced-motion:reduce){
 html .plate-wrap .plate:not(.two) .cell,html .plate-wrap .plate:not(.two) .cell:hover,html .plate.pkl .pkr,html .plate.pkl .pkr:hover,
 html .plate.two .cell,html .plate.two .cell:hover,html .plate.two .cell:last-child:hover,
 html .mk svg .lw,html .mk svg .sw,html .mk svg .aw,html .mk .ring{transition:none!important;animation:none!important}
}

/* ---- Header bar (2 Nov): one continuous bar, fixed. Clear over the top of the page; once you scroll it settles into one solid calm bar (page colour, one hairline), a little shorter. No blur, no glass. ---- */
:root{--bh:72px;--bh-s:60px}
@media (max-width:640px){:root{--bh-s:56px}}
html{scroll-padding-top:calc(var(--bh-s) + env(safe-area-inset-top) + 16px)}
.bar{height:calc(var(--bh) + env(safe-area-inset-top));position:relative;z-index:40}
.bar-in{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top);background-color:transparent;border:0;box-shadow:none;transition:none}
.bar-in>.nav{height:var(--bh);transition:height 360ms var(--h-q)}
html.scrolled .bar-in{background-color:transparent;box-shadow:none}
html.scrolled .bar-in>.nav{height:var(--bh-s)}
.sheet .nav{height:calc(var(--bh) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
html.scrolled .sheet .nav{height:calc(var(--bh-s) + env(safe-area-inset-top))}
@media (prefers-reduced-motion:reduce){.bar-in,.bar-in>.nav{transition:none}}
@media print{.bar{height:auto}.bar-in{position:static;background:none;box-shadow:none}}

/* 2 Nov: no hairline, no shadow under the bar. Solid page colour only, so the bar melts into the page. */
.bar,.bar-in,.bar-in>.nav,html.scrolled .bar-in{border-bottom:0;box-shadow:none}

/* 2 Nov: no CTA underlines. The full-width copper rules under links read as template/AI. Links are just words now:
   at rest no line; on hover the words warm and a 1 px underline sits under the words only (not the card width). */
.ln .rule,.ln .rule::before,.ln .rule::after{display:none!important}
.ln{text-decoration:none;transition:color var(--t-out) var(--ease)}
@media (hover:hover){
 .ln:hover,.plate .cell:hover .ln,.pkr:hover .ln{color:var(--cu-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(249,209,172,.55);transition-duration:var(--t-in)}
}

/* 2 Nov 17:55 (owner pt604u): Four jobs + Security Two ways = A · Ledger (board telling-lotus-ysjgo/a.html). Ruled rows, no cards. */
.jx:not(.in) .mk svg *{animation-play-state:paused!important}
.la{margin-top:24px;border-top:1px solid var(--line)}
.la .j{position:relative;display:grid;grid-template-columns:40px minmax(200px,1fr) minmax(0,1.5fr) 260px;align-items:center;column-gap:32px;padding:28px 16px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;
 background:linear-gradient(90deg,rgba(210,141,78,.10),rgba(210,141,78,.03) 55%,rgba(210,141,78,0)) no-repeat 0 0/0% 100%;transition:background-size 360ms var(--ease)}
.la.nomk .j{grid-template-columns:minmax(200px,1fr) minmax(0,1.5fr) 260px}
.la .j:focus-visible{outline:2px solid var(--cu-hi);outline-offset:4px}
.la .mk{margin:0}.la .mk svg{width:40px;height:40px}
.la .who{font-size:13px;line-height:20px;color:var(--dim);display:block}
.la h3{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.015em;margin:0;transition:transform 260ms var(--ease)}
.la p{color:var(--mut);max-width:30em;margin:0}
.la .cta{justify-self:end;display:inline-flex;white-space:nowrap;letter-spacing:0;align-items:center;gap:8px;font-size:15px;line-height:24px;font-weight:600;color:var(--cu-hi);transition:color 200ms var(--ease)}
.la .ar{width:16px;height:16px;flex:none;transition:transform 200ms var(--ease)}
@media (hover:hover){.la .j:hover{background-size:100% 100%}.la .j:hover h3{transform:translateX(6px)}.la .j:hover .cta{color:#FFE6CE}.la .j:hover .ar{transform:translateX(4px)}
 .la .j:hover .lw{transform:translate(1.4px,-1.4px)}.la .j:hover .ring{transform:rotate(30deg)}.la .j:hover .sw{transform:scale(1.1)}.la .j:hover .aw{transform:translate(-.8px,.8px)}}
@media (max-width:820px){.la .j{grid-template-columns:40px 1fr;row-gap:8px;padding:24px 0;align-items:start}.la .mk{grid-row:1/4}.la p,.la .cta{grid-column:2}.la .cta{justify-self:start;margin-top:4px}
 .la.nomk .j{grid-template-columns:1fr}.la.nomk p,.la.nomk .cta{grid-column:1}}
@media (prefers-reduced-motion:reduce){.la *,.la .j{transition:none!important}}

/* 2 Nov 17:45 (owner): the bar is one state from first paint. Solid page colour, one height (the first-frame 72 px), no transition, no line, no shadow. */
:root{--bh-s:var(--bh)}
@media (max-width:640px){:root{--bh-s:var(--bh)}}
.bar-in,html.scrolled .bar-in{background-color:transparent!important;border:0!important;box-shadow:none!important;transition:none!important}
.bar-in>.nav,html.scrolled .bar-in>.nav{height:var(--bh)!important;border:0!important;box-shadow:none!important;transition:none!important}
.bar::before,.bar::after,.bar-in::before,.bar-in::after{content:none!important}

/* 2 Nov 18:10 iOS Safari 26 tint: Safari reads body (not html) background and the fixed edge bar. Both solid #11151B. */
html,body{background-color:#11151B}

/* === Copper warm-mid lock (2 Nov 2026): copper = Iris + marks + one accent per block; text/links ivory === */
:root{--ivory:#E9E3DA}
html .la .cta{color:var(--ivory)}
html .la .cta .ar{color:var(--mut);transition:color 200ms var(--ease),transform 200ms var(--ease)}
html .la .j:hover .cta{color:#FFE6CE}
html .la .j:hover .cta .ar{color:var(--cu)}
html .priv{box-shadow:inset 0 0 0 1px var(--line2)}
html .about b{color:var(--ivory)}
html .more summary::before{background:linear-gradient(var(--mut),var(--mut)) center/12px 1px no-repeat,linear-gradient(var(--mut),var(--mut)) center/1px 12px no-repeat}

/* === Need chips: F Corner tick (owner lock). No left box; top-right corner mark, copper when ticked === */
html .chip>span,html #need .chip>span{padding-left:var(--s4);padding-right:calc(var(--s4) + 20px)}
html .chip>span::after,html #need .chip>span::after,html .chip input:checked+span::after,html #need .chip input:checked+span::after{content:none!important;display:none!important}
html .chip>span::before{content:"";position:absolute;left:auto;right:10px;top:10px;width:14px;height:14px;box-sizing:border-box;border-top:1px solid rgba(243,244,246,0);border-right:1px solid rgba(243,244,246,0);border-top-right-radius:6px;pointer-events:none;transition:border-color 200ms ease}
@media (hover:hover){html .chip:hover>span::before{border-color:rgba(243,244,246,.4)}}
html .chip input:checked+span::before{border-color:var(--cu);border-top-width:2px;border-right-width:2px}
html .chip input:checked+span{box-shadow:inset 0 0 0 1px rgba(210,141,78,.55)}
html .chip input:checked+span small{color:var(--mut)}

/* 2 Nov 19:15 iOS Safari 26 tint, final: Safari tints the status bar from the background-color of a FIXED element at the top edge and paints that band differently from the page. So the fixed bar and menu sheet carry no background of their own; #11151B is painted by ::before (Safari does not sample pseudo-elements). Status bar + toolbar then fall back to html/body #11151B, the same paint as the page. */
html,body{background-color:#11151B!important}
.bar-in,html.scrolled .bar-in{background-color:transparent!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:none!important}.sheet{background-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}html body .bar-in::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;background-color:#11151B;pointer-events:none}html body .sheet::after{content:"";position:absolute;inset:0;z-index:-1;background-color:#11151B;pointer-events:none}
@media print{html body .bar-in::before,html body .sheet::after{display:none!important}}

/* 2 Nov 19:30 need-chip tutorial hint + ghost samples (Quiet Iris).
   One chip, once per visitor, after the page has settled: one slow faint copper breath and ghost corner tick, then rest (softened 2 Nov 19:50: read as a screen glitch). Never after a choice. */
/* restored 2 Nov 20:00: softer than the first cut (edge .42 / glow .22) but clearly seen. Two slow breaths, 5.6s total, starts only once every option is on screen and settled. */
/* v3 2 Nov 20:30: clearly readable on a phone OLED. Two copper breaths, 6s total. */
@keyframes hk-ghost{0%,50%,100%{box-shadow:inset 0 0 0 1px rgba(210,141,78,0),inset 0 0 0 0 rgba(210,141,78,0),0 0 0 0 rgba(210,141,78,0);background-color:rgba(210,141,78,0)}
 22%,28%,72%,78%{box-shadow:inset 0 0 0 1px rgba(210,141,78,.58),inset 0 0 22px -8px rgba(210,141,78,.28),0 0 22px -4px rgba(210,141,78,.38);background-color:rgba(210,141,78,.055)}}
@keyframes hk-ghost-tick{0%,50%,100%{border-color:rgba(210,141,78,0)}22%,28%,72%,78%{border-color:rgba(210,141,78,.75)}}
#need .chip.hint>span{animation:hk-ghost 6s ease-in-out 1}
#need .chip.hint>span::before{animation:hk-ghost-tick 6s ease-in-out 1}
#need .chip.hint input:checked+span,#need .chip.hint input:checked+span::before{animation:none}
@media (prefers-reduced-motion:reduce){#need .chip.hint>span{animation:none;box-shadow:inset 0 0 0 1px rgba(210,141,78,.45)}#need .chip.hint>span::before{animation:none;border-color:rgba(210,141,78,.6)}}
/* Ghost samples: read as a quiet worked example, clear the moment you focus */
.field input::placeholder,.field textarea::placeholder{color:rgba(243,244,246,.30);font-style:normal;opacity:1;transition:opacity 180ms var(--ease,ease)}
.field input:focus::placeholder,.field textarea:focus::placeholder{opacity:0}

/* 2 Nov 19:45 need-chip icons: a small line glyph per need, ivory at rest, copper accent; whole glyph warms to copper when selected. Corner tick unchanged. */
html .chip>span,html #need .chip>span{padding-left:calc(var(--s4) + 20px + var(--s3))}
.chip .ni{position:absolute;left:var(--s4);top:calc(50% - 10px);width:20px;height:20px;fill:none;stroke:rgba(243,244,246,.5);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 200ms var(--ease,ease),opacity 200ms var(--ease,ease)}
.chip .ni .a{stroke:var(--cu)}
@media (hover:hover){.chip:hover .ni{stroke:rgba(243,244,246,.72)}}
.chip input:checked+span .ni{stroke:rgba(249,209,172,.85)}
.chip input:checked+span .ni .a{stroke:var(--cu-hi)}

/* Typewriter ghost samples: one field at a time types a worked example with a thin copper caret, then rests at 30% ivory. Clears on focus. */
.field{position:relative}
.field .tw{position:absolute;pointer-events:none;display:flex;gap:0;align-items:center;white-space:pre;overflow:hidden;font-size:16px;line-height:24px;color:rgba(243,244,246,.30);transition:opacity 180ms var(--ease,ease)}
.field .tw i{display:inline-block;width:1.5px;height:18px;margin-left:1px;background:var(--cu);border-radius:1px;opacity:0;transition:opacity 160ms ease}
.field .tw.typing i{opacity:.9}
.field .tw.idle i{animation:tw-blink 1.05s steps(1) 3;opacity:0}
@keyframes tw-blink{0%{opacity:.9}50%{opacity:0}}
.field .tw.off{opacity:0}
/* ink-sweep: untyped remainder stays on screen as faint pre-ink while the caret passes, so a field is never blank */
.field .tw u{color:rgba(243,244,246,.30);transition:color 260ms var(--ease,ease)}
.field .tw.sweep u{color:rgba(243,244,246,.12)}
.field .tw s{color:inherit}
.field.tw-on input::placeholder{color:transparent}

/* Calm one-at-a-time: Talos rim light rests while a hover, the chip hint or the typewriter is playing. */
.disc::before{transition:opacity 420ms var(--ease,ease)}
body.hk-quiet .disc::before,body.hk-busy .disc::before{opacity:0;animation-play-state:paused}
body.hk-busy .tal-pop:not(.tal-panel){opacity:0;pointer-events:none}

/* ---- Full systems: quiet gold identity for the invite-only tier (rev 2 Nov 20:40). Resting: gold glyph, a whisper of gold on the edge. Cue: one gold breath, about a second, then it settles (no endless loop). Ticked: locks gold (edge, corner tick, glyph), not the copper ticked look. ---- */
.chip-gold{--au:#DDBD76;--au-lo:rgba(217,184,113,.7)}
.chip-gold .ni{stroke:var(--au-lo)}
.chip-gold .ni .a{stroke:var(--au)}
html #need .chip-gold>span{box-shadow:inset 0 0 0 1px rgba(217,184,113,.2)}
@keyframes au-cue{0%,100%{box-shadow:inset 0 0 0 1px rgba(217,184,113,.2),inset 0 0 0 0 rgba(217,184,113,0),0 0 0 0 rgba(217,184,113,0);background-color:rgba(217,184,113,0)}
 45%,55%{box-shadow:inset 0 0 0 1px rgba(217,184,113,.6),inset 0 0 20px -8px rgba(217,184,113,.26),0 0 22px -4px rgba(217,184,113,.34);background-color:rgba(217,184,113,.045)}}
@keyframes au-cue-ni{0%,100%{filter:drop-shadow(0 0 0 rgba(217,184,113,0))}50%{filter:drop-shadow(0 0 4px rgba(217,184,113,.7))}}
@keyframes au-cue-tick{0%,100%{border-color:rgba(217,184,113,0)}50%{border-color:rgba(221,189,118,.7)}}
html #need .chip-gold.au-cue>span{animation:au-cue 1.2s ease-in-out 1}
html #need .chip-gold.au-cue .ni{animation:au-cue-ni 1.2s ease-in-out 1}
html #need .chip-gold.au-cue>span::before{animation:au-cue-tick 1.2s ease-in-out 1}
html #need .chip-gold input:checked+span{box-shadow:inset 0 0 0 1px rgba(221,189,118,.62);background-color:rgba(217,184,113,.05)}
html #need .chip-gold input:checked+span::before{border-color:var(--au)}
html #need .chip-gold input:checked+span small{color:rgba(221,189,118,.78)}
html #need .chip-gold.au-cue input:checked+span,html #need .chip-gold.au-cue input:checked+span::before{animation:none}
@media (hover:hover){.chip-gold:hover .ni{stroke:rgba(217,184,113,.8)}html #need .chip-gold:hover>span{box-shadow:inset 0 0 0 1px rgba(217,184,113,.32)}html #need .chip-gold input:checked:hover+span{box-shadow:inset 0 0 0 1px rgba(221,189,118,.85);background-color:rgba(217,184,113,.065)}html #need .chip-gold:hover>span::before{border-color:rgba(217,184,113,.5)}html #need .chip-gold input:checked:hover+span::before{border-color:var(--au)}}
.chip-gold input:checked+span .ni{stroke:rgba(232,204,140,.9)}
.chip-gold input:checked+span .ni .a{stroke:#EBD08E}
#contact .shead h2[tabindex="-1"]:focus{outline:none}

/* ---- Zero-lag ghost kill: no fade when the user grabs a field. ---- */
.field .tw.cut{transition:none!important;opacity:0!important}
.field .tw.cut i{transition:none!important;animation:none!important;opacity:0!important}
/* ---- Book it: rare, light pulse (transform + one soft ring, ~0.9s). ---- */
.send.pulse{animation:bk-pulse 900ms cubic-bezier(.3,.7,.3,1) 1}
@keyframes bk-pulse{0%{transform:scale(1);box-shadow:0 0 0 .5px rgba(242,192,143,.08),0 10px 28px -16px rgba(210,141,78,.5),0 0 0 0 rgba(210,141,78,.32)}35%{transform:scale(1.025)}100%{transform:scale(1);box-shadow:0 0 0 .5px rgba(242,192,143,.08),0 10px 28px -16px rgba(210,141,78,.5),0 0 0 10px rgba(210,141,78,0)}}
@media (prefers-reduced-motion:reduce){.send.pulse{animation:none}}

/* ==== 2 Nov 23:59 OTB subpages: same Halko family as home. Corner tick, copper marks, ivory text, Quiet Iris. One-shot motion; reduced motion shows final states. ==== */
/* Hero signature glyph: assembles once on load (what the home hero's video/typewriter gives home). */
.ph .pg{display:block;width:52px;height:52px;margin-bottom:var(--s5)}
.ph .pg svg{width:100%;height:100%;overflow:visible}
@media (min-width:1024px){.ph .pg{position:absolute;right:var(--gut);top:calc(var(--s8) + 4px);width:128px;height:128px;margin:0}}
.pg .gp{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
 .js .pg .gp{opacity:0;transform:translate(var(--x,0),var(--y,0));transition:opacity 520ms var(--ease),transform 720ms cubic-bezier(.2,.8,.2,1);transition-delay:calc(160ms + var(--o,0) * 140ms)}
 .js .pg.in .gp{opacity:1;transform:none}
 .js .pg .pln{stroke-dasharray:1;stroke-dashoffset:1;opacity:1;transition:stroke-dashoffset 900ms var(--ease) 160ms}
 .js .pg.in .pln{stroke-dashoffset:0}
 .js .pg-ai .d{animation:pg-dot 1.1s ease-in-out 1.1s 2 both}
 .js .pg-faq .drop{transition-timing-function:ease,cubic-bezier(.3,1.5,.5,1)}
 .js .pg-branding .rough{opacity:1;transform:rotate(-8deg) translate(5px,4px);transition:transform 900ms var(--ease) 300ms,opacity 700ms var(--ease) 700ms}
 .js .pg-branding.in .rough{transform:none;opacity:0}
 .js .pg-pricing .seal{transform:scale(1.35) rotate(-14deg);transition:opacity 260ms var(--ease) 560ms,transform 420ms cubic-bezier(.3,1.4,.5,1) 560ms}
 .js .pg-404 .lost{transform:translate(-14px,-6px) rotate(-12deg);opacity:0;transition:opacity 400ms var(--ease) 700ms,transform 1100ms cubic-bezier(.3,1.2,.4,1) 700ms}
 .js .pg-404.in .lost{opacity:1;transform:translate(-3px,-2px) rotate(-4deg)}
}
@keyframes pg-dot{0%,100%{opacity:1}40%{opacity:.25}}
.pg-ai .d2{animation-delay:1.25s!important}.pg-ai .d3{animation-delay:1.4s!important}
@media (hover:hover){.pg svg{transition:transform 600ms var(--ease)}.ph:hover .pg svg{transform:translateY(-2px)}}

/* Unique line glyphs for list items (replaces the repeated L mark). Draw in once, warm on hover. */
.ul li.gl::before{content:none!important;display:none}
.ul li.gl{grid-template-columns:24px 1fr;align-items:start}
.gi{width:20px;height:20px;margin:2px;fill:none;stroke:rgba(243,244,246,.55);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 200ms var(--ease),transform 260ms var(--ease)}
.gi .a{stroke:var(--cu)}
.gi rect.a{fill:none}
@media (prefers-reduced-motion:no-preference){
 .js .ul li.gl .gi *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 760ms var(--ease);transition-delay:calc(120ms + var(--d,0) * 70ms)}
 .js .ul li.gl.on .gi *{stroke-dashoffset:0}
 .js .ul li.gl .gi .a{transition-delay:calc(420ms + var(--d,0) * 70ms)}
}
@media (hover:hover){.ul li.gl:hover .gi{stroke:rgba(243,244,246,.85);transform:translateY(-1px)}.ul li.gl:hover .gi .a{stroke:var(--cu-hi)}}
.ul.no li.gl .gi{stroke:rgba(243,244,246,.4)}
.h3.hi{gap:var(--s3)}.h3.hi .gi{width:22px;height:22px;margin:0}
/* Redline: what we take out is struck through once, copper hairline. */
.rl .x{text-decoration:none;color:var(--dim);background:linear-gradient(var(--cu),var(--cu)) 0 58%/100% 1px no-repeat}
@media (prefers-reduced-motion:no-preference){.js .rl .x{background-size:0 1px;transition:background-size 640ms var(--ease) calc(500ms + var(--d,0) * 90ms)}.js .rl li.on .x{background-size:100% 1px}}

/* ---- Team AI: conversation outtakes ---- */
.chat{display:flex;flex-direction:column;gap:var(--s4);max-width:560px}
.chat-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-self:flex-start;padding:3px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--line2);isolation:isolate}
.seg{position:relative;z-index:1;min-height:36px;padding:0 var(--s4);border:0;background:none;color:var(--mut);font:inherit;font-size:13px;font-weight:600;line-height:20px;cursor:pointer;border-radius:18px;transition:color 200ms var(--ease);-webkit-tap-highlight-color:transparent}
.seg.on{color:var(--fg)}
.seg:focus-visible{outline:2px solid var(--cu-hi);outline-offset:2px}
.seg-i{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:18px;background:rgba(243,244,246,.06);box-shadow:inset 0 0 0 1px var(--warm);transition:transform 320ms cubic-bezier(.3,.8,.3,1)}
.chat[data-on="t"] .seg-i{transform:translateX(100%)}
@media (hover:hover){.seg:not(.on):hover{color:var(--fg)}}
.chat-win{position:relative;border-radius:16px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line);padding:var(--s4) var(--s4) var(--s5);overflow:hidden}
.chat-win::before{content:"";position:absolute;right:12px;top:12px;width:14px;height:14px;border-top:1.5px solid var(--cu);border-right:1.5px solid var(--cu);border-top-right-radius:6px;opacity:.8}
.chat-top{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s6) var(--s4) 0;margin-bottom:var(--s4);box-shadow:inset 0 -1px 0 var(--line)}
.chat-av{display:grid;grid-template-columns:7px 7px;gap:2px;flex:none;padding:7px;border-radius:50%;background:rgba(210,141,78,.08);box-shadow:inset 0 0 0 1px var(--warm)}
.chat-av i{width:7px;height:7px;background:var(--cu)}.chat-av i:nth-child(2){border-radius:50%;background:var(--cu-hi)}.chat-av i:nth-child(3){opacity:.55}
.chat-id{display:flex;flex-direction:column;min-width:0}
.chat-id b{font-size:14px;line-height:20px;font-weight:600;color:var(--fg)}
.chat-id small{font-size:12px;line-height:16px;color:var(--dim)}
.chat-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--dim)}
.chat-live i{width:6px;height:6px;border-radius:50%;background:#7FB89A;box-shadow:0 0 0 3px rgba(127,184,154,.12)}
.chat-log{display:flex;flex-direction:column;gap:var(--s3)}
.chat-log[hidden]{display:none}
.bub{max-width:86%;padding:var(--s3) var(--s4);border-radius:14px;font-size:15px;line-height:22px}
.bub p{margin:0}
.bm{display:block;font-size:11px;line-height:16px;letter-spacing:.02em;color:var(--dim);margin-bottom:2px}
.bub.you{align-self:flex-start;background:rgba(243,244,246,.05);box-shadow:inset 0 0 0 1px var(--line);color:var(--mut);border-bottom-left-radius:4px}
.bub.ai{position:relative;align-self:flex-end;background:linear-gradient(180deg,rgba(210,141,78,.10),rgba(210,141,78,.04));box-shadow:inset 0 0 0 1px var(--warm);color:var(--fg);border-bottom-right-radius:4px}
.bub.ai::after{content:"";position:absolute;right:8px;top:8px;width:9px;height:9px;border-top:1.5px solid var(--cu);border-right:1.5px solid var(--cu);border-top-right-radius:4px;opacity:.75}
.bub.ai .bm{color:var(--cu-hi);opacity:.8}
.bub.dots{display:none;align-self:flex-end;gap:5px;padding:var(--s3) var(--s4);background:rgba(210,141,78,.06);box-shadow:inset 0 0 0 1px var(--warm);border-bottom-right-radius:4px}
.bub.dots i{width:5px;height:5px;border-radius:50%;background:var(--cu-hi);opacity:.35;animation:ch-dot 900ms ease-in-out infinite}
.bub.dots i:nth-child(2){animation-delay:150ms}.bub.dots i:nth-child(3){animation-delay:300ms}
@keyframes ch-dot{0%,100%{opacity:.25;transform:none}45%{opacity:.85;transform:translateY(-2px)}}
.k{border-radius:3px;background:linear-gradient(rgba(210,141,78,.0),rgba(210,141,78,0));box-shadow:0 1px 0 rgba(210,141,78,0);transition:box-shadow 260ms var(--ease),background-color 260ms var(--ease)}
.chat[data-k="1"] .k[data-k="1"],.chat[data-k="2"] .k[data-k="2"],.chat[data-k="3"] .k[data-k="3"]{background-color:rgba(210,141,78,.14);box-shadow:0 1px 0 var(--cu)}
.chat-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-self:flex-end;justify-content:flex-end}
.chat-acts span{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--s3);border-radius:15px;font-size:12px;line-height:16px;font-weight:600}
.chat-acts .slot{color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line2)}
.chat-acts .hand{color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.anat{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
.anat li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 var(--s3) 0 10px;border-radius:16px;font-size:13px;line-height:20px;font-weight:600;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line);cursor:default;transition:color 240ms var(--ease),box-shadow 240ms var(--ease)}
.anat i{position:relative;width:10px;height:10px;border-top:1.5px solid var(--line2);border-right:1.5px solid var(--line2);border-top-right-radius:5px;transition:border-color 240ms var(--ease)}
.anat li.lit,.chat[data-k="1"] .anat li[data-k="1"],.chat[data-k="2"] .anat li[data-k="2"],.chat[data-k="3"] .anat li[data-k="3"]{color:var(--fg);box-shadow:inset 0 0 0 1px var(--warm)}
.anat li.lit i,.chat[data-k="1"] .anat li[data-k="1"] i,.chat[data-k="2"] .anat li[data-k="2"] i,.chat[data-k="3"] .anat li[data-k="3"] i{border-color:var(--cu)}
@media (prefers-reduced-motion:no-preference){
 .js .chat .chat-log .bub:not(.dots),.js .chat .chat-acts{opacity:0;transform:translateY(6px);transition:opacity 380ms var(--ease),transform 420ms cubic-bezier(.2,.8,.2,1)}
 .js .chat .chat-log.s1 .you,.js .chat .chat-log.s3 .ai,.js .chat .chat-log.s4 .chat-acts{opacity:1;transform:none}
 .js .chat .chat-log.s2 .dots{display:inline-flex}
}
.ex-p{margin-top:var(--s5)}
.try{margin-top:var(--s4)}
.try-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;line-height:24px;color:var(--ivory);cursor:pointer}
.try-b .ar{width:16px;height:16px;color:var(--mut);transition:transform 200ms var(--ease),color 200ms var(--ease)}
@media (hover:hover){.try-b:hover{color:#FFE6CE}.try-b:hover .ar{transform:translateX(4px);color:var(--cu)}}

/* ---- How we work: living journey ---- */
.jr{position:relative;list-style:none;display:flex;flex-direction:column;--p:0}
.jr::before,.jr::after{content:"";position:absolute;left:19.5px;top:20px;bottom:20px;width:1px;background:var(--line2)}
.jr::after{background:linear-gradient(var(--cu),rgba(210,141,78,.35));transform-origin:top;transform:scaleY(var(--p))}
.jr li{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:var(--s5);padding:0 0 var(--s6)}
.jr li:last-child{padding-bottom:0}
.jr-m{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow 360ms var(--ease),background-color 360ms var(--ease),transform 300ms var(--ease)}
.jr-m::after{content:"";position:absolute;right:4px;top:4px;width:10px;height:10px;border-top:1.5px solid transparent;border-right:1.5px solid transparent;border-top-right-radius:5px;transition:border-color 360ms var(--ease)}
.jr-m .gi{margin:0}
.jr li.lit .jr-m{background:#151a21;box-shadow:inset 0 0 0 1px var(--warm),0 0 0 4px var(--bg),0 8px 22px -14px rgba(210,141,78,.7)}
.jr li.lit .jr-m::after{border-color:var(--cu)}
.jr li.lit .gi{stroke:rgba(243,244,246,.85)}
.jr-t{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.jr-k{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;color:var(--dim);transition:color 360ms var(--ease)}
.jr li.lit .jr-k{color:var(--cu-hi)}
.jr-t b{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:var(--fg);transition:transform 260ms var(--ease)}
.jr-d{font-size:15px;line-height:22px;color:var(--mut);max-width:34em}
@media (hover:hover){.jr li:hover .jr-m{transform:translateY(-2px)}.jr li:hover .jr-t b{transform:translateX(4px)}.jr li:hover .gi .a{stroke:var(--cu-hi)}}
@media (prefers-reduced-motion:no-preference){
 .js .jr .gi *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--ease) 80ms}
 .js .jr li.lit .gi *{stroke-dashoffset:0}
 .js .jr li .jr-t{opacity:.45;transition:opacity 420ms var(--ease)}
 .js .jr li.lit .jr-t{opacity:1}
}
.jr::after{transition:transform 120ms linear}
@media (prefers-reduced-motion:reduce){.jr{--p:1}.jr li .jr-m::after{border-color:var(--cu)}}

/* ---- Pricing: the quote sheet ---- */
.qs{position:relative;display:flex;flex-direction:column;max-width:640px;padding:var(--s5) var(--s5) var(--s6);border-radius:16px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.qs::before{content:"";position:absolute;right:14px;top:14px;width:14px;height:14px;border-top:1.5px solid var(--cu);border-right:1.5px solid var(--cu);border-top-right-radius:6px}
.qs-h{display:flex;align-items:baseline;gap:var(--s3);padding:0 var(--s6) var(--s4) 0;box-shadow:inset 0 -1px 0 var(--line2)}
.qs-t{font-size:13px;line-height:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.qs-s{font-size:13px;line-height:20px;color:var(--dim)}
.qs-r{display:grid;grid-template-columns:28px auto 1fr;grid-template-areas:"m b l" ". v v";column-gap:var(--s3);row-gap:2px;align-items:center;padding:var(--s4) 0;box-shadow:inset 0 -1px 0 var(--line)}
.qs-m{grid-area:m;display:grid;place-items:center}.qs-m .gi{margin:0}
.qs-r b{grid-area:b;font-size:16px;line-height:24px;font-weight:600}
.qs-l{grid-area:l;height:1px;align-self:center;margin-top:4px;background:radial-gradient(circle,rgba(243,244,246,.28) .8px,transparent 1.2px) 0 0/6px 1px repeat-x}
.qs-v{grid-area:v;font-size:14px;line-height:20px;color:var(--mut)}
.qs-d{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5);padding-right:110px}
.qs-d>b{font-size:16px;line-height:24px;font-weight:600}
.qs-yn{display:flex;flex-wrap:wrap;gap:var(--s2)}
.qs-yn span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 var(--s3) 0 10px;border-radius:17px;font-size:13px;line-height:20px;font-weight:600}
.qs-yn svg{width:14px;height:14px;flex:none}
.qs-y{color:var(--ivory);box-shadow:inset 0 0 0 1px var(--warm)}.qs-y svg{color:var(--cu)}
.qs-n{color:var(--mut);box-shadow:inset 0 0 0 1px var(--line2)}.qs-n svg{color:var(--dim)}
.qs-seal{position:absolute;right:var(--s5);bottom:var(--s5);width:96px;height:96px;font-family:inherit}
.qs-ring{transform-origin:48px 48px}
@media (hover:hover){.qs:hover .qs-ring{transform:rotate(24deg);transition:transform 1400ms var(--ease)}.qs .qs-ring{transition:transform 1400ms var(--ease)}}
@media (max-width:520px){.qs{padding:var(--s4) var(--s4) var(--s5)}.qs-d{padding-right:0;padding-bottom:84px}.qs-seal{width:80px;height:80px;right:var(--s4);bottom:var(--s4)}.qs-r{grid-template-columns:28px 1fr;grid-template-areas:"m b" ". v"}.qs-l{display:none}}
@media (prefers-reduced-motion:no-preference){
 .js .qs .qs-l{background-size:6px 1px;clip-path:inset(0 100% 0 0);transition:clip-path 800ms var(--ease) calc(300ms + var(--i) * 260ms)}
 .js .qs.in .qs-l{clip-path:inset(0 0 0 0)}
 .js .qs .qs-r,.js .qs .qs-d{opacity:0;transform:translateY(6px);transition:opacity 420ms var(--ease) calc(var(--i) * 220ms),transform 420ms var(--ease) calc(var(--i) * 220ms)}
 .js .qs.in .qs-r,.js .qs.in .qs-d{opacity:1;transform:none}
 .js .qs .gi *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--ease) calc(200ms + var(--i,0) * 220ms)}
 .js .qs.in .gi *{stroke-dashoffset:0}
 .js .qs .qs-seal{opacity:0;transform:scale(1.25) rotate(-16deg);transition:opacity 260ms var(--ease) 1050ms,transform 520ms cubic-bezier(.3,1.4,.5,1) 1050ms}
 .js .qs.in .qs-seal{opacity:1;transform:rotate(-6deg)}
}
.fnote{list-style:none;display:flex;flex-direction:column;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.fnote li{display:grid;grid-template-columns:24px 1fr;column-gap:var(--s3);padding:var(--s4) 0;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;font-size:15px;line-height:22px;color:var(--mut);transition:color 200ms var(--ease)}
.fm{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:22px;color:var(--cu);text-align:center;transition:transform 260ms var(--ease)}
@media (hover:hover){.fnote li:hover{color:var(--fg)}.fnote li:hover .fm{transform:translateY(-2px)}}

/* ---- Branding: quiet compare + documents ---- */
.cmp{display:grid;gap:var(--s4)}
@media (min-width:640px){.cmp{grid-template-columns:1fr 1fr}}
.cmp-c{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 260ms var(--ease),background-color 260ms var(--ease)}
.cmp-c.is-rec{background:radial-gradient(120% 90% at 100% 0,rgba(210,141,78,.09),rgba(210,141,78,0) 60%);box-shadow:inset 0 0 0 1px var(--warm)}
.cmp-c p{font-size:15px;line-height:23px;color:var(--mut)}
.cmp .h3{font-size:22px;line-height:28px;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
@media (hover:hover){.cmp-c:hover{box-shadow:inset 0 0 0 1px var(--line2)}.cmp-c.is-rec:hover{box-shadow:inset 0 0 0 1px rgba(210,141,78,.45)}}
.rec2{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 10px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--cu-hi)}
.rec2::before,.rec2::after{content:"";position:absolute;width:8px;height:8px;border-color:var(--cu);border-style:solid;border-width:0}
.rec2::before{left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:4px}
.rec2::after{right:0;top:0;border-right-width:1.5px;border-top-width:1.5px;border-top-right-radius:4px}
.spec{position:relative;display:block;width:56px;height:56px;margin-bottom:var(--s2)}
.spec i{position:absolute;inset:6px;transition:transform 900ms cubic-bezier(.2,.8,.2,1),opacity 700ms var(--ease),border-radius 900ms var(--ease),background-color 700ms var(--ease)}
.sp-p .c{background:var(--cu);border-radius:3px 22px 3px 3px}
.sp-p .r{border:1.4px dashed rgba(233,227,218,.38);border-radius:4px 18px 6px 2px;transform:rotate(-8deg) translate(5px,4px)}
.sp-r .o{border:1.4px solid rgba(233,227,218,.35);border-radius:4px}
.sp-r .n{background:var(--cu-hi);border-radius:50%;inset:12px}
@media (prefers-reduced-motion:no-preference){
 .js .cmp .sp-p .c{opacity:0}
 .js .cmp.in .sp-p .r{transform:none;opacity:0;transition-delay:200ms}
 .js .cmp.in .sp-p .c{opacity:1;transition-delay:600ms}
 .js .cmp .sp-r .n{transform:scale(0)}
 .js .cmp.in .sp-r .o{transform:scale(.55) rotate(45deg);opacity:0;transition-delay:300ms}
 .js .cmp.in .sp-r .n{transform:none;transition-delay:700ms}
}
@media (hover:hover){.cmp-c:hover .sp-p .r{opacity:.9!important;transform:rotate(-5deg) translate(3px,3px)!important;transition-delay:0ms!important}.cmp-c:hover .sp-r .n{border-radius:4px 24px 4px 4px;transition-delay:0ms!important}}
.dial{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:var(--s2);margin-top:auto;padding-top:var(--s4);box-shadow:inset 0 1px 0 var(--line)}
.dl{font-size:12px;line-height:16px;color:var(--dim)}
.dv{font-size:12px;line-height:16px;font-weight:600;color:var(--ivory)}
.dt{grid-column:1/-1;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.dt i{height:6px;border-radius:1px;background:var(--line2);transition:background-color 300ms var(--ease)}
.dial[style*="--n:3"] .dt i:nth-child(-n+3),.dial[style*="--n:10"] .dt i{background:var(--cu)}
@media (prefers-reduced-motion:no-preference){
 .js .cmp .dt i{background:var(--line2)!important;transition-delay:calc(800ms + var(--j,0) * 60ms)}
 .js .cmp.in .dial[style*="--n:3"] .dt i:nth-child(-n+3),.js .cmp.in .dial[style*="--n:10"] .dt i{background:var(--cu)!important}
}
.dt i:nth-child(1){--j:0}.dt i:nth-child(2){--j:1}.dt i:nth-child(3){--j:2}.dt i:nth-child(4){--j:3}.dt i:nth-child(5){--j:4}.dt i:nth-child(6){--j:5}.dt i:nth-child(7){--j:6}.dt i:nth-child(8){--j:7}.dt i:nth-child(9){--j:8}.dt i:nth-child(10){--j:9}
.docs>div{padding-top:var(--s5)}
.doc{position:relative;display:block;width:64px;height:72px;margin-bottom:var(--s3)}
.doc i{position:absolute;display:block}
.d-chk .hd{left:6px;top:4px;width:44px;height:58px;border-radius:3px 12px 3px 3px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line2);transition:transform 320ms var(--ease)}
.d-chk .dln{left:14px;width:28px;height:2px;background:var(--line2)}
.d-chk .dln b{position:absolute;left:-6px;top:-2px;width:4px;height:4px;background:var(--cu)}
.d-chk .dln:nth-child(2){top:20px}.d-chk .dln:nth-child(3){top:30px;width:22px}.d-chk .dln:nth-child(4){top:40px;width:25px}
.d-book .pg1,.d-book .pg2{left:12px;top:8px;width:40px;height:54px;border-radius:2px 10px 2px 2px;background:#1a2029;box-shadow:inset 0 0 0 1px var(--line);transform-origin:0 100%;transition:transform 360ms var(--ease)}
.d-book .cv{left:6px;top:6px;width:40px;height:58px;border-radius:2px 12px 2px 2px;background:var(--cu);display:flex;align-items:flex-end;gap:3px;padding:7px;transform-origin:0 100%;transition:transform 360ms var(--ease)}
.d-book .cv b{width:7px;height:7px;background:var(--ink)}.d-book .cv b:nth-child(2){background:var(--cu-hi)}.d-book .cv b:nth-child(3){background:var(--ivory)}
@media (hover:hover){.docs>div:hover .d-chk .hd{transform:translateY(-3px) rotate(-2deg)}.docs>div:hover .d-book .pg1{transform:rotate(6deg)}.docs>div:hover .d-book .pg2{transform:rotate(11deg)}.docs>div:hover .d-book .cv{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:no-preference){
 .js .docs .d-chk .dln{transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease)}
 .js .docs.in .d-chk .dln{transform:none}
 .js .docs.in .d-chk .dln:nth-child(2){transition-delay:250ms}.js .docs.in .d-chk .dln:nth-child(3){transition-delay:400ms}.js .docs.in .d-chk .dln:nth-child(4){transition-delay:550ms}
 .js .docs .d-book .pg1{transform:rotate(0)}.js .docs.in .d-book .pg1{transform:rotate(4deg);transition-delay:450ms}.js .docs.in .d-book .pg2{transform:rotate(8deg);transition-delay:600ms}
}
.d-book .pg1{transform:rotate(4deg)}.d-book .pg2{transform:rotate(8deg)}

/* ---- FAQ: corner-tick toggles, soft height ---- */
.jump{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.jump a{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s4);border-radius:18px;font-size:13px;line-height:20px;font-weight:600;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line2);text-decoration:none;transition:color 200ms var(--ease),box-shadow 200ms var(--ease),background-color 200ms var(--ease)}
.jump a.cur{color:var(--fg);box-shadow:inset 0 0 0 1px var(--warm);background:rgba(210,141,78,.06)}
@media (hover:hover){.jump a:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--warm)}}
.qn{margin-left:var(--s3);font-size:13px;font-weight:500;color:var(--dim);letter-spacing:0}
.acc2 summary::after{content:none!important;display:none}
.acc2 summary{padding-right:4px}
.qt{flex:1}
.qk{position:relative;flex:none;width:18px;height:18px}
.qk i{position:absolute;width:9px;height:9px;border-color:var(--mut);border-style:solid;border-width:0;transition:transform 360ms cubic-bezier(.3,.8,.3,1),border-color 260ms var(--ease),opacity 260ms var(--ease)}
.qk i:first-child{right:1px;top:1px;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:5px}
.qk i:last-child{left:1px;bottom:1px;border-bottom-width:1.5px;border-left-width:1.5px;border-bottom-left-radius:5px;opacity:0;transform:translate(4px,-4px)}
@media (hover:hover){.acc2 summary:hover .qk i:first-child{transform:translate(1px,-1px);border-color:var(--cu)}}
.acc2 details[open] .qk i{border-color:var(--cu)}
.acc2 details[open] .qk i:first-child{transform:none}
.acc2 details[open] .qk i:last-child{opacity:1;transform:none}
.acc2 details{transition:background-color 300ms var(--ease)}
.acc2 details[open]{background:radial-gradient(80% 120% at 0 0,rgba(210,141,78,.05),rgba(210,141,78,0) 70%),linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.acc2 details::details-content{block-size:auto!important;transition:none!important;overflow:visible}
.acc2 .qa{overflow:hidden}
.acc2 .qa p{padding-right:var(--s7)}
@media (max-width:639px){.acc2 .qa p{padding-right:var(--s4)}}

/* ---- Privacy / legal: same family ---- */
.pg-privacy .legal h2,.pg-legal .legal h2{position:relative;display:flex;align-items:center;gap:var(--s2)}
.pg-privacy .legal h2::before,.pg-legal .legal h2::before{content:"";width:8px;height:8px;flex:none;border-top:1.5px solid var(--cu);border-right:1.5px solid var(--cu);border-top-right-radius:4px}

/* ---- 404 ---- */
.j404{margin-top:var(--s5)}

/* ---- Security: the next-steps ticks light in order (one micro, vault hero untouched) ---- */
.pg-security #contact .next b{position:relative;display:inline-flex;align-items:center;gap:8px}
.pg-security #contact .next b::before{content:"";width:9px;height:9px;flex:none;border-top:1.5px solid var(--line2);border-right:1.5px solid var(--line2);border-top-right-radius:4px;transition:border-color 400ms var(--ease)}
.pg-security #contact .next li.on b::before{border-color:var(--cu);transition-delay:calc(300ms + var(--d,0) * 260ms)}
@media (prefers-reduced-motion:reduce){.pg-security #contact .next b::before{border-color:var(--cu)}}

/* 3 Nov: lock-confirm, one pattern for the Halko Private lock and the Secure seal. Resting state is locked; motion only arms with JS and full motion. */
.lkc{overflow:visible}
.lkc .lk-s,.lkc .lk-b,.lkc .lk-r{transform-box:fill-box;transform-origin:50% 50%}
.lkc .lk-r{opacity:0;pointer-events:none}
.lkc.lk-arm .lk-s{transform:translateY(var(--lk-up,-2.2px))}
.lkc-seal.lk-arm{--lk-up:-1.4px}
.lkc.lk-arm:not(.lk-go) .lk-b{opacity:.62}
.lkc.lk-go .lk-s{animation:lkDrop 440ms cubic-bezier(.3,0,.2,1) both}
.lkc.lk-go .lk-b{animation:lkPress 260ms cubic-bezier(.37,0,.63,1) 360ms both}
.lkc.lk-go .lk-r{animation:lkRing 1000ms cubic-bezier(.22,.61,.36,1) 400ms both}
.lkc-seal.lk-go .lk-s.lk-b{animation:lkDropSeal 520ms cubic-bezier(.3,0,.2,1) both}
@keyframes lkDrop{0%{transform:translateY(var(--lk-up,-2.2px))}70%{transform:translateY(.35px)}100%{transform:translateY(0)}}
@keyframes lkDropSeal{0%{transform:translateY(var(--lk-up,-1.4px));opacity:.62}70%{transform:translateY(.25px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes lkPress{0%{transform:none;opacity:.62}45%{transform:translateY(.4px) scale(.965);opacity:1}100%{transform:none;opacity:1}}
@keyframes lkRing{0%{opacity:0;transform:scale(1)}14%{opacity:.38}100%{opacity:0;transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.lkc .lk-s,.lkc .lk-b{transform:none!important;opacity:1!important;animation:none!important}.lkc .lk-r{display:none}}
/* consent tick + fine line under the send button */
.form .optin{display:flex;align-items:flex-start;gap:10px;margin:var(--s3) 0 var(--s4);font-size:13px;line-height:20px;color:var(--dim);cursor:pointer;max-width:var(--measure)}
.form .optin input{appearance:none;-webkit-appearance:none;flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line2);background:transparent;display:grid;place-content:center;transition:box-shadow var(--t-fill,200ms) var(--ease,ease),background-color var(--t-fill,200ms) var(--ease,ease)}
.form .optin input::after{content:"";width:8px;height:5px;border:solid #11151B;border-width:0 0 1.6px 1.6px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform 180ms var(--ease,ease)}
.form .optin input:checked{background:var(--cu);box-shadow:inset 0 0 0 1px var(--cu)}
.form .optin input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.form .optin input:focus-visible{outline:2px solid var(--cu);outline-offset:2px}
@media (hover:hover){.form .optin:hover input:not(:checked){box-shadow:inset 0 0 0 1px var(--cu)}}
.form .fine{margin-top:var(--s3);font-size:12px;line-height:18px;color:var(--dim);max-width:var(--measure)}
.form .more+.optin{margin-top:calc(var(--s4) - var(--s6))}

/* ---------- Form foot, quiet (3 Nov 2026): one hierarchy under the fields. Fields lead; "Add a note" is a quiet secondary row;
   the roundup tick and fine print share one small dim voice; Book it is the only bright thing; links are mut, not bold white. ---------- */
.form .more,#contact .more{margin:calc(var(--s4) * -1 + var(--s2)) 0 var(--s4)}
.form .more summary{min-height:44px;gap:10px;font-size:14px;line-height:20px;font-weight:500;color:var(--mut);transition:color var(--t-out) var(--ease)}
.form .more summary .opt{font-size:12px;line-height:18px;color:var(--dim);opacity:.8}
html .form .more summary::before{width:10px;height:10px;background:linear-gradient(var(--dim),var(--dim)) center/10px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) center/1px 10px no-repeat}
.form .more[open] summary,.form .more summary:focus-visible{color:var(--fg)}
@media (hover:hover){.form .more summary:hover{color:var(--fg);transition-duration:var(--t-in)}}
.form .optin,.form .more+.optin{margin:0 0 var(--s5);gap:var(--s3);font-size:13px;line-height:20px;color:var(--dim);max-width:none}
.form .optin input{flex-basis:16px;margin-top:2px;box-shadow:inset 0 0 0 1px rgba(243,244,246,.22)}
.form .optin input:checked{box-shadow:inset 0 0 0 1px var(--cu)}
.form .optin:has(input:checked){color:var(--mut)}
.form .send-row{gap:var(--s4) var(--s5);flex-wrap:wrap}
.form .sent-note{font-size:13px;line-height:20px;color:var(--dim)}
.form .send.iris{box-shadow:0 0 0 .5px rgba(242,192,143,.06),0 8px 20px -14px rgba(210,141,78,.38)}
.form .send.iris .t{text-shadow:none}
.form .send.iris .bz .gl{opacity:.3}
.form .fine{margin:var(--s4) 0 0;font-size:12px;line-height:18px;color:var(--dim);opacity:.85;max-width:none}
.form .fine .fl{white-space:nowrap;margin-left:2px}
.form .fine .fl a{color:var(--mut);font-weight:400;text-decoration:underline;text-decoration-color:rgba(243,244,246,.2);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-out) var(--ease),text-decoration-color var(--t-out) var(--ease)}
.form .fine .fl i{font-style:normal;white-space:pre;margin:0 2px;color:var(--dim)}
.form .fine .fl a:hover,.form .fine .fl a:focus-visible{color:var(--fg);text-decoration-color:var(--cu)}
.form .optin span,.form .fine{text-wrap:pretty}

/* 3 Nov: lock-confirm v2, louder on phone. Overrides v1 (same classes). */
.lkc{overflow:visible}
.lkc.lk-arm .lk-s{transform:translateY(var(--lk-up,-4.4px))}
.pl.lkc{--lk-up:-3.8px}
.lkc-seal{--lk-up:-3.2px}
.lkc .lk-r{stroke-width:1.4}
.lkc.lk-arm:not(.lk-go) .lk-b{opacity:.42}
.lkc-seal.lk-arm:not(.lk-go) .lk-s.lk-b{opacity:.42}
.lkc.lk-go .lk-s{animation:lkDrop2 560ms both}
.lkc.lk-go .lk-b{animation:lkPress2 560ms 300ms both}
.lkc.lk-go .lk-r{animation:lkRing2 1100ms cubic-bezier(.22,.61,.36,1) 360ms both}
.lkc-seal.lk-go .lk-s.lk-b{animation:lkDropSeal2 820ms both}
.lkc.lk-go{animation:lkGlow2 1500ms ease-out 320ms both}
.lkc.lk-calm{animation:lkGlow2 1500ms ease-out both}
.priv.lk-hit{animation:lkStrip2 1600ms ease-out 320ms both}
@keyframes lkDrop2{0%{transform:translateY(var(--lk-up,-4.4px));animation-timing-function:cubic-bezier(.55,0,.85,.35)}
 55%{transform:translateY(.9px);animation-timing-function:cubic-bezier(.3,0,.3,1)}
 75%{transform:translateY(-.5px)}100%{transform:translateY(0)}}
@keyframes lkPress2{0%{transform:none;opacity:.42}25%{transform:scale(.9,.86);opacity:1}60%{transform:scale(1.14)}100%{transform:none;opacity:1}}
@keyframes lkDropSeal2{0%{transform:translateY(var(--lk-up,-3.2px));opacity:.42;animation-timing-function:cubic-bezier(.55,0,.85,.35)}
 40%{transform:translateY(.7px) scale(.9);opacity:1;animation-timing-function:cubic-bezier(.3,0,.3,1)}
 65%{transform:scale(1.16)}100%{transform:none;opacity:1}}
@keyframes lkRing2{0%{opacity:0;transform:scale(1)}12%{opacity:.9}100%{opacity:0;transform:scale(2.3)}}
@keyframes lkGlow2{0%{filter:drop-shadow(0 0 0 rgba(237,178,124,0))}22%{filter:drop-shadow(0 0 7px rgba(237,178,124,.95))}100%{filter:drop-shadow(0 0 0 rgba(237,178,124,0))}}
@keyframes lkStrip2{0%{box-shadow:inset 0 0 0 1px var(--line2)}20%{box-shadow:inset 0 0 0 1px rgba(237,178,124,.85),0 0 22px -6px rgba(237,178,124,.5)}100%{box-shadow:inset 0 0 0 1px var(--line2)}}
@media (prefers-reduced-motion:reduce){.priv.lk-hit{animation:none}}

/* spark-honesty: Example tag, no green live dot */
.chat-live.is-example{border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:1px 7px;letter-spacing:.02em}
.sent-note a.mail{color:inherit;text-decoration:underline;text-underline-offset:3px}
.talos-float[hidden]{display:none!important}