/* ==========================================================
   Ki Siadatan — Stylesheet
   Base design frame: 1920px wide, 160px side gutters, 1600px content.
   ========================================================== */
:root {
  --cream: #FAF8F5;
  --beige: #DDD7CF;
  --ink: #232323;
  --navy: #023047;
  --navy-2: #034566;
  --red: #D62828;
  --red-dark: #BF1E1E;
  --red-deep: #6D1717;
  --gold: #C89B5B;
  --muted: #5E5E5E;
  --muted-2: #505050;
  --slate: #1E293B;
  --star: #EBB428;

  --grad-red: linear-gradient(270deg, #BF1E1E 0%, #6D1717 100%);
  --grad-navy: linear-gradient(90deg, #023047 0%, #034566 100%);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* Design unit: 1 design px at the 1920×1110 hero frame. Scales with width AND height so the hero + ribbon fit the first screen; floors at .66px */
  --u: clamp(0.66px, min(0.052083vw, 0.0901svh), 1px);
  --gutter: clamp(1.25rem, 8.33vw, 160px);
  --content: 1600px;
  --pill: 53px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--cream); line-height: 1.6; overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.2; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; }

.container { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; top: -100%; left: 1rem; padding: .5rem 1rem; background: var(--ink); color: #fff; z-index: 100; }
.skip-link:focus { top: 1rem; }

/* ---------- Type scale ---------- */
.display   { font-size: max(2.25rem, calc(70 * var(--u))); line-height: 1.45; color: var(--ink); }   /* 70/96 (+ a little air) */
.h-section { font-size: max(2rem, calc(56 * var(--u)));  line-height: 1.375; color: var(--ink); }   /* 56/77 */
.h-section .accent { color: var(--red-dark); }
.h-mega    { font-size: clamp(3rem, 5vw, 96px);    line-height: 1.375; text-align: center; }  /* 96/132 */
.lead      { font-weight: 600; font-size: max(1rem, calc(20 * var(--u))); line-height: 1.6; color: var(--navy); }
.body-lg   { font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.85; color: var(--muted); }
.hero-text .body-lg { font-weight: 300; }
.body-xl   { font-weight: 700; font-size: clamp(1.1rem, 1.25vw, 24px); line-height: 1.5; color: var(--navy); }

/* ---------- Tags / pills ---------- */
.tag {
  font-family: var(--font-body); font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(12 * var(--u)) calc(32 * var(--u)); border-radius: var(--pill);
  font-size: calc(18 * var(--u)); line-height: 1; white-space: nowrap;
}
.tag-beige { background: var(--beige); color: var(--red); }
.tag-red   { background: var(--red);   color: var(--cream); font-weight: 700; text-transform: uppercase; }
.tag-cream { background: var(--cream); color: var(--navy);  font-weight: 700; text-transform: uppercase; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 calc(58 * var(--u)); border-radius: 36px; height: calc(60 * var(--u));
  font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: transform .2s, background .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--red); color: var(--cream); }
.btn-red:hover { background: var(--red-dark); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--cream); }
.btn svg { width: 16px; height: 16px; opacity: 0; margin-left: -26px; transition: opacity .2s, margin .2s; }
.btn:hover svg { opacity: 1; margin-left: 0; }

/* ---------- Header ---------- */
/* Menu: 1920 × 132, padding 48px 160px 24px; brand 261×48; nav block 60px tall */
.site-header { position: relative; z-index: 20; padding: calc(48 * var(--u)) 0 calc(24 * var(--u)); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: calc(60 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(16 * var(--u)); text-decoration: none; height: calc(48 * var(--u)); }
.brand img { width: calc(41 * var(--u)); height: calc(48 * var(--u)); flex: none; }
.brand-name { font-family: var(--font-heading); font-size: calc(36 * var(--u)); line-height: 1; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.nav-list { display: flex; align-items: center; gap: calc(32 * var(--u)); }
.nav-list a { text-decoration: none; font-size: calc(18 * var(--u)); line-height: 1.22; white-space: nowrap; color: var(--red); opacity: .5; transition: opacity .2s; }
.nav-list a:hover { opacity: 1; }
.nav-list a[aria-current="page"] { color: var(--navy); font-weight: 600; opacity: 1; }
.nav-toggle { display: none; background: none; border: 2px solid var(--navy); color: var(--navy); border-radius: 36px; padding: .5rem 1rem; cursor: pointer; }

/* ---------- Hero ---------- */
/* Design frame: header 132px, text block top 215px, ribbon 1000–1110px, portrait 823×880 anchored right, bottom tucked 40px behind ribbon */
/* Hero fills the first screen: header (132u) + hero = 100svh, ribbon always visible at the fold */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: min(calc(100svh - 132 * var(--u)), calc(978 * var(--u))); }
.hero .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: calc(40 * var(--u)) calc(60 * var(--u)); }
.hero-text { display: flex; flex-direction: column; gap: calc(36 * var(--u)); max-width: max(calc(826 * var(--u)), 46vw); }
.hero-text .display .accent { color: var(--red-deep); }
.hero-tags { display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); }
.hero-cta { display: flex; flex-wrap: wrap; gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); }
.hero-visual { position: absolute; right: 0; bottom: calc(70 * var(--u)); width: calc(823 * var(--u)); z-index: 0; pointer-events: none; }
.hero-visual img { width: 100%; height: auto; }

/* Short laptop viewports: tighten vertical rhythm so hero + ribbon stay above the fold */
@media (min-width: 901px) and (max-height: 860px) {
  .hero .container { padding-block: 16px 28px; }
  .hero-text { gap: 20px; }
  .hero-cta { margin-top: 4px; }
  .hero-text .display { line-height: 1.3; }
  .hero-text .lead { line-height: 1.5; }
  .hero-text .body-lg { line-height: 1.7; }
  .site-header { padding-block: 24px 16px; }
  .hero { min-height: calc(100svh - 40px - 60 * var(--u)); }
}

/* Name ribbon */
.ribbon { position: relative; z-index: 2; height: calc(110 * var(--u)); background: var(--red); display: flex; align-items: center; justify-content: flex-end; padding: 0 calc(298 * var(--u)); }
.ribbon span { font-family: var(--font-heading); font-size: calc(48 * var(--u)); line-height: 1.375; color: #fff; white-space: nowrap; }

/* ---------- Generic section ---------- */
.section { padding-block: 120px; }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; margin-bottom: clamp(2rem, 4vw, 100px); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 130px); align-items: center; }
.text-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.text-stack > * { max-width: 100%; }

/* Framed image (photo w/ thick border + offset backing shape) */
.frame { position: relative; padding: 0 calc(30 * var(--u)); }
.frame::before {   /* backing shape: 848×649 at top 127 of a 903-tall frame */
  content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 72%;
  border-radius: calc(80 * var(--u)); background: var(--navy); z-index: 0;
}
.frame-red::before { background: var(--red); }
.frame-img {
  position: relative; z-index: 1; overflow: hidden; border-radius: calc(60 * var(--u));
  border: calc(12 * var(--u)) solid var(--red); background: var(--beige); aspect-ratio: 788 / 903;
}
.frame-red .frame-img { border-color: var(--navy); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-square .frame-img { aspect-ratio: 1; }

/* ---------- A Message From Ki (1920×1143: image 848×903 @130,120 · text 653w @1107,154) ---------- */
.message { padding-block: calc(120 * var(--u)); }
.message-grid { display: grid; grid-template-columns: calc(848 * var(--u)) calc(653 * var(--u)); justify-content: space-between; align-items: start; column-gap: 2rem; }
.message-frame { margin-left: calc(-30 * var(--u)); width: calc(848 * var(--u)); }
.message-text { display: flex; flex-direction: column; gap: calc(32 * var(--u)); padding-top: calc(34 * var(--u)); }
.message-q { font-weight: 600; font-size: max(1.05rem, calc(22 * var(--u))); line-height: 1.55; color: var(--navy); }
.message-body { display: flex; flex-direction: column; gap: calc(28 * var(--u)); font-size: max(1.05rem, calc(20 * var(--u))); line-height: 1.8; }
@media (max-width: 1100px) {
  .message-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .message-frame { max-width: 560px; margin-left: 0; }
  .message-text { padding-top: 0; }
}

/* ---------- Why This Matters (1920×1005 · text 788w @160,120 · image 653×662 @1107,172) ---------- */
.why { position: relative; overflow: hidden; background: var(--grad-red); color: var(--cream); }
.why-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.why-inner { position: relative; height: calc(1005 * var(--u)); }
.why-text { position: absolute; left: 0; top: calc(120 * var(--u)); width: calc(788 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--u)); }
.why .h-section { color: var(--cream); }
.why-body { display: flex; flex-direction: column; gap: calc(30 * var(--u)); font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.67; color: var(--beige); }
.why-visual { position: absolute; left: calc(947 * var(--u)); top: calc(172 * var(--u)); width: calc(653 * var(--u)); height: calc(662 * var(--u)); }
.why-img { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: calc(60 * var(--u)); border: calc(12 * var(--u)) solid var(--cream); background: var(--beige); overflow: hidden; }
.why-img img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.glass { position: absolute; width: calc(200 * var(--u)); height: calc(200 * var(--u)); border-radius: calc(32 * var(--u));
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.glass-a { left: calc(-60 * var(--u)); top: calc(522 * var(--u)); z-index: 0; }
.glass-b { left: calc(513 * var(--u)); top: calc(-60 * var(--u)); z-index: 2; }
@media (max-width: 1100px) {
  .why-inner { height: auto; padding-block: 72px; display: flex; flex-direction: column; gap: 2.5rem; }
  .why-text { position: static; width: 100%; }
  .why-visual { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; height: auto; aspect-ratio: 653 / 662; align-self: center; }
  .glass-a { left: -24px; top: auto; bottom: -24px; }
  .glass-b { left: auto; right: -24px; top: -24px; }
}

/* ---------- Featured Topics (1920×1090 · tag 468×71 @top 120 · cards 1600×719 @top 251, 3×516.67×347, gap 25) ---------- */
.topics { padding: calc(120 * var(--u)) 0; }
.topics .section-head { margin-bottom: calc(60 * var(--u)); }
.tag-lg { padding: 0 calc(32 * var(--u)); height: calc(71 * var(--u)); min-width: calc(468 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1; }
.topics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(25 * var(--u)); }
.topic-card {
  display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(24 * var(--u));
  border: 2px solid var(--beige); border-radius: calc(24 * var(--u)); background: var(--cream); min-height: calc(347 * var(--u));
  transition: transform .2s, box-shadow .2s;
}
.topic-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(2,48,71,.08); }
.topic-icon { width: calc(100 * var(--u)); height: calc(100 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--cream); border: 2px solid var(--beige); flex: none; }
.topic-icon svg { width: calc(48 * var(--u)); height: calc(48 * var(--u)); fill: var(--navy); }
.topic-text { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.topic-card h3 { font-size: calc(32 * var(--u)); line-height: 1.375; color: var(--slate); }
.topic-card p { font-size: max(.9rem, calc(16 * var(--u))); line-height: 1.5; color: var(--muted-2); }

/* ---------- I Believe (1920×1480 · heading 96/132 @120 · cards 1600×1016 @160,344 · card 788×236 r60, gap 24) ---------- */
.believe { padding: calc(120 * var(--u)) 0; }
.believe .section-head { margin-bottom: calc(92 * var(--u)); }
.h-mega { font-size: calc(96 * var(--u)); line-height: 1.375; text-align: center; color: var(--ink); }
.h-mega .accent { color: var(--red); }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
.belief {
  display: grid; place-items: center; padding: calc(48 * var(--u)); min-height: calc(236 * var(--u));
  border: 1px solid var(--beige); border-radius: calc(60 * var(--u)); background: var(--cream);
  box-shadow: 0 0 7px 2px rgba(0,0,0,.2); text-align: center;
}
.belief.wide { grid-column: 1 / -1; }
.belief p {
  font-family: var(--font-heading); font-size: calc(48 * var(--u)); line-height: 1.46;
  background: var(--grad-navy); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- About Me (1920×1384 · cols 788w @160 & @972, top 120) ---------- */
.about { padding: calc(120 * var(--u)) 0; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, calc(788 * var(--u)))); justify-content: space-between; column-gap: calc(24 * var(--u)); align-items: start; }
.about-col { display: flex; flex-direction: column; }
.about-col-l { gap: calc(45 * var(--u)); }
.about-col-r { gap: calc(32 * var(--u)); }
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--u)); }
/* about photos ship with frame + backing shape baked into the asset — no CSS chrome */
.about-frame { position: relative; width: 100%; }
.about-frame img { width: 100%; height: auto; }
.about-body { display: flex; flex-direction: column; gap: calc(28 * var(--u)); font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.67; color: var(--muted); }
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
}

/* ---------- Footer (1920×585: red panel 465 r32-top · inner 1600, bottom 60 · cols gap 100 · divider 2px · Follow Ki + 60px LinkedIn) ---------- */
.site-footer { padding-top: calc(120 * var(--u)); }
.footer-inner { background: var(--red); color: var(--cream); border-radius: 32px 32px 0 0; min-height: calc(465 * var(--u)); display: flex; align-items: flex-end; }
.footer-frame { display: flex; flex-direction: column; gap: calc(48 * var(--u)); padding-block: calc(60 * var(--u)); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; gap: calc(32 * var(--u)); max-width: calc(391 * var(--u)); }
.footer-brand .brand-name { color: var(--cream); }
.footer-brand p { font-size: calc(18 * var(--u)); line-height: 1.56; }
.footer-cols { display: flex; align-items: flex-start; gap: calc(100 * var(--u)); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.footer-col-menu { max-width: calc(329 * var(--u)); }
.footer-col h3 { font-size: calc(24 * var(--u)); line-height: 1.375; color: var(--cream); }
.footer-col ul { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.footer-col a { text-decoration: none; font-size: calc(18 * var(--u)); line-height: 1.22; color: var(--cream); }
.footer-col a:hover { text-decoration: underline; }
.footer-col a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.footer-rule { height: 2px; background: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: calc(48 * var(--u)); min-height: calc(60 * var(--u)); }
.footer-bottom h3 { font-size: calc(24 * var(--u)); color: var(--cream); }
.social { display: flex; gap: 16px; }
.social a { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; background: var(--cream); display: grid; place-items: center; box-shadow: inset 2px 2px 4px rgba(0,0,0,.25); }
.social svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); fill: var(--navy); }

/* ---------- Workshops page ---------- */
/* Hero: split halves below the 132u header; left red gradient (text 747w @160,165), right photo on navy */
.ws-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(948 * var(--u)); }
.ws-hero-left { position: relative; background: var(--grad-red); display: flex; align-items: center; overflow: hidden; }
.ws-hero-left::before { content: ""; position: absolute; inset: -5.5% 0 0 -4.2%; opacity: .3; pointer-events: none;
  background: url(/assets/images/ws-hero-lines.png) no-repeat top left / 100% 100%; }
.ws-hero-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(36 * var(--u)); width: calc(747 * var(--u)); margin: calc(33 * var(--u)) auto 0 var(--gutter); padding-block: calc(60 * var(--u)); }
.ws-hero-text .display { color: var(--cream); }
.ws-hero-text .gold { color: var(--gold); }
.ws-hero-body { display: flex; flex-direction: column; gap: calc(26 * var(--u)); font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.67; color: var(--beige); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--red-deep); }
.ws-hero-right { background: var(--grad-navy); overflow: hidden; }
.ws-hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Categories: left cards 752w @160,237 · right red panel (text @100,120, list @100,396) */
.ws-cats { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(1080 * var(--u)); background: var(--cream); }
.ws-cards-col { display: flex; align-items: flex-start; }
.ws-cards-col { justify-content: center; }
.ws-cards-col > div { margin-top: calc(237 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(48 * var(--u)); }
.ws-cards { display: flex; flex-wrap: wrap; justify-content: center; width: calc(752 * var(--u)); gap: calc(24 * var(--u)); list-style: none; padding: 0; transition: opacity .3s ease, transform .3s ease; }
.ws-card { width: calc(364 * var(--u)); }
.ws-cards.is-leaving { opacity: 0; transform: translateY(14px); }
.ws-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(24 * var(--u)); min-height: calc(186 * var(--u)); padding: calc(24 * var(--u)); background: var(--cream); border: 2px solid var(--beige); border-radius: calc(24 * var(--u)); text-align: center; }
.ws-card h3 { font-size: calc(24 * var(--u)); line-height: 1.375; color: var(--slate); }

.ws-cats-panel { position: relative; background: var(--grad-red); color: var(--cream); overflow: hidden; }
.ws-cats-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/images/ws-cats-lines.svg) no-repeat top left / 100% 100%; }
.ws-cats-panel-inner { position: relative; padding: calc(120 * var(--u)) calc(100 * var(--u)) calc(100 * var(--u)); display: flex; flex-direction: column; }
.ws-cats-panel .h-section { color: var(--cream); max-width: calc(700 * var(--u)); }
.ws-cats-sub { margin-top: calc(32 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.67; color: var(--beige); }
.ws-cat-list { display: flex; flex-direction: column; gap: calc(24 * var(--u)); margin-top: calc(72 * var(--u)); max-width: calc(700 * var(--u)); }
.ws-cat { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: calc(26 * var(--u)) calc(32 * var(--u)); background: transparent; border: 1px solid rgba(250,248,245,.35); border-radius: calc(79 * var(--u)); color: var(--cream); text-align: left; cursor: pointer; transition: background .45s ease, border-color .45s ease, border-radius .45s ease, padding .45s ease; }
.ws-cat-title { font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1.2; }
.ws-cat-rule { width: 100%; height: 2px; border-radius: 29px; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  margin-top: 0; opacity: 0; transform: scaleX(.6); transform-origin: left; transition: opacity .45s ease, transform .45s ease, margin .45s ease; }
.ws-cat-desc { display: block; overflow: hidden; max-height: 0; opacity: 0; font-size: calc(18 * var(--u)); line-height: 1.67; color: var(--beige);
  transition: max-height .5s ease, opacity .4s ease .1s, margin .45s ease; }
.ws-cat.is-active { background: rgba(2,48,71,.2); border-color: transparent; border-radius: calc(48 * var(--u)); padding-block: calc(32 * var(--u)); }
.ws-cat.is-active .ws-cat-rule { opacity: 1; transform: scaleX(1); margin-top: calc(16 * var(--u)); }
.ws-cat.is-active .ws-cat-desc:not(:empty) { max-height: calc(260 * var(--u)); opacity: 1; margin-top: calc(16 * var(--u)); }
.ws-cat:hover:not(.is-active) { background: rgba(250,248,245,.08); }

/* Every Workshop Is Built Around People: text 653w @160,270 · image 848×788 @942,120 (frame baked in asset; navy shape drawn) */
.ws-people { padding-block: calc(120 * var(--u)); background: var(--cream); }
.ws-people-grid { display: grid; grid-template-columns: calc(653 * var(--u)) calc(848 * var(--u)); justify-content: space-between; align-items: start; column-gap: 2rem; }
.ws-people-grid .text-stack { padding-top: calc(150 * var(--u)); }
.ws-people-body { display: flex; flex-direction: column; gap: calc(28 * var(--u)); font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.67; color: var(--muted); }
.ws-people-frame { position: relative; width: calc(848 * var(--u)); }
.ws-people-frame::before { content: ""; position: absolute; left: 0; right: 0; top: calc(150 * var(--u)); height: calc(488 * var(--u)); border-radius: calc(80 * var(--u)); background: var(--navy); }
.ws-people-frame img { position: relative; width: calc(788 * var(--u)); margin-left: calc(30 * var(--u)); }

/* CTA band: 1600×549 r60 red gradient */
.ws-cta { padding-block: calc(120 * var(--u)); background: var(--cream); }
.ws-cta-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(32 * var(--u)); min-height: calc(549 * var(--u)); justify-content: center; padding: calc(100 * var(--u)) var(--gutter); background: var(--grad-red); border-radius: calc(60 * var(--u)); }
.ws-cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/images/ws-cta-lines.svg) no-repeat top left / 100% 100%; }
.ws-cta-card > * { position: relative; }
.ws-cta-card .h-section { color: var(--cream); }
.ws-cta-card p { max-width: calc(799 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.67; color: var(--beige); }
.ws-cta-card .btn { margin-top: calc(28 * var(--u)); }

@media (max-width: 1100px) {
  .ws-hero, .ws-cats { grid-template-columns: 1fr; }
  .ws-hero-right { min-height: 380px; }
  .ws-hero-text { width: auto; margin: 0; padding: 56px var(--gutter); }
  .ws-cards-col > div { margin: 48px var(--gutter); width: calc(100% - 2 * var(--gutter)); margin-top: 48px; }
  .ws-cards { width: 100%; }
  .ws-card { width: calc(50% - 12px); }
  .ws-cats { min-height: 0; }
  .ws-cats-panel-inner { padding: 56px var(--gutter); }
  .ws-cats-panel { order: -1; }
  .ws-people-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .ws-people-grid .text-stack { padding-top: 0; }
  .ws-people-frame { width: 100%; max-width: 560px; margin-inline: auto; }
  .ws-people-frame img { width: calc(100% - 30px); }
}
@media (max-width: 640px) {
  .ws-card { width: 100%; }
}

/* ---------- Contact page (head @180 · form 788×1011 @160,324 · divider @988 · image 761×1011 @1029) ---------- */
.contact { padding-block: calc(48 * var(--u)) calc(120 * var(--u)); }
.contact-head { display: flex; align-items: center; gap: clamp(2rem, 10vw, calc(480 * var(--u))); margin-bottom: calc(48 * var(--u)); }
.contact-head .display { flex: none; }
.accent-red { color: var(--red); }
.contact-intro { max-width: calc(732 * var(--u)); font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.56; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: calc(788 * var(--u)) auto calc(761 * var(--u)); justify-content: space-between; align-items: start; column-gap: calc(20 * var(--u)); }
.contact-divider { width: 2px; height: calc(803 * var(--u)); align-self: start; background: linear-gradient(180deg, rgba(214,40,40,0) 0%, #D62828 50%, rgba(214,40,40,0) 100%); }
.contact-photo { width: 100%; }
.contact-photo img { width: 100%; height: auto; }

/* form card */
.contact-card { position: relative; display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(32 * var(--u)); border: 1px solid var(--muted); border-radius: calc(32 * var(--u)); background: var(--cream) url(/assets/images/contact-form-bg.svg) no-repeat center / cover; overflow: hidden; }
.contact-card > * { position: relative; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
.cf-field { display: flex; flex-direction: column; gap: calc(11 * var(--u)); border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-field > label, .cf-radios legend { font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1.2; color: var(--ink); padding-left: calc(20 * var(--u)); }
.cf-req { color: var(--red); font-weight: 600; }
.cf-field input[type="text"], .cf-field input[type="tel"], .cf-field input[type="email"] {
  width: 100%; height: calc(52 * var(--u)); padding: 0 calc(20 * var(--u)); font: inherit; font-size: calc(18 * var(--u)); color: var(--ink);
  background: rgba(255,255,255,.55); border: 1px solid rgba(94,94,94,.15); border-radius: 48px;
  box-shadow: inset 1px 1px 4px rgba(0,0,0,.07);
}
.cf-field ::placeholder { color: rgba(94,94,94,.6); }
.cf-field input:focus, .cf-field textarea:focus, .cf-select select:focus, .cf-date input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.cf-field textarea { min-height: calc(150 * var(--u)); padding: calc(20 * var(--u)); font: inherit; font-size: calc(18 * var(--u)); color: var(--ink);
  background: rgba(255,255,255,.55); border: 1px solid rgba(94,94,94,.15); border-radius: calc(24 * var(--u)); resize: vertical;
  box-shadow: inset 1px 1px 4px rgba(0,0,0,.07); }

/* radios */
.cf-radio-row { display: flex; flex-wrap: wrap; gap: calc(32 * var(--u)); padding-left: calc(20 * var(--u)); }
.cf-radio { display: inline-flex; align-items: center; gap: 8px; font-size: calc(16 * var(--u)); color: #000; cursor: pointer; }
.cf-radio input { position: absolute; opacity: 0; }
.cf-dot { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--cream); box-shadow: 0 0 4px rgba(0,0,0,.25); display: grid; place-items: center; flex: none; }
.cf-dot::after { content: ""; width: 50%; height: 50%; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .15s; }
.cf-radio input:checked + .cf-dot::after { transform: scale(1); }
.cf-radio input:focus-visible + .cf-dot { outline: 2px solid var(--navy); }

/* navy select + date pills */
.cf-select, .cf-date { position: relative; display: flex; align-items: center; }
.cf-select select, .cf-date input { appearance: none; -webkit-appearance: none; width: 100%; height: calc(52 * var(--u)); padding: 0 calc(52 * var(--u)) 0 calc(20 * var(--u)); font: inherit; font-size: calc(18 * var(--u)); border-radius: 48px; cursor: pointer; }
.cf-select svg, .cf-date svg { position: absolute; right: calc(20 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); pointer-events: none; }
.cf-select select { background: rgba(255,255,255,.55); border: 1px solid rgba(94,94,94,.15); color: var(--muted); box-shadow: inset 1px 1px 4px rgba(0,0,0,.07); }
.cf-select svg { color: var(--muted); }
.cf-navy select, .cf-navy input { background: var(--navy); border: 1px solid var(--beige); color: var(--cream); font-weight: 600; box-shadow: none; }
.cf-navy svg { color: var(--cream); }
.cf-date input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }

/* send */
.cf-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: calc(60 * var(--u)); margin-top: calc(40 * var(--u));
  background: var(--grad-red); color: #fff; border: none; border-radius: calc(40 * var(--u)); font-weight: 600; font-size: calc(20 * var(--u)); cursor: pointer; transition: filter .2s; }
.cf-send:hover { filter: brightness(1.1); }
.cf-send svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.cf-send:disabled { opacity: .6; cursor: default; }
.form-status { min-height: 1.5em; font-size: calc(16 * var(--u)); }
.form-status.success { color: #1a7f37; }
.form-status.error { color: var(--red); }
.hp { position: absolute; left: -9999px; }

@media (max-width: 1100px) {
  .contact-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .contact-divider { display: none; }
  .contact-photo { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 0; }
  .hero .container { padding-block: 32px 0; }
  .hero-visual { position: static; width: min(100%, 560px); margin: 24px auto 0; }
  .site-nav { gap: 24px; }
  .nav-list { gap: 20px; }
}
@media (max-width: 900px) {
  .section { padding-block: 72px; }
  .two-col, .about-grid, .beliefs, .topics-grid { grid-template-columns: 1fr; }
  .belief { border-radius: 32px; padding: 32px; min-height: 0; }
  .frame::before, .frame-img { border-radius: 40px; }
  .frame-img { border-width: 8px; }
  .why-img { border-radius: 40px; border-width: 8px; }
  .ribbon { height: 72px; padding: 0 var(--gutter); }
  .ribbon span { font-size: 32px; }
  .btn { padding: 0 30px; height: 52px; font-size: 17px; }
  .tag { padding: 10px 20px; font-size: 15px; }
  .brand { gap: 12px; height: 40px; }
  .brand img { width: 34px; height: 40px; }
  .brand-name { font-size: 26px; }
  .site-header { padding: 20px 0 12px; }
  .site-nav { height: auto; }
  .nav-list a { font-size: 17px; }
  .site-nav .btn { height: 48px; font-size: 16px; }
  .hero-text { max-width: none; gap: 24px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); padding: 1rem var(--gutter) 1.5rem; flex-direction: column; align-items: flex-start; gap: 24px; border-bottom: 1px solid var(--beige); }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; }
}

/* ---- Workshops page: mobile (390 design) ---- */
@media (max-width: 900px) {
  /* hero: red text panel (pill header overlays), then photo */
  .ws-hero { display: flex; flex-direction: column; min-height: 0; }
  .ws-hero-text { width: auto; margin: 0; padding: 134px 16px 40px; gap: 14px; }
  .ws-hero-body { font-size: 12px; line-height: 18px; gap: 14px; }
  .ws-hero-right { min-height: 400px; max-height: 440px; }

  /* categories: red panel first, then cards */
  .ws-cats { display: flex; flex-direction: column; min-height: 0; }
  .ws-cats-panel { order: -1; }
  .ws-cats-panel-inner { padding: 60px 16px 40px; }
  .ws-cats-panel .h-section, .ws-cats-sub { max-width: none; }
  .ws-cats-sub { margin-top: 14px; font-size: 12px; line-height: 18px; }
  .ws-cat-list { margin-top: 26px; max-width: none; gap: 16px; }
  .ws-cat { padding: 13px 16px; border-radius: 79px; }
  .ws-cat-title { font-size: 14px; line-height: 17px; }
  .ws-cat-desc { font-size: 12px; line-height: 18px; }
  .ws-cat.is-active { border-radius: 24px; padding: 16px; }
  .ws-cat.is-active .ws-cat-rule { margin-top: 6px; }
  .ws-cat.is-active .ws-cat-desc:not(:empty) { margin-top: 6px; max-height: 220px; }

  .ws-cards-col > div { margin: 40px 16px; width: calc(100% - 32px); gap: 24px; }
  .ws-cards { width: 100%; gap: 16px; }
  .ws-card { width: 100%; min-height: 106px; padding: 16px; border-radius: 16px; gap: 12px; }
  .ws-card h3 { font-size: 16px; line-height: 22px; }

  /* every workshop is built around people */
  .ws-people { padding-block: 60px; }
  .ws-people-grid { display: flex; flex-direction: column; row-gap: 32px; }
  .ws-people-grid .text-stack { padding-top: 0; gap: 14px; }
  .ws-people-body { font-size: 12px; line-height: 18px; gap: 14px; }
  .ws-people-frame { width: 100%; max-width: none; margin-inline: 0; }
  .ws-people-frame::before { top: 48px; height: 230px; border-radius: 48px; }
  .ws-people-frame img { width: calc(100% - 32px); margin-left: 16px; }

  /* customized for every audience */
  .ws-cta { padding-block: 60px; }
  .ws-cta-card { min-height: 0; padding: 32px 16px; border-radius: 32px; gap: 14px; }
  .ws-cta-card .h-section { font-size: 32px; line-height: 44px; }
  .ws-cta-card p { max-width: none; font-size: 12px; line-height: 18px; }
  .ws-cta-card .btn { margin-top: 18px; width: 100%; }
}

/* ---- Contact page: mobile (390 design) ---- */
@media (max-width: 900px) {
  .contact { padding-block: 96px 60px; }
  .contact-head { flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; text-align: center; }
  .contact-intro { max-width: none; font-size: 12px; line-height: 18px; }
  .contact-grid { display: flex; flex-direction: column; row-gap: 26px; }
  .contact-card { padding: 16px; border-radius: 16px; gap: 16px; }
  .cf-row { grid-template-columns: 1fr; gap: 16px; }
  .cf-field { gap: 12px; }
  .cf-field > label, .cf-radios legend { font-size: 16px; line-height: 1.22; padding-left: 16px; }
  .cf-field input[type="text"], .cf-field input[type="tel"], .cf-field input[type="email"] { height: 48px; padding: 0 16px; font-size: 12px; }
  .cf-field textarea { min-height: 100px; padding: 16px; font-size: 12px; border-radius: 16px; }
  .cf-radio-row { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 16px; }
  .cf-radio { font-size: 12px; }
  .cf-dot { width: 20px; height: 20px; }
  .cf-select select, .cf-date input { height: 48px; padding: 0 44px 0 16px; font-size: 12px; }
  .cf-select svg, .cf-date svg { right: 16px; width: 16px; height: 16px; }
  .cf-send { height: 48px; font-size: 14px; border-radius: 40px; margin-top: 16px; }
  .cf-send svg { width: 12px; height: 12px; }
  .contact-divider { width: 100%; height: 2px; align-self: center;
    background: linear-gradient(90deg, rgba(214,40,40,0) 0%, #D62828 50%, rgba(214,40,40,0) 100%); }
  .contact-photo { max-width: none; margin-inline: 0; }
}

/* ---------- Legal pages ---------- */
.legal { padding-block: calc(60 * var(--u)) calc(120 * var(--u)); }
.legal .container { max-width: calc(900 * var(--u)); }
.legal h1 { margin-bottom: calc(8 * var(--u)); }
.legal-updated { font-size: max(.85rem, calc(15 * var(--u))); color: var(--muted); margin-bottom: calc(40 * var(--u)); }
.legal h2 { font-size: max(1.25rem, calc(28 * var(--u))); color: var(--navy); margin: calc(40 * var(--u)) 0 calc(12 * var(--u)); }
.legal p, .legal li { font-size: max(.95rem, calc(18 * var(--u))); line-height: 1.7; color: var(--muted); margin-bottom: calc(12 * var(--u)); }
.legal ul { list-style: disc; padding-left: 1.4em; margin-bottom: calc(12 * var(--u)); }
.legal a { color: var(--red); }
@media (max-width: 900px) {
  .legal { padding-block: 96px 60px; }
  .legal p, .legal li { font-size: 13px; line-height: 1.7; }
  .legal h2 { font-size: 18px; }
}

@media (max-width: 900px) {
  /* ---- mobile frame: 390 design, 16px gutters ---- */
  .section, .message, .believe, .about, .topics { padding-block: 60px; }
  .container { width: calc(100% - 32px); }

  /* type scale (mobile design) */
  .display   { font-size: 36px; line-height: 49px; }
  .h-section { font-size: 24px; line-height: 33px; }
  .h-mega    { font-size: 48px; line-height: 66px; }
  .lead      { font-size: 14px; line-height: 22px; }
  .body-lg, .about-body, .why-body, .message-body { font-size: 12px; line-height: 18px; }
  .tag { padding: 8px 16px; font-size: 12px; }
  .tag-lg { min-width: 0; height: 39px; padding: 12px 24px; font-size: 20px; }
  .btn { height: 48px; padding: 0 24px; font-size: 14px; width: 100%; }

  /* ---- floating pill header over the hero photo ---- */
  .site-header { position: absolute; left: 0; right: 0; top: 16px; padding: 0 16px; z-index: 30; }
  .site-header .container { width: 100%; background: var(--cream); border-radius: 208px; box-shadow: 0 0 3px rgba(0,0,0,.25); padding: 8px; min-height: 48px; }
  .brand { gap: 8px; height: 20px; }
  .brand img { width: 17px; height: 20px; }
  .brand-name { font-size: 16px; }
  .nav-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--red); color: #FAF9F8; cursor: pointer; }
  .nav-toggle svg { width: 14px; height: 14px; }
  .site-nav { display: none; position: absolute; left: 16px; right: 16px; top: calc(100% + 8px); background: var(--cream); border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 20px; flex-direction: column; align-items: flex-start; gap: 20px; height: auto; }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 16px; }
  .nav-list a { font-size: 15px; }
  .site-nav .btn { width: 100%; height: 44px; font-size: 15px; }

  /* ---- hero: photo first, ribbon, then text ---- */
  .hero { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .hero-visual { position: static; order: 1; width: 100%; margin: 0; pointer-events: auto; }
  .hero-visual img { width: 100%; }
  .ribbon { order: 2; height: 50px; padding: 0 16px; justify-content: center; }
  .ribbon span { font-size: 24px; }
  .hero .container { order: 3; padding: 32px 0 60px; }
  .hero-text { max-width: none; gap: 14px; padding-bottom: 0; }
  .hero-tags { gap: 12px; }
  .hero-cta { flex-direction: column; gap: 16px; margin-top: 18px; width: 100%; }

  /* ---- message: text first, then framed photo ---- */
  .message-grid { display: flex; flex-direction: column; row-gap: 32px; }
  .message-frame { order: 2; width: 100%; max-width: none; margin-left: 0; }
  .message-text { padding-top: 0; gap: 16px; }
  .message-q { font-size: 13px; line-height: 20px; }
  .message-body { gap: 14px; }
  .frame { padding: 0 16px; }
  .frame::before { border-radius: 48px; top: 16%; height: 68%; }
  .frame-img { border-radius: 32px; border-width: 8px; }

  /* ---- why this matters: photo first ---- */
  .why { background: linear-gradient(360deg, #6D1717 0%, #BF1E1E 100%); }
  .why-inner { padding-block: 60px; gap: 32px; }
  .why-visual { order: 1; max-width: none; }
  .why-text { order: 2; gap: 16px; }
  .why-body { gap: 14px; }
  .why-img { border-radius: 32px; border-width: 8px; }
  .glass { width: 80px; height: 80px; border-radius: 16px; }
  .glass-a { left: -12px; bottom: -12px; }
  .glass-b { right: -12px; top: -12px; }

  /* ---- featured topics ---- */
  .topics .section-head { margin-bottom: 32px; }
  .topics-grid { grid-template-columns: 1fr; gap: 16px; }
  .topic-card { gap: 14px; padding: 16px; border-radius: 16px; min-height: 0; }
  .topic-icon { width: 60px; height: 60px; }
  .topic-icon svg { width: 32px; height: 32px; }
  .topic-text { gap: 12px; }
  .topic-card h3 { font-size: 20px; line-height: 27px; }
  .topic-card p { font-size: 12px; line-height: 18px; }

  /* ---- i believe ---- */
  .believe .section-head { margin-bottom: 32px; }
  .beliefs { grid-template-columns: 1fr; gap: 16px; }
  .belief { min-height: 112px; padding: 20px 16px; border-radius: 32px; }
  .belief p { font-size: 24px; line-height: 36px; }

  /* ---- about: text, photo1, para, photo2 ---- */
  .about-grid { display: flex; flex-direction: column; row-gap: 24px; }
  .about-col { gap: 24px; }
  .about-col-r { display: flex; flex-direction: column; }
  .about-col-r .about-body { order: -1; }
  .about-text { align-items: center; text-align: left; gap: 16px; }
  .about-text .tag { align-self: center; }

  /* ---- footer ---- */
  .site-footer { padding-top: 60px; }
  .footer-inner { border-radius: 24px 24px 0 0; min-height: 0; }
  .footer-frame { padding-block: 24px; gap: 20px; }
  .footer-brand { gap: 12px; max-width: none; }
  .footer-brand .brand { gap: 8px; height: 20px; }
  .footer-brand .brand img { width: 17px; height: 20px; }
  .footer-brand .brand-name { font-size: 16px; }
  .footer-brand p { font-size: 12px; line-height: 18px; }
  .footer-top { gap: 20px; }
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%; }
  .footer-col-menu { grid-row: 1 / 3; max-width: none; }
  .footer-col { gap: 16px; }
  .footer-col h3 { font-size: 16px; line-height: 22px; }
  .footer-col ul { gap: 12px; }
  .footer-col a { font-size: 12px; line-height: 15px; }
  .footer-bottom { min-height: 32px; }
  .footer-bottom h3 { font-size: 16px; }
  .social a { width: 32px; height: 32px; }
  .social svg { width: 14px; height: 14px; }
}