/* ==========================================================================
   The classic pages — everything outside the virtual tour.
   Same palette and rhythm, but built to be read, printed and crawled.
   ========================================================================== */

.site { padding-top: var(--nav-h); }

/* ------------------------------------------------------- ambient backdrop -- */
/*
 * The backdrop used to be two 46vmax orbs under a 90px blur, both drifting on
 * an infinite loop, plus a full-bleed grid. Nothing on the page was ever still,
 * and the browser repainted a screen-sized blur for the life of every visit —
 * which is felt hardest on the mid-range Android the audience actually browses
 * on. It is now a fixed wash: the same depth, painted once.
 */
.bg-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(143,180,255,.03) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(143,180,255,.022) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(70% 46% at 50% 0%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(70% 46% at 50% 0%, #000, transparent 76%);
}
.bg-orb { position: absolute; border-radius: 50%; opacity: .55; }
.bg-orb--1 {
  width: 78vmax; height: 60vmax; top: -30vmax; left: -18vmax;
  background: radial-gradient(closest-side, rgba(27,63,160,.5), transparent 72%);
}
.bg-orb--2 {
  width: 62vmax; height: 52vmax; top: 28vh; right: -22vmax;
  background: radial-gradient(closest-side, rgba(20,48,137,.42), transparent 74%);
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(3, 6, 28, .55);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s, height .35s var(--ease);
}
.topbar.is-stuck {
  background: rgba(3, 6, 28, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 34px -20px rgba(0,0,0,.9);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; width: min(100% - 2.5rem, 1400px); }
.topbar__brand img { height: 28px; width: auto; }

.topnav { display: flex; align-items: center; gap: .3rem; }
.topnav__link {
  position: relative;
  padding: .55rem .85rem;
  font-size: .9rem; font-weight: 500; color: var(--text-soft);
  border-radius: var(--r-sm);
  transition: color .25s, background .25s;
}
.topnav__link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem;
  height: 2px; border-radius: 2px;
  background: var(--blue-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.topnav__link:hover { color: #fff; }
.topnav__link:hover::after, .topnav__link.is-active::after { transform: scaleX(1); }
.topnav__link.is-active { color: #fff; }
.topnav__cta { display: flex; gap: .5rem; margin-left: .8rem; }

.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); }
.burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .topnav {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: .1rem;
    padding: 1rem 1.25rem 1.6rem;
    background: rgba(4, 8, 34, .98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-115%);
    transition: transform .45s var(--ease);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .topnav.is-open { transform: none; }
  .topnav__link { padding: .8rem .6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .topnav__link::after { display: none; }
  .topnav__cta { margin: 1rem 0 0; }
  .topnav__cta .btn { flex: 1; }
}

/* ------------------------------------------------------------ page head -- */
.page-head { padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2rem, 5vh, 3rem); }
.page-head__inner { max-width: 760px; }
.page-head h1 { font-size: var(--step-4); margin: .8rem 0 1rem; }
.page-head p { color: var(--text-soft); font-size: var(--step-1); }
.page-head__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }

.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-dim); margin-bottom: .4rem; }
.crumbs a:hover { color: var(--blue-300); }
.crumbs span { opacity: .5; }

/* -------------------------------------------------------------- section -- */
.section { padding: clamp(2.5rem, 7vh, 5rem) 0; }
.section--tight { padding: clamp(1.6rem, 4vh, 2.6rem) 0; }
.section__head { max-width: 720px; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section__head h2 { font-size: var(--step-3); margin: .7rem 0 .7rem; }
.section__head p { color: var(--text-soft); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head--center .eyebrow::before { display: none; }

/* ------------------------------------------------------------ work grid -- */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .9rem 0 1.6rem;
}
.filters__scroll {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem;
  /* Without min-width:0 the strip refuses to shrink below its content and the
     row overflows the page instead of scrolling inside itself. */
  flex: 1 1 auto; min-width: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.filters__scroll .filter-pill { scroll-snap-align: start; }
.filters__scroll {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.filters__scroll.is-end {
  -webkit-mask-image: none; mask-image: none;
}
.filters__scroll::-webkit-scrollbar { display: none; }
.filter-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .86rem; font-weight: 500; color: var(--text-soft);
  white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.filter-pill:hover { color: #fff; border-color: var(--line-strong); transform: translateY(-2px); }
.filter-pill.is-active { background: var(--blue-500); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -12px var(--blue-500); }
.filter-pill b { font-family: var(--font-mono); font-size: .72rem; opacity: .7; }
.filters__right { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
@media (max-width: 760px) {
  /* flex-basis:100% with min-width:auto still grew to fit its children and
     pushed the row past the screen — it has to be allowed to shrink and wrap. */
  .filters__right { margin-left: 0; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .filters__right .input { flex: 1 1 10rem; min-width: 0; width: auto !important; }
  .filters__right .select { flex: 0 1 auto; min-width: 0; width: auto !important; }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(.9rem, 2vw, 1.5rem);
}

/*
 * The card used to tilt in 3D toward the pointer and drag a highlight across
 * its face. On a grid of thirteen it read as the page shivering, and it fought
 * the artwork for attention — which is the one thing on a portfolio card that
 * should hold it. Hover is now a straight lift, and the image does the talking.
 */
.work-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .3s;
}
.work-card:hover {
  /* translate/scale stay free for the scroll reveal, so the lift lives here. */
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.work-card__media { position: relative; overflow: hidden; background: #05091f; }
.work-card__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .5s var(--ease);
}
.work-card.is-landscape .work-card__media img { aspect-ratio: 16/10; }
.work-card.is-square .work-card__media img { aspect-ratio: 1/1; }
.work-card:hover .work-card__media img { transform: scale(1.04); }

.work-card__veil {
  position: absolute; inset: auto 0 0; padding: 3rem .9rem .9rem;
  background: linear-gradient(0deg, rgba(3,6,28,.94), transparent);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.work-card:hover .work-card__veil, .work-card:focus-within .work-card__veil { opacity: 1; transform: none; }

.work-card__body { padding: 1rem 1.1rem 1.15rem; display: grid; gap: .35rem; align-content: start; }
.work-card__cat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ice-200);
}
.work-card__cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--card-accent, var(--blue-500)); box-shadow: 0 0 8px var(--card-accent, var(--blue-500)); }
.work-card__title { font-family: var(--font-display); font-size: 1.05rem; color: #fff; line-height: 1.25; }
.work-card__sum { font-size: .84rem; color: var(--text-soft); line-height: 1.5; }
.work-card__foot {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--text-dim);
}
.work-card__foot span { display: inline-flex; align-items: center; gap: .28rem; }
.work-card__link { position: absolute; inset: 0; z-index: 2; }
.work-card__badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  padding: .25rem .6rem; border-radius: 99px;
  background: rgba(3,6,28,.8); border: 1px solid rgba(255,255,255,.22);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------- empty state -- */
.empty {
  display: grid; justify-items: center; gap: .9rem;
  padding: clamp(2.5rem, 8vh, 5rem) 1.5rem; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-xl);
  background: var(--surface);
}
.empty img { width: 130px; opacity: .8; }
.empty h3 { font-size: var(--step-1); }
.empty p { color: var(--text-soft); max-width: 40ch; }

/* ------------------------------------------------------------ pagination -- */
.pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 .7rem;
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); font-size: .88rem; color: var(--text-soft);
  transition: background .25s, color .25s, border-color .25s;
}
.pager a:hover { background: var(--surface-2); color: #fff; border-color: var(--line-strong); }
.pager .is-current { background: var(--blue-500); border-color: transparent; color: #fff; font-weight: 600; }
.pager .is-gap { border: 0; background: none; }

/* ------------------------------------------------------------ project ---- */
.case { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .case { grid-template-columns: 1fr; } }

.case__media {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); background: #05091f;
  box-shadow: var(--shadow-lg);
}
.case__media img { width: 100%; display: block; }

.case__side { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.2rem; }
@media (max-width: 940px) { .case__side { position: static; } }
/*
 * A short window leaves the pinned column no room to travel, and it parks its
 * last fact permanently under the floating buttons. Let it scroll away instead
 * — the collision then passes rather than sticking.
 */
@media (max-height: 760px) { .case__side { position: static; } }

.case__facts { display: grid; gap: .55rem; }
.case-fact {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.case-fact dt { color: var(--text-dim); }
.case-fact dd { margin: 0; font-weight: 600; text-align: right; }

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.1rem; color: var(--text-soft); }
.prose h2 { font-size: var(--step-2); margin: 2rem 0 .8rem; }
.prose h3 { font-size: var(--step-1); margin: 1.6rem 0 .6rem; }
.prose ul { margin: 0 0 1.1rem; display: grid; gap: .45rem; }
.prose ul li { position: relative; padding-left: 1.4rem; color: var(--text-soft); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
}
.prose a { color: var(--blue-300); border-bottom: 1px solid rgba(123,166,255,.4); }
.prose a:hover { color: #fff; border-color: #fff; }
.prose blockquote {
  margin: 1.4rem 0; padding: 1rem 1.3rem;
  border-left: 3px solid var(--blue-500);
  background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ice-100); font-size: 1.02rem;
}
.prose code {
  padding: .1rem .4rem; border-radius: 5px;
  background: var(--surface-2); font-family: var(--font-mono); font-size: .88em;
}
.prose img { border-radius: var(--r-md); margin: 1.2rem 0; }

.gallery-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.gallery-strip img { border-radius: var(--r-md); border: 1px solid var(--line); width: 100%; }

/* -------------------------------------------------------------- lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 2vmin;
  background: rgba(2,4,18,.92); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: var(--r-md); }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: #fff;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: var(--danger); }

/* ------------------------------------------------------------- services -- */
/*
 * A sticky index for a page that is one long stack of detail cards. It sits
 * directly under the fixed header and scrolls sideways rather than wrapping to
 * three rows of pills, which would cost more height than it saves.
 */
.jump {
  position: sticky; top: var(--nav-h); z-index: 40;
  padding: .7rem 0;
  background: rgba(3, 6, 28, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.jump__scroll {
  display: flex; gap: .4rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.jump__scroll.is-end { -webkit-mask-image: none; mask-image: none; }
.jump__scroll::-webkit-scrollbar { display: none; }
.jump__pill {
  flex: none; scroll-snap-align: start;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .84rem; color: var(--text-soft);
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.jump__pill:hover { color: #fff; border-color: var(--line-strong); background: var(--surface-2); }
/* Lights up while its section is the one on screen — set by site.js. */
.jump__pill.is-here { background: var(--blue-500); border-color: transparent; color: #fff; }

.svc-list { display: grid; gap: 1rem; }

.svc-detail {
  display: grid; gap: 1.4rem;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 300px);
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  border: 1px solid var(--line);
  /* Clears the fixed header *and* the sticky service index above it. */
  scroll-margin-top: calc(var(--nav-h) + 4.5rem);
  transition: border-color .35s, transform .4s var(--ease);
}
.svc-detail:hover { border-color: var(--line-strong); }
.svc-detail__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  color: var(--svc-accent, var(--blue-400));
  background: color-mix(in srgb, var(--svc-accent, #2F6BFF) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--svc-accent, #2F6BFF) 34%, transparent);
}
.svc-detail h2 { font-size: var(--step-2); margin-bottom: .5rem; }
.svc-detail__lead { color: var(--ice-100); font-size: 1.02rem; margin-bottom: .8rem; }
.svc-detail__body { color: var(--text-soft); }
.svc-detail__aside { display: grid; gap: .8rem; align-content: start; }
.deliverables { display: grid; gap: .4rem; }
.deliverables li { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem; color: var(--text-soft); }
.deliverables li svg { color: var(--success); flex: none; margin-top: .2em; }
.price-box {
  padding: .95rem 1.1rem; border-radius: var(--r-md);
  background: rgba(4,8,32,.55); border: 1px solid var(--line);
}
.price-box small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.price-box b { font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.price-box i { display: block; font-style: normal; font-size: .78rem; color: var(--ice-200); margin-top: .2rem; }

@media (max-width: 900px) {
  .svc-detail { grid-template-columns: 1fr; }
  .svc-detail__icon { width: 48px; height: 48px; }
}

/* ------------------------------------------------------------- booking --- */
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }

.calendar { display: grid; gap: .9rem; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.calendar__month { font-family: var(--font-display); font-size: 1.05rem; }
.calendar__nav { display: flex; gap: .35rem; }
.calendar__nav button {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--text-soft);
  transition: background .2s, color .2s;
}
.calendar__nav button:hover:not([disabled]) { background: var(--surface-2); color: #fff; }
.calendar__nav button[disabled] { opacity: .3; pointer-events: none; }

.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.calendar__dow {
  text-align: center; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); padding-bottom: .3rem;
}
.cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid transparent;
  font-size: .88rem; color: var(--text-soft);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.cal-day:hover:not(:disabled) { background: var(--surface-2); color: #fff; transform: translateY(-2px); }
.cal-day.is-today { border-color: var(--line-strong); font-weight: 700; color: #fff; }
.cal-day.is-selected { background: var(--blue-500); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -10px var(--blue-500); }
.cal-day:disabled { opacity: .22; pointer-events: none; }
.cal-day.is-blank { pointer-events: none; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.slot {
  padding: .65rem .4rem; text-align: center;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--text-soft);
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--blue-400); color: #fff; transform: translateY(-2px); }
.slot.is-selected { background: var(--blue-500); border-color: transparent; color: #fff; }
.slot:disabled { opacity: .3; text-decoration: line-through; pointer-events: none; }

.summary-card { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: .8rem; }
@media (max-width: 900px) { .summary-card { position: static; } }
@media (max-height: 760px) { .summary-card { position: static; } }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-row dt { color: var(--text-dim); }
.summary-row dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------- quote builder -- */
.quote-list { display: grid; gap: .5rem; }
.quote-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem;
  padding: .75rem .9rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .25s, background .25s;
  cursor: pointer;
}
.quote-item:has(input:checked) { border-color: var(--blue-500); background: rgba(47,107,255,.1); }
.quote-item__name { font-size: .92rem; }
.quote-item__name em { display: block; font-style: normal; font-size: .74rem; color: var(--text-dim); }
.quote-item__price { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.qty {
  display: flex; align-items: center; gap: .2rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .15rem;
}
.qty button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--text-soft); }
.qty button:hover { background: var(--surface-2); color: #fff; }
.qty input {
  width: 34px; text-align: center; background: none; border: 0;
  font-family: var(--font-mono); font-size: .85rem; color: #fff;
  -moz-appearance: textfield;
}
/*
 * Fingers get bigger controls. The quote builder is nothing but these steppers
 * — eighteen of them — and at the 26px the mouse gets, picking a quantity on a
 * phone means aiming at a target smaller than the fingertip pressing it.
 */
@media (pointer: coarse) {
  .qty { padding: .2rem; gap: .1rem; }
  .qty button { width: 36px; height: 36px; }
  .qty input { width: 40px; font-size: .95rem; }
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.estimate {
  padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(47,107,255,.2), rgba(47,107,255,.05));
  border: 1px solid rgba(47,107,255,.4);
}
.estimate small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ice-200); }
.estimate b { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 2rem); color: #fff; margin: .2rem 0; }
.estimate span { font-size: .8rem; color: var(--text-soft); }

@media (max-width: 620px) {
  .quote-item { grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; }
  .quote-item .qty, .quote-item__price { grid-column: 2; justify-self: start; }
}

/* --------------------------------------------------------------- tracker -- */
.track-hero { max-width: 560px; margin-inline: auto; text-align: center; }
.track-form { display: flex; gap: .6rem; margin-top: 1.5rem; }
.track-form .input { text-align: center; font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }

.timeline { display: grid; gap: 0; margin-top: 1.5rem; }
.tl-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1rem; }
.tl-step__rail { display: grid; justify-items: center; }
.tl-step__dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text-dim);
}
.tl-step.is-done .tl-step__dot { background: var(--success); border-color: transparent; color: #04211a; }
.tl-step.is-current .tl-step__dot { background: var(--blue-500); border-color: transparent; color: #fff; animation: pulse-ring 2.4s infinite; }
.tl-step__line { flex: 1; width: 2px; min-height: 26px; background: var(--line); margin: 4px 0; }
.tl-step.is-done .tl-step__line { background: var(--success); }
.tl-step:last-child .tl-step__line { display: none; }
.tl-step__body { padding-bottom: 1.2rem; }
.tl-step__body b { font-family: var(--font-display); color: #fff; }
.tl-step__body time { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); margin-top: .1rem; }
.tl-step__body p { font-size: .88rem; color: var(--text-soft); margin-top: .3rem; }

.progress-ring { display: grid; place-items: center; position: relative; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.progress-ring .bg { stroke: rgba(143,180,255,.15); }
.progress-ring .fg { stroke: var(--blue-500); transition: stroke-dashoffset 1.2s var(--ease); }
.progress-ring b {
  position: absolute; font-family: var(--font-display); font-size: 1.6rem; color: #fff;
}

/* ----------------------------------------------------------------- FAQ ---- */
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: .55rem; overflow: hidden;
  transition: border-color .25s, background .25s;
}
.faq-item[open] { border-color: var(--line-strong); background: var(--surface-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1rem; color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.3rem; color: var(--blue-400);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 1.15rem 1.15rem; color: var(--text-soft); font-size: .92rem; line-height: 1.65; }

/* -------------------------------------------------------------- journal -- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; }
.post-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  transition: transform .25s var(--ease), border-color .25s, box-shadow .3s;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.post-card__media { aspect-ratio: 16/9; overflow: hidden; background: #05091f; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: 1.1rem; display: grid; gap: .45rem; align-content: start; }
.post-card__meta { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.post-card__title { font-family: var(--font-display); font-size: 1.1rem; color: #fff; line-height: 1.3; }
.post-card__excerpt { font-size: .86rem; color: var(--text-soft); }

/* --------------------------------------------------------------- clients -- */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.logo-wall__item {
  display: grid; place-items: center; gap: .35rem;
  padding: 1.1rem .8rem; text-align: center;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .3s, transform .3s var(--ease);
}
.logo-wall__item:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.logo-wall__item b { font-family: var(--font-display); font-size: .92rem; color: #fff; }
.logo-wall__item span { font-size: .74rem; color: var(--text-dim); }

/* -------------------------------------------------------------- CTA band -- */
.cta-band {
  position: relative; overflow: hidden;
  margin-top: clamp(3rem, 8vh, 6rem);
  background: linear-gradient(150deg, var(--royal-600) 0%, var(--navy-800) 62%);
  border-top: 1px solid var(--line);
}
.cta-band::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 40vmax; height: 40vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,255,.5), transparent 66%);
  filter: blur(60px);
}
.cta-band__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;
  padding: clamp(2.4rem, 6vw, 4rem) 0 0;
}
.cta-band__title { font-size: var(--step-4); margin: .6rem 0 .8rem; }
.cta-band__copy > p { color: var(--ice-100); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 clamp(2.4rem, 6vw, 4rem); }
.cta-band__mascot { width: clamp(180px, 26vw, 330px); align-self: end; filter: drop-shadow(0 24px 44px rgba(0,0,0,.55)); }
@media (max-width: 820px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__mascot { display: none; }
  .cta-band__actions { margin-bottom: 2.5rem; }
}

/* ----------------------------------------------------------------- foot -- */
.foot { padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; border-top: 1px solid var(--line); background: rgba(3,6,28,.7); }
.foot__grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr);
}
@media (max-width: 900px) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

.foot__logo { height: 26px; width: auto; margin-bottom: 1rem; }
.foot__tag { color: var(--text-soft); font-size: .92rem; max-width: 34ch; }
.foot__promise {
  margin-top: .6rem; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-300);
}
.foot__socials { display: flex; gap: .45rem; margin-top: 1.1rem; }
.foot__socials a {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.foot__socials a:hover { background: var(--blue-500); border-color: transparent; color: #fff; transform: translateY(-3px); }

.foot__col { display: grid; gap: .5rem; align-content: start; }
.foot__col h3 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: .3rem;
}
.foot__col a, .foot__col span {
  display: flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--text-soft);
  transition: color .2s;
}
.foot__col a:hover { color: #fff; }
.foot__col svg { color: var(--blue-400); flex: none; }

/*
 * Fourteen footer links stacked at a 23px line-box is a column of near-misses
 * on a phone. Giving each one a 40px row costs a little height and makes the
 * whole footer usable with a thumb.
 */
@media (pointer: coarse), (max-width: 560px) {
  .foot__col { gap: 0; }
  .foot__col a, .foot__col span { min-height: 40px; }
  .foot__made a { display: inline-flex; align-items: center; min-height: 36px; }
}

.foot__sub { position: relative; display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.foot__sub .input { flex: 1; min-width: 150px; padding: .65rem .85rem; font-size: .85rem; }
.foot__sub .form-note { flex-basis: 100%; }

.foot__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--text-dim);
}
.foot__made a { color: var(--text-soft); }
.foot__made a:hover { color: var(--blue-300); }

/* ------------------------------------------------------------- floaters -- */
/* Shared by both floating buttons so they stay on one vertical axis. */
.site { --float-inset: clamp(1rem, 2.5vw, 1.8rem); }

.wa-float {
  position: fixed; right: var(--float-inset); bottom: var(--float-inset);
  z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 56px; height: 56px; padding: 0;
  border-radius: var(--r-pill);
  background: #25D366; color: #04331a;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 14px 34px -12px rgba(37,211,102,.85);
  transition: width .32s var(--ease), padding .32s var(--ease),
              transform .3s var(--ease-back), box-shadow .3s,
              opacity .3s var(--ease), visibility .3s;
}
.wa-float svg { flex: none; }
/*
 * The label used to be permanently visible above 720px, which made the button
 * wide enough to cover a whole table cell or a submit button. It now opens
 * only on hover or keyboard focus, so at rest the control is a single disc.
 */
.wa-float span {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0;
  transition: max-width .32s var(--ease), opacity .24s var(--ease);
}
@media (hover: hover) and (min-width: 720px) {
  .wa-float:hover, .wa-float:focus-visible {
    width: auto; padding: 0 1.15rem 0 1rem;
    transform: translateY(-3px) scale(1.03);
  }
  .wa-float:hover span, .wa-float:focus-visible span { max-width: 7ch; opacity: 1; }
}
.wa-float:focus-visible { width: auto; padding: 0 1.15rem 0 1rem; }
.wa-float:focus-visible span { max-width: 7ch; opacity: 1; }

/*
 * Both floaters step aside for the closing CTA band and the footer. Those are
 * the one part of every page that is itself a call to action, so a bubble
 * parked on top of it is pure obstruction.
 */
.wa-float.is-tucked, .to-top.is-tucked {
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  pointer-events: none;
}

/*
 * Back-to-top used to live in the opposite corner, bottom-left. Two floating
 * buttons on opposite sides means content is obstructed from both edges at
 * once, and the left-hand one lands on the *start* of every line it covers —
 * which is the half of a line you cannot read around. Stacked above WhatsApp
 * it obstructs one column instead of two, and only ever line ends.
 */
.to-top {
  /* right = the float inset + half the 56px WhatsApp disc - half of this 40px
     one, so the two sit on a shared centre line. */
  position: fixed;
  right: calc(var(--float-inset) + 8px);
  bottom: calc(var(--float-inset) + 56px + .6rem);
  z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6,10,40,.82); border: 1px solid var(--line); color: var(--ice-100);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease), background .25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top.is-shown.is-tucked { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }
.to-top:hover { background: var(--blue-500); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------------- print -- */
@media print {
  .topbar, .foot, .cta-band, .wa-float, .to-top, .bg-field, .filters, .skip-link { display: none !important; }
  body { background: #fff; color: #111; padding-top: 0; }
  .site { padding-top: 0; }
  a { color: #111; }
  .card, .glass, .svc-detail, .pack, .rate-line { border-color: #ccc !important; background: #fff !important; }
  h1, h2, h3, .rate-line__price, .pack__price b { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .muted, .rate-line__name, .pnl__foot { color: #444 !important; }
}