/* ============================================================
   eth3r — Mosaic enhancement
   Inspired by Nasir al-Mulk (Pink Mosque) stained glass +
   Flora Jamieson botanical collage. Mixed-media mosaic.
   ============================================================ */

:root {
  /* Pink Mosque palette — default */
  --ground:    #f4ede0;
  --ground-2:  #ebe0cb;
  --ground-3:  #ddd0b3;
  --ink:       #1a1411;
  --ink-soft:  #463a31;
  --ink-mute:  #7c6c5d;
  --grout:     #d8c9ad;

  --t1: #c8345e;   /* rose          */
  --t2: #234ba8;   /* cobalt        */
  --t3: #e3a02e;   /* saffron       */
  --t4: #2a7359;   /* jade          */
  --t5: #6b2876;   /* plum          */
  --t6: #c25a26;   /* terracotta    */

  /* Tile micro-variations - subtle tints to suggest hand-cut */
  --t1-lt: #df567c;
  --t2-lt: #4068c9;
  --t3-lt: #efbb59;
  --t4-lt: #3f9377;
  --t5-lt: #8a3f97;

  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* density */
  --density: 1; /* 0..1, 1 = max */
}

/* ---------- palette variants ---------- */
.palette-botanical {
  --ground: #ece2c8;
  --ground-2: #ddd0ae;
  --ground-3: #c8b78a;
  --ink: #221d12;
  --ink-soft: #4a3f2a;
  --ink-mute: #8a7a5b;
  --grout: #bda77d;
  --t1: #b15639;    /* terracotta */
  --t2: #1f3a4f;    /* deep navy  */
  --t3: #c2902f;    /* ochre      */
  --t4: #5e6b34;    /* moss       */
  --t5: #8d4a5c;    /* mulberry   */
  --t6: #7c3a26;
  --t1-lt: #c97653;
  --t2-lt: #335872;
  --t3-lt: #d7a850;
  --t4-lt: #7a8849;
  --t5-lt: #a36577;
}

.palette-twilight {
  --ground: #e8e0d0;
  --ground-2: #d6caab;
  --ground-3: #b6a47e;
  --ink: #0e1228;
  --ink-soft: #2a2e4a;
  --ink-mute: #5a5c75;
  --grout: #b6a47e;
  --t1: #c4203a;     /* vermillion */
  --t2: #1a2780;     /* deep cobalt */
  --t3: #e8b330;     /* saffron */
  --t4: #166953;     /* jade */
  --t5: #4b1d6e;     /* plum */
  --t6: #d05c1d;
  --t1-lt: #db4665;
  --t2-lt: #3247a8;
  --t3-lt: #f0c75b;
  --t4-lt: #2c8a73;
  --t5-lt: #6e3997;
}

.palette-midnight {
  --ground: #14110d;
  --ground-2: #1f1a14;
  --ground-3: #2c241b;
  --ink: #f0e6d2;
  --ink-soft: #c4b59a;
  --ink-mute: #8a7d68;
  --grout: #2c241b;
  --t1: #e25478;
  --t2: #4d6dde;
  --t3: #f1bd55;
  --t4: #3fa07a;
  --t5: #a85cba;
  --t6: #db7a3a;
  --t1-lt: #ee7898;
  --t2-lt: #6e89e8;
  --t3-lt: #f6d07f;
  --t4-lt: #5cbe96;
  --t5-lt: #c47fd2;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(ellipse 1200px 600px at 75% -10%, color-mix(in oklab, var(--t1) 5%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 30%, color-mix(in oklab, var(--t2) 6%, transparent), transparent 60%),
    var(--ground);
  min-height: 100vh;
  overflow-x: hidden;
}
.palette-midnight body { background:
    radial-gradient(ellipse 1200px 600px at 75% -10%, color-mix(in oklab, var(--t1) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 500px at -10% 30%, color-mix(in oklab, var(--t2) 12%, transparent), transparent 60%),
    var(--ground);
}

::selection { background: var(--t3); color: var(--ink); }

a { color: inherit; }

/* Subtle paper noise — applied across everything */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  z-index: 9999;
}
.palette-midnight body::before { mix-blend-mode: screen; opacity: 0.08; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.02;
}
h1 { font-size: clamp(48px, 8vw, 132px); }
h2 { font-size: clamp(36px, 5.5vw, 84px); line-height: 1.04; }
h3 { font-size: clamp(24px, 2.6vw, 36px); }
h4 { font-size: clamp(18px, 1.5vw, 22px); }
p { margin: 0; }
em { font-style: italic; }

.serif-italic { font-family: var(--serif); font-style: italic; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
section {
  position: relative;
  padding: clamp(80px, calc(14vh * var(--density) + 4vh), 220px) 0;
  /* Fixed .nav (~60px) covers the top of the viewport — push anchor
     scroll targets down so #systems/#industries/etc. land below the nav. */
  scroll-margin-top: 80px;
}
html { scroll-behavior: smooth; }
.section-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ---------- TILE primitives ---------- */
.tile {
  position: relative;
  background: var(--t1);
  display: inline-block;
}
.tile::after {
  /* hand-cut shimmer */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in oklab, white 12%, transparent) 0%, transparent 35%),
    linear-gradient(315deg, color-mix(in oklab, black 14%, transparent) 0%, transparent 40%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* tile color shortcuts */
.bg-t1 { background: var(--t1); }
.bg-t2 { background: var(--t2); }
.bg-t3 { background: var(--t3); }
.bg-t4 { background: var(--t4); }
.bg-t5 { background: var(--t5); }
.bg-t6 { background: var(--t6); }
.bg-ground-2 { background: var(--ground-2); }
.bg-ground-3 { background: var(--ground-3); }
.bg-ink { background: var(--ink); color: var(--ground); }
.fg-t1 { color: var(--t1); }
.fg-t2 { color: var(--t2); }
.fg-t3 { color: var(--t3); }
.fg-t4 { color: var(--t4); }
.fg-t5 { color: var(--t5); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--ground) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-brand .stamp {
  width: 14px; height: 14px;
  background: var(--t1);
  position: relative;
}
.nav-brand .stamp::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--ground);
}
.nav-brand .stamp::before {
  content: '';
  position: absolute; inset: 5px;
  background: var(--t2);
  z-index: 1;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--t1);
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
  border: none;
  font-family: var(--mono);
  font-size: 12px;
}
.nav-cta:hover { background: var(--t1); }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-marker {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-marker .num {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.hero-wordmark {
  width: 100%;
  position: relative;
  margin: 4vh 0 6vh;
}
.hero-wordmark svg { display: block; width: 100%; height: auto; }

.hero-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.hero-headline em { font-style: italic; color: var(--t1); }
.hero-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  margin-top: 40px;
}
.hero-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ---------- ALL SECTIONS — shared ---------- */
.section-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  align-items: baseline;
  margin-bottom: 60px;
}
@media (max-width: 800px) {
  .section-header { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Decorative tessera strip ---------- */
.tessera-strip {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 3px;
  height: 18px;
  margin: 24px 0;
}
.tessera-strip > i {
  display: block;
  height: 100%;
}

/* ---------- DESCENT (manifesto) ---------- */
.descent {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .descent { grid-template-columns: 1fr; gap: 40px; }
}
.descent-text p {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.42;
  margin-bottom: 22px;
  color: var(--ink-soft);
}
.descent-text p:first-of-type { color: var(--ink); }
.descent-text em { color: var(--t1); }

.descent-collage {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 480px;
}
.descent-collage .panel {
  position: absolute;
  box-shadow:
    0 2px 0 color-mix(in oklab, var(--ink) 6%, transparent),
    0 22px 50px -16px color-mix(in oklab, var(--ink) 28%, transparent);
  overflow: hidden;
}
.descent-collage .panel-1 { left: 4%;  top: 0;    width: 62%; height: 56%; background: var(--t2); transform: rotate(-2.4deg); }
.descent-collage .panel-2 { right: 0;  top: 26%;  width: 50%; height: 46%; background: var(--t3); transform: rotate(1.8deg); z-index: 4; }
.descent-collage .panel-3 { left: 18%; bottom: 0; width: 58%; height: 38%; background: var(--t1); transform: rotate(-1.2deg); z-index: 5; }
.descent-collage .panel-4 { right: 8%; bottom: 8%; width: 26%; height: 24%; background: var(--t4); transform: rotate(3deg); }

/* Picture sits INSIDE the colored panel with a 14px mosaic-color frame
   showing around all four edges. */
.descent-collage .panel image-slot {
  position: absolute !important;
  inset: 14px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

.descent-collage .stamp {
  position: absolute;
  right: 6%; top: 8%;
  width: 132px; height: 132px;
  border-radius: 50%;
  /* Stained-glass / rose-window: jewel-tone conic wedges separated by
     thin dark grout lines, with a central ground-color medallion. */
  background:
    repeating-conic-gradient(
      from -15deg,
      transparent 0deg,
      transparent 29deg,
      color-mix(in oklab, var(--ink) 75%, transparent) 29deg,
      color-mix(in oklab, var(--ink) 75%, transparent) 30deg
    ),
    conic-gradient(
      from -15deg,
      var(--t1) 0deg 30deg,
      var(--t3) 30deg 60deg,
      var(--t4) 60deg 90deg,
      var(--t2) 90deg 120deg,
      var(--t5) 120deg 150deg,
      var(--t3) 150deg 180deg,
      var(--t1) 180deg 210deg,
      var(--t4) 210deg 240deg,
      var(--t2) 240deg 270deg,
      var(--t5) 270deg 300deg,
      var(--t1) 300deg 330deg,
      var(--t3) 330deg 360deg
    );
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  transform: rotate(-8deg);
  z-index: 5;
  box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--ink) 35%, transparent);
}
/* Central medallion: a smaller ground circle with its own dark hair-ring. */
.descent-collage .stamp::before {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: var(--ground);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 4px color-mix(in oklab, var(--ink) 25%, transparent);
}
.descent-collage .stamp .stamp-text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  line-height: 1.25;
}

/* ---------- IDENTITY ---------- */
.identity {
  background:
    linear-gradient(to bottom, transparent, color-mix(in oklab, var(--t2) 4%, transparent) 50%, transparent);
}
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .identity-grid { grid-template-columns: 1fr; }
}
.identity-text p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 50ch;
}
.identity-text .pull {
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 22ch;
}
.identity-text .pull em { color: var(--t1); }

.identity-photo {
  position: relative;
  aspect-ratio: 5 / 6;
  min-height: 480px;
}
/* Each image-slot is nested in a colored panel; the 14px inset reveals
   the panel color as a mosaic frame around the image on every side. */
.identity-photo image-slot {
  position: absolute !important;
  inset: 14px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* ---------- SYSTEMS (bento) ---------- */
.systems-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
@media (max-width: 900px) {
  .systems-header { grid-template-columns: 1fr; }
}
.systems-header h2 em { font-style: italic; color: var(--t1); }

.systems-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 16px;
}
.system-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ground-2);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.system-card:hover { transform: translateY(-4px); }
.system-card .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.8;
}
.system-card h3 { font-family: var(--serif); }
.system-card ul {
  list-style: none;
  padding: 0; margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  display: grid;
  gap: 4px;
  opacity: 0.8;
}
.system-card ul li::before {
  content: '▰ ';
  opacity: 0.6;
}

.system-card.s1 { grid-column: span 7; grid-row: span 3; background: var(--t1); color: var(--ground); }
.system-card.s2 { grid-column: span 5; grid-row: span 3; background: var(--ground); }
.system-card.s3 { grid-column: span 5; grid-row: span 3; background: var(--ink); color: var(--ground); }
.system-card.s4 { grid-column: span 7; grid-row: span 3; background: var(--t3); color: var(--ink); }

@media (max-width: 800px) {
  .system-card.s1, .system-card.s2, .system-card.s3, .system-card.s4 {
    grid-column: span 12; grid-row: span 3;
  }
}

/* Decorative tessera pattern on cards */
.tessera-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.4;
}
.tessera-deco.tr { top: 16px; right: 16px; }
.tessera-deco.br { bottom: 16px; right: 16px; }

/* ---------- APPROACH ---------- */
.approach-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
@media (max-width: 900px) { .approach-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .approach-steps { grid-template-columns: 1fr; } }

.approach-step {
  background: var(--ground-2);
  padding: 28px;
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.approach-step .num-plate {
  width: 56px; height: 56px;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  position: relative;
}
.approach-step:nth-child(1) .num-plate { background: var(--t1); }
.approach-step:nth-child(2) .num-plate { background: var(--t2); color: var(--ground); }
.approach-step:nth-child(3) .num-plate { background: var(--t3); color: var(--ink); }
.approach-step:nth-child(4) .num-plate { background: var(--t4); color: var(--ground); }

.approach-step h3 { margin-bottom: 14px; }
.approach-step p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.approach-step .step-deco {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 36px; height: 36px;
  background: var(--ground);
}

/* ---------- METHODOLOGY ---------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; } }

.method-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  background: var(--ground);
  border-top: 4px solid var(--t1);
  position: relative;
}
.method-card:nth-child(2) { border-top-color: var(--t2); }
.method-card:nth-child(3) { border-top-color: var(--t4); }

.method-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-mute);
}
.method-card h3 { font-size: 26px; }
.method-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.method-card ul li {
  padding-left: 18px;
  position: relative;
}
.method-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  background: var(--t3);
}
.method-card:nth-child(2) ul li::before { background: var(--t2); }
.method-card:nth-child(3) ul li::before { background: var(--t4); }
.method-card strong { color: var(--ink); font-weight: 600; }
.method-card .tip {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--t1);
  padding: 14px 16px;
  border-left: 2px solid var(--t1);
  background: color-mix(in oklab, var(--t1) 6%, transparent);
}

/* ---------- INDUSTRIES ---------- */
.industries-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) { .industries-grid { grid-template-columns: 1fr; } }

.industry-card {
  position: relative;
  background: var(--ground-2);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.industry-card .image-area {
  position: relative;
  height: 540px;
  overflow: hidden;
  display: flex;
  gap: 14px;
  padding: 14px;
}
/* The image-area itself is the mosaic colored matte. Padding + gap make
   the colored panel visible around the image and between image / side. */
.industry-card.i1 .image-area { background: var(--t1); }
.industry-card.i2 .image-area { background: var(--t2); }
.industry-card.i3 .image-area { background: var(--t4); }
.industry-card.i4 .image-area { background: var(--t1); }
.industry-card .image-area image-slot {
  flex: 1 1 70%;
  height: 100% !important;
  width: auto !important;
  display: block;
  min-width: 0;
}
.industry-card .image-area .color-block {
  flex: 0 0 30%;
  position: relative;
}

/* Apparel card: image-slot at 410×5123 to match the unified industry sizing. */
.industry-card.i3 .image-area image-slot {
  flex: 0 0 410px !important;
  width: 410px !important;
  height: 512px !important;
}
/* Fitness card: image-slot at 410×512 for unified industry sizing. */
.industry-card.i2 .image-area image-slot {
  flex: 0 0 410px !important;
  width: 410px !important;
  height: 512px !important;
}
.industry-card.i2 .image-area .color-block {
  margin-left: auto;
  flex: 0 0 110px;
}

/* Push the side color-block all the way to the right, leaving open
   matte space between it and the image so the image gets breathing room. */
.industry-card.i3 .image-area .color-block {
  margin-left: auto;
  flex: 0 0 110px;
}

/* Restaurants card: image-slot sized to match the dropped image's
   exact 4:5 aspect (591×738 → fits the 512px-tall area at 410×512). */
.industry-card.i1 .image-area image-slot {
  flex: 0 0 410px !important;
  width: 410px !important;
  height: 512px !important;
}
/* Push the side color-block all the way to the right, leaving open
   matte space between it and the image so the image gets breathing room. */
.industry-card.i1 .image-area .color-block {
  margin-left: auto;
  flex: 0 0 110px;
}

/* Operational Automation card: side-by-side layout matching the rest.
   Image fit=contain (set in JSX) keeps the landscape dashboard fully
   visible inside the 410×512 portrait slot. */
.industry-card.i4 .image-area image-slot {
  flex: 0 0 410px !important;
  width: 410px !important;
  height: 512px !important;
}
.industry-card.i4 .image-area .color-block {
  margin-left: auto;
  flex: 0 0 110px;
}
/* Side color-block uses a CONTRASTING tile so each card carries TWO
   mosaic colors — the matte frame + the side accent — visible together. */
.industry-card.i1 .color-block { background: var(--t3); }
.industry-card.i2 .color-block { background: var(--t2-lt); }
.industry-card.i3 .color-block { background: var(--t1); }
.industry-card.i4 .color-block { background: var(--t1-lt); }

.industry-card .body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.industry-card .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.industry-card h3 { font-size: 30px; }
.industry-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.industry-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.industry-card ul li::before { content: '— '; opacity: 0.5; }

.industry-card .demo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  width: fit-content;
}
.industry-card .demo-link:hover { background: var(--t1); }

/* Stained-glass strip inside each industry card's side block.
   Each <i> gets a jewel-tone background inline; this rule just sets
   the grid and a tiny shadow that reads as grout between tiles. */
.color-block .tess {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  padding: 14px;
}
.color-block .tess i {
  display: block;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 18%, transparent),
    inset 0 -1px 0 color-mix(in oklab, black 18%, transparent);
}

/* ---------- RELIABILITY ---------- */
.reliability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
@media (max-width: 800px) {
  .reliability-grid { grid-template-columns: 1fr 1fr; }
}
.reliability-cell {
  padding: 36px 28px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ground);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  position: relative;
}
.reliability-cell .icon-tile {
  width: 32px; height: 32px;
  background: var(--t1);
}
.reliability-cell:nth-child(2) .icon-tile { background: var(--t2); }
.reliability-cell:nth-child(3) .icon-tile { background: var(--t3); }
.reliability-cell:nth-child(4) .icon-tile { background: var(--t4); }
.reliability-cell h3 { font-size: 22px; }
.reliability-cell p { font-size: 14px; color: var(--ink-soft); }

/* ---------- ENGAGEMENT (CTA) ---------- */
.engagement {
  position: relative;
  text-align: center;
  background: var(--ink);
  color: var(--ground);
  padding: clamp(80px, 16vh, 220px) var(--gutter);
  overflow: hidden;
}
.engagement::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, color-mix(in oklab, var(--t2) 24%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 60%, color-mix(in oklab, var(--t1) 24%, transparent), transparent 60%);
  pointer-events: none;
}
.engagement .wrap { position: relative; z-index: 1; }
.engagement .section-tag { color: color-mix(in oklab, var(--ground) 60%, transparent); }
.engagement h2 {
  font-size: clamp(40px, 6vw, 96px);
  margin-bottom: 24px;
}
.engagement h2 em { color: var(--t3); font-style: italic; }
.engagement p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 28px);
  color: color-mix(in oklab, var(--ground) 80%, transparent);
  max-width: 30ch;
  margin: 0 auto 40px;
}
.engagement .cta-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.engagement .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: var(--t3);
  color: var(--ink);
  border: none;
  cursor: pointer;
}
.engagement .cta.secondary {
  background: transparent;
  color: var(--ground);
  border: 1px solid color-mix(in oklab, var(--ground) 30%, transparent);
}
.engagement .cta:hover { transform: translateY(-2px); }

.engagement-mosaic {
  display: flex;
  justify-content: center;
  margin: 60px auto 0;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 320px;
}
.engagement-mosaic i {
  width: 14px; height: 14px;
  display: block;
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ground-2);
  padding: 60px var(--gutter) 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer .links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer .links a { text-decoration: none; }
.footer .links a:hover { color: var(--t1); }
.footer-base {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- HERO TILE ANIMATION ---------- */
.hero-tile {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: tileSettle 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes tileSettle {
  0% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg)) scale(0.4);
  }
  60% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--final-r, 0deg)) scale(1);
  }
}

/* Drifting dust tiles in hero */
.dust {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: dustDrift 8s ease-in-out infinite, dustFade 2s ease 1.6s forwards;
}
@keyframes dustDrift {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 4deg)); }
}
@keyframes dustFade {
  0% { opacity: 0; }
  100% { opacity: var(--target-opacity, 0.4); }
}

/* ---------- Side rail with vertical text ---------- */
.side-rail {
  position: fixed;
  right: 10px; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 50;
  pointer-events: none;
}

/* ---------- Density tag for design ---------- */
[data-density="low"] section { padding: clamp(60px, 8vh, 120px) 0; }
[data-density="mid"] section { padding: clamp(80px, 12vh, 180px) 0; }
[data-density="high"] section { padding: clamp(100px, 14vh, 200px) 0; }
[data-density="max"] section { padding: clamp(120px, 18vh, 240px) 0; }

/* Hide decorative motion-dependent dust at low density */
[data-density="low"] .dust { display: none; }
[data-density="low"] .tessera-strip { display: none; }