@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-800.woff2) format('woff2')}@font-face{font-family:Nunito;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-900.woff2) format('woff2')}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format('woff2')}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format('woff2')}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/inter-800.woff2) format('woff2')}

:root{--ink:#153f5c;--ink2:#0e2c42;--gold:#e0a63c;--goldt:#946510;--goldt-lg:#b07d18;--goldd:#e8b459;--gold-soft:#f6ecd6;--bg:#faf8f3;--card:#fff;--line:#e8e2d4;--mut:#6f6a5e;--r:18px;--maxw:1120px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:#20201b;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:Nunito,Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nb{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:Nunito;font-weight:900;font-size:21px;letter-spacing:-.6px;color:var(--ink)}
.brand .dot{color:var(--gold)}
nav.m{display:flex;gap:2px;margin-left:auto;align-items:center}
nav.m a{padding:9px 13px;border-radius:11px;font-size:14.5px;font-weight:600;color:#3c4740}
nav.m a:hover{background:var(--gold-soft)}
nav.m a.on{background:var(--gold-soft);color:var(--ink)}
select.cur{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 9px;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer}
.btn{display:inline-block;padding:12px 22px;border-radius:13px;font-weight:800;font-size:14.5px;cursor:pointer;border:none;transition:.15s;font-family:Nunito}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--ink);color:#fff!important}
.btn-p:hover{box-shadow:0 8px 22px rgba(21,63,92,.3)}
.btn-o{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-g{background:var(--gold);color:#3a2a07!important}
/* A guide that is finished but not yet in the shop. Same shape as the real
   buy button so the card does not jump when the checkout link lands, but
   plainly not clickable -- a dead gold button reads as a broken shop. */
.btn-soon{background:#d9d2c4;color:#5c5344!important}
.btn-sm{padding:8px 15px;font-size:13px;border-radius:11px}
nav.m a.cta{color:#fff;background:var(--ink);margin-left:8px}
nav.m a.cta:hover{background:var(--ink2);color:#fff}
.mcta{display:none}
.mb{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;font-size:18px;cursor:pointer}
/* ---------- hero ---------- */
.hero{padding:74px 0 60px;text-align:center;background:radial-gradient(900px 400px at 50% -80px,#f4ecd9 0%,rgba(250,248,243,0) 70%)}
.hero .biglogo{margin-bottom:26px}
.hero h1{font-size:clamp(34px,5.6vw,58px);font-weight:900;letter-spacing:-1.6px;line-height:1.06;max-width:840px;margin:0 auto;color:var(--ink)}
.hero p.sub{font-size:clamp(16px,2.3vw,19.5px);color:var(--mut);max-width:680px;margin:20px auto 30px}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
/* ONE primary action. The gold button is the thing we actually sell; the
   outline button is the browse-first alternative; the free guide is a text
   link underneath. Three buttons of equal weight made the visitor choose,
   and a visitor who has to choose often chooses nothing. */
.btn-hero{font-size:16.5px;padding:15px 30px;box-shadow:0 10px 26px rgba(224,166,60,.36)}
.hero .btns .btn-o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff!important;backdrop-filter:blur(4px)}
.hero .btns .btn-o:hover{background:rgba(255,255,255,.24)}
.freelink{margin-top:16px;font-size:14.5px;font-weight:700}
.freelink a{color:#f7e6c2;text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 10px rgba(8,20,32,.55)}
.freelink a:hover{color:var(--gold)}
.hero .supp{margin-top:24px;font-size:13.5px;color:var(--mut);font-weight:600;letter-spacing:.3px}

.heroph{position:relative;overflow:hidden}
.heroph .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroph .hveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,30,42,.62),rgba(13,30,42,.55) 55%,rgba(250,248,243,.97) 96%)}
.heroph h1{color:#fff;text-shadow:0 2px 22px rgba(8,20,32,.45)}
.heroph p.sub{color:#eee8da;text-shadow:0 1px 12px rgba(8,20,32,.5)}
.heroph .supp{color:#f6f1e3;background:rgba(12,30,42,.42);display:inline-block;padding:8px 18px;border-radius:22px;backdrop-filter:blur(4px)}
.pb-count{font-size:13.5px;color:#5c5233;background:#fff;border:1px dashed #ddc98f;border-radius:12px;padding:11px 14px;margin-bottom:14px}
.pb-count b{color:var(--ink)}
.statbar{display:flex;justify-content:center;gap:clamp(18px,5vw,64px);padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.statbar b{display:block;font-family:Nunito;font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.statbar span{font-size:12px;letter-spacing:1.6px;color:var(--mut);font-weight:700;text-transform:uppercase}
/* ---------- sections ---------- */
section.blk{padding:58px 0}
section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec{font-size:clamp(25px,3.6vw,36px);font-weight:900;letter-spacing:-1px;margin-bottom:12px;color:var(--ink)}
p.lead{color:var(--mut);max-width:740px;margin-bottom:26px;font-size:16.5px}
ul.feat{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start}
ul.feat li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;font-size:14.5px;color:#4b4a42}
ul.feat li b{display:block;margin-bottom:3px;font-size:15px;color:var(--ink);font-family:Nunito;font-weight:800}
/* Screen-reader-only section headings. They exist so the document outline never
   jumps h1 -> h3: a sighted reader sees the card grid, a screen reader and a
   crawler get the h2 that names it. */
.revs{margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
/* ---------- site-wide testimonials ---------- */
.tsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.tsum .tst{color:var(--gold);font-size:22px;letter-spacing:3px;line-height:1}
.tsum b{font-family:Nunito;font-size:26px;color:var(--ink);font-weight:900;line-height:1}
.tsum span{font-size:14px;color:var(--mut);font-weight:700}
.twrap{position:relative;margin-top:24px}
.ttrack{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start}
.ttrack.car{display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:16px;padding-bottom:6px;scrollbar-width:none}
.ttrack.car::-webkit-scrollbar{display:none}
.ttrack.car>.tcard{flex:0 0 clamp(260px,31.4%,380px);scroll-snap-align:start}
.tcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 20px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(21,63,92,.04)}
.tcard .tst{color:var(--gold);font-size:15px;letter-spacing:2px;line-height:1;position:relative}
.tcard h3{font-family:Nunito;font-size:16.5px;font-weight:900;color:var(--ink);margin:12px 0 0;line-height:1.35;position:relative}
.tcard p{margin:9px 0 0;font-size:14.5px;line-height:1.68;color:#3f4a44;position:relative}
.tcard .tby{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px}
.tby .tav{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:Nunito;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.tby>span>b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25}
.tby>span>span{display:block;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.2px}
.tnav{display:flex;align-items:center;gap:10px;margin-top:18px}
.tnav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:16px;font-weight:800;cursor:pointer;line-height:1;transition:.15s}
.tnav button:hover{background:var(--gold-soft)}
.tnav .tct{font-size:13px;font-weight:700;color:var(--mut);margin-left:2px}
@media(max-width:760px){.ttrack.car>.tcard{flex:0 0 86%}}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.rev .st{color:#e0a63c;font-size:15px;letter-spacing:2px;line-height:1}
.rev p{margin:8px 0 10px;font-size:14.5px;color:var(--ink)}
.rev .who{font-size:12.5px;font-weight:800;color:var(--mut)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.pcard h3{font-size:20px;font-weight:900;color:var(--ink)}
.pcard p{font-size:14px;color:var(--mut);flex:1}
.pcard .btn{align-self:flex-start}
/* ---------- destination cards ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 22px}
.filters input[type=search]{flex:1;min-width:200px;padding:11px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:14.5px;background:#fff}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{padding:8px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--line);font-size:13px;font-weight:700;cursor:pointer;color:#4b5661}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
select.filt{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;font-weight:600;font-size:13.5px;cursor:pointer}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:7px;transition:.15s}
.dcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,63,92,.1)}
.dcard .co{font-size:12px;letter-spacing:1.6px;font-weight:800;color:var(--mut);text-transform:uppercase}
.dcard h3{font-size:21px;font-weight:900;letter-spacing:-.5px;color:var(--ink)}
.dcard .hk{font-size:13.5px;color:var(--mut);flex:1}
.dcard .mt{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#4b5661;border-top:1px dashed var(--line);padding-top:9px;margin-top:5px}
.gbadge{position:absolute;z-index:2;top:14px;right:14px;background:var(--gold);color:#3a2a07;font-size:12px;font-weight:900;padding:4px 10px;border-radius:14px;letter-spacing:.4px;font-family:Nunito}
.reglab{margin:32px 0 12px;font-size:12px;letter-spacing:2.6px;font-weight:900;color:var(--goldt);text-transform:uppercase;font-family:Nunito}
/* ---------- city page ---------- */
.cph{padding:52px 0 26px}
.cph .co{font-size:12.5px;letter-spacing:2px;font-weight:800;color:var(--mut);text-transform:uppercase}
.cph h1{font-size:clamp(32px,5.4vw,50px);font-weight:900;letter-spacing:-1.4px;margin:6px 0 8px;color:var(--ink)}
.cph p.hk{color:var(--mut);max-width:700px;font-size:17.5px}
.vibes{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.vibe{background:var(--gold-soft);border:1px solid #eddebb;color:#7c5c1c;font-size:12px;font-weight:800;padding:5px 12px;border-radius:16px}
.guidebar{background:linear-gradient(120deg,var(--ink),#1e5a80);border-radius:var(--r);color:#f3eee2;padding:26px 28px;margin:18px 0;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.guidebar .t{flex:1;min-width:240px}
.guidebar h3{font-size:21px;font-weight:900;color:#fff;margin-bottom:5px}
.guidebar p{font-size:13.5px;color:#cfd8ce}
.guidebar .btns{display:flex;gap:9px;flex-wrap:wrap}
.tiergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:8px 0 8px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.tier.hl{border:2px solid var(--gold);background:#fffdf6}
.tier .lb{font-size:12px;letter-spacing:2.2px;font-weight:900;color:var(--mut)}
.tier .v{font-family:Nunito;font-size:30px;font-weight:900;color:var(--ink);margin:5px 0 2px}
.tier .v small{font-size:12px;color:var(--mut);font-weight:700}
.tier .d{font-size:12px;color:var(--mut)}
.maths{background:var(--gold-soft);border:1px solid #eddebb;border-radius:var(--r);padding:20px 22px;margin:10px 0 6px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.maths b.ttl{font-family:Nunito;font-size:16px;color:var(--ink)}
.maths input,.maths select{border:1.5px solid #e2cf9d;border-radius:10px;padding:9px 11px;font-size:14px;font-weight:700;background:#fff;width:86px}
.maths select{width:auto}
.maths .out{font-family:Nunito;font-size:23px;font-weight:900;color:var(--ink);margin-left:auto}
.secgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.w2{grid-column:1/-1}
.card h3{font-family:Nunito;font-size:16.5px;font-weight:900;color:var(--ink);margin-bottom:11px;display:flex;gap:8px;align-items:center}
.rows{display:grid;gap:0}
.row{display:flex;justify-content:space-between;gap:12px;padding:7.5px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.row:last-child{border-bottom:none}
.row .n{color:#43423a}
.row .n small{display:block;color:#78726a;font-size:12px}
.row .p{font-weight:800;color:var(--ink);white-space:nowrap}
.note{background:var(--gold-soft);border-radius:12px;padding:11px 14px;font-size:12.5px;color:#6b5320;margin-top:11px}
.chip{display:inline-block;background:#f1ede2;border:1px solid var(--line);border-radius:14px;padding:4px 11px;font-size:12px;font-weight:700;color:#4b5661;margin:0 5px 6px 0}
.tip{border-left:3px solid var(--gold);padding:8px 0 8px 14px;margin:10px 0;font-size:13.5px;color:#43423a}
.tip .by{font-size:12px;color:var(--mut);font-weight:700;margin-top:4px}
.tip b.tt{color:var(--ink)}
.kv{font-size:13.5px;color:#43423a;margin-bottom:9px}
.kv b{color:var(--ink)}
.clim{width:100%;height:auto}
.legend{display:flex;gap:14px;font-size:12px;color:var(--mut);font-weight:700;margin-top:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.bk{display:inline-block;margin:22px 0 0;padding:6px 2px;min-height:26px;font-weight:800;font-size:14px;color:var(--mut)}
.bk:hover{color:var(--ink)}
/* ---------- photos & colour ---------- */
.phimg{width:100%;height:100%;object-fit:cover;display:block}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:34px}
.stile{position:relative;height:150px;border-radius:16px;overflow:hidden;display:block;transition:.15s}
.stile:hover{transform:translateY(-3px)}
.stile .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,20,0) 40%,rgba(10,25,20,.65))}
.stile b{position:absolute;left:12px;bottom:9px;color:#fff;font-family:Nunito;font-size:14.5px;font-weight:900;letter-spacing:-.2px}
.dph{height:112px;margin:-20px -20px 12px;overflow:hidden;position:relative}
.dstripe{height:7px;margin:-20px -20px 14px;border-radius:18px 18px 0 0}
.gcard .top{position:relative;padding:0;height:160px;overflow:hidden}
.gcard .top .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,28,22,.12) 30%,rgba(10,28,22,.78))}
.gcard .top .tx{position:absolute;left:18px;bottom:12px;right:14px}
.cityhero{position:relative;height:270px;border-radius:var(--r);overflow:hidden;margin:4px 0 16px;background:linear-gradient(120deg,#1e5a80,#153f5c)}
.cityhero .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,20,0) 45%,rgba(10,25,20,.5))}
/* ---------- guide preview ---------- */
.prevrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:14px}
.pgwrap{cursor:zoom-in}
.pgwrap:hover .pg{transform:translateY(-3px);box-shadow:0 14px 32px rgba(21,63,92,.18)}
.pgcap{text-align:center;font-size:12px;font-weight:700;color:var(--mut);margin-top:8px}
.pg{aspect-ratio:210/297;background:#fbf9f3;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(21,63,92,.1);overflow:hidden;position:relative;font-size:6.4px;transition:.15s}
.pg *{line-height:1.45}
.pg .pad{padding:9% 8%}
.pg .nhd{display:flex;gap:.5em;align-items:baseline;border-bottom:.22em solid #2b463d;padding-bottom:.55em;margin-bottom:.9em}
.pg .nhd b{font-family:Nunito;font-size:1.85em;font-weight:900;color:#232323;letter-spacing:-.03em}
.pg .lede{font-style:italic;font-size:1.15em;color:#0f5b8c;margin-bottom:1em;font-family:Georgia,serif}
.pg .tg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7em;margin-bottom:1em}
.pg .tc{background:#fff;border:1px solid #ece7db;border-radius:.9em;padding:1em .6em;text-align:center}
.pg .tc.hl{border:.18em solid #6bbf9c;background:#eef6f0}
.pg .tc .l{font-size:.78em;letter-spacing:.18em;color:#8a857a;font-weight:800}
.pg .tc .v{font-family:Nunito;font-size:2em;font-weight:900;color:#0f5b8c;margin:.15em 0}
.pg .tc .d{font-size:.75em;color:#6f6a5e}
.pg .rw{display:flex;justify-content:space-between;padding:.5em 0;border-bottom:.5px dashed #e2dccc;font-size:.95em;color:#43423a}
.pg .rw b{color:#153f5c}
.pg .vc{background:#fff;border:1px solid #ece7db;border-radius:.9em;padding:.9em 1em;margin-bottom:.7em}
.pg .vc .t{font-weight:800;color:#0f5b8c;font-size:1.1em;font-family:Nunito}
.pg .vc .m{font-size:.72em;letter-spacing:.1em;color:#c56a36;font-weight:800;text-transform:uppercase;margin:.15em 0 .3em}
.pg .vc .d{font-size:.86em;color:#4b4a42}
.pg .tipbx{background:#fbf3da;border:1px solid #ecd6a0;border-radius:.9em;padding:.9em 1em;font-size:.9em;color:#5c5233}
.pg .foot{position:absolute;left:8%;right:8%;bottom:3.5%;border-top:.5px solid #e2dccc;padding-top:.6em;display:flex;justify-content:space-between;font-size:.75em;color:#9a948a}
.pg .cols{columns:2;column-gap:1.4em}
.pg .ck{font-size:.92em;color:#43423a;padding:.28em 0;break-inside:avoid}
.pg .ck::before{content:"✓ ";color:#e0a63c;font-weight:900}
.pg.cover{background:#153f5c;color:#fff}
.pg.cover .cvimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.pg.cover .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,30,42,.25),rgba(12,30,42,.2) 40%,rgba(12,30,42,.86))}
.pg.cover .in{position:absolute;left:9%;right:9%;bottom:7%}
.pg.cover .pillt{position:absolute;top:6%;right:8%;background:rgba(255,255,255,.92);color:#1e463b;font-size:.75em;letter-spacing:.14em;font-weight:800;padding:.5em 1em;border-radius:2em}
.pg.cover .kick{font-size:.8em;letter-spacing:.22em;color:#e0a63c;font-weight:800}
.pg.cover .big{font-family:Nunito;font-size:3.1em;font-weight:900;letter-spacing:-.03em;line-height:1;margin:.15em 0}
.pg.cover .sub{font-family:Georgia,serif;font-style:italic;font-size:.95em;opacity:.95;margin-bottom:.8em}
.pg.cover .wm{font-family:Nunito;font-size:1.25em;font-weight:900}
.pg.cover .wm i{color:#e0a63c;font-style:normal}
/* promo box */
.prev2{grid-template-columns:repeat(3,minmax(170px,220px));align-items:start;justify-content:start}
.prev2 .promobox{grid-column:1/-1}
@media(max-width:900px){.prev2{grid-template-columns:1fr 1fr}}
.pg.real{aspect-ratio:auto;padding:0}
.pg.real img{display:block;width:100%;height:auto}
.promobox{background:linear-gradient(135deg,#fffdf6,#fdf6e6);border:1.5px solid #ecd9ae;border-radius:var(--r);padding:26px 28px}
.promobox h3{font-family:Nunito;font-size:21px;font-weight:900;color:var(--ink);margin-bottom:8px;letter-spacing:-.4px}
.pb-lead{font-size:14px;color:#5c5233;margin-bottom:16px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
@media(min-width:920px){.statgrid{grid-template-columns:repeat(5,1fr)}}
.stt{background:#fff;border:1px solid #ecd9ae;border-radius:14px;padding:13px 10px;text-align:center}
.stt b{display:block;font-family:Nunito;font-size:25px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.stt span{font-size:12px;color:#7a6a3c;font-weight:700;line-height:1.3;display:block;margin-top:2px}
.pb-list{list-style:none;display:grid;gap:9px}
.pb-list li{padding-left:24px;position:relative;font-size:13.5px;color:#4b4a42}
.pb-list li::before{content:"★";position:absolute;left:0;color:var(--gold);font-weight:900}
.pb-list b{color:var(--ink)}
/* ---- preview effects (flashy but classy) ---- */
.prev2 .pgwrap{position:relative;animation:pvUp .6s cubic-bezier(.2,.7,.2,1) both}
.prev2 .pgwrap:nth-child(1){animation-delay:.05s}.prev2 .pgwrap:nth-child(2){animation-delay:.16s}.prev2 .pgwrap:nth-child(3){animation-delay:.27s}
@keyframes pvUp{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.prev2 .pg{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.prev2 .pgwrap:hover .pg{transform:translateY(-8px) scale(1.025) rotate(-.4deg);border-color:#e0a63c;box-shadow:0 10px 24px rgba(21,63,92,.16),0 24px 54px rgba(224,166,60,.28)}
.prev2 .pgwrap:hover .pgcap{color:#a97b1f}
.pgcap{transition:color .3s}
.pgcap::before{content:'◆';color:#e0a63c;font-size:8px;margin-right:6px;vertical-align:2px}
.pg .sheen{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 48%,rgba(255,240,200,.42) 52%,transparent 62%);background-size:280% 100%;background-position:120% 0;animation:pvSheen 5.6s ease-in-out infinite}
@keyframes pvSheen{0%,55%{background-position:130% 0}78%{background-position:-40% 0}100%{background-position:-40% 0}}
.pgwrap:hover .sheen{animation-duration:1.6s}
.pvbadge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:6;background:linear-gradient(120deg,#e0a63c,#c98a2c);color:#33240a;font-size:12px;font-weight:900;letter-spacing:1.4px;padding:5px 12px;border-radius:20px;box-shadow:0 4px 12px rgba(180,130,40,.4);white-space:nowrap}
.pg.real img{transition:transform .5s ease}
.pgwrap:hover .pg.real img{transform:scale(1.03)}
.stt{transition:transform .3s,box-shadow .3s}
.stt:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(224,166,60,.22);border-color:#e0a63c}
.lbx{animation:lbFade .22s ease both}
.lbx .pg{animation:lbZoom .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{transform:scale(.92);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.prev2 .pgwrap,.pg .sheen,.lbx,.lbx .pg{animation:none!important}}
.lbx{position:fixed;inset:0;background:rgba(12,20,17,.78);z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lbx .pg{font-size:13px;width:min(88vw,460px);aspect-ratio:210/297;box-shadow:0 30px 80px rgba(0,0,0,.5)}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}.stile{height:110px}.lbx .pg{font-size:10.5px}}
/* guides hub */
.gvid{max-width:452px;margin:0 auto;text-align:center}
/* ---- per-guide flip-through, restored from the 2 Aug index ---- */
.cvid{position:relative;flex:0 0 250px;width:250px;margin:0;border-radius:14px;overflow:hidden;background:#f7f4ea;box-shadow:0 10px 26px rgba(0,0,0,.30);cursor:pointer;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.22)}
.gbmain{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
@media(max-width:860px){.cvid{flex:1 1 100%;width:100%;max-width:360px;margin:4px auto 0}}
.cvid video{width:100%;height:100%;object-fit:cover;display:block}
.cvid .cvplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:rgba(20,49,42,.26);cursor:pointer;transition:background .2s}
.cvid .cvplay:hover{background:rgba(20,49,42,.4)}
.cvid .cvplay span{display:flex;align-items:center;gap:8px;background:#e0a63c;color:#14312a;font:800 13px/1 system-ui,-apple-system,sans-serif;padding:11px 17px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.cvid.on .cvplay{display:none}
.cvcap{text-align:center;font:600 13px/1.5 system-ui,-apple-system,sans-serif;color:#56625c;margin:0 0 26px}
.gvid video{width:100%;aspect-ratio:1/1;pointer-events:none;user-select:none;-webkit-user-select:none;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 14px 34px rgba(21,63,92,.14);background:#f7f4ea;display:block}
.gshow{display:grid;grid-template-columns:1fr minmax(0,452px) 1fr;gap:20px;align-items:stretch;margin:14px 0 38px}
.gbx{position:relative;border-radius:var(--r);padding:22px 22px 20px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 14px 34px rgba(21,63,92,.09);display:flex;flex-direction:column;justify-content:center}
.gbx:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--gold),#f3d79a,var(--gold))}
.gbx.dark{background:linear-gradient(155deg,var(--ink) 0%,var(--ink2) 100%);border-color:var(--ink2);color:#f3efe4}
.gbx h3{margin:0 0 15px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--goldt);font-weight:800}
.gbx.dark h3{color:var(--gold)}
.grow{display:flex;align-items:baseline;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.grow:first-of-type{border-top:0}
.gnum{font-family:Nunito,Inter,Arial,sans-serif;font-size:27px;line-height:1;font-weight:700;color:var(--ink);min-width:66px;text-align:right;letter-spacing:-.5px}
.gbx.dark .gnum{color:var(--gold)}
.glab{font-size:13.5px;line-height:1.45;color:var(--mut)}
.glab b{color:var(--ink);font-weight:700;display:block;font-size:14px}
.gbx.dark .glab{color:#c9d6cf}
.gbx.dark .glab b{color:#fff}
.gwhy{list-style:none;margin:0;padding:0}
.gwhy li{position:relative;padding:0 0 12px 26px;font-size:13.8px;line-height:1.5;color:#d6e2ec}
.gwhy li:last-child{padding-bottom:0}
.gwhy li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--gold);font-weight:800;font-size:14px}
.gwhy b{color:#fff}
.gbxft{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:var(--gold);letter-spacing:.04em;font-weight:700}
.gbx.light .gbxft{border-top-color:var(--line);color:var(--mut);font-weight:600}
@media(max-width:980px){.gshow{grid-template-columns:1fr;gap:16px}.gvid{order:-1}}
/* the price — stated plainly wherever a guide can be bought */
.gprice{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;margin:0 0 26px;padding:20px 26px;border-radius:var(--r);background:linear-gradient(135deg,var(--gold-soft) 0%,#fdf7e9 100%);border:1px solid #ecd8a8;box-shadow:0 10px 26px rgba(224,166,60,.16)}
.gprice .amt{font-family:Nunito,Inter,Arial,sans-serif;font-size:42px;font-weight:900;line-height:1;color:var(--ink);letter-spacing:-1.5px;white-space:nowrap}
.gprice .amt small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:#7d5f16;margin-top:7px;text-transform:uppercase}
.gprice .txt{font-size:14.5px;line-height:1.55;color:#5f5847}
.gprice .txt b{color:var(--ink);display:block;font-size:17px;font-family:Nunito,Inter,Arial,sans-serif;font-weight:900;margin-bottom:3px}
@media(max-width:560px){.gprice{grid-template-columns:1fr;gap:11px;text-align:center;padding:18px}.gprice .amt{font-size:36px}}
.buy2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.bx2{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px 26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(21,63,92,.08)}
.bx2:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--gold),#f3d79a,var(--gold))}
.bx2.dk2{background:linear-gradient(155deg,var(--ink) 0%,var(--ink2) 100%);border-color:var(--ink2)}
.eyebrow2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--goldt)}
.big2{font-family:Nunito,Inter,Arial,sans-serif;font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-1.5px;color:var(--ink);margin:8px 0 10px}
.bx2.dk2 .big2{color:var(--gold)}
.bx2 p{margin:0 0 20px;font-size:15px;line-height:1.62;color:var(--mut)}
.bx2.dk2 p{color:#d6e2ec}
.bx2 .btn{align-self:flex-start;margin-top:auto}
@media(max-width:760px){.buy2{grid-template-columns:1fr}}
.shopnote{margin:18px 0 0;padding:15px 19px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 12px 12px 0;font-size:14.5px;line-height:1.6;color:#5f5847}
.shopnote b{color:var(--ink)}
.shopnote a{color:var(--ink)}
/* Fixed column counts rather than auto-fit, because the "centre a lonely last
   card" rule below needs to know how many columns there actually are. */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
/* The Everything card spans the full row, so the remaining cards start at
   child 2 -- which makes a lone card in the last row land on 3n+2. Left hard
   against the edge it reads as a bug, so drop it into the middle column. */
.bgrid>.bcard:last-child:nth-child(3n+2){grid-column:2}
@media(max-width:980px){.bgrid{grid-template-columns:repeat(2,1fr)}
 .bgrid>.bcard:last-child:nth-child(3n+2){grid-column:auto}
 .bgrid>.bcard:last-child:nth-child(2n){grid-column:1/-1;max-width:calc(50% - 8px);margin-left:auto;margin-right:auto}}
@media(max-width:640px){.bgrid{grid-template-columns:1fr}
 .bgrid>.bcard:last-child:nth-child(2n){max-width:none}}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;transition:.15s}
/* The card art sits flush to the three edges it touches, so the picture reads
   as the top of the card rather than as a photo dropped inside it. The square
   is declared in CSS as well as on the <img>, so nothing reflows on load. */
.bart{display:block;margin:-20px -20px 15px;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;overflow:hidden;background:#efeae0}
.bart img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
a.bcard{text-decoration:none;color:inherit;cursor:pointer}
a.bcard:hover{border-color:var(--gold)}
a.bcard:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a.bcard.ball:hover{border-color:var(--gold)}
a.bcard:hover .btn-g{transform:translateY(-1px);box-shadow:0 8px 22px rgba(224,166,60,.42)}
.bcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,63,92,.1)}
/* align-content, not just align-items: the rows are content-sized and the card
   is as tall as its 300px picture, so without this the spare height is shared
   out between the rows and the text falls apart down the card. */
.bcard.ball{grid-column:1/-1;background:linear-gradient(150deg,var(--ink) 0%,var(--ink2) 100%);border-color:var(--ink2);text-align:left;display:grid;grid-template-columns:300px 1fr;column-gap:28px;align-items:center;align-content:center}
/* The full-width card puts its art down the left instead of across the top.
   Two grid children only -- picture, then everything else in .bbody -- so the
   picture cannot stretch the rows the words sit in. */
.bbody{display:flex;flex-direction:column;min-width:0}
.bcard.ball>.bart{margin:-20px 0 -20px -20px;border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);align-self:stretch}
.bcard.ball>.bart img{height:100%}
/* Back to a plain stacked card on a phone. align-items has to be reset with
   it: inherited from the desktop grid rule it becomes the flex cross axis and
   centres every line, which no other card on the page does. */
@media(max-width:640px){.bcard.ball{display:flex;align-items:stretch}
 .bcard.ball>.bart{margin:-20px -20px 15px;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}}
.bcard.ball h3,.bcard.ball .bline{color:#fff}
.bcard.ball .bcities{color:#a9bcb2}
.bcard.ball .bprice .now{color:var(--gold)}
.bcard.ball .bprice .was{color:#8fa79b}
/* The contents table on the bundle page: what is in each bundle, in words, for
   the reader who wants to check a city is included before paying. */
.btable{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.brow{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.brow>div:first-child{min-width:0}
.brow b{display:block;font-size:16px;font-weight:900;color:var(--ink)}
.brow span{display:block;font-size:13.5px;color:#5f6b64;margin-top:3px}
.brow i{display:block;font-size:12.5px;color:#8a938d;font-style:normal;margin-top:3px}
.brp{flex:0 0 auto;text-align:right}
.brp b{font-size:21px;color:#1c6b4b}
.brp .btn{margin-top:7px}
@media(max-width:640px){.brow{flex-direction:column;align-items:flex-start;gap:10px}.brp{text-align:left}}
.bhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.bcard h3{margin:0;font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
.bcount{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7d5f16;background:var(--gold-soft);border-radius:20px;padding:5px 11px;white-space:nowrap}
.bline{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:var(--mut)}
.bprice{display:flex;align-items:baseline;gap:10px}
.bprice .now{font-family:Nunito,Inter,Arial,sans-serif;font-size:31px;font-weight:900;color:var(--ink);letter-spacing:-1px}
.bprice .was{font-size:15px;color:#78726a;text-decoration:line-through}
.beach{margin:9px 0 0;font-size:12.5px;color:var(--mut);line-height:1.4}
.bcard.ball .beach{color:#c9d6ce}
.bfree{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#7d5f16;background:var(--gold-soft);border-radius:10px;padding:7px 11px}
.bcard.ball .bfree{color:var(--gold);background:rgba(224,166,60,.13)}
.bsave{margin-top:7px;align-self:flex-start;display:inline-block;font-size:12.5px;font-weight:800;color:#3a2b08;background:var(--gold);border-radius:9px;padding:6px 11px}
.bcities{margin:13px 0 0;font-size:12.5px;line-height:1.55;color:#78726a}
.bcard .btn{align-self:flex-start;margin-top:14px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.gcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.gcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,63,92,.1)}
.gcard .top{background:linear-gradient(120deg,var(--ink),#1e5a80);color:#fff;padding:18px 20px}
.gcard .top .co{font-size:12px;letter-spacing:1.6px;font-weight:800;color:#b9c8bb;text-transform:uppercase}
.gcard .top h3{font-size:21px;font-weight:900;letter-spacing:-.4px}
.gcard .bd{padding:16px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard .bd p{font-size:13px;color:var(--mut);flex:1}
.gcard .mt{font-size:12px;font-weight:700;color:#4b5661}
/* footer */
footer{background:var(--ink);color:#adbbb0;margin-top:74px}
footer .fw{max-width:var(--maxw);margin:0 auto;padding:42px 22px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;font-size:13.5px}
footer a{color:#e7e2d4;font-weight:700}
/* The nav row is the tap target. 44px tall, comfortably apart. The links
   inside the two sentences are prose and stay inline. */
.fl a{display:inline-flex;align-items:center;min-height:44px;padding:2px 8px}
footer a:hover{color:var(--gold)}
footer .kofi a{color:var(--gold)}
.fl{display:flex;gap:16px;flex-wrap:wrap}
.samplebox{background:var(--gold-soft);border:1px solid #eddebb;border-radius:var(--r);padding:22px 24px}
.samplebox h3{font-size:16px;font-weight:900;color:var(--ink);margin-bottom:7px}
.samplebox p{font-size:14px;color:#5c5233}
.checklist{list-style:none;display:grid;gap:9px}
.checklist li{padding-left:26px;position:relative;font-size:15px}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:900}
.contactbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;max-width:560px}
.contactbox a.mail{display:inline-block;background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-weight:800;margin:14px 0;font-family:Nunito}
.phnote{font-size:12.5px;color:var(--mut);font-style:italic;margin-top:8px}
/* ---------- free guide ---------- */
.freerib{background:linear-gradient(90deg,#f6ecd6,#fdf8ea 52%,#f6ecd6);border-top:1px solid #ecd9ae;border-bottom:1px solid #ecd9ae}
.freeflag{position:absolute;top:12px;left:12px;z-index:3;background:#e0a63c;color:#153f5c;font-family:Nunito;font-weight:900;font-size:12px;letter-spacing:1.5px;padding:5px 11px;border-radius:20px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.freeflag-bar{position:static;display:inline-block;margin-bottom:10px}
.gcard-free .top{outline:3px solid #e0a63c;outline-offset:-3px}
.guidebar-free{border-color:#e0a63c!important;box-shadow:0 0 0 1px #e0a63c inset}
.freerib .in{max-width:var(--maxw);margin:0 auto;padding:12px 22px;display:flex;gap:13px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14.5px;font-weight:700;color:#5c4a1c;text-align:center}
.freerib .tag{background:var(--ink);color:var(--gold);font-family:Nunito;font-weight:900;font-size:12px;letter-spacing:1.7px;padding:5px 11px;border-radius:20px;white-space:nowrap}
/* inline-block + padding so the tap target clears 24px on a phone;
   the text itself does not move */
.freerib a{color:#7c5c1c;font-weight:900;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;padding:10px 8px;min-height:44px}
.freeblk{background:linear-gradient(155deg,#0e2c42,#153f5c 46%,#1e5a80);color:#e9e4d6;position:relative;overflow:hidden}
.freeblk::after{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(224,166,60,.20),rgba(224,166,60,0) 68%);pointer-events:none}
.freeblk .wrap{position:relative;z-index:1}
.eyebrow{font-family:Nunito;font-weight:900;letter-spacing:2.6px;font-size:12px;color:var(--gold);text-transform:uppercase;margin-bottom:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow i{font-style:normal;background:rgba(224,166,60,.14);border:1px solid rgba(224,166,60,.4);padding:4px 10px;border-radius:20px;letter-spacing:1.4px}
.freeblk h1,.freeblk h2{font-family:Nunito;font-weight:900;letter-spacing:-1.1px;font-size:clamp(30px,5.2vw,54px);line-height:1.04;color:#fff;margin-bottom:14px;max-width:15ch}
.freeblk h1 em,.freeblk h2 em{font-style:normal;color:var(--gold)}
.freeblk .fl2{font-size:17.5px;line-height:1.62;color:#c7d6e4;max-width:660px}
.freeblk .fl2 b{color:#fff}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:14px;margin:28px 0 6px}
.fgrid .fc{background:rgba(255,255,255,.05);border:1px solid rgba(224,166,60,.26);border-radius:16px;padding:18px 20px}
.fgrid .fc b{display:block;font-family:Nunito;font-weight:900;font-size:16px;color:#fff;margin-bottom:6px}
.fgrid .fc span{display:block;font-size:13.5px;line-height:1.55;color:#b9c7bb}
.freesplit{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
@media(max-width:900px){.freesplit{grid-template-columns:1fr;gap:26px}.freeblk h1,.freeblk h2{max-width:none}}
.freecard{background:rgba(255,255,255,.055);border:1px solid rgba(224,166,60,.3);border-radius:var(--r);padding:26px}
.freecard h3{font-family:Nunito;font-weight:900;font-size:20px;color:#fff;margin-bottom:6px}
.freecard>p{font-size:14px;color:#bdcddc;margin-bottom:16px;line-height:1.55}
.tick{list-style:none;display:grid;gap:10px;margin-top:6px}
.tick li{padding-left:27px;position:relative;font-size:15px;line-height:1.5;color:#d6dfd6}
.tick li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--gold);font-weight:900;font-size:16px}
.tick li b{color:#fff}
.freebtn{border-color:#ecd9ae!important;background:var(--gold-soft)!important;color:#5c4a1c!important}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:22px;counter-reset:s}
.steps .st{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px}
.steps .st::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:20px;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#3a2a07;font-family:Nunito;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center}
.steps .st b{display:block;font-family:Nunito;font-weight:900;font-size:16.5px;color:var(--ink);margin:6px 0 6px}
.steps .st span{font-size:13.5px;color:var(--mut);line-height:1.55}
/* ---------- the honest-review ask ---------- */
.askbox{position:relative;overflow:hidden;background:linear-gradient(150deg,#fffdf7 0%,#fdf4e3 52%,#faedd0 100%);border:1px solid #eeddb4;border-radius:var(--r);padding:36px 38px 30px;box-shadow:0 12px 38px rgba(122,92,22,.10)}
.askbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#f0cd85,var(--gold) 45%,#c99a2e)}
.askbox::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(224,166,60,.16),rgba(224,166,60,0) 70%);pointer-events:none}
.askbox>*{position:relative;z-index:1}
.askeye{font-family:Nunito;font-weight:900;letter-spacing:2.5px;font-size:12px;text-transform:uppercase;color:#8a6410;margin-bottom:11px}
.askeye i{font-style:normal;color:var(--gold);margin-right:7px}
.askbox h3{font-family:Nunito;font-weight:900;letter-spacing:-.7px;font-size:clamp(25px,3.6vw,36px);line-height:1.07;color:var(--ink);margin-bottom:14px}
.askbox p{font-size:15.5px;line-height:1.68;color:#5d5537;margin-bottom:13px;max-width:66ch}
.askbox p.askl{font-size:17.5px;line-height:1.6;color:#463f22}
.askbox p b{color:var(--ink);font-weight:800}
.askfoot{font-size:13.5px!important;color:#6f6440!important;font-style:italic;margin:15px 0 0!important}
.askline{font-size:13.5px;line-height:1.62;color:#6d6446;margin:13px 0 0;max-width:74ch}
.askline i{font-style:normal;color:var(--gold);margin-right:7px}
.askline a{color:#996d16;font-weight:800;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.askline a:hover{color:var(--ink)}
.freeblk .askline,.guidebar .askline{color:#a8b8a9}
.freeblk .askline a{color:var(--gold)}
.freeblk .askline a:hover{color:#fff}
@media(max-width:640px){.askbox{padding:26px 22px 24px}.askbox h3{letter-spacing:-.3px}}
@media(max-width:640px){.hero{padding:34px 0 46px}.hero .biglogo{display:none}
.hero .btns{flex-direction:column;align-items:stretch}.hero .btns .btn{width:100%}}
/* ---------- forms ---------- */
.fform{display:grid;gap:14px;max-width:600px}
.fform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.fform .row2{grid-template-columns:1fr}}
.fform label{display:block;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.fform input,.fform textarea,.fform select{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:.15s;-webkit-appearance:none;appearance:none}
.fform select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a5e' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.fform input:focus,.fform textarea:focus,.fform select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,166,60,.2)}
.fform textarea{min-height:140px;resize:vertical;line-height:1.55}
.fform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fform .act{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.fform button[disabled]{opacity:.55;cursor:progress;transform:none}
.fstat{font-size:14px;font-weight:700;line-height:1.45}
.fstat.busy{color:var(--mut)}
.fstat.ok{color:#1a6b4b}
.fstat.err{color:#9c4419}
.fstat a{text-decoration:underline;font-weight:800}
.privacy{font-size:12.5px;color:var(--mut);line-height:1.5}
.fform.dark label{color:#a5b8a7}
.fform.dark input,.fform.dark select,.fform.dark textarea{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.22)}
.fform.dark .fstat.ok{color:#f2dda8}
.fform.dark .fstat.err{color:#f4bb90}
.fform.dark .fstat.busy{color:#bdcddc}
.fform.dark .privacy{color:#98a99a}
.fform.dark .fstat a{color:var(--gold)}
.grid2c{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
@media(max-width:900px){.grid2c{grid-template-columns:1fr}}
@media(max-width:880px){
 nav.m{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 18px 18px}
 nav.m.open{display:flex}
 nav.m a{padding:12px}
 .mb{display:block;margin-left:10px}
 .mcta{display:inline-flex;margin-left:auto;color:#fff!important;background:var(--ink);text-decoration:none}
 nav.m a.cta{margin:8px 0 0}
 .hero{padding:50px 0 46px}
}


/* ---- header search (patch_headersearch.py) --------------------------------
   The magnifier is a background SVG rather than an <img> or an icon font: one
   fewer request, and it cannot flash in late over the placeholder text. */
.hsw{position:relative;order:9;flex:1 0 100%;max-width:460px;margin:0 0 10px;min-width:0}
.nb{flex-wrap:wrap;height:auto;min-height:68px;padding-top:10px}
nav.m{top:100%}
.hsw input{width:100%;height:38px;box-sizing:border-box;border:1.5px solid var(--line);border-radius:10px;padding:0 11px 0 32px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8477' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 9px center;background-size:15px}
.hsw input::-webkit-search-cancel-button{cursor:pointer}
.hsw input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.hres{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(30,26,18,.16);max-height:min(66vh,380px);overflow:auto;z-index:90;padding:5px}
.hres[hidden]{display:none}
.hres a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.25}
.hres a:hover,.hres a.on{background:rgba(63,106,91,.11)}
.hres a .fl{font-size:15px;flex:none}
.hres a .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hres a .co{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hres a .tg{margin-left:auto;flex:none;font-size:9.5px;font-weight:800;letter-spacing:.5px;background:#3f6a5b;color:#fff;border-radius:5px;padding:2px 5px}
.hres .no{padding:11px 10px;font-size:13.5px;color:var(--muted)}
.hres .all{display:block;padding:9px 10px;margin-top:3px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:#3f6a5b;text-decoration:none}
.hres .all:hover{text-decoration:underline}
/* A label like "Where to Buy" must not break after "Where". */
nav.m a{white-space:nowrap}
/* Below 1200px the nav and the search cannot share a line without the
   nav wrapping, so the search takes its own row -- the same thing it
   already did on phones, which is where it looks right. */
@media(max-width:880px){
 .hsw{max-width:none}
}

/* The secondary Etsy button (see patch_sell.py). Readable on the navy guide
   bar and on the cream preview panel, without competing with the primary. */
.etsybtn{background:transparent;border-color:#3f6a5b;color:#eef3ef;min-height:44px;display:inline-flex;align-items:center}
.pb-buy .etsybtn,.prevrow .etsybtn{border-color:#d8cdb4;color:#5c4a1c}

/* ---- contrast, measured from painted pixels (see patch_a11y.py) ---------- */
/* Gold text on a light background is 2.0-2.2:1. Fills keep #e0a63c. */
.tsum .tst{color:var(--goldt-lg)}
.tcard .tst{color:var(--goldt)}
.askeye i{color:var(--goldt)}
/* On a dark panel the same gold is too dark, not too light. */
.gbx.dark h3,.gbx.dark .gbxft{color:var(--goldd)}
/* The hero photo is hotlinked from Wikimedia. If it is slow or blocked the
   veil used to sit on cream and the white headline vanished. Navy underneath
   means the hero reads the same either way. */
.heroph{background:#123449}

/* --- Bypass blocks (WCAG 2.4.1 A). Off-screen until it takes focus. -------- */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none;font-family:Nunito,Inter,Arial,sans-serif}
.skip:focus{left:0}
/* main takes focus when the skip link is used; it must not then draw a ring. */
main:focus{outline:none}
/* --- Visible focus (WCAG 2.4.7 AA). The browser default is a 1px outline that
       is invisible on our dark header and on the gold buttons. ------------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
 outline:3px solid #e0a63c;outline-offset:2px;border-radius:4px}
header a:focus-visible,header button:focus-visible,header select:focus-visible,
footer a:focus-visible{outline-color:#ffd98a}
/* --- Print. Somebody will print a city page to carry it around. ----------- */
@media print{
 header,footer,.mb,.cur,.mcta,.gvid,video,.lbx,.freerib{display:none!important}
 body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
 a{color:#000;text-decoration:underline}
 .wrap,main{max-width:none;padding:0 6mm}
 .hero{min-height:0;padding:6mm 0}
 .hbg,.hveil{display:none!important}
 .hero,.hero *{color:#000!important;text-shadow:none!important}
 .card,.dcard,.gcard,.sec,.tier,.row{break-inside:avoid;page-break-inside:avoid;
  box-shadow:none!important;border:1px solid #bbb}
 .btn{border:1px solid #444;color:#000!important;background:none!important}
 h1,h2,h3{break-after:avoid;page-break-after:avoid}
}