/* ==========================================================================
   GreenCycle case study
   Desktop is built on a 1440px artboard. --u = 1 artboard px, so layouts scale
   down smoothly on tablets; phones get their own rules at the bottom.
   ========================================================================== */

body.gc {
  --green: #008263;
  --green-2: #26957a;
  --dark: #002e2e;
  --mint: #8fe5bc;
  --mint-soft: #8fe5bc66;
  --card: #f7f7f7;
  --ink: #181818;
  --u: calc(min(100vw, 1440px) / 1440);
  background: #fff;
  color: #000;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
html:has(body.gc) { background: #fff; }
.gc-page { max-width: 1440px; margin: 0 auto; position: relative; overflow: clip; background: #fff; }
.gc strong, .gc b { font-weight: 700; }
.gc .wrap { width: calc(1200 * var(--u)); margin: 0 auto; position: relative; }
.gc .center { text-align: center; }
.gc .light { color: #fff !important; }
.br-d { display: inline; }

/* ---------- ported Framer artboards (fluid canvases) ---------- */
.cv { position: relative; width: min(100%, calc(var(--w, 1440) * var(--u))); margin-inline: auto; container-type: inline-size; overflow: hidden; }
.cv div { position: absolute; }
.cv p { margin: 0; }
.cv .rt { display: flex; flex-direction: column; justify-content: flex-start; }
.cv .rt > p + p { margin-top: var(--ps, 0); }
.cv img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cv .sv svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cv .sv > svg { max-width: none; }
.cv .cv-page { background: transparent !important; }
.gc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.cv-scroll { position: relative; }
.cv-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* ---------- type ---------- */
.gc-h2 {
  font-size: calc(48 * var(--u)); line-height: 1.2; font-weight: 400; color: var(--green); letter-spacing: 0;
}
.gc-h2 strong { font-weight: 700; }
.gc-h2--rule::after {
  content: ""; display: block; width: calc(116 * var(--u)); height: 4px; border-radius: 4px;
  background: rgba(0,130,99,.48); margin: calc(17 * var(--u)) 0 0 3px;
}
.gc-body { font-size: calc(36 * var(--u)); line-height: 1.5; color: #000; }
.gc-lead {
  font-size: calc(24 * var(--u)); line-height: 1.5; font-style: italic; color: var(--green); text-align: center;
  max-width: calc(851 * var(--u)); margin: calc(38 * var(--u)) auto 0;
}
.gc-h3 { font-size: calc(40 * var(--u)); line-height: 70px; line-height: calc(70 * var(--u)); color: var(--green); letter-spacing: .02em; }
.gc mark {
  color: inherit; background: linear-gradient(to bottom, transparent 62%, var(--mint) 62%, var(--mint) 100%);
  padding: 0 .1em 0 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gc-list { font-size: calc(24 * var(--u)); line-height: 1.5; }
.gc-sec { position: relative; }

/* stage markers  ———— Empathize (icon) */
.gc-marker { width: calc(258 * var(--u)); margin-left: auto; }
.gc-marker .cv { width: 100%; }

/* ---------- hero ---------- */
.gc-hero { position: relative; }
.hero-cv { z-index: 0; }
.hero-kicker {
  position: absolute; left: calc(30 * var(--u)); top: calc(130 * var(--u));
  font-size: calc(28 * var(--u)); line-height: 1.2; color: #fff; white-space: nowrap;
}
.hero-title {
  position: absolute; left: calc(393 * var(--u)); top: calc(252 * var(--u)); width: calc(657 * var(--u));
  font-size: calc(32 * var(--u)); line-height: 1.2; color: #fff; text-align: center; font-weight: 400;
}

/* ---------- meta ---------- */
.gc-meta { position: relative; height: calc(616 * var(--u)); margin: 0; }
.meta-col { position: absolute; top: calc(118 * var(--u)); }
.meta-col:nth-child(1) { left: calc(180 * var(--u)); }
.meta-col:nth-child(2) { left: calc(644 * var(--u)); }
.meta-col:nth-child(3) { left: calc(1051 * var(--u)); }
.meta-col:nth-child(1) .meta-h { margin-left: calc(84 * var(--u)); }
.meta-col:nth-child(3) .meta-h { margin-left: calc(52 * var(--u)); }
.meta-h { font-family: "Inter", "Roboto", sans-serif; font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1.2; color: var(--green); }
.meta-team { width: calc(266 * var(--u)); margin-top: calc(30 * var(--u)); }
.meta-duration { display: flex; align-items: flex-start; gap: calc(6 * var(--u)); margin-top: calc(73 * var(--u)); }
.meta-duration img { width: calc(51 * var(--u)); height: auto; }
.meta-duration p { display: flex; flex-direction: column; align-items: center; margin-right: calc(4 * var(--u)); }
.meta-duration b { font-size: calc(32 * var(--u)); line-height: 1.1; }
.meta-duration span { font-size: calc(11 * var(--u)); margin-top: calc(2 * var(--u)); }
.meta-tools { display: flex; gap: calc(16 * var(--u)); margin-top: calc(84 * var(--u)); margin-left: calc(15 * var(--u)); }
.meta-tools img { width: calc(49 * var(--u)); height: auto; transition: transform .3s var(--ease-spring); }
.meta-tools img:hover { }

/* ---------- overview ---------- */
.gc-overview { padding-top: calc(62 * var(--u)); padding-bottom: calc(89 * var(--u)); }
.gc-overview .gc-body { margin-top: calc(60 * var(--u)); }
.gc-overview .gc-h3 { margin-top: calc(129 * var(--u)); }
.gc-chips { width: calc(1240 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); margin-top: calc(40 * var(--u)); }
.gc-chips li {
  background: var(--mint-soft); border-radius: calc(20 * var(--u)); padding: 0 calc(36 * var(--u));
  height: calc(80 * var(--u)); display: flex; align-items: center;
  font-size: calc(32 * var(--u)); letter-spacing: .02em; transition: background .25s, transform .25s var(--ease-spring);
}
.gc-chips li:hover { background: var(--mint); }

/* ---------- problem / solution ---------- */
.gc-problem { padding-top: calc(87 * var(--u)); padding-bottom: calc(80 * var(--u)); }
.gc-bar { position: relative; }
.gc-bar::before {
  content: ""; position: absolute; left: calc(-34 * var(--u)); top: calc(14 * var(--u)); bottom: calc(3 * var(--u));
  width: calc(11 * var(--u)); border-radius: 4px; background: var(--green);
}
.gc-bar .gc-h2 { line-height: 1.56; }
.gc-problem .gc-bar:first-child .gc-body { margin-top: calc(30 * var(--u)); }
.gc-solution { margin-top: calc(139 * var(--u)); }
.gc-solution::before { top: 0; bottom: calc(-6 * var(--u)); }
.gc-bullets { margin-top: calc(40 * var(--u)); line-height: 1.68; padding-left: calc(5 * var(--u)); }
.gc-bullets b { color: var(--dark); }

/* ---------- design process + strategy ---------- */
.gc-process { padding-top: calc(66 * var(--u)); }
.gc-process .gc-h2 { line-height: 1.56; }
.arc-wrap { margin-top: calc(-17 * var(--u)); }
.gc-strategy {
  position: relative; background: var(--green); color: #fff;
  padding: calc(144 * var(--u)) 0 calc(0 * var(--u)); margin-top: -1px;
}
.gc-strategy::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 32 * var(--u)); aspect-ratio: 1440 / 282; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 282' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440A1060 1060 0 0 1 0 0Z' fill='%23008263'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
.gc-strategy .gc-marker { width: calc(311 * var(--u)); }
.gc-strategy .gc-h2 { margin-top: calc(75 * var(--u)); }
.gc-strategy .gc-lead { max-width: calc(1079 * var(--u)); margin-top: calc(22 * var(--u)); }
.strategy-grid {
  display: grid; grid-template-columns: calc(560 * var(--u)) calc(500 * var(--u)); column-gap: calc(160 * var(--u)); row-gap: calc(50 * var(--u));
  margin-top: calc(85 * var(--u)); position: relative;
}
.st-block:nth-child(3), .st-block:nth-child(4) { margin-top: calc(5 * var(--u)); }
.st-block:nth-child(4) .st-list { margin-top: calc(39 * var(--u)); }
.st-block:nth-child(5), .st-block:nth-child(6) { margin-top: calc(-22 * var(--u)); }
.strategy-grid::before {
  content: ""; position: absolute; left: calc(598 * var(--u)); top: calc(-32 * var(--u)); height: calc(1031 * var(--u)); width: 1px;
  background: rgba(255,255,255,.5); transform: translateX(-2px);
}
.st-block h3 { font-size: calc(40 * var(--u)); line-height: 1.2; font-weight: 400; }
.st-block h3 strong { font-weight: 700; }
.st-lh { font-size: calc(24 * var(--u)); line-height: 1.5; margin-top: calc(56 * var(--u)); }
.st-sub { font-size: calc(24 * var(--u)); font-weight: 700; margin-top: calc(50 * var(--u)); padding-left: calc(5 * var(--u)); }
.st-list { font-size: calc(24 * var(--u)); line-height: 1.2; margin-top: calc(56 * var(--u)); }
.st-lh + .st-list { margin-top: calc(26 * var(--u)); }
.st-sub + .st-list { margin-top: calc(8 * var(--u)); }
.st-tags { display: flex; gap: calc(36 * var(--u)); margin-top: calc(13 * var(--u)); }
.st-tags li {
  background: #fff; color: var(--green); border-radius: calc(9 * var(--u)); font-weight: 700;
  font-size: calc(20 * var(--u)); height: calc(35 * var(--u)); display: flex; align-items: center; padding: 0 calc(13 * var(--u));
}
.gc-strategy .strategy-grid { padding-bottom: 0; }

/* ---------- competitor ---------- */
.gc-competitor { padding-top: calc(366 * var(--u)); }
.gc-competitor .gc-h2 { line-height: 1.56; }
.gc-competitor .wide { margin-top: calc(39 * var(--u)); }
.wide { width: 100%; }
@media (min-width: 810px) { .wide .cv { margin-left: calc(var(--x0, 0) * var(--u)); } }

/* ---------- research ---------- */
.gc-research { padding-top: calc(195 * var(--u)); }
.gc-research .gc-lead { max-width: none; margin-top: calc(22 * var(--u)); line-height: 1.2; }
.gc-research .gc-list { margin-top: calc(38 * var(--u)); }
.gc-card {
  position: relative; background: var(--card); border: 1px solid rgba(0,0,0,.3); border-radius: calc(20 * var(--u));
  padding: calc(40 * var(--u)) calc(60 * var(--u)) calc(40 * var(--u)) calc(78 * var(--u)); overflow: hidden;
}
.gc-card::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: calc(23 * var(--u)); background: var(--green); }
.gc-research .gc-card { margin-top: calc(54 * var(--u)); min-height: calc(345 * var(--u)); }
.card-h { font-family: "Inter", "Roboto", sans-serif; font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.2; color: var(--green); }
.insights { font-size: calc(36 * var(--u)); line-height: 1.5; margin-top: calc(40 * var(--u)); }
.gc-lead--survey { margin-left: calc(-40 * var(--u)) !important; margin-right: calc(-40 * var(--u)) !important; margin-top: calc(141 * var(--u)) !important; line-height: 1.34 !important; font-size: calc(24 * var(--u)); }
.surveys {
  display: grid; grid-template-columns: repeat(2, calc(615 * var(--u))); gap: calc(-4 * var(--u)) calc(2 * var(--u));
  justify-content: center; margin: calc(40 * var(--u)) 0 0; padding-bottom: calc(59 * var(--u));
}
.survey { margin: 0; transition: transform .3s var(--ease-out); position: relative; left: calc(-1.5 * var(--u)); }
.survey:hover { }

/* ---------- features ---------- */
.gc-features { padding-top: calc(76 * var(--u)); }
.gc-features .gc-marker { width: calc(253 * var(--u)); }
.gc-features .gc-h2 { margin-top: calc(25 * var(--u)); }
.gc-features .gc-lead { margin-top: calc(40 * var(--u)); }
.gc-features .wide { margin-top: calc(58 * var(--u)); padding-bottom: calc(99 * var(--u)); }

/* ---------- persona ---------- */
.gc-persona { padding-top: calc(104 * var(--u)); }
.gc-persona .gc-lead { margin-top: calc(41 * var(--u)); }
.personas { margin-top: calc(43 * var(--u)); padding-bottom: calc(160 * var(--u)); }
.persona {
  display: grid; grid-template-columns: calc(395 * var(--u)) calc(405 * var(--u)) calc(375 * var(--u));
  column-gap: calc(20 * var(--u)); justify-content: center; margin-left: calc(-10 * var(--u));
}
.persona + .persona { margin-top: calc(17 * var(--u)); }

/* ---------- flow / sitemap ---------- */
.gc-flow { padding-top: calc(62 * var(--u)); }
.gc-flow .gc-marker { width: calc(241 * var(--u)); }
.gc-flow .gc-h2 { margin-top: calc(41 * var(--u)); }
.flow-wide { margin-top: calc(60 * var(--u)); }
.sitemap-h { margin-top: calc(268 * var(--u)); }
.gc-flow .wide:last-child { margin-top: calc(38 * var(--u)); padding-bottom: calc(100 * var(--u)); }

/* ---------- paper + lofi ---------- */
.gc-paper { padding-top: calc(107 * var(--u)); }
.gc-paper .gc-lead { margin-top: calc(40 * var(--u)); font-size: calc(24 * var(--u)); }
.gc-paper .wide { margin-top: calc(64 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.gc-lofi { padding-top: calc(88 * var(--u)); }
.gc-lofi .full-img { width: 100%; height: auto; margin-top: calc(38 * var(--u)); }
.gc-lofi .gc-h2 + .full-img { margin-top: calc(45 * var(--u)); }
.gc-lofi .full-img + .gc-h2 { margin-top: calc(88 * var(--u)); }
.gc-lofi .full-img:last-child { margin-top: calc(72 * var(--u)); height: calc(1232 * var(--u)); object-fit: cover; }

/* ---------- usability ---------- */
.gc-usability { padding-top: calc(113 * var(--u)); padding-bottom: calc(136 * var(--u)); }
.gc-usability .gc-lead { margin-top: calc(40 * var(--u)); }
.prompts-h { font-size: calc(20 * var(--u)); font-style: italic; margin: calc(40 * var(--u)) 0 0 calc(12 * var(--u)); }
.gc-usability .gc-list { font-size: calc(20 * var(--u)); line-height: calc(41 * var(--u)); margin-top: calc(30 * var(--u)); }
.findings { margin-top: calc(111 * var(--u)); padding-bottom: calc(15 * var(--u)); }
.findings-list { margin-top: calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.findings-list li { display: grid; grid-template-columns: calc(360 * var(--u)) 1fr; column-gap: calc(50 * var(--u)); align-items: center; min-height: calc(79 * var(--u)); }
.findings-list p { font-size: calc(26 * var(--u)); line-height: 1.6; max-width: calc(693 * var(--u)); }
.findings-list li:nth-child(2) p { line-height: 1.25; }

/* ---------- hi-fi ---------- */
.gc-hifi { position: relative; background: var(--green); color: #fff; margin-top: calc(11 * var(--u)); padding: calc(82 * var(--u)) 0 calc(318 * var(--u)); }
.gc-hifi::before, .gc-hifi::after {
  content: ""; position: absolute; left: 0; right: 0; aspect-ratio: 1440 / 107; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 107' preserveAspectRatio='none'%3E%3Cpath d='M0 107A2497.5 2497.5 0 0 1 1440 107Z' fill='%23008263'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.gc-hifi::before { bottom: calc(100% - 1px); }
.gc-hifi::after { top: calc(100% - 1px); transform: scaleY(-1); }
.hifi-h { font-size: calc(40 * var(--u)); line-height: 1.2; text-align: center; margin-top: calc(90 * var(--u)); font-weight: 400; }
.hifi-h strong { font-weight: 700; }
.gc-hifi .gc-lead { max-width: calc(873 * var(--u)); margin-top: calc(35 * var(--u)); }
.home-grid { position: relative; height: calc(830 * var(--u)); margin-top: calc(69 * var(--u)); }
.home-grid + .hifi-h { margin-top: calc(168 * var(--u)); }
.hifi-phones--don { margin-top: calc(-6 * var(--u)) !important; }
.gc-hifi .hifi-phones + .wrap .hifi-h--map { margin-top: calc(252 * var(--u)); }
.home-phone { position: absolute; left: calc(400 * var(--u)); top: 0; width: calc(400 * var(--u)); }
.anno { position: absolute; width: calc(370 * var(--u)); }
.anno h4 { font-size: calc(36 * var(--u)); line-height: 1.2; font-weight: 700; display: flex; align-items: center; gap: calc(22 * var(--u)); }
.anno p { font-size: calc(24 * var(--u)); line-height: 1.5; font-style: italic; margin-top: calc(8 * var(--u)); }
.anno-l { left: 0; }
.anno-l h4::after { content: ""; flex: 1; height: 2px; background: #fff; margin-right: calc(3 * var(--u)); }
.anno-l p { max-width: calc(322 * var(--u)); }
.anno-r { right: 0; text-align: right; width: calc(366 * var(--u)); }
.anno-r h4 { justify-content: flex-end; }
.anno-r h4::before { content: ""; flex: 1; height: 2px; background: #fff; max-width: calc(224 * var(--u)); margin-left: 0; margin-right: auto; }
.anno-r p { margin-left: auto; max-width: calc(290 * var(--u)); }
.a-slider { top: calc(112 * var(--u)); }
.a-slider h4::before { max-width: calc(224 * var(--u)); }
.a-type { top: calc(349 * var(--u)); }
.a-tips { top: calc(522 * var(--u)); }
.a-video { top: calc(664 * var(--u)); }
.a-games { top: calc(522 * var(--u)); }
.a-events { top: calc(664 * var(--u)); }
.a-events h4::before { max-width: calc(113 * var(--u)); }
.a-type h4::after { max-width: calc(119 * var(--u)); }
.hifi-phones { margin-top: calc(40 * var(--u)); }
.gc-hifi .hifi-phones + .wrap .hifi-h { margin-top: calc(193 * var(--u)); }
.hifi-phones--map { margin-top: calc(-4 * var(--u)); }

/* ---------- accessibility ---------- */
.gc-access { padding-top: calc(182 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.gc-access .gc-marker { width: calc(258 * var(--u)); }
.gc-access .gc-h2 { margin-top: calc(58 * var(--u)); font-size: calc(48 * var(--u)); }
.access-grid { display: grid; grid-template-columns: calc(760 * var(--u)) 1fr; margin-top: calc(94 * var(--u)); column-gap: calc(40 * var(--u)); }
.access-item { display: grid; grid-template-columns: calc(84 * var(--u)) 1fr; align-items: center; row-gap: calc(12 * var(--u)); margin-left: calc(14 * var(--u)); }
.access-icon { width: calc(58 * var(--u)); }
.access-item h3 { font-size: calc(40 * var(--u)); color: var(--green); font-weight: 400; line-height: 1.2; }
.access-item h3 strong { font-weight: 700; }
.access-item p { grid-column: 1 / -1; font-size: calc(24 * var(--u)); line-height: 1.75; margin-left: calc(6 * var(--u)); }
.access-contrast { margin: 0 0 0 calc(-15 * var(--u)); width: calc(450 * var(--u)); }
.access-item--icons { grid-column: 1 / -1; margin-top: calc(44 * var(--u)); }
.access-item--icons .access-icon { align-self: end; }
.access-item--icons p { margin-top: calc(-8 * var(--u)); }

/* ---------- design system ---------- */
.gc-ds { padding-top: calc(199 * var(--u)); }
.ds-logo { display: flex; align-items: center; justify-content: center; gap: calc(76 * var(--u)); margin-top: calc(60 * var(--u)); margin-left: calc(-110 * var(--u)); }
.ds-logo p { font-size: calc(20 * var(--u)); font-weight: 700; color: var(--green); }
.ds-logo-cv { width: calc(177 * var(--u)); }
.ds-grid { display: grid; grid-template-columns: calc(720 * var(--u)) 1fr; margin-top: calc(66 * var(--u)); margin-left: calc(9 * var(--u)); }
.ds-h { font-size: calc(40 * var(--u)); line-height: 1.2; color: var(--green); font-weight: 400; }
.ds-h strong { font-weight: 700; }
.swatches { display: flex; flex-direction: column; gap: calc(24 * var(--u)); margin-top: calc(69 * var(--u)); width: calc(416 * var(--u)); }
.swatches li {
  height: calc(60 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--c); color: var(--t);
  display: flex; align-items: center; justify-content: flex-end; padding-right: calc(15 * var(--u)); font-size: calc(16 * var(--u));
  transition: transform .25s var(--ease-spring);
}
.swatches li:hover { }
.swatches li:nth-child(4) { margin-top: calc(2 * var(--u)); }
.sw-white { box-shadow: inset 0 0 0 1px #000; }
.type-hero { display: flex; align-items: center; gap: calc(26 * var(--u)); margin-top: calc(45 * var(--u)); margin-left: calc(-3 * var(--u)); }
.aa-big { font-size: calc(96 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.type-hero p { font-size: calc(20 * var(--u)); line-height: 1.5; margin-top: calc(-12 * var(--u)); }
.type-weights { display: flex; gap: calc(40 * var(--u)); margin-top: calc(14 * var(--u)); margin-left: calc(-3 * var(--u)); }
.type-weights div { display: flex; flex-direction: column; align-items: center; }
.type-weights span { font-size: calc(48 * var(--u)); line-height: 1; }
.type-weights small { font-size: calc(14 * var(--u)); letter-spacing: .04em; margin-top: calc(2 * var(--u)); }
.type-scale { margin: calc(24 * var(--u)) 0 0 calc(-3 * var(--u)); }
.type-scale div { display: grid; grid-template-columns: calc(186 * var(--u)) 1fr; align-items: center; min-height: calc(34 * var(--u)); letter-spacing: .04em; }
.type-scale dt, .type-scale dd { margin: 0; font-size: calc(var(--fs) * var(--u)); font-weight: var(--fw); line-height: 1; }
.type-scale dd { color: #7b7b7b; }
.ds-h--solo { margin-top: calc(111 * var(--u)); margin-left: calc(9 * var(--u)); }
.gc-ds > .wide:first-of-type { margin-top: calc(95 * var(--u)); }
.gc-ds .wrap + .wide { margin-top: calc(38 * var(--u)); }
.ds-icons { background: rgba(143,229,188,.1); margin-top: calc(85 * var(--u)); padding: calc(10 * var(--u)) 0 calc(50 * var(--u)); }
.ds-icons .ds-h--solo { margin-top: calc(15 * var(--u)); }
.ds-icons .wide { margin-top: calc(45 * var(--u)) !important; }
.gc-ds > .wrap:last-of-type .ds-h--solo { margin-top: calc(-3 * var(--u)); }
.gc-ds > .wide:last-child { margin-top: calc(71 * var(--u)) !important; }

/* ---------- learned ---------- */
.gc-learned { padding-top: calc(240 * var(--u)); padding-bottom: calc(110 * var(--u)); }
.learned-h { font-size: calc(48 * var(--u)); }
.learned { font-size: calc(36 * var(--u)); line-height: 1.2; font-style: italic; color: var(--green); text-align: center; margin: calc(46 * var(--u)) auto 0; max-width: calc(1124 * var(--u)); }

/* ---------- thank you ---------- */
.gc-thanks { position: relative; background: var(--green); color: #fff; text-align: center; padding: calc(55 * var(--u)) 0 calc(62 * var(--u)); margin-top: calc(264 * var(--u)); }
.gc-thanks::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); aspect-ratio: 1440 / 264;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 264' preserveAspectRatio='none'%3E%3Cpath d='M0 264A1112.5 1112.5 0 0 1 1440 264Z' fill='%23008263'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ty-devices { width: calc(500 * var(--u)); margin: calc(-254 * var(--u)) auto 0; position: relative; }
.ty-title { font-size: calc(150 * var(--u)); line-height: 1.2; font-weight: 400; margin-top: calc(90 * var(--u)); }
.ty-title strong { font-weight: 700; }
.ty-team { width: calc(431 * var(--u)); margin: calc(49 * var(--u)) auto 0; }
.ty-logos { width: calc(177 * var(--u)); margin: calc(30 * var(--u)) auto 0; }

/* ==========================================================================
   Tablet (810–1199): the artboard scale (--u) already handles it; just give
   text a readable floor.
   ========================================================================== */
@media (max-width: 1199px) {
  .gc-body, .insights { font-size: max(calc(36 * var(--u)), 20px); }
  .gc-lead, .gc-list, .st-lh, .st-list, .st-sub, .anno p { font-size: max(calc(24 * var(--u)), 16px); }
  .gc-usability .gc-list { font-size: max(calc(20 * var(--u)), 15px); line-height: 1.8; }
  .findings-list p { font-size: max(calc(26 * var(--u)), 17px); }
}

/* ==========================================================================
   Phone (≤809)
   ========================================================================== */
@media (max-width: 809px) {
  body.gc { --u: 1px; }
  .br-d { display: none; }
  .gc .wrap { width: auto; margin: 0 16px; }
  .gc-h2 { font-size: 30px; }
  .gc-h3 { font-size: 26px; line-height: 1.3; }
  .gc-body { font-size: 19px; line-height: 1.6; }
  .gc-lead { font-size: 17px; margin-top: 16px; max-width: none; }
  .gc-list { font-size: 17px; line-height: 1.55; }
  .gc-list li + li { margin-top: 6px; }
  .cv-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .cv-scroll > .cv { min-width: var(--minw); }
  .cv-scroll::after { content: "Swipe to explore \2192"; display: block; font-size: 12px; color: #6b6b6b; text-align: right; padding: 6px 16px 0; position: sticky; left: 0; width: 100%; box-sizing: border-box; }
  .gc-hifi .cv-scroll::after, .arc-scroll::after { color: #fff; }
  .cv-scroll.no-scroll::after { display: none; }
  .wide { width: 100%; }
@media (min-width: 810px) { .wide .cv { margin-left: calc(var(--x0, 0) * var(--u)); } }
  .gc-marker { max-width: 100%; }

  /* hero */
  .gc-hero { background: #008263; padding-top: 64px; }
  .hero-kicker { position: static; font-size: 17px; text-align: center; }
  .hero-title { position: static; width: auto; margin: 8px 16px 0; font-size: 22px; }
  .gc-hero { display: flex; flex-direction: column; }
  .gc-hero .hero-cv { order: 3; margin-top: 4px; }
  .hero-kicker, .hero-title { position: relative; z-index: 1; top: auto; left: auto; }
  .hero-kicker { order: 1; }
  .hero-title { order: 2; }

  /* meta */
  .gc-meta { height: auto; display: flex; flex-direction: column; gap: 36px; margin: 48px 16px 0; }
  .meta-col { position: static; }
  .meta-col .meta-h { margin-left: 0 !important; }
  .gc-chips { width: auto; }
  .meta-h { font-size: 28px; }
  .meta-team { width: 266px; margin: 16px 0 0; }
  .meta-duration { margin: 18px 0 0; gap: 8px; }
  .meta-duration img { width: 44px; }
  .meta-duration b { font-size: 28px; }
  .meta-duration span { font-size: 12px; }
  .meta-tools { margin: 18px 0 0; gap: 16px; }
  .meta-tools img { width: 44px; }

  /* overview */
  .gc-overview { padding: 56px 0 24px; }
  .gc-overview .gc-body { margin-top: 24px; }
  .gc-overview .gc-h3 { margin-top: 40px; }
  .gc-chips { gap: 10px; margin-top: 16px; }
  .gc-chips li { font-size: 16px; height: 44px; padding: 0 16px; border-radius: 12px; }
  .gc-h2--rule::after { width: 90px; margin-top: 10px; }

  /* problem */
  .gc-problem { padding: 40px 0; }
  .gc-bar { padding-left: 18px; }
  .gc-bar::before { left: 0; width: 6px; top: 8px; }
  .gc-solution { margin-top: 48px; }
  .gc-bullets { margin-top: 16px; line-height: 1.55; padding-left: 0; }
  .gc-bullets li + li { margin-top: 8px; }

  /* process + strategy */
  .gc-process { padding-top: 48px; }
  .arc-wrap { margin-top: 12px; }
  .arc-scroll { background: linear-gradient(to bottom, transparent 55%, #008263 55%); }
  .gc-strategy { padding: 40px 0 48px; }
  .gc-strategy .gc-h2 { margin-top: 32px; }
  .gc-strategy .gc-lead { margin-top: 16px; }
  .strategy-grid { grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
  .st-block:nth-child(n) { margin-top: 0; }
  .strategy-grid::before { display: none; }
  .st-block h3 { font-size: 26px; }
  .st-lh, .st-list, .st-sub { font-size: 17px; margin-top: 16px; }
  .st-list li + li { margin-top: 4px; }
  .st-tags { gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .st-tags li { font-size: 15px; height: 32px; border-radius: 8px; }

  /* competitor */
  .gc-competitor { padding-top: calc(100vw * 282 / 1440 + 56px); }
  .gc-competitor .wide { margin-top: 20px; }

  /* research */
  .gc-research { padding-top: 72px; }
  .gc-research .gc-list { margin-top: 20px; }
  .gc-card { border-radius: 16px; padding: 24px 20px 24px 34px; }
  .gc-card::before { width: 12px; }
  .gc-research .gc-card { margin-top: 32px; min-height: 0; }
  .card-h { font-size: 26px; }
  .insights { font-size: 19px; margin-top: 12px; }
  .insights li + li { margin-top: 6px; }
  .gc-lead--survey { margin-top: 56px !important; font-size: 17px; }
  .surveys { grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 24px 4px 0; padding-bottom: 48px; }
  .gc-lead--survey { margin-left: 0 !important; margin-right: 0 !important; }
  .survey { left: 0; border-radius: 8px; }

  /* features */
  .gc-features { padding-top: 40px; }
  .gc-features .gc-h2 { margin-top: 16px; }
  .gc-features .gc-lead { margin-top: 16px; }
  .gc-features .wide { margin-top: 24px; padding-bottom: 48px; }

  /* persona */
  .gc-persona { padding-top: 48px; }
  .gc-persona .gc-lead { margin-top: 16px; }
  .personas { margin: 24px 16px 0; padding-bottom: 56px; }
  .persona { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin: 0; }
  .persona .p-col { max-width: 420px; width: 100%; margin: 0 auto; }
  .persona + .persona { margin-top: 48px; padding-top: 40px; border-top: 1px solid #e3e3e3; }

  /* flows */
  .gc-flow { padding-top: 40px; }
  .gc-flow .gc-h2 { margin-top: 16px; }
  .flow-wide { margin-top: 20px; }
  .sitemap-h { margin-top: 48px; }
  .gc-flow .wide:last-child { margin-top: 20px; padding-bottom: 48px; }

  /* paper / lofi */
  .gc-paper .gc-lead { margin-top: 16px; }
  .gc-paper .wide { margin-top: 24px; padding-bottom: 16px; }
  .gc-lofi { padding-top: 40px; }
  .gc-lofi .full-img, .gc-lofi .gc-h2 + .full-img { margin-top: 20px; }
  .gc-lofi .full-img + .gc-h2 { margin-top: 48px; }
  .gc-lofi .full-img:last-child { margin-top: 20px; height: auto; }

  /* usability */
  .gc-usability { padding: 56px 0 56px; }
  .gc-usability .gc-lead { margin-top: 16px; }
  .prompts-h { font-size: 17px; margin: 24px 0 0; }
  .gc-usability .gc-list { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .findings { margin-top: 36px; }
  .findings-list { gap: 20px; margin-top: 16px; }
  .findings-list li { grid-template-columns: 1fr; row-gap: 8px; min-height: 0; }
  .findings-list .people { width: 190px; }
  .findings-list p { font-size: 17px; line-height: 1.5; }
  .findings-list li:nth-child(2) p { line-height: 1.5; }

  /* hi-fi */
  .gc-hifi { margin-top: 40px; padding: 40px 0 72px; }
  .hifi-h { font-size: 26px; margin-top: 56px; }
  .gc-hifi .gc-lead { margin-top: 12px; }
  .home-grid { height: auto; display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
  .home-phone { position: static; width: min(300px, 80vw); margin: 0 auto 10px; }
  .anno { position: static; width: auto; text-align: left; }
  .anno-r { text-align: left; }
  .anno h4 { font-size: 21px; justify-content: flex-start !important; gap: 12px; }
  .anno h4::before { display: none; }
  .anno h4::after { content: ""; flex: 0 0 40px !important; height: 2px; background: #fff; order: -1; max-width: none !important; margin: 0; }
  .anno p { font-size: 16px; margin: 4px 0 0 52px !important; max-width: none !important; }
  .a-slider { order: 1; } .a-type { order: 2; } .a-tips { order: 3; } .a-games { order: 4; } .a-video { order: 5; } .a-events { order: 6; }
  .hifi-phones { margin-top: 20px; }
  .gc-hifi .hifi-phones + .wrap .hifi-h, .home-grid + .hifi-h { margin-top: 56px !important; }
  .hifi-phones--don, .hifi-phones--map { margin-top: 20px !important; }

  /* accessibility */
  .gc-access { padding-top: 64px; padding-bottom: 32px; }
  .gc-access .gc-h2 { font-size: 30px; margin-top: 16px; }
  .access-grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; row-gap: 20px; }
  .access-item { grid-template-columns: 48px 1fr; margin: 0; column-gap: 10px; }
  .access-icon { width: 40px; }
  .access-item h3 { font-size: 26px; }
  .access-item p { font-size: 17px; line-height: 1.6; margin-left: 0; }
  .access-contrast { width: min(450px, 100%); margin: 0 auto; }
  .access-item--icons { margin-top: 12px; }
  .access-item--icons p { margin-top: 0; }

  /* design system */
  .gc-ds { padding-top: 64px; }
  .ds-logo { margin: 24px 0 0; gap: 24px; }
  .ds-logo p { font-size: 17px; }
  .ds-logo-cv { width: 150px; }
  .ds-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin: 40px 0 0; }
  .ds-h { font-size: 26px; }
  .swatches { width: 100%; margin-top: 20px; gap: 14px; }
  .swatches li { height: 48px; font-size: 15px; border-radius: 6px; }
  .type-hero { margin-top: 20px; }
  .aa-big { font-size: 72px; }
  .type-hero p { font-size: 17px; }
  .type-weights span { font-size: 40px; }
  .type-weights small { font-size: 13px; }
  .type-scale div { grid-template-columns: 170px 1fr; }
  .ds-h--solo { margin: 48px 0 0; }
  .gc-ds .wrap + .wide, .gc-ds > .wide:last-child { margin-top: 20px !important; }
  .ds-icons { margin-top: 48px; padding: 16px 0 24px; }
  .ds-icons .wide { margin-top: 20px !important; }

  /* learned */
  .gc-learned { padding: 80px 0 48px; }
  .learned-h { font-size: 30px; }
  .learned { font-size: 20px; line-height: 1.45; margin-top: 20px; }

  /* thanks */
  .gc-thanks { margin-top: calc(100vw * 264 / 1440 + 40px); padding: 0 16px 32px; }
  .ty-devices { width: min(420px, 100%); margin-top: -60px; }
  .ty-title { font-size: 64px; margin-top: 24px; }
  .ty-team { width: min(360px, 100%); margin-top: 20px; }
  .ty-logos { width: 150px; margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .survey, .gc-chips li, .swatches li, .meta-tools img { transition: none; }
}