/* ===========================================================
   赤ちゃんスマイルコンサート ランディングページ
   =========================================================== */

:root{
  --cream:      #FFF9F4;
  --hero-pink:  #FFD8D1;
  --mint:       #B9EEE3;
  --coral:      #F36B4D;
  --coral-soft: #F58D72;
  --teal:       #37BDB1;
  --teal-deep:  #167D81;
  --purple:     #BCAAF1;
  --yellow:     #FFE376;
  --ink:        #25201F;
  --ink-soft:   #654F4B;
  --white:      #FFFFFF;

  --radius-lg: 1.25rem;
  --radius-md: 1rem;
  --radius-sm: 0.75rem;

  --shadow-hard: 3px 3px 0 var(--ink);
  --shadow-card: 0 12px 30px -14px rgba(37,32,31,.25);

  --font-display: "Fredoka", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); margin: 0; }
p{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 .5rem 0; z-index:200;
}
.skip-link:focus{ left:0; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.icon{ width: 20px; height: 20px; flex-shrink:0; }
.icon-sm{ width: 16px; height: 16px; flex-shrink:0; }

/* ---------- Buttons & Badges ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem; border-radius:999px; border:none;
  padding:.85rem 1.6rem; box-shadow: var(--shadow-hard);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn-dark{ background: var(--ink); color:#fff; }
.btn-yellow{ background: var(--yellow); color: var(--ink); }
.btn-outline{ background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.btn-outline:hover{ transform:none; box-shadow:none; background:#fbf3ec; }
.btn-sm{ padding:.55rem 1.1rem; font-size:.9rem; }
.btn-lg{ padding:1rem 1.9rem; font-size:1.05rem; }
.btn-block{ width:100%; }

.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem; border-radius:999px; font-weight:800; font-size:.85rem;
}
.badge-outline{ background: var(--white); border: 2px dashed var(--ink); color: var(--ink); }
.badge-ico{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; background:var(--yellow); border-radius:999px; color:var(--ink); }
.badge-status{ background:#E6FAF4; color:#1E7670; margin-top:1.4rem; box-shadow:none; }

.eyebrow{ font-family: var(--font-display); font-weight:700; letter-spacing:.18em; font-size:.8rem; margin:0 0 .6rem; }
.eyebrow-teal{ color: var(--teal-deep); }
.eyebrow-dark{ color: var(--ink); opacity:.55; }
.eyebrow-light{ color: rgba(255,255,255,.85); }

.section-title{ font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight:700; margin-bottom: .9rem; }
.section-title .dot{ color: var(--coral); }
.section-title.on-coral{ color:#fff; }
.section-lead{ max-width: 640px; color: var(--ink-soft); font-size:1.02rem; }
.section-lead.on-coral{ color: rgba(255,255,255,.9); max-width:none; }

/* ---------- Decorative shapes ---------- */
.deco{ position:absolute; pointer-events:none; }
.dot-pattern{
  background-image: radial-gradient(rgba(37,32,31,.55) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
}
.hero-dot-1{ left:4%; top:52px; width:78px; height:78px; opacity:.75; }
.hero-dot-2{ right:-8px; top:32px; width:112px; height:112px; opacity:.5; }
.hero-dot-3{ left:14px; bottom:34px; width:88px; height:88px; opacity:.35; }
.info-dot{ right:-10px; top:20px; width:100px; height:100px; opacity:.25; }
.app-dot{ left:-10px; bottom:10px; width:100px; height:100px; opacity:.15; }

.blob{ border-radius:999px; filter: blur(1px); }
.blob-yellow{ background: var(--yellow); }
.blob-mint{ background: var(--mint); }
.hero-blob-1{ width:56px; height:56px; right:9%; top:52px; opacity:.9; }
.hero-blob-2{ width:70px; height:70px; right:2%; top:230px; opacity:.7; }

.shape{ border-radius: 28% 72% 65% 35% / 45% 35% 65% 55%; }
.shape-yellow{ background: var(--yellow); width:64px; height:64px; top:-16px; left:-18px; box-shadow: var(--shadow-hard); border-radius:999px; }
.shape-teal{ background: var(--teal); width:56px; height:56px; top:36%; right:-24px; transform: rotate(20deg); }
.shape-purple{ background: var(--purple); width:46px; height:46px; bottom:-14px; right:12%; transform: rotate(45deg); border-radius: 8px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,249,244,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(37,32,31,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.05rem; }
.brand-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; background:var(--coral);
  color:#fff; font-size:1.1rem;
}
.brand-text b{ color: var(--coral); font-weight:800; }
.brand-text-group{ display:flex; flex-direction:column; line-height:1.2; }
.brand-sponsor{ font-size:.62rem; font-weight:800; color: var(--coral); letter-spacing:.03em; }
.brand-text-group .brand-text{ font-size:.95rem; }

.main-nav{ display:flex; align-items:center; gap:2rem; font-weight:700; font-size:.95rem; }
.main-nav a:hover{ color: var(--coral); }

.header-actions{ display:flex; align-items:center; gap:.75rem; }
.hamburger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:#fff; border-radius:999px; border:none; color: var(--ink);
}
.hamburger svg{ width:22px; height:22px; }

.mobile-nav{
  display:none; flex-direction:column; gap:.2rem; padding: 0 1.5rem 1.2rem;
  background: var(--cream);
}
.mobile-nav a{ padding:.75rem 0; font-weight:700; border-bottom:1px solid rgba(37,32,31,.08); }
.mobile-nav .btn{ margin-top:.9rem; text-align:center; }
.site-header.nav-open .mobile-nav{ display:flex; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background: var(--hero-pink); padding: 3.5rem 0 4.5rem; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:3rem; align-items:center; position:relative; z-index:2;
}
.hero-tagline{ margin: 1.4rem 0 .5rem; font-weight:700; letter-spacing:.35em; font-size:.85rem; color: var(--ink); opacity:.7; }
.hero-title{ font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height:1.16; font-weight:700; }
.hero-title .line{ display:block; white-space: nowrap; }
.hero-title .accent-inline{ color: var(--coral); }
.hero-title .sponsor-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35em .5em;
  font-size: 0.5em; font-weight:800; color: var(--ink); letter-spacing:.04em; margin-bottom:.55em;
  white-space: normal;
}
.sponsor-logo{ height:2.1em; width:auto; display:block; }
.sponsor-role{ color: var(--coral); font-size:.85em; }
.sponsor-sep{ color: var(--ink-soft); font-weight:600; margin:0 .1em; }

.hero-chips{ display:flex; flex-wrap:wrap; gap:.8rem; margin: 1.6rem 0 1rem; }
.chip{
  display:flex; align-items:center; gap:.55rem; background:#fff; border-radius:var(--radius-md);
  padding:.7rem 1.1rem; font-weight:700; box-shadow: var(--shadow-card);
}
.chip-ico.coral{ color: var(--coral); }
.chip-ico.teal{ color: var(--teal); }

.hero-sub{ font-weight:600; color: var(--ink-soft); margin-bottom:1.8rem; }
.hero-cta{ margin-bottom: .8rem; }
.icon-chev{ width:16px; height:16px; }
.hero-note{ font-size:.88rem; color: var(--ink-soft); }

.hero-visual{ display:flex; flex-direction:column; align-items:center; }
.flyer-wrap{ position:relative; max-width: 340px; width:100%; }
.flyer-frame{
  position:relative; background:#fff; border-radius: 1.6rem; padding: .9rem;
  box-shadow: var(--shadow-card), 0 0 0 6px #fff;
  transform: rotate(3deg);
  max-width: 340px;
  border: 3px solid var(--ink);
}
.flyer-frame img{ border-radius: 1.1rem; }
.hero-visual-caption{ margin-top:1.4rem; text-align:center; font-weight:700; color: var(--ink); }

/* ---------- About / Feature cards ---------- */
.about{ padding: 5.5rem 0; text-align:center; }
.about .section-lead{ margin: 0 auto; }

.about-video{ margin: 1.6rem auto 2.2rem; display:flex; flex-direction:column; align-items:center; }
.video-caption{ font-weight:800; font-size:.9rem; color: var(--ink-soft); margin-bottom:.8rem; letter-spacing:.03em; }
.about-video-el{
  width: 100%; max-width: 320px; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--radius-lg); border: 3px solid var(--ink); box-shadow: var(--shadow-card);
  background: #000;
}
.card-grid{
  margin-top: 3rem; display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; text-align:left;
}
.feature-card{
  position:relative; background:#fff; border-radius: var(--radius-lg); padding: 2rem 1.7rem;
  box-shadow: var(--shadow-card); overflow:hidden;
}
.feature-num{
  position:absolute; top:1.1rem; right:1.3rem; font-family: var(--font-display);
  font-size: 2.6rem; font-weight:700; color: rgba(37,32,31,.1);
}
.feature-ico{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius: var(--radius-sm); color:#fff; margin-bottom:1.1rem;
}
.ico-coral{ background: var(--coral-soft); }
.ico-teal{ background: var(--teal); }
.ico-purple{ background: var(--purple); }
.feature-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.feature-card p{ color: var(--ink-soft); font-size:.95rem; }

/* ---------- SEO gallery ---------- */
.seo-gallery{ padding: 5.5rem 0; text-align:center; }
.seo-gallery .section-title, .supporter .section-title{ text-wrap: balance; line-height:1.45; }
.seo-gallery-inner{
  margin: 2.2rem auto 0; max-width: 1080px; cursor:pointer; user-select:none; position:relative;
}
.seo-gallery-inner:focus-visible{ outline: 3px solid var(--coral); outline-offset: 4px; border-radius: var(--radius-lg); }
.seo-page{ display:none; flex-direction:row; align-items:flex-start; gap:1rem; }
.seo-page.active{ display:flex; }
.seo-page img{
  width:100%; height:auto; flex:1 1 0; min-width:0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  display:block; border: 1px solid rgba(37,32,31,.06); transition: opacity .2s ease, transform .15s ease;
}
.seo-gallery-inner:hover .seo-page.active img{ transform: translateY(-2px); }
.seo-gallery-hint{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin-top:1.4rem; font-weight:800; font-size:.9rem; color: var(--teal-deep);
}
.seo-gallery-hint.done{ color: var(--ink-soft); }
.seo-dots{ display:inline-flex; gap:.4rem; }
.seo-dot{ width:7px; height:7px; border-radius:999px; background: rgba(37,32,31,.18); transition: background .2s ease; }
.seo-dot.active{ background: var(--teal-deep); }
.seo-gallery-hint.done .seo-dot.active{ background: var(--ink-soft); }
.seo-article-text{
  max-width: 720px; margin: 2.4rem auto 0; text-align:left;
}
.seo-article-text h3{
  font-size:1.2rem; font-weight:700; color: var(--ink); margin: 2.4rem 0 1rem;
}
.seo-article-text h3:first-child{ margin-top:0; }
.seo-article-text p{
  color: var(--ink-soft); font-size:.98rem; line-height:1.85; margin-bottom:.9rem;
}
.seo-article-text p:last-child{ margin-bottom:0; }

/* ---------- Supporter (京新学園) ---------- */
.supporter{ padding: 5.5rem 0; text-align:center; }
.supporter .section-title{ line-height:1.5; }
.supporter-card{
  max-width: 860px; margin: 2.2rem auto 0; text-align:left; background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 2.2rem 2.4rem;
}
.supporter-card p{ color: var(--ink-soft); font-size:.98rem; line-height:1.95; margin-bottom:1.2rem; }
.supporter-card p:last-child{ margin-bottom:0; }

/* ---------- Info ---------- */
.info{ position:relative; overflow:hidden; background: var(--mint); padding: 5.5rem 0; }
.info-card{
  margin-top: 2.4rem; background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow:hidden;
}
.info-row{
  display:flex; align-items:center; gap:1.1rem; padding: 1.4rem 1.8rem;
  border-bottom: 1px solid rgba(37,32,31,.08);
}
.info-row:last-child{ border-bottom:none; }
.info-ico{ color: #EF6548; width:24px; height:24px; }
.info-label{ display:block; font-size:.82rem; font-weight:700; color: var(--ink-soft); }
.info-value{ display:block; font-size:1.15rem; font-weight:700; }
.info-value small{ display:block; font-size:.8rem; font-weight:600; color: var(--ink-soft); margin-top:.15rem; }

.program-card{
  margin-top: 1.6rem; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 1.9rem 1.9rem 1.7rem;
}
.program-title{
  display:flex; align-items:center; gap:.6rem; font-size:1.2rem; font-weight:700; margin-bottom:1.7rem;
}
.program-title-ico{ color: var(--coral); width:22px; height:22px; }

.timeline{ position:relative; display:flex; flex-direction:column; gap: 1.6rem; }
.timeline-item{ position:relative; display:flex; gap:1.1rem; }
.timeline-item::before{
  content:''; position:absolute; left:1.4rem; top:2.8rem; bottom:-1.6rem; width:2px;
  background: repeating-linear-gradient(to bottom, rgba(37,32,31,.18) 0 6px, transparent 6px 12px);
}
.timeline-item:last-child::before{ display:none; }
.timeline-dot{
  position:relative; z-index:1; flex-shrink:0; width:2.8rem; height:2.8rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: var(--shadow-hard);
}
.timeline-dot .icon{ width:18px; height:18px; }
.timeline-content{ flex:1; padding-top:.3rem; }
.timeline-time{
  display:inline-block; font-family: var(--font-display); font-weight:700; color: var(--coral);
  font-size:1.05rem; margin-bottom:.25rem;
}
.timeline-name{ font-weight:700; font-size:1.03rem; margin-bottom:.15rem; }
.timeline-sub{ font-size:.88rem; color: var(--ink-soft); }

.timeline-item--parts .timeline-content{
  background:#FCF9F5; border-radius: .9rem; padding: .3rem 1.1rem; border: 1px solid #EFE6DC;
}
.part-row{ display:flex; align-items:center; gap:.7rem; padding:.65rem 0; }
.part-row + .part-row{ border-top: 1px dashed rgba(37,32,31,.12); }
.part-num{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem;
  background: var(--mint); color: var(--teal-deep); font-size:.78rem; font-weight:800;
  border-radius:999px; padding:.25rem .3rem;
}
.part-name{ font-weight:700; font-size:.98rem; }

/* ---------- Flyer section ---------- */
.flyer-section{ padding: 5.5rem 0; }
.flyer-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items:center; }
.flyer-thumb{
  cursor:pointer; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card);
  border: 3px solid #fff; outline: 1px solid rgba(37,32,31,.08);
}
.flyer-thumb img{ transition: transform .3s ease; }
.flyer-thumb:hover img{ transform: scale(1.03); }
.link-arrow{ background:none; border:none; padding:0; margin-top:1.2rem; font-weight:800; color: var(--teal-deep); font-size:1rem; }
.link-arrow:hover{ text-decoration: underline; }

/* ---------- Application / Form ---------- */
.application{ position:relative; overflow:hidden; background: var(--coral); padding: 5.5rem 0; text-align:center; }
.application .section-title, .application .badge-status{ position:relative; z-index:2; }
.form-card{
  position:relative; z-index:2; margin: 2.4rem auto 0; max-width: 640px; text-align:left;
  background:#fff; border-radius: 1.8rem; padding: 2.4rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,.35);
}
.step-head{ display:flex; align-items:center; gap:.8rem; margin: 0 0 1.3rem; }
.form-step + .form-step .step-head{ margin-top: 2.2rem; }
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background: var(--ink); color:#fff; font-weight:700; font-family: var(--font-display); font-size:.95rem;
}
.step-head h3{ font-size:1.1rem; }

.field{ margin-bottom: 1.15rem; }
.field label{ display:block; font-weight:700; font-size:.92rem; margin-bottom:.4rem; }
.req{ display:inline-block; background:#FDEDEA; color:#D9503A; font-size:.68rem; font-weight:800; padding:.1rem .45rem; border-radius:.3rem; margin-left:.3rem; vertical-align:middle; }
.opt{ font-size:.78rem; color: var(--ink-soft); font-weight:600; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea{
  width:100%; padding:.75rem .9rem; border-radius: .8rem; border: 2px solid #EAE0D8;
  background: #FCF9F5; font-size:1rem; font-family: inherit; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--coral); background:#fff;
}
.field input:invalid.touched, .field select:invalid.touched{ border-color:#E36B5C; }
.field-note{ font-size:.78rem; color: var(--ink-soft); margin-top:.35rem; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.children-ages{ display:grid; gap: 1rem; margin-top: 1rem; }
.child-block{ background:#FCF9F5; border-radius: .9rem; padding: 1rem 1.1rem; border: 1px solid #EFE6DC; }
.child-block > span{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.5rem; color: var(--ink-soft); }

.consent{ display:flex; align-items:flex-start; gap:.6rem; margin: 1.6rem 0 1.4rem; font-size:.92rem; font-weight:600; cursor:pointer; }
.consent input{ margin-top:.2rem; width:18px; height:18px; accent-color: var(--coral); flex-shrink:0; }
.consent a{ color: var(--teal-deep); font-weight:800; text-decoration: underline; }

.form-msg{ margin-bottom:1rem; padding:.8rem 1rem; border-radius:.7rem; background:#FDEDEA; color:#B23B26; font-weight:700; font-size:.9rem; }

.confirm-title{ font-size:1.2rem; margin-bottom:1.2rem; }
.confirm-list{ display:grid; gap: .9rem; margin: 0 0 1.6rem; }
.confirm-list div{ padding-bottom:.8rem; border-bottom:1px dashed #EAE0D8; }
.confirm-list dt{ font-size:.78rem; font-weight:700; color: var(--ink-soft); margin-bottom:.2rem; }
.confirm-list dd{ margin:0; font-weight:700; white-space: pre-line; }
.confirm-actions{ display:grid; grid-template-columns: 1fr 1.4fr; gap: .9rem; }

.done-view{ text-align:center; padding: 1.5rem 0; }
.done-ico{
  display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:999px; background:#E6FAF4; color:#1E7670; font-size:2rem; font-weight:800; margin-bottom:1.2rem;
}
.done-view h3{ font-size:1.25rem; margin-bottom:.7rem; }
.done-view p{ color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq{ padding: 5.5rem 0; }
.accordion{ margin-top: 2.2rem; display:grid; gap: .9rem; max-width: 760px; }
.accordion-item{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow:hidden; }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; padding: 1.15rem 1.4rem; font-weight:700; font-size:1rem; text-align:left; color: var(--ink);
}
.accordion-chev{ color: var(--ink-soft); transition: transform .2s ease; }
.accordion-item.open .accordion-chev{ transform: rotate(180deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.accordion-panel p{ padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color:#fff; padding: 3.5rem 0 2.5rem; }
.footer-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.footer-brand p{ margin-top:.6rem; color: rgba(255,255,255,.75); font-size:.92rem; }
.footer-links{ display:flex; gap:1.6rem; font-size:.88rem; font-weight:700; }
.footer-links a:hover{ color: var(--yellow); }
.footer-org{ font-size:.8rem; color: rgba(255,255,255,.55); }
.footer-sponsor{
  display:inline-flex; align-items:center; background:#fff; border-radius:999px; padding:.55rem 1.3rem; margin-top:.4rem;
}
.footer-sponsor-logo{ height:44px; width:auto; display:block; }
.footer-cta{ margin-top:.8rem; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background: rgba(20,16,15,.9); z-index: 300;
  display:flex; align-items:center; justify-content:center; padding: 2rem;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-height: 90vh; border-radius: 1rem; }
.lightbox-close{
  position:absolute; top:1.2rem; right:1.4rem; width:44px; height:44px; border-radius:999px;
  background:#fff; border:none; font-size:1.6rem; line-height:1; color: var(--ink);
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual{ order:-1; }
  .card-grid{ grid-template-columns: 1fr; }
  .flyer-grid{ grid-template-columns: 1fr; text-align:center; }
  .flyer-copy .section-lead{ margin:0 auto; }
  .flyer-copy .link-arrow{ display:inline-block; }
}

@media (max-width: 760px){
  .main-nav{ display:none; }
  .header-actions .btn{ display:none; }
  .hamburger{ display:inline-flex; }
  .confirm-actions{ grid-template-columns: 1fr; }
  .form-card{ padding: 1.6rem; }
  .seo-page{ flex-direction:column; }
  .supporter-card{ padding: 1.6rem 1.4rem; }
}

@media (max-width: 520px){
  .wrap{ padding: 0 1.1rem; }
  .hero{ padding: 2.4rem 0 3rem; }
  .hero-title{ font-size: clamp(1.4rem, 6.8vw, 1.9rem); }
  .about, .info, .flyer-section, .application, .faq{ padding: 3.6rem 0; }
}