/* ==========================================================================
   TARGETWARD — main stylesheet
   --------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (use Ctrl+F on the section number)
     1.  Design tokens: colours, fonts, spacing   <-- change the look HERE
     2.  Optional visual directions B and C
     3.  Reset and base
     4.  Layout helpers
     5.  Typography
     6.  Buttons and links
     7.  Header and navigation
     8.  Hero
     9.  Marquee (moving text strip)
    10.  Cards, features, stats
    11.  Steps (How it works)
    12.  Work gallery
    13.  Pricing
    14.  FAQ
    15.  Forms
    16.  Dialogs (pop-ups)
    17.  Footer
    18.  Page-specific pieces
    19.  Motion and reveal-on-scroll
    20.  Reduced motion and print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   A "token" is just a named value (a CSS variable). Change it here once and
   it changes everywhere on the site.
   ========================================================================== */
:root {
  /* Fonts. Raleway = headings (and the italic accent words), Josefin Sans = body text. */
  --font-head: "Raleway", "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Raleway", system-ui, sans-serif;
  --accent-style: italic;     /* Direction B switches this to normal */
  --accent-weight: 600;

  /* Sizes and spacing */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;
  --radius: 0;                /* square corners = crisp, clean lines */
  --radius-lg: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ----- DEFAULT COLOURS = LIGHT theme: soft pastels -----
     Palette: #F0F0F0 light grey, #FFFFFF white, #272727 charcoal,
              #ECC4E7 lilac, #FFAED7 pink, #F8C35D amber                    */
  color-scheme: light;
  --bg: #f0f0f0;
  --bg-alt: #f8eef8;            /* very light lilac, for alternating sections */
  --bg-glass: rgba(240, 240, 240, .92);
  --surface: #ffffff;
  --text: #272727;
  --text-muted: #55505a;
  --line: #d9d4db;              /* hairline borders */
  --line-strong: #8a8490;
  --accent: #272727;            /* main buttons: charcoal with white text */
  --accent-ink: #ffffff;        /* text that sits ON the accent colour */
  --accent-text: #a31f4e;       /* deeper shade of the logo pink, so small text stays readable on the pastel cards */
  --accent-2: #ffaed7;
  --pop: #f43c77;               /* the logo pink: italic accent words, section labels, step numbers */
  --lilac: #ecc4e7;             /* soft pastel fills for cards */
  --pink: #ffc3e2;
  --butter: #fbe0a0;
  --amber: #f8c35d;
  --glow: rgba(244, 60, 119, .25);
  --glow-soft: rgba(244, 60, 119, .06);
  --danger: #b42318;
  --success: #067647;
  --focus: #a31f4e;
  --shadow: none;
}

/* DARK theme (the toggle sets data-theme="dark"): charcoal with the same pink and lilac */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1c1e;
  --bg-alt: #232326;
  --bg-glass: rgba(28, 28, 30, .9);
  --surface: #272727;
  --text: #f6f3f7;
  --text-muted: #cbc5cf;
  --line: #3b3b40;
  --line-strong: #7f7a85;
  --accent: #ffaed7;
  --accent-ink: #272727;
  --accent-text: #ffaed7;
  --accent-2: #ecc4e7;
  --pop: #ffaed7;
  --lilac: #3a2f3d;
  --pink: #43303c;
  --butter: #403a2c;
  --amber: #f8c35d;
  --glow: rgba(255, 174, 215, .35);
  --glow-soft: rgba(255, 174, 215, .08);
  --danger: #ff8a80;
  --success: #6ee7a8;
  --focus: #ffaed7;
  --shadow: none;
}


/* ==========================================================================
   2. OPTIONAL VISUAL DIRECTIONS
   Preview them by adding ?direction=ivory or ?direction=neon to any page
   address, e.g. index.html?direction=neon   (back to normal: ?direction=pastel)
   ========================================================================== */

/* ---- Direction B: "Ivory Editorial" (serif headlines, vermilion red) ---- */
:root[data-direction="ivory"] {
  --font-head: "Playfair Display", Georgia, serif;
  --accent-style: normal;
  --pop: var(--accent-text);
  --accent-weight: 700;
}
:root[data-direction="ivory"][data-theme="dark"] {
  --bg: #100f0d; --bg-alt: #171512; --bg-glass: rgba(16, 15, 13, .8); --surface: #1e1b17;
  --text: #f3ecdd; --text-muted: #bdb4a3; --line: rgba(243, 236, 221, .15);
  --line-strong: rgba(243, 236, 221, .34);
  --accent: #ff6a4d; --accent-ink: #1a0b07; --accent-text: #ff8a70; --accent-2: #e9c46a;
  --glow: rgba(255, 106, 77, .45); --glow-soft: rgba(255, 106, 77, .12); --focus: #ff8a70;
}
:root[data-direction="ivory"][data-theme="light"] {
  --bg: #f6f0e4; --bg-alt: #ede5d3; --bg-glass: rgba(246, 240, 228, .85); --surface: #fffdf8;
  --text: #14120f; --text-muted: #57514a; --line: rgba(20, 18, 15, .15);
  --line-strong: rgba(20, 18, 15, .4);
  --accent: #d93a1d; --accent-ink: #ffffff; --accent-text: #b82c17; --accent-2: #1f5b4f;
  --glow: rgba(217, 58, 29, .3); --glow-soft: rgba(217, 58, 29, .1); --focus: #b82c17;
}

/* ---- Direction C: "Neon Noir" (geometric type, electric violet + lime) ---- */
:root[data-direction="neon"] {
  --font-head: "Josefin Sans", "Raleway", system-ui, sans-serif;
  --pop: var(--accent-text);
  --radius: 0;
}
:root[data-direction="neon"][data-theme="dark"] {
  --bg: #07060d; --bg-alt: #0d0b16; --bg-glass: rgba(7, 6, 13, .8); --surface: #14111f;
  --text: #f1f0fa; --text-muted: #b3b0c9; --line: rgba(241, 240, 250, .14);
  --line-strong: rgba(241, 240, 250, .34);
  --accent: #b8ff3d; --accent-ink: #0b1200; --accent-text: #b8ff3d; --accent-2: #8b5cf6;
  --glow: rgba(184, 255, 61, .4); --glow-soft: rgba(139, 92, 246, .16); --focus: #b8ff3d;
}
:root[data-direction="neon"][data-theme="light"] {
  --bg: #f4f3fb; --bg-alt: #e9e7f6; --bg-glass: rgba(244, 243, 251, .85); --surface: #ffffff;
  --text: #14121f; --text-muted: #55526a; --line: rgba(20, 18, 31, .14);
  --line-strong: rgba(20, 18, 31, .4);
  --accent: #6d3bff; --accent-ink: #ffffff; --accent-text: #5a28e8; --accent-2: #0a8f5c;
  --glow: rgba(109, 59, 255, .3); --glow-soft: rgba(109, 59, 255, .1); --focus: #5a28e8;
}


/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.1875rem;       /* Josefin Sans runs small, so the body text is a touch larger */
  line-height: 1.6;
  font-variant-numeric: lining-nums;     /* Raleway defaults to old-style numbers (like "o1"); this keeps digits tidy */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}

img { display: block; max-width: 100%; height: auto; }
/* Make the HTML "hidden" attribute always win, even on elements styled with display:flex */
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Every anchor target leaves room for the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Keyboard focus: a clear ring, only for keyboard users */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hidden visually but still read by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Skip to content" link, shows up when you press Tab */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .8rem 1.2rem; font-weight: 700; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* Little icon helper (icons come from the SVG sprite at the top of each page) */
.icon {
  width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-top: 1.25rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
/* Phones: 1 column. Tablets: 2 columns. Desktop: 3 or 4 columns. */
@media (min-width: 640px)  { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-top: 1.25rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }


/* ==========================================================================
   5. TYPOGRAPHY
   Sizes use clamp(min, fluid, max) so text scales smoothly from phone to desktop.
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; font-variant-numeric: lining-nums; }

.display { font-size: clamp(2.6rem, 1.2rem + 6.4vw, 6.4rem); line-height: 1; letter-spacing: -.035em; }
.h2      { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem); letter-spacing: -.03em; }
h3, .h3  { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.01em; }

.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--text-muted); line-height: 1.6; max-width: 40rem; }
.muted { color: var(--text-muted); }
.small { font-size: .95rem; }

/* Small uppercase label above headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pop);
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; }

/* The luxurious serif accent word inside a headline */
.accent-serif {
  font-family: var(--font-accent);
  font-style: var(--accent-style);
  font-weight: var(--accent-weight);
  color: var(--accent-text);
  letter-spacing: -.01em;
}

p + p { margin-top: 1em; }
.nowrap { white-space: nowrap; }
.prose p { max-width: 42rem; color: var(--text-muted); }
.prose p strong { color: var(--text); }


/* ==========================================================================
   6. BUTTONS AND LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3rem; padding: .95rem 1.6rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; line-height: 1.1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--glow); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-2px); }

.btn--sm { min-height: 2.5rem; padding: .65rem 1.1rem; font-size: .72rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--accent-text); padding-block: .4rem;
  border-bottom: 1.5px solid transparent; transition: border-color .2s;
}
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* Underlined text links inside paragraphs */
.prose a, .faq__body a, .form-hint a, .footer a.inline {
  color: var(--accent-text); text-underline-offset: .2em;
}


/* ==========================================================================
   7. HEADER AND NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60; isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
/* The frosted-glass background lives on a pseudo-element on purpose: putting
   backdrop-filter on the header itself would break the full-screen mobile menu. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background-color .35s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}

/* Logo: a target mark + the wordmark */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: 2rem; height: 2rem; color: var(--accent-text); flex: none; }
.brand__name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .24em; text-transform: uppercase;
}

.header-actions { display: flex; align-items: center; gap: .6rem; }

/* Very small phones (320px wide): tighten the logo so nothing overflows */
@media (max-width: 359px) {
  .brand { gap: .5rem; }
  .brand__name { font-size: .85rem; letter-spacing: .14em; }
  .header-actions { gap: .4rem; }
}

.icon-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: transparent; border: 1.5px solid var(--line); border-radius: 50%;
  color: var(--text); transition: border-color .2s, color .2s, transform .25s var(--ease);
}
.icon-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.icon-btn .icon { width: 1.2rem; height: 1.2rem; }

/* Sun/moon: show the icon of the theme you would switch TO */
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun,
:root:not([data-theme]) .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon,
:root:not([data-theme]) .theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }

.nav-toggle .i-close { display: none; }
.nav-open .nav-toggle .i-menu { display: none; }
.nav-open .nav-toggle .i-close { display: block; }

/* Navigation: mobile first = full-screen panel */
.nav-panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
  display: flex; flex-direction: column; gap: 2rem; justify-content: center;
  padding: 2rem var(--gutter) 4rem;
  background: var(--bg);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
}
.nav-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-open { overflow: hidden; }

.nav { display: flex; flex-direction: column; gap: .25rem; }
.nav__link {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: -.02em; text-decoration: none; padding: .35rem 0;
  border-bottom: 1px solid var(--line); color: var(--text);
  transition: color .2s, padding-left .25s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent-text); padding-left: .6rem; }
.nav-panel .btn { align-self: flex-start; }
.header-cta { display: none; }

/* Desktop: nav sits inline in the top bar */
@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .nav-panel {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: 2.25rem;
    padding: 0; background: none; opacity: 1; visibility: visible; transform: none;
    margin-left: auto; margin-right: 1.25rem;
  }
  .nav { flex-direction: row; gap: 2rem; }
  .nav__link {
    position: relative; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; border: 0; padding: .5rem 0;
  }
  .nav__link:hover, .nav__link[aria-current="page"] { padding-left: 0; color: var(--text); }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-panel .btn { display: none; }        /* CTA button lives in header-actions on desktop */
  .header-cta { display: inline-flex; }
  .site-header__inner { gap: 0; }
}

/* No-JavaScript fallback: show the menu as a normal wrapped row */
.no-js .nav-toggle { display: none; }
.no-js .site-header { position: static; }
.no-js .nav-panel {
  position: static; opacity: 1; visibility: visible; transform: none;
  flex-direction: row; flex-wrap: wrap; padding: 0 0 1rem;
}
.no-js .nav { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.no-js .nav__link { font-size: 1rem; border: 0; }
.no-js .site-header__inner { flex-wrap: wrap; }


/* ==========================================================================
   8. HERO (home page)
   ========================================================================== */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}
/* A soft spotlight that follows the mouse (set by main.js via --mx / --my) */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px circle at var(--mx, 72%) var(--my, 18%), var(--glow-soft), transparent 65%);
}
.hero__grid { position: relative; display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 2rem; } }

.hero__title { margin-bottom: 1.75rem; font-size: clamp(2.4rem, 1rem + 4.1vw, 4.5rem); }
/* Each headline line slides up from behind a mask */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: block; }
.hero__lead { margin-bottom: 2.25rem; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line); font-size: .95rem; color: var(--text-muted);
}
.hero__trust li { display: inline-flex; align-items: center; gap: .55rem; }
.hero__trust .icon { color: var(--accent-text); width: 1.1em; height: 1.1em; }

/* The "stage": three phone-shaped ads floating over glowing rings */
.hero-stage { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1 / 1.08; margin-inline: auto; }
.rings { position: absolute; inset: 2%; width: 96%; height: 96%; color: var(--accent-text); opacity: .4; animation: spin 60s linear infinite; }

.phone {
  position: absolute; width: 43%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--line-strong); background: #000;
  box-shadow: var(--shadow); container-type: inline-size;
  transform: rotate(var(--r, 0deg));
  animation: float 8s ease-in-out infinite;
}
.phone > img { width: 100%; height: 100%; object-fit: cover; }
.phone--1 { --r: -8deg; left: 1%;  top: 17%; animation-delay: -2s; }
.phone--2 { --r: 0deg;  left: 27%; top: 0;   width: 46%; z-index: 2; }
.phone--3 { --r: 7deg;  right: 1%; top: 26%; animation-delay: -4s; }

/* A mock "ad interface" laid over each phone so it reads as a real ad */
.phone__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.55)); }
.phone__bar { height: 3px; background: rgba(255,255,255,.35); border-radius: 3px; overflow: hidden; }
.phone__bar::after { content: ""; display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: progress 6s linear infinite; }
.phone__meta { display: flex; justify-content: space-between; color: #fff; font-size: .55rem; font-size: 5.2cqw; margin-top: 3cqw; font-weight: 500; }
.phone__cta { align-self: flex-start; background: #fff; color: #111; font-family: var(--font-head); font-weight: 800; font-size: .55rem; font-size: 5.4cqw; letter-spacing: .06em; text-transform: uppercase; padding: 2.4cqw 4.6cqw; border-radius: 99px; }

.chip-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem; background: var(--bg-glass); border: 1px solid var(--line-strong);
  border-radius: 99px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  box-shadow: var(--shadow); animation: float 6s ease-in-out infinite;
}
.chip-float .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow-soft); }
.chip-float--a { top: 4%;  right: 0; --r: 0deg; }
.chip-float--b { bottom: 0; left: 0; --r: 0deg; animation-delay: -3s; }

/* Rotating "Made in India" sticker */
.badge-spin { position: absolute; z-index: 3; right: 3%; bottom: 0; width: 7.5rem; height: 7.5rem; color: var(--text); }
.badge-spin svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.badge-spin text { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; fill: currentColor; text-transform: uppercase; }
.badge-spin .core { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-text); }
.badge-spin .core .icon { width: 2.4rem; height: 2.4rem; }
.badge-spin .disc { fill: var(--bg); stroke: var(--line-strong); }

@media (max-width: 520px) {
  .chip-float { font-size: .68rem; padding: .4rem .7rem; }
  .chip-float--a { top: -3%; right: 2%; }
  .badge-spin { width: 5.5rem; height: 5.5rem; }
}

/* Smaller hero for inner pages (About, Services, Pricing...) */
.page-hero { position: relative; overflow: clip; padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px circle at 85% 0%, var(--glow-soft), transparent 65%); }
.page-hero .container { position: relative; }
.page-hero .display { font-size: clamp(2.4rem, 1rem + 5.6vw, 5.4rem); max-width: 16ch; }
.page-hero .lead { margin-top: 1.75rem; }
.page-hero__rings { position: absolute; right: -6rem; top: 50%; width: min(46rem, 80vw); transform: translateY(-50%); color: var(--accent-text); opacity: .16; animation: spin 90s linear infinite; pointer-events: none; }


/* ==========================================================================
   9. MARQUEE (moving text strip)
   The list is written twice in the HTML so it can loop seamlessly.
   ========================================================================== */
.marquee { overflow: hidden; background: var(--bg-alt); border-block: 1px solid var(--line); padding-block: 1.15rem; }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, .9rem + .6vw, 1.4rem);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.marquee__item::after { content: "✦"; color: var(--accent-text); font-size: .8em; }


/* ==========================================================================
   10. CARDS, FEATURES, STATS
   ========================================================================== */
.card {
  position: relative; display: flex; flex-direction: column; gap: 1rem; height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.card:hover { transform: translateY(-6px); border-color: var(--accent-text); box-shadow: var(--shadow); }
.card p { color: var(--text-muted); }

.card__num { font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .2em; color: var(--accent-text); }
.card__icon { width: 3.25rem; height: 3.25rem; padding: .8rem; border: 1px solid var(--line-strong); color: var(--accent-text); border-radius: var(--radius); transition: background .3s, color .3s; }
.card:hover .card__icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.card .link-arrow { margin-top: auto; align-self: flex-start; }

/* Feature list (Why founders pick us) */
.feature { display: flex; gap: 1.25rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.feature__icon { width: 2.75rem; height: 2.75rem; padding: .65rem; flex: none; background: var(--glow-soft); color: var(--accent-text); border-radius: var(--radius); }
.feature h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.feature p { color: var(--text-muted); font-size: 1rem; }

/* Big numbers */
.stats { display: grid; gap: 2rem 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding-top: 1.25rem; border-top: 2px solid var(--accent); }
.stat__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.75rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.stat__label { display: block; margin-top: .6rem; color: var(--text-muted); font-size: .98rem; max-width: 16rem; }

/* Call-to-action band */
.cta-band { position: relative; overflow: clip; padding-block: clamp(4rem, 8vw, 7rem); text-align: center; border-top: 1px solid var(--line);
  background: radial-gradient(800px circle at 50% 120%, var(--glow-soft), transparent 70%), var(--bg-alt); }
.cta-band .h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { margin: 1.25rem auto 2.25rem; }
.cta-band .cluster { justify-content: center; }


/* ==========================================================================
   11. STEPS (How it works)
   ========================================================================== */
.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.step { counter-increment: step; padding-block: 1.75rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .step { border-top: 2px solid var(--line); padding-top: 1.75rem; transition: border-color .3s; } .step:hover { border-color: var(--accent); } }
/* Big outlined numbers, filled on hover */
.step::before {
  content: "0" counter(step); display: block; margin-bottom: 1rem;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--pop); transition: color .3s;
}
.step:hover::before { color: var(--pop); }
.step h3 { margin-bottom: .6rem; }
.step p { color: var(--text-muted); font-size: 1rem; }


/* ==========================================================================
   12. WORK GALLERY
   ========================================================================== */
/* 1 column on tiny screens, 2 on phones and tablets, 3 on desktop */
.work-grid { display: grid; gap: clamp(.9rem, 2.4vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 340px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
/* On big screens, every middle card sits lower for an editorial, staggered look */
@media (min-width: 900px) { .work-grid--stagger > :nth-child(3n + 2) { margin-top: 2.5rem; } }

.work { position: relative; display: block; width: 100%; padding: 0; text-align: left; background: none; border: 0; text-decoration: none; color: inherit; }
.work__media { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work:hover .work__media img, .work:focus-visible .work__media img { transform: scale(1.07); }
.work__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); opacity: 0; transition: opacity .4s; }
.work:hover .work__media::after, .work:focus-visible .work__media::after { opacity: 1; }

.work__tag { position: absolute; z-index: 2; left: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
  background: rgba(10,9,14,.72); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 99px; }
.work__tag .icon { width: .85rem; height: .85rem; }
/* Video tiles show a thin "playing" bar on hover */
.work[data-type="video"] .work__media::before { content: ""; position: absolute; z-index: 2; left: .8rem; right: .8rem; bottom: .8rem; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.work[data-type="video"]:hover .work__media::before, .work[data-type="video"]:focus-visible .work__media::before { animation: progress 5s linear infinite; }

.work__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem 1rem; padding-top: .9rem; }
.work__title { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.work__cat { color: var(--text-muted); font-size: .9rem; }

/* Filter buttons on the Portfolio page */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.filter-btn { padding: .65rem 1.2rem; min-height: 2.75rem; background: transparent; border: 1.5px solid var(--line-strong); border-radius: 99px;
  font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  transition: background-color .2s, color .2s, border-color .2s; }
.filter-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.filter-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.work-count { margin-bottom: 1.25rem; color: var(--text-muted); font-size: .95rem; }
.work[hidden] { display: none; }

.footnote { margin-top: 2.5rem; color: var(--text-muted); font-size: .9rem; max-width: 42rem; }


/* ==========================================================================
   13. PRICING
   ========================================================================== */
.pricing-grid { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.plan { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.plan--featured { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--glow-soft), transparent 40%), var(--surface); }
/* Featured card grows 1rem taller on each side, but its content stays lined up with the others */
@media (min-width: 900px) { .plan--featured { padding-block: calc(clamp(1.75rem, 3vw, 2.5rem) + 1rem); margin-block: -1rem; } }
.plan__badge { position: absolute; top: 0; right: 1.5rem; transform: translateY(-50%); padding: .4rem .9rem; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-head); font-weight: 800; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 99px; }
.plan__name { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.01em; }
.plan__tagline { color: var(--text-muted); font-size: 1rem; margin-top: .35rem; min-height: 3.2em; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.plan__amount { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: lining-nums; }
.plan__period { color: var(--text-muted); font-size: .95rem; }
.plan__gst { flex-basis: 100%; color: var(--text-muted); font-size: .8rem; }
.plan__list { display: grid; gap: .8rem; flex: 1; }
.plan__list li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; }
.plan__list .icon { color: var(--accent-text); margin-top: .2em; width: 1.1em; height: 1.1em; }
.plan__note { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: -.5rem; }

/* Small tier cards on the home page */
.mini-plan { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: transform .35s var(--ease), border-color .3s; }
.mini-plan:hover { transform: translateY(-5px); border-color: var(--accent-text); }
.mini-plan--featured { border-color: var(--accent); }
.mini-plan p { color: var(--text-muted); font-size: .98rem; }
.mini-plan .mini-plan__price { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; line-height: 1.1; letter-spacing: -.03em; color: var(--text); }
.mini-plan .mini-plan__price small { font-size: .9rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.mini-plan .link-arrow { margin-top: auto; }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; text-align: left; }
.compare caption { text-align: left; padding: 1.25rem 1.25rem .25rem; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.compare th, .compare td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.compare tbody th { font-weight: 500; color: var(--text-muted); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare td { font-weight: 500; }

.custom-callout { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
@media (min-width: 800px) { .custom-callout { grid-template-columns: 1fr auto; } }


/* ==========================================================================
   14. FAQ  (uses the built-in <details> element: keyboard-friendly, no JS)
   ========================================================================== */
.faq__list { border-top: 1px solid var(--line); max-width: 52rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary .icon { transition: transform .3s var(--ease); color: var(--accent-text); }
.faq[open] summary .icon { transform: rotate(45deg); }
.faq__body { padding: 0 3rem 1.6rem 0; color: var(--text-muted); max-width: 44rem; }
.faq-layout { display: grid; gap: 2.5rem; }
@media (min-width: 980px) { .faq-layout { grid-template-columns: .8fr 1.2fr; gap: 4rem; } .faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; margin-bottom: 0; } }


/* ==========================================================================
   15. FORMS
   ========================================================================== */
.form { display: grid; gap: 1.4rem; }
.form-row { display: grid; gap: 1.4rem; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .5rem; align-content: start; }
.field__label { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.field__label .req { color: var(--accent-text); margin-left: .15em; }
.field__label .opt { color: var(--text-muted); font-weight: 500; letter-spacing: .06em; text-transform: none; font-family: var(--font-body); }
.field__hint { color: var(--text-muted); font-size: .85rem; }

.input { width: 100%; min-height: 3.1rem; padding: .8rem 1rem; background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s, background-color .35s; }
textarea.input { min-height: 9rem; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover { border-color: var(--text-muted); }
.input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--glow-soft); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Error state: red border + message + icon (never colour alone) */
.field.has-error .input { border-color: var(--danger); }
.field__error { display: none; align-items: flex-start; gap: .5rem; color: var(--danger); font-size: .9rem; font-weight: 500; }
.field.has-error .field__error { display: flex; }
.field__error .icon { width: 1.1em; height: 1.1em; margin-top: .15em; }
.field__count { justify-self: end; color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.checkbox { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; }
.checkbox input { width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
.field.has-error .checkbox input { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Honeypot: hidden trap for spam bots. Real people never see or fill this. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-summary { padding: 1.25rem 1.5rem; border: 1.5px solid var(--danger); border-radius: var(--radius); background: var(--surface); }
.form-summary[hidden] { display: none; }
.form-summary h2 { font-size: 1.05rem; color: var(--danger); margin-bottom: .6rem; letter-spacing: 0; }
.form-summary ul { display: grid; gap: .35rem; list-style: disc; padding-left: 1.2rem; }
.form-summary a { color: var(--text); text-underline-offset: .2em; }

.form-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .9rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--glow-soft); font-size: .95rem; }
.form-note[hidden] { display: none; }
.text-btn { background: none; border: 0; padding: .25rem 0; color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }

.form-success { padding: clamp(1.75rem, 4vw, 3rem); border: 1.5px solid var(--success); border-radius: var(--radius); background: var(--surface); }
.form-success[hidden] { display: none; }
.form-success__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--success); color: var(--bg); }
.form-success__icon .icon { width: 1.8rem; height: 1.8rem; }
.form-success h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .75rem; }
.form-success p { color: var(--text-muted); max-width: 34rem; }

/* Contact page layout */
.contact-layout { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 980px) { .contact-layout { grid-template-columns: .85fr 1.15fr; } }
.contact-side { display: grid; gap: 1.5rem; }
.contact-card { padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.contact-card h2, .contact-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.contact-card p { color: var(--text-muted); }
.contact-list { display: grid; gap: 1rem; margin-top: 1rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list .icon { color: var(--accent-text); margin-top: .2em; }
.contact-list a { text-underline-offset: .2em; }
.contact-form-wrap { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calendar-embed { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.calendar-embed iframe { display: block; width: 100%; height: 42rem; border: 0; }
.calendar-embed[hidden] { display: none; }

.enquiries { margin-top: 1rem; display: grid; gap: .75rem; }
.enquiries li { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; }
.enquiries strong { display: block; font-family: var(--font-head); }
.enquiries time { color: var(--text-muted); font-size: .8rem; }


/* ==========================================================================
   16. DIALOGS (pop-ups): work lightbox + buy dialog
   The native <dialog> element already traps focus and closes with Esc.
   ========================================================================== */
.modal { width: min(94vw, 58rem); max-height: 92vh; padding: 0; overflow: auto; background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 40px 100px -20px rgba(0,0,0,.7); }
.modal--narrow { width: min(94vw, 34rem); }
.modal::backdrop { background: rgba(5, 4, 8, .78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal[open] { animation: pop .35s var(--ease); }
.modal__close { position: absolute; z-index: 3; top: .9rem; right: .9rem; }
.modal__body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.modal__grid { display: grid; }
@media (min-width: 760px) { .modal__grid { grid-template-columns: .9fr 1.1fr; } }
.modal__media { background: #000; }
.modal__media img { width: 100%; height: 100%; max-height: 80vh; object-fit: cover; }
.modal h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: .5rem; }
.modal dl { display: grid; gap: 1.1rem; margin: 1.5rem 0; }
.modal dt { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .2rem; }
.modal dd { margin: 0; color: var(--text-muted); }
.modal__nav { display: flex; gap: .6rem; margin-top: 1.5rem; align-items: center; flex-wrap: wrap; }
.buy-summary { display: grid; gap: .5rem; margin: 1.25rem 0; padding: 1.1rem 0; border-block: 1px solid var(--line); }
.buy-summary li { display: flex; gap: .65rem; align-items: flex-start; font-size: .98rem; }
.buy-summary .icon { color: var(--accent-text); margin-top: .25em; width: 1.05em; height: 1.05em; }
.buy-price { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; letter-spacing: -.03em; }
.buy-note { padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-left: 3px solid var(--accent); background: var(--glow-soft); font-size: .95rem; }
.buy-note[hidden] { display: none; }
.modal .cluster { margin-top: 1.25rem; }
html.modal-open { overflow: hidden; }

/* Video showreel (click-to-load, so YouTube isn't loaded until you ask) */
.video-facade { position: relative; display: grid; place-items: center; width: 100%; max-width: 24rem; margin-inline: auto; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: linear-gradient(135deg, #2a0f3d, #0b1437 55%, #7a2d0c); }
.video-facade__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-facade__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.6rem 1rem 1rem; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 99px; font-family: var(--font-head); font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .3s var(--ease), box-shadow .3s; box-shadow: 0 0 0 0 var(--glow); animation: pulse 2.4s infinite; }
.video-facade__btn:hover { transform: scale(1.05); }
.video-facade__btn .disc { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-ink); color: var(--accent); }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade__msg { position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: 1rem; padding: .9rem 1.1rem; background: var(--bg-glass); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .95rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-facade__msg[hidden] { display: none; }


/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer { position: relative; overflow: clip; border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); background: var(--bg); }
.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 720px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 980px)  { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__about { max-width: 22rem; }
.footer__about p { color: var(--text-muted); margin-block: 1.1rem 1.4rem; font-size: 1rem; }
.footer__title { font-family: var(--font-head); font-weight: 800; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pop); margin-bottom: 1.1rem; }
.footer__links { display: grid; gap: .55rem; }
.footer__links a { text-decoration: none; color: var(--text-muted); transition: color .2s; }
.footer__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }

.social { display: flex; flex-wrap: wrap; gap: .6rem; }
.social a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--text);
  transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.social a:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-3px); }
.social .icon { width: 1.15rem; height: 1.15rem; }

.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .9rem; position: relative; z-index: 1; }
/* Giant outlined wordmark, purely decorative */
.footer__mega { display: block; user-select: none; pointer-events: none; text-align: center; margin-top: 1rem; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 13.2vw, 13.5rem); line-height: .82; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }


/* ==========================================================================
   18. PAGE-SPECIFIC PIECES
   ========================================================================== */

/* --- About --- */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; } .split--top { align-items: start; grid-template-columns: .8fr 1.2fr; } }
.values { display: grid; gap: 0; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
.value { padding-block: 2rem; border-top: 1px solid var(--line); }
.value h3 { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.value h3 .icon { color: var(--accent-text); }
.value p { color: var(--text-muted); }

.founder { display: grid; gap: 2rem; align-items: center; padding: clamp(1.75rem, 4vw, 3.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 760px) { .founder { grid-template-columns: 15rem 1fr; } }
.founder__portrait { position: relative; aspect-ratio: 1; max-width: 15rem; width: 100%; overflow: hidden; border-radius: 50%; border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 30% 25%, var(--accent), var(--accent-2) 75%); }
.founder__portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.founder blockquote { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -.01em; }
.founder blockquote p + p { margin-top: 1em; font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: var(--text-muted); letter-spacing: 0; }
.founder__sig { margin-top: 1.5rem; font-family: var(--font-accent); font-style: italic; font-size: 1.3rem; color: var(--accent-text); }

/* --- 404 page --- */
.not-found { min-height: 62vh; display: grid; align-content: center; padding-block: 4rem; text-align: center; }
.not-found__code { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 3rem + 22vw, 16rem); line-height: .9; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent-text); }
.not-found .cluster { justify-content: center; margin-top: 2rem; }
.not-found .lead { margin: 1.25rem auto 0; }

/* --- Services --- */
.service-detail { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.service-detail:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .service-detail { grid-template-columns: 1fr 1fr; } .service-detail:nth-of-type(even) > .service-detail__media { order: -1; } }
.service-detail__media { position: relative; }
.service-detail__media img.is-reel { aspect-ratio: 9 / 16; max-height: 38rem; width: auto; max-width: 100%; margin-inline: auto; }
.service-detail__media img { width: 100%; max-height: 34rem; object-fit: cover; aspect-ratio: 4 / 4.4; border-radius: var(--radius); border: 1px solid var(--line); }
.service-detail h2 { margin-bottom: 1rem; }
.checklist { display: grid; gap: .7rem; margin-block: 1.5rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist .icon { color: var(--accent-text); margin-top: .25em; width: 1.05em; height: 1.05em; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.facts dd { margin: .2rem 0 0; color: var(--text-muted); font-size: .95rem; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: 99px; font-size: .95rem; background: var(--surface); }

/* A drawn "copy" card: shows why words matter (Services page) */
.copy-card { display: grid; gap: .9rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.copy-card__label { font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.copy-line { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.copy-line .icon { margin-top: .2em; }
.copy-line--bad { color: var(--text-muted); }
.copy-line--bad q { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.copy-line--bad .icon { color: var(--danger); }
.copy-line--good { border-color: var(--accent); background: var(--glow-soft); font-weight: 500; }
.copy-line--good .icon { color: var(--success); }
.copy-line q { quotes: "“" "”"; }


/* ==========================================================================
   19. MOTION AND REVEAL-ON-SCROLL
   Elements with class "reveal" fade up when they scroll into view.
   The .js class (added in <head>) makes sure nothing is hidden if JS fails.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Headline lines rise when the page loads */
.js .line > span { transform: translateY(110%); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms + 100ms); }

@keyframes rise     { to { transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes marquee  { to { transform: translateX(-50%); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes float    { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-14px); } }
@keyframes pop      { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse    { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Footer toggle to pause all animation */
.motion-toggle { background: none; border: 0; padding: .25rem 0; color: var(--text-muted); text-decoration: underline; text-underline-offset: .2em; font-size: .9rem; }
.motion-toggle:hover { color: var(--text); }


/* ==========================================================================
   20. REDUCED MOTION AND PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .line > span { opacity: 1; transform: none; }
}
/* Same effect when the visitor presses "Pause animations" in the footer */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="off"] .reveal, :root[data-motion="off"] .line > span { opacity: 1; transform: none; }

@media print {
  .site-header, .marquee, .hero-stage, .footer__mega, .cta-band, .nav-toggle, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   21. CRISP BLACK-AND-WHITE STYLE
   This section sits last so it can simplify the look: flat surfaces, hairline
   borders, square cards, outlined pill buttons, and only ONE touch of colour
   (violet, via --pop). To bring back glows or rounded cards, delete this section.
   ========================================================================== */

/* The single colour accent */
.accent-serif, .brand__mark { color: var(--pop); }

/* Buttons: pill shape. Solid ones invert to an outline on hover; outlined ones fill. */
.btn { border-radius: 999px; }
.btn--primary { border-color: var(--accent); }
.btn--primary:hover { transform: none; box-shadow: none; background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.btn--ghost { border-color: var(--accent); }
.btn--ghost:hover { transform: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Header: a hairline under it at all times, grey menu links that turn solid */
.site-header { border-bottom-color: var(--line); }
@media (min-width: 980px) {
  .nav__link { color: var(--text-muted); }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); }
  .nav__link::after { height: 2px; background: var(--accent); }
}

/* Flat: no spotlight glows, no gradient panels, no shadows */
.hero::before, .page-hero::before { display: none; }
.cta-band { background: var(--bg-alt); }
.marquee { background: var(--bg); }
.plan--featured { background: var(--surface); }
.rings { opacity: .3; }
.page-hero__rings { opacity: .14; }
.phone, .chip-float, .video-facade__btn { box-shadow: none; }
.video-facade__btn { animation: none; }
.video-facade { background: #0a0a0a; }
.founder__portrait { background: var(--surface); border-color: var(--accent); }

/* Cards: hairline border that turns solid on hover, no lift */
.card:hover, .plan:hover, .mini-plan:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.card:hover .card__icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Thin, precise details */
.eyebrow::before { height: 1px; }
.stat { border-top: 2px solid var(--accent); }
.faq summary:hover { color: var(--text-muted); }
.feature__icon { background: transparent; border: 1px solid var(--line-strong); color: var(--accent-text); }
.copy-line--good { background: transparent; border-color: var(--accent); }
.buy-note { background: transparent; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); }
.form-note { background: transparent; }

/* ==========================================================================
   22. CASE STUDY (QueenCore concept work on the Portfolio page)
   ========================================================================== */
.case { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 980px) { .case { grid-template-columns: .85fr 1.15fr; } }
.case__logo { display: grid; place-items: center; margin: 0 0 1.5rem; padding: clamp(1.25rem, 4vw, 2rem); background: #fff; border: 1px solid var(--line); }
.case__logo img { width: min(100%, 340px); }
.badge { display: inline-block; margin-bottom: 1rem; padding: .35rem .8rem; border: 1px solid var(--accent-text); color: var(--accent-text); border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.case .facts { margin: 1.5rem 0 1rem; }
.case__intro .lead { margin-top: 1.25rem; }
.case__videos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.vid-card { margin: 0; }
.vid-card video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #000; border: 1px solid var(--line); }
.vid-card figcaption { display: grid; gap: .15rem; padding-top: .8rem; }
.vid-card figcaption strong { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.vid-card figcaption span { color: var(--text-muted); font-size: .9rem; }

/* ==========================================================================
   23. HERO REELS: the three QueenCore ads look like reels (the pause icon is part of the pictures)
   ========================================================================== */
.phone__ui { background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%); }
.phone__bar::after { animation: none; transform: scaleX(var(--p, .4)); }     /* progress bar frozen part-way */

/* ==========================================================================
   24. CARDS: tall rounded "focus" cards
   Used by the service cards on Home and the Responsible-AI cards on About.
   Layout: pill tag + round icon on top, big title at the bottom.
   Hover: the card lifts and grows, a light sweeps across it, and its
   neighbours dim. (Delete this whole section to go back to the flat cards.)
   ========================================================================== */
.card {
  --card-glow: rgba(255, 255, 255, .55);      /* soft white highlight in the corner */
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "num icon" "gap gap" "title title" "desc desc" "link link";
  grid-template-rows: auto 1fr auto auto auto;
  gap: 0; row-gap: .75rem; height: 100%; min-height: 20rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(120% 80% at 100% 0%, var(--card-glow), transparent 60%), var(--card-bg, var(--lilac));
  transition: translate .45s var(--ease), scale .45s var(--ease), filter .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
:root[data-theme="dark"] .card { --card-glow: rgba(255, 174, 215, .16); }
.grid--3 .card { min-height: 26rem; }

/* Keep the card's content above the light sweep */
.card > * { position: relative; z-index: 1; }

/* Pill tag (top left) */
.card__num {
  grid-area: num; justify-self: start; align-self: start;
  padding: .35rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .68rem; letter-spacing: .16em; color: var(--text); background: rgba(255, 255, 255, .6);
  transition: background-color .3s, color .3s, border-color .3s;
}
/* Round icon button (top right) */
.card__icon {
  grid-area: icon; justify-self: end; align-self: start;
  width: 2.9rem; height: 2.9rem; padding: .75rem; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--accent-text);
  transition: background-color .3s, color .3s, border-color .3s, rotate .45s var(--ease);
}
/* Big title at the bottom, small text under it */
.card h3 { grid-area: title; align-self: end; margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.05; letter-spacing: -.02em; }
.card p { grid-area: desc; font-size: .95rem; }
.card .link-arrow { grid-area: link; justify-self: start; align-self: end; margin-top: .5rem; }

/* A soft band of light that sweeps across on hover */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .10) 50%, transparent 65%);
  translate: -120% 0; transition: translate .9s var(--ease);
}

/* The entrance fade (class "reveal") only uses opacity + transform, so the hover below
   uses the separate translate/scale properties and never fights with it. */
.js .card.reveal {
  transition: opacity .9s var(--ease), transform .9s var(--ease), translate .45s var(--ease), scale .45s var(--ease), filter .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s, 0s, 0s, 0s;
}

@media (hover: hover) {
  .card:hover {
    translate: 0 -10px; scale: 1.04; z-index: 3; border-color: var(--accent);
    box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .75);
  }
  :root[data-theme="light"] .card:hover { box-shadow: 0 34px 60px -26px rgba(11, 12, 16, .35); }
  .card:hover::after { translate: 120% 0; }
  .card:hover .card__num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .card:hover .card__icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); rotate: 12deg; }
  /* Neighbours step back so the hovered card is the focus */
  .grid:has(> .card:hover) > .card:not(:hover) { filter: brightness(.6) saturate(.8); scale: .98; }
  :root[data-theme="light"] .grid:has(> .card:hover) > .card:not(:hover) { filter: brightness(.94) saturate(.5); }
}

@media (max-width: 639px) { .grid--3 .card { min-height: 21rem; } }

/* ==========================================================================
   25. SOFT PASTEL TOUCHES (colours borrowed from the reference palette)
   ========================================================================== */
/* Cards take turns being lilac, pink and butter-yellow */
.card:nth-child(3n + 1) { --card-bg: var(--lilac); }
.card:nth-child(3n + 2) { --card-bg: var(--pink); }
.card:nth-child(3n)     { --card-bg: var(--butter); }
:root[data-theme="dark"] .card__num { background: rgba(255, 255, 255, .06); }

.plan--featured { background: var(--lilac); }
.plan__badge { background: var(--amber); color: #272727; }
.founder__portrait { background: var(--lilac); }
.founder__portrait svg * { fill: var(--text); opacity: .85; }

/* ==========================================================================
   26. PORTFOLIO PAGE: QueenCore intro + mixed grid of videos and image ads
   ========================================================================== */
.qc-intro { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .qc-intro { grid-template-columns: .55fr 1.45fr; } }
.qc-intro .case__logo { margin: 0; }
.qc-intro .lead { margin-top: 1.25rem; }
.qc-intro .eyebrow { display: flex; }
.qc-grid { align-items: start; }
.qc-grid .work__media { aspect-ratio: 9 / 16; }

/* ==========================================================================
   27. PRICING CARDS: colour on hover + highlighted "MOST POPULAR" tag
   ========================================================================== */
/* Highlight colour for tags. Dark mode: the pink accent. Light mode: a slightly deeper #E5487A so white text stays readable. */
:root { --tag-bg: var(--accent); --tag-ink: var(--accent-ink); }
:root[data-theme="light"] { --tag-bg: #c93a69; --tag-ink: #ffffff; }

.tag, .plan__badge {
  background: var(--tag-bg); color: var(--tag-ink);
  font-family: var(--font-head); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.tag { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .3rem .7rem; border-radius: 999px; font-size: .62rem; line-height: 1; }

/* Cards fill with a pastel colour when the cursor is over them (or when tabbed to with the keyboard) */
.mini-plan, .plan { transition: background-color .35s var(--ease), border-color .3s, transform .35s var(--ease); }
.mini-plan:nth-child(3n + 1), .plan:nth-child(3n + 1) { --hover-bg: var(--lilac); }
.mini-plan:nth-child(3n + 2), .plan:nth-child(3n + 2) { --hover-bg: var(--pink); }
.mini-plan:nth-child(3n),     .plan:nth-child(3n)     { --hover-bg: var(--butter); }
.mini-plan:hover, .mini-plan:focus-visible, .plan:hover, .plan:focus-within { background: var(--hover-bg); border-color: var(--text); }
.mini-plan:hover .link-arrow, .mini-plan:focus-visible .link-arrow { color: var(--accent-text); }
/* On the pastel fill, the outlined Buy buttons turn solid so they stay easy to see */
.plan:hover .btn--ghost, .plan:focus-within .btn--ghost { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* The featured plan stays lilac and moves to pink on hover so the change is visible */
.plan--featured:hover, .plan--featured:focus-within { --hover-bg: var(--pink); }

/* ==========================================================================
   28. PLACEHOLDER PROJECT CARDS (Home page, "Selected work")
   ========================================================================== */
.work--placeholder { cursor: default; }
.work--placeholder .work__media {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--lilac) 0 14px, var(--bg-alt) 14px 28px);
  border: 1.5px dashed var(--line-strong);
}
.placeholder__label {
  padding: .5rem 1.1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong);
  font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.work--placeholder .work__title, .work--placeholder .work__cat { color: var(--text-muted); }

/* ==========================================================================
   29. INNER-PAGE HERO: a card on the right of the text (Services, Portfolio,
   Pricing, About, Contact). On phones the card drops below the text.
   ========================================================================== */
.page-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) { .page-hero__grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.page-hero__copy .display { max-width: 15ch; }
.hero-aside { position: relative; width: 100%; max-width: 26rem; justify-self: center; }
@media (min-width: 980px) { .hero-aside { justify-self: end; } }

/* One gently floating chip on each card */
.hero-chip, .hero-aside .chip-float { position: absolute; z-index: 3; right: -.5rem; top: -1rem; padding: .5rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--font-head); font-weight: 700; font-size: .75rem; letter-spacing: .04em;
  animation: float 6s ease-in-out infinite; }

/* Shared card look */
.hero-card { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--lilac); display: grid; gap: .9rem; }
.hero-card p + p { margin-top: 0; }
.price-card__label { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.price-card__amount { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); letter-spacing: -.04em; line-height: 1; }
.price-card__amount small { font-size: 1rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.price-card__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.price-card .chip, .person-card .chip { background: var(--surface); font-size: .9rem; }
.price-card .tag { margin-left: .4rem; }

/* About: portrait card */
.person-card { background: var(--pink); text-align: center; justify-items: center; }
.person-card__photo { width: 9rem; height: 9rem; border-radius: 50%; overflow: hidden; background: var(--surface); border: 2px solid var(--surface); }
.person-card__photo svg { width: 100%; height: 100%; fill: var(--text); opacity: .8; }
.person-card__name { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.1; }
.person-card .price-card__chips { justify-content: center; }

/* Contact: "how we reply" card */
.reply-card { background: var(--butter); }
.reply-card__list { display: grid; gap: .7rem; }
.reply-card__list li { display: flex; gap: .7rem; align-items: center; font-weight: 500; }
.reply-card__list .icon { color: var(--accent-text); }
.reply-card__bubble { padding: .8rem 1rem; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); font-style: italic; }

/* Services: three stacked pill cards */
.svc-stack { display: grid; gap: .9rem; }
.svc-pill { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text);
  transition: translate .35s var(--ease), border-color .3s; }
.svc-pill > .icon:first-child { width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 50%; background: var(--surface); color: var(--accent-text); flex: none; }
.svc-pill span { display: grid; flex: 1; line-height: 1.25; }
.svc-pill strong { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; }
.svc-pill small { color: var(--text-muted); font-size: .9rem; }
.svc-pill:hover { translate: -6px 0; border-color: var(--text); }
.svc-pill--lilac { background: var(--lilac); } .svc-pill--pink { background: var(--pink); } .svc-pill--butter { background: var(--butter); }
.svc-pill:nth-child(2), .svc-stack li:nth-child(2) { margin-left: 1.25rem; }

/* Portfolio: fanned stack of three ads */
.hero-fan { aspect-ratio: 1 / 1; }
.fan__card { position: absolute; width: 46%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 3px solid var(--surface); background: #000;
  animation: float 8s ease-in-out infinite; transform: rotate(var(--r, 0deg)); }
.fan__card img { width: 100%; height: 100%; object-fit: cover; }
.fan__card--1 { --r: -9deg; left: 0; top: 14%; animation-delay: -2s; }
.fan__card--2 { --r: 0deg; left: 27%; top: 0; z-index: 2; }
.fan__card--3 { --r: 8deg; right: 0; top: 18%; animation-delay: -4s; }
.fan__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; border: 1.5px solid #fff; }
.hero-fan .hero-chip { top: auto; bottom: 0; right: auto; left: 0; }

/* ==========================================================================
   30. FOUNDER PHOTO (About page)
   ========================================================================== */
.person-card__photo img, .founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ==========================================================================
   31. CONTACT HERO CARD: pink, with a working quick-brief box
   ========================================================================== */
.reply-card { background: var(--pink); }
.quick-brief { display: grid; gap: .75rem; }
.quick-brief .input { background: var(--surface); font-style: italic; }
.quick-brief .input:focus { font-style: normal; }

/* ==========================================================================
   32. LOGO IMAGE (the ribbon T mark, assets/logo-mark.png)
   ========================================================================== */
.brand__mark { width: 2.5rem; height: auto; flex: none; }
.badge-spin .core img { width: 2.6rem; height: auto; }
@media (max-width: 359px) { .brand__mark { width: 2.1rem; } }

/* ==========================================================================
   33. PRICING HERO: a staircase of the three packs (Spark, Surge, Empire)
   ========================================================================== */
.pack-stack { aspect-ratio: 1 / .92; }
.pack-card {
  position: absolute; width: 74%; padding: 1.1rem 1.3rem; display: grid; gap: .5rem;
  border: 1px solid var(--line); border-radius: 18px;
  transform: rotate(var(--r, 0deg)); animation: float 8s ease-in-out infinite;
}
.pack-card--1 { --r: -3deg; left: 0;   top: 0;   background: var(--lilac); }
.pack-card--2 { --r: 0deg;  left: 13%; top: 33%; background: var(--pink); z-index: 2; animation-delay: -2s; }
.pack-card--3 { --r: 3deg;  left: 26%; top: 66%; background: var(--butter); animation-delay: -4s; }
.pack-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pack-card__top strong { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.pack-card__top span { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.pack-card__counts { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .95rem; }
.pack-card__counts span { display: inline-flex; align-items: center; gap: .4rem; }
.pack-card__counts .icon { width: 1.05em; height: 1.05em; color: var(--accent-text); }
.pack-card .tag { position: absolute; top: -.7rem; right: 1rem; margin: 0; }
.pack-stack .hero-chip { top: auto; bottom: 0; right: 0; }

/* ==========================================================================
   34. LEGAL PAGES (Privacy, Terms) and the footer links to them
   ========================================================================== */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 2.5rem 0 .75rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-muted); }
.legal p + p { margin-top: 1rem; }
.legal ul { display: grid; gap: .6rem; list-style: disc; padding-left: 1.3rem; margin-block: .5rem; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent-text); text-underline-offset: .2em; }
.legal-links { display: flex; gap: 1.25rem; }
.legal-links a { color: var(--text-muted); text-underline-offset: .2em; }
.legal-links a:hover { color: var(--text); }