/* ==========================================================================
   MB Elevator — design system
   Ink + steel + brass. Hairline rules instead of shadows. Machined radii.
   ========================================================================== */

:root {
  /* Colour */
  --ink:        #0B1A2B;
  --ink-2:      #14283E;
  --ink-3:      #1E3652;
  --paper:      #FFFFFF;
  --steel:      #F5F7F9;
  --steel-2:    #EAEEF2;
  --rule:       #DDE3E9;
  --rule-dark:  rgba(255, 255, 255, .16);
  --brass:      #C08A2E;
  --brass-lift: #E3B05C;
  --muted:      #5C6B7A;
  --muted-dark: rgba(255, 255, 255, .66);
  --alert:      #B4341F;

  /* Type */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Rhythm */
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --band-y: clamp(64px, 9vw, 116px);
  --radius: 2px;
  --radius-btn: 3px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { left: 16px; top: 16px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- primitives -- */

.wrap {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.band { padding-block: var(--band-y); }
.band--steel { background: var(--steel); }
.band--ink   { background: var(--ink); color: #fff; }
.band--tight { padding-block: clamp(40px, 6vw, 72px); }

.band--ink h1, .band--ink h2, .band--ink h3 { color: #fff; }
.band--ink p  { color: var(--muted-dark); }

/* Eyebrow: the small mono label that opens a section. */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.band--ink .eyebrow { color: var(--brass-lift); }

/* Post meta: "Category · Date · Read time" line on blog cards and posts. */
.post-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--muted);
  margin-bottom: 6px;
}
.tile__body .post-meta { margin-bottom: 8px; }
.pagehero .post-meta { color: rgba(255,255,255,.65); margin-top: 8px; margin-bottom: 0; }
.band--ink .post-meta { color: var(--muted-dark); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); letter-spacing: -.01em; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
}
.band--ink .lede { color: var(--muted-dark); }

.prose p + p { margin-top: 1.1em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.band--ink .prose a { color: #fff; }

/* In-body subheadings: distinct, smaller scale from the site's
   marketing-section h2/h3 — these sit inside a ~74ch reading column,
   not a full-width section. */
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: 1.7em;
  margin-bottom: .6em;
}
.prose h3 {
  font-size: 1.05rem;
  margin-top: 1.4em;
  margin-bottom: .5em;
}
.prose > :first-child { margin-top: 0; }

/* Quill (admin rich-text editor) stores lists as <ol><li data-list="...">
   regardless of bullet/ordered type, so the marker has to come from the
   data-list attribute rather than the wrapping tag. */
.prose ul, .prose ol { padding-left: 1.4em; margin: 1em 0; }
.prose li { margin: .3em 0; }
.prose li[data-list="bullet"] { list-style: disc; }
.prose li[data-list="ordered"] { list-style: decimal; }
.prose li[data-list="checked"], .prose li[data-list="unchecked"] { list-style: none; }
.prose .ql-ui { display: none; }

/* Section header: eyebrow + heading left, supporting note right (desktop).
   Mobile-first: stacked single column until there is room to split. */
.sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .sechead {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(20px, 4vw, 64px);
    align-items: start;
    padding-bottom: 30px;
    margin-bottom: 44px;
  }
}
.band--ink .sechead { border-bottom-color: var(--rule-dark); }
.sechead p { color: var(--muted); margin: 0; }
.band--ink .sechead p { color: var(--muted-dark); }

.textlink {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  display: inline-block;
  transition: color .18s ease, border-color .18s ease;
}
.textlink::after { content: ' \2192'; }
.textlink:hover { color: var(--brass); }
.band--ink .textlink { color: #fff; }
.band--ink .textlink:hover { color: var(--brass-lift); }

/* -------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: #A8761F; }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }

.btn--ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--onink { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.btn--onink:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* ------------------------------------------------------------- ticker -- */

.ticker {
  background: var(--ink);
  color: var(--muted-dark);
  font-size: 13.5px;
  border-bottom: 1px solid var(--rule-dark);
}
.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  padding-block: 8px;
}
.ticker__brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  color: #fff;
  white-space: nowrap;
}
.ticker__brand strong { font-weight: 700; }
.ticker__brand-sep, .ticker__brand-desc { display: none; }
.ticker__brand-sep { color: var(--rule-dark); }
@media (min-width: 700px) {
  .ticker__brand-sep, .ticker__brand-desc { display: inline; }
}

.ticker__message {
  display: none;
  margin: 0;
  text-align: center;
}
@media (min-width: 900px) {
  .ticker__message { display: block; }
}

.ticker__links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ticker__links a {
  color: var(--brass);
  text-decoration: none;
  font-weight: 600;
}
.ticker__links a:hover { color: var(--brass-lift); }

/* ----------------------------------------------------------- masthead -- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease;
}
.masthead[data-stuck] { box-shadow: 0 1px 16px rgba(11, 26, 43, .07); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 76px;
}

.masthead__brand { flex: none; }
.masthead__brand img { width: 164px; height: auto; }

.masthead__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.masthead__actions .btn { display: none; }

/* --------------------------------------------------------------- nav -- */

.mainnav { display: none; }

.mainnav__list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.6vw, 22px);
}

.mainnav__list > li > a,
.mainnav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.mainnav__list > li > a:hover,
.mainnav__trigger:hover,
.mainnav__list > li > a[aria-current="page"],
.mainnav__trigger[data-current="true"],
.mainnav__trigger[aria-expanded="true"] {
  border-bottom-color: var(--brass);
}

.mainnav__chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.mainnav__trigger[aria-expanded="true"] .mainnav__chev { transform: translateY(1px) rotate(-135deg); }

/* ---------------------------------------------------------- megamenu -- */

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 40px -28px rgba(11, 26, 43, .3);
}
.megamenu[hidden] { display: none; }

.megamenu__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: clamp(28px, 5vw, 72px);
  padding-block: 44px 50px;
}

.megamenu__lede h2 {
  font-size: 1.34rem;
  line-height: 1.24;
  margin-bottom: 20px;
  max-width: 22ch;
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.megamenu__grid > li { background: var(--paper); }
.megamenu__grid a {
  display: block;
  padding: 16px 18px;
  height: 100%;
  text-decoration: none;
  transition: background .16s ease;
}
.megamenu__grid a:hover { background: var(--steel); }

.megamenu__title {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 4px;
}
.megamenu__blurb {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ------------------------------------------------------------- burger -- */

.burger {
  width: 44px; height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform .22s ease, opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width: 1023px) {
  .mainnav[data-open] {
    display: block;
    position: fixed;
    inset: 118px 0 0;
    z-index: 99;
    background: var(--paper);
    overflow-y: auto;
    padding: 8px var(--gutter) 100px;
    border-top: 1px solid var(--rule);
  }
  .mainnav[data-open] .mainnav__list { display: block; }
  .mainnav[data-open] .mainnav__list > li { border-bottom: 1px solid var(--rule); }
  .mainnav[data-open] .mainnav__list > li > a,
  .mainnav[data-open] .mainnav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 17px 0;
    font-size: 17px;
    border-bottom: 0;
  }
  .mainnav[data-open] .megamenu {
    position: static;
    border: 0;
    box-shadow: none;
    background: var(--steel);
  }
  .mainnav[data-open] .megamenu__inner {
    display: block;
    width: 100%;
    padding: 4px 0 18px;
  }
  .mainnav[data-open] .megamenu__lede { display: none; }
  .mainnav[data-open] .megamenu__grid { border: 0; background: none; gap: 0; display: block; }
  .mainnav[data-open] .megamenu__grid a { padding: 12px 14px; background: none; }
  .mainnav[data-open] .megamenu__blurb { display: none; }
}

@media (min-width: 1024px) {
  .mainnav { display: block; }
  .masthead__actions .btn { display: inline-flex; }
  .burger { display: none; }
  .mainnav__has-menu { position: static; }
}

/* --------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--ink) 4%, rgba(11, 26, 43, .84) 46%, rgba(11, 26, 43, .5) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(76px, 11vw, 148px) clamp(48px, 6vw, 76px);
}
.hero h1 { max-width: 18ch; margin-bottom: 22px; }
.hero .lede { color: rgba(255,255,255,.8); margin-bottom: 34px; max-width: 52ch; }
.hero .eyebrow { color: var(--brass-lift); display: flex; align-items: center; gap: 10px; }
.hero .eyebrow::before { content: ''; display: inline-block; width: 22px; height: 2px; background: var(--brass-lift); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero trust badges — checkmark chips under the CTAs. */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.9);
}
.hero__badges li::before {
  content: '\2713';
  color: var(--brass-lift);
  font-weight: 700;
}

/* Hero stats — floating card overlapping the base of the hero image. */
.hero-stats {
  position: relative;
  z-index: 1;
  margin-top: clamp(-64px, -6vw, -40px);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 46px -20px rgba(11, 26, 43, .35);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.hero-stats__cell {
  padding: 26px 20px 22px;
  border-right: 1px solid var(--rule);
}
.hero-stats__cell:last-child { border-right: 0; }
.hero-stats__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
}
.hero-stats__label {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats__cell:nth-child(2n) { border-right: 0; }
}

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

.pagehero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.pagehero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--ink) 8%, rgba(11,26,43,.78) 70%);
}
.pagehero__inner {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
}
.pagehero h1 { max-width: 18ch; margin-bottom: 18px; }
.pagehero .lede { color: rgba(255,255,255,.8); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 22px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brass-lift); }
.crumbs li + li::before { content: '/ '; opacity: .5; }

/* ---------------------------------------------------- blog post page -- */

/* Fine technical-drawing grid behind the hero, fading toward the bottom
   edge where the cover image overlaps it. One placement only, tied to
   the article's opening moment, not repeated elsewhere on the page. */
.pagehero--post {
  position: relative;
  padding-bottom: clamp(120px, 14vw, 190px);
}
.pagehero--post::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0));
  pointer-events: none;
}
.pagehero--post .wrap { position: relative; }

/* Category badge: brass accent, sharp corners matching --radius. */
.post-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-lift);
  border: 1px solid rgba(227, 176, 92, .45);
  border-radius: var(--radius);
  padding: 5px 11px;
  margin-bottom: 16px;
}

/* Cover image breaks out of the dark hero into the light body — the
   negative margin mirrors .pagehero--post's reserved padding-bottom so
   both scale together at any viewport width. */
.postcover {
  position: relative;
  margin: clamp(-190px, -14vw, -120px) 0 clamp(40px, 6vw, 64px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--steel-2);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 48px -28px rgba(11, 26, 43, .35);
}
.postcover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.byline {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: clamp(28px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.byline__photo { flex: none; width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--rule); }
.byline p { color: var(--muted); font-size: 14.5px; max-width: 56ch; }
.byline strong { color: var(--ink); }

.postgrid { display: grid; gap: clamp(32px, 5vw, 56px); }
.postgrid__body { max-width: 74ch; }

@media (min-width: 960px) {
  .postgrid { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .postgrid__toc { order: -1; position: sticky; top: 96px; }
}

/* Table of contents: reuses the site's native <details> disclosure
   pattern (see .faq) instead of adding JS. Default-open so no-JS
   visitors always see the full list; the summary marker still lets
   anyone collapse it, which matters most on mobile where it sits
   inline above the article rather than pinned in a sidebar. */
.toc { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; }
.toc__summary {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  cursor: pointer;
  list-style: none;
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after { content: '\2212'; float: right; color: var(--muted); }
.toc:not([open]) .toc__summary::after { content: '+'; }
.toc__list { margin-top: 12px; }
.toc__list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc__list a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid var(--rule);
  padding-left: 10px;
  display: block;
}
.toc__list a:hover { color: var(--ink); border-left-color: var(--brass); }

/* --------------------------------------------------------------- grid -- */

/* Hairline card grid: 1px gaps over a rule-coloured backdrop. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(328px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.band--ink .tiles { background: var(--rule-dark); border-color: var(--rule-dark); }

.tile {
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.tile[hidden] { display: none; }
.band--ink .tile { background: var(--ink); }

.tile__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel-2); }
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media img { transform: scale(1.045); }

.tile__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.tile__body h3 { margin-bottom: 8px; }
.tile__body p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.band--ink .tile__body p { color: var(--muted-dark); }
.tile__body .textlink { margin-top: auto; align-self: flex-start; }

.tile__index {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--brass);
  margin-bottom: 12px;
}

/* Link-only tile, for services and areas. */
.tile--plain .tile__body { padding-block: 26px 28px; }

/* Testimonial client photo/logo */
.testimonial__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  display: block;
}

/* ---------------------------------------------------------- split row -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .split--flip .split__media { order: 2; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Caption plate that sits over the bottom of a photo. */
.plate {
  position: relative;
  margin: -54px 0 0 0;
  margin-inline: clamp(16px, 4%, 34px) clamp(28px, 12%, 78px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.plate strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 3px; }
.plate span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.split__copy h2 { margin-bottom: 18px; }
.split__copy .lede { margin-bottom: 24px; }

/* ------------------------------------------------------------- checks -- */

.checks { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.band--ink .checks { background: var(--rule-dark); border-block-color: var(--rule-dark); }
.checks li {
  background: var(--paper);
  padding: 15px 0 15px 30px;
  position: relative;
  font-size: 15.5px;
}
.band--ink .checks li { background: var(--ink); color: rgba(255,255,255,.86); }
.checks li::before {
  content: '';
  position: absolute;
  left: 4px; top: 22px;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--brass);
  border-bottom: 1.6px solid var(--brass);
  transform: rotate(-45deg);
}
.checks a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.checks a:hover { border-bottom-color: var(--brass); }

/* Two/three column feature notes. */
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.band--ink .notes { background: var(--rule-dark); border-color: var(--rule-dark); }
.note { background: var(--paper); padding: 26px 24px 28px; }
.band--ink .note { background: var(--ink); }
.note h3 { margin-bottom: 9px; }
.note p { font-size: 15px; color: var(--muted); }
.band--ink .note p { color: var(--muted-dark); }
.note__mark {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}

/* ===========================================================================
   SIGNATURE — the spec datasheet
   Every product page carries one: blueprint plate on the left, ruled
   tabular data on the right. Mono figures, unit suffixes, hairline rows.
   =========================================================================== */

.datasheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (min-width: 940px) {
  .datasheet { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  /* Landscape drawings read poorly in a half column, so they span the row
     and the part legend runs beneath them in two columns. */
  .datasheet--wide { grid-template-columns: minmax(0, 1fr); }
  .datasheet--wide .spectable {
    columns: 2;
    column-gap: 48px;
  }
  .datasheet--wide .spectable__row { break-inside: avoid; }
}

.blueprint {
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
}
.blueprint img {
  width: 100%;
  border-radius: var(--radius);
}
.blueprint figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 4px 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.blueprint figcaption strong { color: var(--brass-lift); font-weight: 500; }

.spectable { border-top: 1px solid var(--ink); }
.spectable__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.spectable__key {
  font-size: 14.5px;
  color: var(--muted);
}
.spectable__val {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.spectable__val em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 5px;
}
.spectable__note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

/* Stacked variant: a numbered part with its explanation, not a key/value pair. */
.spectable__row--stack { grid-template-columns: minmax(0, 1fr); }
.spectable__num { font-family: var(--mono); font-size: 12px; color: var(--brass); }
.spectable__name {
  display: block;
  font-family: var(--display);
  font-size: 15.5px;
  margin: 4px 0 5px;
}
.spectable__desc { font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------- how it works -- */

/* An ordered sequence — numbering here encodes real operating order. */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.step {
  counter-increment: step;
  background: var(--paper);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px;
  padding: 24px 0;
  align-items: start;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--brass);
  padding-top: 4px;
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--muted); font-size: 15.5px; max-width: 68ch; }
.band--ink .steps { background: var(--rule-dark); border-block-color: var(--rule-dark); }
.band--ink .step { background: var(--ink); }
.band--ink .step p { color: var(--muted-dark); }

/* ------------------------------------------------------------ slider -- */

.slider { position: relative; }

.slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider__viewport::-webkit-scrollbar { display: none; }

/* Grid track, not flex: grid-auto-columns resolves against the scroller's
   own width, so the container reports a correct scrollWidth. A flex track
   sizes to the scroller and its items overflow without extending scroll. */
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.slide {
  scroll-snap-align: start;
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
  .slide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

.slide__media { position: relative; background: var(--steel-2); }
.slide__media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.slide__tag {
  position: absolute;
  left: 0; top: 22px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px 7px 20px;
}

.slide__body { padding: clamp(26px, 3.4vw, 44px); }
.slide__body h3 {
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  margin-bottom: 12px;
}
.slide__body > p { color: var(--muted); margin-bottom: 22px; max-width: 52ch; }

.slide__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.slide__spec { background: var(--paper); padding: 14px 15px; }
.slide__spec dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.slide__spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.slide__pros { display: grid; gap: 10px; }
.slide__pro { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; font-size: 14.5px; align-items: baseline; }
.slide__pro dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 2px;
}
.slide__pro--up dt { color: #1E7A4D; }
.slide__pro--down dt { color: var(--alert); }
.slide__pro dd { margin: 0; color: var(--muted); }

.slider__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.slider__btn {
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.slider__btn:hover:not(:disabled) { border-color: var(--ink); }
.slider__btn:disabled { opacity: .32; cursor: default; }
.slider__btn svg { width: 17px; height: 17px; }

.slider__dots { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.slider__dot {
  width: 58px; height: 42px;
  padding: 0;
  border: 2px solid transparent;
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  background: var(--steel-2);
  cursor: pointer;
  overflow: hidden;
  opacity: .5;
  transition: opacity .2s ease, border-color .2s ease;
}
.slider__dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider__dot:hover { opacity: .8; }
.slider__dot[aria-selected="true"] { opacity: 1; border-color: var(--brass); }

.slider__count {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ------------------------------------------------------- testimonials -- */

.testi-slider { position: relative; }

.testi-slider__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 44px 2px 14px;
  margin-top: -44px;
}
.testi-slider__viewport::-webkit-scrollbar { display: none; }

.testi-slider__track {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.testi {
  flex: 0 0 82%;
  scroll-snap-align: center;
  display: flex;
}
/* Blank leading/trailing slide, same width as a real card, so the first
   and last testimonial can still be scrolled all the way to centre. */
.testi-spacer {
  flex: 0 0 82%;
}
@media (min-width: 720px) {
  .testi { flex-basis: calc((100% - 44px) / 3); }
  .testi-spacer { flex-basis: calc((100% - 44px) / 3); }
}

.testi__card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 40px 26px 30px;
  text-align: center;
  transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.testi__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: -68px auto 16px;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  transition: border-color .35s ease;
}
.testi__photo--fallback {
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  background: var(--steel-2);
  color: var(--ink);
}

.testi__stars { color: var(--brass); letter-spacing: 3px; font-size: 14px; margin-bottom: 12px; transition: color .35s ease; }
.testi__name { margin-bottom: 4px; font-size: 1.05rem; transition: color .35s ease; }
.testi__role { color: var(--muted); font-size: 13px; margin-bottom: 16px; transition: color .35s ease; }
.testi__quote { color: var(--muted); font-size: 14.5px; line-height: 1.6; transition: color .35s ease; }

.testi.is-active .testi__card {
  background: var(--ink);
  border-color: var(--ink);
  transform: scale(1.045);
  box-shadow: 0 24px 46px -20px rgba(11, 26, 43, .5);
}
.testi.is-active .testi__photo { border-color: var(--ink); }
.testi.is-active .testi__photo--fallback { background: var(--ink-2); color: var(--brass-lift); }
.testi.is-active .testi__stars { color: var(--brass-lift); }
.testi.is-active .testi__name { color: #fff; }
.testi.is-active .testi__role { color: var(--muted-dark); }
.testi.is-active .testi__quote { color: rgba(255, 255, 255, .82); }

.testi-slider__dots { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-items: center; }
.testi-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testi-slider__dot:hover { background: var(--muted); }
.testi-slider__dot[aria-selected="true"] { background: var(--brass); transform: scale(1.35); }

/* ---------------------------------------------------------- projects -- */

.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.project { background: var(--paper); display: flex; flex-direction: column; }
.project__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--steel-2); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.project:hover .project__media img { transform: scale(1.04); }
.project__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.project__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 11px;
}
.project__body h3 { margin-bottom: 8px; }
.project__body p { font-size: 14.5px; color: var(--muted); }
.project__credit {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.project__credit a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.project__credit a:hover { border-bottom-color: var(--brass); }

.project__scope {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ---------------------------------------------------------- coverage -- */

.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr)); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.area {
  background: var(--ink);
  padding: 22px 22px 24px;
  text-decoration: none;
  transition: background .18s ease;
}
.area:hover { background: var(--ink-2); }
.area strong { display: block; font-family: var(--display); font-size: 1.05rem; color: #fff; margin-bottom: 5px; }
.area span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ------------------------------------------------ list search/filter -- */

.faq-search, .list-search {
  display: block;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
}
.faq-search:focus, .list-search:focus { outline: 2px solid var(--brass); outline-offset: 2px; }

.faq-filters, .list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.faq-filters button, .list-filters button {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.faq-filters button:hover, .list-filters button:hover { border-color: var(--brass); }
.faq-filters button[aria-pressed="true"], .list-filters button[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.faq-empty, .list-empty { padding-block: 30px; color: var(--muted); }

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.03rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding-bottom: 22px; color: var(--muted); max-width: 74ch; }

/* ----------------------------------------------------------- cta band -- */

.cta {
  background: var(--brass);
  color: #fff;
}
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding-block: clamp(44px, 6vw, 68px);
}
@media (min-width: 860px) {
  .cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}
.cta h2 { color: #fff; margin-bottom: 10px; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.86); max-width: 56ch; }
.cta .btn--ink { background: var(--ink); }
.cta .btn--ink:hover { background: #06121F; }

/* -------------------------------------------------------------- form -- */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 16px;
  transition: border-color .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 128px; resize: vertical; }
.field--half { }
@media (min-width: 620px) {
  .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
.field__error { font-size: 13px; color: var(--alert); }

.field__opt { text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .8; }

/* Honeypot: present for bots, never shown or focusable for people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Emergency call card, beside the enquiry form. */
.callcard {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  margin-bottom: 28px;
}
.callcard h2 { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.callcard p { color: var(--muted-dark); font-size: 15px; }
.callcard .eyebrow { color: var(--brass-lift); }
.callcard__number {
  margin: 20px 0;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -.01em;
}
.callcard__number a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 4px; }
.callcard__number a:hover { color: var(--brass-lift); }

.deflist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}
.deflist dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 16px;
}
.deflist dd {
  margin: 4px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.deflist a { color: inherit; }

/* Google Maps embed — contact page location. */
.map-embed {
  aspect-ratio: 16 / 6;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .map-embed { aspect-ratio: 4 / 3; }
}

.alert {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  background: var(--steel);
  font-size: 15px;
}
.alert--bad { border-left-color: var(--alert); }

/* ------------------------------------------------------------ footer -- */

.footer { background: var(--ink); color: var(--muted-dark); padding-block: clamp(52px, 7vw, 84px) 30px; font-size: 14.5px; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 64px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 980px) {
  .footer__top { grid-template-columns: minmax(0, .95fr) minmax(0, 2fr); }
}
.footer__brand img { width: 178px; height: auto; margin-bottom: 20px; }
.footer__brand p { max-width: 46ch; margin-bottom: 24px; }

.footer__contact { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.footer__contact dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); padding-top: 3px; }
.footer__contact dd { margin: 0; color: #fff; }
.footer__contact a { text-decoration: none; }
.footer__contact a:hover { color: var(--brass-lift); }

.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(146px, 100%), 1fr)); gap: 30px 24px; }
.footer__cols h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin-bottom: 15px;
}
.footer__cols li + li { margin-top: 9px; }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { color: #fff; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 26px;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

/* -------------------------------------------------------- mobile call -- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-dark);
}
.callbar a {
  padding: 15px 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.callbar__call { background: var(--ink); color: #fff; }
.callbar__wa { background: var(--brass); color: #fff; }

@media (min-width: 1024px) {
  .callbar { display: none; }
}
@media (max-width: 1023px) {
  body { padding-bottom: 54px; }
}

.fab-wa {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 10px 24px -6px rgba(11, 26, 43, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(11, 26, 43, .5); }

@media (max-width: 1023px) {
  .fab-wa { display: none; }
}

/* ------------------------------------------------------------ motion -- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html, .slider__viewport { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ spacing -- */

.wrap-narrow { max-width: 68ch; }

.stack-sm > * + * { margin-top: 14px; }
.stack   > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 44px; }

/* -------------------------------------------------- gallery grid (masonry) -- */
.gallery-grid {
  columns: 2;
  column-gap: 14px;
}
@media (min-width: 620px) { .gallery-grid { columns: 3; } }
@media (min-width: 980px) { .gallery-grid { columns: 4; } }

.gallery-grid__item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 0; border: 0; background: var(--steel-2); cursor: pointer;
  overflow: hidden; border-radius: var(--radius);
  break-inside: avoid;
}
.gallery-grid__item img { width: 100%; height: auto; display: block; }
.gallery-grid__item::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: 130%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ink);
  opacity: .16;
  pointer-events: none;
}

.gallery-viewer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,26,43,.94);
  display: grid; place-items: center;
}
.gallery-viewer[hidden] { display: none; }
.gallery-viewer__img { max-width: 90vw; max-height: 84vh; object-fit: contain; }
.gallery-viewer__close, .gallery-viewer__prev, .gallery-viewer__next {
  position: absolute; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer;
}
.gallery-viewer__close { top: 20px; right: 28px; }
.gallery-viewer__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.gallery-viewer__next { right: 20px; top: 50%; transform: translateY(-50%); }