/* Bali Canyoning Trip — global stylesheet. Page-specific styles live
   in a <style> block in each page's <head>. */

/* ===================== DESIGN TOKENS =====================
   Base color values, referenced via var() everywhere else. */
:root{
  /* Primary */
  --color-primary:#F48B29;
  --color-primary-hover:#D9741A;
  --color-primary-hover-alt:#FFA94D; /* body.t-home a:hover only */

  /* Secondary */
  --color-secondary:#125354;
  --color-secondary-dark:#0E4142;

  /* Accent */
  --color-accent:#4ADE80;

  /* Success */
  --color-success:#1F8A5B;
  --color-success-light:#CFE9D6;

  /* Warning */
  --color-warning-dark:#7A3D0E;

  /* Danger */
  --color-danger:#D64545;
  --color-danger-dark:#A83232;

  /* Text */
  --color-text:#16211F;
  --color-text-secondary:#46504C;
  --color-text-secondary-alt:#3A433F;
  --color-text-muted:#70756C; /* AA contrast fix */
  --color-text-muted-alt:#6C7164; /* AA contrast fix */
  --color-text-meta:#6E7874; /* AA contrast fix */
  --color-text-caption:#6A726D;
  --color-text-toc-label:#6B7671;
  --color-text-toc-numeral:#736E59; /* AA contrast fix */
  --color-text-blog:#2A332F;
  --color-placeholder:#68716B; /* AA contrast fix */

  /* Background */
  --color-bg:#F4F3EB;
  --color-bg-dark:#0A3132;
  --color-surface:#FFFFFF;
  --color-surface-soft:#F7F6EF;
  --color-black:#000000;

  /* Border / Divider */
  --color-border:#D8D5C2;
  --color-border-input:#958E5F; /* darker border for form inputs, WCAG contrast */
  --color-border-warning:#E7C9A6;
  --color-border-dashed:#C9C6B4;
  --color-divider:#ECEADE;
  --color-divider-section:#ECEAE1;
  --color-divider-pricing:#EAE7DA;
  --color-divider-blog:#E1DECC;
  --color-divider-blog-meta:#E7E4D6;
  --color-divider-feature:#EDEBE0;
  --color-rule:#D0CDBD;
  --color-divider-alt:#DAD7C7;

  /* Social */
  --color-whatsapp:#25D366;
}

/* ===================== SEMANTIC / FUNCTIONAL LAYER =====================
   Components reference a token's purpose, not its literal color. */
:root{
  /* Primary — display (decorative/icon accents), text (links, breadcrumbs),
     cta (button/badge fills), ui (borders, focus rings, hover outlines).
     text/ui darkened for AA contrast; display/cta stay brand orange. */
  --color-primary-display:var(--color-primary);
  --color-primary-text:#AA5709;
  --color-primary-cta:var(--color-primary);
  --color-primary-ui:#AA5709;

  /* Secondary (deep teal) */
  --color-secondary-text:var(--color-secondary);
  --color-secondary-surface:var(--color-secondary);
  --color-secondary-ui:var(--color-secondary);
  --color-secondary-dark-text:var(--color-secondary-dark);
  --color-secondary-dark-surface:var(--color-secondary-dark);

  /* Accent (bright green) */
  --color-accent-display:var(--color-accent);
  --color-accent-cta:var(--color-accent);
  --color-accent-ui:var(--color-accent);

  /* Success */
  --color-success-text:var(--color-success);
  --color-success-cta:var(--color-success);
  --color-success-ui:var(--color-success);

  /* Danger — text darkened for AA contrast; ui already passes contrast, left aliased */
  --color-danger-text:#C42B2B;
  --color-danger-ui:var(--color-danger);

  /* Warning / Difficulty — own hue, not aliased to primary; darkened for AA contrast */
  --color-warning-text:#A76016;
  --color-difficulty-text:#A76016;

  /* Structural tokens with a second role beyond their name: */
  --color-text-on-dark:var(--color-bg);        /* cream text on dark sections */
  --color-ui-on-dark:var(--color-bg);          /* pale borders/outlines on dark sections */
  --color-text-on-color:var(--color-surface);  /* white text on colored/dark fills */
  --color-text-on-accent:var(--color-bg-dark); /* dark navy text on bright accent badges */
  --color-footer-bg:var(--color-text);         /* site footer background reuses body-text's near-black */
  --color-numeral-display:var(--color-border); /* decorative oversized step numerals */
}

/* ===================== SPACING TOKENS =====================
   Named after the dominant margin/padding/gap values already in use. */
:root{
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:20px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:40px;
  --space-gutter:clamp(20px,5vw,48px);  /* page gutter */
  --space-section:clamp(48px,6vw,88px); /* section padding */
}

/* ===================== TYPOGRAPHY TOKENS =====================
   Only values that recur consistently across the site are named here —
   not a full type scale. */
:root{
  /* Family — mapped to the @font-face families loaded below. */
  --font-family-display:'Big Shoulders Display',sans-serif;
  --font-family-body:'Hanken Grotesk',sans-serif;
  --font-family-mono:'Spline Sans Mono',monospace;

  /* Weight — the six weights loaded via @font-face below. */
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;
  --font-weight-black:900;

  /* Size — only the values genuinely dominant for that role. */
  --font-size-h2:clamp(32px,4.6vw,50px);      /* H2 */
  --font-size-h3:clamp(24px,3vw,32px);        /* H3 */
  --font-size-body-lg:clamp(15px,1.7vw,17px); /* Body Large */
  --font-size-body:14px;                      /* Body */
  --font-size-small:11px;                     /* Small text */
  --font-size-caption:10.5px;                 /* footer eyebrow / gallery caption */
  --font-size-mono:11.5px;                    /* primary nav link */

  /* Line-height — the four values with real repetition. */
  --line-height-tight:1;      /* mono/label/nav text */
  --line-height-heading:.94;  /* headings */
  --line-height-body:1.65;    /* paragraph body */
  --line-height-relaxed:1.72; /* long-form article copy */

  /* Letter-spacing (tracking), ascending by magnitude. */
  --tracking-tight:.005em;   /* H1/H2 heading */
  --tracking-normal:.1em;    /* most common tracking value */
  --tracking-wide:.16em;     /* footer eyebrow / breadcrumb labels */
  --tracking-display:.22em; /* hero eyebrow tags */
}

/* ===================== RADIUS TOKENS =====================
   The five most-used border-radius values site-wide, ascending. */
:root{
  --radius-xs:9px;     /* compact buttons, small icon-badges */
  --radius-sm:10px;    /* form inputs, mobile-menu CTA */
  --radius-md:11px;    /* larger buttons */
  --radius-lg:14px;    /* mid cards/tiles */
  --radius-xl:16px;    /* larger cards/panels */
  --radius-pill:999px; /* pill badges/chips */
  --radius-circle:50%; /* circular controls (FAB, play button, lightbox arrows) */
}

/* Semantic Radius — named by design intent rather than raw size. */
:root{
  /* Interactive controls only (buttons, button-like links, form inputs). */
  --radius-control:8px;

  /* Decorative UI only — the rotated-square "difficulty diamond" indicator. */
  --radius-decorative:2px;
}

/* ===================== SHADOW TOKENS =====================
   Named, frequently-repeated shadow values; near-duplicates are kept
   as separate tokens on purpose (e.g. modal vs lightbox blur radius). */
:root{
  --shadow-fab:0 8px 24px rgba(10,49,50,.35);                        /* WhatsApp FAB */
  --shadow-focus:inset 0 0 0 3px var(--color-primary-ui);            /* :focus-visible ring */
  --shadow-modal:0 30px 90px rgba(0,0,0,.6);                         /* video lightbox modal */
  --shadow-lightbox:0 30px 80px rgba(0,0,0,.6);                      /* photo lightbox modal */
  --shadow-card-hover:0 20px 44px rgba(10,49,50,.16);                /* card hover elevation */
}

/* ===================== MOTION TOKENS =====================
   Durations/easings/transforms found genuinely repeated site-wide.
   Named by literal value, not a fast/normal/slow tier. */
:root{
  /* Duration */
  --motion-duration-150:.15s;  /* skip-link, form-input focus */
  --motion-duration-160:.16s;  /* dominant color/background/border transition */
  --motion-duration-180:.18s;  /* 404 linkcard, contact infocard */
  --motion-duration-200:.2s;   /* dominant card-hover-lift transform */
  --motion-duration-250:.25s;  /* play-btn hover, navlink underline-wipe */
  --motion-duration-280:.28s;  /* video-modal pop-in */
  --motion-duration-300:.3s;   /* video hover-zoom filter, caption reveal */
  --motion-duration-500:.5s;   /* gallery tile hover-zoom */
  --motion-duration-600:.6s;   /* video hover-zoom transform */
  --motion-duration-2600:2.6s; /* play-ring pulse loop */

  /* Easing */
  --motion-ease-standard:ease;                        /* default curve */
  --motion-ease-out:ease-out;                          /* play-ring pulse loop */
  --motion-ease-emphasized:cubic-bezier(.2,.7,.2,1);   /* hover-zoom + modal pop-in */

  /* Transform — hover lift and hover scale. */
  --motion-lift-sm:translateY(-2px);  /* .inc-pill hover */
  --motion-lift-md:translateY(-3px);  /* card hover */
  --motion-lift-lg:translateY(-4px);  /* dominant card-lift distance */
  --motion-scale-sm:scale(1.04);      /* video hover-zoom image */
  --motion-scale-md:scale(1.07);      /* gallery tile hover-zoom image */
  --motion-scale-lg:scale(1.09);      /* play button hover pop */
}

/* ===================== PRIMITIVE COMPONENTS =====================
   Shared atoms duplicated verbatim across multiple pages, centralized
   here with zero visual change. */

/* Chips / Pills / Badges */
.inc-pill{white-space:nowrap;transition:transform var(--motion-duration-160) var(--motion-ease-standard),box-shadow var(--motion-duration-160) var(--motion-ease-standard)}
.inc-pill:hover{transform:var(--motion-lift-sm);box-shadow:0 8px 20px rgba(10,49,50,.09)}
.cat-chip,.page-link{transition:background var(--motion-duration-160) var(--motion-ease-standard),color var(--motion-duration-160) var(--motion-ease-standard),border-color var(--motion-duration-160) var(--motion-ease-standard)}
.cat-chip:hover,.page-link:hover,.cat-chip:focus-visible,.page-link:focus-visible{background:var(--color-secondary-surface) !important;color:var(--color-text-on-color) !important;border-color:var(--color-secondary-ui) !important}
.cat-chip.is-active,.page-link.is-active{background:var(--color-primary-cta) !important;color:var(--color-text-on-color) !important;border-color:var(--color-primary-ui) !important}
.hero-plate{background:rgba(10,49,50,.42);border-radius:var(--radius-xs);padding:var(--space-xs) 14px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Difficulty Badge — reusable primitive; not yet wired into markup
   (existing instances are still inline-styled). Custom properties
   carry per-instance size/fill/border. */
.diff-pip{display:inline-block;width:var(--diff-pip-size,9px);height:var(--diff-pip-size,9px);transform:rotate(45deg);border-radius:var(--radius-decorative);background:var(--diff-pip-fill,transparent);border:1.5px solid var(--diff-pip-border,currentColor)}

/* Form fields — shared by contact + booking. */
.finput{width:100%;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:15px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-input);border-radius:var(--radius-sm);padding:13px 15px;outline:none;transition:border-color var(--motion-duration-150) var(--motion-ease-standard),box-shadow var(--motion-duration-150) var(--motion-ease-standard);-webkit-appearance:none;appearance:none}
.finput::placeholder{color:var(--color-placeholder)}
.finput:focus{border-color:var(--color-primary-ui);box-shadow:0 0 0 3px rgba(244,139,41,.16);outline:none}
.finput[aria-invalid="true"]{border-color:var(--color-danger-ui);box-shadow:0 0 0 3px rgba(214,69,69,.13)}
.flabel{display:block;font-family:var(--font-family-mono);font-size:var(--font-size-caption);letter-spacing:.13em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-xs)}
.freq{color:var(--color-primary-display);margin-left:3px}
.fgroup{display:flex;flex-direction:column}
.ferr{display:flex;align-items:center;gap:6px;margin-top:7px;font-family:var(--font-family-mono);font-size:var(--font-size-caption);letter-spacing:.02em;color:var(--color-danger-text)}

.skip-link{position:absolute;top:-100px;left:8px;z-index:9999;background:var(--color-primary-cta);color:var(--color-text-on-color);padding:var(--space-sm) var(--space-lg);border-radius:8px;font-family:'Spline Sans Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:top var(--motion-duration-150) var(--motion-ease-standard)}
.skip-link:focus{top:8px}

/* ===================== COMPOSITE COMPONENTS =====================
   Card family only. Each card's visual shape is set inline per
   instance — these rules only centralize the shared transition/hover
   treatment where it was already byte-identical across files. */

/* .card-h — "why choose us" tile */
.card-h{transition:transform var(--motion-duration-200) var(--motion-ease-standard), box-shadow var(--motion-duration-200) var(--motion-ease-standard)}
.card-h:hover{transform:var(--motion-lift-md);box-shadow:0 16px 36px rgba(10,49,50,.12)}

/* .relcard (related-trip) / .pkgcard (package) — share identical CSS */
.relcard,.pkgcard{transition:transform var(--motion-duration-200) var(--motion-ease-standard), box-shadow var(--motion-duration-200) var(--motion-ease-standard)}
.relcard:hover,.pkgcard:hover{transform:var(--motion-lift-lg);box-shadow:var(--shadow-card-hover)}

/* .liftcard — generic content card */
.liftcard{transition:transform var(--motion-duration-200) var(--motion-ease-standard), box-shadow var(--motion-duration-200) var(--motion-ease-standard)}
.liftcard:hover{transform:var(--motion-lift-lg);box-shadow:0 14px 34px rgba(10,49,50,.16)}

/* .post-card — .liftcard modifier for the blog category image-left layout */
@media (min-width:641px){
  .post-card{flex-direction:row !important}
  .post-card [data-post-image]{width:280px !important;height:auto !important;flex:0 0 280px}
  .post-card>div:last-child{flex:1;min-width:0}
}

/* Video Family + Gallery/Lightbox Family. Byte-identical across all
   consuming pages. Per-page gallery grid layouts are left out since
   photo count/layout genuinely differs per page. */
.video-feat{position:relative;display:block;width:100%;aspect-ratio:16/9;border:none;padding:0;margin:0;border-radius:18px;overflow:hidden;cursor:pointer;background:var(--color-bg-dark)}
.video-feat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--motion-duration-600) var(--motion-ease-emphasized),filter var(--motion-duration-300) var(--motion-ease-standard)}
.video-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,49,50,.14) 0%,rgba(10,49,50,.12) 52%,rgba(10,49,50,.62) 100%)}
.video-feat:hover>img{transform:var(--motion-scale-sm);filter:brightness(.9)}
.play-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(66px,7vw,94px);height:clamp(66px,7vw,94px);border-radius:var(--radius-circle);background:var(--color-primary-cta);z-index:1;animation:pulsering var(--motion-duration-2600) var(--motion-ease-out) infinite;pointer-events:none}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(66px,7vw,94px);height:clamp(66px,7vw,94px);border-radius:var(--radius-circle);background:var(--color-primary-cta);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 44px rgba(10,49,50,.55);transition:transform var(--motion-duration-250) var(--motion-ease-standard);pointer-events:none;padding-left:3px}
.video-feat:hover .play-btn{transform:translate(-50%,-50%) var(--motion-scale-lg)}
@keyframes pulsering{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}70%{transform:translate(-50%,-50%) scale(1.75);opacity:0}100%{transform:translate(-50%,-50%) scale(1.75);opacity:0}}
@keyframes modalfade{from{opacity:0}to{opacity:1}}
@keyframes modalpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.g-tile{position:relative;overflow:hidden;border-radius:var(--radius-lg);cursor:pointer;border:1px solid rgba(244,243,235,.12);background:var(--color-secondary-dark-surface)}
.g-tile:focus-visible{outline:3px solid var(--color-ui-on-dark);outline-offset:-3px}
.g-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--motion-duration-500) var(--motion-ease-emphasized)}
.g-tile:hover img{transform:var(--motion-scale-md)}
.g-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 15px 13px;background:linear-gradient(180deg,transparent,rgba(10,49,50,.85));opacity:0;transform:translateY(6px);transition:opacity var(--motion-duration-300) var(--motion-ease-standard),transform var(--motion-duration-300) var(--motion-ease-standard);font-family:var(--font-family-mono);font-size:var(--font-size-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-on-dark);pointer-events:none}
.g-tile:hover .g-cap,.g-tile:focus-visible .g-cap{opacity:1;transform:none}
.lb-nav{transition:background var(--motion-duration-200) var(--motion-ease-standard),border-color var(--motion-duration-200) var(--motion-ease-standard)}
.lb-nav:hover{background:rgba(244,243,235,.2) !important;border-color:rgba(244,243,235,.5) !important}

[data-video-modal]{display:none}
[data-video-modal].is-open{display:flex}
.video-modal-box{width:min(94vw,420px);aspect-ratio:9/16;margin:0 auto;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-black);box-shadow:var(--shadow-modal);animation:modalpop var(--motion-duration-280) var(--motion-ease-emphasized)}
@media (min-width:641px){
  .video-modal-box{width:auto;height:min(88vh,860px)}
}
[data-lightbox]{display:none}
[data-lightbox].is-open{display:flex}

/* FAQ Family — two variants sharing the same JS accordion mechanism
   (data-faq/-toggle/-panel/-icon in main.js) but different behavior:
   .faq-item opens independently; .faqbtn is single-open accordion. */
.faqbtn{transition:color var(--motion-duration-160) var(--motion-ease-standard)}
.faqbtn:hover{color:var(--color-primary-display)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/big-shoulders-display/600.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/big-shoulders-display/700.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/big-shoulders-display/800.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/big-shoulders-display/900.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk/400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk/500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk/600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk/700.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/hanken-grotesk/800.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/spline-sans-mono/400.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spline-sans-mono/500.woff2') format('woff2')}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--color-text);-webkit-font-smoothing:antialiased}
a{color:var(--color-primary-text);text-decoration:none}
a:hover{color:var(--color-primary-hover)}

/* Global keyboard-focus indicator. Two concentric rings in opposite
   tones so at least one always has contrast on light or dark sections. */
:focus-visible{outline:2px solid var(--color-bg-dark);outline-offset:2px;box-shadow:0 0 0 4px var(--color-bg)}

h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* page background themes */
body.t-dark{background:var(--color-bg-dark);line-height:1.55}
body.t-cream{background:var(--color-bg);line-height:1.6}
body.t-home a:hover{color:var(--color-primary-hover-alt)}

/* buttons */
.cta{transition:filter var(--motion-duration-160) var(--motion-ease-standard), transform var(--motion-duration-160) var(--motion-ease-standard)}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(1px)}
.ghost{transition:background var(--motion-duration-160) var(--motion-ease-standard),color var(--motion-duration-160) var(--motion-ease-standard),border-color var(--motion-duration-160) var(--motion-ease-standard)}
.ghost:hover{background:var(--color-secondary-surface) !important;color:var(--color-text-on-color) !important;border-color:var(--color-secondary-ui) !important}
.ghost-l{transition:background var(--motion-duration-160) var(--motion-ease-standard),color var(--motion-duration-160) var(--motion-ease-standard),border-color var(--motion-duration-160) var(--motion-ease-standard)}
.ghost-l:hover{background:rgba(244,243,235,.16) !important;color:var(--color-text-on-color) !important;border-color:var(--color-ui-on-dark) !important}

/* cookie consent banner (assets/js/main.js initConsentBanner) */
.consent-banner{animation:consent-banner-in var(--motion-duration-300) var(--motion-ease-out)}
@keyframes consent-banner-in{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* nav */
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--color-ui-on-dark);transition:right var(--motion-duration-250) var(--motion-ease-standard)}
.navlink:hover::after{right:0}
.hamburger{display:none}

/* mobile menu overlay (toggled via JS) */
.mobile-menu{display:none}
.mobile-menu.is-open{display:flex}

/* footer: long unbroken strings (email, phone) wrap rather than force the page wide */
.footer-top{overflow-wrap:anywhere}

@media (max-width:980px){
  .nav-links{display:none !important}
  .hamburger{display:inline-flex !important}
}
/* Three-column footer holds until columns no longer fit; then splits 2x2. */
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr !important}
}
/* Tablet: two columns, explicit placement (DOM order doesn't match the desired pairing). */
@media (min-width:641px) and (max-width:900px){
  .footer-top>:nth-child(1){grid-column:1;grid-row:1}  /* Brand    */
  .footer-top>:nth-child(4){grid-column:2;grid-row:1}  /* Social   */
  .footer-top>:nth-child(2){grid-column:1;grid-row:2}  /* Location */
  .footer-top>:nth-child(3){grid-column:2;grid-row:2}  /* Contact  */
  .footer-top>:nth-child(5){grid-column:1;grid-row:3}  /* Explore  */
  .footer-top>:nth-child(6){grid-column:2;grid-row:3}  /* Company  */
}
@media (max-width:640px){
  /* legacy 3-col footer, still used by mini-canyoneering pages */
  .footer-grid{grid-template-columns:minmax(0,1fr) !important;gap:var(--space-2xl) !important}
  .footer-top{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
  /* roomier tap targets once the groups are stacked */
  .footer-nav{gap:14px !important}
  .footer-nav a{padding:3px 0}
  .hdr-book{display:none !important}
  /* CTA sizing on phones — inline styles carry layout here, hence !important.
       .final-cta-row / .cta-stack - button rows
       .cta-full       - lone centered CTA
       .price-cta-col  - trip-page pricing column */
  .final-cta-row,.cta-stack{flex-direction:column !important;align-items:stretch !important}
  .final-cta-row>a,.final-cta-row>button,
  .cta-stack>a,.cta-stack>button{width:100% !important;justify-content:center !important}
  .cta-full{width:100% !important;justify-content:center !important}
  .price-cta-col{width:100% !important;min-width:0 !important}
  .consent-banner{flex-direction:column;text-align:center;gap:var(--space-md) !important}
  .consent-banner__text{flex:none !important}
  .consent-banner__actions{width:100%}
  .consent-banner__actions>button{flex:1 1 0}
}
@media (max-width:420px){
  /* .cta-full: long labels wrap to a second line below ~414px; tighten
     padding/font and drop the arrow so it stays on one line down to 320px. */
  .cta-full{padding:19px 18px !important;font-size:12px !important}
  .cta-full svg{display:none !important}
}
