:root {
  --bone: #F6F1E9;
  --soft-paper: #ECE2D8;
  --mist-taupe: #C8BAAD;
  --ink: #17171A;
  --plum: #5C027D;
  --sage: #7D846C;
  --sage-tint: #EEF0EA;
  --plum-tint: #F0E8F2;
  --line: rgba(23, 23, 26, .12);
  --page: min(1320px, calc(100vw - 64px));
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --header-h: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--plum-tint); color: var(--plum); }

.site-shell { overflow-x: clip; }
.wrap { width: var(--page); margin-inline: auto; }
.section { position: relative; border-top: 1px solid var(--line); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--sage);
  text-transform: uppercase;
}
.eyebrow::after { content:""; width: 34px; height: 1px; background: var(--sage); opacity:.66; }
.h1, .h2, .h3 { margin: 0; font-weight: 520; letter-spacing: -.035em; line-height: 1.06; }
.h1 { font-size: clamp(46px, 4.6vw, 74px); }
.h2 { font-size: clamp(32px, 3vw, 47px); }
.h3 { font-size: clamp(25px, 2vw, 34px); }
.accent { color: var(--plum); }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.68; }
.small { font-size: 14px; }
.muted { color: rgba(23,23,26,.62); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--plum);
  background: transparent;
  color: var(--plum);
  font-size: 14px;
  font-weight: 650;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--plum); color: #fff; }
.btn--solid { background: var(--plum); color: #fff; }
.btn--solid:hover { background: #47015f; border-color:#47015f; }
.btn--large { min-height: 54px; padding-inline: 28px; }
.link-arrow { color: var(--plum); font-weight: 650; white-space: nowrap; }
.link-arrow::after { content: "  →"; }

/* Header */
.site-header {
  height: var(--header-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  background: rgba(246,241,233,.97);
  position: sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
}
.header-inner {
  min-height: var(--header-h);
  display:grid;
  grid-template-columns: max-content 1fr max-content;
  align-items:center;
  gap: 36px;
}
.wordmark { font-size: 16px; font-weight: 750; letter-spacing:.24em; white-space:nowrap; line-height:1; }
.nav { display:flex; justify-content:center; align-items:center; gap: clamp(22px, 2.4vw, 38px); font-size:14px; white-space:nowrap; }
.nav a { position:relative; padding-block:6px; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--sage); transition:right .2s ease; }
.nav a:hover::after { right:0; }
.header-cta { justify-self:end; min-height:42px; padding-inline:20px; }
.mobile-toggle, .mobile-nav { display:none; }

/* Hero */
.hero { min-height: 650px; display:grid; grid-template-columns: 1.02fr .98fr; }
.hero-copy {
  padding: clamp(72px, 7vw, 110px) 6vw clamp(62px, 6vw, 88px) max(32px, calc((100vw - var(--page))/2));
  display:flex; flex-direction:column; justify-content:center;
}
.hero-eyebrow { margin-bottom:18px; }
.hero-copy .h1 { max-width: 720px; }
.hero-copy .rule { width:48px; height:1px; background:var(--plum); margin:28px 0 24px; }
.hero-copy p { max-width: 610px; margin-top:0; }
.hero-meta { margin-top: 22px; color: var(--sage); font-size: 13px; letter-spacing:.025em; }
.hero-media { min-height:650px; overflow:hidden; background:var(--soft-paper); }
.hero-media img { height:100%; object-fit:cover; object-position: 50% 44%; }

/* Section 02 */
.reflection { background: linear-gradient(90deg, var(--bone) 0%, #f4eee5 54%, var(--bone) 100%); }
.reflection-grid { display:grid; grid-template-columns: .95fr 1.05fr; min-height: 540px; align-items:stretch; }
.ethos-wrap { position:relative; min-height:540px; overflow:hidden; }
.ethos-wrap img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position: 45% 48%;
  filter:saturate(.58) contrast(.92) brightness(1.08);
  opacity:.9;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.reflection-copy { padding: 72px 3vw 66px 7vw; align-self:center; }
.reflection-copy .h2 { max-width: 620px; }
.reflection-copy .body { max-width:630px; margin-top:20px; }
.reflection-copy .body p { margin:0 0 14px; }
.reflection-copy .tension { margin-top: 22px; color:var(--plum); font-weight:650; font-style:italic; }
.reflection-copy .question { margin-top:20px; padding:15px 17px; border-left:2px solid var(--sage); background:rgba(238,240,234,.7); max-width:620px; }

/* Approach */
.approach { padding: 78px 0 48px; }
.approach-head { display:grid; grid-template-columns: .8fr 1.2fr; gap:72px; align-items:start; }
.approach-head p { margin:0; max-width:720px; color:rgba(23,23,26,.78); }
.method-grid { display:grid; grid-template-columns: repeat(3, 1fr); margin-top:46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.method { padding: 30px 30px 32px 0; }
.method + .method { border-left:1px solid var(--line); padding-left:30px; }
.line-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:17px; color:var(--sage); background:var(--sage-tint); border:1px solid rgba(125,132,108,.22); }
.line-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.line-icon--small { width:38px; height:38px; margin-bottom:14px; }
.method h3 { margin:0 0 9px; font-size:20px; font-weight:600; }
.method p { margin:0; color:rgba(23,23,26,.68); font-size:14px; }
.outcomes { margin-top:28px; padding:24px; border:1px solid rgba(125,132,108,.28); background:linear-gradient(90deg, rgba(238,240,234,.86), rgba(246,241,233,.5)); }
.outcomes-top { display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
.outcome { position:relative; padding-left:28px; }
.mini-mark { position:absolute; left:0; top:-1px; width:20px; color:var(--sage); font-size:18px; }
.outcome h4 { margin:0 0 6px; font-size:13px; color:var(--sage); letter-spacing:.055em; }
.outcome p { margin:0; font-size:14px; }
.outcomes-foot { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:end; gap:20px; }
.outcomes-foot strong { color:var(--plum); font-size:22px; max-width:440px; font-weight:600; line-height:1.2; }

/* Individual */
.individual { padding: 68px 0 62px; background: rgba(236,226,216,.36); }
.individual-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:54px 68px; align-items:start; }
.individual-copy .aspire { color:var(--plum); font-style:italic; margin:16px 0 0; max-width:640px; }
.recognition-panel { display:grid; gap:20px; align-content:start; padding-top:4px; }
.recognition-list { display:grid; gap:12px; }
.recognition-list p { margin:0; padding-left:25px; position:relative; }
.recognition-list p::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--sage); position:absolute; left:2px; top:.72em; }
.pattern-callout { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:17px 18px; color:var(--plum); background:rgba(240,232,242,.52); border-left:2px solid var(--plum); }
.pattern-symbol { font-size:25px; line-height:1; color:var(--plum); opacity:.75; }
.individual-outcomes { grid-column:1/-1; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.visual-outcome { padding:23px; border:1px solid rgba(125,132,108,.25); background:rgba(246,241,233,.75); min-height:178px; }
.visual-outcome h4 { margin:0 0 7px; font-size:13px; color:var(--sage); letter-spacing:.055em; }
.visual-outcome p { margin:0; font-size:15px; max-width:340px; }
.individual-bottom { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:0; }
.individual-bottom strong { color:var(--plum); font-size:20px; font-weight:600; line-height:1.25; }

/* Writings */
.writings { padding:62px 0; }
.writings-grid { display:grid; grid-template-columns: .7fr 1.3fr; gap:56px; align-items:stretch; }
.writings-copy p { max-width:480px; }
.editorial-grid { display:grid; grid-template-columns: 1.3fr .7fr; grid-template-rows:1fr 1fr; gap:14px; min-height:320px; }
.editorial-card { position:relative; background:linear-gradient(135deg, rgba(125,132,108,.25), rgba(238,240,234,.88)); overflow:hidden; border:1px solid rgba(125,132,108,.16); }
.editorial-card--lead { grid-row:1/-1; }
.editorial-card::after { content:""; position:absolute; width:96px; height:1px; background:rgba(125,132,108,.42); left:28px; bottom:31px; box-shadow:0 -12px rgba(125,132,108,.26),0 -24px rgba(125,132,108,.14); }
.editorial-orbit { position:absolute; right:-12%; bottom:-33%; width:66%; aspect-ratio:1; border:1px solid rgba(125,132,108,.24); border-radius:50%; }
.card-label { position:absolute; left:24px; top:22px; font-size:11px; letter-spacing:.12em; color:var(--sage); font-weight:700; }

/* Art */
.art { padding:68px 0; background:rgba(236,226,216,.22); }
.art-grid { display:grid; grid-template-columns: .48fr 1.52fr; gap:58px; align-items:start; }
.art-copy { padding-right:4px; }
.art-copy p { max-width:420px; }
.artworks { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:18px; align-items:stretch; }
.artwork { margin:0; min-width:0; background:rgba(246,241,233,.78); border:1px solid rgba(125,132,108,.17); }
.art-media { background:linear-gradient(180deg, #eee8df, #f6f1e9); overflow:hidden; display:grid; place-items:center; }
.artwork--feature .art-media { min-height:520px; }
.artwork--side .art-media { height:220px; }
.art-media img { width:100%; height:100%; object-fit:contain; filter:saturate(.56) contrast(.91) brightness(1.07); transition:transform .5s ease; }
.artwork:hover .art-media img { transform:scale(1.012); }
.artwork-stack { display:grid; grid-template-rows:1fr 1fr; gap:18px; }
.art-caption { padding:12px 14px 14px; border-top:1px solid rgba(125,132,108,.13); }
.art-caption b { display:block; font-size:14px; letter-spacing:.04em; }
.art-caption span { display:block; font-size:12px; color:rgba(23,23,26,.64); margin-top:2px; }

/* About */
.about { padding:62px 0; }
.about-grid { display:grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.35fr) auto; gap:46px; align-items:center; }
.about-image { min-height:330px; overflow:hidden; background:var(--soft-paper); }
.about-image img { height:100%; object-fit:cover; object-position: 50% 42%; filter:saturate(.88) contrast(.96) brightness(1.02); }
.about-copy .h3 { margin-bottom:18px; max-width:760px; }
.about-copy p { margin:0 0 13px; max-width:760px; }
.about-cta { min-width:250px; }

/* Final CTA */
.final-cta { padding:76px 0; background:linear-gradient(90deg, rgba(238,240,234,.58), rgba(246,241,233,.94)); overflow:hidden; }
.final-grid { display:grid; grid-template-columns: 1.18fr .82fr; gap:74px; align-items:center; }
.final-copy { position:relative; }
.final-copy .h2 { max-width:820px; }
.final-copy p { max-width:680px; margin:24px 0 0; color:rgba(23,23,26,.72); }
.final-action { justify-self:end; }
.final-motif { display:flex; gap:8px; margin-bottom:22px; color:var(--sage); }
.final-motif span { display:block; width:42px; height:1px; background:var(--sage); opacity:.65; }
.final-motif span:nth-child(2){ width:18px; opacity:.38; }
.final-motif span:nth-child(3){ width:7px; opacity:.22; }

/* Footer */
.footer { border-top:1px solid var(--line); padding:44px 0 24px; background:var(--bone); }
.footer-grid { display:grid; grid-template-columns: 1.2fr .85fr .75fr .75fr; gap:48px; }
.footer-brand .wordmark { display:block; margin-bottom:12px; }
.footer-brand p { max-width:330px; margin:0; color:rgba(23,23,26,.7); }
.footer h4 { margin:0 0 12px; color:var(--sage); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.footer-links { display:grid; gap:7px; font-size:14px; }
.footer-links a:hover { color:var(--plum); }
.footer-bottom { margin-top:32px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:12px; color:rgba(23,23,26,.58); }

/* Tablet / mobile */
@media (max-width: 1080px) {
  :root { --page: min(100% - 36px, 820px); --header-h:72px; }
  .site-header { height:var(--header-h); }
  .header-inner { min-height:var(--header-h); grid-template-columns:1fr auto; gap:20px; position:relative; }
  .nav, .header-cta { display:none; }
  .mobile-toggle { display:inline-flex; align-items:center; gap:10px; justify-self:end; border:0; background:transparent; color:var(--ink); padding:10px 0; font-weight:600; }
  .mobile-toggle-icon { width:20px; height:12px; position:relative; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
  .mobile-nav { display:none; position:absolute; top:var(--header-h); left:0; right:0; padding:22px 18px 28px; background:var(--bone); border-bottom:1px solid var(--line); box-shadow:0 18px 32px rgba(23,23,26,.06); }
  .mobile-nav.open { display:grid; gap:15px; }
  .mobile-nav a { padding-block:5px; }
  .mobile-nav-cta { color:var(--plum); font-weight:700; margin-top:5px; }

  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-copy { order:1; padding:64px 18px 48px; }
  .hero-media { order:2; min-height:500px; }
  .reflection-grid, .approach-head, .individual-grid, .writings-grid, .art-grid, .about-grid, .final-grid { grid-template-columns:1fr; }
  .ethos-wrap { min-height:430px; }
  .reflection-copy { padding:48px 18px 56px; }
  .method-grid { grid-template-columns:1fr; }
  .method { padding:26px 0; }
  .method + .method { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .outcomes-top, .individual-outcomes { grid-template-columns:1fr; }
  .outcome { padding-left:28px; }
  .outcomes-foot, .individual-bottom { align-items:flex-start; flex-direction:column; }
  .individual-grid { gap:34px; }
  .individual-outcomes { gap:12px; }
  .visual-outcome { min-height:0; }
  .writings-grid { gap:34px; }
  .editorial-grid { min-height:420px; }
  .art-grid { gap:34px; }
  .artworks { grid-template-columns:1fr; }
  .artwork--feature .art-media { min-height:480px; }
  .artwork-stack { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .artwork--side .art-media { height:300px; }
  .about-grid { gap:28px; }
  .about-image { min-height:420px; max-width:620px; }
  .about-cta, .final-action { justify-self:start; }
  .final-grid { gap:30px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --page: calc(100% - 30px); }
  body { font-size:16px; }
  .wordmark { font-size:13px; letter-spacing:.18em; }
  .hero-copy { padding:52px 15px 40px; }
  .hero-copy .h1 { font-size: clamp(36px, 10.2vw, 43px); line-height:1.02; }
  .hero-copy .lead { font-size:16px; }
  .hero-meta { font-size:12px; }
  .hero-media { min-height:390px; }
  .hero-media img { object-position:52% 42%; }
  .reflection-grid { display:flex; flex-direction:column; }
  .reflection-copy { order:1; padding:42px 15px 34px; }
  .ethos-wrap { order:2; min-height:360px; }
  .h2 { font-size: clamp(30px, 8.3vw, 38px); }
  .approach, .individual, .writings, .art, .about, .final-cta { padding-top:52px; padding-bottom:52px; }
  .method-grid { margin-top:32px; }
  .outcomes { padding:18px; }
  .recognition-list { gap:11px; }
  .pattern-callout { padding:15px; }
  .editorial-grid { grid-template-columns:1fr; grid-template-rows:180px 120px 120px; min-height:0; }
  .editorial-card--lead { grid-row:auto; }
  .artwork--feature .art-media { min-height:420px; }
  .artwork-stack { grid-template-columns:1fr; }
  .artwork--side .art-media { height:340px; }
  .about-image { min-height:390px; }
  .final-copy p { margin-top:20px; }
  .btn--large { width:100%; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; }
}