/* ════════════════════════════════════════════════════════════
   BLACK FOUNDRY DIGITAL — v3.css
   V3.0 — Light premium system. Loaded AFTER main.css.

   Direction: macOS-inspired. Warm whites, layered panels,
   soft shadows, pill CTAs, ember orange as a precision accent.
   Deep black reserved for nav, footer, and premium contrast
   panels. Remove this stylesheet to restore the V2 dark system.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   V3.1 TOKENS — light system remap
   Grayscale tokens flip so V2 component rules
   resolve to light surfaces automatically.
   ════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Remapped V2 tokens */
  --color-charcoal:      #ffffff;            /* card / alt surfaces  */
  --color-surface:       #f3f1ec;            /* pressed / focus      */
  --color-text-primary:  #2e3238;            /* body text            */
  --color-text-muted:    #686d75;
  --color-text-dim:      #9a9da3;
  --color-border:        #e8e5df;
  --color-border-bright: #d6d2cb;

  /* V3 system */
  --paper:        #f6f5f2;                   /* page background      */
  --panel:        #ffffff;
  --ink:          #1a1c20;                   /* headlines            */
  --dark-panel:   #101113;                   /* premium dark blocks  */
  --line:         rgba(26, 28, 32, 0.08);
  --line-strong:  rgba(26, 28, 32, 0.16);
  --on-dark:      rgba(255, 255, 255, 0.72);
  --on-dark-dim:  rgba(255, 255, 255, 0.58); /* ≥4.5:1 on the dark footer */

  --radius-lg:    28px;
  --radius-md:    16px;
  --radius-sm:    10px;
  --radius-pill:  999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05), 0 2px 10px rgba(20, 22, 26, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 22, 26, 0.04), 0 14px 36px rgba(20, 22, 26, 0.08);
  --shadow-lg: 0 4px 12px rgba(20, 22, 26, 0.05), 0 28px 70px rgba(20, 22, 26, 0.13);
  --shadow-ember: 0 1px 2px rgba(208, 74, 8, 0.28), 0 8px 22px rgba(208, 74, 8, 0.22);
}

/* ════════════════════════════════════════════════
   V3.2 PAGE CANVAS
   Warm paper background with a slow, very subtle
   aurora wash that drifts as a living backdrop.
   ════════════════════════════════════════════════ */

html,
body {
  background: var(--paper);
  color: var(--color-text-primary);
}

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 38% at 18% 18%, rgba(208, 74, 8, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 46% 42% at 84% 26%, rgba(96, 110, 130, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 90%, rgba(208, 74, 8, 0.03) 0%, transparent 70%);
  animation: auroraDrift 38s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

::selection {
  background: rgba(208, 74, 8, 0.18);
  color: var(--ink);
}

/* ════════════════════════════════════════════════
   V3.3 NAVIGATION — dark glass bar
   ════════════════════════════════════════════════ */

.nav,
.nav--scrolled {
  background: rgba(13, 14, 16, 0.78);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.68);
}

.nav-link:hover,
.nav-link.active,
.nav-link:focus-visible {
  color: #ffffff;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-orange);
  transform: translateX(-50%) scale(0);
  transition: transform var(--t-base);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scale(1);
}

.nav-hamburger span { background: #ffffff; }

.nav-mobile {
  background: rgba(13, 14, 16, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Keep collapsed menu links out of the tab order (a11y).
     nav.js toggles visibility in sync with the collapse animation. */
  visibility: hidden;
}

.nav-mobile.is-open { visibility: visible; }

/* Collapsed tile details must not hold focusable links (a11y) */
.tile-details { visibility: hidden; }

.service-tile:hover .tile-details,
.service-tile:focus-within .tile-details,
.service-tile.is-open .tile-details {
  visibility: visible;
}

.nav-mobile.is-open { border-top-color: rgba(255, 255, 255, 0.08); }

.nav-mobile-link {
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nav-mobile-link:hover { color: #ffffff; }

/* ════════════════════════════════════════════════
   V3.4 CTA SYSTEM — pill buttons
   Sentence case, compact, soft depth. The ember
   pill is the single loudest element on any screen.
   ════════════════════════════════════════════════ */

.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 11px 24px;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}

.btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}

.btn-primary {
  background: var(--color-orange);
  border-color: transparent;
  box-shadow: var(--shadow-ember);
}

.btn-primary::after {
  content: '→';
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--t-base);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-orange-hover);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(208, 74, 8, 0.3), 0 12px 30px rgba(208, 74, 8, 0.28);
}

.btn-primary:hover::after { transform: translateX(3px); }

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--panel);
  border-color: rgba(26, 28, 32, 0.3);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Microcopy under CTA groups */
.hero-cta-note {
  margin-top: var(--sp-16);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: 0.01em;
}

.hero-cta-note .dot {
  display: inline-block;
  margin: 0 var(--sp-8);
  color: var(--color-orange);
}

/* Arrow links */
.link-arrow span,
.tile-link span {
  display: inline-block;
  transition: transform var(--t-base);
}

.link-arrow:hover span,
.tile-link:hover span { transform: translateX(4px); }

.link-arrow:hover,
.tile-link:hover { opacity: 1; }

/* ════════════════════════════════════════════════
   V3.5 TYPOGRAPHY ON LIGHT
   ════════════════════════════════════════════════ */

.section-headline,
.gap-headline,
.hero-headline,
.page-hero-headline,
.tile-name,
.work-card-name,
.step-name,
.founder-name,
.cs-client-name,
.cred-value,
.cs-meta-value,
.contact-col-heading,
.process-card-value,
.process-detail-name,
.belief-card h3,
.serve-card-name,
.error-headline,
.form-success-heading,
.work-future-text strong,
.faq-q,
.service-detail-name,
.belief-statement,
.services-nav-link:focus-visible {
  color: var(--ink);
}

.contact-email-link:hover,
.cs-meta-value a:hover {
  color: var(--color-orange);
}

.accent-dot { color: var(--color-orange); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
}

.section-label::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--color-orange);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   V3.6 SECTION RHYTHM — floating panels
   Default sections sit on paper; alternate sections
   become contained white modules, so the scroll
   reads as a sequence of designed panels.
   ════════════════════════════════════════════════ */

.section { border-top: none; }

.section--alt {
  background: var(--panel);
  max-width: min(calc(100% - 48px), 1320px);
  margin: var(--sp-12) auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* ════════════════════════════════════════════════
   V3.7 HERO — light, layered, composed
   ════════════════════════════════════════════════ */

.hero {
  background: transparent;
  min-height: 92vh;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 78% 30%, rgba(208, 74, 8, 0.055) 0%, transparent 65%);
}

.hero::after { content: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-64);
  align-items: center;
}

.hero-headline {
  letter-spacing: -0.02em;
  font-size: clamp(36px, 3.9vw, 56px);
}

@media (max-width: 1023px) {
  .hero-headline br { display: none; }
}

.hero-scroll { opacity: 0.4; }

.hero-scroll-line {
  background: linear-gradient(180deg, transparent, var(--ink));
}

/* ── Hero visual: layered brand-system mockup ── */

.hero-visual {
  position: relative;
  min-height: 460px;
}

.hv-card {
  position: absolute;
  border-radius: var(--radius-md);
}

.hv-card--back,
.hv-card--mid {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.hv-card--back {
  width: 78%;
  height: 70%;
  top: 0;
  right: 0;
  transform: rotate(2.2deg);
}

.hv-card--mid {
  width: 82%;
  height: 74%;
  top: 9%;
  right: 6%;
  transform: rotate(-1.4deg);
}

.hv-card--front {
  width: 86%;
  max-width: 420px;
  top: 17%;
  right: 11%;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-20);
  animation: hvFloat 7s ease-in-out infinite alternate;
}

@keyframes hvFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.hv-titlebar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-16);
}

.hv-titlebar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-bright);
}

.hv-titlebar span:first-child { background: var(--color-orange); }

.hv-logo-panel {
  background: var(--dark-panel);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-32) var(--sp-24);
  margin-bottom: var(--sp-16);
}

.hv-logo-panel img {
  height: 26px;
  width: auto;
}

.hv-swatches {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

.hv-swatch {
  flex: 1;
  height: 34px;
  border-radius: 8px;
}

.hv-swatch--ember    { background: var(--color-orange); }
.hv-swatch--charcoal { background: var(--dark-panel); }
.hv-swatch--gray     { background: #c9c5be; }
.hv-swatch--paper    { background: var(--paper); border: 1px solid var(--color-border); }

.hv-lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.hv-lines span {
  height: 8px;
  border-radius: 4px;
  background: var(--color-surface);
}

.hv-lines span:nth-child(1) { width: 90%; }
.hv-lines span:nth-child(2) { width: 72%; }
.hv-lines span:nth-child(3) { width: 58%; }

/* ════════════════════════════════════════════════
   V3.8 CARD SYSTEM
   Soft white modules: radius, hairline, shadow,
   gentle lift on hover.
   ════════════════════════════════════════════════ */

/* Grids: replace the V2 1px-seam technique with real gaps */
.services-grid,
.work-grid,
.cred-grid,
.serve-grid,
.belief-grid,
.cs-deliverable-list,
.cs-visuals,
.work-future-grid {
  gap: var(--sp-16);
  background: transparent;
  border: none;
}

.cs-deliverable-list { gap: var(--sp-8); }

.service-tile,
.work-card,
.cred-card,
.belief-card,
.serve-card,
.process-card,
.faq-item,
.cs-deliverable,
.work-future-card,
.process-detail-step,
.process-step,
.gap-proof {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--t-base),
    transform var(--t-base),
    border-color var(--t-base),
    background var(--t-base);
}

.service-tile:hover,
.service-tile:focus-visible,
.service-tile.is-open,
.work-card:hover,
.cred-card:hover,
.belief-card:hover,
.serve-card:hover,
.work-future-card:hover {
  background: var(--panel);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.work-card {
  overflow: hidden;
}

/* Dark premium media panel inside light work cards */
.work-card-visual,
.work-card:hover { background: var(--panel); }

.work-card-visual {
  background: var(--dark-panel);
  border-bottom: 1px solid var(--line);
}

.cs-deliverable { border-radius: var(--radius-sm); }

/* Dark contrast block in the services sidebar */
.service-aside-cta {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tile-divider { background: var(--color-border); }

.gap-proof { padding: var(--sp-12) var(--sp-24); }

.gap-proof-after { color: var(--ink); }

/* ════════════════════════════════════════════════
   V3.9 WORK / CASE STUDY PRESENTATION
   ════════════════════════════════════════════════ */

.cs-visual-slot {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.cs-visual-slot--logo {
  position: relative;
  flex-direction: column;
  gap: var(--sp-16);
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    var(--dark-panel);
}

.cs-visual-slot--logo .cs-visual-mark {
  width: auto;
  height: 64px;
  object-fit: contain;
}

.cs-visual-caption {
  position: absolute;
  bottom: var(--sp-12);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.cs-meta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Pending case study — clean light treatment */
.cs-pending-card,
.cs-section--pending .cs-pending-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.cs-pending-badge {
  border-radius: var(--radius-pill);
  border-color: var(--line-strong);
}

.cs-pending-badge::before {
  background: var(--color-orange);
  animation: statusPulse 2.4s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.cs-section--pending { background: transparent; }

.cs-pending-client { color: var(--ink); }
.cs-pending-note { color: var(--color-text-muted); }

/* ════════════════════════════════════════════════
   V3.10 CTA BANNER — contained dark premium module
   ════════════════════════════════════════════════ */

.cta-banner {
  background: transparent;
  border-top: none;
}

.cta-banner > .container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1b1e 0%, #0c0d0f 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-80) var(--sp-64);
  box-shadow: var(--shadow-lg);
}

.cta-banner > .container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 88% 100%, rgba(208, 74, 8, 0.16) 0%, transparent 60%);
}

.cta-banner-inner {
  position: relative;
  z-index: 1;
}

.cta-banner-sub { color: var(--on-dark); }

/* ════════════════════════════════════════════════
   V3.11 FOOTER — dark anchor
   ════════════════════════════════════════════════ */

.footer {
  position: relative;
  background: #0e0f11;
  border-top: none;
  margin-top: var(--sp-48);
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 2px;
  background: var(--color-orange);
}

.footer-desc,
.footer-email,
.footer-nav-col a { color: var(--on-dark); }

.footer-email:hover,
.footer-nav-col a:hover { color: #ffffff; }

.footer-nav-label,
.footer-legal { color: var(--on-dark-dim); }

.footer-bottom { border-top-color: rgba(255, 255, 255, 0.08); }

/* ════════════════════════════════════════════════
   V3.12 INNER PAGE HEROES
   ════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 82% 20%, rgba(208, 74, 8, 0.05) 0%, transparent 65%);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════
   V3.13 CONTACT PAGE
   ════════════════════════════════════════════════ */

.contact-grid {
  gap: var(--sp-20);
  background: transparent;
  border: none;
}

.contact-cal-col,
.contact-form-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.cal-embed-wrapper,
.cal-fallback {
  background: var(--paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cal-fallback { border-color: var(--color-border); }

.form-input,
.form-select,
.form-textarea {
  background-color: var(--paper);
  border-radius: var(--radius-sm);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23686d75' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(208, 74, 8, 0.12);
}

.form-select option {
  background: var(--panel);
  color: var(--ink);
}

.form-success-message {
  background: var(--paper);
  border-radius: var(--radius-md);
}

/* Ghost numerals — keep the faded look but ≥3:1 (large text) */
.process-detail-big-num,
.error-big-num { color: #84888e; }

[data-theme="foundry"] .process-detail-big-num,
[data-theme="foundry"] .error-big-num { color: rgba(255, 255, 255, 0.42); }

/* Small orange text on light surfaces: deepen slightly to ≥4.5:1.
   Buttons (white-on-orange) and Foundry Mode are unchanged. */
:root { --orange-text: #c04408; }

[data-theme="foundry"] { --orange-text: var(--color-orange); }

.section-label,
.hero-label,
.link-arrow,
.tile-num,
.tile-link,
.tile-list li::before,
.step-num,
.service-detail-num,
.service-aside-value li::before,
.process-detail-tag,
.contact-col-label,
.contact-point::before,
.form-label .required,
.cs-category,
.cs-deliverable-mark,
.cs-meta-link,
.gap-proof-arrow {
  color: var(--orange-text);
}

.section-label::before,
.hero-label::before { background: var(--orange-text); }

/* ════════════════════════════════════════════════
   V3.14 404 PAGE
   ════════════════════════════════════════════════ */

.error-page { background: transparent; }

/* ════════════════════════════════════════════════
   V3.15 SCROLL REVEALS
   ════════════════════════════════════════════════ */

[data-reveal] {
  filter: blur(6px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    filter 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].revealed { filter: blur(0); }

/* ════════════════════════════════════════════════
   V3.16 RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}

@media (max-width: 767px) {
  .section--alt {
    max-width: calc(100% - 24px);
    border-radius: 20px;
  }

  .cta-banner > .container {
    border-radius: 20px;
    padding: var(--sp-56) var(--sp-24);
  }
}

/* ════════════════════════════════════════════════════════════
   V3.5 ADDITIONS
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   V3.5-A FOUNDRY MODE (dark theme)
   Token remap — components inherit automatically.
   ════════════════════════════════════════════════ */

[data-theme="foundry"] {
  color-scheme: dark;

  --color-charcoal:      #17181b;
  --color-surface:       #1e1f23;
  --color-text-primary:  #d6d7d4;
  --color-text-muted:    #9b9da0;
  --color-text-dim:      #66686c;
  --color-border:        #26272b;
  --color-border-bright: #37383d;

  --paper:        #0c0d0f;
  --panel:        #151619;
  --ink:          #f1f1ef;
  --dark-panel:   #0a0b0c;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 70px rgba(0, 0, 0, 0.55);
}

[data-theme="foundry"] body::before {
  background:
    radial-gradient(ellipse 42% 38% at 18% 18%, rgba(208, 74, 8, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 46% 42% at 84% 26%, rgba(70, 80, 95, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 90%, rgba(208, 74, 8, 0.05) 0%, transparent 70%);
}

[data-theme="foundry"] .hv-card--back,
[data-theme="foundry"] .hv-card--mid {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="foundry"] .hv-swatch--gray  { background: #3a3b3f; }
[data-theme="foundry"] .hv-swatch--paper { background: #232428; border-color: var(--line); }

[data-theme="foundry"] .hero-scroll-line {
  background: linear-gradient(180deg, transparent, var(--color-orange));
}

[data-theme="foundry"] .cta-banner > .container {
  border: 1px solid var(--line);
}

[data-theme="foundry"] .footer { background: #08090a; }

/* Ember hover glow is stronger in Foundry Mode */
[data-theme="foundry"] .service-tile:hover,
[data-theme="foundry"] .work-card:hover,
[data-theme="foundry"] .cred-card:hover,
[data-theme="foundry"] .belief-card:hover,
[data-theme="foundry"] .serve-card:hover,
[data-theme="foundry"] .work-future-card:hover {
  box-shadow: var(--shadow-md), 0 0 32px rgba(208, 74, 8, 0.14);
  border-color: rgba(208, 74, 8, 0.35);
}

/* ════════════════════════════════════════════════
   V3.5-B THEME TOGGLE
   ════════════════════════════════════════════════ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: #ffffff;
  border-color: rgba(208, 74, 8, 0.55);
  box-shadow: 0 0 16px rgba(208, 74, 8, 0.25);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.theme-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--t-base), box-shadow var(--t-base);
}

[data-theme="foundry"] .theme-toggle-dot {
  background: var(--color-orange);
  box-shadow: 0 0 10px rgba(208, 74, 8, 0.8);
}

[data-theme="foundry"] .theme-toggle { border-color: rgba(208, 74, 8, 0.4); }

@media (max-width: 767px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════
   V3.5-C EMBER HOVER LIGHTING (both modes)
   Restrained heated-metal glow on interactives.
   ════════════════════════════════════════════════ */

.service-tile:hover,
.work-card:hover,
.cred-card:hover,
.belief-card:hover,
.serve-card:hover,
.work-future-card:hover,
.li-card:hover,
.doc-stack:hover .doc--cap,
.web-preview:hover {
  box-shadow: var(--shadow-md), 0 0 28px rgba(208, 74, 8, 0.09);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  box-shadow: var(--shadow-md), 0 0 18px rgba(208, 74, 8, 0.12);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(208, 74, 8, 0.12), 0 0 20px rgba(208, 74, 8, 0.1);
}

/* ════════════════════════════════════════════════
   V3.5-D SAMPLE WORK SECTION
   ════════════════════════════════════════════════ */

.samples-header { max-width: 680px; margin-bottom: var(--sp-56); }

.samples-note {
  margin-top: var(--sp-12);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.samples-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-64);
  align-items: center;
  padding: var(--sp-48) 0;
}

.samples-row--reverse { direction: rtl; }
.samples-row--reverse > * { direction: ltr; }

.samples-row-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-12);
}

.samples-copy p {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--sp-16);
}

.sample-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sample-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}

/* ── Document stack: fans open in view, more on hover ── */

.doc-stack {
  position: relative;
  height: 360px;
  perspective: 1000px;
}

.doc {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 220px;
  height: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  transition: transform 0.8s var(--ease-out), box-shadow var(--t-base);
}

.doc--cap     { transform: translateX(-50%) rotate(0deg);  z-index: 3; }
.doc--trifold { transform: translateX(-50%) rotate(-3deg); z-index: 2; }
.doc--flyer   { transform: translateX(-50%) rotate(3deg);  z-index: 1; }

.doc-stack.in-view .doc--cap     { transform: translateX(-50%) rotate(0deg); }
.doc-stack.in-view .doc--trifold { transform: translateX(-92%) rotate(-7deg); }
.doc-stack.in-view .doc--flyer   { transform: translateX(-8%) rotate(7deg); }

.doc-stack:hover .doc--cap     { transform: translateX(-50%) translateY(-10px) rotate(0deg); }
.doc-stack:hover .doc--trifold { transform: translateX(-104%) translateY(-2px) rotate(-9deg); }
.doc-stack:hover .doc--flyer   { transform: translateX(4%) translateY(-2px) rotate(9deg); }

.doc-band {
  height: 44px;
  border-radius: 6px;
  background: var(--color-orange);
  opacity: 0.9;
}

.doc-band--dark { background: var(--dark-panel); }

.doc-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.doc-fold:nth-of-type(1) { left: 33.3%; }
.doc-fold:nth-of-type(2) { left: 66.6%; }

.doc-title-bar {
  height: 12px;
  width: 70%;
  border-radius: 6px;
  background: var(--color-border-bright);
  margin-top: var(--sp-8);
}

.doc-line {
  height: 7px;
  border-radius: 4px;
  background: var(--color-surface);
}

.doc-line--short { width: 55%; }

.doc-label {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  text-align: center;
}

/* ── Website concept previewer ── */

.web-preview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--t-base);
}

.wp-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--color-surface);
}

.wp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-bright);
}

.wp-url {
  margin-left: var(--sp-12);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
}

.wp-screens {
  position: relative;
  height: 260px;
}

.wp-screen {
  position: absolute;
  inset: 0;
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}

.wp-screen.is-active {
  opacity: 1;
  transform: translateY(0);
}

.wp-hero {
  border-radius: var(--radius-sm);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 110px;
}

.wp-hero--dark { background: var(--dark-panel); }

.wp-hero--split {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
}

.wp-hero--split > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1;
}

.wp-hero--banner {
  background: linear-gradient(120deg, var(--dark-panel) 0%, #2a2218 100%);
}

.wp-h-line {
  display: block;
  height: 10px;
  width: 75%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.35);
}

.wp-hero--split .wp-h-line { background: var(--color-border-bright); }

.wp-h-line--short { width: 45%; }

.wp-h-btn {
  display: block;
  width: 64px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  margin-top: var(--sp-4);
}

.wp-h-media {
  width: 90px;
  height: 70px;
  border-radius: 8px;
  background: var(--color-border-bright);
  flex: none !important;
}

.wp-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12);
  flex: 1;
}

.wp-cols--two { grid-template-columns: repeat(2, 1fr); }

.wp-cols span,
.wp-rows span {
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--line);
}

.wp-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1;
}

.wp-rows span { flex: 1; }

.wp-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border-top: 1px solid var(--line);
}

.wp-tab {
  width: 28px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: background var(--t-base), box-shadow var(--t-base);
}

.wp-tab:hover { background: var(--color-border-bright); }

.wp-tab.is-active {
  background: var(--color-orange);
  box-shadow: 0 0 10px rgba(208, 74, 8, 0.45);
}

.wp-tab:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* ── LinkedIn content strip ── */

.samples-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  flex-wrap: wrap;
  margin: var(--sp-48) 0 var(--sp-24);
}

.samples-strip-header .samples-row-title { margin-bottom: 0; }

.li-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}

.li-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}

.li-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.li-head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.li-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dark-panel);
  flex-shrink: 0;
}

.li-id {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.li-name {
  display: block;
  height: 8px;
  width: 60%;
  border-radius: 4px;
  background: var(--color-border-bright);
}

.li-meta {
  display: block;
  height: 6px;
  width: 40%;
  border-radius: 3px;
  background: var(--color-surface);
}

.li-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.li-media {
  display: block;
  height: 90px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.li-media--ember {
  background:
    radial-gradient(ellipse 70% 90% at 80% 110%, rgba(208, 74, 8, 0.5) 0%, transparent 60%),
    var(--dark-panel);
}

.li-media--chart {
  background: var(--color-surface);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  padding: var(--sp-12);
}

.li-media--chart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--color-border-bright);
}

.li-media--chart span:nth-child(1) { height: 30%; }
.li-media--chart span:nth-child(2) { height: 55%; }
.li-media--chart span:nth-child(3) { height: 42%; }
.li-media--chart span:nth-child(4) { height: 78%; background: var(--color-orange); }

.li-media--split {
  display: flex;
  gap: 2px;
  overflow: hidden;
}

.li-media--split span:first-child {
  flex: 1;
  background: var(--color-border-bright);
  opacity: 0.5;
}

.li-media--split span:last-child {
  flex: 1;
  background:
    radial-gradient(ellipse 80% 100% at 50% 120%, rgba(208, 74, 8, 0.4) 0%, transparent 65%),
    var(--dark-panel);
}

.li-engage {
  display: flex;
  gap: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.li-engage span {
  height: 7px;
  width: 36px;
  border-radius: 4px;
  background: var(--color-surface);
}

/* ── Samples responsive ── */

@media (max-width: 1023px) {
  .samples-row {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }

  .li-strip { grid-template-columns: 1fr; }

  .doc-stack { height: 330px; }
}

@media (max-width: 480px) {
  .doc { width: 180px; height: 250px; }

  .doc-stack.in-view .doc--trifold { transform: translateX(-84%) rotate(-6deg); }
  .doc-stack.in-view .doc--flyer   { transform: translateX(-16%) rotate(6deg); }
}

/* ════════════════════════════════════════════════
   V3.5-E PARALLAX HELPERS
   ════════════════════════════════════════════════ */

.hero-visual { will-change: transform; }

/* ════════════════════════════════════════════════════════════
   V4.0 — KINETIC IDENTITY
   Personality layer: typography hierarchy, ambient hero
   motion, cursor ember glow, line-mask reveals, scroll
   progress, panel rises. No structural or copy changes.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   V4-A TYPOGRAPHY HIERARCHY
   ════════════════════════════════════════════════ */

.hero-headline {
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: -0.028em;
  line-height: 1.03;
}

.hero-sub { font-size: 19px; }

.section-headline,
.gap-headline {
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.page-hero-headline {
  font-size: clamp(40px, 4.6vw, 60px);
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.section-label { font-size: 12px; }

/* ════════════════════════════════════════════════
   V4-B HERO AMBIENCE
   Slow-breathing light field + rising ember motes.
   ════════════════════════════════════════════════ */

.hero::before {
  inset: -15%;
  background:
    radial-gradient(ellipse 45% 40% at 78% 30%, rgba(208, 74, 8, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 15% 75%, rgba(96, 110, 130, 0.06) 0%, transparent 70%);
  animation: heroAmbient 26s ease-in-out infinite alternate;
}

@keyframes heroAmbient {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.07); }
}

.ember-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ember-mote {
  position: absolute;
  bottom: -10px;
  left: var(--mote-x, 50%);
  width: var(--mote-s, 4px);
  height: var(--mote-s, 4px);
  border-radius: 50%;
  background: var(--color-orange);
  filter: blur(0.6px);
  opacity: 0;
  animation: moteRise var(--mote-d, 12s) linear var(--mote-delay, 0s) infinite;
}

@keyframes moteRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--mote-o, 0.3); }
  60%  { opacity: calc(var(--mote-o, 0.3) * 0.5); }
  100% { transform: translate3d(var(--mote-dx, 24px), -78vh, 0); opacity: 0; }
}

[data-theme="foundry"] .ember-mote {
  --mote-o: 0.55;
  box-shadow: 0 0 8px rgba(208, 74, 8, 0.6);
}

/* ════════════════════════════════════════════════
   V4-C HEADLINE LINE-MASK REVEAL
   ════════════════════════════════════════════════ */

.hl-line {
  display: block;
  overflow: hidden;
}

.hl-line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 0.95s var(--ease-out);
}

.hero-headline.hl-ready .hl-line > span { transform: translateY(0); }

/* ════════════════════════════════════════════════
   V4-D CURSOR EMBER GLOW
   A heated-metal highlight that follows the pointer
   across interactive cards.
   ════════════════════════════════════════════════ */

.glow-track { position: relative; }

.glow-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(208, 74, 8, 0.09),
    transparent 65%
  );
}

.glow-track:hover::after { opacity: 1; }

[data-theme="foundry"] .glow-track::after {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(208, 74, 8, 0.16),
    transparent 65%
  );
}

/* ════════════════════════════════════════════════
   V4-E SCROLL PROGRESS HAIRLINE
   ════════════════════════════════════════════════ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 300;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(var(--scroll-p, 0));
  background: linear-gradient(90deg, var(--color-orange), #ff8a3d);
}

/* ════════════════════════════════════════════════
   V4-F PANEL RISE + IDLE FLOATS
   ════════════════════════════════════════════════ */

.panel-anim {
  transform: translateY(26px);
  transition: transform 1s var(--ease-out);
}

.panel-anim.panel-in { transform: none; }

.doc-stack.in-view {
  animation: stackBob 7s ease-in-out infinite alternate;
}

@keyframes stackBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-9px); }
}

/* ════════════════════════════════════════════════
   V4-G MICRO-INTERACTIONS
   ════════════════════════════════════════════════ */

.sector-tag {
  transition: border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

.sector-tag:hover {
  border-color: rgba(208, 74, 8, 0.5);
  color: var(--ink);
  box-shadow: 0 0 14px rgba(208, 74, 8, 0.14);
}

.link-arrow:hover {
  text-shadow: 0 0 16px rgba(208, 74, 8, 0.45);
}

.footer-nav-col a,
.footer-email {
  transition: color var(--t-fast), text-shadow var(--t-fast);
}

.footer-nav-col a:hover,
.footer-email:hover {
  text-shadow: 0 0 12px rgba(208, 74, 8, 0.4);
}

/* Smooth theme cross-fade when toggling Foundry Mode */
html.theme-fade,
html.theme-fade body,
html.theme-fade body *,
html.theme-fade body *::before,
html.theme-fade body *::after {
  transition:
    background-color 0.45s ease,
    background 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease !important;
}

/* ════════════════════════════════════════════════
   V4-H REAL PROOF SLOTS (site screenshots)
   ════════════════════════════════════════════════ */

.cs-visual-slot--shot {
  position: relative;
  background: var(--color-surface);
}

.cs-visual-slot--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cs-visual-slot--shot .cs-visual-caption {
  color: #ffffff;
  background: rgba(10, 11, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Homepage featured card shows the real site */
.work-card-visual--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ════════════════════════════════════════════════
   V3.17 REDUCED MOTION
   ════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }

  .hv-card--front { animation: none; }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .cs-pending-badge::before { animation: none; }

  .btn,
  .nav-link::after,
  .link-arrow span,
  .tile-link span,
  .doc,
  .wp-screen,
  .wp-tab,
  .li-card,
  .theme-toggle,
  .theme-toggle-dot {
    transition: none;
  }

  .hero-visual { transform: none !important; }

  /* V4 motion off */
  .hero::before,
  .doc-stack.in-view { animation: none; }

  .ember-field { display: none; }

  .hl-line > span {
    transform: none;
    transition: none;
  }

  .panel-anim {
    transform: none;
    transition: none;
  }

  .glow-track::after { display: none; }
}