/* ==========================================================================
   Modern & Creative Builders — public site stylesheet.
   Mobile-first. One token set, one type scale, lightweight motion.
   ========================================================================== */

@font-face { font-family: "Switzer"; src: url("/assets/misc/6IN5WOLRCYP4G4MOCOHOMXNON6Q7MDAR.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 }
@font-face { font-family: "Switzer"; src: url("/assets/misc/6XPIMU23OJVRY676OG5YVJMWEHWICATX.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 500 }
@font-face { font-family: "Switzer"; src: url("/assets/misc/YS3VPNVO4B3TOJMEXDGFZQ4TLZGGSRZC.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 600 }
/* Metric-matched fallback so text does not jump when Switzer arrives. */
@font-face { font-family: "Switzer Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0% }

:root {
  --ink: #101215;
  --muted: #475059;
  --line: #e6e8ea;
  --surface: #f6f6f4;
  --surface-2: #efefec;
  --white: #fff;
  --dark: #0f0f10;
  --dark-2: #17181b;
  --gold: #c39a4e;        /* buttons, accents on light */
  --gold-2: #7d5f2a;      /* small text on light (AA on white and on --surface) */
  --gold-soft: #e8c592;   /* accents on dark */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --maxw: 1240px;
  --pad: 16px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (min-width: 640px)  { :root { --pad: 24px; --header-h: 76px; } }
@media (min-width: 1024px) { :root { --pad: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul { margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.6vw, 44px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
h4 { font-size: 17px; letter-spacing: -0.02em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 110px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.lede { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-2); margin-bottom: 16px;
}
.panel--dark .eyebrow, .hero .eyebrow { color: var(--gold-soft); }

.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .lede { margin-top: 2px; }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; }
  .sec-head--split .lede { justify-self: end; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-sm); min-height: 48px;
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: #26282d; box-shadow: 0 10px 24px rgba(15,15,16,.18); }
.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: #d1a95c; box-shadow: 0 10px 24px rgba(195,154,78,.35); }
.btn--ghost { background: transparent; color: var(--ink); border-color: #cfd4d9; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn--light { background: #fff; color: var(--ink); }
.btn__arrow {
  display: inline-block; flex: none; font-size: 16px; line-height: 1;
  transition: transform .25s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--wa { background: #15773f; color: #fff; }
.btn--wa:hover { background: #106333; box-shadow: 0 10px 24px rgba(21,119,63,.3); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 auto; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--dark);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.site-header__in { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.brand__mark { width: 46px; height: auto; flex: none; transition: transform .35s var(--ease); }
.brand:hover .brand__mark { transform: translateY(-2px) scale(1.04); }
.brand__word { display: flex; flex-direction: column; line-height: 1.05; }
.brand__top { font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.brand__bottom { font-weight: 500; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; }
@media (min-width: 640px) {
  .brand__mark { width: 54px; }
  .brand__top { font-size: 16px; }
  .brand__bottom { font-size: 12px; }
}
/* Very narrow screens: hide the wordmark visually but keep it as the link's name. */
@media (max-width: 359px) { .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) {
  position: relative;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold-soft); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: #fff; }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: 11px 18px; min-height: 42px; font-size: 14px; }
.nav .btn .btn__arrow { display: none; }

.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); background: transparent;
  cursor: pointer; align-items: center; justify-content: center; color: #fff;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 6px var(--pad) 20px;
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform-origin: top; animation: navIn .28s var(--ease);
  }
  .nav a:not(.btn) { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 16px; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dark); color: #fff;
  /* Fill the visible screen below the sticky header (svh ignores the mobile
     browser toolbar), but never grow past 1000px on very tall monitors. */
  min-height: min(calc(100vh - var(--header-h) - 1px), 1000px);
  min-height: min(calc(100svh - var(--header-h) - 1px), 1000px);
  display: flex; align-items: flex-end;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg picture, .hero__bg img { width: 100%; height: 100%; }
/* No fade on the picture: it is the largest paint on the page, and Chrome
   ignores elements that animate in from opacity 0 when it measures that. */
.hero__bg img { object-fit: cover; object-position: 70% 50%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,15,16,.35) 0%, rgba(15,15,16,0) 22%, rgba(15,15,16,0) 62%, rgba(15,15,16,.7) 100%),
    linear-gradient(90deg, rgba(15,15,16,.8) 0%, rgba(15,15,16,.58) 40%, rgba(15,15,16,0) 66%);
}
/* On phones the text sits over the whole picture, so shade it evenly. */
@media (max-width: 899px) {
  .hero__shade { background: linear-gradient(180deg, rgba(15,15,16,.45) 0%, rgba(15,15,16,.62) 45%, rgba(15,15,16,.85) 100%); }
}
.hero__in { padding-block: clamp(28px, 8vh, 112px) clamp(22px, 4.5vh, 56px); width: 100%; }
.hero .eyebrow { margin-bottom: clamp(10px, 1.8vh, 16px); }
.hero h1 { font-size: clamp(32px, min(5.4vw, 7.4vh), 60px); max-width: 15ch; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero .lede { text-shadow: 0 1px 12px rgba(0,0,0,.5); color: rgba(255,255,255,.86); margin-top: clamp(12px, 2.2vh, 20px); max-width: 46ch; }
.hero .btn-row { margin-top: clamp(18px, 3.4vh, 30px); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(18px, 4.5vh, 56px); padding-top: clamp(12px, 2.2vh, 22px); border-top: 1px solid rgba(255,255,255,.14); }
/* Phones: the four points sit two to a row, so the list takes half the height. */
@media (max-width: 639px) {
  /* right padding keeps the last point clear of the floating WhatsApp button */
  .hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding-right: 58px; }
    }
/* Short screens (small laptops, compact phones): tighten the vertical rhythm
   so the whole hero, trust points included, fits above the fold. */
@media (max-height: 820px) {
  .hero__in { padding-block: clamp(20px, 5vh, 48px) clamp(18px, 3.2vh, 32px); }
  .hero .btn-row { margin-top: clamp(16px, 2.8vh, 24px); }
  .hero__chips { margin-top: clamp(16px, 3.2vh, 32px); padding-top: clamp(12px, 1.8vh, 18px); }
}
@media (max-width: 639px) and (max-height: 820px) {
  .hero__in { padding-block: 22px 20px; }
  .hero .btn-row { gap: 10px; margin-top: 18px; }
  .hero__chips { margin-top: 18px; padding-top: 14px; }
}
@media (max-width: 639px) and (max-height: 700px) {
  .hero__in { padding-block: 16px 16px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero .lede { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .hero .btn-row { margin-top: 14px; gap: 8px; }
  .hero .btn-row .btn { min-height: 44px; padding-block: 12px; }
  .hero__chips { margin-top: 14px; padding-top: 12px; gap: 6px 12px; }
}

/* entrance */
.hero .eyebrow, .hero h1, .hero .lede, .hero .btn-row, .hero__chips { animation: rise .8s var(--ease) both; }
.hero h1 { animation-delay: .08s; } .hero .lede { animation-delay: .18s; }
.hero .btn-row { animation-delay: .28s; } .hero__chips { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- page hero (sub pages) ---------- */
.page-hero { padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: 18px; }
.page-hero--dark { background: var(--dark); color: #fff; }
.page-hero--dark .lede { color: rgba(255,255,255,.78); }
.page-hero--dark .crumbs { color: rgba(255,255,255,.6); }
.page-hero--dark .eyebrow { color: var(--gold-soft); }
.page-hero--dark + .section, .page-hero--dark + .section--tight { padding-top: clamp(48px, 6vw, 88px); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- grid + cards ---------- */
.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
@media (min-width: 640px)  { .grid { gap: 22px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { box-shadow: 0 18px 44px rgba(16,18,21,.10); transform: translateY(-4px); border-color: #d9dde1; }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-sm);
}
.card__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__loc { font-size: 13.5px; color: var(--muted); }

/* service cards */
.svc {
  padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.svc::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16,18,21,.09); border-color: #d9dde1; }
.svc:hover::after { transform: scaleX(1); }
.svc__icon {
  width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--surface); color: var(--gold-2); transition: background .3s var(--ease), color .3s var(--ease);
}
.svc__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc__icon { background: var(--dark); color: var(--gold-soft); }
.svc h3 { font-size: 19px; }
.svc p { color: var(--muted); font-size: 15px; }
.svc__link { margin-top: auto; font-size: 14px; font-weight: 500; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.svc__link::after { content: "→"; transition: transform .25s var(--ease); }
.svc:hover .svc__link::after { transform: translateX(4px); }
.svc__n { position: absolute; top: 20px; right: 24px; font-size: 13px; font-weight: 500; color: #b4bac0; letter-spacing: .1em; font-variant-numeric: tabular-nums; }

/* ---------- split / feature ---------- */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); } .split--rev > :first-child { order: 2; } }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.split__media img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .8s var(--ease); }
.split__media:hover img { transform: scale(1.03); }
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__badge {
  position: absolute; left: 16px; bottom: 16px; background: rgba(15,15,16,.86); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 12px 16px; border-radius: var(--r); font-size: 13.5px; display: grid; gap: 2px; max-width: calc(100% - 32px);
}
.split__badge b { color: var(--gold-soft); font-weight: 600; }
.split h2 { margin-top: 2px; }
.split .lede { margin-top: 16px; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.stat { background: var(--surface); border-radius: var(--r-lg); padding: 22px; }
.stat__n { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.stat__l { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ---------- feature list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 30px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.ticks li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px;
  border-left: 2px solid var(--dark); border-bottom: 2px solid var(--dark); transform: rotate(-45deg);
}
.ticks--light li { color: rgba(255,255,255,.8); }
.ticks--sm li { font-size: 14.5px; }
.ticks--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ticks--2 { grid-template-columns: 1fr 1fr; gap: 12px 24px; } }

/* ---------- process steps ---------- */
.steps { counter-reset: s; display: grid; gap: 14px; }
@media (min-width: 900px) { .steps--row { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.step {
  position: relative; display: flex; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(16,18,21,.08); }
.steps--row .step { flex-direction: column; gap: 14px; }
.step__n {
  counter-increment: s; flex: none; width: 42px; height: 42px; border-radius: var(--r);
  display: grid; place-items: center; background: var(--dark); color: var(--gold-soft);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.step__n::before { content: counter(s, decimal-leading-zero); }
.step h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- projects ---------- */
.projects { display: grid; gap: 14px; }
@media (min-width: 640px)  { .projects { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .projects { grid-template-columns: repeat(3, 1fr); } .projects > :first-child { grid-column: span 2; grid-row: span 2; } }
.proj {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  aspect-ratio: 4 / 3; isolation: isolate;
}
@media (min-width: 1000px) { .projects > :first-child { aspect-ratio: auto; height: 100%; min-height: 420px; } }
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.proj:hover img, .proj:focus-visible img { transform: scale(1.06); }
.proj__cap {
  position: absolute; inset: auto 0 0 0; padding: 60px 18px 18px; color: #fff;
  background: linear-gradient(180deg, rgba(15,15,16,0) 0%, rgba(15,15,16,.85) 100%);
  display: grid; gap: 3px;
}
.proj__cap b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.proj__cap span { font-size: 13px; color: var(--gold-soft); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- chips (jump links) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13.5px; font-weight: 500; padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.chip:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); transform: translateY(-1px); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; transition: color .2s;
}
.faq summary:hover { color: var(--gold-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 44px 22px 0; color: var(--muted); animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- form ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid #d5d9dd; border-radius: var(--r);
  background: #fff; width: 100%; min-height: 46px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent;
}
.form__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: 13px; color: var(--muted); }
.form__status { font-size: 14px; padding: 10px 14px; border-radius: var(--r); background: #e7f6ec; color: #135c2e; }
.form__status--err { background: #fdecec; color: #8f1d1d; }

/* ---------- panel ---------- */
.panel { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 44px); }
.panel--dark { background: var(--dark); color: #fff; }
.panel--dark .muted, .panel--dark .lede { color: rgba(255,255,255,.75); }
.panel--dark h2, .panel--dark h3 { color: #fff; }

.cta-band { position: relative; overflow: hidden; display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr 1fr; } .cta-band__actions { justify-self: end; } }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band__glow {
  position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,197,146,.28), transparent 70%); pointer-events: none;
}
.cta-band__text .lede { margin-top: 10px; }

/* ---------- speclist / office ---------- */
.speclist { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.speclist div { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 15px; flex-wrap: wrap; }
.speclist div:last-child { border-bottom: 0; }
.speclist span:first-child { color: var(--muted); }
.speclist b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------- prose ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 40px 0 12px; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 20px; display: grid; gap: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #f5f5f5; margin-top: 0; }
.site-footer__in { padding-block: clamp(44px, 6vw, 72px) 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-brand { grid-column: span 2; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; } .footer-brand { grid-column: auto; } }
.brand-logo { width: 190px; height: auto; }
.footer-tag { margin-top: 18px; max-width: 36ch; color: #b9c0c6; font-size: 15px; }
.footer-h { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 16px; }
.site-footer p, .site-footer a { color: #c7ced4; font-size: 15px; }
.site-footer a:hover { color: #fff; }
.flinks { display: grid; gap: 11px; }
.flinks a { transition: transform .25s var(--ease), color .25s; display: inline-block; }
.flinks a:hover { transform: translateX(4px); }
.fcontact { display: grid; gap: 14px; }
.fcontact > a, .fcontact > span { display: flex; gap: 12px; align-items: center; color: #c7ced4; font-size: 15px; line-height: 1.45; overflow-wrap: break-word; min-width: 0; }
.fcontact > a > span:last-child { min-width: 0; }
.fcontact .ic {
  width: 32px; height: 32px; border-radius: var(--r); background: rgba(255,255,255,.08); color: var(--gold-soft);
  display: grid; place-items: center; flex: none;
}
.fcontact .ic svg, .social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.social {
  width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .25s, transform .25s var(--ease);
}
.social:hover { background: var(--gold); color: var(--dark); transform: translateY(-2px); }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #9aa3ab;
}
.footer-bottom a { font-size: 14px; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }

/* ---------- misc ---------- */
.disclaimer {
  margin-top: 28px; padding: 16px 18px; border: 1px dashed #d5d9dd;
  border-radius: var(--r); font-size: 13.5px; color: var(--muted);
}
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink); padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 8px; top: 8px; }
.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;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}
.site-header :where(a, button):focus-visible { outline-color: var(--gold-soft); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > :nth-child(2) { transition-delay: 80ms; }
.reveal-group.is-in > :nth-child(3) { transition-delay: 160ms; }
.reveal-group.is-in > :nth-child(4) { transition-delay: 240ms; }
.reveal-group.is-in > :nth-child(5) { transition-delay: 320ms; }
.reveal-group.is-in > :nth-child(6) { transition-delay: 400ms; }
/* Without JS nothing should stay invisible. */
.no-js .reveal, .no-js .reveal-group > * { opacity: 1; transform: none; }

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

@media print {
  .site-header, .site-footer, .wa-float, .nav-toggle, .cta-band { display: none !important; }
  .hero { min-height: 0; color: #000; background: #fff; }
  .hero__bg, .hero__shade { display: none; }
  .hero h1 { color: #000; }
  .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ==========================================================================
   House style for the public site (body.site).
   The company sells itemised, stage-by-stage building, so the page is built
   the same way: headings lettered broad like a site hoarding, services laid
   out as a schedule of work, the process drawn as a build line, dark
   surfaces carrying a faint drawing grid. One radius for controls (3px), one
   for pictures (4px). State changes colour, not position. The hero's load
   sequence and the build line drawing itself in are the only motion that
   plays without the visitor's hand.
   The admin panel shares this file and is deliberately left out of this block.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

.site {
  --display: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rule: #dcdfe2;
  --rule-dark: rgba(255,255,255,.12);
  --gold-deep: #b48a3f;
  --r-ctl: 3px;
  --r-img: 4px;
  --shadow-img: 0 1px 0 rgba(16,18,21,.04), 0 28px 48px -32px rgba(16,18,21,.45);
}

/* ---------- type ---------- */
.site :is(h1, h2, h3) {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.04;
}
.site h1 { font-size: clamp(34px, 4.8vw, 58px); }
.site h2 { font-size: clamp(26px, 3vw, 38px); max-width: 20ch; }
.site h3 { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; }
.site .lede { max-width: 58ch; }
.site ::selection { background: var(--gold-soft); color: var(--dark); }

/* ---------- drawing grid on dark surfaces ---------- */
.site .page-hero--dark, .site .section--band, .site .cta-band, .site .talk {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}

/* ---------- header and navigation ---------- */
.site .nav a:not(.btn) { font-size: 15px; letter-spacing: 0.04em; text-transform: none; }
@media (max-width: 900px) {
  .site .nav { padding-bottom: 26px; }
  .site .nav a:not(.btn) { font-size: 17px; padding: 17px 0; }
  .site .nav .btn { margin-top: 20px; }
}

/* ---------- buttons: colour changes, position stays ---------- */
.site .btn {
  border-radius: var(--r-ctl);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease);
}
.site .btn:hover { transform: none; box-shadow: none; }
.site .svc:hover { transform: none; box-shadow: 0 18px 44px rgba(16,18,21,.09); border-color: var(--gold); }
.site .btn:active { transform: translateY(1px); }
.site .btn--gold:hover { background: var(--gold-deep); }
.site .btn--dark:hover { background: #2b2d32; }
.site .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.site .btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.site .btn--wa:hover { background: #106333; }

/* ---------- hero ---------- */
.site .hero h1 { font-size: clamp(32px, min(4.4vw, 6.6vh), 56px); max-width: 14ch; }
.site .hero .lede { max-width: 46ch; }
.hero__chips { list-style: none; margin-bottom: 0; padding-left: 0; }
.hero__chips li { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.88); padding-left: 12px; border-left: 2px solid var(--gold-soft); }
@media (min-width: 640px) {
  .hero__chips { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px 32px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .hero__chips { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 639px) {
  .hero__chips li { font-size: 13px; padding-left: 10px; }
}

/* ---------- page headers on inner pages ---------- */
.site .page-hero { padding-block: clamp(40px, 5.5vw, 72px) clamp(36px, 4.5vw, 60px); }
.site .page-hero h1 { max-width: 18ch; }
.site .crumbs { font-size: 14px; margin-bottom: 18px; }
.site .page-hero--dark .crumbs a { transition: color .2s var(--ease); }
.site .page-hero--dark .crumbs a:hover { color: var(--gold-soft); text-decoration: none; }

/* ---------- section rhythm: ruled, like a drawing sheet ---------- */
.site .section { padding-block: clamp(48px, 6.5vw, 88px); }
.site .section--tight { padding-block: clamp(32px, 4.5vw, 56px); }
.site .wrap.section { position: relative; }
.site .wrap.section + .wrap.section::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--rule); }
.site .sec-head { margin-bottom: clamp(26px, 3.5vw, 40px); }
.site .sec-head h2 { margin: 0; }
.site .sec-head:not(.sec-head--split) .lede { max-width: 60ch; margin-top: 0; }
.split .lede { margin-top: 16px; }
.split .lede + .lede { margin-top: 14px; }
.split .ticks { margin-top: 26px; }
.split .btn-row, .split--faq .btn-row, .service .btn-row { margin-top: 30px; }
.split--faq, .split--top { align-items: start; }
.section--band { background-color: var(--dark); color: #fff; }
.section--band .lede { color: rgba(255,255,255,.72); }
.section--band + .section, .section--band + .section--tight { padding-top: clamp(48px, 6.5vw, 88px); }

/* ---------- ruled lists with gold dot marker ---------- */
.site .ticks { gap: 0; border-top: 1px solid var(--rule); }
.site .ticks li { padding: 11px 0 11px 18px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.site .ticks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.site .ticks li::after { content: none; }
@media (min-width: 640px) {
  .site .ticks--2 { gap: 0 28px; border-top: 0; }
  .site .ticks--2 li:nth-child(-n+2) { border-top: 1px solid var(--rule); }
}

/* ---------- pictures: caption under the image, a little depth ---------- */
figure.split__media { margin: 0; overflow: visible; background: none; border-radius: 0; }
figure.split__media img { border-radius: var(--r-img); box-shadow: var(--shadow-img); outline: 1px solid rgba(16,18,21,.06); outline-offset: -1px; }
.site .split__media:hover img { transform: none; }
.split__media figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.split__media figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- schedule of work (services) ---------- */
.schedule { border-top: 2px solid var(--ink); }
.schedule__row {
  position: relative; display: grid; gap: 6px; padding: 20px 0;
  border-bottom: 1px solid var(--rule); color: inherit;
}
.schedule__row::before {
  content: ""; position: absolute; left: calc(var(--pad) * -1); top: 0; bottom: -1px; width: 3px;
  background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .28s var(--ease);
}
.schedule__row p { margin: 0; color: var(--muted); max-width: 62ch; }
.schedule__more {
  font-size: 14px; font-weight: 500; color: var(--gold-2);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(125,95,42,.35);
  transition: text-decoration-color .2s var(--ease);
}
.schedule__row h3 { transition: color .2s var(--ease); }
.schedule__row:hover::before, .schedule__row:focus-visible::before { transform: scaleY(1); }
.schedule__row:hover h3 { color: var(--gold-2); }
.schedule__row:hover .schedule__more { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .schedule__row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) max-content; gap: 40px; align-items: baseline; padding: 26px 0; }
}
.schedule--compact { margin-top: 26px; }
.schedule--compact .schedule__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
.schedule--compact .schedule__row h3 { font-size: 17px; }
.schedule--compact .schedule__row p { font-size: 15px; }
.schedule--compact .schedule__more { display: none; }

/* ---------- the build line (process) ---------- */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; display: grid; }
.stage { counter-increment: stage; position: relative; padding: 0 0 30px 62px; }
.stage::before {
  content: counter(stage); position: absolute; left: 0; top: -6px; z-index: 1;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1.5px solid var(--gold-soft); background: var(--dark); color: var(--gold-soft);
  font-family: var(--display); font-weight: 700; font-size: 17px;
}
.stage::after { content: ""; position: absolute; left: 19px; top: 34px; bottom: -6px; width: 1.5px; background: rgba(232,197,146,.4); }
.stage:last-child { padding-bottom: 0; }
.stage:last-child::after { content: none; }
.stage:last-child::before { background: var(--gold-soft); color: var(--dark); } /* handover */
.stage h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.stage p { color: rgba(255,255,255,.7); font-size: 15px; }
@media (min-width: 900px) {
  .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
  /* subgrid lines the descriptions up even when a stage title wraps */
  .stage { padding: 62px 0 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .stage::before { top: 0; }
  .stage::after { left: 44px; right: -24px; top: 19px; bottom: auto; width: auto; height: 1.5px; }
}
/* Draws itself in once scrolled into view; scripts/site.js adds the classes,
   so without JS or with reduced motion the line is simply there. */
.stages--anim .stage::before { opacity: 0; transition: opacity .45s var(--ease); }
.stages--anim .stage::after { transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease); }
.stages--anim .stage > * { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
@media (min-width: 900px) { .stages--anim .stage::after { transform: scaleX(0); transform-origin: left; } }
.stages.is-in .stage::before, .stages.is-in .stage > * { opacity: 1; transform: none; }
.stages.is-in .stage::after { transform: scale(1); }
.stages .stage:nth-child(2) > *, .stages .stage:nth-child(2)::before, .stages .stage:nth-child(1)::after { transition-delay: .18s; }
.stages .stage:nth-child(3) > *, .stages .stage:nth-child(3)::before, .stages .stage:nth-child(2)::after { transition-delay: .36s; }
.stages .stage:nth-child(4) > *, .stages .stage:nth-child(4)::before, .stages .stage:nth-child(3)::after { transition-delay: .54s; }
.stages .stage:nth-child(5) > *, .stages .stage:nth-child(5)::before, .stages .stage:nth-child(4)::after { transition-delay: .72s; }

/* ---------- four rules (about) ---------- */
.rules { display: grid; gap: 30px 40px; }
@media (min-width: 700px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rule { border-top: 2px solid var(--ink); padding-top: 18px; }
.rule h3 { margin-bottom: 8px; }
.rule p { color: var(--muted); font-size: 15px; }

/* ---------- projects: caption under each picture ---------- */
.site .proj { display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; }
.site .proj img {
  aspect-ratio: 4 / 3; height: auto; border-radius: var(--r-img); background: var(--surface);
  outline: 1px solid rgba(16,18,21,.06); outline-offset: -1px;
  transition: box-shadow .35s var(--ease), filter .35s var(--ease), transform .1s;
}
.site .proj:hover img, .site .proj:focus-visible img { transform: none; filter: brightness(1.04); box-shadow: 0 22px 40px -26px rgba(16,18,21,.5); }
.site .proj__cap { position: static; padding: 0; background: none; color: var(--ink); gap: 2px; }
.site .proj__cap b { font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color .2s var(--ease); }
.site .proj__cap span { font-size: 14px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.site .proj:hover .proj__cap b, .site .proj:focus-visible .proj__cap b { text-decoration-color: var(--gold); }
@media (min-width: 1000px) {
  .site .projects > :first-child { height: 100%; min-height: 0; }
  .site .projects > :first-child img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}

/* ---------- FAQ ---------- */
.site .faq { border-top: 2px solid var(--ink); }
.site .faq summary { padding: 18px 44px 18px 0; font-size: 17px; font-weight: 500; }
.site .faq summary::after {
  content: "+"; border: 0; width: auto; height: auto; right: 4px;
  font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--gold-2);
  transform: translateY(-50%); transition: transform .3s var(--ease);
}
.site .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.site .faq p { padding: 0 44px 20px 0; }

/* ---------- stats (About page figures, shown once set in Settings) ---------- */
.site .stats { gap: 0; border-top: 2px solid var(--ink); }
.site .stat { background: none; border-radius: 0; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); }
.site .stat__n { font-family: var(--display); font-size: clamp(32px, 4vw, 52px); line-height: 1; }
.site .stat__l { font-size: 14px; letter-spacing: 0; text-transform: none; margin-top: 8px; }

/* ---------- call-to-action band ---------- */
.site .cta-band { border-radius: var(--r-xl); border-left: 4px solid var(--gold); padding: clamp(28px, 4.5vw, 56px); gap: 26px; }
.site .cta-band h2 { max-width: none; }
.site .cta-band__text .lede { margin-top: 10px; }

/* ---------- services page ---------- */
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; }
.jump a { color: #fff; font-size: 15px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .2s var(--ease), color .2s var(--ease); }
.jump a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.service__body { margin-top: 14px; }
.service__sub { margin: 28px 0 10px; font-size: 17px; }
.service .split { align-items: start; }
.service + .service { padding-top: 0; border-top: 0; }
@media (min-width: 900px) {
  /* the picture stays in view while the longer description scrolls past */
  .service figure.split__media { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- contact page ---------- */
.contact__grid { display: grid; gap: 44px; }
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(44px, 6vw, 88px); align-items: start; }
}
.enquiry { border-top: 2px solid var(--ink); padding-top: 24px; }
.enquiry__head h2 { font-size: 24px; }
.enquiry__head p { margin: 8px 0 24px; font-size: 15px; color: var(--muted); }
.site .field label { font-size: 14px; }
.site .field input, .site .field select, .site .field textarea {
  border-radius: var(--r-ctl); border-color: #cfd4d9;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site .field input:focus, .site .field select:focus, .site .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195,154,78,.28);
}
.site .form__status { border-radius: var(--r-ctl); }
.site .form__note a { text-decoration: underline; text-underline-offset: 3px; }
.contact__aside h2 { font-size: 24px; }
.contact__aside h3 { font-size: 18px; margin-top: 32px; }
.contact__aside .ticks { margin-top: 14px; }
.office { display: grid; margin: 16px 0 0; border-top: 2px solid var(--ink); }
.office > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.office dt { color: var(--muted); }
.office dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.office a { transition: color .2s var(--ease); }
.office a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.talk { margin-top: 32px; background-color: var(--dark); color: #fff; padding: 28px; border-radius: var(--r-img); border-left: 4px solid var(--gold); }
.talk h3 { color: #fff; margin-top: 0; }
.talk p { color: rgba(255,255,255,.75); margin: 8px 0 20px; font-size: 15px; }

/* ---------- privacy policy prose ---------- */
.site .prose { max-width: 70ch; }
.site .prose h2 { font-size: clamp(20px, 2vw, 24px); margin: 36px 0 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
.site .prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.site .prose ul { gap: 10px; }
.site .prose li::marker { color: var(--gold-2); }
.site .prose a { transition: color .2s var(--ease); }
.site .prose a:hover { color: var(--gold-2); }

/* ---------- footer ---------- */
.site .site-footer { border-top: 3px solid var(--gold); }
.site .footer-h { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; }
.site .site-footer a { transition: color .2s var(--ease); }
.site .flinks a:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-soft); }
.site .fcontact { gap: 12px; }
.site .fcontact .ic { width: 18px; height: 18px; border-radius: 0; background: none; color: var(--gold-soft); }
.site .fcontact > a:hover { color: #fff; }
.site .footer-bottom { font-size: 13.5px; }
.site .social { border-radius: var(--r-ctl); }
.site .social:hover { transform: none; }

/* ---------- misc ---------- */
.site .eyebrow { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.site .wa-float { box-shadow: 0 6px 18px rgba(0,0,0,.28); }

/* ---------- projects page ---------- */
.projects + .btn-row { margin-top: 36px; }
.site .filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.site .filter[hidden] { display: none; }
.site .filter button {
  font: inherit; font-size: 14.5px; line-height: 1; color: var(--ink); cursor: pointer;
  padding: 11px 16px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-ctl);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.site .filter button:hover { border-color: var(--ink); }
.site .filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.site .filter button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cases { display: grid; gap: 52px 28px; }
@media (min-width: 700px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site .case { display: flex; flex-direction: column; scroll-margin-top: 12px; }
.site .case[hidden] { display: none; }
.case__media { margin: 0; }
.case__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  border-radius: var(--r-img); background: var(--surface);
  outline: 1px solid rgba(16,18,21,.06); outline-offset: -1px;
}
.case__meta { margin: 18px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); }
.case__meta span { font-weight: 400; color: var(--muted); }
.case__meta span::before { content: "\00b7"; margin: 0 8px; color: var(--muted); }
.site .case h3 { margin: 0 0 8px; }
.case__text { color: var(--muted); font-size: 15.5px; }
.case__scope { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; padding: 0; }
.case__scope li { font-size: 13px; line-height: 1.3; padding: 5px 10px; background: var(--surface); border-radius: var(--r-ctl); }
.case__link {
  margin-top: auto; align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold);
  transition: color .2s var(--ease);
}
.case__link:hover { color: var(--gold-2); }

/* the lead project reads like a page of its own */
.case--lead { grid-column: 1 / -1; padding-bottom: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.case--lead .case__media img { aspect-ratio: 16 / 10; box-shadow: var(--shadow-img); }
.case--lead .case__meta { margin-top: 24px; }
.case--lead h2 { margin: 0; }
.case--lead .lede { margin-top: 14px; }
.case__text + .case__sub, .case--lead .case__text { margin-top: 14px; }
.case__sub { margin: 28px 0 10px; font-size: 17px; }
.case--lead .btn-row { margin-top: 30px; }
@media (min-width: 900px) {
  .site .case--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 64px); align-items: start; }
  .case--lead .case__media { position: sticky; top: calc(var(--header-h) + 24px); }
  .case--lead .case__meta { margin-top: 0; }
  .case--lead .ticks--2 { grid-template-columns: 1fr; }
  .case--lead .ticks--2 li:nth-child(2) { border-top: 0; }
}
.cases.is-filtered .case--lead { padding-bottom: 0; border-bottom: 0; }

/* closing tile: the invitation sits in the grid where the next project would */
.site .case--next {
  justify-content: center; padding: clamp(28px, 3.5vw, 44px); min-height: 320px;
  background-color: var(--dark); color: #fff; border-radius: var(--r-img); border-left: 4px solid var(--gold);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
}
.site .case--next h3 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); }
.case--next p { color: rgba(255,255,255,.75); font-size: 15.5px; max-width: 34ch; }
.case--next .btn { margin-top: 24px; align-self: flex-start; }
.cases__empty { color: var(--muted); }

/* ---------- team page ----------
   Portraits under a rule, caption beneath each one, the way the project
   photos are shown. Contact lines are plain ruled rows so a visitor on a
   phone can tap a number without hunting for it. */
.team { display: grid; gap: 44px 28px; border-top: 2px solid var(--ink); padding-top: clamp(28px, 3.5vw, 40px); }
@media (min-width: 560px)  { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; } }
@media (min-width: 1240px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.member { display: flex; flex-direction: column; min-width: 0; }
.member__photo {
  margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-img); background-color: var(--dark);
  outline: 1px solid rgba(16,18,21,.06); outline-offset: -1px;
  box-shadow: var(--shadow-img);
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: filter .35s var(--ease);
}
.member:hover .member__photo img { filter: brightness(1.04); }
/* No photo yet: initials on the drawing-grid dark surface used elsewhere. */
.member__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 72px); letter-spacing: .02em;
  color: var(--gold-soft);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.member__initials::after {
  content: ""; position: absolute; left: 50%; bottom: 22%; width: 44px; height: 2px;
  background: var(--gold); transform: translateX(-50%);
}
.member__body { display: flex; flex-direction: column; padding-top: 18px; flex: 1; }
.member__role { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); letter-spacing: .01em; }
.site .member h3 { font-size: clamp(19px, 1.7vw, 22px); margin: 0; }
.member__text { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.member__contact { margin-top: auto; padding-top: 14px; display: grid; }
.member__contact > a, .member__contact > span {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  border-top: 1px solid var(--rule); transition: color .2s var(--ease);
}
.member__contact > a:hover { color: var(--gold-2); }
.member__contact .ic { display: grid; place-items: center; width: 18px; height: 18px; color: var(--gold-2); flex: none; }
.member__contact .ic svg, .member__wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.member__wa svg { width: 18px; height: 18px; color: #15773f; flex: none; }
.member__wa:hover { color: #106333; }
/* Phones: portrait at the left, details beside it, so a full-width tile does
   not push each person a screen apart. */
@media (max-width: 479px) {
  .team { gap: 26px; }
  .member { flex-direction: row; gap: 16px; align-items: flex-start; }
  .member__photo { flex: 0 0 112px; width: 112px; }
  .member__body { padding-top: 0; min-width: 0; }
  .member__initials { font-size: 30px; }
  .member__initials::after { width: 26px; bottom: 16%; }
  .member__contact { padding-top: 10px; }
  .member__contact > a, .member__contact > span { min-height: 38px; font-size: 14.5px; }
}

/* ---------- admin panel keeps its original look ----------
   The admin shares this stylesheet; these rules pin it to the styling it was
   designed with, so public-site refinements do not change it. */
.adm { --r-sm: 8px; --r: 12px; --r-lg: 20px; --r-xl: 28px; }
.adm .btn { padding: 13px 22px; border-radius: 999px; min-height: 46px; letter-spacing: 0; }
.adm .btn__arrow {
  width: 26px; height: 26px; border-radius: 50%; margin-right: -6px;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(255,255,255,.9); color: var(--dark);
}
.adm .btn--gold .btn__arrow { background: var(--dark); color: var(--gold-soft); }
.adm .btn--ghost .btn__arrow, .adm .btn--light .btn__arrow { background: var(--dark); color: #fff; }

/* ---------- listings from the panel: cards on /projects and /projects/<slug> ---------- */
.case--listing .case__media { position: relative; display: block; }
.case__noimg {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-img);
  background: var(--surface); color: var(--muted); font-size: 14px;
}
.case__tag {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--r-ctl);
  background: var(--dark); color: #fff; font-size: 12px; font-weight: 600; text-transform: capitalize;
}
.case--listing h3 a { color: inherit; text-decoration: none; }
.case--listing h3 a:hover { color: var(--gold-2); }
.case__price { margin: 0 0 8px; font-weight: 600; font-size: 17px; }
.lgallery { display: grid; gap: 10px; }
.lgallery figure { margin: 0; }
.lgallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); background: var(--surface); }
@media (min-width: 700px) {
  .lgallery--multi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lgallery--multi figure:first-child { grid-column: span 2; grid-row: span 2; }
}
.listing { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .listing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.listing h2 { margin: 0 0 12px; }
.listing .ticks { margin-bottom: 8px; }
.listing .btn-row { margin-top: 28px; }
.listing__price { margin: 0 0 24px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; }
.listing__price span { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }

/* ---------- hero: content sits just under the navbar, not at the bottom ----------
   The text block used to be pinned to the foot of a full-screen hero, which
   left a tall empty band under the header on every screen size. */
.hero { align-items: center; min-height: min(calc(100svh - var(--header-h) - 1px), 820px); }
.hero__in { padding-block: clamp(36px, 6vh, 56px); }
@media (max-width: 899px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero__in { padding-block: 36px 28px; }
}
@media (max-width: 639px) { .hero__in { padding-block: 28px 24px; } }

/* ---------- smaller pictures ----------
   Homepage projects: an even three-up grid instead of one oversized lead
   picture; two-up on phones, one-up on the very smallest phones (≤399px). */
.site .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 399px) { .site .projects { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .site .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.site .projects > :first-child { grid-column: auto; grid-row: auto; height: auto; min-height: 0; }
.site .projects > :first-child img { flex: none; aspect-ratio: 4 / 3; }
.site .proj img { aspect-ratio: 4 / 3; }
.split__media img { aspect-ratio: 4 / 3; }
.split__media--tall img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { figure.split__media { max-width: 540px; } .split--rev figure.split__media { margin-left: auto; } }

/* ---------- construction field work (homepage) ---------- */
.fieldwork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .fieldwork { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.fieldwork img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-img); background: var(--surface);
  outline: 1px solid rgba(16,18,21,.06); outline-offset: -1px;
}

/* ---------- FAQ: heading on top, questions full width beneath ---------- */
.faq-sec .sec-head { max-width: 760px; }
.site .faq--full { max-width: 980px; }
.site .faq--full details { border-bottom: 1px solid var(--line); }
.site .faq--full summary {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: 0 12px;
  padding: 22px 52px 22px 0; font-size: clamp(16px, 1.6vw, 18.5px); font-weight: 600;
}
.faq__n { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.site .faq--full details[open] summary { color: var(--ink); }
.site .faq--full details[open] { background: linear-gradient(90deg, var(--surface), transparent 85%); }
.site .faq--full p { padding: 0 52px 24px 56px; max-width: 72ch; font-size: 15.5px; line-height: 1.7; }
.site .faq--full summary::after {
  right: 12px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; font-size: 20px;
}
@media (max-width: 639px) {
  .site .faq--full summary { grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; padding: 18px 44px 18px 0; }
  .site .faq--full p { padding: 0 8px 20px 38px; }
  .site .faq--full summary::after { right: 4px; width: 28px; height: 28px; }
}
.faq-help {
  max-width: 980px; margin-top: clamp(28px, 4vw, 40px); padding: clamp(20px, 3vw, 28px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  background: var(--surface); border-left: 3px solid var(--gold); border-radius: var(--r-lg);
}
.faq-help p { margin: 0; color: var(--muted); max-width: 52ch; }
.faq-help b { color: var(--ink); display: block; font-size: 17px; margin-bottom: 2px; }
.site .faq-help .btn-row { margin-top: 0; }

/* ---------- small phones: keep grids and long button labels inside the screen ---------- */
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .btn-row .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ---------- page banners: one look for the homepage hero and every inner page ----------
   Inner pages get the homepage treatment: a construction photo under the same
   shading, white type on the left, a gold rule above the heading, and the same
   entrance. Each banner is a fixed height, so the pages match whatever the
   length of their heading. */
.site .page-hero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(460px, 56vh, 520px);
  padding: 0; background: var(--dark);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg picture, .page-hero__bg img { display: block; width: 100%; height: 100%; }
.page-hero__bg img { object-fit: cover; object-position: 70% 50%; animation: settle 1.6s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.page-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,15,16,.45) 0%, rgba(15,15,16,0) 30%, rgba(15,15,16,0) 60%, rgba(15,15,16,.65) 100%),
    linear-gradient(90deg, rgba(15,15,16,.88) 0%, rgba(15,15,16,.7) 38%, rgba(15,15,16,.15) 72%, rgba(15,15,16,0) 100%);
}
.page-hero__in { width: 100%; padding-block: clamp(44px, 7vh, 72px); }
.site .page-hero--photo h1 {
  max-width: 18ch; color: #fff;
  font-size: clamp(30px, min(4vw, 6vh), 52px);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.site .page-hero--photo .lede { max-width: 54ch; color: rgba(255,255,255,.86); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.site .page-hero--photo .crumbs { color: rgba(255,255,255,.72); margin-bottom: 0; }
.site .page-hero--photo .crumbs a { color: #fff; }
.page-hero--photo .jump ul { margin-top: 26px; }
.page-hero--photo .btn-row { margin-top: 26px !important; }

/* gold rule above every banner heading — removed */
.page-hero--photo .crumbs + h1 { margin-top: clamp(18px, 2.8vh, 26px); }

/* a thin gold line closes off every banner */
.hero::after, .site .page-hero--photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 50%, rgba(232,197,146,0) 100%);
}

/* same entrance as the homepage hero */
.page-hero--photo .crumbs, .page-hero--photo h1, .page-hero--photo .lede,
.page-hero--photo .jump, .page-hero--photo .btn-row { animation: rise .8s var(--ease) both; }
.page-hero--photo h1 { animation-delay: .08s; } .page-hero--photo .lede { animation-delay: .18s; }
.page-hero--photo .jump, .page-hero--photo .btn-row { animation-delay: .28s; }

@media (max-width: 899px) {
  .page-hero__shade { background: linear-gradient(180deg, rgba(15,15,16,.55) 0%, rgba(15,15,16,.66) 45%, rgba(15,15,16,.88) 100%); }
}
@media (max-width: 639px) {
  .site .page-hero--photo { min-height: 440px; align-items: flex-end; }
  /* the Services section links stay on one swipeable row instead of stacking */
  .page-hero--photo .jump ul { flex-wrap: nowrap; overflow-x: auto; gap: 0 20px; margin-top: 20px; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .page-hero--photo .jump ul::-webkit-scrollbar { display: none; }
  .page-hero--photo .jump li { flex: none; }
  .page-hero--photo .jump a { font-size: 14px; white-space: nowrap; }
  .page-hero__in { padding-block: 40px 34px; }
  .page-hero__bg img { object-position: 60% 50%; }
}