/* ==========================================================================
   COG Home — Cognitive Homeostasis
   Design tokens live here: change the palette or fonts in :root and the
   whole site follows.
   ========================================================================== */

:root {
  /* Palette — drawn from the logo (navy + sky), warmed with paper + gold */
  --paper:      #f6f3ec;   /* warm off-white page ground */
  --paper-deep: #efeadf;   /* slightly deeper paper for alternating sections */
  --ink:        #0e2a47;   /* near-navy text */
  --navy:       #1a4a78;   /* logo navy */
  --navy-deep:  #0b2036;   /* dark sections */
  --sky:        #5b9bd5;   /* logo sky blue */
  --sky-soft:   #d9e6f4;   /* pale sky tint */
  --gold:       #c39743;   /* warm accent, used sparingly */
  --line:       rgba(14, 42, 71, 0.14);
  --line-light: rgba(246, 243, 236, 0.18);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --container: 1240px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 340;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero-roof { clip-path: none; }
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

/* Hidden by default; shown only on phones (inside a mobile media query further
   down) to force a line break at a specific word without affecting desktop.
   Must stay ABOVE that media query in the file — a same-specificity rule that
   comes later in the cascade wins regardless of which media query matches. */
.mobile-break { display: none; }

.section { padding-block: clamp(84px, 11vw, 160px); position: relative; }

/* ---------- Shared type ---------- */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.eyebrow::before {
  content: "";
  width: 42px; height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow-light { color: var(--sky-soft); }
.eyebrow-light::before { background: var(--gold); }

.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 420;
  color: var(--navy);
}
.display-light { color: var(--paper); }
.display-light em { color: var(--sky); }

.section-head { margin-bottom: clamp(48px, 6vw, 84px); }

.soft { color: rgba(14, 42, 71, 0.55); font-weight: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-solid {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(26, 74, 120, 0.55);
}
.btn-solid:hover { background: var(--navy-deep); box-shadow: 0 16px 34px -12px rgba(26, 74, 120, 0.6); }

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--navy); }

.btn-light {
  background: var(--paper);
  color: var(--navy-deep);
}
.btn-light:hover { background: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(246, 243, 236, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* An element with backdrop-filter becomes the containing block for its
   position:fixed descendants. Left on, it collapses the open menu from the
   viewport down to the header bar, spilling the links over the page. The frosted
   bar is redundant while the full-screen menu is up, so drop it. */
body.nav-locked .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-logo {
  height: 60px;
  width: auto;
  transition: height 0.35s var(--ease-out);
}
.site-header.is-scrolled .brand-logo { height: 48px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.site-nav a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 460;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  padding-block: 6px;
}
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--sky);
  transition: right 0.4s var(--ease-out);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta)[aria-current="true"]::after { right: 0; }

.nav-cta {
  background: var(--navy);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 999px;
  transition: background-color 0.3s ease;
}
.nav-cta:hover { background: var(--navy-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 46px; height: 46px;
  padding: 12px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* While the window is being resized, suppress header transitions. Crossing the
   mobile breakpoint changes the nav's opacity from 1 to 0, which would
   otherwise animate and flash the vertical menu for a moment. */
.is-resizing .site-header,
.is-resizing .site-header * { transition: none !important; }

@media (max-width: 860px) {
  .mobile-break { display: block; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    /* Above the page, below the logo and close button. A negative z-index here
       depended on the header's stacking context and could let page content show
       through once the scrolled header's backdrop-filter was active. */
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(91, 155, 213, 0.20), transparent 70%),
      linear-gradient(180deg, var(--paper) 0%, #eef1f2 45%, var(--sky-soft) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .brand, .nav-toggle { position: relative; z-index: 2; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; }
  .site-nav a { font-size: 1.5rem; font-family: var(--font-display); font-weight: 400; padding: 10px; }
  .site-nav .nav-cta { margin-top: 18px; font-family: var(--font-body); font-size: 1rem; }
  body.nav-locked { overflow: hidden; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 16vh, 180px) 0 clamp(90px, 12vh, 140px);
  overflow: hidden;
}

.hero-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 60% at 82% 18%, rgba(91, 155, 213, 0.22), transparent 70%),
    radial-gradient(40% 50% at 8% 90%, rgba(195, 151, 67, 0.10), transparent 70%);
  pointer-events: none;
}

.hero-roof {
  position: absolute;
  right: -4%;
  bottom: -2px;
  width: min(78vw, 1080px);
  color: var(--sky);
  opacity: 0.5;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: roof-wipe 2s var(--ease-out) 0.55s forwards;
}
@keyframes roof-wipe { to { clip-path: inset(0 0 0 0); } }

/* On phones the forced full-height hero centres its content, which strands a
   large gap under the fixed header and above the next section. Shrink the header
   bar, size the hero to its content instead, and lift the roofline off the
   bottom edge. */
@media (max-width: 860px) {
  .header-inner { padding-block: 12px; }
  .brand-logo { height: 48px; }
  .site-header.is-scrolled .brand-logo { height: 40px; }
  .hero {
    min-height: auto;
    justify-content: flex-start;
    padding: clamp(110px, 15vh, 136px) 0 clamp(28px, 4vh, 40px);
  }
  /* Take the roofline out of the corner and give it a full-width row of its own
     below the content. `.hero` is a flex column, so `order` puts it after the
     copy even though it comes first in the markup. */
  .hero-roof {
    position: static;
    order: 2;
    width: 100%;
    right: auto;
    bottom: auto;
    margin-top: clamp(28px, 4.5vh, 44px);
  }
  .hero-inner { order: 1; }
}

.hero-inner {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  font-weight: 520;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: clamp(24px, 3.5vh, 42px);
}
.kicker-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(195, 151, 67, 0.18); } }

.hero-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(2.5rem, 7.6vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: grid;
  gap: clamp(2px, 0.6vw, 10px);
}
/* No `overflow: hidden` here: the tight 1.02 line-height leaves less room below
   the baseline than the font's descenders need, so clipping would slice the
   tails off every "g". The load-in transform is on this element itself, so it
   has nothing to clip anyway. */
.hero-line { display: block; }
.hero-line em {
  font-style: italic;
  font-weight: 400;
  color: var(--navy);
  background: linear-gradient(120deg, var(--navy) 0%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(34px, 5vh, 56px);
}

/* load-in choreography */
[data-load] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.is-loaded [data-load] { opacity: 1; transform: none; }
body.is-loaded [data-load="2"] { transition-delay: 0.08s; }
body.is-loaded [data-load="3"] { transition-delay: 0.18s; }
body.is-loaded [data-load="4"] { transition-delay: 0.28s; }
body.is-loaded [data-load="5"] { transition-delay: 0.38s; }
body.is-loaded [data-load="6"] { transition-delay: 0.55s; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--paper-deep);
  overflow: hidden;
  padding-block: 18px;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 380;
  color: var(--navy);
  white-space: nowrap;
}
.marquee b { color: var(--gold); font-size: 0.9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Story
   ========================================================================== */
.grid-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.story-head { position: sticky; top: 120px; }
.story-body .lede {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  font-weight: 340;
  margin-bottom: 1.6em;
}
.story-body .lede em { font-family: var(--font-display); font-style: italic; color: var(--navy); }
.story-body p:not(.lede) { color: rgba(14, 42, 71, 0.78); max-width: 58ch; }

@media (max-width: 860px) {
  .grid-story { grid-template-columns: 1fr; }
  .story-head { position: static; }
}

/* ==========================================================================
   Approach
   ========================================================================== */
.approach { background: var(--paper-deep); }

.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.approach-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 3.4vw, 46px);
  overflow: hidden;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s ease;
}
.approach-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 155, 213, 0.16), transparent 68%);
  transition: transform 0.7s var(--ease-out);
}
.approach-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 155, 213, 0.5);
  box-shadow: 0 30px 60px -34px rgba(14, 42, 71, 0.35);
}
.approach-card:hover::before { transform: scale(1.5); }

.card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  display: block;
  margin-bottom: 22px;
}
.approach-card h3, .promise-item h3, .service-card h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 540;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.approach-card p { color: rgba(14, 42, 71, 0.75); font-size: 1rem; }

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

/* ==========================================================================
   Team
   ========================================================================== */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.profile + .profile { margin-top: clamp(90px, 11vw, 160px); }
.profile-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.profile-flip .profile-media { order: 2; }

.profile-media { position: sticky; top: 110px; }

.portrait {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sky-soft);
  box-shadow: 0 40px 80px -44px rgba(14, 42, 71, 0.5);
}
.portrait img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: top center;
  will-change: transform;
  transition: transform 0.9s var(--ease-out);
}
.portrait:hover img { scale: 1.03; }

.portrait-tag {
  position: relative;
  display: inline-block;
  margin-top: -24px;
  margin-left: 24px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 520;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 30px -14px rgba(11, 32, 54, 0.6);
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.profile-creds {
  font-size: 0.92rem;
  font-weight: 480;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--navy);
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  margin-bottom: 28px;
}
.profile-bio p { color: rgba(14, 42, 71, 0.8); max-width: 62ch; }
.profile-bio p + p { margin-top: 1.1em; }

.profile-details { margin-top: 34px; border-top: 1px solid var(--line); }
.profile-details details { border-bottom: 1px solid var(--line); }
.profile-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-weight: 520;
  font-size: 1.02rem;
  transition: color 0.25s ease;
}
.profile-details summary::-webkit-details-marker { display: none; }
.profile-details summary:hover { color: var(--navy); }
.profile-details summary i {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.profile-details summary i::before,
.profile-details summary i::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: transform 0.4s var(--ease-out);
}
.profile-details summary i::after { transform: translateY(-50%) rotate(90deg); }
.profile-details details[open] summary i::after { transform: translateY(-50%) rotate(0deg); }

.profile-details ul {
  padding: 0 4px 24px;
  list-style: none;
  display: grid;
  gap: 9px;
}
.profile-details li {
  position: relative;
  padding-left: 22px;
  color: rgba(14, 42, 71, 0.78);
  font-size: 0.98rem;
}
.profile-details li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sky);
}

@media (max-width: 860px) {
  .profile, .profile-flip { grid-template-columns: 1fr; }
  .profile-flip .profile-media { order: 0; }
  .profile-media { position: static; max-width: 440px; }
}

/* ==========================================================================
   Film (video)
   ========================================================================== */
.film { background: var(--paper-deep); }
.film-frame {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 50px 100px -50px rgba(14, 42, 71, 0.55);
  background: var(--navy-deep);
}
.film-frame video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   Why choose — dark statement section
   ========================================================================== */
.why {
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(91, 155, 213, 0.18), transparent 65%),
    var(--navy-deep);
  color: var(--paper);
}
.grid-why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.why-head { position: sticky; top: 120px; }

.why-list {
  list-style: none;
  counter-reset: why;
}
.why-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding-block: clamp(26px, 3vw, 40px);
  /* Keeps the numerals off the edge of the hover highlight. The rules and the
     highlight still span the full row, so their left edges stay aligned. */
  padding-inline: clamp(12px, 1.2vw, 16px);
  border-bottom: 1px solid var(--line-light);
}
.why-list li:first-child { border-top: 1px solid var(--line-light); }

/* Hover: nothing moves. A wash fades in behind the row, the rule underneath
   draws across, the numeral turns gold and the text brightens. */
.why-list li::before {
  content: "";
  position: absolute;
  /* Flush with the row so the wash starts exactly where the rules above and
     below it start. */
  inset: 0;
  background: linear-gradient(90deg, rgba(91, 155, 213, 0.16), rgba(91, 155, 213, 0));
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.why-list li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ease-out);
}
.why-list li > * { position: relative; z-index: 1; }
.why-list li:hover::before { opacity: 1; }
.why-list li:hover::after { transform: scaleX(1); }

.why-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--sky);
  transition: color 0.4s ease;
}
.why-list li:hover .why-num { color: var(--gold); }
.why-list p {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 330;
  line-height: 1.5;
  color: rgba(246, 243, 236, 0.92);
  max-width: 46ch;
  transition: color 0.4s ease;
}
.why-list li:hover p { color: var(--paper); }

@media (max-width: 860px) {
  .grid-why { grid-template-columns: 1fr; }
  .why-head { position: static; }
}

/* ==========================================================================
   Services
   ========================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 155, 213, 0.55);
  box-shadow: 0 30px 60px -36px rgba(14, 42, 71, 0.4);
}
.service-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: var(--sky-soft);
  margin-bottom: 22px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.55s var(--ease-out);
}
.service-card:hover .service-icon {
  background: var(--navy);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.1rem; line-height: 1.3; }
.service-card p { color: rgba(14, 42, 71, 0.72); font-size: 0.96rem; }

@media (max-width: 1020px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .service-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Promise
   ========================================================================== */
.promise { background: var(--paper-deep); }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
}
.promise-item {
  padding-top: 26px;
  border-top: 2px solid var(--line);
  transition: border-color 0.3s ease;
}
.promise-item:hover { border-top-color: var(--gold); }
.promise-item .card-num { margin-bottom: 16px; }
.promise-item h3 { font-size: 1.12rem; }
.promise-item p { color: rgba(14, 42, 71, 0.72); font-size: 0.97rem; }

@media (max-width: 1020px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .promise-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background:
    radial-gradient(55% 70% at 15% 100%, rgba(91, 155, 213, 0.2), transparent 65%),
    var(--navy-deep);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}
.contact-roof {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: min(120vw, 1500px);
  color: rgba(91, 155, 213, 0.25);
  pointer-events: none;
}
.contact-inner { position: relative; display: grid; justify-items: center; }
.contact .eyebrow { justify-content: center; }
.contact .eyebrow::after { content: ""; width: 42px; height: 1px; background: var(--gold); }

.contact-title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-bottom: 30px;
}
.contact-title em { font-style: italic; color: var(--sky); }

.contact-org {
  font-size: 0.85rem;
  font-weight: 520;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.65);
  margin-bottom: 14px;
}

.contact-email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 243, 236, 0.35);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-email:hover { color: var(--sky); border-color: var(--sky); }

.contact-note {
  margin-top: 22px;
  color: rgba(246, 243, 236, 0.72);
  font-size: 1.02rem;
}
.contact .btn { margin-top: 36px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #081827;
  color: rgba(246, 243, 236, 0.78);
  padding-top: clamp(64px, 8vw, 100px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 90px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.footer-logo-tile {
  display: inline-block;
  background: #fff;
  border-radius: 16px;
  padding: 14px 20px;
  margin-bottom: 22px;
}
.footer-logo-tile img { height: 56px; width: auto; }
.footer-brand p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(246, 243, 236, 0.6);
}

.footer-heading {
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; display: grid; gap: 11px; }
.site-footer ul a {
  color: rgba(246, 243, 236, 0.78);
  text-decoration: none;
  font-size: 0.97rem;
  transition: color 0.25s ease;
}
.site-footer ul a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid var(--line-light);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: rgba(246, 243, 236, 0.5);
}
.footer-crisis a { color: var(--sky); text-decoration: none; }
.footer-crisis a:hover { text-decoration: underline; }

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

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }