/* corePHP wireframe - Generated by Frontend Wireframe Engine
   DNA Hash: d04406bd9fe0
   DNA: display-expressive-bold | broken-grid-expressive | offset-editorial
        | warm-neutral-editorial | colored-shadow-pop | mixed-media-collage
        | playful-bouncy | alternating-rhythm | right-aligned-minimal | subtle-grain
   Mutations: oversized-heading, lottie-hero-illustration, lottie-scroll-narrative,
              asymmetric-offset, grain-overlay
*/

:root {
  /* === TYPOGRAPHY (display-expressive-bold) === */
  --font-heading: "Clash Display", "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Cabinet Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --scale-ratio: 1.5;
  --heading-weight: 700;
  --heading-weight-black: 800;
  --heading-letterspacing: -0.03em;
  --heading-letterspacing-tight: -0.045em;
  --heading-line-height: 0.95;
  --body-size: 17px;
  --body-weight: 400;
  --body-line-height: 1.55;
  --body-letterspacing: -0.005em;
  --max-line-length: 62ch;

  /* === COLOR (warm-neutral-editorial, white-dominant) === */
  --paper: #FFFFFF;
  --surface: #F7F4EE;
  --surface-warm: #FFF8EC;
  --smoke: #EBE7DF;
  --ink: #111111;
  --ink-soft: #2A2A2A;
  --ink-mute: #6A6660;
  --ink-inverse: #FFFFFF;
  --brand-red: #C8102E;
  --brand-red-deep: #A50E26;
  --tangerine: #D9621F;
  --tangerine-soft: #E27A3D;

  /* token aliases for theme */
  --color-bg-base: var(--paper);
  --color-bg-elevated: var(--surface);
  --color-bg-card: var(--paper);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--ink-mute);
  --color-accent: var(--brand-red);
  --color-accent-2: var(--tangerine);
  --color-border: var(--smoke);

  /* === COMPONENTS (colored-shadow-pop) === */
  --radius: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-pop-red: 8px 8px 0 0 var(--brand-red);
  --shadow-pop-red-sm: 4px 4px 0 0 var(--brand-red);
  --shadow-pop-tangerine: 8px 8px 0 0 var(--tangerine);
  --shadow-pop-tangerine-sm: 4px 4px 0 0 var(--tangerine);
  --shadow-pop-ink: 6px 6px 0 0 var(--ink);
  --shadow-elev-low: 0 2px 6px rgba(17, 17, 17, 0.06);
  --shadow-elev-mid: 0 12px 28px rgba(17, 17, 17, 0.10);
  --border-hairline: 1px solid var(--smoke);
  --border-strong: 2px solid var(--ink);

  /* === BUTTON (colored-offset-shadow) === */
  --btn-padding: 18px 28px;
  --btn-radius: 999px;
  --btn-shadow-rest: var(--shadow-pop-red-sm);
  --btn-shadow-hover: 0 0 0 0 var(--brand-red);

  /* === SPACING (alternating-rhythm) === */
  --spacing-base: 8px;
  --spacing-section-tight: 64px;
  --spacing-section: 120px;
  --spacing-section-loose: 180px;
  --spacing-content-desktop: 64px;
  --spacing-content-mobile: 24px;
  --spacing-paragraph: 18px;
  --spacing-component: 24px;

  /* === ANIMATION (playful-bouncy) === */
  --transition-speed: 220ms;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring overshoot */
  --transition-easing-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --entrance-duration: 800ms;
  --entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger-delay: 90ms;

  /* === LAYOUT (broken-grid-expressive) === */
  --layout-max-width: 1280px;
  --layout-bleed: 4vw;
  --hero-height: 88vh;

  /* === NAV (right-aligned-minimal + red-diagonal-corner-flag) === */
  --nav-height: 72px;
  --nav-flag-w: 240px;
  --nav-flag-h: 72px;
}

/* === BASE RESET / TYPOGRAPHY === */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letterspacing);
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: inherit;
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
  margin: 0;
}
/* Default body text + headings to ink unless inside a dark section */
body { color: var(--ink-soft); }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink h5, .bg-ink h6,
.bg-ink, .bg-ink p { color: var(--paper); }
.bg-tangerine h1, .bg-tangerine h2, .bg-tangerine h3, .bg-tangerine h4, .bg-tangerine h5, .bg-tangerine h6 { color: var(--ink); }
.scroll-narrative h1, .scroll-narrative h2, .scroll-narrative h3 { color: var(--paper); }
.h-display {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: var(--heading-letterspacing-tight);
  line-height: 0.9;
}

/* Tailwind utility extensions and component primitives */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* === GLOBAL GRAIN OVERLAY (mutation: grain-overlay) === */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  mix-blend-mode: multiply;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* === RED DIAGONAL CORNER FLAG (preserved nav signature) === */
.corner-flag {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--nav-flag-w);
  height: var(--nav-flag-h);
  background: var(--brand-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding-left: 28px;
  padding-right: 48px;
  transition: box-shadow var(--transition-speed) var(--transition-easing-snap),
              transform var(--transition-speed) var(--transition-easing-snap);
}
.corner-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
}
.corner-flag .wordmark {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.corner-flag .wordmark .tick { color: var(--paper); opacity: 0.7; }
.corner-flag .wordmark .accent { color: var(--paper); }
.corner-flag .wordmark .ph { font-style: italic; }
/* tangerine state edge on scroll */
header[data-scrolled="true"] .corner-flag {
  box-shadow: inset 0 -3px 0 0 var(--tangerine);
  transform: scaleY(0.96);
  transform-origin: top left;
}

/* === BUTTONS (colored-offset-shadow) === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform var(--transition-speed) var(--transition-easing),
              box-shadow var(--transition-speed) var(--transition-easing-snap),
              background-color var(--transition-speed) var(--transition-easing-snap),
              color var(--transition-speed) var(--transition-easing-snap);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-pop-red-sm);
}
.btn-primary:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--brand-red);
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.btn-tangerine {
  background: var(--tangerine);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-pop-ink);
}
.btn-tangerine:hover {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 0 var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.btn-ghost:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn-arrow {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 14px 22px;
  box-shadow: 4px 4px 0 0 var(--tangerine);
}
.btn-arrow:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--tangerine);
  background: var(--tangerine);
  color: var(--paper);
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--transition-speed) var(--transition-easing);
}
.btn:hover .arrow { transform: translateX(4px); }

/* === CARDS (colored-shadow-pop) === */
.card-pop {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-pop-red-sm);
  transition: transform var(--transition-speed) var(--transition-easing),
              box-shadow var(--transition-speed) var(--transition-easing-snap);
}
.card-pop:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--brand-red);
}
.card-pop.tangerine {
  box-shadow: var(--shadow-pop-tangerine-sm);
}
.card-pop.tangerine:hover {
  box-shadow: 8px 8px 0 0 var(--tangerine);
}
.card-pop.ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-pop-tangerine-sm);
}
.card-pop.ink:hover {
  box-shadow: 8px 8px 0 0 var(--tangerine);
}
.card-pop.ink h3, .card-pop.ink h4 { color: var(--paper); }

/* === ASYMMETRIC OFFSET (mutation: asymmetric-offset) === */
.offset-left { margin-left: calc(-1 * var(--layout-bleed)); }
.offset-right { margin-right: calc(-1 * var(--layout-bleed)); }
@media (max-width: 768px) {
  .offset-left, .offset-right { margin-left: 0; margin-right: 0; }
}

/* === SECTION RHYTHMS === */
section { position: relative; }
.section-rule {
  height: 1px;
  background: var(--smoke);
  width: 100%;
}

/* === TWIN PORTRAIT TREATMENT === */
.portrait-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--surface);
}
.portrait-frame img { display: block; width: 100%; height: auto; filter: contrast(1.02) saturate(0.95); }
.portrait-frame.duotone-red img {
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}
.portrait-frame.duotone-red {
  background: var(--brand-red);
}
.portrait-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}

/* === MARQUEE / TICKER (proof bar) === */
.marquee {
  overflow: hidden;
  display: flex;
  gap: 56px;
  white-space: nowrap;
}
.marquee-track {
  display: flex;
  gap: 56px;
  animation: marquee 38s linear infinite;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* === HERO LOTTIE PLACEHOLDER STYLE === */
.lottie-placeholder {
  background: var(--surface-warm);
  border: 2px dashed var(--ink);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
}
.lottie-placeholder::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(217, 98, 31, 0.08) 8px 16px);
  pointer-events: none;
}

/* === SCROLL NARRATIVE (mutation: lottie-scroll-narrative) === */
.scroll-narrative {
  min-height: 170vh;
  position: relative;
}
.scroll-narrative__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.narr-dot.is-active { background: var(--tangerine); }

/* === RESPONSIVE TYPE SCALE === */
.t-mega { font-size: clamp(64px, 11vw, 168px); }
.t-xl   { font-size: clamp(40px, 5.4vw, 84px); }
.t-l    { font-size: clamp(28px, 3.4vw, 52px); }
.t-m    { font-size: clamp(22px, 2.2vw, 32px); }
.t-eyebrow { font-size: 13px; }

/* === PRINT/REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* === FORM ELEMENTS === */
input, textarea {
  font-family: var(--font-body);
  font-size: 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: box-shadow var(--transition-speed) var(--transition-easing-snap);
}
input:focus, textarea:focus {
  box-shadow: 4px 4px 0 0 var(--brand-red);
}

/* === MOBILE NAV (rule 8 compliance) === */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: var(--paper);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* === FOCUS VISIBILITY === */
:focus-visible {
  outline: 3px solid var(--tangerine);
  outline-offset: 3px;
}