/* Eric Idema concept. Layout system from the "Modernist" design (thick rules, square blocks),
   recoloured with the EasyToys palette: pink #F24E7F, near-black #1A1A1A, warm off-white. */
@font-face { font-family: "League Spartan"; font-weight: 400; font-display: swap; src: url("../fonts/league-spartan-regular.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-weight: 500; font-display: swap; src: url("../fonts/league-spartan-500.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-weight: 600; font-display: swap; src: url("../fonts/league-spartan-600.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-weight: 700; font-display: swap; src: url("../fonts/league-spartan-700.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-weight: 800; font-display: swap; src: url("../fonts/league-spartan-800.woff2") format("woff2"); }

:root {
  --bg: #f6f5f3;
  --white: #ffffff;
  --ink: #1a1a1a;
  --pink: #f24e7f;
  --pink-dark: #a82b4f;
  --pink-light: #f2d7df;
  --pink-pale: #fcf0f4;
  --sale: #e62e48;
  --n100: #fbfaf9;
  --n200: #ecebe8;
  --n300: #d9d7d3;
  --n700: #5e5c5a;
  --n800: #3d3b3a;
  --divider: color-mix(in srgb, #1a1a1a 22%, transparent);
  --rule: 4px solid var(--ink);
  --font: "League Spartan", "Futura PT", "Futura", "Century Gothic", sans-serif;
  --gut: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; margin: 0; }
p { margin: 0; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--pink-dark); }
img { display: block; max-width: 100%; }
::selection { background: var(--pink-light); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
section[id] { scroll-margin-top: 58px; }

/* frame */
.frame { max-width: 1440px; margin: 0 auto; border-left: var(--rule); border-right: var(--rule); min-height: 100vh; position: relative; background: var(--bg); }

/* header */
.hdr { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; background: var(--bg); border-bottom: var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.brand i { width: 14px; height: 14px; background: var(--pink); display: block; }
.nav { display: flex; flex: 1 1 420px; flex-wrap: wrap; align-items: stretch; min-width: 0; border-left: var(--rule); margin-left: -4px; box-shadow: 0 -4px 0 0 var(--ink); }
.nav a { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; min-height: 46px; padding: 0 clamp(8px, 1.2vw, 16px); border-bottom: var(--rule); margin-bottom: -4px; border-right: var(--rule); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--pink-light); color: var(--ink); }
.nav a.cta { border-right: 0; background: var(--pink); color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.nav a.cta:hover { background: var(--ink); color: var(--white); }

/* crumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 10px var(--gut); border-bottom: var(--rule); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.crumbs a { color: var(--n800); }

/* generic section */
.sec { border-bottom: var(--rule); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-2 > * + * { box-shadow: -4px 0 0 0 var(--ink); }
.pad { padding: clamp(24px, 4vw, 56px) var(--gut); display: grid; gap: 20px; align-content: start; }

/* hero */
.hero-txt { padding: clamp(40px, 7vw, 96px) var(--gut) clamp(32px, 5vw, 64px); display: grid; gap: clamp(20px, 3vw, 32px); align-content: center; }
.h1 { font-size: clamp(36px, 6vw, 84px); line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance; max-width: 16ch; }
.h1 em { font-style: normal; color: var(--pink); }
.lead { max-width: 46ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.blocks { display: grid; grid-template-rows: 1fr 1fr; min-height: 320px; }
.blocks > div { display: grid; }
.blocks > div:first-child { grid-template-columns: 1fr 2fr; border-bottom: var(--rule); }
.blocks > div:last-child { grid-template-columns: 2fr 1fr; }
.blocks > div > :first-child { border-right: var(--rule); }
.stat { background: var(--bg); padding: clamp(20px, 3vw, 40px); display: grid; align-content: end; gap: 6px; }
.stat b { font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.03em; }
.stat span, .label { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--n700); }
.fill-pink { background: var(--pink); }
.fill-ink { background: var(--ink); }
.fill-light { background: var(--pink-light); }

/* buttons + tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; font: 700 14px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.06em; border: 0; cursor: pointer; }
.btn-primary { background: var(--pink); color: var(--white); }
.btn-primary:hover { background: var(--pink-dark); color: var(--white); }
.btn-secondary { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.btn-ghost { background: transparent; color: var(--pink-dark); padding-inline: 4px; }
.btn-ghost:hover { background: var(--pink-pale); }
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid var(--pink); color: var(--pink-dark); font-weight: 600; text-transform: uppercase; justify-self: start; }
a.tag:hover { background: var(--pink); color: var(--white); }
.ext::after { content: "\2197"; margin-left: 4px; }

/* section header bar */
.bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--gut); border-bottom: var(--rule); }
.bar.dark { background: var(--ink); color: var(--white); }
.bar.pink { background: var(--pink); color: var(--white); }
.h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1; }
.bar .sub { font-weight: 500; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1; color: var(--n300); }
.bar.pink .sub { color: var(--pink-light); }

/* cards grid (tracks + services) */
.cards { background: var(--pink-light); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: auto 1fr auto; grid-auto-flow: dense; }
.card { border-right: var(--rule); border-bottom: var(--rule); display: grid; grid-template-rows: subgrid; grid-row: span 3; background: var(--bg); margin-right: -4px; }
.card.link:hover { background: var(--white); }
.card .hd { padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 36px) 12px; display: grid; gap: 8px; align-content: start; }
.h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
.h3 a { border-bottom: var(--rule); }
.h3 a:hover { border-color: var(--pink); color: var(--pink-dark); }
.card .bd { padding: 0 clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 28px); font-size: 16px; line-height: 1.55; color: var(--n800); }
.card .ft { margin: 0; padding: 14px clamp(20px, 3vw, 36px); list-style: none; display: grid; gap: 6px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border-top: 3px solid var(--divider); background: var(--n100); align-content: start; }
.card .ft li { display: flex; gap: 10px; align-items: baseline; }
.card .ft li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--pink); }
.card .ft .tag { margin-top: 2px; }
.card .ft li:has(> .tag)::before { display: none; }

/* body copy */
.big { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; font-weight: 500; max-width: 42ch; }
.copy { font-size: 16px; line-height: 1.6; color: var(--n800); max-width: 60ch; display: grid; gap: 14px; }
.copy strong { color: var(--ink); }
.quote { margin: 0; padding: clamp(28px, 5vw, 64px) var(--gut); background: var(--pink); color: var(--white); font-weight: 700; font-size: clamp(26px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.photo { margin: 0; position: relative; min-height: 360px; background: var(--pink-light); overflow: hidden; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; transition: filter 500ms ease; }
.photo:hover img { filter: grayscale(0); mix-blend-mode: normal; }
.photo figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--ink); color: var(--white); font-size: 11px; letter-spacing: 0.04em; }
.photo figcaption a { color: inherit; text-decoration: underline; }

/* number strip */
.nums { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--pink-light); }
.nums > div { background: var(--bg); padding: clamp(20px, 3vw, 36px) var(--gut); border-right: var(--rule); border-bottom: var(--rule); margin-right: -4px; display: grid; gap: 6px; align-content: end; }
.nums b { white-space: nowrap; font-size: clamp(28px, 3.6vw, 56px); line-height: 0.9; letter-spacing: -0.03em; }
.nums > div:nth-child(4n+2) b { color: var(--pink); }

/* timeline (cv) */
.acc-btn { width: 100%; display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); padding: clamp(14px, 1.6vw, 22px) var(--gut); border: 0; font: inherit; text-align: left; background: var(--bg); color: var(--ink); cursor: pointer; }
.acc-btn:hover, .acc-btn[aria-expanded="true"] { background: var(--pink-light); }
.acc-btn .n { font-size: 13px; font-weight: 500; color: var(--n700); }
.acc-btn .t { flex: 1; font-weight: 700; font-size: clamp(18px, 2.4vw, 28px); letter-spacing: -0.02em; }
.acc-btn .c { font-size: 12px; font-weight: 500; color: var(--n700); }
.acc-btn .m { width: 22px; height: 22px; flex: none; background: var(--ink); display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 15px; line-height: 1; }
.acc-btn[aria-expanded="true"] .m { background: var(--pink); }
.panel { border-top: var(--rule); }
.item { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; border-bottom: 3px solid var(--divider); align-items: baseline; }
.item:last-child { border-bottom: 0; }
.item > span:first-child { padding: 16px clamp(12px, 2vw, 24px) 16px var(--gut); font-size: 14px; font-weight: 500; color: var(--n700); }
.item > span:last-child { padding: 16px var(--gut) 16px 0; display: grid; gap: 4px; }
.item strong { font-size: 18px; }
.item em { font-style: normal; font-size: 15px; color: var(--n800); }

/* media list */
.media { background: var(--pink-light); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.media a { background: var(--bg); display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 28px) var(--gut); border-right: var(--rule); border-bottom: var(--rule); margin-right: -4px; }
.media a:hover { background: var(--white); color: var(--ink); }
.media a:hover strong { color: var(--pink-dark); }
.media strong { font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.media span { font-size: 15px; color: var(--n800); }

/* contact */
.contact { background: var(--ink); color: var(--white); }
.contact .pad { padding-block: clamp(32px, 6vw, 80px); gap: clamp(20px, 3vw, 32px); }
.contact h2 { font-size: clamp(34px, 7vw, 84px); line-height: 0.9; letter-spacing: -0.035em; max-width: 22ch; }
.contact h2 em { font-style: normal; color: var(--pink); }
.contact .row { gap: 12px 28px; }
.contact .row a { color: var(--white); font-weight: 700; font-size: clamp(18px, 2.4vw, 30px); border-bottom: 4px solid var(--pink); line-height: 1.1; }
.contact .row a:hover { color: var(--pink); }
.contact .note { font-size: 13px; color: var(--n300); max-width: 60ch; }

/* composition */
.comp { display: grid; grid-template-columns: 1.6fr 0.5fr 1.4fr 2fr 1fr; grid-template-rows: 1.4fr 0.5fr 1fr 1.6fr; min-height: clamp(260px, 40vw, 520px); }
.comp div { border-right: var(--rule); border-bottom: var(--rule); cursor: pointer; transition: background 1400ms ease; }
.comp div:nth-child(3), .comp div:nth-child(7), .comp div:nth-child(9) { border-right: 0; }
.comp-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px var(--gut); }

/* footer */
.foot { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding: 18px var(--gut); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--n700); background: var(--bg); }
.foot span { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .grid-2 > * + * { box-shadow: 0 -4px 0 0 var(--ink); }
  .nav a { flex-basis: 33%; }
  .item { grid-template-columns: 1fr; }
  .nums { grid-template-columns: repeat(2, 1fr); }
  .item > span:first-child { padding-bottom: 0; }
  .item > span:last-child { padding-left: var(--gut); padding-top: 4px; }
}