/* ===== Motion & graphics layer. Everything here is decorative and disabled for prefers-reduced-motion. ===== */
.hero{min-height:min(92vh,820px)}
.hero-bg{will-change:transform;transform:scale(1.08)}
.hero-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:2;will-change:transform}
.hero-flash{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 10%,rgba(220,235,255,.55),rgba(160,190,255,.12) 45%,transparent 70%);opacity:0;pointer-events:none}
.hero-flash.on{animation:flash 900ms ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:1}12%{opacity:.15}20%{opacity:.8}100%{opacity:0}}

/* Neon sweep across hero */
.hero-sweep{position:absolute;inset:-20% -10%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(158,240,26,.0) 44%,rgba(158,240,26,.22) 49%,rgba(200,255,120,.35) 50%,rgba(158,240,26,.22) 51%,transparent 56%);transform:translateX(-80%);mix-blend-mode:screen}
.js .hero-sweep{animation:sweep 2.2s cubic-bezier(.6,.1,.2,1) 1.4s 1 both}
@keyframes sweep{to{transform:translateX(80%)}}

/* Self-drawing house mark */
.hero-mark{width:84px;height:63px;margin-bottom:18px;filter:drop-shadow(0 0 10px rgba(158,240,26,.55))}
.hero-mark .draw{fill:none;stroke:var(--lime);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero-mark .win rect{fill:var(--lime)}
.js .hero-mark .draw{stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.65,0,.35,1) forwards}
.js .hero-mark .d1{animation-delay:.15s}.js .hero-mark .d2{animation-delay:.75s;animation-duration:.4s}.js .hero-mark .d3{animation-delay:.9s}
.js .hero-mark .win rect{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .35s ease-out forwards}
.js .hero-mark .win rect:nth-child(1){animation-delay:1.7s}.js .hero-mark .win rect:nth-child(2){animation-delay:1.8s}.js .hero-mark .win rect:nth-child(3){animation-delay:1.9s}.js .hero-mark .win rect:nth-child(4){animation-delay:2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}

/* Headline slam + metallic shine */
.slam span{display:block}
.slam .l1{background:linear-gradient(100deg,#c9d0d6 0%,#ffffff 20%,#9aa4ab 38%,#f4f6f8 46%,#ffffff 50%,#aab3ba 60%,#e9edf0 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.slam .l2{background:linear-gradient(100deg,#7fd000 0%,#b8ff3d 25%,#7cc400 40%,#f2ffd8 49%,#b8ff3d 55%,#86d800 70%,#c4ff5a 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(158,240,26,.35))}
.hero h1.slam{text-shadow:none}
.js .slam .l1,.js .slam .l2{opacity:0;animation:slam .6s cubic-bezier(.2,1.4,.4,1) forwards,shine 1.6s ease-in-out forwards}
.js .slam .l1{animation-delay:.35s,1.0s}
.js .slam .l2{animation-delay:.6s,1.25s}
@keyframes slam{0%{opacity:0;transform:scale(2.4) translateY(-10px);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
.js .slam.reshine .l1,.js .slam.reshine .l2{animation:shine 1.4s ease-in-out forwards;opacity:1}
.js .slam .l2{animation-name:slam,shine}
.js .eyebrow{opacity:0;animation:fadeUp .6s ease-out .2s forwards}
.js .reveal-hero{opacity:0;animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) forwards}
.js .hero .lead{animation-delay:1.05s}.js .hero-ctas{animation-delay:1.25s}.js .hero-badges{animation-delay:1.45s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Pulsing call buttons */
.pulse{position:relative}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(158,240,26,.55);animation:ring 2.2s ease-out infinite}
.pulse::after{animation-delay:1.1s}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(158,240,26,.55)}100%{box-shadow:0 0 0 18px rgba(158,240,26,0)}}
.btn-lime.pulse{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 6px 24px rgba(158,240,26,.25)}50%{box-shadow:0 6px 40px rgba(158,240,26,.6)}}

/* 31 years laurel badge */
.years-badge{position:absolute;z-index:3;right:clamp(16px,6vw,96px);top:clamp(90px,14vh,150px);width:190px;height:190px;display:grid;place-items:center}
.badge-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(232,185,35,.25))}
.badge-text{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-8px;font-family:var(--display);text-transform:uppercase;line-height:.85}
.badge-num{font-weight:800;font-size:4.2rem;background:linear-gradient(180deg,#fff3b8,#e8b923 55%,#a8780a);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.badge-years{font-weight:700;font-size:1.25rem;letter-spacing:.18em;color:#f3d36b;margin-top:4px}
.badge-ribbon{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(180deg,#f2cf5b,#c99a17);color:#1a1300;font:800 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.06em;padding:.45rem .8rem;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.badge-ribbon::before,.badge-ribbon::after{content:"";position:absolute;top:5px;width:12px;height:100%;background:#9c7410;z-index:-1}
.badge-ribbon::before{left:-8px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.badge-ribbon::after{right:-8px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
.js .years-badge{opacity:0;transform:scale(.4) rotate(-25deg);animation:badgeIn .9s cubic-bezier(.2,1.5,.4,1) 1.6s forwards}
.js .years-badge .leaf{opacity:0;transform-box:fill-box;transform-origin:center;animation:leaf .35s ease-out forwards;animation-delay:calc(1.9s + var(--i) * 70ms)}
.years-badge:hover .badge-svg{animation:spinHalo 1.2s ease-in-out}
@keyframes badgeIn{to{opacity:1;transform:none}}
@keyframes leaf{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes spinHalo{50%{transform:rotate(8deg) scale(1.04)}}
@media (max-width:760px){
  .years-badge{width:132px;height:132px;top:84px;right:14px}
  .badge-num{font-size:2.9rem}.badge-years{font-size:.9rem}
  .badge-ribbon{font-size:.6rem;bottom:12px;padding:.35rem .55rem}
}
@media (min-width:761px) and (max-width:1100px){.years-badge{top:auto;bottom:150px;width:160px;height:160px}.badge-num{font-size:3.4rem}}

/* Hero shingle foreground layer */
.hero-shingles{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:clamp(60px,9vw,130px);z-index:2;will-change:transform}
.hero-shingles .peak-line{stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(158,240,26,.8))}
.js .hero-shingles .peak-line{stroke-dashoffset:1;animation:draw 2.4s ease-in-out 1s forwards}
.hero{padding-bottom:clamp(90px,11vw,150px)}

/* Roof-peak section dividers */
.peak-divider{position:relative;height:44px;margin-bottom:-1px;background:transparent;z-index:1}
.peak-divider svg{display:block;width:100%;height:100%}
.pd-fill{fill:var(--bg-2)}
.pd-line{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(158,240,26,.7))}
.js .peak-divider .pd-line{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.js .peak-divider.in .pd-line{stroke-dashoffset:0}
.peak-divider + .services .pd-fill{fill:var(--bg-2)}
.why + .peak-divider .pd-fill{fill:var(--bg-2)}
.services + .peak-divider .pd-fill,.area + .peak-divider .pd-fill{fill:var(--bg)}
.services + .peak-divider{background:var(--bg)}
.area + .peak-divider{background:transparent}
.estimate + .peak-divider{background:var(--bg)}
.estimate + .peak-divider .pd-fill{fill:var(--bg-2)}
.why + .peak-divider{background:var(--bg)}
.how{background:var(--bg)}

/* Scroll reveals */
.js .reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .why-card.reveal{transform:translateY(40px) rotateX(18deg);transform-origin:top}

/* Shingle field that lays tile by tile */
.services{overflow:hidden}
.services::before{display:none}
.shingle-field{position:absolute;left:0;right:0;top:0;height:300px;display:grid;grid-template-columns:repeat(var(--cols,30),1fr);grid-auto-rows:26px;gap:3px;padding:3px;opacity:.35;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%);pointer-events:none}
.shingle-field i{display:block;background:linear-gradient(180deg,#2a3034,#1d2124);border-radius:0 0 3px 3px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.shingle-field i.odd{transform:translateX(50%)}
.shingle-field i.hl{background:linear-gradient(180deg,rgba(158,240,26,.45),rgba(158,240,26,.12))}
.js .shingle-field i{opacity:0;transform:translateY(-30px) rotate(-6deg)}
.js .shingle-field i.odd{transform:translate(50%,-30px) rotate(-6deg)}
.shingle-field.in i{animation:lay .45s cubic-bezier(.2,1.3,.4,1) forwards;animation-delay:var(--d)}
.shingle-field.in i.odd{animation-name:layOdd}
@keyframes lay{to{opacity:1;transform:none}}
@keyframes layOdd{to{opacity:1;transform:translateX(50%)}}

/* 3D flip service cards */
.svc-grid{perspective:1200px}
.svc-card.flip{padding:0;background:none;border:0;overflow:visible;min-height:250px;cursor:pointer;outline:none}
.svc-card.flip::after{display:none}
.svc-card.flip:hover{transform:none}
.flip-inner{position:relative;height:100%;min-height:250px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1);transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.flip-front,.flip-back{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius);border:1px solid var(--line);padding:26px 22px;display:flex;flex-direction:column}
.flip-front{background:radial-gradient(120% 90% at 50% 0%,#2a3136,var(--surface) 60%);align-items:flex-start}
.flip-front::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--lime);border-radius:var(--radius) var(--radius) 0 0;transform:scaleX(.2);transform-origin:left;transition:transform .4s ease}
.flip-back{transform:rotateY(180deg);background:linear-gradient(160deg,#1f2a12,#151a10 70%);border-color:rgba(158,240,26,.5);justify-content:center}
.flip-back p{color:#dfe6d3;margin-top:10px}
.flip-back h3{color:var(--lime)}
.back-link{margin-top:16px;color:var(--lime);font-weight:700;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.back-link::after{content:"→";transition:transform .2s}
.back-link:hover::after{transform:translateX(4px)}
.flip-hint{margin-top:auto;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.svc-card.flipped .flip-inner{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){
  .svc-card.flip:hover .flip-inner,.svc-card.flip:focus-visible .flip-inner{transform:rotateY(180deg)}
  .flip-hint{visibility:hidden}
  .svc-card.flip:hover .flip-front::after{transform:scaleX(1)}
}
.svc-card.flip:focus-visible .flip-back{outline:3px solid var(--lime);outline-offset:3px}
.flip-front h3{margin-top:18px;color:#fff;font-size:1.7rem}

/* Animated icons */
.anim-ico{width:76px;height:76px;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(158,240,26,.35))}
.anim-ico .shingle,.anim-ico .flake{fill:var(--lime);stroke:none}
.ico-hammer .hammer{fill:#d9dee2;stroke:none;transform-origin:46px 28px;animation:hammer 1.4s ease-in-out infinite}
.ico-hammer .s1{animation:nailed 1.4s steps(1) infinite}
@keyframes hammer{0%,100%{transform:rotate(-35deg)}45%{transform:rotate(-35deg)}60%{transform:rotate(12deg)}70%{transform:rotate(0deg)}}
@keyframes nailed{0%,58%{opacity:.4}60%,100%{opacity:1}}
.ico-tear .flake{animation:flake 2.4s ease-in infinite}
.ico-tear .f2{animation-delay:.4s}.ico-tear .f3{animation-delay:.8s}
.ico-tear .old path:first-child{stroke:#6f7a81}
.ico-tear .arrow{stroke:#d9dee2;animation:nudge 1.2s ease-in-out infinite}
@keyframes flake{0%,20%{transform:none;opacity:1}70%{transform:translate(14px,-18px) rotate(35deg);opacity:0}100%{opacity:0}}
@keyframes nudge{50%{transform:translate(3px,-3px)}}
.ico-layers .ly{animation:layer 2.4s cubic-bezier(.3,1.4,.5,1) infinite}
.ico-layers .ly1{stroke:#5d676d;animation:none}.ico-layers .ly2{stroke:#a7b0b6;animation-delay:.2s}.ico-layers .ly3{animation-delay:.45s}
@keyframes layer{0%{transform:translateY(-16px);opacity:0}25%,80%{transform:none;opacity:1}100%{opacity:0}}
.ico-metal .roof{fill:rgba(158,240,26,.08)}
.ico-metal .seams path{stroke-width:2;stroke:#cfd6db}
.ico-metal .shine{fill:rgba(255,255,255,.55);stroke:none;transform:skewX(-20deg);animation:metalShine 2.6s ease-in-out infinite;clip-path:inset(0)}
@keyframes metalShine{0%{transform:translateX(0) skewX(-20deg)}60%,100%{transform:translateX(100px) skewX(-20deg)}}
.ico-metal{overflow:hidden}

/* Timeline that draws on scroll */
.timeline{position:relative}
.tl-track{position:absolute;background:var(--line);border-radius:3px}
.tl-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--lime),#d4ff8a);box-shadow:0 0 12px rgba(158,240,26,.7);transform-origin:left;transform:scaleX(var(--p,1))}
@media (min-width:860px){.tl-track{left:calc(16.66% - 0px);right:16.66%;top:62px;height:4px}.steps li{text-align:center}.step-n{margin:0 auto;position:relative;z-index:1}}
@media (max-width:859px){.tl-track{left:49px;top:60px;bottom:60px;width:4px}.tl-fill{transform-origin:top;transform:scaleY(var(--p,1));background:linear-gradient(180deg,var(--lime),#d4ff8a)}.steps li{padding-left:80px;min-height:110px}.step-n{position:absolute;left:22px;top:26px;z-index:1}.steps h3{margin-top:4px}}
.steps li{background:transparent;border:0}
.step-n{box-shadow:0 0 0 6px var(--bg),0 0 0 8px rgba(158,240,26,.35);transition:transform .4s cubic-bezier(.2,1.6,.4,1),box-shadow .4s}
.js .steps li.in .step-n{animation:stepPop .6s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--rd,0s)}
@keyframes stepPop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* Language flip */
.lang{position:relative}
.lang button{transition:background .3s,color .3s,transform .4s}
.lang button[aria-pressed="true"]{animation:langPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes langPop{0%{transform:rotateX(180deg)}100%{transform:none}}
.lang-flip-out main,.lang-flip-out .site-footer{transform:perspective(1400px) rotateX(8deg) translateY(10px);opacity:.15;transition:transform .22s ease-in,opacity .22s ease-in}
.lang-flip-in main,.lang-flip-in .site-footer{transform:none;opacity:1;transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .35s ease-out}

/* Cursor glow (desktop only) */
.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:70;background:radial-gradient(circle,rgba(158,240,26,.16) 0%,rgba(158,240,26,.06) 35%,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform;display:none}
.cursor-glow::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px 4px rgba(158,240,26,.7)}
@media (hover:hover) and (pointer:fine){.cursor-glow{display:block}.cursor-glow.on{opacity:1}}

/* Area band glow */
.area{position:relative;overflow:hidden}
.area::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(158,240,26,.18) 50%,transparent 70%);transform:translateX(-100%);animation:bandSweep 6s ease-in-out infinite;pointer-events:none}
@keyframes bandSweep{0%,40%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.area-ico{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}

/* Reduced motion: final states, no animation */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .reveal-hero,.js .eyebrow,.js .years-badge,.js .years-badge .leaf,.js .slam .l1,.js .slam .l2,.js .shingle-field i,.js .hero-mark .win rect{opacity:1!important;transform:none!important;filter:none}
  .js .shingle-field i.odd{transform:translateX(50%)!important}
  .js .hero-mark .draw,.js .hero-shingles .peak-line,.js .peak-divider .pd-line{stroke-dashoffset:0!important}
  .slam .l1,.slam .l2{background-position:0 0!important}
  .hero-sweep,.hero-flash,.hero-rain,.cursor-glow,.area::after{display:none!important}
  .hero-bg,.hero-inner,.hero-shingles{transform:none!important}
  .tl-fill{transform:none!important}
}
.hero-bg picture{display:block;width:100%;height:100%}
@media (hover:hover) and (pointer:fine){
  .svc-card.flip:hover .flip-inner{transform:rotateY(calc(180deg + var(--ry,0deg))) rotateX(var(--rx,0deg))}
}
@media (max-width:760px){.hero{padding-top:170px}.hero-mark{width:60px;height:45px;margin-bottom:12px}.hero h1{margin-top:16px}}
@media (min-width:900px){.hero h1{max-width:19ch}}
@media (max-width:760px){.years-badge{right:26px}.hero h1{font-size:clamp(2.2rem,9.6vw,2.7rem);max-width:none}}

/* ===== Real photos on card backs ===== */
.flip-back.has-photo{background-size:cover;background-position:center;justify-content:flex-end}
.flip-back.bg-newbuild{background-image:linear-gradient(180deg,rgba(12,16,8,.35),rgba(12,16,8,.94) 62%),url(../images/work/new-build-underlayment-sm.jpg);background-image:linear-gradient(180deg,rgba(12,16,8,.35),rgba(12,16,8,.94) 62%),image-set(url(../images/work/new-build-underlayment-sm.webp) type("image/webp"),url(../images/work/new-build-underlayment-sm.jpg) type("image/jpeg"));background-position:center 30%}
.flip-back.bg-metal{background-image:linear-gradient(180deg,rgba(12,16,8,.3),rgba(12,16,8,.94) 62%),url(../images/work/black-metal-roof-sm.jpg);background-image:linear-gradient(180deg,rgba(12,16,8,.3),rgba(12,16,8,.94) 62%),image-set(url(../images/work/black-metal-roof-sm.webp) type("image/webp"),url(../images/work/black-metal-roof-sm.jpg) type("image/jpeg"));background-position:50% 20%}

/* ===== Recent Work gallery ===== */
.work{position:relative;overflow:hidden;background:radial-gradient(900px 400px at 85% 0%,rgba(158,240,26,.08),transparent 60%),var(--bg)}
.work-lead{color:var(--muted);margin-top:12px;max-width:60ch}
.work-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,38vw,210px);grid-auto-flow:row dense}
.work-feature,.work-wide,.work-big{grid-column:span 2}
.work-tall{grid-row:span 2}
.work-feature{grid-row:span 1}
@media (min-width:600px) and (max-width:899px){.work-feature{grid-row:span 2}}
@media (min-width:900px){.work-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,17vw,240px);gap:18px}.work-feature{grid-column:span 3;grid-row:span 2}.work-big{grid-column:span 2;grid-row:span 2}}
.work-item{perspective:900px;min-width:0}
.work-item>img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.work-btn{all:unset;box-sizing:border-box;cursor:zoom-in;position:relative;display:block;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0c0e10;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .25s ease,box-shadow .35s ease,border-color .35s ease;will-change:transform}
.work-btn picture,.work-btn img{display:block;width:100%;height:100%}
.work-btn img{object-fit:cover;transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s ease;filter:saturate(.95) contrast(1.02)}
.work-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(158,240,26,.18),transparent 45%),linear-gradient(180deg,transparent 45%,rgba(10,12,14,.88));pointer-events:none;transition:opacity .4s}
.work-cap{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;color:#fff;font:700 .95rem/1.25 var(--body);text-shadow:0 1px 8px rgba(0,0,0,.6);padding-left:12px;border-left:3px solid var(--lime);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.work-feature .work-cap,.work-big .work-cap{font-size:1.15rem}
.work-zoom{position:absolute;z-index:2;top:12px;right:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(18,20,22,.75);border:1px solid rgba(158,240,26,.5);opacity:0;transform:scale(.6) rotate(-45deg);transition:all .4s cubic-bezier(.2,1.5,.4,1)}
.work-zoom svg{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round}
.work-corner{position:absolute;z-index:2;inset:10px;pointer-events:none;border-radius:10px;background:linear-gradient(var(--lime),var(--lime)) top left/22px 3px,linear-gradient(var(--lime),var(--lime)) top left/3px 22px,linear-gradient(var(--lime),var(--lime)) bottom right/22px 3px,linear-gradient(var(--lime),var(--lime)) bottom right/3px 22px;background-repeat:no-repeat;opacity:0;transform:scale(1.06);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.work-btn:hover,.work-btn:focus-visible{border-color:rgba(158,240,26,.7);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(158,240,26,.35),0 0 32px rgba(158,240,26,.18)}
.work-btn:hover img,.work-btn:focus-visible img{transform:scale(1.1)}
.work-btn:hover .work-zoom,.work-btn:focus-visible .work-zoom{opacity:1;transform:none}
.work-btn:hover .work-corner,.work-btn:focus-visible .work-corner{opacity:1;transform:none}
.work-btn:hover .work-cap{transform:translateY(-4px)}
.work-btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media (hover:none){.work-zoom{opacity:.9;transform:none;width:34px;height:34px}}
/* staggered scroll-in: wipe up from a lime bar */
.js .work-item.reveal{opacity:1;transform:none;transition:none}
.js .work-item.reveal .work-btn{visibility:hidden}
.js .work-item.reveal.in .work-btn{visibility:visible;animation:workIn 1s cubic-bezier(.7,0,.2,1) calc(var(--wi) * 120ms) backwards}
@keyframes workIn{0%{clip-path:inset(100% 0 0 0 round 14px);transform:translateY(40px) scale(.92) rotate(-1.5deg)}60%{transform:translateY(-6px) scale(1.01)}100%{clip-path:inset(0 0 0 0 round 14px);transform:none}}
.js .work-item.reveal.in .work-btn img{animation:workZoom 1.6s cubic-bezier(.2,.8,.2,1) calc(var(--wi) * 120ms) both}
.work-item{position:relative}
.js .work-item.reveal::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:var(--lime);box-shadow:0 0 14px var(--lime);transform:scaleX(0);transform-origin:left;pointer-events:none}
.js .work-item.reveal.in::after{animation:workBar 1.1s cubic-bezier(.7,0,.2,1) calc(var(--wi) * 120ms) both}
@keyframes workBar{0%{transform:scaleX(0);bottom:0;opacity:1}45%{transform:scaleX(1);bottom:0;opacity:1}100%{transform:scaleX(1);bottom:100%;opacity:0}}
@keyframes workZoom{from{transform:scale(1.35)}to{transform:scale(1.02)}}

/* ===== Lightbox ===== */
html.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,9,10,.0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s}
.lightbox.is-open{background:rgba(8,9,10,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center;padding:64px 16px 24px}
.lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;transform-origin:var(--ox,50%) var(--oy,50%);opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.2,.4,1)}
.lightbox.is-open .lb-fig{opacity:1;transform:none}
.lb-fig picture{display:block;min-height:0}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;border-radius:12px;border:1px solid rgba(158,240,26,.45);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(158,240,26,.15)}
.lb-fig figcaption{display:flex;gap:16px;justify-content:space-between;align-items:baseline;width:100%;margin-top:12px;color:#fff;font-weight:600}
.lb-count{color:var(--lime);font-family:var(--display);font-weight:800;letter-spacing:.08em;white-space:nowrap}
.lb-btn{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(158,240,26,.55);background:rgba(18,20,22,.8);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.lb-btn svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-btn:hover,.lb-btn:focus-visible{background:var(--lime);transform:scale(1.08)}
.lb-btn:hover svg,.lb-btn:focus-visible svg{stroke:var(--lime-ink)}
.lb-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-close{top:12px;right:12px}
.lb-prev-btn,.lb-next-btn{top:50%;margin-top:-24px}
.lb-prev-btn{left:12px}.lb-next-btn{right:12px}
@media (max-width:700px){.lb-prev-btn,.lb-next-btn{top:auto;bottom:14px;margin:0}.lb-stage{padding:64px 12px 84px}.lb-img{max-height:calc(100dvh - 190px)}}
.lightbox.lb-next .lb-img{animation:lbIn .45s cubic-bezier(.2,.9,.3,1)}
.lightbox.lb-prev .lb-img{animation:lbInPrev .45s cubic-bezier(.2,.9,.3,1)}
@keyframes lbIn{from{opacity:0;transform:translateX(60px) rotateY(-12deg)}to{opacity:1;transform:none}}
@keyframes lbInPrev{from{opacity:0;transform:translateX(-60px) rotateY(12deg)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .work-item.reveal .work-btn,.js .work-item.reveal.in .work-btn{visibility:visible;animation:none}
  .js .work-item.reveal.in .work-btn img,.lightbox .lb-img{animation:none}
  .js .work-item.reveal::after{display:none}
  .work-btn img,.work-btn:hover img{transform:none;transition:none}
  .lb-fig{transition:opacity .2s;transform:none}
}
.nav a,.header-call{white-space:nowrap}
@media (max-width:1399px){.nav a[href="#area"]{display:none}}
@media (min-width:1040px) and (max-width:1199px){.nav{gap:16px}.nav a{font-size:.9rem}}
@media (max-width:899px){.work-item:not(.work-feature):not(.work-big) .work-cap{font-size:.84rem;left:10px;right:10px;bottom:10px;padding-left:9px}}

/* Trailer spot in contact */
.trailer-spot{margin:28px 0 0;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.trailer-spot img{display:block;width:100%;height:auto;aspect-ratio:800/470;object-fit:cover;object-position:50% 45%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.trailer-spot:hover img{transform:scale(1.04)}
.trailer-spot figcaption{position:absolute;left:12px;bottom:12px;right:12px;font:700 1rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.05em;color:#fff;padding:.45rem .7rem;background:rgba(12,14,10,.78);border-left:3px solid var(--lime);border-radius:6px;width:fit-content}
@media (prefers-reduced-motion:reduce){.trailer-spot img{transition:none}.trailer-spot:hover img{transform:none}}

/* Show more for long galleries */
@media (max-width:899px){.js .work-grid:not(.expanded) .work-more-m{display:none}.work-grid .work-m-normal{grid-column:auto;grid-row:auto}}
@media (min-width:900px){.js .work-grid:not(.expanded) .work-more-d{display:none}}
.work-more{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;border:2px solid var(--lime);background:transparent;color:var(--lime);font:700 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.work-more[hidden]{display:none}
.work-more svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.work-more:hover,.work-more:focus-visible{background:var(--lime);color:var(--lime-ink)}
.work-more:hover svg{transform:translateY(3px)}
.work-more-count{opacity:.75}