.scroll-intro{height:420svh;position:relative;margin-top:0;background:#151410}.intro-stage{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}.intro-title{height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1440px;margin:auto;padding:64px 36px;will-change:transform}.intro-title h2{font:700 clamp(58px,10.5vw,160px)/1.02 Poppins,Arial,sans-serif;letter-spacing:-.065em;margin:0}.intro-title em{font-style:normal;color:#c57847}.intro-title a{color:#dfccb5;text-decoration:none;font:12px monospace;margin-top:36px;width:fit-content}.intro-title a span{margin-left:24px}.intro-overlay{position:absolute;inset:0;background:#020405;transform:translateY(105%) scale(.86);overflow:hidden;will-change:transform}.intro-overlay video{z-index:0;object-fit:cover;position:absolute;width:100%;height:100%;inset:0}.scroll-caption{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);font:10px monospace;letter-spacing:2px;color:#fff9}.intro-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#151410;opacity:0;font:700 clamp(90px,20vw,290px)/1 Poppins;letter-spacing:-.075em}.intro-end span{color:#c57847}.hello-section{--edge:max(36px,calc((100% - 1440px)/2));background:#151410}.hello-rails{margin:0 var(--edge);border-inline:1px solid #fff1d718;padding:70px 16px 90px}.hello-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px}.hello-note{font:12px monospace;color:#a69986}.audience-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:60px}.audience-tabs button{border-radius:4px;padding:14px 18px;font-size:12px;background:transparent;transition:color .2s,background .2s,border-color .2s}.audience-tabs button[aria-selected=true]{background:#f7e9d2;color:#2c1b11;border-color:#f7e9d2}.audience-tabs button:hover{border-color:#c57847}.hello-panel{display:grid;grid-template-columns:1fr 1.6fr;gap:8%;min-height:400px;align-items:center;outline-offset:10px}.hello-copy h2{font:700 clamp(36px,4.6vw,66px)/1.12 Poppins,Arial;letter-spacing:-.05em;margin:0 0 26px}.hello-copy .section-index{margin-bottom:20px;color:#c57847;text-transform:uppercase}.hello-copy p{font-size:clamp(17px,1.6vw,23px);line-height:1.55;max-width:750px}.hello-copy .hello-detail{font-size:15px;line-height:1.7;color:#b9ae9e}.hello-orbit{aspect-ratio:1;border:1px solid #c5784750;border-radius:50%;position:relative;display:grid;place-items:center;max-width:360px;margin:20px;box-shadow:inset 0 0 80px #b7531215}.hello-orbit::before,.hello-orbit::after{content:"";position:absolute;inset:13%;border:1px solid #c5784730;border-radius:50%}.hello-orbit::after{inset:28%}.hello-orbit span{font:700 clamp(38px,6vw,80px) Poppins;letter-spacing:-5px}.hello-orbit i{position:absolute;inset:-1px;border-radius:50%;animation:orbit 24s linear infinite}.hello-orbit i::after{content:"";position:absolute;top:50%;left:-4px;width:9px;height:9px;background:#c57847;border-radius:50%}.hello-orbit b{position:absolute;bottom:-34px;font:8px monospace;letter-spacing:1.5px;color:#b9ae9e;white-space:nowrap}@keyframes orbit{to{transform:rotate(360deg)}}.intro-static{height:auto}.intro-static .intro-stage{height:75svh;position:relative}.intro-static .intro-overlay{display:none}.intro-static .intro-title{transform:none!important}
@media(max-width:650px){.intro-title{padding:40px 36px}.intro-title h2{font-size:clamp(44px,10.8vw,70px)}.scroll-intro{height:340svh}.hello-section{--edge:20px}.hello-rails{padding-top:45px}.hello-top{display:block}.hello-note{display:block;margin-bottom:24px}.hello-top .section-index{margin-bottom:15px}.audience-tabs{gap:6px;margin-bottom:40px}.audience-tabs button{padding:11px 12px;font-size:11px}.hello-panel{grid-template-columns:1fr;gap:40px}.hello-orbit{display:none}.hello-copy h2{font-size:36px}.hello-copy p{font-size:18px}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}.intro-stage{position:relative;height:75svh}.intro-overlay{display:none}.hello-orbit i{animation:none}}

/* Full-bleed rise: no scaling card, title stays behind the video plane. */
.scroll-intro{margin-inline:-14px;height:400svh}
.intro-title{max-width:none;padding:40px 2.5vw;justify-content:center}
.intro-title h2{font-size:clamp(64px,15.4vw,310px);line-height:.94;letter-spacing:-.07em}
.intro-title h2 em{color:inherit}
.intro-title .section-index{margin-bottom:36px}
.intro-overlay{transform:translateY(100%);border-radius:0}
.intro-tint{position:absolute;inset:0;background:#151410;opacity:.72;pointer-events:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media(max-width:650px){.scroll-intro{margin-inline:-8px;height:340svh}.intro-title{padding-inline:5vw}.intro-title h2{font-size:14.8vw}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}}

/* Quiet two-column introduction emerging over the pinned Hello. */
.hello-section{height:190svh;--about-reveal:1;--hello-opacity:0;--about-y:0px}
.hello-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
.hello-parallax{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(100px,21vw,300px)/1 Poppins;letter-spacing:-.075em;opacity:var(--hello-opacity);pointer-events:none}
.hello-parallax span{color:#c57847}
.hello-rails{width:calc(100% - var(--edge) - var(--edge));margin:0 var(--edge);padding:64px 16px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:7%;border:0;opacity:var(--about-reveal);transform:translateY(var(--about-y))}
.hello-sidebar h2{font:400 clamp(38px,4.2vw,60px)/1.1 Arial,sans-serif;letter-spacing:-2px;margin:0 0 35px}
.audience-tabs{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0}
.audience-tabs button,.audience-tabs button[aria-selected=true]{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;color:#837d72;padding:10px 0;font:16px/1.4 Arial;text-align:left;display:flex;align-items:center;gap:12px}
.audience-tabs button::before{content:'';height:1px;width:14px;background:currentColor;transition:width .25s}
.audience-tabs button[aria-selected=true]{color:#fff1d7}.audience-tabs button[aria-selected=true]::before{width:30px}.audience-tabs button:hover{color:#fff1d7}
.hello-panel{display:block;min-height:440px}
.hello-copy h2{font:400 clamp(27px,3.1vw,45px)/1.25 Arial,sans-serif;letter-spacing:-1.5px;margin:0 0 25px}
.hello-copy [data-copy=label]{display:none}
.hello-copy p{font:400 clamp(24px,3vw,43px)/1.4 Arial,sans-serif;letter-spacing:-1px;margin:0 0 26px;color:#eee2cf;max-width:900px}
.hello-copy .hello-detail{font:400 clamp(16px,1.5vw,20px)/1.6 Arial,sans-serif;letter-spacing:0;color:#a99f90}
@media(max-width:800px){.hello-rails{grid-template-columns:170px minmax(0,1fr);gap:25px}.audience-tabs button{font-size:13px}}
@media(max-width:650px){.hello-section{height:210svh}.hello-sticky{min-height:100svh}.hello-rails{grid-template-columns:1fr;padding:32px 16px;gap:24px}.hello-sidebar h2{font-size:36px;margin-bottom:16px}.audience-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.audience-tabs button{font-size:12px;padding:7px 0;gap:6px}.hello-panel{min-height:0}.hello-copy h2{font-size:25px;margin-bottom:16px}.hello-copy p{font-size:21px;line-height:1.4}.hello-copy .hello-detail{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hello-section{height:auto}.hello-sticky{position:relative}.hello-parallax{display:none}.hello-rails{opacity:1;transform:none}}
/* One sticky stage owns video, a single Hello and About; no boundary handoff. */
.scroll-intro{height:360svh}
.intro-stage>.hello-section{position:absolute;inset:0;height:100%;background:#151410;opacity:var(--about-reveal,0);z-index:3}
.intro-stage .hello-sticky{position:relative;min-height:100%;height:100%;overflow-y:auto}
.intro-stage .hello-rails{opacity:1;transform:translateY(var(--about-y,35px))}
.intro-static{height:auto}
.intro-static .intro-stage{height:auto;overflow:visible}
.intro-static .intro-title{min-height:65svh}
.intro-static .hello-section{position:relative;height:auto;opacity:1}
.intro-static .hello-sticky{height:auto;min-height:0}
.intro-static .hello-rails{transform:none}
@media(max-width:650px){.scroll-intro{height:340svh}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}.intro-stage{height:auto;overflow:visible}.intro-stage>.hello-section{position:relative;height:auto;opacity:1}.intro-stage .hello-rails{transform:none}}

/* Editorial card: warm glass, fine dotted texture and a quiet copper accent. */
.hello-panel{position:relative;padding:42px;border:1px solid #cda57d35;border-radius:24px;background:radial-gradient(ellipse at 100% 0%,#a5582920,transparent 60%),radial-gradient(#e8c9a515 .8px,transparent .8px),#211e19;background-size:auto,20px 20px,auto;box-shadow:0 20px 60px #0002;overflow:hidden;min-height:440px}
.hello-panel::before{content:'';position:absolute;top:0;left:42px;width:60px;height:2px;background:#c57847}
.hello-copy{position:relative}
.hello-copy h2{font-size:clamp(26px,2.6vw,40px)}
.hello-copy p{font-size:clamp(23px,2.6vw,38px)}
@media(max-width:650px){.hello-panel{padding:24px 20px;border-radius:18px;min-height:0}.hello-panel::before{left:20px}.hello-copy h2{font-size:24px}.hello-copy p{font-size:20px}.hello-copy .hello-detail{font-size:14px}}

/* Shift the desk-video subject right within the portrait crop. */
@media(max-width:650px){.intro-overlay video{object-position:45% 45%}}

/* Reusable scroll cue: Poppins, cream and copper. */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;bottom:32px;color:#fff1d7a6;letter-spacing:normal}
.scroll-cue__label{font:700 10px/1.4 Poppins,Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.scroll-cue__track{position:relative;display:block;height:40px;width:1px;overflow:hidden;background:#fff1d72b}
.scroll-cue__stroke{position:absolute;top:0;left:0;width:1px;height:16px;background:#c57847;animation:scroll-cue-travel 1.8s cubic-bezier(.76,0,.24,1) infinite}
@keyframes scroll-cue-travel{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@media(prefers-reduced-motion:reduce){.scroll-cue__stroke{animation:none;transform:translateY(12px)}}

.hello-code{margin:24px 0 0;max-width:100%;font-family:inherit;font-size:clamp(23px,2.6vw,38px);line-height:1.55;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:inherit}
.hello-code code{font:inherit;color:inherit}
.hello-code[hidden],.hello-copy [hidden]{display:none}
@media(max-width:650px){.hello-code{font-size:20px}}

/* Syntax colour only: preserve the card's typography and sizing. */
.hello-code .syntax-keyword{color:#c8a4e8}
.hello-code .syntax-variable{color:#a9cde0}
.hello-code .syntax-string{color:#d9bd8a}
.hello-code .syntax-punctuation{color:#e4dfd5}

/* A small design canvas, reserved for the Designer perspective. */
.designer-chrome,.designer-tools{display:none}
.hello-panel.is-designer{padding-top:100px;padding-bottom:104px}
.is-designer .designer-chrome{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #fff1d718;background:#292723;font:500 11px/1.4 Poppins,Arial,sans-serif;color:#d8cfbf}
.designer-mode{display:flex;gap:16px;color:#fff1d7}.designer-mode span{color:#a49e94}
.is-designer .hello-copy{outline:none}
.is-designer .hello-copy::before{content:'About / Product thinking';position:absolute;top:-36px;left:-15px;color:#9bcdff;font:500 10px/1.4 Poppins,Arial,sans-serif;letter-spacing:.02em}

.is-designer .designer-tools{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #ffffff16;border-radius:12px;background:#30302e;box-shadow:0 6px 20px #0003}
.designer-tool{width:34px;height:34px;display:grid;place-items:center;font:500 23px/1 Arial,sans-serif;color:#eee8dd;border-radius:7px}
.designer-tool.active{background:#168bee;color:white}.designer-tool svg{width:23px;height:23px}.designer-code-icon{font-size:14px;border-left:1px solid #ffffff25;margin-left:5px;padding-left:5px}
@media(max-width:650px){.hello-panel.is-designer{padding:90px 28px 90px}.is-designer .designer-chrome{padding:16px;font-size:9px}.designer-mode{gap:10px}.is-designer .designer-tools{bottom:18px}.designer-tool{width:29px;height:29px}}

.designer-selection{display:none}
.is-designer .designer-selection{display:block;position:absolute;inset:-14px;border:1px solid #79baff;pointer-events:none}
.designer-selection i{position:absolute;width:7px;height:7px;border:1px solid #79baff;background:#fff;transform:translate(-50%,-50%)}
.designer-selection i:nth-child(1){left:0;top:0}.designer-selection i:nth-child(2){left:100%;top:0}.designer-selection i:nth-child(3){left:0;top:100%}.designer-selection i:nth-child(4){left:100%;top:100%}
.designer-tool svg{width:20px;height:20px;stroke-width:1.65}
.designer-file{display:flex;align-items:center;gap:10px}
.designer-figma{display:inline-flex;color:#fff}.designer-figma svg{width:16px;height:24px}

/* Engineers: compact editor with an accessible, decorative line gutter. */
.editor-breadcrumb{display:none}
.hello-panel.is-code{padding:0;min-height:440px}
.is-code .hello-copy{width:100%;align-self:start}
.is-code .hello-copy h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-code .editor-breadcrumb{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #ffffff12;color:#999e96;font:400 13px/1.5 Poppins,Arial,sans-serif;white-space:nowrap;overflow-x:auto}
.editor-breadcrumb strong{font-weight:500;color:#eeeae1}.editor-breadcrumb b{font:700 10px/1 monospace;color:#e2c76f;margin-right:6px}
.is-code .hello-code{margin:0;padding:26px 24px 36px 0;font:400 16px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;white-space:normal;overflow-x:auto;overflow-wrap:normal}
.is-code .hello-code code{display:block;min-width:max-content}
.editor-line{display:flex;white-space:pre}
.editor-line-number{width:58px;flex-shrink:0;padding-right:20px;text-align:right;color:#777e72;user-select:none}
.editor-line-content{display:block;white-space:pre}
@media(max-width:650px){.hello-panel.is-code{min-height:330px}.is-code .editor-breadcrumb{padding:16px;gap:8px;font-size:11px}.is-code .hello-code{font-size:12px;padding-top:20px}.editor-line-number{width:36px;padding-right:12px}}

/* Keep the shared warm dotted card; only the number gutter is tinted. */
.is-code .editor-body{display:flex;align-items:stretch;overflow-x:auto;font:400 clamp(19px,1.8vw,25px)/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.editor-body[hidden]{display:none}
.editor-gutter{flex:0 0 64px;padding:28px 0 36px;background:#fff1d708;border-right:1px solid #fff1d71c;position:sticky;left:0;z-index:1;user-select:none}
.editor-gutter .editor-line-number{display:block;width:auto;padding:0 18px;text-align:right;color:#b4a995;line-height:1.8}
.is-code .hello-code{font:inherit;padding:28px 24px 36px;margin:0;overflow:visible;flex:1;min-width:max-content}
@media(max-width:650px){.is-code .editor-body{font-size:16px}.editor-gutter{flex-basis:42px;padding-top:22px}.editor-gutter .editor-line-number{padding-inline:10px}.is-code .hello-code{padding:22px 16px 36px}}

/* Fill the card down to its rounded bottom, including the number gutter. */
.hello-panel.is-code{display:flex;flex-direction:column}
.is-code .hello-copy{display:flex;flex-direction:column;align-self:stretch;flex:1;min-width:0}
.is-code .editor-breadcrumb{flex-shrink:0}
.is-code .editor-body{flex:1}
.is-code.revealed .editor-line-content{animation:editor-line-reveal .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--line-index,0)*80ms)}
@keyframes editor-line-reveal{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.is-code.revealed .editor-line-content{animation:none}}

.is-code .editor-content{flex:1;min-width:0;display:flex;flex-direction:column}
.is-code .editor-content .hello-code{flex:none;min-width:0;padding-bottom:20px;overflow-x:auto}
.is-code .engineer-context{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.7;color:#b9ae9e;margin:0;padding:0 24px 36px;max-width:750px}
@media(max-width:650px){.is-code .engineer-context{font-size:14px;padding-inline:16px}}