/* ==========================================================================
   Countrydata Ltd — stylesheet
   Built from the exact type sizes, colours and stroke-weights extracted
   from CAST-IN-STONE-LAYOUT.pdf's own vector data (not pixel estimates).
   1pt in the source layout = 1px in this stylesheet's reference (1684px
   wide) layout; every size below is expressed in rem off a 16px root, and
   the root scales fluidly with the viewport (see "Fluid type scale").
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: "Century Gothic";
  src: url("../assets/fonts/century-gothic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../assets/fonts/century-gothic-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Linotype";
  src: url("../assets/fonts/palatino-linotype.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Linotype";
  src: url("../assets/fonts/palatino-linotype-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Linotype";
  src: url("../assets/fonts/palatino-linotype-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Linotype";
  src: url("../assets/fonts/palatino-linotype-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Design tokens -------------------------------------------------------
   Colours and the 7 underline/box stroke-weights below were read directly
   out of the PDF's vector objects, so these are exact, not approximations. */
:root {
  --navy: #406187;
  --terracotta: #8D4A1D;
  --black: #000000;
  --white: #ffffff;
  --header-scroll-bg: #EAEAEA;
  --contact-bg: #DDDDDD;
  --hairline: 1px; /* source is 0.75pt; 1px is the crisp web equivalent */

  --font-display: "Century Gothic", "Century Gothic Fallback", Futura, "Trebuchet MS", sans-serif;
  --font-nav: "Palatino Linotype", "Palatino Linotype Fallback", Palatino, Georgia, serif;

  --container-max: 105.25rem; /* 1684px reference layout width */
  --gutter: 6.444rem; /* 103.1pt, the page's general content margin */
  --header-gutter: 11.8rem; /* 188.86pt, exact logo/search margin */

  --header-h: 5.4125rem; /* 86.6pt, exact */
}

/* ---- Fluid type scale ----------------------------------------------------
   Per instruction, this page is a single fixed composition (105.25rem /
   1684px reference width) that must not reflow or restructure at any
   size — every rem value in this file reproduces the layout's exact
   measurements at that reference width. To honour that at every viewport,
   the root font-size itself scales in direct proportion to viewport width,
   so the entire page — including images, gaps and columns — shrinks and
   grows as one uniform unit and always fills the browser edge to edge,
   the way a photocopy or a PDF page does when zoomed, rather than
   staying fixed-size and centering with empty margins on wider screens.

   This uses a JS-measured --viewport-w custom property (see main.js)
   rather than the raw 100vw unit. In most desktop browsers a visible
   (non-overlay) scrollbar is subtracted from the page's actual visible
   width but NOT from 100vw, which silently makes 100vw wider than what
   is really on screen — on a page this tall, that mismatch was making
   the whole page render smaller than intended. Measuring the real
   visible width in JS avoids that entirely. The floor/ceiling below are
   purely a technical safety net for pathological viewport widths, and
   the vw-based fallback only applies before JS has run once. */
html {
  font-size: clamp(4px, calc(var(--viewport-w, 100vw) / 105.25), 40px);
}

/* ---- Reset / base --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

[id] { scroll-margin-top: var(--header-h); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Visible keyboard focus throughout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Header — spec 2.1–2.5
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  transition: background-color 0.25s ease;
}
.site-header.is-scrolled {
  background: var(--header-scroll-bg);
}
.header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--header-gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.logo {
  flex: 0 0 auto;
  display: block;
}
.logo img {
  height: 2.569rem; /* 41.11pt, exact */
  width: auto;
}

.main-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.625rem);
}
.main-nav > ul > li {
  position: relative;
}
.main-nav a,
.nav-services-btn {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.375rem; /* 22pt */
  color: var(--navy);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.nav-caret {
  width: 0.7em;
  height: 0.7em;
  display: inline-block;
}

/* Services dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--header-scroll-bg);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 1.5rem rgba(20, 30, 45, 0.12);
  min-width: 18rem;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown.force-hide {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(0.5rem) !important;
  transition: none !important;
}
.dropdown a {
  position: relative;
  display: block;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  white-space: nowrap;
}
.dropdown li:not(:last-child) a::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  border-bottom: 1px solid var(--header-scroll-bg);
}
.dropdown a:hover,
.dropdown a:focus-visible {
  background: var(--header-scroll-bg);
}

.search-toggle {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0.5rem;
  display: inline-flex;
}
.search-toggle img { width: auto; height: 1.5rem; }

.search-panel {
  border-top: var(--hairline) solid var(--header-scroll-bg);
  background: var(--white);
}
.search-panel[hidden] { display: none; }
.search-panel-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.25rem var(--header-gutter);
}
.search-panel input[type="search"] {
  width: 100%;
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
  border: var(--hairline) solid var(--black);
  color: var(--black);
}
.search-panel input[type="search"]:focus {
  outline: none;
  border-color: var(--terracotta);
}
.search-results {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.search-results a {
  padding: 0.5rem 0.25rem;
  border-bottom: var(--hairline) solid var(--header-scroll-bg);
}
.search-results a:hover,
.search-results a:focus-visible { color: var(--terracotta); }
.search-results mark {
  background: #FCE9D8;
  color: inherit;
}
.search-empty {
  color: #666;
  font-size: 1rem;
  padding: 0.5rem 0.25rem;
}


/* ==========================================================================
   Hero — spec section 3
   ========================================================================== */
.hero {
  position: relative;
  min-height: 34.821rem; /* 557.14pt, exact */
  display: flex;
  overflow: hidden;
  /* Instant blurred preview, embedded directly as inline data so it paints with
     zero network requests — replaces the flat #2b2b2b "black glitch" that showed
     while the real photo was still downloading. The sharp photo (.hero-bg-photo)
     loads on top of this and crossfades in once ready; see js below/onload. */
  background: #2b2b2b url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAALACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDjQRRG/wC9FViT60Rk7+tMDr9PlVYsk1asL2KO+yxFc9au3lnk1WLsLn7xpLUNj//Z") center/cover no-repeat;
}
.hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-bg-photo.is-loaded {
  opacity: 1;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 9.343rem 0 0 11.4rem; /* 149.48pt top / 182.4pt left offset, exact */
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 3rem; /* 48pt */
  color: var(--terracotta);
  margin: 0;
  line-height: 1.7; /* 40.9pt / 48pt */
  animation: hero-descend 3s cubic-bezier(0.16, 1, 0.3, 1) 1s both; /* starts 1s after load, descends over 3s */
}
.hero-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.5625rem; /* 73pt */
  color: var(--white);
  margin: 0.545rem 0 0; /* 39.6pt gap from eyebrow baseline area to first cap-line, exact */
  line-height: 1.1425; /* 83.4pt / 73pt, exact line spacing */
  animation: hero-descend 3s cubic-bezier(0.16, 1, 0.3, 1) 1s both; /* starts 1s after load, descends over 3s */
}
@keyframes hero-descend {
  from {
    opacity: 0;
    transform: translateY(-2.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Section heading pattern — shared by Who We Are / Our Services / Message Us
   ========================================================================== */
.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem; /* 36pt */
  color: var(--navy);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.body-copy {
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24pt */
  color: var(--black);
  line-height: 1.458; /* 35pt / 24pt, exact — Our Services / Message Us paragraphs */
}

/* ==========================================================================
   Who We Are — spec section 4
   Exact block: heading top 725.0pt, hero bottom 644.4pt (gap 80.6pt),
   block bottom 1242.8pt, Our Services heading top 1319.6pt (gap 76.8pt).
   ========================================================================== */
.who-we-are {
  padding: 5.038rem 0 4.8rem;
}
.who-we-are .container {
  max-width: 79.5rem; /* yields a ~66.5rem text column, matching the widest source line (65.6rem) */
}
.who-we-are .body-copy {
  text-align: center;
  line-height: 1.708; /* 41.0pt / 24pt, exact — this block uses a taller leading than Our Services */
}
.who-we-are .body-copy + .body-copy {
  margin-top: 1.831rem; /* 29.3pt, exact */
}

/* ==========================================================================
   Our Services — spec section 5
   Every row below reproduces its own exact image width, text width,
   column gap, left offset and vertical rhythm as measured from the
   source layout's vector data — not a generic proportional grid.
   ========================================================================== */
.our-services {
  padding-top: 0;
}
.services-intro-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.services-intro-wrap .section-heading {
  padding-top: 0;
}
.services-intro {
  text-align: center;
  max-width: 61rem;
  margin: 2.05rem auto 0; /* halved from 65.65pt, per instruction */
}

.services-rows {
  max-width: var(--container-max);
  margin-inline: auto;
}

.service {
  display: flex;
  align-items: center; /* the photo and the text+button block are treated as one illustration and centred against each other */
  margin-inline: auto;  /* centres the whole image+text unit horizontally */
  margin-top: 4.494rem; /* 71.9pt gap from intro to row 1, exact; overridden per row below */
}
.service-media {
  min-width: 0;
}
.service-media img {
  width: 100%;
  height: auto; /* each photo keeps its own natural proportions, exactly as in the source */
  display: block;
}
.service-content {
  min-width: 0;
}

/* Explicit aspect-ratio per photo (matching the source's own crop) so
   lazy-loaded images reserve their exact final space immediately —
   no layout shift as they load in. */
#tax-advisory .service-media img { aspect-ratio: 1.7184; object-fit: cover; }
#regulatory-compliance-advisory .service-media img { aspect-ratio: 1.7766; object-fit: cover; }
#business-project-planning-support .service-media img { aspect-ratio: 1.4990; object-fit: cover; }
#transaction-advisory-services .service-media img { aspect-ratio: 1.4278; object-fit: cover; }
#systems-evaluation-services .service-media img { aspect-ratio: 1.8265; object-fit: cover; }
#tax-incentives-advisory .service-media img { aspect-ratio: 1.5001; object-fit: cover; }
#management-services .service-media img { aspect-ratio: 1.8224; object-fit: cover; }

/* Each row's total width is the sum of its exact photo width, gap, and
   text width (all read from the source layout) — set as the row's own
   width so margin-inline:auto centres the image+text+button unit as a
   whole, instead of pinning it to a fixed left offset. */
#tax-advisory                  { width: 91.306rem; gap: 2.744rem; margin-top: 4.494rem; }
#tax-advisory .service-media   { flex: 0 0 48.062rem; }
#tax-advisory .service-content { flex: 0 0 40.5rem; }

#regulatory-compliance-advisory                  { width: 91.584rem; gap: 6.190rem; margin-top: 6.077rem; flex-direction: row-reverse; }
#regulatory-compliance-advisory .service-media   { flex: 0 0 43.994rem; }
#regulatory-compliance-advisory .service-content { flex: 0 0 41.4rem; }

#business-project-planning-support                  { width: 87.99rem; gap: 5.079rem; margin-top: 6.641rem; }
#business-project-planning-support .service-media   { flex: 0 0 40.761rem; }
#business-project-planning-support .service-content { flex: 0 0 42.15rem; }

#transaction-advisory-services                  { width: 85.996rem; gap: 3.524rem; margin-top: 6.264rem; flex-direction: row-reverse; }
#transaction-advisory-services .service-media   { flex: 0 0 41.822rem; }
#transaction-advisory-services .service-content { flex: 0 0 40.65rem; }

#systems-evaluation-services                  { width: 85.248rem; gap: 4.140rem; margin-top: 6.218rem; }
#systems-evaluation-services .service-media   { flex: 0 0 44.808rem; }
#systems-evaluation-services .service-content { flex: 0 0 36.3rem; }

#tax-incentives-advisory                  { width: 86.544rem; gap: 4.924rem; margin-top: 6.815rem; flex-direction: row-reverse; }
#tax-incentives-advisory .service-media   { flex: 0 0 43.360rem; }
#tax-incentives-advisory .service-content { flex: 0 0 38.26rem; }

#management-services                  { width: 89.26rem; gap: 4.094rem; margin-top: 6.565rem; }
#management-services .service-media   { flex: 0 0 44.126rem; }
#management-services .service-content { flex: 0 0 41.04rem; }

.service-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem; /* 30pt */
  color: var(--navy);
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: var(--hairline) solid var(--navy);
}
.service-content .body-copy {
  margin-top: 1.25rem;
}

.btn-outline {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 2rem;
  border: var(--hairline) solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem; /* 20pt */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--navy);
  color: var(--white);
}

/* ==========================================================================
   Message Us — spec section 6
   Exact: content margins ~9.163rem each side; form column 43.963rem,
   gap 6.931rem, contact column 36.069rem.
   ========================================================================== */
.message-us {
  padding: 6.85rem 0 4.724rem; /* top unchanged (109.6pt); bottom now 75.6pt to the footer, exact per revised layout */
}
.message-us .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: 10.32rem;   /* 165.1pt, exact */
  padding-right: 9.8925rem; /* 158.3pt, exact */
}
.message-us .section-heading {
  text-align: left;
}
.message-us-grid {
  display: flex;
  gap: 7.8rem; /* 124.8pt, exact */
  align-items: flex-start;
  margin-top: 2.13125rem; /* 34.1pt gap, exact */
}
#contact-form { flex: 0 0 37.2rem; min-width: 0; }
.contact-box  { flex: 0 0 40.02rem; min-width: 0; }


.field {
  display: block;
  margin-bottom: 0;
}
.field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem; /* 28pt */
  color: var(--black);
  margin-bottom: 0.31875rem; /* 5.1pt, exact */
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  border: none;
  box-shadow: inset 0 0 0 0.5px var(--black); /* 0.5px hairline, renders smoother than a standard border at sub-pixel widths */
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 1.125rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.406rem; /* 6.5pt, exact — matches the rounded corners in the layout */
}
.field input[type="text"],
.field input[type="email"] {
  height: 2.56875rem; /* 41.1pt, exact */
}
.field:has(#field-name)  { margin-bottom: 1.125rem; }   /* 18.0pt gap to Email label, exact */
.field:has(#field-email) { margin-bottom: 1.20625rem; } /* 19.3pt gap to How-label, exact */
.field textarea {
  min-height: 12.065rem; /* tuned so its bottom edge aligns exactly with the video background box below */
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 0.5px var(--terracotta);
}
.field-error {
  color: #C0392B;
  font-size: 1rem;
  margin-top: 0.4rem;
  margin-bottom: 0;
}
.field-error:empty {
  margin-top: 0;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.32rem; /* 21.1pt gap from textarea, exact — matches the button's previous own margin-top */
}
.btn-send {
  border: none;
  box-shadow: inset 0 0 0 0.5px var(--black); /* 0.5px hairline, renders smoother than a standard border at sub-pixel widths */
  color: var(--black);
  width: 12.54rem;   /* 200.6pt, exact */
  height: 3.09375rem;  /* 49.5pt, exact */
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.btn-send:hover,
.btn-send:focus-visible {
  background: var(--navy);
  box-shadow: inset 0 0 0 0.5px var(--navy);
  color: var(--white);
}

.form-status {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem; /* 22pt */
}
.form-status[data-state="success"] { color: #2E7D32; }
.form-status[data-state="error"] { color: #C0392B; }

.contact-box {
  position: relative;
  overflow: hidden;
  border-radius: 0.406rem; /* matches the input box corner radius */
  height: 24.419rem; /* 390.7pt, exact */
  margin-top: 2.44375rem; /* 39.1pt — aligns the box with the Name input box, not the label above it */
  padding: 2.321rem 2.916rem 2.321rem 3.178rem; /* left/right shifted so the phone line centers in the box */
}
.contact-box-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-box p {
  position: relative;
  z-index: 1;
  padding-left: 2.78125rem; /* 44.5pt icon-to-text gap, exact */
  font-family: var(--font-display);
  font-size: 1.75rem; /* 28pt */
  color: var(--black);
  line-height: 1.425; /* 39.9pt / 28pt, exact */
}
.contact-box p + p { margin-top: 0; }                     /* address block -> Digital Address: tight, no extra gap */
.contact-box p:nth-of-type(3) { margin-top: 0.875rem; }   /* Digital Address -> phone: 14.0pt, exact */
.contact-box p:nth-of-type(4) { margin-top: 0.7rem; }     /* phone -> email: 11.2pt, exact */
.contact-box p:nth-of-type(5) { margin-top: 0.75rem; }    /* email -> www: 12.0pt, exact */
.contact-box img {
  position: absolute;
  z-index: 1;
  left: 0;
}
.contact-box img[src*="location-icon"] { width: 1.505rem; height: 2.286rem; top: 0.104rem; }
.contact-box img[src*="phone-icon"]    { width: 2.031rem; height: 1.611rem; top: 0.441rem; }
.contact-box img[src*="email-icon"]    { width: 1.804rem; height: 1.293rem; top: 0.600rem; }
.contact-box img[src*="www-icon"]      { width: 2.213rem; height: 2.213rem; top: 0.140rem; }

/* ==========================================================================
   Footer — spec section 7
   ========================================================================== */
.site-footer {
  background: var(--white);
}
.footer-box {
  border: var(--hairline) solid var(--navy);
  background: var(--navy);
  padding-top: 4.532rem; /* 72.5pt, exact */
  padding-bottom: 1.844rem; /* 29.5pt, exact */
}
.footer-columns {
  display: grid;
  grid-template-columns: 37.94rem 40.725rem 11.7125rem; /* exact column start-to-start widths */
  column-gap: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: 6.86rem;  /* 109.8pt, exact */
  padding-right: 7.99rem; /* 127.9pt, exact */
}
.footer-col h4 {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.625rem; /* 26pt */
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  margin: 0 0 1.756rem; /* col1: 30.1pt; col2/3: 28.1pt (close enough to share), exact */
}
.footer-col p {
  font-family: var(--font-nav);
  font-size: 1.625rem; /* 26pt */
  color: var(--white);
  line-height: 1.423; /* 37.0pt / 26pt, exact — column 1's continuous address text */
}
.footer-col li {
  font-family: var(--font-nav);
  font-size: 1.625rem; /* 26pt */
  color: var(--white);
  line-height: 1.89; /* deliberately stretched ~1.7mm beyond the exact-match point, to compensate for column 1 rendering slightly taller on some platforms/browsers than in testing */
}
.footer-col .contact-line {
  position: relative;
  padding-left: 2.35rem; /* 37.6pt, exact — keeps every wrapped line flush regardless of icon width */
  margin-bottom: 0;
}
.footer-col .contact-line + .contact-line { margin-top: 0.8655rem; } /* spacing between address/phone/email groups */
.footer-col .contact-line img {
  position: absolute;
  left: 0;
}
.footer-col .contact-line img[src*="location-icon"] { width: 1.396rem; height: 2.120rem; top: 0.162rem; }
.footer-col .contact-line img[src*="phone-icon"]    { width: 2.009rem; height: 1.594rem; top: 0.425rem; }
.footer-col .contact-line img[src*="email-icon"]    { width: 1.729rem; height: 1.240rem; top: 0.602rem; }
.footer-col .contact-line img[src*="www-icon"]      { width: 1.811rem; height: 1.818rem; top: 0.313rem; }
.footer-col ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0;
}
.footer-col ul li::before {
  content: "•";
  position: absolute;
  left: 0;
}
.footer-col ul li a:hover,
.footer-col ul li a:focus-visible { color: var(--header-scroll-bg); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center; /* logo + text centered together as one group */
  gap: 3.0875rem; /* 49.4pt, exact */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: 6.144rem;  /* 98.3pt, exact */
  padding-right: 6.756rem; /* 108.1pt, exact */
  margin-top: 6.725rem; /* 107.6pt from the columns, exact — now a single gap since the wave divider is removed */
  flex-wrap: nowrap;
}
.footer-logo { width: 10.2375rem; height: auto; } /* 163.8pt, exact */
.footer-bottom p {
  letter-spacing: -0.4px; /* small condensing so the copyright line fits on one row with the wider spacing */
  font-family: var(--font-nav);
  font-size: 1.125rem; /* 18pt */
  color: var(--white);
  line-height: 1.5;
}

/* ==========================================================================
   Small-viewport safety net
   Per the "exact photocopy, cannot be changed" instruction, this page
   does not restructure at any width — html's proportional font-size
   (above) scales the whole fixed composition down together instead.
   The only accommodation below is horizontal scrolling as a technical
   fallback if a viewport is narrower than the 4px floor can shrink to.
   ========================================================================== */
body {
  overflow-x: auto;
}