/* ==========================================================================
   CANDORA — Modern Vietnamese Art & Craft Studio
   Design system & styles
   --------------------------------------------------------------------------
   Palette: Warm cream / sand / terracotta / muted gold / soft sage / charcoal
   Type:    Playfair Display (serif) + Inter (sans)
   Vibe:    Crafted, generous whitespace, paper-like, minimal & confident
   ========================================================================== */

/* ----------------------------- WEB FONTS --------------------------------- */
/* Self-hosted subsets (latin + vietnamese) of Playfair Display + Inter.
   These are variable fonts — each file holds all weights, selected via the
   font-weight property. Serving same-origin removes the Google Fonts request
   chain (~750ms) from the critical render path. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ----------------------------------- TOKENS ------------------------------- */
:root {
  /* Color */
  --cream:        #F8F4EC;  /* primary background — like Dó paper */
  --sand:         #EDE4D7;  /* secondary surface */
  --sand-deep:    #E2D5BF;  /* hover / inset */
  --terracotta:   #B5523A;  /* accent — warm red */
  --terracotta-d: #98412E;
  --gold:         #C5A46E;  /* muted gold / brass */
  --gold-d:       #A88A57;
  --sage:         #8C9077;  /* soft sage / olive support */
  --charcoal:     #2B2520;  /* text — warm black */
  --charcoal-2:   #5A5048;  /* secondary text */
  --charcoal-3:   #8A8278;  /* muted / captions */
  --line:         rgba(43, 37, 32, 0.14);

  /* Type */
  --serif: "Playfair Display", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (fluid) */
  --fs-hero:    clamp(2.9rem, 7.5vw, 6.5rem);
  --fs-h1:      clamp(2.3rem, 4.6vw, 3.8rem);
  --fs-h2:      clamp(1.9rem, 3.4vw, 2.9rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.7rem);
  --fs-lead:    clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  /* Spacing scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 5rem;
  --s-7: 7.5rem;
  --s-8: 10rem;

  /* Layout */
  --maxw:      1240px;
  --maxw-read: 760px;
  --maxw-wide: 1480px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  /* Shape & motion */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.5s;
}

/* ----------------------------------- RESET -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* clip the viewport overflow that body{overflow-x:hidden}
                           alone can't stop on mobile (iOS rubber-banding still
                           drags elements wider than the visible area). */
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--cream);
  font-weight: 400;
  overflow-x: hidden;
  /* Subtle paper grain so the cream never reads as flat plastic */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(197, 164, 110, 0.05) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(181, 82, 58, 0.04) 0, transparent 40%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* Visually hide an element but keep it available to screen readers and the
   DOM (good for SEO <h1>s that shouldn't clutter the design). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--terracotta); color: var(--cream); }

/* Focus visibility — crafted but accessible */
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: var(--r-sm); }

/* --------------------------------- TYPOGRAPHY ----------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { color: var(--charcoal-2); }
p + p { margin-top: var(--s-3); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--charcoal);
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--terracotta);
  opacity: 0.6;
}
.eyebrow.center::before { display: none; }
.eyebrow.center { justify-content: center; }

.serif { font-family: var(--serif); }
.italic { font-style: italic; }

.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  padding: 0.1em 0.12em 0 0;
  color: var(--terracotta);
}

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

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--tighter { padding-block: var(--s-6); }

.section--sand { background: var(--sand); }
.section--cream { background: var(--cream); }

.divider {
  height: 1px; width: 100%;
  background: var(--line);
  border: 0;
}

/* Responsive type tightening */
@media (max-width: 768px) {
  .section { padding-block: var(--s-7); }
}

/* --------------------------------- BUTTONS -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1rem 1.8rem;
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }

.btn--primary {
  background: var(--terracotta);
  color: var(--cream);
  border: 1px solid var(--terracotta);
}
.btn--primary:hover {
  background: var(--terracotta-d);
  border-color: var(--terracotta-d);
}
.btn--primary:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}
.btn--ghost:hover { background: var(--charcoal); color: var(--cream); }

.btn--text {
  padding: 0.5rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--terracotta);
}
.btn--text:hover { color: var(--terracotta-d); }

/* --------------------------------- HEADER / NAV --------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: 1.5rem;
  transition: all 0.45s var(--ease);
  background: transparent;
}
.site-header.scrolled {
  background: rgba(248, 244, 236, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.logo {
  display: inline-block;
  line-height: 1;
}
/* The logo is a solid-black CANDORA wordmark PNG; sized by height so it
   stays crisp at any viewport width. */
.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.6rem);
}
.nav-link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  padding-block: 0.4rem;
  transition: color var(--dur) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--terracotta);
  transition: width var(--dur) var(--ease);
}
.nav-link:hover { color: var(--terracotta); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--terracotta); }

/* Dropdown nav item */
.nav-item--has-dropdown { position: relative; }
.nav-item--has-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-item--has-dropdown > .nav-link .caret {
  width: 9px; height: 9px;
  transition: transform var(--dur) var(--ease);
  opacity: 0.6;
}
.nav-item--has-dropdown:hover > .nav-link .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 270px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 0.6rem;
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(43,37,32,0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.28s var(--ease);
  z-index: 60;
}
.nav-item--has-dropdown:hover > .dropdown,
.nav-item--has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.dropdown__item:hover { background: var(--sand); }
.dropdown__item strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--charcoal);
}
.dropdown__item span {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.dropdown__item small {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  color: var(--charcoal-3);
  margin-top: 0.1rem;
}

.nav-actions { display: flex; align-items: center; gap: var(--s-3); }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.lang-toggle button,
.lang-toggle a {
  padding: 0.5rem 0.7rem;
  color: var(--charcoal-3);
  transition: all var(--dur) var(--ease);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.lang-toggle button.active,
.lang-toggle a.active {
  background: var(--charcoal);
  color: var(--cream);
}

/* Mobile menu trigger */
.menu-toggle {
  display: none;
  width: 32px; height: 24px;
  position: relative;
  z-index: 102;
}
.menu-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--charcoal);
  transition: all var(--dur) var(--ease);
}
.menu-toggle span:nth-child(1) { top: 4px; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 4px; }
.menu-toggle.open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;                 /* cover the full viewport, top→bottom */
  background: var(--cream);
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* nav links sit at the top; the contact
                                    block uses margin-top:auto to stick to the
                                    bottom, leaving the middle open (for an
                                    image). overflow-y:auto below keeps every
                                    link reachable on very short screens. */
  /* And let it scroll as a last resort so every link is always reachable. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Top padding clears the mobile browser address bar (which paints over
     the top of any fixed; top:0 element) so the first link is never trapped
     behind it. env(safe-area-inset-top) adds the notch/status bar on
     devices that need it (requires viewport-fit=cover, set on every page).
     Bottom padding clears the home indicator. */
  padding-inline: var(--gutter);
  padding-top: calc(env(safe-area-inset-top, 0px) + 4.5rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gutter));
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.mobile-nav .nav-link {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  padding-block: 0.35rem;
  line-height: 1.1;
}
.mobile-nav .nav-link::after { display: none; }

/* Mobile contact row (Zalo / WhatsApp) — pinned to the drawer bottom.
   margin-top:auto pushes it to the bottom of the flex column, leaving the
   space above (between the nav links and here) open — that gap is reserved
   for an image. */
.mobile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
}
.mobile-contact__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  font-weight: 600;
}
/* Row of two equal buttons — each takes half the width, filling the line */
.mobile-contact__btns { display: flex; gap: var(--s-2); }
.mobile-contact__btns a {
  flex: 1 1 0;
  min-width: 0;            /* allow flex children to shrink below intrinsic size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.8rem 0.9rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--charcoal);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.mobile-contact__btns a picture { display: contents; }
.mobile-contact__btns a svg,
.mobile-contact__btns a img { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.mobile-contact__btns a:hover { border-color: currentColor; }
.mobile-contact__btns .a--zalo:hover { color: #0068FF; }
.mobile-contact__btns .a--wa:hover  { color: #25D366; }

.mobile-nav .mobile-nav-foot {
  /* The footer no longer holds a button — only the EN/VI toggle, which is
     pinned to the drawer's top-right (see rule below). Strip the border and
     bottom spacing so it adds nothing to the flow; the toggle stays visible
     via its own absolute positioning. (display:none would also hide it.) */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Pin EN/VI to the drawer top-right (left of the menu close button).
   Uses the same safe-area + address-bar buffer as the drawer's padding-top
   so it lines up with the first link and stays clear of the browser bar. */
.mobile-nav .mobile-nav-foot .lang-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
  right: calc(var(--gutter) + 2.75rem);
  z-index: 1;
}

@media (max-width: 900px) {
  /* Hide the header toggle on mobile, but keep the one inside the mobile drawer */
  .nav-links, .nav-actions .lang-toggle { display: none; }
  .menu-toggle { display: block; }
  .site-header .logo img { height: 32px; }
}

/* --------------------- Floating Zalo contact button ----------------------- */
/* Fixed to the bottom-right so visitors can reach us from anywhere on the
   page. Sits above content (z-index 90) but below the mobile drawer (101),
   so it disappears behind the open menu instead of floating over it. */
.float-zalo {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: float-zalo-pulse 2.8s ease-in-out infinite;
}
.float-zalo picture { display: contents; }
.float-zalo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.float-zalo:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 105, 255, 0.25);
}
.float-zalo:active { transform: translateY(-1px) scale(1.02); }
.float-zalo:focus-visible {
  outline: 2px solid #0068FF;
  outline-offset: 3px;
}
@keyframes float-zalo-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); }
  50%      { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), 0 0 0 8px rgba(0, 105, 255, 0.10); }
}
@media (max-width: 900px) {
  .float-zalo { width: 52px; height: 52px; }
  .float-zalo img { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .float-zalo { animation: none; transition: none; }
}

/* --------------------------------- HERO ----------------------------------- */
/* Video plays full-bleed at the top (no text over it). The headline + subtext
   sit in a band BELOW the video, on the warm cream background. */
.hero {
  position: relative;
  background: var(--charcoal);
  padding: 0;
}

/* Video fills the top of the hero as a cinematic banner.
   Aspect ratio keeps it from being too tall on desktop, while cover-fit
   ensures it always fills the frame edge to edge. */
.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--charcoal);
}
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero__video--mobile { display: none; }

/* Subtle vignette so the video edge meets the cream band softly */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(43,37,32,0.25) 0%, transparent 18%, transparent 78%, rgba(43,37,32,0.35) 100%);
}

/* Text band — sits below the video on the cream background */
.hero__textband {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}
.hero__textband > .eyebrow { display: flex; color: var(--terracotta); }
.hero h1 {
  margin-top: 1.2rem;
  color: var(--charcoal-2); /* matches subtext for softer, harmonious look on cream */
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 500;
}
.hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.hero__sub {
  color: var(--charcoal-2);
  font-size: var(--fs-lead);
  max-width: 46ch;
  line-height: 1.55;
}

/* Staggered entrance on load — eyebrow → headline → meta rise in sequence */
.hero__textband > * {
  opacity: 0;
  transform: translateY(26px);
  animation: heroRise 1.1s var(--ease) forwards;
}
.hero__textband > *:nth-child(1) { animation-delay: 0.2s; }
.hero__textband > *:nth-child(2) { animation-delay: 0.5s; }
.hero__textband > *:nth-child(3) { animation-delay: 0.8s; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--charcoal-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
  text-decoration: none;
}
.hero__scroll .line {
  width: 1px; height: 40px;
  background: var(--charcoal-2);
  position: relative; overflow: hidden;
}
.hero__scroll .line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--terracotta);
  transform: translateY(-100%);
  animation: scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Respect reduced motion: reveal text instantly, videos still play (muted/loop) */
@media (prefers-reduced-motion: reduce) {
  .hero__textband > * { animation: none; opacity: 1; transform: none; }
}

/* Mobile: use the portrait video (9:16). */
@media (max-width: 768px) {
  .hero__media { aspect-ratio: 9 / 16; }
  .hero__video--desktop { display: none; }
  .hero__video--mobile  { display: block; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }
}

/* Page hero (interior pages) */
.page-hero {
  padding-top: 12rem;
  padding-bottom: var(--s-6);
}
.page-hero__inner { max-width: 880px; }
.page-hero h1 {
  font-size: var(--fs-h1);
  margin-top: var(--s-3);
  text-wrap: balance;
}
.page-hero p { margin-top: var(--s-4); max-width: 56ch; }

/* Trust badges — the five scannable signals. A quiet row of glass chips.
   Base style assumes a dark backdrop (cream-on-translucent); use the
   .trust-badges--light modifier on light/editorial pages (see below). */
.trust-badges {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: rgba(248,244,236,0.10);
  border: 1px solid rgba(248,244,236,0.22);
  border-radius: 100px;
  backdrop-filter: blur(8px) saturate(130%);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: rgba(248,244,236,0.94);
  white-space: nowrap;
}
/* ---------------------- COLLABORATIONS — split hero ----------------------- */
/* Editorial split hero: portrait hotel-piece photo on the left (shown at a
   natural aspect ratio — not cropped to a wide banner), editorial content on
   the right. Mirrors the .studio-band split so the page reads consistent and
   serious. Top padding clears the fixed transparent header. */
.collab-hero-split { padding-top: 11rem; }
.collab-hero-split__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.collab-hero-split__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  /* Portrait image (1440x2560) — use a portrait ratio so nothing is cropped
     away. object-fit: cover guards minor ratio drift. */
  aspect-ratio: 4 / 5;
  box-shadow: 0 22px 60px rgba(43, 37, 32, 0.12);
}
.collab-hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.collab-hero-split__content .breadcrumb { margin-bottom: var(--s-4); }
.collab-hero-split__content h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: var(--s-3);
  text-wrap: balance;
}
.collab-hero-split__content .lead {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--charcoal-2);
}
/* The "belief" statement — a serif pull-line that carries the editorial weight
   above the descriptive body. Distinct from .lead so the two paragraphs read as
   voice (hook) + fact (body), not two equal blocks. */
.collab-hero-split__hook {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  text-wrap: balance;
}
/* On narrow screens, stack: image first, then content. */
@media (max-width: 860px) {
  .collab-hero-split__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .collab-hero-split__media { aspect-ratio: 4 / 5; max-width: 420px; }
}

/* Trust badges, light variant — for legibility on the cream editorial hero.
   Overrides the dark-backdrop base (cream-on-translucent) with charcoal text
   on translucent sand and terracotta icons. */
.trust-badges--light .trust-badge {
  background: rgba(43, 37, 32, 0.04);
  border-color: var(--line);
  color: var(--charcoal-2);
  backdrop-filter: none;
}
.trust-badges--light .trust-badge svg { color: var(--terracotta); }

@media (max-width: 768px) {
  .trust-badge { font-size: 0.8rem; padding: 0.45rem 0.75rem; }
}

/* Ken Burns drift for the hero photo (top-level so it applies at all widths;
   the duplicate inside the do-hero media block is harmless). */
@keyframes doHeroKenBurns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1.5%, 0); }
}

.breadcrumb {
  display: flex; gap: 0.6rem; align-items: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-bottom: var(--s-2);
}
.breadcrumb a:hover { color: var(--terracotta); }

/* --------------------------- PARALLAX GALLERY ----------------------------- */
/* Scroll-driven depth gallery (Dó Paper page). Layers are full-bleed images
   at different depths; as the user scrolls the stage, the JS translates each
   at a different rate so the front layer slides away to reveal what's behind,
   while the back layer barely moves (perceived distance). */
.do-gallery {
  background: var(--charcoal);
  color: var(--cream);
  position: relative;
}
.do-gallery__intro {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.do-gallery__intro .eyebrow { color: var(--terracotta); justify-content: center; }
.do-gallery__intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-top: 0.75rem;
  color: var(--cream);
}
.do-gallery__intro p {
  max-width: 46ch;
  margin: 1rem auto 0;
  color: rgba(245, 239, 226, 0.75);
}
/* Tall stage gives the parallax runway. A sticky pin keeps the scene in view
   while the user scrolls through the runway height. */
.do-gallery__stage {
  position: relative;
  height: 320vh; /* long runway so each layer has room to travel */
}
/* Homepage instance flies through 7 panels (cover + 6 gallery photos) vs the
   Dó page's 4, so it needs a longer runway or the dive feels compressed. The
   extra entryStart hold (see DEPTH_GALLERY_CONFIG) also eats scroll runway. */
.do-gallery--home .do-gallery__stage { height: 520vh; }
.do-gallery__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Scene fills the viewport so layers read as environments, not thumbnails. */
.do-gallery__scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}
/* Each layer is a FULL-BLEED image at its own depth. They overlap completely
   (not nested insets) — depth is created by scale + parallax speed, not by
   shrinking. data-speed (set in HTML) controls travel; data-depth sets z-order
   and a base scale so closer layers are larger. */
.do-gallery__layer {
  position: absolute;
  inset: -8% -4%; /* bleed so transformed edges never show gaps */
  width: calc(100% + 8%);
  height: 116%;
  overflow: hidden;
  will-change: transform, opacity;
}
.do-gallery__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Depth ordering + base scale: back is smallest/dimmest, front is full/bright. */
.do-gallery__layer[data-depth="0"] { z-index: 1; opacity: 0.55; filter: brightness(0.7) saturate(0.85); }
.do-gallery__layer[data-depth="1"] { z-index: 2; opacity: 0.80; filter: brightness(0.85); }
.do-gallery__layer[data-depth="2"] { z-index: 3; opacity: 0.94; }
.do-gallery__layer[data-depth="3"] { z-index: 4; opacity: 1; box-shadow: 0 -40px 80px rgba(0,0,0,0.5) inset; }
/* Caption strip pinned to the viewport bottom (sits above the front layer). */
.do-gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.92);
  z-index: 10;
  pointer-events: none;
}
/* Homepage instance: light pastel mood. The intro sits on the plain charcoal
   band above the scene so it stays cream-on-charcoal; but the section's base
   flips to a soft warm cream to match the light gallery atmosphere as the user
   scrolls past the intro and into the pinned scene. */
.do-gallery--home { background: #f4efe6; color: var(--charcoal); }
.do-gallery--home .do-gallery__intro .eyebrow { color: #b07d3a; }
.do-gallery--home .do-gallery__intro h2 { color: var(--charcoal); }
.do-gallery--home .do-gallery__intro p { color: rgba(43, 37, 32, 0.72); }
/* WebGL canvas host: hidden by default (static stack shows). When
   depth-gallery.js activates, it adds .do-gallery--webgl to the stage,
   which reveals the canvas and hides the static fallback layers. */
.do-gallery__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 5;
}
.do-gallery__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.do-gallery--webgl .do-gallery__canvas { display: block; }
.do-gallery--webgl .do-gallery__layer { display: none; } /* WebGL is rendering */
/* Hidden texture-source images for Three.js (never visible). */
.do-gallery__tex { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Mobile: shorter runway + less aggressive vertical travel to avoid jank. */
@media (max-width: 860px) {
  .do-gallery__stage { height: 240vh; }
  .do-gallery--home .do-gallery__stage { height: 360vh; }
}
/* Reduced motion: collapse to a single static hero image (front layer),
   no runway, no sticky. JS also bails early. */
@media (prefers-reduced-motion: reduce) {
  .do-gallery__stage { height: auto; }
  .do-gallery__pin { position: static; height: auto; }
  .do-gallery__scene { height: 60vh; }
  .do-gallery__layer:not([data-depth="3"]) { display: none; }
  .do-gallery__layer { position: relative; inset: 0; width: 100%; height: 100%; }
}

/* ----------------------------- CRAFT SHOWCASE ----------------------------- */
/* Ambient, muted-autoplay loop of the making process. Full-bleed video with a
   text band beneath it — mirrors the hero's responsive two-video pattern. */
.showcase { background: var(--charcoal); color: var(--cream); }
.showcase__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--charcoal);
}
.showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.showcase__video--mobile { display: none; }

/* Soft vignette so the video edges meet the bands gently */
.showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(43,37,32,0.20) 0%, transparent 16%, transparent 80%, rgba(43,37,32,0.30) 100%);
}

/* Text band — sits below the video */
.showcase__textband {
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
}
.showcase__textband .eyebrow { color: var(--terracotta); }
.showcase__textband h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.12;
  margin: 0.75rem 0 1rem;
  max-width: 28ch;
}
.showcase__textband p {
  max-width: 46ch;
  color: rgba(245, 239, 226, 0.82);
  font-size: var(--fs-base);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .showcase__media { aspect-ratio: 9 / 16; max-height: 78vh; }
  .showcase__video--desktop { display: none; }
  .showcase__video--mobile  { display: block; }
}

/* ------------------------------- BENTO GALLERY ---------------------------- */
/* An asymmetric mosaic of the six "From Our Hands" photos — varied tile
   sizes (a 2×2 hero, a tall edge, two wide footers) so the eye finds a
   rhythm instead of a uniform grid. Each tile carries a GLASSMORPHISM
   caption card (frosted blur + hairline border) pinned over the image —
   a small tracked label above an italic serif title. Pure CSS; cells
   fade/rise in sequence via .reveal-stagger (main.js IntersectionObserver).
   Responsive: 2-col mosaic on tablet, full-width tall tiles on phone. */
.bento-gallery {
  /* Warm cream atmosphere, with soft warm radial blooms that carry the
     hero's glow downward so the section reads as a continuation, not a
     flat break after the cinematic header. */
  background: #f4efe6;
  background-image:
    radial-gradient(circle at 12% 0%,  rgba(181, 82, 58, 0.07) 0, transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(197, 164, 110, 0.10) 0, transparent 46%);
  color: var(--charcoal);
}
/* Give the gallery a wider content measure than the default 1240px column.
   Bumped ~20% past --maxw-wide (1480 → 1760px) so the mosaic reads larger on
   big screens — without going full-bleed, which squashed its aspect ratio. */
.bento-gallery .container { max-width: 1760px; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Row height drives tile size. Scaled up ~20% in step with the wider
     container (210→250, 26→31vw, 360→430) so every tile — 1×1, tall (1×2),
     the 2×2 hero and the wide footers — grows in width AND height together,
     keeping the exact same proportions (no stretching). */
  grid-auto-rows: clamp(250px, 31vw, 430px);
  gap: clamp(0.6rem, 1.2vw, 1.05rem);
}
/* Mosaic spans — varied sizes give the gallery its editorial rhythm.
   Layout (4 cols):  [1 1 2 |3] / [1 1 4 |3] / [5 5|6 6] */
.bento__cell--lg   { grid-column: span 2; grid-row: span 2; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--wide { grid-column: span 2; }

.bento__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sand-deep);          /* placeholder tone while images load */
  margin: 0;
  isolation: isolate;                    /* keep glass blur scoped to the tile */
  box-shadow: 0 18px 50px rgba(43, 37, 32, 0.10);
}
.bento__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.5s var(--ease), filter var(--dur) var(--ease);
}
.bento__cell:hover img { transform: scale(1.06); }

/* GLASSMORPHISM caption — frosted card floating over the photo. The blur
   reads best over image content, so it always sits inside the tile. A tiny
   terracotta dot leads the label; italic serif title sits beneath. */
.bento__caption {
  position: absolute;
  left:   clamp(0.7rem, 1.4vw, 1.1rem);
  bottom: clamp(0.7rem, 1.4vw, 1.1rem);
  max-width: calc(100% - 2 * clamp(0.7rem, 1.4vw, 1.1rem));
  padding: 0.8rem 1.1rem;
  background: rgba(43, 37, 32, 0.26);
  -webkit-backdrop-filter: blur(13px) saturate(150%);
  backdrop-filter: blur(13px) saturate(150%);
  border: 1px solid rgba(248, 244, 236, 0.22);
  border-radius: var(--r-md);
  color: #fff;
  box-shadow: 0 14px 40px rgba(20, 16, 12, 0.22);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.bento__cell:hover .bento__caption {
  background: rgba(43, 37, 32, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(20, 16, 12, 0.30);
}
.bento__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.3rem;
}
.bento__label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(181, 82, 58, 0.25);
  flex-shrink: 0;
}
.bento__title {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.98rem, 1.25vw, 1.2rem);
  line-height: 1.18;
  color: #fff;
  text-wrap: balance;
}
/* The hero (2×2) tile earns a slightly larger, brighter title. */
.bento__cell--lg .bento__title { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.bento__cell--lg .bento__caption { padding: 1rem 1.3rem; }

/* Tablet: 2-column mosaic, spans retuned so tiles stay large. */
@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(150px, 38vw, 240px);
  }
  .bento__cell--lg   { grid-column: span 2; grid-row: span 2; }
  .bento__cell--tall { grid-column: span 1; grid-row: span 1; }
  .bento__cell--wide { grid-column: span 2; grid-row: span 1; }
  /* Drop one small tile so the mosaic fills without a gap (6 unit-cells
     would otherwise leave an orphan hole beside the lone 1×1). Hidden only
     at this 2-col breakpoint — re-shown on phone below, where the single
     column has no hole, so no image is lost from the site. */
  .bento__cell--optional { display: none; }
}
/* Phone: single column, generous viewport-tall tiles, glass stays legible. */
@media (max-width: 540px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 58vh;
    gap: 0.8rem;
  }
  .bento__cell--lg,
  .bento__cell--tall,
  .bento__cell--wide { grid-column: span 1; grid-row: span 1; }
  .bento__cell--optional { display: block; }   /* 1-col has no hole → show all */
}
/* Reduced motion: drop the hover zoom lift, keep the still composition. */
@media (prefers-reduced-motion: reduce) {
  .bento__cell img,
  .bento__caption { transition: none; }
}



/* --------------------------------- INTRO (legacy) ------------------------- */
/* Retained for any pages still using .intro; the homepage now uses .welcome.
   Stacked layout: the eyebrow label sits ABOVE the body (not beside it) so
   the section reads top-to-bottom and the paragraphs get a comfortable
   measure instead of a cramped half-column. */
.intro {
  display: block;
  max-width: var(--maxw-read);
}
.intro__label { margin-bottom: var(--s-4); }
.intro__body h2 { margin-bottom: var(--s-4); }
.intro__body p + p { margin-top: var(--s-3); }
.intro__signature {
  margin-top: var(--s-5);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--charcoal);
}
.intro__signature small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-top: 0.4rem;
}

/* --------------------------------- SHOWCASE ------------------------------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.section-head h2 { max-width: 18ch; text-wrap: balance; }
.section-head__lead { max-width: 38ch; color: var(--charcoal-2); }

/* Stacked variant — when a longer lead paragraph reads poorly in the
   default two-column flex (heavy right cell beside a short title), stack
   the header instead: eyebrow → title → lead, all left-aligned. Scoped
   via .section-head--stacked; the shared .section-head is untouched. */
.section-head--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.section-head--stacked h2 { margin-top: var(--s-3); }
/* Wider lead for a full two-sentence paragraph; cap for readability. */
.section-head--stacked .section-head__lead {
  max-width: 56ch;
  margin-top: var(--s-3);
}

/* ----- Masthead heading (VOGUE-style section opener) -----
   Scoped to .section-head--masthead — used by the homepage story section.
   Centered stack: a double-rule masthead line with the eyebrow between,
   then an oversized display-serif title, then the lead beneath. The shared
   .section-head flex rules are overridden here; other pages keep theirs. */
.section-head--masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
/* Classic double hairline with the eyebrow centered between — a magazine
   masthead rule. Built from the eyebrow's own flanking rules so the line
   stretches with the column width. */
.eyebrow--masthead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  color: var(--charcoal);
  font-size: var(--fs-micro);
  letter-spacing: 0.42em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* Drop the global eyebrow's terracotta leading tick; rules do the framing. */
.eyebrow--masthead::before {
  content: "";
  position: static;
  flex: 1;
  width: auto; height: 1px;
  background: var(--charcoal);
  opacity: 0.35;
  max-width: 22rem;
}
.eyebrow--masthead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--charcoal);
  opacity: 0.35;
  max-width: 22rem;
}
/* Oversized display serif — the VOGUE move: large, tight, balanced. */
.masthead__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0 auto;
  text-wrap: balance;
}
.section-head__lead--masthead {
  max-width: 44ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  font-size: var(--fs-lead);
  color: var(--charcoal-2);
  text-wrap: pretty;
}
/* Masthead tightens on small screens — smaller rules, smaller title. */
@media (max-width: 860px) {
  .masthead__title { font-size: clamp(2rem, 8vw, 2.9rem); }
  .eyebrow--masthead { letter-spacing: 0.34em; gap: 0.85rem; }
  .eyebrow--masthead::before,
  .eyebrow--masthead::after { max-width: 4rem; }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.work-card { display: flex; flex-direction: column; }
.work-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand-deep);
  margin-bottom: var(--s-3);
}

/* Portfolio feel on Dó page: slightly larger images and less text density */
.do-paper-page .work-card__media { aspect-ratio: 5 / 4; }
.do-paper-page .work-card__title { font-size: 1.25rem; }
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.work-card:hover .work-card__media img { transform: scale(1.05); }
.work-card__tag {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(43,37,32,0.55);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
}
.work-card__title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  transition: color var(--dur) var(--ease);
}
.work-card:hover .work-card__title { color: var(--terracotta); }
.work-card__poem {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--charcoal-2);
  margin-bottom: 0.6rem;
}
.work-card__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.work-card--wide { grid-column: span 2; }
.work-card--wide .work-card__media { aspect-ratio: 16 / 11; }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card--wide { grid-column: span 1; }
}

/* --------------------------- MUSEUM GALLERY ------------------------------ */
/* A calm, light "gallery wall" — pieces hung on a cream/Dó-paper field like
   a fine-art catalogue page. Each plate is a framed image on a warm-white
   mat with a thin hairline frame; a small numbered plate label sits below.
   Generous gutters, slow hover lift. Used on the Dó paper page for the
   Da Nang tourism gift collection. */
.museum-gallery { background: var(--cream); }
.museum-gallery .section-head { margin-bottom: var(--s-7); }

.museum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3.5vw, 3rem);
}
@media (max-width: 900px) {
  .museum-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .museum-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.museum-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The frame: warm-white mat + hairline, so each piece reads as hung art. */
.museum-plate__frame {
  width: 100%;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--cream);
  box-shadow:
    0 0 0 1px var(--line),            /* hairline frame      */
    0 1px 2px rgba(43, 37, 32, 0.04), /* soft contact shadow */
    0 14px 30px -18px rgba(43, 37, 32, 0.22); /* lifted off the wall */
  transition: transform 0.9s var(--ease),
              box-shadow 0.9s var(--ease);
}
.museum-plate__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;          /* uniform portrait crop */
  object-fit: cover;
  display: block;
}
.museum-plate:hover .museum-plate__frame {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--line),
    0 1px 2px rgba(43, 37, 32, 0.04),
    0 22px 40px -20px rgba(43, 37, 32, 0.28);
}

/* Plate label — small, centred, catalogue-style (No. 01 above the title). */
.museum-plate__label {
  margin-top: var(--s-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.museum-plate__no {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-d);
}
.museum-plate__title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--charcoal);
}

/* A framed plate reads as clickable: subtle cursor + hover ring cue. */
.museum-plate__frame { cursor: zoom-in; }
.museum-plate__frame:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}

/* ------------------------------ LIGHTBOX -------------------------------- */
/* Full-screen detail view for the museum gallery. Soft charcoal scrim, the
   piece centred on a warm mat with a hairline frame (echoing the gallery
   wall), a small numbered caption beneath, and quiet prev/next controls.
   Fades in via the .open class; body scroll is locked while open. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(28, 24, 20, 0);     /* scrim fades in */
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Restore the hidden attribute — the .lightbox { display: grid } rule above
   would otherwise override [hidden] and leave an invisible full-screen layer
   trapping all clicks. Author CSS beats the UA [hidden] rule at equal
   specificity, so we must re-assert it here. */
.lightbox[hidden] { display: none; }
.lightbox.open {
  opacity: 1;
  background: rgba(28, 24, 20, 0.82);
  backdrop-filter: blur(3px);
}

.lightbox__figure {
  margin: 0;
  max-width: min(900px, 90vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.97);
  transition: transform var(--dur) var(--ease);
}
.lightbox.open .lightbox__figure { transform: scale(1); }

.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: 74vh;
  padding: clamp(0.8rem, 1.6vw, 1.4rem);
  background: var(--cream);
  box-shadow:
    0 0 0 1px var(--line),
    0 30px 60px -25px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}

.lightbox__caption {
  margin-top: var(--s-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--cream);
}
.lightbox__no {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lightbox__title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
}

/* Round icon buttons — close (top-right) and prev/next (sides). */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(38px, 5vw, 52px);
  height: clamp(38px, 5vw, 52px);
  padding: 0;
  border: 1px solid rgba(248, 244, 236, 0.25);
  border-radius: 50%;
  background: rgba(248, 244, 236, 0.06);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.lightbox__close { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); transform: none; }
.lightbox__nav--prev { left: clamp(0.8rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(0.8rem, 3vw, 2rem); }
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(248, 244, 236, 0.16);
  border-color: rgba(248, 244, 236, 0.45);
}
.lightbox__close svg,
.lightbox__nav svg { width: 22px; height: 22px; }

@media (max-width: 600px) {
  /* Compact controls on small screens; keep them clear of the image. */
  .lightbox__close { width: 40px; height: 40px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav svg { width: 18px; height: 18px; }
}

/* ------------------------------- STORY LOOKBOOK --------------------------- */
/* Editorial / VOGUE-style spread — full-bleed 50/50 rows: the image runs
   flush to the viewport edge, the text occupies the other half. Oversized
   display serifs and giant outlined index numerals complete the look.
   Each .story-card is a 2-col row; --reverse flips the image to the right.
   Bold but disciplined — the drama comes from scale, not noise. */

/* Break the list OUT of the page container so images can reach the viewport
   edge. html/body{overflow-x:hidden} guards against horizontal scroll/overflow
   on mobile (the 100vw width can exceed the visible area on iOS). */
.story-list {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  gap: clamp(4rem, 10vw, 9rem);
}

/* True 50/50 split. No column gap — the image bleeds to the edge; the text
   column carries its own inner padding instead. The image is locked to a 3:2
   aspect ratio, so it sets the row height; the text centres against it,
   keeping both halves near the same height. */
.story-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.story-card--reverse .story-card__media { order: 2; }

/* Giant outlined "No.0X" — sits over the image half as a graphic mark.
   Outline via -webkit-text-stroke; fill transparent. Anchored to the edge
   of the IMAGE column so it reads as a caption to the picture. */
.story-card__index {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(7rem, 18vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  mix-blend-mode: difference;
}
/* Straight rows: image is on the LEFT → numeral anchors its bottom-left. */
.story-card:not(.story-card--reverse) .story-card__index {
  left: clamp(1rem, 3vw, 3rem);
  top: auto; bottom: clamp(1rem, 3vw, 2.5rem);
  transform: none;
}
/* Reversed rows: image is on the RIGHT → numeral anchors its bottom-right. */
.story-card--reverse .story-card__index {
  right: clamp(1rem, 3vw, 3rem);
  top: auto; bottom: clamp(1rem, 3vw, 2.5rem);
  transform: none;
}

/* Image fills its half of the row at a fixed 3:2 aspect ratio — cover,
   edge to edge. It sets the row height; the text column centres beside it. */
.story-card__media {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sand-deep);
}
.story-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
/* <picture> wrapper around a responsive img — let it pass through so the img
   still fills the media frame (cover) and inherits the hover zoom. */
.story-card__media picture { display: contents; }
.story-card:hover .story-card__media img { transform: scale(1.05); }

/* Narrative column: vertically centred, padded inboard so the text aligns
   with the page's content rhythm rather than running to the edge. */
.story-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5.5rem);
  max-width: 38rem;
}
.story-card--reverse .story-card__body { justify-self: end; }
.story-card__tag {
  display: inline-block;
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
/* Oversized display serif — the VOGUE move. Tight tracking, italic flourish. */
.story-card__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.story-card:hover .story-card__title { color: var(--terracotta); }
.story-card__text {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: var(--charcoal-2);
  margin-bottom: var(--s-5);
}
.story-card__link {
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.story-card__link:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* Single column on small screens: keep the bold type and full-width media,
   drop the outlined numeral (it overlaps text in a narrow column). The list
   stays full-viewport-width so images run edge to edge; text gets gutters. */
@media (max-width: 860px) {
  .story-list { gap: clamp(3.5rem, 12vw, 5rem); }
  .story-card {
    grid-template-columns: 1fr;
    min-height: 0;                 /* let content define height when stacked */
    margin-top: 0 !important;
  }
  .story-card--reverse { grid-template-columns: 1fr; }
  .story-card--reverse .story-card__media { order: 0; }
  .story-card--reverse .story-card__body { justify-self: start; }
  .story-card__index { display: none; }
  .story-card__media { height: auto; aspect-ratio: 4 / 5; }
  .story-card__body { padding: var(--s-4) clamp(1.25rem, 5vw, 2rem); }
  .story-card__title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}

/* Horizontal scroll variant */
.scroller {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { height: 5px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.scroller__item {
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 360px);
  scroll-snap-align: start;
}

/* --------------------------------- STUDIO BAND ---------------------------- */
.studio-band {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.studio-band__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.studio-band__media img { width: 100%; height: 100%; object-fit: cover; }
.studio-band__badge {
  position: absolute;
  bottom: var(--s-3); right: var(--s-3);
  background: var(--cream);
  padding: var(--s-3);
  max-width: 220px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(43,37,32,0.18);
}
.studio-band__badge .stamp {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.3rem;
  line-height: 1.2;
}
.studio-band__badge small {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-top: 0.5rem;
}
.studio-band__text h2 { margin-bottom: var(--s-4); }
.studio-band__points {
  margin-top: var(--s-4);
  display: grid; gap: var(--s-3);
}
.studio-band__points li {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--charcoal-2);
}
.studio-band__points li::before {
  content: "✦";
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
@media (max-width: 860px) {
  .studio-band { grid-template-columns: 1fr; }
  .studio-band__media { aspect-ratio: 4 / 3; max-width: 520px; }
}

/* ------------------------------ MADE BY HAND ------------------------------ */
/* The endangered art, shown with weight. A horizontal strip of real village
   photos — single-word serif captions beneath each, like a museum plate row.
   Carries the .reveal-stagger system so each plate fades/rises in sequence.
   On narrow screens it collapses to a 2-up grid (keeps the plates large and
   unhurried rather than a cramped phone scroller). The mission is told in a
   single quiet line beneath the photos, not as a separate heavy block. */
.handmade { background: var(--cream); }
.handmade .container--wide { max-width: var(--maxw-wide); }
.handmade__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  margin-top: var(--s-6);
}
.handmade__plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.handmade__plate img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
  background: var(--sand-deep);
  box-shadow: 0 14px 38px rgba(43, 37, 32, 0.10);
  transition: transform 1.2s var(--ease);
}
.handmade__plate:hover img { transform: scale(1.04); }
.handmade__plate figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--charcoal-3);
  text-align: center;
  letter-spacing: 0.01em;
}
/* The mission, told quietly beneath the photos — a single italic serif line
   in a readable measure. Centered so it reads like a colophon, not a pitch. */
.handmade__note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.5;
  color: var(--charcoal-2);
  max-width: 52ch;
  margin: var(--s-7) auto 0;
  text-align: center;
  text-wrap: balance;
}
/* Tablet: 3 columns keeps each plate readable and the row still feels full. */
@media (max-width: 900px) {
  .handmade__strip { grid-template-columns: repeat(3, 1fr); }
}
/* Phone: 2 columns, captions stay legible. */
@media (max-width: 540px) {
  .handmade__strip { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .handmade__note { margin-top: var(--s-6); }
}

/* --------------------------------- SOCIAL PROOF --------------------------- */
.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.proof__media {
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--sand-deep);
}
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof__text .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  color: var(--charcoal);
  margin: var(--s-4) 0;
  text-wrap: balance;
}
.proof__text .quote::before { content: "“"; color: var(--terracotta); margin-right: 0.1em; }
.proof__text .quote::after  { content: "”"; color: var(--terracotta); }
.proof__author {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
}
.proof__author strong { font-weight: 600; color: var(--charcoal); }
.proof__author span { font-size: var(--fs-small); color: var(--charcoal-3); display: block; }

.logo-wall {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.logo-wall span {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal-3);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }

/* --------------------------------- CTA ------------------------------------ */
.cta-band {
  text-align: center;
  padding-block: var(--s-8);
}
.cta-band h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cta-band p {
  max-width: 48ch;
  margin: var(--s-4) auto var(--s-5);
}
.cta-band .btn-group { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }

/* Ornamental divider */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  color: var(--gold);
  margin: var(--s-3) 0;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: 60px; background: var(--line);
}
.ornament svg { width: 18px; height: 18px; }

/* --------------------------------- FOOTER --------------------------------- */
.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  padding-block: var(--s-7) var(--s-4);
}
.site-footer a { color: rgba(248,244,236,0.78); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: var(--s-6);
}
/* Footer sits on a near-black background; the logo PNG is solid black, so
   invert it to the cream paper color and let it read as a positive mark. */
.footer-brand .logo img {
  height: 48px;
  filter: invert(1) brightness(1.08);
}
.footer-brand p { color: rgba(248,244,236,0.6); margin-top: var(--s-3); max-width: 32ch; font-size: var(--fs-small); }
.footer-col h4 {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.footer-col li { margin-bottom: 0.7rem; font-size: var(--fs-small); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(248,244,236,0.12);
  font-size: var(--fs-micro);
  color: rgba(248,244,236,0.5);
  flex-wrap: wrap; gap: var(--s-2);
}
.socials { display: flex; gap: var(--s-2); }
.socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(248,244,236,0.18);
  border-radius: 50%;
}
.socials svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* --------------------------------- FILTER --------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.filter-bar button {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--charcoal-3);
  padding: 0.6rem 1rem;
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}
.filter-bar button:hover { color: var(--terracotta); }
.filter-bar button.active {
  color: var(--cream);
  background: var(--charcoal);
}

/* --------------------------------- PROCESS -------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
.process__step {
  position: relative;
  padding-top: var(--s-5);
}
.process__step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
}
.process__step h3 {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 1.3rem;
}
.process__step p { font-size: var(--fs-small); }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* ----------------------------- DO · THE CRAFT ----------------------------- */
/* "The Craft · 800 Years" section on the Dó page: a click-to-load video
   facade sits above a short heritage narrative and the 4-step process.
   Background is the default cream so the film reads cleanly; the sand
   "Why Dó" section that follows provides the contrast. */
.do-craft__video { margin: var(--s-6) auto 0; max-width: 960px; }

/* 16:9 facade. The <button> holds the thumbnail + scrim + play glyph;
   main.js swaps its contents for a privacy-friendly iframe on click. */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--sand-deep);
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;                 /* matches the softness of cards */
}
.yt-facade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ken Burns drift — slow and quiet, like the hero */
  animation: yt-drift 22s ease-in-out infinite alternate;
}
@keyframes yt-drift { from { transform: scale(1.02); } to { transform: scale(1.10) translate(1.5%, -1%); } }
.yt-facade__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,0.10) 0%, rgba(20,18,14,0.55) 100%);
}
.yt-facade__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(56px, 9vw, 84px); height: clamp(56px, 9vw, 84px);
  border-radius: 50%;
  background: rgba(248, 244, 236, 0.92);   /* cream, slightly translucent */
  color: var(--charcoal);
  transition: transform 0.35s ease, background 0.35s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}
.yt-facade__play svg { width: 38%; height: 38%; margin-left: 0.15em; }
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--cream);
}
.yt-facade:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Once playing, drop the drift + scrim so the iframe fills the box. */
.yt-facade.is-playing { cursor: default; background: #000; }
.yt-facade.is-playing img,
.yt-facade.is-playing .yt-facade__scrim,
.yt-facade.is-playing .yt-facade__play { display: none; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Reduced motion: skip the drift, keep the still frame. */
@media (prefers-reduced-motion: reduce) { .yt-facade img { animation: none; } }

.do-craft__credit {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted, #6b6357);
  text-align: center;
}

/* Heritage narrative — comfortable reading measure, centred under the film. */
.do-craft__prose { max-width: 60ch; margin: var(--s-8) auto 0; }
.do-craft__prose p { font-size: 1.05rem; line-height: 1.75; }
.do-craft__prose p + p { margin-top: var(--s-4); }

/* Pull-quote between narrative and the process steps. */
.do-craft__quote {
  max-width: 50ch; margin: var(--s-8) auto;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.45; text-align: center;
  color: var(--charcoal);
}
.do-craft__quote::before,
.do-craft__quote::after { content: "—"; color: var(--gold); margin: 0 0.4em; }

.do-craft__process { margin-top: var(--s-8); }

/* --------------------------------- VALUES --------------------------------- */
.value-list { display: grid; gap: var(--s-3); }
.value-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.value-list h3 { font-size: 1.25rem; }
.value-list p { font-size: var(--fs-small); margin-top: 0.3rem; }
.value-list .num {
  font-family: var(--serif); font-style: italic; color: var(--gold);
  font-size: 1.2rem; min-width: 2.5rem;
}

/* Two-column feature */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature + .feature { margin-top: var(--s-8); }
.feature--reverse .feature__media { order: 2; }
.feature__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__text h2 { margin-bottom: var(--s-4); }
@media (max-width: 860px) {
  .feature, .feature--reverse .feature__media { grid-template-columns: 1fr; order: initial; }
  .feature__media { aspect-ratio: 4 / 3; }
}

/* --------------------------- STUDIO DIPTYCH ------------------------------ */
   Two-image close-up strip for the studio page — a quiet, editorial pairing
   of handmade details. Falls back to a single column on small screens. */
.studio-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: stretch;
}
.studio-diptych__item { display: flex; flex-direction: column; gap: var(--s-3); }
.studio-diptych__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand-deep);
}
.studio-diptych__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.studio-diptych__item:hover .studio-diptych__media img { transform: scale(1.03); }
.studio-diptych__caption { font-size: var(--fs-small); color: var(--charcoal-3); }
@media (max-width: 720px) {
  .studio-diptych { grid-template-columns: 1fr; gap: var(--s-5); }
  .studio-diptych__media { aspect-ratio: 4 / 3; }
}

/* ------------------------------ TEAM --------------------------------------
   Founding-team pair: a portrait card next to a type-led card. Used on the
   Studio page for Diem (with photo) and Ilia (text-only). Falls back to a
   single column on small screens. */
.team {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
}
.team__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.team__card--media { padding: 0; overflow: hidden; }
.team__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep); }
.team__media img { width: 100%; height: 100%; object-fit: cover; }
.team__card--media .team__body { padding: clamp(1.5rem, 3vw, 2.5rem); padding-top: 0; }
.team__role {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-d);
}
.team__name { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; }
.team__name small { display: block; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.02em; color: var(--charcoal-3); margin-top: 0.35rem; }
.team__card p { color: var(--charcoal-2); font-size: var(--fs-body); }
.team__card p + p { margin-top: var(--s-3); }
@media (max-width: 820px) {
  .team { grid-template-columns: 1fr; }
}

/* --------------------------------- FORM ----------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  font-weight: 500;
}
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--terracotta);
}
.field select { cursor: pointer; }
.form-actions { margin-top: var(--s-5); display: flex; gap: var(--s-2); align-items: center; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.contact-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.contact-info { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.contact-info__item h4 {
  font-family: var(--sans); font-size: var(--fs-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 0.4rem; font-weight: 600;
}
.contact-info__item p, .contact-info__item a { color: var(--charcoal); font-size: var(--fs-small); }
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } }

/* ------------------------------- NEWS ------------------------------------- */

/* News grid + card — echoes the work-card visual language, tuned for posts */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.news-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sand-deep);
  margin-bottom: var(--s-3);
}
.news-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__tag {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(43,37,32,0.55);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
}
.news-card__body { display: flex; flex-direction: column; flex: 1; }
.news-card__date {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-bottom: 0.5rem;
}
.news-card__title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: color var(--dur) var(--ease);
}
.news-card:hover .news-card__title { color: var(--terracotta); }
.news-card__excerpt {
  font-size: var(--fs-small);
  color: var(--charcoal-2);
  margin-bottom: var(--s-3);
}
.news-card__readmore {
  margin-top: auto;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta);
}
.news-card:hover .news-card__readmore { color: var(--terracotta-d); }
.news-empty { color: var(--charcoal-3); font-style: italic; padding: var(--s-5) 0; }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* Featured (first) post on the listing page — spans full width, larger */
.news-card--featured { grid-column: 1 / -1; }
.news-card--featured .news-card__media { aspect-ratio: 16 / 7; }
.news-card--featured .news-card__title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 900px) {
  .news-card--featured { grid-template-columns: 1fr; }
  .news-card--featured .news-card__media { aspect-ratio: 16 / 9; }
}

/* ---- Rich article body (individual post pages) ---- */
.post-body { max-width: var(--maxw-read); margin-inline: auto; }
.post-body > * + * { margin-top: var(--s-3); }
.post-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: var(--s-5);
  line-height: 1.2;
}
.post-body h3 {
  font-size: 1.35rem;
  margin-top: var(--s-4);
}
.post-body p { font-size: 1.125rem; line-height: 1.75; color: var(--charcoal); }
.post-body p.lead { color: var(--charcoal); font-size: var(--fs-lead); }
.post-body a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--terracotta-d); }
.post-body img {
  width: 100%;
  border-radius: var(--r-md);
  margin-top: var(--s-4);
}
.post-body figcaption,
.post-body .caption {
  font-size: var(--fs-micro);
  color: var(--charcoal-3);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}
.post-body blockquote {
  border-left: 2px solid var(--terracotta);
  padding-left: var(--s-4);
  margin: var(--s-5) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--charcoal);
}
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body ul li, .post-body ol li { margin-bottom: 0.5rem; color: var(--charcoal); }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }

/* Post meta header (date + category + back link) */
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  margin-bottom: var(--s-2);
}
.post-meta .sep { opacity: 0.5; }
.post-meta .cat { color: var(--terracotta); font-weight: 600; }
.post-hero-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  margin: var(--s-5) 0 var(--s-6);
  background: var(--sand-deep);
}
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------- PRODUCT / FEATURE PAGES --------------------- */

/* Split hero: tall image beside title block */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero-split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand-deep); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__text h1 { font-size: var(--fs-h1); margin-top: var(--s-2); text-wrap: balance; }
.hero-split__text .lead { margin-top: var(--s-4); }
.hero-split__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.hero-split__chips span {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
}
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { aspect-ratio: 4 / 3; order: -1; }
}

/* ---- Dó Paper full-bleed cinematic hero ---- */
  /* Replaces the split hero on do-paper.html. Full-viewport photo with a slow
     Ken Burns drift; eyebrow + headline + lead + CTAs pinned bottom-left over
     a soft bottom scrim. Reuses the global heroRise keyframe for entrance.   */
  .do-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--charcoal); /* fallback while the photo loads */
    isolation: isolate;
  }

  /* The photo — fills the frame and drifts (Ken Burns).
     Desktop + mobile variants are two <img>s swapped by CSS, mirroring the
     homepage hero. Both use src so the VI build prefixes paths correctly.   */
  .do-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .do-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform-origin: 60% 55%;
    animation: doHeroKenBurns 24s var(--ease-soft) infinite alternate;
  }
  .do-hero__img--mobile { display: none; }

  /* Layered scrims — bottom carries the text, top keeps the header legible. */
  .do-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .do-hero__scrim--bottom {
    background: linear-gradient(
      to top,
      rgba(20, 16, 12, 0.78) 0%,
      rgba(20, 16, 12, 0.55) 22%,
      rgba(20, 16, 12, 0.18) 48%,
      transparent 70%
    );
  }
  .do-hero__scrim--top {
    background: linear-gradient(
      to bottom,
      rgba(20, 16, 12, 0.42) 0%,
      rgba(20, 16, 12, 0.12) 14%,
      transparent 30%
    );
  }

  /* Text band — pinned bottom-left, max width so the headline stays editorial. */
  .do-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(2rem, 5vw, 5rem) clamp(3.5rem, 8vh, 6rem);
  }
  .do-hero__textband { max-width: 760px; }

  .do-hero__eyebrow {
    color: var(--gold);
    display: block;
    margin-bottom: var(--s-3);
  }
  .do-hero__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--cream);
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  }
  .do-hero__lead {
    margin-top: var(--s-4);
    max-width: 52ch;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: rgba(248, 244, 236, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
  }
  .do-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-5);
  }

  /* Ghost button tuned for dark scrims (lighter than the charcoal .btn--ghost). */
  .btn--ghost-light {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(248, 244, 236, 0.5);
  }
  .btn--ghost-light:hover {
    background: var(--cream);
    color: var(--charcoal);
    border-color: var(--cream);
  }

  /* Scroll cue — bottom-center, mirrors the homepage .hero__scroll rhythm. */
  .do-hero__scroll {
    position: absolute;
    z-index: 2;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(248, 244, 236, 0.8);
    text-decoration: none;
  }
  .do-hero__scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(248, 244, 236, 0.35);
    position: relative;
    overflow: hidden;
  }
  .do-hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: translateY(-100%);
    animation: doHeroScrollDot 2.2s var(--ease) infinite;
  }

  /* Staggered entrance — eyebrow → headline → lead → actions (reuses heroRise). */
  .do-hero__textband > * {
    opacity: 0;
    transform: translateY(26px);
    animation: heroRise 1.1s var(--ease) forwards;
  }
  .do-hero__textband > *:nth-child(1) { animation-delay: 0.25s; }
  .do-hero__textband > *:nth-child(2) { animation-delay: 0.55s; }
  .do-hero__textband > *:nth-child(3) { animation-delay: 0.85s; }
  .do-hero__textband > *:nth-child(4) { animation-delay: 1.1s; }
  .do-hero__scroll { opacity: 0; animation: heroRise 1s var(--ease) 1.4s forwards; }

  @keyframes doHeroKenBurns {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.08) translate3d(-1.5%, -1.5%, 0); }
  }
  @keyframes doHeroScrollDot {
    0%   { transform: translateY(-100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }

  /* Mobile: swap to the portrait photo AND switch from the full-bleed overlay
     to a banner layout — photo on top (contained, not full-height), text band
     flows below it on the cream background. Keeps the long lead paragraph OFF
     the image (it was climbing up over the photo) and matches the homepage
     hero rhythm. Desktop keeps the cinematic full-bleed overlay. */
  @media (max-width: 768px) {
    .do-hero {
      display: block;
      min-height: 0;
      background: var(--cream);
    }
    .do-hero__media {
      position: relative;
      inset: auto;
      aspect-ratio: 4 / 5;
    }
    .do-hero__img--desktop { display: none; }
    .do-hero__img--mobile { display: block; object-position: center 25%; }
    /* No overlay scrims — text is no longer on the photo. */
    .do-hero__scrim { display: none; }
    /* Text band sits below the photo on cream; dark text, not cream-on-photo. */
    .do-hero__inner {
      padding-block: clamp(1.75rem, 5vw, 2.5rem) clamp(2.5rem, 6vh, 3.5rem);
    }
    .do-hero__title {
      font-size: clamp(2.2rem, 10vw, 3.4rem);
      color: var(--charcoal);
      text-shadow: none;
    }
    .do-hero__lead {
      font-size: var(--fs-body);
      color: var(--charcoal-2);
      text-shadow: none;
    }
    /* Ghost button tuned for the light cream background. */
    .btn--ghost-light {
      color: var(--charcoal);
      border-color: var(--line);
    }
    .btn--ghost-light:hover {
      background: var(--charcoal);
      color: var(--cream);
      border-color: var(--charcoal);
    }
    .do-hero__scroll { display: none; } /* scroll cue hidden on touch */
  }

  /* Respect reduced motion: freeze the Ken Burns, reveal text instantly. */
  @media (prefers-reduced-motion: reduce) {
    .do-hero__img { animation: none; }
    .do-hero__textband > *,
    .do-hero__scroll { animation: none; opacity: 1; transform: none; }
  }

/* Spec list — a tasteful definition list of materials/details */
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--s-5); }
.spec-list dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-3);
  padding: var(--s-3) 0 0.2rem;
  border-top: 1px solid var(--line);
}
.spec-list dd {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--charcoal);
  padding: var(--s-3) 0 0.2rem;
  border-top: 1px solid var(--line);
  margin: 0;
}
@media (max-width: 600px) { .spec-list { grid-template-columns: 1fr; } .spec-list dd { border-top: 0; padding-top: 0; } }

/* Cards grid — heritage / benefits / product types */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(43,37,32,0.10);
  border-color: var(--gold);
}
.card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold);
  line-height: 1;
}
.card__icon { width: 44px; height: 44px; color: var(--terracotta); margin-bottom: var(--s-3); }
.card h3 { font-size: 1.4rem; margin: var(--s-3) 0 var(--s-2); }
.card p { font-size: var(--fs-small); }
@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr 1fr; } .cards-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cards-grid { grid-template-columns: 1fr; } }

/* --------------------- CAPABILITY LIST (contact) ----------------------- */
/* A compact, keyword-rich grid of what the studio can make. Echoes the
   .card component but lighter — a numbered item with a short label. */
.cap-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.cap-item__no {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--gold-d);
  margin-bottom: 0.4rem;
}
.cap-item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--charcoal);
  margin: 0 0 0.35rem;
}
.cap-item p { color: var(--charcoal-3); margin: 0; font-size: var(--fs-small); }
@media (max-width: 768px) { .cap-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cap-list { grid-template-columns: 1fr; } }

/* ------------------------- PROCESS STRIP -------------------------------- */
/* A 3-step "how an enquiry works" row. */
.process {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  counter-reset: step;
}
.process__step { position: relative; padding-top: 2.25rem; }
.process__no {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--terracotta);
  line-height: 1;
}
.process__step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
  color: var(--charcoal);
}
.process__step p { color: var(--charcoal-3); margin: 0; font-size: var(--fs-small); }
@media (max-width: 768px) { .process { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ------------------------------ FAQ ------------------------------------- */
/* Native <details> accordions — no JS. Quiet hairline dividers between items. */
.faq { max-width: 56rem; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1rem, 2vw, 1.35rem) 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold-d);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p {
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
  color: var(--charcoal-3);
  max-width: 62ch;
  line-height: 1.6;
}

/* Stats band */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  text-align: center;
}
.stats__num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  color: var(--terracotta);
  line-height: 1;
}
.stats__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-2);
}
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); } }

/* Scent / material chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--charcoal);
  background: var(--sand);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  transition: all var(--dur) var(--ease);
}
.chips span:hover { border-color: var(--gold); color: var(--terracotta); }

/* Highlight quote block */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.35;
  color: var(--charcoal);
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.pullquote::before { content: "“"; color: var(--terracotta); }
.pullquote::after  { content: "”"; color: var(--terracotta); }

/* Two-up image pair */
.image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.8rem); }
.image-pair > div { aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand-deep); }
.image-pair > div:first-child { transform: translateY(2.5rem); }
.image-pair img { width: 100%; height: 100%; object-fit: cover; }
.image-pair > div:first-child img { object-position: center top; }
@media (max-width: 700px) { .image-pair > div:first-child { transform: none; } .image-pair { grid-template-columns: 1fr; } }

/* Vertical feature list with checkmarks */
.feature-points { display: grid; gap: var(--s-3); }
.feature-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.feature-points li:last-child { border-bottom: 0; }
.feature-points .mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--terracotta);
  flex-shrink: 0;
}
.feature-points .mark svg { width: 16px; height: 16px; }
.feature-points h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 0.25rem; }
.feature-points p { font-size: var(--fs-small); margin: 0; }

/* CTA strip with image background */
.cta-strip {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  color: var(--cream);
  isolation: isolate;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-d));
}
.cta-strip h2 { color: var(--cream); font-size: clamp(1.8rem, 4vw, 3rem); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.cta-strip p { color: rgba(248,244,236,0.9); margin: var(--s-3) auto var(--s-5); max-width: 46ch; }
.cta-strip .btn--primary { background: var(--cream); color: var(--terracotta); border-color: var(--cream); }
.cta-strip .btn--primary:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.cta-strip .btn--ghost { color: var(--cream); border-color: rgba(248,244,236,0.5); }
.cta-strip .btn--ghost:hover { background: var(--cream); color: var(--terracotta); border-color: var(--cream); }

/* --------------------------------- UTILS ---------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-0 { margin-bottom: 0; }
.hide-mobile { }
.show-mobile { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .show-mobile { display: block; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.65s; }

/* Snappier, shorter reveals on small screens — less travel, quicker fade,
   so tall cards don't feel like they animate in late. */
@media (max-width: 860px) {
  .reveal { transform: translateY(18px); transition-duration: 0.6s; }
  .reveal-stagger > * { transform: translateY(18px); transition-duration: 0.55s; }
  .reveal-stagger.in > *:nth-child(n) { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}