/* ============================================================
   DESIGN TOKENS
   Custom properties (the "--name" things) are variables you
   define once and reuse everywhere with var(--name). Change the
   value here and every place that uses it updates at once.
   ============================================================ */
:root {
  --navy-900: #050c1c;
  --navy-800: #081428;
  --navy-700: #0d1c36;
  --navy-500: #16376b;
  --gold:     #E5A526;
  --paper:    #F4F6FA;
  --ink:      #101a2e;
  --ink-soft: #5b6679;

  --shell: 1280px;   /* max content width */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;   /* BUG FIX: with nothing set, any element even
    a pixel wider than the viewport creates horizontal scroll — and
    scrolling that reveals whatever's sitting behind the visible page
    (raw body background, an off-screen panel's edge, etc.). This is
    a standard, safe blanket fix for exactly that class of "stray bar
    on the side" bug, regardless of which specific element is a pixel
    too wide at a given screen size. Safe on position:fixed elements
    like the navbar, since fixed positioning is relative to the
    viewport either way. */
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   GLOBAL "PRESS" MICRO-INTERACTION
   Every clickable element gets the same short, fluid feedback on
   press — a quick, small scale-down. -webkit-tap-highlight-color
   removes the default gray flash mobile browsers add on tap, so this
   replaces it with something deliberate instead of fighting it.
   ============================================================ */
a, button {
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s cubic-bezier(.4,0,.2,1);
}
a:active, button:active { transform: scale(.96); }

/* Respect the OS "reduce motion" setting. Some people get motion
   sickness from animation; this is a basic accessibility duty. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loader {
  position: fixed; inset: 0;       /* inset:0 = top/right/bottom/left all 0 */
  z-index: 9999;
  background: var(--navy-900);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  transition: opacity .7s ease, visibility .7s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader-logo { width: 190px; max-width: 45vw; animation: loaderPulse 2s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.loader-bar { width: 190px; max-width: 45vw; height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.loader-bar-fill { display: block; height: 100%; width: 40%; background: var(--gold); animation: loaderSlide 1.1s ease-in-out infinite; }
@keyframes loaderSlide { from { transform: translateX(-120%); } to { transform: translateX(340%); } }

/* ============================================================
   NAVBAR — floating translucent capsule, iOS-style
   The core trick behind "iOS design language" isn't decoration, it's
   three specific techniques: translucency (backdrop-filter blur, so
   content behind shows through faintly), a fully-rounded capsule
   shape instead of a hard-edged bar, and pill-shaped controls that
   fill with a soft background on hover/press rather than underlining
   or changing color outright.
   ============================================================ */
.navbar {
  position: fixed; top: 16px; left: 0; right: 0;
  /* BUG FIX: centers a fixed-width box (via left:0; right:0; margin:auto)
     instead of the old left:50%; transform:translateX(-50%). Visually
     identical — but a CSS transform on an element turns that element
     into the "containing block" for any of its own position:fixed
     descendants. .nav-links (the mobile slide-in panel) lives inside
     .navbar, so with the transform in place its top:0/right:0 were
     measured against this small floating capsule instead of the real
     screen edges — a likely cause of the mobile menu sitting slightly
     off, or jumping when the capsule's own "top" value changes on
     scroll. margin:auto centering gets the same look without creating
     that containing block, so nav-links anchors to the viewport again. */
  margin: 0 auto;
  width: min(94vw, 1180px);
  z-index: 100;

  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;   /* fully rounded ends = "capsule" */

  background: rgba(8, 16, 34, .48);
  /* backdrop-filter samples whatever is behind the element and blurs
     it — this is the actual mechanism behind every iOS translucent
     panel (Control Center, tab bars, nav bars). saturate() punches
     the color of what shows through slightly, matching Apple's own
     "vibrancy" look rather than a flat grey blur. */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);

  transition: background .4s ease, box-shadow .4s ease, top .4s ease;
}
/* Added by JavaScript once the user scrolls past the hero — the
   capsule settles closer to the edge and turns slightly more opaque,
   the same "condensing" behaviour iOS bars use once content scrolls
   underneath them. */
.navbar.is-solid {
  top: 10px;
  background: rgba(6, 12, 27, .72);
  box-shadow: 0 14px 38px rgba(0,0,0,.36);
}

.nav-brand { display: flex; align-items: center; padding-left: 4px; }
.nav-brand img {
  height: 42px;      /* up from 28px — the logo is the single most
                         important brand element in the header, so it
                         should read as confidently as any nav link */
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));   /* subtle lift off
    the translucent capsule background, rather than sitting flat on it */
}

.nav-links { display: flex; align-items: center; gap: 4px; }

/* Every nav item — links and the dropdown button alike — is a pill
   that only reveals its background on hover/focus. This "content
   first, chrome on demand" behaviour is the other half of the iOS
   look: nothing is boxed-in by default. */
.nav-links a, .nav-drop-toggle {
  color: rgba(255,255,255,.85);
  text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.nav-links a:hover, .nav-drop-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-links a:active, .nav-drop-toggle:active { background: rgba(255,255,255,.16); }

/* ---------- "OUR BUSINESSES" DROPDOWN ----------
   .nav-item is the positioning anchor (position: relative) so the
   dropdown panel — which is position: absolute — places itself
   relative to THIS button, not the whole page. */
.nav-item { position: relative; }

.nav-drop-toggle {
  background: none; border: none; cursor: pointer;
  /* BUG FIX: this used to say "font: inherit". That shorthand resets
     font-size AND font-weight too, which silently overrode the 14px /
     500 set in the shared rule above (same specificity, later wins) —
     so this one button rendered bigger and lighter than its neighbours.
     Buttons ignore the page font by default, so family still needs
     inheriting, but only the family. */
  font-family: inherit;
  display: flex; align-items: center; gap: 7px;
  /* color, font-size, padding, border-radius, hover/active states all
     come from the shared ".nav-links a, .nav-drop-toggle" rule above —
     redeclaring any of them here would silently override that rule
     (same specificity, later in the file wins), which is exactly the
     bug this comment is warning the next edit away from. */
}
.drop-caret { font-size: 10px; transition: transform .3s ease; display: inline-block; }
.has-dropdown.is-open .drop-caret { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16,26,46,.06);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 22px 46px rgba(5,12,28,.22);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.dropdown-panel.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-panel a {
  color: var(--ink); font-size: 14px;
  padding: 11px 14px; border-radius: 8px;
  transition: background .2s ease;
}
.dropdown-panel a:hover { background: var(--paper); color: var(--ink); }
.drop-wip { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft) !important; }
.wip-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  background: rgba(16,26,46,.08); padding: 2px 7px; border-radius: 20px;
}

/* ---------- MOBILE HAMBURGER BUTTON ----------
   Hidden on desktop; the responsive block near the bottom of this file
   switches it on and hides .nav-links as a row, replacing it with a
   slide-in panel. */
.nav-burger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;      /* 40px keeps it a comfortable tap target */
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none; cursor: pointer; padding: 0;
  z-index: 110;
  transition: background .2s ease;
}
.nav-burger:hover { background: rgba(255,255,255,.16); }
.nav-burger span {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform .3s ease, opacity .3s ease;
}
/* When open, morph the three bars into an X.
   Each bar is 2px tall with a 5px gap, so the top/bottom bars sit 7px
   from center — that's where these translateY values come from. */
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section { position: relative; overflow: hidden; background: var(--navy-900); padding: 90px 20px; }
.contact-inner {
  position: relative; z-index: 1;
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px;
  align-items: start;
}
.contact-info h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 500; margin: 8px 0 16px; }
.contact-info p { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; margin-bottom: 28px; max-width: 380px; }
.contact-details { display: flex; flex-direction: column; gap: 12px; }
.contact-details a, .contact-details span {
  color: rgba(255,255,255,.75); font-size: 14.5px; line-height: 1.6;
  text-decoration: none; transition: color .2s ease;
}
.contact-details a:hover { color: var(--gold); }

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #fff;
  font-family: inherit; font-size: 14.5px;
  resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.4); }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,.09);
}
.contact-form button { align-self: flex-start; }

@media (max-width: 800px) {
  .contact-inner { grid-template-columns: 1fr; }
}

.site-footer { background: var(--navy-900); color: rgba(255,255,255,.75); padding: 72px 0 0; }

.footer-top {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px) 50px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-logo { height: 30px; margin-bottom: 16px; display: block; }
.footer-brand p { font-size: 13.5px; line-height: 1.7; max-width: 26ch; color: rgba(255,255,255,.55); }

.footer-col h4 {
  color: #fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 18px; font-weight: 600;
}
.footer-col a, .footer-text {
  display: block; color: rgba(255,255,255,.65); text-decoration: none;
  font-size: 14px; margin-bottom: 12px; line-height: 1.55;
}
.footer-col a:hover { color: #fff; }

.footer-legal a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s ease; }
.footer-legal a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  max-width: var(--shell); margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 40px);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,.45);
}

/* ============================================================
   SIGNATURE DECORATIVE COMPONENTS
   Pulled from NOAH_WEBSITE.pdf's own cover design (the diagonal
   navy/gold ribbon in its top-left corner, and the small flourish
   divider used under headings) — reused here as the site's own
   recurring visual signature, rather than an invented decoration.
   ============================================================ */

/* The diagonal ribbon. Two skewed bands drawn with pseudo-elements —
   cheaper than an SVG or image for something this simple, and just as
   crisp at any screen size. Add `.br` to mirror it into the opposite
   corner (bottom-right) for variety across sections. */
.corner-accent {
  position: absolute; top: 0; left: 0;
  width: 320px; height: 170px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.corner-accent::before, .corner-accent::after {
  content: "";
  position: absolute;
  width: 420px; height: 30px;
  top: 26px; left: -70px;
  transform: rotate(-24deg);
  transform-origin: top left;
}
.corner-accent::before { background: var(--navy-500); opacity: .9; }
.corner-accent::after  {
  top: 60px;
  background: linear-gradient(90deg, var(--gold), #caa23a);
  animation: ribbonShimmer 5s ease-in-out infinite;   /* the "moving
    graphic": a slow brightness pulse along the gold band, subtle
    enough to read as alive without competing for attention */
}
@keyframes ribbonShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }

.corner-accent.br {
  top: auto; bottom: 0; left: auto; right: 0;
  transform: rotate(180deg);   /* flips the whole ribbon into the
    opposite corner without redrawing it */
}

/* A soft, slowly drifting glow for otherwise flat sections — the
   "moving graphic" for plain backgrounds that have no photo or video
   of their own. Very low opacity by design: felt, not seen directly. */
.ambient-glow {
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,165,38,.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
  animation: glowDrift 20s ease-in-out infinite alternate;
}
.ambient-glow.top-right { top: -220px; right: -220px; }
.ambient-glow.bottom-left { bottom: -220px; left: -220px; }
@keyframes glowDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 6%) scale(1.08); }
}

/* The flourish divider — a thin gold line with a small diamond
   center, echoing the "—❖—" ornament under headings in NOAH's PDF. */
.flourish {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 20px 0 34px;
}
.flourish::before, .flourish::after {
  content: ""; flex: 1; height: 1px; max-width: 90px;
}
.flourish::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.flourish::after  { background: linear-gradient(90deg, var(--gold), transparent); }
.flourish i {
  width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); font-style: normal; display: block;
}
.flourish.left { justify-content: flex-start; }
.flourish.left::before { display: none; }   /* no leading line when
  left-aligned — it would float disconnected from the text above it */

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-500));
  color: #fff; text-align: center;
  padding: 168px 20px 86px;
}
.page-hero .eyebrow {
  position: relative; z-index: 1;
  display: block; color: var(--gold); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px;
}
.page-hero h1 { position: relative; z-index: 1; font-size: clamp(34px, 5vw, 56px); font-weight: 500; }
.page-hero p {
  position: relative; z-index: 1; max-width: 640px; margin: 16px auto 0;
  font-size: clamp(15px, 1.5vw, 17.5px); font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.82);
}

.about-block { position: relative; overflow: hidden; padding: 90px 20px; }
.about-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.about-inner h2 {
  font-size: clamp(26px, 3vw, 34px); color: var(--navy-700); font-weight: 500;
  margin-bottom: 8px;
}
.about-inner p { font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin-bottom: 18px; }

/* Careers page — "What We Look For" grid */
/* Flexbox instead of an auto-fit grid: with 4 cards a grid leaves the 4th
   stranded at the left of row two. Centered flex-wrap puts a lone last card
   in the middle at every width (3 + 1 on desktop, 2 + 2 on tablets, 1 per
   row on phones) without needing a special case for each screen size. */
.values-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 36px;
  margin-top: 44px;
}
.value-card { text-align: center; flex: 0 1 calc((100% - 72px) / 3); min-width: 0; }
@media (max-width: 860px) { .value-card { flex-basis: calc((100% - 36px) / 2); } }
@media (max-width: 560px) { .value-card { flex-basis: 100%; max-width: 420px; } }
.value-icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--navy-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.value-icon svg { width: 26px; height: 26px; }
.value-card h3 { font-size: 17px; color: var(--navy-700); margin-bottom: 8px; font-weight: 500; }
.value-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* Corporate Profile download strip */
.profile-download { padding: 0 20px 90px; }
.profile-download-inner {
  max-width: var(--shell); margin: 0 auto;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  border-radius: 16px;
  padding: 40px 44px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  box-shadow: 0 20px 44px rgba(16,26,46,.18);
}
.profile-download-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,.1); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.profile-download-icon svg { width: 30px; height: 30px; }
.profile-download-text { flex: 1; min-width: 240px; color: #fff; }
.profile-download-text h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; margin: 6px 0 8px; }
.profile-download-text p { font-size: 14.5px; color: rgba(255,255,255,.75); line-height: 1.6; max-width: 480px; }
.profile-download-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--navy-900);
  padding: 14px 24px; border-radius: 30px; font-weight: 600; font-size: 14px;
  text-decoration: none;
}
/* Applied by script.js if it checks for the PDF and doesn't find it —
   see the note in script.js for why this check exists at all. */
.profile-download-btn.is-unavailable {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.6);
  pointer-events: none; cursor: default;
}

/* ---------- Simple content page (e.g. Crestpoint): intro text, a role
   callout, and a chip list of services — reusing the site's existing
   tokens (--navy-700, --gold, --paper) rather than inventing new ones. */
.page-content { position: relative; overflow: hidden; background: var(--paper); padding: 90px 20px 110px; }
.page-content-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.page-content-inner h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--navy-700); font-weight: 500; margin-bottom: 8px; }
.page-content-inner p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 18px; }
.page-badge-row { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.page-badge {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 19px; letter-spacing: .5px;
  box-shadow: 0 10px 24px rgba(13,28,54,.25);
}
.page-badge-name { font-size: 15.5px; font-weight: 700; color: var(--navy-700); line-height: 1.4; letter-spacing: .3px; }
.page-badge-name span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--ink-soft); margin-top: 2px; }
.role-callout {
  background: #fff; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  padding: 22px 26px; margin: 6px 0 30px; box-shadow: 0 10px 26px rgba(16,26,46,.06);
}
.role-callout p { margin: 0; }
.role-callout strong { color: var(--navy-700); }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px; padding: 0; list-style: none; }
.chip-list li {
  padding: 9px 16px; border: 1px solid rgba(16,26,46,.14); border-radius: 30px;
  font-size: 13.5px; font-weight: 500; color: var(--navy-700); background: #fff;
}

/* Real company logo (e.g. Crestpoint's), shown on its own white card at
   hero size rather than the small circular monogram — the monogram
   remains as the automatic fallback if the file is ever missing. */
.entity-logo-card {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 16px; padding: 22px 30px; margin-bottom: 36px;
  box-shadow: 0 14px 34px rgba(16,26,46,.09);
}
.entity-logo-card img { display: block; height: 64px; width: auto; max-width: 280px; }

/* Two columns: the running text on the left, a compact "at a glance"
   fact box on the right. Falls back to one column on narrow screens. */
.content-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 760px) { .content-split { grid-template-columns: 1fr; } }
.fact-box { background: #fff; border-radius: 14px; padding: 26px 28px; box-shadow: 0 14px 34px rgba(16,26,46,.08); }
.fact-box h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 18px;
}
.fact-box dl { display: grid; gap: 18px; margin: 0; }
.fact-box dt { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #b9861a; }
.fact-box dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--navy-700); line-height: 1.4; }

/* Services as small icon cards instead of plain text chips. */
.service-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin: 24px 0 34px; padding: 0; list-style: none;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
.service-item {
  background: #fff; border-radius: 12px; padding: 20px 14px; text-align: center;
  box-shadow: 0 10px 24px rgba(16,26,46,.06); transition: transform .25s ease, box-shadow .25s ease;
}
.service-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16,26,46,.11); }
.service-item svg {
  width: 40px; height: 40px; margin: 0 auto 12px; padding: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: var(--gold);
  stroke-width: 1.6; box-sizing: border-box;
}
.service-item span { display: block; font-size: 13px; font-weight: 600; color: var(--navy-700); line-height: 1.35; }

/* Closing statement, set apart from the running text. */
.closing-panel {
  border-top: 1px solid rgba(16,26,46,.1); margin-top: 8px; padding-top: 28px;
}
.closing-panel p { font-size: 16.5px; font-style: italic; color: var(--navy-700); margin: 0; }

.chairman { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; padding: 90px 20px; }
.chairman-inner {
  position: relative; z-index: 1;
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px;
  align-items: center;
}
.chairman-photo {
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
.chairman-photo img { width: 100%; height: auto; display: block; }
.eyebrow-dark {
  display: block; color: var(--gold); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px;
}
.chairman-text h2 {
  font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.25;
  margin-bottom: 22px;
}
.chairman-text p {
  font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.78);
  margin-bottom: 16px;
}

@media (max-width: 800px) {
  .chairman-inner { grid-template-columns: 1fr; }
  .chairman-photo { max-width: 320px; margin: 0 auto; }
}

.board { position: relative; overflow: hidden; background: var(--paper); padding: 20px 20px 110px; }
.board-inner { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; text-align: center; }
.board-inner h2 {
  font-size: clamp(26px, 3vw, 34px); color: var(--navy-700); font-weight: 500;
  margin-bottom: 46px;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
}
.board-card h3 { font-size: 17px; color: var(--navy-700); margin-bottom: 4px; }
.board-card span { font-size: 13.5px; color: var(--ink-soft); }
.board-photo {
  width: 116px; height: 116px; border-radius: 50%;
  background: #e7eaf1; margin: 0 auto 18px;
  border: 2px dashed rgba(16,26,46,.25);   /* dashed = visibly "placeholder" */
}
/* Once a real photo is set (as a background-image on the same div —
   same pattern the business cards already use), swap the dashed
   "placeholder" look for a solid photo frame, and make sure the image
   actually fills and crops to the circle instead of just tiling once
   in a corner (background-size/position default to that otherwise). */
.board-photo.has-photo {
  border: none;
  background-size: cover;
  background-position: center top;
}
.board-card { display: flex; flex-direction: column; align-items: center; }
.board-email {
  display: inline-block; margin-top: 6px; font-size: 12.5px;
  color: var(--navy-500); text-decoration: none; word-break: break-all;
}
.board-email:hover { text-decoration: underline; }

/* ============================================================
   UNDER CONSTRUCTION PAGE
   ============================================================ */
.construction {
  position: relative; overflow: hidden;
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 20px 100px;
}
.construction-inner { position: relative; z-index: 1; max-width: 560px; }

.construction-icon {
  width: 68px; height: 68px; margin: 0 auto 30px;
  color: var(--gold);
  animation: constructionPulse 2.6s ease-in-out infinite;
}
@keyframes constructionPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.construction h1 {
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 500;
  color: var(--navy-700); margin-bottom: 16px;
}
.construction p {
  font-size: 16px; line-height: 1.75; color: var(--ink-soft);
  margin-bottom: 32px;
}

.construction-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 40px; }
.construction-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.construction-dots span:nth-child(2) { animation-delay: .2s; }
.construction-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  /* BUG FIX: .hero had no background of its own. The video-fallback
     logic in noah-group.js correctly hides the video if it fails —
     but with nothing behind it, that just revealed blank white (then
     darkened by the scrim into flat gray), instead of the intended
     rich navy fallback. This was true even before ark.mp4 loads, for
     that first instant of page load too. */
  background: linear-gradient(135deg, var(--navy-900), var(--navy-500));
}

/* Sits above the video/scrim, at the very base of the hero. This is
   the "seamless transition" element: a curved shape filled the exact
   color of the section below, so the eye reads one continuous flowing
   boundary instead of a hard horizontal line where dark meets light. */
.hero-transition {
  position: absolute; left: 0; bottom: -2px;   /* -2px avoids a hairline
                                                    gap some browsers
                                                    render at bottom:0 */
  width: 100%;
  height: clamp(70px, 9vw, 130px);
  fill: var(--paper);
  z-index: 4;
  pointer-events: none;
}

/* Sits above the hero's own background gradient (visible only if the
   video below fails to load), so real footage covers it completely
   whenever ark.mp4 is present and playing. */
.hero-video-wrap {
  position: absolute; inset: 0;
  z-index: 2;
  overflow: hidden;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;   /* fills the box without distorting the footage,
                           cropping edges instead of stretching them */
  display: block;
}

/* A dark gradient over the video so white text stays legible whether
   the frame underneath happens to be bright sky or dark water. */
.hero-scrim {
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(3,7,15,.55) 0%,
    rgba(5,12,28,.35) 45%,
    rgba(3,7,15,.7) 100%
  );
  pointer-events: none;   /* clicks pass through it to whatever's beneath */
}

/* ---------- HERO TEXT ---------- */
.hero-content { position: relative; z-index: 5; padding: 0 20px; }

.hero-logo {
  width: clamp(200px, 26vw, 330px);
  margin-bottom: 30px;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.6));
  animation: riseIn 1.1s .25s ease both;
}

.tagline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;              /* light weight reads as refined, not thin/weak */
  font-size: clamp(19px, 2.2vw, 27px);
  letter-spacing: .01em;
  line-height: 1.9;
  color: #EEF2F8;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  animation: riseIn 1.1s .5s ease both;
}

/* "both" makes the element hold the "from" state before the delay
   elapses — without it, it flashes at full opacity first. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SUBSIDIARIES
   ============================================================ */
.subs { position: relative; overflow: hidden; background: var(--paper); padding: clamp(70px, 10vw, 130px) 0 110px; }
.subs-inner { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

.subs-eyebrow {
  display: block; color: var(--gold); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px;
}

.subs-title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 14em;
  color: var(--navy-700);
  margin-bottom: 52px;
}

/* ============================================================
   THE BUSINESS GRID — NOAH's own card language
   Deliberately different from the "cards stretch wider on hover"
   pattern: this is a plain responsive grid (every card stays the same
   size), a diagonal cut instead of a curve (echoing the diagonal
   gold/navy motif on NOAH's own printed materials), and a description
   panel that slides UP over the photo on hover rather than the card
   itself changing shape.
   ============================================================ */
/* ============================================================
   THE BUSINESS GRID
   Adjusted per direct feedback to read closer to Sime's own cards —
   title, description and a "Learn More" button all visible up front,
   no hover required to see what a business does. NOAH's own touches
   are kept where they don't get in the way of that clarity: a
   diagonal photo cut (instead of Sime's curve) echoing the diagonal
   gold/navy ribbon on NOAH's printed materials, and a small gold
   index number per card.
   ============================================================ */
/* ============================================================
   THE BUSINESS CAROUSEL
   Paged, not continuously scrolling — and that distinction is load-
   bearing, not stylistic. Sime's hover-expand only works because
   their 3 cards share one static row with nothing to scroll; the
   moment a row can also scroll, a card growing wider mid-scroll
   fights the scroll math. So each .biz-page is its OWN static flex
   row (hover-expand works exactly like Sime's, because nothing around
   it is moving) — and paging BETWEEN those groups is what the
   carousel motion actually is. Best of both: Sime's real mechanic,
   preserved intact, plus a way to browse all 8.
   ============================================================ */
.biz-carousel { position: relative; }

.biz-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.biz-track::-webkit-scrollbar { display: none; }

/* One "screen" of the carousel — sized to exactly fill the visible
   width, so the next/previous page starts fully off-screen and
   scroll-snap locks cleanly on the page boundary. */
.biz-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  gap: 22px;
}

.biz-card {
  flex: 1 1 0;      /* Sime's actual mechanic: share the page equally
                        by default... */
  min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 4px 18px rgba(16,26,46,.08);
  transition: flex-grow .55s cubic-bezier(.4,0,.2,1), transform .35s ease, box-shadow .35s ease;
}
.biz-card:hover, .biz-card:focus-visible {
  flex-grow: 2.2;   /* ...then claim more of ITS OWN page on hover,
    while its two page-mates shrink to make room — nothing outside
    this page is affected, so the carousel's scroll position is
    completely unbothered by it. */
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(16,26,46,.16);
  outline: none;
}
.biz-card:active { transform: translateY(-2px) scale(.98); }

/* ---------- ARROWS ---------- */
.biz-arrow {
  position: absolute; top: 84px;   /* centers on the photo band, not
                                       the full (taller) card */
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(16,26,46,.08);
  box-shadow: 0 8px 22px rgba(16,26,46,.14);
  color: var(--navy-700);
  font-size: 20px;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: background .2s ease, opacity .2s ease, transform .15s ease;
}
.biz-arrow:hover { background: var(--navy-700); color: #fff; }
/* Set by script.js at the scroll boundaries, so you can't click
   "previous" with nothing before the first card, or "next" with
   nothing after the last. */
.biz-arrow[disabled] { opacity: 0; pointer-events: none; }
/* Previously positioned OUTSIDE the carousel (left/right: -20px),
   relying on .subs-inner's own padding to have room for them. At
   narrower widths that padding shrinks below what the button needs,
   so the arrow ends up overlapping the next page's card instead of
   sitting cleanly beside it. Moving them fully inside the carousel's
   own bounds — overlaid on the card photo — means they're always
   within visible content, at any width, with nothing to clash into. */
.biz-arrow-prev { left: 16px; }
.biz-arrow-next { right: 16px; }

/* ---------- DOTS ---------- */
.biz-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.biz-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: rgba(16,26,46,.18);
  transition: background .25s ease, transform .25s ease;
}
.biz-dots button.is-active { background: var(--gold); transform: scale(1.3); }

.biz-photo {
  position: relative;
  height: 190px;
  flex-shrink: 0;
  overflow: hidden;    /* replaces the old clip-path approach — the
    curve is now drawn by a real SVG shape sitting on top (see
    .biz-swoop below), matching Sime's own technique exactly rather
    than approximating it with a CSS diagonal. */
  display: flex; align-items: center; justify-content: center;
  background-size: cover;
  background-position: center;
}
/* Sime's exact curve, reproduced from the literal path data in their
   own page markup — not an approximation. A white shape sits on top
   of the photo and "eats" into its bottom edge. preserveAspectRatio
   ="none" lets it stretch to fill this specific card's width/height
   rather than staying locked to Sime's original proportions. */
.biz-swoop {
  position: absolute; left: 0; bottom: -1px; z-index: 2;
  width: 100%; height: 64px;
  fill: #fff;
  pointer-events: none;
}
/* A light wash over any photo, just enough to keep the white index
   number and icon/badge legible regardless of the photo underneath. */
.biz-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(5,12,28,.5), rgba(5,12,28,.1) 65%);
}

.biz-index {
  position: absolute; top: 14px; left: 18px; z-index: 1;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--gold);
}

.biz-icon { position: relative; z-index: 1; width: 52px; height: 52px; color: rgba(255,255,255,.85); }
/* Every division-card logo now sits in the SAME fixed-size box, whatever
   the shape of the original image. object-fit: contain scales each logo to
   fit inside that box without stretching or cropping it. */
.biz-badge {
  position: relative; z-index: 1;
  box-sizing: border-box;
  width: 74%; max-width: 250px;
  height: 92px;
  object-fit: contain; object-position: center;
  image-rendering: -webkit-optimize-contrast;   /* favor sharpness when downscaling */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
/* Kept as a name so existing HTML still works, but no longer a different
   size: every logo is now the same size. */
.biz-badge-small { width: 74%; max-width: 250px; height: 92px; }
.biz-badge-dark { background: #fff; padding: 10px; border-radius: 50%; }
/* White rounded backing plate for wordmark logos on the dark photos. */
.biz-badge-plaque { background: #fff; padding: 10px 16px; border-radius: 10px; }

.biz-info {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; flex: 1;
}
.biz-info h3 {
  color: var(--navy-700); font-size: 19px; font-weight: 500; line-height: 1.28;
  margin-bottom: 10px;
}
.biz-info p {
  color: var(--ink-soft); font-size: 14px; line-height: 1.62;
  margin-bottom: 18px;
  flex: 1;   /* pushes the button/status to the same baseline across a
                row, even when descriptions run different lengths */
}

.biz-btn {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 10px 8px 10px 20px;
  background: var(--navy-700); color: #fff;
  border-radius: 30px; font-size: 13px; font-weight: 500;
}
.biz-btn i {
  display: grid; place-items: center; font-style: normal;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff;
  transition: transform .3s ease;
}
.biz-card:hover .biz-btn i { transform: translateX(3px); }

.biz-status {
  align-self: flex-start;
  padding: 8px 16px; border-radius: 30px;
  border: 1px dashed rgba(16,26,46,.28);
  font-size: 12px; color: var(--ink-soft);
}

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-burger { display: flex; }

  /* ROOT CAUSE of the dark strip down the right edge of the phone:
     backdrop-filter (like transform) turns .navbar into the containing
     block for its own position:fixed children. The slide-in menu panel
     lives inside .navbar, so "right: 0" meant "the capsule's right edge"
     (about 12px in from the real screen edge), and the "hidden" panel
     was parked 12px INSIDE the screen. Removing the blur on mobile lets
     the panel anchor to the real viewport again. A slightly more solid
     background stands in for the blur so the bar stays readable. */
  .navbar {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(8, 16, 34, .88);
  }
  .navbar.is-solid { background: rgba(6, 12, 27, .95); }

  /* The nav turns into a fixed panel that slides in from the right,
     instead of a horizontal row. translateX(100%) parks it just off
     the right edge of the screen; .is-open (added by script.js) slides
     it back to 0. */
  .nav-links {
    position: fixed; top: 0; right: 0;
    height: 100vh; height: 100dvh; width: min(82vw, 330px);
    overflow-y: auto;   /* with no overflow rule, expanding "Our
      Businesses" to show all 8 sub-items pushes the panel's total
      content past 100vh — this makes it scroll within the panel
      instead of spilling past its edges. */
    /* SOLID color, not translucent-with-blur. The previous version
       used rgba(...,.97) + backdrop-filter — on paper 97% opaque, but
       combining backdrop-filter with border-radius + transform on a
       position:fixed element is a well-documented source of GPU
       compositing bugs on Android Chrome, where the blur silently
       fails to paint and the panel reads as far more see-through than
       the CSS says it should. Since that combination kept failing on
       a real device even after the opacity fix, removing the blur
       entirely is the reliable fix — a plain solid color can't have
       a GPU-compositing bug, because there's no compositing involved. */
    background: var(--navy-900);
    border-left: 1px solid rgba(255,255,255,.08);
    border-radius: 20px 0 0 20px;
    box-shadow: none;   /* the shadow only exists while the panel is open
      (see .is-open below): a shadow on a parked-off-screen panel still
      spills ~70px back onto the visible page as a dark smear. */
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 108px 28px 30px;
    transform: translateX(100%);
    visibility: hidden;   /* closed = invisible AND unreachable by Tab /
      screen readers, not just parked off to the side */
    transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease,
                visibility 0s linear .4s;   /* wait for the slide-out to
      finish before hiding, otherwise it would vanish mid-animation */
    z-index: 100;
  }
  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -18px 0 50px rgba(0,0,0,.35);
    transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease,
                visibility 0s;
  }

  /* Explicitly zeroing the border-radius here matters: the desktop
     pill rule (border-radius: 999px) otherwise keeps applying at this
     width too, since nothing had overridden it — that's what was
     turning every row into a floating stadium-shaped chip instead of
     a clean list. */
  .nav-links a, .nav-drop-toggle {
    width: 100%; text-align: left; justify-content: space-between;
    padding: 17px 6px; font-size: 15.5px; font-weight: 500;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .nav-links a:hover, .nav-drop-toggle:hover { background: none; }
  .nav-links a:active, .nav-drop-toggle:active { background: rgba(255,255,255,.06); }

  /* A visible "this is open" state on the toggle itself — otherwise
     the only signal that the accordion below expanded is the content
     appearing, which is easy to miss on a quick glance. */
  .has-dropdown.is-open .nav-drop-toggle { color: var(--gold); }

  /* On mobile the dropdown becomes an inline accordion instead of a
     floating panel — floating panels are awkward to tap accurately on
     a small screen. A faint tinted band (rather than plain transparent)
     reads as "a drawer within the drawer" instead of the sub-items
     blending directly into the top-level list above them. */
  .dropdown-panel {
    position: static; transform: none; opacity: 1;
    /* "visible" here used to override the closed menu's "hidden", so the
       8 business links stayed keyboard-focusable inside a menu that was
       off-screen. Closed accordion = hidden (after the collapse finishes). */
    visibility: hidden;
    box-shadow: none; border-radius: 10px;
    background: rgba(255,255,255,.04);
    padding: 0; margin-top: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, visibility 0s linear .35s;
  }
  /* BUG FIX: the desktop-only rule ".dropdown-panel.is-open" (further
     up this file) sets transform: translateX(-50%) to center the
     floating panel under its button. That rule and this one are
     equally specific (both are one class plus one class), so whichever
     one actually mentions a given property wins it — and since this
     mobile version never mentioned "transform" before, the desktop
     value was quietly winning anyway and shifting the open panel left
     by half its own width. Spelling it out here as "none" fixes that. */
  .dropdown-panel.is-open {
    max-height: 640px; padding: 6px 0 10px; transform: none;   /* was 380px: nine business names no longer fit in that */
    visibility: inherit;   /* follows the menu: visible when open, hidden with it */
    transition: max-height .35s ease, padding .35s ease, visibility 0s;
  }
  .dropdown-panel a {
    padding: 12px 6px 12px 20px; font-size: 14.5px; font-weight: 400;
    border-bottom: none;
    border-left: 2px solid rgba(255,255,255,.12);
    margin-left: 6px;
    color: rgba(255,255,255,.68);
  }
  .dropdown-panel a:hover, .dropdown-panel a:active { background: none; color: #fff; border-left-color: var(--gold); }

  .biz-arrow-prev { left: 4px; }
  .biz-arrow-next { right: 4px; }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* A translucent backdrop behind the open mobile panel, so it's clear
   the rest of the page is temporarily inactive. Clicking it closes
   the menu (handled in script.js). */
.nav-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
  z-index: 95;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 560px) {
  .tagline { line-height: 1.7; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  /* 3 cards genuinely can't share a row on a phone screen — so at
     this width, each "page" stacks its cards vertically instead.
     You still swipe/tap between pages to see the next group of 3;
     within a page, they're just stacked rather than side-by-side.
     Hover-expand is meaningless in a vertical stack (nothing to
     compress sideways into), so it's switched off here — the lift
     and shadow on tap/hover still apply via the shared rule. */
  .biz-page { flex-direction: column; gap: 18px; }
  /* BUG FIX: .biz-card has "overflow: hidden" (set further up, to clip
     the swoop/photo corners). A CSS flexbox rule most people never run
     into: once a flex item's overflow is anything but "visible", the
     browser stops using its real content size as a size floor and
     treats it as 0 instead — during the flex-shrink math that "0"
     wins, and the whole stacked card (photo, heading, paragraph, all
     of it) gets crushed down to almost nothing. flex: 1 0 auto turns
     off shrinking entirely (grow:1, shrink:0, basis:auto = "start at
     your natural size, never go below it"), and min-height: auto is a
     second safety net that explicitly restores content-based sizing.
     Together they make each stacked card keep its real height. */
  .biz-card, .biz-card:hover { flex: 1 0 auto; min-height: auto; }
  /* BUG FIX: with 3 cards stacked vertically per page, a single fixed
     "top" offset for the arrows can only ever line up with the first
     card. Rather than fight that, hide them here — swipe and the dot
     indicators already handle navigation at this width. */
  .biz-arrow { display: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   Fixed bottom bar shown once per browser (tracked via localStorage,
   not a cookie itself — no reason to use one just to ask about others).
   The Accept/Decline logic that actually gates analytics lives in
   script.js; this is purely the visual presentation.
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 18px clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { color: rgba(255,255,255,.75); font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 640px; }
.cookie-banner p a { color: var(--gold); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
}
.cookie-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
.cookie-btn-outline:hover { border-color: #fff; color: #fff; }
.cookie-btn-accept { background: var(--gold); color: var(--navy-900); }
.cookie-btn-accept:hover { background: #f0b13f; }

@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}

/* Bug fix: the diagonal corner ribbon is a 320px-wide decorative
   flourish (aria-hidden, purely visual) designed to read as an
   intentional accent at desktop widths. Below ~700px it doesn't have
   enough room to do that — it just looks like a stray graphic
   sitting disconnected from the content, which is exactly what was
   reported. Simplest correct fix: it's decoration, not information,
   so it's fine to just not show it at widths where it can't work. */
@media (max-width: 700px) {
  .corner-accent { display: none; }
}