/* Delotrope — shared site styles
   A single light theme. Navy / teal / cream, Manrope + IBM Plex Sans.
   Recurring device: the thick navy rule, and the arrow-rule (a rule with
   an arrowhead at one end) used as a divider, a link, and a diagram element. */

:root{
  --navy: #172733;
  --teal: #4f93a7;
  --teal-deep: #2c5769;
  --cream: #f8f8f5;
  --paper: #fbfaf6;
  --slate: #46586a;
  --line: #d9d5c8;
  --maxw: 1280px;
  --gutter: clamp(16px, 4.4vw, 64px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  text-wrap: pretty;
}

/* prevents a single stray word from wrapping onto its own line at any
   viewport width, in browsers that support it (falls back silently
   to normal wrapping otherwise). Headings get the stronger "balance"
   treatment since they're short enough for the browser to even out
   every line, not just fix the last one. */
h1, h2, h3{ text-wrap: balance; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

/* fine paper grain over the whole page — ties the editorial feel together and
   keeps flat skies in the photos from banding under the color treatment */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("assets/grain.png");
  background-size: 128px 128px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 999;
}

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

h1, h2, h3{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}

.small-caps{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------- header ---------------------------------- */

.site-header{ padding-top: 22px; }
.header-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
}
.brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.brand img.word{ height: 26px; width: auto; display: block; }
.brand .tag{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
}
.nav{ display: flex; gap: clamp(18px, 3vw, 40px); padding-top: 6px; }
.nav a{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
}
.nav a[aria-current="page"]{ color: var(--teal-deep); }
.nav a:hover{ color: var(--teal); }

.rule-thick{
  height: 5px;
  background: var(--navy);
  width: 100%;
  border: none;
  margin: 0;
}

@media (max-width: 640px){
  .brand img.word{ height: 20px; }
  .brand .tag{ font-size: 0.56rem; letter-spacing: 0.12em; }
  .nav{ gap: 16px; padding-top: 4px; }
  .nav a{ font-size: 0.68rem; letter-spacing: 0.08em; }
  .rule-thick{ height: 4px; }
}

/* ---------------------------------- arrow-rule ---------------------------------- */
/* the signature device: a rule with an arrowhead. used as a divider under
   headlines, as an inline link marker, and inside the diagram. */

.arrow-rule{ display: block; width: 100%; height: auto; color: var(--navy); overflow: visible; }
.arrow-rule.teal{ color: var(--teal); }
.arrow-rule.cream{ color: var(--cream); }

/* plain version, no arrowhead: for dividers that don't lead anywhere in particular */
.rule-line{ display: block; width: 100%; height: auto; color: var(--navy); overflow: visible; }
.rule-line.teal{ color: var(--teal); }
.rule-line.cream{ color: var(--cream); }

a.text-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.cta-row{ display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 16px; }
a.text-link .arrow-rule{ width: 46px; flex: none; transition: transform .18s ease; }
a.text-link:hover .arrow-rule{ transform: translateX(6px); }
a.text-link:hover{ color: var(--teal); }

/* ---------------------------------- eye mark (brand device) ---------------------------------- */
/* the bare eye mark from the logo, minus its badge background — recolorable via
   currentColor (ring + iris) and --mark-bg (sclera + the crescent "bite"),
   used as a section-label bullet, a hero graphic, and a decorative watermark. */

.eye-mark{ display: block; overflow: visible; }
.eye-mark .em-ring{ fill: none; stroke: currentColor; stroke-width: 9; }
.eye-mark .em-iris{ fill: currentColor; }
.eye-mark .em-sclera,
.eye-mark .em-bite{ fill: var(--mark-bg, var(--cream)); }

.label.small-caps{ display: flex; align-items: center; gap: 9px; }
.label-eye{ width: 15px; height: 15px; flex: none; }

/* ---------------------------------- hero collage (fills the empty right side) ---------------------------------- */
/* a duotoned photo + a faint connections diagram, standing in for the actual
   work (records, people, filings) rather than a decorative brand mark */

.hero{ position: relative; overflow: visible; }
.hero-collage{
  position: absolute;
  top: 3%;
  right: var(--gutter);
  width: min(23vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.collage-tag{
  color: var(--teal-deep);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-align: right;
}
.collage-frame{ position: relative; width: 100%; }
.collage-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.collage-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(0.73) brightness(0.96) contrast(1.05);
}
.collage-photo::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--teal-deep);
  mix-blend-mode: multiply;
  opacity: 0.16;
}
.collage-photo::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border: 1px solid rgba(247,246,241,0.35);
}
/* the diagram lives beside the photo, not on top of it — it only touches
   the photo's left edge at two points, like wires running into it */
.collage-lines{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 145%;
  pointer-events: none;
}
@media (max-width: 980px){
  .hero-collage{ display: none; }
}

/* page-hero variant (approach / contact) — no graphic, just the text */
.page-hero{ position: relative; overflow: visible; }

/* about page — a natural-color headshot in a soft rounded frame with an
   offset teal disc behind it, sized to hold its own half of the hero */
.about-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.page-hero-inner{ max-width: 560px; }
.about-photo{
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
.about-photo-decor{
  position: absolute;
  top: -8%;
  left: -11%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.26;
}
.about-photo-frame{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--navy);
}
.about-photo-frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.96) contrast(1.05) brightness(1.03);
}

@media (max-width: 720px){
  .about-hero-grid{ grid-template-columns: 1fr; }
  .about-photo{ max-width: 260px; margin-top: 8px; }
}

/* ---------------------------------- full-bleed color band ---------------------------------- */
/* a solid navy band for editorial color-blocking — reused for the homepage
   pull-quote and for a closing stat/CTA moment on the methodology page. */

.band-dark{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--navy);
  overflow: hidden;
}
.band-dark .watermark-eye{
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(32%, -50%);
  width: clamp(260px, 32vw, 480px);
  opacity: 0.09;
  color: var(--teal);
  pointer-events: none;
}
@media (max-width: 720px){
  .band-dark .watermark-eye{ display: none; }
}
.band-dark .pull{ border-top: none; }
.band-dark h1, .band-dark h2, .band-dark h3{ color: var(--cream); }
.band-dark p{ color: rgba(247,246,241,0.82); }
.band-dark .pull p.statement{ color: var(--cream); }
.band-dark .pull p.note{ color: rgba(247,246,241,0.68); }
.band-dark a.text-link{ color: var(--cream); }
.band-dark a.text-link:hover{ color: var(--teal); }
.band-dark .rule-line{ color: var(--teal); }
.band-dark .pull-inner{ position: relative; z-index: 1; }

.band-dark .stat .fig{ color: var(--teal); }
.band-dark .stat p{ color: rgba(247,246,241,0.78); }
.band-dark .stat-row{ border-top-color: rgba(247,246,241,0.25); border-bottom-color: rgba(247,246,241,0.25); }
.band-dark .stat:first-child{ border-right-color: rgba(247,246,241,0.25); border-bottom-color: rgba(247,246,241,0.25); }

.band-stats{ padding-block: clamp(48px, 7vw, 84px); position: relative; z-index: 1; }

/* ---------------------------------- hero (home) ---------------------------------- */

.hero{ padding-top: clamp(28px, 6vw, 56px); padding-bottom: clamp(30px, 5vw, 54px); }
.hero-inner{ max-width: 760px; }
.hero h1{
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 0.98;
}
.hero .arrow-rule, .hero .rule-line{ margin: clamp(22px, 3.6vw, 34px) 0; max-width: 480px; }
.hero .lede{
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--navy);
  max-width: 46ch;
  margin: 0;
}

/* full-bleed photo band under hero */
.photo-band{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(280px, 34vw, 480px);
  overflow: hidden;
  background: var(--teal-deep);
}
.photo-band img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  z-index: 0;
  filter: saturate(0.72) brightness(0.96) contrast(1.05);
}
.photo-band::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--teal-deep);
  opacity: 0.16;
  mix-blend-mode: multiply;
}
.photo-band::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(23,39,51,0.08) 0%,
    rgba(44,87,105,0.12) 34%,
    rgba(44,87,105,0.62) 56%,
    var(--teal-deep) 76%,
    var(--teal-deep) 100%);
}
.photo-band .band-text-wrap{
  position: absolute; inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.photo-band .band-text{
  position: relative;
  padding-inline: var(--gutter);
  max-width: 640px;
  text-align: right;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--cream);
  font-size: clamp(1.7rem, 4.6vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.photo-band .band-text span{ display: block; }
.photo-band .band-text span + span{ margin-top: 0.05em; }

@media (max-width: 640px){
  .photo-band{ height: clamp(320px, 78vw, 460px); }
  .photo-band img{ object-position: 20% 50%; }
  .photo-band::after{
    background: linear-gradient(180deg,
      rgba(23,39,51,0.05) 0%,
      rgba(44,87,105,0.15) 40%,
      rgba(44,87,105,0.72) 62%,
      var(--teal-deep) 80%,
      var(--teal-deep) 100%);
  }
  .photo-band .band-text-wrap{ align-items: flex-end; padding-bottom: 26px; }
}

/* ---------------------------------- services strip (what I do) ---------------------------------- */
/* sits right under the hero — turns leftover hero space into something
   useful (the actual services) instead of a decorative graphic */

.services{
  position: relative;
  padding-block: clamp(30px, 4.4vw, 46px) clamp(44px, 6vw, 66px);
}
/* a container element's own border sits at its outer box edge, past the
   gutter padding everything else aligns to — inset it with a pseudo-element
   instead so it lines up with the header rule and the text above it */
.services::before{
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 3px;
  background: var(--navy);
}
.services-head{ margin-bottom: clamp(22px, 3vw, 32px); color: var(--teal-deep); }
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.service-col{ padding-right: clamp(0px, 2vw, 16px); }
.service-col:not(:first-child){ border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 34px); }
.service-col .num{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--teal-deep);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.service-col h3{ font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.2; margin: 0 0 10px; }
.service-col p{ margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.55; }
.services-link{ margin-top: clamp(28px, 4vw, 40px); }

@media (max-width: 780px){
  .services-grid{ grid-template-columns: 1fr; gap: 26px; }
  .service-col:not(:first-child){ border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
}

/* ---------------------------------- approach page photo (full-bleed, matches the other photo bands) ---------------------------------- */

.approach-photo{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(24px, 4vw, 40px);
  overflow: hidden;
  height: clamp(220px, 27vw, 360px);
  background: var(--teal-deep);
}
.approach-photo-inner{ position: relative; width: 100%; height: 100%; }
.approach-photo-inner img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(0.74) brightness(0.97) contrast(1.06);
}
.approach-photo-inner::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--teal-deep);
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.approach-photo-grain{
  position: absolute; inset: 0;
  background-image: url("assets/grain.png");
  background-size: 128px 128px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------------------------------- generic sections ---------------------------------- */

.section{ padding-block: clamp(56px, 8vw, 96px); position: relative; }
.section + .section::before{
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--line);
}

/* label, heading and body copy all share one left edge, matching the
   two-col content that follows — no side-by-side label column */
.section-head{
  margin-bottom: clamp(32px, 5vw, 52px);
}
.section-head .label{ color: var(--teal-deep); margin-bottom: clamp(14px, 2vw, 20px); }
.section-head h2{
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.06;
  max-width: 24ch;
}
.section-head p{
  color: var(--slate);
  font-size: 1.03rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 14px 0 0;
}

/* ---------------------------------- case study ---------------------------------- */

.case{
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(28px, 5vw, 64px);
  border-top: 3px solid var(--navy);
  padding-top: clamp(26px, 4vw, 40px);
}
.case-copy{ display: flex; flex-direction: column; height: 100%; }
.case-copy h3{
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: 16px;
}
.case-copy p{ color: var(--slate); font-size: 1.02rem; line-height: 1.6; max-width: 40ch; margin: 0 0 20px; }
/* fills the space a shorter left column leaves next to the taller bill list */
.case-stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 40px);
  margin-top: auto;
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--line);
}
.case-stat .fig{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--teal-deep);
  line-height: 1;
}
.case-stat p{ margin: 8px 0 0; color: var(--slate); font-size: 0.78rem; letter-spacing: 0.03em; max-width: none; }
.status{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.status::before{
  content: "";
  width: 8px; height: 8px;
  background: var(--teal);
  border-radius: 50%;
  flex: none;
}

.bill-list{ border-top: 1px solid var(--line); }
.bill-row{
  display: grid;
  grid-template-columns: 110px 90px 1fr auto;
  gap: 18px;
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.bill-row .code, .bill-row .year, .bill-row .outcome{ padding-top: 2px; }
.bill-row .code{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
}
.bill-row .year{
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
}
.bill-row p{ margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--slate); }
.bill-row .outcome{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--navy);
  white-space: nowrap;
}

@media (max-width: 860px){
  .case{ grid-template-columns: 1fr; }
  .bill-row{ grid-template-columns: 1fr; gap: 6px; padding-block: 16px; }
  .bill-row .outcome{ text-align: left; }
}

/* ---------------------------------- process (three unequal columns) ---------------------------------- */

.process{
  border-top: 3px solid var(--navy);
  padding-top: clamp(26px, 4vw, 40px);
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.15fr;
}
.process-step{ padding-inline: clamp(0px, 3vw, 34px); }
.process-step:not(:first-child){ border-left: 3px solid var(--navy); }
.process-step:first-child{ padding-left: 0; }
.process-step .num{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--teal-deep);
  letter-spacing: 0.05em;
}
.process-step h3{
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 12px 0 12px;
  line-height: 1.15;
}
.process-step p{ margin: 0; color: var(--slate); font-size: 0.96rem; line-height: 1.55; }

@media (max-width: 860px){
  .process{ grid-template-columns: 1fr; row-gap: 30px; }
  .process-step{ padding-inline: 0; }
  .process-step:not(:first-child){ border-left: none; border-top: 3px solid var(--navy); padding-top: 24px; }
}

/* ---------------------------------- pull statement ---------------------------------- */

.pull{
  padding-block: clamp(50px, 7vw, 84px);
  border-top: 1px solid var(--line);
}
.pull-inner{ max-width: 920px; }
.pull p.statement{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.32;
  color: var(--navy);
  margin: 0 0 20px;
  max-width: 34ch;
}
.pull p.note{ color: var(--slate); font-size: 1rem; line-height: 1.6; max-width: 58ch; margin: 18px 0 0; }

/* a smaller pull-quote moment for mid-section use, same voice as .pull but
   without a full section break — a recurring device, not a one-off */
.pull-inline{
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  max-width: 640px;
}
.pull-inline .statement{
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.34;
  color: var(--navy);
  margin: 0;
}

/* ---------------------------------- footer ---------------------------------- */

footer.site-footer{
  position: relative;
  padding-block: 30px 46px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
footer.site-footer::before{
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--line);
}
footer.site-footer img.word{ height: 17px; width: auto; opacity: 0.92; }
footer.site-footer .fine{
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---------------------------------- page hero (approach / contact) ---------------------------------- */

.page-hero{ padding-top: clamp(30px, 6vw, 56px); padding-bottom: clamp(30px, 5vw, 50px); }
.page-hero h1{
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.02;
  max-width: 18ch;
}
.page-hero .arrow-rule, .page-hero .rule-line{ margin: clamp(20px, 3vw, 30px) 0; max-width: 420px; }
.page-hero .lede{
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
  color: var(--navy);
}

/* ---------------------------------- inset / doesn't-do block ---------------------------------- */

.inset{
  border-left: 5px solid var(--navy);
  padding-left: clamp(20px, 3vw, 32px);
  max-width: 62ch;
}
.inset p{ font-size: 1.02rem; line-height: 1.65; color: var(--slate); margin: 0 0 16px; }
.inset p:last-child{ margin-bottom: 0; }
.inset p strong{ color: var(--navy); font-family: "Manrope", sans-serif; font-weight: 700; }

/* ---------------------------------- prose ---------------------------------- */

.prose{ max-width: 68ch; }
.prose p{ font-size: 1.04rem; line-height: 1.65; color: var(--slate); margin: 0 0 20px; }
.prose p.lead{ font-size: 1.14rem; color: var(--navy); font-weight: 500; }
.prose p:last-child{ margin-bottom: 0; }

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 820px){
  .two-col{ grid-template-columns: 1fr; }
}

/* ---------------------------------- diagram ---------------------------------- */

.diagram-wrap{
  background: var(--paper);
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
  padding: clamp(20px, 4vw, 40px) clamp(10px, 3vw, 30px);
  overflow-x: auto;
}
.diagram-wrap svg{ width: 100%; min-width: 640px; height: auto; display: block; }
.diagram-hint{
  display: none;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
@media (max-width: 640px){
  .diagram-hint{ display: block; }
}
.diagram-cap{
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 14px;
}

/* ---------------------------------- coverage stat row ---------------------------------- */

.stat-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: clamp(30px, 5vw, 46px);
}
.stat{ padding: 26px clamp(0px, 3vw, 30px); }
.stat:first-child{ border-right: 1px solid var(--line); padding-left: 0; }
.stat .fig{
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--teal-deep);
  line-height: 1;
}
.stat p{ margin: 10px 0 0; color: var(--slate); font-size: 0.95rem; line-height: 1.5; max-width: 34ch; }

@media (max-width: 640px){
  .stat-row{ grid-template-columns: 1fr; }
  .stat:first-child{ border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px; }
}

/* ---------------------------------- contact band ---------------------------------- */
/* a different photo than the homepage on purpose, so the same image isn't repeated site-wide. */

.contact-band{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(260px, 30vw, 380px);
  overflow: hidden;
  background: var(--teal-deep);
}
.contact-band img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 65% 45%;
  z-index: 0;
  filter: saturate(0.72) brightness(0.96) contrast(1.05);
}
.contact-band::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--teal-deep);
  opacity: 0.16;
  mix-blend-mode: multiply;
}
.contact-band::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(100deg,
    var(--teal-deep) 0%,
    var(--teal-deep) 24%,
    rgba(44,87,105,0.66) 42%,
    rgba(44,87,105,0.22) 62%,
    rgba(23,39,51,0.12) 82%,
    rgba(23,39,51,0.12) 100%);
}
.contact-band .band-text-wrap{
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: flex-start;
}
.contact-band .band-text{
  position: relative;
  padding-inline: var(--gutter);
  max-width: 620px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--cream);
  font-size: clamp(1.6rem, 4.2vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.contact-band .band-text span{ display: block; }
.contact-band .band-text span + span{ margin-top: 0.05em; }

@media (max-width: 640px){
  .contact-band{ height: clamp(240px, 60vw, 340px); }
  .contact-band img{ object-position: 62% 30%; }
}

/* ---------------------------------- contact details ---------------------------------- */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  border-top: 3px solid var(--navy);
  padding-top: clamp(28px, 4vw, 42px);
}
.contact-email{
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--navy);
  border-bottom: 3px solid var(--teal);
  padding-bottom: 6px;
  margin: 18px 0 26px;
}
.contact-email:hover{ color: var(--teal-deep); border-color: var(--teal-deep); }
.contact-side{
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 14px clamp(30px, 4vw, 44px) clamp(30px, 4vw, 44px);
}
.contact-side p{ color: rgba(247,246,241,0.82); font-size: 0.98rem; line-height: 1.6; margin: 0 0 16px; position: relative; z-index: 1; }
.contact-side .small-caps{ color: var(--teal); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; position: relative; z-index: 1; }
.contact-side a.text-link{ color: var(--cream); position: relative; z-index: 1; }
.contact-side a.text-link:hover{ color: var(--teal); }
.contact-side .panel-eye{
  position: absolute;
  bottom: -14%;
  right: -10%;
  width: 48%;
  opacity: 0.14;
  color: var(--teal);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; gap: 34px; }
}

/* ---------------------------------- contact form ---------------------------------- */

.contact-form{ max-width: 640px; }
.form-botcheck{ display: none; }
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
}
.form-row{ margin-bottom: clamp(18px, 3vw, 26px); }
.form-row label{
  display: block;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 10px;
}
.form-row input,
.form-row textarea{
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--line);
  background: transparent;
  padding: 8px 2px 10px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1rem;
  color: var(--navy);
  transition: border-color .16s ease;
}
.form-row textarea{ resize: vertical; min-height: 100px; }
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--teal);
}
.form-row input:focus-visible,
.form-row textarea:focus-visible{ outline: none; }

.form-submit{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: var(--navy);
  color: var(--cream);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 15px 26px;
  cursor: pointer;
  transition: background .16s ease;
}
.form-submit:hover{ background: var(--teal-deep); }
.form-submit .arrow-rule{ transition: transform .18s ease; }
.form-submit:hover .arrow-rule{ transform: translateX(5px); }

.form-note{
  margin: 16px 0 0;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
}

a:focus-visible, *:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }