/* Metric-matched fallbacks. Without these the swap from the system font to
   Manrope/Space Grotesk resized every line and shifted the hero — measured at
   0.036 CLS. Values derived from canvas fontBoundingBox metrics vs Arial. */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102.6%;
  ascent-override: 104.3%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Grotesk Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 99.2%;
  ascent-override: 98.8%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}

/* Self-hosted so the critical path never leaves this origin.
   Generated from Google Fonts; Manrope and Space Grotesk are both OFL. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Kredosys — marketing site
   Implemented from the Kredosys design component.
   Palette is switchable via <html data-palette="…"> (see the block below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Accent trio — overridden per palette below. Default: electric blue. */
  --k-red: #2563EB;   /* accent            */
  --k-tint: #E8EFFE;  /* accent wash       */
  --k-ink: #0F1424;   /* dark panel canvas */

  /* Neutrals */
  --bg: #FBFBFC;
  --surface: #fff;
  --ink: #12111A;
  --muted: #5C5A66;
  --muted-2: #6A6775;
  --muted-3: #A9A6B4;
  --line: #E9E9EE;
  --line-strong: #DDDBE4;
  --fill: #EDECF1;
  --fill-2: #EFEEF3;
  --fill-3: #E3E1E8;

  --shell: 1200px;
  --gutter: 24px;
  --radius: 16px;

  --font-display: "Space Grotesk", "Grotesk Fallback", system-ui, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Reveal travel distance — reduced when data-motion="subtle". */
  --reveal-dist: 24px;
}

[data-palette="signal red"]    { --k-red: #E4362A; --k-tint: #FDECEA; --k-ink: #12111A; }
[data-palette="electric blue"] { --k-red: #2563EB; --k-tint: #E8EFFE; --k-ink: #0F1424; }
[data-palette="deep violet"]   { --k-red: #6D3BEC; --k-tint: #EFE9FE; --k-ink: #15101F; }
[data-palette="emerald"]       { --k-red: #0E9F6E; --k-tint: #E4F6EF; --k-ink: #0D1A16; }
[data-palette="sunset orange"] { --k-red: #F2600C; --k-tint: #FEEEE4; --k-ink: #1B1310; }
[data-palette="hot pink"]      { --k-red: #E0339B; --k-tint: #FDE9F5; --k-ink: #1C1019; }
[data-palette="teal"]          { --k-red: #0D92AA; --k-tint: #E2F5F7; --k-ink: #0C1A1C; }
[data-palette="amber"]         { --k-red: #D98200; --k-tint: #FEF3E0; --k-ink: #1B1509; }
[data-palette="midnight"]      { --k-red: #1F3A8A; --k-tint: #E9EDFA; --k-ink: #0E1220; }
[data-palette="graphite"]      { --k-red: #3F3F46; --k-tint: #EFEFF1; --k-ink: #111114; }

/* darkPanels="false" in the design keeps the neutral ink panel. */
[data-dark-panels="false"] { --k-ink: #12111A; }

[data-motion="subtle"] { --reveal-dist: 12px; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Fixed header height + breathing room for anchor jumps. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.025em;
}

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

a {
  color: var(--ink);
  text-decoration: none;
}
a:hover { color: var(--k-red); }

img, svg { max-width: 100%; }

::selection { background: var(--k-red); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 20px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--k-red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Motion primitives
   -------------------------------------------------------------------------- */

@keyframes k-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes k-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* Scroll reveal.
   Elements are only hidden once we know JS is running and motion is on, so a
   no-JS visitor never loses content. JS animates each element in, then strips
   the `reveal` class so hover transforms below are not fighting this rule. */
html.js:not([data-motion="off"]) .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
}

/* Magnetic buttons — JS writes --mx / --my on pointer move. */
.magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }

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

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */

.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 104px) var(--gutter);
}
.section-narrow { max-width: 820px; }
.section-contact { padding-top: 0; }

.band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grid { display: grid; gap: 18px; }
.grid-services { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid-work     { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(34px, 4vw, 52px);
}
.section-head-narrow { max-width: 600px; margin-bottom: clamp(32px, 4vw, 48px); }

.section-title {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
}
.section-lede {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--k-red);
}
.eyebrow-on-white { background: var(--bg); }

.accent { color: var(--k-red); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 28px;
  border-radius: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .3s ease, border-color .25s ease, background .25s ease;
}

.btn-primary {
  background: var(--k-red);
  color: #fff;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--k-red) 90%, transparent);
}
.btn-primary:hover {
  color: #fff;
  box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--k-red) 95%, transparent);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  padding: 15px 24px;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn-onDark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.btn-onDark:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Solid white pill — the hero's primary action against the dark backdrop. */
.btn-light {
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8);
}
.btn-light:hover {
  color: var(--ink);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .9);
}
.hero .btn-onDark { border-radius: 999px; }

.btn-sm {
  padding: 11px 22px;
  font-size: 14.5px;
  border-radius: 999px;
  gap: 9px;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--k-red) 90%, transparent);
}
.btn-sm:hover { box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--k-red) 95%, transparent); }

.link-more {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--k-red);
}

/* --------------------------------------------------------------------------
   6. Scroll progress + header
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--k-red);
  z-index: 9999;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-header.is-stuck { box-shadow: 0 8px 26px -20px rgba(18, 17, 26, .6); }

.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.035em;
}
.logo:hover { color: var(--ink); }
.logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k-red);
  display: inline-block;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  font-size: 14.5px;
  font-weight: 600;
}
.nav a { color: var(--muted); }
.nav a:hover { color: var(--k-red); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }
/* Header sitting over the dark hero: transparent, light type. */
.site-header.is-over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.is-over-hero .logo,
.site-header.is-over-hero .logo:hover { color: #fff; }
.site-header.is-over-hero .nav a { color: rgba(255, 255, 255, .72); }
.site-header.is-over-hero .nav a:hover { color: #fff; }
.site-header.is-over-hero .nav-toggle {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}
.site-header.is-over-hero .nav-toggle-bars,
.site-header.is-over-hero .nav-toggle-bars::before,
.site-header.is-over-hero .nav-toggle-bars::after { background: #fff; }
.site-header.is-over-hero .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }

/* The open mobile panel needs its own surface once the bar is transparent. */
.site-header.is-over-hero .nav.is-open {
  background: #0C0620;
  border-bottom-color: rgba(255, 255, 255, .12);
}
.site-header.is-over-hero .nav.is-open a { border-bottom-color: rgba(255, 255, 255, .1); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  /* Every colour here is mixed from the accent token, so the hero follows
     whichever palette is set on <html>. */
  --h-void: #07040E;
  --h-rim: color-mix(in srgb, var(--k-red) 28%, #fff);

  /* Radius of the horizon circle. The service icons ride the same circle, so
     both read off this one value. --cap pins the top of the arc above the
     hero's foot; --icon-k scales the whole set at narrow widths. */
  --orbit-r: 100vw;
  /* How far the arc's apex sits above the hero's bottom edge. Lower it at
     narrow widths: the CTA stacks into two full-width buttons there, so the
     content runs taller and the arc would otherwise cut across "See our work". */
  --cap: 22%;
  --icon-k: 1;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  /* Held near black through the top half, then ramping hard — the reference
     keeps its brightness concentrated in a dome around the arc rather than
     washing the whole panel. */
  background: linear-gradient(
    180deg,
    #07051A 0%,
    #09071F 26%,
    color-mix(in srgb, var(--k-red) 16%, #0C0826) 46%,
    color-mix(in srgb, var(--k-red) 44%, #130A32) 66%,
    color-mix(in srgb, var(--k-red) 76%, #1A0C40) 84%,
    color-mix(in srgb, var(--k-red) 92%, #2A1466) 100%
  );
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Bloom sitting behind the horizon. Two passes: a wide saturated wash, then a
   tight near-white core hugging the arc, which is what gives the reference its
   blown-out rim. */
.hero-aurora {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cap) - 4%);
  width: min(105vw, 1500px);
  height: 62%;
  transform: translateX(-50%);
  background:
    radial-gradient(
      ellipse 26% 42% at 50% 100%,
      color-mix(in srgb, var(--k-red) 24%, #fff) 0%,
      color-mix(in srgb, var(--k-red) 80%, #fff) 32%,
      transparent 64%
    ),
    radial-gradient(
      ellipse 48% 84% at 50% 100%,
      color-mix(in srgb, var(--k-red) 96%, #fff) 0%,
      color-mix(in srgb, var(--k-red) 62%, transparent) 32%,
      color-mix(in srgb, var(--k-red) 22%, transparent) 58%,
      transparent 80%
    );
}

/* The planet: a dark disc whose rim catches the light. Only its top cap is
   ever on screen — the circle is far wider than the viewport. */
.horizon {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cap) - 2 * var(--orbit-r));
  width: calc(2 * var(--orbit-r));
  aspect-ratio: 1;
  /* Without this the circle hangs off the right edge — left:50% alone puts its
     left edge at the centre, not its middle. */
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 7%,
    color-mix(in srgb, var(--k-red) 20%, var(--h-void)) 0%,
    var(--h-void) 30%
  );
  box-shadow:
    0 0 0 2px var(--h-rim),
    0 0 34px 4px color-mix(in srgb, var(--k-red) 85%, transparent),
    0 0 120px 26px color-mix(in srgb, var(--k-red) 50%, transparent),
    0 0 300px 80px color-mix(in srgb, var(--k-red) 26%, transparent);
}

@property --bob {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --lean {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.svc-icons { position: absolute; inset: 0; }

/* Each icon is anchored at the centre of the horizon circle and pushed out
   to the rim by the orbit animation, so it travels the arc left to right and
   leans with it. The bob/wobble runs on its own per-icon clock (.svc-glyph)
   so no two drift alike. */
.svc-icon {
  --d-h: calc(var(--s) * var(--icon-k));

  position: absolute;
  left: 50%;
  top: calc(100% - var(--cap) + var(--orbit-r));
  width: var(--d-h);
  height: var(--d-h);
  margin: calc(var(--d-h) / -2) 0 0 calc(var(--d-h) / -2);
  animation: k-orbit 40s linear infinite;
  animation-delay: var(--d);
}

.svc-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--d-h) * 0.62);
  line-height: 1;
  color: color-mix(in srgb, var(--k-red) 30%, #fff);
  text-shadow:
    0 0 calc(var(--d-h) * 0.18) color-mix(in srgb, var(--k-red) 85%, transparent),
    0 0 calc(var(--d-h) * 0.5) color-mix(in srgb, var(--k-red) 55%, transparent);
  transform: translateY(var(--bob)) rotate(var(--lean));
  animation: k-drift var(--drift, 10s) ease-in-out infinite var(--dd, 0s);
}

/* Sweeps a coin along the horizon circle, left to right. The wrap at
   100% -> 0% happens at ±45°, well off screen. */
@keyframes k-orbit {
  0%   { transform: rotate(-45deg)   translateY(calc(-1 * var(--orbit-r))) scale(1.26); }
  25%  { transform: rotate(-22.5deg) translateY(calc(-1 * var(--orbit-r))) scale(1.11); }
  50%  { transform: rotate(0deg)     translateY(calc(-1 * var(--orbit-r))) scale(1);    }
  75%  { transform: rotate(22.5deg)  translateY(calc(-1 * var(--orbit-r))) scale(1.11); }
  100% { transform: rotate(45deg)    translateY(calc(-1 * var(--orbit-r))) scale(1.26); }
}

/* Loose bob and wobble on its own clock, so no two coins hang alike. */
@keyframes k-drift {
  0%, 100% { --bob: -7px; --lean: -8deg; }
  34%      { --bob: 10px; --lean: 6deg; }
  67%      { --bob: -2px; --lean: 10deg; }
}

/* Hero content --------------------------------------------------------- */

.hero-inner {
  position: relative;
  max-width: 1000px;
  /* Auto block margins centre the copy in the space above the arc, so a taller
     screen spreads the slack instead of piling it under the CTA. */
  margin: auto auto;
  padding: clamp(88px, min(11vw, 14vh), 150px) var(--gutter) clamp(120px, 20vh, 260px);
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--k-red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, .6vw, 8px);
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  font-weight: 700;
  line-height: 1;
}
.hero-title-sm { font-size: clamp(22px, min(3.1vw, 4.6vh), 41px); }
.hero-title-md { font-size: clamp(22px, min(3.1vw, 4.6vh), 41px); }
.hero-title-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .02em;
  font-size: clamp(46px, min(10.8vw, 16vh), 148px);
  letter-spacing: -0.045em;
  line-height: .95;
}

/* The capsule standing in for the "o". Sized in em so it tracks the type. */
.hero-o {
  display: inline-block;
  width: .95em;
  height: .5em;
  margin: 0 .04em;
  border: .112em solid currentColor;
  border-radius: 999px;
  transform: translateY(.055em);
}

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

.hero-lede {
  margin: clamp(16px, 1.9vw, 22px) auto 0;
  max-width: 60ch;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  text-wrap: pretty;
}

.hero-cta {
  margin: clamp(22px, 2.5vw, 30px) 0 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Testimonial rating. */
.stars { color: var(--k-red); font-size: 14px; letter-spacing: 2px; }
.stars-lg { font-size: 16px; letter-spacing: 3px; }

.scroll-cue {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  padding: 9px 18px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  transition: background .25s ease, border-color .25s ease;
}
.scroll-cue:hover {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
}
.scroll-cue-mouse {
  position: relative;
  width: 15px;
  height: 22px;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
}
.scroll-cue-mouse::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 2px;
  background: #fff;
  animation: k-wheel 1.9s ease-in-out infinite;
}
@keyframes k-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-mouse::after { animation: none; }

  /* The icons take their position from the orbit animation, so killing it
     outright would pile them all at the circle's centre, far below the hero.
     Freeze them into a spread along the arc instead. */
  .svc-icon {
    animation: none !important;
    transform: rotate(var(--sa)) translateY(calc(-1 * var(--orbit-r))) scale(var(--ss));
  }
  .svc-glyph { animation: none !important; transform: rotate(var(--s-lean)); }
  .svc-icon:nth-child(1) .svc-glyph, .svc-icon:nth-child(1) { --sa: -38deg; --ss: 1.2;  --s-lean: -6deg; }
  .svc-icon:nth-child(2) .svc-glyph, .svc-icon:nth-child(2) { --sa: -23deg; --ss: 1.1;  --s-lean: 4deg; }
  .svc-icon:nth-child(3) .svc-glyph, .svc-icon:nth-child(3) { --sa: -8deg;  --ss: 1.03; --s-lean: 8deg; }
  .svc-icon:nth-child(4) .svc-glyph, .svc-icon:nth-child(4) { --sa: 8deg;   --ss: 1.03; --s-lean: -9deg; }
  .svc-icon:nth-child(5) .svc-glyph, .svc-icon:nth-child(5) { --sa: 23deg;  --ss: 1.1;  --s-lean: 3deg; }
  .svc-icon:nth-child(6) .svc-glyph, .svc-icon:nth-child(6) { --sa: 38deg;  --ss: 1.2;  --s-lean: -7deg; }

}

/* --------------------------------------------------------------------------
   8. Client marquee
   -------------------------------------------------------------------------- */

.marquee-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 0;
  overflow: hidden;
}
.marquee {
  display: flex;
  width: max-content;
  animation: k-marquee 36s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-2);
  white-space: nowrap;
}
.marquee-track .sep { color: var(--k-red); }

@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */

.service-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.service-card:hover {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -26px rgba(18, 17, 26, .4);
  border-color: var(--line-strong);
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--k-tint);
  color: var(--k-red);
  font-size: 18px;
  margin-bottom: 16px;
}
.service-card h3 { font-size: 20px; font-weight: 700; }
.service-card p {
  margin: 9px 0 0;
  font-size: 14.8px;
  line-height: 1.6;
  color: var(--muted);
}
.service-card .link-more { margin-top: 16px; }

/* --------------------------------------------------------------------------
   10. 360° studio
   -------------------------------------------------------------------------- */

.split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 104px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(34px, 4.5vw, 60px);
  align-items: center;
}
.split-title { max-width: 15ch; }
.split-lede { max-width: 46ch; }

.checklist {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 24px 0 0;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
}
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--k-tint);
  color: var(--k-red);
  font-size: 11px;
}
.split .btn { margin-top: 28px; }

.tour-list { display: grid; gap: 16px; }
.tour-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.tour-item:hover {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -26px rgba(18, 17, 26, .4);
}
.tour-thumb {
  display: block;
  width: 108px;
  height: 78px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: var(--fill-2);
}
.tour-meta { flex: 1; min-width: 0; }
.tour-name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.tour-sub {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 3px;
}

.tour-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 6px 0;
}
.tour-card-meta h3 { font-size: 19px; font-weight: 700; }
.tour-scenes { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.tour-card-loc {
  margin: 5px 6px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.how-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.tours-contact { padding-top: clamp(56px, 7vw, 96px); }


@media (max-width: 560px) {
  .tour-filters { padding: 12px 0; }
  .tour-count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-card:hover .tour-still { transform: none; }
}


/* --------------------------------------------------------------------------
   11. Work
   -------------------------------------------------------------------------- */

.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.work-head .link-more { font-size: 14.5px; }

.work-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.work-card:hover {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -28px rgba(18, 17, 26, .45);
}

.work-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--fill-2);
}
.work-img {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 280px);
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.work-img-short { height: clamp(180px, 21vw, 240px); }
.work-card:hover .work-img { transform: scale(1.05); }
.work-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.work-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 6px 0;
}
.work-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}
.work-year { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.work-desc {
  margin: 7px 6px 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .work-card:hover .work-img { transform: none; }
}

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */

.band-tight .stats {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 24px;
}
.stat { text-align: center; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   13. Tixibo — hero product
   -------------------------------------------------------------------------- */

/* Dark band, echoing the hero, so the flagship product reads as its own thing
   in the middle of the light marketing sections. */
.tixibo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    170deg,
    var(--k-ink) 0%,
    color-mix(in srgb, var(--k-red) 16%, var(--k-ink)) 58%,
    color-mix(in srgb, var(--k-red) 30%, var(--k-ink)) 100%
  );
}
.tixibo-glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 900px;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--k-red) 38%, transparent),
    transparent 62%
  );
}

.tixibo-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 108px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(38px, 5vw, 68px);
  align-items: center;
}

.eyebrow-dark {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: color-mix(in srgb, var(--k-red) 26%, #fff);
}

.tixibo-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
}
.tixibo-mark {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: clamp(46px, 5.4vw, 74px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.tixibo-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--k-red) 34%, #fff);
  flex: none;
}
.tixibo-kicker {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--k-red) 24%, #fff);
}

.tixibo-lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  text-wrap: pretty;
}

.tixibo-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 30px 0 0;
}
.tixibo-feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.tixibo-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: color-mix(in srgb, var(--k-red) 30%, #fff);
  font-size: 16px;
}
.tixibo-feature h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tixibo-feature p {
  margin: 5px 0 0;
  max-width: 46ch;
  font-size: 14.8px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}
.tixibo-feature p b { color: #fff; font-weight: 700; }

.tixibo-cta {
  margin: 32px 0 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.tixibo .btn-light { border-radius: 999px; }

.tixibo-by {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .42);
}

/* Product mock ---------------------------------------------------------- */

.tixibo-visual { position: relative; }

.tx-window {
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 60px 90px -34px rgba(0, 0, 0, .7),
    0 24px 40px -28px color-mix(in srgb, var(--k-red) 45%, transparent);
}
.tx-bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.tx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-3); }
.tx-url {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  flex: 1;
  height: 24px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}
.tx-lock { font-size: 9px; filter: grayscale(1); opacity: .55; }

.tx-body { padding: 18px; }

.tx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tx-logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--k-red);
  flex: none;
}
.tx-lines { display: flex; flex-direction: column; gap: 5px; }
.tx-lines span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--fill);
}
.tx-lines span:first-child { width: 84px; background: var(--fill-3); }
.tx-lines span:last-child { width: 52px; }

.tx-event {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.tx-poster {
  display: block;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.tx-detail { display: flex; flex-direction: column; justify-content: center; }
.tx-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--k-red);
}
.tx-name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tx-venue {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.tx-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.tx-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.tx-tier-on {
  border-color: var(--k-red);
  background: var(--k-tint);
}
.tx-tier-name { color: var(--muted); font-weight: 600; }
.tx-tier-on .tx-tier-name { color: var(--ink); font-weight: 700; }

.tx-checkout {
  margin-top: 14px;
  padding: 13px;
  border-radius: 11px;
  background: var(--k-red);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
}

.tx-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .65);
}
.tx-card-tr { top: -22px; right: -14px; }
.tx-card-bl { bottom: -34px; left: -18px; }
.tx-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: #EAF6EE;
  color: #1F7A44;
  font-size: 14px;
}
.tx-card-icon-alt { background: var(--k-tint); color: var(--k-red); }
.tx-card-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.tx-card-value {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   14. Testimonial
   -------------------------------------------------------------------------- */

.quote {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 92px) var(--gutter);
  text-align: center;
}
.quote blockquote {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.quote-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.quote-avatar {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
}
.quote-by > span:last-child { text-align: left; }
.quote-name { display: block; font-weight: 700; font-size: 15px; }
.quote-role {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease;
}
.faq-item.is-open { border-color: color-mix(in srgb, var(--k-red) 30%, #fff); }
.faq-item h3 { margin: 0; font-size: inherit; letter-spacing: normal; }

.faq-q {
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
.faq-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--k-tint);
  color: var(--k-red);
  font-size: 14px;
  transition: transform .35s ease;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(135deg); }

/* 0fr -> 1fr keeps the animation correct at any width, unlike a fixed
   max-height measured in JS. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* Keeps collapsed answers out of the tab order and the a11y tree. The delay
   holds them visible for the length of the collapse animation. */
.faq-a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .4s;
}
.faq-item.is-open .faq-a-inner {
  visibility: visible;
  transition: visibility 0s 0s;
}
.faq-a p {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* No JS: show every answer rather than hiding content behind a dead button. */
html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a-inner { visibility: visible; }
html:not(.js) .faq-icon { display: none; }
html:not(.js) .faq-q { cursor: default; }

/* --------------------------------------------------------------------------
   16. Contact CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--k-ink);
  color: #fff;
  padding: clamp(44px, 6vw, 76px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.cta-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--k-red) 34%, transparent),
    color-mix(in srgb, var(--k-red) 0%, transparent) 62%
  );
  pointer-events: none;
}
.cta-title {
  position: relative;
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.08;
  font-weight: 700;
}
.cta-lede {
  position: relative;
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-3);
}
.cta-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.cta .btn-primary { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--k-red) 90%, transparent); }
.cta .btn-primary:hover { box-shadow: 0 22px 46px -12px var(--k-red); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 5vw, 64px) var(--gutter) 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand { max-width: 30ch; }
.footer-logo { margin-bottom: 12px; }
.footer-brand p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}
.footer-col a { color: var(--muted); }
.footer-heading {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: normal;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -30px rgba(18, 17, 26, .6);
    font-size: 16px;

    /* Collapsed by default; .is-open reveals it. */
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: none; }

  /* Every icon shares one orbit, so hiding any of them would leave a gap in
     the procession — scale the whole set down instead. */
  .hero { --icon-k: .92; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }

  .header-inner { gap: 12px; }
  .btn-sm { padding: 10px 16px; font-size: 13.5px; }

  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }

  /* Phones stack the CTA into two full-width buttons, so the copy runs taller
     and the arc needs to sit lower to clear it. */
  .hero {
    --icon-k: .84;
    --cap: 21%;
  }
  .hero-inner {
    padding-top: 84px;
    padding-bottom: clamp(88px, 14vh, 150px);
  }

  .tour-item { flex-wrap: wrap; }
  .tour-thumb { width: 100%; height: 128px; }
  .tour-meta { flex-basis: 60%; }

  .quote-by { flex-direction: column; text-align: center; }
  .quote-by > span:last-child { text-align: center; }
}

/* Short phones (SE / mini class). Stacking the two CTA buttons costs ~120px of
   height, which on a 667px screen squeezed the arc up against them. Side by
   side they fit the width fine and give the arc its breathing room back. */
@media (max-width: 560px) and (max-height: 720px) {
  .hero-cta { gap: 10px; }
  .hero-cta .btn {
    flex: 0 1 auto;
    padding: 13px 18px;
    font-size: 14.5px;
  }
  .hero-inner { padding-top: 78px; }
}

/* --------------------------------------------------------------------------
   19. Blog
   -------------------------------------------------------------------------- */

/* Pages without a dark hero start the header in its light state. */
.page-head {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(112px, 12vw, 152px) var(--gutter) clamp(30px, 4vw, 48px);
}
.page-head-center { text-align: center; max-width: 760px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}
.breadcrumb a { color: var(--muted-2); }
.breadcrumb a:hover { color: var(--k-red); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.breadcrumb ol { display: contents; }

.page-title {
  margin: 14px 0 0;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  font-weight: 700;
  text-wrap: balance;
}
.page-lede {
  margin: 16px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.page-head-center .page-lede { margin-inline: auto; }

/* Category filter ------------------------------------------------------- */

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: clamp(24px, 3vw, 34px) 0 0;
}
.topic {
  padding: 8px 15px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.topic:hover { color: var(--ink); border-color: var(--line-strong); }
.topic[aria-pressed="true"] {
  background: var(--k-red);
  border-color: var(--k-red);
  color: #fff;
}

/* Post cards ------------------------------------------------------------ */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 104px);
}
.post-grid[hidden] { display: none; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.post-card:hover {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -28px rgba(18, 17, 26, .42);
  border-color: var(--line-strong);
}
.post-card-cover {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  background: var(--fill-2);
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.post-card h2,
.post-card h3 {
  margin: 10px 0 0;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 700;
}
.post-card p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.post-card .post-meta { margin-top: auto; padding-top: 16px; }

.kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--k-tint);
  color: var(--k-red);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.post-meta .dot { color: var(--line-strong); }

/* Article --------------------------------------------------------------- */

.post {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 7vw, 88px);
}
.post-cover {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 320px);
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.post-body { font-size: 17px; line-height: 1.72; color: #2A2833; }
.post-body > * + * { margin-top: 1.15em; }

.post-body h2 {
  margin-top: 1.9em;
  font-size: clamp(23px, 2.4vw, 29px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  scroll-margin-top: 96px;
}
.post-body h3 {
  margin-top: 1.6em;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.3;
  font-weight: 700;
}
.post-body p { text-wrap: pretty; }
.post-body a {
  color: var(--k-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--k-red) 35%, transparent);
}
.post-body a:hover { text-decoration-color: var(--k-red); }
.post-body strong { font-weight: 700; color: var(--ink); }

.post-body ul,
.post-body ol {
  padding-left: 1.35em;
  list-style: disc;
}
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: .5em; }
.post-body li::marker { color: var(--k-red); }

.post-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--k-red);
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink);
}

.post-body figure { margin: 0; }
.post-body figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted-2);
}

.table-wrap { overflow-x: auto; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.post-body th,
.post-body td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.post-body th {
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  white-space: nowrap;
}

.callout {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--k-red);
  border-radius: 0 12px 12px 0;
  background: var(--surface);
  font-size: 15.5px;
  line-height: 1.6;
}
.callout p { margin: 0; }
.callout p + p { margin-top: .7em; }

/* Article FAQ ----------------------------------------------------------- */

.post-faq { margin-top: 2em; }
.post-faq h3 {
  font-size: 17.5px;
  margin-top: 1.4em;
}
.post-faq h3 + p { margin-top: .5em; }

/* Footer of an article --------------------------------------------------- */

.post-cta {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(26px, 4vw, 36px);
  border-radius: 18px;
  background: var(--k-ink);
  color: #fff;
  text-align: center;
}
.post-cta h2 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2;
  font-weight: 700;
}
.post-cta p {
  margin: 10px auto 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted-3);
}
.post-cta .btn { margin-top: 20px; }

.related {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 96px);
}
.related h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  margin-bottom: 20px;
}
.related .post-grid { padding: 0; max-width: none; }

/* Footer blog column ------------------------------------------------------ */

.footer-col .footer-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-2);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   20. 360° tour portfolio
   -------------------------------------------------------------------------- */

.tours-hero .pill { margin-top: 14px; }
.tours-hero .page-title { margin-top: 20px; max-width: 20ch; margin-inline: auto; }


.tours-portfolio {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 104px);
}

.tour-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 16px 0;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.tour-count {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-2);
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 18px;
}

.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.tour-card[hidden] { display: none; }
.tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -28px rgba(18, 17, 26, .45);
  border-color: var(--line-strong);
}

/* The whole still is the trigger, so it has to be a real button. */
.tour-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fill-2);
}
.tour-still {
  display: block;
  width: 100%;
  height: clamp(200px, 22vw, 260px);
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.tour-card:hover .tour-still { transform: scale(1.05); }

.tour-tag {
  position: absolute;
  top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.tour-tag { left: 12px; background: rgba(255, 255, 255, .94); color: var(--muted); }


.tour-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 6px 0;
}
.tour-card-meta h3 { font-size: 19px; font-weight: 700; }
.tour-scenes { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.tour-card-loc {
  margin: 5px 6px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.how-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.tours-contact { padding-top: clamp(56px, 7vw, 96px); }


@media (max-width: 560px) {
  .tour-filters { top: 62px; padding: 12px 0; }
  .tour-count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-card:hover .tour-still { transform: none; }
}

/* --------------------------------------------------------------------------
   21. 360° ring — the panels sit on a real CSS-3D cylinder
   -------------------------------------------------------------------------- */

.ring-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 5vw, 56px) 0 clamp(44px, 6vw, 72px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, color-mix(in srgb, var(--k-red) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--k-red) 5%, var(--bg)));
}

.ring-stage {
  /* Radius that puts N panels edge to edge on the cylinder:
     r = w / (2·tan(π/N)). For 8 panels that is w × 1.207. */
  --panel-w: clamp(148px, 20vw, 250px);
  --panel-h: calc(var(--panel-w) * 0.66);
  --ring-r: calc(var(--panel-w) * 1.207);

  position: relative;
  height: calc(var(--panel-h) + 90px);
  perspective: 1300px;
  perspective-origin: 50% 44%;
  cursor: grab;
  touch-action: pan-y;
}
.ring-stage.is-dragging { cursor: grabbing; }

.ring {
  position: absolute;
  left: 50%;
  top: 26px;
  width: var(--panel-w);
  height: var(--panel-h);
  margin-left: calc(var(--panel-w) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}

.ring-panel {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--k-red) 22%, var(--line));
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* Sit the panel on the rim, facing outward. */
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--ring-r));
  box-shadow: 0 22px 40px -26px rgba(18, 17, 26, .6);
  transition: border-color .3s ease, box-shadow .3s ease;
  /* Backface culling would hide the far panels entirely; instead they simply
     read as darker via the overlay below. */
  backface-visibility: hidden;
}
.ring-panel:hover,
.ring-panel:focus-visible {
  border-color: var(--k-red);
  box-shadow: 0 26px 48px -22px color-mix(in srgb, var(--k-red) 55%, transparent);
}
.ring-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ring-panel-name,
.ring-panel-loc {
  position: absolute;
  left: 12px;
  display: block;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  text-align: left;
}
.ring-panel-name {
  bottom: 26px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ring-panel-loc {
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  opacity: .82;
}

/* Soft shadow the cylinder appears to stand on. */
.ring-floor {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: calc(var(--ring-r) * 2.3);
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--k-red) 30%, transparent), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.ring-hint {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}

/* Spec grid --------------------------------------------------------------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin: 0;
}
.spec {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.spec dt {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--k-red);
}
.spec dd {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}
.spec dd strong { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ring-stage { cursor: default; }
}

/* --------------------------------------------------------------------------
   22. Branding & Social portfolio (social-media.html)
   -------------------------------------------------------------------------- */

.sm-hero .page-title { margin-top: 20px; max-width: 18ch; margin-inline: auto; }
.sm-hero .page-lede a {
  color: var(--k-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Rails ------------------------------------------------------------------- */

/* Both portfolio sections are the same machine: a horizontal scroll-snap track
   with a pair of buttons. Only the card aspect and the surface differ. */
.sm-rail-wrap { position: relative; }

.sm-rail-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 16px;
}
.sm-rail-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.sm-rail-btn:hover { background: var(--fill); border-color: var(--muted-3); }
.sm-rail-btn[disabled] { opacity: .32; cursor: default; }

.sm-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Bleed to the viewport edge so the last card is not clipped by the gutter. */
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 22px;
  scrollbar-width: thin;
}
.sm-rail::-webkit-scrollbar { height: 6px; }
.sm-rail::-webkit-scrollbar-track { background: transparent; }
.sm-rail:focus-visible { outline: 2px solid var(--k-red); outline-offset: 4px; border-radius: 8px; }

.sm-rail > * { scroll-snap-align: start; }

.sm-rail-hint { margin-top: 0; }

/* Posts ------------------------------------------------------------------- */

.sm-section .section-head { margin-bottom: clamp(26px, 3vw, 36px); }

.sm-post-rail { scrollbar-color: var(--line-strong) transparent; }
.sm-post-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.sm-post {
  flex: 0 0 clamp(228px, 62vw, 274px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.sm-post:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -26px rgba(18, 17, 26, .5);
}

/* 4:5 — the tallest frame a feed shows uncropped, and the ratio the work was
   designed in, so the card holds it rather than cropping to a thumbnail. */
.sm-post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fill);
}
.sm-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
.sm-post:hover .sm-post-media img { transform: scale(1.04); }

.sm-post-body { padding: 15px 17px 17px; }
.sm-client {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sm-kind {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Reels ------------------------------------------------------------------- */

/* Dark band: vertical stills are mostly dark themselves, and the switch makes
   the reel section read as its own thing rather than more cards. */
.sm-reels-band {
  position: relative;
  background: var(--k-ink);
  color: #fff;
  overflow: hidden;
}
.sm-reels-band::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--k-red) 40%, transparent), transparent 70%);
  pointer-events: none;
}
.sm-reels-band > .section { position: relative; }
.sm-reels-head .section-title { color: #fff; }
.sm-reels-head .section-lede { color: rgba(255, 255, 255, .68); }

.sm-reels-band .sm-rail-btn {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.sm-reels-band .sm-rail-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }

.sm-reel-rail { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.sm-reel-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 999px; }

.sm-reel { flex: 0 0 clamp(228px, 62vw, 268px); }

/* Handset frame — a bezel and a hairline, enough to say "this is vertical"
   without drawing a whole illustrated phone around every card. */
.sm-reel-phone {
  padding: 7px;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .9);
}
.sm-reel-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #0b0714;
}
.sm-reel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease-out);
}
.sm-reel:hover .sm-reel-media img { transform: scale(1.05); }

.sm-reel-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1.5px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out);
}
/* The triangle is drawn with a border trick so it needs no extra element. */
.sm-reel-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(2px);
}
.sm-reel:hover .sm-reel-play { transform: scale(1.1); background: rgba(255, 255, 255, .3); }

.sm-reel-len,
.sm-reel-views {
  position: absolute;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(10, 6, 18, .6);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sm-reel-len { top: 12px; right: 12px; }
.sm-reel-views { bottom: 12px; left: 12px; }

.sm-reel-body { padding: 16px 4px 0; }
.sm-reel-body h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.sm-reel-body .sm-client {
  margin-top: 6px;
  color: color-mix(in srgb, var(--k-red) 30%, #fff);
  font-size: 13px;
}

.sm-reels-band .sm-rail-hint { color: rgba(255, 255, 255, .45); }

/* Coverage ---------------------------------------------------------------- */

.sm-cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 18px;
}
.sm-cover-item {
  padding: 26px 24px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.sm-cover-item:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.sm-cover-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--k-tint);
  color: var(--k-red);
  font-size: 19px;
  line-height: 1;
}
.sm-cover-item h3 {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sm-cover-item p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

.sm-rhythm { padding-top: clamp(56px, 7vw, 88px); }

@media (max-width: 720px) {
  .sm-rail-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-rail { scroll-behavior: auto; }
  .sm-post:hover,
  .sm-cover-item:hover { transform: none; }
  .sm-post:hover .sm-post-media img,
  .sm-reel:hover .sm-reel-media img,
  .sm-reel:hover .sm-reel-play { transform: none; }
}