* { box-sizing: border-box; }

/* Never let media or embeds force horizontal scroll on small screens. */
img, video, iframe, svg, canvas { max-width: 100%; }
img { height: auto; }
.oga-card__media img, .oga-card__img { height: 100%; }
/* 44px — matches the size passed to oga_core_logo_svg()/oga_core_icon('logo-mark')
   in header.php, so every logo render path (uploaded image, inline SVG,
   icon-sprite fallback) produces the same visual size next to the wordmark. */
.oga-logo__img, .oga-logo__svg { height: 44px; }

body {
	font-family: var(--oga-font-body);
	color: var(--oga-ink);
	background: var(--oga-bg);
	margin: 0;
	line-height: 1.6;
}

a { color: var(--oga-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Headings — one consistent scale, weight, and rhythm ───────────── */
h1, h2, h3, h4 {
	font-family: var(--oga-font-heading);
	color: var(--oga-ink);
	line-height: 1.22;
	letter-spacing: -0.012em;
	margin: 0 0 var(--oga-space-sm);
	font-weight: 700;
	text-wrap: balance;
}
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; }
p  { margin: 0 0 var(--oga-space-sm); }
p:last-child { margin-bottom: 0; }

.oga-container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--oga-space-md);
}

/* ── Site header / footer ─────────────────────────────────────────── */
.oga-site-header {
	border-bottom: 1px solid var(--oga-border);
	padding: var(--oga-space-sm) 0;
}
.oga-site-header .oga-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oga-space-md);
}
/* flex: 0 0 auto — the logo must never shrink or be squeezed by the nav;
   without it, flexbox treats it as shrinkable and it's the first thing to
   get compressed into a wrap when the header is tight (see oga-logo__word). */
.oga-logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--oga-logo-navy); text-decoration: none; }
.oga-logo:hover { text-decoration: none; }
.oga-logo img,
.oga-logo__img { display: block; height: 44px; width: auto; }
/* Mark and wordmark share one flex row (align-items: center on .oga-logo
   above), so the diamond mark's optical centre lines up with the middle of
   the single-line wordmark rather than its baseline — this is the pairing
   that was previously off when the mark rendered taller (54px) than its
   coded default (44/48px) implied it should. */
.oga-logo__mark { color: var(--oga-logo-navy); flex-shrink: 0; }
.oga-logo__svg { display: block; height: 44px; width: auto; }
/* Horizontal ("row") wordmark beside the mark. Always one line — at every
   breakpoint the icon/font/gap sizes below are tuned so this fits without
   wrapping ("Online Guide" and "Association" breaking onto two lines is
   the one thing this block must never do). */
.oga-logo__word {
	display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 0 6px;
	line-height: 1.15;
}
.oga-logo__name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--oga-logo-navy); }
.oga-logo__sub  { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--oga-logo-red); }
@media (max-width: 600px) {
	.oga-logo { gap: 8px; }
	.oga-logo img, .oga-logo__img, .oga-logo__svg { height: 36px; }
	.oga-logo__name, .oga-logo__sub { font-size: 16px; }
}
/* Smallest phones (iPhone SE and similar ~320-380px): logo + hamburger both
   need to fit on the same row beside each other. Tighten everything one
   more notch instead of letting either wrap or overflow off-screen. */
@media (max-width: 380px) {
	.oga-site-header .oga-container { gap: 10px; }
	.oga-logo { gap: 7px; }
	.oga-logo img, .oga-logo__img, .oga-logo__svg { height: 30px; }
	.oga-logo__name, .oga-logo__sub { font-size: 13px; }
}
.oga-nav ul { list-style: none; display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; }
/* nowrap — a nav label (e.g. "Marketing services", "Tourist Shop") breaking
   mid-word onto a second line is the other thing this header must never do. */
.oga-nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--oga-ink); white-space: nowrap; }
.oga-nav__shop { color: var(--oga-blue); font-weight: 600; }

/* Hamburger toggle — hidden on desktop, shown under the nav breakpoint. */
.oga-nav-toggle {
	display: none;
	align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius); color: var(--oga-blue); cursor: pointer;
}
.oga-nav-toggle:hover { border-color: var(--oga-blue); background: var(--oga-bg-soft); }
.oga-nav-toggle__close { display: none; }
.oga-nav-toggle[aria-expanded="true"] .oga-nav-toggle__open { display: none; }
.oga-nav-toggle[aria-expanded="true"] .oga-nav-toggle__close { display: inline-flex; }

/* Accessible visually-hidden text. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.oga-site-footer {
	border-top: 1px solid var(--oga-border);
	margin-top: var(--oga-space-xl);
	padding: var(--oga-space-lg) 0;
	color: var(--oga-ink-muted);
	font-size: 14px;
}
.oga-site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--oga-space-md); }
.oga-site-footer__brand { display: flex; align-items: center; gap: 10px; }
.oga-site-footer__brand .oga-icon { color: var(--oga-blue); }
.oga-site-footer__brand p { margin: 0; }
.oga-site-footer__links { display: flex; gap: var(--oga-space-md); margin: 0; }
.oga-site-footer__links a { display: inline-flex; align-items: center; gap: 5px; }

/* ── Icon system ───────────────────────────────────────────────────── */
.oga-icon { flex-shrink: 0; vertical-align: -0.15em; color: currentColor; }
.oga-card__meta .oga-icon,
.oga-single__meta .oga-icon { color: var(--oga-blue); margin-right: 2px; }
.oga-badge .oga-icon { margin-right: 3px; }
.oga-btn .oga-icon { margin-right: 0; color: currentColor; vertical-align: middle; }
h2 .oga-icon { color: var(--oga-blue); margin-right: 4px; }
.oga-checklist { list-style: none; margin: 0; padding: 0; }
.oga-checklist li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.oga-checklist .oga-icon { color: #1DA851; margin-top: 2px; }

/* ── Cards (tours / guides / services) · Airbnb / TripAdvisor style ──
   Image-first: rounded photo, soft shadow, lift + zoom on hover, clean
   type below. No boxed border — the imagery carries the card. */
.oga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--oga-space-lg);
	margin: var(--oga-space-lg) 0;
}
.oga-card {
	display: block;
	background: transparent;
	border: none;
	border-radius: var(--oga-radius-lg);
	overflow: visible;
	transition: transform .18s ease;
}
.oga-card:hover { transform: translateY(-3px); text-decoration: none; }
.oga-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 168px; /* floor for browsers without aspect-ratio support */
	border-radius: var(--oga-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--oga-blue) 0%, #2a54b0 55%, var(--oga-red, #d81f36) 145%);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
	transition: box-shadow .18s ease;
}
.oga-card:hover .oga-card__media { box-shadow: 0 10px 26px rgba(16, 24, 40, .16); }
.oga-card__media img,
.oga-card__img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .35s ease;
}
.oga-card:hover .oga-card__media img { transform: scale(1.06); }
.oga-card__media-fallback {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
}
.oga-card__media-fallback .oga-icon { width: 34px; height: 34px; color: rgba(255, 255, 255, .92); }
.oga-card__body { padding: 12px 2px 0; }
.oga-card__title {
	font-size: 16px; font-weight: 600; color: var(--oga-ink);
	margin: 0 0 4px; line-height: 1.3;
}
.oga-card__meta {
	display: flex; align-items: center; gap: 6px;
	font-size: 14px; color: var(--oga-ink-muted); margin: 0 0 6px;
}
.oga-card__meta .oga-icon { color: var(--oga-ink-muted); flex-shrink: 0; }
.oga-card__price { font-weight: 700; color: var(--oga-ink); font-size: 15px; }
.oga-card__price .amount,
.oga-card__price bdi { color: var(--oga-blue); }

/* ── Promoted (OGACE) listing frame ──────────────────────────────────
   Ordinary .oga-card is deliberately borderless (the imagery carries it —
   see the comment above .oga-grid). Promoted listings are the one card
   type that should read as "branded", so they get a frame that borrows
   directly from the brand-mark palette (navy/red — the logo's own colors,
   per BRANDING.md), not the UI-accent blue/red used on buttons and links. */
.oga-card--promote {
	position: relative;
	padding: 10px 10px 0;
	border: 1px solid var(--oga-logo-navy);
	border-radius: var(--oga-radius-lg);
	box-shadow: 0 1px 3px rgba(28, 63, 143, .1);
}
.oga-card--promote .oga-card__media { border-radius: var(--oga-radius-md); }
.oga-card--promote:hover { box-shadow: 0 10px 26px rgba(28, 63, 143, .18); }
.oga-card__promote-ribbon {
	position: absolute;
	top: -10px; left: 14px;
	z-index: 1;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--oga-logo-navy);
	border-bottom: 2px solid var(--oga-logo-red);
	color: var(--oga-logo-cream);
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	text-transform: uppercase;
}
.oga-card__promote-ribbon .oga-icon { color: var(--oga-logo-cream); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.oga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 22px;
	border-radius: var(--oga-radius);
	background: var(--oga-blue);
	color: #fff;
	font-weight: 600;
	line-height: 1.1;
	border: none;
	cursor: pointer;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.oga-btn:hover { background: var(--oga-blue-dark); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(3, 46, 161, .18); }
.oga-btn:active { transform: translateY(0); box-shadow: none; }
.oga-btn--whatsapp { background: #1DA851; }
.oga-btn--whatsapp:hover { background: #168a41; }
.oga-btn--telegram { background: #229ED9; }
.oga-btn--telegram:hover { background: #1b87ba; }
.oga-btn--telegram .oga-icon { color: #fff; }
.oga-btn--outline { background: transparent; color: var(--oga-blue); border: 1px solid var(--oga-blue); }

/* Attention "hook" — Watch on YouTube. Brand-red with a soft pulsing glow so
   it stands out as the primary call to action (esp. on the blue CTA band).
   The pulse only runs when the visitor hasn't asked to reduce motion. */
.oga-btn--youtube {
	background: #ff0033;
	color: #fff;
	box-shadow: 0 0 0 0 rgba(255, 0, 51, .45);
}
.oga-btn--youtube:hover { background: #e4002b; color: #fff; box-shadow: 0 6px 16px rgba(255, 0, 51, .38); }
.oga-btn--youtube .oga-icon { color: #fff; }
@keyframes oga-yt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 0, 51, .5); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 0, 51, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 51, 0); }
}
@media (prefers-reduced-motion: no-preference) {
	.oga-btn--youtube { animation: oga-yt-pulse 2.1s ease-out infinite; }
	.oga-btn--youtube:hover { animation: none; }
}

/* ── Single tour / guide / service layout ─────────────────────────── */
.oga-single { padding: var(--oga-space-lg) 0; }
.oga-single__hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--oga-radius-lg); }
/* Same brand-mark-navy/red frame treatment as .oga-card--promote, scaled up
   for the single Promote page's hero image. */
.oga-single__hero--promote {
	position: relative;
	padding: 10px;
	border: 1px solid var(--oga-logo-navy);
	border-radius: var(--oga-radius-lg);
	box-shadow: 0 1px 3px rgba(28, 63, 143, .1);
}
.oga-single__hero--promote img { max-height: 400px; }
.oga-single__promote-ribbon {
	position: absolute;
	top: -12px; left: 20px;
	z-index: 1;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--oga-logo-navy);
	border-bottom: 2px solid var(--oga-logo-red);
	color: var(--oga-logo-cream);
	font-size: 12px; font-weight: 700; letter-spacing: .02em;
	text-transform: uppercase;
}
.oga-single__promote-ribbon .oga-icon { color: var(--oga-logo-cream); }
.oga-single__title { font-size: 32px; margin: var(--oga-space-md) 0 var(--oga-space-xs); }
.oga-single__meta { color: var(--oga-ink-muted); margin-bottom: var(--oga-space-md); }
.oga-single__actions { display: flex; gap: var(--oga-space-xs); margin: var(--oga-space-md) 0; flex-wrap: wrap; }
.oga-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--oga-bg-soft);
	color: var(--oga-blue);
}

/* ══════════════════════════════════════════════════════════════════════
   EXPERT DETAIL FRAME — one framed-panel system shared by every single
   template (Tours / Guides / Marketing / Promote / News). Each detail
   section (Photos, Booking, Local map, Video, Tourist Shop) is a card with
   an accent-bar iconed title, so the whole detail page reads as one design.
   ══════════════════════════════════════════════════════════════════════ */
.oga-detail,
.oga-booking,
.oga-shop-block {
	margin: var(--oga-space-md) 0;
	padding: var(--oga-space-lg);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	background: #fff;
	box-shadow: 0 1px 2px rgba(3, 46, 161, .04);
}
.oga-booking { background: var(--oga-bg-soft); }

/* Panel title: icon chip + label + hairline rule. */
.oga-detail__title,
.oga-booking > h2,
.oga-shop-block > h2 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 var(--oga-space-sm); padding-bottom: 12px;
	font-size: 19px; line-height: 1.2;
	border-bottom: 1px solid var(--oga-border);
}
.oga-detail__title .oga-icon,
.oga-booking > h2 .oga-icon,
.oga-shop-block > h2 .oga-icon {
	flex: 0 0 auto; width: 34px; height: 34px; padding: 8px; border-radius: 9px;
	background: linear-gradient(135deg, rgba(3,46,161,.10), rgba(224,0,37,.10));
	color: var(--oga-blue);
}
.oga-detail__body > :first-child { margin-top: 0; }
.oga-detail__body > :last-child { margin-bottom: 0; }
.oga-detail__foot { margin: var(--oga-space-sm) 0 0; }

/* Photos */
.oga-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--oga-space-xs); }
.oga-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--oga-radius-md); }

/* Video + map embeds */
.oga-video-embed, .oga-map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--oga-radius-md); overflow: hidden; }
.oga-video-embed iframe, .oga-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Booking actions */
.oga-booking__lead { color: var(--oga-ink-muted); margin: 0 0 var(--oga-space-sm); }
.oga-booking__actions { display: flex; flex-wrap: wrap; gap: var(--oga-space-xs); }
.oga-booking__actions .oga-btn { flex: 0 1 auto; }

@media (max-width: 560px) {
	.oga-detail, .oga-booking, .oga-shop-block { padding: var(--oga-space-md); }
	.oga-booking__actions .oga-btn,
	.oga-detail__foot .oga-btn { width: 100%; }
}

/* ── Homepage: video-forward hero + content sections ─────────────────────
   Added for the "Watch & Follow" homepage. Uses existing tokens only. */
.oga-hero { padding: var(--oga-space-xl) 0 var(--oga-space-lg); text-align: center; }
.oga-hero__eyebrow {
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--oga-red, #d81f36);
	background: var(--oga-bg-soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
}
.oga-hero h1 { font-size: 40px; line-height: 1.12; margin: 0 0 10px; }
.oga-hero__sub { color: var(--oga-ink-muted); font-size: 18px; max-width: 620px; margin: 0 auto var(--oga-space-md); }
.oga-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Keyword highlight — SEO/expression hook in the hero headline. Gradient
   text where supported, solid accent colour as the fallback. */
.oga-hi {
	color: var(--oga-red, #d81f36); /* fallback for no background-clip */
	background: linear-gradient(90deg, var(--oga-blue) 0%, var(--oga-red, #d81f36) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.oga-hi-soft { color: var(--oga-blue); font-weight: 700; }

/* Inline SEO/AEO/GEO keyword highlight (semantic <mark>). Branded tint rather
   than the browser default yellow, so emphasised keywords read as intentional. */
.oga-kw {
	background: linear-gradient(180deg, transparent 60%, rgba(224,0,37,.16) 0);
	color: inherit; font-weight: 600; padding: 0 1px; border-radius: 2px;
}

/* Homepage FAQ — visible content that backs the FAQPage schema (AEO/GEO). */
.oga-faq { margin: var(--oga-space-xl) 0; }
.oga-faq > h2 { display: flex; align-items: center; gap: 8px; }
.oga-faq__lead { color: var(--oga-ink-muted); max-width: 720px; margin: 0 0 var(--oga-space-md); }
.oga-faq__list { display: grid; gap: var(--oga-space-xs); }
.oga-faq__item {
	border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md);
	background: #fff; padding: 4px 18px;
}
.oga-faq__item > summary {
	list-style: none; cursor: pointer; padding: 14px 0; font-weight: 700;
	color: var(--oga-blue); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.oga-faq__item > summary::-webkit-details-marker { display: none; }
.oga-faq__item > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--oga-red); flex: 0 0 auto; }
.oga-faq__item[open] > summary::after { content: "\2212"; }
.oga-faq__item > p { margin: 0 0 16px; color: var(--oga-ink); line-height: 1.6; }

.oga-section-intro { max-width: 780px; }
.oga-section-intro p { color: var(--oga-ink-muted); font-size: 17px; }

.oga-chip-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--oga-space-sm); margin: var(--oga-space-md) 0;
}
.oga-chip {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-md); background: var(--oga-bg);
	font-weight: 500; font-size: 15px; color: var(--oga-ink); text-decoration: none;
}
.oga-chip .oga-icon { color: var(--oga-blue); flex-shrink: 0; }
a.oga-chip:hover { border-color: var(--oga-blue); text-decoration: none; }

.oga-social-row { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--oga-space-md) 0; }
.oga-social-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: 999px;
	border: 1px solid var(--oga-border); background: var(--oga-bg);
	color: var(--oga-ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.oga-social-pill .oga-icon { color: var(--oga-blue); }
a.oga-social-pill:hover { border-color: var(--oga-blue); background: var(--oga-bg-soft); text-decoration: none; }

.oga-cta-band {
	background: var(--oga-blue); color: #fff; border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-lg); margin: var(--oga-space-xl) 0; text-align: center;
}
.oga-cta-band h2 { color: #fff; margin: 0 0 10px; }
.oga-cta-band p { color: rgba(255,255,255,.9); max-width: 680px; margin: 0 auto var(--oga-space-sm); }
.oga-cta-band__tagline { font-weight: 700; letter-spacing: .03em; }
.oga-cta-band .oga-btn { background: #fff; color: var(--oga-blue); }
.oga-cta-band .oga-btn:hover { background: var(--oga-bg-soft); }
.oga-cta-band__fine { font-size: 13px; color: rgba(255,255,255,.75); margin-top: var(--oga-space-sm); }

/* ── Marketing "hook" band — 300+ services promo frame ────────────────────
   Same attention-grabbing intent as .oga-btn--youtube, but as a standalone
   framed section: red/blue gradient border, count badge, price callout,
   and a chip row of the service categories. Used on the /marketing/
   archive (archive-oga_service.php) and as a homepage teaser. */
.oga-hook-band {
	position: relative;
	border-radius: var(--oga-radius-lg);
	padding: 2px;
	margin: var(--oga-space-lg) 0;
	background: linear-gradient(120deg, var(--oga-red, #d81f36), var(--oga-blue));
}
.oga-hook-band__inner {
	background: #fff;
	border-radius: calc(var(--oga-radius-lg) - 2px);
	padding: var(--oga-space-lg);
	text-align: center;
}
.oga-hook-band__eyebrow {
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: #fff;
	background: linear-gradient(90deg, var(--oga-red, #d81f36), var(--oga-blue));
	border-radius: 999px; padding: 6px 16px; margin-bottom: 14px;
}
.oga-hook-band h2 { margin: 0 0 10px; }
.oga-hook-band p { color: var(--oga-ink-muted); max-width: 680px; margin: 0 auto var(--oga-space-sm); }
.oga-hook-band__price {
	font-size: 20px; font-weight: 700; color: var(--oga-ink, #111);
	margin-bottom: var(--oga-space-sm) !important;
}
.oga-hook-band__price strong { color: var(--oga-red, #d81f36); font-size: 26px; }
.oga-hook-band__chips {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	margin: 0 0 var(--oga-space-md);
}
.oga-hook-band__chips span {
	font-size: 13px; font-weight: 600; color: var(--oga-blue);
	background: var(--oga-bg-soft); border-radius: 999px; padding: 5px 12px;
}
.oga-hook-band__lead {
	color: var(--oga-ink-muted); max-width: 640px; margin: 0 auto var(--oga-space-md) !important;
}

/* ── Listing archives — one shared structure for Tours / Guides / Marketing /
   Promote / News: archive header → Online Guide roles band → card grid. ── */
.oga-archive { padding-top: var(--oga-space-lg); padding-bottom: var(--oga-space-xl); }
.oga-archive__header { text-align: center; margin-bottom: var(--oga-space-lg); }
.oga-archive__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--oga-red); margin-bottom: 10px;
}
.oga-archive__header h1 { margin: 0 0 10px; }
.oga-archive__sub { color: var(--oga-ink-muted); max-width: 660px; margin: 0 auto; }
.oga-archive__header h1::after {
	content: ""; display: block; width: 46px; height: 3px; margin: 14px auto 0;
	border-radius: 3px; background: linear-gradient(90deg, var(--oga-blue), var(--oga-red));
}

/* Personal Skill Center — the six Online Guide roles, shared on every archive. */
.oga-roles {
	margin: 0 0 var(--oga-space-xl);
	padding: var(--oga-space-lg);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	background: var(--oga-bg-soft);
}
.oga-roles__head { text-align: center; margin-bottom: var(--oga-space-md); }
.oga-roles__eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: #fff; margin-bottom: 12px;
	background: linear-gradient(90deg, var(--oga-red), var(--oga-blue));
	border-radius: 999px; padding: 6px 16px;
}
.oga-roles__head h2 { margin: 0 0 8px; }
.oga-roles__head p { color: var(--oga-ink-muted); max-width: 680px; margin: 0 auto; }
.oga-roles__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oga-space-sm);
}
.oga-role-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px; border: 1px solid var(--oga-border); border-radius: var(--oga-radius-md);
	background: #fff; color: var(--oga-ink); text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.oga-role-card:hover {
	text-decoration: none; border-color: var(--oga-blue); transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(3, 46, 161, .10);
}
.oga-role-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, rgba(3,46,161,.10), rgba(224,0,37,.10));
	color: var(--oga-blue);
}
.oga-role-card__label { font-weight: 700; font-size: 16px; color: var(--oga-blue); }
.oga-role-card__blurb { font-size: 13.5px; color: var(--oga-ink-muted); line-height: 1.5; }
@media (max-width: 860px) { .oga-roles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
	.oga-roles { padding: var(--oga-space-md); }
	.oga-roles__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) { .oga-hero h1 { font-size: 30px; } }

/* ── Homepage polish: centered section headings, even rhythm ─────────────
   Scoped to .oga-home so archives / single templates keep their own layout.
   Section titles are centered with a small blue→red accent underline; intro
   copy, chip grids, and the social row are centered for a clean, balanced
   composition above the (left-aligned) card grids. */
.oga-home > section { margin-bottom: var(--oga-space-xl); }
.oga-home > section:last-child { margin-bottom: var(--oga-space-lg); }

.oga-home > section > h2 {
	text-align: center;
	margin-bottom: var(--oga-space-md);
}
.oga-home > section:not(.oga-cta-band) > h2::after {
	content: "";
	display: block;
	width: 46px; height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--oga-blue), var(--oga-red, #d81f36));
}

/* Centered, readable intro / trailing copy and "view all" rows. */
.oga-home > section > p {
	text-align: center;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.oga-home .oga-section-intro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.oga-home .oga-chip-grid { justify-content: center; }
.oga-home .oga-social-row { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — phones · tablets · laptops · large screens
   Layered on top of the fluid grid/flex base. Fluid primitives already
   reflow the card/chip grids; these breakpoints tune navigation, spacing,
   typography, and stacking so every device gets a clean layout.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet & below — collapse the primary nav into the hamburger panel.
   1100px (not the more typical ~900px) because with the full 6-item nav
   ("Tours · Guides · Marketing services · Promote · News · Tourist Shop")
   plus the logo held to nowrap above, 900-1080px is a dead zone where a
   full desktop nav row no longer fits but the breakpoint hadn't kicked in
   yet — the exact gap that was causing the wrapping. 1100px has margin to
   spare above that measured threshold. */
@media (max-width: 1100px) {
	.oga-nav-toggle { display: inline-flex; }
	.oga-site-header .oga-container { flex-wrap: wrap; row-gap: var(--oga-space-sm); }
	.oga-nav { display: none; order: 3; flex-basis: 100%; width: 100%; }
	.oga-nav.is-open { display: block; }
	.oga-nav ul {
		flex-direction: column; align-items: stretch; gap: 0;
		border-top: 1px solid var(--oga-border); margin-top: var(--oga-space-xs);
	}
	.oga-nav li { border-bottom: 1px solid var(--oga-border); }
	.oga-nav a { width: 100%; padding: 14px 4px; font-size: 16px; }
}

/* Tablet portrait — tighten hero + section rhythm, smaller headings. */
@media (max-width: 768px) {
	:root { --oga-space-xl: 44px; --oga-space-lg: 30px; }
	.oga-hero { padding: var(--oga-space-lg) 0 var(--oga-space-md); }
	.oga-hero h1 { font-size: 34px; }
	.oga-hero__sub { font-size: 16px; }
	.oga-single__title { font-size: 26px; }
	.oga-single__hero img { max-height: 300px; }
	.oga-cta-band, .oga-hook-band__inner, .oga-roles { padding: var(--oga-space-md); }
	.oga-grid { gap: var(--oga-space-md); }
}

/* Phones — comfortable padding, readable type, single-column stacks,
   full-width buttons for easy tapping. */
@media (max-width: 560px) {
	.oga-container { padding-left: var(--oga-space-sm); padding-right: var(--oga-space-sm); }
	h1 { font-size: 27px; }
	h2 { font-size: 21px; }
	.oga-hero h1 { font-size: 28px; }
	.oga-grid { grid-template-columns: 1fr; gap: var(--oga-space-md); }
	.oga-chip-grid { grid-template-columns: 1fr; }
	.oga-hero__cta { flex-direction: column; }
	.oga-hero__cta .oga-btn,
	.oga-single__actions .oga-btn { width: 100%; }
	.oga-site-footer__inner { flex-direction: column; align-items: flex-start; text-align: left; }
	.oga-site-footer__links { flex-wrap: wrap; gap: var(--oga-space-sm); }
	.oga-hook-band__price strong { font-size: 22px; }
}

/* Large desktops — let content breathe a little wider. */
@media (min-width: 1400px) {
	.oga-container { max-width: 1240px; }
}