/* ═══════════════════════════════════════════════════════════════
   BELLO VISION — Coastal · Elevated · Dark Tones × Coastal Miami
   Type: Bodoni Moda (display) · Italiana (deco caps) · Cormorant (body)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Palette: Bello Vision Brand Book 2026 (light green f9fbf8, light blue cedbe8, light orange ebe3d3, grey blue 505d6d) */
  --ink:#070707;        /* black dark sections (Carlos prefers black here) */
  --ink-2:#111110;
  --cream:#f9fbf8;      /* light green: light text on dark */
  --cream-2:#ebe3d3;
  --paper:#ebe3d3;      /* light orange: light sections */
  --sand:#ddd3c1;
  --sky:#cedbe8;        /* light blue */
  --sky-2:#bccbdb;
  --ocean:#505d6d;      /* grey blue */
  --ocean-2:#6f7d8e;
  --aqua:#a9bccf;
  --coral:#cedbe8;      /* accent: light blue */
  --muted:rgba(7,7,7,.55);
  --muted-inv:rgba(249,251,248,.62);

  --font-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-deco:"Italiana", "Cinzel", "Didot", serif;
  --font-body:"Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;

  --gutter:clamp(20px, 4vw, 64px);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.menu-open{overflow:hidden}

body{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(17px, 1.15vw, 20px);
  line-height:1.55;
  color:var(--cream);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:100%;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:italic}
::selection{background:var(--ink);color:var(--cream)}

/* Theme surfaces */
.theme-ink{background:var(--ink);color:var(--cream)}
.theme-cream{background:var(--paper);color:var(--ink)}
.theme-sky{background:var(--sky);color:var(--ink)}

/* ───────── Utilities ───────── */
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 var(--gutter);
  position:relative;
}

.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask>span{display:block;transform:translateY(110%);}
.is-ready .hero .line-mask>span{transition:transform 1.4s var(--ease)}
.services__h .line-mask>span,.join__h .line-mask>span{transform:none;transition:none}

.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

.img-wrap{overflow:hidden;position:relative;background:var(--sand)}
.img-wrap img{transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.img-wrap.in img,.reveal.in .img-wrap img{transform:scale(1)}

.arrow{display:inline-block;width:.9em;height:.9em;position:relative;margin-left:.5em;vertical-align:middle}
.arrow::before{content:"";position:absolute;inset:0;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg) scale(.6);transform-origin:center;transition:transform .5s var(--ease)}
.arrow::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
a:hover .arrow::after,button:hover .arrow::after{transform:translateY(-50%) scaleX(1)}
a:hover .arrow::before,button:hover .arrow::before{transform:translate(20%,0) rotate(45deg) scale(.6)}

.link-line{display:inline-flex;align-items:center;letter-spacing:.04em;font-size:1rem;position:relative;padding-bottom:4px}
.link-line::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:right;transition:transform .6s var(--ease)}
.link-line:hover::after{transform:scaleX(0)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-body);font-size:1.02rem;letter-spacing:.02em;
  padding:.8em 1.7em;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
  border:1px solid transparent;cursor:pointer;background:none;color:inherit;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn--cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--cream::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease);z-index:0;border-radius:inherit}
.btn--cream:hover{color:var(--cream)}
.btn--cream:hover::before{transform:translateY(0)}
.theme-cream .btn--cream,.theme-sky .btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.theme-cream .btn--cream::before,.theme-sky .btn--cream::before{background:var(--cream)}
.theme-cream .btn--cream:hover,.theme-sky .btn--cream:hover{color:var(--ink)}
.btn--ghost{border-color:rgba(249,251,248,.35)}
.btn--ghost:hover{border-color:var(--cream)}
.btn--wide{width:100%;justify-content:center;margin-top:8px}

/* ───────── Cursor + grain ───────── */

.grain{position:fixed;inset:0;z-index:800;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .45 .85 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px;mix-blend-mode:multiply}
body[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.09}

/* ───────── Nav ───────── */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:700;isolation:isolate;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--gutter);
  color:var(--cream);
  transition:padding .5s var(--ease),color .5s var(--ease);
}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,7,7,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .5s var(--ease)}
.nav.scrolled{padding-top:14px;padding-bottom:14px}
.nav.scrolled::before{opacity:1}
body[data-theme="light"] .nav::before{background:rgba(235,227,211,.9)}
.nav__brand{display:flex;align-items:baseline;gap:14px}
.nav__wordmark{font-family:var(--font-display);font-size:1.45rem;letter-spacing:.01em;line-height:1}
.nav__mono{font-family:var(--font-deco);font-size:1.1rem;letter-spacing:.06em;opacity:.84}
.nav__links{display:flex;gap:2.2em;justify-self:center}
.nav__links a{font-size:1.05rem;letter-spacing:.02em;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{justify-self:end}
body[data-theme="light"] .nav{color:var(--ink)}
body[data-theme="light"] .nav__cta.btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
body[data-theme="light"] .nav__cta.btn--cream::before{background:var(--cream)}
body[data-theme="light"] .nav__cta.btn--cream:hover{color:var(--ink)}
body[data-theme="light"] .nav__burger i{background:var(--ink)}
.nav__burger{display:none;justify-self:end;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.nav__burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--cream);transition:background .5s;top:19px;transition:transform .5s var(--ease)}
.nav__burger i+i{top:26px}
.nav__burger.open i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger.open i+i{transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:650;pointer-events:none;color:var(--ink)}
.menu__bg{position:absolute;inset:0;background:var(--sky);transform:translateY(-100%);transition:transform .9s var(--ease)}
.menu__inner{position:absolute;left:var(--gutter);right:var(--gutter);top:22vh;display:flex;flex-direction:column;gap:.1em}
.menu__inner a{font-family:var(--font-display);font-size:clamp(35.2px,8vw,67.2px);line-height:1.05;display:flex;align-items:baseline;gap:.4em;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.menu__inner a em{font-family:var(--font-body);font-style:normal;font-size:.9rem;letter-spacing:.04em;opacity:.8}
.menu__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:36px;display:flex;justify-content:space-between;letter-spacing:.04em;font-size:1rem;opacity:0;transition:opacity .6s .5s}
.menu.open{pointer-events:auto}
.menu.open .menu__bg{transform:none}
.menu.open .menu__inner a{opacity:1;transform:none}
.menu.open .menu__inner a:nth-child(1){transition-delay:.35s}
.menu.open .menu__inner a:nth-child(2){transition-delay:.42s}
.menu.open .menu__inner a:nth-child(3){transition-delay:.49s}
.menu.open .menu__inner a:nth-child(4){transition-delay:.56s}
.menu.open .menu__inner a:nth-child(5){transition-delay:.63s}
.menu.open .menu__foot{opacity:.8}

/* ───────── Hero ───────── */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr;padding:0 var(--gutter);overflow:hidden;isolation:isolate;background:var(--ink)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__media video{opacity:0;transition:opacity 1.8s ease}
.hero__media.has-video video{opacity:1}
.hero__media.has-video img{animation:none}
.hero__media img{transform:scale(1.04);animation:kenburns 18s var(--ease-out) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(7,7,7,.32), rgba(7,7,7,0) 55%),
    linear-gradient(to bottom, rgba(7,7,7,.42) 0%, rgba(7,7,7,.04) 22%, rgba(7,7,7,.12) 46%, rgba(7,7,7,.7) 74%, rgba(7,7,7,.97) 100%)}

/* film grain on the hero only: stronger than the page grain, with a 6-frame flicker */
.hero__grain{position:absolute;inset:-4%;z-index:-1;pointer-events:none;opacity:.42;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .4 .8 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:300px 300px;animation:heroGrain .9s steps(6) infinite}
@keyframes heroGrain{0%{transform:translate(0,0)}17%{transform:translate(-2%,1%)}34%{transform:translate(1%,-2%)}51%{transform:translate(-1%,2%)}68%{transform:translate(2%,-1%)}85%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
@keyframes bar{0%,100%{height:4px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){.hero__grain{animation:none}}
.hero__body{align-self:end;padding-bottom:8vh}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(61.6px,10.8vw,168px);
  line-height:.88;letter-spacing:-.025em;
  margin-left:-.04em;
}
.hero__title-italic{font-style:italic;font-weight:400;margin-right:.08em}
.hero__period{color:var(--coral)}
.hero__row{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-top:4vh}
.hero__sub{font-size:clamp(17px,1.25vw,22px);line-height:1.45;font-weight:400;max-width:38ch;opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease-out) .9s,transform 1.2s var(--ease-out) .9s}
.hero__row .btn{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease-out) 1.05s,transform 1.2s var(--ease-out) 1.05s,color .5s var(--ease)}
.is-ready .hero__sub,.is-ready .hero__row .btn{opacity:.92;transform:none}
.is-ready .hero__title .line-mask:nth-child(1)>span{transform:none;transition-delay:.4s}
.is-ready .hero__title .line-mask:nth-child(2)>span{transform:none;transition-delay:.52s}



/* ───────── Marquee ───────── */
.marquee{background:var(--ink);color:var(--cream);overflow:hidden;padding:22px 0}
.marquee__track{display:flex;align-items:center;gap:56px;white-space:nowrap;width:max-content;animation:marquee 34s linear infinite;}
.marquee__track span{font-family:var(--font-deco);font-size:clamp(19.36px,2.08vw,30.4px);letter-spacing:.1em;text-transform:uppercase}
.marquee__track i{font-style:normal;color:var(--coral);font-size:.9rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ───────── Studio (split words + arch photos + stats) ───────── */
.studio{padding:10.5vh 0 10.5vh;overflow-x:clip}
.studio__comp{
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;
  gap:24px var(--gutter);padding:2vh var(--gutter) 0;align-items:center;position:relative;
}
.studio__word{font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:.9;font-size:clamp(49.28px,7.6vw,120px);white-space:nowrap;position:relative;z-index:2}
.studio__word--a{grid-column:1/8;grid-row:1;align-self:end}
.studio__word--b{grid-column:5/13;grid-row:3;text-align:right;align-self:start;margin-top:-9vh}
.studio__fig{overflow:hidden;background:var(--sand);margin:0}
.studio__fig img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.studio__fig.in img{transform:scale(1)}
.studio__fig--arch{grid-column:8/11;grid-row:1/3;aspect-ratio:3/4.4;border-radius:999px 999px 0 0}
/* a printed photo tucked over the arch's corner */
.studio__print{grid-column:10/13;grid-row:1/2;align-self:start;margin:14vh 0 0;position:relative;z-index:1;aspect-ratio:4/3;width:88%;justify-self:end;
  border:clamp(6px,.7vw,11px) solid var(--cream);box-shadow:0 30px 50px -28px rgba(7,7,7,.45);overflow:hidden;background:var(--sand)}
/* hairline ring around the circle (the oval of the palm emblem), drawn as a gap + line outside the clip */
.studio__fig--round{grid-column:1/4;grid-row:2/4;aspect-ratio:1;border-radius:50%;align-self:start;margin-top:2vh;
  box-shadow:0 0 0 14px var(--paper),0 0 0 15px rgba(7,7,7,.32)}
.studio__text{grid-column:4/8;grid-row:2;align-self:center;padding-left:clamp(0px,2vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:3vh}
.studio__statement{font-size:clamp(20px,1.75vw,30px);line-height:1.35;font-weight:400;max-width:26ch}
.studio__statement em{font-family:var(--font-display);font-style:italic;font-weight:400}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin:9vh var(--gutter) 0}
.stats li{display:flex;flex-direction:column;gap:6px}
.stats strong{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,3.68vw,60.8px);line-height:.95;letter-spacing:-.03em}
.stats li>span{font-size:1.05rem;opacity:.84}

/* ───────── Postcards (pinned horizontal) ───────── */
.postcards{position:relative}
.postcards__pin{height:100vh;overflow:hidden;position:relative;display:flex;align-items:center}
.postcards__track{display:flex;align-items:center;gap:clamp(24px,4vw,64px);padding:0 var(--gutter);height:74vh}
.postcard{position:relative;flex:0 0 auto;height:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.postcard--tall{height:100%;aspect-ratio:2.6/4;margin-top:-6vh}
.postcard--wide{aspect-ratio:16/10}
.postcard--intro{aspect-ratio:auto;width:min(480px,80vw);background:none;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-right:2vw}
.postcard__h{font-family:var(--font-display);font-weight:400;font-size:clamp(38.72px,4.32vw,67.2px);line-height:.98;letter-spacing:-.02em}
.postcard--intro p{font-size:clamp(18px,1.35vw,22px);font-weight:400;max-width:34ch;line-height:1.45}
.postcard__img{position:absolute;inset:0}
.postcard__img img{transform:scale(1.15);}
.postcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,7,.5),rgba(7,7,7,.16) 60%,rgba(7,7,7,.24))}
.postcard__text{position:absolute;left:8%;bottom:9%;color:var(--cream);z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 28px rgba(0,0,0,.4)}
.postcard__text--serif{font-family:var(--font-display);font-size:clamp(35.2px,4.32vw,67.2px);line-height:1;letter-spacing:.06em;text-transform:uppercase}
.postcard__text--deco{font-family:var(--font-deco);font-size:clamp(29.92px,3.36vw,51.2px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase}
.postcard__text--top{top:8%;bottom:auto}
.postcard__text--right{left:auto;right:8%;text-align:right;top:10%;bottom:auto}
.postcard__text--center{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);letter-spacing:.14em;font-size:clamp(29.92px,4.64vw,73.6px)}
/* ───────── Services ───────── */
.services{padding:10.5vh 0 12vh;position:relative;overflow:hidden}
.services__h{font-family:var(--font-display);font-weight:400;font-size:clamp(33.44px,5.92vw,99.2px);line-height:.96;letter-spacing:-.025em;padding:0 var(--gutter) 8vh;width:100%}
.services__h-r{text-align:right;padding-left:8vw}
.services__h em{font-style:italic}
.services__list{margin:0 var(--gutter)}
.service{
  cursor:default;
  display:grid;grid-template-columns:1fr 1.2fr 48px;align-items:center;gap:24px;
  padding:30px 0;position:relative;
  transition:padding .6s var(--ease);
}
.service::before{content:"";position:absolute;left:0;right:0;top:0;height:0;background:var(--cream);z-index:-1;transition:height .5s var(--ease)}
.service__name{font-family:var(--font-deco);font-weight:400;font-size:clamp(26.4px,3.04vw,48px);letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:transform .6s var(--ease),color .5s}
.service__d{font-weight:400;font-size:clamp(16px,1.15vw,19px);opacity:.86;max-width:44ch}
.service__arrow{width:40px;height:40px;border:1px solid rgba(249,251,248,.3);border-radius:50%;position:relative;transition:transform .6s var(--ease),background .5s}
.service__arrow::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(-60%,-40%) rotate(45deg)}
.service:hover .service__name{transform:translateX(14px)}
.service:hover .service__arrow{transform:rotate(45deg);background:var(--cream);color:var(--ink)}
.service-float{position:absolute;width:clamp(220px,20vw,340px);aspect-ratio:3/4;overflow:hidden;pointer-events:none;z-index:3;opacity:0;transform:scale(.9);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);left:0;top:0;}
.service-float.on{opacity:1;transform:scale(1)}
.service-float img{filter:saturate(.95) contrast(1.02)}

/* ───────── Case studies · sticky stacked cards ───────── */
.cases{padding:10.5vh 0 10.5vh}
.cases__h{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,4.8vw,76.8px);line-height:1;letter-spacing:-.02em;padding:0 var(--gutter) 6vh}
.cases__h em{font-style:italic}
.stack{padding:0 var(--gutter);display:flex;flex-direction:column;gap:6vh}
.card{
  position:sticky;top:11vh;
  display:grid;grid-template-columns:1fr 1.1fr;min-height:76vh;
  border-radius:6px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(7,7,7,.45);
  transform-origin:center top;
}
.card:nth-child(2){top:calc(11vh + 14px)}
.card:nth-child(3){top:calc(11vh + 28px)}
.card--ink{background:var(--ink);color:var(--cream)}
.card--ocean{background:var(--ocean);color:var(--cream)}
.card--paper{background:var(--cream);color:var(--ink)}
.card__body{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(28px,4.5vw,72px)}
.card__kicker{font-size:1.1rem;opacity:.86}
.card__body h3{font-family:var(--font-display);font-weight:400;font-size:clamp(26.4px,2.88vw,46.4px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.card__text{font-weight:400;font-size:clamp(17px,1.2vw,20px);max-width:44ch;opacity:.9}
.card__stats{display:grid;grid-template-columns:repeat(3,auto);gap:18px 36px;margin:6px 0 10px}
.card__stats strong{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(26.4px,2.4vw,40px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.card__stats span{display:block;font-size:1rem;opacity:.86;margin-top:8px;max-width:14ch;line-height:1.3}
.card--paper .btn--cream{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.card--paper .btn--cream::before{background:var(--cream)}
.card--paper .btn--cream:hover{color:var(--ink)}
.card .btn{align-self:flex-start}
.card__img{position:relative;min-height:46vh}
.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ───────── News · blog cards ───────── */
.news{padding:10.5vh var(--gutter) 10.5vh}
.news__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:6vh}
.news__head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(35.2px,4.8vw,76.8px);line-height:1;letter-spacing:-.02em}
.news__head h2 em{font-style:italic}
.news__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,40px)}
.post{display:flex;flex-direction:column;gap:14px;background:var(--ink-2);border-radius:6px;overflow:hidden;padding-bottom:28px;transition:transform .6s var(--ease),background .5s}
.post:hover{transform:translateY(-6px);background:#171614}
.post__img{aspect-ratio:4/3;background:var(--ocean)}
.post__meta{padding:14px 24px 0;font-size:1rem;opacity:.82}
.post h3{padding:0 24px;font-family:var(--font-display);font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.1;letter-spacing:-.01em}
.post>p:last-child{padding:0 24px;font-weight:400;opacity:.86;font-size:1rem}

/* ───────── Quote ───────── */
.quote{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:13.5vh var(--gutter)}
.quote__img{position:absolute;inset:-12% 0;z-index:-1}
.quote__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,7,.75),rgba(7,7,7,.55) 50%,rgba(7,7,7,.85))}
.quote__img img{filter:saturate(.8)}
.quote__body{max-width:62ch;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.quote blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(24.64px,2.88vw,46.4px);line-height:1.12;letter-spacing:-.01em}
.quote blockquote .w{display:inline-block;opacity:.18;transition:opacity .3s}
.quote blockquote .w.on{opacity:1}
.quote cite{font-style:italic;font-size:1.1rem;opacity:.8}

/* ───────── Process ───────── */
.process{padding:10.5vh 0 0;position:relative;overflow:hidden}
.process__h{font-family:var(--font-display);font-weight:400;font-size:clamp(31.68px,3.84vw,62.4px);line-height:1;letter-spacing:-.02em;padding:1vh var(--gutter) 6vh;max-width:16ch}
.process__h em{font-style:italic}
.process__list{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0 var(--gutter)}
.step{padding:28px 20px 40px 0;display:flex;flex-direction:column;gap:14px}
.step+.step{padding-left:20px}
.step__n{font-family:var(--font-display);font-size:1.4rem;opacity:.78}
.step h3{font-family:var(--font-deco);font-weight:400;font-size:clamp(24.64px,2.08vw,32px);letter-spacing:.06em;text-transform:uppercase}
.step p{font-weight:400;opacity:.86;font-size:1rem;line-height:1.45}
.process__wave{width:100%;height:clamp(60px,9vw,130px);display:block;color:var(--ocean-2);margin-top:3vh;opacity:.7}
.process__wave path{stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}

/* ───────── Join ───────── */
.join{position:relative;min-height:88vh;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:12vh var(--gutter)}
.join__img{position:absolute;inset:-10% 0;z-index:-1}
.join__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,7,.9),rgba(7,7,7,.55) 55%,rgba(7,7,7,.75))}
.join__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,8vw,140px);width:100%;align-items:center}
.join__h{font-family:var(--font-display);font-weight:400;font-size:clamp(56.32px,8.8vw,144px);line-height:.88;letter-spacing:-.025em;margin:2vh 0 4vh}
.join__left p{font-size:clamp(18px,1.4vw,23px);font-weight:400;max-width:40ch;line-height:1.45;opacity:.9}
.join__contact{display:flex;flex-direction:column;gap:4px;margin-top:5vh;font-size:1.1rem;opacity:.9}
.join__form{display:flex;flex-direction:column;gap:12px}
.field{position:relative;border-bottom:1px solid rgba(249,251,248,.3);padding-top:18px}
.field input,.field textarea{width:100%;background:none;border:0;color:var(--cream);font-family:var(--font-body);font-size:1.15rem;padding:10px 0 14px;outline:none;resize:none}
.field label{position:absolute;left:0;top:24px;letter-spacing:.04em;font-size:1rem;opacity:.8;pointer-events:none;transition:transform .4s var(--ease),opacity .4s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-22px);opacity:.9}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.join__note{font-size:.95rem;opacity:.8;min-height:1.4em;margin-top:6px}

/* ───────── Footer ───────── */
.footer{padding:9vh var(--gutter) 32px;overflow:hidden;position:relative}
.footer__top{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding-top:32px}
.footer__col{display:flex;flex-direction:column;gap:8px;font-size:1rem}
.footer__col .footer__col a{opacity:.85;width:max-content;position:relative}
.footer__col a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__col span:not(.label){opacity:.82}
.footer__col--mono{align-items:end}
.footer__emblem{display:block;width:clamp(72px,7vw,112px);aspect-ratio:652/1030;background:var(--cream);-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
.footer__wordmark{margin:10vh 0 6vh;font-family:var(--font-deco);text-transform:uppercase;letter-spacing:.08em;line-height:.85;font-size:clamp(64px,13.4vw,232px);white-space:nowrap;display:flex;justify-content:center}
.footer__logo{display:block;width:100%;height:auto;overflow:visible}
.footer__wordmark .ch{transform-box:fill-box}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;letter-spacing:.04em;font-size:1rem;opacity:.82;padding-top:18px}
.footer__bottom a:hover{opacity:1}

/* ───────── Responsive ───────── */
@media (max-width:1100px){
  .stats{grid-template-columns:1fr 1fr;gap:28px var(--gutter)}
  .news__cards{grid-template-columns:1fr 1fr}
  .card{grid-template-columns:1fr;min-height:0;position:relative;top:0!important}
  .process__list{grid-template-columns:repeat(2,1fr)}
  .step{padding-left:0!important}
  .join__inner{grid-template-columns:1fr;gap:8vh}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{grid-template-columns:1fr auto}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .hero__title{font-size:clamp(56.32px,15.2vw,96px)}
  .hero__row{flex-direction:column;align-items:flex-start;gap:22px}
  .studio__comp{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .studio__word{font-size:clamp(42.24px,12vw,64px)}
  .studio__word--a{align-self:flex-start}
  .studio__word--b{align-self:flex-end;text-align:right;margin-top:0}
  .studio__fig--arch{width:62%;align-self:flex-end}
  .studio__print{display:none}
  .studio__fig--round{width:52%;margin:4vh 0 0 14px}
  .studio__text{padding-left:0;margin-top:2vh;align-self:flex-start}
  .stats{grid-template-columns:1fr 1fr}
  .postcards__track{height:64vh}
  .postcard--intro{width:80vw}
  .services__h-r{text-align:left;padding-left:0}
  .service{grid-template-columns:1fr 40px;grid-template-rows:auto auto;gap:10px 16px}
  .service__name{grid-column:1;grid-row:1;font-size:clamp(26px,7.5vw,34px)}
  .service__d{grid-column:1;grid-row:2}
  .service__arrow{grid-column:2;grid-row:1/3;align-self:center}
  .service:hover .service__name{transform:none}
  .service-float{display:none}
  .news__cards{grid-template-columns:1fr}
  .news__head{flex-direction:column;align-items:flex-start}
  .card__stats{grid-template-columns:1fr 1fr}
  .card__img{min-height:36vh;order:-1}
  .process__list{grid-template-columns:1fr}
  .footer{padding-top:8vh}
  .footer__top{grid-template-columns:1fr;padding-top:0}
  .footer__col--mono{align-items:start}
  .footer__wordmark{font-size:11.2vw;letter-spacing:.04em;margin:8vh 0 5vh}
  .footer__bottom{flex-direction:column;gap:8px}
  .grain{opacity:.08}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .line-mask>span{transform:none}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════ SEAT · reservation ticket ═══════════════ */
.seat{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,110px);align-items:center;padding:12vh var(--gutter);overflow:hidden}
.seat__h{font-family:var(--font-display);font-weight:400;font-size:clamp(42.24px,5.6vw,89.6px);line-height:.95;letter-spacing:-.02em}
.seat__h em{font-style:italic}
.seat__p{font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:36ch;margin:3.5vh 0 5vh}
.seat__label{display:block;font-size:1rem;margin-bottom:10px;opacity:.8}
.seat__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.seat__in{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--font-display);font-size:clamp(22px,2vw,30px);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;outline:none;border-radius:0}
.seat__in::placeholder{color:rgba(7,7,7,.42)}
.seat__in:focus{border-bottom-width:2px;padding-bottom:7px}
.ticket{perspective:1400px}
.ticket__card{position:relative;display:grid;grid-template-columns:clamp(84px,9vw,128px) 1fr;background:var(--cream);color:var(--ink);border-radius:18px;box-shadow:0 40px 70px -36px rgba(7,7,7,.45),0 2px 0 rgba(7,7,7,.04);transform-style:preserve-3d;will-change:transform}
/* punched notches where the stub tears off */
.ticket__card::before,.ticket__card::after{content:"";position:absolute;left:clamp(84px,9vw,128px);width:28px;height:28px;border-radius:50%;background:var(--sky);transform:translateX(-50%)}
.ticket__card::before{top:-14px}
.ticket__card::after{bottom:-14px}
.ticket__stub{display:grid;place-items:center;background:var(--paper);border-radius:18px 0 0 18px;border-right:1px dashed rgba(7,7,7,.28)}
.ticket__emblem{width:56%;aspect-ratio:652/1030;background:var(--ocean);-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
.ticket__main{padding:clamp(26px,3.2vw,48px) clamp(24px,3.2vw,52px)}
.ticket__club{font-size:1rem;opacity:.84;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid rgba(7,7,7,.12)}
.ticket__k{font-size:1rem;opacity:.84}
.ticket__name{font-family:var(--font-display);font-size:clamp(29.92px,3.2vw,51.2px);line-height:1.02;letter-spacing:-.015em;margin:6px 0 26px;min-height:1.05em;overflow-wrap:anywhere}
.ticket__name.is-empty{opacity:.35;font-style:italic}
.ticket__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.ticket__grid dt{font-size:1rem;opacity:.82}
.ticket__grid dd{margin:2px 0 0;font-family:var(--font-display);font-size:clamp(18px,1.5vw,23px);line-height:1.2}
.ticket__stamp{position:absolute;right:clamp(18px,3vw,40px);top:clamp(18px,3vw,36px);width:clamp(96px,9vw,128px);aspect-ratio:1;border:2px solid var(--ocean);border-radius:50%;display:grid;place-items:center;color:var(--ocean);
  opacity:0;transform:scale(2.2) rotate(-28deg);pointer-events:none}
.ticket__stamp span{position:absolute;inset:16%;background:var(--ocean);opacity:.22;-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
.ticket__stamp b{position:relative;font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(15px,1.3vw,19px);background:var(--cream);padding:2px 6px}
.ticket.is-claimed .ticket__stamp{opacity:.92;transform:scale(1) rotate(-14deg);transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}

/* ═══════════════ FEED · split grid ═══════════════ */
.feed{display:grid;grid-template-columns:1fr minmax(320px,560px);gap:clamp(40px,7vw,130px);align-items:center;padding:12vh var(--gutter)}
.feed__h{font-family:var(--font-display);font-weight:400;font-size:clamp(38.72px,4.96vw,80px);line-height:.96;letter-spacing:-.02em}
.feed__h em{font-style:italic}
.feed__p{font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:38ch;margin:3.5vh 0 5vh}
.feed__phone{background:var(--cream);border-radius:22px;padding:18px 14px 14px;box-shadow:0 40px 80px -40px rgba(7,7,7,.4)}
.feed__bar{display:flex;align-items:center;gap:14px;padding:0 6px 16px}
.feed__bar b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1.1}
.feed__bar span{font-size:1rem;opacity:.84}
.feed__avatar{width:54px;height:54px;border-radius:50%;background:var(--sky);display:grid;place-items:center;flex:none}
.feed__avatar i{width:44%;aspect-ratio:652/1030;background:var(--cream);-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
.feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;perspective:1200px}
.tile{aspect-ratio:1;background:var(--img) center/cover no-repeat;background-color:var(--sand);transition:filter .5s var(--ease-out)}
.tile--split{background-size:300% 100%;background-position:var(--x) 50%}
.tile:hover{filter:brightness(1.06) saturate(1.05)}

@media (max-width:900px){
  .seat,.feed{grid-template-columns:1fr}
  .seat{padding:9vh var(--gutter)}
  .feed{padding:9vh var(--gutter)}
}

/* ═══════════════ LOADER · Miami sunrise ═══════════════ */
html.is-loading,html.is-loading body{overflow:hidden}
.loader{position:fixed;inset:0;z-index:1000;background:#070707;color:var(--cream);display:grid;place-items:center;cursor:pointer;
  clip-path:inset(0 0 0 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1),color .6s ease .12s;animation:loaderFailsafe 0s 6.4s forwards}
.loader.is-out{clip-path:inset(0 0 100% 0)}
@keyframes loaderFailsafe{to{visibility:hidden;pointer-events:none}}
.loader__scene{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(78vw,760px);transition:transform 1.15s cubic-bezier(.77,0,.18,1),opacity .9s}
.loader.is-out .loader__scene{transform:translateY(-6vh);opacity:.4}
.loader__sky{position:relative;width:100%;height:clamp(146px,29vmin,280px);overflow:hidden;display:flex;justify-content:center}
.loader__sun{position:absolute;bottom:0;width:clamp(130px,26vmin,250px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#f9fbf8 0%,#ebe3d3 42%,#cedbe8 100%);
  transform:translateY(100%);animation:sunRise 1.9s cubic-bezier(.16,1,.3,1) .35s forwards;overflow:hidden;display:grid;place-items:center}
.loader__palm{width:42%;aspect-ratio:652/1030;margin-top:-6%;background:#070707;opacity:.86;-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
@keyframes sunRise{to{transform:translateY(9%)}}
.loader__scene::before{content:"";position:absolute;left:50%;top:clamp(146px,29vmin,280px);width:clamp(320px,64vmin,720px);height:clamp(220px,42vmin,460px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(235,227,211,.16),rgba(206,219,232,.06) 55%,transparent);opacity:0;animation:subIn 1.8s ease .5s forwards}
.loader__line{position:relative;display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(249,251,248,.75) 20%,rgba(249,251,248,.75) 80%,transparent);transform:scaleX(0);animation:lineIn 1.2s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes lineIn{to{transform:scaleX(1)}}
/* the sun's path on the water */
.loader__reflect{position:relative;display:block;width:clamp(60px,10vmin,110px);height:clamp(40px,7vmin,80px);margin-top:2px;opacity:0;filter:blur(3px);
  background:repeating-linear-gradient(to bottom,rgba(249,251,248,.5) 0 1px,transparent 1px 6px);
  -webkit-mask:linear-gradient(to bottom,#000,transparent);mask:linear-gradient(to bottom,#000,transparent);
  animation:reflectIn 1.4s ease .9s forwards,shimmer 2.4s ease-in-out 1.6s infinite}
@keyframes reflectIn{to{opacity:.8}}
@keyframes shimmer{50%{transform:scaleX(1.25);opacity:.55}}
.loader__mark{width:100%;margin-top:clamp(10px,2vh,22px)}
.loader__logo{display:block;width:100%;height:auto;overflow:visible}
.loader__logo .ch{transform-box:fill-box;opacity:0;transform:translateY(45%);animation:chUp 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.75s + var(--i) * .05s)}
@keyframes chUp{to{opacity:1;transform:none}}
.loader__sub{margin-top:clamp(14px,2.4vh,26px);font-family:var(--font-display);font-style:italic;font-size:clamp(17px,1.4vw,22px);letter-spacing:.06em;opacity:0;animation:subIn 1s ease 1.45s forwards}
@keyframes subIn{to{opacity:.75}}
/* the pop: light blue blooms out of the sun, the mark turns ink, then the blue curtain lifts */
.loader__bloom{position:absolute;inset:0;z-index:0;background:var(--sky);clip-path:circle(0px at var(--bx,50%) var(--by,38%));transition:clip-path .9s cubic-bezier(.7,0,.2,1) .08s}
.loader.is-pop .loader__bloom{clip-path:circle(150vmax at var(--bx,50%) var(--by,38%))}
.loader__sun{scale:1;transform-origin:50% 72%;transition:scale .55s cubic-bezier(.34,1.7,.64,1)}
.loader.is-pop .loader__sun{scale:1.1}
.loader.is-pop{color:#070707}
.loader.is-pop .loader__palm{background:#070707}
.loader.is-pop .loader__scene::before,.loader.is-pop .loader__reflect{animation:none;opacity:0;transition:opacity .4s}
.loader.is-pop .loader__line{background:linear-gradient(90deg,transparent,rgba(7,7,7,.4) 20%,rgba(7,7,7,.4) 80%,transparent)}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ═══════════════ BOOK · scroll to turn the page ═══════════════ */
.book{position:relative}
.book__pin{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,28px);overflow:hidden;padding:92px 0 3vh}
.book__head,.book__bar{width:min(1440px,94vw,calc((100vh - 200px) * 2.1))}
.book__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.book__h{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.015em}
.book__h em{font-style:italic}
.book__hint{font-size:1.05rem;transition:opacity .5s}
.book.is-turning .book__hint{opacity:0}
.book__book{position:relative;width:min(1440px,94vw,calc((100vh - 200px) * 2.1));aspect-ratio:2.1;perspective:5200px}
.book__book::before{content:"";position:absolute;left:3%;right:3%;bottom:-4%;height:12%;background:radial-gradient(closest-side,rgba(7,7,7,.32),transparent);filter:blur(8px);pointer-events:none}
.book__bar{height:2px;background:rgba(7,7,7,.12);overflow:hidden}
.book__bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.book__base{position:absolute;top:0;width:50%;height:100%}
.book__base--left{left:0;background:var(--paper);border-radius:6px 0 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  box-shadow:inset -26px 0 30px -24px rgba(7,7,7,.35)}
.book__base--left p{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,1.6vw,26px);opacity:.75}
.end__emblem{width:16%;aspect-ratio:652/1030;background:var(--ocean);opacity:.55;-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat}
.book__base--right{left:50%;border-radius:0 6px 6px 0}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0% 50%;transform-style:preserve-3d;--shade:0}
.page{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--cream);color:var(--ink)}
.page--front,.book__base--right{border-radius:0 6px 6px 0;box-shadow:inset 26px 0 30px -24px rgba(7,7,7,.32)}
.page--back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
/* turning light: a sheen rolls across the page (--sheen) and it throws a soft shadow on the page beneath (--cast) */
.leaf{--sheen:0;--cast:0}
.book__base{--cast:0}
.page::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--sheen);
  background:linear-gradient(to left,rgba(7,7,7,.28),rgba(7,7,7,.04) 38%,rgba(255,255,255,.16) 62%,rgba(7,7,7,.1))}
.page--back::after{background:linear-gradient(to right,rgba(7,7,7,.28),rgba(7,7,7,.04) 38%,rgba(255,255,255,.16) 62%,rgba(7,7,7,.1))}
.page__cast{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--cast);
  background:linear-gradient(to right,rgba(7,7,7,.42),rgba(7,7,7,.12) 45%,transparent 80%)}
.page--back .page__cast,.book__base--left .page__cast{background:linear-gradient(to left,rgba(7,7,7,.42),rgba(7,7,7,.12) 45%,transparent 80%)}

/* cover */
.page--cover{background:radial-gradient(120% 90% at 30% 20%,#1b1b1a,#070707 70%);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(10px,1.6vh,18px);padding:8%}
.cover__frame{position:absolute;inset:5%;border:1px solid rgba(249,251,248,.32);border-radius:3px;pointer-events:none}
.cover__emblem{width:22%;aspect-ratio:652/1030;background:linear-gradient(160deg,#f9fbf8,#ebe3d3 60%,#cedbe8);-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat;margin-bottom:6px}
.cover__t{font-family:var(--font-deco);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(20px,2.3vw,36px);line-height:1.1}
.cover__s{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.25vw,20px);max-width:24ch;opacity:.85}
.cover__m{font-size:1rem;opacity:.7;margin-top:8px}

/* chapter pages */
.page--text{display:flex;flex-direction:column;padding:8% 9% 7% 11%;gap:clamp(8px,1.4vh,14px)}
.page__ch{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.25vw,20px);opacity:.8}
.page__title{font-family:var(--font-deco);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:.95;font-size:clamp(34px,4.2vw,68px);margin:auto 0 0}
.page__svc{font-family:var(--font-display);font-size:clamp(20px,1.8vw,30px);line-height:1.1}
.page__lead{font-size:clamp(16px,1.15vw,19px);line-height:1.45;max-width:34ch}
.page__list{border-top:1px solid rgba(7,7,7,.16);margin-top:clamp(4px,1vh,10px)}
.page__list li{font-size:clamp(15px,1.05vw,17px);padding:clamp(6px,.9vh,10px) 0;border-bottom:1px solid rgba(7,7,7,.16)}
.page__no{position:absolute;right:7%;bottom:4.5%;font-family:var(--font-display);font-style:italic;font-size:1rem;opacity:.6}
.page__no--l{right:auto;left:7%;color:var(--cream);opacity:.85;z-index:1}

/* photo pages */
.page--photo img{position:absolute;inset:0}
.page--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,7,7,.62),rgba(7,7,7,.06) 55%),linear-gradient(to left,rgba(7,7,7,.28),transparent 9%)}
.page__cap{position:absolute;left:8%;right:10%;bottom:11%;z-index:1;color:var(--cream);font-family:var(--font-display);font-size:clamp(20px,2vw,32px);line-height:1.15;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}

/* the last page */
.page--end{background:var(--cream);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(12px,2vh,22px);padding:8% 9% 8% 11%}
.end__h{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,4.6vw,76px);line-height:.95;letter-spacing:-.02em}
.end__h em{font-style:italic}
.end__p{font-size:clamp(16px,1.2vw,20px);line-height:1.45;max-width:30ch}

/* phones: the right page fills the screen and a slice of the facing page shows past the spine */
@media (max-width:760px){
  .book__head,.book__bar{width:88vw}
  .book__book{width:164vw;aspect-ratio:auto;height:min(62vh,560px);align-self:flex-start;margin-left:-70vw}
  .book__head{flex-direction:column;gap:6px}
  .page__cap{left:auto;right:8%;max-width:60%;font-size:20px;text-align:right}
}

/* postcards: tighter on narrow screens so the intro doesn't float in empty space */
@media (max-width:900px){
  .postcards__track{height:70vh;gap:18px}
  .postcard--intro{width:64vw;justify-content:flex-end;padding-bottom:3vh;gap:18px}
}

/* the book opens like an album on desktop: wider pages, roomier type */
@media (min-width:761px){
  .page--text{padding:6% 9% 6% 10%}
  .page__title{font-size:clamp(34px,3.6vw,64px)}
  .page__lead{max-width:40ch}
  .cover__emblem{width:16%}
}
.page__more{display:inline-flex;align-items:center;font-size:1rem;margin-top:auto;padding-top:6px;border-bottom:1px solid currentColor;align-self:flex-start;line-height:1.6}
.page__list + .page__more{margin-top:clamp(8px,1.6vh,16px)}

/* homepage services: the whole row opens that service's page */
.service{cursor:pointer}
.service__a{position:absolute;inset:0;z-index:2}
.service__a:focus-visible{outline:1px solid var(--cream);outline-offset:-1px}

/* ═══════════════ PHONES: fewer tall stacks, more side-by-side ═══════════════ */
@media (max-width:760px){
  /* postcards: smaller cards, more of the row in view */
  .postcards__track{height:64vh;gap:14px}
  .postcard{aspect-ratio:9/15}
  .postcard--tall{aspect-ratio:9/16;margin-top:0}
  .postcard--wide{aspect-ratio:4/5}
  .postcard--intro{width:60vw}
  .postcard__text--serif{font-size:30px}
  .postcard__text--deco{font-size:26px}

  /* studio: circle and arch side by side */
  .studio__comp{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:end}
  .studio__word--a{grid-column:1 / -1;grid-row:auto}
  .studio__fig--round{grid-column:1;grid-row:2;width:auto;margin:0 0 0 14px;align-self:center}
  .studio__fig--arch{grid-column:2;grid-row:2;width:auto}
  .studio__text{grid-column:1 / -1;grid-row:3;margin-top:6px}
  .studio__word--b{grid-column:1 / -1;grid-row:4;justify-self:end;margin-top:0}

  /* case studies keep stacking on top of one another */
  .card{position:sticky!important;top:calc(78px + var(--i,0) * 12px)!important;min-height:0}
  .card:nth-child(2){--i:1}
  .card:nth-child(3){--i:2}
  .card__img{min-height:24vh}
  .card__body{padding:20px 20px 22px;gap:12px}
  .card__body h3{font-size:26px}
  .card__text{display:none}
  .card__stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .card__stats strong{font-size:24px}
  .card__stats span{font-size:.9rem;margin-top:4px}

  /* process: one row, scrolled sideways as you scroll down (pinned in script.js) */
  .process__list{display:flex;width:max-content;margin:0;padding:0 var(--gutter);gap:14px}
  .step{width:74vw;flex:none;padding:22px 20px 26px!important;border:1px solid rgba(7,7,7,.14);border-radius:6px;background:rgba(249,251,248,.45)}

  /* news: swipe sideways instead of a long column */
  .news__cards,.newsgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:14px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none}
  .news__cards::-webkit-scrollbar,.newsgrid::-webkit-scrollbar{display:none}
  .news__cards .post,.newsgrid .post{flex:0 0 78vw;scroll-snap-align:start}

  /* footer: two columns */
  .footer__top{grid-template-columns:1fr 1fr!important}
  .footer__col--mono{grid-column:1 / -1}
}

/* the inside of the cover: black board, Chapter I's line */
.page--inside{background:radial-gradient(120% 90% at 70% 20%,#1b1b1a,#070707 70%);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:9% 11% 10% 9%}
.inside__emblem{width:12%;aspect-ratio:652/1030;background:var(--cream);opacity:.55;-webkit-mask:url(/brand/emblem-bv.webp) center/contain no-repeat;mask:url(/brand/emblem-bv.webp) center/contain no-repeat;margin-bottom:auto}
.inside__cap{font-family:var(--font-display);font-size:clamp(22px,2.2vw,36px);line-height:1.15;max-width:18ch;text-wrap:balance}

/* phones: postcards are not pinned, so the section is only as tall as the row */
@media (max-width:760px){
  .postcards__pin{height:auto;padding:7vh 0 8vh;display:block}
  .postcards__track{height:44vh}
  .postcard--intro{width:58vw;justify-content:center;padding-bottom:0}
}