/* ==========================================================================
   Josepho — city guide . Builds on main.css (v3): same fonts,
   colours, radii and buttons. Every new class is prefixed cg-.
   ========================================================================== */
:root {
  --cg-primary: #fc623d;
  --cg-primary-dark: #e04a26;
  --cg-secondary: #0953fb;
  --cg-cyan: #90dade;
  --cg-salmon: #ffad9f;
  --cg-beige: #ffe9db;
  --cg-cream: #fff4ed;
  --cg-blue-100: #e6eeff;
  --cg-ink: #333333;
  --cg-ink-soft: #575757;
  --cg-gray: #707070;
  --cg-line: #ead9cd;
  --cg-white: #ffffff;
  --cg-green: #0b893e;
  --cg-radius: 20px;
  --cg-radius-sm: 12px;
  --cg-shadow: 0 1px 2px rgba(51, 51, 51, .06), 0 8px 24px rgba(252, 98, 61, .08);
  --cg-shadow-lift: 0 2px 4px rgba(51, 51, 51, .08), 0 16px 40px rgba(9, 83, 251, .12);
  --cg-header-h: 64px;
}

body.cg-page { background: var(--cg-cream); color: var(--cg-ink); font-family: "CentraNo1-Book", system-ui, sans-serif; }
body.cg-drawer-open { overflow: hidden; }
.cg-external-url { overflow-wrap: anywhere; user-select: text; cursor: text; }
.cg-source-domain { font-size: .85em; overflow-wrap: anywhere; }
.cg-skip-link { position: fixed; left: 16px; top: 10px; z-index: 100; padding: 12px 20px; background: #fff; border-radius: 12px; transform: translateY(-160%); }
.cg-skip-link:focus { transform: none; }
.cg-page [hidden] { display: none !important; }
.cg-page a { color: inherit; }
.cg-page :focus-visible { outline: 3px solid var(--cg-secondary); outline-offset: 3px; border-radius: 6px; }
.cg-wrap { width: 100%; max-width: 1144px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .cg-wrap { padding: 0 24px; } }
.cg-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cg-script { font-family: "LuckyFellas", cursive; font-weight: normal; line-height: .8; }
.cg-black { font-family: "CentraNo1-Black", sans-serif; }
.cg-bold { font-family: "CentraNo1-Extrabold", sans-serif; }
.cg-eyebrow { font-family: "CentraNo1-Extrabold"; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-primary); margin: 0 0 10px; }
.cg-muted { color: var(--cg-gray); }
.cg-small { font-size: 14px; line-height: 1.45; }
.cg-tiny { font-size: 12.5px; line-height: 1.4; }
.cg-num { font-variant-numeric: tabular-nums; }

/* ---------- shared v3 header and breadcrumb ---------- */
.cg-page .header { position: sticky; top: 0; z-index: 50; }

.cg-breadcrumb { font-size: 13.5px; color: var(--cg-gray); padding: 18px 0 10px; }
.cg-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.cg-breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #bdbdbd; }
.cg-breadcrumb a { text-decoration: none; }
.cg-breadcrumb a:hover { color: var(--cg-primary); }

.cg-offer-link { position: relative; z-index: 1; margin: 0 0 22px; padding: 12px 16px; background: var(--cg-beige); border-radius: 12px; font-size: 14px; }
.cg-related__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; list-style: none; padding: 0; margin: 20px 0; }
.cg-related__list li { padding: 20px; border-radius: 16px; background: var(--cg-white); }
.cg-related__list a { display: block; font-family: "CentraNo1-Extrabold", sans-serif; color: var(--cg-secondary); text-decoration: underline; }
.cg-related__list span { display: block; margin-top: 8px; font-size: 14px; color: var(--cg-gray); }

/* ---------- hero ---------- */
.cg-hero { position: relative; display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; margin-bottom: 18px; }
@media (min-width: 1024px) { .cg-hero { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; } }
.cg-hero__main { background: var(--cg-white); border-radius: var(--cg-radius); padding: clamp(24px, 4.5vw, 52px); box-shadow: var(--cg-shadow); position: relative; overflow: hidden; }
.cg-hero__main::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--cg-beige), rgba(255, 233, 219, 0) 70%); pointer-events: none; }
.cg-hero h1 { font-family: "CentraNo1-Black"; color: var(--cg-primary); font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; margin: 0 0 6px; letter-spacing: -.01em; position: relative; z-index: 1; }
.cg-hero h1 .cg-h1-sub { display: block; color: var(--cg-ink); font-size: .52em; line-height: 1.25; margin-top: 10px; letter-spacing: 0; }
.cg-hero__script { display: inline-block; color: var(--cg-secondary); font-size: clamp(2.6rem, 6vw, 4.1rem); transform: rotate(-4deg); margin: 4px 0 14px 4px; position: relative; z-index: 1; }
.cg-hero__lead { font-size: 18px; line-height: 1.55; color: var(--cg-ink-soft); max-width: 640px; margin: 0 0 22px; position: relative; z-index: 1; }
.cg-hero__lead strong { font-family: "CentraNo1-Extrabold"; color: var(--cg-ink); font-weight: normal; }
.cg-journey { position: relative; z-index: 1; }
.cg-journey__label { font-family: "CentraNo1-Extrabold"; font-size: 15px; margin: 0 0 10px; }
.cg-journey__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-chip { appearance: none; border: 2px solid var(--cg-line); background: var(--cg-white); color: var(--cg-ink); border-radius: 999px; padding: 10px 16px; min-height: 46px; font-family: "CentraNo1-Extrabold"; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s; text-decoration: none; }
.cg-chip:hover { border-color: var(--cg-primary); transform: translateY(-1px); }
.cg-chip[aria-pressed="true"], .cg-chip.is-active { background: var(--cg-secondary); border-color: var(--cg-secondary); color: #fff; }
.cg-chip .cg-chip__emoji { font-size: 18px; line-height: 1; }
.cg-hero__byline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; font-size: 13.5px; color: var(--cg-gray); position: relative; z-index: 1; }
.cg-hero__byline span::before { content: "•"; margin-right: 8px; color: var(--cg-salmon); }
.cg-hero__byline span:first-child::before { content: none; }

.cg-hero__side { display: grid; gap: 16px; grid-template-columns: 1fr; align-content: start; }
@media (min-width: 640px) and (max-width: 1023px) { .cg-hero__side { grid-template-columns: 1fr 1fr; } }
.cg-weathercard { background: var(--cg-secondary); color: #fff; border-radius: var(--cg-radius); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; box-shadow: var(--cg-shadow-lift); position: relative; overflow: hidden; text-decoration: none; }
.cg-weathercard::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(144, 218, 222, .22); }
.cg-weathercard__icon { font-size: 54px; line-height: 1; grid-row: span 2; }
.cg-weathercard__t { font-family: "CentraNo1-Black"; font-size: 44px; line-height: 1; }
.cg-weathercard__t small { font-size: 18px; font-family: "CentraNo1-Extrabold"; opacity: .85; margin-left: 1px; vertical-align: 14px; }
.cg-hero__side a.cg-weathercard, .cg-hero__side a.cg-weathercard:hover, .cg-hero__side a.cg-weathercard:focus { color: #fff; }
.cg-hero__side a.cg-weathercard .cg-weathercard__kicker { color: var(--cg-cyan); }
.cg-weathercard__label { font-family: "CentraNo1-Extrabold"; font-size: 15px; }
.cg-weathercard__meta { grid-column: 1 / -1; font-size: 13.5px; opacity: .9; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; position: relative; z-index: 1; }
.cg-weathercard__kicker { grid-column: 1 / -1; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-family: "CentraNo1-Extrabold"; color: var(--cg-cyan); margin-bottom: 4px; }
.cg-weathercard__cta { grid-column: 1 / -1; margin-top: 8px; font-family: "CentraNo1-Extrabold"; font-size: 14px; color: #fff; position: relative; z-index: 1; }
.cg-weathercard__cta::after { content: " →"; }
.cg-minimap { background: var(--cg-white); border-radius: var(--cg-radius); padding: 16px 18px 12px; box-shadow: var(--cg-shadow); }
.cg-minimap svg { width: 100%; height: auto; display: block; max-height: 260px; }
.cg-minimap figcaption { font-size: 13.5px; color: var(--cg-gray); margin-top: 6px; }
.cg-minimap figcaption strong { color: var(--cg-ink); font-family: "CentraNo1-Extrabold"; font-weight: normal; }

/* map shared */
.cg-mapsvg path { fill: #fde3d6; stroke: #fff; stroke-width: 1.2; transition: fill .15s; }
.cg-mapsvg path.is-city { fill: var(--cg-salmon); }
.cg-mapsvg path.is-hot { fill: #ffd2c4; }
.cg-mapsvg path.is-selected { fill: var(--cg-primary); }
.cg-mapsvg a:hover path, .cg-mapsvg a:focus path { fill: #ffc2b2; }
.cg-mapsvg .cg-pin { fill: var(--cg-secondary); stroke: #fff; stroke-width: 2; }
.cg-mapsvg .cg-pin-count { fill: #fff; font-family: "CentraNo1-Extrabold"; font-size: 11px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cg-mapsvg .cg-city-label { font-family: "CentraNo1-Black"; font-size: 15px; fill: var(--cg-ink); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }

/* ---------- sticky sub-nav ---------- */
.cg-subnav { position: sticky; top: var(--cg-header-h); z-index: 40; background: rgba(255, 244, 237, .94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--cg-line); margin: 0 0 8px; }
.cg-subnav__inner { display: flex; align-items: center; gap: 12px; }
.cg-subnav__links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; flex: 1; }
.cg-subnav__links::-webkit-scrollbar { display: none; }
.cg-subnav__links a { white-space: nowrap; text-decoration: none; font-family: "CentraNo1-Extrabold"; font-size: 14px; padding: 8px 14px; border-radius: 999px; color: var(--cg-ink-soft); }
.cg-subnav__links a:hover { background: var(--cg-beige); color: var(--cg-ink); }
.cg-subnav__links a.is-current { background: var(--cg-primary); color: #fff; }
.cg-shortlist-btn { flex: none; border: 2px solid var(--cg-primary); color: var(--cg-primary); background: #fff; border-radius: 999px; padding: 7px 14px; font-family: "CentraNo1-Extrabold"; font-size: 14px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cg-shortlist-btn .cg-count { background: var(--cg-primary); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
.cg-shortlist-btn[data-count="0"] .cg-count { background: #dedede; color: var(--cg-ink); }
@media (max-width: 640px) { .cg-shortlist-btn .cg-shortlist-btn__label { display: none; } }

/* ---------- sections ---------- */
.cg-section { padding: clamp(44px, 7vw, 84px) 0 0; scroll-margin-top: calc(var(--cg-header-h) + 60px); }
.cg-section__head { max-width: 760px; margin-bottom: 26px; }
.cg-section__head h2 { font-family: "CentraNo1-Black"; font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.15; color: var(--cg-primary); margin: 0 0 12px; }
.cg-section__head h2 .cg-script { color: var(--cg-secondary); font-size: 1.55em; display: inline-block; transform: rotate(-3deg); margin-left: 6px; }
.cg-section__head .cg-answer { font-size: 18px; line-height: 1.6; color: var(--cg-ink); margin: 0; }
.cg-section__head .cg-answer strong { font-family: "CentraNo1-Extrabold"; font-weight: normal; }
.cg-h3 { font-family: "CentraNo1-Black"; font-size: 1.35rem; color: var(--cg-ink); margin: 0 0 12px; }

/* ---------- key facts ---------- */
.cg-facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 6px; }
@media (min-width: 900px) { .cg-facts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .cg-facts, .cg-insider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cg-facts::-webkit-scrollbar, .cg-insider::-webkit-scrollbar { display: none; }
  .cg-facts > *, .cg-insider > * { flex: 0 0 80%; scroll-snap-align: start; }
}
.cg-swipe-hint { display: none; }
@media (max-width: 640px) { .cg-swipe-hint { display: block; font-size: 13px; opacity: .75; margin: -4px 0 8px; } }
.cg-fact { background: var(--cg-white); border-radius: var(--cg-radius); padding: 18px 20px 16px; box-shadow: var(--cg-shadow); display: flex; flex-direction: column; gap: 6px; }
.cg-fact__value { font-family: "CentraNo1-Black"; font-size: 30px; line-height: 1.05; color: var(--cg-primary); }
.cg-fact:nth-child(3n+2) .cg-fact__value { color: var(--cg-secondary); }
.cg-fact__label { font-family: "CentraNo1-Extrabold"; font-size: 15px; line-height: 1.3; }
.cg-fact__detail { font-size: 14px; line-height: 1.45; color: var(--cg-ink-soft); margin: 0; }
.cg-fact__src { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--cg-gray); text-decoration: none; }
.cg-fact__src:hover { color: var(--cg-secondary); text-decoration: underline; }

/* ---------- plan (journeys) ---------- */
.cg-plan { background: var(--cg-blue-100); border-radius: var(--cg-radius); padding: clamp(22px, 4vw, 40px); }
.cg-plan__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cg-plan__panel { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cg-plan__panel { grid-template-columns: repeat(4, 1fr); } }
.cg-step { background: var(--cg-white); border-radius: var(--cg-radius-sm); padding: 16px 16px 14px; position: relative; }
.cg-step__when { display: inline-block; background: var(--cg-secondary); color: #fff; font-family: "CentraNo1-Extrabold"; font-size: 12.5px; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.cg-step h3 { font-family: "CentraNo1-Extrabold"; font-size: 16px; margin: 0 0 6px; }
.cg-step p { font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; color: var(--cg-ink-soft); }
.cg-step a.cg-jump { font-family: "CentraNo1-Extrabold"; font-size: 13.5px; color: var(--cg-secondary); text-decoration: none; }
.cg-step a.cg-jump:hover { text-decoration: underline; }
.cg-plan__panel[hidden] { display: none; }

/* ---------- tabs ---------- */
.cg-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 8px; scrollbar-width: thin; }
.cg-tab { appearance: none; border: 0; background: var(--cg-white); border-radius: 999px; padding: 10px 16px; font-family: "CentraNo1-Extrabold"; font-size: 15px; color: var(--cg-ink-soft); cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--cg-line); display: inline-flex; align-items: center; gap: 8px; }
.cg-tab:hover { box-shadow: inset 0 0 0 2px var(--cg-primary); color: var(--cg-ink); }
.cg-tab[aria-selected="true"] { background: var(--cg-primary); color: #fff; box-shadow: none; }
.cg-tab .cg-tab__n { font-size: 12px; background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 2px 7px; }
.cg-tab[aria-selected="true"] .cg-tab__n { background: rgba(255, 255, 255, .25); }
.js .cg-tabpanel[hidden] { display: none; }

/* ---------- how-to steps ---------- */
.cg-howto { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 26px; counter-reset: cgstep; list-style: none; padding: 0; }
@media (min-width: 768px) { .cg-howto { grid-template-columns: repeat(4, 1fr); } }
.cg-howto li { background: var(--cg-white); border-radius: var(--cg-radius-sm); padding: 16px 16px 14px 56px; position: relative; font-size: 14.5px; line-height: 1.5; counter-increment: cgstep; }
.cg-howto li::before { content: counter(cgstep); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--cg-beige); color: var(--cg-primary); font-family: "CentraNo1-Black"; display: grid; place-items: center; }
.cg-howto li strong { display: block; font-family: "CentraNo1-Extrabold"; font-weight: normal; font-size: 15.5px; margin-bottom: 2px; color: var(--cg-ink); }

/* ---------- switch ---------- */
.cg-switch { display: inline-flex; background: var(--cg-white); border-radius: 999px; padding: 4px; box-shadow: inset 0 0 0 2px var(--cg-line); gap: 2px; }
.cg-switch button { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; font-family: "CentraNo1-Extrabold"; font-size: 14px; color: var(--cg-ink-soft); cursor: pointer; }
.cg-switch button[aria-pressed="true"] { background: var(--cg-ink); color: #fff; }
.cg-toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cg-toolbar p { margin: 0; }

/* ---------- table ---------- */
.cg-tablewrap { background: var(--cg-white); border-radius: var(--cg-radius); box-shadow: var(--cg-shadow); overflow: hidden; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cg-table caption { text-align: left; padding: 16px 20px 0; font-size: 13.5px; color: var(--cg-gray); caption-side: bottom; padding-bottom: 14px; }
.cg-table th, .cg-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #f2e6dd; }
.cg-table thead th { font-family: "CentraNo1-Extrabold"; font-weight: normal; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--cg-gray); background: #fffaf7; position: sticky; top: 0; }
.cg-table thead th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.cg-table thead th button::after { content: "↕"; font-size: 11px; opacity: .5; }
.cg-table thead th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.cg-table thead th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.cg-table tbody tr:hover { background: #fffaf7; }
.cg-table .cg-td-name { font-family: "CentraNo1-Extrabold"; }
.cg-table .cg-td-name small { display: block; font-family: "CentraNo1-Book"; color: var(--cg-gray); font-size: 13px; margin-top: 2px; }
.cg-price { font-family: "CentraNo1-Black"; font-size: 17px; color: var(--cg-ink); white-space: nowrap; }
.cg-price--na { font-family: "CentraNo1-Book"; font-size: 14px; color: var(--cg-gray); }
.cg-table .cg-td-notes { font-size: 13.5px; color: var(--cg-ink-soft); max-width: 300px; }
.cg-badge { display: inline-block; font-family: "CentraNo1-Extrabold"; font-size: 12px; border-radius: 999px; padding: 3px 9px; background: var(--cg-beige); color: var(--cg-primary-dark); margin: 2px 4px 2px 0; white-space: nowrap; }
.cg-badge--blue { background: var(--cg-blue-100); color: var(--cg-secondary); }
.cg-badge--green { background: #e3f4ea; color: var(--cg-green); }
.cg-badge--gray { background: #f2f2f2; color: var(--cg-ink-soft); }
@media (max-width: 760px) {
  .cg-table thead { display: none; }
  .cg-table, .cg-table tbody, .cg-table tr, .cg-table td { display: block; width: 100%; }
  .cg-table tr { padding: 14px 16px; border-bottom: 1px solid #f2e6dd; }
  .cg-table td { border: 0; padding: 3px 0; }
  .cg-table td[data-label]::before { content: attr(data-label) " · "; font-family: "CentraNo1-Extrabold"; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cg-gray); }
  .cg-table .cg-td-name::before { content: none !important; }
}

/* ---------- filters ---------- */
.cg-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; background: var(--cg-white); border-radius: var(--cg-radius); padding: 14px 18px; box-shadow: var(--cg-shadow); margin-bottom: 16px; }
.cg-filter { display: flex; align-items: center; gap: 10px; font-family: "CentraNo1-Extrabold"; font-size: 14px; }
.cg-filter input[type="range"] { accent-color: var(--cg-primary); width: 160px; }
.cg-filter output { min-width: 48px; font-family: "CentraNo1-Black"; color: var(--cg-primary); }
.cg-filter select { border: 2px solid var(--cg-line); border-radius: 999px; padding: 7px 12px; font-family: "CentraNo1-Extrabold"; font-size: 14px; background: #fff; }
.cg-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: "CentraNo1-Extrabold"; font-size: 14px; }
.cg-check input { width: 18px; height: 18px; accent-color: var(--cg-secondary); }
.cg-filters__count { margin-left: auto; font-size: 14px; color: var(--cg-gray); }
.cg-reset { border: 0; background: none; color: var(--cg-secondary); font-family: "CentraNo1-Extrabold"; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* ---------- venues layout ---------- */
.cg-venues-layout { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cg-venues-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .cg-venues-layout .cg-mapbox { position: sticky; top: calc(var(--cg-header-h) + 70px); } }
.cg-mapbox { background: var(--cg-white); border-radius: var(--cg-radius); padding: 14px; box-shadow: var(--cg-shadow); }
.cg-mapbox svg { width: 100%; height: auto; display: block; }
.cg-mapbox p { font-size: 13.5px; color: var(--cg-gray); margin: 8px 4px 2px; }
.cg-mapbox .cg-map-reset { margin-top: 6px; }
@media (max-width: 1023px) { .cg-mapbox { order: -1; } .cg-mapbox svg { max-height: 300px; } }

/* ---------- cards ---------- */
.cg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cg-card { background: var(--cg-white); border-radius: var(--cg-radius); padding: 18px 18px 14px; box-shadow: var(--cg-shadow); display: flex; flex-direction: column; gap: 8px; position: relative; transition: transform .18s, box-shadow .18s; }
.cg-card:hover { transform: translateY(-2px); box-shadow: var(--cg-shadow-lift); }
.cg-card[hidden] { display: none; }
.cg-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-card__type { font-family: "CentraNo1-Extrabold"; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-primary); }
.cg-card h3, .cg-card h4 { font-family: "CentraNo1-Extrabold"; font-size: 19px; line-height: 1.25; margin: 0; color: var(--cg-ink); }
.cg-card__where { font-size: 14px; color: var(--cg-gray); margin: 0; }
.cg-card__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-card__facts .cg-badge { min-width: 0; max-width: calc(100% - 4px); white-space: normal; overflow-wrap: break-word; }
.cg-card__price { font-size: 14.5px; margin: 0; }
.cg-card__price strong { font-family: "CentraNo1-Black"; font-size: 17px; font-weight: normal; color: var(--cg-ink); }
.cg-card ul.cg-card__hl { list-style: none; padding: 0; margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--cg-ink-soft); }
.cg-card ul.cg-card__hl li { padding-left: 18px; position: relative; margin-bottom: 3px; }
.cg-card ul.cg-card__hl li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--cg-salmon); }
.cg-card__actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed #f0dfd4; }
.cg-link-btn { display: inline-flex; align-items: center; gap: 6px; font-family: "CentraNo1-Extrabold"; font-size: 14px; color: var(--cg-secondary); text-decoration: none; padding: 6px 2px; }
.cg-link-btn:hover { text-decoration: underline; }
.cg-card details { font-size: 13.5px; color: var(--cg-ink-soft); }
.cg-card details summary { cursor: pointer; color: var(--cg-gray); font-family: "CentraNo1-Extrabold"; font-size: 13px; list-style: none; }
.cg-card details summary::-webkit-details-marker { display: none; }
.cg-card details summary::after { content: " +"; }
.cg-card details[open] summary::after { content: " −"; }
.cg-card details p { margin: 6px 0 0; }
.cg-heart { appearance: none; border: 0; background: var(--cg-cream); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--cg-primary); transition: transform .15s, background .15s; flex: none; }
.cg-heart:hover { transform: scale(1.08); background: var(--cg-beige); }
.cg-heart[aria-pressed="true"] { background: var(--cg-primary); color: #fff; }
.cg-rating { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13.5px; color: var(--cg-ink-soft); }
.cg-rating b { font-family: "CentraNo1-Black"; font-weight: normal; color: var(--cg-ink); font-size: 15px; }
.cg-rating .cg-star { color: #f5a623; }
.cg-more { display: flex; justify-content: center; margin-top: 18px; }
.cg-btn-ghost { appearance: none; border: 2px solid var(--cg-primary); background: transparent; color: var(--cg-primary); border-radius: 999px; padding: 10px 20px; font-family: "CentraNo1-Extrabold"; font-size: 15px; cursor: pointer; }
.cg-btn-ghost:hover { background: var(--cg-primary); color: #fff; }
.cg-empty { background: var(--cg-white); border-radius: var(--cg-radius); padding: 22px; text-align: center; color: var(--cg-gray); }
.cg-card--us { background: linear-gradient(160deg, #fff 55%, var(--cg-beige)); box-shadow: inset 0 0 0 2px var(--cg-primary), var(--cg-shadow); }
.cg-us-tag { font-family: "CentraNo1-Extrabold"; font-size: 12px; color: #fff; background: var(--cg-primary); border-radius: 999px; padding: 3px 10px; }

/* ---------- inline CTA band ---------- */
.cg-band { margin-top: 30px; display: grid; grid-template-columns: 1fr; border-radius: var(--cg-radius); overflow: hidden; background: var(--cg-primary); color: #fff; box-shadow: var(--cg-shadow-lift); }
@media (min-width: 768px) { .cg-band { grid-template-columns: 280px 1fr; } }
.cg-band__img { min-height: 180px; background-size: cover; background-position: center; }
.cg-band__body { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cg-band__body h3 { font-family: "CentraNo1-Black"; font-size: 1.45rem; margin: 0; line-height: 1.2; }
.cg-band__body p { margin: 0; font-size: 16px; line-height: 1.5; }
.cg-band .btn { align-self: flex-start; }
.cg-band .cg-band__script { font-family: "LuckyFellas"; font-size: 2.2rem; line-height: .8; color: var(--cg-beige); }

/* ---------- date / weather ---------- */
.cg-date { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cg-date { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cg-panel { background: var(--cg-white); border-radius: var(--cg-radius); padding: clamp(18px, 3vw, 28px); box-shadow: var(--cg-shadow); }
.cg-panel--blue { background: var(--cg-secondary); color: #fff; }
.cg-panel--blue .cg-muted { color: rgba(255, 255, 255, .78); }
.cg-today { display: flex; align-items: center; gap: 18px; }
.cg-today__icon { font-size: 70px; line-height: 1; }
.cg-today__t { font-family: "CentraNo1-Black"; font-size: 60px; line-height: 1; }
.cg-today__label { font-family: "CentraNo1-Extrabold"; font-size: 18px; }
.cg-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.cg-week__d { text-align: center; background: rgba(255, 255, 255, .1); border-radius: 12px; padding: 8px 2px; font-size: 12.5px; }
.cg-week__d b { display: block; font-family: "CentraNo1-Extrabold"; font-weight: normal; text-transform: capitalize; }
.cg-week__d span.cg-week__ic { font-size: 22px; display: block; margin: 4px 0; }
.cg-week__d .cg-week__rain { color: var(--cg-cyan); font-family: "CentraNo1-Extrabold"; }
.cg-datepick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 18px; }
.cg-datepick label { font-family: "CentraNo1-Extrabold"; }
.cg-datepick input[type="date"] { border: 2px solid var(--cg-line); border-radius: 999px; padding: 9px 14px; font-family: "CentraNo1-Extrabold"; font-size: 16px; color: var(--cg-ink); background: #fff; }
.cg-datepick .cg-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.cg-quick button { appearance: none; border: 0; background: var(--cg-cream); border-radius: 999px; padding: 7px 12px; font-family: "CentraNo1-Extrabold"; font-size: 13px; cursor: pointer; color: var(--cg-ink-soft); }
.cg-quick button:hover { background: var(--cg-beige); color: var(--cg-ink); }
.cg-verdict { border-radius: var(--cg-radius-sm); padding: 14px 16px; background: var(--cg-cream); font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
.cg-verdict strong { font-family: "CentraNo1-Black"; font-weight: normal; }
.cg-years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cg-year { background: #fffaf7; border: 1px solid #f2e6dd; border-radius: 12px; padding: 10px 4px; text-align: center; font-size: 13px; }
.cg-year b { display: block; font-family: "CentraNo1-Extrabold"; font-weight: normal; color: var(--cg-gray); font-size: 12.5px; }
.cg-year .cg-year__ic { font-size: 26px; display: block; margin: 4px 0 2px; }
.cg-year .cg-year__t { font-family: "CentraNo1-Black"; font-size: 17px; color: var(--cg-ink); }
.cg-year .cg-year__r { display: block; color: var(--cg-secondary); font-family: "CentraNo1-Extrabold"; font-size: 12.5px; }
.cg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .cg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cg-stat { border-radius: 12px; background: var(--cg-blue-100); padding: 12px; }
.cg-stat b { display: block; font-family: "CentraNo1-Black"; font-weight: normal; font-size: 24px; color: var(--cg-secondary); line-height: 1.1; }
.cg-stat span { font-size: 13px; line-height: 1.35; color: var(--cg-ink-soft); display: block; margin-top: 4px; }
.cg-meter { height: 8px; background: rgba(9, 83, 251, .15); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.cg-meter i { display: block; height: 100%; background: var(--cg-secondary); border-radius: 999px; }
.cg-season { margin-top: 18px; }
.cg-season svg { width: 100%; height: auto; display: block; overflow: visible; }
.cg-season .cg-bar-rain { fill: var(--cg-cyan); }
.cg-season .cg-bar-wed { fill: var(--cg-salmon); }
.cg-season .cg-bar-sel { stroke: var(--cg-ink); stroke-width: 2; }
.cg-season text { font-family: "CentraNo1-Extrabold"; font-size: 11px; fill: var(--cg-gray); }
.cg-season .cg-val { fill: var(--cg-ink); font-size: 10.5px; }
.cg-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--cg-ink-soft); margin: 8px 0 0; }
.cg-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cg-month-events { margin-top: 16px; }
.cg-month-events h4 { font-family: "CentraNo1-Extrabold"; font-size: 16px; margin: 0 0 8px; }
.cg-evlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cg-evlist li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; background: #fffaf7; border-radius: 12px; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; }
.cg-evlist li[hidden] { display: none; }
.cg-evlist .cg-ev-m { font-family: "CentraNo1-Black"; color: var(--cg-primary); text-transform: uppercase; font-size: 13px; letter-spacing: .04em; padding-top: 2px; }
.cg-evlist .cg-ev-name { font-family: "CentraNo1-Extrabold"; }
.cg-evlist .cg-ev-tip { display: block; color: var(--cg-ink-soft); font-size: 13.5px; }

/* calendar strip (all months) */
.cg-cal { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cg-cal__m { background: var(--cg-white); border-radius: var(--cg-radius-sm); padding: 12px 14px; box-shadow: var(--cg-shadow); }
.cg-cal__m h4 { margin: 0 0 6px; font-family: "CentraNo1-Black"; color: var(--cg-primary); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.cg-cal__m ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.cg-cal__m li { margin-bottom: 4px; }
.cg-cal__m li b { font-family: "CentraNo1-Extrabold"; font-weight: normal; }

/* ---------- accordions ---------- */
.cg-acc { background: var(--cg-white); border-radius: var(--cg-radius); box-shadow: var(--cg-shadow); overflow: hidden; }
.cg-acc details { border-bottom: 1px solid #f2e6dd; }
.cg-acc details:last-child { border-bottom: 0; }
.cg-acc summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative; font-family: "CentraNo1-Extrabold"; font-size: 17px; line-height: 1.35; }
.cg-acc summary::-webkit-details-marker { display: none; }
.cg-acc summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; border-right: 3px solid var(--cg-primary); border-bottom: 3px solid var(--cg-primary); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.cg-acc details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cg-acc summary .cg-acc__emoji { margin-right: 8px; }
.cg-acc summary:hover { color: var(--cg-primary); }
.cg-acc__body { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.6; color: var(--cg-ink-soft); }
.cg-acc__body > p:first-child { color: var(--cg-ink); }
.cg-acc__body ul, .cg-acc__body ol { padding-left: 20px; margin: 8px 0; }
.cg-acc__body li { margin-bottom: 4px; }
.cg-acc__body a { color: var(--cg-secondary); font-family: "CentraNo1-Extrabold"; }
.cg-acc__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cg-acc__links a { font-size: 13.5px; background: var(--cg-blue-100); border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.cg-two { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cg-two { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- local section ---------- */
.cg-local { background: var(--cg-secondary); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 52px); margin-top: clamp(44px, 7vw, 84px); position: relative; overflow: hidden; }
.cg-local::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%; background: rgba(144, 218, 222, .18); }
.cg-local .cg-section__head h2 { color: #fff; }
.cg-local .cg-section__head h2 .cg-script { color: var(--cg-cyan); }
.cg-local .cg-answer { color: rgba(255, 255, 255, .92); }
.cg-insider { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); position: relative; }
.cg-insider__card { background: #fff; color: var(--cg-ink); border-radius: var(--cg-radius); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.cg-insider__card:nth-child(4n+2) { background: var(--cg-cyan); }
.cg-insider__card:nth-child(4n+3) { background: var(--cg-beige); }
.cg-insider__card h3 { font-family: "CentraNo1-Black"; font-size: 18px; line-height: 1.25; margin: 0; }
.cg-insider__card p { margin: 0; font-size: 15px; line-height: 1.5; }
.cg-insider__card a.cg-src { margin-top: auto; padding-top: 6px; font-size: 12px; color: rgba(51, 51, 51, .7); }
.cg-local__grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 30px; position: relative; align-items: start; }
@media (min-width: 1024px) { .cg-local__grid { grid-template-columns: 1.2fr 1fr; } }
.cg-local__box { background: rgba(255, 255, 255, .1); border-radius: var(--cg-radius); padding: 20px 22px; }
.cg-local__box h3 { font-family: "CentraNo1-Black"; font-size: 1.3rem; margin: 0 0 12px; color: #fff; }
.cg-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cg-spots li { background: #fff; color: var(--cg-ink); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.cg-spots li .cg-spot-n { width: 30px; height: 30px; border-radius: 50%; background: var(--cg-primary); color: #fff; display: grid; place-items: center; font-family: "CentraNo1-Black"; font-size: 14px; }
.cg-spots li b { font-family: "CentraNo1-Extrabold"; font-weight: normal; }
.cg-spots li .cg-spot-tip { display: block; font-size: 13.5px; color: var(--cg-ink-soft); margin-top: 2px; }
.cg-words { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-word { background: #fff; color: var(--cg-ink); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; max-width: 100%; }
.cg-word b { font-family: "CentraNo1-Black"; font-weight: normal; color: var(--cg-primary); display: block; font-size: 16px; }
.cg-food { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cg-food li { font-size: 14.5px; line-height: 1.45; }
.cg-food li b { font-family: "CentraNo1-Extrabold"; font-weight: normal; color: var(--cg-cyan); }
.cg-quiz { background: #fff; color: var(--cg-ink); border-radius: var(--cg-radius); padding: 20px 22px; margin-top: 18px; }
.cg-quiz h3 { font-family: "CentraNo1-Black"; font-size: 1.3rem; margin: 0 0 4px; color: var(--cg-primary); }
.cg-quiz__q { font-family: "CentraNo1-Extrabold"; font-size: 17px; margin: 14px 0 10px; }
.cg-quiz__opts { display: grid; gap: 8px; }
.cg-quiz__opts button { appearance: none; text-align: left; border: 2px solid var(--cg-line); background: #fff; border-radius: 14px; padding: 11px 14px; font-family: "CentraNo1-Book"; font-size: 15px; cursor: pointer; color: var(--cg-ink); }
.cg-quiz__opts button:hover { border-color: var(--cg-secondary); }
.cg-quiz__opts button.is-right { border-color: var(--cg-green); background: #e3f4ea; }
.cg-quiz__opts button.is-wrong { border-color: #d10309; background: #fde8e8; }
.cg-quiz__explain { font-size: 14.5px; line-height: 1.5; margin-top: 10px; color: var(--cg-ink-soft); }
.cg-quiz__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; color: var(--cg-gray); }
.cg-quiz__next { appearance: none; border: 0; background: var(--cg-secondary); color: #fff; border-radius: 999px; padding: 9px 18px; font-family: "CentraNo1-Extrabold"; cursor: pointer; }
.cg-quiz__next[disabled] { opacity: .4; cursor: default; }

/* ---------- Josepho offer ---------- */
.cg-offer { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cg-offer { grid-template-columns: 1.05fr 1fr; align-items: stretch; } }
.cg-offer__visual { border-radius: var(--cg-radius); overflow: hidden; position: relative; min-height: 320px; background-size: cover; background-position: center; box-shadow: var(--cg-shadow-lift); }
.cg-offer__visual figcaption { position: absolute; left: 16px; bottom: 16px; right: 16px; color: #fff; font-family: "CentraNo1-Extrabold"; font-size: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.cg-offer__visual .cg-offer__sticker { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--cg-primary); border-radius: 999px; padding: 8px 14px; font-family: "CentraNo1-Black"; font-size: 15px; transform: rotate(-4deg); box-shadow: var(--cg-shadow); }
.cg-steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cg-steps3 li { background: var(--cg-white); border-radius: var(--cg-radius-sm); padding: 14px 16px 14px 62px; position: relative; font-size: 15px; line-height: 1.5; box-shadow: var(--cg-shadow); }
.cg-steps3 li .cg-steps3__ic { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--cg-beige); display: grid; place-items: center; font-size: 18px; }
.cg-steps3 li b { font-family: "CentraNo1-Extrabold"; font-weight: normal; display: block; font-size: 16px; color: var(--cg-ink); }
.cg-packs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 26px; }
.cg-pack { background: var(--cg-primary); color: #fff; border-radius: 14px; padding: 26px 18px 18px; text-align: center; position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cg-pack__ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--cg-primary); font-family: "CentraNo1-Extrabold"; font-size: 12px; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.cg-pack h3 { font-family: "CentraNo1-Black"; font-size: 21px; margin: 0; }
.cg-pack .cg-pack__hl { background: #fff; color: var(--cg-primary); font-family: "CentraNo1-Extrabold"; font-size: 13px; padding: 2px 8px; }
.cg-pack p { margin: 0; font-size: 14px; line-height: 1.45; font-family: "CentraNo1-Extrabold"; }
.cg-pack .cg-pack__price { font-family: "CentraNo1-Black"; font-size: 30px; margin-top: auto; padding-top: 8px; }
.cg-pack .cg-pack__split { font-size: 13px; opacity: .9; }
.cg-pack--best { box-shadow: 0 0 0 4px var(--cg-salmon); }
.cg-deliv { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.cg-deliv > div { background: var(--cg-white); border-radius: var(--cg-radius-sm); padding: 14px 16px; color: var(--cg-primary); box-shadow: var(--cg-shadow); }
.cg-deliv b { font-family: "CentraNo1-Extrabold"; font-weight: normal; display: block; font-size: 16px; }
.cg-deliv span { font-size: 14px; display: block; margin: 2px 0 6px; }
.cg-deliv strong { font-family: "CentraNo1-Black"; font-weight: normal; font-size: 18px; }
.cg-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.cg-proof > div { background: var(--cg-blue-100); border-radius: 14px; padding: 12px 16px; font-size: 14px; color: var(--cg-ink-soft); }
.cg-proof b { font-family: "CentraNo1-Black"; font-weight: normal; color: var(--cg-secondary); font-size: 20px; display: block; }
.cg-quickform { background: var(--cg-white); border-radius: var(--cg-radius); padding: 22px; box-shadow: var(--cg-shadow-lift); margin-top: 22px; }
.cg-quickform h3 { font-family: "CentraNo1-Black"; font-size: 1.35rem; color: var(--cg-ink); margin: 0 0 4px; }
.cg-quickform form { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 768px) { .cg-quickform form { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.cg-quickform label { font-family: "CentraNo1-Extrabold"; font-size: 13.5px; display: block; margin-bottom: 6px; }
.cg-quickform input, .cg-quickform select { width: 100%; border: 2px solid var(--cg-line); border-radius: 12px; padding: 11px 12px; font-family: "CentraNo1-Book"; font-size: 16px; background: #fff; }
.cg-quickform .btn { min-height: 48px; }
.cg-pro { background: #333; color: #fff; border-radius: var(--cg-radius); padding: 24px 26px; margin-top: 18px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cg-pro { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.cg-pro h3 { font-family: "CentraNo1-Black"; font-size: 1.35rem; margin: 0 0 6px; }
.cg-pro p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.cg-pro .btn-outline-white { border: 2px solid #fff; color: #fff; border-radius: 999px; }

/* ---------- FAQ ---------- */
.cg-faq summary { font-size: 17.5px; }

/* ---------- method ---------- */
.cg-method { margin-top: 28px; font-size: 14px; color: var(--cg-ink-soft); }
.cg-method summary { cursor: pointer; font-family: "CentraNo1-Extrabold"; color: var(--cg-gray); }
.cg-method ol { columns: 1; padding-left: 18px; font-size: 13px; line-height: 1.5; }
@media (min-width: 900px) { .cg-method ol { columns: 2; column-gap: 32px; } }
.cg-method a { color: var(--cg-secondary); word-break: break-word; }
.cg-report { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--cg-white); border-radius: var(--cg-radius); padding: 16px 20px; margin-top: 18px; box-shadow: var(--cg-shadow); }
.cg-report p { margin: 0; font-size: 15px; }

/* ---------- drawer (shortlist) ---------- */
.cg-drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.cg-drawer.is-open { display: block; }
.cg-drawer__bg { position: absolute; inset: 0; background: rgba(26, 26, 26, .35); }
.cg-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: var(--cg-cream); padding: 22px; overflow-y: auto; box-shadow: -10px 0 40px rgba(0, 0, 0, .15); display: flex; flex-direction: column; gap: 12px; }
.cg-drawer__panel .cg-drawer__title { font-family: "CentraNo1-Black"; color: var(--cg-primary); font-size: 1.6rem; line-height: 1.2; margin: 0; }
.cg-drawer__close { position: absolute; top: 14px; right: 14px; border: 0; background: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.cg-drawer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cg-drawer__list li { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14.5px; }
.cg-drawer__list li b { font-family: "CentraNo1-Extrabold"; font-weight: normal; display: block; }
.cg-drawer__list li button { border: 0; background: none; color: var(--cg-gray); cursor: pointer; font-size: 18px; }
.cg-drawer form { display: grid; gap: 8px; background: #fff; border-radius: 14px; padding: 14px; }
.cg-drawer form input { border: 2px solid var(--cg-line); border-radius: 10px; padding: 10px 12px; font-size: 16px; }

/* ---------- mobile bar ---------- */
.cg-mobilebar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; background: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; transform: translateY(130%); transition: transform .25s; }
.cg-mobilebar { visibility: hidden; }
.cg-mobilebar.is-visible { transform: none; visibility: visible; }
.cg-mobilebar p { margin: 0; font-size: 13.5px; line-height: 1.3; flex: 1; }
.cg-mobilebar p b { font-family: "CentraNo1-Extrabold"; font-weight: normal; display: block; font-size: 14.5px; }
.cg-mobilebar .btn { white-space: nowrap; }
@media (min-width: 1024px) { .cg-mobilebar { display: none; } }

/* ---------- toast ---------- */
.cg-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: #333; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 90; pointer-events: none; }
.cg-toast.is-on { opacity: 1; transform: translateX(-50%); }

/* buttons from main.css need an arrow image path that works offline: handled by build */
.cg-page .btn { border-radius: 999px; font-family: "CentraNo1-Extrabold"; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: 15px; }
.cg-page .btn-primary { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cg-page *, .cg-page *::before, .cg-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.cg-hall-more { margin-top: 6px; }
.cg-hall-more summary { cursor: pointer; font-family: "CentraNo1-Extrabold"; font-size: 13px; color: var(--cg-secondary); list-style: none; }
.cg-hall-more summary::-webkit-details-marker { display: none; }
.cg-hall-more summary::after { content: " +"; }
.cg-hall-more[open] summary::after { content: " −"; }
.cg-hall-more p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.cg-hall-more b { font-family: "CentraNo1-Extrabold"; font-weight: normal; color: var(--cg-ink); }
.cg-hall-more a { color: var(--cg-secondary); }

.cg-table { table-layout: fixed; }
.cg-table th:nth-child(1) { width: 31%; } .cg-table th:nth-child(2) { width: 14%; } .cg-table th:nth-child(3) { width: 20%; } .cg-table th:nth-child(4) { width: 35%; }
.cg-td-cap { font-size: 14px; color: var(--cg-ink-soft); }
.cg-unit { display: block; font-size: 12.5px; color: var(--cg-gray); margin-top: 2px; line-height: 1.35; }
.cg-td-notes { font-size: 14px; line-height: 1.45; }
.cg-table tbody tr[hidden] { display: none; }
@media (max-width: 760px) { .cg-table { table-layout: auto; } .cg-unit { display: inline; margin-left: 6px; } }

.cg-wxfacts { margin-top: 20px; background: rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px; }
.cg-wxfacts__t { font-family: "CentraNo1-Extrabold"; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-cyan); margin: 0 0 6px; }
.cg-wxfacts ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.cg-wxfacts li { margin-bottom: 4px; }
.cg-wxfacts strong { font-family: "CentraNo1-Extrabold"; font-weight: normal; }

.cg-card details b { font-family: "CentraNo1-Extrabold"; font-weight: normal; color: var(--cg-ink); }


/* progressive enhancement: without JS every tab panel is shown, stacked, with its title */
html.js .cg-tabpanel[data-inactive] { display: none; }
.cg-panel-title { font-family: "CentraNo1-Black"; font-size: 1.3rem; margin: 26px 0 12px; }
html.js .cg-panel-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------- video: hero card, offer button, player dialog ---------- */
.cg-vidcard { display: flex; gap: 16px; align-items: center; background: var(--cg-white); border-radius: var(--cg-radius); padding: 14px; box-shadow: var(--cg-shadow); color: var(--cg-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cg-vidcard:hover { transform: translateY(-2px); box-shadow: var(--cg-shadow-lift); color: var(--cg-ink); }
.cg-vidcard__thumb { position: relative; flex: none; width: 124px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--cg-primary); }
.cg-vidcard__preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-vidcard__play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cg-primary); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.cg-vidcard__play svg { margin-left: 3px; }
.cg-vidcard__dur { position: absolute; right: 6px; bottom: 6px; background: rgba(26, 26, 26, .7); color: #fff; font-family: "CentraNo1-Extrabold"; font-size: 11.5px; border-radius: 6px; padding: 2px 6px; }
.cg-vidcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-vidcard__kicker { font-family: "CentraNo1-Extrabold"; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-primary); }
.cg-vidcard__title { font-family: "CentraNo1-Black"; font-size: 21px; line-height: 1.15; }
.cg-vidcard__text { font-size: 14.5px; line-height: 1.45; color: var(--cg-ink-soft); }
.cg-vidcard__cta { font-family: "CentraNo1-Extrabold"; font-size: 14px; color: var(--cg-secondary); margin-top: 2px; }
.cg-vidcard__cta::after { content: " →"; }
.cg-offer__play { position: absolute; left: 16px; bottom: 72px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--cg-primary); border-radius: 999px; padding: 10px 16px 10px 12px; font-family: "CentraNo1-Extrabold"; font-size: 14.5px; text-decoration: none; box-shadow: var(--cg-shadow); }
.cg-offer__play:hover { color: var(--cg-primary); transform: translateY(-1px); }

html.cg-noscroll, html.cg-noscroll body { overflow: hidden; }
.cg-vmodal[hidden] { display: none; }
.cg-vmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.cg-vmodal__bg { position: absolute; inset: 0; background: rgba(20, 20, 20, .72); }
.cg-vmodal__box { position: relative; display: flex; gap: 28px; align-items: center; background: var(--cg-cream); border-radius: 26px; padding: 18px; max-width: 980px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.cg-vmodal__player { flex: none; height: min(82vh, 760px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--cg-primary); }
.cg-vmodal__video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--cg-primary); }
.cg-vmodal__side { width: 340px; display: flex; flex-direction: column; gap: 12px; padding: 10px 8px 10px 0; }
.cg-vmodal__kicker { margin: 0; font-family: "CentraNo1-Extrabold"; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-primary); }
.cg-vmodal__title { margin: 0; font-family: "CentraNo1-Black"; font-size: 30px; line-height: 1.1; color: var(--cg-ink); }
.cg-vmodal__lead { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--cg-ink-soft); }
.cg-vmodal__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 4px; }
.cg-vmodal__summary { font-size: 14px; line-height: 1.5; color: var(--cg-ink-soft); }
.cg-vmodal__summary summary { cursor: pointer; font-family: "CentraNo1-Extrabold"; color: var(--cg-ink); }
.cg-vmodal__summary ul { margin: 8px 0 0; padding-left: 18px; max-height: 32vh; overflow: auto; }
.cg-vmodal__summary li { margin: 4px 0; }
.cg-vmodal__close { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--cg-ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); z-index: 2; }
@media (max-width: 760px) {
  .cg-vmodal { padding: 0; place-items: stretch; }
  .cg-vmodal__box { flex-direction: column; gap: 12px; border-radius: 0; padding: 12px 12px 16px; max-width: none; width: 100%; height: 100%; overflow-y: auto; justify-content: flex-start; }
  .cg-vmodal__player { height: auto; width: min(100%, calc((100vh - 170px) * 9 / 16)); align-self: center; }
  .cg-vmodal__side { width: 100%; padding: 0 4px; }
  .cg-vmodal__kicker, .cg-vmodal__lead { display: none; }
  .cg-vmodal__title { font-size: 20px; }
  .cg-vmodal__close { top: 10px; right: 10px; }
  .cg-vidcard__thumb { width: 104px; }
}
@media (prefers-reduced-motion: reduce) { .cg-vidcard { transition: none; } }