:root{
  --h2-ink:#f6f0df;--h2-muted:#b8b4a8;--h2-gold:#edbd54;--h2-gold-bright:#ffd875;
  --h2-dark:#050d14;--h2-panel:#081722;--h2-line:rgba(238,190,84,.42);--h2-max:1420px
}
.home-2-page{background:var(--h2-dark);color:var(--h2-ink);font-family:Inter,Arial,sans-serif;line-height:1.45}
.home-2-page:before{opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.h2-container{width:min(var(--h2-max),100%);margin:0 auto;padding-inline:clamp(1.15rem,4vw,4.8rem)}
.h2-header{padding:1rem clamp(1.15rem,4vw,4.8rem);background:rgba(5,13,20,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(237,189,84,.13)}
.h2-header .nav-logo{width:clamp(128px,12vw,178px);height:clamp(62px,7vw,88px)}
.h2-header .nav-links{color:#e9e3d6;gap:clamp(.55rem,1.8vw,2rem);font-family:DM Mono,monospace;font-size:.58rem}
.h2-header .nav-links a:hover,.h2-header .nav-links a[aria-current=page]{color:var(--h2-gold)}
.h2-header .nav-cta{border-color:rgba(237,189,84,.65)}
.h2-header .nav-cta:hover{background:var(--h2-gold);color:#07111a!important}
.h2-header .menu-toggle{color:var(--h2-ink)}
.home-2-page .h2-header.is-scrolled{background:rgba(5,13,20,.9);backdrop-filter:blur(18px);border-bottom-color:rgba(237,189,84,.24)}
.home-2-page .scroll-rail{color:rgba(246,240,223,.55)}
.home-2-page .rail-track{background:rgba(237,189,84,.18)}
.home-2-page .rail-fill{background:var(--h2-gold)}
.h2-kicker{display:inline-block;color:var(--h2-gold);font-family:DM Mono,monospace;font-size:clamp(.62rem,1vw,.78rem);letter-spacing:.42em;text-transform:uppercase;margin-bottom:1rem}
.h2-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.h2-reveal.is-visible,.h2-reveal.reveal.is-visible{opacity:1;transform:none}
.h2-arrow-link{display:inline-flex;align-items:center;gap:.65rem;color:var(--h2-ink);font:500 .64rem DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(237,189,84,.45);padding-bottom:.35rem;transition:color .3s,border-color .3s}
.h2-arrow-link span{color:var(--h2-gold)}
.h2-arrow-link:hover{color:var(--h2-gold);border-color:var(--h2-gold)}
.h2-hero-button{display:inline-flex;align-items:center;gap:1rem;background:linear-gradient(125deg,#f4c860,#c98b29);color:#111a1d;border:1px solid #ffe096;border-radius:2px;padding:.9rem 1.25rem;font:500 .66rem DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 28px rgba(212,154,45,.2);transition:transform .3s,box-shadow .3s,filter .3s}
.h2-hero-button span{font-size:1.08rem;line-height:0}
.h2-hero-button:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(212,154,45,.38);filter:brightness(1.08)}

/* —— Hero —— */
.home-2-page .h2-hero.hero{position:relative;min-height:115svh;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(circle at 74% 30%,rgba(222,155,54,.24),transparent 26%),linear-gradient(180deg,#09131d 0%,#07121a 45%,#050d14 100%);padding:8rem 0 5.5rem}
.home-2-page .h2-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,20,.88) 0%,rgba(5,13,20,.55) 42%,rgba(5,13,20,.08) 79%),linear-gradient(180deg,rgba(5,13,20,.15),transparent 48%,#050d14 100%);pointer-events:none;z-index:0}
.h2-hero-art,.h2-hero-art canvas,.h2-sunrise-image,.h2-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h2-hero-art{z-index:0}
.h2-hero-art canvas{opacity:.72;mix-blend-mode:screen}
.h2-sunrise-image{background:url('../assets/web-design/sunrise-mountains.jpg') center 48%/cover no-repeat;opacity:.22;mix-blend-mode:screen;filter:saturate(.75) contrast(1.1) blur(.2px);transform:scale(1.28);transition:transform 1s ease}
.h2-grain{opacity:.055;background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .7px);background-size:5px 5px;mix-blend-mode:screen;z-index:0}
.home-2-page .h2-hero .hero-content{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.45fr);gap:3rem;align-items:end}
.home-2-page .h2-hero h1{font-family:Playfair Display,Georgia,serif;font-size:clamp(3.8rem,11vw,10.5rem);line-height:.82;letter-spacing:-.06em;font-weight:700;margin:0;max-width:1100px;text-shadow:0 8px 36px rgba(0,0,0,.45)}
.home-2-page .h2-hero h1 span{display:block;color:#e8e0cc}
.home-2-page .h2-hero h1 em{font-style:normal;color:var(--h2-gold)}
.home-2-page .h2-hero .hero-side{max-width:300px;justify-self:end;margin-bottom:.3rem}
.home-2-page .h2-hero .hero-side p{font-size:1rem;line-height:1.7;color:#c9c4b6;margin:0 0 2rem}
.h2-scroll-cue{display:flex;align-items:center;gap:.75rem;color:#d3cec2;font:500 .62rem DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase}
.h2-scroll-cue i{display:block;width:36px;height:1px;background:var(--h2-gold)}

/* —— Positioning —— */
.home-2-page .h2-positioning.positioning{background:linear-gradient(180deg,#061018,#050d14 60%,#081722);padding:0;min-height:210vh;position:relative}
.home-2-page .positioning-sticky{background:transparent}
.home-2-page .h2-positioning h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(3.6rem,9.5vw,9.5rem);line-height:.86;letter-spacing:-.06em;margin:0;font-weight:700;color:var(--h2-ink)}
.home-2-page .h2-positioning h2 span{display:block;color:var(--h2-gold)}
.home-2-page .positioning-copy{max-width:330px;color:var(--h2-muted)}
.home-2-page .positioning-copy p{font-size:1.05rem;line-height:1.65;margin:0 0 2rem;color:#c4bfb2}
.home-2-page .stroke-orbit path{stroke:var(--h2-gold);opacity:.85}
.home-2-page .floating-dot{background:var(--h2-gold);box-shadow:0 0 0 10px rgba(237,189,84,.12),0 0 40px rgba(237,189,84,.45)}

/* —— Showreel —— */
.home-2-page .h2-showreel.showreel-section{background:#050d14;padding-top:clamp(4rem,8vw,7rem)}
.home-2-page .h2-showreel .section-intro{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.home-2-page .h2-showreel .section-intro h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.06em;margin:.5rem 0 0;color:var(--h2-ink)}
.home-2-page .h2-showreel .section-intro h2 em{color:var(--h2-gold);font-style:normal}
.home-2-page .h2-showreel .section-intro p{max-width:320px;color:var(--h2-muted);line-height:1.65;margin:0}
.home-2-page .showreel{border:1px solid rgba(237,189,84,.35);background:#0a1520;box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 40px rgba(237,189,84,.08)}
.home-2-page .reel-media{background:#081018}
.home-2-page .reel-media-wash{background:linear-gradient(125deg,rgba(5,13,20,.55),rgba(192,138,45,.18) 48%,rgba(5,13,20,.45)),radial-gradient(circle at 50% 45%,transparent 15%,rgba(5,13,20,.5) 100%);mix-blend-mode:multiply}
.home-2-page .reel-word{color:#f6f0df;text-shadow:0 2px 28px rgba(0,0,0,.55)}
.home-2-page .play-button{background:linear-gradient(125deg,#f4c860,#c98b29);color:#111a1d;box-shadow:0 8px 28px rgba(212,154,45,.35)}
.home-2-page .play-button:hover,.home-2-page .play-button:focus-visible{background:#ffe08d;transform:scale(1.08)}
.home-2-page .reel-caption{color:rgba(246,240,223,.72)}
.home-2-page .reel-plus{color:var(--h2-gold);opacity:.75}

/* —— Work —— */
.home-2-page .h2-work.work-section{background:linear-gradient(180deg,#050d14,#07141d 40%,#050e16);padding-block:clamp(5rem,10vw,9rem)}
.home-2-page .h2-work .section-intro{display:flex;align-items:end;justify-content:space-between;gap:3rem;margin-bottom:clamp(2.8rem,5vw,5rem)}
.home-2-page .h2-work .section-intro h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.06em;margin:.5rem 0 0;color:var(--h2-ink)}
.home-2-page .h2-work .section-intro h2 em{color:var(--h2-gold);font-style:normal}
.home-2-page .h2-work .section-intro p{max-width:320px;color:var(--h2-muted);line-height:1.65;margin:0}
.home-2-page .work-thumb{border-radius:clamp(1rem,2vw,1.35rem);background:#0a1520;border:1px solid rgba(237,189,84,.22);box-shadow:0 18px 48px rgba(0,0,0,.35);transition:border-color .45s,box-shadow .45s,transform .45s}
.home-2-page .work-card:hover .work-thumb{border-color:rgba(255,211,113,.7);box-shadow:0 24px 60px rgba(0,0,0,.48),0 0 28px rgba(215,158,52,.16);transform:translateY(-6px)}
.home-2-page .work-thumb:after{background:rgba(5,13,20,.82);color:var(--h2-gold);border:1px solid rgba(237,189,84,.45)}
.home-2-page .work-tags{color:#8e9188;font-family:DM Mono,monospace}
.home-2-page .work-title{font-family:Playfair Display,Georgia,serif;font-size:clamp(1.6rem,2.8vw,2.8rem);letter-spacing:-.04em;color:var(--h2-ink);font-weight:700}
.home-2-page .work-card:hover .work-title{color:var(--h2-gold-bright)}
.home-2-page .work-preview{background:#0a1520}
.home-2-page .work-preview-label{border-color:rgba(237,189,84,.4);background:rgba(5,13,20,.72);color:#f6f0df}

/* —— Immersive / story —— */
.home-2-page .h2-immersive.immersive{min-height:245vh;background:linear-gradient(180deg,#07141d,#050d14 50%,#030a10)}
.home-2-page .h2-immersive .story-copy h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(3rem,7vw,7rem);line-height:.86;letter-spacing:-.06em;margin:1rem 0 1.5rem;color:var(--h2-ink)}
.home-2-page .h2-immersive .story-copy h2 span{display:block;color:var(--h2-gold)}
.home-2-page .h2-immersive .story-copy p{color:var(--h2-muted);line-height:1.7}
.home-2-page .device{border:1px solid rgba(237,189,84,.4);background:linear-gradient(145deg,#1a2834,#0a1520);box-shadow:24px 35px 80px rgba(0,0,0,.45),0 0 40px rgba(237,189,84,.12)}
.home-2-page .device:before{background:linear-gradient(180deg,#152230,#0c1822);border:1px solid rgba(237,189,84,.2)}
.home-2-page .device-screen{background:#050d14}
.home-2-page .device-screen strong{color:#f5f3e9}
.home-2-page .device-screen small{color:var(--h2-gold)}
.home-2-page .device-glow{background:radial-gradient(circle,rgba(237,189,84,.42),transparent 68%)}
.home-2-page .gold-path path{stroke:var(--h2-gold)}

/* —— Dark scene —— */
.home-2-page .h2-dark.dark-scene{background:#030a10;color:#f7f5ee;min-height:420vh}
.home-2-page .h2-dark.dark-scene.is-dark{background:#02070c}
.home-2-page .scene-statement{font-family:Playfair Display,Georgia,serif;letter-spacing:-.06em;max-width:820px}
.home-2-page .scene-statement span{color:var(--h2-gold)}
.home-2-page .scene-bottom p{color:#9a9ca1}
.home-2-page .scene-number{color:rgba(237,189,84,.18)}
.home-2-page .scene-canvas{opacity:.55}
.home-2-page .h2-dark.is-dark .scene-canvas{opacity:1}

/* —— CTA —— */
.home-2-page .h2-cta.dark-cta{min-height:540px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 74% 46%,rgba(219,157,45,.33),transparent 22%),linear-gradient(135deg,#071722,#030a10);padding:clamp(5rem,10vw,8rem) 0}
.home-2-page .h2-cta:before,.home-2-page .h2-cta:after{content:"";position:absolute;width:43vw;aspect-ratio:1;border:1px solid rgba(242,190,77,.25);border-radius:50%;right:-15vw;top:-21vw;animation:h2Orbit 24s linear infinite}
.home-2-page .h2-cta:after{width:25vw;right:6vw;top:9vw;animation-duration:16s;animation-direction:reverse}
@keyframes h2Orbit{to{transform:rotate(360deg)}}
.home-2-page .h2-cta .cta-inner{position:relative;z-index:1}
.home-2-page .h2-cta h2{font-family:Playfair Display,Georgia,serif;font-size:clamp(3rem,6.5vw,7rem);line-height:.9;letter-spacing:-.06em;margin:1rem 0 2rem;color:var(--h2-ink)}
.home-2-page .h2-cta h2 em{color:var(--h2-gold);font-style:normal}
.home-2-page .h2-cta .light-button{display:none}

/* —— Footer —— */
.h2-footer{background:#030a10;color:#e8e0ce;border-top:1px solid rgba(238,190,84,.28);padding-top:4rem}
.h2-footer .footer-nav{color:#bdb9ae}
.h2-footer .footer-nav a[aria-current=page],.h2-footer .footer-nav a:hover{color:var(--h2-gold)}
.h2-footer .footer-bottom{border-color:rgba(238,190,84,.22);color:#8e918c}
.h2-footer .back-top{color:var(--h2-gold)}

/* —— Modal —— */
.home-2-page .modal{background:rgba(3,10,16,.92)}
.home-2-page .modal-close{color:var(--h2-ink);background:rgba(237,189,84,.15);border:1px solid rgba(237,189,84,.4)}

@media(max-width:1050px){
  .h2-header .nav-links{gap:.55rem;font-size:.52rem}
  .home-2-page .h2-showreel .section-intro,.home-2-page .h2-work .section-intro{gap:1.5rem}
}
@media(max-width:800px){
  .h2-header{background:rgba(5,13,20,.94)}
  .h2-header .nav-links{background:rgba(5,13,20,.97);color:var(--h2-ink)}
  .home-2-page .h2-hero.hero{min-height:100svh;padding-top:8rem;padding-bottom:4rem}
  .home-2-page .h2-hero .hero-content{grid-template-columns:1fr;gap:2.5rem}
  .home-2-page .h2-hero .hero-side{justify-self:start}
  .home-2-page .h2-hero h1{font-size:clamp(3.2rem,14vw,5.5rem)}
  .home-2-page .h2-showreel .section-intro,.home-2-page .h2-work .section-intro{display:block}
  .home-2-page .h2-showreel .section-intro p,.home-2-page .h2-work .section-intro p{margin-top:1.25rem}
  .home-2-page .h2-cta{min-height:480px}
}
@media(max-width:480px){
  .home-2-page .h2-cta h2{font-size:3.2rem}
}
@media(prefers-reduced-motion:reduce){
  .h2-reveal{opacity:1;transform:none;transition:none}
  .home-2-page .h2-cta:before,.home-2-page .h2-cta:after,.home-2-page .floating-dot{animation:none}
  .h2-sunrise-image{transition:none}
  .h2-hero-art canvas{display:none}
  .home-2-page .work-card:hover .work-thumb{transform:none}
}

/* Home embeds full Website Portfolio grid */
.home-2-page .h2-work .home-wp-grid{margin-top:clamp(2rem,4vw,3.2rem)}
.home-2-page .h2-work .work-portfolio-link{margin:.85rem 0 0}
.home-2-page .h2-work .wp-card.h2-reveal{opacity:0;transform:translateY(28px)}
.home-2-page .h2-work .wp-card.h2-reveal.is-visible,.home-2-page .h2-work .wp-card.h2-reveal.reveal.is-visible{opacity:1;transform:none}

/* —— Home: static showreel directly under hero + dawn portfolio button (2026-10-14c) —— */
.home-2-page .h2-showreel.showreel-section{padding-top:clamp(1.5rem,4vw,3.5rem);padding-bottom:clamp(4rem,8vw,7rem)}
.home-2-page .h2-hero.hero{min-height:100svh}
.home-2-page .showreel-stage.is-flow{min-height:0;margin-inline:0;padding-inline:0}
.home-2-page .showreel-stage.is-flow .showreel-pin{position:relative;height:auto;min-height:0;padding:clamp(1.25rem,3vw,2.5rem) 0}
.home-2-page .showreel-stage.is-flow .showreel{width:min(100%,1280px)}
.home-2-page .showreel-stage.is-flow .reel-overlay{opacity:1;transform:none}
.home-2-page .showreel-stage.is-flow .reel-plus--top-left,.home-2-page .showreel-stage.is-flow .reel-plus--top-mid,.home-2-page .showreel-stage.is-flow .reel-plus--top-right{top:0}
.home-2-page .showreel-stage.is-flow .reel-plus--bottom-left,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-mid,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-right{bottom:0}
.home-2-page .showreel-stage.is-flow .reel-plus--top-left,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-left{left:0}
.home-2-page .showreel-stage.is-flow .reel-plus--top-right,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-right{right:0}
.h2-portfolio-cta{display:flex;justify-content:center;margin-top:clamp(1.75rem,4vw,3rem)}
.dawn-button{position:relative;display:inline-flex;align-items:center;gap:.95rem;padding:.7rem 1.5rem .7rem 1.1rem;border-radius:999px;background:radial-gradient(120% 140% at 18% 0%,rgba(255,218,116,.16),transparent 55%),#030b12;border:1px solid rgba(232,185,67,.55);color:#ffda74;text-decoration:none;font:500 .72rem/1.2 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(3,11,18,.9) inset,0 12px 36px rgba(0,0,0,.45),0 0 28px rgba(232,185,67,.10);transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.2,.8,.2,1);overflow:hidden;isolation:isolate}
.dawn-button:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 50% 120%,rgba(232,185,67,.28),transparent 70%);opacity:0;transition:opacity .45s}
.dawn-mark{width:52px;height:33px;flex:none;overflow:visible}
.dawn-rays{transform-origin:32px 28px;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s;opacity:.85}
.dawn-sun{transition:filter .4s;filter:drop-shadow(0 0 4px rgba(255,218,116,.35))}
.dawn-cloud{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dawn-arrow{transition:transform .4s;font-size:.95rem}
.dawn-button:hover,.dawn-button:focus-visible{border-color:#ffda74;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(3,11,18,.9) inset,0 16px 40px rgba(0,0,0,.5),0 0 38px rgba(232,185,67,.28);outline:none}
.dawn-button:hover:before,.dawn-button:focus-visible:before{opacity:1}
.dawn-button:hover .dawn-rays,.dawn-button:focus-visible .dawn-rays{transform:rotate(12deg) scale(1.08);opacity:1}
.dawn-button:hover .dawn-sun{filter:drop-shadow(0 0 9px rgba(255,218,116,.75))}
.dawn-button:hover .dawn-cloud{transform:translateX(3px)}
.dawn-button:hover .dawn-arrow{transform:translateX(4px)}
@media(max-width:480px){.dawn-button{gap:.7rem;padding:.6rem 1.15rem .6rem .9rem;font-size:.64rem;letter-spacing:.12em}.dawn-mark{width:44px;height:28px}}
@media(prefers-reduced-motion:reduce){.dawn-button,.dawn-rays,.dawn-cloud,.dawn-arrow{transition:none}}
.home-2-page .showreel-stage.is-flow .showreel{width:min(100%,1080px);margin-inline:auto}
.home-2-page .showreel-stage.is-flow .reel-plus--top-left,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-left{left:max(0px,calc(50% - 540px - .6rem))}
.home-2-page .showreel-stage.is-flow .reel-plus--top-right,.home-2-page .showreel-stage.is-flow .reel-plus--bottom-right{right:max(0px,calc(50% - 540px - .6rem))}
.dawn-mark{width:58px;height:38px}
@media(max-width:480px){.dawn-mark{width:48px;height:31px}}

/* Flow-mode reel (2026-10-14e): animation driven inline by main.js as the video enters, no sticky runway */
.home-2-page .showreel-stage.is-flow{perspective:none}
.home-2-page .showreel-stage.is-flow .reel-plus{opacity:.35;transition:opacity .4s}
.home-2-page .showreel-stage.is-flow.is-settled .reel-plus{opacity:1}