
    .h3-hero-track, .h3-skip { --h3-paper:#efe9df; --h3-ink:#121311; --h3-red:#ac4933; --h3-photo-clip:polygon(0 0,100% 0,100% 100%,0 100%); --h3-drawing-opacity:0; --h3-shade:1; }
    .h3-skip { position:fixed; left:20px; top:12px; z-index:20; padding:12px 18px; background:var(--h3-paper); transform:translateY(-150%); }
    .h3-skip:focus { transform:none; }
    .h3-hero-track { position:relative; }
    .h3-hero { position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; isolation:isolate; background:var(--h3-paper); }
    .h3-motion-ready .h3-hero-track { height:420vh; height:420svh; }
    .h3-motion-ready .h3-hero { position:sticky; top:0; }
    .h3-paper,.h3-photo,.h3-blueprint,.h3-ui-layer,.h3-light-ui,.h3-boundary { position:absolute; inset:0; }
    .h3-paper { background:radial-gradient(ellipse at 20% 25%,#f5f1e9 0%,transparent 65%),var(--h3-paper); }
    .h3-paper::after { content:""; position:absolute; inset:0; opacity:.15; filter:url(#paper-grain); pointer-events:none; }
    .h3-photo { clip-path:var(--h3-photo-clip); background:#423b32; }
    .h3-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:50% 50%; }
    .h3-photo::after { content:""; position:absolute; inset:0; opacity:var(--h3-shade); background:linear-gradient(90deg,rgba(13,17,15,.87) 0%,rgba(13,17,15,.67) 38%,rgba(13,17,15,.18) 72%,rgba(13,17,15,.12)); }
    .h3-blueprint { opacity:var(--h3-drawing-opacity); pointer-events:none; }
    .h3-blueprint svg { display:block; width:100%; height:100%; }
    .h3-blueprint .h3-mobile-plan { display:none; }
    .h3-plan-lines { fill:none; stroke:#68645d; stroke-width:.8; opacity:.62; }
    .h3-grid-lines { opacity:.22; stroke-width:.65; }
    .h3-plan-notes { fill:#666159; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:16px; letter-spacing:.5px; opacity:.8; }
    .h3-ui-layer { z-index:3; pointer-events:none; color:#fff; }
    .h3-motion-ready #hero-ui { color:var(--h3-ink); }
    .h3-ui-layer a,.h3-ui-layer button { pointer-events:auto; }
    .h3-site-header { position:absolute; top:0; left:0; width:100%; padding:clamp(25px,3.1vw,48px) 5.2%; display:flex; justify-content:space-between; align-items:center; gap:32px; }
    .h3-logo { font-size:clamp(27px,2.4vw,38px); font-weight:700; letter-spacing:.045em; line-height:1; }
    .h3-header-right { display:flex; align-items:center; gap:clamp(28px,4.3vw,68px); }
    .h3-desktop-nav { display:flex; gap:clamp(25px,2.3vw,38px); font-size:18px; letter-spacing:.055em; }
    .h3-desktop-nav a { padding:6px 0; }
    .h3-desktop-nav a:hover { text-decoration:underline; text-underline-offset:6px; }
    .h3-menu-button { display:grid; gap:9px; place-content:center; width:48px; height:44px; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
    .h3-menu-button span { display:block; height:1px; width:40px; background:currentColor; }
    .h3-hero-copy { position:absolute; top:22.3%; left:6.25%; width:48%; }
    .h3-hero-text { display:flow-root; }
    .h3-motion-ready #hero-ui .h3-hero-text { clip-path:var(--h3-paper-text-clip); }
    .h3-hero-title { margin:0 0 18px; font-family:"Zen Kaku Gothic New",sans-serif; font-size:clamp(56px,min(5.65vw,10.5svh),104px); font-weight:900; line-height:1.12; letter-spacing:-.035em; }
    .h3-title-line { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; white-space:nowrap; }
    .h3-title-line span { display:block; }
    .h3-phrase { display:inline-block; white-space:nowrap; }
    .h3-hero-description { margin:20px 0 22px; max-width:450px; font-size:clamp(17px,1.35vw,23px); font-weight:500; line-height:1.35; letter-spacing:.025em; text-wrap:pretty; }
    .h3-hero-description .h3-proof { display:block; }
    .h3-consultation { display:flex; align-items:center; justify-content:space-between; width:clamp(270px,20.4vw,334px); min-height:68px; padding:18px 32px; background:var(--h3-red); color:#fff; font-size:clamp(19px,1.55vw,24px); font-weight:700; letter-spacing:.055em; }
    .h3-consultation .h3-arrow { font-family:"DM Sans",sans-serif; font-size:31px; font-weight:400; line-height:1; }
    .h3-consultation:hover { background:#943c2b; }
    .h3-scroll-cue { position:absolute; right:4.1%; bottom:7%; display:flex; align-items:center; flex-direction:column; gap:12px; font-size:15px; letter-spacing:.06em; }
    .h3-scroll-cue::before { content:""; display:block; width:1px; height:66px; background:currentColor; }
    .h3-light-ui { z-index:4; color:#fff; clip-path:var(--h3-photo-clip); pointer-events:none; }
    .h3-light-ui * { pointer-events:none !important; }
    .h3-light-ui .h3-hero-text { color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); }
    .h3-boundary { z-index:2; pointer-events:none; opacity:0; }
    .h3-motion-ready .h3-boundary { opacity:1; }
    .h3-boundary svg { width:100%; height:100%; overflow:visible; }
    .h3-boundary line { stroke:var(--h3-red); stroke-width:1; vector-effect:non-scaling-stroke; }
    .h3-boundary-label { position:absolute; top:0; left:0; padding:6px 10px; background:var(--h3-paper); color:var(--h3-red); border:1px solid rgba(172,73,51,.35); font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.035em; white-space:nowrap; transform-origin:left bottom; }
    .h3-menu-panel { position:absolute; z-index:8; right:5.2%; top:100px; width:240px; padding:20px 24px; background:var(--h3-paper); border:1px solid #c3b9aa; box-shadow:0 12px 40px #12131116; }
    .h3-menu-panel[hidden] { display:none; }
    .h3-menu-panel a { display:block; padding:12px 0; border-bottom:1px solid #d5ccbf; }
    .h3-menu-panel a:last-child { border-bottom:0; }
    .h3-intro .h3-plan-lines [data-draw] { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.5s cubic-bezier(.25,.1,.25,1) forwards; animation-delay:var(--delay,0s); }
    .h3-intro .h3-plan-notes { animation:notes-in 1.2s .5s both; }
    .h3-intro .h3-title-line span { animation:title-in .95s cubic-bezier(.2,.7,.2,1) both; animation-delay:.15s; }
    .h3-intro .h3-title-line:nth-child(2) span { animation-delay:.32s; }
    @keyframes draw { to { stroke-dashoffset:0; } }
    @keyframes notes-in { from { opacity:0; } to { opacity:.8; } }
    @keyframes title-in { from { transform:translateY(112%); } to { transform:translateY(0); } }
    @media (min-width:1600px) { .h3-hero-copy { width:800px; } }
    @media (max-width:700px) {
      .h3-hero { min-height:620px; }
      .h3-site-header { padding:27px 6.15%; gap:16px; }
      .h3-logo { font-size:28px; }
      .h3-desktop-nav { display:none; }
      .h3-menu-button { width:42px; }
      .h3-menu-button span { width:30px; }
      .h3-hero-copy { top:23.5%; left:6.15%; width:87.7%; }
      .h3-hero-title { font-size:clamp(32px,9.9vw,64px); line-height:1.24; letter-spacing:-.05em; margin-bottom:20px; }
      .h3-hero-description { max-width:330px; margin:22px 0 24px; font-size:16px; line-height:1.65; letter-spacing:0; }
      .h3-consultation { width:260px; min-height:62px; padding:16px 26px; font-size:19px; }
      .h3-photo img { object-position:62% 50%; }
      .h3-photo::after { background:linear-gradient(90deg,rgba(13,17,15,.84),rgba(13,17,15,.58) 68%,rgba(13,17,15,.25)); }
      .h3-scroll-cue { right:6.15%; bottom:5%; font-size:12px; gap:10px; }
      .h3-scroll-cue::before { height:48px; }
      .h3-blueprint .h3-desktop-plan { display:none; }
      .h3-blueprint .h3-mobile-plan { display:block; }
      .h3-boundary-label { font-size:9px; padding:5px 7px; }
      .h3-menu-panel { right:6.15%; top:84px; }
    }
    @media (max-height:650px) and (min-width:701px) {
      .h3-hero { min-height:480px; }
      .h3-hero-copy { top:23%; }
      .h3-hero-title { font-size:min(6.2vw,10.2svh); }
      .h3-hero-description { margin:18px 0; font-size:16px; max-width:410px; }
      .h3-consultation { min-height:56px; padding:12px 25px; font-size:18px; }
      .h3-site-header { padding-top:25px; }
    }
    @media (prefers-reduced-motion:reduce) {
      .h3-hero-track *, .h3-hero-track *::before, .h3-hero-track *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
      .h3-hero-track,.h3-motion-ready .h3-hero-track { height:auto; }
      .h3-hero,.h3-motion-ready .h3-hero { position:relative; }
      .h3-photo,.h3-light-ui { clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important; }
      #hero-ui .h3-hero-text { clip-path:polygon(0 0,0 0,0 0) !important; }
      .h3-photo::after { opacity:1 !important; }
      .h3-blueprint,.h3-boundary { display:none; }
    }
  
    /* Keep the prototype typography and palette local; the current top owns body. */
    .h3-hero-track { color:var(--h3-ink); font-family:"DM Sans","Zen Kaku Gothic New",sans-serif; line-height:normal; }
    .h3-hero-track button { font:inherit; }
    .h3-hero-track a:focus-visible, .h3-hero-track button:focus-visible { outline:3px solid var(--h3-red); outline-offset:6px; }
    .h3-header-contact { padding:12px 18px; border:1px solid currentColor; font-size:16px; font-weight:700; white-space:nowrap; }
    .h3-desktop-nav { white-space:nowrap; }
    .h3-site-header { pointer-events:auto; }
    .h3-menu-panel { color:var(--h3-ink); }
    .h3-skip { color:var(--h3-ink); font-family:"DM Sans","Zen Kaku Gothic New",sans-serif; }
    #site-header { position:fixed; inset:0 0 auto; width:100%; }
    #site-header[hidden] { display:none; }
    /* Same current header, with the requested two-line mobile toggle. */
    .nav-toggle span:nth-child(2) { display:none; }
    @media (max-width:1080px) {
      .h3-desktop-nav { display:none; }
      body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(3.5px) rotate(45deg); }
      body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-3.5px) rotate(-45deg); }
    }
    @media (max-width:700px) { .h3-header-contact { display:none; } }

