/* 3 STEPS BEYOND — V7.3 hero and editorial refinement. Earlier revisions stored in history. */
:root{
  --brand:#434341;--cream:#F5F4F0;--neutral:#DCDDD6;
  --muted:#676962;--copy:#5B5D57;
  --gutter:24px;--content-max:1200px;--header-height:84px;
  --font-sans:Arial,Helvetica,sans-serif;
  font-synthesis:weight;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{margin:0;background:var(--cream);color:var(--brand);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
button,a{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.site{width:100%;overflow:clip}
.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}
.skip-link{position:fixed;left:var(--gutter);top:12px;z-index:20;background:var(--cream);color:var(--brand);padding:12px 16px;transform:translateY(-200%);font-size:var(--text-control);line-height:var(--leading-body)}
.skip-link:focus{transform:none}

/* Header and real in-page navigation */
.header{height:var(--header-height);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;background:var(--brand);color:var(--cream);position:relative;z-index:5}
.logo{display:flex;flex-direction:column;gap:5px}.logo .person{font-size:14px;letter-spacing:.075em;font-weight:700;line-height:1}.logo .role{font-size:10px;letter-spacing:.14em;color:var(--neutral);font-weight:400}
.menu{border:0;background:transparent;color:var(--cream);padding:13px 3px 13px 13px;min-width:44px;min-height:44px;display:grid;place-items:center}
.menulines{width:25px;height:16px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.menulines i{width:25px;height:1.5px;background:currentColor;display:block;transition:transform 180ms ease,width 180ms ease}
.menulines i:last-child{width:17px}
.menu[aria-expanded="true"] .menulines i:first-child{transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] .menulines i:last-child{width:25px;transform:translateY(-7px) rotate(-45deg)}
.site-navigation{position:absolute;top:100%;left:0;right:0;background:var(--brand);padding:14px max(var(--gutter),calc((100vw - var(--content-max))/2)) 25px;box-shadow:0 14px 22px #0002;display:flex;flex-direction:column;gap:0}
.site-navigation[hidden]{display:none}
.site-navigation a{color:var(--cream);font-size:var(--text-caption);letter-spacing:.11em;font-weight:var(--weight-label);text-decoration:none;padding:14px 0;border-top:1px solid #ffffff33;line-height:var(--leading-caption)}
.site-navigation a:hover{text-decoration:underline;text-underline-offset:5px}

/* 01 Hero: full first mobile viewport, content-safe on short screens */
.hero{min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height));min-height:calc(100dvh - var(--header-height));height:auto;background:var(--brand);position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.22) translateY(-5%);transform-origin:50% 48%;z-index:-2}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,23,22,.08) 0%,rgba(28,29,27,0) 31%,rgba(25,27,24,.25) 48%,rgba(27,29,27,.74) 70%,rgba(29,30,29,.95) 100%)}
.hero-inner{padding:24px var(--gutter) calc(clamp(48px,9svh,80px) + env(safe-area-inset-bottom));color:var(--cream);width:100%;position:relative}
.hero-format{margin:0 0 var(--space-3);font-size:var(--text-caption);line-height:var(--leading-caption);font-weight:var(--weight-label);letter-spacing:var(--tracking-meta);color:var(--cream)}
.hero h1{font-weight:780;text-transform:uppercase;font-size:clamp(29px,9.4vw,39px);line-height:1.01;letter-spacing:-.055em;margin:0 0 var(--intro-gap)}
.hero h1 span{display:block;white-space:nowrap}
.subline{font-size:var(--text-intro);line-height:var(--leading-intro);color:#F3F2EE;max-width:340px;margin:0 0 var(--space-6);text-wrap:pretty}
.apply{display:inline-flex;align-items:center;justify-content:center;width:140px;height:46px;padding:0 12px;text-align:center;border:1px solid rgba(245,244,240,.9);border-radius:2px;color:var(--brand);background:var(--cream);font-size:11px;font-weight:700;letter-spacing:.16em;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.apply:hover{background:#e5e5de}.apply:focus-visible{outline-color:var(--cream)}
.credentials{border-top:1px solid rgba(245,244,240,.40);padding-top:16px;margin-top:var(--component-space);font-size:var(--text-trust);line-height:var(--leading-trust);color:var(--cream);letter-spacing:.005em;display:grid;gap:2px}
.credentials-separator{display:none}

/* 02 Results: swipe on mobile, horizontal three-card on desktop */
.results{background:var(--cream);padding:var(--section-space) 0 calc(var(--section-bridge) / 2)}
.results-heading{padding:0 var(--gutter);margin:0 0 var(--heading-gap)}
.eyebrow{font-size:var(--text-meta);font-weight:var(--weight-label);letter-spacing:var(--tracking-meta);color:var(--muted);margin:0 0 var(--space-3);line-height:var(--leading-meta)}
.results h2,.method-heading h2{font-size:var(--text-section);line-height:var(--leading-section);letter-spacing:var(--tracking-section);font-weight:var(--weight-title);margin:0}
.result-strip{display:flex;overflow-x:auto;gap:var(--space-5);padding:0 var(--gutter) var(--space-4);scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.result-strip::-webkit-scrollbar{display:none}
.result-card{flex:none;width:218px;scroll-snap-align:start}
.poster{position:relative;aspect-ratio:4/5;width:100%;background:linear-gradient(160deg,#E1E2DC,#D0D2CB);border-radius:2px;display:flex;align-items:center;justify-content:center}
.poster::before{content:'';position:absolute;inset:12px;border:1px solid rgba(67,67,65,.10)}
.play{width:48px;height:48px;border:1px solid rgba(67,67,65,.80);border-radius:50%;display:grid;place-items:center}
.play svg{width:16px;height:16px;fill:var(--brand);margin-left:2px}
.poster-note{position:absolute;bottom:16px;text-align:center;left:8px;right:8px;font-size:var(--text-meta);letter-spacing:var(--tracking-meta);color:var(--brand);font-weight:var(--weight-label);line-height:var(--leading-meta)}
.accent{height:2px;width:26px;background:var(--brand);margin:17px 0 11px}
.category{margin:0 0 var(--space-3);font-size:var(--text-meta);line-height:var(--leading-meta);font-weight:var(--weight-label);letter-spacing:var(--tracking-meta)}
.quote{margin:0 0 var(--space-3);color:var(--copy);font-style:italic;font-size:var(--text-body);line-height:var(--leading-body);min-height:calc(var(--text-body) * var(--leading-body) * 2)}
.name{font-size:var(--text-caption);font-weight:var(--weight-title);margin:0;letter-spacing:.005em;line-height:var(--leading-caption)}
.slider-controls{display:flex;align-items:center;gap:7px;padding:14px var(--gutter) 0;font-size:var(--text-meta);letter-spacing:var(--tracking-meta);color:var(--muted);line-height:var(--leading-meta)}
.progressline{height:1px;background:var(--neutral);flex:1}
.arrows{display:flex;gap:0}
.slider-button{background:transparent;border:0;color:var(--brand);font-size:19px;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;padding:0}
.slider-button[disabled]{opacity:.35;cursor:default}

/* 03 Method: editorial image break on mobile; image-left grid on desktop */
.method{background:var(--cream);color:var(--brand);padding:calc(var(--section-bridge) / 2) 0 var(--section-space)}
.method-shell{margin:0 auto;padding:0 var(--gutter)}
.method-heading{margin:0 0 var(--heading-gap)}
.method-body{border-top:1px solid var(--neutral)}
.method-piece{margin:0;border:0}
.method-index{font-size:var(--text-meta);line-height:var(--leading-meta);letter-spacing:var(--tracking-meta);font-weight:var(--weight-label);color:var(--muted);margin:0 0 var(--space-3)}
.method-foundation .method-index{color:var(--brand)}
.method-piece h3{color:var(--brand);margin:0;font-size:var(--text-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title);font-weight:var(--weight-title);text-wrap:pretty}
.results-intro,.method-description{color:var(--copy);font-size:var(--text-body);line-height:var(--leading-body);margin:var(--copy-gap) 0 0;max-width:var(--measure-body);text-wrap:pretty}
.method-foundation{padding:var(--component-space) 0}
.foundation-top{display:flex;flex-direction:column;align-items:stretch}
.method-foundation-copy{max-width:560px}
.method-image{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:5/4;height:auto;overflow:hidden;background:var(--neutral);border-radius:2px;margin:var(--space-6) 0 0}
.method-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.07) brightness(1.015);transform:scale(1);transition:transform 650ms cubic-bezier(.2,.7,.2,1)}
.method-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(67,67,65,.07),transparent 42%)}
.method-secondary{border-top:1px solid var(--neutral);padding:var(--component-space) 0}
.method-secondary:last-child{border-bottom:1px solid var(--neutral)}

/* Honest prototype-only application feedback until Section 07 exists. */
.application-dialog{position:fixed;border:1px solid var(--neutral);border-radius:3px;max-width:min(420px,calc(100vw - 32px));padding:32px;color:var(--brand);background:var(--cream);box-shadow:0 24px 90px #0005}
.application-dialog::backdrop{background:rgba(24,26,24,.65)}
.application-dialog h2{font-size:var(--text-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title);margin:0 0 var(--copy-gap);font-weight:var(--weight-title)}
.application-dialog p:last-child{font-size:var(--text-body);line-height:var(--leading-body);color:var(--copy);margin:0}
.dialog-close{position:absolute;top:7px;right:8px;border:0;background:transparent;color:var(--brand);min-width:44px;min-height:44px;font-size:25px}

@media(max-width:799px) and (max-height:700px){
  .hero-inner{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .hero h1{margin-bottom:var(--space-3)}
  .subline{margin-bottom:var(--space-4)}
  .credentials{margin-top:18px;padding-top:12px}
}
@media(max-width:799px) and (max-height:590px){
  .hero h1{font-size:clamp(28px,8.7vw,36px)}
  .hero-inner{padding-top:16px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .hero-img{object-position:50% 85%;transform:scale(1.22) translateY(-6%)}
  .subline{margin-bottom:var(--space-3)}
  .credentials{margin-top:14px;padding-top:10px}
}
@media(max-width:359px){
  :root{--gutter:18px}
  .logo .person{font-size:12px}.logo .role{font-size:9px}
  .hero h1{font-size:clamp(28px,9.2vw,33px)}.method-image{margin-top:var(--space-6)}
}
@media(min-width:600px) and (max-width:799px){
  .method-image{max-width:540px;aspect-ratio:5/4}
  .method-foundation-copy,.method-secondary .method-description{max-width:var(--measure-body)}
}
@media(min-width:800px){
  :root{--gutter:clamp(36px,5.5vw,92px);--header-height:94px}
  .header{height:var(--header-height);padding:0 max(var(--gutter),calc((100% - var(--content-max))/2))}
  .logo .person{font-size:16px}.logo .role{font-size:11px}
  .hero{height:min(760px,72vw);min-height:580px;align-items:center}
  .hero-img{inset:0 0 0 auto;width:63%;height:100%;object-fit:cover;object-position:center 26%;transform:none}
  .hero::after{background:linear-gradient(90deg,#303330 0%,#333633 29%,rgba(48,51,48,.92) 39%,rgba(48,51,48,.62) 56%,rgba(48,51,48,.08) 83%),linear-gradient(0deg,rgba(27,29,28,.36),transparent 44%)}
  .hero-inner{width:min(var(--content-max),calc(100% - 2 * var(--gutter)));margin:0 auto;padding:40px 0}
  .hero h1{font-size:clamp(41px,4.2vw,68px);margin-bottom:var(--intro-gap);letter-spacing:-.045em}
  .subline{max-width:var(--measure-intro);margin-bottom:var(--space-8)}
  .credentials{max-width:610px;width:max-content;margin-top:44px;display:block}
  .credentials-separator{display:inline}
  .results-heading{width:min(var(--content-max),calc(100% - 2 * var(--gutter)));max-width:none;padding:0;margin:0 auto var(--heading-gap)}
  .result-strip{width:min(var(--content-max),calc(100% - 2 * var(--gutter)));max-width:none;margin:0 auto;justify-content:space-between;gap:var(--grid-gap);overflow:visible;padding:0 0 12px}
  .result-card{flex:1;max-width:270px;min-width:0}
  .poster{max-height:none}.slider-controls{display:none;font-size:var(--text-meta);line-height:var(--leading-meta);letter-spacing:var(--tracking-meta)}
  .method-shell{width:min(var(--content-max),calc(100% - 2 * var(--gutter)));padding:0}
  .method-body{--photo-w:clamp(242px,25.5vw,328px);--photo-gap:clamp(38px,5.65vw,82px);position:relative;min-height:480px;padding-left:calc(var(--photo-w) + var(--photo-gap))}
  .foundation-top{display:block}.method-foundation-copy{max-width:680px}
  .method-image{position:absolute;left:0;top:var(--component-space);width:var(--photo-w);height:432px;aspect-ratio:auto;margin:0}
  .method-image img{object-position:56% 50%;transform:scale(1.03)}
}
@media(min-width:800px) and (max-width:1040px){
  .method-body{min-height:456px}.method-image{height:410px;top:var(--component-space)}
}
/* Short phone landscape: preserve the two-line claim and the 140 × 46 CTA. */
@media(min-width:800px) and (max-width:1023px) and (max-height:500px){
  .hero{height:auto;min-height:calc(100svh - var(--header-height));min-height:calc(100dvh - var(--header-height))}
  .hero-inner{padding:18px 0}
  .hero h1{font-size:36px;margin-bottom:var(--space-3)}
  .subline{max-width:440px;margin-bottom:var(--space-4)}
  .credentials{max-width:440px;width:auto;margin-top:18px;padding-top:10px}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.method-image:hover img{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.method-image img,.menulines i{transition:none}}