/* Legacy Concrete LLC
   Design tokens follow docs/legacy-concrete-design-brief.md.
   Mobile breakpoint is 740px: below it the nav collapses, service cards
   become tap-to-expand, and the fixed call bar appears. */

:root {
  --ink: #14161A;
  --slate: #5C636B;
  --line: #E7E4DF;
  --pale: #FAF9F7;
  --band: #F4F2EE;
  --white: #FFFFFF;
  --accent: #0C56C4;
  --accent-hover: #0A459E;
  --accent-tint: #E8F0FD;
  --star: #E9A930;
  --muted: #8B9099;
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 28px rgba(20, 22, 26, .06);
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1360px;
  --serif: "Source Serif 4", Georgia, serif;
}

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

html, body { margin: 0; padding: 0; background: var(--pale); }

body {
  font-family: Figtree, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ink);
}

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent-tint);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: 10px;
}

@keyframes kb {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.11) translate3d(-1.5%, -1%, 0); }
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.wrap { background: var(--pale); overflow-x: hidden; }
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.accent { color: var(--accent); }

/* Scroll reveal. JS adds .reveal-init only to elements below the fold, so
   with JS off everything stays visible. */
.reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .7, .28, 1);
}
.reveal-init.is-shown { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
}
.btn-sm { padding: 15px 26px; font-size: 17px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
  background: rgba(250, 249, 247, .86);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(14px);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The supplied logo is a vertical lockup (mark over a stacked wordmark) and its
   text is illegible below ~90px tall, which a 47px header bar cannot give it.
   So the header pairs the logo's MARK with the existing type. The logo has
   baked-in colours, so the light and dark variants are two <img> elements
   toggled by CSS rather than one recoloured file. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  display: block;
  flex: 0 0 auto;
  /* same fluid ramp the wordmark uses: settled at 740px, ceiling at 1200px */
  height: clamp(38px, 30.6px + 1.0vw, 43px);
  width: auto;
}
.brand-logo-std { display: none; }
.is-scrolled .brand-logo-rev { display: none; }
.is-scrolled .brand-logo-std { display: block; }
.brand-text { display: block; }
.brand-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 14.57px + 0.87vw, 25px);
  letter-spacing: -0.014em;
  line-height: 1.15;
  color: #FFFFFF;
}
.brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.is-scrolled .brand-name { color: var(--ink); }
.is-scrolled .brand-sub { color: var(--slate); }

.nav-desktop { display: flex; align-items: center; gap: clamp(30px, 17.13px + 1.74vw, 38px); }
.nav-link {
  font-size: clamp(15px, 11.78px + 0.43vw, 17px);
  font-weight: 600;
  color: #FFFFFF;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.nav-link:hover { border-bottom-color: var(--accent); color: #FFFFFF; }
.is-scrolled .nav-link { color: var(--ink); }
.is-scrolled .nav-link:hover { color: var(--ink); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 11.78px + 0.43vw, 17px);
  font-weight: 600;
  color: #FFFFFF;
  background: transparent;
  border: 1px solid var(--accent);
  padding: 4px clamp(14px, 7.57px + 0.87vw, 18px) 5px;
  border-radius: 0;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover { background: var(--accent); color: #fff; }
.is-scrolled .nav-cta { color: var(--ink); }
.is-scrolled .nav-cta:hover { color: #fff; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  cursor: pointer;
}
.is-scrolled .burger { border-color: var(--line); }
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
}
.is-scrolled .burger span { background: var(--ink); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px var(--gutter) 20px;
  background: rgba(250, 249, 247, .98);
  border-top: 1px solid var(--line);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 13px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a.is-accent { color: var(--accent); border-bottom: 0; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-img {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 62%;
  background-color: #23262B;
  animation: kb 26s ease-in-out infinite alternate;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .78) 0%, rgba(20, 22, 26, .48) 42%, rgba(20, 22, 26, .86) 100%);
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  padding: 132px var(--gutter) clamp(96px, 12vw, 132px);
  text-align: center;
}
.hero-title {
  margin: 0 auto;
  max-width: 15ch;
  font-size: clamp(40px, 6.4vw, 78px);
  color: #fff;
  text-wrap: balance;
  animation: riseIn .7s ease .1s both;
}
.hero-lede {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 450;
  line-height: 1.58;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(20, 22, 26, .45);
  text-wrap: pretty;
  animation: riseIn .7s ease .2s both;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  animation: riseIn .7s ease .3s both;
}

.trust {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(20, 22, 26, 0) 0%, rgba(20, 22, 26, .5) 100%);
}
.trust-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 40px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: stretch;
  gap: 24px;
}
.trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.trust-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .34);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-icon svg { width: 17px; height: 17px; }
.trust-label {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(20, 22, 26, .5);
}

/* --------------------------------------------------------------- services */

.services { background: var(--pale); padding: clamp(76px, 9vw, 136px) 0; }
.section-head { max-width: 62ch; }
.section-head h2 { margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.section-lede { margin-top: 16px; font-size: 18px; text-wrap: pretty; }

.svc-grid {
  display: grid;
  align-items: start;
  gap: clamp(20px, 2.4vw, 30px);
}
.svc-grid-t1 {
  margin-top: clamp(34px, 5vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
.svc-grid-t2 {
  margin-top: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr));
}

.svc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  height: auto;
  align-self: start;
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.svc-media { position: relative; display: block; }
/* <picture> must not introduce a box of its own: the card image and the
   collapsed mobile tile are sized and positioned by the <img> rules below. */
.svc-media picture, .svc-toggle picture { display: contents; }
.svc-media img {
  display: block;
  width: 100%;
  /* the width/height attributes are a presentational hint; without this the
     intrinsic height wins and the aspect-ratio rules below are ignored */
  height: auto;
  object-fit: cover;
  background: #EDEBE7;
}
.t1 .svc-media img { aspect-ratio: 3 / 2; }
.t2 .svc-media img { aspect-ratio: 2 / 1; }


.svc-toggle {
  position: relative;
  width: 100%;
  min-height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  border: 0;
  cursor: default;
  pointer-events: none;
  text-align: left;
}
.t1 .svc-toggle { padding: 32px 30px 0; }
.t2 .svc-toggle { padding: 20px 22px 0; }

.svc-thumb, .svc-thumb-scrim { display: none; }

.svc-title {
  position: relative;
  flex: 1 1 auto;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.15;
  color: var(--ink);
}
.t1 .svc-title { font-size: clamp(27px, 2.6vw, 30px); }
.t2 .svc-title { font-size: 19px; }

.svc-chev {
  position: relative;
  display: none;
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 14px;
  transition: transform .3s ease;
  transform: rotate(0deg);
}

.svc-body {
  max-height: none;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.22, .7, .28, 1);
}
.t1 .svc-body-inner { padding: 12px 30px 34px; }
.t2 .svc-body-inner { padding: 8px 22px 22px; }
.t1 .svc-body-inner p { font-size: 17px; text-wrap: pretty; }
.t2 .svc-body-inner p { font-size: 15px; text-wrap: pretty; }

/* ------------------------------------------------------- also ask us about */

.ask {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 22px;
  border-top: 1px solid #D9D5CE;
}
.ask-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ask-grid {
  margin-top: 14px;
  display: grid;
  /* 272px yields 4 tracks at the 1248px content width of --maxw 1360, and
     steps down to 3 then 2 on narrower screens rather than cramping. */
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: 0 44px;
}

.ask-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ask-row p { font-size: 15px; color: var(--slate); text-wrap: pretty; margin: 0; }
.ask-name { font-weight: 700; color: var(--ink); }

.ask-acc { display: none; flex-direction: column; border-bottom: 1px solid var(--line); }
.ask-acc button {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.ask-acc-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.ask-chev {
  color: var(--accent);
  font-size: 13px;
  transition: transform .3s ease;
  transform: rotate(0deg);
  flex-shrink: 0;
}
.ask-acc.is-open .ask-chev { transform: rotate(180deg); }
.ask-acc p {
  display: none;
  font-size: 15px;
  color: var(--slate);
  text-wrap: pretty;
  padding: 0 0 10px;
  margin: 0;
}
.ask-acc.is-open p { display: block; }

/* ---------------------------------------------------------------- mid CTA */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(74px, 9vw, 118px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/cta-bg.jpg');
  background-image: image-set(url('assets/images/cta-bg.webp') type('image/webp'),
                              url('assets/images/cta-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 58%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .74) 0%, rgba(20, 22, 26, .62) 50%, rgba(20, 22, 26, .8) 100%);
}
.cta-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.cta-line {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--serif);
  /* Explicit: only 600 and 700 are loaded, so an inherited 400 was silently
     resolving to 600. Same rendered weight, no longer dependent on that. */
  font-weight: 600;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: #FFFFFF;
  text-wrap: pretty;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* ------------------------------------------------------------------ how */

.how {
  background: var(--band);
  padding: clamp(72px, 8.5vw, 124px) 0;
  border-bottom: 1px solid var(--line);
}
.how-head { max-width: 56ch; }
.how-head h2 { margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.how-grid {
  margin-top: clamp(32px, 4.5vw, 50px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.how-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12.75px;
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-num {
  align-self: flex-start;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
}
.how-card h3 { font-size: clamp(21px, 2.2vw, 25px); text-wrap: balance; }
.how-card p { font-size: 17px; text-wrap: pretty; }

/* ------------------------------------------------------------------ about */

.about { background: var(--band); padding: clamp(76px, 9vw, 136px) 0; }
.about-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
}
.about-head-mobile { display: none; margin: 0 0 4px; font-size: clamp(31px, 4.2vw, 50px); }
.about-head-desktop { display: block; margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.about-portrait-wrap { position: relative; }
.about-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 15px;
  overflow: hidden;
  background-color: #E4E1DC;
  background-image: repeating-linear-gradient(115deg, rgba(20, 22, 26, .055) 0 2px, rgba(20, 22, 26, 0) 2px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-portrait-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-body p { margin-top: 16px; font-size: 18px; text-wrap: pretty; }
.about-where {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--slate);
  text-wrap: pretty;
}
.about-where-label { font-weight: 700; color: var(--accent); }

/* -------------------------------------------------------------- why choose */

.why {
  position: relative;
  overflow: hidden;
  background: #23262B;
  padding: clamp(48px, 5.5vw, 76px) 0;
  border-top: 1px solid var(--line);
}
.why-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/why-bg.jpg');
  background-image: image-set(url('assets/images/why-bg.webp') type('image/webp'),
                              url('assets/images/why-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.why-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .66) 0%, rgba(20, 22, 26, .56) 50%, rgba(20, 22, 26, .7) 100%);
}
.why-shell { position: relative; }
.why-head { text-align: center; }
.why-head h2 {
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(28px, 3.4vw, 42px);
  color: #FFFFFF;
  text-wrap: balance;
}
.why-grid {
  margin-top: clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3.4vw, 46px);
}
.why-card { display: flex; flex-direction: column; gap: 10px; }
.why-icon {
  width: 49px;
  height: 49px;
  margin: 0 auto;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(232, 240, 253, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-icon svg { width: 26px; height: 26px; }
.why-card h3 {
  margin-top: 4px;
  font-size: clamp(20px, 2.2vw, 24px);
  color: #FFFFFF;
  text-align: center;
  text-wrap: balance;
}
.why-card p {
  font-size: 16px;
  color: rgba(255, 255, 255, .74);
  text-align: center;
  text-wrap: pretty;
}
.why-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 44px);
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  background: #FFFFFF;
  padding: clamp(66px, 8vw, 104px) 0;
  border-bottom: 1px solid var(--line);
}
.g-head { max-width: 660px; }
.g-head h2 { margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.g-head p {
  margin: 16px 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}

.g-wrap { position: relative; margin-top: clamp(28px, 4vw, 44px); }
.g-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 4px;
  padding-inline: 0;
  scroll-padding-inline-start: 0;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.g-track::-webkit-scrollbar { display: none; }

.g-item {
  position: relative;
  margin: 0;
  flex: 0 0 calc((100% - 24px) / 3.4);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 12.75px;
  background: #E9E6E1;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  transition: opacity .3s ease, transform .3s ease;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
}
.g-item picture, .lb-fig picture { display: contents; }
.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.g-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 11px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 22, 26, 0) 0%, rgba(20, 22, 26, .72) 100%);
}

.g-arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(20, 22, 26, .14);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.g-arrow svg { width: 19px; height: 19px; }
.g-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.g-prev { left: -18px; }
.g-next { right: -18px; }

.g-meter { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.g-bar {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.g-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10%;
  border-radius: 999px;
  background: var(--accent);
  transition: left .18s linear, width .18s linear;
}
.g-count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- reviews */

.reviews {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(76px, 9vw, 136px) 0;
  border-top: 1px solid var(--line);
}
.rv-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/reviews-bg.jpg');
  background-image: image-set(url('assets/images/reviews-bg.webp') type('image/webp'),
                              url('assets/images/reviews-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.rv-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .74) 0%, rgba(20, 22, 26, .62) 50%, rgba(20, 22, 26, .8) 100%);
}
.rv-head {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.rv-head h2 {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(31px, 4.2vw, 50px);
  color: #FFFFFF;
}
.rv-head p { margin: 16px 0 0; font-size: 16px; }
.rv-link {
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.rv-link:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }

.rv-marquee {
  position: relative;
  margin-top: clamp(34px, 5vw, 52px);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.rv-row {
  display: flex;
  width: max-content;
  gap: 22px;
  padding: 6px 11px;
  animation: marq 48s linear infinite;
  animation-play-state: running;
}
.rv-row:hover { animation-play-state: paused; }

.rv-card {
  flex: 0 0 auto;
  width: min(88vw, 400px);
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12.75px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease;
}
.rv-card:hover { border-color: var(--accent); }
.rv-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
.rv-card-link:hover { color: inherit; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-stars { color: var(--star); font-size: 15px; letter-spacing: 2px; }
.rv-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.rv-quote {
  margin: 14px 0 16px;
  font-size: 16px;
  color: var(--slate);
  text-wrap: pretty;
}
.rv-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.rv-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.rv-src { font-size: 13px; color: var(--muted); }

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

.contact { background: var(--band); padding: clamp(76px, 9vw, 136px) 0; }
.contact-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.contact-left h2 { margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.quick-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.quick-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s ease, transform .2s ease;
}
.quick-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.quick-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.quick-num {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.quick-note { font-size: 15px; color: var(--slate); text-wrap: pretty; }
.contact-note { margin-top: 22px; font-size: 18px; text-wrap: pretty; }

.quote-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.field-opt {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--pale);
  font-size: 16px;
}
.quote-form textarea { resize: vertical; }

.reply-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reply-btn {
  min-height: 46px;
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  border: 1px solid var(--line);
  background: var(--pale);
  color: var(--ink);
}
.reply-btn.is-on { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }

.submit-btn {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.submit-btn:hover { background: var(--accent-hover); }
.submit-btn:disabled { cursor: default; opacity: .7; }

.form-status { font-size: 15px; font-weight: 600; color: var(--accent); }
.form-error { font-size: 15px; font-weight: 600; color: var(--ink); }
.form-error a { color: var(--accent); }
.form-fine { font-size: 13px; color: var(--muted); }
[hidden] { display: none !important; }

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

.faq {
  background: #FFFFFF;
  padding: clamp(76px, 9vw, 136px) 0;
  border-top: 1px solid var(--line);
}
.faq-shell { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.faq-shell h2 { margin-top: 0; font-size: clamp(31px, 4.2vw, 50px); }
.faq-list { margin-top: clamp(26px, 4vw, 40px); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.faq-q > span:first-child {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.faq-chev {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 15px;
  transition: transform .3s ease;
  transform: rotate(0deg);
}
.faq-item.is-open .faq-chev { transform: rotate(180deg); }
.faq-a { display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-a p { padding: 0 2px 24px; max-width: 68ch; font-size: 16px; text-wrap: pretty; }

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

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  padding: clamp(60px, 8vw, 96px) 0 0;
}
.ft-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/footer-bg.jpg');
  background-image: image-set(url('assets/images/footer-bg.webp') type('image/webp'),
                              url('assets/images/footer-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.ft-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, .85) 0%, rgba(20, 22, 26, .81) 45%, rgba(20, 22, 26, .87) 100%);
}
.ft-shell { position: relative; }
.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(30px, 4vw, 56px);
}
.ft-logo {
  display: block;
  height: 132px;   /* the stacked lockup needs ~90px+ before CONCRETE is legible */
  width: auto;
}
.ft-desc {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  max-width: 34ch;
  color: rgba(255, 255, 255, .88);
  text-wrap: pretty;
}
.ft-phone {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.014em;
}
.ft-phone:hover { color: var(--accent-tint); }
.ft-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.ft-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.ft-list a { color: rgba(255, 255, 255, .9); }
.ft-list a:hover { color: #fff; }
.ft-bottom {
  margin-top: clamp(38px, 5vw, 60px);
  padding: 22px 0 clamp(88px, 12vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------- lightbox */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 14, 17, .93);
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 48px);
}
.lightbox.is-open { display: flex; }
.lb-backdrop { position: absolute; inset: 0; }
.lb-fig {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.lb-img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 12.75px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lb-btn {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, .22); }
.lb-close {
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  width: 46px;
  height: 46px;
}
.lb-close svg { width: 20px; height: 20px; }
.lb-prev, .lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}
.lb-prev { left: clamp(8px, 2.5vw, 26px); }
.lb-next { right: clamp(8px, 2.5vw, 26px); }
.lb-prev svg, .lb-next svg { width: 22px; height: 22px; }

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

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  box-shadow: 0 -8px 28px rgba(20, 22, 26, .12);
}
.callbar a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.callbar a:hover { color: #fff; }
.callbar-call { background: var(--ink); }
.callbar-quote { background: var(--accent); }

/* ============================================================ MOBILE 740 */

@media (max-width: 739.98px) {

  .nav-desktop { display: none; }
  .burger { display: flex; }

  .trust-inner { padding: 12px 14px 15px; gap: 10px; }
  .trust-item { flex-direction: column; gap: 7px; }
  .trust-icon { width: 24px; height: 24px; flex: 0 0 24px; }
  .trust-icon svg { width: 13px; height: 13px; }
  .trust-label { font-size: 12px; text-align: center; white-space: normal; }

  /* Service cards collapse to a photo tile with the title over it. */
  .svc-grid-t1, .svc-grid-t2 { grid-template-columns: 1fr; }

  .svc-card.t1:not(.is-open) { height: 164px; }
  .svc-card.t2:not(.is-open) { height: 116px; }

  .svc-card:not(.is-open) .svc-media { display: none; }
  .svc-card:not(.is-open) .svc-thumb,
  .svc-card:not(.is-open) .svc-thumb-scrim { display: block; }

  .svc-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    background: #EDEBE7;
  }
  .svc-thumb-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 22, 26, .12) 0%, rgba(20, 22, 26, .5) 62%, rgba(20, 22, 26, .78) 100%);
  }

  .svc-toggle {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    pointer-events: auto;
  }
  .t1 .svc-toggle { padding: 16px 18px; }
  .t2 .svc-toggle { padding: 14px 16px; }
  .svc-card.t1:not(.is-open) .svc-toggle { min-height: 164px; }
  .svc-card.t2:not(.is-open) .svc-toggle { min-height: 116px; }

  .t1 .svc-title { font-size: 22px; }
  .t2 .svc-title { font-size: 17px; }
  .svc-card:not(.is-open) .svc-title,
  .svc-card:not(.is-open) .svc-chev { color: #FFFFFF; }

  .svc-chev { display: block; }
  .svc-card.is-open .svc-chev { transform: rotate(180deg); }

  .svc-body { max-height: 0; }
  .t1 .svc-body-inner { padding: 0 16px 18px; }
  .t2 .svc-body-inner { padding: 0 14px 14px; }

  .ask-row { display: none; }
  .ask-acc { display: flex; }

  .cta-bg {
    background-image: url('assets/images/cta-bg-mobile.jpg');
    background-image: image-set(url('assets/images/cta-bg-mobile.webp') type('image/webp'),
                                url('assets/images/cta-bg-mobile.jpg') type('image/jpeg'));
    background-position: 50% 46%;
  }

  .how-grid { grid-template-columns: 1fr; }

  .about-head-mobile { display: block; }
  .about-head-desktop { display: none; }

  .g-track { padding-inline: 10%; cursor: auto; }
  .g-item { flex: 0 0 80%; scroll-snap-align: center; }
  .g-item:not(.is-current) { opacity: .5; transform: scale(.94); }
  .g-arrow { display: none; }

  .rv-row { gap: 16px; }
  .rv-card { width: min(60vw, 240px); padding: 14px 14px 12px; }
  .rv-stars { font-size: 13px; letter-spacing: 1px; }
  .rv-chip { font-size: 10px; padding: 3px 8px; }
  /* Every card stretches to the tallest, so one 528-character review was
     setting the height for all five. Clamping evens them out; the full text
     stays in the DOM and each card still links to the review on Google. */
  .rv-quote {
    margin: 12px 0;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rv-foot { padding-top: 12px; }
  .rv-name { font-size: 14px; }
  .rv-src { font-size: 12px; }

  .ft-bg {
    background-image: url('assets/images/footer-bg-mobile.jpg');
    background-image: image-set(url('assets/images/footer-bg-mobile.webp') type('image/webp'),
                                url('assets/images/footer-bg-mobile.jpg') type('image/jpeg'));
  }
  .ft-scrim {
    background: linear-gradient(180deg, rgba(20, 22, 26, .87) 0%, rgba(20, 22, 26, .84) 45%, rgba(20, 22, 26, .90) 100%);
  }

  .callbar.is-on { display: flex; }
}

/* ------------------------------------------- touch devices: fixed backgrounds */

/* iOS Safari gets background-attachment: fixed wrong. It sizes the background
   against the whole document rather than the viewport, so cover scales the
   image to fit an 11000px tall box and every section ends up showing a
   magnified sliver of nothing. That is what blanked these four sections.

   The default here is the safe one: an ordinary absolute layer, never shorter
   than its own section, so the image is simply there. No parallax, but nothing
   depending on JS or on a property WebKit disagrees about. */
@media (hover: none), (pointer: coarse), (max-width: 739.98px) {
  .cta-bg,
  .why-bg,
  .rv-bg,
  .ft-bg {
    inset: 0 0 auto 0;
    height: 100vh;
    height: 100lvh;
    min-height: 100%;
    background-attachment: scroll;
  }

  /* The better one, switched on only when script.js has measured, on this
     actual device, that a fixed child of a clip-path ancestor really does stay
     pinned to the viewport. overflow: hidden does not clip a fixed child but
     clip-path does, and clip-path is not one of the properties that makes an
     element a containing block for fixed descendants, so the layer holds still
     while the section scrolls past it. The compositor does the holding, which
     is the point: driving it from a scroll handler leaves the layer a frame
     behind the page and it visibly twitches. */
  .bg-fixed .cta,
  .bg-fixed .why,
  .bg-fixed .reviews,
  .bg-fixed .site-footer { clip-path: inset(0); }

  .bg-fixed .cta-bg,
  .bg-fixed .why-bg,
  .bg-fixed .rv-bg,
  .bg-fixed .ft-bg {
    position: fixed;
    min-height: 0;
  }
}

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

/* The honeypot. Off screen rather than display: none or hidden, because the
   simpler bots skip anything they can tell is not rendered, and this one is
   meant to look real to them. It stays out of the tab order and out of the
   accessibility tree via the markup, not via CSS. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reserves nothing until Turnstile renders, so the layout does not shift when
   the widget stays invisible, which is the normal case. */
.ts-mount:empty { display: none; }
.ts-mount { margin: 2px 0 4px; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .g-track { scroll-behavior: auto; }
}