/* ============================================================
   Iftihar Hussain Technical Services L.L.C
   ============================================================ */

:root {
  --bg:        #F1EEE9;
  --shell:     #FAF9F7;
  --white:     #fff;
  --ink:       #141414;
  --body:      #3A322C;
  /* --muted was #8A7B70 = 3.88:1 on --shell, below the 4.5:1 AA floor for
     normal text. Darkened to clear AA everywhere it is used. */
  --muted:     #6B5C51;
  --accent:    #F2590C;
  /* --accent-d was the default link colour at 3.82:1. Uses --accent-t now. */
  --accent-d:  #C24D07;
  --accent-dd: #B8460A;
  --accent-t:  #C24D07;
  --accent-l:  #FFB877;
  --accent-ll: #FFD9B3;
  /* Button gradients carry WHITE text, so both ends must clear 4.5:1 against
     white. The old #FFB877 end measured 1.70:1. These clear AA across the
     whole ramp. --accent-l is kept for decorative (non-text) use. */
  --grad:      linear-gradient(120deg, #CB4A05, #A8380A);
  --grad-d:    linear-gradient(140deg, #CB4A05, #A8380A);
  --tile-grad: linear-gradient(140deg, #FFD9B3, #FFB877);
  --line:      rgba(20, 20, 20, 0.07);
  --line-2:    rgba(20, 20, 20, 0.12);
  --r-lg:      32px;
  --r-md:      28px;
  --r-sm:      20px;
  --shadow:    0 30px 70px -50px rgba(40, 25, 10, 0.5);
  --sans:      'DM Sans', system-ui, -apple-system, sans-serif;
  --display:   'Sora', system-ui, sans-serif;
  --script:    'Sacramento', cursive;
  --mono:      ui-monospace, Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-d); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 20px; background: var(--ink); color: #fff;
  border-radius: 0 0 12px 0; font-weight: 700;
}
.skip:focus { left: 0; }

@keyframes kb   { from { transform: scale(1) }        to { transform: scale(1.07) } }
@keyframes spin { from { transform: rotate(0) }       to { transform: rotate(360deg) } }
@keyframes marq { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }

/* ── Shell ─────────────────────────────────────────────── */
.page  { padding: 14px; min-height: 100vh; }
.shell {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--shell);
  overflow: clip;
  box-shadow: var(--shadow);
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 70px 18px 0; }
.wrap--top    { padding-top: 34px; }
.wrap--last   { padding-bottom: 80px; }
.wrap--narrow { max-width: 960px; }

/* ── Typography ────────────────────────────────────────── */
.h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 4.8vw, 64px);
  letter-spacing: -0.045em; line-height: 0.98;
  margin: 8px 0 0; max-width: 18ch;
}
.h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.04em; line-height: 1.02; margin: 8px 0 0;
}
.h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.035em; margin: 0;
}
.h2--light, .h3--light { color: #fff; }

.script { font-family: var(--script); font-size: 38px; line-height: 0.95; color: var(--accent-d); margin: 0; }
.script--light { color: var(--accent-l); }
.script--sm { font-size: 30px; }

.lede { font-size: 16.5px; line-height: 1.7; color: var(--body); margin: 18px 0 0; max-width: 62ch; }
.body { font-size: 15.5px; line-height: 1.7; color: var(--body); margin: 14px 0 0; max-width: 62ch; }
.note { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.empty { font-size: 15.5px; color: var(--body); padding: 40px 0; text-align: center; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.eyebrow--accent { color: var(--accent-dd); }
.eyebrow--onDark { color: rgba(255, 255, 255, 0.5); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }

.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ico svg { display: block; }

/* ── Tiles & chips ─────────────────────────────────────── */
.tile {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 30%;
  background: var(--tile-grad);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s ease-out;
}
.tile--grad { background: var(--grad-d); }
.tile--sm   { width: 36px; height: 36px; }
.tile--lg   { width: 46px; height: 46px; }
[data-glass]:hover .tile, .card:hover .tile { transform: rotate(-7deg) scale(1.07); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.chip {
  padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line-2); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em; color: var(--body);
}
.chip--accent {
  border-color: rgba(242, 89, 12, 0.24); color: #8A3B06;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0;
}

/* ── Photos ────────────────────────────────────────────── */
.photo { position: relative; overflow: hidden; border-radius: inherit; height: 100%; }
/* <picture> is inline by default, which would break the height chain to <img>. */
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--fill { position: absolute; inset: 0; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 10; }

.photo--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(20,20,20,.028) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, #EDE8E1, #E3DCD3);
  color: var(--muted);
}
.photo__slot { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: #6F625A; }
.photo__hint { font-size: 11.5px; color: var(--muted); max-width: 24ch; line-height: 1.5; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 12px 11px 22px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none;
  transition: transform .35s ease-out, box-shadow .35s ease-out, background .25s ease-out;
  width: max-content;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--sm { padding: 9px 10px 9px 18px; font-size: 13.5px; }

.btn--dark  { background: var(--ink); color: #fff; }
.btn--dark:hover  { color: #fff; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); }
.btn--grad  { background: var(--grad); color: #fff; }
.btn--grad:hover  { color: #fff; box-shadow: 0 16px 30px -16px rgba(242, 89, 12, .7); }
.btn--white { background: #fff; color: var(--ink); border: 1px solid var(--line-2); padding: 13px 20px; justify-content: center; }
.btn--white:hover { color: var(--ink); }
.btn--outline {
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line-2); padding: 10px 20px 10px 12px;
}
.btn--outline:hover { color: var(--ink); border-color: rgba(242, 89, 12, .45); }
.btn--ghost {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); padding: 11px 22px 11px 12px;
}
.btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.btn--onDark:hover { color: #fff; }

.btn__label { position: relative; }
.btn__arrow {
  position: relative; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: var(--grad-d);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .34s ease-out;
}
.btn__arrow--light { background: rgba(255, 255, 255, .24); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn__ico {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(242, 89, 12, .1);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn--ghost .btn__ico, .btn--onDark .btn__ico { background: rgba(255, 255, 255, .18); }

.sheen {
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  transform: translateX(-180%) skewX(-18deg);
}
.btn:hover .sheen { transition: transform .8s ease-out; transform: translateX(320%) skewX(-18deg); }

.iconbtn {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background .25s ease-out, border-color .25s ease-out;
}
.iconbtn:hover { background: rgba(242, 89, 12, .1); border-color: rgba(242, 89, 12, .4); }

/* ── Glass cards ───────────────────────────────────────── */
[data-glass] { position: relative; }
.glow {
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(242,89,12,.16), rgba(242,89,12,0) 70%);
  transition: opacity .3s ease-out; z-index: 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50; padding: 16px 18px;
  pointer-events: none;
  transition: padding .4s ease-out;
}
.nav.is-stuck { padding: 10px 18px; }
.nav__scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(250,249,247,.94), rgba(250,249,247,.72) 62%, rgba(250,249,247,0));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity .4s ease-out;
}
.nav.is-stuck .nav__scrim { opacity: 1; }
.nav__row {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}

.cap {
  position: relative; pointer-events: auto;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 26px -20px rgba(40, 25, 10, .5);
  transition: background .4s ease-out, box-shadow .4s ease-out;
}
.nav.is-stuck .cap {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px -22px rgba(40,25,10,.55), inset 0 1px 0 rgba(255,255,255,.9);
}

.brand {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: 4px 8px; text-decoration: none; color: inherit;
  pointer-events: auto;                 /* .nav__row disables these by default */
}
.brand:hover { text-decoration: none; color: inherit; }
.brand__logo { position: relative; width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.brand__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--accent) 0%, rgba(20,20,20,.1) 0%);
  transition: background .12s linear;
}
.brand__disc { position: absolute; inset: 3px; border-radius: 50%; background: var(--shell); }
.brand__mark {
  position: absolute; inset: 6px; border-radius: 50%; background: var(--grad-d);
  display: flex; align-items: center; justify-content: center;
}
.brand__diamond { width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.brand__text { line-height: 1.15; overflow: hidden; max-width: 220px; transition: max-width .5s ease-out, opacity .3s ease-out; }
.brand__name { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.025em; white-space: nowrap; }
.brand__lic  { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.megawrap { margin-left: auto; padding: 5px; }
.navlist { position: relative; display: flex; align-items: center; gap: 2px; }
.navpill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,184,119,.32), rgba(242,89,12,.18));
  opacity: 0; pointer-events: none;
  transition: left .42s ease-out, width .42s ease-out, opacity .28s ease-out;
}
.navbtn {
  position: relative; padding: 11px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .25s ease-out;
}
.navbtn:hover { text-decoration: none; color: var(--accent-dd); }
.navbtn.is-active { color: var(--accent-dd); font-weight: 700; }
.navbtn__chev { display: flex; transition: transform .35s ease-out; }
.megawrap.is-open .navbtn__chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(700px, calc(100vw - 70px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(20, 20, 20, .08); border-radius: var(--r-md);
  box-shadow: 0 30px 70px -34px rgba(40, 25, 10, .5); padding: 16px; z-index: 60;
}
.mega[hidden] { display: none; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega__item {
  display: flex; gap: 13px; align-items: center; text-align: left;
  border-radius: var(--r-sm); padding: 12px; text-decoration: none;
  transition: background .25s ease-out;
}
.mega__item:hover { background: rgba(242, 89, 12, .07); text-decoration: none; }
.mega__label { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }

.actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 5px; }
.nav__cta { padding: 11px 12px 11px 20px; font-size: 14px; }
.nav__cta .btn__arrow { width: 28px; height: 28px; }

.burger {
  display: none; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--body); border-radius: 2px; }
.burger span:last-child { width: 11px; background: var(--accent-t); }

/* ── Mobile menu ───────────────────────────────────────── */
.mobile {
  position: fixed; inset: 14px; z-index: 70; border-radius: var(--r-lg);
  background: rgba(250, 249, 247, .97);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  padding: 22px; overflow-y: auto;
  box-shadow: 0 40px 90px -40px rgba(40, 25, 10, .6);
}
.mobile[hidden] { display: none; }
.mobile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The drawer opens over the light shell, so the dark lockup reads here. */
.mobile__title { display: block; flex: 0 1 auto; min-width: 0; }
.mobile__title img { display: block; width: auto; height: 44px; max-width: 100%; }
.mobile__nav { margin-top: 22px; display: grid; gap: 7px; }
.mobile__item {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; text-decoration: none;
}
.mobile__item:hover, .mobile__item.is-active { text-decoration: none; border-color: rgba(242, 89, 12, .35); }
.mobile__num   { font-family: var(--mono); font-size: 11px; color: var(--accent-t); }
.mobile__label { flex: 1 1 auto; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.03em; color: var(--ink); }
.mobile__section { margin-top: 22px; }
.mobile__trades { margin-top: 10px; display: grid; gap: 6px; }
.mobile__trade {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; line-height: 1.3;
}
.mobile__trade:hover { text-decoration: none; color: var(--body); background: rgba(242, 89, 12, .05); }
.mobile__actions { margin-top: 22px; display: flex; gap: 10px; }
.mobile__actions .btn { flex: 1 1 0; justify-content: center; padding: 15px; }
.mobile__lic { margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); line-height: 1.8; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; max-width: 1280px; margin: 0 auto; padding: 10px 18px 0; touch-action: pan-y; }
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(50px);
  transition: transform .8s ease-out;
}
.orb--1 { top: -40px; left: 4%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,184,119,.5), rgba(255,184,119,0) 70%); }
.orb--2 { bottom: 40px; right: 8%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(242,89,12,.28), rgba(242,89,12,0) 70%); }

.hero__stage { position: relative; }
.hero__slide { display: none; }
.hero__slide.is-active { display: block; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 34px; align-items: center; }

.hero__tag {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 8px 16px; border-radius: 999px; background: rgba(242, 89, 12, .1);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-dd);
}
.hero__title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.045em;
  line-height: .98; font-size: clamp(38px, 5.2vw, 72px);
  margin: 22px 0 0; max-width: 16ch; text-wrap: balance;
}
.hero__sub { font-size: 16.5px; line-height: 1.7; color: var(--body); margin: 20px 0 0; max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 11px; margin: 28px 0 0; }

.hero__media { position: relative; }
.hero__tiltwrap { position: relative; transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.hero__frame {
  position: relative; height: 560px; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 26px 60px -40px rgba(40, 25, 10, .55);
}
.hero__kb { position: absolute; inset: 0; animation: kb 7s linear both; }
.hero__frame-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,0) 55%, rgba(20,20,20,.35));
}
.hero__badge {
  position: absolute; left: -14px; bottom: 26px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 14px; border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); box-shadow: 0 22px 44px -28px rgba(40, 25, 10, .6);
}
.hero__badge-num {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 30%; background: var(--grad-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff;
}
.hero__badge-label { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.hero__badge-sub   { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }

.hero__ctrl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 26px;
}
.hero__bars { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.hero__bar { flex: 1 1 0; background: none; border: 0; padding: 10px 0; cursor: pointer; }
.hero__bar-track { display: block; height: 3px; border-radius: 3px; background: rgba(20, 20, 20, .12); overflow: hidden; }
.hero__bar-fill  { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.hero__nav { display: flex; align-items: center; gap: 10px; }
.hero__counter { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }

/* ============================================================
   TRUST BAND
   ============================================================ */
.trust {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center;
  padding: 34px; border-radius: var(--r-lg); background: var(--ink); color: #fff;
}
.trust__seal { position: relative; width: 168px; height: 168px; flex: 0 0 auto; margin: 0 auto; }
.trust__ring { animation: spin 26s linear infinite; }
.trust__seal-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.trust__llc { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.trust__est { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .55); margin-top: 4px; }
.trust__lede { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.3vw, 27px); letter-spacing: -.03em; line-height: 1.25; margin: 0; max-width: 34ch; }
.trust__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }

.stat { display: flex; flex-direction: column; gap: 5px; }
.stat__n { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.03em; color: var(--accent-l); }
.stat__n--sm { font-size: 19px; color: var(--ink); }
.stat__l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.stat--box { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.stat--box .stat__l { color: var(--muted); }

/* ============================================================
   SPLIT / FLOAT CARD
   ============================================================ */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center; }
.split__media { position: relative; }
.split__photo { border-radius: var(--r-lg); overflow: hidden; }
.floatcard {
  position: absolute; right: -10px; bottom: -18px;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 20px 14px 14px; border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); box-shadow: 0 22px 44px -28px rgba(40, 25, 10, .6);
}
.floatcard--wide { left: 22px; right: auto; }
.floatcard__t { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.floatcard__s { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.floatcard__num {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 30%; background: var(--grad-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff;
}

/* ── Section head ──────────────────────────────────────── */
.sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-bottom: 30px;
}
.sechead__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   BENTO SERVICE CARDS
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento > .card:first-child { grid-column: span 2; grid-row: span 2; }
.bento > .card:first-child .card__media { height: 400px; }
.bento > .card:first-child .card__title { font-size: 25px; }

.card {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -34px rgba(40, 25, 10, .55); }
.card__media { position: relative; height: 190px; overflow: hidden; }
.card__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 50%, rgba(20,20,20,.3)); pointer-events: none; }
.card__open {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(20, 20, 20, .55);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  opacity: 0; transition: opacity .3s ease-out, transform .3s ease-out;
}
.card:hover .card__open, .card__open:focus-visible { opacity: 1; transform: translateY(0); }
.card__body { position: relative; padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; z-index: 1; }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__num { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.card__title { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; margin: 14px 0 0; line-height: 1.15; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent-dd); }
.card__text { font-size: 14px; line-height: 1.6; color: var(--body); margin: 10px 0 0; }

/* ============================================================
   WHY / PROCESS
   ============================================================ */
.whygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why {
  padding: 26px 22px; border-radius: var(--r-md); background: #fff;
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.why:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -34px rgba(40, 25, 10, .5); }
.why__t { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.025em; margin: 16px 0 0; position: relative; }
.why__p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 9px 0 0; position: relative; }

.process { margin-top: 22px; padding: 32px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.process__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.process__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.step { padding: 20px; border-radius: 22px; background: var(--shell); border: 1px solid var(--line); }
.step__top { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--accent-t); }
.step__t { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.025em; margin: 12px 0 0; }
.step__p { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 7px 0 0; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.cover { position: relative; display: grid; place-items: center; }
.quote {
  display: none; position: relative; overflow: hidden;
  width: min(760px, 100%); margin: 0;
  padding: 34px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 26px 56px -40px rgba(40, 25, 10, .5);
}
.quote.is-active { display: block; }
.quote__q { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2.2vw, 25px); letter-spacing: -.03em; line-height: 1.4; margin: 20px 0 0; position: relative; }
.quote__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 26px; position: relative; }
.quote__n { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; margin: 0; }
.quote__r { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.quote__nav { display: flex; gap: 8px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.ctaband {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr);
  border-radius: var(--r-lg); overflow: hidden; background: var(--ink); color: #fff;
}
.ctaband__inner { padding: 44px 34px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.ctaband__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 11px; }
.ctaband__photo { position: relative; min-height: 240px; }

/* ============================================================
   ABOUT
   ============================================================ */
.mission { padding: 32px; border-radius: var(--r-lg); background: rgba(242, 89, 12, .07); border: 1px solid rgba(242, 89, 12, .2); }
.mission__head { display: flex; align-items: center; gap: 13px; }
.mission__p { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.4vw, 28px); letter-spacing: -.03em; line-height: 1.35; margin: 18px 0 0; max-width: 52ch; }

.licence { padding: 40px 34px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.licence__head { display: flex; align-items: center; gap: 12px; }
.licence__p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); margin: 18px 0 0; max-width: 76ch; }
.licence__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lic { padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.lic__l { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.lic__n { display: block; font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -.03em; color: var(--accent-l); margin-top: 8px; }
.lic__s { display: block; font-size: 13px; color: rgba(255, 255, 255, .66); margin-top: 6px; line-height: 1.5; }

/* ============================================================
   SERVICES
   ============================================================ */
.order { padding: 30px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.order__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.order__note { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-l); margin: 0; text-align: right; }
.order__strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.ostep {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 14px;
  border-radius: 20px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); text-decoration: none;
  transition: background .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.ostep:hover { background: rgba(242, 89, 12, .18); border-color: rgba(242, 89, 12, .5); transform: translateY(-3px); text-decoration: none; }
.ostep__top { display: flex; align-items: center; justify-content: space-between; }
.ostep__num { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-l); }
.ostep__label { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.02em; color: #fff; line-height: 1.25; }

/* align-items must NOT be `start` here: the media column has to stretch to the
   full row height, otherwise its sticky child has no room to travel. */
.svc { display: grid; grid-template-columns: 70px minmax(0, .86fr) minmax(0, 1.14fr); gap: 26px; align-items: stretch; }
.svc__media { align-self: stretch; }
.svc__rail { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.railitem { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.railitem:hover { text-decoration: none; }
.railitem__num { font-family: var(--mono); font-size: 11px; color: var(--muted); transition: color .25s ease-out; }
.railitem.is-active .railitem__num { color: var(--accent-dd); font-weight: 700; }
.railitem__track { width: 2px; height: 42px; border-radius: 2px; background: rgba(20, 20, 20, .1); overflow: hidden; }
.railitem__fill { display: block; width: 100%; height: 0; background: var(--accent); transition: height .4s ease-out; }
.railitem.is-active .railitem__fill { height: 100%; }

.svc__sticky { position: sticky; top: 110px; }
.svc__frame { position: relative; height: 500px; border-radius: var(--r-lg); overflow: hidden; background: #E9E3DB; }
.svc__shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .5s ease-out, transform .6s ease-out; }
.svc__shot.is-active { opacity: 1; transform: scale(1); }
.svc__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 55%, rgba(20,20,20,.4)); pointer-events: none; }
.svc__kinetic {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  font-family: var(--display); font-weight: 800; font-size: 54px;
  letter-spacing: -.05em; color: rgba(255, 255, 255, .9); pointer-events: none;
  transition: opacity .3s ease-out, transform .4s ease-out;
}
.svc__caption { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.svc__cap-num { font-family: var(--mono); font-size: 12px; color: var(--accent-t); }
.svc__cap-label { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.025em; }

.svc__panels { display: grid; gap: 18px; }
.panel {
  position: relative; overflow: hidden; scroll-margin-top: 110px;
  padding: 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  transition: box-shadow .35s ease-out;
}
.panel:hover { box-shadow: 0 28px 56px -40px rgba(40, 25, 10, .5); }
.panel__head { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.panel__num { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.panel__title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.3vw, 28px); letter-spacing: -.035em; margin: 4px 0 0; line-height: 1.1; }
.panel__body { font-size: 15px; line-height: 1.7; color: var(--body); margin: 18px 0 22px; position: relative; }

.ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; position: relative; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.tick {
  width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; margin-top: 1px;
  background: rgba(242, 89, 12, .12);
  display: inline-flex; align-items: center; justify-content: center;
}
.panel__combos { margin-top: 22px; position: relative; }
.combos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.combo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--shell); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: var(--body); text-decoration: none;
}
.combo:hover { text-decoration: none; color: var(--body); border-color: rgba(242, 89, 12, .4); }
.combo__ico { width: 22px; height: 22px; border-radius: 50%; background: rgba(242, 89, 12, .12); display: inline-flex; align-items: center; justify-content: center; }

.panel__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; position: relative; }
.quotebtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 11px; border-radius: 999px;
  background: #fff; border: 1.5px solid rgba(20, 20, 20, .14);
  font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: background .25s ease-out, color .25s ease-out, border-color .25s ease-out;
}
.quotebtn:hover { text-decoration: none; color: var(--ink); border-color: rgba(242, 89, 12, .45); }
.quotebtn.is-on { background: var(--ink); color: #fff; border-color: transparent; }
.quotebtn.is-on:hover { color: #fff; }
.quotebtn__dot { width: 26px; height: 26px; border-radius: 50%; background: rgba(242, 89, 12, .12); display: inline-flex; align-items: center; justify-content: center; }
.quotebtn.is-on .quotebtn__dot { background: rgba(255, 255, 255, .18); }

/* ============================================================
   PROJECTS
   ============================================================ */
.projhero { position: relative; margin-top: 30px; }
.projhero__photo { border-radius: var(--r-lg); overflow: hidden; }

.film { margin-top: 40px; }
.film__track {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 18px 14px;
  scrollbar-width: thin; cursor: grab; scroll-snap-type: x proximity;
}
.film__track::-webkit-scrollbar { height: 6px; }
.film__track::-webkit-scrollbar-thumb { background: rgba(20, 20, 20, .16); border-radius: 6px; }
.film__item {
  position: relative; flex: 0 0 300px; height: 210px; border-radius: var(--r-md);
  overflow: hidden; text-decoration: none; scroll-snap-align: start;
  transition: transform .35s ease-out;
}
.film__item:hover { transform: translateY(-4px); text-decoration: none; }
.film__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 45%, rgba(20,20,20,.72)); }
.film__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; }
.film__t { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.025em; color: #fff; }
.film__m { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .7); margin-top: 4px; }
.film__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pill {
  padding: 10px 18px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600;
  color: var(--body); text-decoration: none; transition: all .25s ease-out;
}
.pill:hover { text-decoration: none; color: var(--body); border-color: rgba(242, 89, 12, .4); }
.pill.is-active { background: var(--grad); color: #fff; border-color: transparent; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proj {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--ink); border: 1px solid var(--line);
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.proj:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -34px rgba(40, 25, 10, .55); }
.proj__media { position: relative; height: 230px; }
.proj__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 45%, rgba(20,20,20,.55)); }
.proj__body {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; text-decoration: none;
}
.proj__body:hover { text-decoration: none; }
.proj__t { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.025em; color: #fff; }
.proj__m { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); margin-top: 5px; }
.proj__go {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s ease-out, transform .25s ease-out;
}
.proj:hover .proj__go { background: var(--accent); transform: translateX(3px); }

/* ── Project drawer ────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, .55); backdrop-filter: blur(4px); }
.drawer__panel {
  position: relative; width: min(520px, 100%); height: 100%; overflow-y: auto;
  background: var(--shell); padding: 24px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: -30px 0 70px -40px rgba(40, 25, 10, .7);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__media { position: relative; margin-top: 20px; border-radius: var(--r-md); overflow: hidden; }
.drawer__loc {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--body);
}
.drawer__title { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.035em; line-height: 1.1; margin: 22px 0 0; }
.drawer__p { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 16px 0 0; }
.drawer__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.drawer__result { margin-top: 20px; padding: 20px; border-radius: 24px; background: var(--ink); }
.drawer__outcome { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .82); margin: 6px 0 0; }
.drawer__cta { margin-top: 20px; width: 100%; justify-content: center; }

/* ============================================================
   FAQ
   ============================================================ */
.faqs { display: grid; gap: 10px; margin-top: 34px; }
.faq {
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line);
  overflow: hidden; scroll-margin-top: 110px;
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 16.5px;
  letter-spacing: -.02em; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-dd); }
.faq__chev {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(242, 89, 12, .1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease-out, background .3s ease-out;
}
.faq[open] .faq__chev { transform: rotate(180deg); background: var(--grad-d); }
.faq[open] .faq__chev .ico svg { stroke: #fff; }
.faq__a { padding: 0 24px 24px; font-size: 15px; line-height: 1.75; color: var(--body); max-width: 78ch; }

.faqcta {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-top: 40px;
  padding: 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; margin-top: 34px; align-items: start; }

.formcard { position: relative; overflow: hidden; padding: 32px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.form { position: relative; display: grid; gap: 15px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: grid; gap: 7px; }
.field__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; padding: 15px 20px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--shell);
  font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none;
  transition: border-color .25s ease-out, background .25s ease-out;
}
.input:focus { border-color: var(--accent); background: #fff; }
.input--area { border-radius: 26px; resize: vertical; min-height: 130px; line-height: 1.6; }
.input.is-bad { border-color: #C0392B; background: #FDF3F2; }
.select { position: relative; display: block; }
.select select { appearance: none; min-height: 52px; padding-right: 46px; cursor: pointer; }
.select__chev { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.form__submit { margin-top: 4px; }

/* Honeypot — hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 16px 18px; border-radius: 22px; margin-bottom: 18px;
  background: #FDF3F2; border: 1px solid rgba(192, 57, 43, .3); color: #922B21;
  font-size: 14px; line-height: 1.6; position: relative;
}
.alert ul { margin: 8px 0 0; padding-left: 18px; }

.picked { padding: 16px 18px; border-radius: 24px; background: rgba(242, 89, 12, .08); border: 1px solid rgba(242, 89, 12, .22); margin-bottom: 18px; position: relative; }
.picked .chips { margin-top: 10px; }

.sent { position: relative; text-align: center; padding: 20px 0; display: grid; justify-items: center; gap: 6px; }
.sent__tick {
  width: 62px; height: 62px; border-radius: 50%; background: var(--grad-d);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.sent .btn { margin-top: 18px; }

.detailcol { display: grid; gap: 16px; }
.details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: grid; gap: 20px; }
.detail { display: flex; gap: 14px; align-items: flex-start; }
.detail__l { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.detail__v { display: block; font-family: var(--display); font-weight: 700; font-size: 19px; margin-top: 5px; letter-spacing: -.025em; color: var(--ink); text-decoration: none; }
.detail__v:hover { color: var(--accent-dd); }
.detail__v--sm { font-size: 17px; }
.detail__p { display: block; font-size: 15px; line-height: 1.6; color: var(--body); margin-top: 5px; }
.detail__mono { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--body); margin-top: 5px; line-height: 1.7; }

.urgent { position: relative; border-radius: var(--r-lg); background: var(--ink); padding: 26px 28px; overflow: hidden; }
.urgent::before {
  content: ''; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(242,89,12,.5), rgba(242,89,12,0) 70%);
  filter: blur(24px); pointer-events: none;
}
.urgent__head { position: relative; display: flex; align-items: center; gap: 14px; }
.urgent__t { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -.025em; }
.urgent__s { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: 3px; }
.urgent__actions { position: relative; margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.urgent__actions .btn { flex: 1 1 130px; justify-content: center; }

/* ── Map ───────────────────────────────────────────────── */
.map { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.map__frame { height: 480px; }
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__card {
  position: absolute; left: 22px; top: 22px; max-width: 360px; z-index: 2;
  padding: 22px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); box-shadow: 0 22px 46px -30px rgba(40, 25, 10, .6);
}
.map__head { display: flex; align-items: center; gap: 13px; }
.map__t { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.025em; }
.map__s { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.map__p { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 14px 0 16px; }
.map__badge {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--body);
}

/* ── Most requested ────────────────────────────────────── */
.reqcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reqcard {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--ink); text-decoration: none; min-height: 420px;
  display: flex; flex-direction: column;
  transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.reqcard:hover { transform: translateY(-4px); text-decoration: none; box-shadow: 0 28px 54px -34px rgba(40, 25, 10, .55); }
.reqcard__media { position: relative; height: 200px; }
.reqcard__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.1), rgba(20,20,20,.85)); }
.reqcard__body { position: relative; padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; margin-top: -40px; }
.reqcard__t { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.03em; color: #fff; line-height: 1.15; }
.reqcard__p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
.reqcard .btn { margin-top: auto; }

/* ============================================================
   QUOTE TRAY
   ============================================================ */
.tray {
  position: fixed; right: 22px; bottom: 22px; z-index: 65; width: min(330px, calc(100vw - 44px));
  border-radius: var(--r-md); background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line); box-shadow: 0 30px 64px -30px rgba(40, 25, 10, .6);
  padding: 18px;
}
.tray[hidden] { display: none; }
.tray__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tray__clear { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tray__items { display: grid; gap: 7px; margin: 14px 0; max-height: 190px; overflow-y: auto; }
.tray__chip {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 12px;
  border-radius: 16px; background: var(--shell); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--body); line-height: 1.3;
}
.tray__remove { margin-left: auto; display: inline-flex; flex: 0 0 auto; }
.tray__send { width: 100%; justify-content: center; padding: 12px; font-size: 13.5px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative; isolation: isolate; color: #fff;
  padding: 66px 18px 30px; border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: 20px;
  /* Warm near-black rather than flat #141414 — the slight brown bias is the
     same one the body copy uses, so the footer reads as part of the page
     instead of a black box stuck on the end. */
  background:
    linear-gradient(180deg, #1B1715 0%, #151211 42%, #100E0D 100%);
}

/* Blueprint grid — a contractor's own register, kept almost subliminal and
   faded out before it reaches the text. */
.foot::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}

/* Two soft brand glows bleeding in from the corners — this is what stops the
   panel reading as "too black" without lifting it enough to hurt contrast. */
.foot::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(58% 62% at 8% 0%,   rgba(242, 89, 12, .16), transparent 68%),
    radial-gradient(48% 55% at 96% 92%, rgba(242, 89, 12, .10), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(255, 184, 119, .045), transparent 75%),
    /* lit top shoulder — 1px, centre-weighted, so the rounded corner catches
       light the same way the cards above it do */
    linear-gradient(90deg, transparent 6%, rgba(255,184,119,.34) 50%, transparent 94%)
      top / 100% 1px no-repeat;
}

/* Content sits above every decorative layer. */
.foot__grid, .foot__base { position: relative; z-index: 1; }
.foot__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
.foot__logo { display: flex; align-items: center; gap: 12px; }
.foot__mark { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--grad-d); display: flex; align-items: center; justify-content: center; }
.foot__mark .brand__diamond { width: 13px; height: 13px; }
.foot__name { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.foot__blurb { margin: 16px 0 0; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 40ch; }
.foot__lic { margin: 16px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); line-height: 1.9; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 6px; }
.foot__col a { font-size: 14px; color: rgba(255, 255, 255, .78); text-decoration: none; line-height: 1.4; }
.foot__col a:hover { color: var(--accent-l); text-decoration: none; }
.foot__contact a, .foot__addr { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.foot__addr { align-items: flex-start; }
.foot__wa { margin-top: 6px; color: #fff !important; }
.foot__base {
  max-width: 1280px; margin: 38px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .42);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(20px) scale(.975); transition: opacity .7s ease-out, transform .75s ease-out; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-wipe] { clip-path: inset(0 100% 0 0); opacity: .6; transition: clip-path .95s ease-out, opacity .7s ease-out; }
[data-wipe].is-in { clip-path: inset(0 0 0 0); opacity: 1; }

.no-js [data-reveal], .no-js [data-wipe] { opacity: 1; transform: none; clip-path: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

/* The complete desktop navigation needs more horizontal room than the page
   content. Switch to the existing compact menu before the quote button or
   final navigation links can reach the viewport edge. */
@media (max-width: 1100px) {
  .navlist, .megawrap { display: none; }
  .burger { display: flex; }
  .actions { margin-left: auto; }
}

@media (max-width: 1040px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .map__card { max-width: 300px; }
  .reqcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .navlist, .megawrap { display: none; }
  .burger { display: flex; }
  .actions { margin-left: auto; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero__frame { height: 340px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .card:first-child { grid-row: auto; }
  .bento > .card:first-child .card__media { height: 260px; }
  .whygrid, .process__grid, .licence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctaband { grid-template-columns: minmax(0, 1fr); }

  .svc { grid-template-columns: 58px minmax(0, 1fr); }
  .svc__media { grid-column: 2; }
  .svc__panels { grid-column: 2; }
  .svc__rail { grid-column: 1; grid-row: 1 / span 2; }
  .svc__sticky { position: static; }
  .svc__frame { height: 300px; }
  .order__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .ctaband__inner { padding: 32px 22px; }
  .map__frame { height: 400px; }
  .map__card { position: static; max-width: none; margin: 14px 0 0; border-radius: var(--r-md); }
  .map__badge { display: none; }
}

@media (max-width: 760px) {
  .page { padding: 8px; }
  .wrap { padding-top: 52px; }
  .brand__lic { display: none; }
  .brand__text { max-width: 150px; }
  .nav__cta { display: none; }
  .trust__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqcards { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: 1fr; }
  .order__note { text-align: left; }
  .drawer__panel { border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; margin-top: 40px; }
}

@media (max-width: 700px) {
  .bento, .grid, .whygrid, .process__grid, .licence__grid { grid-template-columns: minmax(0, 1fr); }
  .bento > .card:first-child { grid-column: auto; }
  .order__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__rail { display: none; }
  .svc__media, .svc__panels { grid-column: 1; }
  .brand__text { max-width: 108px; }
}

@media (max-width: 430px) {
  .trust__stats, .drawer__stats { grid-template-columns: minmax(0, 1fr); }
  .hero__title { font-size: 34px; }
  .film__item { flex-basis: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], [data-wipe] { opacity: 1; transform: none; clip-path: none; }
}

/* ── FAQ banner ─────────────────────────────────────────── */
.faqbanner {
  position: relative; margin-top: 30px; height: 260px;
  border-radius: var(--r-lg); overflow: hidden;
}
.faqbanner__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.82), rgba(20,20,20,.35) 65%, rgba(20,20,20,.15));
}
.faqbanner__text {
  position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 2;
  display: grid; gap: 10px;
}
.faqbanner__t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 27px); letter-spacing: -.03em;
  line-height: 1.2; color: #fff; margin: 0; max-width: 26ch;
}

@media (max-width: 760px) {
  .faqbanner { height: 220px; }
  .faqbanner__text { left: 20px; right: 20px; bottom: 20px; }
}

/* ── Two named contacts ─────────────────────────────────── */
.detail__person { display: block; margin-top: 8px; }
.detail__person:first-of-type { margin-top: 5px; }
.detail__name {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.detail__person .detail__v { margin-top: 0; }

/* .btn is width:max-content by default, which would stop these flexing. */
.urgent__actions .btn { width: auto; }
.urgent__call { flex: 1 1 calc(50% - 5px); justify-content: flex-start; gap: 10px; text-align: left; padding: 11px 14px; }
.urgent__who  { display: flex; flex-direction: column; line-height: 1.2; font-size: 13.5px; }
.urgent__num  { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); font-weight: 400; margin-top: 3px; white-space: nowrap; }
.urgent__wa   { flex: 1 1 100%; justify-content: center; }

.foot__who {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin-top: 2px;
}
.foot__contact a { align-items: flex-start; }

.mobile__actions .btn { width: auto; }
.mobile__call { justify-content: flex-start; gap: 10px; text-align: left; }
.mobile__call > span { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; }
.mobile__num { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; white-space: nowrap; color: var(--muted); font-weight: 400; margin-top: 2px; }
.mobile__actions { flex-wrap: wrap; }
.mobile__actions .mobile__call { flex: 1 1 100%; }

/* ============================================================
   LEADERSHIP CARDS — About page
   ============================================================ */
/* Held to a narrow measure on purpose: at full page width each card was
   ~610px, which upscaled both portraits and softened them. At ~370px the
   source files (800px and 1000px wide) still cover a 2x screen sharply. */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 760px;
  margin-inline: auto;
}

.member {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 5;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease-out;
}
.member:hover,
.member:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 40px 70px -40px rgba(40, 25, 10, .7);
}

/* The photo itself, and the slow push-in on hover. */
.member__media { position: absolute; inset: 0; overflow: hidden; }
.member__media .photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Framed on the face rather than the middle of the frame. */
  object-position: center 22%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.member:hover .photo img,
.member:focus-within .photo img { transform: scale(1.06); }

/* Readability wash. It deepens on hover so the revealed contact row reads. */
/* Kept low and tight so it darkens only the caption strip. A wash that
   starts too high greys out a white studio background and flattens faces. */
.member__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(18,16,15,0)    52%,
              rgba(18,16,15,.28)  68%,
              rgba(18,16,15,.72)  84%,
              rgba(18,16,15,.94) 100%);
  transition: background .5s ease-out;
}
/* On hover the caption grows, so the gradient reaches a little higher. */
.member:hover .member__veil,
.member:focus-within .member__veil {
  background: linear-gradient(180deg,
              rgba(18,16,15,0)    34%,
              rgba(18,16,15,.34)  54%,
              rgba(18,16,15,.80)  74%,
              rgba(18,16,15,.96) 100%);
}

.member__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 20px 18px;
}
.member__role {
  display: inline-block; margin: 0 0 10px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(242, 89, 12, .92);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff;
}
.member__name {
  margin: 0; color: #fff;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 2vw, 24px); letter-spacing: -.035em; line-height: 1.15;
}

/* Collapsed by default, slides open on hover / keyboard focus. */
.member__reveal {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease-out;
}
.member__reveal > .member__revealinner { overflow: hidden; min-height: 0; }
.member:hover .member__reveal,
.member:focus-within .member__reveal { grid-template-rows: 1fr; opacity: 1; }

.member__tel {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: #fff; white-space: nowrap;
}
.member__tel:hover { color: var(--accent-l); text-decoration: none; }
.member__telico {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: inline-flex; align-items: center; justify-content: center;
}

.member__actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.member__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: transform .25s ease-out, background .25s ease-out;
}
.member__btn:hover { transform: translateY(-1px); text-decoration: none; }
.member__btn--call { background: #fff; color: var(--ink); }
.member__btn--call:hover { color: var(--ink); background: var(--accent-ll); }
.member__btn--wa   { background: var(--grad); color: #fff; }
.member__btn--wa:hover { color: #fff; }

/* Until the real portraits are dropped in, keep the placeholder legible. */
.member--nophoto .member__veil { background: linear-gradient(180deg, rgba(20,20,20,0) 40%, rgba(20,20,20,.9)); }
.member--nophoto .photo--empty { height: 100%; }

@media (max-width: 760px) {
  .team { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 420px; }
  .member { aspect-ratio: 3 / 4; }
  .member__body { padding: 20px 18px 18px; }
  /* No hover on touch — show the contact details permanently. */
  .member__reveal { grid-template-rows: 1fr; opacity: 1; }
}

/* Pointer-less devices (touch) always show the details, at any width. */
@media (hover: none) {
  .member__reveal { grid-template-rows: 1fr; opacity: 1; }
}

/* ── Office location (Contact page) ─────────────────────── */
.office {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 16px; align-items: stretch;
}
.office__map { border-radius: var(--r-lg); overflow: hidden; min-height: 400px; background: #E9E3DB; }
.office__map iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

.office__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.office__t { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.03em; margin: 4px 0 0; }
.office__addr { font-style: normal; font-size: 15px; line-height: 1.75; color: var(--body); }
.office__hours {
  display: flex; align-items: center; gap: 9px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--line);
  width: 100%; font-size: 14px; color: var(--body);
}

/* Licence detail list (About page) */
.licmeta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px; margin: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px;
}
.licmeta > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.licmeta dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); flex: 0 0 auto;
}
.licmeta dd { margin: 0; font-size: 13.5px; color: #fff; text-align: right; }

@media (max-width: 880px) {
  .office { grid-template-columns: minmax(0, 1fr); }
  .office__map, .office__map iframe { min-height: 320px; }
  .licmeta { grid-template-columns: minmax(0, 1fr); }
}

/* Registered-address row spans both columns — it is a long line. */
.licmeta__wide { grid-column: 1 / -1; }
.licmeta__wide dd { text-align: right; max-width: 62ch; }
@media (max-width: 880px) { .licmeta__wide dd { text-align: left; } }

/* ============================================================
   ACCESSIBILITY REMEDIATION
   ============================================================ */

/* --- Tap targets: WCAG 2.5.5 wants 44x44 CSS px. Padding is used rather
   than min-height so the visual design does not change; the hit area grows
   into whitespace that was already there. --------------------------------- */
.foot__col a,
.foot__contact a,
.foot__addr {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.foot__col { gap: 2px; }                 /* padding replaces the old gap */

.hero__bar { padding: 21px 0; }          /* 3px track + 2x20 padding = 43-44px hit area */
.card__title a { display: inline-block; padding: 11px 0; }   /* was a 24px-tall link */

.member__tel  { min-height: 44px; }
.member__btn  { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
.detail__v    { min-height: 44px; display: inline-flex; align-items: center; }
.card__open   { width: 44px; height: 44px; }
.combo        { min-height: 44px; }
.pill         { min-height: 44px; display: inline-flex; align-items: center; }
.urgent__call, .urgent__wa { min-height: 44px; }
.mobile__trade { min-height: 44px; }
.tray__remove { min-width: 44px; min-height: 44px; justify-content: center; }
.faq__q       { min-height: 44px; }

/* --- Minimum readable text size. Nothing below 11px, and the mono labels
   get letter-spacing kept so they still read as labels. ------------------- */
.brand__lic   { font-size: 11px; }
.eyebrow      { font-size: 11px; }
.mobile__num,
.mobile__lic  { font-size: 11px; }
.trust__est, .quote__r, .tray__clear, .step__top,
.member__role, .order__note, .field__l, .detail__name, .urgent__num,
.card__num, .panel__num, .ostep__num,
.floatcard__s, .hero__badge-sub, .member__tel,
.detail__l, .foot__head, .foot__who, .lic__l,
.map__s, .urgent__s, .film__m, .proj__m,
.stat__l, .licmeta dt, .photo__slot { font-size: 11px; }
.foot__base   { font-size: 11.5px; }
.foot__lic    { font-size: 11.5px; }

/* Footer base text was rgba(255,255,255,.42) = 3.77:1. Lifted to clear AA. */
.foot__base { color: rgba(255, 255, 255, 0.66); }
.foot__who  { color: rgba(255, 255, 255, 0.62); }

/* --- Quote tray: it is fixed and covered the footer contact links on
   mobile. It can now be collapsed to a small pill. ------------------------ */
.tray__toggle {
  position: absolute; top: 6px; right: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; z-index: 2;
}
.tray__toggle:hover { background: rgba(242, 89, 12, .08); }
.tray__head { padding-right: 52px; }
.tray.is-collapsed .tray__items,
.tray.is-collapsed .tray__send,
.tray.is-collapsed .tray__clear { display: none; }
.tray.is-collapsed { width: auto; padding: 12px 16px; }
.tray.is-collapsed .tray__head { padding-right: 44px; }
.tray__toggle .ico { transition: transform .3s ease-out; }
.tray.is-collapsed .tray__toggle .ico { transform: rotate(180deg); }

/* --- Landscape phones: the sticky nav ate 26% of a 360px-tall viewport. --- */
@media (max-height: 480px) and (orientation: landscape) {
  .nav { padding: 8px 14px; }
  .nav.is-stuck { padding: 6px 14px; }
  .brand { padding: 3px 6px; }
  .brand__full img,
  .nav.is-stuck .brand__full img { height: 40px; }
  .brand__logo { width: 34px; height: 34px; }
  .iconbtn, .burger { width: 38px; height: 38px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .nav, .mobile, .tray, .foot__wa, .hero__ctrl, .film,
  .map, .office__map, .skip, .btn, .member__reveal { display: none !important; }
  .page { padding: 0; }
  .shell { box-shadow: none; border-radius: 0; background: #fff; }
  body { background: #fff; color: #000; }
  .foot { background: #fff; color: #000; border-radius: 0; }
  .foot__col a, .foot__contact a, .foot__blurb, .foot__lic, .foot__base { color: #000; }
  .trust, .licence, .order, .ctaband, .urgent, .drawer__result { background: #fff; color: #000; border: 1px solid #999; }
  .h2--light, .h3--light, .trust__lede, .licence__p, .lic__n, .lic__s, .licmeta dd { color: #000 !important; }
  [data-reveal], [data-wipe] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .photo img { max-height: 220px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; word-break: break-all; }
  .wrap { padding: 12px 0 !important; }
}

/* ── 404 page ───────────────────────────────────────────── */
.notfound { padding: 20px 0 40px; }
.notfound__links {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0;
}
.notfound__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 18px 8px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2);
  font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.notfound__link:hover { color: var(--ink); border-color: rgba(242,89,12,.45); text-decoration: none; }
.notfound__actions { margin-top: 28px; }

/* ── Agency credit in the footer bar ────────────────────── */
.foot__credit { display: inline-flex; align-items: center; gap: 5px; margin: -14px 0; }
.foot__agency {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-l);
  /* Padding gives the 44px tap target without moving the baseline. */
  padding: 14px 2px 13px;
  transition: color .25s ease-out, border-color .25s ease-out;
}
.foot__agency:hover { color: var(--accent-l); border-color: var(--accent-l); text-decoration: none; }

/* Three items now share the bar — let them centre neatly once they wrap. */
@media (max-width: 900px) {
  .foot__base { justify-content: center; text-align: center; row-gap: 8px; }
}

/* The quote tray is position:fixed bottom-right and was landing on top of the
   credit link at the very end of the page. Reserve clearance beneath the
   footer bar so nothing in the footer can ever sit under it. */
.foot { padding-bottom: 96px; }
@media (max-width: 900px) { .foot { padding-bottom: 120px; } }

/* ============================================================
   SUCCESS CONFIRMATION
   Rendered inline by PHP (so it works without JavaScript), then
   promoted into a modal by site.js when JS is available.
   ============================================================ */

/* ── The panel itself ───────────────────────────────────── */
.sent { position: relative; text-align: center; padding: 24px 0; display: grid; justify-items: center; gap: 4px; }
.sent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.sent__urgent { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 6px 0 0; }
.sent__eyebrow { margin: 2px 0 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--accent-dd); }
.sent__message { max-width: 42ch; margin: 8px 0 0; }
.sent__route {
  display: grid; grid-template-columns: auto 28px auto 28px auto; align-items: center;
  width: 100%; margin: 20px 0 2px; color: var(--body); font-size: 11px; font-weight: 700;
}
.sent__route span { display: grid; justify-items: center; gap: 6px; }
.sent__route b {
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--grad-d); font-family: var(--mono); font-size: 11px;
}
.sent__route i { height: 1px; background: linear-gradient(90deg, rgba(242,89,12,.2), rgba(242,89,12,.65)); }
.sent__spark { position: absolute; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); opacity: .7; animation: sparkIn .55s cubic-bezier(.22,1.4,.36,1) .35s both; }
.sent__spark--one { top: 42px; left: 15%; }
.sent__spark--two { top: 84px; right: 12%; width: 5px; height: 5px; animation-delay: .5s; }
.sent__spark--three { top: 24px; right: 23%; width: 4px; height: 4px; background: #FFB877; animation-delay: .65s; }
@keyframes sparkIn { from { opacity: 0; transform: rotate(0) scale(0); } to { opacity: .7; transform: rotate(45deg) scale(1); } }

.sent__ref {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 18px 0 0; padding: 12px 26px;
  border-radius: 18px; background: rgba(242, 89, 12, .08);
  border: 1px dashed rgba(242, 89, 12, .38);
}
.sent__ref-l { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent-dd); }
.sent__ref-n { font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }

/* ── Animated tick ──────────────────────────────────────── */
.sent__tick {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--grad-d);
  display: grid; place-items: center; margin-bottom: 12px;
}
.sent__tick-ring { stroke: rgba(255, 255, 255, .45); }
.sent__tick-mark { stroke: #fff; }

/* Draw the ring, then the tick. */
.sent__tick-ring { stroke-dasharray: 145; stroke-dashoffset: 145; animation: tickRing .55s ease-out .05s forwards; }
.sent__tick-mark { stroke-dasharray: 40;  stroke-dashoffset: 40;  animation: tickMark .35s ease-out .5s forwards; }
@keyframes tickRing { to { stroke-dashoffset: 0; } }
@keyframes tickMark { to { stroke-dashoffset: 0; } }

/* ── Modal presentation (added by JS) ───────────────────── */
.successveil {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(18, 16, 15, .62);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: veilIn .35s ease-out both;
  overflow-y: auto;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }

.successveil .sent {
  background: var(--shell);
  border-radius: var(--r-lg);
  padding: 40px 34px 34px;
  width: min(500px, 100%);
  box-shadow: 0 50px 90px -40px rgba(20, 12, 6, .75);
  animation: cardIn .5s cubic-bezier(.22, 1.2, .36, 1) both;
  /* A soft glow behind the tick, echoing the brand orange. */
  background-image: radial-gradient(120% 90% at 50% -10%, rgba(242, 89, 12, .14), transparent 62%);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.successveil__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.successveil__close:hover { background: rgba(242, 89, 12, .1); border-color: rgba(242, 89, 12, .4); }

body.has-successveil { overflow: hidden; }

@media (max-width: 560px) {
  .successveil { padding: 14px; align-items: start; padding-top: 40px; }
  .successveil .sent { padding: 34px 22px 26px; }
  .sent__actions .btn { flex: 1 1 100%; justify-content: center; }
  .sent__route { grid-template-columns: 1fr; gap: 7px; }
  .sent__route i { width: 1px; height: 12px; justify-self: center; background: rgba(242,89,12,.35); }
}

@media (prefers-reduced-motion: reduce) {
  .successveil, .successveil .sent { animation: none; }
  .sent__tick-ring, .sent__tick-mark { animation: none; stroke-dashoffset: 0; }
  .sent__spark { animation: none; }
}

/* ── Social profile icons ───────────────────────────────── */
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background .25s ease-out, border-color .25s ease-out,
              color .25s ease-out, transform .25s ease-out;
}
.social:hover { transform: translateY(-2px); text-decoration: none; }

/* On the dark footer */
.socials--dark .social {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
}
.socials--dark .social:hover {
  background: var(--grad-d);
  border-color: transparent;
  color: #fff;
}

/* On the light contact card */
.socials--light .social {
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--accent-t);
}
.socials--light .social:hover {
  background: var(--grad-d);
  border-color: transparent;
  color: #fff;
}

.foot__social { margin-top: 18px; }
.foot__social .foot__head { margin-bottom: 10px; }
.socials--light { margin-top: 8px; }

/* ── Named sub-services under each trade ────────────────── */
.subs { margin-top: 24px; position: relative; }
.subs__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 12px;
}
.sub {
  padding: 16px 18px; border-radius: 20px;
  background: var(--shell); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  scroll-margin-top: 110px;
  transition: border-color .25s ease-out, transform .25s ease-out;
}
.sub:hover { border-color: rgba(242, 89, 12, .38); transform: translateY(-2px); }
.sub__name {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--ink);
}
.sub__desc { font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0; }
.sub__cta {
  margin-top: auto; padding-top: 6px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-t); text-decoration: none;
}
.sub__cta:hover { color: var(--accent-dd); text-decoration: none; }
.sub__cta .ico { transition: transform .25s ease-out; }
.sub:hover .sub__cta .ico { transform: translateX(3px); }

@media (max-width: 620px) { .subs__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Vision + Mission pair ──────────────────────────────── */
.visionmission { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mission--vision { background: var(--ink); border-color: rgba(255, 255, 255, .1); }
.mission--vision .eyebrow--accent { color: var(--accent-l); }
.mission--vision .mission__p { color: #fff; }
@media (max-width: 880px) { .visionmission { grid-template-columns: minmax(0, 1fr); } }

/* ── Featured trade spotlight ───────────────────────────── */
.spotlight {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 26px; align-items: center;
}
.spotlight__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: #E9E3DB;
}
.spotlight__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,.28) 0%, rgba(20,20,20,0) 42%);
}
.spotlight__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(18, 16, 15, .72);
  backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #fff;
}
.spotlight__list {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
}
.spotlight__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.spotlight__list a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 10px; flex: 0 0 auto;
}
.spotlight__list a:hover { color: var(--accent-dd); text-decoration: none; }
.spotlight .sechead__actions { margin-top: 24px; }
@media (max-width: 960px) {
  .spotlight { grid-template-columns: minmax(0, 1fr); }
  .spotlight__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Emergency band ─────────────────────────────────────── */
.emergency {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--ink); color: #fff;
  padding: 34px;
}
.emergency::before {
  content: ''; position: absolute; top: -90px; right: -70px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,89,12,.5), rgba(242,89,12,0) 70%);
  filter: blur(30px); pointer-events: none;
}
.emergency__head { position: relative; display: flex; align-items: center; gap: 16px; }
.emergency__p {
  position: relative; font-size: 15.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .78); margin: 18px 0 0; max-width: 66ch;
}
.emergency__actions {
  position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
.emergency__actions .btn { width: auto; }
.emergency__call { justify-content: flex-start; gap: 10px; text-align: left; }
.emergency__who { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; }
.emergency__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); font-weight: 400; margin-top: 3px; white-space: nowrap;
}
@media (max-width: 620px) {
  .emergency { padding: 26px 20px; }
  .emergency__actions .btn { flex: 1 1 100%; justify-content: center; }
  .emergency__call { justify-content: center; }
}

/* Home-page FAQ list sits inside the normal page width */
.faqs--home { margin-top: 0; }

/* ============================================================
   BRAND LOGO
   Supplied as a 3.13:1 horizontal lockup on a transparent
   background. Three placements: full lockup in the header on
   wider screens, mark only on phones (the two lines of type
   inside the lockup are unreadable below ~200px wide), and a
   light recolour in the dark footer.
   ============================================================ */
.brand__full,
.brand__markonly { display: block; }
.brand__full img,
.brand__markonly img { display: block; width: auto; }

/* Header, full lockup. Sits directly on the page — no capsule behind it —
   so it can run taller than it did inside one. 68px -> ~212px wide. */
.brand__full img { height: 68px; transition: height .4s ease-out; }
.nav.is-stuck .brand__full img { height: 58px; }

/* Header, mark only (phones). */
.brand__markonly { display: none; }
.brand__markonly img { height: 46px; }

/* Footer lockup */
.foot__logo { display: block; }
.foot__logo img { display: block; width: 100%; max-width: 300px; height: auto; }

/* Scroll progress moved off the old circular mark onto a hairline
   across the bottom edge of the sticky bar. */
.nav__progress {
  position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px;
  border-radius: 2px; pointer-events: none; opacity: 0;
  transition: opacity .4s ease-out;
}
.nav.is-stuck .nav__progress { opacity: 1; }

/* Tablet and phone. The nav links collapse into the burger at 1100px,
   which frees the whole middle of the bar — so the full lockup stays,
   just smaller. At 900px wide the source file is still oversampled
   ~6x for a 150px slot, so the second line holds up on retina phones. */
@media (max-width: 900px) {
  .brand { padding: 4px 6px; }
  .brand__full img,
  .nav.is-stuck .brand__full img { height: 56px; }
}
@media (max-width: 480px) {
  .brand { padding: 4px 4px; }
  .brand__full img,
  .nav.is-stuck .brand__full img { height: 48px; }
}
/* Small phones. 42px tall -> ~131px wide, which still clears the phone
   and burger buttons by ~22px at 320px, so the name survives here too. */
@media (max-width: 359px) {
  .brand { padding: 4px 2px; }
  .brand__full img,
  .nav.is-stuck .brand__full img { height: 42px; }
}
/* Only the very narrowest devices (folded handsets, ~280px) actually run
   out of room — there the mark stands in for the lockup. */
@media (max-width: 299px) {
  .brand__full { display: none; }
  .brand__markonly { display: block; }
  .brand { padding: 4px; }            /* keeps the link a 44px tap target */
  .brand__markonly img { height: 42px; }
}
@media (max-width: 760px) {
  .foot__logo img { max-width: 260px; }
}

/* ============================================================
   ON-SITE FIGURE
   The sticky frame on Services sells the finished result. This
   pairs it with a photograph of the work itself, inside the
   panel, so each trade shows both the outcome and the process.
   ============================================================ */
.onsite {
  position: relative;                 /* contains .photo, which can go absolute */
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper, #fff);
}
.onsite__photo {
  height: 210px;
  border-radius: 0;
}
.onsite__cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px 13px;
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  border-top: 1px solid var(--line);
}
.onsite__tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dd);
  padding: 3px 7px; border: 1px solid rgba(242, 89, 12, .3); border-radius: 3px;
  flex: 0 0 auto;
}
@media (max-width: 620px) {
  .onsite__photo { height: 170px; }
  .onsite__cap { font-size: 12.5px; padding: 10px 12px 12px; }
}

/* ============================================================
   BEFORE / AFTER
   Two photographs of the same room stacked in one frame. The
   "after" sits underneath; the "before" is clipped over it and
   the clip width is driven by a range input, so the whole thing
   works with a keyboard and still reads without JavaScript.
   ============================================================ */
.bagrid { display: grid; gap: 26px; margin-top: 34px; }
@media (min-width: 900px) { .bagrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ba {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}

.ba__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--shell);
  touch-action: pan-y;                  /* let the page scroll vertically */
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--before {
  /* Overridden inline by JS; this is the no-JS resting state. */
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.ba__photo { position: absolute; inset: 0; border-radius: 0; }
.ba__photo img { user-select: none; -webkit-user-drag: none; }

.ba__tag {
  position: absolute; top: 12px; z-index: 3;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px;
  background: rgba(20, 20, 20, .72); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ba__tag--before { left: 12px; }
.ba__tag--after  { right: 12px; background: rgba(203, 74, 5, .88); }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
  width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,20,20,.18);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 18px -6px rgba(40, 25, 10, .5);
  display: flex; align-items: center; justify-content: center;
}

/* The range input IS the control — full-bleed and invisible over the stage,
   so dragging anywhere on the photo works and the thumb stays focusable. */
.ba__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 44px; cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: ew-resize;
}
.ba__range:focus-visible { outline: none; }
.ba__range:focus-visible ~ .ba__handle .ba__grip {
  box-shadow: 0 0 0 3px var(--accent), 0 6px 18px -6px rgba(40, 25, 10, .5);
}
.ba__srlabel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ba__body { padding: 18px 20px 22px; }
.ba__trade {
  margin: 0 0 6px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.ba__title {
  margin: 0 0 8px; font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: -.02em; line-height: 1.25;
}
.ba__blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ba__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ba__steps li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; color: var(--ink);
}
.ba__stepn {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

@media (max-width: 620px) {
  .ba__body { padding: 16px 16px 20px; }
  .ba__title { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba__layer--before { will-change: auto; }
}

/* ============================================================
   PHOTOGRAPHIC SECTION BACKGROUNDS
   Mission, vision and the licence panel each sit on a photograph
   behind a scrim. The scrim — not the photograph — is what holds
   the white text at AA contrast, so it is opaque enough to work
   no matter what the image underneath is doing.
   ============================================================ */
.mission--photo,
.licence--photo { position: relative; isolation: isolate; overflow: hidden; }

.mission__bg,
.licence__bg { position: absolute; inset: 0; z-index: 0; }
.mission__bg .photo,
.licence__bg .photo { border-radius: 0; }
.mission__bg img,
.licence__bg img { width: 100%; height: 100%; object-fit: cover; }

.mission__scrim,
.licence__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.mission__inner,
.licence__inner { position: relative; z-index: 2; }

/* ── Mission / vision cards ─────────────────────────────── */
.mission--photo {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--ink);            /* shows through if the photo fails */
}
.mission--photo .mission__scrim {
  background:
    linear-gradient(180deg, rgba(14, 12, 10, .58) 0%, rgba(14, 12, 10, .82) 62%, rgba(14, 12, 10, .93) 100%);
}
.mission--photo .mission__p { color: #fff; }
.mission--photo .eyebrow--accent { color: var(--accent-l); }
.mission--photo .mission__inner { padding: 30px 28px 32px; }

/* ── Licence panel ──────────────────────────────────────── */
.licence--photo {
  padding: 0;                        /* the inner wrapper owns the padding now */
  border: 1px solid rgba(255, 255, 255, .1);
}
/* The photograph is a texture, not a subject — a light blur stops the
   facade's verticals competing with the licence numbers sitting on it. */
.licence--photo .licence__bg img { filter: blur(2px) saturate(.85); transform: scale(1.04); }
.licence--photo .licence__scrim {
  background:
    linear-gradient(120deg, rgba(12, 11, 10, .96) 0%, rgba(12, 11, 10, .93) 52%, rgba(12, 11, 10, .88) 100%);
}
.licence--photo .licence__inner { padding: 40px 34px; }

/* Home page keeps the headline credentials and links out for the rest. */
.licence__more {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px;
  padding: 12px 14px 12px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px;
  transition: background .25s ease-out, border-color .25s ease-out;
}
.licence__more:hover {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34);
  color: #fff; text-decoration: none;
}
.licence__more .btn__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
}

@media (max-width: 760px) {
  .mission--photo .mission__inner { padding: 24px 20px 26px; }
  .licence--photo .licence__inner { padding: 30px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .licence__more { transition: none; }
}

/* ============================================================
   MOBILE OVERFLOW FIXES
   Two root causes ran through most of these:
   1. Grid and flex items default to min-width:auto, so they
      refuse to shrink below their content's min-content width.
   2. .btn is width:max-content, so a button never shrinks
      below its label no matter what flex-basis says.
   The long email address (389px as one unbreakable token) was
   pinning the whole contact column to 509px inside a 390px
   viewport, which then dragged the urgent panel off-screen
   with it.
   ============================================================ */

/* ── Contact details + urgent panel ─────────────────────── */
.contact > *,
.detailcol, .details, .detail, .urgent { min-width: 0; }
.detail > div { min-width: 0; }
.detail__v, .detail__p, .detail__mono, .detail__l { min-width: 0; overflow-wrap: anywhere; }
.urgent__head > div, .urgent__t, .urgent__s { min-width: 0; overflow-wrap: anywhere; }

/* Buttons must be allowed to shrink before they can wrap. */
.urgent__actions .btn,
.emergency__actions .btn,
.sechead__actions .btn { min-width: 0; }
.urgent__who, .emergency__who { min-width: 0; }

@media (max-width: 620px) {
  /* One call button per row — two side by side cannot hold a name
     and a phone number at this width without clipping. */
  .urgent__actions .btn,
  .urgent__call { flex: 1 1 100%; justify-content: center; }
  .urgent__who, .emergency__who { align-items: center; }
  .urgent { padding: 22px 18px; }
  .details { padding: 24px 20px; }
  /* The email is the longest token on the site; give it room by
     dropping a step rather than breaking it mid-address. */
  .detail__v { font-size: 17px; }
  .detail__v--sm { font-size: 14.5px; letter-spacing: -.01em; }
}

/* ── Odds and ends the same two causes produced elsewhere ─ */
.split, .split__media, .split > * { min-width: 0; }
.faq__a, .faqcta, .faqcta > * { min-width: 0; overflow-wrap: anywhere; }
.ctaband, .ctaband__inner, .ctaband__inner > * { min-width: 0; }
.ctaband__meta { min-width: 0; overflow-wrap: anywhere; }
.foot__grid > *, .foot__col, .foot__brand { min-width: 0; }
.foot__col a, .foot__addr, .foot__blurb, .foot__lic { overflow-wrap: anywhere; }
.licmeta, .licmeta > div, .licmeta dd { min-width: 0; overflow-wrap: anywhere; }
.licence, .licence__inner, .licence__grid, .lic { min-width: 0; }

/* Long action rows wrap instead of pushing past the viewport. */
@media (max-width: 480px) {
  .sechead__actions { flex-wrap: wrap; }
  .sechead__actions .btn { flex: 1 1 100%; justify-content: center; }
}