/* ==========================================================================
   TrionX Services, site.css
   Photo-led editorial. One stylesheet, no build step.
   Sections: 1 fonts · 2 tokens · 3 reset · 4 type · 5 layout · 6 header
             7 hero · 8 components · 9 forms · 10 prose · 11 footer · 12 utils
   ========================================================================== */

/* 1 ─ FONTS ─────────────────────────────────────────────────────────────── */
/* Self-hosted, latin + latin-ext only. latin-ext is fetched solely when a
   glyph needs it, so English pages pay for the latin file alone.            */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-latin-italic.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;
}

/* 2 ─ TOKENS ────────────────────────────────────────────────────────────── */

:root {
  /* ground + ink */
  --bone:       #FAF9F7;
  --bone-2:     #F1EFEA;
  --bone-3:     #E7E4DD;
  --ink:        #14171C;
  --ink-2:      #1C212A;
  --ink-soft:   #3C434E;
  --muted:      #6A6E76;

  /* brand, measured from the supplied logo artwork */
  --blue:       #345BA5;
  --blue-dk:    #26457E;
  --blue-lt:    #E9EFF9;
  --amber:      #E8A33D;   /* dark grounds only: fails AA on bone */

  --rule:       #DFDCD6;
  --rule-dark:  #2C333F;
  --white:      #FFFFFF;

  /* type */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* spacing */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* measure */
  --w-wide:   1480px;
  --w-page:   1240px;
  --w-prose:  700px;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 9vw, 7.5rem);

  --radius: 3px;
  --shadow: 0 1px 2px rgba(20,23,28,.05), 0 8px 28px rgba(20,23,28,.07);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 3 ─ RESET ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--blue-dk); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.dark :focus-visible, .band--dark :focus-visible { outline-color: var(--amber); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* 4 ─ TYPOGRAPHY ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }

.display,
h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6.2vw, 5.25rem); line-height: 1.02; }
h2 { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-family: var(--sans); font-weight: 650; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.01em; line-height: 1.25; }
h4 { font-family: var(--sans); font-weight: 650; font-size: 1.0625rem; letter-spacing: -.005em; }

p { text-wrap: pretty; }

/* Small caps rail label, the editorial signature used above every section. */
.eyebrow {
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.band--dark .eyebrow { color: rgba(255,255,255,.62); }
.band--dark .eyebrow::after, .band--dark .eyebrow::before { background: var(--rule-dark); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
.band--dark .lede { color: rgba(255,255,255,.78); }

.num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--blue);
  opacity: .3;
}

.muted { color: var(--muted); }
.serif-em { font-family: var(--serif); font-style: italic; }

/* 5 ─ LAYOUT ────────────────────────────────────────────────────────────── */

.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad); }
.container--wide  { max-width: var(--w-wide); }
.container--prose { max-width: var(--w-prose); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band--bone2 { background: var(--bone-2); }
.band--dark  { background: var(--ink); color: #fff; }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.band--dark a { color: #fff; }
.band--blue  { background: var(--blue); color: #fff; }
.band--blue h2, .band--blue h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
.grid--top { align-items: start; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* 6 ─ HEADER / NAV ──────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,249,247,.92);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.header__bar {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 4.5rem;
}
@media (min-width: 1040px) { .header__bar { gap: var(--s-5); } }
.header__logo { flex: 0 0 auto; display: block; color: var(--blue); }
.header__logo svg { width: clamp(126px, 13vw, 158px); height: auto; }

.header__spacer { flex: 1; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  display: inline-block; padding: .4rem 0;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  text-decoration: none; position: relative;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--blue); }

.header__tel {
  font-size: .95rem; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  display: none;
}
.header__tel:hover { color: var(--blue); }

/* Below the desktop breakpoint the full "Request Service" button plus the
   burger overflow a 390px viewport, so it is swapped for a compact call
   button, which is the higher-value action on a phone anyway. */
/* Scoped with .header so these beat the later `.btn { display: inline-flex }`
   rule, which otherwise wins on source order at equal specificity. */
.header .header__cta { display: none; }
.header .header__call { display: inline-flex; padding-inline: .85rem; gap: .4rem; }
.header__call svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 419px) { .header__call span { display: none; } }

/* services dropdown */
.nav__group { position: relative; }
.nav__toggle {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem 0; font-size: .95rem; font-weight: 500; color: var(--ink);
}
.nav__toggle svg { width: .6rem; height: .6rem; transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + .9rem); left: 50%; translate: -50% 0;
  min-width: 30rem;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: var(--s-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: .15rem;
  opacity: 0; visibility: hidden; translate: -50% -.4rem;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;
}
.nav__toggle[aria-expanded="true"] + .nav__panel { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__panel a {
  display: block; padding: .6rem .75rem;
  font-size: .92rem; color: var(--ink); text-decoration: none;
  border-radius: var(--radius);
}
.nav__panel a:hover { background: var(--blue-lt); color: var(--blue-dk); }
.nav__panel a small { display: block; font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.nav__panel a:hover small { color: var(--blue); }

/* mobile */
.burger {
  margin-left: auto;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: .25s var(--ease); }
.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); }

.mobile {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--bone);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  padding-block: var(--s-4) var(--s-6);
}
.mobile[data-open] { display: block; }
.mobile a { display: block; padding: .8rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); font-weight: 500; }
.mobile .mobile__sub a { padding-left: 1rem; font-weight: 400; font-size: .95rem; color: var(--ink-soft); }
.mobile__cta { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.mobile__cta a { border: 0; text-align: center; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .header__tel { display: inline-block; }
  .header .header__cta { display: inline-flex; }
  .header .header__call { display: none; }
  .burger { display: none; }
  .mobile { display: none !important; }
}

/* 7 ─ HERO ──────────────────────────────────────────────────────────────── */

/* media 0, veil 1, content 2. See the note on .statement. Negative z-index
   here depends on the section background not covering it, which is fragile. */
.hero { position: relative; isolation: isolate; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,12,16,.9) 0%, rgba(10,12,16,.72) 45%, rgba(10,12,16,.35) 100%),
    linear-gradient(to top, rgba(10,12,16,.75) 0%, rgba(10,12,16,0) 55%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(30rem, 76vh, 46rem);
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.hero h1 { color: #fff; max-width: 16ch; margin-top: var(--s-4); }
.hero .lede { color: rgba(255,255,255,.8); margin-top: var(--s-5); max-width: 52ch; }
.hero .eyebrow { color: rgba(255,255,255,.7); }
.hero .eyebrow::after { background: rgba(255,255,255,.28); max-width: 6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: center; }

/* compact hero for interior pages */
.pagehead { background: var(--ink); color: #fff; position: relative; isolation: isolate; }
.pagehead__media { position: absolute; inset: 0; z-index: 0; }
/* Near-full opacity: the darkening is done by the gradient below, which is
   weighted to the left where the heading sits, so the right of the frame keeps
   showing the photograph. Dimming the image as well double-darkens it and the
   picture disappears entirely. */
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,12,16,.94) 0%, rgba(10,12,16,.86) 34%, rgba(10,12,16,.34) 100%),
    linear-gradient(to bottom, rgba(10,12,16,.45) 0%, rgba(10,12,16,0) 45%);
}
.pagehead__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.pagehead h1 { color: #fff; max-width: 20ch; margin-top: var(--s-3); }
.pagehead .lede { color: rgba(255,255,255,.78); margin-top: var(--s-4); }

/* breadcrumbs */
.crumbs { font-size: .8rem; color: rgba(255,255,255,.6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: '/'; margin-right: .45rem; opacity: .45; }
.crumbs [aria-current] { color: #fff; }

/* breadcrumbs on a light ground */
.crumbs--ink { color: var(--muted); }
.crumbs--ink a { color: var(--muted); }
.crumbs--ink a:hover { color: var(--blue); }
.crumbs--ink [aria-current] { color: var(--ink); }

/* 8 ─ COMPONENTS ────────────────────────────────────────────────────────── */

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  font-size: .95rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dk); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--bone-2); color: var(--ink); }
.btn--ghost { border-color: currentColor; color: inherit; background: none; }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: inherit; }
.btn--ink { border-color: var(--ink); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--blue);
}
.arrow-link svg { width: 1rem; height: 1rem; transition: translate .25s var(--ease); }
.arrow-link:hover svg { translate: .25rem 0; }
.band--dark .arrow-link { color: #fff; }

/* trust bar */
.trustbar { border-bottom: 1px solid var(--rule); background: var(--bone); }
/* One column on small phones: these labels are long, uppercase and tracked
   out, and two columns clips them below ~560px. */
.trustbar ul {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 560px) { .trustbar ul { grid-template-columns: 1fr 1fr; } }
.trustbar li {
  display: flex; align-items: center; gap: .6rem;
  padding: .95rem .25rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.trustbar svg { width: 1.05rem; height: 1.05rem; color: var(--blue); flex: 0 0 auto; }
/* the column divider only makes sense once there are actually two columns */
@media (min-width: 560px) {
  .trustbar li:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 1rem; }
  .trustbar li:nth-child(even) { padding-left: 1rem; }
}
@media (min-width: 860px) {
  .trustbar ul { grid-template-columns: repeat(4, 1fr); }
  .trustbar li { justify-content: center; border-bottom: 0; padding: 1.1rem .75rem; }
  .trustbar li + li { border-left: 1px solid var(--rule); }
  .trustbar li:nth-child(odd) { border-right: 0; padding-right: .75rem; }
  .trustbar li:nth-child(even) { padding-left: .75rem; }
}

/* section heading block */
.sectionhead { max-width: 60ch; }
.sectionhead h2 { margin-top: var(--s-4); }
.sectionhead p { margin-top: var(--s-4); color: var(--ink-soft); font-size: 1.075rem; }
.sectionhead--center { margin-inline: auto; text-align: center; }
.sectionhead--center .lede { margin-inline: auto; }
.band--dark .sectionhead p { color: rgba(255,255,255,.75); }

/* editorial service rail, the homepage centrepiece */
.rail { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.rail__item {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.rail__media { position: relative; overflow: hidden; background: var(--bone-2); }
.rail__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: scale .6s var(--ease); }
.rail__item:hover .rail__media img { scale: 1.03; }
.rail__head { display: flex; align-items: baseline; gap: var(--s-4); }
.rail__body h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.rail__body h3 a { color: inherit; text-decoration: none; }
.rail__body h3 a::after { content: ''; position: absolute; inset: 0; }
.rail__body > p { margin-top: var(--s-3); color: var(--ink-soft); max-width: 48ch; }
.rail__item { position: relative; }
.rail__body .arrow-link { margin-top: var(--s-4); }

@media (min-width: 860px) {
  .rail__item { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .rail__item:nth-child(even) .rail__media { order: 2; }
}

/* tick list */
.ticks { display: grid; gap: .45rem; margin-top: var(--s-4); }
.ticks li { display: flex; gap: .65rem; font-size: .95rem; color: var(--ink-soft); }
.ticks li::before {
  content: ''; flex: 0 0 auto; width: .95rem; height: .95rem; margin-top: .35rem;
  background: var(--blue);
  clip-path: polygon(14% 46%, 0 60%, 38% 96%, 100% 22%, 86% 8%, 36% 66%);
}
.band--dark .ticks li { color: rgba(255,255,255,.8); }
.band--dark .ticks li::before { background: var(--amber); }

/* cards */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card p { color: var(--ink-soft); font-size: .95rem; }
.card__num { font-family: var(--serif); font-size: 1.6rem; color: var(--blue); opacity: .35; line-height: 1; }
.card--flush { background: transparent; border: 0; border-top: 1px solid var(--rule); padding-inline: 0; padding-top: var(--s-5); }
.card--flush:hover { transform: none; box-shadow: none; border-color: var(--ink); }

/* media figure with caption */
.figure { margin: 0; }
.figure img { width: 100%; }
/* Article banner. Fixing the ratio here means a post can carry any delivered
   photograph, whatever its native aspect, and every post still opens the same
   way. Without it the banner height tracks whichever image was assigned. */
.figure--wide img { aspect-ratio: 16/9; object-fit: cover; }
.figure figcaption { margin-top: var(--s-3); font-size: .82rem; color: var(--muted); }

/* full-bleed statement band */
/* Layering is done with positive z-indexes on purpose. The earlier version put
   the media at z-index:-2 behind the section's own opaque background, which
   only rendered because a filter on the <img> happened to promote it to its
   own layer; removing the filter made both bands go solid black. Explicit
   ordering of media 0, veil 1, content 2 has no such dependency. */
.statement { position: relative; isolation: isolate; background: var(--ink); color: #fff; }
.statement__media { position: absolute; inset: 0; z-index: 0; }
/* Exposure lives in the asset, not here: these plates are gamma-lifted at
   export to ~95 mean luminance (tools/make-placeholders.mjs documents the
   target), so no CSS filter is needed and none is applied. The veil below is
   the only darkening, which keeps its effect predictable. */
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
/* Centred-text variant: darkening concentrated in the middle, edges left open. */
.statement::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10,12,16,.62) 0%, rgba(10,12,16,.24) 64%, rgba(10,12,16,0) 100%),
    linear-gradient(to bottom, rgba(10,12,16,.44) 0%, rgba(10,12,16,.26) 45%, rgba(10,12,16,.5) 100%);
}
/* Left-text variant: the copy occupies only the left half, so the veil is
   weighted that way and the right of the frame stays legible photography. */
.statement--left::after {
  background:
    linear-gradient(to right, rgba(10,12,16,.9) 0%, rgba(10,12,16,.76) 44%, rgba(10,12,16,.2) 100%),
    linear-gradient(to bottom, rgba(10,12,16,.34) 0%, rgba(10,12,16,.12) 42%, rgba(10,12,16,.42) 100%);
}
.statement__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 11vw, 8.5rem); text-align: center; }
/* A soft shadow rather than a heavier veil: it buys legibility wherever a
   bright part of the photograph lands behind the copy, without darkening the
   picture everywhere to guard against the worst case. */
.statement h2 { font-size: clamp(2.1rem, 5vw, 4rem); max-width: 20ch; margin-inline: auto; color: #fff;
  text-shadow: 0 2px 20px rgba(10,12,16,.5); }
.statement p { margin-top: var(--s-5); color: rgba(255,255,255,.88); max-width: 58ch; margin-inline: auto;
  text-shadow: 0 1px 12px rgba(10,12,16,.6); }
.statement .eyebrow { text-shadow: 0 1px 10px rgba(10,12,16,.6); }

/* left-aligned variant, used for the Miami coverage band */
.statement__inner--left { text-align: left; }
.statement__inner--left h2 { margin-inline: 0; max-width: 18ch; }
.statement__inner--left p  { margin-inline: 0; }
.statement__lead { max-width: 62ch; }

/* process steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; padding-block: var(--s-5); border-top: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.5rem; color: var(--blue); opacity: .45; line-height: 1;
}
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--ink-soft); font-size: .95rem; max-width: 52ch; }
.band--dark .steps li { border-color: var(--rule-dark); }
.band--dark .steps p { color: rgba(255,255,255,.75); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .steps li { border-top: 1px solid var(--rule); }
}
/* For steps sitting inside a narrow column (e.g. the contact sidebar), where
   the four-across grid would squeeze each step into an unreadable strip. */
@media (min-width: 860px) { .steps--stack { grid-template-columns: 1fr; gap: 0; } }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-5) 2.5rem var(--s-5) 0;
  font-weight: 600; font-size: 1.05rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%; translate: 0 -50%;
  width: .8rem; height: .8rem;
  background: var(--ink);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: rotate .25s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--blue); }
.faq__body { padding-bottom: var(--s-5); color: var(--ink-soft); max-width: 68ch; }
.faq__body > * + * { margin-top: var(--s-3); }

/* pill / tag */
.tag {
  display: inline-block; padding: .28rem .7rem;
  font-size: .7rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  background: var(--blue-lt); color: var(--blue-dk); border-radius: 100px;
}
.band--dark .tag { background: rgba(255,255,255,.12); color: #fff; }

/* area chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a {
  display: inline-block; padding: .5rem .95rem;
  font-size: .875rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 100px; background: var(--white);
  transition: .2s var(--ease);
}
.chips a:hover { border-color: var(--blue); background: var(--blue-lt); color: var(--blue-dk); }
.band--dark .chips a { background: rgba(255,255,255,.06); border-color: var(--rule-dark); color: #fff; }
.band--dark .chips a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* CTA band */
.cta__inner {
  display: grid; gap: var(--s-5); align-items: center;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.cta p { color: rgba(255,255,255,.8); margin-top: var(--s-3); max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.cta__tel { font-size: 1.15rem; font-weight: 650; color: #fff; text-decoration: none; white-space: nowrap; }
@media (min-width: 860px) {
  .cta__inner { grid-template-columns: 1.2fr auto; gap: var(--s-7); }
}

/* post cards */
.post { display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.post__media { overflow: hidden; background: var(--bone-2); }
.post__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: scale .6s var(--ease); }
.post:hover .post__media img { scale: 1.04; }
.post__meta { font-size: .78rem; color: var(--muted); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.post h3 { font-size: 1.15rem; line-height: 1.3; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a::after { content: ''; position: absolute; inset: 0; }
.post p { font-size: .93rem; color: var(--ink-soft); }

/* placeholder image marker, visible only while art is pending */
img[src$=".svg"][data-ph] { background: var(--bone-2); }

/* 9 ─ FORMS ─────────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; }
.field label { font-size: .85rem; font-weight: 600; }
.field .hint { font-size: .78rem; color: var(--muted); font-weight: 400; }
.field .req { color: var(--blue); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-lt);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #B3261E; }
.field input::placeholder, .field textarea::placeholder { color: #9CA0A8; }

/* honeypot: must stay reachable for bots but invisible and unfocusable */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: .82rem; color: var(--muted); }
.form__status { padding: var(--s-4); border-radius: var(--radius); font-size: .92rem; display: none; }
.form__status[data-state="error"]  { display: block; background: #FDECEA; color: #8C1D18; border: 1px solid #F3C6C1; }
.form__status[data-state="sending"]{ display: block; background: var(--blue-lt); color: var(--blue-dk); }

/* contact detail list */
.detail { border-top: 1px solid var(--rule); padding-block: var(--s-5); }
.detail dt { font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.detail dd { margin: .4rem 0 0; font-size: 1.05rem; }
.detail dd a { color: var(--ink); text-decoration: none; }
.detail dd a:hover { color: var(--blue); }
/* The glossary read-more link has to read as a link. The rule above is for the
   contact page, where a phone number and an address should not look like one. */
.detail__more { display: block; margin-top: .5rem; font-size: .88rem; }
/* Selector has to outrank `.detail dd a` above, which is more specific than a
   bare `.detail__more a` and would otherwise strip the colour and underline. */
.detail dd .detail__more a { color: var(--blue); text-decoration: underline; }
.detail dd .detail__more a:hover { color: var(--blue-dk); }
.detail dd .detail__more a::after { content: ' \2192'; text-decoration: none; }

/* 10 ─ PROSE (blog articles) ────────────────────────────────────────────── */

.prose { max-width: var(--w-prose); font-size: 1.115rem; line-height: 1.72; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.4em; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); margin-top: 2.2em; }
.prose h3 { font-size: 1.25rem; color: var(--ink); margin-top: 1.9em; }
.prose p > strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--blue); }
.prose blockquote {
  border-left: 2px solid var(--blue);
  padding-left: 1.4em;
  font-family: var(--serif);
  font-size: 1.4em;
  line-height: 1.35;
  color: var(--ink);
}
.prose figure img { width: 100%; }
.prose figcaption { margin-top: .6em; font-size: .85rem; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 650; color: var(--ink); }

.article__head { max-width: var(--w-prose); }
.article__meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; font-size: .84rem; color: var(--muted); margin-top: var(--s-4); }

/* Previous and next article. The empty grid cell holds the "older" link at the
   right edge on the first and last post, where one side has no neighbour. */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pagenav__item {
  display: block; padding: var(--s-4); text-decoration: none;
  border: 1px solid var(--rule); background: var(--bone);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pagenav__item:hover { border-color: var(--blue); background: #fff; }
.pagenav__item--next { text-align: right; }
.pagenav__dir {
  display: block; font-size: .7rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pagenav__title { display: block; margin-top: .35rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
@media (max-width: 640px) {
  .pagenav { grid-template-columns: 1fr; }
  .pagenav__item--next { text-align: left; }
}

.toc { background: var(--bone-2); border: 1px solid var(--rule); padding: var(--s-5); }
.toc__title { font-size: .78rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.toc ol { margin-top: var(--s-3); display: grid; gap: .45rem; padding-left: 0; }
/* No list markers: several posts number their own headings, and the marker
   would render "1. 1. …" against them. */
.toc li { list-style: none; font-size: .95rem; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }

/* 11 ─ FOOTER ───────────────────────────────────────────────────────────── */

.footer { background: var(--ink); color: rgba(255,255,255,.72); font-size: .92rem; }
.footer__top { display: grid; gap: var(--s-7); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__brand svg { width: 168px; height: auto; color: #fff; }
.footer__brand p { margin-top: var(--s-4); max-width: 34ch; font-size: .9rem; line-height: 1.6; }
.footer__cols { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; }
.footer h3 { font-size: .7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer ul { margin-top: var(--s-4); display: grid; gap: .6rem; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer address { font-style: normal; margin-top: var(--s-4); display: grid; gap: .6rem; }
/* beats the `.footer ul` margin above on specificity */
.footer .mt-5 { margin-top: var(--s-5); }
.footer__bottom {
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; }
@media (min-width: 700px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) {
  .footer__top { grid-template-columns: 1fr 2fr; gap: var(--s-9); }
}

/* 12 ─ UTILITIES ────────────────────────────────────────────────────────── */

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.chips--center { justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
/* mb-6 was in the markup on 18 headings before it existed here, so those
   headings sat flush against the prose underneath them. */
.mb-6 { margin-bottom: var(--s-6); }
.flow > * + * { margin-top: var(--s-4); }
.hr { border: 0; border-top: 1px solid var(--rule); }
.band--dark .hr { border-color: var(--rule-dark); }
.nowrap { white-space: nowrap; }