/* ==========================================================================
   Heritage Homes
   Palette sampled from the client's logo (the HH mark in an open hexagon, half gold, half silver):
     gold #9D7724 (deep) #A88536 #B7933E (mid) #C7A857 #EED57B (highlight),
     silver #BEC4CC #C7CBD1 #D7D9DC (mid) #E3E6E9 #FDFDFD,
     on black and near-black charcoal grounds, with a slate grey.
   Gold is a fill and a line. Gold text only on a dark ground (--gold-hi is 9:1 on black); on
   white, text in the gold family uses --gold-ink (6:1). Buttons are dark text on gold.
   One family, Archivo, on its width axis: wide for headings, normal width for reading.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --black: #000;
  --charcoal: #15181b;
  --slate: #2f353b;
  --ink: #16191c;
  --ink-2: #454c54;
  --ink-3: #5b636c;
  --line: #dcdfe3;
  --white: #fff;
  --concrete: #eef0f2;
  --gold: #b7933e;
  --gold-hi: #c7a857;
  --gold-light: #eed57b;
  --gold-deep: #9d7724;
  --gold-ink: #7a5c1a;
  --silver: #d7d9dc;
  --silver-hi: #e3e6e9;
  --silver-lo: #bec4cc;
  --on-dark: rgba(255, 255, 255, 0.86);
  --on-dark-2: rgba(255, 255, 255, 0.72);

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wide: 118%;
  --wider: 124%;

  --gutter: clamp(20px, 4vw, 56px);
  --container: 1240px;
  --container-wide: 1520px;
  --hdr-h: 96px;
  --sec: clamp(72px, 9vw, 136px);
  --focus: var(--gold-ink);

  /* A small solid gold hexagon, point up, as in the logo: the only bullet on the site. */
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='%23b7933e' d='M8 0l7.8 4.5v9L8 18 .2 13.5v-9z'/%3E%3C/svg%3E");
}

@media (max-width: 1099px) {
  :root { --hdr-h: 76px; }
}

/* ---- reset and the kit's every-page rules --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--white);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--hdr-h) + 24px); }
a { color: var(--gold-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-dark, .site-header, .site-footer, .hero, .phero, .band, .ticker, .mnav, .quote-side, .lb { --focus: var(--gold-hi); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: #000;
  padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---- type ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-stretch: var(--wide);
  font-weight: 620;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: clamp(2.35rem, 4.6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.3vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.2; font-stretch: 112%; }
.lead { font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.55; color: var(--ink); }
.muted { color: var(--ink-2); }

/* ---- layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { width: 100%; max-width: calc(var(--container-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--sec) 0; }
.sec-concrete { background: var(--concrete); }
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.sec-head p { color: var(--ink-2); max-width: 52ch; font-size: 1.125rem; }
@media (max-width: 860px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---- buttons (doubled classes so container link rules never repaint them) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font: inherit; font-size: 1rem; font-weight: 650; font-stretch: 112%; line-height: 1.1;
  text-decoration: none; border: 1.5px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn.btn-gold { background: var(--gold); border-color: var(--gold); color: #000; }
.btn.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #000; }
.btn.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.btn.btn-ink { background: #000; border-color: #000; color: #fff; }
.btn.btn-ink:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn .ico { width: 18px; height: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- header ---------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr-h);
  color: #fff; transition: background-color 0.25s ease;
}
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -80px 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.26) 55%, rgba(0, 0, 0, 0));
  transition: opacity 0.25s ease;
}
.site-header.is-solid, .site-header.is-stuck, .menu-open .site-header { background: #000; }
.site-header.is-solid::before, .site-header.is-stuck::before, .menu-open .site-header::before { opacity: 0; }
.hdr {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: 20px;
  max-width: calc(var(--container-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
/* The logo lockup: the HH mark, then HERITAGE HOMES as live text with the small line under it. */
.hdr-logo { flex: none; display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
.lockup-mark { flex: none; width: auto; height: 60px; }
.lockup-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.lockup-name {
  color: var(--silver-hi); font-size: 1.32rem; font-weight: 640; font-stretch: 125%;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
}
.lockup-tag {
  margin-top: 7px; color: var(--gold-hi); font-size: 0.69rem; font-weight: 560; font-stretch: 112%;
  letter-spacing: 0.135em; text-transform: uppercase; white-space: nowrap;
}
.hdr-logo:hover .lockup-name { color: #fff; }
/* The mobile number as a tap-to-call link; only its icon on the smallest screens. */
.hdr-tel {
  flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 4px;
  color: #fff; text-decoration: none; font-weight: 600; font-stretch: 106%; white-space: nowrap;
}
.hdr-tel .ico { width: 20px; height: 20px; color: var(--gold-hi); }
.hdr-tel:hover { color: var(--gold-hi); }
.hdr-nav { margin-left: auto; height: 100%; }
.hdr-nav + .hdr-tel { margin-left: 6px; }
.hdr-nav > ul { display: flex; align-items: center; height: 100%; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hdr-nav > ul > li { height: 100%; display: flex; align-items: center; }
.hdr-nav a, .hdr-nav .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 13px; color: #fff; text-decoration: none;
  font: inherit; font-size: 1.0625rem; font-weight: 560; font-stretch: 106%;
  background: none; border: 0; cursor: pointer;
}
.hdr-nav a:hover, .hdr-nav .nav-toggle:hover { color: var(--gold-hi); }
.hdr-nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--gold); }
.nav-svc { display: inline-flex; align-items: center; }
.nav-svc > a { padding-right: 4px; }
.nav-toggle { padding-left: 4px !important; }
.nav-toggle .ico { width: 16px; height: 16px; transition: transform 0.2s ease; }
.has-mega.is-open .nav-toggle .ico { transform: rotate(180deg); }
.hdr-cta { flex: none; }
.hdr-burger {
  display: none; flex: none; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 4px 0 12px; margin-left: 4px;
  background: none; border: 0; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.burger-lines { position: relative; width: 26px; height: 18px; }
.burger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 8px; }
.burger-lines span:nth-child(3) { top: 16px; }
.menu-open .burger-lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .burger-lines span:nth-child(2) { opacity: 0; }
.menu-open .burger-lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Services mega menu: the eight services as photographs, four by two, under the header. */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #000; border-top: 1px solid rgba(183, 147, 62, 0.45);
  padding: 30px 0 34px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.has-mega:hover .mega, .has-mega.is-open .mega {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mega-inner {
  max-width: calc(var(--container-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px;
}
.mega a { display: block; padding: 0; color: #fff; }
.mega img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity 0.2s ease; }
.mega a:hover img { opacity: 0.82; }
.mega-name { display: block; padding-top: 10px; font-weight: 600; font-stretch: 110%; }
.mega a:hover .mega-name { color: var(--gold-hi); }
.mega-foot {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px;
}
.mega-foot p { margin: 0; color: var(--on-dark-2); }
.mega-foot a { display: inline-flex; color: var(--gold-hi); font-weight: 600; }

@media (max-width: 1279px) {
  .hdr { gap: 14px; }
  .hdr-logo .lockup-mark { height: 52px; }
  .hdr-logo .lockup-name { font-size: 1.12rem; letter-spacing: 0.11em; }
  .hdr-logo .lockup-tag { font-size: 0.6rem; letter-spacing: 0.11em; margin-top: 6px; }
  .hdr-nav a, .hdr-nav .nav-toggle { padding-left: 10px; padding-right: 10px; }
  .hdr-tel-num { display: none; }
  .hdr-tel { min-width: 44px; justify-content: center; }
}
@media (max-width: 1099px) {
  .hdr { gap: 12px; }
  .hdr-nav { display: none; }
  /* With the menu folded away, the call link, quote button and burger sit together on the right. */
  .hdr-tel, .hdr-nav + .hdr-tel { margin-left: auto; }
  .hdr-tel-num { display: inline; }
  .hdr-cta { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
  .hdr-burger { display: inline-flex; }
}
@media (max-width: 760px) {
  .hdr-tel-num { display: none; }
}
@media (max-width: 560px) {
  .hdr { gap: 6px; }
  .hdr-logo { gap: 9px; }
  .hdr-logo .lockup-mark { height: 44px; }
  .hdr-logo .lockup-name { font-size: 0.9rem; letter-spacing: 0.07em; font-stretch: 118%; }
  .hdr-logo .lockup-tag { font-size: 0.56rem; letter-spacing: 0.045em; margin-top: 5px; font-stretch: 100%; }
  /* The quote button moves into the menu: the bar keeps the name, the call button and the menu. It
     needs about 480px beside the name, so even a 430 phone has no room; on the first screen the
     page hero's own "Get a quote" takes its place (Home, About, Services, each service, Contact). */
  .hdr-cta { display: none; }
  .burger-label { display: none; }
  .hdr-burger { padding: 0 2px 0 10px; }
}
/* The smallest phones: the mark and the name, without the line under it. */
@media (max-width: 359px) {
  .hdr-logo .lockup-mark { height: 36px; }
  .hdr-logo .lockup-name { font-size: 0.78rem; letter-spacing: 0.05em; }
  .hdr-logo .lockup-tag { display: none; }
}

/* Mobile menu */
.mnav {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 59;
  background: #000; color: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--gutter) 40px;
}
.mnav > ul { list-style: none; margin: 0; padding: 0; }
.mnav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.mnav > ul > li > a, .mnav summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0; color: #fff; text-decoration: none;
  font-size: 1.45rem; font-weight: 600; font-stretch: var(--wide); line-height: 1.2;
}
.mnav summary { cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .ico { width: 22px; height: 22px; color: var(--gold-hi); transition: transform 0.2s ease; }
.mnav details[open] summary .ico { transform: rotate(180deg); }
.mnav details ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; }
.mnav details ul a { display: block; text-decoration: none; font-size: 1.05rem; font-stretch: 104%; font-weight: 500; padding: 9px 0; color: var(--on-dark); }
.mnav a[aria-current='page'] { color: var(--gold-hi); }
.mnav-cta { margin-top: 28px; display: grid; gap: 14px; }
.mnav-cta .btn { width: 100%; }
.mnav-mail { display: block; padding: 6px 0; text-align: center; color: var(--on-dark); text-decoration: none; overflow-wrap: anywhere; }
.mnav-mail:hover { color: var(--gold-hi); }
.menu-open, .menu-open body { overflow: hidden; }

/* ---- the logo's open hexagon standing on one gold line ---------------------------- */
/* A run of line from the left, the hexagon outline drawn in its two strokes (the logo's openings
   at the top right and bottom left), then the line on to the right edge. */
.hexline { display: flex; align-items: flex-end; height: 90px; pointer-events: none; color: var(--gold-hi); }
.hexline .hl-a, .hexline .hl-b { height: 2px; background: currentColor; transform-origin: left center; }
.hexline .hl-a { flex: 0 0 calc(var(--gutter) + 12px); }
.hexline .hl-b { flex: 1 1 auto; }
.hexline svg { flex: none; width: 100px; height: 90px; overflow: visible; }
.hexline path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: miter; stroke-linecap: square; }
.hexline .hl-g { stroke-linecap: butt; }
.hexline .hl-2 { stroke: var(--gold-light); }
.js .hexline.draw .hl-a { animation: hl-grow 0.4s ease-out both; }
.js .hexline.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hexline.draw .hl-g { animation: hl-path 0.3s linear 0.38s both; }
.js .hexline.draw .hl-1 { animation: hl-path 0.95s cubic-bezier(0.55, 0.1, 0.35, 1) 0.62s both; }
.js .hexline.draw .hl-2 { animation: hl-path 0.95s cubic-bezier(0.55, 0.1, 0.35, 1) 0.82s both; }
.js .hexline.draw .hl-b { animation: hl-grow 1s ease-out 1.55s both; }
.js .hexline.wait .hl-a, .js .hexline.wait .hl-b { transform: scaleX(0); }
.js .hexline.wait path { stroke-dasharray: 1; stroke-dashoffset: 1; }
@keyframes hl-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hl-path { to { stroke-dashoffset: 0; } }

/* ---- home hero ------------------------------------------------------------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1180px;
  background: #000; color: #fff; overflow: hidden;
}
.hero-media, .hero-slide { position: absolute; inset: 0; }
/* Clips the slow zoom: on phones the photo is its own box above the words, and unclipped the
   zoomed photo spilled a strip over the top of them. */
.hero-media { overflow: hidden; }
.hero-slide { opacity: 0; transition: opacity 1.3s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.js .hero-slide.is-active img { animation: kb 9.5s ease-out both; }
@keyframes kb { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.34) 32%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(to right, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0) 60%);
}
.hero-body { position: absolute; left: 0; right: 0; bottom: 150px; z-index: 2; }
.hero-title {
  font-size: clamp(2.7rem, 5.7vw, 5.6rem); font-stretch: var(--wider); font-weight: 640;
  line-height: 0.98; letter-spacing: -0.018em; max-width: 12.5ch; margin: 0 0 22px;
}
.hero-sub { max-width: 50ch; font-size: clamp(1.05rem, 1.25vw, 1.25rem); color: var(--on-dark); margin: 0 0 30px; }
.js .hero-title, .js .hero-sub, .js .hero-ctas { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero-sub { animation-delay: 0.15s; }
.js .hero-ctas { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; }

/* Google reviews badge under the hero buttons: Google's G, the score, gold stars filled as far as
   the rating, the number of reviews. Square, dark glass with a gold hairline: Heritage's own. */
.gbadge {
  --gs: 80px;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; min-height: 44px;
  margin-top: 22px; padding: 7px 16px 7px 12px;
  background: rgba(0, 0, 0, 0.52); border: 1px solid rgba(199, 168, 87, 0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 0.95rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.gbadge-g { display: block; flex: none; width: 22px; height: 22px; padding: 2px; background: #fff; box-sizing: content-box; }
.gbadge-score { font-size: 1.05rem; font-weight: 650; font-stretch: 112%; color: #fff; }
.gbadge-stars { position: relative; flex: none; width: var(--gs); height: calc(var(--gs) / 5); }
.gbadge-stars svg { position: absolute; left: 0; top: 0; display: block; width: var(--gs); height: calc(var(--gs) / 5); max-width: none; }
.gbadge-base svg { fill: rgba(255, 255, 255, 0.28); }
.gbadge-fill { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; }
.gbadge-fill svg { fill: var(--gold-hi); }
.gbadge-count { color: var(--on-dark); }
.gbadge:hover { border-color: var(--gold-hi); color: #fff; }
.gbadge:hover .gbadge-count { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.js .gbadge { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.42s both; }
@media (max-width: 400px) { .gbadge { --gs: 70px; gap: 8px; padding: 6px 12px 6px 9px; font-size: 0.9rem; } }
.hero-controls {
  position: absolute; right: var(--gutter); bottom: 62px; z-index: 3; /* above the gold line at the foot */
  display: flex; align-items: center; gap: 18px;
}
.hero-caption { color: var(--on-dark); font-size: 0.95rem; text-align: right; min-width: 16ch; }
.hero-dots { display: flex; gap: 6px; }
.hero-dot { width: 40px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.hero-dot::before, .hero-dot::after { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 2px; }
.hero-dot::before { background: rgba(255, 255, 255, 0.35); }
.hero-dot::after { background: var(--gold-hi); transform: scaleX(0); transform-origin: left; }
.hero-dot.is-active::after { transform: scaleX(1); }
.hero.is-playing .hero-dot.is-active::after { animation: dot-fill var(--slide-ms, 7000ms) linear both; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-arrows { display: flex; gap: 8px; }
.icon-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: rgba(0, 0, 0, 0.35); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.icon-btn .ico { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  .hero-media { position: relative; inset: auto; flex: 1 1 auto; min-height: 46svh; }
  .hero-media::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 40%); }
  .hero-body { position: relative; bottom: auto; padding: 22px 0 28px; flex: none; }
  .hero-title { font-size: clamp(2.1rem, 9.6vw, 2.75rem); margin-bottom: 12px; }
  .hero-sub { font-size: 1rem; margin-bottom: 20px; }
  /* Narrower sides, and never a label on two lines: at 360 wide "Our services" broke in two. If two
     labels ever cannot share a row, the buttons stack instead. */
  .hero-ctas .btn { flex: 1 1 140px; padding: 0 16px; white-space: nowrap; }
  .hero-foot { position: absolute; bottom: auto; top: calc(100% - 1px); }
  .hero-foot { display: none; }
  .hero-controls { left: var(--gutter); right: auto; bottom: 10px; gap: 10px; }
  .hero-caption { display: none; }
  .hero-arrows { display: none; }
  .hero-dot { width: 30px; }
}

/* ---- ticker ----------------------------------------------------------------- */
.ticker { background: #000; color: var(--silver); overflow: hidden; border-top: 1px solid rgba(183, 147, 62, 0.4); }
.ticker-track { display: flex; width: max-content; animation: tick 52s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { display: flex; align-items: center; }
.ticker-list li::after {
  content: ''; width: 12px; height: 14px; margin: 0 30px; background: var(--glyph) center / contain no-repeat; flex: none;
}
.ticker a {
  color: var(--silver); text-decoration: none; white-space: nowrap;
  padding: 22px 0; font-size: 0.95rem; font-weight: 560; font-stretch: 125%;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.ticker a:hover { color: var(--gold-hi); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---- split: photograph to the viewport edge, words in the container ------- */
.split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; }
.split-media { position: relative; min-height: 660px; }
.split-media > img, .split-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-inset {
  position: absolute; right: -64px; bottom: -56px; z-index: 2; width: min(42%, 340px);
  border: 8px solid #fff; background: #fff; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.45);
}
.split-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-body {
  align-self: center; max-width: 700px;
  padding: clamp(64px, 8vw, 128px) var(--gutter) clamp(64px, 8vw, 128px) clamp(96px, 9vw, 150px);
}
.split-body h2 { margin-bottom: 26px; }
.split.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.split.is-flipped .split-media { order: 2; }
.split.is-flipped .split-body { justify-self: end; padding-left: var(--gutter); padding-right: clamp(40px, 6vw, 104px); }
@media (max-width: 900px) {
  .split, .split.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .split.is-flipped .split-media { order: 0; }
  .split-media { min-height: 0; aspect-ratio: 4 / 3; }
  .split-inset { right: var(--gutter); bottom: -40px; width: 38%; border-width: 5px; }
  .split-body, .split.is-flipped .split-body { max-width: none; padding: 72px var(--gutter) 64px; }
}

/* the hexagon-bullet list */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 13px 0 13px 32px; border-top: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 19px; width: 14px; height: 14px; background: var(--glyph) center / contain no-repeat; }
.split-body .ticks { margin-top: 28px; }

/* ---- services wall: full bleed, photographs, black mortar ------------------- */
.wall-sec { background: #fff; padding-top: var(--sec); }
.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense;
  grid-auto-rows: clamp(250px, 24vw, 390px); gap: 3px; background: #000;
}
.tile { --tile-name: clamp(1.3rem, 1.75vw, 1.85rem); position: relative; overflow: hidden; background: var(--charcoal); }
.tile.is-wide { grid-column: span 2; }
.tile a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 30px); color: #fff; text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile a::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0) 75%); }
.tile-text, .tile-name, .tile-note, .tile-arrow { position: relative; z-index: 2; }
/* The name and its short line sit at the top of a block with room for two lines of each, so the
   names in a row start level whether a name (or its line) takes one line or two. */
.tile-text { display: flex; flex-direction: column; min-height: calc(2 * 1.08 * var(--tile-name) + 6px + 2 * 1.62 * 0.98rem); }
.tile-name { font-size: var(--tile-name); font-weight: 620; font-stretch: var(--wide); line-height: 1.08; }
.tile-note { margin-top: 6px; color: var(--on-dark); font-size: 0.98rem; line-height: 1.62; max-width: 36ch; }
.tile-arrow {
  position: absolute !important; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px);
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1.5px solid rgba(199, 168, 87, 0.75); color: var(--gold-hi);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.tile-arrow .ico { width: 18px; height: 18px; }
.tile a:hover img, .tile a:focus-visible img { transform: scale(1.045); }
.tile a:hover .tile-arrow, .tile a:focus-visible .tile-arrow { background: var(--gold); color: #000; border-color: var(--gold); }
.tile a:focus-visible { outline-offset: -4px; }
.js .wall.rv .tile { opacity: 0; transform: translateY(18px); }
.js .wall.rv.in .tile { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(210px, 40vw, 330px); }
}
@media (max-width: 560px) {
  .wall { grid-auto-rows: 172px; }
  .tile { --tile-name: 1.08rem; }
  .tile a { padding: 14px; }
  .tile-text { min-height: calc(2 * 1.08 * var(--tile-name)); }
  .tile-name { font-stretch: 112%; }
  .tile-note, .tile-arrow { display: none; }
  .tile.is-wide { grid-row: span 1; }
}

/* ---- steps: a real sequence, so it is numbered ----------------------------- */
/* The line runs off to the right edge; clip it here so it never widens the document. */
.steps-sec { overflow-x: clip; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.steps::before { content: ''; position: absolute; left: 0; right: -50vw; top: 22px; height: 2px; background: var(--gold); transform-origin: left; }
.js .steps.rv::before { transform: scaleX(0); }
.js .steps.rv.in::before { transform: scaleX(1); transition: transform 1.6s cubic-bezier(0.3, 0.6, 0.2, 1); }
.step { position: relative; }
.step-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px;
  background: #000; color: var(--gold-hi); font-weight: 600; font-stretch: 125%; font-size: 1.05rem;
}
.step h3 { margin: 24px 0 10px; }
.step p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.js .steps.rv .step { opacity: 0; transform: translateY(12px); }
.js .steps.rv.in .step { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(0.2s + var(--i, 0) * 0.22s); }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before { left: 22px; right: auto; top: 0; bottom: 24px; width: 2px; height: auto; transform-origin: top; }
  .js .steps.rv::before { transform: scaleY(0); }
  .js .steps.rv.in::before { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; padding-bottom: 30px; }
  .step h3 { margin: 10px 0 6px; }
  .step p { grid-column: 2; }
}

/* ---- dark photographic band ------------------------------------------------- */
.band { position: relative; display: flex; align-items: center; min-height: clamp(540px, 50vw, 780px); background: #000; color: #fff; overflow: hidden; }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.06) 72%); }
.band-body { position: relative; z-index: 2; }
.band-body h2 { max-width: 15ch; margin-bottom: 20px; }
.band-body p { max-width: 44ch; color: var(--on-dark); font-size: 1.15rem; margin-bottom: 30px; }
@media (max-width: 760px) {
  .band { display: block; min-height: 0; }
  .band-media { position: relative; aspect-ratio: 4 / 3; }
  .band::before { display: none; }
  .band-body { padding-top: 40px; padding-bottom: 60px; }
}

/* ---- quote form ------------------------------------------------------------- */
.quote { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); background: #fff; }
.quote-main {
  padding: var(--sec) clamp(32px, 5vw, 88px) var(--sec) max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.quote-main h1, .quote-main h2 { margin-bottom: 16px; }
.quote-main > p { color: var(--ink-2); max-width: 52ch; margin-bottom: 34px; }
.quote-side { background: #000; color: #fff; display: flex; flex-direction: column; }
.quote-side-photo { position: relative; flex: 1 1 auto; min-height: 280px; overflow: hidden; }
.quote-side-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-side-body { padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.quote-side-body h3 { color: #fff; margin-bottom: 20px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
.contact-list .ico { width: 22px; height: 22px; color: var(--gold-hi); margin-top: 2px; }
.contact-list a { color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--gold-hi); }
.contact-list small { display: block; color: var(--on-dark-2); font-size: 0.92rem; }
.qform { display: grid; gap: 18px; }
.qf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > span, .chips legend { font-weight: 620; font-size: 0.98rem; }
.fld > span em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fld input, .fld textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: 14px 16px; background: #fff; border: 1.5px solid #c3c8ce; border-radius: 0;
  transition: border-color 0.2s ease;
}
.fld textarea { min-height: 136px; resize: vertical; }
.fld input:hover, .fld textarea:hover { border-color: #87909a; }
.fld input:focus, .fld textarea:focus { border-color: var(--gold-ink); outline: none; box-shadow: 0 0 0 3px rgba(183, 147, 62, 0.28); }
.fld.has-error input { border-color: #b3261e; }
.fld-err { color: #b3261e; font-size: 0.92rem; font-weight: 600; }
.chips { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 10px; }
.chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.chip-pic { position: relative; display: block; overflow: hidden; outline: 2px solid transparent; outline-offset: 0; transition: outline-color 0.15s ease; }
.chip-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
.chip-pic::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  background: rgba(0, 0, 0, 0.45) center / 14px no-repeat; border: 1.5px solid #fff;
  transition: background-color 0.15s ease;
}
.chip-label { display: block; padding: 7px 1px 0; font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.chip:hover img { transform: scale(1.05); }
.chip input:checked + .chip-pic { outline-color: var(--gold); outline-width: 3px; }
.chip input:checked + .chip-pic::after {
  background-color: var(--gold); border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.chip input:focus-visible + .chip-pic { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.qf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.qf-note { margin: 0; color: var(--ink-3); font-size: 0.92rem; max-width: 46ch; }
.qf-note a { white-space: nowrap; }
.quote-first .quote-main { padding-top: calc(var(--hdr-h) + clamp(40px, 5vw, 80px)); }
@media (min-width: 1001px) { .quote-first .quote-side { padding-top: var(--hdr-h); } }
.qf-status { margin: 0; padding: 14px 16px; background: #f7f4ea; border-left: 3px solid var(--gold); }
@media (max-width: 1000px) {
  .quote { grid-template-columns: minmax(0, 1fr); }
  .quote-main { padding: 72px var(--gutter); }
  .chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .qf-row { grid-template-columns: minmax(0, 1fr); }
  .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip-pic img { display: none; }
  .chip-pic { border: 1.5px solid #c3c8ce; min-height: 50px; }
  .chip-pic::after { top: 50%; transform: translateY(-50%); right: 10px; background-color: #fff; border-color: #87909a; }
  .chip-label { position: absolute; left: 12px; right: 44px; top: 50%; transform: translateY(-50%); padding: 0; }
  .chip input:checked + .chip-pic { border-color: var(--gold); outline-width: 1.5px; }
}

/* ---- inner page hero ---------------------------------------------------------- */
.phero { position: relative; display: flex; align-items: flex-end; min-height: clamp(540px, 76svh, 880px); background: #000; color: #fff; overflow: hidden; }
.phero-media { position: absolute; inset: 0; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}
.phero-body { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--hdr-h) + 48px); padding-bottom: clamp(56px, 7vw, 104px); }
.phero h1 { max-width: 16ch; margin-bottom: 18px; }
.phero-sub { max-width: 54ch; color: var(--on-dark); font-size: clamp(1.05rem, 1.3vw, 1.25rem); margin-bottom: 30px; }
.phero.is-plain { min-height: 0; align-items: stretch; }
.phero.is-plain .phero-body { padding-top: calc(var(--hdr-h) + clamp(36px, 4.5vw, 72px)); padding-bottom: clamp(36px, 4vw, 60px); }
.phero.is-plain::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(183, 147, 62, 0.45);
}
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; font-size: 0.95rem; color: var(--on-dark-2); }
.crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--gold-hi); }
.crumbs a { color: var(--on-dark); text-decoration: none; }
.crumbs a:hover { color: var(--gold-hi); }
@media (max-width: 760px) {
  .phero:not(.is-plain) { display: block; min-height: 0; }
  .phero:not(.is-plain) .phero-media { position: relative; height: min(100vw, 58svh); }
  .phero:not(.is-plain) .phero-media::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 38%); }
  .phero:not(.is-plain) .phero-body { padding-top: 28px; padding-bottom: 44px; }
}

/* ---- service page --------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.svc-copy .lead { margin-bottom: 1.1em; }
.svc-copy p { max-width: 64ch; }
.svc-jobs {
  background: var(--concrete); padding: clamp(28px, 3.2vw, 48px) 0 clamp(28px, 3.2vw, 48px) clamp(28px, 3.2vw, 48px);
  box-shadow: 0 0 0 100vmax var(--concrete); clip-path: inset(0 -100vmax 0 0);
}
.svc-jobs h2 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin-bottom: 18px; }
.svc-jobs .ticks li { border-color: #d3d7dc; }
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-jobs { padding-right: 0; clip-path: inset(0 -100vmax 0 -100vmax); }
}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.faq-grid > div:first-child p { color: var(--ink-2); margin-top: 18px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 56px 22px 0;
  font-size: 1.15rem; font-weight: 620; font-stretch: 108%; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { position: absolute; right: 8px; top: 24px; width: 22px; height: 22px; color: var(--gold-ink); transition: transform 0.25s ease; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold-ink); }
.faq .ans { padding: 0 56px 26px 0; color: var(--ink-2); max-width: 68ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* other services row: three photographs edge to edge */
.sec-tight-top { padding-top: clamp(8px, 2vw, 32px); }
.more-head { padding-bottom: clamp(24px, 3vw, 40px); }
/* After the full-bleed band the heading needs the section spacing of its own (after the FAQ it has it). */
.band + .hh-more { padding-top: var(--sec); }
.more-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.more-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 26vw, 380px); gap: 3px; background: #000; }
@media (max-width: 760px) { .more-row { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 210px; } }

/* ---- about ------------------------------------------------------------------------ */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.ways li { padding: 28px 0 30px; border-top: 2px solid var(--gold); }
.ways h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ways h3::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--glyph) center / contain no-repeat; }
.ways p { color: var(--ink-2); margin: 0; max-width: 46ch; }
@media (max-width: 760px) { .ways { grid-template-columns: minmax(0, 1fr); } }
.svc-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(32px, 5vw, 80px); }
.svc-links li { break-inside: avoid; border-top: 1px solid var(--line); }
.svc-links a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-stretch: 108%; font-size: 1.1rem; }
.svc-links a .ico { width: 18px; height: 18px; color: var(--gold-ink); transition: transform 0.2s ease; }
.svc-links a:hover { color: var(--gold-ink); }
.svc-links a:hover .ico { transform: translateX(4px); }
@media (max-width: 600px) { .svc-links { columns: 1; } }


/* ---- plain text pages --------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.45rem, 2vw, 1.85rem); margin: 2em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }

/* ---- footer ------------------------------------------------------------------------------ */
.site-footer { background: #000; color: var(--on-dark-2); padding: 0 0 28px; }
.site-footer .hexline { height: 64px; }
.site-footer .hexline svg { width: 71px; height: 64px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.15fr); gap: 40px clamp(28px, 4vw, 64px); padding-top: clamp(48px, 6vw, 80px); }
/* The larger lockup: the mark over the name, so the name can be big without crowding the menus. */
.ft-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 0 0 24px; color: #fff; }
.ft-lockup .lockup-mark { height: 96px; }
.ft-lockup .lockup-name { font-size: 1.45rem; letter-spacing: 0.12em; }
.ft-lockup .lockup-tag { font-size: 0.74rem; margin-top: 9px; letter-spacing: 0.12em; }
.ft-brand p:not(.ft-lockup) { max-width: 38ch; }
.ft-h { color: #fff; font-weight: 620; font-stretch: var(--wide); font-size: 1.02rem; margin: 0 0 16px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-contact ul { gap: 12px; }
.ft-contact li { display: flex; gap: 12px; align-items: flex-start; }
.ft-contact a { display: inline-flex; gap: 12px; align-items: flex-start; overflow-wrap: anywhere; }
.ft-contact .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--gold-hi); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--gold-hi); }
.ft-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.92rem;
}
.ft-bottom p { margin: 0; }
/* A small gold hexagon between the company name and its number. */
.ft-sep { display: inline-block; width: 8px; height: 9px; margin: 0 12px; vertical-align: 1px; background: var(--glyph) center / contain no-repeat; }
@media (max-width: 1200px) { .ft-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ft-brand, .ft-contact { grid-column: 1 / -1; } }
@media (max-width: 520px) {
  .ft-top { grid-template-columns: minmax(0, 1fr); }
  .ft-lockup { gap: 16px; }
  .ft-lockup .lockup-mark { height: 84px; }
  .ft-lockup .lockup-name { font-size: 1.3rem; letter-spacing: 0.1em; }
  .ft-lockup .lockup-tag { font-size: 0.66rem; letter-spacing: 0.1em; }
  .ft-sep { display: block; height: 0; margin: 4px 0 0; background: none; }
}
@media (max-width: 359px) {
  .ft-lockup .lockup-name { font-size: 1.12rem; letter-spacing: 0.08em; }
  .ft-lockup .lockup-tag { font-size: 0.6rem; letter-spacing: 0.06em; }
}

/* ---- motion off ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .ticker-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .ticker-track > ul[aria-hidden='true'] { display: none; }
}

/* ==========================================================================================
   WordPress and Elementor
   Everything above styles the theme's own markup (header, footer and its widgets). Below, the
   same design applied to Elementor's markup: Elementor wraps every widget in its own div
   and loads small per-widget stylesheets after this one, so these rules carry one class more
   than Elementor's defaults. A change made in the Elementor panel is written with three or
   more classes, so it still wins over all of this.
   ========================================================================================== */

/* Headings: Elementor sets line-height 1 on every heading widget. */
h1.elementor-heading-title, h2.elementor-heading-title, h4.elementor-heading-title { line-height: 1.06; }
h3.elementor-heading-title { line-height: 1.2; }

/* Elementor strips underlines from every link; links in body text keep theirs. */
.elementor .elementor-widget-text-editor a, .elementor .qf-note a { text-decoration: underline; }

/* Paragraph widgets stacked in a column: the space paragraph margins would give. */
.split-body .lead p { margin-bottom: 1em; }
.svc-copy .elementor-widget.lead { margin-bottom: 1.1em; }
.elementor-widget-text-editor.muted + .elementor-widget-text-editor.muted { margin-top: 1em; }

/* The closer photo under a service page's introduction, and its caption. */
.elementor-widget-image.svc-photo { margin-top: clamp(28px, 3vw, 40px); text-align: left; }
.elementor-widget-image.svc-photo img { display: block; width: 100%; height: auto; max-width: none; }
.elementor-widget-image.svc-photo .widget-image-caption { margin: 12px 0 0; text-align: left; font-size: 0.92rem; line-height: 1.5; color: var(--ink-3); }

/* Buttons: an Elementor button widget given the class btn-gold, btn-ghost or btn-ink. */
.elementor-widget-button:is(.btn-gold, .btn-ghost, .btn-ink) .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  font: inherit; font-size: 1rem; font-weight: 650; font-stretch: 112%; line-height: 1.1;
  text-decoration: none; border: 1.5px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-widget-button.btn-gold .elementor-button { background: var(--gold); border-color: var(--gold); color: #000; }
.elementor-widget-button.btn-gold .elementor-button:is(:hover, :focus-visible) { background: var(--gold-hi); border-color: var(--gold-hi); color: #000; }
.elementor-widget-button.btn-ghost .elementor-button { background: transparent; border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.elementor-widget-button.btn-ghost .elementor-button:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.elementor-widget-button.btn-ink .elementor-button { background: #000; border-color: #000; color: #fff; }
.elementor-widget-button.btn-ink .elementor-button:is(:hover, :focus-visible) { background: var(--slate); border-color: var(--slate); color: #fff; }

/* Photographs in image widgets fill their box. */
.elementor-widget-image:is(.split-main, .band-media) { position: absolute; inset: 0; text-align: left; }
.elementor-widget-image:is(.split-main, .band-media) img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.elementor-widget-image.split-inset { text-align: left; }
.elementor-widget-image.split-inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The hexagon-bullet list, built from Elementor's icon list (the icon itself is not used). */
.elementor-widget.ticks .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-widget.ticks .elementor-icon-list-item { display: block; position: relative; padding: 13px 0 13px 32px; border-top: 1px solid var(--line); }
.elementor-widget.ticks .elementor-icon-list-item:last-child { border-bottom: 1px solid var(--line); }
.elementor-widget.ticks .elementor-icon-list-item::before { content: ''; position: absolute; left: 0; top: 19px; width: 14px; height: 14px; background: var(--glyph) center / contain no-repeat; }
.elementor-widget.ticks .elementor-icon-list-item::after { display: none; }
.elementor-widget.ticks .elementor-icon-list-icon { display: none; }
.elementor-widget.ticks .elementor-icon-list-text { padding: 0; }
.elementor-widget.ticks .elementor-icon-list-item > a { display: inline; color: inherit; }
.svc-jobs .elementor-widget.ticks .elementor-icon-list-item { border-color: #d3d7dc; }

/* About's "How we work": each item is a container (heading + text). */
.e-con.ways > .e-con { padding: 28px 0 30px; border-top: 2px solid var(--gold); }

/* About's list of services, built from Elementor's icon list: the arrow is drawn here, after the text. */
.elementor-widget.svc-links .elementor-icon-list-item { display: block; }
.elementor-widget.svc-links .elementor-icon-list-item a { justify-content: space-between; font-size: 1.1rem; color: var(--ink); }
.elementor-widget.svc-links .elementor-icon-list-item a:hover { color: var(--gold-ink); }
.elementor-widget.svc-links .elementor-icon-list-icon { display: none; }
.elementor-widget.svc-links .elementor-icon-list-item a::after {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--gold-ink); transition: transform 0.2s ease;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.elementor-widget.svc-links .elementor-icon-list-item a:hover::after { transform: translateX(4px); }

/* The photo band sits its words in the middle: a row, where Elementor's default is a column. */
.e-con.band { --flex-direction: row; }
/* On phones the band's photo gets its own panel above the words. */
@media (max-width: 760px) { .elementor-widget-image.band-media { position: relative; inset: auto; aspect-ratio: 4 / 3; } }

/* Steps share the row out evenly when there are fewer or more than five. */
@media (min-width: 901px) { .steps { grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); } }

/* A ticker word with no link. */
.ticker-list span {
  color: var(--silver); white-space: nowrap; padding: 22px 0; font-size: 0.95rem; font-weight: 560;
  font-stretch: 125%; letter-spacing: 0.3em; text-transform: uppercase;
}

/* Logged in: the fixed header and phone menu sit below the WordPress toolbar. */
@media (min-width: 601px) {
  body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
  body.admin-bar .mnav { top: calc(var(--hdr-h) + var(--wp-admin--admin-bar--height, 32px)); }
}