:root {
  --color-primary: #276b60;
  --color-secondary: #247da0;
  --color-accent: #ef4785;
  --color-accent-text: #c82a66;
  --color-text: #23485c;
  --color-muted: #4e6471;
  --color-bg: #fffefc;
  --color-white: #fff;
  --color-mint: #eaf7f1;
  --color-blue: #edf8fc;
  --color-pink: #fff0f5;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "Meiryo", "メイリオ", sans-serif;
  --text-body: 1.125rem;
  --text-small: 1rem;
  --text-card: 1.25rem;
  --text-heading: clamp(1.65rem, 3.2vw, 2.5rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-section: clamp(3rem, 5vw, 4.5rem);
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --max-width: 1120px;
  --radius: 1.5rem;
  --radius-small: 1rem;
  --shadow: 0 8px 28px #245c6810;
  --border: 1px solid #e5efed;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 500 var(--text-body)/1.85 var(--font-body); overflow-wrap: anywhere; }
img, svg { max-width: 100%; vertical-align: middle; }
img { height: auto; }
button, a { -webkit-tap-highlight-color: #ef478530; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
button, a, [tabindex] { touch-action: manipulation; }
:focus-visible { outline: 3px solid #165cb0; outline-offset: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.5; }
h2 { font-size: var(--text-heading); letter-spacing: .035em; text-wrap: balance; }
h3 { font-size: var(--text-card); }
p { color: var(--color-muted); }
ol { list-style: none; padding: 0; margin: 0; }
.wrap { width: min(calc(100% - var(--page-gutter) * 2), var(--max-width)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.centered { text-align: center; }
.pink { color: var(--color-accent-text); }
.phrase { display: inline-block; max-width: 100%; }
.underline { text-decoration: underline; text-decoration-color: #f3bad0; text-decoration-thickness: 4px; text-underline-offset: .24em; }
.icon-defs { position: absolute; width: 0; height: 0; }
.icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10; padding: 1rem; background: white; }
.skip-link:focus { top: 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: clamp(.95rem, 2vw, 1.3rem); line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.brand small { display: block; font-size: .75rem; letter-spacing: .13em; margin-top: .3rem; }
.brand-leaves { position: relative; width: 30px; height: 36px; flex: 0 0 30px; }
.brand-leaves::before, .brand-leaves::after { content: ""; position: absolute; width: 15px; height: 30px; background: #80c876; border-radius: 100% 0 100% 0; transform: rotate(-18deg); }
.brand-leaves::after { left: 13px; top: 7px; background: #60c5de; transform: rotate(23deg); }
.header-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .85rem; background: var(--color-pink); color: var(--color-accent-text); border-radius: 99px; font-size: .875rem; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.has-grand-nav { position: relative; }
.grand-nav { display: flex; align-items: center; gap: .75rem; }
.grand-nav > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.grand-nav > .nav-item { position: relative; gap: .25rem; font-size: .9375rem; line-height: 1.5; }
.nav-concept { --nav-tone: #347b65; }
.nav-subjects { --nav-tone: #96701e; }
.nav-flow { --nav-tone: #297d9f; }
.nav-themes { --nav-tone: #85639d; }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--nav-tone); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-item::after { content: ""; position: absolute; bottom: 0; left: 18%; right: 18%; height: 2px; border-radius: 2px; background: var(--nav-tone); opacity: .4; transition: opacity .18s ease, left .18s ease, right .18s ease; }
.grand-nav > .nav-item:hover, .grand-nav > .nav-item:focus-visible { color: var(--nav-tone); }
.nav-item:hover::after, .nav-item:focus-visible::after { left: 10%; right: 10%; opacity: 1; }
@media (min-width: 900px) {
  .has-grand-nav > .brand { flex-shrink: 0; }
  .grand-nav { gap: 0; }
  .grand-nav > .nav-item { flex-direction: column; min-width: 100px; padding: 2px 12px 8px; }
  .nav-item + .nav-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 12px; width: 1px; background: #e5ebe8; }
  .grand-nav > .header-contact { margin-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item::after { transition: none; }
}
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; color: var(--color-text); background: var(--color-pink); border: var(--border); border-radius: .65rem; }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 22px; height: 2px; background: currentColor; }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
@media not all and (min-width: 900px) {
  .grand-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; flex-direction: column; align-items: stretch; gap: .25rem; padding: 1rem; max-height: calc(100dvh - 84px); overflow-y: auto; background: var(--color-bg); border: var(--border); border-radius: 0 0 var(--radius-small) var(--radius-small); box-shadow: var(--shadow); }
  .grand-nav > .nav-item { justify-content: flex-start; gap: .85rem; min-height: 48px; padding: .5rem .75rem; }
  .nav-item::after { left: 44px; right: 12px; height: 1px; opacity: .25; }
  .nav-item:hover::after, .nav-item:focus-visible::after { left: 44px; right: 12px; }
}
/* First view: editable copy and a clockwise thinking cycle. */
.hero { max-width: 1672px; margin-inline: auto; padding-block: 36px 42px; background: radial-gradient(ellipse at 82% 18%, #d9f2ff 0, #edf9fc80 33%, transparent 64%), radial-gradient(ellipse at 8% 90%, #e9f5de90, transparent 50%), #fffdfa; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.hero-eyebrow { color: var(--color-primary); font-size: 18px; font-weight: 700; line-height: 1.65; letter-spacing: .1em; }
.hero-brand { margin-top: 14px; color: var(--color-text); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: .09em; }
.hero-brand small { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .17em; }
.hero-copy h1 { margin: 24px 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.35; letter-spacing: .04em; }
.hero-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.hero-benefits li { border-left: 5px solid #82be86; padding-left: 18px; }
.hero-benefits li:nth-child(2) { border-color: #70b6d0; }
.hero-benefits li:nth-child(3) { border-color: #e999b7; }
.hero-benefits h2 { color: var(--color-primary); font-size: clamp(30px, 3vw, 40px); line-height: 1.35; letter-spacing: .04em; text-wrap: nowrap; }
.hero-benefits p { margin-top: 4px; font-size: 16px; line-height: 1.65; }
.hero-method { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.hero-scene { position: relative; width: 100%; height: 240px; }
.hero-airship { position: absolute; width: 44%; left: -5%; top: -14px; border-radius: 48%; z-index: 1; }
.hero-people { position: absolute; width: 78%; right: -4%; bottom: 0; border-radius: 48% 48% 28% 28%; clip-path: polygon(0 48%, 8% 41%, 20% 38%, 27% 39%, 31% 30%, 37% 25%, 47% 24%, 51% 10%, 57% 3%, 66% 0, 80% 4%, 93% 18%, 100% 40%, 100% 100%, 0 100%); mask-image: linear-gradient(#000 78%, transparent); }
.method-cycle { position: relative; width: min(100%, 440px); aspect-ratio: 440 / 300; }
.method-cycle > svg { width: 100%; height: 100%; }
.cycle-node { position: absolute; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; font-weight: 700; font-size: clamp(28px, 2.8vw, 38px); line-height: 1; border: 2px solid #b9ddd0; box-shadow: 0 7px 22px #276b6010; background: #f5fcf2; color: var(--color-primary); }
.cycle-why { top: 0; left: 35%; }
.cycle-subtract { top: 52%; right: 3%; background: #edf8fc; border-color: #b6dbe8; color: #24718e; }
.cycle-try { top: 52%; left: 3%; background: #fff0f5; border-color: #ecc7d6; color: #b23665; }
.hero-video-cta { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin-top: 22px; padding: 17px 12px 12px; border-radius: 24px; background: #c82a66; color: white; text-decoration: none; text-align: center; font-weight: 700; font-size: clamp(17px, 1.65vw, 22px); line-height: 1.6; box-shadow: 0 8px 22px #ef478528; }
.hero-video-cta:hover { background: #ae2057; }
.hero-video-cta svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .hero-layout { gap: 20px; }
  .hero-brand { font-size: 24px; }
  .hero-benefits p { font-size: 14px; }
  .hero-benefits li { padding-left: 12px; }
  .hero-scene { height: 190px; }
  .cycle-node { font-size: 27px; }
}
@media (max-width: 699px) {
  .hero { padding-block: 26px 32px; }
  .hero-layout { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .hero-eyebrow { font-size: 16px; }
  .hero-copy h1 { font-size: clamp(36px, 9vw, 46px); margin-block: 22px; }
  .hero-benefits { gap: 20px; }
  .hero-benefits h2 { font-size: 34px; }
  .hero-benefits p { font-size: 15px; }
  .hero-scene { height: 200px; max-width: 390px; }
  .hero-airship { left: 0; }
  .hero-people { right: 0; }
  .cycle-node { font-size: clamp(27px, 7vw, 34px); }
  .hero-video-cta { margin-top: 20px; font-size: clamp(16px, 4.3vw, 20px); }
}

/* Reference composition: supporting portraits above the main thinking cycle. */
.benefit-icon { display: none; }
.hero-brand > .brand-leaves { display: none; }
.cycle-node { display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 0; box-shadow: none; }
.cycle-node > svg { width: 32%; height: 32%; }
.cycle-why { color: #ef0964; background: radial-gradient(circle at 35% 30%, #fff0f6, #fbdde9); }
.cycle-subtract { color: #007b4c; background: radial-gradient(circle at 35% 30%, #e2f8e9, #c6edd6); }
.cycle-try { color: #0089e9; background: radial-gradient(circle at 35% 30%, #e2f6ff, #bfe9ff); }
.hero-video-cta { background: #ff3981; border: 2px solid white; border-radius: 999px; box-shadow: 0 9px 25px #ef478530; }
@media (min-width: 900px) {
  .hero { padding-block: 30px 28px; background: radial-gradient(ellipse at 85% 14%, #d7f2ff 0, #edf9fc80 40%, transparent 68%), radial-gradient(ellipse at 97% 94%, #e5f0b9 0, transparent 32%), #fffefa; }
  .hero-layout { width: min(calc(100% - 88px), 1320px); grid-template-columns: 54% 46%; gap: 0; align-items: stretch; }
  .hero-copy { position: relative; z-index: 2; }
  .hero-eyebrow { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.3; letter-spacing: .035em; color: #0b3046; }
  .hero-brand { position: relative; padding-left: 66px; margin-top: 24px; font-size: clamp(28px, 3.25vw, 43px); letter-spacing: .06em; color: #103e47; }
  .hero-brand > .brand-leaves { display: block; position: absolute; left: 12px; top: 15px; transform: scale(1.65); }
  .hero-brand small { margin-top: 0; font-size: 14px; }
  .hero-copy h1 { margin: 21px 0 18px; font-size: clamp(48px, 5.55vw, 74px); line-height: 1.22; color: #103e47; letter-spacing: .025em; }
  .hero-benefits { gap: 12px; }
  .hero-benefits li { position: relative; min-height: 74px; padding-left: 98px; border: 0; }
  .hero-benefits h2 { font-size: clamp(27px, 2.7vw, 36px); line-height: 1.3; color: #f3337d; }
  .hero-benefits li:nth-child(2) h2 { color: #00955b; }
  .hero-benefits li:nth-child(3) h2 { color: #008aeb; }
  .hero-benefits p { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.5; margin-top: 0; color: #23485c; }
  .hero-benefits p br { display: none; }
  .benefit-icon { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fde5ef; color: #f3337d; }
  .benefit-icon svg { width: 46px; height: 46px; }
  .hero-benefits li:nth-child(2) .benefit-icon { color: #00955b; background: #d4f1df; }
  .hero-benefits li:nth-child(3) .benefit-icon { color: #008aeb; background: #cceeff; }
  .hero-method { position: relative; justify-content: flex-end; padding-top: 238px; }
  .hero-scene { position: absolute; inset: 0 0 auto; height: 246px; }
  .hero-airship { width: 57%; left: -30%; top: -14px; mask-image: radial-gradient(ellipse, #000 50%, transparent 73%); }
  .hero-people { width: 85%; right: -6%; bottom: -1px; }
  .method-cycle { width: min(100%, 500px); z-index: 1; }
  .cycle-node { width: 34%; }
  .cycle-why { left: 33%; }
  .cycle-subtract { right: 0; }
  .cycle-try { left: 0; }
  .cycle-node { font-size: clamp(29px, 3.1vw, 42px); }
  .hero-video-cta { position: relative; z-index: 2; width: 96%; margin-top: 10px; padding: 9px 12px 7px; font-size: clamp(18px, 2vw, 27px); line-height: 1.5; }
  .hero-video-cta svg { width: 35px; height: 35px; stroke-width: 5; }
}

.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 56px; padding: .85rem 1.1rem; border: 2px solid transparent; border-radius: 99px; background: var(--color-accent-text); color: white; font-size: var(--text-small); font-weight: 700; line-height: 1.6; text-decoration: none; box-shadow: 0 6px 18px #ee488525; }
.button:hover { background: #ae2057; }
.button-outline { background: white; color: var(--color-accent-text); border-color: #ee6a9c; box-shadow: none; }
.button-outline:hover { background: var(--color-pink); }
.intro p { margin-top: var(--space-3); }
.participation-section { background: linear-gradient(135deg, var(--color-mint), var(--color-white), var(--color-blue)); }
.participation-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.participation-card { padding: var(--space-3); background: var(--color-white); border: var(--border); border-top: 3px solid var(--tone); border-radius: var(--radius); box-shadow: var(--shadow); }
.participation-card p { margin-top: var(--space-1); }
@media (min-width: 900px) {
  .participation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.leaf-accent { position: relative; }
.leaf-accent::before, .leaf-accent::after { content: ""; position: absolute; width: 24px; height: 48px; border-radius: 100% 0 100% 0; background: #c8e8cf; left: 0; top: 18%; transform: rotate(18deg); pointer-events: none; opacity: .65; z-index: -1; }
.leaf-accent::after { left: auto; right: 0; top: 42%; background: #b9e8f1; transform: rotate(34deg); }
.movie-section { max-width: 820px; }
.hero + .movie-section { margin-top: var(--space-section); }
.movie-detail { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border); }
.movie-detail-lead { margin-bottom: var(--space-3); text-align: center; font-size: var(--text-small); }
.movie-section > h2 { margin-bottom: var(--space-2); text-align: center; font-size: clamp(1rem, 3vw, 2rem); }
.movie-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(125deg, #537e83, #c3dfdc); aspect-ratio: 16 / 9; }
.movie-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.movie-note { margin-top: var(--space-2); color: var(--color-accent-text); text-align: center; font-size: var(--text-small); }
.notice { margin: var(--space-2) auto 0; padding: var(--space-2); max-width: 680px; border: 1px solid #dfa9be; border-radius: var(--radius-small); background: var(--color-white); text-align: left; color: var(--color-text); }
[hidden] { display: none !important; }
.learning-section { background: radial-gradient(ellipse at 0% 70%, var(--color-blue), transparent 70%); }
.section-lead { margin-top: var(--space-2); }
.learning-grid, .subjects-grid, .themes-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.green { --tone: #378570; --number: #679d3b; }
.blue { --tone: #218db9; --number: #238bbb; }
.rose { --tone: #d13c76; --number: #cc3972; }
.orange { --tone: #b77113; --number: #bd761e; }
.purple { --tone: #9460b9; --number: #9460b9; }
.step-card { position: relative; padding: 2.5rem .5rem 1.25rem; border: var(--border); background: var(--color-white); border-radius: var(--radius-small); text-align: center; box-shadow: var(--shadow); }
.step-number { display: grid; place-items: center; border-radius: 50%; width: 30px; height: 30px; background: var(--number); color: white; font-size: 1rem; line-height: 1; font-weight: 700; flex: 0 0 30px; }
.step-card .step-number { position: absolute; left: .65rem; top: .65rem; }
.step-card .icon { color: var(--tone); margin-block: var(--space-1) var(--space-2); }
.step-card h3 { font-size: 1rem; }
.step-card p { font-size: 1rem; margin-top: .6rem; line-height: 1.7; }
.subject-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem; border: var(--border); }
.subject-photo { display: block; width: 100%; aspect-ratio: 2.3; border-radius: var(--radius-small); }
.subject-content { position: relative; padding: var(--space-3) var(--space-2) var(--space-2) 4rem; }
.subject-content p { margin-top: .7rem; }
.icon-badge { position: absolute; top: -.65rem; left: 0; display: grid; place-items: center; width: 56px; height: 56px; background: white; border: 1px solid #dcefe6; border-radius: 50%; color: var(--tone); }
.icon-badge .icon { width: 34px; height: 34px; }
.foundation-section { background: linear-gradient(125deg, #f7fbf800, #f2faf7a0, #f7fbf800); }
.foundation-grid { display: grid; gap: var(--space-4); }
.foundation-grid > div:first-child { text-align: center; }
.foundation-grid p { margin-top: var(--space-3); }
.foundation-diagram { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flag { color: var(--color-accent-text); font-size: 3rem; line-height: 1; }
.foundation-layer { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: .6rem; border-radius: .65rem; margin-top: .25rem; font-weight: 700; color: #214b4d; box-shadow: 0 4px 8px #315c4b0a; }
.foundation-layer .icon { width: 28px; height: 28px; flex-shrink: 0; }
.layer-4 { width: 68%; background: #f4aac6; color: #6e2442; }
.layer-3 { width: 78%; background: #9bd9ed; }
.layer-2 { width: 89%; background: #91d6b8; }
.layer-1 { width: 100%; background: #a4d47f; }
.foundation-diagram .foundation-note { margin-top: var(--space-2); font-size: var(--text-small); }
.section-heading { text-align: center; }
.section-heading p { margin-top: var(--space-2); }
.lab-session-intro h2 { font-size: clamp(1.65rem, 3.2vw, 2rem); }
.lab-session-reading { display: block; margin-top: .25rem; font-size: 1.25rem; }
.lab-session-heading .lab-session-lead { margin-top: var(--space-2); font-size: 1.125rem; color: var(--color-text); }
@media (min-width: 900px) {
  .lab-session-heading > * { flex: 1; min-width: 0; }
}
.session-flow { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.flow-card { position: relative; display: flex; align-items: center; gap: .85rem; padding: 1.1rem .8rem; border-radius: var(--radius-small); border: var(--border); background: white; box-shadow: var(--shadow); }
.flow-card > .icon { color: var(--tone); width: 36px; height: 36px; flex: 0 0 36px; }
.flow-card h3 { font-size: 1.125rem; }
.flow-card p { font-size: var(--text-small); margin-top: .2rem; }
.flow-card:not(:last-child)::after { content: "↓"; position: absolute; bottom: -1.65rem; left: 50%; color: var(--color-muted); font-size: 1.2rem; z-index: 1; }
.themes-section { background: radial-gradient(ellipse at 100% 100%, var(--color-blue), transparent 65%); }
.theme-card { display: flex; align-items: center; gap: var(--space-2); padding: .75rem; background: white; border: var(--border); border-radius: var(--radius-small); box-shadow: var(--shadow); }
.theme-card > svg { width: 86px; height: 96px; flex: 0 0 86px; border-radius: .65rem; }
.theme-card h3 { font-size: 1.125rem; }
.theme-card p { font-size: var(--text-small); margin-top: .4rem; }
.contact-section { background: radial-gradient(ellipse at 0% 80%, var(--color-pink), transparent 60%); }
.contact-section > .wrap > p { margin-top: var(--space-3); }
.contact-button { margin-top: var(--space-3); width: 100%; max-width: 520px; }
.contact-section .contact-status { font-size: var(--text-small); margin-top: var(--space-2); }
.site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-block: var(--space-4); border-top: var(--border); }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem var(--space-2); }
.site-footer nav a { font-size: .875rem; min-height: 44px; display: inline-flex; align-items: center; }
.copyright { font-size: .875rem; color: var(--color-muted); }
@media (min-width: 600px) {
  .learning-grid { gap: var(--space-2); }
  .step-card h3 { font-size: 1.2rem; }
  .subjects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .subject-content { padding: 2.25rem .25rem 1rem; text-align: center; }
  .subject-content h3 { font-size: 1.25rem; }
  .subject-content p { font-size: 1rem; }
  .icon-badge { left: .25rem; top: -1.5rem; }
  .contact-button { font-size: 1.2rem; }
  .mobile-break { display: none; }
}
@media (min-width: 900px) {
  .site-header { min-height: 80px; }
  .header-contact { background: var(--color-accent-text); color: white; padding-inline: 1.5rem; font-size: 1rem; }
  .learning-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step-card { padding: 2.5rem 1rem 1.5rem; }
  .subjects-grid { gap: var(--space-4); }
  .subject-content { padding: 1.5rem .5rem 1.25rem 3.5rem; text-align: left; }
  .subject-content p { font-size: 1.125rem; }
  .foundation-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-5); }
  .foundation-grid > div:first-child { text-align: left; }
  .foundation-layer { min-height: 65px; font-size: 1.25rem; }
  .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; }
  .section-heading p { margin: 0; font-size: 1rem; }
  .session-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
  .flow-card { flex-direction: column; padding: 1rem .5rem; text-align: center; gap: .65rem; }
  .flow-card > .step-number { align-self: flex-start; }
  .flow-card h3 { font-size: 1rem; }
  .flow-card p { font-size: 1rem; }
  .flow-card:not(:last-child)::after { content: "→"; left: auto; right: -1rem; top: 46%; bottom: auto; }
  .themes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .theme-card { gap: .75rem; }
  .theme-card > svg { width: 76px; height: 86px; flex-basis: 76px; }
  .theme-card h3 { font-size: 1rem; }
  .site-footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .copyright { flex-basis: 100%; text-align: center; }
}
@media (max-width: 359px) {
  .site-header { gap: .4rem; }
  .brand { gap: .4rem; font-size: .875rem; letter-spacing: .02em; }
  .brand-leaves { transform: scale(.85); width: 26px; flex-basis: 26px; }
  .header-contact { padding-inline: .65rem; font-size: .8rem; }
  .learning-grid { grid-template-columns: 1fr; }
  .step-card h3 { font-size: 1.2rem; }
  .subject-content { padding-left: 3.2rem; padding-right: 0; }
  .subject-content p { font-size: 1rem; }
  .flow-card { gap: .6rem; padding-inline: .6rem; }
  .flow-card h3 { font-size: 1rem; }
  .contact-button { border-radius: var(--radius-small); gap: .3rem; font-size: .95rem; }
  .movie-caption { display: none; }
}

/* Approved reference artwork is the desktop canvas. Keep these coordinates
   relative to the artwork, never to the navigation or viewport height. */
.hero-reference { display: none; }
@media (max-width: 699px) {
  .hero-eyebrow { color: #0b3046; }
  .hero-brand, .hero-copy h1 { color: #103e47; }
  .hero-benefits { gap: 19px; }
  .hero-benefits li { position: relative; border: 0; padding-left: 62px; }
  .hero-benefits h2 { color: #f3337d; font-size: 30px; }
  .hero-benefits li:nth-child(2) h2 { color: #00955b; }
  .hero-benefits li:nth-child(3) h2 { color: #008aeb; }
  .hero-benefits p { font-size: 14px; line-height: 1.65; }
  .benefit-icon { position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #f3337d; background: #fde5ef; }
  .benefit-icon svg { width: 30px; height: 30px; }
  .hero-benefits li:nth-child(2) .benefit-icon { color: #00955b; background: #d4f1df; }
  .hero-benefits li:nth-child(3) .benefit-icon { color: #008aeb; background: #cceeff; }
  .hero-video-cta { font-size: 17px; }
}
/* The complete 1338 x 754 composition fits beneath the 80px desktop header.
   Never enlarge the raster scene beyond its source size; all text is live. */
@media (min-width: 900px) {
 .hero { position:relative; container-type:inline-size; width:min(100%,1338px,calc((100svh - 96px) * 1338 / 754)); max-width:none; aspect-ratio:1338 / 754; padding:0; margin-inline:auto; background:#fff; }
 .hero-reference { display:block; width:100%; height:100%; }
 .hero-layout { position:absolute; inset:0; width:100%; max-width:none; height:100%; display:block; margin:0; }
 .hero-copy,.hero-method { position:static; padding:0; display:block; }
 .hero-scene { display:none; }
 .hero-eyebrow { position:absolute; left:3.2%; top:7.9%; font-size:3.74cqw; line-height:1.23; letter-spacing:.025em; color:#082a40; }
 .hero-brand { position:absolute; left:8.5%; top:28%; padding:0; margin:0; font-family:Arial,sans-serif; font-size:3.35cqw; letter-spacing:.055em; line-height:1.12; color:#103e47; }
 .hero-brand > .brand-leaves { display:none; }
 .hero-brand small { margin-top:.15cqw; font-family:var(--font-body); font-size:1.2cqw; letter-spacing:.22em; }
 .hero-copy h1 { position:absolute; left:3.2%; top:39.1%; margin:0; font-size:5.58cqw; line-height:1.15; letter-spacing:.015em; color:#103e47; }
 .hero-benefits { position:absolute; left:10.5%; top:64.3%; width:35%; height:32%; display:block; }
 .hero-benefits li { position:absolute; left:0; width:100%; min-height:0; padding:0; border:0; }
 .hero-benefits li:nth-child(1) { top:0; }
 .hero-benefits li:nth-child(2) { top:36.4%; }
 .hero-benefits li:nth-child(3) { top:72.4%; }
 .hero-benefits h2 { font-size:2.65cqw; line-height:1.25; letter-spacing:.02em; }
 .hero-benefits p { margin-top:.15cqw; font-size:1.38cqw; line-height:1.5; white-space:nowrap; }
 .hero-benefits p br { display:none; }
 .benefit-icon { display:none; }
 .method-cycle { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
 .method-cycle > svg { display:none; }
 .cycle-node { position:absolute; width:13.65%; height:auto; aspect-ratio:1; gap:.35cqw; font-size:3cqw; }
 .cycle-why { left:68.35%; top:39.9%; background:radial-gradient(circle at 40% 35%,#fff1f6,#fbe2ec); }
 .cycle-try { left:59.35%; top:60.5%; background:radial-gradient(circle at 40% 35%,#dbf3ff,#bee8ff); }
 .cycle-subtract { left:77.6%; right:auto; top:60.5%; background:radial-gradient(circle at 40% 35%,#e0f7e6,#c9eed8); }
 .hero-video-cta { position:absolute; left:58.3%; top:84.1%; width:33.2%; height:12.7%; margin:0; padding:.4cqw .2cqw; display:flex; gap:0; justify-content:center; background:linear-gradient(115deg,#ff4388,#ff2c79); border:2px solid white; border-radius:999px; box-shadow:0 .4cqw 1.2cqw #f64a8420; color:white; font-size:2.05cqw; line-height:1.4; }
 .hero-video-cta > span { white-space:nowrap; }
 .hero-video-cta svg { width:3.1cqw; height:3.1cqw; stroke-width:5; }
 .hero-video-cta:focus-visible { outline:3px solid #103e47; outline-offset:4px; }
}

/* Mobile hero: one flow up to the desktop breakpoint, including landscape. */
@media (max-width: 899px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .site-header.has-grand-nav { min-height: 72px; }
  .hero { width: 100%; max-width: none; height: auto; min-height: 0; aspect-ratio: auto; padding: 24px 0 32px; container-type: normal; }
  .hero-reference { display: none; }
  .hero-layout { position: static; display: flex; flex-direction: column; align-items: stretch; width: calc(100% - 32px); max-width: 480px; height: auto; margin: 0 auto; gap: 24px; }
  .hero-copy { position: static; width: 100%; min-width: 0; }
  .hero-eyebrow { position: static; margin: 0; font-size: 18px; line-height: 1.6; letter-spacing: .04em; color: #0b3046; }
  .hero-brand { position: static; margin-top: 16px; padding: 0; font-size: clamp(23px, 6vw, 28px); line-height: 1.25; letter-spacing: .06em; color: #103e47; }
  .hero-brand > .brand-leaves { display: none; }
  .hero-brand small { margin-top: 5px; font-size: 12px; line-height: 1.5; }
  .hero-copy h1 { position: static; margin: 20px 0 24px; font-size: clamp(32px, 8.5vw, 44px); line-height: 1.3; letter-spacing: .02em; color: #103e47; }
  .hero-benefits { position: static; display: grid; gap: 20px; width: 100%; height: auto; }
  .hero-benefits li { position: relative; width: 100%; min-height: 50px; padding: 0 0 0 62px; border: 0; }
  .hero-benefits h2 { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: .02em; color: #f3337d; text-wrap: initial; }
  .hero-benefits li:nth-child(2) h2 { color: #00955b; }
  .hero-benefits li:nth-child(3) h2 { color: #008aeb; }
  .hero-benefits p { margin-top: 5px; font-size: 16px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; color: #23485c; }
  .hero-benefits p br { display: none; }
  .benefit-icon { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #f3337d; background: #fde5ef; }
  .benefit-icon svg { width: 30px; height: 30px; }
  .hero-benefits li:nth-child(2) .benefit-icon { color: #00955b; background: #d4f1df; }
  .hero-benefits li:nth-child(3) .benefit-icon { color: #008aeb; background: #cceeff; }
  .hero-method { position: static; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 420px; margin-inline: auto; padding: 0; min-width: 0; }
  .hero-scene { position: relative; display: block; width: 100%; max-width: none; height: 170px; }
  .hero-airship { position: absolute; left: 0; top: 0; width: 43%; height: auto; }
  .hero-people { position: absolute; right: 0; bottom: 0; top: auto; width: 78%; height: auto; }
  /* Padding establishes a definite canvas height in mobile browser engines. */
  .method-cycle { position: relative; width: 100%; max-width: none; height: 0; padding-bottom: 68.181818%; aspect-ratio: auto; flex: 0 0 auto; }
  .method-cycle > svg { position: absolute; display: block; inset: 0; width: 100%; height: 100%; }
  .cycle-node { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 31%; height: 45.466667%; aspect-ratio: auto; gap: 5px; padding: 4px; font-size: clamp(23px, 6.2vw, 30px); line-height: 1.1; border: 0; border-radius: 50%; }
  .cycle-node > svg { display: block; width: 30%; height: 30%; flex: 0 0 auto; }
  .cycle-node > span { white-space: nowrap; }
  .cycle-why { top: 0; left: 34.5%; right: auto; }
  .cycle-try { top: 52%; left: 3%; right: auto; }
  .cycle-subtract { top: 52%; left: auto; right: 3%; }
  .hero-video-cta { position: static; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: auto; min-height: 84px; margin: 0; padding: 14px 10px 10px; gap: 4px; border: 2px solid #fff; border-radius: 28px; background: #ff3981; color: #fff; font-size: clamp(16px, 4.1vw, 20px); line-height: 1.5; }
  .hero-video-cta > span { position: static; width: auto; height: auto; white-space: normal; overflow: visible; clip-path: none; }
  .hero-video-cta svg { position: static; display: block; width: 28px; height: 28px; flex: 0 0 28px; }
  .hero + .movie-section { margin-top: 32px; }
}