/* ==========================================================================
   WATERMELON MATRIX
   Single-page corporate site — neon watermelon palette, minimal layout.

   Contents
   --------
   01. Design tokens (dark + light themes)
   02. Reset & base
   03. Typography helpers
   04. Layout primitives (container, section, section head)
   05. Buttons & icon buttons
   06. Header / navigation / hamburger
   07. Hero (video + canvas background)
   09. Cards & services grid
   10. Portfolio: filters + masonry
   11. Process
   12. FAQ accordion
   13. Contact & form
   14. Footer
   15. Back to top
   16. Scroll reveal animations
   17. Responsive breakpoints
   18. Reduced motion / print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Every colour is a custom property so the light theme is a single override
   block rather than a parallel stylesheet.
   ========================================================================== */

:root {
  /* --- Brand colours (constant across themes) ---
     Watermelon variant: rind green + flesh red, kept at neon saturation so
     the "Neon Night" treatment still reads as cyberpunk rather than fruity.
     The original Neon Night pair was --primary #00d9ff / --accent #ff00aa —
     swap these two lines back to return to it. */
  --primary: #21d97a;   /* watermelon rind — neon green */
  --accent:  #ff3b5c;   /* watermelon flesh — neon red  */

  /* --- Dark theme (default) --- */
  --bg:            #0b0b1a;
  --bg-alt:        #0e0e22;
  --surface:       #1a1a2e;
  --surface-2:     #21213c;
  --surface-hover: #262647;

  --text:      #eef1ff;
  --text-soft: #c3c9e8;
  --muted:     #8d95bd;

  --border:       rgba(33, 217, 122, 0.16);
  --border-soft:  rgba(255, 255, 255, 0.07);
  --border-strong: rgba(33, 217, 122, 0.36);

  --primary-ink: #0a1410;              /* text on a green fill */
  --primary-soft: rgba(33, 217, 122, 0.12);
  --accent-soft:  rgba(255, 59, 92, 0.14);

  --glow-primary: 0 0 0 1px rgba(33, 217, 122, .35), 0 10px 40px -12px rgba(33, 217, 122, .45);
  --glow-accent:  0 0 40px -8px rgba(255, 59, 92, .5);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, .8);
  --shadow-lg: 0 28px 70px -30px rgba(0, 0, 0, .9);

  --scrim: rgba(11, 11, 26, .72);
  --header-bg: rgba(11, 11, 26, .72);

  /* --- Typography --- */
  --font-head: 'Oswald', 'Impact', 'Haettenschweiler', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing / sizing --- */
  --container:  1200px;
  /* Floor is 1rem so 320px-wide phones keep usable content width */
  --gutter:     clamp(1rem, 4vw, 2.5rem);
  --section-py: clamp(4.5rem, 8.5vw, 7.5rem);
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --header-h:   76px;

  /* --- Motion --- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .18s;
  --t-base:    .32s;
  --t-slow:    .6s;
}

/* --- Light theme override --------------------------------------------------
   The neon hues are darkened here so text and icons keep an accessible
   contrast ratio against pale backgrounds; the pure neon values are kept for
   decorative fills only.
   ------------------------------------------------------------------------- */
:root[data-theme='light'] {
  --primary: #0e9e57;          /* lifted from #0f7a45 — still AA on white */
  --accent:  #d92544;

  /* The ground is deliberately a real grey, not off-white: white cards need
     something to sit on or they dissolve into the page. */
  --bg:            #e0e6f0;
  --bg-alt:        #ffffff;    /* alternating sections stay white */
  --surface:       #ffffff;
  --surface-2:     #d5dde9;
  --surface-hover: #ccd6e5;

  --text:      #0b0b1a;
  --text-soft: #333a5c;
  --muted:     #5a6285;

  --border:        rgba(11, 11, 26, 0.16);
  --border-soft:   rgba(11, 11, 26, 0.14);   /* was .07 — an edge you can see */
  --border-strong: rgba(14, 158, 87, 0.42);

  --primary-ink: #ffffff;
  --primary-soft: rgba(14, 158, 87, 0.12);
  --accent-soft:  rgba(217, 37, 68, 0.10);

  --glow-primary: 0 0 0 1px rgba(14, 158, 87, .25), 0 10px 34px -14px rgba(14, 158, 87, .5);
  --glow-accent:  0 0 34px -10px rgba(217, 37, 68, .4);

  /* Light UI reads depth from edges and shadow, not glow. */
  --shadow-sm: 0 1px 2px rgba(19, 24, 56, .07);
  --shadow-md: 0 12px 30px -14px rgba(19, 24, 56, .32);
  --shadow-lg: 0 26px 56px -28px rgba(19, 24, 56, .36);

  --scrim: rgba(224, 230, 240, .55);
  --header-bg: rgba(255, 255, 255, .82);
}

/* The primary→accent gradient runs green→olive→mustard→red on a pale ground.
   It only works against black, so light mode gets solid brand green. */
:root[data-theme='light'] .text-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--primary);
  /* The base rule also sets -webkit-text-fill-color: transparent, which wins
     over `color`. Without resetting it the word simply disappears. */
  -webkit-text-fill-color: currentColor;
}

/* One dark block gives the light page an anchor and lets the neon green
   appear in light mode, tying the two themes together. */
:root[data-theme='light'] .cta {
  background: #0b0b1a;
  color: #eef1ff;
}
:root[data-theme='light'] .cta h2,
:root[data-theme='light'] .cta .section-head__title { color: #eef1ff; }
:root[data-theme='light'] .cta p { color: #c3c9e8; }
:root[data-theme='light'] .cta .text-gradient { color: #21d97a; -webkit-text-fill-color: currentColor; }
:root[data-theme='light'] .cta .btn--primary {
  background: linear-gradient(100deg, #21d97a, #6ef2a8 105%);
  color: #0a1410;
  box-shadow: 0 0 0 1px rgba(33,217,122,.35), 0 10px 34px -12px rgba(33,217,122,.5);
}
:root[data-theme='light'] .cta .btn--ghost {
  color: #eef1ff;
  border-color: rgba(33,217,122,.45);
  background: transparent;
}


:root[data-theme='light'] body { color-scheme: light; }
:root[data-theme='dark']  body { color-scheme: dark; }


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Keeps anchored sections clear of the fixed header */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-soft);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

/* Locks scrolling while the mobile menu is open */
body.is-nav-open { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; padding: 0; }

/* Consistent, always-visible keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: #fff; }

/* Themed scrollbar (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--primary-ink); }


/* ==========================================================================
   03. TYPOGRAPHY HELPERS
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--text);
  text-transform: uppercase;
}

h3 { text-transform: none; letter-spacing: .015em; }

p { text-wrap: pretty; }

/* Green → red gradient used on key words in headings.
   Interpolated in OKLCH so the ramp travels green → yellow → orange → red and
   keeps its chroma. Straight sRGB interpolation between these two hues dips
   through a muddy olive-brown at the midpoint. The plain sRGB declaration
   above it is the fallback for engines without colour-space interpolation. */
.text-gradient {
  background: linear-gradient(100deg, var(--primary) 0%, var(--accent) 92%);
  background: linear-gradient(100deg in oklch, var(--primary) 0%, var(--accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for the rare engine that ignores background-clip:text */
  -webkit-text-fill-color: transparent;
}


/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section {
  position: relative;
  padding-block: var(--section-py);
}

/* Alternating band, plus a hairline top edge that fades out at both ends */
.section--alt { background: var(--bg-alt); }
.section--alt::before,
.section--alt::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.section--alt::before { top: 0; }
.section--alt::after  { bottom: 0; }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
}
.section-head__eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.section-head__title {
  font-size: clamp(2rem, 1.4rem + 2.9vw, 3.4rem);
  margin-bottom: 1.15rem;
}

.section-head__lede {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 62ch;
}


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  --btn-py: .9rem;
  --btn-px: 1.65rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { transition: transform var(--t-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--sm { --btn-py: .65rem; --btn-px: 1.25rem; font-size: .8125rem; }
.btn--lg { --btn-py: 1.1rem; --btn-px: 2.4rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* Primary: solid neon gradient */
.btn--primary {
  color: var(--primary-ink);
  background: linear-gradient(100deg, var(--primary), #6ef2a8 55%, var(--accent) 160%);
  box-shadow: var(--glow-primary);
}
.btn--primary:hover {
  color: var(--primary-ink);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--primary), 0 16px 40px -12px rgba(33, 217, 122, .65), var(--glow-accent);
}

/* A magenta sheen sweeps across on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--accent), var(--primary));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.btn--primary:hover::after { opacity: .35; }

/* Ghost: outlined */
.btn--ghost {
  color: var(--text);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-2px);
}

/* Small square icon button (theme toggle) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover {
  color: var(--primary);
  border-color: var(--border-strong);
  background: var(--primary-soft);
  transform: translateY(-1px) rotate(-8deg);
}

/* Sun shows in dark mode (click → go light); moon shows in light mode */
.theme-toggle__sun  { display: block; }
.theme-toggle__moon { display: none; }
:root[data-theme='light'] .theme-toggle__sun  { display: none; }
:root[data-theme='light'] .theme-toggle__moon { display: block; }


/* ==========================================================================
   06. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height var(--t-base) var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: 66px; }

/* --- Brand --- */
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); }
.brand:hover { color: var(--text); }

.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-10deg) scale(1.05); box-shadow: var(--glow-primary); }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand__name-accent { color: var(--primary); margin-left: .3ch; }

.brand__tag {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Desktop nav --- */
.nav__list { display: flex; align-items: center; gap: .25rem; }

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .9rem;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

/* Underline grows from the centre on hover / when the section is in view */
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: .28rem;
  width: 0; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width var(--t-base) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link.is-active::after { width: calc(100% - 1.8rem); }
.nav__link.is-active { color: var(--primary); }

.nav__cta-item { margin-left: .6rem; }

/* --- Hamburger --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 9px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease),
              background-color var(--t-base) var(--ease);
}
/* Morph into an X while the menu is open */
.hamburger[aria-expanded='true'] .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--primary); }
.hamburger[aria-expanded='true'] .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.hamburger[aria-expanded='true'] .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--accent); }

/* Raised above the mobile drawer (which is a sibling inside the header's
   stacking context) so the close button and theme toggle stay clickable. */
.site-header__actions {
  position: relative;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* The brand needs the same treatment on narrow screens, where the drawer
   would otherwise slide over it. */
.brand { position: relative; z-index: 96; }

/* --- Mobile menu backdrop --- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 3, 12, .6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.nav-backdrop.is-visible { opacity: 1; }

/* --- Reading progress --- */
.scroll-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 12px var(--primary);
  transition: width .1s linear;
}


/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 4rem) 6rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }

/* Layer 1 — always-on animated canvas */
.hero__canvas { width: 100%; height: 100%; }

/* Layer 2 — optional video, blended over the canvas.
   Starts invisible; JS adds `.is-ready` only once the file actually plays. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.4) contrast(1.1) hue-rotate(-8deg);
  transition: opacity 1.2s var(--ease);
}
.hero__video.is-ready { opacity: .42; }
:root[data-theme='light'] .hero__video.is-ready { opacity: .3; mix-blend-mode: luminosity; }

/* Layer 3 — readability scrim */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 15%, transparent 0%, var(--bg) 78%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, transparent 32%, var(--bg) 100%);
}

/* Faint perspective grid for the cyberpunk read */
.hero__grid-lines {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background-image:
    linear-gradient(var(--border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(340px) rotateX(62deg);
  transform-origin: bottom center;
  opacity: .28;
  mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  animation: grid-drift 9s linear infinite;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 64px 0; }
}

/* --- Falling watermelons -------------------------------------------------
   Twelve instances of one SVG symbol. Only `transform` and `opacity` are
   animated, so each slice stays on the compositor and never triggers layout.
   Per-slice timing lives in the :nth-child block below rather than inline
   styles, which keeps the markup clean and the values easy to tune.
   ---------------------------------------------------------------------- */

.melons {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.melons__defs { position: absolute; width: 0; height: 0; }

.melon {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  opacity: 0;
  animation: melon-fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}

.melon svg { width: 100%; height: auto; }

@keyframes melon-fall {
  0%   { transform: translate3d(0, -22vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--op); }
  88%  { opacity: var(--op); }
  100% { transform: translate3d(var(--drift), 116vh, 0) rotate(var(--spin)); opacity: 0; }
}

/* Hand-tuned so the slices never fall in a visible rhythm or column. The
   large ones sit toward the edges, keeping the middle clear for the headline. */
.melon:nth-child(2)  { --x:  3%; --size: 74px; --dur: 15s; --delay:  0s;   --spin:  200deg; --drift:  34px; --op: .72; }
.melon:nth-child(3)  { --x: 15%; --size: 40px; --dur: 19s; --delay: -6s;   --spin: -260deg; --drift: -22px; --op: .5; }
.melon:nth-child(4)  { --x: 25%; --size: 56px; --dur: 13s; --delay: -11s;  --spin:  160deg; --drift:  48px; --op: .6; }
.melon:nth-child(5)  { --x: 37%; --size: 34px; --dur: 21s; --delay: -3s;   --spin: -180deg; --drift: -30px; --op: .4; }
.melon:nth-child(6)  { --x: 47%; --size: 28px; --dur: 17s; --delay: -14s;  --spin:  300deg; --drift:  18px; --op: .34; }
.melon:nth-child(7)  { --x: 57%; --size: 46px; --dur: 14s; --delay: -8s;   --spin: -220deg; --drift: -40px; --op: .52; }
.melon:nth-child(8)  { --x: 67%; --size: 38px; --dur: 20s; --delay: -17s;  --spin:  240deg; --drift:  26px; --op: .46; }
.melon:nth-child(9)  { --x: 76%; --size: 62px; --dur: 16s; --delay: -2s;   --spin: -300deg; --drift: -34px; --op: .66; }
.melon:nth-child(10) { --x: 85%; --size: 34px; --dur: 22s; --delay: -10s;  --spin:  180deg; --drift:  20px; --op: .42; }
.melon:nth-child(11) { --x: 92%; --size: 68px; --dur: 12s; --delay: -19s;  --spin: -160deg; --drift: -28px; --op: .7; }
.melon:nth-child(12) { --x: 31%; --size: 26px; --dur: 24s; --delay: -13s;  --spin:  340deg; --drift:  44px; --op: .32; }
.melon:nth-child(13) { --x: 63%; --size: 44px; --dur: 18s; --delay: -22s;  --spin: -280deg; --drift: -18px; --op: .5; }

/* Nothing to animate while the hero is scrolled away — the class is toggled
   by the same IntersectionObserver that parks the canvas loop. */
.hero.is-offscreen .melon { animation-play-state: paused; }

.hero__inner { position: relative; z-index: 1; max-width: 900px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding: .5rem 1.1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 70%, transparent); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__title {
  font-size: clamp(2.75rem, 1.6rem + 6vw, 6.25rem);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.005em;
  margin-bottom: 1.75rem;
  /* Soft halo lifts the headline off the animated background. Tinted per
     theme so it never reads as a grey smudge on the pale layout. */
  text-shadow: 0 8px 60px rgba(0, 0, 0, .35);
}
/* Hero wash, light mode only.
   These are fixed colours rather than tokens, so they must not apply to the
   dark theme — a #d5d5d5 radial over the dark hero would veil it in grey.
   The dark theme keeps the token-driven version above. */
/* The hero now carries a warm khaki wash, so the sections beneath it must
   pick that tone up or the seam between warm hero and cool grey shows.
   Same origin (top-left) and same hue, weaker each time, so the warmth
   decays down the page instead of banding. */
:root[data-theme='light'] #services {
  background:
    /* The hero's radial settles to #d5d5d5, which is darker than --bg, so the
       join would step. Carry that exact grey across the boundary and dissolve
       it into the page ground. */
    linear-gradient(180deg, #d5d5d5 0%, transparent 26%),
    radial-gradient(95% 70% at 12% 0%,
      color-mix(in srgb, #c8c184 62%, transparent) 0%,
      transparent 64%),
    var(--bg);
}
:root[data-theme='light'] #clients {
  background:
    radial-gradient(85% 60% at 88% 0%,
      color-mix(in srgb, #c8c184 34%, transparent) 0%,
      transparent 58%),
    var(--bg);
}

:root[data-theme='light'] .hero__scrim {
  background:
    radial-gradient(120% 90% at 15% 15%, transparent 0%, #d5d5d5 78%),
    linear-gradient(180deg,
      color-mix(in srgb, #c8c184 78%, transparent) 0%,
      #c8c8c800 32%,
      var(--bg) 100%);
}

:root[data-theme='light'] .hero__title {
  text-shadow: 0 6px 44px rgba(255, 255, 255, .9);
}

.hero__lede {
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
  color: var(--text-soft);
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* Audience chips */
.hero__audience {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .7rem;
}
.hero__audience li {
  padding: .45rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.hero__audience li:hover {
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-soft);
}

.hero__scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .6875rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
}
.hero__scroll-cue:hover { color: var(--primary); }

.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, var(--primary));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 40%;
  background: var(--accent);
  animation: scroll-cue 2s var(--ease) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}


/* ==========================================================================
   09. CARDS & SERVICES
   ========================================================================== */

.card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}

/* Neon top edge that lights up on hover */
.card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  background: var(--surface-hover);
}
.card:hover::before { opacity: 1; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 1.5rem;
  border-radius: 15px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.service-card:hover .service-card__icon {
  transform: rotate(-8deg) scale(1.08);
  color: var(--accent);
  background: var(--accent-soft);
}

.service-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: var(--text);
}

.service-card__text { color: var(--muted); font-size: .96875rem; margin-bottom: 1.5rem; }

.service-card__list { display: grid; gap: .6rem; }
.service-card__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .90625rem;
  color: var(--text-soft);
}
.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  transform: rotate(45deg);
}


/* ==========================================================================
   10. PORTFOLIO — FILTERS + MASONRY
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.filter {
  padding: .55rem 1.15rem;
  font-size: .84375rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.filter.is-active {
  color: var(--primary-ink);
  background: linear-gradient(100deg, var(--primary), var(--accent) 190%);
  border-color: transparent;
  box-shadow: var(--glow-primary);
}

/* --- True Pinterest-style masonry via CSS multi-column ------------------- */
.masonry {
  column-count: 3;
  column-gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.work-card {
  /* `inline-block` + `break-inside: avoid` keeps a card from splitting
     across two columns, which is the classic multi-column masonry fix. */
  display: inline-block;
  width: 100%;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* Filtered-out cards are removed from flow so the columns re-pack */
.work-card.is-hidden { display: none; }

.work-card__media { position: relative; display: block; overflow: hidden; }

/* These are screenshots of real, live client sites, so the treatment stays
   light — enough to sit inside the palette, not enough to disguise the work. */
.work-card__media img {
  width: 100%;
  filter: grayscale(.2) contrast(1.03);
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease);
}
.work-card:hover .work-card__media img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.03);
}

/* Neon duotone wash over the imagery, lifted on hover */
.work-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--primary) 30%, transparent),
              color-mix(in srgb, var(--accent) 34%, transparent));
  mix-blend-mode: overlay;
  opacity: .4;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
.work-card:hover .work-card__media::after { opacity: 0; }

.work-card__badge {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  padding: .3rem .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.work-card__body { padding: 1.5rem; }

.work-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
  /* Domains are lowercase and read better without the heading uppercase.
     `anywhere` only breaks when a name genuinely cannot fit. */
  text-transform: none;
  overflow-wrap: anywhere;
}

/* Domain link with a trailing external-link glyph.
   Vertical padding lifts the hit area to ~34px for touch; the negative
   margin keeps the visual spacing identical to an unpadded link. */
.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-block: .4rem;
  margin-block: -.4rem;
  color: var(--text);
}
.work-card__link svg {
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.work-card:hover .work-card__link svg,
.work-card__link:focus-visible svg { opacity: 1; transform: none; }
.work-card__link:hover { color: var(--primary); }

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.work-card__meta {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .9rem;
}

.work-card__text { font-size: .9375rem; color: var(--muted); margin-bottom: 1.15rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-list li {
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: 6px;
}

.masonry__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
}


/* ==========================================================================
   11. PROCESS
   ========================================================================== */

/* Six steps sit as 3 × 2 on desktop, stepping down to 2 and then 1 column. */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem);
}

.process__step {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border-soft);
  transition: border-color var(--t-base) var(--ease);
}

/* Connector dot sitting on the top rule */
.process__step::before {
  content: '';
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.process__step:hover { border-color: var(--border-strong); }
.process__step:hover::before { background: var(--accent); transform: scale(1.4); }

.process__num {
  display: block;
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
  margin-bottom: .85rem;
  transition: -webkit-text-stroke-color var(--t-base) var(--ease);
}
.process__step:hover .process__num { -webkit-text-stroke-color: var(--accent); }

.process__title { font-size: 1.1875rem; font-weight: 700; margin-bottom: .6rem; color: var(--text); }
.process__text { font-size: .9375rem; color: var(--muted); }


/* ==========================================================================
   11b. WHY CHOOSE US
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.why-card { text-align: center; }

.why-card__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.why-card:hover .why-card__icon {
  transform: scale(1.08);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

.why-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .65rem;
}

.why-card__text { color: var(--muted); font-size: .96875rem; }


/* ==========================================================================
   11c. CLOSING CTA
   A full-bleed band that breaks up the dark sections with a neon wash.
   ========================================================================== */

.cta {
  position: relative;
  padding-block: clamp(4rem, 7.5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: var(--bg);
  border-block: 1px solid var(--border);
}

/* Two soft neon pools bleeding in from the corners */
.cta::before {
  content: '';
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background:
    radial-gradient(42% 60% at 18% 45%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%),
    radial-gradient(46% 62% at 84% 55%, color-mix(in srgb, var(--accent)  24%, transparent), transparent 72%);
  filter: blur(18px);
}

/* Faint grid to echo the hero */
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .5;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}

.cta__inner { max-width: 780px; }

.cta__title {
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3.5rem);
  margin-bottom: 1.15rem;
}

.cta__text {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--text-soft);
  margin-bottom: 2.25rem;
}

.cta__actions { display: flex; justify-content: center; }


/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */

.accordion { display: grid; gap: .75rem; }

.accordion__item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.accordion__item:hover { border-color: var(--border); }
.accordion__item.is-open {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--primary); }
.accordion__item.is-open .accordion__trigger { color: var(--primary); }

/* Plus → minus icon, built from two pseudo-element bars */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); background: var(--primary-soft); }
.accordion__item.is-open .accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

/* Height is animated by JS setting an explicit pixel max-height */
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease);
}
.accordion__content {
  padding: 0 1.5rem 1.4rem;
  color: var(--muted);
  font-size: .96875rem;
}


/* ==========================================================================
   13. CONTACT & FORM
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__text { color: var(--muted); margin-bottom: 1.25rem; max-width: 46ch; }

/* Pulls the entry price out of the paragraph flow as a scannable chip */
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.25rem;
  padding: .6rem 1.15rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.price-badge svg { color: var(--primary); flex-shrink: 0; }
.price-badge strong {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}

/* Magenta underscore behind the free-consultation phrase */
.highlight {
  color: var(--text);
  font-weight: 700;
  background-image: linear-gradient(90deg, var(--primary), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

.contact__closer {
  max-width: 46ch;
  margin-bottom: 2rem;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
}

.contact__details { display: grid; gap: 1.15rem; }
.contact__details li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-soft);
}
.contact__details li:last-child { border-bottom: 0; padding-bottom: 0; }

.contact__detail-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Email, phone and WhatsApp are the links people actually tap on a phone, so
   they get a ~40px hit area. The negative margin keeps the row spacing. */
.contact__details a {
  display: inline-block;
  padding-block: .375rem;
  margin-block: -.375rem;
}

.contact__form-wrap {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.field { display: grid; gap: .5rem; }

.field__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field__label span { color: var(--accent); }

.field__input {
  width: 100%;
  padding: .85rem 1rem;
  font-size: .96875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.field__input::placeholder { color: var(--muted); opacity: .75; }

.field__input:hover { border-color: var(--border); }
.field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.field__textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

/* Native select arrow replaced with an inline SVG chevron */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d95bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
}
.field__select option { background: var(--surface); color: var(--text); }

/* --- Validation states --- */
.field__input[aria-invalid='true'] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field.is-valid .field__input {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

.field__error {
  display: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent);
}
.field__error.is-visible { display: block; animation: shake .32s var(--ease); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.field__hint { font-size: .78125rem; color: var(--muted); }

/* --- Checkbox --- */
.field--check { gap: .35rem; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  font-size: .875rem;
  color: var(--muted);
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox__box {
  position: relative;
  width: 20px; height: 20px;
  margin-top: .18rem;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.checkbox__box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--primary-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-fast) var(--ease-out);
}
.checkbox input:checked + .checkbox__box {
  background: var(--primary);
  border-color: var(--primary);
}
.checkbox input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--primary); outline-offset: 3px; }
.checkbox__label span { color: var(--accent); }

/* Honeypot — visually gone, but not `display:none` (some bots skip those) */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Submit button loading state --- */
.btn__spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid color-mix(in srgb, var(--primary-ink) 35%, transparent);
  border-top-color: var(--primary-ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .btn__spinner { display: block; }

/* Reassurance line directly under the submit button */
.form__note {
  margin-top: -.35rem;
  font-size: .8125rem;
  text-align: center;
  color: var(--muted);
}

/* --- Submit result message --- */
.form__status {
  display: none;
  padding: .9rem 1.1rem;
  font-size: .90625rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.form__status.is-visible { display: block; animation: slide-up .4s var(--ease-out) both; }
.form__status.is-success {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--border-strong);
}
.form__status.is-error {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  padding-block: 1.75rem;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-footer__copy { font-size: .875rem; color: var(--muted); }

.social { display: flex; align-items: center; gap: .4rem; }

.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--muted);
  border: 1px solid var(--border-soft);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.social a:hover {
  color: var(--primary-ink);
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--glow-primary);
}


/* ==========================================================================
   15. BACK TO TOP
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out),
              visibility var(--t-base), background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover {
  color: var(--primary-ink);
  background: var(--primary);
  box-shadow: var(--glow-primary);
}


/* ==========================================================================
   16. SCROLL REVEAL
   Elements carrying `.reveal` start shifted down and transparent; the
   IntersectionObserver in main.js adds `.is-visible`. `data-delay="n"`
   staggers siblings by n × 90ms.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

/* --- Tablet & down: collapse nav into the slide-in drawer ---------------- */
@media (max-width: 960px) {
  .hamburger { display: flex; }

  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 95;
    width: min(340px, 86vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 1.5rem) 1.75rem 2rem;
    background: var(--bg-alt);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .9);
    transform: translateX(102%);
    transition: transform .38s var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: .3rem; }

  .nav__link {
    padding: .9rem .75rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
  }
  .nav__link::after { left: .75rem; transform: none; bottom: .5rem; }
  .nav__link:hover::after,
  .nav__link.is-active::after { width: 28px; }

  .nav__cta-item { margin: 1.25rem 0 0; }
  .nav__cta-item .btn { width: 100%; }

  .masonry { column-count: 2; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .cta__actions .btn { width: 100%; max-width: 380px; }
  .contact__intro { max-width: 640px; }
}

/* --- Small tablet / large phone ----------------------------------------- */
@media (max-width: 720px) {
  :root { --header-h: 68px; }

  .brand__tag { display: none; }

  .hero { min-height: 92svh; }
  .hero__actions { gap: .75rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__scroll-cue { display: none; }

  .form__row { grid-template-columns: 1fr; }

  .site-footer__inner { flex-direction: column; text-align: center; gap: 1rem; }

  /* Thin the watermelon field out on phones: fewer, smaller slices, and every
     x-position chosen so the slice plus its drift stays fully in frame rather
     than sitting half-clipped against the edge for the whole fall. */
  .melon:nth-child(4),
  .melon:nth-child(7),
  .melon:nth-child(10),
  .melon:nth-child(12),
  .melon:nth-child(13) { display: none; }

  .melon:nth-child(2)  { --x:  4%; --size: 40px; }
  .melon:nth-child(3)  { --x: 25%; --size: 26px; }
  .melon:nth-child(5)  { --x: 44%; --size: 30px; }
  .melon:nth-child(6)  { --x: 62%; --size: 22px; }
  .melon:nth-child(8)  { --x: 76%; --size: 28px; }
  .melon:nth-child(9)  { --x: 14%; --size: 34px; }
  .melon:nth-child(11) { --x: 86%; --size: 24px; }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 560px) {
  .masonry { column-count: 1; }
  .process { grid-template-columns: 1fr; gap: 1.75rem; }

  .accordion__trigger { padding: 1.05rem 1.15rem; font-size: 1rem; }
  .accordion__content { padding: 0 1.15rem 1.2rem; }

  .contact__details li { grid-template-columns: 1fr; gap: .2rem; }

  .filters { gap: .4rem; }
  .filter { padding: .5rem .9rem; font-size: .8125rem; }
}

/* --- Small phones (iPhone SE and similar 320–400px screens) --------------
   At this width the brand lockup plus the two header buttons no longer fit
   on one line, so everything in the bar steps down a size. --------------- */
@media (max-width: 400px) {
  :root { --header-h: 62px; }

  .brand { gap: .5rem; }
  .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand__mark svg { width: 26px; height: 26px; }
  .brand__name { font-size: .9375rem; letter-spacing: .04em; }

  .icon-btn,
  .hamburger { width: 38px; height: 38px; }
  .site-header__actions { gap: .35rem; }

  /* Long CTA labels need to wrap rather than overflow their button */
  .btn { --btn-px: 1.25rem; font-size: .84375rem; letter-spacing: .06em; }
  .btn--lg { --btn-py: .95rem; --btn-px: 1.4rem; font-size: .9375rem; }
  .btn--block { white-space: normal; text-wrap: balance; }

  .hero__eyebrow { font-size: .6875rem; padding: .45rem .85rem; gap: .5rem; }
  .hero__audience li { font-size: .75rem; padding: .4rem .8rem; }

  .contact__form-wrap { padding: 1.25rem 1rem; }
  .work-card__body { padding: 1.15rem; }
  .accordion__trigger { padding: 1rem; font-size: .9375rem; gap: .75rem; }
  .accordion__content { padding: 0 1rem 1.1rem; }

  .section-head__eyebrow { letter-spacing: .16em; }
}

/* Only go to four columns when the cards can still hold a full domain name
   on one line — below this, three columns read far better. */
@media (min-width: 1700px) {
  .masonry { column-count: 4; }
}


/* ==========================================================================
   18. REDUCED MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Content must never be left invisible if transitions are disabled */
  .reveal { opacity: 1; transform: none; }

  .hero__grid-lines { animation: none; }
  /* Falling slices are pure decoration — remove them rather than freeze them
     mid-air, which would just look like stray artwork. */
  .melons { display: none; }
  .work-card:hover,
  .card:hover,
  .back-to-top:hover { transform: none; }
}

@media print {
  .site-header, .back-to-top, .hero__media, .nav-backdrop,
  .filters, .hero__scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
  .accordion__panel { max-height: none !important; }
}


/* ==========================================================================
   FREE AUDIT — header CTA + services card
   Added alongside the free-website-audit page. The nav gets a secondary
   (ghost) button so it sits beside "Start a project" without competing with
   it; the services grid gets an accented card, since a free offer is not the
   same kind of thing as the services around it.
   ========================================================================== */

/* Two CTAs in the bar: keep them from crowding on mid-width screens. */
.nav__cta-item--audit { margin-left: .4rem; }
.nav__cta-item--audit .btn { white-space: nowrap; }

@media (max-width: 1180px) and (min-width: 981px) {
  /* Tight between the last link and two buttons — shrink the ghost one. */
  .nav__cta-item--audit .btn { --btn-px: .9rem; font-size: .75rem; letter-spacing: .06em; }
}

/* The mobile drawer stacks the CTAs; the shared 1.25rem top margin would
   leave a gap between them, so close it up for the second one. */
@media (max-width: 980px) {
  .nav__cta-item--audit { margin: 1.25rem 0 0; }
  .nav__cta-item--audit + .nav__cta-item { margin-top: .6rem; }
}

/* --- services card ------------------------------------------------------ */
.service-card--audit {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, var(--primary-soft), transparent 55%),
    var(--surface);
}
.service-card--audit .service-card__icon { color: var(--primary); }

.service-card__flag {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .2rem .6rem;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: 999px;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.15rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  transition: gap var(--t-base) var(--ease);
}
.service-card__link:hover { gap: .8rem; }
.service-card__link svg { transition: transform var(--t-base) var(--ease-out); }
.service-card__link:hover svg { transform: translateX(2px); }

/* With a second CTA in the bar the nav is tighter, and multi-word labels
   ("Why Us") were breaking across two lines. Keep them on one line and let
   the padding shrink slightly instead. */
.nav__link { white-space: nowrap; }

@media (max-width: 1320px) and (min-width: 981px) {
  .nav__link { padding-inline: .65rem; }
}

/* Between the mobile breakpoint and ~1100px the bar has room for the nav
   links and one CTA, but not two — the second pushed the theme toggle off
   the edge. Drop the ghost CTA in that band; the audit is still reachable
   from the services card, the footer and the hamburger menu below 980px. */
@media (max-width: 1100px) and (min-width: 981px) {
  .nav__cta-item--audit { display: none; }
}