/* ==========================================================================
   Four Outdoor Rentals - preview design system
   Every colour, font and spacing value the site uses is declared here.
   These :root variables map onto Divi 5 global variables in Phase 3.
   ========================================================================== */

:root{
  /* --- Brand, sampled from FOUR OUTDOOR-Final-1.svg --- */
  --navy:        #0A2756;
  --navy-deep:   #061B3C;
  --navy-line:   #1B3C6E;

  /* --- Accent, proposed (no accent exists in the logo) --- */
  --brand-orange:#E8631A;   /* graphic use only: stripes, rules, icon fills */
  --accent:      #C94F12;   /* interactive: button fills, links on light */
  --accent-hover:#A83F0C;
  --accent-tint: #F2A05A;   /* accent text on navy surfaces */

  /* --- Surfaces --- */
  --paper:       #FFFFFF;
  --sand:        #F4F2EE;
  --steel:       #E2E5EA;
  --steel-deep:  #C8CEDA;

  /* --- Ink --- */
  --ink:         #16233A;
  --ink-muted:   #5A6678;
  --ink-onnavy:  #FFFFFF;
  --ink-onnavy-muted:#C9D2E2;

  /* --- Type --- */
  --f-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.75rem;
  --t-xl:   2.375rem;
  --t-2xl:  3.25rem;
  --t-3xl:  4.25rem;

  /* --- Space --- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;

  /* --- Other tokens --- */
  --radius: 3px;
  --radius-lg: 5px;
  --border: 1px solid var(--steel);
  --shadow-sm: 0 1px 2px rgba(10,39,86,.08), 0 2px 8px rgba(10,39,86,.06);
  --shadow-md: 0 4px 12px rgba(10,39,86,.10), 0 12px 32px rgba(10,39,86,.10);
  --shadow-lg: 0 18px 50px rgba(10,39,86,.18);
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --notch: 14px;               /* corner cut, echoes the logo frame */
  --header-h: 78px;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block;}
img{height:auto;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);text-decoration:underline;}
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--navy);
  margin:0 0 var(--s-4);
  text-transform:uppercase;
}
h1{font-size:var(--t-2xl);}
h2{font-size:var(--t-xl);}
h3{font-size:var(--t-lg);}
h4{font-size:var(--t-md);letter-spacing:.02em;}
p{margin:0 0 var(--s-4);}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15rem;}
li{margin-bottom:.35rem;}
hr{border:0;border-top:var(--border);margin:var(--s-6) 0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.skip{
  position:absolute;left:0;top:-120px;z-index:200;
  background:var(--accent);color:#fff;padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{top:0;}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5);}
.wrap--narrow{max-width:var(--wrap-narrow);}
.sec{padding:var(--s-8) 0;}
.sec--tight{padding:var(--s-7) 0;}
.sec--paper{background:var(--paper);}
.sec--sand{background:var(--sand);}
.sec--navy{background:var(--navy);color:var(--ink-onnavy);}
.sec--navy h2,.sec--navy h3,.sec--navy h4{color:#fff;}
.sec--navy p{color:var(--ink-onnavy-muted);}
.sec--navy a{color:var(--accent-tint);}
.sec--deep{background:var(--navy-deep);color:var(--ink-onnavy);}
.sec--deep h2,.sec--deep h3,.sec--deep h4{color:#fff;}
.sec--deep p{color:var(--ink-onnavy-muted);}

.grid{display:grid;gap:var(--s-5);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center;}
.stack-sm > * + *{margin-top:var(--s-3);}

/* Section heading block */
.sec-head{max-width:720px;margin-bottom:var(--s-6);}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  font-family:var(--f-display);
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s-2);
  display:flex;align-items:center;gap:.6rem;
}
.sec-head--center .eyebrow{justify-content:center;}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--brand-orange);flex:none;}
.sec--navy .eyebrow,.sec--deep .eyebrow{color:var(--accent-tint);}
.lede{font-size:var(--t-md);color:var(--ink-muted);line-height:1.5;}
.sec--navy .lede,.sec--deep .lede{color:var(--ink-onnavy-muted);}

/* Body paragraphs that are intentionally unwritten. No visible marker. */
.lorem--{color:var(--ink-muted);}
.sec--navy .lorem--,.sec--deep .lorem--{color:var(--ink-onnavy-muted);}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
  padding:.95rem 1.6rem;
  border:2px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn--primary{background:var(--accent);color:#fff;}
.btn--primary:hover{background:var(--accent-hover);color:#fff;}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy-deep);color:#fff;}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--steel-deep);}
.btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn--onnavy:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn--sm{font-size:var(--t-sm);padding:.6rem 1.05rem;letter-spacing:.07em;}
.btn--lg{font-size:1.1875rem;padding:1.1rem 2rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.btn .ic{width:18px;height:18px;flex:none;}

/* Text link with arrow */
.arrow-link{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:var(--t-sm);
  display:inline-flex;align-items:center;gap:.4rem;
}
.arrow-link::after{content:"\2192";transition:transform .15s ease;}
.arrow-link:hover{text-decoration:none;}
.arrow-link:hover::after{transform:translateX(4px);}

/* ==========================================================================
   Hazard rule - the one decorative motif, taken from hi-vis site markings
   ========================================================================== */

.hazard{
  height:6px;
  background:repeating-linear-gradient(
    -45deg,var(--brand-orange) 0 14px,var(--navy) 14px 28px);
}
.hazard--thin{height:4px;}

/* ==========================================================================
   Header
   ========================================================================== */

.topbar{
  background:var(--navy-deep);color:var(--ink-onnavy-muted);
  font-size:var(--t-xs);letter-spacing:.02em;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:38px;}
.topbar-list{display:flex;align-items:center;gap:var(--s-5);list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.topbar-list li{margin:0;display:flex;align-items:center;gap:.4rem;}
.topbar a{color:#fff;}
.topbar .ic{width:14px;height:14px;color:var(--accent-tint);flex:none;}

.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;border-bottom:var(--border);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:var(--shadow-md);}
.header-inner{display:flex;align-items:center;gap:var(--s-5);min-height:var(--header-h);}
.brand{display:flex;align-items:center;flex:none;padding:.35rem 0;}
.brand img{width:236px;}
.brand:hover{text-decoration:none;}

.nav{margin-left:auto;}
.nav-list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;}
.nav-list li{margin:0;}
.nav-list > li > a{
  display:block;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  color:var(--navy);padding:.6rem .52rem;border-radius:var(--radius);
  position:relative;
}
.nav-list > li > a::after{
  content:"";position:absolute;left:.52rem;right:.52rem;bottom:.28rem;height:3px;
  background:var(--brand-orange);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.nav-list > li > a:hover{text-decoration:none;}
.nav-list > li > a:hover::after,
.nav-list > li > a[aria-current="page"]::after{transform:scaleX(1);}
.header-cta{display:flex;align-items:center;gap:var(--s-4);flex:none;margin-left:var(--s-4);}
.header-phone{
  font-family:var(--f-display);font-weight:700;font-size:1.375rem;
  color:var(--navy);letter-spacing:.01em;line-height:1;
  display:flex;align-items:center;gap:.45rem;
}
.header-phone:hover{color:var(--accent);text-decoration:none;}
.header-phone .ic{width:20px;height:20px;color:var(--accent);}

.nav-toggle{
  display:none;margin-left:auto;background:var(--navy);color:#fff;border:0;
  width:46px;height:44px;border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle .ic{width:22px;height:22px;}
.nav-toggle .ic-close{display:none;}
.nav-toggle[aria-expanded="true"] .ic-close{display:block;}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none;}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{position:relative;overflow:hidden;background:var(--navy-deep);}
.hero-media{position:absolute;inset:0;}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,27,60,.94) 0%,rgba(6,27,60,.80) 46%,rgba(6,27,60,.42) 100%),
    linear-gradient(180deg,rgba(6,27,60,.55) 0%,rgba(6,27,60,0) 40%);
}
.hero-body{position:relative;padding:var(--s-9) 0 var(--s-8);max-width:680px;}
.hero h1{color:#fff;font-size:var(--t-3xl);margin-bottom:var(--s-4);}
.hero h1 em{font-style:normal;color:var(--accent-tint);}
.hero .lede{color:#DDE5F1;font-size:1.3125rem;max-width:560px;}
.hero .btn-row{margin-top:var(--s-6);}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-7);
  padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.18);
}
.hero-badge{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:var(--t-sm);font-weight:500;}
.hero-badge .ic{width:22px;height:22px;color:var(--accent-tint);flex:none;}

/* Compact page hero for interior pages */
.pagehead{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:var(--s-8) 0 var(--s-7);
}
.pagehead::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.5) 48% 50%,transparent 50%);
  background-size:34px 34px;
}
.pagehead .wrap{position:relative;}
.pagehead h1{color:#fff;margin-bottom:var(--s-3);}
.pagehead .lede{color:var(--ink-onnavy-muted);max-width:640px;}
.crumbs{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s-4);padding:0;
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--f-display);font-weight:600;color:var(--ink-onnavy-muted);
}
.crumbs li{margin:0;display:flex;gap:.5rem;align-items:center;}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.35);}
.crumbs a{color:#fff;}

/* ==========================================================================
   Quick pick strip
   ========================================================================== */

.quickpick{background:var(--navy);border-top:1px solid var(--navy-line);}
.quickpick-inner{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:stretch;}
.quickpick-label{
  display:flex;align-items:center;padding:var(--s-5) var(--s-5) var(--s-5) 0;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:#fff;font-size:var(--t-sm);max-width:190px;line-height:1.2;
}
.quickpick-item{
  display:flex;align-items:center;gap:.75rem;padding:var(--s-5) var(--s-4);
  border-left:1px solid var(--navy-line);color:#fff;font-weight:600;font-size:var(--t-sm);
  transition:background .15s ease;
}
.quickpick-item:hover{background:var(--navy-deep);text-decoration:none;color:#fff;}
.quickpick-item .ic{width:30px;height:30px;color:var(--accent-tint);flex:none;}

/* ==========================================================================
   Cards
   ========================================================================== */

.card{
  background:#fff;border:var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--steel-deep);}
.card-media{position:relative;aspect-ratio:4/3;background:var(--navy);overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.045);}
.card-body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;}
.card-body h3{font-size:1.5rem;margin-bottom:.5rem;}
.card-body p{font-size:var(--t-sm);color:var(--ink-muted);margin-bottom:var(--s-4);}
.card-body .arrow-link{margin-top:auto;}
.card-tag{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--navy);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.11em;text-transform:uppercase;padding:.4rem .85rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.card-tag--accent{background:var(--accent);}

a.card{color:inherit;}
a.card:hover{text-decoration:none;}

/* Category card variant: dark caption bar over the photo */
.cat-card .card-media{aspect-ratio:5/4;}
.cat-card .card-body{padding:var(--s-4) var(--s-5) var(--s-5);}
.cat-card h3{font-size:1.4375rem;}
.cat-card .count{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;
}

/* ==========================================================================
   Themed image placeholder
   Used wherever a category or unit has no photograph yet. It reserves the
   exact box the real photo will occupy. The shot brief lives in data-shot.
   ========================================================================== */

.ph{
  position:relative;width:100%;height:100%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph::before{                       /* faint diagonal site-marking texture */
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:repeating-linear-gradient(
    -45deg,#fff 0 2px,transparent 2px 16px);
}
.ph::after{                        /* hi-vis corner flash, echoes the logo notch */
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:64px;height:64px;background:var(--brand-orange);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.9;
}
.ph-mark{
  position:relative;z-index:1;width:52%;max-width:190px;color:#fff;opacity:.82;
}
.ph--sand{background:var(--sand);}
.ph--sand::before{opacity:.5;background-image:repeating-linear-gradient(-45deg,var(--steel) 0 2px,transparent 2px 16px);}
.ph--sand .ph-mark{color:var(--navy);opacity:.5;}
.ph--sand::after{opacity:.55;}

/* ==========================================================================
   Value / feature tiles
   ========================================================================== */

.tile{
  background:#fff;border:var(--border);border-radius:var(--radius);
  padding:var(--s-5);position:relative;
  border-top:4px solid var(--navy);
}
.tile--accent{border-top-color:var(--brand-orange);}
.tile .ic{width:34px;height:34px;color:var(--accent);margin-bottom:var(--s-3);}
.tile h3{font-size:1.375rem;margin-bottom:.4rem;}
.tile p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.sec--navy .tile,.sec--deep .tile{
  background:rgba(255,255,255,.05);border-color:var(--navy-line);border-top-color:var(--brand-orange);
}
.sec--navy .tile .ic,.sec--deep .tile .ic{color:var(--accent-tint);}
.sec--navy .tile p,.sec--deep .tile p{color:var(--ink-onnavy-muted);}

/* Numbered step list */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--s-5);}
.steps li{
  margin:0;counter-increment:step;padding-left:4.25rem;position:relative;min-height:3rem;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-.15rem;
  font-family:var(--f-display);font-size:2.25rem;font-weight:700;line-height:1;
  color:var(--brand-orange);
}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.steps h3{font-size:1.3125rem;margin-bottom:.25rem;}
.steps p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.sec--navy .steps p{color:var(--ink-onnavy-muted);}

/* ==========================================================================
   Product / unit listing
   ========================================================================== */

.unit{
  background:#fff;border:var(--border);border-radius:var(--radius);
  display:grid;grid-template-columns:280px 1fr auto;gap:0;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.unit:hover{box-shadow:var(--shadow-md);border-color:var(--steel-deep);}
.unit-media{position:relative;background:var(--sand);aspect-ratio:4/3;}
.unit-media img{width:100%;height:100%;object-fit:cover;}
.unit-main{padding:var(--s-5);min-width:0;}
.unit-main h3{font-size:1.625rem;margin-bottom:.15rem;}
.unit-sku{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;margin-bottom:var(--s-3);
}
.unit-main p{font-size:var(--t-sm);color:var(--ink-muted);}
.spec-inline{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
}
.spec-inline li{
  margin:0;background:var(--sand);border:1px solid var(--steel);
  font-size:var(--t-xs);padding:.28rem .6rem;border-radius:2px;color:var(--ink);
}
.spec-inline strong{font-weight:600;}
.unit-rates{
  border-left:var(--border);background:var(--sand);
  padding:var(--s-5);min-width:250px;display:flex;flex-direction:column;justify-content:center;
}
.rate-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:.3rem 0;}
.rate-row + .rate-row{border-top:1px dashed var(--steel-deep);}
.rate-label{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--ink-muted);
}
.rate-value{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1;}
.unit-rates .btn{margin-top:var(--s-4);justify-content:center;}
.rate-note{font-size:var(--t-xs);color:var(--ink-muted);margin:.6rem 0 0;line-height:1.4;}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px;background:#fff;}
table.data caption{text-align:left;font-size:var(--t-xs);color:var(--ink-muted);padding-bottom:.5rem;}
table.data th,table.data td{padding:.8rem 1rem;text-align:left;border-bottom:var(--border);}
table.data thead th{
  background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;font-size:var(--t-xs);border-bottom:0;
}
table.data tbody tr:nth-child(even){background:var(--sand);}
table.data td:first-child{font-weight:600;color:var(--navy);}

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.acc{border-top:var(--border);}
.acc-item{border-bottom:var(--border);}
.acc-btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:1.15rem 0;
  font-family:var(--f-display);font-size:1.3125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);
}
.acc-btn:hover{color:var(--accent);}
.acc-btn .sign{
  flex:none;width:26px;height:26px;border:2px solid var(--steel-deep);border-radius:50%;
  position:relative;transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.acc-btn .sign::before,.acc-btn .sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  transform:translate(-50%,-50%);transition:opacity .2s ease,background .2s ease;
}
.acc-btn .sign::before{width:10px;height:2px;}
.acc-btn .sign::after{width:2px;height:10px;}
.acc-btn[aria-expanded="true"] .sign{background:var(--accent);border-color:var(--accent);transform:rotate(180deg);}
.acc-btn[aria-expanded="true"] .sign::before{background:#fff;}
.acc-btn[aria-expanded="true"] .sign::after{opacity:0;}
.acc-panel{padding:0 0 1.25rem;max-width:70ch;}
.acc-panel p{color:var(--ink-muted);font-size:var(--t-sm);margin-bottom:.75rem;}
.acc-panel :last-child{margin-bottom:0;}

/* ==========================================================================
   Filter bar (equipment index)
   ========================================================================== */

.filterbar{
  background:#fff;border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:var(--s-4);
  display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:center;
  margin-top:calc(var(--s-7) * -1);position:relative;z-index:3;
}
.filter-field{position:relative;display:flex;align-items:center;}
.filter-field .ic{position:absolute;left:.9rem;width:20px;height:20px;color:var(--ink-muted);}
.filter-field input{
  width:100%;font-family:var(--f-body);font-size:var(--t-base);
  padding:.85rem 1rem .85rem 2.9rem;border:var(--border);border-radius:var(--radius);
  background:var(--sand);color:var(--ink);
}
.filter-field input:focus{background:#fff;border-color:var(--navy);outline:none;}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--s-4);}
.chip{
  font-family:var(--f-display);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.07em;text-transform:uppercase;
  padding:.45rem .85rem;border:1px solid var(--steel-deep);border-radius:2px;
  background:#fff;color:var(--navy);cursor:pointer;transition:all .15s ease;
}
.chip:hover{border-color:var(--navy);}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.filter-empty{
  padding:var(--s-7);text-align:center;border:2px dashed var(--steel-deep);
  border-radius:var(--radius);color:var(--ink-muted);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form{display:grid;gap:var(--s-4);}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);}
.field label{
  display:block;font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:.35rem;
}
.field .req{color:var(--accent);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:var(--t-base);color:var(--ink);
  padding:.8rem .95rem;border:1px solid var(--steel-deep);border-radius:var(--radius);
  background:#fff;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:2px solid rgba(10,39,86,.15);}
.field-note{font-size:var(--t-xs);color:var(--ink-muted);margin:.35rem 0 0;}
.form-note{font-size:var(--t-xs);color:var(--ink-muted);}

/* ==========================================================================
   Contact blocks
   ========================================================================== */

.contact-card{
  background:#fff;border:var(--border);border-radius:var(--radius);padding:var(--s-5);
  border-left:4px solid var(--brand-orange);
}
.contact-card .ic{width:28px;height:28px;color:var(--accent);margin-bottom:var(--s-3);}
.contact-card h3{font-size:1.25rem;margin-bottom:.3rem;}
.contact-card p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.contact-card a.big{
  font-family:var(--f-display);font-size:1.75rem;font-weight:700;color:var(--navy);
  display:block;line-height:1.1;
}
.contact-card a.big:hover{color:var(--accent);text-decoration:none;}

.mapblock{
  position:relative;aspect-ratio:16/10;border:var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--sand);
}
.mapblock-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(var(--steel) 1px,transparent 1px),
    linear-gradient(90deg,var(--steel) 1px,transparent 1px);
  background-size:44px 44px;opacity:.85;}
.mapblock-road{position:absolute;background:var(--steel-deep);}
.mapblock-pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.mapblock-pin .ic{width:42px;height:42px;color:var(--accent);filter:drop-shadow(0 3px 6px rgba(10,39,86,.35));}
.mapblock-pin span{
  background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;padding:.35rem .7rem;
}

/* ==========================================================================
   Callout band
   ========================================================================== */

.band{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;}
.band-media{position:absolute;inset:0;}
.band-media img{width:100%;height:100%;object-fit:cover;}
.band-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,27,60,.96) 0%,rgba(6,27,60,.90) 50%,rgba(6,27,60,.78) 100%);}
.band .wrap{position:relative;padding:var(--s-8) var(--s-5);}
.band h2,.band h3,.band h4{color:#fff;}
.band p{color:var(--ink-onnavy-muted);}
.band .lede{color:#DDE5F1;}
.band .eyebrow{color:var(--accent-tint);}
.band a:not(.btn){color:var(--accent-tint);}

.callout{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:var(--s-6);display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;
}
.callout h2{color:#fff;margin-bottom:.4rem;font-size:var(--t-lg);}
.callout p{color:var(--ink-onnavy-muted);margin:0;font-size:var(--t-sm);}

/* ==========================================================================
   Blog
   ========================================================================== */

.post-meta{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;
  display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem;
}
.post-meta .dot{width:4px;height:4px;background:var(--brand-orange);border-radius:50%;}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{background:var(--navy-deep);color:var(--ink-onnavy-muted);font-size:var(--t-sm);}
.footer-top{padding:var(--s-8) 0 var(--s-7);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s-6);}
.footer-brand img{width:250px;margin-bottom:var(--s-4);}
.site-footer h4{
  color:#fff;font-size:var(--t-sm);letter-spacing:.16em;margin-bottom:var(--s-4);
  padding-bottom:.6rem;border-bottom:1px solid var(--navy-line);
}
.footer-list{list-style:none;margin:0;padding:0;}
.footer-list li{margin-bottom:.5rem;}
.site-footer a{color:var(--ink-onnavy-muted);}
.site-footer a:hover{color:#fff;}
.footer-contact{display:flex;gap:.7rem;margin-bottom:var(--s-4);align-items:flex-start;}
.footer-contact .ic{width:18px;height:18px;color:var(--accent-tint);flex:none;margin-top:.2rem;}
.footer-contact strong{color:#fff;display:block;font-weight:600;}
.footer-bottom{
  border-top:1px solid var(--navy-line);padding:var(--s-4) 0;
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  font-size:var(--t-xs);
}
.footer-bottom ul{list-style:none;display:flex;gap:var(--s-4);margin:0;padding:0;}
.footer-bottom li{margin:0;}

/* Sticky mobile call bar */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--accent);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  color:#fff;padding:.95rem;font-family:var(--f-display);font-weight:700;
  font-size:1.1875rem;letter-spacing:.08em;text-transform:uppercase;
}
.callbar a:hover{text-decoration:none;color:#fff;}
.callbar .ic{width:20px;height:20px;}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-5{margin-top:var(--s-5);} .mt-6{margin-top:var(--s-6);} .mt-7{margin-top:var(--s-7);}
.center{text-align:center;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.frame{                            /* logo-derived double frame, used on images */
  position:relative;border:8px solid var(--navy);border-radius:2px;
}
.frame::after{
  content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.85);pointer-events:none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1500px){
  .header-cta .btn{display:none;}
}
@media (max-width:1240px){
  .brand img{width:196px;}
  .nav-list > li > a{font-size:.9375rem;padding:.6rem .4rem;}
  .nav-list > li > a::after{left:.4rem;right:.4rem;}
  .header-phone{font-size:1.1875rem;}
}

@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quickpick-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quickpick-label{grid-column:1/-1;padding-bottom:0;max-width:none;}
  .quickpick-item:nth-child(2),.quickpick-item:nth-child(4){border-left:0;}
  .header-phone span.num{display:none;}
}

@media (max-width:1040px){
  :root{--t-3xl:2.875rem;--t-2xl:2.375rem;--t-xl:1.9375rem;--s-8:2.75rem;--s-9:3.5rem;}
  .nav-toggle{display:flex;}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:var(--border);box-shadow:var(--shadow-lg);
    padding:var(--s-3) var(--s-5) var(--s-5);
  }
  .nav.is-open{display:block;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list > li > a{padding:.85rem 0;border-bottom:var(--border);font-size:1.25rem;}
  .nav-list > li > a::after{display:none;}
  .nav-list > li:last-child > a{border-bottom:0;}
  .site-header{position:relative;}
  .header-cta{display:none;}
  .split{grid-template-columns:1fr;gap:var(--s-6);}
  .unit{grid-template-columns:220px 1fr;}
  .unit-rates{grid-column:1/-1;border-left:0;border-top:var(--border);}
  .filterbar{grid-template-columns:1fr;margin-top:var(--s-5);}
  .callbar{display:block;}
  body{padding-bottom:56px;}
  .topbar-list li.hide-sm{display:none;}
}

@media (max-width:680px){
  :root{--t-3xl:2.375rem;--t-2xl:2rem;--t-xl:1.6875rem;--t-lg:1.4375rem;}
  .grid--2,.grid--3,.grid--4,.steps--3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .quickpick-inner{grid-template-columns:1fr;}
  .quickpick-item{border-left:0;border-top:1px solid var(--navy-line);}
  .unit{grid-template-columns:1fr;}
  .unit-media{aspect-ratio:16/10;}
  .form-row{grid-template-columns:1fr;}
  .callout{grid-template-columns:1fr;}
  .brand img{width:190px;}
  .hero-body{padding:var(--s-8) 0 var(--s-7);}
  .topbar-list li.hide-xs,.topbar .hide-xs{display:none;}
  .topbar-list{gap:var(--s-4);}
  .topbar .wrap{gap:var(--s-3);}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
