/* YC Solutions — one stylesheet, mobile first.
   Tokens are lifted verbatim from the design canvas. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F7F7F4; --card: #FFFFFF; --surface: #E8EDE7; --line: #E1E6DF; --line-strong: #C7D2CA;
  --text: #12352A; --body: #3F5A50; --muted: #506A5E; --head: #12352A;
  --accent: #12352A; --accent-hover: #2C6B55; --on-accent: #F0F5F1;
  --lime: #C9F27E; --on-lime: #12352A; --lime-ink: #49690F; --lime-body: #2A4A1E;
  --panel: #12352A; --panel-line: #3F5A50; --on-panel: #F0F5F1; --on-panel-dim: #8FB8A6;
  --danger: #9B2C1F;
  --pad: clamp(20px, 4vw, 40px);
  /* distance from the content column to the viewport edge, for full-bleed rails */
  --bleed: calc(max((100vw - 1360px) / 2, 0px) + var(--pad));
  --gap: clamp(14px, 1.6vw, 20px);
  --r-lg: 22px; --r-md: 18px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(18, 53, 42, .05), 0 18px 40px -18px rgba(18, 53, 42, .18);
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

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

/* Any display declaration outranks the [hidden] UA rule, so state it plainly. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* Header, main and footer share one stacking context so the snake can sit behind
   the content but above the page ground (a negative z-index child paints above
   its parent's background). */
.page { position: relative; isolation: isolate; background: var(--bg); }
.snake {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; color: var(--line-strong); opacity: .5; overflow: visible;
}
.snake-lit { transition: none; }
@media (max-width: 899px) { .snake { display: none; } }

img, svg { max-width: 100%; }
img { height: auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, .title-ghost { color: var(--head); letter-spacing: -.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1, .title-ghost { font-size: clamp(34px, 5.2vw, 50px); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
em { font-style: normal; color: var(--accent-hover); }
strong { font-weight: 800; color: var(--head); }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--lime); color: var(--on-lime); padding: 12px 18px;
  border-radius: var(--r-sm); font-weight: 700; transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

.kicker {
  margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.kicker.on-panel, .kicker.dim { color: var(--on-panel-dim); }
.kicker.lime { color: var(--lime); }
.fine { font-size: 13.5px; color: var(--muted); }
.lede { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.7; color: var(--body); }
h1 + .lede, h2 + .lede, .title-stack + .lede-stack, h1 + .fine, .crumbs + h1 { margin-top: 18px; }
.opt { font-weight: 500; color: var(--muted); }

/* ------------------------------------------------------------- chevrons -- */
/* The glyph slides out of a slot. On inline links the slot opens too, as drawn.
   In headings and dropdown rows the slot's width is held — opening it there
   re-wraps the label and grows the row — so only the glyph moves. */
.chev {
  display: inline-flex; align-items: center; flex: none; overflow: hidden;
  vertical-align: middle; max-width: 0; margin-inline-start: 0;
  transition: max-width .22s var(--ease), margin .22s var(--ease);
}
.chev svg {
  flex: none; transform: translateX(-200%);
  transition: transform .22s var(--ease);
}
a:hover .chev, a:focus-visible .chev, button:hover .chev, button:focus-visible .chev {
  max-width: 14px; margin-inline-start: 6px;
}
a:hover .chev-lg, a:focus-visible .chev-lg { max-width: 19px; }
a:hover .chev svg, a:focus-visible .chev svg,
button:hover .chev svg, button:focus-visible .chev svg { transform: none; }

/* Reserved slots hold their full width including the gap, and the glyph carries
   the gap as its own margin — so it slides out from the text edge across the
   whole slot rather than popping into a window already set away from the word. */
h1 > .chev, h2 > .chev, h3 > .chev, .mega-name > .chev {
  max-width: none; width: 13px; margin-inline-start: 0;
}
h1 > .chev svg, h2 > .chev svg, h3 > .chev svg, .mega-name > .chev svg {
  margin-inline-start: 6px; transform: translateX(calc(-100% - 6px));
}
/* The large chevron tracks its heading rather than staying a 7px glyph beside
   36px type. Sized in em so it holds at every step of the heading's clamp. */
h1 > .chev-lg, h2 > .chev-lg, h3 > .chev-lg { width: 0.58em; }
h1 > .chev-lg svg, h2 > .chev-lg svg, h3 > .chev-lg svg {
  width: 0.38em; height: auto; margin-inline-start: 0.2em;
  transform: translateX(calc(-100% - 0.2em));
}
:is(a, button):hover :is(h1, h2, h3, .mega-name) > .chev svg,
:is(a, button):focus-visible :is(h1, h2, h3, .mega-name) > .chev svg,
:is(h1, h2, h3) :is(a, button):hover > .chev svg,
:is(h1, h2, h3) :is(a, button):focus-visible > .chev svg { transform: none; }
.arrow { display: inline-flex; align-items: center; }
.arrow.strong { font-weight: 800; color: var(--accent-hover); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-sm { padding: 11px 20px; font-size: 14.5px; }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn-lime { background: var(--lime); color: var(--on-lime); }
.btn-lime:hover { background: var(--lime); color: var(--on-lime); }
.btn-dark { background: var(--accent); color: var(--on-accent); }
.btn-dark:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { border-color: var(--line-strong); color: var(--head); }
.btn-ghost:hover { border-color: var(--head); background: var(--surface); color: var(--head); }
.btn-outline-panel { border-color: var(--panel-line); color: var(--on-panel); }
.btn-outline-panel:hover { border-color: var(--lime); color: var(--lime); }
.btn[disabled] { background: var(--panel-line); color: var(--on-panel-dim); cursor: default; }

/* -------------------------------------------------------------- dropdown -- */
/* One component, two uses: links for the language switch, radios in the form.
   <details> gives it open/close, focus handling and Escape for free. */
.pick { position: relative; }
.pick > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pick > summary::-webkit-details-marker { display: none; }
.pick .caret { flex: none; transition: transform .16s var(--ease); }
.pick[open] .caret { transform: rotate(180deg); }
.pick-menu {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 8px; z-index: 50;
  min-width: max(100%, 158px); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(10, 20, 17, .16);
  display: flex; flex-direction: column;
}
.pick-opt {
  display: block; padding: 12px 16px; text-align: start; white-space: nowrap; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--body); background: var(--card);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.pick-opt:hover { background: var(--surface); color: var(--head); }
.pick-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick-opt.is-on,
.pick-opt:has(input:checked) { background: var(--surface); color: var(--accent); font-weight: 700; }
.pick-opt:has(input:focus-visible) { outline: 3px solid var(--accent-hover); outline-offset: -3px; }
button.pick-opt { width: 100%; border: 0; font: inherit; }

/* --------------------------------------------------------------- header -- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  @keyframes nav-settle { from { border-color: transparent; } to { border-color: var(--line); } }
  .site-head { animation: nav-settle linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
}
.site-head.is-stuck { border-bottom-color: var(--line); }

.head-inner {
  max-width: 1360px; margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: var(--head);
}
.brand-mark { width: 26px; height: 26px; flex: none; }
.head-end { display: flex; align-items: center; gap: 14px; }
.lang-pick > summary { padding: 8px 2px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--body); }
.lang-pick > summary:hover { color: var(--head); }
.lang-pick .pick-menu { inset-inline-start: auto; inset-inline-end: 0; }

.nav-desktop { display: none; }
.head-cta { display: none; }

/* mobile disclosure nav (no JS: <details>) */
.nav-toggle > summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; background: var(--card);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.burger { position: relative; display: block; width: 18px; height: 2px; background: var(--head); border-radius: 2px; }
.burger::before, .burger::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--head); border-radius: 2px;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.burger::before { top: -6px; } .burger::after { top: 6px; }
.nav-toggle[open] .burger { background: transparent; }
.nav-toggle[open] .burger::before { top: 0; transform: rotate(45deg); }
.nav-toggle[open] .burger::after { top: 0; transform: rotate(-45deg); }
.nav-mobile {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px var(--pad) 22px; box-shadow: 0 18px 40px rgba(10, 20, 17, .14);
  max-height: calc(100dvh - 70px); overflow-y: auto;
}
.nav-mobile ul { margin: 0 0 14px; }
.nav-mobile li a {
  display: block; padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--head);
  border-bottom: 1px solid var(--line);
}
.nav-mobile li.sub a { padding-inline-start: 16px; font-size: 15px; font-weight: 500; color: var(--body); }
.nav-mobile [aria-current='page'] { color: var(--accent-hover); }

/* ---------------------------------------------------------------- main --- */
main { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad) 60px; }
.section { margin-top: clamp(64px, 9vw, 132px); }
.section:first-child { margin-top: clamp(16px, 2vw, 24px); }
.page-head { margin-top: 8px; }
.contact-head h1 { max-width: 24ch; }
.contact-head .lede { max-width: 70ch; }
.h-center, .section-title { margin-bottom: clamp(24px, 3vw, 36px); }
.h-center { text-align: center; }

.crumbs { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: '/'; margin-inline-end: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.panel .crumbs, .panel .crumbs a { color: var(--on-panel-dim); }

.prose-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.prose-center.narrow { margin-bottom: clamp(24px, 3vw, 36px); }
.prose-center h1, .prose-center h2 { max-width: 26ch; }
.prose-center .lede { max-width: 62ch; }
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 74ch; text-align: start; }
.prose p { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.7; color: var(--body); }
.big-mark { width: clamp(72px, 9vw, 112px); height: clamp(72px, 9vw, 112px); }

/* ------------------------------------------------------- surfaces + orn -- */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  --card-pad-y: clamp(26px, 3vw, 36px);
  --card-pad-x: clamp(22px, 2.6vw, 32px);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--panel); color: var(--on-panel); border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3.4vw, 52px);
}
.panel h1, .panel h2, .panel h3 { color: var(--on-panel); }
.panel p, .panel .lede, .panel .dim { color: var(--on-panel-dim); }
.surface { background: var(--surface); border-radius: 20px; }

.orn { position: absolute; z-index: -1; pointer-events: none; display: block; }
.panel .orn { background: color-mix(in srgb, var(--panel) 95%, var(--on-panel)); }
.card .orn { background: color-mix(in srgb, var(--card) 96%, var(--head)); }
.orn-ring { inset-inline-end: -90px; bottom: -110px; width: 320px; height: 320px; border-radius: 50%; background: none !important; border: 1px solid color-mix(in srgb, var(--panel) 88%, var(--on-panel)); }
.orn-dot { inset-inline-end: 20px; bottom: 70px; width: 120px; height: 120px; border-radius: 50%; }
.orn-square { inset-inline-start: 44px; top: -34px; width: 74px; height: 74px; transform: rotate(30deg); }
.orn-blob { inset-inline-end: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 95%, var(--head)); }
.orn-blob-lg { inset-inline-end: -46px; top: 60px; width: 190px; height: 190px; border-radius: 50%; }
.orn-tri { inset-inline-end: 0; top: 0; width: 200px; height: 200px; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.orn-tri-b { inset-inline-start: 0; bottom: 0; width: 180px; height: 180px; clip-path: polygon(0 100%, 0 0, 100% 100%); }
.orn-c3 { inset-inline-start: -60px; top: 32%; width: 130px; height: 130px; border-radius: 50%; }
.orn-sq2 { inset-inline-start: -38px; bottom: -52px; width: 140px; height: 140px; transform: rotate(24deg); background: color-mix(in srgb, var(--lime) 94%, var(--on-lime)); }
.orn-c2 { inset-inline-end: 34px; top: -26px; width: 66px; height: 66px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 96%, var(--on-lime)); }

/* ----------------------------------------------------------------- hero -- */
.hero { display: grid; gap: var(--gap); margin-top: clamp(16px, 2vw, 24px); }
.hero-main { display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; }
.hero-main h1 { font-size: clamp(42px, 7.1vw, 95px); line-height: 1.02; max-width: 14ch; }
/* French needs more letters for the same sentence, and "intermédiaires." on its
   own is wider than the panel at the English size. One step down fits it. */
html[lang="fr"] .hero-main h1 { font-size: clamp(33px, 6.2vw, 82px); }
.hero-main em { color: var(--lime); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-side { display: grid; gap: var(--gap); }
.hero-note {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(32px, 3.6vw, 48px) clamp(24px, 2.8vw, 40px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.hero-note h2 { font-size: clamp(24px, 2.4vw, 32px); max-width: 16ch; }
.hero-note p { font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 34ch; }
.lime-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--lime); color: var(--on-lime); border-radius: var(--r-lg);
  padding: clamp(32px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 10px;
}
.lime-card:hover { color: var(--on-lime); }
.lime-card h2 { color: var(--on-lime); font-size: clamp(26px, 2.6vw, 36px); }
.lime-card p { font-size: 16.5px; line-height: 1.55; color: var(--lime-body); }

/* -------------------------------------------------------------- clients -- */
.client-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px clamp(28px, 4vw, 52px);
}
.client-logo {
  width: clamp(104px, 12vw, 150px); height: 40px; object-fit: contain; object-position: center;
  opacity: .85; transition: opacity .2s var(--ease);
  /* the logos are dark marks on white; multiply drops the white box onto the page ground */
  mix-blend-mode: multiply;
}
.client-logo.tall { width: 76px; height: 64px; }
.client-row li:hover .client-logo { opacity: 1; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px clamp(24px, 3.5vw, 44px); }
.tool-logo { width: 36px; height: 36px; object-fit: contain; opacity: .9; }

/* --------------------------------------------------------------- grids --- */
.grid-3, .grid-2 { display: grid; gap: var(--gap); }
.sit-head { margin-bottom: 10px; }
.sit-lede { max-width: 64ch; margin-bottom: clamp(24px, 3vw, 36px); }
.sit-card { display: flex; flex-direction: column; gap: 14px; }
.sit-card h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.01em; min-height: 2.7em; }
.sit-card h3 + p { margin-top: 0; font-size: 16px; line-height: 1.6; color: var(--body); flex: 1; }
.sit-links { border-top: 1px solid var(--line); padding-top: 13px; display: grid; gap: 9px; font-size: 14.5px; font-weight: 700; }
.sit-links a { color: var(--head); }
.sit-links a:hover { color: var(--accent-hover); }
.techs { display: flex; }
.tech {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.tech + .tech { margin-inline-start: -10px; }
.tech img { width: 17px; height: 17px; }
.rel-card { display: block; }
.rel-card h3 { font-size: 19px; margin-bottom: 8px; min-height: 2.4em; }
.rel-card p { font-size: 15px; color: var(--body); }
.rel-card:hover { border-color: var(--accent); }
.card h3 + p { margin-top: 8px; color: var(--body); font-size: 15.5px; line-height: 1.65; }

/* ------------------------------------------------------------- services -- */
.tabs { margin: 10px 0 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs ul { display: flex; gap: 8px; padding-bottom: 4px; }
.tab {
  display: block; white-space: nowrap; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--body);
  font-size: 14px; font-weight: 700;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.tab:hover { background: var(--surface); border-color: var(--line-strong); color: var(--head); }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab.on:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.svc-hero { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; min-height: 430px; }
/* The hero must not resize when the reader moves between practices, so neither
   the name nor the lede reserves a line count: all six of each are stacked in
   one grid cell and the tallest sets the height, at any width and in either
   language. The action stays pinned to the bottom whatever the copy does. */
/* Title and lede are top-aligned and sit together; the block reserves the tallest
   either can be — two heading lines plus four lede lines — so every practice's
   hero is the same height and the slack falls below the copy, not inside it. */
.svc-hero-copy {
  display: flex; flex-direction: column; gap: 18px;
}
.svc-hero-copy > .kicker { margin: 0; line-height: 1; }
.svc-hero h1, .svc-hero .title-ghost { max-width: 20ch; }
.svc-hero .lede { max-width: 54ch; }
.title-stack, .lede-stack { display: grid; }
.crumb-stack { display: inline-grid; }
.title-stack > *, .lede-stack > *, .crumb-stack > * { grid-area: 1 / 1; }
.ghost { visibility: hidden; }
.svc-hero > p:last-child { margin-top: auto; }

.split-right { display: grid; gap: clamp(24px, 3vw, 32px); align-items: center; }
.split-copy h2 { margin-bottom: 14px; }
.split-copy p { font-size: 16px; line-height: 1.7; color: var(--body); }
.signals { min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
.signals ol, .origin { display: flex; flex-direction: column; }
.signals li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 18px 0; }
.signals li + li { border-top: 1px solid var(--line); }
.signals li:first-child { padding-top: 0; }
.signals p { font-size: 16.5px; line-height: 1.6; color: var(--body); }
.num { font-size: 13px; font-weight: 800; color: var(--accent-hover); padding-top: 3px; }
.num.lime { color: var(--lime); }
.num.lime-ink { color: var(--lime-ink); letter-spacing: .1em; }
.origin p { font-size: 17px; line-height: 1.75; color: var(--body); max-width: 62ch; }
.origin p + p { margin-top: 16px; }

/* horizontally scrolling card rail */
.rail {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* headroom for the hover scale, which grows upward from the card's bottom edge */
  padding-block: 16px 20px;
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; width: min(420px, 84vw); scroll-snap-align: start; }
.inc-card {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
  transition: transform .26s ease; transform-origin: center bottom;
}
.inc-card:hover { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .inc-card:hover { transform: none; } }
/* The coloured icon file, turned white: one asset per tool instead of two. */
.inc-tech {
  position: absolute; z-index: -1; pointer-events: none;
  filter: brightness(0) invert(1); opacity: .1;
}
.inc-tech.t-a { inset-inline-end: 26px; top: 24px; width: 44px; height: 44px; transform: rotate(-8deg); }
.inc-tech.t-b { inset-inline-end: 34px; bottom: 26px; width: 62px; height: 62px; transform: rotate(11deg); }
.inc-tech.t-c { inset-inline-start: 34px; bottom: 22px; width: 38px; height: 38px; transform: rotate(6deg); }
.inc-tech.t-d { inset-inline-end: 122px; top: 34px; width: 34px; height: 34px; transform: rotate(-14deg); }
.inc-tech.t-e { inset-inline-start: 46px; top: 26px; width: 52px; height: 52px; transform: rotate(9deg); }
.inc-card h3 { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 12px; }
.inc-card p { font-size: 16.5px; line-height: 1.7; }
.rail-card { display: flex; flex-direction: column; gap: 10px; }
.rail-card h3 { font-size: 21px; }
.rail-card p:last-child { font-size: 16px; line-height: 1.7; color: var(--body); }

/* ---------------------------------------------------------- how we work -- */
.split-head-grid { display: grid; gap: clamp(24px, 3vw, 48px); align-items: end; }
/* the snake's opening loop passes through here, so the copy carries the ground */
.split-head-grid .lede { background: var(--bg); }
.callout {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; max-width: 340px; box-shadow: var(--shadow);
}
.callout p { font-size: 15px; line-height: 1.6; color: var(--body); }

.stages-wrap { position: relative; isolation: isolate; }
.bg-ring, .bg-tri, .bg-blob { z-index: -1; }
.bg-mark {
  position: absolute; inset-inline-start: 2%; top: 26%; width: 86px; height: 86px;
  z-index: -1; pointer-events: none; opacity: .5;
}
.bg-ring { inset-inline-start: 0; top: 4%; width: 220px; height: 220px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--bg) 84%, var(--accent-hover)); background: none; }
.bg-tri { inset-inline-end: 2%; top: 52%; width: 170px; height: 150px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: color-mix(in srgb, var(--bg) 92%, var(--accent-hover)); }
.bg-blob { inset-inline-start: 2%; top: 84%; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 93%, var(--accent-hover)); }

.stages { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 74px); max-width: 1160px; margin-inline: auto; }
@media (max-width: 899px) {
  /* No snake below 900px, so the dots get a plain connector instead. */
  .stage + .stage .stage-main::before {
    content: ''; position: absolute; bottom: 100%; left: 50%; width: 2px;
    height: calc(clamp(44px, 6vw, 74px) - 26px); margin-bottom: 13px;
    background: var(--line-strong); transition: background .26s var(--ease);
  }
  .stage.is-done + .stage.is-done .stage-main::before { background: var(--accent-hover); }
}
.stage { display: grid; gap: 20px; }
.stage-main { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.dot {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--card); color: var(--muted);
  font-size: 16px; font-weight: 800;
  transition: background .26s var(--ease), border-color .26s var(--ease), color .26s var(--ease);
}
.stage.is-done .dot { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.stage-main h3 { font-size: clamp(24px, 2.4vw, 30px); background: var(--bg); padding-inline: 10px; }
.stage-main p { font-size: 17px; line-height: 1.75; color: var(--body); max-width: 62ch; background: var(--bg); padding-inline: 10px; }
.note {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); max-width: 300px;
}
.note p { font-size: 15px; line-height: 1.6; color: var(--body); }

.commit { margin-top: clamp(56px, 7vw, 96px); display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.commit h2 + p, .panel h2 + p, .panel h2 + .dim { margin-top: 14px; }
.commit .kicker + h2 { margin-top: 0; }
.commit-list { display: flex; flex-direction: column; gap: 14px; }
.commit-list li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.commit-list p { font-size: 17px; line-height: 1.6; color: var(--on-panel); }
.panel-card { border: 1px solid var(--panel-line); border-radius: 14px; padding: 22px 20px; }
.panel-card h3 { font-size: 17.5px; margin-bottom: 8px; color: var(--on-panel); }
.panel-card p { font-size: 15.5px; line-height: 1.6; color: var(--on-panel-dim); }

/* ------------------------------------------------------------ cta band --- */
.cta-band {
  margin-top: clamp(64px, 8vw, 120px); display: grid; gap: clamp(20px, 3vw, 40px);
  justify-items: center; text-align: center;
}
.cta-mark { width: 64px; height: 64px; }
.cta-copy h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.04em; max-width: 20ch; margin-inline: auto; }
.cta-copy p { margin-top: 14px; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; color: var(--body); max-width: 52ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -------------------------------------------------------------- contact -- */
.contact-grid { display: grid; gap: var(--gap); align-items: stretch; margin-top: clamp(28px, 3.4vw, 44px); }
.faq, .details { margin-top: clamp(44px, 5vw, 72px); }
.book { display: flex; flex-direction: column; gap: 14px; }
.book > .kicker { margin: 0; }
.cal-card { background: var(--card); border-radius: 16px; padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px); margin-top: 10px; }
/* The two panels are the same height; inside, the white card keeps its natural
   size and the dark panel takes up the slack. Stretching the card instead would
   open a hole in it whenever the enquiry column runs longer. */
.book .cal-card { display: flex; flex-direction: column; }
.cal-noscript { font-size: 15px; color: var(--body); }
/* Once booked, the card gives way to the confirmation, set on the panel itself. */
.book-done { display: flex; flex-direction: column; gap: 16px; margin: clamp(24px, 4vw, 48px) 0 auto; }
.book-done h3 {
  color: var(--on-panel); font-size: clamp(28px, 3.4vw, 42px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; max-width: 16ch;
}
.book-done p { color: var(--on-panel); font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; max-width: 44ch; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-head p { font-size: 16px; font-weight: 800; color: var(--head); }
.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--body);
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--surface); }
.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-day {
  height: 36px; border: 1px solid transparent; border-radius: 9px; background: var(--surface);
  color: var(--head); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cal-day.blank { background: none; cursor: default; }
.cal-day[disabled] { background: none; color: var(--muted); opacity: .45; cursor: default; }
.cal-day[aria-pressed='true'] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 800; }
.cal-times { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cal-times .kicker { margin-bottom: 10px; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.time {
  padding: 8px 2px; border: 1px solid var(--line); border-radius: 8px; background: none;
  color: var(--head); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.time[disabled] { color: var(--muted); opacity: .5; cursor: default; }
.time[aria-pressed='true'] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 800; }
/* Height cannot transition to auto, but a grid row can go from 0fr to 1fr, so the
   card opens at whatever height the fields turn out to need. */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.reveal > * { overflow: hidden; min-height: 0; }
.reveal.is-open { grid-template-rows: 1fr; }
/* The clip is only needed while the row is animating. Left in place it also cuts
   the focus ring off the fields inside, so it is released once open. */
.reveal.is-settled > * { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; } }
.book-fields { border: 0; margin: 16px 0 0; padding: 0; min-inline-size: 0; }
/* The calendar card is white inside a dark panel: restate the card's own colours,
   or .panel p wins on specificity and leaves light-on-white text. */
.cal-card, .cal-card p { color: var(--body); }
.cal-card .kicker, .cal-card .fine { color: var(--muted); }
.cal-status { margin: 14px 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cal-status.ok, .form-status.ok, .cal-status.err, .form-status.err {
  font-weight: 700; border-radius: var(--r-sm); padding: 12px 14px;
}
.cal-status.ok, .form-status.ok { color: var(--accent); background: color-mix(in srgb, var(--lime) 34%, var(--card)); }
.cal-status.err, .form-status.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }

/* Currency switch, parked on the enquiry box's top right corner rather than in
   the flow, so the kicker beside it keeps the size the card gives it. The card
   clips its overflow, which costs nothing here: the menu opens downwards into a
   box the whole form is already sitting in. */
.enquiry .cur-pick { position: absolute; z-index: 2; top: var(--card-pad-y); inset-inline-end: var(--card-pad-x); }
/* The kicker is a full-width block under it, so its text is kept clear of the
   corner rather than left to be short enough by luck. */
.enquiry > .kicker { padding-inline-end: 84px; }
.cur-pick > summary { padding: 4px 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.cur-pick > summary:hover { color: var(--head); }
.cur-pick .pick-menu { inset-inline-start: auto; inset-inline-end: 0; }

.enquiry { display: flex; flex-direction: column; }
.enquiry h2 { margin-bottom: 12px; }
.enquiry > p { font-size: 16.5px; line-height: 1.7; color: var(--body); }
.enquiry form { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.enquiry .fine { margin-top: auto; padding-top: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--body); }
.field-row { display: grid; gap: 12px; }
input[type='text'], input[type='email'], input[type='tel'], textarea, select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 15px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--text); transition: border-color .16s var(--ease);
}
.panel input, .panel textarea, .panel select { background: var(--card); border-color: var(--line); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-hover); }
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--danger); }
textarea { resize: vertical; min-height: 90px; }
select { appearance: none; cursor: pointer; padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%233F5A50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field-label { font-size: 13.5px; font-weight: 700; color: var(--body); }
.field .pick > summary {
  justify-content: space-between; width: 100%; padding: 13px 14px; font-size: 15px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--muted); transition: border-color .16s var(--ease);
}
.field .pick[open] > summary, .field .pick > summary:hover { border-color: var(--accent-hover); }
.field .pick:has(input:checked) > summary { color: var(--text); font-weight: 600; }
.field .pick[aria-invalid='true'] > summary { border-color: var(--danger); }
.pick-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.check label { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--body); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-hover); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { font-size: 14.5px; line-height: 1.55; }
.enquiry .fine { line-height: 1.55; }

.faq { padding: clamp(30px, 3.4vw, 46px); }
.faq h2 { margin-bottom: 24px; }
.faq .grid-2 { gap: 26px clamp(28px, 4vw, 56px); }
.faq h3 { font-size: 18px; margin-bottom: 8px; }
.faq p { font-size: 16px; line-height: 1.65; color: var(--body); }
.details .detail { border-top: 1px solid var(--line); padding-top: 20px; }
.details p:not(.kicker) { font-size: 16.5px; line-height: 1.6; color: var(--head); }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-weight: 700; }

/* ------------------------------------------------------------ legal doc -- */
.doc { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.doc-toc ol { display: flex; flex-direction: column; gap: 9px; counter-reset: toc; }
.doc-toc a { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.doc-toc a:hover, .doc-toc a.on { color: var(--head); font-weight: 800; }
.doc-body { display: flex; flex-direction: column; gap: 24px; max-width: 78ch; }
.doc-body article { border-top: 1px solid var(--line); padding-top: 24px; scroll-margin-top: 96px; }
.doc-body h2 { font-size: 22px; margin-bottom: 12px; }
.doc-body p, .doc-body li { font-size: 15.5px; line-height: 1.75; color: var(--body); }
.doc-body article > * + * { margin-top: 12px; }
.doc-body ul { list-style: disc; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-body a { text-decoration: underline; text-underline-offset: 2px; }
.notice { border-radius: 16px; }
.notice p:not(.kicker) { font-size: 14.5px; line-height: 1.7; color: var(--body); }

/* --------------------------------------------------------------- cursor -- */
html.cursor-on, html.cursor-on * { cursor: none; }
/* The caret is the one thing worth keeping: typing without it is guesswork. */
html.cursor-on :is(input, textarea):not([type='checkbox']):not([type='radio']) { cursor: text; }
#yc-cursor {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px; z-index: 9999;
  pointer-events: none; opacity: 0; will-change: transform; transition: opacity .16s ease;
}
#yc-cursor svg { position: absolute; inset: 0; overflow: visible; }
#yc-cursor [data-tri], #yc-cursor [data-cir] {
  transform-origin: 60px 60px;
  transition: opacity .2s ease, transform .26s cubic-bezier(.34, 1.4, .64, 1);
}
#yc-cursor [data-tri] { transform: rotate(135deg); }
#yc-cursor [data-cir] { opacity: 0; transform: scale(.45); }
#yc-cursor.is-link [data-tri] { opacity: 0; transform: rotate(100deg) scale(.5); }
#yc-cursor.is-link [data-cir] { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  #yc-cursor [data-tri], #yc-cursor [data-cir] { transition: none; }
}
@media print { #yc-cursor { display: none; } }

/* --------------------------------------------------------------- footer -- */
.site-foot { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad) 40px; }
.foot-panel {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 20px;
  padding: clamp(30px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) 26px; color: var(--on-panel-dim);
}
.foot-grid { display: grid; gap: clamp(24px, 3vw, 44px); padding-bottom: 28px; border-bottom: 1px solid var(--panel-line); }
.foot-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--on-panel); }
.foot-mark { width: 28px; height: 28px; flex: none; }
.foot-brand p { font-size: 15px; line-height: 1.65; }
.site-foot ul { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.site-foot a { color: var(--on-panel-dim); }
.site-foot a:hover { color: var(--lime); }
.foot-legal { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 13.5px; }

/* ---------------------------------------------------------- breakpoints -- */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1.35fr 1fr; }
  .hero-main { min-height: 530px; }
  .hero-side { grid-template-rows: 1fr auto; }
  .split-right { grid-template-columns: .68fr 1.32fr; }
  .split-copy { justify-self: end; text-align: end; }
  .split-copy h2 { max-width: 16ch; margin-inline-start: auto; }
  .split-copy p { max-width: 32ch; margin-inline-start: auto; }
  .bleed-right {
    margin-inline-end: calc(-1 * (max((100vw - 1360px) / 2, 0px) + var(--pad)));
    border-inline-end: none;
    border-start-end-radius: 0; border-end-end-radius: 0;
    padding-inline: clamp(24px, 3vw, 46px);
  }
  .split-head-grid { grid-template-columns: 1.15fr 1fr; }
  .callout { justify-self: end; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .commit { grid-template-columns: 1fr 1.2fr; }
  .doc { grid-template-columns: .38fr 1fr; }
  .doc-toc { position: sticky; top: 92px; border-inline-start: 1px solid var(--line); padding-inline-start: 20px; }
  .cta-band { grid-template-columns: 1fr auto; justify-items: start; text-align: start; align-items: end; }
  .cta-mark { grid-column: 1 / -1; justify-self: center; }
  .cta-copy h2, .cta-copy p { margin-inline: 0; }
  .cta-actions { justify-content: flex-end; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: 28px; }
  .stage .stage-main { grid-column: 2; }
  .stage.note-left .note { grid-column: 1; grid-row: 1; justify-self: end; }
  .stage.note-right .note { grid-column: 3; grid-row: 1; justify-self: start; }
  .stage.note-right .note { order: 2; }
}

@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .head-cta { display: inline-flex; }
  .nav-desktop { display: block; position: relative; }
  .nav-desktop > ul { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); font-size: 14.5px; }
  .nav-desktop > ul > li { position: relative; }
  .nav-desktop > ul > li > a { display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-weight: 500; padding-bottom: 4px; border-bottom: 3px solid transparent; }
  .nav-desktop > ul > li > a:hover { color: var(--head); border-bottom-color: var(--line-strong); }
  .nav-desktop > ul > li > a[aria-current='page'] { color: var(--head); font-weight: 800; border-bottom-color: var(--lime); }
  /* One underline that follows the pointer, rather than one per item appearing
     in place. It only takes over once the script has measured the links: with no
     JavaScript the per-item borders above stay, which is the same design a frame
     at a time. */
  .nav-bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 2px;
    background: var(--lime); opacity: 0; pointer-events: none; transform: translateX(0);
    transition: transform .3s var(--ease), width .3s var(--ease), opacity .18s var(--ease);
  }
  .nav-bar.no-anim { transition: none; }
  .nav-desktop.has-bar > ul > li > a:hover,
  .nav-desktop.has-bar > ul > li > a[aria-current='page'] { border-bottom-color: transparent; }
  .caret { transition: transform .16s var(--ease); }
  .has-mega:hover .caret, .has-mega:focus-within .caret { transform: rotate(180deg); }
  .mega {
    position: absolute; top: 100%; inset-inline-start: -24px; padding-top: 18px; z-index: 40;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }
  .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .mega-inner {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 18px 44px rgba(10, 20, 17, .18); width: 600px; padding: 20px 20px 14px;
  }
  .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .mega-group { grid-column: 1 / -1; }
  .mega-group + .mega-group { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
  .mega-group > .kicker { margin: 0 0 3px 13px; }
  .mega-group > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .mega-item { display: block; padding: 11px 13px; border-radius: 12px; border: 0; transition: background .15s var(--ease); }
  .mega-item:hover { color: inherit; }
  .mega-item:hover { background: var(--surface); }
  .mega-name { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--head); }
  .mega-desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .mega-foot {
    margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 13.5px; color: var(--muted);
  }
  .mega-foot a { border: 0; padding: 0; }
  .mega-foot .arrow { display: inline-flex; align-items: center; }
}