/* Made Tech Housing v9 — architectural editorial finish. All core imagery shares the same paper. */
:root{--paper:#fafefc;--v8-paper:#fafefc;--white:#fafefc}
html{scroll-padding-top:86px}
body{background:var(--paper)}
.header{background:rgba(250,254,252,.97);box-shadow:none}
.header .logo{gap:0;min-width:0;display:inline-flex;align-items:center;flex:none;letter-spacing:normal}
.header .logo .official-logo{display:block;width:clamp(155px,14vw,210px);height:auto;max-height:42px;flex:none}
.header .logo .logo-sub{font-size:10px;letter-spacing:.14em;margin-left:18px;padding-left:18px}
.site-menu{background:#090d0b}
/* The first fold is typography-led. The illustration is architectural paper, not an object floating in a card. */
.hero{background:var(--paper)!important;position:relative;min-height:max(790px,100svh);padding-top:86px;overflow:hidden}
.hero .hero-grid{display:block;position:relative;min-height:calc(max(790px,100svh) - 86px);height:auto}
.hero .hero-copy{width:min(1040px,72vw);max-width:none;position:relative;z-index:4;padding:clamp(62px,9vh,95px) 0 145px clamp(36px,5.4vw,96px);margin:0;min-height:0}
.hero .hero-label{margin-bottom:clamp(28px,4vh,44px);font-weight:700;font-size:12px;letter-spacing:.12em;white-space:normal}
.hero .hero-messages{position:relative;margin:0;max-width:none;font-size:clamp(61px,6.4vw,116px);font-weight:700;line-height:.92;letter-spacing:-.05em;white-space:normal;overflow:visible;text-wrap:balance}
.hero .hero-heading-static{display:block;max-width:100%;white-space:normal}
.hero .hero-rotating-outer{color:#00ad54;display:block;margin:18px 0 0;min-height:2.15em;max-width:900px;overflow:visible}
.hero .hero-rotating{position:relative;display:block;width:max-content;max-width:min(100%,930px);min-height:1.06em;transform:none;opacity:1;animation:none!important;white-space:normal;line-height:.95;color:transparent;-webkit-text-stroke:1.5px #006f38;transition:none;text-wrap:balance}
.hero .hero-rotating::before{content:attr(data-text);position:absolute;inset:0;display:block;max-width:100%;line-height:inherit;letter-spacing:inherit;white-space:normal;color:#00ad54;-webkit-text-stroke:0;background:linear-gradient(175deg,#075a30 0%,#04c761 40%,#006b35 76%,#004d2b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;clip-path:inset(0 100% 0 0);opacity:1}
.hero .hero-rotating.drawing::before{animation:drafting-ink-in 1.85s cubic-bezier(.19,.98,.36,1) forwards}
.hero .hero-rotating.drawing::after{content:"";position:absolute;left:0;top:-.08em;width:100%;height:calc(100% + .17em);pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(5,140,68,.09) 12px 13px);clip-path:inset(0 100% 0 0);animation:drafting-guides 1.75s ease forwards}
.hero .hero-rotating.exiting::before{clip-path:inset(0 0 0 0);animation:drafting-ink-out .68s ease-in forwards}
.hero .hero-rotating.exiting{opacity:.94}
@keyframes drafting-ink-in{0%{clip-path:inset(0 100% 0 0);filter:blur(2px)}25%{filter:blur(1px)}100%{clip-path:inset(0 0 0 0);filter:blur(0)}}
@keyframes drafting-ink-out{from{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 100% 0 0);opacity:.4}}
@keyframes drafting-guides{0%{clip-path:inset(0 100% 0 0);opacity:.55}65%{opacity:.35}100%{clip-path:inset(0 0 0 0);opacity:0}}
.hero .hero-lede{margin-top:clamp(10px,2vh,20px);max-width:600px}
.hero .hero-lede>p:last-child{max-width:580px;font-size:clamp(15px,1.1vw,18px);line-height:1.58;color:#415649;margin:0}
.hero .hero-cta-group{margin-top:22px;gap:24px}
.hero .hero-stage.hero-sketch-stage{position:absolute;top:0;right:0;bottom:0;left:auto;width:min(64%,1080px);height:100%;min-height:0;background:var(--paper)!important;overflow:hidden;z-index:1;pointer-events:none;display:block}
.hero .hero-hd-art{display:block;position:absolute;inset:0 0 0 auto;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;object-fit:cover;object-position:54% center;transform:none!important;filter:none!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 38%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 16%,#000 38%,#000 100%);will-change:auto!important}
.hero .hero-sheen{display:none}
.hero-scroll-cue{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);z-index:8;display:flex;gap:11px;align-items:center;justify-content:center;flex-direction:column;color:#183d29;font:700 10px/1.3 'Poppins',Arial,sans-serif;letter-spacing:.14em;text-align:center;white-space:nowrap;padding:8px 22px}
.scroll-cue-symbol{width:38px;height:38px;border:1px solid rgba(7,111,55,.34);background:rgba(250,254,252,.86);border-radius:100%;font-size:20px;display:grid;place-items:center;line-height:1;transition:transform .25s,background .25s}
.hero-scroll-cue:hover .scroll-cue-symbol{transform:translateY(5px);background:#e5f8e8}
/* Film starts as a deliberate editorial poster, never as a background autoplay. */
.film-section{background:var(--paper);scroll-margin-top:86px}
.film-head{display:block!important;margin-bottom:44px}
.film-head h2{font-size:clamp(50px,5.65vw,91px);letter-spacing:-.05em;max-width:1300px;line-height:.99;margin:24px 0 0;font-weight:700;position:relative}
.film-head>p{display:none!important}
.film-correction{display:inline-flex;position:relative;vertical-align:baseline}
.film-correction .strike-word{position:relative;display:inline-block;color:#09110c}
.film-correction svg{position:absolute;z-index:1;left:-2%;top:28%;height:66%;width:104%;overflow:visible;pointer-events:none}
.film-correction path{fill:none;stroke:#0a6b3c;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1600;stroke-dashoffset:0}
.film-correction path:nth-child(2){stroke-width:2;opacity:.43}
.film-head.is-visible .film-correction path,.film-correction path{animation:draft-correction 1.65s cubic-bezier(.26,.87,.37,1) both}
.film-correction path:nth-child(2){animation-delay:.19s}
@keyframes draft-correction{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
.film-player{border-radius:8px;box-shadow:none;border:1px solid #dae9de;background:#08100b}
.film-player video{background:#0b140e;object-fit:contain}
.film-poster-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;color:#fff;background:rgba(7,18,11,.72);border:1px solid rgba(255,255,255,.7);border-radius:17px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);min-width:215px;padding:25px 30px;font:700 12px/1.3 'Poppins',Arial,sans-serif;letter-spacing:.1em;transition:transform .25s,background .25s}
.film-poster-play:hover{transform:translate(-50%,-50%) scale(1.04);background:rgba(3,78,37,.86)}
.film-play-circle{display:grid;place-items:center;font-size:21px;width:60px;height:60px;border-radius:50%;border:1px solid rgba(255,255,255,.65);padding-left:5px;background:#00ad54;color:#fff}
.film-poster-play small{font-size:11px;letter-spacing:.14em;font-weight:600;color:#daeddf}
.film-poster-play.ever-started:not(.ended){display:none!important}
.film-caption{display:flex;align-items:center;justify-content:space-between;gap:16px}
.film-caption a{color:#11663c;text-decoration:none;font-size:11px;font-weight:700}
/* Hero sketch on inner pages: full-height, no card or shadow or moving layers. */
.route-hero{background:var(--paper)!important;min-height:620px;overflow:hidden}
.route-hero .shell{min-height:575px;align-items:stretch}
.route-hero .route-copy{position:relative;z-index:3;align-self:center}
.route-image-hero{background:var(--paper)!important;position:relative;display:block;min-height:520px;overflow:hidden;border:0;box-shadow:none;padding:0;margin:0;align-self:stretch}
.route-image-hero img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-height:100%;object-fit:contain;object-position:center center;transform:none!important;filter:none!important;mask-image:none!important;-webkit-mask-image:none!important;will-change:auto!important}
body:has(.product-hero) .product-hero{background:var(--paper)!important;min-height:580px;align-items:stretch;padding-bottom:45px}
body:has(.product-hero) .product-hd-figure{align-self:stretch;position:relative;overflow:hidden;margin:0!important;box-shadow:none!important;background:var(--paper)!important}
body:has(.product-hero) .product-hd-figure img{width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;min-height:450px;object-fit:contain;object-position:center;transform:none!important;mask-image:none!important;-webkit-mask-image:none!important;box-shadow:none!important;border:0!important;filter:none!important;will-change:auto!important}
/* The logo and editorial hero maintain clarity on smaller screens. */
@media(max-width:1180px){
 .hero .hero-copy{width:76vw}.hero .hero-messages{font-size:clamp(60px,6.45vw,94px)}
 .hero .hero-stage.hero-sketch-stage{width:61%}
}
@media(max-width:980px){
 .hero{min-height:0;padding-top:86px}
 .hero .hero-grid{min-height:0;display:flex;flex-direction:column}
 .hero .hero-copy{width:100%;padding:64px 7vw 10px;order:1;min-height:0}
 .hero .hero-messages{font-size:clamp(48px,7.5vw,78px);max-width:800px}
 .hero .hero-rotating-outer{min-height:2.12em;max-width:90vw}
 .hero .hero-stage.hero-sketch-stage{order:2;position:relative;width:100%;height:clamp(340px,46vw,600px);min-height:0;margin-bottom:85px;pointer-events:none}
 .hero .hero-hd-art{mask-image:none;-webkit-mask-image:none;object-fit:contain;object-position:center}
 .hero-scroll-cue{bottom:22px}
 .route-image-hero{min-height:400px}
 .route-image-hero img{min-height:100%}
 .route-hero .shell{min-height:0}
 .film-head h2{font-size:clamp(44px,7vw,75px)}
}
@media(max-width:600px){
 .header .logo .official-logo{width:clamp(152px,37vw,190px)}
 .header .logo .logo-sub{font-size:9px;margin-left:10px;padding-left:10px}
 .hero .hero-copy{padding:54px 24px 12px}
 .hero .hero-label{font-size:10px;margin-bottom:28px;letter-spacing:.1em}
 .hero .hero-messages{font-size:clamp(42px,9.2vw,57px);letter-spacing:-.05em;line-height:.95}
 .hero .hero-rotating-outer{min-height:2.05em;margin:16px 0 0;max-width:100%}
 .hero .hero-lede{margin-top:15px}
 .hero .hero-lede>p:last-child{font-size:14px;line-height:1.55}
 .hero .hero-cta-group{gap:16px;margin-top:20px}
 .hero .hero-stage.hero-sketch-stage{height:330px;min-height:0;margin-bottom:88px}
 .hero .hero-hd-art{width:100%;height:100%;object-fit:cover;object-position:51% 50%}
 .hero-scroll-cue{bottom:20px;font-size:9px}
 .film-section{padding-top:68px}
 .film-head h2{font-size:clamp(40px,9.2vw,61px)}
 .film-poster-play{padding:13px 18px;min-width:138px;gap:7px;font-size:9px;border-radius:12px}
 .film-play-circle{width:38px;height:38px;font-size:14px}
 .film-correction path{stroke-width:6}
 .film-caption{display:flex;flex-wrap:wrap;font-size:9px;gap:10px}
 .route-image-hero{min-height:320px}
 body:has(.product-hero) .product-hd-figure img{min-height:290px}
}
@media(prefers-reduced-motion:reduce){
 .hero-rotating,.hero-rotating::before,.hero-rotating::after{animation:none!important;transition:none!important}
 .hero-rotating::before{clip-path:none!important}
 .film-correction path{animation:none!important;stroke-dashoffset:0!important}
 .hero-scroll-cue .scroll-cue-symbol{transition:none!important}
}

@media(max-width:600px){.route-hero .route-copy h1{font-size:clamp(38px,8.3vw,58px)}}