:root{
  --ink:#122439; --ink-soft:#4c6580;
  --paper:#f4f9fc; --paper-raise:#e4f0f8;
  --navy:#0a5ba8; --navy-soft:#3f93c9;
  --sea-pale:#d9eefb; --sea-deep:#082a4d;
  --olive:#7fa33e; --olive-deep:#4f6329; --olive-light:#c3e08a; --olive-pale:#e6f0d2;
  --line:rgba(18,36,57,0.12); --line-strong:rgba(18,36,57,0.24);
  --card:#ffffff;
  --shadow:0 18px 40px -24px rgba(14,67,114,0.28);
  --rock:#d6e5f2; --rock-2:#bed4e7; --rock-line:#a6c1d7; --bark:#7d7159; --bark-2:#584f3e; --bark-3:#94886d;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e7f0f7; --ink-soft:#a9c1d6;
    --paper:#0a1926; --paper-raise:#102232;
    --navy:#79b3dd; --navy-soft:#4f89ac;
    --sea-pale:#132c40; --sea-deep:#061523;
    --olive:#a9c374; --olive-deep:#c3d998; --olive-light:#7c9a4a; --olive-pale:#1f2a1a;
    --line:rgba(231,240,247,0.14); --line-strong:rgba(231,240,247,0.26);
      --rock:#17293a; --rock-2:#0e1e2c; --rock-line:#2a4459; --bark:#8b7d61; --bark-2:#635a45; --bark-3:#a2957a;
  --card:#0f2130; --shadow:0 18px 44px -22px rgba(0,0,0,0.65);
  }
}
:root[data-theme="dark"]{
  --ink:#e7f0f7; --ink-soft:#a9c1d6;
  --paper:#0a1926; --paper-raise:#102232;
  --navy:#79b3dd; --navy-soft:#4f89ac;
  --sea-pale:#132c40; --sea-deep:#061523;
  --olive:#a9c374; --olive-deep:#c3d998; --olive-light:#7c9a4a; --olive-pale:#1f2a1a;
  --line:rgba(231,240,247,0.14); --line-strong:rgba(231,240,247,0.26);
    --rock:#17293a; --rock-2:#0e1e2c; --rock-line:#2a4459; --bark:#8b7d61; --bark-2:#635a45; --bark-3:#a2957a;
  --card:#0f2130; --shadow:0 18px 44px -22px rgba(0,0,0,0.65);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(180deg,#ffffff 0%,var(--paper) 40%,var(--paper-raise) 100%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans); line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{ background:linear-gradient(180deg,#0d1f2e 0%,var(--paper) 45%,#071420 100%); background-attachment:fixed; }
}
:root[data-theme="dark"] body{ background:linear-gradient(180deg,#0d1f2e 0%,var(--paper) 45%,#071420 100%); background-attachment:fixed; }

::selection{ background:var(--olive-pale); color:var(--olive-deep); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
p{ margin:0; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.45; margin:0; text-wrap:balance; word-break:auto-phrase; line-break:strict; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }

.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:0.76rem;
  letter-spacing:0.2em; color:var(--olive); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px;
}
.eyebrow::before{
  content:""; width:12px; height:12px; flex:none; background:var(--olive);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 11 10 5 20 4C19 13 13 19 4 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 11 10 5 20 4C19 13 13 19 4 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.art-ico{ stroke:var(--olive-deep); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hub-ico{ stroke:var(--navy); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

@keyframes riseIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
@keyframes drawIn{ to{ stroke-dashoffset:0; } }
@keyframes march{ to{ stroke-dashoffset:-24; } }
@keyframes drift{ 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-10px) rotate(1.2deg);} }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes scrollX{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.float-slow{ animation:drift 7s ease-in-out infinite; }
.float-fast{ animation:bob 4.2s ease-in-out infinite; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(20px); }
.stagger.in > *{ animation:riseIn .65s cubic-bezier(.2,.7,.3,1) forwards; }
.stagger.in > *:nth-child(1){animation-delay:0s}
.stagger.in > *:nth-child(2){animation-delay:.07s}
.stagger.in > *:nth-child(3){animation-delay:.14s}
.stagger.in > *:nth-child(4){animation-delay:.21s}
.stagger.in > *:nth-child(5){animation-delay:.28s}
.stagger.in > *:nth-child(6){animation-delay:.35s}
.stagger.in > *:nth-child(7){animation-delay:.42s}
.stagger.in > *:nth-child(8){animation-delay:.49s}
.draw [pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; }
.draw.in [pathLength]{ animation:drawIn 1.5s cubic-bezier(.4,.1,.2,1) forwards; }
.fade-late{ opacity:0; transition:opacity .8s ease .7s; }
.draw.in .fade-late, .reveal.in .fade-late{ opacity:1; }
.page-enter > *{ opacity:0; animation:riseIn .8s cubic-bezier(.2,.7,.3,1) forwards; }
.page-enter > *:nth-child(1){animation-delay:.05s}
.page-enter > *:nth-child(2){animation-delay:.16s}
.page-enter > *:nth-child(3){animation-delay:.3s}
.page-enter > *:nth-child(4){animation-delay:.42s}
.page-enter > *:nth-child(5){animation-delay:.54s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .stagger > *, .page-enter > *{ opacity:1; transform:none; }
  .draw [pathLength]{ stroke-dashoffset:0; }
  .fade-late{ opacity:1; }
}

#scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--olive),var(--navy)); z-index:200; transition:width .08s linear; }

header.site{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px clamp(20px,4vw,56px); gap:20px; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:30px; height:30px; flex:none; transition:transform .35s ease; }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.08); }
.brand-text{ font-family:var(--serif); font-weight:700; font-size:1.15rem; }
.brand-text small{ display:block; font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.13em; color:var(--ink-soft); margin-top:1px; }
nav.links{ display:flex; gap:20px; font-size:.85rem; font-weight:500; }
nav.links a{ text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0; white-space:nowrap; }
nav.links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
nav.links a:hover{ color:var(--olive-deep); }
nav.links a:hover::after, nav.links a.active::after{ transform:scaleX(1); }
nav.links a.active{ color:var(--olive-deep); font-weight:700; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }
.nav-toggle-btn{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
.nav-toggle-btn svg{ width:22px; height:22px; display:block; }
@media (max-width:1080px){
  nav.links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px; background:var(--card); border-bottom:1px solid var(--line); padding:10px clamp(20px,4vw,56px) 18px; box-shadow:var(--shadow); }
  nav.links.open{ display:flex; }
  nav.links a{ padding:11px 0; border-bottom:1px solid var(--line); }
  nav.links a::after{ display:none; }
  .nav-toggle-btn{ display:inline-flex; }
}
.back-to-top{ position:fixed; right:22px; bottom:22px; z-index:60; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; border:none; cursor:pointer; font-size:1.15rem; line-height:1; box-shadow:var(--shadow); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .3s ease, transform .3s ease, background .2s ease; }
.back-to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ background:var(--olive-deep); }

.hero{ position:relative; padding:clamp(56px,8.5vw,100px) 0 clamp(64px,8vw,96px); overflow:hidden; border-bottom:1px solid var(--line); }
.hero-glow{ position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(560px circle at var(--mx,60%) var(--my,20%), rgba(127,163,62,.16), transparent 62%); transition:background .15s ease; }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,64px); align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(1.95rem,4.05vw,3.05rem); margin-top:16px; }
.hero h1 em{ font-style:normal; color:var(--olive-deep); }
.hero-lede{ margin-top:20px; font-size:1.02rem; color:var(--ink-soft); max-width:50ch; }
.hero-formal{ margin-top:24px; font-size:.81rem; color:var(--ink-soft); border-left:2px solid var(--olive); padding-left:14px; line-height:1.9; }
.hero-cta{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; }
.hero-tilt{ perspective:1000px; transition:transform .3s ease-out; will-change:transform; }
.hero-art{ position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto; }
.hero-art svg{ overflow:visible; }

.page-head-band{ position:relative; overflow:hidden; padding:clamp(46px,6.5vw,80px) 0 clamp(34px,4.5vw,52px); border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb,var(--sea-pale) 55%,transparent), transparent); }
.page-head-band .ph-inner{ max-width:66ch; position:relative; z-index:1; }
.page-head-band h1{ font-size:clamp(1.75rem,3.6vw,2.7rem); margin-top:12px; }
.page-head-band .ph-lede{ margin-top:16px; color:var(--ink-soft); font-size:1rem; }
.ph-deco{ position:absolute; right:-40px; top:-20px; width:min(300px,32vw); opacity:.22; pointer-events:none; }
@media (max-width:760px){ .ph-deco{ display:none; } }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-family:var(--sans); font-weight:700; font-size:.88rem; letter-spacing:.03em; text-decoration:none; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease; }
.btn-primary{ background:var(--olive-deep); color:#f9f8ee; }
.btn-primary:hover{ background:var(--olive); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(79,99,41,.7); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--olive-deep); color:var(--olive-deep); transform:translateY(-2px); }

section{ padding:clamp(50px,7vw,88px) 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width:62ch; margin-bottom:clamp(28px,4.2vw,46px); }
.section-head h2{ font-size:clamp(1.45rem,2.9vw,2.05rem); margin-top:10px; }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:.98rem; }
.sea-band{ line-height:0; margin-top:-1px; }
.sea-band svg{ display:block; width:100%; height:auto; }
.section-art{ margin:0 auto clamp(26px,4vw,42px); }
.section-art svg{ display:block; width:100%; height:auto; }
.art-wide{ max-width:880px; }
.art-narrow{ max-width:390px; }

.steps3{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; }
@media (max-width:900px){ .steps3{ grid-template-columns:1fr; } }
.step3{ background:var(--card); border:1px solid var(--line); padding:30px 26px; display:flex; flex-direction:column; gap:12px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.step3:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -22px rgba(10,91,168,.35); }
.step3 .s3-ic{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.step3 .s3-ic .ico{ width:24px; height:24px; }
.step3 .lbl{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.step3 h3{ font-size:1.18rem; }
.step3 p{ font-size:.87rem; color:var(--ink-soft); }
.step3.s-problem{ background:var(--paper-raise); }
.step3.s-problem .s3-ic{ background:var(--card); color:var(--ink-soft); }
.step3.s-problem .lbl{ color:var(--ink-soft); }
.step3.s-olive{ background:var(--navy); border-color:var(--navy); }
.step3.s-olive .s3-ic{ background:rgba(255,255,255,.16); color:#fff; }
.step3.s-olive .lbl{ color:var(--olive-light); }
.step3.s-olive h3{ color:#f2f8fd; }
.step3.s-olive p{ color:#d8e7f4; }
.step3.s-future .s3-ic{ background:var(--olive-pale); color:var(--olive-deep); }
.step3.s-future .lbl{ color:var(--olive-deep); }
.step3-arrow{ display:flex; align-items:center; justify-content:center; padding:0 14px; color:var(--olive); font-size:1.4rem; }
@media (max-width:900px){ .step3-arrow{ padding:10px 0; transform:rotate(90deg); } }

.gate-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .gate-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gate-grid{ grid-template-columns:1fr; } }
.gate{ display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); padding:26px 24px; text-decoration:none; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.gate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--olive); transform:scaleY(0); transform-origin:top; transition:transform .35s ease; }
.gate:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -22px rgba(10,91,168,.35); }
.gate:hover::before{ transform:scaleY(1); }
.gate .g-ic{ width:42px; height:42px; border-radius:50%; background:var(--sea-pale); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.gate h3{ font-size:1.08rem; margin-top:4px; }
.gate p{ font-size:.85rem; color:var(--ink-soft); flex:1; }
.gate .go{ font-size:.78rem; font-weight:700; color:var(--olive-deep); display:inline-flex; align-items:center; gap:6px; transition:gap .25s ease; }
.gate:hover .go{ gap:12px; }

.tabs-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tab-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; cursor:pointer; font-family:var(--sans); font-size:.87rem; font-weight:700; background:var(--card); color:var(--ink-soft); border:1px solid var(--line-strong); transition:all .25s cubic-bezier(.2,.8,.2,1); }
.tab-btn .ico{ width:17px; height:17px; }
.tab-btn:hover{ transform:translateY(-2px); border-color:var(--olive); color:var(--olive-deep); }
.tab-btn[aria-selected="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 12px 24px -14px rgba(10,91,168,.8); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both; }
.panel-card{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--olive); box-shadow:var(--shadow); padding:clamp(26px,3.6vw,40px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); }
@media (max-width:800px){ .panel-card{ grid-template-columns:1fr; } }
.panel-card h3{ font-size:1.32rem; }
.panel-card .who{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive-deep); font-weight:700; }
.panel-card .say{ margin-top:14px; font-size:.95rem; color:var(--ink-soft); }
.panel-list{ display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; }
.panel-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; }
.panel-list .chk{ flex:none; width:22px; height:22px; border-radius:50%; margin-top:3px; background:var(--olive-pale); color:var(--olive-deep); display:flex; align-items:center; justify-content:center; }
.panel-list .chk svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.panel-list b{ display:block; color:var(--ink); }
.panel-list span.d{ color:var(--ink-soft); font-size:.85rem; }

.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit{ background:var(--card); border:1px solid var(--line); padding:26px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.benefit::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--olive); transform:scaleY(0); transform-origin:top; transition:transform .35s ease; }
.benefit:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -22px rgba(10,91,168,.35); }
.benefit:hover::before{ transform:scaleY(1); }
.benefit .bn{ font-family:var(--serif); font-weight:800; font-size:1.5rem; color:var(--olive-pale); -webkit-text-stroke:1.4px var(--olive); line-height:1; }
.benefit h4{ font-size:1.02rem; margin-top:12px; }
.benefit p{ margin-top:9px; font-size:.85rem; color:var(--ink-soft); }

.marquee{ overflow:hidden; position:relative; padding:14px 0; border-block:1px solid var(--line); background:var(--card); }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--card),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--card),transparent); }
.marquee-track{ display:flex; width:max-content; animation:scrollX 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ padding:0 26px; font-size:.85rem; color:var(--ink-soft); white-space:nowrap; }
.marquee-track span::after{ content:"·"; margin-left:26px; color:var(--olive); }

.trivia-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
@media (max-width:860px){ .trivia-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .trivia-strip{ grid-template-columns:1fr; } }
.trivia-card{ background:var(--card); padding:26px 22px; display:flex; flex-direction:column; gap:10px; transition:background .3s ease; }
.trivia-card:hover{ background:var(--paper-raise); }
.trivia-card .ic{ line-height:1; color:var(--olive-deep); }
.trivia-card .ic .ico{ width:26px; height:26px; }
.trivia-card .tt{ font-family:var(--serif); font-weight:700; font-size:.98rem; }
.trivia-card .tx{ font-size:.82rem; color:var(--ink-soft); }

.quote-band{ background:var(--navy); color:#f2f8fd; padding:clamp(48px,7vw,84px) clamp(20px,4vw,56px); text-align:center; position:relative; overflow:hidden; }
.quote-band h2{ color:#f2f8fd; font-size:clamp(1.7rem,3.8vw,2.8rem); max-width:20ch; margin:0 auto; position:relative; z-index:1; }
.quote-band .sub{ margin-top:18px; font-size:.95rem; opacity:.85; position:relative; z-index:1; }
.quote-band .orb{ position:absolute; border-radius:50%; opacity:.13; background:var(--olive-light); }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-cell{ background:var(--paper); padding:32px 28px; transition:background .3s ease; }
.stat-cell:hover{ background:var(--card); }
.stat-num{ font-family:var(--serif); font-weight:800; font-size:clamp(2.2rem,4vw,2.8rem); color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1; }
.stat-num span{ font-size:.45em; font-weight:700; margin-left:2px; }
.stat-label{ margin-top:12px; font-size:.88rem; color:var(--ink-soft); }
.stat-cell:nth-child(2) .stat-num{ color:var(--navy-soft); }
.stat-cell:nth-child(3) .stat-num{ color:var(--olive-deep); }
.qs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .qs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .qs-grid{ grid-template-columns:1fr; } }
.qs{ padding:24px 20px; background:var(--card); border-left:3px solid var(--olive); box-shadow:var(--shadow); transition:transform .28s ease; }
.qs:hover{ transform:translateY(-5px); }
.qs .yr{ font-size:.7rem; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; }
.qs .val{ font-family:var(--serif); font-weight:800; font-size:1.55rem; color:var(--navy); margin-top:6px; font-variant-numeric:tabular-nums; }
.qs .lbl{ font-size:.82rem; color:var(--ink-soft); margin-top:8px; }
.qs.warm{ border-left-color:var(--navy-soft); }
.qs.warm .val{ color:var(--olive-deep); }

.valley{ display:grid; grid-template-columns:1fr 1.1fr 1fr; border:1px solid var(--line-strong); }
@media (max-width:760px){ .valley{ grid-template-columns:1fr; } }
.valley > div{ padding:30px 26px; }
.valley .discuss{ background:var(--paper-raise); }
.valley .gap{ background:var(--sea-deep); color:#eaf4fb; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.valley .gap small{ letter-spacing:.18em; font-size:.68rem; opacity:.7; text-transform:uppercase; }
.valley .gap strong{ font-family:var(--serif); font-size:1.5rem; }
.valley .impl{ background:var(--sea-pale); }
.valley h4{ font-size:.95rem; margin-bottom:8px; }
.valley p{ font-size:.86rem; color:var(--ink-soft); }
.valley-conclusion{ margin-top:20px; padding:18px 24px; background:var(--navy); color:#f3f6fa; font-size:.92rem; font-weight:500; display:flex; gap:12px; align-items:baseline; }
.valley-conclusion b{ font-family:var(--serif); font-weight:700; flex:none; }
.layers{ display:flex; flex-direction:column; margin-top:38px; }
.layer{ border:1px solid var(--line-strong); padding:26px 30px; display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:center; }
@media (max-width:700px){ .layer{ grid-template-columns:1fr; } }
.layer.upper{ background:var(--navy); color:#f3f6fa; }
.layer.lower{ background:var(--navy-soft); color:#f6f9fb; margin-top:-1px; }
.layer.lower .tag{ color:var(--olive-light); opacity:1; }
.layer .tag{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; }
.layer .name{ font-family:var(--serif); font-weight:700; font-size:1.2rem; margin-top:6px; }
.layer .desc{ font-size:.9rem; opacity:.92; }
.layer-arrow{ text-align:center; font-size:.78rem; color:var(--ink-soft); padding:8px 0; }

.flow-stages{ display:flex; flex-wrap:wrap; }
.flow-stage{ flex:1 1 180px; background:var(--card); border:1px solid var(--line); padding:22px 18px; transition:transform .28s ease, box-shadow .28s ease; }
.flow-stage:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.flow-stage .fi{ width:34px; height:34px; border-radius:50%; background:var(--sea-pale); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.flow-stage .fi .ico{ width:18px; height:18px; }
.flow-stage .n{ font-family:var(--serif); font-weight:800; color:var(--navy); font-size:1.3rem; }
.flow-stage h4{ font-size:.92rem; margin-top:6px; }
.flow-stage p{ font-size:.78rem; color:var(--ink-soft); margin-top:8px; }
.flow-stage .link{ font-size:.7rem; color:var(--olive-deep); margin-top:10px; }
.flow-loop{ text-align:center; margin-top:18px; font-size:.82rem; color:var(--olive-deep); font-weight:700; }

.body-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .body-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .body-grid{ grid-template-columns:1fr; } }
.body-card{ background:var(--card); border:1px solid var(--line); padding:22px 20px; box-shadow:var(--shadow); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.body-card:hover{ transform:translateY(-5px); box-shadow:0 22px 38px -20px rgba(10,91,168,.34); }
.body-card .k{ font-size:.68rem; letter-spacing:.14em; color:var(--navy-soft); font-weight:700; text-transform:uppercase; }
.body-card h4{ font-size:1rem; margin-top:8px; }
.body-card p{ margin-top:10px; font-size:.83rem; color:var(--ink-soft); }
.hub-illustration{ max-width:460px; margin:0 auto clamp(34px,5vw,50px); }
.hub-link{ stroke-dasharray:4 8; animation:march 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce){ .hub-link{ animation:none; } }
.committee-band{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.pill{ border:1px solid var(--line-strong); padding:8px 16px; font-size:.82rem; border-radius:999px; background:var(--paper-raise); transition:transform .22s ease, border-color .22s ease; }
.pill:hover{ transform:translateY(-2px); border-color:var(--olive); }

.init-list{ display:flex; flex-direction:column; }
.init{ display:grid; grid-template-columns:120px 1fr; gap:26px; padding:28px 0; border-top:1px solid var(--line); transition:transform .28s ease; }
.init:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:700px){ .init{ grid-template-columns:1fr; gap:10px; } }
.init:hover{ transform:translateX(7px); }
.init:hover .init-num{ -webkit-text-stroke:1.5px var(--navy); }
.init-num{ font-family:var(--serif); font-weight:800; font-size:2.4rem; color:var(--olive-pale); -webkit-text-stroke:1.5px var(--olive); line-height:1; transition:all .28s ease; }
.init h3{ font-size:1.12rem; }
.init p{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; max-width:68ch; }
.init .sub{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.init .sub span{ font-size:.74rem; padding:5px 12px; border-radius:999px; background:var(--sea-pale); color:var(--navy); border:1px solid var(--line); }

.road-wrap{ position:relative; padding-left:26px; }
.road-rail{ position:absolute; left:0; top:4px; bottom:4px; width:2px; background:var(--line-strong); }
.road-fill{ position:absolute; left:0; top:4px; width:2px; height:0; background:linear-gradient(180deg,var(--olive),var(--navy)); transition:height .15s linear; }
.road{ display:flex; flex-direction:column; gap:44px; }
.road-item{ position:relative; }
.road-item::before{ content:""; position:absolute; left:-32px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--olive-deep); transition:transform .28s ease, background .28s ease; }
.road-item:hover::before{ transform:scale(1.4); background:var(--olive); }
.road-item .yr{ font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--olive-deep); }
.road-item .ttl{ font-weight:700; margin-top:2px; font-size:.95rem; color:var(--ink-soft); }
.road-item ul{ margin:14px 0 0; padding-left:1.1em; font-size:.9rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:8px; }
.phase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:800px){ .phase-grid{ grid-template-columns:1fr; } }
.phase-card{ background:var(--card); border:1px solid var(--line); border-top:4px solid var(--olive); padding:26px 22px; transition:transform .28s ease; }
.phase-card:hover{ transform:translateY(-6px); }
.phase-card:nth-child(2){ border-top-color:var(--navy-soft); }
.phase-card:nth-child(3){ border-top-color:var(--navy); background:var(--sea-deep); }
.phase-card:nth-child(3) *{ color:#eef5fa !important; }
.phase-card .pn{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; }
.phase-card .py{ font-family:var(--serif); font-weight:700; font-size:1.05rem; margin-top:4px; }
.phase-card h4{ font-size:1.1rem; margin-top:10px; }
.phase-card p{ font-size:.85rem; color:var(--ink-soft); margin-top:8px; }

.news-list{ display:flex; flex-direction:column; }
.news-item{ display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:baseline; padding:18px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .25s ease; }
.news-item:hover{ padding-left:8px; }
.news-item:hover .news-title{ color:var(--olive-deep); }
.news-list > :last-child{ border-bottom:1px solid var(--line); }
@media (max-width:640px){ .news-item{ grid-template-columns:1fr; gap:6px; } .news-item .tag{ order:-1; } }
.news-item .date{ font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.news-title{ font-size:.94rem; transition:color .25s ease; }
.news-item .tag{ font-size:.7rem; letter-spacing:.08em; padding:4px 10px; border:1px solid var(--line-strong); color:var(--ink-soft); white-space:nowrap; height:fit-content; }

.ask-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:860px){ .ask-grid{ grid-template-columns:1fr; } }
.ask{ background:var(--olive-pale); border:1px solid var(--olive); padding:26px 24px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.ask:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(79,99,41,.55); }
.ask .an{ width:30px; height:30px; border-radius:50%; background:var(--olive-deep); color:#f7faef; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.ask h4{ font-size:1.05rem; margin-top:14px; color:var(--ink); }
.ask p{ margin-top:9px; font-size:.86rem; color:var(--ink-soft); }
.contact-panel{ background:var(--sea-deep); color:#eef5fa; padding:clamp(40px,6vw,64px); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; }
@media (max-width:800px){ .contact-panel{ grid-template-columns:1fr; } }
.contact-panel h2{ color:#eef5fa; font-size:1.6rem; }
.contact-panel .note{ margin-top:16px; font-size:.9rem; opacity:.88; max-width:52ch; }
.contact-facts{ display:flex; flex-direction:column; gap:16px; font-size:.88rem; }
.contact-facts dt{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.contact-facts dd{ margin:4px 0 0; }
.contact-art{ max-width:260px; margin-top:26px; }

.contact-form-btn{ display:inline-flex; margin-top:28px; }

.pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:clamp(34px,5vw,54px) 0; }
@media (max-width:640px){ .pager{ grid-template-columns:1fr; } }
.pager a{ display:flex; flex-direction:column; gap:4px; padding:22px 24px; background:var(--card); border:1px solid var(--line); text-decoration:none; transition:transform .28s ease, border-color .28s ease; }
.pager a:hover{ transform:translateY(-4px); border-color:var(--olive); }
.pager .dir{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive-deep); font-weight:700; }
.pager .ttl{ font-family:var(--serif); font-weight:700; font-size:1.05rem; }
.pager .next{ text-align:right; }
.pager .next:only-child{ grid-column:2; }
@media (max-width:640px){ .pager .next:only-child{ grid-column:1; } .pager .next{ text-align:left; } }

footer{ padding:30px clamp(20px,4vw,56px); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:.78rem; color:var(--ink-soft); flex-wrap:wrap; border-top:1px solid var(--line); }
footer .fnav{ display:flex; gap:16px; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--olive-deep); }

.photo-band{ margin:0 0 clamp(28px,4vw,46px); position:relative; overflow:hidden; border-radius:5px; box-shadow:var(--shadow); }
.photo-band img{ width:100%; height:auto; display:block; transition:transform 1.3s cubic-bezier(.2,.7,.3,1); }
.photo-band:hover img{ transform:scale(1.035); }
.photo-band figcaption{ position:absolute; left:0; right:0; bottom:0; padding:52px 26px 18px; background:linear-gradient(transparent, rgba(8,42,77,.88)); color:#eef5fa; font-size:.88rem; line-height:1.7; }
.photo-band figcaption .cap-note{ display:block; margin-top:5px; font-size:.7rem; opacity:.72; letter-spacing:.04em; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .photo-band img{ filter:brightness(.88); } }
:root[data-theme="dark"] .photo-band img{ filter:brightness(.88); }
@media (prefers-reduced-motion: reduce){ .photo-band:hover img, .photo-split .ps-img:hover img{ transform:none; } }

.photo-plain{ margin:0 auto clamp(28px,4vw,46px); max-width:780px; }
.photo-plain img{ width:100%; height:auto; display:block; border-radius:5px; background:#fff; }
.photo-plain figcaption{ margin-top:12px; font-size:.8rem; color:var(--ink-soft); text-align:center; }

.photo-split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,3.6vw,48px); align-items:center; }
@media (max-width:840px){ .photo-split{ grid-template-columns:1fr; } }
.photo-split .ps-img{ margin:0; overflow:hidden; border-radius:5px; box-shadow:var(--shadow); }
.photo-split .ps-img img{ width:100%; height:auto; display:block; transition:transform 1.3s cubic-bezier(.2,.7,.3,1); }
.photo-split .ps-img:hover img{ transform:scale(1.035); }
.photo-split h3{ font-size:clamp(1.3rem,2.4vw,1.75rem); }
.photo-split p{ margin-top:14px; color:var(--ink-soft); font-size:.95rem; }
.photo-split .ps-note{ margin-top:14px; font-size:.72rem; color:var(--ink-soft); opacity:.8; }

/* ===== hero aurora ===== */
.hero-aurora{ position:absolute; inset:-25%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.5; }
.hero-aurora span{ position:absolute; display:block; border-radius:50%; }
.hero-aurora span:nth-child(1){ width:46%; height:58%; left:3%;  top:6%;    background:rgba(127,163,62,.55); animation:aurA 19s ease-in-out infinite; }
.hero-aurora span:nth-child(2){ width:42%; height:54%; right:5%; top:16%;   background:rgba(10,91,168,.42);  animation:aurB 23s ease-in-out infinite; }
.hero-aurora span:nth-child(3){ width:36%; height:46%; left:33%; bottom:-6%;background:rgba(195,224,138,.5); animation:aurC 27s ease-in-out infinite; }
@keyframes aurA{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8%,6%) scale(1.16)} }
@keyframes aurB{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7%,9%) scale(1.12)} }
@keyframes aurC{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5%,-8%) scale(1.2)} }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-aurora{ opacity:.32; } }
:root[data-theme="dark"] .hero-aurora{ opacity:.32; }
@media (prefers-reduced-motion: reduce){ .hero-aurora span{ animation:none; } }

/* ===== primary button shine ===== */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary > *{ position:relative; z-index:1; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); transition:left .65s cubic-bezier(.3,.7,.3,1);
}
.btn-primary:hover::after{ left:140%; }

/* ===== clip-path wipe reveal (photos) ===== */
.wipe{ clip-path:inset(0 100% 0 0); transition:clip-path 1.05s cubic-bezier(.5,.05,.2,1); }
.reveal.wipe{ transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1), clip-path 1.05s cubic-bezier(.5,.05,.2,1); }
.wipe.in{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .wipe{ clip-path:none !important; transition:none; } }

/* ===== 3D tilt cards ===== */
.tilt-card{ transform-style:preserve-3d; will-change:transform; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.tilt-card > *{ transform:translateZ(18px); }
@media (prefers-reduced-motion: reduce){ .tilt-card{ transform:none !important; } }

/* ===== eyebrow leaf pulse ===== */
.eyebrow::before{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.section-head:hover .eyebrow::before{ transform:rotate(-18deg) scale(1.18); }

/* ===== page transition ===== */
body{ transition:opacity .26s ease; }
body.leaving{ opacity:0; }

/* ===== skip link ===== */
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--navy); color:#fff; padding:10px 18px; font-size:.85rem; font-weight:700; text-decoration:none; border-radius:0 0 3px 0; }
.skip:focus{ left:0; }

/* ===== nav underline sweep for brand ===== */
.brand-text{ background-image:linear-gradient(var(--olive), var(--olive)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%; transition:background-size .35s ease; }
.brand:hover .brand-text{ background-size:100% 2px; }

/* ===== no-JS safety: never hide content ===== */
.no-js .reveal, .no-js .stagger > *, .no-js .draw [pathLength], .no-js .fade-late, .no-js .page-enter > *{ opacity:1 !important; transform:none !important; }
.no-js .wipe{ clip-path:none !important; }
.no-js .draw [pathLength]{ stroke-dashoffset:0 !important; }

/* ===== hero scroll cue ===== */
.scroll-cue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-soft); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; }
.scroll-cue i{ display:block; width:1px; height:38px; background:linear-gradient(var(--olive), transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--olive-deep); animation:cueRun 2.1s ease-in-out infinite; }
@keyframes cueRun{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }
@media (prefers-reduced-motion: reduce){ .scroll-cue i::after{ animation:none; } }
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* ===== gradient accent on hero emphasis ===== */
.hero h1 em{ background:linear-gradient(96deg, var(--olive-deep) 0%, var(--olive) 55%, var(--navy) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== section divider as gradient hairline ===== */
section{ border-bottom:none; position:relative; }
section:not(:last-of-type)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }

/* ===== gate card leaf corner ===== */
.gate{ position:relative; }
.gate::after{
  content:""; position:absolute; right:14px; top:14px; width:18px; height:18px; opacity:.16;
  background:var(--olive);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 11 10 5 20 4C19 13 13 19 4 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 11 10 5 20 4C19 13 13 19 4 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.gate:hover::after{ transform:rotate(-16deg) scale(1.25); opacity:.4; }

/* ===== news item arrow ===== */
.news-item{ position:relative; }
a.news-item .news-title::after{ content:"→"; margin-left:10px; opacity:0; color:var(--olive-deep); transition:opacity .28s ease, margin-left .28s ease; }
a.news-item:hover .news-title::after{ opacity:1; margin-left:16px; }
div.news-item{ cursor:default; }
div.news-item:hover{ padding-left:0; }

/* ===== footer layout ===== */
footer{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; border-top:1px solid var(--line); padding:34px clamp(20px,4vw,56px) 40px; }
footer .fnav{ display:flex; gap:18px; flex-wrap:wrap; order:-1; padding-bottom:4px; }
footer .fnav a{ color:var(--ink-soft); }
footer .fnav a:hover{ color:var(--olive-deep); }
footer .f-note{ opacity:.8; }

.in-fast{ transition:none !important; }
.in-fast > *{ animation-duration:.001ms !important; animation-delay:0ms !important; }

/* ===== circular ecosystem ===== */
.eco-ring{ max-width:560px; margin:0 auto clamp(26px,4vw,42px); }
.eco-ring svg{ display:block; width:100%; height:auto; overflow:visible; }
.eco-node{ transform-box:fill-box; transform-origin:center; transition:transform .35s cubic-bezier(.2,.8,.2,1); cursor:default; }
.eco-node circle{ transition:stroke .3s ease, fill .3s ease; }
.eco-node:hover, .eco-node.hot{ transform:scale(1.08); }
.eco-node:hover circle, .eco-node.hot circle{ stroke:var(--olive); fill:var(--olive-pale); }
@media (prefers-reduced-motion: reduce){ .eco-node{ transition:none; } }

.eco-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px; }
.eco-card{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--olive); padding:22px 20px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.eco-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.eco-card .n{ font-family:var(--serif); font-weight:800; color:var(--navy); font-size:1.2rem; }
.eco-card h4{ font-size:.96rem; margin-top:4px; }
.eco-card p{ font-size:.8rem; color:var(--ink-soft); margin-top:8px; }
.eco-card .link{ font-size:.7rem; color:var(--olive-deep); margin-top:10px; }
.eco-loop{ text-align:center; margin-top:20px; font-size:.84rem; color:var(--olive-deep); font-weight:700; }

/* 日本語の折り返しを文節単位に */
.hero-lede, .ph-lede, .section-head p, .step3 p, .gate p, .panel-card .say, .benefit p, .trivia-card .tx, .eco-card p, .init p, .ask p{ word-break:auto-phrase; line-break:strict; }

/* ===== bridging branch grows across the chasm ===== */
.bridge-art svg{ overflow:visible; }
.bridge-grow{ transform-box:view-box; transform-origin:200px 160px; transform:scaleX(.04); opacity:.35; transition:transform 1.5s cubic-bezier(.25,.8,.25,1), opacity .9s ease; }
.draw.in .bridge-grow{ transform:scaleX(1); opacity:1; }
@media (prefers-reduced-motion: reduce){ .bridge-grow{ transform:none; opacity:1; transition:none; } }
.no-js .bridge-grow{ transform:none; opacity:1; }

/* ===== hero title: line-by-line mask reveal ===== */
.hero-title .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero-title .ln > span{ display:block; transform:translateY(106%); animation:lineUp 1s cubic-bezier(.2,.85,.25,1) forwards; }
.hero-title .ln:nth-child(1) > span{ animation-delay:.18s; }
.hero-title .ln:nth-child(2) > span{ animation-delay:.32s; }
@keyframes lineUp{ to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .hero-title .ln > span{ transform:none; animation:none; } }

/* ===== anchor offset under the sticky header ===== */
section, [id]{ scroll-margin-top:86px; }

/* ===== print ===== */
@media print{
  header.site, .back-to-top, #scrollProgress, .marquee, .pager, .scroll-cue, .hero-aurora, .hero-glow{ display:none !important; }
  body{ background:#fff !important; color:#000; }
  .reveal,.stagger>*,.wipe,.fade-late,.page-enter>*{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  section{ page-break-inside:avoid; border:none; }
  a{ text-decoration:none; color:#000; }
}

/* ===== drifting olive leaves in the hero ===== */
.leaf-fall{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.leaf-fall i{
  position:absolute; top:-8%; display:block; width:18px; height:7px; border-radius:60% 12% 60% 12%;
  background:var(--olive); opacity:0; transform-origin:center;
  animation:leafDrift linear infinite;
}
.leaf-fall i:nth-child(1){ left:12%; animation-duration:19s; animation-delay:0s;   background:var(--olive-light); }
.leaf-fall i:nth-child(2){ left:31%; animation-duration:24s; animation-delay:-6s;  width:14px; height:6px; }
.leaf-fall i:nth-child(3){ left:54%; animation-duration:21s; animation-delay:-12s; background:var(--olive-deep); }
.leaf-fall i:nth-child(4){ left:73%; animation-duration:27s; animation-delay:-3s;  width:16px; height:6px; background:var(--olive-light); }
.leaf-fall i:nth-child(5){ left:88%; animation-duration:23s; animation-delay:-16s; width:13px; height:5px; }
@keyframes leafDrift{
  0%   { opacity:0;   transform:translate3d(0,0,0) rotate(0deg); }
  8%   { opacity:.5; }
  50%  { transform:translate3d(-46px,52vh,0) rotate(220deg); }
  85%  { opacity:.42; }
  100% { opacity:0;   transform:translate3d(28px,108vh,0) rotate(430deg); }
}
@media (prefers-reduced-motion: reduce){ .leaf-fall{ display:none; } }
@media (max-width:760px){ .leaf-fall i:nth-child(n+4){ display:none; } }

/* ===== 記事ページ ===== */
.article-head{ max-width:74ch; margin:0 auto; }
.article-meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.article-meta .date{ font-size:.84rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.article-meta .tag{ font-size:.7rem; letter-spacing:.08em; padding:4px 12px; border-radius:999px; background:var(--sea-pale); color:var(--navy); font-weight:700; }
.article-head h1{ font-size:clamp(1.6rem,3.2vw,2.35rem); }

.article-body{ max-width:74ch; margin:clamp(28px,4vw,44px) auto 0; font-size:1rem; line-height:2.05; word-break:auto-phrase; line-break:strict; }
.article-body > * + *{ margin-top:1.25em; }
.article-body h2{ font-size:1.32rem; margin-top:2.4em; padding-bottom:.4em; border-bottom:1px solid var(--line); }
.article-body h3{ font-size:1.12rem; margin-top:2em; color:var(--olive-deep); }
.article-body h4{ font-size:1rem; margin-top:1.8em; }
.article-body p{ color:var(--ink); }
.article-body a{ color:var(--navy); text-underline-offset:3px; }
.article-body a:hover{ color:var(--olive-deep); }
.article-body ul, .article-body ol{ padding-left:1.4em; display:flex; flex-direction:column; gap:.5em; }
.article-body li{ color:var(--ink); }
.article-body img{ width:100%; height:auto; border-radius:4px; box-shadow:var(--shadow); margin-top:1.6em; }
.article-body blockquote{ margin:1.6em 0; padding:16px 22px; border-left:3px solid var(--olive); background:var(--paper-raise); font-size:.94rem; color:var(--ink-soft); }
.article-body blockquote p{ color:inherit; }
.article-body strong{ font-weight:700; }
.article-body table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.article-body th, .article-body td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.article-body th{ background:var(--paper-raise); font-weight:700; }
.article-table-wrap{ overflow-x:auto; }
.article-body hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }

.article-back{ max-width:74ch; margin:clamp(36px,5vw,56px) auto 0; }

/* ===== 変換ツール ===== */
.conv-wrap{ max-width:960px; margin:0 auto; }
.dropzone{ border:2px dashed var(--line-strong); border-radius:6px; padding:clamp(34px,6vw,64px) 24px; text-align:center; background:var(--card); transition:border-color .25s ease, background .25s ease; cursor:pointer; }
.dropzone:hover, .dropzone.over{ border-color:var(--olive); background:var(--olive-pale); }
.dropzone .dz-ic{ font-size:2rem; }
.dropzone h3{ font-size:1.1rem; margin-top:10px; }
.dropzone p{ font-size:.85rem; color:var(--ink-soft); margin-top:8px; }
.conv-fields{ display:grid; grid-template-columns:170px 170px 1fr; gap:12px; margin-top:22px; }
@media (max-width:700px){ .conv-fields{ grid-template-columns:1fr; } }
.conv-fields label{ display:flex; flex-direction:column; gap:6px; font-size:.76rem; font-weight:700; color:var(--ink-soft); letter-spacing:.06em; }
.conv-fields input{ font-family:var(--sans); font-size:.95rem; padding:11px 13px; border:1px solid var(--line-strong); border-radius:3px; background:var(--card); color:var(--ink); }
.conv-fields input:focus{ outline:2px solid var(--olive); outline-offset:1px; }
.conv-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; align-items:center; }
.conv-snippet{ margin-top:26px; }
.conv-snippet pre{ background:var(--sea-deep); color:#dbe9f5; padding:18px 20px; border-radius:4px; overflow-x:auto; font-size:.82rem; line-height:1.7; margin-top:10px; }
.conv-preview{ margin-top:26px; border:1px solid var(--line); border-radius:6px; padding:clamp(20px,3vw,36px); background:var(--card); }
.conv-note{ font-size:.84rem; color:var(--ink-soft); margin-top:8px; }
.conv-msg{ margin-top:14px; font-size:.88rem; padding:12px 16px; border-radius:3px; display:none; }
.conv-msg.err{ display:block; background:#fdeaea; color:#8a2020; border:1px solid #e6b3b3; }
.conv-msg.ok{ display:block; background:var(--olive-pale); color:var(--olive-deep); border:1px solid var(--olive); }
.hidden{ display:none !important; }


/* ============================================================
   DESIGN REFINEMENT LAYER
   （デザイン調整のみ。文章・内容は一切変更していません）
   ============================================================ */

/* ---- 1. 角丸と奥行きのトークン ---- */
:root{
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --e1:0 1px 2px rgba(14,67,114,.05), 0 3px 10px -3px rgba(14,67,114,.10);
  --e2:0 2px 5px rgba(14,67,114,.06), 0 16px 34px -14px rgba(14,67,114,.20);
  --e3:0 5px 12px rgba(14,67,114,.08), 0 34px 64px -26px rgba(14,67,114,.34);
  --edge:color-mix(in srgb, var(--line) 62%, transparent);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --e1:0 1px 2px rgba(0,0,0,.34), 0 3px 12px -3px rgba(0,0,0,.46);
  --e2:0 2px 6px rgba(0,0,0,.40), 0 18px 38px -14px rgba(0,0,0,.62);
  --e3:0 6px 14px rgba(0,0,0,.46), 0 36px 70px -26px rgba(0,0,0,.76);
} }
:root[data-theme="dark"]{
  --e1:0 1px 2px rgba(0,0,0,.34), 0 3px 12px -3px rgba(0,0,0,.46);
  --e2:0 2px 6px rgba(0,0,0,.40), 0 18px 38px -14px rgba(0,0,0,.62);
  --e3:0 6px 14px rgba(0,0,0,.46), 0 36px 70px -26px rgba(0,0,0,.76);
}

/* ---- 2. 文字組みの微調整 ---- */
h1,h2,h3,h4{ letter-spacing:.012em; }
.hero h1, .page-head-band h1, .quote-band h2{ letter-spacing:.005em; line-height:1.38; }
.section-head h2{ line-height:1.42; }
.eyebrow{ opacity:.94; }

/* ---- 3. ボタン：ピル型＋やわらかい影 ---- */
.btn{ border-radius:var(--r-pill); padding:14px 30px; letter-spacing:.045em;
      transition:transform .22s cubic-bezier(.2,.8,.2,1), background .24s ease, color .24s ease, border-color .24s ease, box-shadow .28s ease; }
.btn-primary{ box-shadow:0 6px 18px -8px rgba(79,99,41,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(79,99,41,.62); }
.btn-ghost{ background:color-mix(in srgb, var(--card) 70%, transparent); border-color:var(--line-strong); backdrop-filter:blur(4px); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--olive-deep); box-shadow:var(--e2); }
.contact-form-btn{ margin-top:30px; }

/* ---- 4. カード全般：角丸＋段階的な影 ---- */
.gate, .benefit, .step3, .eco-card, .ask, .panel-card, .pager a{
  border-radius:var(--r-md);
  border-color:var(--edge);
  box-shadow:var(--e1);
  transition:transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease, border-color .34s ease;
}
.gate:hover, .benefit:hover, .step3:hover, .eco-card:hover, .ask:hover{
  transform:translateY(-7px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--olive) 40%, var(--edge));
}
.gate, .benefit{ overflow:hidden; }
.gate::before, .benefit::before{ width:4px; border-radius:var(--r-pill); }

.panel-card{ border-left-width:5px; border-radius:var(--r-md); }
.step3{ border-radius:var(--r-md); }
.steps3{ gap:0; }
.eco-card{ border-top-width:4px; }


/* ---- 4b. 残りのカード群も同じ質感にそろえる ---- */
.body-card, .phase-card, .qs, .valley, .layers, .valley-conclusion{
  border-radius:var(--r-md);
}
.body-card, .phase-card, .qs{
  border-color:var(--edge); box-shadow:var(--e1);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.body-card:hover, .phase-card:hover, .qs:hover{
  transform:translateY(-6px); box-shadow:var(--e3);
}
.qs{ border-left-width:4px; }
.phase-card{ border-top-width:5px; }
.valley{ overflow:hidden; box-shadow:var(--e1); border-color:var(--edge); }
.layers{ overflow:hidden; box-shadow:var(--e2); }
.layer{ border-color:transparent; }

/* ---- 5. グリッド型のセル群（1px罫線を角丸パネルへ） ---- */
.trivia-strip, .stat-grid{
  border-radius:var(--r-md); overflow:hidden;
  border-color:var(--edge); box-shadow:var(--e1);
}

/* ---- 6. タグ・チップ：オリーブ系のピルに統一 ---- */
.news-item .tag{
  border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--olive) 34%, transparent);
  background:color-mix(in srgb, var(--olive-pale) 62%, transparent);
  color:var(--olive-deep);
  font-weight:700; padding:5px 13px;
}
/* news.js に tag が無いときの空ボックスを出さない */
.news-item .tag:empty, .article-meta .tag:empty{ display:none; }
.init .sub span{ border-color:color-mix(in srgb, var(--navy) 22%, transparent); }

/* ---- 7. お知らせ一覧：行全体をやわらかく反応させる ---- */
.news-list{ gap:2px; }
.news-item{
  padding:20px 18px; border-top:none; border-radius:var(--r-sm);
  transition:background .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  position:relative;
}
.news-item::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:var(--line);
}
.news-list > :first-child::before{ display:none; }
.news-list > :last-child{ border-bottom:none; }
a.news-item:hover{
  padding-left:18px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow:var(--e2); transform:translateY(-2px);
}
a.news-item:hover::before, a.news-item:hover + .news-item::before{ opacity:0; }

/* ---- 8. ページ送り ---- */
.pager a{ padding:26px 28px; box-shadow:var(--e1); }
.pager a:hover{ transform:translateY(-5px); box-shadow:var(--e2); border-color:color-mix(in srgb, var(--olive) 50%, var(--edge)); }

/* ---- 9. 写真：角丸を大きめに ---- */
.photo-band, .photo-split .ps-img, .photo-plain img{ border-radius:var(--r-lg); }
.photo-band, .photo-split .ps-img{ box-shadow:var(--e2); }
.article-body img{ border-radius:var(--r-md); box-shadow:var(--e2); }

/* ---- 10. 見出し帯・引用帯の質感 ---- */
.page-head-band{
  background:
    radial-gradient(760px 300px at 78% -10%, color-mix(in srgb, var(--olive-pale) 52%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--sea-pale) 62%,transparent), transparent);
  border-bottom-color:var(--edge);
}
.quote-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 320px at 20% 0%, rgba(195,224,138,.16), transparent 68%);
}

/* ---- 11. 連絡先パネル・フォーム ---- */
.contact-panel{ border-radius:var(--r-lg); box-shadow:var(--e2); }
.contact-facts dd{ line-height:1.85; }

/* ---- 12. タブ・小さなUI ---- */
.tab-btn{ box-shadow:var(--e1); }
.tab-btn:hover{ box-shadow:var(--e2); }
.tab-btn[aria-selected="true"]{ box-shadow:0 12px 26px -12px rgba(10,91,168,.75); }
.back-to-top{ box-shadow:var(--e2); }
.back-to-top:hover{ transform:translateY(-3px); }

/* ---- 13. 記事本文 ---- */
.article-body blockquote{ border-radius:var(--r-sm); border-left-width:4px; }
.article-body table{ border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--e1); }
.article-body th, .article-body td{ border-color:var(--edge); }

/* ---- 14. フォーカスリング（キーボード操作時） ---- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--olive); outline-offset:3px; border-radius:var(--r-xs);
}

/* ---- 15. スクロールバー ---- */
@supports (scrollbar-color: auto){
  html{ scrollbar-color:color-mix(in srgb, var(--olive) 55%, transparent) transparent; scrollbar-width:thin; }
}

/* ---- 16. 動きを減らす設定を尊重 ---- */
@media (prefers-reduced-motion: reduce){
  .btn:hover, .gate:hover, .benefit:hover, .step3:hover, .eco-card:hover,
  .ask:hover, .pager a:hover, a.news-item:hover, .back-to-top:hover{ transform:none; }
}


/* ============================================================
   MOTION & ATMOSPHERE LAYER
   （動きと質感のみ。文章・内容は一切変更していません）
   ============================================================ */

/* ---- M0. アニメーション可能なカスタムプロパティ ---- */
@property --pz{ syntax:"<number>"; inherits:false; initial-value:1.06; }
@property --spot{ syntax:"<number>"; inherits:false; initial-value:0; }

/* ---- M1. 画面全体の環境光（ゆっくり漂う） ---- */
body::before{
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vw 34vw at 12% 18%, color-mix(in srgb, var(--olive) 16%, transparent), transparent 62%),
    radial-gradient(34vw 30vw at 88% 32%, color-mix(in srgb, var(--navy) 13%, transparent), transparent 64%),
    radial-gradient(30vw 28vw at 50% 88%, color-mix(in srgb, var(--olive-light) 15%, transparent), transparent 66%);
  opacity:.55; filter:blur(10px);
  animation:ambientDrift 34s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(1.5%,-1.8%,0) scale(1.06); }
  100%{ transform:translate3d(-1.6%,1.4%,0) scale(1.03); }
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{ opacity:.4; } }
:root[data-theme="dark"] body::before{ opacity:.4; }

/* ---- M2. 微細なグレイン（紙のような質感） ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::after{ opacity:.05; } }
:root[data-theme="dark"] body::after{ opacity:.05; }

/* ---- M3. カードのスポットライト追従 ---- */
.gate, .benefit, .body-card, .eco-card, .phase-card, .qs, .step3, .ask, .pager a, .trivia-card{
  background-repeat:no-repeat;
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),
                   color-mix(in srgb, var(--olive) calc(var(--spot,0) * 20%), transparent), transparent 68%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease,
             border-color .34s ease, --spot .45s ease, background-color .3s ease;
}
.gate:hover, .benefit:hover, .body-card:hover, .eco-card:hover,
.phase-card:hover, .qs:hover, .step3:hover, .ask:hover, .pager a:hover, .trivia-card:hover{ --spot:1; }
.step3.s-olive, .phase-card:nth-child(3){
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),
                   rgba(255,255,255,calc(var(--spot,0) * .14)), transparent 68%);
}

/* ---- M4. 写真の視差＋ゆるやかなズーム ---- */
.photo-band img, .photo-split .ps-img img{
  transform:translate3d(0, var(--par,0px), 0) scale(var(--pz));
  transition:--pz 1.2s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.photo-band:hover img, .photo-split .ps-img:hover img{ --pz:1.13; }

/* ---- M5. 見出しの下方向リビール ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.no-js) .section-head.reveal h2{
    clip-path:inset(0 -12% 100% -12%);
    transition:clip-path 1.05s cubic-bezier(.22,.85,.25,1) .06s;
  }
  html:not(.no-js) .section-head.reveal.in h2{ clip-path:inset(-18% -12% -18% -12%); }
  html:not(.no-js) .section-head.reveal.in-fast h2{ transition:none; }
}
.no-js .section-head h2{ clip-path:none !important; }

/* ---- M6. スクロール進捗バーに光を ---- */
#scrollProgress{
  height:3px;
  background:linear-gradient(90deg, var(--olive) 0%, var(--olive-light) 42%, var(--navy) 100%);
  box-shadow:0 0 12px -1px color-mix(in srgb, var(--olive) 70%, transparent);
}

/* ---- M7. トップへ戻るボタンに進捗リング ---- */
.back-to-top{ position:fixed; }
.back-to-top::before{
  content:""; position:absolute; inset:-5px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--olive-light) calc(var(--p,0) * 1%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity:.9;
}

/* ---- M8. 舞い落ちるオリーブの葉（装飾・読み上げ対象外） ---- */
.petals{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.petals i{
  position:absolute; top:-8%; display:block; width:17px; height:10px;
  border-radius:0 100% 0 100%;
  background:var(--olive); opacity:0; transform-origin:center;
  animation:petalFall linear infinite;
}
.petals i:nth-child(even){ background:var(--olive-light); width:13px; height:8px; }
.petals i:nth-child(3n){ background:var(--olive-deep); opacity:0; }
@keyframes petalFall{
  0%   { opacity:0; transform:translate3d(0,-10px,0) rotate(0deg); }
  12%  { opacity:.55; }
  80%  { opacity:.4; }
  100% { opacity:0; transform:translate3d(var(--drift,40px), 116vh, 0) rotate(540deg); }
}
.quote-band .petals i{ background:var(--olive-light); opacity:.5; }

/* ---- M9. カード枠のグラデーション発光 ---- */
.gate::before, .benefit::before{
  background:linear-gradient(180deg, var(--olive-light), var(--olive) 45%, var(--navy));
}

/* ---- M10. ナビゲーションの微調整 ---- */
nav.links a::after{ height:2px; border-radius:2px; box-shadow:0 0 8px -2px var(--olive); }
header.site{ transition:box-shadow .35s ease, background .35s ease; }
header.site.stuck{ box-shadow:0 10px 30px -22px rgba(14,67,114,.55); }

/* ---- M11. ページ遷移をなめらかに ---- */
body{ transition:opacity .3s ease, filter .3s ease, transform .3s ease; }
body.leaving{ opacity:0; filter:blur(3px); transform:translateY(-6px); }

/* ---- M12. ボタンのマグネット挙動を滑らかに ---- */
.btn{ will-change:transform; }

/* ---- M13. 数字カウンタの質感 ---- */
.stat-num, .qs .val{ font-feature-settings:"tnum" 1; }

/* ---- M14. 動きを減らす設定を最優先で尊重 ---- */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  .petals{ display:none !important; }
  .photo-band img, .photo-split .ps-img img{
    transform:none !important; transition:none !important;
  }
  .section-head h2{ clip-path:none !important; }
  body.leaving{ filter:none; transform:none; }
}


/* ---- M15. 登場アニメーションに奥行きとフォーカスを ---- */
@media (prefers-reduced-motion: no-preference){
  html:not(.no-js) .reveal{
    filter:blur(7px);
    transform:translateY(22px) scale(.988);
    transition:opacity .85s cubic-bezier(.2,.75,.25,1),
               transform .85s cubic-bezier(.2,.75,.25,1),
               filter .85s cubic-bezier(.2,.75,.25,1),
               clip-path 1.05s cubic-bezier(.22,.85,.25,1);
  }
  html:not(.no-js) .reveal.in{ filter:blur(0); transform:none; }
  html:not(.no-js) .reveal.in-fast{ filter:none !important; transition:none !important; }

  @keyframes riseIn3d{
    from{ opacity:0; transform:perspective(760px) translateY(26px) rotateX(7deg) scale(.975); filter:blur(6px); }
    to  { opacity:1; transform:none; filter:blur(0); }
  }
  html:not(.no-js) .stagger.in > *{ animation:riseIn3d .78s cubic-bezier(.2,.75,.25,1) forwards; }
  html:not(.no-js) .page-enter > *{ animation:riseIn3d .92s cubic-bezier(.2,.75,.25,1) forwards; }
  html:not(.no-js) .stagger.in-fast > *{ animation-duration:.001ms !important; }
}
.no-js .reveal{ filter:none !important; transform:none !important; }

/* ---- M16. ヒーローのスクロール離脱 ---- */
.hero-grid{ will-change:transform, opacity; }
html:not(.no-js) .hero-grid{
  opacity:var(--heroFade, 1);
  transform:translate3d(0, var(--heroRise, 0px), 0) scale(var(--heroZoom, 1));
}

/* ---- M17. 見出し帯もスクロールで静かに沈む ---- */
html:not(.no-js) .page-head-band .ph-inner{
  transform:translate3d(0, var(--headRise, 0px), 0);
  opacity:var(--headFade, 1);
}

@media (prefers-reduced-motion: reduce){
  html .hero-grid, html .page-head-band .ph-inner{
    opacity:1 !important; transform:none !important;
  }
  html .reveal{ filter:none !important; }
}


/* ============================================================
   REFINEMENT v3 ― 洗練（配色・書体・構図・写真の質感）
   ============================================================ */

/* ---- R1. 配色：資料のトーンに寄せた深いネイビーと、金の差し色 ---- */
:root{
  --navy:#12467e; --navy-soft:#3f7fb8;
  --gold:#b8952f; --gold-soft:#dcc785; --gold-pale:#f3ecd4;
  --olive:#789c3a; --olive-deep:#4a5f27;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --gold:#d9bd62; --gold-soft:#b89b45; --gold-pale:#2a2617;
} }
:root[data-theme="dark"]{ --gold:#d9bd62; --gold-soft:#b89b45; --gold-pale:#2a2617; }

/* ---- R2. 書体：大きく、軽く、余白をもって ---- */
h1,h2{ font-weight:600; letter-spacing:.01em; }
.hero h1{ font-size:clamp(2.2rem,4.4vw,3.3rem); line-height:1.3; margin-top:22px; }
.page-head-band .ph-inner{ max-width:none; }
.page-head-band h1{ font-size:clamp(1.9rem,3.8vw,2.8rem); line-height:1.32; margin-top:16px; max-width:20em; text-wrap:pretty; }
.page-head-band .ph-lede{ max-width:62ch; }
.eco-grid{ grid-template-columns:repeat(auto-fit, minmax(188px,1fr)); }
.section-head h2{ font-size:clamp(1.65rem,3.25vw,2.35rem); line-height:1.38; margin-top:14px; }
.quote-band h2{ font-weight:600; font-size:clamp(1.9rem,4.2vw,3.15rem); line-height:1.32; }
.hero-lede, .ph-lede{ font-size:1.06rem; line-height:2; }
.section-head p{ font-size:1rem; line-height:2; }
.section-head{ margin-bottom:clamp(34px,4.8vw,56px); }
section{ padding:clamp(64px,8.5vw,112px) 0; }

/* 小見出しの「葉」は金に。文字は少し広めのトラッキングで */
.eyebrow{ color:var(--olive-deep); letter-spacing:.24em; font-size:.72rem; }
.eyebrow::before{ background:var(--gold); width:11px; height:11px; }
.quote-band .eyebrow{ color:var(--gold-soft); }
.quote-band .eyebrow::before{ background:var(--gold-soft); }
.contact-panel .eyebrow, .contact-panel .eyebrow::before{ color:var(--gold-soft); background:var(--gold-soft); }
.contact-panel .eyebrow{ background:none; }

/* ---- R3. ヘッダー：静かな存在感 ---- */
.nav-row{ padding-top:18px; padding-bottom:18px; }
nav.links{ gap:26px; font-size:.86rem; }
nav.links a::after{ background:var(--gold); box-shadow:none; }
nav.links a:hover, nav.links a.active{ color:var(--ink); }
.brand-text{ letter-spacing:.06em; }
.brand:hover .brand-text{ background-image:linear-gradient(var(--gold), var(--gold)); }

/* ---- R4. ヒーロー：画面いっぱいの没入 ---- */
.hero{
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(600px, 88vh, 940px);
  padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(80px,9vw,110px);
}
.hero-glow{ background:radial-gradient(640px circle at var(--mx,60%) var(--my,20%), color-mix(in srgb, var(--olive) 22%, transparent), transparent 62%); }
.hero-formal{ border-left-color:var(--gold); color:var(--ink-soft); }
.hero-cta{ margin-top:34px; gap:14px; }
.hero-art{ max-width:560px; }
.scroll-cue{ color:var(--ink-soft); letter-spacing:.3em; }
.scroll-cue i{ background:linear-gradient(var(--gold), transparent); }
.scroll-cue i::after{ background:var(--gold); }

/* ヒーローの新イラスト：軌道リングの回転と節点の呼吸 */
.orbit-spin{ transform-box:fill-box; transform-origin:center; animation:orbitSpin 110s linear infinite; }
.orbit-spin-r{ transform-box:fill-box; transform-origin:center; animation:orbitSpin 160s linear infinite reverse; }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.hub-node{ transform-box:fill-box; transform-origin:center; animation:nodeBreath 6.5s ease-in-out infinite; }
.hub-node:nth-of-type(2){ animation-delay:-1.3s; } .hub-node:nth-of-type(3){ animation-delay:-2.6s; }
.hub-node:nth-of-type(4){ animation-delay:-3.9s; } .hub-node:nth-of-type(5){ animation-delay:-5.2s; }
@keyframes nodeBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.hub-pulse{ transform-box:fill-box; transform-origin:center; animation:hubPulse 4.8s ease-out infinite; }
@keyframes hubPulse{ 0%{ transform:scale(.55); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .orbit-spin, .orbit-spin-r, .hub-node, .hub-pulse{ animation:none; } .hub-pulse{ opacity:0; } }

/* ---- R5. 写真：統一した色調で「ひとつのサイト」の空気に ---- */
.photo-band::before, .photo-split .ps-img::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, color-mix(in srgb, var(--sea-deep) 26%, transparent), transparent 45%, color-mix(in srgb, var(--olive-deep) 14%, transparent));
  mix-blend-mode:multiply;
}
.photo-split .ps-img{ position:relative; }
.photo-band img, .photo-split .ps-img img, .photo-plain img{ filter:saturate(.86) contrast(1.05) brightness(1.02); }
.photo-band figcaption{ z-index:2; padding:64px 30px 22px; background:linear-gradient(transparent, color-mix(in srgb, var(--sea-deep) 88%, transparent)); font-family:var(--serif); font-weight:600; font-size:.95rem; letter-spacing:.02em; }
.photo-band figcaption .cap-note{ font-family:var(--sans); font-weight:400; }
.photo-plain figcaption{ font-family:var(--serif); letter-spacing:.04em; }

/* ---- R6. マニフェスト帯：深いネイビーに金の気配 ---- */
.quote-band{ background:linear-gradient(135deg, var(--sea-deep) 0%, var(--navy) 70%, #1b5a9a 100%); padding:clamp(72px,9vw,120px) clamp(20px,4vw,56px); }
.quote-band .orb{ background:var(--gold-soft); opacity:.09; }
.quote-band .sub{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.04em; margin-top:22px; }

/* ---- R7. 連絡先パネル ---- */
.contact-panel{ background:linear-gradient(140deg, var(--sea-deep), #0d3b66 100%); }
.contact-facts dt{ color:var(--gold-soft); opacity:.9; }

/* ---- R8. フッター：締めの帯 ---- */
footer{
  background:var(--sea-deep); color:#c9d8e6; border-top:none; margin-top:clamp(24px,4vw,48px);
  padding:clamp(44px,6vw,64px) clamp(20px,4vw,56px) clamp(36px,5vw,48px);
  position:relative;
}
footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--olive) 70%, transparent); opacity:.8; }
footer .fnav a{ color:#dbe6f0; }
footer .fnav a:hover{ color:var(--gold-soft); }
footer .f-note{ opacity:.6; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) footer{ background:#061523; } }
:root[data-theme="dark"] footer{ background:#061523; }
.pager{ padding-top:clamp(18px,2.5vw,28px); padding-bottom:clamp(20px,3vw,32px); }

/* ---- R9. 細部：数字・引用・タブ・区切り ---- */
.stat-num, .qs .val{ font-weight:700; }
.stat-cell:nth-child(2) .stat-num{ color:var(--gold); }
.article-body blockquote{ border-left-color:var(--gold); }
.benefit .bn, .init-num{ -webkit-text-stroke-color:var(--gold); color:var(--gold-pale); }
.init:hover .init-num{ -webkit-text-stroke:1.5px var(--navy); }
section:not(:last-of-type)::after{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, var(--line-strong)) 30%, var(--line-strong) 70%, transparent); }
.marquee{ background:color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter:blur(6px); }
.marquee-track span{ font-size:.82rem; letter-spacing:.04em; }
.marquee-track span::after{ color:var(--gold); }
.page-head-band{ padding-top:clamp(56px,7.5vw,96px); padding-bottom:clamp(40px,5vw,60px); }
.ph-deco{ opacity:.28; }

/* ---- R10. カードのラベル色を金／ネイビーで整理 ---- */
.step3 .lbl, .gate .go, .body-card .k, .qs .yr, .phase-card .pn{ letter-spacing:.16em; }
.gate .go{ color:var(--olive-deep); }
.step3.s-olive .lbl{ color:var(--gold-soft); }


/* ============================================================
   REFINEMENT v4 ― 読みやすさ（行幅）と、ワクワクする色・光
   ============================================================ */

/* ---- V1. 行幅：早すぎる折り返しをなくす（1行およそ38〜42字） ---- */
:root{ --ink-soft:#43597a; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink-soft:#a9c1d6; } }
:root[data-theme="dark"]{ --ink-soft:#a9c1d6; }

.section-head{ max-width:min(100%, 920px); }
.section-head h2{ max-width:22em; text-wrap:pretty; }
.section-head p{ max-width:40em; }
.page-head-band .ph-lede{ max-width:40em; }
.hero-lede{ max-width:34em; }
.init p{ max-width:44em; }
.contact-panel .note{ max-width:40em; }
.photo-split p{ max-width:40em; }
.article-body{ max-width:42em; }

/* ---- V2. 数値カード：数字と単位を割らない・大きく ---- */
.qs{ padding:26px 22px 24px; }
.qs .val{ font-size:1.42rem; line-height:1.35; letter-spacing:.005em; }
.qs .val .v-l{ display:block; font-size:.86rem; font-family:var(--sans); font-weight:700; color:var(--ink-soft); letter-spacing:.06em; margin-bottom:6px; }
.qs .val .v-n{ white-space:nowrap; font-size:1.85rem; font-weight:800;
  background:linear-gradient(100deg, var(--navy), #2f7fc0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qs.warm .val .v-n{ background:linear-gradient(100deg, var(--olive-deep), var(--olive)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qs .lbl{ margin-top:10px; line-height:1.8; }
.stat-num{ background:linear-gradient(100deg, var(--navy), #2f7fc0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-cell:nth-child(2) .stat-num{ background:linear-gradient(100deg, var(--gold), #d9b552); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-cell:nth-child(3) .stat-num{ background:linear-gradient(100deg, var(--olive-deep), var(--olive)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- V3. サブページの見出し帯にも、ゆらぐ光を ---- */
.page-head-band::before, .page-head-band::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(48px); opacity:.55; z-index:0;
}
.page-head-band::before{ width:46vw; height:46vw; max-width:620px; max-height:620px; left:-12vw; top:-30vw; background:color-mix(in srgb, var(--olive-light) 55%, transparent); animation:aurA 21s ease-in-out infinite; }
.page-head-band::after{ width:40vw; height:40vw; max-width:520px; max-height:520px; right:-8vw; bottom:-28vw; background:color-mix(in srgb, var(--navy-soft) 38%, transparent); animation:aurB 25s ease-in-out infinite; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .page-head-band::before, :root:not([data-theme="light"]) .page-head-band::after{ opacity:.28; } }
:root[data-theme="dark"] .page-head-band::before, :root[data-theme="dark"] .page-head-band::after{ opacity:.28; }
@media (prefers-reduced-motion: reduce){ .page-head-band::before, .page-head-band::after{ animation:none; } }

/* ---- V4. 入口カード：色で区別し、大きな番号を透かしに ---- */
.gate{ counter-increment:gate; }
.gate-grid{ counter-reset:gate; }
.gate .g-ic{ width:50px; height:50px; border-radius:14px; }
.gate .g-ic .ico{ width:24px; height:24px; }
.gate:nth-child(1) .g-ic{ background:linear-gradient(135deg, var(--olive-pale), #d4e7b0); color:var(--olive-deep); }
.gate:nth-child(2) .g-ic{ background:linear-gradient(135deg, var(--sea-pale), #c3def4); color:var(--navy); }
.gate:nth-child(3) .g-ic{ background:linear-gradient(135deg, var(--gold-pale), #ecdca0); color:#7a6218; }
.gate:nth-child(4) .g-ic{ background:linear-gradient(135deg, #e9e4f5, #d6cdee); color:#4d3f86; }
.gate:nth-child(5) .g-ic{ background:linear-gradient(135deg, #e3f3ef, #c4e6dc); color:#1f6b57; }
.gate:nth-child(6) .g-ic{ background:linear-gradient(135deg, #fbe7dc, #f3cdb9); color:#9a4a22; }
.gate::after{
  content:counter(gate, decimal-leading-zero); -webkit-mask:none; mask:none; background:none;
  width:auto; height:auto; top:auto; right:20px; bottom:12px;
  font-family:var(--serif); font-weight:800; font-size:3.6rem; line-height:1; color:var(--ink);
  opacity:.055; letter-spacing:-.02em; transform:none;
}
.gate:hover::after{ transform:none; opacity:.1; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gate:nth-child(n) .g-ic{ background:color-mix(in srgb, var(--card) 70%, var(--sea-pale)); color:var(--olive-light); } }
:root[data-theme="dark"] .gate:nth-child(n) .g-ic{ background:color-mix(in srgb, var(--card) 70%, var(--sea-pale)); color:var(--olive-light); }

/* ---- V5. ボタン・帯・小物に光を ---- */
.btn-primary{ background:linear-gradient(135deg, var(--olive-deep) 0%, #5f7d30 55%, var(--olive) 100%); }
.btn-primary:hover{ background:linear-gradient(135deg, #5a742e 0%, var(--olive) 60%, #8fb44a 100%); }
.tab-btn[aria-selected="true"]{ background:linear-gradient(135deg, var(--sea-deep), var(--navy)); border-color:transparent; }
.step3.s-olive{ background:linear-gradient(150deg, var(--navy), #1d63a8); border-color:transparent; }
.phase-card:nth-child(3){ background:linear-gradient(150deg, var(--sea-deep), #0f3f6c); }
.eyebrow::before{ box-shadow:0 0 10px -2px var(--gold); }
.news-item .date{ color:var(--olive-deep); font-weight:700; letter-spacing:.04em; }
.news-item::after{
  content:""; position:absolute; left:6px; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-50%); opacity:.85;
}

/* ---- V6. フッターの透かし ---- */
footer::after{
  content:"OLIVE"; position:absolute; right:clamp(16px,3vw,40px); bottom:8px;
  font-family:var(--serif); font-weight:800; font-size:clamp(3.2rem,9vw,7.5rem); letter-spacing:.08em;
  color:#fff; opacity:.035; pointer-events:none; line-height:1;
}


/* ---- V7. 職種別倍率のミニバー（岡山のいま） ---- */
.qs-bars .val{ margin-bottom:4px; }
.bars{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bars li{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"l v" "b b"; align-items:center; column-gap:10px; row-gap:5px; font-size:.8rem; }
.bars .bl{ grid-area:l; } .bars .bar{ grid-area:b; } .bars b{ grid-area:v; }
.bars .bl{ color:var(--ink-soft); font-weight:700; white-space:nowrap; letter-spacing:.02em; }
.bars .bar{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--line) 70%, transparent); overflow:hidden; }
.bars .bar i{ display:block; height:100%; width:var(--w,0%); border-radius:999px;
  background:linear-gradient(90deg, var(--olive), var(--olive-light)); transform-origin:left;
  transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s; }
.bars li:nth-child(3) .bar i{ background:linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.bars b{ font-family:var(--serif); font-weight:800; font-size:1.05rem; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bars b small{ font-size:.7em; font-weight:700; margin-left:1px; }
.stagger.in .bars .bar i, .no-js .bars .bar i{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .bars .bar i{ transform:scaleX(1); transition:none; } }

/* ---- V8. ナビ末尾「お問い合わせ」をピル型ボタンに ---- */
nav.links a:last-child{
  padding:9px 18px; border-radius:var(--r-pill); background:var(--sea-deep); color:#eef5fa;
  font-weight:700; transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
}
nav.links a:last-child::after{ display:none; }
nav.links a:last-child:hover{ background:var(--navy); color:#fff; transform:translateY(-1px); box-shadow:0 10px 20px -12px rgba(18,70,126,.6); }
nav.links a:last-child.active{ background:var(--olive-deep); color:#fff; }
@media (max-width:1080px){ nav.links a:last-child{ align-self:flex-start; margin-top:6px; } }

/* ---- V9. 取組リスト・タブ・引用の質感 ---- */
.init{ border-radius:var(--r-sm); padding:28px 18px; transition:transform .28s ease, background .28s ease; }
.init:hover{ background:color-mix(in srgb, var(--card) 70%, transparent); }
.init .sub span{ background:color-mix(in srgb, var(--sea-pale) 80%, transparent); }
.tab-panel.active{ animation-duration:.6s; }
.valley .gap{ background:linear-gradient(160deg, var(--sea-deep), #0f3f6c); }
.valley-conclusion{ background:linear-gradient(120deg, var(--navy), #1d63a8); }
.layer.upper{ background:linear-gradient(120deg, var(--sea-deep), var(--navy)); }
.layer.lower{ background:linear-gradient(120deg, var(--navy-soft), #5a9fd0); }
.contact-form-btn{ box-shadow:0 10px 26px -12px rgba(0,0,0,.55); }


/* ---- V10. メンバー頁のHUB図をヒーローと同じ質感に ---- */
.hub-illustration svg > g > circle{ stroke:var(--olive); stroke-width:1.4; filter:drop-shadow(0 8px 14px rgba(14,67,114,.14)); transition:transform .3s ease; }
.hub-illustration svg > g > text{ fill:var(--ink); font-size:13px; }
.hub-illustration .hub-ico{ stroke:var(--navy); }
.hub-illustration svg > circle[r="52"]{ fill:var(--sea-deep); filter:drop-shadow(0 10px 20px rgba(8,42,77,.35)); }
.hub-illustration svg > circle[r="52"] + circle{ stroke:var(--gold-soft); opacity:.9; }
.hub-illustration .hub-link{ stroke:color-mix(in srgb, var(--olive) 55%, transparent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hub-illustration svg > circle[r="52"]{ fill:var(--navy); } }
:root[data-theme="dark"] .hub-illustration svg > circle[r="52"]{ fill:var(--navy); }

/* ---- V11. 取組の階段図・谷の図に薄いグラデーション ---- */
.section-art svg rect[fill="var(--sea-pale)"], .section-art svg path[fill="var(--sea-pale)"]{ fill:color-mix(in srgb, var(--sea-pale) 80%, var(--olive-pale)); }


/* ---- V12. 「OLIVEとは」冒頭の橋のイラスト（画像版） ---- */
figure.bridge-art{ margin:0 auto clamp(26px,4vw,42px); max-width:940px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e2); position:relative; }
figure.bridge-art img{ display:block; width:100%; height:auto; }
figure.bridge-art::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) figure.bridge-art img{ filter:brightness(.9) saturate(.95); } }
:root[data-theme="dark"] figure.bridge-art img{ filter:brightness(.9) saturate(.95); }


/* ---- V13. 本文の折り返し：文節単位の早い改行をやめ、行を埋める ---- */
p, li, dd, .lbl, .tx, .say, .d, .ph-lede, .hero-lede, .section-head p, .init p,
.step3 p, .gate p, .benefit p, .trivia-card .tx, .eco-card p, .ask p, .body-card p, .phase-card p, .qs .lbl, .panel-card .say, .photo-split p, .contact-panel .note{
  word-break:normal; overflow-wrap:anywhere; line-break:strict; text-wrap:pretty;
}
.section-head p, .page-head-band .ph-lede, .init p, .photo-split p, .contact-panel .note{ max-width:46em; }
.hero-lede{ max-width:36em; }

/* ---- V14. 「4つの物語」：カーソルを合わせると対応するイラストに切り替わる ---- */
.story-stage{ position:relative; aspect-ratio:900/250; max-width:880px; margin:0 auto clamp(26px,4vw,42px); }
.story-art{ position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.985); pointer-events:none;
  transition:opacity .55s cubic-bezier(.2,.75,.25,1), transform .55s cubic-bezier(.2,.75,.25,1); }
.story-art svg{ display:block; width:100%; height:100%; overflow:visible; }
.story-art.is-active{ opacity:1; transform:none; }
/* 切り替わるたびに線を描き直す */
.story-art [pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; }
.story-art.is-active [pathLength]{ animation:drawIn 1.3s cubic-bezier(.4,.1,.2,1) forwards; }
.story-art .fade-late{ opacity:0; transition:opacity .6s ease .55s; }
.story-art.is-active .fade-late{ opacity:1; }
.no-js .story-art:first-child{ opacity:1; transform:none; }
.no-js .story-art [pathLength]{ stroke-dashoffset:0 !important; }
.no-js .story-art .fade-late{ opacity:1; }

.trivia-card{ cursor:pointer; outline:none; position:relative; transition:background .3s ease, box-shadow .3s ease; }
.trivia-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--gold), var(--olive)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.trivia-card.is-active{ background:color-mix(in srgb, var(--olive-pale) 55%, var(--card)); }
.trivia-card.is-active::before{ transform:scaleX(1); }
.trivia-card.is-active .ic{ color:var(--olive-deep); }
.trivia-card:focus-visible{ box-shadow:inset 0 0 0 2px var(--olive); }
@media (prefers-reduced-motion: reduce){
  .story-art{ transition:none; } .story-art [pathLength]{ animation:none !important; stroke-dashoffset:0 !important; } .story-art .fade-late{ transition:none; }
}

.section-head{ max-width:min(100%, 1000px); }
.section-head h2{ max-width:26em; }