/* ========================================================================
   WESTVIEW SCIENCE OLYMPIAD — Apple / YC editorial
   Type: Satoshi (→ SF Pro fallback). Light base, black drama, gold accent.
   ======================================================================== */

:root {
  --white:  #ffffff;
  --bg:     #fbfbfd;          /* apple off-white */
  --bg-2:   #f4f4f6;
  --ink:    #1d1d1f;          /* apple near-black */
  --gray:   #6e6e73;          /* apple secondary */
  --gray-2: #86868b;
  --line:   #e3e3e6;
  --black:  #0a0a0b;
  --gold:   #B98A23;          /* AA gold on light */
  --gold-2: #E8B73A;          /* gold on dark */
  --gold-tint: #faf4e4;

  --maxw: 1120px;
  --r: 28px;
  --r-sm: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *{ animation:none!important; transition-duration:.001ms!important } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 17px;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,canvas { display:block; max-width:100% }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: fixed; left: 50%; top: -80px; transform: translateX(-50%); z-index: 200; background: var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 12px 12px; transition: top .25s var(--ease); }
.skip-link:focus { top: 0; }

/* gold scroll progress */
.progress { position: fixed; top:0; left:0; right:0; height:2px; z-index:110; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform: scaleX(0); transform-origin: left; pointer-events:none; }

main, .footer { position: relative; z-index: 1; }
.hero, .statement, .cta { background: var(--bg); }
.showcase { position: relative; }
.showcase::before { content:""; position:absolute; inset:0; background: rgba(7,7,9,.82); z-index:-1; }
.bento-wrap, .events, .results, .team, .faq { background: var(--bg); }

.container { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: 28px; }
.container--narrow { max-width: 760px; }
.section { padding: clamp(80px, 12vw, 150px) 0; }

/* ============================== TYPE =================================== */
.eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--gold); text-transform: none; }
.eyebrow--light { color: var(--gold-2); }
.head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head__title { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; margin-top: .8rem; }

/* ============================= BUTTONS ================================= */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem; border-radius:100px; padding:.8rem 1.5rem; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); }
.btn svg { width:17px; height:17px; transition: transform .25s var(--ease); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.06rem; }
.btn--dark { background: var(--ink); color:#fff; }
.btn--dark:hover { background:#000; transform: translateY(-2px); }
.btn--ink { background:#fff; color: var(--ink); border:1px solid rgba(0,0,0,.12); }
.btn--ink:hover { transform: translateY(-2px); }
.btn--text { color: var(--gold); padding-left:.4rem; padding-right:.4rem; }
.btn--text:hover svg { transform: translateX(4px); }

/* =============================== NAV ================================== */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; border-bottom: 1px solid transparent; }
.nav[data-state="scrolled"] { background: rgba(251,251,253,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--line); }
.nav__inner { max-width: var(--maxw); margin-inline:auto; padding: 0 28px; height: 60px; display:flex; align-items:center; gap: 1.5rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark { width: 30px; height:30px; color: var(--ink); }
.brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing:-.02em; }
.brand__name span { font-weight: 500; color: var(--gray); }
.nav__links { display:flex; gap: 2rem; margin-left: auto; }
.nav__links a { position:relative; font-size:.95rem; font-weight:500; color: var(--ink); opacity:.85; transition: opacity .2s, color .2s; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; border-radius:2px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease); }
.nav__links a:hover { opacity:1; color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { background: var(--ink); color:#fff; padding:.5rem 1.1rem; border-radius:100px; font-size:.92rem; font-weight:600; transition: transform .25s var(--ease), background .25s; }
.nav__cta:hover { background:#000; transform: translateY(-1px); }
.nav__toggle { display:none; flex-direction:column; gap:6px; margin-left:auto; padding:10px; }
.nav__toggle span { width:24px; height:2px; background: var(--ink); border-radius:2px; transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(4px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform: translateY(-4px) rotate(-45deg) }
.mobile-menu[hidden]{ display:none }
.mobile-menu { display:flex; flex-direction:column; gap:.2rem; padding: .8rem 28px 1.6rem; background: rgba(251,251,253,.96); backdrop-filter: blur(20px); border-bottom:1px solid var(--line); }
.mobile-menu a:not(.btn){ padding:.9rem .2rem; font-size:1.1rem; font-weight:500; border-bottom:1px solid var(--line) }
.mobile-menu .btn { margin-top: 1rem; justify-content:center }

/* =============================== HERO ================================= */
.hero { padding: clamp(120px, 18vh, 200px) 0 0; text-align:center; position: relative; overflow: hidden; }
.hero::before { content:""; position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:120vw; height:80vh; background: radial-gradient(60% 60% at 50% 30%, var(--gold-tint), transparent 70%); opacity:.7; pointer-events:none; }
.hero__copy { position: relative; max-width: 880px; margin-inline:auto; padding-inline: 28px; }
.kicker { display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:600; color: var(--gray); }
.kicker__dot { width:7px; height:7px; border-radius:50%; background: var(--gold); }
.hero__title { font-size: clamp(2.8rem, 9vw, 6.4rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; margin: 1.4rem 0; }
.goldword { font-style: normal; background: linear-gradient(95deg, #9A7B1E 0%, #E8B73A 35%, #F6D67E 50%, #E8B73A 65%, #9A7B1E 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: goldShimmer 7s var(--ease) infinite; }
@keyframes goldShimmer { 0%,100%{ background-position: 0% 0 } 50%{ background-position: 100% 0 } }
@media (prefers-reduced-motion: reduce){ .goldword{ animation:none } }
.hero__sub { font-size: clamp(1.1rem, 2vw, 1.42rem); color: var(--gray); max-width: 30ch; margin: 0 auto; font-weight: 500; line-height: 1.45; }
.hero__cta { display:flex; gap: 1.2rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top: 2.2rem; }

/* hero entrance */
[data-hero] { opacity: 0; transform: translateY(26px); }
body.ready [data-hero] { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
body.ready [data-hero]:nth-child(2){ transition-delay: .08s }
body.ready .hero__sub { transition-delay: .16s }
body.ready .hero__cta { transition-delay: .24s }

/* ============================ STATEMENT =============================== */
.statement { padding: clamp(70px, 11vw, 140px) 0; }
.statement__text { max-width: 1000px; margin-inline:auto; padding-inline:28px; text-align:center; font-size: clamp(1.7rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.18; letter-spacing: -.025em; }
.statement__text span { color: var(--gold); }

/* ============================== BENTO ================================= */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { background: var(--white); border:1px solid var(--line); border-radius: var(--r); padding: 2.2rem; display:flex; flex-direction:column; gap:.7rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0,0,0,.28); }
.tile h3 { font-size: 1.6rem; font-weight: 700; letter-spacing:-.025em; line-height:1.1; }
.tile h4 { font-size: 1.22rem; font-weight: 700; letter-spacing:-.02em; }
.tile p { color: var(--gray); font-size: 1rem; }
.tile__tag { margin-top:auto; font-size:.82rem; font-weight:600; color: var(--gray-2); }
.tile__ic { width:48px; height:48px; border-radius:14px; background: var(--bg-2); color: var(--ink); display:grid; place-items:center; }
.tile__ic svg { width:24px; height:24px; }
.tile--lg { grid-column: span 2; grid-row: span 2; }
.tile--lg h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.tile--dark { grid-column: span 2; background: var(--ink); color:#fff; border-color: transparent; justify-content:center; }
.tile--dark p { color: rgba(255,255,255,.62); }
.tile--gold { grid-column: span 4; background: linear-gradient(115deg, #F6D67E 0%, #E8B73A 42%, #C9952B 100%); color: #1a1408; border-color: transparent; flex-direction:row; align-items:center; justify-content:space-between; gap:1.5rem; position:relative; overflow:hidden; }
.tile--gold::after { content:""; position:absolute; top:-60%; right:-12%; width: 46%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%); pointer-events:none; }
.tile--gold h3 { color:#1a1408; font-size: clamp(1.5rem, 3vw, 2.2rem); position:relative; z-index:1; }
.tile--gold .btn--ink { background:#0a0a0b; color:#fff; border-color:transparent; position:relative; z-index:1; }
.tile--gold .btn--ink:hover { background:#000; }
.tile--wide { grid-column: span 4; }
.tile__num { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 900; letter-spacing:-.04em; line-height:1; }

/* ============================== EVENTS =============================== */
.events { padding: clamp(80px,12vw,150px) 0; overflow: hidden; }
.events__head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: 3rem; }
.events__nav { display:flex; align-items:center; gap:.7rem; }
.events__hint { font-size:.9rem; font-weight:600; color: var(--gray-2); white-space:nowrap; margin-right:.3rem; }
.enav { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--ink); display:grid; place-items:center; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.enav svg { width:20px; height:20px; }
.enav:hover { background: var(--ink); color:#fff; border-color: var(--ink); transform: translateY(-2px); }
.enav:disabled { opacity:.35; cursor:not-allowed; transform:none; background:var(--white); color:var(--ink); border-color:var(--line); }
.hscroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: max(28px, calc((100vw - var(--maxw))/2 + 28px)); cursor: grab; scroll-padding-inline: max(28px, calc((100vw - var(--maxw))/2 + 28px)); scroll-behavior: smooth; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.hscroll.grabbing { cursor: grabbing; scroll-behavior: auto; }
.hscroll::-webkit-scrollbar { display:none; }
.hscroll__track { display:flex; gap: 16px; width: max-content; user-select: none; -webkit-user-select: none; }
.hscroll.grabbing .ecard { pointer-events: none; }
.ecard { scroll-snap-align: none; }
@media (prefers-reduced-motion: reduce){ .hscroll{ scroll-behavior:auto } }
.ecard { flex: 0 0 auto; width: clamp(220px, 24vw, 300px); aspect-ratio: 4/5; background: var(--white); border:1px solid var(--line); border-radius: var(--r); padding: 1.8rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; --cat: var(--gold); --cat-soft: var(--gold-tint); }
.ecard[data-cat="Life"]     { --cat:#3c7d50; --cat-soft:#ecf5ee; }
.ecard[data-cat="Earth"]    { --cat:#3565a8; --cat-soft:#ecf1f8; }
.ecard[data-cat="Physical"] { --cat:#8a4fb5; --cat-soft:#f4eef9; }
.ecard[data-cat="Eng"]      { --cat:#c25e2a; --cat-soft:#faf0e9; }
.ecard[data-cat="Inquiry"]  { --cat:#B98A23; --cat-soft:#faf4e4; }
.ecard::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--cat); opacity:0; transition: opacity .35s var(--ease); }
.ecard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0,0,0,.3); border-color: #d8d8dc; }
.ecard:hover::before, .ecard.is-active::before { opacity:1; }
.ecard.is-active { border-color: color-mix(in srgb, var(--cat) 36%, var(--line)); }
.ecard__n { font-size:.85rem; font-weight:700; color: var(--cat); }
.ecard h3 { font-size: 1.55rem; font-weight: 700; letter-spacing:-.025em; line-height:1.08; }
.ecard__tag { align-self:flex-start; font-size:.8rem; font-weight:600; color: var(--cat); background: var(--cat-soft); padding:.32rem .75rem; border-radius:100px; }

/* ============================== RESULTS ============================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow:hidden; border:1px solid var(--line); }
.stat { background: var(--bg); padding: 2.4rem 1.6rem; }
.stat::before { content:""; display:block; width:28px; height:3px; border-radius:2px; background: var(--gold); margin-bottom: 1.3rem; }
.stat__n { display:block; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; letter-spacing:-.04em; line-height:1; }
.stat__l { display:block; margin-top:.8rem; color: var(--gray); font-size:.95rem; font-weight:500; }
.results__foot { margin-top: 1.4rem; color: var(--gray-2); font-size:.86rem; }
.results__foot code { font-family: ui-monospace, monospace; color: var(--gold); }

/* ============================ SHOWCASE (dark) ======================== */
.showcase { background: var(--black); color:#fff; padding: clamp(90px, 14vw, 170px) 0; }
.showcase__inner { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.showcase__big { line-height:.8; }
.showcase__rank { font-size: clamp(6rem, 18vw, 14rem); font-weight: 900; letter-spacing:-.05em; background: linear-gradient(180deg, #F6D67E, var(--gold)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.showcase__desc { grid-column: 1; color: rgba(255,255,255,.6); font-size: 1.15rem; max-width: 40ch; margin-top: 1rem; }
.showcase__desc em { color:#fff; font-style:normal; }
.showcase__list { grid-column: 2; grid-row: 1 / span 2; list-style:none; padding:0; display:grid; gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--r-sm); overflow:hidden; }
.showcase__list li { background: var(--black); padding: 1.6rem 1.8rem; border-left: 2px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); }
.showcase__list li:hover { background:#121214; border-left-color: var(--gold-2); }
.showcase__list b { display:block; font-size: 1.3rem; font-weight: 700; letter-spacing:-.02em; }
.showcase__list span { color: rgba(255,255,255,.55); font-size:.95rem; }

/* =============================== TEAM ================================ */
.team__label { font-size:.86rem; font-weight:700; color: var(--gray-2); margin: 2.6rem 0 1.1rem; }
.team__label:first-of-type { margin-top: 0; }
.team__grid { display:grid; gap: 14px; margin-bottom: 1rem; }
.team__grid--3 { grid-template-columns: repeat(3,1fr); }
.team__grid--4 { grid-template-columns: repeat(4,1fr); }
.member { background: var(--white); border:1px solid var(--line); border-radius: var(--r-sm); padding: 1.8rem 1.4rem; text-align:center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.member:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -34px rgba(0,0,0,.26); }
.member__av { display:grid; place-items:center; width: 64px; height:64px; margin:0 auto 1rem; border-radius:50%; background: var(--bg-2); color: var(--ink); font-weight:700; font-size:1.25rem; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.member:hover .member__av { background: var(--gold-tint); color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-2); }
.member__av::before { content: attr(data-i); }
.member h4 { font-size: 1.08rem; font-weight:700; letter-spacing:-.02em; }
.member p { color: var(--gray); font-size:.9rem; margin-top:.2rem; }

/* =============================== CTA ================================= */
.cta { padding: clamp(90px, 14vw, 170px) 0; }
.cta__inner { text-align:center; max-width: 820px; }
.cta { text-align:center; }
.cta__inner { margin-inline:auto; }
.cta__title { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900; letter-spacing:-.04em; line-height:1; }
.cta__sub { color: var(--gray); font-size: 1.18rem; max-width: 46ch; margin: 1.4rem auto 0; font-weight: 500; }
.cta__btns { display:flex; gap: 1.2rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top: 2.2rem; }
.cta__steps { list-style:none; padding:0; margin: 3.5rem auto 0; max-width: 680px; display:grid; gap:0; text-align:left; border-top:1px solid var(--line); }
.cta__steps li { display:flex; gap:1.2rem; align-items:center; padding: 1.2rem .2rem; border-bottom:1px solid var(--line); }
.cta__steps b { color: var(--gold); font-weight:700; font-size:.95rem; }
.cta__steps span { color: var(--ink); font-weight:500; }

/* =============================== FAQ ================================= */
.faq__list { border-top:1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style:none; cursor:pointer; padding: 1.5rem 0; font-size: 1.22rem; font-weight: 600; letter-spacing:-.02em; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition: color .2s var(--ease); }
.faq__item summary:hover { color: var(--gold); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary i { position:relative; width:16px; height:16px; flex:0 0 auto; }
.faq__item summary i::before, .faq__item summary i::after { content:""; position:absolute; top:50%; left:0; width:16px; height:2px; background: var(--gold); transition: transform .3s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__b { padding: 0 0 1.6rem; color: var(--gray); font-size: 1.05rem; max-width: 60ch; }
.faq__b a { color: var(--gold); text-decoration: underline; text-underline-offset:3px; }

/* ============================== FOOTER =============================== */
.footer { background: var(--bg-2); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; }
.footer__grid { display:grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; padding-bottom: 3rem; border-bottom:1px solid var(--line); }
.footer__brand .brand__mark { color: var(--ink); }
.footer__brand .brand__name { font-size: 1.05rem; }
.footer__tag { color: var(--gray); font-size:.92rem; margin-top: 1rem; max-width: 34ch; }
.footer__cols { display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.footer__cols h5 { font-size:.8rem; font-weight:700; color: var(--gray-2); margin-bottom: 1rem; }
.footer__cols a { display:block; color: var(--ink); opacity:.78; padding:.35rem 0; font-size:.95rem; transition: color .2s, opacity .2s; width:fit-content; }
.footer__cols a:hover { opacity:1; color: var(--gold); }
.footer__bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top: 2rem; color: var(--gray-2); font-size:.85rem; }

/* ============================== REVEAL =============================== */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .85s var(--ease), transform .85s var(--ease); }
@media (prefers-reduced-motion: reduce){ [data-hero],[data-reveal]{ opacity:1!important; transform:none!important } }

/* ============================ RESPONSIVE ============================= */
@media (max-width: 920px) {
  .nav__links, .nav__cta { display:none; }
  .nav__toggle { display:flex; }
  .nav[data-state="top"] { background: rgba(251,251,253,.8); backdrop-filter: blur(14px); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--lg { grid-column: span 2; grid-row: auto; }
  .tile--dark, .tile--gold, .tile--wide { grid-column: span 2; }
  .tile--gold { flex-direction:column; align-items:flex-start; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .showcase__inner { grid-template-columns: 1fr; }
  .showcase__list { grid-column:1; grid-row:auto; }
  .team__grid--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .container, .nav__inner, .hero__copy { padding-inline: 20px; }
  body { font-size: 16px; }
  .events__head { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .events__nav { width: 100%; justify-content: flex-start; }
  .events__hint { margin-right: auto; }
  .hscroll { padding-inline: 20px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; cursor: auto; }
  .hscroll__track { gap: 12px; }
  .ecard { width: min(78vw, 300px); scroll-snap-align: start; scroll-snap-stop: always; }
  .bento { grid-template-columns: 1fr; }
  .tile--lg, .tile--dark, .tile--gold, .tile--wide { grid-column: span 1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .team__grid--3 { grid-template-columns: 1fr 1fr; }
  .hero__cta, .cta__btns { flex-direction:column; }
  .hero__cta .btn, .cta__btns .btn { width:100%; justify-content:center; }
  .footer__grid { grid-template-columns: 1fr; gap:2rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}