/* ==========================================================================
   Meridian Ledger Group LLC — design system v2
   Palette sampled from the brand logo: navy #0A1E38 / gold #B59145,
   with a burnt-copper primary action colour and a five-tone section scale.
   Type: Playfair Display (display serif) + IBM Plex Sans (UI/body)

   1  Tokens            8  Cards            15 Visual proof / mockups
   2  Reset             9  Pain points      16 Trust, metrics, badges
   3  Layout           10  Steps            17 Social proof
   4  Buttons          11  Founder          18 FAQ / disclaimer / prose
   5  Header + nav     12  Booking          19 Breadcrumbs
   6  Hero             13  CTA band         20 Footer
   7  Credibility      14  Media + figures  21 Utilities + motion
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* brand */
  --navy-900:#061428;
  --navy-800:#0a1e38;
  --navy-700:#12305a;
  --navy-600:#1d4173;
  --gold:#b59145;
  --gold-ink:#7f601e;      /* AA-safe gold for text on light surfaces — 5.10:1 on the darkest cream */
  --gold-lt:#d9bc7a;       /* gold on navy — 9.09:1 */
  --gold-wash:rgba(181,145,69,.10);

  /* primary action — burnt copper. White on it measures 5.12:1. */
  --flame:#ae4c18;
  --flame-dk:#8f3e12;
  --flame-lt:#d3762f;
  --flame-wash:rgba(174,76,24,.09);

  /* surfaces — five tones so long pages never read as one slab */
  --white:#fff;
  --ivory:#faf7f0;
  --ivory-2:#f4efe4;
  --mist:#eff4fa;          /* soft blue */
  --gray-50:#f5f6f8;       /* light neutral */

  /* ink */
  --ink:#16202e;
  --ink-soft:#4a5768;
  --ink-mute:#606b7a;
  --line:#e6dfd1;
  --line-soft:#efe9dc;
  --line-cool:#dfe5ee;
  --on-navy:#eef2f8;
  --on-navy-soft:#b9c6d9;

  /* type */
  --serif:"Playfair Display",ui-serif,"Iowan Old Style",Georgia,Cambria,"Times New Roman",serif;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* fluid scale — nothing ever renders below 15px */
  --fs-display:clamp(2.5rem,1.55rem + 4.1vw,4.75rem);
  --fs-hero:clamp(2.25rem,1.4rem + 3.6vw,4.25rem);
  --fs-h1:clamp(2.05rem,1.4rem + 2.8vw,3.4rem);
  --fs-h2:clamp(1.7rem,1.32rem + 1.65vw,2.6rem);
  --fs-h3:clamp(1.15rem,1.07rem + 0.36vw,1.375rem);
  --fs-lead:clamp(1.0938rem,1.01rem + 0.44vw,1.35rem);
  --fs-body:clamp(1rem,0.975rem + 0.14vw,1.075rem);
  --fs-sm:0.9375rem;
  --fs-xs:0.8438rem;
  --fs-eyebrow:0.8125rem;

  /* space */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-y:clamp(3.75rem,2.5rem + 4.8vw,7rem);
  --maxw:1160px;
  --maxw-wide:1320px;
  --maxw-narrow:740px;
  --header-h:72px;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --radius-pill:999px;

  /* one elevation scale, used everywhere */
  --shadow-xs:0 1px 2px rgba(6,20,40,.05);
  --shadow-sm:0 1px 2px rgba(6,20,40,.05),0 3px 10px rgba(6,20,40,.05);
  --shadow-md:0 2px 4px rgba(6,20,40,.05),0 14px 34px rgba(6,20,40,.09);
  --shadow-lg:0 30px 70px rgba(6,20,40,.18);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

  --ease:cubic-bezier(.22,.72,.28,1);
  --dur:.32s;
}
@media (min-width:60em){ :root{--header-h:84px} }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{
  margin:0;
  padding-top:var(--header-h);              /* fixed header reserves its own space */
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.72;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
body.has-hero{padding-top:0}                /* hero absorbs the header instead */
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 .5em;letter-spacing:-.018em}
h1{font-size:var(--fs-h1);text-wrap:balance}
h2{font-size:var(--fs-h2);text-wrap:balance}
h3{font-size:var(--fs-h3);letter-spacing:-.008em}
h4{font-size:1.05rem;letter-spacing:0}
p{margin:0 0 1.05rem;max-width:68ch}
p:last-child{margin-bottom:0}
a{color:var(--navy-700);text-underline-offset:3px}
ul{margin:0;padding-left:1.15rem}
strong{font-weight:600;color:var(--ink)}
:target{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

/* focus — visible on every surface */
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:5px}
.on-navy :focus-visible,.site-footer__legal :focus-visible,.hero :focus-visible{outline-color:var(--gold-lt)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300}
.skip-link:focus{
  left:1rem;top:1rem;background:var(--white);color:var(--navy-800);
  padding:.85rem 1.25rem;border:2px solid var(--navy-800);border-radius:var(--radius-sm);
  font-weight:600;box-shadow:var(--shadow-md);
}

/* icon primitive — one set, one sizing rule */
/* Sprite symbols are 24x24 <symbol viewBox="0 0 24 24">, so <use> scales the
   artwork — and the stroke with it. A nominal stroke-width therefore renders at
   width * (box / 24) px. Every icon size below sets stroke-width to
   1.75 * 24 / box so the drawn line is 1.75px everywhere. Adding a new icon
   size means adding its stroke-width too, or that icon draws heavier or lighter
   than the rest of the site. */
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.ico--sm{width:18px;height:18px;stroke-width:2.33}
.ico--lg{width:30px;height:30px;stroke-width:1.4}
.ico--xl{width:40px;height:40px;stroke-width:1.05}
.ico--fill{fill:currentColor;stroke:none}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--maxw-wide)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(2.5rem,1.8rem + 2.8vw,4.25rem)}
.section--flush-top{padding-top:0}
.section--ivory{background:var(--ivory)}
.section--ivory-2{background:var(--ivory-2)}
.section--mist{background:var(--mist)}
.section--gray{background:var(--gray-50)}
.section--navy{background:var(--navy-800);color:var(--on-navy)}
.section--navy h2,.section--navy h3,.section--navy h4{color:var(--white)}
.section--navy p{color:var(--on-navy-soft)}
/* hairline rule between two same-tone sections */
.section--ruled{border-top:1px solid var(--line-soft)}

.section__head{max-width:58ch;margin-bottom:clamp(2.25rem,1.5rem + 2.2vw,3.25rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center p{margin-inline:auto}
.section__head h2{margin-bottom:.55rem}
.section__head p{color:var(--ink-soft);font-size:var(--fs-lead);margin-bottom:0;line-height:1.6}
.section--navy .section__head p{color:var(--on-navy-soft)}

.eyebrow{
  display:block;font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1rem;
}
.section--navy .eyebrow,.hero .eyebrow,.cta-band .eyebrow,.band .eyebrow{color:var(--gold-lt)}
.eyebrow--rule{display:flex;align-items:center;gap:.8rem}
.eyebrow--rule::after{content:"";flex:0 0 2.75rem;height:1px;background:currentColor;opacity:.55}
.section__head--center .eyebrow--rule{justify-content:center}
.section__head--center .eyebrow--rule::before{content:"";flex:0 0 2.75rem;height:1px;background:currentColor;opacity:.55}

/* auto-fitting grids — responsive at every width, no breakpoint gaps */
.grid{display:grid;gap:clamp(1rem,.7rem + 1.3vw,1.85rem)}
.grid > *{min-width:0}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr))}

/* two-column image + copy */
.split{display:grid;gap:clamp(2rem,1.3rem + 3vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:58em){
  .split{grid-template-columns:1fr 1fr}
  .split--media-right .split__media{order:2}
  .split--narrow-media{grid-template-columns:1fr 1.15fr}
}
.split__body > :last-child{margin-bottom:0}

/* ---------- 4. Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.95rem 1.75rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.25;letter-spacing:.005em;
  text-align:center;text-decoration:none;border-radius:var(--radius-sm);
  border:1.5px solid transparent;cursor:pointer;isolation:isolate;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .22s var(--ease),box-shadow var(--dur) var(--ease);
}
.btn .ico{width:19px;height:19px;transition:transform .28s var(--ease);stroke-width:2.21}
.btn:hover .ico--arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.985)}

/* primary action — burnt copper */
.btn--primary{background:var(--flame);color:#fff;box-shadow:0 1px 2px rgba(80,32,7,.22),0 8px 22px rgba(143,62,18,.24)}
.btn--primary:hover{background:var(--flame-dk);transform:translateY(-2px);box-shadow:0 2px 4px rgba(80,32,7,.24),0 16px 34px rgba(143,62,18,.32)}
/* legacy alias — gold buttons now resolve to the primary action */
.btn--gold{background:var(--flame);color:#fff;box-shadow:0 1px 2px rgba(80,32,7,.22),0 8px 22px rgba(143,62,18,.24)}
.btn--gold:hover{background:var(--flame-dk);transform:translateY(-2px);box-shadow:0 2px 4px rgba(80,32,7,.24),0 16px 34px rgba(143,62,18,.32)}

.btn--navy{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)}
.btn--navy:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--navy-800);border-color:rgba(10,30,56,.26)}
.btn--ghost:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--on-navy{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(217,188,122,.6)}
.btn--on-navy:hover{background:#fff;color:var(--navy-900);border-color:#fff;transform:translateY(-2px)}
.btn--sm{min-height:44px;padding:.6rem 1.2rem;font-size:var(--fs-sm)}
.btn--lg{min-height:60px;padding:1.05rem 2.1rem;font-size:1.0625rem}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.btn-row--center{justify-content:center}
@media (max-width:26.25em){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}

/* inline text link with a sliding arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-weight:600;font-size:var(--fs-sm);color:var(--navy-800);text-decoration:none;
}
.link-arrow .ico{width:17px;height:17px;transition:transform .28s var(--ease);stroke-width:2.47}
.link-arrow:hover{color:var(--flame)}
.link-arrow:hover .ico{transform:translateX(4px)}
.on-navy .link-arrow,.section--navy .link-arrow{color:var(--gold-lt)}
.on-navy .link-arrow:hover,.section--navy .link-arrow:hover{color:#fff}

/* ---------- 5. Header + navigation ---------- */
/* Solid white on every page. There is no translucency and no backdrop blur: with
   an opaque background the blur has nothing to sample, and .9 white over the
   navy hero read as a faint grey bar rather than the white it read as further
   down the page — which is the uniformity that was missing. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:150;
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s var(--ease);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.site-header[data-scrolled="true"]{box-shadow:0 1px 0 rgba(10,30,56,.06),0 10px 30px rgba(6,20,40,.07)}

/* The header is the light glass bar on every page and at every scroll position.
   It used to go transparent over the dark hero, which forced a light-ink copy of
   the logo to be swapped in — and the supplied logo is navy, so any such copy is
   a modified logo. It also broke on hash entry (/#services, /#industries,
   /#contact): the browser jumps to the anchor before the scroll handler has run,
   so the header stayed in its transparent state while sitting over a light
   section, and the light-ink logo vanished into the background. One opaque
   header, one unmodified logo, no states. */

.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--navy-800);padding:.25rem 0}
/* Single image: the supplied lockup, mark and wordmark together, exactly as
   delivered. Height-driven so the intrinsic 545x138 ratio is never distorted.
   At the 320px floor the content box is 280px — 145px of logo plus the 100px
   menu button still fits. */
.brand__lockup{display:block;width:auto;height:38px;flex:none}
@media (min-width:60em){.brand__lockup{height:46px}}
@media (max-width:23.75em){.brand__lockup{height:34px}}

.nav{display:flex;align-items:center;gap:.15rem}
.nav > a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:.5rem .85rem;
  font-size:var(--fs-sm);font-weight:500;color:var(--navy-800);text-decoration:none;
  border-radius:8px;transition:background-color .22s var(--ease),color .22s var(--ease);
}
.nav > a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:2px;border-radius:2px;
  background:var(--flame);transform:scaleX(0);transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav > a:hover{background:var(--ivory-2);color:var(--navy-900)}
.nav > a:hover::after,.nav > a[aria-current="page"]::after,.nav > a[data-active]::after{transform:scaleX(1)}
.nav > a[aria-current="page"],.nav > a[data-active]{color:var(--flame);font-weight:600}
.nav__cta{margin-left:.65rem}

.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:.55rem;
  min-height:46px;min-width:46px;padding:.5rem .95rem;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  color:var(--navy-800);font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.nav-toggle__bars{position:relative;width:18px;height:12px;flex:none}
.nav-toggle__bars span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .28s var(--ease),opacity .2s ease}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:60em){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem var(--gutter) 1.35rem;background:var(--white);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav > a{min-height:54px;padding:.9rem .6rem;font-size:1.0625rem;border-radius:8px;color:var(--navy-800)}
  .nav > a + a{border-top:1px solid var(--line-soft)}
  .nav > a::after{left:.6rem;right:auto;width:22px;bottom:.75rem}
  .nav__cta{margin:1rem 0 0}
  .nav__cta a{justify-content:center;border-top:0}
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--on-navy);
  padding-top:var(--header-h);
  background:
    radial-gradient(120% 90% at 78% 6%,rgba(29,65,115,.62) 0%,rgba(10,30,56,0) 58%),
    linear-gradient(158deg,var(--navy-800) 0%,var(--navy-900) 62%,#04101f 100%);
}
/* photographic hero — image sits behind a navy scrim so text stays AA */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34;
  transform:scale(1.04);filter:saturate(.75)}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--navy-900) 4%,rgba(6,20,40,.9) 38%,rgba(6,20,40,.62) 72%,rgba(6,20,40,.78) 100%);
}
/* faint gold grid — texture, not decoration */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(181,145,69,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(181,145,69,.07) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(75% 65% at 72% 18%,#000 0%,transparent 78%);
          mask-image:radial-gradient(75% 65% at 72% 18%,#000 0%,transparent 78%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;gap:clamp(2.25rem,1.5rem + 3vw,4rem);align-items:center;
  padding-block:clamp(3.25rem,2rem + 6vw,7rem);
  grid-template-columns:1fr;
}
@media (min-width:60em){.hero__inner{grid-template-columns:1.06fr .94fr}}
/* Interior heroes carry less weight than the homepage hero. */
.hero--compact .hero__inner{padding-block:clamp(2.75rem,1.8rem + 4.5vw,5rem)}
.hero--compact .portrait{max-width:22rem}
.hero h1{
  font-size:var(--fs-hero);color:#fff;margin-bottom:1.15rem;
  letter-spacing:-.026em;line-height:1.05;
}
.hero h1 .accent{color:var(--gold-lt);font-style:italic;font-weight:500}
.hero__lead{font-size:var(--fs-lead);color:var(--on-navy-soft);max-width:48ch;margin-bottom:2.1rem;line-height:1.62}
.hero__note{margin-top:1.6rem;font-size:var(--fs-sm);color:var(--on-navy-soft);display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.5rem}
.hero__note span{display:inline-flex;align-items:center;gap:.5rem}
.hero__note .ico{color:var(--gold-lt);width:17px;height:17px;stroke-width:2.47}

/* ---------- 7. Credibility strip ---------- */
.credibility{background:var(--navy-900);border-top:1px solid rgba(181,145,69,.22);color:var(--on-navy);position:relative;z-index:4}
/* Two lists, not one: the plain statements and the specialist links each wrap among
   themselves, so a link can never be stranded at the end of a row of statements
   (which is what happened to "Construction Specialists" at 1280px and up, while
   "Serving Clients Nationwide" was stranded at the end of the row of links). Both
   lists centre and wrap rather than gridding — a fixed column count would leave a
   ragged orphan row at most viewport widths. */
.credibility .wrap{padding-block:1.4rem}
.credibility ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem 2rem;
}
.credibility ul + ul{margin-top:.9rem}
.credibility li{display:flex;align-items:center;gap:.65rem;font-size:var(--fs-sm);line-height:1.4;color:var(--on-navy)}
.credibility .ico{color:var(--gold-lt);width:20px;height:20px;flex:none;stroke-width:2.1}
.credibility a{
  display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.credibility a:hover{color:var(--gold-lt);border-bottom-color:rgba(217,188,122,.55)}
@media (max-width:35.99em){
  .credibility ul{justify-content:flex-start;gap:.8rem 1.4rem}
  .credibility li{font-size:var(--fs-xs)}
  .credibility .ico{width:18px;height:18px;stroke-width:2.33}
}

/* ---------- 8. Cards ---------- */
.card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,1.15rem + 1vw,2.15rem);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card h3{color:var(--navy-800);margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.62}
.card > p:last-of-type{margin-bottom:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-cool)}
.card--flat{background:var(--ivory);border-color:var(--line-soft)}
.card--flat:hover{transform:none;box-shadow:var(--shadow-sm)}
.section--ivory .card,.section--ivory-2 .card,.section--mist .card,.section--gray .card{background:var(--white)}
/* Opaque, for the same reason as .pains below: rgba(255,255,255,.045) composited
   over --navy-800 is exactly #152841, but a translucent card also lets the masked
   grid of .section--pattern through, so cards under the strong part of the mask
   rendered a different colour from their neighbours in the same row. */
.section--navy .card{background:#152841;border-color:rgba(217,188,122,.2)}
.section--navy .card h3{color:#fff}
.section--navy .card p{color:var(--on-navy-soft)}
.section--navy .card:hover{background:#1c2f47;border-color:rgba(217,188,122,.42)}

.card__icon{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:14px;background:var(--ivory-2);color:var(--navy-800);margin-bottom:1.25rem;
  border:1px solid var(--line-soft);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.card__icon .ico{width:26px;height:26px;stroke-width:1.62}
.card:hover .card__icon{background:var(--navy-800);color:var(--gold-lt);transform:translateY(-2px)}
.card__icon--flame{background:var(--flame-wash);color:var(--flame);border-color:rgba(174,76,24,.18)}
.card:hover .card__icon--flame{background:var(--flame);color:#fff}
.section--navy .card__icon{background:rgba(217,188,122,.13);border-color:rgba(217,188,122,.3);color:var(--gold-lt)}
.section--navy .card:hover .card__icon{background:var(--gold);color:var(--navy-900)}

/* industry cards */
.card--industry{overflow:hidden}
.card--industry::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--flame),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.card--industry:hover::before,.card--industry:focus-within::before{transform:scaleX(1)}
.card--industry:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* card with a photo at the top */
.card--photo{padding:0;overflow:hidden}
.card--photo .card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ivory-2)}
.card--photo .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card--photo:hover .card__media img{transform:scale(1.05)}
.card--photo .card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,40,0) 45%,rgba(6,20,40,.58) 100%);
}
.card--photo .card__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.94);color:var(--navy-800);border-radius:var(--radius-pill);
  padding:.4rem .9rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.card--photo .card__badge .ico{width:16px;height:16px;color:var(--flame);stroke-width:2.62}
.card--photo .card__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,1.1rem + .9vw,1.9rem)}

.card__list{list-style:none;padding:0;margin:1.15rem 0 0;display:grid;gap:.6rem}
.card__list li{position:relative;padding-left:1.7rem;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.card__list li::before{
  content:"";position:absolute;left:.05rem;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--gold-wash);box-shadow:inset 0 0 0 2px var(--gold);
}
.section--navy .card__list li{color:var(--on-navy-soft)}
.section--navy .card__list li::before{box-shadow:inset 0 0 0 2px var(--gold-lt)}

.card__link{
  margin-top:auto;padding-top:1.45rem;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;font-weight:600;font-size:var(--fs-sm);color:var(--navy-800);text-decoration:none;
}
.card__link::after{
  content:"";width:17px;height:17px;flex:none;transition:transform .28s var(--ease);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card:hover .card__link{color:var(--flame)}
.card:hover .card__link::after{transform:translateX(5px)}
.section--navy .card__link{color:var(--gold-lt)}
.section--navy .card:hover .card__link{color:#fff}
/* full-card click target without hiding the link from assistive tech */
.card--industry .card__link::before,.card--photo .card__link::before{content:"";position:absolute;inset:0}

/* outcome cards */
.card--outcome .card__num{
  font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--gold-ink);
  letter-spacing:.16em;margin-bottom:.9rem;display:block;
}
.card--outcome h3{margin-bottom:.45rem}

/* ---------- 9. Pain points ---------- */
.pains{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
/* Opaque rather than rgba(255,255,255,.05) over the navy — the same rendered colour,
   but the masked background grid of .section--pattern no longer bleeds through the
   cards. Through a translucent card the grid showed inside whichever cards happened
   to sit under the strong part of the mask and not the others, so no two cards read
   the same. align-items:center then balances content inside the equal heights the
   grid gives each row, instead of stranding one-line questions at the top of a card
   sized by a two-line neighbour. */
.pains li{
  display:flex;align-items:center;gap:.95rem;
  background:#162942;border:1px solid rgba(217,188,122,.22);
  border-radius:var(--radius-sm);padding:1.15rem 1.35rem;
  font-size:var(--fs-body);color:#fff;line-height:1.52;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.pains li:hover{background:#1f3149;border-color:rgba(217,188,122,.45);transform:translateY(-2px)}
.pains .ico{color:var(--gold-lt);width:21px;height:21px;stroke-width:2}
/* Every word inside a tile is white; the lead-in sentence is distinguished by weight
   alone. Without this it inherited the global `strong{color:var(--ink)}` reset on
   line 119 and rendered as #16202e on the #162942 tile — a 1.12:1 ratio, i.e. the
   highlighted sentence was the one part of the tile you could not read. Do not
   "fix" that by softening the body text to make the bold stand out; the contrast
   here comes from 700 against 400, not from two different colours. Any other
   component that puts a <strong> on a dark ground needs the same explicit override
   (see .checklist, .deliverables, .trust-row, .signature__meta). */
.pains strong{color:#fff;font-weight:700}

/* ---------- 10. Steps ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:clamp(1rem,.7rem + 1.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.steps li{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.85rem 1.5rem 1.6rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--navy-800);color:var(--gold-lt);
  font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1;margin-bottom:1.1rem;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.steps li:hover::before{background:var(--flame);color:#fff}
/* connecting hairline between steps on wide screens */
@media (min-width:64em){
  .steps li:not(:last-child)::after{
    content:"";position:absolute;top:2.4rem;right:calc(-1 * clamp(1rem,.7rem + 1.2vw,1.6rem) - 1px);
    width:clamp(1rem,.7rem + 1.2vw,1.6rem);height:1px;background:var(--line);
  }
}
.steps h3{font-size:1.08rem;margin-bottom:.4rem;color:var(--navy-800)}
.steps p{font-size:var(--fs-sm);color:var(--ink-soft);margin:0;line-height:1.6}
.section--navy .steps li{background:rgba(255,255,255,.045);border-color:rgba(217,188,122,.2)}
.section--navy .steps li::before{background:var(--gold);color:var(--navy-900)}
.section--navy .steps h3{color:#fff}
.section--navy .steps p{color:var(--on-navy-soft)}

/* ---------- 11. Founder ---------- */
.founder{position:relative;display:grid;gap:clamp(2.25rem,1.4rem + 3vw,4rem);align-items:start;grid-template-columns:1fr}
@media (min-width:60em){.founder{grid-template-columns:minmax(0,376px) 1fr}}

.founder__media{position:relative;width:min(100%,376px);margin-inline:auto;isolation:isolate}
/* Both decorations below are absolutely positioned, so they paint above any
   non-positioned in-flow sibling regardless of z-index:0 — which is how the
   ivory panel ended up veiling the certification badges. Same guard as
   .section--pattern > * further down: lift the real content into its own layer. */
.founder__media > *{position:relative;z-index:1}
/* soft background shape behind the portrait */
.founder__media::before{
  content:"";position:absolute;inset:-10% -12% -18% -12%;border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--ivory-2) 0%,rgba(244,239,228,0) 72%);
  z-index:0;
}
.founder__media::after{
  content:"";position:absolute;left:-6%;bottom:-6%;width:58%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(181,145,69,.4);z-index:0;
}
.section--navy .founder__media::before{background:linear-gradient(150deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 72%)}
/* portrait — square source, circle-masked so only the white corner margin is
   clipped. The gold ring sits inside the inscribed circle, so the face is never cut. */
.portrait{position:relative;z-index:1;margin-inline:auto;width:100%}
.portrait::before{
  content:"";position:absolute;inset:-6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(181,145,69,.3) 0%,rgba(181,145,69,0) 68%);
}
.portrait img{
  position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;object-position:center;
  box-shadow:0 30px 70px rgba(4,12,26,.28);
}
.portrait__tag{
  position:relative;z-index:2;margin:-1.4rem auto 0;width:max-content;max-width:100%;
  background:var(--white);color:var(--navy-800);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:.65rem 1.4rem;box-shadow:var(--shadow-md);text-align:center;
}
.portrait__tag strong{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.2}
.portrait__tag span{display:block;font-size:.8125rem;color:var(--flame);font-weight:600;letter-spacing:.05em}

.founder__body > :last-child{margin-bottom:0}
.founder__lead{font-size:var(--fs-lead);color:var(--ink);line-height:1.6}
.section--navy .founder__lead{color:var(--on-navy)}

/* signature */
.signature{margin-top:1.75rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.signature img{width:min(200px,55%);height:auto;opacity:.9}
.section--navy .signature img{filter:brightness(0) invert(1);opacity:.85}
.signature__meta{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.4}
.signature__meta strong{display:block;color:var(--navy-800);font-size:var(--fs-body)}
.section--navy .signature__meta{color:var(--on-navy-soft)}
.section--navy .signature__meta strong{color:#fff}

/* credential chips */
.chips{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.5rem 1rem;font-size:var(--fs-xs);font-weight:600;color:var(--navy-800);
  letter-spacing:.02em;
}
.chips .ico{width:16px;height:16px;color:var(--flame);stroke-width:2.62}
.section--ivory .chips li,.section--ivory-2 .chips li,.section--mist .chips li,.section--gray .chips li{background:var(--white)}
.section--navy .chips li{background:rgba(255,255,255,.06);border-color:rgba(217,188,122,.28);color:#fff}
.section--navy .chips .ico{color:var(--gold-lt)}

/* experience timeline */
.timeline{list-style:none;margin:2rem 0 0;padding:0 0 0 1.85rem;position:relative}
.timeline::before{content:"";position:absolute;left:.4rem;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.section--navy .timeline::before{background:rgba(217,188,122,.3)}
.timeline li{position:relative;padding-bottom:1.6rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-1.85rem;top:.5rem;width:13px;height:13px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold);
}
.section--navy .timeline li::before{background:var(--navy-800);border-color:var(--gold-lt)}
.timeline h3{font-family:var(--sans);font-size:1.0rem;font-weight:600;margin-bottom:.2rem;color:var(--navy-800);letter-spacing:0}
.section--navy .timeline h3{color:#fff}
.timeline .timeline__when{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.3rem}
.section--navy .timeline .timeline__when{color:var(--gold-lt)}
.timeline p{font-size:var(--fs-sm);color:var(--ink-soft);margin:0;line-height:1.6}
.section--navy .timeline p{color:var(--on-navy-soft)}

/* ---------- 12. Booking ---------- */
.booking{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3rem);grid-template-columns:1fr;align-items:start}
@media (min-width:64em){.booking{grid-template-columns:.82fr 1.18fr}}
.booking__panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.1rem,.85rem + .8vw,1.5rem);box-shadow:var(--shadow-md);
}
/* width:100% + no min-width is what keeps the embed inside a 320px viewport */
.calendly-inline-widget{width:100%!important;min-width:0!important;height:760px;border-radius:var(--radius-sm);overflow:hidden}
@media (max-width:48em){.calendly-inline-widget{height:860px}}
.calendly-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  height:760px;border-radius:var(--radius-sm);background:var(--gray-50);
  border:1px dashed var(--line-cool);color:var(--ink-mute);font-size:var(--fs-sm);text-align:center;padding:2rem;
}
@media (max-width:48em){.calendly-placeholder{height:860px}}
.calendly-placeholder .ico{width:34px;height:34px;color:var(--gold);stroke-width:1.24}
.booking__fallback{margin-top:.95rem;font-size:var(--fs-sm);color:var(--ink-soft);text-align:center}

/* "what happens" panel beside the calendar */
.checklist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.checklist li{display:flex;align-items:flex-start;gap:.8rem;font-size:var(--fs-body);line-height:1.55}
.checklist .ico{flex:none;margin-top:.24rem;width:20px;height:20px;color:var(--flame);stroke-width:2.1}
.checklist strong{display:block;color:var(--navy-800)}
.checklist span{color:var(--ink-soft);font-size:var(--fs-sm)}
.section--navy .checklist strong{color:#fff}
.section--navy .checklist span{color:var(--on-navy-soft)}
.section--navy .checklist .ico{color:var(--gold-lt)}

.contact-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.3rem}
/* A fixed icon column rather than inline-flex: the three rows (phone, email,
   booking) then share one text edge instead of each anchor sizing to its own
   content, and the 44px tap target spans the row on a phone. overflow-wrap keeps
   the long address on a clean break rather than mid-word. */
.contact-list a{
  display:grid;grid-template-columns:19px 1fr;align-items:center;gap:.7rem;min-height:44px;
  color:var(--navy-800);text-decoration:none;font-weight:500;overflow-wrap:break-word;
}
.contact-list a:hover{color:var(--flame);text-decoration:underline}
.contact-list .ico{color:var(--gold);width:19px;height:19px;stroke-width:2.21}
.section--navy .contact-list a{color:#fff}
.section--navy .contact-list a:hover{color:var(--gold-lt)}
.section--navy .contact-list .ico{color:var(--gold-lt)}

/* ---------- 13. CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;color:var(--on-navy);
  background:linear-gradient(150deg,var(--navy-700) 0%,var(--navy-800) 55%,var(--navy-900) 100%);
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(181,145,69,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(181,145,69,.08) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(60% 80% at 50% 0%,#000,transparent 75%);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta-band p{color:var(--on-navy-soft);max-width:58ch;margin-inline:auto;font-size:var(--fs-lead)}
.cta-band .btn-row{margin-top:2.1rem}
.cta-band__note{margin-top:1.4rem;font-size:var(--fs-sm);color:var(--on-navy-soft);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}
.cta-band__note span{display:inline-flex;align-items:center;gap:.45rem}
.cta-band__note .ico{width:16px;height:16px;color:var(--gold-lt);stroke-width:2.62}

/* ---------- 14. Media + figures ---------- */
.figure{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--ivory-2);
  box-shadow:var(--shadow-md);isolation:isolate}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.figure:hover img{transform:scale(1.035)}
.figure--ring{box-shadow:var(--shadow-md),0 0 0 1px var(--line)}
.figure--wide{aspect-ratio:16/9}
.figure--tall{aspect-ratio:4/5}
.figure--square{aspect-ratio:1}
.figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.35rem 1.5rem;
  background:linear-gradient(180deg,rgba(6,20,40,0),rgba(6,20,40,.85));
  color:#fff;font-size:var(--fs-sm);line-height:1.45;
}
/* offset gold frame behind a feature image */
.figure-frame{position:relative;isolation:isolate}
.figure-frame::before{
  content:"";position:absolute;z-index:0;inset:1.5rem -1.5rem -1.5rem 1.5rem;
  border:1px solid var(--gold);border-radius:var(--radius-lg);opacity:.55;
}
@media (max-width:47.9375em){.figure-frame::before{inset:1rem -.75rem -1rem .75rem}}
.figure-frame > .figure{position:relative;z-index:1}

/* full-bleed photographic band with navy scrim */
.band{position:relative;overflow:hidden;color:var(--on-navy);background:var(--navy-900);isolation:isolate}
.band__bg{position:absolute;inset:0;z-index:0}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.72)}
.band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,20,40,.94) 6%,rgba(6,20,40,.74) 55%,rgba(6,20,40,.86) 100%)}
.band .wrap{position:relative;z-index:1}
.band h2,.band h3{color:#fff}
.band p{color:var(--on-navy-soft)}
.band .cta-band__note{color:var(--on-navy-soft)}
.band .cta-band__note .ico{color:var(--gold-lt)}
.band .link-arrow{color:var(--gold-lt)}
.band .link-arrow:hover{color:#fff}

/* ---------- 15. Visual proof / report mockups ---------- */
.mockup{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius);overflow:hidden;background:var(--white);
  border:1px solid var(--line-cool);box-shadow:var(--shadow-md);
}
.mockup__bar{
  display:flex;align-items:center;gap:.45rem;padding:.7rem .95rem;
  background:var(--gray-50);border-bottom:1px solid var(--line-cool);
}
.mockup__dots{display:flex;gap:.35rem}
.mockup__dots i{width:9px;height:9px;border-radius:50%;background:#d6dbe3;display:block}
.mockup__title{font-size:var(--fs-xs);font-weight:600;color:var(--ink-mute);letter-spacing:.04em;margin-left:.5rem}
.mockup__body{padding:0;background:var(--white);flex:1 1 auto;
  display:flex;align-items:center;justify-content:center}
.mockup__body svg,.mockup__body img{display:block;width:100%;height:auto}
.mockup--float{transform:translateY(0)}
/* Report previews are dense tables. Between the tablet and desktop breakpoints
   auto-fit lands on two columns and leaves the third card orphaned on a row of
   its own below the pair — which reads as a broken card rather than a layout.
   Three across, or one at full width; never two plus a remainder. */
@media (max-width:63.99em){.grid--mockups{grid-template-columns:1fr}}

@media (min-width:60em){.mockup--float{box-shadow:var(--shadow-lg)}}

/* hero-side proof composition — the mockup floats over the navy field */
.hero__proof{position:relative;z-index:2}
@media (min-width:60em){
  .hero__proof .mockup{transform:perspective(1600px) rotateY(-3.5deg) rotateX(1.2deg)}
  .hero__proof .mockup::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  }
}
.hero .proof-note{color:var(--on-navy-soft);text-align:left}
@media (min-width:60em){.hero .proof-note{text-align:right}}

/* small caption under a proof visual */
.proof-note{margin-top:.9rem;font-size:var(--fs-xs);color:var(--ink-mute);text-align:center;line-height:1.5}
.section--navy .proof-note,.band .proof-note{color:var(--on-navy-soft)}
/* A note carrying an icon is a row, not centred inline text: inside a centred
   paragraph the icon strands itself mid-line as soon as the sentence wraps, and the
   text no longer shares an edge with the block above it. */
.proof-note:has(.ico){display:flex;align-items:flex-start;justify-content:center;gap:.5rem;text-align:left}
.proof-note:has(.ico) .ico{margin-top:.15em}
/* A disclaimer that follows a full-width list belongs on that list's left edge,
   not centred under it. */
.proof-note--start{text-align:left;justify-content:flex-start;margin-inline:0}

/* ---------- 16. Trust, metrics, certification badges ---------- */
/* Five stats never divided evenly into the column count auto-fit picked: at every
   desktop width five 12rem tracks plus their gaps overflow the 1160px wrap by a
   few pixels, so the fifth ("100% Virtual delivery") dropped onto a row of its own,
   left-aligned under column one. Column counts are explicit instead. Above the
   one-row breakpoint auto-flow:column puts every stat on a single row whatever the
   count, so the four-stat list on /about/ stays even too; below it the grid is two
   columns and an odd last item spans both rather than stranding itself. */
.metrics{
  list-style:none;padding:0;margin:0;display:grid;gap:clamp(1.25rem,.9rem + 1.4vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:30em){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metrics li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:64em){
  .metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
  .metrics li:last-child:nth-child(odd){grid-column:auto}
}
.metrics li{text-align:center;position:relative;padding:.25rem .5rem}
@media (min-width:64em){
  .metrics li:not(:last-child)::after{
    content:"";position:absolute;right:calc(-1 * clamp(.625rem,.45rem + .7vw,1rem));top:12%;bottom:12%;
    width:1px;background:var(--line);
  }
  .section--navy .metrics li:not(:last-child)::after,.band .metrics li:not(:last-child)::after{background:rgba(217,188,122,.28)}
}
.metrics .metric__value{
  display:block;font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(2.35rem,1.8rem + 2.2vw,3.5rem);color:var(--navy-800);letter-spacing:-.02em;
}
.section--navy .metrics .metric__value,.band .metrics .metric__value{color:var(--gold-lt)}
.metrics .metric__label{display:block;margin-top:.7rem;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.45}
.section--navy .metrics .metric__label,.band .metrics .metric__label{color:var(--on-navy-soft)}


/* small trust points row */
.trust-row{list-style:none;padding:0;margin:0;display:grid;gap:1rem 1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.trust-row li{display:flex;align-items:flex-start;gap:.75rem;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-soft)}
.trust-row .ico{flex:none;margin-top:.15rem;width:20px;height:20px;color:var(--flame);stroke-width:2.1}
.trust-row strong{display:block;color:var(--navy-800);font-size:var(--fs-body);margin-bottom:.1rem}
.section--navy .trust-row li,.band .trust-row li{color:var(--on-navy-soft)}
.section--navy .trust-row strong,.band .trust-row strong{color:#fff}
.section--navy .trust-row .ico,.band .trust-row .ico{color:var(--gold-lt)}

/* ---------- 17. Social proof ---------- */
.testimonial{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);height:100%;display:flex;flex-direction:column;
}
.testimonial__mark{color:var(--gold);opacity:.4;margin-bottom:1rem}
.testimonial__mark .ico{width:32px;height:32px;stroke-width:1.31}
.testimonial blockquote{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--navy-800)}
.testimonial figcaption{margin-top:auto;padding-top:1.5rem;display:flex;align-items:center;gap:.85rem;
  font-size:var(--fs-sm);color:var(--ink-soft)}
.testimonial figcaption strong{display:block;color:var(--navy-800)}
.testimonial__avatar{width:44px;height:44px;border-radius:50%;background:var(--ivory-2);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--gold-ink);font-weight:600}
.stars{display:flex;gap:.15rem;color:var(--gold);margin-bottom:.9rem}
.stars .ico{width:17px;height:17px;fill:currentColor;stroke:none;stroke-width:2.47}

/* placeholder scaffolding — visibly marked, never dressed up as real proof */
.placeholder-note{
  display:flex;align-items:flex-start;gap:.75rem;margin-top:1.5rem;padding:1rem 1.25rem;
  border:1px dashed var(--line-cool);border-radius:var(--radius-sm);background:var(--gray-50);
  font-size:var(--fs-sm);color:var(--ink-mute);line-height:1.55;
}
.placeholder-note .ico{flex:none;margin-top:.15rem;width:19px;height:19px;color:var(--gold-ink);stroke-width:2.21}
.logo-wall{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.logo-wall li{
  display:flex;align-items:center;justify-content:center;min-height:78px;padding:1rem;
  border:1px dashed var(--line-cool);border-radius:var(--radius-sm);background:var(--white);
  color:var(--ink-mute);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;text-align:center;
}

/* before / after */
.ba{display:grid;gap:clamp(1rem,.7rem + 1.2vw,1.75rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.ba__col{border-radius:var(--radius);padding:clamp(1.4rem,1.1rem + .9vw,1.9rem);border:1px solid var(--line)}
.ba__col--before{background:var(--gray-50)}
.ba__col--after{background:var(--white);border-color:rgba(174,76,24,.28);box-shadow:var(--shadow-sm)}
.ba__tag{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.ba__col--before .ba__tag{color:var(--ink-mute)}
.ba__col--after .ba__tag{color:var(--flame)}
.ba ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.ba li{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.ba .ico{flex:none;margin-top:.2rem;width:18px;height:18px;stroke-width:2.33}
.ba__col--before .ico{color:var(--ink-mute)}
.ba__col--after .ico{color:var(--flame)}

/* ---------- 18. FAQ / disclaimer / prose ---------- */
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.25rem 1.35rem;margin-bottom:.8rem;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.faq details[open]{border-color:rgba(174,76,24,.4);box-shadow:var(--shadow-sm)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  min-height:52px;padding:.95rem 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:600;color:var(--navy-800);line-height:1.5;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:20px;height:20px;margin-top:.15rem;background:var(--flame);
  transition:transform .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--flame)}
.faq details > p{padding:0 0 1.15rem;margin:0;color:var(--ink-soft);font-size:var(--fs-body);max-width:none}
.faq details > p + p{padding-top:0}

.disclaimer{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:1.25rem 1.5rem;margin-top:2.25rem;
}
.disclaimer p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);max-width:none}
.section--navy .disclaimer{background:rgba(255,255,255,.05);border-color:rgba(217,188,122,.25);border-left-color:var(--gold)}
.section--navy .disclaimer p{color:var(--on-navy-soft)}

.prose h2{margin-top:2.75rem;font-size:clamp(1.4rem,1.22rem + .8vw,1.85rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.85rem;font-family:var(--sans);font-size:1.05rem;font-weight:600}
.prose ul{margin:0 0 1.1rem;padding-left:1.3rem}
.prose li{margin-bottom:.5rem;color:var(--ink-soft)}
.prose p{color:var(--ink-soft)}
.prose a{color:var(--navy-700);font-weight:500}

/* ---------- 19. Breadcrumbs ---------- */
.crumbs{padding-block:1rem;border-bottom:1px solid var(--line-soft);background:var(--white)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:var(--fs-sm)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--flame);text-decoration:underline}
.crumbs li + li::before{content:"/";margin-right:.4rem;color:var(--gold);opacity:.7}
.crumbs [aria-current]{color:var(--navy-800);font-weight:600}

/* ---------- 20. Footer ---------- */
.site-footer{background:var(--ivory);border-top:1px solid var(--line)}
.site-footer__news{
  display:grid;gap:1.4rem clamp(2rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2rem,1.5rem + 2vw,3rem);border-bottom:1px solid var(--line);
}
@media (min-width:56em){.site-footer__news{grid-template-columns:1fr 1fr}}
.site-footer__news h2{
  font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;text-transform:none;
  letter-spacing:-.012em;color:var(--navy-800);margin-bottom:.45rem;
}
.site-footer__news > div > p{font-size:var(--fs-sm);color:var(--ink-soft);margin:0;max-width:46ch;line-height:1.6}

/* resource centre — a full-width strip above the link columns, so the six
   explainer links get room to breathe instead of being squeezed into a column */
.footer-resources{padding-block:clamp(2.25rem,1.7rem + 2vw,3.25rem);border-bottom:1px solid var(--line-soft)}
.footer-resources h2{
  font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;text-transform:none;
  letter-spacing:-.012em;color:var(--navy-800);margin-bottom:.4rem;
}
.footer-resources__lead{font-size:var(--fs-sm);color:var(--ink-soft);margin:0 0 1.6rem;max-width:56ch;line-height:1.6}
.footer-resources ul{
  list-style:none;margin:0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));
}
.footer-resources a{
  display:flex;align-items:flex-start;gap:.8rem;min-height:48px;height:100%;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);color:var(--navy-800);text-decoration:none;
  font-size:var(--fs-sm);font-weight:600;line-height:1.35;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.footer-resources a:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.footer-resources .ico{width:20px;height:20px;flex:none;color:var(--flame);margin-top:.1rem;stroke-width:2.1}
.footer-resources small{display:block;margin-top:.2rem;font-weight:400;font-size:var(--fs-xs);color:var(--ink-mute)}
/* Explicit track counts rather than repeat(auto-fit,minmax(13.5rem,1fr)). Auto-fit
   fitted only four tracks into the 1200px content box at 1280 and up, so the fifth
   column (Contact) dropped onto a row of its own with three empty cells beside it —
   the footer read as unaligned however tidy each column was internally. 1 / 2 / 4
   tracks with the brand block spanning the full row is the only arrangement that
   leaves no orphan at any width: 4 link columns in one row from 64em, 2 + 2 below
   that, stacked on a phone. */
.site-footer__grid{
  display:grid;gap:clamp(2rem,1.3rem + 2.4vw,3rem);padding-block:clamp(3rem,2.2rem + 3vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:40em){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The last track is wider on purpose: Contact holds the email address, which is the
   longest unbreakable string in the footer. On four equal tracks the 1024px content
   box gave it a 175px text column against a 177px address, so it broke a second time
   and left a one-character fragment on a third line. 1.3fr buys that column ~40px and
   the address settles on two clean lines at every width from 64em up. */
@media (min-width:64em){.site-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr)) 1.3fr}}
.site-footer__brand{grid-column:1/-1}
/* No top margin, because there is no longer a logo above it. The brand block now
   leads with an <h2> styled exactly like INDUSTRIES / SERVICES / COMPANY / CONTACT,
   so it sits on the grid like every other block — with the vertical lockup here the
   paragraph started ~150px below the sibling headings. The company name has to stay
   legible somewhere in the footer, so it took the logo's job rather than being
   dropped with it. */
.site-footer__brand p{margin-top:0;font-size:var(--fs-sm);color:var(--ink-soft);max-width:36ch}
.site-footer__social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem;list-style:none;padding:0}
.site-footer__social li a{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;
  border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--navy-800);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),background-color .25s var(--ease);
}
.site-footer__social li a:hover{color:#fff;background:var(--navy-800);border-color:var(--navy-800);transform:translateY(-2px)}
.site-footer__social .ico{width:19px;height:19px;stroke-width:2.21}
.site-footer h2{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a,.site-footer address a{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  color:var(--navy-800);text-decoration:none;font-size:var(--fs-sm);word-break:break-word;
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.site-footer li a:hover,.site-footer address a:hover{color:var(--flame);text-decoration:underline}
.site-footer address{font-style:normal;display:grid}
.site-footer address .addr{font-size:var(--fs-sm);color:var(--ink-soft);padding:.35rem 0;line-height:1.5}
.site-footer .ico{color:var(--gold);width:17px;height:17px;flex:none;stroke-width:2.47}

/* newsletter */
.newsletter{margin-top:.35rem}
.newsletter p{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:.9rem;max-width:32ch}
.newsletter__row{display:flex;flex-wrap:wrap;gap:.6rem}
.newsletter label{font-size:var(--fs-xs);font-weight:600;color:var(--navy-800)}
.newsletter input[type="email"]{
  flex:1 1 11rem;min-width:0;min-height:48px;padding:.7rem 1rem;
  font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.newsletter input[type="email"]::placeholder{color:var(--ink-mute)}
.newsletter input[type="email"]:focus-visible{outline:3px solid var(--flame);outline-offset:2px;border-color:var(--flame)}
.newsletter button{flex:0 0 auto}
.newsletter__fine{margin-top:.7rem;font-size:var(--fs-xs);color:var(--ink-mute);line-height:1.5}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.site-footer__legal{background:var(--navy-900);color:var(--on-navy-soft)}
.site-footer__legal .wrap{
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:center;justify-content:space-between;
  padding-block:1.15rem;font-size:var(--fs-sm);text-align:left;
}
.site-footer__legal p{margin:0;max-width:none}
.site-footer__legal a{color:var(--on-navy);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-footer__legal a:hover{color:var(--gold-lt);text-decoration:underline}
.site-footer__legal nav{display:flex;flex-wrap:wrap;gap:0 1.35rem}
@media (max-width:36em){.site-footer__legal .wrap{justify-content:flex-start}}

/* ---------- 21. Conversion furniture ----------
   Scroll progress, the floating book button, and the contact helper. All three are
   fixed-position, all three stay hidden until the visitor has scrolled past the hero,
   and all three disappear while the booking panel is on screen so the page never
   argues with itself. Every one of them is JS-gated: with JS off they never render. */

/* thin reading-progress rail, pinned above the header */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:transparent;pointer-events:none}
.progress span{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--flame-lt));
  transition:transform .12s linear;
}
.progress{display:none}
.js .progress{display:block}

/* floating primary CTA */
.sticky-cta{
  position:fixed;z-index:115;left:1.5rem;bottom:1.5rem;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:999px;
  background:var(--flame);color:#fff;text-decoration:none;font-weight:600;font-size:var(--fs-sm);
  box-shadow:0 10px 30px rgba(6,20,40,.28),0 2px 6px rgba(6,20,40,.18);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s,background-color .2s;
}
.sticky-cta[data-show="true"]{opacity:1;visibility:visible;transform:none}
.sticky-cta:hover{background:var(--flame-dk);color:#fff}
.sticky-cta .ico{width:18px;height:18px;flex:none;stroke-width:2.33}
.sticky-cta__short{display:none}
.sticky-cta{display:none}
.js .sticky-cta{display:inline-flex}

/* contact helper — three ways to reach a human, no chat robot */
.helper{position:fixed;z-index:116;right:1.5rem;bottom:1.5rem;display:flex;flex-direction:column;
  align-items:flex-end;gap:.75rem;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.helper[data-show="true"]{opacity:1;visibility:visible;transform:none}
.helper{display:none}
.js .helper{display:flex}
.helper__toggle{
  display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.7rem 1.25rem;
  border:1px solid rgba(181,145,69,.4);border-radius:999px;cursor:pointer;
  background:var(--navy-800);color:#fff;font:inherit;font-size:var(--fs-sm);font-weight:600;
  box-shadow:0 10px 30px rgba(6,20,40,.26);transition:background-color .2s,border-color .2s;
}
.helper__toggle:hover{background:var(--navy-700);border-color:var(--gold)}
.helper__toggle .ico{width:19px;height:19px;color:var(--gold-lt);stroke-width:2.21}
.helper__panel{
  /* 21rem, not 19rem: it gives the text column 233px, and the email address needs
     222px. At 19rem it had 201px and wrapped on every screen size. */
  width:min(21rem,calc(100vw - 3rem));background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.35rem;
  /* a short landscape phone would otherwise push the panel off the top of the screen */
  max-height:calc(100vh - 9rem);overflow-y:auto;overscroll-behavior:contain;
}
.helper__panel[hidden]{display:none}
.helper__panel h2{font-family:var(--serif);font-size:1.1rem;color:var(--navy-800);margin:0 0 .3rem}
.helper__panel > p{margin:0 0 1rem;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}
/* Uniform rows. The email address is 222px of unbreakable text and the text column
   is only 201px in a 19rem panel, so it wraps to a second line — and it will wrap
   on a narrow phone whatever the desktop width is. The old rule forced all three
   cards to equal height and centred each one's content, so the taller email card
   pushed "Email us" 11px above "Call now" and "Book a call" and none of the three
   labels lined up. Instead: two tracks per card, content anchored to the top, and
   no forced equal height. Every label and every icon now sits at the same offset
   from its card's top edge no matter how many lines the detail below it takes. */
.helper__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.helper__list a{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
  column-gap:.7rem;min-height:48px;padding:.7rem .8rem;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ivory);
  color:var(--navy-800);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  transition:border-color .2s,background-color .2s,transform .2s var(--ease);
}
.helper__list a:hover{border-color:var(--gold);background:var(--white);transform:translateX(2px)}
/* nudged down so the glyph optically centres on the label's cap height rather than
   its line box */
.helper__list .ico{width:19px;height:19px;flex:none;color:var(--flame);stroke-width:2.21;margin-top:.15rem}
.helper__list small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-mute);overflow-wrap:anywhere}
.helper__fine{margin:.9rem 0 0;font-size:var(--fs-xs);color:var(--ink-mute);line-height:1.5}

@media (max-width:47.9375em){
  .sticky-cta{left:.75rem;right:.75rem;bottom:.75rem;bottom:max(.75rem,env(safe-area-inset-bottom));
    justify-content:center;padding:.95rem 1.25rem;font-size:var(--fs-body)}
  .sticky-cta__long{display:none}
  .sticky-cta__short{display:inline}
  .helper{right:.75rem;bottom:5.5rem;bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .helper__toggle span{display:none}
  .helper__toggle{padding:.85rem;border-radius:50%;min-width:48px;justify-content:center}
  .helper__toggle .ico{width:22px;height:22px;stroke-width:1.91}
  body[data-sticky="true"]{padding-bottom:4.5rem}
}

/* ---------- 22. Assurance, flow, comparison ---------- */

/* the objection-shrinking row that sits under a CTA */
.assure{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.assure li{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);color:var(--ink-soft)}
.assure .ico{width:17px;height:17px;flex:none;color:var(--flame);stroke-width:2.47}
.on-navy .assure li,.section--navy .assure li,.band .assure li,.cta-band .assure li{color:var(--on-navy-soft)}
.on-navy .assure .ico,.section--navy .assure .ico,.band .assure .ico,.cta-band .assure .ico{color:var(--gold-lt)}
.assure--center{justify-content:center}

/* one-line answer to "why should I click?" */
.cta-why{margin:.85rem 0 0;font-size:var(--fs-sm);color:var(--ink-soft)}
.on-navy .cta-why,.section--navy .cta-why,.band .cta-why,.cta-band .cta-why{color:var(--on-navy-soft)}

/* horizontal process flow with connectors */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.flow li{position:relative;text-align:center;padding:1.6rem 1rem 1.4rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.flow li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.flow__mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:var(--ivory-2);color:var(--gold-ink);margin-bottom:.9rem;
  border:1px solid rgba(181,145,69,.3);transition:background-color .25s,color .25s}
.flow li:hover .flow__mark{background:var(--flame);color:#fff;border-color:transparent}
.flow__mark .ico{width:24px;height:24px;stroke-width:1.75}
.flow h3{font-size:1.02rem;margin:0 0 .3rem;color:var(--navy-800)}
.flow p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}
.flow__step{display:block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;margin-bottom:.45rem}
.flow li + li::before{
  content:"";position:absolute;left:-.72rem;top:50%;width:.75rem;height:1px;background:var(--line);
}
@media (max-width:47.9375em){.flow li + li::before{left:50%;top:-.72rem;width:1px;height:.75rem}}
/* between one column and five the row wraps ragged, and the connector would
   dangle off the start of the second row */
@media (min-width:48em) and (max-width:63.99em){.flow li + li::before{display:none}}
.section--ivory .flow li,.section--mist .flow li,.section--gray .flow li,.section--ivory-2 .flow li{background:var(--white)}

/* neutral third column for the before/after component */
.ba__col--plain{background:var(--white)}
.ba__col--plain .ba__tag{color:var(--gold-ink)}
.ba__col--plain .ico{color:var(--gold)}

/* deliverables — a dense two-column tick list */
.deliverables{list-style:none;margin:0;padding:0;display:grid;gap:.7rem 1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.deliverables li{display:flex;align-items:flex-start;gap:.65rem;font-size:var(--fs-sm);
  color:var(--ink-soft);line-height:1.5}
.deliverables .ico{flex:none;margin-top:.15rem;width:18px;height:18px;color:var(--flame);stroke-width:2.33}
.deliverables strong{color:var(--navy-800);font-weight:600}
.section--navy .deliverables li,.band .deliverables li{color:var(--on-navy-soft)}
.section--navy .deliverables strong,.band .deliverables strong{color:#fff}
.section--navy .deliverables .ico,.band .deliverables .ico{color:var(--gold-lt)}
/* roomier variant for long, sentence-length items */
.deliverables--roomy{gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.deliverables--roomy li{font-size:var(--fs-body);line-height:1.6}

/* ---------- 23. Quiet background texture ----------
   Almost invisible on purpose: enough to stop a flat panel reading as empty,
   never enough to compete with type. */
.section--pattern{position:relative;isolation:isolate}
.section--pattern > *{position:relative;z-index:1}
.section--pattern::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(18,48,90,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(18,48,90,.055) 1px,transparent 1px);
  background-size:52px 52px;
  /* An eased ramp, not one linear stop: a single #000 -> transparent fade over this
     distance contours into visible rings, and the grid stopped along a discernible
     elliptical edge. The extra stops make the falloff read as depth instead. */
  -webkit-mask-image:radial-gradient(ellipse 74% 68% at 50% 0%,#000 0%,rgba(0,0,0,.88) 28%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.12) 74%,transparent 86%);
          mask-image:radial-gradient(ellipse 74% 68% at 50% 0%,#000 0%,rgba(0,0,0,.88) 28%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.12) 74%,transparent 86%);
}
.section--pattern-rule::before{
  background-image:repeating-linear-gradient(90deg,rgba(181,145,69,.14) 0 1px,transparent 1px 34px);
  background-size:auto;opacity:.7;
  /* same eased falloff as above; these rules are the higher-contrast of the two
     patterns, so a linear fade banded most visibly here */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.2) 62%,transparent 78%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.2) 62%,transparent 78%);
}
.section--navy.section--pattern::before,.band.section--pattern::before{
  background-image:linear-gradient(rgba(217,188,122,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(217,188,122,.09) 1px,transparent 1px);
}

/* ---------- 24. Campaign landing page ----------
   One job on this page, so the header loses the nav and keeps only the logo,
   a phone number, and the booking button. */
.site-header--lp .site-header__inner{gap:1rem}
.site-header--lp .site-header__actions{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.site-header--lp .site-header__tel{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .35rem;
  color:var(--navy-800);text-decoration:none;font-size:var(--fs-sm);font-weight:600;
}
.site-header--lp .site-header__tel:hover{color:var(--flame)}
.site-header--lp .site-header__tel .ico{width:18px;height:18px;color:var(--flame);stroke-width:2.33}
@media (max-width:36em){
  .site-header--lp .site-header__tel span{display:none}
  .site-header--lp .site-header__tel{padding:0 .5rem}
}

/* three industries, three doors */
.trio{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.trio a{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;height:100%;
  padding:1.85rem 1.25rem;text-align:center;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--navy-800);font-weight:600;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.trio a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.trio__mark{
  display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;
  background:var(--ivory-2);color:var(--gold-ink);border:1px solid rgba(181,145,69,.3);
  transition:background-color .25s,color .25s,border-color .25s;
}
.trio a:hover .trio__mark{background:var(--flame);color:#fff;border-color:transparent}
.trio__mark .ico{width:26px;height:26px;stroke-width:1.62}
.trio small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}

/* ---------- 25. Utilities + motion ---------- */
.u-center{text-align:center}
.u-mt-sm{margin-top:1rem}
.u-mt{margin-top:1.75rem}
.u-mt-lg{margin-top:clamp(2rem,1.5rem + 1.6vw,3.25rem)}
.u-measure{max-width:62ch}
.u-measure-center{max-width:62ch;margin-inline:auto}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);border:0;margin:0}
.lede{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.62}

/* restrained motion — fade-up on reveal, nothing louder */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal[data-delay="1"].is-visible{transition-delay:.07s}
.js .reveal[data-delay="2"].is-visible{transition-delay:.14s}
.js .reveal[data-delay="3"].is-visible{transition-delay:.21s}

/* delight, kept to two gestures: the hero settles, and ticks land one after another */
/* the end frame keeps the 1.04 bleed the static rule relies on — never scale to 1 */
@keyframes settle{from{transform:scale(1.085)}to{transform:scale(1.04)}}
.js .hero__bg img{animation:settle 14s var(--ease) both}
@keyframes tick-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.js .checklist.reveal .ico,.js .deliverables.reveal .ico{opacity:0}
.js .checklist.reveal.is-visible .ico,.js .deliverables.reveal.is-visible .ico{
  animation:tick-in .42s var(--ease) both;
}
.js .checklist.reveal.is-visible li:nth-child(2) .ico,
.js .deliverables.reveal.is-visible li:nth-child(2) .ico{animation-delay:.07s}
.js .checklist.reveal.is-visible li:nth-child(3) .ico,
.js .deliverables.reveal.is-visible li:nth-child(3) .ico{animation-delay:.14s}
.js .checklist.reveal.is-visible li:nth-child(4) .ico,
.js .deliverables.reveal.is-visible li:nth-child(4) .ico{animation-delay:.21s}
.js .checklist.reveal.is-visible li:nth-child(5) .ico,
.js .deliverables.reveal.is-visible li:nth-child(5) .ico{animation-delay:.28s}
.js .checklist.reveal.is-visible li:nth-child(n+6) .ico,
.js .deliverables.reveal.is-visible li:nth-child(n+6) .ico{animation-delay:.35s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .figure:hover img,.card--photo:hover .card__media img{transform:none}
  .js .hero__bg img{animation:none}
  .js .checklist.reveal .ico,.js .deliverables.reveal .ico{opacity:1;animation:none}
}

/* print — plain, readable, no dark slabs */
@media print{
  .site-header,.nav,.nav-toggle,.skip-link,.cta-band,.calendly-inline-widget,
  .progress,.sticky-cta,.helper{display:none!important}
  body{padding-top:0;padding-bottom:0;color:#000;background:#fff}
  .hero,.section--navy,.band,.credibility{background:#fff!important;color:#000!important}
  .hero h1,.section--navy h2,.band h2{color:#000!important}
  .section--pattern::before{display:none!important}
}

/* long strings (email addresses) must never force a horizontal scrollbar at 320px */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}