/* ==========================================================================
   ZENITH GROUP KFT — Holding page
   --------------------------------------------------------------------------
   The parent site's design system, reduced to the sections this page uses.
   Tokens, type and components are unchanged, so the holding page and the full
   site cannot drift apart visually.
   --------------------------------------------------------------------------
   Concept: "the point directly overhead"
   Zenith is a navigational term — the point on the celestial sphere directly
   above the observer. It is the one instrument shared by the pilot and the
   navigator, which is exactly the ground Zenith Group stands on: advisory
   across aviation and yachting. The visual language is therefore drawn from
   celestial navigation instruments — sextant scales, altitude arcs, degree
   ticks, coordinate readouts — not from stock photography of aircraft.

   Palette derives from the logo: hull navy + brushed gold on linen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour — named for the subject's own materials */
  --hull-950: #101c25; /* deepest field, hero ground */
  --hull-900: #16232d; /* primary dark surface */
  --hull-800: #22323f; /* logo navy, raised dark surface */
  --hull-700: #33465605; /* placeholder, overridden below */
  --hull-700: #334656; /* borders on dark */

  --gold-600: #a8863f; /* gold, pressed / active */
  --gold-500: #c9a961; /* logo gold, primary accent */
  --gold-400: #d8bd80; /* gold, hover */
  --gold-300: #e3cd96; /* gold, highlight edge */

  --linen-50: #faf8f4; /* lightest paper */
  --linen-100: #f2efe9; /* logo ground, primary light surface */
  --linen-200: #e6e1d7; /* light surface, recessed */
  --linen-300: #d3ccbe; /* borders on light */

  --ink-900: #16232d; /* body text on light */
  --ink-600: #4d5f6d; /* secondary text on light */
  --ink-400: #7a8896; /* tertiary text, both grounds */

  --chalk-50: #eef1f3; /* body text on dark */
  --chalk-300: #9fb0bd; /* secondary text on dark */

  /* Semantic assignments — flipped per section via .band-* */
  --bg: var(--linen-100);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --fg-faint: var(--ink-400);
  --rule: var(--linen-300);
  --accent: var(--gold-600);

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* Type scale — 1.25 minor third, fluid */
  --t-xs: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem);
  --t-sm: clamp(0.81rem, 0.78rem + 0.15vw, 0.88rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-md: clamp(1.19rem, 1.11rem + 0.38vw, 1.41rem);
  --t-lg: clamp(1.44rem, 1.29rem + 0.73vw, 1.86rem);
  --t-xl: clamp(1.75rem, 1.47rem + 1.38vw, 2.55rem);
  --t-2xl: clamp(2rem, 1.58rem + 2.1vw, 3.1rem);
  --t-3xl: clamp(2.25rem, 1.68rem + 2.85vw, 3.95rem);

  /* Line height — one scale, applied by role rather than ad hoc per component.
     Larger type needs proportionally less leading, so display sits tight and
     body text sits open enough for the rows to read as distinct lines. */
  --lh-hero: 1.08;
  --lh-display: 1.16;
  --lh-lede: 1.6;
  --lh-body: 1.75;
  --lh-small: 1.7;

  /* Space — 8pt base */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Layout */
  --measure: 62ch;
  --page-max: 76rem;
  --page-pad: clamp(1.25rem, 5vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.6s;
}

/* Dark bands re-point the semantic tokens. Because every component reads only
   the semantic names, no component needs a dark-mode variant of its own. */
.band-dark {
  --bg: var(--hull-900);
  --fg: var(--chalk-50);
  --fg-muted: var(--chalk-300);
  --fg-faint: var(--ink-400);
  --rule: var(--hull-700);
  --accent: var(--gold-500);
}

.band-deep {
  --bg: var(--hull-950);
  --fg: var(--chalk-50);
  --fg-muted: var(--chalk-300);
  --fg-faint: var(--ink-400);
  --rule: var(--hull-700);
  --accent: var(--gold-500);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--linen-100);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

::selection {
  background: var(--gold-500);
  color: var(--hull-950);
}

/* --------------------------------------------------------------------------
   3. Bilingual switching
   --------------------------------------------------------------------------
   Both languages ship in the markup so each is crawlable and the site works
   with JavaScript disabled (Hungarian is the no-JS default, matching the
   company's registration). The toggle only flips an attribute on <html>.
   -------------------------------------------------------------------------- */

/*
  Matching is done on the lang *attribute*, never on :lang(). The :lang()
  pseudo-class matches inherited language, so `span:lang(hu)` would match every
  span on the page once <html lang="hu"> is set — silently overriding component
  rules. [lang="hu"] matches only the elements actually marked as translations.
*/

/* Inline translations must stay inline when shown. Specificity (0,1,1). */
span[lang="hu"],
span[lang="en"] {
  display: inline;
}

/*
  The hiding rule is deliberately (0,2,0) — more specific than the rule above
  and than any single-class component rule, so a hidden translation stays
  hidden regardless of what display value its component sets.
*/
[data-lang="hu"] [lang="en"],
[data-lang="en"] [lang="hu"] {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.band {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--s-7);
  position: relative;
}

.band--tight {
  padding-block: var(--s-6);
}

.band--flush {
  padding-block: 0;
}

.stack > * + * {
  margin-block-start: var(--s-2);
}

.stack-lg > * + * {
  margin-block-start: var(--s-4);
}

/* --------------------------------------------------------------------------
   5. Type components
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/*
  The hero headline is two sentences, each meant to hold a single line. Its
  size is therefore tied to the column width rather than to the type scale:
  the copy column is half the row, and the longest line measures ~10.5em, so
  the size has to stay under about 4.6vw for it to fit. `nowrap` enforces the
  one-line rule; the calc keeps it from overflowing when it does.
*/
.display--hero {
  font-size: clamp(1.9rem, calc(4.6vw - 6px), 3.8rem);
  line-height: var(--lh-hero);
}

.hero__title span[lang],
.hero__title em {
  white-space: nowrap;
}

.display--section {
  font-size: var(--t-2xl);
}

.display--sub {
  font-size: var(--t-xl);
}

/* The eyebrow is a coordinate/section readout, not decoration — it carries a
   real reference (a section index, an ICAO code, a heading). */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.eyebrow--plain::after {
  display: none;
}

.lede {
  font-size: var(--t-md);
  line-height: var(--lh-lede);
  color: var(--fg-muted);
  max-width: var(--measure);
  font-weight: 300;
}

.prose {
  max-width: var(--measure);
  color: var(--fg-muted);
}

.prose p + p {
  margin-block-start: var(--s-2);
}

/* Capability list inside body prose. A gold hairline rule as the marker,
   matching the rules used elsewhere rather than introducing a bullet glyph. */
.brieflist {
  color: var(--fg-muted);
}

.brieflist li {
  position: relative;
  padding-inline-start: 1.4rem;
  padding-block: 0.28rem;
  line-height: var(--lh-small);
}

.brieflist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.95em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent);
}

.prose strong {
  color: var(--fg);
  font-weight: 600;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--hull-950) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-block-end: 1px solid var(--hull-700);
  color: var(--chalk-50);
}

/* The masthead runs to the hero's wider measure rather than the site's default
   76rem, so the logotype sits out on the left edge — aligned with the hero
   headline below it — and the navigation sits out on the right. At the narrower
   width both were pulled toward the middle and the bar read as half empty. */
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 5.25rem;
  max-width: 94rem;
  padding-inline: clamp(1.25rem, 2.5vw, 2rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-end: auto;
}

/* The emblem is wider than it is tall, so it is sized by height and left to
   find its own width — a fixed square would letterbox or squash it. */
.brand__mark {
  width: auto;
  height: 2.7rem;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-500);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.nav__link {
  font-size: var(--t-sm);
  color: var(--chalk-300);
  padding-block: 0.35rem;
  border-block-end: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--chalk-50);
  border-block-end-color: var(--gold-500);
}

/* Language toggle — a two-state switch, always showing both options so the
   alternative is discoverable rather than hidden behind a menu. */
.langswitch {
  display: flex;
  align-items: center;
  border: 1px solid var(--hull-700);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}

.langswitch__btn {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  color: var(--ink-400);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.langswitch__btn[aria-pressed="true"] {
  background: var(--gold-500);
  color: var(--hull-950);
}

.langswitch__btn:hover:not([aria-pressed="true"]) {
  color: var(--chalk-50);
}

.navtoggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hull-700);
  border-radius: 2px;
  flex: none;
}

.navtoggle__bar,
.navtoggle__bar::before,
.navtoggle__bar::after {
  display: block;
  width: 1.1rem;
  height: 1px;
  background: var(--chalk-50);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.navtoggle__bar::before,
.navtoggle__bar::after {
  content: "";
  position: relative;
}

.navtoggle__bar::before {
  top: -0.36rem;
}

.navtoggle__bar::after {
  top: 0.35rem;
}

.navtoggle[aria-expanded="true"] .navtoggle__bar {
  background: transparent;
}

.navtoggle[aria-expanded="true"] .navtoggle__bar::before {
  transform: translateY(0.36rem) rotate(45deg);
}

.navtoggle[aria-expanded="true"] .navtoggle__bar::after {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--gold-500);
  border-radius: 1px;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
    border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--solid {
  background: var(--gold-500);
  color: var(--hull-950);
}

.btn--solid:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
}

.btn--ghost {
  color: var(--gold-500);
}

.btn--ghost:hover {
  background: var(--gold-500);
  color: var(--hull-950);
}

.btn__arrow {
  transition: transform 0.28s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   9. Section header
   -------------------------------------------------------------------------- */

.sectionhead {
  max-width: var(--measure);
  margin-block-end: var(--s-5);
}

.sectionhead__title {
  margin-block-start: var(--s-2);
}

.sectionhead__lede {
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-6);
  align-items: start;
}

.field {
  display: block;
  margin-block-end: var(--s-3);
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-block-end: 0.5rem;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--rule);
  padding: 0.6rem 0;
  transition: border-color 0.25s var(--ease);
}

.field__textarea {
  resize: vertical;
  min-height: 5rem;
}

/*
  The select was the only field drawn as a full box while every other field is
  a single underline, and it kept the native OS arrow — which is why it sat
  apart from the form. It now matches the inputs exactly, with the system
  control suppressed and a gold chevron drawn in its place.
*/
.field__select {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.6rem 1.75rem 0.6rem 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c9a961' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.85rem auto;
  transition: border-color 0.25s var(--ease);
}

.field__select:hover {
  border-block-end-color: var(--accent);
}

/*
  The open menu is drawn by the operating system, so it does not inherit the
  band's colours — set them explicitly or it renders as light-on-light.
*/
.field__select option {
  background: var(--hull-900);
  color: var(--chalk-50);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--fg-faint);
  opacity: 0.7;
}

/* Submission feedback. Empty until main.js writes to it, so it takes no space
   on a page the visitor hasn't interacted with. */
.formstatus {
  margin-block-start: var(--s-2);
  font-size: var(--t-sm);
  line-height: var(--lh-small);
  max-width: 46ch;
}

.formstatus:empty {
  display: none;
}

.formstatus[data-state="ok"] {
  color: var(--gold-400);
}

.formstatus[data-state="error"] {
  color: #e2a2a2;
}

.formstatus[data-state="info"] {
  color: var(--fg-muted);
}

.formnote {
  font-size: var(--t-xs);
  color: var(--fg-faint);
  margin-block-start: var(--s-2);
  max-width: 46ch;
  line-height: var(--lh-small);
}

.detail {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--rule);
  margin-block-end: -1px;
}

.detail__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.detail__value {
  margin-block-start: 0.3rem;
  font-size: var(--t-sm);
  color: var(--fg);
  line-height: var(--lh-small);
}

.detail__value a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--hull-950);
  color: var(--chalk-300);
  padding-block: var(--s-6) var(--s-4);
  border-block-start: 1px solid var(--hull-700);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5);
}

.footer__head {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-block-end: var(--s-2);
}

.footer__list li {
  padding-block: 0.28rem;
  font-size: var(--t-sm);
  line-height: var(--lh-small);
}

.footer__list a:hover {
  color: var(--chalk-50);
}

.footer__bottom {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--hull-700);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-2);
  z-index: 100;
  background: var(--gold-500);
  color: var(--hull-950);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skiplink:focus {
  inset-block-start: var(--s-1);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    min-height: 0;
  }

  /* Stacked above the copy, the frame sits inside the gutter like everything
     else — the right-edge bleed only makes sense beside the text. */
  .hero__figure {
    order: -1;
    width: 100%;
    max-width: 34rem;
    margin-inline-end: 0;
    justify-self: center;
  }

  .position,
  .contact,
  .split {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .split__aside {
    position: static;
  }

  .process {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-4);
  }

  .fees {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 46rem) {
  :root {
    --s-7: 4.5rem;
  }

  /* The tagline is nowrap, so at this width it would push the menu button off
     the edge. The logotype alone carries the brand here. */
  .brand__tag {
    display: none;
  }

  .masthead__inner {
    gap: 0.6rem;
    min-width: 0;
  }

  .brand {
    min-width: 0;
    gap: 0.6rem;
  }

  .brand__mark {
    width: auto;
    height: 1.9rem;
  }

  .brand__name {
    font-size: 0.92rem;
    letter-spacing: 0.06em;
  }

  .langswitch__btn {
    padding: 0.3rem 0.5rem;
  }

  .hero__figure {
    max-width: 22rem;
  }

  .hero__inner {
    padding-block: var(--s-5) var(--s-6);
  }

  /* Nav collapses into a disclosure panel. */
  .navtoggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--hull-950);
    border-block-end: 1px solid var(--hull-700);
    padding: var(--s-2) var(--page-pad) var(--s-4);
    transform: translateY(-120%);
    transition: transform 0.35s var(--ease);
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }

  .nav[data-open="true"] {
    transform: none;
  }

  .nav__link {
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--hull-700);
    font-size: var(--t-md);
  }

  .service {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--s-2);
  }

  .service__go {
    grid-column: 2;
    justify-self: start;
    margin-block-start: var(--s-2);
  }

  .contrast,
  .process,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .scope__item {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* --------------------------------------------------------------------------
   20. Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The frame arrives fully composed rather than settling in. */
  .heroframe__img {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .masthead,
  .navtoggle,
  .langswitch,
  .hero__figure,
  .btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .band,
  .hero,
  .pagehead,
  .footer {
    background: #fff !important;
    color: #000 !important;
    padding-block: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   21. Holding notice
   --------------------------------------------------------------------------
   The one block this page adds to the parent's system. Everything else on the
   page is a component carried over unchanged.
   -------------------------------------------------------------------------- */

.notice {
  padding-block: clamp(4rem, 13vh, 7.5rem);
}

.notice__title {
  margin-block-start: var(--s-3);
  font-size: clamp(2rem, 1.35rem + 3.1vw, 3.4rem);
  max-width: 20ch;
}

/* A gold rule under the statement, echoing the divider in the logotype. */
.notice__title::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 1px;
  margin-block-start: var(--s-3);
  background: var(--gold-500);
}

.notice__lede {
  margin-block-start: var(--s-3);
  max-width: 54ch;
}

/* Honeypot: reachable by bots, invisible and unfocusable for people. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}