:root{
  --hazelnut:#C4956A;
  --hazelnut-light:#D4A97E;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Work Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
html, body{max-width:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  background:#000;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img, video, iframe{max-width:100%;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:transparent;}
body:hover::-webkit-scrollbar-thumb{background:#333;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}
img{display:block;max-width:100%;}

.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--hazelnut);margin:0 0 1.25rem 0;}
.divider{width:24px;height:1px;background:currentColor;}

/* ---------- NAV ---------- */
nav.topnav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  background:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
}
nav.topnav.scrolled{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.brand{font-size:14px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transition:color .3s ease;}
.brand:hover{color:var(--hazelnut);}
.desktop-links{display:flex; gap:40px; list-style:none; margin:0; padding:0;}
.desktop-links a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:color .3s ease;}
.desktop-links a:hover{color:var(--hazelnut);}
.desktop-links a.active{color:var(--hazelnut);}
@media (max-width:767px){ .desktop-links{display:none;} }

.burger{display:none; flex-direction:column; justify-content:center; align-items:center; width:44px;height:44px; gap:6px; margin:-6px;}
.burger span{display:block; width:24px; height:1px; background:#fff; transition:all .3s ease;}
.burger span.mid{width:16px;}
@media (max-width:767px){ .burger{display:flex;} }

.mobile-drawer{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; justify-content:center; padding:0 40px;
  background:rgba(0,0,0,.97); backdrop-filter:blur(16px);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
@media (min-width:768px){ .mobile-drawer{display:none;} }
.mobile-drawer.open{opacity:1; pointer-events:auto;}
.mobile-drawer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:32px;}
.mobile-drawer a{font-family:var(--font-display); font-weight:300; font-size:2.4rem; transition:color .3s ease;}
.mobile-drawer a.active{color:var(--hazelnut);}
.mobile-drawer a:hover{color:var(--hazelnut);}
.mobile-drawer .foot{margin-top:64px; padding-top:40px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.3); font-size:12px; letter-spacing:.05em;}

/* ---------- FOOTER ---------- */
footer.site-footer{
  border-top:1px solid rgba(255,255,255,.1);
  padding:32px 80px;
  display:flex; align-items:center; justify-content:space-between;
  background:#000;
}
footer.site-footer span, footer.site-footer a{color:rgba(255,255,255,.2); font-size:12px; letter-spacing:.05em;}
footer.site-footer a{transition:color .3s ease;}
footer.site-footer a:hover{color:var(--hazelnut);}
@media (max-width:767px){ footer.site-footer{padding:32px 24px; flex-wrap:wrap; gap:8px;} }

/* ---------- HERO ---------- */
.hero{position:relative; height:100vh; overflow:hidden;}
.hero .bgwrap{position:absolute; inset:0;}
.hero img{width:100%; height:100%; object-fit:cover; opacity:.5;}
.hero .grad{position:absolute; inset:0; background:linear-gradient(to top, #000 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.2) 100%);}
.hero .content{position:relative; z-index:10; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 40px 80px;}
@media (min-width:768px){ .hero .content{padding:0 80px 96px;} }
.hero .inner{max-width:56rem;}
.hero h1{font-family:var(--font-display); font-weight:300; margin:0 0 2rem 0; color:#fff; font-size:clamp(3.5rem,10vw,8rem); line-height:.92;}
.hero p.sub{color:rgba(255,255,255,.6); font-weight:300; max-width:28rem; line-height:1.7; margin:0 0 3rem 0; font-size:1rem;}
.hero .cta{display:inline-flex; align-items:center; gap:16px; transition:color .3s ease;}
.hero .cta:hover{color:var(--hazelnut);}
.hero .cta span.label{font-size:12px; letter-spacing:.18em; text-transform:uppercase;}
.hero .cta span.line{width:48px; height:1px; background:#fff; transition:all .5s ease;}
.hero .cta:hover span.line{background:var(--hazelnut); width:80px;}
.hero .bottomline{position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, rgba(196,149,106,.3), transparent);}

/* ---------- SECTIONS ---------- */
section, .page{width:100%;}
.section-pad{padding:96px 32px;}
@media (min-width:768px){ .section-pad{padding:96px 64px;} }

.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px;}
h2.title{font-family:var(--font-display); font-weight:300; font-style:italic; color:#fff; margin:0; font-size:2.5rem;}
@media (min-width:768px){ h2.title{font-size:3rem;} }
.viewall{display:none; align-items:center; gap:12px; color:rgba(255,255,255,.4); font-size:12px; letter-spacing:.15em; text-transform:uppercase; transition:color .3s ease;}
.viewall:hover{color:var(--hazelnut);}
@media (min-width:768px){ .viewall{display:flex;} }

/* ---------- WORK GRID ---------- */
.work-grid{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.1);}
@media (min-width:768px){ .work-grid{grid-template-columns:1fr 1fr;} }
.work-card{position:relative; background:#000; overflow:hidden; text-align:left; aspect-ratio:16/9; display:block; width:100%;}
.work-card img{width:100%; height:100%; object-fit:cover; transition:all .7s ease; opacity:.4; transform:scale(1);}
.work-card:hover img{opacity:.7; transform:scale(1.05);}
.work-card .overlay{position:absolute; inset:0; background:rgba(0,0,0,.5); transition:background .5s ease;}
.work-card:hover .overlay{background:rgba(0,0,0,.2);}
.work-card .info{position:absolute; inset:0; padding:28px; display:flex; flex-direction:column; justify-content:space-between;}
.work-card .row-top{display:flex; align-items:center; justify-content:space-between;}
.work-card .cat{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--hazelnut);}
.work-card .year{font-size:10px; letter-spacing:.05em; color:rgba(255,255,255,.4);}
.work-card h3{font-family:var(--font-display); font-weight:300; color:#fff; font-size:1.9rem; margin:0 0 .5rem 0;}
.work-card .meta{display:flex; align-items:center; gap:12px;}
.work-card .dur{color:rgba(255,255,255,.4); font-size:12px;}
.work-card .hline{height:1px; background:var(--hazelnut); width:0; transition:all .5s ease;}
.work-card:hover .hline{width:32px;}
.work-card .viewlabel{color:var(--hazelnut); font-size:10px; letter-spacing:.15em; text-transform:uppercase; opacity:0; transition:opacity .3s ease;}
.work-card:hover .viewlabel{opacity:1;}

/* ---------- ABOUT (home teaser) ---------- */
.about-teaser{border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:1fr;}
@media (min-width:768px){ .about-teaser{grid-template-columns:1fr 1fr;} }
.about-teaser .imgcol{position:relative; overflow:hidden; min-height:480px;}
.about-teaser .imgcol img{width:100%; height:100%; object-fit:cover; opacity:.55;}
.about-teaser .imgcol .fade{position:absolute; inset:0; background:linear-gradient(to right, transparent, rgba(0,0,0,.7));}
.about-teaser .textcol{padding:80px 40px; display:flex; flex-direction:column; justify-content:center;}
@media (min-width:768px){ .about-teaser .textcol{padding:80px 64px;} }
.about-teaser h2{font-family:var(--font-display); font-weight:300; font-style:italic; color:#fff; font-size:1.9rem; margin:0 0 2rem 0; line-height:1.3;}
@media (min-width:768px){ .about-teaser h2{font-size:2.3rem;} }
.about-teaser p.body{color:rgba(255,255,255,.6); font-weight:300; line-height:1.85; font-size:1rem; margin:0 0 2.5rem 0;}
.linkbtn{display:inline-flex; align-items:center; gap:12px; color:rgba(255,255,255,.4); font-size:12px; letter-spacing:.15em; text-transform:uppercase; transition:color .3s ease;}
.linkbtn:hover{color:var(--hazelnut);}

/* ---------- CONTACT CTA ---------- */
.contact-cta{border-top:1px solid rgba(255,255,255,.1); padding:112px 40px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:40px;}
@media (min-width:768px){ .contact-cta{padding:112px 80px; flex-direction:row; align-items:flex-end;} }
.contact-cta h2{font-family:var(--font-display); font-weight:300; color:#fff; font-size:2.5rem; line-height:1.2; margin:0;}
@media (min-width:768px){ .contact-cta h2{font-size:3.6rem;} }
.contact-cta h2 em{font-style:italic;}
.contact-cta p{color:rgba(255,255,255,.4); font-weight:300; margin-top:1.25rem; font-size:14px; max-width:24rem;}
.bigbtn{flex-shrink:0; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#000; background:#fff; padding:20px 40px; transition:background .3s ease; display:inline-block;}
.bigbtn:hover{background:var(--hazelnut);}

/* ---------- WORK GRID PAGE ---------- */
.page-pad{padding:96px 32px 80px; min-height:100vh;}
@media (min-width:768px){ .page-pad{padding:96px 64px 80px;} }

/* ---------- WORK DETAIL ---------- */
.detail-hero{position:relative; width:100%; height:70vh; overflow:hidden;}
.detail-hero img{width:100%; height:100%; object-fit:cover; opacity:.8;}
.detail-hero .grad{position:absolute; inset:0; background:linear-gradient(to top, #000 0%, transparent 45%, rgba(0,0,0,.6) 100%);}
.backbtn{position:absolute; top:96px; left:32px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.6); transition:color .3s ease;}
@media (min-width:768px){ .backbtn{left:64px;} }
.backbtn:hover{color:var(--hazelnut);}
.backbtn .line{width:32px; height:1px; background:rgba(255,255,255,.4); transition:all .4s ease;}
.backbtn:hover .line{background:var(--hazelnut); width:20px;}
.backbtn .lbl{font-size:10px; letter-spacing:.18em; text-transform:uppercase;}
.detail-hero .titlewrap{position:absolute; bottom:0; left:0; right:0; padding:0 32px 40px;}
@media (min-width:768px){ .detail-hero .titlewrap{padding:0 64px 40px;} }
.detail-hero .catyear{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--hazelnut); display:block; margin-bottom:.75rem;}
.detail-hero h1{font-family:var(--font-display); font-weight:300; color:#fff; margin:0; font-size:3rem;}
@media (min-width:768px){ .detail-hero h1{font-size:4.5rem;} }

.detail-body{padding:64px 32px; display:grid; grid-template-columns:1fr; gap:64px;}
@media (min-width:768px){ .detail-body{padding:64px; grid-template-columns:2fr 1fr; gap:96px;} }
.detail-body .desc{color:rgba(255,255,255,.75); font-size:1.125rem; font-weight:300; line-height:1.8; margin:0 0 2rem 0;}
.runtime{display:flex; align-items:center; gap:16px;}
.runtime span.lbl{color:rgba(255,255,255,.3); font-size:12px; letter-spacing:.05em;}
.runtime .line{width:32px; height:1px; background:rgba(255,255,255,.2);}
.runtime span.val{color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.05em;}

.credit-company{margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1);}
.credit-company .lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--hazelnut); margin:0 0 4px 0;}
.credit-company .val{color:#fff; font-size:1rem; font-weight:300; margin:0;}
.credits-lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--hazelnut); margin:0 0 1rem 0;}
.credit-row{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.credit-row:last-child{border-bottom:none;}
.credit-row .role{color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.15em; text-transform:uppercase; margin:0 0 4px 0;}
.credit-row .name{color:#fff; font-size:14px; font-weight:300; margin:0;}

.videos-wrap{padding:0 32px 64px; border-top:1px solid rgba(255,255,255,.1); padding-top:48px;}
@media (min-width:768px){ .videos-wrap{padding-left:64px; padding-right:64px;} }
.videos-lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--hazelnut); margin:0 0 2rem 0;}
.video-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:768px){ .video-grid.cols-2{grid-template-columns:1fr 1fr;} }
@media (min-width:768px){ .video-grid.cols-3{grid-template-columns:1fr 1fr 1fr;} }
.video-grid.single{max-width:640px;}
.video-item{display:flex; flex-direction:column; gap:8px; width:100%;}
.video-frame{position:relative; width:100%; background:rgba(255,255,255,.05); padding-bottom:56.25%;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-frame.portrait{padding-bottom:177.78%;}
.video-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; background:#000;}
.video-label{color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.15em; text-transform:uppercase; margin:0;}
.video-fallback-link{display:inline-flex; align-items:center; gap:6px; color:var(--hazelnut); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; width:fit-content; transition:opacity .2s ease;}
.video-fallback-link:hover{opacity:.75;}

/* ---------- ABOUT PAGE ---------- */
.about-page{padding-top:96px; padding-bottom:80px; min-height:100vh;}
.about-page-grid{display:grid; grid-template-columns:1fr; min-height:100vh;}
@media (min-width:768px){ .about-page-grid{grid-template-columns:1fr 1fr;} }
.about-page-img{position:relative; overflow:hidden; min-height:340px;}
@media (min-width:768px){ .about-page-img{position:sticky; top:0; height:100vh;} }
.about-page-img img{width:100%; height:100%; object-fit:cover; opacity:.6;}
.about-page-img .fade{position:absolute; inset:0; background:linear-gradient(to right, transparent, rgba(0,0,0,.8));}
.about-page-text{padding:64px 40px;}
@media (min-width:768px){ .about-page-text{padding:64px; display:flex; flex-direction:column; justify-content:center;} }
.about-page-text h2{font-family:var(--font-display); font-weight:300; font-style:italic; color:#fff; font-size:2.6rem; line-height:1.25; margin:0 0 2.5rem 0;}
.about-page-text p.body{color:rgba(255,255,255,.65); font-weight:300; line-height:1.85; font-size:1rem; margin:0 0 1.5rem 0;}
.recognition{margin-top:56px; padding-top:40px; border-top:1px solid rgba(255,255,255,.1);}
.recognition .lbl{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.3); margin:0 0 1.5rem 0;}
.recognition ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.recognition li{display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.55); font-size:14px; font-weight:300;}
.recognition li .dot{width:4px;height:4px;border-radius:50%;background:var(--hazelnut); margin-top:8px; flex-shrink:0;}

/* ---------- CONTACT PAGE ---------- */
.contact-page{min-height:100vh; padding-top:96px; padding-bottom:80px; display:flex; flex-direction:column; justify-content:center; padding-left:32px; padding-right:32px;}
@media (min-width:768px){ .contact-page{padding-left:80px; padding-right:80px;} }
.contact-page .wrap{max-width:42rem;}
.contact-page h2{font-family:var(--font-display); font-weight:300; color:#fff; font-size:2.75rem; line-height:1.2; margin:0 0 1rem 0;}
@media (min-width:768px){ .contact-page h2{font-size:3.6rem;} }
.contact-page h2 em{font-style:italic;}
.contact-page > .wrap > p.sub{color:rgba(255,255,255,.5); font-weight:300; margin:0 0 3.5rem 0; font-size:1rem;}

.field{position:relative; border-bottom:1px solid rgba(255,255,255,.2); transition:border-color .3s ease; margin-bottom:2rem;}
.field:focus-within{border-color:var(--hazelnut);}
.field label{display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:8px; transition:color .3s ease;}
.field:focus-within label{color:var(--hazelnut);}
.field input, .field textarea{width:100%; background:transparent; color:#fff; font-size:1rem; font-weight:300; padding-bottom:12px; outline:none; border:0; font-family:var(--font-body); resize:none;}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.2);}
.submitbtn{align-self:flex-start; margin-top:.5rem; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#000; background:#fff; padding:16px 32px; transition:background .3s ease;}
.submitbtn:hover{background:var(--hazelnut);}
.submitbtn:disabled{opacity:.6; cursor:default;}
.form-error{color:#e2a0a0; font-size:13px; margin-top:16px;}
form{display:flex; flex-direction:column;}

.sent-msg{padding:40px 0; border-top:1px solid rgba(255,255,255,.1);}
.sent-msg .headline{font-family:var(--font-display); font-style:italic; font-weight:300; color:var(--hazelnut); font-size:1.5rem; margin:0;}
.sent-msg .sub{color:rgba(255,255,255,.4); font-size:14px; margin-top:8px;}

.direct-contact{margin-top:80px; padding-top:32px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:32px;}
@media (min-width:768px){ .direct-contact{flex-direction:row; gap:80px;} }
.direct-contact .lbl{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.25); margin:0 0 4px 0;}
.direct-contact .val{color:rgba(255,255,255,.6); font-size:14px; font-weight:300; margin:0;}

/* ---------- CINEMATOGRAPHY ENTRANCE / SCROLL REVEALS ----------
   IMPORTANT: [data-reveal] hiding is scoped under html.js so content is
   visible by default. The .js class is only added by a synchronous inline
   script in <head> once we know JS is actually running — if it fails to
   load or run for any reason (blocked script, odd file:// behavior, etc.)
   nothing stays permanently hidden. */
@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{
    opacity:0;
    transform:translateY(46px);
    transition:opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1);
    transition-delay:var(--d, 0s);
  }
  html.js [data-reveal].visible{opacity:1; transform:translateY(0);}

  html.js [data-reveal="wipe"]{
    opacity:1;
    transform:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.15s cubic-bezier(.65,0,.14,1);
    transition-delay:var(--d, 0s);
  }
  html.js [data-reveal="wipe"].visible{clip-path:inset(0 0 0 0);}

  .ken-burns{animation:kenburns 22s ease-in-out infinite alternate;}
  @keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.09);} }

  .letterbox{position:absolute; left:0; right:0; height:16vh; background:#000; z-index:20; pointer-events:none;}
  .letterbox.top{top:0; animation:closeTop 1.1s cubic-bezier(.7,0,.2,1) .15s forwards;}
  .letterbox.bottom{bottom:0; animation:closeBottom 1.1s cubic-bezier(.7,0,.2,1) .15s forwards;}
  @keyframes closeTop{from{height:16vh;} to{height:0;}}
  @keyframes closeBottom{from{height:16vh;} to{height:0;}}

  .hero .inner > *{opacity:0; transform:translateY(28px); animation:heroUp .9s cubic-bezier(.16,.84,.44,1) forwards;}
  .hero .inner > *:nth-child(1){animation-delay:.75s;}
  .hero .inner > *:nth-child(2){animation-delay:.9s;}
  .hero .inner > *:nth-child(3){animation-delay:1.05s;}
  .hero .inner > *:nth-child(4){animation-delay:1.2s;}
  @keyframes heroUp{to{opacity:1; transform:translateY(0);}}

  .hero .bottomline{transform:scaleX(0); animation:lineGrow 1s cubic-bezier(.16,.84,.44,1) 1.3s forwards;}
  @keyframes lineGrow{to{transform:scaleX(1);}}

  .cine-in{animation:cineIn .9s cubic-bezier(.16,.84,.44,1) both;}
  @keyframes cineIn{ from{opacity:0; transform:scale(1.04);} to{opacity:1; transform:scale(1);} }
}
@media (prefers-reduced-motion: reduce){ .letterbox{display:none;} }

/* ---------- DEVICE OPTIMISATION PASS ---------- */

/* Small phones (iPhone SE / older Android, ~360-380px wide):
   the hero title's clamp() floor (3.5rem) can crowd a narrow screen,
   and card/section padding can feel tight. Ease both back a touch. */
@media (max-width:380px){
  .hero h1{font-size:2.75rem;}
  .hero .content{padding-left:24px; padding-right:24px;}
  .work-card h3{font-size:1.55rem;}
  .section-pad, .page-pad{padding-left:20px; padding-right:20px;}
  .contact-page{padding-left:20px; padding-right:20px;}
  h2.title{font-size:2rem;}
}

/* Tablets (iPad-portrait-ish band, 768-1023px): this band currently
   inherits full desktop treatment at the 768px breakpoint, which is
   fine for most things but too cramped for a 3-column video grid and
   the widest gaps. Ease those specific cases back for this band only. */
@media (min-width:768px) and (max-width:1023px){
  .video-grid.cols-3{grid-template-columns:1fr 1fr;}
  .detail-body{gap:56px;}
  .about-teaser{grid-template-columns:1fr;}
  .about-teaser .imgcol{min-height:360px;}
  .about-page-grid{grid-template-columns:1fr;}
  .about-page-img{position:relative; height:52vh;}
}

/* Large / ultra-wide desktops: cap line length and content width so
   text and the work grid don't stretch awkwardly thin/wide. */
@media (min-width:1600px){
  .section-pad, .page-pad, .videos-wrap, .contact-cta, .about-teaser,
  .detail-body, .about-page-grid{
    max-width:1800px; margin-left:auto; margin-right:auto;
  }
  .hero .content{max-width:1800px; margin:0 auto; left:0; right:0; padding-left:80px; padding-right:80px;}
}

/* Landscape phones (short viewport height): 100vh hero sections can
   swallow the whole screen and hide scroll affordance — shrink them. */
@media (max-height:480px) and (orientation:landscape){
  .hero{height:auto; min-height:120vh;}
  .detail-hero{height:auto; min-height:100vh;}
}