/* Self-hosted fonts (latin subsets, was Google Fonts) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/manrope-400.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("assets/fonts/manrope-500.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("assets/fonts/manrope-600.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("assets/fonts/manrope-700.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: 800;
  font-display: swap;
  src: url("assets/fonts/manrope-800.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("assets/fonts/space-grotesk-500.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("assets/fonts/space-grotesk-700.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;
}

/* ============================================================
   Spark! — worldbeatersmusic.com  (REIMAGINED / Version B)
   Same brand, bolder editorial take. Deeper midnight base,
   Space Grotesk display, a single gradient reserved for the
   SPARK! wordmark only, varied solid section accents,
   mostly neutral white buttons. Shares the class system with
   the replica so the inner pages carry across unchanged.
   ============================================================ */

:root {
  --bg:    #070a12;
  --bg-2:  #0d111c;
  --bg-3:  #141a28;
  --ink:   #ffffff;
  --muted: #99a5bd;
  --line:  rgba(255,255,255,.11);

  --pink:   #ff3d7f;
  --cyan:   #2ad4e0;
  --gold:   #ffc24b;
  --violet: #9b6bff;
  --grad:   linear-gradient(105deg, #ff3d7f 0%, #ffc24b 45%, #2ad4e0 100%);

  --radius:    18px;
  --radius-lg: 28px;
  --shadow:    0 26px 64px rgba(0,0,0,.55);
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.65; font-size: 18px; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 .4em;
}
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1.1em; }
a { color: var(--ink); }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.eyebrow { display: inline-block; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; color: var(--cyan); margin-bottom: 18px; }
.eyebrow.pink { color: var(--pink); }
.eyebrow.gold { color: var(--gold); }
.eyebrow.violet { color: var(--violet); }
.muted { color: var(--muted); }

.skip { position: absolute; left: -999px; top: 0; background: var(--pink); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 0; }

/* ---------- Buttons ---------- */
/* rem is ROOT-relative (16px), so 1.17rem = 18.7px: bold text that size
   counts as WCAG large text, letting white on brand pink pass contrast */
.btn { display: inline-block; text-decoration: none; cursor: pointer; border: none; font-weight: 800; font-size: 1.17rem; padding: 15px 30px; border-radius: 999px; transition: transform .12s, background .15s, box-shadow .15s; text-align: center; }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 10px 26px rgba(255,61,127,.42); }
.btn-pink:hover { background: #ff5c93; transform: translateY(-2px); }
.btn-white { background: #fff; color: #070a12; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.18); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-sm { padding: 10px 20px; font-size: .9rem; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(18px, 4vw, 44px); transition: background .25s, backdrop-filter .25s; }
.site-header.scrolled { background: rgba(7,10,18,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .logo { display: flex; align-items: center; text-decoration: none; }
.site-header .logo img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.header-nav { display: flex; align-items: center; gap: 12px; }
.header-nav a { text-decoration: none; font-weight: 700; }
.header-nav .txt, .nav-toggle { color: #fff; padding: 8px 12px; opacity: .9; position: relative; font: inherit; font-weight: 700; background: none; border: none; cursor: pointer; }
.header-nav .txt::after, .nav-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.header-nav .txt:hover, .nav-toggle:hover { opacity: 1; }
.header-nav .txt:hover::after, .nav-toggle:hover::after { transform: scaleX(1); }

/* ---------- "What we do" menu panel ---------- */
.nav-item { position: relative; }
.nav-toggle .chev { display: inline-block; margin-left: 6px; transition: transform .2s; font-size: .7em; }
.nav-item.open .nav-toggle .chev { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); width: 420px; background: rgba(13,17,28,.97); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 130; }
.nav-item.open .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (hover: hover) { .nav-item:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } }
.mega a { display: block; padding: 12px 16px; border-radius: 12px; text-decoration: none; }
.mega a:hover, .mega a:focus-visible { background: rgba(255,255,255,.07); }
.mega b { display: block; color: #fff; font-size: 1rem; }
.mega span { display: block; color: var(--muted); font-size: .85rem; font-weight: 500; margin-top: 2px; }
.mega .mega-all { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; color: var(--cyan); font-size: .92rem; }

/* ---------- Burger + mobile menu ---------- */
.nav-burger { display: none; background: none; border: 1.5px solid var(--line); border-radius: 12px; width: 46px; height: 46px; cursor: pointer; color: #fff; align-items: center; justify-content: center; }
.nav-burger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.nav-burger .x { display: none; }
body.menu-open .nav-burger .bars { display: none; }
body.menu-open .nav-burger .x { display: block; }
.mobile-menu { position: fixed; inset: 0; z-index: 115; background: rgba(7,10,18,.98); backdrop-filter: blur(10px); display: none; overflow-y: auto; padding: 110px 28px 40px; }
body.menu-open .mobile-menu { display: block; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { z-index: 130; } /* keep logo + close button above the overlay */
.mobile-menu .mm-label { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 26px 0 6px; }
.mobile-menu a { display: block; padding: 11px 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.35rem; color: #fff; text-decoration: none; }
.mobile-menu a:active { color: var(--pink); }
.mobile-menu .btn { margin-top: 28px; width: 100%; font-size: 1.17rem; }
@media (max-width: 860px) {
  .header-nav .txt, .header-nav .nav-item, .header-nav > .btn { display: none; }
  .nav-burger { display: flex; }
}

/* Recruitment band (temporary, remove after the 23 July audition) */
.recruit-band { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: linear-gradient(90deg, var(--pink), var(--violet)); color: #fff; text-align: center; padding: 9px 18px; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.recruit-band a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.recruit-band a:hover { text-decoration-thickness: 2px; }
body.has-band .site-header { top: var(--band-h, 40px); }
.header-nav .btn-ghost { border-color: rgba(255,255,255,.35); }
.mobile-menu .btn-ghost { margin-top: 34px; }
.mobile-menu .btn-pink { margin-top: 14px; }

/* ---------- Hero (left-aligned, editorial) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: url("assets/hero-poster.webp") center/cover no-repeat var(--bg); }
.hero video, .hero .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,10,18,.84) 0%, rgba(7,10,18,.52) 45%, rgba(7,10,18,.22) 100%), linear-gradient(0deg, rgba(7,10,18,.78), transparent 45%); }
.hero-inner { position: relative; z-index: 2; padding: 120px 0 90px; max-width: 760px; }
.hero h1 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(4.5rem, 16vw, 12rem); line-height: .92; margin: 0 0 .1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .rotate { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.4rem); margin: 0 0 .5em; }
.hero .rotate b { color: var(--cyan); font-weight: 700; }
.hero .punch { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #d7ddea; max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ticker { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); background: rgba(7,10,18,.6); backdrop-filter: blur(8px); }
.hero-ticker .wrap { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; font-size: .95rem; }
.hero-ticker .lbl { color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; white-space: nowrap; }
.hero-ticker .nxt { color: #fff; font-weight: 600; }
.hero-ticker a { margin-left: auto; color: var(--cyan); text-decoration: none; font-weight: 700; white-space: nowrap; }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 20px 0; }
.marquee .track { display: flex; gap: 44px; white-space: nowrap; width: max-content; animation: slide 32s linear infinite; }
.marquee span { color: var(--muted); font-weight: 700; letter-spacing: .04em; font-size: 1.05rem; }
.marquee .sep { color: var(--pink); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

/* ---------- Sections ---------- */
section { padding: clamp(66px, 9vw, 120px) 0; }
.section-intro { max-width: 760px; }
.intro-lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--muted); }
.big-statement { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 20ch; }
.big-statement b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Feature quad */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 48px; }
.feature { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.feature .dot { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 16px; }
.feature:nth-child(1) .dot { background: rgba(255,61,127,.16); }
.feature:nth-child(2) .dot { background: rgba(42,212,224,.16); }
.feature:nth-child(3) .dot { background: rgba(255,194,75,.16); }
.feature:nth-child(4) .dot { background: rgba(155,107,255,.18); }
.feature h3 { margin-bottom: .4em; }
.feature p { color: var(--muted); font-size: .98rem; margin: 0; }

/* Photo feature cards (real photography instead of icons) */
.photo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 48px; }
.pcard { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; border: 1px solid var(--line); }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.pcard:hover img { transform: scale(1.06); }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,10,18,0) 35%, rgba(7,10,18,.6) 68%, rgba(7,10,18,.95) 100%); }
.pcard .pcard-body { position: relative; z-index: 2; padding: 28px 26px; }
.pcard h3 { margin-bottom: .35em; color: #fff; } /* over the photo gradient, whatever the section theme */
.pcard p { color: #d7dce6; font-size: .95rem; margin: 0; }

/* Full-bleed gallery strip */
.gallery-band { padding: 0; }
.gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gallery-strip figure { margin: 0; overflow: hidden; }
.gallery-strip figure.wide { grid-column: span 2; }
.gallery-strip img { width: 100%; height: 340px; object-fit: cover; transition: transform .6s ease; display: block; }
.gallery-strip figure:hover img { transform: scale(1.05); }
@media (max-width: 800px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } .gallery-strip img { height: 230px; } }

/* Connection split with photo */
.connect-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.connect-split img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 820px) {
  .connect-split { grid-template-columns: 1fr; }
  .connect-split .cs-media { max-width: 100%; }
  .connect-split img { aspect-ratio: 16/10; } /* landscape crop when stacked */
}

/* Tiny photo credits */
.cs-media, .split-media, .gallery-strip figure, .pcard, .page-hero.has-photo { position: relative; }
/* Whisper-quiet by default, readable on hover */
.pcredit { position: absolute; right: 10px; bottom: 6px; z-index: 3; font-size: .58rem; letter-spacing: .04em; color: rgba(255,255,255,.38); text-shadow: 0 1px 3px rgba(7,10,18,.8); pointer-events: none; transition: color .2s; }
.cs-media:hover .pcredit, .split-media:hover .pcredit, .gallery-strip figure:hover .pcredit, .pcard:hover .pcredit, .page-hero:hover .pcredit { color: rgba(255,255,255,.75); }

/* Photo page-hero (inner pages) */
.page-hero.has-photo { position: relative; min-height: 66svh; display: flex; align-items: center; padding-top: 140px; padding-bottom: 70px; overflow: hidden; }
.page-hero.has-photo .ph-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,10,18,.88) 0%, rgba(7,10,18,.52) 48%, rgba(7,10,18,.16) 100%), linear-gradient(0deg, rgba(7,10,18,.72), transparent 42%); }
.page-hero.has-photo .wrap { position: relative; z-index: 2; }

/* Showreel + splits */
.tint { background: var(--bg-2); }

/* ---------- Light sections (warm paper, breaks up the dark) ---------- */
.light {
  --bg:    #f6f2ea;
  --bg-2:  #efe9dc;
  --bg-3:  #fffdf8;
  --ink:   #1c1f2a;
  --muted: #5b6274;
  --line:  rgba(28,31,42,.14);
  --shadow: 0 18px 44px rgba(28,31,42,.14);
  background: #f6f2ea; color: var(--ink);
}
.light.tint { background: #efe9dc; }
.light a { color: var(--ink); }
.light .eyebrow { color: #0a6b74; }
.light .eyebrow.pink { color: #c21b56; }
.light .eyebrow.gold { color: #855508; }
.light .eyebrow.violet { color: #5a33bd; }
.light .btn-white { background: #1c1f2a; color: #fff; }
.light .btn-white:hover { box-shadow: 0 12px 30px rgba(28,31,42,.25); }
.light .btn-ghost { color: var(--ink); border-color: rgba(28,31,42,.25); }
.light .btn-ghost:hover { border-color: var(--ink); background: rgba(28,31,42,.05); }
.light h2, .light h3 { color: #2a3047; } /* soften the near-black on paper */
.light .pcard h3 { color: #fff; } /* photo-card text sits on the image gradient, not the paper */
.light .show { background: #fffdf8; transition: background .25s ease, border-color .25s ease, transform .12s, box-shadow .25s ease; }
.light .show:hover { background: linear-gradient(100deg, #fff0f6 0%, #fff8ef 55%, #eefaf9 100%); border-color: rgba(255,61,127,.35); box-shadow: 0 12px 30px rgba(255,61,127,.14); }
.light .show:hover .show-date { color: #c21b56; }
.light .show-date { transition: color .25s ease; }
.light .show-date { color: #0a6b74; }
.light .quote { background: #fffdf8; }
.light .hero-actions .btn-ghost { color: var(--ink); }
.video-frame { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.video-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-body .logos { color: var(--muted); font-weight: 700; font-size: .95rem; margin: 18px 0 24px; }

/* Shows preview */
.shows { display: grid; gap: 14px; max-width: 900px; margin: 40px auto 0; }
.show { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 20px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 26px; transition: border-color .15s, transform .12s; }
.show:hover { border-color: rgba(255,255,255,.28); transform: translateX(3px); }
.show-date { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--cyan); font-size: 1.02rem; }
.show-region { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.show-title { margin: 2px 0 0; font-size: 1.15rem; }
.show-tag { color: var(--pink); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }

/* Testimonials */
.quotes-band { background: var(--bg-2); }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
@media (max-width: 700px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.quote .mark { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 3rem; line-height: 1; color: var(--pink); opacity: .55; }
.quote:nth-child(2) .mark { color: var(--cyan); }
.quote:nth-child(3) .mark { color: var(--gold); }
.quote:nth-child(4) .mark { color: var(--violet); }
.quote p { font-size: 1.02rem; }
.quote .who { font-weight: 800; font-size: .92rem; margin: 0; }
.quote .org { color: var(--muted); font-size: .85rem; margin: 0; }

/* CTA */
.cta-band { text-align: center; background: radial-gradient(80% 120% at 50% 0%, rgba(255,61,127,.16), transparent 60%), var(--bg); }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.cta-band .sub { color: var(--muted); font-size: 1.15rem; margin-bottom: 30px; }

/* Page hero (inner): left-aligned editorial, like the homepage hero */
.page-hero { padding: 170px 0 70px; text-align: left; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.page-hero p { color: #d7ddea; font-size: 1.2rem; max-width: 56ch; margin: 0; }
.page-hero .eyebrow { margin-bottom: 14px; }

/* Contact / prose (inherited by inner pages) */
.contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: start; max-width: 1000px; margin: 0 auto; }
.form-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 7px; font-size: .95rem; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 16px; font: inherit; font-size: 1rem; background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,61,127,.2); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2399a5bd' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; }
.field .optional { font-weight: 500; color: var(--muted); font-size: .84rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.form-card .btn { width: 100%; }
.hpot { position: absolute; left: -5000px; }
.form-note { color: var(--muted); font-size: .88rem; margin-top: 14px; text-align: center; }
.form-ok { display: none; background: rgba(42,212,224,.12); border: 1px solid var(--cyan); border-radius: 12px; padding: 18px; color: #d6faff; }
.form-ok.show { display: block; }
.form-err { display: none; background: rgba(255,61,127,.1); border: 1px solid var(--pink); border-radius: 12px; padding: 14px 16px; color: #ffd7e5; font-size: .95rem; margin-top: 14px; }
.form-err.show { display: block; }
.form-card .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.contact-aside .line { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-aside .line .ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); color: var(--cyan); }
.contact-aside .line .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-aside h3 { margin: 0 0 2px; font-size: 1.05rem; }
.contact-aside a { color: var(--cyan); text-decoration: none; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--cyan); }

/* Two-column running text */
.twocol { column-count: 2; column-gap: 44px; max-width: 1000px; }
.twocol p { break-inside: avoid-column; }
@media (max-width: 860px) { .twocol { column-count: 1; } }

/* Client logo strip (corporate page) */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 36px; margin: 20px 0 26px; }
.logo-strip img { height: 26px; width: auto; opacity: .75; }
.logo-strip img[alt="Samsung"] { height: 38px; }
.logo-strip .logo-text { font-weight: 800; font-size: 1.15rem; color: #5b6274; opacity: .85; letter-spacing: .02em; }
.logo-strip .logo-text.mac { letter-spacing: .28em; }

/* FAQ accordion */
.faq { max-width: 780px; margin: 40px auto 0; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-3); margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 1.05rem; position: relative; padding-right: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--pink); font-weight: 700; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--muted); }
.light .faq details { background: #fffdf8; }

/* Four-card feature grids: 4 across, then 2x2, then stacked (no orphans) */
.features.quad { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .features.quad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features.quad { grid-template-columns: 1fr; } }

/* Related intent pages row */
.related-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* Footer */
.site-footer { background: #05060b; border-top: 1px solid var(--line); padding: 64px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 44px; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand .tagline { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.08rem; line-height: 1.4; max-width: 24ch; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); color: #cfd6e4; transition: border-color .15s, color .15s, transform .12s; }
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.footer-social svg { width: 24px; height: 24px; fill: currentColor; }
.footer-col .fcol-h { font-family: "Manrope", sans-serif; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 0 0 16px; line-height: 1.4; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #cfd6e4; text-decoration: none; font-size: .96rem; }
.footer-col a:hover { color: #fff; }
.footer-col .fc-muted { color: var(--muted); font-size: .96rem; line-height: 1.6; margin: 0; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; color: var(--muted); font-size: .84rem; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* Cookie banner (compact, bottom-right, off the hero copy) */
.cookie { position: fixed; right: 16px; bottom: 16px; left: auto; z-index: 300; width: min(340px, calc(100vw - 32px)); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow); display: none; }
.cookie.show { display: block; }
.cookie p { font-size: .86rem; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.cookie .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cookie .btn { padding: 9px 18px; font-size: .86rem; }
.cookie .btn-pink { background: #d81b60; box-shadow: none; } /* deeper pink: 4.5:1 with white at small size */
.cookie .btn-pink:hover { background: #e63472; }
.cookie .more { color: var(--muted); font-size: .84rem; text-decoration: underline; margin-left: auto; }
.cookie .more:hover { color: #fff; }

/* Responsive */
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .hero-ticker .wrap { flex-wrap: wrap; }
  .hero-ticker a { margin-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .site-header { padding: 12px 16px; }
  .site-header .logo img { height: 36px; }
  .header-nav { gap: 4px; }
  .header-nav .txt { padding: 8px 8px; }
  .header-nav .btn { white-space: nowrap; padding: 12px 18px; }
  .show { grid-template-columns: 110px 1fr; }
  .show .btn, .show .show-tag { grid-column: 2; justify-self: start; }
}