/* =============================================================================
   I4PL CONFERENCE 2027: interest landing page (v2, corporate)
   Design read: event interest page for learning and performance professionals
   and sponsors. Confident bento on a deep navy ground, with royal blue, muted gold,
   steel blue and one crimson accent. The sign-up form lives in a pop-up (dialog).
   Dials: variance 7, motion 4, density 4.
   Rules kept: 16px minimum for every visible string, one radius scale,
   dark ground by default with a light variant, reduced motion honoured, no em dashes.
   PHOTO FOCUS: change the --photo-N-focus values if a swapped photo needs a different
   crop (see tools/make_photo.py).
   ============================================================================= */

:root {
  --photo-1-focus: 50% 35%;
  --photo-2-focus: 50% 45%;
  --photo-3-focus: 50% 55%;

  /* palette */
  --navy-950: #071230;
  --navy-900: #0b1e4a;
  --slate: #14295e;
  --royal: #1f44c8;
  --royal-deep: #17349a;
  --steel: #a9c8ea;
  --gold: #e8b431;
  --gold-soft: #f6e2a8;
  --crimson: #882048; /* the wine in the Institute logo */
  --logo-teal: #00b8b0; /* the teal in the Institute logo */
  --paper: #f4f7fc;
  --white: #ffffff;

  /* page tokens: deep navy ground by default, soft slate ground when the visitor prefers light */
  --page-bg: var(--navy-950);
  --page-glow: #16307c;
  --page-ink: #f4f7fc;
  --edge: rgba(255, 255, 255, 0.22);

  /* shape scale: tiles 20, controls 12, buttons and chips full pill */
  --r-tile: 20px;
  --r-control: 12px;
  --r-pill: 999px;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --page-bg: #d8e1f0;
    --page-glow: #eef3fb;
    --page-ink: #0b1e4a;
    --edge: rgba(11, 30, 74, 0.28);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.modal-open { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(1100px 620px at 12% -8%, var(--page-glow) 0%, transparent 62%), var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 40; background: var(--gold); color: var(--navy-900);
  font-weight: 800; padding: 12px 20px; border-radius: var(--r-pill); text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-color-scheme: light) { :focus-visible { outline-color: var(--royal); } }

/* ----- header: one line ------------------------------------------------------ */
.site-top {
  max-width: 1320px; margin: 0 auto; padding: 16px 24px; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; background: var(--white); padding: 8px 18px; border-radius: var(--r-pill); }
.brand img { height: 36px; width: auto; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: inline-flex; border: 2px solid var(--edge); border-radius: var(--r-pill); overflow: hidden; font-weight: 700; font-size: 16px; }
.lang-switch span, .lang-switch a { padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.lang-switch [aria-current] { background: var(--page-ink); color: var(--page-bg); }
.lang-switch a:hover { background: var(--gold); color: var(--navy-900); }

/* ----- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px;
  border: 0; border-radius: var(--r-pill); font: 700 17px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--gold); color: var(--navy-900);
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 16px rgba(4, 12, 40, 0.28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4, 12, 40, 0.34); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-blue { background: var(--royal); color: var(--white); }
.btn-blue:hover { background: var(--royal-deep); }
.btn-navy { background: var(--navy-900); color: var(--white); }
.btn-navy:hover { background: var(--navy-950); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ----- the bento ------------------------------------------------------------- */
.bento {
  max-width: 1320px; margin: 4px auto 0; padding: 0 24px 40px;
  display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero p1 p1 p1 p1 p1"
    "hero hero hero hero hero hero hero sp sp sp sp sp"
    "at at at at ex ex ex ex ex p2 p2 p2"
    "nx nx nx nx nx p3 p3 p3 p3 p3 p3 p3"
    "ct ct ct ct ct ct ct ct ct ct ct ct";
}
.tile { position: relative; border-radius: var(--r-tile); padding: 36px; overflow: hidden; transition: transform 0.35s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tile:hover { transform: translateY(-3px); } }
.t-hero { grid-area: hero; } .t-p1 { grid-area: p1; } .t-sp { grid-area: sp; } .t-at { grid-area: at; }
.t-ex { grid-area: ex; } .t-p2 { grid-area: p2; } .t-nx { grid-area: nx; } .t-p3 { grid-area: p3; } .t-ct { grid-area: ct; }

/* hero */
.t-hero {
  background: linear-gradient(145deg, var(--royal) 0%, var(--royal-deep) 100%); color: var(--white);
  padding: 48px; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.t-hero::before { /* fine grid texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(135deg, transparent 20%, #000 100%); mask-image: linear-gradient(135deg, transparent 20%, #000 100%);
}
.t-hero::after { /* one quiet ring */
  content: ""; position: absolute; right: -140px; bottom: -170px; width: 420px; height: 420px; border-radius: 50%;
  border: 2px solid rgba(0, 184, 176, 0.75); pointer-events: none;
}
.t-hero > * { position: relative; z-index: 1; }
.sticker {
  align-self: flex-start; background: var(--logo-teal); color: var(--navy-900);
  font-weight: 800; font-size: clamp(34px, 5vw, 70px); line-height: 1; letter-spacing: 0.01em;
  padding: 0.3em 0.62em 0.32em; border-radius: var(--r-control);
}
html[lang^="fr"] .sticker { font-size: clamp(30px, 4vw, 58px); }
.hero-copy { max-width: 600px; display: grid; gap: 18px; justify-items: start; }
.hero-copy h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 800; }
.hero-copy p { font-size: 20px; max-width: 34ch; }

/* colour tiles */
.t-sp { background: var(--gold); color: var(--navy-900); }
.t-at { background: var(--steel); color: var(--navy-900); }
.t-ex { background: var(--crimson); color: var(--white); }
.role-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 250px; }
.role-tile h2 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; }
.role-tile p { font-size: 18px; max-width: 36ch; margin-top: 10px; }
.role-tile .btn { align-self: flex-start; white-space: normal; text-align: left; }
.t-ex .btn { background: var(--white); color: var(--crimson); }
.t-ex .btn:hover { background: var(--gold-soft); }

/* photo tiles */
.photo-tile { padding: 0; min-height: 250px; background: var(--slate); box-shadow: 0 14px 34px rgba(3, 9, 32, 0.38); }
.photo-tile picture, .photo-tile img { width: 100%; height: 100%; }
.photo-tile img { object-fit: cover; }
.t-p1 img { object-position: var(--photo-1-focus); }
.t-p2 img { object-position: var(--photo-2-focus); }
.t-p3 img { object-position: var(--photo-3-focus); }

/* coming-up tile */
.t-nx { background: var(--paper); color: var(--navy-900); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.t-nx h2 { font-size: clamp(28px, 2.5vw, 36px); font-weight: 800; line-height: 1.08; }
.t-nx ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.t-nx li { font-size: 19px; font-weight: 700; line-height: 1.3; padding: 3px 0 3px 18px; border-left: 6px solid var(--royal); }
.t-nx li:nth-child(2) { border-color: var(--gold); }
.t-nx li:nth-child(3) { border-color: var(--crimson); }
.t-nx p { font-size: 18px; font-weight: 600; }
.t-nx .btn { align-self: flex-start; }

/* contact band */
.t-ct { background: var(--slate); color: var(--white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding: 28px 40px; border: 1px solid rgba(255, 255, 255, 0.14); }
.t-ct h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.1; }
.t-ct .links { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 18px; }
.t-ct a { font-weight: 700; text-underline-offset: 4px; }
.t-ct a:hover { color: var(--gold); }

.legal { max-width: 1320px; margin: 0 auto; padding: 8px 24px 48px; font-size: 16px; font-weight: 600; }
.legal a { text-underline-offset: 3px; }

/* ----- the pop-up ------------------------------------------------------------ */
dialog.modal {
  padding: 0; border: 0; background: transparent; color: var(--navy-900);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: visible;
}
dialog.modal::backdrop { background: rgba(5, 12, 38, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-card { position: relative; background: var(--white); border-radius: var(--r-tile); overflow: hidden; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(2, 6, 24, 0.55); }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12); color: var(--white); cursor: pointer;
}
.modal-close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.modal-close::before, .modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; background: currentColor; border-radius: 2px; }
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fm-head { background: var(--navy-900); color: var(--white); padding: 28px 84px 26px 36px; flex: none; }
.fm-head h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1.08; }
.fm-head p { font-size: 18px; margin-top: 8px; max-width: 48ch; }
.fm-body { padding: 28px 36px 34px; overflow-y: auto; min-height: 0; }
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field > label, .field > .legend { font-size: 16px; font-weight: 700; line-height: 1.3; }
.field .hint { font-weight: 600; color: #3a4573; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; min-height: 54px; padding: 12px 16px; font: 600 18px var(--font); color: var(--navy-900);
  background: var(--white); border: 2px solid #8b97b8; border-radius: var(--r-control); appearance: none; -webkit-appearance: none;
}
.field input:hover { border-color: var(--royal); }
.field input:focus { outline: 3px solid var(--royal); outline-offset: 2px; border-color: var(--royal); }
.field input[aria-invalid="true"] { border-color: #b3122f; background: #fff3f5; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.more { border: 2px solid #c3cce3; border-radius: var(--r-control); padding: 0; background: #f6f8fd; }
.more summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; gap: 8px; border-radius: var(--r-control); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; flex: none; margin-left: auto; width: 10px; height: 10px; border-right: 3px solid var(--navy-900); border-bottom: 3px solid var(--navy-900); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease); }
.more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more summary:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }
.more > .chips, .more > .more-lead { padding: 0 18px; }
.more > .more-lead { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.more > .chips { padding-bottom: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px;
  border: 2px solid #8b97b8; border-radius: var(--r-pill); background: var(--white); font: 600 16px/1.2 var(--font); color: var(--navy-900);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.chip:hover span { border-color: var(--royal); }
.chip input:focus-visible + span { outline: 3px solid var(--royal); outline-offset: 3px; }
.chip input:checked + span { background: var(--royal); border-color: var(--royal); color: var(--white); }
.chip input:checked + span::before {
  content: ""; width: 12px; height: 7px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg) translate(1px, -1px);
}

.consent { position: relative; display: flex; gap: 14px; align-items: flex-start; font-size: 16px; font-weight: 600; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.consent .box { flex: none; width: 28px; height: 28px; border: 2px solid #8b97b8; border-radius: 8px; background: var(--white); display: grid; place-items: center; margin-top: 1px; }
.consent input:focus-visible + .box { outline: 3px solid var(--royal); outline-offset: 3px; }
.consent input:checked + .box { background: var(--royal); border-color: var(--royal); }
.consent input:checked + .box::after { content: ""; width: 13px; height: 7px; border-left: 3px solid var(--white); border-bottom: 3px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); }
.fine { font-size: 16px; color: #3a4573; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp input { font: inherit; border: 0; padding: 0; width: 1px; height: 1px; appearance: none; -webkit-appearance: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.status { font-size: 17px; font-weight: 700; padding: 14px 18px; border-radius: var(--r-control); margin-top: 18px; display: none; }
.status.show { display: block; }
.status.ok { background: #e1efe7; color: #0e3a24; }
.status.bad { background: #fde3e8; color: #7a0c26; }
.done { display: none; text-align: left; }
.done.show { display: grid; gap: 14px; }
.done h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; }
.done p { font-size: 18px; max-width: 46ch; }
.done .btn { justify-self: start; }

/* ----- motion: reveal on entry (hierarchy) and pop-up entry (state), only when welcome */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  dialog.modal[open] .modal-card { animation: modal-in 0.4s var(--ease) both; }
  dialog.modal[open]::backdrop { animation: fade-in 0.3s ease both; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ----- tablet and phone: explicit collapse ----------------------------------- */
@media (max-width: 1099px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "p1 sp" "at ex" "p2 nx" "p3 p3" "ct ct"; }
  .t-hero { min-height: 460px; }
}
@media (max-width: 719px) {
  .site-top { padding: 12px 16px; }
  .brand { padding: 6px 14px; }
  .brand img { height: 30px; }
  .top-actions .btn { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); padding: 0 16px 32px; gap: 16px; grid-template-areas: "hero" "p1" "sp" "at" "ex" "p2" "nx" "p3" "ct"; }
  .tile { padding: 28px; }
  .t-hero { padding: 32px 24px; min-height: 0; }
  .t-hero::after { width: 260px; height: 260px; right: -110px; bottom: -120px; }
  .hero-copy p { font-size: 18px; }
  .photo-tile { padding: 0; min-height: 230px; }
  .t-ct { padding: 24px 28px; }
  .fm-head { padding: 22px 76px 20px 22px; }
  .fm-body { padding: 22px; }
  .fm-grid { grid-template-columns: minmax(0, 1fr); }
  dialog.modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .legal { padding: 8px 16px 40px; }
  .btn { white-space: normal; text-align: center; }
}