/* ==========================================================================
   site.css: the public website.
   Order: header · shared section pieces · home hero · tech strip · services ·
   work · promises · process · AI band + planner · pricing + estimator ·
   FAQ · reviews · contact · inner-page heroes · footer · assistant ·
   quick search · legal & error pages · print.
   App "screens" for the concept projects live in mockups.css.
   Colours come from the palette tokens in base.css (light and dark), so no rule
   here hard-codes the brand colour. Pill buttons, big rounded cards, code-window
   hero, process timeline, light footer. No tilted stickers, no hard offset shadows.
   Kept light on purpose (owner, 2026-11-01): no scroll-in animations, no blur
   filters, no blur behind the header on phones.
   ========================================================================== */

/* ---------------------------------------------------------------- header */

.scroll-progress { position: fixed; inset: var(--owner-h) 0 auto; height: 2px; z-index: 120; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--progress, 0)); }

.site-header { position: sticky; top: var(--owner-h); z-index: 100; height: var(--header-h); transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--bg); opacity: 0; transition: opacity .25s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { opacity: 1; }
/* Never put backdrop-filter (or transform/filter) on .site-header itself: the fixed phone menu inside it would
   be sized to the 64px header and show nothing. The blur sits on the ::before layer, big screens only. */
@media (min-width: 1024px) {
  .site-header::before { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 16px; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.header-cta { display: none; margin-left: 8px; }
.kbd-btn { display: none; }

/* phones: a full-screen menu */
.nav {
  position: fixed; inset: calc(var(--header-h) + var(--owner-h)) 0 0; z-index: 99; padding: 8px var(--gutter) 32px; overflow-y: auto;
  background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__list > li { border-bottom: 1px solid var(--line); }
.nav__list > li > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-size: calc(16px * var(--fz)); font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.nav__list > li > a:hover { text-decoration: none; color: var(--accent); }
.nav__list > li > a[aria-current="page"] { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; }
.nav__caret, .mega { display: none; }
.nav__cta-mobile { width: 100%; margin-top: 24px; }
.burger { position: relative; width: 20px; height: 14px; display: block; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease); }
.burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 6px; } .burger span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .nav { position: static; inset: auto; opacity: 1; visibility: visible; transform: none; background: none; padding: 0; margin-left: 24px; overflow: visible; }
  .nav__list { display: flex; gap: 2px; }
  .nav__list > li { border: 0; position: relative; }
  .nav__list > li > a { white-space: nowrap; padding: 7px 12px; font-size: calc(14.5px * var(--fz)); font-weight: 500; letter-spacing: 0; color: var(--ink-2); border-radius: 8px; gap: 4px; transition: color .2s, background-color .2s; }
  .nav__list > li > a:hover { color: var(--ink); background: var(--bg-soft); }
  .nav__list > li > a { border-radius: var(--r-pill); }
  .nav__list > li > a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); font-weight: 600; box-shadow: none; padding-left: 12px; }
  .nav__list > li > a[aria-current="page"]:hover { color: var(--accent-ink); background: var(--accent-hover); }
  .nav__caret { display: inline-block; transition: transform .25s var(--ease); opacity: .6; }
  .nav__item--mega:hover .nav__caret, .nav__item--mega:focus-within .nav__caret { transform: rotate(180deg); }
  .mega {
    display: block; position: absolute; left: -12px; top: calc(100% + 10px); width: 780px; padding: 10px;
    border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav__item--mega:hover .mega, .nav__item--mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .mega__link { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r); color: var(--ink); transition: background-color .15s; }
  .mega__link:hover { text-decoration: none; background: var(--bg-soft); }
  .mega__icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--c-soft); color: var(--c); }
  .mega__link b { display: block; font-size: calc(13.5px * var(--fz)); font-weight: 600; }
  .mega__link small { display: block; font-size: calc(12px * var(--fz)); color: var(--muted); line-height: 1.4; margin-top: 2px; }
  .mega__all { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; padding: 10px; border-radius: var(--r); background: var(--bg-tint); border: 1px solid var(--line); font-size: calc(14px * var(--fz)); font-weight: 550; color: var(--ink); }
  .mega__all:hover { text-decoration: none; background: var(--bg-soft); }
  .nav__cta-mobile, .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
  .kbd-btn { display: inline-flex; gap: 8px; width: auto; padding: 0 8px 0 10px; border: 1px solid var(--line); color: var(--muted); }
}
/* small laptops: seven menu items only just fit, so a little less padding and no "Ctrl K" label */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav { margin-left: 12px; }
  .nav__list > li > a, .nav__list > li > a[aria-current="page"] { padding: 7px 9px; font-size: calc(14px * var(--fz)); }
  .kbd-btn kbd { display: none; }
  .kbd-btn { padding: 0 10px; }
}

/* ---------------------------------------------------------------- shared section pieces */

.section { position: relative; padding: 80px 0; }
@media (min-width: 768px) { .section { padding: 112px 0; } }
.section--tint { background: var(--bg-tint); border-block: 1px solid var(--line); }
.section--tight { padding-top: 24px; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head--left { text-align: left; margin-left: 0; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; text-align: left; }
.section-head--split > div { max-width: 640px; }
.section-title { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(28px, 4.4vw, 46px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 700; }
.section-lead { margin-top: 16px; font-size: clamp(16px, 1.8vw, 18.5px); color: var(--muted); }
.section-foot { margin-top: 40px; text-align: center; }
.section-head__actions { margin-top: 24px; }
.section-head--center-actions .btn-row { justify-content: center; }

/* Highlighted words: one calm gradient for all of them (the hl--colour variants are ignored on purpose) */
.hl, .mark { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shape, .badge-spin, .sticker { display: none !important; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; font-size: calc(14px * var(--fz)); color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- home hero (v1)
   Full-height hero behind the see-through header: glows on both sides, a faint
   grid, a soft light that follows the mouse, and a tilting "code + preview"
   stage on the right (site.js: data-spotlight-area, data-tilt). */

.hero { position: relative; overflow: hidden; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 36px) 0 72px; }
@media (min-width: 960px) { .hero { min-height: 100svh; display: flex; align-items: center; padding-bottom: 96px; } }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; opacity: .32; }
.blob--1 { width: 700px; height: 700px; left: calc(50% - 980px); top: -220px; background: radial-gradient(circle, var(--glow-1) 0%, transparent 68%); }
.blob--2 { width: 660px; height: 660px; right: calc(50% - 960px); top: -40px; background: radial-gradient(circle, var(--glow-2) 0%, transparent 68%); }
.blob--3 { width: 600px; height: 600px; left: 50%; margin-left: -300px; bottom: -340px; background: radial-gradient(circle, var(--glow-3) 0%, transparent 68%); opacity: .18; }
[data-theme="dark"] .blob { opacity: .22; }
.hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.hero__spotlight { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }

.hero__inner { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.hero__title { font-family: var(--font-display); font-stretch: var(--dstretch); margin: 22px 0 20px; font-size: calc(clamp(36px, 6vw, 64px) * var(--ds, 1)); line-height: 1.04; letter-spacing: var(--dt); font-weight: 750; }
.hero__title .line { display: block; }
.rotator { position: relative; display: inline-grid; vertical-align: bottom; width: var(--w, auto); transition: width .45s var(--ease-out); white-space: nowrap; }
.rotator__word {
  grid-area: 1 / 1; justify-self: start; padding: 0 .04em .06em 0;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(.45em);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.rotator__word.is-active { opacity: 1; transform: none; }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-.45em); }
.hero__lead { max-width: 540px; font-size: clamp(16px, 1.7vw, 18px); color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__proof { display: grid; gap: 10px 20px; margin-top: 32px; font-size: calc(14.5px * var(--fz)); color: var(--ink-2); }
.hero__proof li { display: flex; align-items: center; gap: 8px; }
.hero__proof .i { color: var(--accent); }
@media (min-width: 640px) { .hero__proof { display: flex; flex-wrap: wrap; } }

.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-pill); font-size: calc(12.5px * var(--fz)); font-weight: 500; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--line-strong); border-radius: 14px; display: none; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--muted); animation: cue 1.8s var(--ease) infinite; }
@media (min-width: 960px) and (min-height: 760px) { .scroll-cue { display: block; } }
@keyframes cue { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- tech strip (v1) */

.marquee-band { padding: 28px 0; border-block: 1px solid var(--line); background: var(--bg-elev); }
.marquee { position: relative; display: flex; overflow: hidden; contain: paint; }
.marquee::before, .marquee::after, .statement::before, .statement::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 10%; pointer-events: none; background: linear-gradient(90deg, var(--bg-elev), transparent); }
.marquee::before, .statement::before { left: 0; }
.marquee::after, .statement::after { right: 0; transform: scaleX(-1); }
/* Both copies of the list move as ONE layer (two layers meant twice the work for the phone's graphics chip each frame,
   owner: "you can make it even more smooth"). Kept to a calm speed: at slower speeds a dropped frame is much harder to see. */
.marquee__run { display: flex; width: max-content; flex: none; animation: marquee 60s linear infinite; will-change: transform; backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
.marquee__track { display: flex; flex: none; gap: 44px; padding-right: 44px; }
/* Phones: a shorter strip. The full list was ~10,000 px of text per loop for the phone to keep drawing, and it
   stuttered there (owner's recording sr1: 40-60 ms stops, then jumps). Both copies stay identical, so it still loops. */
@media (max-width: 760px) {
  .marquee__track { gap: 32px; padding-right: 32px; }
  .marquee__run { animation-duration: 36s; }
  .marquee__track li { gap: 32px; font-size: calc(16px * var(--fz)); }
  .marquee__track li:nth-child(n+11) { display: none; }
}
/* The two strips are left alone off-screen: Chrome already skips animations nobody can see (its own trace
   says "no visible change"), and pausing/resuming them ourselves restarted them on the graphics chip each time
   they scrolled into view, a hitch right when you look at them. Only the hero's typing waits (site.js). */
.is-offscreen .float-chip, .is-offscreen .forge__caret { animation-play-state: paused; }
/* Pause to read, only with a real mouse: on a phone, touching the strip to scroll counts as hover and
   the pause stuck until you tapped elsewhere (the owner's recording: the strip froze for seconds). */
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__run { animation-play-state: paused; } }
.marquee__track li { font-size: calc(17px * var(--fz)); font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: -.01em; display: flex; align-items: center; gap: 44px; transition: color .2s; }
.marquee__track li::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--grad); opacity: .6; transform: rotate(45deg); }
.marquee__track li:hover { color: var(--ink); }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------------------- service cards */

.service-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
.service-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-lg);
  background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .2s, box-shadow .3s var(--ease);
}
.service-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.service-card__icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); margin-bottom: 10px; font-size: calc(21px * var(--fz)); }
.service-card h3 { font-size: calc(18.5px * var(--fz)); }
.service-card p { color: var(--muted); font-size: calc(15px * var(--fz)); }
.service-card__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: calc(13.5px * var(--fz)); font-weight: 550; color: var(--ink-2); border-top: 1px solid var(--line); }
.service-card__go { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: transform .3s var(--ease), color .2s, background-color .2s; }
.service-card:hover .service-card__go { transform: translateX(3px); color: var(--ink); background: var(--bg-soft); }

/* service page */
.svc-hero { position: relative; overflow: hidden; padding: 40px 0 72px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.svc-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 68%); opacity: .14; }
.svc-hero__inner { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .svc-hero__inner { grid-template-columns: 1fr 1fr; } }
.svc-hero__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); font-size: calc(26px * var(--fz)); margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); }
.svc-hero h1 { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(34px, 5vw, 56px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 750; }
.svc-hero__lead { margin-top: 16px; font-size: clamp(16.5px, 2vw, 19px); color: var(--muted); max-width: 580px; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.svc-facts div { padding: 12px 18px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); }
.svc-facts dt { font-size: calc(12px * var(--fz)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.svc-facts dd { margin: 2px 0 0; font-size: calc(21px * var(--fz)); font-weight: 600; letter-spacing: -.02em; }
.svc-cols { display: grid; gap: 24px; }
@media (min-width: 900px) { .svc-cols { grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } }
.svc-subtitle { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(24px, 3.2vw, 32px) * var(--ds, 1)); margin-bottom: 22px; }
.checklist { display: grid; gap: 10px; }
@media (min-width: 600px) { .checklist--2 { grid-template-columns: 1fr 1fr; } }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); font-size: calc(15px * var(--fz)); }
.checklist .tick { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-soft, var(--mint-soft)); color: var(--c, var(--mint)); font-size: calc(12px * var(--fz)); font-weight: 700; margin-top: 1px; }
.box { padding: 24px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.box + .box { margin-top: 16px; }
.box h3 { font-size: calc(18px * var(--fz)); margin-bottom: 14px; }
.box .bullets { display: grid; gap: 8px; }
.box .bullets li { display: flex; gap: 10px; color: var(--ink-2); }
.box .bullets li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--c, var(--violet)); }
.box__note { margin-top: 12px; }

/* "Technologies" on a service page: one card per group (e.g. Android: Language, UI, Architecture…) */
.tech-groups { display: grid; gap: 14px; }
@media (min-width: 700px) { .tech-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tech-groups { grid-template-columns: repeat(3, 1fr); } }
.tech-group { padding: 20px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.tech-group h3 { font-size: calc(13px * var(--fz)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }

/* ---------------------------------------------------------------- work */

.work-grid { display: grid; gap: 20px; }
@media (min-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.work-card { position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg-elev); overflow: hidden; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.work-card.is-hidden { display: none; }
.work-card__media { position: relative; aspect-ratio: 16 / 10.5; padding: 28px 28px 0; background: radial-gradient(120% 100% at 50% 0%, var(--c-soft), color-mix(in srgb, var(--c-soft) 30%, var(--bg-tint))); overflow: hidden; }
.work-card__media .mk-frame, .work-card__media .mk-phones { transform: translateY(16px); transition: transform .6s var(--ease-out); }
.work-card:hover .work-card__media .mk-frame, .work-card:hover .work-card__media .mk-phones { transform: translateY(6px); }
.work-card__media .mk-phones { max-width: 420px; margin-inline: auto; }
.work-card__body { position: relative; z-index: 1; padding: 22px 26px 26px; background: var(--bg-elev); border-top: 1px solid var(--line); flex: 1; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.work-card__kind { font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--c-deep); }
.work-card__title { font-size: calc(24px * var(--fz)); margin-bottom: 6px; }
.work-card__title a { color: var(--ink); }
.work-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.work-card__body p { color: var(--muted); font-size: calc(15px * var(--fz)); }
.work-card__go { position: absolute; right: 22px; top: 22px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); transition: transform .3s var(--ease), color .2s; }
.work-card:hover .work-card__go { transform: translate(2px, -2px); color: var(--ink); }
.work-grid--single { grid-template-columns: 1fr !important; }
@media (min-width: 900px) { .work-grid--single .work-card { flex-direction: row; } .work-grid--single .work-card__media { flex: 1.3; padding: 32px; aspect-ratio: auto; } .work-grid--single .work-card__body { flex: 1; border-top: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; } }
.concept-note { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 0 auto 36px; padding: 12px 16px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); font-size: calc(14.5px * var(--fz)); color: var(--ink-2); }
.concept-note .i { color: var(--violet); margin-top: 3px; flex: none; }
.chips--center { justify-content: center; margin-bottom: 32px; }

/* project page */
.proj-hero { position: relative; overflow: hidden; padding: 40px 0 0; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.proj-hero::before { content: ""; position: absolute; width: 640px; height: 640px; left: 50%; top: 30%; margin-left: -320px; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 68%); opacity: .16; }
.proj-hero__head { position: relative; z-index: 1; max-width: 860px; }
.proj-hero h1 { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(40px, 7vw, 80px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 750; line-height: 1; }
.proj-hero__tagline { margin-top: 16px; font-size: clamp(18px, 2.2vw, 22px); color: var(--muted); }
.proj-hero__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.proj-hero__screen { position: relative; z-index: 1; margin-top: 44px; transform: translateY(44px); }
.proj-hero__screen .mk-phones { max-width: 620px; margin-inline: auto; }
.proj-goals { display: grid; gap: 1px; margin: 100px 0 12px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .proj-goals { grid-template-columns: repeat(3, 1fr); } }
.proj-goals li { padding: 24px; background: var(--bg-elev); text-align: center; }
.proj-goals b { display: block; font-size: calc(34px * var(--fz)); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.proj-goals span { color: var(--muted); font-size: calc(15px * var(--fz)); }
.proj-goals-note { text-align: center; color: var(--muted); font-size: calc(13.5px * var(--fz)); margin: 0 0 64px; }
.story { display: grid; gap: 32px; margin: 0 auto 72px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 48px; } }
.story h2 { font-size: calc(28px * var(--fz)); margin-bottom: 14px; }
.story p { font-size: calc(17px * var(--fz)); color: var(--ink-2); }
.steps { display: grid; gap: 10px; counter-reset: s; }
.steps li { position: relative; padding: 14px 16px 14px 54px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: calc(13px * var(--fz)); background: var(--c-soft, var(--violet-soft)); color: var(--c-deep, var(--violet-deep)); }
.feature-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-tile { padding: 22px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s; }
.feature-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.feature-tile__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--c-soft, var(--violet-soft)); color: var(--c, var(--violet)); margin-bottom: 14px; font-size: calc(19px * var(--fz)); }
.feature-tile h3 { font-size: calc(17px * var(--fz)); margin-bottom: 6px; }
.feature-tile p { color: var(--muted); font-size: calc(15px * var(--fz)); }
.screen-block { margin: 64px 0; }
.screen-block .mk-phones { max-width: 620px; margin-inline: auto; }
.screen-block__cap { margin-top: 16px; text-align: center; color: var(--muted); font-size: calc(14px * var(--fz)); }

/* ---------------------------------------------------------------- promises / stats band (v1) */

.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .promises { grid-template-columns: repeat(4, 1fr); } }
.promise { padding: 28px 20px; background: var(--bg-elev); text-align: center; }
.promise b { font-family: var(--font-display); font-stretch: var(--dstretch); display: block; font-size: calc(clamp(34px, 5vw, 50px) * var(--ds, 1)); font-weight: 750; letter-spacing: var(--dt); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promise b small { font-size: .5em; letter-spacing: -.01em; }
.promise span { display: block; margin-top: 10px; font-size: calc(14px * var(--fz)); color: var(--muted); }
.promises + .section-head { margin-top: 96px; }

/* ---------------------------------------------------------------- why / principles / stack */

.grid-3 { display: grid; gap: 16px; }
@media (min-width: 680px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-elev); transition: border-color .3s, transform .4s var(--ease-out); }
.feature:hover { border-color: var(--accent); transform: translateY(-3px); }
.feature__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--ink); color: var(--bg); font-size: calc(20px * var(--fz)); }
.feature h3 { font-size: calc(18px * var(--fz)); margin-bottom: 8px; }
.feature--center { text-align: center; }
.feature--center .feature__icon { margin-inline: auto; }
.stack-groups { display: grid; gap: 14px; }
@media (min-width: 700px) { .stack-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stack-groups { grid-template-columns: repeat(4, 1fr); } }
.stack-groups > li { padding: 20px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.stack-groups h3 { font-size: calc(13px * var(--fz)); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }

/* ---------------------------------------------------------------- process timeline (v1)
   The line fills and each dot lights up as you scroll (site.js: data-timeline). */

.timeline { position: relative; display: grid; gap: 28px; padding-left: 36px; }
.timeline__line { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.timeline__line span { position: absolute; inset: 0; background: var(--grad); transform-origin: top; transform: scaleY(var(--fill, 0)); border-radius: inherit; }
.step { position: relative; }
.step__dot { position: absolute; left: -36px; top: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--accent); box-shadow: 0 0 0 6px var(--bg); transition: background-color .4s, color .4s, border-color .4s; }
.section--tint .step__dot { box-shadow: 0 0 0 6px var(--bg-tint); }
.step.is-reached .step__dot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.step__when { margin: 0 0 4px 12px; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--accent); }
.step__title { margin-left: 12px; font-size: calc(21px * var(--fz)); margin-bottom: 8px; }
.step__num { font: 500 calc(14px * var(--fz)) var(--font-mono); color: var(--muted); margin-right: 4px; }
.step > p:last-child { margin-left: 12px; }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 56px 0 0; }
  .timeline__line { left: 18px; right: 18px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .timeline__line span { transform-origin: left; transform: scaleX(var(--fill, 0)); }
  .step__dot { left: 0; top: -56px; }
  .step__when, .step__title, .step > p:last-child { margin-left: 0; }
}

/* ---------------------------------------------------------------- AI sections
   A tinted band with a soft glow of the accent colour. It follows the light/dark theme like everything else
   (it used to be dark in both, which made the AI page ignore the theme button). */

.section--glow, .ai-band { position: relative; overflow: hidden; background: var(--bg-tint); border-block: 1px solid var(--line); }
.ai-glow, .ai-band::before { content: ""; position: absolute; inset: -30% 5% auto; height: 760px; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; }
.section--glow > .container, .ai-band > .container { position: relative; z-index: 1; }

/* the AI page hero: text on the left, a concept screen on the right */
.ai-band { padding: 88px 0; }
@media (min-width: 768px) { .ai-band { padding: 120px 0; } }
.ai-band--hero { padding-top: 72px; }
.ai-band__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .ai-band__grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.page-title-xl { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(36px, 5.6vw, 62px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 750; line-height: 1.03; margin-bottom: 4px; }

.ai-ideas { position: relative; display: grid; gap: 14px; }
@media (min-width: 680px) { .ai-ideas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ai-ideas { grid-template-columns: repeat(3, 1fr); } }
.ai-idea { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .3s, background-color .3s, transform .4s var(--ease-out); }
.ai-idea:hover { border-color: var(--accent); transform: translateY(-3px); }
.ai-idea__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: var(--accent-soft); color: var(--accent); font-size: calc(20px * var(--fz)); }
.ai-idea h3 { font-size: calc(17px * var(--fz)); margin-bottom: 8px; }
.ai-idea p { font-size: calc(14.5px * var(--fz)); color: var(--muted); }
/* the AI project planner: a card with a gradient edge */
.planner { position: relative; margin-top: 48px; padding: 28px; border-radius: var(--r-xl); color: var(--ink); background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box; border: 1px solid transparent; box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .planner { padding: 40px; display: grid; grid-template-columns: 340px 1fr; gap: 40px; } .planner__out { grid-column: 1 / -1; } }
.planner__intro h3 { font-size: calc(24px * var(--fz)); margin-bottom: 10px; }
.planner__intro p { color: var(--muted); font-size: calc(15px * var(--fz)); }
.planner__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: calc(13px * var(--fz)); color: var(--ink-2) !important; }
.planner__form { margin-top: 20px; }
@media (min-width: 900px) { .planner__form { margin-top: 0; } }
.planner textarea { min-height: 110px; font-size: calc(16px * var(--fz)); }
.planner__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.planner__out { margin-top: 28px; }
.plan-loading { display: grid; gap: 14px; padding: 8px 0; }
.plan-loading__step { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: calc(15px * var(--fz)); transition: color .3s; }
.plan-loading__step::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.plan-loading__step.is-active { color: var(--ink); }
.plan-loading__step.is-active::before { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.plan-loading__step.is-done { color: var(--ink-2); }
.plan-loading__step.is-done::before { border-color: var(--good); background: var(--good); box-shadow: inset 0 0 0 3px var(--bg-elev); }
.plan-result { display: grid; gap: 16px; animation: fade-in .6s var(--ease-out); }
@media (min-width: 900px) { .plan-result { grid-template-columns: 1.3fr 1fr; } .plan-result__head, .plan-actions { grid-column: 1 / -1; } }
.plan-result__head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.plan-result__head h4 { font-size: calc(26px * var(--fz)); letter-spacing: -.02em; }
.plan-result__head p { color: var(--muted); margin-top: 6px; max-width: 640px; }
.plan-budget { text-align: right; }
.plan-budget b { display: block; font-size: calc(28px * var(--fz)); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-budget span { font-size: calc(14px * var(--fz)); color: var(--muted); }
.plan-block { padding: 20px; border-radius: var(--r); background: var(--bg-tint); border: 1px solid var(--line); }
.plan-block h5 { margin: 0 0 12px; font-size: calc(13px * var(--fz)); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.plan-block h5 + ul + h5 { margin-top: 18px; }
.plan-block ul { display: grid; gap: 10px; font-size: calc(14.5px * var(--fz)); color: var(--ink-2); }
.plan-block li b { color: var(--ink); font-weight: 600; }
.plan-block li small { display: block; color: var(--muted); }
.plan-phases { counter-reset: phase; }
.plan-phases > li { position: relative; padding-left: 34px; }
.plan-phases > li::before { counter-increment: phase; content: counter(phase); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: 700; background: var(--accent-soft); color: var(--accent-deep); }
.plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-tags span { padding: 4px 10px; border-radius: var(--r-pill); font-size: calc(13px * var(--fz)); background: var(--accent-soft); color: var(--accent-deep); }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.plan-actions .small { color: var(--muted); }

/* ---------------------------------------------------------------- pricing */

.plans { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); transition: box-shadow .3s, border-color .2s; }
.plan-card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.plan-card__top { display: flex; align-items: center; gap: 10px; }
.plan-card__dot { display: none; }
.plan-card h3 { font-size: calc(16px * var(--fz)); font-weight: 600; color: var(--ink-2); }
.plan-card__for { margin-left: auto; font-size: calc(13px * var(--fz)); color: var(--muted); }
.plan-card__price { margin: 14px 0 2px; font-size: calc(34px * var(--fz)); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.plan-card__price small { font-size: calc(15px * var(--fz)); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-card__lead { margin: 12px 0 4px; color: var(--muted); font-size: calc(15px * var(--fz)); }
.plan-card .ticks { margin: 16px 0 26px; }
.plan-card .btn { margin-top: auto; }
.plan-card--featured { background: var(--ink); color: var(--bg); border-color: transparent; box-shadow: var(--shadow-lg); }
.plan-card--featured h3, .plan-card--featured .plan-card__lead, .plan-card--featured .plan-card__price small, .plan-card--featured .plan-card__for { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.plan-card--featured .ticks, .plan-card--featured .ticks .i { color: var(--bg); }
.plan-card--featured .btn--primary { --btn-bg: var(--bg); --btn-ink: var(--ink); --btn-border: transparent; }
.plan-card--featured .btn--ghost { --btn-bg: transparent; --btn-ink: var(--bg); --btn-border: color-mix(in srgb, var(--bg) 30%, transparent); }
@media (min-width: 900px) { .plan-card--featured { transform: scale(1.03); } .plan-card--featured:hover { transform: scale(1.03) translateY(-4px); } }
.plan-card__badge { position: absolute; top: -12px; right: 24px; box-shadow: 0 6px 16px -6px var(--accent-glow); padding: 4px 12px; border-radius: var(--r-pill); font-size: calc(12px * var(--fz)); font-weight: 700; background: var(--grad); color: #fff; }
.ticks { display: grid; gap: 9px; font-size: calc(15px * var(--fz)); }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .i { color: var(--mint); margin-top: 3px; flex: none; }
.price-guide { display: grid; gap: 12px; }
@media (min-width: 600px) { .price-guide { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .price-guide { grid-template-columns: repeat(3, 1fr); } }
.price-guide li { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); }
.price-guide__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--c-soft); color: var(--c); }
.price-guide b { display: block; font-size: calc(15px * var(--fz)); font-weight: 600; }
.price-guide span { font-size: calc(14px * var(--fz)); color: var(--muted); }
.warranty { display: grid; gap: 18px; }
@media (min-width: 800px) { .warranty { grid-template-columns: 1fr 1fr; } }

/* estimator */
.estimator { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .estimator { grid-template-columns: 1fr 380px; gap: 28px; } }
.estimator__form { display: grid; gap: 30px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); }
@media (min-width: 768px) { .estimator__form { padding: 32px; } }
.est-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.est-group legend { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; font-size: calc(16px * var(--fz)); }
.est-group legend span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: 600; background: var(--ink); color: var(--bg); }
.est-row { display: grid; gap: 30px; }
@media (min-width: 768px) { .est-row { grid-template-columns: 1fr 1fr; } }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
@media (min-width: 768px) { .type-grid { grid-template-columns: repeat(3, 1fr); } }
.type-card { position: relative; cursor: pointer; }
.type-card input { position: absolute; opacity: 0; }
.type-card__body { display: grid; gap: 4px; align-content: start; height: 100%; padding: 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--bg-elev); transition: all .2s var(--ease); }
.type-card__body .i { width: 22px; height: 22px; color: var(--c); margin-bottom: 4px; }
.type-card__body b { font-size: calc(14.5px * var(--fz)); font-weight: 600; line-height: 1.25; }
.type-card__body small { color: var(--muted); font-size: calc(12.5px * var(--fz)); line-height: 1.35; }
.type-card:hover .type-card__body { border-color: var(--ink-2); }
.type-card input:checked + .type-card__body { border-color: var(--violet); background: var(--violet-soft); box-shadow: 0 0 0 1px var(--violet); }
.type-card input:focus-visible + .type-card__body { box-shadow: var(--ring); }
.range { display: flex; align-items: center; gap: 18px; }
.range output { min-width: 86px; font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"] { flex: 1; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--violet) var(--fill, 10%), var(--bg-soft) var(--fill, 10%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elev); border: 2px solid var(--violet); box-shadow: var(--shadow-sm); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-elev); border: 2px solid var(--violet); }
input[type="range"]:focus-visible { outline: none; box-shadow: var(--ring); }
.check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: calc(14px * var(--fz)); font-weight: 500; cursor: pointer; transition: all .2s var(--ease); user-select: none; background: var(--bg-elev); }
.check-chip .i-check { display: none; }
.check-chip span:hover { border-color: var(--ink-2); }
.check-chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.check-chip input:checked + span .i-plus { display: none; }
.check-chip input:checked + span .i-check { display: inline-block; }
.check-chip--ai span .i:first-child { color: var(--violet); }
.check-chip--ai input:checked + span { background: var(--grad); border-color: transparent; color: #fff; }
.check-chip--ai input:checked + span .i:first-child { display: none; }
.check-chip input:focus-visible + span { box-shadow: var(--ring); }
.segmented { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: var(--r-sm); background: var(--bg-soft); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 7px 14px; border-radius: 7px; font-size: calc(14px * var(--fz)); font-weight: 500; color: var(--muted); cursor: pointer; transition: all .2s var(--ease); }
.segmented input:checked + span { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { box-shadow: var(--ring); }
.estimate-card { position: relative; padding: 26px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.estimate-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
@media (min-width: 1024px) { .estimate-card { position: sticky; top: calc(var(--header-h) + var(--owner-h) + 24px); } }
.estimate-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.estimate-card__top .eyebrow { margin: 0; }
.currency { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bg-soft); }
.currency button { padding: 4px 10px; border-radius: 7px; font-size: calc(12.5px * var(--fz)); font-weight: 600; color: var(--muted); transition: all .2s; }
.currency .is-active { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }
.estimate-card__price { font-family: var(--font-display); font-stretch: var(--dstretch); margin: 18px 0 6px; font-size: calc(clamp(26px, 3.4vw, 32px) * var(--ds, 1)); font-weight: 600; letter-spacing: var(--dt); font-variant-numeric: tabular-nums; line-height: 1.15; }
.estimate-card__weeks { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.estimate-card__weeks .i { color: var(--violet); }
.estimate-card__lines { display: grid; gap: 8px; margin: 18px 0; padding: 16px 0; border-block: 1px dashed var(--line-strong); font-size: calc(14px * var(--fz)); max-height: 260px; overflow: auto; }
.estimate-card__lines li { display: flex; justify-content: space-between; gap: 12px; animation: fade-in .4s; }
.estimate-card__lines li span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.estimate-card__actions { display: grid; gap: 10px; margin-bottom: 14px; }
.estimate-card .small { color: var(--muted); }
.is-bumped { animation: bump .4s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.015); } }
.est-sticky { position: fixed; left: 12px; right: 82px; bottom: 16px; z-index: 150; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: var(--r-pill); background: #0f172a; color: #fff; box-shadow: var(--shadow-lg); font-weight: 600; font-variant-numeric: tabular-nums; transform: translateY(160%); transition: transform .35s var(--ease-out); }
.est-sticky.is-shown { transform: none; }
.est-sticky small { display: block; font-size: calc(11.5px * var(--fz)); font-weight: 500; color: #94a3b8; }
.est-sticky button { padding: 8px 14px; border-radius: 8px; background: #fff; color: #0f172a; font-size: calc(13px * var(--fz)); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .est-sticky { display: none; } }

/* ---------------------------------------------------------------- FAQ */

.faq-layout { display: grid; gap: 40px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 340px 1fr; gap: 64px; align-items: start; } .faq-layout > .section-head { position: sticky; top: calc(var(--header-h) + var(--owner-h) + 32px); } }
.faq { display: grid; gap: 10px; }
.faq__item { border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s; }
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 550; font-size: calc(16px * var(--fz)); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg-soft); transition: transform .3s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 1px; background: var(--ink-2); transition: transform .3s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--accent); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__body { color: var(--muted); overflow: hidden; }
.faq__inner { padding: 0 20px 20px; }
.faq__inner > p { margin: 0; }
.faq-page { max-width: 880px; }
.faq-group { scroll-margin-top: calc(var(--header-h) + var(--owner-h) + 24px); }
.faq-group + .faq-group { margin-top: 52px; }
.faq-group h2 { font-size: calc(22px * var(--fz)); margin-bottom: 14px; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }

/* ---------------------------------------------------------------- reviews (shown once real ones exist) */

.carousel-nav { display: flex; gap: 8px; }
.carousel-nav .icon-btn { border: 1px solid var(--line); }
.carousel__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 24px; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.quote-card { position: relative; flex: 0 0 min(88%, 420px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); }
.quote-card blockquote { margin: 0 0 22px; font-size: calc(17px * var(--fz)); line-height: 1.6; }
.quote-card footer { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.quote-card footer b { display: block; }
.quote-card footer small { display: block; color: var(--muted); }
.stars { display: flex; gap: 2px; color: #f59e0b; margin-bottom: 14px; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: width .3s var(--ease), background-color .3s; }
.carousel__dots button.is-active { width: 22px; background: var(--violet); }

/* ---------------------------------------------------------------- contact page */

.contact { display: grid; gap: 28px; }
@media (min-width: 1000px) { .contact { grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; } }
.contact-side { display: grid; gap: 16px; align-content: start; }
/* All three packages beside the contact form, folded; the chosen one open */
.pack-sum h2 { margin-bottom: 6px; }
.pack-sum__item { border-top: 1px solid var(--line); }
.pack-sum__item:first-of-type { margin-top: 12px; }
.pack-sum__item summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.pack-sum__item summary::-webkit-details-marker { display: none; }
.pack-sum__price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pack-sum__chev { transition: transform .2s; color: var(--muted); }
.pack-sum__item[open] .pack-sum__chev { transform: rotate(180deg); }
.pack-sum__item[open] { padding-bottom: 14px; }
.pack-sum__item > p, .pack-sum__item > ul { margin-bottom: 10px; }
.ticks--sm li { font-size: calc(14px * var(--fz)); }
.pack-sum > p:last-child { margin-top: 12px; }
.contact-card { padding: 24px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-elev); }
.contact-card--violet { background: var(--ink); color: var(--bg); border-color: transparent; }
.contact-card--violet h2 { font-size: calc(20px * var(--fz)); margin-bottom: 8px; color: inherit; }
.contact-card--violet .btn--primary { --btn-bg: #fff; --btn-ink: #0f172a; --btn-border: #fff; }
.contact-list { display: grid; padding: 6px 20px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); }
.contact-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.contact-list li + li { border-top: 1px solid var(--line); }
.contact-list__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); flex: none; }
.contact-list small { display: block; font-size: calc(12.5px * var(--fz)); color: var(--muted); }
.contact-list span:nth-child(2) { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.next-steps { counter-reset: n; display: grid; gap: 12px; margin-top: 14px; }
.next-steps li { position: relative; padding-left: 36px; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.next-steps li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: 600; background: var(--accent-soft); color: #c7d2fe; }
.contact-form { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 768px) { .contact-form { padding: 32px; } }
.contact-form h2 { font-size: calc(24px * var(--fz)); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.attached { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-sm); background: var(--violet-soft); color: var(--ink); font-size: calc(14px * var(--fz)); animation: pop-in .3s var(--ease-out); }
.attached .i { color: var(--violet); }
.attached span { flex: 1; }
.contact-form.is-sent { animation: sent .5s var(--ease); }
@keyframes sent { 30% { transform: scale(.99); } }

/* ---------------------------------------------------------------- inner-page hero */

.page-hero { position: relative; overflow: hidden; padding: 48px 0 56px; border-bottom: 1px solid var(--line); background: var(--bg-tint); }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 60% 80% at 80% 0%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 0%, #000 10%, transparent 70%); }
@media (min-width: 768px) { .page-hero { padding: 72px 0 72px; } }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__inner > h1, .page-hero__inner > p { max-width: 860px; }
.page-hero h1 { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(34px, 5.2vw, 58px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 750; line-height: 1.04; }
.page-hero__lead { margin-top: 18px; font-size: clamp(16.5px, 2vw, 19px); color: var(--muted); max-width: 660px; }
.page-hero__more { margin-top: 20px; }

/* ---------------------------------------------------------------- footer (v1: light, a big centered call to action) */

.site-footer { position: relative; overflow: hidden; padding-top: 96px; border-top: 1px solid var(--line); }
.footer-cta { text-align: center; margin-bottom: 88px; }
.footer-cta__title { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(32px, 6vw, 62px) * var(--ds, 1)); letter-spacing: var(--dt); font-weight: 750; line-height: 1.04; }
.footer-cta__lead { max-width: 560px; margin: 18px auto 0; font-size: clamp(16px, 2vw, 19px); color: var(--muted); }
.footer-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.footer-cta__actions .btn--ghost { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.footer-grid { display: grid; gap: 32px; padding: 48px 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand p { margin-top: 14px; max-width: 320px; color: var(--muted); }
.footer-muted { color: var(--muted); }
.footer-title { font-size: calc(13px * var(--fz)); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.footer-links { display: grid; gap: 10px; }
.footer-links a { color: var(--ink-2); font-size: calc(15px * var(--fz)); overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--ink); }
.socials { display: flex; gap: 6px; margin-top: 18px; }
.socials .icon-btn { border: 1px solid var(--line); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a, .footer-legal button { color: var(--muted); }
.footer-wordmark { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(56px, 14vw, 210px) * var(--ds, 1)); font-weight: 800; letter-spacing: var(--dt); line-height: .8; text-align: center; white-space: nowrap; color: var(--line); user-select: none; margin-bottom: -.12em; }

/* "Need something like this?" box at the end of a project page (v1 case study ending) */
.case-next { display: grid; gap: 24px; align-items: center; margin: 72px 0 96px; padding: 40px; border-radius: var(--r-xl); background: var(--ink); color: var(--bg); }
.case-next h2 { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(24px, 3.6vw, 36px) * var(--ds, 1)); letter-spacing: var(--dt); }
.case-next .eyebrow { color: color-mix(in srgb, var(--bg) 60%, var(--accent)); }
.case-next__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.case-next .btn--primary { --btn-bg: var(--bg); --btn-ink: var(--ink); }
.case-next .btn--ghost { --btn-bg: transparent; --btn-ink: var(--bg); --btn-border: color-mix(in srgb, var(--bg) 30%, transparent); }
@media (min-width: 960px) { .case-next { grid-template-columns: 1fr auto; padding: 56px; } }

/* ---------------------------------------------------------------- AI assistant widget */

.assistant { position: fixed; right: 16px; bottom: 16px; z-index: 200; }
.assistant__fab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 16px 40px -12px var(--accent-glow); transition: transform .3s var(--spring), box-shadow .3s; }
.assistant__fab:hover { transform: translateY(-2px) scale(1.03); }
.assistant__fab .i { width: 20px; height: 20px; }
.assistant__fab .i-close { display: none; }
.assistant.is-open .assistant__fab { padding: 0; width: 54px; justify-content: center; }
.assistant.is-open .assistant__fab .i-close { display: inline-block; }
.assistant.is-open .assistant__fab .i-open, .assistant.is-open .assistant__fab-label { display: none; }
.assistant__fab-ring { position: absolute; inset: -3px; border-radius: inherit; background: var(--grad); z-index: -1; opacity: .9; animation: ring 3s ease-in-out infinite; }
@keyframes ring { 50% { opacity: .4; transform: scale(1.05, 1.1); } }
@media (max-width: 559px) { .assistant__fab { width: 54px; padding: 0; justify-content: center; } .assistant__fab-label { display: none; } }
.assistant__panel {
  position: fixed; inset: auto 12px 78px; z-index: 201; display: flex; flex-direction: column;
  max-height: min(620px, calc(100svh - 104px)); border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden;
  transform-origin: bottom right; animation: panel-in .3s var(--ease-out);
}
@media (min-width: 560px) { .assistant__panel { left: auto; right: 16px; width: 400px; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* Phones: a full-screen sheet sized to what's visible above the keyboard (assistant.js sets --vvh / --vv-top). */
@media (max-width: 559px) {
  .assistant__panel { inset: auto; top: var(--vv-top, 0px); left: var(--vv-left, 0px); width: var(--vvw, 100vw); height: var(--vvh, 100dvh); max-height: none; border-radius: 0; border: 0; animation: sheet-in .26s var(--ease-out); }
  .assistant__suggestions .chip { white-space: normal; max-width: 100%; }
  .assistant.is-open .assistant__fab { display: none; }
  body.assistant-open { overflow: hidden; }
  body.assistant-open .page-jump, body.assistant-open .palette { display: none; }
  .assistant__head { padding-top: max(14px, env(safe-area-inset-top)); }
  .assistant__form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.assistant__head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--line); }
.assistant__head > div { flex: 1; min-width: 0; }
.assistant__head h2 { font-size: calc(15px * var(--fz)); }
.assistant__head p { display: flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fz)); color: var(--muted); }
.assistant__avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.assistant__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: calc(14.5px * var(--fz)); line-height: 1.55; animation: pop-in .25s var(--ease-out); overflow-wrap: anywhere; }
.msg p { margin: 0 0 .6em; } .msg p:last-child { margin: 0; }
.msg ul { list-style: disc; padding-left: 18px; margin: 0 0 .6em; display: grid; gap: 3px; } .msg ul:last-child { margin: 0; }
.msg--bot { align-self: flex-start; background: var(--bg-soft); border-bottom-left-radius: 5px; }
.msg--user { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 5px; }
.msg--user a { color: inherit; }
.msg--error { background: var(--bad-soft); color: var(--bad); }
.msg.is-typing::after { content: ""; display: inline-block; width: 6px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--violet); animation: blink 1s steps(1) infinite; }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
.assistant__suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant__suggestions .chip { font-size: calc(13px * var(--fz)); padding: 6px 12px; text-align: left; }
.assistant__handoff { padding: 0 16px 10px; }
.assistant__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.assistant__form textarea { flex: 1; min-width: 0; width: auto; min-height: 44px; max-height: 140px; resize: none; border-radius: 12px; padding: 11px 14px; font-size: calc(15px * var(--fz)); }
.assistant__send { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--bg); transition: opacity .2s, transform .2s; }
.assistant__send:hover { transform: translateY(-1px); }
.assistant__send:disabled { opacity: .4; transform: none; }
.assistant__note { margin: 0; padding: 0 16px 10px; font-size: calc(11.5px * var(--fz)); color: var(--muted); text-align: center; }

/* ---------------------------------------------------------------- quick search (Ctrl K) */

.palette { position: fixed; inset: 0; z-index: 300; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.palette__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); backdrop-filter: blur(6px); animation: fade-in .2s; }
.palette__box { position: relative; width: 100%; max-width: 580px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop-in .25s var(--ease-out); }
.palette__search { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.palette__search .i { color: var(--muted); }
.palette__search input { border: 0; box-shadow: none !important; background: none; min-height: 56px; padding: 0; font-size: calc(17px * var(--fz)); }
.palette__list { max-height: 380px; overflow-y: auto; padding: 8px; }
.palette__list li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: calc(15px * var(--fz)); }
.palette__list li .i { color: var(--muted); }
.palette__list li.is-active { background: var(--bg-soft); color: var(--ink); }
.palette__list li.is-active .i { color: var(--violet); }
.palette__ext { margin-left: auto; }
.palette__empty { padding: 24px; text-align: center; color: var(--muted); }

/* ---------------------------------------------------------------- legal & error pages */

.back-link { display: flex; width: max-content; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; font-size: calc(15px * var(--fz)); margin-bottom: 24px; }
.back-link:hover { color: var(--ink); text-decoration: none; }
.legal { max-width: 760px; padding-top: 48px; padding-bottom: 96px; }
.legal h1 { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(32px, 5vw, 46px) * var(--ds, 1)); letter-spacing: var(--dt); margin-bottom: 8px; font-weight: 600; }
.legal h2 { font-size: calc(22px * var(--fz)); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink-2); font-size: calc(16.5px * var(--fz)); }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 10px; }
.legal .notice { margin: 20px 0; }
.error-page { min-height: 70vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding-top: 48px; padding-bottom: 96px; }
.error-page__code { font-family: var(--font-display); font-stretch: var(--dstretch); font-size: calc(clamp(96px, 22vw, 180px) * var(--ds, 1)); font-weight: 600; letter-spacing: var(--dt); line-height: .9; margin: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page h1 { font-size: clamp(26px, 4vw, 36px); }
.error-page .hero__actions { justify-content: center; }

/* ---------------------------------------------------------------- signature pieces (v5)
   What makes the site its own: the hero "build machine", a fine film grain, numbered
   sections, big outlined numbers on service cards and a huge scrolling statement band. */

/* the hero "build machine" (site.js forge()) */
.forge { position: relative; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg), 0 40px 90px -40px var(--accent-glow); transform: perspective(1400px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 4deg)); transition: transform .6s var(--ease-out); }
.forge::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.forge__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: #0d0f1a; color: #c9cce0; font: 500 calc(13px * var(--fz)) var(--font-mono); }
.forge__dots { display: flex; gap: 6px; }
.forge__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .forge__dots i:nth-child(2) { background: #febc2e; } .forge__dots i:nth-child(3) { background: #28c840; }
.forge__bar code { background: none; padding: 0; font-size: inherit; white-space: nowrap; overflow: hidden; }
.forge__bar code b { color: color-mix(in srgb, var(--accent) 50%, #fff); font-weight: 500; margin-right: 4px; }
.forge__type { color: #a5e844; }
.forge__caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: color-mix(in srgb, var(--accent) 50%, #fff); animation: blink 1s steps(1) infinite; }
.forge__status { margin-left: auto; display: none; align-items: center; gap: 6px; font: 500 calc(12px * var(--fz)) var(--font); color: #8d93ad; white-space: nowrap; }
@media (min-width: 520px) { .forge__status { display: inline-flex; } }
.forge__stage { position: relative; aspect-ratio: 16 / 11.4; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); background: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0) 0 0 / 18px 18px, radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%); }
.forge__slide { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
.forge__slide > * { width: 100%; }
.forge__slide.is-active { opacity: 1; transform: none; }
.forge__slide.is-leaving { opacity: 0; transform: translateY(-16px) scale(1.03); }
.forge__slide--phone { padding: 18px 0 0; place-items: start center; }
.forge__slide--phone > .mk-phone { width: 34%; max-width: 230px; }
.forge .float-chip { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -7px; } }
.forge .float-chip--a { top: 64px; right: -14px; animation-delay: -2s; }
.forge .float-chip--b { bottom: -16px; left: 22px; animation-delay: -4s; }
@media (max-width: 479px) { .forge .float-chip--a { display: none; } .forge .float-chip--b { left: 12px; } }
/* Phones: a flat machine. The tilted (3D) box with its gradient edge and 90px glow had to be redrawn whole for
   every typed letter, and that drawing work is what made the strips below it skip frames while scrolling. */
@media (max-width: 760px), (hover: none) {
  .forge { transform: none; transition: none; box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
  .forge::before { display: none; }
  .forge__bar { contain: paint; }
}
.forge__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.forge__tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: calc(12.5px * var(--fz)); font-weight: 600; color: var(--ink-2); transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--spring); }
.forge__tab:hover { color: var(--ink); border-color: var(--ink-2); transform: translateY(-1px); }
.forge__tab .i { width: 16px; height: 16px; color: var(--muted); }
.forge__tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.forge__tab.is-active .i { color: inherit; }
.forge__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.forge__tab.is-running .forge__progress { animation: forge-progress 4.2s linear forwards; }
.forge__tabs.is-paused .forge__progress { animation-play-state: paused; }
@keyframes forge-progress { to { transform: scaleX(1); } }

/* a very fine film grain over everything: gives the flat colours some texture (computers only) */
@media (hover: none), (max-width: 1023px) { body::after { display: none; } }
body::after { content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] body::after { opacity: .07; }

/* numbered sections: "01  What we build", "02  Why work with us"... */
main { counter-reset: chapter; }
.section-head .eyebrow::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font: 600 calc(11.5px * var(--fz)) var(--font-mono); letter-spacing: 0; color: var(--accent); background: var(--accent-soft); }

/* service cards: a big outlined number that fills with the gradient on hover, and a gradient edge */
.service-card { overflow: hidden; }
.service-card:hover { border-color: transparent; background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box; }
.service-card__num { position: absolute; top: 14px; right: 18px; font: 800 calc(46px * var(--fz))/1 var(--font-display); font-stretch: var(--dstretch); letter-spacing: var(--dt); color: var(--line); transition: color .35s, transform .5s var(--ease-out); pointer-events: none; }
.service-card:hover .service-card__num { color: var(--accent); transform: translateY(-2px); }

/* the huge scrolling statement band above the footer */
.statement { position: relative; overflow: hidden; contain: paint; padding: 22px 0; border-block: 1px solid var(--line); background: var(--bg-elev); }
.statement::before, .statement::after { width: 6%; }
.statement__track { display: flex; width: max-content; align-items: center; gap: 36px; animation: statement 48s linear infinite; will-change: transform; backface-visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .statement:hover .statement__track { animation-play-state: paused; } }
.statement__track span { font: 800 calc(clamp(24px, 4.4vw, 60px) * var(--ds, 1))/1 var(--font-display); font-stretch: var(--dstretch); letter-spacing: var(--dt); white-space: nowrap; color: var(--ink); }
/* Solid letters only: the outlined ones looked thin and spidery (owner: ss6, "i dont like that font"). */
.statement__track span.is-soft { color: var(--muted); }
.statement__track span.is-grad { color: var(--accent); }
.statement__track i { width: clamp(10px, 1.1vw, 16px); aspect-ratio: 1; flex: none; border-radius: 4px; background: var(--grad); transform: rotate(45deg); }
@keyframes statement { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.site-footer { padding-top: 0; }
.site-footer > .container { padding-top: 96px; }

/* "If you can describe it, we can build it": the long list, grouped and filterable */
.catalogue { background: radial-gradient(60% 50% at 50% 0%, var(--accent-soft), transparent 70%); }
.catalogue__filters { margin-bottom: 36px; }
.catalogue__filters .chip .i { width: 15px; height: 15px; }
.catalogue__wall { columns: 1; column-gap: 18px; }
@media (min-width: 720px) { .catalogue__wall { columns: 2; } }
@media (min-width: 1100px) { .catalogue__wall { columns: 3; } }
.catalogue__group { break-inside: avoid; margin-bottom: 18px; padding: 20px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.catalogue__group.is-hidden { display: none; }
.catalogue__group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 700 calc(17px * var(--fz)) var(--font-display); letter-spacing: var(--dt); }
.catalogue__group h3 span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.catalogue__group h3 span .i { width: 17px; height: 17px; }
.catalogue__group h3 small { margin-left: auto; font: 600 calc(12px * var(--fz)) var(--font-mono); color: var(--muted); }
.catalogue__group ul { display: flex; flex-wrap: wrap; gap: 7px; }
.catalogue__group li { padding: 6px 12px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid transparent; font-size: calc(13.5px * var(--fz)); font-weight: 500; color: var(--ink-2); transition: background-color .2s, color .2s, transform .2s var(--spring); cursor: default; }
.catalogue__group li:hover { background: var(--grad); color: #fff; transform: translateY(-2px); }
.catalogue__group li.is-hot { background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box; color: var(--ink); font-weight: 600; }
.catalogue__group li.is-hot:hover { background: var(--grad); color: #fff; }
.catalogue__group li.is-extra { display: none; }
.catalogue__group.is-open li.is-extra { display: inline-block; animation: pop-in .25s var(--ease-out); }
.catalogue__toggle { margin-top: 12px; font-size: calc(13.5px * var(--fz)); font-weight: 600; color: var(--accent); }
.catalogue__toggle:hover { text-decoration: underline; }
/* home page: six short cards instead of the long list */
.catalogue__cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .catalogue__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .catalogue__cards { grid-template-columns: repeat(3, 1fr); } }
/* Same layout as the "why" cards (owner preferred them): icon on top, then the title and examples. */
.catalogue__cards a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; padding: 24px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease-out), border-color .2s, box-shadow .3s; }
.catalogue__cards a:hover { text-decoration: none; transform: translateY(-3px); border-color: transparent; background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--grad) border-box; box-shadow: var(--shadow); }
.catalogue__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: var(--ink); color: var(--bg); }
.catalogue__cards b { font: 700 calc(17px * var(--fz)) var(--font-display); letter-spacing: var(--dt); }
.catalogue__eg { font-size: calc(14px * var(--fz)); color: var(--muted); }
.catalogue__more { margin-top: auto; padding-top: 6px; font-size: calc(12.5px * var(--fz)); font-weight: 600; color: var(--accent); }
.catalogue__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 22px 26px; border-radius: var(--r-lg); background: var(--ink); color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.catalogue__ask p { margin: 0; max-width: 560px; }
.catalogue__ask b { color: var(--bg); }
.catalogue__ask .btn--primary { --btn-bg: var(--bg); --btn-ink: var(--ink); }
.catalogue__ask .btn--ghost { --btn-bg: transparent; --btn-ink: var(--bg); --btn-border: color-mix(in srgb, var(--bg) 30%, transparent); }

/* plan cards: who it's for sits above the name as a small label */
.plan-card__top { flex-direction: column; align-items: flex-start; gap: 6px; }
.plan-card__for { order: -1; margin-left: 0; font-size: calc(11.5px * var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.plan-card--featured .plan-card__for { color: color-mix(in srgb, var(--bg) 55%, var(--accent)); }
.plan-card h3 { font: 700 calc(19px * var(--fz))/1.2 var(--font-display); font-stretch: var(--dstretch); letter-spacing: var(--dt); color: var(--ink); }
.plan-card--featured h3 { color: var(--bg); }

/* the estimator on the home page sits on a tinted band */
.estimate-band { border-block: 1px solid var(--line); }
/* Home: the way to a price, with no price on it (round 16) */
.price-ask { border-block: 1px solid var(--line); }
.price-ask__in { display: grid; gap: 20px; align-items: center; }
.price-ask__in .section-title, .price-ask__in .section-lead { margin-inline: 0; text-align: left; }
@media (min-width: 900px) { .price-ask__in { grid-template-columns: 1fr auto; gap: 48px; } }

/* dev-only font switcher: a solid pill, and a panel listing each font written in itself */
.font-switch { position: fixed; left: 16px; bottom: 16px; z-index: 210; }
.font-switch__toggle { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); box-shadow: 0 12px 30px -10px rgba(12, 15, 29, .55); font-size: calc(13px * var(--fz)); font-weight: 600; }
.font-switch__toggle b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 calc(13px * var(--fz)) var(--font-display); }
.font-switch__toggle:hover { transform: translateY(-1px); }
.font-switch__panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: 300px; max-height: min(520px, 70vh); overflow-y: auto; padding: 10px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); animation: pop-in .2s var(--ease-out); }
.font-switch__title { margin: 4px 8px 8px; font-size: calc(12px * var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; }
.font-switch__title span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.font-switch__list { display: grid; gap: 2px; }
.font-switch__list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: calc(18px * var(--fz)); font-weight: 700; color: var(--ink); text-align: left; transition: background-color .15s; }
.font-switch__list button:hover { background: var(--bg-soft); }
.font-switch__list button .i { opacity: 0; color: var(--accent); }
.font-switch__list button.is-active { background: var(--accent-soft); }
.font-switch__list button.is-active .i { opacity: 1; }
.font-switch__list--colours { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.font-switch__list--colours button { justify-content: flex-start; gap: 12px; font: 600 calc(14.5px * var(--fz)) var(--font); }
.font-switch__list--colours button .i { margin-left: auto; }
.font-switch__swatch { width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
@media print { .font-switch, body::after { display: none !important; } }

/* ---------------------------------------------------------------- print: "Save as PDF" on the estimator */

.est-paper-head, .est-paper-next { display: none; }
@media print {
  @page { size: A4; margin: 16mm 16mm; }
  body.print-estimate > *:not(main), body.print-estimate main > *:not(#estimate):not(:has(#estimate)), body.print-estimate #estimate .section-head, body.print-estimate .estimate-card__actions, body.print-estimate .currency { display: none !important; }
  body.print-estimate #estimate { padding: 0; border: 0 !important; }
  body.print-estimate #estimate::before, body.print-estimate #estimate::after { display: none !important; }
  body.print-estimate #estimate .container { max-width: none; padding: 0; }
  body.print-estimate, body.print-estimate main, body.print-estimate .estimate-band { background: #fff; border: 0; }
  body.print-estimate .estimator { display: block; }
  body.print-estimate .estimator__form { display: none; }
  /* The estimate fills the A4 page (round 17): letterhead, the price big, every line, then the next steps. */
  body.print-estimate .est-paper-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: start; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 2px solid #10161c; }
  body.print-estimate .page-progress { display: none !important; }
  body.print-estimate .est-paper-head__brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
  body.print-estimate .est-paper-head__contact { text-align: right; font-size: 11px; line-height: 1.6; color: #5d6772; }
  body.print-estimate .est-paper-head__title { grid-column: 1; margin: 18px 0 0; font-size: 28px; }
  body.print-estimate .est-paper-head__date { grid-column: 2; align-self: end; margin: 0; font-size: 12px; color: #5d6772; }
  body.print-estimate .estimate-card { position: relative; box-shadow: none; max-width: none; margin: 0; padding: 26px 28px; border: 1px solid #d7dde2; }
  body.print-estimate .estimate-card__price { font-size: 34px; }
  body.print-estimate .estimate-card__weeks { font-size: 15px; }
  body.print-estimate .estimate-card__lines li { padding-block: 9px; font-size: 13px; }
  body.print-estimate .est-paper-next { display: block; margin-top: 30px; break-inside: avoid; }
  body.print-estimate .est-paper-next h3 { font-size: 17px; margin-bottom: 10px; }
  body.print-estimate .est-paper-next ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: #33404d; margin-bottom: 4px; }
  body.print-estimate .est-paper-next h3 + ol, body.print-estimate .est-paper-next ol + h3 { margin-top: 0; }
  body.print-estimate .est-paper-next ol + h3 { margin-top: 22px; }
  body.print-estimate .est-paper-next ol { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: #33404d; }
  body.print-estimate .est-paper-next__contact { margin-top: 18px; font-size: 13px; color: #33404d; }
  body.print-estimate .reveal { opacity: 1 !important; transform: none !important; }
  .assistant, .scroll-progress, .site-header, .palette, .est-sticky { display: none !important; }
}

/* ---------------------------------------------------------------- website packages (Silver / Gold / Platinum) */

.plan-card h3 .medal { margin-right: 8px; }
.medal { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 2px 3px rgba(255, 255, 255, .7); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.medal--silver { background: linear-gradient(135deg, #f4f6f9, #a7afbb 55%, #dfe3e9); }
.medal--gold { background: linear-gradient(135deg, #fff1b8, #e0a526 55%, #ffd66b); }
.medal--platinum { background: linear-gradient(135deg, #ffffff, #b8bcd8 45%, #8d95ad 75%, #eef0f6); }
.package__pay { display: flex; align-items: center; gap: 8px; margin: -8px 0 20px; font-size: calc(13.5px * var(--fz)); color: var(--muted); }
.plan-card--featured .package__pay { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.brochure-link { margin-top: 40px; }

/* ---------------------------------------------------------------- How we work (the brochure page) */

.journey { display: grid; gap: 16px; }
.journey__step { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--bg-elev); }
.journey__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.journey__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--c-soft); color: var(--c); }
.journey__when { margin: 0 0 2px; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--c); }
.journey__head h3 { font-size: calc(20px * var(--fz)); }
.journey__grid { display: grid; gap: 14px; margin: 0; }
.journey__grid dt { font-size: calc(11.5px * var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.journey__grid dd { margin: 4px 0 0; color: var(--ink-2); font-size: calc(15px * var(--fz)); }
@media (min-width: 720px) { .journey__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .journey__step { padding: 26px 28px; } .journey__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* timelines: one bar per kind of project, from its shortest to its longest usual time */
.tl-chart { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-elev); }
.tl-chart ul { display: grid; gap: 14px; }
.tl-chart li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; }
.tl-chart__label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: calc(15px * var(--fz)); }
.tl-chart__label .i { color: var(--c); }
.tl-chart__weeks { font-size: calc(14px * var(--fz)); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.tl-chart__track { grid-column: 1 / -1; position: relative; height: 10px; border-radius: var(--r-pill); background: var(--bg-soft); }
.tl-chart__bar { position: absolute; top: 0; bottom: 0; left: var(--l); width: max(var(--w), 10px); border-radius: inherit; background: var(--c); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.tl-chart__axis { display: none; }
@media (min-width: 760px) {
  .tl-chart { padding: 28px 32px; }
  .tl-chart li { grid-template-columns: 220px 1fr 110px; }
  .tl-chart__track { grid-column: auto; }
  .tl-chart__axis { display: flex; justify-content: space-between; margin: 10px 124px 0 234px; font-size: calc(12px * var(--fz)); color: var(--muted); }
}
.tl-chart__note { margin-top: 16px; max-width: 720px; }

/* the comparison table under the package cards (scrolls sideways on its own on a phone) */
.compare-title { margin: 56px 0 16px; font-size: calc(20px * var(--fz)); }
.compare { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: calc(14.5px * var(--fz)); }
.compare__table th, .compare__table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare__table thead th { font-weight: 700; font-size: calc(15px * var(--fz)); background: var(--bg-soft); white-space: nowrap; }
.compare__table thead th .medal { margin-right: 6px; }
.compare__table tbody th, .compare__table thead th:nth-child(2) { text-align: left; }
.compare__table tbody th { font-weight: 500; color: var(--ink-2); }
.compare__table tr:last-child > * { border-bottom: 0; }
.compare__num { width: 56px; color: var(--muted); font-variant-numeric: tabular-nums; }
.compare__table td:nth-child(4), .compare__table th:nth-child(4) { background: var(--accent-soft); }
.compare__yes { color: var(--mint); }
.compare__no { color: var(--muted); }
.compare__price td { font-size: calc(16px * var(--fz)); }

.grid-4 { display: grid; gap: 16px; }
@media (min-width: 680px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.care-line { margin-top: 24px; color: var(--ink-2); }
.brochure-split { display: grid; gap: 32px; }
@media (min-width: 960px) { .brochure-split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }
.print-only { display: none; }

/* "Save as PDF": the same page as a tidy brochure. It always prints in the light theme (core.js). */
@media print {
  @page { margin: 14mm 12mm; }
  body.page-brochure .owner-bar, body.page-brochure .site-footer, body.page-brochure .hero__actions,
  body.page-brochure .btn, body.page-brochure .plan-card__badge, body.page-brochure .promises, body.page-brochure .skip-link { display: none !important; }
  body.page-brochure, body.page-brochure main { background: #fff; }
  body.page-brochure .print-only { display: block; }
  body.page-brochure .reveal { opacity: 1 !important; transform: none !important; }
  body.page-brochure .section { padding: 20px 0; }
  body.page-brochure .section-head { margin-bottom: 16px; break-after: avoid; }
  body.page-brochure .section-title { font-size: calc(24px * var(--fz)); }
  body.page-brochure .page-hero { padding: 8px 0 12px; background: none; border: 0; }
  body.page-brochure .page-hero::before { display: none; }
  body.page-brochure .page-hero h1 { font-size: calc(30px * var(--fz)); }
  body.page-brochure .hl, body.page-brochure .mark { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
  body.page-brochure .section--tint { background: none; border: 0; }
  body.page-brochure .journey__step, body.page-brochure .plan-card, body.page-brochure .feature, body.page-brochure .compare tr,
  body.page-brochure .tl-chart li, body.page-brochure .box, body.page-brochure .brochure-contact { break-inside: avoid; }
  body.page-brochure #timelines, body.page-brochure #packages { break-before: page; }
  body.page-brochure .journey { gap: 10px; }
  body.page-brochure .journey__step { padding: 12px 16px; }
  body.page-brochure .journey__head { margin-bottom: 8px; }
  body.page-brochure .journey__grid { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  body.page-brochure .journey__grid dd { font-size: calc(12.5px * var(--fz)); }
  body.page-brochure .tl-chart { padding: 14px 18px; }
  body.page-brochure .tl-chart ul { gap: 8px; }
  body.page-brochure .tl-chart li { grid-template-columns: 190px 1fr 110px; }
  body.page-brochure .tl-chart__weeks { white-space: nowrap; }
  body.page-brochure .tl-chart__track { grid-column: auto; }
  body.page-brochure .tl-chart__axis { display: none; }
  body.page-brochure .plans { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.page-brochure .plan-card { padding: 16px; box-shadow: none; }
  body.page-brochure .plan-card--featured { transform: none; background: var(--bg-elev); color: var(--ink); border: 2px solid var(--accent); }
  body.page-brochure .plan-card--featured h3, body.page-brochure .plan-card--featured .ticks, body.page-brochure .plan-card--featured .ticks .i,
  body.page-brochure .plan-card--featured .plan-card__lead, body.page-brochure .plan-card--featured .package__pay,
  body.page-brochure .plan-card--featured .plan-card__price small { color: var(--ink-2); }
  body.page-brochure .plan-card--featured .plan-card__for { color: var(--accent); }
  body.page-brochure .plan-card__price { font-size: calc(24px * var(--fz)); }
  body.page-brochure .plan-card .ticks { margin: 10px 0 12px; font-size: calc(12.5px * var(--fz)); gap: 4px; }
  body.page-brochure .package__pay { margin: 0; font-size: calc(12px * var(--fz)); }
  body.page-brochure .compare-title { margin: 20px 0 8px; }
  body.page-brochure .compare { overflow: visible; }
  body.page-brochure .compare__table { min-width: 0; font-size: calc(11.5px * var(--fz)); }
  body.page-brochure .compare__table th, body.page-brochure .compare__table td { padding: 5px 8px; }
  body.page-brochure .compare__table thead th { font-size: calc(12px * var(--fz)); }
  body.page-brochure .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-brochure .feature { padding: 14px 16px; }
  body.page-brochure .brochure-split { grid-template-columns: 1fr 1fr; gap: 24px; }
  .brochure-cover { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--accent); }
  .brochure-cover .brand { display: inline-flex; align-items: center; gap: 10px; }
  .brochure-cover p { margin: 0; max-width: 340px; font-size: calc(12px * var(--fz)); color: var(--muted); text-align: right; }
  .brochure-contact { margin-top: 20px; padding: 16px 20px; border: 2px solid var(--accent); border-radius: 16px; }
  .brochure-contact h2 { font-size: calc(20px * var(--fz)); margin-bottom: 6px; }
  .brochure-contact p { margin: 4px 0; }
}

/* care plans: what "hours of edits" means */
.care-note { max-width: 780px; margin: 28px auto 0; padding: 16px 20px; border-radius: var(--r); background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-2); font-size: calc(15px * var(--fz)); }

/* project page: "Prefer Jetpack Compose? See Pulse" */
.see-also { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 28px auto 0; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2); transition: border-color .2s, transform .3s var(--ease-out); }
.see-also:hover { text-decoration: none; border-color: var(--c); transform: translateY(-2px); }
.see-also b { color: var(--ink); }
.see-also__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-soft); color: var(--c); }
.see-also__arrow { flex: none; margin-left: auto; color: var(--c); }

/* ---------------------------------------------------------------- demo websites (/websites/) */
.demo-list { display: grid; gap: 18px; }
@media (min-width: 860px) { .demo-list { grid-template-columns: 1fr 1fr; } }
.demo-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.demo-card h2 { font-size: calc(26px * var(--fz)); }
.demo-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--demo, var(--accent)); color: #fff; }
.demo-card__kind { font: 600 calc(12px * var(--fz)) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--demo, var(--accent)); }
.demo-card .check-list { display: grid; gap: 6px; margin: 4px 0 8px; }
.demo-card .check-list li { display: flex; gap: 8px; align-items: baseline; font-size: calc(15px * var(--fz)); }
.demo-card .check-list .i { color: var(--good); flex: none; transform: translateY(2px); }
.demo-card > p:last-child { margin-top: auto; }
.demo-card--soon { border-style: dashed; background: transparent; }
.demo-card--soon .demo-card__icon { background: var(--bg-soft); color: var(--muted); }
.demo-note { margin-top: 20px; text-align: center; }

/* ---------------------------------------------------------------- articles and pages written in the dashboard */
.article-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s; }
.article-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.article-card h2 { font-size: calc(20px * var(--fz)); line-height: 1.2; }
.article-card p { color: var(--ink-2); margin: 0; }
.article-card__date { font: 600 calc(12px * var(--fz)) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.article-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.prose { font-size: calc(16.5px * var(--fz)); line-height: 1.75; }
.prose h2 { margin: 1.6em 0 .5em; font-size: calc(24px * var(--fz)); }
.prose h3 { margin: 1.4em 0 .4em; font-size: calc(19px * var(--fz)); }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; list-style: disc; display: grid; gap: .3em; }
.prose ol { list-style: decimal; }
.prose a { text-decoration: underline; }
.article__cta { margin: 36px 0 24px; }
.article__more { display: grid; gap: 6px; margin-top: 8px; }
.review-form { max-width: 640px; }
.review-form .stack { display: grid; gap: 14px; }

/* ---- Phones: price cards side by side, swiped (owner, round 16: "The pricing page is very ugly on phone, make it smaller font if
   you have to"). Three tall cards one under the other made the page about 13,600 px long on a 390 px phone. Now each set of
   cards is one row you swipe, with the next card peeking in from the right and dots under it, so it's plain there are more. */
@media screen and (max-width: 899px) {
  .plans { grid-auto-flow: column; grid-auto-columns: min(84%, 380px); grid-template-columns: none; gap: 12px; overflow-x: auto;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter, 20px) * -1);
    padding: 16px var(--gutter, 20px) 6px; scroll-padding-inline: var(--gutter, 20px); }
  .plans::-webkit-scrollbar { display: none; }
  .plans > .plan-card { scroll-snap-align: center; }
  .plans-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .plans-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--line-strong); transition: width .2s, background-color .2s; }
  .plans-dots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--accent); }
}
@media (min-width: 900px) { .plans-dots { display: none; } }

/* The pricing page on a phone: smaller words, less empty space, the same content */
@media screen and (max-width: 699px) {
  body.page-pricing { --fz: .88; }
  body.page-pricing .section { padding: 44px 0; }
  body.page-pricing .page-hero { padding: 28px 0 32px; }
  body.page-pricing .page-hero h1 { font-size: calc(30px * var(--ds, 1)); }
  body.page-pricing .page-hero__lead { margin-top: 12px; font-size: calc(15.5px * var(--fz)); }
  body.page-pricing .section-head { margin-bottom: 22px; }
  body.page-pricing .section-title { font-size: calc(25px * var(--ds, 1)); }
  body.page-pricing .section-lead { margin-top: 10px; font-size: calc(15px * var(--fz)); }
  body.page-pricing .plan-card { padding: 20px 18px; border-radius: var(--r-lg, 18px); }
  body.page-pricing .plan-card__price { margin-top: 10px; font-size: calc(28px * var(--fz)); }
  body.page-pricing .plan-card__lead { margin: 8px 0 2px; }
  body.page-pricing .plan-card .ticks { gap: 6px; margin: 12px 0 18px; }
  body.page-pricing .plan-card__badge { right: 16px; }
  body.page-pricing .price-guide { gap: 8px; }
  body.page-pricing .price-guide li { padding: 10px 12px; gap: 10px; }
  body.page-pricing .estimator__form { gap: 22px; padding: 16px; }
  body.page-pricing .type-grid { gap: 8px; }
  body.page-pricing .type-card__body { padding: 10px; }
  body.page-pricing .type-card__body small { font-size: calc(12px * var(--fz)); }
  body.page-pricing .estimate-card { padding: 18px; }
  body.page-pricing .care-note { margin-top: 18px; padding: 12px 14px; }
  body.page-pricing .faq-layout { gap: 20px; }
  body.page-pricing .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  body.page-pricing .segmented span { height: 100%; display: grid; place-items: center; padding: 7px 6px; text-align: center; line-height: 1.25; }
  body.page-pricing .check-chip span { padding: 6px 11px; }
}