/* Contact — a state of the hero stage, not a separate page. Requires
   base.css, hero.css, about.css, services.css, products.css and events.css.

   `events` now owns the outermost-chevron travel that used to live here
   (see `.hero.is-events` in hero.css and events.css) — quad, the fourth
   chain chevron added for `events`, continues about's front-onto-mid,
   services' mid-onto-back and products' back-onto-quad chain one lane
   further, landing on `contact`'s own literal label position (2%) since
   there is no further chevron for it to land on. Clicking `contact` plays
   that in reverse instead: it sets no `--shift-quad` of its own, so
   arriving here (from `events` or anywhere else) simply lets the quad
   chevron — and the `events` label riding it — fall back to the base 0vw
   rest value and slide home to the right. Front, mid and now back all
   vanish instantly, reusing events.css's "no theatre" exit verbatim (back
   is invisible from `events` onward already, so this is just keeping it
   that way, not a new vanish of its own).

   One deliberate asymmetry versus about/services/products: `.hero-nav__link
   --contact` never hides itself when contact is current (see hero.css) —
   there's no destination for it to fade into, so it just stays readable.
   `products`' label needs no special handling here any more: once its
   chevron has slid home, it is simply a normal, non-current link again.

   The fourth chevron arrives plain, same as services — no gallery rides it,
   but contact joins hero.css's `.arrow--far` group so the right side isn't
   left empty. It also joins the corner-logo-fold group, so the way back to
   the plain hero still works.

   Geometry is a percentage of the stage, pixel-measured off
   `references site/sections/contact/contact_full.png` (panel bounding box
   sampled directly, chrome offset subtracted). Per the prompt, that mockup
   is evidence for the panel's *alignment* only, not its background, its
   near-black fill, or its chevron count — the panel here uses the site's own
   `--panel-gallery` blue instead, matching every other panel on the site.
   That mockup was drawn against the old design where the back chevron
   travelled away from this footprint; now it sits at rest here instead (the
   same resting spot products' own, narrower card has always coexisted with)
   — verified against a live screenshot, not assumed. */

.hero {
  /* Widened leftward from 28.08% (on request, to give the info column's
     row values more room to sit on one line — see `.contact-row__value`
     below) — --contact-right/-top/-bottom untouched, so only the card's
     left edge (and, via the unchanged 1.8fr/1.2fr split, both internal
     columns proportionally) grew. */
  --contact-left: 24%;
  --contact-right: 68%;
  /* Reversed back down 4.4 points, top and bottom together, to its prior
     position (top no longer aligned to about's/services'/products'/events'
     own lead-column top). Was --contact-top: 18%, --contact-bottom: 66.6%;
     see CLAUDE.md's "The contact choreography". */
  --contact-top: 22.4%;
  --contact-bottom: 71%;
}

/* ---------- Laptop tier ----------

   Laptop-only geometry (aspect <= 1.85:1 — see about.css's own "Laptop
   tier" block for the fuller rationale, first introduced there this
   session). Outside this range the section falls back to
   --contact-right just above, i.e. today's pre-this-session geometry. */
@media (max-aspect-ratio: 1.85/1) {
  .hero {
    /* Widened on request ("widen the column by 2% on the right",
       corrected to "by 3% not by 2") — --contact-left untouched, so only
       the right edge moved. */
    --contact-right: 71%;
  }
}

/* ---------- State ---------- */

.is-contact .contact-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--ease-fade) var(--delay-settle),
    visibility 0s linear var(--delay-settle);
}

/* A per-section `.is-contact .hero-nav__link--about { opacity: 0;
   pointer-events: none; }` rule used to live here — removed 2026-09-16 as
   dead weight, not a behavior change. `about`'s label sits at
   `--arrow-front + --tip-offset-front` (41.4%), inside the contact panel's
   own footprint (28.08%-68% left, 22.4%-71% top), which is why it needs
   hiding at all — but `hero.css`'s general `nav-left-*` mechanism
   (`.hero.nav-left-about .hero-nav__link--about`, see its own comment)
   already covers this unconditionally: `about` is rank 0 in `SECTIONS`,
   `contact` is rank 4, and `setSection` sets `nav-left-about` whenever
   `index < currentIndex` — true for every path into `contact` (forward
   click, direct URL load, popstate, a corner-nav jump), with no exception.
   That rule is also higher-specificity (three classes vs. this one's two),
   so it always won regardless. If an `about`-label collision like this
   ever recurs for a section *earlier* than `about` in the chain (impossible
   today, since `about` is rank 0), fix it in the general `nav-left-*` rule,
   not with another one-off selector here. */

/* ---------- No-theatre exit ---------- */

/* Front/mid copied verbatim from products.css's `.is-products` equivalents.
   Back needs its own rule here too now (it didn't before quad existed):
   back is already hidden from `events` onward (see events.css), and this
   just keeps it that way — not a new vanish of its own, so no comment
   parallel to `.hero-nav__link--about`'s collision note above is needed;
   back was never visible here to begin with. */
.is-contact .arrow--front {
  opacity: 0;
  transition: none;
}

.is-contact .arrow--mid {
  opacity: 0;
  transition: none;
}

.is-contact .arrow--back {
  opacity: 0;
  transition: none;
}

/* ---------- Header ---------- */

/* Same top-left position/face/size/tracking as `.services__title` /
   `.products__title` — anchored to the card's own left/right rather than
   `--bento-left`/`--bento-right`, since the card doesn't share those
   sections' width. No lead paragraph under it, unlike services/products:
   not asked for here. */
.contact__title {
  position: absolute;
  left: var(--contact-left);
  top: 11%;
  width: calc(var(--contact-right) - var(--contact-left));
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-heading);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}

/* ---------- Contact card ---------- */

.contact-card {
  position: absolute;
  left: var(--contact-left);
  top: var(--contact-top);
  width: calc(var(--contact-right) - var(--contact-left));
  height: calc(var(--contact-bottom) - var(--contact-top));
  display: grid;
  /* Was `2fr 1fr` (66.7%/33.3%) — narrowed the info column and widened
     the photo column by the same amount, on request ("the smaller box
     ... should be reduced from the right side, to expand the image box
     ... a little bit"). Card's own outer box (--contact-left/-right/
     -top/-bottom) is untouched — only the internal split moved. */
  grid-template-columns: 1.8fr 1.2fr;
  background: var(--panel-gallery);
  box-shadow: 0 0.5cqh 0.9cqw rgba(var(--shadow-ink), 0.22);
}

/* ---------- Info column ---------- */

.contact-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2cqh;
  padding: 1.9cqw;
}

.contact-card__title {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-body);
  font-weight: normal;
  line-height: 1.15;
  color: var(--paper);
}

.contact-card__lead {
  margin: 1.4cqh 0 0;
  max-width: 100%;
  font-family: var(--font-utility);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--paper);
}

.contact-card__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6cqh 1.6cqw;
  margin: 0.6cqh 0 0;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
}

.contact-row--address {
  grid-column: span 2;
}

/* flex: none, or the square shrinks along its height once neighbouring rows
   wrap to an extra line. */
.contact-row__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6cqw;
  height: 2.6cqw;
  background: rgba(244, 247, 249, 0.12);
  color: var(--paper);
}

.contact-row__icon svg {
  display: block;
  width: 52%;
  height: auto;
}

.contact-row__label {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-body);
  font-weight: normal;
  line-height: 1.15;
  color: var(--paper);
}

/* Desktop/laptop: title on its own row (`.contact-row__label`), the
   value directly under it, always on a single line — on request, the
   narrower info column (see `.hero`'s own comment on `--contact-left`
   above) was wrapping Phone/Address onto a second line. Mobile/tablet
   resets this back to `normal` below, since the stacked card there has
   plenty of width and wrapping was already confirmed looking right. */
.contact-row__value {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper);
  white-space: nowrap;
}

/* Desktop keeps these as plain text-styled links (no underline — the
   two-column card reads clearly without it); mobile/tablet turns on the
   underline + hover/active dimming below, since those are the tiers
   people are most likely to tap to call/email straight from. */
.contact-row__link,
.contact-row__link:visited {
  color: var(--paper);
  text-decoration: none;
  transition: opacity var(--ease-ui);
}

.contact-row__link:hover {
  opacity: 0.8;
}

.contact-row__link:active {
  opacity: 0.6;
}

/* ---------- Legal row (desktop/laptop) ----------

   Below `.contact-card__rows`, inside the info column — the request to pull
   this out into a separate bottom-of-page footer was scoped to mobile/
   tablet flow only ("shouldn't appear in the contacts" meant the stacked
   phone/tablet layout, not the desktop stage). Desktop/laptop keeps these
   links where they've always lived, inside the card. See `.site-footer`
   below for the mobile/tablet-only counterpart. Dimmed to read as
   secondary/utility, same role --paper-dim plays for `.contact-row__value`'s
   sibling label text. */
.contact-card__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6cqh 0.8cqw;
}

.contact-card__legal-link {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease-ui);
}

.contact-card__legal-link:hover {
  color: var(--paper);
}

.contact-card__legal-link:active {
  color: var(--paper-dim);
}

.contact-card__legal-divider {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  color: var(--paper-dim);
}

/* Plain dimmed text, same treatment as the two legal links beside it — no
   pill/panel of its own (tried for the badge in this spot once before,
   then reverted on request). No divider before it: with `flex-wrap`, a
   divider here could end up orphaned alone at the end of a wrapped line, so
   the badge instead reads as its own line when it wraps. */
.contact-card__legal-rights {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper-dim);
  white-space: nowrap;
}

/* ---------- Site footer (mobile/tablet only) ----------

   Same two legal links plus the copyright line, duplicated here for the
   stacked mobile/tablet flow layout, on request ("shouldn't appear in the
   contacts, should be in a separate footer at the bottom of the site") —
   that request was about the mobile/tablet stack specifically, where
   `contact` is the last section in DOM order and the page genuinely
   scrolls to a bottom (see hero.css's mobile-flow block), so this is the
   closest this one-page/stage site has to a real sitewide footer there.
   Hidden outright on desktop/laptop (`display: none` below) — that stage
   keeps `.contact-card__legal`, above, inside the card. */
.site-footer {
  display: none;
}

.site-footer__link {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease-ui);
}

.site-footer__link:hover {
  color: var(--paper);
}

.site-footer__link:active {
  color: var(--paper-dim);
}

.site-footer__divider {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  color: var(--paper-dim);
}

/* Plain dimmed text, same treatment as the two legal links beside it — no
   pill/panel of its own (tried for the badge in its old contact-card
   location, then reverted on request). */
.site-footer__rights {
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper-dim);
  white-space: nowrap;
}

/* ---------- Form column ---------- */

/* The contact form itself was removed (on request), then this panel got a
   photo instead — the same "guy on the phone, hand on the window" shot
   that once led the events grid (`events_front.webp`, unused there since
   that card was swapped for the PRISMA × ICPA banner — see CLAUDE.md's
   events-lead-photo entry). Full-bleed `padding: 0; overflow: hidden;`,
   same treatment every other bare-photo card on the site uses (events'
   own lead/image cards, about's gallery tile). Grid's default
   `align-items: stretch` is what keeps this column full-height, matching
   the info column beside it — nothing else needs to size it. */
.contact-card__form {
  padding: 0;
  overflow: hidden;
  background: rgba(0, 24, 38, 0.22);
}

.contact-card__form-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Mobile flow ---------- */

@media (max-width: 1024px), (max-aspect-ratio: 1/1) {
  .contact__title,
  .contact-card {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }

  .contact__title {
    padding: 6vh 5vw 0;
  }

  .contact-card {
    height: auto;
    margin: 3vh 5vw 5vh;
    width: calc(100% - 10vw);
    grid-template-columns: 1fr;
  }

  .contact-card__rows {
    grid-template-columns: 1fr;
  }

  .contact-row--address {
    grid-column: auto;
  }

  /* Desktop's forced single-line value (above) is undone here — the
     stacked mobile card already has plenty of width and this tier was
     confirmed looking right before that rule existed. */
  .contact-row__value {
    white-space: normal;
  }

  /* 2.6cqw is ~10px at phone width — a legibility floor, not a tap target
     (the icon is decorative), but still too small to read. */
  .contact-row__icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  /* Signal that email/phone are tappable on touch tiers, where there's no
     hover state to reveal it otherwise. */
  .contact-row__link {
    text-decoration: underline;
    text-decoration-color: var(--paper);
    text-underline-offset: 2px;
  }

  /* Desktop/laptop's in-card legal row has no room in the stacked mobile
     layout's own narrower flow — hidden here in favor of `.site-footer`,
     below. */
  .contact-card__legal {
    display: none;
  }

  /* The info box's own `1.9cqw` padding (desktop rule, above) resolves to
     only ~7px at phone width, reading as cramped above "GET IN TOUCH" and
     below the last row. `vh`, not `cqw`, for the vertical sides — tracks
     the viewport's own height rather than shrinking further with the
     narrower phone width. Left/right stay on the inherited `1.9cqw`
     value; only vertical was reported tight. */
  .contact-card__info {
    padding-top: 3.5vh;
    padding-bottom: 3.5vh;
  }

  /* The literal bottom of the scrolling page here (contact is the last
     stacked section) — full-width band, edge-to-edge like `.mobile-nav`,
     rather than the card's own inset width. Bottom padding is fixed px, not
     vh (`.social-linkedin`'s own reasoning: it isn't art-directed against
     any scaling coordinate system) — `.social-linkedin` stays
     `position: fixed; right/bottom: 20px;` at 44px square. Went through
     several sizes on request — 84px, then 42px, then 0 (which brought back
     the icon sitting on the copyright line), then landed here: 44px, the
     icon's own height, no added buffer. Two rows, on request — "Privacy
     Notice · Imprint" on the first line, the copyright text on its own
     line below. Still one flex-wrap row of three items in markup (no HTML
     change needed): `.site-footer__rights` gets `flex-basis: 100%`, a
     plain CSS force-wrap trick — an item with 100% basis can never fit
     beside its siblings, so it always starts a new line, while the two
     links + divider before it keep flowing normally on the first. No gap
     between the two wrapped rows (on request) — column-gap still spaces
     the link/divider/link within the first row. */
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    gap: 0 4vw;
    margin: 0;
    padding: 2vh 5vw 44px;
    border-top: 1px solid rgba(244, 247, 249, 0.15);
  }

  .site-footer__rights {
    flex-basis: 100%;
    text-align: center;
  }
}

/* Tablet tier: same stacked single-column card as phone, above, with
   content running near-full-width (a flat 32px side gutter, not a
   centered narrower column — a wide, centered `max-width` column was
   tried first and reverted on request: it read as too much dead margin
   on a 768-1024px screen), with row/icon/tap-target sizing scaled up for
   the larger screen. First pass, no tablet reference exists yet. */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact__title {
    padding: 8vh 32px 0;
  }

  .contact-card {
    margin: 4vh 32px 6vh;
    width: calc(100% - 64px);
  }

  .contact-row__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  .contact-card__info {
    padding-top: 4.5vh;
    padding-bottom: 4.5vh;
  }

  .site-footer {
    gap: 0 32px;
    padding: 2vh 32px 44px;
  }
}