/* ============================================================================
   /contact — the contact page
   ----------------------------------------------------------------------------
   Brought onto the Vitrine system 2026-08-30. The page was the last one still
   running on the pre-cutover primitives, and three things followed from that:

   1. SCOPING. It was `body.contact-page`, not a `-v2` page, so every rule here
      was a bare class. styles.css:6547 carries a site-wide `a[href] {
      font-size: 1rem }`, which at (0,1,1) outranks any bare class whatever the
      load order — so the email address, the phone number, the CTA and the
      social links were all silently flattened to 1rem no matter what this file
      asked for. That is what made the type read as unset. Every rule below is
      prefixed `body.contact-v2` (0,2,1 and up), which takes them back without
      editing shared CSS.

   2. `.col` DID NOT EXIST. It is defined only inside `body.home-v2`,
      `body.stamp-v2` and `body.account-v2`. On this page the class was inert:
      no column width, no gutter. Defined here, same values as the others.

   3. NO TOKENS. The sheet reached for --color-* legacy names, which do now
      carry the Vitrine values, but none of the elevation, easing or spacing
      scale the rest of the site composes with. The full block is declared here
      exactly as home.css declares it.

   ROOT SIZE: the design's rems are drawn against an 18px root, so `html` is set
   to 112.5% below — unscoped on purpose, as home.css / stamp.css / account.css
   do it, because this file is linked by /contact alone.

   NO MONO ON THIS PAGE. DESIGN.md reserves JetBrains Mono for cryptographic
   artifacts (hashes, serials, timestamps). The old sheet set the 01-04 list
   numerals in it for texture; a list index is not an artifact, so they are
   Montserrat here. The page has no artifact strings at all.
   ========================================================================== */

html { font-size: 112.5%; }          /* 16px -> 18px, see note above */

/* ============================================================
   TOKENS — "The Lit Vitrine" (see /DESIGN.md)
   ============================================================ */
body.contact-v2 {
  --ink:        #16140f;
  --teal:       #0d5c63;
  --teal-deep:  #0a4a50;
  --teal-dark:  #073338;
  --coral:      #ff7a59;
  --coral-deep: #f2613f;
  --coral-light:#ff8f70;
  --cream:      #f1ede3;
  --paper:      #f7f5f0;
  --paper-line: rgba(22,20,15,.10);
  --dim-on-dark:rgba(244,241,232,.78);
  --dim:        #6d6452;

  /* state colors — feedback only, never decorative (per DESIGN.md) */
  --cancel:     #8a2a1f;
  --validate:   #2f5d3d;

  --display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --sans:    'Montserrat', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --col: clamp(20rem, 92vw, 74rem);

  --s-xs:  4px;
  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  28px;
  --s-xl:  44px;
  --s-2xl: 76px;
  --s-3xl: 96px;

  --sh-1: 0 1px 2px rgba(7,51,56,.06), 0 2px 6px rgba(7,51,56,.05);
  --sh-2: 0 2px 4px rgba(7,51,56,.05), 0 8px 22px rgba(7,51,56,.08);
  --el-4: 0 18px 40px rgba(7,51,56,.14), 0 50px 100px rgba(7,51,56,.22);
  --hl:   inset 0 1px 0 rgba(255,255,255,.75);
  --ring: 0 0 0 3px rgba(13,92,99,.45);

  --coral-face: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(140,44,20,.16));
  --coral-edge: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,38,18,.24);
  --coral-lift: 0 1px 2px rgba(22,20,15,.2), 0 8px 18px -6px rgba(191,64,36,.55);
  --coral-lift-hi: 0 2px 4px rgba(22,20,15,.22), 0 14px 26px -8px rgba(191,64,36,.6);
}

/* ============================================================
   PAGE BASE
   ============================================================ */
body.contact-v2 *::before,
body.contact-v2 *::after { box-sizing: border-box; }
body.contact-v2 {
  margin: 0; overflow-x: clip;
  font-family: var(--sans);
  /* lang="bg" switches Montserrat to the Bulgarian locl forms, which read as
     handwriting at display sizes. Same call the other pages make. */
  font-feature-settings: 'locl' 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* the film grain that sits over every other page */
body.contact-v2::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: multiply;
}
/* Only the page's own content is lifted above the grain. `body > *` would also
   catch the promo and cookie banners inject.js appends and break their
   position: fixed — the bug home.css documents at its own grain rule. */
body.contact-v2 > main { position: relative; z-index: 1; }
body.contact-v2 a { color: inherit; text-decoration: none; }
body.contact-v2 :where(a, button, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 4px;
}

body.contact-v2 .col { width: var(--col); margin-inline: auto; padding-inline: 28px; }
body.contact-v2 .section { padding: clamp(56px, 7vh, 96px) 0; }
body.contact-v2 .h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
body.contact-v2 .eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  color: var(--teal); display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 var(--s-md);
}
body.contact-v2 .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--teal); }

/* ============================================================
   BUTTON — the same coral face the rest of the site uses
   ============================================================ */
body.contact-v2 a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  border-radius: 11px; border: 0; padding: 16px 30px;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.contact-v2 a.btn-lime {
  background-color: var(--coral); background-image: var(--coral-face); color: var(--ink);
  box-shadow: var(--coral-edge), var(--coral-lift);
}
body.contact-v2 a.btn-lime:hover {
  background-color: var(--coral-deep); transform: translateY(-2px);
  box-shadow: var(--coral-edge), var(--coral-lift-hi);
}
body.contact-v2 a.btn-lime:active { transform: translateY(1px); }

/* ============================================================
   1 · HERO — dark teal field, the sheet is the object in the case
   ============================================================ */
body.contact-v2 .contact-hero {
  position: relative; overflow: hidden;
  background: var(--teal); color: var(--cream);
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
}
/* the vitrine's light: one wide arc off the top-right corner */
body.contact-v2 .contact-hero::after {
  content: ''; position: absolute; pointer-events: none;
  width: clamp(20rem, 48vw, 42rem); height: clamp(20rem, 48vw, 42rem);
  top: clamp(-15rem, -18vw, -5rem); right: clamp(-18rem, -20vw, -7rem);
  border: 1px solid rgba(241,237,227,.12); border-radius: 50%;
}
body.contact-v2 .contact-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .78fr);
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
body.contact-v2 .contact-hero .eyebrow { color: var(--coral); }
body.contact-v2 .contact-hero .eyebrow::before { background: var(--coral); }
body.contact-v2 .contact-hero h1 {
  font-family: var(--display); font-weight: 700; color: var(--cream);
  font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 var(--s-lg); max-width: 17ch; text-wrap: balance;
}
body.contact-v2 .contact-hero .lead {
  color: var(--dim-on-dark); font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.62; margin: 0; max-width: 34rem; text-wrap: pretty;
}

/* ---- the direct-contact sheet ---- */
body.contact-v2 .contact-sheet {
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(22,20,15,.12); border-radius: 3px;
  box-shadow: var(--el-4), var(--hl);
  padding: clamp(1.9rem, 3.4vw, 2.7rem);
  /* a sheet of paper set down on the counter, not a UI panel */
  transform: rotate(1.2deg);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
}
/* picked up and squared off when you reach for it */
body.contact-v2 .contact-sheet:hover,
body.contact-v2 .contact-sheet:focus-within {
  transform: rotate(0deg) translateY(-4px);
}
body.contact-v2 .contact-sheet__label {
  font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  color: var(--dim); margin: 0 0 var(--s-md);
  display: flex; align-items: center; gap: 12px;
}
body.contact-v2 .contact-sheet__label::after {
  content: ''; flex: 1; height: 1px; background: var(--paper-line);
}
body.contact-v2 .contact-sheet h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 var(--s-sm);
}
body.contact-v2 a.contact-sheet__email {
  display: inline-block; color: var(--teal);
  font-weight: 700; font-size: clamp(1.24rem, 2.2vw, 1.6rem); line-height: 1.2;
  letter-spacing: -.01em; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: rgba(13,92,99,.32);
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
body.contact-v2 a.contact-sheet__email:hover {
  color: var(--teal-deep); text-decoration-color: currentColor;
}
body.contact-v2 .contact-sheet__note {
  color: var(--dim); font-size: .93rem; line-height: 1.55;
  margin: var(--s-md) 0 var(--s-lg); max-width: 34ch; text-wrap: pretty;
}
body.contact-v2 a.contact-sheet__cta { width: 100%; }

body.contact-v2 .contact-sheet__phone {
  display: grid; gap: 5px;
  margin-top: var(--s-lg); padding-top: var(--s-lg);
  border-top: 1px solid var(--paper-line);
}
body.contact-v2 .contact-sheet__phone p {
  margin: 0; font-weight: 700; font-size: .95rem; color: var(--ink);
}
body.contact-v2 a.contact-sheet__phone-num {
  width: fit-content; color: var(--teal);
  font-weight: 700; font-size: 1.16rem; letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
body.contact-v2 a.contact-sheet__phone-num:hover { color: var(--teal-deep); }
body.contact-v2 .contact-sheet__phone span {
  color: var(--dim); font-size: .86rem; line-height: 1.5;
}

/* ============================================================
   2 · FORM — cream field. The page's real work: the sheet in the
   hero gives the direct channels, this writes the message.
   ============================================================ */
body.contact-v2 .contact-form-section { background: var(--cream); }
body.contact-v2 .contact-form__inner {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
body.contact-v2 .contact-form__lede .h2 { max-width: 16ch; }
body.contact-v2 .contact-form__lede p {
  margin: var(--s-lg) 0 0; color: var(--dim); font-size: 1.02rem;
  line-height: 1.6; max-width: 42ch; text-wrap: pretty;
}
body.contact-v2 .contact-form {
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: 18px;
  box-shadow: var(--sh-2), var(--hl);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; gap: var(--s-md);
}
body.contact-v2 .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
body.contact-v2 .contact-field { display: grid; gap: 7px; min-width: 0; }
body.contact-v2 .contact-field label {
  font-family: var(--sans); font-weight: 600; font-size: .86rem;
  letter-spacing: .01em; color: var(--dim);
}
body.contact-v2 .contact-field input,
body.contact-v2 .contact-field select,
body.contact-v2 .contact-field textarea {
  font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(22,20,15,.22); border-radius: 8px;
  padding: 12px 14px; width: 100%; min-width: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.contact-v2 .contact-field textarea { resize: vertical; min-height: 8.5rem; }
body.contact-v2 .contact-field input::placeholder,
body.contact-v2 .contact-field textarea::placeholder { color: rgba(109,100,82,.7); }
body.contact-v2 .contact-field input:focus,
body.contact-v2 .contact-field select:focus,
body.contact-v2 .contact-field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,92,99,.18);
}
/* The native arrow is drawn in the OS chrome and reads as a different system
   from everything else on the page, so the control carries its own. */
body.contact-v2 .contact-field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236d6452' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
/* Off-screen rather than display:none: a bot that skips hidden inputs would
   skip the trap, which is the whole point of it. */
body.contact-v2 .contact-form__trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body.contact-v2 .contact-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md);
  margin-top: var(--s-xs);
}
body.contact-v2 a.contact-form__submit,
body.contact-v2 button.contact-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  border-radius: 11px; border: 0; padding: 16px 30px; cursor: pointer;
  background-color: var(--coral); background-image: var(--coral-face); color: var(--ink);
  box-shadow: var(--coral-edge), var(--coral-lift);
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.contact-v2 button.contact-form__submit:hover:not(:disabled) {
  background-color: var(--coral-deep); transform: translateY(-2px);
  box-shadow: var(--coral-edge), var(--coral-lift-hi);
}
body.contact-v2 button.contact-form__submit:active:not(:disabled) { transform: translateY(1px); }
body.contact-v2 button.contact-form__submit:disabled { opacity: .6; cursor: default; }
body.contact-v2 .contact-form__privacy {
  margin: 0; flex: 1 1 16rem; color: var(--dim); font-size: .84rem; line-height: 1.5;
}
/* Empty until something is said, so it never reserves a blank line. */
body.contact-v2 .contact-form__status { margin: 0; font-size: .95rem; line-height: 1.5; }
body.contact-v2 .contact-form__status:empty { display: none; }
body.contact-v2 .contact-form__status.is-ok {
  color: var(--validate); background: rgba(47,93,61,.12);
  border-radius: 8px; padding: 12px 14px;
}
body.contact-v2 .contact-form__status.is-error {
  color: var(--cancel); background: rgba(138,42,31,.1);
  border-radius: 8px; padding: 12px 14px;
}

/* ============================================================
   3 · TOPICS — paper field, a ruled index. No cards.
   ============================================================ */
body.contact-v2 .contact-topics .h2 { max-width: 20ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
body.contact-v2 .contact-topics__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--paper-line);
}
body.contact-v2 .contact-topics__list li {
  display: grid; grid-template-columns: 3.4rem 1fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: start;
  border-bottom: 1px solid var(--paper-line);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) var(--s-md) clamp(1.4rem, 2.4vw, 1.9rem) var(--s-md);
  margin-inline: calc(var(--s-md) * -1);
  border-radius: 3px;
  transition: background .22s var(--ease);
}
body.contact-v2 .contact-topics__list li:hover { background: var(--cream); }
/* A leading numeral, which is the sanctioned alternative to an accent stripe.
   Montserrat, not mono: a list index is not a cryptographic artifact. */
body.contact-v2 .contact-topics__number {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--teal); opacity: .38;
  transition: opacity .22s var(--ease);
}
body.contact-v2 .contact-topics__list li:hover .contact-topics__number { opacity: 1; }
body.contact-v2 .contact-topics h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.16rem, 1.8vw, 1.3rem); line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 var(--s-sm); color: var(--ink);
}
body.contact-v2 .contact-topics p {
  margin: 0; color: var(--dim); line-height: 1.6; max-width: 62ch; text-wrap: pretty;
}

/* ============================================================
   3 · RECORD — ink field. The company behind the site, stated
   plainly, the way a document states its issuer.
   ============================================================ */
body.contact-v2 .contact-record {
  background: var(--ink); color: var(--cream);
  padding: clamp(52px, 7vw, 88px) 0;
}
body.contact-v2 .contact-record__inner {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
body.contact-v2 .contact-record h2 {
  font-family: var(--display); font-weight: 700; color: var(--cream);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em;
  margin: 0; text-wrap: balance;
}
body.contact-v2 .contact-record__data { margin: 0; }
body.contact-v2 .contact-record__data > div {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--s-xs) var(--s-lg);
  padding: var(--s-md) 0;
  border-top: 1px solid rgba(244,241,232,.14);
}
body.contact-v2 .contact-record__data > div:first-child { border-top: 0; padding-top: 0; }
body.contact-v2 .contact-record__data dt {
  font-weight: 600; font-size: .82rem; letter-spacing: .01em;
  color: rgba(244,241,232,.6); padding-top: 3px;
}
body.contact-v2 .contact-record__data dd {
  margin: 0; font-weight: 500; font-size: 1.02rem; line-height: 1.5; color: var(--cream);
}

/* The social block rides in the left rail under the heading. On its own the
   heading left a third of the band empty at desktop width. */
body.contact-v2 .contact-record__social { margin-top: var(--s-xl); }
@media (max-width: 940px) {
  body.contact-v2 .contact-record__social {
    margin-top: var(--s-lg); padding-top: var(--s-lg);
    border-top: 1px solid rgba(244,241,232,.14);
  }
}
body.contact-v2 .contact-record__social h3 {
  font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  color: rgba(244,241,232,.6); margin: 0 0 var(--s-md);
}
body.contact-v2 .contact-social-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* Cream outline pills, never coral: coral means the live action, and there is
   already one of those on this page. */
body.contact-v2 a.contact-social-links__link {
  display: inline-flex; align-items: center;
  font-weight: 600; font-size: .92rem; color: var(--cream);
  padding: 10px 20px; border-radius: 100px;
  border: 1px solid rgba(244,241,232,.28); background: transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
body.contact-v2 a.contact-social-links__link:hover {
  background: rgba(244,241,232,.09); border-color: rgba(244,241,232,.5);
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  body.contact-v2 .contact-form__inner { grid-template-columns: 1fr; }
  body.contact-v2 .contact-form__lede .h2 { max-width: 22ch; }
  body.contact-v2 .contact-hero__inner { grid-template-columns: 1fr; align-items: start; }
  body.contact-v2 .contact-hero h1 { max-width: 20ch; }
  body.contact-v2 .contact-sheet { max-width: 36rem; transform: none; }
  body.contact-v2 .contact-sheet:hover,
  body.contact-v2 .contact-sheet:focus-within { transform: translateY(-4px); }
  body.contact-v2 .contact-record__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* never let the column floor (20rem) exceed a narrow viewport */
  body.contact-v2 { --col: 100%; }
  body.contact-v2 .col { padding-inline: 20px; }
  body.contact-v2 .contact-topics__list li { grid-template-columns: 2.6rem 1fr; gap: var(--s-md); }
  body.contact-v2 .contact-topics__number { font-size: 1.25rem; }
  body.contact-v2 .contact-record__data > div { grid-template-columns: 1fr; }
  body.contact-v2 .contact-form__row { grid-template-columns: 1fr; }
  body.contact-v2 button.contact-form__submit { width: 100%; }
  body.contact-v2 .contact-social-links { gap: 8px; }
  body.contact-v2 a.contact-social-links__link { padding: 9px 16px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.contact-v2 .contact-sheet,
  body.contact-v2 .contact-sheet:hover,
  body.contact-v2 .contact-sheet:focus-within { transform: none; }
  body.contact-v2 * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}