/*
Theme Name: New Zealand Safaris
Theme URI: https://newzealandsafaris.com/
Author: New Zealand Safaris
Description: Refreshed classic theme for New Zealand Safaris — free-range trophy hunting. Keeps the brand red (#bb0e33), simplified navigation, reworked homepage and conversion-focused Plan Your Hunt funnel. WooCommerce-compatible.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nzs
*/
/* =====================================================================
New Zealand Safaris — refreshed theme stylesheet
Brand colour kept from live site: theme red #bb0e33
Fonts: Oswald (condensed display) + Source Sans 3 (body)
===================================================================== */
:root{
--red:#bb0e33; /* primary brand red (from live site theme-color) */
--red-dark:#8f0a26;
--ink:#1c1c1c; /* near-black text */
--charcoal:#242424; /* dark section bg */
--charcoal-2:#111111;
--stone:#f4f2ee; /* warm light section bg */
--stone-2:#e9e5dd;
--line:#ddd8cf;
--white:#ffffff;
--muted:#6d6a63;
--gold:#c9a24b; /* subtle accent for trophies/awards */
--maxw:1200px;
--shadow:0 10px 30px rgba(0,0,0,.12);
--shadow-lg:0 24px 60px rgba(0,0,0,.28);
--radius:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
color:var(--ink);
background:var(--white);
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,.display{
font-family:"Oswald","Arial Narrow",sans-serif;
font-weight:600;
line-height:1.08;
letter-spacing:.01em;
margin:0 0 .5em;
color:var(--ink);
}
h1{font-size:clamp(2.2rem,5vw,4rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem);text-transform:uppercase}
h3{font-size:1.4rem;text-transform:uppercase}
p{margin:0 0 1.1em}
.eyebrow{
font-family:"Oswald",sans-serif;
text-transform:uppercase;
letter-spacing:.18em;
font-weight:600;
font-size:.8rem;
color:var(--red);
margin:0 0 .8rem;
display:inline-block;
}
.eyebrow.light{color:var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section.stone{background:var(--stone)}
.section.dark{background:var(--charcoal);color:#efece6}
.section.dark h1,.section.dark h2,.section.dark h3{color:#fff}
.section.red{background:var(--red);color:#fff}
.section.red h1,.section.red h2{color:#fff}
.center{text-align:center}
.lead{font-size:1.2rem;color:var(--muted)}
.section.dark .lead{color:#cfcbc2}
.maxread{max-width:780px}
.maxread.center{margin-left:auto;margin-right:auto}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.5rem;
font-family:"Oswald",sans-serif;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;
padding:14px 26px;border-radius:var(--radius);
border:2px solid transparent;cursor:pointer;transition:.18s ease;
text-decoration:none;line-height:1;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);text-decoration:none}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--ink);text-decoration:none}
.btn-ghost{background:transparent;color:var(--red);border-color:var(--red)}
.btn-ghost:hover{background:var(--red);color:#fff;text-decoration:none}
.btn-lg{padding:17px 34px;font-size:1.05rem}
/* =====================================================================
HEADER / NAV
===================================================================== */
/* The off-canvas nav panel parks at right:-100%, which some mobile browsers
count towards the scrollable width. (Was in Customizer > Additional CSS.) */
html,body{overflow-x:hidden}
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.topbar{background:var(--charcoal-2);color:#dcd8d0;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px}
.topbar a{color:#dcd8d0}
.topbar .social a{margin-left:14px;opacity:.85}
.topbar .social a:hover{opacity:1;color:#fff}
.topbar .tag{letter-spacing:.12em;text-transform:uppercase;font-family:"Oswald",sans-serif;font-size:.72rem;color:#8f8b83}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:60px;width:auto;border-radius:4px}
.brand .brand-txt{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;line-height:1;color:var(--ink)}
.brand .brand-txt b{display:block;font-size:1.15rem;letter-spacing:.02em}
.brand .brand-txt span{font-size:.66rem;letter-spacing:.22em;color:var(--red)}
.mainnav{display:flex;align-items:center;gap:4px}
.mainnav > li{position:relative;list-style:none}
.mainnav > li > a{
display:flex;align-items:center;gap:6px;
font-family:"Oswald",sans-serif;font-weight:500;text-transform:uppercase;
letter-spacing:.04em;font-size:.98rem;color:var(--ink);
padding:14px 14px;border-radius:4px;
}
.mainnav > li > a:hover{color:var(--red);text-decoration:none;background:var(--stone)}
.mainnav .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6}
/* dropdowns */
.dropdown{
position:absolute;top:calc(100% - 4px);left:0;min-width:260px;
background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
border-radius:0 0 6px 6px;box-shadow:var(--shadow);
padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
transition:.16s ease;z-index:1200;
}
.mainnav > li:hover .dropdown,.mainnav > li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:4px;color:var(--ink);font-size:.98rem}
.dropdown a:hover{background:var(--stone);color:var(--red);text-decoration:none}
.dropdown .grouphead{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);padding:12px 12px 4px;margin-top:4px;border-top:1px solid var(--line)}
.dropdown .grouphead:first-child{border-top:0;margin-top:0}
/* mega dropdown for Hunts */
.dropdown.mega{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:6px 18px;min-width:640px}
.dropdown.mega .col{min-width:0}
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-cta .call{font-family:"Oswald",sans-serif;font-weight:600;color:var(--ink);white-space:nowrap;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em}
.nav-cta .call small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--muted);font-weight:500}
.nav-cta .call a{color:var(--ink)}
.nav-cta .call a:hover{color:var(--red)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.navtoggle span{width:26px;height:3px;background:var(--ink);border-radius:2px;display:block}
/* Base state for the mobile menu close button. It is hidden and unstyled at
every width by default; the max-width:960px block below turns it on inside
the slide-in panel. Declaring background/border here means it can never fall
back to the browser's default white button chrome. */
.navclose{display:none;background:none;border:0;padding:0;margin:0;font-family:inherit;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
/* =====================================================================
HERO
===================================================================== */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.78) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:70px;width:100%}
.hero .badge{
display:inline-flex;align-items:center;gap:8px;background:var(--red);
color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;
letter-spacing:.08em;font-size:.82rem;font-weight:600;
padding:8px 16px;border-radius:40px;margin-bottom:20px;
}
.hero h1{color:#fff;max-width:14ch;text-shadow:0 3px 24px rgba(0,0,0,.5)}
.hero .sub{font-size:1.35rem;max-width:34ch;font-weight:600;font-family:"Oswald",sans-serif;text-transform:none;color:#fff}
.hero .sub2{font-size:1.05rem;max-width:44ch;color:#e9e6df}
.hero .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* =====================================================================
TESTIMONIAL / TRUST BAR
===================================================================== */
.trustbar{background:var(--charcoal);color:#fff;padding:46px 0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.tcard{border-left:3px solid var(--red);padding:6px 0 6px 20px}
.tcard .stars{color:var(--gold);letter-spacing:2px;font-size:1rem;margin-bottom:8px}
.tcard blockquote{margin:0 0 12px;font-size:1.06rem;line-height:1.5;color:#f2efe9}
.tcard .who{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:#bdb9b0}
.tcard .who b{color:#fff}
.trustbar .trust-foot{text-align:center;margin-top:30px}
/* =====================================================================
SHOWS TABLE
===================================================================== */
.showtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.showtable th{background:var(--charcoal);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;text-align:left;padding:14px 18px}
.showtable td{padding:14px 18px;border-top:1px solid var(--line);font-size:1rem}
.showtable tr:nth-child(even) td{background:var(--stone)}
.showtable .date{font-family:"Oswald",sans-serif;white-space:nowrap}
.showtable .booth{font-family:"Oswald",sans-serif;color:var(--red)}
/* =====================================================================
PACKAGE CARDS
===================================================================== */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pkg{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s ease}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pkg .pkg-img{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center}
.pkg .rank{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;padding:6px 12px;border-radius:30px}
.pkg .pkg-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.pkg h3{margin-bottom:4px}
.pkg .price{font-family:"Oswald",sans-serif;color:var(--red);font-size:1.15rem;font-weight:600;margin-bottom:14px}
.pkg .specs{list-style:none;margin:0 0 20px;padding:0;font-size:.95rem}
.pkg .specs li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.pkg .specs li span:first-child{color:var(--muted);font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}
.pkg .specs li span:last-child{font-weight:600;text-align:right}
.pkg .btn{margin-top:auto;justify-content:center}
/* =====================================================================
STEPS (What Happens Next)
===================================================================== */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;counter-reset:step}
.step{display:flex;gap:18px;align-items:flex-start}
.step .num{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Oswald",sans-serif;font-weight:600;font-size:1.25rem}
.step h4{margin:6px 0 4px;text-transform:none;font-size:1.1rem}
.step p{margin:0;color:var(--muted);font-size:.98rem}
.section.dark .step p{color:#c9c5bc}
/* =====================================================================
MEDIA / SPLIT
===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split.reverse .split-media{order:2}
.split-media img{border-radius:10px;box-shadow:var(--shadow)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid img{aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.ratio-16x9{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* =====================================================================
LOGO STRIP (associations / partners)
Each mark is scaled to a per-shape height so wide wordmarks and square
emblems carry roughly the same optical weight. Nothing is ever cropped:
width stays auto, height is the only constraint.
.lg-xw very wide wordmark (aspect ratio > 3.5)
.lg-w wide wordmark (aspect ratio 1.9 - 3.5)
default squarer emblem (aspect ratio < 1.9)
The size class goes on the ![]()
, not the wrapping : a custom property
set directly on an element beats one inherited from its parent, so the
responsive overrides below would otherwise shadow the per-logo value.
===================================================================== */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 44px}
.logos a{display:flex;align-items:center;justify-content:center;line-height:0}
.logos img{
height:var(--logo-h,64px);width:auto;max-width:100%;
object-fit:contain;
/* The logo files are all white artwork on transparent. invert() flips them
to dark for light sections while KEEPING internal shading (the DSC
elephant loses all its detail under the old brightness(0) silhouette). */
filter:grayscale(1) invert(1);opacity:.68;
transition:opacity .18s ease;
}
.logos a:hover img{opacity:.92}
.logos img.lg-xw{--logo-h:40px}
.logos img.lg-w{--logo-h:56px}
/* Logos supplied as white artwork on a transparent background: show them
as-is on dark sections. */
.section.dark .logos img{filter:none;opacity:.92}
/* .on-white marks a logo file with a solid white background baked in (a JPEG,
no alpha). Blending knocks the box out instead of leaving a hard white or
black rectangle sitting on the section. */
.logos img.on-white{mix-blend-mode:multiply;filter:grayscale(1);opacity:.72}
.section.dark .logos img.on-white{mix-blend-mode:screen;filter:invert(1);opacity:.92}
/* Homepage trust band: sits directly under the reviews, so it runs tighter
than a full section. */
.logoband{padding:46px 0;background:var(--stone);border-bottom:1px solid var(--line)}
.logoband .logoband-head{
font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.16em;
font-weight:600;font-size:.78rem;color:var(--muted);text-align:center;margin:0 0 28px;
}
.logoband .logoband-foot{
text-align:center;margin:28px auto 0;max-width:66ch;font-size:.95rem;color:var(--muted);
}
.logoband .logoband-foot a{white-space:nowrap;border-bottom:1px solid rgba(187,14,51,.35)}
.logoband .logoband-foot a:hover{text-decoration:none;border-bottom-color:var(--red)}
@media(max-width:900px){
.logos{gap:22px 34px}
.logos img{--logo-h:52px}
.logos img.lg-xw{--logo-h:34px}
.logos img.lg-w{--logo-h:46px}
}
@media(max-width:560px){
/* Two even columns beat wrapped flex here: six logos land as three tidy
rows instead of 2 + 3 + 1 with a lone mark on the last line. */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 20px;justify-items:center}
.logos img{--logo-h:42px}
.logos img.lg-xw{--logo-h:27px}
.logos img.lg-w{--logo-h:37px}
.logoband{padding:36px 0}
.logoband .logoband-foot{font-size:.9rem}
}
/* =====================================================================
FORMS
===================================================================== */
.formcard{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:34px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.field.full{grid-column:1/-1}
.field label{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;color:var(--ink)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
padding:12px 14px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:1rem;background:#fbfaf8;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);border-color:var(--red);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.form-note{background:var(--stone);border-left:3px solid var(--red);padding:16px 18px;border-radius:0 6px 6px 0;font-size:.96rem;margin-bottom:22px}
/* =====================================================================
PAGE HERO (interior)
===================================================================== */
.pagehero{position:relative;color:#fff;padding:120px 0 90px;background-size:cover;background-position:center}
.pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.72))}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.pagehero .sub{font-size:1.2rem;max-width:52ch;color:#eee}
.breadcrumb{font-size:.85rem;color:#d8d4cc;margin-bottom:14px;text-transform:uppercase;letter-spacing:.1em;font-family:"Oswald",sans-serif}
.breadcrumb a{color:#fff}
.placeholder{border:2px dashed var(--red);background:#fff6f7;border-radius:10px;padding:22px 24px;color:var(--red-dark);margin:22px 0}
.placeholder b{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:6px}
.placeholder a{color:var(--red-dark);text-decoration:underline}
/* =====================================================================
LONG-FORM CONTENT PAGES (Before / During / After the Hunt)
===================================================================== */
.content{max-width:840px;margin:0 auto}
.content h2{margin-top:1.7em;text-transform:none;font-size:1.7rem;scroll-margin-top:120px}
.content h3{margin-top:1.4em;text-transform:none;font-size:1.22rem}
.content ul,.content ol{padding-left:1.25em}
.content li{margin-bottom:.5em}
.content figure{margin:30px 0}
.content figure img{border-radius:10px;box-shadow:var(--shadow);width:100%}
.content figcaption{font-size:.85rem;color:var(--muted);margin-top:8px;font-style:italic;text-align:center}
/* sticky stage nav for the 3 hunt-stage pages */
.stagenav{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 36px}
.stagenav a{flex:1;min-width:150px;text-align:center;padding:14px;border:1px solid var(--line);border-radius:8px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);font-size:.95rem}
.stagenav a.active{background:var(--red);color:#fff;border-color:var(--red)}
.stagenav a:hover{border-color:var(--red);text-decoration:none}
/* on-page jump links */
.toc{background:var(--stone);border:1px solid var(--line);border-radius:10px;padding:22px 26px;margin:0 0 34px}
.toc .lbl{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--muted);margin-bottom:12px}
.toc ul{list-style:none;padding:0;margin:0;columns:2;column-gap:30px}
.toc li{margin-bottom:8px;break-inside:avoid}
.toc a{font-size:.96rem}
@media(max-width:640px){.toc ul{columns:1}}
/* checklist */
.checklist{list-style:none;padding:0;margin:18px 0}
.checklist li{position:relative;padding:10px 10px 10px 40px;border-bottom:1px solid var(--line);margin:0}
.checklist li::before{content:"";position:absolute;left:6px;top:12px;width:20px;height:20px;border:2px solid var(--red);border-radius:4px}
.checklist li::after{content:"✓";position:absolute;left:10px;top:9px;color:var(--red);font-weight:700;font-size:.95rem}
/* info / callout box */
.infobox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 8px 8px 0;padding:20px 24px;margin:24px 0;box-shadow:var(--shadow)}
.infobox h3{margin-top:0}
.infobox.tip{border-left-color:var(--gold);background:#fffdf6}
.infobox .addr{font-family:"Oswald",sans-serif;font-size:1.05rem;line-height:1.5}
/* data tables */
.datatable{width:100%;border-collapse:collapse;margin:22px 0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.datatable th{background:var(--charcoal);color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;text-align:left;padding:12px 16px}
.datatable td{padding:12px 16px;border-top:1px solid var(--line)}
.datatable tr:nth-child(even) td{background:var(--stone)}
.datatable td:first-child{font-family:"Oswald",sans-serif}
/* end-of-page dual CTA */
.endcta{background:var(--stone);border-radius:12px;padding:34px;text-align:center;margin-top:44px}
.endcta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
/* =====================================================================
FOOTER
===================================================================== */
.site-footer{background:var(--charcoal-2);color:#b9b5ac;font-size:.95rem}
.footer-cta{background:var(--red);color:#fff;text-align:center;padding:52px 24px}
.footer-cta h2{color:#fff;margin-bottom:10px}
.footer-cta p{max-width:60ch;margin:0 auto 22px;color:#ffe1e7}
.footer-main{max-width:var(--maxw);margin:0 auto;padding:56px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px}
.footer-main h4{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;margin-bottom:14px}
.footer-main a{color:#b9b5ac;display:block;padding:4px 0}
.footer-main a:hover{color:#fff;text-decoration:none}
.footer-brand img{height:56px;margin-bottom:14px}
.footer-brand p{color:#8f8b83;font-size:.9rem}
.footer-social{display:flex;gap:12px;margin-top:14px}
.footer-social a{width:38px;height:38px;border:1px solid #3a3a3a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#b9b5ac;padding:0}
.footer-social a:hover{background:var(--red);border-color:var(--red);color:#fff}
.footer-social svg{width:17px;height:17px}
.footer-archive{border-top:1px solid #2a2a2a;padding:22px 24px;max-width:var(--maxw);margin:0 auto}
.footer-archive .lbl{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:#7d7a72;margin-bottom:10px}
.footer-archive .arch-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem}
.footer-archive a{color:#8f8b83}
.footer-archive a:hover{color:#fff}
/* Bottom bar: copyright + build credit stack on the left, legal links sit
opposite. Stacking keeps the credit out of the middle of the bar, where a
lone centred line looked like an orphan on wide screens. */
.footer-bottom{border-top:1px solid #2a2a2a;padding:22px 24px 26px;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;font-size:.82rem;color:#7d7a72}
.footer-legal{display:flex;flex-direction:column;gap:6px;min-width:0}
.footer-credit{font-size:.78rem;color:#6b6862}
/* Hairline underline instead of the browser default: lighter at rest, and it
picks up the brand red on hover like the social icons do. */
.footer-credit a{color:#a09b92;border-bottom:1px solid #3a3a3a;transition:color .15s,border-color .15s}
.footer-credit a:hover{color:#fff;border-bottom-color:var(--red);text-decoration:none}
.footer-legal-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.footer-legal-links a{color:#9c988f}
.footer-legal-links a:hover{color:#fff;text-decoration:none}
.footer-legal-links .sep{color:#4a4740}
/* =====================================================================
RESPONSIVE
===================================================================== */
/* The primary nav collapses to the off-canvas panel at 1180px, not 960px: the
horizontal menu plus the "Get a Quote" CTA stops fitting well before 960px
and the CTA was overflowing the right edge between 961 and 1180. (This used
to live as an !important override in Customizer > Additional CSS.) */
@media(max-width:1180px){
.navtoggle{display:flex;order:3;flex-shrink:0;padding:6px}
/* Reorder to brand | Get a Quote | toggle once the desktop nav collapses.
The brand is the only element allowed to shrink, so the CTA and the
toggle can never be pushed off the right edge. */
.nav-cta{order:2;margin-left:auto;flex-shrink:0}
.brand{min-width:0;flex-shrink:1}
.brand img{flex-shrink:0}
.mainnav{
position:fixed;top:0;right:-100%;width:min(88vw,360px);height:100vh;
background:#fff;flex-direction:column;align-items:stretch;gap:0;
padding:80px 18px 40px;box-shadow:var(--shadow-lg);overflow-y:auto;
transition:right .28s ease;z-index:1500;
}
body.nav-open .mainnav{right:0}
body.nav-open{overflow:hidden}
/* Logged-in views: start the panel below the admin bar so its close button
is not sitting underneath it. 32px desktop, 46px on the mobile bar. */
body.admin-bar .mainnav{top:32px;height:calc(100vh - 32px)}
.mainnav > li > a{padding:14px 10px;border-bottom:1px solid var(--line);justify-content:space-between}
.dropdown,.dropdown.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:0;min-width:auto;display:none;padding:4px 0 10px 10px;grid-template-columns:1fr}
.mainnav > li.open .dropdown,.mainnav > li.open .dropdown.mega{display:block}
.mainnav .caret{transition:transform .2s}
.mainnav > li.open .caret{transform:rotate(-135deg)}
/* The close button is absolutely positioned inside the sliding panel, so it
travels with it: off-screen while the menu is closed, top-right corner of
the panel once it is open. No viewport-fixed stray "x". */
.navclose{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:14px;width:44px;height:44px;font-size:2rem;line-height:1;border-radius:50%}
.navclose:hover,.navclose:focus-visible{color:var(--red)}
.nav-cta .call{display:none}
.dropdown.mega{min-width:auto}
}
/* WordPress switches the admin bar to 46px at this width. */
@media(max-width:782px){
body.admin-bar .mainnav{top:46px;height:calc(100vh - 46px)}
}
/* Content grids collapse later than the nav does. */
@media(max-width:960px){
.trustbar .wrap,.packages,.steps,.split,.gallery-grid,.footer-main{grid-template-columns:1fr}
.split.reverse .split-media{order:0}
.formgrid{grid-template-columns:1fr}
.footer-main{gap:24px}
}
@media(max-width:560px){
.section{padding:56px 0}
.hero{min-height:76vh}
.navbar{padding:12px;gap:8px}
.brand{gap:8px}
.brand img{height:42px}
.brand .brand-txt{min-width:0}
.brand .brand-txt b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .brand-txt span{display:none}
.nav-cta .btn{padding:12px 11px;font-size:.7rem;white-space:nowrap}
.topbar .wrap{font-size:.72rem}
.showtable{font-size:.9rem}
.showtable th,.showtable td{padding:10px 12px}
}
/* Under 360px the wordmark would have to ellipsize, so drop it and keep the
emblem, the CTA and the toggle. */
@media(max-width:359px){
.brand .brand-txt{display:none}
}
/* =====================================================================
Page-specific components (folded in from per-page