/* ==========================================================================
   Wild Out Pro Guide Service
   Custom build. Cream + charcoal per the client's stated direction, with the
   vermilion from their own alternate logo file as the single accent.
   Display: Outfit (geometric, uppercase, tracked)  ·  Body: Karla
   ========================================================================== */

:root{
  /* --- surface & ink, sampled from their own logo files ------------------- */
  --surface:      #FDF8EA;   /* the cream in the logo                        */
  --surface-2:    #F5EEDC;   /* tinted band                                  */
  --ink:          #262829;   /* the charcoal in the logo, 14.0:1 on cream    */
  --ink-soft:     #4A4C4D;   /* 8.1:1                                        */
  --ink-mute:     #6E7071;
  --dark:         #262829;
  --dark-2:       #1C1E1F;

  /* --- accent: their brand vermilion ------------------------------------- */
  --accent:       #FF552E;   /* fill and hairlines only, never text on cream */
  --accent-text:  #B33113;   /* 5.9:1 on cream — links, eyebrows             */
  --accent-deep:  #8F2A11;
  --on-accent:    #262829;   /* 4.65:1 on the vermilion                      */

  --line:         rgba(255,85,46,.30);
  --line-strong:  rgba(255,85,46,.60);
  --line-ink:     rgba(38,40,41,.16);
  --line-dark:    rgba(253,248,234,.18);

  /* --- type -------------------------------------------------------------- */
  --display: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- motion ------------------------------------------------------------ */
  --t: 260ms cubic-bezier(.2,.7,.2,1);
  --s-card:  0 14px 40px -18px rgba(38,40,41,.24), 0 2px 6px rgba(38,40,41,.06);
  --s-hover: 0 26px 56px -18px rgba(38,40,41,.34), 0 3px 10px rgba(38,40,41,.10);

  --wrap: 1220px;
  --hero-pos: center;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body) !important;
  color:var(--ink) !important;
  background:var(--surface) !important;
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* display type: geometric, uppercase, tracked — matched to the logo wordmark */
h1,h2,h3{ font-family:var(--display); font-weight:800; text-transform:uppercase;
          letter-spacing:.005em; line-height:1.02; margin:0 0 .5em; }
h1{ font-size:clamp(2.15rem,5.1vw,4rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.05rem,1.6vw,1.28rem); font-weight:700; letter-spacing:.03em; }
h4{ font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase;
    letter-spacing:.06em; margin:0 0 .5em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 26px; }
.wrap--narrow{ max-width:830px; }
.wrap--wide{ max-width:1440px; }

.eyebrow{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 1rem; display:block;
}
.eyebrow--light{ color:var(--accent); }
.eyebrow--rule{ display:flex; align-items:center; gap:14px; }
.eyebrow--rule::before{ content:""; width:26px; height:2px; background:var(--accent); flex:0 0 auto; }

.lede{ font-size:clamp(1.05rem,1.32vw,1.2rem); color:var(--ink-soft); }
.accent{ color:var(--accent-text); }
.section--dark .accent{ color:var(--accent); }

/* ============================ buttons ==================================== */
/* square and constructed, with a vermilion bar that grows under it on hover  */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--display); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:17px 28px; border:0; cursor:pointer; background:none;
  text-decoration:none !important;
  transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn svg{ width:15px; height:15px; flex:0 0 auto; transition:transform var(--t); }
.btn:hover svg{ transform:translateX(4px); }
.btn::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
             background:var(--accent); transform:scaleY(1); transform-origin:bottom;
             transition:height var(--t); }
.btn:hover::after{ height:8px; }

.btn.btn--primary{ background:var(--ink); color:var(--surface); }
.btn.btn--primary:hover{ transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(255,85,46,.60); background:#171919; }

.btn.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn.btn--accent::after{ background:var(--ink); }
.btn.btn--accent:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(38,40,41,.5); }

.btn.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn.btn--ghost::after{ display:none; }
.btn.btn--ghost:hover{ background:var(--ink); color:var(--surface); transform:translateY(-2px); }

.btn.btn--onlight-dark{ background:var(--surface); color:var(--ink); }
.btn.btn--onlight-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(255,85,46,.55); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.tlink{ font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.16em;
        text-transform:uppercase; color:var(--accent-text); display:inline-flex; gap:9px; align-items:center; }
.tlink svg{ width:14px; height:14px; transition:transform var(--t); }
.tlink:hover{ text-decoration:none; }
.tlink:hover svg{ transform:translateX(4px); }

/* ============================ header ===================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80; background:transparent; padding:13px 0;
  transition:background var(--t), box-shadow var(--t), backdrop-filter var(--t), padding var(--t);
}
.site-header::before{
  content:""; position:absolute; inset:-10px 0 auto 0; height:200%; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,19,20,.66) 0%, rgba(18,19,20,.34) 48%, rgba(18,19,20,0) 100%);
  transition:opacity var(--t);
}
.site-header.is-scrolled::before{ opacity:0; }
.site-header.is-scrolled{
  background:rgba(253,248,234,.95); backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 2px 0 var(--accent); padding:7px 0;
}
.header-inner{ position:relative; z-index:1; display:flex; align-items:center;
               justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand__logo{ height:52px; width:auto; transition:height var(--t); }
.site-header.is-scrolled .brand__logo{ height:40px; }
.site-header:not(.is-scrolled){ color:#FDF8EA; }
.site-header.is-scrolled{ color:var(--ink); }
/* the charcoal plaque disappears on a dark hero, so swap to the cream mark */
.brand__logo--dark{ display:none; }
.site-header:not(.is-scrolled) .brand__logo--dark{ display:block; }
.site-header:not(.is-scrolled) .brand__logo--light{ display:none; }

.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:inherit; }
.nav-toggle svg{ width:26px; height:26px; }

.nav-main{ display:flex; align-items:center; gap:20px; list-style:none; margin:0; padding:0; }
.nav-main > li{ position:relative; }
.nav-main a, .nav-main .nav-trigger{
  position:relative; font-family:var(--display); font-size:.70rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:inherit; text-decoration:none;
  background:none; border:0; padding:8px 0; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-main a::after, .nav-main .nav-trigger::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.nav-main a:hover::after, .nav-main li:hover > .nav-trigger::after,
.nav-main a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-main a:hover{ text-decoration:none; }
.nav-caret{ width:9px; height:9px; opacity:.75; }
.site-header:not(.is-scrolled) .nav-main a,
.site-header:not(.is-scrolled) .nav-main .nav-trigger,
.site-header:not(.is-scrolled) .header-phone{ text-shadow:0 1px 10px rgba(0,0,0,.55); }

/* multi-column dropdown — 11 offerings need grouping, not a 11-item list */
.nav-dropdown{
  position:absolute; top:100%; left:-20px; padding:22px 26px 24px;
  background:var(--surface); color:var(--ink);
  box-shadow:var(--s-hover); border-top:3px solid var(--accent);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
  list-style:none; margin:0; z-index:5;
  display:grid; grid-template-columns:repeat(3,minmax(158px,1fr)); gap:4px 30px;
}
.nav-dropdown--single{ grid-template-columns:minmax(200px,1fr); }
.nav-main li:hover > .nav-dropdown, .nav-main li:focus-within > .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-main > li.has-dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; }
.nav-dropdown a{
  display:block; padding:7px 0; font-family:var(--body); font-size:.9rem; letter-spacing:0;
  text-transform:none; font-weight:500; color:var(--ink) !important;
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover{ color:var(--accent-text) !important; }
.nav-dropdown__head{
  grid-column:auto; font-family:var(--display); font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-text); font-weight:700;
  padding:0 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
.nav-dropdown__col{ display:flex; flex-direction:column; }

.header-cta{ display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.header-phone{ font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.08em;
               color:inherit; white-space:nowrap; text-decoration:none; }
.header-phone:hover{ text-decoration:none; }
.header-cta .btn{ padding:13px 20px; font-size:.7rem; }

/* ============================ hero ======================================= */
.hero{ position:relative; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero__inner{ position:relative; z-index:3; width:100%; padding:0 0 clamp(54px,7vh,100px); }
.hero h1{ color:#FDF8EA !important; text-shadow:0 2px 26px rgba(0,0,0,.45); max-width:19ch; }
.hero .eyebrow{ color:var(--accent); text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero p{ color:rgba(253,248,234,.94); max-width:54ch;
         font-size:clamp(1.02rem,1.3vw,1.16rem); text-shadow:0 1px 16px rgba(0,0,0,.45); }
.hero .btn-row{ margin-top:30px; }

.hero--photo{ min-height:clamp(560px,84vh,860px); padding-top:130px; }
.hero--photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:var(--hero-img); background-size:cover;
  background-position:var(--hero-pos,center); background-repeat:no-repeat;
  animation:none !important; transform:none !important;
}
.hero--photo::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(ellipse 88% 96% at 18% 74%, rgba(14,15,16,.74) 0%, rgba(14,15,16,.30) 62%, rgba(14,15,16,0) 100%),
    linear-gradient(180deg, rgba(14,15,16,.50) 0%, rgba(14,15,16,.14) 36%, rgba(14,15,16,.82) 100%);
}

/* short colour hero — every interior page. Nothing in this photo set clears
   the 0.70 crop bar at 21:9, so a photo banner would cut heads off. */
.hero--block{
  min-height:clamp(268px,33vh,342px); padding-top:112px; align-items:center;
  background:linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 70%, #131415 100%);
}
.hero--block::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-color:#FDF8EA;
  -webkit-mask-image:url("/images/overlays/terrain-open.svg"); mask-image:url("/images/overlays/terrain-open.svg");
  -webkit-mask-size:520px auto; mask-size:520px auto;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
  opacity:.07;
}
.hero--block::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3;
                     background:var(--accent); }
.hero--block .hero__inner{ padding:0; }
.hero--block h1{ font-size:clamp(1.95rem,3.9vw,2.95rem); text-shadow:none; max-width:24ch; }
.hero--block .eyebrow{ text-shadow:none; }
.hero--block p{ text-shadow:none; margin-top:.5em; }

.hero--home-sub{ display:flex; gap:32px; flex-wrap:wrap; margin-top:34px;
  padding-top:22px; border-top:2px solid var(--accent); }
.hero--home-sub strong{ display:block; font-family:var(--display); font-weight:800; font-size:1.6rem;
  color:#FDF8EA; line-height:1; margin-bottom:6px; }
.hero--home-sub span{ font-family:var(--display); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); }

/* ============================ sections =================================== */
.section{ position:relative; padding:clamp(62px,7.6vw,108px) 0; }
.section--tight{ padding:clamp(42px,5vw,66px) 0; }
.section--loose{ padding:clamp(86px,10vw,150px) 0; }
.section--alt{ background:var(--surface-2) !important; }
.section--dark{ background:var(--dark) !important; color:#FDF8EA; }
.section--dark h2,.section--dark h3,.section--dark h4{ color:#FDF8EA; }
.section--dark p{ color:rgba(253,248,234,.88); }
.section--dark .lede{ color:rgba(253,248,234,.9); }

.section--alt::before, .section--dark::before, .cta-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  -webkit-mask-image:url("/images/overlays/terrain-open.svg"); mask-image:url("/images/overlays/terrain-open.svg");
  -webkit-mask-size:560px auto; mask-size:560px auto;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
}
.section--alt::before{ background-color:var(--ink); opacity:.10; }
.section--dark::before{ background-color:#FDF8EA; opacity:.06; }
.section > .wrap{ position:relative; z-index:1; }

.section__head{ max-width:780px; margin-bottom:clamp(32px,4vw,52px); }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__head p{ color:var(--ink-soft); }
.section--dark .section__head p{ color:rgba(253,248,234,.85); }
.section--alt .hunt-card h3, .section--dark .hunt-card h3{ color:var(--ink); }
.section--alt .hunt-card p,  .section--dark .hunt-card p { color:var(--ink-soft); }

/* ============================ split rows ================================= */
.split{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,4.6vw,70px); align-items:center; }
.split--flip .split__media{ order:2; }
.split--wide-media{ grid-template-columns:.88fr 1.12fr; }
.split__media{ position:relative; }
.split__media img{ width:100%; height:auto; }
.split__media--framed img{ box-shadow:var(--s-card); }
.split__media--framed::before{
  content:""; position:absolute; left:-14px; top:-14px; width:46%; height:44%;
  border-top:3px solid var(--accent); border-left:3px solid var(--accent); z-index:2;
}
.caption{ font-family:var(--display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
          color:var(--ink-mute); margin-top:13px; }
.section--dark .caption{ color:rgba(253,248,234,.6); }

/* ============================ hunt cards ================================= */
.card-grid{ display:grid; gap:clamp(18px,2.2vw,26px); align-items:start;
            grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.card-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); }
.card-grid--3{ grid-template-columns:repeat(3,1fr); }
.card-grid--4{ grid-template-columns:repeat(4,1fr); }

.hunt-card{
  position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  text-decoration:none !important; color:var(--ink);
}
.hunt-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:0;
                   background:var(--accent); transition:height var(--t); z-index:3; }
.hunt-card:hover{ transform:translateY(-4px); box-shadow:var(--s-hover); border-color:var(--line-strong); }
.hunt-card:hover::after{ height:4px; }
.hunt-card__media{ position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--surface-2); }
.hunt-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms ease; }
.hunt-card:hover .hunt-card__media img{ transform:scale(1.04); }
.hunt-card__media::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity var(--t);
  background:linear-gradient(180deg,rgba(38,40,41,0) 55%,rgba(38,40,41,.55) 100%); }
.hunt-card:hover .hunt-card__media::after{ opacity:1; }
.hunt-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.hunt-card__meta{ font-family:var(--display); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:10px; font-weight:700; }
.hunt-card h3{ margin-bottom:.5em; }
.hunt-card p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:16px; }
.hunt-card__foot{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding-top:15px; border-top:1px solid var(--line); }
.hunt-card__price{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--ink); }
.hunt-card__price sup{ font-size:.58em; margin-right:2px; position:relative; top:-.55em; }
.hunt-card__price small{ display:block; font-family:var(--display); font-weight:600; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px; }
.hunt-card__incl{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.hunt-card__incl li{ font-family:var(--display); font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); padding:4px 8px; }

/* ============================ SIGNATURE: species index =================== */
/* One bold gesture per site. Here it is the whole roster set as a type-only
   ledger, numbered, with price and season on every line.                    */
.species-index{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.species-index li{ border-bottom:1px solid var(--line-ink); }
.species-index a{
  display:grid; grid-template-columns:64px minmax(0,1.5fr) minmax(0,1.4fr) auto;
  gap:20px; align-items:baseline; padding:22px 4px; color:var(--ink); text-decoration:none !important;
  transition:background var(--t), padding-left var(--t);
}
.species-index a:hover{ background:rgba(255,85,46,.07); padding-left:16px; }
.species-index .si-num{ font-family:var(--display); font-weight:800; font-size:.86rem;
  letter-spacing:.08em; color:var(--accent); }
.species-index .si-name{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.72rem); line-height:1.05; letter-spacing:.01em; }
.species-index .si-meta{ font-size:.9rem; color:var(--ink-mute); }
.species-index .si-price{ font-family:var(--display); font-weight:800; font-size:1.12rem;
  white-space:nowrap; text-align:right; }
.species-index .si-price sup{ font-size:.58em; position:relative; top:-.5em; margin-right:1px; }
.species-index .si-price small{ display:block; font-family:var(--display); font-weight:600;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px; }
.section--dark .species-index{ border-top-color:var(--accent); }
.section--dark .species-index li{ border-bottom-color:var(--line-dark); }
.section--dark .species-index a{ color:#FDF8EA; }
.section--dark .species-index a:hover{ background:rgba(255,85,46,.12); }
.section--dark .species-index .si-meta,
.section--dark .species-index .si-price small{ color:rgba(253,248,234,.62); }
@media (max-width:820px){
  .species-index a{ grid-template-columns:44px 1fr auto; gap:12px; padding:18px 2px; }
  .species-index .si-meta{ grid-column:2 / -1; }
}

/* ============================ pricing rows =============================== */
.pricing-rows{ list-style:none; margin:0; padding:0; }
.pricing-rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line-ink); }
.pricing-rows li:first-child{ border-top:1px solid var(--line-ink); }
.pricing-rows .pr-name{ font-family:var(--display); font-weight:700; font-size:1rem;
  text-transform:uppercase; letter-spacing:.03em; }
.pricing-rows .pr-name small{ display:block; font-family:var(--body); font-weight:400; font-size:.86rem;
  color:var(--ink-mute); letter-spacing:0; text-transform:none; margin-top:4px; }
.pricing-rows .pr-price{ font-family:var(--display); font-weight:800; font-size:1.14rem; white-space:nowrap; }
.pricing-rows .pr-price sup{ font-size:.58em; position:relative; top:-.55em; margin-right:1px; }
.section--dark .pricing-rows li{ border-color:var(--line-dark); }
.section--dark .pricing-rows li:first-child{ border-top-color:var(--line-dark); }

/* ============================ triads / steps ============================= */
.triad{ display:grid; gap:clamp(22px,2.8vw,40px); grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); }
.triad__item{ padding-top:18px; border-top:3px solid var(--accent); }
.triad__item h3{ margin-bottom:.55em; }
.triad__item p{ color:var(--ink-soft); font-size:.94rem; }
.section--dark .triad__item p{ color:rgba(253,248,234,.85); }
.triad__num{ font-family:var(--display); font-weight:800; font-size:.78rem; letter-spacing:.14em;
  color:var(--accent-text); display:block; margin-bottom:9px; }
.section--dark .triad__num{ color:var(--accent); }

/* numbered process steps — the draw walkthrough */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; }
.steps li{ counter-increment:s; position:relative; padding:0 0 30px 74px; }
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-2px;
  font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--accent);
  width:52px; text-align:left;
}
.steps li::after{ content:""; position:absolute; left:19px; top:26px; bottom:6px; width:1px;
                  background:var(--line-ink); }
.steps li:last-child{ padding-bottom:0; }
.steps li:last-child::after{ display:none; }
.steps h3{ margin-bottom:.4em; }
.steps p{ color:var(--ink-soft); font-size:.96rem; }
.section--dark .steps li::after{ background:var(--line-dark); }
.section--dark .steps p{ color:rgba(253,248,234,.85); }

/* ============================ stats ====================================== */
.stats-band{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.stats-band div{ border-left:3px solid var(--accent); padding-left:18px; }
.stats-band strong{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,3.2vw,2.9rem); line-height:1; }
.stats-band span{ font-family:var(--display); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute); }
.section--dark .stats-band span{ color:var(--accent); }

/* ============================ full-bleed photo =========================== */
.photo-bleed{ position:relative; min-height:clamp(320px,46vh,500px); display:flex; align-items:flex-end;
              overflow:hidden; }
.photo-bleed__img{ position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; }
.photo-bleed::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 74% at 16% 88%, rgba(14,15,16,.74) 0%, rgba(14,15,16,.22) 66%, rgba(14,15,16,0) 100%),
    linear-gradient(180deg, rgba(14,15,16,.26) 0%, rgba(14,15,16,.04) 36%, rgba(14,15,16,.74) 100%); }
.photo-bleed .wrap{ position:relative; z-index:2; padding-bottom:clamp(32px,5vh,58px); }
.photo-bleed h2{ color:#FDF8EA; max-width:22ch; text-shadow:0 2px 22px rgba(0,0,0,.5); }
.photo-bleed p{ color:rgba(253,248,234,.94); max-width:52ch; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.photo-bleed .eyebrow{ color:var(--accent); }

/* ============================ brands band ================================ */
.brands{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
         gap:clamp(14px,2.2vw,26px); }
.brands__card{
  background:#fff; border-radius:12px; padding:16px 22px;
  height:clamp(78px,7vw,96px); min-width:clamp(132px,12vw,168px);
  display:grid; place-items:center; transition:transform var(--t), box-shadow var(--t);
}
.brands__card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(0,0,0,.55); }
.brands__card img{ max-height:clamp(38px,4vw,52px); max-width:100%; width:auto; height:auto; }

/* ============================ gallery ==================================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(22px,3vw,36px); }
.gallery-filters button{
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:11px 17px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.gallery-filters button:hover{ border-color:var(--accent); }
.gallery-filters button[aria-pressed="true"]{ background:var(--ink); color:var(--surface); border-color:var(--ink); }

.gallery-grid{ columns:4; column-gap:14px; }
.gallery-grid figure{ margin:0 0 14px; break-inside:avoid; position:relative; cursor:zoom-in; }
.gallery-grid img{ width:100%; height:auto; transition:transform 700ms ease; }
.gallery-grid figure::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--accent); opacity:0; transition:opacity var(--t); }
.gallery-grid figure:hover img{ transform:scale(1.02); }
.gallery-grid figure:hover::after{ opacity:1; }
.gallery-grid figure.is-hidden{ display:none; }

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(20,21,22,.95);
  display:none; align-items:center; justify-content:center; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:94vw; max-height:88vh; width:auto; height:auto; }
.lightbox__btn{ position:absolute; background:none; border:0; color:#FDF8EA; cursor:pointer;
  padding:14px; line-height:0; opacity:.82; transition:opacity var(--t), transform var(--t); }
.lightbox__btn:hover{ opacity:1; }
.lightbox__btn svg{ width:30px; height:30px; }
.lightbox__close{ top:14px; right:16px; }
.lightbox__prev{ left:8px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:8px; top:50%; transform:translateY(-50%); }
.lightbox__prev:hover{ transform:translateY(-50%) translateX(-3px); }
.lightbox__next:hover{ transform:translateY(-50%) translateX(3px); }
.lightbox__count{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:rgba(253,248,234,.72); font-family:var(--display); font-size:.7rem; letter-spacing:.2em; }

/* ============================ accordion / info =========================== */
.faq{ border-top:1px solid var(--line-ink); }
.faq details{ border-bottom:1px solid var(--line-ink); }
.faq summary{ cursor:pointer; list-style:none; padding:21px 44px 21px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.35;
  text-transform:uppercase; letter-spacing:.03em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:12px; height:2px;
  background:var(--accent); margin-top:-1px; }
.faq summary::before{ content:""; position:absolute; right:13px; top:50%; width:2px; height:12px;
  background:var(--accent); margin-top:-6px; transition:transform var(--t); }
.faq details[open] summary::before{ transform:scaleY(0); }
.faq .faq__body{ padding:0 0 24px; color:var(--ink-soft); max-width:74ch; }
.faq .faq__body ul{ padding-left:20px; }
.section--dark .faq{ border-top-color:var(--line-dark); }
.section--dark .faq details{ border-bottom-color:var(--line-dark); }
.section--dark .faq .faq__body{ color:rgba(253,248,234,.85); }

.info-grid{ display:grid; gap:clamp(20px,2.4vw,32px); grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.info-card{ background:var(--surface); border:1px solid var(--line); padding:26px 24px; }
.info-card ul{ list-style:none; margin:0; padding:0; }
.info-card li{ padding:8px 0 8px 18px; position:relative; font-size:.93rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line-ink); }
.info-card li:last-child{ border-bottom:0; }
.info-card li::before{ content:""; position:absolute; left:0; top:17px; width:7px; height:2px;
  background:var(--accent); }

/* ============================ crew / testimonials ======================== */
.crew-card{ border:1px solid var(--line); background:var(--surface); position:relative; }
.crew-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.crew-card__body{ padding:20px 20px 22px; }
.crew-card h3{ margin-bottom:.3em; }
.crew-card .role{ font-family:var(--display); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:11px; }
.crew-card p{ font-size:.92rem; color:var(--ink-soft); }
.crew-card--noimg{ border-left:3px solid var(--accent); }
.crew-card--noimg .crew-card__body{ padding-top:22px; }

.quote-grid{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.quote{ background:var(--surface); border:1px solid var(--line); padding:28px 26px 26px; position:relative; }
.quote::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--accent); }
.quote blockquote{ margin:0 0 18px; font-size:.97rem; color:var(--ink-soft); }
.quote cite{ font-family:var(--display); font-weight:700; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; font-style:normal; color:var(--ink); display:block; }
.quote cite span{ display:block; font-family:var(--body); font-weight:400; font-size:.82rem;
  letter-spacing:0; text-transform:none; color:var(--ink-mute); margin-top:5px; }
.section--dark .quote{ background:rgba(253,248,234,.05); border-color:var(--line-dark); }
.section--dark .quote blockquote{ color:rgba(253,248,234,.88); }
.section--dark .quote cite{ color:#FDF8EA; }
.section--dark .quote cite span{ color:rgba(253,248,234,.6); }

/* ============================ contact =================================== */
.contact-cards{ display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); }
.contact-card{ border:1px solid var(--line); padding:28px 24px 30px; background:var(--surface); }
.contact-card a{ font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--ink);
  word-break:break-word; text-transform:none; }
.contact-card a:hover{ color:var(--accent-text); text-decoration:none; }
.contact-card p{ font-size:.9rem; color:var(--ink-soft); margin-top:9px; }
.contact-form-shell{ background:var(--surface); border:1px solid var(--line); padding:clamp(18px,3vw,32px); }
.contact-form-shell iframe{ width:100%; border:0; }

/* ============================ CTA / footer =============================== */
.cta-banner{ position:relative; background:var(--dark); color:#FDF8EA; overflow:hidden;
  padding:clamp(52px,6.6vw,88px) 0; }
.cta-banner::before{ background-color:#FDF8EA; opacity:.06; }
.cta-banner::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--accent); }
.cta-banner .wrap{ position:relative; z-index:1; }
.cta-banner__inner{ display:flex; gap:clamp(24px,4vw,58px); align-items:center;
  justify-content:space-between; flex-wrap:wrap; }
.cta-banner h2{ color:#FDF8EA; max-width:22ch; margin-bottom:.4em; }
.cta-banner p{ color:rgba(253,248,234,.86); max-width:52ch; }

.site-footer{ background:var(--dark-2); color:rgba(253,248,234,.8); padding:clamp(50px,6vw,78px) 0 28px; }
.site-footer a{ color:rgba(253,248,234,.8); }
.site-footer a:hover{ color:#FDF8EA; text-decoration:none; }
.footer-grid{ display:grid; gap:clamp(26px,4vw,50px); grid-template-columns:1.3fr 1fr 1fr 1.1fr; }
.site-footer .brand__logo{ height:44px; margin-bottom:18px; display:block; }
.footer-grid h4{ font-family:var(--display); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:15px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; font-size:.9rem; }
.footer-social{ display:flex; gap:11px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-dark); transition:background var(--t), border-color var(--t); }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); }
.footer-social svg{ width:17px; height:17px; fill:currentColor; }
.footer-bottom{ margin-top:42px; padding-top:20px; border-top:1px solid var(--line-dark);
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
  font-size:.76rem; color:rgba(253,248,234,.58); }

/* ============================ motion ===================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 700ms ease, transform 700ms ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}

/* ============================ responsive ================================= */
@media (max-width:1180px){ .gallery-grid{ columns:3; } .card-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; } .card-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1320px){ .header-phone{ display:none; } }
@media (max-width:1140px){ .nav-main{ gap:15px; } .nav-main a, .nav-main .nav-trigger{ font-size:.66rem; letter-spacing:.10em; } }
@media (max-width:960px){
  .split, .split--wide-media{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .gallery-grid{ columns:2; }
}
@media (max-width:860px){
  body{ font-size:16px; }
  .nav-main a, .nav-main .nav-trigger{ font-size:.82rem !important; letter-spacing:.13em !important; white-space:normal; }
  .nav-toggle{ display:inline-flex; position:relative; z-index:95; }
  .nav-main{
    position:fixed; inset:0 0 0 auto; width:min(90vw,380px); background:var(--surface);
    color:var(--ink); flex-direction:column; align-items:stretch; gap:0; padding:92px 24px 40px;
    transform:translateX(102%); transition:transform var(--t); overflow-y:auto;
    box-shadow:-20px 0 60px rgba(38,40,41,.3); z-index:90;
  }
  body.nav-open .nav-main{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav-toggle{ color:var(--ink); }
  .nav-main > li{ border-bottom:1px solid var(--line-ink); }
  .nav-main a, .nav-main .nav-trigger{ display:flex; width:100%; padding:15px 0; font-size:.82rem;
    justify-content:space-between; color:var(--ink) !important; }
  .nav-main a::after,.nav-main .nav-trigger::after{ display:none; }
  .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border-top:0; padding:0 0 12px; background:transparent; display:none; grid-template-columns:1fr; }
  .nav-main li.is-open > .nav-dropdown{ display:grid; }
  .nav-dropdown a{ padding:11px 0 11px 14px; }
  .nav-dropdown__head{ margin-top:10px; }
  .nav-main > li.has-dropdown::after{ display:none; }
  .header-cta .btn{ display:none; }
  .site-header:not(.is-scrolled){ color:#FDF8EA; }
}
@media (max-width:640px){
  .gallery-grid{ columns:1; }
  .card-grid--3,.card-grid--4{ grid-template-columns:1fr; }
  .brand__logo{ height:42px; }
  .hero--photo{ min-height:clamp(500px,76vh,640px); }
  .btn{ padding:15px 22px; font-size:.72rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .steps li{ padding-left:56px; }
}

/* ==========================================================================
   MALLARD BAY WIDGET DEFENCES — load-bearing, do not remove.
   ========================================================================== */
.hero h1{ font-size:clamp(2.15rem,5.1vw,4rem) !important; line-height:1.02 !important;
          font-family:var(--display) !important; text-transform:uppercase !important; }
.hero--block h1{ font-size:clamp(1.95rem,3.9vw,2.95rem) !important; }
button.mb_widget.btn--primary{
  background:var(--ink) !important; color:var(--surface) !important;
  font-family:var(--display) !important; font-size:.78rem !important; font-weight:700 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  padding:17px 28px !important; border:0 !important; border-radius:0 !important;
}
button.mb_widget.btn--onlight-dark{
  background:var(--surface) !important; color:var(--ink) !important; border-radius:0 !important;
}
button.mb_widget.btn--accent{
  background:var(--accent) !important; color:var(--on-accent) !important; border-radius:0 !important;
}
button.mb_widget.btn--ghost{
  background:transparent !important; color:var(--ink) !important; border-radius:0 !important;
  box-shadow:inset 0 0 0 1.5px var(--ink) !important;
}
button.mb_widget.btn{ box-shadow:none; }
button.mb_widget.btn:hover{ transform:translateY(-2px); }
body > script, body > style, .mb-widget-root script, .mb-widget-root style{ display:none !important; }


/* --- hero: dedicated mobile crop so the subject is not cropped out on phones --- */
@media (max-width:640px){
  .hero--photo::before{
    background-image:var(--hero-img-mobile, var(--hero-img));
    background-position:var(--hero-pos-mobile, var(--hero-pos, center));
  }
}