/* ==========================================================================
   GOTHAM ACCESS CONTROL NY — RESET, TYPOGRAPHY & LAYOUT PRIMITIVES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor targets so the sticky header never covers a heading. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -webkit-tap-highlight-color: rgba(217, 174, 73, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  min-height: 100svh;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

h1, h2, h3, h4 { text-wrap: balance; }

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

address { font-style: normal; }

:target { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

/* --------------------------------------------------------------------------
   2. FOCUS — visible, gold, and never removed.
   -------------------------------------------------------------------------- */
:focus { outline: none; }

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }

p { max-width: var(--measure); }

a {
  color: var(--gold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--gold) 42%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--gold-bright);
  text-decoration-color: currentColor;
}

strong, b { color: var(--text-strong); font-weight: var(--fw-semibold); }

small { font-size: var(--fs-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0.12em 0.4em;
  color: var(--blue-bright);
}

blockquote {
  border-left: 2px solid var(--gold);
  padding-left: var(--sp-5);
  color: var(--text-strong);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--sp-10);
}

::selection {
  background: var(--gold);
  color: var(--text-on-gold);
}

::placeholder { color: var(--text-faint); opacity: 1; }

/* --------------------------------------------------------------------------
   4. LONG-FORM PROSE  (blog posts, deep service copy)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.prose > * + * { margin-top: var(--sp-5); }
.prose > h2 { margin-top: var(--sp-14); font-size: var(--fs-3xl); }
.prose > h3 { margin-top: var(--sp-10); font-size: var(--fs-xl); }
.prose > h4 { margin-top: var(--sp-8); }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.prose li::marker { color: var(--gold); }
.prose li > ul, .prose li > ol { margin-top: var(--sp-2); }
.prose img, .prose figure { border-radius: var(--r-lg); margin-block: var(--sp-8); }
.prose figcaption { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); }
.prose table { margin-block: var(--sp-8); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }
.container--flush { padding-inline: 0; }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--surface { background: var(--bg-surface); }
.section--sunken  { background: var(--bg-sunken); }

/* Hairline between adjacent same-colour sections */
.section--ruled { border-top: 1px solid var(--line-subtle); }

.stack { display: grid; gap: var(--sp-5); }
.stack--xs  { gap: var(--sp-2); }
.stack--sm  { gap: var(--sp-3); }
.stack--md  { gap: var(--sp-6); }
.stack--lg  { gap: var(--sp-10); }
.stack--xl  { gap: var(--sp-16); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cluster--sm { gap: var(--sp-2); }
.cluster--lg { gap: var(--sp-5); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Asymmetric editorial split: content + sidebar */
.split {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-16); }
  .split--reverse { grid-template-columns: 340px minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
}

.center-x { margin-inline: auto; }
.text-center { text-align: center; }
.text-center p, .text-center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  max-width: var(--measure-wide);
}

.muted  { color: var(--text-muted); }
.faint  { color: var(--text-faint); }
.strong-text { color: var(--text-strong); }
.gold   { color: var(--gold); }
.blue   { color: var(--blue); }

.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }

.measure-tight { max-width: var(--measure-tight); }
.measure-wide  { max-width: var(--measure-wide); }
.no-measure p, .no-measure { max-width: none; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.no-scroll { overflow: hidden; }

/* Gold gradient text — used sparingly, always with a solid fallback colour
   so it stays readable if background-clip fails. */
.gold-text {
  color: var(--gold-bright);
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
  .gold-text { -webkit-text-fill-color: currentColor; background: none; }
}

/* --------------------------------------------------------------------------
   7. ART DECO MOTIFS
   Drawn from NYC setback skyscrapers and the Chrysler Building crown.
   -------------------------------------------------------------------------- */

/* Thin gold rule with a stepped diamond at its centre. */
.deco-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--gold);
}
.deco-rule::before,
.deco-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.deco-rule__mark {
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* Short accent rule under a heading. */
.deco-tick {
  width: 52px; height: 2px;
  background: var(--gold-metal);
  border-radius: 1px;
}

/* Stepped (ziggurat) corners — the 1916 zoning setback in miniature. */
.deco-cut {
  clip-path: polygon(
    var(--deco-cut) 0, 100% 0,
    100% calc(100% - var(--deco-cut)),
    calc(100% - var(--deco-cut)) 100%,
    0 100%, 0 var(--deco-cut)
  );
}

/* Radiating sunburst — Chrysler crown. Purely decorative. */
.deco-sunburst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 100%,
      rgba(217,174,73,.055) 0deg 1.6deg,
      transparent 1.6deg 7.2deg
    );
  -webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 90% at 50% 100%, #000 0%, transparent 72%);
}

/* Fine technical grid — reads as a floor plan / riser diagram. */
.deco-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122,145,186,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,145,186,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

/* Soft blue field behind hero content. */
.deco-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--blue-field);
}

@media (forced-colors: active) {
  .deco-sunburst, .deco-grid, .deco-field { display: none; }
}

/* --------------------------------------------------------------------------
   8. SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--gold);
  color: var(--text-on-gold);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  text-decoration: none;
  box-shadow: var(--sh-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   9. SCROLL-IN ANIMATION
   Progressive enhancement: .reveal only hides once JS adds .js to <html>,
   so content is never invisible when JS fails.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slower) var(--ease-deco),
              transform var(--dur-slower) var(--ease-deco);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay='1'] { transition-delay: 70ms; }
.js .reveal[data-delay='2'] { transition-delay: 140ms; }
.js .reveal[data-delay='3'] { transition-delay: 210ms; }
.js .reveal[data-delay='4'] { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   10. PRINT — quotes and spec sheets get printed in this trade.
   -------------------------------------------------------------------------- */
@media print {
  :root { --bg-base: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3, h4 { color: #000; }
  .site-header, .site-footer, .no-print, .deco-sunburst, .deco-grid,
  .deco-field, .cta-band, .back-to-top { display: none !important; }
  a { color: #000; text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
  .card, .section { break-inside: avoid; }
}