/* ==========================================================================
   Revebe Digital — design system
   Three brand colours used flat, one plain typeface, one diagonal:
   the wedge from the logo. No gradients, no shadows, no icon font.
   Class names are BEM-ish; state is .is-* ; anything that starts hidden is
   written as .js … so the page is complete without JavaScript.
   ========================================================================== */

/* ---- 1. Typeface ------------------------------------------------------- */
/* Commissioner, variable weight 100–900: a plain, sturdy sans. Headings are the
   same face at weight 800. The file name carries a version: the host caches
   fonts for a year and the <link rel="preload"> in inc/layout.php must match
   this url() exactly. */
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner-latin-2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Stand-ins sized to the real font (measured: 99.5% of Arial for text, 95.8% of
   Arial Bold for display; ascent 1.02, descent .21), so the swap moves nothing.
   Keep each local() list SHORT: every extra name costs layout time on first paint
   (a long list of PostScript names measured about 160 ms slower on Windows).
   Arial covers Windows, macOS and iOS; Roboto covers Android. */
@font-face { font-family: "RD Text";    src: local("Arial"), local("Roboto"); size-adjust: 99.5%; ascent-override: 102.5%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: "RD Display"; src: local("Arial Bold"), local("Roboto Bold"); font-weight: 100 900; size-adjust: 95.8%; ascent-override: 106.5%; descent-override: 21.9%; line-gap-override: 0%; }

/* ---- 2. Tokens --------------------------------------------------------- */
:root {
  --chalk: #F1F4F9;   /* cool white: the default ground */
  --white: #FFFFFF;
  --ink:   #031335;   /* logo navy */
  --red:   #FE4140;   /* logo red — always flat, always structural */
  --mist:  #DCE3F4;   /* a tint of the navy */
  --blush: #FFD9D3;   /* a tint of the red */

  --font: "Commissioner", "RD Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-d: "Commissioner", "RD Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-hero: clamp(3.25rem, 1rem + 10.6vw, 12.5rem);
  --t-1: clamp(2.9rem, 1rem + 8vw, 9rem);
  --t-2: clamp(2.05rem, 1.2rem + 3.4vw, 4.4rem);
  --t-3: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  --t-lead: clamp(1.2rem, 1.02rem + .72vw, 1.65rem);
  --t-body: clamp(1.0625rem, 1rem + .22vw, 1.1875rem);
  --t-small: .9375rem;

  --gut: clamp(18px, 4.4vw, 72px);
  --max: 1360px;
  --pad: clamp(84px, 11vw, 184px);
  --r-xl: clamp(24px, 3vw, 44px);
  --r-l: clamp(16px, 1.7vw, 24px);
  --r-m: 12px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.45, .5, 1);

  /* The ground a block sits on. Re-declared by the .tone-* classes. */
  --bg: var(--chalk);
  --fg: var(--ink);
  --fg-2: #44506F;
  --rule: rgba(3, 19, 53, .16);
  --panel: var(--white);
  --ring: var(--ink);
  --ring-2: #fff;
}
.tone-chalk { --bg: var(--chalk); --fg: var(--ink); --fg-2: #44506F; --rule: rgba(3, 19, 53, .16); --panel: var(--white); --ring: var(--ink); --ring-2: #fff; }
.tone-white { --bg: var(--white); --fg: var(--ink); --fg-2: #44506F; --rule: rgba(3, 19, 53, .16); --panel: var(--chalk); --ring: var(--ink); --ring-2: #fff; }
.tone-mist  { --bg: var(--mist);  --fg: var(--ink); --fg-2: #3B4768; --rule: rgba(3, 19, 53, .18); --panel: var(--white); --ring: var(--ink); --ring-2: #fff; }
.tone-blush { --bg: var(--blush); --fg: var(--ink); --fg-2: #4A3A4C; --rule: rgba(3, 19, 53, .18); --panel: var(--white); --ring: var(--ink); --ring-2: #fff; }
.tone-red   { --bg: var(--red);   --fg: var(--ink); --fg-2: #2A0D1F; --rule: rgba(3, 19, 53, .26); --panel: #fff; --ring: var(--ink); --ring-2: #fff; }
.tone-ink   { --bg: var(--ink);   --fg: #fff; --fg-2: #B4BDDA; --rule: rgba(255, 255, 255, .18); --panel: #0C2150; --ring: #fff; --ring-2: var(--ink); }
[class*="tone-"] { background-color: var(--bg); color: var(--fg); }

/* ---- 3. Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--red); color: var(--ink); }
:focus { outline: none; }
/* Two bands, so the ring shows on chalk, red and navy alike. */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ring-2); border-radius: 6px; }
[hidden] { display: none !important; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 650; text-decoration: none; translate: 0 -160%; }
.skip:focus { translate: 0 0; }

.i { width: 1.15em; height: 1.15em; flex: none; }
.wedge { width: .82em; height: .74em; flex: none; }

/* ---- 4. Type ----------------------------------------------------------- */
/* Headings: the same sans, heavy and tight. */
.d, h1, h2, h3 {
  font-family: var(--font-d);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .92;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); line-height: .9; letter-spacing: -.035em; }
.t-1 { font-size: var(--t-1); line-height: .9; }
.t-2 { font-size: var(--t-2); line-height: .98; letter-spacing: -.028em; }
.t-3 { font-size: var(--t-3); line-height: 1.06; letter-spacing: -.02em; font-weight: 700; }
.lead { font-size: var(--t-lead); line-height: 1.36; font-weight: 450; letter-spacing: -.008em; text-wrap: pretty; max-width: 31em; }
.body { max-width: 36em; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.soft { color: var(--fg-2); }
.note { font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
.num { font-variant-numeric: tabular-nums lining-nums; }
strong, b { font-weight: 700; }

/* ---- 5. Layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; }

/* A sheet is one full-bleed flat ground. Each sheet's rounded top corners sit
   over the one before it, so the page reads as a stack of coloured sheets. */
.sheet {
  position: relative;
  padding: var(--pad) var(--gut);
  background-color: var(--bg);
  color: var(--fg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: calc(var(--r-xl) * -1);
}
.sheet--first { border-radius: 0; margin-top: 0; }
.sheet--tight { padding-block: calc(var(--pad) * .62); }

.stack > * + * { margin-top: var(--gap, 1.4rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 14px 18px); }

/* A wedge at architectural scale: the logo's triangle, flat, always pointing
   down at the next thing to read or press. One per screen, at most. */
.bigwedge { display: block; aspect-ratio: 10 / 9; background: var(--wedge, var(--red)); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }

/* ---- 6. Buttons and links --------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-mark: var(--red);
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 54px; padding: 0 28px 0 22px;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 650; font-size: 1.0625rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s, scale .2s var(--ease);
}
.btn .wedge { color: var(--btn-mark); transition: rotate .42s var(--spring), color .2s; }
.btn .i { width: 1.2em; height: 1.2em; }
.btn:hover { --btn-bg: var(--red); --btn-fg: var(--ink); --btn-mark: var(--ink); }
.btn:hover .wedge, .btn:focus-visible .wedge { rotate: -90deg; }
.btn:active { scale: .97; }
.btn:focus-visible { border-radius: 999px; }
.btn--red { --btn-bg: var(--red); --btn-fg: var(--ink); --btn-mark: var(--ink); }
.btn--red:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-mark: var(--red); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); --btn-mark: var(--red); }
.btn--white:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-mark: var(--red); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--fg); --btn-mark: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn--line:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-mark: currentColor; }
.btn--line:focus-visible { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 3px var(--ring-2); }
.btn--sm { min-height: 44px; padding: 0 20px 0 16px; font-size: var(--t-small); }
.btn--lg { min-height: 66px; padding: 0 36px 0 28px; font-size: 1.25rem; }

.link {
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .24em; text-decoration-color: var(--red);
  transition: text-decoration-thickness .16s, text-underline-offset .16s;
  padding-block: .3em;   /* a taller target; inline padding moves nothing */
}
.link:hover { text-decoration-thickness: .42em; text-underline-offset: -.1em; text-decoration-skip-ink: none; }
.tone-red .link { text-decoration-color: var(--ink); }
.tone-red .link:hover { text-decoration-color: #fff; }
.link .i { display: inline-block; vertical-align: -.18em; margin-left: .15em; }

/* ---- 7. The capsule (site header) and the dock (phones) ---------------- */
.cap {
  position: fixed; z-index: 60; top: 16px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 4px;
  max-width: calc(100vw - 24px);
  padding: 7px 7px 7px 20px;
  background: #fff; color: var(--ink);
  --ring: var(--ink); --ring-2: #fff; --fg-2: #44506F;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(3, 19, 53, .09);
}
.cap__brand { display: flex; flex: none; align-items: center; margin-right: 14px; border-radius: 8px; }
.cap__logo { height: 30px; width: auto; max-width: none; }
.cap__nav { display: flex; align-items: center; }
.cap__nav a {
  display: inline-flex; align-items: center; gap: .3em;
  padding: 10px 13px; border-radius: 999px;
  font-size: var(--t-small); font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .16s;
}
.cap__nav a:hover { background: var(--mist); }
.cap__nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.cap__nav .i { width: 1em; height: 1em; opacity: .7; }
.cap__cta { margin-left: 8px; }
.cap__menu { display: none; }
.dock { display: none; }

@media (max-width: 59.99em) {
  .cap { left: 12px; right: 12px; translate: none; max-width: none; padding: 7px 7px 7px 16px; }
  .cap__brand { margin-right: auto; }
  .cap__logo { height: 26px; }
  .cap__cta { display: none; }
  .cap__menu {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px 0 16px;
    border: 0; border-radius: 999px; background: var(--mist); color: var(--ink);
    font-size: var(--t-small); font-weight: 650;
  }
  .cap__menu-icon { position: relative; width: 16px; height: 10px; }
  .cap__menu-icon::before, .cap__menu-icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: translate .3s var(--ease), rotate .3s var(--ease);
  }
  .cap__menu-icon::before { top: 0; }
  .cap__menu-icon::after { bottom: 0; }
  .cap__menu[aria-expanded="true"] .cap__menu-icon::before { translate: 0 4px; rotate: 45deg; }
  .cap__menu[aria-expanded="true"] .cap__menu-icon::after { translate: 0 -4px; rotate: -45deg; }

  .cap__nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: grid; gap: 2px; padding: 12px;
    background: #fff; border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(3, 19, 53, .09);
    visibility: hidden; opacity: 0; translate: 0 -10px;
    transition: opacity .2s, translate .32s var(--ease-out), visibility 0s .32s;
  }
  .menu-open .cap__nav { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .cap__nav a {
    justify-content: space-between; padding: 14px 18px; border-radius: 18px;
    font-family: var(--font-d); font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em;
  }
  .cap__nav a.cap__ext { font-family: var(--font); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--fg-2); }
  /* Without JS there is no toggle, so the links simply sit inside the capsule. */
  html:not(.js) .cap { flex-wrap: wrap; border-radius: 28px; }
  html:not(.js) .cap__menu { display: none; }
  html:not(.js) .cap__nav { position: static; order: 3; width: 100%; display: flex; flex-wrap: wrap; padding: 4px 0 2px; box-shadow: none; visibility: visible; opacity: 1; translate: none; }
  html:not(.js) .cap__nav a { font: 600 var(--t-small)/1 var(--font); padding: 10px 12px; }

  /* The two ways to reach us, always under the thumb. */
  .dock {
    position: fixed; z-index: 55; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    display: flex; gap: 6px; padding: 6px;
    background: var(--ink); color: #fff; border-radius: 999px;
    --ring: #fff; --ring-2: var(--ink);
  }
  .dock .btn { flex: 1; justify-content: center; min-height: 48px; padding: 0 14px; font-size: 1rem; }
  .dock .dock__wa { flex: none; --btn-bg: #0C2150; --btn-fg: #fff; --btn-mark: #fff; padding: 0 18px; }
  body { padding-bottom: 72px; }
  body > .foot { margin-bottom: -72px; padding-bottom: 106px; }
}
/* On the narrowest phones the WhatsApp button keeps its icon and its name for
   screen readers, and gives the width to "Start a project". */
@media (max-width: 22.4em) {
  .dock__wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dock .dock__wa { padding: 0 16px; }
  .dock .btn { gap: .5em; padding: 0 10px; }
}
@media (max-width: 26em) {
  .cap__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cap__menu { padding: 0 14px; }
}

/* ---- 8. Motion primitives --------------------------------------------- */
/* Rise: each word of a heading comes up out of its own mask.
   <h2 class="t-1 rise" data-reveal aria-label="…"><?= rise('…') ?></h2>      */
.rise .w { display: inline-block; overflow: clip; overflow-clip-margin: .04em; vertical-align: bottom; padding: .1em .03em .16em; margin: -.1em -.03em -.16em; }
.rise .w > span { display: inline-block; }
.js .rise .w > span { translate: 0 118%; transition: translate .85s var(--ease-out); transition-delay: calc(var(--i, 0) * 42ms); }
.js .rise.is-in .w > span, .js .is-in .rise .w > span { translate: 0 0; }

/* Place: an exhibit arrives with a designer's bounding box that then lets go.
   For frames and exhibits only — ordinary content is simply there. */
.js [data-reveal="place"] { opacity: 0; }
.js [data-reveal="place"].is-in { animation: placed .9s var(--ease-out) calc(var(--i, 0) * 70ms) both; }
@keyframes placed {
  0%   { opacity: 0; outline: 2px dashed currentColor; outline-offset: 14px; }
  30%  { opacity: 1; outline: 2px dashed currentColor; outline-offset: 5px; }
  70%  { opacity: 1; outline: 2px dashed currentColor; outline-offset: 5px; }
  100% { opacity: 1; outline: 2px dashed transparent; outline-offset: 5px; }
}


/* ---- 9. The frame, the sign and the label ------------------------------ */
/* A browser window without the traffic lights. Its one mark is the red bar
   from the second E of the wordmark. The body is a size container, so whatever
   is inside can respond to the frame, not to the screen. */
.frame {
  --frame-bar: var(--mist);
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 100%;
  background: #fff; color: var(--ink);
  --ring: var(--ink); --ring-2: #fff; --fg-2: #44506F;
  border-radius: var(--r-l); overflow: clip;
}
.frame__bar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 10px 7px 16px; background: var(--frame-bar); font-size: .8125rem; font-weight: 600; line-height: 1; }
.frame__bar::before { content: ""; flex: none; width: 22px; height: 8px; border-radius: 2px; background: var(--red); }
.frame__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .72; }
.frame__tag { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 650; }
.frame__body { position: relative; flex: 1; min-height: 0; overflow: clip; container-type: inline-size; container-name: frame; }

/* A frame the visitor can resize: drag the handle, or focus it and use the arrow keys.
   assets/home/20-frame.js writes --fw (px); without JS the frame is simply full width. */
.frame--resizable { width: min(100%, var(--fw, 100%)); margin-inline: auto; padding-right: 22px; background: var(--frame-bar); }
.frame--resizable .frame__body { background: #fff; border-radius: 0 0 0 var(--r-l); }
.frame__handle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 22px; padding: 0;
  display: none; place-items: center;
  border: 0; background: transparent; color: var(--ink);
  cursor: ew-resize; touch-action: none;
}
.js .frame__handle { display: grid; }
/* the rail is 22px wide; this widens what can be grabbed to 44px */
.frame__handle::after { content: ""; position: absolute; inset: 0 -11px; }
.frame__handle::before { content: ""; width: 4px; height: 44px; border-radius: 4px; background: currentColor; opacity: .45; transition: opacity .16s, height .2s var(--ease); }
.frame__handle:hover::before, .frame__handle:focus-visible::before, .frame.is-dragging .frame__handle::before { opacity: 1; height: 72px; }
.frame__handle:focus-visible { outline-offset: -3px; box-shadow: none; }
.frame.is-dragging { user-select: none; }

/* "Please touch" — the sign that points at anything you can handle. */
.sign { display: inline-flex; align-items: center; gap: .55em; padding: 9px 14px 9px 12px; border-radius: 10px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.sign .wedge { color: var(--red); }
.sign--ink { background: var(--ink); color: #fff; }

/* The label that hangs beside an exhibit: what it is, said plainly. */
.label { display: grid; gap: 6px; max-width: 24rem; padding: 16px 18px; border-radius: var(--r-m); background: #fff; color: var(--ink); font-size: .9375rem; line-height: 1.4; }
.label__title { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.label__kind { font-weight: 650; }
.label p { color: #44506F; }

/* ---- 10. Shared blocks for the inner pages ----------------------------- */
.page-head { padding-top: clamp(150px, 19vw, 260px); padding-bottom: clamp(56px, 7vw, 104px); overflow: clip; }
.page-head h1 { position: relative; font-size: var(--t-1); max-width: 11em; }
.page-head .lead { position: relative; margin-top: clamp(22px, 2.6vw, 40px); }
.page-head__wedge { position: absolute; top: clamp(-90px, -5vw, -30px); right: calc(var(--gut) * .6); width: clamp(150px, 27vw, 430px); aspect-ratio: 10 / 9; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.split { display: grid; gap: clamp(28px, 5vw, 88px); align-items: start; }
@media (min-width: 60em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .split--even { grid-template-columns: 1fr 1fr; } .split__stick { position: sticky; top: 110px; } }

.panel { padding: clamp(24px, 3vw, 44px); border-radius: var(--r-l); background: var(--panel); color: var(--ink); --fg-2: #44506F; --ring: var(--ink); --ring-2: #fff; }
.panel--mist { background: var(--mist); --fg-2: #3B4768; }
.panel--blush { background: var(--blush); --fg-2: #4A3A4C; }
.panel--red { background: var(--red); color: var(--ink); --fg-2: #2A0D1F; }
.panel--ink { background: var(--ink); color: #fff; --fg-2: #B4BDDA; --ring: #fff; --ring-2: var(--ink); }

/* Unequal tiles — never n identical cards. */
.bento { display: grid; gap: clamp(10px, 1.2vw, 18px); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > * { grid-column: span 6; }
@media (min-width: 44em) { .bento > * { grid-column: span 3; } .bento > .bento__wide { grid-column: span 6; } }
@media (min-width: 68em) { .bento > * { grid-column: span 2; } .bento > .bento__half { grid-column: span 3; } .bento > .bento__big { grid-column: span 4; } .bento > .bento__wide { grid-column: span 6; } }

.ticks > li { position: relative; padding-left: 1.7em; }
.ticks > li + li { margin-top: .5em; }
.ticks > li::before { content: ""; position: absolute; left: 0; top: .44em; width: .78em; height: .7em; background: var(--red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tone-red .ticks > li::before, .panel--red .ticks > li::before { background: var(--ink); }

/* The sentence that says what time it is in Lahore. */
.studio-line { font-weight: 600; }

/* Form */
.field { display: grid; gap: 8px; }
.field > label { font-size: var(--t-small); font-weight: 650; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 15px 18px;
  background: #fff; color: var(--ink);
  border: 2px solid transparent; border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px rgba(3, 19, 53, .28);
  transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: #5F6A88; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgba(3, 19, 53, .6); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--mist); border-radius: var(--r-m); }
.field [aria-invalid="true"] { border-color: var(--red); box-shadow: none; }

/* ---- 11. Footer -------------------------------------------------------- */
.foot { position: relative; margin-top: calc(var(--r-xl) * -1); padding: clamp(72px, 8vw, 128px) var(--gut) 34px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.foot__in { max-width: var(--max); margin-inline: auto; display: grid; gap: clamp(36px, 4.4vw, 72px) clamp(24px, 3vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__lead { grid-column: 1 / -1; display: grid; gap: 22px; justify-items: start; }
.foot__logo { height: 40px; width: auto; }
.foot__line { font-family: var(--font-d); font-size: clamp(1.6rem, 1rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; max-width: 14em; text-wrap: balance; }
.foot__h { font-family: var(--font); font-size: var(--t-small); font-weight: 650; letter-spacing: 0; line-height: 1.3; color: var(--fg-2); margin-bottom: 14px; }
.foot__col li + li { margin-top: 1px; }
.foot__col a, .foot__nap a, .foot__social a { display: inline-block; padding-block: 5px; text-decoration: none; }
.foot__nap a { padding-block: 2px; }
.foot__col a:hover, .foot__nap a:hover, .foot__social a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .24em; }
.foot__col .i { display: inline-block; width: .95em; height: .95em; vertical-align: -.1em; margin-left: .25em; opacity: .7; }
.foot__note { font-size: .8125rem; color: var(--fg-2); margin-left: .35em; }
.foot__nap { grid-column: 1 / -1; display: grid; gap: 18px 56px; padding-top: clamp(26px, 3vw, 44px); border-top: 2px solid var(--rule); font-size: var(--t-small); line-height: 1.6; color: var(--fg-2); }
.foot__nap [itemprop="name"] { color: #fff; font-weight: 650; }
.foot__social { display: flex; flex-wrap: wrap; gap: 6px 20px; align-content: start; font-weight: 600; color: #fff; }
.foot__legal { grid-column: 1 / -1; font-size: .8125rem; color: var(--fg-2); }
@media (min-width: 44em) { .foot__nap { grid-template-columns: auto auto 1fr; } .foot__social { justify-content: flex-end; } }
@media (min-width: 60em) {
  .foot__in { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); }
  .foot__lead { grid-column: auto; }
}

/* ---- 12. Motion off, print -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rise .w > span { translate: none; }
  .js [data-reveal="place"] { opacity: 1; animation: none; }
}
@media print { .cap, .skip, .dock { display: none; } .sheet { padding-block: 24px; margin-top: 0; border-radius: 0; } body { padding-bottom: 0; } }