/* ==========================================================================
   Baby Safety Inc. — Shared page shell
   Everything that repeats across index / about / brand / contact lives here so
   the per-page stylesheets only carry what is genuinely unique to that page.
   1. shell     2. header        3. page banner   4. section helpers
   5. cards     6. statement band 7. connect band 8. footer
   9. responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.page {
  --page-container: 1240px;
  --page-header-h: 100px;
  --page-rule: #e3e9ef;
  --page-tint: #f1f4f7;
  --page-tint-soft: #f6f9fb;
  background: var(--white);
}

.page .container {
  width: min(var(--page-container), calc(100% - 56px));
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
.page .site-header {
  background: rgba(255, 255, 255, 0.98);
}

.page .header-inner {
  min-height: var(--page-header-h);
  gap: 24px;
}

.page .brand {
  gap: 18px;
}

/* The shield sits on a white badge that breaks past the header baseline. The
   badge box is the *visible* shield; logo.png carries transparent padding that
   is offset out of frame so the artwork itself is never altered. */
.page .brand-badge {
  position: relative;
  display: block;
  width: 97px;
  height: 60px;
  flex-shrink: 0;
}

.page .brand-badge::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -20px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--white);
}

.page .brand-badge img {
  position: absolute;
  top: -25px;
  left: -33px;
  width: 163px;
  height: 141px;
  max-width: none;
  object-fit: contain;
}

.page .brand-tagline {
  max-width: 152px;
  font-size: 12px;
  line-height: 1.5;
  color: #93a3b1;
}

.page .nav-list {
  gap: 40px;
}

.page .nav-list a {
  font-size: 15px;
  padding-block: 10px;
}

.page .header-cta {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: 6px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   3. Page banner — full-bleed photo with copy laid over a white scrim
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eef2f5;
}

.page-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.page-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.95) 26%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 62%
  );
}

.page-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(300px, 26vw, 375px);
  padding: clamp(58px, 5.6vw, 80px) 0 clamp(26px, 2.3vw, 34px);
}

.page-banner-copy {
  max-width: 620px;
}

.page-banner h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-dark);
}

.page-banner-sub {
  margin-top: 16px;
  font-size: clamp(1rem, 1.32vw, 1.1875rem);
  font-weight: 800;
  line-height: 1.34;
  color: var(--navy-dark);
}

.page-banner-lead {
  margin-top: 14px;
  max-width: 480px;
  font-size: clamp(0.9rem, 1.05vw, 0.95rem);
  line-height: 1.66;
  color: #4f6478;
}

.page-banner .btn-row {
  margin-top: 26px;
  gap: 14px;
}

.page-banner .btn {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: 6px;
}

.page-banner-script {
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(1.1rem, 1.72vw, 1.5rem);
  line-height: 1.24;
  color: #1f4468;
}

.page-banner-script .script-heart {
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px auto 0;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   4. Section helpers
   -------------------------------------------------------------------------- */
.page-section {
  padding: clamp(34px, 3vw, 44px) 0;
}

.page-section--tint {
  background: var(--page-tint);
}

.page-section--tint-soft {
  background: var(--page-tint-soft);
}

.section-intro {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.section-intro h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.2;
}

.section-intro p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--text-body);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 1.9vw, 26px);
}

.section-head h2 {
  font-size: clamp(1.45rem, 2.22vw, 2rem);
  line-height: 1.2;
}

.link-arrow {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  transition: color var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--navy-deep);
}

/* Big Safe-O-Kid wordmark used on the about and brand pages. */
.sok-lockup {
  text-align: center;
}

.sok-lockup-mark {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--navy);
}

/* The swoosh that arcs over the closing "Kid" in the brand lockup. */
.sok-lockup-arc {
  position: absolute;
  right: 3%;
  top: -0.3em;
  width: 34%;
  height: auto;
  color: #94b8da;
}

.sok-lockup-mark sup {
  font-size: 0.3em;
  top: -1.1em;
}

.sok-lockup-tagline {
  display: block;
  margin-top: 8px;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  color: #55708a;
}

/* --------------------------------------------------------------------------
   5. Shared cards
   -------------------------------------------------------------------------- */
.address-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.address-card-head img {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
}

.address-card-head strong {
  font-size: 15px;
  color: var(--navy-dark);
}

/* Photo card with a flag + place caption, used for the presence sections. */
.place-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.place-card img {
  width: 100%;
  height: clamp(120px, 11.6vw, 168px);
  object-fit: cover;
}

.place-card figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(3px);
}

.place-card figcaption img {
  width: 26px;
  height: 19px;
  border-radius: 3px;
  flex-shrink: 0;
}

.place-card-name {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy-dark);
}

.place-card-where {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   6. Statement band — dark cinematic strip
   -------------------------------------------------------------------------- */
.statement-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.statement-band-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Lets a <picture> swap the art direction without becoming a layout box of
   its own between the media wrapper and the image. */
.statement-band-media picture {
  display: contents;
}

.statement-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

/* The photographs carry a baked-in navy grade, so this only needs to deepen
   the left third enough for the headline to hold contrast. */
.statement-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 27, 55, 0.88) 0%,
    rgba(0, 33, 66, 0.74) 34%,
    rgba(0, 40, 78, 0.4) 56%,
    rgba(0, 44, 86, 0.12) 78%,
    rgba(0, 44, 86, 0) 100%
  );
}

.statement-band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(210px, 18.2vw, 262px);
  padding: clamp(24px, 2.1vw, 30px) 0 clamp(22px, 1.9vw, 28px);
}

.statement-band h2 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--white);
}

.statement-band-copy p {
  margin-top: 12px;
  max-width: 27rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.statement-band .btn-ghost {
  margin-top: 16px;
  min-height: 44px;
  border-radius: 6px;
  border-width: 1.5px;
}

.statement-band-script {
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(1.2rem, 1.85vw, 1.65rem);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.94);
}

.statement-band-script .script-heart {
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px auto 0;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   7. Connect band
   -------------------------------------------------------------------------- */
.connect-band {
  padding: clamp(18px, 1.6vw, 22px) 0 0;
}

.connect-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 40px);
}

.connect-band-copy h2 {
  font-size: clamp(1.35rem, 2.01vw, 1.8125rem);
  line-height: 1.22;
}

.connect-band-copy p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--text-body);
}

.connect-band-actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.9vw, 28px);
}

.mail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color var(--ease);
}

.mail-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mail-link:hover,
.mail-link:focus-visible {
  color: var(--navy);
}

.connect-band .btn {
  min-height: 46px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.page-footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f2f6fa 100%);
  border-top: 1px solid #e3eaf1;
  padding: clamp(30px, 2.6vw, 38px) 0 0;
}

.page-footer .footer-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 2.2vw, 32px);
}

.page-footer .footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.page-footer .footer-logo {
  position: relative;
  display: block;
  width: 59px;
  height: 68px;
  flex-shrink: 0;
}

.page-footer .footer-logo img {
  position: absolute;
  top: -8px;
  left: -20px;
  width: 99px;
  height: 85px;
  max-width: none;
  object-fit: contain;
}

.page-footer .footer-brand-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-dark);
}

.page-footer .footer-brand p {
  margin-top: 7px;
  max-width: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

.page-footer .footer-col h4 {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 11px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-dark);
}

.page-footer .footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
}

.page-footer .footer-col a,
.page-footer .footer-col p,
.page-footer .footer-col address {
  margin-bottom: 7px;
  font-size: 13.5px;
}

.page-footer .footer-col a {
  color: var(--text-body);
  transition: color var(--ease);
}

.page-footer .footer-col a:hover,
.page-footer .footer-col a:focus-visible {
  color: var(--navy);
}

.page-footer .footer-bottom {
  margin-top: clamp(18px, 1.8vw, 26px);
  padding: 16px 0 24px;
  border-top: 1px solid #e0e8ef;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .page .container {
    width: calc(100% - 44px);
  }

  .page .brand-tagline {
    display: none;
  }

  .page .nav-list {
    gap: 26px;
  }
}

@media (max-width: 1024px) {
  .page {
    --page-header-h: 84px;
  }

  .page .brand-badge {
    width: 79px;
    height: 50px;
  }

  .page .brand-badge::before {
    left: -14px;
    top: -17px;
    width: 106px;
    height: 106px;
  }

  .page .brand-badge img {
    top: -21px;
    left: -27px;
    width: 133px;
    height: 115px;
  }

  .page-banner-media img {
    object-position: 58% 26%;
  }

  .page-banner-media::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.94) 40%,
      rgba(255, 255, 255, 0.68) 58%,
      rgba(255, 255, 255, 0.2) 76%,
      rgba(255, 255, 255, 0) 92%
    );
  }
}

@media (max-width: 860px) {
  .page {
    --page-header-h: 76px;
  }

  .page .brand-badge {
    width: 69px;
    height: 44px;
  }

  .page .brand-badge::before {
    left: -12px;
    top: -15px;
    width: 94px;
    height: 94px;
  }

  .page .brand-badge img {
    top: -19px;
    left: -24px;
    width: 117px;
    height: 101px;
  }

  /* stretch, not flex-start: a column flex container would otherwise size
     children to their content and push text past the viewport. */
  .page-banner-inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 48px 0 40px;
  }

  /* Stacked layouts put copy over the middle of the photo, so the scrim goes
     vertical and stays heavier all the way down. */
  .page-banner-media::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.93) 52%,
      rgba(255, 255, 255, 0.74) 78%,
      rgba(255, 255, 255, 0.48) 100%
    );
  }

  .statement-band-media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 27, 55, 0.86) 0%,
      rgba(0, 33, 66, 0.74) 50%,
      rgba(0, 40, 78, 0.66) 100%
    );
  }

  .page-banner-script {
    order: -1;
    margin: 0 0 20px;
    align-self: flex-end;
  }

  .page-banner-copy,
  .page-banner-lead {
    max-width: 100%;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .statement-band-inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* 27rem is wider than the stacked container, and the band clips its
     overflow, so the last words of each line would simply disappear. */
  .statement-band-copy p {
    max-width: 100%;
  }

  .statement-band-script {
    order: -1;
    align-self: flex-end;
    margin-bottom: 14px;
  }

  .connect-band-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .page-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .page .container {
    width: calc(100% - 32px);
  }

  .page-banner .btn-row .btn,
  .connect-band-actions .btn {
    width: 100%;
  }

  .connect-band-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .page-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-footer .footer-brand {
    grid-column: 1;
  }
}