/* ============================================================
   WONDER WILD EVENTS - Design System
   Palette: Wonder Red / Warm Cream / Dark Azure
   Type: Giaza (display) × Archivo (grotesk)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Giaza';
  src:url('../assets/fonts/Giaza.woff2') format('woff2'),
      url('../assets/fonts/Giaza.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* color */
  --red:#cd4026;
  --red-deep:#a83318;
  --cream:#fcf9f4;
  --cream-deep:#f4eee3;
  --azure:#153c47;
  --azure-deep:#0f2e37;
  --ink:#132228;
  --line:rgba(21,60,71,.16);
  --line-light:rgba(252,249,244,.18);

  /* type */
  --display:'Giaza','Times New Roman',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',sans-serif;

  /* responsive scale */
  --step-6:clamp(3.4rem, 10.5vw, 10rem);   /* hero */
  --step-5:clamp(2.6rem, 7vw, 6.4rem);     /* page hero / statement */
  --step-4:clamp(2.1rem, 5vw, 4.4rem);     /* h2 */
  --step-3:clamp(1.5rem, 2.8vw, 2.4rem);   /* h3 */
  --step-2:clamp(1.1rem, 1.5vw, 1.35rem);  /* lead */
  --step-1:1.03rem;                        /* body */
  --step-0:.86rem;                         /* meta */
  --step-label:.72rem;                     /* eyebrows, buttons */

  /* rhythm */
  --pad-x:clamp(22px, 6vw, 110px);
  --section-y:clamp(90px, 13vw, 190px);
  --section-y-sm:clamp(60px, 8vw, 120px);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-wipe:cubic-bezier(.76,0,.24,1);
  --t-fast:.45s;
  --t-med:.7s;
  --t-slow:1.1s;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--step-1);
  line-height:1.65;
  overflow-x:hidden;
}
img{ display:block; width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--cream); }

/* ---------- Typography ---------- */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.015em;
  color:var(--azure);
}
h1{ font-size:var(--step-5); }
h1.mega{ font-size:var(--step-6); letter-spacing:-.02em; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-3); line-height:1.08; }
h4{ font-family:var(--sans); font-weight:500; }

.accent{ color:var(--red); }
.tilt{ font-style:italic; }  /* synthesized oblique - used sparingly */

p{ max-width:62ch; }
.lead{ font-size:var(--step-2); line-height:1.55; }
.meta{ font-size:var(--step-0); opacity:.72; }

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.78rem;
  font-weight:700;
  color:var(--red);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:15px; height:30px; flex:none;
  background:url("../assets/rose.png") center/contain no-repeat;
}
.eyebrow.bare::before{ display:none; }
.dark .eyebrow::before, .on-dark .eyebrow::before{ background-image:url("../assets/rose-dark.png"); }
.eyebrow.muted{ color:rgba(21,60,71,.7); }

/* on-dark helpers */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3{ color:var(--cream); }
.on-dark p{ color:rgba(252,249,244,.82); }
.on-dark .eyebrow.muted{ color:rgba(252,249,244,.72); }

/* ---------- Layout ---------- */
.wrap{ padding-left:var(--pad-x); padding-right:var(--pad-x); }
.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.section--sm{ padding-top:var(--section-y-sm); padding-bottom:var(--section-y-sm); }
.tone{ background:var(--cream-deep); }
.dark{ background:var(--azure); }
.center{ text-align:center; }
.mw-820{ max-width:820px; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:var(--step-label); font-weight:500;
  padding:20px 42px; overflow:hidden; isolation:isolate;
  background:var(--red); color:var(--cream);
  border:1px solid var(--red);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor:pointer;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--azure); transform:translateY(101%);
  transition:transform .5s var(--ease-wipe);
}
.btn:hover{ border-color:var(--azure); }
.btn:hover::after{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--azure); border-color:var(--azure); }
.btn--ghost::after{ background:var(--azure); }
.btn--ghost:hover{ color:var(--cream); }

.btn--light{ background:var(--cream); color:var(--azure); border-color:var(--cream); }
.btn--light::after{ background:var(--red); }
.btn--light:hover{ color:var(--cream); border-color:var(--red); }

.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:3px;
}

/* Text link with animated underline */
.tlink{ position:relative; }
.tlink::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-fast) var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }

.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:var(--step-label); font-weight:500; color:var(--red);
}
.arrow-link .a{ transition:transform var(--t-fast) var(--ease); }
.arrow-link:hover .a{ transform:translateX(6px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad-x);
  transition:padding .4s var(--ease), background .4s var(--ease),
             box-shadow .4s var(--ease);
}
.nav.is-solid{
  background:rgba(252,249,244,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.nav__logo{ display:flex; align-items:center; line-height:1; }
.nav__logo img{ width:auto; height:40px; display:block; }
.nav__logo .logo-fallback{
  display:none; font-family:var(--display); font-size:2rem; color:var(--red);
}
.nav__links{ display:flex; align-items:center; gap:40px; }
.nav__links a{
  font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.18em; font-size:var(--step-label); font-weight:500;
  color:var(--azure);
}
.nav__links a.cta{
  color:var(--cream); background:var(--red);
  padding:13px 26px; border:1px solid var(--red);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__links a.cta:hover{ background:var(--azure); border-color:var(--azure); }
.nav__links a.cta::after{ display:none; }
.nav__toggle{ display:none; }

/* Full-screen menu (mobile) */
.menu{
  position:fixed; inset:0; z-index:55; background:var(--azure);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:0 var(--pad-x);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .7s var(--ease-wipe);
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu a{
  font-family:var(--display); font-size:clamp(2.6rem,12vw,5.4rem);
  color:var(--cream); line-height:1.12;
  opacity:0; transform:translateY(30px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.menu a:hover{ color:var(--red); }
.menu.open a{ opacity:1; transform:none; }
.menu.open a:nth-child(1){ transition-delay:.18s; }
.menu.open a:nth-child(2){ transition-delay:.26s; }
.menu.open a:nth-child(3){ transition-delay:.34s; }
.menu.open a:nth-child(4){ transition-delay:.42s; }
.menu__foot{
  margin-top:46px; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.2em; font-size:var(--step-label); color:var(--cream);
  opacity:0; transition:opacity .5s ease .55s;
}
.menu.open .menu__foot{ opacity:.65; }

/* ============================================================
   HOME HERO - cream, editorial, type-led
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(140px,16vw,220px) var(--pad-x) 0;
  overflow:hidden;
}
.hero__eyebrow{ margin-bottom:clamp(20px,3vw,36px); }
.hero h1{ position:relative; z-index:2; max-width:12ch; }
.hero__sub{
  position:relative; z-index:2;
  margin-top:clamp(24px,3vw,40px); max-width:44ch;
  font-size:var(--step-2); line-height:1.55;
}
.hero__cta{ position:relative; z-index:2; margin-top:clamp(30px,4vw,48px); display:flex; gap:16px; flex-wrap:wrap; }
.hero__media{
  position:absolute; right:var(--pad-x); top:clamp(110px,13vw,170px);
  width:clamp(200px,26vw,420px); aspect-ratio:2/3; overflow:hidden; z-index:1;
}
.hero__media img{ height:100%; object-fit:cover; }
.hero__foot{
  margin-top:clamp(50px,7vw,90px);
  border-top:1px solid var(--line);
}

/* word ticker */
.ticker{ overflow:hidden; padding:20px 0; }
.ticker__track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:ticker 30s linear infinite; }
.ticker span{
  font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.9rem);
  color:var(--azure); opacity:.85; padding-right:28px;
}
.ticker span::after{
  content:""; display:inline-block; width:13px; height:26px;
  margin-left:28px; vertical-align:middle;
  background:url("../assets/rose.png") center/contain no-repeat;
}
.ticker span:nth-of-type(even)::after{ background-image:url("../assets/rose-swap.png"); }
.ticker--dark span{ color:var(--cream); }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ============================================================
   STATEMENT - azure editorial band
   ============================================================ */
.statement h2{ font-size:var(--step-5); max-width:24ch; }
.statement .eyebrow{ margin-bottom:clamp(24px,3vw,40px); }
.statement__foot{
  margin-top:clamp(40px,6vw,80px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;
}
.statement__foot p{ max-width:44ch; }
.statement__actions{ display:flex; align-items:center; gap:clamp(22px,3vw,36px); flex-wrap:wrap; }
.statement__lead{ font-size:clamp(1.3rem, 2.3vw, 1.7rem); line-height:1.45; font-weight:500; max-width:44ch; }
.on-dark .statement__lead{ color:rgba(252,249,244,.95); }

/* ============================================================
   FEATURED WORK
   ============================================================ */
.work-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:24px; margin-bottom:clamp(40px,6vw,80px);
}
.feature{ display:block; position:relative; }
.feature__media{ position:relative; overflow:hidden; aspect-ratio:16/9; }
.feature__media img{ height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.feature:hover .feature__media img{ transform:scale(1.04); }
.feature__title{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-top:26px;
}
.feature__title h3{ font-size:var(--step-4); }
.feature__tag{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--step-label); color:var(--azure); opacity:.65;
}
.feature__view{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:var(--step-label); font-weight:500; color:var(--red);
  opacity:0; transform:translateX(-10px); transition:.4s var(--ease);
}
.feature:hover .feature__view{ opacity:1; transform:none; }

/* frames strip - editorial offsets */
.frames{
  display:grid; grid-template-columns:1fr 1.2fr 1fr;
  gap:clamp(16px,2.6vw,44px);
  margin-top:clamp(50px,7vw,90px);
  align-items:start;
}
.frames .f{ overflow:hidden; }
.frames .f:nth-child(1){ aspect-ratio:3/4; margin-top:clamp(30px,5vw,80px); }
.frames .f:nth-child(2){ aspect-ratio:4/5; }
.frames .f:nth-child(3){ aspect-ratio:3/4; margin-top:clamp(50px,8vw,120px); }
.frames img{ height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.frames .f:hover img{ transform:scale(1.05); }
.frames figcaption{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:.66rem; opacity:.55; margin-top:12px;
}

/* ============================================================
   SERVICES INDEX (home) - numbered rows
   ============================================================ */
.svc-rows{ border-top:1px solid var(--line); margin-top:clamp(36px,5vw,64px); }
.svc-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:clamp(20px,4vw,60px);
  padding:clamp(26px,3.6vw,48px) 0;
  border-bottom:1px solid var(--line);
  position:relative; isolation:isolate;
  transition:padding-left .5s var(--ease);
}
.svc-row::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cream-deep); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease-wipe);
}
.svc-row:hover{ padding-left:clamp(10px,1.5vw,24px); }
.svc-row:hover::before{ transform:scaleY(1); }
.svc-row__num{
  font-family:var(--display); font-size:clamp(1.7rem, 2.8vw, 2.8rem);
  color:var(--red); line-height:1;
}
.svc-row h3{ font-size:var(--step-3); }
.svc-row p{
  grid-column:2; max-width:52ch; margin-top:10px;
  font-size:clamp(1.05rem, 1.4vw, 1.25rem); font-weight:500; opacity:.92;
}
.svc-row .a{ color:var(--red); font-size:1.4rem; transition:transform .4s var(--ease); }
.svc-row:hover .a{ transform:translateX(8px); }

/* ============================================================
   INSTAGRAM PINNED SHOWCASE
   ============================================================ */
.pins{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(36px,5vw,60px);
}
.pin{
  position:relative; aspect-ratio:4/5; overflow:hidden; display:block;
  background:var(--cream-deep);
}
.pin img, .pin video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .9s var(--ease);
}
.pin:hover img, .pin:hover video{ transform:scale(1.04); }
.pin__tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--sans); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  font-size:.7rem; color:var(--cream);
  background:rgba(19,34,40,.55); padding:7px 12px; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(6px); transition:.4s var(--ease);
}
.pin:hover .pin__tag{ opacity:1; transform:none; }
.pin__vol{
  position:absolute; right:14px; bottom:14px; z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(252,249,244,.92); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:.4s var(--ease);
}
.pin:hover .pin__vol{ opacity:1; transform:none; }
.pin__vol svg{ width:18px; height:18px; fill:currentColor; }
.pin__vol:hover{ background:var(--cream); }
@media (max-width:900px){ .pins{ grid-template-columns:1fr; max-width:440px; } }

/* ============================================================
   INSTAGRAM GRID
   ============================================================ */
.ig-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(36px,5vw,60px);
}
.ig-tile{ position:relative; aspect-ratio:1; overflow:hidden; display:block; background:var(--cream-deep); }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.ig-tile::after{
  content:"↗"; position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:clamp(1.3rem,2vw,1.8rem);
  color:var(--cream); background:rgba(205,64,38,.82);
  opacity:0; transition:opacity .4s var(--ease);
}
.ig-tile:hover::after, .ig-tile:focus-visible::after{ opacity:1; }
.ig-tile:hover img{ transform:scale(1.07); }
.ig-foot{
  margin-top:clamp(28px,4vw,44px); display:flex; justify-content:center;
}
@media (max-width:900px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .ig-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ============================================================
   APPROACH - numbered editorial steps
   ============================================================ */
.steps{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(44px,6vw,80px);
}
.step{ border-top:1px solid var(--line); padding-top:22px; }
.step__num{ font-family:var(--display); font-size:clamp(1.8rem,3vw,2.8rem); color:var(--red); display:block; }
.step h3{ font-size:1.15rem; font-family:var(--sans); font-weight:500; letter-spacing:.02em; margin:16px 0 10px; color:var(--azure); }
.step p{ font-size:var(--step-0); opacity:.8; }
.dark .step{ border-top-color:var(--line-light); }
.dark .step h3{ color:var(--cream); }
.dark .step p{ color:rgba(252,249,244,.75); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.quote{ position:relative; }
.quote__mark{
  font-family:var(--display); font-size:clamp(6rem,14vw,13rem); line-height:.6;
  color:var(--red); display:block; margin-bottom:clamp(10px,2vw,26px);
}
.quote blockquote{
  font-family:var(--display); font-size:var(--step-4); line-height:1.12;
  color:var(--azure); max-width:24ch;
}
.quote cite{
  display:block; margin-top:30px; font-style:normal;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--step-label); opacity:.65;
}

/* ============================================================
   ABOUT TEASER / SPLIT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.split__media{ overflow:hidden; aspect-ratio:4/5; }
.split__media img{ height:100%; object-fit:cover; }
.split__body h2{ margin:18px 0 24px; }
.split--flip .split__media{ order:2; }

/* ============================================================
   CLOSING CTA - azure
   ============================================================ */
.closing{ text-align:center; position:relative; overflow:hidden; }
.closing h2{ font-size:var(--step-5); max-width:18ch; margin-inline:auto; }
.closing p{ margin:26px auto 40px; max-width:46ch; }
.closing .mark-bg{
  position:absolute; left:75%; top:42%; transform:translate(-50%,-50%);
  width:clamp(220px,26vw,420px);
  opacity:.07; pointer-events:none; z-index:0;
}
.closing > .wrap-inner{ position:relative; z-index:1; }

/* ============================================================
   FOOTER - azure editorial
   ============================================================ */
.footer{ background:var(--azure-deep); color:rgba(252,249,244,.82); padding:clamp(70px,9vw,120px) var(--pad-x) 40px; }
.footer__brand{
  font-family:var(--display); font-size:clamp(2.6rem,7vw,5.6rem);
  color:var(--cream); line-height:1;
}
.footer__brand .dot{ color:var(--red); }
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px;
  padding-bottom:clamp(44px,6vw,70px); border-bottom:1px solid var(--line-light);
}
.footer__tag{ margin-top:20px; font-size:var(--step-0); max-width:30ch; opacity:.7; }
.footer h4{
  color:var(--cream); text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--step-label); font-weight:500; margin-bottom:22px; opacity:.6;
}
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer ul a{ font-size:.95rem; }
.footer__bottom{
  display:flex; justify-content:space-between; padding-top:28px;
  flex-wrap:wrap; gap:12px; font-size:.76rem; opacity:.55; letter-spacing:.04em;
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{ padding:clamp(150px,18vw,230px) var(--pad-x) clamp(46px,6vw,80px); }
.page-hero h1{ margin-top:20px; max-width:14ch; }
.page-hero .lead{ margin-top:clamp(22px,3vw,34px); max-width:52ch; }

/* -------- Case study -------- */
.cs-cover{ overflow:hidden; aspect-ratio:16/9; }
.cs-cover img{ height:100%; object-fit:cover; }
.cs-intro{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(40px,6vw,100px); align-items:start; }
.cs-facts{ list-style:none; border-top:1px solid var(--line); }
.cs-facts li{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.cs-facts li span:first-child{ text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; opacity:.6; }
.cs-facts li span:last-child{ text-align:right; color:var(--azure); font-weight:500; }
.cs-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.5vw,40px); }
.cs-gallery .g{ overflow:hidden; aspect-ratio:4/5; }
.cs-gallery .g.wide{ grid-column:1/-1; aspect-ratio:16/9; }
.cs-gallery .g img{ height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.cs-gallery .g:hover img{ transform:scale(1.04); }
.cs-next{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding:clamp(40px,5vw,70px) 0; border-top:1px solid var(--line);
}

/* -------- Services page -------- */
.svc{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:center;
  margin-bottom:clamp(80px,11vw,170px);
}
.svc:last-of-type{ margin-bottom:0; }
.svc:nth-of-type(even) .svc__media{ order:2; }
.svc__media{ overflow:hidden; aspect-ratio:4/5; }
.svc__media img{ height:100%; object-fit:cover; }
.svc__body h2{ margin:16px 0 22px; }
.svc__incl{ list-style:none; margin-top:28px; border-top:1px solid var(--line); }
.svc__incl li{ padding:14px 0; border-bottom:1px solid var(--line); font-size:.95rem; display:flex; gap:14px; }
.svc__incl li::before{ content:"✦"; color:var(--red); }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:clamp(40px,5vw,70px); border:1px solid var(--line); background:var(--line); }
.tier{ background:var(--cream); padding:clamp(30px,3.4vw,50px); transition:background .5s var(--ease), color .5s var(--ease); }
.tier:hover{ background:var(--azure); color:var(--cream); }
.tier:hover h3{ color:var(--cream); }
.tier:hover .tier__label{ color:var(--red); }
.tier__label{
  font-family:var(--sans); letter-spacing:.2em; text-transform:uppercase;
  font-size:var(--step-label); font-weight:500; color:var(--red);
}
.tier h3{ margin:14px 0 12px; }
.tier p{ font-size:var(--step-0); opacity:.85; }

/* capabilities cloud */
.caps{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:clamp(30px,4vw,50px); max-width:900px; }
.caps span{
  font-family:var(--sans); font-size:var(--step-0);
  border:1px solid var(--line-light); padding:10px 20px; border-radius:999px;
  color:rgba(252,249,244,.85);
}

/* -------- About page -------- */
.two-col{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,7vw,110px); align-items:start; }
.sig{ margin-top:30px; font-family:var(--display); font-style:italic; font-size:1.9rem; color:var(--red); }
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.5vw,50px); margin-top:clamp(40px,6vw,70px); }
.value{ border-top:1px solid var(--line); padding-top:24px; }
.value h3{ font-size:1.5rem; margin-bottom:14px; }
.value p{ font-size:var(--step-0); opacity:.85; }
.process{ margin-top:clamp(36px,5vw,60px); }
.process__item{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,70px);
  padding:clamp(28px,3.4vw,46px) 0; border-top:1px solid var(--line); align-items:baseline;
}
.process__item:last-child{ border-bottom:1px solid var(--line); }
.process__num{ font-family:var(--display); font-size:clamp(2rem,4vw,3.4rem); color:var(--red); }
.process__item h3{ margin-bottom:10px; }

/* -------- Contact page -------- */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,100px); align-items:start; }
.contact__aside .lead{ max-width:36ch; }
.contact__aside .block{ margin-top:36px; }
.contact__aside h4{
  text-transform:uppercase; letter-spacing:.2em; font-size:var(--step-label);
  font-weight:500; opacity:.55; margin-bottom:10px;
}
.contact__aside a{ display:inline-block; margin-top:4px; }
form{ display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1/-1; }
label{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; font-weight:500; color:var(--azure); opacity:.7; margin-bottom:10px;
}
input, select, textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:10px 0;
  transition:border-color .4s var(--ease);
}
input::placeholder, textarea::placeholder{ color:rgba(19,34,40,.35); }
input:focus, select:focus, textarea:focus{ outline:0; border-color:var(--red); }
textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:.78rem; opacity:.6; grid-column:1/-1; }
.form-err{ color:var(--red); opacity:1; display:none; }
.thanks{ display:none; padding:30px 0; }
.thanks.show{ display:block; }

/* ============================================================
   REVEAL HOOKS (GSAP)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(46px); }
.reveal-img{ overflow:hidden; }
.reveal-img img{ transform:scale(1.12); }

/* Split-line masks */
.split-lines .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.split-lines .line__in{ display:block; will-change:transform; }
.split-lines .word{ display:inline; }

/* ============================================================
   INTRO LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:9500; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  will-change:transform;
}
.loader__logo{ width:min(320px,56vw); }
.loader__logo img{ width:100%; opacity:0; transform:translateY(26px) scale(.97); filter:blur(6px); }
.loader.in .loader__logo img{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease);
}
.loader__bar{ width:130px; height:1.5px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; }
.loader.in .loader__bar i{ transform:scaleX(1); transition:transform 1.5s var(--ease-wipe) .15s; }
.loader.done{ transform:translateY(-100%); transition:transform .95s var(--ease-wipe); }
body.loading{ overflow:hidden; }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-transition{
  position:fixed; inset:0; z-index:9000; background:var(--azure);
  transform:translateY(100%); pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.page-transition.cover{ transform:translateY(0); transition:transform .55s var(--ease-wipe); }
.page-transition.reveal-out{ transform:translateY(-100%); transition:transform .65s var(--ease-wipe); }
.page-transition.no-trans{ transition:none !important; }
.page-transition__mark{ width:64px; opacity:0; transition:opacity .3s ease; }
.page-transition.cover .page-transition__mark{ opacity:1; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--red);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), opacity .3s ease;
  mix-blend-mode:multiply;
}
.cursor.hover{ width:56px; height:56px; background:rgba(205,64,38,.16); }
.cursor.hidden{ opacity:0; }
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button{ cursor:none; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } body.has-cursor{ cursor:auto; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .steps{ grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,40px); }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; gap:5px; width:30px; cursor:pointer;
    background:none; border:0; padding:6px 0; z-index:70;
  }
  .nav__toggle span{ height:1.5px; background:var(--azure); transition:.4s var(--ease); }
  .nav__toggle.open span{ background:var(--cream); }
  .nav__toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2){ opacity:0; }
  .nav__toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .hero{ min-height:auto; padding-bottom:0; }
  .hero__media{
    position:relative; right:auto; top:auto; width:100%; max-width:440px;
    margin-top:clamp(36px,7vw,60px); aspect-ratio:2/3;
  }
  .hero__media img{ height:100%; }
  .hero h1{ max-width:none; }

  .svc-row{ grid-template-columns:auto 1fr; }
  .svc-row .a{ display:none; }
  .frames{ grid-template-columns:1fr 1fr; }
  .frames .f:nth-child(3){ display:none; }
  .split, .split--flip{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .split__media{ max-width:520px; }
  .two-col{ grid-template-columns:1fr; }
  .cs-intro{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; }
  .svc:nth-of-type(even) .svc__media{ order:0; }
  .contact{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px){
  form{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .frames{ grid-template-columns:1fr; }
  .frames .f:nth-child(1), .frames .f:nth-child(3){ margin-top:0; }
  .cs-gallery{ grid-template-columns:1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  .reveal-img img{ transform:none; }
  .split-lines .line__in{ transform:none !important; }
  .cursor{ display:none; }
  body.has-cursor{ cursor:auto; }
  body.loading{ overflow:auto; }
  .page-transition, .loader{ display:none; }
  .ticker__track{ animation:none !important; }
}

/* ============================================================
   LOOKBOOK (Work page) - d.o.d lookbook system
   ============================================================ */
.look{ position:relative; display:block; overflow:hidden; height:90svh; background:var(--ink); }
.look img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; filter:grayscale(1);
  will-change:transform;
  transition:filter .9s var(--ease);
}
.look:hover img{ filter:grayscale(0); }
.look:hover .look__title{ transform:translateY(-10px) scale(1.03); font-style:italic; }
.look:hover .look__num{ letter-spacing:.5em; }
.look::after{
  content:""; position:absolute; inset:0;
  background:rgba(19,34,40,.1); pointer-events:none;
}
.look__meta{
  position:absolute; left:var(--pad-x); right:var(--pad-x);
  bottom:clamp(28px,5vw,64px); z-index:2;
  mix-blend-mode:difference;
}
.look:nth-of-type(even) .look__meta{ text-align:right; }
.look__num{
  font-family:var(--sans); text-transform:uppercase; font-weight:500;
  letter-spacing:.3em; font-size:.7rem; color:rgba(255,255,255,.75); display:block;
  transition:letter-spacing .7s var(--ease);
}
.look__title{
  font-family:var(--display); font-weight:400;
  letter-spacing:-.015em; line-height:1.02;
  font-size:clamp(2.4rem,6.4vw,5rem); color:#fff; margin-top:10px;
  transition:transform .7s var(--ease);
  transform-origin:left bottom;
}
.look:nth-of-type(even) .look__title{ transform-origin:right bottom; }
@media (min-width:768px){ .look{ height:100vh; } }

/* ============================================================
   FOLIO - editorial spreads, one favorite event at a time
   ============================================================ */
.folio{ margin-top:clamp(40px,6vw,90px); }
.folio__head{ margin-bottom:clamp(46px,6vw,90px); }
.folio__head h2{ margin-top:16px; max-width:14ch; }

.spread{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.8vw,26px);
  align-items:start;
  margin-bottom:clamp(80px,10vw,150px);
}
.sp-f{ position:relative; overflow:hidden; margin:0; }
.sp-f img{
  position:absolute; inset:0; width:100%; height:118%;
  object-fit:cover; will-change:transform;
}
.sp-cap .sp-num{
  display:block; font-family:var(--display);
  font-size:clamp(2.6rem,4.5vw,4.8rem); line-height:1; color:var(--red);
}
.sp-cap h3{ margin-top:14px; max-width:12ch; }
.sp-cap p{ margin-top:14px; max-width:32ch; font-size:var(--step-0); line-height:1.7; opacity:.8; }

/* 02 · amalfi: chef hero + place setting, then a four-step filmstrip */
.spread--amalfi .sp-cap{ grid-column:1/4; padding-top:8px; }
.spread--amalfi .f1{ grid-column:4/9; aspect-ratio:4/5; }
.spread--amalfi .f2{ grid-column:9/13; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--amalfi .f3{ grid-column:1/4; aspect-ratio:4/5; }
.spread--amalfi .f4{ grid-column:4/7; aspect-ratio:4/5; margin-top:clamp(30px,4vw,70px); }
.spread--amalfi .f5{ grid-column:7/10; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--amalfi .f6{ grid-column:10/13; aspect-ratio:4/5; margin-top:clamp(90px,12vw,210px); }

/* 01 · pizza: wide opener, then a four-step filmstrip */
.spread--pizza .sp-cap{ grid-column:1/5; padding-top:8px; }
.spread--pizza .f1{ grid-column:5/13; aspect-ratio:3/2; }
.spread--pizza .f2{ grid-column:1/4; aspect-ratio:4/5; }
.spread--pizza .f3{ grid-column:4/7; aspect-ratio:4/5; margin-top:clamp(30px,4vw,70px); }
.spread--pizza .f4{ grid-column:7/10; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--pizza .f5{ grid-column:10/13; aspect-ratio:4/5; margin-top:clamp(90px,12vw,210px); }

/* 03 · wedding: a room in bloom, caption seated right, then a cascade.
   These photos are shown in full: frames take each image's natural height,
   nothing is cropped, so no inner drift on this spread. */
.spread--wedding .f1{ grid-column:1/8; }
.spread--wedding .sp-cap{ grid-column:9/13; align-self:center; }
.spread--wedding .f2{ grid-column:1/5; }
.spread--wedding .f3{ grid-column:5/9; margin-top:clamp(40px,5vw,90px); }
.spread--wedding .f4{ grid-column:9/13; margin-top:clamp(80px,10vw,180px); }
.spread--wedding .sp-f{ aspect-ratio:auto; }
.spread--wedding .sp-f img{ position:static; width:100%; height:auto; transform:none; }

/* 03 · d.o.d: the closing feature. Finale hero, then a cascading strip */
.spread--dod .sp-cap{ grid-column:1/4; padding-top:8px; }
.spread--dod .f1{ grid-column:4/10; aspect-ratio:4/5; }
.spread--dod .f2{ grid-column:10/13; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--dod .f3{ grid-column:1/5; aspect-ratio:4/5; }
.spread--dod .f4{ grid-column:5/9; aspect-ratio:4/5; margin-top:clamp(40px,5vw,90px); }
.spread--dod .f5{ grid-column:9/13; aspect-ratio:4/5; margin-top:clamp(80px,10vw,180px); }

.sp-credits{ margin-top:22px; padding:0; list-style:none; }
.sp-credits li{
  display:flex; align-items:center; gap:10px; padding:5px 0;
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; line-height:1.4; color:var(--azure); opacity:.65;
}
.sp-credits li::before{
  content:""; width:9px; height:18px; flex:none;
  background:url("../assets/rose.png") center/contain no-repeat;
}

@media (max-width:1100px){
  .spread{ display:block; margin-bottom:clamp(60px,10vw,90px); }
  .sp-cap{ margin-bottom:22px; }
  .sp-f{ margin-top:14px; aspect-ratio:4/5; }
  .sp-f img{ height:100%; }
  .spread--pizza .f1{ aspect-ratio:3/2; }
  .spread .sp-f{ margin-top:14px; }
  .spread--wedding .sp-cap{ margin-top:22px; margin-bottom:0; }
  .sp-cap p{ max-width:52ch; }
  .sp-credits li{ font-size:.74rem; }
}

/* ============================================================
   SERVICES MENU - four calm rows; each opens into the full list
   ============================================================ */
.menu-intro{ margin-bottom:clamp(26px,3.5vw,44px); }
.menu-cat{ border-top:1px solid var(--line); }
.menu-cat:last-of-type{ border-bottom:1px solid var(--line); }
.menu-cat summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:clamp(18px,3vw,36px);
  padding:clamp(24px,3.2vw,40px) 0;
}
.menu-cat summary::-webkit-details-marker{ display:none; }
.menu-cat .num{
  font-family:var(--display); color:var(--red); line-height:1;
  font-size:clamp(1.7rem,2.8vw,2.8rem); flex:none;
}
.menu-cat__title h3{ font-size:clamp(1.4rem,2.6vw,2.3rem); transition:color var(--t-fast) var(--ease); }
.menu-cat__tease{ display:block; margin-top:6px; font-size:var(--step-0); opacity:.65; }
.menu-cat summary:hover h3{ color:var(--red); }
.menu-cat__icon{
  margin-left:auto; flex:none; position:relative; width:16px; height:16px;
}
.menu-cat__icon::before, .menu-cat__icon::after{
  content:""; position:absolute; background:var(--azure); inset:auto;
  transition:transform .35s var(--ease);
}
.menu-cat__icon::before{ left:0; top:7px; width:16px; height:2px; }
.menu-cat__icon::after{ left:7px; top:0; width:2px; height:16px; }
.menu-cat[open] .menu-cat__icon::after{ transform:scaleY(0); }
.menu-cat__body{ padding:0 0 clamp(34px,4.5vw,60px); }
.menu-cat[open] .menu-cat__body{ animation:menuIn .5s var(--ease) both; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.menu-cat__note{ max-width:52ch; font-size:var(--step-0); opacity:.75; margin-bottom:6px; }
.menu-groups{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px,3.5vw,48px); margin-top:clamp(6px,1vw,12px);
}
.menu-group h4{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700;
  color:var(--red); padding-bottom:12px; border-bottom:1px solid var(--line);
}
.menu-group ul{ list-style:none; margin-top:16px; padding:0; display:grid; gap:9px; }
.menu-group li{ font-size:.93rem; line-height:1.45; color:var(--ink); opacity:.85; }
.menu-group li a, .menu-flat li a{
  display:block; padding:4px 0;
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (max-width:900px){
  .menu-group li a, .menu-flat li a{ padding:7px 0; }
}
.menu-group li a:hover, .menu-flat li a:hover{
  color:var(--red); transform:translateX(4px);
}
.menu-flat{
  list-style:none; padding:0; margin-top:clamp(16px,2vw,26px);
  columns:3 240px; column-gap:clamp(30px,4vw,54px);
}
.menu-flat li{
  font-size:.93rem; line-height:1.5; opacity:.85;
  padding:7px 0; border-bottom:1px solid var(--line);
  break-inside:avoid;
}
@media (max-width:640px){
  .menu-cat summary{ gap:14px; }
}

/* ============================================================
   WORK MAGAZINE - full-bleed story covers + chapter spreads
   ============================================================ */
.cover{
  position:relative; height:100svh; overflow:hidden;
  background:var(--ink); display:flex; align-items:flex-end;
}
.cover > img{
  position:absolute; inset:0; width:100%; height:118%;
  object-fit:cover; will-change:transform;
}
.cover::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(19,34,40,.05) 42%, rgba(19,34,40,.62) 100%);
}
.cover__meta{ position:relative; z-index:2; padding:0 var(--pad-x) clamp(36px,6vw,70px); }
.cover__title{
  margin-top:14px; max-width:14ch;
  font-size:clamp(2.4rem,6vw,5.4rem); line-height:.98;
}

/* framed cover: the photo is shown whole, never cropped */
.cover--frame{
  height:auto; min-height:100svh; background:var(--azure);
  display:grid; grid-template-columns:5fr 7fr; align-items:center;
  gap:clamp(24px,4vw,60px);
  padding:clamp(110px,14vh,160px) var(--pad-x) clamp(70px,9vh,110px);
}
.cover--frame::after{ display:none; }
.cover--frame .cover__meta{ padding:0; }
.cover--frame figure{ margin:0; justify-self:center; }
.cover--frame figure img{
  display:block; width:auto; max-width:100%; max-height:80svh; height:auto;
  transform:none;
}

/* uncropped spreads: frames follow each photo's natural height */
.spread--uncrop .sp-f{ aspect-ratio:auto; }
.spread--uncrop .sp-f img{ position:static; width:100%; height:auto; transform:none; }

/* chapter spreads */
.spread--wdod .sp-cap{ grid-column:1/4; padding-top:8px; }
.spread--wdod .f1{ grid-column:4/9; aspect-ratio:4/5; }
.spread--wdod .f2{ grid-column:9/13; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--wdod .f3{ grid-column:1/6; aspect-ratio:4/5; }
.spread--wdod .f4{ grid-column:6/10; aspect-ratio:4/5; margin-top:clamp(40px,5vw,90px); }

.spread--wss .sp-cap{ grid-column:1/5; padding-top:8px; }
.spread--wss .f1{ grid-column:5/13; aspect-ratio:3/2; }
.spread--wss .f2{ grid-column:1/4; aspect-ratio:4/5; }
.spread--wss .f3{ grid-column:4/7; aspect-ratio:4/5; margin-top:clamp(30px,4vw,70px); }
.spread--wss .f4{ grid-column:7/10; aspect-ratio:4/5; margin-top:clamp(60px,8vw,140px); }
.spread--wss .f5{ grid-column:10/13; aspect-ratio:4/5; margin-top:clamp(90px,12vw,210px); }

.spread--wwed .sp-cap{ grid-column:1/4; padding-top:8px; }
.spread--wwed .f1{ grid-column:4/9; }
.spread--wwed .f2{ grid-column:9/13; margin-top:clamp(60px,8vw,140px); }
.spread--wwed .f3{ grid-column:5/10; margin-top:clamp(20px,2.5vw,40px); }

/* archive strip */
.arch{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,32px); margin-top:clamp(30px,4vw,54px);
}
.arch figure{ margin:0; }
.arch__ph{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.arch__ph img{ position:absolute; inset:0; width:100%; height:118%; object-fit:cover; will-change:transform; }
.arch figcaption{ margin-top:12px; font-size:var(--step-0); opacity:.75; }

@media (max-width:900px){
  .cover{ height:82svh; }
  .cover--frame{ grid-template-columns:1fr; min-height:0; padding-top:clamp(90px,12vh,120px); }
  .arch{ grid-template-columns:1fr; }
}

/* ============================================================
   LOOKBOOK - photo plates, every image shown whole
   ============================================================ */
.book{ padding-bottom:clamp(40px,6vw,80px); }
.plate{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,30px); align-items:start;
  padding:0 var(--pad-x);
  margin:clamp(70px,9vw,140px) 0;
}
.plate:first-child{ margin-top:clamp(20px,3vw,40px); }
.plate figure{ margin:0; grid-row:1; }
.plate img{ display:block; width:100%; height:auto; transform:none; }
.plate--azure{
  background:var(--azure);
  padding-top:clamp(70px,9vw,130px);
  padding-bottom:clamp(70px,9vw,130px);
}
.drop-1{ margin-top:clamp(40px,5vw,90px) !important; }
.drop-2{ margin-top:clamp(80px,10vw,170px) !important; }
@media (max-width:900px){
  .plate{ display:block; margin:clamp(46px,8vw,70px) 0; }
  .plate figure{ margin-top:16px; }
  .plate figure:first-child{ margin-top:0; }
  .drop-1, .drop-2{ margin-top:16px !important; }
}

/* ============================================================
   LOOKBOOK FEED - one centered editorial column, Vogue cadence
   ============================================================ */
.vg-feed{ max-width:960px; margin:0 auto; padding:0 var(--pad-x) clamp(50px,7vw,90px); }
.vg{ margin:0 0 clamp(70px,9vw,120px); text-align:center; }
.vg__kicker{
  display:block; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.24em; color:var(--red);
}
.vg__title{
  margin-top:14px; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.05;
}
.vg__by{
  display:block; margin-top:14px; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--azure); opacity:.65;
}
.vg figure{ margin:clamp(26px,3.5vw,44px) 0 0; }
.vg__row{
  display:grid; align-items:start;
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(26px,3.5vw,44px);
}
.vg__row figure{ margin:0; }
.vg__row + .vg__row{ margin-top:clamp(14px,1.8vw,24px); }
.vg__row--2{ grid-template-columns:1fr 1fr; }
.vg__row--3{ grid-template-columns:repeat(3,1fr); }
.vg__row--solo{ grid-template-columns:1fr; max-width:62%; margin-inline:auto; }
@media (max-width:640px){
  .vg__row--2, .vg__row--3{ grid-template-columns:1fr; }
  .vg__row--solo{ max-width:100%; }
  .vg{ margin-bottom:clamp(56px,14vw,80px); }
}
.vg img{ display:block; width:100%; height:auto; transform:none; }

/* Vogue masthead for the lookbook */
.mast{ text-align:center; }
.mast h1{ max-width:none; margin-inline:auto; }
.mast__kicker{
  display:block; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.34em; color:var(--azure); opacity:.7;
}
.mast__vol{
  display:inline-flex; align-items:center; gap:18px;
  margin-top:clamp(20px,2.6vw,30px); padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--azure); opacity:.7;
}

/* mailto fallback notice reads as guidance, not an error */
.form-note--info{ color:var(--azure); opacity:.85; }