/* ============================================================================
   DS SIGHT — light editorial system (static marketing pages)
   White / pearl base, charcoal type, fine dividers, one restrained electric blue,
   intentional dark film-viewing bands. Applies when <html data-theme="light">.
   Loaded INSTEAD of redesign.css / polish.css on those pages. Visual only.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,300..800&family=Inter:wght@400;500;600&family=Cinzel:wght@400;500&family=Allura&display=swap");

:root {
  --ink: #11151b;
  --ink-2: #4a5160;
  --ink-3: #6b7383;
  --paper: #ffffff;
  --pearl: #f3f5f8;
  --pearl-2: #e8ebf1;
  --line: rgba(17, 21, 27, 0.12);
  --blue: #1d6bf0;
  --blue-ink: #0b4fc4;
  --blue-soft: #8fc4ff;
  --film: #0b0f18;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);
  --font-wordmark: "Cinzel", Georgia, serif;
  --r: 14px;
  --rise: 14px;
  --ds-rise: 14px;           /* motion.css reveal travel */
  --ds-dur-m: 480ms;
  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --header: 88px;
}
html { background: var(--paper); scroll-padding-top: 104px; }
body.lp-page { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.lp-page *, body.lp-page *::before, body.lp-page *::after { box-sizing: border-box; }
::selection { background: rgba(29, 107, 240, 0.22); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.03em; line-height: 1.02; margin: 0; color: var(--ink); text-transform: none; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.seo-skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 10px; font: 600 15px/1 var(--font-body); text-decoration: none; transition: top 160ms ease; }
.seo-skip:focus { top: 12px; }

.lp-wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 56px); }
.lp-eyebrow { margin: 0 0 14px; font: 500 15px/1.3 var(--font-body); color: var(--ink-3); letter-spacing: 0; }
.lp-h2 { font-size: clamp(34px, 4.6vw, 68px); }
.lp-lede { max-width: 520px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); }
.lp-section { padding-block: clamp(72px, 10vw, 150px); }
.lp-note { color: var(--ink-2); }

/* ---------- Buttons (one system) ------------------------------------------------ */
.lp-btn, .seo-primary, .seo-secondary, .ap-buy, .uk-cta, .uk-cta-ghost, .ds-navbar-cta {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 52px; padding: 0 26px;
  border-radius: var(--r); font: 600 16px/1.2 var(--font-body); letter-spacing: 0.005em; text-transform: none; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--ds-dur-s, 180ms) var(--ds-ease), border-color 180ms var(--ds-ease), box-shadow 180ms var(--ds-ease), transform 120ms var(--ds-ease), filter 180ms var(--ds-ease), color 180ms var(--ds-ease);
}
.lp-btn-primary, .seo-primary, .ap-buy, .uk-cta {
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient(180deg, #3c85ff 0%, #1a62e6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(29, 107, 240, 0.25);
}
.lp-btn-primary:hover, .seo-primary:hover, .ap-buy:hover, .uk-cta:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 26px rgba(29, 107, 240, 0.32); }
.lp-btn-ghost, .seo-secondary, .uk-cta-ghost { color: var(--ink); background: transparent; border: 1.5px solid rgba(17, 21, 27, 0.55); }
.lp-btn-ghost:hover, .seo-secondary:hover, .uk-cta-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.lp-btn:active, .seo-primary:active, .seo-secondary:active, .ap-buy:active { transform: translateY(1px) scale(0.992); }
.lp-btn[aria-disabled="true"], button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
[aria-busy="true"] { cursor: progress; pointer-events: none; }
.lp-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-ink); font-weight: 600; font-size: 16px; text-decoration: none; }
.lp-link::after { content: "\2192"; margin-left: 8px; transition: transform 180ms var(--ds-ease); }
.lp-link:hover { color: var(--ink); } .lp-link:hover::after { transform: translateX(3px); }
.lp-link-quiet { color: var(--ink-2); }
.lp-link-inline { color: var(--blue-ink); text-underline-offset: 3px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Hero: portrait-led stage on white ------------------------------------ */
.hx { position: relative; background: #fff; overflow: clip; }
.hx-stage { position: relative; max-width: 1440px; margin: 0 auto; height: clamp(600px, calc(100svh - var(--header) - 28px), 900px); }
.hx-portrait { position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 1066 / 1475; transform: translateX(-50%); margin: 0; pointer-events: none; }
.hx-portrait picture, .hx-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.hx-name {                                          /* oversized wordmark — in the foreground, below the face */
  position: absolute; left: 50%; bottom: clamp(10px, 2.5vh, 36px); z-index: 45; margin: 0;   /* above the snake layer (z 40): the real glyphs overlap the snake */
  width: max-content; max-width: 98vw; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-stretch: 112%; text-transform: uppercase; font-size: clamp(76px, 15.4vw, 236px); line-height: 0.82; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; pointer-events: none;
}
.hx-name span { color: var(--ink); }
.hx-intro { position: absolute; z-index: 4; left: clamp(20px, 4vw, 64px); top: clamp(24px, 9vh, 110px); width: min(360px, 26vw); }
.hx-tag { font: 650 clamp(28px, 2.5vw, 40px)/1.08 var(--font-display); letter-spacing: -0.03em; margin: 6px 0 16px; color: var(--ink); }
.hx-lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 340px; }
.hx-actions { margin-top: 26px; }
.hx-actions .lp-btn { min-height: 56px; padding: 0 30px; font-size: 16px; }
.hx-coil { position: absolute; z-index: 2; left: 70%; top: 8%; width: 150px; aspect-ratio: 1; pointer-events: none; }   /* placed on the final T by the page script */
.hx-coil-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 400ms var(--ds-ease); filter: drop-shadow(0 14px 22px rgba(17, 21, 27, 0.22)); }
.hx-coil.is-live .hx-coil-poster { opacity: 0; }
#ds-mamba { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 400ms var(--ds-ease); }
#ds-mamba.is-ready { opacity: 1; }

@media (max-width: 1099px) {
  .hx-intro { width: min(300px, 30vw); }
  .hx-tag { font-size: clamp(24px, 3vw, 30px); }
}
@media (max-width: 899px) {                         /* phones / small tablets: recomposed, not shrunk */
  .hx-stage { height: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; }
  .hx-intro { display: contents; }
  .hx-intro .lp-eyebrow, .hx-tag { order: 1; align-self: stretch; padding: 0 20px; max-width: 560px; }
  .hx-tag { order: 2; }
  .hx-portrait { order: 3; } .hx-name { order: 4; } .hx-mobile-lede { order: 5; } .hx-actions { order: 6; }
  .hx-tag { font-size: clamp(28px, 7.6vw, 44px); margin-bottom: 0; }
  .hx-lede { display: none; }
  .hx-portrait { position: relative; left: auto; bottom: auto; transform: none; height: auto; width: auto; max-width: 100%; height: clamp(250px, 38svh, 460px); aspect-ratio: auto; margin-top: 6px; }
  .hx-portrait picture, .hx-portrait img { height: 100%; width: auto; max-width: 100%; display: block; }
  .hx-name { position: relative; left: auto; bottom: auto; transform: none; margin: -0.62em auto 0; font-size: clamp(52px, 17.5vw, 150px); white-space: nowrap; text-align: center; max-width: 100%; }
  .hx-actions { position: relative; z-index: 5; margin: 18px 20px 0; width: calc(100% - 40px); max-width: 520px; }
  .hx-actions .lp-btn { flex: 1 1 100%; }
  .hx-mobile-lede { display: block; }
}
.hx-mobile-lede { display: none; padding: 14px 20px 0; max-width: 560px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; align-self: stretch; }

/* ---------- Work: larger films on an intentional dark band ------------------------ */
.fb { background: var(--film); color: #eef1f7; padding-block: clamp(64px, 9vw, 130px); }
.fb .lp-eyebrow { color: #9fb2d4; }
.fb .lp-h2 { color: #fff; }
.fb .lp-link { color: var(--blue-soft); } .fb .lp-link:hover { color: #fff; }
.lp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 52px); }
.lp-gallery { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 14px; align-items: start; }
.lp-gallery-main ds-reel { --reel-ratio: 9 / 16; }
.lp-gallery-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-more { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 3 / 4; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; color: #fff; text-decoration: none; transition: border-color 180ms var(--ds-ease), background 180ms var(--ds-ease); }
.lp-more span { font: 650 clamp(22px, 2.2vw, 32px)/1.05 var(--font-display); letter-spacing: -0.03em; } .lp-more span::after { content: " \2192"; }
.lp-more small { color: #9fb2d4; font-size: 15px; }
.lp-more:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 1099px) { .lp-gallery { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .lp-gallery-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lp-gallery { grid-template-columns: 1fr; } .lp-gallery-main ds-reel { --reel-ratio: 4 / 5; } .lp-gallery-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lp-gallery-rest { grid-template-columns: 1fr; } }
.fb .lp-note { color: #9fb2d4; }

/* ---------- Services (pearl, fine dividers — no cards) ---------------------------- */
.lp-pearl { background: var(--pearl); border-block: 1px solid var(--line); }
.lp-sec-lede { margin-top: 14px; color: var(--ink-2); font-size: 18px; max-width: 460px; }
.lp-service-list { list-style: none; margin: clamp(36px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.lp-service { padding: 30px 32px 10px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lp-service + .lp-service { padding-left: 32px; border-left: 1px solid var(--line); }
.lp-num { font: 500 14px/1 var(--font-body); color: var(--ink-3); }
.lp-service h3 { font-size: 26px; letter-spacing: -0.02em; }
.lp-service p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
@media (max-width: 860px) {
  .lp-service-list { grid-template-columns: 1fr; }
  .lp-service, .lp-service + .lp-service { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Next competition (a quiet strip) ------------------------------------- */
.lp-event { padding-block: clamp(56px, 7vw, 100px); }
.lp-event-card { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-block: 36px; border-block: 1px solid var(--ink); }
.lp-event-dates { margin: 14px 0 8px; font-size: 20px; color: var(--ink); }
.lp-event-note { max-width: 640px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.lp-event-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
@media (max-width: 760px) { .lp-event-card { grid-template-columns: 1fr; } }

/* ---------- Contact + footer ------------------------------------------------------ */
.lp-contact { padding-block: clamp(64px, 9vw, 130px); }
.lp-contact-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.lp-contact .lp-h2 { font-size: clamp(40px, 7vw, 108px); max-width: 12ch; }
.lp-contact-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (max-width: 760px) { .lp-contact-grid { grid-template-columns: 1fr; } }
.lp-footer { background: var(--pearl); border-top: 1px solid var(--line); padding-block: 56px 28px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.lp-footer-lede { margin: 0 0 36px; max-width: 720px; }
.lp-footer a { color: var(--ink-2); text-decoration: none; } .lp-footer a:hover { color: var(--ink); text-decoration: underline; }
.lp-footer-lede a { color: var(--blue-ink); text-decoration: underline; }
.lp-footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.lp-footer-grid div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lp-footer-grid a { display: inline-flex; align-items: center; min-height: 36px; }
.lp-footer-grid h3 { font: 600 14px/1.3 var(--font-body); letter-spacing: 0; margin-bottom: 8px; color: var(--ink); }
.lp-footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 860px) { .lp-footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Portfolio / Meta ads / Apparel / service pages ------------------------ */
.lp-hero-small { padding-block: clamp(48px, 8vw, 110px) 0; }
.lp-hero-small .lp-h1, .lp-h1 { font-size: clamp(42px, 6.4vw, 104px); font-weight: 650; letter-spacing: -0.035em; line-height: 0.98; margin: 0 0 22px; max-width: 16ch; }
.lp-pf { padding-top: clamp(32px, 4vw, 56px); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-sites { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); margin-top: 28px; }
@media (max-width: 760px) { .pf-sites { grid-template-columns: 1fr; } }
.pf-site { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 28px 28px 28px 0; text-decoration: none; color: inherit; }
.pf-site + .pf-site { padding-left: 28px; border-left: 1px solid var(--line); }
.pf-site h3 { font-size: 26px; } .pf-site p { color: var(--ink-2); font-size: 16.5px; }
.pf-site:hover h3 { color: var(--blue-ink); }
@media (max-width: 760px) { .pf-site + .pf-site { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.ma-card { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5vw, 72px); padding-block: 40px; border-block: 1px solid var(--ink); }
.ma-amount { margin: 6px 0 14px; font: 600 16px/1.2 var(--font-body); color: var(--ink-2); }
.ma-amount span { display: block; font: 700 clamp(56px, 8vw, 120px)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--ink); margin-bottom: 8px; }
.ma-note { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 380px; }
.ma-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ma-list li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ma-list li:first-child { padding-top: 0; } .ma-list li:last-child { border-bottom: 0; }
.ma-list strong { font: 600 19px/1.3 var(--font-body); color: var(--ink); } .ma-list span { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.ma-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .ma-steps { grid-template-columns: repeat(2, 1fr); } .ma-card { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ma-steps { grid-template-columns: 1fr; } }
.ma-honest { margin: 28px 0 0; max-width: 720px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.ma-how, .ma-proof { padding-top: clamp(40px, 5vw, 72px); }
/* apparel */
.ap-page { background: #fff; }
.ap-hero { padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px); }
.ap-hero-inner, .ap-section { max-width: 1280px; margin-inline: auto; }
.ap-eyebrow { font: 500 15px/1 var(--font-body); color: var(--ink-3); margin: 0 0 18px; letter-spacing: 0; }
.ap-title { font-size: clamp(54px, 10vw, 150px); letter-spacing: -0.045em; line-height: 0.92; margin: 0 0 18px; color: var(--ink); }
.ap-lede { color: var(--ink-2); font-size: 19px; line-height: 1.6; max-width: 560px; }
.ap-section { padding: 0 clamp(20px, 4vw, 56px) clamp(72px, 9vw, 130px); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.ap-card { display: flex; flex-direction: column; background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding-top: 14px; }
.ap-card-media { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--pearl); border: 0; padding: 0; cursor: zoom-in; overflow: hidden; border-radius: 4px; }
.ap-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-card-body { padding: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ap-card-name { margin: 0; font: 600 18px/1.3 var(--font-body); color: var(--ink); letter-spacing: 0; }
.ap-card-price { font: 600 16px/1 var(--font-body); color: var(--blue-ink); }
.ap-card-desc, .ap-card-meta { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ap-empty { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: 48px; border-block: 1px solid var(--ink); }
.ap-empty h2 { font-size: clamp(34px, 5vw, 72px); margin-bottom: 14px; } .ap-empty p { color: var(--ink-2); font-size: 18px; max-width: 460px; margin-bottom: 22px; }
.ap-empty[hidden], .ap-grid[hidden] { display: none !important; }
.ap-mark { display: flex; justify-content: center; } .ap-mark img { width: min(300px, 70%); height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ap-link { color: var(--blue-ink); font-weight: 600; }
@media (max-width: 860px) { .ap-empty { grid-template-columns: 1fr; } }
.ap-dialog { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); overflow: auto; }
.ap-dialog::backdrop { background: rgba(10, 14, 22, 0.7); }
.ap-dialog-grid { display: grid; grid-template-columns: 1.1fr 1fr; } .ap-dialog-media { background: var(--pearl); }
.ap-dialog-media img { width: 100%; height: 100%; max-height: 80vh; object-fit: contain; display: block; }
.ap-dialog-body { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; } .ap-dialog-body h2 { font-size: clamp(26px, 3vw, 38px); }
.ap-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .ap-thumbs button { width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; }
.ap-thumbs button[aria-current="true"] { border-color: var(--blue); } .ap-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-close { position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 22px; cursor: pointer; z-index: 2; }
@media (max-width: 760px) { .ap-dialog-grid { grid-template-columns: 1fr; } }

/* seo service pages (light) */
body.seo-page { background: #fff; color: var(--ink); }
.seo-hero { position: relative; padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.seo-hero-inner, .seo-section-inner, .seo-breadcrumbs, .seo-footer-inner { max-width: 1280px; margin: 0 auto; }
.seo-hero-copy { max-width: 920px; }
.seo-eyebrow, .seo-card-label { font: 500 15px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-bottom: 16px; }
.seo-hero h1 { font-size: clamp(42px, 6.6vw, 108px); letter-spacing: -0.04em; line-height: 0.96; font-weight: 650; }
.seo-hero-lede { max-width: 700px; margin: 28px 0 0; color: var(--ink-2); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; }
.seo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.seo-proof { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-top: 52px; border-top: 1px solid var(--ink); }
.seo-proof div { padding: 20px 20px 0 0; } .seo-proof div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.seo-proof strong { display: block; font: 650 30px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); } .seo-proof span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.seo-breadcrumbs { padding: 18px clamp(20px, 4vw, 56px); color: var(--ink-3); font-size: 14px; } .seo-breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.seo-section { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 56px); }
.seo-section:nth-of-type(even) { background: var(--pearl); }
.seo-section-header { max-width: 820px; margin-bottom: 40px; }
.seo-section h2 { font-size: clamp(34px, 4.6vw, 64px); }
.seo-section-header > p, .seo-richtext p { color: var(--ink-2); font-size: 18px; line-height: 1.7; } .seo-section-header > p { margin: 20px 0 0; }
.seo-richtext { max-width: 760px; } .seo-richtext p { margin: 0 0 22px; }
.seo-richtext a, .seo-card a, .seo-note a { color: var(--blue-ink); }
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.seo-grid.two { grid-template-columns: repeat(2, 1fr); }
.seo-card { position: relative; padding: 28px 30px 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.seo-grid > .seo-card + .seo-card { padding-left: 30px; border-left: 1px solid var(--line); }
.seo-card h3 { margin: 12px 0 12px; font-size: 26px; letter-spacing: -0.02em; text-transform: none; }
.seo-card p, .seo-card li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; } .seo-card p { margin: 0; } .seo-card ul { margin: 14px 0 0; padding-left: 18px; }
.seo-process { counter-reset: process; } .seo-process .seo-card { counter-increment: process; }
.seo-process .seo-card::after { content: "0" counter(process); position: absolute; right: 20px; top: 24px; color: rgba(17, 21, 27, 0.14); font: 700 34px/1 var(--font-display); }
.seo-note { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 40px; align-items: center; padding-block: 36px; border-block: 1px solid var(--ink); }
.seo-note h3 { margin: 0 0 14px; font-size: clamp(26px, 4vw, 42px); text-transform: none; } .seo-note p { color: var(--ink-2); line-height: 1.7; }
.seo-faq { max-width: 860px; } .seo-faq details { border-top: 1px solid var(--line); } .seo-faq details:last-child { border-bottom: 1px solid var(--line); }
.seo-faq summary { padding: 22px 2px; min-height: 56px; cursor: pointer; color: var(--ink); font-size: 18px; font-weight: 500; }
.seo-faq details p { max-width: 720px; margin: 0 0 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.seo-cta { padding: clamp(72px, 9vw, 130px) clamp(20px, 4vw, 56px); text-align: center; border-top: 1px solid var(--line); background: var(--pearl); }
.seo-cta > div { width: min(100%, 860px); margin: 0 auto; } .seo-cta h2 { font-size: clamp(40px, 6vw, 84px); } .seo-cta p { margin: 22px auto 0; color: var(--ink-2); font-size: 18px; line-height: 1.65; } .seo-cta .seo-actions { justify-content: center; }
.seo-footer { padding: 42px clamp(20px, 4vw, 56px); border-top: 1px solid var(--line); background: var(--pearl); }
.seo-footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--ink-3); font-size: 14px; }
.seo-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; } .seo-footer a { color: var(--ink-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .seo-footer a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 860px) {
  .seo-grid, .seo-grid.two, .seo-note { grid-template-columns: 1fr; }
  .seo-grid > .seo-card + .seo-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .seo-card { padding-right: 0; }
  .seo-proof { grid-template-columns: 1fr; } .seo-proof div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 14px; }
}
.seo-proof-reels { margin-top: 36px; }

/* ---------- Control dock (sound + pause) ------------------------------------------ */
#ds-dock { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100vw - 28px); }
#ds-dock > button, .ds-mamba-toggle { position: static; min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(17, 21, 27, 0.22); background: rgba(255, 255, 255, 0.92); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 14px/1 var(--font-body); box-shadow: 0 6px 20px rgba(17, 21, 27, 0.12); }
#ds-dock > button:hover, .ds-mamba-toggle:hover { border-color: var(--blue); }

/* ---------- Motion (CSS only; content is visible by default) ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes hx-rise-x { from { opacity: 0; transform: translate(-50%, 16px); } }
  @keyframes hx-mask { from { clip-path: inset(0 0 100% 0); transform: translate(-50%, 18px); } to { clip-path: inset(0 0 0 0); transform: translate(-50%, 0); } }
  .hx-portrait { animation: hx-rise-x 640ms var(--ds-ease) backwards; }
  .hx-name { animation: hx-mask 620ms var(--ds-ease) 140ms backwards; }
  .hx-intro > * { animation: hx-rise 520ms var(--ds-ease) backwards; }
  .hx-intro > *:nth-child(2) { animation-delay: 70ms; } .hx-intro > *:nth-child(3) { animation-delay: 140ms; } .hx-intro > *:nth-child(4) { animation-delay: 210ms; }
  @media (max-width: 899px) {
    @keyframes hx-rise-m { from { opacity: 0; transform: translateY(16px); } }
    @keyframes hx-mask-m { from { clip-path: inset(0 0 100% 0); transform: translateY(18px); } }
    .hx-portrait { animation-name: hx-rise-m; } .hx-name { animation-name: hx-mask-m; }
  }
  /* one gentle scroll-linked drift (progressive enhancement, no pinning, no scroll hijack) */
  @supports (animation-timeline: scroll()) {
    @keyframes hx-drift { to { transform: translate(calc(-50% - 3.2vw), 0); } }
    @media (min-width: 900px) { .hx-name { animation: hx-mask 620ms var(--ds-ease) 140ms backwards, hx-drift linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 90vh; } }
  }
  .lp-gallery ds-reel { transition: transform 360ms var(--ds-ease); }
  .lp-gallery ds-reel:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .lp-btn, .seo-primary, .seo-secondary { transition: none; } .lp-btn:active { transform: none; } }

#ds-mamba canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ds-mamba-poster { position: absolute; z-index: 2; pointer-events: none; user-select: none; }
#ds-mamba-static { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* ---- Light remap of the design-system tokens (React pages draw everything from these) ---- */
html[data-theme="light"] {
  --void-black: #ffffff; --deep-black: #f3f5f8; --surface-dark: #ffffff; --surface-raised: #f3f5f8;
  --bg-base: #ffffff; --bg-section: #f3f5f8; --surface-card: #ffffff; --surface-hover: #f3f5f8;
  --text-primary: #2a313c; --text-heading: #11151b; --text-secondary: #4a5160; --text-muted: #6a7180;
  --chrome-highlight: #2a313c; --chrome-white: #11151b; --chrome-mid: #4a5160; --chrome-muted: #6a7180;
  --line-soft: rgba(17, 21, 27, 0.12); --line-chrome: rgba(17, 21, 27, 0.16);
  --border-card: rgba(17, 21, 27, 0.16); --border-subtle: rgba(17, 21, 27, 0.12);
  --blue: #1d6bf0; --blue-bright: #1458c8; --accent: #1d6bf0; --accent-hover: #1458c8; --blue-glow: rgba(29, 107, 240, 0.25);
  --chrome-gradient: linear-gradient(180deg, #11151b 0%, #2c3442 55%, #11151b 100%);
  color-scheme: light;
}
html[data-theme="light"] body { background: #fff; color: var(--ink); }

/* ---------- Glass buttons: translucent, blurred, lit from above (Apple-style) ----------------
   Layered over photos/video the glass lets the picture show through; solid fallbacks below. */
.lp-btn-primary, .seo-primary, .ap-buy, .uk-cta,
html[data-theme="light"] x-dc button[style*="gradient"], html[data-theme="light"] x-dc a[style*="gradient"] {
  color: #fff !important; background: rgba(29, 107, 240, 0.74) !important; border: 1px solid rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(29, 107, 240, 0.28) !important;
}
.lp-btn-primary:hover, .seo-primary:hover, .ap-buy:hover, .uk-cta:hover { background: rgba(29, 107, 240, 0.86) !important; }
.lp-btn-ghost, .seo-secondary, .uk-cta-ghost {
  color: var(--ink); background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(17, 21, 27, 0.14), 0 8px 22px rgba(17, 21, 27, 0.08);
}
.lp-btn-ghost:hover, .seo-secondary:hover, .uk-cta-ghost:hover { background: rgba(255, 255, 255, 0.78); color: var(--ink); border-color: #fff; }
.fb .lp-btn-ghost, .fb .seo-secondary { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ds-navbar-cta { background: rgba(17, 21, 27, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(17, 21, 27, 0.16) !important; }
.ds-navbar-toggle { background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
#ds-dock > button, .ds-mamba-toggle { background: rgba(255, 255, 255, 0.6) !important; -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-btn-primary, .seo-primary, .ap-buy, .uk-cta { background: #1d6bf0 !important; }
  .lp-btn-ghost, .seo-secondary, .uk-cta-ghost, .ds-navbar-toggle, #ds-dock > button { background: #fff !important; }
  .ds-navbar-cta { background: #11151b !important; }
}

/* ---------- Apparel store ---------- */
.ap-banner { padding: 14px 18px; border-radius: 16px; background: var(--pearl); border: 1px solid var(--line); color: var(--ink); margin: 0 0 20px; }
.ap-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.ap-chip, .ap-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(17, 21, 27, 0.2); background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font: 500 15px/1 var(--font-body); cursor: pointer; }
.ap-chip[aria-pressed="true"], .ap-pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ap-chip:focus-visible, .ap-pill:focus-visible, .ap-card-media:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ap-card-media { cursor: pointer; border-radius: 14px; }
.ap-card { border-top: 0; padding-top: 0; }
.ap-cart-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; min-width: 140px; }
.ap-cart-btn[hidden] { display: none; }
.ap-dialog { font-family: var(--font-body); font-size: 16px; line-height: 1.5; width: min(1040px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 30px 80px rgba(17, 21, 27, 0.3); color: var(--ink); overflow: auto; }
.ap-dialog::backdrop { background: rgba(11, 15, 24, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ap-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 8px; position: sticky; top: 0; background: inherit; z-index: 2; }
.ap-dlg-title { margin: 0; font: 650 clamp(22px, 3vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ap-dlg-close { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(17, 21, 27, 0.2); background: rgba(255, 255, 255, 0.7); font: 500 15px/1 var(--font-body); cursor: pointer; color: var(--ink); }
.ap-dlg-body { padding: 8px 24px 28px; }
.ap-pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
@media (max-width: 760px) { .ap-pd { grid-template-columns: 1fr; } .ap-dialog { border-radius: 22px; } .ap-dlg-body { padding: 8px 16px 24px; } }
.ap-gal-main { width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; background: var(--pearl); display: block; }
.ap-gal-views { display: flex; gap: 8px; margin-top: 12px; }
.ap-note { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 8px 0; }
.ap-price { font: 650 28px/1 var(--font-display); margin: 4px 0; letter-spacing: -0.02em; }
.ap-field { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.ap-field legend { font: 600 15px/1 var(--font-body); padding: 0; margin-bottom: 10px; }
.ap-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(17, 21, 27, 0.2); border-radius: 999px; padding: 3px; }
.ap-qbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--ink); }
.ap-qval { min-width: 28px; text-align: center; font-weight: 600; }
.ap-add, .ap-actions .lp-btn { margin-top: 18px; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-error { color: #b42318; font-size: 14px; min-height: 0; margin: 6px 0 0; }
.ap-lines { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 12px; }
.ap-line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 8px 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ap-line img { border-radius: 10px; background: var(--pearl); }
.ap-line-t { display: grid; gap: 2px; min-width: 0; }
.ap-lines-sm .ap-line { grid-template-columns: 1fr auto; }
.ap-line-p { font-weight: 600; }
@media (max-width: 560px) { .ap-line { grid-template-columns: 56px 1fr; } .ap-line img { width: 56px; height: 56px; } .ap-line .ap-qty, .ap-line .ap-line-p, .ap-line .ap-link-btn { grid-column: 2; justify-self: start; } .ap-lines-sm .ap-line { grid-template-columns: 1fr auto; } }
.ap-link-btn { background: none; border: 0; color: var(--blue-ink); font: 500 15px/1 var(--font-body); min-height: 44px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ap-sum { display: flex; justify-content: space-between; padding: 10px 0; }
.ap-sum-total { border-top: 1px solid var(--ink); font-size: 20px; margin-top: 6px; }
.ap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.ap-form .ap-f:nth-child(1), .ap-form .ap-f:nth-child(2), .ap-form .ap-f:nth-child(3), .ap-form .ap-f:nth-child(4), .ap-form .ap-error[role], .ap-form .ap-actions { grid-column: 1 / -1; }
@media (max-width: 560px) { .ap-form { grid-template-columns: 1fr; } }
.ap-f { display: grid; gap: 6px; margin-top: 10px; }
.ap-f label { font: 600 15px/1.2 var(--font-body); }
.ap-f input, .ap-f select { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(17, 21, 27, 0.25); background: rgba(255, 255, 255, 0.85); font: 400 16px/1.2 var(--font-body); color: var(--ink); width: 100%; box-sizing: border-box; }
.ap-f input:focus-visible, .ap-f select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.ap-fixed { margin: 0; min-height: 52px; display: flex; align-items: center; padding: 0 14px; border-radius: 14px; background: var(--pearl); }
.ap-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.ap-radio input { width: 22px; height: 22px; }
.ap-reasons { color: var(--ink-2); padding-left: 20px; }
.ap-preview-na { aspect-ratio: 1; border-radius: 18px; background: var(--pearl); border: 1px dashed rgba(17, 21, 27, 0.3); display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px; color: var(--ink-2); }
.ap-preview-na strong { color: var(--ink); font-size: 20px; }
.ap-preview-na[hidden], .ap-gal-main[hidden] { display: none; }
.ap-thumb-stage { aspect-ratio: 1; border-radius: 18px; background: var(--pearl); display: grid; place-content: center; }
.ap-thumb-stage img { width: 64px; height: 64px; image-rendering: auto; border-radius: 8px; }
.ap-thumb-stage[hidden] { display: none; }
.ap-line-thumb { object-fit: none; background: var(--pearl); }

/* gallery: real colour-matched garment, contained at natural proportions */
.ap-pd { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.ap-gal-main { object-fit: contain; background: #f6f7f9; }
.ap-preview-na { gap: 10px; }
.ap-swatch { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(17, 21, 27, 0.2); }
.ap-pill { display: inline-flex; align-items: center; }
.ap-ship { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.ap-ship-h { font: 650 20px/1.2 var(--font-display); margin: 14px 0 4px; }
.ap-pay { width: 100%; min-height: 56px; margin-top: 14px; }
.ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .ap-pd { grid-template-columns: 1fr; } }