/* Two premium homepage systems. Same content, same conversion mechanics —
   they differ in mood, so the client's decision is aesthetic and easy.

   A "Midnight"  near-black, gold, cinematic. Dark grounds flatter our 768px
                 photography: soft images read as atmospheric on black and as
                 cheap on white. Looks premium today, before any photo budget.
   B "Atelier"   off-white, type-led, editorial. Confidence through restraint.
                 Stronger once ING funds a shoot.

   Gold #DAA22C is fill-only on light — 2.13:1, fails AA. On dark it reads at
   7.3:1 and is safe as text. #B5821E is the light-ground text substitute. */

/* ══ shared scaffolding ══════════════════════════════════════════════ */
.cwrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.c-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 18px;
}
.c-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(40px, 7.4vw, 92px); line-height: .95;
  letter-spacing: -.04em; margin: 0;
}
.c-h2 {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 10px;
}
.c-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 52ch; margin: 0; }
.c-sec { padding: clamp(52px, 8vw, 128px) 0; }
.c-rule { width: 56px; height: 2px; background: #DAA22C; border: 0; margin: 0 0 26px; }

.c-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px; border-radius: 4px;
  background: #DAA22C; color: #1A1A1A;          /* 7.6:1 */
  font: 600 15.5px/1 'IBM Plex Sans', system-ui, sans-serif;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease;
}
.c-cta:hover { transform: translateY(-2px); }
.c-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.c-proof {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; margin: 20px 0 0;
}

/* Reveal — opacity and transform only.
   Scoped behind .js: without JavaScript nothing is ever hidden, so the page
   is complete for crawlers and for anyone whose script fails. Hiding content
   by default and revealing it with script is how half a homepage disappears. */
.js .rev { opacity: 0; transform: translateY(18px); }
.js .rev.is-in { opacity: 1; transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.is-in { opacity: 1; transform: none; transition: none; }
  .c-cta { transition: none; }
}

/* sector self-selection — conversion, present in both */
.c-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-sectors a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}
.c-sectors b { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 12px; margin-left: 9px; opacity: .6; }

/* service trio */
.c-lines { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.c-line { display: block; text-decoration: none; padding: 30px; border-radius: 8px;
  transition: transform 240ms ease; }
.c-line:hover { transform: translateY(-3px); }
.c-line h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px;
  margin: 0 0 8px; letter-spacing: -.015em; }
.c-line p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.c-line span { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; }

/* work cards */
.c-work { display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.c-card { text-decoration: none; display: block; }
.c-card__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; position: relative;
  background: linear-gradient(158deg,#2C3A44,#101A21); }
.c-card__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) { .c-card:hover .c-card__img img { transform: scale(1.04); } }
.c-card__meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 5px; }
.c-card__name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.015em; margin: 0; }
.c-card__gap { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 24px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(246,247,247,.55); }

/* ══ A · MIDNIGHT ════════════════════════════════════════════════════ */
.mid { background: #0A0A0A; color: #F6F7F7; }
.mid .c-eyebrow { color: #DAA22C; }
.mid .c-lede { color: rgba(246,247,247,.68); }
.mid .c-proof { color: rgba(246,247,247,.5); }

.mid-hero { position: relative; min-height: min(88vh, 780px); display: flex; align-items: flex-end;
  overflow: hidden; }
.mid-hero__bg { position: absolute; inset: 0; }
.mid-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the gradient is what makes a 768px photo read as cinematic rather than soft */
.mid-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.48) 30%, rgba(10,10,10,.72) 62%, rgba(10,10,10,.97) 100%);
}
.mid-hero__in { position: relative; z-index: 2; width: 100%;
  padding: clamp(48px, 9vw, 120px) 0 clamp(38px, 5vw, 64px); }
.mid-hero .c-h1 { max-width: 14ch; }
.mid-hero .c-lede { margin-top: 22px; }
.mid-hero__act { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.mid-proof { border-top: 1px solid rgba(246,247,247,.14); border-bottom: 1px solid rgba(246,247,247,.14); }
.mid-proof ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mid-proof li { padding: 22px 0; }
.mid-proof li + li { border-left: 1px solid rgba(246,247,247,.1); padding-left: 26px; }
.mid-proof .k { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(246,247,247,.62); margin-bottom: 6px; }
.mid-proof .v { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; }

.mid .c-sectors a { background: rgba(246,247,247,.07); color: #F6F7F7; }
.mid .c-sectors a:hover { background: #DAA22C; color: #1A1A1A; }
.mid .c-line { background: rgba(246,247,247,.05); color: #F6F7F7;
  border: 1px solid rgba(246,247,247,.1); }
.mid .c-line p { color: rgba(246,247,247,.62); }
.mid .c-line span { color: #DAA22C; }
.mid .c-card { color: #F6F7F7; }
.mid .c-card__meta { color: rgba(246,247,247,.5); }
.mid-close { background: #DAA22C; color: #1A1A1A; }
.mid-close .c-h2, .mid-close .c-lede { color: #1A1A1A; }
.mid-close .c-cta { background: #1A1A1A; color: #F6F7F7; }
.mid-close .c-proof { color: #1A1A1A; }

/* ══ B · ATELIER ═════════════════════════════════════════════════════ */
.ate { background: #F6F7F7; color: #1A1A1A; }
.ate .c-eyebrow { color: #B5821E; }         /* AA-safe gold on light */
.ate .c-lede { color: #55595A; }
.ate .c-proof { color: #55595A; }

.ate-hero { padding: clamp(56px, 10vw, 150px) 0 clamp(30px, 4vw, 60px); }
.ate-hero .c-h1 { max-width: 11ch; }
.ate-hero__act { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* the image is a plate, hung below the type — the headline is the hero */
.ate-plate { padding-bottom: clamp(40px, 6vw, 90px); }
.ate-plate__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  background: linear-gradient(158deg,#2C3A44,#101A21); }
.ate-plate__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ate-plate__cap { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: #55595A; margin: 16px 0 0; }

.ate-proof { border-top: 1px solid #D8DBDB; border-bottom: 1px solid #D8DBDB; }
.ate-proof ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ate-proof li { padding: 22px 0; }
.ate-proof li + li { border-left: 1px solid #E2E5E5; padding-left: 26px; }
.ate-proof .k { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: #55595A; margin-bottom: 6px; }
.ate-proof .v { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; }

.ate .c-sectors a { background: #E7EAEA; color: #1A1A1A; }
.ate .c-sectors a:hover { background: #1A1A1A; color: #F6F7F7; }
.ate .c-line { background: #EDEFEF; color: #1A1A1A; }
.ate .c-line p { color: #55595A; }
.ate .c-line span { color: #B5821E; }
.ate .c-card { color: #1A1A1A; }
.ate .c-card__meta { color: #55595A; }
.ate-alt { background: #ECEEEE; }
.ate-close { background: #101010; color: #F6F7F7; }
.ate-close .c-h2 { color: #F6F7F7; }
.ate-close .c-lede { color: rgba(246,247,247,.7); }
.ate-close .c-proof { color: rgba(246,247,247,.5); }

@media (max-width: 700px) {
  .mid-proof li + li, .ate-proof li + li { border-left: 0; padding-left: 0; }
  .mid-proof li, .ate-proof li { padding: 14px 0; }
  .mid-hero { min-height: 0; }
}

/* ── footer, both systems ──────────────────────────────────────────── */
/* docs/02: every page is one tap from anywhere, including the footer. */
.c-foot { padding: clamp(38px, 5vw, 66px) 0; }
.c-foot--dark { background: #0A0A0A; color: rgba(246,247,247,.62);
  border-top: 1px solid rgba(246,247,247,.12); }
.c-foot__in { display: grid; gap: 32px; grid-template-columns: 1fr auto; align-items: start; }
.c-foot__brand { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; color: #F6F7F7; margin: 0 0 14px; }
.c-foot__brand span { display: block; font-family: 'IBM Plex Mono', monospace;
  font-weight: 400; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #DAA22C; margin-top: 5px; }
.c-foot__meta { margin: 0; font-size: 14px; line-height: 1.7; }
/* phone and email were 18px tall — under the 44px floor */
.c-foot a { color: #F6F7F7; display: inline-flex; align-items: center;
  min-height: 44px; }
.c-foot__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.c-foot__nav a { display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; text-decoration: none; color: rgba(246,247,247,.72); }
.c-foot__nav a:hover { color: #F6F7F7; }
.c-foot__nav a:focus-visible { outline: 2px solid #DAA22C; outline-offset: 2px; }
@media (max-width: 680px) { .c-foot__in { grid-template-columns: 1fr; } }

/* ── Projects, shared by both concepts ─────────────────────────────── */
/* Dark head, light grid — neutral between Midnight and Atelier, premium
   in both. Uses the concept card system, which is why every shared page
   loads this sheet. */
.proj-head {
  background: #0A0A0A; color: #F6F7F7;
  padding: clamp(44px, 7vw, 104px) 0 clamp(34px, 5vw, 72px);
}
.proj-head .c-eyebrow { color: #DAA22C; }
.proj-head .c-lede { color: rgba(246,247,247,.68); margin-top: 24px; }
.proj-body { background: #F6F7F7; padding: clamp(30px, 4vw, 56px) 0 clamp(44px, 6vw, 88px); }
.proj__filter { margin: 0 0 clamp(26px, 3.5vw, 44px); }
.proj__filter a { background: #E7EAEA; color: #1A1A1A; }
.proj__filter a:hover { background: #D9DDDD; }
.proj__filter a.is-on { background: #1A1A1A; color: #F6F7F7; }
.proj__filter a.is-on b { opacity: .8; }
/* min() so a 290px track cannot exceed a 320px viewport */
.proj__grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.proj .c-card__meta { color: #55595A; }
.proj .c-card__name { color: #1A1A1A; }
.proj__loc { font-size: 13.5px; color: #55595A; margin: 3px 0 0; }
.proj[hidden] { display: none; }
.proj-body .note { max-width: 70ch; }

/* Social channels — from the marketing banner on page 2 of the profile.
   The discovery docs never captured these; ING is actively posting on all
   three, so leaving them off the site discards free trust signal. */
.c-foot__social { margin: 14px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.c-foot__social a { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: #DAA22C;
  text-decoration: none; }
.c-foot__social a:hover { text-decoration: underline; }

/* ── concept header on narrow screens ──────────────────────────────────
   The prototype's .nav row (brand + WhatsApp button + burger) overflowed a
   305px viewport once text scaling was on. These override the prototype's
   inline <style>, which is why they are scoped through body for specificity. */
@media (max-width: 700px) {
  body .nav { gap: 8px; padding: 12px 14px; flex-wrap: nowrap; }
  body .nav .brand { min-width: 0; flex: 1 1 auto; }
  body .nav .brand img { width: 34px; height: 34px; }
  body .nav .btn { padding: 0 12px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
  /* the prototype ships a 38px burger — below the 44px floor */
  body .nav .burger { flex: 0 0 auto; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; }
  /* the drawer's first item sat under the sticky header */
  body .mob:not(#site-drawer) { padding-top: 4px; }
}
@media (max-width: 380px) {
  /* below this the WhatsApp button cannot coexist with the burger — the
     sticky WhatsApp button at the bottom of every page still covers it */
  body .nav .btn { display: none; }
}

/* The prototype pins the drawer with .mob { position:fixed; top:calc(32px + 70px) }
   — the old fixed .wfbar height plus the old nav height. Both are gone, and the
   nav grows under text scaling, so the drawer slid under the header and hid its
   first item. Put it in normal flow: it always sits directly below the nav and
   there is no offset left to get wrong. */
/* Scoped away from #site-drawer. The shared pages reuse class="mob" but open
   via the hidden attribute, not an .is-open class — an unscoped rule here
   matched them too and hid their drawer permanently at higher specificity. */
@media (max-width: 700px) {
  body .mob:not(#site-drawer) { position: static; transform: none;
    border-top: 1px solid var(--line); }
  body .mob:not(#site-drawer):not(.is-open) { display: none; }
  body .mob:not(#site-drawer).is-open { display: block; opacity: 1; pointer-events: auto; }
}