/* =========================================================
   Bridgeport Solutions Inc. — site styles
   ========================================================= */

:root {
  --navy: #0e1a33;
  --ink: #111a2e;
  --text: #4b5263;
  --muted: #6b7180;
  --cream: #f6f5f0;
  --line: #d9d7cf;
  --blue: #0b3f86;
  --band: #06101f;
  --white: #ffffff;

  --f-logo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader", "Times New Roman", Georgia, serif;
  --f-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5.5vw, 72px);
  --max: 1320px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-open { overflow: hidden; }

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Shared type ---------- */

.logo {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--f-logo);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  font-size: clamp(30px, 4.3vw, 52px);
}
.logo--light { color: var(--white); }
.logo--dark { color: var(--navy); }
.logo--sm { font-size: clamp(20px, 2.1vw, 24px); line-height: 1.12; }

.eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--navy);
}
.eyebrow--light { color: var(--white); }
.eyebrow--sm { font-size: 11px; letter-spacing: 0.26em; }

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 18px;
}
.eyebrow--rule::after {
  content: "";
  width: 118px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--sm.eyebrow--rule::after { width: 74px; }

.serif-title {
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.13;
  letter-spacing: -0.012em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: var(--white);
  isolation: isolate;
  background-color: var(--blue);
  min-height: min(62vw, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Full-bleed photo layers: real <img> elements so they always fill edge to edge */
.hero__bg,
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.hero__bg { object-position: right top; }
.band__bg { object-position: 70% 30%; }

.hero::after,
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::after { background: linear-gradient(90deg, rgba(8, 52, 118, 0.55) 0%, rgba(8, 52, 118, 0.25) 38%, rgba(8, 52, 118, 0) 60%); }
.band::after { background: linear-gradient(90deg, rgba(6, 16, 31, 0.95) 0%, rgba(6, 16, 31, 0.6) 30%, rgba(6, 16, 31, 0) 52%); }

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(64px, 7.5vw, 96px);
  padding-bottom: clamp(24px, 2.4vw, 36px);
}

.hero__tagline {
  margin-top: clamp(22px, 3.2vw, 40px);
  letter-spacing: 0.34em;
}
.hero__tagline span { white-space: nowrap; }

.hero__title {
  margin-top: clamp(20px, 3vw, 38px);
  font-family: var(--f-display);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.12;
  letter-spacing: 0.012em;
}
.hero__title span { display: block; }

.hero__sub {
  margin-top: clamp(18px, 2.6vw, 32px);
  letter-spacing: 0.36em;
}

.hero__lead {
  margin-top: clamp(18px, 2.4vw, 30px);
  max-width: 34ch;
  font-size: clamp(15px, 1.65vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding: 13px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  color: var(--white);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background-color 0.25s, color 0.25s;
}
.btn-outline svg { width: 18px; height: 10px; transition: transform 0.25s; }
.btn-outline:hover,
.btn-outline:focus-visible { background: var(--white); color: var(--blue); }
.btn-outline:hover svg { transform: translateX(4px); }

/* ---------- Menu ---------- */

.menu-toggle {
  display: none;
  position: absolute;
  z-index: 30;
  top: clamp(28px, 6vw, 52px);
  right: var(--gutter);
  width: 44px;
  height: 44px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.menu-toggle span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.menu-toggle[aria-expanded="true"] { position: fixed; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(6, 16, 31, 0.97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  opacity: 0;
  transition: opacity 0.3s;
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; }
.site-menu ul { display: grid; gap: 22px; margin-bottom: 48px; }
.site-menu a {
  font-family: var(--f-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  font-size: clamp(26px, 7vw, 40px);
}
.site-menu a:hover { opacity: 0.7; }

/* ---------- What we do ---------- */

.what { padding: clamp(36px, 4vw, 52px) 0 clamp(24px, 2.4vw, 36px); }

.what__intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}
.what__intro .serif-title { margin-top: clamp(18px, 2.4vw, 30px); }

.what__lead {
  margin-top: 14px;
  padding-left: clamp(0px, 4vw, 80px);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.45;
  color: var(--text);
}

.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(28px, 3.6vw, 44px);
}

.service {
  padding: 0 clamp(16px, 2.2vw, 30px);
  border-left: 1px solid var(--line);
  padding-bottom: 8px;
}
.service:first-child { padding-left: 0; border-left: 0; }

.service__icon {
  width: clamp(44px, 4.8vw, 52px);
  height: clamp(44px, 4.8vw, 52px);
  color: var(--ink);
}
.service h3 {
  margin-top: 20px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(10.5px, 1.1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
}
.service p {
  margin-top: 14px;
  font-size: clamp(13.5px, 1.35vw, 15px);
  line-height: 1.5;
  color: var(--text);
  max-width: 30ch;
}

/* ---------- Global band ---------- */

.band {
  position: relative;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  background-color: var(--band);
}

.band__inner {
  min-height: clamp(180px, 19vw, 260px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 36px;
}

.band__title {
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.42em;
  line-height: 1.6;
}
.band__title span { display: block; }

.band__rule {
  display: block;
  width: 50px;
  height: 1.5px;
  margin: 12px 0 18px;
  background: rgba(255, 255, 255, 0.85);
}

.band__text {
  max-width: 36ch;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.band__cta { display: none; }

/* ---------- Contact ---------- */

.contact { padding: clamp(28px, 3vw, 40px) 0; }

.contact__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

.contact__title {
  margin-top: 16px;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.7vw, 32px);
  line-height: 1.2;
  color: var(--ink);
}

.contact__details {
  border-left: 1px solid var(--line);
  padding: 8px 0 8px clamp(28px, 4.4vw, 56px);
  min-width: min(400px, 36vw);
  font-size: clamp(14px, 1.45vw, 17px);
  color: var(--text);
}
.contact__name { font-weight: 500; color: var(--ink); }
.contact__details p + p { margin-top: 4px; }

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--ink);
  font-weight: 400;
  transition: color 0.2s;
}
.contact__email svg { width: 22px; height: 17px; }
.contact__email:hover { color: var(--blue); }

.circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--band);
  color: var(--white);
  transition: transform 0.25s, background-color 0.25s;
}
.circle-btn svg { width: 22px; height: 22px; }
.circle-btn:hover { transform: translateX(3px); background: var(--blue); }
.circle-btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.9); }
.circle-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.contact__circle { display: none; }

/* ---------- Footer ---------- */

.footer { padding-bottom: 28px; }

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 18px;
  position: relative;
}
.footer__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * 0.35);
  right: calc(var(--gutter) * 0.35);
  height: 1px;
  background: var(--line);
}

.footer__motto { font-size: 11px; letter-spacing: 0.42em; font-weight: 400; color: var(--ink); }

.footer__loc {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-weight: 400;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: var(--ink);
}
.footer__loc span { width: 46px; height: 1px; background: currentColor; opacity: 0.6; }

.footer__copy {
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================
   Tablet / small laptop
   ========================================================= */

@media (max-width: 960px) {
  .menu-toggle { display: flex; }
}

/* =========================================================
   Phone portrait & narrow tablets
   ========================================================= */

@media (max-width: 760px) {
  .hero {
    min-height: 0;
    background-color: #00427f;
  }
  /* photo fills the full width across the top, fading into the water colour below */
  .hero__bg { height: 82%; object-position: 48% top; }
  .hero::after { background: linear-gradient(180deg, rgba(0, 66, 127, 0) 48%, #00427f 80%); }

  .hero__inner { padding-top: 76px; padding-bottom: 26px; }
  .logo--light { font-size: clamp(28px, 8.6vw, 40px); }

  .hero__tagline { margin-top: 20px; line-height: 1.75; font-size: 11px; }
  .hero__tagline span { display: block; }

  .hero__title { font-size: clamp(24px, 7.3vw, 40px); margin-top: 16px; line-height: 1.1; }
  .hero__sub { margin-top: 18px; font-size: 11px; }
  .hero__lead { font-size: 15px; max-width: 36ch; margin-top: 16px; }
  .btn-outline { margin-top: 22px; padding: 12px 24px; }

  .what { padding-top: 32px; padding-bottom: 20px; }
  .what__intro { grid-template-columns: 1fr; gap: 0; }
  .what__intro .serif-title { font-size: clamp(24px, 7.4vw, 40px); }
  .what__lead { padding-left: 0; margin-top: 16px; font-size: 17px; }

  .services {
    grid-template-columns: 1fr 1fr;
    row-gap: 22px;
    margin-top: 28px;
  }
  .service,
  .service:first-child {
    border-left: 0;
    padding-left: 0;
    padding-right: 16px;
  }
  .service:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 7vw, 48px);
    padding-right: 0;
  }
  .service h3 { font-size: 10px; letter-spacing: 0.17em; margin-top: 16px; white-space: normal; }
  .service p { font-size: 14px; margin-top: 8px; line-height: 1.42; }

  .band__bg { object-position: 78% 20%; }
  .band__inner { min-height: 160px; padding-top: 26px; padding-bottom: 24px; }
  .band__title { font-size: 11px; letter-spacing: 0.34em; }
  .band__rule { width: 40px; margin: 8px 0 14px; }
  .band__text { font-size: 13px; max-width: 26ch; }

  .contact { padding: 24px 0 26px; }
  .contact__inner { gap: 16px; }
  .contact__details { display: none; }
  .contact__circle { display: inline-flex; }
  .contact__title { font-size: clamp(16px, 4.7vw, 24px); margin-top: 10px; }

  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
    padding-top: 26px;
  }
  .footer__inner::before { left: var(--gutter); right: var(--gutter); }
  .footer__loc { justify-self: start; }
}

@media (max-width: 380px) {
  .services { grid-template-columns: 1fr; }
  .service:nth-child(even) { border-left: 0; padding-left: 0; }
}

/* =========================================================
   Phone landscape (short & wide) — compact, tight layout
   ========================================================= */

@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  :root { --gutter: 28px; }

  /* Hero: sized off viewport height so it fits under Safari's toolbars */
  .hero {
    min-height: 0;
    background-color: var(--blue);
  }
  .hero__bg { height: 100%; object-position: right 30%; }
  .hero::after { background: linear-gradient(90deg, rgba(8, 52, 118, 0.5) 0%, rgba(8, 52, 118, 0) 55%); }
  .hero__inner { padding-top: 5vh; padding-bottom: 5vh; }
  .logo--light { font-size: clamp(20px, 7vh, 30px); }
  .hero__tagline { margin-top: 1.2vh; font-size: 10px; line-height: 1.4; letter-spacing: 0.3em; }
  .hero__tagline span { display: inline; }
  .hero__title { font-size: clamp(20px, 8vh, 34px); margin-top: 3vh; line-height: 1.06; }
  .hero__sub { margin-top: 2.4vh; font-size: 10px; }
  .hero__lead { margin-top: 1.6vh; font-size: clamp(12.5px, 3.9vh, 15px); max-width: 52ch; line-height: 1.4; }
  .btn-outline { margin-top: 3vh; padding: 8px 18px; font-size: 11px; }
  .menu-toggle { top: 14px; width: 38px; height: 38px; padding: 9px 3px; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .site-menu ul { gap: 12px; margin-bottom: 24px; }
  .site-menu a { font-size: 24px; }

  /* What we do */
  .what { padding-top: 22px; padding-bottom: 18px; }
  .what__intro { grid-template-columns: 1.1fr 1fr; gap: 28px; }
  .what__intro .serif-title { font-size: clamp(22px, 3.3vw, 32px); margin-top: 10px; }
  .what__lead { padding-left: 0; margin-top: 24px; font-size: 14px; line-height: 1.45; }

  /* Services: icon beside text; 2x2 on smaller phones, 4-up on large ones */
  .services { grid-template-columns: 1fr 1fr; margin-top: 20px; row-gap: 18px; }
  .service,
  .service:first-child,
  .service:nth-child(even) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    column-gap: 14px;
    min-width: 0;
    padding: 0 18px 0 0;
    border-left: 0;
  }
  .service:nth-child(even) { padding: 0 0 0 18px; border-left: 1px solid var(--line); }
  .service__icon { grid-row: span 2; width: 36px; height: 36px; }
  .service h3 { margin-top: 2px; font-size: 10px; letter-spacing: 0.18em; white-space: normal; }
  .service p { margin-top: 6px; font-size: 12.5px; line-height: 1.45; max-width: none; }

  /* Band + inline CTA */
  .band__bg { object-position: 75% 25%; }
  .band::after { background: linear-gradient(90deg, rgba(6, 16, 31, 0.95) 0%, rgba(6, 16, 31, 0.75) 45%, rgba(6, 16, 31, 0) 75%); }
  .band__inner { min-height: 0; flex-wrap: wrap; row-gap: 18px; padding-top: 22px; padding-bottom: 22px; }
  .band__copy { flex: 1 1 300px; }
  .band__title { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 10px; }
  .band__title span { display: inline; }
  .band__rule { display: none; }
  .band__text { max-width: 44ch; font-size: 12.5px; }
  .band__cta { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; }
  .band__cta-text { margin-top: 8px; font-family: var(--f-serif); font-size: 15px; line-height: 1.3; }
  .circle-btn { width: 46px; height: 46px; }
  .circle-btn svg { width: 20px; height: 20px; }

  .contact { display: none; }

  /* Footer in one row */
  .footer__inner {
    grid-template-columns: auto 1fr auto;
    justify-items: stretch;
    gap: 16px;
    padding-top: 18px;
    padding-bottom: 10px;
  }
  .footer__inner::before { left: var(--gutter); right: var(--gutter); }
  .logo--sm { font-size: 16px; }
  .footer__motto { justify-self: center; font-size: 9.5px; letter-spacing: 0.3em; }
  .footer__loc { justify-self: end; font-size: 9px; gap: 12px; }
  .footer__loc span { width: 28px; }
  .footer { padding-bottom: 16px; }
  .footer__copy { font-size: 11px; }
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 880px) {
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .service,
  .service:first-child,
  .service:nth-child(even) { padding: 0 14px; border-left: 1px solid var(--line); }
  .service:first-child { padding-left: 0; border-left: 0; }
  .band__copy { flex-basis: 380px; }
}

/* ---------- Notch / Dynamic Island safe areas ---------- */

@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .menu-toggle { right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-menu {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* =========================================================
   Phones (portrait + landscape): dark footer so the page ends
   flush with no pale strip under the home indicator
   ========================================================= */

@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  /* colour shown in iOS bounce / safe areas beyond the page */
  html { background: var(--band); }
  .footer {
    background: var(--band);
    color: rgba(255, 255, 255, 0.75);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .footer__inner::before { content: none; }
  .footer .logo--dark { color: var(--white); }
  .footer__motto,
  .footer__loc { color: rgba(255, 255, 255, 0.8); }
  .footer__copy {
    color: rgba(255, 255, 255, 0.45);
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .contact { padding-bottom: 28px; }
}

@media (max-width: 760px) {
  .footer__inner { padding-top: 26px; padding-bottom: 14px; gap: 10px; }
}

/* ---------- Motion preferences ---------- */

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