/* =========================================================
   Amy Garside Media
   Warm premium base, dark cinematic hero.
   Palette and type are defined once below for easy editing.
   ========================================================= */

:root {
  /* --- Warm neutrals --- */
  --ink:        #14110D;   /* warm near-black, used for dark sections */
  --ink-2:      #1C1813;   /* lifted dark, for cards on dark */
  --ink-3:      #2A241C;   /* hairlines on dark */
  --cream:      #F6F1E8;   /* page background (warm off-white) */
  --paper:      #FCF9F3;   /* cards on cream */
  --cream-edge: #E8DECF;   /* warm border on light */

  /* --- Text --- */
  --text:       #211C16;   /* body text on cream */
  --text-soft:  #6E6457;   /* muted text on cream */
  --text-light: #EFE7D9;   /* body text on dark */
  --text-light-soft: #B6AC9C; /* muted text on dark */

  /* --- Warm accents --- */
  --gold:       #C29A4E;   /* metallic warm accent */
  --gold-deep:  #A6822F;
  --terracotta: #C0653D;

  /* --- Electric gradient (brand wordmark only) --- */
  /* HSL parts so they can feed gradients cleanly */
  --color-1: 196 66% 61%;  /* cyan */
  --color-2: 222 63% 62%;  /* blue */
  --color-3: 264 58% 67%;  /* violet */
  --color-4: 294 52% 65%;  /* magenta-violet */

  /* Hand-drawn underlines (brush strokes) used under key words.
     Neon electric for dark sections, warm gold for light sections. */
  --neon-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='0.5' stop-color='%233B82F6'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 15 C 78 23, 168 6, 295 13' fill='none' stroke='url(%23g)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --warm-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23C2882B'/%3E%3Cstop offset='1' stop-color='%23F0C45F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 15 C 78 24, 168 6, 295 13' fill='none' stroke='url(%23w)' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");

  /* --- Type --- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Rhythm --- */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  font-optical-sizing: auto;
}

a { color: inherit; }

/* Inline text link inside body copy: obvious as a link, brightens on hover */
.text-link { color: var(--gold-deep); text-decoration: underline; text-decoration-color: rgba(166,130,47,.5); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.text-link:hover { color: var(--gold); text-decoration-color: var(--gold); }

::selection { background: var(--gold); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: var(--text-light);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top 0.2s var(--ease);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gold);
  color: #1a1409;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -12px rgba(166,130,47,0.7);
}
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--text-light);
  border-color: rgba(239,231,217,0.3);
}
.btn-ghost:hover { border-color: var(--text-light); transform: translateY(-2px); }

.btn-ghost-dark {
  background: transparent;
  color: var(--text);
  border-color: var(--cream-edge);
}
.btn-ghost-dark:hover { border-color: var(--gold); background: var(--gold); color: #1a1409; transform: translateY(-2px); }

.btn-small { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow-dark { color: var(--gold-deep); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  line-height: 1.14;
}

/* Hand-drawn neon underscore under key words */
.u-neon {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.u-neon::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: -0.12em;
  height: 0.3em;
  background: var(--neon-underline) no-repeat center / 100% 100%;
  filter: drop-shadow(0 0 4px hsl(var(--color-3) / 0.55)) drop-shadow(0 0 9px hsl(var(--color-2) / 0.3));
  pointer-events: none;
}

/* Warm gold hand-drawn underline for light backgrounds (no neon glow) */
.u-warm {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.u-warm::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: -0.1em;
  height: 0.32em;
  background: var(--warm-underline) no-repeat center / 100% 100%;
  filter: drop-shadow(0 2px 2px rgba(150,108,30,0.22));
  pointer-events: none;
}
.section-intro {
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 40rem;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  background: rgba(20,17,13,0);
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease),
              box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(20,17,13,0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding-block: 0.7rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem);
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 0.62rem; height: 0.62rem;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--color-1)), hsl(var(--color-3)));
  box-shadow: 0 0 14px hsl(var(--color-2) / 0.7);
  flex: none;
}

/* ----- AG brand mark (matches the favicon), recreated in CSS so it stays crisp ----- */
.ag-mark {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  display: inline-flex; align-items: baseline; line-height: 1;
  background: linear-gradient(125deg, hsl(196 64% 64%), hsl(222 62% 65%) 45%, hsl(264 56% 70%) 78%, hsl(294 52% 67%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ag-mark .g { margin-left: -0.6em; }
/* Header icon */
.brand-ag { font-size: 1.75rem; flex: none; }
/* Footer sign-off: the exact favicon mark, scaled up */
.footer-logo-img { width: clamp(116px, 13vw, 156px); height: auto; display: block; border-radius: 16px; }

/* ----- Animated gradient wordmark (recreated from the React GradientText) ----- */
.wordmark {
  color: var(--text-light);
  white-space: nowrap;
}
.wm-media {
  background-image: linear-gradient(
    100deg,
    hsl(var(--color-1)),
    hsl(var(--color-2)),
    hsl(var(--color-3)),
    hsl(var(--color-4)),
    hsl(var(--color-2)),
    hsl(var(--color-1))
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-pan 9s linear infinite;
}
@keyframes wordmark-pan {
  to { background-position: 220% 50%; }
}
.wordmark-sm { font-family: var(--serif); font-size: 1.3rem; }

/* ----- Nav ----- */
.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.2rem);
  margin: 0; padding: 0;
}
.nav-menu a {
  text-decoration: none;
  color: var(--text-light);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
  position: relative;
}
.nav-menu li:not(.nav-cta) a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-menu li:not(.nav-cta) a:hover { opacity: 1; }
.nav-menu li:not(.nav-cta) a:hover::after { transform: scaleX(1); }
.nav-cta .btn { color: #1a1409; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-light);
  margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--text-light);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(7rem, 14vh, 11rem) clamp(4rem, 8vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}
/* Cinematic atmosphere built from layered gradients + grain, no stock photo. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 18%, hsl(var(--color-3) / 0.20), transparent 55%),
    radial-gradient(100% 80% at 88% 12%, hsl(var(--color-2) / 0.22), transparent 50%),
    radial-gradient(90% 90% at 12% 88%, rgba(192,101,61,0.16), transparent 55%),
    radial-gradient(140% 120% at 50% 0%, #241d15 0%, #14110D 46%, #100D0A 100%);
}
.hero-bg::after {
  /* fine grain for filmic texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.hero-inner { max-width: 60rem; }
.hero .eyebrow { color: var(--text-light-soft); }
.hero .eyebrow::before { background: var(--gold); opacity: 1; }

.hero-title {
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}
.hero-title em {
  font-style: italic;
  color: var(--text-light-soft);
  font-weight: 300;
}
.hero-lede {
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.45rem);
  color: var(--text-light-soft);
  max-width: 38rem;
  line-height: 1.55;
  margin: 0 0 2.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-note {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--text-light-soft);
  letter-spacing: 0.01em;
}

.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text-light-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.scroll-cue-line {
  width: 3rem; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue-line::after {
  content: ""; position: absolute; inset: 0;
  width: 40%; background: var(--gold);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateX(-110%);} 60%,100% { transform: translateX(360%);} }

/* =========================================================
   GEOMETRIC HERO (vanilla version of HeroGeometric)
   Centred content with softly drifting gradient shapes.
   ========================================================= */
.hero--geometric { text-align: center; }
.hero--geometric .hero-inner {
  position: relative;
  z-index: 10;
  max-width: 56rem;
  margin-inline: auto;
}
.hero--geometric .hero-lede { margin-inline: auto; }
.hero--geometric .hero-actions { justify-content: center; }
.hero--geometric .hero-note { text-align: center; }

/* Mobile: keep the hero headline inside the screen and stack the buttons */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(1.75rem, 7.4vw, 2.5rem); }
  .hero-lede { font-size: 1.05rem; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-light-soft);
  margin-bottom: 2.2rem;
}
.hero-badge-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--color-1)), hsl(var(--color-3)));
  box-shadow: 0 0 10px hsl(var(--color-2) / 0.8);
  flex: none;
}

.hero--geometric .hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
}
.hero-title-line {
  background-image: linear-gradient(180deg, #fff, var(--text-light));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-title-grad {
  background-image: linear-gradient(100deg, var(--gold), #f4ece0 48%, hsl(var(--color-3)));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-family: var(--serif);
  font-style: italic;
}

/* Shapes layer (above the background, below the content) */
.hero-shapes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--ink) 0%, transparent 28%, transparent 72%, rgba(20,17,13,0.6) 100%);
}

.shape {
  position: absolute;
  opacity: 0;
  transform-origin: center;
  animation: shape-in 2.4s cubic-bezier(0.23,0.86,0.39,0.96) forwards;
}
.shape-pill {
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--shape-color), transparent);
  position: relative;
  animation: shape-bob 12s ease-in-out infinite;
}

@keyframes shape-in {
  from { opacity: 0; transform: translateY(-150px) rotate(var(--rot-start)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
}
@keyframes shape-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}

.shape-1 { width: min(62vw, 600px); height: 140px; left: -8%;  top: 17%;    --rot: 12deg;  --rot-start: -3deg;  --shape-color: hsl(var(--color-2) / 0.16); animation-delay: 0.3s; }
.shape-2 { width: min(52vw, 500px); height: 120px; right: -6%; top: 70%;    --rot: -15deg; --rot-start: -30deg; --shape-color: rgba(192,101,61,0.16);      animation-delay: 0.5s; }
.shape-3 { width: min(36vw, 300px); height: 90px;  left: 4%;   bottom: 7%;  --rot: -8deg;  --rot-start: -23deg; --shape-color: hsl(var(--color-3) / 0.16); animation-delay: 0.4s; }
.shape-4 { width: min(26vw, 220px); height: 70px;  right: 14%; top: 11%;    --rot: 20deg;  --rot-start: 5deg;   --shape-color: rgba(194,154,78,0.18);      animation-delay: 0.6s; }
.shape-5 { width: min(22vw, 170px); height: 50px;  left: 20%;  top: 7%;     --rot: -25deg; --rot-start: -40deg; --shape-color: hsl(var(--color-1) / 0.16); animation-delay: 0.7s; }

/* =========================================================
   SERVICES
   ========================================================= */
.services { background: var(--cream); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
}
.service-card {
  position: relative;
  background: #FFFCF6;
  border: none;
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 10px 26px -16px rgba(45,33,20,0.25); /* depth only */
  transition: transform 0.4s var(--ease);
}
/* thin gradient outline, no blur */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, #C2882B, #F0C45F);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-5px); }
.service-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold-deep);
  letter-spacing: 0.05em;
}
.service-card h3 { font-size: 1.5rem; margin-top: 0.3rem; }
.service-card p { margin: 0; color: var(--text-soft); }
.service-card .service-outcome {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--text) !important;
  font-weight: 500;
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.05rem;
}

/* =========================================================
   THE EDGE  (dark, cinematic, distinct)
   ========================================================= */
.edge {
  position: relative;
  background: var(--ink);
  color: var(--text-light);
  overflow: hidden;
  isolation: isolate;
}
.edge-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 120% at 100% 0%, hsl(var(--color-3) / 0.16), transparent 50%),
    radial-gradient(70% 100% at 0% 100%, rgba(192,101,61,0.14), transparent 55%),
    var(--ink);
}
.edge-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.edge .eyebrow { color: var(--gold); }
.edge-title {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  margin-bottom: 1.6rem;
  max-width: 18ch;
}
.edge-lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  color: var(--text-light);
  margin: 0 0 1.4rem;
  line-height: 1.55;
}
.edge-body { color: var(--text-light-soft); margin: 0; }

.edge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.edge-list li {
  display: grid;
  gap: 0.3rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--ink-3);
}
.edge-list li:last-child { border-bottom: 1px solid var(--ink-3); }
.edge-list-k {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--text-light);
}
.edge-list-v { color: var(--text-light-soft); font-size: 0.96rem; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.howto { background: var(--cream); }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 2.2rem;
  border-top: 2px solid var(--cream-edge);
}
.step-num {
  position: absolute;
  top: -1.6rem;
  left: 0;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.3rem;
  box-shadow: 0 8px 20px -10px rgba(20,17,13,0.6);
}
.step h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
.step p { margin: 0; color: var(--text-soft); }

/* Optional extra: the launch-content add-on, shown apart from the 3 core steps.
   Uses the brand cyan->blue->violet gradient so it reads as a premium extra. */
.step-extra {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: flex-start;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: #FFFFFF;
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(45,33,20,0.3);
}
.step-extra::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(92deg, #64ABCA, #7583E0 50%, #A87CDD);
}
.step-extra-mark {
  flex: 0 0 auto;
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #64ABCA, #7583E0 55%, #A87CDD);
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 1.7rem; line-height: 1;
  box-shadow: 0 10px 22px -10px rgba(79,125,249,0.55);
}
.step-extra-eyebrow {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; margin: 0 0 0.35rem;
  background: linear-gradient(92deg, #64ABCA, #7583E0 50%, #A87CDD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-extra h3 { font-size: 1.55rem; margin: 0 0 0.5rem; }
.step-extra p { margin: 0; color: var(--text-soft); }
.step-extra-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.95rem;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  background: linear-gradient(92deg, #64ABCA, #7583E0 50%, #A87CDD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-extra-link span {
  color: #5E7CF0; display: inline-block;
  transition: transform 0.25s var(--ease);
}
.step-extra-link:hover span { transform: translateX(4px); }
@media (max-width: 620px) {
  .step-extra { flex-direction: column; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 2.6rem; }
}

/* =========================================================
   PACKAGES
   ========================================================= */
.packages { background: var(--cream); }

/* Currency toggle */
.price-toggle-row { display: flex; justify-content: flex-end; max-width: 54rem; margin: 0 auto 1.6rem; }
.price-toggle {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.25rem;
  background: var(--paper);
  border: 1px solid var(--cream-edge);
  border-radius: 999px;
}
.price-toggle-btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.price-toggle-btn:not(.is-active):hover { color: var(--text); }
.price-toggle-btn.is-active { background: var(--gold); color: #1a1409; }
@media (max-width: 420px) {
  .price-toggle-btn { padding: 0.5rem 0.85rem; letter-spacing: 0.02em; }
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  max-width: 54rem;
  margin-inline: auto;
}
@media (max-width: 700px) { .package-grid { grid-template-columns: 1fr; } }

/* Two package families: Website design and Social media setup */
.package-family { margin-top: clamp(3rem, 6vw, 4.5rem); }
.package-family:first-of-type { margin-top: 0; }
.package-family-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); }
.package-family-head h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.1rem);
  margin: 0 0 0.5rem;
}
.package-family-head p { color: var(--text-soft); font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* Column variants (override the base 2-up grid) */
.package-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 62rem; }
.package-grid--two   { grid-template-columns: repeat(2, 1fr); max-width: 42rem; }
@media (max-width: 760px) {
  .package-grid--three, .package-grid--two { grid-template-columns: 1fr; }
}

/* "Every website build includes" panel */
.package-includes {
  max-width: 62rem;
  margin: 1.6rem auto 0;
  background: linear-gradient(180deg, rgba(194,154,78,0.09), rgba(194,154,78,0.025));
  border: 1px solid rgba(194,154,78,0.38);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: 0 16px 36px -28px rgba(45,33,20,0.4);
}
.package-includes h4 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 1.1rem; }
.package-includes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.package-includes-list li { position: relative; padding-left: 1.5rem; color: var(--text-soft); font-size: 0.96rem; }
.package-includes-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold);
}
.package-fineprint { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--cream-edge); }
.package-fineprint p { font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); margin: 0 0 0.7rem; }
.package-fineprint p:last-child { margin-bottom: 0; }
.package-fineprint strong { color: var(--text); font-weight: 600; }

/* Social setup extras line */
.package-extras { max-width: 42rem; margin: 1.4rem auto 0; text-align: center; font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); }

/* Footnote asterisk: jumps down to the cost details */
.pkg-ref {
  color: var(--gold-deep); font-weight: 700; font-size: 0.72em;
  vertical-align: super; line-height: 0; margin-left: 0.12em;
  text-decoration: none; cursor: pointer;
}
.pkg-ref:hover, .pkg-ref:focus-visible { text-decoration: underline; }
.pkg-ref-light { color: #EEC56C; }
/* keep the linked notes clear of the sticky header, and flash gently when jumped to */
#website-notes, #social-notes { scroll-margin-top: 96px; }
#website-notes:target { border-color: var(--gold); }
#social-notes:target { color: var(--text); }

/* Ongoing Care sits apart below the build tiers */
.package-care-row { max-width: 40rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; }
.package-care-lead { text-align: center; color: var(--text-soft); font-size: 0.95rem; margin: 0 0 1.2rem; }
.package-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px -26px rgba(45,33,20,0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px -26px rgba(33,28,22,0.5);
  border-color: var(--gold);
}
.package-featured {
  background: var(--ink);
  color: var(--text-light);
  border-color: var(--ink);
}
.package-flag {
  position: absolute;
  top: -0.7rem; left: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--gold);
  color: #1a1409;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.package-name { font-size: 1.7rem; margin-bottom: 0.5rem; }
.package-for { color: var(--text-soft); margin: 0 0 1.5rem; min-height: 3em; }
.package-featured .package-for { color: var(--text-light-soft); }
.package-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--cream-edge);
}
.package-featured .package-price { border-color: var(--ink-3); }
.price-from { font-size: 0.85rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.package-featured .price-from { color: var(--text-light-soft); }
.price-figure { font-family: var(--serif); font-size: 2rem; letter-spacing: -0.01em; color: var(--gold-deep); }
.package-featured .price-figure { color: #EEC56C; }
.price-unit { font-size: 0.9rem; color: var(--text-soft); }
.package-featured .price-unit { color: var(--text-light-soft); }
.package-note { margin: 0 0 1.3rem; font-size: 0.8rem; line-height: 1.55; color: var(--text-soft); }
.package-featured .package-note { color: var(--text-light-soft); }

.package-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.7rem; flex: 1; }
.package-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-soft);
  font-size: 0.96rem;
}
.package-featured .package-list li { color: var(--text-light-soft); }
.package-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}

/* =========================================================
   FLAGSHIP SCROLL SHOWCASE (vanilla version of ContainerScroll)
   A large screen tilts back, then rotates flat and settles
   as the section scrolls through. Driven by js/main.js.
   ========================================================= */
.showcase-track {
  position: relative;
  height: 118vh;            /* small scroll-through so the card tilts, without a big gap before the work grid */
  background: var(--paper);
}
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 3.5vh, 2.6rem);
  padding: clamp(4.5rem, 11vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  perspective: 1400px;
}
.showcase-cap { text-align: center; max-width: 40rem; will-change: transform; }
.showcase-cap .eyebrow { justify-content: center; }
.showcase-cap h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  letter-spacing: -0.01em;
}
.showcase-cap p { color: var(--text-soft); margin: 0.8rem 0 0; }

.showcase-card {
  width: min(100%, 54rem);
  aspect-ratio: 16 / 10;
  border: 4px solid #353029;
  background: #1b1813;
  border-radius: 28px;
  padding: clamp(0.4rem, 1vw, 0.7rem);
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 9px 20px rgba(0,0,0,0.29),
    0 37px 37px rgba(0,0,0,0.26),
    0 84px 50px rgba(0,0,0,0.15),
    0 149px 60px rgba(0,0,0,0.04);
}
.showcase-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a241c, #14110D);
  display: grid;
  place-items: center;
}
.showcase-screen .work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Live site embed inside the flagship screen (animated desktop view, scaled to fit, non-interactive) */
.showcase-embed {
  position: absolute; top: 0; left: 0;
  width: 166.67%; height: 420%;
  transform: scale(0.6); transform-origin: top left;
  border: 0; pointer-events: none;
}
.showcase-fallback { display: none; }
@media (max-width: 768px) {
  .showcase-embed { display: none; }
  .showcase-fallback { display: block; }
}

@media (max-width: 880px) {
  /* On phones the sticky scroll reveal just leaves dead space, so show it inline and tight */
  .showcase-track { height: auto; }
  .showcase-stage { position: static; height: auto; min-height: 0; padding-block: clamp(2rem, 6vw, 3rem); gap: 1.4rem; }
  .showcase-card { border-radius: 22px; border-width: 3px; transform: none !important; }
  .showcase-cap { transform: none !important; }
}

/* =========================================================
   SELECTED WORK
   ========================================================= */
.work { background: var(--ink); }
/* Dark Work band: recolour only the section header + showcase caption (cards stay light and pop) */
.work .section-title { color: var(--text-light); }
.work .section-intro { color: var(--text-light-soft); }
.work .showcase-cap .eyebrow-dark { color: var(--gold); }
.work .showcase-cap h2 { color: var(--text-light); }
.work .showcase-cap p { color: var(--text-light-soft); }
/* Lift the laptop off the dark band with a warm brand glow + a brighter rim */
.work .showcase-card {
  border-color: #4c4434;
  box-shadow:
    0 0 0 1px rgba(229,177,86,0.22),
    0 28px 60px -18px rgba(0,0,0,0.7),
    0 0 70px -4px rgba(229,177,86,0.32),
    0 0 150px 12px rgba(120,170,255,0.14);
}

/* Real images sit on top of the tinted placeholder. Until a file
   exists the image is hidden (see main.js) and the tint + note show. */
.work-media .work-img,
.about-portrait .work-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.work-media-contain .work-img { object-fit: contain; padding: 1.2rem; }
.about-portrait { position: relative; overflow: hidden; }
.about-portrait .work-img { object-fit: cover; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.work-card-wide { grid-column: 1 / -1; }
.work-card {
  background: var(--cream);
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px -18px rgba(45,33,20,0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.work-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 26px 54px -20px rgba(194,154,78,0.5), 0 10px 24px rgba(45,33,20,0.1);
}
.work-card-wide { flex-direction: row; margin-bottom: clamp(1rem, 3vw, 2.2rem); }

.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2a241c, #14110D);
  overflow: hidden;
}
.work-card-wide .work-media { aspect-ratio: auto; flex: 1 1 54%; min-height: 24rem; }
.work-media img { width: 100%; height: 100%; object-fit: cover; }

/* Live-motion preview: a short muted loop of the site's landing page playing
   its real motion (kinetic type, the breathing circle, ambient light). Held on
   the hero, no scrolling. Poster shows until it plays and for reduced motion. */
.work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* Dual-image media: website + pins together in one wide card (side by side desktop, stacked mobile) */
.work-card-wide .work-media-stack {
  flex: 1 1 54%; aspect-ratio: auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.7rem;
  background: linear-gradient(135deg, #2a241c, #14110D); place-items: center;
}
.work-media-stack .work-img {
  position: static; inset: auto; width: 100%; height: auto;
  object-fit: contain; display: block; border-radius: 8px;
}
@media (max-width: 768px) {
  .work-card-wide .work-media-stack { grid-template-columns: 1fr; }
}
/* distinct tints so placeholder cards do not look identical */
.work-media-1 { background: linear-gradient(135deg, hsl(var(--color-3)/0.5), #14110D 75%); }
.work-media-2 { background: linear-gradient(135deg, var(--terracotta), #14110D 80%); }
.work-media-3 { background: linear-gradient(135deg, hsl(var(--color-2)/0.45), #14110D 78%); }
.work-media-4 { background: linear-gradient(135deg, var(--gold-deep), #14110D 82%); }
.work-media-5 { background: linear-gradient(135deg, hsl(var(--color-4)/0.42), #14110D 80%); }
.work-media-note {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,217,0.55);
  border: 1px dashed rgba(239,231,217,0.3);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.work-body {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.work-card-wide .work-body { flex: 1 1 44%; justify-content: center; }
.work-tag {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0;
}
.work-name { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.work-desc { color: var(--text-soft); margin: 0.2rem 0 0.6rem; }
.work-link {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: auto;
}
.work-link span { transition: transform 0.3s var(--ease); }
.work-link:hover span { transform: translateX(5px); }
.work-link:hover { color: var(--gold-deep); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { background: var(--cream); }
.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #2a241c, #14110D);
  display: grid;
  place-items: center;
  border: 1px solid var(--cream-edge);
}
.about-copy p { color: var(--text-soft); margin: 0 0 1.1rem; max-width: 38rem; }
.about-copy .section-title { margin-bottom: 1.4rem; }
.about-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--text) !important;
  margin-top: 0.5rem !important;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  position: relative;
  background: var(--ink);
  color: var(--text-light);
  overflow: hidden;
  isolation: isolate;
}
.contact-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 0% 0%, hsl(var(--color-2)/0.16), transparent 50%),
    radial-gradient(80% 100% at 100% 100%, rgba(192,101,61,0.16), transparent 55%),
    var(--ink);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact .eyebrow { color: var(--gold); }
.contact-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); margin-bottom: 1.3rem; }
.contact-lede { color: var(--text-light-soft); font-size: 1.1rem; margin: 0 0 1.8rem; max-width: 32rem; }
.contact-direct { color: var(--text-light-soft); font-size: 0.98rem; }
.contact-direct a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.contact-direct a:hover { border-color: var(--gold); }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text-light); letter-spacing: 0.01em; }
.field-opt { font-weight: 400; color: var(--text-light-soft); font-size: 0.78rem; text-transform: lowercase; }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text-light);
  background: #14100B;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(194,154,78,0.2);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B6AC9C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.form-foot { display: flex; flex-direction: column; gap: 0.8rem; }
.form-privacy { margin: 0; font-size: 0.82rem; color: var(--text-light-soft); text-align: center; }
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: rgba(194,154,78,0.14);
  border: 1px solid var(--gold);
  color: var(--text-light);
}
.form-status.is-error { background: rgba(192,101,61,0.16); border-color: var(--terracotta); }
.hp-field { position: absolute; left: -9999px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #100D0A; color: var(--text-light-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink-3);
}
.footer-line { margin: 0.5rem 0 0; font-size: 0.92rem; }
.footer-social { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-social a {
  text-decoration: none;
  color: var(--text-light-soft);
  font-size: 0.92rem;
  transition: color 0.25s var(--ease);
}
.footer-social a:hover { color: var(--gold); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}
.footer-base p { margin: 0; }
.footer-top { text-decoration: none; color: var(--text-light-soft); transition: color 0.25s var(--ease); }
.footer-top:hover { color: var(--gold); }

/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px) {
  .nav-toggle { display: flex; position: relative; z-index: 120; }
  /* The frosted blur on the scrolled header turns the header into the
     positioning container for the fixed slide-in menu, which collapses the
     menu to the header's height once you scroll. Use a near-solid bar on
     phones instead, so the menu can fill the whole screen. */
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 17, 13, 0.96);
  }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 20rem);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 2rem var(--gutter);
    background: rgba(16,13,10,0.97);
    backdrop-filter: blur(14px);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { font-size: 1.15rem; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .edge-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-inner { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .about-portrait { max-width: 22rem; }
  .work-card-wide { flex-direction: column; }
  .work-card-wide .work-media { min-height: 16rem; }
}

@media (max-width: 620px) {
  .work-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-inner, .footer-base { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { flex: 1 1 auto; }
  .scroll-cue { display: none; }
}

/* =========================================================
   RICHER LIGHT SECTIONS
   Carry the hero's depth through the page: soft warm/electric
   gradient backgrounds and corner glows, with hairline dividers
   so each section still reads as a distinct band.
   ========================================================= */
.services, .howto, .packages, .work, .about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(43,38,32,0.06);
}
.services::before, .howto::before, .packages::before, .work::before, .about::before,
.services::after,  .howto::after,  .packages::after,  .work::after,  .about::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

/* Warm-only glows (gold + terracotta) so they read as warm light on cream,
   never muddy. Gradient bases run cream to warm sand for gentle depth. */
.services { background: linear-gradient(170deg, #FCF8F0 0%, #F1E7D5 100%); }
.services::before { width: 48vw; height: 48vw; right: -12%; top: -18%; background: radial-gradient(circle, rgba(229,177,86,0.24), transparent 62%); }
.services::after  { width: 40vw; height: 40vw; left: -12%; bottom: -22%; background: radial-gradient(circle, rgba(207,124,82,0.16), transparent 64%); }

.howto { background: linear-gradient(190deg, #F1E7D5 0%, #FCF8F0 100%); }
.howto::before { width: 44vw; height: 44vw; left: -14%; top: -16%; background: radial-gradient(circle, rgba(207,124,82,0.18), transparent 64%); }
.howto::after  { width: 38vw; height: 38vw; right: -10%; bottom: -20%; background: radial-gradient(circle, rgba(229,177,86,0.22), transparent 64%); }

.packages { background: linear-gradient(170deg, #FCF8F0 0%, #F0E5D2 100%); }
.packages::before { width: 52vw; height: 52vw; left: 50%; top: -26%; transform: translateX(-50%); background: radial-gradient(circle, rgba(229,177,86,0.2), transparent 60%); }
.packages::after  { width: 34vw; height: 34vw; right: -10%; bottom: -16%; background: radial-gradient(circle, rgba(207,124,82,0.15), transparent 64%); }

.work { background: linear-gradient(190deg, #1c1813 0%, #14110D 100%); }
.work::before { width: 44vw; height: 44vw; right: -14%; top: -14%; background: radial-gradient(circle, rgba(229,177,86,0.16), transparent 63%); }
.work::after  { width: 38vw; height: 38vw; left: -12%; bottom: -18%; background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 65%); }

.about { background: linear-gradient(170deg, #F1E7D5 0%, #FCF8F0 100%); }
.about::before { width: 42vw; height: 42vw; left: -12%; top: -16%; background: radial-gradient(circle, rgba(229,177,86,0.22), transparent 64%); }
.about::after  { width: 34vw; height: 34vw; right: -10%; bottom: -20%; background: radial-gradient(circle, rgba(207,124,82,0.15), transparent 65%); }

/* The flagship showcase sits inside .work, so let the section gradient show through */
.showcase-track { background: transparent; }

/* Keep cards readable above the glows */
.service-grid, .package-grid, .work-grid, .steps, .about-inner, .section-head { position: relative; z-index: 1; }

/* Brighter cards so they lift off the warm backgrounds */
.service-card { background: #FFFCF6; }
.work-card { background: #FFFCF6; }
.package-card:not(.package-featured) { background: #FFFCF6; }

/* Fiona pin (a tall graphic) floats on a warm panel with a soft shadow */
.work-media-contain {
  background: radial-gradient(120% 100% at 50% 38%, #F7EDDD, #E6D7C0);
  box-shadow: inset 0 0 60px rgba(45,33,20,0.09);
}
.work-media-contain .work-img {
  object-fit: contain;
  padding: clamp(1.1rem, 2.4vw, 2.2rem);
  filter: drop-shadow(0 14px 26px rgba(45,33,20,0.22));
}

/* About portrait keeps the face in frame */
.about-portrait .work-img { object-position: center 28%; }

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(43,38,32,0.06);
  background: linear-gradient(190deg, #F2E9D8 0%, #FCF8F0 100%);
}
.faq::before, .faq::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.faq::before { width: 42vw; height: 42vw; right: -12%; top: -16%; background: radial-gradient(circle, rgba(229,177,86,0.2), transparent 64%); }
.faq::after  { width: 34vw; height: 34vw; left: -10%; bottom: -18%; background: radial-gradient(circle, rgba(207,124,82,0.15), transparent 65%); }
.faq .section-head, .faq-list { position: relative; z-index: 1; }

.faq-list { max-width: 52rem; margin-inline: auto; }
.faq-item {
  border-top: 1px solid var(--cream-edge);
}
.faq-item:last-child { border-bottom: 1px solid var(--cream-edge); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0.2rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  color: var(--text);
  transition: color 0.25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-deep);
  flex: none;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item:not([open]) .faq-answer { display: none; }
.faq-answer { padding: 0 0.2rem 1.5rem; }
.faq-answer p { margin: 0; color: var(--text-soft); max-width: 46rem; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}