/* ==========================================================================
   Pro Pane Tank Supply Co — "Blue Flame & Brushed Steel"
   Cool graphite + machined nickel + the blue of burning propane.
   Light-dominant, engineered, spec-plate detailing.
   ========================================================================== */

:root{
  /* --- Graphite: cool, never warm. This is the authority layer. --- */
  --graphite:   #0B1015;
  --graphite-2: #101720;
  --slate:      #18222D;
  --slate-2:    #223040;
  --steel:      #33455A;

  /* --- Cool paper: the page lives here --- */
  --paper:      #F6F8F9;
  --paper-2:    #EDF1F4;
  --paper-3:    #E2E8ED;
  --card:       #FFFFFF;

  /* --- Ink --- */
  --ink:        #0D141A;
  --ink-2:      #26333E;
  --muted:      #5C6E7C;
  --muted-2:    #8698A5;

  /* --- Hairlines: this theme is built out of them --- */
  --line:       #D7E0E6;
  --line-2:     #C2CFD8;
  --line-dk:    rgba(214,228,238,.13);
  --line-dk-2:  rgba(214,228,238,.24);

  /* --- Blue flame: the actual combustion colour of propane --- */
  --flame:      #1478D4;
  --flame-2:    #0B579F;
  --flame-3:    #4FB4F5;
  --flame-tip:  #9FE0FF;
  --flame-wash: rgba(20,120,212,.09);

  /* --- Brushed nickel: the metal, standing in for gold --- */
  --nickel:     #92A6B4;
  --nickel-2:   #6E8494;
  --platinum:   #C4D2DB;
  --sheen: linear-gradient(112deg,#E8EEF2 0%,#B9C8D3 26%,#F2F6F8 47%,#A9BAC7 71%,#DCE5EA 100%);

  /* --- Signature gradients, used sparingly --- */
  --grad-flame: linear-gradient(118deg,var(--flame-3) 0%,var(--flame) 46%,var(--flame-2) 100%);
  --grad-dark:  linear-gradient(168deg,var(--graphite) 0%,var(--slate) 58%,#0E1A26 100%);
  --glow-flame: radial-gradient(58% 58% at 50% 108%,rgba(20,120,212,.30),transparent 70%);

  /* --- Type: Outfit only, at the sizes this client signed off on --- */
  --font: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --h1: clamp(2.05rem,3.5vw,3.15rem);
  --h2: clamp(1.55rem,2.4vw,2.2rem);
  --h3: clamp(1.15rem,1.5vw,1.42rem);
  --h4: clamp(1.02rem,1.15vw,1.12rem);
  --lede: clamp(.98rem,1.05vw,1.08rem);
  --micro: .688rem;          /* spec-plate labels */

  /* --- Metrics --- */
  --wrap: 1320px;
  --wrap-narrow: 880px;
  --gutter: clamp(17px,3.6vw,44px);
  --sec: clamp(52px,6vw,86px);
  --r: 3px;                  /* machined, not rounded */
  --r-lg: 5px;
  --hdr: 104px;
  --hdr-sm: 78px;
  --t: .38s cubic-bezier(.22,.61,.36,1);
  --t-fast: .2s cubic-bezier(.4,0,.2,1);

  /* --- Elevation: cool-tinted, never black --- */
  --sh-1: 0 1px 2px rgba(13,30,45,.05),0 2px 8px rgba(13,30,45,.04);
  --sh-2: 0 2px 4px rgba(13,30,45,.06),0 10px 28px rgba(13,30,45,.07);
  --sh-3: 0 4px 10px rgba(13,30,45,.08),0 22px 54px rgba(13,30,45,.11);
  --sh-flame: 0 4px 16px rgba(20,120,212,.26);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* An <svg> with only a viewBox stretches to fill its container. Every icon in
   this theme is viewBox-only, so give them a sane default; components that
   need a different size set it explicitly and win on specificity. */
svg{width:1.05em;height:1.05em;flex:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-weight:600;line-height:1.16;letter-spacing:-.021em;color:var(--ink)}
h1{font-size:var(--h1);font-weight:650;letter-spacing:-.028em}
h2{font-size:var(--h2);font-weight:640;letter-spacing:-.024em}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
p{margin:0 0 1.05em}
a{color:var(--flame-2);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--flame)}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.34em}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:.83em}
hr{border:0;border-top:1px solid var(--line);margin:var(--sec) 0}
blockquote{margin:1.4em 0;padding:0 0 0 22px;border-left:2px solid var(--flame);color:var(--ink-2)}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:2px}
::selection{background:var(--flame);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999}
.skip-link:focus{left:12px;top:12px;background:var(--graphite);color:#fff;padding:10px 16px;border-radius:var(--r)}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .64)}
.section--paper2{background:var(--paper-2)}
.section--dark{background:var(--graphite);color:#DCE6EC;position:relative;isolation:isolate}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#F2F7FA}
.section--dark p{color:#B4C4D0}
.section--dark a{color:var(--flame-3)}
.grid{display:grid;gap:clamp(18px,2.2vw,30px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* minmax(0,1fr) not a bare 1fr — a bare 1fr track refuses to shrink below its
   content and gives the page a sideways scroll on small phones. */
@media (max-width:1040px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- spec-plate typography: the signature of this theme ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--micro);font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--nickel-2);margin:0 0 14px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--flame);flex:none}
.section--dark .eyebrow{color:var(--platinum)}
.section--dark .eyebrow::before{background:var(--flame-3)}
.lede{font-size:var(--lede);color:var(--muted);line-height:1.68;max-width:62ch}
.section--dark .lede{color:#9FB2C0}
.plate-label{
  font-size:var(--micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.sec-head{margin-bottom:clamp(26px,3vw,44px)}
.sec-head--split{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.sec-head h2{margin-bottom:.28em}
.sec-head .lede{margin:0}

/* corner ticks — the data-plate motif, reused on cards and media */
.ticked{position:relative}
.ticked::before,.ticked::after{
  content:'';position:absolute;width:11px;height:11px;pointer-events:none;z-index:2;
  border-color:var(--flame);border-style:solid;opacity:.85;
}
.ticked::before{top:8px;left:8px;border-width:1px 0 0 1px}
.ticked::after{bottom:8px;right:8px;border-width:0 1px 1px 0}

/* ---------- buttons: they hug their text, always. No full-width variant. ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:auto;max-width:100%;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--r);
  font-family:var(--font);font-size:.906rem;font-weight:600;letter-spacing:.005em;
  line-height:1.2;text-align:center;cursor:pointer;text-decoration:none;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--grad-flame);color:#fff;box-shadow:var(--sh-flame)}
.btn--primary:hover{color:#fff;box-shadow:0 6px 22px rgba(20,120,212,.34);filter:saturate(1.08)}
.btn--dark{background:var(--graphite);color:#fff}
.btn--dark:hover{background:var(--slate-2);color:#fff}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--steel);background:var(--card);color:var(--ink)}
.section--dark .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.cta .btn--ghost,.panel--dark .btn--ghost{
  border-color:var(--line-dk-2);color:#EAF1F5;background:transparent;
}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.cta .btn--ghost:hover,.panel--dark .btn--ghost:hover{
  background:rgba(255,255,255,.07);border-color:var(--flame-3);color:#fff;
}
/* Same for the other light-surface tokens used on dark bands. */
.hero .link-arrow,.phero .link-arrow,.cta .link-arrow{color:var(--flame-3)}
.btn--sm{padding:9px 16px;font-size:.845rem}
.btn--lg{padding:15px 30px;font-size:.96rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-start}
/* Left-aligned at every breakpoint. Never stretch, never centre on mobile. */
@media (max-width:640px){
  .btn{width:auto}
  .btn-row{justify-content:flex-start}
}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;color:var(--flame-2)}
.link-arrow svg{width:15px;height:15px;transition:transform var(--t-fast)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ==========================================================================
   HEADER — a machined bar: utility strip, then the main rail
   ========================================================================== */
.util{background:var(--graphite);color:#9FB2C0;font-size:.78rem;border-bottom:1px solid var(--line-dk)}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;flex-wrap:wrap}
.util__l,.util__r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* Every child is an inline row: the global svg{display:block} reset would
   otherwise push each icon onto its own line above its label. */
.util__l > *,.util__r > *{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1}
.util a{color:#B9C9D5;display:inline-flex;align-items:center;gap:7px;font-weight:450}
.util a:hover{color:#fff}
.util svg{width:14px;height:14px;flex:none;opacity:.8}
.util__badge{display:inline-flex;align-items:center;gap:7px;color:var(--flame-tip);font-weight:550;letter-spacing:.02em}
.util__badge svg{opacity:1}
@media (max-width:860px){.util__l .util-hide{display:none}}
@media (max-width:600px){.util__in{min-height:34px;font-size:.73rem}.util__r{display:none}}

.hdr{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t),background var(--t);
}
.hdr.is-stuck{box-shadow:var(--sh-2);background:rgba(255,255,255,.97)}
.hdr__in{display:flex;align-items:center;gap:clamp(10px,1.4vw,24px);min-height:var(--hdr)}
.brand{display:flex;align-items:center;gap:13px;flex:none;margin-right:auto}
/* The supplied lockup already contains the wordmark — image only, no text.
   With the utility bar and the search button gone it can run much larger. */
.brand__logo{height:74px;width:auto;max-width:min(300px,46vw);object-fit:contain;display:block}
@media (max-width:1180px){.brand__logo{height:62px}}
@media (max-width:600px){.brand__logo{height:50px;max-width:58vw}}
.brand__mark{width:46px;height:60px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-size:1.085rem;font-weight:680;letter-spacing:-.022em;color:var(--ink);white-space:nowrap}
.brand__name em{font-style:normal;color:var(--flame-2)}
.brand__sub{font-size:.605rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--nickel-2);margin-top:3px;white-space:nowrap}
@media (max-width:1180px){.brand__mark{width:40px;height:52px}.brand__name{font-size:1rem}}
@media (max-width:600px){.brand__sub{letter-spacing:.14em;font-size:.56rem}}

/* primary nav — reset the element, not just its descendants */
.nav-wrap{min-width:0;flex:1}
.nav{
  margin:0;padding:0;list-style:none;display:flex;align-items:center;
  flex-wrap:nowrap;gap:clamp(1px,.4vw,7px);justify-content:center;
}
.nav li{margin:0;position:relative}
.nav > li > a{
  display:inline-flex;align-items:center;gap:6px;padding:10px clamp(7px,.85vw,13px);
  font-size:clamp(.83rem,.72vw,.898rem);font-weight:520;color:var(--ink-2);border-radius:var(--r);
  white-space:nowrap;                /* one line, always */
  transition:color var(--t-fast),background var(--t-fast);
}
.nav > li > a:hover,.nav > li.current-menu-item > a,.nav > li.current_page_item > a{color:var(--flame-2);background:var(--flame-wash)}
.nav > li.menu-item-has-children > a::after{
  content:'';width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform var(--t-fast);
}
.nav > li.menu-item-has-children:hover > a::after{transform:rotate(225deg) translateY(1px)}
.nav .sub-menu{
  position:absolute;top:calc(100% + 9px);left:-8px;min-width:262px;margin:0;padding:8px;
  list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);z-index:130;
}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu::before{content:'';position:absolute;top:-9px;left:0;right:0;height:9px}
.nav .sub-menu a{
  display:block;padding:9px 13px;border-radius:var(--r);font-size:.872rem;font-weight:480;
  color:var(--ink-2);border-left:2px solid transparent;
}
.nav .sub-menu a:hover{background:var(--paper-2);color:var(--flame-2);border-left-color:var(--flame)}
@media (max-width:1240px){.nav-wrap,.nav{display:none}}

/* header actions */
.hdr__acts{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r);color:var(--ink-2);cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.icon-btn:hover{border-color:var(--flame);color:var(--flame-2);background:var(--flame-wash)}
.icon-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-flame);color:#fff;font-size:.656rem;font-weight:700;
  border-radius:999px;border:2px solid var(--card);line-height:1;
}
.cart-count:empty,.cart-count[data-count="0"]{display:none}
.hdr__cta{display:inline-flex}
@media (max-width:1240px){.hdr__cta{display:none}}
.burger{display:none}
@media (max-width:1240px){.burger{display:inline-flex}}