/* =========================================================
   THE ONLY 3 COLORS IN THIS WEBSITE
   Change them here and the whole site updates.
   For softer shades, we use opacity (color-mix with transparent),
   never new colors.
   ========================================================= */
:root {
  --black: #0A0A0A;   /* elegant black (background) */
  --gold:  #C9A24B;   /* gold (accents, button, glow) */
  --white: #F5F2EA;   /* warm white (text) */

  /* Fonts */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Softer shades made with opacity (still only our 3 colors) */
  --white-soft: color-mix(in srgb, var(--white) 70%, transparent);
  --white-faint: color-mix(in srgb, var(--white) 45%, transparent);
  --gold-glow: color-mix(in srgb, var(--gold) 14%, transparent);

  /* Frosted-glass settings (card wall + detail panel).
     script.js overwrites these from the WALL_* variables at the top of
     script.js, so edit them there (or here, if you remove those lines). */
  --glass-blur: 16px;        /* glass blur amount */
  --glow-color: #BFE3FF;     /* hover glow: ice white-blue */
  --glow-alpha: 35%;         /* hover glow strength */
  --glow-size: 40px;         /* how far the glow spreads */
  --float-speed: 1;          /* card float speed (2 = twice as fast) */
  --float-distance: 10px;    /* how far cards drift */
  --tilt: 6deg;              /* mouse-follow tilt amount */

  /* Social Media Management images: a very light dark + faint warm gold tint on every
     picture so the set looks consistent. Tweak the two percentages, or use "none" to remove. */
  /* Trust line on the LANDING screen only (the card wall keeps its own smaller size) */
  --trust-landing-size: 16px;          /* desktop */
  --trust-landing-size-tablet: 14px;   /* 761px to 1024px wide */
  --trust-landing-size-mobile: 13px;   /* 760px wide and below */
  --trust-landing-opacity: 85%;        /* text brightness (white at this %) */

  --smm-overlay:
    linear-gradient(color-mix(in srgb, var(--gold) 6%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)),
    linear-gradient(color-mix(in srgb, var(--black) 14%, transparent), color-mix(in srgb, var(--black) 14%, transparent));
}

/* ---------- Basic reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow: hidden;              /* landing screen never scrolls */
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   BACKGROUND: deep space
   Order (back to front): nebula, canvas (stars/rings/shooting
   star), vignette, grain. All sit under the landing and wall
   (z-index 1). Strengths come from the BG_* variables at the top
   of script.js (--nebula-glow, --nebula-drift, --vignette, --grain).
   ========================================================= */
.bg-nebula, .bg-vignette, .bg-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Canvas is transparent now, so the nebula shows through behind the stars */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 1. Nebula: big radial gold glows at 5-8% opacity, drifting very slowly */
.bg-nebula { overflow: hidden; }
.bg-nebula__glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--gold), transparent);
  opacity: var(--nebula-glow, 0.065);
  animation: nebula-drift calc(var(--nebula-drift, 90s) * var(--k, 1)) ease-in-out infinite alternate;
  will-change: transform;
}
.bg-nebula__glow--1 { width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; --k: 1; }
.bg-nebula__glow--2 { width: 60vmax; height: 60vmax; right: -20vmax; bottom: -32vmax; --k: 1.25; animation-delay: -30s; }
.bg-nebula__glow--3 { width: 38vmax; height: 38vmax; left: 6vw; top: 52vh; --k: 1.5; animation-delay: -55s; opacity: calc(var(--nebula-glow, 0.065) * 0.7); }
@keyframes nebula-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, -4vh, 0) scale(1.12); }
}

/* 2. Vignette: darker edges, empty bright-ish center */
.bg-vignette {
  background: radial-gradient(ellipse at center, transparent 45%, var(--black) 100%);
  opacity: var(--vignette, 0.7);
}

/* 3. Film grain: a tiny static noise tile, nudged in steps so it feels alive.
   The element is oversized so the nudge never shows an edge. */
.bg-grain {
  inset: auto;
  left: -50%; top: -50%;
  width: 200%; height: 200%;
  opacity: var(--grain, 0.06);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain-shift 0.9s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -4%); }
  75%  { transform: translate(-2%, -2%); }
}

/* Tab hidden: script.js adds this class so CSS animations pause too */
.bg-paused .bg-nebula__glow,
.bg-paused .bg-grain { animation-play-state: paused; }

/* Reduced motion: keep the still look, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .bg-nebula__glow, .bg-grain { animation: none; }
}

/* ---------- Landing screen layout ---------- */
.landing {
  position: relative;
  z-index: 1;                    /* sits above the canvas */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(20px, 6vw, 80px);
}

/* Top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(24px, 4vh, 44px);
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.topbar__label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white-faint);
}

/* Centered hero block */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 8vh;           /* nudges content slightly above true center */
}

.hero__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 1.6rem;
}

/* Desktop: the long eyebrow stays on one line and the headline on two */
@media (min-width: 901px) {
  .hero__eyebrow { white-space: nowrap; }
}
@media (min-width: 601px) {
  .hero__title { white-space: nowrap; }
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  /* clamp(min, preferred, max): scales smoothly with screen width */
  font-size: clamp(2.4rem, 5.4vw, 5.2rem);   /* sized so the longer headline fits on 2 lines */
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* Gold underline under the highlighted words */
.accent {
  font-style: italic;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent);
}

.hero__subtext {
  max-width: 40rem;
  margin-top: 2rem;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: var(--white-soft);
}

/* ---------- The gold button ---------- */
.btn {
  margin-top: 2.6rem;
  padding: 1rem 3rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  transition: box-shadow 0.35s ease, transform 0.35s ease,
              background 0.35s ease, color 0.35s ease;
}

.btn:hover {
  box-shadow: 0 0 32px color-mix(in srgb, var(--gold) 55%, transparent);
  transform: translateY(-2px);
}

/* Clear outline for keyboard users (Tab key) */
.btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

/* =========================================================
   LANDING BUTTON (#enter-btn) HOVER
   Only this button; the panel buttons keep the plain .btn look.
   - the button never moves (no magnet, no lift, no ring)
   - bokeh bloom: a <canvas class="btn__bloom"> (added by script.js)
     paints soft gold/white circles of light that grow from the
     cursor, clipped to the button by overflow: hidden
   - press-down: the "scale" property (separate from GSAP's transform)
   - arrow: ::after slides in on the right
   ========================================================= */
#enter-btn {
  position: relative;
  isolation: isolate;            /* keeps the bloom behind the text, above the gold */
  overflow: hidden;              /* clips the bloom to the button shape */
  transition: letter-spacing 0.35s ease, box-shadow 0.35s ease, scale 0.12s ease-out;
}

/* The bloom canvas fills the button, behind the text */
.btn__bloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Thin arrow (drawn as a mask so it takes the text color) */
#enter-btn::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 22px;
  height: 9px;
  margin-top: -4.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9' fill='none' stroke='black' stroke-width='1'><path d='M0 4.5h21M17 1l4 3.5L17 8'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9' fill='none' stroke='black' stroke-width='1'><path d='M0 4.5h21M17 1l4 3.5L17 8'/></svg>") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-12px);
  transition: transform 0.35s ease, opacity 0.25s ease;
}

/* Hover (real mouse only, so touch screens don't get a stuck hover) */
@media (hover: hover) {
  #enter-btn:hover,
  #enter-btn:focus-visible {
    letter-spacing: 0.36em;
    transform: none;             /* cancel the old lift: the button stays still */
  }
  #enter-btn:hover::after,
  #enter-btn:focus-visible::after { opacity: 1; transform: translateX(0); }
}

/* Press-down right before the cards appear (class added by script.js) */
#enter-btn.is-pressed { scale: 0.94; }

/* Reduced motion: no bloom and no movement. The color simply switches
   from gold to white on hover. */
@media (prefers-reduced-motion: reduce) {
  #enter-btn, #enter-btn::after { transition: none; }
  #enter-btn:hover, #enter-btn:focus-visible { letter-spacing: 0.3em; }
  #enter-btn::after, .btn__bloom { display: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  #enter-btn:hover, #enter-btn:focus-visible {
    background: var(--white);
    border-color: var(--white);
  }
}

/* =========================================================
   STAGE 3: SCREEN SWITCHING (landing <-> card wall)
   Both screens fade with opacity. "visibility" is switched too so
   the hidden screen can't be clicked or tabbed into.
   ========================================================= */
.landing {
  transition: opacity 0.8s ease, visibility 0.8s;
}
.landing.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   STAGE 3: CARD WALL (frosted glass)
   The glass settings live in :root at the very top of this file
   (--glass-blur, --glow-color, --glow-strength, --float-speed, --tilt).
   script.js overwrites them from the WALL_* variables at the top of
   script.js, so change them there (or here if you prefer).
   ========================================================= */
.wall {
  position: fixed;
  inset: 0;
  z-index: 1;                       /* above the canvas, like the landing */
  overflow-y: auto;                 /* scrolls on short screens / mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 4vh, 44px) clamp(20px, 6vw, 80px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease 0.35s, visibility 0.9s 0.35s; /* waits for the landing to fade */
}
.wall.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wall__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--white-faint);
}

/* --- Glow shapes behind the cards: something for the glass to refract.
   Plain radial gradients (cheaper than a blur filter), very low opacity,
   drifting slowly. z-index -1 keeps them behind the cards. --- */
.wall__haze {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.wall__blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-color), transparent);
  animation: haze-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
.wall__blob--blue  { width: 55vmax; height: 55vmax; left: 8vw;  top: -14vmax; opacity: 0.17; }
.wall__blob--blue2 { width: 40vmax; height: 40vmax; right: -8vmax; bottom: -10vmax; opacity: 0.12; animation-duration: 52s; animation-delay: -20s; }
.wall__blob--gold  { width: 36vmax; height: 36vmax; left: 38vw; top: 30vh; background: radial-gradient(closest-side, var(--gold), transparent); opacity: 0.08; animation-duration: 64s; animation-delay: -35s; }
@keyframes haze-drift {
  from { transform: translate3d(-4vw, 3vh, 0) scale(1); }
  to   { transform: translate3d(5vw, -4vh, 0) scale(1.15); }
}
.bg-paused .wall__blob { animation-play-state: paused; }

/* The stage holds the grid. --mx / --my (-1 to 1) = mouse position,
   written by script.js. Every card reads the same two numbers. */
.wall__stage {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  --mx: 0;
  --my: 0;
}

/* 8 cards: 2 rows of 4 on desktop, 2 columns on tablet, 1 on mobile */
.wall__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding: 1.6rem 0;
}
@media (max-width: 1024px) { .wall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wall__grid { grid-template-columns: 1fr; } }

/* --- Slot: only does the fade-in (no curve, so all cards are treated equally) --- */
.slot {
  /* "translate" is separate from "transform", so it never clashes with the float */
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s ease, translate 1s ease;
  transition-delay: calc(0.5s + var(--i) * 0.1s);
}
.wall.is-active .slot { opacity: 1; translate: 0 0; }

/* --- Card: the gentle up-and-down float. --float-base / --float-delay are
   set per card by script.js; --float-speed speeds all of them up or down. --- */
.card {
  animation: float calc(var(--float-base, 7s) / var(--float-speed, 1)) ease-in-out var(--float-delay, 0s) infinite alternate;
  will-change: transform;
}
@keyframes float {
  from { transform: translateY(calc(var(--float-distance) * -1)); }
  to   { transform: translateY(var(--float-distance)); }
}

/* Registered so the glass brightness / edge highlight fade smoothly on hover */
@property --glass-hi { syntax: "<percentage>"; inherits: true; initial-value: 16%; }
@property --edge     { syntax: "<percentage>"; inherits: true; initial-value: 42%; }

/* --- Face: the frosted glass --- */
.card__face {
  --lift: 0px;
  position: relative;
  min-height: clamp(190px, 24vh, 240px);
  padding: 1.7rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow: hidden;                              /* clips the grain and the sheen */
  border-radius: 16px;
  /* Diagonal gradient on the glass: lighter top-left, darker bottom-right */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--white) var(--glass-hi, 16%), transparent) 0%,
      color-mix(in srgb, var(--white) 5%, transparent) 48%,
      color-mix(in srgb, var(--black) 30%, transparent) 100%);
  /* Strong blur + a slight brightness lift so the background shows through softly */
  -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(1.18) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) brightness(1.18) saturate(1.2);
  /* very faint outer border */
  border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--white) var(--edge, 42%), transparent),   /* bright inner edge: top + left */
    inset 0 0 22px color-mix(in srgb, var(--white) 4%, transparent),
    0 18px 40px -22px color-mix(in srgb, var(--black) 90%, transparent),
    0 0 0 transparent;
  /* Same tilt toward the mouse on every card. perspective() is per card,
     so a card at the edge is not seen from a different angle than the middle. */
  transform: perspective(900px)
             rotateX(calc(var(--my) * var(--tilt) * -1))
             rotateY(calc(var(--mx) * var(--tilt)))
             translateZ(var(--lift));
  transition: transform 0.5s ease-out, box-shadow 0.45s ease, border-color 0.45s ease,
              --glass-hi 0.45s ease, --edge 0.45s ease, opacity 0.45s ease;
  outline: none;
}

/* Frost grain: a very fine noise texture over the glass, low opacity */
.card__face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Sheen: a soft diagonal band of light. It rests off to the left and
   sweeps across once on hover / focus. */
.card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%,
              color-mix(in srgb, var(--white) 26%, transparent) 50%, transparent 64%);
  transform: translateX(-130%);
}

/* Keep the text above the grain and sheen */
.card__num, .card__title, .card__line { position: relative; z-index: 1; }

.card__num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--gold);
}
.card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.1;
  color: #fff;
}
.card__line {
  margin-top: auto;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--white) 70%, transparent);
}

/* Hover (mouse) or keyboard focus: the glass brightens, the edge highlight
   intensifies, an ice-blue glow appears, the card lifts forward, a sheen
   sweeps across once, and the other cards dim a little. */
@media (hover: hover) {
  .card:hover .card__face,
  .card__face:focus-visible {
    --lift: 40px;
    --glass-hi: 26%;
    --edge: 85%;
    border-color: color-mix(in srgb, var(--glow-color) 55%, transparent);
    box-shadow:
      inset 1px 1px 0 color-mix(in srgb, var(--white) 85%, transparent),
      inset 0 0 26px color-mix(in srgb, var(--glow-color) 14%, transparent),
      0 0 var(--glow-size) color-mix(in srgb, var(--glow-color) var(--glow-alpha), transparent),
      0 0 calc(var(--glow-size) * 2.4) color-mix(in srgb, var(--glow-color) calc(var(--glow-alpha) * 0.4), transparent);
  }
  .card:hover .card__face::after,
  .card__face:focus-visible::after { animation: sheen 0.9s ease-out 1; }
  .wall__grid:has(.card:hover) .card:not(:hover) .card__face { opacity: 0.55; }
}
@keyframes sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}
/* Keyboard users also get a visible ring (hover already shows the glow) */
.card__face:focus-visible { outline: 1px solid var(--glow-color); outline-offset: 3px; }

/* --- Back link --- */
.back {
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-faint);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}
.back:hover { color: var(--gold); }
.back:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ---------- Mobile: no 3D tilt and no float, the glass look stays ---------- */
@media (max-width: 760px) {
  .wall__stage { justify-content: flex-start; }
  .card { animation: none; }
  .card__face { transform: none; min-height: 0; }
  .card__line { margin-top: 0.3rem; }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
  .topbar__label { display: none; }
  .hero__title br { display: none; }   /* let the headline wrap naturally */
  .btn { width: 100%; max-width: 18rem; }
}

/* =========================================================
   STAGE 4: DETAIL PANEL
   --panel-width and --panel-speed are set from the variables at the
   top of script.js (PANEL_WIDTH, PANEL_SLIDE_SPEED). Values here are
   only fallbacks.
   ========================================================= */
:root {
  --panel-width: 45vw;
  --panel-speed: 0.6s;
  --panel-ease: cubic-bezier(0.22, 0.8, 0.24, 1);

  /* ---- DETAIL PANEL READABILITY: adjust these to taste ---- */
  --panel-opacity: 90%;          /* how solid the near-black glass is (88-92% recommended) */
  --panel-blur: 40px;            /* backdrop blur: higher = softer, more unrecognizable haze */
  --panel-sheen: 7%;             /* strength of the diagonal sheen (lighter at top-left) */
  --panel-grain: 0.05;           /* frost grain texture opacity (0 = off) */
  --panel-text-opacity: 85%;     /* body text and intro line */
  --panel-label-opacity: 65%;    /* small labels (NAME, EMAIL, ...) */
  --panel-placeholder-opacity: 50%;  /* placeholder text inside fields */
  --panel-field-bg: 45%;         /* field background darkness (black at this %, darker than the panel) */
  --panel-field-border: 18%;     /* field border (white at this %) */
}

/* --- The wall behind: blurs and shifts a little to the left --- */
/* (this keeps the wall's own fade timing from Stage 3 and adds two more) */
.wall {
  transition: opacity 0.9s ease 0.35s, visibility 0.9s 0.35s,
              transform var(--panel-speed) var(--panel-ease), filter var(--panel-speed) var(--panel-ease);
}
body.panel-open .wall {
  filter: blur(7px);
  transform: translateX(-3vw) scale(0.98);
}

/* --- The clickable blurred area outside the panel --- */
.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: color-mix(in srgb, var(--black) 35%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--panel-speed) ease, visibility 0s linear var(--panel-speed);
  cursor: pointer;
}
.panel-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* --- The panel: slides in from the right --- */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: var(--panel-width);
  min-width: 380px;
  max-width: 100vw;
  /* Near-solid black glass so nothing behind shows through the text.
     Top layer: a faint diagonal sheen (lighter at top-left). Bottom layer: the dark base. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--white) var(--panel-sheen), transparent) 0%,
      transparent 55%),
    color-mix(in srgb, var(--black) var(--panel-opacity), transparent);
  /* Strong blur: the glowing shapes behind become an unrecognizable soft haze */
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.2);
  backdrop-filter: blur(var(--panel-blur)) saturate(1.2);
  border-left: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--white) 55%, transparent),      /* thin bright edge on the left */
    -30px 0 80px color-mix(in srgb, var(--black) 70%, transparent);
  /* Inside the panel only, the soft/faint text shades get brighter (the wall keeps its own) */
  --white-soft: color-mix(in srgb, var(--white) var(--panel-text-opacity), transparent);
  --white-faint: color-mix(in srgb, var(--white) var(--panel-label-opacity), transparent);
  transform: translateX(100%);
  visibility: hidden;                            /* hidden = can't be tabbed into when closed */
  transition: transform var(--panel-speed) var(--panel-ease), visibility 0s linear var(--panel-speed);
  outline: none;
}
/* Frost grain: fine noise over the glass, behind the content */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--panel-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Close (X): stays put while the content scrolls underneath */
.panel__close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--white-soft);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.panel__close:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--glow-color) 70%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow-color) 35%, transparent);
}
.panel__close:focus-visible,
.form__control:focus-visible,
.form__check input:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Scrolls on its own if the content is taller than the screen */
.panel__scroll {
  position: relative;
  z-index: 1;                                    /* above the grain */
  height: 100%;
  overflow-y: auto;
  padding: clamp(4.5rem, 10vh, 6rem) clamp(1.6rem, 3.5vw, 3.5rem) clamp(2rem, 5vh, 3.5rem);
  scroll-behavior: smooth;                       /* smooth scrolling down to the Contact Me section */
}

/* Content column: the button is pushed to the bottom with margin-top:auto */
.panel__content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.22s ease;                /* used when switching between cards */
}
.panel__content.is-out { opacity: 0; }

/* Gentle fade-up, each piece a little after the last (--k = its position) */
.panel__content.is-in > * {
  animation: panel-fade-up 0.8s var(--panel-ease) both;
  animation-delay: calc(0.12s + var(--k, 0) * 0.07s);
}
@keyframes panel-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Text styles: serif headings, sans-serif body, gold accents --- */
.panel__num {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--gold);
}
.panel__title {
  margin-top: 0.8rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  color: #fff;
}
.panel__intro {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--white-soft);
}
.panel__body {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--white-soft);
}
.panel__list {
  margin-top: 1.8rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.95rem;
}
.panel__list li {
  position: relative;
  padding-left: 1.5rem;
}
/* the gold bullet */
.panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- About Me: two columns, photo on the left (sticky), text on the right --- */
/* Wider than the other panels on desktop so both columns have room. Width eases when switching panels. */
.panel { transition: transform var(--panel-speed) var(--panel-ease), width var(--panel-speed) var(--panel-ease), visibility 0s linear var(--panel-speed); }
.panel.is-open { transition-delay: 0s; }
@media (min-width: 761px) {
  .panel--wide { width: max(var(--panel-width), 70vw); }
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
/* Photo stays in view while the text scrolls */
.about__side { position: sticky; top: 1.5rem; }

/* The photo is shown exactly as the file is: only a thin low-opacity gold border and 2px corners */
.panel__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 2px;
}
.about__caption {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.about__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

.about__main { max-width: 58ch; min-width: 0; }
/* Stats line: gold serif facts (about 1.5x the small words) with a soft gold glow */
.about__stats {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.about__stat { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.about__stat-value {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 16px color-mix(in srgb, var(--gold) 25%, transparent);
}
.about__stat-label { font-size: 0.85rem; color: var(--white-faint); }
.about__diamond {
  align-self: center;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* "Top Rated": fades in, then one soft white sweep crosses it (a copy of the text on top, clipped to the letters) */
.about__stat-value.is-shimmer { animation: stat-fade 0.8s ease 0.15s both; }
.about__stat-value.is-shimmer::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  text-shadow: none;
  background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--white) 90%, transparent) 50%, transparent 60%) 130% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  animation: stat-sweep 1.3s ease-in-out 0.7s 1 both;
}
@keyframes stat-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes stat-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* Small screens: let the facts wrap, without stray diamonds at line ends */
@media (max-width: 520px) {
  .about__stats { gap: 0.5rem 1.4rem; }
  .about__diamond { display: none; }
}

/* Big statement: larger serif, one word in gold italic */
.about__statement {
  margin-top: 2rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  line-height: 1.18;
  color: #fff;
}
.about__statement em { font-style: italic; color: var(--gold); }

.about__story {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--white-soft);
}

/* Pull quote: large italic serif with a thin gold line on its left */
.about__pull {
  margin-top: 2.6rem;
  padding-left: 1.3rem;
  border-left: 1px solid var(--gold);
}
.about__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.25;
  color: #fff;
}
.about__note { margin-top: 0.7rem; font-size: 0.8rem; color: var(--white-faint); }
.about__traits {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--white-soft);
}

.panel__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
/* (Removed with the "Now studying" block and the outside-work line: .about__study, .about__studying, .about__outside) */

/* One compact row of inline links */
.about__links {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}
.about__link {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.about__arrow { margin-left: 0.3em; font-size: 0.85em; }
.about__link:hover, .about__link:focus-visible { color: var(--gold); }
.about__link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Gold button area, pinned to the bottom of the panel */
.panel__actions {
  margin-top: auto;
  padding-top: 2.5rem;
}
.panel__btn { margin-top: 0; }

/* --- Contact form (placeholders only, not connected yet) --- */
.form {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: none;
  min-width: 0;
}
.form__label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.form__control {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--white);
  background: color-mix(in srgb, var(--black) var(--panel-field-bg), transparent);   /* darker than the panel */
  border: 1px solid color-mix(in srgb, var(--white) var(--panel-field-border), transparent);
  border-radius: 0;
  color-scheme: dark;                            /* dark dropdown list */
  transition: border-color 0.3s ease;
}
.form__control::placeholder { color: color-mix(in srgb, var(--white) var(--panel-placeholder-opacity), transparent); }
.form__control:focus { border-color: var(--gold); }
textarea.form__control { resize: vertical; }
.form__services { gap: 0.7rem; }
.form__check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--white-soft);
  cursor: pointer;
}
.form__check input { accent-color: var(--gold); width: 1rem; height: 1rem; }

/* Thank-you message shown after the form is submitted */
.form__thanks {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--gold);
  outline: none;
}

/* --- "Contact Me" section under the form --- */
.reach {
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);   /* thin gold divider */
}
.reach__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.reach__title {
  margin-top: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.15;
  color: #fff;
}
.reach__line { margin-top: 0.5rem; font-size: 0.95rem; color: var(--white-soft); }
.reach__row {
  margin-top: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.reach__key {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.reach__link {
  align-self: flex-start;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.3s ease;
}
.reach__link:hover { color: var(--gold); }
.reach__link:focus-visible { color: var(--gold); outline: 2px solid var(--white); outline-offset: 3px; }

/* --- Projects & Results: a list of glass blocks --- */
.projects {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.project {
  padding: 1.3rem 1.4rem;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--white) 9%, transparent),
    color-mix(in srgb, var(--white) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
}
.project__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.project__title {
  margin: 0.4rem 0 0.9rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
}
.project__row {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  color: var(--white-soft);
}
.project__key {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
}
/* The Result row: thin gold left border + gold text */
.project__row--result {
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  color: var(--gold);
}
.project__row--result .project__key { color: color-mix(in srgb, var(--gold) 75%, transparent); }

/* --- Testimonials: one-at-a-time carousel --- */
.tcar { margin-top: 2.2rem; }
.tcar__stage {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;                           /* vertical scroll still works, horizontal swipes are ours */
  transition: height 0.5s var(--panel-ease);     /* the card height eases to the quote length */
}
.tcar__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s var(--panel-ease), visibility 0s linear 0.45s;
}
.tcar__slide[data-pos="left"]  { transform: translateX(-28px); }   /* leaving (or arriving from) the left */
.tcar__slide[data-pos="right"] { transform: translateX(28px); }    /* arriving from the right */
.tcar__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.tcar__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 0.7;
  height: 2.2rem;
  color: var(--gold);
}
.tcar__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.4;
  color: #fff;
}
.tcar__name {
  margin-top: 1.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.tcar__controls {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.tcar__btn {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--gold);
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.tcar__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.tcar__btn:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 28%, transparent);
}
.tcar__btn:focus-visible, .tcar__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.tcar__dots { display: flex; align-items: center; gap: 0.15rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.tcar__dot {
  position: relative;
  width: 1.1rem;                                 /* roomy click target... */
  height: 1.6rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.tcar__dot::after {                              /* ...with a small dot inside */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 30%, transparent);
  transition: background 0.3s ease, transform 0.3s ease;
}
.tcar__dot:hover::after { background: color-mix(in srgb, var(--white) 60%, transparent); }
.tcar__dot[aria-current]::after { background: var(--gold); transform: scale(1.3); }
.tcar__count {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--white-faint);
}

/* --- Brands marquee: slow, continuous, seamless --- */
.brands { margin-top: 2.6rem; }
.brands__rows {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 8px;                                      /* with the lift room below, about 12px between the rows */
}
.brands__view {
  padding-top: 4px;                              /* room for the hover lift */
  overflow: hidden;
  /* fade both edges into the panel */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.brands__track {
  display: flex;
  width: max-content;
  list-style: none;
  animation: brands-scroll var(--marquee-seconds, 70s) linear infinite;
}
.brands__track--right { animation-direction: reverse; }           /* row 2 scrolls the other way */
.brands__rows:hover .brands__track { animation-play-state: paused; }   /* hovering the logos pauses both rows */
/* The list is shown twice, so sliding by exactly half loops with no jump (tiles use margin, not gap, so the maths is exact) */
@keyframes brands-scroll { to { transform: translateX(-50%); } }
.brands__tile { flex: none; margin-right: 16px; }
.brands__tile img {
  display: block;
  height: 88px;
  width: auto;
  border-radius: 12px;
  /* always full color, full opacity */
  transition: transform 0.35s ease;
}
.brands__tile:hover img { transform: translateY(-4px); }

/* Closing line + button sit right under the logos (not pinned to the bottom) */
.panel__actions--closing { margin-top: 3rem; padding-top: 0; }
.panel__closing {
  margin-bottom: 1.4rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.35;
  color: #fff;
}

/* --- Mobile: full-screen sheet sliding up from the bottom --- */
@media (max-width: 760px) {
  .panel {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
    transform: translateY(100%);
  }
  .panel.is-open { transform: translateY(0); }
  .brands__tile img { height: 64px; }            /* smaller tiles on phones */
  .brands__tile { margin-right: 12px; }

  /* About Me: one column, photo first, full width, not sticky */
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__side { position: static; }
  /* Get a Quote: the photo becomes a shorter 4:3 banner centered on the face and laptop */
  .about--quote .panel__photo { aspect-ratio: 4 / 3; object-position: 50% 28%; }
  .panel__close { top: 0.9rem; right: 1rem; }   /* always visible: outside the scrolling area */
  .panel__scroll { padding-top: 4.5rem; }
  body.panel-open .wall { transform: none; }    /* sheet covers everything, no shift needed */
}

/* ---------- Respect "reduce motion" ----------
   Turns off CSS transitions/animations. script.js also checks this
   setting to stop the GSAP entrance and the drifting canvas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .panel__scroll { scroll-behavior: auto; }
  /* Testimonials: slides switch instantly; brands show as a wrapped grid instead of scrolling */
  .brands__view { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .brands__rows { gap: 12px; }
  .brands__track { width: auto; flex-wrap: wrap; gap: 12px; animation: none; }
  .brands__tile { margin-right: 0; }
  .brands__tile--copy { display: none; }
  .brands__tile img { transition: none; }
}

/* =========================================================
   CONTENT CREATION GALLERY (card 04)
   Filter tabs, masonry grid, and the full-screen viewer.
   Only black, gold and white; gold at low opacity for borders/glow.
   ========================================================= */
.gallery { margin-top: 2rem; }

/* --- Filter tabs: small spaced capitals, active = gold + thin gold underline --- */
.gallery__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; }
.gallery__tab {
  padding: 0.5rem 0 0.45rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white-faint);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.gallery__tab:hover { color: var(--white); }
.gallery__tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.gallery__tab:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* --- Masonry: CSS columns, every tile keeps its own aspect ratio --- */
.gallery__grid {
  margin-top: 1.6rem;
  column-count: 3;
  column-gap: 14px;
  transition: opacity 0.22s ease;               /* filtering fades out, swaps, fades in */
}
.gallery__grid.is-fading { opacity: 0; }
@media (max-width: 1100px) { .gallery__grid { column-count: 2; } }
@media (max-width: 600px)  { .gallery__grid { column-count: 1; } }

.gtile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  background: var(--black);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.gtile:hover, .gtile:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 60%, transparent),
              0 0 26px color-mix(in srgb, var(--gold) 24%, transparent);
}
.gtile:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.gtile__img, .gtile__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gtile__clip { opacity: 0; transition: opacity 0.3s ease; }
.gtile.is-previewing .gtile__clip { opacity: 1; }

/* Darkened strip at the bottom so the label stays readable on any picture */
.gtile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3.2rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--black) 75%, transparent), transparent);
  pointer-events: none;
}
.gtile__label {
  position: absolute;
  left: 0.7rem;
  bottom: 0.6rem;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}
/* Small gold play icon (circle + triangle) on videos */
.gtile__play {
  position: absolute;
  right: 0.7rem;
  bottom: 0.55rem;
  z-index: 1;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: color-mix(in srgb, var(--black) 45%, transparent);
}
.gtile__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
}

/* --- Viewer: dark overlay inside the panel --- */
.gviewer {
  position: absolute;
  inset: 0;
  z-index: 5;                                   /* above the panel's own X (z-index 2) */
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--black) 96%, transparent);
  animation: gviewer-in 0.3s ease both;
}
@keyframes gviewer-in { from { opacity: 0; } to { opacity: 1; } }

.gviewer__count {
  position: absolute;
  top: 1.7rem;
  left: clamp(1.6rem, 3.5vw, 3.5rem);
  z-index: 2;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--gold);
}
.gviewer__close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--white-soft);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.gviewer__close:hover {
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent);
}
.gviewer__close:focus-visible, .gviewer__nav:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.gviewer__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.6rem clamp(3.4rem, 6vw, 5.5rem) 1rem;
  touch-action: pan-y;                          /* vertical scroll still works; sideways = swipe */
}
.gviewer__media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--black);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
}
.gviewer__media--in { animation: gviewer-in 0.35s ease both; }

.gviewer__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -1.3rem;
  padding: 0;
  color: var(--gold);
  background: color-mix(in srgb, var(--black) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.gviewer__nav[hidden] { display: none; }
.gviewer__nav--prev { left: clamp(0.5rem, 1.6vw, 1.2rem); }
.gviewer__nav--next { right: clamp(0.5rem, 1.6vw, 1.2rem); }
.gviewer__nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.gviewer__nav:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 28%, transparent);
}

.gviewer__caption {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem clamp(1.6rem, 3.5vw, 3.5rem) 1.4rem;
}
.gviewer__cat {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.gviewer__title { font-family: var(--font-heading); font-size: 1.25rem; color: #fff; }

@media (max-width: 760px) {
  .gviewer__close { top: 0.9rem; right: 1rem; }
  .gviewer__count { top: 1.5rem; }
  .gviewer__stage { padding: 4.2rem 0.8rem 0.6rem; }
  .gviewer__nav { width: 2.3rem; height: 2.3rem; margin-top: -1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gtile:hover, .gtile:focus-visible { transform: none; }   /* no lift; the glow still shows */
}

/* =========================================================
   SOCIAL MEDIA MANAGEMENT GRID (card 02)
   7 items: 3 + 3 + 1 (last one centered) on desktop, 2 per row on
   tablet, 1 on mobile. Flex-wrap + centering keeps the odd one centered.
   ========================================================= */
.smm {
  --smm-gap: clamp(18px, 2.4vw, 30px);
  list-style: none;
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.8rem, 3vw, 2.6rem) var(--smm-gap);
}
.smm__item {
  flex: 0 0 calc((100% - 2 * var(--smm-gap)) / 3);
  text-align: center;
}
@media (max-width: 1100px) { .smm__item { flex-basis: calc((100% - var(--smm-gap)) / 2); } }
@media (max-width: 600px)  { .smm__item { flex-basis: 100%; } }

/* Image frame: 4:3, thin low-opacity gold border, 2px corners; the picture zooms inside it */
.smm__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  background: var(--black);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.smm__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 0.8, 0.24, 1);   /* slow zoom */
}
/* The consistency overlay sits on top of the picture (set --smm-overlay at the top of this file) */
.smm__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--smm-overlay, none);
  pointer-events: none;
}

/* Hover: lift, brighter border, soft gold glow, slow zoom */
.smm__item:hover .smm__frame {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--black) 55%, transparent),
              0 0 28px color-mix(in srgb, var(--gold) 26%, transparent);
}
.smm__item:hover .smm__img { transform: scale(1.07); }

/* Missing image: dark frosted-glass tile with a thin gold line icon */
.smm__frame.is-missing {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--white) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.smm__icon {
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* Small gold number, then the white serif task name */
.smm__num {
  display: block;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--gold);
}
.smm__name {
  margin-top: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  /* No lift or zoom; the border and glow still change on hover */
  .smm__item:hover .smm__frame { transform: none; }
  .smm__item:hover .smm__img { transform: none; }
}

/* =========================================================
   TOOLS I USE (card 06)
   Calm panel: the round badges are the only bright thing. Everything
   else (labels, names, lines) is muted or low-opacity gold.
   ========================================================= */
.tools { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 2.2rem; }

/* Group label: small gold uppercase with a thin gold line running after it */
.tools__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.tools__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* Badges: evenly spaced columns that wrap inside the group */
.tools__row {
  list-style: none;
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: 1.5rem 0.8rem;
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.tool__badge {
  display: block;
  width: 64px;
  height: 64px;
  max-width: 80px;
  border-radius: 50%;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.tool__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 80px;
  max-height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.tool__name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--white-faint);               /* small, muted white */
  transition: color 0.2s ease-out;
}

/* Hover: lift, soft gold ring, ~6% bigger, label turns white (under 250ms) */
.tool:hover .tool__badge {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent),
              0 0 18px color-mix(in srgb, var(--gold) 38%, transparent);
}
.tool:hover .tool__name { color: var(--white); }

/* Missing image: dark frosted-glass circle with gold serif initials */
.tool__badge.is-missing {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--white) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.tool__initials {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* Reveal when the panel opens: each group fades up in turn, then its badges pop in
   about 40ms apart. "backwards" (not "both") so hover can still move the badges after. */
.panel__content.is-in .tools__group {
  animation: tools-group-in 0.7s var(--panel-ease) backwards;
  animation-delay: calc(0.3s + var(--g, 0) * 0.16s);
}
.panel__content.is-in .tool {
  animation: tool-pop 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) backwards;
  animation-delay: calc(0.45s + var(--g, 0) * 0.16s + var(--b, 0) * 40ms);
}
@keyframes tools-group-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tool-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .tool__badge { width: 56px; height: 56px; }
  .tools__row { grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  /* Everything shows at once; hover keeps the ring and white label but no lift/scale */
  .tool:hover .tool__badge { transform: none; }
}

/* =========================================================
   FACEBOOK ADS GRID (card 03)
   Uses the Social Media grid classes (.smm, .smm__item, .smm__frame...) for
   the exact same layout, border, hover lift and glow. Below: the dark glass
   tile, the line-art styles, the draw-on reveal, the idle loops and the
   brighter/faster hover.
   ========================================================= */
.ads { margin-top: 0; }
.ads .smm { margin-top: 2.2rem; }

/* (The results strip now fills the old empty area: see .fbr below.) */

/* Frame: dark frosted glass with a faint gold glow behind the drawing (no photo overlay) */
.smm__frame--art {
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--white) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.smm__frame--art::after { display: none; }

/* Line art: thin gold strokes (about 1.5px on screen), soft white accents */
.art {
  --spd: 1;                                      /* idle speed multiplier: smaller = faster */
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: filter 0.3s ease;
}
.art .w { stroke: color-mix(in srgb, var(--white) 55%, transparent); }
.art .fg { fill: var(--gold); stroke: none; }
.art .fw { fill: color-mix(in srgb, var(--white) 85%, transparent); stroke: none; }
.art .nf { fill: color-mix(in srgb, var(--gold) 10%, transparent); }
.art .w.nf { fill: color-mix(in srgb, var(--white) 6%, transparent); }
.art .dotted { stroke: color-mix(in srgb, var(--white) 40%, transparent); stroke-dasharray: 1 4; }

/* Draw-on: each outline "draws itself" (pathLength is 1, set by script.js) */
.art .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.panel__content.is-in .art .d {
  animation: art-draw 0.9s ease-out backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.14s + var(--e, 0) * 0.035s);
}
.panel__content.is-in .art .f {
  animation: art-fade 0.6s ease-out backwards;
  animation-delay: calc(0.9s + var(--i, 0) * 0.14s);
}
@keyframes art-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes art-fade { from { opacity: 0; } to { opacity: 1; } }

/* Idle loops: very gentle. They start once the drawing has finished. */
.idle-pulse, .idle-glow, .idle-rise, .idle-spark, .idle-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation-delay: calc(1.8s + var(--i, 0) * 0.14s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.smm__item .idle-pulse { animation-name: art-pulse; animation-duration: calc(4.5s * var(--spd)); }
.smm__item .idle-glow  { animation-name: art-glow;  animation-duration: calc(3.5s * var(--spd)); }
.smm__item .idle-rise  { animation-name: art-rise;  animation-duration: calc(4s * var(--spd)); transform-origin: 50% 100%; }
.smm__item .idle-spark { animation-name: art-spark; animation-duration: calc(3s * var(--spd)); }
.smm__item .idle-drift { animation-name: art-drift; animation-duration: calc(5s * var(--spd)); animation-delay: calc(1.8s + var(--k, 0) * 0.7s); animation-timing-function: ease-in; }
.smm__item .idle-march { animation: art-march calc(6s * var(--spd)) linear infinite; }
@keyframes art-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes art-glow  { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gold) 70%, transparent)); } }
@keyframes art-rise  { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }
@keyframes art-spark { 0%, 100% { opacity: 0.5; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes art-drift { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes art-march { to { stroke-dashoffset: -10; } }

/* Hover: the drawing brightens and the idle loops speed up while hovered */
.smm__item:hover .art { --spd: 0.45; filter: brightness(1.35) saturate(1.1); }

@media (prefers-reduced-motion: reduce) {
  /* Finished drawings, no animation (the global rule above already stops all animations) */
  .smm__item:hover .art { filter: brightness(1.35); }
}

/* Save power: the idle loops pause while the panel is closed */
.panel:not(.is-open) .art * { animation-play-state: paused; }

/* =========================================================
   GET A QUOTE CLOSING LINES (card 08). Words come from QUOTE_LINE_* in script.js.
   Desktop: in the left (sticky) column under the caption. Mobile: the columns
   stack, so this copy is hidden and a second one shows above the button.
   Colors: white only (no gold), apart from the thin gold line above.
   ========================================================= */
.about__tagline {
  margin-top: 28px;                              /* space above the line */
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);   /* thin, low-opacity gold line */
  font-family: var(--font-heading);
  text-align: left;
}
.about__tagline span { display: block; }

/* Line 1: HIRE ME. big, white, soft glow that pulses very slowly (no scale or movement) */
.tagline__1 {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);                           /* #F5F2EA */
  text-shadow: 0 0 18px color-mix(in srgb, var(--white) 25%, transparent),
               0 0 40px color-mix(in srgb, var(--white) 11%, transparent);
  /* fades in a moment after the panel opens, then the glow starts to pulse */
  animation: tagline-in 0.9s ease 0.9s backwards,
             tagline-glow 4s ease-in-out 1.8s infinite;
}

/* Line 2: italic, soft white; only the key word is full white and a touch bolder */
.tagline__2 {
  margin-top: 6px;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: color-mix(in srgb, var(--white) 75%, transparent);
  animation: tagline-in 0.9s ease 1.2s backwards;   /* 300ms after line 1 */
}
.tagline__bold {
  font-style: italic;
  color: var(--white);
  -webkit-text-stroke: 0.4px var(--white);       /* slightly bolder, without a faked bold font */
}

@keyframes tagline-in { from { opacity: 0; } to { opacity: 1; } }
/* Glow strength eases between 25% and 45% */
@keyframes tagline-glow {
  0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--white) 25%, transparent),
                          0 0 40px color-mix(in srgb, var(--white) 11%, transparent); }
  50%      { text-shadow: 0 0 18px color-mix(in srgb, var(--white) 45%, transparent),
                          0 0 40px color-mix(in srgb, var(--white) 20%, transparent); }
}

.about__tagline--mobile { display: none; }       /* desktop: only the left-column copy shows */

@media (max-width: 760px) {
  .about__side .about__tagline { display: none; }   /* not under the photo on mobile */
  .about__tagline--mobile {
    display: block;
    margin: 0 0 14px;
    padding-top: 0;
    border-top: 0;
    text-align: center;
  }
  .about__tagline--mobile .tagline__1 { font-size: 34px; }
  .about__tagline--mobile .tagline__2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Both lines show instantly and the glow stays still at a middle strength */
  .tagline__1, .tagline__2 { animation: none; }
  .tagline__1 {
    text-shadow: 0 0 18px color-mix(in srgb, var(--white) 35%, transparent),
                 0 0 40px color-mix(in srgb, var(--white) 15%, transparent);
  }
}

/* =========================================================
   AI AUTOMATION (card 05): tiles, live diagrams, full view
   Diagrams are inline SVGs made by script.js from automation-data.js.
   --wfu = diagram units per screen pixel (set by script.js), so line widths
   and label sizes stay the same on screen at any zoom.
   ========================================================= */
.autos { margin-top: 2.2rem; }
.autos__grid {
  --autos-gap: clamp(18px, 2.4vw, 30px);
  list-style: none;
  display: flex;                         /* 2 per row; a lone tile on the last row is centered */
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.8rem, 3vw, 2.6rem) var(--autos-gap);
}
.autos__item { flex: 0 0 calc((100% - var(--autos-gap)) / 2); min-width: 0; text-align: center; }
@media (max-width: 760px) { .autos__item { flex-basis: 100%; } }

/* Tile: dark frosted glass, thin low-opacity gold border, 2px corners */
.atile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--white) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.autos__item:hover .atile, .atile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--black) 55%, transparent),
              0 0 28px color-mix(in srgb, var(--gold) 26%, transparent);
}
.atile:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.atile .wf, .atile__shot { position: absolute; inset: 0; width: 100%; height: 100%; }
.atile__shot { object-fit: contain; }

.autos__line {
  margin: 0.55rem auto 0;
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--white-soft);
}
.autos__badges {
  list-style: none;
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.autos__badge { display: block; width: 28px; height: 28px; border-radius: 50%; }

/* --- The diagram itself --- */
.wf { display: block; overflow: hidden; }
.wf-line {
  fill: none;
  stroke: color-mix(in srgb, var(--white) 24%, transparent);   /* faint white lines */
  stroke-width: calc(1.3px * var(--wfu, 1));
}
.wf-pulse {                                      /* the travelling light: warm gold-white */
  fill: none;
  stroke: color-mix(in srgb, var(--white) 70%, var(--gold));
  stroke-width: calc(2.4px * var(--wfu, 1));
  stroke-linecap: round;
  stroke-dasharray: 0.12 2;
  opacity: 0;                                    /* the animation fades it in only while it travels */
  will-change: stroke-dashoffset;
}
.wf-pulse--glow {                                /* soft glow under the light (full view only) */
  stroke: var(--gold);
  stroke-opacity: 0.35;
  stroke-width: calc(8px * var(--wfu, 1));
}
/* Nodes look like n8n: dark gray rounded squares with a thin lighter border (no gold on them;
   gold is only used by the travelling light, the arrival flash and the tile hover) */
.wf-box {
  fill: #2b2b2b;
  stroke: #4a4a4a;
  stroke-width: calc(1.2px * var(--wfu, 1));
}
.wf-flash { fill: var(--gold); opacity: 0; pointer-events: none; }   /* brief flash when the light arrives */
.wf-io { fill: #2b2b2b; stroke: #6a6a6a; stroke-width: calc(1px * var(--wfu, 1)); }   /* little in / out handles */
.wf-bolt { fill: #ff7a45; stroke: none; }                            /* lightning mark on triggers */
.wf-arrow { fill: color-mix(in srgb, var(--white) 38%, transparent); stroke: none; }
/* Icons: colored line art in a 48 x 48 box (color comes from --c, set per node type) */
.wf-ico * { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wf-ico .fl, .wf-ico .fl * { fill: var(--c); stroke: none; }

/* Sub-nodes (model / memory / tool): short dashed line, soft idle glow, flash when the parent runs */
.wf-sub {
  fill: none;
  stroke: color-mix(in srgb, var(--white) 38%, transparent);
  stroke-width: calc(1.2px * var(--wfu, 1));
  stroke-dasharray: 5 5;
}
.wf-subglow {
  fill: none;
  stroke: var(--gold);
  stroke-width: calc(2px * var(--wfu, 1));
  opacity: 0.22;
  animation: wf-breathe 3.6s ease-in-out infinite alternate;
}
@keyframes wf-breathe { from { opacity: 0.1; } to { opacity: 0.38; } }

/* Labels (full view only): name under the node with a smaller muted subtitle, like n8n */
.wf-name {
  font-family: var(--font-body);
  font-size: calc(12px * var(--wfu, 1));
  font-weight: 400;
  fill: var(--white);
  pointer-events: none;
}
.wf-name--in { font-size: calc(15px * var(--wfu, 1)); }
.wf-subtitle {
  font-size: calc(10px * var(--wfu, 1));
  font-weight: 300;
  fill: color-mix(in srgb, var(--white) 50%, transparent);
}
.wf-tiny {
  font-family: var(--font-body);
  font-size: calc(10px * var(--wfu, 1));
  font-weight: 300;
  fill: color-mix(in srgb, var(--white) 55%, transparent);
  pointer-events: none;
}
.wf-nolabels .wf-name, .wf-nolabels .wf-tiny { display: none; }
.atile .wf-name, .atile .wf-tiny { display: none; }

/* Pause every animation: panel closed, tab hidden, tile off screen, or the big view covering the tiles */
.panel:not(.is-open) .wf *,
.bg-paused .wf *,
.wf.is-off *,
.autos.is-covered .atile .wf * { animation-play-state: paused; }

/* --- Full view (reuses the gallery viewer look) --- */
.wfv__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;                            /* drag and pinch are ours, not the page's */
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--black) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
}
.wfv__canvas.is-grabbing { cursor: grabbing; }
.wfv__canvas .wf, .wfv__shot { width: 100%; height: 100%; }
.wfv__shot { position: absolute; left: 0; top: 0; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.wfv__ctrl { position: absolute; right: 0.7rem; bottom: 0.7rem; display: flex; gap: 0.4rem; z-index: 2; }
.wfv__btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold);
  background: color-mix(in srgb, var(--black) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wfv__btn:hover { border-color: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 30%, transparent); }
.wfv__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* Static diagrams with a faint steady glow on the lines */
  .wf-line { stroke: color-mix(in srgb, var(--white) 42%, transparent); }
  .wf-edges { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--white) 35%, transparent)); }
  .wf-pulse { display: none; }
  .wf-subglow { opacity: 0.25; }
  .autos__item:hover .atile, .atile:focus-visible { transform: none; }
}

/* =========================================================
   SOCIAL MEDIA RESULTS (card 02): label, big numbers, screenshot thumbnails, zoom viewer
   Data: SMM_RESULTS in script.js. The label reuses the "Tools I Use" group label look.
   ========================================================= */
/* The section: a very subtle glass band with a thin gold line on top. The band reaches a little past
   the grid on each side, so the grid itself stays exactly as wide as the task grid above. */
.rs {
  --rs-pad: 1.4rem;
  margin: 64px calc(-1 * var(--rs-pad)) 0;       /* 64px above; the closing line below keeps its own 48px */
  padding: 2.2rem var(--rs-pad) 2.6rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--white) 4.5%, transparent), transparent 80%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rs .tools__label { font-size: 13px; letter-spacing: 0.32em; }   /* bigger label, same gold line */
.rs__lead {
  margin-top: 0.9rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: #fff;
}

/* Cards: same columns and gaps as the task grid (3 / 2 / 1). A short last row is centered. */
.rs__grid {
  --rs-gap: clamp(18px, 2.4vw, 30px);
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 3.4vw, 2.8rem) var(--rs-gap);
}
.rs__item { flex: 0 0 calc((100% - 2 * var(--rs-gap)) / 3); text-align: center; }
@media (max-width: 1100px) { .rs__item { flex-basis: calc((100% - var(--rs-gap)) / 2); } }
@media (max-width: 600px)  { .rs__item { flex-basis: 100%; } }

/* Frame: every screenshot sits in the same 4:5 portrait frame, filling the column, never cropped */
.rs__tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--white) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.rs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rs__item:hover .rs__tile, .rs__tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--black) 55%, transparent),
              0 0 28px color-mix(in srgb, var(--gold) 26%, transparent);
}
.rs__tile:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Under each picture: its own big number, a muted line, then the gold account label */
.rs__figure {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 52px;
  line-height: 1;
  color: #fff;
}
.rs__caption { display: block; margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.4; color: var(--white-faint); }
.rs__acct {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 760px) { .rs__figure { font-size: 40px; } }

/* Viewer picture: fits the screen; click zooms in, drag moves, pinch zooms */
.rsv__box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-in;
  touch-action: none;
}
.rsv__box.is-zoomed { cursor: grab; }
.rsv__img {
  height: 100%;                                 /* scaled up to fit the screen (the files are small) */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  image-rendering: auto;
  background: var(--black);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .rs__item:hover .rs__tile, .rs__tile:focus-visible { transform: none; }   /* no lift; border and glow still change */
}

/* =========================================================
   FACEBOOK ADS RESULTS (card 03): rows of winning ads
   Section look (band, label, serif line) comes from .rs, the same as the Social Media Results.
   Data: ADS_RESULTS in script.js.
   ========================================================= */
/* Cards: same columns and gaps as the task grid (3 / 2 / 1). A short last row is centered. */
.fbr__list {
  --fbr-gap: clamp(18px, 2.4vw, 30px);
  list-style: none;
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 3.4vw, 2.8rem) var(--fbr-gap);
}
.fbr__card {
  flex: 0 0 calc((100% - 2 * var(--fbr-gap)) / 3);
  display: flex;
  flex-direction: column;              /* cards in a row are equally tall, so the account labels line up */
  padding: 0.9rem 0.9rem 1.1rem;
  text-align: center;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--white) 4%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 2px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.fbr__card:hover, .fbr__card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--black) 55%, transparent),
              0 0 28px color-mix(in srgb, var(--gold) 24%, transparent);
}
@media (max-width: 1100px) { .fbr__card { flex-basis: calc((100% - var(--fbr-gap)) / 2); } }
@media (max-width: 600px)  { .fbr__card { flex-basis: 100%; } }

/* The card's content: a size container, so the stat values shrink a little when the card is narrow */
.fbr__body { flex: 1; display: flex; flex-direction: column; align-items: center; container-type: inline-size; }

/* 1. Creative: 4:5 portrait frame on dark glass, whole picture visible */
.fbr__frame, .fbr__shot {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--white) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--black) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 2px;
  transition: border-color 0.4s ease;
}
.fbr__frame { aspect-ratio: 4 / 5; }
.fbr__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fbr__frame:hover, .fbr__frame:focus-visible, .fbr__shot:hover, .fbr__shot:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 65%, transparent);
}
.fbr__frame:focus-visible, .fbr__shot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* 2. AD number, 3. ROAS label and the biggest thing in the card: the number */
.fbr__tag {
  margin-top: 1.1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}
.fbr__roaslabel {
  margin-top: 1rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4em;
  padding-left: 0.4em;                   /* balances the trailing letter-spacing so it looks centered */
  text-transform: uppercase;
  color: var(--gold);
}
.fbr__roas {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 88px;
  line-height: 1;
  color: #fff;
}

/* 4. Stat blocks side by side: small muted label, large serif value */
.fbr__stats { width: 100%; margin-top: 1.2rem; display: flex; justify-content: center; gap: 0.8rem 1.4rem; }
.fbr__stat { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.fbr__statlabel {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white-faint);
}
.fbr__statval { font-family: var(--font-heading); font-size: clamp(22px, 10cqw, 32px); line-height: 1.1; color: #fff; white-space: nowrap; }
.fbr__cur { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--white-faint); }

/* 5. Result screenshot: full card width, at least ~90px tall, picture scaled to fit */
.fbr__shot { min-height: 90px; margin-top: 1.4rem; display: grid; place-items: center; }
.fbr__shotimg { display: block; width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.fbr__src { margin-top: 0.5rem; font-size: 0.72rem; color: var(--white-faint); }

/* 6. Account label at the bottom */
.fbr__acct { display: block; margin-top: 1.1rem; }

@media (max-width: 760px) { .fbr__roas { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .fbr__card:hover, .fbr__card:focus-within { transform: none; }   /* no lift; border and glow still change */
}

/* =========================================================
   SOCIAL ICON ROW (built by script.js from SOCIAL_LINKS; used on the landing and the card wall)
   .social-row = shared look. .landing__social = bottom of the landing.
   .social-row--wall = in the flow, under the cards.
   ========================================================= */
.social-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;                          /* only the icons themselves are clickable */
}

/* Landing: centered near the bottom, inside .landing so it fades out with it */
.landing__social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;                                  /* 32px on mobile, below */
  animation: social-in 1s ease 1s backwards;     /* fades in about a second after the landing loads */
}
@keyframes social-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Card wall: centered below the two rows of cards, never closer than 48px, with 32px of room below.
   It sits inside the wall, so it blurs with the wall when a panel opens. It fades in just after the cards. */
.social-row--wall {
  margin: 48px 0 32px;
  opacity: 0;
  transition: opacity 1s ease 0.9s;
}
.wall.is-active .social-row--wall { opacity: 1; }

/* "FOLLOW": same muted style as the small text above the headline */
.social-row__label {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  padding-left: 0.35em;                          /* balances the trailing letter-spacing so it looks centered */
  text-transform: uppercase;
  color: var(--white-faint);
}
.social-row__icons { display: flex; gap: 18px; }

/* Round 44px tap area, thin low-opacity white border, muted white icon */
.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--white) 60%, transparent);
  pointer-events: auto;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.social-link svg { width: 20px; height: 20px; }
.social-link svg.is-fill { fill: currentColor; stroke: none; }
.social-link svg.is-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Hover and keyboard focus: gold icon and border, soft gold glow, slight lift */
.social-link:hover, .social-link:focus-visible {
  color: var(--gold);                            /* #C9A24B */
  border-color: var(--gold);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent);
  transform: translateY(-2px);
}
.social-link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (max-width: 760px) { .landing__social { bottom: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .landing__social { animation: none; }          /* show immediately */
  .social-row--wall { opacity: 1; transition: none; }
  .social-link:hover, .social-link:focus-visible { transform: none; }
}

/* =========================================================
   TRUST LINE (landing + card wall). Built by script.js from TRUST_ITEMS and placed
   first inside the social row, so the two always line up. Fades with its screen.
   ========================================================= */
.trust {
  margin-bottom: 0.6rem;                         /* plus the row's 0.9rem gap = about 24px above "FOLLOW" */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-soft);                      /* muted white, about 70% */
}
.trust__item { color: inherit; text-decoration: none; padding-left: 0.22em; }   /* balances the trailing letter-spacing */
.trust__item + .trust__item::before {            /* small gold dot between items */
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 1.1rem 0.18em 0.9rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.trust__num { display: inline-grid; color: var(--gold); font-variant-numeric: tabular-nums; }   /* "50+" and "100%" in gold */
.trust__num::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; height: 0; }
.trust__num > span { grid-area: 1 / 1; }

/* "TOP RATED ON UPWORK": the only link. Gold with a thin underline on hover and keyboard focus. */
.trust__link { pointer-events: auto; transition: color 0.3s ease; }
.trust__link:hover, .trust__link:focus-visible {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.trust__link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Mobile: three centered lines (no dots), a little smaller */
@media (max-width: 760px) {
  .trust { flex-direction: column; font-size: 11px; letter-spacing: 0.18em; gap: 0.3rem; }
  .trust__item + .trust__item::before { display: none; }
}

/* =========================================================
   TRUST LINE: LANDING SIZE (the card wall version is not affected: these rules only match
   inside .landing__social). Sizes come from the --trust-landing-* variables at the top of this file.
   ========================================================= */
.landing__social .trust {
  font-size: var(--trust-landing-size);
  color: color-mix(in srgb, var(--white) var(--trust-landing-opacity), transparent);
  margin-bottom: 1.1rem;                         /* plus the row's 0.9rem gap = about 32px above the icons block */
}
.landing__social .trust__num { font-weight: 500; }                 /* "50+" and "100%" slightly bolder */
.landing__social .trust__item + .trust__item::before { margin: 0 1.2rem 0.2em 1rem; width: 4px; height: 4px; }
@media (max-width: 1024px) { .landing__social .trust { font-size: var(--trust-landing-size-tablet); } }
/* Mobile: wraps into 2 lines if needed (no dots, items spaced out) */
@media (max-width: 760px) {
  .landing__social .trust {
    font-size: var(--trust-landing-size-mobile);
    flex-direction: row;
    gap: 0.35rem 1.3rem;
    padding: 0 1rem;
  }
  .landing__social .trust__item + .trust__item::before { display: none; }
}
/* script.js hides the trust line on the landing when there is not enough room above it
   (it keeps at least 40px between the TAKE A LOOK button and the trust line) */
.landing__social.is-trust-hidden .trust { display: none; }

/* =========================================================
   WARP TRANSITION (TAKE A LOOK -> card wall, and Back). Driven by script.js (TRANSITION_*).
   --warp-f = TRANSITION_MS / 1600, so changing TRANSITION_MS speeds everything up or slows it down.
   The streaking stars are drawn on the background canvas; this file handles the landing text,
   the bloom, the flash and the cards.
   ========================================================= */

/* While a jump runs, nothing on the wall can be clicked (the safety timer in script.js always ends it) */
body.is-warping .wall { pointer-events: none !important; }

/* Landing text drifts toward you: scales up, blurs lightly, fades (0 to 0.3s). "scale" is its own property,
   so it never clashes with the entrance animation. */
.landing.landing--warp {
  transition: opacity calc(0.3s * var(--warp-f, 1)) ease-in,
              scale calc(0.3s * var(--warp-f, 1)) ease-in,
              filter calc(0.3s * var(--warp-f, 1)) ease-in,
              visibility 0s;
}
.landing.landing--warp.is-warping-out { opacity: 0; scale: 1.12; filter: blur(6px); }
/* Back: the same drift in reverse, easing out */
.landing.landing--warp-back {
  transition: opacity calc(0.5s * var(--warp-f, 1)) ease-out,
              scale calc(0.5s * var(--warp-f, 1)) ease-out,
              filter calc(0.5s * var(--warp-f, 1)) ease-out,
              visibility 0s;
}
.landing.landing--warp-back.is-warping-out { opacity: 0; scale: 1.12; filter: blur(6px); }

/* Soft gold bloom that expands from the TAKE A LOOK button (0 to 0.3s), then fades */
.warp-bloom {
  position: fixed;
  left: var(--bx);
  top: var(--by);
  width: 90vmax;
  height: 90vmax;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 70%, transparent), color-mix(in srgb, var(--gold) 18%, transparent) 45%, transparent);
  transform: translate(-50%, -50%) scale(0.02);
  opacity: 0;
  animation: warp-bloom calc(0.85s * var(--warp-f, 1)) cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}
@keyframes warp-bloom {
  0%   { opacity: 0.75; transform: translate(-50%, -50%) scale(0.02); }
  35%  { opacity: 0.5;  transform: translate(-50%, -50%) scale(0.55); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.9); }
}

/* The very brief white-gold flash at the peak of the jump (about 0.9s). Strength: TRANSITION_FLASH. */
.warp-flash {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: color-mix(in srgb, var(--white) 70%, var(--gold));
  opacity: 0;
  animation: warp-flash calc(1.6s * var(--warp-f, 1)) linear forwards;
}
@keyframes warp-flash {
  0%, 50% { opacity: 0; }
  56%     { opacity: var(--warp-flash, 0.12); }
  68%, 100% { opacity: 0; }
}

/* Wall, entering: it appears quickly at 0.9s; each card starts small, blurred and faint, then flies into place
   (soft ease-out, 60ms between cards). The float and tilt live on the inner .card / .card__face, so
   they simply take over when the card lands, with no jump. */
.wall.wall--warp { transition: opacity calc(0.25s * var(--warp-f, 1)) ease, visibility 0s; }
.wall.wall--warp .slot { opacity: 0.2; scale: 0.6; filter: blur(8px); translate: 0 0; transition: none; }
.wall.wall--warp.is-active .slot {
  opacity: 1;
  scale: 1;
  filter: blur(0);
  transition: opacity calc(0.5s * var(--warp-f, 1)) ease-out,
              scale calc(0.6s * var(--warp-f, 1)) cubic-bezier(0.16, 1, 0.3, 1),
              filter calc(0.5s * var(--warp-f, 1)) ease-out;
  transition-delay: calc(var(--i) * 60ms * var(--warp-f, 1));
}

/* Wall, leaving (Back): the cards shrink, blur and fade quickly */
.wall.wall--warp-out { transition: opacity calc(0.4s * var(--warp-f, 1)) ease-in, visibility 0s calc(0.4s * var(--warp-f, 1)); }
.wall.wall--warp-out .slot {
  opacity: 0;
  scale: 0.6;
  filter: blur(8px);
  translate: 0 0;
  transition: opacity calc(0.35s * var(--warp-f, 1)) ease-in,
              scale calc(0.4s * var(--warp-f, 1)) ease-in,
              filter calc(0.35s * var(--warp-f, 1)) ease-in;
  transition-delay: calc(var(--i) * 20ms * var(--warp-f, 1));
}

/* Used for a moment when a jump ends: no transitions, so the cards are exactly in their final place */
.wall.wall--snap, .wall.wall--snap .slot { transition: none !important; }

/* Reduced motion: no warp at all (script.js uses the old simple fade) */
@media (prefers-reduced-motion: reduce) {
  .warp-bloom, .warp-flash { display: none; }
}

/* =========================================================
   GET A QUOTE: thank-you screen (replaces the form after a successful send; built in script.js)
   ========================================================= */
.form__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 0 2rem;
  outline: none;
  animation: form-done-in 0.7s ease both;        /* soft fade-in */
}
@keyframes form-done-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Gold check mark in a circle, with a subtle glow */
.form__check-badge {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--gold) 28%, transparent);
}
.form__check-badge svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.form__donetitle {
  margin-top: 1.6rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: #fff;
}
.form__doneline { margin-top: 0.9rem; max-width: 30ch; font-size: 1rem; line-height: 1.55; color: var(--white-soft); }

/* Small gold-outline button */
.form__again {
  margin-top: 2rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.form__again:hover, .form__again:focus-visible {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 25%, transparent);
}
.form__again:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .form__done { animation: none; }               /* no fade */
}