/* Built by scripts/build-css.js from css/src/*.css — edit the parts, not this file. */
@layer tokens, base, layout, components, utilities, motion;

/* ---- 00-tokens.css ---- */
/* ============================================================
   Ardena design system — tokens
   Source: the final design (Claude Design bundle, .design/reference/_shared.css).
   Geist 300/400/500 + Geist Mono, self-hosted. Light pages with navy (.dark) bands.
   ============================================================ */
@layer tokens {
  @font-face { font-family: "Geist"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/geist-300.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: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/geist-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: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/geist-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: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/geist-mono-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: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/geist-mono-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; }
  /* Metric-matched fallbacks so text does not jump when the webfonts arrive. */
  @font-face { font-family: "Geist Fallback"; src: local("Arial"); ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; size-adjust: 98%; }
  @font-face { font-family: "Geist Mono Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; size-adjust: 96%; }

  :root {
    /* fonts */
    --font-body: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
    --fw-light: 300;              /* one switch: 400 if Light reads too thin on a given screen */
    --fw-regular: 400;
    --fw-medium: 500;

    /* colours */
    --white: #FFFFFF;
    --ink: #0A1A30; --slate: #4F5F78; --sub: #6B7A91;
    --line: #E7ECF3; --line2: #DCE3EC; --soft: #F7F9FC;
    --navy: #0B1631; --navy2: #101E40; --nline: #1C2A4E; --ntext: #8E9FC2; --nbody: #AEBBD3;
    --accent: #FF7A45; --aink: #E2551B;
    --aqua: #2DD4BF; --sky: #60A5FA; --violet: #A78BFA; --amber: #FBBF24; --pink: #F472B6;
    --focus: var(--accent);

    /* gradients */
    --grad: linear-gradient(90deg, #14B8A6 0%, #3B82F6 34%, #8B5CF6 66%, #FF7A45 100%);
    --grad-dark: linear-gradient(90deg, #2DD4BF 0%, #60A5FA 34%, #A78BFA 66%, #FF7A45 100%);
    --grad-warm: linear-gradient(90deg, #A78BFA 0%, #F472B6 45%, #FF7A45 100%);
    --grad-meter: linear-gradient(90deg, #2DD4BF, #60A5FA, #A78BFA, #FF7A45);
    --grad-bar: linear-gradient(90deg, #8B5CF6, #FF7A45);
    --grad-edge: linear-gradient(90deg, #14B8A6, #3B82F6, #8B5CF6, #FF7A45);

    /* type scale */
    --fs-text: 17px; --lh-text: 1.55;
    --fs-display: clamp(40px, 5.2vw, 68px);
    --fs-h1: clamp(36px, 4.4vw, 58px);
    --fs-hxl: clamp(38px, 4.8vw, 60px);
    --fs-h2: clamp(26px, 2.6vw, 34px);
    --fs-h3: 22px; --fs-h4: 16.5px;
    --fs-lead: 19px; --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 12.5px; --fs-btn: 15.5px;
    --fs-row-h: clamp(30px, 3vw, 42px);   /* the h1-sized heading inside a row card */
    --fs-card-h: clamp(28px, 2.8vw, 38px); /* the heading inside the industries card */
    --ls-display: -0.032em; --ls-h1: -0.03em; --ls-h2: -0.022em; --ls-eyebrow: 0.09em;

    /* layout */
    --frame: 1240px; --stage: 1600px;
    --sec: 104px; --sec-x: 48px; --sec-tight: 64px;
    --gutter: 24px;

    /* shape */
    --r-5: 5px; --r-7: 7px; --r-8: 8px; --r-9: 9px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-pill: 999px;

    /* motion */
    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-tx: cubic-bezier(.65,0,.25,1);
    --dur: .2s;
    --shadow-card: 0 24px 48px -24px rgba(11,22,49,.28);
    --shadow-ui: 0 30px 60px -22px rgba(11,22,49,.28), 0 8px 20px -10px rgba(11,22,49,.12);
  }

  /* Washes: soft gradient backgrounds for art panels. Each one also sets --deep (shapes, logos, buttons in
     the mock-ups) and --tint (skeleton surfaces) for everything inside it. */
  .a-peach { --deep: #E2551B; --tint: #FBD5C4; background: radial-gradient(70% 80% at 90% 100%, #FFC6AE 0%, rgba(255,198,174,0) 70%), radial-gradient(60% 70% at 0% 100%, #E6DCFF 0%, rgba(230,220,255,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #FFF7F2 100%); }
  .a-mint  { --deep: #1F6F43; --tint: #D3F0D7; background: radial-gradient(70% 80% at 95% 100%, #BDEFDF 0%, rgba(189,239,223,0) 70%), radial-gradient(60% 70% at 5% 100%, #C9E6FF 0%, rgba(201,230,255,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F3FBF8 100%); }
  .a-sky   { --deep: #1D4ED8; --tint: #CFE0FB; background: radial-gradient(70% 80% at 90% 100%, #C7D9FF 0%, rgba(199,217,255,0) 70%), radial-gradient(60% 70% at 0% 100%, #E8DBFF 0%, rgba(232,219,255,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F4F6FF 100%); }
  .a-amber { --deep: #8A5A00; --tint: #FBE7BC; background: radial-gradient(70% 80% at 90% 100%, #FFE1A6 0%, rgba(255,225,166,0) 70%), radial-gradient(60% 70% at 0% 100%, #FFD1C2 0%, rgba(255,209,194,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #FFF9EE 100%); }
  .a-aqua  { --deep: #0F766E; --tint: #BDEDE6; background: radial-gradient(70% 80% at 90% 100%, #B4EEE7 0%, rgba(180,238,231,0) 70%), radial-gradient(60% 70% at 0% 100%, #CBE4FF 0%, rgba(203,228,255,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F2FBFA 100%); }
  .a-lilac { --deep: #6D4AFF; --tint: #E4DCFC; background: radial-gradient(70% 80% at 90% 100%, #DDD2FF 0%, rgba(221,210,255,0) 70%), radial-gradient(60% 70% at 0% 100%, #FFD6E8 0%, rgba(255,214,232,0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F8F5FF 100%); }
  .a-night { --deep: #60A5FA; --tint: #101E40; background: radial-gradient(60% 80% at 85% 15%, rgba(124,108,255,.38) 0%, rgba(124,108,255,0) 65%), radial-gradient(50% 60% at 10% 100%, rgba(45,212,191,.22) 0%, rgba(45,212,191,0) 65%), var(--navy); }

  /* status chips (mock-ups and the "who does what" table) */
  .st-ok { background: #DCFCE7; color: #166534; }
  .st-rev { background: #FEF3C7; color: #92400E; }
  .st-plan { background: #E0E7FF; color: #3730A3; }
  .st-prod { background: #FCE7F3; color: #9D174D; }

  /* article tiles: six gradient images with Ardena's A */
  .nimg { position: relative; overflow: hidden; background-color: #2B2F55; background-size: cover; background-position: center; }
  .nimg-1 { background-image: radial-gradient(70% 90% at 15% 15%, rgba(124,108,255,.95), rgba(124,108,255,0) 60%), radial-gradient(70% 80% at 90% 90%, rgba(45,212,191,.7), rgba(45,212,191,0) 60%), linear-gradient(135deg, #1E1B4B, #312E81); }
  .nimg-2 { background-image: radial-gradient(70% 90% at 85% 20%, rgba(45,212,191,.9), rgba(45,212,191,0) 60%), radial-gradient(70% 80% at 10% 90%, rgba(59,130,246,.75), rgba(59,130,246,0) 60%), linear-gradient(135deg, #0B3B3C, #0F4C5C); }
  .nimg-3 { background-image: radial-gradient(70% 90% at 20% 20%, rgba(251,191,36,.95), rgba(251,191,36,0) 60%), radial-gradient(70% 80% at 85% 85%, rgba(255,122,69,.85), rgba(255,122,69,0) 60%), linear-gradient(135deg, #4A2A12, #7A3B1E); }
  .nimg-4 { background-image: radial-gradient(70% 90% at 80% 15%, rgba(255,138,91,.95), rgba(255,138,91,0) 60%), radial-gradient(70% 80% at 15% 85%, rgba(244,114,182,.75), rgba(244,114,182,0) 60%), linear-gradient(135deg, #4A1F2E, #7A2E4A); }
  .nimg-5 { background-image: radial-gradient(70% 90% at 25% 80%, rgba(167,139,250,.9), rgba(167,139,250,0) 60%), radial-gradient(70% 80% at 85% 15%, rgba(96,165,250,.8), rgba(96,165,250,0) 60%), linear-gradient(135deg, #1F2A5C, #2E1F5C); }
  .nimg-6 { background-image: radial-gradient(70% 90% at 80% 80%, rgba(45,212,191,.85), rgba(45,212,191,0) 60%), radial-gradient(70% 80% at 15% 20%, rgba(167,139,250,.8), rgba(167,139,250,0) 60%), linear-gradient(135deg, #12324A, #1F2A5C); }
  .nimg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,48,0) 40%, rgba(10,26,48,.5) 100%); pointer-events: none; }
}

/* ---- 10-base.css ---- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  p { margin: 0; }
  a { color: inherit; }
  a:hover { color: inherit; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  ul, ol { margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .skip { position: absolute; left: 16px; top: -100px; z-index: 4000; padding: 12px 18px; border-radius: var(--r-7); background: var(--ink); color: var(--white); font-weight: var(--fw-medium); text-decoration: none; }
  .skip:focus-visible { top: 16px; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.js .js-hidden { display: none; }

  /* ---------- type ---------- */
  .mono { font-family: var(--font-mono); }
  .display { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-display); line-height: 1.04; letter-spacing: var(--ls-display); }
  .h1 { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-h1); line-height: 1.06; letter-spacing: var(--ls-h1); }
  .hxl { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-hxl); line-height: 1.04; letter-spacing: var(--ls-h1); }
  .h2 { margin: 0; font-weight: var(--fw-light); font-size: var(--fs-h2); line-height: 1.16; letter-spacing: var(--ls-h2); max-width: 860px; }
  .h3 { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.012em; }
  .h4 { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: 1.35; }
  .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--slate); }
  .body { font-size: var(--fs-body); line-height: 1.6; color: var(--slate); }
  .small { font-size: var(--fs-small); line-height: 1.5; color: var(--sub); }
  .lb { color: var(--ink); font-weight: var(--fw-medium); }
  /* the quieter second clause of a heading: |text| in content */
  .t { color: var(--sub); font-weight: var(--fw-light); }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sub); }
  .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); flex: none; }
  .eyebrow.plain::before { display: none; }
  /* gradient text: {text} in content */
  .gtext { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .gtext-warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
  /* legacy emphasis marks (_text_ ~text~ ^text^ %text%) emitted by content not yet rewritten: plain weight, coloured */
  em.accent-i { font-style: normal; font-weight: inherit; color: var(--ink); }
  em.accent-i--accent { color: var(--accent); }
  em.accent-i--aqua { color: var(--aqua); }
  em.accent-i--amber { color: var(--amber); }

  /* ---------- navy bands ---------- */
  .dark { background: var(--navy); color: var(--white); }
  .dark .t { color: var(--ntext); }
  .dark .lead, .dark .body { color: var(--nbody); }
  .dark .small { color: var(--ntext); }
  .dark .lb, .dark em.accent-i:not([class*="accent-i--"]) { color: var(--white); } /* plain emphasis goes white on dark; coloured variants keep their colour */
  .dark .eyebrow { color: var(--ntext); }
  .dark .gtext { background-image: var(--grad-dark); }
  .dark .ui .small, .dark .ui .body { color: var(--sub); }
  .dark .ui .lb { color: var(--ink); }
}

/* ---- 20-layout.css ---- */
@layer layout {
  /* ---------- bands, frame rails, hairlines ---------- */
  .band { position: relative; }
  .soft { background: var(--soft); }
  .frame { position: relative; max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .dark .frame { border-color: var(--nline); }
  /* the band after the hero gets a top hairline (the hero section carries .top) */
  .top + .band > .frame:first-child, main > .top:first-child + .band > .frame:first-child { border-top: 1px solid var(--line); }
  .sec { padding: var(--sec) var(--sec-x); }
  .sec-tight { padding: var(--sec-tight) var(--sec-x); }
  .hair { border-top: 1px solid var(--line); }
  .dark .hair { border-top-color: var(--nline); }
  .dots { background-image: radial-gradient(circle at 1px 1px, #DCE3EC 1px, transparent 1.5px); background-size: 20px 20px; }
  .dark .dots { background-image: radial-gradient(circle at 1px 1px, #22325A 1px, transparent 1.5px); }

  /* ---------- grids ---------- */
  .shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 56px; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: start; }
  .split.center { align-items: center; text-align: start; } /* the design's modifier centres the row, not the text (.center alone is the text utility) */
  .g2, .g3, .g4, .g5 { display: grid; gap: 16px; }
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
  .cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 40px; }
  .vstack { display: flex; flex-direction: column; }
  .span2 { grid-column: span 2; }
  .span3 { grid-column: 1 / -1; }
  .flip > :first-child { order: 2; }

  /* ---------- inner hero ---------- */
  .ihero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px 56px; align-items: center; padding: 72px var(--sec-x) 96px; }
  .ihero.start { align-items: start; }
  .ihero-art { position: relative; min-height: 440px; }
  .ihero-art.center { display: flex; flex-direction: column; justify-content: center; }
  .ihero-art.middle { display: flex; align-items: center; justify-content: center; }
  .ihero-art > .thr { opacity: .6; }
  .ihero-art > .thr.faint { opacity: .5; }
  .ihero-art > .thr.strong { opacity: .7; }
  .ihero-art .ihero-fill { position: absolute; inset: 0; }
  .ihero-art .ihero-fig { position: relative; width: 100%; }
  .sec-hero { padding-top: 72px; padding-bottom: 88px; }
  .sec-hero.short { padding-bottom: 56px; }
  .crumbs { margin: 0 0 26px; font-size: 14px; color: var(--sub); }
  .crumbs a { color: var(--sub); text-decoration: none; }
  .dark .crumbs, .dark .crumbs a { color: var(--ntext); }

  /* ---------- art panels: soft washes with threads ---------- */
  .art { position: relative; overflow: hidden; }
  .thr { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .fade-l { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%); }
  .news-art { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; }
  /* wave instances take their stroke from the wash they sit in (gradients live in art/waves-defs) */
  .thr use { stroke: url(#wg-mint); }
  .a-peach .thr use { stroke: url(#wg-peach); }
  .a-sky .thr use { stroke: url(#wg-sky); }
  .a-amber .thr use { stroke: url(#wg-amber); }
  .a-aqua .thr use { stroke: url(#wg-aqua); }
  .a-lilac .thr use { stroke: url(#wg-lilac); }
  .a-night .thr use { stroke: url(#wg-night); }
  svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
  .pad-x { padding: 0 var(--sec-x); }

  /* ---------- chip rows ---------- */
  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

  /* ---------- responsive ---------- */
  @media (max-width: 1024px) {
    .sec { padding: 88px 32px; }
    .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .split, .ihero { grid-template-columns: minmax(0, 1fr); }
    .ihero { padding: 44px 20px 64px; }
    .ihero-art { min-height: 340px; }
    .span2, .span3 { grid-column: auto; }
    .cols, .g3 { grid-template-columns: minmax(0, 1fr); }
    .flip > :first-child { order: 0; }
    .chip-row.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .chip-row.scroll::-webkit-scrollbar { display: none; }
    .chip-row.scroll > * { flex: none; }
  }
  @media (max-width: 700px) {
    .frame { border-left: 0; border-right: 0; }
    .sec { padding: 64px 20px; }
    .sec-tight { padding: 44px 20px; }
    .sec-hero { padding-top: 48px; padding-bottom: 56px; }
    .cols4, .g2, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
    .shead { margin-bottom: 36px; }
    .pad-x { padding: 0 20px; }
  }
}

@layer utilities {
  /* spacing (replaces the design's inline margin-top styles) */
  .mt4 { margin-top: 4px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; }
  .mt16 { margin-top: 16px; } .mt18 { margin-top: 18px; } .mt20 { margin-top: 20px; } .mt22 { margin-top: 22px; } .mt24 { margin-top: 24px; } .mt26 { margin-top: 26px; }
  .mt28 { margin-top: 28px; } .mt30 { margin-top: 30px; } .mt32 { margin-top: 32px; } .mt36 { margin-top: 36px; } .mt40 { margin-top: 40px; } .mt48 { margin-top: 48px; } .mt56 { margin-top: 56px; } .mt64 { margin-top: 64px; }
  .mb10 { margin-bottom: 10px; }
  /* measure */
  .mx280 { max-width: 280px; } .mx440 { max-width: 440px; } .mx480 { max-width: 480px; } .mx500 { max-width: 500px; } .mx520 { max-width: 520px; } .mx540 { max-width: 540px; } .mx560 { max-width: 560px; } .mx640 { max-width: 640px; } .mx680 { max-width: 680px; } .mx880 { max-width: 880px; } .mx980 { max-width: 980px; }
  /* flex helpers */
  .flex { display: flex; } .flex-c { display: flex; align-items: center; } .flex-s { display: flex; align-items: flex-start; } .flex-e { display: flex; align-items: flex-end; }
  .between { justify-content: space-between; } .jc { justify-content: center; } .wrap { flex-wrap: wrap; }
  .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap14 { gap: 14px; } .gap16 { gap: 16px; } .gap18 { gap: 18px; } .gap20 { gap: 20px; } .gap24 { gap: 24px; } .gap64 { gap: 64px; }
  .f1 { flex: 1; min-width: 0; } .fnone { flex: none; }
  .block { display: block; } .center { text-align: center; } .right { text-align: right; }
  .rel { position: relative; } .abs { position: absolute; } .fill { position: absolute; inset: 0; }
  .stretch { align-items: stretch; }
  .w100 { width: 100%; }
  .ink { color: var(--ink); } .white { color: var(--white); } .sub { color: var(--sub); } .slate { color: var(--slate); }
  .nowrap { white-space: nowrap; }
}

/* ---- 30-chrome.css ---- */
@layer components {
  /* ---------- navigation ---------- */
  .nav { position: relative; z-index: 40; background: var(--white); }
  .nav-in { max-width: var(--frame); margin: 0 auto; display: flex; align-items: center; gap: 20px; min-height: 68px; padding: 12px var(--gutter); }
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
  .brand-name { font-size: 22px; font-weight: var(--fw-medium); letter-spacing: -0.03em; line-height: 1; }
  .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 18px; }
  .nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-7); background: transparent; font-family: inherit; font-size: 15px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; cursor: pointer; }
  .nav-link[aria-current="page"] { background: #F1F4F9; }
  .nav-chev { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .nav-link[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
  .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .burger { display: none; width: 44px; height: 44px; border-radius: var(--r-9); border: 1px solid var(--line2); background: var(--white); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
  .burger svg { width: 20px; height: 20px; }
  .nav-m[open] .burger .ico-menu, .nav-m:not([open]) .burger .ico-close { display: none; }
  .nav.dark, .dark .nav { background: var(--navy); }
  :is(.nav.dark, .dark .nav) .nav-link { color: var(--white); }
  :is(.nav.dark, .dark .nav) .nav-link[aria-current="page"] { background: rgba(255,255,255,.08); }
  :is(.nav.dark, .dark .nav) .burger { border-color: #2C3C64; background: transparent; color: var(--white); }

  /* mega menu (Services) */
  .mega { position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%); width: min(1040px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 300px; background: var(--white); color: var(--ink); border-radius: var(--r-14); box-shadow: 0 40px 80px -24px rgba(11,22,49,.28), 0 0 0 1px rgba(11,22,49,.08); overflow: hidden; z-index: 50; }
  .mega-col { padding: 26px 24px; }
  .mega-h { margin: 0 0 6px; padding: 0 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: var(--fw-medium); color: var(--sub); }
  .mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 10px; border-radius: var(--r-9); text-decoration: none; color: var(--ink); }
  .mega-item b { display: block; font-weight: var(--fw-medium); font-size: 15px; }
  .mega-item span span { display: block; font-size: 13.5px; color: var(--sub); margin-top: 2px; }
  .mega-all { margin: 14px 10px 0; }
  .mega-side { background: var(--soft); border-left: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
  .mega-side .ui { box-shadow: 0 16px 30px -18px rgba(11,22,49,.35); }
  .dark .mega .lnk, .dark .mpanel .lnk { color: var(--ink); }
  .dark .mega .small, .dark .mpanel .small { color: var(--slate); }
  .dark .mega .ico, .dark .mpanel .ico { background: var(--white); border-color: var(--line2); }
  .dark .mega .live, .dark .mpanel .live { color: var(--sub); }
  .dark .mega .live b, .dark .mpanel .live b { color: var(--ink); }

  /* mobile panel (native <details class="nav-m">) */
  .nav-m { position: static; }
  .mpanel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -20px rgba(11,22,49,.25); padding: 8px 20px 24px; z-index: 50; }
  .mlink { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: var(--fw-regular); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
  .mpanel .btn-row { margin-top: 20px; }
  .mpanel .btn-row .btn { flex: 1; }
  .mpanel .currency { margin-top: 16px; }

  /* sub-navigation (section links on long pages) */
  .subnav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
  .dark .subnav { border-color: var(--nline); background: var(--navy); }
  .subnav-in { max-width: var(--frame); margin: 0 auto; display: flex; align-items: center; gap: 24px; min-height: 52px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .subnav-in::-webkit-scrollbar { display: none; }
  .subnav-in a { font-size: 14px; color: var(--sub); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .subnav-in a[aria-current="true"] { color: var(--ink); }
  .subnav-in .here { color: var(--ink); font-weight: var(--fw-medium); margin-right: auto; white-space: nowrap; }
  .dark .subnav-in a { color: var(--ntext); }
  .dark .subnav-in .here, .dark .subnav-in a[aria-current="true"] { color: var(--white); }

  /* currency pill (hidden by JS when the page has no prices) */
  .currency { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--white); color: var(--slate); font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .04em; cursor: pointer; }
  :is(.nav.dark, .dark .nav) .currency { background: transparent; border-color: #2C3C64; color: var(--white); }

  /* ---------- closing call to action ---------- */
  .cta-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
  .cta-grid .btn-row { margin-top: 30px; }

  /* ---------- footer ---------- */
  .foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .foot-col { padding: 44px 28px 52px; border-left: 1px solid var(--line); }
  .foot-col:first-child { border-left: 0; }
  .foot-col .brand-name { color: var(--ink); }
  .foot-tag { margin-top: 18px; max-width: 280px; }
  .foot-h { margin: 0 0 14px; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); }
  .foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .foot-col a { font-size: 14px; color: var(--sub); text-decoration: none; }
  .foot-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--sub); }
  .foot-bot a { color: var(--sub); text-decoration: none; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

  /* ---------- cookie notice (12px card, bottom left) ---------- */
  .cookie { position: fixed; left: 16px; right: 84px; bottom: 16px; z-index: 2900; max-width: 440px; padding: 18px 20px; border-radius: var(--r-12); background: var(--white); color: var(--ink); border: 1px solid var(--line2); box-shadow: 0 24px 48px -16px rgba(11,22,49,.28); transform: translateY(16px); opacity: 0; pointer-events: none; }
  .cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .cookie__title { margin: 0 0 6px; font-size: 15px; font-weight: var(--fw-medium); }
  .cookie__body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--slate); }
  .cookie__body a { color: var(--ink); }
  .cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .cookie__actions .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }

  /* ---------- floating quick-contact buttons ---------- */
  .float-contact { position: fixed; right: 16px; bottom: 16px; z-index: 2800; display: flex; flex-direction: column; gap: 8px; }
  .float-contact__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--white); box-shadow: 0 10px 24px -10px rgba(11,22,49,.5); text-decoration: none; }
  .float-contact__btn svg { width: 22px; height: 22px; }
  @media print { .float-contact, .cookie, .tx, .tx-mark { display: none; } }

  /* ---------- responsive ---------- */
  @media (max-width: 1024px) {
    .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .foot-col { border-top: 1px solid var(--line); }
    .foot-col:first-child { grid-column: 1 / -1; border-top: 0; }
    .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cta-grid > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) {
    .nav-links, .nav-right .btn, .nav-right .lnk, .nav-right > .currency { display: none; }
    .burger { display: inline-flex; }
    .mega { display: none; }
  }
  @media (min-width: 901px) { .nav-m { display: none; } }
  @media (max-width: 700px) {
    .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-col { padding: 32px 20px; }
    .foot-col:nth-child(2n+2) { border-left: 0; }
    .foot-bot { padding: 22px 20px; }
    .cta-grid { grid-template-columns: minmax(0, 1fr); }
    .cookie { right: 16px; }
  }
}

/* ---- 40-components.css ---- */
@layer components {
  /* ---------- buttons and links ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: var(--r-7); border: 1px solid transparent; font-family: inherit; font-size: var(--fs-btn); font-weight: var(--fw-medium); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; }
  .btn-p { background: var(--accent); color: var(--ink); }
  .btn-ink { background: var(--ink); color: var(--white); }
  .btn-g { background: var(--white); color: var(--ink); border-color: var(--line2); }
  .dark .btn-g { background: transparent; color: var(--white); border-color: #2C3C64; }
  .btn-w { background: var(--white); color: var(--ink); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .lnk { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-size: var(--fs-btn); font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; }
  .dark .lnk { color: var(--white); }
  .arr { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .lnk .arr { color: var(--accent); }
  .arr .al { stroke-opacity: 0; }
  .ibtn { width: 34px; height: 34px; flex: none; border-radius: var(--r-8); background: #F1F4F9; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; text-decoration: none; cursor: pointer; font: inherit; }
  .ibtn svg { width: 12px; height: 12px; }
  .dark .ibtn { background: #17254A; color: var(--white); }

  /* ---------- pills, badges, icons ---------- */
  .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--white); font-size: 13.5px; color: var(--slate); text-decoration: none; white-space: nowrap; }
  .pill.tall { min-height: 40px; }
  .dark .pill { background: rgba(255,255,255,.03); border-color: #26375F; color: #C3CEE2; }
  .pill.glass { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); color: var(--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: #F1F4F9; font-size: 13px; color: var(--slate); text-decoration: none; }
  .badge b { background: var(--white); border-radius: var(--r-pill); padding: 3px 9px; font-weight: var(--fw-medium); color: var(--ink); }
  .dark .badge { background: #16244A; color: #C3CEE2; }
  .dark .badge b { background: #22335F; color: var(--white); }
  .ico { width: 38px; height: 38px; flex: none; border-radius: var(--r-9); border: 1px solid var(--line2); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
  .ico svg { width: 18px; height: 18px; }
  .dark .ico { background: #13214A; border-color: #26375F; color: var(--white); }
  .dark .ico.light { background: var(--white); border-color: var(--line2); color: var(--ink); }
  .live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--sub); }
  .live.center { justify-content: center; width: 100%; }
  .dark .live { color: var(--ntext); }
  .live b { font-weight: var(--fw-medium); color: var(--ink); }
  .dark .live b { color: var(--white); }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 14px; height: 14px; fill: var(--accent); }
  .m-num { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; }
  .m-num.c0 { color: #157A74; } .m-num.c1 { color: #B07A10; } .m-num.c2 { color: #13618B; } .m-num.c3 { color: #E2551B; }
  .dark .m-num.c0 { color: var(--aqua); } .dark .m-num.c1 { color: var(--amber); } .dark .m-num.c2 { color: var(--sky); } .dark .m-num.c3 { color: #FF8A5B; }

  /* ---------- cards ---------- */
  .card { position: relative; background: var(--white); border: 1px solid var(--line2); border-radius: var(--r-12); overflow: hidden; }
  .dark .card, .card.dark { background: var(--navy2); border-color: var(--nline); }
  .card.dark.art { background-color: var(--navy); }
  a.card { display: block; text-decoration: none; color: inherit; }
  a.card.dark, a.card.dark:hover { color: var(--white); }
  .cpad { padding: 28px; }
  .cpad.lg { padding: 36px; }
  .chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 26px 0; }
  .feat { display: flex; flex-direction: column; gap: 12px; }
  .ftt { position: relative; margin: 4px 0 0; padding-left: 14px; font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.35; }
  .ftt::before { content: ""; position: absolute; left: 0; top: 2px; width: 2px; height: 17px; border-radius: 2px; background: var(--accent); }
  .row-h { font-size: var(--fs-row-h); }
  .card-h { font-size: var(--fs-card-h); }
  /* a small card that is one link: icon, text, arrow */
  .card.link-row { display: flex; align-items: center; gap: 14px; }
  .card.link-row .lnk { margin-left: auto; }

  /* ---------- row card: copy on one side, art on the other ---------- */
  .row-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line2); border-radius: var(--r-14); overflow: hidden; background: var(--white); }
  .row-card > .cpad { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
  .row-card > .art { min-height: 400px; }
  a.row-card { display: grid; }
  .row-card .nimg { min-height: 340px; }
  .stage { position: relative; border-radius: var(--r-14); border: 1px solid var(--line2); overflow: hidden; }
  .stage .cap { position: absolute; left: 22px; bottom: 18px; }
  .shot-note { position: absolute; right: 22px; top: 16px; }
  .avatar { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-12); overflow: hidden; border: 1px solid var(--line2); }
  .av-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(10,26,48,.28); }
  .av-ic svg { width: 40px; height: 40px; }

  /* ---------- segments, checks, forms ---------- */
  .seg { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--white); font-family: inherit; font-size: 14.5px; font-weight: var(--fw-medium); color: var(--slate); cursor: pointer; white-space: nowrap; text-decoration: none; }
  .seg.on, .seg[aria-pressed="true"], .seg[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r-pill); font-size: 14.5px; cursor: pointer; background: var(--white); }
  .check input { margin: 0; width: 15px; height: 15px; accent-color: var(--ink); }
  .form { display: flex; flex-direction: column; gap: 18px; }
  .form.ui { padding: clamp(22px, 3vw, 36px); font-size: 16px; }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .field { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); }
  .dark .field { color: var(--white); }
  .dark .card .field { color: var(--white); }
  .field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r-7); background: var(--white); font-family: inherit; font-size: 16px; font-weight: var(--fw-regular); color: var(--ink); box-shadow: 0 1px 1px rgba(11,22,49,.04); }
  .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230A1A30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
  .field textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #FF8A5B; box-shadow: 0 0 0 3px rgba(255,90,31,.18); }
  .field.full { grid-column: 1 / -1; }
  .form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
  .form-legend { margin-bottom: 10px; }
  .form-note { font-size: 14px; color: var(--sub); }

  /* ---------- tables ---------- */
  .tbl-wrap { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--r-12); }
  .tbl { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--fs-btn); text-align: left; }
  .tbl th, .tbl td { padding: 18px 22px; border-top: 1px solid var(--line); }
  .tbl thead th { border-top: 0; background: var(--soft); font-weight: var(--fw-medium); font-size: 14px; color: var(--sub); }
  .tbl thead th.hl { color: var(--ink); background: #FFF1EB; }
  .tbl tbody th { font-weight: var(--fw-medium); }
  .tbl td { color: var(--slate); }
  .tbl .hl { background: #FFF6F1; color: var(--ink); }
  .meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
  .meta dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
  .dark .meta { border-top-color: var(--nline); }
  .dark .meta dt { color: var(--ntext); }
  .meta dd { margin: 8px 0 0; font-size: 17px; }

  /* ---------- plans ---------- */
  .plan { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
  .plan-price { font-weight: var(--fw-light); font-size: 44px; letter-spacing: -0.035em; line-height: 1; }
  .plan-price .small { font-size: var(--fs-small); letter-spacing: 0; }
  .plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .plan li { display: flex; gap: 10px; font-size: var(--fs-btn); }
  .plan li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--aqua); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .plan-head { display: flex; justify-content: space-between; align-items: center; }
  .ring { box-shadow: 0 0 0 2px var(--accent), 0 30px 60px -30px rgba(0,0,0,.5); }
  .dark .plan.ring { background: var(--white); color: var(--ink); }
  .dark .plan.ring .body, .dark .plan.ring ul { color: var(--slate); }
  .dark .plan.ring .small { color: var(--sub); }
  .dark .plan.ring .ico { background: var(--white); border-color: var(--line2); color: var(--ink); }

  /* ---------- stats ---------- */
  .stats { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
  .stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats::after { content: ""; position: absolute; top: -1px; left: -30%; width: 30%; height: 1px; background: linear-gradient(90deg, rgba(255,90,31,0), var(--accent), rgba(167,139,250,0)); }
  .stat { padding: 38px 28px 34px; border-left: 1px solid var(--line); }
  .stat:first-child { border-left: 0; }
  .stat-n { font-weight: var(--fw-light); font-size: clamp(40px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.04em; }
  .stat-l { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--sub); }
  .dark .stats, .dark .stat { border-color: var(--nline); }
  .dark .stat-l { color: var(--ntext); }
  .stats.boxed { border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 var(--r-16) var(--r-16); }

  /* ---------- timeline ---------- */
  .tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .dark .tl { border-color: var(--nline); }
  .tl li { position: relative; padding: 34px 28px 0 0; }
  .tl-dot { position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--aqua); }
  .tl-dot.sq { border-radius: 3px; }
  .tl-dot.diamond { border-radius: 3px; transform: rotate(45deg); }
  .tl-dot.c0 { background: var(--aqua); } .tl-dot.c1 { background: var(--amber); } .tl-dot.c2 { background: var(--sky); } .tl-dot.c3 { background: #FF8A5B; }
  .tl-dot.end { background: var(--white); box-shadow: 0 0 0 4px rgba(255,90,31,.45); }
  .tl .m-num.c0 { color: var(--aqua); } .tl .m-num.c1 { color: var(--amber); } .tl .m-num.c2 { color: var(--sky); } .tl .m-num.c3 { color: #FF8A5B; } .tl .m-num.end { color: var(--white); }

  /* ---------- faq (native details) ---------- */
  .faq { border-bottom: 1px solid var(--line); }
  .faq-row { border-top: 1px solid var(--line); }
  .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 16px 0; border: 0; background: transparent; font-family: inherit; font-size: 18.5px; font-weight: var(--fw-regular); letter-spacing: -0.01em; color: var(--ink); text-align: left; cursor: pointer; }
  .faq-a { padding: 0 64px 26px 0; font-size: 16px; line-height: 1.6; color: var(--slate); }
  .plus { width: 34px; height: 34px; flex: none; border-radius: var(--r-8); background: #F1F4F9; display: inline-flex; align-items: center; justify-content: center; }
  .plus svg { width: 12px; height: 12px; }
  details[open] > summary .plus, .acc-head[aria-expanded="true"] .plus { background: #E4E9F2; }
  details[open] > summary .plus svg, .acc-head[aria-expanded="true"] .plus svg { transform: rotate(45deg); }
  .dark .faq, .dark .faq-row { border-color: var(--nline); }
  .dark .faq-q { color: var(--white); }
  .dark .faq-a { color: var(--nbody); }
  .dark .plus { background: #17254A; color: var(--white); }

  /* ---------- work accordion (native details name="work") ---------- */
  .acc { border-bottom: 1px solid var(--line); }
  .acc-row { border-top: 1px solid var(--line); }
  .acc-head { width: 100%; display: flex; align-items: center; gap: 18px; min-height: 82px; padding: 14px 4px; border: 0; background: transparent; font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; }
  .ltile { width: 42px; height: 42px; flex: none; border-radius: var(--r-10); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: var(--fw-medium); color: var(--ink); background: var(--tint, var(--soft)); }
  .acc-title { flex: 1; min-width: 0; font-size: clamp(18px, 1.7vw, 23px); font-weight: var(--fw-regular); letter-spacing: -0.015em; line-height: 1.3; }
  .acc-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); white-space: nowrap; }
  .acc-tag.block { display: block; margin-top: 16px; white-space: normal; }
  .acc-body { padding: 4px 0 28px; }
  .acc-stage { position: relative; height: 440px; border-radius: var(--r-12); border: 1px solid var(--line2); overflow: hidden; }
  .acc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; font-size: 14.5px; color: var(--sub); }
  .acc-meta b { color: var(--ink); font-weight: var(--fw-medium); }
  .acc-body .btn-row { margin-top: 20px; }

  /* ---------- client logo slot (shows the name until the file arrives) ---------- */
  .lslot { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 104px; height: 40px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r-9); background: var(--white); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--slate); white-space: nowrap; }
  .lslot img { max-height: 22px; max-width: 120px; width: auto; }

  /* ---------- article tile mark ---------- */
  .amark { position: absolute; right: -6%; bottom: -16%; height: 118%; width: auto; fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.6); stroke-width: .5; pointer-events: none; }
  .nimg .news-t { color: var(--white); }

  /* ---------- toasts, meters, bars, swatches ---------- */
  .toast { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--white); border: 1px solid #E2E8F0; border-radius: var(--r-10); box-shadow: 0 18px 36px -14px rgba(11,22,49,.3); font-size: 12px; color: var(--ink); white-space: nowrap; }
  .toast b { font-weight: var(--fw-medium); }
  .toast-i { width: 24px; height: 24px; border-radius: var(--r-7); display: inline-flex; align-items: center; justify-content: center; flex: none; background: #F1F4F9; }
  .toast-i svg { width: 12px; height: 12px; }
  .ti-green { background: #DCFCE7; color: #16A34A; } .ti-orange { background: #FFEDD5; color: #E2551B; } .ti-indigo { background: #E0E7FF; color: #4338CA; } .ti-teal { background: #CCFBF1; color: #0F766E; }
  .ti-peach { background: #FFE4D6; color: #E2551B; } .ti-violet { background: #EDE9FE; color: #5B21B6; } .ti-amber { background: #FEF3C7; color: #92400E; } .ti-rose { background: #FFE4E6; color: #BE123C; } .ti-lilac { background: #EEEBFF; color: #5B4BDB; }
  .meter { height: 6px; border-radius: var(--r-pill); background: #EEF2F7; overflow: hidden; }
  .meter span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-meter); width: var(--w, 60%); }
  .bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
  .bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #A78BFA, #60A5FA); height: var(--h, 50%); }
  .swatch { height: 44px; border-radius: var(--r-7); }
  .sk { display: block; height: 7px; border-radius: 4px; background: #E8EDF4; }

  /* ---------- responsive ---------- */
  @media (max-width: 1024px) {
    .stats, .stats.stats-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat { border-left: 0; border-top: 1px solid var(--line); }
    .dark .stat { border-top-color: var(--nline); }
  }
  @media (max-width: 900px) {
    .tl { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--line); gap: 30px; padding-left: 26px; }
    .dark .tl { border-left-color: var(--nline); }
    .tl li { padding: 0; }
    .tl-dot { left: -33px; top: 5px; }
    .row-card { grid-template-columns: minmax(0, 1fr); }
    .row-card > .art { min-height: 340px; }
    .acc-stage { height: 360px; }
    .acc-meta { grid-template-columns: minmax(0, 1fr); }
    .acc-head > .acc-tag { display: none; }
  }
  @media (max-width: 700px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .stats, .stats.stats-3, .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: 28px 20px; }
    .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chead { padding: 22px 20px 0; }
    .cpad { padding: 22px; }
    .faq-a { padding-right: 0; }
  }
}

/* ---- 45-mocks.css ---- */
@layer components {
  /* ============================================================
     UI mock-up kit: small browser windows, toasts and device frames that sit on the art panels.
     Colours come from classes (variant nth-children) or from the wash (--deep / --tint), never inline.
     ============================================================ */
  .ui { position: relative; background: var(--white); border: 1px solid #E2E8F0; border-radius: var(--r-10); box-shadow: var(--shadow-ui); color: var(--ink); overflow: hidden; font-size: 12px; line-height: 1.4; text-align: left; }
  .ui.md { font-size: 14px; }
  .ui-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-bottom: 1px solid #EEF2F7; background: #FBFCFE; }
  .ui-bar i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #DDE3EC; }
  .ui-url { margin-left: 8px; height: 18px; flex: 1; max-width: 230px; border-radius: var(--r-5); background: #F1F4F8; display: flex; align-items: center; padding: 0 8px; font-family: var(--font-mono); font-size: 9.5px; color: #8695AA; white-space: nowrap; overflow: hidden; }
  .ui-p { padding: 14px; }
  .ui-p.lg { padding: 18px; }
  .ui-p.tight { padding: 8px 20px 12px; }
  .ui-k { font-size: 10.5px; color: #7A889D; }
  .ui-v { font-size: 13px; font-weight: var(--fw-medium); color: var(--ink); }
  .ui-v.lg { font-size: 15px; }
  .ui-head { display: flex; justify-content: space-between; align-items: center; }
  .ui-head.top { align-items: flex-start; }
  .ui-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F0F3F7; }
  .ui-row.lg { padding: 14px 0; font-size: 16px; }
  .ui-row.first { border-top: 0; }
  .ui-row.start { justify-content: flex-start; gap: 14px; }
  .ui-row.on-art { border-color: rgba(10,26,48,.08); }
  .ui-list { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .ui-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid #F0F3F7; background: #FBFCFE; }
  .ui-foot .ui-v { margin-left: auto; font-size: 12px; }
  .ui-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: var(--fw-medium); white-space: nowrap; }
  .ui-chip.muted { background: #F1F4F8; color: #6B7A91; }
  .ui-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-5); background: var(--ink); color: var(--white); font-size: 10.5px; font-weight: var(--fw-medium); white-space: nowrap; }
  .ui-btn.g { background: #EEF2F7; color: var(--ink); }
  .ui-btn.h20 { height: 20px; } .ui-btn.h22 { height: 22px; }
  .ui-btn.indigo { background: #4F46E5; } .ui-btn.teal { background: #0F766E; }
  .ui-btn.outline { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px #DCE3EC; }
  .ui-btns { display: flex; gap: 6px; }

  /* mock-ups that change: four variants stacked in one cell, shown one after another */
  .cyc { display: grid; }
  .cyc > .cv { grid-area: 1 / 1; min-width: 0; }
  .cb1 { --cb: -1.2s; } .cb2 { --cb: -2.4s; } .cb3 { --cb: -3.4s; }
  .ui-url.cyc { display: grid; align-items: center; }
  .cyc.toasts { justify-items: end; }
  .cyc.toasts .toast { position: relative; }

  /* ---------- M-WEB: four websites in one window ---------- */
  .mw-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #F0F3F7; }
  .mw-brand { display: flex; align-items: center; gap: 6px; }
  .mw-logo { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--ink); }
  .mw-links { display: flex; align-items: center; gap: 10px; }
  .mw-links .sk { width: 28px; }
  .mw-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; padding: 16px 14px 12px; }
  .mw-h { font-size: 17px; font-weight: var(--fw-light); letter-spacing: -0.025em; line-height: 1.14; color: var(--ink); }
  .mw-btns { display: flex; gap: 6px; margin-top: 12px; }
  .mw-btns.center { justify-content: center; }
  .mw-img { position: relative; min-height: 104px; border-radius: var(--r-8); overflow: hidden; background: linear-gradient(135deg, #BDEFDF 0%, #C9E6FF 55%, #E3D9FF 100%); }
  .mw-float { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: var(--r-7); background: var(--white); box-shadow: 0 8px 18px -10px rgba(11,22,49,.4); }
  .mw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; }
  .mw-card { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid #EEF2F7; border-radius: var(--r-7); color: var(--ink); }
  .mw-card svg { width: 14px; height: 14px; }
  .mw-search { flex: 1; max-width: 170px; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: var(--r-pill); background: #F1F4F8; color: #8695AA; }
  .mw-search svg { width: 11px; height: 11px; flex: none; }
  .mw-search .sk { background: #E2E8F0; width: 60%; }
  .mw-cart { position: relative; display: inline-flex; color: var(--ink); }
  .mw-cart svg { width: 15px; height: 15px; }
  .mw-cart b { position: absolute; top: -5px; right: -7px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--accent); color: var(--ink); font-size: 8.5px; font-weight: var(--fw-medium); display: flex; align-items: center; justify-content: center; }
  .mw-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 14px 0; padding: 8px 10px; border-radius: var(--r-8); background: #FFF4EC; font-size: 11.5px; color: var(--ink); }
  .mw-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 14px; }
  .mw-prod { display: flex; flex-direction: column; gap: 6px; }
  .mw-pimg { display: block; aspect-ratio: 1 / 1.05; border-radius: var(--r-7); }
  .mw-prod:nth-child(1) .mw-pimg { background: linear-gradient(160deg, #FFE7D6, #FFC6A8); }
  .mw-prod:nth-child(2) .mw-pimg { background: linear-gradient(160deg, #E4F3EE, #B9E6D6); }
  .mw-prod:nth-child(3) .mw-pimg { background: linear-gradient(160deg, #ECE8FF, #CFC5FF); }
  .mw-prod:nth-child(4) .mw-pimg { background: linear-gradient(160deg, #FFF3D1, #FFE09A); }
  .mw-price { font-size: 11px; font-weight: var(--fw-medium); color: var(--ink); }
  .mw-saas { padding: 14px 14px 0; }
  .mw-app { display: grid; grid-template-columns: 64px minmax(0, 1fr); margin-top: 12px; border: 1px solid #EEF2F7; border-bottom: 0; border-radius: var(--r-8) var(--r-8) 0 0; overflow: hidden; }
  .mw-side { display: flex; flex-direction: column; gap: 7px; padding: 10px 8px; background: #F7F8FC; border-right: 1px solid #EEF2F7; }
  .mw-main { padding: 9px 10px 10px; }
  .mw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mw-stats div { display: flex; flex-direction: column; gap: 2px; padding: 6px 7px; border: 1px solid #EEF2F7; border-radius: 6px; }
  .mw-main .bars { height: 34px; margin-top: 8px; }
  .mw-care { padding: 16px 14px 14px; }
  .mw-find { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 5px 5px 10px; border: 1px solid #E2E8F0; border-radius: var(--r-8); font-size: 11px; color: var(--slate); }
  .mw-find > span { display: inline-flex; align-items: center; gap: 5px; }
  .mw-find svg { width: 12px; height: 12px; }
  .mw-loc { padding-left: 8px; border-left: 1px solid #EEF2F7; }
  .mw-find .ui-btn { margin-left: auto; }
  .mw-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .mw-doc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px; border: 1px solid #EEF2F7; border-radius: var(--r-8); }
  .mw-av { width: 26px; height: 26px; border-radius: 50%; }
  .mw-doc:nth-child(1) .mw-av { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); }
  .mw-doc:nth-child(2) .mw-av { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); }
  .mw-doc:nth-child(3) .mw-av { background: linear-gradient(135deg, #FFEDD5, #FDBA74); }
  /* the four site variants, in order: advice firm, shop, SaaS, hospital */
  .mw-cyc > .cv:nth-child(1) .mw-logo { background: #0A1A30; }
  .mw-cyc > .cv:nth-child(2) .mw-logo { background: #FF7A45; }
  .mw-cyc > .cv:nth-child(3) .mw-logo { background: #6366F1; }
  .mw-cyc > .cv:nth-child(4) .mw-logo { background: #0F766E; }

  /* ---------- M-DESIGN: four brand systems ---------- */
  .md-head { display: flex; align-items: center; gap: 8px; }
  .md-mark { width: 22px; height: 22px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-medium); }
  .md-head .ui-k { margin-left: auto; }
  .md-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .md-sw > div:nth-child(4) .swatch { border: 1px solid #E7ECF3; }
  .md-type { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #F0F3F7; }
  .md-aa { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
  .md-btns { display: flex; gap: 6px; margin-top: 12px; }
  .md-cyc > .cv:nth-child(1) { --b1: #0A1A30; --b2: #FF7A45; --b3: #2DD4BF; --b4: #F7F9FC; --mk: #FF7A45; --pk: #0A1A30; --ff: var(--font-body); --fwa: 300; }
  .md-cyc > .cv:nth-child(2) { --b1: #1F3A2E; --b2: #8CBF7A; --b3: #C9734B; --b4: #F2E8D5; --mk: #F2E8D5; --pk: #F2E8D5; --ff: Georgia, "Times New Roman", serif; --fwa: 400; }
  .md-cyc > .cv:nth-child(3) { --b1: #1E1B4B; --b2: #8B5CF6; --b3: #F472B6; --b4: #EEF2FF; --mk: #C4B5FD; --pk: #FFFFFF; --ff: var(--font-mono); --fwa: 400; }
  .md-cyc > .cv:nth-child(4) { --b1: #3B1D0F; --b2: #F59E0B; --b3: #FDE68A; --b4: #FFF7ED; --mk: #3B1D0F; --pk: #3B1D0F; --ff: "Trebuchet MS", "Segoe UI", sans-serif; --fwa: 400; }
  .md-cyc .md-mark { background: var(--b1); color: var(--mk); font-family: var(--ff); }
  .md-cyc > .cv:nth-child(4) .md-mark { background: var(--b2); }
  .md-cyc .md-sw > div:nth-child(1) .swatch { background: var(--b1); }
  .md-cyc .md-sw > div:nth-child(2) .swatch { background: var(--b2); }
  .md-cyc .md-sw > div:nth-child(3) .swatch { background: var(--b3); }
  .md-cyc .md-sw > div:nth-child(4) .swatch { background: var(--b4); }
  .md-cyc .md-aa { font-family: var(--ff); font-weight: var(--fwa); }
  .md-cyc .md-btns .ui-btn:first-child { background: var(--b2); color: var(--pk); }
  .md-cyc > .cv:nth-child(2) .md-btns .ui-btn:first-child { background: var(--b1); }

  /* ---------- M-SEARCH: AI answers and Google results ---------- */
  .ms-ai { display: flex; gap: 8px; align-items: center; }
  .ms-q { margin-top: 10px !important; padding: 8px 10px; border-radius: var(--r-8); background: #F4F6FA; font-size: 11.5px; color: var(--slate); }
  .ms-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .ms-cite { background: #FFF1EB; color: var(--aink); }
  .ms-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid #E2E8F0; border-radius: var(--r-pill); font-size: 11.5px; color: var(--slate); }
  .ms-bar svg { width: 12px; height: 12px; flex: none; }
  .ms-res { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-8); }
  .ms-res.on { background: #F4F7FE; box-shadow: inset 0 0 0 1px #DCE6FB; }
  .ms-n { width: 18px; height: 18px; flex: none; border-radius: var(--r-5); background: #EEF2F7; font-size: 10px; font-weight: var(--fw-medium); display: inline-flex; align-items: center; justify-content: center; color: var(--slate); }
  .ms-res.on .ms-n { background: #3B82F6; color: var(--white); }
  .ms-url { display: block; font-size: 10px; color: #15803D; }
  .ms-t { display: block; font-size: 12.5px; font-weight: var(--fw-medium); color: #1D4ED8; }
  .ms-map { position: relative; height: 62px; margin-top: 9px; border-radius: var(--r-8); overflow: hidden; background: #EEF4EA; }
  .ms-road { position: absolute; left: 0; right: 0; top: 38%; height: 6px; background: var(--white); }
  .ms-road.v { top: 0; bottom: 0; left: 34%; right: auto; width: 6px; height: auto; }
  .ms-pin { position: absolute; left: 60%; top: 22%; width: 24px; height: 24px; border-radius: 50%; background: #EF4444; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px -6px rgba(239,68,68,.8); }
  .ms-pin svg { width: 13px; height: 13px; }
  .ms-stat { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .ms-big { font-size: 26px; font-weight: var(--fw-light); letter-spacing: -0.03em; line-height: 1; }
  .ms-stat svg { width: 96px; height: 30px; }

  /* ---------- M-VIDEO: a player with four clips ---------- */
  .mv-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
  .mv-frame > .cv { position: relative; overflow: hidden; }
  .mv-frame > .cv:nth-child(1) { background: linear-gradient(135deg, #1B2A55 0%, #3B2C6B 45%, #A0456A 75%, #FF8A5B 100%); }
  .mv-frame > .cv:nth-child(2) { background: linear-gradient(160deg, #EEF2FF 0%, #F8FAFC 100%); }
  .mv-frame > .cv:nth-child(3) { background: radial-gradient(60% 80% at 70% 30%, #E8A07A 0%, rgba(232,160,122,0) 70%), linear-gradient(135deg, #2B1D3A 0%, #6B3A55 60%, #C76F5B 100%); }
  .mv-frame > .cv:nth-child(4) { background: #0F172A; }
  .mv-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mv-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; padding-left: 3px; }
  .mv-play svg { width: 16px; height: 16px; }
  .mv-l { position: absolute; left: 12px; bottom: 10px; color: var(--white); font-size: 13px; }
  .mv-d { position: absolute; right: 12px; bottom: 10px; color: var(--white); font-size: 11px; opacity: .85; }
  .mv-d.ink { color: var(--ink); }
  .mv-app { position: absolute; left: 14%; right: 14%; top: 12%; bottom: 22%; border-radius: var(--r-8); background: var(--white); box-shadow: 0 18px 30px -18px rgba(11,22,49,.45); overflow: hidden; }
  .mv-app-bar { display: flex; gap: 4px; padding: 7px 9px; border-bottom: 1px solid #EEF2F7; }
  .mv-app-bar i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #DDE3EC; }
  .mv-app-in { position: relative; padding: 12px; }
  .mv-app-in .ui-btn { margin-top: 10px; }
  .mv-cursor { position: absolute; left: 60%; top: 62%; }
  .mv-cursor svg { width: 14px; height: 14px; }
  .mv-cap { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r-5); background: rgba(10,26,48,.78); color: var(--white); font-size: 11.5px; white-space: nowrap; }
  .mv-person { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: .35; }
  .mv-person svg { width: 64px; height: 64px; }
  .mv-third { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.94); color: var(--ink); font-size: 11px; }
  .mv-third b { font-weight: var(--fw-medium); font-size: 12.5px; }
  .mv-reels { position: absolute; inset: 12% 0 20%; display: flex; justify-content: center; gap: 10px; }
  .mv-reels span { height: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-8); display: inline-flex; align-items: center; justify-content: center; }
  .mv-reels span svg { width: 12px; height: 12px; }
  .mv-reels span:nth-child(1) { background: linear-gradient(160deg, #7C6CFF, #F472B6); }
  .mv-reels span:nth-child(2) { background: linear-gradient(160deg, #14B8A6, #3B82F6); }
  .mv-reels span:nth-child(3) { background: linear-gradient(160deg, #F59E0B, #FF7A45); }
  .mv-prog { position: relative; height: 6px; border-radius: var(--r-pill); background: #EEF2F7; }
  .mv-prog span { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; border-radius: var(--r-pill); background: linear-gradient(90deg, #FBBF24, #FF7A45); }
  .mv-prog i { position: absolute; top: 50%; left: 42%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px #FF7A45; }
  .mv-marks { display: flex; justify-content: space-between; margin-top: 9px; }

  /* ---------- M-DEVICE: projects on desktop, tablet and phone ---------- */
  .dev { position: absolute; inset: 0; }
  .dev-desk { position: absolute; left: 9%; top: 9%; width: 52%; }
  .dev-desk .dev-scr { aspect-ratio: 16 / 9.4; }
  .dev-tab { position: absolute; left: 59%; top: 17%; width: 19%; aspect-ratio: 3 / 4; padding: 6px; border-radius: 17px; background: #0B1631; box-shadow: 0 30px 60px -26px rgba(11,22,49,.5); }
  .dev-phone { position: absolute; left: 80.5%; top: 30%; width: 10.2%; aspect-ratio: 9 / 19; padding: 4px; border-radius: 16px; background: #0B1631; box-shadow: 0 30px 60px -24px rgba(11,22,49,.55); }
  .dev-tab .dev-scr, .dev-phone .dev-scr { height: 100%; border-radius: 12px; }
  .dev-scr { position: relative; overflow: hidden; background: var(--white); }
  .dev-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .dev.hero .dev-desk { left: 0; top: 6%; width: 84%; }
  .dev.hero .dev-tab { left: 64%; top: 36%; width: 30%; }
  .dev.hero .dev-phone { left: 2%; top: 50%; width: 16%; }
  .dev.sm .dev-desk { left: 7%; top: 12%; width: 62%; }
  .dev.sm .dev-tab { left: 63%; top: 22%; width: 21%; }
  .dev.sm .dev-phone { left: 85%; top: 36%; width: 11%; }
  /* skeleton screens inside a frame, coloured by the wash */
  .sx-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7% 6% 5%; border-bottom: 1px solid #EEF2F7; }
  .dev-desk .sx-nav { padding: 9px 14px; }
  .sx-logo { width: 34px; height: 8px; border-radius: 3px; background: var(--deep, var(--ink)); }
  .dev-phone .sx-logo { width: 26px; }
  .sx-links { display: flex; gap: 8px; }
  .sx-links .sk { width: 24px; height: 5px; }
  .sx-btn { display: block; width: 44px; height: 14px; border-radius: 4px; background: var(--deep, var(--ink)); }
  .sx-burger { display: flex; flex-direction: column; gap: 3px; }
  .sx-burger i { display: block; width: 12px; height: 1.5px; border-radius: 1px; background: #0A1A30; }
  .sx-hero { padding: 10% 7%; background: var(--tint, #F3F6FA); }
  .dev-desk .sx-hero { padding: 22px 16px; }
  .sx-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: center; }
  .sx-h { display: block; height: 9px; border-radius: 3px; background: #0A1A30; opacity: .86; }
  .sx-h.dim { opacity: .7; }
  .dev-desk .sx-h { height: 12px; }
  .dev-phone .sx-h { height: 7px; }
  .dev-phone .sk { height: 5px; }
  .sx-img { min-height: 92px; border-radius: var(--r-8); background: rgba(255,255,255,.55); }
  .sx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px; }
  .sx-cards span { height: 40px; border-radius: var(--r-7); background: #F3F6FA; }
  .dev-tab .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  .sx-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: center; padding: 6px 16px 16px; }
  .sx-split .sx-img { min-height: 70px; background: var(--tint, #F3F6FA); }
  .sx-stack { display: flex; flex-direction: column; gap: 7px; padding: 8% 7%; background: var(--tint, #F3F6FA); }
  .dev-phone .sx-stack { gap: 6px; }
  .sx-stack .sx-img { min-height: 0; aspect-ratio: 4 / 3; }
  .sx-stack .sx-btn { margin-top: 4px; }

  /* ---------- M-ONCALL: the monthly plan card ---------- */
  .mk-oncall { width: 100%; max-width: 470px; justify-self: end; }
  .oc-wrap { position: relative; width: 100%; max-width: 470px; }
  .oc-toast { left: 0; bottom: -5%; }

  /* ---------- positions on the art panels (replace the design's inline left/top/width) ---------- */
  .mk-web { position: absolute; left: 6%; top: 11%; width: 62%; }
  .mk-perf { right: 5%; top: 16%; }
  .mk-perf svg { width: 30px; height: 30px; }
  .mk-toasts-web { position: absolute; right: 7%; bottom: 13%; }
  .mk-design { position: absolute; left: 9%; right: 9%; top: 9%; }
  .mk-toasts-design { position: absolute; left: 7%; bottom: 8%; }
  .mk-search { position: absolute; left: 8%; right: 8%; top: 8%; }
  .mk-search2 { position: absolute; left: 14%; right: 14%; bottom: 7%; }
  .mk-video { position: absolute; left: 6%; top: 10%; width: 60%; }
  .mk-cuts { position: absolute; right: 6%; top: 15%; width: 26%; }
  .mk-toasts-video { position: absolute; right: 9%; bottom: 11%; }
  .mk-ind { position: absolute; right: 6%; top: 8%; width: min(340px, 64%); }
  .mk-toast-tl { left: 6%; top: 9%; }
  .mk-row { position: absolute; left: 10%; right: 10%; top: 16%; }
  .mk-row-toast { right: 8%; bottom: 12%; }
  .mk-work { position: absolute; left: 9%; right: 9%; top: 14%; }
  .mk-case { position: absolute; left: 10%; right: 10%; top: 18%; }
  .mk-h { font-size: 17px; font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.2; }
  .mk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .mk-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .tp1 { left: 6%; top: 12%; } .tp2 { right: 4%; top: 30%; } .tp3 { left: 12%; top: 50%; } .tp4 { right: 8%; bottom: 14%; }

  @media (max-width: 700px) {
    .mk-web, .mk-video { left: 5%; top: 9%; width: 90%; }
    .mk-perf, .mk-cuts, .oc-toast { display: none; }
    .mw-hero { grid-template-columns: minmax(0, 1fr); }
    .mw-img, .mw-links .sk, .mw-loc { display: none; }
    .mw-h { font-size: 16px; }
    .dev-tab { display: none; }
    .dev-desk, .dev.sm .dev-desk, .dev.hero .dev-desk { left: 4%; top: 10%; width: 74%; }
    .dev-phone, .dev.sm .dev-phone, .dev.hero .dev-phone { left: auto; right: 5%; top: 26%; width: 21%; }
  }
}

@layer utilities {
  /* skeleton widths, heights and offsets in the steps the design uses */
  .sk.w40, .w40 { width: 40%; } .w46 { width: 46%; } .w58 { width: 58%; } .w60 { width: 60%; } .w62 { width: 62%; } .w64 { width: 64%; } .w66 { width: 66%; } .w68 { width: 68%; } .w70 { width: 70%; }
  .w74 { width: 74%; } .w76 { width: 76%; } .w78 { width: 78%; } .w80 { width: 80%; } .w86 { width: 86%; } .w88 { width: 88%; } .w90 { width: 90%; } .w92 { width: 92%; } .w95 { width: 95%; }
  .wpx44 { width: 44px; } .wpx48 { width: 48px; } .wpx50 { width: 50px; } .wpx52 { width: 52px; } .wpx56 { width: 56px; } .wpx60 { width: 60px; }
  .h5 { height: 5px; } .h11 { height: 11px; } .h46 { height: 46px; } .h50 { height: 50px; }
  .mt5 { margin-top: 5px; } .mt7 { margin-top: 7px; } .mt9 { margin-top: 9px; }
  .sk.ink { background: #0A1A30; opacity: .85; }
  .sk.tint { background: var(--tint, #E8EDF4); }
  .meter .w68 { width: 68%; } .meter .w71 { width: 71%; }
  .bars .h38 { height: 38%; } .bars .h46p { height: 46%; } .bars .h52 { height: 52%; } .bars .h58 { height: 58%; } .bars .h64 { height: 64%; } .bars .h70 { height: 70%; } .bars .h76 { height: 76%; } .bars .h84 { height: 84%; }
}

/* ---- 50-home.css ---- */
@layer components {
  /* ============================================================
     Home page: hero stage, logo band, bento, industries switcher, method, quotes, insights row
     ============================================================ */
  /* ---------- hero stage (desktop art + absolutely placed copy) ---------- */
  .hero-stage { position: relative; aspect-ratio: 1440 / 760; container-type: inline-size; max-width: var(--stage); margin: 0 auto; }
  .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-live { position: absolute; left: 47.9%; top: 17%; }
  .hero-title { position: absolute; left: 47.9%; right: 4%; bottom: 52.6%; margin: 0; font-weight: var(--fw-light); font-size: 5.3vw; font-size: 5.3cqw; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); }
  .dark .hero-title { color: var(--white); }
  .hero-sub { position: absolute; left: 47.9%; top: 56.5%; width: 44%; }
  .hero-sub p { font-size: max(16px, 1.32vw); font-size: max(16px, 1.32cqw); line-height: 1.55; color: var(--slate); }
  .dark .hero-sub p { color: var(--nbody); }
  .hero-sub .btn-row { margin-top: max(22px, 2.2vw); margin-top: max(22px, 2.2cqw); }
  .hero-m { display: none; }
  .hp-t { font-family: var(--font-mono); font-size: 12.5px; }
  .hero-mart .hp-t { font-size: 11px; }
  .a-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; }
  .hero-mart .a-lbl { font-size: 10.5px; }
  .hm-bt { display: none; }

  /* ---------- logo band ---------- */
  .logo-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); align-items: center; }
  .logo-band-l { padding: 30px 32px; border-right: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--sub); }
  .dark .logo-band-l { border-color: var(--nline); color: var(--ntext); }
  .logo-band-l .ibtn { margin-top: 12px; }
  .marq { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marq-row { display: flex; width: max-content; }
  .logo { flex: none; display: flex; align-items: center; justify-content: center; width: 178px; height: 52px; font-size: 18px; font-weight: var(--fw-medium); letter-spacing: -0.02em; color: #8693A7; white-space: nowrap; }
  .dark .logo { color: #8B9AB8; }

  /* ---------- services bento ---------- */
  .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  a.card.bcard, .bcard { display: flex; flex-direction: column; min-height: 520px; }
  .bcard .chead p { margin-top: 6px; }
  .bstage { position: relative; flex: 1; margin-top: 22px; min-height: 340px; }
  .bstage > .thr { -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%); }
  .night-card { border-color: var(--nline); }
  .night-card > .split { position: relative; padding: clamp(28px, 4vw, 52px); align-items: center; }
  .night-card .h1 { margin-top: 18px; font-size: clamp(30px, 3.3vw, 46px); }
  .night-list { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: #C9D3E6; }
  .night-list li { display: flex; gap: 10px; }
  .night-list li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--aqua); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .night-card .btn-row { margin-top: 28px; }

  /* ---------- industries switcher ---------- */
  .ind { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: stretch; }
  .ind-panel { position: relative; min-height: 560px; border-radius: var(--r-14); border: 1px solid var(--line2); overflow: hidden; display: flex; align-items: flex-end; padding: 28px; }
  html.js .ind-panel[hidden] { display: none; }
  .ind-card { position: relative; z-index: 2; max-width: 480px; background: var(--white); border: 1px solid var(--line2); border-radius: var(--r-12); padding: 24px 26px; box-shadow: 0 30px 60px -30px rgba(11,22,49,.35); }
  .ind-card .h1 { margin-top: 12px; }
  .ind-card .body, .ind-card .small { margin-top: 12px; }
  .ind-card .lnk { margin-top: 8px; }
  .ind-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .ind-btn { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-family: inherit; font-size: 19px; font-weight: var(--fw-regular); letter-spacing: -0.01em; color: var(--sub); text-align: left; cursor: pointer; }
  .ind-btn > svg:first-child { width: 18px; height: 18px; flex: none; }
  .ind-btn.on, .ind-btn[aria-pressed="true"] { color: var(--ink); background: var(--soft); }
  .ind-btn.on::before, .ind-btn[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--accent); }
  .ind-btn .arr { margin-left: auto; visibility: hidden; }
  .ind-btn.on .arr, .ind-btn[aria-pressed="true"] .arr { visibility: visible; color: var(--accent); }
  .ind-more { margin-top: auto; padding-top: 20px; }
  .ind-nav { display: none; align-items: center; gap: 8px; margin-top: 16px; }

  /* ---------- method: a row of steps that take turns, and a burst of threads ---------- */
  .m2 { position: relative; overflow: hidden; }
  .m2-head { padding: var(--sec) var(--sec-x) 56px; text-align: center; }
  .m2-h { margin: 22px 0 0; font-weight: var(--fw-light); font-size: clamp(36px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.032em; }
  .m2-head .m2-lead { max-width: 640px; margin: 20px auto 0; }
  .m2-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .m2-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 22px; border: 0; background: transparent; font-family: inherit; text-align: center; color: #97A3B6; cursor: pointer; }
  .m2-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: #A9B3C3; }
  .m2-t { font-size: clamp(28px, 2.8vw, 38px); font-weight: var(--fw-light); letter-spacing: -0.03em; line-height: 1.08; }
  .m2-d { max-width: 250px; font-size: 14.5px; line-height: 1.5; color: #A3AEBF; }
  .m2-step.on, .m2-step[aria-pressed="true"] { color: var(--ink); }
  .m2-step.on .m2-d, .m2-step[aria-pressed="true"] .m2-d { color: var(--slate); }
  .m2-c0.on .m2-n, .m2-c0[aria-pressed="true"] .m2-n { color: #0F9488; }
  .m2-c1.on .m2-n, .m2-c1[aria-pressed="true"] .m2-n { color: #B45309; }
  .m2-c2.on .m2-n, .m2-c2[aria-pressed="true"] .m2-n { color: #2563EB; }
  .m2-c3.on .m2-n, .m2-c3[aria-pressed="true"] .m2-n { color: #E2551B; }
  .m2-bar { position: absolute; left: 0; width: 25%; height: 1px; pointer-events: none; }
  .m2-bar-t { top: -1px; background: linear-gradient(90deg, rgba(139,92,246,0) 12%, #8B5CF6 42%, #FF7A45 62%, rgba(255,90,31,0) 88%); }
  .m2-bar-b { bottom: -1px; }
  .m2-row.s1 .m2-bar { transform: translateX(100%); }
  .m2-row.s2 .m2-bar { transform: translateX(200%); }
  .m2-row.s3 .m2-bar { transform: translateX(300%); }
  .m2-prog { position: absolute; left: 14%; right: 14%; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad-bar); transform-origin: left center; transform: scaleX(0); }
  .m2-stage { position: relative; aspect-ratio: 1240 / 560; border-bottom: 1px solid var(--line); }
  .m2-stage::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(38% 92% at 50% 100%, rgba(139,92,246,.2), rgba(139,92,246,0) 72%), radial-gradient(28% 64% at 30% 100%, rgba(59,130,246,.11), rgba(59,130,246,0) 70%), radial-gradient(28% 64% at 70% 100%, rgba(236,72,153,.1), rgba(236,72,153,0) 70%); }
  .m2-burst { position: absolute; inset: 0; width: 100%; height: 100%; }
  .m2-rays > .ray > use { stroke: var(--rg, currentColor); stroke-opacity: var(--o, .8); }
  .m2-rays > .ray > circle { fill: currentColor; }
  .m2-mcap { display: none; }
  /* every ray has an angle and a length for each of the four steps (the design's values, below) */
  .s0 .m2-rays > .ray { transform: rotate(var(--a0)); } .s0 .m2-rays > .ray > use { transform: scaleX(var(--l0)); } .s0 .m2-rays > .ray > circle { transform: translateX(calc(var(--l0) * 500px)); }
  .s1 .m2-rays > .ray { transform: rotate(var(--a1)); } .s1 .m2-rays > .ray > use { transform: scaleX(var(--l1)); } .s1 .m2-rays > .ray > circle { transform: translateX(calc(var(--l1) * 500px)); }
  .s2 .m2-rays > .ray { transform: rotate(var(--a2)); } .s2 .m2-rays > .ray > use { transform: scaleX(var(--l2)); } .s2 .m2-rays > .ray > circle { transform: translateX(calc(var(--l2) * 500px)); }
  .s3 .m2-rays > .ray { transform: rotate(var(--a3)); } .s3 .m2-rays > .ray > use { transform: scaleX(var(--l3)); } .s3 .m2-rays > .ray > circle { transform: translateX(calc(var(--l3) * 500px)); }

  /* ---------- testimonials ---------- */
  .quote { max-width: 900px; margin: 0 auto; text-align: center; }
  .quote blockquote { margin: 26px 0 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: var(--fw-light); line-height: 1.3; letter-spacing: -0.02em; }
  .quote-by { margin-top: 26px; font-size: 15.5px; }
  .quote .eyebrow { justify-content: center; }
  .qtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
  .qtab { position: relative; min-height: 76px; border: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: var(--fw-medium); color: #A3AEBF; cursor: pointer; }
  .qtab.on, .qtab[aria-selected="true"] { color: var(--ink); }
  .qtab.on::before, .qtab[aria-selected="true"]::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--violet), var(--accent)); }
  .dark .qtabs { border-color: var(--nline); }
  .dark .qtab.on, .dark .qtab[aria-selected="true"] { color: var(--white); }

  /* ---------- insights row ---------- */
  .news { display: flex; gap: 10px; height: 400px; }
  .news-item { position: relative; flex: 1; min-width: 0; border: 0; padding: 0; border-radius: var(--r-12); overflow: hidden; cursor: pointer; text-align: left; font-family: inherit; }
  .news-item.on, .news-item[aria-pressed="true"] { flex-grow: 7; }
  .news-t { position: absolute; left: 24px; right: 24px; bottom: 22px; color: var(--ink); font-size: clamp(20px, 2vw, 28px); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.15; visibility: hidden; }
  .news-tag { position: absolute; left: 24px; top: 22px; visibility: hidden; }
  :is(.news-item.on, .news-item[aria-pressed="true"]) :is(.news-t, .news-tag) { visibility: visible; }
  .news-desc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 22px; }
  .news-desc .lead { max-width: 680px; }
  .shead .btn-row.center { align-items: center; }

  /* ---------- responsive ---------- */
  @media (max-width: 1024px) {
    .m2-head { padding: 88px 32px 48px; }
    .m2-step { padding: 26px 14px; }
    .m2-d { font-size: 14px; }
  }
  @media (max-width: 900px) {
    .hero-stage { aspect-ratio: auto; padding: 36px 20px 60px; }
    .hero-art, .hero-live, .hero-title, .hero-sub { position: static; width: auto; }
    .hero-art { display: none; }
    .hero-title { font-size: clamp(46px, 12.5vw, 76px); margin-top: 18px; }
    .hero-sub { margin-top: 0; }
    .hero-sub p { font-size: 17px; }
    .hero-m { display: block; margin: 22px -20px 20px; }
    .hero-mart { display: block; width: 100%; height: auto; overflow: hidden; }
    .logo-band { grid-template-columns: minmax(0, 1fr); }
    .logo-band-l { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px; }
    .dark .logo-band-l { border-bottom-color: var(--nline); }
    .bento { grid-template-columns: minmax(0, 1fr); }
    .ind { display: flex; flex-direction: column; }
    .ind > .vstack { order: -1; }
    .ind-list { order: -1; flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .ind-list::-webkit-scrollbar { display: none; }
    .ind-list li { flex: none; }
    .ind-btn { min-height: 46px; padding: 0 16px; border: 1px solid var(--line2); border-radius: var(--r-pill); font-size: 15.5px; white-space: nowrap; }
    .ind-btn.on, .ind-btn[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
    .ind-btn.on::before, .ind-btn[aria-pressed="true"]::before, .ind-btn .arr { display: none; }
    .ind-more { display: none; }
    .ind-panel { min-height: 520px; padding: 16px; }
    .ind-nav { display: flex; }
    .news { flex-direction: column; height: auto; }
    .news-item { flex: none; height: 76px; }
    .news-item.on, .news-item[aria-pressed="true"] { height: 300px; }
    .qtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qtab { font-size: 14px; }
  }
  @media (min-width: 601px) and (max-width: 900px) {
    .hero-mart { height: 430px; }
    .hm-bp { display: none; }
    .hm-bt { display: inline; }
  }
  @media (max-width: 700px) {
    .m2-head { padding: 64px 20px 36px; }
    .m2-step { padding: 16px 4px 14px; gap: 4px; }
    .m2-t { font-size: 17px; letter-spacing: -0.01em; }
    .m2-n { font-size: 11px; }
    .m2-d { display: none; }
    .m2-stage { aspect-ratio: auto; height: 340px; }
    .m2-mcap { display: block; padding: 24px 20px 56px; text-align: center; }
    .bcard { min-height: 460px; }
    .bstage { min-height: 300px; }
  }

  /* ---------- hero artwork: per-path draw delays (generated from the design's inline styles) ---------- */
  .hero-art path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.05s)}
  .hero-art path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.08s)}
  .hero-art path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.11s)}
  .hero-art path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.095s)}
  .hero-art path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.125s)}
  .hero-art path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.155s)}
  .hero-art path:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.14s)}
  .hero-art path:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.17s)}
  .hero-art path:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.2s)}
  .hero-art path:nth-of-type(10){animation-delay:calc(var(--ed,0s)+0.185s)}
  .hero-art path:nth-of-type(11){animation-delay:calc(var(--ed,0s)+0.215s)}
  .hero-art path:nth-of-type(12){animation-delay:calc(var(--ed,0s)+0.245s)}
  .hero-art path:nth-of-type(13){animation-delay:calc(var(--ed,0s)+0.23s)}
  .hero-art path:nth-of-type(14){animation-delay:calc(var(--ed,0s)+0.26s)}
  .hero-art path:nth-of-type(15){animation-delay:calc(var(--ed,0s)+0.29s)}
  .hero-art path:nth-of-type(16){animation-delay:calc(var(--ed,0s)+0.275s)}
  .hero-art path:nth-of-type(17){animation-delay:calc(var(--ed,0s)+0.305s)}
  .hero-art path:nth-of-type(18){animation-delay:calc(var(--ed,0s)+0.335s)}
  .hero-art path:nth-of-type(19){animation-delay:calc(var(--ed,0s)+0.32s)}
  .hero-art path:nth-of-type(20){animation-delay:calc(var(--ed,0s)+0.35s)}
  .hero-art path:nth-of-type(21){animation-delay:calc(var(--ed,0s)+0.38s)}
  .hero-art path:nth-of-type(22){animation-delay:calc(var(--ed,0s)+0.365s)}
  .hero-art path:nth-of-type(23){animation-delay:calc(var(--ed,0s)+0.395s)}
  .hero-art path:nth-of-type(24){animation-delay:calc(var(--ed,0s)+0.425s)}
  .hero-art path:nth-of-type(25){animation-delay:calc(var(--ed,0s)+0.41s)}
  .hero-art path:nth-of-type(26){animation-delay:calc(var(--ed,0s)+0.44s)}
  .hero-art path:nth-of-type(27){animation-delay:calc(var(--ed,0s)+0.47s)}
  .hero-art path:nth-of-type(28){animation-delay:0.0s}
  .hero-art path:nth-of-type(29){animation-delay:4.27s}
  .hero-art path:nth-of-type(30){animation-delay:3.54s}
  .hero-art path:nth-of-type(31){animation-delay:2.81s}
  .hero-art path:nth-of-type(32){animation-delay:2.08s}
  .hero-art path:nth-of-type(33){animation-delay:1.35s}
  .hero-art path:nth-of-type(34){animation-delay:0.62s}
  .hero-art path:nth-of-type(35){animation-delay:4.89s}
  .hero-art path:nth-of-type(36){animation-delay:4.16s}
  .hero-art rect:nth-of-type(2){animation-delay:calc(var(--ed,0s)+1.1s)}
  .hero-art path:nth-of-type(37){animation-delay:calc(var(--ed,0s)+0.95s)}
  .hero-art path:nth-of-type(38){animation-delay:calc(var(--ed,0s)+0.99s)}
  .hero-art path:nth-of-type(39){animation-delay:calc(var(--ed,0s)+1.03s)}
  .hero-art path:nth-of-type(40){animation-delay:calc(var(--ed,0s)+1.07s)}
  .hero-art path:nth-of-type(41){animation-delay:calc(var(--ed,0s)+1.11s)}
  .hero-art path:nth-of-type(42){animation-delay:calc(var(--ed,0s)+1.15s)}
  .hero-art path:nth-of-type(43){animation-delay:-1.3s;animation-duration:5s}
  .hero-art path:nth-of-type(44){animation-delay:-5.2s;animation-duration:8s}
  .hero-art .pin:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.0s)}
  .hero-art .pin:nth-of-type(1)>g:nth-of-type(1){animation-delay:-0.0s}
  .hero-art .pin:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.06s)}
  .hero-art .pin:nth-of-type(2)>g:nth-of-type(1){animation-delay:-0.9s}
  .hero-art .pin:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.12s)}
  .hero-art .pin:nth-of-type(3)>g:nth-of-type(1){animation-delay:-1.8s}
  .hero-art .pin:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.18s)}
  .hero-art .pin:nth-of-type(4)>g:nth-of-type(1){animation-delay:-2.7s}
  .hero-art .pin:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.24s)}
  .hero-art .pin:nth-of-type(5)>g:nth-of-type(1){animation-delay:-3.6s}
  .hero-art .pin:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.3s)}
  .hero-art .pin:nth-of-type(6)>g:nth-of-type(1){animation-delay:-4.5s}
  .hero-art .pin:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.36s)}
  .hero-art .pin:nth-of-type(7)>g:nth-of-type(1){animation-delay:-5.4s}
  .hero-art .pin:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.42s)}
  .hero-art .pin:nth-of-type(8)>g:nth-of-type(1){animation-delay:-0.3s}
  .hero-art .pin:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.48s)}
  .hero-art .pin:nth-of-type(9)>g:nth-of-type(1){animation-delay:-1.2s}
  .hero-mart path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.05s)}
  .hero-mart path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.08s)}
  .hero-mart path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.11s)}
  .hero-mart path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.1s)}
  .hero-mart path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.13s)}
  .hero-mart path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.16s)}
  .hero-mart path:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.15s)}
  .hero-mart path:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.18s)}
  .hero-mart path:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.21s)}
  .hero-mart path:nth-of-type(10){animation-delay:calc(var(--ed,0s)+0.2s)}
  .hero-mart path:nth-of-type(11){animation-delay:calc(var(--ed,0s)+0.23s)}
  .hero-mart path:nth-of-type(12){animation-delay:calc(var(--ed,0s)+0.26s)}
  .hero-mart path:nth-of-type(13){animation-delay:calc(var(--ed,0s)+0.25s)}
  .hero-mart path:nth-of-type(14){animation-delay:calc(var(--ed,0s)+0.28s)}
  .hero-mart path:nth-of-type(15){animation-delay:calc(var(--ed,0s)+0.31s)}
  .hero-mart path:nth-of-type(16){animation-delay:calc(var(--ed,0s)+0.3s)}
  .hero-mart path:nth-of-type(17){animation-delay:calc(var(--ed,0s)+0.33s)}
  .hero-mart path:nth-of-type(18){animation-delay:calc(var(--ed,0s)+0.36s)}
  .hero-mart path:nth-of-type(19){animation-delay:calc(var(--ed,0s)+0.35s)}
  .hero-mart path:nth-of-type(20){animation-delay:calc(var(--ed,0s)+0.38s)}
  .hero-mart path:nth-of-type(21){animation-delay:calc(var(--ed,0s)+0.41s)}
  .hero-mart path:nth-of-type(22){animation-delay:calc(var(--ed,0s)+0.4s)}
  .hero-mart path:nth-of-type(23){animation-delay:calc(var(--ed,0s)+0.43s)}
  .hero-mart path:nth-of-type(24){animation-delay:calc(var(--ed,0s)+0.46s)}
  .hero-mart path:nth-of-type(25){animation-delay:calc(var(--ed,0s)+0.45s)}
  .hero-mart path:nth-of-type(26){animation-delay:calc(var(--ed,0s)+0.48s)}
  .hero-mart path:nth-of-type(27){animation-delay:calc(var(--ed,0s)+0.51s)}
  .hero-mart path:nth-of-type(28){animation-delay:-0.0s}
  .hero-mart path:nth-of-type(29){animation-delay:-0.73s}
  .hero-mart path:nth-of-type(30){animation-delay:-1.46s}
  .hero-mart path:nth-of-type(31){animation-delay:-2.19s}
  .hero-mart path:nth-of-type(32){animation-delay:-2.92s}
  .hero-mart path:nth-of-type(33){animation-delay:-3.65s}
  .hero-mart path:nth-of-type(34){animation-delay:-4.38s}
  .hero-mart path:nth-of-type(35){animation-delay:-0.11s}
  .hero-mart path:nth-of-type(36){animation-delay:-0.84s}
  .hero-mart .hm-bp:nth-of-type(1)>rect:nth-of-type(1){animation-delay:calc(var(--ed,0s)+1.1s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.95s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.99s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+1.03s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+1.07s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+1.11s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+1.15s)}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(7){animation-delay:-1.1s;animation-duration:4.1s}
  .hero-mart .hm-bp:nth-of-type(1)>path:nth-of-type(8){animation-delay:-4.4s;animation-duration:5.6s}
  .hero-mart .hm-bt:nth-of-type(2)>rect:nth-of-type(1){animation-delay:calc(var(--ed,0s)+1.1s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.95s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.99s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+1.03s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+1.07s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+1.11s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+1.15s)}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(7){animation-delay:-1.1s;animation-duration:4.1s}
  .hero-mart .hm-bt:nth-of-type(2)>path:nth-of-type(8){animation-delay:-4.4s;animation-duration:5.6s}
  .hero-mart .pin:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.0s)}
  .hero-mart .pin:nth-of-type(3)>g:nth-of-type(1){animation-delay:-0.0s}
  .hero-mart .pin:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.06s)}
  .hero-mart .pin:nth-of-type(4)>g:nth-of-type(1){animation-delay:-0.9s}
  .hero-mart .pin:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.12s)}
  .hero-mart .pin:nth-of-type(5)>g:nth-of-type(1){animation-delay:-1.8s}
  .hero-mart .pin:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.18s)}
  .hero-mart .pin:nth-of-type(6)>g:nth-of-type(1){animation-delay:-2.7s}
  .hero-mart .pin:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.24s)}
  .hero-mart .pin:nth-of-type(7)>g:nth-of-type(1){animation-delay:-3.6s}
  .hero-mart .pin:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.3s)}
  .hero-mart .pin:nth-of-type(8)>g:nth-of-type(1){animation-delay:-4.5s}
  .hero-mart .pin:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.36s)}
  .hero-mart .pin:nth-of-type(9)>g:nth-of-type(1){animation-delay:-5.4s}
  .hero-mart .pin:nth-of-type(10){animation-delay:calc(var(--ed,0s)+0.42s)}
  .hero-mart .pin:nth-of-type(10)>g:nth-of-type(1){animation-delay:-0.3s}
  .hero-mart .pin:nth-of-type(11){animation-delay:calc(var(--ed,0s)+0.48s)}
  .hero-mart .pin:nth-of-type(11)>g:nth-of-type(1){animation-delay:-1.2s}

  /* ---------- method burst: per-thread angles, lengths, delays and twinkle offsets (the design's values) ---------- */
  .m2-rays>.ray:nth-child(1){--a0:-148.3deg;--a1:-178.0deg;--a2:-130.0deg;--a3:-91.3deg;--l0:0.570;--l1:0.550;--l2:0.613;--l3:0.635;--d:169ms;--tw:-3.17s}
  .m2-rays>.ray:nth-child(2){--a0:-87.8deg;--a1:-176.7deg;--a2:-129.4deg;--a3:-91.3deg;--l0:0.394;--l1:0.570;--l2:0.575;--l3:0.302;--d:181ms;--tw:-2.34s}
  .m2-rays>.ray:nth-child(3){--a0:-38.9deg;--a1:-175.3deg;--a2:-128.8deg;--a3:-91.3deg;--l0:0.192;--l1:0.588;--l2:0.578;--l3:0.330;--d:235ms;--tw:-2.95s}
  .m2-rays>.ray:nth-child(4){--a0:-69.8deg;--a1:-174.0deg;--a2:-128.2deg;--a3:-91.2deg;--l0:0.105;--l1:0.604;--l2:0.591;--l3:0.648;--d:153ms;--tw:-3.81s}
  .m2-rays>.ray:nth-child(5){--a0:-150.1deg;--a1:-172.6deg;--a2:-127.6deg;--a3:-91.2deg;--l0:0.706;--l1:0.617;--l2:0.575;--l3:0.950;--d:181ms;--tw:-2.21s}
  .m2-rays>.ray:nth-child(6){--a0:-144.5deg;--a1:-171.3deg;--a2:-126.9deg;--a3:-91.2deg;--l0:0.106;--l1:0.625;--l2:0.654;--l3:0.464;--d:208ms;--tw:-0.83s}
  .m2-rays>.ray:nth-child(7){--a0:-21.4deg;--a1:-169.9deg;--a2:-126.3deg;--a3:-91.2deg;--l0:0.638;--l1:0.630;--l2:0.649;--l3:0.707;--d:201ms;--tw:-0.49s}
  .m2-rays>.ray:nth-child(8){--a0:-33.1deg;--a1:-168.6deg;--a2:-125.7deg;--a3:-91.2deg;--l0:0.174;--l1:0.632;--l2:0.670;--l3:0.921;--d:170ms;--tw:-1.46s}
  .m2-rays>.ray:nth-child(9){--a0:-109.9deg;--a1:-167.3deg;--a2:-125.1deg;--a3:-91.1deg;--l0:0.914;--l1:0.630;--l2:0.622;--l3:0.319;--d:140ms;--tw:-2.87s}
  .m2-rays>.ray:nth-child(10){--a0:-90.7deg;--a1:-165.9deg;--a2:-124.5deg;--a3:-91.1deg;--l0:0.383;--l1:0.627;--l2:0.644;--l3:0.824;--d:149ms;--tw:-2.44s}
  .m2-rays>.ray:nth-child(11){--a0:-68.7deg;--a1:-164.6deg;--a2:-123.9deg;--a3:-91.1deg;--l0:0.163;--l1:0.623;--l2:0.612;--l3:0.544;--d:210ms;--tw:-1.39s}
  .m2-rays>.ray:nth-child(12){--a0:-123.6deg;--a1:-163.2deg;--a2:-123.3deg;--a3:-91.1deg;--l0:0.127;--l1:0.620;--l2:0.608;--l3:0.870;--d:194ms;--tw:-1.5s}
  .m2-rays>.ray:nth-child(13){--a0:-59.4deg;--a1:-161.9deg;--a2:-122.7deg;--a3:-91.1deg;--l0:0.799;--l1:0.619;--l2:0.704;--l3:0.585;--d:211ms;--tw:-3.85s}
  .m2-rays>.ray:nth-child(14){--a0:-23.3deg;--a1:-160.5deg;--a2:-122.1deg;--a3:-91.0deg;--l0:0.382;--l1:0.621;--l2:0.653;--l3:0.473;--d:199ms;--tw:-0.65s}
  .m2-rays>.ray:nth-child(15){--a0:-42.3deg;--a1:-159.2deg;--a2:-121.5deg;--a3:-91.0deg;--l0:0.375;--l1:0.627;--l2:0.706;--l3:0.337;--d:141ms;--tw:-1.16s}
  .m2-rays>.ray:nth-child(16){--a0:-147.3deg;--a1:-157.8deg;--a2:-120.8deg;--a3:-91.0deg;--l0:0.115;--l1:0.637;--l2:0.663;--l3:0.929;--d:204ms;--tw:-2.98s}
  .m2-rays>.ray:nth-child(17){--a0:-133.1deg;--a1:-156.5deg;--a2:-120.2deg;--a3:-91.0deg;--l0:0.870;--l1:0.650;--l2:0.688;--l3:0.810;--d:115ms;--tw:-0.85s}
  .m2-rays>.ray:nth-child(18){--a0:-38.6deg;--a1:-155.2deg;--a2:-119.6deg;--a3:-91.0deg;--l0:0.779;--l1:0.666;--l2:0.703;--l3:0.598;--d:163ms;--tw:-3.4s}
  .m2-rays>.ray:nth-child(19){--a0:-84.0deg;--a1:-153.8deg;--a2:-119.0deg;--a3:-90.9deg;--l0:0.219;--l1:0.684;--l2:0.727;--l3:0.307;--d:170ms;--tw:-3.82s}
  .m2-rays>.ray:nth-child(20){--a0:-73.7deg;--a1:-152.5deg;--a2:-118.4deg;--a3:-90.9deg;--l0:0.524;--l1:0.703;--l2:0.743;--l3:0.709;--d:129ms;--tw:-1.62s}
  .m2-rays>.ray:nth-child(21){--a0:-19.4deg;--a1:-151.1deg;--a2:-117.8deg;--a3:-90.9deg;--l0:0.140;--l1:0.722;--l2:0.675;--l3:0.366;--d:106ms;--tw:-1.79s}
  .m2-rays>.ray:nth-child(22){--a0:-26.1deg;--a1:-149.8deg;--a2:-117.2deg;--a3:-90.9deg;--l0:0.535;--l1:0.738;--l2:0.685;--l3:0.677;--d:131ms;--tw:-1.98s}
  .m2-rays>.ray:nth-child(23){--a0:-148.1deg;--a1:-148.4deg;--a2:-116.6deg;--a3:-90.9deg;--l0:0.165;--l1:0.752;--l2:0.718;--l3:0.797;--d:149ms;--tw:-0.18s}
  .m2-rays>.ray:nth-child(24){--a0:-42.3deg;--a1:-147.1deg;--a2:-116.0deg;--a3:-90.8deg;--l0:0.677;--l1:0.763;--l2:0.688;--l3:0.625;--d:103ms;--tw:-3.06s}
  .m2-rays>.ray:nth-child(25){--a0:-53.2deg;--a1:-145.8deg;--a2:-115.3deg;--a3:-90.8deg;--l0:0.204;--l1:0.769;--l2:0.765;--l3:0.520;--d:98ms;--tw:-1.56s}
  .m2-rays>.ray:nth-child(26){--a0:-20.3deg;--a1:-144.4deg;--a2:-114.7deg;--a3:-90.8deg;--l0:0.231;--l1:0.772;--l2:0.753;--l3:0.685;--d:178ms;--tw:-0.39s}
  .m2-rays>.ray:nth-child(27){--a0:-88.6deg;--a1:-143.1deg;--a2:-114.1deg;--a3:-90.8deg;--l0:0.616;--l1:0.771;--l2:0.807;--l3:0.517;--d:153ms;--tw:-2.1s}
  .m2-rays>.ray:nth-child(28){--a0:-165.9deg;--a1:-141.7deg;--a2:-113.5deg;--a3:-90.8deg;--l0:0.703;--l1:0.767;--l2:0.815;--l3:0.549;--d:116ms;--tw:-3.97s}
  .m2-rays>.ray:nth-child(29){--a0:-163.8deg;--a1:-140.4deg;--a2:-112.9deg;--a3:-90.7deg;--l0:0.116;--l1:0.762;--l2:0.806;--l3:0.832;--d:126ms;--tw:-2.49s}
  .m2-rays>.ray:nth-child(30){--a0:-64.8deg;--a1:-139.0deg;--a2:-112.3deg;--a3:-90.7deg;--l0:0.341;--l1:0.757;--l2:0.784;--l3:0.573;--d:119ms;--tw:-0.9s}
  .m2-rays>.ray:nth-child(31){--a0:-101.5deg;--a1:-137.7deg;--a2:-111.7deg;--a3:-90.7deg;--l0:0.201;--l1:0.753;--l2:0.810;--l3:0.872;--d:146ms;--tw:-1.82s}
  .m2-rays>.ray:nth-child(32){--a0:-109.9deg;--a1:-136.4deg;--a2:-111.1deg;--a3:-90.7deg;--l0:0.378;--l1:0.751;--l2:0.810;--l3:0.974;--d:86ms;--tw:-1.92s}
  .m2-rays>.ray:nth-child(33){--a0:-22.1deg;--a1:-135.0deg;--a2:-110.5deg;--a3:-90.7deg;--l0:0.664;--l1:0.752;--l2:0.817;--l3:0.831;--d:136ms;--tw:-3.44s}
  .m2-rays>.ray:nth-child(34){--a0:-58.2deg;--a1:-133.7deg;--a2:-109.8deg;--a3:-90.6deg;--l0:0.200;--l1:0.757;--l2:0.853;--l3:0.570;--d:129ms;--tw:-3.3s}
  .m2-rays>.ray:nth-child(35){--a0:-4.9deg;--a1:-132.3deg;--a2:-109.2deg;--a3:-90.6deg;--l0:0.100;--l1:0.766;--l2:0.799;--l3:0.518;--d:107ms;--tw:-0.58s}
  .m2-rays>.ray:nth-child(36){--a0:-163.2deg;--a1:-131.0deg;--a2:-108.6deg;--a3:-90.6deg;--l0:0.236;--l1:0.778;--l2:0.869;--l3:0.820;--d:111ms;--tw:-0.43s}
  .m2-rays>.ray:nth-child(37){--a0:-54.5deg;--a1:-129.6deg;--a2:-108.0deg;--a3:-90.6deg;--l0:0.177;--l1:0.792;--l2:0.815;--l3:0.749;--d:128ms;--tw:-1.04s}
  .m2-rays>.ray:nth-child(38){--a0:-121.0deg;--a1:-128.3deg;--a2:-107.4deg;--a3:-90.6deg;--l0:0.205;--l1:0.809;--l2:0.873;--l3:0.407;--d:126ms;--tw:-0.8s}
  .m2-rays>.ray:nth-child(39){--a0:-128.7deg;--a1:-126.9deg;--a2:-106.8deg;--a3:-90.5deg;--l0:0.291;--l1:0.825;--l2:0.889;--l3:0.627;--d:102ms;--tw:-2.47s}
  .m2-rays>.ray:nth-child(40){--a0:-146.7deg;--a1:-125.6deg;--a2:-106.2deg;--a3:-90.5deg;--l0:0.296;--l1:0.841;--l2:0.828;--l3:0.432;--d:147ms;--tw:-0.14s}
  .m2-rays>.ray:nth-child(41){--a0:-14.4deg;--a1:-124.3deg;--a2:-105.6deg;--a3:-90.5deg;--l0:0.585;--l1:0.855;--l2:0.809;--l3:0.651;--d:61ms;--tw:-2.43s}
  .m2-rays>.ray:nth-child(42){--a0:-175.7deg;--a1:-122.9deg;--a2:-105.0deg;--a3:-90.5deg;--l0:0.429;--l1:0.866;--l2:0.822;--l3:0.516;--d:96ms;--tw:-3.58s}
  .m2-rays>.ray:nth-child(43){--a0:-153.5deg;--a1:-121.6deg;--a2:-104.4deg;--a3:-90.5deg;--l0:0.678;--l1:0.872;--l2:0.901;--l3:0.671;--d:58ms;--tw:-0.75s}
  .m2-rays>.ray:nth-child(44){--a0:-81.0deg;--a1:-120.2deg;--a2:-103.7deg;--a3:-90.4deg;--l0:0.188;--l1:0.875;--l2:0.905;--l3:0.890;--d:134ms;--tw:-3.53s}
  .m2-rays>.ray:nth-child(45){--a0:-75.7deg;--a1:-118.9deg;--a2:-103.1deg;--a3:-90.4deg;--l0:0.119;--l1:0.874;--l2:0.920;--l3:0.823;--d:117ms;--tw:-0.75s}
  .m2-rays>.ray:nth-child(46){--a0:-35.2deg;--a1:-117.5deg;--a2:-102.5deg;--a3:-90.4deg;--l0:0.487;--l1:0.869;--l2:0.897;--l3:0.630;--d:118ms;--tw:-1.35s}
  .m2-rays>.ray:nth-child(47){--a0:-115.6deg;--a1:-116.2deg;--a2:-101.9deg;--a3:-90.4deg;--l0:0.233;--l1:0.863;--l2:0.903;--l3:0.923;--d:51ms;--tw:-0.27s}
  .m2-rays>.ray:nth-child(48){--a0:-59.0deg;--a1:-114.9deg;--a2:-101.3deg;--a3:-90.4deg;--l0:0.168;--l1:0.855;--l2:0.872;--l3:0.341;--d:45ms;--tw:-1.98s}
  .m2-rays>.ray:nth-child(49){--a0:-63.3deg;--a1:-113.5deg;--a2:-100.7deg;--a3:-90.3deg;--l0:0.152;--l1:0.847;--l2:0.860;--l3:0.952;--d:88ms;--tw:-1.63s}
  .m2-rays>.ray:nth-child(50){--a0:-50.4deg;--a1:-112.2deg;--a2:-100.1deg;--a3:-90.3deg;--l0:0.412;--l1:0.840;--l2:0.862;--l3:0.879;--d:57ms;--tw:-0.16s}
  .m2-rays>.ray:nth-child(51){--a0:-67.7deg;--a1:-110.8deg;--a2:-99.5deg;--a3:-90.3deg;--l0:0.160;--l1:0.836;--l2:0.929;--l3:0.646;--d:50ms;--tw:-3.4s}
  .m2-rays>.ray:nth-child(52){--a0:-19.3deg;--a1:-109.5deg;--a2:-98.9deg;--a3:-90.3deg;--l0:0.559;--l1:0.835;--l2:0.884;--l3:0.844;--d:114ms;--tw:-2.13s}
  .m2-rays>.ray:nth-child(53){--a0:-8.2deg;--a1:-108.1deg;--a2:-98.2deg;--a3:-90.3deg;--l0:0.300;--l1:0.838;--l2:0.960;--l3:0.956;--d:102ms;--tw:-0.04s}
  .m2-rays>.ray:nth-child(54){--a0:-70.2deg;--a1:-106.8deg;--a2:-97.6deg;--a3:-90.2deg;--l0:0.488;--l1:0.844;--l2:0.945;--l3:0.753;--d:43ms;--tw:-3.72s}
  .m2-rays>.ray:nth-child(55){--a0:-23.6deg;--a1:-105.5deg;--a2:-97.0deg;--a3:-90.2deg;--l0:0.177;--l1:0.854;--l2:0.972;--l3:0.688;--d:96ms;--tw:-2.96s}
  .m2-rays>.ray:nth-child(56){--a0:-113.9deg;--a1:-104.1deg;--a2:-96.4deg;--a3:-90.2deg;--l0:0.120;--l1:0.866;--l2:0.916;--l3:0.425;--d:72ms;--tw:-3.26s}
  .m2-rays>.ray:nth-child(57){--a0:-154.2deg;--a1:-102.8deg;--a2:-95.8deg;--a3:-90.2deg;--l0:0.104;--l1:0.880;--l2:0.920;--l3:0.706;--d:24ms;--tw:-2.66s}
  .m2-rays>.ray:nth-child(58){--a0:-158.4deg;--a1:-101.4deg;--a2:-95.2deg;--a3:-90.2deg;--l0:0.833;--l1:0.893;--l2:0.932;--l3:0.927;--d:65ms;--tw:-0.49s}
  .m2-rays>.ray:nth-child(59){--a0:-103.2deg;--a1:-100.1deg;--a2:-94.6deg;--a3:-90.1deg;--l0:0.521;--l1:0.905;--l2:0.959;--l3:0.826;--d:75ms;--tw:-1.01s}
  .m2-rays>.ray:nth-child(60){--a0:-91.8deg;--a1:-98.7deg;--a2:-94.0deg;--a3:-90.1deg;--l0:0.212;--l1:0.915;--l2:0.938;--l3:0.621;--d:18ms;--tw:-3.29s}
  .m2-rays>.ray:nth-child(61){--a0:-37.3deg;--a1:-97.4deg;--a2:-93.4deg;--a3:-90.1deg;--l0:0.618;--l1:0.921;--l2:0.959;--l3:0.995;--d:46ms;--tw:-1.57s}
  .m2-rays>.ray:nth-child(62){--a0:-61.4deg;--a1:-96.0deg;--a2:-92.7deg;--a3:-90.1deg;--l0:0.464;--l1:0.923;--l2:0.945;--l3:0.998;--d:28ms;--tw:-0.91s}
  .m2-rays>.ray:nth-child(63){--a0:-35.6deg;--a1:-94.7deg;--a2:-92.1deg;--a3:-90.1deg;--l0:0.375;--l1:0.921;--l2:0.894;--l3:0.559;--d:82ms;--tw:-2.0s}
  .m2-rays>.ray:nth-child(64){--a0:-109.2deg;--a1:-93.4deg;--a2:-91.5deg;--a3:-90.0deg;--l0:0.509;--l1:0.915;--l2:0.949;--l3:0.785;--d:83ms;--tw:-3.01s}
  .m2-rays>.ray:nth-child(65){--a0:-133.4deg;--a1:-92.0deg;--a2:-90.9deg;--a3:-90.0deg;--l0:0.667;--l1:0.907;--l2:0.969;--l3:0.950;--d:21ms;--tw:-3.39s}
  .m2-rays>.ray:nth-child(66){--a0:-163.6deg;--a1:-90.7deg;--a2:-90.3deg;--a3:-90.0deg;--l0:0.240;--l1:0.896;--l2:0.953;--l3:0.402;--d:75ms;--tw:-1.06s}
  .m2-rays>.ray:nth-child(67){--a0:-125.5deg;--a1:-89.3deg;--a2:-89.7deg;--a3:-90.0deg;--l0:0.184;--l1:0.884;--l2:0.911;--l3:0.648;--d:65ms;--tw:-0.87s}
  .m2-rays>.ray:nth-child(68){--a0:-118.7deg;--a1:-88.0deg;--a2:-89.1deg;--a3:-90.0deg;--l0:0.529;--l1:0.873;--l2:0.927;--l3:0.435;--d:16ms;--tw:-0.23s}
  .m2-rays>.ray:nth-child(69){--a0:-155.6deg;--a1:-86.6deg;--a2:-88.5deg;--a3:-90.0deg;--l0:0.778;--l1:0.863;--l2:0.955;--l3:0.315;--d:70ms;--tw:-2.38s}
  .m2-rays>.ray:nth-child(70){--a0:-89.9deg;--a1:-85.3deg;--a2:-87.9deg;--a3:-89.9deg;--l0:0.874;--l1:0.857;--l2:0.926;--l3:0.745;--d:65ms;--tw:-1.46s}
  .m2-rays>.ray:nth-child(71){--a0:-45.6deg;--a1:-84.0deg;--a2:-87.3deg;--a3:-89.9deg;--l0:0.516;--l1:0.853;--l2:0.933;--l3:0.660;--d:30ms;--tw:-3.16s}
  .m2-rays>.ray:nth-child(72){--a0:-65.1deg;--a1:-82.6deg;--a2:-86.6deg;--a3:-89.9deg;--l0:0.352;--l1:0.853;--l2:0.908;--l3:0.711;--d:65ms;--tw:-0.35s}
  .m2-rays>.ray:nth-child(73){--a0:-148.3deg;--a1:-81.3deg;--a2:-86.0deg;--a3:-89.9deg;--l0:0.686;--l1:0.857;--l2:0.917;--l3:0.530;--d:34ms;--tw:-0.19s}
  .m2-rays>.ray:nth-child(74){--a0:-150.6deg;--a1:-79.9deg;--a2:-85.4deg;--a3:-89.9deg;--l0:0.504;--l1:0.864;--l2:0.967;--l3:0.455;--d:27ms;--tw:-2.14s}
  .m2-rays>.ray:nth-child(75){--a0:-106.5deg;--a1:-78.6deg;--a2:-84.8deg;--a3:-89.8deg;--l0:0.644;--l1:0.873;--l2:0.901;--l3:0.790;--d:67ms;--tw:-0.34s}
  .m2-rays>.ray:nth-child(76){--a0:-72.7deg;--a1:-77.2deg;--a2:-84.2deg;--a3:-89.8deg;--l0:0.124;--l1:0.883;--l2:0.898;--l3:0.704;--d:95ms;--tw:-2.08s}
  .m2-rays>.ray:nth-child(77){--a0:-175.4deg;--a1:-75.9deg;--a2:-83.6deg;--a3:-89.8deg;--l0:0.236;--l1:0.892;--l2:0.907;--l3:0.939;--d:56ms;--tw:-3.14s}
  .m2-rays>.ray:nth-child(78){--a0:-21.9deg;--a1:-74.5deg;--a2:-83.0deg;--a3:-89.8deg;--l0:0.655;--l1:0.900;--l2:0.930;--l3:0.427;--d:109ms;--tw:-0.32s}
  .m2-rays>.ray:nth-child(79){--a0:-41.9deg;--a1:-73.2deg;--a2:-82.4deg;--a3:-89.8deg;--l0:0.601;--l1:0.905;--l2:0.922;--l3:0.415;--d:59ms;--tw:-2.66s}
  .m2-rays>.ray:nth-child(80){--a0:-109.3deg;--a1:-71.9deg;--a2:-81.8deg;--a3:-89.7deg;--l0:0.688;--l1:0.907;--l2:0.871;--l3:0.501;--d:39ms;--tw:-1.3s}
  .m2-rays>.ray:nth-child(81){--a0:-45.9deg;--a1:-70.5deg;--a2:-81.1deg;--a3:-89.7deg;--l0:0.147;--l1:0.904;--l2:0.893;--l3:0.378;--d:92ms;--tw:-1.77s}
  .m2-rays>.ray:nth-child(82){--a0:-111.9deg;--a1:-69.2deg;--a2:-80.5deg;--a3:-89.7deg;--l0:0.760;--l1:0.898;--l2:0.900;--l3:0.784;--d:91ms;--tw:-1.89s}
  .m2-rays>.ray:nth-child(83){--a0:-113.7deg;--a1:-67.8deg;--a2:-79.9deg;--a3:-89.7deg;--l0:0.172;--l1:0.887;--l2:0.903;--l3:0.513;--d:67ms;--tw:-0.75s}
  .m2-rays>.ray:nth-child(84){--a0:-103.0deg;--a1:-66.5deg;--a2:-79.3deg;--a3:-89.7deg;--l0:0.173;--l1:0.874;--l2:0.853;--l3:0.450;--d:118ms;--tw:-1.35s}
  .m2-rays>.ray:nth-child(85){--a0:-136.9deg;--a1:-65.1deg;--a2:-78.7deg;--a3:-89.6deg;--l0:0.530;--l1:0.860;--l2:0.890;--l3:0.815;--d:89ms;--tw:-1.5s}
  .m2-rays>.ray:nth-child(86){--a0:-73.6deg;--a1:-63.8deg;--a2:-78.1deg;--a3:-89.6deg;--l0:0.722;--l1:0.844;--l2:0.909;--l3:0.636;--d:74ms;--tw:-3.57s}
  .m2-rays>.ray:nth-child(87){--a0:-58.8deg;--a1:-62.5deg;--a2:-77.5deg;--a3:-89.6deg;--l0:0.656;--l1:0.830;--l2:0.903;--l3:0.975;--d:126ms;--tw:-0.98s}
  .m2-rays>.ray:nth-child(88){--a0:-120.0deg;--a1:-61.1deg;--a2:-76.9deg;--a3:-89.6deg;--l0:0.292;--l1:0.818;--l2:0.927;--l3:0.417;--d:84ms;--tw:-2.5s}
  .m2-rays>.ray:nth-child(89){--a0:-130.5deg;--a1:-59.8deg;--a2:-76.3deg;--a3:-89.6deg;--l0:0.680;--l1:0.808;--l2:0.886;--l3:0.821;--d:122ms;--tw:-3.49s}
  .m2-rays>.ray:nth-child(90){--a0:-33.7deg;--a1:-58.4deg;--a2:-75.6deg;--a3:-89.5deg;--l0:0.894;--l1:0.802;--l2:0.869;--l3:0.791;--d:100ms;--tw:-3.88s}
  .m2-rays>.ray:nth-child(91){--a0:-102.1deg;--a1:-57.1deg;--a2:-75.0deg;--a3:-89.5deg;--l0:0.544;--l1:0.800;--l2:0.842;--l3:0.391;--d:90ms;--tw:-0.55s}
  .m2-rays>.ray:nth-child(92){--a0:-160.9deg;--a1:-55.7deg;--a2:-74.4deg;--a3:-89.5deg;--l0:0.351;--l1:0.802;--l2:0.883;--l3:0.334;--d:115ms;--tw:-0.45s}
  .m2-rays>.ray:nth-child(93){--a0:-125.5deg;--a1:-54.4deg;--a2:-73.8deg;--a3:-89.5deg;--l0:0.344;--l1:0.806;--l2:0.872;--l3:0.589;--d:95ms;--tw:-2.91s}
  .m2-rays>.ray:nth-child(94){--a0:-116.3deg;--a1:-53.1deg;--a2:-73.2deg;--a3:-89.5deg;--l0:0.582;--l1:0.812;--l2:0.878;--l3:0.986;--d:86ms;--tw:-2.5s}
  .m2-rays>.ray:nth-child(95){--a0:-54.9deg;--a1:-51.7deg;--a2:-72.6deg;--a3:-89.4deg;--l0:0.738;--l1:0.819;--l2:0.802;--l3:0.542;--d:149ms;--tw:-1.41s}
  .m2-rays>.ray:nth-child(96){--a0:-128.5deg;--a1:-50.4deg;--a2:-72.0deg;--a3:-89.4deg;--l0:0.669;--l1:0.825;--l2:0.782;--l3:0.538;--d:82ms;--tw:-1.38s}
  .m2-rays>.ray:nth-child(97){--a0:-172.6deg;--a1:-49.0deg;--a2:-71.4deg;--a3:-89.4deg;--l0:0.690;--l1:0.829;--l2:0.792;--l3:0.701;--d:119ms;--tw:-3.4s}
  .m2-rays>.ray:nth-child(98){--a0:-68.8deg;--a1:-47.7deg;--a2:-70.8deg;--a3:-89.4deg;--l0:0.157;--l1:0.829;--l2:0.844;--l3:0.368;--d:155ms;--tw:-1.23s}
  .m2-rays>.ray:nth-child(99){--a0:-139.3deg;--a1:-46.3deg;--a2:-70.2deg;--a3:-89.4deg;--l0:0.304;--l1:0.827;--l2:0.840;--l3:0.898;--d:141ms;--tw:-2.92s}
  .m2-rays>.ray:nth-child(100){--a0:-121.1deg;--a1:-45.0deg;--a2:-69.5deg;--a3:-89.3deg;--l0:0.238;--l1:0.820;--l2:0.797;--l3:0.912;--d:166ms;--tw:-0.34s}
  .m2-rays>.ray:nth-child(101){--a0:-17.2deg;--a1:-43.6deg;--a2:-68.9deg;--a3:-89.3deg;--l0:0.357;--l1:0.809;--l2:0.816;--l3:0.849;--d:95ms;--tw:-2.46s}
  .m2-rays>.ray:nth-child(102){--a0:-23.8deg;--a1:-42.3deg;--a2:-68.3deg;--a3:-89.3deg;--l0:0.814;--l1:0.795;--l2:0.748;--l3:0.800;--d:125ms;--tw:-3.64s}
  .m2-rays>.ray:nth-child(103){--a0:-81.5deg;--a1:-41.0deg;--a2:-67.7deg;--a3:-89.3deg;--l0:0.134;--l1:0.779;--l2:0.813;--l3:0.806;--d:86ms;--tw:-1.24s}
  .m2-rays>.ray:nth-child(104){--a0:-66.4deg;--a1:-39.6deg;--a2:-67.1deg;--a3:-89.3deg;--l0:0.510;--l1:0.761;--l2:0.731;--l3:0.966;--d:172ms;--tw:-1.76s}
  .m2-rays>.ray:nth-child(105){--a0:-71.5deg;--a1:-38.3deg;--a2:-66.5deg;--a3:-89.2deg;--l0:0.306;--l1:0.743;--l2:0.762;--l3:0.825;--d:104ms;--tw:-1.19s}
  .m2-rays>.ray:nth-child(106){--a0:-137.9deg;--a1:-36.9deg;--a2:-65.9deg;--a3:-89.2deg;--l0:0.115;--l1:0.726;--l2:0.801;--l3:0.412;--d:127ms;--tw:-1.25s}
  .m2-rays>.ray:nth-child(107){--a0:-115.7deg;--a1:-35.6deg;--a2:-65.3deg;--a3:-89.2deg;--l0:0.423;--l1:0.712;--l2:0.714;--l3:0.673;--d:97ms;--tw:-0.32s}
  .m2-rays>.ray:nth-child(108){--a0:-135.2deg;--a1:-34.2deg;--a2:-64.7deg;--a3:-89.2deg;--l0:0.264;--l1:0.701;--l2:0.724;--l3:0.886;--d:154ms;--tw:-1.89s}
  .m2-rays>.ray:nth-child(109){--a0:-57.7deg;--a1:-32.9deg;--a2:-64.0deg;--a3:-89.2deg;--l0:0.245;--l1:0.693;--l2:0.749;--l3:0.822;--d:145ms;--tw:-3.01s}
  .m2-rays>.ray:nth-child(110){--a0:-15.5deg;--a1:-31.6deg;--a2:-63.4deg;--a3:-89.1deg;--l0:0.211;--l1:0.690;--l2:0.747;--l3:0.984;--d:147ms;--tw:-3.62s}
  .m2-rays>.ray:nth-child(111){--a0:-51.1deg;--a1:-30.2deg;--a2:-62.8deg;--a3:-89.1deg;--l0:0.212;--l1:0.690;--l2:0.748;--l3:0.596;--d:150ms;--tw:-0.99s}
  .m2-rays>.ray:nth-child(112){--a0:-26.4deg;--a1:-28.9deg;--a2:-62.2deg;--a3:-89.1deg;--l0:0.523;--l1:0.692;--l2:0.728;--l3:0.381;--d:130ms;--tw:-3.87s}
  .m2-rays>.ray:nth-child(113){--a0:-83.4deg;--a1:-27.5deg;--a2:-61.6deg;--a3:-89.1deg;--l0:0.577;--l1:0.696;--l2:0.709;--l3:0.688;--d:193ms;--tw:-3.13s}
  .m2-rays>.ray:nth-child(114){--a0:-104.0deg;--a1:-26.2deg;--a2:-61.0deg;--a3:-89.1deg;--l0:0.564;--l1:0.701;--l2:0.718;--l3:0.483;--d:171ms;--tw:-1.72s}
  .m2-rays>.ray:nth-child(115){--a0:-126.2deg;--a1:-24.8deg;--a2:-60.4deg;--a3:-89.0deg;--l0:0.290;--l1:0.704;--l2:0.663;--l3:0.769;--d:200ms;--tw:-3.73s}
  .m2-rays>.ray:nth-child(116){--a0:-27.8deg;--a1:-23.5deg;--a2:-59.8deg;--a3:-89.0deg;--l0:0.383;--l1:0.705;--l2:0.695;--l3:0.926;--d:118ms;--tw:-1.45s}
  .m2-rays>.ray:nth-child(117){--a0:-117.7deg;--a1:-22.2deg;--a2:-59.2deg;--a3:-89.0deg;--l0:0.329;--l1:0.703;--l2:0.635;--l3:0.775;--d:201ms;--tw:-0.94s}
  .m2-rays>.ray:nth-child(118){--a0:-118.8deg;--a1:-20.8deg;--a2:-58.5deg;--a3:-89.0deg;--l0:0.683;--l1:0.697;--l2:0.644;--l3:0.840;--d:133ms;--tw:-2.38s}
  .m2-rays>.ray:nth-child(119){--a0:-59.7deg;--a1:-19.5deg;--a2:-57.9deg;--a3:-89.0deg;--l0:0.120;--l1:0.687;--l2:0.711;--l3:0.894;--d:163ms;--tw:-3.44s}
  .m2-rays>.ray:nth-child(120){--a0:-147.7deg;--a1:-18.1deg;--a2:-57.3deg;--a3:-88.9deg;--l0:0.305;--l1:0.674;--l2:0.690;--l3:0.625;--d:126ms;--tw:-0.66s}
  .m2-rays>.ray:nth-child(121){--a0:-75.0deg;--a1:-16.8deg;--a2:-56.7deg;--a3:-88.9deg;--l0:0.524;--l1:0.657;--l2:0.647;--l3:0.583;--d:211ms;--tw:-1.37s}
  .m2-rays>.ray:nth-child(122){--a0:-141.4deg;--a1:-15.4deg;--a2:-56.1deg;--a3:-88.9deg;--l0:0.402;--l1:0.638;--l2:0.613;--l3:0.379;--d:157ms;--tw:-0.46s}
  .m2-rays>.ray:nth-child(123){--a0:-81.5deg;--a1:-14.1deg;--a2:-55.5deg;--a3:-88.9deg;--l0:0.682;--l1:0.619;--l2:0.637;--l3:0.359;--d:194ms;--tw:-1.61s}
  .m2-rays>.ray:nth-child(124){--a0:-7.3deg;--a1:-12.7deg;--a2:-54.9deg;--a3:-88.9deg;--l0:0.411;--l1:0.599;--l2:0.608;--l3:0.550;--d:176ms;--tw:-1.28s}
  .m2-rays>.ray:nth-child(125){--a0:-107.7deg;--a1:-11.4deg;--a2:-54.3deg;--a3:-88.8deg;--l0:0.536;--l1:0.582;--l2:0.659;--l3:0.833;--d:213ms;--tw:-3.21s}
  .m2-rays>.ray:nth-child(126){--a0:-64.9deg;--a1:-10.1deg;--a2:-53.7deg;--a3:-88.8deg;--l0:0.110;--l1:0.567;--l2:0.652;--l3:0.796;--d:160ms;--tw:-1.89s}
  .m2-rays>.ray:nth-child(127){--a0:-38.7deg;--a1:-8.7deg;--a2:-53.1deg;--a3:-88.8deg;--l0:0.329;--l1:0.556;--l2:0.645;--l3:0.947;--d:208ms;--tw:-1.52s}
  .m2-rays>.ray:nth-child(128){--a0:-12.4deg;--a1:-7.4deg;--a2:-52.4deg;--a3:-88.8deg;--l0:0.805;--l1:0.548;--l2:0.582;--l3:0.554;--d:211ms;--tw:-3.03s}
  .m2-rays>.ray:nth-child(129){--a0:-99.3deg;--a1:-6.0deg;--a2:-51.8deg;--a3:-88.8deg;--l0:0.873;--l1:0.545;--l2:0.568;--l3:0.492;--d:202ms;--tw:-3.63s}
  .m2-rays>.ray:nth-child(130){--a0:-95.3deg;--a1:-4.7deg;--a2:-51.2deg;--a3:-88.7deg;--l0:0.676;--l1:0.545;--l2:0.652;--l3:0.531;--d:165ms;--tw:-1.04s}
  .m2-rays>.ray:nth-child(131){--a0:-152.7deg;--a1:-3.3deg;--a2:-50.6deg;--a3:-88.7deg;--l0:0.431;--l1:0.547;--l2:0.645;--l3:0.441;--d:204ms;--tw:-2.12s}
  .m2-rays>.ray:nth-child(132){--a0:-91.6deg;--a1:-2.0deg;--a2:-50.0deg;--a3:-88.7deg;--l0:0.804;--l1:0.550;--l2:0.625;--l3:0.402;--d:222ms;--tw:-1.6s}
  /* ray colour groups, per-ray stroke opacity and the sparks */
  .m2-rays>.ray:nth-child(n+1):nth-child(-n+17){color:#14B8A6;--rg:url(#m2r0)}
  .m2-rays>.ray:nth-child(n+18):nth-child(-n+33){color:#0EA5E9;--rg:url(#m2r1)}
  .m2-rays>.ray:nth-child(n+34):nth-child(-n+50){color:#3B82F6;--rg:url(#m2r2)}
  .m2-rays>.ray:nth-child(n+51):nth-child(-n+66){color:#6366F1;--rg:url(#m2r3)}
  .m2-rays>.ray:nth-child(n+67):nth-child(-n+82){color:#8B5CF6;--rg:url(#m2r4)}
  .m2-rays>.ray:nth-child(n+83):nth-child(-n+99){color:#A855F7;--rg:url(#m2r5)}
  .m2-rays>.ray:nth-child(n+100):nth-child(-n+115){color:#EC4899;--rg:url(#m2r6)}
  .m2-rays>.ray:nth-child(n+116):nth-child(-n+132){color:#FF7A45;--rg:url(#m2r7)}
  .m2-rays>.ray:nth-child(1){--o:0.86}
  .m2-rays>.ray:nth-child(2){--o:0.53}
  .m2-rays>.ray:nth-child(3){--o:0.89}
  .m2-rays>.ray:nth-child(4){--o:0.67}
  .m2-rays>.ray:nth-child(5){--o:0.65}
  .m2-rays>.ray:nth-child(6){--o:0.94}
  .m2-rays>.ray:nth-child(7){--o:0.71}
  .m2-rays>.ray:nth-child(8){--o:0.70}
  .m2-rays>.ray:nth-child(9){--o:0.95}
  .m2-rays>.ray:nth-child(10){--o:0.75}
  .m2-rays>.ray:nth-child(11){--o:0.77}
  .m2-rays>.ray:nth-child(12){--o:0.81}
  .m2-rays>.ray:nth-child(13){--o:0.77}
  .m2-rays>.ray:nth-child(14){--o:0.53}
  .m2-rays>.ray:nth-child(15){--o:0.69}
  .m2-rays>.ray:nth-child(16){--o:0.72}
  .m2-rays>.ray:nth-child(17){--o:0.88}
  .m2-rays>.ray:nth-child(18){--o:0.64}
  .m2-rays>.ray:nth-child(19){--o:0.51}
  .m2-rays>.ray:nth-child(20){--o:0.93}
  .m2-rays>.ray:nth-child(21){--o:0.56}
  .m2-rays>.ray:nth-child(22){--o:0.60}
  .m2-rays>.ray:nth-child(23){--o:0.82}
  .m2-rays>.ray:nth-child(24){--o:0.58}
  .m2-rays>.ray:nth-child(25){--o:0.64}
  .m2-rays>.ray:nth-child(26){--o:0.77}
  .m2-rays>.ray:nth-child(27){--o:0.75}
  .m2-rays>.ray:nth-child(28){--o:0.55}
  .m2-rays>.ray:nth-child(29){--o:0.51}
  .m2-rays>.ray:nth-child(30){--o:0.52}
  .m2-rays>.ray:nth-child(31){--o:0.61}
  .m2-rays>.ray:nth-child(32){--o:0.72}
  .m2-rays>.ray:nth-child(33){--o:0.81}
  .m2-rays>.ray:nth-child(34){--o:0.93}
  .m2-rays>.ray:nth-child(35){--o:0.75}
  .m2-rays>.ray:nth-child(36){--o:0.93}
  .m2-rays>.ray:nth-child(37){--o:0.93}
  .m2-rays>.ray:nth-child(38){--o:0.77}
  .m2-rays>.ray:nth-child(39){--o:0.63}
  .m2-rays>.ray:nth-child(40){--o:0.86}
  .m2-rays>.ray:nth-child(41){--o:0.82}
  .m2-rays>.ray:nth-child(42){--o:0.67}
  .m2-rays>.ray:nth-child(43){--o:0.68}
  .m2-rays>.ray:nth-child(44){--o:0.51}
  .m2-rays>.ray:nth-child(45){--o:0.53}
  .m2-rays>.ray:nth-child(46){--o:0.62}
  .m2-rays>.ray:nth-child(47){--o:0.73}
  .m2-rays>.ray:nth-child(48){--o:0.81}
  .m2-rays>.ray:nth-child(49){--o:0.81}
  .m2-rays>.ray:nth-child(50){--o:0.66}
  .m2-rays>.ray:nth-child(51){--o:0.86}
  .m2-rays>.ray:nth-child(52){--o:0.91}
  .m2-rays>.ray:nth-child(53){--o:0.66}
  .m2-rays>.ray:nth-child(54){--o:0.74}
  .m2-rays>.ray:nth-child(55){--o:0.90}
  .m2-rays>.ray:nth-child(56){--o:0.66}
  .m2-rays>.ray:nth-child(57){--o:0.59}
  .m2-rays>.ray:nth-child(58){--o:0.61}
  .m2-rays>.ray:nth-child(59){--o:0.69}
  .m2-rays>.ray:nth-child(60){--o:0.76}
  .m2-rays>.ray:nth-child(61){--o:0.50}
  .m2-rays>.ray:nth-child(62){--o:0.83}
  .m2-rays>.ray:nth-child(63){--o:0.71}
  .m2-rays>.ray:nth-child(64){--o:0.67}
  .m2-rays>.ray:nth-child(65){--o:0.90}
  .m2-rays>.ray:nth-child(66){--o:0.81}
  .m2-rays>.ray:nth-child(67){--o:0.81}
  .m2-rays>.ray:nth-child(68){--o:0.81}
  .m2-rays>.ray:nth-child(69){--o:0.70}
  .m2-rays>.ray:nth-child(70){--o:0.66}
  .m2-rays>.ray:nth-child(71){--o:0.51}
  .m2-rays>.ray:nth-child(72){--o:0.72}
  .m2-rays>.ray:nth-child(73){--o:0.58}
  .m2-rays>.ray:nth-child(74){--o:0.55}
  .m2-rays>.ray:nth-child(75){--o:0.61}
  .m2-rays>.ray:nth-child(76){--o:0.80}
  .m2-rays>.ray:nth-child(77){--o:0.52}
  .m2-rays>.ray:nth-child(78){--o:0.93}
  .m2-rays>.ray:nth-child(79){--o:0.80}
  .m2-rays>.ray:nth-child(80){--o:0.86}
  .m2-rays>.ray:nth-child(81){--o:0.60}
  .m2-rays>.ray:nth-child(82){--o:0.75}
  .m2-rays>.ray:nth-child(83){--o:0.91}
  .m2-rays>.ray:nth-child(84){--o:0.80}
  .m2-rays>.ray:nth-child(85){--o:0.63}
  .m2-rays>.ray:nth-child(86){--o:0.88}
  .m2-rays>.ray:nth-child(87){--o:0.95}
  .m2-rays>.ray:nth-child(88){--o:0.62}
  .m2-rays>.ray:nth-child(89){--o:0.90}
  .m2-rays>.ray:nth-child(90){--o:0.79}
  .m2-rays>.ray:nth-child(91){--o:0.50}
  .m2-rays>.ray:nth-child(92){--o:0.73}
  .m2-rays>.ray:nth-child(93){--o:0.55}
  .m2-rays>.ray:nth-child(94){--o:0.64}
  .m2-rays>.ray:nth-child(95){--o:0.78}
  .m2-rays>.ray:nth-child(96){--o:0.60}
  .m2-rays>.ray:nth-child(97){--o:0.88}
  .m2-rays>.ray:nth-child(98){--o:0.61}
  .m2-rays>.ray:nth-child(99){--o:0.61}
  .m2-rays>.ray:nth-child(100){--o:0.93}
  .m2-rays>.ray:nth-child(101){--o:0.94}
  .m2-rays>.ray:nth-child(102){--o:0.58}
  .m2-rays>.ray:nth-child(103){--o:0.56}
  .m2-rays>.ray:nth-child(104){--o:0.76}
  .m2-rays>.ray:nth-child(105){--o:0.84}
  .m2-rays>.ray:nth-child(106){--o:0.62}
  .m2-rays>.ray:nth-child(107){--o:0.59}
  .m2-rays>.ray:nth-child(108){--o:0.85}
  .m2-rays>.ray:nth-child(109){--o:0.78}
  .m2-rays>.ray:nth-child(110){--o:0.54}
  .m2-rays>.ray:nth-child(111){--o:0.62}
  .m2-rays>.ray:nth-child(112){--o:0.59}
  .m2-rays>.ray:nth-child(113){--o:0.61}
  .m2-rays>.ray:nth-child(114){--o:0.51}
  .m2-rays>.ray:nth-child(115){--o:0.78}
  .m2-rays>.ray:nth-child(116){--o:0.67}
  .m2-rays>.ray:nth-child(117){--o:0.58}
  .m2-rays>.ray:nth-child(118){--o:0.82}
  .m2-rays>.ray:nth-child(119){--o:0.77}
  .m2-rays>.ray:nth-child(120){--o:0.58}
  .m2-rays>.ray:nth-child(121){--o:0.80}
  .m2-rays>.ray:nth-child(122){--o:0.67}
  .m2-rays>.ray:nth-child(123){--o:0.84}
  .m2-rays>.ray:nth-child(124){--o:0.55}
  .m2-rays>.ray:nth-child(125){--o:0.69}
  .m2-rays>.ray:nth-child(126){--o:0.62}
  .m2-rays>.ray:nth-child(127){--o:0.65}
  .m2-rays>.ray:nth-child(128){--o:0.63}
  .m2-rays>.ray:nth-child(129){--o:0.93}
  .m2-rays>.ray:nth-child(130){--o:0.85}
  .m2-rays>.ray:nth-child(131){--o:0.93}
  .m2-rays>.ray:nth-child(132){--o:0.94}
  .m2-rays>.ray:nth-child(5)>use{--spk:block;--spkd:4.2s;--spkb:-1.5s}
  .m2-rays>.ray:nth-child(14)>use{--spk:block;--spkd:3.8s;--spkb:-2.4s}
  .m2-rays>.ray:nth-child(23)>use{--spk:block;--spkd:3.4s;--spkb:-2.6s}
  .m2-rays>.ray:nth-child(32)>use{--spk:block;--spkd:3.0s;--spkb:-2.2s}
  .m2-rays>.ray:nth-child(41)>use{--spk:block;--spkd:2.6s;--spkb:-0.7s}
  .m2-rays>.ray:nth-child(50)>use{--spk:block;--spkd:4.2s;--spkb:-1.6s}
  .m2-rays>.ray:nth-child(59)>use{--spk:block;--spkd:3.8s;--spkb:-1.1s}
  .m2-rays>.ray:nth-child(68)>use{--spk:block;--spkd:3.4s;--spkb:-1.2s}
  .m2-rays>.ray:nth-child(77)>use{--spk:block;--spkd:3.0s;--spkb:-1.5s}
  .m2-rays>.ray:nth-child(86)>use{--spk:block;--spkd:2.6s;--spkb:-0.4s}
  .m2-rays>.ray:nth-child(95)>use{--spk:block;--spkd:4.2s;--spkb:-2.5s}
  .m2-rays>.ray:nth-child(104)>use{--spk:block;--spkd:3.8s;--spkb:-1.1s}
  .m2-rays>.ray:nth-child(113)>use{--spk:block;--spkd:3.4s;--spkb:-1.3s}
  .m2-rays>.ray:nth-child(122)>use{--spk:block;--spkd:3.0s;--spkb:-2.0s}
  .m2-rays>.ray:nth-child(131)>use{--spk:block;--spkd:2.6s;--spkb:-1.5s}

  /* ---------- home page assembly (page agent): joins, icons and states the shared rules above do not cover ---------- */
  /* the services band follows the logo band, not the hero, so it needs its own top hairline */
  .logo-sec + .band > .frame:first-child { border-top: 1px solid var(--line); }
  .logo-band-l .ibtn { display: flex; }
  .logo-band-l .ibtn .i-play, .logo-band-l .ibtn[aria-pressed="true"] .i-pause { display: none; }
  .logo-band-l .ibtn[aria-pressed="true"] .i-play { display: block; }
  .night-card .oc-wrap { justify-self: end; }
  .ind-card .h1 { font-size: clamp(28px, 2.8vw, 38px); }
  .ind-panel > .thr { -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.35) 75%, transparent); mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.35) 75%, transparent); }
  /* industry list icons (the design's five line icons, one per industry anchor) */
  .ind-ic { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
  .i-tech { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3Cpath d='M10 8.4L8 10l2 1.6M14 8.4l2 1.6-2 1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3Cpath d='M10 8.4L8 10l2 1.6M14 8.4l2 1.6-2 1.6'/%3E%3C/svg%3E"); }
  .i-health { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.5-7.5-10a4.3 4.3 0 0 1 7.5-2.8A4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z'/%3E%3Cpath d='M7.2 12.2h2.4l1.4-2.4 2 4.6 1.4-2.2h2.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.5-7.5-10a4.3 4.3 0 0 1 7.5-2.8A4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z'/%3E%3Cpath d='M7.2 12.2h2.4l1.4-2.4 2 4.6 1.4-2.2h2.4'/%3E%3C/svg%3E"); }
  .i-industrial { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V10.5l5 3v-3l5 3v-3l5 3V4.5h3v16z'/%3E%3Cpath d='M7 17.2h2M11.5 17.2h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V10.5l5 3v-3l5 3v-3l5 3V4.5h3v16z'/%3E%3Cpath d='M7 17.2h2M11.5 17.2h2'/%3E%3C/svg%3E"); }
  .i-property { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20.5V6.8L12 3.5l7 3.3v13.7'/%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M9.2 9.5h.01M14.8 9.5h.01M9.2 13.2h.01M14.8 13.2h.01'/%3E%3Cpath d='M10.5 20.5v-3.6h3v3.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20.5V6.8L12 3.5l7 3.3v13.7'/%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M9.2 9.5h.01M14.8 9.5h.01M9.2 13.2h.01M14.8 13.2h.01'/%3E%3Cpath d='M10.5 20.5v-3.6h3v3.6'/%3E%3C/svg%3E"); }
  .i-legal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15.5M8.5 19.5h7'/%3E%3Cpath d='M5 7.2h14'/%3E%3Cpath d='M12 4.2l-1.2 1.4M12 4.2l1.2 1.4'/%3E%3Cpath d='M5 7.2l-2.4 5.6a2.4 2.4 0 0 0 4.8 0z'/%3E%3Cpath d='M19 7.2l-2.4 5.6a2.4 2.4 0 0 0 4.8 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15.5M8.5 19.5h7'/%3E%3Cpath d='M5 7.2h14'/%3E%3Cpath d='M12 4.2l-1.2 1.4M12 4.2l1.2 1.4'/%3E%3Cpath d='M5 7.2l-2.4 5.6a2.4 2.4 0 0 0 4.8 0z'/%3E%3Cpath d='M19 7.2l-2.4 5.6a2.4 2.4 0 0 0 4.8 0z'/%3E%3C/svg%3E"); }
  /* method step numbers take the step colour (the shared rules key on .m2-c0..3; the loop marks steps by position) */
  .m2-row > .m2-step:nth-child(1):is(.on, [aria-pressed="true"]) .m2-n { color: #0F9488; }
  .m2-row > .m2-step:nth-child(2):is(.on, [aria-pressed="true"]) .m2-n { color: #B45309; }
  .m2-row > .m2-step:nth-child(3):is(.on, [aria-pressed="true"]) .m2-n { color: #2563EB; }
  .m2-row > .m2-step:nth-child(4):is(.on, [aria-pressed="true"]) .m2-n { color: #E2551B; }
  /* quotes: one tab per review in site.reviews; the first is active until the quotes module runs */
  .home-quotes .qtabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .home-quotes .qtabs:not(:has(.on)) > .qtab:first-child { color: var(--ink); }
  .home-quotes .qtabs:not(:has(.on)) > .qtab:first-child::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--violet), var(--accent)); }
  @media (max-width: 700px) {
    .home-quotes .qtabs { display: flex; overflow-x: auto; scrollbar-width: none; }
    .home-quotes .qtabs::-webkit-scrollbar { display: none; }
    .home-quotes .qtab { flex: none; padding: 0 16px; }
    .home-quotes .qtabs > .qtab:is(.on, [aria-selected="true"], :first-child)::before { top: 0; }
  }
}

/* ---- 55-services.css ---- */
@layer components {
  /* ---------- services overview: four row cards, "better together", ways to work, pairs ---------- */
  .row-stack, .ind-rows { display: flex; flex-direction: column; gap: 20px; }
  .row-card .eyebrow + .h1, .row-card .eyebrow + .h2 { margin-top: 18px; }
  .row-card .row-body { margin-top: 16px; }
  .row-card .chip-row { margin-top: 20px; }
  .row-card .btn-row { margin-top: 26px; }
  .svc-loop { display: block; width: 100%; height: auto; }
  .together-card { padding: 12px; }
  .together { display: block; width: 100%; height: auto; }
  .tg-t { font-family: var(--font-body); font-size: 15px; }
  .tg-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; }
  .ways .card { display: flex; flex-direction: column; gap: 14px; }
  .ways .card .h3 { margin-top: 8px; }
  .ways .card .body { flex: 1; }
  .pairs .sec-tight { padding-top: 64px; padding-bottom: 64px; }
  .pairs .g3 { margin-top: 24px; }
  @media (max-width: 700px) { .row-stack, .ind-rows, .svc-list { gap: 14px; } }

  #together .split { align-items: center; }

  /* ---------- /on-call: the Ardena column of the compare table (head strings carry no flags) ---------- */
  .oc-compare thead td { border-top: 0; background: var(--soft); }
  .oc-compare thead th:last-child { color: var(--ink); background: #FFF1EB; }
  .oc-hero .oc-wrap { max-width: 470px; }
}

/* ---- 56-service.css ---- */
@layer components {
  /* ---------- a single service page: hero art, signs, what we build, process, work, pricing, pairs ---------- */
  .svc-hero-art { border: 1px solid var(--line2); border-radius: var(--r-14); }

  .signs .card.cpad { padding: 36px; }
  .signs .ui-row { align-items: flex-start; }
  .signs .ui-row:first-child { border-top: 0; }
  .sign-ic { flex: none; width: 16px; height: 16px; margin-top: 4px; }
  .sign-card > .sign-wash { position: absolute; inset: 0; }
  .sign-card > :not(.sign-wash) { position: relative; }

  .process .tl .h3 { margin-top: 10px; }
  .process .tl .body { margin-top: 10px; }

  .work-card .cpad .h3 { margin: 0; }
  .work-card .art .work-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  .pricing .plan .h4 { margin-top: 2px; }
  .pairs .card .h3 { margin: 0; }
  #deliver .feat .m-num { margin: 0; }
  @media (max-width: 700px) { .signs .card.cpad { padding: 24px; } }
}

/* ---- 57-insights.css ---- */
@layer components {
  /* ---------- insights: hero with a featured note, the grid, the newsletter band ---------- */
  .ins-hero .h1 { max-width: 880px; }
  .ins-hero .row-card { margin-top: 48px; }
  .ins-hero .row-card .cpad { background: var(--white); color: var(--ink); }
  .ins-hero .row-card .eyebrow { color: var(--sub); }
  .ins-hero .row-card .h1 { margin-top: 16px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; }
  .ins-hero .row-card .body { margin-top: 14px; color: var(--slate); }
  .ins-hero .row-card .small { margin-top: 16px; color: var(--sub); }
  .ins-hero .row-card .lnk { margin-top: 10px; align-self: flex-start; }

  /* a note's picture fills its tile; the tile's gradient shade sits over it, the topic pill on top */
  .ins-hero .nimg > img, .ins-grid .nimg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ins-hero .nimg::before, .ins-grid .nimg::before { z-index: 1; }
  .ins-hero .nimg > .pill, .ins-grid .nimg > .pill { position: absolute; left: 18px; top: 18px; z-index: 2; }
  .ins-hero .nimg > .pill { left: 20px; top: 20px; }
  /* photos can be light at the top: the glass pill gets a navy tint so its label stays readable */
  .ins-hero .nimg > .pill.glass, .ins-grid .nimg > .pill.glass { background: rgba(10,26,48,.6); border-color: rgba(255,255,255,.28); }

  .ins-grid { gap: 40px 20px; }
  .ins-grid .card { display: flex; flex-direction: column; }
  .ins-grid .card .nimg, .ins-grid .thumb { height: 210px; flex: none; border-bottom: 1px solid var(--line); }
  .ins-grid .card .small { margin-top: 12px; }
  .ins-more { justify-content: center; margin-top: 48px; }
  .ins-more:has(> [hidden]:only-child) { display: none; }
  .news-split { align-items: center; }
  .news-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
  .news-form .field { flex: 1 1 260px; color: var(--white); }

  /* ---------- a note (blog post): one centred reading column, a wide picture ---------- */
  .post-col { max-width: 760px; margin-left: auto; margin-right: auto; }
  .post-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--sub); }
  .post-img { margin: 48px 0 0; border-radius: var(--r-14); overflow: hidden; background: var(--soft); border: 1px solid var(--line2); }
  .post-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
  .post-lede { margin-top: 48px; color: var(--ink); }
  .post-sec { padding-top: 0; }
  .post__body { margin: 0 auto; }
  .post__body, .prose { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--slate); overflow-wrap: anywhere; }
  .prose > :first-child { margin-top: 0; }
  .prose h2 { margin: 48px 0 16px; font-weight: var(--fw-light); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.16; letter-spacing: var(--ls-h2); color: var(--ink); }
  .prose h3 { margin: 36px 0 12px; font-weight: var(--fw-regular); font-size: 22px; line-height: 1.25; letter-spacing: -0.012em; color: var(--ink); }
  .prose h4 { margin: 28px 0 10px; font-size: 17px; font-weight: var(--fw-medium); color: var(--ink); }
  .prose p { margin: 0 0 1.2em; }
  .prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
  .prose li { margin-bottom: .5em; }
  .prose li::marker { color: var(--accent); }
  .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
  .prose strong { color: var(--ink); font-weight: var(--fw-medium); }
  .prose blockquote { margin: 32px 0; padding: 18px 24px; border-left: 2px solid var(--accent); background: var(--soft); border-radius: 0 var(--r-12) var(--r-12) 0; font-weight: var(--fw-light); font-size: 21px; line-height: 1.4; color: var(--ink); }
  .prose img { margin: 32px 0; border-radius: var(--r-12); width: 100%; height: auto; }
  .prose figure { margin: 32px 0; }
  .prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
  .prose pre { margin: 28px 0; padding: 20px; border-radius: var(--r-12); background: var(--navy); color: var(--nbody); font-size: 14px; line-height: 1.6; overflow-x: auto; max-width: 100%; }
  .prose code { font-family: var(--font-mono); font-size: .92em; }
  .prose p code, .prose li code { padding: 2px 6px; border-radius: 5px; background: var(--soft); color: var(--ink); }
  .table-scroll { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
  .table-scroll table { margin: 0; min-width: 520px; }
  .prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; }
  .prose th, .prose td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  .prose th { font-weight: var(--fw-medium); color: var(--ink); background: var(--soft); }

  @media (max-width: 900px) {
    .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-img { margin-top: 36px; }
    .post-lede { margin-top: 36px; }
  }
  @media (max-width: 700px) {
    .ins-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ins-grid .card .nimg, .ins-grid .thumb { height: 190px; }
    .ins-hero .row-card .nimg { min-height: 240px; }
    .post-img img { aspect-ratio: 16 / 10; }
    .prose { font-size: 16.5px; }
    .prose blockquote { font-size: 19px; }
  }
}

/* ---- 60-work.css ---- */
@layer components {
  /* ---------- work page: hero device, filter grid ---------- */
  .work-hero-art { min-height: 440px; }
  .work-grid { gap: 24px; }
  .work-grid .card { display: flex; flex-direction: column; }
  .work-grid .card > .art { height: 300px; position: relative; border-bottom: 1px solid var(--line); }
  .work-grid .card > .cpad { flex: 1; display: flex; gap: 16px; align-items: flex-start; }
  .work-grid .card .acc-tag.block { margin-top: 16px; }
  .work-grid .card .lnk { margin-left: auto; flex: none; min-height: 40px; }
  .work-empty { margin-top: 8px; }
  .work-empty .lnk { vertical-align: middle; }

  /* pictures on a wash: a presentation mockup fills it, a brochure page sits on it */
  .art > .art-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .art > .art-page { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: auto; max-width: 78%; max-height: 80%; border-radius: 6px; box-shadow: 0 30px 60px -26px rgba(11, 22, 49, .5), 0 0 0 1px rgba(11, 22, 49, .06); background: var(--white); }

  /* ---------- case study ---------- */
  .case-hero .h1 { margin-top: 22px; max-width: 980px; }
  .case-stage > .dev, .case-stage > img, .case-next-ui { z-index: 1; }
  .case-stage { height: clamp(320px, 40vw, 560px); border-radius: var(--r-16) var(--r-16) 0 0; border-bottom: 0; }
  .case-stats { border: 1px solid var(--line2); border-top: 0; border-radius: 0 0 var(--r-16) var(--r-16); }
  .case-story { display: flex; flex-direction: column; gap: 64px; }
  .case-story .split .h2 { margin-top: 18px; }
  .case-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .case-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--slate); }
  .case-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
  .case-imgs { gap: 16px; }
  .case-imgs > .case-img:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .case-img { height: 360px; margin: 0; }
  .case-imgs > .case-img:last-child:nth-child(odd) { height: clamp(360px, 40vw, 520px); }
  .case-next .h1 { margin-top: 18px; font-size: clamp(32px, 3.6vw, 48px); }
  .case-next .lnk { margin-top: 18px; align-self: flex-start; }
  .case-next > .art { position: relative; min-height: 300px; }
  .case-next-ui { position: absolute; left: 10%; right: 10%; top: 18%; }
  .case-next-ui .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 900px) { .case-story { gap: 44px; } .case-img, .case-imgs > .case-img:last-child:nth-child(odd) { height: 260px; } }
  @media (max-width: 700px) {
    .work-grid { gap: 14px; }
    .work-grid .card > .art { height: 240px; }
    .work-grid .card > .cpad { flex-direction: column; gap: 4px; }
    .work-grid .card .lnk { margin-left: 0; }
    .work-hero-art { min-height: 300px; }
    .case-stage > .dev, .case-stage > img, .case-next-ui { z-index: 1; }
  .case-stage { height: 300px; }
  }
}

/* ---- 61-industries.css ---- */
@layer components {
  /* ---------- industries hub: hero pills and toasts, one row card per industry, the "not on the list" band ---------- */
  .ind-pills svg { width: 16px; height: 16px; flex: none; }
  .ind-hero-art > .thr { opacity: .7; }
  .ind-hero-art > .thr use { stroke: url(#wg-night); }
  .ind-hero-art .toast-i svg { width: 13px; height: 13px; }
  .ind-rows { gap: 20px; }
  .ind-rows .row-card .eyebrow + .h1 { margin-top: 16px; }
  .ind-rows .row-card .row-body, .ind-rows .row-card .small { margin-top: 14px; }
  .ind-rows .row-card .btn-row { margin-top: 24px; }
  .ind-other .split { align-items: center; }
  .ind-other .lead { margin-top: 20px; }
  .ind-other .btn-row { margin-top: 28px; }

  /* ---------- one industry page: the sector's mock on its wash-coloured wave, focus areas, pairs ---------- */
  .ind-stage { position: absolute; inset: 0; }
  .ihero-art .ind-stage { background: none; }
  .ind-stage > .thr { opacity: .7; }
  .ind-legacy { font-size: clamp(32px, 3.4vw, 46px); }
  .ind-focus .feat:nth-child(4n+1) .m-num { color: #157A74; }
  .ind-focus .feat:nth-child(4n+2) .m-num { color: #B07A10; }
  .ind-focus .feat:nth-child(4n+3) .m-num { color: #13618B; }
  .ind-focus .feat:nth-child(4n+4) .m-num { color: #E2551B; }
  .ind-focus .ftt { margin-top: 0; }
  /* the three legacy pages carry no mock: a shorter wave once the hero stacks */
  @media (max-width: 900px) { .ihero-art.ind-plain { min-height: 220px; } }
}

/* ---- 62-about.css ---- */
@layer components {
  /* ---------- about: story, numbers, beliefs, two studios, team, AI ---------- */
  .ld-art { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
  .ld-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
  .story .vstack { gap: 18px; }
  .story .h2 { margin-top: 20px; }
  .studios .g2 { margin-top: 56px; }
  .studios .card { padding: 36px; }
  .studio-h { margin-top: 26px; font-size: 40px; }
  .studios .card .body { margin-top: 12px; }
  .studio-lines { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nline); }
  .studio-lines a { color: var(--white); text-decoration: none; }
  .team { gap: 32px 16px; }
  .team .h4 { margin-top: 14px; }
  .ai-split { align-items: center; }
  .ai-table .ui-row { padding: 14px 0; }
  .ai-table .ui-row:first-child { border-top: 0; }
  @media (max-width: 700px) { .studio-h { font-size: 32px; } .studios .card { padding: 24px; } }
}

/* ---- 63-legal.css ---- */
@layer components {
  /* ---------- legal pages: privacy, cookies, terms (body type comes from .prose) ---------- */
  .legal-page__body > h2:first-child { margin-top: 0; }
  .legal-page__body h2 + p, .legal-page__body h3 + p { margin-top: 0; }

  /* ---------- thank-you ---------- */
  .thanks-steps { list-style: none; }
  .thanks-steps .m-num { margin: 6px 0 0; }
  .thanks-steps .ftt { margin-top: 0; }
  .thanks-wait { gap: 28px 56px; align-items: center; }
  .thanks-wait__links { justify-content: flex-end; }

  /* ---------- 404 ---------- */
  .notfound-num { font-size: clamp(120px, 20vw, 260px); line-height: .9; letter-spacing: -0.06em; }
  .notfound-num .gtext { padding-right: .04em; }
  .notfound-links { list-style: none; }
  .notfound-links__sub { color: var(--sub); }
  .notfound-links__sub::before { content: "·"; margin-right: 8px; color: var(--line2); }

  @media (max-width: 900px) {
    .thanks-wait__links { justify-content: flex-start; }
  }
  @media (max-width: 700px) {
    .thanks-wait.cpad.lg { padding: 26px 22px; }
  }
}

/* ---- 64-offer.css ---- */
@layer components {
  /* ---------- on-call (kept for templates/pages/on-call.mustache) ---------- */
  .plans .g3 { margin-top: 56px; align-items: stretch; }
  .plans .h2 { margin-top: 20px; }
  .how-it-works .cols4 .m-num { margin-bottom: 0; }
  .oc-hero .ihero-art { display: flex; align-items: center; justify-content: center; }

  /* ---------- /offers ---------- */
  .offers-fig { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 360px; }
  .offers-chip { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; font-size: 13px; }
  .offers-chip:nth-child(2) { margin-left: 18%; }
  .offers-chip-p { font-size: 40px; font-weight: var(--fw-light); letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
  .offer-card { display: flex; flex-direction: column; }
  .offer-card .lnk { margin-top: auto; padding-top: 16px; }
  .offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  .offer-price .plan-price { color: var(--ink); }
  .offer-dark .h2 { max-width: 560px; }
  .split.offer-mid { align-items: center; }

  /* ---------- package pages: hero ---------- */
  .offer-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--slate); }
  .offer-ticks li { display: flex; align-items: center; gap: 8px; }
  .offer-ticks li::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--aqua); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .offer-qform { position: relative; width: 100%; max-width: 560px; gap: 16px; }
  .offer-qform .h3 { font-size: 24px; }
  .w100.btn { width: 100%; }

  /* ---------- trust strip and numbers ---------- */
  .offer-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 0; }
  .offer-trust .stat { padding: 30px 24px 28px; }
  .offer-trust .stat-n { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; font-weight: var(--fw-regular); }
  .offer-trust .stat-l { margin-top: 8px; }
  .offer-numbers { padding-bottom: 0; }
  .offer-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 40px; border-bottom: 0; }
  .offer-stats .stat-n { font-size: clamp(34px, 3.4vw, 48px); }

  /* ---------- work ---------- */
  .offer-group { margin: 48px 0 18px; }
  .shead + .offer-group { margin-top: 0; }
  .offer-work .card > .cpad { display: block; }
  .offer-work .lnk { margin-left: 0; color: var(--sub); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; min-height: 32px; }
  .offer-work .art > .dev, .offer-work .art > .offer-shot, .offer-work .art > .offer-cover { z-index: 1; }
  .offer-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .offer-shot { position: absolute; left: 9%; right: 9%; top: 12%; border-radius: var(--r-10); }
  .offer-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
  .offer-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }

  /* ---------- included, platforms ---------- */
  .offer-num { color: #E2551B; }
  .offer-plat { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 168px; }
  .offer-wl { display: flex; flex-direction: column; justify-content: space-between; }
  .offer-wl .body { max-width: 520px; }

  /* ---------- pricing ---------- */
  .offer-single { width: 100%; max-width: 460px; justify-self: end; }
  .dark .offer-single .plan { background: var(--white); color: var(--ink); }
  #pricing .lnk { min-height: 0; }

  /* ---------- quote calculator ---------- */
  .offer-quote { gap: 32px; }
  .offer-quote fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .offer-quote legend { padding: 0; }
  .offer-quote .chip-row .seg { white-space: normal; text-align: left; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
  .offer-quote-foot { padding-top: 24px; border-top: 1px solid var(--line); }
  .offer-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
  .offer-est .plan-price { color: var(--ink); }

  /* ---------- reviews, promo ---------- */
  .offer-qtabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .offer-qtabs .qtab { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
  .offer-inline-p { color: var(--white); font-weight: var(--fw-medium); }

  @media (max-width: 1024px) {
    .offer-trust, .offer-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .offer-trust .stat:nth-child(-n+3), .offer-stats .stat:nth-child(-n+3) { border-top: 0; }
    .offer-trust .stat:not(:nth-child(3n+1)), .offer-stats .stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
    .offer-plats.g4 .offer-wl { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) {
    .offers-fig { max-width: 420px; }
    .offer-qform { max-width: none; }
    .offer-single { justify-self: stretch; max-width: none; }
    .offer-qtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    .offer-trust, .offer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .offer-trust .stat, .offer-stats .stat { border-left: 0; border-top: 1px solid var(--line); }
    .offer-trust .stat:nth-child(-n+2), .offer-stats .stat:nth-child(-n+2) { border-top: 0; }
    .offer-trust .stat:nth-child(2n), .offer-stats .stat:nth-child(2n) { border-left: 1px solid var(--line); }
    .offer-trust .stat:nth-child(odd), .offer-stats .stat:nth-child(odd) { border-left: 0; }
    .offer-trust .stat { padding: 22px 20px; }
    .offers-chip-p { font-size: 32px; }
    .offer-plats.g4 .offer-wl { grid-column: auto; }
  }
}

/* ---- 65-contact.css ---- */
@layer components {
  /* ---------- contact: studio cards beside the form, what happens next ---------- */
  .contact-cards { gap: 14px; margin-top: 40px; }
  .contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; }
  .contact-card .h4 + .small, .contact-card .small { margin-top: 6px; }
  .contact-card a { color: var(--ink); text-decoration: none; }
  .contact-card a[href^="tel:"] { white-space: nowrap; }
  .contact-card .flex { align-items: center; }
  .contact-card .pill { margin-left: auto; min-height: 28px; font-size: 13px; }
  .contact-form { align-self: start; }
  @media (max-width: 700px) { .contact-cards { margin-top: 28px; } .contact-card { padding: 18px; } }
}

/* ---- 66-styleguide.css ---- */
@layer components {
  /* ---------- styleguide (internal, /styleguide) ---------- */
  .sg-colours { gap: 12px; }
  .sg-colour { padding: 14px; }
  .sg-chip { display: block; height: 44px; border-radius: var(--r-7); border: 1px solid var(--line); }
  .sg-wash { min-height: 180px; }
  .sg-wash .cpad { position: relative; }
  .sg-dot { width: 22px; height: 22px; border-radius: 50%; }
  .sg-deep { background: var(--deep); }
  .sg-tint { background: var(--tint); border: 1px solid rgba(10,26,48,.12); }
  .sg-nimgs .nimg { height: 90px; border-radius: var(--r-10); }
  .sg-glass { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .sg-stage { height: 300px; position: relative; border-bottom: 1px solid var(--line); }
  .sg-arts .eyebrow.cpad { padding-bottom: 0; }
  .sg-arts .together-card { display: flex; flex-direction: column; gap: 12px; }
}

/* ---- 70-hover.css ---- */
@layer components {
  /* ---------- hover: the design's vocabulary, only on devices that can hover ---------- */
  @media (hover: hover) and (pointer: fine) {
    .btn-p:hover { background: #FF8D5E; color: var(--ink); }
    .btn-ink:hover { background: #1C2D4A; color: var(--white); }
    .btn-g:hover { border-color: #B6C2D4; color: var(--ink); }
    .dark .btn-g:hover { border-color: #52638F; color: var(--white); }
    .btn-w:hover { background: #EEF2F8; color: var(--ink); }
    .ibtn:hover { background: #E4E9F2; }
    .dark .ibtn:hover { background: #22335F; }
    /* arrows: the stem fades in and the head slides 3px */
    a:hover .arr .al, button:hover .arr .al, summary:hover .arr .al { stroke-opacity: 1; }
    a:hover .arr .ah, button:hover .arr .ah, summary:hover .arr .ah { transform: translateX(3px); }
    a.card:hover { border-color: #C3CEDD; box-shadow: var(--shadow-card); }
    .dark a.card:hover, a.card.dark:hover { border-color: #33467A; box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); }
    .nav-link:hover { background: #F1F4F9; color: var(--ink); }
    :is(.nav.dark, .dark .nav) .nav-link:hover { background: rgba(255,255,255,.08); color: var(--white); }
    .mega-item:hover { background: var(--soft); color: var(--ink); }
    .subnav-in a:hover { color: var(--ink); }
    .dark .subnav-in a:hover { color: var(--white); }
    .crumbs a:hover { color: var(--ink); }
    .dark .crumbs a:hover { color: var(--white); }
    .acc-head:hover .plus, .faq-q:hover .plus { background: #E4E9F2; }
    .dark .acc-head:hover .plus, .dark .faq-q:hover .plus { background: #22335F; }
    .ind-btn:hover { color: var(--ink); background: var(--soft); }
    .m2-step:hover { color: #6F7D93; }
    .qtab:hover { color: var(--ink); }
    .dark .qtab:hover { color: var(--white); }
    .seg:hover { border-color: #B6C2D4; color: var(--ink); }
    .seg.on:hover, .seg[aria-pressed="true"]:hover { color: var(--white); }
    .foot-col a:hover, .foot-bot a:hover { color: var(--ink); }
    .float-contact__btn:hover { background: var(--accent); color: var(--ink); }
    .currency:hover { border-color: #B6C2D4; color: var(--ink); }
    .marq:hover .marq-l, .marq:hover .marq-r { animation-play-state: paused; }
    .check:hover, .pill[href]:hover { border-color: #B6C2D4; }
    .cookie__body a:hover, .prose a:hover, .legal-page__body a:hover { text-decoration-color: var(--accent); }
  }
}
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .btn, .ibtn, .nav-link, .seg, .check, .pill, .currency, .float-contact__btn, .foot-col a, .foot-bot a, .subnav-in a, .crumbs a, .qtab, .ind-btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
    .mega-item { transition: background-color .15s ease; }
    a.card { transition: border-color .2s ease, box-shadow .25s ease; }
    .arr .al { transition: stroke-opacity .15s ease; }
    .arr .ah { transition: transform .15s ease; }
    .nav-chev { transition: transform .2s ease; }
    .plus { transition: transform .25s ease, background-color .2s ease; }
    .plus svg { transition: transform .25s ease; }
    .m2-step, .m2-n, .m2-d { transition: color .4s ease; }
    .m2-bar { transition: transform .7s cubic-bezier(.6,0,.2,1); }
    .news-item { transition: flex-grow .55s cubic-bezier(.2,.7,.2,1); }
    .news-t, .news-tag { transition: visibility .3s ease; }
    .cookie { transition: opacity .3s var(--ease), transform .3s var(--ease); }
    @media (max-width: 900px) { .news-item { transition: height .45s ease; } }
  }
}

/* ---- 80-tx.css ---- */
@layer components {
  /* ============================================================
     Intro and page transitions. data-tx on <html>:
       hold   first visit, while the fonts arrive: a plain white sheet
       intro  first visit only: threads gather into the A and the name appears under it
       cover  every other arrival: the sheet in place with the A in the middle
       out    leaving: the sheet rises from the bottom over the page and the A appears in the middle
       done   the sheet has gone
       none   transitions off (reduced motion, scripts failed)
     js/site.js (tx) lifts the sheet and glides its A (and after the intro the name) onto the page's own
     .a-ring and .brand-name. Without JavaScript, or when a script fails, the sheet lifts on its own.
     ============================================================ */
  .tx { position: fixed; inset: 0; z-index: 3000; background: var(--white); pointer-events: none; overflow: hidden; animation: tx-up .9s var(--ease-tx) 1.4s both; }
  .tx-in { position: absolute; inset: 0; display: block; animation: tx-up-c .9s var(--ease-tx) 1.4s both; }
  .tx-art { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
  .tx-th { --txb: 0s; }
  .tx-line { --txb: .88s; }
  .tx-edge { position: absolute; left: 0; right: 0; height: 2px; background: var(--grad-edge); }
  .tx-edge.t { top: 0; }
  .tx-edge.b { bottom: 0; }
  .tx-mark { position: fixed; inset: 0; z-index: 3001; pointer-events: none; display: block; animation: tx-hide .3s ease 1.5s both; }
  .tx-node { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: block; overflow: visible; transform-origin: 50% 50%; }
  .tx-ring { transform-box: fill-box; transform-origin: center; }
  .tx-word { position: absolute; left: 0; right: 0; top: calc(50% + 60px); display: flex; justify-content: center; }
  .tx-wordg { display: inline-block; transform-origin: 50% 50%; }
  .tx-wordi { display: inline-block; font-size: 30px; font-weight: var(--fw-medium); letter-spacing: -0.03em; line-height: 1; color: var(--ink); visibility: hidden; }

  /* with scripts: the states take over from the no-script timings */
  html[data-tx] .tx, html[data-tx] .tx-in, html[data-tx] .tx-mark { animation: none; }
  html[data-tx="hold"] .tx-mark { visibility: hidden; }
  /* CSS watchdog: if the script never lifts the sheet, it goes on its own after three seconds */
  html[data-tx="hold"] .tx, html[data-tx="cover"] .tx { animation: tx-up .9s var(--ease-tx) 3s both; }
  html[data-tx="hold"] .tx-in, html[data-tx="cover"] .tx-in { animation: tx-up-c .9s var(--ease-tx) 3s both; }
  html[data-tx="hold"] .tx-mark, html[data-tx="cover"] .tx-mark { animation: tx-hide .3s ease 3.1s both; }
  html[data-tx="intro"] .tx, html[data-tx="intro"] .tx-in, html[data-tx="intro"] .tx-mark { animation: none; }
  html[data-tx="intro"] .tx-art { visibility: visible; }
  html[data-tx="intro"] .tx-th { stroke-dasharray: 1 1; animation: drw .95s cubic-bezier(.3,.55,.25,1) both; }
  html[data-tx="intro"] .tx-line { stroke-dasharray: 1 1; animation: drw .6s cubic-bezier(.6,0,.25,1) both; }
  html[data-tx="intro"] .tx-ring { animation: en-pop .55s cubic-bezier(.2,.9,.3,1.3) .6s both; }
  html[data-tx="intro"] .tx-a { stroke-dasharray: 1 1; animation: drw .5s cubic-bezier(.5,0,.2,1) .78s both; }
  html[data-tx="intro"] .tx-wordi { visibility: visible; animation: en-rise .55s cubic-bezier(.2,.7,.2,1) 1.02s both; }
  html[data-tx="out"] .tx { animation: tx-cover .74s var(--ease-tx) both; }
  html[data-tx="out"] .tx-in { animation: tx-cover-c .74s var(--ease-tx) both; }
  html[data-tx="out"] .tx-mark { animation: tx-show .3s ease .36s both; }
  html[data-tx="done"] .tx, html[data-tx="done"] .tx-mark { visibility: hidden; }
  html[data-tx="none"] :is(.tx, .tx-mark) { display: none; }
  /* the A and the name on the page wait, hidden, until the ones on the sheet land on them */
  html[data-tx-land] .a-node { visibility: hidden; }
  html[data-tx-land="aw"] .nav .brand-name { visibility: hidden; }
  /* the page opens in place: text and layout never move; only the thread artwork draws itself in */
  html[data-tx-go] { --ed: .15s; }
  html[data-tx-go] :is(.top, .hero-frame) .drw { stroke-dasharray: 1 1; animation: drw 1.3s cubic-bezier(.45,0,.2,1) both; }
  html[data-tx-go] :is(.top, .hero-frame) .pin { animation: en-fade .6s ease both; }
  html[data-tx-go] :is(.top, .hero-frame) .gl { animation: en-fade 1s ease both; }
  html[data-tx-go] :is(.top, .hero-frame) .a-lbl { animation: en-fade .6s ease both; animation-delay: calc(var(--ed) + .7s); }
  @media (prefers-reduced-motion: reduce) { .tx, .tx-mark { display: none; } }
}
@layer motion {
  @keyframes tx-up { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-100%,0); visibility: hidden; } }
  @keyframes tx-up-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,100%,0); } }
  @keyframes tx-cover { from { transform: translate3d(0,100%,0); } to { transform: translate3d(0,0,0); } }
  @keyframes tx-cover-c { from { transform: translate3d(0,-100%,0); } to { transform: translate3d(0,0,0); } }
  @keyframes tx-show { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tx-hide { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
  @keyframes drw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes en-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes en-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes en-pop { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: none; } }
  /* the sheet's threads draw in order (generated from the design's inline delays) */
  .tx-art path:nth-of-type(1){animation-delay:calc(var(--txb,0s)+0.00s)}
  .tx-art path:nth-of-type(2){animation-delay:calc(var(--txb,0s)+0.02s)}
  .tx-art path:nth-of-type(3){animation-delay:calc(var(--txb,0s)+0.04s)}
  .tx-art path:nth-of-type(4){animation-delay:calc(var(--txb,0s)+0.06s)}
  .tx-art path:nth-of-type(5){animation-delay:calc(var(--txb,0s)+0.08s)}
  .tx-art path:nth-of-type(6){animation-delay:calc(var(--txb,0s)+0.10s)}
  .tx-art path:nth-of-type(7){animation-delay:calc(var(--txb,0s)+0.12s)}
  .tx-art path:nth-of-type(8){animation-delay:calc(var(--txb,0s)+0.14s)}
  .tx-art path:nth-of-type(9){animation-delay:calc(var(--txb,0s)+0.16s)}
  .tx-art path:nth-of-type(10){animation-delay:calc(var(--txb,0s)+0.18s)}
  .tx-art path:nth-of-type(11){animation-delay:calc(var(--txb,0s)+0.20s)}
  .tx-art path:nth-of-type(12){animation-delay:calc(var(--txb,0s)+0.22s)}
  .tx-art path:nth-of-type(13){animation-delay:calc(var(--txb,0s)+0.24s)}
  .tx-art path:nth-of-type(14){animation-delay:calc(var(--txb,0s)+0.26s)}
  .tx-art path:nth-of-type(15){animation-delay:calc(var(--txb,0s)+0.28s)}
  .tx-art path:nth-of-type(16){animation-delay:calc(var(--txb,0s)+0.30s)}
  .tx-art path:nth-of-type(17){animation-delay:calc(var(--txb,0s)+0.00s)}
  .tx-art path:nth-of-type(18){animation-delay:calc(var(--txb,0s)+0.04s)}
  .tx-art path:nth-of-type(19){animation-delay:calc(var(--txb,0s)+0.08s)}
  .tx-art path:nth-of-type(20){animation-delay:calc(var(--txb,0s)+0.12s)}
  .tx-art path:nth-of-type(21){animation-delay:calc(var(--txb,0s)+0.16s)}
}

/* ---- 90-motion.css ---- */
@layer motion {
  /* ---------- loops ---------- */
  .flow { stroke-dasharray: 70 1100; stroke-dashoffset: 70; animation: flow 5s linear infinite; }
  .bob { transform-box: fill-box; transform-origin: center; animation: bob 6s ease-in-out infinite; }
  .pulse-ring { transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
  .floaty { animation: floaty 7s ease-in-out infinite; }
  .floaty-b { animation: floaty 9s ease-in-out -3s infinite reverse; }
  .tp3.floaty { animation-delay: -2s; }
  .spin { animation: spin 30s linear infinite; }
  .live-dot { animation: livepulse 2s ease-out infinite; }
  .stats::after { animation: scan 7s linear infinite; }
  .marq-l { animation: marq-l 52s linear infinite; }
  .marq-r { animation: marq-r 60s linear infinite; }
  .marq.is-paused .marq-l, .marq.is-paused .marq-r { animation-play-state: paused; }
  .cyc > .cv { animation: cyc4 16s infinite both; animation-delay: var(--cb, 0s); }
  .cyc > .cv:nth-child(2) { animation-delay: calc(var(--cb, 0s) - 12s); }
  .cyc > .cv:nth-child(3) { animation-delay: calc(var(--cb, 0s) - 8s); }
  .cyc > .cv:nth-child(4) { animation-delay: calc(var(--cb, 0s) - 4s); }
  .m2-rays > .ray, .m2-rays > .ray > use, .m2-rays > .ray > circle { transition: transform 1.5s var(--ease-tx); }
  .m2-rays > .ray { transition-delay: var(--d); }
  .m2-rays > .ray > use, .m2-rays > .ray > circle { transition-delay: inherit; }
  .m2-rays > .ray > circle { animation: m2tw 4s ease-in-out infinite; animation-delay: var(--tw); }
  .m2-row.s0 .m2-prog { animation: m2p0 5s linear forwards; }
  .m2-row.s1 .m2-prog { animation: m2p1 5s linear forwards; }
  .m2-row.s2 .m2-prog { animation: m2p2 5s linear forwards; }
  .m2-row.s3 .m2-prog { animation: m2p3 5s linear forwards; }

  @keyframes flow { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1050; } }
  @keyframes bob { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(0,-6px); } }
  @keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
  @keyframes floaty { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(0,-10px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 100% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }
  @keyframes scan { from { left: -30%; } to { left: 100%; } }
  @keyframes marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes cyc4 { 0%, 21% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translateY(-8px); } 96% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
  @keyframes m2p0 { to { transform: scaleX(1); } }
  @keyframes m2p1 { to { transform: scaleX(1); } }
  @keyframes m2p2 { to { transform: scaleX(1); } }
  @keyframes m2p3 { to { transform: scaleX(1); } }
  @keyframes m2tw { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
  @keyframes m2spk { to { stroke-dashoffset: -1000; } }
  @keyframes rv { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }

  /* ---------- sections rise in as they scroll into view (scroll-driven animation) ---------- */
  @supports (animation-timeline: view()) {
    html[data-tx]:not([data-tx="none"]) :is(main, body) > section .sec > :not(.bento, .g2, .g3, .g4, .g5, .cols, .cols4, .vstack),
    html[data-tx]:not([data-tx="none"]) :is(main, body) > section .sec > :is(.bento, .g2, .g3, .g4, .g5, .cols, .cols4, .vstack) > *,
    html[data-tx]:not([data-tx="none"]) :is(main, body) > section > .frame > :is(.stats, .m2-head, .m2-row, .m2-stage, .m2-mcap) { animation: rv linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
  }
  /* the older reveal (IntersectionObserver in js/site.js) stays as the fallback, gated by html.js */
  @supports not (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      html.js [data-reveal] { transition: opacity .4s var(--ease), transform .4s var(--ease); }
      html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
    }
  }
  @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

  /* ---------- reduced motion: sheet off, first mock-up only, every loop still ---------- */
  @media (prefers-reduced-motion: reduce) {
    .tx, .tx-mark { display: none; }
    .cyc > .cv { animation: none; }
    .cyc > .cv:not(:first-child) { display: none; }
    .flow, .bob, .pulse-ring, .floaty, .floaty-b, .spin, .marq-l, .marq-r, .live-dot, .stats::after { animation: none; }
    .m2-rays > .ray, .m2-rays > .ray > use, .m2-rays > .ray > circle, .m2-bar { transition: none; }
    .m2-rays > .ray > circle, .m2-row .m2-prog { animation: none; }
    .m2-rays > .ray > use { --spk: none; }
    .m2-rays .spk { display: none; }
    html[data-tx-go] .drw, html[data-tx-go] .pin, html[data-tx-go] .gl, html[data-tx-go] .a-lbl { animation: none; stroke-dasharray: none; }
  }

  /* ---------- artwork timings (generated from the design's inline delays) ---------- */
  .svc-loop path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.20s)}
  .svc-loop path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.23s)}
  .svc-loop path:nth-of-type(3){animation-delay:-0.0s}
  .svc-loop path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.26s)}
  .svc-loop g:nth-of-type(1){animation-delay:-0.0s}
  .svc-loop path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.28s)}
  .svc-loop path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.31s)}
  .svc-loop path:nth-of-type(7){animation-delay:-0.8s}
  .svc-loop path:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.34s)}
  .svc-loop g:nth-of-type(2){animation-delay:-1.1s}
  .svc-loop path:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.36s)}
  .svc-loop path:nth-of-type(10){animation-delay:calc(var(--ed,0s)+0.39s)}
  .svc-loop path:nth-of-type(11){animation-delay:-1.6s}
  .svc-loop path:nth-of-type(12){animation-delay:calc(var(--ed,0s)+0.42s)}
  .svc-loop g:nth-of-type(3){animation-delay:-2.2s}
  .svc-loop path:nth-of-type(13){animation-delay:calc(var(--ed,0s)+0.44s)}
  .svc-loop path:nth-of-type(14){animation-delay:calc(var(--ed,0s)+0.47s)}
  .svc-loop path:nth-of-type(15){animation-delay:-2.4s}
  .svc-loop path:nth-of-type(16){animation-delay:calc(var(--ed,0s)+0.50s)}
  .svc-loop g:nth-of-type(4){animation-delay:-3.3s}
  .svc-loop path:nth-of-type(22){animation-duration:3s}
  .together g:nth-of-type(2)>path:nth-of-type(1){animation-duration:3s}
  .together g:nth-of-type(2)>path:nth-of-type(2){animation-delay:-0.8s;animation-duration:3s}
  .together g:nth-of-type(2)>path:nth-of-type(3){animation-delay:-1.6s;animation-duration:3s}
  .together g:nth-of-type(2)>path:nth-of-type(4){animation-delay:-2.2s;animation-duration:3s}
  .together g:nth-of-type(2)>path:nth-of-type(5){animation-duration:2.4s}
  .ld-art path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.25s)}
  .ld-art path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.30s)}
  .ld-art path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.35s)}
  .ld-art path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.40s)}
  .ld-art path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.45s)}
  .ld-art path:nth-of-type(6){animation-delay:calc(var(--ed,0s)+0.50s)}
  .ld-art path:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.55s)}
  .ld-art path:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.60s)}
  .ld-art path:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.65s)}
  .ld-art path:nth-of-type(10){animation-delay:-0s;animation-duration:4s}
  .ld-art path:nth-of-type(11){animation-delay:-2s;animation-duration:4s}
  .ihero-thr path:nth-of-type(1){animation-delay:calc(var(--ed,0s)+0.15s)}
  .ihero-thr path:nth-of-type(2){animation-delay:calc(var(--ed,0s)+0.18s)}
  .ihero-thr path:nth-of-type(3){animation-delay:calc(var(--ed,0s)+0.21s)}
  .ihero-thr path:nth-of-type(4){animation-delay:calc(var(--ed,0s)+0.24s)}
  .ihero-thr path:nth-of-type(5){animation-delay:calc(var(--ed,0s)+0.27s)}
  .ihero-thr path:nth-of-type(6){animation-delay:-2.8s;animation-duration:7s}
  .ihero-thr path:nth-of-type(7){animation-delay:calc(var(--ed,0s)+0.30s)}
  .ihero-thr path:nth-of-type(8){animation-delay:calc(var(--ed,0s)+0.33s)}
  .ihero-thr path:nth-of-type(9){animation-delay:calc(var(--ed,0s)+0.36s)}
  .ihero-thr path:nth-of-type(10){animation-delay:calc(var(--ed,0s)+0.39s)}
  .ihero-thr path:nth-of-type(11){animation-delay:calc(var(--ed,0s)+0.42s)}
  .ihero-thr path:nth-of-type(12){animation-delay:calc(var(--ed,0s)+0.45s)}
  .ihero-thr path:nth-of-type(13){animation-delay:calc(var(--ed,0s)+0.48s)}
  .ihero-thr path:nth-of-type(14){animation-delay:-7.7s;animation-duration:8s}
  .ihero-thr path:nth-of-type(15){animation-delay:calc(var(--ed,0s)+0.51s)}
  .ihero-thr path:nth-of-type(16){animation-delay:calc(var(--ed,0s)+0.54s)}
  .ihero-thr path:nth-of-type(17){animation-delay:calc(var(--ed,0s)+0.57s)}
  .ihero-thr path:nth-of-type(18){animation-delay:calc(var(--ed,0s)+0.60s)}
  .ihero-thr path:nth-of-type(19){animation-delay:calc(var(--ed,0s)+0.63s)}
  .ihero-thr path:nth-of-type(20){animation-delay:calc(var(--ed,0s)+0.66s)}
  .ihero-thr path:nth-of-type(21){animation-delay:calc(var(--ed,0s)+0.69s)}
  .ihero-thr path:nth-of-type(22){animation-delay:-12.6s;animation-duration:6s}
  .ihero-thr path:nth-of-type(23){animation-delay:calc(var(--ed,0s)+0.72s)}
  .ihero-thr path:nth-of-type(24){animation-delay:calc(var(--ed,0s)+0.75s)}
  .ihero-thr path:nth-of-type(25){animation-delay:calc(var(--ed,0s)+0.78s)}
  .night-thr path:nth-of-type(6){animation-delay:-2.8s;animation-duration:7s}
  .night-thr path:nth-of-type(14){animation-delay:-7.7s;animation-duration:8s}
  .night-thr path:nth-of-type(22){animation-delay:-12.6s;animation-duration:6s}
}