/* Harman Preet Singh — Portfolio
   Theme: Linen + Brick + Olive. Anton display + Inter body. */

:root{
  --bg:#EFEAE0;
  --surf:#E4DDCF;
  --surf-2:#DBD3C2;
  --field-bg:#FBF8F2;
  --ink:#241F19;
  --dim:rgba(36,31,25,.68);
  --slate:rgba(36,31,25,.48);
  --brick:#B04A34;
  --brick-soft:rgba(176,74,52,.34);
  --olive:#5C6B3F;
  --line:rgba(36,31,25,.15);
  --line-strong:rgba(36,31,25,.26);
  --wrap:1180px;
  --r:12px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* SPACING — 4pt grid. Use these, don't invent new numbers. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px;

  /* TYPE — 7 steps. Display sizes stay fluid via clamp(). */
  --t-2xs:11px; --t-xs:12px; --t-sm:14px; --t-md:17px;
  --t-lg:19px;  --t-xl:22px; --t-2xl:28px;
}

*{box-sizing:border-box}

/* keyboard users get a visible ring; mouse users never see it */
:focus-visible{outline:3px solid var(--brick); outline-offset:3px; border-radius:4px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--brick); color:#fff}
::-moz-selection{background:var(--brick); color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
picture{display:contents}
a{color:inherit; text-decoration:none}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

h1,h2,h3,.display{
  font-family:'Gabarito',system-ui,sans-serif;
  font-weight:900; letter-spacing:-.02em; line-height:1.0;
  text-transform:uppercase; margin:0;
}
h1{font-size:clamp(3.2rem,10vw,7.4rem)}
h2{font-size:clamp(2rem,4.8vw,3.2rem)}
h3{font-size:17px; letter-spacing:.04em}
em{font-style:normal; color:var(--brick)}
p{margin:0 0 1rem}

.label{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--brick);
}
.label-quiet{color:var(--slate)}

/* ---------- header ---------- */
/* Ink bar — the header reads as its own surface instead of blending into the page,
   and picks up the dark of the hero photo above it. */
#hdr{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(29,25,21,.94);
  border-bottom:1px solid rgba(246,241,232,.14); transition:.35s var(--ease);
}
#hdr.scrolled{background:rgba(29,25,21,.98); border-bottom-color:rgba(246,241,232,.2)}
.nav{
  max-width:var(--wrap); margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* name and role sit on one line — a stacked wordmark was setting the bar's height */
.wordmark{display:flex; align-items:baseline; gap:var(--s3); line-height:1.1}
.wm-name{font-family:'Gabarito',sans-serif; font-weight:900; text-transform:uppercase; font-size:22px; letter-spacing:.045em; line-height:1; color:#F6F1E8}
.wm-role{font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:rgba(246,241,232,.55)}
.nav-links{display:flex; align-items:center; gap:24px}
.nav-more{display:none}
.nav-links a{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:rgba(246,241,232,.78); transition:color .2s;
}
.nav-links a:hover{color:#FFF}
.nav-links a.active{color:#EBA98D}
.nav-cta{
  border:1px solid #EBA98D; color:#EBA98D!important;
  padding:7px 16px; border-radius:999px;
}
.nav-cta:hover{background:#EBA98D; color:#1D1915!important}
.nav-toggle{
  display:none; background:none; border:1px solid rgba(246,241,232,.3); color:#F6F1E8;
  font-size:17px; border-radius:8px; padding:4px 12px; cursor:pointer;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:999px;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  transition:.25s var(--ease); border:1px solid transparent;
}
.btn-primary{background:var(--brick); color:#FFF}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(176,74,52,.28)}
/* ghost buttons paint an opaque ground so the paper grain doesn't read through them */
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background-color:var(--bg)}
.btn-ghost:hover{border-color:var(--ink); background-color:var(--surf)}
.sec-alt .btn-ghost,.club .btn-ghost,.cta-band .btn-ghost,.stats .btn-ghost,footer .btn-ghost{background-color:var(--surf)}
.sec-alt .btn-ghost:hover,.club .btn-ghost:hover,.cta-band .btn-ghost:hover,.stats .btn-ghost:hover,footer .btn-ghost:hover{background-color:var(--surf-2)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- hero ---------- */
/* ===== FIT-ABOVE-THE-FOLD BLOCK — delete this comment pair to revert =====
   Two changes, both here, nothing else in the file depends on them:
     1. hero padding was  74px 28px 84px
     2. .hero-portrait img was  aspect-ratio:4/5  with no height cap
   Restore those two values and the hero goes back exactly as it was.        */
.hero{
  max-width:var(--wrap); margin:0 auto; padding:48px 24px 48px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
  align-items:stretch;            /* was center — image now spans the text column */
}
.hero-text{position:relative}
.hero h1{margin:8px 0 16px}                    /* was 16px 0 22px */
.hero h1 .ln{display:block}
.tagline{font-size:17px; color:var(--dim); max-width:56ch}   /* was 46ch — 3 lines became 2 */
.hero .cta-row{margin-top:24px}                 /* was 32px (global .cta-row) */
.hero-portrait{
  position:relative; border-radius:var(--r); overflow:hidden; background-color:var(--surf);
  /* drop the top edge to sit level with HARMAN, not with the eyebrow line above it */
  margin-top:calc(.72rem * 1.62 + 10px);
  min-height:0;
}
.hero-portrait img{
  position:absolute; inset:0;           /* out of flow, so the photo can't set the row height */
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
/* ===== END FIT-ABOVE-THE-FOLD BLOCK ===== */

/* ---------- section rhythm + dividers ---------- */
/* Sections no longer draw their own hairline; use .sec-rule for a full-bleed one. */
.sec{padding:80px 0; position:relative}
.sec-rule::before{
  content:''; position:absolute; top:0; left:50%; margin-left:-50vw;
  width:100vw; height:1px; background:var(--line-strong);
}
.sec-tight{padding:32px 0}

/* anchor targets clear the sticky header instead of hiding under it */
#watch,#clients,#gallery,#top{scroll-margin-top:112px}
/* Profile is a full-bleed sand band with its own 80px of padding, so it needs
   almost no extra offset — the padding already keeps the heading clear. */
#profile{scroll-margin-top:var(--s5)}
.sec-alt{background-color:var(--surf)}
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:32px; padding-bottom:16px;
  border-bottom:1px solid var(--line-strong);
}
.arrow-link{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--brick); border-bottom:1px solid var(--brick-soft); padding-bottom:4px;
}
.arrow-link:hover{border-bottom-color:var(--brick)}

/* ---------- stat bar ---------- */
.stats{border-block:1px solid var(--line-strong); background-color:var(--surf)}
.stats .inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.stat{padding:32px 24px; border-right:1px solid var(--line); text-align:center}
.stat:last-child{border-right:0}
.stat .num{font-family:'Gabarito',sans-serif; font-weight:900; font-size:clamp(2rem,4.4vw,3rem); color:var(--brick); line-height:1}
.stat .cap{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-top:8px}


/* ---------- alternating split sections ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split-img{border-radius:var(--r); overflow:hidden; background:var(--surf-2)}
.split-img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.split.flip .split-text{order:2}
.split.flip .split-img{order:1}
.split-text h2{margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line-strong)}

/* one body style across every split section — matches the What He Does column */
.split-text p{font-size:17px; color:var(--dim); line-height:1.7}
.split-text p.lead{font-size:17px; color:var(--dim); line-height:1.7}
/* the opening line carries the section, in the same Anton the sub-heads use */
.split-text .opener{
  font-family:'Gabarito',sans-serif; font-weight:900; text-transform:uppercase; font-weight:400;
  font-size:19px; letter-spacing:.03em; line-height:1.3;
  color:var(--ink); margin:0 0 16px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

/* what he does, as a list beside the picture */
.do-list{margin-top:4px}
.do-item{padding:16px 0; border-top:1px solid var(--line)}
.do-item:first-child{border-top:0; padding-top:0}
.do-item:last-child{padding-bottom:0}
.do-item h3{font-size:19px; letter-spacing:.03em; margin-bottom:8px}
.do-item p{margin:0; font-size:17px}

/* ---------- brands band (separator, like the stat bar) ---------- */
.brands-band{background-color:var(--surf); border-block:1px solid var(--line-strong); padding:32px 0 32px}
.brands-band .inner{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.brands-band .band-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:24px;
}
.brands-band .band-head .label{font-size:11px; letter-spacing:.24em}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;
  /* fade only the last 24px at each edge — a percentage here washes out a whole logo */
  --fade:24px;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
.marquee-track{display:flex; align-items:center; gap:48px; width:max-content; animation:scroll 40s linear infinite; will-change:transform}
.marquee img{height:58px; width:auto; flex:0 0 auto; opacity:1}
.star{color:var(--brick); opacity:.4; font-size:11px; flex:0 0 auto}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--run)))}}

/* ---------- logo grid ---------- */
.logo-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:0}   /* 21 marks = 3 clean rows */
.logo-cell{
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  padding:16px 12px; min-height:112px;
  border:1px solid var(--line); margin:-1px 0 0 -1px;   /* hairline overlap, not on the spacing scale */
  transition:background .3s;
}
.logo-cell:hover{background:var(--surf)}
.logo-cell img{width:100%; max-width:132px; height:auto; opacity:.85; transition:opacity .3s}
.logo-cell:hover img{opacity:1}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chip{
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px;
  font-size:12px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase;
}

/* ---------- specials: click-to-play ---------- */
.vid-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.vid{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surf-2);
  aspect-ratio:16/9; cursor:pointer;
}
.vid img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.vid:hover img{transform:scale(1.035)}
.vid iframe{width:100%; height:100%; border:0; display:block}
.vid .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 42%,rgba(20,17,13,.82));
}
.vid .meta{position:absolute; inset:auto 0 0 0; padding:24px 24px; pointer-events:none}
.vid .meta h3{font-size:22px; color:#F6F1E7; margin-top:4px}
.vid .meta span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#EBB9A8; font-weight:700}
.vid .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:var(--brick); color:#FFF;
  display:grid; place-items:center; font-size:17px; padding-left:4px;
  transition:.3s var(--ease); box-shadow:0 8px 24px rgba(20,17,13,.32);
}
.vid:hover .play{transform:translate(-50%,-50%) scale(1.1)}

/* ---------- gallery wall ---------- */
.wall{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.wall figure{margin:0}
.wall img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); transition:transform .7s var(--ease)}
.wall figure > span.cap{
  display:block; margin-top:8px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); font-weight:600;
}
.wall figure img{overflow:hidden}
.wall figure:hover img{transform:scale(1.04)}

/* ---------- credit rows ---------- */
.rows{border-top:0}
.row{
  display:grid; grid-template-columns:1fr 1.5fr; gap:32px; align-items:start;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:0; padding-bottom:0}
.row h3{font-size:22px; letter-spacing:.02em}
.row p{color:var(--dim); font-size:17px; margin:0}
.row .sub{display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-top:8px}
.film-list{margin:0; padding:0; list-style:none}
.film-list li{padding:0 0 8px; border-bottom:1px solid var(--line); font-size:17px; color:var(--dim)}
.film-list li:last-child{border-bottom:0; padding-bottom:0}
.film-list li + li{padding-top:8px}
.film-list b{font-weight:600; color:var(--ink)}

/* ---------- cta band ---------- */
.cta-band{background-color:var(--surf); border-top:1px solid var(--line-strong); padding:64px 0; text-align:center}
.cta-band .cta-row{margin-top:16px}
.cta-band .cta-row{justify-content:center}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px}
.field{margin-bottom:16px}
.field label{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; background:var(--field-bg); border:1px solid var(--line-strong); border-radius:8px;
  color:var(--ink); padding:12px 16px; font:inherit; font-size:17px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--slate); opacity:1}
.field option{background:var(--field-bg); color:var(--ink)}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brick)}
.field select{appearance:none}
.detail{border-top:1px solid var(--line); padding:16px 0}
.detail .k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:4px}
.detail .v{font-size:17px}
.detail .v a:hover{color:var(--brick)}
.note{font-size:14px; color:var(--slate); margin-top:12px}
.form-msg{margin-top:16px; font-size:14px; color:var(--brick); display:none}

/* ---------- club card ---------- */
.club{
  display:grid; grid-template-columns:minmax(0,.85fr) 1fr; gap:32px; align-items:center;
  background-color:var(--surf); border:1px solid var(--line-strong); border-radius:var(--r); padding:32px;
}
.club img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r)}
.club h3{font-size:22px; margin-bottom:12px}
.club p{color:var(--dim); margin:0}

/* ---------- footer ---------- */
footer{padding:48px 0 48px; border-top:1px solid var(--line-strong); background-color:var(--surf)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fm{font-family:'Gabarito',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.05em}
.foot-nav{display:flex; gap:24px}
.foot-nav a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate)}
.foot-nav a:hover{color:var(--ink)}
.copy{width:100%; font-size:12px; color:var(--slate); letter-spacing:.04em; padding-top:16px; border-top:1px solid var(--line); margin-top:8px}

/* ---------- page head ---------- */
.page-head{padding:64px 0 32px}
.page-head h1{font-size:clamp(2.6rem,7.5vw,5.2rem); margin:12px 0 16px}
.page-head p{color:var(--dim); max-width:58ch; font-size:17px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; gap:32px; padding-top:48px}
  /* stacked: nothing to stretch into, so give the photo its own shape back */
  .hero-portrait{margin-top:0; aspect-ratio:4/5}
  .split,.contact-grid{grid-template-columns:1fr; gap:32px}
  .split.flip .split-text,.split.flip .split-img{order:0}
  .vid-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .stats .inner{grid-template-columns:repeat(3,1fr)}
  .stat{padding-left:16px}
  .stat:first-child{padding-left:16px}
  .row{grid-template-columns:1fr; gap:12px}
  .club{grid-template-columns:1fr; text-align:center; gap:24px}
  .club img{margin:0 auto}
}
@media (max-width:720px){
  body{font-size:17px}
  .sec{padding:48px 0}
  .nav-toggle{display:block}
  .nav-more{display:block}
  .wordmark{flex-direction:column; align-items:flex-start; gap:3px}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#1D1915; border-bottom:1px solid rgba(246,241,232,.2); padding:8px 24px 16px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0; width:100%}
  .nav-cta{margin-top:8px}
  .cap-long{display:none}
  .stat{padding:var(--s4) var(--s2)}
  .stat .num{font-size:clamp(1.5rem,7vw,2rem)}
  .stat .cap{font-size:9px; letter-spacing:.1em; margin-top:var(--s1); line-height:1.4}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
}

/* ===== FULL-BLEED HERO — delete this block and the .hero-full markup to revert ===== */
/* the hero ends exactly at the bottom of the window; dvh keeps that true on
   browsers whose chrome collapses, vh is the fallback */
.hero-full{position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden}
.hero-full > img,.hero-full picture img{
  position:absolute; top:0; bottom:0; left:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--hero-pos,62% 50%);
}
/* nudge the frame right so he clears the copy — 15% is a shift, not a zoom;
   the extra height it costs comes off the ceiling, not his feet */
.hero-a > img,.hero-a picture img{width:104%; max-width:none}
.hero-full::after{content:''; position:absolute; inset:0; background:var(--hero-scrim)}
.hero-full .hero-inner{
  position:relative; z-index:2; height:100%;
  max-width:1560px; margin:0 auto; padding:0 clamp(var(--s5),3.4vw,var(--s7));
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:var(--s8);
}
.hero-full .label{color:#E8A98F}
/* the copy carries its own legibility now that the wash is short */
.hero-full .hero-inner{text-shadow:0 2px 30px rgba(8,5,6,.85), 0 1px 4px rgba(8,5,6,.5)}
.hero-full h1{color:#F6F1E8; margin:var(--s2) 0 var(--s4); font-size:clamp(2.8rem,8.2vw,6.4rem)}
.hero-full h1 em{color:var(--brick)}
.hero-full .tagline{color:rgba(246,241,232,.82); max-width:52ch; font-size:var(--t-md); margin:0}
.hero-full .cta-row{margin-top:var(--s5)}
.hero-full .btn-ghost{background-color:rgba(0,0,0,.28); border-color:rgba(246,241,232,.55); color:#F6F1E8}
.hero-full .btn-ghost:hover{background-color:rgba(0,0,0,.5); border-color:#F6F1E8}

/* A — subject pushed right, copy stacked left over the crowd */
.hero-a{--hero-pos:50% 50%;
  /* the wash has to finish before he does, or it lights one arm and not the other */
  --hero-scrim:linear-gradient(90deg,rgba(12,8,10,.84) 0%,rgba(12,8,10,.50) 12%,rgba(12,8,10,.14) 23%,rgba(12,8,10,0) 31%)}
.hero-a .hero-inner{justify-content:flex-start; align-items:flex-start;
  padding-top:clamp(var(--s7),7vh,var(--s9)); padding-bottom:var(--s7)}
.hero-a h1{font-size:clamp(3rem,7.6vw,6.2rem)}
.hero-a h1 .ln{display:block}
.hero-a .tagline{max-width:30ch}

/* B — subject centred, copy across the bottom */
.hero-b{--hero-pos:50% 42%;
  --hero-scrim:linear-gradient(180deg,rgba(12,8,10,.42) 0%,rgba(12,8,10,.05) 34%,rgba(12,8,10,.72) 78%,rgba(12,8,10,.92) 100%)}
.hero-b h1{font-size:clamp(2.4rem,6.6vw,5rem)}
.hero-b .tagline{max-width:60ch}
@media (max-width:820px){
  /* One unit again: the copy sits ON the photo, in the dark band above his head,
     with the rail overlaid at the foot. Band height is tuned so the crop never
     reaches his outstretched hands. */
  /* A taller band crops wider on a portrait screen, so this is the ceiling before
     his fingertips start leaving the frame. */
  .hero-full{height:clamp(480px,64vh,660px); display:block; background:#17100F}
  .hero-full > img,.hero-full picture img{position:absolute; inset:0; width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:50% 30%}
  .hero-full::after{display:block}
  .hero-full .hero-inner{
    height:100%; justify-content:flex-start;
    padding:var(--s5) var(--s4) 0;
  }
  .hero-a h1{font-size:clamp(2.6rem,13vw,4rem)}
  .hero-a .tagline{max-width:38ch}
}
/* ===== END FULL-BLEED HERO ===== */

/* ---------- hero rail: the homepage's navigation, sitting on the photo ---------- */
.hero-rail{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid rgba(246,241,232,.28);
  background:linear-gradient(180deg,rgba(10,7,8,0) 0%,rgba(10,7,8,.72) 100%);
}
.hero-rail .inner{
  max-width:1560px; margin:0 auto;
  padding:var(--s4) clamp(var(--s5),3.4vw,var(--s7)) var(--s5);
  display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap;
}
.hero-rail a{
  font-size:var(--t-sm); letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:#F6F1E8; padding:var(--s2) 0 5px;
  border-bottom:2px solid rgba(224,152,90,.55); transition:border-color .2s;
  position:relative; display:inline-flex; align-items:center; gap:6px;
}
.hero-rail a:hover{border-bottom-color:#EBA98D}

/* hover: the word lifts off its own rule and brightens; the underline holds still */
.hero-rail a > span{
  display:inline-block;
  transition:transform .26s var(--ease), color .2s;
}
.hero-rail a:hover > span{transform:translateY(-3px); color:#EBA98D}

/* and the arrows nudge on the links that actually leave the page */
.hero-rail i{font-style:normal; transition:transform .26s var(--ease)}
.hero-rail .ico{display:none}
.hero-rail a.ext:hover i{transform:translate(3px,-3px)}
.hero-rail .rail-cta:hover i{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .hero-rail a > span,.hero-rail i{transition:none}
  .hero-rail a:hover > span{transform:none}
  .hero-rail a:hover{color:#EBA98D}
}
.hero-rail .spacer{margin-left:auto}
.hero-rail .rail-cta{
  background:var(--brick); color:#FFF; border-bottom:0;
  padding:var(--s4) var(--s6); border-radius:999px; font-size:var(--t-sm);
  box-shadow:0 10px 26px rgba(176,74,52,.5);
  transition:background .2s, transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-rail .rail-cta:hover{background:#C4573E; color:#FFF; transform:translateY(-2px); box-shadow:0 14px 32px rgba(176,74,52,.6)}
@media (max-width:820px){
  .hero-rail .inner{gap:var(--s4) var(--s5); padding:var(--s3) var(--s5)}
  .hero-rail .spacer{margin-left:0}
}

/* ---------- homepage header: absent over the hero, slides in past it ---------- */
body.home #hdr{
  position:fixed; left:0; right:0; top:0;
  transform:translateY(-102%); opacity:0; pointer-events:none;
}
body.home #hdr.show{transform:none; opacity:1; pointer-events:auto}

/* ---------- scroll motion ---------- */
/* hero photo drifts slower than the page; the copy lifts and fades as it leaves */
.hero-full > img,.hero-full picture img{will-change:transform}
.hero-full .hero-inner,.hero-rail{will-change:transform,opacity}

/* children of a revealed block come in one after another */
.reveal.stagger > *{opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.stagger.in > *{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.stagger > *{opacity:1!important; transform:none!important; transition:none!important}
  .hero-full > img,.hero-full picture img,.hero-full .hero-inner,.hero-rail{transform:none!important; opacity:1!important}
}

/* mobile rail — declared last so it beats the desktop .hero-rail rules above */
@media (max-width:820px){
  /* One pill family: outlined word, two outlined icon buttons, one filled CTA.
     Same geometry throughout — only the fill marks the primary action. */
  .hero-rail{position:absolute; background:linear-gradient(180deg,rgba(10,7,8,0),rgba(10,7,8,.82) 42%);
    border-top:0}
  .hero-rail .inner{gap:var(--s3); padding:var(--s6) var(--s4) var(--s5);
    flex-wrap:nowrap; justify-content:center; align-items:center}
  .hero-rail .rail-drop{display:none}
  .hero-rail a{
    font-size:var(--t-xs); letter-spacing:.1em; border-bottom:0;
    border:1px solid rgba(246,241,232,.45); border-radius:999px;
    padding:11px 18px; background:rgba(12,8,10,.3);
    transition:border-color .2s, background .2s, transform .2s var(--ease);
  }
  .hero-rail a:active{border-color:#EBA98D; transform:translateY(-2px)}
  /* socials become round buttons holding just their mark */
  .hero-rail .ext{width:42px; height:42px; padding:0; justify-content:center}
  .hero-rail .ext span,.hero-rail .ext i{display:none}
  .hero-rail .ext .ico{
    display:block; width:21px; height:21px;
    fill:none; stroke:#F6F1E8; stroke-width:1.7; transition:stroke .2s;
  }
  .hero-rail .ext .ico .fill{fill:#F6F1E8; stroke:none}
  .hero-rail .ext:active .ico{stroke:#EBA98D}
  .hero-rail .ext:active .ico .fill{fill:#EBA98D}
  .hero-rail .spacer{margin-left:0; width:auto}
  .hero-rail .rail-cta{
    white-space:nowrap; background:var(--brick); border-color:var(--brick); color:#fff;
    padding:12px var(--s5); font-size:var(--t-xs); letter-spacing:.08em;
    box-shadow:0 8px 22px rgba(176,74,52,.45);
  }
}

/* ===== CENTRE-TOP HERO VARIANT — delete this block + the hero-centre class to revert ===== */
.hero-centre{--hero-pos:50% 50%;
  --hero-scrim:linear-gradient(180deg,rgba(12,8,10,.86) 0%,rgba(12,8,10,.52) 24%,rgba(12,8,10,.04) 48%,rgba(12,8,10,0) 62%)}
.hero-centre .hero-inner{
  justify-content:flex-start; align-items:center; text-align:center;
  padding-top:clamp(var(--s6),4.5vh,var(--s8)); padding-bottom:var(--s7);
}
.hero-centre h1{font-size:clamp(2.4rem,6.6vw,5.4rem); margin:var(--s2) 0 var(--s4)}
.hero-centre h1 .ln{display:inline}
.hero-centre h1 .ln + .ln{margin-left:.28em}
.hero-centre h1{margin-bottom:var(--s3)}
.hero-centre .tagline{
  max-width:none; margin:0 auto;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:rgba(246,241,232,.9);
}
.hero-centre.two h1 .ln:last-child{display:block; margin-left:0}
@media (max-width:820px){
  /* one line of 18 characters won't fit a phone — break after PREET */
  .hero-centre{--hero-scrim:linear-gradient(180deg,rgba(12,8,10,.90) 0%,rgba(12,8,10,.62) 26%,rgba(12,8,10,.10) 52%,rgba(12,8,10,.35) 82%,rgba(12,8,10,.78) 100%)}
  /* one line on phones too — 18 characters fit at 8vw */
  .hero-centre h1{font-size:clamp(1.5rem,7.3vw,2.6rem); white-space:nowrap}
  .hero-centre h1 .ln + .ln{margin-left:.24em}
  .hero-centre .hero-inner{
    justify-content:flex-start; text-align:center;
    padding:var(--s5) var(--s3) 0;
  }
  /* shrink the eyebrow until it holds one line instead of wrapping */
  .hero-centre .label{font-size:9px; letter-spacing:.12em}
  .hero-centre .tagline{max-width:100%; font-size:9px; letter-spacing:.11em; line-height:1.7}
}
/* ===== END CENTRE-TOP HERO VARIANT ===== */

/* ===== MOBILE TALL HERO — delete this whole block to go back to a photo-height hero =====
   His hands sit at 26.5% and 72% of the frame, so on a phone the photo can only be
   ~1.22x the viewport width before they clip. The band is pinned to that size and the
   hero grows past it in ink, which is where the rail now sits. ===================== */
@media (max-width:820px){
  /* The hero ends exactly at the bottom of the screen. dvh follows the browser
     chrome as it collapses on scroll; vh is the fallback for older Safari. */
  .hero-full{height:100vh; height:100dvh}
  /* Phones load a taller cut of the photo, so the band can reach 165vw before
     his hands touch the screen edges. */
  /* Photo is pinned to the FOOT of the hero so it reaches the bottom edge of the
     screen; whatever height is left over becomes the ink the copy sits on. */
  /* No zoom: the photo stays at the size where his hands reach the screen edges
     (122vw). It is stacked directly under the copy instead of floated inside a
     tall box, so there is no gap to fill with black. */
  /* Hero is exactly one screen tall. Copy and rail take what they need; the photo
     takes the rest, capped at 122vw (the size where his hands reach the edges) and
     free to shrink on short screens so nothing ever spills past the fold. */
  .hero-full{height:100vh; height:100dvh; display:flex; flex-direction:column}
  .hero-full > img,.hero-full picture img{
    position:static; order:2;
    flex:0 1 auto; width:100%; height:122vw; min-height:0; max-width:none;
    object-fit:cover; object-position:49% 100%;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-full::after{display:none}
  .hero-full .hero-inner{
    order:1; flex:1 0 auto; height:auto; position:relative;
    justify-content:center; padding-bottom:var(--s5);
  }
  .hero-rail{order:3; flex:0 0 auto; position:static;
    background:linear-gradient(180deg,rgba(10,7,8,.7),rgba(10,7,8,.95))}
  .hero-full .hero-inner{height:auto; padding-bottom:var(--s5)}
}
/* ===== END MOBILE TALL HERO ===== */