/* ============================================================
   Dolce Fiore — Awwwards-tier front-end
   ============================================================ */

:root{
  --black:#000;
  --accent:#0d7579;
  --grey-6c:#6c6c6c;
  --grey-79:#797979;
  --grey-25:rgba(0,0,0,0.25);
  --grey-40:rgba(0,0,0,0.4);
  --white:#fff;
  --gutter:clamp(20px, 6.25vw, 100px);
  --section-gap:clamp(80px, 15.6vw, 250px);
  --maxw:1600px;
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body{
  font-family:"Manrope",sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.5;
  overflow-x:hidden;
}
body.is-loading{cursor:wait}

/* ---------- Opening curtain: full-bleed white pane that collapses upward
   into the fixed topbar strip while the hero image zooms out behind it. ---------- */
.page-loader{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100svh;
  background:var(--white);
  z-index:60;                            /* above the topbar; below overlays */
  transition:height 1.6s var(--ease-in-out-quart), opacity .55s ease 1.6s;
  will-change:height;
  pointer-events:none;
}
body.hero-in .page-loader{
  height:86px;                           /* becomes the topbar strip */
  opacity:0;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,0.875vw,14px);
  letter-spacing:0.18em;
  text-transform:uppercase;line-height:1.24;
  padding:clamp(14px,1.31vw,21px) clamp(20px,1.875vw,30px);
  white-space:nowrap;overflow:hidden;
  transition:color .35s var(--ease-out-quart);
}
.btn > span{position:relative;z-index:2;transition:color .35s var(--ease-out-quart)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  transform:translateY(100%);
  transition:transform .55s var(--ease-out-expo);
}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:var(--white);color:var(--black)}
.btn-solid::before{background:var(--black)}
.btn-solid:hover{color:var(--white)}
.btn-outline{background:var(--white);color:var(--black);border:1px solid var(--black)}
.btn-outline::before{background:var(--black)}
.btn-outline:hover{color:var(--white)}

/* ============================================================
   HERO — full viewport, cinematic reveal + parallax on scroll
   ============================================================ */
.hero{
  position:relative;
  height:100vh;height:100svh;
  min-height:640px;
  overflow:hidden;
  background:#0a1611;
}

/* Outer wrap does parallax translation (JS-driven --py). */
.hero-media-wrap{
  position:absolute;inset:0;
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
/* Inner wrap does the cinematic clip-path reveal from a centre strip out. */
.hero-media{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(46% 0 46% 0);
  transition:clip-path 2.2s var(--ease-out-expo) .15s;
}
body.hero-in .hero-media{clip-path:inset(0 0 0 0)}

/* The image behind slowly zooms out while the loader collapses upward. */
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  transform:scale(1.4);
  filter:blur(4px) brightness(.9);
  transition:transform 2.6s var(--ease-out-expo), filter 1.6s var(--ease-out-expo) .2s;
}
body.hero-in .hero-bg{transform:scale(1);filter:blur(0) brightness(1)}

.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity:0;transition:opacity 1.2s ease 1.4s;
}
body.hero-in .hero-scrim{opacity:1}

/* Content parallax layer — JS drives --cy so text scrolls a bit faster. */
.hero-content-shift{
  position:absolute;inset:0;
  transform:translate3d(0, var(--cy, 0px), 0);
  will-change:transform;
}

/* Top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:86px;background:var(--white);
  display:flex;align-items:center;
  padding-inline:clamp(20px,1.9vw,30px);
  opacity:0;
  transition:opacity .5s ease 1.35s;      /* fades in as the loader collapses */
}
body.hero-in .topbar{opacity:1}
.wordmark{display:flex;flex-direction:column;align-items:center;line-height:.91;
  margin-left:clamp(8px,2.6vw,42px)}
.wordmark-name{
  font-family:"Cormorant Garamond",serif;font-weight:700;
  font-size:clamp(19px,1.64vw,26.3px);letter-spacing:0.13em;
  text-transform:uppercase;color:var(--black);
}
.wordmark-sub{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(8px,0.66vw,10.5px);letter-spacing:0.29em;
  text-transform:uppercase;color:var(--grey-79);margin-top:.35em;
}
.mainnav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:clamp(20px,3.1vw,50px);
}
.mainnav a{
  position:relative;
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,0.875vw,14px);letter-spacing:0.09em;
  text-transform:uppercase;color:var(--black);
  transition:color .3s ease;
}
.mainnav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--black);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .5s var(--ease-out-expo);
}
.mainnav a:hover::after{transform:scaleX(1);transform-origin:left center}
.topbar-icons{margin-left:auto;display:flex;align-items:center}
.topbar-icons img{width:clamp(78px,6.8vw,108.8px);height:auto}
.menu-toggle{display:none}

/* Hero content */
.hero-content{
  position:absolute;inset:0;
  padding:clamp(120px,15vw,180px) var(--gutter) clamp(40px,5vw,80px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-eyebrow{
  max-width:min(311px,26vw);              /* back to the tighter original width */
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,1vw,16px);line-height:1.28;letter-spacing:.01em;
  text-transform:uppercase;color:var(--white);
  overflow:hidden;
  margin-bottom:clamp(28px,3vw,48px);
}
.hero-eyebrow > span{
  display:block;
  transform:translateY(120%);
  transition:transform 1s var(--ease-out-expo) 1.5s;   /* after the loader collapse */
}
body.hero-in .hero-eyebrow > span{transform:translateY(0)}

/* Title + button share the last row and sit on the same baseline */
.hero-bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3.5vw,56px);
}
.hero-title{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(48px,8.5vw,140px);
  line-height:.82;                         /* tighter leading */
  letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--white);
}
.hero-line{
  display:block;overflow:hidden;
}
.hero-line .hero-word{
  display:inline-block;
  transform:translateY(105%);
  transition:transform 1.2s var(--ease-out-expo);
}
body.hero-in .hero-line .hero-word{transform:translateY(0)}
.hero-line.l1 .hero-word{transition-delay:1.7s}
.hero-line.l2 .hero-word{transition-delay:1.85s}
.hero-line.l3 .hero-word{transition-delay:2.0s}
.hero-line.l1{margin-left:0}
.hero-line.l2{margin-left:4vw}
.hero-line.l3{margin-left:2vw}

.hero-btn{
  flex-shrink:0;
  margin-bottom:10px;                      /* sit just above the last line's baseline */
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease 2.3s, transform .8s var(--ease-out-expo) 2.3s;
}
body.hero-in .hero-btn{opacity:1;transform:translateY(0)}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
[data-reveal="fade-up"]{
  opacity:0;transform:translateY(48px);
  transition:opacity 1s var(--ease-out-quart), transform 1.1s var(--ease-out-expo);
}
[data-reveal="fade-up"].is-in{opacity:1;transform:translateY(0)}

[data-reveal="clip-image"]{
  position:relative;overflow:hidden;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.4s var(--ease-in-out-quart);
}
[data-reveal="clip-image"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="clip-image"] img,
[data-reveal="clip-image"] > img{
  transform:scale(1.15);
  transition:transform 1.6s var(--ease-out-expo);
}
[data-reveal="clip-image"].is-in img,
[data-reveal="clip-image"].is-in > img{transform:scale(1)}

[data-reveal="stagger"] [data-reveal-item]{
  opacity:0;transform:translateY(48px);
  transition:opacity .9s var(--ease-out-quart), transform 1.1s var(--ease-out-expo);
}
[data-reveal="stagger"].is-in [data-reveal-item]{opacity:1;transform:translateY(0)}
[data-reveal="stagger"].is-in [data-reveal-item]:nth-child(1){transition-delay:0s}
[data-reveal="stagger"].is-in [data-reveal-item]:nth-child(2){transition-delay:.1s}
[data-reveal="stagger"].is-in [data-reveal-item]:nth-child(3){transition-delay:.2s}
[data-reveal="stagger"].is-in [data-reveal-item]:nth-child(4){transition-delay:.3s}
[data-reveal="stagger"].is-in [data-reveal-item]:nth-child(5){transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
  [data-reveal] img{transform:none !important}
  .hero-bg,.hero-line .hero-word,.hero-eyebrow > span,.hero-btn,.topbar{
    transform:none !important;opacity:1 !important;transition:none !important;
  }
}

/* ============================================================
   INTRO / STAT
   ============================================================ */
.intro{
  padding-block:clamp(80px,9.4vw,150px) clamp(48px,6.25vw,100px);
}
.intro-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.intro-title{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(34px,5.625vw,90px);line-height:.92;letter-spacing:-0.03em;
  color:var(--black);
}
.intro-title em{color:var(--accent);font-weight:500}

.stat{
  position:relative;flex-shrink:0;
  padding:clamp(24px,3.5vw,56px) clamp(30px,3.5vw,56px);
  isolation:isolate;
}
.stat-emblem{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  opacity:.7;z-index:-1;pointer-events:none;
}
.stat-row{
  position:relative;
  display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);
}
.stat-num{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(48px,5.5vw,88px);line-height:.9;letter-spacing:-0.03em;
}
.stat-label{
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(12px,1vw,16px);line-height:1.28;letter-spacing:.02em;
  text-transform:uppercase;color:var(--black);opacity:.6;
  white-space:nowrap;
}

/* ============================================================
   WORLDS — Figma horizontal fade + title & button on the same row
   ============================================================ */
.worlds{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.1vw,34px);
  padding:0 var(--gutter);
  max-width:var(--maxw);margin-inline:auto;
}
.world-card{
  position:relative;overflow:hidden;
  aspect-ratio:783 / 710;background:#efece7;
}
/* Base image — default framing */
.world-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 1.4s var(--ease-out-expo);
}
/* First card — original orientation, pushed-in framing that zooms on the couple.
   Specificity has to beat [data-reveal="clip-image"].is-in img. */
[data-reveal="clip-image"].is-in .world-img{transform:scale(1)}
[data-reveal="clip-image"].is-in .world-img--zoom{
  transform:scale(1.55);                  /* larger zoom so the couple reads well */
  object-position:55% 58%;                /* couple sits just right of centre, slightly below */
}
/* Consistent hover: identical delta zoom on both cards */
[data-reveal="clip-image"].is-in.world-card:hover .world-img{transform:scale(1.06)}
[data-reveal="clip-image"].is-in.world-card:hover .world-img--zoom{transform:scale(1.62)}

/* Soft white fade using the user-supplied PNG (432x184) */
.world-fade{
  position:absolute;left:0;bottom:0;
  width:55%;height:auto;                  /* keeps the PNG's aspect ratio */
  pointer-events:none;user-select:none;
  z-index:1;
}

.world-body{
  position:absolute;left:6.4%;bottom:8%;right:6.4%;z-index:2;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,32px);
}
.world-body h3{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(24px,2.8vw,44px);line-height:.92;letter-spacing:-0.03em;
  color:var(--black);
}

/* ============================================================
   PORTFOLIO — clean edges (no lateral mask)
   ============================================================ */
.portfolio{padding-top:var(--section-gap)}
.portfolio-title{
  text-align:center;
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(46px,7.5vw,120px);line-height:.92;letter-spacing:-0.03em;
  color:var(--black);
}
.portfolio-title em{color:var(--accent)}

.gallery{
  margin-top:clamp(40px,5vw,80px);
  overflow:hidden;
  width:100%;
}
.gallery-track{
  display:flex;gap:clamp(14px,1.4vw,22px);
  width:max-content;
  animation:gallery-scroll 80s linear infinite;
  will-change:transform;
}
.gallery-track:hover{animation-play-state:paused}
.gallery figure{
  position:relative;flex:0 0 auto;
  width:clamp(300px,28vw,460px);           /* larger portfolio slides */
  aspect-ratio:3/4;overflow:hidden;background:#ece7de;
  margin:0;
}
.gallery figure img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 1s var(--ease-out-expo);
}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  color:#fff;
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,0.75vw,12px);letter-spacing:0.22em;text-transform:uppercase;
}
@keyframes gallery-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .gallery-track{animation:none}
}

/* ============================================================
   MANIFESTO — smaller lines + word rotator
   ============================================================ */
.manifesto{
  display:grid;grid-template-columns:782fr 818fr;align-items:center;
  padding-top:var(--section-gap);
}
.manifesto-media{position:relative;aspect-ratio:782 / 975;background:#000;overflow:hidden}
.manifesto-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.manifesto-copy{padding-left:clamp(24px,4.25vw,68px);padding-right:var(--gutter)}

.eyebrow{
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:16px;letter-spacing:0.29em;
  text-transform:uppercase;color:var(--black);
  margin-bottom:clamp(28px,3.5vw,56px);
}

.manifesto-line{
  font-family:"Cormorant Garamond",serif;font-weight:500;font-style:normal;
  font-size:clamp(42px,6.875vw,110px);
  line-height:.92;                        /* tighter block leading */
  letter-spacing:-0.03em;
  color:var(--black);
}
/* No dividers on the plain rows — only the rotator carries a line. */
.ml-row{
  display:block;
  margin-bottom:0;                        /* rows sit tight against each other */
}
/* Character-level entrance for the plain rows (Every Event / deserves more). */
[data-anim="chars"] .char{
  display:inline-block;
  opacity:0;transform:translateY(90%);
  transition:opacity .4s ease, transform .6s var(--ease-out-expo);
}
[data-anim="chars"] .char.is-space{width:.28em}
.manifesto-copy.is-in [data-anim="chars"] .char{
  opacity:1;transform:translateY(0);
  transition-delay:calc(var(--i, 0) * 0.035s);
}

.rotator{
  position:relative;display:inline-block;vertical-align:baseline;
  width:var(--rotator-w, 6ch);            /* JS keeps this in sync with the active word */
  height:1em;
  font-style:italic;color:var(--accent);
  transition:width .55s var(--ease-out-expo);
  padding-bottom:.08em;
}
/* Each character is a span; the active word's chars rise in from below,
   with a per-character delay so the word composes left-to-right. */
.rotator-word{
  position:absolute;left:0;top:0;white-space:nowrap;
}
.rotator-word .char{
  display:inline-block;
  opacity:0;transform:translateY(90%);
  transition:opacity .35s ease, transform .55s var(--ease-out-expo);
}
.rotator-word.is-active .char{
  opacity:1;transform:translateY(0);
  transition-delay:calc(var(--i, 0) * 0.045s);   /* left-to-right stagger */
}
.rotator-word.is-out .char{
  opacity:0;transform:translateY(-40%);
  transition:opacity .3s ease, transform .4s var(--ease-out-expo);
}

/* Underline: teal, sweeps in from LEFT → RIGHT on every word change. */
.rotator-underline{
  position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}
.rotator-underline.is-drawing{
  transform:scaleX(1);
  transition:transform .8s var(--ease-out-expo);
}

/* ============================================================
   COLLECTION — product cards, Shop all baseline, hover arrow
   ============================================================ */
.collection{padding-top:var(--section-gap)}
.collection-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;
}
.collection-title{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(34px,5.625vw,90px);line-height:.92;letter-spacing:-0.03em;
  color:var(--black);
}
.collection-title em{font-weight:500}

.product-grid{
  margin-top:clamp(34px,5vw,80px);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px,1.9vw,30px);
}
.product{
  display:flex;flex-direction:column;gap:clamp(12px,1.1vw,18px);
  color:var(--black);
}
.product-image{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:#f2ede4;
}
.product-image img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 1s var(--ease-out-expo);
}
.product:hover .product-image img{transform:scale(1.06)}
.product-tag{
  position:absolute;top:14px;left:14px;
  background:var(--white);color:var(--black);
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  padding:6px 12px;
}
.product-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.product-info h3{
  font-family:"Cormorant Garamond",serif;font-weight:500;font-style:italic;
  font-size:clamp(20px,1.5vw,24px);letter-spacing:-0.01em;line-height:1.1;
}
.product-info p{
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,0.8vw,12px);letter-spacing:0.22em;text-transform:uppercase;
  color:var(--grey-6c);
}

/* Shared label link — 16px + animated underline. No arrows anywhere. */
.label-link{
  position:relative;flex-shrink:0;
  display:inline-block;
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:16px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--black);
  padding-bottom:8px;
}
.label-link::after{
  /* base grey underline */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grey-25);
}
.label-link::before{
  /* animated black underline that sweeps in from the right on hover */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--black);
  transform-origin:right center;transform:scaleX(0);
  transition:transform .55s var(--ease-out-expo);
  z-index:1;
}
.label-link:hover::before{transform-origin:left center;transform:scaleX(1)}
.label-link-text{display:inline-block}

/* ============================================================
   STUDIO — subtext editorial indent
   ============================================================ */
.studio{
  display:grid;
  grid-template-columns:minmax(0, 542fr) minmax(0, 900fr);   /* narrower image column */
  align-items:stretch;
  gap:0;
  padding-top:var(--section-gap);
  padding-inline:var(--gutter);              /* padding on both sides shrinks the media */
}
.studio-copy{
  position:relative;z-index:2;min-width:0;
  display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,38px) 0;
}
.studio-title{
  align-self:flex-start;
  white-space:nowrap;                        /* keep "Entirely imagined." on one line */
  width:max-content;                         /* let it overflow the copy column if needed */
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(34px,5vw,80px);            /* a hair smaller to keep the one-liner in check */
  line-height:.92;letter-spacing:-0.03em;
  color:var(--black);
  position:relative;z-index:3;
}
.studio-title em{color:var(--accent);font-style:italic}   /* teal green accent */
.studio-text{
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(13px,1vw,16px);line-height:1.28;color:var(--black);opacity:.6;
  max-width:272px;
  margin-top:clamp(20px,1.9vw,30px);
  margin-left:clamp(40px,5vw,80px);          /* still indented, a touch less */
}
.studio .btn-outline{
  align-self:flex-start;
  margin-top:auto;                           /* pinned to the bottom of the copy column */
  margin-left:0;                             /* flush left, in line with the title */
  margin-bottom:0;
}
.studio-media{
  position:relative;aspect-ratio:1057 / 782;overflow:hidden;background:#efece7;
  align-self:center;                          /* vertically centre in the row */
}
.studio-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* ============================================================
   INSTAGRAM — title starts from centre, IG icon next to Follow us
   ============================================================ */
.instagram{padding-top:var(--section-gap)}
.instagram-head{
  display:flex;flex-direction:column;align-items:flex-start;
  padding-left:50%;                    /* title starts at page centre */
  padding-right:var(--gutter);
}
.instagram-title{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(40px,5.625vw,90px);line-height:.91;letter-spacing:-0.03em;
  color:var(--black);
}
.ig-follow-row{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(14px,1.4vw,22px);
  margin-left:clamp(0px,1vw,18px);
}
.ig-icon{width:18px;height:18px;display:block}
.instagram-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(30px,5.5vw,88px);
}
.ig-tile{position:relative;aspect-ratio:400 / 500;overflow:hidden;background:#d9d9d9}
.ig-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 1s var(--ease-out-expo);
}
.ig-tile:hover img{transform:scale(1.06)}
/* Fourth tile — its top is very white and blends into the page, so we zoom in
   and shift the framing down to hide that band. */
.ig-tile--zoom img{transform:scale(1.35);object-position:center 70%}
.ig-tile--zoom:hover img{transform:scale(1.42)}

/* ============================================================
   FOOTER — address · logo · contacts in one row
   ============================================================ */
.footer{
  position:relative;
  padding:clamp(70px,9.5vw,152px) var(--gutter) clamp(30px,3.6vw,58px);
}
.footer-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(24px,4vw,64px);
}
.footer-addr{
  font-family:"Cormorant Garamond",serif;font-weight:500;font-style:normal;
  font-size:clamp(13px,1.125vw,18px);line-height:1.32;letter-spacing:.02em;
  text-transform:uppercase;color:var(--black);
  text-align:left;justify-self:start;
}
.footer-contact{
  display:flex;flex-direction:column;
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(13px,1.125vw,18px);line-height:1.32;letter-spacing:.02em;
  text-transform:uppercase;color:var(--black);
  text-align:right;justify-self:end;
}
.footer-contact a{transition:opacity .3s ease}
.footer-contact a:hover{opacity:.55}

.footer-brand{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(30px,3vw,50px) clamp(40px,5vw,80px);
  isolation:isolate;justify-self:center;
}
.footer-emblem{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:clamp(150px,14vw,230px);height:auto;
  opacity:.75;
  z-index:-1;pointer-events:none;
}
.footer-brand-text{position:relative;display:flex;flex-direction:column;align-items:center;line-height:.91}
.footer-name{
  font-family:"Cormorant Garamond",serif;font-weight:700;
  font-size:clamp(30px,2.99vw,47.9px);letter-spacing:0.13em;
  text-transform:uppercase;color:var(--black);
}
.footer-sub{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(13px,1.2vw,19.1px);letter-spacing:0.29em;
  text-transform:uppercase;color:var(--grey-79);margin-top:.45em;
}
.footer-legal{
  margin-top:clamp(60px,9vw,144px);text-align:center;
  font-family:"Manrope",sans-serif;font-weight:500;
  font-size:clamp(11px,0.875vw,14px);color:var(--grey-6c);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .mainnav,.topbar-icons{display:none}
  .menu-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
    margin-left:auto;width:30px;height:30px;background:none;border:0;cursor:pointer;
  }
  .menu-toggle span{display:block;height:1.5px;width:26px;background:var(--black)}
  .topbar{justify-content:space-between}
  .wordmark{margin-left:0}

  body.nav-open .mainnav{
    display:flex;flex-direction:column;gap:22px;
    position:fixed;top:86px;left:0;right:0;z-index:49;
    background:var(--white);padding:28px var(--gutter);
    border-top:1px solid #eee;transform:none;
  }

  .hero-line.l2{margin-left:6vw}
  .hero-line.l3{margin-left:3vw}
  .hero-btn{align-self:flex-start}

  .intro-inner{flex-direction:column;align-items:flex-start;gap:40px}
  .stat{padding:clamp(20px,3vw,32px) clamp(24px,3vw,40px)}
  .stat-row{flex-wrap:wrap}

  .worlds{grid-template-columns:1fr}
  .world-body{flex-direction:column;align-items:flex-start;gap:16px}

  .manifesto{grid-template-columns:1fr}
  .manifesto-media{aspect-ratio:16/11}
  .manifesto-copy{padding:40px var(--gutter) 0}

  .product-grid{grid-template-columns:repeat(2,1fr)}

  .studio{grid-template-columns:1fr;padding-right:var(--gutter)}
  .studio-copy{order:2;gap:24px;justify-content:flex-start;padding:32px 0 0}
  .studio-title{white-space:normal}
  .studio-text{margin-left:0}
  .studio-media{order:1;aspect-ratio:16/11}

  .instagram-head{padding-left:var(--gutter)}

  .footer-row{grid-template-columns:1fr;justify-items:center;gap:40px}
  .footer-addr,.footer-contact{text-align:center;justify-self:center}
  .footer-contact{align-items:center}
}

@media (max-width:560px){
  .hero{min-height:560px}
  .hero-title{font-size:14vw}
  .instagram-grid{grid-template-columns:repeat(2,1fr)}
}