/* ==========================================================================
   VD Textile Studio — Design System
   B2B fabric discovery & sample ordering platform
   ========================================================================== */

/* Fonts load via a direct <link rel="stylesheet"> in each page's <head>
   (not @import here) -- @import forces the browser to download and parse
   this whole file before it can even discover the font stylesheet exists,
   serializing a request that should run in parallel with this one. */

:root {
  /* Brand palette — sampled from client brand-color reference */
  --paper: #F1EEE9;        /* primary background, matches logo backing */
  --light-sand: #E9E5E2;
  --medium-sand: #E7E0D7;
  --clay: #BDB3AA;         /* primary accent / CTA */
  --clay-deep: #A89C90;    /* hover state for clay */
  --clay-text: #6E624F;    /* clay-family accent for text/icons on light backgrounds — --clay/--clay-deep are too light to pass WCAG AA there */
  --grey: #66656B;         /* secondary text, borders */
  --grey-soft: #9A98A0;
  --ink: #28292D;          /* primary text */
  --ink-soft: #46454B;
  --white: #FFFFFF;
  --espresso: #3B3128;     /* dark section / footer background, warm brown alternative to black */
  --espresso-soft: #4C4030;

  /* Semantic */
  --bg: var(--paper);
  --bg-alt: var(--light-sand);
  --bg-dark: var(--espresso);
  --text: var(--ink);
  --text-muted: var(--grey);
  --text-on-dark: var(--paper);
  --text-on-dark-muted: #BFB2A0;
  --border: rgba(40, 41, 45, 0.12);
  --border-on-dark: rgba(241, 238, 233, 0.14);
  --accent: var(--clay);
  --success: #5C7A5E;

  /* Type */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing / layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --ease: cubic-bezier(0.65, 0, 0.15, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-mid: 0.6s;
  --dur-slow: 1s;
}

/* ---------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------- Type ---------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow.on-dark { color: var(--text-on-dark-muted); }
.eyebrow.on-accent { color: var(--ink); }

.display-1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 2.1vw, 2.05rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.5vw, 1.55rem);
  line-height: 1.3;
}
.italic { font-style: italic; }

.heading-elegant-serif {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}
.heading-elegant-serif .italic { font-style: italic; }

.lede {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 46ch;
}
.body-sm { font-size: 14px; color: var(--text-muted); }
.mono-tag {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------- Buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; }
.btn:hover svg { transform: translateX(4px); }

.btn-primary { background: var(--medium-sand); color: var(--ink); border-color: var(--border); }
.btn-primary:hover { background: var(--clay); }

.btn-accent { background: var(--clay); color: var(--ink); }
.btn-accent:hover { background: var(--clay-deep); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--ink); background: rgba(40,41,45,0.04); }

.btn-outline-light { background: transparent; color: var(--paper); border-color: var(--border-on-dark); }
.btn-outline-light:hover { border-color: var(--paper); background: rgba(241,238,233,0.08); }

.btn-ghost {
  display: inline-flex;
  padding: 4px 0;
  border-radius: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--ink);
}
.btn-ghost.on-dark { color: var(--paper); border-color: var(--paper); }
.btn-ghost:hover { opacity: 0.65; }

.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------------------------------- Nav ---------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px 0;
  transition: background var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(241, 238, 233, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding: 14px 0;
  border-color: var(--border);
}
.site-header.on-dark:not(.is-scrolled) .nav-link { color: var(--paper); }
.site-header.on-dark:not(.is-scrolled) .btn-outline { border-color: var(--border-on-dark); color: var(--paper); }
.site-header.on-dark:not(.is-scrolled) .nav-toggle span { background: var(--paper); }
.site-header.on-dark:not(.is-scrolled) .logo-img { filter: invert(1) brightness(1.6); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: flex; align-items: center; }
.logo-img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .logo-img { height: 38px; } }
/* Bigger in the main site header. */
.site-header .logo-img { height: 60px; }
@media (max-width: 480px) { .site-header .logo-img { height: 46px; } }
/* Bigger still in the Design Studio/CRM sidebars -- a tall, mostly-empty
   260px-wide column has plenty of room above the nav links, so the logo
   can read as a real focal point there rather than a small mark. */
.dash-sidebar .logo-img { height: 90px; }
@media (max-width: 900px) { .dash-sidebar .logo-img { height: 60px; } }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--dur-fast) var(--ease-out);
}
.nav-link:hover::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-favorites-link { position: relative; display: flex; align-items: center; color: var(--ink); }
.nav-favorites-link svg { width: 21px; height: 21px; }
.nav-favorites-count {
  position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--clay-deep); color: var(--paper);
  font-size: 10px; line-height: 15px; text-align: center;
}
.site-header.on-dark:not(.is-scrolled) .nav-favorites-link { color: var(--paper); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; padding: 6px;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: all var(--dur-fast) var(--ease-out); }
.nav-toggle.is-active span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.is-active span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 199;
  display: flex; flex-direction: column;
  padding: 100px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 24px; font-weight: 300; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mobile-nav .btn { margin-top: 24px; }

body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-outline,
  .nav-actions .btn-primary { display: none; }
}
/* ---------------------------------- Reveal animation ---------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* Descendant selector, not just direct child -- initReveal() sets --i on
   every [data-reveal] element regardless of nesting depth (e.g. the story
   paragraphs sit inside .story-below-body, one level under the
   [data-reveal-group] itself), so the stagger needs to reach them too or
   they silently fall back to appearing all at once. */
[data-reveal-group] [data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }
.fade-scale { transform: scale(0.96); }
.fade-scale.is-visible { transform: scale(1); }

/* ---------------------------------- Hero ---------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  overflow: hidden;
  background: var(--bg-dark);
}
.hero-texture {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-texture::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,41,45,0.35) 0%, rgba(40,41,45,0.25) 35%, rgba(40,41,45,0.75) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 72px;
  max-width: var(--container-wide);
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  max-width: 16ch;
}
.hero-sub {
  margin-top: 26px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
  line-height: 1.65;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-scroll {
  position: absolute; bottom: 28px; right: var(--gutter);
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-on-dark-muted);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-scroll .line { width: 1px; height: 32px; background: var(--border-on-dark); position: relative; overflow: hidden; }
.hero-scroll .line::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--clay); animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ---------------------------------- Texture / swatch generators ---------------------------------- */
.swatch {
  position: relative;
  overflow: hidden;
  background: var(--medium-sand);
}
.swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.swatch:hover img { transform: scale(1.06); }

.texture {
  position: relative;
  background-size: cover;
  background-position: center;
}
.texture-jacquard { background: radial-gradient(120% 120% at 20% 20%, #4a4841 0%, #28292D 55%, #1c1d20 100%); }
.texture-jacquard::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: repeating-linear-gradient(45deg, rgba(241,238,233,0.06) 0 2px, transparent 2px 14px),
                     repeating-linear-gradient(-45deg, rgba(241,238,233,0.05) 0 2px, transparent 2px 14px);
}
.texture-dobby { background: radial-gradient(120% 120% at 80% 10%, #7d746a 0%, #5c554d 55%, #3a352f 100%); }
.texture-dobby::before {
  content: ''; position: absolute; inset: 0; opacity: 0.55;
  background-image: repeating-linear-gradient(90deg, rgba(241,238,233,0.08) 0 3px, transparent 3px 10px),
                     repeating-linear-gradient(0deg, rgba(40,41,45,0.12) 0 3px, transparent 3px 10px);
}
.texture-novelty { background: radial-gradient(120% 120% at 70% 75%, #d9cfc0 0%, #c2b39e 55%, #a4927a 100%); }
.texture-novelty::before {
  content: ''; position: absolute; inset: 0; opacity: 0.6;
  background-image: radial-gradient(rgba(241,238,233,0.35) 1.5px, transparent 1.5px),
                     radial-gradient(rgba(40,41,45,0.1) 1.5px, transparent 1.5px);
  background-size: 9px 9px, 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
}
.texture-cotton { background: radial-gradient(120% 120% at 30% 80%, #e7e0d7 0%, #d7cec1 55%, #bdb3aa 100%); }
.texture-cotton::before {
  content: ''; position: absolute; inset: 0; opacity: 0.6; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, rgba(40,41,45,0.04) 0 1px, transparent 1px 5px),
                     repeating-linear-gradient(90deg, rgba(40,41,45,0.04) 0 1px, transparent 1px 5px);
}
.texture-viscose { background: radial-gradient(130% 130% at 70% 20%, #c9beb0 0%, #a89c90 60%, #857a70 100%); }
.texture-viscose::before {
  content: ''; position: absolute; inset: 0; opacity: 0.45;
  background-image: repeating-linear-gradient(30deg, rgba(241,238,233,0.1) 0 2px, transparent 2px 20px);
}
.texture-polyester { background: radial-gradient(120% 120% at 20% 10%, #b9c1c4 0%, #8d9497 55%, #66656B 100%); }
.texture-polyester::before {
  content: ''; position: absolute; inset: 0; opacity: 0.4;
  background-image: repeating-linear-gradient(60deg, rgba(241,238,233,0.09) 0 1px, transparent 1px 8px);
}
.texture-linen { background: radial-gradient(120% 120% at 60% 80%, #ece6da 0%, #d8cfc0 55%, #b7ab99 100%); }
.texture-linen::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(2deg, rgba(40,41,45,0.05) 0 1px, transparent 1px 6px),
                     repeating-linear-gradient(92deg, rgba(40,41,45,0.05) 0 1px, transparent 1px 9px);
}
.texture-tencel { background: radial-gradient(130% 130% at 30% 30%, #eef0ee 0%, #cfd2cd 55%, #9aa39a 100%); }
.texture-tencel::before {
  content: ''; position: absolute; inset: 0; opacity: 0.35;
  background-image: repeating-linear-gradient(15deg, rgba(40,41,45,0.05) 0 2px, transparent 2px 24px);
}
.texture-hero { background: radial-gradient(140% 100% at 50% 0%, #4d4b44 0%, #28292D 45%, #17181a 100%); }
.texture-hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.45;
  background-image: repeating-linear-gradient(48deg, rgba(241,238,233,0.05) 0 2px, transparent 2px 16px),
                     repeating-linear-gradient(-42deg, rgba(241,238,233,0.04) 0 2px, transparent 2px 22px);
}

/* ---------------------------------- Sections ---------------------------------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: var(--text-on-dark); }
/* "How It Works" only -- a warm burnt-orange satin gradient (the color of
   the rust-orange trouser fabric), overriding .section-dark's default
   espresso just for this one section on the homepage. */
.process-section { background: linear-gradient(135deg, #C9752E 0%, #A15321 42%, #6B3313 78%, #4E2810 100%); }
/* .process-step normally paints each card solid var(--bg-dark), which would
   hide the orange behind them entirely -- make them transparent here so the
   gradient reads through, with the divider grid lines staying visible. */
.process-section .process-grid { background: rgba(241,238,233,0.22); }
.process-section .process-step { background: transparent; }
/* Closing CTA on both index.html ("Talk To Our Team") and about.html
   ("Let's Talk") -- a warm terracotta gradient echoing the Beatroots
   trend-wheel accent, with a thin paper seam along the bottom so it reads
   as its own block instead of bleeding straight into the footer below,
   which is the same espresso dark. */
.cta-terracotta-section { background: linear-gradient(135deg, #D98F72 0%, #B5604D 42%, #7A3D2E 78%, #43221A 100%); border-bottom: 2px solid var(--paper); }

/* ---------------------------------- Client Love (about.html) ---------------------------------- */
/* Same dark charcoal jacquard-weave treatment used elsewhere on the site for
   a moody textile backdrop (feature band, process cards), rather than a
   stock photo we don't have rights to. */
.client-love {
  position: relative; overflow: hidden; color: var(--paper); isolation: isolate;
  background: url('/assets/img/client-love-bg.webp') center / cover no-repeat;
  min-height: clamp(420px, 55vw, 640px);
  display: flex; align-items: flex-end;
  padding: clamp(40px, 6vw, 72px) 0;
}
/* A tint over the photo (not a flat overlay) so the heading and quote stay
   legible against the busy city-light blur, darkest at the bottom-left
   where the text sits, fading out toward the garment on the right. */
.client-love::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10,8,8,0.82) 0%, rgba(10,8,8,0.55) 38%, rgba(10,8,8,0.18) 65%, rgba(10,8,8,0.05) 100%),
              linear-gradient(0deg, rgba(10,8,8,0.7) 0%, rgba(10,8,8,0.15) 45%, rgba(10,8,8,0.35) 100%);
}
.client-love-heading {
  position: relative; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--paper); margin: 0;
}
.client-love-quote-wrap { position: relative; max-width: 760px; margin-top: clamp(28px, 5vw, 48px); }
.client-love-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.7; color: var(--text-on-dark-muted);
  margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.client-love-quote.is-visible { opacity: 1; transform: translateY(0); }
.client-love-name {
  margin: 18px 0 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clay); opacity: 0; transition: opacity 0.6s var(--ease-out) 0.1s;
}
.client-love-name.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .client-love-quote, .client-love-name { transition: none; }
}
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: clamp(36px, 5vw, 64px);
  flex-wrap: wrap;
}
.section-head .display-2 { margin-top: 14px; max-width: 20ch; }

/* ---------------------------------- Fabric Finder ---------------------------------- */
/* flex + justify-content:center (not grid) so a half-empty last row (e.g.
   6 cards at 4-wide) centers itself instead of hugging the left edge. */
.finder-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.finder-card {
  flex: 1 1 200px; max-width: 250px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 28px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-decoration: none; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.finder-card:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: 0 16px 32px -16px rgba(40,41,45,0.25); }
.finder-card svg { width: 48px; height: 48px; stroke: var(--ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.finder-card:hover svg { transform: scale(1.12); }
.finder-card span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-align: center; }
/* A bit more lively than the plain fade-up every other [data-reveal]
   element uses -- combines a slight scale-in with the slide, scoped to
   just this grid so it doesn't change the shared reveal animation
   elsewhere on the site. */
.finder-grid [data-reveal] { transform: translateY(20px) scale(0.94); }
.finder-grid [data-reveal].is-visible { transform: translateY(0) scale(1); }
@media (max-width: 560px) { .finder-card { flex-basis: 42%; } }

/* ---------------------------------- Browse + Shop Fabric By split ---------------------------------- */
.browse-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .browse-split { grid-template-columns: 1fr; gap: 48px; } }
/* 4 real categories read better as 2x2 at half page width than the
   full-width strip's 3-wide (which would leave an awkward 3+1 row here). */
.category-grid-split { grid-template-columns: repeat(2, 1fr); }

.shop-by-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-top: 20px; flex-wrap: wrap; }
.shop-by-tab {
  background: none; border: none; padding: 8px 2px 12px; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--font-body); color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.shop-by-tab:hover { color: var(--ink); }
.shop-by-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* Height is set inline from JS to match the left "Browse by category"
   column (see syncShopByGridHeight in index.html) so a long tab like
   Color -- which can run to 50+ tiles -- never grows taller than the
   photo grid beside it; it scrolls internally instead. Only applied
   above the 900px breakpoint where the two columns sit side by side. */
.shop-by-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 12px; margin-top: 24px;
  overflow-y: auto; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--grey-soft) transparent;
}
.shop-by-grid::-webkit-scrollbar { width: 7px; }
.shop-by-grid::-webkit-scrollbar-track { background: transparent; }
.shop-by-grid::-webkit-scrollbar-thumb { background: var(--grey-soft); border-radius: 999px; }
.shop-by-grid::-webkit-scrollbar-thumb:hover { background: var(--clay-deep); }
@media (max-width: 900px) { .shop-by-grid { grid-template-columns: repeat(4, 1fr); max-height: none !important; overflow-y: visible; } }
@media (max-width: 560px) { .shop-by-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-by-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.shop-by-media {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--medium-sand);
  display: flex; align-items: center; justify-content: center; transition: transform var(--dur-fast);
  position: relative;
}
.shop-by-tile:hover .shop-by-media { transform: scale(1.08); }
.shop-by-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-by-media .pattern-photo { position: absolute; inset: 0; opacity: 0; animation: categoryFade 16s infinite; }
@media (prefers-reduced-motion: reduce) {
  .shop-by-media .pattern-photo { animation: none; opacity: 0; }
  .shop-by-media .pattern-photo:first-of-type { opacity: 1; }
}
.shop-by-swatch { display: block; width: 100%; height: 100%; }
.shop-by-icon svg { width: 32px; height: 32px; stroke: var(--ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.shop-by-tile span:last-child { font-size: 11px; letter-spacing: 0.04em; color: var(--ink); text-align: center; }
.shop-by-tile-family .shop-by-media { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.shop-by-tile-family span:last-child { font-weight: 700; }
/* Color tab only: each family (Black, Blue, Brown...) is its own collapsed
   accordion row -- only the family name shows until it's clicked open, so
   a 50+ shade family doesn't dump its whole list on screen unasked. The
   family name itself is still a working link straight to every fabric in
   that family (same as before); the chevron is a separate control that
   only expands/collapses the specific-shade list underneath it. */
.shop-by-color-group { grid-column: 1 / -1; }
.shop-by-color-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 10px 2px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
}
.shop-by-color-group-head-label { display: inline-flex; align-items: center; gap: 8px; flex: 1; color: inherit; text-decoration: none; }
.shop-by-color-group-head-label:hover { color: var(--clay-text); }
.shop-by-color-group-toggle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border: none; background: none; cursor: pointer; color: var(--text-muted);
}
.shop-by-color-group-toggle:hover { color: var(--clay-text); }
.shop-by-color-group-toggle svg { width: 10px; height: 10px; flex-shrink: 0; transition: transform var(--dur-fast); }
.shop-by-color-group.is-open .shop-by-color-group-toggle svg { transform: rotate(180deg); }
.shop-by-color-group-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
.shop-by-color-group-row { display: none; grid-template-columns: repeat(6, 1fr); gap: 20px 12px; margin-top: 16px; padding-bottom: 4px; }
.shop-by-color-group.is-open .shop-by-color-group-row { display: grid; }
@media (max-width: 900px) { .shop-by-color-group-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .shop-by-color-group-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------- Trends AW 26-27 ---------------------------------- */
/* Pink-to-olive satin gradient echoing the Texhibition Istanbul AW26-27
   report cover the user shared (not a literal reproduction) -- same
   pattern as .process-section/.cta-terracotta-section:
   a one-off override of .section-dark's default espresso background. */
.trend-section { background: linear-gradient(135deg, #D7A3AE 0%, #B48C92 24%, #7E7D5C 52%, #4C4A33 78%, #2A2720 100%); }
.trend-heading-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.trend-heading-link:hover { border-bottom-color: currentColor; }
/* Matches the Shop-by-Color tab typography (font-body, uppercase,
   letter-spaced) rather than the softer default .lede treatment. */
.trend-lede {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-dark-muted); max-width: none;
}

/* Theme wheel -- quadrant SVG + labels + corner photos, all positioned by
   percentage so the whole thing scales as one responsive square. */
.trend-wheel-wrap { display: flex; justify-content: center; margin: 72px 0 56px; padding: 0 60px; }
.trend-wheel { position: relative; width: min(600px, 78vw); aspect-ratio: 1; }
.trend-wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trend-wheel-photo {
  position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--bg-dark), 0 8px 24px rgba(0,0,0,0.35);
}
/* Centered at ~9% from each edge so the photo overlaps the circle's own
   corner-ward edge slightly, instead of floating with a visible gap. */
.tw-photo-nw { top: 9%; left: 9%; transform: translate(-50%, -50%); }
.tw-photo-ne { top: 9%; left: 91%; transform: translate(-50%, -50%); }
.tw-photo-sw { top: 91%; left: 9%; transform: translate(-50%, -50%); }
.tw-photo-se { top: 91%; left: 91%; transform: translate(-50%, -50%); }
@media (max-width: 560px) {
  .trend-wheel-photo { width: 22%; }
}

/* ---------------------------------- Category strip ---------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
}
.category-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-dark);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: var(--paper);
}
.category-card .texture { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.category-card:hover .texture { transform: scale(1.08); }
.category-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,18,15,0.72) 0%, rgba(20,18,15,0.08) 55%, rgba(20,18,15,0.28) 100%);
}
.category-card .cat-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: categoryFade 16s infinite; transition: transform 1.2s var(--ease-out);
}
.category-card:hover .cat-photo { transform: scale(1.08); }
@keyframes categoryFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .category-card .cat-photo { animation: none; opacity: 0; }
  .category-card .cat-photo:first-of-type { opacity: 1; }
}
.category-card-inner { position: relative; z-index: 2; width: 100%; }
.category-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 300; }
.category-card .count { font-size: 12px; color: var(--text-on-dark-muted); margin-top: 4px; }
.category-card .arrow {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-on-dark);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.category-card:hover .arrow { background: var(--clay); border-color: var(--clay); transform: rotate(45deg); }
.category-card .arrow svg { width: 14px; height: 14px; }

@media (max-width: 1000px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .category-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- Fabric cards ---------------------------------- */
.fabric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
@media (max-width: 980px) { .fabric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fabric-grid { grid-template-columns: 1fr; } }

/* Continuously-scrolling showcase row (New Arrivals, Best Sellers): the JS
   populating the track renders its fabric list TWICE back-to-back, and this
   animates the track left by exactly -50% (one full copy's width) on a
   loop, so it reads as an endless, seamless belt rather than a visible
   jump/reset. Paused on hover so a visitor can actually read/click a card. */
.fabric-marquee { overflow: hidden; }
.fabric-marquee-track { display: flex; gap: 28px; width: max-content; animation: fabric-marquee-scroll 32s linear infinite; }
.fabric-marquee:hover .fabric-marquee-track { animation-play-state: paused; }
.fabric-marquee-track .fabric-card { flex: 0 0 280px; }
/* Forces each whole card (photo AND the name/price text below it) onto
   its own stable compositor layer -- without this, WebKit/mobile Safari
   can intermittently fail to repaint content while its ancestor is under
   continuous CSS transform (the whole point of this marquee), flashing
   it blank mid-loop even though everything already finished loading. */
.fabric-marquee-track .fabric-card {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes fabric-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fabric-marquee-track { animation: none; } }
/* Best Sellers carries ~3x as many cards as New Arrivals (both share the
   .fabric-marquee-track base above), so the same animation-duration would
   move it ~3x faster -- it's distance-per-time, not a visual speed knob.
   Scaled to roughly match New Arrivals' actual px/sec instead of drifting
   off the shared 32s by coincidence of list length. */
#bestSellersGrid { animation-duration: 90s; }

.client-work-row { margin-top: 56px; text-align: center; }
.client-work-row .eyebrow { display: block; margin-bottom: 20px; }
.client-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.client-work-panel { position: relative; overflow: hidden; }
.client-work-panel img { display: block; width: 100%; height: 88vh; object-fit: cover; }
.client-work-comp {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap;
}
@media (max-width: 700px) {
  .client-work-grid { grid-template-columns: 1fr; }
  .client-work-panel img { height: 60vh; }
  .client-work-comp { font-size: 13px; }
}

/* min-width: 0 overrides the browser's default min-width:auto on grid/flex
   items -- without it, a card whose name/code text happens not to wrap
   neatly (e.g. a long product name) refuses to shrink to its 1fr share,
   which forces that whole grid COLUMN wider and breaks every other card's
   uniform size across the row. */
.fabric-card { display: block; min-width: 0; }
.fabric-card .swatch { aspect-ratio: 4/5; border-radius: var(--radius-md); }
.fabric-card .texture { position: absolute; inset: 0; transition: transform 0.9s var(--ease-out); }
.fabric-card:hover .texture { transform: scale(1.06); }
.fabric-card .tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(241,238,233,0.92);
  color: var(--ink);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
}
/* Guest favorites -- works from the grid itself, no account needed. Sits in
   the swatch's own corner like the bestseller tag, just the opposite side. */
.card-favorite-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241,238,233,0.92); color: var(--ink); cursor: pointer;
  transition: transform var(--dur-fast);
}
.card-favorite-btn:hover { transform: scale(1.08); }
.card-favorite-btn svg { width: 18px; height: 18px; }
.card-favorite-btn.is-favorited { color: var(--clay-deep); }
.card-favorite-btn.is-favorited svg { fill: currentColor; }
.fabric-card-body { padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; }
.fabric-card-body > div:first-child { min-width: 0; }
.fabric-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 300; }
.fabric-card .code { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.fabric-card .price-col { text-align: right; white-space: nowrap; }
.fabric-card .price { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.fabric-card .price-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fabric-card .colors { display: flex; gap: 5px; margin-top: 10px; }
.fabric-card .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(40,41,45,0.15); }
.fabric-card .dot.is-active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }

/* ---------------------------------- Stats / value props ---------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-grid.stat-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .stat-grid.stat-grid-5 { grid-template-columns: repeat(2, 1fr); } }
.stat-num { font-family: var(--font-display); font-size: clamp(1.7rem, 2.3vw, 2.3rem); font-style: italic; }
.stat-label { margin-top: 8px; font-size: 13px; color: var(--text-muted); max-width: 22ch; }

/* ---------------------------------- Process strip ---------------------------------- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-on-dark); border-radius: var(--radius-lg); overflow: hidden; }
.process-step { background: var(--bg-dark); padding: 36px 28px; position: relative; }
.process-num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--clay); }
.process-step h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 300; margin-top: 18px; }
.process-step p { font-size: 13px; color: var(--text-on-dark-muted); margin-top: 10px; line-height: 1.6; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- Cards / panels ---------------------------------- */
.panel { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.card-shadow { box-shadow: 0 20px 60px -20px rgba(40,41,45,0.18); }

/* ---------------------------------- Forms ---------------------------------- */
.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.field .req { color: var(--clay-text); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(40,41,45,0.08);
}
.field textarea { resize: vertical; min-height: 100px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.field-error { font-size: 12px; color: #A5453A; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A5453A; }
.field.has-error .field-error { display: block; }

.order-type-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.order-type-option {
  flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); font-size: 13.5px; font-weight: 500; text-transform: none;
  letter-spacing: normal; color: var(--ink); cursor: pointer; transition: all var(--dur-fast);
}
.order-type-option input { accent-color: var(--ink); margin: 0; width: auto; }
.order-type-option:hover { border-color: var(--grey-soft); }
.order-type-option.is-selected { border-color: var(--ink); background: var(--medium-sand); }

.hanger-callout {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--medium-sand);
  border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.hanger-callout svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--clay-text); }
.hanger-callout a { text-decoration: underline; color: var(--ink); }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.checkbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--dur-fast);
  font-size: 14px;
}
.checkbox-item:hover { border-color: var(--grey-soft); }
.checkbox-item input { width: 16px; height: 16px; accent-color: var(--ink); }
.checkbox-item.is-checked { border-color: var(--ink); background: rgba(40,41,45,0.03); }

/* ---------------------------------- Modal ---------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(40,41,45,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  max-width: 620px; width: 100%;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur-fast) var(--ease-out);
  margin: auto 0;
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
}
.modal-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.modal-close svg { width: 15px; height: 15px; }
.modal-subject {
  background: var(--medium-sand);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 20px 0 28px;
  font-size: 13px;
}
.modal-subject strong { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 300; margin-bottom: 4px; }
.modal-success { text-align: center; padding: 20px 0; }
.modal-success .icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--success);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
}
.modal-success .icon svg { width: 28px; height: 28px; stroke: white; }

/* ---------------------------------- Footer ---------------------------------- */
/* Light grey instead of the espresso dark. Every rule below still reads
   var(--text-on-dark) / var(--text-on-dark-muted) / var(--border-on-dark) /
   var(--paper) / var(--clay) -- redefining those four custom properties
   just inside .site-footer flips all of them to legible dark-on-light
   values in one place, instead of rewriting every footer rule by hand. */
.site-footer {
  --text-on-dark: var(--ink);
  --text-on-dark-muted: var(--grey);
  --border-on-dark: rgba(40, 41, 45, 0.14);
  --paper: var(--ink);
  --clay: var(--clay-text);
  background: var(--light-sand); color: var(--text-on-dark); padding: 80px 0 32px;
}
.footer-hero { margin-bottom: 56px; }
.footer-eyebrow-line {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-on-dark-muted); margin-bottom: 20px;
}
.footer-eyebrow-line .line { width: 32px; height: 1px; background: var(--text-on-dark-muted); display: inline-block; }
.footer-heading {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--paper);
}
.footer-heading .italic { font-style: italic; color: var(--clay); text-transform: none; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--border-on-dark); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-col h5 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-size: 14px; color: var(--text-on-dark-muted); margin-bottom: 12px; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--paper); }
/* Just the marks themselves -- no circle, no outline -- sized to actually
   read at a glance instead of the earlier thin, tiny line icons. */
.footer-social { display: flex; gap: 20px; margin-top: 14px; }
.footer-social-link {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-dark-muted); transition: color var(--dur-fast);
}
.footer-social-link:hover { color: var(--paper); }
.footer-social-link svg { width: 22px; height: 22px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 12px 24px; }
.footer-bottom p { font-size: 12px; color: var(--text-on-dark-muted); }
.footer-bottom-left { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 12px; color: var(--text-on-dark-muted); transition: color var(--dur-fast); }
.footer-legal a:hover { color: var(--paper); }
.lang-switch { display: flex; gap: 14px; }
.lang-switch button { background: none; border: none; color: var(--text-on-dark-muted); font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
.lang-switch button.is-active { color: var(--paper); border-bottom: 1px solid var(--clay); }

.lang-switch-mini { display: flex; gap: 4px; }
.lang-switch-mini button {
  background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 5px; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), opacity var(--dur-fast); opacity: 0.55;
}
.lang-switch-mini button:hover { opacity: 1; }
.lang-switch-mini button.is-active { opacity: 1; border-color: var(--border); }
.site-header.on-dark:not(.is-scrolled) .lang-switch-mini button.is-active { border-color: var(--border-on-dark); }
@media (max-width: 900px) { .lang-switch-mini { display: none; } }

/* ---------------------------------- Brand intro (homepage) ---------------------------------- */
.brand-intro {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, var(--medium-sand) 0%, var(--paper) 62%);
}
.brand-intro-inner { position: relative; z-index: 1; }
.brand-logo-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: min(70vw, 720px); height: min(70vw, 720px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(189,179,170,0.45) 0%, rgba(189,179,170,0) 68%);
  filter: blur(10px);
  animation: glowPulse 7s ease-in-out infinite;
  z-index: 0;
}
@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
.brand-logo-img {
  height: clamp(110px, 16vw, 200px);
  width: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: scale(0.82) translateY(24px);
  animation: logoEntrance 1.3s var(--ease-out) 0.15s forwards,
             logoBreathe 6s ease-in-out 1.5s infinite;
}
@keyframes logoEntrance {
  from { opacity: 0; transform: scale(0.82) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes logoBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo-glow, .brand-logo-img.is-settled { animation: none; }
  .brand-logo-img { opacity: 1; transform: none; animation: none; }
}

/* ---------------------------------- Section head — centered variant ---------------------------------- */
.section-head.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.section-head.centered .display-2,
.section-head.centered .display-1 { margin-top: 8px; }
.section-head.centered .display-1,
.section-head.centered .display-2,
.section-head.text-center .display-1,
.section-head.text-center .display-2 { margin-left: auto; margin-right: auto; }
.section-head.centered .lede { max-width: 56ch; margin-left: auto; margin-right: auto; }
.section-head.centered .btn-ghost { margin-top: 6px; }

/* ---------------------------------- CTA row (post-gallery) ---------------------------------- */
.cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 0 8px; }

/* ---------------------------------- Scroll-zoom story ---------------------------------- */
.story-scroll { position: relative; height: 260vh; }
.story-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.story-media {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(25% round 32px);
  will-change: clip-path;
}
.story-media .texture { position: absolute; inset: -10%; will-change: transform; }
.story-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.story-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,22,0.55) 0%, rgba(20,20,22,0.35) 40%, rgba(20,20,22,0.7) 100%);
}
.story-text-stack { position: relative; z-index: 2; width: min(94vw, 980px); padding: 0 16px; min-height: 3.6em; display: flex; align-items: center; justify-content: center; }
.story-line {
  position: absolute; inset: 0; margin: auto; width: 100%; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 0.4em; text-align: center;
  opacity: 0; transform: translateY(16px);
  font-family: 'Cormorant Garamond', var(--font-display), serif; font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(1.8rem, 5.5vw, 3.4rem); line-height: 1.3;
  color: var(--paper); text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.story-line.is-active { opacity: 1; transform: translateY(0); }
.story-line-part { display: inline-block; will-change: transform; transition: transform 0.1s linear; }
@media (max-width: 560px) {
  .story-text-stack { min-height: 6.2em; }
  .story-line { font-size: 1.9rem; letter-spacing: 0.03em; line-height: 1.3; padding: 0 6px; flex-direction: column; gap: 0.15em 0; }
}
.story-progress {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 6px;
}
.story-progress span { width: 22px; height: 2px; background: var(--border-on-dark); border-radius: 2px; overflow: hidden; position: relative; }
.story-progress span::after { content: ''; position: absolute; inset: 0; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 0.3s linear; }
.story-progress span.is-done::after { transform: scaleX(1); }

.story-outro-logo {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.story-outro-logo img {
  height: clamp(70px, 11vw, 130px);
  width: auto;
  filter: invert(1) brightness(1.7);
}

.story-below {
  position: relative; color: var(--ink); isolation: isolate;
  padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px);
  background: url('/assets/img/story-silk-background-photo.webp') 75% center / cover no-repeat;
  /* Parallax: the background stays pinned to the viewport while the text
     scrolls normally over it, so the photo reads as sitting further back
     than the words -- "reading from the back" -- instead of scrolling in
     lockstep with the page. Desktop only: background-attachment: fixed has
     a long history of being laggy or outright broken on iOS Safari, so
     mobile falls back to plain scroll below. */
  background-attachment: fixed;
  /* A thin paper-colored seam where the two visuals meet, now that they sit
     directly back to back with no band between them -- reads as a clean
     divider between the dark scroll-story video above and this light
     section, rather than needing a blended hand-off. */
  border-top: 2px solid var(--paper);
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .story-below { background-attachment: scroll; }
}
/* A warm wash over the photo -- measured against the darkest part of the
   grey backdrop (where the text block can land depending on content
   length/viewport), plain grey alone only gave ~2.7:1 contrast against the
   dark ink text, well under the ~4.5:1 needed for comfortable reading. This
   opacity lifts that to ~5:1 while still letting the photo's own warmth and
   the fabric's color show through. */
.story-below::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(248,243,236,0.35) 0%, rgba(248,243,236,0.12) 18%, rgba(248,243,236,0.1) 82%, rgba(248,243,236,0.4) 100%);
}
/* Soft fade at the very bottom into the page's own beige, so the cut into
   the next (light) section isn't abrupt either. */
.story-below::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 8vw, 110px); z-index: 0;
  background: linear-gradient(180deg, rgba(241,238,233,0) 0%, var(--paper) 100%);
  pointer-events: none;
}
.story-below-body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.4vw, 26px); max-width: 820px; }
/* Editorial paragraph: large, light-weight Newsreader serif -- the same
   literary display face used for headings site-wide -- set in sentence
   case rather than tracked uppercase, and let wide across the section
   instead of boxed into a narrow column. Real designer-house sites (Proenza
   Schouler, The Row, Khaite, Oscar de la Renta) keep brand narrative copy
   restrained and quiet rather than large and declarative -- confidence
   through understatement, not typographic drama -- so this stays modest in
   scale even though it now spans wide. The <br> breaks in the copy are
   hidden so each paragraph flows as one block. */
.story-below-line {
  font-family: var(--font-display), Georgia, serif; font-weight: 400; font-style: normal;
  letter-spacing: 0.005em;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.55;
  color: var(--ink); text-align: left; width: 100%;
}
.story-below-line br { display: none; }
/* Slower than the site's default 90ms/item stagger -- each line settles in
   at its own unhurried pace, closer to the rhythm of actually reading a
   line at a time than a quick cascading sweep. (Selector matches
   [data-reveal-group] [data-reveal]'s specificity so it wins on source
   order instead of needing !important.) */
[data-reveal-group] .story-below-line[data-reveal] { transition-delay: calc(var(--i, 0) * 180ms); }
/* Sign-off, like the close of a letter */
.story-below-sign {
  font-family: 'Allura', cursive; font-style: normal; font-weight: 400;
  font-size: 2.4rem; letter-spacing: 0.02em; color: var(--ink); margin-top: 20px;
  align-self: flex-end; text-align: right;
}
@media (max-width: 560px) {
  /* The clamp() on .story-below-line already scales the serif down
     gracefully on narrow screens -- no separate override needed. */
}
/* Thin feature strip -- no box, no background of its own: it sits directly
   on the same silk photo as the rest of this section, just above the fade
   at the bottom. Same tracked-caps sans-serif as the "Ready-to-Wear" eyebrow
   elsewhere on the page, kept small so the strip reads as a slim line. */
.story-below-features { position: relative; z-index: 1; margin-top: clamp(40px, 7vw, 72px); }
.story-below-features-row {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 28px) clamp(20px, 3vw, 32px);
  padding-top: 16px; border-top: 1px solid rgba(40,41,45,0.15);
}
.story-below-features-item { flex: 1 1 200px; min-width: 0; }
.story-below-features-item h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin: 0; line-height: 1.4;
  text-shadow: 0 1px 10px rgba(248,243,236,0.6);
}
/* Desktop: the pair wrapper is invisible to layout, so the 4 items flow
   straight into the row exactly as if it were still a flat list. */
.story-below-features-pair { display: contents; }
.story-below-features-dots { display: none; }
@media (max-width: 560px) {
  /* Mobile: a real swipeable carousel, two items per page, snapping cleanly
     at page boundaries -- a true single row of 4 would squeeze "Personalized
     Customer Service" into an unreadable sliver at this width, so this
     shows pairs and lets you swipe to the next pair, with small square dots
     (like the reference) marking how many pages there are. */
  .story-below-features-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .story-below-features-row::-webkit-scrollbar { display: none; }
  .story-below-features-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  }
  .story-below-features-item { flex: none; }
  .story-below-features-dots { display: flex; justify-content: flex-end; gap: 6px; margin-top: 16px; }
  .story-below-features-dots .dot {
    width: 6px; height: 6px; border-radius: 2px; background: rgba(40,41,45,0.22);
    transition: background var(--dur-fast); padding: 0; border: none; cursor: pointer;
  }
  .story-below-features-dots .dot.is-active { background: var(--ink); }
}

/* ---------------------------------- Overlapping gallery (Poeza-style) ---------------------------------- */
.overlap-section { padding: clamp(48px, 8vw, 100px) 0 clamp(24px, 5vw, 56px); }
.overlap-gallery { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 20px 0; }
.overlap-card {
  width: 240px; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden;
  position: relative; box-shadow: 0 30px 70px -24px rgba(40,41,45,0.4);
  flex-shrink: 0; opacity: 0; transform: translateY(50px) rotate(var(--rot, 0deg));
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), z-index 0s;
}
.overlap-card.is-visible { opacity: 1; transform: translateY(var(--ty, 0)) rotate(var(--rot, 0deg)); }
.overlap-card:not(:first-child) { margin-left: -60px; }
.overlap-card:hover { transform: translateY(-18px) scale(1.05) rotate(0deg) !important; z-index: 20; }
.overlap-card .texture { position: absolute; inset: 0; }
.overlap-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlap-caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  color: var(--espresso); font-size: 12px; font-weight: 500; max-width: 80%;
  text-shadow: 0 1px 3px rgba(241,238,233,0.9), 0 0 14px rgba(241,238,233,0.7);
}
@media (max-width: 900px) {
  .overlap-card { width: 180px; }
  .overlap-card:not(:first-child) { margin-left: -46px; }
}
@media (max-width: 560px) {
  .overlap-gallery { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 28px 28px; gap: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .overlap-card { width: 200px; scroll-snap-align: start; }
}

/* ---------------------------------- Bespoke Development block ---------------------------------- */
.bespoke-block {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  max-width: 1010px; margin: 0 auto; text-align: center;
}
.bespoke-media { position: relative; aspect-ratio: 21/9; overflow: hidden; }
.bespoke-media .texture { position: absolute; inset: 0; animation: bespokeShimmer 8s ease-in-out infinite; }
@keyframes bespokeShimmer {
  0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
  50% { filter: brightness(1.08) saturate(1.15); transform: scale(1.04); }
}
.bespoke-body { padding: clamp(28px, 5vw, 52px); }
.shine-text {
  font-weight: 600;
  background: linear-gradient(90deg, var(--ink) 0%, var(--clay-deep) 25%, var(--ink) 50%, var(--clay-deep) 75%, var(--ink) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: -200% center; } }

/* ---------------------------------- Utilities ---------------------------------- */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: var(--medium-sand); color: var(--ink);
}
.badge-dark { background: rgba(241,238,233,0.1); color: var(--paper); }
.divider { height: 1px; background: var(--border); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 20px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 400;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(241,238,233,0.15);
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(40,41,45,0.35);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--clay-deep); }
.back-to-top svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 500;
  max-width: 620px; margin: 0 auto;
  background: var(--bg-dark); color: var(--paper);
  border-radius: var(--radius-lg); padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.45);
}
.cookie-banner p { font-size: 13px; color: var(--text-on-dark-muted); margin: 0; flex: 1; min-width: 220px; }
.cookie-banner a { color: var(--paper); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions .btn { padding: 10px 18px; font-size: 13px; }
.cookie-banner-actions .btn-outline { border-color: var(--border-on-dark); color: var(--paper); }
.cookie-banner-actions .btn-outline:hover { background: rgba(241,238,233,0.08); }
@media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: flex-start; } }

/* Page hero (non-homepage) */
.page-hero { padding: 168px 0 64px; }
.page-hero.on-dark { background: var(--ink); color: var(--text-on-dark); }

/* ---------------------------------- Stat / mock cards (dashboard + studio preview) ---------------------------------- */
.mock-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 700px) { .mock-cards { grid-template-columns: repeat(2, 1fr); } }
.mock-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--border); }
.mock-card .num { font-family: var(--font-display); font-size: 2rem; font-style: italic; }
.mock-card .label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ---------------------------------- Design Studio dashboard ---------------------------------- */
.dash-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.dash-sidebar {
  background: var(--white); border-right: 1px solid var(--border);
  padding: 32px 24px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.dash-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dash-nav-link { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-muted); transition: all var(--dur-fast); }
.dash-nav-link:hover { background: var(--paper); color: var(--ink); }
.dash-nav-link.is-active { background: var(--ink); color: var(--paper); font-weight: 500; }
.dash-account { display: flex; align-items: center; gap: 12px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.acct-name { font-size: 14px; font-weight: 500; }
.acct-company { font-size: 12px; color: var(--text-muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }

.dash-main { padding: clamp(28px, 4vw, 56px); max-width: 1080px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.dash-section-head { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; margin-bottom: 4px; }

.project-list { display: flex; flex-direction: column; gap: 10px; }
.project-row {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: all var(--dur-fast);
}
.project-row:hover { border-color: var(--grey-soft); transform: translateX(2px); }
.project-row-body { flex: 1; min-width: 0; }
.project-row-title { font-weight: 500; font-size: 14.5px; }
.project-row-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.status-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.status-review { background: #EAE3D8; color: #7A5C2E; }
.status-progress { background: #DDE6E0; color: #3D6650; }
.status-done { background: #E3E7DD; color: #556B45; }

.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  padding: 48px 24px; text-align: center; transition: all var(--dur-fast);
}
.dropzone.is-dragover { border-color: var(--ink); background: var(--medium-sand); }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--medium-sand); padding: 6px 6px 6px 12px; border-radius: 999px; max-width: 100%; }

.project-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
@media (max-width: 900px) { .project-detail-grid { grid-template-columns: 1fr; } }
.status-meta { display: flex; gap: 32px; margin-top: 16px; flex-wrap: wrap; }
.status-meta .k { display: block; font-size: 12px; color: var(--text-muted); }
.status-meta strong { display: block; margin-top: 4px; font-weight: 500; }

.rec-list { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.rec-item { display: flex; gap: 14px; }
.rec-author { font-size: 13.5px; font-weight: 500; }

.preview-chain { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.preview-step { text-align: center; }
.preview-step .texture { width: 100px; height: 122px; border-radius: var(--radius-md); position: relative; overflow: hidden; }
.preview-step .artwork-preview {
  width: 100px; height: 122px; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.preview-step .artwork-preview svg { display: block; width: 100%; height: 100%; }
.preview-step span { display: block; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.preview-arrow { color: var(--clay-text); font-size: 16px; }

.messages-panel { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.message-thread { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; padding-right: 4px; }
.msg { display: flex; gap: 10px; }
.msg-body { background: var(--paper); padding: 10px 14px; border-radius: var(--radius-md); font-size: 13.5px; flex: 1; }
.msg-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.msg-mine .msg-body { background: var(--ink); color: var(--paper); }
.msg-mine .msg-meta { color: var(--text-on-dark-muted); }
.reply-form { display: flex; gap: 8px; }
.reply-form input { flex: 1; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.reply-form input:focus { outline: none; border-color: var(--ink); }
.project-row.has-unread { box-shadow: inset 3px 0 0 var(--ink); }
.unread-pill { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: 2px; background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; padding: 3px 9px 3px 7px; border-radius: 999px; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 600; }
.nav-count[hidden] { display: none; }
.dash-nav-link.is-active .nav-count { background: var(--paper); color: var(--ink); }
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12px; color: var(--text-muted); max-width: 260px; }
/* Only the filename truncates -- the remove button has its own fixed,
   never-shrinking box. flex:1 + min-width:0 is what lets this shrink
   below its content width inside the chip's max-width instead of
   overflowing it and pushing/clipping the button off the edge. */
.attach-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.attach-chip-remove { flex-shrink: 0; width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--border); color: var(--ink); font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.attach-chip-remove:hover { background: var(--clay-deep); color: var(--paper); }

.sample-table { display: flex; flex-direction: column; gap: 10px; }
.sample-row {
  display: flex; justify-content: space-between; align-items: center; padding: 16px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); gap: 16px;
  cursor: pointer; transition: all var(--dur-fast);
}
.sample-row:hover { border-color: var(--grey-soft); transform: translateX(2px); }

.auth-required { max-width: 480px; margin: 140px auto; text-align: center; padding: 0 20px; }

@media (max-width: 900px) {
  .dash-app { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 18px; }
  .dash-sidebar .logo { margin-bottom: 0; margin-right: auto; }
  /* The base .dash-nav rule sets flex:1 (flex-basis:0), which wins over a
     plain width:100% on a flex item and was letting the nav shrink to fit
     its row instead of dropping to its own full-width line -- it ended up
     stacked vertically on top of the account info instead of wrapping
     below it. flex-basis:100% (not just width) is what actually forces
     the wrap. */
  .dash-nav { flex-direction: row; flex-wrap: wrap; order: 3; flex: 1 1 100%; margin-top: 14px; }
  .dash-nav-link { flex: 0 0 auto; }
  .dash-account { border-top: none; padding-top: 0; margin-top: 0; }
  .messages-panel { position: static; max-height: none; }
}

/* Toast (dashboard demo) */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 600;
  background: var(--ink); color: var(--paper);
  padding: 16px 22px; border-radius: var(--radius-md);
  font-size: 14px; display: flex; align-items: center; gap: 10px;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* Shared breadcrumb nav (also used standalone on fabric-detail.html) */
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { opacity: 0.5; }

/* ---------------------------------- Blog ---------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.blog-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(40,41,45,0.25); }
.blog-card-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--medium-sand); }
.blog-card-body { padding: 24px 26px 28px; }
.blog-card-pillar { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay-text); font-weight: 600; }
.blog-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; margin-top: 10px; line-height: 1.3; color: var(--ink); }
.blog-card-excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-top: 10px; }
.blog-card-meta { font-size: 12px; color: var(--grey-soft); margin-top: 16px; }

/* Long-form article body -- used on individual /blog/ post pages */
.article-body { max-width: 72ch; margin: 0 auto; }
.article-body p { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 22px; }
.article-body h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.65rem;
  color: var(--ink); margin: 52px 0 20px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 1.4em; }
.article-body li { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 10px; }
.article-body li strong { color: var(--ink); }
.article-body a { color: var(--clay-text); text-decoration: underline; text-underline-offset: 2px; }
.article-body em { color: var(--text-muted); }
.article-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--grey-soft); margin-bottom: 8px; }
.article-cta {
  margin-top: 56px; padding: 36px clamp(24px, 4vw, 44px); background: var(--bg-alt);
  border-radius: var(--radius-lg); text-align: left;
}
.article-cta h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: 12px; }
.article-cta p { font-size: 1rem; color: var(--text-muted); margin-bottom: 20px; }
.article-cta .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .article-body { max-width: 100%; }
  .article-body h2 { font-size: 1.4rem; }
}