/* ───────────────────────────────────────────────────────────── HAPERTY SHUBHTEC · design tokens Palette derived from the client mark: deep green + orange. Lime is reserved exclusively for measured data (charts, counters, progress) so colour carries meaning, not decoration. ───────────────────────────────────────────────────────────── */ :root{ /* Light by default. The category reads light, and so should we. Dark is now a deliberate accent, not the whole site. */ --ink:#FFFFFF; /* page */ --ink-2:#F4F5F1; /* raised surface */ --ink-3:#EAECE4; --paper:#F4F5F1; --paper-2:#FFFFFF; --white:#FFFFFF; --fg-d:#0B1410; --mut-d:rgba(11,20,16,.66); --dim-d:rgba(11,20,16,.46); --line-d:rgba(11,20,16,.11); --line-dd:rgba(11,20,16,.20); --fg-p:#0B1410; --mut-p:rgba(11,20,16,.66); --line-p:rgba(11,20,16,.13); --true-ink:#08100C; --true-paper:#ECEDE7; --green:#14713C; --green-d:#0D4F2A; --orange:#BF4A08; /* text and UI on light, 5.0:1 on white */ --orange-b:#EF7536; /* the logo orange, for graphics only */ --lime:#3E6B14; /* data colour on light, 6.3:1 */ --lime-g:#5E9B1F; /* data fills, no text on them */ --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* ── TYPEFACE. Swap here and the whole site follows. Alternatives worth trying: 'Schibsted Grotesk', 'Instrument Sans', 'Plus Jakarta Sans'. Update the Google Fonts link above to match. */ --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pad-i:clamp(18px,4.2vw,56px); --pad-b:clamp(64px,9vh,132px); --nav-h:64px; --ease:cubic-bezier(.2,.7,.2,1); } /* Dark feature bands opt back in by re-declaring the tokens. */ .ink-band{ --ink:#08100C; --ink-2:#0C1710; --ink-3:#111F17; --fg-d:#ECEDE7; --mut-d:rgba(236,237,231,.62); --dim-d:rgba(236,237,231,.42); --line-d:rgba(236,237,231,.14); --line-dd:rgba(236,237,231,.28); --lime:#B9E86B;--lime-g:#B9E86B; --orange:#F26A1B;--orange-b:#F26A1B; background:#08100C;color:#ECEDE7; } /* the hidden attribute must always win. This bug shipped zeros once */ [hidden]{display:none!important} /* screen-reader-only live region, used by the compass reveal */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .logo-img{display:block;width:100%;height:100%} *,*::before,*::after{box-sizing:border-box} html{background:#FFFFFF;-webkit-text-size-adjust:100%} body{ margin:0;background:#FFFFFF;color:#0B1410; font-family:var(--sans);font-size:16px;line-height:1.55; font-synthesis-weight:none;-webkit-font-smoothing:antialiased; text-wrap:pretty;overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--orange);color:#fff} :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px} /* ── type roles ───────────────────────────────────────────── */ /* Space Grotesk carries display and body pushed wide: engineering signage register, and it distinguishes headings from body without introducing a second family. */ .d1,.d2,.d3{font-weight:800;letter-spacing:-.035em;line-height:.92;margin:0;} .d1{font-size:clamp(38px,6.6vw,98px);letter-spacing:-.045em} .d2{font-size:clamp(28px,4.4vw,60px);line-height:.98;letter-spacing:-.038em} .d3{font-size:clamp(21px,2.2vw,27px);line-height:1.1;letter-spacing:-.02em;} .lede{font-size:clamp(15.5px,1.35vw,19px);line-height:1.6;color:var(--mut-d);max-width:60ch;margin:0} .paper .lede{color:var(--mut-p)} p{margin:0} .mono{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px; font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)} .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7} .paper .eyebrow{color:var(--green)} /* ── layout ───────────────────────────────────────────────── */ .wrap{width:min(1320px,100%);margin-inline:auto;padding-inline:var(--pad-i)} .sec{padding-block:var(--pad-b);position:relative} .paper{background:var(--ink-2);color:var(--fg-p); background-image:linear-gradient(rgba(11,20,16,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(11,20,16,.035) 1px,transparent 1px); background-size:46px 46px} .green-band{background:var(--green);color:#fff; --fg-d:#fff;--mut-d:rgba(255,255,255,.82);--dim-d:rgba(255,255,255,.66); --line-d:rgba(255,255,255,.22);--line-dd:rgba(255,255,255,.34); --orange:#FFD9BC;--lime:#EAF7D2} .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:22px;margin-bottom:clamp(30px,4.4vh,54px)} .sec-head .col{max-width:min(760px,100%)} .sec-head .eyebrow{margin-bottom:16px} /* ── buttons ──────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px; font-size:14px;font-weight:700;letter-spacing:.01em;border:1px solid transparent;cursor:pointer; transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn-solid{background:var(--orange);color:#fff} .green-band .btn-solid{background:#fff;color:var(--green-d)} /* inside a dark band --orange is the brighter brand tone, so white text on it only reaches 3.06:1. Dark text on the same orange gives 6.1:1. */ .ink-band .btn-solid{color:var(--true-ink)} .ink-band .btn-solid:hover{background:#fff;color:var(--true-ink)} .green-band .btn-solid:hover{background:var(--true-ink);color:#fff} .btn-solid:hover{background:#fff;color:var(--ink)} .btn-light{background:var(--fg-d);color:var(--ink)} .btn-light:hover{background:var(--orange);color:#fff} .btn-ghost{border-color:var(--line-dd);color:var(--fg-d)} .btn-ghost:hover{border-color:var(--orange);color:var(--orange)} .btn-dark{background:var(--true-ink);color:#fff} .btn-dark:hover{background:var(--orange);color:#fff} .btn .arw{transition:transform .22s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .txtlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px; font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding-bottom:4px; border-bottom:1px solid var(--orange);color:inherit;transition:gap .2s var(--ease),color .2s var(--ease)} .txtlink:hover{gap:14px;color:var(--orange)} /* ── drawing-sheet motif: corner ticks ────────────────────── */ .ticked{position:relative} .ticked::before,.ticked::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none; border-color:var(--orange-b);opacity:.85} .ticked::before{top:-1px;left:-1px;border-top:1.5px solid;border-left:1.5px solid} .ticked::after{bottom:-1px;right:-1px;border-bottom:1.5px solid;border-right:1.5px solid} /* ── no-javascript notice ─────────────────────────────────── */ .nojs-note{display:none;padding:14px var(--pad-i);margin:0;background:var(--ink-2); border-bottom:1px solid var(--line-d);font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--mut-d);padding-top:calc(var(--nav-h) + 14px)} /* ── back to top ──────────────────────────────────────────── */ #totop{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90; width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dd);cursor:pointer; background:rgba(255,255,255,.92);color:var(--fg-d);display:grid;place-items:center; opacity:0;transition:opacity .3s var(--ease),background .2s var(--ease),transform .2s var(--ease); box-shadow:0 8px 22px rgba(11,20,16,.14)} #totop:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)} #totop svg{width:15px;height:12px} #totop[style*="opacity: 0"]{pointer-events:none} @media print{#totop{display:none}} /* ── skip link ─────────────────────────────────────────────── */ .skip{position:fixed;top:8px;left:8px;z-index:200;padding:11px 18px;border-radius:6px; background:var(--true-ink);color:#fff;font-size:14px;font-weight:600; transform:translateY(-160%);transition:transform .2s var(--ease)} .skip:focus{transform:none} /* ── nav ──────────────────────────────────────────────────── */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--orange);z-index:100} .nav{position:fixed;top:0;left:0;right:0;z-index:95;display:flex;align-items:center; justify-content:space-between;gap:18px;min-height:var(--nav-h); padding:9px var(--pad-i);background:rgba(255,255,255,.94); border-bottom:1px solid var(--line-d)} .brand{display:flex;align-items:center;gap:11px} .brand-mark{width:40px;height:40px;flex:none} .brand-mark .logo-img{width:100%;height:100%} .brand-mark[data-compass]{width:40px;height:40px;position:relative; perspective:220px;transform-style:preserve-3d} .brand-mark[data-compass] .logo-img{position:relative;z-index:2;width:100%;height:100%} /* Compass tuning knobs. --cmp-speed is a multiplier on the drift durations (higher = slower), --cmp-r is the hover/drift radius in px, and --cmp-glow scales the ambient glow with it. Defaults are desktop; the mobile media query below trims both, and the footer setting overrides them per-visitor on . */ :root{--cmp-speed:1;--cmp-r:2.6px;--cmp-glow:1} @media (max-width:640px){ :root{--cmp-speed:1.35;--cmp-r:1.6px;--cmp-glow:.8} } /* small compass badge sits at the top-right corner of the logo */ .cmp{position:absolute;top:-7px;right:-9px;left:auto;bottom:auto;z-index:3;width:22px;height:22px;overflow:visible; transform:rotateX(0) rotateY(0); cursor:grab;touch-action:none; /* `translate`, `rotate` and `scale` are their own properties, so the idle hover composes with the JS-driven card rotation on `transform` */ animation:cmpFloat calc(5.4s * var(--cmp-speed)) ease-in-out infinite, cmpSway calc(8.2s * var(--cmp-speed)) ease-in-out infinite, cmpGlow calc(6.6s * var(--cmp-speed)) ease-in-out infinite; transition:filter .3s ease,scale .3s cubic-bezier(.22,1,.36,1)} .cmp:hover{scale:1.14} .cmp.is-drag{cursor:grabbing;animation-play-state:paused;scale:1.14} /* hover/drag lifts the same ambient glow rather than replacing it */ .cmp:hover,.cmp.is-drag{animation-name:cmpFloat,cmpSway,cmpGlowLift} @keyframes cmpFloat{ 0%,100%{translate:0 calc(-1 * var(--cmp-r))} 25%{translate:calc(var(--cmp-r) * .35) 0} 50%{translate:0 calc(var(--cmp-r) * .92)} 75%{translate:calc(var(--cmp-r) * -.35) 0} } @keyframes cmpSway{ 0%,100%{rotate:calc(-1.23deg * var(--cmp-r) / 1px)} 50%{rotate:calc(1.23deg * var(--cmp-r) / 1px)} } /* ambient glow: breathes on its own while the card drifts, no hover needed */ @keyframes cmpGlow{ 0%,100%{filter:drop-shadow(0 1px 2px rgba(17,17,17,.12)) drop-shadow(0 0 calc(2px * var(--cmp-glow)) rgba(239,117,54,.14))} 50%{filter:drop-shadow(0 2px 4px rgba(17,17,17,.16)) drop-shadow(0 0 calc(7px * var(--cmp-glow)) rgba(239,117,54,.42))} } @keyframes cmpGlowLift{ 0%,100%{filter:drop-shadow(0 3px 6px rgba(17,17,17,.28)) drop-shadow(0 0 calc(5px * var(--cmp-glow)) rgba(239,117,54,.3))} 50%{filter:drop-shadow(0 3px 6px rgba(17,17,17,.28)) drop-shadow(0 0 calc(11px * var(--cmp-glow)) rgba(239,117,54,.55))} } .cmp-ring{fill:none;stroke:rgba(17,17,17,.25);stroke-width:4.5;transition:stroke .25s ease} .cmp-ticks line{stroke:rgba(17,17,17,.25);stroke-width:4.5} .cmp-ticks line.is-card{stroke:rgba(17,17,17,.42);stroke-width:5.5} .brand-mark[data-compass] .cmp-ticks line:not(.is-card){display:none} .cmp-rose,.cmp-needle{transform-box:view-box;transform-origin:50px 50px;transition:transform .18s linear} .cmp-nd-n{fill:#111;stroke:#fff;stroke-width:3;paint-order:stroke} .cmp-nd-s{fill:rgba(17,17,17,.38)} .cmp:hover .cmp-ring,.cmp.is-drag .cmp-ring{stroke:rgba(239,117,54,.6)} .cmp-gl{position:absolute;top:-7px;right:-9px;left:auto;bottom:auto;width:22px;height:22px;z-index:2;border-radius:50%;pointer-events:none; background:radial-gradient(34% 34% at var(--gx,50%) var(--gy,30%), rgba(239,117,54,.28),rgba(239,117,54,0) 70%); opacity:0;transition:opacity .3s ease} .brand:hover .cmp-gl{opacity:1} .brand:hover .cmp-ring{stroke:rgba(239,117,54,.5)} /* bearing read-out, shown while you spin the card */ .cmp-read{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-3px); z-index:6;padding:3px 7px;border-radius:4px;background:rgba(17,17,17,.9);color:#fff; font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;white-space:nowrap;pointer-events:none; opacity:0;transition:opacity .2s ease,transform .2s var(--ease)} [data-compass]:hover .cmp-read,[data-compass].is-live .cmp-read,[data-compass]:focus-visible .cmp-read{opacity:1;transform:translateX(-50%) translateY(0)} /* keyboard focus: clear ring on the compass badge */ [data-compass]{border-radius:50%} [data-compass]:focus{outline:none} [data-compass]:focus-visible{outline:2px solid var(--orange,#ef7536);outline-offset:3px} [data-compass]:focus-visible .cmp-ring{stroke:rgba(239,117,54,.75)} [data-compass]:focus-visible .cmp{scale:1.14} /* keyboard hint, only while the badge holds keyboard focus */ .cmp-keys{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(3px); z-index:7;padding:3px 7px;border-radius:4px;background:rgba(17,17,17,.92);color:#fff; font-family:var(--mono);font-size:8px;letter-spacing:.12em;white-space:nowrap;pointer-events:none; opacity:0;transition:opacity .2s ease,transform .2s var(--ease)} [data-compass]:focus-visible .cmp-keys{opacity:1;transform:translateX(-50%) translateY(0)} @media (prefers-reduced-motion:reduce){ .cmp,.cmp-rose,.cmp-needle{transition:none;animation:none} .cmp,.cmp:hover,.cmp.is-drag{animation:none;filter:none} } /* local "reduce motion" toggle kills the drift and the ambient glow too */ .reduce-motion .cmp,.reduce-motion .cmp:hover,.reduce-motion .cmp.is-drag{ animation:none;filter:none;translate:none;rotate:none} .reduce-motion .cmp-gl{opacity:0;animation:none} /* ── compass reveal card — a construction truth unlocked by spinning ─ */ .cmp-reveal{ position:absolute;top:calc(100% + 18px);left:50%; transform:translateX(-50%) scale(.96);z-index:10; width:min(260px,90vw);padding:14px 16px;border-radius:12px; background:var(--paper-2,#fff);color:var(--fg-p);border:1px solid var(--line-d); box-shadow:0 18px 48px rgba(11,20,16,.16);pointer-events:none;opacity:0; transition:opacity .25s var(--ease),transform .25s var(--ease)} .cmp-reveal.show{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto} .cmp-reveal::before{ content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%); width:10px;height:10px;background:var(--paper-2); border-top:1px solid var(--line-d);border-left:1px solid var(--line-d);rotate:45deg} .cmp-reveal .cr-head{ display:flex;align-items:center;gap:8px;margin-bottom:8px; font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)} .cmp-reveal .cr-head svg{width:14px;height:14px;flex:none} .cmp-reveal .cr-body{font-size:14px;line-height:1.5;font-weight:500} .cmp-reveal .cr-dir{ font-family:var(--mono);font-size:10px;color:var(--mut-p);margin-top:8px;letter-spacing:.1em} [data-compass].has-reveal .cmp-read{top:calc(100% + 6px)} /* brief compass pulse when a truth is revealed */ @keyframes cmpRevealPulse{ 0%{transform:scale(1)} 50%{transform:scale(1.16)} 100%{transform:scale(1)} } .cmp.reveal-pulse{animation:cmpRevealPulse .35s var(--ease)} /* Reduced motion: the card arrives on a soft gradient fade, no scale, no pulse. Haptics and the optional tones stay exactly as they are elsewhere. */ @media (prefers-reduced-motion:reduce){.cmp.reveal-pulse{animation:none}} .reduce-motion .cmp.reveal-pulse{animation:none} .reduce-motion .cmp-reveal, .reduce-motion .cmp-reveal.show{ transform:translateX(-50%); transition:opacity .55s ease,background-position .8s ease; background:linear-gradient(180deg,rgba(239,117,54,.14) 0%,var(--paper-2,#fff) 46%) no-repeat; background-size:100% 220%;background-position:0 100%} .reduce-motion .cmp-reveal.show{background-position:0 0} @media (prefers-reduced-motion:reduce){ .cmp-reveal,.cmp-reveal.show{ transform:translateX(-50%); transition:opacity .55s ease,background-position .8s ease; background:linear-gradient(180deg,rgba(239,117,54,.14) 0%,var(--paper-2,#fff) 46%) no-repeat; background-size:100% 220%;background-position:0 100%} .cmp-reveal.show{background-position:0 0} } @media (max-width:640px){ .cmp-reveal{width:min(220px,80vw);padding:12px 14px} } .brand-txt{display:flex;flex-direction:column;line-height:1.06} .brand-txt b{font-size:14.5px;font-weight:700;letter-spacing:.04em;} .brand-txt span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim-d)} .nav-links{display:flex;align-items:center;gap:clamp(2px,1.1vw,18px)} .nav-links a{position:relative;padding:14px 10px;margin:-6px 0;font-size:12.5px;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--mut-d);transition:color .2s var(--ease)} .nav-links a:hover{color:var(--fg-d)} .nav-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:2px; background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)} .nav-links a[aria-current="page"]{color:var(--fg-d)} .nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-cta{padding:10px 18px;border-radius:999px;background:var(--orange);color:#fff; font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; transition:background .22s var(--ease),color .22s var(--ease)} .nav-cta:hover{background:var(--fg-d);color:var(--ink)} .burger{display:none;width:42px;height:38px;border:1px solid var(--line-dd);border-radius:8px; background:transparent;align-items:center;justify-content:center;cursor:pointer} .burger i{display:block;width:17px;height:1.5px;background:var(--fg-d);position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--fg-d)} .burger i::before{top:-5.5px}.burger i::after{top:5.5px} .drawer{position:fixed;inset:0;z-index:94;background:#fff;padding:calc(var(--nav-h) + 26px) var(--pad-i) 40px; display:none;flex-direction:column;gap:2px} .drawer.open{display:flex} .drawer a{padding:17px 0;border-bottom:1px solid var(--line-d);font-size:26px;font-weight:800; letter-spacing:-.02em} .drawer a[aria-current="page"]{color:var(--orange)} .drawer .btn{margin-top:22px;align-self:flex-start} /* ── hero ─────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(26px,5vh,58px)) 0 clamp(34px,5vh,66px)} .hero-bg{position:absolute;inset:-10% -10% 0;pointer-events:none; background:radial-gradient(46% 42% at 70% 30%,rgba(239,117,54,.13),transparent 68%), radial-gradient(44% 40% at 16% 76%,rgba(20,113,60,.11),transparent 70%)} .hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.9; background-image:linear-gradient(rgba(11,20,16,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(11,20,16,.05) 1px,transparent 1px); background-size:78px 78px; -webkit-mask-image:radial-gradient(74% 66% at 50% 42%,#000,transparent); mask-image:radial-gradient(74% 66% at 50% 42%,#000,transparent)} .hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(30px,4vw,64px);align-items:center} .hero h1{margin:16px 0 18px} .hero h1 em{font-style:normal;color:var(--orange)} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .hero-cred{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,4vh,40px); padding-top:20px;border-top:1px solid var(--line-d);max-width:38ch} .cred-n{font-size:clamp(34px,3.6vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--orange)} .cred-t{font-size:14px;line-height:1.45;color:var(--mut-d)} .hero-proof{display:flex;align-items:center;gap:11px;margin-top:22px;padding-top:16px; border-top:1px solid var(--line-d);font-size:14.5px;color:var(--mut-d);max-width:44ch} .hero-proof::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime)} .tblock{font-family:var(--mono);font-size:9px;letter-spacing:.18em;fill:var(--dim-d);text-transform:uppercase} /* ── one job runs late: a demonstration, not a chart ──────── */ .delay-track{height:200vh;position:relative} .delay-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden; padding-top:var(--nav-h)} .dl-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(22px,4vw,58px);align-items:center;width:100%} .dl-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--mut-d);margin:0 0 4px;max-width:44ch} .dl-steps{position:relative;min-height:clamp(210px,30vh,270px);margin-top:20px} .dl-step{position:absolute;inset:0;opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease)} .dl-step.on{opacity:1;transform:none} .dl-step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--orange)} .dl-step h3{margin:11px 0 11px;font-size:clamp(20px,2.3vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.1} .dl-step p{font-size:15.5px;line-height:1.62;color:var(--mut-d);max-width:44ch} .dl-prog{height:2px;background:var(--line-d);margin-top:6px} .dl-prog i{display:block;height:100%;width:0;background:var(--lime)} .dl-stage{position:relative;padding:26px 0 10px} .dl-scale{position:relative;height:16px;margin-bottom:14px} .dl-scale span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:9px; letter-spacing:.14em;color:var(--dim-d)} .dl-lane{position:relative;margin-bottom:clamp(18px,3vh,30px)} .dl-lane-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim-d);margin-bottom:9px} .dl-bars{position:relative;height:clamp(48px,6.6vh,60px)} .dl-b{position:absolute;top:0;height:100%;border-radius:5px;display:flex;align-items:center;padding:0 12px; background:rgba(236,237,231,.13);border:1px solid rgba(236,237,231,.26);overflow:hidden; transition:background .45s var(--ease),border-color .45s var(--ease)} .dl-b span{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dl-b.late{background:rgba(242,106,27,.36);border-color:var(--orange)} .dl-b.alt{background:rgba(185,232,107,.15);border-color:rgba(185,232,107,.42)} .dl-b.alt.late{background:rgba(242,106,27,.3);border-color:var(--orange)} .dl-spare{position:absolute;top:0;height:100%;border-radius:5px;display:flex;align-items:center; justify-content:center;padding:0 8px; background-image:repeating-linear-gradient(45deg,rgba(185,232,107,.4) 0 2px,transparent 2px 6px); border:1px dashed rgba(185,232,107,.45)} .dl-spare span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--lime);white-space:nowrap} .dl-badge{position:absolute;top:-13px;padding:2px 8px;border-radius:3px;background:var(--orange);color:#08100C; font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;opacity:0; transition:opacity .35s var(--ease);white-space:nowrap;transform:translateX(-50%)} .dl-finish{position:absolute;top:30px;bottom:6px;width:2px} .dl-finish::before{content:"";position:absolute;inset:0;background:var(--fg-d); transition:background .45s var(--ease)} .dl-finish.late::before{background:var(--orange)} .dl-finish-lbl{position:absolute;top:-30px;left:10px;white-space:nowrap} @media (max-width:900px){ /* the finish marker sits at 86% of the lane, so its label must hang left of it */ .dl-finish-lbl{left:auto;right:6px;text-align:right} } .dl-finish-lbl b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--dim-d)} .dl-finish-lbl em{display:block;margin-top:2px;font-style:normal;font-size:16px;font-weight:700;letter-spacing:-.02em} .dl-finish-lbl s{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em; color:var(--dim-d);opacity:0;transition:opacity .35s var(--ease)} .dl-finish.late .dl-finish-lbl em{color:var(--orange)} .dl-finish.late .dl-finish-lbl s{opacity:1} @media (max-width:1000px){ .dl-grid{grid-template-columns:minmax(0,1fr);gap:20px} .dl-steps{min-height:clamp(190px,26vh,230px)} } @media (max-width:860px){ .dl-b span{font-size:10.5px} .dl-spare span{display:none} .delay-track{height:190vh} } /* ── cards ────────────────────────────────────────────────── */ .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px} .card{position:relative;padding:clamp(24px,2.4vw,32px);border:1px solid var(--line-d);border-radius:8px; background:var(--ink-2);transition:border-color .28s var(--ease),transform .28s var(--ease),background .28s var(--ease)} .card:hover{border-color:var(--orange);transform:translateY(-4px)} .paper .card{background:var(--white);border-color:var(--line-p)} .paper .card:hover{box-shadow:0 24px 50px rgba(8,16,12,.13)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:14px; padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-d)} .paper .card-head{border-color:var(--line-p)} .card-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim-d)} .paper .card-head .num{color:var(--mut-p)} .card-head .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--orange)} .card p{margin-top:11px;font-size:15px;color:var(--mut-d)} .paper .card p{color:var(--mut-p)} .card ul{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line-d)} .card li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:14px;color:var(--mut-d)} .card li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;background:var(--lime); transform:rotate(45deg)} /* ── elevation build ──────────────────────────────────────── */ .build-track{height:210vh;position:relative} .build-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; justify-content:center;gap:clamp(18px,3vh,34px);padding:calc(var(--nav-h) + 12px) 0 24px;overflow:hidden} .build-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px} .build-stage{width:min(100%,900px);margin-inline:auto} .build-stage svg{width:100%;height:auto} .build-legend{display:flex;justify-content:space-between;width:min(100%,900px);margin-inline:auto; font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} /* stage rail: a clear, at-a-glance scroll progress indicator for the build */ .build-rail{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center; width:min(100%,900px);margin-inline:auto;margin-top:10px} .build-rail-track{position:relative;height:28px;border-radius:6px; background:rgba(255,255,255,.06);border:1px solid var(--line-d);overflow:hidden} .build-rail-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0 6px 6px 0; background:linear-gradient(90deg,var(--lime-g),var(--lime));box-shadow:0 0 16px rgba(185,232,107,.35);transition:width .08s linear} .build-rail-ticks{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center; padding:0 6px;pointer-events:none} .build-rail-ticks i{width:1px;height:10px;background:rgba(255,255,255,.18)} .build-rail-labels{grid-column:1/-1;display:flex;justify-content:space-between;width:min(100%,900px);margin-inline:auto; font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--dim-d)} .build-rail-labels span{opacity:.55;transition:opacity .25s var(--ease),color .25s var(--ease)} .build-rail-labels span.on{opacity:1;color:var(--lime)} .build-rail-readout{display:flex;align-items:center;gap:10px;min-width:132px;justify-content:flex-end} .build-rail-pct{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--lime);line-height:1} .build-rail-pct i{font-size:11px;font-weight:500;letter-spacing:0;color:var(--dim-d);font-style:normal;margin-left:1px} .build-rail-stage{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--fg-d);text-align:right;max-width:120px;line-height:1.25} @media (max-width:860px){ .build-rail{grid-template-columns:1fr} .build-rail-readout{justify-content:space-between;min-width:0} } @media (max-width:640px){ .build-rail-labels{display:none} .build-rail-pct{font-size:22px} } /* ── project-controls desk beside the drawing ─────────────── */ .build-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr); gap:clamp(16px,2.4vw,36px);align-items:center;margin-top:clamp(6px,1.4vh,16px);min-height:0} .build-stage{width:100%;margin:0} .build-stage svg{max-height:min(46vh,430px)} .ctrl{border:1px solid var(--line-d);border-radius:10px;background:var(--ink-2);padding:clamp(13px,1.4vw,19px)} .ctrl-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono); font-size:9px;letter-spacing:.2em;color:var(--dim-d);padding-bottom:12px;border-bottom:1px solid var(--line-d)} .ctrl-top .live{display:flex;align-items:center;gap:6px;color:var(--lime)} .ctrl-top .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);animation:pulse 1.9s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.22}} .ctrl-stage{padding:11px 0 9px} .ctrl-stage .code{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--orange)} .ctrl-stage .nm{margin-top:6px;font-size:clamp(15px,1.45vw,20px);font-weight:800; letter-spacing:-.02em;line-height:1.14} .ctrl-ms{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--lime);color:var(--ink); font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.16em;margin-bottom:12px} .ctrl-data{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d)} .ctrl-data>div{padding:11px 0 11px 11px;border-left:1px solid var(--line-d)} .ctrl-data>div:first-child{border-left:0;padding-left:0} .ctrl-data .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--dim-d)} .ctrl-data .v{margin-top:5px;font-size:18px;font-weight:800;letter-spacing:-.02em} .ctrl-data .v i{font-style:normal;font-size:11px;color:var(--dim-d);font-weight:500} .ctrl-curve{padding:11px 0 2px} .ctrl-curve .k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--dim-d)} .ctrl-curve svg{width:100%;height:auto} .ctrl-dots{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:4px; margin:2px 0 0;padding:12px 0 0;border-top:1px solid var(--line-d)} .ctrl-dots li{display:flex;flex-direction:column;align-items:center;gap:6px; font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--dim-d);transition:color .3s var(--ease)} .ctrl-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-dd);transition:all .3s var(--ease)} .ctrl-dots b{font-weight:500} .ctrl-dots li.done{color:var(--mut-d)} .ctrl-dots li.done i{background:var(--lime)} .ctrl-dots li.now{color:var(--fg-d)} .ctrl-dots li.now i{background:var(--orange);box-shadow:0 0 0 3px rgba(242,106,27,.22)} /* ── screw signature (services) ───────────────────────────── */ .scap{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease)} .scap.on{opacity:1;transform:none;pointer-events:auto} .scap h3{margin:12px 0 12px} .scap p{color:var(--mut-d);font-size:15.5px;max-width:46ch} /* ── short windows: shed height instead of clipping ────────── */ @media (max-height:840px){ .hero{padding-top:calc(var(--nav-h) + 20px)} .d1{font-size:clamp(34px,5.2vw,72px)} .build-head .lede{display:none} .ctrl-curve{display:none} .build-stage svg{max-height:min(40vh,360px)} } @media (max-height:720px){ .ctrl-ms{display:none} .build-legend{display:none} .build-stage svg{max-height:36vh} .dl-steps{min-height:clamp(150px,22vh,190px)} .scap p,.rpanel p,.dl-step p{font-size:14px} } /* ── sectors rail ─────────────────────────────────────────── */ .rail-track{height:340vh;position:relative} .rail-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden} .rail-track{position:relative} .rail{display:flex;gap:20px;will-change:transform; padding-inline:calc(50vw - min(40vw,215px))} .scard{position:relative;flex:none;width:min(80vw,430px);height:min(62vh,520px);border-radius:10px; overflow:hidden;border:1px solid var(--line-d);background:var(--ink-2)} .scard svg.plan{position:absolute;inset:0;width:100%;height:100%} .scard .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,12,.94),transparent 74%)} .scard .body{position:absolute;left:0;right:0;bottom:0;padding:26px} .scard .body h3{margin:0 0 8px;font-size:25px;font-weight:800;letter-spacing:-.02em} .scard .body p{font-size:14.5px;color:var(--mut-d)} .scard .code{position:absolute;top:20px;left:20px;font-family:var(--mono);font-size:10px; letter-spacing:.22em;color:var(--dim-d)} /* ── process / steps ──────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px} .step{padding-top:16px;border-top:2px solid var(--orange)} .step .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--green)} .step h3{margin:12px 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em} .step p{font-size:14.5px;color:var(--mut-p)} /* ── capability matrix ────────────────────────────────────── */ .matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border:1px solid var(--line-p);border-radius:8px;overflow:hidden;background:var(--white)} .matrix div{padding:24px;border-right:1px solid var(--line-p);border-bottom:1px solid var(--line-p)} .matrix .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--green)} .matrix .l{margin-top:9px;font-size:17px;font-weight:700;letter-spacing:-.01em} /* ── about story ──────────────────────────────────────────── */ .story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start} .figure{position:relative;aspect-ratio:4/5;border:1px solid var(--line-d);border-radius:10px;overflow:hidden;background:var(--ink-2)} .figure svg{position:absolute;inset:0;width:100%;height:100%} .figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-family:var(--mono); font-size:9.5px;letter-spacing:.2em;color:var(--dim-d); background:linear-gradient(to top,rgba(8,16,12,.9),transparent)} .story-item{padding:22px 0;border-top:1px solid var(--line-d)} .story-item:first-child{border-top:0;padding-top:0} .story-item h3{margin:0 0 9px;font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--orange)} .story-item p{color:var(--mut-d);font-size:15.5px} .promise{padding:clamp(24px,2.6vw,34px);border:1px solid rgba(255,255,255,.22);border-radius:8px; background:rgba(8,16,12,.24);transition:background .28s var(--ease),transform .28s var(--ease)} .promise:hover{background:rgba(8,16,12,.42);transform:translateY(-4px)} .promise .n{font-size:38px;font-weight:800;color:var(--orange);line-height:1} .promise h3{margin:14px 0 9px;font-size:20px;font-weight:700;letter-spacing:-.015em} .promise p{font-size:14.5px;color:rgba(255,255,255,.76)} /* ── contact ──────────────────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:start} .rows{margin:34px 0 0;border-top:1px solid var(--line-d)} .rows div{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding:15px 0; border-bottom:1px solid var(--line-d)} .rows .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim-d)} .rows .v{font-size:15px} .form{padding:clamp(22px,3vw,36px);border:1px solid var(--line-d);border-radius:10px;background:var(--ink-2); display:grid;gap:15px} .field{display:grid;gap:8px} .field label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d)} .field input,.field select,.field textarea{padding:13px 15px;border-radius:5px;border:1px solid var(--line-dd); background:var(--ink);font-size:15px;width:100%;transition:border-color .2s var(--ease)} .field textarea{resize:vertical;min-height:118px} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);outline:none} .field .err{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--orange);display:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--orange)} .field.invalid .err{display:block} .formnote{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lime);min-height:16px} /* ── footer ───────────────────────────────────────────────── */ .foot{border-top:0} .foot-main{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px);padding:clamp(40px,5vw,68px) var(--pad-i);border-bottom:1px solid var(--line-d)} .foot-brand p{margin:18px 0 20px;font-size:14.5px;color:var(--mut-d);max-width:34ch} .foot-col h3{margin:0 0 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--dim-d);font-weight:500} .foot-col a,.foot-col span{display:block;padding:5px 0;font-size:14.5px;color:var(--mut-d)} .foot-col a:hover{color:var(--orange)} .foot-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; padding:20px var(--pad-i)} .foot-nav{display:flex;flex-wrap:wrap;gap:20px} .foot-nav a{font-size:13px;color:var(--mut-d)} .foot-nav a:hover{color:var(--orange)} /* ── process stages: a spine you travel down ──────────────── */ .pstages{list-style:none;margin:0;padding:0;position:relative} .ps-spine{position:absolute;left:clamp(15px,2.1vw,29px);top:26px;bottom:34px;width:2px; background:var(--line-p);overflow:hidden} .ps-spine i{position:absolute;inset:0 0 auto 0;height:0;background:var(--orange); transition:height .12s linear} .pstages li{position:relative;display:grid; grid-template-columns:clamp(32px,4.4vw,60px) clamp(96px,12vw,168px) minmax(0,1fr); gap:clamp(14px,2.4vw,40px);padding:clamp(26px,3.6vw,48px) 0; border-top:1px solid var(--line-p);opacity:.42; transition:opacity .5s var(--ease)} .pstages li:first-child{border-top:0} .pstages li.lit{opacity:1} .ps-mark{display:flex;justify-content:flex-start;padding-top:8px} .ps-dot{width:15px;height:15px;border-radius:50%;background:var(--ink-2); border:2px solid var(--line-p);position:relative;z-index:1; transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)} .pstages li.lit .ps-dot{background:var(--orange);border-color:var(--orange);transform:scale(1.25)} .ps-n{padding-top:2px} .ps-n em{display:block;font-style:normal;font-size:clamp(34px,4.6vw,60px);font-weight:700; letter-spacing:-.05em;line-height:.86;color:var(--line-p);transition:color .45s var(--ease)} .pstages li.lit .ps-n em{color:var(--orange)} .ps-n span{display:block;margin-top:10px;font-family:var(--mono);font-size:8.5px; letter-spacing:.2em;color:var(--mut-p)} .ps-body h2{margin:0 0 12px} .ps-body p{font-size:16px;line-height:1.62;color:var(--mut-p);max-width:62ch} .ps-out{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:15px 17px; border-radius:8px;background:var(--ink-2);border:1px solid var(--line-p); border-left:3px solid rgba(94,155,31,.55)} .ps-out b{flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em; color:var(--lime);padding-top:3px} .ps-out span{font-size:14.5px;line-height:1.55;color:var(--fg-p)} @media (max-width:760px){ .pstages li{grid-template-columns:26px minmax(0,1fr);gap:14px} .ps-n{grid-column:2} .ps-n em{font-size:30px;display:inline-block;margin-right:12px} .ps-n span{display:inline-block;margin-top:0} .ps-body{grid-column:2} .ps-spine{left:11px} } @media (prefers-reduced-motion:reduce){ .pstages li{opacity:1} .ps-spine i{height:100%!important} } /* ── insight articles ─────────────────────────────────────── */ .articles{border-top:1px solid var(--line-p)} .art{border-bottom:1px solid var(--line-p)} .art-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:100%; padding:clamp(24px,3vw,36px) 0;background:none;border:0;text-align:left;cursor:pointer} .art-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--orange)} .art-head h2{margin:12px 0 10px;max-width:26ch} .art-stand{font-size:15.5px;color:var(--mut-p);max-width:56ch} .art-plus{flex:none;position:relative;width:34px;height:34px;border-radius:50%; border:1px solid var(--line-p);margin-top:6px;transition:all .3s var(--ease)} .art-plus::before,.art-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--fg-p); transition:transform .3s var(--ease)} .art-plus::before{width:13px;height:1.5px;transform:translate(-50%,-50%)} .art-plus::after{width:1.5px;height:13px;transform:translate(-50%,-50%)} .art-head[aria-expanded="true"] .art-plus{background:var(--orange);border-color:var(--orange)} .art-head[aria-expanded="true"] .art-plus::before, .art-head[aria-expanded="true"] .art-plus::after{background:#fff} .art-head[aria-expanded="true"] .art-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .art-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)} .art-body>.art-in{min-height:0;overflow:hidden} .art.open .art-body{grid-template-rows:1fr} .art-body p{font-size:16px;line-height:1.7;color:var(--mut-p);max-width:68ch;margin:0 0 16px} .art-in p:first-child{padding-top:4px} .art-in p:last-child{padding-bottom:clamp(22px,3vw,34px)} .art-body b{color:var(--fg-p)} /* ── people ───────────────────────────────────────────────── */ .person{padding:0;overflow:hidden;border:1px solid var(--line-p);border-radius:12px;background:var(--white); transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .person:hover{box-shadow:0 22px 46px rgba(11,20,16,.10);transform:translateY(-3px)} .person .ph{position:relative;aspect-ratio:4/5;background:#F1F2EE;overflow:hidden} .person .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:34%; background:linear-gradient(to top,var(--white),rgba(255,255,255,0))} .person .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 8%; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 97%); mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 97%)} .person .bd{padding:4px 24px 26px;position:relative} .person h2{margin:0 0 5px;font-size:20px;font-weight:700;letter-spacing:-.02em} .person .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--orange)} .person p{margin-top:12px;font-size:14.5px;color:var(--mut-p)} /* initials-only monogram where there is no portrait on file */ .person .ph.no-ph{aspect-ratio:16/9} .person .mono-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background: linear-gradient(to top,var(--white),rgba(255,255,255,0) 46%), repeating-linear-gradient(0deg,rgba(11,20,16,.055) 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,rgba(11,20,16,.055) 0 1px,transparent 1px 26px)} .person .mono-ph b{font-size:clamp(44px,5.4vw,66px);font-weight:700;letter-spacing:-.04em; color:var(--fg-p);opacity:.9;line-height:1} .person .yrs{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono); font-size:9px;letter-spacing:.16em;padding:5px 9px;border-radius:999px; background:rgba(11,20,16,.82);color:#fff} .person .meta{margin-top:16px;border-top:1px solid var(--line-p);padding-top:12px;display:grid;gap:9px} .person .meta div{display:grid;gap:3px} .person .meta .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--orange)} .person .meta .v{font-size:12.5px;color:var(--mut-p);line-height:1.45} /* one-line "what they actually do" card, on hover, focus or tap */ .person .tip{position:absolute;left:12px;right:12px;bottom:12px;z-index:3; background:rgba(11,20,16,.94);color:#F4F5F1;border-radius:9px;padding:12px 14px; opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .28s cubic-bezier(.2,.7,.2,1),transform .28s cubic-bezier(.2,.7,.2,1)} .person .tip b{display:block;font-size:13.5px;font-weight:600;line-height:1.35} .person .tip span{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(244,245,241,.18); font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--orange)} .person:hover .tip,.person:focus-within .tip,.person.tipped .tip{opacity:1;transform:none} .person .ph{cursor:pointer} @media (prefers-reduced-motion:reduce){.person .tip{transition:none}} /* ── Contact: a timeline, because these steps are sequential in time ── */ .tl-track{height:180vh;position:relative} .tl-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; justify-content:center;gap:clamp(20px,4vh,44px);overflow:hidden;padding-top:var(--nav-h)} .tl{position:relative;padding-top:30px} /* the horizontal axis is time, so it is labelled and measured */ .tl-axis{position:absolute;left:0;right:0;top:0;height:13px;font-family:var(--mono); font-size:8.5px;letter-spacing:.2em;color:var(--dim-d)} .tl-axis span{position:absolute;top:0;white-space:nowrap} .tl-axis span::before{content:"";position:absolute;left:0;top:14px;width:1px;height:8px; background:var(--line-dd)} .tl-axis .tl-axis-end{right:0;left:auto;color:var(--mut-d)} .tl-axis .tl-axis-end::before{display:none} .tl-rail{position:absolute;left:0;right:0;top:37px;height:2px;background:var(--line-d)} .tl-rail i{display:block;height:100%;width:0;background:var(--orange)} .tl-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,48px);margin:0;padding:0} .tl-step{position:relative;padding-top:34px;opacity:.34;transition:opacity .5s var(--ease)} .tl-step.on{opacity:1} .tl-node{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%; background:var(--ink);border:2px solid var(--line-dd); transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)} .tl-step.on .tl-node{background:var(--orange);border-color:var(--orange);transform:scale(1.2)} .tl-clock{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; color:var(--dim-d);margin-bottom:10px} .tl-step.on .tl-clock{color:var(--lime)} .tl-h{margin:0 0 10px;font-size:clamp(19px,2.2vw,27px);font-weight:700;letter-spacing:-.03em;line-height:1.15} .tl-step p{font-size:15px;line-height:1.6;color:var(--mut-d);max-width:36ch} .tl-detail{margin-top:14px;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px); transition:max-height .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease)} .tl-detail b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--lime);margin-bottom:6px;font-weight:700} .tl-detail span{font-size:13px;line-height:1.5;color:var(--dim-d);display:block} .tl-step.on .tl-detail,.tl-step:hover .tl-detail,.tl-step:focus-within .tl-detail{max-height:170px;opacity:1;transform:translateY(0)} @media (max-width:820px){ .tl-detail{max-height:170px;opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .tl-detail{max-height:170px;opacity:1;transform:none} .tl-step.on .tl-detail,.tl-step:hover .tl-detail,.tl-step:focus-within .tl-detail{transition:none} } @media (max-width:820px){ .tl-axis{display:none} .tl{padding-top:0} .tl-steps{grid-template-columns:1fr;gap:26px} .tl-rail{left:7px;right:auto;top:26px;bottom:14px;width:2px;height:auto} .tl-rail i{width:100%;height:0} .tl-step{padding-top:0;padding-left:34px} .tl-node{top:4px} .tl-track{height:auto} .tl-stick{position:static;height:auto;padding-block:clamp(40px,7vh,80px)} } @media (prefers-reduced-motion:reduce){ .tl-track{height:auto} .tl-stick{position:static;height:auto;padding-block:clamp(40px,7vh,80px)} .tl-step{opacity:1} .tl-rail i{width:100%!important} } /* ── Contact: intro and form ── */ .contact-3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(28px,3.4vw,56px);align-items:start} .c-quick{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px} .c-quick-n{font-size:13.5px;line-height:1.5;color:var(--dim-d);max-width:22ch} @media (max-width:900px){ .contact-3{grid-template-columns:minmax(0,1fr)} .c-quick-n{max-width:none} } /* ── statement moment ─────────────────────────────────────── */ .statement{text-align:center} .stmt{font-size:clamp(30px,6vw,74px);font-weight:700;letter-spacing:-.045em;line-height:1.02; margin:0 auto;max-width:20ch} .stmt em{font-style:normal;color:var(--orange)} .stmt-sub{margin:26px auto 0;max-width:52ch;font-size:clamp(15px,1.5vw,18.5px);line-height:1.6;color:var(--mut-d)} /* ── cost of change: the graph that earns its place ────────── */ .costchange{margin-top:clamp(40px,6vh,72px);text-align:left} .cc-head{max-width:52ch;margin:0 auto clamp(26px,4vh,44px);text-align:center} .cc-lead{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--mut-d)} .cc-chart{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,28px); align-items:end;margin:0;padding:0;max-width:900px;margin-inline:auto} .cc-bar{display:flex;flex-direction:column;align-items:center;gap:10px} .cc-val{font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;color:var(--orange); font-variant-numeric:tabular-nums} .cc-val b{font-weight:700} .cc-col{display:block;width:100%;height:clamp(150px,22vh,220px);display:flex;align-items:flex-end; border-bottom:1px solid var(--line-dd)} .cc-col i{display:block;width:100%;height:0;border-radius:4px 4px 0 0; background:linear-gradient(to top,rgba(242,106,27,.35),var(--orange)); transition:height 1.1s cubic-bezier(.16,.84,.3,1)} .cc-bar:nth-child(2) .cc-col i{transition-delay:.12s} .cc-bar:nth-child(3) .cc-col i{transition-delay:.24s} .cc-bar:nth-child(4) .cc-col i{transition-delay:.36s} .costchange.in .cc-col i{height:var(--h)} .cc-when{font-size:15px;font-weight:700;letter-spacing:-.01em;text-align:center} .cc-note{font-size:13px;line-height:1.45;color:var(--dim-d);text-align:center;max-width:20ch} .cc-foot{margin:clamp(26px,4vh,42px) auto 0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--dim-d);text-align:center} @media (max-width:700px){ .cc-chart{grid-template-columns:1fr 1fr;row-gap:26px} .cc-col{height:clamp(110px,16vh,150px)} .cc-note{display:none} } /* ── us and the usual ─────────────────────────────────────── */ .cmp{margin-top:6px} .cmp-head,.cmp-row{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr) 62px minmax(0,1fr); gap:clamp(10px,1.7vw,24px)} .cmp-head{padding:0 0 12px;border-bottom:1px solid var(--line-p); font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase} .cmp-hthem{color:var(--mut-p)} .cmp-hwait{color:var(--dim-p,rgba(11,20,16,.4));text-align:center;font-size:8.5px} .cmp-hus{color:var(--orange);padding-left:16px} /* interactive row: click/tap to "close the gap" and highlight the Haperty way */ .cmp-row{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line-p); position:relative;cursor:pointer;outline:none;border-radius:8px;margin-inline:-12px;padding-inline:12px; align-items:stretch;transition:background .25s var(--ease)} .cmp-row::after{content:"";position:absolute;inset:0;border-radius:8px;background:transparent;pointer-events:none;transition:background .25s var(--ease)} .cmp-row:hover::after,.cmp-row:focus-visible::after{background:rgba(11,20,16,.025)} .cmp-row:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} /* grammar: what comes in enters from the left, what we produce from the right */ .cmp-q,.cmp-them{opacity:0;transform:translateX(-22px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .cmp-us{opacity:0;transform:translateX(22px); transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .25s var(--ease)} .cmp-row.in .cmp-q,.cmp-row.in .cmp-them{opacity:1;transform:none} .cmp-row.in .cmp-us{opacity:.62;transform:none} .cmp-row.active .cmp-them{opacity:.55} .cmp-row.active .cmp-us,.cmp-row:hover .cmp-us{opacity:1;transform:translateY(-2px);box-shadow:0 14px 32px rgba(11,20,16,.09);border-left-width:4px} .cmp-q{display:flex;gap:12px;align-items:baseline;font-size:clamp(15px,1.55vw,19px); font-weight:700;letter-spacing:-.02em;line-height:1.22;pointer-events:none} .cmp-n{flex:none;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em; color:var(--orange);padding-top:3px} .cmp-them,.cmp-us{display:flex;gap:10px;align-items:flex-start;pointer-events:none} .cmp-them i,.cmp-us i{flex:none;width:18px;height:18px;border-radius:50%;display:grid; place-items:center;font-size:10px;font-style:normal;margin-top:1px} .cmp-them i{background:rgba(11,20,16,.07);color:var(--mut-p)} .cmp-them p{font-size:14.5px;line-height:1.55;color:var(--mut-p)} .cmp-us{padding:14px 16px;border-radius:8px;background:var(--white); border:1px solid var(--line-p);border-left:3px solid var(--orange); margin:-14px 0;transition:box-shadow .25s var(--ease),transform .25s var(--ease),opacity .4s var(--ease)} .cmp-row:hover .cmp-us{box-shadow:0 14px 32px rgba(11,20,16,.09)} .cmp-us i{background:var(--orange);color:#fff} .cmp-us p{font-size:14.5px;line-height:1.55;color:var(--fg-p);font-weight:500} /* the wait: a gap indicator that closes to green when active */ .cmp-wait{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px;pointer-events:none} .cmp-wait svg{width:34px;height:34px;display:block} .cw-track{fill:none;stroke:var(--line-p);stroke-width:2.5} .cw-fill{fill:none;stroke:rgba(11,20,16,.34);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 2.6s linear,stroke .6s var(--ease)} .cmp-row.in .cw-fill{stroke-dashoffset:0;stroke:var(--mut-p)} .cmp-row.active .cw-fill{stroke:var(--green)} .cmp-row.active .cw-t{color:var(--green);font-weight:600} .cw-t{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-align:center; opacity:0;transition:opacity .5s var(--ease) 2.4s,color .4s var(--ease);color:rgba(11,20,16,.45)} .cmp-row.in .cw-t{opacity:1} /* progress indicator */ .cmp-headnote{display:flex;flex-direction:column;align-items:flex-end;gap:18px;max-width:min(440px,100%)} .cmp-progress{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-d);display:flex;align-items:center;gap:12px} .cmp-dots{display:flex;gap:6px} .cmp-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-p);transition:background .3s var(--ease),transform .3s var(--ease)} .cmp-dots span.on{background:var(--orange);transform:scale(1.25)} .cmp-progress-n{color:var(--orange);font-weight:600} /* foot reveal button */ .cmp-foot{display:flex;justify-content:center;margin-top:28px} .cmp-foot .btn{display:none} .cmp-foot .btn.show{display:inline-flex} @media (max-width:900px){ .cmp-head{display:none} .cmp-row{grid-template-columns:minmax(0,1fr);gap:10px;margin-inline:0;padding-inline:0} .cmp-wait{display:none} .cmp-us{margin:2px 0 0;opacity:1!important} .cmp-row.active .cmp-us{border-left-width:4px;transform:translateY(-2px)} .cmp-headnote{align-items:flex-start;margin-top:8px} } @media (prefers-reduced-motion:reduce){ .cmp-q,.cmp-them,.cmp-us{opacity:1;transform:none} .cw-fill{stroke-dashoffset:0} .cw-t{opacity:1} } /* ── trust band: quote, accreditations, clients ───────────── */ .trust-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);align-items:start} .trust-quote blockquote{margin:18px 0 20px;font-size:clamp(19px,2.4vw,30px);line-height:1.32; letter-spacing:-.025em;font-weight:500;color:var(--fg-p);max-width:34ch} .trust-quote blockquote::before{content:'\201C';color:var(--orange);margin-right:2px} .trust-quote blockquote::after{content:'\201D';color:var(--orange)} .trust-by{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid var(--line-p)} .trust-by b{font-size:15px;font-weight:700} .trust-by span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--mut-p)} .trust-side{display:grid;gap:26px} .trust-block h3{margin:0 0 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--mut-p);font-weight:500} .trust-list{display:flex;flex-wrap:wrap;gap:8px} .trust-list span{padding:9px 15px;border-radius:6px;background:var(--white);border:1px solid var(--line-p); font-size:13.5px;font-weight:600;letter-spacing:.01em} @media (max-width:860px){.trust-grid{grid-template-columns:minmax(0,1fr)}} /* ── hero: a drawing sheet, laid up once on load ──────────── */ .sheet-wrap{position:relative;width:100%;max-width:min(46vw,min(62vh,540px));margin-inline:auto;transform-style:preserve-3d;perspective:1200px} /* compass badge pinned to the top-right corner of the sheet mark */ .cmp-sheet{position:absolute;top:22.9%;left:auto;right:27.9%;bottom:auto;width:12%;height:auto; aspect-ratio:1;z-index:3;opacity:0;animation:shFade .6s var(--ease) 2.05s forwards; perspective:320px;transform-style:preserve-3d} .cmp-sheet .cmp{position:absolute;top:0;right:0;left:0;bottom:0;width:100%;height:100%} /* gentle parallax layers inside the construction sheet */ .sheet .sh-site,.sheet .sh-frame,.sheet .sh-roof-group,.sheet .sh-found-group, .sheet .sh-hoist,.sheet .sh-logo-layer,.sheet .sh-lorry-layer{transform-origin:center;will-change:transform} .sheet .sh-site{z-index:3} .sheet .sh-hoist{z-index:4} .sheet .sh-logo-layer{z-index:5} .sheet .sh-lorry-layer{z-index:3} .sheet .sh-roof-group{z-index:2} .sheet .sh-frame{z-index:1} .sheet .sh-found-group{z-index:0} @media (prefers-reduced-motion:reduce){ .sheet .sh-site,.sheet .sh-frame,.sheet .sh-roof-group,.sheet .sh-found-group, .sheet .sh-hoist,.sheet .sh-logo-layer,.sheet .sh-lorry-layer{will-change:auto} } .cmp-sheet .cmp-ring{stroke:rgba(17,17,17,.3);stroke-width:4} .cmp-sheet .cmp-ticks line{stroke:rgba(17,17,17,.22);stroke-width:3.5} .cmp-sheet .cmp-ticks line.is-card{stroke:rgba(239,117,54,.6);stroke-width:5} @media (prefers-reduced-motion:reduce){.cmp-sheet{opacity:1;animation:none}} .sheet{width:100%;height:auto;overflow:visible} .sheet path{fill:none;vector-effect:non-scaling-stroke} .sh-border{stroke:var(--line-dd);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw 1.1s var(--ease) .15s forwards} .sh-margin{stroke:var(--line-p);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw 1.1s var(--ease) .5s forwards} .sh-tick path{stroke:var(--orange);stroke-width:2;opacity:0; animation:shFade .5s var(--ease) 1.05s forwards} .sh-dim{stroke:var(--line-p);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .8s var(--ease) 1.2s forwards} .sh-blk{stroke:var(--line-dd);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .7s var(--ease) 1.35s forwards} .sh-blk2{stroke:var(--line-p);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .7s var(--ease) 1.55s forwards} .sh-txt text{fill:var(--fg-p);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; opacity:0;animation:shFade .6s var(--ease) 1.85s forwards} .sh-txt text + text{fill:var(--mut-p);font-size:7px;letter-spacing:.16em} .sh-note text{fill:var(--dim-d);font-family:var(--mono);font-size:8.5px;letter-spacing:.2em; opacity:0;animation:shFade .6s var(--ease) 2s forwards} /* the logo mark is lowered into the gable by the crane (see .sh-logo-drop below) */ @keyframes shDraw{to{stroke-dashoffset:0}} @keyframes shFade{to{opacity:1}} @media (max-width:1000px){.sheet-wrap{max-width:min(78vw,460px)}} /* the frame goes up inside the sheet: columns first, then beams, then deck */ .sh-frame path{fill:none;vector-effect:non-scaling-stroke} .sh-col{stroke:var(--line-p);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .5s cubic-bezier(.16,1,.3,1) forwards} .sh-col:nth-of-type(1){animation-delay:1.25s} .sh-col:nth-of-type(2){animation-delay:1.38s} .sh-col:nth-of-type(3){animation-delay:1.51s} .sh-col:nth-of-type(4){animation-delay:1.64s} .sh-beam{stroke:var(--orange);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.45; animation:shDraw .55s cubic-bezier(.16,1,.3,1) forwards} .sh-beam:nth-of-type(1){animation-delay:1.8s} .sh-beam:nth-of-type(2){animation-delay:1.95s} .sh-beam:nth-of-type(3){animation-delay:2.1s} .sh-deck{stroke:var(--line-p);stroke-width:.8;opacity:.7;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .7s var(--ease) 2.25s forwards} /* roof lands after the frame tops out, then the ground it all sits on */ .sh-roof{stroke:var(--line-p);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .8s cubic-bezier(.16,1,.3,1) 2.4s forwards} .sh-ridge{stroke:var(--orange);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.45; animation:shDraw .5s cubic-bezier(.16,1,.3,1) 3.05s forwards} .sh-found{stroke:var(--line-p);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .6s var(--ease) 2.6s forwards} .sh-hatch{stroke:var(--line-p);stroke-width:.7;opacity:.6;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .7s var(--ease) 2.95s forwards} /* site context: hoarding, boundary fence, survey tripod */ .sh-hoarding{fill:none;stroke:var(--line-p);stroke-width:.8;opacity:0; animation:shFade .5s var(--ease) .8s forwards} .sh-fence{stroke:var(--line-p);stroke-width:.7;stroke-dasharray:2 5;opacity:0; animation:shFade .5s var(--ease) .95s forwards} .sh-tripod{stroke:var(--orange);stroke-width:.8;fill:none;opacity:0; animation:shFade .5s var(--ease) 1.1s forwards} .sh-site text{fill:var(--true-ink);font-family:var(--mono);font-size:5.5px;letter-spacing:.08em;opacity:0; animation:shFade .5s var(--ease) 1.2s forwards} /* crane lowers the mark into the gable */ .sh-hoist-line{stroke:var(--line-p);stroke-width:.7;stroke-dasharray:3 5;opacity:0; animation:shFade .4s var(--ease) 1.1s forwards} .sh-crane-jib{stroke:var(--line-p);stroke-width:.8;opacity:0; animation:shFade .4s var(--ease) 1.05s forwards} .sh-hook{fill:var(--orange);opacity:0; animation:shHook 1.5s cubic-bezier(.33,1,.68,1) 1.15s forwards} @keyframes shHook{0%{opacity:0;transform:translateY(-60px)} 18%{opacity:1}100%{opacity:1;transform:translateY(0)}} /* logo carried down and locked into the sheet with a premium spring settle */ .sh-logo-drop{ opacity:0; filter:drop-shadow(0 10px 22px rgba(11,20,16,.22)); transform:translateY(-220px); transform-box:view-box; transform-origin:center; pointer-events:none; animation:shLogoDrop 2s cubic-bezier(.33,1,.68,1) 1.2s forwards} @keyframes shLogoDrop{ 0% {opacity:0;transform:translateY(-220px) scale(.92);animation-timing-function:ease-out} 12% {opacity:1} 60% {opacity:1;transform:translateY(0) scale(.97);animation-timing-function:cubic-bezier(.34,1.56,.64,1)} 76% {opacity:1;transform:translateY(-10px) scale(1.12)} 86% {opacity:1;transform:translateY(3px) scale(1.04)} 100%{opacity:1;transform:translateY(0) scale(1.08)}} /* subtle hover glow pulse once the logo has settled */ .sh-logo-hover-glow{opacity:0;transform-origin:center;transform:scale(.9);pointer-events:none; transition:opacity .35s ease,transform .35s ease} .sh-logo-layer:hover .sh-logo-hover-glow{opacity:.42; animation:shLogoHoverPulse 2.4s ease-in-out infinite} @keyframes shLogoHoverPulse{ 0%,100%{opacity:.34;transform:scale(.96)} 50%{opacity:.52;transform:scale(1.08)}} /* logo impact glow — a single warm radial pulse on landing */ .sh-logo-glow{opacity:0;transform-origin:center;transform:scale(.6);pointer-events:none; animation:shLogoGlow 2s cubic-bezier(.33,1,.68,1) 1.2s forwards} @keyframes shLogoGlow{ 0%,58%{opacity:0;transform:scale(.6)} 72% {opacity:.6;transform:scale(1.05)} 85% {opacity:.28;transform:scale(1.2)} 100% {opacity:0;transform:scale(1.35)}} /* scaffolding and tiny crew */ .sh-scaffold{stroke:var(--line-p);stroke-width:.6;opacity:0; animation:shFade .5s var(--ease) 1.85s forwards} .sh-worker{fill:var(--orange);fill-opacity:.7;opacity:0;animation:shPop .4s var(--ease) forwards} .sh-worker:nth-of-type(1){animation-delay:2.05s} .sh-worker:nth-of-type(2){animation-delay:2.18s} .sh-worker:nth-of-type(3){animation-delay:2.3s} @keyframes shPop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}} /* finish pass: windows, cladding joints, roof tiles */ .sh-window{fill:var(--true-ink);fill-opacity:.05;stroke:none;opacity:0; animation:shSlideY .5s cubic-bezier(.16,1,.3,1) forwards} .sh-window:nth-of-type(1){animation-delay:3.25s} .sh-window:nth-of-type(2){animation-delay:3.32s} .sh-window:nth-of-type(3){animation-delay:3.39s} .sh-window:nth-of-type(4){animation-delay:3.46s} @keyframes shSlideY{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}} .sh-clad{stroke:var(--line-p);stroke-width:.6;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1; animation:shDraw .7s var(--ease) forwards} .sh-clad:nth-of-type(1){animation-delay:3.55s} .sh-clad:nth-of-type(2){animation-delay:3.62s} .sh-clad:nth-of-type(3){animation-delay:3.69s} .sh-clad:nth-of-type(4){animation-delay:3.76s} .sh-tile{stroke:var(--line-p);stroke-width:.6;stroke-dasharray:2 3;stroke-dashoffset:1;opacity:0; animation:shDraw .8s var(--ease) forwards} .sh-tile:nth-of-type(1){animation-delay:3.45s} .sh-tile:nth-of-type(2){animation-delay:3.5s} .sh-tile:nth-of-type(3){animation-delay:3.55s} .sh-tile:nth-of-type(4){animation-delay:3.6s} /* handover: warm light, plaque, flag */ /* day to night is driven by scroll, not a timer: .is-night is added as the hero scrolls away, so the lights come on when you move down the page */ .sh-light{fill:url(#lightGradient);filter:blur(10px);mix-blend-mode:multiply;opacity:0; transition:opacity 1.6s var(--ease),filter 1.6s var(--ease)} .sheet-wrap.is-night .sh-light{opacity:.24} .sh-dusk{fill:url(#duskGradient);opacity:0;pointer-events:none; transition:opacity 2.1s var(--ease)} .sheet-wrap.is-night .sh-dusk{opacity:.12} .sheet-wrap.is-night .sh-fence,.sheet-wrap.is-night .sh-clad, .sheet-wrap.is-night .sh-tile,.sheet-wrap.is-night .sh-hatch, .sheet-wrap.is-night .sh-window,.sheet-wrap.is-night .sh-deck{opacity:.48; transition:opacity 1.6s var(--ease)} .sh-plaque{fill:var(--true-ink);fill-opacity:.82;stroke:none;opacity:0; animation:shFade .6s var(--ease) 4.2s forwards} .sh-plaque text{fill:#fff;font-family:var(--mono);font-size:5px;letter-spacing:.08em;text-anchor:middle} /* delivery lorry drives onto site and leaves after the last beam */ .sh-lorry{fill:var(--true-ink);fill-opacity:.6;stroke:none;opacity:0;transform:translateX(-180px);transform-box:view-box; animation:shDrive 3.4s cubic-bezier(.33,1,.68,1) 1.5s forwards} @keyframes shDrive{0%{opacity:0;transform:translateX(-180px)}10%{opacity:1}75%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(420px)}} /* percussive impact when steel and roof land */ .sh-thud{animation:shThud .18s cubic-bezier(.36,0,.66,1)} .sh-thud-heavy{animation:shThudHeavy .28s cubic-bezier(.36,0,.66,1)} @keyframes shThud{0%{transform:translateY(0)}25%{transform:translateY(1.5px)}100%{transform:translateY(0)}} @keyframes shThudHeavy{0%{transform:translateY(0)}25%{transform:translateY(2.5px)}100%{transform:translateY(0)}} /* hover labels */ [data-tip]{cursor:help} .sh-tip{position:absolute;z-index:10;padding:6px 10px;border-radius:6px;background:var(--true-ink);color:#fff; font-family:var(--mono);font-size:11px;letter-spacing:.08em;pointer-events:none;opacity:0; transform:translate(-50%,-100%) translateY(-8px);transition:opacity .2s ease,transform .2s ease;white-space:nowrap} .sh-tip.show{opacity:1;transform:translate(-50%,-100%) translateY(-12px)} /* survey sweep: one pass across the sheet as the frame tops out */ .sh-scan{stroke:var(--orange);stroke-width:.8;opacity:0; animation:shScan 2.6s var(--ease) 2.4s forwards} @keyframes shScan{0%{opacity:0;transform:translateY(-330px)} 12%{opacity:.5}88%{opacity:.5}100%{opacity:0;transform:translateY(0)}} .sh-hook,.sh-scan,.sh-logo-drop,.sh-lorry{transform-box:view-box} @media (prefers-reduced-motion:reduce){ .sh-border,.sh-margin,.sh-dim,.sh-blk,.sh-blk2, .sh-col,.sh-beam,.sh-deck,.sh-roof,.sh-ridge,.sh-found,.sh-hatch,.sh-clad,.sh-tile{stroke-dashoffset:0;animation:none} .sh-tick path,.sh-txt text,.sh-note text,.sh-hoist-line,.sh-crane-jib,.sh-hook,.sh-site,.sh-site text,.sh-hoarding,.sh-fence,.sh-tripod, .sh-logo-drop,.sh-scaffold,.sh-worker,.sh-window,.sh-plaque,.sh-lorry{opacity:1;animation:none;transform:none} .sh-logo-glow,.sh-logo-hover-glow{opacity:0;animation:none} .sh-light{opacity:0} .sh-scan{display:none} } /* Manual reduced-motion toggle also disables the logo spring reveal and hover glow */ .reduce-motion .sh-logo-drop{opacity:1;animation:none;transform:none;filter:drop-shadow(0 10px 22px rgba(11,20,16,.22))} .reduce-motion .sh-logo-glow,.reduce-motion .sh-logo-hover-glow{opacity:0;animation:none} /* ── next page band ───────────────────────────────────────── */ .nextpage{display:flex;align-items:center;gap:16px;padding:clamp(26px,4vw,46px) var(--pad-i); border-top:1px solid var(--line-d);background:var(--ink-2); transition:background .3s var(--ease),padding-left .3s var(--ease)} .nextpage:hover{background:var(--green);padding-left:calc(var(--pad-i) + 14px)} .nextpage .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim-d)} .nextpage:hover .k{color:rgba(255,255,255,.72)} .nextpage:hover .t{color:#fff} .nextpage .t{font-size:clamp(21px,2.7vw,36px);font-weight:700;letter-spacing:-.03em} .nextpage .arw{width:22px;height:16px;margin-left:auto;color:var(--orange);transition:transform .3s var(--ease)} .nextpage:hover .arw{transform:translateX(8px);color:#fff} /* ── projects register ────────────────────────────────────── */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .chip{padding:8px 15px;border-radius:999px;border:1px solid var(--line-p);background:transparent; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--mut-p);cursor:pointer;transition:all .2s var(--ease)} .chip:hover{border-color:var(--orange);color:var(--fg-p)} .chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff} .pcard{position:relative;padding:0;overflow:hidden;border:1px solid var(--line-p);border-radius:10px; background:var(--white);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)} .pcard:hover{border-color:var(--orange);box-shadow:0 20px 44px rgba(11,20,16,.09)} .pcard.hide{display:none} .pcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 22px;border-bottom:1px solid var(--line-p);background:var(--ink-2)} .pcard .top .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--mut-p)} .pcard .top .tag{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--orange)} .pcard .main{padding:22px} .pcard h3{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.03em} .pcard .loc{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--mut-p)} .pcard .scope{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--mut-p)} .pdata{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-p); border-bottom:1px solid var(--line-p);margin-top:20px} .pdata div{padding:14px 0 14px 14px;border-left:1px solid var(--line-p)} .pdata div:first-child{border-left:0;padding-left:0} .pdata .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--mut-p)} .pdata .v{margin-top:6px;font-size:16px;font-weight:700;letter-spacing:-.02em} .outcome{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:7px; background:rgba(94,155,31,.09);border:1px solid rgba(94,155,31,.28)} .outcome b{flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--lime);padding-top:3px} .outcome span{font-size:14.5px;line-height:1.55;color:var(--fg-p)} /* ── empty states ─────────────────────────────────────────── */ .empty{grid-column:1/-1;padding:clamp(30px,4vw,54px);border:1px solid var(--line-p);border-radius:10px; background:var(--ink-2);text-align:center;max-width:640px;margin-inline:auto} .empty .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--orange)} .empty h3{margin:16px 0 12px} .empty p{color:var(--mut-p);font-size:15px;line-height:1.6;max-width:46ch;margin:0 auto 24px} /* ── photography slots ────────────────────────────────────── */ .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .photo-slot{display:none} .scard .photo{filter:saturate(.9) contrast(1.05)} .scard .scrim,.scard .body,.scard .code{z-index:2} .figure figcaption{z-index:2} /* ── privacy / legal ──────────────────────────────────────── */ .legal{margin-top:34px;max-width:70ch} .legal h2{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.025em;margin:34px 0 10px} .legal p,.legal li{color:var(--mut-p);font-size:15.5px;line-height:1.68} .legal ul{padding-left:20px;margin:10px 0} .legal li{margin:6px 0} .legal a{color:var(--orange);border-bottom:1px solid rgba(191,74,8,.4)} .legal b{color:var(--fg-p)} .legal .ph{color:var(--green);font-family:var(--mono);font-size:.86em;letter-spacing:.02em; background:rgba(20,113,60,.08);padding:1px 5px;border-radius:3px} .legal .warn{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:8px;margin-top:8px; background:rgba(191,74,8,.08);border:1px solid rgba(191,74,8,.3)} .legal .warn b{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--orange);padding-top:3px} .legal .warn span{font-size:14px;line-height:1.55;color:var(--mut-p)} /* ── two-column scroll section copy blocks ────────────────── */ .dl-copy{min-width:0} /* ── form consent line ────────────────────────────────────── */ .consent{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--dim-d)} .consent a{color:var(--orange);border-bottom:1px solid rgba(191,74,8,.4)} /* ── About: how many people between you and the answer ────── */ .chains{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px); margin-top:clamp(16px,2.4vh,28px);align-items:start} .ch-col{border:1px solid var(--line-d);border-radius:10px;padding:clamp(16px,2vw,24px); background:var(--ink-2)} .ch-col[data-side="us"]{border-color:rgba(242,106,27,.4);background:rgba(242,106,27,.05)} .ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding-bottom:14px;border-bottom:1px solid var(--line-d);margin-bottom:6px} .ch-head .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} .ch-clock{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--orange); font-weight:500;min-height:1em} .ch-list{list-style:none;margin:0;padding:0} .ch-node{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start; padding:11px 0;position:relative;opacity:.34;transition:opacity .35s var(--ease)} .ch-node::after{content:"";position:absolute;left:10px;top:30px;bottom:-11px;width:1px; background:var(--line-dd)} .ch-node:last-child::after{display:none} .ch-dot{width:21px;height:21px;border-radius:50%;border:1px solid var(--line-dd); background:var(--ink);display:block;position:relative;z-index:1; transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .ch-body{display:flex;flex-direction:column;gap:3px;min-width:0} .ch-body b{font-size:14.5px;font-weight:600;letter-spacing:-.01em} .ch-body em{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--mut-d)} .ch-node.lit{opacity:1} .ch-node.lit .ch-dot{background:var(--orange);border-color:var(--orange);transform:scale(1.1)} .ch-col[data-side="us"] .ch-node.lit .ch-dot{background:var(--lime);border-color:var(--lime)} .ch-out{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-d); font-size:14.5px;line-height:1.5;color:var(--fg-d);min-height:3.2em; opacity:0;transition:opacity .4s var(--ease)} .ch-out.show{opacity:1} .ch-ask{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(20px,3vh,32px)} .ch-note{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim-d)} @media (max-width:820px){.chains{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ .ch-node{opacity:1} .ch-out{opacity:1} } /* ── the gear train ───────────────────────────────────────── */ .gears-track{height:220vh;position:relative} .gears-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; justify-content:center;gap:clamp(12px,2vh,24px);padding:calc(var(--nav-h) + 10px) 0 22px;overflow:hidden} .gears-head{max-width:70ch} .gears-stage{width:100%;flex:1 1 auto;min-height:0;display:flex;align-items:center} .gears-stage svg{width:100%;height:auto;max-height:min(54vh,510px);overflow:visible} /* the camera group: pan/zoom lives here, measured from the top-left of the drawing so the maths matches the sheet's own coordinates */ #gearCam{transform-origin:0 0;transform-box:view-box;will-change:transform} .gr-g{opacity:1;transition:opacity .45s var(--ease)} .gr-g.dim{opacity:.52} .gr-halo{fill:none;stroke:var(--orange);stroke-width:1.3;opacity:0; transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--ease)} .gr-g.on .gr-halo{opacity:.5;animation:grPulse 2.4s ease-in-out infinite} @keyframes grPulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.6;transform:scale(1.045)}} .gr-shadow{fill:rgba(0,0,0,.42)} .gr-teeth{fill:url(#gearFace);stroke:rgba(255,255,255,.16);stroke-width:.6} .gr-rim{fill:none;stroke:rgba(8,16,12,.34);stroke-width:1.6} .gr-hole{fill:var(--ink);stroke:rgba(255,255,255,.10);stroke-width:.8} .gr-hub{fill:#767f78;stroke:rgba(8,16,12,.4);stroke-width:1.2} .gr-bore{fill:var(--ink)} .gr-key{fill:var(--ink)} .gr-dir{fill:none;stroke:rgba(8,16,12,.42);stroke-width:1.6;stroke-linecap:round} .gr-dirhead{fill:rgba(8,16,12,.42)} .gr-abbr{fill:rgba(236,237,231,.55);font-family:var(--mono);font-size:7.5px;letter-spacing:.12em; text-anchor:middle;pointer-events:none} .gr-z{fill:rgba(236,237,231,.3);font-family:var(--mono);font-size:7px;letter-spacing:.1em; text-anchor:middle} .gr-mesh{fill:none;stroke:rgba(185,232,107,.55);stroke-width:1.4} .gr-dim path{stroke:rgba(236,237,231,.22);stroke-width:1;fill:none} .gr-g .gr-teeth,.gr-g .gr-hub,.gr-g .gr-abbr{transition:fill .4s var(--ease)} /* live gears take the tricolour across the train: green → white → orange */ .gr-g.on .gr-teeth{fill:url(#gearLive)} .gr-g.on .gr-hub{fill:#c4520b} .gr-g.on .gr-abbr{fill:#08100C} .gr-g.on .gr-z{fill:var(--orange)} .gr-g.on[data-g="0"] .gr-teeth, .gr-g.on[data-g="1"] .gr-teeth{fill:url(#gearGreen)} .gr-g.on[data-g="0"] .gr-hub, .gr-g.on[data-g="1"] .gr-hub{fill:#0f6b3c} .gr-g.on[data-g="0"] .gr-z, .gr-g.on[data-g="1"] .gr-z{fill:#3fae6f} .gr-g.on[data-g="2"] .gr-teeth, .gr-g.on[data-g="3"] .gr-teeth{fill:url(#gearWhite)} .gr-g.on[data-g="2"] .gr-hub, .gr-g.on[data-g="3"] .gr-hub{fill:#b9bdb6} .gr-g.on[data-g="2"] .gr-z, .gr-g.on[data-g="3"] .gr-z{fill:rgba(236,237,231,.85)} .gr-g.on[data-g="0"] .gr-halo, .gr-g.on[data-g="1"] .gr-halo{stroke:#3fae6f} .gr-g.on[data-g="2"] .gr-halo, .gr-g.on[data-g="3"] .gr-halo{stroke:rgba(236,237,231,.8)} /* final gear = the BIM / handover gear closes on orange */ .gr-g.on[data-g="5"] .gr-teeth{fill:url(#gearFinal)} .gr-g.on[data-g="5"] .gr-hub{fill:#c4520b} .gr-g.on[data-g="5"] .gr-abbr{fill:#08100C} .gr-g.on[data-g="5"] .gr-z{fill:var(--orange)} .gr-g.on[data-g="5"] .gr-halo{stroke:var(--orange);animation:grPulse 2.4s ease-in-out infinite} /* completion state: the whole train is finished. The glow sits on parts that are NOT spinning (the halo ring, the tray), because animating a drop-shadow on a rotating group is the single most expensive thing this section could ask the compositor to do. */ .gears-stage.is-complete .gr-g[data-g="5"] .gr-halo{opacity:.85;stroke-width:2; filter:drop-shadow(0 0 10px rgba(242,106,27,.55))} .gears-stage.is-complete .cv-tray{filter:drop-shadow(0 0 10px rgba(94,156,26,.35))} .gears-stage.is-complete .cv-out{fill:var(--lime-g);font-weight:600;font-size:7.5px;transition:fill .4s ease} .gears-stage.is-complete .cv-stack[data-st="5"]{fill:var(--lime-g);filter:drop-shadow(0 0 6px rgba(94,156,26,.55))} .gears-stage.is-complete .cv-count{fill:var(--lime-g);font-weight:700;transition:fill .4s ease} @media (prefers-reduced-motion:reduce){ .gears-stage.is-complete .gr-g[data-g="5"] .gr-halo{filter:none} .gears-stage.is-complete .cv-tray{filter:none} .gears-stage.is-complete .cv-stack[data-st="5"]{filter:none} } /* mesh points spark as the torque passes through them */ .gr-mesh{opacity:.28;transition:opacity .4s var(--ease),stroke .4s var(--ease)} .gr-mesh.live{opacity:1;stroke:var(--orange);animation:grSpark 1.5s ease-in-out infinite} .gears-stage.is-complete .gr-mesh.live{stroke:var(--lime-g)} @keyframes grSpark{0%,100%{opacity:.5;stroke-width:1.2}50%{opacity:1;stroke-width:2}} @media (prefers-reduced-motion:reduce){.gr-mesh.live{animation:none}} /* practical-completion stamp on the gear train */ .gr-stamp{opacity:0;transition:opacity .5s var(--ease)} .gr-stamp rect{fill:rgba(94,140,26,.10);stroke:var(--lime-g);stroke-width:1.1} .gr-stamp text{fill:var(--lime-g);font-family:var(--mono);font-size:6.6px;letter-spacing:.16em;text-anchor:middle} .gears-stage.is-complete .gr-stamp{opacity:1;animation:hoStamp .75s var(--ease) both} .reduce-motion .gears-stage.is-complete .gr-stamp, .reduce-motion .gears-stage.is-complete .gr-mesh.live{animation:none} /* ── handover celebration: shared by every sequence that ends in handover ── */ @keyframes hoRing{0%{opacity:.9;transform:scale(.94)}70%{opacity:.2;transform:scale(1.015)}100%{opacity:0;transform:scale(1.03)}} @keyframes hoStamp{0%{opacity:0;transform:scale(1.22)}60%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:scale(1)}} .ho-cheer{position:relative} .ho-cheer::after{content:"";position:absolute;inset:-8px;border:1px solid var(--lime-g);border-radius:10px; pointer-events:none;box-shadow:0 0 22px rgba(94,156,26,.28) inset;animation:hoRing 1.5s var(--ease) 2 both} .reduce-motion .ho-cheer::after{animation:none;opacity:.45} @media (prefers-reduced-motion:reduce){.ho-cheer::after{animation:none;opacity:.45}} .build-rail.is-handover .build-rail-fill{background:var(--lime-g)} .build-rail.is-handover .build-rail-pct{color:var(--lime-g)} .gears-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:clamp(18px,3vw,44px);align-items:end} .gears-caps{position:relative;min-height:clamp(70px,9vh,92px)} .gears-caps .scap{position:absolute;inset:0;opacity:0;transform:translateY(12px); transition:opacity .4s var(--ease),transform .4s var(--ease)} .gears-caps .scap.on{opacity:1;transform:none} .gears-caps .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--orange)} .gears-caps h3{margin:10px 0 0} .gears-meter{padding-bottom:4px} .gm-bar{height:2px;background:var(--line-d)} .gm-bar i{display:block;height:100%;width:0;background:var(--lime)} .gm-row{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono); font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} .gm-row b{color:var(--orange);font-weight:500} /* take one discipline out of the appointment and the train downstream stalls */ .gears-out{margin-top:clamp(10px,1.8vh,20px)} .go-k{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--dim-d);margin-bottom:9px} .go-btns{display:flex;flex-wrap:wrap;gap:7px} .go-btns button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; padding:7px 11px;border:1px solid var(--line-d);background:transparent;color:var(--dim-d); cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .go-btns button:hover{color:var(--fg-d);border-color:rgba(236,237,231,.4)} .go-btns button[aria-pressed="true"]{color:#08100C;background:var(--orange);border-color:var(--orange)} .go-msg{margin:11px 0 0;font-size:13px;line-height:1.55;color:rgba(236,237,231,.7);max-width:56ch} .go-msg b{color:var(--fg-d);font-weight:600} .gr-g.out{opacity:.28} .gr-g.out .gr-teeth{fill:none;stroke:rgba(236,237,231,.34);stroke-dasharray:3 3} .gr-g.stall{opacity:.4} .gr-g.stall .gr-teeth{fill:#4a534c} @media (max-height:760px){.gears-out{display:none}} @media (max-width:860px){ .gears-track{height:320vh} /* the camera crops into the train, so the frame has to clip */ .gears-stage{overflow:hidden} .gears-stage svg{overflow:hidden;max-height:min(38vh,340px)} .gears-foot{grid-template-columns:minmax(0,1fr);gap:14px} .gears-stage svg{max-height:42vh} .gears-head .lede{display:none} .gr-z{display:none} } /* the stage is the point of this section: on anything but a tall window the supporting paragraph gives up its space so the gears can be read */ @media (max-height:1000px){ .gears-head .lede{display:none} } @media (max-height:860px){ .gears-stick{padding-top:calc(var(--nav-h) + 6px);gap:clamp(8px,1.4vh,14px);padding-bottom:16px} .gears-head .lede{display:none} .gears-head .d2{font-size:clamp(24px,3.2vw,38px)} .gears-stage svg{max-height:min(46vh,400px)} .gears-caps{min-height:clamp(58px,7.5vh,76px)} } @media (max-height:680px){ .gears-head .eyebrow{display:none} .gears-stage svg{max-height:38vh} .gm-row{display:none} } @media (prefers-reduced-motion:reduce){ .gears-caps{min-height:0} .gears-caps .scap{position:static;opacity:1;transform:none;margin-bottom:14px} } /* ── the weekly loop: flat, so the text never overlaps itself ── */ .cycle-track{height:200vh;position:relative} .cycle-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden; padding-top:var(--nav-h)} .cycle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(22px,4vw,60px);align-items:center;width:100%} .cycle-copy{min-width:0} .cycle-steps{position:relative;min-height:clamp(150px,20vh,190px);margin-top:22px} .cy-step{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .4s var(--ease),transform .4s var(--ease)} .cy-step.on{opacity:1;transform:none} .cy-step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--orange)} .cy-step h3{margin:10px 0 10px} .cy-step p{font-size:15px;line-height:1.6;color:var(--mut-d);max-width:42ch} .cycle-meter{margin-top:4px} .cm-bar{height:2px;background:var(--line-d)} .cm-bar i{display:block;height:100%;width:0;background:var(--lime)} .cm-row{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-family:var(--mono); font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} .cm-row b{color:var(--orange);font-weight:500} .cycle-stage svg{width:100%;height:auto;max-height:min(52vh,430px)} .cy-ring{fill:none;stroke:var(--line-dd);stroke-width:1.4} .cy-arrow{fill:var(--dim-d)} .cy-sweep{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1} .cy-node circle{fill:var(--ink-2);stroke:var(--line-dd);stroke-width:1.3; transition:fill .35s var(--ease),stroke .35s var(--ease),r .35s var(--ease)} .cy-num{fill:var(--dim-d);font-family:var(--mono);font-size:10px;letter-spacing:.1em; transition:fill .35s var(--ease)} .cy-lbl{fill:var(--mut-d);font-size:13px;font-weight:600;letter-spacing:-.01em; transition:fill .35s var(--ease)} .cy-node.on circle{fill:var(--orange);stroke:var(--orange)} .cy-node.on .cy-num{fill:#08100C} .cy-node.on .cy-lbl{fill:var(--fg-d)} .cy-node.done circle{stroke:rgba(185,232,107,.7)} .cy-node.done .cy-num{fill:rgba(185,232,107,.9)} .cy-dot{fill:var(--lime);stroke:#08100C;stroke-width:1.5} @media (max-width:900px){ .cycle-grid{grid-template-columns:minmax(0,1fr);gap:18px} .cycle-stage svg{max-height:34vh} .cycle-track{height:180vh} } @media (prefers-reduced-motion:reduce){ .cycle-steps{min-height:0} .cy-step{position:static;opacity:1;transform:none;margin-bottom:18px} } /* ── the sectional drawing ───────────────────────────────── */ /* the drawing: hairlines and hatches, the way a section is drawn */ #elev [data-m]{opacity:0} #elev [data-m="rise"],#elev [data-m="grow"]{transform-box:fill-box;transform-origin:50% 100%} #elev [data-m="drop"],#elev [data-m="lower"],#elev [data-m="sweep"]{transform-box:fill-box} #elev [data-m="draw"]{stroke-dasharray:1;stroke-dashoffset:1} #elev .ln-gnd{stroke:rgba(236,237,231,.75);stroke-width:1.6;fill:none} #elev .earth{fill:url(#soil)} #elev .excav{stroke:rgba(236,237,231,.32);stroke-width:1.2;fill:none;stroke-dasharray:7 5} #elev .grid-pin{stroke:rgba(236,237,231,.34);stroke-width:1;fill:none;stroke-dasharray:4 4} #elev .hoard,#elev .cabin{fill:rgba(236,237,231,.10);stroke:rgba(236,237,231,.42);stroke-width:1} #elev .hoard-rib{stroke:rgba(236,237,231,.20);stroke-width:.8;fill:none} #elev .cabin-win{fill:rgba(185,232,107,.30)} #elev .cabin-door{fill:rgba(236,237,231,.26)} #elev .pallet{fill:rgba(242,106,27,.20);stroke:rgba(242,106,27,.55);stroke-width:1} #elev .gate{stroke:rgba(236,237,231,.45);stroke-width:1.6;fill:none} #elev .van{fill:rgba(236,237,231,.16);stroke:rgba(236,237,231,.48);stroke-width:1} #elev .van circle{fill:rgba(8,16,12,.9);stroke:rgba(236,237,231,.5)} #elev .site-lbl{fill:rgba(236,237,231,.42);font-family:var(--mono);font-size:8px;letter-spacing:.14em} #elev .ftg,#elev .gbeam{fill:rgba(236,237,231,.14);stroke:rgba(236,237,231,.62);stroke-width:1.3} #elev .col{fill:rgba(236,237,231,.20);stroke:rgba(236,237,231,.70);stroke-width:1.2} #elev .slab{fill:rgba(236,237,231,.26);stroke:rgba(236,237,231,.72);stroke-width:1.2} #elev .stair{stroke:rgba(236,237,231,.60);stroke-width:1.5;fill:none;stroke-linejoin="round"} #elev .para{stroke:rgba(236,237,231,.70);stroke-width:1.6;fill:none} #elev .clad{fill:rgba(185,232,107,.16);stroke:rgba(185,232,107,.52);stroke-width:1} #elev .plant{fill:rgba(236,237,231,.18);stroke:rgba(236,237,231,.62);stroke-width:1.2} #elev .plant-fin{stroke:rgba(236,237,231,.34);stroke-width:.9;fill:none} #elev .part{fill:rgba(236,237,231,.34)} #elev .duct{stroke:rgba(185,232,107,.55);stroke-width:2.2;fill:none;stroke-dasharray:1} #elev .vav{fill:rgba(185,232,107,.22);stroke:rgba(185,232,107,.5);stroke-width:.9} #elev .lvl{fill:rgba(236,237,231,.5);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em} #elev .fig circle{fill:rgba(236,237,231,.85)} #elev .fig path{stroke:rgba(236,237,231,.85);stroke-width:1.7;fill:none;stroke-linecap:round} #elev .crane path{stroke:var(--orange);stroke-width:1.5;fill:none} #elev .crane rect{fill:rgba(242,106,27,.45);stroke:var(--orange);stroke-width:1} #elev .crane text{fill:rgba(242,106,27,.8);font-family:var(--mono);font-size:8px;letter-spacing:.14em} #elev .hook path{stroke:rgba(242,106,27,.8);stroke-width:1;fill:none} #elev .hook rect{fill:rgba(242,106,27,.3);stroke:var(--orange);stroke-width:1.1} #elev .dim path{stroke:rgba(236,237,231,.42);stroke-width:1;fill:none} #elev .dim rect{fill:#08100C} #elev .dim text{fill:rgba(236,237,231,.6);font-family:var(--mono);font-size:8.5px;letter-spacing:.14em} #elev .cost-tag{fill:rgba(185,232,107,.85);font-family:var(--mono);font-size:8.5px;letter-spacing:.14em} #elev .risk path{fill:rgba(242,106,27,.16);stroke:var(--orange);stroke-width:1.2} #elev .risk text{fill:var(--orange);font-family:var(--mono);font-size:8px;letter-spacing:.1em} #elev .risk.ok path{fill:rgba(185,232,107,.14);stroke:rgba(185,232,107,.75)} #elev .risk.ok text{fill:rgba(185,232,107,.95)} #elev .snag path{stroke:rgba(185,232,107,.95);stroke-width:2;fill:none;stroke-linecap:round} #elev .stamp rect{fill:none;stroke:var(--orange);stroke-width:2} #elev .stamp text{fill:var(--orange);font-family:var(--mono);font-size:10px;letter-spacing:.18em} /* progress shading: anything complete gains a light wash */ #elev .done{filter:brightness(1.22)} /* ── distinct page openings ───────────────────────────────── */ .open-stmt,.open-green{padding-block:clamp(72px,13vh,150px)} .open-green .open-big{color:#fff} .open-big{font-size:clamp(40px,8vw,116px);font-weight:700;letter-spacing:-.05em;line-height:.94; margin:18px 0 0;max-width:16ch} .open-sub{margin-top:26px;max-width:56ch;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--mut-d)} .open-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vh,44px); padding-top:22px;border-top:1px solid var(--line-d)} .open-meta span{padding:7px 13px;border:1px solid var(--line-dd);border-radius:999px; font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--mut-d)} .open-list{padding:calc(var(--nav-h) + clamp(34px,6vh,70px)) 0 clamp(20px,3vh,34px); border-bottom:1px solid var(--line-p)} .ol-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:22px} .ol-h1{font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1; margin:14px 0 0;max-width:22ch} .ol-note{font-size:15px;line-height:1.55;color:var(--mut-p);max-width:30ch} .open-bar{padding:calc(var(--nav-h) + clamp(26px,4.5vh,52px)) var(--pad-i) clamp(18px,2.6vh,30px); display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px} .open-bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end; gap:20px;padding-inline:0} .ob-h1{font-size:clamp(32px,5vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:12px 0 0} .ob-note{font-size:15px;line-height:1.55;color:var(--mut-p);max-width:32ch} /* ── editorial lists, instead of yet more cards ───────────── */ .qlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-p)} .qlist li{display:grid;grid-template-columns:clamp(54px,7vw,96px) minmax(0,1fr); gap:clamp(14px,2.4vw,34px);padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line-p)} .qn{font-size:clamp(28px,4vw,54px);font-weight:700;letter-spacing:-.05em;color:var(--line-p);line-height:.9} .ql{margin:0 0 10px;font-size:clamp(18px,2.1vw,26px);font-weight:700;letter-spacing:-.028em; line-height:1.2;max-width:34ch} .qlist p{font-size:15.5px;line-height:1.6;color:var(--mut-p);max-width:58ch} .jlist{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-p)} .jrow{padding:clamp(22px,2.8vw,32px) clamp(18px,2.4vw,34px) clamp(22px,2.8vw,32px) 0; border-bottom:1px solid var(--line-p)} .jrow:nth-child(odd){border-right:1px solid var(--line-p);padding-right:clamp(24px,3vw,44px)} .jrow:nth-child(even){padding-left:clamp(24px,3vw,44px);padding-right:0} .jk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--orange)} .jh{margin:11px 0 10px;font-size:clamp(17px,1.9vw,22px);font-weight:700;letter-spacing:-.025em} .jrow p{font-size:15px;line-height:1.6;color:var(--mut-p);max-width:44ch} @media (max-width:800px){ .jlist{grid-template-columns:1fr} .jrow,.jrow:nth-child(odd),.jrow:nth-child(even){border-right:0;padding-left:0;padding-right:0} .qlist li{grid-template-columns:44px minmax(0,1fr);gap:14px} } /* ── where we fit, and where we do not ────────────────────── */ .fitlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)} .fitlist li{border-bottom:1px solid var(--line-d)} .fit-row{width:100%;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit; display:grid;grid-template-columns:14px minmax(0,1fr) 22px;gap:clamp(14px,2vw,26px); align-items:start;padding:clamp(18px,2.4vw,26px) clamp(8px,1.2vw,16px); transition:background .25s var(--ease),padding-left .25s var(--ease)} .fit-row:hover{background:rgba(236,237,231,.04)} .fit-row[aria-pressed="true"]{background:rgba(236,237,231,.06)} .fit-dot{width:9px;height:9px;border-radius:50%;margin-top:9px;background:var(--line-dd); transition:transform .3s var(--ease)} .fit-fit .fit-dot{background:var(--lime)} .fit-no .fit-dot{background:rgba(236,237,231,.28)} .fit-row[aria-pressed="true"] .fit-dot{transform:scale(1.5)} .fit-tick{margin-top:6px;width:18px;height:18px;border-radius:5px;justify-self:end; border:1px solid var(--line-dd);position:relative;transition:border-color .25s var(--ease),background .25s var(--ease)} .fit-tick::after{content:"";position:absolute;left:4px;top:7px;width:8px;height:4px; border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink); transform:rotate(-45deg) scale(.4);opacity:0;transition:opacity .2s var(--ease),transform .25s var(--ease)} .fit-fit .fit-row[aria-pressed="true"] .fit-tick{background:var(--lime);border-color:var(--lime)} .fit-no .fit-row[aria-pressed="true"] .fit-tick{background:var(--orange);border-color:var(--orange)} .fit-row[aria-pressed="true"] .fit-tick::after{opacity:1;transform:rotate(-45deg) scale(1)} .fitlist b{font-weight:600;font-size:clamp(15.5px,1.6vw,19px);letter-spacing:-.02em; color:var(--fg-d);line-height:1.4;display:block;margin-bottom:6px} .fitlist span{font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:var(--mut-d)} .fit-no b{color:var(--mut-d)} .fit-row[aria-pressed="true"] b{color:var(--fg-d)} .fitlist div{max-width:78ch} .fit-verdict{display:flex;align-items:center;gap:12px;margin-top:clamp(20px,2.6vh,28px); font-size:clamp(15px,1.6vw,18px);line-height:1.5;color:var(--fg-d);max-width:64ch} .fit-verdict i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-dd); transition:background .3s var(--ease)} .fit-verdict[data-state="fit"] i{background:var(--lime)} .fit-verdict[data-state="mixed"] i{background:var(--orange)} .fit-verdict[data-state="no"] i{background:rgba(236,237,231,.5)} .fit-close{margin-top:clamp(14px,2vh,20px);font-size:15px;line-height:1.6;color:var(--dim-d);max-width:60ch} @media (max-width:700px){.fit-row{grid-template-columns:10px minmax(0,1fr) 20px;gap:12px;padding-inline:0}} /* ── engagement models ────────────────────────────────────── */ .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-p)} .mode{padding:clamp(22px,2.8vw,34px) clamp(18px,2.2vw,30px) clamp(24px,3vw,36px) 0; border-right:1px solid var(--line-p)} .mode:last-child{border-right:0;padding-right:0} .mode:not(:first-child){padding-left:clamp(18px,2.2vw,30px)} .mk{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--orange)} .mh{margin:12px 0 4px;font-size:clamp(19px,2.2vw,27px);font-weight:700;letter-spacing:-.03em} .ms{font-size:14px;color:var(--mut-p);font-weight:600;margin-bottom:12px} .md{font-size:14.5px;line-height:1.6;color:var(--mut-p)} .mode-note{margin-top:clamp(24px,3.4vh,38px);padding-top:20px;border-top:1px solid var(--line-p); font-size:14.5px;line-height:1.6;color:var(--mut-p);max-width:64ch} @media (max-width:860px){ .qual{grid-template-columns:1fr;gap:26px} .modes{grid-template-columns:1fr} .mode,.mode:not(:first-child){border-right:0;border-bottom:1px solid var(--line-p);padding-left:0;padding-right:0} .mode:last-child{border-bottom:0} } /* ── numbered sections (sustainability) ───────────────────── */ .numsec{list-style:none;margin:0;padding:0} .numsec li{display:grid;grid-template-columns:clamp(74px,9vw,124px) minmax(0,1fr); gap:clamp(18px,3vw,48px);padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--line-p)} .numsec li:first-child{border-top:0;padding-top:0} .ns-n{font-size:clamp(30px,4.2vw,58px);font-weight:700;letter-spacing:-.05em; color:var(--line-p);line-height:.86} .ns-body h2{margin:0 0 12px} .ns-body p{font-size:16px;line-height:1.62;color:var(--mut-p);max-width:62ch} .ns-body p + p{margin-top:14px} .ns-out{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:15px 17px; border-radius:8px;background:var(--ink-2);border:1px solid var(--line-p); border-left:3px solid rgba(94,155,31,.55)} .ns-out b{flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em; color:var(--lime);padding-top:3px} .ns-out span{font-size:14.5px;line-height:1.55;color:var(--fg-p)} @media (max-width:760px){ .numsec li{grid-template-columns:minmax(0,1fr);gap:10px} .ns-n{font-size:28px} } /* ── sectors rail: give it a place, an index and some depth ── */ .scard{will-change:transform,opacity} .sc-num{position:absolute;right:14px;pointer-events:none;top:-18px;z-index:1;pointer-events:none; font-size:96px;font-weight:700;letter-spacing:-.06em;line-height:1; color:rgba(236,237,231,.05);font-variant-numeric:tabular-nums} /* no separate layer for the plan: re-rasterising six large SVG layers under a 3D-rotated card every frame was the Sectors page stutter */ .scard .plan{transition:none;width:116%;left:-8%} .sc-hard{margin-top:14px;padding-top:13px;border-top:1px solid rgba(236,237,231,.18)} .sh-k{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--orange); margin-bottom:6px} .sh-t{font-size:13px;line-height:1.5;color:rgba(236,237,231,.72)} .sh-t b{color:var(--fg-d);font-weight:600} .rail-hud{position:absolute;left:var(--pad-i);right:var(--pad-i);bottom:clamp(18px,4vh,42px); display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);pointer-events:none} .rh-idx{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:11px; letter-spacing:.16em;color:var(--dim-d)} .rh-idx b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--orange); font-family:var(--sans);font-variant-numeric:tabular-nums} .rh-name{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--fg-d); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rh-dots{display:flex;gap:7px;margin-left:auto} .rh-dots i{width:22px;height:3px;border-radius:2px;background:rgba(236,237,231,.2); transition:background .3s var(--ease),width .3s var(--ease)} .rh-dots i.on{background:var(--orange);width:34px} @media (max-width:700px){.rh-name{display:none}.sc-num{font-size:72px}} /* ── the conveyor the gears drive ─────────────────────────── */ .conveyor{pointer-events:none} .gr-spin{transform-origin:0 0} .cv-drive{stroke:rgba(236,237,231,.30);stroke-width:1.6;fill:none} .cv-band{fill:rgba(236,237,231,.06);stroke:rgba(236,237,231,.34);stroke-width:1.6} .cv-tread{fill:none;stroke:rgba(236,237,231,.5);stroke-width:2.4; stroke-dasharray:5 13;stroke-linecap:round} .cv-pulley circle{fill:#767f78;stroke:rgba(8,16,12,.45);stroke-width:1.4} .cv-pulley .cv-spin path{stroke:rgba(8,16,12,.45);stroke-width:2;fill:none;stroke-linecap:round} .cv-bore{fill:var(--ink);stroke:none} .cv-item rect{fill:rgba(242,106,27,.22);stroke:var(--orange);stroke-width:1.2} .cv-item .cv-lid{stroke:rgba(255,190,140,.75);stroke-width:1.4;fill:none} .cv-item text{fill:var(--fg-d);font-family:var(--mono);font-size:7.5px;letter-spacing:.14em; text-anchor:middle} .cv-src{fill:var(--orange);font-family:var(--mono);font-size:6.5px;letter-spacing:.18em;text-anchor:middle} .cv-tray path{fill:none;stroke:rgba(236,237,231,.32);stroke-width:1.6} .cv-stack{fill:rgba(185,232,107,.34);stroke:rgba(185,232,107,.75);stroke-width:1} .cv-count{fill:var(--lime);font-family:var(--mono);font-size:11px;letter-spacing:.14em} .cv-out{fill:rgba(236,237,231,.42);font-family:var(--mono);font-size:8px;letter-spacing:.2em} @media (max-width:860px){.cv-out{display:none}} .rh-axis{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:8px; letter-spacing:.16em;color:var(--dim-d);margin-left:auto} .rh-axis em{display:block;width:clamp(40px,7vw,90px);height:1px;background:var(--line-dd); position:relative;font-style:normal} .rh-axis em::after{content:"";position:absolute;right:-1px;top:-2.5px; border-left:5px solid var(--line-dd);border-top:3px solid transparent;border-bottom:3px solid transparent} .rh-dots{margin-left:clamp(10px,2vw,24px)} /* moving right is not navigation: it is float running out */ .rh-float{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:8.5px; letter-spacing:.18em;color:var(--dim-d)} .rf-bar{display:block;width:clamp(54px,9vw,120px);height:3px;background:var(--line-dd);position:relative;overflow:hidden} .rf-bar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--lime); transition:width .45s var(--ease),background .45s var(--ease)} .rh-float.tight .rf-bar i{background:var(--orange)} .rh-float.none .rf-bar i{background:#d8452a} .rh-float b{font-weight:500;color:var(--fg-d);letter-spacing:.1em;min-width:6ch} @media (max-width:900px){.rh-axis{display:none}} @media (max-width:700px){.rh-float{display:none}} /* ── the rail runs left to right for a reason ─────────────── */ .rail-axis{position:absolute;left:var(--pad-i);right:var(--pad-i);max-width:calc(100% - var(--pad-i) * 2);box-sizing:border-box;top:clamp(14px,3vh,30px); display:flex;align-items:center;gap:14px;pointer-events:none;z-index:3; font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim-d)} .ra-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(236,237,231,.10),rgba(242,106,27,.55))} .ra-r{color:var(--orange)} @media (max-width:700px){.rail-axis{display:none}} /* ── reveal grammar for generic left/right reveals ─────────────────── */ [data-reveal="right"]{transform:translateX(26px)} [data-reveal="left"]{transform:translateX(-26px)} [data-reveal="right"].in,[data-reveal="left"].in{transform:none} /* stacked layouts have no left and right, so the grammar goes vertical */ @media (max-width:900px){ [data-reveal="right"],[data-reveal="left"]{transform:translateY(16px)} [data-reveal="right"].in,[data-reveal="left"].in{transform:none} } /* ── reveal ───────────────────────────────────────────────── */ [data-reveal]{opacity:0;transform:translateY(16px); transition:opacity .8s var(--ease),transform .8s var(--ease)} [data-reveal].in{opacity:1;transform:none} /* ── responsive ───────────────────────────────────────────── */ @media (max-width:1000px){ .hero-in,.story,.contact-grid{grid-template-columns:minmax(0,1fr)} .instr{max-width:620px} .stage3d{max-width:min(78vw,480px)} .figure{aspect-ratio:16/10} .build-grid{grid-template-columns:minmax(0,1fr);gap:12px} .build-legend{display:none} .build-stage svg{max-height:min(30vh,260px)} .build-head .lede{display:none} } @media (max-width:1280px){ .nav-links a{padding:13px 8px;font-size:11.5px;letter-spacing:.05em} .nav-links a::after{left:8px;right:8px} } @media (max-width:1040px){ .nav-links,.nav .nav-cta{display:none} .burger{display:flex} } @media (max-width:860px){ .build-status{text-align:left} .build-track{height:200vh} .rail-track{height:300vh} .foot-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } @media (max-width:520px){ .brand-txt span{display:none} .pdata{grid-template-columns:1fr 1fr} .foot-main{grid-template-columns:minmax(0,1fr)} .pstages li{grid-template-columns:minmax(0,1fr);gap:10px} .pdata div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line-d)} .scard{width:82vw;height:min(58vh,460px)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none} .draw{stroke-dashoffset:0} .fade-in{opacity:1} .build-track,.rail-track,.delay-track,.cycle-track,.gears-track,.tl-track{height:auto} .build-stick,.delay-stick{position:static;height:auto;min-height:0;padding-block:clamp(40px,7vh,80px)} .rail-stick{position:static;height:auto;overflow-x:auto;padding-block:clamp(40px,7vh,80px)} .rail{transform:none!important} .scard{transform:none!important} #main{transition:none} .scap{position:static;opacity:1;transform:none;margin-bottom:26px} #elev .gr{transform:none!important;opacity:1!important} #elev .fd,#elev .bl{opacity:1!important;stroke-dashoffset:0!important} } /* ── motion polish ──────────────────────────────────────────── One curve for everything that arrives: a long, decelerating settle instead of the old linear-feeling fade. Nothing bounces, nothing overshoots, and no element moves far enough to read as a slide. ─────────────────────────────────────────────────── */ :root{--ease-rev:cubic-bezier(.16,.9,.28,1)} [data-reveal]{opacity:0;transform:translate3d(0,22px,0); transition:opacity .55s var(--ease-rev),transform .8s var(--ease-rev)} [data-reveal].in{opacity:1;transform:none} [data-reveal="right"]{transform:translate3d(26px,4px,0)} [data-reveal="left"]{transform:translate3d(-26px,4px,0)} [data-reveal="right"].in,[data-reveal="left"].in{transform:none} /* panels have weight, so they settle from slightly further back */ .card[data-reveal],.pcard[data-reveal],.person[data-reveal], .art[data-reveal],.matrix[data-reveal],.mode[data-reveal], .promise[data-reveal],.jrow[data-reveal]{transform:translate3d(0,30px,0) scale(.99)} .card[data-reveal].in,.pcard[data-reveal].in,.person[data-reveal].in, .art[data-reveal].in,.matrix[data-reveal].in,.mode[data-reveal].in, .promise[data-reveal].in,.jrow[data-reveal].in{transform:none} /* type arrives on its own, without scale, so letterforms stay crisp */ h1[data-reveal],h2[data-reveal],h3[data-reveal], .stmt[data-reveal],.stmt-sub[data-reveal],.lede[data-reveal]{ transform:translate3d(0,18px,0)} /* ── phones: fewer moving parts, more reading ───────────────── Every scrubbed scene is shortened, the drafting-grid decoration comes off, micro labels get readable, and list steps stop sitting at a third opacity waiting for a scroll position that is hard to hit on a small screen. ─────────────────────────── */ @media (max-width:760px){ .delay-track{height:130vh} .build-track{height:140vh} .rail-track{height:240vh} .tl-track{height:125vh} .gears-track{height:140vh} .cycle-track{height:130vh} .paper{background-image:none} .hero-grid{opacity:.45;background-size:56px 56px} .ctrl-top,.ctrl-k,.ctrl-dots span,.build-status,.ra-k{ font-size:10px;letter-spacing:.07em} .tl-step,.pstages > li,.chain-row{opacity:1} /* shorter travel: on a small viewport a long slide reads as jank */ [data-reveal],[data-reveal="right"],[data-reveal="left"], .card[data-reveal],.pcard[data-reveal],.person[data-reveal], .art[data-reveal],.matrix[data-reveal],.mode[data-reveal], .promise[data-reveal],.jrow[data-reveal]{ transform:translate3d(0,14px,0); transition-duration:.45s,.6s} [data-reveal].in{transform:none} } /* collapsible explainer (carbon & cost) */ .nsd{margin-top:10px} .nsd>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px; font:600 12.5px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase; color:#d4592a;padding:8px 0} .nsd>summary::-webkit-details-marker{display:none} .nsd>summary::before{content:"";width:9px;height:9px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease} .nsd[open]>summary::before{transform:rotate(-135deg) translateY(-2px)} .nsd>summary:hover{opacity:.72} .nsd-body{animation:nsdIn .42s cubic-bezier(.16,.9,.28,1) both} .nsd-body>p:first-child{margin-top:2px} @keyframes nsdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.nsd-body{animation:none}} /* ── print ────────────────────────────────────────────────── */ @media print{ .nav,.drawer,.progress,.skip,.nextpage,.burger,.stage-wrap, .delay-track,.build-track,.cycle-track,.gears-track,.rail-track,.tl-track, .ticker,.filters{display:none!important} [data-page][hidden]{display:none!important} body{background:#fff;color:#000;font-size:11pt} .sec{padding-block:14pt} .ink-band{background:#fff!important;color:#000!important} .d1{font-size:26pt}.d2{font-size:19pt}.d3{font-size:13pt} a{color:#000;text-decoration:underline} a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt} .card,.pcard,.person,.matrix{break-inside:avoid;box-shadow:none} .art-body{grid-template-rows:1fr!important} } /* ══════════════════════════════════════════════════════════ SHEET MOTIF — the drafting language, applied site-wide ══════════════════════════════════════════════════════════ */ :root{--sheet-l:rgba(11,20,16,.055)} .ink-band,.green-band{--sheet-l:rgba(255,255,255,.06)} .sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--sheet-l) 1px,transparent 1px), linear-gradient(90deg,var(--sheet-l) 1px,transparent 1px); background-size:92px 92px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)} .sec::after{content:"";position:absolute;left:var(--pad-i);right:var(--pad-i); top:calc(var(--pad-b) / 2.7);height:7px;pointer-events:none;z-index:0;opacity:.8; border-left:1px solid var(--line-d);border-right:1px solid var(--line-d); background:linear-gradient(var(--line-d),var(--line-d)) left center/100% 1px no-repeat} .sec > .wrap{position:relative;z-index:1} /* redline mark-ups: hover a point, get the pencil note */ [data-note]{position:relative;cursor:help} [data-note]::before{content:"";position:absolute;inset:-6px -8px;border:1px solid transparent; border-radius:2px;transition:border-color .2s var(--ease);pointer-events:none} [data-note]::after{content:attr(data-note);position:absolute;left:-8px;top:calc(100% + 10px);z-index:9; font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5; color:#8F3705;background:#FFF6F0;border:1px solid rgba(191,74,8,.45); padding:6px 9px;width:max-content;max-width:30ch; opacity:0;transform:translateY(-5px);transition:opacity .2s var(--ease),transform .24s var(--ease); pointer-events:none} [data-note]:hover::before,[data-note]:focus-visible::before{border-color:rgba(191,74,8,.5)} [data-note]:hover::after,[data-note]:focus-visible::after{opacity:1;transform:none} @media (max-width:760px){[data-note]::after{display:none}[data-note]{cursor:auto}} /* measured-drawing reveal: the sheet unrolls */ [data-reveal="unfold"]{opacity:0;transform-origin:top center; transform:perspective(1000px) rotateX(-7deg) translate3d(0,10px,0); -webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0); transition:opacity .5s var(--ease),transform .85s var(--ease),clip-path .85s var(--ease)} [data-reveal="unfold"].in{opacity:1;transform:none; -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ [data-reveal="unfold"]{opacity:1;transform:none;-webkit-clip-path:none;clip-path:none} } /* ══ shared tool chrome ══════════════════════════════════ */ .tool{border:1px solid var(--line-dd);background:var(--paper-2);padding:clamp(20px,2.6vw,34px)} .ink-band .tool{background:rgba(236,237,231,.05);border-color:rgba(236,237,231,.2)} .tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr); gap:clamp(22px,3vw,44px);align-items:start} @media (max-width:900px){.tool-grid{grid-template-columns:1fr}} .fld{display:block;margin-bottom:18px} .fld > span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; color:var(--dim-d);margin-bottom:9px} .fld input[type=range]{width:100%;accent-color:var(--orange)} .fld select{width:100%;padding:11px 12px;border:1px solid var(--line-dd);background:transparent; color:inherit;font:inherit;font-size:15px} .fld b{font-family:var(--mono);font-size:15px;color:var(--fg-d)} .readout{border-top:1px solid var(--line-dd)} .readout .rrow{display:flex;justify-content:space-between;gap:14px;padding:11px 0; border-bottom:1px solid var(--line-d);font-size:14.5px;color:var(--mut-d)} .readout .rrow b{font-family:var(--mono);color:var(--fg-d);font-weight:500} .readout .rtot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px} .readout .rtot span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} .readout .rtot b{font-family:var(--mono);font-size:clamp(26px,3.6vw,42px);color:var(--orange); letter-spacing:-.02em} .tool-foot{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--dim-d);max-width:60ch} /* ══ two checks, side by side ════════════════════════════ */ .twotools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0; border-top:1px solid var(--line-d)} .tt-col{padding-top:clamp(20px,2.6vw,32px);min-width:0} .tt-col + .tt-col{border-left:1px solid var(--line-d);padding-left:clamp(24px,3vw,46px)} .tt-h{display:flex;align-items:baseline;gap:12px;margin:0 0 clamp(14px,2vh,20px); font-weight:600;font-size:clamp(15.5px,1.6vw,18px);letter-spacing:-.02em;color:var(--fg-d)} .tt-h span{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--orange)} .twotools .tool-grid{grid-template-columns:1fr;gap:clamp(18px,2.4vw,26px)} .twotools .fitlist span{font-size:14.5px;line-height:1.5} @media (max-width:980px){ .twotools{grid-template-columns:1fr} .tt-col + .tt-col{border-left:0;border-top:1px solid var(--line-d);padding-left:0} } /* ══ data centre cost / manhours breakdown chart ═════════ */ .dcb{margin-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line-dd);padding-top:14px; display:grid;gap:10px} .dcb-row{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(0,2fr) auto; align-items:center;gap:clamp(8px,1.4vw,16px)} .dcb-row.is-off{opacity:.28} .dcb-nm{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--dim-d)} .dcb-bar{position:relative;height:9px;background:var(--line-dd);overflow:hidden} .dcb-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange); transition:width .5s cubic-bezier(.16,.9,.28,1)} .dcb-row.is-off .dcb-bar i{background:var(--dim-d)} .dcb-val{font-family:var(--mono);font-size:12px;color:var(--fg-d);white-space:nowrap;text-align:right} .dcb-val em{font-style:normal;color:var(--dim-d)} .dcb-cap{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim-d)} @media (max-width:560px){ .dcb-row{grid-template-columns:1fr auto;grid-template-areas:"nm val" "bar bar";gap:6px 12px} .dcb-nm{grid-area:nm}.dcb-val{grid-area:val}.dcb-bar{grid-area:bar} } /* ══ manpower histogram + efficiency tracker ═════════════ */ .dch-wrap,.dce{margin-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-dd);padding-top:14px} .dch-head,.dce-head{display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;margin-bottom:14px} .dch-dur{display:flex;align-items:center;gap:10px} .dch-dur span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim-d)} .dch-dur input[type=range]{width:clamp(90px,14vw,150px);accent-color:var(--orange)} .dch-dur b{font-family:var(--mono);font-size:12px;color:var(--orange);min-width:52px;text-align:right} .dch{display:flex;align-items:flex-end;gap:2px;height:clamp(96px,11vw,132px); border-bottom:1px solid var(--line-dd)} .dch-col{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end} .dch-col i{display:block;width:100%;height:0;background:var(--orange);opacity:.5; transition:height .5s cubic-bezier(.16,.9,.28,1),opacity .3s} .dch-col.is-peak i{opacity:1} .dch-col:hover i{opacity:.85} .dce-bars{display:grid;gap:10px} .dce-row{display:grid;grid-template-columns:minmax(96px,1fr) minmax(0,2.4fr) auto; align-items:center;gap:clamp(8px,1.4vw,16px)} .dce-bar{position:relative;height:11px;background:var(--line-dd);overflow:hidden} .dce-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--dim-d); transition:width .5s cubic-bezier(.16,.9,.28,1),background .3s} .dce-verdict{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .dce-verdict b{font-size:13px} .dce-verdict.is-good b{color:#5fbf7d} .dce-verdict.is-watch b{color:var(--orange)} .dce-verdict.is-bad b{color:#e0563f} @media (max-width:560px){ .dce-row{grid-template-columns:1fr auto;grid-template-areas:"nm val" "bar bar";gap:6px 12px} .dce-row .dcb-nm{grid-area:nm}.dce-row .dcb-val{grid-area:val}.dce-bar{grid-area:bar} .dch{height:88px} } /* ══ data centre tool — dial, ribbon, manpower curve ═════ */ .dct-stage{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,1.1fr); gap:clamp(18px,2.6vw,34px);align-items:center} @media (max-width:640px){.dct-stage{grid-template-columns:1fr}} .dct-dialwrap{position:relative;touch-action:none;cursor:ew-resize;user-select:none} .dct-dialwrap svg{display:block;width:100%;height:auto;overflow:visible} .dct-track{fill:none;stroke:var(--line-dd);stroke-width:10;stroke-linecap:round} .dct-fill{fill:none;stroke:var(--orange);stroke-width:10;stroke-linecap:round; transition:stroke-dashoffset .18s linear} .dct-knob{fill:#fff;stroke:var(--orange);stroke-width:3} .dct-mid{position:absolute;left:0;right:0;bottom:2px;text-align:center;pointer-events:none} .dct-mid b{display:block;font-family:var(--mono);font-size:clamp(34px,5.4vw,54px); line-height:1;letter-spacing:-.04em;color:var(--fg-d)} .dct-mid span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim-d)} .dct-range{position:absolute;inset:auto 0 -6px 0;width:100%;accent-color:var(--orange);opacity:.001;height:26px} .dct-dialwrap:focus-within .dct-range{opacity:1} .dct-nums{display:grid;gap:0;border-top:1px solid var(--line-dd)} .dct-nums > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:11px 0;border-bottom:1px solid var(--line-d);position:relative} .dct-nums span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim-d)} .dct-nums b{font-family:var(--mono);font-size:clamp(15px,1.8vw,20px);letter-spacing:-.02em;color:var(--fg-d)} .dct-nums > div:last-child b{color:var(--orange)} .dct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2vw,22px)} .dct-chips button{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:8px 12px;border:1px solid var(--line-d);background:none;color:var(--dim-d);cursor:pointer; transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)} .dct-chips button:hover{color:var(--fg-d);border-color:var(--orange)} .dct-chips button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#fff} /* friendlier building-type selector */ .dct-steps{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:clamp(16px,2vw,22px); font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-d)} .dct-steps span{opacity:.55} .dct-steps span.is-on{opacity:1;color:var(--orange);border-bottom:1px solid var(--orange)} .dct-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px; margin-top:clamp(10px,1.4vw,16px)} .dct-types button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left; font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none; padding:12px 13px;border:1px solid var(--line-d);background:var(--paper);color:var(--true-ink);cursor:pointer; transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .dct-types button:hover{border-color:var(--orange);background:var(--paper-2)} .dct-types button[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:#fff; box-shadow:0 8px 22px -8px rgba(191,74,8,.35)} .dct-types button[aria-pressed=true] .dt-hint{color:rgba(255,255,255,.75)} .dct-types button[aria-pressed=true] .dt-ico{color:#fff} .dt-ico{font-size:20px;line-height:1;color:var(--orange);margin-bottom:2px} .dt-name{font-weight:600;line-height:1.25;color:var(--true-ink)} .dt-hint{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--mut-p);margin-top:auto} @media (max-width:560px){ .dct-types{grid-template-columns:repeat(2,1fr)} .dt-ico{font-size:18px} } .dct-ribbon{display:flex;height:clamp(30px,4vw,42px);margin-top:clamp(18px,2.2vw,26px); border:1px solid var(--line-dd);overflow:hidden} .dct-ribbon i{display:block;height:100%;flex:0 0 auto;width:0;position:relative;cursor:default; transition:width .45s cubic-bezier(.16,.9,.28,1),filter .2s} .dct-ribbon i::after{content:attr(data-lab);position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#fff; opacity:0;transition:opacity .2s} .dct-ribbon i:hover{filter:brightness(1.12)} .dct-ribbon i.is-wide::after{opacity:.9} .dct-curvewrap{margin-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-dd);padding-top:14px} .dct-curve{position:relative;height:clamp(110px,13vw,150px);border-bottom:1px solid var(--line-dd); cursor:crosshair} .dct-curve svg{display:block;width:100%;height:100%} .dct-area{fill:var(--orange);opacity:.16;transition:d .4s} .dct-line{fill:none;stroke:var(--orange);stroke-width:2;vector-effect:non-scaling-stroke} .dct-cross{stroke:var(--fg-d);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0} .dct-cdot{fill:var(--orange);opacity:0} .dct-curve.is-live .dct-cross,.dct-curve.is-live .dct-cdot{opacity:.75} .dct-tip{position:absolute;top:6px;left:0;transform:translateX(-50%);pointer-events:none;opacity:0; background:var(--orange);color:#fff;padding:6px 9px;font-family:var(--mono);font-size:10px; letter-spacing:.08em;white-space:nowrap;transition:opacity .18s} .dct-curve.is-live .dct-tip{opacity:1} .dct-more{margin-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line-dd);padding-top:12px} .dct-more summary{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--orange);cursor:pointer;padding:6px 0} .dct-more[open] summary{margin-bottom:12px} .twotools.onetool{grid-template-columns:minmax(0,1fr)} .twotools.onetool .tt-col{padding-top:0} .dct-presets{margin:0 0 clamp(16px,2vw,22px);align-items:center} .dct-plab{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim-d);margin-right:2px} .dct-pin{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px} .dct-pin button{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:7px 11px;border:1px solid var(--line-d);background:none;color:var(--dim-d);cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease)} .dct-pin button:hover{color:var(--fg-d);border-color:var(--orange)} .dct-cmp{flex:1 1 260px;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; color:var(--dim-d);border-left:2px solid var(--orange);padding:6px 0 6px 10px;line-height:1.6} .dct-cmp b{color:var(--fg-d)} .dct-cmp .up{color:#e0563f}.dct-cmp .dn{color:#5fbf7d} .dct-email{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:clamp(16px,2vw,22px); border-top:1px solid var(--line-dd);padding-top:14px} .dct-email .fld{flex:1 1 220px;min-width:0} .dct-email .tool-foot{flex:1 1 100%;margin:0} /* ══ questions we ask on the first call ══════════════════ */ .qa{border-top:1px solid var(--line-dd)} .qa-i{border-bottom:1px solid var(--line-d)} .qa-h{width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:none;border:0; color:inherit;font:inherit;cursor:pointer;padding:18px 0} .qa-h .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--orange);flex:none} .qa-h b{font-weight:600;font-size:clamp(15.5px,1.7vw,19px);letter-spacing:-.02em;flex:1} .qa-h i{flex:none;width:12px;height:12px;position:relative} .qa-h i::before,.qa-h i::after{content:"";position:absolute;background:currentColor;opacity:.6} .qa-h i::before{left:0;right:0;top:5.5px;height:1px} .qa-h i::after{top:0;bottom:0;left:5.5px;width:1px;transition:transform .3s var(--ease)} .qa-i.open .qa-h i::after{transform:scaleY(0)} .qa-b{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)} .qa-b p{padding:0 0 20px 0;font-size:15.5px;line-height:1.65;color:var(--mut-d);max-width:70ch} .qa-i.open .qa-b{max-height:340px} /* ══ push-back list ══════════════════════════════════════ */ .push{display:grid;gap:0;border-top:1px solid var(--line-dd)} .push li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(14px,2vw,28px); padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line-d)} .push .pk{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--orange)} .push b{display:block;font-weight:600;font-size:clamp(16px,1.8vw,20px);letter-spacing:-.02em; margin-bottom:7px} .push p{font-size:15.5px;line-height:1.6;color:var(--mut-d);max-width:70ch} /* ══ before / after reporting table ══════════════════════ */ .ba{border-top:1px solid var(--line-dd);font-size:15px} .ba-r{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(12px,2vw,26px); padding:15px 0;border-bottom:1px solid var(--line-d);align-items:start} .ba-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim-d)} .ba-r .q{font-weight:600} .ba-r .b4{color:var(--dim-d)} .ba-r .af{color:var(--fg-d)} .ba-r .af::before{content:"→ ";color:var(--orange)} @media (max-width:760px){ .ba-r{grid-template-columns:1fr;gap:6px;padding:16px 0} .ba-r.ba-head{display:none} } /* ══ anonymous case study ════════════════════════════════ */ .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.7fr); gap:clamp(24px,3.4vw,56px);align-items:start} @media (max-width:900px){.case{grid-template-columns:1fr}} .case h3{font-size:clamp(22px,2.8vw,34px);letter-spacing:-.03em;margin:0 0 14px;font-weight:700} .case p{font-size:16px;line-height:1.66;color:var(--mut-d);margin-bottom:14px;max-width:66ch} .case-figs{display:grid;gap:0;border-top:1px solid var(--line-dd)} .case-figs div{padding:14px 0;border-bottom:1px solid var(--line-d)} .case-figs b{display:block;font-family:var(--mono);font-size:clamp(22px,2.6vw,30px); color:var(--lime);letter-spacing:-.02em} .case-figs span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim-d)} /* ══ recent insights feed ════════════════════════════════ */ .feed{display:grid;gap:0;border-top:1px solid var(--line-dd)} .feed a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2.2vw,30px); align-items:center;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line-d); text-decoration:none;color:inherit;transition:padding-left .25s var(--ease)} .feed a:hover{padding-left:10px} .feed .fk{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--orange)} .feed .ft{font-weight:600;font-size:clamp(16px,1.8vw,21px);letter-spacing:-.02em} .feed svg{opacity:.5;transition:transform .25s var(--ease)} .feed a:hover svg{transform:translateX(5px);opacity:1} @media (max-width:640px){.feed a{grid-template-columns:1fr;gap:8px}.feed svg{display:none}} /* ══ sector card instrumentation ═════════════════════════ */ .sc-meta{display:flex;align-items:center;gap:14px;margin-top:14px; border-top:1px solid rgba(236,237,231,.18);padding-top:14px} .sc-dial{flex:none;width:52px;height:52px;position:relative} .sc-dial svg{width:100%;height:100%;transform:rotate(-90deg)} .sc-dial .dt{fill:none;stroke:rgba(236,237,231,.2);stroke-width:3} .sc-dial .df{fill:none;stroke:#F26A1B;stroke-width:3;stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease)} .sc-dial em{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono); font-size:11px;font-style:normal;color:#ECEDE7} .sc-bars{flex:1;display:grid;gap:6px;min-width:0} .sc-bars div{display:grid;grid-template-columns:1fr 46px;gap:8px;align-items:center} .sc-bars span{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em; color:rgba(236,237,231,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc-bars i{height:3px;background:rgba(236,237,231,.16);position:relative;display:block} .sc-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%); background:#B9E86B;transition:width .9s var(--ease)} .sc-open{margin-top:12px;background:none;border:1px solid rgba(236,237,231,.3);color:#ECEDE7; font-family:var(--mono);font-size:9px;letter-spacing:.18em;padding:7px 11px;cursor:pointer; transition:background .2s var(--ease)} .sc-open:hover{background:rgba(236,237,231,.12)} .sc-case{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)} .scard.open .sc-case{max-height:170px} .scard.open .sc-hard{display:none} .scard .body{transition:transform .35s var(--ease)} .sc-case p{font-size:13.5px;line-height:1.55;margin:12px 0 0;color:rgba(236,237,231,.82)} .sc-case p b{color:#B9E86B;font-weight:600} .sc-riskk{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em; color:rgba(236,237,231,.6);display:block;margin-bottom:2px} /* ══ phasing risk checker ════════════════════════════════ */ .rk-cons{display:grid;gap:10px;margin-bottom:6px} .rk-cons label{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5; color:var(--mut-d);cursor:pointer} .rk-cons input{margin-top:3px;accent-color:var(--orange);flex:none} .rk-out{border:1px solid var(--line-dd);padding:clamp(18px,2.4vw,28px)} .rk-lvl{font-family:var(--mono);font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em; display:block;margin-bottom:6px} .rk-out[data-lvl="low"] .rk-lvl{color:var(--lime)} .rk-out[data-lvl="med"] .rk-lvl{color:var(--orange)} .rk-out[data-lvl="high"] .rk-lvl{color:#B3300A} .rk-meter{height:6px;background:var(--line-d);position:relative;margin:14px 0 16px} .rk-meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--orange); transition:width .6s var(--ease)} .rk-why{font-size:15px;line-height:1.6;color:var(--mut-d)} .rk-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em; padding:5px 10px;border:1px solid currentColor;margin:10px 0 12px} .rk-out[data-lvl="low"] .rk-badge{color:var(--lime)} .rk-out[data-lvl="med"] .rk-badge{color:var(--orange)} .rk-out[data-lvl="high"] .rk-badge{color:#B3300A} .rk-lvl{font-size:clamp(20px,2.4vw,30px)} .rk-drivers{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-d); display:grid;gap:8px} .rk-drivers li{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mut-d); display:flex;gap:9px;align-items:flex-start} .rk-drivers li::before{content:"—";color:var(--orange);flex:none} /* ══ proof at scale ══════════════════════════════════════ */ .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2.2vw,30px)} .proof article{border-top:2px solid var(--orange);padding-top:15px} .proof b{display:block;font-family:var(--mono);font-size:clamp(21px,2.8vw,32px);letter-spacing:-.02em} .proof span{display:block;margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--mut-d)} .proof em{display:block;margin-top:10px;font-family:var(--mono);font-size:8.5px; letter-spacing:.16em;color:var(--dim-d);font-style:normal} /* ══ sector families ═════════════════════════════════════ */ .fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2vw,26px)} .fam article{border:1px solid var(--line-d);padding:clamp(17px,2vw,24px)} .fam .fk{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--orange)} .fam h3{font-size:18px;letter-spacing:-.01em;margin:8px 0 0} .fam ul{list-style:none;margin:15px 0 0;padding:15px 0 0;border-top:1px solid var(--line-d); display:grid;gap:7px} .fam li{font-size:13.5px;line-height:1.45;color:var(--mut-d);display:flex;gap:8px} .fam li::before{content:"—";color:var(--orange);flex:none} /* ══ fees & engagement ═══════════════════════════════════ */ .fee-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .fee-pick button{font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:10px 14px; border:1px solid var(--line-dd);background:none;color:inherit;cursor:pointer; transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)} .fee-pick button:hover{border-color:var(--orange)} .fee-pick button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#0B0F0D} .fee-out{border:1px solid var(--line-dd);padding:clamp(20px,2.6vw,32px)} .fee-out b{display:block;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em} .fee-out p{font-size:15px;line-height:1.65;color:var(--mut-d);margin:12px 0 0} .fee-out ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-d); display:grid;gap:9px} .fee-out li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mut-d); display:flex;gap:9px} .fee-out li::before{content:"—";color:var(--orange);flex:none} .terms{border-top:1px solid var(--line-d)} .terms div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:clamp(12px,2vw,28px);padding:16px 0;border-bottom:1px solid var(--line-d)} .terms span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--orange)} .terms p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut-d)} @media (max-width:640px){.terms div{grid-template-columns:1fr;gap:6px}} /* ══ reach + tool stack ══════════════════════════════════ */ .reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,24px)} .reach article{border-top:1px solid var(--line-d);padding-top:12px} .reach b{display:block;font-size:16px} .reach span{display:block;margin-top:6px;font-family:var(--mono);font-size:8.5px; letter-spacing:.16em;color:var(--dim-d)} .reach em{display:block;margin-top:9px;font-style:normal;font-size:13px;line-height:1.5;color:var(--mut-d,#B9C0BA)} .bench{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--line-d);padding-top:16px} .bench .bench-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;color:var(--dim-d);margin:0 0 14px} .bench-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(12px,1.6vw,20px)} .bench-row>div{border-left:1px solid var(--line-d);padding-left:12px} .bench-row .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--orange)} .bench-row .l{margin-top:6px;font-size:13px;line-height:1.45;color:var(--mut-d,#B9C0BA)} .tools{display:grid;gap:18px} .tools div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;align-items:baseline} .tools h4{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--orange)} .tools p{margin:0;font-size:14.5px;line-height:1.7;color:var(--mut-d)} @media (max-width:640px){.tools div{grid-template-columns:1fr;gap:6px}} /* Accessibility: reduced-motion toggle (simplifies scroll reveal) */ .motion-toggle{ background:transparent;border:1px solid var(--line-d);color:var(--mut-d); font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:8px 12px;border-radius:20px;cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .motion-toggle:hover,.motion-toggle[aria-pressed="true"]{ border-color:var(--orange);color:var(--orange); background:color-mix(in srgb,var(--orange) 10%,transparent)} .motion-toggle[aria-pressed="true"]::before{content:"✓ ";font-weight:700} /* Compass tuning: small footer setting for drift speed and hover radius */ .cmp-set{position:relative;font-family:var(--mono);font-size:10px} .cmp-set>summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:20px; border:1px solid var(--line-d);color:var(--mut-d);letter-spacing:.08em;text-transform:uppercase; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .cmp-set>summary::-webkit-details-marker{display:none} .cmp-set>summary:hover,.cmp-set[open]>summary{border-color:var(--orange);color:var(--orange); background:color-mix(in srgb,var(--orange) 10%,transparent)} .cmp-set-panel{position:absolute;bottom:calc(100% + 8px);left:0;z-index:60;width:222px; padding:12px;border-radius:10px;border:1px solid var(--line-d);background:var(--bg-d,#fff); box-shadow:0 14px 34px rgba(11,20,16,.16);display:grid;gap:10px} .cmp-set-panel label{display:grid;gap:5px;color:var(--mut-d);letter-spacing:.07em;text-transform:uppercase} .cmp-set-panel label b{color:var(--fg-d);font-weight:700} .cmp-set-panel input[type=range]{width:100%;accent-color:var(--orange)} .cmp-set-note{color:var(--dim-d);letter-spacing:.05em;text-transform:none;line-height:1.4} .cmp-set-check{display:flex!important;align-items:center;gap:8px;cursor:pointer} .cmp-set-check input{accent-color:var(--orange);width:14px;height:14px;margin:0;flex:none} .cmp-set-reset{justify-self:start;background:transparent;border:1px solid var(--line-d); color:var(--mut-d);font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase; padding:6px 10px;border-radius:14px;cursor:pointer} .cmp-set-reset:hover{border-color:var(--orange);color:var(--orange)} @media (max-width:640px){.cmp-set>summary{font-size:9px;padding:7px 10px} .cmp-set-panel{left:auto;right:0}} .reduce-motion [data-reveal], .reduce-motion [data-reveal="right"],.reduce-motion [data-reveal="left"], .reduce-motion .card[data-reveal],.reduce-motion .pcard[data-reveal], .reduce-motion .person[data-reveal],.reduce-motion .art[data-reveal], .reduce-motion .matrix[data-reveal],.reduce-motion .mode[data-reveal], .reduce-motion .promise[data-reveal],.reduce-motion .jrow[data-reveal]{ transform:translate3d(0,8px,0) !important; transition:opacity .3s ease,transform .3s ease !important} .reduce-motion [data-reveal].in, .reduce-motion [data-reveal="right"].in,.reduce-motion [data-reveal="left"].in, .reduce-motion .card[data-reveal].in,.reduce-motion .pcard[data-reveal].in, .reduce-motion .person[data-reveal].in,.reduce-motion .art[data-reveal].in, .reduce-motion .matrix[data-reveal].in,.reduce-motion .mode[data-reveal].in, .reduce-motion .promise[data-reveal].in,.reduce-motion .jrow[data-reveal].in{ transform:none !important} .reduce-motion [data-reveal],.reduce-motion [data-reveal].in{ transition-delay:0s !important;animation-delay:0s !important} @media (max-width:640px){.motion-toggle{font-size:9px;padding:7px 10px}} /* ══════════════════════════════════════════════════════════ Lightening pass: light bands with green accents, a readable timeline, service cards that open up, a friendlier readiness check, tighter short sections, a How-we-work strip, and a calmer mobile layout. ══════════════════════════════════════════════════════════ */ /* (1) light bands: the fit list and tool chrome were written for the dark band, so give them light equivalents with green as the mid-tone */ .paper .fit-row:hover{background:rgba(20,113,60,.05)} .paper .fit-row[aria-pressed="true"]{background:rgba(20,113,60,.08)} .paper .fitlist{border-top-color:var(--line-p)} .paper .fitlist li{border-bottom-color:var(--line-p)} .paper .fit-fit .fit-dot{background:var(--green)} .paper .fit-no .fit-dot{background:rgba(11,20,16,.22)} .paper .fit-fit .fit-row[aria-pressed="true"] .fit-tick{background:var(--green);border-color:var(--green)} .paper .fit-tick::after{border-left-color:#fff;border-bottom-color:#fff} .paper .fit-verdict{color:var(--fg-p)} .paper .fit-verdict[data-state="fit"] i{background:var(--green)} .paper .fit-verdict[data-state="no"] i{background:rgba(11,20,16,.3)} .paper .tt-col + .tt-col{border-left-color:var(--line-p)} .paper .twotools{border-top-color:var(--line-p)} .paper .tool{background:var(--white);border-color:var(--line-p)} .paper .tt-h span{color:var(--green)} /* (2) readable delay timeline: taller lanes, bigger labels, a week caption on every bar and one clear "scroll" prompt */ .dl-bars{height:clamp(58px,8vh,74px)} .dl-b{padding:0 14px;border-radius:6px;flex-direction:column;align-items:flex-start; justify-content:center;gap:2px} .dl-b span{font-size:clamp(13px,1.15vw,15.5px)} .dl-b em{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.12em; color:var(--dim-d);white-space:nowrap} .dl-b.late em{color:var(--orange)} .dl-lane-k{font-size:10px;letter-spacing:.16em;color:var(--mut-d)} .dl-scale span{font-size:10px} .dl-hint{display:inline-flex;align-items:center;gap:9px;margin:0 0 4px; font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--lime)} .dl-hint::before{content:"";width:16px;height:1px;background:currentColor} .dl-hint b{font-weight:500} /* (3) service cards that open up: deliverables slide out on hover or focus */ .grid-2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} @media (max-width:760px){.grid-2x2{grid-template-columns:1fr}} .card-more{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease)} .card-more > div{overflow:hidden} .card:hover .card-more,.card:focus-within .card-more,.card.is-open .card-more{ grid-template-rows:1fr;opacity:1} .card-more ul{margin:16px 0 0;padding:14px 0 0} .card-cue{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--green);opacity:.85; transition:opacity .3s var(--ease)} .card:hover .card-cue,.card:focus-within .card-cue,.card.is-open .card-cue{opacity:0} @media (hover:none){ .card-more{grid-template-rows:1fr;opacity:1} .card-cue{display:none} } /* (5) readiness check reads as a conversation, not a gate */ .ready-note{margin-top:clamp(12px,1.8vh,18px);font-size:14.5px;line-height:1.6; color:var(--mut-p);max-width:56ch} /* (6) short sections do not need a full band of air */ .sec.tight{padding-block:clamp(44px,6vh,84px)} .tt-col .tool{display:flex;flex-direction:column;justify-content:center;height:100%} /* (7) plan → control → handover strip */ .howstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;border-top:1px solid var(--line-p)} .howstep{padding:clamp(22px,2.6vw,32px) clamp(18px,2.2vw,30px) clamp(24px,2.8vw,34px) 0; border-right:1px solid var(--line-p);position:relative} .howstep:last-child{border-right:0;padding-right:0} .howstep:not(:first-child){padding-left:clamp(18px,2.2vw,30px)} .howstep .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--green)} .howstep h3{margin:12px 0 10px;font-size:clamp(19px,2vw,25px);font-weight:700; letter-spacing:-.03em;line-height:1.1} .howstep p{font-size:14.5px;line-height:1.6;color:var(--mut-p);max-width:38ch} .howstep i{position:absolute;top:calc(50% - 6px);right:-6px;width:12px;height:12px; border-top:1px solid var(--line-p);border-right:1px solid var(--line-p); transform:rotate(45deg);background:transparent} .howstep:last-child i{display:none} @media (max-width:820px){ .howstrip{grid-template-columns:1fr} .howstep,.howstep:not(:first-child){border-right:0;border-bottom:1px solid var(--line-p); padding-left:0;padding-right:0} .howstep:last-child{border-bottom:0} .howstep i{display:none} } /* (8) mobile: stack everything, calm the grid backgrounds, single-column tools */ @media (max-width:760px){ .paper{background-size:34px 34px; background-image:linear-gradient(rgba(11,20,16,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(11,20,16,.02) 1px,transparent 1px)} .hero-grid{opacity:.35} .sec{padding-block:clamp(46px,7vh,84px)} .twotools,.tool-grid,.grid-3,.grid-2,.dl-grid{grid-template-columns:1fr} .tt-col{padding-top:clamp(18px,3vh,26px)} .tt-col .tool{height:auto} .dl-stage{padding-top:14px} .dl-bars{height:clamp(52px,9vh,62px)} .dl-b{padding:0 10px} .dl-b em{display:none} .sec-head{gap:16px} .sec-head .lede{max-width:none!important} .fit-close,.ready-note{max-width:none} } /* ══ YOUR JOB, ON OUR BOARD ═══════════════════════════════════ One live drawing sheet. Three inputs from the visitor, and the sheet plots itself: footprint, programme bar, float tail, and a title block that fills in the way a real one does. Nothing here is decoration — every line on the sheet is one of their numbers. */ .board{background:var(--true-ink);color:#fff;overflow:hidden} .board .eyebrow{color:var(--orange-b)} .board .lede{color:rgba(255,255,255,.74)} .board-grid{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:clamp(22px,3vw,46px);align-items:start;margin-top:clamp(26px,3.4vw,44px)} /* ── the controls: a drawing-office input panel, not a form ── */ .bd-ctl{display:grid;gap:clamp(18px,2.2vw,26px)} .bd-f>span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:11px} .bd-chips{display:flex;flex-wrap:wrap;gap:7px} .bd-chip{font:500 12px/1 var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.7); background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:2px; padding:8px 11px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .bd-chip:hover{color:#fff;border-color:rgba(255,255,255,.42)} .bd-chip[aria-pressed="true"]{color:var(--true-ink);background:var(--orange-b);border-color:var(--orange-b)} .bd-chip:focus-visible{outline:2px solid var(--orange-b);outline-offset:2px} .bd-read{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px} .bd-read b{font:600 clamp(20px,2.2vw,26px)/1 var(--sans);letter-spacing:-.02em} .bd-read i{font-family:var(--mono);font-size:9px;letter-spacing:.16em;font-style:normal; color:rgba(255,255,255,.42)} .bd-f input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px; background:transparent;cursor:ew-resize;display:block} .bd-f input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.2)} .bd-f input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.2)} .bd-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px; margin-top:-6px;border-radius:50%;background:var(--orange-b);border:0; box-shadow:0 0 0 0 rgba(239,117,54,.34);transition:box-shadow .2s var(--ease)} .bd-f input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%; background:var(--orange-b);border:0} .bd-f input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(239,117,54,.18)} .bd-f input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(239,117,54,.34)} .bd-hint{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.36); margin-top:7px} .bd-verdict{border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(14px,1.8vw,20px)} .bd-verdict .bd-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;border-radius:2px; background:rgba(255,255,255,.08);color:#fff;transition:background .35s var(--ease),color .35s var(--ease)} .bd-verdict .bd-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} .bd-verdict[data-band="low"] .bd-badge{background:rgba(94,155,31,.2);color:#a6d86a} .bd-verdict[data-band="med"] .bd-badge{background:rgba(239,117,54,.18);color:#f7a877} .bd-verdict[data-band="high"] .bd-badge{background:rgba(214,64,44,.2);color:#f0917f} .bd-verdict p{margin-top:11px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.76)} .bd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,1.8vw,20px)} /* ── the sheet itself ── */ .bd-sheet{position:relative;background:var(--true-paper);border-radius:2px; box-shadow:0 30px 70px -30px rgba(0,0,0,.75);perspective:1400px} .bd-sheet svg{display:block;width:100%;height:auto; transform:rotateX(var(--bd-rx,0deg)) rotateY(var(--bd-ry,0deg)); transition:transform .5s var(--ease)} .bd-ln{fill:none;stroke:rgba(11,20,16,.5);stroke-width:.9} .bd-thin{fill:none;stroke:rgba(11,20,16,.2);stroke-width:.6} .bd-hair{fill:none;stroke:rgba(11,20,16,.12);stroke-width:.5} .bd-fill{fill:rgba(11,20,16,.045)} .bd-t{font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;fill:rgba(11,20,16,.44); text-transform:uppercase} .bd-tv{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;fill:var(--true-ink)} .bd-tb{font-family:var(--mono);font-size:12px;letter-spacing:.02em;fill:var(--true-ink)} .bd-orange{stroke:var(--orange-b)} .bd-lime{stroke:var(--lime-g)} .bd-bar{fill:rgba(11,20,16,.82)} .bd-float{fill:rgba(94,155,31,.34);stroke:var(--lime-g);stroke-width:.7;stroke-dasharray:3 2.4} .bd-slip{fill:rgba(239,117,54,.2);stroke:var(--orange-b);stroke-width:.7} /* the plotted geometry draws itself in on every change */ .bd-plot{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600); animation:bdDraw .72s var(--ease) forwards} .bd-plot.d2{animation-delay:.1s} .bd-plot.d3{animation-delay:.2s} @keyframes bdDraw{to{stroke-dashoffset:0}} .bd-pop{opacity:0;animation:bdPop .5s var(--ease) .26s forwards} @keyframes bdPop{from{opacity:0}to{opacity:1}} /* the plotter head: one pass across the sheet each time it redraws */ .bd-head{position:absolute;top:0;bottom:0;width:1px;background:rgba(239,117,54,.55); opacity:0;pointer-events:none} .bd-head::after{content:'';position:absolute;top:50%;left:-4px;width:9px;height:9px;border-radius:50%; background:var(--orange-b);box-shadow:0 0 12px rgba(239,117,54,.8)} .bd-sheet.is-plotting .bd-head{animation:bdSweep .8s var(--ease)} @keyframes bdSweep{0%{opacity:1;transform:translateX(0)} 99%{opacity:1;transform:translateX(calc(var(--bd-w,700px) - 1px))} 100%{opacity:0;transform:translateX(calc(var(--bd-w,700px) - 1px))}} .reduce-motion .bd-plot{animation:none;stroke-dashoffset:0} .reduce-motion .bd-pop{animation:none;opacity:1} .reduce-motion .bd-sheet.is-plotting .bd-head{animation:none} .reduce-motion .bd-sheet svg{transform:none} @media (prefers-reduced-motion:reduce){ .bd-plot{animation:none;stroke-dashoffset:0} .bd-pop{animation:none;opacity:1} .bd-sheet.is-plotting .bd-head{animation:none} } @media (max-width:900px){ .board-grid{grid-template-columns:1fr} .bd-sheet{order:-1} } /* ══ READABILITY LAYER ═══════════════════════════════════════ Three pieces, all opt-out friendly: 1. "The short version" panel at the top of every page 2. tap-to-define jargon terms 3. a sticky Get-a-quote bar on phones ═════════════════════════════════════════════════════════════ */ /* ── the short version ─────────────────────────────────────── */ .tldr{ margin:0 auto;max-width:min(1320px,100%); padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,26px); border:1px solid var(--line-d);border-left:3px solid var(--orange); border-radius:4px;background:var(--paper-2); } .sec.paper .tldr,.paper .tldr{background:var(--white)} .tldr-wrap{padding:clamp(18px,3vh,30px) var(--pad-i) 0} .tldr-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 18px} .tldr-k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--orange)} .tldr-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--dim-d)} .tldr ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .tldr li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--fg-d)} .tldr li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:1.5px;background:var(--orange)} .tldr li b{font-weight:600} .tldr-map{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:14px; padding-top:12px;border-top:1px solid var(--line-d)} .tldr-map a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; padding:6px 10px;border:1px solid var(--line-d);border-radius:999px;color:var(--mut-d); transition:border-color .2s var(--ease),color .2s var(--ease)} .tldr-map a:hover,.tldr-map a:focus-visible{color:var(--orange);border-color:var(--orange)} @media (max-width:640px){ .tldr li{font-size:14.5px} .tldr-map{gap:6px} } /* ── jargon terms ──────────────────────────────────────────── */ button.term{ display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit; text-align:left;cursor:help; border-bottom:1px dotted var(--orange); text-decoration:none; } button.term:hover,button.term[aria-expanded="true"]{border-bottom-style:solid;color:var(--orange)} .ink-band button.term,.board button.term{border-bottom-color:var(--orange)} #termpop{ position:fixed;z-index:120;max-width:290px; padding:12px 14px;border:1px solid var(--line-dd);border-radius:4px; background:var(--white);color:#0B1410; box-shadow:0 14px 40px -14px rgba(11,20,16,.34); opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity .16s var(--ease),transform .16s var(--ease); } #termpop.on{opacity:1;transform:translateY(0)} #termpop b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--orange);margin-bottom:6px} #termpop span{display:block;font-size:13.5px;line-height:1.5;color:rgba(11,20,16,.8)} #termpop em{display:block;margin-top:7px;font-style:normal;font-size:12.5px; color:rgba(11,20,16,.6);border-top:1px solid rgba(11,20,16,.1);padding-top:7px} .reduce-motion #termpop{transition:opacity .16s linear;transform:none} /* ── plain-English switch (footer + header) ────────────────── */ .plain-toggle{ display:inline-flex;align-items:center;gap:8px; padding:8px 12px;border:1px solid var(--line-dd);border-radius:999px; background:none;color:var(--mut-d);cursor:pointer; font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; transition:border-color .2s var(--ease),color .2s var(--ease); } .plain-toggle:hover{color:var(--fg-d);border-color:var(--orange)} .plain-toggle .pt-dot{width:7px;height:7px;border-radius:50%;background:var(--line-dd);flex:none} .plain-toggle[aria-pressed="true"]{color:var(--orange);border-color:var(--orange)} .plain-toggle[aria-pressed="true"] .pt-dot{background:var(--orange)} .nav .plain-toggle{margin-left:auto;border-color:var(--line-d)} @media (max-width:1080px){.nav .plain-toggle{display:none}} @media (max-width:640px){.plain-toggle{font-size:9px;padding:7px 10px}} .drawer .plain-toggle{align-self:flex-start;margin-top:6px} /* ── sticky mobile quote bar ───────────────────────────────── */ .mob-cta{ position:fixed;left:0;right:0;bottom:0;z-index:92;display:none; gap:10px;align-items:center; padding:10px clamp(12px,4vw,18px) calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(12px); border-top:1px solid var(--line-d); transform:translateY(110%);transition:transform .3s var(--ease); } .mob-cta.on{transform:translateY(0)} .mob-cta .mc-q{ flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:0 18px;border-radius:999px;background:var(--orange);color:#fff; font-size:14px;font-weight:600;letter-spacing:.01em; } .mob-cta .mc-e{ flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:46px;min-height:46px;border-radius:999px;border:1px solid var(--line-dd);color:var(--fg-d); } .mob-cta .mc-e svg{width:18px;height:18px} @media (max-width:900px){.mob-cta{display:flex}} body:has(input:focus) .mob-cta, body:has(textarea:focus) .mob-cta, body:has(select:focus) .mob-cta, body:has(.drawer.open) .mob-cta{transform:translateY(110%)} .reduce-motion .mob-cta{transition:none} text{font-family:monospace}' + '.bd-ln{fill:none;stroke:rgba(11,20,16,.5);stroke-width:.9}' + '.bd-thin{fill:none;stroke:rgba(11,20,16,.2);stroke-width:.6}' + '.bd-hair{fill:none;stroke:rgba(11,20,16,.12);stroke-width:.5}' + '.bd-fill{fill:rgba(11,20,16,.045)}' + '.bd-t{font-size:7.5px;letter-spacing:.16em;fill:rgba(11,20,16,.44)}' + '.bd-tv{font-size:9.5px;fill:#08100C}.bd-tb{font-size:12px;fill:#08100C}' + '.bd-bar{fill:rgba(11,20,16,.82)}' + '.bd-float{fill:rgba(94,155,31,.34);stroke:#5E9B1F;stroke-width:.7}' + '.bd-slip{fill:rgba(239,117,54,.2);stroke:#EF7536;stroke-width:.7}