/* Aisleful Professional: the page for wedding planners at /professional.
   One light paper ground, navy copy, one brass accent, and dark navy blocks that come and go.
   Fraunces for display and figures, Onest for everything you read and every small uppercase label.
   The first three blocks are a stack: each pins and the next comes out over it (desktop only).
   Motion lives in professional.js; with no JavaScript, or with reduced motion, everything is visible. */

@font-face { font-family: Fraunces; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Onest; src: url(../fonts/onest.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #F6F3EC; --paper2: #E6DFCF; --line: #D8D2C4; --card: #FFFFFF;
  --ink: #10182B; --muted: #565D6D;
  --navy: #13203A; --navy2: #1C2C4B; --black: #0B1222;
  --on-dark: #F2EEE4; --on-dark-mute: #B3BCCD; --on-dark-faint: rgb(242 238 228 / .5);
  --brass: #E3B867; --brass-ink: #8A5A12; --brass-25: rgb(227 184 103 / .25);
  --sage: #2F5D50; --sage-bg: #DCE8E1; --amber-bg: #F6E3B8; --amber-fg: #5A3D05; --bad: #A53A22; --bad-bg: #F6D8CF; --grey-bg: #E6E2D8;
  --ink-08: rgb(16 24 43 / .08); --white-10: rgb(255 255 255 / .1); --rail: rgb(255 255 255 / .2); --plate-line: rgb(255 255 255 / .24); --plate-fill: rgb(255 255 255 / .06);
  --focus: #1A44B8;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-plate: cubic-bezier(.33, 0, 0, 1);
  --gut: 2rem;
}

/* a rem is one design pixel of the 1440 frame from 1280 up, and holds at 16px below */
html { font-size: 16px; }
@media (min-width: 1280px) { html { font-size: clamp(14.2px, 1.1111vw, 22px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 var(--sans); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--navy); color: #fff; padding: .7em 1em; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.display { font-family: var(--serif); font-weight: 520; line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.display .line { display: block; }
.dot { color: var(--brass-ink); }
.dot.w { color: var(--on-dark); }
.eyebrow { font: 500 .75rem/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); }
.split { display: inline-flex; flex-wrap: wrap; column-gap: .26em; }
.split.letters { column-gap: 0; flex-wrap: nowrap; }
.split > span { display: inline-block; }

/* corner brackets: one path drawn four ways */
/* panels: a hairline card with a small diamond pinned to each corner, the diamonds easing outward on hover */
.c { position: absolute; width: .5rem; height: .5rem; color: var(--brass-ink); translate: 0 0; transition: translate .7s var(--ease-plate); }
.c.tl { top: -.25rem; left: -.25rem; } .c.tr { top: -.25rem; right: -.25rem; }
.c.bl { bottom: -.25rem; left: -.25rem; } .c.br { bottom: -.25rem; right: -.25rem; }
.bp { position: relative; padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--line); }

/* the chamfered call to action, measured in em off its own label */
/* the call to action is a ticket: the label on the main part, the arrow on a perforated stub */
.cta { position: relative; display: inline-grid; grid-template-columns: 77.27% 1fr; place-items: center; height: 2.6em; width: 11em; font: 600 1.25rem/.9 var(--sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--brass); }
.cta-f { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cta-f use, .cta-f path { vector-effect: non-scaling-stroke; }
.cta-f .perf { fill: none; stroke: var(--brass); stroke-dasharray: 2 3; stroke-opacity: .7; }
.cta-f .body { fill: var(--navy); }
.cta-f .flood { fill: var(--brass); transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform .25s var(--ease-plate); }
.cta-f .ring { fill: none; stroke: var(--brass); stroke-opacity: .25; }
.cta .lbl, .cta .arr { position: relative; transition: color .25s var(--ease-plate), transform .15s var(--ease); }
.cta .arr { width: .9em; height: .6em; }
.cta:hover .flood, .cta:focus-visible .flood { transform: scaleX(1); }
.cta:hover .lbl, .cta:hover .arr, .cta:focus-visible .lbl, .cta:focus-visible .arr { color: var(--navy); }
.cta:hover .perf, .cta:focus-visible .perf { stroke: var(--navy); }
.cta:hover .arr { transform: translateX(.25rem); }
.cta.dark .body { stroke: var(--brass); }
.cta.hollow .ring { stroke-opacity: 1; }

/* the stack: each layer pins and the next comes out over it; the shade darkens what is being covered */
.stack { position: relative; background: var(--black); }
.layer { position: relative; }
.layer-in { transform-origin: center; }
.shade { position: absolute; inset: 0; background: var(--black); opacity: 0; pointer-events: none; }
.journey { position: relative; z-index: 20; }
/* only where the hero fits one screen: a pinned layer taller than the viewport would hide its own foot */
@media (min-width: 1100px) and (min-height: 760px) {
  .layer { position: sticky; top: 0; z-index: 0; }
  .layer + .layer { z-index: 10; }
}

/* contour backdrop: the same field on every surface that carries it */
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the chequered seam, scrubbed by scroll */
.dissolve { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 34svh; pointer-events: none; z-index: 30; }

/* ---------- 1. hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100lvh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem var(--gut); background: var(--paper); overflow: hidden; }
.hero > :not(.contours) { position: relative; z-index: 2; }
.mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 30 !important; }
.logo, .close-logo { display: inline-flex; align-items: flex-end; gap: .7rem; text-decoration: none; }
.logo img, .close-logo img { height: 2rem; width: auto; }
.logo small, .close-logo small { padding-bottom: .3rem; }
.logo small, .close-logo small { font: 600 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.mast nav { display: none; }
.mast nav ul { display: flex; gap: 3.2rem; white-space: nowrap; }
.mast nav a, .mast-r a, .socials a { text-decoration: none; font: 500 .9rem/.9 var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: color .15s var(--ease); }
.mast nav a:hover, .mast-r a:hover, .socials a:hover, .see:hover b { color: var(--brass-ink); }
.mast-r { display: flex; gap: 1.6rem; align-items: center; }
.bracketed { font-weight: 700 !important; }
@media (min-width: 1100px) { .mast nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); } }

.hero-mid { flex: 1; display: grid; gap: 2rem; align-content: center; }
.id { font: 500 .9rem/.9 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.hero h1 { font-size: clamp(3rem, 11vw, 4.4rem); max-width: 7em; }
.meta { display: grid; gap: .85rem; margin-top: 2.2rem; }
.meta li { display: flex; align-items: center; gap: .6rem; font: 500 1rem/1.1 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.meta svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--brass-ink); stroke-width: 1.3; }

/* the reveal: the couple's portal underneath, your workspace drawn over it where the cursor has just been */
.reveal { position: relative; width: 100%; max-width: 46rem; justify-self: center; }
.tilt { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; transform-style: preserve-3d; will-change: transform; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 1.6cqw; overflow: hidden; font-size: 1.95cqw; line-height: 1.3; box-shadow: 0 2.4cqw 5cqw -2.4cqw rgb(19 32 58 / .45), 0 0 0 1px rgb(19 32 58 / .12); }
.screen.couple { background: #FBF9F4; }
.screen.planner { background: var(--navy2); color: var(--on-dark); }
.planner .chrome { background: #0E1830; }
.planner .chrome i { background: #2B3C5E; }
.planner .scr-side { background: var(--black); }
.planner .scr-sub, .planner .scr-tabs { color: var(--on-dark-mute); }
.planner .scr-k { color: var(--brass); }
.planner .scr-tabs { border-color: rgb(255 255 255 / .12); }
.planner .scr-tabs b { color: #fff; box-shadow: inset 0 -2px var(--brass); }
.planner .sc { background: var(--navy); border-color: rgb(255 255 255 / .1); }
.planner .sc small { color: var(--on-dark-mute); }
.planner .sc.note { background: rgb(227 184 103 / .14); border-color: rgb(227 184 103 / .45); color: #F3D9A4; }
.planner .sc.note small { color: var(--brass); }
.planner .meter { background: rgb(255 255 255 / .12); }
.planner .meter i { background: var(--brass); }
.planner .tag.bad { background: rgb(214 94 66 / .22); color: #F4B4A3; }
.chrome { flex: none; display: flex; align-items: center; gap: .5em; height: 2.4em; padding: 0 1.1em; background: #EAE5D9; }
.chrome i { width: .7em; height: .7em; border-radius: 50%; background: #CFC8B8; }
.chrome span { margin-left: auto; font-weight: 600; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.planner .chrome span { color: var(--brass); }
.scr-body { flex: 1; display: grid; grid-template-columns: 24% 1fr; min-height: 0; }
.scr-body.solo { grid-template-columns: 1fr; }
.scr-side { background: var(--navy); color: #C9D1E0; display: flex; flex-direction: column; gap: .2em; padding: 1.4em 1em; }
.scr-side b { font: 560 1.5em var(--serif); color: #fff; margin-bottom: .9em; }
.scr-side span { padding: .45em .7em; border-radius: .5em; }
.scr-side span.on { background: var(--navy2); color: #fff; }
.scr-side em { font-style: normal; font-size: .75em; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 1em 0 .2em .9em; }
.scr-main { --pt: 1.4em; --px: 2em; padding: var(--pt) var(--px); min-width: 0; }
.solo .scr-main { --pt: 2em; --px: 3em; }
/* the couple's portal opens on a photograph */
.cover { margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 0; padding: 3em var(--px) 1.3em; min-height: 12.5em; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(to bottom, rgb(16 24 43 / .05) 20%, rgb(16 24 43 / .7)), url(/images/pro/cover-jetty.jpg) 50% 58% / cover; }
.cover .scr-k { color: var(--brass); }
.cover .scr-sub { color: rgb(255 255 255 / .85); }
.couple .scr-tabs { margin-top: 1.1em; }
.scr-k { font-size: .78em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); }
.scr-h { font: 560 2.7em/1.05 var(--serif); letter-spacing: -.02em; margin-top: .2em; }
.scr-sub { color: var(--muted); margin-top: .3em; }
.scr-tabs { display: flex; gap: 1.2em; margin: .9em 0 1em; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; color: var(--muted); font-weight: 500; }
.scr-tabs > * { padding-bottom: .55em; }
.scr-tabs b { color: var(--ink); box-shadow: inset 0 -2px var(--brass-ink); }
.scr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
.sc { background: var(--card); border: 1px solid var(--line); border-radius: .9em; padding: .9em 1.1em; display: grid; gap: .35em; align-content: start; justify-items: start; }
.sc small { font-size: .74em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sc strong { font: 560 2em/1 var(--serif); }
.sc.note { background: var(--amber-bg); border-color: transparent; color: var(--amber-fg); }
.sc.note small { color: var(--amber-fg); }
.meter { display: block; width: 100%; height: .45em; min-width: 3em; border-radius: 1em; background: var(--grey-bg); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--p); background: var(--sage); border-radius: inherit; }
.tag { display: inline-block; padding: .15em .75em; border-radius: 1em; font-size: .8em; font-weight: 600; white-space: nowrap; background: var(--amber-bg); color: var(--amber-fg); }
.tag.ok { background: var(--sage-bg); color: #1D4036; }
.tag.off { background: var(--grey-bg); color: var(--muted); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.burn { position: absolute; left: -1%; right: -1%; top: 0; height: 2px; background: var(--brass); box-shadow: 0 0 14px 4px rgb(227 184 103 / .75), 0 0 2px 1px #fff; opacity: 0; pointer-events: none; z-index: 3; }
.lens { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; padding: .35rem .7rem; background: var(--navy); color: var(--brass); font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.reveal-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.hint { font: 500 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.swap { background: none; border: 1px solid var(--ink); padding: .55rem .9rem; font: 600 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.swap:hover, .swap[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* right rail: two bracket panels */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.panels .eyebrow { display: flex; justify-content: space-between; gap: .5rem; }
.panels .eyebrow span { color: var(--muted); font-weight: 400; }
.facts { display: grid; gap: .4rem; margin-top: 1rem; font: 400 .875rem/1 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
.facts dt { font-weight: 700; }
.mini-bar { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font: 600 .75rem var(--sans); }
.mini-bar i { flex: 1; height: 3px; background: linear-gradient(90deg, var(--ink) var(--p), var(--line) var(--p)); }
.stats3 { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .75rem; margin-top: 1.3rem; }
.stats3 > div { display: grid; gap: .55rem; justify-items: start; }
.stats3 dt { font: 400 .75rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.stats3 dd { font: 500 2.375rem/.75 var(--serif); letter-spacing: -.05em; }

.hero-foot { display: grid; gap: 1.25rem; justify-items: start; }
.see { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.see svg { width: 2rem; height: 2rem; fill: none; stroke: var(--ink); stroke-width: 1; }
.see span { display: grid; gap: .35rem; font: 500 .875rem/.9 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.see small { font-size: inherit; color: var(--muted); }
.cta-col { display: grid; justify-items: center; gap: .7rem; }
.note { font-size: .85rem; color: var(--muted); }
.socials { display: flex; gap: 2rem; }

@media (max-width: 639px) {
  .tilt { aspect-ratio: 3 / 4.45; }
  .screen { font-size: 3.3cqw; }
  .scr-body { grid-template-columns: 1fr; }
  .scr-side { display: none; }
  .scr-main, .solo .scr-main { --pt: 1.4em; --px: 1.4em; }
  .scr-cards { grid-template-columns: 1fr; gap: .7em; }
  .hero { gap: 1.25rem; padding-inline: 1.25rem; }
  .mast .bracketed { display: none; }
  .panels, .see, .socials, .hint { display: none; }
  .reveal-foot { justify-content: flex-end; }
  .hero-foot { justify-items: stretch; }
  .cta-col .cta { width: 100%; }
}
@media (min-width: 640px) {
  .hero-foot { grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; }
  .socials { justify-self: end; }
}
@media (min-width: 1100px) {
  .hero-mid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr) 17rem; align-items: center; gap: 3rem; }
  .hero h1 { font-size: 5.6rem; }
  .reveal { width: min(100%, calc(66lvh * 16 / 11)); max-width: none; }
  .panels { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- 2. the season ---------- */
.season { position: relative; isolation: isolate; min-height: 100lvh; display: grid; gap: 2.5rem; padding: 6rem var(--gut) 2rem; background: var(--navy); color: var(--on-dark); overflow: hidden; }
.season-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; position: relative; z-index: 2; }
.season h2, .journey h2, .close h2 { color: var(--brass); font-size: clamp(2.6rem, 10vw, 3.8rem); }
.rule { display: block; width: 1.5rem; height: 2px; margin-top: 1.75rem; background: var(--brass); transform-origin: left; }
.intro { margin-top: 1.9rem; max-width: 17rem; font: 500 1.05rem/1.25 var(--sans); text-transform: uppercase; letter-spacing: .02em; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 2rem; font: 500 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-mute); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend i { width: .6rem; height: .6rem; }
.k-wed { background: var(--brass); }
.k-lead { border: 1.5px solid var(--brass); border-radius: 50%; }
.legend .ex { color: var(--on-dark-faint); }

.plate-std { position: relative; align-self: flex-start; width: 19.25rem; height: 5.4rem; display: grid; grid-template-columns: 5.76rem 1fr; }
.plate-f { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-f path { fill: var(--navy); stroke: var(--brass); vector-effect: non-scaling-stroke; }
.plate-f .perf { fill: none; stroke-dasharray: 3 3; }
.badge { position: relative; display: grid; justify-items: center; align-content: center; gap: .7rem; }
.badge .ring { width: 2.3rem; height: 1.45rem; fill: none; stroke: var(--brass); overflow: visible; }
.badge p { font: 500 .8rem/.75 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.badge b { color: var(--brass); font-weight: 500; }
.plate-std .rows { position: relative; display: grid; align-content: center; gap: .55rem; padding-left: 1.1rem; font: 400 .9rem/.75 var(--sans); text-transform: uppercase; }
.plate-std .rows div { display: flex; gap: .4em; white-space: nowrap; }
.plate-std dt { color: var(--brass); font-weight: 600; }

.cal { position: relative; z-index: 1; min-width: 0; }
.cal canvas { display: block; }
.cal-tip { position: absolute; z-index: 3; min-width: 13rem; padding: .8rem 1rem .9rem; background: var(--black); border: 1px solid var(--brass); color: var(--on-dark); pointer-events: none; font: 400 .85rem/1.35 var(--sans); }
.cal-tip b { display: block; font: 560 1.15rem/1.15 var(--serif); }
.cal-tip small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: .3rem; }
.cal-tip .meter { margin-top: .5rem; background: var(--navy2); }
.cal-tip .meter i { background: var(--brass); }
@media (min-width: 1100px) {
  .season { grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); }
  .cal { align-self: center; }
}

/* ---------- 3. the journey ---------- */
.journey { container-type: inline-size; isolation: isolate; background: var(--black); color: var(--on-dark); padding: 9rem var(--gut) 10rem; overflow-x: clip; }
.j-head { display: grid; gap: 1.6rem; }
.j-lede { max-width: 27rem; color: var(--on-dark-mute); font-size: 1.05rem; }
@media (min-width: 900px) { .j-head { grid-template-columns: 1fr 1fr; align-items: end; } .j-lede { justify-self: end; } }
.journey .rows { position: relative; margin-top: 3rem; }
.rail { display: none; }
.row { position: relative; display: grid; gap: 1.5rem; padding-block: 2.5rem; transition: opacity .7s var(--ease-plate); }
.stage { font: 560 1.6rem/1 var(--serif); letter-spacing: -.02em; color: var(--brass); }
.plate { position: relative; aspect-ratio: 710.995 / 462.995; container-type: inline-size; }
.plate-o { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.plate-o use { fill: none; stroke: var(--plate-line); vector-effect: non-scaling-stroke; }
.plate-o .perf { stroke-dasharray: 4 6; }
.plate-fill { position: absolute; inset: 0; clip-path: url(#plate-clip); background: var(--plate-fill); padding: 4.5% 4.5% 13%; transition: inset .7s var(--ease-plate); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.plate:hover .plate-fill { inset: 2.5%; }
.plate-fill.photo { padding: 0; }
.plate-fill.photo img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 20%; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35em; margin: .1em 0 .6em; }
.thumbs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: .35em; }
.copy { max-width: 28rem; }
.copy .when { font: 500 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.copy h3 { font: 520 2.1rem/1.02 var(--serif); letter-spacing: -.025em; margin-top: .9rem; text-wrap: balance; }
.copy > p:not(.when) { margin-top: 1rem; color: var(--on-dark-mute); text-wrap: pretty; }
.sees { display: grid; gap: .6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rail); font-size: .95rem; }
.sees li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; align-items: baseline; }
.sees b { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }

/* the mock screens inside the plates: the product's own labels, example data */
.ui { width: 100%; background: var(--paper); color: var(--ink); border-radius: 1.6cqw; padding: 2.6cqw 3cqw; font-size: 2.2cqw; line-height: 1.3; box-shadow: 0 2cqw 4cqw -2cqw rgb(0 0 0 / .6); }
.ui-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .9em; }
.ui-h b { font: 560 1.6em/1 var(--serif); letter-spacing: -.02em; }
.ex { font-size: .72em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 1em; }
.chips span { padding: .2em .7em; border-radius: 1em; background: var(--grey-bg); font-size: .82em; font-weight: 600; color: var(--muted); }
.chips .on { background: var(--navy); color: #fff; }
.kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.kan small { display: block; font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .45em; }
.kc { background: var(--card); border: 1px solid var(--line); border-radius: .7em; padding: .7em .8em; display: grid; gap: .2em; font-size: .9em; }
.kc span { color: var(--muted); font-size: .9em; }
.kc .nx { color: var(--brass-ink); font-weight: 600; }
.kc .nx.done { color: var(--sage); }
.kc.hi { outline: 2px solid var(--brass-ink); outline-offset: -1px; }
.ui-btn { display: inline-block; margin-top: 1em; padding: .55em 1.2em; border-radius: 2em; background: var(--navy); color: #fff; font-weight: 600; font-size: .9em; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: .6em; }
.kpis div { background: var(--card); border: 1px solid var(--line); border-radius: .7em; padding: .6em .8em; }
.kpis b { display: block; font: 560 1.45em/1.1 var(--serif); }
.kpis span { font-size: .78em; color: var(--muted); }
.late { color: var(--bad) !important; }
.lr { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em 0; border-top: 1px solid var(--line); }
.lr small { display: block; color: var(--muted); font-size: .86em; }
.lr .meter.w { width: 7em; }
.tot { display: flex; justify-content: space-between; padding-top: .6em; border-top: 2px solid var(--ink); font: 560 1.3em var(--serif); }
.ui .cap { color: var(--muted); font-size: .9em; margin: -.4em 0 .6em; }
.ui table { width: 100%; border-collapse: collapse; font-size: .88em; }
.ui th, .ui td { text-align: left; padding: .55em .5em .55em 0; border-top: 1px solid var(--line); vertical-align: middle; }
.ui thead th { border-top: 0; font-size: .78em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui tbody th { font-weight: 600; }
.ui small { display: block; font-weight: 400; color: var(--muted); font-size: .85em; }
.ui .num { text-align: right; white-space: nowrap; }
.ui td .meter { width: 5.5em; }
.phone-ui { width: auto; background: none; box-shadow: none; padding: 0; display: flex; justify-content: center; height: 100%; }
.ph { width: 44cqw; height: 100%; min-height: 0; background: var(--paper); border: 1.2cqw solid var(--navy); border-bottom: 0; border-radius: 4.5cqw 4.5cqw 0 0; padding: 2.6cqw 2.6cqw 0; font-size: 2.1cqw; overflow: hidden; display: flex; flex-direction: column; gap: .5em; }
.ph-h { display: flex; justify-content: space-between; align-items: center; gap: .5em; font-size: .9em; }
.ph-h b { text-align: center; } .ph-h small { display: block; color: var(--muted); font-weight: 400; }
.ph-h span { font-weight: 600; color: var(--muted); }
.ph-h .clock { color: var(--ink); font-variant-numeric: tabular-nums; }
.ph-k { font-size: .75em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .4em; }
.do { background: var(--card); border: 1px solid var(--line); border-radius: .8em; padding: .7em .9em; display: grid; gap: .15em; }
.do.now { border: 2px solid var(--sage); }
.do .t { font-size: .85em; color: var(--muted); } .do .t b { color: var(--ink); }
.do .ti { font: 560 1.45em/1.1 var(--serif); }
.do u { color: var(--sage); font-weight: 600; text-decoration: none; }
.acts { display: flex; gap: .35em; margin-top: .4em; }
.acts span { flex: 1; text-align: center; padding: .55em .3em; border-radius: 2em; border: 2px solid var(--sage); color: var(--sage); font-weight: 600; font-size: .85em; }
.acts .solid { background: var(--sage); color: #fff; }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: .7em 0; font-size: .8em; color: var(--muted); }
.ph-tabs b { color: var(--ink); }
.toast { display: flex; gap: .6em; align-items: center; margin-top: .9em; padding: .7em .9em; border-radius: .7em; background: var(--navy); color: #fff; font-size: .88em; }
.toast b { flex: none; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: .4em; background: var(--sage); }

@media (max-width: 899px) {
  .plate { aspect-ratio: auto; }
  .plate-fill { position: relative; padding: 5% 5% 14%; }
  .plate-fill.photo { aspect-ratio: 710.995 / 462.995; }
  .ui { font-size: 3.6cqw; }
  .ph { width: 70cqw; height: auto; font-size: 3.4cqw; }
}
@media (min-width: 900px) {
  .journey { padding-top: 7rem; }
  .rail { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 1rem; translate: -50% 0; z-index: 1; }
  .rail svg { width: 100%; height: 100%; overflow: visible; }
  .rail .track { stroke: var(--rail); stroke-width: 1; }
  .rail .thread, .rail .mark { fill: var(--on-dark); }
  .row { grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); align-items: center; gap: 0 2rem; padding-block: 4.5rem; }
  .stage { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 2; padding: .5rem .3rem; background: var(--black); white-space: nowrap; text-align: center; }
  .plate { grid-row: 1; grid-column: 1; }
  .copy { grid-row: 1; grid-column: 3; }
  .row:nth-child(odd) .plate { grid-column: 3; }
  .row:nth-child(odd) .copy { grid-column: 1; justify-self: end; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rows:has(.plate:hover) .row:not(:has(.plate:hover)) { opacity: .3; }
}

/* ---------- 4. the client ---------- */
.client { position: relative; isolation: isolate; container-type: inline-size; min-height: 100lvh; display: grid; gap: 2rem; padding: 2rem var(--gut) 0; background: var(--paper); overflow: hidden; }
.client > :not(.contours):not(.dissolve) { position: relative; z-index: 2; }
.client h2 { font-size: max(6.6667cqw, 3rem); color: var(--ink); }
.client-intro { display: grid; gap: 2rem; justify-items: start; max-width: 24rem; }
.client-intro p { font: 500 1.1rem/1.25 var(--sans); text-transform: uppercase; letter-spacing: .01em; }
.client-intro .split { column-gap: .22em; }
.client-panels { display: grid; gap: 1.5rem; align-content: start; }
.client-panels .bp { color: var(--ink); }
.client-panels .eyebrow { color: var(--ink); font-weight: 700; }
.client-panels ul { display: grid; gap: .7rem; margin-top: 1rem; }
.client-panels li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--muted); }
.client-panels li::before { content: ""; position: absolute; left: 0; top: .62em; width: .8rem; height: 1px; background: var(--brass-ink); }
.portrait { display: none; }
.portrait { box-sizing: content-box; background: var(--black); border: .75rem solid var(--navy); border-bottom: 0; border-radius: 3.4rem 3.4rem 0 0; }
.portrait img { display: block; width: 100%; height: auto; }
.portrait::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to bottom, rgb(11 18 34 / 0), var(--black) 92%); }
.strip { margin-inline: calc(-1 * var(--gut)); padding: 2.5rem var(--gut) 2.75rem; background: var(--black); color: var(--on-dark); }
.strip-k { font: 500 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.6rem; }
.strip ol { display: grid; gap: 1.5rem; }
.strip li { position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; gap: .7rem; text-align: center; padding: .9rem .6rem; text-transform: uppercase; }
.strip .tm { font: 500 .75rem/1 var(--sans); letter-spacing: .04em; color: var(--on-dark-mute); }
.strip b { font: 560 1.15rem/1 var(--serif); text-transform: none; letter-spacing: -.01em; }
.strip .mk { position: relative; z-index: 1; height: 11px; display: flex; align-items: center; font: 700 .72rem/1 var(--sans); letter-spacing: .06em; color: var(--on-dark-mute); }
.strip .mk svg { width: 11px; height: 11px; fill: none; stroke: var(--on-dark); }
.strip .live .tm { color: var(--brass); }
.strip .live .mk svg { fill: var(--brass); stroke: none; }
.strip .live { color: var(--brass); }
.strip .live b { color: var(--on-dark); }
.strip .live { outline: 1px solid rgb(227 184 103 / .45); outline-offset: -1px; }
.strip .live .c { color: var(--brass); }
.strip .live:hover .c.tl { translate: -5px -5px; } .strip .live:hover .c.tr { translate: 5px -5px; }
.strip .live:hover .c.bl { translate: -5px 5px; } .strip .live:hover .c.br { translate: 5px 5px; }
.pulse { position: absolute; left: 50%; bottom: calc(.9rem + 5.5px); width: 60px; height: 60px; translate: -50% 50%; overflow: visible; pointer-events: none; }
.pulse circle { fill: none; stroke: var(--brass); vector-effect: non-scaling-stroke; opacity: 0; }
.ln { display: none; }
@media (min-width: 900px) {
  .strip ol { grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 60rem; margin-inline: auto; }
  .ln { display: block; position: absolute; bottom: calc(.9rem + 5px); left: calc(50% + 1.6rem); width: calc(100% - 3.2rem); height: 1px; background-image: repeating-linear-gradient(to right, var(--on-dark-mute) 0 7px, transparent 7px 11.45px); transform-origin: left; }
}
@media (min-width: 1024px) {
  .client { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 15rem; grid-template-rows: auto 1fr auto; column-gap: 2rem; row-gap: 0; padding-top: 2.2222cqw; }
  .client h2 { grid-column: 1 / 3; grid-row: 1; }
  .client-panels { grid-column: 3; grid-row: 1 / 3; }
  .client-intro { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 2.2222cqw; }
  .strip { grid-column: 1 / -1; grid-row: 3; }
  .portrait { display: block; grid-column: 2; grid-row: 1 / 3; justify-self: center; align-self: stretch; overflow: hidden; margin-top: calc(-2.2222cqw - 1px); contain: size; width: auto; aspect-ratio: 585 / 1266; }
}

/* ---------- 5. pricing ---------- */
.pricing, .questions { padding: 7rem var(--gut); background: var(--paper); }
.p-head { display: grid; gap: 2rem; margin-bottom: 4rem; }
.pricing h2, .questions h2 { font-size: clamp(2.8rem, 11vw, 4.4rem); color: var(--ink); }
.lede { max-width: 34rem; font-size: 1.1rem; color: var(--muted); text-wrap: pretty; }
.plans { display: grid; gap: 1.5rem; }
.plan { position: relative; display: grid; gap: 1rem; align-content: start; padding: 1.75rem 1.6rem 1.6rem; color: var(--ink); border: 1px solid var(--line); }
.plan .eyebrow { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-weight: 700; }
.plan .flag { padding: .3rem .55rem; background: var(--brass); color: var(--navy); font-size: .65rem; }
.price { display: flex; align-items: baseline; gap: .6rem; font: 520 4.2rem/.8 var(--serif); letter-spacing: -.05em; margin-top: .6rem; }
.price small { font: 500 .8rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan .cap { font: 500 .85rem var(--sans); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.plan .cap b { font: 560 1.4rem var(--serif); letter-spacing: -.02em; margin-right: .2rem; }
.plan > p:not(.price):not(.cap) { color: var(--muted); font-size: .95rem; }
.plan-btn { display: inline-flex; align-items: center; gap: .8rem; margin-top: .6rem; justify-self: start; font: 600 .85rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding-bottom: .4rem; border-bottom: 1px solid currentColor; transition: color .15s var(--ease); }
.plan-btn .arr { width: .9rem; height: .7rem; transition: transform .15s var(--ease); }
.plan-btn:hover { color: var(--brass-ink); }
.plan-btn:hover .arr { transform: translateX(.25rem); }
.plan.pick { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.plan.pick .eyebrow { color: var(--on-dark); }
.plan.pick .c { color: var(--brass); }
.plan.pick > p:not(.price):not(.cap), .plan.pick .price small { color: var(--on-dark-mute); }
.plan.pick .cap { border-color: rgb(255 255 255 / .18); }
.plan.pick .plan-btn { color: var(--brass); }
.plan:hover .c.tl { translate: -5px -5px; } .plan:hover .c.tr { translate: 5px -5px; }
.plan:hover .c.bl { translate: -5px 5px; } .plan:hover .c.br { translate: 5px 5px; }
.fine { margin-top: 2.5rem; max-width: 44rem; color: var(--muted); }
@media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .p-head { grid-template-columns: 1fr 1fr; align-items: end; } }

/* ---------- 6. questions ---------- */
.questions { padding-top: 0; display: grid; gap: 3rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; font: 520 1.3rem/1.2 var(--serif); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.7rem/1 var(--sans); color: var(--brass-ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 1.4rem; max-width: 40rem; }
@media (min-width: 1100px) { .questions { grid-template-columns: 1fr 1.4fr; } }

/* ---------- 7. sign-off: a brass page edge with the navy panel inset inside it ---------- */
.close { position: relative; padding: 1rem; background: var(--brass); }
.close-in { position: relative; isolation: isolate; min-height: calc(100lvh - 2rem); display: grid; grid-template-rows: auto 1fr auto; gap: 3rem; padding: 2rem; background: var(--navy); color: var(--on-dark); overflow: hidden; }
.close-in > :not(.contours) { position: relative; z-index: 2; }
.close-logo small { color: var(--brass); }
.close h2 { display: flex; flex-direction: column; }
.close-nav { display: grid; gap: .75rem; align-content: center; justify-items: start; }
.close-nav a { font: 520 2.25rem/1 var(--serif); letter-spacing: -.02em; text-decoration: none; transition: color .15s var(--ease); }
.close-nav a:hover { color: var(--brass); }
.close-in > footer.site { grid-column: 1 / -1; }
.close-foot { display: grid; gap: 1.5rem; align-items: end; }
.copy-r { font-size: .85rem; color: var(--on-dark-faint); max-width: 20rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.foot-links { display: flex; gap: 2rem; }
.foot-links a { white-space: nowrap; text-decoration: none; font: 500 .85rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.foot-links a:hover { color: var(--brass); }
footer.site .footer-legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .78rem; color: var(--on-dark-faint); }
footer.site .legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .5rem; }
footer.site .legal-links a, footer.site .legal-links button, footer.site .legal-business a { color: var(--on-dark-mute); font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) {
  .close-in { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 4rem; }
  .close h2 { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(3.6rem, 7.4vw, 9rem); line-height: .95; }
  .close-logo { grid-column: 1; grid-row: 1; align-self: start; }
  .close-nav { position: relative; grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 2.5rem 3rem; border: 1px solid rgb(255 255 255 / .18); counter-reset: n; }
  .close-nav a { display: flex; align-items: baseline; gap: 1.2rem; padding: .35rem 0; font-size: clamp(2.2rem, 3.4vw, 3.4rem); counter-increment: n; }
  .close-nav a::before { content: counter(n, decimal-leading-zero); font: 600 .75rem var(--sans); letter-spacing: .12em; color: var(--brass); }
  .close-nav .c { color: var(--brass); }
  .close-foot { grid-column: 1 / -1; grid-template-columns: 1fr auto 1fr; }
  .foot-links { justify-self: end; }
}

/* ---------- motion states: only once the script has said it is running, and only where motion is wanted ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; }
}
@media print { .stack, .layer, .layer-in { position: static !important; transform: none !important; } .contours, .dissolve, .shade { display: none; } }

/* Sticky mobile CTA, shown after the hero scrolls away. */
.m-cta { display: none; }
@media (max-width: 700px) {
  .m-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--navy); color: var(--brass); font: 600 1rem var(--sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 24px rgb(11 18 34 / .35); transform: translateY(140%); transition: transform .3s var(--ease); }
  .m-cta span { font-weight: 400; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--on-dark-mute); }
  .m-cta.on { transform: none; }
  body { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }