@charset "utf-8";
/* =========================================================================
   월드웨이 유학원 (WORLDWAY) — idc.kr 디자인 샘플
   토큰 출처 : EF Education First 한국 공식 사이트 실측 (_스펙_ab2_ef.md)
   ========================================================================= */

:root{
  /* 색 — 원본 --color-brand-* / --color-system-* 원문 */
  --ink:#191919;
  --edu-blue:#003C64;
  --primary:#006BD6;
  --primary-light:#009EEB;
  --pink:#DA2381;
  --paper-first:#E3F7FF;
  --paper-edu:#E3EBED;
  --paper-ef:#F7F7F7;
  --gray-ef:#EFEFEF;
  --outline:#8C8C8C;
  --stroke:#949494;
  --divider:rgba(25,25,25,.16);
  --white:#fff;
  --sec-blue:#E5F3FF;
  --alert-info:#003C64;
  --alert-info-bg:#F0F7FD;
  --legal-paper:#FFFCE5;

  /* radius — 원본 6단 */
  --r-xxs:4px; --r-xs:8px; --r-s:16px; --r-m:24px; --r-l:32px; --r-full:9999px;

  /* 간격 — 원본 8단 */
  --sp-xxs:.25rem; --sp-xs:.5rem; --sp-s:1rem; --sp-m:1.5rem;
  --sp-l:2rem; --sp-xl:3rem; --sp-xxl:4rem; --sp-xxxl:8rem;

  /* 그림자 · 모션 */
  --shadow:0 2px 8px 0 rgba(25,25,25,.20);
  --shadow-hover:0 2px 16px rgba(25,25,25,.15);
  --dur:150ms; --dur-m:300ms;
  --ease:cubic-bezier(.4,0,.95,1);
  --ease-x:cubic-bezier(.45,.05,.12,.88);

  --wrap:1264px;
  --pad:5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Malgun Gothic","맑은 고딕",Helvetica,"Apple SD Gothic Neo",Arial,sans-serif;
  font-size:1.125rem; line-height:1.75rem; font-weight:300;
  overflow-x:hidden; word-break:keep-all;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 var(--sp-s)}
ul,ol{margin:0 0 var(--sp-s); padding-left:1.2em}
li{margin:0 0 .35em}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--edu-blue); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-xs) 0}
.skip:focus{left:0}

/* ---------- 상단 유틸바 ---------- */
.topbar{background:var(--edu-blue); color:#fff; font-size:.875rem; line-height:1.25rem; font-weight:400}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-s);
  min-height:40px; padding-top:6px; padding-bottom:6px}
.topbar p{margin:0}
.topbar a{color:#fff; margin-left:var(--sp-m)}
.topbar .tb-r{display:flex; flex-wrap:wrap}

/* ---------- 헤더 ---------- */
.hd{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--gray-ef)}
.hd-in{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-m); min-height:76px}
.logo{display:flex; align-items:center; gap:10px; color:var(--edu-blue); text-decoration:none; flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{width:34px; height:34px; flex:0 0 34px; color:var(--primary)}
.logo b{display:block; font-size:1.25rem; line-height:1.5rem; font-weight:700; letter-spacing:-.02em}
.logo em{display:block; font-style:normal; font-size:.6875rem; line-height:1rem;
  letter-spacing:.14em; color:var(--outline); font-weight:700}

.gnb{flex:1 1 auto}
.gnb>ul{display:flex; justify-content:flex-end; gap:var(--sp-m); list-style:none; margin:0; padding:0}
.gnb>ul>li{position:relative}
.gnb>ul>li>a{display:block; padding:26px 2px; color:var(--ink); font-size:1rem; font-weight:700;
  line-height:1.5rem; border-bottom:3px solid transparent; transition:color var(--dur) var(--ease)}
.gnb>ul>li>a:hover{color:var(--primary); text-decoration:none}
.gnb>ul>li.on>a{color:var(--primary); border-bottom-color:var(--primary)}
.sub{position:absolute; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:230px; background:#fff; border:1px solid var(--gray-ef);
  border-radius:0 0 var(--r-xs) var(--r-xs); box-shadow:var(--shadow);
  padding:var(--sp-s) 0; opacity:0; visibility:hidden; transition:all var(--dur) var(--ease)}
.gnb>ul>li:hover .sub,.gnb>ul>li:focus-within .sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.sub ul{list-style:none; margin:0; padding:0}
.sub a{display:block; padding:9px 20px; color:var(--ink); font-size:.9375rem; line-height:1.375rem; font-weight:400}
.sub a:hover{background:var(--paper-first); color:var(--primary); text-decoration:none}

.hd-cta{display:flex; align-items:center; gap:var(--sp-xs); flex:0 0 auto}
.ham{display:none; width:44px; height:44px; border:1px solid var(--gray-ef); border-radius:var(--r-xs);
  background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center}
.ham span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.ham span::before,.ham span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.ham span::before{top:-6px} .ham span::after{top:6px}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px; border-radius:var(--r-full); background:var(--primary); color:#fff;
  font-size:1rem; line-height:1.5rem; font-weight:700; border:2px solid var(--primary);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease); cursor:pointer}
.btn:hover{background:#0057ad; border-color:#0057ad; color:#fff; text-decoration:none}
.btn.ghost{background:transparent; color:var(--primary)}
.btn.ghost:hover{background:var(--sec-blue); color:var(--edu-blue); border-color:var(--edu-blue)}
.btn.on-dark{background:#fff; color:var(--edu-blue); border-color:#fff}
.btn.on-dark:hover{background:var(--paper-first); border-color:var(--paper-first); color:var(--edu-blue)}
.btn.line-dark{background:transparent; color:#fff; border-color:#fff}
.btn.line-dark:hover{background:rgba(255,255,255,.14); color:#fff; border-color:#fff}
.btn.sm{padding:9px 20px; font-size:.9375rem; border-radius:var(--r-xs)}

/* ---------- 페이지 히어로 ---------- */
.phero{position:relative; background:var(--edu-blue); color:#fff; overflow:hidden}
.phero .bg{position:absolute; inset:0}
.phero .bg img{width:100%; height:100%; object-fit:cover; opacity:.34}
.phero .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,60,100,.94) 0%,rgba(0,60,100,.66) 62%,rgba(0,60,100,.42) 100%)}
.phero .in{position:relative; padding:var(--sp-xxl) 0 var(--sp-xl)}
.phero .eyebrow{color:#8FD6FF}
.phero h1{font-size:3.5rem; line-height:4rem; margin:var(--sp-xs) 0 var(--sp-s)}
.phero p{font-size:1.125rem; line-height:1.75rem; max-width:56ch; color:rgba(255,255,255,.9); margin:0}

/* 홈 히어로 */
.hhero{position:relative; background:var(--edu-blue); color:#fff; overflow:hidden}
.hhero .bg{position:absolute; inset:0}
.hhero .bg img{width:100%; height:100%; object-fit:cover; opacity:.46}
.hhero .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,60,100,.93),rgba(0,60,100,.55))}
.hhero .in{position:relative; padding:112px 0 96px; max-width:66ch}
.hhero h1{font-size:3.5rem; line-height:4rem; margin:var(--sp-s) 0 var(--sp-m)}
.hhero p{font-size:1.25rem; line-height:1.875rem; color:rgba(255,255,255,.92)}
.hhero .acts{display:flex; flex-wrap:wrap; gap:var(--sp-s); margin-top:var(--sp-l)}

/* ---------- 브레드크럼 ---------- */
.bc{background:var(--paper-ef); border-bottom:1px solid var(--gray-ef); font-size:.875rem; line-height:1.25rem}
.bc .wrap{padding-top:12px; padding-bottom:12px}
.bc ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; color:var(--outline)}
.bc li+li::before{content:"›"; margin-right:8px; color:var(--stroke)}
.bc a{color:var(--outline); font-weight:400}

/* ---------- 섹션 ---------- */
.sec{padding:var(--sp-xxl) 0}
.sec.tight{padding:var(--sp-xl) 0}
.sec.alt{background:var(--paper-ef)}
.sec.tint{background:var(--paper-first)}
.eyebrow{display:block; font-size:.875rem; line-height:1.0625rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--primary); margin-bottom:12px}
.sh{margin-bottom:var(--sp-l); max-width:72ch}
.sh h2{font-size:2.5rem; line-height:3rem}
.sh h3{font-size:2rem; line-height:2.5rem}
.sh p{margin-top:12px; color:#4a4a4a}
h3.sub{font-size:1.5rem; line-height:2rem; margin:var(--sp-l) 0 var(--sp-s)}
h4.sub{font-size:1.25rem; line-height:1.75rem; margin:var(--sp-m) 0 var(--sp-xs)}

/* ---------- 그리드 · 카드 ---------- */
.grid{display:grid; gap:var(--sp-m)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--gray-ef); border-radius:var(--r-s);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/10; background:var(--gray-ef)}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .bd{padding:var(--sp-m); flex:1 1 auto; display:flex; flex-direction:column}
.card h3{font-size:1.25rem; line-height:1.75rem; margin-bottom:8px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--primary)}
.card p{font-size:1rem; line-height:1.5rem; color:#4a4a4a; font-weight:400; flex:1 1 auto}
.card .meta{margin-top:var(--sp-s); font-size:.875rem; line-height:1.25rem; color:var(--outline); font-weight:400}
.tag{display:inline-block; padding:3px 12px; border-radius:var(--r-full);
  background:var(--paper-first); color:var(--edu-blue);
  font-size:.75rem; line-height:1rem; font-weight:700; margin-bottom:10px}
.tag.pink{background:#FDE7F3; color:#A3175E}
.tag.green{background:#DFFCF1; color:#004444}

/* 연령대 타일 */
.ages{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-s)}
.age{display:block; padding:var(--sp-m); border:1px solid var(--gray-ef); border-radius:var(--r-s);
  background:#fff; text-align:center; color:var(--ink); transition:all var(--dur) var(--ease)}
.age:hover{border-color:var(--primary); background:var(--paper-first); text-decoration:none}
.age b{display:block; font-size:1.5rem; line-height:2rem; color:var(--primary)}
.age span{display:block; font-size:.9375rem; line-height:1.375rem; color:#4a4a4a; font-weight:400; margin-top:4px}

/* 숫자 스텝 */
.steps{counter-reset:st; display:grid; gap:var(--sp-m)}
.steps .st{position:relative; padding-left:64px}
.steps .st::before{counter-increment:st; content:counter(st,decimal-leading-zero);
  position:absolute; left:0; top:0; width:44px; height:44px; border-radius:var(--r-full);
  background:var(--edu-blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.9375rem; font-weight:700}
.steps h4{font-size:1.25rem; line-height:1.75rem; margin-bottom:6px}
.steps p{font-size:1rem; line-height:1.5rem; font-weight:400; color:#4a4a4a; margin:0}

/* 표 */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-s);
  border:1px solid var(--gray-ef)}
table.spec{min-width:640px; font-size:1rem; line-height:1.5rem; font-weight:400; background:#fff}
table.spec caption{text-align:left; padding:var(--sp-s) var(--sp-m); font-size:.875rem;
  color:var(--outline); background:var(--paper-ef); border-bottom:1px solid var(--gray-ef)}
table.spec th,table.spec td{padding:14px 20px; border-bottom:1px solid var(--gray-ef); text-align:left; vertical-align:top}
table.spec thead th{background:var(--paper-ef); font-weight:700; font-size:.9375rem; color:var(--edu-blue)}
table.spec tbody th{width:32%; background:#FBFCFD; font-weight:700; color:var(--edu-blue)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

/* 정의 목록 */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-s); margin:var(--sp-l) 0 0}
.fact{padding:var(--sp-m); border-radius:var(--r-s); background:var(--paper-ef)}
.fact dt{font-size:.875rem; line-height:1.25rem; color:var(--outline); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; margin-bottom:6px}
.fact dd{margin:0; font-size:1.375rem; line-height:1.875rem; font-weight:700; color:var(--edu-blue)}
.fact dd small{display:block; font-size:.875rem; line-height:1.25rem; font-weight:400; color:#4a4a4a; margin-top:4px}

/* 미디어 2단 */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-xl); align-items:center}
.split.rev>.media{order:2}
.split .media img{border-radius:var(--r-m); width:100%; aspect-ratio:4/3; object-fit:cover}
.split .body h3{font-size:2rem; line-height:2.5rem; margin-bottom:var(--sp-s)}

/* 체크 리스트 */
.checks{list-style:none; padding:0; margin:0}
.checks li{position:relative; padding-left:32px; margin-bottom:12px; font-size:1rem; line-height:1.5rem; font-weight:400}
.checks li::before{content:""; position:absolute; left:0; top:3px; width:20px; height:20px;
  border-radius:var(--r-full); background:var(--primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E") center/20px no-repeat}

/* 아코디언 FAQ */
.faq{border-top:1px solid var(--gray-ef)}
.faq details{border-bottom:1px solid var(--gray-ef)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-size:1.125rem; line-height:1.75rem; font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:28px; width:12px; height:12px;
  border-right:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg); top:32px}
.faq .ans{padding:0 44px 20px 0; font-size:1rem; line-height:1.625rem; font-weight:400; color:#4a4a4a}

/* 후기 */
.rv{display:flex; gap:var(--sp-s); padding:var(--sp-m); border:1px solid var(--gray-ef);
  border-radius:var(--r-s); background:#fff; height:100%}
.rv .ph{flex:0 0 72px; width:72px; height:72px; border-radius:var(--r-full); overflow:hidden; background:var(--gray-ef)}
.rv .ph img{width:100%; height:100%; object-fit:cover}
.rv .tx{flex:1 1 auto}
.rv .nm{font-weight:700; font-size:1rem; line-height:1.5rem}
.rv .rl{font-size:.875rem; line-height:1.25rem; color:var(--outline); font-weight:400; margin-bottom:8px}
.rv p{font-size:1rem; line-height:1.5rem; font-weight:400; color:#4a4a4a; margin:0}

/* 알림 박스 */
.note{background:var(--alert-info-bg); border-left:4px solid var(--alert-info);
  border-radius:0 var(--r-xs) var(--r-xs) 0; padding:var(--sp-m);
  font-size:1rem; line-height:1.625rem; font-weight:400; margin:var(--sp-m) 0}
.note.warn{background:#FCF3F4; border-left-color:#D1334A}
.note.legal{background:var(--legal-paper); border-left-color:#B8A100}
.note b{color:var(--edu-blue)}

/* CTA 밴드 */
.ctaband{background:var(--edu-blue); color:#fff; position:relative; overflow:hidden}
.ctaband .bg{position:absolute; inset:0}
.ctaband .bg img{width:100%; height:100%; object-fit:cover; opacity:.22}
.ctaband .in{position:relative; padding:var(--sp-xxl) 0; text-align:center}
.ctaband h2{font-size:2.5rem; line-height:3rem; margin-bottom:var(--sp-s)}
.ctaband p{color:rgba(255,255,255,.88); max-width:60ch; margin:0 auto var(--sp-l)}
.ctaband .acts{display:flex; gap:var(--sp-s); justify-content:center; flex-wrap:wrap}
.ctaband .tel{font-size:2rem; line-height:2.5rem; font-weight:700; margin-bottom:var(--sp-s)}

/* 폼 */
.form{display:grid; gap:var(--sp-s); grid-template-columns:repeat(2,1fr)}
.form .full{grid-column:1/-1}
.fld label{display:block; font-size:.875rem; line-height:1.25rem; font-weight:700; margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%; padding:12px 14px; border:1px solid var(--stroke);
  border-radius:var(--r-xs); font:inherit; font-size:1rem; font-weight:400; background:#fff; color:var(--ink)}
.fld textarea{min-height:132px; resize:vertical}

/* 푸터 */
.ft{background:#111c24; color:#c8d2d9; font-size:.9375rem; line-height:1.5rem; font-weight:400}
.ft a{color:#c8d2d9}
.ft .cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--sp-l); padding:var(--sp-xxl) 0 var(--sp-l)}
.ft h4{font-size:.875rem; line-height:1.25rem; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; margin-bottom:var(--sp-s)}
.ft ul{list-style:none; margin:0; padding:0}
.ft li{margin-bottom:8px}
.ft .brand b{display:block; color:#fff; font-size:1.25rem; line-height:1.75rem; margin-bottom:4px}
.ft .brand em{font-style:normal; display:block; font-size:.6875rem; letter-spacing:.14em; color:#7d8b95; font-weight:700}
.ft .brand p{margin-top:var(--sp-s); color:#93a1ab; font-size:.875rem; line-height:1.375rem}
.ft .legal{border-top:1px solid #24333e; padding:var(--sp-m) 0 var(--sp-xl); font-size:.8125rem; line-height:1.375rem; color:#8b99a3}
.ft .legal .links{margin-bottom:10px; display:flex; flex-wrap:wrap; gap:16px}
.sample-notice{background:#0b1319; color:#9fb0bb; font-size:.8125rem; line-height:1.375rem;
  padding:var(--sp-m) 0; border-top:1px solid #24333e}
.sample-notice b{color:#d9e4ea}

/* 유틸 */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.lead{font-size:1.25rem; line-height:1.875rem; color:#3d3d3d}
.small{font-size:.875rem; line-height:1.25rem; color:var(--outline); font-weight:400}
.center{text-align:center}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- 반응형 ---------- */
@media (max-width:1264px){ :root{--pad:4rem} }
@media (max-width:1024px){
  :root{--pad:2rem}
  .gnb{display:none; position:absolute; left:0; right:0; top:100%; background:#fff;
    border-bottom:1px solid var(--gray-ef); box-shadow:var(--shadow); max-height:70vh; overflow:auto}
  .gnb.open{display:block}
  .gnb>ul{flex-direction:column; gap:0; padding:var(--sp-s) 0}
  .gnb>ul>li>a{padding:14px var(--sp-s); border-bottom:0}
  .gnb>ul>li.on>a{border-bottom:0}
  .sub{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    border:0; border-left:3px solid var(--paper-first); border-radius:0;
    padding:0 0 var(--sp-s) var(--sp-s); margin:0 var(--sp-s) var(--sp-xs)}
  .hd{position:relative}
  .hd-in{position:relative; min-height:66px}
  .ham{display:flex}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .ages{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .ft .cols{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr; gap:var(--sp-l)}
  .split.rev>.media{order:0}
  .hhero h1{font-size:3rem; line-height:3.5rem}
  .phero h1{font-size:3rem; line-height:3.5rem}
}
@media (max-width:768px){
  :root{--pad:1.25rem}
  body{font-size:1.0625rem; line-height:1.6875rem}
  .topbar .wrap{flex-direction:column; align-items:flex-start; gap:4px}
  .topbar a{margin:0 var(--sp-s) 0 0}
  .hhero .in{padding:64px 0 56px}
  .hhero h1{font-size:2.5rem; line-height:3rem}
  .hhero p{font-size:1.125rem; line-height:1.75rem}
  .phero h1{font-size:2.5rem; line-height:3rem}
  .phero .in{padding:var(--sp-xl) 0 var(--sp-l)}
  .sh h2{font-size:2rem; line-height:2.5rem}
  .sec{padding:var(--sp-xl) 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .ages{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .ft .cols{grid-template-columns:1fr 1fr}
  .ctaband h2{font-size:2rem; line-height:2.5rem}
  .hd-cta .btn{padding:9px 16px; font-size:.9375rem}
}
@media (max-width:480px){
  .logo b{font-size:1.0625rem}
  .hhero h1{font-size:2.125rem; line-height:2.625rem}
  .phero h1{font-size:2rem; line-height:2.5rem}
  .ages{grid-template-columns:1fr}
  .ft .cols{grid-template-columns:1fr}
  .hd-cta .btn.hide-xs{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}