/*
Theme Name:   Highlander Gravel (Astra Child)
Theme URI:    https://rightstart-media.com
Description:  Child theme for Highlander Gravel Adventures. Carries the full
              design system ported from the approved design artifact: tokens,
              typography, buttons, header/footer chrome, trip cards, the
              contact block, and all three responsive breakpoints
              (980 / 860 / 760) that free Elementor cannot express.
Author:       Right Start Media
Author URI:   https://rightstart-media.com
Template:     astra
Version:      1.0.0
Text Domain:  hga-child
*/

/* ==========================================================================
   0. SELF-HOSTED FONTS
   Archivo 500-900 for display, Inter 400-600 for body.
   Google Fonts loaders in Astra and Elementor must be switched OFF.
   ========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/archivo-900.woff2') format('woff2')}

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


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
  --ink:#0A1826;
  --deep:#0E2A44;
  --moss:#1B4A72;
  --sage:#6FA8D6;
  --sand:#E9E5DE;
  --paper:#F8F6F2;
  --clay:#006CB4;
  --clay-lt:#2E8FD4;

  --line:rgba(255,255,255,.15);
  --line-d:rgba(10,24,38,.14);

  --maxw:1240px;
  --r:4px;

  --sh-img:0 2px 6px rgba(10,24,38,.07), 0 14px 34px rgba(10,24,38,.13);
  --sh-card:0 1px 3px rgba(10,24,38,.06), 0 8px 22px rgba(10,24,38,.09);
  --sh-card-h:0 6px 14px rgba(10,24,38,.10), 0 24px 52px rgba(10,24,38,.17);
  --sh-btn:0 2px 5px rgba(10,24,38,.16), 0 8px 18px rgba(10,24,38,.18);
  --sh-btn-h:0 4px 10px rgba(10,24,38,.20), 0 14px 28px rgba(10,24,38,.24);

  --glow:0 1px 2px rgba(255,255,255,.95),
         0 0 12px rgba(255,255,255,.85),
         0 2px 18px rgba(255,255,255,.7);
}


/* ==========================================================================
   2. BASE + ASTRA NEUTRALISATION
   ========================================================================== */

html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.hga-dsp{
  font-family:'Archivo',system-ui,sans-serif;
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
  color:var(--ink);
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:focus-visible{outline:3px solid var(--clay);outline-offset:3px}

/* Astra's own header/footer must not render alongside Xpro's layouts.
   Belt-and-braces: the builders should also be emptied in the Customizer. */
.ast-main-header-wrap,
.ast-mobile-header-wrap,
.site-footer .ast-footer-copyright,
.ast-footer-overlay{display:none}

/* Astra content padding — every section supplies its own */
.ast-container,
.site-content .ast-container{max-width:100%;padding-left:0;padding-right:0}
.ast-page-builder-template .site-content>.ast-container{max-width:100%}
.entry-content>*{margin-block:0}

/* Elementor container width, matched to the design */
.elementor-section.elementor-section-boxed>.elementor-container,
.e-con{--container-max-width:var(--maxw)}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.hga-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

.hga-section{padding:110px 0}
.hga-paper{background:var(--paper)}
.hga-sand{background:var(--sand)}
.hga-dark{background:var(--deep);color:#fff}
.hga-dark h1,.hga-dark h2,.hga-dark h3,.hga-dark h4{color:#fff}


/* ==========================================================================
   4. TYPOGRAPHY COMPONENTS
   ========================================================================== */

.hga-eyebrow{
  font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay);margin-bottom:20px;display:block;
}
.hga-eyebrow.lt{color:var(--sage)}

.hga-sec-head{max-width:62ch;margin-bottom:64px}
.hga-sec-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);text-transform:uppercase}
.hga-sec-head p{margin-top:22px;font-size:1.08rem;color:rgba(10,24,38,.7)}
.hga-dark .hga-sec-head p{color:rgba(255,255,255,.72)}

.hga-quote{
  border-left:3px solid var(--clay);padding-left:26px;margin:32px 0;
  font-size:1.1rem;font-style:italic;color:var(--ink);
}
.hga-dark .hga-quote{color:#fff}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.hga-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;padding:17px 32px;border:none;cursor:pointer;
  border-radius:var(--r);transition:.22s ease;
  background:var(--clay);color:#fff;box-shadow:var(--sh-btn);
}
.hga-btn:hover{background:var(--clay-lt);transform:translateY(-2px);box-shadow:var(--sh-btn-h);color:#fff}

.hga-btn.ghost{
  background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.hga-btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.hga-btn.dark{background:var(--deep)}
.hga-btn.dark:hover{background:var(--moss)}

.hga-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* text link — trip card "Enquire" */
.hga-lnk{
  font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay);
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;background:none;border:none;padding:0;transition:gap .2s;
}
.hga-lnk:hover{gap:14px;color:var(--clay)}
.hga-lnk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}


/* ==========================================================================
   6. HEADER (Xpro Theme Builder layout)
   Xpro owns the sticky solid state via Advanced -> Header Sticky.
   This block only supplies the fixed transparent overlay before scroll.
   VERIFY the wrapper selector against the live DOM and adjust if needed.
   ========================================================================== */

.xpro-theme-builder-header,
.xpro-header-layout,
[data-xpro-header]{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
  background:linear-gradient(180deg,rgba(10,24,38,.75),transparent);
}

.hga-logo{display:flex;align-items:center;gap:12px;color:#fff}
.hga-logo img{width:auto;flex:none;transition:.3s ease}

.hga-logo-tx{
  font-family:'Archivo';font-weight:800;font-size:16px;
  letter-spacing:-.02em;line-height:1.1;color:#fff;
}
/* Title case on purpose — the artifact has no text-transform here. */
.hga-logo-tx span{
  display:block;font-size:9.5px;letter-spacing:.24em;font-weight:600;
  color:var(--sage);margin-top:3px;text-transform:none;
}

.hga-nav a{
  font-family:'Archivo';font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  position:relative;padding:6px 0;
}
.hga-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--clay);transition:.25s;
}
.hga-nav a:hover,
.hga-nav a.on,
.hga-nav .current-menu-item>a{color:#fff}
.hga-nav a:hover::after,
.hga-nav a.on::after,
.hga-nav .current-menu-item>a::after{width:100%}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.hga-hero{
  position:relative;min-height:82vh;display:flex;align-items:center;
  background:var(--deep);overflow:hidden;
}
.hga-hero.sub{min-height:54vh}

/* Layer 1: the horizontal wash, applied as the container's own overlay
   (Elementor Background Overlay) or here if built as plain markup. */
.hga-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0E2A44,#1B4A72 55%,#2E6FA0)}
.hga-hero-bg img{width:100%;height:100%;object-fit:cover}

.hga-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.9) 40%,
      rgba(255,255,255,0.74) 68%, rgba(255,255,255,0.46) 86%,
      rgba(255,255,255,0.32) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.16) 30%,
      rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.48) 100%);
}

/* Layer 2 for the Elementor build: the container's own overlay handles the
   90deg ramp, this ::after adds the vertical one. */
.hga-hero.hga-hero-el::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    rgba(255,255,255,.44) 0%, rgba(255,255,255,.16) 30%,
    rgba(255,255,255,.18) 70%, rgba(255,255,255,.48) 100%);
}

.hga-hero-in{position:relative;z-index:2;padding:116px 0 84px;color:var(--ink);width:100%}
.hga-hero.sub .hga-hero-in{padding:150px 0 70px}

.hga-hero h1{
  font-size:clamp(3rem,8.5vw,7.2rem);text-transform:uppercase;font-weight:900;
  max-width:16ch;color:var(--ink);text-shadow:var(--glow);
}
.hga-hero h1 em{font-style:normal;color:var(--clay-lt);display:block;text-shadow:var(--glow)}
.hga-hero .hga-eyebrow{color:#006CB4;text-shadow:var(--glow)}
.hga-hero .hga-lede{
  font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:56ch;margin:28px 0 40px;
  color:rgba(10,24,38,.86);text-shadow:var(--glow);
}

.hga-hero .hga-btn{box-shadow:0 3px 8px rgba(10,24,38,.20), 0 12px 30px rgba(10,24,38,.20)}
.hga-hero .hga-btn.ghost{
  background:rgba(255,255,255,.72);backdrop-filter:blur(4px);
  border-color:var(--ink);color:var(--ink);text-shadow:none;
}
.hga-hero .hga-btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.hga-hero-cta{display:flex;flex-wrap:wrap;gap:14px}

.hga-scroll-hint{
  position:absolute;bottom:34px;right:32px;z-index:3;color:rgba(10,24,38,.5);
  font-family:'Archivo';font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;
}
.hga-scroll-hint::after{
  content:'';width:1px;height:52px;
  background:linear-gradient(rgba(10,24,38,.45),transparent);
}


/* ==========================================================================
   8. STATEMENT BLOCK
   ========================================================================== */

.hga-stmt{background:var(--paper);position:relative;overflow:hidden}
.hga-stmt::before{
  content:'';position:absolute;top:-140px;right:-160px;
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,108,180,.09),transparent 68%);
}
.hga-stmt-in{max-width:900px;position:relative}

.hga-stmt-lead{
  font-family:'Archivo';font-weight:700;letter-spacing:-.032em;line-height:1.13;
  font-size:clamp(1.75rem,4.1vw,3.15rem);color:var(--ink);
}
.hga-stmt-rule{width:74px;height:4px;background:var(--clay);margin:42px 0 38px;border-radius:2px}

.hga-stmt-cols{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:44px;row-gap:38px;align-items:start;
}
.hga-stmt-cols>.hga-stmt-close,
.hga-stmt-cols>.hga-stmt-logo{align-self:center}
.hga-stmt-cols p{font-size:1.09rem;color:rgba(10,24,38,.72);line-height:1.72}

.hga-stmt-sig{
  font-family:'Archivo';font-weight:700;font-size:1.22rem;color:var(--clay);
  margin:0 0 26px;letter-spacing:-.01em;
}
.hga-stmt-logo{display:block;margin:0 auto;width:min(215px,74%);height:auto}
.hga-stmt-logo,.hga-brandmark{filter:drop-shadow(0 6px 16px rgba(10,24,38,.16))}
.hga-brandmark{max-width:300px;width:100%;height:auto;margin-bottom:34px}


/* ==========================================================================
   9. SPLIT SECTIONS
   ========================================================================== */

.hga-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.hga-split h2{font-size:clamp(2rem,4vw,3.1rem);text-transform:uppercase;margin-bottom:24px}
.hga-split p{color:rgba(10,24,38,.72);margin-bottom:18px}
.hga-dark .hga-split p{color:rgba(255,255,255,.72)}

.hga-split-img{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,var(--moss),var(--sage));box-shadow:var(--sh-img);
}
.hga-split-img img{width:100%;height:100%;object-fit:cover}
/* Home "Who we are" — 4/3, and it keeps that ratio at every width. */
.hga-split-img.wide{aspect-ratio:4/3}


/* ==========================================================================
   10. TRIP CARDS
   ========================================================================== */

.hga-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.hga-filters button{
  font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 24px;
  border:1.5px solid var(--line-d);background:transparent;color:var(--ink);
  cursor:pointer;border-radius:var(--r);transition:.2s;
  box-shadow:0 1px 2px rgba(10,24,38,.05), 0 4px 12px rgba(10,24,38,.06);
}
.hga-filters button:hover{border-color:var(--ink)}
.hga-filters button.on{
  background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:var(--sh-btn);
}

.hga-trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px}

.hga-card{
  background:#fff;border:1px solid var(--line-d);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-card);transition:transform .3s ease, box-shadow .3s ease;
}
.hga-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(10,24,38,.14)}
.hga-card.hide{display:none}

.hga-card-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,var(--moss),var(--sage));
}
.hga-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hga-card:hover .hga-card-img img{transform:scale(1.06)}

.hga-tag{
  position:absolute;top:16px;left:16px;background:rgba(10,24,38,.85);color:#fff;
  font-family:'Archivo';font-weight:700;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:7px 13px;border-radius:2px;backdrop-filter:blur(6px);
}

.hga-card-b{padding:30px 28px 28px;display:flex;flex-direction:column;flex:1}
.hga-card-b h3{font-size:1.42rem;text-transform:uppercase;margin-bottom:12px}
.hga-card-b>p{font-size:.94rem;color:rgba(10,24,38,.68);flex:1}

.hga-stats{
  display:flex;gap:22px;margin:22px 0;padding:18px 0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.hga-stats div{flex:1}
.hga-stats b{display:block;font-family:'Archivo';font-weight:800;font-size:1.05rem}
.hga-stats span{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(10,24,38,.5);font-family:'Archivo';font-weight:600;
}

.hga-card-f{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hga-price{font-family:'Archivo';font-weight:800;font-size:1.15rem}
.hga-price span{
  display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(10,24,38,.5);font-weight:600;
}


/* ==========================================================================
   11. HAIRLINE-GUTTER GRIDS — steps and benefits
   The 2px gap is the divider; tiles match their section background.
   ========================================================================== */

.hga-grid-hairline{display:grid;gap:2px;background:var(--line-d)}
.hga-dark .hga-grid-hairline{background:var(--line)}

.hga-steps{grid-template-columns:repeat(4,1fr)}
.hga-step{background:var(--sand);padding:40px 30px}
.hga-step b{font-family:'Archivo';font-weight:900;font-size:.85rem;letter-spacing:.2em;color:var(--clay)}
.hga-step h3{font-size:1.2rem;text-transform:uppercase;margin:16px 0 12px}
.hga-step p{font-size:.93rem;color:rgba(10,24,38,.68)}

.hga-ben{grid-template-columns:repeat(3,1fr)}
.hga-ben-i{background:var(--paper);padding:46px 38px}
.hga-dark .hga-ben-i{background:var(--deep)}
.hga-ben-n{
  font-family:'Archivo';font-weight:900;font-size:2.6rem;
  color:var(--sand);letter-spacing:-.05em;line-height:1;
}
.hga-dark .hga-ben-n{color:var(--moss)}
.hga-ben-i h3{font-size:1.35rem;margin:18px 0 14px;text-transform:uppercase;letter-spacing:-.02em}
.hga-ben-i p{font-size:.97rem;color:rgba(10,24,38,.68)}
.hga-dark .hga-ben-i p{color:rgba(255,255,255,.66)}


/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.hga-tst{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hga-tst-i{
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:38px 32px;border-radius:var(--r);
}
.hga-stars{color:var(--clay-lt);letter-spacing:3px;margin-bottom:20px;font-size:.9rem}
.hga-tst-i p{font-size:1rem;color:rgba(255,255,255,.86);margin-bottom:26px}

.hga-who{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.hga-av{
  width:42px;height:42px;border-radius:50%;background:var(--moss);
  display:grid;place-items:center;font-family:'Archivo';font-weight:800;
  font-size:14px;color:var(--sage);flex:none;
}
.hga-who b{display:block;font-family:'Archivo';font-weight:700;font-size:.95rem;color:#fff}
.hga-who span{font-size:.82rem;color:rgba(255,255,255,.55)}


/* ==========================================================================
   13. FAMILY GRID
   ========================================================================== */

.hga-fam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:start}
.hga-fam{margin:0}
.hga-fam-img{
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--deep);border:1px solid rgba(10,24,38,.10);box-shadow:var(--sh-img);
}
.hga-fam-img img{width:100%;height:100%;object-fit:cover}

/* The grandfather's painting is artwork, not a photo — framed, not cropped. */
.hga-fam.art .hga-fam-img{background:#F2EEE6;padding:16px;border:1px solid rgba(10,24,38,.14)}
.hga-fam.art .hga-fam-img img{object-fit:contain;box-shadow:0 6px 22px rgba(10,24,38,.18)}

.hga-fam figcaption{padding-top:20px}
.hga-fam figcaption b{
  display:block;font-family:'Archivo';font-weight:800;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px;
}
.hga-fam figcaption span{display:block;font-size:.95rem;color:rgba(10,24,38,.66);line-height:1.6}


/* ==========================================================================
   14. FAQ — Elementor free Accordion
   ========================================================================== */

.hga-faq{max-width:900px}
.hga-faq .elementor-accordion-item{border:none;border-bottom:1px solid var(--line-d)}
.hga-faq .elementor-tab-title{
  padding:28px 50px 28px 0;background:none;
  font-family:'Archivo';font-weight:700;font-size:1.12rem;
  letter-spacing:-.01em;color:var(--ink);
}
.hga-faq .elementor-tab-title a{color:var(--ink)}
.hga-faq .elementor-accordion-icon{
  color:var(--clay);font-size:1.7rem;font-weight:400;
  transition:transform .25s;float:right;
}
.hga-faq .elementor-active .elementor-accordion-icon{transform:rotate(45deg)}
.hga-faq .elementor-tab-content{
  border:none;padding:0 60px 30px 0;
  color:rgba(10,24,38,.7);font-size:1rem;
}


/* ==========================================================================
   15. CONTACT BLOCK (top section of the Xpro footer layout)
   ========================================================================== */

.hga-contact{background:var(--deep);color:#fff;padding:110px 0}
.hga-c-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:76px}

.hga-c-info h2{font-size:clamp(2rem,4.2vw,3.2rem);text-transform:uppercase;margin-bottom:22px;color:#fff}
.hga-c-info>p{color:rgba(255,255,255,.72);margin-bottom:40px;max-width:44ch}

.hga-c-row{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.hga-c-ic{
  width:38px;height:38px;flex:none;border:1px solid var(--line);
  border-radius:50%;display:grid;place-items:center;
}
.hga-c-ic svg{width:16px;height:16px;stroke:var(--clay-lt);fill:none;stroke-width:2}
.hga-c-row b{
  display:block;font-family:'Archivo';font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:4px;
}
.hga-c-row a,.hga-c-row span{color:#fff;font-size:1rem}
.hga-c-row a:hover{color:var(--clay-lt)}

.hga-socials{display:flex;gap:12px;margin-top:32px}
.hga-socials a{
  width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:.22s;
}
.hga-socials a:hover{background:var(--clay);border-color:var(--clay)}
.hga-socials svg{width:17px;height:17px;fill:#fff}

/* WPForms shell */
.hga-form,
.hga-contact .wpforms-container{
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  padding:44px;border-radius:var(--r);
}
.hga-contact .wpforms-field{padding:0;margin-bottom:22px}
.hga-contact .wpforms-field-label{
  font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sage);margin-bottom:9px;
}
.hga-contact .wpforms-field-sublabel,
.hga-contact .wpforms-required-label{display:none}
.hga-contact input[type=text],
.hga-contact input[type=email],
.hga-contact input[type=tel],
.hga-contact select,
.hga-contact textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:15px 17px;color:#fff;font-family:'Inter';font-size:.98rem;
  border-radius:var(--r);transition:.2s;box-shadow:none;
}
.hga-contact input::placeholder,
.hga-contact textarea::placeholder{color:rgba(255,255,255,.4)}
.hga-contact input:focus,
.hga-contact select:focus,
.hga-contact textarea:focus{
  outline:none;border-color:var(--clay);background:rgba(255,255,255,.1);
}
.hga-contact textarea{resize:vertical;min-height:130px}
.hga-contact select option{background:var(--deep)}

.hga-contact .wpforms-submit{
  width:100%;justify-content:center;display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;padding:17px 32px;border:none;cursor:pointer;
  border-radius:var(--r);background:var(--clay);color:#fff;
  box-shadow:var(--sh-btn);transition:.22s ease;
}
.hga-contact .wpforms-submit:hover{background:var(--clay-lt);transform:translateY(-2px)}

.hga-f-note,
.hga-contact .wpforms-field-description{
  font-size:.83rem;color:rgba(255,255,255,.45);margin-top:16px;
}
.hga-contact .wpforms-confirmation-container-full{
  background:rgba(0,108,180,.18);border:1px solid var(--clay);
  padding:16px 20px;border-radius:var(--r);margin-bottom:24px;
  font-size:.95rem;color:#fff;
}


/* ==========================================================================
   16. FOOTER (Xpro footer layout, lower section)
   ========================================================================== */

.hga-footer{background:var(--ink);color:rgba(255,255,255,.6);padding:70px 0 34px;font-size:.92rem}
.hga-f-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px;
  padding-bottom:48px;border-bottom:1px solid var(--line);
}
.hga-footer h4{
  font-family:'Archivo';font-weight:700;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin-bottom:22px;
}
.hga-footer ul{list-style:none;margin:0;padding:0}
.hga-footer li{margin-bottom:12px}
.hga-footer a:hover{color:var(--clay-lt)}
.hga-f-about{max-width:38ch;margin-top:20px;line-height:1.7}
.hga-f-bot{
  padding-top:28px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:.85rem;
}


/* ==========================================================================
   17. REVEAL ON SCROLL
   Used for chrome built outside Elementor (header, contact, trip cards).
   Elementor's own entrance animations cover the page bodies.
   ========================================================================== */

.hga-rv{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.hga-rv.in{
  opacity:1;transform:none;
  transition:opacity .78s cubic-bezier(.22,.61,.36,1),
             transform .78s cubic-bezier(.22,.61,.36,1);
}
.hga-hero .hga-rv{transform:translateY(30px)}


/* ==========================================================================
   18. BREAKPOINTS — 980 / 860 / 760
   Free Elementor cannot express these, so they live here. Do not also set
   Elementor's responsive layout controls; pick one owner.
   ========================================================================== */

@media(max-width:980px){
  .hga-section,.hga-contact{padding:80px 0}
  .hga-split,.hga-c-grid{grid-template-columns:1fr;gap:44px}
  .hga-ben,.hga-steps,.hga-tst{grid-template-columns:1fr}
  .hga-f-grid{grid-template-columns:1fr;gap:38px}
  /* About splits relax; the Home ".wide" split keeps 4/3 (see .wide below) */
  .hga-split-img{aspect-ratio:16/10}
  .hga-split-img.wide{aspect-ratio:4/3}
}

@media(max-width:860px){
  .hga-stmt-cols{grid-template-columns:1fr;row-gap:26px}
  .hga-stmt-rule{margin:32px 0 28px}
  .hga-stmt-logo{order:1}
  .hga-stmt-close{order:2}
  .hga-fam-grid{grid-template-columns:1fr;gap:30px}
}

@media(max-width:760px){
  body{font-size:16px}
  .hga-wrap{padding:0 22px}

  .hga-hero-in{padding:106px 0 74px}
  .hga-hero.sub .hga-hero-in{padding:120px 0 60px}
  .hga-scroll-hint{display:none}
  .hga-hero-cta .hga-btn{width:100%;justify-content:center}

  .hga-hero-bg::after{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.90) 0%, rgba(255,255,255,.80) 62%,
        rgba(255,255,255,.74) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.46) 0%, rgba(255,255,255,.30) 30%,
        rgba(255,255,255,.32) 70%, rgba(255,255,255,.52) 100%);
  }
  .hga-hero.hga-hero-el::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.46) 0%, rgba(255,255,255,.30) 30%,
      rgba(255,255,255,.32) 70%, rgba(255,255,255,.52) 100%);
  }

  .hga-stmt-logo{width:min(170px,58%)}
  .hga-trips{grid-template-columns:1fr}

  .hga-form,
  .hga-contact .wpforms-container{padding:30px 24px}

  /* Xpro mobile menu panel — match the artifact */
  .hga-nav.open,
  .xpro-menu-offcanvas{
    width:min(320px,84vw);background:var(--deep);
    border-left:1px solid var(--line);padding:40px;
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  .hga-nav a{font-size:1.05rem}
}


/* ==========================================================================
   19. ACCESSIBILITY
   ========================================================================== */

@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;
  }
  .hga-rv,.hga-rv.in{opacity:1!important;transform:none!important}
}

.hga-skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:2000;
  background:#fff;color:var(--ink);padding:12px 18px;border-radius:var(--r);
}

/* Own this rather than inheriting it from Astra. The trip cards put each
   trip's name inside a .screen-reader-text span so the six "Enquire" links
   are distinguishable; if the class is ever undefined, those names render
   visibly and wrap the card footer to two lines, which breaks the stats
   strip alignment across a row. Standard WordPress implementation. */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;padding:0;overflow:hidden;position:absolute!important;
  white-space:nowrap;word-wrap:normal;
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;
  display:block;top:5px;left:5px;z-index:100000;
  background:#fff;color:var(--ink);padding:15px 23px 14px;
  font-size:.875rem;line-height:normal;text-decoration:none;
}