/* Shared typography and editorial layout system.
   Loaded after site.css so every route uses one responsive scale and grid. */
:root {
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --wrap: 1360px;
  --gutter: clamp(22px, 4.5vw, 74px);
  --type-body: clamp(1rem, .97rem + .18vw, 1.125rem);
  --type-support: clamp(1rem, .96rem + .24vw, 1.125rem);
  --type-lead: clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
  --type-label: clamp(.66rem, .63rem + .08vw, .75rem);
  --type-nav: clamp(.76rem, .72rem + .12vw, .875rem);
  --type-button: clamp(14px, calc(.875rem + .04vw), 15px);
  --type-section: clamp(2.5rem, 2rem + 2.2vw, 4.25rem);
  --type-page: clamp(3.25rem, 4.05vw, 5.25rem);
}

html { font-size: 16px; }
body {
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.68;
  font-synthesis: none;
}
button, input, textarea, select { font: inherit; }
.nav a { font-family: var(--sans); font-size: var(--type-nav); }
.button, .button-primary, .button-secondary { font-family: var(--sans); font-size: var(--type-button); }
.eyebrow { font-family: var(--sans); font-size: var(--type-label); }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 400; }
.page-hero h1,
.hero h1 {
  font-family: var(--sans);
  font-weight: 400;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
.page-hero h1 em,
.hero h1 em,
.intro-main h2 em,
.section-head h2 em,
.network-copy h2 em,
.story-layout h2 em,
.quality-copy h2 em,
.partners-intro h2 em,
.portfolio-intro h2 em,
.contact-main h2 em,
.partner-teaser h2 em,
.partner-approach-heading h2 em,
.partner-showcase-header h2 em,
.values-intro h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
}

.intro-main h2,
.section-head h2,
.network-copy h2,
.story-layout h2,
.quality-copy h2,
.partners-intro h2,
.portfolio-intro h2,
.contact-main h2,
.partner-teaser h2,
.partner-approach-heading h2,
.partner-showcase-header h2,
.values-intro h2 {
  font-size: var(--type-section);
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.lead { font-size: var(--type-lead); line-height: 1.65; }
.page-deck,
.intro-main > p:not(.lead),
.section-head > p,
.intro-side p,
.partner-teaser p:not(.eyebrow),
.statement-copy > p:not(.eyebrow),
.story-layout p:not(.lead),
.mission-grid p:not(.eyebrow),
.service-detail p:not(.eyebrow),
.partners-intro-grid p:not(.eyebrow),
.portfolio-intro p:not(.eyebrow),
.contact-main > p:not(.eyebrow),
.quality-copy > p:not(.eyebrow),
.partner-entry p,
.partner-showcase-header > p:not(.eyebrow),
.value-item p {
  font-size: var(--type-support);
  line-height: 1.72;
}

/* Shared page-intro grid: title and supporting copy align as one composition. */
.page-hero {
  padding: clamp(62px, 7vw, 108px) 0 clamp(48px, 5.2vw, 72px);
}
.page-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
}
.page-hero-layout > div { min-width: 0; }
.page-hero h1 {
  max-width: 860px;
  margin: 0;
  font-size: var(--type-page);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.page-hero h1 > span,
.page-hero h1 > em { display: inline; }
.page-hero h1 > br { display: block; content: ""; margin-block: .035em; }
.page-deck {
  width: min(100%, 460px);
  max-width: 460px;
  margin: 0;
  align-self: center;
  font-size: var(--type-support);
  line-height: 1.72;
}

/* The home hero keeps its image-led two-column identity, with a wider copy track. */
.hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.hero-copy { padding-left: clamp(28px, 4vw, 68px); padding-right: clamp(24px, 3vw, 52px); }
.hero h1 {
  width: 100%;
  max-width: 880px;
  font-size: clamp(3rem, 4.05vw, 4.85rem);
  line-height: 1;
  letter-spacing: -.048em;
}

/* Company feature title is longer than the other route heroes, so it uses a restrained size. */
.company-feature-copy h1 {
  max-width: 760px;
  margin: 24px 0 28px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: clamp(3rem, 3vw, 3.25rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.company-feature-copy h1 em {
  display: block;
  margin-top: .08em;
  color: var(--blue-mid);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
}

/* Partners uses a photographic hero rather than the pale page-hero, but keeps the same type scale. */
.partners-hero h1 {
  max-width: 860px;
  font-family: var(--sans);
  font-size: var(--type-page);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.partners-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
}

/* Portfolio intro shares the page grid instead of leaving its deck below the title. */
.portfolio-intro { padding: clamp(54px, 6vw, 82px) 0 clamp(44px, 5vw, 70px); }
.portfolio-intro > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  column-gap: clamp(36px, 6vw, 92px);
  row-gap: 12px;
  align-items: center;
}
.portfolio-intro > .wrap > .eyebrow { grid-column: 1 / -1; margin: 0; }
.portfolio-intro > .wrap > h2 {
  grid-column: 1;
  max-width: 780px;
  margin: 0;
  font-size: clamp(2.75rem, calc(2.9vw + .5rem), 3.5rem);
  line-height: 1.06;
}
.portfolio-intro > .wrap > .lead {
  grid-column: 2;
  grid-row: 2;
  width: min(100%, 500px);
  max-width: 500px;
  margin: 0;
  align-self: center;
  font-size: var(--type-support);
  line-height: 1.72;
}

/* Values feature uses a shared top edge and balanced image/text columns. */
.quality-feature { padding: clamp(24px, 3vw, 42px) 0 clamp(62px, 7vw, 96px); }
.quality-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: start;
}
.quality-copy { min-width: 0; padding-top: 4px; }
.quality-copy h2 { max-width: 600px; margin: 0 0 20px; }
.quality-copy .lead { max-width: 590px; margin: 0; }
.quality-photo { width: 100%; height: clamp(340px, 34vw, 500px); aspect-ratio: 4 / 3; }

/* Keep common image/text compositions on a shared container and avoid clipping. */
.story-layout,
.company-feature-grid,
.partners-intro-grid,
.contact-main,
.portfolio-grid { min-width: 0; }
img { max-width: 100%; }

@media (max-width: 900px) {
  :root { --gutter: clamp(22px, 4vw, 38px); --type-page: clamp(3rem, 7.1vw, 4.25rem); }
  .page-hero { padding: 64px 0 46px; }
  .page-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-deck { width: 100%; }
  .partners-hero-content { display: block; padding: 62px 0 44px; }
  .partners-hero-main { max-width: min(100%, 820px); }
  .partners-hero-aside { max-width: 340px; margin: 24px 0 0; }
  .company-feature-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .company-feature-photo { width: 100%; min-height: 0; height: clamp(300px, 46vw, 430px); aspect-ratio: 16 / 10; }
  .hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
  .hero-copy { padding: 64px 30px 38px; }
  .hero h1 { font-size: clamp(2.8rem, 5.3vw, 3.7rem); }
  .portfolio-intro > .wrap { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .portfolio-intro > .wrap > .eyebrow { grid-column: 1; }
  .portfolio-intro > .wrap > h2 { grid-column: 1; }
  .portfolio-intro > .wrap > .lead { grid-column: 1; grid-row: auto; max-width: 38rem; }
  .quality-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .quality-photo { height: clamp(320px, 44vw, 420px); }
}

@media (max-width: 680px) {
  :root {
    --gutter: 22px;
    --type-section: clamp(2.35rem, 8.8vw, 3.35rem);
    --type-page: clamp(2.9rem, 10vw, 3.8rem);
  }
  body { line-height: 1.68; }
  .page-hero { padding: 54px 0 36px; }
  .page-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .page-hero h1 { line-height: 1.02; }
  .page-deck { max-width: 38rem; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 52px var(--gutter) 30px; }
  .hero h1 { max-width: 12ch; font-size: clamp(2.85rem, 10.5vw, 3.8rem); line-height: 1.02; }
  .company-feature-copy h1 { font-size: clamp(2.65rem, 11vw, 3rem); margin-top: 18px; }
  .portfolio-intro { padding: 48px 0 44px; }
  .portfolio-intro > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .portfolio-intro > .wrap > .eyebrow { grid-column: 1; }
  .portfolio-intro > .wrap > h2 { grid-column: 1; max-width: 15ch; }
  .portfolio-intro > .wrap > .lead { grid-column: 1; grid-row: auto; max-width: 38rem; }
  .quality-feature { padding: 12px 0 54px; }
  .quality-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .quality-copy { padding-top: 0; }
  .quality-copy h2 { margin-bottom: 14px; }
  .quality-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 380px) {
  :root { --type-page: 2.75rem; --type-section: 2.25rem; }
  .hero h1 { font-size: 2.65rem; }
}

/* High-contrast calls to action: keep the text fully opaque even during entry motion. */
.hero-copy > .hero-actions {
  opacity: 1;
  animation-name: hero-cta-arrive;
}
@keyframes hero-cta-arrive {
  from { transform: translateY(16px); }
  to { transform: translateY(0); }
}

.hero-actions .button-cyan,
.closing-cta .button-cyan,
.partner-note .button-cyan {
  color: #09264B;
  background-color: #28BFD2;
  font-family: var(--sans);
  font-size: var(--type-button);
  font-weight: 700;
  opacity: 1;
  filter: none;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.hero-actions .button-cyan > span,
.closing-cta .button-cyan > span,
.partner-note .button-cyan > span {
  color: inherit;
  opacity: 1;
  filter: none;
}
.hero-actions .button-cyan:hover,
.closing-cta .button-cyan:hover,
.partner-note .button-cyan:hover {
  color: #09264B;
  background-color: #68D7E2;
}
.hero-actions .button-cyan:active,
.closing-cta .button-cyan:active,
.partner-note .button-cyan:active {
  color: #09264B;
  background-color: #20AFC4;
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(9, 38, 75, .18);
}
.hero-actions .button-cyan:focus-visible,
.closing-cta .button-cyan:focus-visible,
.partner-note .button-cyan:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #09264B;
}

.hero-actions .link-light {
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: var(--type-button);
  font-weight: 600;
  line-height: 1.2;
  opacity: 1;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color var(--motion-fast) ease, text-decoration-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.hero-actions .link-light > span {
  color: inherit;
  opacity: 1;
  filter: none;
}
.hero-actions .link-light:hover {
  color: #FFFFFF;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}
.hero-actions .link-light:active {
  color: #FFFFFF;
  text-decoration-line: underline;
}
.hero-actions .link-light:focus-visible {
  color: #FFFFFF;
  outline: 3px solid #FFFFFF;
  outline-offset: 5px;
  box-shadow: 0 0 0 2px #09264B;
}

/* Contact details stay centered as one clean, map-free section. */
.contact-grid {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  gap: clamp(36px, 5vw, 64px);
}
.contact-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact-main .lead { max-width: 560px; margin-inline: auto; }
.contact-rule { margin-inline: auto; }
.contact-address { text-align: center; }
.contact-side {
  display: grid;
  width: 100%;
  max-width: 760px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-inline: auto;
  border-top: 0;
}
.contact-side .contact-card {
  margin: 0;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.contact-side .contact-method {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.contact-side .contact-info { align-items: center; }
.contact-side .contact-large { justify-content: center; overflow-wrap: anywhere; }
.contact-side .contact-arrow { display: none; }
.contact-side .contact-card-blue {
  grid-column: 1 / -1;
  background: var(--navy);
  text-align: center;
}
.contact-side .contact-card-blue p { margin-inline: auto; }
@media (max-width: 680px) {
  .contact-grid { gap: 32px; }
  .contact-side { grid-template-columns: minmax(0, 1fr); }
  .contact-side .contact-card-blue { grid-column: auto; }
}