/* =========================================================
   Kookaburra Websites — Stylesheet
   ---------------------------------------------------------
   Design language: warm, local, premium. Rounded geometric
   sans-serif with earthy greens & soft browns. Sections
   are choreographed scenes; the ambient palette shifts as
   you scroll between them.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours */
  --green: #5C7C5E;
  --green-light: #7A9A7C;
  --green-dark: #3D5A3F;
  --green-deep: #2A4030;

  --brown: #A68B6B;
  --brown-light: #C4AA8A;
  --brown-soft: #D4C4B0;
  --gold-soft: #D9B581;

  /* Weddings palette */
  --blush: #E8C5BE;
  --blush-soft: #F2DDD7;
  --cream: #F6EDE2;
  --sage: #B7C4A8;

  /* Neutrals */
  --grey-warm: #6B6560;
  --grey-light: #E8E4E0;
  --grey-pale: #F5F3F0;
  --off-white: #F9F7F4;
  --white: #FDFCFB;
  --black: #1A1918;
  --ink: #14130F;
  --text: #2C2926;
  --text-light: #5A5550;

  /* Ambient (mutated by JS on scroll) */
  --bg: var(--off-white);
  --fg: var(--text);
  --fg-soft: var(--text-light);
  --rule: var(--grey-light);
  --surface: var(--white);
  --accent: var(--green);
  --accent-soft: var(--green-light);

  /* Type */
  --font-display: "Nunito", "Quicksand", system-ui, sans-serif;
  --font-body: "Outfit", "Nunito", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (clamp for fluid type) */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --t-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  --t-xl:   clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --t-2xl:  clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem);
  --t-3xl:  clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --t-4xl:  clamp(3rem, 2.2rem + 4vw, 5.5rem);
  --t-hero: clamp(3.6rem, 2.4rem + 6vw, 7.5rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 960px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(26,25,24,.06), 0 2px 8px rgba(26,25,24,.04);
  --shadow: 0 2px 6px rgba(26,25,24,.05), 0 12px 30px rgba(26,25,24,.08);
  --shadow-lg: 0 8px 24px rgba(26,25,24,.07), 0 30px 60px rgba(26,25,24,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-develop: cubic-bezier(0.22, 1, 0.36, 1);      /* cosmos.so develop reveal */
  --ease-fling:   cubic-bezier(0.93, -0.24, 0.4, 1.17); /* phantom.land preloader exit */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--fg);
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-accent, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: .7;
}

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 8vw, 8.5rem); position: relative; }
.section-sm { padding-block: clamp(3rem, 5vw, 5rem); }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 880px) { .split-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.5em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.005em;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  border: 1.5px solid transparent;
  position: relative;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--accent) 80%, black);
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--accent) 90%, black);
  box-shadow: 0 10px 28px -8px color-mix(in oklab, var(--accent) 80%, black);
}
/* #5 3D pushable CTA (hero) — presses onto a darker green lip.
   Declared AFTER .btn:active so .btn-3d:active wins the specificity tie. */
.btn-3d {
  box-shadow: 0 5px 0 var(--green-deep), 0 14px 22px -10px rgba(0,0,0,.5);
  transition: transform .1s var(--ease), box-shadow .1s var(--ease);
}
.btn-3d:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 var(--green-deep), 0 18px 26px -10px rgba(0,0,0,.5); }
.btn-3d:active { transform: translateY(3px);  box-shadow: 0 2px 0 var(--green-deep), 0 8px 14px -10px rgba(0,0,0,.5); }
.btn-lg {
  padding: 1.15em 2em;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: .005em;
}
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: color-mix(in oklab, var(--fg) 25%, transparent);
}
.btn-ghost:hover {
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: color-mix(in oklab, var(--fg) 45%, transparent);
}
.btn-light {
  background: var(--white);
  color: var(--text);
}
.btn-light:hover { background: var(--cream); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 1.1rem 0;
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav-inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.nav-logo img { height: 38px; width: auto; }
.nav-links {
  display: flex; gap: clamp(1rem, 2.2vw, 2rem);
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sm);
}
.nav-link {
  position: relative; padding: .5em 0;
  opacity: .85;
  transition: opacity .2s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transition: right .35s var(--ease);
}
.nav-link:hover, .nav-link.active { opacity: 1; }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.nav-cta { margin-left: 0.4rem; padding: 0.85em 1.7em; }

/* Frosted background lives on a ::before pseudo, NOT on .nav itself.
   `backdrop-filter` on the nav would make it a containing block for
   `position: fixed` descendants, which breaks the mobile .nav-links
   drawer (it'd be sized to the nav bar instead of the viewport, so
   translateY(-100%) wouldn't fully hide it). Pseudo keeps the visual,
   leaves the drawer free to use the viewport. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled::before {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: color-mix(in oklab, var(--fg) 8%, transparent);
}
.nav.scrolled {
  padding: 0.6rem 0;
}

.nav.dark-mode { color: var(--white); }
.nav.dark-mode .nav-link { color: var(--white); }
.nav.scrolled.dark-mode::before {
  background: color-mix(in oklab, var(--ink) 75%, transparent);
}

.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  align-items: center; justify-content: center;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.8px;
  background: currentColor;
  position: relative;
  transition: transform .3s var(--ease);
}
.hamburger span::before, .hamburger span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.8px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.hamburger span::before { top: -7px; }
.hamburger span::after { top: 7px; }
.hamburger.open span { background: transparent; }
.hamburger.open span::before { top: 0; transform: rotate(45deg); }
.hamburger.open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .hamburger { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: var(--t-xl);
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    z-index: 50;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-link { color: var(--white); }
}

/* ---------- Sections w/ palette ---------- */
/* Each section sets the ambient palette tokens; body inherits via JS. */

.scene { position: relative; }
/* NOTE: sections are intentionally transparent — the ambient body bg
   transitions smoothly between scenes as you scroll. Elements that
   need stable per-section color (headings, soft text, form fields,
   contact-info values) read from the local --p-* tokens directly so
   they don't desync during the body-level transition. */
.scene[data-palette="dusk"] {
  --p-bg: #14130F;
  --p-fg: #F1EBE0;
  --p-fg-soft: #CFC7B7;
  --p-rule: rgba(241,235,224,.12);
  --p-surface: #1F1D17;
  --p-accent: #B7C4A8;
  --p-accent-soft: #7A9A7C;
}
.scene[data-palette="warm"] {
  --p-bg: #F9F7F4;
  --p-fg: #2C2926;
  --p-fg-soft: #4F4A45;
  --p-rule: #D6CFC4;
  --p-surface: #FFFFFF;
  --p-accent: #5C7C5E;
  --p-accent-soft: #A68B6B;
}
.scene[data-palette="forest"] {
  --p-bg: #2A4030;
  --p-fg: #F1EBE0;
  --p-fg-soft: #DCE3CE;
  --p-rule: rgba(241,235,224,.18);
  --p-surface: #355238;
  --p-accent: #E5C594;
  --p-accent-soft: #CDD8BD;
}
.scene[data-palette="parchment"] {
  --p-bg: #F1EAD9;
  --p-fg: #2C2926;
  --p-fg-soft: #56514C;
  --p-rule: #DDD2BC;
  --p-surface: #F8F2E4;
  --p-accent: #A68B6B;
  --p-accent-soft: #5C7C5E;
}
.scene[data-palette="sage"] {
  --p-bg: #EAEFE3;
  --p-fg: #2A4030;
  --p-fg-soft: #5A6B53;
  --p-rule: #C8D2BD;
  --p-surface: #F3F6EE;
  --p-accent: #5C7C5E;
  --p-accent-soft: #A68B6B;
}
.scene[data-palette="blush"] {
  --p-bg: #F6EDE2;
  --p-fg: #3A2F2A;
  --p-fg-soft: #5C4D46;
  --p-rule: #E5D5C8;
  --p-surface: #FBF5EC;
  --p-accent: #C48B7B;
  --p-accent-soft: #B7C4A8;
}
.scene[data-palette="night"] {
  --p-bg: #1A1918;
  --p-fg: #F9F7F4;
  --p-fg-soft: #BCB5AC;
  --p-rule: rgba(249,247,244,.12);
  --p-surface: #25231F;
  --p-accent: #B7C4A8;
  --p-accent-soft: #C4AA8A;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding: 8rem 0 6rem;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 78% 8%, rgba(183,196,168,.18), transparent 60%),
    radial-gradient(900px 600px at 12% 100%, rgba(166,139,107,.22), transparent 60%),
    linear-gradient(165deg, #0F1A12 0%, #14130F 55%, #1A1918 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px 3px);
}
.hero-glow {
  position: absolute; z-index: -1;
  width: 48vmax; height: 48vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  /* Promote to its own compositor layer: the expensive blur rasterizes
     ONCE and the scale/translate animation just transforms that cached
     texture on the GPU. Without this, animating scale() on an 80px-blurred
     65vmax element re-rasterizes the whole blur every frame -> severe lag. */
  will-change: transform;
  transform: translateZ(0);
  background: radial-gradient(circle at center, var(--green-light) 0%, transparent 60%);
  top: -15vmax;
  right: -15vmax;
  animation: glowFloat 18s var(--ease) infinite alternate;
}
.hero-glow.two {
  background: radial-gradient(circle at center, var(--brown-light) 0%, transparent 60%);
  left: -20vmax; top: auto; bottom: -20vmax; right: auto;
  animation-duration: 22s;
  animation-delay: -6s;
  opacity: .28;
}
@keyframes glowFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(8vmax, 6vmax) scale(1.15); }
}

.hero-grid {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .9rem;
  border: 1px solid rgba(241,235,224,.18);
  border-radius: 999px;
  font-size: var(--t-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(241,235,224,.85);
  font-family: var(--font-display);
  font-weight: 500;
  backdrop-filter: blur(10px);
}
.hero-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-light);
  box-shadow: 0 0 12px var(--green-light);
}
/* #1 Gradient-clip headline — light-green/cream sheen flows through the
   grotesk words; the italic <em> keeps its own serif green (below). */
.hero h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 1.4rem 0 1.4rem;
  background: linear-gradient(110deg, #B7C4A8, #E8E0CF, #7A9A7C, #B7C4A8);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: heroFlow 9s linear infinite;
}
@keyframes heroFlow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; background-position: 0 0; }
}
.hero h1 em {
  font-style: italic;
  font-family: "Lora", "Nunito", serif;
  font-weight: 500;
  color: color-mix(in oklab, var(--green-light) 92%, white);
}
.hero p.lede {
  font-size: var(--t-lg);
  color: rgba(241,235,224,.78);
  max-width: 36ch;
  margin-bottom: 2rem;
  font-weight: 300;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.25); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }

/* Stagger reveal */
.stagger > * { opacity: 0; transform: translateY(28px); }
.stagger.in > * {
  animation: rise .9s var(--ease-out) forwards;
}
.stagger.in > *:nth-child(1) { animation-delay: .05s; }
.stagger.in > *:nth-child(2) { animation-delay: .15s; }
.stagger.in > *:nth-child(3) { animation-delay: .3s; }
.stagger.in > *:nth-child(4) { animation-delay: .45s; }
.stagger.in > *:nth-child(5) { animation-delay: .6s; }

/* #2 "Develop" entrance — blur-scale photo-developing reveal, staggered
   headline -> lede -> CTAs. The preloader (#4) adds .in to .hero-grid so
   this fires as one choreographed beat with the gradient headline.
   The h1 carries BOTH develop AND heroFlow (the generic rule below would
   otherwise override the gradient flow via the animation shorthand). */
.hero-copy > * { opacity: 0; }
.hero-grid.in .hero-copy > * { animation: develop 1.4s var(--ease-develop) both; }
.hero-grid.in .hero-copy > h1 { animation: develop 1.4s var(--ease-develop) both, heroFlow 9s linear infinite; }
.hero-grid.in .hero-copy > *:nth-child(1) { animation-delay: .15s; }
.hero-grid.in .hero-copy > *:nth-child(2) { animation-delay: .35s; }
.hero-grid.in .hero-copy > *:nth-child(3) { animation-delay: .55s; }
@keyframes develop {
  from { opacity: 0; filter: blur(16px); transform: scale(.94) translateY(20px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { opacity: 1; }
  .hero-grid.in .hero-copy > *  { animation: none; }
  .hero-grid.in .hero-copy > h1 { animation: none; }
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ASCII bird */
.ascii-frame {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  border-radius: var(--radius-lg);
  background: rgba(20,19,15,.5);
  border: 1px solid rgba(241,235,224,.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  container-type: inline-size;
}
/* Hide ASCII art on mobile / tablet — desktop-only flourish.
   1024px matches the hero-grid 2-col breakpoint, so the headline
   gets the full width below it instead of an empty second column. */
@media (max-width: 1023px) {
  .ascii-frame { display: none; }
}
.ascii-frame::before {
  content: "● ● ●";
  position: absolute;
  top: 12px; left: 16px;
  font-size: 10px;
  color: rgba(255,255,255,.2);
  letter-spacing: 3px;
}
.ascii-frame::after {
  content: "kook_os.bat";
  position: absolute;
  top: 12px; right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.25);
  letter-spacing: .1em;
}
.ascii {
  font-family: var(--font-mono);
  /* Art is ~88 chars wide. JetBrains Mono ≈ 0.6em per char ⇒ 52.8em
     wide. To fill container we want font-size ≈ container/52.8 px,
     i.e. ~1.89cqi. Trim a touch for frame padding. */
  font-size: clamp(8px, 1.8cqi, 20px);
  line-height: 1.08;
  letter-spacing: 0;
  white-space: pre;
  margin: 1rem 0 0;
  color: var(--green-light);
  text-shadow: 0 0 18px rgba(122,154,124,.35);
  overflow: hidden;
}
.ascii-phrase {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: pre;
  text-align: left;
}
.ascii .phrase-caret { margin-left: 0; }
.ascii .caret {
  display: inline-block;
  width: 0.55ch;
  background: var(--green-light);
  animation: blink 1s steps(2) infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(241,235,224,.55);
  animation: float 3s ease-in-out infinite;
}
.hero-scroll svg { width: 18px; height: 18px; }
@keyframes float {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ---------- Trust bar ---------- */
.trust {
  background: var(--ink);
  color: rgba(249,247,244,.78);
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.trust-row {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
  font-size: var(--t-sm);
  font-family: var(--font-display);
  font-weight: 500;
}
@media (min-width: 880px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; align-items: center; gap: .7rem; }
.trust-item svg { width: 18px; height: 18px; color: var(--green-light); flex-shrink: 0; }

/* ---------- Cards ---------- */
/* Cards sit on a local --p-surface background, so all text inside
   anchors to the local palette rather than tracking the body. */
.card {
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--p-accent, var(--accent)) 50%, var(--p-rule, var(--rule)));
}

/* Services */
.services-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 880px) { .services-grid { grid-template-columns: 1fr 1fr; } }
.service-card {
  padding: clamp(2rem, 3vw, 3rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.service-card .icon-blob {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 14%, var(--p-bg, var(--bg)));
  color: var(--p-accent, var(--accent));
  display: grid; place-items: center;
  margin-bottom: 1.6rem;
  transition: transform .35s var(--ease);
}
.service-card:hover .icon-blob { transform: rotate(-6deg) scale(1.08); }

/* #3 Hover lift + accent sheen sweep. A diagonal light band swipes across
   the card once on hover, tinted to the card's own accent (--sheen defaults
   to the palette accent; the wedding card overrides it to terracotta). */
.service-card { --sheen: var(--p-accent, var(--accent)); }
.services-grid .service-card { transition: opacity 1.1s var(--ease-out), transform .3s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.service-card.in:hover,
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.30);
}
.services-grid:hover .service-card:not(:hover) { opacity: .8; transform: scale(.985); }
.service-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 38%, color-mix(in oklab, var(--sheen) 30%, transparent) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .85s var(--ease-out);
}
.service-card:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .service-card::after { display: none; }
}

/* #1 Cascading checklist on reveal: rows slide in from the left, each green
   checkmark draws itself via a left->right clip wipe, staggered. Hidden
   state scoped to no-preference so reduced-motion shows the full list. */
@media (prefers-reduced-motion: no-preference) {
  .service-card ul li { opacity: 0; transform: translateX(-12px); }
  .service-card ul li::before { clip-path: inset(0 100% 0 0); }
  .service-card.in ul li         { animation: svcRowIn .7s var(--ease-out) forwards; }
  .service-card.in ul li::before { animation: svcCheckDraw .6s var(--ease-out) forwards; }
  .service-card.in ul li:nth-child(1) { animation-delay: .28s; }
  .service-card.in ul li:nth-child(2) { animation-delay: .44s; }
  .service-card.in ul li:nth-child(3) { animation-delay: .60s; }
  .service-card.in ul li:nth-child(4) { animation-delay: .76s; }
  .service-card.in ul li:nth-child(5) { animation-delay: .92s; }
  .service-card.in ul li:nth-child(1)::before { animation-delay: .40s; }
  .service-card.in ul li:nth-child(2)::before { animation-delay: .56s; }
  .service-card.in ul li:nth-child(3)::before { animation-delay: .72s; }
  .service-card.in ul li:nth-child(4)::before { animation-delay: .88s; }
  .service-card.in ul li:nth-child(5)::before { animation-delay: 1.04s; }
}
@keyframes svcRowIn    { to { opacity: 1; transform: none; } }
@keyframes svcCheckDraw { to { clip-path: inset(0 0 0 0); } }
.service-card .icon-blob svg { width: 26px; height: 26px; }
.service-card h3 { font-size: var(--t-2xl); margin-bottom: .35rem; color: var(--p-fg, var(--fg)); }
.service-card .sub { color: var(--p-fg-soft, var(--fg-soft)); margin-bottom: 1.4rem; font-size: var(--t-lg); font-weight: 300; }
.service-card ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.service-card ul li {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--p-fg, var(--fg));
}
.service-card ul li::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  background: var(--p-accent, var(--accent));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.1-1.1L6.3 9 11.9 3.4 13 4.5z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.1-1.1L6.3 9 11.9 3.4 13 4.5z'/></svg>") center/contain no-repeat;
}
.service-card .price {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--p-fg-soft, var(--fg-soft));
  margin-bottom: 1.4rem;
}
.service-card .price strong {
  color: var(--p-fg, var(--fg));
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-mini {
  padding: 1.8rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--p-rule, var(--rule));
  background: transparent;
  margin-top: 1.5rem;
}
.service-mini strong { font-family: var(--font-display); font-size: var(--t-lg); }

/* ---------- Section headings ---------- */
.section-head {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 3rem;
  max-width: 56ch;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.section-head p {
  font-size: var(--t-lg);
  color: var(--fg-soft);
  font-weight: 300;
  margin: 0;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 880px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.step {
  position: relative;
  padding: 2rem 0 0;
}
.step-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--p-accent, var(--accent));
  -webkit-text-stroke: 1.5px transparent;
  display: block;
  margin-bottom: 1.2rem;
  transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
.step:hover .step-num {
  color: transparent;
  -webkit-text-stroke-color: color-mix(in oklab, var(--p-accent, var(--accent)) 80%, transparent);
}
.step h3 { font-size: var(--t-xl); margin-bottom: .6rem; }
.step p { color: var(--fg-soft); margin: 0; }
.steps-line {
  position: absolute;
  top: 1.6rem;
  left: 4rem; right: 4rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--p-rule, var(--rule)), transparent);
  display: none;
}
@media (min-width: 880px) { .steps-line { display: block; } }

/* ---------- Portfolio ---------- */
.portfolio-grid {
  display: grid; gap: 1.8rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 720px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }

.project {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-soon { opacity: .6; cursor: default; pointer-events: none; }
.project-soon:hover { transform: none; box-shadow: none; }
.project .frame {
  aspect-ratio: 16/10;
  background: var(--p-bg, var(--bg));
  position: relative;
  overflow: hidden;
}
.browser-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--p-bg, var(--bg));
  border: 1px solid var(--p-rule, var(--rule));
  box-shadow: var(--shadow);
}
.browser-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .7rem;
  background: color-mix(in oklab, var(--p-fg, var(--fg)) 5%, var(--p-surface, var(--surface)));
  border-bottom: 1px solid var(--p-rule, var(--rule));
}
.browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, var(--p-fg, var(--fg)) 18%, transparent); }
.browser-bar .url {
  margin-left: auto; margin-right: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--p-fg-soft, var(--fg-soft));
  padding: .25rem .65rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--p-fg, var(--fg)) 4%, transparent);
}
.browser-body {
  aspect-ratio: 16/10;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--p-accent, var(--accent)) 20%, var(--p-surface, var(--surface))), color-mix(in oklab, var(--p-accent-soft, var(--accent-soft)) 30%, var(--p-surface, var(--surface)))),
    var(--p-surface, var(--surface));
  position: relative;
  overflow: hidden;
}
.browser-body .placeholder-content {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in oklab, var(--p-fg, var(--fg)) 70%, transparent);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.browser-body .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.project-meta {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.project-meta h3 { font-size: var(--t-lg); margin: 0 0 .25rem; }
.project-meta p { color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); margin: 0; }
.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .35em .8em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 14%, transparent);
  color: var(--p-accent, var(--accent));
  font-weight: 600;
}

/* ---------- Testimonials ---------- */
.tcarousel { position: relative; }
.tslide {
  display: none;
  text-align: center;
  max-width: 64ch;
  margin: 0 auto;
}
.tslide.active { display: block; animation: rise .6s var(--ease); }
.tslide .quote-mark {
  font-family: "Lora", serif;
  font-size: 6rem;
  line-height: .8;
  color: var(--p-accent, var(--accent));
  opacity: .4;
  margin-bottom: 1rem;
}
.tslide blockquote {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 2rem;
  text-wrap: balance;
}
.tslide cite {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-base);
}
.tslide cite span {
  display: block;
  font-weight: 400;
  color: var(--p-fg-soft, var(--fg-soft));
  font-size: var(--t-sm);
  margin-top: .2rem;
}
.tcontrols {
  display: flex; gap: .5rem;
  justify-content: center;
  margin-top: 2.5rem;
}
.tdot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--p-fg, var(--fg)) 20%, transparent);
  transition: width .3s var(--ease), background-color .3s var(--ease);
  position: relative;
  cursor: pointer;
}
.tdot::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.tdot.active {
  width: 38px;
  border-radius: 999px;
  background: var(--p-accent, var(--accent));
}
.tcontrols { gap: .7rem; }

/* ---------- Pricing teaser ---------- */
.teaser {
  display: grid; gap: 2rem;
  align-items: center;
  text-align: center;
}
.teaser .big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: .95;
  color: var(--p-fg, var(--fg));
  margin: 0;
}
.teaser .big em {
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--p-accent, var(--accent));
}
.teaser .big-row {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .teaser .big-row { grid-template-columns: 1fr 1fr; } }
.teaser .figure {
  padding: 2.5rem 2rem;
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: var(--radius-lg);
  background: var(--p-surface, var(--surface));
  transition: transform .35s var(--ease);
}
.teaser .figure:hover { transform: translateY(-3px); }
.teaser .label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--p-fg-soft, var(--fg-soft));
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: .8rem;
}
.teaser small { font-size: var(--t-sm); color: var(--p-fg-soft, var(--fg-soft)); display: block; margin-top: .5rem; font-weight: 400; }

/* ---------- Local CTA ---------- */
.local {
  position: relative;
  overflow: hidden;
}
.local-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 880px) { .local-grid { grid-template-columns: 1.2fr 1fr; } }
.local h2 em { font-family: "Lora", serif; font-style: italic; font-weight: 500; color: var(--p-accent, var(--accent)); }
.local-stat {
  font-family: var(--font-display);
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--p-accent, var(--accent));
  background: var(--p-surface, var(--surface));
  border-radius: 0 var(--radius) var(--radius) 0;
}
.local-stat .num { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.02em; display: block; }
.local-stat .sub { color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); }

.youyangs-wrap { overflow: visible; }
.youyangs {
  width: 100%;
  height: auto;
  color: var(--p-accent, var(--accent));
  opacity: .85;
}
/* Load-in choreography (fires when the section reveals, via .reveal.in):
   foreground slides in from the left, mountain range from the right, then
   the sun rises up + fades in above the peaks. SVG child transforms are in
   user units (viewBox 0 0 600 200). */
.youyangs .mtn-range,
.youyangs .mtn-fore,
.youyangs .mtn-sun { opacity: 0; }
.reveal.in .youyangs .mtn-fore  { animation: yFromLeft  1.6s var(--ease-out) .4s  forwards; }
.reveal.in .youyangs .mtn-range { animation: yFromRight 1.6s var(--ease-out) .4s  forwards; }
.reveal.in .youyangs .mtn-sun   { animation: ySunRise  1.5s var(--ease-out) 1.1s forwards; }
@keyframes yFromLeft  { from { opacity: 0; transform: translateX(-46px); } to { opacity: .6; transform: translateX(0); } }
@keyframes yFromRight { from { opacity: 0; transform: translateX(46px);  } to { opacity: 1;  transform: translateX(0); } }
@keyframes ySunRise   { from { opacity: 0; transform: translateY(34px);  } to { opacity: .4; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .youyangs .mtn-range { opacity: 1; }
  .youyangs .mtn-fore  { opacity: .6; }
  .youyangs .mtn-sun   { opacity: .4; }
  .youyangs .mtn-range,
  .youyangs .mtn-fore,
  .youyangs .mtn-sun { animation: none; transform: none; }
}

/* ---------- Inline mini-form ---------- */
.mini-form {
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--p-rule, var(--rule));
  text-align: left;
}
.mini-form .field { margin-bottom: 1rem; }
.mini-form label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-fg-soft, var(--fg-soft));
  margin-bottom: .5rem;
}
.mini-form input, .mini-form select, .mini-form textarea {
  width: 100%;
  font: inherit;
  color: var(--p-fg, var(--fg));
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--p-rule, var(--rule));
  padding: .65rem 0;
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.mini-form input:focus, .mini-form select:focus, .mini-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--p-accent, var(--accent));
}
.mini-form textarea { resize: vertical; min-height: 120px; }
.mini-form .honey { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--off-white);
  padding: 5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer .youyangs-deco {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 90px;
  color: var(--green-dark);
  opacity: .35;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 3rem;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { height: 44px; }
.footer-brand p { color: rgba(249,247,244,.6); font-size: var(--t-sm); max-width: 38ch; margin-top: 1rem; }
.footer-col h4 {
  color: rgba(249,247,244,.5);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-col li a {
  color: rgba(249,247,244,.8);
  font-size: var(--t-sm);
  transition: color .2s;
}
.footer-col li a:hover { color: var(--green-light); }
.footer-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(249,247,244,.08);
  font-size: var(--t-xs);
  color: rgba(249,247,244,.5);
  font-family: var(--font-display);
}
.socials { display: flex; gap: .8rem; }
.socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(249,247,244,.15);
  transition: background-color .2s, border-color .2s, color .2s;
  color: rgba(249,247,244,.8);
}
.socials a:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.socials svg { width: 16px; height: 16px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .28s; }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  padding: 12rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
  max-width: 18ch;
}
.page-hero h1 em { font-family: "Lora", serif; font-style: italic; font-weight: 500; color: var(--accent); }
.page-hero p {
  font-size: var(--t-xl);
  color: var(--fg-soft);
  max-width: 52ch;
  font-weight: 400;
}

/* ---------- Pricing page ---------- */
.tiers {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiers.tiers-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .tiers.tiers-3 { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: var(--radius-xl);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tier.featured {
  background: var(--ink);
  color: var(--off-white);
  border-color: var(--green);
}
.tier.featured .price-renew, .tier.featured .tier-name { color: rgba(249,247,244,.7); }
.tier.featured .price-main { color: var(--white); }
.tier .badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .4em 1em;
  border-radius: 999px;
}
.tier-name {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--p-fg-soft, var(--fg-soft));
  margin-bottom: 1rem;
}
.tier .price-main {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  display: block;
  color: var(--p-fg, var(--fg));
}
.tier .price-from {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--p-fg-soft, var(--fg-soft));
  margin-bottom: .35rem;
  display: block;
  font-weight: 500;
}
.tier .price-renew {
  font-size: var(--t-sm);
  color: var(--p-fg-soft, var(--fg-soft));
  margin-top: .4rem;
  display: block;
}
.tier ul {
  list-style: none; padding: 0;
  margin: 1.5rem 0;
  display: grid; gap: .55rem;
  border-top: 1px solid color-mix(in oklab, var(--p-fg, var(--fg)) 8%, transparent);
  padding-top: 1.5rem;
  flex: 1;
}
.tier ul li {
  font-size: var(--t-sm);
  display: flex; gap: .6rem; align-items: flex-start;
}
.tier ul li.no { color: color-mix(in oklab, var(--p-fg, var(--fg)) 38%, var(--p-surface, var(--surface))); }
.tier.featured ul li.no { color: rgba(249,247,244,.45); }
.tier ul li::before {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.1-1.1L6.3 9 11.9 3.4 13 4.5z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.3 11.3 3 8l1.1-1.1L6.3 9 11.9 3.4 13 4.5z'/></svg>") center/contain no-repeat;
}
.tier ul li.no::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M3 7.5h10v1H3z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M3 7.5h10v1H3z'/></svg>") center/contain no-repeat;
}
.tier.featured ul li::before { background: var(--green-light); }
.tier .tier-btn {
  display: block;
  text-align: center;
  margin-top: 1rem;
  padding: .9em 1.2em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 12%, transparent);
  color: var(--p-accent, var(--accent));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  transition: background-color .2s, color .2s;
}
.tier .tier-btn:hover { background: var(--p-accent, var(--accent)); color: var(--white); }
.tier.featured .tier-btn { background: var(--green); color: var(--white); }
.tier.featured .tier-btn:hover { background: var(--green-light); }

/* Add-ons */
.addons-group { margin-top: 1rem; }
.addon-section {
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--p-surface, var(--surface));
}
.addon-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  text-align: left;
  transition: background-color .2s;
}
.addon-toggle:hover { background: color-mix(in oklab, var(--p-fg, var(--fg)) 3%, transparent); }
.addon-toggle .chev {
  width: 18px; height: 18px;
  transition: transform .3s var(--ease);
}
.addon-section.open .chev { transform: rotate(180deg); }
.addon-body {
  display: none;
  padding: 0 1.5rem 1.5rem;
}
.addon-section.open .addon-body { display: block; }
.addon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.addon-table th, .addon-table td {
  text-align: left;
  padding: .85rem .8rem;
  border-bottom: 1px solid var(--p-rule, var(--rule));
}
.addon-table th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-fg-soft, var(--fg-soft));
}
.addon-table tr:last-child td { border-bottom: 0; }
.addon-table td.price-cell { font-family: var(--font-display); font-weight: 600; white-space: nowrap; color: var(--accent); }
.addon-subnote { display: block; margin-top: .35rem; font-size: .85em; color: var(--p-fg-soft, var(--fg-soft)); line-height: 1.4; }
.addon-blurb {
  color: var(--p-fg-soft, var(--fg-soft));
  font-size: var(--t-sm);
  margin: 0 0 1.2rem;
  max-width: 64ch;
}
@media (max-width: 720px) {
  .addon-table thead { display: none; }
  .addon-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--p-rule, var(--rule)); }
  .addon-table tr:last-child { border-bottom: 0; }
  .addon-table td { display: block; padding: .2rem 0; border: 0; }
  .addon-table td:first-child { font-weight: 600; font-family: var(--font-display); font-size: var(--t-base); }
}

/* Universal inclusions */
.includes-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2rem;
}
.includes-grid li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sm);
}
.includes-grid li svg { width: 18px; height: 18px; color: var(--p-accent, var(--accent)); flex-shrink: 0; margin-top: 2px; }

/* ---------- FAQ Accordion ---------- */
.faq-group { margin-bottom: 3rem; }
.faq-group h3 {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--p-accent, var(--accent));
  margin-bottom: 1rem;
}
.faq-item {
  border-bottom: 1px solid var(--p-rule, var(--rule));
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lg);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
}
.faq-q .plus {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
  transition: transform .35s var(--ease);
}
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--p-accent, var(--accent));
}
.faq-q .plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-q .plus::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq-item.open .faq-q .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq-a > div {
  padding: 0 0 1.6rem;
  color: var(--fg-soft);
  max-width: 65ch;
  font-size: var(--t-base);
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } }
.contact-form .field { margin-bottom: 1.4rem; }
.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: .5rem;
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--p-rule, var(--rule));
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
  transition: border-color .25s, background .25s, box-shadow .25s;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.01);
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover {
  border-color: color-mix(in oklab, var(--p-rule, var(--rule)) 50%, var(--p-fg, var(--fg)));
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 0;
  border-color: var(--p-accent, var(--accent));
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form .honey { position: absolute; left: -9999px; }
/* Tier field locked to N/A (when "Something else" is chosen) — muted, not interactive-looking. */
.field.is-disabled label { opacity: .55; }
.field.is-disabled select {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.contact-info {
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 3vw, 2.5rem);
  border: 1.5px solid var(--p-rule, var(--rule));
  display: flex; flex-direction: column; gap: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.contact-info .row {
  display: flex; gap: 1rem; align-items: flex-start;
}
.contact-info .row svg { width: 22px; height: 22px; color: var(--p-accent, var(--accent)); flex-shrink: 0; margin-top: 4px; }
.contact-info .label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-fg-soft, var(--fg-soft));
}
.contact-info .val { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); margin-top: .15rem; word-break: break-word; color: var(--p-fg, var(--fg)); }

.form-msg {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-family: var(--font-display);
  margin-top: 1rem;
  display: none;
}
.form-msg.show { display: block; animation: rise .5s var(--ease-out); }
.form-msg.success {
  background: color-mix(in oklab, var(--green) 18%, transparent);
  color: var(--green-dark);
  border: 1px solid color-mix(in oklab, var(--green) 35%, transparent);
}
.form-msg.error {
  background: color-mix(in oklab, #c45 18%, transparent);
  color: #8b1f3a;
  border: 1px solid color-mix(in oklab, #c45 35%, transparent);
}

/* ---------- Weddings page extras ---------- */
.weddings-hero {
  background:
    radial-gradient(800px 500px at 80% 20%, var(--blush-soft), transparent 70%),
    radial-gradient(700px 500px at 10% 90%, var(--cream), transparent 70%),
    var(--off-white);
}
.wed-feature-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2.5rem;
}
.wed-feature {
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  transition: transform .3s var(--ease);
}
.wed-feature:hover { transform: translateY(-3px); }
.wed-feature .icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 16%, transparent);
  color: var(--p-accent, var(--accent));
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.wed-feature .icon svg { width: 22px; height: 22px; }
.wed-feature h4 { font-size: var(--t-lg); margin-bottom: .25rem; }
.wed-feature p { color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); margin: 0; }

.wed-example {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 880px) { .wed-example { grid-template-columns: 1fr 1.1fr; } }

/* ---------- About ---------- */
.about-portrait {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--brown-soft), var(--green-light));
  position: relative;
  overflow: hidden;
}
.about-portrait .ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(20,19,15,.4);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.about-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.values {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2.5rem;
}
.value {
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--p-accent, var(--accent));
  background: var(--p-surface, var(--surface));
  color: var(--p-fg, var(--fg));
}
.value h4 { font-size: var(--t-base); margin-bottom: .3rem; color: inherit; }
.value p { color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); margin: 0; }

/* ---------- Portfolio filters ---------- */
.filters {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding: .35rem;
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: 999px;
  width: fit-content;
}
.filter-btn {
  padding: .55em 1.2em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--p-fg-soft, var(--fg-soft));
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.filter-btn.active {
  background: var(--p-accent, var(--accent));
  color: var(--white);
}

/* Portfolio controls: group slider + type chips on one row */
.portfolio-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}
.portfolio-controls .filters { margin-bottom: 0; }

/* Segmented "slider" that flips between Our work and Demos/templates */
.seg {
  position: relative;
  display: inline-flex;
  padding: .35rem;
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: 999px;
}
.seg-btn {
  position: relative;
  z-index: 1;
  padding: .62em 1.4em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  white-space: nowrap;
  color: var(--p-fg-soft, var(--fg-soft));
  transition: color .3s var(--ease);
}
.seg-btn.active { color: var(--white); }
.seg-thumb {
  position: absolute;
  top: .35rem;
  bottom: .35rem;
  left: .35rem;
  width: 0;
  border-radius: 999px;
  background: var(--p-accent, var(--accent));
  box-shadow: var(--shadow);
  transition: left .4s var(--ease-fling), width .4s var(--ease-fling);
}
.grid-caption {
  margin: 1.2rem 0 0;
  color: var(--fg-soft);
  font-size: var(--t-base);
  max-width: 58ch;
}
@media (max-width: 560px) {
  .seg { width: 100%; }
  .seg-btn { flex: 1; text-align: center; padding-left: .5em; padding-right: .5em; }
}

/* Expandable project card cue (Holly & Russell) */
.project-expandable { cursor: pointer; }
.project-expandable:focus-visible { outline: 2px solid var(--p-accent, var(--accent)); outline-offset: 3px; }
.case-cue {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--p-accent, var(--accent));
}
.case-cue .chev { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.project-expandable[aria-expanded="true"] .case-cue .chev { transform: rotate(180deg); }

/* Inline case-study panel */
.case-panel {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .45s var(--ease), visibility 0s linear .45s;
}
.case-panel.open { visibility: visible; transition: height .45s var(--ease), visibility 0s; }
.case-card {
  margin-top: 1.8rem;
  background: var(--p-surface, var(--surface));
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.6rem);
}
.case-head h3 { color: var(--p-fg, var(--fg)); margin: 0 0 .6rem; max-width: 24ch; }
.case-head h3 em { font-family: 'Lora', serif; font-style: italic; font-weight: 500; color: var(--p-accent, var(--accent)); }
.case-head p { color: var(--p-fg-soft, var(--fg-soft)); margin: 0; max-width: 60ch; }
.case-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem 2.6rem;
  margin-top: 1.8rem;
}
@media (min-width: 760px) { .case-cols { grid-template-columns: 1.05fr .95fr; } }
.case-col h4 {
  color: var(--p-accent, var(--accent));
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.case-list a {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--p-rule, var(--rule));
  border-radius: 12px;
  background: color-mix(in oklab, var(--p-fg, var(--fg)) 2%, transparent);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.case-list a:hover {
  border-color: var(--p-accent, var(--accent));
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 8%, transparent);
  transform: translateX(3px);
}
.case-list span {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--p-fg, var(--fg));
}
.case-list span .ext { width: 14px; height: 14px; opacity: .55; }
.case-list small { display: block; margin-top: .25rem; color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); }
.case-note { color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); margin: 0 0 .9rem; }
.case-tags { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.case-tags li {
  font-size: var(--t-sm);
  padding: .4em .9em;
  border-radius: 999px;
  border: 1px solid var(--p-rule, var(--rule));
  background: color-mix(in oklab, var(--p-accent, var(--accent)) 10%, transparent);
  color: var(--p-fg, var(--fg));
}
.case-foot {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--p-rule, var(--rule));
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.case-fineprint { margin: 0; color: var(--p-fg-soft, var(--fg-soft)); font-size: var(--t-sm); max-width: 44ch; opacity: .85; }

/* #4 KOOKABURRA-OS preloader — black gate boots "KOOKABURRA OS" with a real
   progress bar, then two mono lines fling apart + skew to reveal the hero. */
html.boot-seen .boot { display: none !important; }
.boot { position: fixed; inset: 0; z-index: 9999; background: #14130F;
  display: grid; place-items: center; gap: 1.2rem; }
.boot-line { font-family: var(--font-mono); color: #E8E0CF; margin: 0;
  font-size: clamp(1.1rem, 3.4vw, 2rem); overflow: hidden; letter-spacing: .04em; white-space: nowrap; }
.boot-line span { display: block; will-change: transform; }
.boot-bar { position: fixed; left: 0; bottom: 0; width: 100%; height: 3px;
  background: rgba(255,255,255,.08); }
.boot-bar i { display: block; height: 100%; width: 100%;
  background: var(--green-light); transform: scaleX(0); transform-origin: left;
  transition: transform .2s linear; }
.boot.loaded .boot-line span     { animation: fling .9s var(--ease-fling) forwards; }
.boot.loaded .boot-line.two span { animation: flingDown .9s var(--ease-fling) forwards; }
.boot.loaded { animation: bootOut .5s .5s forwards; }
@keyframes fling     { to { transform: translateX(-12vw) skewX(-18deg); opacity: 0; } }
@keyframes flingDown { to { transform: translateX(12vw)  skewX(18deg);  opacity: 0; } }
@keyframes bootOut   { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .boot { transition: opacity .3s; }
  .boot.loaded { opacity: 0; visibility: hidden; animation: none; }
  .boot.loaded .boot-line span { animation: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}