/*
Theme Name: Rinato Studio
Theme URI: https://rinato.studio
Author: Rinato Studio
Description: A digital studio for small businesses. Warm editorial design with cinematic dark warm hero. Merged build (v7 layout + v8 SEO content + v8 sitemap).
Version: 9.4.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rinato
*/

/* ==========================================
   DESIGN TOKENS
   ========================================== */
:root {
  /* Brand palette */
  --flame-red: #FF1A0D;
  --ember-orange: #FF6E05;
  --warm-amber: #FBEA02;
  --gold: #FFD055;
  --gradient-brand: linear-gradient(135deg, #FF1A0D 0%, #FF6E05 45%, #FFD055 100%);
  --gradient-brand-text: linear-gradient(90deg, #FF1A0D 0%, #FF6E05 55%, #FFD055 100%);

  /* Legacy alias — keeps other pages working */
  --coral: #FF1A0D;
  --coral-hover: #E0150A;
  --coral-light: #FF6E05;

  /* Warm light backgrounds */
  --bg: #FEFCF9;
  --bg-warm: #FBF8F4;
  --bg-cream: #F6F1EB;
  --off-white: #FBF8F4;

  /* Text */
  --text: #1A1612;
  --text-body: #4A443D;
  --text-secondary: #7A7269;
  --neutral: #7A7269;
  --text-muted: #A89F95;
  --text-light: #C8BFB5;
  --light: #EDE8E2;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-logo: 'Fraunces', Georgia, serif;
  --font-mono: monospace;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26, 22, 18, 0.04);
  --shadow-md: 0 8px 30px rgba(26, 22, 18, 0.06);
  --shadow-lg: 0 20px 60px rgba(26, 22, 18, 0.08);
  --shadow-xl: 0 30px 90px rgba(26, 22, 18, 0.12);
  --shadow-glow: 0 8px 40px rgba(255, 110, 5, 0.1);
  --shadow-glow-warm: 0 8px 40px rgba(255, 110, 5, 0.15);
  --shadow-glow-deep: 0 12px 60px rgba(255, 26, 13, 0.18);

  /* === v8 token aliases (mapped to v7 system) === */
  /* Brand */
  --flame: #FF1A0D;
  --flame-deep: #D11008;
  --ember: #FF6E05;
  --ember-soft: #FF9447;
  --gold-soft: #FFE39A;
  --amber-glow: #FBEA02;

  /* Light surfaces */
  --paper: #FBF8F4;
  --paper-warm: #F6F1EB;
  --paper-ivory: #FEFCF9;
  --paper-line: #EDE5D8;

  /* Dark surfaces (only used by v8 hero + manifesto blocks) */
  --coal: #1A1310;
  --coal-soft: #2A201A;
  --coal-warm: #3A2D24;
  --coal-line: #4A3A2E;

  /* Text aliases */
  --ink: #1A1612;
  --ink-body: #4A443D;
  --ink-soft: #7A7269;
  --ink-muted: #A89F95;
  --ink-faint: #C8BFB5;
  --light-primary: #FBF8F4;
  --light-body: #D8D0C5;
  --light-soft: #A89C8E;
  --light-muted: #7A6F62;

  /* v8 gradients */
  --grad-flame: linear-gradient(135deg, #FF1A0D 0%, #FF6E05 55%, #FFD055 100%);
  --grad-flame-text: linear-gradient(90deg, #FF1A0D 0%, #FF6E05 60%, #FFD055 100%);
  --grad-warm-light: linear-gradient(180deg, #FBF8F4 0%, #F6F1EB 100%);
  --grad-dark-warm: radial-gradient(ellipse at 50% 40%, #2A201A 0%, #1A1310 50%, #0F0A07 100%);
  --grad-firelight: radial-gradient(ellipse at 50% 80%, rgba(255,110,5,0.18) 0%, rgba(255,110,5,0) 60%);

  /* v8 type scale */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;
  --t-4xl: 4rem;
  --t-5xl: 5.5rem;
  --t-display: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --t-page-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  /* v8 line heights / letter spacing */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;
  --lh-loose: 1.85;
  --ls-tight: -0.025em;
  --ls-snug: -0.015em;
  --ls-base: 0;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.18em;

  /* v8 spacing scale */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;  --s-11: 6rem;   --s-12: 8rem; --s-13: 10rem;
  --section-y: clamp(4rem, 8vw, 8rem);
  --section-y-tight: clamp(3rem, 6vw, 5rem);
  --section-y-loose: clamp(5rem, 10vw, 10rem);

  /* v8 layout */
  --container: 1240px;
  --container-narrow: 880px;
  --container-tight: 680px;
  --container-prose: 640px;
  --container-pad: clamp(1.5rem, 5vw, 4.5rem);

  /* v8 radius / motion / z */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-quick: cubic-bezier(0.4, 0, 0.6, 1);
  --t-fast: 0.2s;
  --t-base-d: 0.4s;
  --t-slow: 0.7s;
  --t-cinema: 1.2s;
  --z-base: 0; --z-rise: 10; --z-overlay: 100; --z-nav: 1000;
  --z-modal: 5000; --z-loading: 9000; --z-skip: 10000;
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.7; color:var(--text-body); background:var(--bg); overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:var(--coral); transition:all .3s ease; }
a:hover { color:var(--coral-hover); }
.container { max-width:1240px; margin:0 auto; padding:0 clamp(24px, 5vw, 72px); }
.skip-link {
  position:absolute;
  left:16px;
  top:16px;
  z-index:10000;
  padding:10px 14px;
  background:#fff;
  color:var(--text);
  border-radius:6px;
  transform:translateY(-140%);
}
.skip-link:focus { transform:translateY(0); }

/* Subtle grain texture */
body::after {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}

/* Section label */
.section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ember-orange);
  margin-bottom: 20px;
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  border: none;
}
.btn .btn-arrow { transition: transform .3s ease; display:inline-block; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--primary, .btn--coral {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 26, 13, 0.18);
}
.btn--primary:hover, .btn--coral:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 26, 13, 0.28);
}
/* Ghost button: sits as an understated text link with an arrow. Bottom-border appears on hover. */
.btn--ghost {
  padding: 17px 4px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  border-radius: 0;
  border-bottom: 1px solid transparent;
}
.btn--ghost:hover { color: var(--coral); border-bottom-color: var(--coral); }
.btn--outline { background:transparent; border:2px solid var(--text); color:var(--text); padding:14px 36px; border-radius:100px; }
.btn--outline:hover { background:var(--text); color:#fff; transform:translateY(-2px); }
.btn--white-outline { border:2px solid rgba(255,255,255,.25); color:#fff; background:transparent; padding:14px 36px; border-radius:100px; }
.btn--white-outline:hover { background:#fff; color:var(--text); border-color:#fff; }
/* Dark-section ghost: keeps the same form but light palette */
.cta-block .btn--ghost,
.hero--reborn.is-dark .btn--ghost { color:#fff; }
.cta-block .btn--ghost:hover,
.hero--reborn.is-dark .btn--ghost:hover { color: var(--gold); border-bottom-color: var(--gold); }

.btn-group {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: gap .3s ease;
}
.link-arrow:hover { gap: 14px; }

/* ==========================================
   HEADER
   ========================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 24px 0;
  background: transparent;
  transition: all .4s ease;
}
.header.scrolled {
  padding: 16px 0;
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 18px rgba(13, 13, 13, 0.12);
}
/* Subtle gradient line at bottom of scrolled header */
.header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-brand);
  opacity: 0;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.header.scrolled::after {
  opacity: 0.12;
}
.header .container { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand__mark {
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.brand__mark--small { width:40px; height:40px; }
.brand__phoenix {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-filter: drop-shadow(0 2px 8px rgba(255, 110, 5, 0.08));
  filter: drop-shadow(0 2px 8px rgba(255, 110, 5, 0.08));
}
.header.scrolled .brand__mark { width:44px; height:44px; }
.brand__wordmark-svg {
  height: 24px;
  width: auto;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-transition: height .3s ease;
  transition: height .3s ease;
}
.header.scrolled .brand__wordmark-svg { height: 20px; }
.brand__wordmark-img {
  height: 22px;
  width: auto;
  min-width: 80px;
  max-width: 140px;
  object-fit: contain;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.header.scrolled .brand__wordmark-img { height: 18px; }
/* Legacy text fallback */
.brand__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.32em;
  text-transform: none;
  color: var(--text);
  padding-left: 0.32em;
  transition: all .3s ease;
}
/* All "RINATO" letters share the parent color — no flame-red NA */
.brand__wordmark span { color: inherit; font-style: normal; }
.header.scrolled .brand__wordmark { font-size: 19px; }
.main-nav { display:flex; align-items:center; gap:32px; }
.main-nav__links { display:flex; gap:30px; list-style:none; }
.main-nav__links a { font-size:15px; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:color .3s; }
.main-nav__links a:hover, .main-nav__links a.active { color:var(--text); }
.header.scrolled .brand__wordmark { color:#fff; }
.header.scrolled .main-nav__links a { color: rgba(254, 252, 249, .72); }
.header.scrolled .main-nav__links a:hover,
.header.scrolled .main-nav__links a.active { color: #fff; }
.header.scrolled .nav-cta { color: #fff; border-color: rgba(255, 255, 255, .24); }

/* === Dark-hero adaptation ===
   When the v7 header sits transparently over the v8 dark hero (front-page only),
   invert text colors so they read against the dark atmosphere.
   The .is-on-dark class is added by main.js on the homepage when scroll < hero height. */
.header.is-on-dark:not(.scrolled) .brand__wordmark { color: var(--paper); }
.header.is-on-dark:not(.scrolled) .main-nav__links a { color: rgba(251, 248, 244, .72); }
.header.is-on-dark:not(.scrolled) .main-nav__links a:hover,
.header.is-on-dark:not(.scrolled) .main-nav__links a.active { color: #fff; }
.header.is-on-dark:not(.scrolled) .nav-cta {
  background: rgba(251, 248, 244, 0.06);
  color: var(--paper) !important;
  border: 1px solid rgba(251, 248, 244, 0.32);
}
.header.is-on-dark:not(.scrolled) .nav-cta:hover {
  background: var(--paper);
  color: var(--text) !important;
  border-color: var(--paper);
}
/* Phoenix mark needs no special treatment on dark — its PNG sits cleanly on top */
/* Mobile menu toggle on dark */
.header.is-on-dark:not(.scrolled) .menu-toggle span { background: var(--paper); }

.nav-cta {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 100px;
  background: var(--text);
  color: #fff !important;
  text-decoration: none;
  transition: all .3s;
}
.nav-cta:hover { background:var(--coral); color:#fff !important; box-shadow:var(--shadow-glow); transform:translateY(-1px); }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; z-index:1001; }
.menu-toggle span { display:block; width:100%; height:2px; background:var(--text); position:absolute; left:0; transition:all .3s; }
.menu-toggle span:nth-child(1) { top:0; }
.menu-toggle span:nth-child(2) { top:50%; transform:translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom:0; }
.menu-toggle.active span:nth-child(1) { top:50%; transform:translateY(-50%) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { bottom:50%; transform:translateY(50%) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--bg); z-index:999; padding:100px 40px 40px; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-menu.active { display:flex; }
.mobile-menu a { font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--text); text-decoration:none; }
.mobile-menu a:hover { color:var(--coral); }

/* ==========================================
   LOADING SCREEN
   ========================================== */
.loading-screen {
  display:none;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
  animation: loaderAutoExit .6s ease 2.8s forwards;
}
.loading-screen.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loading-content { text-align:center; }
.loading-logo { margin-bottom:24px; }
.loading-logo__img {
  width: 80px; height: 80px;
  margin: 0 auto;
  object-fit: contain;
  -webkit-animation: loadingPulse 1.8s ease-in-out infinite, loadingFloat 2.4s ease-in-out infinite;
  animation: loadingPulse 1.8s ease-in-out infinite, loadingFloat 2.4s ease-in-out infinite;
}
.loading-wordmark-svg {
  height: 30px;
  width: auto;
  display: block;
  margin: 0 auto;
  -webkit-animation: loadingFadeUp .8s ease .3s both;
  animation: loadingFadeUp .8s ease .3s both;
}
.loading-wordmark-img {
  height: 28px;
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  -webkit-animation: loadingFadeUp .8s ease .3s both;
  animation: loadingFadeUp .8s ease .3s both;
}
.loading-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.4em;
  text-transform: none;
  color: var(--text);
  padding-left: 0.4em;
  animation: loadingFadeUp .8s ease .3s both;
}
.loading-wordmark span { color: inherit; font-style: normal; }
.loading-verb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ember-orange);
  margin-top: 8px;
  animation: loadingFadeUp .8s ease .6s both;
}
@keyframes loadingPulse { 0%,100% { opacity:.7; } 50% { opacity:1; } }
@keyframes loadingFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-8px) scale(1.05); } }
@keyframes loadingFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes loaderAutoExit { to { opacity:0; visibility:hidden; pointer-events:none; } }

/* ==========================================
   HERO — THE IGNITION (centered, warm editorial, motion graphics)
   ========================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding: 150px 0 90px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-warm);
}

/* Soft sunrise in the upper area */
.hero__sunrise {
  position: absolute;
  top: -22%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1100px; height: 1100px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,208,85,.35) 0%,
      rgba(255,110,5,.18) 28%,
      rgba(255,208,85,.08) 50%,
      transparent 72%);
  pointer-events: none;
  -webkit-animation: sunrisePulse 14s ease-in-out infinite alternate;
  animation: sunrisePulse 14s ease-in-out infinite alternate;
  z-index: 0;
}
.hero__warmth {
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,26,13,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
@-webkit-keyframes sunrisePulse {
  0%   { opacity: .8; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
  100% { opacity: 1;  -webkit-transform: translateX(-50%) scale(1.06); transform: translateX(-50%) scale(1.06); }
}
@keyframes sunrisePulse {
  0%   { opacity: .8; transform: translateX(-50%) scale(1); }
  100% { opacity: 1;  transform: translateX(-50%) scale(1.06); }
}

.hero__inner {
  position: relative;
  z-index: 4;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Eyebrow */
.hero__eyebrow {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
  opacity: 0;
  -webkit-animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .2s forwards;
  animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  width: 36px; height: 2px;
  background: var(--gradient-brand);
  border-radius: 1px;
}

/* ===== ASCENSION STAGE ===== */
.ascension {
  position: relative;
  width: clamp(300px, 40vw, 460px);
  height: clamp(300px, 40vw, 460px);
  margin-bottom: 44px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  opacity: 0;
  -webkit-animation: fadeUp 1.2s cubic-bezier(.16,1,.3,1) .4s forwards;
  animation: fadeUp 1.2s cubic-bezier(.16,1,.3,1) .4s forwards;
}

/* Rotating sun rays */
.ascension__rays {
  position: absolute;
  top: -12%; left: -12%; right: -12%; bottom: -12%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,  rgba(255,208,85,.22) 3deg,  transparent 7deg,
    transparent 32deg, rgba(255,110,5,.14)  34deg, transparent 38deg,
    transparent 62deg, rgba(255,208,85,.18) 64deg, transparent 68deg,
    transparent 92deg, rgba(255,26,13,.1)   94deg, transparent 98deg,
    transparent 122deg, rgba(255,208,85,.2) 124deg, transparent 128deg,
    transparent 152deg, rgba(255,110,5,.14) 154deg, transparent 158deg,
    transparent 182deg, rgba(255,208,85,.18) 184deg, transparent 188deg,
    transparent 212deg, rgba(255,26,13,.1)  214deg, transparent 218deg,
    transparent 242deg, rgba(255,208,85,.22) 244deg, transparent 248deg,
    transparent 272deg, rgba(255,110,5,.14) 274deg, transparent 278deg,
    transparent 302deg, rgba(255,208,85,.18) 304deg, transparent 308deg,
    transparent 332deg, rgba(255,26,13,.1)  334deg, transparent 338deg,
    transparent 360deg
  );
  -webkit-animation: raysSpin 45s linear infinite;
  animation: raysSpin 45s linear infinite;
  mix-blend-mode: multiply;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}
@-webkit-keyframes raysSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* Warm halo (rotating gradient ring) */
.ascension__halo {
  position: absolute;
  top: 6%; left: 6%; right: 6%; bottom: 6%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 208, 85, .48) 22%,
    rgba(255, 110, 5, .55)  48%,
    rgba(255, 26, 13, .42)  55%,
    rgba(255, 110, 5, .4)   78%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 63%, transparent 67%);
          mask: radial-gradient(circle, transparent 54%, #000 58%, #000 63%, transparent 67%);
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-animation: haloSpin 26s linear infinite;
  animation: haloSpin 26s linear infinite;
  opacity: .9;
}
@-webkit-keyframes haloSpin { to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@keyframes haloSpin { to { transform: rotate(-360deg); } }

/* Breathing rings */
.ascension__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ascension__ring--1 { top: 12%; left: 12%; right: 12%; bottom: 12%; border: 1px solid rgba(255,110,5,.32); -webkit-animation: ringBreathe 7s ease-in-out infinite; animation: ringBreathe 7s ease-in-out infinite; }
.ascension__ring--2 { top: 24%; left: 24%; right: 24%; bottom: 24%; border: 1px solid rgba(255,26,13,.22); -webkit-animation: ringBreathe 7s ease-in-out 1.3s infinite reverse; animation: ringBreathe 7s ease-in-out 1.3s infinite reverse; }
.ascension__ring--3 { top: 0; left: 0; right: 0; bottom: 0; border: 1px dashed rgba(26,22,18,.1); -webkit-animation: raysSpin 110s linear infinite; animation: raysSpin 110s linear infinite; }
@-webkit-keyframes ringBreathe {
  0%, 100% { -webkit-transform: scale(.97); transform: scale(.97); opacity: .5; }
  50%      { -webkit-transform: scale(1.04); transform: scale(1.04); opacity: 1; }
}
@keyframes ringBreathe {
  0%, 100% { transform: scale(.97); opacity: .5; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* Flame glow at base */
.ascension__glow {
  position: absolute;
  left: 50%; bottom: 8%;
  width: 66%; height: 42%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-filter: blur(18px);
  filter: blur(18px);
  mix-blend-mode: multiply;
  opacity: .6;
}
.glow-layer {
  position: absolute;
  left: 50%; bottom: 0;
  width: 100%; height: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 70% at 50% 100%,
    rgba(255,26,13,.6) 0%,
    rgba(255,110,5,.45) 30%,
    rgba(255,208,85,.25) 50%,
    transparent 70%);
  border-radius: 50% 50% 45% 45% / 90% 90% 20% 20%;
  -webkit-animation: glowFlicker var(--dur, 3s) ease-in-out var(--d, 0s) infinite alternate;
  animation: glowFlicker var(--dur, 3s) ease-in-out var(--d, 0s) infinite alternate;
}
.glow-layer--1 { --dur: 2.8s; --d: 0s;   opacity: .8; }
.glow-layer--2 { --dur: 3.6s; --d: .5s;  opacity: .5; width: 115%; }
@-webkit-keyframes glowFlicker {
  0%   { -webkit-transform: translateX(-50%) scale(.95, .9); transform: translateX(-50%) scale(.95, .9); }
  50%  { -webkit-transform: translateX(-50%) scale(1.06, 1.08); transform: translateX(-50%) scale(1.06, 1.08); }
  100% { -webkit-transform: translateX(-50%) scale(.97, .95); transform: translateX(-50%) scale(.97, .95); }
}
@keyframes glowFlicker {
  0%   { transform: translateX(-50%) scale(.95, .9); }
  50%  { transform: translateX(-50%) scale(1.06, 1.08); }
  100% { transform: translateX(-50%) scale(.97, .95); }
}

/* Phoenix — floats free against the sunrise, no hard disc. The warm glow behind creates presence without boxing the phoenix in. */
.ascension__disc {
  position: relative;
  z-index: 5;
  width: 62%;
  aspect-ratio: 1;
  background: transparent;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-animation: discBreathe 6s ease-in-out infinite;
  animation: discBreathe 6s ease-in-out infinite;
}
.ascension__disc::before {
  /* Soft warm backdrop blob. Blurs the cream background into a warm pool so the phoenix has presence without a hard circle. */
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 247, 232, .9) 0%,
    rgba(255, 236, 200, .7) 40%,
    rgba(255, 208, 85, .15) 70%,
    transparent 85%);
  -webkit-filter: blur(8px);
  filter: blur(8px);
  z-index: -1;
}
.ascension__disc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-filter: drop-shadow(0 20px 40px rgba(255, 110, 5, .2)) drop-shadow(0 0 30px rgba(255, 208, 85, .3));
  filter: drop-shadow(0 20px 40px rgba(255, 110, 5, .2)) drop-shadow(0 0 30px rgba(255, 208, 85, .3));
}
@-webkit-keyframes discBreathe {
  0%, 100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
  50%      { -webkit-transform: translateY(-8px) scale(1.025); transform: translateY(-8px) scale(1.025); }
}
@keyframes discBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.025); }
}

/* Ember field */
.embers {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.ember {
  position: absolute;
  bottom: 10%;
  left: var(--l);
  width: var(--s, 3px);
  height: var(--s, 3px);
  background: var(--c, var(--ember-orange));
  border-radius: 50%;
  -webkit-box-shadow: 0 0 8px 1px rgba(255,110,5,.6);
  box-shadow: 0 0 8px 1px rgba(255,110,5,.6);
  opacity: 0;
  -webkit-animation: emberRise var(--dur, 6s) ease-out var(--d, 0s) infinite;
  animation: emberRise var(--dur, 6s) ease-out var(--d, 0s) infinite;
  will-change: transform, opacity;
}
@-webkit-keyframes emberRise {
  0%   { opacity: 0; -webkit-transform: translate(0, 0) scale(.3); transform: translate(0, 0) scale(.3); }
  10%  { opacity: .9; }
  60%  { opacity: .65; }
  100% { opacity: 0; -webkit-transform: translate(var(--drift, 0), -420px) scale(.1); transform: translate(var(--drift, 0), -420px) scale(.1); }
}
@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  10%  { opacity: .9; }
  60%  { opacity: .65; }
  100% { opacity: 0; transform: translate(var(--drift, 0), -420px) scale(.1); }
}

/* ===== HEADLINE & CONTENT ===== */
.hero__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 28px;
  max-width: 920px;
  opacity: 0;
  -webkit-animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .9s forwards;
  animation: fadeUp 1s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.hero__title em {
  font-style: italic;
  font-weight: 450;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--text-body);
  max-width: 620px;
  margin: 0 auto 44px;
  opacity: 0;
  -webkit-animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.1s forwards;
  animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
.hero__lede strong { color: var(--text); font-weight: 600; }

.hero__cta {
  justify-content: center;
  margin-bottom: 56px;
  opacity: 0;
  -webkit-animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.3s forwards;
  animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.3s forwards;
}

/* Service pillars strip */
.hero__pillars-strip {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 6px 22px;
  padding-top: 32px;
  border-top: 1px solid rgba(26,22,18,.08);
  max-width: 760px;
  margin: 0 auto;
  opacity: 0;
  -webkit-animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.5s forwards;
  animation: fadeUp 1s cubic-bezier(.16,1,.3,1) 1.5s forwards;
}
.hero__pillars-strip .label {
  font-family: var(--font-logo, var(--font-display));
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  margin-right: 6px;
}
.hero__pillars-strip span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.hero__pillars-strip span.new {
  color: var(--coral);
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 8px;
}
.hero__pillars-strip span.new::after {
  content: 'NEW';
  padding: 2px 7px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  letter-spacing: 1px;
  border-radius: 3px;
}
.hero__pillars-strip .dot {
  width: 3px; height: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  display: inline-block;
}

/* Base fade-up */
@-webkit-keyframes fadeUp {
  from { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); }
  to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Legacy wrappers kept for other pages (about, contact, etc.) */
.hero__phoenix-wrapper {
  position: relative;
  width: clamp(180px, 22vw, 280px);
  height: clamp(180px, 22vw, 280px);
}
.phoenix-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.phoenix-glow--1 { top:-25%; right:-25%; bottom:-25%; left:-25%; background: radial-gradient(circle, rgba(255,26,13,0.08) 0%, transparent 65%); animation: breathe 4s ease-in-out infinite; }
.phoenix-glow--2 { top:-15%; right:-15%; bottom:-15%; left:-15%; background: radial-gradient(circle, rgba(255,110,5,0.06) 0%, transparent 60%); animation: breathe 4s ease-in-out 1s infinite; }
.phoenix-glow--3 { top:-35%; right:-35%; bottom:-35%; left:-35%; background: radial-gradient(circle, rgba(255,208,85,0.04) 0%, transparent 55%); animation: breathe 5s ease-in-out 0.5s infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.phoenix-float {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  animation: gentleFloat 6s ease-in-out infinite;
}
.phoenix-float img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 30px rgba(255, 110, 5, 0.12));
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(0.5deg); }
  50%      { transform: translateY(-14px) rotate(0deg); }
  75%      { transform: translateY(-6px) rotate(-0.5deg); }
}

/* Scroll indicator — kept for compat */
.scroll-indicator {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; z-index: 2;
}
.scroll-indicator__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember-orange);
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator__track {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--text-light), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__sunrise, .ascension__rays, .ascension__halo, .ascension__ring, .ascension__disc, .glow-layer, .ember, .hero__eyebrow, .hero__title, .hero__lede, .hero__cta, .hero__pillars-strip, .ascension {
    -webkit-animation-duration: .01ms !important;
    animation-duration: .01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
}


/* ==========================================
   PARTNERS STRIP
   ========================================== */
.partners-strip {
  padding: 48px 0;
  background: var(--bg-warm);
  border-top: 1px solid rgba(26, 22, 18, 0.04);
  border-bottom: 1px solid rgba(26, 22, 18, 0.04);
}
.partners-strip .container { display:flex; align-items:center; gap:44px; }
.partners-strip__label {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.partners-strip__names { display:flex; gap:36px; }
.partners-strip__names a {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  transition: color .3s;
}
.partners-strip__names a:hover { color:var(--text-secondary); }

/* ==========================================
   PHILOSOPHY
   ========================================== */
.philosophy { padding:clamp(80px, 12vw, 150px) 0; background:var(--bg); }
.philosophy .container { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(48px, 7vw, 110px); align-items:center; }
.philosophy__left { display:flex; flex-direction:column; gap:28px; }
.philosophy__left .section-label { margin-bottom: 0; }
.philosophy__left .editorial-photo { margin-top: 16px; width: 100%; }
.philosophy__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
.philosophy__title em { font-style:italic; font-weight:600; }
.philosophy__accent {
  display: block;
  width: 48px; height: 3px;
  background: var(--gradient-brand);
  margin-top: 32px;
  border-radius: 2px;
}
.philosophy__right p { font-size:17px; color:var(--text-body); line-height:1.9; margin-bottom:20px; }
.philosophy__highlight {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--text);
  padding: 24px 0 24px 24px;
  border-left: 3px solid var(--coral);
  margin: 32px 0;
  line-height: 1.4;
}

/* ==========================================
   SERVICES — ASYMMETRIC
   ========================================== */
.services {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg-warm);
  position: relative;
}
.services::before {
  content: '';
  position: absolute;
  top: 10%; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at 80% 30%, rgba(255, 208, 85, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.services__header {
  max-width: 560px;
  margin-bottom: clamp(48px, 7vw, 80px);
  position: relative; z-index: 2;
}
.services__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
.services__title em { font-style:italic; font-weight:600; }

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative; z-index: 2;
  align-items: stretch;
}
.service-item {
  background: var(--bg);
  border: 1px solid rgba(26, 22, 18, 0.05);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 44px);
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.service-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 110, 5, 0.08);
}
.service-item:hover::before { transform: scaleX(1); }

/* Cards stretch to equal height via grid */

.service-item--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}

.service-item__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  color: var(--ember-orange);
  opacity: 0.65;
  -webkit-transition: opacity .3s ease, color .3s ease;
  transition: opacity .3s ease, color .3s ease;
}
.service-item:hover .service-item__icon {
  opacity: 1;
  color: var(--flame-red);
}

.service-item__number {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.25;
  margin-bottom: 16px;
  transition: opacity .4s ease;
}
.service-item:hover .service-item__number { opacity: 0.5; }
.service-item__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.service-item__text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  -webkit-flex: 1;
  flex: 1;
}
.services__cta {
  margin-top: 48px;
  position: relative; z-index: 2;
}

/* ==========================================
   WORK / PARTNERS
   ========================================== */
.work { padding:clamp(80px, 12vw, 150px) 0; background:var(--bg); }
.work__header { margin-bottom:clamp(48px, 6vw, 72px); }
.work__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
.work__title em { font-style:italic; font-weight:600; }
.work__sub { font-size:16px; color:var(--text-secondary); max-width:480px; margin-top:12px; }
.work__grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.work-card {
  background: var(--bg-warm);
  border: 1px solid rgba(26, 22, 18, 0.04);
  border-radius: 20px;
  padding: clamp(32px, 4vw, 48px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
}
.work-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(255, 110, 5, 0.03), transparent);
  opacity: 0;
  transition: opacity .4s ease;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 110, 5, 0.08);
  color: inherit;
}
.work-card:hover::after { opacity: 1; }
.work-card__industry {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.work-card__client {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.work-card__text { font-size:15px; color:var(--text-secondary); line-height:1.8; }
.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--coral);
  font-weight: 500;
  font-size: 14px;
  margin-top: 20px;
  position: relative; z-index: 2;
  transition: gap .3s ease;
}
.work-card:hover .work-card__link { gap: 14px; }

/* ==========================================
   CASE STUDIES LIST (page-work)
   ========================================== */
.case-studies { padding:0 0 100px; }
.case-study-card { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--light); border-radius:24px; overflow:hidden; text-decoration:none; margin-bottom:40px; transition:all .4s cubic-bezier(.16,1,.3,1); }
.case-study-card:hover { box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-4px); }
.case-study-card__content { padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.case-study-card__tag { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--coral); margin-bottom:16px; }
.case-study-card__title { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,44px); color:var(--text); margin-bottom:8px; }
.case-study-card__industry { font-size:14px; color:var(--text-secondary); margin-bottom:20px; }
.case-study-card__text { font-size:15px; color:var(--text-secondary); line-height:1.8; margin-bottom:24px; }
.case-study-card__link { font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--coral); }
.case-study-card__image { background:var(--off-white); display:flex; align-items:center; justify-content:center; min-height:320px; overflow:hidden; }
.case-study-card__image img { width:100%; height:100%; object-fit:cover; }
.case-study-card__image--placeholder { color:var(--text-light); font-size:14px; }

/* ==========================================
   CASE STUDY DETAIL
   ========================================== */
.cs-hero { padding:200px 0 80px; }
.cs-back { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:all .3s; margin-bottom:48px; }
.cs-back:hover { color:var(--coral); gap:14px; }
.cs-back svg { transition:transform .3s; }
.cs-back:hover svg { transform:translateX(-4px); }
.cs-hero__center { text-align:center; max-width:800px; margin:0 auto; }
.cs-hero__label { font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--coral); margin-bottom:20px; }
.cs-hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(48px,8vw,96px); line-height:.9; letter-spacing:-3px; color:var(--text); margin-bottom:16px; }
.cs-hero__title em { font-style:italic; color:var(--coral); }
.cs-hero__industry { font-size:16px; color:var(--text-secondary); }
.cs-meta { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--light); border-bottom:1px solid var(--light); margin:60px 0 80px; }
.cs-meta__item { padding:28px 0; }
.cs-meta__item + .cs-meta__item { padding-left:28px; border-left:1px solid var(--light); }
.cs-meta__label { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--coral); margin-bottom:6px; }
.cs-meta__value { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text); }
.cs-screenshot { margin:0 0 60px; border-radius:16px; overflow:hidden; border:1px solid var(--light); background:var(--off-white); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; }
.cs-screenshot img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }
.cs-screenshot__placeholder { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--text-secondary); }
.cs-section { padding:80px 0; }
.cs-section--alt { background:var(--off-white); }
.cs-section .container { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.cs-section h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,36px); line-height:1.1; color:var(--text); margin-bottom:24px; }
.cs-section h2 em { font-style:italic; color:var(--coral); }
.cs-section__right p { font-size:16px; color:var(--text-body); line-height:1.9; margin-bottom:20px; }
.cs-list { list-style:none; margin:20px 0; }
.cs-list li { font-size:15px; color:var(--text-body); line-height:1.8; padding:8px 0 8px 24px; position:relative; border-bottom:1px solid rgba(0,0,0,.04); }
.cs-list li:last-child { border-bottom:none; }
.cs-list li::before { content:''; position:absolute; left:0; top:17px; width:8px; height:8px; border-radius:50%; background:var(--coral); opacity:.4; }
.cs-visit { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:1px; color:var(--coral); margin-top:20px; transition:gap .3s; }
.cs-visit:hover { gap:14px; }

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
  padding: clamp(80px, 12vw, 150px) 0;
  background: var(--bg-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(255, 110, 5, 0.05) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 20px;
  max-width: 620px;
  margin-left: auto; margin-right: auto;
}
.cta-section__title em { font-style:italic; font-weight:600; }
.cta-section__sub {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

/* ==========================================
   PAGE HERO (non-homepage)
   ========================================== */
.page-hero { padding:200px 0 80px; }
.page-hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5vw,56px); line-height:1.1; color:var(--text); max-width:780px; margin-bottom:24px; }
.page-hero__title em { font-style:italic; color:var(--coral); }
.page-hero__text { font-size:17px; color:var(--text-body); line-height:1.8; max-width:560px; }

/* ==========================================
   SERVICE DETAIL
   ========================================== */
.service-detail { padding:100px 0; }
.service-detail--alt { background:var(--off-white); }
.service-detail__content { max-width:680px; }
.service-detail__title { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.5vw,32px); line-height:1.1; color:var(--text); margin:16px 0 24px; }
.service-detail__content > p { font-size:16px; line-height:1.9; color:var(--text-body); margin-bottom:16px; }
.service-detail__meta { margin-top:28px; padding:24px 28px; border-radius:16px; background:var(--off-white); border:1px solid var(--light); }
.service-detail--alt .service-detail__meta { background:var(--bg); }
.service-detail__meta-label { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--coral); margin-bottom:8px; }
.service-detail__meta-text { font-size:14px; color:var(--text-body); line-height:1.7; margin-bottom:0; }

/* ==========================================
   ABOUT SECTIONS
   ========================================== */
.founder-section { padding:80px 0 100px; }
.founder { max-width:680px; margin:0 auto; text-align:center; }
.founder__photo { width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 32px; border:3px solid var(--light); }
.founder__photo img { width:100%; height:100%; object-fit:cover; }
.founder__quote { font-family:var(--font-display); font-size:20px; font-weight:400; font-style:italic; line-height:1.8; color:var(--text-body); margin:0 0 24px; }
.founder__name { font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--text); }
.founder__title { font-size:13px; color:var(--text-secondary); margin-top:4px; }

.about-story { padding:120px 0; background:var(--off-white); }
.about-story .container, .about-howwework .container { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-story h2, .about-howwework h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1.1; color:var(--text); margin-bottom:24px; }
.about-story__right p, .about-howwework__right p { font-size:16px; color:var(--text-body); line-height:1.9; margin-bottom:20px; }
.about-howwework { padding:120px 0; }

.about-values { padding:120px 0; background:var(--off-white); }
.about-values h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1.1; color:var(--text); margin-bottom:48px; }
.about-values__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.value-card { padding:36px; border-radius:20px; border:1px solid var(--light); background:var(--bg); transition:all .3s; }
.value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.value-card__title { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--text); margin-bottom:10px; }
.value-card__text { font-size:15px; color:var(--text-body); line-height:1.7; }

/* ==========================================
   CONTACT
   ========================================== */
.contact-section { padding:200px 0 140px; }
.contact-section .container { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:start; }
.contact__title { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.5vw,44px); line-height:1.1; color:var(--text); margin-bottom:16px; }
.contact__title em { font-style:italic; color:var(--coral); }
.contact__sub { font-size:16px; color:var(--text-body); line-height:1.8; max-width:480px; margin-bottom:40px; }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { font-size:12px; font-weight:600; letter-spacing:1px; color:var(--text-secondary); }
.form-group input, .form-group textarea { font-family:var(--font-body); font-size:15px; padding:16px 20px; border:1px solid var(--light); border-radius:14px; background:var(--off-white); color:var(--text); transition:all .3s; outline:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,26,13,.08); }
.form-group textarea { min-height:160px; resize:vertical; }
.contact-info { padding-top:20px; }
.contact-info__mascot { max-width:180px; margin-bottom:36px; }
.contact-info__item { margin-bottom:24px; }
.contact-info__label { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--coral); margin-bottom:6px; }
.contact-info__text { font-size:16px; color:var(--text-body); }
.contact-note { margin-top:40px; padding:28px; border-radius:16px; background:var(--off-white); border:1px solid var(--light); font-size:14px; color:var(--text-body); line-height:1.8; font-style:italic; }

/* ==========================================
   BLOG
   ========================================== */
.blog-archive { padding:0 0 120px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { border:1px solid var(--light); border-radius:20px; overflow:hidden; transition:all .35s cubic-bezier(.16,1,.3,1); background:var(--bg); }
.blog-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.blog-card__inner { display:block; color:inherit; text-decoration:none; height:100%; }
.blog-card__image-wrap { aspect-ratio:16/10; overflow:hidden; background:var(--off-white); }
.blog-card__image { width:100%; height:100%; object-fit:cover; }
.blog-card__content { padding:28px; }
.blog-card__meta { font-size:12px; color:var(--text-secondary); margin-bottom:14px; }
.blog-card__title { font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.2; margin-bottom:14px; color:var(--text); }
.blog-card__excerpt { color:var(--text-body); line-height:1.8; font-size:14px; }
.blog-card__link { display:inline-flex; margin-top:18px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--coral); }
.blog-empty { padding:48px; border:1px solid var(--light); border-radius:20px; background:var(--off-white); max-width:700px; }
.blog-pagination { margin-top:40px; }
.blog-pagination .nav-links { display:flex; gap:12px; flex-wrap:wrap; }
.blog-pagination a, .blog-pagination span { padding:10px 14px; border:1px solid var(--light); border-radius:999px; text-decoration:none; color:var(--coral); }
.blog-pagination .current { background:var(--coral); color:#fff; border-color:var(--coral); }

/* Blog single */
.blog-hero { padding:200px 0 80px; }
.blog-hero__meta { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.blog-hero__tag { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--coral); background:rgba(255,26,13,.06); padding:6px 14px; border-radius:50px; }
.blog-hero__date { font-size:13px; color:var(--text-secondary); }
.blog-hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.5vw,52px); line-height:1.08; color:var(--text); max-width:780px; margin-bottom:24px; }
.blog-hero__excerpt { font-size:18px; line-height:1.8; color:var(--text-body); max-width:620px; }
.blog-body { padding:0 0 100px; }
.blog-body .container { display:grid; grid-template-columns:1fr 280px; gap:80px; align-items:start; }
.blog-content { max-width:720px; }
.blog-content h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.5vw,30px); line-height:1.15; color:var(--text); margin:56px 0 20px; }
.blog-content h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2vw,22px); color:var(--text); margin:40px 0 16px; }
.blog-content p { font-size:16px; line-height:1.85; color:var(--text-body); margin-bottom:20px; }
.blog-content strong { font-weight:600; color:var(--text); }
.blog-content a { color:var(--coral); text-decoration:underline; text-decoration-color:rgba(255,26,13,.3); text-underline-offset:3px; }
.blog-content a:hover { text-decoration-color:var(--coral); }
.blog-content img { border-radius:16px; margin:32px 0; }
.blog-content ul, .blog-content ol { margin:16px 0 24px; padding-left:0; list-style:none; }
.blog-content ul li, .blog-content ol li { font-size:16px; line-height:1.85; color:var(--text-body); padding:8px 0 8px 28px; position:relative; }
.blog-content ul li::before { content:''; position:absolute; left:0; top:18px; width:8px; height:8px; border-radius:50%; background:var(--coral); opacity:.4; }
.blog-content ol { counter-reset:ol-counter; }
.blog-content ol li { counter-increment:ol-counter; }
.blog-content ol li::before { content:counter(ol-counter) '.'; position:absolute; left:0; top:8px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--coral); }
.blog-content blockquote { font-size:20px; font-weight:600; color:var(--text); padding:24px 0 24px 24px; border-left:3px solid var(--coral); margin:40px 0; line-height:1.5; }
.blog-cta { margin-top:64px; padding:48px; border-radius:24px; background:var(--bg-cream); border:1px solid rgba(26,22,18,0.06); position:relative; overflow:hidden; }
.blog-cta__text { font-size:18px; color:var(--text-secondary); line-height:1.7; max-width:500px; margin-bottom:24px; }
.blog-cta__text strong { color:var(--text); font-weight:600; }
.blog-sidebar { position:sticky; top:120px; }
.sidebar-toc { padding:32px; border-radius:20px; background:var(--off-white); border:1px solid var(--light); margin-bottom:24px; }
.sidebar-toc__title { font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--coral); margin-bottom:20px; }
.sidebar-toc__list { list-style:none; }
.sidebar-toc__list li { margin-bottom:10px; }
.sidebar-toc__list a { font-size:14px; color:var(--text-secondary); text-decoration:none; transition:all .3s; display:block; line-height:1.5; }
.sidebar-toc__list a:hover { color:var(--text); padding-left:8px; }
.sidebar-related { padding:32px; border-radius:20px; background:var(--text); }
.sidebar-related__title { font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--coral); margin-bottom:20px; }
.sidebar-related__item { display:block; padding:14px 0; border-top:1px solid rgba(255,255,255,.06); text-decoration:none; }
.sidebar-related__item:first-of-type { border-top:none; }
.sidebar-related__item-title { font-size:14px; font-weight:600; color:#fff; line-height:1.4; transition:color .3s; }
.sidebar-related__item:hover .sidebar-related__item-title { color:var(--coral); }

/* ==========================================
   SUSTAINABILITY
   ========================================== */
.sust-hero { padding:200px 0 100px; }
.sust-hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5vw,60px); line-height:1.1; color:var(--text); max-width:800px; margin-bottom:24px; }
.sust-hero__title em { font-style:italic; color:var(--coral); }
.sust-hero__sub { font-size:17px; color:var(--text-body); line-height:1.8; max-width:600px; }
.sust-hero .section-label { color:var(--coral); }

.sust-stat { padding:120px 0; text-align:center; position:relative; overflow:hidden; }
.sust-stat__number { font-family:var(--font-display); font-size:clamp(80px,12vw,180px); font-weight:700; color:var(--text); letter-spacing:-6px; line-height:.85; position:relative; }
.sust-stat__detail { font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:6px; text-transform:uppercase; color:var(--text); margin-top:16px; position:relative; }
.sust-stat__text { font-size:18px; color:var(--text-secondary); line-height:1.6; max-width:520px; margin:36px auto 0; position:relative; }
.sust-stat__source { font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--text-light); margin-top:32px; position:relative; }

.sust-gaps { padding:120px 0; background:var(--text); }
.sust-gaps__title { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,48px); line-height:1.05; color:#fff; margin-bottom:56px; }
.sust-gaps__title em { font-style:italic; color:var(--coral); }
.sust-gaps .section-label { color:var(--coral); }
.sust-gap { padding:28px 0; border-top:1px solid rgba(255,255,255,.06); display:grid; grid-template-columns:64px 1fr; gap:4px 20px; align-items:start; }
.sust-gap:last-child { border-bottom:1px solid rgba(255,255,255,.06); }
.sust-gap__number { font-family:var(--font-display); font-size:36px; font-weight:700; color:rgba(255,255,255,.08); line-height:1; }
.sust-gap__name { font-family:var(--font-display); font-size:20px; font-weight:600; color:#fff; margin-bottom:4px; }
.sust-gap__text { font-size:15px; color:#666; line-height:1.6; }

.sust-impact { padding:120px 0; background:var(--coral); }
.sust-impact__inner { text-align:center; }
.sust-impact__number { font-family:var(--font-display); font-size:clamp(80px,12vw,180px); font-weight:700; color:#fff; letter-spacing:-6px; line-height:.85; margin-bottom:12px; }
.sust-impact__detail { font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:6px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:36px; }
.sust-impact__text { font-size:20px; color:rgba(255,255,255,.7); line-height:1.6; max-width:520px; margin:0 auto; }
.sust-impact__text strong { font-weight:700; color:#fff; }
.sust-impact__source { font-family:var(--font-display); font-style:italic; font-size:13px; color:rgba(255,255,255,.3); margin-top:32px; }

.sust-response { padding:120px 0; }
.sust-response .container { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.sust-response h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.5vw,40px); line-height:1.1; color:var(--text); }
.sust-response h2 em { font-style:italic; color:var(--coral); }
.sust-response__right p { font-size:16px; color:var(--text-body); line-height:1.9; margin-bottom:20px; }
.sust-response__right a, .sust-gap__text a, .sust-stat__source a { color:var(--coral); text-decoration:underline; text-decoration-color:rgba(255,26,13,.3); text-underline-offset:3px; transition:text-decoration-color .3s; }
.sust-response__right a:hover, .sust-gap__text a:hover, .sust-stat__source a:hover { text-decoration-color:var(--coral); }

.sust-values { padding:120px 0; background:var(--text); }
.sust-values .section-label { color:var(--coral); margin-bottom:40px; }
.sust-values__grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.sust-value { padding:36px 40px; border:1px solid rgba(255,255,255,.04); }
.sust-value__name { font-family:var(--font-display); font-size:20px; font-weight:600; color:#fff; margin-bottom:8px; }
.sust-value__text { font-size:15px; color:#666; line-height:1.7; }

/* ==========================================
   PHOTO PLACEHOLDERS
   Used when no image has been uploaded via
   Appearance > Customize > Rinato Website Photos
   ========================================== */
.photo-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 32px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,208,85,.08), rgba(255,110,5,.04)),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,110,5,.04) 18px 19px),
    var(--bg-warm);
  border: 1px dashed rgba(255, 110, 5, .22);
  border-radius: 24px;
  color: var(--text-secondary);
  width: 100%;
  height: 100%;
  min-height: 280px;
  transition: all .3s ease;
}
.photo-placeholder:hover { border-color: rgba(255, 110, 5, .4); }
.photo-placeholder__icon {
  width: 44px; height: 44px;
  color: var(--ember-orange);
  opacity: .45;
  stroke-width: 1.5;
}
.photo-placeholder__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
  max-width: 320px;
}
.photo-placeholder__hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ember-orange);
  opacity: .7;
  padding: 6px 12px;
  border: 1px solid rgba(255,110,5,.2);
  border-radius: 100px;
  background: rgba(255,255,255,.6);
}
.photo-placeholder--portrait { aspect-ratio: 3/4; min-height: 0; }
.photo-placeholder--wide     { aspect-ratio: 16/9; min-height: 0; }
.photo-placeholder--case     { aspect-ratio: 4/3; min-height: 0; }

/* ==========================================
   SERVICE CARD — FEATURED (360° Solutions)
   Highlights the new pillar without dominating the grid
   ========================================== */
.service-card--featured {
  position: relative;
  background: linear-gradient(180deg, #FFF7E8 0%, var(--bg-warm) 100%);
  border: 1px solid rgba(255, 110, 5, .18);
  box-shadow: 0 12px 40px rgba(255, 110, 5, .08);
}
.service-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,208,85,.6), transparent 40%, rgba(255,26,13,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.service-card--featured .new-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(255,26,13,.25);
  z-index: 2;
}

@media (max-width:1024px) {
  .sust-response .container { grid-template-columns:1fr; gap:40px; }
  .sust-values__grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .sust-hero { padding:160px 0 80px; }
  .sust-gap { grid-template-columns:1fr; }
  .sust-gap__number { font-size:24px; margin-bottom:8px; }
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  position:relative;
  overflow:hidden;
  background: var(--bg);
  border-top: 1px solid rgba(26, 22, 18, 0.06);
  padding: clamp(56px, 8vw, 96px) 0 36px;
}
.footer__texture {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.08;
  pointer-events:none;
}
.footer .container { position:relative; z-index:1; }
.footer .container { max-width:1240px; margin:0 auto; padding:0 clamp(24px, 5vw, 72px); }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(36px, 5vw, 72px); margin-bottom:56px; }
.footer__wordmark-svg {
  height: 20px;
  width: auto;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.footer__wordmark-img {
  height: 18px;
  width: auto;
  min-width: 70px;
  object-fit: contain;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.32em;
  text-transform: none;
  color: var(--text);
  padding-left: 0.32em;
  margin-bottom: 8px;
}
.footer__wordmark span { color: inherit; font-style: normal; }
.footer__tagline { font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--text-muted); margin-bottom:14px; }
.footer__desc { font-size:14px; color:var(--text-secondary); line-height:1.8; }
.footer__heading { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:22px; }
.footer__links { list-style:none; }
.footer__links li { margin-bottom:12px; }
.footer__links a, .footer__links span { font-size:14px; color:var(--text-secondary); text-decoration:none; transition:color .3s; }
.footer__links a:hover { color:var(--coral); }
.footer__bottom { padding-top:28px; border-top:1px solid rgba(26, 22, 18, 0.06); font-size:13px; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer__logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer__location { display:flex; align-items:center; gap:6px; }

/* ==========================================
   ANIMATIONS
   ========================================== */
.fade-in { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity .9s cubic-bezier(.16,1,.3,1), -webkit-transform .9s cubic-bezier(.16,1,.3,1); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.fade-in.visible { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }

.fade-in-left { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); -webkit-transition:opacity .9s cubic-bezier(.16,1,.3,1), -webkit-transform .9s cubic-bezier(.16,1,.3,1); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.fade-in-left.visible { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); }

.fade-in-right { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); -webkit-transition:opacity .9s cubic-bezier(.16,1,.3,1), -webkit-transform .9s cubic-bezier(.16,1,.3,1); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.fade-in-right.visible { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); }

.motion-ready .fade-in:not(.visible),
.motion-ready .fade-in-left:not(.visible),
.motion-ready .fade-in-right:not(.visible) {
  opacity:.001;
  -webkit-transform:translateY(18px);
  transform:translateY(18px);
}

/* ==========================================
   VISUAL ENHANCEMENTS — v6
   ========================================== */

/* Gradient divider */
.gradient-divider { height:2px; background:var(--gradient-brand); opacity:.12; border:none; margin:0; }

/* Phoenix watermark */
.phoenix-watermark { position:absolute; width:clamp(300px,40vw,600px); height:auto; opacity:.025; pointer-events:none; z-index:0; }

/* Decorative orb */
.visual-orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }

/* Dot grid pattern */
.dot-grid { position:absolute; top:0; right:0; bottom:0; left:0; background-image:radial-gradient(circle,rgba(26,22,18,0.04) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; opacity:.5; }
.dot-grid--right { left:50%; }
.dot-grid--light { opacity:.3; }

/* Enhanced section label with gradient line prefix */
.section-label { display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; gap:12px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--gradient-brand); border-radius:1px; -webkit-flex-shrink:0; flex-shrink:0; }

/* Enhanced philosophy highlight — styled quote */
.philosophy__highlight {
  position:relative;
  font-family:var(--font-display);
  font-weight:500;
  font-size:22px;
  color:var(--text);
  padding:32px 32px 32px 36px;
  margin:36px 0;
  line-height:1.4;
  background:linear-gradient(135deg,rgba(255,26,13,0.03) 0%,rgba(255,208,85,0.02) 100%);
  border-radius:12px;
  border-left:4px solid var(--flame-red);
}
.philosophy__highlight::before {
  content:'\201C';
  position:absolute;
  top:-8px; left:12px;
  font-family:var(--font-display);
  font-size:72px;
  font-weight:700;
  background:var(--gradient-brand-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.15;
  line-height:1;
}

/* Service icon pill */
.svc-icon-pill {
  width:48px; height:48px;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,26,13,0.06) 0%,rgba(255,208,85,0.04) 100%);
  color:var(--ember-orange);
  margin-bottom:20px;
  -webkit-transition:all .3s; transition:all .3s;
}
.svc-icon-pill svg, .svc-icon-pill i { width:24px; height:24px; font-size:24px; line-height:1; }
.service-item:hover .svc-icon-pill, .service-detail:hover .svc-icon-pill { background:linear-gradient(135deg,rgba(255,26,13,0.1) 0%,rgba(255,208,85,0.08) 100%); color:var(--flame-red); }

.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF6E05;
  transition: color .3s ease, transform .2s ease, background .3s ease;
}
.icon-pill i { font-size:32px; line-height:1; }
.icon-pill:hover,
.service-card:hover .icon-pill,
.value-card:hover .icon-pill {
  color: #FFD055;
  transform: scale(1.15);
}
.icon-pill--inline {
  margin-left: 8px;
  color: currentColor;
}
.icon-pill--inline i,
.icon-pill--small i { font-size:16px; }
.contact-info__label .icon-pill--small { margin-right:6px; vertical-align:middle; }

.service-card {
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  will-change: transform, opacity;
}
.service-card:hover {
  box-shadow: 0 0 0 1px #FF6E05, 0 8px 32px rgba(255, 110, 5, 0.12);
  transform: translateY(-4px);
}

.market-photo-card {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-warm);
}
.market-photo-card img,
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.editorial-photo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-warm);
  border: 1px solid rgba(26, 22, 18, .08);
  box-shadow: var(--shadow-md);
}
.editorial-photo::after {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,13,13,.2));
  pointer-events:none;
}
.editorial-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.editorial-photo--portrait { aspect-ratio: 4 / 5; margin-top:32px; }
.editorial-photo--wide { aspect-ratio: 16 / 9; }
.services__photo { margin:0 0 clamp(32px, 5vw, 56px); }
.about-story__photo { margin-top:28px; }
.contact-info__photo { margin-bottom:28px; }

.service-detail .container {
  display:grid;
  grid-template-columns:minmax(0, 680px) minmax(260px, 1fr);
  gap:clamp(32px, 6vw, 72px);
  align-items:center;
}
.service-detail--alt .service-detail__media { order:-1; }
.service-detail__media {
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius:16px;
  background:var(--bg-warm);
  border:1px solid rgba(26,22,18,.08);
  box-shadow:var(--shadow-md);
}
.service-detail__media img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Motion base states */
.anim-fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
  will-change: transform, opacity;
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.gradient-divider {
  transform-origin: left center;
  will-change: transform;
}

@keyframes ember-pulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-block {
  background: linear-gradient(135deg, #FF1A0D, #FF6E05, #FFD055, #FF6E05);
  background-size: 300% 300%;
  animation: ember-pulse 8s ease infinite;
}
.cta-block .cta-section__title,
.cta-block .cta-section__sub { color: #fff; }
.cta-block .section-label { color: rgba(255,255,255,.78) !important; }
.cta-block .cta-section__title em {
  color: #fff;
  -webkit-text-fill-color: currentColor;
}

/* Partner card browser mockup */
.pcard-preview {
  height:180px;
  background:var(--bg-warm);
  position:relative;
  overflow:hidden;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  -webkit-justify-content:center; justify-content:center;
  border-radius:20px 20px 0 0;
}
.pcard-preview::before { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background:linear-gradient(135deg,rgba(255,26,13,0.03) 0%,rgba(255,208,85,0.02) 100%); }
.pcard-browser { width:85%; height:120px; background:#fff; border-radius:8px 8px 0 0; position:relative; z-index:1; box-shadow:0 4px 20px rgba(0,0,0,0.06); margin-top:30px; }
.pcard-browser__dots { display:flex; gap:6px; padding:10px 14px; }
.pcard-browser__dots span { width:8px; height:8px; border-radius:50%; background:var(--light); }
.pcard-browser__url { margin:0 14px; padding:6px 12px; background:var(--bg-warm); border-radius:4px; font-size:10px; color:var(--text-muted); letter-spacing:.5px; }

/* Enhanced CTA section — with mesh and watermark */
.cta-section { position:relative; overflow:hidden; }
.cta-section .cta-mesh-1 { position:absolute; top:-20%;left:-10%; width:600px;height:600px; background:radial-gradient(circle,rgba(255,26,13,0.05) 0%,transparent 60%); pointer-events:none; }
.cta-section .cta-mesh-2 { position:absolute; bottom:-20%;right:-10%; width:500px;height:500px; background:radial-gradient(circle,rgba(255,208,85,0.06) 0%,transparent 60%); pointer-events:none; }
.cta-section .cta-phoenix { position:absolute; left:50%;top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:300px; opacity:.025; pointer-events:none; }

/* Enhanced page-hero with orb */
.page-hero { position:relative; overflow:hidden; }
.page-hero .visual-orb { top:-15%; right:-10%; width:500px; height:500px; background:radial-gradient(ellipse,rgba(255,208,85,0.1) 0%,rgba(255,110,5,0.04) 40%,transparent 70%); }

/* Enhanced founder section */
.founder__quote {
  position:relative;
  padding:32px;
  background:linear-gradient(135deg,rgba(255,26,13,0.02) 0%,rgba(255,208,85,0.015) 100%);
  border-radius:16px;
  border:1px solid rgba(26,22,18,0.04);
}
.founder__quote::before {
  content:'\201C';
  position:absolute;
  top:4px; left:16px;
  font-family:var(--font-display);
  font-size:64px;
  font-weight:700;
  background:var(--gradient-brand-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.12;
  line-height:1;
}

/* Value cards with gradient accent */
.value-card { position:relative; overflow:hidden; }
.value-card::before { content:''; position:absolute; top:0;left:0; width:3px;height:100%; background:var(--gradient-brand); opacity:0; -webkit-transition:opacity .3s; transition:opacity .3s; border-radius:0 2px 2px 0; }
.value-card:hover::before { opacity:1; }

/* Enhanced contact section */
.contact-section { position:relative; overflow:hidden; }
.contact-section .visual-orb--contact { top:10%; right:-5%; width:500px; height:500px; background:radial-gradient(ellipse,rgba(255,208,85,0.08) 0%,transparent 60%); }

/* Case study enhanced meta */
.cs-meta { position:relative; }
.cs-meta::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:var(--gradient-brand); opacity:.1; }

/* Enhanced blog CTA */
.blog-cta { position:relative; overflow:hidden; }
.blog-cta::before { content:''; position:absolute; top:-30%;right:-20%; width:300px;height:300px; background:radial-gradient(circle,rgba(255,26,13,0.08) 0%,transparent 60%); pointer-events:none; }

/* Service detail enhanced */
.service-detail { position:relative; overflow:hidden; }
.service-detail .visual-orb--svc { position:absolute; top:20%; right:-10%; width:400px; height:400px; background:radial-gradient(ellipse,rgba(255,208,85,0.05) 0%,transparent 60%); pointer-events:none; }
.service-detail__meta { position:relative; }
.service-detail__meta::before { content:''; position:absolute; top:0;left:0; width:3px;height:100%; background:var(--gradient-brand); border-radius:2px; opacity:.5; }
.service-detail__meta { padding-left:20px; border-left:none; }

/* 404 enhanced */
.error-404 { position:relative; overflow:hidden; }
.error-404 .visual-orb { top:20%;left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); width:600px;height:600px; background:radial-gradient(circle,rgba(255,208,85,0.06) 0%,transparent 60%); }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width:1024px) {
  .philosophy .container, .about-story .container, .about-howwework .container, .cs-section .container { grid-template-columns:1fr; gap:40px; }
  .services__grid { grid-template-columns:1fr; }
  .service-item--wide { grid-template-columns:1fr; }
  .service-detail .container { grid-template-columns:1fr; }
  .service-detail--alt .service-detail__media { order:0; }
  .work__grid { grid-template-columns:1fr; }
  .blog-body .container { grid-template-columns:1fr; gap:48px; }
  .blog-sidebar { position:static; }
  .case-study-card { grid-template-columns:1fr; }
  .case-study-card__image { min-height:240px; }
}

@media (max-width:900px) {
  .hero__inner { grid-template-columns:1fr; text-align:center; }
  .hero__sub { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero .btn-group { -webkit-justify-content:center; justify-content:center; }
  .hero__tag { -webkit-justify-content:center; justify-content:center; }
  .hero__visual { -webkit-order:-1; order:-1; margin-bottom:16px; }
  .hero__phoenix-wrapper { width:160px; height:160px; }
  .rebirth-stage { width:min(360px, 86vw); }
  .rebirth-card { min-width:96px; padding:9px 11px; }
  .rebirth-card--one { left:2%; top:18%; }
  .rebirth-card--two { right:2%; top:22%; }
  .rebirth-card--three { right:auto; left:50%; margin-left:-58px; bottom:6%; }
  .hero__proof { justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .anim-fade-up,
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .hero-anim,
  .hero-line {
    opacity: 1 !important;
    transform: none !important;
  }
  .cta-block {
    animation: none !important;
  }
}

@media (max-width:768px) {
  .main-nav__links, .main-nav .nav-cta { display:none; }
  .menu-toggle { display:block; }
  .brand__wordmark-img { height:18px !important; min-width:70px; display:block !important; }
  .brand__wordmark-svg { height:18px !important; }
  .brand__phoenix { width:36px !important; height:36px !important; }
  .brand { gap:10px; }
  .hero { padding-top:100px; min-height:auto; padding-bottom:60px; }
  /* Ensure hero content is always visible on mobile */
  .hero-anim { opacity:1; -webkit-transform:none; transform:none; }
  .hero-line { opacity:1; -webkit-transform:none; transform:none; -webkit-animation:none; animation:none; }
  .hero__tag { opacity:1; -webkit-transform:none; transform:none; -webkit-animation:none; animation:none; }
  .icon-pill i { font-size:24px; }
  .page-hero { padding:160px 0 60px; }
  .page-hero__title { font-size:32px; }
  .partners-strip .container { flex-direction:column; gap:16px; align-items:flex-start; }
  .about-values__grid { grid-template-columns:1fr; }
  .contact-section .container { grid-template-columns:1fr; gap:40px; }
  .cs-meta { grid-template-columns:1fr; }
  .cs-meta__item + .cs-meta__item { padding-left:0; border-left:none; border-top:1px solid var(--light); padding-top:20px; }
  .cs-hero__title { font-size:48px; letter-spacing:-1px; }
  .footer__grid { grid-template-columns:1fr; gap:40px; }
  .footer__bottom { text-align:center; flex-direction:column; }
  .blog-grid { grid-template-columns:1fr; }
  .loading-wordmark-img { height:22px; min-width:70px; }
  .loading-wordmark-svg { height:24px; }
  .footer__wordmark-img { height:16px !important; min-width:60px; display:block !important; }
  .footer__wordmark-svg { height:16px !important; }
}

/* ==========================================
   HERO — RESPONSIVE (Ignition-centered)
   ========================================== */
@media (max-width: 900px) {
  .hero { padding: 130px 0 70px; }
  .hero__eyebrow { margin-bottom: 24px; gap: 10px; }
  .hero__eyebrow::before,
  .hero__eyebrow::after { width: 24px; }
  .hero__pillars-strip { padding-top: 24px; gap: 6px 18px; }
  .hero__pillars-strip .label { display: none; }
}
@media (max-width: 620px) {
  .hero { padding: 110px 0 50px; }
  .ascension {
    width: 82vw;
    height: 82vw;
    margin-bottom: 32px;
  }
  .hero__title { font-size: clamp(32px, 9.5vw, 48px); margin-bottom: 20px; }
  .hero__lede { font-size: 15.5px; margin-bottom: 32px; }
  .hero__cta {
    gap: 20px;
    margin-bottom: 40px;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__cta .btn--primary { justify-content: center; padding: 15px 28px; font-size: 14px; }
  .hero__cta .btn--ghost { justify-content: center; padding: 13px 4px; }
  .hero__sunrise { width: 700px; height: 700px; top: -18%; }
}

/* ================================================================
   ====================================================================
   v8 ADDITIONS — appended below the v7 design system.
   These power: dark hero on home, services overview content,
   case studies (overview + 4 detail pages), about (content blocks),
   reveal animations.
   ====================================================================
   ================================================================ */

/* ================================================================
   v8 BUTTONS — used in hero CTA + new pages
   ================================================================ */
.btn--lg {
  padding: 1.05rem 2.25rem;
  font-size: var(--t-base);
}
.btn__arrow {
  display: inline-flex;
  margin-left: 0.5rem;
  transition: transform var(--t-fast) var(--ease-soft);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ================================================================
   9. HERO — the cinematic entrance
   ================================================================ */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--coal);
  padding: 8rem 0 6rem;
}

/* Layered atmospheric backgrounds */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__atmosphere-glow {
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255,110,5,0.28) 0%, rgba(255,26,13,0.12) 25%, transparent 55%);
  filter: blur(60px);
  opacity: 0.85;
}
.hero__atmosphere-warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(255,208,85,0.06) 0%, transparent 40%),
              radial-gradient(ellipse at 80% 70%, rgba(255,26,13,0.08) 0%, transparent 40%);
}
.hero__atmosphere-grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  mix-blend-mode: screen;
}

/* Embers — drifting upward warm particles */
.hero__embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ember {
  position: absolute;
  bottom: -10px;
  width: var(--ember-size, 3px);
  height: var(--ember-size, 3px);
  border-radius: 50%;
  background: var(--ember-color, var(--ember));
  box-shadow: 0 0 8px var(--ember-color, var(--ember)), 0 0 16px var(--ember-color, var(--ember));
  left: var(--ember-x, 50%);
  opacity: 0;
  animation: ember-rise var(--ember-duration, 7s) ease-out var(--ember-delay, 0s) infinite;
}
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.85; }
  60% { opacity: 0.55; }
  100% { transform: translateY(calc(-100vh - 40px)) translateX(var(--ember-drift, 20px)); opacity: 0; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease-calm) 0.2s forwards;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* Phoenix mark */
.hero__phoenix {
  width: clamp(120px, 14vw, 180px);
  height: clamp(120px, 14vw, 180px);
  margin: 0 auto 2.5rem;
  position: relative;
  opacity: 0;
  animation: phoenix-rise 1.2s var(--ease-calm) 0.4s forwards;
  transition: transform 0.4s var(--ease-calm);
  will-change: transform;
}
.hero__phoenix img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(255,110,5,0.4)) drop-shadow(0 0 60px rgba(255,26,13,0.2));
}
.hero__phoenix::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, rgba(255,110,5,0.35) 0%, transparent 65%);
  z-index: -1;
  animation: phoenix-breathe 4s ease-in-out infinite;
}
@keyframes phoenix-rise {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phoenix-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Hero title — the locked line */
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--paper);
  margin-bottom: 1.75rem;
}
.hero__title .line {
  display: block;
  opacity: 0;
  animation: fade-up 1s var(--ease-calm) forwards;
}
.hero__title .line:nth-child(1) { animation-delay: 0.7s; }
.hero__title .line:nth-child(2) {
  animation-delay: 1.0s;
  font-style: italic;
  color: var(--gold-soft);
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up-soft {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.4vw + 0.5rem, 1.375rem);
  line-height: 1.5;
  color: var(--light-body);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  opacity: 0;
  animation: fade-up 1s var(--ease-calm) 1.3s forwards;
}

.hero__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  animation: fade-up 1s var(--ease-calm) 1.6s forwards;
}

.hero__scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--light-muted);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  opacity: 0;
  animation: fade-up 1s var(--ease-calm) 2.2s forwards, scroll-bob 2.8s ease-in-out infinite 3.2s;
  z-index: 3;
}
.hero__scroll-cue::after {
  content: '';
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--light-muted) 0%, transparent 100%);
}
@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ================================================================

/* ================================================================
   v8 HERO — seamless fade-out into v7 cream background.
   Overrides the hard-edge bottom of the dark hero so it dissolves
   smoothly into the cream paper of the rest of the homepage.
   Also softens the "Scroll to begin" cue per the merge plan.
   ================================================================ */
.hero {
  /* Slight bottom padding tweak to give the fade more room to breathe */
  padding-bottom: 8rem;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(26, 19, 16, 0) 0%,
    rgba(26, 19, 16, 0.15) 25%,
    rgba(38, 28, 22, 0.45) 50%,
    rgba(80, 55, 38, 0.75) 75%,
    var(--bg) 100%
  );
}
/* Soften the scroll cue */
.hero__scroll-cue {
  opacity: 0.35;
  font-size: 0.7rem;
}


/* ================================================================
   18. SERVICES OVERVIEW PAGE
   ================================================================ */
.page-hero {
  padding: 10rem 0 5rem;
  background: var(--paper);
  text-align: center;
  position: relative;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-page-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.page-hero__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-md);
  color: var(--ink-body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

/* The "Brand & Presence" group lead-in */
.group-lead {
  padding: 2rem 0 0;
  text-align: center;
  background: var(--paper);
}
.group-lead__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--ember);
}

/* Service blocks (the alternating image-content layout) */
.service-block {
  padding: var(--section-y-tight) 0;
  background: var(--paper);
}
.service-block + .service-block { padding-top: 0; }
.service-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.service-block:nth-child(even) .service-block__inner {
  grid-template-areas: "content visual";
}
.service-block:nth-child(even) .service-block__visual { grid-area: visual; }
.service-block:nth-child(even) .service-block__content { grid-area: content; }
.service-block:nth-child(odd) .service-block__inner {
  grid-template-areas: "visual content";
}
.service-block:nth-child(odd) .service-block__visual { grid-area: visual; }
.service-block:nth-child(odd) .service-block__content { grid-area: content; }

@media (max-width: 880px) {
  .service-block__inner,
  .service-block:nth-child(even) .service-block__inner,
  .service-block:nth-child(odd) .service-block__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "content";
    gap: 2rem;
  }
}

.service-block__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--paper-warm);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-block__visual--web {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.service-block__visual--brand {
  background: linear-gradient(135deg, #FFE3D5 0%, #FFD2B8 100%);
}
.service-block__visual--seo {
  background: linear-gradient(135deg, #F4EBE0 0%, #E8D9C4 100%);
}
.service-block__visual--social {
  background: linear-gradient(135deg, #FFE0DC 0%, #FFB8B0 100%);
}
.service-block__visual--custom {
  background: linear-gradient(135deg, #2A201A 0%, #4A3528 100%);
  color: var(--paper);
}

.service-block__visual-icon {
  width: 30%;
  max-width: 140px;
  color: var(--ember);
  opacity: 0.85;
}
.service-block__visual--custom .service-block__visual-icon { color: var(--gold); }

/* === Photo support inside service-block__visual ===
   When a real photo is uploaded via the customizer, it fills the visual
   area edge-to-edge. The icon shrinks into a corner badge so the brand
   cue stays present. When no photo is uploaded, the photo-placeholder
   block from rinato_photo_or_placeholder() takes its place. */
.service-block__visual img,
.service-block__visual .photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 1;
}
.service-block__visual .photo-placeholder { padding: 1.5rem; }
.service-block__visual--has-photo .service-block__visual-icon {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  max-width: none;
  padding: 12px;
  border-radius: 50%;
  background: rgba(251, 248, 244, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(26,19,16,0.18);
  opacity: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-block__visual--has-photo .service-block__visual-icon svg {
  width: 100%;
  height: 100%;
}
/* Custom solutions (dark) keeps gold icon background subtly different */
.service-block__visual--custom.service-block__visual--has-photo .service-block__visual-icon {
  background: rgba(26, 19, 16, 0.85);
  color: var(--gold);
}

.service-block__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-block__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.service-block__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.service-block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.service-block__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-block__body p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-body);
}
.service-block__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0;
}
.service-block__list li {
  font-size: 0.875rem;
  color: var(--ink-body);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.25rem;
}
.service-block__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}
.service-block__cta {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9375rem;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-soft);
}
.service-block__cta:hover { color: var(--ember); }
.service-block__cta-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-calm);
}
.service-block__cta:hover .service-block__cta-arrow { transform: translateX(4px); }

/* ================================================================
   19. POLARIZATION BREAK
   ================================================================ */
.polarize {
  padding: var(--section-y-loose) 0;
  background: var(--coal);
  color: var(--light-body);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.polarize__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.polarize__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}
.polarize__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 1.5rem;
}
.polarize__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.polarize__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--light-body);
  max-width: 560px;
  margin: 0 auto;
}

/* Featured custom-solutions service block (after polarize) */
.service-block--featured {
  padding: var(--section-y) 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  position: relative;
}
.service-block--featured .service-block__inner {
  grid-template-columns: 1.3fr 1fr;
}
@media (max-width: 880px) {
  .service-block--featured .service-block__inner { grid-template-columns: 1fr; }
}
.service-block--featured .service-block__visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1A1310 0%, #3A2D24 50%, #5C4530 100%);
}
.service-block--featured .service-block__title {
  font-size: clamp(2.25rem, 3vw + 0.5rem, 3rem);
}
.service-block__shipped {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--ember);
  padding-left: 1rem;
  margin: 1rem 0;
}

/* ================================================================
   20. ONE STUDIO MANY DOORS — small reflective section
   ================================================================ */
.studio-doors {
  padding: var(--section-y) 0;
  background: var(--paper);
  text-align: center;
}
.studio-doors__inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.studio-doors__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.studio-doors__title em {
  font-style: italic;
  color: var(--ember);
}
.studio-doors__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.studio-doors__body strong {
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
}
.studio-doors__inner::before, .studio-doors__inner::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--paper-line);
  margin: 0 auto;
  transition: width 1.2s var(--ease-calm);
}
.studio-doors__inner::before { margin-bottom: 2.5rem; }
.studio-doors__inner::after { margin-top: 2.5rem; }
.studio-doors.is-revealed .studio-doors__inner::before,
.studio-doors.is-revealed .studio-doors__inner::after { width: 120px; }

/* ================================================================

/* ================================================================
   21. REVEAL ANIMATIONS — applied via JS
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-calm), transform 0.9s var(--ease-calm);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal--from-left {
  transform: translateX(-40px);
}
.reveal--from-left.is-revealed {
  transform: translateX(0);
}
.reveal--from-right {
  transform: translateX(40px);
}
.reveal--from-right.is-revealed {
  transform: translateX(0);
}
.reveal--soft {
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-calm), transform 0.7s var(--ease-calm);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-calm), transform 0.7s var(--ease-calm);
}
.stagger-children.is-revealed > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.0s; }
.stagger-children.is-revealed > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.stagger-children.is-revealed > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.stagger-children.is-revealed > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.36s; }
.stagger-children.is-revealed > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.48s; }
.stagger-children.is-revealed > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.60s; }
.stagger-children.is-revealed > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.72s; }

/* ================================================================
   22. RESPONSIVE FINE-TUNING
   ================================================================ */
@media (max-width: 640px) {
  .hero { min-height: 90vh; padding: 7rem 0 4rem; }
  .hero__phoenix { width: 110px; height: 110px; }
  .services-preview__head { margin-bottom: 2.5rem; }
  .work-grid { gap: 1.5rem; }
  .principle__number { font-size: 2.5rem; }
}

/* Print styles — kept minimal */
@media print {
  .site-header, .site-footer, .loading-screen, .hero__embers, .menu-toggle { display: none !important; }
  body { background: white; color: black; }
  .hero, .surface-coal, .surface-coal-warming { background: white; color: black; }
  .hero h1, .hero h2, .surface-coal h1, .surface-coal h2 { color: black; }
}

/* ================================================================
   23. PHOTO PLACEHOLDER (carried from v7 for the customizer)
   ================================================================ */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 2rem;
  background: var(--paper-warm);
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  text-align: center;
}
.photo-placeholder__icon { width: 32px; height: 32px; opacity: 0.4; }
.photo-placeholder__title { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; }
.photo-placeholder__hint { font-size: 0.75rem; color: var(--ink-muted); }


/* ================================================================

/* ================================================================
   24. SERVICE DETAIL PAGES — shared component library
       Used across web-design, brand-identity, seo-marketing,
       custom-solutions, social-media
   ================================================================ */

/* — Service detail hero (with photo) — */
.sd-hero {
  padding: 9rem 0 var(--section-y-tight);
  background: var(--paper);
  position: relative;
}
.sd-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 880px) {
  .sd-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sd-hero { padding-top: 7.5rem; }
}
.sd-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sd-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.sd-hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.sd-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
}
.sd-hero__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sd-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.2vw + 0.5rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink-body);
}
.sd-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: var(--shadow-lg);
}
.sd-hero__visual img,
.sd-hero__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-hero__visual .photo-placeholder {
  border-radius: 0;
  border: none;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.sd-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-xl);
  pointer-events: none;
}
/* Decorative warm glow that sits behind the visual */
.sd-hero__visual-glow {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(circle at 60% 40%, rgba(255,110,5,0.08) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

/* — Definition section (with side photo) — */
.sd-definition {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
}
.sd-definition__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.sd-definition.sd-definition--alt .sd-definition__inner {
  grid-template-columns: 1.1fr 1fr;
}
.sd-definition.sd-definition--alt .sd-definition__visual {
  order: 2;
}
@media (max-width: 880px) {
  .sd-definition__inner,
  .sd-definition.sd-definition--alt .sd-definition__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sd-definition.sd-definition--alt .sd-definition__visual { order: 0; }
}
.sd-definition__visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-ivory);
  position: relative;
}
.sd-definition__visual img,
.sd-definition__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-definition__visual .photo-placeholder {
  border-radius: 0;
  border: none;
  background: linear-gradient(135deg, var(--paper-ivory) 0%, var(--paper-warm) 100%);
}
.sd-definition__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 520px;
}
.sd-definition__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.sd-definition__title em {
  font-style: italic;
  color: var(--ember);
}
.sd-definition__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 1rem;
}
.sd-definition__body p:last-child { margin-bottom: 0; }
.sd-definition__body em { font-style: italic; color: var(--ink); }

/* — What's Included — grid of capability blocks — */
.sd-included {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.sd-included__head {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.sd-included__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.sd-included__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.5;
}
.sd-included__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .sd-included__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sd-included__grid { grid-template-columns: 1fr; } }

.sd-block {
  padding: 1.75rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  background: var(--paper-ivory);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: all 0.5s var(--ease-calm);
  position: relative;
  overflow: hidden;
}
.sd-block:hover {
  border-color: rgba(255,110,5,0.25);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.sd-block__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--ember);
  letter-spacing: 0.04em;
}
.sd-block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--ink);
}
.sd-block__body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-body);
}

/* — Process — 5-step process with vertical line — */
.sd-process {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
}
.sd-process__head {
  text-align: center;
  margin-bottom: 4rem;
}
.sd-process__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.sd-process__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}
.sd-process__list {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.sd-process__list::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(to bottom, var(--ember) 0%, var(--ember-soft) 50%, var(--paper-line) 100%);
  opacity: 0.4;
}
.sd-step {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.5rem 0;
  position: relative;
}
.sd-step__num {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ember);
  position: relative;
  z-index: 1;
  transition: all 0.5s var(--ease-calm);
}
.sd-step:hover .sd-step__num {
  background: var(--ember);
  color: var(--paper);
  border-color: var(--ember);
  box-shadow: 0 4px 20px rgba(255,110,5,0.3);
}
.sd-step__content { flex: 1; padding-top: 0.625rem; }
.sd-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.sd-step__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-body);
}

/* — Recent Work (related case studies) — */
.sd-recent {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.sd-recent__head {
  text-align: center;
  margin-bottom: 3rem;
}
.sd-recent__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  margin-bottom: 0.625rem;
}
.sd-recent__intro {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
}
.sd-recent__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) { .sd-recent__grid { grid-template-columns: 1fr; } }

/* — Pricing/Engagement — */
.sd-pricing {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
}
.sd-pricing__inner {
  max-width: 760px;
  margin: 0 auto;
}
.sd-pricing__head {
  text-align: center;
  margin-bottom: 3rem;
}
.sd-pricing__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  margin-bottom: 1rem;
}
.sd-pricing__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 50ch;
  margin: 0 auto;
}
.sd-pricing__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 640px) { .sd-pricing__cards { grid-template-columns: 1fr; } }

.sd-price-card {
  padding: 2rem;
  background: var(--paper-ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sd-price-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
}
.sd-price-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.sd-price-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-body);
  flex: 1;
}
.sd-price-card__note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* — FAQ — accordion-style — */
.sd-faq {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.sd-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}
.sd-faq__head {
  text-align: center;
  margin-bottom: 3rem;
}
.sd-faq__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  margin-bottom: 0.625rem;
}
.sd-faq__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
}
.sd-faq__list {
  border-top: 1px solid var(--paper-line);
}
.sd-faq__item {
  border-bottom: 1px solid var(--paper-line);
  padding: 1.5rem 0;
}
.sd-faq__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.625rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.sd-faq__q::before {
  content: 'Q.';
  font-style: italic;
  color: var(--ember);
  flex-shrink: 0;
}
.sd-faq__a {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-body);
  padding-left: 2rem;
}
.sd-faq__a strong { color: var(--ink); }

/* — Real Builds (Custom Solutions only) — */
.sd-builds {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.sd-builds__head {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.sd-builds__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  margin-bottom: 1rem;
}
.sd-builds__title em {
  font-style: italic;
  color: var(--ember);
}
.sd-builds__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.55;
}
.sd-builds__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) { .sd-builds__grid { grid-template-columns: 1fr; } }

.sd-build {
  background: var(--paper-ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.5s var(--ease-calm);
}
.sd-build:hover {
  border-color: rgba(255,110,5,0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.sd-build__visual {
  aspect-ratio: 16 / 10;
  background: var(--paper-warm);
  overflow: hidden;
  position: relative;
}
.sd-build__visual img,
.sd-build__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-build__visual .photo-placeholder {
  border-radius: 0;
  border: none;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.sd-build__body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.sd-build__sector {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.5rem;
}
.sd-build__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.625rem;
}
.sd-build__body p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Custom Solutions — featured pricing card variant */
.sd-pricing--custom .sd-price-card--country {
  background: linear-gradient(135deg, var(--paper-ivory) 0%, var(--paper-warm) 100%);
  border-color: rgba(255,110,5,0.18);
  position: relative;
}
.sd-pricing--custom .sd-price-card--country::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--grad-flame);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}


/* ================================================================
   24. EDITORIAL PHOTO BREAK
   A full-width atmospheric photo that breaks rhythm between sections.
   Used on every service detail page.
   ================================================================ */
.editorial-break {
  padding: var(--section-y-tight) 0;
  background: var(--paper);
  position: relative;
}
.editorial-break--warm {
  background: var(--paper-warm);
}
.editorial-break--coal {
  background: var(--coal);
}
.editorial-break__inner {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 21 / 9;
  background: var(--coal-soft);
}
.editorial-break__inner img,
.editorial-break__inner .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
}
.editorial-break__inner .photo-placeholder {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.editorial-break__caption {
  margin-top: 1.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.editorial-break__caption em {
  color: var(--ember);
  font-style: italic;
}

@media (max-width: 768px) {
  .editorial-break__inner { aspect-ratio: 4 / 3; }
}

/* ================================================================
   25. RECENT WORK SPOTLIGHT
   A larger, more visual recent-work treatment for service detail pages.
   ================================================================ */
.sd-recent--spotlight .sd-recent__grid {
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 880px) {
  .sd-recent--spotlight .sd-recent__grid { grid-template-columns: 1fr; }
}
.sd-recent__feature {
  display: block;
  background: var(--paper-ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.6s var(--ease-calm);
  position: relative;
}
.sd-recent__feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(255,110,5,0.3);
}
.sd-recent__feature-visual {
  aspect-ratio: 16 / 11;
  position: relative;
  background: var(--coal-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-recent__feature-visual img,
.sd-recent__feature-visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.sd-recent__feature-body {
  padding: 1.75rem 2rem 2rem;
}
.sd-recent__feature-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.sd-recent__feature-meta::before {
  content: '';
  width: 16px;
  height: 1px;
  background: currentColor;
}
.sd-recent__feature-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  margin-bottom: 0.625rem;
  color: var(--ink);
}
.sd-recent__feature-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-body);
  margin-bottom: 1rem;
}
.sd-recent__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease-soft);
}
.sd-recent__feature:hover .sd-recent__feature-cta { color: var(--ember); }

/* Side card — secondary case study */
.sd-recent__side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sd-recent__side-card {
  display: block;
  background: var(--paper-ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s var(--ease-calm);
  flex: 1;
}
.sd-recent__side-card:hover {
  border-color: rgba(255,110,5,0.3);
  background: var(--paper);
  transform: translateY(-2px);
}
.sd-recent__side-card .sd-recent__feature-meta {
  margin-bottom: 0.5rem;
}
.sd-recent__side-card .sd-recent__feature-title {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}
.sd-recent__side-card .sd-recent__feature-desc {
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

/* ================================================================

/* ================================================================
   26. WORK CARD WITH REAL PHOTO (override gradient for service detail)
   ================================================================ */
.work-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.work-card__photo img,
.work-card__photo .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}


/* ================================================================
   27. CASE STUDIES OVERVIEW PAGE
   Alternating large feature cards.
   ================================================================ */
.cs-list {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.cs-list__item {
  margin-bottom: var(--s-10);
}
.cs-list__item:last-child { margin-bottom: 0; }
.cs-list__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.cs-list__item:nth-child(even) .cs-list__inner {
  grid-template-areas: "content visual";
}
.cs-list__item:nth-child(even) .cs-list__visual { grid-area: visual; }
.cs-list__item:nth-child(even) .cs-list__content { grid-area: content; }
.cs-list__item:nth-child(odd) .cs-list__inner {
  grid-template-areas: "visual content";
}
.cs-list__item:nth-child(odd) .cs-list__visual { grid-area: visual; }
.cs-list__item:nth-child(odd) .cs-list__content { grid-area: content; }

@media (max-width: 880px) {
  .cs-list__inner,
  .cs-list__item:nth-child(even) .cs-list__inner,
  .cs-list__item:nth-child(odd) .cs-list__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "content";
    gap: 1.75rem;
  }
}

.cs-list__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--coal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-list__visual img,
.cs-list__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.cs-list__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-list__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.cs-list__meta::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.cs-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cs-list__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-list__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
}
.cs-list__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.cs-chip {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  color: var(--ink-body);
  border: 1px solid var(--paper-line);
}
.cs-list__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--t-fast) var(--ease-soft);
}
.cs-list__cta:hover { color: var(--ember); }
.cs-list__cta-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-calm);
}
.cs-list__cta:hover .cs-list__cta-arrow { transform: translateX(4px); }

/* ================================================================

/* ================================================================
   28. CASE STUDY DETAIL PAGE
   ================================================================ */
.cs-hero {
  padding: 9rem 0 4rem;
  background: var(--paper);
  position: relative;
}
.cs-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 880px) {
  .cs-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
}
.cs-hero__content { display: flex; flex-direction: column; gap: 1rem; }
.cs-hero__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.cs-hero__meta::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.cs-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cs-hero__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
  line-height: 1.5;
  color: var(--ink-body);
}
.cs-hero__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--coal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero__visual img,
.cs-hero__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}

/* Quick facts strip */
.cs-facts {
  background: var(--paper-warm);
  padding: 2.5rem 0;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.cs-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) {
  .cs-facts__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.cs-fact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.cs-fact__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
}
.cs-fact__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.3;
}

/* Long-form content sections */
.cs-section {
  padding: var(--section-y-tight) 0;
  background: var(--paper);
}
.cs-section--warm { background: var(--paper-warm); }
.cs-section__inner {
  max-width: 720px;
  margin: 0 auto;
}
.cs-section__inner--wide { max-width: 920px; }
.cs-section__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.cs-section__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.cs-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.cs-section__title em {
  font-style: italic;
  color: var(--ember);
}
.cs-section__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 1.25rem;
}
.cs-section__body p:last-child { margin-bottom: 0; }
.cs-section__body strong {
  font-weight: 500;
  color: var(--ink);
}
.cs-section__body em {
  font-style: italic;
}

/* Chapters layout */
.cs-chapters {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.cs-chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--paper-line);
}
.cs-chapter:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cs-chapter__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2.5rem;
  color: var(--ember);
  line-height: 1;
  min-width: 4rem;
}
.cs-chapter__content { display: flex; flex-direction: column; gap: 0.75rem; }
.cs-chapter__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  color: var(--ink);
}
.cs-chapter__body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-body);
}

/* Photo gallery — 3 photo grid */
.cs-gallery {
  padding: var(--section-y-tight) 0;
  background: var(--paper);
}
.cs-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 880px) {
  .cs-gallery__grid { grid-template-columns: 1fr; }
}
.cs-gallery__item {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--coal-soft);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-gallery__item img,
.cs-gallery__item .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.cs-gallery__item--wide {
  aspect-ratio: 16 / 11;
  grid-column: span 2;
}
@media (max-width: 880px) {
  .cs-gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 5; }
}

/* Outcome section — dark warming */
.cs-outcome {
  padding: var(--section-y) 0;
  background: var(--coal);
  color: var(--light-body);
  position: relative;
  overflow: hidden;
}
.cs-outcome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,110,5,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.cs-outcome__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.cs-outcome__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}
.cs-outcome__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3vw + 0.5rem, 2.75rem);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 1.5rem;
}
.cs-outcome__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-outcome__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cs-outcome__body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--light-body);
}
.cs-outcome__body strong {
  color: var(--paper);
  font-weight: 500;
}
.cs-outcome__body em {
  color: var(--gold-soft);
  font-style: italic;
}

/* Stack/tools panel */
.cs-stack {
  padding: var(--section-y-tight) 0;
  background: var(--paper-warm);
}
.cs-stack__inner {
  max-width: 920px;
  margin: 0 auto;
}
.cs-stack__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.cs-stack__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.cs-stack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.cs-stack__item {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  padding: 1.25rem;
  text-align: center;
}
.cs-stack__item-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.5rem;
  display: block;
}
.cs-stack__item-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
}

/* Pull quote */
.cs-quote {
  padding: var(--section-y) 0;
  background: var(--paper);
  text-align: center;
}
.cs-quote__inner {
  max-width: 720px;
  margin: 0 auto;
}
.cs-quote__mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  color: var(--ember);
  opacity: 0.6;
}
.cs-quote__mark svg { width: 100%; height: 100%; }
.cs-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  line-height: 1.4;
  color: var(--ink);
}
.cs-quote__text em {
  color: var(--ember);
  font-style: italic;
}

/* Next case study — chain effect */
.cs-next {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
  border-top: 1px solid var(--paper-line);
}
.cs-next__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.cs-next__label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--ember);
  margin-bottom: 1rem;
}
.cs-next__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 2.5rem 2rem;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  transition: all 0.5s var(--ease-calm);
}
.cs-next__link:hover {
  border-color: rgba(255,110,5,0.3);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.cs-next__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.cs-next__title em {
  font-style: italic;
  color: var(--ember);
}
.cs-next__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.cs-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--ember);
}
.cs-next__cta-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-calm);
}
.cs-next__link:hover .cs-next__cta-arrow { transform: translateX(4px); }


/* ================================================================

/* ================================================================
   29. ABOUT PAGE
   ================================================================ */

/* About hero — softer than service pages */
.about-hero {
  padding: 9rem 0 5rem;
  background: var(--paper);
  text-align: center;
}
.about-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}
.about-hero__eyebrow::before, .about-hero__eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-page-h1);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.about-hero__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 60ch;
  margin: 0 auto;
}

/* Why we exist — extends the homepage manifesto */
.why-exist {
  padding: var(--section-y-loose) 0;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.why-exist__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.why-exist__epigraph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
}
.why-exist__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--paper);
  margin-bottom: 2rem;
}
.why-exist__title em {
  font-style: italic;
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.why-exist__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}
.why-exist__body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--light-body);
}
.why-exist__body strong {
  color: var(--paper);
  font-weight: 500;
}
.why-exist__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  margin-top: 2.5rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* How we work — 5 principles */
.principles-5 {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.principles-5__head {
  text-align: center;
  margin-bottom: 4rem;
}
.principles-5__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.1;
}
.principles-5__title em {
  font-style: italic;
  color: var(--ember);
}
.principles-5__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .principles-5__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
@media (max-width: 480px) {
  .principles-5__grid { grid-template-columns: 1fr; }
}

/* Founder block */
.founder {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
}
.founder__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .founder__inner { grid-template-columns: 1fr; gap: 2rem; }
}
.founder__visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--coal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder__visual img,
.founder__visual .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  border: 0;
  min-height: 0;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-line) 100%);
}
.founder__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.founder__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.founder__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.founder__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.founder__title em { font-style: italic; color: var(--ember); }
.founder__body {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.founder__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-body);
}
.founder__body strong {
  font-weight: 500;
  color: var(--ink);
}

/* Working practice — list with editorial pacing */
.practice {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.practice__inner {
  max-width: 880px;
  margin: 0 auto;
}
.practice__head {
  text-align: center;
  margin-bottom: 3rem;
}
.practice__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.1;
}
.practice__title em { font-style: italic; color: var(--ember); }
.practice__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 1rem auto 0;
}
.practice__list {
  display: flex;
  flex-direction: column;
}
.practice__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--paper-line);
  align-items: start;
}
.practice__item:last-child { border-bottom: 0; }
.practice__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--ember);
  line-height: 1;
  min-width: 3rem;
}
.practice__content { display: flex; flex-direction: column; gap: 0.5rem; }
.practice__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.practice__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-body);
}

/* Working belief — final pull quote on About page */
.belief {
  padding: var(--section-y) 0;
  background: var(--paper-warm);
  text-align: center;
}
.belief__inner {
  max-width: 760px;
  margin: 0 auto;
}
.belief__mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  color: var(--ember);
  opacity: 0.6;
}
.belief__mark svg { width: 100%; height: 100%; }
.belief__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: 1.4;
  color: var(--ink);
}
.belief__text em {
  color: var(--ember);
  font-style: italic;
}

/* Where we work — compact map block */
.where-compact {
  padding: var(--section-y-tight) 0;
  background: var(--paper);
  text-align: center;
}
.where-compact__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.where-compact__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.where-compact__city {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.where-compact__city::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}
.where-compact__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-body);
  max-width: 50ch;
  margin: 0 auto;
}


/* ================================================================

/* ================================================================
   v8 UTILITY CLASSES — eyebrow, container variants, section padding,
   surface-coal-warming (used in manifesto-style sections), photo placeholders.
   ================================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.eyebrow--centered { justify-content: center; }
.eyebrow--centered::before { display: none; }

.eyebrow--italic {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-base);
  color: var(--ember);
}
.eyebrow--italic::before { display: none; }

/* Lead text */
.lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.625rem);
  line-height: 1.45;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-body);
  max-width: 38ch;
}

/* Display gradient text */
   4. LAYOUT — containers, grids, sections
   ================================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--tight { max-width: var(--container-tight); }
.container--prose { max-width: var(--container-prose); }

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}
.section--tight { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }
.section--loose { padding-top: var(--section-y-loose); padding-bottom: var(--section-y-loose); }
.section--no-top { padding-top: 0; }
.section--no-bottom { padding-bottom: 0; }

/* Surface treatments */
.surface-paper { background: var(--paper); color: var(--ink-body); }
.surface-paper-warm { background: var(--paper-warm); color: var(--ink-body); }
.surface-coal {
  background: var(--coal);
  color: var(--light-body);
  position: relative;
  overflow: hidden;
}
.surface-coal h1, .surface-coal h2, .surface-coal h3, .surface-coal h4 {
  color: var(--light-primary);
}
.surface-coal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-firelight);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.surface-coal > * { position: relative; z-index: 1; }

/* Warming variant — the manifesto-style background that warms on scroll */
.surface-coal-warming {
  background: var(--coal);
  color: var(--light-body);
  position: relative;
  overflow: hidden;
  --warm-amount: 0;
}
.surface-coal-warming::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% calc(100% - 20%),
    rgba(255, 110, 5, calc(0.18 * var(--warm-amount))) 0%,
    rgba(255, 26, 13, calc(0.08 * var(--warm-amount))) 30%,
    transparent 65%
  );
  pointer-events: none;
  transition: opacity 0.6s var(--ease-calm);
  z-index: 0;
}
.surface-coal-warming h1, .surface-coal-warming h2, .surface-coal-warming h3, .surface-coal-warming h4 {
  color: var(--light-primary);
}
.surface-coal-warming > * { position: relative; z-index: 1; }

/* ================================================================
   5. UTILITY CLASSES
   ================================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }

/* Stack utility — vertical rhythm */
.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-6); }
.stack-xl > * + * { margin-top: var(--s-8); }

/* Hairline divider */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--paper-line) 30%, var(--paper-line) 70%, transparent 100%);
  margin: var(--s-8) 0;
}
.surface-coal .divider, .surface-coal-warming .divider {
  background: linear-gradient(90deg, transparent 0%, var(--coal-line) 30%, var(--coal-line) 70%, transparent 100%);
}

/* Center divider that draws on scroll */
.divider-draw {
  position: relative;
  height: 1px;
  margin: var(--s-7) auto;
  width: 100%;
  max-width: 320px;
/* ================================================================
   23. PHOTO PLACEHOLDER (carried from v7 for the customizer)
   ================================================================ */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 2rem;
  background: var(--paper-warm);
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  text-align: center;
}
.photo-placeholder__icon { width: 32px; height: 32px; opacity: 0.4; }
.photo-placeholder__title { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; }
.photo-placeholder__hint { font-size: 0.75rem; color: var(--ink-muted); }


/* ================================================================
.lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.625rem);
  line-height: 1.45;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-body);
  max-width: 38ch;
}

/* Display gradient text */
.text-gradient {
  background: var(--grad-flame-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Italic accent text (like the verb device) */
.italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}


/* ================================================================
   v8 → v7 BUTTON COMPAT — buttons inside the dark hero / dark surfaces.
   Inverts btn--ghost so it remains visible on the dark hero background.
   ================================================================ */
.hero .btn--ghost,
.surface-coal .btn--ghost,
.surface-coal-warming .btn--ghost {
  color: var(--paper);
  border-bottom-color: rgba(251, 248, 244, 0.4);
}
.hero .btn--ghost:hover,
.surface-coal .btn--ghost:hover,
.surface-coal-warming .btn--ghost:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.hero .btn--primary {
  background: var(--text);
  color: var(--paper);
}
.hero .btn--primary:hover {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-glow-warm);
}


/* ================================================================
   ====================================================================
   v9.3 — BLOG STYLES
   Editorial blog: listing page, single post, archive, related posts.
   ====================================================================
   ================================================================ */

/* Container narrow used for prose */
.container--narrow { max-width: 880px; margin-left: auto; margin-right: auto; padding-left: clamp(1.5rem, 5vw, 2rem); padding-right: clamp(1.5rem, 5vw, 2rem); }
.container--prose { max-width: 680px; margin-left: auto; margin-right: auto; padding-left: clamp(1.5rem, 5vw, 2rem); padding-right: clamp(1.5rem, 5vw, 2rem); }

/* ----------------------------------------------------------------
   Blog meta — date, category, reading time strip
   ---------------------------------------------------------------- */
.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}
.blog-meta--small { font-size: 0.75rem; gap: 0.5rem; margin-bottom: 0.875rem; }
.blog-meta__category {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7em;
  color: var(--coral);
}
.blog-meta__dot { color: var(--text-muted); opacity: 0.5; }
.blog-meta__date, .blog-meta__readtime {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05em;
}

/* ----------------------------------------------------------------
   Featured (latest) post on blog listing
   ---------------------------------------------------------------- */
.blog-featured {
  padding: clamp(2rem, 4vw, 4rem) 0;
}
.blog-featured__link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.blog-featured__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 780px) {
  .blog-featured__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.blog-featured__visual {
  position: relative;
  aspect-ratio: 4/3;
  max-height: 480px;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-warm);
  box-shadow: var(--shadow-md);
  transition: box-shadow .5s var(--ease-calm), transform .5s var(--ease-calm);
}
@media (max-width: 780px) {
  .blog-featured__visual {
    aspect-ratio: 16/9;
    max-height: 360px;
  }
}
.blog-featured__link:hover .blog-featured__visual {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.blog-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-featured__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,208,85,0.18) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg-warm) 0%, #f0e8dc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-featured__placeholder-mark {
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  opacity: 0.22;
  filter: drop-shadow(0 4px 14px rgba(255, 110, 5, 0.15));
}
.blog-featured__content {
  padding: 0.5rem 0;
}
.blog-featured__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0.875rem 0 1rem;
  transition: color .3s ease;
}
.blog-featured__title em { font-style: italic; font-weight: 400; }
.blog-featured__link:hover .blog-featured__title { color: var(--coral); }
.blog-featured__excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 30em;
}

/* ----------------------------------------------------------------
   Blog grid (rest of posts on listing + related posts)
   ---------------------------------------------------------------- */
.blog-grid-section {
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 3rem;
}
/* Cap at 3 columns on wider screens so cards don't get too wide */
@media (min-width: 1080px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1079px) and (min-width: 620px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 619px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card { display: flex; flex-direction: column; }
.blog-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .4s var(--ease-calm);
}
.blog-card__link:hover { transform: translateY(-4px); }
.blog-card__visual {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-warm);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  transition: box-shadow .4s var(--ease-calm);
}
.blog-card__link:hover .blog-card__visual { box-shadow: var(--shadow-md); }
.blog-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease-calm);
}
.blog-card__link:hover .blog-card__img { transform: scale(1.04); }
.blog-card__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,208,85,0.14) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg-warm) 0%, #f2eadd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card__placeholder-mark {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  opacity: 0.18;
}
.blog-card__content { display: flex; flex-direction: column; flex: 1; }
.blog-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 0.625rem;
  transition: color .3s ease;
}
.blog-card__link:hover .blog-card__title { color: var(--coral); }
.blog-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  flex: 1;
}

/* link-arrow size variant */
.link-arrow--small { font-size: 0.875rem; }

/* ----------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------- */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.blog-pagination__item .page-numbers,
.blog-pagination__item span,
.blog-pagination__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.blog-pagination__item a:hover {
  color: var(--coral);
  border-color: var(--border);
  background: var(--bg-warm);
}
.blog-pagination__item .current {
  color: var(--coral);
  border-color: var(--coral);
  background: rgba(255, 26, 13, 0.04);
}

/* ----------------------------------------------------------------
   Empty state — no posts yet
   ---------------------------------------------------------------- */
.blog-empty { padding: clamp(3rem, 6vw, 6rem) 0; }
.blog-empty__inner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.blog-empty__phoenix {
  width: 70px;
  margin: 0 auto 1.75rem;
  opacity: 0.65;
  filter: drop-shadow(0 4px 16px rgba(255, 110, 5, 0.18));
}
.blog-empty__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 1rem;
}
.blog-empty__title em { font-style: italic; font-weight: 400; color: var(--coral); }
.blog-empty__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* ================================================================
   SINGLE POST — article layout
   ================================================================ */
.article-hero {
  padding: 200px 0 clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 780px) {
  .article-hero { padding-top: 140px; }
}
.article-hero__category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  text-decoration: none;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--coral);
  border-radius: 100px;
  margin-bottom: 1.5rem;
  transition: all .25s ease;
}
.article-hero__category:hover {
  background: var(--coral);
  color: #fff;
}
.article-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 auto 1.75rem;
  max-width: 18em;
}
.article-hero__title em { font-style: italic; font-weight: 400; }
.article-hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.article-hero__meta time, .article-hero__meta span:not(.article-hero__meta-dot) {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05em;
}
.article-hero__meta-dot { opacity: 0.5; }

.article-featured-image {
  padding: 1rem 0 clamp(2rem, 4vw, 3.5rem);
}
.article-featured-image__figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.article-featured-image__img {
  width: 100%;
  height: auto;
  display: block;
}
.article-featured-image__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1rem;
  padding: 0 1rem;
}

.article-body {
  padding: 0 0 clamp(3rem, 5vw, 4.5rem);
}

/* ----------------------------------------------------------------
   Article prose — the actual content typography.
   Uses higher specificity to override Gutenberg block defaults.
   Absolute pixel sizes so body text doesn't scale unexpectedly.
   ---------------------------------------------------------------- */
.article-prose,
.article-prose p,
.article-prose .wp-block-paragraph,
.article-body .wp-block-paragraph {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  font-weight: 400;
}
.article-prose > * { margin-top: 0; margin-bottom: 1.5em; }
.article-prose > *:last-child { margin-bottom: 0; }
/* Override any Gutenberg `has-X-font-size` classes that come baked into post content */
.article-prose p[class*="has-"][class*="-font-size"] {
  font-size: 17px !important;
  line-height: 1.75 !important;
}

/* Drop cap on first paragraph */
.article-prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 4em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.12em 0 0;
  color: var(--coral);
}

/* Headings — covers h1 through h6 inside post content.
   The h1 is intentionally smaller than the article-hero__title because
   the hero already shows the post title; an h1 inside the body is a
   structural choice by the author, not the title. */
.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4,
.article-prose h5,
.article-prose h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-top: 2em;
  margin-bottom: 0.65em;
  line-height: 1.25;
}
.article-prose h1 { font-size: 2.25rem; }
.article-prose h2 { font-size: 1.875rem; }
.article-prose h3 { font-size: 1.5rem; }
.article-prose h4 { font-size: 1.25rem; }
.article-prose h5 { font-size: 1.125rem; }
.article-prose h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.article-prose h1 em,
.article-prose h2 em,
.article-prose h3 em,
.article-prose h4 em,
.article-prose h5 em,
.article-prose h6 em { font-style: italic; font-weight: 400; color: var(--coral); }

/* Italic subtle */
.article-prose em { font-style: italic; }
.article-prose strong { font-weight: 600; color: var(--text); }

/* Links */
.article-prose a {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 26, 13, 0.3);
  transition: text-decoration-color .25s ease;
}
.article-prose a:hover { text-decoration-color: var(--coral); }

/* Lists */
.article-prose ul,
.article-prose ol { padding-left: 1.5em; }
.article-prose ul li,
.article-prose ol li { margin-bottom: 0.5em; padding-left: 0.25em; }
.article-prose ul li::marker { color: var(--coral); }

/* Blockquote — the editorial pull quote */
.article-prose blockquote {
  border-left: 3px solid var(--coral);
  padding: 0.5em 0 0.5em 1.5em;
  margin: 2em 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--text);
}
.article-prose blockquote p { margin: 0; }
.article-prose blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* Code & pre */
.article-prose code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--bg-warm);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  color: var(--coral);
  border: 1px solid var(--border);
}
.article-prose pre {
  background: var(--text);
  color: var(--paper);
  padding: 1.5em;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.article-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Images in content */
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 2em auto;
}
.article-prose figure { margin: 2em 0; }
.article-prose figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.75em;
}

/* Horizontal rule */
.article-prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
  margin: 3em 0;
}

/* WordPress page pagination */
.article-pagination {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.article-pagination a {
  color: var(--coral);
  text-decoration: none;
  margin-right: 0.5em;
  padding: 0.25em 0.625em;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all .2s ease;
}
.article-pagination a:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

/* ----------------------------------------------------------------
   Article footer — tags + byline
   ---------------------------------------------------------------- */
.article-footer { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.article-tags {
  margin-bottom: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.article-tags__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.875rem;
}
.article-tags__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.article-tags__tag {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  padding: 0.375rem 0.875rem;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all .2s ease;
}
.article-tags__tag:hover {
  color: var(--coral);
  border-color: var(--coral);
  background: rgba(255, 26, 13, 0.04);
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-warm);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.article-byline__phoenix {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-byline__phoenix img { width: 100%; height: 100%; object-fit: contain; }
.article-byline__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text);
}
.article-byline__role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

/* ----------------------------------------------------------------
   Related posts
   ---------------------------------------------------------------- */
.article-related {
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.article-related__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0.875rem 0 2.5rem;
}
.article-related__title em { font-style: italic; font-weight: 400; }

/* WordPress core block compatibility */
.article-prose .alignwide { max-width: 800px; margin-left: auto; margin-right: auto; }
.article-prose .alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.article-prose .alignleft { float: left; margin-right: 1.5em; max-width: 50%; }
.article-prose .alignright { float: right; margin-left: 1.5em; max-width: 50%; }
.article-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }


/* ================================================================
   ====================================================================
   v9.3 — SOFTER SECTION TRANSITIONS
   Goal: stop sections feeling stacked and static. Make them flow.

   Mechanism:
   1. The hard gradient-divider line is replaced with a wider, softer
      glow transition that bleeds across section boundaries.
   2. Sections gain a subtle ::before/::after that fades into adjacent
      sections so the cut between them is buttery rather than sharp.
   3. Fade-in animations earlier + softer easing curve (longer arc).
   4. Section content gets a subtle "rise" as it enters viewport.
   5. Accent particle/orb in the transition zone for extra warmth.
   ====================================================================
   ================================================================ */

/* --- A. Soften the gradient-divider --- */
.gradient-divider {
  height: 80px !important;
  background: none !important;
  border: none !important;
  position: relative;
  margin: -40px 0 !important;     /* Pulls adjacent sections to overlap */
  z-index: 5;
  pointer-events: none;
  opacity: 1 !important;
}
.gradient-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 110, 5, 0.06) 20%,
    rgba(255, 110, 5, 0.18) 50%,
    rgba(255, 110, 5, 0.06) 80%,
    transparent 100%
  );
}
.gradient-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0.32;
  box-shadow:
    0 0 12px rgba(255, 110, 5, 0.35),
    0 0 24px rgba(255, 208, 85, 0.18);
}

/* --- B. Soften section transition by adding a subtle glow at the
   top and bottom of each major homepage section. This makes the
   sections breathe into each other. --- */
.philosophy,
.services,
.work {
  position: relative;
}
.philosophy::after,
.services::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 208, 85, 0.025) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.services::before {
  /* Top glow already exists for visual orb. Augment with subtle warm glow at top */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,110,5,0.04) 0%, transparent 50%),
    var(--bg);
}

/* --- C. Earlier and softer fade-in. Make the curve deeper so motion
   feels like a slow tide rolling in, not a snap. --- */
.motion-ready .fade-in:not(.visible) {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.motion-ready .fade-in-left:not(.visible) {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.motion-ready .fade-in-right:not(.visible) {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- D. Subtle cascade — children of a fade-in section enter with
   a small stagger so they feel like they're flowing in rather than
   appearing all at once. --- */
.motion-ready .services__grid .fade-in:nth-child(1) { transition-delay: 0s; }
.motion-ready .services__grid .fade-in:nth-child(2) { transition-delay: 0.08s; }
.motion-ready .services__grid .fade-in:nth-child(3) { transition-delay: 0.16s; }
.motion-ready .services__grid .fade-in:nth-child(4) { transition-delay: 0.24s; }
.motion-ready .services__grid .fade-in:nth-child(5) { transition-delay: 0.32s; }

.motion-ready .work__grid .fade-in:nth-child(1) { transition-delay: 0s; }
.motion-ready .work__grid .fade-in:nth-child(2) { transition-delay: 0.1s; }
.motion-ready .work__grid .fade-in:nth-child(3) { transition-delay: 0.2s; }
.motion-ready .work__grid .fade-in:nth-child(4) { transition-delay: 0.3s; }

/* --- E. Section "lift" — when a section becomes visible, its
   content gently rises. Adds presence to the transition. --- */
.philosophy.section-active .philosophy__title,
.services.section-active .services__title,
.work.section-active .work__title {
  animation: section-rise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes section-rise {
  0% { opacity: 0.85; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- F. Hero exit smoothing — when leaving the dark hero, the cream
   below should feel like dawn breaking, not a sharp transition.
   Augments the existing .hero::after fade. --- */
.hero ~ .philosophy {
  /* Tiny additional warmth to bridge from dark hero to cream */
  background:
    linear-gradient(to bottom, rgba(255, 208, 85, 0.02) 0%, transparent 100px),
    var(--bg);
}

/* --- G. Reduced motion respect — keep the ember dot on the divider
   but drop the rise/cascade animations. --- */
@media (prefers-reduced-motion: reduce) {
  .philosophy.section-active .philosophy__title,
  .services.section-active .services__title,
  .work.section-active .work__title {
    animation: none;
  }
  .motion-ready .services__grid .fade-in,
  .motion-ready .work__grid .fade-in { transition-delay: 0s !important; }
}