/* ==========================================================================
   alfred. — Contact (Figma: Contact - Desktop, 1441 × 2137)
   In the homepage's frame and unit, like About and Services: 1 Figma px = 70% of a homepage unit
   (contact.js sets --u/--hu from the window, without the scrollbar). Off White inside, Alfred Red frame.
   Card with the form, "...unless you prefer old school:", the details, EVEN BELLEN?; the gaps
   where the hands were are closed.
   ========================================================================== */

.page-contact {
  --hu: min(100vw / 1440, 100vh / 1024);
  --u: calc(var(--hu) * .7);
  --edge: calc(12 * var(--hu)); --edge-radius: calc(28 * var(--hu));
  --pad: calc(16 * var(--hu)); --navh: calc(52 * var(--hu));   /* compact (user, 2026-11-06) */ --radius: calc(24 * var(--hu));
  --frame: var(--red);
  --win-top: calc(var(--edge) + var(--navh) + var(--pad));
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
}
html:has(.page-contact) { background: var(--frame); }

/* ---------- The homepage's frame (same rules as the other pages) ---------- */
.page-contact .site-mask {
  position: fixed;
  inset: var(--edge);
  z-index: 60;
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 100vmax var(--cream);
  pointer-events: none;
}
.ct-window {
  position: fixed;
  z-index: 40;
  top: var(--win-top);
  left: calc(var(--edge) + var(--pad));
  right: calc(var(--edge) + var(--pad));
  bottom: calc(var(--edge) + var(--pad));
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax var(--frame);
  pointer-events: none;
}
.page-contact .nav { --u: var(--hu); top: var(--edge); height: calc(var(--navh) + var(--pad)); background: var(--frame); color: var(--cream); }
.page-contact .nav__lang-menu { background: var(--frame); }

/* the page: the Figma frame's width, centred, starting under the window's top, everything stacked and centred */
.ct {
  width: calc(1441 * var(--u));
  margin: 0 auto;
  padding: calc(var(--win-top) + 55 * var(--u)) 0 calc(var(--edge) + var(--pad));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ---------- Hero Form (81, 55 · 1280): the same room above the title as under the form ---------- */
.ct-hero {
  width: calc(1280 * var(--u));
  padding: calc(86 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--u));
  background: var(--cream);   /* no border (user) */
}
.ct-hero__head { width: calc(727 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); text-align: center; color: var(--black); }
/* Figma: Semibold Italic 64/75; the kit's heaviest italic stands in */
.ct-hero__title { font-weight: 900; font-style: italic; font-size: calc(64 * var(--u)); line-height: calc(75 * var(--u)); }
.ct-hero__sub { font-style: italic; font-size: calc(24 * var(--u)); line-height: calc(25 * var(--u)); }

/* Form Contact (623 wide): white, 1px #d9d9d9, radius 16, padding 24, gap 24 */
.ct-form {
  width: calc(623 * var(--u));
  padding: calc(24 * var(--u));
  background: #fff;
  border: max(1px, calc(1 * var(--u))) solid #d9d9d9;
  border-radius: calc(16 * var(--u));
  color: #232323;
}
.ct-form__fields { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.ct-field { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ct-field span { font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u)); color: #1e1e1e; transition: color .4s var(--ease-out); }
.ct-field input, .ct-field textarea {
  font: inherit;
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
  color: #232323;
  background: var(--cream);
  border: calc(2 * var(--u)) solid var(--black);
  border-radius: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  outline: none;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.ct-field textarea { min-height: calc(80 * var(--u)); resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #232323; opacity: 1; }
.ct-field input:focus::placeholder, .ct-field textarea:focus::placeholder { opacity: .35; }
.ct-field input:focus, .ct-field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 107, 96, .25); }
.ct-field.is-invalid input, .ct-field.is-invalid textarea { border-color: var(--red); }
.ct-field.is-invalid span { color: var(--red); }

/* Button: Alfred Red, black 2px outline, radius 32, "Send message" Wide Super 24 */
.ct-form__submit {
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(24 * var(--u));
  line-height: calc(25 * var(--u));
  color: #232323;
  background: var(--red);
  border: calc(2 * var(--u)) solid var(--black);
  border-radius: calc(32 * var(--u));
  padding: calc(12 * var(--u));
  cursor: pointer;
  transition: transform .5s var(--ease-pop);
}
.ct-form__submit:hover { transform: scale(1.04); }

.ct-form__thanks { padding: calc(40 * var(--u)) 0; text-align: center; }
.ct-form__thanks strong { display: block; font-family: var(--font-wide); font-weight: 900; font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); text-transform: uppercase; color: var(--red); }
.ct-form__thanks p { margin-top: calc(12 * var(--u)); font-size: calc(20 * var(--u)); font-style: italic; }

/* ---------- ...unless you prefer old school: (98 under the card), Italic 48/52 ---------- */
.ct-old { margin-top: calc(98 * var(--u)); font-style: italic; font-size: calc(48 * var(--u)); line-height: calc(52 * var(--u)); color: var(--black); text-align: center; }

/* ---------- Contact / Information: straight under it (the hand is gone), three columns 51 apart ---------- */
.ct-info { margin-top: calc(80 * var(--u)); display: flex; gap: calc(51 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(25 * var(--u)); color: var(--red); }
.ct-info__col { display: flex; flex-direction: column; gap: calc(24 * var(--u)); white-space: nowrap; }
.ct-info__col:nth-child(1) { width: calc(243 * var(--u)); }
.ct-info__col strong { font-family: var(--font-wide); font-weight: 800; color: var(--black); }   /* bold in black, Wide Black (user) */
.ct-info a { transition: color .5s var(--ease-out); }
.ct-info a:hover { color: var(--black); }

/* ---------- EVEN BELLEN? (Wide Super, Rich Black, right-aligned), 70 under the details:
   exactly as wide as the form card above (contact.js sizes the type to fit it) ---------- */
.ct-big {
  width: calc(1280 * var(--u));
  margin: calc(70 * var(--u)) 0 calc(55 * var(--u));
  text-align: right;
  font-family: var(--font-wide);
  font-weight: 900;
  font-size: calc(160 * var(--u));
  line-height: calc(148 * var(--u));
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}

/* ---------- Portrait (phones, upright tablets): same pieces, sized from the width (1 --u = a 600th) ---------- */
@media (orientation: portrait) {
  .page-contact { --u: calc(100vw / 600); }
  .ct { width: auto; padding-left: calc(30 * var(--u)); padding-right: calc(30 * var(--u)); padding-top: calc(var(--win-top) + 30 * var(--u)); }
  .ct-hero { width: 100%; padding: calc(48 * var(--u)) calc(20 * var(--u)); }
  .ct-hero__head { width: 100%; }
  .ct-hero__title { font-size: calc(48 * var(--u)); line-height: calc(56 * var(--u)); }
  .ct-form { width: 100%; }
  .ct-old { margin-top: calc(64 * var(--u)); font-size: calc(36 * var(--u)); line-height: calc(42 * var(--u)); }
  .ct-info { margin-top: calc(48 * var(--u)); flex-direction: column; align-items: center; text-align: center; gap: calc(40 * var(--u)); }
  .ct-info__col { align-items: center; width: auto !important; }
  .ct-big { width: 100%; margin: calc(60 * var(--u)) 0 calc(40 * var(--u)); text-align: center; }
}

/* ---------- Letter case (as on the homepage): thin text in small letters, fat text in capitals ---------- */
.ct { text-transform: none; }
.ct :is(strong, b, .ct-hero__title, .ct-form__submit, .ct-big) { text-transform: uppercase; }
/* what visitors type stays as they type it; only the examples follow the rule */
.ct-field input, .ct-field textarea { text-transform: none; }
.ct-field input::placeholder, .ct-field textarea::placeholder { text-transform: none; }

/* the contact form: a field only robots see, and the message if sending fails */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-form__error { margin: 0 0 12px; color: #c2392f; font-size: calc(18 * var(--u)); line-height: 1.3; }
.ct-form__submit:disabled { opacity: .6; cursor: progress; }

/* the copyright line at the very bottom (user, 2026-11-05) */
.legal { width: 100%; margin: 0; padding: 0 0 calc(10 * var(--u)); text-align: center; font-family: var(--font); font-weight: 400; font-size: max(12px, calc(16 * var(--u))); line-height: 1.4; text-transform: none; letter-spacing: 0; opacity: .7; }
.legal { font-size: max(10px, calc(12 * var(--u))); }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) { .legal { font-size: 10px; } }

/* ---------- the new contact form (user, 2026-11-09): no card, white rounded fields without labels,
   a small salmon SUBMIT; WHY DON'T YOU... in Wide Black ---------- */
.ct-hero { background: none; padding: calc(40 * var(--u)) 0 calc(20 * var(--u)); gap: calc(56 * var(--u)); }
.ct-hero__head { width: auto; gap: calc(14 * var(--u)); }
.ct-hero__title { font-family: var(--font-wide); font-weight: 900; font-style: normal; font-size: calc(64 * var(--u)); line-height: 1; white-space: nowrap; }
.ct-hero__sub { font-style: italic; font-size: calc(24 * var(--u)); line-height: 1.2; }
.ct-form { width: calc(720 * var(--u)); padding: 0; background: none; border: 0; border-radius: 0; }
.ct-form__fields { gap: calc(24 * var(--u)); align-items: center; }
.ct-field { width: 100%; gap: 0; }
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct-field input, .ct-field textarea { background: #fff; border: 0; border-radius: calc(24 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.25; }
.ct-field textarea { border-radius: calc(16 * var(--u)); min-height: calc(165 * var(--u)); resize: none; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(35, 35, 35, .55); }
.ct-field input:focus, .ct-field textarea:focus { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 107, 96, .45); }
.ct-field.is-invalid input, .ct-field.is-invalid textarea { box-shadow: 0 0 0 calc(3 * var(--u)) var(--red); }
.ct-form__submit { align-self: center; border: 0; background: var(--red); border-radius: 99px; padding: calc(14 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1; transition: transform .35s var(--ease-pop), box-shadow .35s var(--ease-pop); }

.ct-form__error { text-align: center; }
@media (orientation: portrait) {
  .ct-hero { padding: calc(30 * var(--u)) 0 calc(10 * var(--u)); gap: calc(40 * var(--u)); }
  .ct-hero__title { white-space: normal; font-size: calc(54 * var(--u)); line-height: 1.05; }
  .ct-hero__sub { font-size: calc(22 * var(--u)); }
  .ct-form { width: 100%; }
  .ct-field input, .ct-field textarea { font-size: 16px; padding: 12px 18px; border-radius: 22px; }
  .ct-field textarea { border-radius: 16px; min-height: 120px; }
  .ct-form__submit { font-size: 15px; padding: 11px 22px 13px; }
}

/* SUBMIT sits evenly between the message box and the old-school line (user, 2026-11-09) */
.ct-form__submit { margin-top: calc(56 * var(--u)); }
.ct-old { margin-top: calc(66 * var(--u)) !important; }