/* Public pages: home, Insights, sample project, pricing, Studio, about and the brief.
   Builds on styles.css. Account and checkout pages don't load this file. */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Tables ignore width, so the hidden chart tables are made blocks and pinned to the chart. */
table.sr-only { display:block; left:0; top:0; }
.section h2 { font-size:clamp(2rem,3.5vw,3rem); line-height:1.13; }
.section h2 em, h1 em, .cta-band h2 em { font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.035em; }
.section-tint { background:#eeece5; }
.section-flush { border-top:0; padding-top:0; }
.section-dark { background:var(--charcoal); color:var(--ivory); border-top:0; }
.section-dark .eyebrow { color:#d1d4c7; }
.section-dark a { color:var(--ivory); }
.lede { font-size:clamp(1.08rem,1.4vw,1.25rem); line-height:1.6; color:var(--text-2); max-width:44ch; }
.text-link { font-size:.95rem; font-weight:500; }
.btn-row { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:2rem; }
.btn-row .btn, .hero-actions .btn { gap:1rem; }
.btn-light { background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
.btn-light:hover { background:var(--white); }

/* Header: the nav is the map of the site. */
.nav { gap:1.8rem; }
.nav a[aria-current="page"]:not(.btn) { text-decoration:underline; text-decoration-color:var(--olive); text-decoration-thickness:2px; text-underline-offset:8px; }
.nav .btn-dark { color:var(--ivory); }
@media (max-width:960px) and (min-width:721px) { .nav { gap:1.1rem; font-size:.9rem; } .nav .btn { padding-inline:1rem; } }

/* Account links sit between the page links and the main button. */
.nav-account { display:flex; align-items:center; gap:1.2rem; padding-left:1.4rem; border-left:1px solid var(--line); }
@media (max-width:1180px) and (min-width:721px) { .nav { gap:1rem; font-size:.88rem; } .nav-account { gap:.8rem; padding-left:1rem; } .nav .btn { padding-inline:.9rem; } }
@media (max-width:1000px) and (min-width:721px) { .top .wrap { flex-wrap:wrap; padding-block:.6rem; } .nav { width:100%; justify-content:space-between; } }
@media (max-width:720px) {
  .nav-account { flex-direction:column; align-items:stretch; gap:0; padding-left:0; border-left:0; }
  .nav-account a:not(.btn) { padding-block:.85rem; border-bottom:1px solid var(--line); }
  .nav-account .btn { margin-top:1rem; }
}

/* Hero with a live chart */
.hero-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(2.5rem,6vw,5.5rem) clamp(2.5rem,5vw,4rem); }
.hero-text h1 { font-size:clamp(2.6rem,4.6vw,4.3rem); line-height:1.05; letter-spacing:-.045em; max-width:15ch; }
.hero-text .lede { margin:1.6rem 0 2rem; }
.hero-note { margin-top:1.4rem; font-size:.88rem; color:var(--text-2); max-width:42ch; }
.hero-link { font-size:.95rem; font-weight:500; padding-block:.75rem; }
.page-hero { padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem); }
.page-hero h1 { font-size:clamp(2.6rem,5vw,4.5rem); line-height:1.05; letter-spacing:-.045em; max-width:18ch; }
.page-hero .lede { margin:1.5rem 0 0; max-width:52ch; }
.page-hero .hero-actions { margin-top:2rem; }
.page-hero .hero-note { margin-top:1.2rem; }
.page-hero-tight { padding-bottom:2rem; }

/* Chart cards */
.chart-card { margin:0; min-width:0; background:var(--white); border:1px solid var(--line); padding:clamp(1rem,2.5vw,1.8rem); display:grid; gap:.8rem; align-content:start; }
.chart-card-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; }
.chart-kicker { font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); display:flex; align-items:center; gap:.5rem; }
.chart-kicker::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--olive); }
.chart-title { font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.25; max-width:30ch; }
.chart-card figcaption { font-size:.75rem; line-height:1.5; color:var(--text-2); border-top:1px solid var(--line); padding-top:.8rem; }
.chart-tabs { display:flex; border:1px solid var(--line); }
.chart-tabs button { font:500 .78rem var(--sans); padding:.45rem .8rem; background:transparent; border:0; color:var(--text-2); cursor:pointer; min-height:2.2rem; }
.chart-tabs button + button { border-left:1px solid var(--line); }
.chart-tabs button[aria-selected="true"] { background:var(--charcoal); color:var(--ivory); }
.chart { position:relative; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart text { font-family:var(--sans); font-variant-numeric:tabular-nums; }
.c-axis { font-size:12px; fill:var(--text-2); }
.c-cat { font-size:13px; fill:var(--charcoal); }
.c-val { font-size:13px; font-weight:600; fill:var(--charcoal); }
.c-note { font-size:12px; fill:var(--olive); font-weight:600; }
.c-label { font-size:13px; font-weight:600; fill:var(--charcoal); }
.c-label-2 { fill:var(--olive); }
.c-grid { stroke:var(--line); stroke-width:1; }
.c-band { fill:#eeece5; }
.c-line { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.c-line-1 { stroke:var(--charcoal); }
.c-line-2 { stroke:var(--olive); stroke-dasharray:5 4; }
.c-dot { stroke:var(--white); stroke-width:2; }
.c-dot-1 { fill:var(--charcoal); } .c-dot-2 { fill:var(--olive); }
.c-cross { stroke:var(--text-2); stroke-width:1; }
.c-bar { fill:var(--charcoal); }
.c-bar-focus, .c-bar-pos { fill:var(--olive); }
.c-bar-neg { fill:#a8a597; }
.c-hit { fill:transparent; cursor:crosshair; outline:none; }
.c-hit:focus-visible { stroke:var(--charcoal); stroke-width:1; stroke-dasharray:3 3; }
.chart-tip { position:absolute; transform:translate(-50%,-100%); background:var(--charcoal); color:var(--ivory); font-size:.78rem; line-height:1.45; padding:.5rem .7rem; pointer-events:none; display:grid; white-space:nowrap; z-index:2; box-shadow:0 4px 14px #0002; }
.chart-tip[hidden] { display:none; }
.chart-tip b { font-weight:600; }
.chart-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); }
.chart-source { margin-top:1.2rem; }
@media (max-width:680px) { .c-axis { font-size:16px; } .c-cat, .c-val, .c-label { font-size:17px; } .c-note { font-size:15px; } }

/* Platforms */
.platform-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.platform-strip .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 2rem; padding-block:1.3rem; }
.platform-strip span { font-size:.8rem; color:var(--text-2); }
.platform-strip ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 2rem; }
.platform-strip li { font-family:var(--serif); font-size:1.15rem; font-style:italic; }

/* What we do */
.offer-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1rem,2.5vw,2rem); }
.offer { display:flex; flex-direction:column; gap:1.1rem; padding:clamp(1.4rem,3vw,2.4rem); border:1px solid var(--line); background:var(--white); }
.offer-main { background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.offer-main .offer-tag, .offer-main .ticks li::before { color:#c4ccb2; }
.offer-main p:not(.offer-tag):not(.offer-price) { color:#d6d8cf; }
.offer-main .btn-dark { background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }
.offer-main a { color:var(--ivory); }
.offer h3 { font-size:clamp(1.6rem,2.4vw,2.1rem); font-weight:400; }
.offer-tag { font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.offer-price { margin-top:auto; font-size:.95rem; }
.offer-price b { font-size:1.8rem; font-weight:400; margin-inline:.2rem; }
.offer-links { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }
.ticks { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.95rem; }
.ticks li { position:relative; padding-left:1.5rem; }
.ticks li::before { content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.4rem; border-left:2px solid; border-bottom:2px solid; color:var(--olive); transform:rotate(-45deg); background:transparent !important; }
.ticks-muted li::before { color:var(--text-2); }

.questions { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:0 clamp(1.2rem,2.5vw,2rem); border-top:1px solid var(--charcoal); }
.questions li { font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,1.9vw,1.55rem); line-height:1.3; padding-block:1.2rem; border-bottom:1px solid var(--line); }

/* Sample preview */
.sample-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.stat-list { margin:2rem 0 0; display:grid; border-top:1px solid var(--charcoal); }
.stat-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1rem; padding-block:1rem; border-bottom:1px solid var(--line); }
.stat-list dt { font-size:.85rem; color:var(--text-2); }
.stat-list dd { margin:0; font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.4rem); line-height:1; grid-row:span 2; align-self:center; text-align:right; font-variant-numeric:lining-nums tabular-nums; }
.stat-list dd span { font-size:.5em; color:var(--text-2); font-style:italic; }
.stat-list p { font-size:.92rem; }

/* Steps */
.steps-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.5rem; counter-reset:t; }
.timeline li { counter-increment:t; border-top:2px solid var(--charcoal); padding-top:1rem; display:grid; gap:.5rem; align-content:start; }
.timeline li::before { content:counter(t); font-family:var(--serif); font-size:2rem; line-height:1; color:var(--olive); }
.timeline p { font-size:.93rem; color:var(--text-2); }

/* Pricing teaser */
.price-mini { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.price-mini-item { background:var(--white); padding:clamp(1.2rem,2.5vw,1.8rem); display:grid; gap:.4rem; text-decoration:none; transition:background-color .2s; }
.price-mini-item:hover { background:#fbfaf7; }
.price-mini-item span { font-weight:500; }
.price-mini-item b { font-size:2.4rem; font-weight:400; line-height:1.1; font-variant-numeric:lining-nums tabular-nums; }
.price-mini-item b i { font-size:.4em; font-style:normal; color:var(--text-2); margin-left:.2rem; }
.price-mini-item small { color:var(--text-2); font-size:.88rem; }
.pilot-note { margin-top:1.6rem; padding:1.1rem 1.3rem; background:var(--white); border-left:2px solid var(--olive); max-width:52rem; }
.pilot-note b { font-weight:600; }

/* About block */
.about { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,7vw,7rem); align-items:center; }
.about-title { max-width:24rem; font-size:clamp(2.2rem,4vw,3.7rem) !important; line-height:1.08; }
.about-copy { display:grid; gap:1.2rem; max-width:38rem; border-left:1px solid var(--line); padding-left:clamp(1.5rem,4vw,3.5rem); }
.section-dark .about-copy { border-left-color:#ffffff30; }
.about-copy .intro { font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.45; max-width:30ch; }
.about-copy > p:not(.intro) { color:var(--text-2); }
.section-dark .about-copy > p:not(.intro) { color:#d1d4c7; }

/* Call to action band */
.cta-band { background:var(--charcoal); color:var(--ivory); padding-block:clamp(3rem,7vw,5.5rem); }
.section-dark + .cta-band { border-top:1px solid #ffffff22; }
.cta-band .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:2rem; }
.cta-band h2 { font-size:clamp(2rem,3.6vw,3.2rem); max-width:18ch; line-height:1.1; }
.cta-band p { color:#d1d4c7; max-width:48ch; margin-top:1rem; }
.cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.cta-link { color:var(--ivory); font-weight:500; }

/* Insights page */
.deliverables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.deliverables article { background:var(--white); padding:clamp(1.2rem,2.5vw,1.8rem); display:grid; gap:.6rem; align-content:start; }
.deliverables span { font-family:var(--serif); font-size:1.6rem; color:var(--olive); line-height:1; }
.deliverables p { font-size:.95rem; color:var(--text-2); }
.deliverable-extra { background:#fbfaf7 !important; }
.look-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem clamp(1.5rem,4vw,3rem); }
.look-grid > div { border-top:1px solid var(--charcoal); padding-top:1.1rem; display:grid; gap:.5rem; align-content:start; }
.look-grid p { color:var(--text-2); font-size:.95rem; }
.two-col { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.prose { display:grid; gap:1.1rem; max-width:40rem; font-size:1.05rem; }
.prose p { color:var(--text-2); }
.prose b { color:var(--charcoal); font-weight:600; }
.faq { border-top:1px solid var(--charcoal); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; font-weight:500; font-size:1.05rem; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--olive); }
.faq details[open] summary::after { content:"−"; }
.faq details p { padding-bottom:1.2rem; color:var(--text-2); max-width:48rem; }

/* Sample page */
.kpi-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:clamp(3rem,6vw,5rem); }
.kpi-row > div { background:var(--white); padding:clamp(1rem,2.5vw,1.6rem); display:grid; gap:.3rem; }
.kpi-row b { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; font-variant-numeric:lining-nums tabular-nums; }
.kpi-row span { font-size:.9rem; }
.kpi-row small { font-size:.8rem; color:var(--text-2); }
.finding-row { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.finding-copy p:not(.eyebrow) { color:var(--text-2); margin-top:1.2rem; max-width:42ch; }
.table-wrap { overflow-x:auto; margin-top:1rem; }
.data-table { width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); font-size:.95rem; }
.data-table caption { text-align:left; font-weight:500; font-size:1.1rem; padding:2rem 0 .8rem; }
.data-table th { text-align:left; font-weight:500; font-size:.8rem; letter-spacing:.04em; color:var(--text-2); padding:.9rem 1rem; border-bottom:1px solid var(--charcoal); }
.data-table td { padding:1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table td span { display:block; color:var(--text-2); font-size:.88rem; margin-top:.2rem; }
.data-table .n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.data-table td.n { font-family:var(--serif); font-size:1.3rem; }
.table-note { margin-top:1rem; max-width:52rem; }
.std-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.std-grid > div { display:grid; gap:1rem; align-content:start; border-top:1px solid var(--charcoal); padding-top:1.1rem; }

/* Pricing page */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); align-items:stretch; }
.plans-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:56rem; }
.plan { position:relative; background:var(--white); border:1px solid var(--line); padding:clamp(1.4rem,2.5vw,2rem); display:flex; flex-direction:column; gap:1.1rem; }
.plan-featured { border:2px solid var(--charcoal); }
.plan-badge { position:absolute; top:0; left:clamp(1.4rem,2.5vw,2rem); transform:translateY(-50%); background:var(--charcoal); color:var(--ivory); font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .7rem; }
.plan h3 { font-size:1.5rem; }
.plan-price { display:flex; align-items:baseline; gap:.5rem; }
.plan-price b { font-size:3rem; font-weight:400; line-height:1; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.03em; }
.plan-price span { color:var(--text-2); font-size:.95rem; }
.plan-line { color:var(--text-2); min-height:3.2em; }
.plan .btn { width:100%; }
.plan .ticks { border-top:1px solid var(--line); padding-top:1.1rem; }
.plan-foot { margin-top:auto; font-size:.82rem; color:var(--text-2); border-top:1px solid var(--line); padding-top:.9rem; }
.pilot-banner { margin-top:clamp(1.5rem,3vw,2.2rem); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem 2rem; padding:1.3rem 1.5rem; background:#e4e7da; border-left:3px solid var(--olive); }
.pilot-banner p { max-width:60ch; }
.pilot-banner b { font-weight:600; }

/* Brief page */
.contact { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); }
.contact-copy { display:grid; gap:1.2rem; align-content:start; }
.h3 { font-size:1.3rem; font-weight:500; }
.next-steps { margin:0; padding-left:1.2rem; display:grid; gap:.7rem; color:var(--text-2); }
.form { background:var(--white); border:1px solid var(--line); padding:clamp(1.2rem,3vw,2.2rem); }

/* Footer */
.site-foot { background:#eeece5; border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem) 2rem; }
.foot-grid { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)); gap:2rem; }
.foot-grid > div { display:grid; gap:.55rem; align-content:start; font-size:.92rem; }
.foot-grid h2 { font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin-bottom:.4rem; }
.foot-grid a { text-decoration:none; }
.foot-grid a:hover { text-decoration:underline; }
.foot-brand p { color:var(--text-2); max-width:30ch; }
.foot-brand .wordmark img { height:30px; }
.site-foot .foot-note { margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }

/* Studio page (kept from the earlier homepage) */
.studio-hero { display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2rem,5vw,5rem); padding-block:clamp(2.5rem,5vw,5rem); align-items:center; }
.studio-intro h1 { font-size:clamp(2.8rem,4.6vw,4.5rem); line-height:1.06; letter-spacing:-.045em; }
.studio-intro .lede { margin:1.6rem 0 2rem; }
.transformation { margin:0; min-width:0; }
.comparison { position:relative; overflow:hidden; aspect-ratio:5/4; background:var(--tint); isolation:isolate; }
.comparison img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparison-before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.compare-tag { position:absolute; top:1rem; background:var(--ivory); color:var(--charcoal); padding:.25rem .65rem; font-size:.7rem; letter-spacing:.04em; }
.tag-before { left:1rem; } .tag-after { right:1rem; }
.compare-divider { position:absolute; inset:0 auto 0 var(--split); width:1px; background:var(--ivory); pointer-events:none; }
.compare-divider span { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--ivory); color:var(--charcoal); font-size:1.1rem; box-shadow:0 2px 12px #0002; }
.compare-control { display:flex; gap:1rem; align-items:center; padding:.8rem 0 .35rem; }
.compare-control[hidden] { display:none; }
.compare-control label { white-space:nowrap; font-size:.75rem; }
.compare-control input { accent-color:var(--charcoal); min-height:2rem; height:2rem; padding:0; border:0; background:transparent; cursor:ew-resize; }
.comparison.is-interactive { cursor:ew-resize; touch-action:pan-y; }
.transformation figcaption { font-size:.7rem; color:var(--text-2); line-height:1.5; margin-top:.3rem; }
.services { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; border:0; }
.service { display:flex; flex-direction:column; gap:1.5rem; padding:0 0 2rem; min-width:0; border-bottom:1px solid var(--charcoal); }
.service h3 { font-size:1.65rem; }
.service .meta { margin-top:.5rem; } .service ul { font-size:.94rem; }
.price { margin-top:auto; width:100%; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.6rem; }
.price b { font-size:2rem; } .price a { margin:0; }
.package-preview { margin:0; width:100%; background:var(--tint); }
.package-preview > img, .launch-board { width:100%; height:auto; aspect-ratio:1.7; object-fit:cover; }
.package-preview figcaption { display:flex; justify-content:space-between; gap:.5rem; font-size:.7rem; padding:.7rem .9rem; border-top:1px solid var(--line); }
.package-preview figcaption span { color:var(--text-2); }
.launch-board { display:grid; grid-template-columns:1fr .8fr; overflow:hidden; }
.launch-board img { width:100%; height:100%; object-fit:cover; min-height:0; }
.launch-note { background:#d9decd; padding:clamp(.8rem,2vw,1.6rem); display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; }
.launch-note > span { font-size:.55rem; letter-spacing:.13em; } .launch-note em { font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2.4rem); line-height:1.04; } .launch-note small { font-size:.6rem; }

/* Smaller screens */
@media (max-width:1000px) {
  .steps-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-brand { grid-column:1 / -1; }
}
@media (max-width:860px) {
  .hero-split, .sample-split, .offer-grid, .chart-pair, .two-col, .finding-row, .studio-hero, .contact, .about, .std-grid, .plans, .plans-2 { grid-template-columns:minmax(0,1fr); }
  .deliverables, .look-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .price-mini { grid-template-columns:minmax(0,1fr); }
  .services { grid-template-columns:minmax(0,1fr); gap:3rem; }
  .about-copy, .section-dark .about-copy { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:2rem; }
  .section-dark .about-copy { border-top-color:#ffffff30; }
  .plans { gap:2rem; }
  .plan-line { min-height:0; }
}
@media (max-width:600px) {
  .deliverables, .look-grid, .steps-4, .timeline { grid-template-columns:minmax(0,1fr); }
  .section { padding-block:3.5rem; }
  .hero-text h1, .page-hero h1, .studio-intro h1 { font-size:clamp(2.3rem,10vw,3rem); }
  .chart-tabs { width:100%; } .chart-tabs button { flex:1; padding-inline:.4rem; }
  .data-table thead { display:none; }
  .data-table tr { display:grid; border-bottom:1px solid var(--line); }
  .data-table td { border:0; padding:.5rem 1rem; }
  .data-table td.n { text-align:left; }
  .cta-band .btn { width:100%; }
}

/* "Every job. Done well." as a quiet, still line in the homepage hero. */
.hero-motto { display:flex; align-items:center; gap:.8rem; margin-top:1.8rem; font-size:1.15rem; color:var(--charcoal); }
.hero-motto::before { content:""; width:2rem; height:1px; background:var(--olive); }
.hero-motto em { font-family:var(--serif); font-style:italic; }

/* Scroll entrances. Only applied when site.js adds .motion, so nothing is
   hidden without JavaScript or for visitors who prefer less motion. */
.motion [data-anim] { transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.motion [data-anim="rise"]:not(.in) { opacity:0; transform:translateY(28px); }
.motion [data-anim="from-left"]:not(.in) { opacity:0; transform:translateX(-56px); }
.motion [data-anim="from-right"]:not(.in) { opacity:0; transform:translateX(56px); }
.motion [data-anim="zoom"]:not(.in) { opacity:0; transform:scale(.93); }
.motion [data-anim="float-in"] { transition-duration:1.2s; }
.motion [data-anim="float-in"]:not(.in) { opacity:0; transform:translateY(48px) rotate(-1.2deg) scale(.97); }
.motion [data-anim$="stagger"] { transition:none; }
.motion [data-anim$="stagger"] > * { transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 90ms); }
.motion [data-anim$="stagger"]:not(.in) > * { opacity:0; transform:translateY(26px); }
.motion [data-anim="rise-stagger"] > * { transition-duration:1s; transition-delay:calc(var(--i, 0) * 120ms + 100ms); }
.motion [data-anim="rise-stagger"]:not(.in) > * { transform:translateY(34px); }
@media (prefers-reduced-motion:reduce) {
  .motion [data-anim], .motion [data-anim] > * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Line illustrations. They draw themselves in with their section. */
.illo { display:block; width:100%; height:auto; fill:none; stroke:var(--charcoal); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.illo .draw { stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.25,1) .25s; }
.illo .illo-accent-line { stroke:var(--olive); stroke-width:2.4; transition-delay:.9s; }
.illo .illo-flow { stroke:var(--text-2); stroke-width:1.4; transition-delay:.6s; }
.illo .illo-soft { stroke:var(--line); }
.illo-bars rect { fill:var(--tint); stroke:none; transform-box:fill-box; transform-origin:center bottom; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.illo-bars rect:nth-child(2) { transition-delay:.1s; } .illo-bars rect:nth-child(3) { transition-delay:.2s; } .illo-bars rect:nth-child(4) { transition-delay:.3s; } .illo-bars rect:nth-child(5) { transition-delay:.4s; }
.illo .illo-accent { fill:var(--olive); }
.illo-cells rect, .illo .illo-cell-accent { fill:#68705a44; stroke:none; }
.illo-ping { fill:var(--olive); stroke:none; transform-box:fill-box; transform-origin:center; animation:illo-ping 2.6s ease-in-out infinite; }
.illo-sparkle { fill:var(--olive); stroke:none; }
.illo-float { animation:illo-float 4.5s ease-in-out infinite; }
.illo-float-late { animation-delay:-2s; }
.illo .illo-check-ring, .illo .illo-check { stroke:var(--olive); stroke-width:2.4; }
.illo .illo-check { transition-delay:1.2s; }
.illo-dots circle { fill:var(--olive); opacity:.55; stroke:none; animation:illo-drift 6s ease-in-out infinite alternate; }
.illo-dots circle:nth-child(3n) { animation-duration:7.5s; opacity:.35; }
.illo-dots circle:nth-child(3n+1) { animation-delay:-3s; }
.illo-dark { stroke:#d3d9c2; }
.illo-dark .illo-bars rect { fill:#ffffff1f; }
.illo-dark .illo-accent, .illo-dark .illo-ping { fill:#a9b58f; }
.illo-dark .illo-accent-line { stroke:#c4ccb2; }
.illo-dark .illo-flow { stroke:#8d9679; }
.illo-dark .illo-cells rect { fill:#a9b58f40; }
.illo-icon { width:3.2rem; margin-bottom:.4rem; }
.offer .illo { margin:-.2rem 0 .4rem; max-height:11rem; }
.page-hero-split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-illo { min-width:0; }
@keyframes illo-ping { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.8); opacity:.35; } }
@keyframes illo-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes illo-drift { from { transform:translate(0, 0); } to { transform:translate(14px, -8px); } }
.motion [data-anim]:not(.in) .illo .draw { stroke-dashoffset:1; }
.motion [data-anim]:not(.in) .illo-bars rect { transform:scaleY(0); }
@media (max-width:860px) { .page-hero-split { grid-template-columns:minmax(0,1fr); } .hero-illo { max-width:28rem; } }
@media (prefers-reduced-motion:reduce) { .illo *, .illo { animation:none !important; } }

/* Sideways entrances never make the page scroll sideways. */
main { overflow-x:clip; }

/* Four data commitments sit in a two by two grid. */
.promises { grid-template-columns:repeat(2,minmax(0,1fr)); }
.promises p { max-width:34rem; }
@media (max-width:600px) { .promises { grid-template-columns:minmax(0,1fr); } }