/* ============================================================================
   SaraPath — BASE LAYER
   Element defaults + the structural primitives (bays, reveals, fins).
   Consumes tokens.css only.
   ============================================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--c-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-link); text-decoration: none; transition: color var(--dur-hover) var(--ease); }
a:hover { color: var(--c-link-hover); }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; }

::selection { background: var(--c-glass-2); color: var(--c-white); }

/* Square focus ring — matches the mullion language. */
:focus-visible { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; }
/* WCAG 2.4.11: nothing tabbed to may hide under the pinned masthead or the
   pause-video button; the browser keeps this much clear when it scrolls focus. */
html { scroll-padding-top: calc(var(--masthead-h, 150px) + 12px); scroll-padding-bottom: 80px; }
/* On navy grounds the ring turns white. */
.util :focus-visible, .foot :focus-visible, .glass-photo :focus-visible, .phero :focus-visible,
.hero :focus-visible, .mega__foot-cta:focus-visible, .nav__cta:focus-visible, .ap-rail :focus-visible { outline-color: #FFFFFF; }

.skip {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: calc(var(--z-header) + 10);
  background: var(--c-white); color: var(--c-glass-3);
  font-weight: var(--fw-black); text-transform: uppercase;
  letter-spacing: var(--ls-nav); font-size: var(--fs-xs);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--cast-2);
  transition: top var(--dur-hover) var(--ease);
}
.skip:focus { position: fixed; top: var(--sp-4); }   /* pinned to the screen: never under the masthead (2.4.11) */

/* ============================================================== primitives */
.wrap {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}
.section { padding-block: var(--section-y); }

/* Surfaces are named after what they are in the building. ----------------- */
.cement      { background: var(--c-cement-1); }
.cement--lit { background: var(--c-white); }
.cement--shade { background: var(--c-cement-2); }
.glass {
  background: linear-gradient(155deg, var(--c-glass-2) 0%, var(--c-glass-4) 62%, var(--c-glass-5) 100%);
  color: var(--c-white);
}
/* The sky streak every glazed bay catches. */
.glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 0 38%, var(--c-specular) 38.5% 40%,
              transparent 40.5% 55%, rgba(255,255,255,.16) 55.5% 56.5%, transparent 57%);
}
.glass > * { position: relative; }

/* A brise-soleil blade: a white bar held off the surface, casting a hard edge.
   Used as the section rule everywhere a divider is needed. */
.fin {
  border: 0; margin: 0;
  height: var(--line-fin);
  background: var(--c-white);
  box-shadow: var(--cast-2);
}
.fin--thin { height: var(--line-mullion); box-shadow: var(--cast-1); }
.fin--on-glass { background: var(--c-cement-2); box-shadow: var(--cast-glass-2); }

/* The reveal — the 1px shadow gap where two cement panels meet. */
.reveal-t { border-top: var(--line-hair) solid var(--c-reveal); }
.reveal-b { border-bottom: var(--line-hair) solid var(--c-reveal); }

/* Engraved signage label. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}
.eyebrow--on-dark { color: var(--c-eyebrow-on-dark); }

.b8 { font-weight: var(--fw-bold); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: var(--measure);
}
.lead--on-dark { color: #C6D2E2; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-7);
}

/* Bay grids — mullion gaps, not gutters. Cards butt up against thin lines. */
/* Bays are separated by a hairline drawn on the cells themselves, not by a
   grey slab showing through the gaps. */
.bays      { display: grid; gap: var(--line-hair); background: var(--c-cement-3); }
.bays--2   { grid-template-columns: repeat(2, 1fr); }
.bays--3   { grid-template-columns: repeat(3, 1fr); }
.bays--4   { grid-template-columns: repeat(4, 1fr); }
.bays--gap { gap: var(--sp-5); background: none; }

.tabular { font-variant-numeric: tabular-nums; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1080px) { .bays--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .bays--2, .bays--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .bays--4 { grid-template-columns: 1fr; } }