/* =========================================================================
   Arival Demo — custom CSS
   Shared visual layer for every style variation. Hover states, atmosphere,
   section rhythm, FAQ, cards, hero, fact pills, concierge feature.
   Class-based only (no [style*=] selectors). TT5 mandatory fixes included.
   ========================================================================= */

/* ---------- TT5 full-bleed seam fix (NOT a global gap kill) ---------- */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.alignfull + .alignfull { margin-block-start: 0 !important; }
main .wp-block-post-content > .alignfull,
:where(.is-layout-flow, .is-layout-constrained) > .alignfull { margin-block-end: 0 !important; }
main .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0 !important; }

/* ---------- TT5 white box fix ---------- */
.has-text-color { border: none !important; outline: none !important; box-shadow: none !important; }

/* ---------- TT5 nav frame fix ---------- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus {
  border: none !important; outline: none !important; box-shadow: none !important;
}
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary) !important; outline-offset: 3px; border-radius: 4px;
}

/* ---------- Mobile nav: forced overlay up to 900px ----------
   This nav (5 links + a CTA) wraps awkwardly in WP core's 600-900px "dead
   zone", so force hamburger/overlay mode up to 899.98px. This is the sanctioned
   exception in wordpress-theme-dev/header-footer-nav.md ("When the nav is too
   wide for 600px"). Three parts must stay in sync: (a) force the hamburger and
   hide the inline container across the range, below; (b) the hamburger-button
   styling range matches at 899.98px, below; (c) the .is-menu-open overlay block
   stays UN-gated by any breakpoint (it already is, further down). */
@media (max-width: 900px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  header.wp-block-template-part .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
  }
}
@media (min-width: 901px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

/* ---------- Mobile nav: hamburger button colour (range matches the 900px ceiling) ---------- */
@media (max-width: 899.98px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container-open,
  header.wp-block-template-part .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--contrast) !important;
    background: transparent !important;
    border: 0 !important;
  }
  header.wp-block-template-part .wp-block-navigation__responsive-container-open svg,
  header.wp-block-template-part .wp-block-navigation__responsive-container-close svg {
    fill: currentColor !important;
    width: 28px;
    height: 28px;
  }
  /* 44px minimum tap target */
  header.wp-block-template-part .wp-block-navigation__responsive-container-open {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
  }
}

/* ---------- Mobile nav: full-screen overlay ----------
   position:fixed + inset:0 is mandatory. WP core un-fixes the container
   above 600px; this rule re-fixes it whenever .is-menu-open is set.
   Do NOT reduce to z-index alone — that breaks the overlay above 600px. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 99999 !important;
  padding: 2rem 1.5rem !important;
  overflow-y: auto !important;
  background-color: var(--wp--preset--color--base) !important;
}

/* Close (X) button — 44px tap target, top-right */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--contrast) !important;
  min-width: 44px;
  min-height: 44px;
  top: 1rem;
  right: 1rem;
  position: absolute;
}

/* Content wrapper — pad below the close button, reset inherited right-alignment */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  padding-top: 3rem;
  align-items: flex-start !important;
  width: 100% !important;
}

/* Nav list — full width, vertical stack, left-aligned */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: 0 !important;
}

/* Nav links — large, tappable, no inherited text-shadow */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--wp--preset--color--contrast) !important;
  text-shadow: none !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus {
  background: rgba(251, 241, 246, 0.12) !important;
  border-radius: 6px;
}

/* Kill auto-focus outline on tap-open (keep it for keyboard navigation) */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus {
  outline: none;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus-visible {
  outline: 2px solid rgba(251, 241, 246, 0.45);
  border-radius: 4px;
}

/* Body scroll lock */
html.has-modal-open,
html.has-modal-open body {
  overflow: hidden !important;
}

/* ---------- Comprehensive click-box fix ---------- */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
.wp-block-navigation-item__content:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible) {
  outline: none !important; box-shadow: none !important;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 4px;
}

/* ---------- TT5 mobile side gutter ---------- */
.alignfull.has-global-padding {
  padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
  padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--40));
}
@media (max-width: 768px) {
  .alignfull { padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); }
}

/* ---------- Section rhythm ---------- */
.arival-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.arival-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: .74rem; color: var(--wp--preset--color--accent);
}

/* ---------- Sticky header ---------- */
.wp-block-template-part .wp-block-group.arival-header,
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- Hero (Answer Card) ---------- */
.arival-hero { position: relative; overflow: hidden; }
.arival-hero .wp-block-cover__image-background { filter: saturate(.95) contrast(1.03); }
.arival-hero h1 { text-wrap: balance; }

/* ---------- Fact pills ---------- */
.arival-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.arival-fact {
  background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; padding: 8px 15px; font-size: .86rem; font-weight: 600;
}
.arival-fact strong { color: var(--wp--preset--color--accent-soft); font-weight: 700; }

/* ---------- Experience cards ---------- */
.arival-card {
  border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden;
  background: var(--wp--preset--color--surface);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.arival-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); border-color: var(--wp--preset--color--accent); }
.arival-card .wp-block-post-featured-image img,
.arival-card figure img { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.arival-card:hover figure img { transform: scale(1.06); }
.arival-card .arival-price { color: var(--wp--preset--color--accent); font-weight: 700; }

/* ---------- Concierge feature ---------- */
.arival-concierge { position: relative; overflow: hidden; }
.arival-concierge .arival-pulse {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--wp--preset--color--accent);
  animation: arival-pulse 2.4s infinite;
}
@keyframes arival-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- FAQ (native details blocks) ---------- */
.arival-faq .wp-block-details {
  border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
  padding: 4px 18px; margin-bottom: 10px; background: var(--wp--preset--color--surface);
}
.arival-faq .wp-block-details summary {
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  font-size: 1.08rem; padding: 14px 0; cursor: pointer; list-style: none;
}
.arival-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.arival-faq .wp-block-details > *:not(summary) { padding-bottom: 14px; }

/* ---------- Scroll reveal ---------- */
.reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.editor-styles-wrapper .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .arival-card { transition: none !important; }
}

/* =========================================================================
   Reviews: carousel (tour pages) + strip (Home + tour pages) + testimonials page
   Scroll-snap, no JS, keyboard + touch friendly, prefers-reduced-motion safe.
   ========================================================================= */
.arival-reviews { position: relative; }
.arival-reviews-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: .74rem; color: var(--wp--preset--color--accent);
}

/* Carousel: horizontal scroll-snap row of cards */
.arival-carousel {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 0.75rem; scrollbar-width: thin;
}
.arival-carousel > * { scroll-snap-align: start; flex: 0 0 88%; max-width: 360px; }
@media (min-width: 600px) { .arival-carousel > * { flex-basis: 46%; } }
@media (min-width: 900px) { .arival-carousel > * { flex-basis: 31%; } }

/* Review card */
.arival-review-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px; padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.arival-review-card .arival-stars {
  color: var(--wp--preset--color--accent); letter-spacing: 2px; font-size: 1rem;
}
.arival-review-card .arival-quote {
  font-family: var(--wp--preset--font-family--serif); font-style: italic;
  font-size: 1.05rem; line-height: 1.5;
}
.arival-review-card .arival-byline {
  font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--contrast);
}
.arival-review-card .arival-byline span {
  font-weight: 500; color: var(--wp--preset--color--contrast-soft);
}

/* Compact strip variant (fewer, lighter) */
.arival-strip .arival-review-card { padding: 1.1rem 1.2rem; }
.arival-strip .arival-quote { font-size: .98rem; }

@media (prefers-reduced-motion: reduce) {
  .arival-carousel { scroll-behavior: auto; }
}

/* =========================================================================
   Blog archive grid (home.html) + image placeholder
   ========================================================================= */
.arival-blog-grid .arival-card { overflow: hidden; }
.arival-blog-grid .arival-blog-thumb { margin: 0; }
.arival-blog-grid .arival-blog-thumb img {
  width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.arival-blog-grid .arival-card:hover .arival-blog-thumb img { transform: scale(1.05); }

/* Image placeholder: any post-featured-image with no <img> gets a branded block
   so cards are never blank while real images are pending. */
.arival-blog-grid .wp-block-post-featured-image:not(:has(img)) {
  aspect-ratio: 1200 / 630;
  background:
    linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--base-2));
  border-bottom: 1px solid var(--wp--preset--color--line);
  position: relative;
}
.arival-blog-grid .wp-block-post-featured-image:not(:has(img))::after {
  content: "Driftwood & Tide";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  color: var(--wp--preset--color--accent); opacity: .5; letter-spacing: .02em;
}
.arival-blog-grid .wp-block-post-terms a { text-decoration: none; }
.arival-blog-grid .wp-block-post-title { line-height: 1.15; }

/* ---------- Padam Pink button contrast fix (AA compliance) ----------
   Padam Pink (#FF2E88) is the primary preset. White text on it = 3.5:1 (fail AA).
   Black/dark (base #06100F) on it = ~6:1 (pass AA). Force dark label on any
   primary-background button so the colour can be used freely in CTAs. */
.wp-block-button__link.has-primary-background-color {
  color: var(--wp--preset--color--base) !important;
}
.wp-block-button__link.has-primary-background-color:hover,
.wp-block-button__link.has-primary-background-color:focus {
  color: var(--wp--preset--color--base) !important;
}

/* ---------- Blog placeholder brand text update ---------- */
.arival-blog-grid .wp-block-post-featured-image:not(:has(img))::after {
  content: "Dungeon and Drag-ons";
}

/* =========================================================================
   Light content sections — paper (#F7F0FC) background
   Used for story / about sections. Dark text on light surface for contrast.
   ========================================================================= */
.has-paper-background-color {
  color: #2A1645;
}
.has-paper-background-color .wp-block-heading,
.has-paper-background-color h1,
.has-paper-background-color h2,
.has-paper-background-color h3,
.has-paper-background-color h4 {
  color: #1A0E2E !important;
}
/* Body text in story sections: medium-dark plum, not the pale contrast-soft mauve */
.has-paper-background-color .has-contrast-soft-color {
  color: #4A3065 !important;
}
/* Italic founder line: keep a darker version of the gold accent */
.has-paper-background-color .has-accent-soft-color {
  color: #8B6B1A !important;
}
/* Eyebrow label: stay gold */
.has-paper-background-color .arival-eyebrow {
  color: var(--wp--preset--color--accent) !important;
}
/* Links inherit dark */
.has-paper-background-color a {
  color: var(--wp--preset--color--primary-deep) !important;
}
.has-paper-background-color a:hover {
  color: var(--wp--preset--color--primary) !important;
}
/* Line colour for section dividers inside light sections */
.has-paper-background-color .wp-block-separator {
  border-color: #D0B8E8;
}

/* =========================================================================
   Cover overlay dimRatio override
   Reduce the maximum effective dim to 55% so background images show through
   even when the block JSON has a higher value. Does not override values
   where the overlay class itself is explicitly at 50 or below.
   ========================================================================= */
.wp-block-cover .has-background-dim-80 { opacity: 0.55 !important; }
.wp-block-cover .has-background-dim-70 { opacity: 0.50 !important; }
.wp-block-cover .has-background-dim-60 { opacity: 0.45 !important; }
.wp-block-cover .has-background-dim-50 { opacity: 0.34 !important; }
.wp-block-cover .has-background-dim-40 { opacity: 0.28 !important; }
/* Hero covers carry vibrant, on-brand photography (drag queens, neon, red
   velvet). The dark overlay crushed them to a flat near-black void — the
   "too dark / hard to read" report — and it rendered inconsistently dark from
   page to page. Drop the hero overlay entirely so the image stays fully vivid,
   and carry text contrast with a strong text-shadow (a dark halo that keeps
   near-white copy legible over any part of the image). Section covers keep
   their own dim values — this targets .arival-hero only. */
.arival-hero .wp-block-cover__background[class*="has-background-dim"] {
  opacity: 0 !important;
}
.arival-hero h1,
.arival-hero h2,
.arival-hero .wp-block-heading,
.arival-hero p,
.arival-hero .arival-eyebrow {
  text-shadow: 0 2px 22px rgba(6, 8, 12, 0.78), 0 1px 5px rgba(6, 8, 12, 0.7);
}
/* Heroes are above the fold — they don't need to fade in, and the reveal
   transform combined with the image filter left the cover background image
   un-painted on first render in some engines (visible as a flat dark hero
   until a repaint). Render heroes statically and promote the background image
   to its own compositing layer so it always paints on load. */
.arival-hero.reveal-on-scroll {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.arival-hero .wp-block-cover__image-background {
  transform: translateZ(0);
  animation: arival-hero-paint 0.5s ease-out both;
}
/* A near-noop opacity animation forces the compositor to paint the promoted
   image layer on load, so the hero is never blank until the first scroll. */
@keyframes arival-hero-paint {
  from { opacity: 0.985; }
  to   { opacity: 1; }
}

/* =========================================================================
   Gold (accent) button contrast — companion to the Padam Pink fix above.
   Light text on Disco Gold (#E6B450) is ~1.7:1 (fail AA). Dark base label
   passes. Covers the header "Hold your spot" CTA and "Read all reviews".
   ========================================================================= */
.wp-block-button__link.has-accent-background-color,
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus {
  color: var(--wp--preset--color--base) !important;
}

/* =========================================================================
   AI X-Ray install page  (/see-your-site/)
   Radiograph aesthetic: near-black film, luminous blue-white, amber accent.
   Matches xray.css token set exactly. Scoped to .arival-xray-* wrappers
   so nothing bleeds onto other pages.
   ========================================================================= */

/* Bookmarklet button — draggable, monospace, radiograph look */
.arival-bm-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0;
}

.arival-bm-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: #070a12;
  color: #cfe6ff !important;
  border: 1px solid rgba(207, 230, 255, 0.38);
  border-radius: 8px;
  font-family: ui-monospace, Menlo, "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  box-shadow: 0 0 0 1px rgba(207, 230, 255, 0.06), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.arival-bm-btn:hover,
.arival-bm-btn:focus-visible {
  border-color: rgba(207, 230, 255, 0.72);
  color: #e8eeff !important;
  background: #0c1220;
}

.arival-bm-btn:active { cursor: grabbing; }

.arival-bm-btn:focus-visible {
  outline: 2px solid #cfe6ff;
  outline-offset: 3px;
}

/* Drag hint */
.arival-bm-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(207, 230, 255, 0.35);
  margin: 0;
  user-select: none;
}

.arival-bm-hint svg {
  flex-shrink: 0;
  opacity: 0.55;
  transform: rotate(180deg); /* arrow pointing up = drag up */
}

/* Numbered steps list */
.arival-steps-list {
  padding-left: 1.4rem;
}

.arival-steps-list li {
  padding: 6px 0;
  color: var(--wp--preset--color--contrast-soft);
  line-height: 1.65;
}

.arival-steps-list li strong {
  color: var(--wp--preset--color--contrast);
}

/* Caveat / warning box */
.arival-xray-caveat-box {
  background: rgba(232, 160, 48, 0.05) !important;
}

/* Paste fallback section */
.arival-paste-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arival-paste-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(207, 230, 255, 0.45);
  display: block;
}

.arival-paste-textarea {
  width: 100%;
  min-height: 180px;
  background: #05070b;
  color: rgba(207, 230, 255, 0.75);
  border: 1px solid rgba(207, 230, 255, 0.18);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: ui-monospace, Menlo, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 200ms ease;
}

.arival-paste-textarea:focus {
  border-color: rgba(207, 230, 255, 0.45);
}

.arival-paste-textarea::placeholder {
  color: rgba(207, 230, 255, 0.22);
}

.arival-paste-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 13px 26px;
  background: rgba(207, 230, 255, 0.08);
  color: #cfe6ff;
  border: 1px solid rgba(207, 230, 255, 0.28);
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  min-height: 44px;
  transition: background 180ms ease, border-color 180ms ease;
}

.arival-paste-btn:hover,
.arival-paste-btn:focus-visible {
  background: rgba(207, 230, 255, 0.14);
  border-color: rgba(207, 230, 255, 0.55);
  outline: none;
}

.arival-paste-btn:focus-visible {
  outline: 2px solid #cfe6ff;
  outline-offset: 3px;
}

.arival-paste-note {
  font-size: 0.72rem;
  color: rgba(207, 230, 255, 0.28);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .arival-bm-btn { font-size: 0.82rem; padding: 13px 20px; }
  .arival-paste-btn { align-self: stretch; }
}

/* ---------- Responsive header logo ----------
   Swaps the wide wordmark (dd-logo-wide.webp) for the square mark
   (dd-logo-square.webp) at the SAME 900px breakpoint where the nav
   collapses to the hamburger (see the nav rules above at max-width:900px /
   min-width:901px), so the whole header transitions to "mobile" as one unit.
   Logo backgrounds are pre-flattened to the header base colour (#06100F)
   so the image blends into the band with no visible rectangle. */
.arival-header .arival-logo { margin: 0; line-height: 0; }
.arival-header .arival-logo a { display: block; line-height: 0; }
.arival-header .arival-logo img { display: block; width: auto; height: auto; }
.arival-header .arival-logo-wide img { width: 200px; }   /* ~32px tall lockup, matches old 200px slot */
.arival-header .arival-logo-square img { width: 44px; }  /* 44px square, sits by the hamburger (44px tap target) */

/* Desktop (>=901px, nav inline): show wide wordmark, hide square mark */
@media (min-width: 901px) {
  .arival-header .arival-logo-square { display: none; }
}
/* Mobile (<=900px, nav = hamburger overlay): show square mark, hide wide wordmark */
@media (max-width: 900px) {
  .arival-header .arival-logo-wide { display: none; }
}