/* G(P)4 design system v2 (matches agent.alpine-rcic.com v32.2): Libre Franklin headings/figures, Source Sans 3 text,
   IBM Plex Mono codes (self-hosted, SIL OFL); vibrant brand palette; gradient header with accent line. */
@font-face{font-family:'Libre Franklin';src:url(/assets/fonts/LibreFranklin.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/assets/fonts/SourceSans3.ttf) format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/IBMPlexMono-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/IBMPlexMono-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
:root{--gp4-green:#1E7A50;--gp4-header:#2A6B52;--gp4-teal:#0E8A73;--gp4-ink:#10231C}
body,.font-body{font-family:'Source Sans 3',ui-sans-serif,system-ui,sans-serif !important;font-size:1.04em}
h1,h2,h3,h4,.font-display{font-family:'Libre Franklin',ui-sans-serif,system-ui,sans-serif !important;letter-spacing:-0.02em}
.font-mono,code,pre{font-family:'IBM Plex Mono',ui-monospace,monospace}
/* header: brand gradient with accent line, white text */
#site-header{background:linear-gradient(100deg,#2A6B52 0%,#1E7A50 45%,#0E8A73 100%) !important;border-bottom:0 !important;position:sticky}
#site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#34D399,#2DD4BF,#38BDF8)}
#site-header,#site-header a,#site-header span,#site-header button{color:#fff}
#site-header .text-slate-500,#site-header .text-slate-600,#site-header .text-slate-400{color:#C9EBDD !important}
#site-header .text-emerald-500,#site-header .text-emerald-600{color:#6EE7B7 !important}
#site-header nav a:hover{background:rgba(255,255,255,.12)}
#site-header .bg-white,#site-header .bg-slate-50{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.3) !important}
/* primary calls to action: brand gradient + soft glow */
a.bg-emerald-600,button.bg-emerald-600,a.bg-\[\#2A6B52\],button.bg-\[\#2A6B52\],.btn-primary{background-image:linear-gradient(135deg,#1E7A50,#0E8A73) !important;border-color:transparent !important;box-shadow:0 8px 20px -10px rgba(14,138,115,.7)}
/* cards: rounder, soft depth */
.rounded-xl.border,.rounded-2xl.border,.card{border-radius:16px;box-shadow:0 1px 0 rgba(16,35,28,.04),0 10px 28px -20px rgba(16,35,28,.28)}
/* landed-cost bar in the free calculator (same scheme as the agent) */
.gp4-costbar{display:flex;height:30px;border-radius:8px;overflow:hidden;outline:1px solid #BFD6B0;margin-top:12px}
.gp4-costbar>span{display:block;height:100%}
.gp4-seg-goods{background:#1E7A50}.gp4-seg-frt{background:#8FB59B}.gp4-seg-duty{background:#12C27E}.gp4-seg-addl{background:#0E7C86}.gp4-seg-fees{background:#7FA7C9}
.gp4-seg-vat{background:repeating-linear-gradient(135deg,#9DC07E 0 6px,#C9DDB0 6px 12px)}
.gp4-costkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12px;color:#475569}.gp4-costkey i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.gp4-costkey-dark{color:#CBD5E1}.gp4-costkey-dark b{color:#fff;font-weight:600}
.gp4-costkey-dark i.gp4-seg-vat{background:#9DC07E}
/* readable long-form text (guides and service pages) */
.svc-prose{font-size:1.02rem;line-height:1.75;color:#1F2937}
.svc-prose h2{margin:2.2rem 0 .7rem;font-size:1.45rem;line-height:1.25}
.svc-prose h2:first-child{margin-top:0}
.svc-prose p{margin:0 0 1rem}
.svc-prose ul{list-style:disc;padding-left:1.4rem;margin:.4rem 0 1.2rem}
.svc-prose ol{list-style:decimal;padding-left:1.4rem;margin:.4rem 0 1.2rem}
.svc-prose li{margin:.35rem 0}
.svc-prose a{color:#0E7A4F;text-decoration:underline;text-underline-offset:2px}
.svc-prose details{background:#fff}
html.dark .svc-prose{color:#E2E8F0}html.dark .svc-prose a{color:#6EE7B7}
html.dark body #site-header,html.dark body header#site-header{background:linear-gradient(100deg,#0F2A30 0%,#123A3A 60%,#0E4A4A 100%) !important;border-color:transparent !important}
/* site-wide primary button styles -> brand gradient (were cyan/sky) */
.btn-grad,.btn-emerald{background:linear-gradient(135deg,#1E7A50 0%,#0E8A73 100%) !important;color:#fff !important;box-shadow:0 8px 20px -10px rgba(14,138,115,.7)}
.btn-grad:hover,.btn-emerald:hover{background:linear-gradient(135deg,#17653F 0%,#0B7462 100%) !important;box-shadow:0 14px 32px -10px rgba(14,138,115,.6) !important}
/* calls to action inside the green header must stand out from it */
#site-header .btn-grad,#site-header .btn-emerald,#site-header a.bg-emerald-600,#site-header a.bg-emerald-500{background:#10B981 !important;background-image:none !important;color:#fff !important;box-shadow:0 6px 18px -8px rgba(0,0,0,.45) !important}
#site-header .btn-grad:hover,#site-header .btn-emerald:hover{background:#34D399 !important;color:#06281C !important}
/* ---- About page: Alpine Trade Concerns logo in each section ---- */
.section-mark img.atc-section-logo,.atc-section-logo{width:180px !important;height:180px !important;border-radius:0 !important;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(16,35,28,.12))}
@media (max-width:640px){.section-mark img.atc-section-logo,.atc-section-logo{width:132px !important;height:132px !important}}
/* ---- larger header brand and tab list (all pages) ---- */
@media (min-width:768px){
  #site-header > div:first-child > div:first-child{height:100px !important}
  #site-header a[aria-label^="Green G(P)"] > img{width:84px !important;height:84px !important}
  #site-header a[aria-label^="Green G(P)"] > span{font-size:1.65rem !important;line-height:1.05 !important}
  #site-header a[aria-label^="Green G(P)"] > span > span:last-child{font-size:1.2rem !important}
}
#site-header .hdr-tab{font-size:15.5px !important;padding:.55rem 1.05rem !important;gap:.6rem !important}
#site-header .hdr-tab img{width:34px !important;height:34px !important}
/* Alpine Trade Concerns logo paired with RCIC / HHO in section marks: same size as its partner, ring not cropped */
.section-mark img.atc-pair-logo{border-radius:0 !important;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(16,35,28,.12))}
/* ---- v32.3: larger header tabs (About, G(P)4, Decarbonization, HHO, Services, FAQs) ---- */
#site-header .hdr-tab{font-size:17px !important;padding:.7rem 1.25rem !important;gap:.7rem !important;font-weight:600 !important}
#site-header .hdr-tab img{width:42px !important;height:42px !important}
#site-header .hdr-tab svg{width:20px !important;height:20px !important}
@media (max-width:767px){#site-header .hdr-tab{font-size:15px !important;padding:.55rem .9rem !important}#site-header .hdr-tab img{width:34px !important;height:34px !important}}
/* sections land below the sticky header */
section[id]{scroll-margin-top:190px}
/* ---- v32.3: section navigator ---- */
.gp4-secnav{position:fixed;left:18px;right:auto;top:50%;transform:translateY(-50%);z-index:40;width:200px;padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid #CFDDC2;box-shadow:0 10px 30px -18px rgba(16,35,28,.45);backdrop-filter:blur(6px)}
.gp4-secnav-title{margin:0 6px 6px;font:700 11px/1 'Libre Franklin',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4A5750}
.gp4-secnav ol{list-style:none;margin:0;padding:0;counter-reset:s}
.gp4-secnav li a{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;font:500 13.5px/1.3 'Source Sans 3',sans-serif;color:#334155;text-decoration:none;border-left:3px solid transparent}
.gp4-secnav li a::before{counter-increment:s;content:counter(s);flex:none;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font:700 10.5px 'Libre Franklin',sans-serif;background:#EEF3E7;color:#4A5750;margin-top:1px}
.gp4-secnav li a:hover{background:#F2F6EA;color:#10231C}
.gp4-secnav li a.active{background:#E2F3E6;color:#16653F;font-weight:700;border-left-color:#1E7A50}
.gp4-secnav li a.active::before{background:linear-gradient(135deg,#1E7A50,#0E8A73);color:#fff}
.gp4-secnav-toggle{display:none}
html.dark .gp4-secnav{background:rgba(15,34,41,.92);border-color:rgba(255,255,255,.12)}
html.dark .gp4-secnav li a{color:#CBD5E1}html.dark .gp4-secnav li a.active{background:rgba(16,185,129,.18);color:#6EE7B7}
/* 1280-1759 px: slim numbered rail in the page margin; hover or keyboard focus expands it to show the labels */
@media (min-width:1280px) and (max-width:1759px){
  .gp4-secnav{width:46px;padding:10px 6px;left:10px;right:auto;transition:width .2s ease}
  .gp4-secnav .gp4-secnav-title{display:none}
  .gp4-secnav li a{font-size:0;padding:5px;justify-content:center;border-left:0}
  .gp4-secnav li a::before{width:22px;height:22px;font-size:11px;margin:0}
  .gp4-secnav:hover,.gp4-secnav:focus-within{width:220px;padding:12px 10px}
  .gp4-secnav:hover .gp4-secnav-title,.gp4-secnav:focus-within .gp4-secnav-title{display:block}
  .gp4-secnav:hover li a,.gp4-secnav:focus-within li a{font-size:13.5px;justify-content:flex-start;padding:6px 8px;border-left:3px solid transparent}
  .gp4-secnav:hover li a.active,.gp4-secnav:focus-within li a.active{border-left-color:#1E7A50}
}
@media (max-width:1279px){
  .gp4-secnav{top:auto;bottom:84px;left:14px;right:auto;transform:none;display:none}
  .gp4-secnav.open{display:block}
  .gp4-secnav-toggle{display:inline-flex;position:fixed;left:14px;bottom:24px;z-index:41;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;border:0;font:700 13px 'Libre Franklin',sans-serif;color:#fff;background:linear-gradient(135deg,#1E7A50,#0E8A73);box-shadow:0 10px 24px -10px rgba(14,138,115,.8);cursor:pointer}
}
/* ---- v32.3: LCIE agent bar while the calculator is on screen ---- */
.gp4-agent-cta{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:45;display:flex;align-items:center;gap:14px;max-width:min(980px,94vw);padding:12px 14px 12px 18px;border-radius:16px;background:linear-gradient(100deg,#10231C,#164A39);color:#E7F3EC;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transition:transform .35s ease,opacity .35s ease;opacity:0}
.gp4-agent-cta.show{transform:translate(-50%,0);opacity:1}
.gp4-agent-cta-text{font:400 14.5px/1.35 'Source Sans 3',sans-serif}.gp4-agent-cta-text b{color:#fff;font-weight:700}
.gp4-agent-cta-btn{flex:none;padding:10px 16px;border-radius:10px;font:700 14px 'Libre Franklin',sans-serif;color:#06281C;background:linear-gradient(135deg,#34D399,#2DD4BF);text-decoration:none;white-space:nowrap}
.gp4-agent-cta-btn:hover{filter:brightness(1.08)}
.gp4-agent-cta-link{flex:none;color:#A7F3D0;font:600 13px 'Source Sans 3',sans-serif;text-decoration:underline}
@media (max-width:767px){.gp4-agent-cta{bottom:24px;padding:0;gap:0;border-radius:999px;background:none;box-shadow:none;max-width:calc(100vw - 230px)}.gp4-agent-cta-btn{box-shadow:0 10px 24px -10px rgba(14,138,115,.8)}.gp4-agent-cta-text,.gp4-agent-cta-link{display:none}.gp4-agent-cta-btn{padding:10px 14px;font-size:13px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (prefers-reduced-motion:reduce){.gp4-agent-cta{transition:none}}
/* CTA card under "Unlock my free report" */
.gp4-agent-card{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid #9FD9BC;background:linear-gradient(135deg,#ECFDF5,#E0F2EF);color:#10231C}
.gp4-agent-card b{font:700 15px 'Libre Franklin',sans-serif}.gp4-agent-card p{margin:4px 0 10px;font-size:14px;color:#334155}
.gp4-agent-card a{display:inline-block;padding:9px 14px;border-radius:10px;font:700 14px 'Libre Franklin',sans-serif;color:#fff;background:linear-gradient(135deg,#1E7A50,#0E8A73);text-decoration:none}
.gp4-cta-short{display:none}@media (max-width:767px){.gp4-cta-long{display:none}.gp4-cta-short{display:inline}}

/* v33: touch-friendly calculator sliders */
input[type=range]{-webkit-appearance:none;appearance:none;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;min-width:26px;min-height:26px;border-radius:9999px;cursor:pointer}
input[type=range]::-moz-range-thumb{min-width:26px;min-height:26px;border:0;border-radius:9999px;cursor:pointer}
@media (pointer:coarse){input[type=range]{height:32px}}

/* v2.4.1 — active header tab: one site-wide rule so no page can render white text on a white pill.
   Overrides the page-level .hdr-on-h / .hdr-on-f rules, which the #site-header { color:#fff } rule was beating. */
#site-header nav a.hdr-tab[aria-current="true"],
#site-header nav a.hdr-tab.hdr-on-h,
#site-header nav a.hdr-tab.hdr-on-f{background:rgba(255,255,255,.18) !important;color:#FFFFFF !important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75) !important}
html.dark #site-header nav a.hdr-tab[aria-current="true"],
html.dark #site-header nav a.hdr-tab.hdr-on-h,
html.dark #site-header nav a.hdr-tab.hdr-on-f{background:rgba(255,255,255,.14) !important;color:#FFFFFF !important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6) !important}