/* The tops of Contact, Disclosures and the 404 page (2026-10-15), on white like the home page: the small label, the
   headline in navy and the note beside it (no small vertical divider since 2026-10-23), the way "Let's start the
   conversation." sits at the end of every page. They replace the old pale grey opening with its blue label, frame
   lines and rule. The 404 page's next steps follow: the photograph in black and white, the five destinations set in
   the site's serif, the button (a navy room since 2026-10-25, at the end of this file). Every word is as it was.
   Every rule is confined to .op, so the older page styles never reach it; the opening moves once on arrival and holds
   still under reduced motion. */

/* Open Font License (assets/fonts/OFL-*.txt), latin subset from @fontsource 5.3.0 */
@font-face{font-family:'PX Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/spectral-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Source Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Source Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* the older stylesheets paint these pages pale grey (.page-e main); the new tops sit on white */
html main:has(> .op){background:#fff}

.op{--navy:#0C121D;--ink:#0C121D;--text:#2E3A4B;--mute:#5D6B7E;--serif:'PX Spectral',Georgia,serif;--sans:'PX Source Sans',system-ui,sans-serif;
  --pad:clamp(24px,calc(4vw / var(--z,1)),80px);--g:24px;--ease:cubic-bezier(.2,.7,.2,1);--wipe:cubic-bezier(.76,0,.24,1);
  position:relative;background:#fff;color:var(--text);font:400 18px/1.6 var(--sans);letter-spacing:normal;text-align:left;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.op *,.op *::before,.op *::after{box-sizing:border-box}
.op :where(h1,h2,p,ul,li,figure){margin:0;padding:0;border:0;max-width:none}
.op ul{list-style:none}
.op a{color:inherit;text-decoration:none}
.op img{display:block;max-width:100%}
/* the site's rail, as the menu bar, the heroes and the rest of these pages: the same width and side margins */
.op__wrap{max-width:1760px;margin:0 auto;padding:0 var(--pad)}

/* the top: under the menu bar, as much room above the headline as the home page gives a section */
.op--top{padding:calc(var(--navh,96px) + 120px) 0 120px}
/* Disclosures: its index follows on the same white, with room of its own */
.op--flush{padding-bottom:0}
.op__lab{display:block;margin-bottom:44px;font:600 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
/* .op .op__h and .op .op__h2, not the class alone: the older page stylesheets' .page-e h1 and .v3-e h2 outranked it
   and set the headlines of Disclosures and the 404 page in Spectral 400, the top one at 55px */
.op .op__h{font:300 clamp(48px,calc(100vw / var(--z,1) / 18),80px)/1.04 var(--serif);letter-spacing:-.026em;color:var(--ink);text-transform:none}
.op__lede{font:400 20px/1.6 var(--sans);color:var(--text)}

/* the 404 page: where to go next */
.op--next{padding:0 0 150px}
.op__ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#06080B}
.op__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.96)}
.op .op__h2{font:300 clamp(36px,3.4vw,52px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.op__next>p{margin-top:24px;max-width:34em;font:400 18px/1.65 var(--sans);color:var(--text)}
.op__links{margin-top:44px}
.op__links li+li{margin-top:6px}
.op__links a{display:inline-block;padding:4px 0;font:300 clamp(28px,2.3vw,36px)/1.2 var(--serif);letter-spacing:-.012em;color:var(--ink);transition:opacity .4s var(--ease)}
/* the destination under the pointer stays bright, the others step back (as the Capabilities menu does) */
.op__links:hover a{opacity:.35}
.op__links a:is(:hover,:focus-visible){opacity:1}
.op__links a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
html .v3-e .op .btn-e{min-height:54px;margin-top:48px;padding:16px 28px;background:var(--navy);color:#fff;font:600 15px/1.2 var(--sans);letter-spacing:.01em}
html .v3-e .op .btn-e:is(:hover,:focus-visible){background:#1e2635;color:#fff}
html .v3-e .op .btn-e:focus-visible{outline-color:var(--navy)}

@media (min-width:901px){
  /* the headline on the left half, the note on the right, as on the home page */
  .op__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center}
  .op__grid>.op__h{grid-column:1/span 6;max-width:6.4em}
  .op__grid>.op__lede{grid-column:8/span 5}
  .op__grid--next{align-items:start}
  .op__grid--next>.op__ph{grid-column:1/span 5}
  .op__grid--next>.op__next{grid-column:7/span 6;padding-top:24px}
}

/* arrival: the headline rises, the note follows (once; reduced motion shows the page as it ends) */
@keyframes op-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.op--top .op__lab{animation:op-rise .9s var(--ease) both}
.op--top .op__h{animation:op-rise 1.1s var(--ease) .08s both}
.op--top .op__lede{animation:op-rise 1.1s var(--ease) .3s both}

@media (max-width:900px){
  .op{font-size:17px}
  .op--top{padding:calc(var(--navh,72px) + 56px) 0 64px}
  .op--flush{padding-bottom:0}
  .op__lab{margin-bottom:28px}
  .op .op__h{font-size:44px}
  .op__lede{margin-top:28px;font-size:18px}
  .op--next{padding-bottom:88px}
  .op__grid--next{display:flex;flex-direction:column-reverse;gap:48px}
  .op__links{margin-top:32px}
  .op__links a{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.op *{animation:none!important;transition:none!important}}

/* Rooms (2026-10-25): the 404 page's next steps are a navy room, so the page runs white and navy in turn like the rest
   of the site: white words, the white button with navy words (the label still rolls), and as much room above the
   ending below it as under it */
.op--next{--ink:#FFFFFF;--text:rgba(255,255,255,.8);--mute:rgba(255,255,255,.62);padding:150px 0;background:var(--navy)}
.op--next .op__links a:focus-visible{outline-color:var(--ink)}
html .v3-e .op--next .btn-e,html .v3-e .op--next .btn-e:is(:hover,:focus-visible){background:#fff;color:var(--navy)}
html .v3-e .op--next .btn-e:focus-visible{outline-color:#fff}
main:has(> .op--next:last-child)+.end>.end__inv{padding-top:110px}
@media (max-width:900px){
  .op--next{padding:88px 0}
  main:has(> .op--next:last-child)+.end>.end__inv{padding-top:56px}
}