/* ===================================================================
   Lorenzo — layout & components.
   Every value references a token from tokens.css.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Two of the frames sit on pure white rather than the #FCFCFC every other
   page uses - Bespoke (101:13376) and Contact (101:13523) both state
   #FFFFFF on the frame itself. Without this the "Designed Around Your
   Space" band, whose photograph is shot on white, read as a white panel
   floating on a grey page. */
body.page--bespoke,
body.page--contact { background: #FFFFFF; }

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad-80);
}
.container--wide   { padding-inline: var(--pad-200); }
.container--narrow { padding-inline: var(--pad-160); }

.section { padding-block: var(--sec-y); }

/* --- typography ------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-12); line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-muted); margin: 0;
}
.eyebrow--on-dark { color: var(--c-muted-light); }

.h-display {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-32); line-height: var(--lh-32);
  color: var(--c-ink); margin: 0;
}
/* Every section heading in the file is the SAME three values: 28/42, weight
   400, #1E1F21. Ours was 24/36 at weight 700 in #3B3D42 - smaller, much
   heavier and greyer than the design, on every page at once. That single
   mismatch is most of what read as "the fonts are wrong".
   `--sm` is the 24/36 step the file uses for the sub-headings inside a
   section ("Ask us anything", "Receive Our Company Profile"). */
.h-section {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: var(--fs-28); line-height: var(--lh-28);
  color: var(--c-ink); margin: 0;
}
.h-section--sm { font-size: var(--fs-24); line-height: var(--lh-24); }
.h-section--lg {
  font-size: var(--fs-40); line-height: var(--lh-40);
  font-weight: var(--fw-black);
}
.h-section--ink { color: var(--c-ink); }
.h-section--warm { color: var(--c-ink-warm); }

.lede { font-size: var(--fs-18); line-height: var(--lh-18); margin: 0; }
.body { font-size: var(--fs-16); line-height: var(--lh-16); margin: 0; }
.small { font-size: var(--fs-14); line-height: var(--lh-14); margin: 0; }

.on-dark  { color: var(--c-on-dark); }
.on-light { color: var(--c-body); }

/* --- buttons ---------------------------------------------------- */
/* The frame draws buttons at exactly two sizes and nothing in between:

     40 tall - 16/24, weight 510, 18px of side padding
     32 tall - 14/22, weight 510, 14px of side padding

   Counted across the Homepage, About and Bespoke frames; "Projects" appears at
   both sizes, 64px wide at 16 and 56px at 14, an exact 14/16 ratio, so it is
   one face at two steps rather than two styles. The tokens already carry both
   pairs - only the padding was ever wrong here.

   The height is set rather than left to padding because these are inline-flex
   and centred already, and `.btn--line` adds a 1px border: with border-box a
   padding-derived height would land bordered buttons 2px taller than plain
   ones, which is how three pages ended up rendering 54-tall buttons - a height
   the design uses nowhere. Setting it makes every button exactly 40. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 18px; border: 0; border-radius: 2px;
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-medium);
  background: var(--c-accent); color: var(--c-surface);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn--ghost {
  background: transparent; color: var(--c-bg);
  border: 1px solid rgba(240,241,242,.4);
}
/* on the light sections the filled button is grey and the outline is a
   hairline - see F-S02 in the Figma file */
.btn--grey {
  background: var(--c-btn-grey);
  color: var(--c-surface);
}
.btn--line {
  background: transparent;
  /* The design uses TWO different values here, which is easy to miss: the
     label is #1E1F21 and the hairline around it is #3B3D42. Read off the
     collections button - fill none, stroke #3B3D42 at 0.5, text #1E1F21 -
     and the team band's "Discuss Your Project" agrees. */
  color: var(--c-ink);
  border: .5px solid var(--c-btn-line);
}
.btn--line:hover { background: rgba(59, 61, 66, .06); }
.btn--ghost:hover { background: rgba(240,241,242,.08); }
.btn--dark { background: var(--c-ink); color: var(--c-surface); }
/* The inner-page hero button. The homepage's is the plum #500F28 on a dark
   photo; Bespoke and Collections put a near-white one in exactly the same
   place - x80, 214x40, radius 2 - with dark text. Same button, inverted,
   because those heroes sit on a busier photograph. */
.btn--pale {
  background: var(--c-btn-pale);
  color: var(--c-btn-pale-ink);
}
.btn--pale:hover { background: #FFFFFF; }

/* --- site header ------------------------------------------------ */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  padding-block: 28px;
}
.site-header .container { display: flex; align-items: center; gap: 40px; }
.brand { font-family: var(--font-display); font-weight: var(--fw-bold);
         font-size: var(--fs-18); color: var(--c-bg); letter-spacing: .08em; }
.nav { display: flex; gap: 32px; margin-inline-start: auto; }
.nav a {
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-medium); color: var(--c-bg);
  position: relative; padding-block: 4px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: currentColor;
  transition: width var(--dur) var(--ease);
}
.nav a:hover::after { width: 100%; }

.nav-toggle { display: none; background: none; border: 0; color: var(--c-bg);
              margin-inline-start: auto; padding: 8px; }

/* The button carries both glyphs and shows whichever matches its state.
   Driven off aria-expanded rather than a second class, so the accessible
   state and the visible one cannot drift apart. */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --- hero (F-S0) ------------------------------------------------ */
/* The frame's hero is 1440x780. `min-height: 780px` alone only agrees at
   exactly 1440 - wider, the box keeps its 780 while the width grows, the
   ratio drifts from 1.85 to 2.44 and `cover` eats the photograph. Above 1440
   the hero keeps the proportion; below it, nothing changes and 780 stands.
   Milad's call, 2026-08-24. */
@media (min-width: 1440px) {
  .hero { aspect-ratio: 1440 / 780; }
}
.hero {
  position: relative; min-height: 780px;
  display: flex; align-items: flex-end;
  background: var(--c-dark-soft) center/cover no-repeat;
  color: var(--c-bg); overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,31,33,.55) 0%, rgba(30,31,33,.15) 45%, rgba(30,31,33,.75) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-bottom: 96px; max-width: 720px; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-32); line-height: var(--lh-32);
  color: var(--c-bg); margin: 16px 0 20px;
}
.hero__eyebrow { color: var(--c-on-dark); }
.hero__lede { color: var(--c-on-dark); margin-bottom: 32px; }

/* --- collections (F-S01) ---------------------------------------- */
.collection-card { position: relative; aspect-ratio: 3/4; overflow: hidden;
                   border-radius: var(--radius-sm); background: var(--c-line); }
.collection-card img { width: 100%; height: 100%; object-fit: cover;
                       transition: transform .8s var(--ease); }
.collection-card:hover img { transform: scale(1.06); }
.collection-card__meta {
  position: absolute; inset: auto 0 0 0; padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.collection-card__label { color: var(--c-muted-light); }
.collection-card__title { color: #FFF; font-weight: var(--fw-medium);
                          font-size: var(--fs-16); line-height: var(--lh-16); margin: 4px 0 0; }

/* --- intro (F-S02) ---------------------------------------------- */
.intro { background: var(--c-bg); text-align: center; }
.intro__body { max-width: 720px; margin-inline: auto; }
.intro__body p { margin: 12px 0 0; }

/* --- stats band (numbers) --------------------------------------- */
.stats { color: var(--c-bg); }
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 84px;
  padding-block: 120px;
  padding-inline: var(--pad-200);   /* this band is inset further than the rest */
}
.stat { text-align: center; }
/* The two pages that carry this band do NOT agree, and I got this wrong
   once by reading the size off the wrong frame: the homepage sets 40/52 and
   About sets 48/62, both weight 800. Mobile is 32/42 on both. So the default
   is the homepage's and About overrides it - see layout.css. */
.stat__value {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-40); line-height: var(--lh-40); margin: 0;
}
.stat__label {
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-medium);
  /* 8, not 12: the value runs y120..182 and the label opens at y190. */
  text-transform: uppercase; margin: 8px 0 0;
}

/* --- 360 viewer -------------------------------------------------
   The 2026-08-22 design puts this band on LIGHT, not dark: measured off the
   new homepage render it is a flat #EDEDED from y 4037 to 4666, with the
   copy in ink and the chandelier floating on it. That grey is also exactly
   the backdrop the supplied frame sequence was rendered against, which is
   why the two sit together seamlessly.

   It used to be --c-dark-soft with white copy, from the older frame. */
.viewer {
  background: #EDEDED;
  color: var(--c-ink);
  text-align: center;
}
/* the 80px padding is the section's own - .section would add a second lot */
.viewer { padding-block: 0; }

/* F-S04 is 1440x630 and the chandelier is the section's BACKGROUND - the copy
   sits ON it, not above it. Ours stacked head, then a 100px margin, then the
   stage, which ran the section to ~1076 and left the gap Milad pointed at.

   Read out of the frame:
     section            1440 x 630
     copy               y100 eyebrow 14/22, y126 title 28/42, y176 hint 18/28
     chandelier         x283..1157 (875 wide, centred), bottom at y598

   Our 36 frames are 900x695 with the piece filling 94.3% of the canvas, so
   an 875-wide chandelier needs a 928 stage (64.44% of 1440) and its top sits
   91px ABOVE the section - the suspension wires run off the top edge, which
   is exactly what the frame's own background does (it is cropped 90px there). */
.viewer {
  position: relative;
  aspect-ratio: 1440 / 630;
  overflow: hidden;
}
.viewer .container {
  /* NOT relative. The stage lives inside this container, so making it a
     positioning context resolved the stage's `top: -14.44%` against the
     container's own 204px instead of the section's 630 - the chandelier
     landed 63px low. The head carries the stacking instead. */
  position: static;
  /* 100 of 1440, NOT of 630: a percentage padding resolves against the
     containing block's WIDTH even in the block direction. Written as
     15.87% of the height it came out 200. */
  padding-block: 6.94% 0;
}
.viewer__head { display: flex; flex-direction: column; gap: 8px;   /* 176 - 168 */
                position: relative; z-index: 1; }
.viewer__head-top { display: flex; flex-direction: column; gap: 4px; }
.viewer__head .eyebrow {
  margin: 0;
  font-size: var(--fs-14); line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
}
.viewer__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-28); line-height: var(--lh-28);
  /* 400 like every other section heading. This was --fw-bold, so the 360
     band's title came out heavier than the six around it. */
  font-weight: var(--fw-regular);
  color: var(--c-ink);
}
.viewer__hint {
  margin: 0;
  font-size: var(--fs-18); line-height: var(--lh-18);
  font-weight: var(--fw-regular);
  color: var(--c-body);
}

/* ===================================================================
   DELIBERATELY NOT THE FRAME - Milad's call, 2026-08-08.

   The frame draws an 804x244 slot with the chandelier on its side, because
   in Figma it is a flat picture. Ours is a real 360 spin built from an
   The stage is sized to the FRAME SEQUENCE, not to the Figma slot.

   I once "corrected" this to the frame's 804x244 and it made the chandelier
   tiny: the slot was right and the content was never going to fit it. That
   still holds - the frame is not the authority for this one section.

   2026-08-23: the real sequence arrived. It is 900x695 landscape, not the
   560x1160 upright placeholder this was built against, so the ratio moves to
   match the actual files - otherwise a landscape chandelier sits letterboxed
   inside an upright box. Wider too, because Milad asked for it bigger.

   Do not set this back to 804x244 on the grounds that the frame says so, and
   do not set it to anything that is not the ratio of the files in
   /uploads/spin/.
   =================================================================== */
.viewer__stage {
  /* Placed against the section, not stacked under the copy - see the note on
     `.viewer` above. 928 of 1440 wide so the chandelier lands at the frame's
     875, and 91px above the top so the wires run off the edge as they do in
     the frame's own background. */
  position: absolute;
  left: 50%;
  top: -14.44%;              /* -91 of 630 */
  transform: translateX(-50%);
  width: 64.44%;             /* 928 of 1440 */
  margin: 0;
  z-index: 0;
  aspect-ratio: 900 / 695;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.viewer__stage:active { cursor: grabbing; }
.viewer__stage:focus-visible { outline: 2px solid var(--c-muted-light); outline-offset: 12px; }
.viewer__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* A one-off nudge telling people the thing is draggable. It fades out the
   moment they touch it, and never runs for reduced-motion visitors. */
.viewer__grab {
  position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-12); line-height: var(--lh-12);
  color: var(--c-muted);
  opacity: .85;
  transition: opacity var(--dur) var(--ease);
}
.viewer__stage.is-touched .viewer__grab { opacity: 0; }
.viewer__grab::before,
.viewer__grab::after { content: ""; width: 14px; height: 1px; background: currentColor; }



/* --- process steps - measured from F-S03 (1440x851) ---------------
   Four cards of 244 in a 1072 band, which is the usual 160 page padding
   plus another 24 the design adds on this section only. */
.process {
  padding-block: 100px;
  text-align: center;
}
.process .container { padding-inline: 184px; }
/* Bespoke and Lighting Collection inset their step block to 172, not the
   homepage's 184: `Frame 38558` runs x172..1267 in a 1440 frame. Twelve
   pixels, but it is twelve pixels on every one of the four cells. */
.process--pairs .container { padding-inline: 11.94%; }

.process__head { max-width: 768px; margin: 0 auto; }
/* 14/22 #7D818A on the homepage - and 12/18 on Bespoke and Lighting
   Collection, which is the `--pairs` variant. Not one value: F-S03 sets
   "BESBOKE & CUSTOM DESIGN" at 14/22 while both pairs frames set
   "HOW CUSTOM DESIGN WORKS" at 12/18. */
.process__head .eyebrow {
  margin: 0;
  font-size: var(--fs-14); line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}
.process--pairs .process__head .eyebrow {
  font-size: var(--fs-12); line-height: var(--lh-12);
}
/* Lighting Collection states #6B6E76 here where Bespoke and the homepage
   state #7D818A - one shade apart, and the frame is the frame. */
body.page--collections .process__head .eyebrow { color: var(--c-body); }
/* No size here on purpose - see the note on .projects__copy-head. The base
   .h-section rule carries 28/42 on desktop and 24/36 on a phone; restating
   it at two classes deep would outrank the phone step. */
.process__head .h-section {
  margin: 4px 0 0;
  color: var(--c-ink);
}
.process__head .body {
  max-width: 576px;
  margin: 16px auto 0;
  color: var(--c-body-warm);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.step__media {
  aspect-ratio: 244 / 305;
  overflow: hidden;
  background: var(--c-warm-tint);   /* shows while the photo loads */
}
.step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the number and the rule share one row, and the rule takes whatever
   width is left - so a wider number never pushes the row out of line */
.step__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.step__num {
  margin: 0;
  color: var(--c-accent);
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-medium);
}
.step__rule { flex: 1; height: 1px; background: var(--c-warm-line); }

.step__title {
  margin: 20px 0 0;
  color: var(--c-ink-warm);
  font-size: var(--fs-18); line-height: var(--lh-18);
  font-weight: 500;              /* the file's value; --fw-medium is 510 */
}
.step__text {
  margin: 10px 0 0;
  /* #6B6E76. The warm grey (#706761) appears on the mobile frame only; all
     three desktop frames that carry this band - home, collections, bespoke -
     state #6B6E76. */
  color: var(--c-body);
  font-size: var(--fs-14); line-height: var(--lh-14);
}

/* The four cards arrive in numbered order, sliding in sideways as they
   fade. Each one waits 140ms longer than the one before, so the eye is
   led 01 → 02 → 03 → 04 instead of seeing all four land at once. The
   whole card moves together - image, number and text - because a card
   that assembles itself in pieces reads as a glitch, not a flourish. */
.steps .step { transform: translateX(-32px); }
.steps .step.is-in { transform: none; }
.steps .step:nth-child(2) { transition-delay: .14s; }
.steps .step:nth-child(3) { transition-delay: .28s; }
.steps .step:nth-child(4) { transition-delay: .42s; }

/* Stacked on a phone each card scrolls into view on its own, so holding
   the fourth one back for another 420ms just looks like lag. */


/* --- contact - measured from F-S06 (1440x921) ---------------------
   Photo and card sit side by side with no gap between them: 730 + 550
   inside the usual 80 page padding. */
.contact { background: var(--c-bg); padding-block: 0; }
.contact .container {
  display: grid;
  grid-template-columns: 730fr 550fr;
  gap: 0;
  align-items: center;
  padding-block: 100px;
}

.contact__media { aspect-ratio: 730 / 721; overflow: hidden; background: var(--c-line); }
.contact__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact__panel { padding: 44px; }

.contact__head { text-align: center; }
.contact__head .h-section {
  margin: 0;
  font-size: var(--fs-28); line-height: var(--lh-28);
  color: var(--c-ink);
}
.contact__head p {
  margin: 4px 0 0;
  font-size: var(--fs-14); line-height: var(--lh-14);
  color: var(--c-body);
}

.contact__form { margin-top: 21px; }

.field + .field { margin-top: 16px; }
.field label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--fs-14); line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.field input,
.field textarea {
  width: 100%;
  padding: 0 14px;
  height: 40px;
  border: .5px solid var(--c-field-line);
  border-radius: 2px;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-12); line-height: var(--lh-12);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea {
  height: 100px;
  padding: 11px 14px;
  border-color: var(--c-line);   /* the message box has a lighter edge */
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--c-body);
  font-weight: var(--fw-medium);
}
.field textarea::placeholder { font-weight: var(--fw-regular); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(107, 29, 43, .12);
}

.contact__form .btn {
  width: 100%;
  justify-content: center;
  height: 40px;
  margin-top: 24px;
  padding: 0 24px;
  background: var(--c-accent-deep);
  border-radius: 2px;
}
.form__note {
  margin: 8px 0 0;
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-12); line-height: var(--lh-12);
}

/* the reply after a successful send, and the list of what went wrong */
.form__result {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: var(--fs-14); line-height: var(--lh-14);
}
.form__result--ok   { background: rgba(107, 29, 43, .08); color: var(--c-ink); }
.form__result--bad  { background: rgba(179, 45, 46, .08); color: #7A2224; }
.form__result ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* off-screen rather than display:none - some bots skip hidden fields, and
   a field they skip catches nothing */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- booklet - measured from F-S07 (1440x472) ---------------------
   A photo with a frosted panel floating on it. The panel is #212121 at 35%
   over a blur of whatever is behind it, which is Figma's glass effect. */
.booklet {
  position: relative;
  padding-block: 200px 100px;
  color: var(--c-bg);
  text-align: center;
  isolation: isolate;
  background: var(--c-dark-soft);   /* stands in until the photo arrives */
}
.booklet__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .7;                      /* the design draws the photo at 70% */
}

.booklet__card {
  width: 808px;
  max-width: 100%;
  margin-inline: auto;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(33, 33, 33, .35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Safari on iOS ignores a blur behind a fully transparent stack, and some
   browsers have it switched off entirely - without this the panel would be
   a barely-there grey and the white text on it would be unreadable. */
@supports not (backdrop-filter: blur(20px)) {
  .booklet__card { background: rgba(33, 33, 33, .72); }
}

.booklet__inner { width: 392px; max-width: 100%; }

.booklet__title {
  margin: 0;
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  color: var(--c-bg);
}

/* the form sits 24 below the heading */
.booklet__inner .mifa-form { margin-top: 24px; }
.booklet__inner .mifa-form--inline .mifa-form__grid { flex-basis: 195px; }
.booklet__inner .mifa-form--inline .mifa-form__submit { min-width: 189px; }

/* On the photo the field needs a light edge and the button inverts: the
   page palette is built for dark-on-light and this one spot is the other
   way round. */
.booklet__inner .mifa-field input {
  border-color: rgba(240, 241, 242, .8);
  color: var(--c-bg);
}
.booklet__inner .mifa-field input::placeholder { color: var(--c-on-dark-soft); }
.booklet__inner .mifa-field input:focus {
  border-color: var(--c-bg);
  box-shadow: 0 0 0 3px rgba(240, 241, 242, .18);
}
.booklet__inner .mifa-form__submit {
  background: var(--c-bg);
  color: var(--c-ink);
}
.booklet__inner .mifa-form__note { color: var(--c-on-dark-soft); }
.booklet__inner .mifa-sent__title,
.booklet__inner .mifa-sent__text,
.booklet__inner .mifa-sent__secondary { color: var(--c-bg); }



/* --- footer - measured from the Footer frame (1440x369) -----------
   Content is 1276 wide inside 82 of page padding. The left column holds the
   logo and the social row; the four link columns sit to its right. */
.site-footer {
  background: var(--c-dark-soft);
  color: var(--c-on-dark);
  padding-block: 80px 0;
}
.site-footer .container { padding-inline: 82px; }

.footer__top {
  display: grid;
  grid-template-columns: 374fr 902fr;   /* logo + 160 gap, then the columns */
  align-items: start;
}

/* block + zero line-height: as inline-block the link sits on a text baseline
   and carries ~7px of descender space under the logo, which pushed everything
   below it down by the same amount */
.footer__logo { display: block; line-height: 0; }
/* the logo comes wrapped in .brand__mark, which the header already sizes —
   this has to be specific enough to beat that rule */
.footer__logo .brand__mark svg,
.footer__logo .brand__mark img,
.footer__logo img { height: 44px; width: auto; color: var(--c-bg); }

.footer__follow { margin-top: 111px; }   /* 235 - 80 - 44 */
.footer__follow-label {
  margin: 0 0 9px;
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-medium);
  color: var(--c-on-dark-soft);
}
.footer__social { display: flex; gap: 24px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: var(--c-bg);
  transition: opacity var(--dur) var(--ease);
}
.footer__social a:hover { opacity: .7; }

.footer__cols {
  display: grid;
  grid-template-columns: 104fr 158fr 245fr 208fr;
  gap: 62px;
}

.footer__links ul { margin: 0; padding: 0; list-style: none; }
.footer__links li { margin: 0; }
.footer__links a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-block: 5px;
  font-size: var(--fs-14); line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  color: var(--c-bg);
  white-space: nowrap;
}
.footer__links a:hover { opacity: .75; }

.footer__cta { padding-top: 4px; }
.footer__cta-label {
  margin: 0 0 16px;
  font-size: var(--fs-14); line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  color: var(--c-on-dark);
}
.btn--outline-light {
  height: 32px;
  padding: 0 14px;                  /* frame: 173x32, label 145 wide, 14 each side */
  background: transparent;
  color: var(--c-bg);
  border: 1px solid var(--c-bg);
  font-size: var(--fs-14); line-height: var(--lh-14);
}
.btn--outline-light:hover { background: rgba(240, 241, 242, .1); }

.footer__contact { padding-top: 4px; }
.footer__contact-label {
  margin: 0 0 12px;
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: var(--fw-regular);
  color: var(--c-on-dark);
}
.footer__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 4px;
  font-size: var(--fs-14); line-height: var(--lh-14);
  color: var(--c-on-dark);
}
.footer__row-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--c-bg);
}
.footer__row a { color: inherit; }
.footer__row a:hover { opacity: .75; }
/* the icon is 32 tall, the text 22 - nudge the text onto its centre line */
.footer__row > :not(.footer__row-icon) { padding-top: 5px; }

.footer__bottom {
  margin-top: 9px;
  padding-block: 14px;
  border-top: 1px solid var(--c-line);
  text-align: center;
  font-size: var(--fs-12); line-height: var(--lh-12);
  color: var(--c-on-dark);
}

/* --- scroll reveal ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px);
          transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }


/* --- responsive -------------------------------------------------- */



/* --- brand mark -------------------------------------------------- */
.brand { display: inline-flex; align-items: center; color: var(--c-bg); }
.brand__mark svg { height: 28px; width: auto; display: block; }
.brand__mark svg path { fill: currentColor; }
.brand__img { height: 28px; width: auto; }
.brand__text { font-family: var(--font-display); font-weight: var(--fw-bold);
               font-size: var(--fs-18); letter-spacing: .08em; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.btn--ghost-dark { color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost-dark:hover { background: rgba(30, 31, 33, .06); }


/* --- listings and articles ---------------------------------------
   Everything that is not a designed home-page section: the news stream,
   an article, a collection page. Same tokens, plainer shapes. */
.container--reading { max-width: 880px; margin-inline: auto; padding-inline: var(--pad-80); }

.listing--bare { padding-top: 180px; }   /* no hero above it */
.listing__title { margin: 0 0 40px; color: var(--c-ink); }
.listing__more { margin-top: 48px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.card-grid--3 { margin-top: 32px; }

.card__link { display: block; color: inherit; }
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-line);
  margin-bottom: 16px;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur) var(--ease);
}
.card__link:hover .card__media img { transform: scale(1.03); }
.card__date {
  margin: 0 0 4px;
  font-size: var(--fs-12); line-height: var(--lh-12);
  color: var(--c-muted);
}
.card__title {
  margin: 0;
  font-size: var(--fs-18); line-height: var(--lh-18);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.card__text {
  margin: 8px 0 0;
  font-size: var(--fs-14); line-height: var(--lh-14);
  color: var(--c-body);
}

.article { padding-top: 0; }
.article__head { padding-top: 56px; text-align: center; }
.article__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-40); line-height: var(--lh-40);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.article__cover { margin: 40px 0 0; }
.article__cover img { width: 100%; height: auto; display: block; }
.article__more { margin-top: 24px; }

/* The body of anything the client writes. The editor gives us plain tags,
   so this is where they get the theme's measure and rhythm. */
.entry { margin-top: 32px; color: var(--c-body); }
.entry > * + * { margin-top: 20px; }
.entry p { font-size: var(--fs-16); line-height: var(--lh-16); margin: 0; }
.entry h2 {
  margin: 40px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-28); line-height: var(--lh-28);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.entry h3 {
  margin: 32px 0 0;
  font-size: var(--fs-18); line-height: var(--lh-18);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.entry img { max-width: 100%; height: auto; }
.entry a { color: var(--c-accent); text-decoration: underline; }
.entry ul, .entry ol { padding-inline-start: 22px; }
.entry li + li { margin-top: 8px; }
.entry blockquote {
  margin: 32px 0;
  padding-inline-start: 20px;
  border-inline-start: 2px solid var(--c-accent);
  font-size: var(--fs-18); line-height: var(--lh-18);
  color: var(--c-ink);
}

/* a plain row, for pages that list collections without the home mosaic */
.collection-mosaic--row {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: none !important;
  gap: 8px;
}
.collection-mosaic--row > * { grid-column: auto !important; grid-row: auto !important; }
.collection-mosaic--row .collection-card { aspect-ratio: 341 / 480; height: auto; }