/* ==========================================================================
   Canterlotus Digital Consultancy — site.css
   Design system: "Warm Marble" (Example A / Lithic tokens)
   Single grotesque, cream surfaces, three semantic accents, 8px base rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colors — four-colour palette, semantic roles assigned once */
  --color-blue:         #425B9A;  /* ink, structure, deep section ground */
  --color-blue-deep:    #2C3E6B;  /* shade of the blue for text on pink/sky */
  --color-sky:          #76C0EC;  /* accent: pattern, status, illustration */
  --color-cream:        #FFF6DC;  /* canvas, warm panel, inverse text */
  --color-pink:         #FF95A5;  /* the one filled action colour + emphasis */
  --color-pink-dark:    #FF8095;
  --color-sky-light:    #9CC7EE;
  --color-paper:        #FFFFFF;  /* card surfaces */
  --color-sky-tint:     #EAF4FC;  /* cool alternating panel */
  --color-pink-tint:    #FDEFF2;  /* soft pink wash (hero glow tone) */
  --color-green-tint:   #E4F3E7;  /* the pale green panel: terms stay boring */
  --color-muted:        #5C6B94;  /* secondary text */
  --color-alert:        #B03A55;  /* shade of the pink: validation errors */
  --color-hair:         #E3E7F2;  /* hairline borders */
  --color-ink-70:       rgba(44, 62, 107, 0.78);
  --color-ink-08:       rgba(66, 91, 154, 0.08);
  --btn-primary-text:   #2C3E6B;  /* 5.2:1 on the pink fill */

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, monospace;

  --text-caption:    14px;  --leading-caption:    1.52;  --tracking-caption:    -0.28px;
  --text-body:       16px;  --leading-body:       1.5;   --tracking-body:       -0.32px;
  --text-subheading: 20px;  --leading-subheading: 1.4;   --tracking-subheading: -0.4px;
  --text-heading-sm: 24px;  --leading-heading-sm: 1.2;   --tracking-heading-sm: -0.48px;
  --text-heading:    36px;  --leading-heading:    1.2;   --tracking-heading:    -0.72px;
  --text-display:    64px;  --leading-display:    1.0;   --tracking-display:    -1.28px;

  --fw-regular: 400;
  --fw-medium:  500;

  /* Spacing — 8px base */
  --s8: 8px;   --s16: 16px;  --s24: 24px;  --s32: 32px;  --s40: 40px;
  --s48: 48px; --s64: 64px;  --s80: 80px;  --s120: 120px;

  /* Layout */
  --page-max:    1200px;
  --section-gap: 80px;
  --card-pad:    40px;

  /* Radius — varied intentionally, cards/buttons own 24px */
  --radius-sm:      8px;
  --radius-image:   21.6px;
  --radius-card:    24px;
  --radius-pill:    800px;

  /* Elevation */
  --shadow-sm:    rgba(28, 44, 86, 0.10) 0px  4px  8px 0px;
  --shadow-xl:    rgba(28, 44, 86, 0.10) 0px 16px 32px 0px;
  --shadow-deep:  rgba(28, 44, 86, 0.45) 0px 16px 32px 0px;
  --shadow-hover: 0px 0px 0px 1px rgba(28, 44, 86, 0.13),
                  rgba(28, 44, 86, 0.26) 0px  3px  5px 0px,
                  rgba(28, 44, 86, 0.18) 0px 16px 30px 0px,
                  rgba(28, 44, 86, 0.13) 0px 40px 70px 0px;
  --shadow-card:  0px 0px 0px 1px rgba(28, 44, 86, 0.10),
                  rgba(28, 44, 86, 0.22) 0px  2px  3px 0px,
                  rgba(28, 44, 86, 0.15) 0px  6px 12px 0px,
                  rgba(28, 44, 86, 0.10) 0px 18px 34px 0px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  220ms;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-blue);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss08", "cv05", "tnum";
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; border: 0; background: none; }
input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
::selection { background: var(--color-sky); color: var(--color-blue-deep); }

/* Anchor targets clear the sticky nav */
[id] { scroll-margin-top: 96px; }

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Type roles */
.display {
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); font-weight: var(--fw-medium);
}
.h1 { font-size: var(--text-heading);    line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading);    font-weight: var(--fw-medium); }
.h2 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: var(--fw-medium); }
.h3 { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); font-weight: var(--fw-medium); }
.body   { font-size: var(--text-body);    line-height: var(--leading-body);    letter-spacing: var(--tracking-body); }
.body--muted { color: var(--color-muted); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--color-muted); }
.mono {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.6; letter-spacing: 0.01em;
  color: var(--color-muted);
}
.eyebrow {
  font-size: 12px; line-height: 1.6; letter-spacing: 0.06em;
  font-weight: var(--fw-medium);
  text-transform: uppercase; color: var(--color-muted);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.lede { font-size: var(--text-subheading); line-height: 1.45; letter-spacing: -0.4px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--s24); }
.section { padding-block: var(--section-gap); }

/* --------------------------------------------------------------------------
   4. DECORATION — concentric arcs (brand texture, never foreground content)
   -------------------------------------------------------------------------- */
.arcs--warm  { color: var(--color-sky); }
.arcs--dark  { color: var(--color-sky-light); }
.arcs--violet{ color: var(--color-blue); }

.arc-rings {
  position: absolute; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      currentColor 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}

/* Primary — the ONLY filled ember action.
   Text is obsidian, not white: white on #FF95A5 is ~2.9:1 (fails WCAG AA),
   obsidian on ember is ~7.1:1. Flip --btn-primary-text to #ffffff for the
   low-contrast look. */
.btn--primary {
  background: var(--color-pink);
  color: var(--btn-primary-text);
  font-size: var(--text-body);
  border-radius: var(--radius-card);
  padding: 12px 38px;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-pink-dark); transform: translateY(-1px); box-shadow: var(--shadow-xl); }
.btn--primary:active { transform: translateY(0); }

/* Ghost — black hairline secondary, sits beside primary */
.btn--ghost {
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: var(--text-body);
}
.btn--ghost:hover { background: var(--color-blue); color: var(--color-paper); }

/* Ghost on dark ground */
.btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: var(--text-body);
}
.btn--ghost-light:hover { background: var(--color-paper); color: var(--color-blue); }

/* Text link with arrow */
.btn--text {
  gap: 6px; font-size: var(--text-body); color: var(--color-blue);
  border-bottom: 1px solid transparent; padding: 2px 0;
}
.btn--text:hover { border-bottom-color: var(--color-blue); }
.btn--text .arrow { transition: transform var(--dur) var(--ease); }
.btn--text:hover .arrow { transform: translateX(4px); }

.btn__arrow { font-size: 14px; line-height: 1; }

/* --------------------------------------------------------------------------
   6. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 246, 220, 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--color-hair); }
.nav__inner {
  display: flex; align-items: center; gap: var(--s32);
  height: 72px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-subheading); font-weight: var(--fw-medium); letter-spacing: -0.4px;
  margin-right: auto;
}
.nav__mark { width: 26px; height: 26px; flex: none; }
.nav__links { display: flex; align-items: center; gap: var(--s24); }
.nav__link {
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  color: var(--color-ink-70);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--color-blue); }
.nav__cta { display: flex; align-items: center; gap: var(--s16); }

/* --------------------------------------------------------------------------
   7. HERO — obsidian vault
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-blue);
  color: var(--color-paper);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  padding-block: var(--s80) var(--s64);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 82% 8%,  rgba(66, 91, 154, 0.55) 0%, transparent 65%),
    radial-gradient(52% 48% at 12% 88%, rgba(255, 149, 165, 0.22) 0%, transparent 62%),
    radial-gradient(70% 60% at 50% 120%, rgba(118, 192, 236, 0.22) 0%, transparent 70%);
}
.hero__arcs { position: absolute; right: -16%; top: -36%; width: 68%; aspect-ratio: 1; color: var(--color-sky); opacity: 0.3; }
.hero__arcs2 { position: absolute; left: -20%; bottom: -45%; width: 62%; aspect-ratio: 1; color: var(--color-pink); opacity: 0.32; }
/* Stay a plain container so the hero shares the page's left edge; the measure
   is capped on the children instead. A max-width here centred the box and
   pushed the whole column 130px right of the nav wordmark. */
.hero__inner { position: relative; z-index: 2; }
.hero__inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: -14% -8% -14% -12%;
  background: radial-gradient(62% 74% at 34% 50%,
              rgba(66, 91, 154, 0.96) 0%, rgba(66, 91, 154, 0.72) 46%, rgba(66, 91, 154, 0) 78%);
  pointer-events: none;
}

.hero__typed {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-size: 14px; letter-spacing: 0;
  color: var(--color-paper);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  margin-bottom: var(--s32);
  min-height: 40px;
}
.hero__typed-prompt { color: var(--color-cream); margin-right: 6px; }
/* the little flashing bar */
.caret {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--color-pink);
  margin-left: 3px;
  transform: translateY(2px);
  animation: blink 1.05s steps(1, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero__title { max-width: 18ch; }
.hero__title em { font-style: normal; color: var(--color-cream); }
.hero__sub { margin-top: var(--s24); max-width: 62ch; color: rgba(255, 255, 255, 0.82); }
/* the second tagline, set as an inset pull-quote so it never sits over the object */
.hero__alt {
  margin-top: var(--s24); padding-left: 14px; max-width: 50ch;
  border-left: 2px solid var(--color-pink);
  font-size: 14px; line-height: 1.6;
  letter-spacing: 0; color: rgba(255, 255, 255, 0.93);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s24); margin-top: var(--s40); }
.hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s16) var(--s32);
  margin-top: var(--s48); padding-top: var(--s24);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__fact {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  font-size: var(--text-caption); line-height: 1.5; color: rgba(255, 255, 255, 0.78);
}
.hero__fact-copy { display: block; text-wrap: balance; }
.hero__fact b { font-weight: var(--fw-medium); color: var(--color-paper); }

/* --------------------------------------------------------------------------
   8. INLINE PRODUCT MOCKUP CARD (wraps the simulation)
   -------------------------------------------------------------------------- */
#workspace { display: none; }
#workspace:target { display: block; }
html.ws-open #workspace { display: block; }
.mockup {
  background: var(--color-paper);
  border: 1px solid rgba(66, 91, 154, 0.12);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  padding: var(--s16);
  margin-top: calc(var(--section-gap) * -0.5);
  position: relative;
  z-index: 5;
}
.mockup__bar {
  display: flex; align-items: center; gap: var(--s16);
  padding: 4px 8px var(--s16);
}
.mockup__hint { font-size: 12px; line-height: 1.4; color: var(--color-muted); min-width: 0; }
.mockup__hint b { font-weight: var(--fw-medium); color: var(--color-blue); }
.mockup__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-hair); }
.mockup__dots { display: flex; gap: 6px; }
.mockup__spacer { margin-left: auto; }

/* Status badge component */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-caption); line-height: 1;
  color: var(--color-blue);
}
.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-sky);
  box-shadow: 0 0 0 0 rgba(118, 192, 236, 0.60);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(118, 192, 236, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(118, 192, 236, 0); }
  100% { box-shadow: 0 0 0 0 rgba(118, 192, 236, 0); }
}

.mockup__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16);
  padding: var(--s16) 8px 4px;
  border-top: 1px solid var(--color-hair);
  margin-top: var(--s16);
}
.kbd {
  font-size: 12px; font-weight: var(--fw-medium); line-height: 1;
  background: var(--color-cream); border: 1px solid var(--color-hair);
  border-radius: 4px; padding: 4px 6px; color: var(--color-ink-70);
}

/* --------------------------------------------------------------------------
   9. SERVICE TILE GRID — 3x3, pointer-tracked tilt
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); perspective: 1400px; }

.tile {
  position: relative;
  text-align: left;
  cursor: pointer;
  /* the flip child is a 3d transform, so this element may not clip: the card
     surface and its rounding belong to the faces */
  transform-style: preserve-3d;
  will-change: transform;
}

/* The card turns over: the front is the photograph card, the back is the
   bullets and the request button. Both faces sit in one grid cell, so the
   taller of the two sets the card's height and neither can clip the other. */
.tile__flip {
  position: relative; height: 100%;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
.tile.is-flipped .tile__flip { transform: rotateY(180deg); }
.tile__face {
  grid-area: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* A hidden backface still takes pointer events in some 3d configurations (and
   the tilt transform on the tile is one of them), so the face that is turned
   away is taken out of hit-testing explicitly: before the flip only the front
   is clickable, after it only the back — which is what makes the request
   button inside the back reachable at all. */
.tile:not(.is-flipped) .tile__face--back { pointer-events: none; }
.tile.is-flipped .tile__face--front { pointer-events: none; }
.tile__face--front { display: flex; flex-direction: column; background: var(--color-paper); }
.tile__face--back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: var(--s24);
  background: var(--color-sky-tint);
  color: var(--color-blue);
}
/* the back is read at card scale, so its copy sits a step larger than the
   front's body text — otherwise the detail block floats in a mostly empty card */
.tile__face--back .tile__title { font-size: var(--text-heading-sm); line-height: 1.2; }
.tile__face--back .tile__points { gap: 10px; }
.tile__face--back .tile__points li { font-size: 15px; }
@media (min-width: 761px) and (hover: hover) {
  .tile:hover .tile__face { box-shadow: var(--shadow-hover); }
  .tile:hover .tile__face--front { background: var(--color-cream); }
}
.tile__kicker {
  font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0;
  color: var(--color-muted);
}
.tile__points { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tile__points li {
  position: relative; padding-left: 16px;
  font-size: var(--text-caption); line-height: 1.45; color: var(--color-ink-70);
}
.tile__points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-sky);
}
/* the two actions at the foot of a card back: the demo link (secondary, an
   <a> because it goes somewhere) above the request button (primary, opens the
   form) — looking first, then talking */
.tile__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
@media (min-width: 761px) {
  .tile__face--back .tile__actions:has(.tile__cta:first-child) { margin-top: auto; margin-bottom: auto; }
}
.tile__cta, .tile__demo { width: 100%; justify-content: center; }
.tile__media { position: relative; overflow: hidden; background: var(--color-hair); }
.tile__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity var(--dur) var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
}
.tile:hover .tile__glare { opacity: 1; }
.tile__body {
  padding: var(--s24); display: flex; flex-direction: column; gap: 10px;
  flex: 1; transform: translateZ(34px);
}
.tile__title { font-size: var(--text-subheading); line-height: 1.25; letter-spacing: -0.4px; font-weight: var(--fw-medium); }
.tile__desc { font-size: var(--text-caption); line-height: 1.5; color: var(--color-muted); }
.tile__meta {
  margin-top: auto; padding-top: var(--s16);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: var(--fw-medium); color: var(--color-muted);
}
.tile__meta .arrow { transition: transform var(--dur) var(--ease); }
.tile:hover .tile__meta .arrow { transform: translateX(4px); color: var(--color-pink); }
.tile__index {
  position: absolute; top: var(--s16); left: var(--s16); z-index: 2;
  font-size: 12px; font-weight: var(--fw-medium);
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-hair);
  border-radius: 4px; padding: 3px 7px; color: var(--color-ink-70);
}
.tile--wide { grid-column: span 3; }
.tile--wide .tile__body { padding: var(--s32) var(--s40); }
.tile--wide .tile__title { font-size: var(--text-heading-sm); }

/* once the scroll reveal has finished, the tile's transform must track the
   pointer 1:1 — drop transform from the transition list */
.tile.is-live { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }

/* --------------------------------------------------------------------------
   10. INFO PANELS
   -------------------------------------------------------------------------- */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.panel {
  border-radius: var(--radius-card);
  padding: var(--s32);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s16);
}
.panel--cream    { background: var(--color-paper); }
.panel--lavender { background: var(--color-sky-tint); }
.panel--mint     { background: var(--color-green-tint); }
.panel--lavender .checklist { flex: 1; justify-content: space-evenly; gap: var(--s16); }
.panel__arcs { position: absolute; right: -30%; bottom: -55%; width: 80%; aspect-ratio: 1; }
.panel__title { position: relative; z-index: 2; }
.panel__body  { position: relative; z-index: 2; font-size: var(--text-caption); line-height: 1.62; color: var(--color-ink-70); }
.panel__body + .panel__body { margin-top: -4px; }

/* Check list item */
.checklist { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: var(--text-caption); }
.checklist li b { white-space: nowrap; }
.checklist .check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-blue); color: var(--color-paper);
  display: grid; place-items: center;
}
.checklist svg { width: 11px; height: 11px; }

/* Metric callout */
.metric {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s16) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: relative; z-index: 2;
}
.metric:last-child { border-bottom: 0; }
.metric__value { font-size: var(--text-heading-sm); font-weight: var(--fw-medium); letter-spacing: -0.48px; color: var(--color-blue-deep); }
.metric__label { font-size: var(--text-caption); color: var(--color-muted); }

/* --------------------------------------------------------------------------
   11. UNLOCK CTA — lock releases on hover, label appears, button enlarges
   -------------------------------------------------------------------------- */
.unlock-section {
  position: relative;
  background: var(--color-blue);
  color: var(--color-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: var(--s80) var(--s24);
  text-align: center;
}
.unlock-section__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 50% 108%, rgba(255, 149, 165, 0.30) 0%, transparent 62%);
}
.unlock-section__arcs { position: absolute; left: 50%; top: -38%; width: 52%; aspect-ratio: 1; transform: translateX(-50%); color: var(--color-sky-light); opacity: 0.7; }
.unlock-section__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s24); }
/* the contact mark reads as an emblem, not a bullet */
.unlock-section .eyebrow { display: flex; flex-direction: column; align-items: center; gap: 10px; letter-spacing: 0.14em; }
/* the brand mark, at emblem scale, opens the contact section */
.unlock-mark { width: 64px; height: 64px; display: block; margin: 0 auto; }

.unlock {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 14px;
  min-width: 260px; min-height: 84px;
  padding: 24px 44px;
  border-radius: var(--radius-card);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-paper);
  font-size: var(--text-subheading); font-weight: var(--fw-medium); letter-spacing: -0.4px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background 320ms var(--ease),
              border-color 320ms var(--ease),
              box-shadow 320ms var(--ease),
              min-width 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
              padding 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 0 0 rgba(255, 149, 165, 0);
}
.unlock__lock {
  position: relative; width: 48px; height: 58px; flex: none;
  overflow: hidden; display: grid; place-items: center;
  /* leaving: come back quickly */
  transition: width 320ms var(--ease), opacity 260ms var(--ease), transform 320ms var(--ease);
}
.unlock__shackle {
  transform-box: view-box;
  transform-origin: 10px 20px;   /* the hinge, not the body's left edge */
  /* a non-overshooting ease: the old bounce peaked past the target and the
     shackle clipped the top of the box on the way */
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The phone's half of the button. The padlock only makes sense with a pointer
   to hover it, so ≤760px it is swapped for a finger tapping and the label is
   simply shown — see the responsive block. */
.unlock__tap { display: none; transition: transform 140ms var(--ease); }
.unlock__tap svg { width: 30px; height: 30px; display: block; }
.unlock:active .unlock__tap { transform: scale(0.9); }
.unlock__hint-tap { display: none; }
.unlock__label {
  position: relative;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-10px);
  /* leaving: retract promptly */
  transition: max-width 300ms var(--ease), opacity 200ms var(--ease), transform 300ms var(--ease);
}
.unlock__hint {
  font-size: 12px; letter-spacing: 0; font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.42);
  transition: opacity 320ms var(--ease);
}

/* hover + keyboard-focus both unlock: the padlock opens, then fades and
   collapses out of the way as the label grows into its place */
.unlock:hover, .unlock:focus-visible {
  background: var(--color-pink);
  border-color: var(--color-pink);
  transform: scale(1.06);
  box-shadow: 0 18px 44px rgba(255, 149, 165, 0.34);
  min-width: 460px;
  color: var(--btn-primary-text);
}
/* 1. the shackle lifts straight away and holds open */
.unlock:hover .unlock__shackle,
.unlock:focus-visible .unlock__shackle { transform: translateY(-3px) rotate(-30deg); }
/* 2. only then does the lock dissolve and collapse */
.unlock:hover .unlock__lock,
.unlock:focus-visible .unlock__lock {
  width: 0; opacity: 0; transform: scale(0.6) rotate(-12deg);
  transition: width 420ms var(--ease) 260ms, opacity 340ms var(--ease) 260ms,
              transform 420ms var(--ease) 260ms;
}
/* 3. and the label grows into the space it left */
.unlock:hover .unlock__label,
.unlock:focus-visible .unlock__label {
  max-width: 560px; opacity: 1; transform: translateX(0);
  transition: max-width 460ms var(--ease) 520ms, opacity 300ms var(--ease) 560ms,
              transform 460ms var(--ease) 520ms;
}
.unlock:hover ~ .unlock__hint, .unlock:focus-visible ~ .unlock__hint { opacity: 0; }
.unlock__body-pad { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* --------------------------------------------------------------------------
   12. REQUEST FORM MODAL
   -------------------------------------------------------------------------- */
.form-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0);
  display: grid; place-items: center;
  padding: var(--s24);
  visibility: hidden;
  transition: background 420ms var(--ease), visibility 0s 420ms;
  overflow-y: auto;
}
.form-overlay.is-open {
  background: rgba(28, 44, 86, 0.26);
  visibility: visible;
  transition: background 420ms var(--ease), visibility 0s;
}

.modal {
  position: relative;
  width: 100%; max-width: 600px;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-deep);
  padding: var(--s40);
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transition: opacity 380ms var(--ease), transform 520ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
              max-width 420ms var(--ease);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.form-overlay.is-open .modal { opacity: 1; transform: scale(1) translateY(0); }

.modal__close {
  position: absolute; top: var(--s16); right: var(--s16);
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center; cursor: pointer;
  color: var(--color-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { background: var(--color-cream); color: var(--color-blue); }

.modal__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s32); }
.modal__title { font-size: var(--text-heading-sm); letter-spacing: -0.48px; font-weight: var(--fw-medium); }
.modal__sub { font-size: var(--text-caption); color: var(--color-muted); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s16); }
.field__label { font-size: var(--text-caption); font-weight: var(--fw-medium); }
.field__label span { color: var(--color-muted); font-weight: var(--fw-regular); }
.field__input {
  width: 100%;
  background-color: var(--color-cream);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-size: var(--text-body); letter-spacing: var(--tracking-body);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__input::placeholder { color: #7C86A5; }
.field__input:hover { background-color: #FFF2CF; }
.field__input:focus { outline: none; border-color: var(--color-blue); background-color: var(--color-paper); }
.field__input.is-error { border-color: var(--color-alert); background-color: #FFF0F3; }
textarea.field__input { min-height: 128px; resize: vertical; }
select.field__input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><path d='M1.4 1.6L7 7.2L12.6 1.6' fill='none' stroke='%23425B9A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 13px 9px;
}
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
.field__error { font-size: 12px; color: var(--color-alert); min-height: 0; }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; pointer-events: none; }

.modal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); margin-top: var(--s24); }
.modal__note { font-size: 12px; color: var(--color-muted); flex: 1 1 220px; }

/* success state — the card contracts so the confirmation reads as one column */
.modal.is-sent { max-width: 470px; }
.modal__success { display: none; flex-direction: column; gap: var(--s16); align-items: flex-start; }
.modal__success > * { max-width: 42ch; }
.modal__success .mono {
  width: 100%; max-width: 100%; padding-top: var(--s16);
  border-top: 1px solid var(--color-hair); color: var(--color-muted);
}
.modal.is-sent .modal__form,
.modal.is-sent .modal__head { display: none; }
.modal.is-sent .modal__success { display: flex; }
.success__mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-pink-tint); color: var(--color-sky);
  display: grid; place-items: center;
}
.success__mark svg { width: 22px; height: 22px; }

/* submit button state */
.btn--primary[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--color-paper); padding-block: var(--s64) var(--s40); margin-top: var(--section-gap); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s40); }
.footer__brand { font-size: var(--text-subheading); font-weight: var(--fw-medium); letter-spacing: -0.4px; display: flex; align-items: center; gap: 10px; }
.footer__blurb { font-size: var(--text-caption); color: var(--color-muted); margin-top: var(--s16); max-width: 34ch; }
.footer__col-title { font-size: var(--text-caption); font-weight: var(--fw-medium); margin-bottom: var(--s16); }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: var(--text-caption); color: var(--color-muted); transition: color var(--dur) var(--ease); }
.footer__links a:hover { color: var(--color-blue); }
.footer__bottom {
  margin-top: var(--s48); padding-top: var(--s24);
  border-top: 1px solid var(--color-hair);
  display: flex; flex-wrap: wrap; gap: var(--s16); align-items: center;
  font-size: 12px; color: var(--color-muted);
}
.footer__bottom .spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   14. REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
/* between the phone stack and full width the nav needs less to hold on to:
   brand + 4 links + email + button came to 940px and pushed the page wide */
@media (max-width: 1020px) {
  .nav__cta .nav__link { display: none; }
  .nav__links { gap: var(--s16); }
  .nav__inner { gap: var(--s16); }
  .nav__brand { font-size: 18px; }
  .nav__mark { width: 22px; height: 22px; }
  .morph--nav { width: 140px; height: 31px; --morph-size: 24.4px; }
}

@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .panels { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The desktop simulation stops behaving like a desktop well before its own
   stack threshold: the sim is 82px narrower than the viewport (container +
   mockup padding), and it only fits as a scaled desktop at 820px of that
   width — so below ~902px of viewport desktop.js reflows it into the stacked
   list, which reads as a mess on a phone. From 920px down the whole workspace
   block is hidden, along with every link that would scroll to it (they would
   otherwise be dead anchors). Move the number to change where the simulation
   gives out. */
@media (max-width: 920px) {
  #workspace,
  #workspace:target,
  html.ws-open #workspace,
  .hero__actions a[href="#workspace"],
  .nav__link[href="#workspace"],
  .footer__links a[href="#workspace"] { display: none; }
}
@media (max-width: 760px) {
  :root {
    --text-display: 40px; --leading-display: 1.06; --tracking-display: -0.8px;
    --text-heading: 30px; --tracking-heading: -0.6px;
    --section-gap: 56px; --card-pad: 24px;
  }
  /* The service cards become a bullet list: the photograph goes, and each
     service is marked with its own icon from the icons folder at bullet size,
     so the six read at a glance instead of as six screens of card. Clicking
     one still turns it over to its bullets and its request button. */
  .tiles { display: flex; flex-direction: column; gap: 0; perspective: none; }
  .tile {
    display: block; padding: 0;
    border-top: 1px solid var(--color-hair);
  }
  .tile:first-child { border-top: 0; }
  /* the flip follows its taller face here too, and the bullet's inset moves
     onto the faces so both are inset the same way */
  .tile__flip { height: auto; }
  .tile, .tile__flip { transform-style: flat; will-change: auto; }
  .tile.is-flipped .tile__flip { transform: none; }
  .tile__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .tile__face--back { transform: none; display: none; }
  .tile.is-flipped .tile__face--back { display: flex; }
  .tile.is-flipped .tile__face--front { display: none; }
  .tile__face { border-radius: 0; box-shadow: none; background: none; padding: 16px 0 16px 46px; }
  .tile__face--back { background: none; gap: 8px; }
  /* the card back on a phone: the kicker goes (the title carries it), two
     bullets instead of four, and the button sits right under them */
  .tile__kicker { display: none; }
  .tile__points li:nth-child(n+3) { display: none; }
  .tile__points { gap: 6px; margin-top: 0; }
  .tile__actions { margin-top: 10px; gap: 8px; align-items: flex-start; }
  .tile__cta, .tile__demo { width: auto; font-size: var(--text-caption); padding: 12px 16px; }
  .tile__media { display: none; }
  .tile__body { display: block; padding: 0; transform: none; }
  .tile__face--back .tile__title { font-size: 17px; }
  .tile__face--back .tile__points li { font-size: 13px; }
  .tile__title { font-size: 17px; }
  .tile__desc { margin-top: 4px; font-size: 13px; }
  .tile__meta {
    margin-top: 8px; padding-top: 0;
    font-size: 12px;
  }
  .tile__meta .arrow { display: none; }
  /* out of the category row, and out to the left as the bullet marker */
  .tile .tile__meta .ico {
    position: absolute; left: 0; top: 14px;
    width: 30px; height: 30px; filter: none; opacity: 1;
  }
  /* On a phone the unlock button has no hover to give away, so the padlock
     becomes a finger tapping, and the label it used to reveal on hover is
     simply shown. */
  .unlock__lock { display: none; }
  .unlock__tap { display: grid; place-items: center; }
  .unlock__label { max-width: none; opacity: 1; overflow: visible; transform: none; }
  .unlock__hint-hover { display: none; }
  .unlock__hint-tap { display: inline; }
  .nav__links { display: none; }
  .nav__inner { height: 64px; gap: var(--s16); }
  .nav__brand { font-size: 18px; gap: 8px; }
  .nav__mark { width: 22px; height: 22px; }
  .nav__cta .nav__link { display: none; }
  .nav__cta .btn { font-size: var(--text-caption); padding: 8px 12px; }
  .tiles { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--s32); }
  .field__row { grid-template-columns: 1fr; }
  .unlock { min-width: 100%; padding: 20px 24px; }
  .unlock:hover, .unlock:focus-visible { min-width: 100%; transform: scale(1.02); }
  .mockup { padding: var(--s8); border-radius: var(--radius-image); }
}

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

/* --------------------------------------------------------------------------
   17. ATMOSPHERE, WORDMARK, HERO OBJECT, MELT
   -------------------------------------------------------------------------- */

/* ambient shape field (assets/js/atmosphere.js) */
#atmosphere {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.site { position: relative; z-index: 1; }
.site-end { display: none; }

.melt-canvas {
  position: fixed; inset: 0; z-index: 89;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--melt, 0);
  visibility: hidden;
  --melt-check: var(--color-blue);
  --melt-ground: var(--color-cream);
  background: var(--melt-ground);
  perspective: 600px;
  perspective-origin: 50% 38%;
}
.melt-canvas.is-on { visibility: visible; }
.melt-floor {
  position: absolute;
  left: -60%; bottom: -30%;
  width: 200%; height: 150%;
  transform-origin: center center;
  transform: rotateX(75deg);
  background-image:
    conic-gradient(from 0deg,
      var(--melt-check) 0 25%, var(--melt-ground) 0 50%,
      var(--melt-check) 0 75%, var(--melt-ground) 0);
  background-size: 100px 100px;
  background-position: 0 0;
  animation: melt-scroll 6s linear infinite;
}
.melt-floor::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background-image: linear-gradient(var(--melt-ground) 0 58%, transparent 78%);
}
@keyframes melt-scroll {
  to { background-position: 0 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .melt-floor { animation-play-state: paused; }
}

/* inline XP icon pack used as emoji-weight marks */
.ico {
  display: inline-block;            /* the reset makes img a block; these sit in text */
  width: 22px; height: 22px; flex: none;
  object-fit: contain;
  vertical-align: middle;
}
.ico--sm { width: 14px; height: 14px; vertical-align: middle; opacity: 0.9; }
.hero__fact .ico { width: 42px; height: 42px; margin: 0; filter: drop-shadow(0 3px 8px rgba(20, 32, 64, 0.45)); }
.panel__title { display: flex; align-items: center; gap: 12px; }
.panel__title .ico { width: 22px; height: 22px; flex: none; }
.eyebrow .ico { width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; }
.tile__meta .ico { width: 13px; height: 13px; filter: saturate(0.86); opacity: 0.85; }
.footer__col-title { display: flex; align-items: center; gap: 8px; }

/* the footer wordmark — the gooey canvas is gone, replaced by a CSS3
   text-shadow treatment: sitetemp/css3-text-shadow-effects.zip, pen "CSS3
   text-shadow effects" (juanbrujo, MIT). The pen ships four stacks; the footer
   is a small mark on a white ground, so this is its `retroshadow` — a hard
   shadow in the ground colour that cuts the word out of its own shadow, then a
   translucent layer behind it — set in the box the canvas used to fill so the
   footer lays out exactly as before.
   Two adaptations, both forced by the ground: the pen's cut layer is its own
   background (#d5d5d5) and its outer layer is black at 20%, which on the
   pen's mid-grey ground reads as a strong band. On white a ground-coloured cut
   is invisible and 20% black is a whisper — the pair collapses into what looks
   like a ghosted duplicate — so the cut takes the palest palette tint and the
   band takes the blue-deep at a higher alpha. Offsets are the pen's, verbatim.
   Its other three, re-tinted to this palette, if one is wanted here:
     deepshadow    → color:#FFF6DC; text-shadow: 0 1px 0 #FFF, 0 2px 0 … 0 15px 0 #2C3E6B block … , 0 22px 30px rgba(44,62,107,.9)
     insetshadow   → color:#425B9A; text-shadow: -1px -1px 1px rgba(44,62,107,.75), 2px 2px 1px rgba(118,192,236,.85)
     elegantshadow → the 28-step ramp, 1px steps to -28px 56px; it is built for 92px
                     type on a light ground and would smear ~18px below this mark. */
.shadowmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 160px; height: 36px;
  font-size: 29px; font-weight: 600; letter-spacing: -0.4px;
  white-space: nowrap;
  color: var(--color-blue);
  text-shadow: 4px 4px 0 var(--color-sky-tint), 7px 7px 0 rgba(44, 62, 107, 0.45);
}

/* the morphing wordmark (assets/js/text-morph.js) — nav brand.
   Two copies of the word are blurred in opposite phase and fused by a
   threshold filter; the box keeps the size the SVG-filtered mark had, so the
   nav lays out exactly as before. --morph-size tracks the box width. */
.morph { position: relative; display: inline-block; }
.morph--nav { width: 172px; height: 38px; --morph-size: 30px; }
.morph__word {
  display: grid; place-items: center;
  font-size: var(--morph-size, 30px); font-weight: 600; letter-spacing: -0.4px;
  white-space: nowrap;
  transition: none;
}
.morph__word:not(.morph__word--from):not(.morph__word--to) { height: 100%; }
/* the live copies get room to blur into (their own filter region, plus the
   threshold region on the host) — the box is invisible, nothing may clip */
.morph__word--from, .morph__word--to {
  position: absolute; left: 0; right: 0; top: -14px; bottom: -14px;
}
.morph.is-live.is-morphing { filter: url(#morph-threshold) blur(0.6px); }
.morph.is-live > .morph__word:not(.morph__word--from):not(.morph__word--to) { visibility: hidden; }
.lite *, .lite *::before, .lite *::after { animation: none !important; transition-duration: 0.01ms !important; }
.morph__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the rotating object in the hero's right field (assets/js/hero-object.js) */
.hero__object {
  position: absolute; z-index: 1;
  right: 1.5%; top: 50%;
  width: 40%; max-width: 560px; min-width: 300px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 1080px) {
  .hero__object { right: -4%; width: 48%; opacity: 0.5; }
}
@media (max-width: 760px) {
  .morph--nav { width: 132px; height: 30px; --morph-size: 23px; }
  .hero__object { right: -30%; top: 30%; width: 86%; opacity: 0.4; }
  .panel__title .ico { width: 22px; height: 22px; }
}

@font-face { font-family: "Alagard"; src: url("../fonts/alagard.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Tattoo Ink"; src: url("../fonts/tattoo-ink.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jasendira"; src: url("../fonts/Jasendira-Regular.ttf") format("truetype"); font-display: swap; }

.nav__tab { background: none; border: 0; padding: 0; font-family: inherit; line-height: inherit; cursor: pointer; }

.modal--sites { max-width: 820px; }
.sites__label { display: flex; align-items: center; gap: var(--s16); margin: var(--s24) 0 var(--s16); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); }
.sites__label::after { content: ""; flex: 1; height: 1px; background: var(--color-hair); }
.modal__head + .sites__label { margin-top: 0; }
.sites__row { display: grid; gap: var(--s16); }
.sites__row--3 { grid-template-columns: repeat(3, 1fr); }
.sites__tile {
  display: grid; place-items: center; text-align: center;
  min-height: 150px; padding: var(--s24);
  border-radius: var(--radius-image);
  box-shadow: 0 0 0 1px var(--color-hair), var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sites__tile:hover, .sites__tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.sites__tile img { display: block; width: 100%; max-width: 230px; height: auto; }

.sites__tile--pj { min-height: 190px; background: linear-gradient(180deg, #f1e9d8, #faf6ec 85%); }
.pj {
  position: relative; isolation: isolate; display: block;
  font-family: "Jasendira", cursive, serif; font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.12; letter-spacing: 0.03em;
  color: #e8b923;
}
.pj span { position: absolute; inset: 0; pointer-events: none; }
.pj::before, .pj::after, .pj span::before, .pj span::after {
  content: attr(data-heading); position: absolute; left: 0; top: 0; width: 100%;
  font: inherit; letter-spacing: inherit; text-align: center; pointer-events: none;
}
.pj::before { z-index: 5; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.011em #fffdf7; }
.pj::after { z-index: 4; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.026em #4a3a28; }
.pj span::after { z-index: -1; color: #8a6410; text-shadow: 0 0.012em 0 rgba(74, 58, 40, 0.12); transform: translate(0.024em, 0.032em); }
.pj span::before {
  z-index: -2; -webkit-text-fill-color: transparent;
  text-shadow: 0.036em 0.048em 0 #7a5810, 0.044em 0.058em 0 #6f4f0c, 0.052em 0.068em 0 #634708,
    0.06em 0.078em 0 #573f06, 0.068em 0.088em 0 #4b3704, 0.09em 0.12em 0.055em rgba(74, 58, 40, 0.28);
}

.sites__tile--ask { background: linear-gradient(180deg, #2f7fc4, #76c0ec); }
.sites__ask {
  font-family: "Alagard", "Inter", sans-serif; font-size: 30px; line-height: 1.08; color: #fff; text-wrap: balance;
  -webkit-font-smoothing: none;
  text-shadow: 1px 1px 0 #2a6fb3, 2px 2px 0 #2a6fb3, 3px 3px 0 #235f9f, 4px 4px 0 #1b4f88, 5px 5px 0 #16427a,
    6px 6px 0 #16427a, 8px 12px 14px rgba(6, 30, 64, 0.55);
}

.sites__tile--cactus { background: #eaf2ea; }
.sites__cactus {
  font-family: "Tattoo Ink", "Inter", sans-serif; font-size: 38px; line-height: 1.15; letter-spacing: 0.02em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0, "clig" 0, "calt" 0, "swsh" 0; color: #3f8a68; text-wrap: balance;
  text-shadow: 1px 1px 0 #2f6b52, 2px 2px 0 #2a604a, 3px 3px 0 #265643, 4px 4px 0 #214c3a, 10px 12px 10px rgba(24, 58, 44, 0.4);
}

.sites__tile--boxes { background: #f5f5f2; }
.sites__tile--boxes img { filter: drop-shadow(2px 3px 2px rgba(26, 0, 0, 0.25)); }

@media (max-width: 720px) {
  .sites__row--3 { grid-template-columns: 1fr; }
  .modal--sites { padding: var(--s32) var(--s24); }
}
.turnstile:not(:empty) { margin-top: var(--s16); min-height: 65px; }

@media (max-width: 380px) {
  .nav__inner { gap: 8px; }
  .nav__cta .btn { font-size: 12px; padding: 7px 10px; white-space: nowrap; }
  .nav__brand { gap: 6px; min-width: 0; }
}

.faq { background: var(--color-paper); border-radius: var(--radius-card); padding: var(--s40); }
.faq__title { font-size: var(--text-heading); margin-bottom: var(--s24); max-width: 32ch; }
.faq__list { display: grid; gap: var(--s8); }
.faq__item { border-radius: var(--radius-sm); background: var(--color-sky-tint); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--s16) var(--s24); font-weight: var(--fw-medium); color: var(--color-blue-deep); display: flex; justify-content: space-between; gap: var(--s16); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 1.25em; line-height: 1; color: var(--color-blue); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: var(--radius-sm); }
.faq__item p { padding: 0 var(--s24) var(--s16); font-size: var(--text-caption); line-height: 1.62; color: var(--color-ink-70); max-width: 70ch; }
@media (max-width: 720px) { .faq { padding: var(--s24); } }