/* Layout, type scale and motion follow values measured from the reference stylesheet:
   1rem is a 1/1600 slice of the viewport width on desktop (>=1024px) and 1px below it;
   easing cubic-bezier(.2,1,.3,1) at .5s for reveals, ease-in-out 1s for the flip, .25s for hover states.
   No colour literals live here: every colour is a var() from tokens.css. */
:root {
  --wr: 20rem; --gap: 20rem; --br1: 10rem; --br2: 20rem; --sl: max(1px, 1rem);
  --btn: max(54px, 60rem);
  --f-s: max(14px, 18rem); --f-d: max(15px, 20rem); --f-btn: max(16px, 20rem);
  --f-m: max(14px, 28rem); --f-b: max(14px, 40rem); --f-l: max(14px, 64rem);
  --f-xl: max(14px, 72rem); --f-xxl: max(14px, 80rem); --f-xxxl: max(14px, 90rem);
  --mw: 1920px; --kw: 1vw; --tap: max(44px, 44rem);
  --ease: cubic-bezier(.2, 1, .3, 1);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html { font-size: .0625vw; background-color: var(--wash); -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 160px; }
@media (min-width: 1920px) { html { font-size: 1.2px; } }
@media (max-width: 1023.98px) {
  html { font-size: 1px; }
  :root {
    --wr: 15rem; --gap: 10rem; --br2: 12rem; --btn: 54rem;
    --f-s: 14rem; --f-d: 16rem; --f-btn: 18rem; --f-m: 20rem; --f-b: 24rem;
    --f-l: 28rem; --f-xl: 32rem; --f-xxl: 44rem; --f-xxxl: 52rem; --mw: 640rem; --kw: 2vw;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--f-d); line-height: 1.25; color: var(--ink); background-color: var(--wash); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; }
.wrapper { width: 100%; padding: 0 var(--wr); max-width: var(--mw); margin: 0 auto; }
.center { text-align: center; }
.muted { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.title { font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.h-l { font-size: var(--f-l); } .h-xl { font-size: var(--f-xl); } .h-b { font-size: var(--f-b); font-weight: 600; line-height: 1; letter-spacing: -.02em; } .h-m { font-size: var(--f-m); font-weight: 600; line-height: 1; }

/* header */
.header { position: sticky; top: 0; z-index: 15; }
.cabar { background: var(--ink); color: var(--surface); }
.cabar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14rem; min-height: var(--tap); padding-top: 6px; padding-bottom: 6px; }
.cabar-label { font-size: var(--f-s); letter-spacing: .12em; text-transform: uppercase; color: var(--deepveil); font-weight: 500; }
.cabar-value { font-family: var(--mono); font-size: max(15px, 27rem); font-weight: 600; line-height: 1.25; color: var(--surface); background: none; border: 0; padding: 6px 0; margin: 0; text-align: left; min-height: var(--tap); overflow-wrap: anywhere; cursor: pointer; transition: color .25s; }
button.cabar-value:hover { color: var(--deepveil); text-decoration: underline; text-underline-offset: 4px; }
.cabar-value.is-inert { font-family: inherit; font-weight: 500; cursor: default; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12rem; }
.cabar-date { font-size: var(--f-s); font-weight: 400; color: var(--deepveil); }
.cabar-note { font-size: var(--f-s); color: var(--deepveil); min-width: 0; }
.cabar-note.on { color: var(--surface); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12rem; min-height: max(56px, 68rem); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: var(--sl) solid var(--deepveil); max-width: none; }
.bar > * { min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 10rem; min-height: var(--tap); color: var(--brand); }
.logo img { width: max(26px, 32rem); height: max(26px, 32rem); object-fit: contain; flex: none; }
.logo-word { font-size: max(20px, 27rem); font-weight: 600; letter-spacing: -.04em; }
.nav { display: none; align-items: center; gap: 6rem; }
.nav a, .drawer a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16rem; border-radius: var(--br1); font-size: var(--f-s); font-weight: 500; color: var(--brand); transition: background .25s, color .25s; }
.nav a:hover, .drawer a:hover { background: var(--veil); }
.socials { display: flex; align-items: center; gap: 8rem; flex: none; }
.social-btn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--br1); color: var(--brand); transition: background .25s, color .25s; }
.social-btn svg { width: max(20px, 22rem); height: max(20px, 22rem); fill: currentColor; }
a.social-btn:hover { background: var(--veil); color: var(--ink); }
.social-btn.is-inert { opacity: .5; border: var(--sl) dashed var(--deepveil); cursor: default; }
.menu-btn { width: var(--tap); height: var(--tap); border: var(--sl) solid var(--deepveil); border-radius: var(--br1); background: var(--surface); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 0; }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--brand); transition: transform .25s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.drawer { background: var(--surface); border-bottom: var(--sl) solid var(--deepveil); }
.drawer[hidden] { display: none; }
.drawer .wrapper { display: grid; padding-top: 8px; padding-bottom: 12px; }
.drawer a { font-size: var(--f-d); }
.js .bar { animation: bar-in .5s ease-out 1s backwards; }
@keyframes bar-in { from { opacity: 0; transform: translateY(-40%); } }
@media (min-width: 1024px) { .nav { display: flex; } .menu-btn, .drawer { display: none; } }

/* hero */
.hero { position: relative; min-height: 86svh; display: grid; place-items: center; text-align: center; padding: 40rem 0 90rem; margin-bottom: 100rem; overflow: clip; }
.tiles { position: absolute; inset: 0; pointer-events: none; }
.tile-img { position: absolute; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, black 55%, transparent); mask-image: radial-gradient(closest-side, black 55%, transparent); will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.t1 { width: calc(36 * var(--kw)); height: calc(16 * var(--kw)); top: -2%; left: -8%; --k: .06; }
.t2 { width: calc(20 * var(--kw)); height: calc(36 * var(--kw)); top: 4%; right: -6%; --k: -.1; }
.t3 { width: calc(34 * var(--kw)); height: calc(15 * var(--kw)); bottom: 0%; left: 8%; --k: -.08; }
.t4 { width: calc(18 * var(--kw)); height: calc(34 * var(--kw)); bottom: -10%; right: 10%; --k: .12; opacity: .8; }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero-title { font-size: var(--f-xxl); max-width: 1200rem; color: var(--brand); }
.hero-sub { margin-top: 30rem; max-width: min(620rem, 100%); font-size: var(--f-m); line-height: 1.2; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.hero-action { margin-top: 40rem; display: flex; flex-direction: column; align-items: center; gap: 10rem; width: 100%; }
.scroll-hint { position: absolute; left: 50%; bottom: 20rem; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16rem; font-size: var(--f-m); font-weight: 600; color: var(--brand); z-index: 1; }

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; height: var(--btn); padding: 0 50rem; border: var(--sl) solid transparent; border-radius: var(--br1); background: var(--surface); color: var(--brand); cursor: pointer; user-select: none; transition: background-color .25s, color .25s, border-color .25s; }
.button-text { font-size: var(--f-btn); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .1em; }
.button:hover { border-color: var(--brand); background: transparent; }
.button.is-inert { opacity: .6; cursor: not-allowed; }
.button.is-inert:hover { border-color: transparent; background: var(--surface); }
.button-note { font-size: var(--f-s); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.button__contrast-inv { background: var(--surface); color: var(--ink); }
.button__contrast-inv.is-inert:hover { background: var(--surface); }
@media (max-width: 1023.98px) { .button { width: 100%; } }

/* sections */
.section { position: relative; z-index: 1; margin-bottom: 200rem; }
.split { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 100rem 0; align-items: start; }
.split > * { grid-column: 2 / span 2; }
.split-b > * { grid-column: 3 / span 2; }
.split .title { border-bottom: var(--sl) solid var(--deepveil); padding-bottom: 20rem; margin-bottom: 20rem; }
.lede { font-size: var(--f-m); line-height: 1.2; }
.section > .wrapper > .title.center { margin-bottom: 60rem; }
.flips { display: grid; grid-template-columns: 1fr 1fr; }
.flip { padding: 20rem 0; display: flex; justify-content: center; perspective: 1000px; }
.flip:nth-child(2) { border-left: var(--sl) solid var(--deepveil); }
.flip-card { position: relative; width: 100%; max-width: 450rem; aspect-ratio: 1; border-radius: 15%; color: var(--surface); transform-style: preserve-3d; transition: transform 1s ease-in-out; }
.flip:nth-child(1) .flip-card { background-image: linear-gradient(160deg, var(--glow), var(--ink)); }
.flip:nth-child(2) .flip-card { background-image: linear-gradient(200deg, var(--glow), var(--brand)); }
.flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20rem; padding: 50rem; text-align: center; border-radius: 15%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face p { font-size: var(--f-m); line-height: 1.1; font-weight: 500; }
.flip-back { transform: rotateY(180deg); }
.flip-front .button { width: auto; min-width: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .flip-card:hover { transform: rotateY(180deg); } }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .flip-card { aspect-ratio: auto; transform: none; padding: 40rem 20rem; display: flex; flex-direction: column; gap: 20rem; max-width: none; border-radius: var(--br2); }
  .flip-face { position: static; padding: 0; border-radius: 0; }
  .flip-back { transform: none; }
  .flip-back p { font-size: var(--f-d); font-weight: 400; opacity: .9; }
  .flips { grid-template-columns: 1fr; gap: 15rem; } .flip:nth-child(2) { border-left: 0; }
  .flip-front .button { width: 100%; }
}
.steps { display: flex; flex-wrap: wrap; margin: calc(var(--gap) / -2); padding: 0 40rem; justify-content: center; }
.step { width: 33.33%; margin: 0; padding: 50rem 20rem; margin: calc(var(--gap) / 2); width: calc(33.33% - var(--gap)); background: var(--surface); border-radius: var(--br1); text-align: center; display: flex; flex-direction: column; align-items: center; }
.step-n { font-size: var(--f-b); font-weight: 600; line-height: 1; color: var(--glow); }
.step .h-m { border-top: var(--sl) solid var(--deepveil); margin-top: 20rem; padding-top: 20rem; width: 100%; }
.step p { margin-top: 20rem; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.step-cta { margin-top: 60rem; display: flex; flex-direction: column; align-items: center; gap: 10rem; }
.lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.lcard { background: var(--surface); border-radius: var(--br1); padding: 20rem; min-height: 260rem; display: flex; flex-direction: column; gap: 12rem; }
.lcard-badge { align-self: flex-start; background: var(--veil); color: var(--brand); border-radius: 999px; font-size: max(12px, 15rem); font-weight: 500; padding: 6rem 12rem; }
.lcard-line { height: 12rem; min-height: 8px; border-radius: 999px; background: var(--veil); animation: pulse 1.2s ease-in-out infinite; }
.lcard-line.short { width: 60%; }
.lcard-slot { margin-top: 0; }
.lcard-slot .lcard-badge { margin-bottom: auto; }
@keyframes pulse { 50% { opacity: .45; } }
.s-list .muted { margin-top: 30rem; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.panel { background: var(--surface); border-radius: var(--br1); padding: 50rem 20rem; }
.panel-rule { border-top: var(--sl) solid var(--deepveil); margin-top: 25rem; padding-top: 25rem; }
.panel p { margin-bottom: 15rem; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.pills { display: grid; gap: 10rem; }
.pills li { background: var(--brand); color: var(--surface); border-radius: var(--br1); padding: 15rem 20rem; }
.tiles-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.tile { display: flex; flex-direction: column; min-height: 400rem; padding-left: 20rem; border-left: var(--sl) solid var(--deepveil); }
.tile-name { font-size: var(--f-m); font-weight: 600; line-height: 1; margin-bottom: auto; }
.tile-value { font-size: var(--f-xxxl); margin-top: 100rem; line-height: 1; }
.tile-date { font-size: max(12px, 15rem); margin-top: 10rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.tile-unit { font-size: var(--f-s); margin-top: 50rem; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.foot-note { margin-top: 60rem; }
.cta { position: relative; z-index: 1; background: var(--brand); color: var(--surface); }
.cta-in { min-height: 70svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 200rem; padding-bottom: 200rem; }
.cta-in .title { color: inherit; }
.cta-sub { margin-top: 25rem; max-width: 550rem; font-size: var(--f-m); line-height: 1.15; }
.cta-in > div { margin-top: 30rem; display: flex; flex-direction: column; align-items: center; gap: 10rem; width: 100%; }
.cta .button-note { color: var(--deepveil); }
.footer { position: relative; z-index: 1; background: var(--surface); color: var(--ink); padding: 60rem 0 120rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40rem var(--gap); align-items: start; }
.f-blurb { margin-top: 16rem; max-width: 300rem; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.f-h { font-size: var(--f-s); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 70%, transparent); font-weight: 500; margin-bottom: 8rem; }
.footer li a, .footer li .f-link, .footer li .f-plain { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-link.is-inert { opacity: .55; }
.f-plain { overflow-wrap: anywhere; }
.f-legal { margin-top: 60rem; padding-top: 20rem; border-top: var(--sl) solid var(--deepveil); font-size: var(--f-s); color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(24rem); transition: opacity .5s var(--ease) var(--d, 0s), transform .5s var(--ease) var(--d, 0s); }
.js .reveal.in, .js.reveal-all .reveal { opacity: 1; transform: none; }

@media (max-width: 1023.98px) {
  html { scroll-padding-top: 130px; }
  .hero { min-height: 80svh; padding: 20rem 0 80rem; margin-bottom: 100rem; }
  .hero-title { max-width: 340rem; } .hero-sub { max-width: 320rem; margin-top: 20rem; } .hero-action { margin-top: 15rem; }
  .scroll-hint { display: none; }
  .section { margin-bottom: 100rem; }
  .split { grid-template-columns: 1fr; padding: 40rem 0 0; }
  .split > *, .split-b > * { grid-column: 1; }
  .section > .wrapper > .title.center { margin-bottom: 40rem; }
  .steps { padding: 0; } .step { width: 100%; margin: calc(var(--gap) / 2) 0; padding: 35rem 20rem; }
  .step-cta { margin-top: 30rem; }
  .lgrid { grid-template-columns: 1fr 1fr; gap: 12rem; } .lcard { min-height: 180rem; }
  .panels { grid-template-columns: 1fr; gap: 15rem; } .panel { padding: 35rem 20rem; }
  .tiles-row { grid-template-columns: 1fr; gap: 40rem; }
  .tile { text-align: center; border: 0; min-height: 0; padding: 0; align-items: center; }
  .tile-name { margin: 0; } .tile-name br { display: none; }
  .tile-value { order: -1; margin: 0 0 10rem; padding-bottom: 10rem; border-bottom: var(--sl) solid var(--deepveil); width: 100%; }
  .tile-unit { margin-top: 10rem; } .foot-note { margin-top: 40rem; }
  .cta-in { min-height: 60svh; padding-top: 100rem; padding-bottom: 100rem; }
  .cta-sub { max-width: 275rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 30rem; }
  .cabar-value { font-size: max(15px, 18rem); }
}

/* measured fixes: 44px floor for the short footer labels; quieter tiles behind the small-screen headline */
.footer li .f-link { min-width: var(--tap); }
.flip-front .button-note { color: var(--deepveil); }
.muted .cabar-date { color: inherit; }
@media (max-width: 1023.98px) { .tile-img { opacity: .55; } .t4 { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .tile-img { transform: none; }
  .flip-card:hover { transform: none; }
}