/* Team Starfish — team.starfi.sh
   Tokens, base, layout, components, page visuals, motion, responsive. */

@font-face { font-family: 'GE-Inspira'; src: url('../fonts/GEInspiraRegular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GE-Inspira'; src: url('../fonts/GEInspira-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
	--teal: #0F7C77;
	--teal-dark: #0A5552;
	--teal-tint: #E3F1EE;
	--deep: #0A3D3B;
	--mint: #8FD3CA;
	--mist: #D3E6E3;
	--mustard: #E9A23B;
	--mustard-tint: #FBEBD0;
	--brown: #8A4B12;
	--red: #BE202E;
	--ink: #252D3A;
	--black: #111111;
	--body: #444444;
	--muted: #666666;
	--grey: #F5F5F5;
	--beige: #F7F4EF;
	--line: #E0E0E0;
	--footer: #14191D;
	--serif: 'Playfair Display', Georgia, serif;
	--sans: 'GE-Inspira', 'Segoe UI', Roboto, sans-serif;
	--shadow: 0 24px 48px -20px rgba(20, 25, 29, 0.35);
	--shadow-sm: 0 18px 40px -18px rgba(20, 25, 29, 0.35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: #FFFFFF; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: var(--teal-dark); }
a:hover { color: #06302E; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--deep); color: #FFFFFF; padding: 10px 16px; }
.skip:focus { top: 12px; }
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }

/* ---------- Type ---------- */
.h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 4.6vw, 58px); line-height: 1.1; color: var(--black); text-wrap: balance; }
.h1--xl { font-size: clamp(42px, 5.2vw, 64px); line-height: 1.08; }
.h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; color: var(--black); text-wrap: balance; }
.h3-serif { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--black); }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: #555555; }
.muted { color: var(--muted); font-size: 14px; }
.strong { font-weight: 700; }
.label { display: inline-block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.label--teal { color: var(--teal-dark); }
.label--brown { color: var(--brown); }
.label--mint { color: var(--mint); }
.brown { color: var(--brown); }
.teal { color: var(--teal-dark); }

/* ---------- Buttons and links ---------- */
.btn { display: inline-block; background: var(--teal); color: #FFFFFF; text-decoration: none; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 18px 30px; border: 0; cursor: pointer; font-family: var(--sans); box-shadow: 0 10px 22px -10px var(--teal); transition: background .2s, transform .2s; }
.btn:hover { background: var(--teal-dark); color: #FFFFFF; transform: translateY(-1px); }
.btn--small { font-size: 15px; letter-spacing: .3px; text-transform: none; font-weight: 400; padding: 10px 16px; box-shadow: none; }
.btn--deep { background: var(--deep); box-shadow: none; }
.btn--deep:hover { background: #06302E; }
.btn--block { width: 100%; text-align: center; }
.link { font-size: 16px; color: var(--teal-dark); text-decoration: underline; text-underline-offset: 4px; }
.link--mustard { color: var(--mustard); font-weight: 700; }
.link--mustard:hover { color: #F3BE6E; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.proof { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--body); }
.proof__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mustard); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #FFFFFF; box-shadow: 0 1px 0 var(--line); }
.site-header__inner { height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px 0 24px; max-width: 1600px; margin-inline: auto; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.brand__words { display: flex; flex-direction: column; gap: 2px; }
.brand__team { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.brand__name { font-size: 22px; font-weight: 700; letter-spacing: .5px; line-height: 1; }
.brand--light { color: #FFFFFF; gap: 14px; }
.brand--light .brand__team { color: var(--mint); font-size: 11px; }
.brand--light .brand__name { font-size: 20px; }
.site-nav { display: flex; align-items: center; gap: 44px; }
.site-nav__link { font-family: var(--sans); background: none; border: 0; padding: 6px 0; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; font-weight: 700; color: var(--ink); }
.site-nav__link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; transition: transform .2s; }
.site-nav__link:hover, .site-nav__link.is-current { color: var(--teal); }
.site-nav__item--drop { position: relative; }
.site-nav__menu { position: absolute; top: calc(100% + 18px); left: -24px; min-width: 300px; background: #FFFFFF; box-shadow: var(--shadow); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; border-top: 3px solid var(--mustard); }
.site-nav__menu a { display: block; padding: 11px 24px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.site-nav__menu a:hover, .site-nav__menu a[aria-current] { background: var(--teal-tint); color: var(--teal-dark); }
.site-nav__item--drop.is-open .site-nav__menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__item--drop.is-open .site-nav__drop svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 981px) {
	.site-nav__item--drop:hover .site-nav__menu, .site-nav__item--drop:focus-within .site-nav__menu { opacity: 1; visibility: visible; transform: none; }
}
.nav-toggle { display: none; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; position: relative; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { position: absolute; left: 12px; width: 24px; height: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav-toggle__bars { top: 23px; }
.nav-toggle__bars::before { content: ''; left: 0; top: -8px; }
.nav-toggle__bars::after { content: ''; left: 0; top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: #FFFFFF; padding: 50px 0 56px; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.site-footer__brand p { font-size: 14px; color: #B8BEC4; }
.site-footer__brand p a { color: var(--mustard); }
.site-footer__cols { display: flex; gap: 80px; font-size: 14px; }
.site-footer__cols nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer__cols h2 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--mint); font-weight: 700; margin-bottom: 2px; }
.site-footer__cols a { color: #FFFFFF; text-decoration: none; }
.site-footer__cols a:hover { color: var(--mustard); }

/* ---------- Sections ---------- */
.sec { padding: 90px 0; position: relative; }
.sec--slim { padding: 50px 0 56px; }
.sec--white { background: #FFFFFF; }
.sec--beige { background: var(--beige); }
.sec--grey { background: var(--grey); }
.sec--deep { background: var(--deep); color: #FFFFFF; overflow: hidden; }
.sec--deep .h2 { color: #FFFFFF; }
.sec--deep .lead, .sec--deep p { color: var(--mist); }
.sec--deep .strong { color: #FFFFFF; }
.sec--mustard { background: var(--mustard); }
.sec__head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin-bottom: 40px; }
.sec__head--wide { max-width: 1060px; }
.note { margin-top: 40px; font-size: 15px; color: var(--muted); }
.sec--deep .note { color: var(--mist); }

/* ---------- Hero ---------- */
.hero { background: var(--grey); padding: 96px 0 88px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 24px; max-width: 600px; }
.hero__text .actions { margin-top: 4px; }
.hero__visual { display: flex; justify-content: center; }

/* Fixed-size illustration stages, scaled down by JS on narrow screens. */
.stage { position: relative; flex: none; }
.stage > * { position: absolute; }
.abs { position: absolute; }

/* ---------- Chips, panels ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 5px 9px; line-height: 1.3; white-space: nowrap; }
.chip--grey { background: #F1F1F1; color: var(--body); font-weight: 400; }
.chip--tint { background: var(--teal-tint); color: var(--teal-dark); }
.chip--teal { background: var(--teal); color: #FFFFFF; }
.chip--white { background: #FFFFFF; color: var(--teal-dark); }
.chip--mustard { background: var(--mustard-tint); color: var(--brown); }
.chip--plain { background: #FFFFFF; color: var(--teal-dark); }
.chip--line { border: 1px solid #D6D6D6; color: var(--muted); font-weight: 400; background: #FFFFFF; }
.chip--shadow { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.chip s { color: #999999; text-decoration: line-through; font-weight: 400; }
.panel { background: #FFFFFF; box-shadow: var(--shadow-sm); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel__title { font-size: 14px; font-weight: 700; color: var(--black); }
.panel__file { font-size: 13px; color: var(--body); }
.panel__muted { font-size: 12px; color: var(--muted); }
.panel__ok { font-size: 12px; font-weight: 700; color: var(--teal-dark); }
.panel .chip--mustard { align-self: flex-start; }
.result { display: flex; align-items: center; gap: 10px; }
.result__thumb { width: 72px; height: 50px; object-fit: cover; box-shadow: 0 0 0 3px var(--mustard); flex: none; }
.result b { display: block; font-size: 13px; color: var(--black); }
.result small { display: block; font-size: 12px; color: var(--teal-dark); }
.result--empty { justify-content: center; height: 100%; border: 1px dashed #D6D6D6; font-size: 13px; color: #888888; }

/* ---------- Swing tag (service heroes) ---------- */
.swingtag { width: 210px; transform-origin: 20% 0; }
.swingtag__string { display: block; width: 2px; height: 70px; background: var(--ink); margin-left: 40px; }
.swingtag__tag { position: relative; background: var(--mustard); padding: 18px 18px 18px 34px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--black); }
.swingtag__hole { position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--grey); }
.swingtag__title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--ink); }

/* ---------- Blob and dot ---------- */
.blob path { fill: var(--teal); }
.blob--mustard path { fill: var(--mustard); }
.dot { width: 70px; height: 70px; border-radius: 50%; background: var(--teal); }
.dot--mustard { background: var(--mustard); width: 64px; height: 64px; }

/* ---------- Service hero stage 570x540 ---------- */
.stage--service .blob { left: 20px; top: 0; width: 500px; height: 500px; }
.stage__photo { left: 100px; top: 70px; width: 320px; height: 360px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .5); }
.stage__photo img { width: 100%; height: 100%; object-fit: cover; }
.stage--service .swingtag { left: 360px; top: 100px; }
.panel--hero { left: 10px; top: 380px; width: 300px; }

/* ---------- Home hero stage 650x600 ---------- */
.stage__panel { left: 40px; top: 10px; width: 560px; height: 560px; background: var(--beige); }
.stage--home .blob { left: 0; top: 30px; width: 540px; height: 540px; }
.stage--home .dot { left: 570px; top: 0; }
.prodcard { left: 110px; top: 80px; width: 380px; background: #FFFFFF; box-shadow: var(--shadow); border-radius: 6px; overflow: hidden; }
.prodcard__img { width: 380px; height: 200px; object-fit: cover; }
.prodcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.prodcard__head { display: flex; justify-content: space-between; align-items: baseline; }
.prodcard__head .h3-serif { font-size: 21px; }
.prodcard__head .muted { font-size: 12px; }
.prodcard .chip { font-size: 13px; }
.prodcard__status { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; height: 18px; }
.prodcard__status .swap__before { color: var(--brown); }
.prodcard__status .swap__after { color: var(--teal-dark); font-weight: 700; }
.panel--filter { left: 380px; top: 44px; width: 270px; }
.swap { position: relative; }
.swap > * { position: absolute; left: 0; top: 0; }
.swap--chips { height: 28px; }
.swap--chips .chip { padding: 6px 9px; }
.swap--result { height: 64px; }
.swap--result > * { right: 0; bottom: 0; }
.panel--filter .result__thumb { width: 92px; height: 60px; }
.logcard { left: 30px; top: 498px; width: 380px; background: #FFFFFF; box-shadow: var(--shadow-sm); border-radius: 6px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.logcard__tick { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.ico-check { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logcard__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.logcard__text small { font-size: 13px; color: var(--muted); }

/* ---------- Home: audience grid ---------- */
.split { display: grid; gap: 80px; align-items: center; }
.split__text { display: flex; flex-direction: column; gap: 22px; }
.split--audience { grid-template-columns: 500px minmax(0, 1fr); }
.catgrid { height: 380px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catgrid__tile { position: relative; overflow: hidden; }
.catgrid__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.catgrid__tile:hover img { transform: scale(1.05); }
.catgrid__tile .chip { position: absolute; left: 10px; bottom: 10px; }
.catgrid__more { background: var(--mustard); display: flex; flex-direction: column; justify-content: center; padding: 0 20px; gap: 4px; font-weight: 700; font-size: 14px; }
.catgrid__num { font-family: var(--serif); font-size: 34px; color: var(--black); }

/* ---------- Home: service cards ---------- */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.svc__card { background: #FFFFFF; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.svc__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }
.svc__media { height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.svc__media--teal { background: var(--teal); }
.svc__media--mustard { background: var(--mustard); }
.svc__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__body .h3-serif { font-size: 21px; }
.svc__body p { font-size: 15px; color: #555555; flex: 1; }
.svc__link { font-size: 14px; font-weight: 700; color: var(--teal-dark); margin-top: 12px; }
.svc-tag { left: 50px; top: 22px; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #FFFFFF, 0 18px 30px -12px rgba(0, 0, 0, .45); }
.svc-tag__img { width: 100%; height: 100%; object-fit: cover; }
.svc-tag__match { left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 7px 10px; background: var(--deep); color: #FFFFFF; font-weight: 700; }
.svc-tag__match span { color: var(--mustard); }
.minisearch { width: 236px; background: #FFFFFF; padding: 10px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 7px; font-size: 11px; }
.minisearch__box { border: 1px solid var(--line); padding: 6px 8px; font-size: 12px; }
.minisearch__row { display: flex; align-items: center; gap: 8px; }
.minisearch__row span:nth-child(2) { flex: 1; }
.minisearch__row b { color: var(--teal-dark); }
.minisearch__row.is-flag { background: var(--mustard-tint); margin: 0 -4px; padding: 3px 4px; }
.minisearch__row.is-flag b { color: var(--brown); }
.minisearch__img { width: 32px; height: 26px; background-size: cover; background-position: center; flex: none; }
.minipage { width: 236px; background: #FFFFFF; padding: 10px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 8px; }
.minipage__hero { display: block; height: 96px; background-size: cover; background-position: center 65%; }
.minipage__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 10px; font-weight: 700; color: var(--ink); }
.minipage__thumbs > div { display: flex; flex-direction: column; gap: 3px; }
.minipage__thumbs span { display: block; height: 40px; background-size: cover; background-position: center 65%; }
.minipage__thumbs .is-picked { box-shadow: 0 0 0 2px var(--mustard); }
.minipage__dim { position: relative; background: var(--grey); }
.minipage__dim i { position: absolute; left: 6px; right: 6px; top: 13px; height: 12px; border: 1.5px solid var(--teal-dark); border-top: 0; }
.minipage__dim em { position: absolute; left: 0; right: 0; top: 26px; text-align: center; font-size: 9px; color: var(--teal-dark); font-style: normal; }
.minipage__ok { font-size: 11px; color: var(--teal-dark); font-weight: 700; }
.minipage__ok b { color: var(--mustard); }
.minilegs { left: 26px; top: 30px; display: flex; gap: 10px; }
.minilegs > div { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.minilegs__box { position: relative; width: 105px; height: 110px; overflow: hidden; box-shadow: 0 0 0 3px #FFFFFF; }
.minilegs__img { position: absolute; width: 300px; height: 200px; left: -20px; top: -82px; max-width: none; object-fit: cover; }
.minilegs__leg { position: absolute; left: 31px; top: 65px; width: 7px; height: 18px; background: #1E1E1E; clip-path: polygon(0 0, 100% 0, 80% 100%, 25% 100%); }
.minilegs__ring { position: absolute; left: 17px; top: 56px; width: 30px; height: 34px; border: 3px solid var(--mustard); border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF; }
.minilegs__lab { font-size: 11px; font-weight: 700; color: #FFFFFF; padding: 3px 8px; white-space: nowrap; }
.minilegs__lab--teal { background: var(--teal); }
.minilegs__lab--brown { background: var(--brown); }
.minilegs__link { left: 50%; transform: translateX(-50%); top: 190px; font-size: 11px; font-weight: 700; color: var(--deep); background: #FFFFFF; padding: 4px 10px; white-space: nowrap; }

/* ---------- Work log table ---------- */
.split--log { grid-template-columns: 380px minmax(0, 1fr); gap: 70px; align-items: start; }
.sec--blobbed .split--log { align-items: center; }
.log { background: #FFFFFF; color: var(--ink); padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.log__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.log__title { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--black); }
.log__meta { font-size: 12px; color: var(--muted); }
.log__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) 76px; gap: 0 16px; font-size: 14px; padding: 4px 0; }
.log__row--head { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.log__row--head span:last-child, .log__time { text-align: right; }
.log__date { color: var(--muted); }
.log__task { font-weight: 700; }
.log__task em { font-style: normal; color: var(--brown); }
.log__time { font-weight: 700; }
.log__row--decision { background: var(--mustard-tint); margin: 0 -10px; padding: 8px 10px; }
.log__row--nb .log__out { color: var(--muted); }
.log__row--nb .log__time { color: var(--teal-dark); }
.log__total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; padding-top: 8px; border-top: 1px solid var(--line); }
.log__foot { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sec--deep .log p, .sec--deep .log small { color: var(--muted); }
.meter { display: flex; flex-direction: column; gap: 10px; }
.meter__top { display: flex; justify-content: space-between; font-size: 14px; gap: 12px; }
.meter__bar { position: relative; height: 12px; background: #EDEAE4; }
.meter__fill { display: block; height: 100%; width: var(--to); background: var(--mustard); }
.meter__mark { position: absolute; top: -6px; width: 2px; height: 24px; background: var(--deep); }
.meter small { font-size: 13px; color: var(--muted); }
.blob--corner { position: absolute; left: -190px; bottom: -250px; width: 420px; height: 420px; }

/* ---------- Proof timeline ---------- */
.split--proof { grid-template-columns: 580px minmax(0, 1fr); gap: 90px; }
.timeline { position: relative; height: 130px; }
.timeline__line { position: absolute; left: 14px; right: 14px; top: 11px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mustard), var(--teal)); }
.timeline__end { position: absolute; top: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #555555; max-width: 48%; }
.timeline__end--start { left: 0; }
.timeline__end--now { right: 0; align-items: flex-end; text-align: right; }
.timeline__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 6px var(--mustard-tint); }
.timeline__end--now .timeline__dot { background: var(--teal); box-shadow: 0 0 0 6px var(--teal-tint); }
.timeline__end b { font-family: var(--serif); font-size: 30px; color: var(--black); line-height: 1.1; margin-top: 4px; }
.timeline__end--now b { color: var(--teal); }

/* ---------- CTA band ---------- */
.cta { overflow: hidden; padding: 80px 0; }
.cta__tag { position: absolute; right: -60px; top: -40px; width: 420px; height: 354px; opacity: .18; }
.cta__tag path { fill: #FFFFFF; }
.cta__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.cta__text { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cta__text p { font-size: 18px; line-height: 1.6; color: var(--ink); }
.cta .btn { flex: none; }

/* ---------- Service: scope, steps, commercial, uses, related ---------- */
.scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; }
.scope__item { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--teal); padding-top: 16px; align-items: flex-start; }
.scope__item--mustard { border-top-color: var(--mustard); }
.scope__item h3 { font-size: 18px; font-weight: 700; color: var(--black); }
.scope__item p { font-size: 15px; color: var(--body); }
.scope__item .chip { font-size: 13px; padding: 3px 8px; white-space: normal; }

.steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; }
.steps::before { content: ''; position: absolute; left: 22px; right: 22px; top: 21px; height: 3px; background: var(--teal-tint); }
.sec--deep .steps::before { background: rgba(143, 211, 202, .4); height: 2px; }
.steps__item { position: relative; display: flex; flex-direction: column; gap: 10px; }
.steps__num { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #FFFFFF; font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.steps__item--last .steps__num { background: var(--mustard); color: var(--ink); }
.sec--deep .steps__num { background: var(--mint); color: var(--deep); }
.sec--deep .steps__item--last .steps__num { background: var(--mustard); color: var(--ink); }
.steps__item h3 { font-size: 17px; font-weight: 700; color: var(--black); }
.sec--deep .steps__item h3 { color: #FFFFFF; font-size: 19px; }
.steps__item p { font-size: 15px; color: var(--body); }
.sec--deep .steps__item p { color: var(--mist); }

.commercial { display: grid; grid-template-columns: 1fr 1fr 1.2fr; margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 32px; }
.commercial > div { display: flex; flex-direction: column; gap: 8px; }
.commercial__rate { padding-right: 36px; }
.commercial__big { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #FFFFFF; line-height: 1.2; }
.commercial p { font-size: 15px; }
.commercial__cap { padding: 0 36px; border-left: 1px solid rgba(255, 255, 255, .18); }
.commercial h3 { font-size: 17px; font-weight: 700; color: #FFFFFF; }
.commercial__pilot { background: var(--mustard); padding: 20px 24px; gap: 10px; }
.commercial__pilot h3 { color: var(--black); }
.sec--deep .commercial__pilot p { color: var(--ink); }
.commercial__pilot a { font-size: 15px; font-weight: 700; color: var(--deep); }

.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.uses__card { padding: 24px; display: flex; flex-direction: column; gap: 10px; border-top: 5px solid var(--teal); background: var(--teal-tint); }
.uses__card--mustard { background: var(--mustard-tint); border-top-color: var(--mustard); }
.uses__card h3 { font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--black); }
.uses__card p { font-size: 15px; color: var(--body); }

.h3-serif + .related { margin-top: 22px; }
.sec--slim .h3-serif { font-size: 30px; }
.related { display: flex; flex-wrap: wrap; gap: 18px 56px; margin-top: 22px; }
.related a { font-size: 19px; font-weight: 700; color: var(--teal-dark); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; text-underline-offset: 7px; }

/* ---------- Service demos ---------- */
.label + .h3-serif { margin-top: -2px; }
.record { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.record--tight { grid-template-columns: 120px minmax(0, 1fr); gap: 9px 12px; }
.record dt { color: var(--muted); }
.record dd span { display: inline; padding: 0 6px; margin-left: -6px; }
.record .v-empty span { color: #999999; }
.record .v-ok span { background: var(--teal-tint); color: var(--teal-dark); margin-left: 0; }
.record .v-pending span { background: var(--mustard-tint); color: var(--brown); font-weight: 700; margin-left: 0; }
.record s { color: #999999; }
.arrow { width: 44px; height: 44px; fill: none; stroke: var(--mustard); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; align-self: center; }

.ba { display: flex; gap: 30px; align-items: stretch; }
.ba__card { flex: 1; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.ba__card--before { background: var(--grey); }
.ba__card--after { background: #FFFFFF; box-shadow: var(--shadow), 0 0 0 2px var(--teal); }
.ba__card .h3-serif { font-size: 24px; }
.ba__cap { margin-top: 8px; font-size: 14px; color: var(--muted); }
.ba__cap--ok { color: var(--teal-dark); font-weight: 700; }
.ba-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.ba-result { display: flex; align-items: center; gap: 18px; background: var(--deep); padding: 18px 22px; color: #FFFFFF; }
.ba-result__img { width: 110px; height: 72px; object-fit: cover; box-shadow: 0 0 0 3px var(--mustard); flex: none; }
.ba-result > div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.note-box { background: var(--mustard-tint); padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.note-box p { font-size: 15px; color: var(--ink); }

.flow { display: flex; gap: 22px; align-items: stretch; }
.flow__card { flex: 1; background: #FFFFFF; box-shadow: var(--shadow); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--teal); }
.flow__card--mustard { border-top-color: var(--mustard); }
.flow__card p { font-size: 15px; color: var(--body); }
.flow__card p.muted { font-size: 14px; color: var(--muted); }
.flow__chips { margin-top: auto; }
.flow__card--deep { background: var(--deep); border-top-color: var(--deep); color: #FFFFFF; }
.flow__card--deep p { color: #FFFFFF; }
.flow__img { width: 100%; height: 150px; object-fit: cover; box-shadow: 0 0 0 3px var(--mustard); }

.pagedemo { display: flex; gap: 40px; background: var(--beige); padding: 30px; }
.pagedemo__media { flex: none; width: 520px; display: flex; flex-direction: column; gap: 12px; }
.pagedemo__frame { background: #E9ECEA; display: flex; justify-content: center; overflow: hidden; }
.dimphoto { left: 0; top: 0; width: 520px; height: 400px; overflow: hidden; }
.dimphoto__img { position: absolute; left: -7px; top: -315px; width: 525px; height: 789px; max-width: none; }
.dim { border-color: var(--teal-dark); border-style: solid; }
.dim--w { left: 127px; width: 265px; top: 366px; height: 10px; border-width: 0 2px 2px 2px; }
.dim--h { left: 408px; top: 31px; height: 328px; width: 10px; border-width: 2px 2px 2px 0; }
.dim--s { left: 98px; top: 163px; height: 196px; width: 10px; border-width: 2px 0 2px 2px; }
.dim__label { font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.dim__label--w { left: 127px; width: 265px; top: 378px; text-align: center; }
.dim__label--h { left: 426px; top: 186px; }
.dim__label--s { left: 22px; top: 248px; width: 70px; line-height: 1.3; font-size: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: 12px; font-weight: 700; color: var(--ink); }
.thumbs > div { display: flex; flex-direction: column; gap: 5px; }
.thumbs span { display: block; height: 64px; background-color: #E9ECEA; background-repeat: no-repeat; }
.thumbs__dim { position: relative; }
.thumbs__dim i, .minigal__img--dim i { position: absolute; left: 12px; right: 12px; top: 24px; height: 14px; border: 2px solid var(--teal-dark); border-top: 0; }
.is-picked { box-shadow: 0 0 0 3px var(--mustard); }
.pagedemo__info { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.pagedemo__info .record { grid-template-columns: 170px minmax(0, 1fr); gap: 10px 14px; }
.pagedemo__info .record .v-ok span { font-weight: 700; }
.pagedemo__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pagedemo__title .h3-serif { font-size: 28px; }
.oklist { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--teal-dark); font-weight: 700; }
.minigal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 10px; font-weight: 700; color: var(--ink); }
.minigal > div { display: flex; flex-direction: column; gap: 3px; }
.minigal__img { position: relative; display: block; height: 44px; background-color: var(--grey); background-repeat: no-repeat; }
.minigal__img--dim i { left: 6px; right: 6px; top: 16px; height: 10px; border-width: 1.5px; }

.aidemo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: stretch; }
.aidemo__compare { display: flex; flex-direction: column; gap: 14px; }
.legbox { top: 0; width: 300px; height: 260px; overflow: hidden; box-shadow: 0 0 0 3px #FFFFFF; }
.legbox--a { left: 0; }
.legbox--b { left: 320px; }
.legbox__img { position: absolute; width: 900px; height: 600px; left: -80px; top: -300px; max-width: none; }
.legbox__leg { position: absolute; left: 92px; top: 145px; width: 20px; height: 50px; background: #1E1E1E; clip-path: polygon(0 0, 100% 0, 80% 100%, 25% 100%); }
.legbox__ring { position: absolute; left: 66px; top: 124px; width: 70px; height: 92px; border: 4px solid var(--mustard); border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF; }
.legbox__cap { top: 272px; font-size: 14px; }
.legbox__cap--a { left: 0; }
.legbox__cap--a b { color: var(--teal-dark); }
.legbox__cap--b { left: 320px; }
.legbox__cap--b b { color: var(--brown); }
.hold { display: flex; align-items: center; gap: 14px; background: var(--mustard-tint); padding: 14px 18px; }
.hold__badge { padding: 6px 12px; background: var(--brown); color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; flex: none; }
.hold p { font-size: 15px; color: var(--ink); }
.aidemo__record { background: #FFFFFF; box-shadow: var(--shadow); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; border-top: 5px solid var(--teal); }
.files { display: flex; flex-direction: column; font-size: 13px; margin-top: 6px; }
.files__row { display: grid; grid-template-columns: 1.6fr .9fr 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEEEEE; }
.files__row:last-child { border-bottom: 0; }
.files__row--head { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 0; border-bottom-color: var(--line); }
.files__row span:first-child { overflow-wrap: anywhere; }
.files__ok { color: var(--teal-dark); font-weight: 700; }
.files__hold { color: var(--brown); font-weight: 700; }
.aidemo__record .muted:last-child { margin-top: auto; }

/* ---------- About ---------- */
.stage--about .blob { left: 0; top: 74px; width: 520px; height: 520px; }
.stage--about .dot { left: 600px; top: 0; }
.yearcard { left: 140px; top: 14px; width: 440px; height: 440px; background: #FFFFFF; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .5); overflow: hidden; }
.yearcard__stage { position: absolute; inset: 0; opacity: 0; }
.yearcard__photo { position: absolute; left: 0; right: 0; top: 0; height: 330px; background-size: cover; }
.yearcard__label { position: absolute; left: 132px; top: 356px; font-size: 20px; font-weight: 700; color: var(--black); }
.yearcard__dial { position: absolute; left: 22px; top: 342px; width: 100px; height: 72px; overflow: hidden; font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--teal); }
.dial span { display: block; height: 72px; line-height: 72px; }
.yearcard__sub { position: absolute; left: 132px; top: 386px; font-size: 13px; color: var(--muted); }
.ov { position: absolute; }
.ov--chips { left: 14px; bottom: 14px; right: 60px; display: flex; flex-wrap: wrap; gap: 6px; }
.ov--stack { left: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ov--banner { left: 0; right: 0; bottom: 0; background: var(--mustard); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.ov--banner span { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--black); }
.ov--banner b { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--deep); }
.ov--article { left: 14px; right: 60px; bottom: 14px; background: #FFFFFF; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .4); }
.ov--article span { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--black); }
.ov--article i { display: block; height: 6px; background: #E6E6E6; width: 92%; }
.ov--article i + i { width: 70%; }
.split--work { grid-template-columns: 500px minmax(0, 1fr); gap: 90px; align-items: center; }
.callout { background: #FFFFFF; padding: 18px 20px; border-left: 5px solid var(--mustard); font-size: 16px; color: var(--ink); }
.svc-list { display: flex; flex-direction: column; }
.svc-list .label { margin-bottom: 6px; }
.svc-list a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #E3DED6; text-decoration: none; color: var(--black); font-family: var(--serif); font-size: 22px; font-weight: 700; }
.svc-list a b { color: var(--teal); font-size: 20px; transition: transform .2s; }
.svc-list a:hover b { transform: translateX(4px); }
.know { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.know__card { display: flex; flex-direction: column; gap: 8px; }
.know__card h3 { margin-top: 12px; }
.know__card p { font-size: 15px; color: #555555; }
.know__media { height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.know__media--teal { background: var(--teal); }
.know__media--mustard { background: var(--mustard); }
.know__under { font-size: 12px; font-weight: 700; color: #FFFFFF; margin-top: -20px; }
.knowdim { position: relative; width: 170px; height: 170px; background-size: 260% auto; background-position: 50% 72%; box-shadow: 0 0 0 5px #FFFFFF; background-color: #E9ECEA; }
.knowdim i { position: absolute; border: 2px solid var(--teal-dark); }
.knowdim__w { left: 36px; right: 36px; bottom: 12px; height: 8px; border-top: 0 !important; }
.knowdim__h { right: 12px; top: 26px; bottom: 26px; width: 8px; border-left: 0 !important; }
.knoworder { display: flex; gap: 8px; align-items: flex-end; }
.knoworder > div { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 11px; color: var(--ink); }
.knoworder__img { width: 58px; height: 58px; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #FFFFFF; }
.knoworder__img--lead { width: 78px; height: 78px; box-shadow: 0 0 0 4px var(--deep); }
.knoworder__img--none { background: #F1E3C8; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--brown); font-weight: 700; text-align: center; }
.knowrug { position: relative; width: 200px; height: 160px; background-size: cover; background-position: center; box-shadow: 0 0 0 5px #FFFFFF; }
.knowrug__chips { position: absolute; left: -14px; bottom: -14px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.knowicons { display: grid; grid-template-columns: repeat(2, 96px); gap: 12px 8px; }
.knowicons > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--ink); }
.knowicons span { width: 56px; height: 56px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .4); }
.knowicons svg { width: 30px; height: 30px; fill: none; stroke: var(--teal-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.facts { display: flex; align-items: flex-start; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.facts > div { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts b { font-size: 15px; color: #FFFFFF; }
.facts span { font-size: 14px; color: var(--mist); }
.facts .link { flex: none; margin-left: 12px; white-space: nowrap; }
.starfish { display: flex; gap: 70px; align-items: center; }
.starfish .logo-tag { flex: none; }
.starfish > div { display: flex; flex-direction: column; gap: 16px; max-width: 940px; }

/* ---------- Pricing ---------- */
.stage--price .blob { left: 10px; top: 0; width: 500px; height: 500px; }
.ratecard { left: 20px; top: 60px; width: 300px; background: var(--deep); color: #FFFFFF; padding: 26px 28px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); display: flex; flex-direction: column; }
.ratecard__big { font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1; margin-top: 10px; }
.ratecard__sub { font-size: 16px; color: var(--mist); margin-top: 6px; }
.ratecard__ok { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; }
.minilog { left: 190px; top: 260px; width: 320px; background: #FFFFFF; padding: 18px 20px; box-shadow: var(--shadow); }
.minilog .h3-serif { font-size: 18px; display: block; margin-bottom: 8px; }
.minilog div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #EEEEEE; }
.minilog div:last-child { border-bottom: 0; }
.bigsteps { display: flex; gap: 18px; align-items: stretch; }
.bigsteps__card { flex: 1; background: #FFFFFF; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 40px -26px rgba(20, 25, 29, .35); }
.bigsteps__card p { font-size: 15px; color: var(--body); }
.bigsteps__num { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: #FFFFFF; font-family: var(--serif); font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bigsteps__num--0 { background: var(--mustard); color: var(--ink); }
.bigsteps__num--3 { background: var(--deep); }
.bigsteps__arrow { width: 36px; height: 36px; }
.rate { display: flex; gap: 40px; align-items: stretch; }
.rate__card { position: relative; overflow: hidden; flex: none; width: 420px; background: var(--deep); color: #FFFFFF; padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.rate__blob { position: absolute; right: -90px; bottom: -110px; width: 260px; height: 260px; }
.rate__nums { position: relative; display: flex; gap: 28px; align-items: baseline; font-family: var(--serif); font-weight: 700; font-size: 56px; line-height: 1; }
.rate__aud { font-size: 40px; color: var(--mint); }
.rate__unit { position: relative; font-size: 16px; color: var(--mist); }
.rate__card p { position: relative; font-size: 16px; max-width: 300px; }
.rate__list { flex: 1; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--teal); padding-top: 20px; }
.rate__list--mustard { border-top-color: var(--mustard); }
.rate__list h3 { font-size: 20px; font-weight: 700; color: var(--black); }
.rate__list ul { display: flex; flex-direction: column; gap: 10px; }
.rate__list li { position: relative; padding-left: 22px; font-size: 17px; }
.rate__list li::before { content: '•'; position: absolute; left: 4px; color: var(--teal); font-weight: 700; }
.rate__list--mustard li::before { content: '✓'; left: 0; color: var(--mustard); }
.control { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 60px; }
.control > div { display: flex; flex-direction: column; gap: 18px; }
.control .h2 { font-size: clamp(28px, 3vw, 40px); }
.capcard { margin-top: 14px; background: #FFFFFF; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.capcard__note { background: var(--teal-tint); padding: 10px 12px; font-size: 14px; }
.sec--deep .capcard__note { color: var(--deep); }
.control .log { margin-top: 14px; }
.control .log__row { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.25fr) 70px; gap: 0 14px; font-size: 13px; }
.ways { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.ways__item { display: flex; flex-direction: column; gap: 12px; }
.ways__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--teal-tint); }
.ways__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ways__icon--mustard { background: var(--mustard-tint); }
.ways__icon--mustard svg { stroke: var(--brown); }
.ways__item h3 { font-size: 18px; font-weight: 700; color: var(--black); }
.ways__item p { font-size: 15px; color: var(--body); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.faq__item { background: #FFFFFF; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--teal); }
.faq__item--mustard { border-left-color: var(--mustard); }
.faq__item h3 { font-size: 18px; font-weight: 700; color: var(--black); }
.faq__item p { font-size: 15px; color: var(--body); }

/* ---------- Contact ---------- */
.hero--contact { padding-bottom: 96px; }
.contact__blob { position: absolute; right: -140px; bottom: -200px; width: 560px; height: 560px; }
.hero--contact .hero__grid { align-items: start; }
.next__head { margin-top: 24px; font-size: 14px; }
.next { display: flex; flex-direction: column; gap: 14px; }
.next li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; color: var(--body); }
.next li span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #FFFFFF; font-family: var(--serif); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: -5px; }
.next li .next__last { background: var(--mustard); color: var(--ink); }
.formcard { position: relative; z-index: 1; background: #FFFFFF; padding: 34px 36px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .4); justify-self: end; width: min(100%, 520px); }
.formcard form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field textarea { width: 100%; border: 1px solid #D6D6D6; background: #FFFFFF; padding: 12px 14px; font: inherit; font-weight: 400; font-size: 15px; color: var(--ink); border-radius: 0; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.field ::placeholder { color: #9A9A9A; }
.formcard .btn { margin-top: 6px; }
.formcard__small { font-size: 13px; color: var(--muted); }
.formcard__error { background: var(--mustard-tint); color: var(--brown); padding: 10px 12px; font-size: 14px; font-weight: 700; }
.formcard__done { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.formcard__tick { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.formcard__tick .ico-check { width: 24px; height: 24px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.phases { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.phases::before { content: ''; position: absolute; left: 22px; right: 22px; top: 21px; height: 3px; background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 75%, var(--mustard) 100%); }
.phases__item { position: relative; display: flex; flex-direction: column; gap: 12px; }
.phases__num { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #FFFFFF; font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--beige); }
.phases__item--last .phases__num { background: var(--mustard); color: var(--ink); }
.phases__card { flex: 1; background: #FFFFFF; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--teal); }
.phases__item--last .phases__card { border-top-color: var(--mustard); }
.phases__card .h3-serif { font-size: 20px; }
.phases__card p { font-size: 15px; color: var(--body); }

/* ---------- Generic pages ---------- */
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; }

/* ---------- Motion ---------- */
@keyframes sway { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(7deg) scale(1.04); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes swingIn { 0% { transform: rotate(-16deg); opacity: 0; } 15% { opacity: 1; } 40% { transform: rotate(9deg); } 65% { transform: rotate(-4deg); } 85% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: translateY(10px) scale(.85); } 4% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
@keyframes before { 0%, 34% { opacity: 1; } 37%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes after { 0%, 37% { opacity: 0; transform: translateY(6px); } 41%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes loopin { 0%, 44% { opacity: 0; transform: translateY(14px); } 48%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes stage { 0% { opacity: 0; transform: translateY(8px); } 3% { opacity: 1; transform: none; } 19% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; } }
@keyframes dial { 0%, 19% { transform: translateY(0); } 21% { transform: translateY(-78px); } 22%, 39% { transform: translateY(-72px); } 41% { transform: translateY(-150px); } 42%, 59% { transform: translateY(-144px); } 61% { transform: translateY(-222px); } 62%, 79% { transform: translateY(-216px); } 81% { transform: translateY(-294px); } 82%, 99% { transform: translateY(-288px); } 100% { transform: translateY(0); } }
@keyframes fill { from { width: 0; } to { width: var(--to); } }

.sway { transform-origin: 50% 50%; animation: sway 14s ease-in-out infinite; }
.bob { animation: bob 6s ease-in-out infinite; }
.swing { animation: swingIn 2.6s ease-out .3s both; }
.rise { animation: rise .7s ease-out 2.4s both; }
.pop { opacity: 0; animation: pop 12s infinite both; animation-delay: var(--d); }
.swap__before { animation: before 12s infinite; }
.swap__after { opacity: 0; animation: after 12s infinite; }
.loopin { opacity: 0; animation: loopin 12s infinite; }
.yearcard__stage { animation: stage 20s infinite both; animation-delay: var(--d); }
.dial { animation: dial 20s infinite; }

/* Scroll reveal (JS adds .js to <html> and .is-in when visible). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .log .log__row:not(.log__row--head) { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(200ms + var(--i, 0) * 140ms); }
.js .log.is-in .log__row { opacity: 1; transform: none; }
.js .meter__fill { width: 0; transition: width 1.6s cubic-bezier(.2, .7, .2, 1) .6s; }
.js .is-in .meter__fill, .js .meter.is-in .meter__fill { width: var(--to); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sway, .bob, .swing, .rise, .pop, .swap__before, .swap__after, .loopin, .dial, .yearcard__stage { animation: none !important; }
	.pop, .swap__after, .loopin, .rise { opacity: 1; }
	.swap__before { opacity: 0; }
	.yearcard__stage { opacity: 0; }
	.yearcard__stage:nth-of-type(5) { opacity: 1; }
	.dial { transform: translateY(-288px); }
	.js .reveal, .js .log .log__row { opacity: 1; transform: none; transition: none; }
	.js .meter__fill { width: var(--to); transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
	.site-nav { gap: 28px; }
	.site-nav__link { letter-spacing: 1.5px; font-size: 13px; }
	.split--audience, .split--work { grid-template-columns: 420px minmax(0, 1fr); gap: 56px; }
	.split--proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
	.split--log { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
	.svc, .know { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pagedemo__media { width: 440px; }
}

@media (max-width: 980px) {
	.site-header__inner { height: 76px; padding: 0 16px; }
	.brand .logo-tag { width: 60px; height: auto; }
	.brand__name { font-size: 20px; }
	.nav-toggle { display: block; }
	.site-nav { position: absolute; left: 0; right: 0; top: 76px; background: #FFFFFF; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .3); display: none; max-height: calc(100vh - 76px); overflow: auto; }
	.site-nav.is-open { display: flex; }
	.site-nav__link { padding: 16px 0; border-bottom: 1px solid #EEEEEE; font-size: 14px; letter-spacing: 2px; justify-content: space-between; width: 100%; }
	.site-nav__menu { position: static; box-shadow: none; border: 0; min-width: 0; padding: 0 0 8px; display: none; opacity: 1; visibility: visible; transform: none; }
	.site-nav__item--drop.is-open .site-nav__menu { display: block; }
	.site-nav__menu a { padding: 12px 12px; }
	.site-nav .btn--small { margin-top: 18px; text-align: center; padding: 14px 16px; }
	.hero { padding: 64px 0 56px; }
	.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.hero__text { max-width: none; }
	.formcard { justify-self: stretch; width: 100%; }
	.split, .split--audience, .split--work, .split--proof, .split--log, .control { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ba, .flow, .bigsteps, .rate { flex-direction: column; }
	.ba .arrow, .flow .arrow, .bigsteps__arrow { transform: rotate(90deg); }
	.ba-foot, .aidemo, .faq { grid-template-columns: minmax(0, 1fr); }
	.scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; }
	.sec--deep .steps::before { width: 2px; }
	.steps__item { padding-left: 64px; }
	.steps__num { position: absolute; left: 0; top: -4px; }
	.phases { grid-template-columns: minmax(0, 1fr); }
	.phases::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; background: linear-gradient(180deg, var(--teal) 0%, var(--teal) 75%, var(--mustard) 100%); }
	.phases__item { flex-direction: row; gap: 18px; }
	.phases__num { flex: none; }
	.commercial { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.commercial__rate, .commercial__cap { padding: 0; border: 0; }
	.pagedemo { flex-direction: column; padding: 20px; }
	.pagedemo__media { width: 100%; }
	.rate__card { width: 100%; }
	.facts { flex-wrap: wrap; gap: 18px 0; }
	.facts > div { flex: 1 1 45%; padding: 0 16px 0 0; border-left: 0; }
	.facts .link { margin: 6px 0 0; }
	.starfish { flex-direction: column; align-items: flex-start; gap: 28px; }
	.starfish .logo-tag { width: 120px; height: auto; }
	.cta__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
	.site-footer__inner { flex-direction: column; }
	.site-footer__cols { gap: 48px; }
	.log { padding: 22px 20px; }
}

@media (max-width: 640px) {
	.wrap { width: calc(100% - 32px); }
	.sec { padding: 64px 0; }
	.sec__head { margin-bottom: 28px; }
	.lead { font-size: 17px; }
	.actions { flex-direction: column; align-items: flex-start; }
	.btn { padding: 16px 22px; }
	.svc, .know, .scope, .uses, .ways { grid-template-columns: minmax(0, 1fr); }
	.catgrid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; }
	.log__row:not(.log__row--head) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date time" "task task" "out out"; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid #F0F0F0; }
	.log__row--head { display: none; }
	.log__date { grid-area: date; font-size: 13px; }
	.log__time { grid-area: time; }
	.log__task { grid-area: task; }
	.log__out { grid-area: out; color: #555555; }
	.log__row--decision { padding: 10px; }
	.control .log__row:not(.log__row--head) { grid-template-columns: minmax(0, 1fr) auto; }
	.record, .pagedemo__info .record { grid-template-columns: 120px minmax(0, 1fr); font-size: 14px; }
	.files__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.files__row--head { display: none; }
	.timeline__end b { font-size: 24px; }
	.related { flex-direction: column; gap: 14px; }
	.site-footer__cols { flex-direction: column; gap: 32px; }
	.facts > div { flex-basis: 100%; }
	.formcard { padding: 24px 20px; }
	.knowicons { grid-template-columns: repeat(2, 84px); }
	.pagedemo__title { flex-direction: column; gap: 2px; }
}

/* Keep content above decorative blobs. */
.sec--blobbed > .wrap, .sec--deep > .wrap { position: relative; z-index: 1; }