@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

/*
  Type roles (brief calls for Fraunces/Inter/Caveat, using the purchased
  fonts in the same roles instead, per direction):
  - Paquito       -> display serif (Fraunces' job): headlines, pull quotes,
                     package names, big statement copy.
  - DM Sans       -> body/UI sans (Inter's job): paragraphs, nav, buttons, forms.
  - Magic Romance -> flourish accent (Caveat's job): used sparingly, once or
                     twice per page, never load-bearing.
  - Boho          -> reserved decorative, single emphasis moments.
*/

@font-face { font-family: 'Paquito'; src: url('fonts/Paquito-Regular.woff2') format('woff2'), url('fonts/Paquito-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paquito'; src: url('fonts/Paquito-Medium.woff2') format('woff2'), url('fonts/Paquito-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paquito'; src: url('fonts/Paquito-Bold.woff2') format('woff2'), url('fonts/Paquito-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Magic Romance'; src: url('fonts/MagicRomance.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Boho'; src: url('fonts/Boho.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  /* ============================================================
     BRAND PALETTE — natural, weathered materials: limestone, river
     stone, oxidized copper, cedar bark, iron-rich clay, wet bark.
     Source of truth. Every semantic variable below resolves to one
     of these seven, so the whole site's color system lives here.
     ============================================================ */
  --color-limestone: #ECE5DA;    /* Weathered Limestone: primary light material, ~70% of the site */
  --color-river-slate: #7F908B;  /* River Slate: muted mineral blue-green, used sparingly */
  --color-aged-copper: #6F847D;  /* Aged Copper: small accent, icons, dividers, hover */
  --color-cedar-bark: #8A644E;   /* Cedar Bark: warm wood tone, secondary UI, small accents */
  --color-rust: #A05538;         /* Rust: primary accent, buttons, links, CTAs */
  --color-copper: #B36E4D;       /* Copper: lighter metallic, hover/highlight companion to Rust */
  --color-wet-bark: #3E3B38;     /* Wet Bark: primary dark, headings, body text, footer, nav */

  /* Base / neutrals, mapped onto the brand palette above */
  --color-linen: var(--color-limestone);
  /* DERIVED, a light tint of River Slate: gives the alternating
     section background a quiet mineral coolness rather than being
     a second flavor of beige. */
  --color-bone: #E5E9E8;
  /* DERIVED, a tint of Cedar Bark: quiet warm-wood border/frame
     tone in place of the old parchment. */
  --color-parchment: #D0C1B8;

  /* Ink: Wet Bark replaces both former dark tones, this is now the
     only near-black in the system, used anywhere black/near-black
     previously appeared. */
  --color-espresso: var(--color-wet-bark);
  --color-charcoal-brown: var(--color-wet-bark);

  /* Accent, primary: Rust is the signature brand accent (buttons,
     links, CTAs). Copper is its lighter companion for hover states,
     per the brand direction, not a darkened Rust. */
  --color-clay: var(--color-rust);
  --color-clay-deep: var(--color-copper);

  /* Accent, secondary: Aged Copper for small accents (checkmarks,
     active-state indicators, thin accent lines). Deep variant is a
     darkened Aged Copper for emphasis states. */
  --color-moss: var(--color-aged-copper);
  --color-moss-deep: #596A64;

  /* Accent, tertiary: quiet label tones. Dust-rose is a light Cedar
     Bark tint for quiet labels on dark sections, stone-blue is
     River Slate itself for quiet labels on light sections. */
  --color-dust-rose: #E7E0DC;
  --color-stone-blue: var(--color-river-slate);

  /* Utility: warm near-white for text on dark sections and photography */
  --color-cream-white: var(--color-limestone);
  --overlay-grain: rgba(62, 59, 56, 0.035);

  /* Text over photography in the interactive package viewer */
  --color-preview-ivory: var(--color-limestone);

  /* DERIVED, a warm-tinted Limestone for the Introduction section's
     plaster texture, "handmade plaster" per the brand direction. */
  --color-plaster: #E2D8CC;

  --line: rgba(62, 59, 56, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--color-linen);
  color: var(--color-espresso);
  line-height: 1.75;
  font-weight: 300;
  font-size: 1.08rem;
  position: relative;
}

/* Grain overlay, fixed, full viewport, sits above backgrounds, below content */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1, h2, h3, .display { font-family: 'Paquito', serif; font-weight: 500; line-height: 1.08; letter-spacing: 0.005em; color: var(--color-espresso); }
.mode-dark h1, .mode-dark h2, .mode-dark h3 { color: var(--color-cream-white); }

a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
em { font-style: italic; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-clay);
}
.mode-dark .eyebrow { color: var(--color-dust-rose); }
/* Higher-contrast variant for a few labels that were reading too
   quietly against their light backgrounds. Espresso is the
   darkest tone already in the palette, deliberately not pure
   white, which would be illegible on linen/bone. */
.eyebrow-strong { color: var(--color-espresso); opacity: 0.85; }

.statement { font-family: 'Paquito', serif; font-weight: 400; line-height: 1.08; }
.statement.hero { font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 300; }
.statement.section-head { font-size: clamp(2rem, 4vw, 3.25rem); }
.statement.sm { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.statement em { color: inherit; }

.price { font-family: 'Paquito', serif; font-style: italic; color: var(--color-clay); font-variant-numeric: oldstyle-nums; }

.flourish { font-family: 'Magic Romance', cursive; font-weight: 400; }

p.body-copy { max-width: 480px; opacity: 0.85; font-size: 1.06rem; line-height: 1.75; }

.btn {
  display: inline-block;
  background: var(--color-clay);
  color: var(--color-cream-white);
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: background 0.4s ease, transform 0.4s ease;
}
.btn:hover { background: var(--color-clay-deep); transform: translateY(-2px); }

.text-link { font-family: 'Magic Romance', cursive; font-size: 1.4rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--color-clay); }
.mode-dark .text-link { color: var(--color-dust-rose); }

/* ============================================================
   TEXTURE SYSTEM
   ============================================================ */

/* Botanical line-art mark, single stroke, moss on light / cream on dark */
.mark-sprig svg { stroke: var(--color-moss); }
.mode-dark .mark-sprig svg { stroke: var(--color-cream-white); }

/* Organic blob wash, irregular SVG shape, low opacity, never reused identically */
.blob-wash { position: absolute; pointer-events: none; opacity: 0.12; z-index: 0; }

/* Soft, warm, diffuse shadow instead of flat UI shadow */
.soft-shadow { box-shadow: 0 20px 60px -20px rgba(42, 33, 23, 0.25); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 140px 48px; position: relative; overflow: hidden; }
.section.tight { padding: 90px 48px; }

.mode-light { background: var(--color-linen); }
.mode-light.bone { background: var(--color-bone); }
.mode-dark { background: var(--color-charcoal-brown); color: var(--color-cream-white); }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-charcoal-brown);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
#preloader.hide { opacity: 0; pointer-events: none; }
#preloader .pl-studio { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); color: var(--color-cream-white); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.8; }
#preloader .pl-spinner { width: 46px; height: 46px; margin-bottom: 30px; }
#preloader .pl-spinner circle { fill: none; stroke: var(--color-clay); stroke-width: 1.4; stroke-dasharray: 90 200; animation: pl-spin 1.6s linear infinite; }
@keyframes pl-spin { to { stroke-dashoffset: -282; } }
#preloader .pl-headline { color: var(--color-cream-white); font-family: 'Paquito', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
#preloader .pl-eyebrow { position: absolute; bottom: 30px; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-dust-rose); }
#preloader .pl-eyebrow.left { left: 40px; }
#preloader .pl-eyebrow.right { right: 40px; }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 40px 48px; max-width: 1180px; margin: 0 auto;
}
body.inner-page header { position: static; background: var(--color-linen); }

.wordmark { font-family: 'Paquito', serif; font-size: 1.5rem; color: var(--color-cream-white); }
body.inner-page header .wordmark { color: var(--color-espresso); }
.wordmark span.amp { color: var(--color-clay); }
.wordmark small { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.55rem; letter-spacing: 0.3em; color: var(--color-clay); font-weight: 500; margin-top: 3px; }

/* Rectangular logo file (2000x1000), only modest blank margin above/below
   the mark, so it renders at its natural proportions with no cropping. */
.logo-link {
  display: flex; align-items: center; height: 170px; overflow: visible;
  flex-shrink: 0; margin-left: -30px; margin-top: -14px; position: relative;
}
.logo-mark { position: relative; z-index: 1; height: 170px; width: auto; display: block; filter: drop-shadow(0 3px 12px rgba(62,59,56,0.6)) drop-shadow(0 1px 4px rgba(62,59,56,0.55)); }

nav { display: flex; gap: 36px; align-items: center; }
nav a { font-size: 0.88rem; color: var(--color-cream-white); }
body.inner-page header nav a { color: var(--color-espresso); }
nav a.cta.btn { color: var(--color-cream-white); }

/* ============================================================
   CLOSING CTA SECTION ONLY (bottom of page, water photo).
   These .hero / .hero-inner rules are legacy names now used
   exclusively by the closing section. Not touched, not related
   to the landing hero rebuilt below, kept only so that section
   keeps working.
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background-color: var(--color-charcoal-brown);
  background-size: cover; background-position: center;
  color: var(--color-cream-white); overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(62,59,56,0.08) 0%, rgba(62,59,56,0.06) 45%, rgba(62,59,56,0.2) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 48px; width: 100%; }
.hero .eyebrow { color: var(--color-cream-white); margin-bottom: 22px; text-shadow: 0 1px 12px rgba(62,59,56,0.6); }
.hero .statement.hero { font-size: clamp(1.95rem, 4vw, 3.7rem); margin-bottom: 22px; max-width: 560px; line-height: 1.12; text-shadow: 0 2px 20px rgba(62,59,56,0.6), 0 1px 3px rgba(62,59,56,0.5); }
.hero p.body-copy { color: var(--color-cream-white); opacity: 0.9; margin-bottom: 0; max-width: 480px; text-shadow: 0 1px 14px rgba(62,59,56,0.55); }

/* ============================================================
   LANDING HERO — rebuilt from scratch. Dedicated classes only,
   nothing shared with any other section. The photo is the
   section's own background-image (set inline in the HTML).
   Every child below is explicitly transparent.
   ============================================================ */
.landing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-cream-white);
  overflow: hidden;
}

/* Base wash (subtle, full section) plus a much stronger top-left corner
   vignette so the logo pops against real darkness rather than a faint
   glow. The vignette falls off well before the nav links and headline. */
.landing-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 820px 600px at 0% 0%, rgba(8,6,5,0.95) 0%, rgba(8,6,5,0.75) 25%, rgba(8,6,5,0.4) 50%, transparent 78%),
    linear-gradient(180deg, rgba(62,59,56,0.1) 0%, rgba(62,59,56,0.08) 45%, rgba(62,59,56,0.24) 100%);
  background-color: transparent;
}

.landing-hero-header {
  z-index: 3;
  background: transparent;
  background-color: transparent;
}
.landing-hero-header nav { background: transparent; }

.landing-hero-content {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: 130px 48px 0; width: 100%;
  background: transparent;
  background-color: transparent;
}
.landing-hero-content .eyebrow {
  color: var(--color-dust-rose);
  margin-bottom: 22px;
  text-shadow: 0 1px 12px rgba(62,59,56,0.6);
  background: transparent;
}
.landing-hero-headline {
  font-family: 'Paquito', serif;
  font-weight: 300;
  font-size: clamp(1.95rem, 4vw, 3.7rem);
  line-height: 1.12;
  max-width: 660px;
  margin-bottom: 64px;
  color: var(--color-cream-white);
  text-shadow: 0 2px 20px rgba(62,59,56,0.6), 0 1px 3px rgba(62,59,56,0.5);
  background: transparent;
  background-color: transparent;
}
.landing-hero-headline .line-3 { display: block; margin-left: 0.7em; margin-top: -0.05em; background: transparent; }
.landing-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-cream-white);
  opacity: 0.82;
  max-width: 440px;
  margin-top: 12px;
  text-shadow: 0 1px 16px rgba(62,59,56,0.6), 0 1px 3px rgba(62,59,56,0.4);
  background: transparent;
  background-color: transparent;
}

.scroll-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 1px; height: 40px; background: rgba(236,229,218,0.4); overflow: hidden; z-index: 2; }
.scroll-cue::after { content: ""; display: block; width: 100%; height: 40%; background: var(--color-cream-white); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }

/* ============================================================
   SECTION ONE: INTRODUCTION
   Quiet, spacious transition between the hero and the Heartbeat
   section. Wider container than the old manifesto block, on purpose.
   ============================================================ */
.intro-section {
  background-color: var(--color-plaster);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(160,85,56,0.08), transparent),
    radial-gradient(ellipse 55% 45% at 85% 80%, rgba(111,132,125,0.07), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.24  0 0 0 0 0.23  0 0 0 0 0.22  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-blend-mode: normal, normal, overlay;
  padding: 170px 48px; text-align: center;
}
.intro-content { max-width: 860px; margin: 0 auto; }
.intro-content .statement.section-head { line-height: 1.25; margin-bottom: 34px; }
.intro-copy { max-width: 620px; margin: 0 auto 56px; font-size: 1.15rem; line-height: 1.9; text-align: center; }
.intro-btn { margin-top: 8px; }

/* ============================================================
   SECTION TWO: HEARTBEAT
   Full-bleed leaf texture background, no card, no collage. The
   radial overlay darkens just enough behind the text for contrast
   while leaving the leaf's edges and dimension visible.
   ============================================================ */
.heartbeat {
  position: relative;
  min-height: 88vh;
  background-image: url('images/leaf-texture.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.heartbeat::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(62,59,56,0.52) 0%, rgba(62,59,56,0.22) 60%, rgba(62,59,56,0.08) 100%);
}
.heartbeat-inner {
  position: relative; z-index: 1;
  max-width: 560px;
  text-align: center;
  padding: 110px 32px;
}
.heartbeat-copy {
  font-family: 'Paquito', serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--color-cream-white);
  line-height: 1.55;
  margin-bottom: 24px;
}
.heartbeat-copy:last-child { margin-bottom: 0; }

/* ============================================================
   SECTION THREE: HOW WE WORK TOGETHER
   Merged process + philosophy section (formerly two sections:
   "How It Comes Together" and "Rooted in Every Build"). Typography,
   spacing, and alignment only. No icons, no images, no dividers.
   A single visual breath between Heartbeat and the work.
   ============================================================ */
.process-section {
  background: var(--color-linen);
  padding: 180px 48px;
}
.process-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 100px;
}
.process-header .statement.section-head { margin-bottom: 22px; }
.process-header .body-copy { max-width: 560px; margin: 0 auto; text-align: center; font-size: 1.1rem; }
.process-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px;
  align-items: start;
}
.process-step { max-width: 360px; }
.process-step .step-number {
  font-family: 'Paquito', serif;
  font-size: 1.5rem;
  color: var(--color-moss-deep);
  font-weight: 500;
  margin-bottom: 20px;
}
.process-step h3 {
  font-size: 1.7rem;
  margin-bottom: 18px;
}
.process-step p {
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0.92;
}

/* ============================================================
   FEATURED PROJECT
   A single showcase, placed early to let the work earn trust
   before the philosophy section explains it. Contained within
   the normal page width like every other section, a balanced
   two-column pairing rather than a full-bleed video, so it reads
   as a premium preview rather than dominating the page.
   ============================================================ */
.featured-project-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.featured-project-intro .body-copy { max-width: 100%; margin-bottom: 22px; }
/* Wrapper locks the aspect ratio and clips the video via an
   absolutely-positioned child, kept deliberately independent of
   the video's own intrinsic dimensions so it can never force the
   page wider than the viewport. */
.featured-project-media {
  position: relative; width: 100%; aspect-ratio: 1920 / 968;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 70px -24px rgba(62,59,56,0.3);
}
.featured-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   INTERACTIVE DEMO VIEWER (restored)
   ============================================================ */
.demo-viewer { max-width: 1180px; margin: 0 auto; }
/* Preview carries most of the visual weight now (was 0.9fr/2.1fr); the
   tighter gap also cuts the dead space between the two columns. */
.demo-layout { display: grid; grid-template-columns: 0.66fr 2.34fr; gap: 40px; margin-top: 42px; }
.demo-tabs { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.demo-tab {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 0 22px 22px; border-left: 2px solid var(--color-parchment);
  font-family: 'DM Sans', sans-serif; transition: border-color 0.4s ease;
}
.demo-tab .dt-eyebrow { font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-stone-blue); margin-bottom: 8px; opacity: 0.55; transition: opacity 0.4s ease; }
.demo-tab h3 { font-size: 1.65rem; margin-bottom: 8px; color: var(--color-espresso); opacity: 0.45; transition: opacity 0.4s ease; }
.demo-tab .dt-price { font-family: 'Paquito', serif; font-style: italic; color: var(--color-clay); font-size: 1.2rem; opacity: 0.7; transition: opacity 0.4s ease; }
.demo-tab.active { border-left-width: 3px; border-left-color: var(--color-moss); }
.demo-tab.active .dt-eyebrow { opacity: 1; }
.demo-tab.active h3 { opacity: 1; }
.demo-tab.active .dt-price { opacity: 1; font-size: 1.4rem; }
.demo-tab:focus-visible { outline: 2px solid var(--color-moss); outline-offset: 4px; }

.demo-frame-wrap { position: relative; }
.demo-frame {
  border-radius: 12px; overflow: hidden; background: var(--color-cream-white);
  box-shadow: 0 30px 90px -28px rgba(62,59,56,0.36); border: 1px solid var(--color-parchment);
}
.demo-frame .chrome { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--color-bone); border-bottom: 1px solid var(--color-parchment); }
.demo-frame .chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-parchment); }
.demo-frame .chrome .url { flex: 1; margin-left: 10px; background: var(--color-linen); border-radius: 6px; padding: 5px 12px; font-size: 0.72rem; color: var(--color-stone-blue); }

/* Shared min-height sized for the busiest composition (Brand + Website) so
   the frame never resizes or clips when switching tiers. Raised from
   520px so the preview reads as the section's focal point, not a small
   inset image. */
.demo-frame .preview { min-height: 640px; overflow: hidden; position: relative; }
.demo-frame .preview .slide {
  position: absolute; inset: 0;
  background-size: 93% auto; background-position: center; background-color: var(--color-charcoal-brown);
  opacity: 0; transform: translateY(8px) scale(1.012);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
  display: flex; padding: 48px;
}
.demo-frame .preview .slide.active { opacity: 1; transform: translateY(0) scale(1); z-index: 1; }
/* Single soft gradient wash per slide, in place of the previous opaque
   text panels, tuned per composition below so it sits strongest behind
   the copy and fades naturally across the rest of the photo. */
.demo-frame .preview .slide::before { content: ""; position: absolute; inset: 0; z-index: 0; }

/* Minimal decorative page-chrome so each slide reads as a glimpse of a
   real site rather than a photo with text on top. aria-hidden, purely
   visual: a small mark on the left, a few thin nav ticks on the right.
   Bar count grows per tier (2/3/4) as one more quiet cue that the site
   gets more expansive from Easy to Brand. */
.slide-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 32px; color: var(--color-preview-ivory);
}
.sn-mark { display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.55; }
.sn-links { display: flex; gap: 10px; }
.sn-links i { display: block; width: 15px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.38; font-style: normal; }

.slide-content {
  position: relative; z-index: 1; width: 100%;
  color: var(--color-preview-ivory);
  text-shadow: 0 2px 18px rgba(62,59,56,0.55), 0 1px 4px rgba(62,59,56,0.6);
}
.sc-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.sc-title { font-family: 'Paquito', serif; font-weight: 600; font-size: 2.15rem; margin-bottom: 12px; color: inherit; }
.sc-price { font-family: 'Paquito', serif; font-style: italic; font-size: 1.3rem; margin-bottom: 16px; }
.sc-statement { font-family: 'Paquito', serif; font-weight: 400; font-size: 1.3rem; line-height: 1.3; margin-bottom: 14px; max-width: 420px; }
.sc-desc { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 400; line-height: 1.6; margin-bottom: 18px; }
/* Quiet hairline-divided meta row instead of dot-bulleted pills, reads
   like a real page's meta line rather than a feature checklist. */
.sc-details { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 18px; padding: 0; }
.sc-details li { font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; padding: 0 14px; position: relative; }
.sc-details li:first-child { padding-left: 0; }
.sc-details li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: currentColor; opacity: 0.4; }
.sc-closing { font-family: 'Paquito', serif; font-style: italic; font-size: 1rem; opacity: 0.9; }

/* Solid scrim behind the copy on the two asymmetrical slides, a
   subtle localized darkening rather than dimming the whole photo. */
.sc-panel { background: rgba(46, 44, 41, 0.42); backdrop-filter: blur(3px); border-radius: 6px; }

/* Easy Build: left-aligned, minimal, most open space. Image shifted up
   toward its softer, blurred band so the crisper ripple detail lower in
   the photo doesn't compete directly with the bottom-anchored text. */
.demo-frame .preview .slide.slide-easy { align-items: flex-end; background-position: center 15%; }
.slide-easy .slide-content { max-width: 380px; }
.slide-easy::before {
  background: linear-gradient(0deg, rgba(62,59,56,0.58) 0%, rgba(62,59,56,0.24) 46%, transparent 74%);
}

/* Signature Build: asymmetrical, right-anchored. The source photo is
   low-resolution (419x634), so it's shown at a much smaller, closer-to-
   native scale than the other two slides to avoid upscaling artifacts,
   anchored left toward its calmer, darker band. This also means the
   right side (where the text panel sits) falls on the frame's own
   charcoal backdrop rather than a busy part of the photo, so the panel
   scrim carries the contrast instead of a heavy image overlay. */
.demo-frame .preview .slide.slide-signature { align-items: center; justify-content: flex-end; background-size: 56% auto; background-position: 8% 64%; }
.slide-signature .sc-panel { max-width: 380px; padding: 30px 34px; }
.slide-signature::before {
  background: linear-gradient(90deg, transparent 30%, rgba(62,59,56,0.18) 55%, rgba(62,59,56,0.4) 100%);
}

/* Brand + Website: two connected zones, most layered and immersive. One
   gradient darkens both the top and bottom text zones and fades through
   the middle where the water texture reads clearest. */
.demo-frame .preview .slide.slide-brand { align-items: flex-end; flex-direction: column; justify-content: flex-end; gap: 20px; background-position: center 38%; }
.slide-brand .slide-content { display: flex; flex-direction: column; gap: 20px; }
.slide-brand .sc-upper { position: relative; max-width: 460px; }
.slide-brand .sc-lower.sc-panel { max-width: 460px; padding: 26px 32px; }
.slide-brand .sc-lower .sc-eyebrow { display: none; }
.slide-brand::before {
  background: linear-gradient(180deg, rgba(62,59,56,0.4) 0%, transparent 32%, transparent 68%, rgba(62,59,56,0.42) 100%);
}

/* Very slow, near-imperceptible drift on the active slide's photo, tuned
   per tier around each composition's already-chosen crop point. Meant to
   be felt rather than seen, "the preview feels alive" without reading as
   an animation. Paused entirely under reduced-motion, below. */
@keyframes pan-easy { 0%, 100% { background-position: center 13%; } 50% { background-position: center 18%; } }
@keyframes pan-signature { 0%, 100% { background-position: 6% 62%; } 50% { background-position: 10% 66%; } }
@keyframes pan-brand { 0%, 100% { background-position: center 36%; } 50% { background-position: center 40%; } }
.demo-frame .preview .slide.slide-easy.active { animation: pan-easy 28s ease-in-out infinite; }
.demo-frame .preview .slide.slide-signature.active { animation: pan-signature 30s ease-in-out infinite; }
.demo-frame .preview .slide.slide-brand.active { animation: pan-brand 32s ease-in-out infinite; }

/* ============================================================
   WAYS TO WORK TOGETHER
   No boxes, no borders around each package, just generous space
   and a single hairline rule between entries, editorial-spread
   style. Price carries the visual weight; everything else stays
   quiet so the three packages read as one continuous comparison
   rather than three competing cards.
   ============================================================ */
.wtw-list { max-width: 980px; margin: 64px auto 0; display: flex; flex-direction: column; }
.wtw-item {
  padding: 56px 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; column-gap: 60px; align-items: start;
}
.wtw-list .wtw-item:first-child { border-top: none; padding-top: 0; }

.wtw-heading { max-width: 520px; }
.wtw-name { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: 12px; }
.wtw-bestfor { font-family: 'DM Sans', sans-serif; font-size: 0.98rem; line-height: 1.65; opacity: 0.82; max-width: 460px; }

.wtw-price-block { text-align: right; }
.wtw-price { font-family: 'Paquito', serif; font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--color-clay); font-variant-numeric: oldstyle-nums; white-space: nowrap; }
.wtw-scope { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-top: 8px; max-width: 180px; margin-left: auto; }

.wtw-includes {
  grid-column: 1 / -1; list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px;
}
.wtw-includes li { font-family: 'DM Sans', sans-serif; font-size: 0.87rem; line-height: 1.6; opacity: 0.75; padding-left: 22px; position: relative; break-inside: avoid; }
.wtw-includes li::before { content: "\2713"; position: absolute; left: 0; top: 1px; font-size: 0.74rem; color: var(--color-moss); opacity: 0.8; }

.wtw-bottom { grid-column: 1 / -1; margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wtw-note { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; opacity: 0.6; }

/* ============================================================
   RECENT COLLABORATIONS
   A true portfolio rhythm rather than a grid of equal thumbnails:
   one large featured project, a side-by-side pair, another
   featured project, then two more pairs. Simple rectangular
   crops, no frames, no decorative texture, generous whitespace.
   The screenshot is the artwork; text sits quietly below it.
   ============================================================ */
.pf2-rhythm { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 100px; }
.pf2-row { display: grid; gap: 48px; }
.pf2-row--single { grid-template-columns: 1fr; }
.pf2-row--pair { grid-template-columns: repeat(2, 1fr); }

.pf2-item { display: flex; flex-direction: column; }
.pf2-image {
  display: block; position: relative; overflow: hidden;
  background-size: cover; background-position: top center;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
a.pf2-image:hover { transform: scale(1.015); }
.pf2-row--single .pf2-image { aspect-ratio: 16 / 9; }
.pf2-row--pair .pf2-image { aspect-ratio: 4 / 3; }
/* Screen-recording video used as primary portfolio media wherever one
   exists, in place of a static screenshot, per project direction. */
.pf2-video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* A few previews were being cropped too tightly by cover (their
   recordings run wider than the grid's card ratio). Contain shows
   the full recording instead, at the cost of a little letterboxing,
   filled with a matching neutral rather than left transparent. */
.pf2-image--contain { background-color: var(--color-bone); background-size: contain; background-repeat: no-repeat; }
.pf2-image--contain .pf2-video { object-fit: contain; }

.pf2-info { margin-top: 26px; max-width: 560px; }
.pf2-info h3 { font-size: 1.5rem; margin-bottom: 10px; }
.pf2-overview { font-family: 'DM Sans', sans-serif; font-size: 0.98rem; opacity: 0.82; margin-bottom: 4px; }
.pf2-services { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; opacity: 0.58; margin-bottom: 16px; }
.pf2-info .text-link { font-size: 1.05rem; }
.pf2-item--muted .pf2-image { opacity: 0.82; }
.pf2-coming-soon { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; }

/* ============================================================
   IN THEIR WORDS
   Only two testimonials, so treated as an editorial spread, not
   cards: one large featured quote, one smaller quote offset lower
   in a narrower column, pure typography, no boxes or borders.
   ============================================================ */
.itw-layout { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 70px; align-items: start; }
.itw-quote { border: none; }
.itw-quote p {
  font-family: 'Paquito', serif; font-style: italic; font-weight: 400; color: var(--color-espresso);
}
.itw-quote--primary p { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.4; margin-bottom: 26px; }
.itw-quote--secondary { padding-top: 100px; }
.itw-quote--secondary p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; opacity: 0.82; margin-bottom: 20px; }
.itw-quote cite {
  display: block; font-style: normal; font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5;
}

/* ============================================================
   MEET CAGNEY (homepage teaser)
   Warm photo-and-copy pairing, placed after the work and
   testimonials have already built trust. Simple two-column
   layout, portrait doesn't compete with the copy, no card, no
   circular avatar cliche, a soft shadow is the only embellishment.
   ============================================================ */
.meet-cagney-inner { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center; }
.meet-cagney-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; display: block; border-radius: 4px; box-shadow: 0 14px 40px -16px rgba(62,59,56,0.28); }
.meet-cagney-copy .statement.section-head { margin-bottom: 20px; }
.meet-cagney-copy .body-copy { max-width: 100%; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing { text-align: center; max-width: 640px; margin: 0 auto; }
.closing .statement { color: var(--color-cream-white); text-shadow: 0 2px 20px rgba(62,59,56,0.6), 0 1px 3px rgba(62,59,56,0.5); }

/* ============================================================
   FOOTER
   A quiet ending, not another feature section: logo, one nav
   row, the inquiry email, and a single CTA, centered, generous
   space, nothing repeated from elsewhere on the page.
   ============================================================ */
footer { background: var(--color-linen); color: var(--color-espresso); padding: 110px 48px 40px; }
.footer-inner { max-width: 560px; margin: 0 auto; padding-bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.footer-inner .wordmark { color: var(--color-espresso); }
.footer-nav { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 0.9rem; color: var(--color-espresso); opacity: 0.7; transition: opacity 0.3s ease; }
.footer-nav a:hover { opacity: 1; }
.footer-email { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; opacity: 0.65; transition: opacity 0.3s ease; }
.footer-email:hover { opacity: 1; }
footer .fine-print { text-align: center; font-size: 0.8rem; opacity: 0.55; padding-top: 30px; border-top: 1px solid var(--line); max-width: 560px; margin: 0 auto; }

/* ============================================================
   INQUIRY PAGE
   Dedicated intro, deliberately not reusing the shared .hero
   system (that component assumes a full-bleed photo and is only
   correctly wired for the homepage Closing CTA). Contained,
   short, warm and light, matching the rest of the site, no overflow.
   ============================================================ */
.inquiry-intro { background: var(--color-linen); padding: 170px 48px 90px; text-align: center; }
.inquiry-intro-inner { max-width: 620px; margin: 0 auto; }
.inquiry-intro .eyebrow { margin-bottom: 18px; }
.inquiry-headline {
  font-family: 'Paquito', serif; font-weight: 400; color: var(--color-espresso);
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.2; margin-bottom: 22px;
}
.inquiry-sub { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; line-height: 1.7; color: var(--color-espresso); opacity: 0.85; max-width: 460px; margin: 0 auto; }

.inquiry-form-section { background: var(--color-linen); padding: 70px 48px 130px; }
.inquiry-form-wrap { max-width: 620px; margin: 0 auto; }
.form-required-note { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; opacity: 0.55; margin-bottom: 34px; }
.req { color: var(--color-clay); margin-left: 2px; }

/* ============================================================
   FORMS
   ============================================================ */
form.contact-form { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
form.contact-form[hidden] { display: none; }
form.contact-form label { font-size: 0.82rem; margin-bottom: 7px; display: block; }
form.contact-form input, form.contact-form select, form.contact-form textarea {
  width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--color-parchment);
  background: transparent; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--color-espresso);
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus { outline: none; border-bottom-color: var(--color-clay); }
form.contact-form textarea { min-height: 110px; resize: vertical; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-group { display: flex; flex-direction: column; gap: 26px; }
.form-rule { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

.field-error { display: block; font-size: 0.78rem; color: var(--color-clay-deep); margin-top: 6px; min-height: 1em; }
form.contact-form input[aria-invalid="true"], form.contact-form select[aria-invalid="true"], form.contact-form textarea[aria-invalid="true"] { border-bottom-color: var(--color-clay-deep); }

.form-submit-block { margin-top: 44px; text-align: center; }
.form-reassurance { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; opacity: 0.6; margin-top: 16px; }
.form-status { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; margin-top: 24px; min-height: 1.2em; text-align: center; }
.form-status.is-success { color: var(--color-moss-deep); }
.form-status.is-error { color: var(--color-clay-deep); }
#submitBtn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   MOTION: fade + rise reveal, staggered
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: opacity 0.3s ease; transform: none; }
  .scroll-cue::after, #preloader .pl-spinner circle { animation: none; }
  .btn:hover { transform: none; }
  a.pf2-image:hover { transform: none; }
  .demo-frame .preview .slide { transition: opacity 0.3s ease; transform: none; }
  .demo-frame .preview .slide.slide-easy.active,
  .demo-frame .preview .slide.slide-signature.active,
  .demo-frame .preview .slide.slide-brand.active { animation: none; }
}

@media (max-width: 900px) {
  header { position: static; background: var(--color-linen); padding: 24px; }
  header .wordmark { color: var(--color-espresso); }
  .logo-link { height: 105px; margin-left: -14px; margin-top: -8px; }
  .logo-mark { height: 105px; }
  header nav a:not(.btn) { color: var(--color-espresso); }
  /* The landing hero's header stays transparent over the photo on
     mobile (see .landing-hero-header override below), so its nav
     text needs to stay light, not dark like the solid-bar inner-page
     header this rule above is really meant for. */
  .landing-hero-header nav a:not(.btn) { color: var(--color-cream-white); }
  nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .section { padding: 90px 24px; }

  .hero { min-height: 92vh; }
  .hero-inner { padding: 0 24px; }

  .landing-hero { min-height: 92vh; }
  .landing-hero-header {
    position: absolute; background: transparent; background-color: transparent; padding: 24px;
  }
  .landing-hero-content { padding: 100px 24px 0; }

  .intro-section { padding: 110px 24px; }
  .intro-content .statement.section-head { line-height: 1.3; }
  .intro-copy { margin: 0 auto 40px; }

  .heartbeat { min-height: 78vh; background-position: 65% center; }
  .heartbeat-inner { padding: 70px 24px; }

  .process-section { padding: 110px 24px; }
  .process-header { margin-bottom: 60px; }
  .process-grid { grid-template-columns: 1fr; gap: 56px; }
  .process-step { max-width: 100%; }
  .featured-project-grid { grid-template-columns: 1fr; gap: 32px; }
  .featured-project-media { aspect-ratio: 4 / 3; }
  .meet-cagney-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .meet-cagney-photo img { aspect-ratio: 4 / 5; max-width: 220px; margin: 0 auto; }
  .pf2-rhythm { gap: 64px; }
  .pf2-row--pair { grid-template-columns: 1fr; gap: 48px; }
  .pf2-row--single .pf2-image, .pf2-row--pair .pf2-image { aspect-ratio: 4 / 3; }
  .demo-layout { grid-template-columns: 1fr; gap: 32px; }
  .demo-tabs { flex-direction: row; justify-content: flex-start; overflow-x: auto; }
  .demo-tab { flex: 0 0 auto; min-width: 180px; padding-right: 20px; }
  .demo-frame .preview { min-height: 620px; overflow: visible; }
  .slide-nav { padding: 18px 20px; }
  .demo-frame .preview .slide { padding: 30px; }
  .sc-statement, .sc-desc { max-width: 100%; }
  .slide-signature .sc-panel, .slide-brand .sc-lower.sc-panel { max-width: 100%; padding: 22px 24px; }
  .slide-brand .sc-upper { max-width: 100%; }
  .wtw-list { margin-top: 40px; }
  .wtw-item { grid-template-columns: 1fr; padding: 40px 0; }
  .wtw-price-block { text-align: left; margin-top: 18px; }
  .wtw-scope { margin-left: 0; }
  .wtw-includes { grid-template-columns: 1fr; margin-top: 24px; }
  .itw-layout { grid-template-columns: 1fr; gap: 48px; }
  .itw-quote--secondary { padding-top: 0; }
  footer { padding: 80px 24px 32px; }
  .footer-nav { gap: 20px; row-gap: 12px; }
  .inquiry-intro { padding: 110px 24px 60px; }
  .inquiry-form-section { padding: 50px 24px 90px; }
  .form-rule { margin: 30px 0; }
  .form-group { gap: 22px; }
}

/* Below ~400px the logo and full nav no longer fit on one row; let the
   header wrap so nav drops to its own row under the logo instead of
   overlapping/clipping it. */
@media (max-width: 400px) {
  header { flex-wrap: wrap; row-gap: 14px; }
}