/* =========================================================================
   Trinity Spaces
   Palette is taken straight off the logo: navy #0C2F4B ink, green #129F6A
   accent, warmed with a sand/cream neutral that sits well under the timber
   and granite tones in the project photography.
   ========================================================================= */

:root {
  --navy:        #0C2F4B;
  --navy-900:    #071E31;
  --navy-800:    #0A2740;
  --navy-600:    #16496F;
  --navy-400:    #4C7392;

  --green:       #129F6A;
  --green-700:   #0D7D53;
  --green-300:   #6CC9A4;
  --green-50:    #E7F5EF;

  --cream:       #FBF9F6;
  --sand:        #F4EFE8;
  --sand-deep:   #EBE3D8;
  --line:        #E3DCD1;
  --line-soft:   #EFEAE2;

  --ink:         #17222B;
  --muted:       #5E6E7B;
  --muted-light: #9AA7B1;
  --white:       #FFFFFF;

  --serif: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(12, 47, 75, .06), 0 4px 14px rgba(12, 47, 75, .05);
  --shadow:    0 10px 30px rgba(12, 47, 75, .10);
  --shadow-lg: 0 24px 60px rgba(12, 47, 75, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- web fonts, self-hosted ----------
   Served from this domain rather than fonts.googleapis.com. Going through
   Google cost two extra DNS + TLS handshakes before the font request could
   even start, so on a phone the files landed around 3s and the hero heading
   re-wrapped underneath the visitor — 0.12 CLS on the home page, the last of
   the judder the client reported. Self-hosted and preloaded they arrive with
   the CSS instead.

   Both are variable fonts, so one file per subset covers every weight the
   site uses. Fraunces and Plus Jakarta Sans are both SIL Open Font License,
   which permits redistribution like this. The unicode-range values are copied
   verbatim from Google's own stylesheet so latin-ext is still only fetched by
   visitors who actually need those glyphs. Re-download with
   bin/fetch-fonts.sh if the families are ever changed. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- metric-matched font fallbacks ----------
   Fraunces and Plus Jakarta Sans load from Google with display=swap, so the
   first paint uses a system font and the page re-flows when the real files
   land — on the home page that re-wrapped the hero heading and shunted
   everything under it down, which is the judder you see on a phone on a slow
   connection. These two faces are the system fallbacks scaled (measured, not
   guessed) to the same advance widths, so the swap is now a change of shape
   rather than a change of layout.

   The two percentages are measured advance-width ratios against the named
   families, which within each face are metric-compatible with one another.
   Only size-adjust is set: every line-height on this site is declared in CSS,
   so the font's own ascent/descent do not move anything and overriding them
   would only risk shifting baselines. Where none of the local families exist
   (most Android builds) the face simply does not resolve and the stack falls
   through as before — no worse than it was, just not improved. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos");
  size-adjust: 95.4%;   /* Fraunces 500 vs Times metrics */
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 104.5%;  /* Plus Jakarta Sans 400 vs Arial metrics */
}

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

/* The design is light-only. Declaring it stops Android Chrome and Samsung
   Internet from auto-darkening the page in system dark mode, which was turning
   the header near-black and hiding the navy half of the logo. */
:root { color-scheme: light; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  background: var(--cream);
  /* Safety net against sideways drag on phones. `clip` is deliberate: unlike
     `hidden` it does NOT turn the viewport into a scroll container, so the
     sticky header and anchor scrolling keep working. Anything that still pokes
     past the right edge is a bug to fix at source, not to rely on this for. */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  width: 100%;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-700); }
ul { margin: 0; padding: 0; }
figure { margin: 0; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h1 { font-size: clamp(2.3rem, 1.35rem + 3.9vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.5vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.02rem + .7vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--green); color: #fff; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- layout primitives ---------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.section { padding-block: clamp(3.6rem, 2rem + 6.4vw, 6.75rem); }
.section--tight { padding-block: clamp(2.6rem, 1.6rem + 4vw, 4.5rem); }
.section--sand { background: var(--sand); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: #D9E3EB; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 .95rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--green); flex: none;
}
.eyebrow--light { color: var(--green-300); }
.eyebrow--center { justify-content: center; }

.lede { font-size: clamp(1.03rem, .98rem + .3vw, 1.17rem); color: var(--muted); max-width: 62ch; }
.section--navy .lede { color: #B9C8D4; }

.head { max-width: 46rem; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.5rem;
  font: 600 .935rem/1.2 var(--sans);
  letter-spacing: .005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--primary  { --btn-bg: var(--navy); --btn-bd: var(--navy); }
.btn--primary:hover { --btn-bg: var(--navy-600); --btn-bd: var(--navy-600); }
.btn--accent   { --btn-bg: var(--green); --btn-bd: var(--green); }
.btn--accent:hover { --btn-bg: var(--green-700); --btn-bd: var(--green-700); }
.btn--outline  { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--navy); }
.btn--outline:hover { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--ghost    { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .93rem; text-decoration: none;
  color: var(--navy);
}
.link-arrow::after {
  content: "→"; transition: transform .2s var(--ease); font-size: 1.05em;
}
.link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================================
   Header
   ========================================================================= */
.topbar {
  background: var(--navy-900);
  color: #A9BCCB;
  font-size: .8rem;
  line-height: 1.4;
}
.topbar__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 40px; flex-wrap: wrap;
}
.topbar__hours { display: inline-flex; align-items: center; gap: .42rem; }
.topbar__hours svg { width: 15px; height: 15px; fill: none; stroke: var(--green-300); stroke-width: 1.7; stroke-linecap: round; }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); flex: none; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.topbar__actions a {
  padding: .22rem .62rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 500; white-space: nowrap;
}
.topbar__actions a:hover { border-color: var(--green-300); background: rgba(255,255,255,.07); }
.topbar__actions .topbar__quote { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.topbar__actions .topbar__quote:hover { background: var(--green-700); border-color: var(--green-700); }
.topbar a { color: #CFDCE6; text-decoration: none; }
.topbar a:hover { color: #fff; }
@media (max-width: 1080px) { .topbar__mail, .topbar__mail + .topbar__sep, .topbar__hours + .topbar__sep { display: none; } }
@media (max-width: 860px)  { .topbar__mail, .topbar__hours, .topbar__sep { display: none; }
  .topbar__in { justify-content: space-between; }
  .topbar__actions { margin-left: 0; width: 100%; justify-content: center; }
  .topbar__tel { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 90;
  /* Opaque, not frosted: the logo's baked-in plate is this exact colour, so an
     opaque header keeps the two seamless and stops dark hero imagery bleeding
     through behind the wordmark. */
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(12,47,75,.08); }
.site-header__in { display: flex; align-items: center; gap: 1.25rem; min-height: 78px; }

/* The white background is baked into logo.png itself, not applied here: a
   browser that force-darkens the page would invert a CSS background but leaves
   image pixels alone, so the wordmark stays readable in mobile dark mode. */
.brand { flex: none; display: block; }
.brand img { width: auto; height: 54px; transition: height .25s var(--ease); }
.site-header.is-stuck .brand img { height: 42px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav__list { display: flex; align-items: center; gap: .3rem; list-style: none; }
.nav__item { position: relative; }
.nav__item > a {
  display: block; padding: .6rem .82rem;
  font-size: .925rem; font-weight: 500; color: var(--navy);
  text-decoration: none; border-radius: var(--r-sm);
  transition: color .18s var(--ease);
}
.nav__item > a::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  background: var(--green); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav__item > a:hover::after,
.nav__item > a[aria-current]::after,
.nav__item > a[data-branch]::after { transform: scaleX(1); }
.nav__item > a[aria-current],
.nav__item > a[data-branch] { color: var(--green-700); }

.has-sub > a::before {
  content: ""; position: absolute; right: .1rem; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}
.has-sub > a { padding-right: 1.3rem; }

.nav__sub {
  position: absolute; top: calc(100% + 6px); left: -.3rem;
  min-width: 250px; list-style: none;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: .45rem;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover > .nav__sub,
.has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
  font-size: .9rem; color: var(--navy); text-decoration: none;
}
.nav__sub a:hover,
.nav__sub a[aria-current],
.nav__sub a[data-branch] { background: var(--green-50); color: var(--green-700); }

/* Third level — flies out beside its hub. It sits flush against the parent
   panel (left:100% lands inside the parent's padding) so there is no dead gap
   for the pointer to fall through on the way across. */
.nav__sub > li { position: relative; }
.nav__sub .has-sub > a { padding-right: 1.6rem; }
.nav__sub .has-sub > a::before {
  right: .7rem; margin-top: -3px;
  transform: rotate(-45deg);
}
.nav__sub--nested {
  top: -.45rem; left: 100%;
  min-width: 260px;
  max-height: calc(100vh - 8.5rem); overflow-y: auto;
}
.nav__sub--nested.is-flipped { left: auto; right: 100%; }
.has-sub:hover > .nav__sub--nested,
.has-sub:focus-within > .nav__sub--nested { transform: translateY(0); }

.nav__toggle { display: none; }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.burger span {
  display: block; height: 2px; border-radius: 2px; background: var(--navy);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: block; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    inset: 0 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; margin: 0; padding: 5.5rem 1.4rem 2rem;
    background: var(--cream); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    /* Parked off-canvas the drawer used to stay part of the pannable area on
       iOS Safari (and stayed tabbable). visibility:hidden takes it out of both;
       it is transitioned so the slide-out animation still finishes. */
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s var(--ease), visibility 0s linear 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item > a { padding: .85rem .2rem; font-size: 1.02rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav__item > a::after { display: none; }
  .has-sub > a::before { right: .5rem; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: .25rem 0 .5rem .9rem; min-width: 0;
    border-left: 2px solid var(--line);
    margin: .4rem 0 .4rem .2rem;
  }
  .nav__sub a { padding: .5rem .6rem; font-size: .92rem; }
  .nav__sub--nested { padding-left: .8rem; margin-left: 0; }
  .nav__sub .has-sub > a { font-weight: 600; }

  /* With JS the branches start closed — 28 sub-services would otherwise make
     the drawer a very long scroll. Without JS every level stays expanded. */
  .js .has-sub > .nav__sub { display: none; }
  .js .has-sub.is-open > .nav__sub { display: block; }
  .js .has-sub > a::before { display: none; }
  .js .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .js .has-sub > a { flex: 1 1 0; min-width: 0; }
  .js .has-sub > .nav__sub { flex: 0 0 100%; }
  .nav__toggle {
    display: grid; place-items: center;
    flex: none; width: 42px; height: 42px;
    background: none; border: 0; cursor: pointer; color: var(--navy);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__sub .nav__toggle { height: 34px; border-bottom: 0; }
  .nav__toggle::before {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg); transition: transform .2s var(--ease);
  }
  .nav__toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 2px; }
  .nav__cta { margin-top: 1.4rem; }
  .nav__cta .btn { width: 100%; }
  /* Both elements: iOS Safari ignores overflow:hidden on body alone. */
  html.nav-open, body.nav-open { overflow: hidden; }
  .nav-scrim {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 89;
    background: rgba(7, 30, 49, .45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; background: var(--navy-900); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(7,30,49,.94) 0%, rgba(7,30,49,.82) 42%, rgba(7,30,49,.42) 78%, rgba(7,30,49,.3) 100%);
}
.hero__in {
  position: relative; z-index: 1;
  padding-block: clamp(4rem, 2rem + 9vw, 8.5rem);
  max-width: 44rem;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero h1 em { font-style: normal; color: var(--green-300); }
.hero__tagline {
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  color: var(--green-300); margin: 0 0 .85rem;
}
.hero__text { color: #C3D2DE; font-size: clamp(1.03rem, .98rem + .35vw, 1.2rem); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
  margin-top: 2.9rem; padding-top: 1.9rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero__meta div { min-width: 7rem; }
.hero__meta b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 1.95rem; line-height: 1; color: #fff;
}
.hero__meta span { font-size: .82rem; color: #9FB3C3; letter-spacing: .02em; }

/* page hero (inner pages) */
.page-hero { position: relative; background: var(--navy); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; opacity: .38; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,30,49,.95), rgba(7,30,49,.62));
}
.page-hero__in { position: relative; z-index: 2; padding-block: clamp(2.9rem, 1.8rem + 4.6vw, 5rem); max-width: 48rem; }
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero p { color: #B9C8D4; font-size: 1.06rem; max-width: 44rem; }

.crumbs { position: relative; z-index: 2; padding-top: 1.5rem; font-size: .82rem; color: #8FA6B7; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .5; }
.crumbs a { color: #BDCEDB; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }

/* =========================================================================
   Split / editorial blocks
   ========================================================================= */
.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.25rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}

/* The offset outline behind the photo. Below 900px the frame spans the full
   container, so this overhang hangs straight into the page gutter — at 1.4rem
   it cleared the gutter by ~4px and gave phones a draggable horizontal scroll.
   Tying it to 2.2vw keeps it comfortably inside the 4vw gutter at every width
   while the desktop look (1.4rem) is unchanged from 1180px up. */
.frame { position: relative; --frame-off: clamp(.55rem, 2.2vw, 1.4rem); }
.frame img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.frame::before {
  content: ""; position: absolute; z-index: -1;
  top: auto; right: calc(var(--frame-off) * -1); bottom: calc(var(--frame-off) * -1); left: auto;
  inset: auto calc(var(--frame-off) * -1) calc(var(--frame-off) * -1) auto;
  width: 58%; height: 62%;
  border: 2px solid var(--green); border-radius: var(--r-lg); opacity: .55;
}
.frame--alt::before {
  top: calc(var(--frame-off) * -1); right: auto; bottom: auto; left: calc(var(--frame-off) * -1);
  inset: calc(var(--frame-off) * -1) auto auto calc(var(--frame-off) * -1);
  border-color: var(--navy-400);
}

.stack-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.stack-pair > :first-child { margin-top: 2.2rem; }
.stack-pair img { border-radius: var(--r); box-shadow: var(--shadow-sm); aspect-ratio: 3/4; object-fit: cover; }

/* =========================================================================
   Service cards
   ========================================================================= */
.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }
.card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--sand-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.55rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .55rem; }
.card__body p { color: var(--muted); font-size: .95rem; }
.card__body .link-arrow { margin-top: auto; padding-top: 1.1rem; }

/* numbered list of capabilities */
.caps { display: grid; gap: 2.2rem 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.caps h4 {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
}
.caps h4 .n { font-family: var(--serif); font-size: .95rem; color: var(--green); font-weight: 600; }
.ticks { list-style: none; display: grid; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.55rem;
  font-size: .945rem; color: var(--muted); line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--green); transform: rotate(45deg);
}
.section--navy .ticks li { color: #B9C8D4; }
.section--navy .caps h4 { color: #fff; border-color: rgba(255,255,255,.16); }

/* =========================================================================
   Stats band
   ========================================================================= */
.stats { display: grid; gap: 1px; background: rgba(255,255,255,.14); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); border-radius: var(--r); overflow: hidden; }
.stats > div { background: var(--navy); padding: 1.9rem 1.5rem; text-align: center; }
.stats b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; color: #fff; margin-bottom: .4rem;
}
.stats span { font-size: .84rem; color: #9FB3C3; letter-spacing: .04em; text-transform: uppercase; }

/* =========================================================================
   Process
   ========================================================================= */
.steps { counter-reset: step; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 186px), 1fr)); }
.step {
  position: relative; padding: 1.7rem 1.3rem 1.5rem;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  color: var(--green); margin-bottom: .85rem;
}
.step h3 { font-size: 1.08rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin-bottom: .45rem; }
.step p { font-size: .93rem; color: var(--muted); }

/* =========================================================================
   Gallery
   ========================================================================= */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.2rem; }
.filter {
  padding: .55rem 1.15rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent;
  font: 600 .87rem/1.2 var(--sans); color: var(--navy); cursor: pointer;
  transition: all .18s var(--ease);
}
.filter:hover { border-color: var(--navy-400); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.masonry { columns: 3 300px; column-gap: 1.15rem; }
.masonry .tile { break-inside: avoid; margin-bottom: 1.15rem; }

.tile {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: var(--sand-deep);
  border-radius: var(--r); overflow: hidden; cursor: zoom-in;
  text-align: left;
}
.tile img { width: 100%; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(7,30,49,.92), rgba(7,30,49,0));
  color: #fff; opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: translateY(0); }
.tile__cap strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.tile__cap span { font-size: .78rem; color: var(--green-300); letter-spacing: .08em; text-transform: uppercase; }
.tile[hidden] { display: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 30, 49, .95);
}
.lightbox.is-open { display: flex; }
.lightbox figure { max-width: 1100px; width: 100%; text-align: center; }
.lightbox img { max-height: 74vh; width: auto; margin-inline: auto; border-radius: var(--r); }
.lightbox figcaption { margin-top: 1.1rem; color: #C3D2DE; font-size: .94rem; }
.lightbox figcaption strong { display: block; font-family: var(--serif); font-weight: 500; color: #fff; font-size: 1.15rem; margin-bottom: .3rem; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }
.lb-close { top: 1rem; right: 1rem; transform: none; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 52rem; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: .35rem 0;
}
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.02rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--green);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.3rem; color: var(--muted); font-size: .97rem; max-width: 60ch; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.field label .req { color: var(--green-700); }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; padding: .78rem .95rem;
  font: 400 .96rem/1.5 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
/* iOS Safari force-zooms the whole page when you focus a control smaller than
   16px, and the zoomed page is then draggable sideways — which is what the
   enquiry form was doing. Anything under a coarse pointer gets a true 16px. */
@media (hover: none) and (pointer: coarse) {
  .field input, .field select, .field textarea { font-size: 16px; }
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230C2F4B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 10px 6px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px var(--green-50); outline: none;
}
.field textarea { resize: vertical; min-height: 220px; line-height: 1.65; }
.field .hint { font-size: .8rem; color: var(--muted-light); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1.05rem 1.25rem; border-radius: var(--r-sm); font-size: .95rem; border: 1.5px solid; }
.notice--ok   { background: var(--green-50); border-color: var(--green-300); color: #0A5E3E; }
.notice--err  { background: #FDF1EE; border-color: #F0BCAE; color: #93341C; }
.notice strong { display: block; margin-bottom: .2rem; }

.info-card {
  background: var(--navy); color: #C3D2DE; border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}
.info-card h3 { color: #fff; }
.info-block + .info-block { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.info-block h4 { color: var(--green-300); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .55rem; }
.info-block a { color: #fff; text-decoration: none; }
.info-block a:hover { color: var(--green-300); text-decoration: underline; }
.info-block p, .info-block address { margin: 0; line-height: 1.7; }
.map-embed { border: 0; width: 100%; aspect-ratio: 16/10; border-radius: var(--r); display: block; filter: grayscale(.25); }

/* =========================================================================
   CTA band + footer
   ========================================================================= */
.cta-band { background: var(--navy-800); color: #C3D2DE; }
.cta-band__in {
  display: grid; gap: 2rem; align-items: center;
  padding-block: clamp(2.8rem, 1.8rem + 4vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cta-band__in { grid-template-columns: 1.35fr .65fr; gap: 3rem; } }
.cta-band__title { color: #fff; font-size: clamp(1.65rem, 1.15rem + 2vw, 2.5rem); margin-bottom: .45em; }
.cta-band__text { color: #A9BCCB; font-size: .99rem; max-width: 40rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.site-footer { background: var(--navy-900); color: #8FA6B7; font-size: .92rem; padding-top: clamp(3rem, 2rem + 3.5vw, 4.5rem); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 3rem; } }
.footer-logo { height: 58px; width: auto; margin-bottom: 1.2rem; }
.footer-blurb { color: #8FA6B7; font-size: .9rem; line-height: 1.75; max-width: 32ch; }
.footer-head { color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-list { list-style: none; display: grid; gap: .6rem; }
.footer-list a { color: #A9BCCB; text-decoration: none; }
.footer-list a:hover { color: var(--green-300); }
.footer-address { color: #A9BCCB; line-height: 1.75; margin-bottom: 1rem; }
.footer-list--contact a { color: #fff; font-weight: 500; }
.footer-hours { margin-top: .9rem; font-size: .85rem; color: #7A8FA1; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.35rem; }
.footer-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  transition: all .2s var(--ease);
}
.footer-social svg { width: 17px; height: 17px; fill: #A9BCCB; transition: fill .2s var(--ease); }
.footer-social a:hover { background: var(--green); border-color: var(--green); }
.footer-social a:hover svg { fill: #fff; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: #6E8698;
}
.footer-bottom p { margin: 0; }
.footer-credit a { color: #A9BCCB; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); }
.footer-credit a:hover { color: var(--green-300); border-bottom-color: var(--green-300); }
@media (max-width: 760px) { .footer-bottom { justify-content: flex-start; } }

.wa-float {
  position: fixed; right: 1.05rem; bottom: 1.05rem; z-index: 80;
  display: grid; place-items: center; width: 54px; height: 54px;
  background: #25D366; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(18, 159, 106, .45);
  transition: transform .2s var(--ease);
}
.wa-float svg { width: 29px; height: 29px; fill: #fff; }
.wa-float:hover { transform: scale(1.07); }
@media (max-width: 520px) { .wa-float { width: 50px; height: 50px; } }

/* =========================================================================
   Scroll reveal
   ========================================================================= */
/* Scoped to .js so that with scripting off — or if site.js fails to load —
   every section is simply visible rather than stuck at opacity 0. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* 404 */
.err { text-align: center; padding-block: clamp(4rem, 2rem + 9vw, 8rem); }
.err__code { font-family: var(--serif); font-size: clamp(4.5rem, 3rem + 9vw, 9rem); line-height: .9; color: var(--sand-deep); margin: 0 0 .15em; }
.err .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }


/* =========================================================================
   Home "what we do" — four division cards
   ========================================================================= */
.what-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .what-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }

.what-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.what-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.what-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--sand-deep); }
.what-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.what-card:hover .what-card__media img { transform: scale(1.04); }
.what-card__body { padding: 1.7rem 1.75rem 1.85rem; display: flex; flex-direction: column; flex: 1; }
.what-card__body h3 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; letter-spacing: .06em; margin-bottom: .75rem; }
.what-card__body h3 a { text-decoration: none; color: var(--navy); }
.what-card__body h3 a:hover { color: var(--green-700); }
.what-card__body > p { color: var(--muted); font-size: .935rem; }

.what-card__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.15rem 0 1.4rem; padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
}
.what-card__list a {
  display: block; padding: .3rem .68rem;
  background: var(--sand); border-radius: 999px;
  font-size: .8rem; color: var(--navy); text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.what-card__list a:hover { background: var(--green); color: #fff; }
.what-card__more a { background: transparent; border: 1px dashed var(--line); color: var(--muted); }

.what-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center; }
.what-card__actions .link-arrow { font-size: .85rem; color: var(--green-700); }

/* ---- hub page CTA ---- */
.hub-cta {
  margin-top: 3rem; padding: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: center; justify-content: space-between;
  background: var(--green-50); border: 1px solid var(--green-300);
  border-radius: var(--r-lg);
}
.hub-cta p { margin: 0; font-family: var(--serif); font-size: 1.22rem; color: var(--navy); max-width: 34rem; }

/* ---- chip lists of sibling services ---- */
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chip-list--wide { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.chip-list a {
  display: block; padding: .48rem .95rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .86rem; color: var(--navy); text-decoration: none;
  transition: all .18s var(--ease);
}
.chip-list a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- static project tiles on the home page ---- */
.tile-static { border-radius: var(--r); overflow: hidden; background: var(--sand-deep); position: relative; }
.tile-static img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--ease); }
.tile-static:hover img { transform: scale(1.05); }
.tile-static figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(7,30,49,.9), rgba(7,30,49,0));
  color: #fff; font-size: .86rem; font-weight: 500;
}

/* ---- sub-service body copy ---- */
.sub-copy { font-size: 1.02rem; color: var(--muted); }

/* ---- about: approach steps ---- */
.approach { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.approach__item { position: relative; padding-top: 1.5rem; border-top: 2px solid rgba(255,255,255,.18); }
.approach__n {
  display: block; font-family: var(--serif); font-size: 1.7rem;
  line-height: 1; color: var(--green-300); margin-bottom: .7rem;
}
.approach__item h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; color: #fff; margin-bottom: .45rem; }
.approach__item p { color: #B9C8D4; font-size: .93rem; margin: 0; }

/* =========================================================================
   Touch / small-screen hardening
   These rules only apply where they are needed; the desktop design is
   untouched by everything in this block.
   ========================================================================= */

/* On a touchscreen there is no hover — the first tap "hovers" and the state
   then sticks until you tap elsewhere, so lift-and-scale effects leave cards
   floating and photos zoomed after a tap. Neutralise them and show the tile
   captions outright, since hover can never reveal them here. */
@media (hover: none) {
  .card:hover,
  .what-card:hover,
  .btn:hover,
  .wa-float:hover { transform: none; }
  .btn:hover { box-shadow: none; }
  .card:hover .card__media img,
  .what-card:hover .what-card__media img,
  .tile:hover img,
  .tile-static:hover img { transform: none; }
  .link-arrow:hover::after { transform: none; }
  .tile__cap { opacity: 1; transform: none; }
}

/* Phone numbers, e-mail addresses and the Coimbatore street address are the
   longest unbroken strings on the site; let them wrap rather than push the
   footer columns wider than the screen. */
.footer-list a,
.footer-address,
.footer-blurb,
.info-block a,
.info-block address,
.crumbs li { overflow-wrap: anywhere; word-break: break-word; }

/* Media never wider than its column, whatever the intrinsic size is. */
img, picture, svg, video, iframe, table { max-width: 100%; }

@media (max-width: 420px) {
  /* The gallery lightbox arrows sat on top of the photo on small phones. */
  .lb-prev { left: .35rem; }
  .lb-next { right: .35rem; }
  .lb-btn { width: 40px; height: 40px; }
  .lightbox img { max-height: 64vh; }
  /* 2rem of padding on a 320px screen left the CTA text about 20 characters
     wide; ease it off and let the button go full width. */
  .hub-cta { padding: 1.5rem 1.25rem; }
  .hub-cta .btn { width: 100%; }
}

/* Tap targets: WCAG 2.2 asks for 24px minimum, Apple and Google both say 44px.
   The topbar pills and breadcrumb links were the two that fell short. */
@media (pointer: coarse) {
  .topbar__actions a { padding-block: .5rem; }
  .crumbs a, .footer-list a { display: inline-block; padding-block: .15rem; }
}

/* =========================================================================
   Enquiry-form CAPTCHA
   ========================================================================= */
.captcha__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.captcha__img {
  display: block; width: 190px; height: 60px; flex: none;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--sand);
  /* The image is a puzzle, not artwork — stop long-press "save image" and
     text-selection drag getting in the way of typing the answer. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.captcha__reload {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;           /* full 44px tap target */
  padding: 0; cursor: pointer; color: var(--navy);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.captcha__reload svg { width: 19px; height: 19px; }
.captcha__reload:hover { border-color: var(--green); color: var(--green-700); }
.captcha__reload.is-spinning svg { animation: captcha-spin .5s var(--ease); }
@keyframes captcha-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha__reload.is-spinning svg { animation: none; } }

.captcha input[name="captcha"] {
  width: 7.5rem; flex: none;
  font-family: var(--sans); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
/* Below ~380px the image, button and box no longer fit on one line; let the
   input drop to its own row at full width rather than squeezing it. */
@media (max-width: 400px) {
  .captcha input[name="captcha"] { width: 100%; }
}