/* ==================================================================
   PRIVATE OFFICE — production additions
   Complements site.css (verbatim from the design handoff) with:
     · gated/hero choreography plumbing
     · mobile navigation overlay
     · contact form states
     · accordion degradation without JavaScript
     · 404
   Everything here is additive; site.css is never edited.
   ================================================================== */

/* ---------------- GATE → HERO HOLD ----------------
   The gate is shown by CSS, not by the script: `html.gated` is set in the
   document head before first paint, so the page behind the sheet is never
   briefly visible. Without scripts the class is never added, the gate stays
   hidden, and the document is fully readable. */
.entry-gate { display: none; }
html.gated .entry-gate { display: flex; }
html.gated { overflow: hidden; }
html.gated .hero,
html.gated .hero * { animation-play-state: paused !important; }

/* Returning visitor (disclaimer already accepted, no gate): the handoff's
   4.6s first-arrival sequence was composed for a gated entrance, where the
   sheet masks the wait. Un-gated it reads as an empty page. The same
   choreography is compressed into a brief, still-refined arrival — manor
   materialises over 1.1s, then the type follows from 700ms in 120ms steps.
   Delete this block to force the full 4.6s sequence on every visit. */
.hero-return .hero .manor,
.hero-return .hero .manor-tint {
  animation-duration: 1100ms;
  animation-delay: 0ms;
}
.hero-return .hero .hero-type.t1 { animation-delay: 700ms; }
.hero-return .hero .hero-type.t2 { animation-delay: 820ms; }
.hero-return .hero .hero-type.t3 { animation-delay: 940ms; }
.hero-return .hero .hero-type.t4 { animation-delay: 1060ms; }
.hero-return .hero .hero-type.t5 { animation-delay: 1180ms; }

/* The author stylesheets give several of the elements toggled by JS an
   explicit `display` (the gate and the mobile overlay are flex containers),
   which out-ranks the user-agent's `[hidden] { display: none }`. Restore
   the semantics globally — every hidden state below depends on it. */
[hidden] { display: none !important; }

/* ---------------- CREST TREATMENT ----------------
   The handoff shipped the crest as an opaque JPEG with a white
   background, so site.css knocks the white out with `mix-blend-mode`:
   `screen` on navy (which also swallows the dark line work) and
   `multiply` on ivory. Both are workarounds for a format the designer
   flagged as provisional — "recommend getting a transparent PNG or SVG
   from the client; that would also remove the mix-blend-mode
   workarounds."

   The crest is now true transparent SVG (see /static/img/crest-*.svg),
   so the workarounds are neutralised rather than relied upon: blending
   a transparent asset is meaningless and `screen` would blank it out.
   The original logo-authentic.png remains in /static/img as the
   client's supplied master. */
.site-header .brand .crest-on-navy,
.site-header.scrolled .brand .crest-on-ivory,
.site-footer .seal .crest,
.gate-brand img,
.legal-head .brand img { mix-blend-mode: normal; }

/* The two-rendering swap is scoped to `.site-header` in site.css, so on the
   legal pages (which reuse the same lockup inside `.legal-head`) both marks
   would stack. Those headers are always navy — keep the ivory rendering
   only. */
.legal-head .brand .crest-on-ivory { display: none; }

/* The SVG crest is a portrait shield, so it is width-limited rather than
   left to stretch on its height alone. Widths follow the handoff's stated
   sizes (header 46px tall, footer 132px wide). */
.site-header .brand .crest { height: auto; width: 38px; }
.site-footer .seal .crest { width: 132px; }
.gate-brand img { width: 66px; }
.legal-head .brand img { height: auto; width: 38px; }


/* ---------------- HERO meta / mail ---------------- */
.hero .meta .meta-mail,
.contact .addr .addr-mail {
  color: inherit;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.08em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-standard),
              color var(--dur-med) var(--ease-standard);
}
.hero .meta .meta-mail:hover { border-bottom-color: var(--brass-500); color: var(--ivory-50); }
.contact .addr .addr-mail { border-bottom-color: var(--brass-500); padding-bottom: 1px; }
.contact .addr .addr-mail:hover { color: var(--brass-800); }

/* ---------------- MOBILE NAVIGATION ---------------- */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 14px;
  transition: border-color var(--dur-med) var(--ease-standard),
              color var(--dur-med) var(--ease-standard);
}
.nav-toggle:hover { border-color: var(--brass-500); color: var(--brass-500); }
.site-header.scrolled .nav-toggle:hover { border-color: var(--brass-700); color: var(--brass-700); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 96px 24px 48px;
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(194, 162, 92, 0.035) 22px 23px),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  text-align: center;
}
.nav-overlay nav { display: flex; flex-direction: column; gap: 4px; }
.nav-overlay nav a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ivory-50);
  padding: 12px 8px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.nav-overlay nav a:hover { color: var(--brass-500); border-bottom-color: var(--brass-500); }
.nav-overlay-access {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(194, 162, 92, 0.28);
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--on-navy-fg-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.nav-overlay-access .nav-overlay-mail {
  font-family: var(--font-sans);
  font-variant: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ivory-50);
  border-bottom: 1px solid var(--brass-500);
  padding-bottom: 2px;
}
html.nav-open { overflow: hidden; }

/* ---------------- CONTACT FORM STATES ---------------- */
.contact form .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact form .field.invalid input,
.contact form .field.invalid select {
  border-bottom-color: var(--brass-800);
}
/* The brand has no red or green: errors and confirmation wear brass. */
.contact form .form-status {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--brass-800);
}
/* When the form cannot deliver, the status hands the visitor a message that
   is already written in their own mail client. That link sits inside the
   status line, so it needs to read as brass rather than browser default. */
.contact form .form-status a {
  color: var(--brass-800);
  border-bottom: 1px solid var(--brass-500);
  padding-bottom: 1px;
  text-decoration: none;
}
.contact form .form-success {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 28px;
}
.contact form .form-success .rule-mark {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--brass-700);
  margin-bottom: 24px;
}
.contact form .form-success .line {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.2;
  color: var(--fg-strong);
  margin: 0 0 12px;
}
.contact form .form-success .note {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
}
.contact form textarea::placeholder,
.contact form select:invalid { color: var(--fg-faint); }

/* The scripted form and its fallback are mutually exclusive: exactly one is
   ever shown, decided by whether app.js marked the document as scripted. */
.contact .enquiry-fallback { display: none; }
html:not(.js) .contact form.enquiry { display: none; }
html:not(.js) .contact .enquiry-fallback {
  display: block;
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-strong);
  max-width: 42ch;
}
html:not(.js) .contact .enquiry-fallback a {
  color: var(--brass-800);
  border-bottom: 1px solid var(--brass-500);
  padding-bottom: 1px;
}

/* ---------------- ACCORDION without JavaScript ----------------
   site.css collapses every row. Without JS that would hide the
   policies entirely, so the collapsed state is scoped to html.js and
   the open state stays driven by `.is-open`. */
.acc-body { grid-template-rows: 1fr; }
html.js .acc-item:not(.is-open) .acc-body { grid-template-rows: 0fr; }
html:not(.js) .acc-content { opacity: 1; }
html:not(.js) .acc-toggle { visibility: hidden; }
html:not(.js) .acc-head { cursor: default; }
.acc-h { margin: 0; font-size: inherit; letter-spacing: 0; line-height: inherit; font-weight: 400; }
.acc-section-h {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0 0 12px;
  /* site.css styles `h3 .n`; the accordion uses an h4, so the numeral
     column and its gap are restated here. */
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.acc-section-h .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brass-700);
}
.acc-section-h:focus-visible,
.acc-content section:target h4 { outline: none; }

/* ---------------- STANDALONE DISCLAIMER PAGE ---------------- */
.disclaimer.standalone { border-top: none; padding-block: var(--space-9) var(--space-10); }

/* ---------------- 404 ---------------- */
.notfound {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-10);
  background: var(--ivory-50);
}
.notfound h1 {
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: 20px 0 20px;
  max-width: 22ch;
}
.notfound p { font-family: var(--font-serif); font-weight: 300; font-size: 20px; line-height: 1.45; max-width: 54ch; color: var(--fg-muted); margin-bottom: 32px; }

/* ---------------- SMALL SCREENS ----------------
   The hero is a row flex container whose only in-flow children are
   `.content` and `.meta`. Below 900px the absolutely-positioned meta bar
   would collide with the type, so the hero switches to a column and the
   meta becomes a real flow sibling beneath it — same content, no overlap. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }

  .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .hero .content { padding-top: 130px; padding-bottom: 36px; }
  .hero .ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .ctas .btn { justify-content: center; }

  .hero .meta {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 0 clamp(24px, 5vw, 64px) 44px;
  }
  .hero .meta .col:not(.first):not(.last) { display: none; }
  .hero .meta .col.last { align-items: flex-end; text-align: right; }
}

@media (max-width: 600px) {
  .hero .meta { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 40px; }
  .hero .meta .col.last { align-items: flex-start; text-align: left; }
  .site-footer .access { flex-direction: column; gap: 12px; }
}

/* The display serif's 56px floor cannot fit the headline's explicit line
   break ("Capital, held" · "with conviction.") on the narrowest screens,
   so the floor eases down there only — the desktop measure is untouched. */
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(34px, 10.2vw, 56px); }
}

/* Reduced motion: honour it everywhere, including the new pieces. */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .hero-return .hero .manor,
  .hero-return .hero .manor-tint { animation: none; }
}