:root {
  --paper: #F7F3EC;
  --paper-2: #EFE7D7;
  --card: #FFFFFF;
  --deep: #101820;
  --deep-2: #1A2530;
  --caramel: #B87333;
  --caramel-dark: #9E5F27;
  --gold: #D89B3A;
  --blue: #0B86C3;        /* Smithsonian-inspired cool accent (structural / decorative) */
  --blue-bright: #1AA0DD;
  --blue-text: #0A6E9E;   /* darker blue for links (contrast-safe on cream) */
  --text: #2A2520;
  --muted: #6E6358;
  --border: #E3D9CA;
  --on-deep: #F2EBDD;
  --on-deep-mute: #9DA7B1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--text);
  font-family: 'Public Sans', system-ui, sans-serif;
  line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(11,134,195,.20); color: var(--deep); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .contact-card:focus-visible, .nav-links a:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px;
}
/* Fraunces controls: .wonk = wonk ON (logo + big headlines); .serif = wonk OFF;
   .nowonk = turn wonk OFF for a single letter (e.g. f, j) inside a .wonk run */
.serif  { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; }
.wonk   {font-family: 'Fraunces', Georgia, serif;font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1;}
.nowonk { font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.dash { width: 46px; height: 3px; background: var(--gold); border: 0; border-radius: 2px; }
.dash.center { margin: 0 auto; }
.tlink { color: var(--blue-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s; }
.tlink:hover { border-bottom-color: var(--blue-text); }

/* BRAND BAR */
.brandbar { background: var(--deep); color: var(--on-deep-mute); font-size: 12px; letter-spacing: .3px; }
.brandbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.brandbar .kc { text-transform: uppercase; letter-spacing: 2.5px; font-size: 11px; color: var(--gold); font-weight: 700; }
.brandbar a { color: var(--on-deep); text-decoration: none; }
.brandbar .sep { color: #3A4654; margin: 0 10px; }
@media (max-width: 620px){ .brandbar .kc { display:none; } .brandbar .wrap{ justify-content:center; } }

/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: rgba(247,243,236,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner {display: flex;align-items: center;justify-content: space-between;height: 90px;}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-logo { height: 56px; width: auto; display: block; flex: none; }
.brand-text { line-height: 1.02; }
.brand-text .b1 {font-family: 'Fraunces', Georgia, serif;font-optical-sizing: auto;font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1;font-size: 36px;color: var(--deep);letter-spacing: -0.02em;}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text); font-size: 14px; font-weight: 500; position: relative; padding: 4px 0; transition: color .2s ease; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width .25s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--deep); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { background: var(--deep); color: var(--on-deep) !important; padding: 14px 40px; border-radius: 8px; font-size: 13px; font-weight: 600 !important; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: #20303f; transform: translateY(-1px); }
@media (max-width: 760px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-inner { height: 74px; }
  .brand-logo { height: 46px; }
  .brand-text .b1 { font-size: 23px; }
  .nav-cta { padding: 12px 28px; font-size: 12px; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 18px; }
  .brand-text .b1 { font-size: 21px; }
  .brand-logo { height: 42px; }
}

/* BUTTONS */
.btn { display: inline-block; text-decoration: none; font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 9px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-primary { background: var(--caramel); color: #fff; box-shadow: 0 6px 18px rgba(184,115,51,.28); }
.btn-primary:hover { transform: translateY(-2px); background: var(--caramel-dark); box-shadow: 0 10px 26px rgba(184,115,51,.36); }
.btn-ghost { background: transparent; color: var(--deep); border: 1.5px solid var(--deep); }
.btn-ghost:hover { background: var(--deep); color: var(--on-deep); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color:#3a2708; }
.btn-gold:hover { background:#c98a2c; transform:translateY(-2px); }
.btn-block { display:block; text-align:center; }

/* HERO (home) */
.hero {padding: 80px 0 80px;}
.hero-grid { display: grid; grid-template-columns: 1.15fr .99fr; gap: 44px; align-items: center; }
.kicker {font-size: 15px;letter-spacing: 3px;text-transform: uppercase;color: var(--deep);font-weight: 700;margin-bottom: 18px;}
.hero h1 { font-size: 4.4rem; line-height: .98; color: var(--deep); margin: 0 0 10px; letter-spacing: -.5px; }
.hero .sub {font-size: 1.45rem; color: var(--caramel); margin-bottom: 25px; line-height: 1.3; font-optical-sizing: auto; font-variation-settings: "wght" 440, "SOFT" 10, "WONK" 1; text-wrap: balance;}
.hero p.lead {font-size: 17px;color: var(--text);margin-bottom: 20px;max-width: 28.5em;text-wrap: pretty;}
.btns {display: flex;gap: 14px;flex-wrap: wrap;margin-top: 35px;}
.hero-visual { position: relative; height: 510px; margin-top: 30px; }
.hero-visual::before { content:''; position:absolute; inset:-12%; background: radial-gradient(circle at 62% 38%, rgba(216,155,58,.30), rgba(216,155,58,0) 62%); }
.photo-panel { position: absolute; inset: 0; background: var(--paper-2); border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.photo-img { width: 100%; height: 100%; object-fit: cover; }
.photo-circle { width: 196px; height: 196px; border-radius: 50%; background: linear-gradient(150deg, var(--deep), #243648); display: flex; align-items: center; justify-content: center; color: var(--on-deep); font-family:'Fraunces',serif; font-size: 14px; text-align: center; padding: 22px; box-shadow: 0 18px 50px rgba(16,24,32,.22); }
.chip { position: absolute; background: #fff; border-radius: 13px; padding: 11px 17px; box-shadow: 0 10px 30px rgba(40,30,20,.14); border: 1px solid var(--border); transition: transform .3s ease; }
.chip:hover { transform: translateY(-4px) scale(1.03); }
.chip .big { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 28px; font-weight: 700; color: var(--deep); line-height: 1; }
.chip .lbl { font-size: 11px; color: var(--muted); letter-spacing: .4px; }
/* chips: IELTS (7+) bottom-left, experience (5 yrs) top-right */
.chip-1 { bottom: 30px; left: -26px; animation: float1 5.5s ease-in-out infinite; }
.chip-2 { top: 20px; right: -26px; animation: float2 6.5s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 3.2rem; } .hero-visual { height: 320px; margin-top: 8px; } }

/* INTERIOR PAGE HERO */
.page-hero { padding: 88px 0 8px; text-align: center; }
.page-hero h1 { font-size: 3.7rem; color: var(--deep); line-height: 1.02; letter-spacing:-.5px; }
.page-hero p { color: var(--muted); font-size: 18px; max-width: 38em; margin: 16px auto 0; }
.page-hero .dash { margin: 20px auto 0; }
@media (max-width: 860px){ .page-hero h1 { font-size: 2.7rem; } }

/* SECTION SHELL */
section.block {padding: 80px 0 80px;}
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head .dash { margin-bottom: 20px; }
.section-head h2 { font-size: 2.9rem; color: var(--deep); margin-bottom: 12px; letter-spacing: -.3px; }
.section-head p { color: var(--muted); font-size: 17px; text-wrap: balance; }

/* SERVICE / FEATURE CARDS */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.card-item:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(16,24,32,.10); border-color: var(--gold); }
.card-icon { width: 52px; height: 52px; border-radius: 13px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 25px; margin-bottom: 18px; border: 1px solid var(--border); }
.card-item h3 { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 1.7rem; color: var(--deep); font-weight: 600; margin-bottom: 9px; }
.card-item p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }

/* STEPS */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.step { text-align: center; padding: 8px; }
.step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--deep); color: var(--gold); font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 27px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; position: relative; transition: transform .25s ease; }
.step-num::after { content:''; position:absolute; inset:5px; border-radius:50%; border:2px solid var(--blue); }
.step:hover .step-num { transform: scale(1.08); }
.step h4 { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 1.3rem; font-weight: 600; color: var(--deep); margin-bottom: 7px; }
.step p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; gap: 36px; } }

/* STATS BAND (deep, with warm + cool glow) */
.band { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.band::before { content:''; position:absolute; top:-40%; right:-10%; width:460px; height:460px; background: radial-gradient(circle, rgba(216,155,58,.16), rgba(216,155,58,0) 65%); }
.band::after  { content:''; position:absolute; bottom:-34%; left:-8%; width:420px; height:420px; background: radial-gradient(circle, rgba(11,134,195,.22), rgba(11,134,195,0) 66%); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; padding: 68px 0; position: relative; z-index: 1; }
.stat .num { font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--gold); }
.stat .lbl { font-size: 13px; color: var(--on-deep-mute); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 10px; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; gap: 38px; } }

/* TESTIMONIAL */
.quote { max-width: 760px; margin: 0 auto; text-align: center; }
.quote .mark { font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 5rem; color: var(--gold); line-height: .5; height: 42px; }
.quote p { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 2rem; font-style: italic; color: var(--deep); line-height: 1.35; margin-bottom: 20px; font-weight: 400; }
.quote .who { font-size: 14px; color: var(--caramel-dark); font-weight: 700; letter-spacing: .5px; }

/* PRICING */
.pricing { display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; max-width: 840px; margin: 0 auto; }
.price-card { background: var(--card); border:1px solid var(--border); border-radius:18px; padding:32px; position:relative; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.price-card:hover { transform: translateY(-6px); box-shadow:0 18px 44px rgba(16,24,32,.10); border-color: var(--gold); }
.price-card.featured { background: var(--deep); border-color: var(--deep); }
.price-card.featured .pc-name, .price-card.featured .pc-price { color: var(--on-deep); }
.price-card.featured .pc-price span, .price-card.featured .pc-feat li { color: var(--on-deep-mute); }
.badge { position:absolute; top:-12px; left:32px; background: var(--gold); color:#3a2708; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.pc-name { font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size:1.6rem; color:var(--deep); margin-bottom:6px; }
.pc-price { font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size:2.8rem; color:var(--deep); line-height:1; }
.pc-price span { font-family:'Public Sans',sans-serif; font-size:14px; color:var(--muted); font-weight:500; }
.pc-feat { list-style:none; margin:20px 0 24px; }
.pc-feat li { font-size:14px; color:var(--muted); padding:8px 0 8px 26px; position:relative; border-top:1px solid var(--border); }
.price-card.featured .pc-feat li { border-top-color:#26323d; }
.pc-feat li:first-child { border-top:0; }
.pc-feat li::before { content:'✓'; position:absolute; left:0; color:var(--caramel); font-weight:700; }
.price-card.featured .pc-feat li::before { color: var(--gold); }
@media(max-width:700px){ .pricing{grid-template-columns:1fr;} }

/* TAGS + NOTE */
.taglist { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:780px; margin:0 auto; }
.tag { background:var(--card); border:1px solid var(--border); border-radius:30px; padding:9px 18px; font-size:14px; color:var(--text); transition: border-color .2s ease, transform .2s ease; }
.tag:hover { border-color: var(--gold); transform: translateY(-2px); }
.note { max-width:680px; margin:34px auto 0; text-align:center; font-size:13.5px; color:var(--muted); }

/* ABOUT: bio + credentials split layouts */
.bio-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap:50px; align-items:center; }
.cred-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center; }
.bio-photo { position:relative; height:440px; border-radius:22px; background:var(--paper-2); border:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow: 0 16px 44px rgba(16,24,32,.10); }
.bio-photo img { width:100%; height:100%; object-fit:cover; }
.bio-photo .cap { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(16,24,32,.78)); color:#fff; font-size:12.5px; padding:26px 18px 14px; }
.bio-photo .ph { color:var(--muted); font-family:'Fraunces',serif; text-align:center; padding:20px; }
.bio-text h2, .cred-text h2 { font-family:'Fraunces',serif; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size:2.3rem; color:var(--deep); margin-bottom:6px; }
.bio-text p { color:var(--text); margin-bottom:16px; }
.cred-text > p.intro { color:var(--muted); margin-top:10px; }
@media(max-width:820px){
  .bio-grid, .cred-grid { grid-template-columns:1fr; }
  .bio-photo{ height:340px; }
  .cred-grid .bio-photo{ order:-1; }
}

/* CREDENTIALS LIST */
.cred-list { list-style:none; margin:22px 0 0; }
.cred-list li { position:relative; padding:13px 0 13px 28px; border-top:1px solid var(--border); }
.cred-list li:first-child { border-top:0; }
.cred-list li::before { content:''; position:absolute; left:0; top:19px; width:9px; height:9px; border-radius:50%; background:var(--deep); }
.cred-list .deg { display:block; font-weight:600; color:var(--deep); font-size:15px; }
.cred-list .meta { display:block; font-size:13.5px; color:var(--muted); margin-top:1px; }
.langline { margin-top:22px; font-size:14px; color:var(--muted); }
.langline strong { color:var(--deep); }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; max-width:760px; margin:0 auto; }
.contact-card { display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 24px; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.contact-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(16,24,32,.10); border-color:var(--gold); }
.cc-icon { width:46px; height:46px; border-radius:12px; background:var(--paper-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.cc-label { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); }
.cc-value { font-size:16px; color:var(--deep); font-weight:600; }
@media(max-width:600px){ .contact-grid{grid-template-columns:1fr;} }

/* FINAL CTA */
.cta-band { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.cta-band::before { content:''; position:absolute; bottom:-50%; left:-8%; width:520px; height:520px; background: radial-gradient(circle, rgba(216,155,58,.14), rgba(216,155,58,0) 65%); }
.cta-band::after { content:''; position:absolute; top:-42%; right:-8%; width:460px; height:460px; background: radial-gradient(circle, rgba(11,134,195,.20), rgba(11,134,195,0) 66%); }
.cta-inner { text-align: center; padding: 96px 30px; position: relative; z-index: 1; }
.cta-inner .dash { margin: 0 auto 22px; }
.cta-inner h2 { font-size: 3rem; color: var(--on-deep); margin-bottom: 14px; letter-spacing: -.3px; }
.cta-inner p { color: var(--on-deep-mute); font-size: 17px; margin-bottom: 30px; }

/* FOOTER */
footer { background: var(--deep); color: var(--on-deep-mute); }
.foot-rule { height: 3px; background: var(--gold); }
.foot-logo { height: 60px; width: auto; display: block; margin-bottom: 16px; }
.foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding: 48px 0 38px; }
.foot-brand .b1 { font-family:'Fraunces',serif; font-size: 26px; color: var(--on-deep); font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; }
.foot-brand .b2 { font-size: 13px; color: var(--on-deep-mute); margin-top: 4px; max-width: 24em; }
.foot-col h5 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.foot-col a { display:block; color: var(--on-deep-mute); text-decoration: none; font-size: 14px; margin-bottom: 8px; transition: color .2s; }
.foot-col a:hover { color: var(--on-deep); }
.foot-base { border-top: 1px solid #26323d; padding: 18px 0; font-size: 12.5px; color:#6b7681; }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .chip { animation:none; } html { scroll-behavior:auto; } }

/* WHATSAPP FLOAT */
.wa-btn { position: fixed; bottom: 26px; right: 26px; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0,0,0,.28); z-index: 200; text-decoration: none; transition: transform .2s ease; }
.wa-btn:hover { transform: scale(1.1); }


/* PAYMENT METHODS */
.pay-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(152px,1fr)); gap:16px; max-width:880px; margin:0 auto; }
.pay-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 16px; text-align:center; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.pay-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 12px 28px rgba(16,24,32,.09); }
.pay-icon { display:inline-flex; width:48px; height:48px; border-radius:13px; background:var(--paper-2); border:1px solid var(--border); align-items:center; justify-content:center; color:var(--deep); margin-bottom:13px; }
.pay-icon svg { width:25px; height:25px; }
.pay-name { font-weight:700; color:var(--deep); font-size:15px; }
.pay-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.pay-sub.fee { color:var(--caramel-dark); font-weight:600; }

/* SAMPLES / MATERIALS PAGE */
.sample-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.sample-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; display:flex; flex-direction:column; }
.sample-card:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(16,24,32,.10); border-color:var(--gold); }
.sample-thumb { height:188px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); position:relative; }
.sample-thumb svg { width:56px; height:56px; color:var(--caramel); opacity:.85; }
.sample-tag { position:absolute; top:13px; left:13px; background:var(--deep); color:var(--on-deep); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; padding:5px 11px; border-radius:20px; font-weight:600; }
.sample-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.sample-body h3 { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size:1.4rem; color:var(--deep); font-weight:600; margin-bottom:7px; }
.sample-body p { font-size:14px; color:var(--muted); margin-bottom:18px; flex:1; }
.sample-link { align-self:flex-start; color:var(--blue-text); font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.sample-link:hover { border-bottom-color:var(--blue-text); }
@media(max-width:880px){ .sample-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sample-grid{ grid-template-columns:1fr; } }


/* FOOTER BRAND LOCKUP (monogram png + embedded WONK text) */
.foot-lockup { display:flex; align-items:center; gap:12px; margin-bottom:16px; text-decoration:none; }
.foot-mark { height:50px; width:auto; flex:none; }
.foot-word { font-family:'Fraunces',serif; font-optical-sizing:auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size:29px; color:var(--on-deep); line-height:1; letter-spacing:-0.02em; }

/* PAYMENT BRAND LOGOS */
.pay-logo { height:34px; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:15px; }
.pay-logo svg { max-height:30px; width:auto; max-width:98px; display:block; }
.pay-logo.card svg { max-height:23px; }

/* ===== ONBOARDING ADD-ONS (book / how-it-works / level test) ===== */

/* 4-step row */
.steps.four { grid-template-columns: repeat(4,1fr); }
@media (max-width: 920px){ .steps.four { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px){ .steps.four { grid-template-columns: 1fr; } }

/* video placeholder */
.video-frame { max-width: 760px; margin: 0 auto; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 920px; margin: 0 auto; }
@media (max-width: 720px){ .video-grid { grid-template-columns: 1fr; } }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--deep); border-radius: 18px; overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.video-embed .play { width: 76px; height: 76px; border-radius: 50%; background: rgba(247,243,236,.12); border: 1.5px solid rgba(247,243,236,.55); display: flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease; }
.video-embed:hover .play { transform: scale(1.07); background: rgba(247,243,236,.22); }
.video-embed .play svg { width: 28px; height: 28px; fill: var(--on-deep); margin-left: 4px; }
.video-embed .video-soon { position: absolute; bottom: 16px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--on-deep-mute); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap { text-align: center; color: var(--muted); font-size: 14px; margin-top: 14px; }

/* booking embed placeholder */
.book-embed { min-height: 480px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 28px; max-width: 860px; margin: 0 auto; }
.book-embed .cal-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--caramel); margin-bottom: 20px; }
.book-embed .cal-icon svg { width: 32px; height: 32px; }
.book-embed h3 { font-family: 'Fraunces',serif; font-optical-sizing: auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 1.5rem; color: var(--deep); margin-bottom: 8px; }
.book-embed p { color: var(--muted); font-size: 15px; max-width: 34em; }
.book-alt { text-align: center; color: var(--muted); font-size: 15px; margin-top: 26px; }

/* coach / coming-soon note */
.coach-note { max-width: 680px; margin: 0 auto; background: var(--paper-2); border: 1px dashed var(--border); border-radius: 16px; padding: 30px 32px; text-align: center; }
.coach-note .soon-badge { display: inline-block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--caramel-dark); font-weight: 700; background: rgba(184,115,51,.10); padding: 5px 13px; border-radius: 20px; margin-bottom: 13px; }
.coach-note h3 { font-family: 'Fraunces',serif; font-optical-sizing: auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 1.35rem; color: var(--deep); margin-bottom: 8px; }
.coach-note p { color: var(--muted); font-size: 15px; max-width: 40em; margin: 0 auto; }

/* level test quiz */
.quiz { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 40px; box-shadow: 0 14px 40px rgba(16,24,32,.06); }
.quiz-bar { height: 6px; background: var(--paper-2); border-radius: 6px; overflow: hidden; margin-bottom: 9px; }
.quiz-bar span { display: block; height: 100%; background: var(--gold); width: 0; transition: width .35s ease; }
.quiz-count { font-size: 12px; color: var(--muted); letter-spacing: .5px; margin-bottom: 26px; }
.quiz-q { font-family: 'Fraunces',serif; font-optical-sizing: auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 1.55rem; color: var(--deep); line-height: 1.25; margin-bottom: 26px; }
.quiz-opts { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt { text-align: left; padding: 16px 20px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--paper); font-size: 16px; color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.quiz-opt:hover { border-color: var(--caramel); background: #fff; transform: translateX(3px); }
.quiz-result { text-align: center; }
.quiz-level { font-family: 'Fraunces',serif; font-optical-sizing: auto; font-optical-sizing: auto; font-variation-settings: "wght" 640, "SOFT" 10, "WONK" 1; font-size: 4rem; color: var(--caramel); line-height: 1; margin-bottom: 4px; }
.quiz-level-name { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 20px; }
.quiz-result p { color: var(--text); font-size: 16px; max-width: 34em; margin: 0 auto 14px; }
.quiz-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.quiz-retake { background: transparent; border: 1.5px solid var(--deep); color: var(--deep); border-radius: 8px; padding: 13px 28px; font-weight: 600; cursor: pointer; font-size: 14px; font-family: inherit; transition: background .2s ease, color .2s ease; }
.quiz-retake:hover { background: var(--deep); color: var(--on-deep); }
.quiz-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; max-width: 40em; margin-left: auto; margin-right: auto; }
@media (max-width: 560px){ .quiz { padding: 28px 20px; } .quiz-q { font-size: 1.3rem; } .quiz-level { font-size: 3.2rem; } }


/* ============================================================
   ==============   REDESIGN LAYER  (appended)   ==============
   Airline-guide-informed polish, layered on top via the cascade
   so all of the original rules + your edits are preserved.
   Palette uses the exact Cathay / Etihad hexes where they
   harmonise. All Fraunces is now full-wonk + softer/bolder
   (handled above by unifying every font-variation-settings).
   To fine-tune the letterforms, edit the UNIFIED line: raise
   "wght" for bolder, raise "SOFT" for rounder.
   ============================================================ */
:root{
  /* neutral ladder */
  --pearl:#FCFBF5;          /* Etihad Pearl PANTONE 9060C */
  --card:#FCFBF5;           /* cards upgrade from flat white to warm pearl */
  /* darks for the plum jewel-box */
  --aubergine:#270015;      /* Etihad Black 5C */
  --burgundy:#66001F;       /* Cathay First Class Burgundy PMS 202 */
  /* two golds (Etihad golden-rule #2) */
  --gold-bright:#E4A72C;    /* on dark grounds */
  --gold-deep:#C4921B;      /* on light grounds */
  /* category accents (exact brand hexes where harmonious) */
  --teal:#007681;           /* Cathay Pantone 323 - Conversation */
  --green:#5D7D34;          /* Etihad secondary green - Group */
  --plum:#6E2A4E;           /* mid plum for light-ground pills */
  /* facet mosaic, reused on every dark ground */
  --facets: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20560'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cg%20stroke='%23E4A72C'%20stroke-opacity='0.13'%20stroke-width='0.6'%3E%3Cpolygon%20points='0.0,0.0%20115.4,0.0%2081.0,94.4'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='0.0,0.0%2081.0,94.4%200.0,138.3'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='115.4,0.0%20245.7,0.0%2081.0,94.4'%20fill='none'/%3E%3Cpolygon%20points='245.7,0.0%20200.7,139.7%2081.0,94.4'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='245.7,0.0%20400.7,0.0%20200.7,139.7'%20fill='none'/%3E%3Cpolygon%20points='400.7,0.0%20378.6,71.0%20200.7,139.7'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='400.7,0.0%20476.7,0.0%20526.3,153.6'%20fill='none'/%3E%3Cpolygon%20points='400.7,0.0%20526.3,153.6%20378.6,71.0'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='476.7,0.0%20600.8,0.0%20526.3,153.6'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='600.8,0.0%20614.8,122.4%20526.3,153.6'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='600.8,0.0%20728.4,0.0%20687.1,68.5'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='600.8,0.0%20687.1,68.5%20614.8,122.4'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='728.4,0.0%20809.7,0.0%20687.1,68.5'%20fill='none'/%3E%3Cpolygon%20points='809.7,0.0%20842.7,72.5%20687.1,68.5'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='809.7,0.0%20961.1,0.0%20930.3,88.9'%20fill='none'/%3E%3Cpolygon%20points='809.7,0.0%20930.3,88.9%20842.7,72.5'%20fill='none'/%3E%3Cpolygon%20points='961.1,0.0%201092.5,0.0%20930.3,88.9'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='1092.5,0.0%201034.9,108.8%20930.3,88.9'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='1092.5,0.0%201200.0,0.0%201034.9,108.8'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='1200.0,0.0%201200.0,106.7%201034.9,108.8'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='0.0,138.3%2081.0,94.4%20121.8,236.6'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='0.0,138.3%20121.8,236.6%200.0,254.7'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='81.0,94.4%20200.7,139.7%20121.8,236.6'%20fill='none'/%3E%3Cpolygon%20points='200.7,139.7%20240.0,238.6%20121.8,236.6'%20fill='none'/%3E%3Cpolygon%20points='200.7,139.7%20378.6,71.0%20355.9,204.1'%20fill='none'/%3E%3Cpolygon%20points='200.7,139.7%20355.9,204.1%20240.0,238.6'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='378.6,71.0%20526.3,153.6%20527.8,268.4'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='378.6,71.0%20527.8,268.4%20355.9,204.1'%20fill='none'/%3E%3Cpolygon%20points='526.3,153.6%20614.8,122.4%20632.7,242.6'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='526.3,153.6%20632.7,242.6%20527.8,268.4'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='614.8,122.4%20687.1,68.5%20702.3,199.8'%20fill='none'/%3E%3Cpolygon%20points='614.8,122.4%20702.3,199.8%20632.7,242.6'%20fill='none'/%3E%3Cpolygon%20points='687.1,68.5%20842.7,72.5%20819.7,185.5'%20fill='none'/%3E%3Cpolygon%20points='687.1,68.5%20819.7,185.5%20702.3,199.8'%20fill='none'/%3E%3Cpolygon%20points='842.7,72.5%20930.3,88.9%20985.6,215.1'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='842.7,72.5%20985.6,215.1%20819.7,185.5'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='930.3,88.9%201034.9,108.8%20985.6,215.1'%20fill='none'/%3E%3Cpolygon%20points='1034.9,108.8%201113.3,213.8%20985.6,215.1'%20fill='none'/%3E%3Cpolygon%20points='1034.9,108.8%201200.0,106.7%201113.3,213.8'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='1200.0,106.7%201200.0,265.0%201113.3,213.8'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='0.0,254.7%20121.8,236.6%200.0,367.1'%20fill='none'/%3E%3Cpolygon%20points='121.8,236.6%2072.1,310.0%200.0,367.1'%20fill='none'/%3E%3Cpolygon%20points='121.8,236.6%20240.0,238.6%2072.1,310.0'%20fill='none'/%3E%3Cpolygon%20points='240.0,238.6%20279.4,333.3%2072.1,310.0'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='240.0,238.6%20355.9,204.1%20406.1,326.8'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='240.0,238.6%20406.1,326.8%20279.4,333.3'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='355.9,204.1%20527.8,268.4%20439.0,347.6'%20fill='none'/%3E%3Cpolygon%20points='355.9,204.1%20439.0,347.6%20406.1,326.8'%20fill='none'/%3E%3Cpolygon%20points='527.8,268.4%20632.7,242.6%20626.7,315.4'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='527.8,268.4%20626.7,315.4%20439.0,347.6'%20fill='none'/%3E%3Cpolygon%20points='632.7,242.6%20702.3,199.8%20626.7,315.4'%20fill='none'/%3E%3Cpolygon%20points='702.3,199.8%20680.4,321.0%20626.7,315.4'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='702.3,199.8%20819.7,185.5%20884.6,359.1'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='702.3,199.8%20884.6,359.1%20680.4,321.0'%20fill='none'/%3E%3Cpolygon%20points='819.7,185.5%20985.6,215.1%20884.6,359.1'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='985.6,215.1%20923.3,313.3%20884.6,359.1'%20fill='none'/%3E%3Cpolygon%20points='985.6,215.1%201113.3,213.8%20923.3,313.3'%20fill='none'/%3E%3Cpolygon%20points='1113.3,213.8%201041.7,296.6%20923.3,313.3'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='1113.3,213.8%201200.0,265.0%201200.0,362.6'%20fill='none'/%3E%3Cpolygon%20points='1113.3,213.8%201200.0,362.6%201041.7,296.6'%20fill='none'/%3E%3Cpolygon%20points='0.0,367.1%2072.1,310.0%20125.7,443.3'%20fill='none'/%3E%3Cpolygon%20points='0.0,367.1%20125.7,443.3%200.0,419.1'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='72.1,310.0%20279.4,333.3%20125.7,443.3'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='279.4,333.3%20210.3,468.8%20125.7,443.3'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='279.4,333.3%20406.1,326.8%20210.3,468.8'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='406.1,326.8%20324.6,460.9%20210.3,468.8'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='406.1,326.8%20439.0,347.6%20443.2,440.9'%20fill='none'/%3E%3Cpolygon%20points='406.1,326.8%20443.2,440.9%20324.6,460.9'%20fill='none'/%3E%3Cpolygon%20points='439.0,347.6%20626.7,315.4%20572.4,427.4'%20fill='none'/%3E%3Cpolygon%20points='439.0,347.6%20572.4,427.4%20443.2,440.9'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='626.7,315.4%20680.4,321.0%20765.2,475.2'%20fill='none'/%3E%3Cpolygon%20points='626.7,315.4%20765.2,475.2%20572.4,427.4'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='680.4,321.0%20884.6,359.1%20765.2,475.2'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='884.6,359.1%20821.2,482.5%20765.2,475.2'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='884.6,359.1%20923.3,313.3%20821.2,482.5'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='923.3,313.3%20932.2,438.5%20821.2,482.5'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='923.3,313.3%201041.7,296.6%201114.0,460.7'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='923.3,313.3%201114.0,460.7%20932.2,438.5'%20fill='none'/%3E%3Cpolygon%20points='1041.7,296.6%201200.0,362.6%201114.0,460.7'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='1200.0,362.6%201200.0,412.2%201114.0,460.7'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='0.0,419.1%20125.7,443.3%20167.0,560.0'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='0.0,419.1%20167.0,560.0%200.0,560.0'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='125.7,443.3%20210.3,468.8%20212.5,560.0'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='125.7,443.3%20212.5,560.0%20167.0,560.0'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='210.3,468.8%20324.6,460.9%20212.5,560.0'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='324.6,460.9%20336.8,560.0%20212.5,560.0'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='324.6,460.9%20443.2,440.9%20506.2,560.0'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='324.6,460.9%20506.2,560.0%20336.8,560.0'%20fill='%23E4A72C'%20opacity='0.04'/%3E%3Cpolygon%20points='443.2,440.9%20572.4,427.4%20583.6,560.0'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='443.2,440.9%20583.6,560.0%20506.2,560.0'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3Cpolygon%20points='572.4,427.4%20765.2,475.2%20583.6,560.0'%20fill='none'/%3E%3Cpolygon%20points='765.2,475.2%20700.4,560.0%20583.6,560.0'%20fill='none'/%3E%3Cpolygon%20points='765.2,475.2%20821.2,482.5%20700.4,560.0'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='821.2,482.5%20799.0,560.0%20700.4,560.0'%20fill='none'/%3E%3Cpolygon%20points='821.2,482.5%20932.2,438.5%20920.7,560.0'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='821.2,482.5%20920.7,560.0%20799.0,560.0'%20fill='%23E4A72C'%20opacity='0.05'/%3E%3Cpolygon%20points='932.2,438.5%201114.0,460.7%20920.7,560.0'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='1114.0,460.7%201087.9,560.0%20920.7,560.0'%20fill='%23E4A72C'%20opacity='0.09'/%3E%3Cpolygon%20points='1114.0,460.7%201200.0,412.2%201087.9,560.0'%20fill='%23E4A72C'%20opacity='0.12'/%3E%3Cpolygon%20points='1200.0,412.2%201200.0,560.0%201087.9,560.0'%20fill='%23E4A72C'%20opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- BRAND BAR: Cathay colour-tab + Etihad gold hairline + bright-gold kicker ---- */
.brandbar{ position:relative; }
.brandbar .kc{ color:var(--gold-bright); }
.brandbar .kc::before{ content:''; display:inline-block; width:7px; height:14px; background:var(--gold-bright); border-radius:2px; margin-right:11px; vertical-align:-2px; }
.brandbar::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent); }

/* ---- NAV: Etihad small-caps descriptor under the wordmark (CSS-only, every page) ---- */
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text .b1{ display:block; }
.brand-text .b1::after{ content:"with Jana Malas"; display:block; font-family:'Public Sans',sans-serif; font-variation-settings:normal; font-optical-sizing:auto; font-weight:700; font-size:0.28em; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-deep); margin-top:0.4em; }

/* ---- two-gold rule on dark grounds ---- */
.foot-rule{ background:var(--gold-bright); }
.foot-col h5{ color:var(--gold-bright); }

/* ---- SERVICE / FEATURE CARDS: colour-coding (Cathay) + line icons + pills ---- */
.card-item{ position:relative; border-top:4px solid var(--bar,var(--gold)); }
.card-item.exam{ --bar:var(--blue); }
.card-item.biz{  --bar:var(--caramel); }
.card-item.conv{ --bar:var(--teal); }
.card-item.grp{  --bar:var(--green); }
.card-item .card-icon{ background:color-mix(in srgb,var(--bar,var(--gold)) 12%,#fff); border-color:color-mix(in srgb,var(--bar,var(--gold)) 28%,var(--border)); color:var(--bar,var(--gold)); }
.card-item .card-icon svg{ width:24px; height:24px; display:block; }
.card-item:hover{ border-top-color:var(--bar,var(--gold)); }
.tagpill{ display:inline-block; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; color:var(--bar,var(--gold-deep)); background:color-mix(in srgb,var(--bar,var(--gold)) 11%,#fff); padding:4px 10px; border-radius:20px; margin-bottom:12px; }

/* ---- CEFR / level pills (Cathay colour-coding) ---- */
.lvl-pill{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; padding:4px 11px; border-radius:30px; border:1px solid; }
.lvl-pill.a1,.lvl-pill.a2{ color:var(--green);     border-color:color-mix(in srgb,var(--green) 42%,#fff); background:color-mix(in srgb,var(--green) 9%,#fff); }
.lvl-pill.b1{ color:var(--teal);      border-color:color-mix(in srgb,var(--teal) 42%,#fff);  background:color-mix(in srgb,var(--teal) 9%,#fff); }
.lvl-pill.b2{ color:var(--blue-text); border-color:color-mix(in srgb,var(--blue) 42%,#fff);  background:color-mix(in srgb,var(--blue) 9%,#fff); }
.lvl-pill.c1,.lvl-pill.c2{ color:var(--plum);      border-color:color-mix(in srgb,var(--plum) 42%,#fff);  background:color-mix(in srgb,var(--plum) 9%,#fff); }

/* ---- STATS BAND: facet mosaic + bright-gold figures ---- */
.band{ background-color:var(--deep); background-image:var(--facets); background-size:cover; background-position:center; }
.band::before,.band::after{ display:none; }
.stat .num{ color:var(--gold-bright); }

/* ---- TESTIMONIALS: pearl cards, colour-coded top edge, level pills ---- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tcard{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-top:3px solid var(--lvl,var(--gold)); border-radius:16px; padding:22px 22px 20px; transition:transform .28s ease, box-shadow .28s ease; }
.tcard:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,24,32,.09); }
.tcard .qmark{ font-family:'Fraunces',serif; font-optical-sizing:auto; font-variation-settings:"wght" 640,"SOFT" 10,"WONK" 1; font-size:3rem; line-height:.7; height:26px; color:var(--lvl,var(--gold)); }
.tcard p{ font-size:14.5px; color:var(--text); margin:8px 0 16px; flex:1; }
.tcard .trow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.tcard .tname{ font-size:13px; font-weight:700; color:var(--deep); letter-spacing:.3px; }
.tcard.a1,.tcard.a2{ --lvl:var(--green); }
.tcard.b1{ --lvl:var(--teal); }
.tcard.b2{ --lvl:var(--blue); }
.tcard.c1,.tcard.c2{ --lvl:var(--plum); }
@media(max-width:880px){ .tgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .tgrid{ grid-template-columns:1fr; } }

/* ---- PLUM COLOUR-MOMENT: jewel-box tile floating on cream (your pick: variant 1) ---- */
.cta-band{ background:var(--paper); color:var(--text); overflow:visible; padding:66px 0; }
.cta-band::before,.cta-band::after{ display:none; }
.cta-band .cta-inner{ position:relative; max-width:900px; margin:0 auto; border-radius:26px; overflow:hidden; padding:74px 40px; color:var(--on-deep);
  background-color:var(--burgundy);
  background-image:var(--facets), radial-gradient(circle at 78% 22%, rgba(228,167,44,.20), transparent 52%), linear-gradient(155deg, var(--burgundy), var(--aubergine) 94%);
  background-size:cover, cover, cover; background-repeat:no-repeat; background-position:center;
  box-shadow:0 34px 74px rgba(102,0,31,.30), 0 4px 14px rgba(0,0,0,.12); }
.cta-band .cta-inner h2{ color:#fff; }
.cta-band .cta-inner p{ color:rgba(242,235,221,.82); }
.cta-band .cta-inner .dash{ background:var(--gold-bright); }
.cta-band .btn-primary{ background:var(--gold-bright); color:#3a2708; box-shadow:0 12px 28px rgba(0,0,0,.26); }
.cta-band .btn-primary:hover{ background:#efb43f; }
@media(max-width:560px){ .cta-band .cta-inner{ padding:52px 24px; } }

/* ---- FOOTER: keep the dark anchor + proportions-engine ribbon as a quiet signature ---- */
footer{ position:relative; }
footer::after{ content:''; display:block; height:6px; background:linear-gradient(90deg,
  var(--paper) 0 74%, var(--deep) 74% 84%, var(--gold-bright) 84% 92%, var(--teal) 92% 96%, var(--burgundy) 96% 100%); }


/* ============================================================
   DISPLAY-TIER FRAUNCES  (wordmark + big headlines)
   Restores the narrow "display" cut (opsz 144) you liked, and
   uses weight 700 to open up the horizontal bar of the "e".
   Smaller headings above keep font-optical-sizing:auto, which
   is what keeps their small "e"s legible. To nudge the wordmark
   weight, change "wght" 700 here (A=660 / B=700 / C=740).
   ============================================================ */
.brand-text .b1,
.foot-word,
.foot-brand .b1,
.wonk,
.nowonk,
.quiz-level{
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144, "wght" 660, "SOFT" 10, "WONK" 1;
}


/* ============================================================
   ROUND 2 + SITEWIDE UNIFICATION  (appended — wins the cascade)
   Locked picks: M1 "gate-code" pills · A5 gold-rule section
   icons · B1 (numberless, ink-glyph) feature cards.
   Two-family colour system:
     LEVELS   = cool "ascent" spectrum (6 unique)
     PURPOSES = warm / neutral categorical set (5 unique)
   ============================================================ */
:root{
  /* LEVELS — cool ascent */
  --lv-a1:#4F7A3E; --lv-a2:#0E7C7B; --lv-b1:#1E6FB0;
  --lv-b2:#5A4B9C; --lv-c1:#92366A; --lv-c2:#9C2A40;
  /* PURPOSES — warm / neutral categorical */
  --pp-ielts:#B58A12; --pp-toefl:#C2621C; --pp-biz:#3F4853;
  --pp-esp:#9E472A;   --pp-conv:#C2566A;
}

/* ---- WORDMARK: push "with Jana Malas" right (s ≈ under the d of Mastered) ---- */
.brand-text .b1::after{ text-align:right; margin-right:-0.3em; }

/* ---- HOME SERVICE CARDS → new GOAL colours + solid gate-code tag ---- */
.card-item.exam{ --bar:var(--pp-ielts); }
.card-item.biz { --bar:var(--pp-biz); }
.card-item.conv{ --bar:var(--pp-conv); }
.card-item.grp { --bar:var(--pp-esp); }
.tagpill{ color:#fff; background:var(--bar,var(--gold-deep)); }

/* ---- FEATURE CARDS (qualities / "what's included") → B1: cream + gold keyline + ink glyph, no category colour ---- */
.cards.feature-cards .card-item{ --bar:var(--gold-deep); border-top-width:3px; }
.cards.feature-cards .card-item:hover{ border-color:var(--gold); border-top-color:var(--gold-deep); }
.cards.feature-cards .card-icon{ background:transparent; border:0; width:auto; height:auto; color:var(--deep); margin-bottom:14px; }
.cards.feature-cards .card-icon svg{ width:30px; height:30px; }

/* ---- LEVEL PILLS (testimonials etc.) → solid gate codes in the 6 level colours ---- */
.lvl-pill{ border:0; color:#fff; border-radius:7px; font-family:'Fraunces',Georgia,serif; letter-spacing:.3px; }
.lvl-pill.a1{ background:var(--lv-a1); }
.lvl-pill.a2{ background:var(--lv-a2); }
.lvl-pill.b1{ background:var(--lv-b1); }
.lvl-pill.b2{ background:var(--lv-b2); }
.lvl-pill.c1{ background:var(--lv-c1); }
.lvl-pill.c2{ background:var(--lv-c2); }
.tcard.a1{ --lvl:var(--lv-a1); } .tcard.a2{ --lvl:var(--lv-a2); }
.tcard.b1{ --lvl:var(--lv-b1); } .tcard.b2{ --lvl:var(--lv-b2); }
.tcard.c1{ --lvl:var(--lv-c1); } .tcard.c2{ --lvl:var(--lv-c2); }

/* ---- STEPS → drop orphan blue ring, add gold "route" connector, unify ---- */
.step-num::after{ border-color:var(--gold-deep); }
.steps{ position:relative; }
.steps .step{ position:relative; z-index:1; }
.steps.four::before{ content:""; position:absolute; top:30px; left:12.5%; right:12.5%; height:2px; z-index:0;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb,var(--gold-deep) 80%,transparent) 0 9px, transparent 9px 18px); opacity:.6; }
@media (max-width:920px){ .steps.four::before{ display:none; } }

/* ---- LEVELS / GOALS panel (services) → gate-code chips, purpose dots, A5 icons ---- */
.eml-grid .eml-cefr{ color:#fff; background:var(--gold-deep); box-shadow:0 1px 2px rgba(16,24,32,.14); }
.eml-grid .eml-cefr.lv-a1{ background:var(--lv-a1); } .eml-grid .eml-cefr.lv-a2{ background:var(--lv-a2); }
.eml-grid .eml-cefr.lv-b1{ background:var(--lv-b1); } .eml-grid .eml-cefr.lv-b2{ background:var(--lv-b2); }
.eml-grid .eml-cefr.lv-c1{ background:var(--lv-c1); } .eml-grid .eml-cefr.lv-c2{ background:var(--lv-c2); }
.eml-grid .eml-dot{ width:12px; height:12px; border-radius:5px; background:var(--gold-deep); box-shadow:none; }
.eml-grid li.pp-ielts .eml-dot{ background:var(--pp-ielts); box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-ielts) 15%,transparent); }
.eml-grid li.pp-toefl .eml-dot{ background:var(--pp-toefl); box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-toefl) 15%,transparent); }
.eml-grid li.pp-biz   .eml-dot{ background:var(--pp-biz);   box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-biz) 15%,transparent); }
.eml-grid li.pp-esp   .eml-dot{ background:var(--pp-esp);   box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-esp) 15%,transparent); }
.eml-grid li.pp-conv  .eml-dot{ background:var(--pp-conv);  box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-conv) 15%,transparent); }
/* A5 gold-rule section icons (replaces the dark badge) */
.eml-grid .eml-badge{ width:auto; height:auto; border-radius:0; background:transparent; color:var(--deep); flex-direction:column; gap:6px; }
.eml-grid .eml-badge svg{ width:26px; height:26px; }
.eml-grid .eml-badge::after{ content:""; width:26px; height:3px; border-radius:2px; background:var(--gold); }
/* tile left accent: Levels = ascent gradient, Goals = gold */
.eml-grid .eml-tile:nth-child(1)::before{ background:linear-gradient(180deg,var(--lv-a1),var(--lv-a2),var(--lv-b1),var(--lv-b2),var(--lv-c1),var(--lv-c2)); }
.eml-grid .eml-tile:nth-child(2)::before{ background:var(--gold-deep); }

/* ---- FINAL CTA → full-bleed burgundy band, stats-band proportions ---- */
.cta-band{ background-color:var(--burgundy);
  background-image:var(--facets), radial-gradient(circle at 80% 28%, rgba(228,167,44,.18), transparent 55%), linear-gradient(155deg,var(--burgundy),var(--aubergine) 96%);
  background-size:cover; background-position:center; padding:0; overflow:hidden; }
.cta-band::before,.cta-band::after{ display:none; }
.cta-band .cta-inner{ max-width:1120px; margin:0 auto; padding:52px 28px; border-radius:0; background:none; box-shadow:none; }
.cta-band .cta-inner .dash{ background:var(--gold-bright); margin:0 auto 16px; }
.cta-band .cta-inner h2{ color:#fff; font-size:2.4rem; margin-bottom:12px; }
.cta-band .cta-inner p{ color:rgba(242,235,221,.85); margin-bottom:24px; }

/* ---- ROTATING TESTIMONIAL (single, auto-advancing ~18s) ---- */
.trotate{ max-width:760px; margin:0 auto; text-align:center; position:relative; }
.trot-mark{ font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; font-variation-settings:"wght" 640,"SOFT" 10,"WONK" 1; font-size:4rem; line-height:.4; height:34px; color:var(--gold-deep); }
.trot-stage{ transition:opacity .5s ease; min-height:170px; }
.trot-stage.fade{ opacity:0; }
.trot-quote{ font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; font-variation-settings:"wght" 460,"SOFT" 10,"WONK" 1; font-style:italic; font-size:1.7rem; line-height:1.4; color:var(--deep); margin:6px auto 22px; max-width:34ch; text-wrap:balance; }
.trot-meta{ display:flex; align-items:center; justify-content:center; gap:12px; }
.trot-name{ font-size:14px; font-weight:700; color:var(--deep); letter-spacing:.3px; }
.trot-dots{ display:flex; gap:9px; justify-content:center; margin-top:24px; }
.trot-dot{ width:8px; height:8px; border-radius:50%; background:var(--border); border:0; padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.trot-dot.on{ background:var(--gold-deep); transform:scale(1.25); }
@media (max-width:560px){ .trot-quote{ font-size:1.4rem; } }


/* ============================================================
   MOBILE / RESPONSIVE LAYER  (appended)
   One stylesheet, one set of files — these @media blocks only
   fire at narrow widths, so the desktop design is untouched.
   Main addition: a hamburger that opens a dark slide-down menu.
   (Previously the nav links were simply hidden below 760px with
   nothing to replace them.)
   ============================================================ */

/* hamburger lives in the bar; hidden on desktop */
.nav-toggle{ display:none; }
.nav-toggle-cb{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

@media (max-width: 870px){
  .nav-inner{ position:relative; }

  /* show + style the hamburger */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; margin-right:-8px; padding:0 11px;
    background:transparent; border:0; cursor:pointer; border-radius:9px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{ display:block; width:24px; height:2px; background:var(--deep); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease; transform-origin:center; }
  .nav-toggle-cb:focus-visible + .nav-toggle{ outline:2px solid var(--blue-bright); outline-offset:2px; }
  /* morph to an X when open */
  .nav-toggle-cb:checked + .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle-cb:checked + .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-cb:checked + .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* the existing .nav-links becomes a dark slide-down panel */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--deep); border-top:1px solid #243441;
    box-shadow:0 24px 40px rgba(16,24,32,.28);
    padding:10px 22px 22px; max-height:calc(100vh - 120px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .nav-toggle-cb:checked ~ .nav-links{ opacity:1; visibility:visible; transform:none; }

  /* links: large tappable rows (override desktop display:none + underline ::after) */
  .nav-links a:not(.nav-cta){
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 2px; font-size:18px; font-weight:600; color:var(--on-deep);
    font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;
    font-variation-settings:"wght" 600,"SOFT" 10,"WONK" 1;
    border-bottom:1px solid #243441;
  }
  .nav-links a:not(.nav-cta)::after{
    content:"\203A"; position:static; width:auto; height:auto; background:none;
    color:var(--gold-bright); font-family:'Public Sans',sans-serif; font-size:20px; transition:none;
  }
  .nav-links a:not(.nav-cta):hover, .nav-links a.active{ color:#fff; }

  /* Book CTA → full-width gold button inside the menu */
  .nav-cta{ display:block; margin-top:16px; text-align:center;
    background:var(--gold-bright); color:#3a2708 !important; padding:15px; font-size:15px; }
  .nav-cta:hover{ background:#efb43f; transform:none; }
}

/* keep the floating hero chips on-screen once the hero stacks */
@media (max-width: 860px){
  .chip-1{ left:6px; }
  .chip-2{ right:6px; }
}

/* tighten rhythm + type at phone widths */
@media (max-width: 620px){
  section.block{ padding:54px 0; }
  .section-head{ margin-bottom:38px; }
  .section-head h2{ font-size:2.05rem; }
  .page-hero{ padding:60px 0 4px; }
  .cta-band .cta-inner{ padding:46px 22px; }
}
@media (max-width: 520px){
  .hero{ padding:54px 0 58px; }
  .hero h1{ font-size:2.7rem; }
  .btns{ flex-direction:column; align-items:stretch; }
  .btns .btn{ width:100%; text-align:center; }
  .cta-band .cta-inner h2{ font-size:2rem; }
}


/* ---- Booking page: mosaic + gold border CONTAINED to the calendar panel ---- */
section.book-band{ padding:40px 0 56px; }
section.book-band .wrap{ max-width:1220px; }
section.book-band #my-cal-inline-free-discovery-call{
  background-color:var(--burgundy);
  background-image:var(--facets), radial-gradient(circle at 80% 28%, rgba(228,167,44,.18), transparent 55%), linear-gradient(155deg,var(--burgundy),var(--aubergine) 96%);
  background-size:cover; background-position:center;
  border:1px solid rgba(216,155,58,.40);
  box-shadow:0 24px 50px rgba(16,24,32,.18);
  padding-top:44px;   /* shifts the calendar DOWN inside the frame — raise to push it lower, lower to raise it */
}
@media (max-width:620px){ section.book-band{ padding:30px 0 44px; } }