/* ==========================================================================
   GSPMEDIALAB — stylesheet
   1. Tokens   2. Reset   3. Typography   4. Buttons   5. Chrome (nav/footer)
   6. Sections 7. Media    8. Components   9. Forms     10. Utilities/motion
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --ink:        #0A0F0C;   /* deep green-black */
  --ink-2:      #0C1310;   /* raised surface   */
  --ink-3:      #101815;   /* highest surface  */
  --ivory:      #F2EBDD;
  --ivory-70:   rgba(242,235,221,.72);
  --ivory-50:   rgba(242,235,221,.52);
  --ivory-30:   rgba(242,235,221,.30);
  --champagne:  #C8B58D;
  --champagne-2:#E0D2B2;
  --sage:       #7E8B82;   /* muted grey-green */
  --line:       rgba(242,235,221,.14);
  --line-soft:  rgba(242,235,221,.08);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --wrap: 1320px;
  --sec-y: clamp(5rem, 11vw, 9.5rem);
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s var(--ease);
}

/* ── 2. RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--sans); font-size:clamp(.98rem,.35vw + .9rem,1.0625rem);
  font-weight:300; line-height:1.75; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video,svg{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:1px solid var(--champagne); outline-offset:3px}
::selection{background:var(--champagne); color:var(--ink)}

.wrap{width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; z-index:120; background:var(--champagne); color:var(--ink); padding:.75rem 1.25rem}
.skip:focus{left:1rem; top:1rem}

/* Film grain — cinematic texture, sits above everything, ignores pointers */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */
.display{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.15rem, 5.1vw, 4.35rem); line-height:1.06;
  letter-spacing:-.012em; text-wrap:balance;
}
.display em{font-style:italic; color:var(--champagne)}
h3{font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.2; letter-spacing:-.01em}

.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-size:.7rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:1.6rem;
}
.eyebrow::before{content:""; width:clamp(24px,3vw,44px); height:1px; background:currentColor; opacity:.55; flex:none}
.sec-head--center .eyebrow{justify-content:center}

.lede{color:var(--ivory-70); max-width:58ch; font-size:clamp(1rem,.4vw + .95rem,1.125rem)}
.display + p, .display + .lede{margin-top:clamp(1.25rem,2vw,1.75rem)}
.muted{color:var(--ivory-50)}
p + p{margin-top:1.15rem}

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ivory); --btn-bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2rem; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  line-height:1; cursor:pointer; border-radius:2px; position:relative; overflow:hidden;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn--sm{padding:.8rem 1.35rem; font-size:.7rem}
.btn--primary{--btn-bg:var(--champagne); --btn-fg:var(--ink); --btn-bd:var(--champagne)}
.btn--primary:hover,.btn--primary:focus-visible{--btn-bg:var(--champagne-2); --btn-bd:var(--champagne-2); transform:translateY(-2px)}
.btn--ghost{--btn-bd:rgba(242,235,221,.28)}
.btn--ghost:hover,.btn--ghost:focus-visible{--btn-fg:var(--champagne); --btn-bd:var(--champagne); transform:translateY(-2px)}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ── 5. NAVIGATION ─────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-solid{background:rgba(10,15,12,.86); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line-soft)}
.nav.is-hidden{transform:translateY(-100%); transition:transform .5s var(--ease)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:var(--nav-h)}

.nav__logo{
  position:relative; z-index:2;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap;
}
.nav__logo em{font-style:normal; font-weight:300; color:var(--champagne)}

.nav__links{display:flex; align-items:center; gap:clamp(1.1rem,2.1vw,2.2rem)}
.nav__links > a{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-70);
  position:relative; padding-block:.35rem; transition:color .35s var(--ease);
}
.nav__links > a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--champagne);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links > a:hover,.nav__links > a.is-active{color:var(--ivory)}
.nav__links > a:hover::after,.nav__links > a.is-active::after{transform:scaleX(1); transform-origin:left}
.nav__ig--drawer,.nav__cta--drawer{display:none}

.nav__actions{position:relative; z-index:2; display:flex; align-items:center; gap:1.1rem}
.nav__ig{color:var(--ivory-70); transition:color .35s var(--ease)}
.nav__ig:hover{color:var(--champagne)}
.nav__burger{
  display:none; width:44px; height:44px; margin-right:-10px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav__burger span{display:block; width:24px; height:1px; background:var(--ivory); transition:transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg); width:24px}

@media (max-width:1024px){
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.1rem; padding:calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
    background:var(--ink); opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  }
  .nav__links.is-open{opacity:1; visibility:visible; transform:none}
  .nav__links > a{font-family:var(--serif); font-size:2rem; letter-spacing:0; text-transform:none; color:var(--ivory)}
  .nav__links > a::after{display:none}
  .nav__ig--drawer{display:block; font-size:1.25rem !important; color:var(--champagne) !important; margin-top:.5rem}
  .nav__cta--drawer{display:inline-flex; margin-top:1.25rem; font-family:var(--sans) !important; font-size:.78rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--ink) !important}
}

/* ── 6. HERO ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:calc(var(--nav-h) + 4rem) clamp(4rem,9vh,7rem); overflow:hidden; isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-2; background:var(--ink)}
.hero__media video,.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero__media video.is-ready,.hero__media img.is-active{opacity:1}
.hero__media img{transform:scale(1.06); animation:kenburns 18s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1.03)} to{transform:scale(1.12)}}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,15,12,.82) 0%, rgba(10,15,12,.32) 34%, rgba(10,15,12,.72) 74%, var(--ink) 100%),
    radial-gradient(120% 85% at 15% 92%, rgba(10,15,12,.86) 0%, transparent 62%);
}
.hero__inner{position:relative; width:min(var(--wrap),100% - var(--gutter)*2)}
.hero__loc{margin-bottom:2rem}
.hero__title{font-family:var(--serif); font-weight:300; line-height:.98; letter-spacing:-.02em; margin:0 0 1.9rem}
.hero__title .line{display:block; font-size:clamp(2.9rem, 9.2vw, 7.6rem)}
.hero__title em{font-style:italic; color:var(--champagne)}
.hero__lede{color:var(--ivory-70); max-width:46ch; font-size:clamp(1rem,.5vw + .95rem,1.2rem)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem}
.hero__cue{
  position:absolute; left:50%; bottom:1.9rem; translate:-50% 0; z-index:2;
  width:22px; height:38px; border:1px solid var(--ivory-30); border-radius:12px; display:grid; place-items:start center;
}
.hero__cue span{width:2px; height:7px; margin-top:7px; background:var(--champagne); border-radius:2px; animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{opacity:0; transform:translateY(0)} 35%{opacity:1} 70%,100%{opacity:0; transform:translateY(11px)}}
@media (max-width:640px){ .hero__cue{display:none} }

/* ── 7. SECTIONS ───────────────────────────────────────────────────────── */
.section{padding-block:var(--sec-y); position:relative; scroll-margin-top:var(--nav-h)}
.section--alt{background:var(--ink-2); border-block:1px solid var(--line-soft)}
.sec-head{margin-bottom:clamp(2.75rem,5vw,4.5rem); max-width:70ch}
.sec-head .display{margin-bottom:1.5rem}
.sec-head--center{margin-inline:auto; text-align:center; max-width:52ch}
.sec-head--split{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; max-width:none}
.sec-head--split .lede{max-width:38ch; padding-bottom:.4rem}
.sec-foot{margin-top:clamp(2.5rem,4vw,3.75rem); display:flex; justify-content:center}

/* ── 8. MEDIA + PLACEHOLDERS ───────────────────────────────────────────── */
.media{
  position:relative; margin:0; overflow:hidden; background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:2px;
}
.media img,.media video{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), opacity .8s var(--ease)}
.media--16x9{aspect-ratio:16/9}
.media--4x5{aspect-ratio:4/5}
.media--3x2{aspect-ratio:3/2}
.media--1x1{aspect-ratio:1/1}

/* Cinematic gradient stand-in shown when a media file is missing.
   Keeps layout, tone and labelling honest until real assets are dropped in. */
.media.is-missing::before, .hero__media.is-missing::before, .final__media.is-missing::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(200,181,141,.14) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 88%, rgba(126,139,130,.20) 0%, transparent 60%),
    linear-gradient(152deg, #101815 0%, #0A0F0C 52%, #0D1512 100%);
}
.media.is-missing::after, .final__media.is-missing::after{
  content:attr(data-label); position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory-30);
  border-top:1px solid var(--line-soft); padding-top:.65rem;
}
.card .media.is-missing::after{top:1.1rem; bottom:auto; border-top:0; border-bottom:1px solid var(--line-soft); padding:0 0 .65rem}
.media.is-missing img,.media.is-missing video{display:none}

/* ── 9. WORK GRID ──────────────────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.filters button{
  background:none; border:1px solid var(--line); border-radius:999px; padding:.55rem 1.15rem; cursor:pointer;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-50);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.filters button:hover{color:var(--ivory); border-color:var(--ivory-30)}
.filters button[aria-selected="true"]{color:var(--ink); background:var(--champagne); border-color:var(--champagne)}

.work-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,1.6vw,1.6rem); grid-auto-flow:dense}
.card{position:relative; grid-column:span 3; text-align:left; background:none; border:0; padding:0; cursor:pointer; display:block; width:100%; overflow:hidden; border-radius:2px}
.card--wide{grid-column:span 6}
.card--third{grid-column:span 2}
.card[hidden]{display:none}
.card .media{aspect-ratio:5/4; border:0}
.card--wide .media{aspect-ratio:16/9}
.card--third .media{aspect-ratio:4/5}
.card:hover .media img,.card:hover .media video,.card:focus-visible .media img{transform:scale(1.045)}
.card__shade{position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(10,15,12,.78) 100%); opacity:.9; transition:opacity .6s var(--ease)}
.card:hover .card__shade{opacity:1}
.card__badge{
  display:inline-block; margin-top:.75rem; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--champagne); border:1px solid rgba(200,181,141,.45); background:rgba(10,15,12,.55);
  padding:.32rem .6rem; border-radius:999px;
}
.card__play{
  position:absolute; top:1rem; right:1rem; z-index:2; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; background:rgba(10,15,12,.5); backdrop-filter:blur(6px); color:var(--ivory);
}
.card__meta{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(1rem,1.7vw,1.6rem); display:flex; flex-direction:column; align-items:flex-start}
.card__name{font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.15; letter-spacing:-.01em}
.card__sub{
  display:flex; flex-direction:column; gap:.25rem; margin-top:.55rem;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-50);
}
.card__sub span:last-child{color:var(--sage)}
.card__open{
  margin-top:.9rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne);
  display:inline-flex; align-items:center; gap:.5rem; opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.card:hover .card__open,.card:focus-visible .card__open{opacity:1; transform:none}
@media (max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .card,.card--third{grid-column:span 1}
  .card--wide{grid-column:span 2}
  .card__open{opacity:1; transform:none}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr}
  .card,.card--wide,.card--third{grid-column:span 1}
  .card .media,.card--third .media{aspect-ratio:4/5}
}

/* ── 10. ABOUT ─────────────────────────────────────────────────────────── */
.about{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(2rem,5vw,5.5rem); align-items:center}
.about__text p{color:var(--ivory-70); max-width:52ch}
.about__facts{margin-top:2.4rem; border-top:1px solid var(--line-soft)}
.about__facts li{
  display:flex; flex-wrap:wrap; gap:.35rem 1.5rem; padding:.95rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.85rem; color:var(--ivory-70);
}
.about__facts span{
  flex:0 0 8rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne);
  padding-top:.15rem;
}
@media (max-width:860px){ .about{grid-template-columns:1fr} }

/* ── 11. SERVICES ──────────────────────────────────────────────────────── */
.services{border-top:1px solid var(--line-soft)}
.service{
  display:grid; grid-template-columns:5rem minmax(0,1fr) minmax(0,.9fr); gap:clamp(1rem,3vw,3rem);
  align-items:center; padding:clamp(1.75rem,3vw,2.75rem) 0; border-bottom:1px solid var(--line-soft);
  transition:background .5s var(--ease);
}
.service:hover{background:linear-gradient(90deg, rgba(200,181,141,.05), transparent 70%)}
.service__n{font-family:var(--serif); font-size:1.6rem; color:var(--champagne); opacity:.7; line-height:1; align-self:start; padding-top:.4rem; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1}
.service__title{margin-bottom:.75rem}
.service__copy{color:var(--ivory-70); max-width:52ch; font-size:.98rem}
.service__media{width:100%}
.service__media .media{aspect-ratio:16/10}
.service:hover .service__media img{transform:scale(1.05)}
@media (max-width:900px){
  .service{grid-template-columns:3.5rem minmax(0,1fr); gap:1.25rem}
  .service__media{grid-column:1/-1; margin-top:.5rem}
}

/* ── 12. WHY GRID ──────────────────────────────────────────────────────── */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
@media (max-width:940px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr} }
.why{background:var(--ink-2); padding:clamp(1.75rem,3vw,2.6rem)}
.why h3{margin-bottom:.8rem; font-size:1.3rem}
.why p{color:var(--ivory-70); font-size:.95rem}
.why__n{display:block; font-size:.66rem; letter-spacing:.2em; color:var(--champagne); margin-bottom:1.4rem}

/* ── 13. PROCESS ───────────────────────────────────────────────────────── */
.process{border-top:1px solid var(--line-soft)}
.step{
  display:grid; grid-template-columns:clamp(4.5rem,9vw,9rem) minmax(0,1fr); gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.75rem,3.2vw,2.9rem) 0; border-bottom:1px solid var(--line-soft); align-items:start;
  position:relative; overflow:hidden;
}
.step::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--champagne);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .1s;
}
.step.is-in::after{transform:scaleX(1)}
.step__n{font-family:var(--serif); font-size:clamp(1.9rem,4vw,3.1rem); line-height:1; color:var(--champagne); opacity:.55; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1}
.step h3{font-size:clamp(1.4rem,2.4vw,2rem); margin-bottom:.7rem}
.step p{color:var(--ivory-70); max-width:56ch}

/* ── 14. TESTIMONIALS ──────────────────────────────────────────────────── */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(1rem,1.8vw,1.75rem)}
.quote{border:1px solid var(--line-soft); border-radius:2px; padding:clamp(1.75rem,3vw,2.5rem); background:var(--ink); display:flex; flex-direction:column}
.quote__mark{font-family:var(--serif); font-size:3.2rem; line-height:.6; color:var(--champagne); opacity:.4; margin-bottom:1.25rem}
.quote blockquote{margin:0; font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.42; letter-spacing:-.005em; flex:1}
.quote__by{display:flex; align-items:center; gap:.9rem; margin-top:2rem; padding-top:1.35rem; border-top:1px solid var(--line-soft)}
.quote__ph{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--ink-3); border:1px solid var(--line-soft)}
.quote__name{font-size:.9rem}
.quote__role{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-50)}
.quote__project{margin-top:.9rem; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); opacity:.85}

/* Clearly-labelled placeholder state — never mistakable for a real quote */
.quote--placeholder{border-style:dashed; border-color:rgba(242,235,221,.18); background:transparent}
.quote--placeholder blockquote{color:var(--ivory-30); font-style:italic}
.quote__flag{
  align-self:flex-start; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage);
  border:1px solid rgba(126,139,130,.4); padding:.3rem .6rem; border-radius:999px; margin-bottom:1.5rem;
}
.logo-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.75rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line-soft);
}
.logo-row img{max-height:34px; width:auto; opacity:.55; filter:grayscale(1) brightness(1.6); transition:opacity .5s var(--ease)}
.logo-row img:hover{opacity:.9}
.logo-row:empty{display:none}

/* ── 15. BOOKING ───────────────────────────────────────────────────────── */
.booking{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,4.5rem); align-items:start}
.booking__text p{color:var(--ivory-70); max-width:46ch}
.booking__meta{margin-top:1.75rem; font-size:.9rem}
.booking__meta strong{color:var(--ivory); font-weight:500}
.booking__list{margin-top:1.75rem; border-top:1px solid var(--line-soft)}
.booking__list li{padding:.7rem 0; border-bottom:1px solid var(--line-soft); font-size:.85rem; color:var(--ivory-70); display:flex; gap:.85rem}
.booking__list li::before{content:"—"; color:var(--champagne); opacity:.7}
.booking__embed{border:1px solid var(--line-soft); border-radius:2px; background:var(--ink-2); min-height:520px; overflow:hidden}
.booking__embed iframe{width:100%; min-height:700px; border:0}
.embed-fallback{padding:clamp(1.75rem,3.5vw,3rem); display:grid; gap:1.25rem; align-content:center; min-height:520px; text-align:center}
.embed-fallback h3{font-size:1.6rem}
.embed-fallback p{color:var(--ivory-70); max-width:42ch; margin-inline:auto; font-size:.95rem}
.embed-fallback .tag{
  justify-self:center; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage);
  border:1px solid rgba(126,139,130,.4); padding:.3rem .7rem; border-radius:999px;
}
.embed-fallback .btn{justify-self:center}
.embed-fallback code{font-size:.85em; color:var(--champagne); background:rgba(200,181,141,.08); padding:.1em .4em; border-radius:2px}
@media (max-width:900px){ .booking{grid-template-columns:1fr} }

/* ── 16. CONTACT / FORMS ───────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,4vw,5rem); align-items:start}
.contact__text p{color:var(--ivory-70); max-width:40ch}
.contact__direct{margin-top:2rem; font-size:1rem}
.contact__direct a{color:var(--champagne); border-bottom:1px solid rgba(200,181,141,.35); padding-bottom:2px; transition:border-color .4s var(--ease)}
.contact__direct a:hover{border-color:var(--champagne)}
@media (max-width:900px){ .contact{grid-template-columns:1fr} }

.form{display:grid; gap:1.35rem}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.35rem}
@media (max-width:600px){ .form__row{grid-template-columns:1fr} }
.field{display:grid; gap:.55rem; min-width:0}
.field label{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-50)}
.field label span[aria-hidden]{color:var(--champagne)}
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:.75rem 0; font-size:.98rem; font-weight:300; width:100%;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical; min-height:120px}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C8B58D' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .25rem center; padding-right:1.75rem;
}
.field select option{background:var(--ink-2); color:var(--ivory)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:var(--champagne)}
.field input::placeholder,.field textarea::placeholder{color:var(--ivory-50)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-bottom-color:#C97F6B}
.err{color:#D9927E; font-size:.72rem; letter-spacing:.04em; min-height:0; display:none}
.field.is-invalid .err{display:block}

.check{display:flex; gap:.85rem; align-items:flex-start; cursor:pointer; text-transform:none; letter-spacing:0}
.check input{appearance:none; width:18px; height:18px; flex:none; margin-top:3px; border:1px solid var(--line); border-radius:2px; cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease)}
.check input:checked{background:var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' stroke='%230A0F0C' stroke-width='2'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--champagne)}
.check span{font-size:.85rem; line-height:1.6; color:var(--ivory-70); text-transform:none; letter-spacing:0}
.check a{color:var(--champagne); text-decoration:underline; text-underline-offset:3px}
.field--check{gap:.4rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__status{font-size:.88rem; color:var(--champagne); min-height:1.4em}
.form__status.is-error{color:#D9927E}
.form__ok{border:1px solid rgba(200,181,141,.4); border-radius:2px; padding:clamp(1.75rem,3vw,2.6rem); background:rgba(200,181,141,.05)}
.form__ok h3{margin-bottom:.75rem; font-size:1.6rem}
.form__ok p{color:var(--ivory-70)}

/* ── 17. INSTAGRAM ─────────────────────────────────────────────────────── */
.ig-handle{color:var(--champagne); margin-left:.5rem; white-space:nowrap; border-bottom:1px solid rgba(200,181,141,.35)}
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.5rem,1vw,1rem)}
.ig-tile{position:relative; display:block}
.ig-tile .media{aspect-ratio:1/1}
.ig-tile:hover img{transform:scale(1.06)}
.ig-tile__icon{position:absolute; inset:0; display:grid; place-items:center; color:var(--ivory); opacity:0; background:rgba(10,15,12,.45); transition:opacity .45s var(--ease)}
.ig-tile:hover .ig-tile__icon,.ig-tile:focus-visible .ig-tile__icon{opacity:1}
@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(3,1fr)} }

/* ── 18. FINAL CTA ─────────────────────────────────────────────────────── */
.final{position:relative; padding-block:clamp(6rem,15vw,11rem); text-align:center; overflow:hidden; isolation:isolate; border-top:1px solid var(--line-soft)}
.final__media{position:absolute; inset:0; z-index:-2}
.final__media img,.final__media video{width:100%; height:100%; object-fit:cover}
.final__scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,15,12,.9), rgba(10,15,12,.72) 50%, rgba(10,15,12,.94))}
.final__inner{max-width:56ch}
.final__title{margin-bottom:1.5rem}
.final__inner p{color:var(--ivory-70); margin-inline:auto; max-width:46ch}
.final .hero__cta{justify-content:center}

/* ── 19. FOOTER ────────────────────────────────────────────────────────── */
.footer{background:var(--ink-2); border-top:1px solid var(--line-soft); padding-top:clamp(3.5rem,7vw,6rem)}
.footer__inner{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem)}
.footer__brand .nav__logo{display:inline-block; margin-bottom:1.25rem}
.footer__stmt{font-family:var(--serif); font-size:1.2rem; line-height:1.4; max-width:26ch; margin-bottom:.75rem}
.footer__col h3{font-family:var(--sans); font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne); margin-bottom:1.35rem}
.footer__col a{display:block; font-size:.88rem; color:var(--ivory-70); padding:.3rem 0; transition:color .35s var(--ease)}
.footer__col a:hover{color:var(--champagne)}
.footer__social{display:flex; gap:.9rem; margin-top:1.1rem}
.footer__social a{display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; padding:0; transition:border-color .4s var(--ease), color .4s var(--ease)}
.footer__social a:hover{border-color:var(--champagne)}
.footer__base{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  margin-top:clamp(3rem,6vw,5rem); padding-block:1.75rem; border-top:1px solid var(--line-soft);
  font-size:.75rem; color:var(--ivory-50);
}
@media (max-width:820px){ .footer__inner{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer__inner{grid-template-columns:1fr} }

/* ── 20. CASE-STUDY MODAL ──────────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem)}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(6,9,8,.9); backdrop-filter:blur(6px); animation:fade .4s var(--ease)}
.modal__panel{
  position:relative; width:min(1080px,100%); max-height:90vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--ink-2); border:1px solid var(--line); border-radius:2px; padding:clamp(1.75rem,4vw,3.5rem);
  animation:rise .55s var(--ease);
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(18px)}}
.modal__close{
  position:absolute; top:1rem; right:1rem; z-index:3; width:42px; height:42px; display:grid; place-items:center;
  background:rgba(10,15,12,.6); border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--ivory);
  transition:border-color .4s var(--ease), color .4s var(--ease)
}
.modal__close:hover{border-color:var(--champagne); color:var(--champagne)}
.case__title{margin:.4rem 0 1.5rem}
.case__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:1.5rem; border-block:1px solid var(--line-soft); padding-block:1.5rem; margin-bottom:1.75rem}
.case__grid dt{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); margin-bottom:.5rem}
.case__grid dd{margin:0; font-size:.9rem; color:var(--ivory-70)}
.case__obj{color:var(--ivory-70); max-width:62ch; margin-bottom:1.75rem}
.case__media{margin-bottom:1.5rem}
.case__gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem}
.case__note{margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--ivory-50)}

/* ── 21. COOKIE BAR ────────────────────────────────────────────────────── */
.cookies{
  position:fixed; right:1.25rem; bottom:1.25rem; left:auto; z-index:95; width:min(400px, calc(100vw - 2.5rem));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.9rem 1.5rem;
  background:rgba(12,19,16,.96); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:2px; padding:1.1rem 1.25rem;
  animation:rise .6s var(--ease);
}
.cookies[hidden]{display:none}
@media (max-width:700px){
  body.has-cookie-bar .hero{padding-bottom:13rem}
  .cookies{right:1rem; left:1rem; width:auto}
}
.cookies p{font-size:.78rem; line-height:1.6; color:var(--ivory-70); flex:1 1 100%}
.cookies a{color:var(--champagne); text-decoration:underline; text-underline-offset:3px}
.cookies__actions{display:flex; gap:.6rem}

/* ── 22. LOADING VEIL ──────────────────────────────────────────────────── */
.veil{
  position:fixed; inset:0; z-index:110; background:var(--ink); display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.veil.is-done{opacity:0; visibility:hidden}
.veil__mark{
  font-size:clamp(.85rem,2vw,1.05rem); font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ivory); opacity:0; animation:markIn 1.5s var(--ease) forwards; padding-left:.42em;
}
.veil__mark em{font-style:normal; font-weight:300; color:var(--champagne)}
@keyframes markIn{0%{opacity:0; letter-spacing:.6em} 45%{opacity:1} 100%{opacity:1; letter-spacing:.42em}}

/* ── 23. SCROLL REVEAL + MOTION ────────────────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity var(--slow), transform var(--slow)}
[data-reveal].is-in{opacity:1; transform:none}
.hero__title .line{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  [data-reveal]{opacity:1; transform:none}
  .grain{animation:none}
  .hero__media img{animation:none}
}

/* ── 24. STANDALONE PAGES (404, thank-you, legal) ──────────────────────── */
.page{min-height:100svh; display:flex; flex-direction:column; padding-top:var(--nav-h)}
.page__body{flex:1; padding-block:clamp(4rem,10vw,7rem)}
.page__body h1{font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin-bottom:1.5rem}
.page__body h1 em{font-style:italic; color:var(--champagne)}
.page__body h2{font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:2.5rem 0 .9rem}
.page__body p,.page__body li{color:var(--ivory-70); max-width:70ch}
.page__body ul{list-style:disc; padding-left:1.25rem; margin:.75rem 0}
.page__body li{margin-bottom:.45rem}
.page__body a:not(.btn){color:var(--champagne); text-decoration:underline; text-underline-offset:3px}
.page__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem}
.draft-note{border:1px dashed rgba(126,139,130,.45); border-radius:2px; padding:1.1rem 1.35rem; margin-bottom:2.5rem; font-size:.85rem; color:var(--sage); max-width:70ch}