/* ============================================================
   RIVERS ROAD — homepage styles (v4 — full-height "slides")
   Colour rules (from mockup):
     • Serif display headings = DARK (#141214); script + buttons + wordmark = RED (#6d0000)
     • Proof bar + footer = BEIGE (#e6ddd6); background = warm cream (#f7f4f0)
   Every section is a seamless full-viewport slide. Pinned/scrubbed
   motion lives in main.js. Editable content lives in index.html.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face{font-family:"Neue Haas Grotesk";src:url("../fonts/nhaas-35.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk";src:url("../fonts/nhaas-55.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk";src:url("../fonts/nhaas-65.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Altesse";src:url("../fonts/altesse-64.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  --white:#f7f4f0; --red:#6d0000; --beige:#e6ddd6; --dark-red:#360707; --black:#141214;
  --red-rgb:109,0,0;
  --ink:#141214; --ink-soft:rgba(20,18,20,.74); --hairline:rgba(20,18,20,.16);
  --serif:"Noto Serif Display",Georgia,serif;
  --sans:"Neue Haas Grotesk","Helvetica Neue",Arial,sans-serif;
  --script:"Altesse","Snell Roundhand",cursive;
  --gut:clamp(20px,5vw,84px); --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-weight:400;
  line-height:1.65;letter-spacing:.015em;font-size:clamp(15px,1.04vw,17px);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--red);color:var(--white)}

/* ---------- TYPE ---------- */
.kicker{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;font-weight:500;color:var(--red)}
.display{font-family:var(--serif);font-weight:300;font-stretch:87%;text-transform:uppercase;
  color:var(--black);line-height:1.1;letter-spacing:.045em;font-size:clamp(2rem,5.4vw,4.8rem)}
.script{font-family:var(--script);font-weight:400;color:var(--red);line-height:1.15}
/* per-letter split: each character animates individually */
.line{display:block}
.word{display:inline-block;white-space:nowrap}
.char{display:inline-block;white-space:pre;will-change:opacity,transform}
/* script glyphs (Altesse) overhang their character boxes; per-letter spans get
   composited as tight layers on mobile and the overhang gets sliced off.
   Padding expands each letter's paint area; negative margin cancels the layout shift. */
.script .char{padding:.35em .2em;margin:-.35em -.2em}

/* ---------- SLIDES ---------- */
section{position:relative}
.slide{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:clamp(70px,9vh,120px)}
.slide__inner{width:100%}

/* ============================================================ HEADER */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);background:rgba(247,244,240,.34);backdrop-filter:saturate(140%) blur(8px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease)} /* constant compact size */
.site-header.scrolled{background:rgba(247,244,240,.93);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline)}
.nav-group{display:flex;gap:clamp(18px,2.6vw,46px);align-items:center;flex:1}
.nav-group.right{justify-content:flex-end}
.nav-link{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--red);position:relative;padding:4px 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.brandmark{flex:0 0 auto;width:clamp(150px,15vw,225px)}
.brandmark img{width:100%;height:auto}
.nav-toggle{display:none}
.mobile-menu{display:none}

/* ============================================================ HERO (slide 1) */
.firstscreen{height:100svh;min-height:600px;display:flex;flex-direction:column}
.hero{position:relative;flex:1 1 auto;overflow:hidden;background:var(--black);min-height:0}
.hero__media{position:absolute;inset:-6% 0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.97)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,18,20,.22),transparent 24%,transparent 62%,rgba(20,18,20,.34))}
.hero__cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;color:var(--white)}
.hero__cue span{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.85}
.hero__cue i{width:1px;height:40px;background:linear-gradient(var(--white),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================ PROOF BAR */
.proof{flex:0 0 auto;background:var(--beige);padding:clamp(16px,2.2vw,26px) var(--gut)}
.proof__track{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3.4vw,52px);flex-wrap:nowrap}
.proof__logo{flex:0 0 auto;width:auto;object-fit:contain;filter:grayscale(1) brightness(.32);opacity:.78;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.proof__logo:hover{filter:none;opacity:1}
/* as soon as you scroll, the muted logos fade to primary red */
.is-scrolled .proof__logo{filter:none;opacity:1}
@media(max-width:900px){.proof{padding-block:16px}.proof__track{gap:clamp(8px,2vw,30px)}}
/* mobile: keep ALL logos on one line — just smaller, never wrap to two rows */
@media(max-width:760px){
  .proof{padding-inline:8px;padding-block:13px}
  .proof__track{flex-wrap:nowrap;gap:5px;justify-content:space-between}
  .proof__logo{height:9px!important;width:auto!important}
}

/* ============================================================ STATEMENT (slide 2) */
.statement{text-align:center}
.statement .slide__inner{padding-inline:var(--gut)}
.statement .display{margin-inline:auto;max-width:none;font-size:clamp(1.55rem,4.4vw,4rem)}
.statement .line{white-space:nowrap}
.statement .script{display:block;font-size:clamp(2.6rem,7.4vw,5.6rem);margin-top:.26em}
@media(max-width:600px){.statement .line,.world .line{white-space:normal}}

/* ============================================================ EDITORIAL / BIO (slide 3) */
.editorial .slide__inner{padding-inline:var(--gut)}
.editorial__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.5vw,80px);align-items:center;max-width:1400px;margin-inline:auto}
.editorial__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.editorial__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
/* framed box — same size + 4/5 ratio as the photo beside it, content centred */
.editorial__card{position:relative;background:var(--white);border:1px solid var(--hairline);aspect-ratio:4/5;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(28px,3vw,54px);box-shadow:0 40px 90px -60px rgba(20,18,20,.5)}
.editorial__card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(20,18,20,.10);pointer-events:none}
.editorial__card .display{font-size:clamp(1.7rem,3.3vw,2.9rem);margin-bottom:2.4em;color:var(--red)} /* extra break before body */
.editorial__card p{margin-bottom:1.05em;max-width:48ch;color:var(--ink-soft)}
.editorial__card .sign{font-family:var(--script);font-size:clamp(1.85rem,3vw,2.6rem);color:var(--red);display:inline-block;margin-top:1.8em} /* extra break after body, pushes signature + button down */ /* inline-block so the signature can "write" in via clip-path */
.editorial__cta{margin-top:1.5em}

/* button */
.btn{display:inline-block;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:var(--white);background:var(--red);padding:16px 32px;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--dark-red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn--ghost{color:var(--red);background:transparent;border:1px solid var(--red)}
.btn--ghost::before{background:var(--red)}
.btn--ghost:hover{color:var(--white)}

/* ============================================================ FEATURED (slide 4) */
.featured{padding:0;overflow:hidden;background:var(--black)}
.featured__img{position:absolute;inset:0}
.featured__img img,.featured__img video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8)}
.featured__inner{position:relative;z-index:2;color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:0 var(--gut)}
.featured__inner .kicker{color:var(--beige)}
.featured__inner .display{color:var(--white)}
.featured__tag{font-family:var(--script);font-size:clamp(2rem,4.8vw,3.4rem);color:var(--beige);line-height:1.1}

/* ============================================================ WE DO (slide 5) */
.wedo{text-align:center;overflow:hidden}
.wedo__inner{position:relative;width:100%;min-height:60vh;display:flex;align-items:center;justify-content:center}
.wedo__split{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center;gap:.06em;pointer-events:none;z-index:0}
.wedo__word{font-family:var(--script);color:var(--red);font-size:clamp(5rem,16vw,13rem);line-height:1.25;will-change:transform,opacity}
.wedo__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-inline:var(--gut)}
.wedo__list{list-style:none;display:flex;flex-direction:column;gap:.22em}
.wedo__list li{font-family:var(--serif);font-weight:300;font-stretch:87%;text-transform:uppercase;font-size:clamp(1.1rem,2.5vw,2.1rem);letter-spacing:.05em;color:var(--black);line-height:1.22}
.wedo__ctas{display:flex;gap:16px;justify-content:center;margin:2.3em 0 1.3em;flex-wrap:wrap}
.wedo__note{max-width:56ch;margin-inline:auto;color:var(--ink-soft)}

/* ============================================================ WORLD (slide 6) — photos flank centred text */
.world{text-align:center;overflow:hidden}
.world__inner{position:relative;width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gut);
  min-height:84vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.world__text{position:relative;z-index:2}
.world .display{max-width:none;margin-inline:auto;font-size:clamp(1.5rem,3.7vw,3.5rem)}
.world .line{white-space:nowrap}
.world .script{display:block;font-size:clamp(2.2rem,6vw,4.4rem);margin-top:.15em}
.world__photos{position:absolute;inset:0;z-index:1;pointer-events:none}
.world__photos figure{position:absolute;width:clamp(120px,12vw,195px);aspect-ratio:3/4;overflow:hidden;
  background:#fff;padding:7px 7px 20px;box-shadow:0 26px 60px -38px rgba(20,18,20,.55)}
.world__photos img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
/* 4 down the left — condensed so they overlap a little, not spread tall */
.world__photos figure:nth-child(1){left:2%;top:13%;transform:rotate(-6deg)}
.world__photos figure:nth-child(2){left:6%;top:31%;transform:rotate(4deg)}
.world__photos figure:nth-child(3){left:2%;top:49%;transform:rotate(-4deg)}
.world__photos figure:nth-child(4){left:6%;top:64%;transform:rotate(5deg)}
/* 4 down the right */
.world__photos figure:nth-child(5){right:2%;top:13%;transform:rotate(5deg)}
.world__photos figure:nth-child(6){right:6%;top:31%;transform:rotate(-5deg)}
.world__photos figure:nth-child(7){right:2%;top:49%;transform:rotate(4deg)}
.world__photos figure:nth-child(8){right:6%;top:64%;transform:rotate(-4deg)}
@media(max-width:860px){
  /* lightly overlapping, pushed to the edges so they clear the centred text */
  .world__photos figure{width:21vw}
  .world__photos figure:nth-child(1){left:-7%;top:7%}
  .world__photos figure:nth-child(2){left:-5%;top:29%}
  .world__photos figure:nth-child(3){left:-7%;top:51%}
  .world__photos figure:nth-child(4){left:-5%;top:73%}
  .world__photos figure:nth-child(5){right:-7%;top:7%}
  .world__photos figure:nth-child(6){right:-5%;top:29%}
  .world__photos figure:nth-child(7){right:-7%;top:51%}
  .world__photos figure:nth-child(8){right:-5%;top:73%}
}

/* ============================================================ MAP (slide 7) */
.mapslide{overflow:hidden;min-height:auto;padding-block:clamp(14px,2.2vh,28px)} /* tight — small gap to Let's Talk */
.map-art{max-width:none;width:100%;margin:0;position:relative} /* full screen width */
.map-art svg,.map-art img{width:100%;height:auto}
.map-art .st1{will-change:transform,opacity} /* hearts */

/* ============================================================ LET'S TALK + FORM (slide 8) */
.talk{text-align:center;padding-top:clamp(14px,2vh,26px);padding-bottom:clamp(24px,3.5vh,44px)} /* tight top (from map) + bottom (to footer) */
.talk__inner{width:100%;max-width:820px;margin-inline:auto;padding-inline:var(--gut)}
.talk .script{display:block;font-size:clamp(2.6rem,7vw,5rem);line-height:1.15;margin-bottom:.1em}
.talk__sub{max-width:50ch;margin:0 auto clamp(28px,4vw,46px);color:var(--ink-soft)}
.form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);text-align:left}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.cond[hidden]{display:none}
.field label{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dark-red)}
.field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid rgba(20,18,20,.28);
  color:var(--ink);padding:9px 2px;font-family:var(--sans);font-size:1rem;transition:border-color .4s var(--ease)}
.field textarea{resize:vertical;min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field input::placeholder,.field textarea::placeholder{color:rgba(20,18,20,.4)}
.form__actions{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:14px}
.form__note{font-size:.72rem;color:var(--ink-soft)}
.form__msg{grid-column:1/-1;text-align:center;font-family:var(--serif);font-stretch:87%;font-size:1.4rem;color:var(--dark-red);display:none}
.form.sent .form__msg{display:block}
@media(max-width:680px){.form{grid-template-columns:1fr}}

/* ============================================================ FOOTER (beige, mockup layout) */
.footer{background:var(--beige);color:var(--ink);padding:clamp(26px,3.5vw,46px) var(--gut) 34px}
.footer__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;max-width:1300px;margin:0 auto}
.footer__col{display:flex;flex-direction:column;gap:10px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.footer__col a{color:var(--dark-red);transition:color .35s}
.footer__col a:hover{color:var(--red)}
.footer__col.right{text-align:right}
.footer__center{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.footer__mark{width:clamp(180px,20vw,260px)}
.footer__socials{display:flex;gap:14px}
.footer__socials a{width:38px;height:38px;border-radius:50%;background:var(--dark-red);display:flex;align-items:center;justify-content:center;transition:background .35s,transform .35s}
.footer__socials a:hover{background:var(--red);transform:translateY(-2px)}
.footer__socials svg{width:16px;height:16px;fill:var(--beige)}
.footer__copy{font-size:.7rem;letter-spacing:.12em;color:var(--ink-soft)}
.footer__base{max-width:1300px;margin:clamp(34px,5vw,60px) auto 0;border-top:1px solid rgba(20,18,20,.18);padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.1em;color:var(--ink-soft)}
@media(max-width:760px){
  .footer__top{grid-template-columns:1fr;text-align:center;gap:34px}
  .footer__col,.footer__col.right{text-align:center;align-items:center}
}

/* ============================================================ INTRO COVER */
.page-cover{position:fixed;inset:0;z-index:90;background:var(--dark-red);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:coverOut 1.9s var(--ease) 1.1s forwards}
.page-cover img{width:clamp(180px,22vw,300px);opacity:0;animation:coverImg .8s var(--ease) forwards}
@keyframes coverImg{to{opacity:1}}
@keyframes coverOut{to{opacity:0;visibility:hidden}} /* fade to transparent (no upward wipe) */

/* ============================================================ MOBILE MENU */
@media(max-width:760px){
  .nav-group{display:none}
  .brandmark{width:150px;margin-right:auto}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:20px;z-index:70}
  .nav-toggle span{display:block;height:1.5px;width:100%;background:var(--red);transition:transform .4s var(--ease),opacity .3s}
  .nav-toggle.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
  .mobile-menu{position:fixed;inset:0;z-index:60;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3em;transform:translateY(-100%);transition:transform .6s var(--ease)}
  .mobile-menu.open{transform:none}
  .mobile-menu a{font-family:var(--serif);font-weight:300;font-stretch:87%;text-transform:uppercase;font-size:2rem;letter-spacing:.06em;color:var(--red)}
}

/* ============================================================ MOBILE LAYOUT TWEAKS */
@media(max-width:760px){
  .editorial__media{display:none}                 /* bio: just the card/letter, no photo */
  .editorial__grid{grid-template-columns:1fr;gap:0}
  .editorial__card{aspect-ratio:auto;display:block} /* full-width card, natural height on mobile */
  .wedo__list li{font-size:1.6rem;line-height:1.32}  /* bigger service text */
  .wedo__ctas{margin-top:3.4em}                   /* buttons + note further down */
  .talk{min-height:auto}                          /* Let's Talk directly under the map */
}

/* ============================================================ REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .page-cover{display:none!important}
  .char{opacity:1!important;transform:none!important}
  .wedo__split{display:none}
  .map-art .st1{opacity:1!important;transform:none!important}
}