/* Generated from the approved EMF Protection designs. Edit the source designs, then rerun build/split_css.py. */
/* ---------------------------------------------------------------------------
   Figtree, self-hosted.

   The approved designs pulled Figtree from Google Fonts, which costs a
   render-blocking stylesheet plus a connection to a second origin before any
   text can paint. Serving it from the theme removes both.

   These are the variable faces (300-900), so the six weights the designs use
   come from one 20KB file for latin rather than six static files. Downloaded
   from Google Fonts; Figtree is SIL Open Font License 1.1.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--ink: #0f1e2e; --ink-mid: #2a3f52; --ink-light: #64788a; --action: #387780; --action-dark: #2d5f66; --action-pale: #e1ebec; --warm: #faf8f5; --white: #ffffff; --surface: #f4f4f4; --border: #e8e8e8; --amber: #c47b1e; --amber-pale: #fef3e2; --success: #1a8f5a; --font: 'Figtree', sans-serif; --r: 8px; --r-lg: 16px; --r-xl: 24px; --sh: 0 1px 4px rgba(15,30,46,0.07); --sh-md: 0 4px 20px rgba(15,30,46,0.10); --sh-lg: 0 12px 48px rgba(15,30,46,0.14);}
*, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0;}
html{font-size: 16px; scroll-behavior: smooth;}
body{font-family: var(--font); color: var(--ink); background: var(--warm); line-height: 1.6; -webkit-font-smoothing: antialiased;}
img{max-width: 100%; height: auto; display: block;}
a{color: inherit; text-decoration: none;}
button{font-family: var(--font); cursor: pointer; border: none; background: none;}
.ann{background: var(--ink); color: rgba(255,255,255,0.82); font-size: 0.8125rem; text-align: center; padding: 0.625rem 1rem; letter-spacing: 0.01em;}
.ann strong{color: var(--white); font-weight: 700;}
.ann-link{color: var(--action); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;}
.nav{position: sticky; top: 0; z-index: 200; background: var(--white); border-bottom: 1px solid var(--border);}
.nav-inner{max-width: 1340px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: 68px;}
.nav-logo{display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0;}
.nav-logo-mark{width: 36px; height: 36px; background: var(--ink); border-radius: var(--r); display: flex; align-items: center; justify-content: center;}
.nav-logo-text{font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;}
.nav-search{flex: 1; max-width: 360px; margin: 0 auto; position: relative;}
.nav-search-input{width: 100%; padding: 0.5625rem 1rem 0.5625rem 2.5rem; border-radius: 100px; border: 1.5px solid var(--border); background: var(--surface); font-family: var(--font); font-size: 0.875rem; color: var(--ink); outline: none; transition: border-color 150ms, background 150ms;}
.nav-search-input:focus{border-color: var(--action); background: var(--white);}
.nav-search-icon{position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--ink-light);}
.nav-links{display: flex; align-items: center; list-style: none;}
.nav-links a{font-size: 0.875rem; font-weight: 500; color: var(--ink-mid); padding: 0.5rem 0.75rem; border-radius: var(--r); transition: color 150ms, background 150ms; white-space: nowrap;}
.nav-links a:hover{color: var(--ink); background: var(--surface);}
.nav-actions{display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;}
.nav-icon{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); color: var(--ink-mid); transition: all 150ms; position: relative;}
.nav-icon:hover{color: var(--ink); background: var(--surface);}
.cart-dot{position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; background: var(--action); color: white; border-radius: 50%; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center;}
.nav-cta{background: var(--action); color: var(--white); font-size: 0.875rem; font-weight: 700; padding: 0.5625rem 1.25rem; border-radius: var(--r); transition: background 150ms;}
.nav-cta:hover{background: var(--action-dark);}
.page-hero{background: var(--ink); padding: 3rem 1.5rem 2.75rem;}
.page-hero-inner{max-width: 1100px; margin: 0 auto;}
.bc{display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.45); margin-bottom: 1rem;}
.bc a{color: rgba(255,255,255,0.7);}
.page-title{font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: var(--white); letter-spacing: -0.03em; margin-bottom: 0.75rem;}
.page-subtitle{font-size: 1.0625rem; color: rgba(255,255,255,0.62); max-width: 60ch; line-height: 1.65;}
.section{max-width: 1100px; margin: 0 auto; padding: 4.5rem 1.5rem;}
.section-narrow{max-width: 760px; margin: 0 auto; padding: 4.5rem 1.5rem;}
.eyebrow{font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 0.75rem;}
.footer-inner{max-width: 1340px; margin: 0 auto;}
.footer-grid{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem;}
.footer-logo{display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;}
.footer-logo-mark{width: 30px; height: 30px; background: rgba(255,255,255,0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center;}
.footer-logo-name{font-size: 0.9375rem; font-weight: 800; color: rgba(255,255,255,0.85);}
.footer-desc{font-size: 0.875rem; color: rgba(255,255,255,0.35); line-height: 1.65; max-width: 28ch; margin-bottom: 1.5rem;}
.footer-certs{display: flex; gap: 0.5rem; flex-wrap: wrap;}
.footer-col-h{font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-bottom: 1.125rem;}
.footer-links{list-style: none; display: flex; flex-direction: column; gap: 0.5rem;}
.footer-links a{font-size: 0.875rem; color: rgba(255,255,255,0.35); transition: color 150ms;}
.footer-links a:hover{color: rgba(255,255,255,0.75);}
.footer-bottom{border-top: 1px solid rgba(255,255,255,0.06); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: rgba(255,255,255,0.25);}
.nav-mega-item{position:relative}
.nav-mega-trigger{display:inline-flex;align-items:center;gap:0.375rem}
.nav-mega-chevron{transition:transform 200ms}
.mega-panel{position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%) translateY(-6px);width:680px;max-width:90vw;background:var(--white);border:1px solid var(--border);border-top:3px solid var(--action);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-lg);padding:1.75rem;opacity:0;visibility:hidden;transition:opacity 180ms ease,transform 180ms ease;z-index:250}
.nav-mega-item:hover .mega-panel,.nav-mega-item:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-mega-item:hover .nav-mega-chevron,.nav-mega-item:focus-within .nav-mega-chevron{transform:rotate(180deg)}
.mega-panel-grid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:2rem}
.mega-col-title{font-size:0.6875rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-light);margin-bottom:0.875rem}
.mega-link-list{display:flex;flex-direction:column;gap:0.625rem}
.mega-link-list a{font-size:0.875rem;color:var(--ink-mid);transition:color 150ms}
.mega-link-list a:hover{color:var(--action)}
.mega-promo{background:var(--ink);border-radius:var(--r-lg);padding:1.25rem;display:flex;flex-direction:column;gap:0.5rem}
.mega-promo-tag{font-size:0.6875rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--action)}
.mega-promo-title{font-size:0.9375rem;font-weight:700;color:var(--white)}
.mega-promo-desc{font-size:0.8125rem;color:rgba(255,255,255,0.6);line-height:1.5}
.mega-promo-cta{margin-top:0.5rem;font-size:0.8125rem;font-weight:700;color:var(--white);display:inline-flex;align-items:center;gap:0.375rem}
.mega-trust{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:0.8125rem;color:var(--ink-light);text-align:center}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.nav-links,.nav-search{display:none}}
@media(max-width:640px){.section,.section-narrow{padding:3rem 1.25rem}
.footer-grid{grid-template-columns:1fr}}
.page-hero{background: var(--ink); padding: 3rem 1.5rem;}
.bc{display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.45); margin-bottom: 1.75rem;}
.section{max-width: 1100px; margin: 0 auto; padding: 3.5rem 1.5rem;}
.section-h{font-size: 1.375rem; font-weight: 800; color: var(--ink); margin-bottom: 1.5rem; letter-spacing: -0.02em;}
.post-card{background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); transition: box-shadow 150ms, transform 150ms;}
.post-card:hover{box-shadow: var(--sh-md); transform: translateY(-2px);}
.post-card-img{aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;}
.post-card-body{padding: 1.5rem;}
.post-cat{font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action); margin-bottom: 0.625rem;}
.post-card-title{font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 0.625rem;}
.post-card-excerpt{font-size: 0.875rem; color: var(--ink-mid); line-height: 1.6; margin-bottom: 1rem;}
.post-meta{font-size: 0.8125rem; color: var(--ink-light);}
@media(max-width:640px){.section{padding:2.5rem 1.25rem}
.footer-grid{grid-template-columns:1fr}}
img, svg{max-width: 100%;}
ul, ol{list-style: none;}
table{border-collapse: collapse; width: 100%;}
.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;}
.skip-link{position: absolute; left: -9999px; top: 0; background: var(--action); color: var(--white); font-size: 0.9375rem; font-weight: 700; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0; z-index: 1000;}
.skip-link:focus{left: 0;}
.nav-links{display: flex; align-items: center;}
.nav-links a:hover, .nav-links a:focus-visible{color: var(--ink); background: var(--surface);}
.nav-links a[aria-current="page"]{color: var(--action-dark); font-weight: 700;}
.bc-wrap{background: var(--white); border-bottom: 1px solid var(--border); padding: 0.75rem 1.5rem;}
.bc-list{max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-light); flex-wrap: wrap;}
.bc-list li{display: flex; align-items: center; gap: 0.5rem;}
.bc-list li:not(:last-child)::after{content: '›'; color: var(--ink-light);}
.bc-list a{color: var(--ink-mid);}
.bc-list a:hover{color: var(--action);}
.bc-list [aria-current="page"]{color: var(--ink); font-weight: 600; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.post-avatar{width: 44px; height: 44px; border-radius: 50%; background: var(--action-pale); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 800; flex-shrink: 0;}
.tag-list{display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0;}
.tag-list a{font-size: 0.8125rem; font-weight: 600; color: var(--ink-mid); background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 0.375rem 0.875rem;}
.tag-list a:hover{border-color: var(--action); color: var(--action);}
.post-card-meta{font-size: 0.8125rem; color: var(--ink-light);}
.footer-links{display: flex; flex-direction: column; gap: 0.5rem;}
.footer-links a:hover, .footer-links a:focus-visible{color: rgba(255,255,255,0.75);}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
.page-hero-inner{max-width: 1340px; margin: 0 auto;}
.section{max-width: 1340px; margin: 0 auto; padding: 3.5rem 1.5rem;}
.post-cat{font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action); margin-bottom: 0.75rem;}
.post-meta{display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--ink-light);}
.post-meta-author{display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink-mid);}
.post-avatar{width: 26px; height: 26px; border-radius: 50%; background: var(--action-pale); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800;}
.blog-filters{display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 2.5rem;}
.blog-chip{padding: 0.5rem 1.125rem; border-radius: 100px; border: 1.5px solid var(--border); font-size: 0.875rem; font-weight: 600; color: var(--ink-mid); background: var(--white);}
.blog-chip.active{background: var(--action); border-color: var(--action); color: var(--white);}
.blog-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-bottom: 3rem;}
.pagination{display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr}
.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.section{padding:2.5rem 1.25rem}
.blog-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}}
:root{--ink:#0f1e2e;--ink-mid:#2a3f52;--ink-light:#64788a;--brand:#387780;--action:#387780;--action-dark:#2d5f66;--action-pale:#e1ebec;--warm:#faf8f5;--white:#ffffff;--surface:#f4f4f4;--border:#e8e8e8;--amber:#c47b1e;--amber-pale:#fef3e2;--success:#1a8f5a;--font:'Figtree',sans-serif;--r:8px;--r-lg:16px;--r-xl:24px;--sh:0 1px 4px rgba(15,30,46,0.07);--sh-md:0 4px 20px rgba(15,30,46,0.10);--sh-lg:0 12px 48px rgba(15,30,46,0.14)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:var(--font);color:var(--ink);background:var(--warm);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
.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}
.ann{background:var(--ink);color:rgba(255,255,255,0.82);font-size:0.8125rem;text-align:center;padding:0.625rem 1rem;letter-spacing:0.01em}
.ann strong{color:var(--white);font-weight:700}
.ann-link{color:var(--action);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.nav{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1340px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;height:68px}
.nav-logo{display:flex;align-items:center;gap:0.625rem;flex-shrink:0}
.nav-logo-mark{width:36px;height:36px;background:var(--ink);border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.nav-logo-text{font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em}
.nav-search{flex:1;max-width:360px;margin:0 auto;position:relative}
.nav-search-input{width:100%;padding:0.5625rem 1rem 0.5625rem 2.5rem;border-radius:100px;border:1.5px solid var(--border);background:var(--surface);font-family:var(--font);font-size:0.875rem;color:var(--ink);outline:none;transition:border-color 150ms,background 150ms}
.nav-search-input:focus{border-color:var(--action);background:var(--white)}
.nav-search-icon{position:absolute;left:0.875rem;top:50%;transform:translateY(-50%);color:var(--ink-light)}
.nav-links{display:flex;align-items:center;list-style:none}
.nav-links a{font-size:0.875rem;font-weight:500;color:var(--ink-mid);padding:0.5rem 0.75rem;border-radius:var(--r);transition:color 150ms,background 150ms;white-space:nowrap}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-actions{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
.nav-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);color:var(--ink-mid);transition:all 150ms;position:relative}
.nav-icon:hover{color:var(--ink);background:var(--surface)}
.cart-dot{position:absolute;top:5px;right:5px;width:17px;height:17px;background:var(--action);color:white;border-radius:50%;font-size:0.625rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav-cta{background:var(--action);color:var(--white);font-size:0.875rem;font-weight:700;padding:0.5625rem 1.25rem;border-radius:var(--r);transition:background 150ms;white-space:nowrap}
.nav-cta:hover{background:var(--action-dark)}
.bc{background:var(--white);border-bottom:1px solid var(--border);padding:0.75rem 1.5rem}
.bc-inner{max-width:1340px;margin:0 auto;display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--ink-light)}
.bc-inner a{color:var(--ink-mid);transition:color 150ms}
.bc-inner a:hover{color:var(--action)}
.pagination{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:2.5rem}
.btn-view{font-size:0.8125rem;font-weight:700;background:var(--action);color:var(--white);padding:0.5625rem 1rem;border-radius:var(--r);transition:background 150ms}
.btn-view:hover{background:var(--action-dark)}
.section-eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--action);margin-bottom:0.5rem}
.section-h{font-size:clamp(1.75rem,3vw,2.375rem);font-weight:800;color:var(--ink);letter-spacing:-0.025em;margin-bottom:2rem}
.btn-bundle{display:block;width:100%;padding:1rem;background:var(--action);color:var(--white);font-family:var(--font);font-size:1rem;font-weight:700;border-radius:var(--r);border:none;cursor:pointer;text-align:center;transition:background 150ms}
.btn-bundle:hover{background:var(--action-dark)}
.btn-expert{display:inline-flex;align-items:center;gap:0.5rem;background:var(--white);color:var(--action-dark);font-size:0.9375rem;font-weight:700;padding:0.875rem 1.75rem;border-radius:var(--r);white-space:nowrap;transition:background 150ms}
.btn-expert:hover{background:var(--action-pale)}
.footer-inner{max-width:1340px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3.5rem}
.footer-logo{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem}
.footer-logo-mark{width:30px;height:30px;background:rgba(255,255,255,0.1);border-radius:6px;display:flex;align-items:center;justify-content:center}
.footer-logo-name{font-size:0.9375rem;font-weight:800;color:rgba(255,255,255,0.85)}
.footer-desc{font-size:0.875rem;color:rgba(255,255,255,0.35);line-height:1.65;max-width:28ch;margin-bottom:1.5rem}
.footer-certs{display:flex;gap:0.5rem;flex-wrap:wrap}
.footer-col-h{font-size:0.6875rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.38);margin-bottom:1.125rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{font-size:0.875rem;color:rgba(255,255,255,0.35);transition:color 150ms}
.footer-links a:hover{color:rgba(255,255,255,0.75)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:rgba(255,255,255,0.25)}
@media(max-width:768px){.nav-links,.nav-search{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}
@media(max-width:640px){.section{padding:3rem 1.25rem}
.footer-grid{grid-template-columns:1fr}}
.page-hero{background: var(--ink); padding: 2.75rem 1.5rem 2.25rem;}
.page-title{font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; color: var(--white); letter-spacing: -0.03em; margin-bottom: 0.5rem;}
.page-subtitle{font-size: 0.9375rem; color: rgba(255,255,255,0.5);}
.page-hero{background: var(--ink); padding: 3.5rem 1.5rem 3rem; position: relative; overflow: hidden;}
.page-hero::after{content: ''; position: absolute; top: 0; right: 0; width: 45%; height: 100%; background: linear-gradient(to left, rgba(56,119,128,0.08) 0%, transparent 100%); pointer-events: none;}
.page-hero-inner{max-width: 1340px; margin: 0 auto; position: relative; z-index: 1;}
.page-title{font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: var(--white); letter-spacing: -0.03em; margin-bottom: 0.75rem; max-width: 32ch;}
.page-subtitle{font-size: 1.0625rem; color: rgba(255,255,255,0.62); max-width: 62ch; line-height: 1.65; margin-bottom: 2rem;}
.section-eyebrow{font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); margin-bottom: 0.5rem;}
.section-h{font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 0.5rem;}
.section-sub{font-size: 0.9375rem; color: var(--ink-mid); max-width: 65ch; margin-bottom: 2rem;}
.post-avatar{width: 30px; height: 30px; border-radius: 50%; background: rgba(56,119,128,0.25); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;}
.btn-deep{display: inline-flex; align-items: center; gap: 0.5rem; background: var(--action); color: var(--white); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.75rem; border-radius: var(--r); transition: background 150ms;}
.btn-deep:hover{background: var(--action-dark);}
.btn-cta-white{display: inline-flex; align-items: center; gap: 0.5rem; background: var(--white); color: var(--action-dark); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.75rem; border-radius: var(--r); transition: background 150ms;}
.btn-cta-white:hover{background: var(--action-pale);}
:root{--ink: #0f1e2e; --ink-mid: #2a3f52; --ink-light: #64788a; --brand: #387780; --action: #387780; --action-dark: #2d5f66; --action-pale: #e1ebec; --warm: #faf8f5; --white: #ffffff; --surface: #f4f4f4; --border: #e8e8e8; --amber: #c47b1e; --amber-pale: #fef3e2; --success: #1a8f5a; --font: 'Figtree', sans-serif; --r: 8px; --r-lg: 16px; --r-xl: 24px; --sh: 0 1px 4px rgba(15,30,46,0.07); --sh-md: 0 4px 20px rgba(15,30,46,0.10); --sh-lg: 0 12px 48px rgba(15,30,46,0.14);}
.btn-hero-primary{display: inline-flex; align-items: center; gap: 0.5rem; background: var(--action); color: var(--white); font-size: 1rem; font-weight: 700; padding: 1rem 2rem; border-radius: var(--r); transition: background 150ms, transform 100ms;}
.btn-hero-primary:hover{background: var(--action-dark);}
.btn-hero-primary:active{transform: scale(0.97);}
.btn-hero-ghost{display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.75); font-size: 0.9375rem; font-weight: 600; padding: 1rem 1.5rem; border-radius: var(--r); border: 1.5px solid rgba(255,255,255,0.18); transition: all 150ms;}
.btn-hero-ghost:hover{color: var(--white); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06);}
.usp-strip{background: var(--action);}
.usp-inner{max-width: 1340px; margin: 0 auto; display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;}
.usp-item{display: flex; align-items: center; gap: 0.625rem; color: var(--white); font-size: 0.875rem; font-weight: 600; padding: 1rem 1.75rem; border-right: 1px solid rgba(255,255,255,0.18);}
.usp-item:last-child{border-right: none;}
.usp-icon{opacity: 0.85; flex-shrink: 0;}
.section{padding: 6rem 1.5rem;}
.section-inner{max-width: 1340px; margin: 0 auto;}
.eyebrow{font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); margin-bottom: 0.625rem;}
.section-title{font-size: clamp(2rem, 3.5vw, 2.875rem); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance;}
.section-desc{font-size: 1rem; color: var(--ink-light); line-height: 1.7; max-width: 58ch; margin-top: 0.75rem;}
.btn-view{font-size: 0.8125rem; font-weight: 700; background: var(--action); color: var(--white); padding: 0.5625rem 1rem; border-radius: var(--r); transition: background 150ms;}
.btn-view:hover{background: var(--action-dark);}
@media(max-width:640px){.section{padding:4rem 1.25rem}
.usp-inner{flex-direction:column}
.usp-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.18);justify-content:center}
.usp-item:last-child{border-bottom:none}
.btn-hero-primary,.btn-hero-ghost{width:100%;justify-content:center}
.footer-grid{grid-template-columns:1fr}}
@media (max-width:900px){:root{--ink: #0f1e2e; --ink-mid: #2a3f52; --ink-light: #64788a; --action: #387780; --action-dark: #2d5f66; --action-pale: #e1ebec; --warm: #faf8f5; --white: #ffffff; --surface: #f4f4f4; --border: #e8e8e8; --amber: #c47b1e; --amber-pale: #fef3e2; --success: #1a8f5a; --footer-bg: #070f18; --font: 'Figtree', sans-serif; --r: 8px; --r-lg: 16px; --r-xl: 24px; --sh: 0 1px 4px rgba(15,30,46,0.07); --sh-md: 0 4px 20px rgba(15,30,46,0.10); --sh-lg: 0 12px 48px rgba(15,30,46,0.14);}}
@media (max-width:900px){*, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0;}}
@media (max-width:900px){html{font-size: 16px; scroll-behavior: smooth;}}
@media (max-width:900px){body{font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;}}
@media (max-width:900px){a{color: inherit; text-decoration: none;}}
@media (max-width:900px){button{font-family: var(--font); cursor: pointer; border: none; background: none;}}
@media (max-width:900px){.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;}}
@media (max-width:900px){img{max-width: 100%; height: auto; display: block;}}
@media (max-width:1150px){.mob-overlay{position: fixed; inset: 0; background: rgba(15,30,46,0.55); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 300ms ease; backdrop-filter: blur(2px);}}
@media (max-width:1150px){.mob-overlay.open{opacity: 1; pointer-events: auto;}}
@media (max-width:1150px){.mob-drawer{position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 340px); background: var(--white); z-index: 500; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; box-shadow: var(--sh-lg);}}
@media (max-width:1150px){.mob-drawer.open{transform: translateX(0);}}
@media (max-width:1150px){.mob-drawer-head{display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.125rem 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;}}
@media (max-width:1150px){.mob-drawer-logo{display: flex; align-items: center; gap: 0.5rem;}}
@media (max-width:1150px){.mob-drawer-logo-mark{width: 30px; height: 30px; background: var(--ink); border-radius: 6px; display: flex; align-items: center; justify-content: center;}}
@media (max-width:1150px){.mob-drawer-logo-text{font-size: 0.9375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;}}
@media (max-width:1150px){.mob-drawer-logo-sub{font-size: 0.625rem; font-weight: 600; color: var(--ink-light);}}
@media (max-width:1150px){.mob-close-btn{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); color: var(--ink-light); -webkit-tap-highlight-color: transparent;}}
@media (max-width:1150px){.mob-close-btn:active{background: var(--surface);}}
@media (max-width:1150px){.mob-drawer-search{padding: 1rem 1.25rem; border-bottom: 1px solid var(--surface); flex-shrink: 0;}}
@media (max-width:1150px){.mob-search-wrap{position: relative;}}
@media (max-width:1150px){.mob-search-icon{position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--ink-light); pointer-events: none;}}
@media (max-width:1150px){.mob-search-input{width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 1.5px solid var(--border); border-radius: 100px; background: var(--surface); font-family: var(--font); font-size: 0.9375rem; color: var(--ink); outline: none;}}
@media (max-width:1150px){.mob-search-input:focus{border-color: var(--action); background: var(--white);}}
@media (max-width:1150px){.mob-drawer-body{flex: 1; padding: 1.25rem; overflow-y: auto;}}
@media (max-width:1150px){.mob-drawer-section-heading{font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 0.875rem; margin-top: 0.25rem;}}
@media (max-width:1150px){.mob-cat-tiles{display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 1.5rem;}}
@media (max-width:1150px){.mob-cat-tile{border-radius: var(--r-lg); padding: 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; min-height: 88px; -webkit-tap-highlight-color: transparent;}}
@media (max-width:1150px){.mob-cat-tile:active{opacity: 0.88;}}
@media (max-width:1150px){.mob-cat-tile-1{background: linear-gradient(160deg, #0d2035 0%, #1a3a52 100%);}}
@media (max-width:1150px){.mob-cat-tile-2{background: linear-gradient(160deg, #1a3040 0%, #2a5060 100%);}}
@media (max-width:1150px){.mob-cat-tile-3{background: linear-gradient(160deg, #162838 0%, #1e4050 100%);}}
@media (max-width:1150px){.mob-cat-tile-4{background: linear-gradient(160deg, #0f2030 0%, #24404e 100%);}}
@media (max-width:1150px){.mob-cat-tile-icon{color: rgba(255,255,255,0.9); flex-shrink: 0;}}
@media (max-width:1150px){.mob-cat-tile-name{font-size: 0.8125rem; font-weight: 700; color: var(--white); line-height: 1.2;}}
@media (max-width:1150px){.mob-cat-tile-meta{font-size: 0.6875rem; color: rgba(255,255,255,0.65);}}
@media (max-width:1150px){.mob-nav-links{display: flex; flex-direction: column; margin-bottom: 1.5rem;}}
@media (max-width:1150px){.mob-nav-link{display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; border-bottom: 1px solid var(--surface); font-size: 0.9375rem; font-weight: 500; color: var(--ink-mid); -webkit-tap-highlight-color: transparent;}}
@media (max-width:1150px){.mob-nav-link:first-child{border-top: 1px solid var(--surface);}}
@media (max-width:1150px){.mob-nav-link:active{color: var(--action);}}
@media (max-width:1150px){.mob-drawer-cta{display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.25rem; background: var(--action); color: var(--white); font-size: 0.9375rem; font-weight: 700; border-radius: var(--r-lg); margin-bottom: 1.25rem; -webkit-tap-highlight-color: transparent;}}
@media (max-width:1150px){.mob-drawer-cta:active{background: var(--action-dark);}}
@media (max-width:1150px){.mob-drawer-trust{border-top: 1px solid var(--surface); padding-top: 1.125rem; display: flex; flex-direction: column; gap: 0.625rem;}}
@media (max-width:1150px){.mob-trust-item{display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--ink-mid); font-weight: 500;}}
@media (max-width:1150px){.mob-trust-icon{width: 28px; height: 28px; background: var(--action-pale); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--action); flex-shrink: 0;}}
@media (max-width:900px){.ann-bar{background: var(--ink); color: rgba(255,255,255,0.82); font-size: 0.75rem; font-weight: 500; text-align: center; padding: 0.5rem 1rem; line-height: 1.4;}}
@media (max-width:900px){.ann-bar strong{color: var(--white); font-weight: 700;}}
@media (max-width:1150px){.mob-header{position: sticky; top: 0; z-index: 300; height: 60px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem;}}
@media (max-width:1150px){.mob-logo{display: flex; align-items: center; gap: 0.5rem; position: absolute; left: 50%; transform: translateX(-50%);}}
@media (max-width:1150px){.mob-logo-mark{width: 34px; height: 34px; background: var(--ink); border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}}
@media (max-width:1150px){.mob-logo-text{font-size: 0.9375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;}}
@media (max-width:1150px){.mob-logo-sub{font-size: 0.625rem; font-weight: 600; color: var(--ink-light);}}
@media (max-width:1150px){.mob-icon-btn{width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); color: var(--ink-mid); -webkit-tap-highlight-color: transparent; position: relative;}}
@media (max-width:1150px){.mob-icon-btn:active{background: var(--surface);}}
@media (max-width:1150px){.mob-header-right{display: flex; align-items: center; gap: 0.125rem;}}
@media (max-width:900px){.cart-badge{position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; background: var(--action); color: var(--white); border-radius: 50%; font-size: 0.5625rem; font-weight: 700; display: flex; align-items: center; justify-content: center;}}
@media (max-width:900px){.bc-bar{background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.625rem 1.25rem;}}
@media (max-width:900px){.bc-inner{display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--ink-light);}}
@media (max-width:900px){.bc-inner a{color: var(--ink-mid);}}
@media (max-width:900px){.bc-sep{color: #d0d0d0; font-size: 0.625rem;}}
@media (max-width:900px){.btn-add{font-size: 0.75rem; font-weight: 700; background: var(--action); color: var(--white); padding: 0.4375rem 0.75rem; border-radius: var(--r); -webkit-tap-highlight-color: transparent; flex-shrink: 0;}}
@media (max-width:900px){.btn-add:active{background: var(--action-dark);}}
@media (max-width:900px){.footer-brand{margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08);}}
@media (max-width:900px){.footer-logo{display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem;}}
@media (max-width:900px){.footer-logo-mark{width: 30px; height: 30px; background: rgba(255,255,255,0.1); border-radius: var(--r); display: flex; align-items: center; justify-content: center;}}
@media (max-width:900px){.footer-logo-text{font-size: 0.9375rem; font-weight: 800; color: rgba(255,255,255,0.85);}}
@media (max-width:900px){.footer-desc{font-size: 0.8125rem; color: rgba(255,255,255,0.35); line-height: 1.65; margin-bottom: 1rem;}}
@media (max-width:900px){.footer-certs{display: flex; gap: 0.5rem; flex-wrap: wrap;}}
@media (max-width:900px){.footer-accordion{border-bottom: 1px solid rgba(255,255,255,0.06);}}
@media (max-width:900px){.footer-accordion:first-of-type{border-top: 1px solid rgba(255,255,255,0.06);}}
@media (max-width:900px){.footer-accordion-btn{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; background: none; border: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); cursor: pointer; font-family: var(--font); -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){.footer-accordion-icon{transition: transform 250ms; color: rgba(255,255,255,0.3); flex-shrink: 0;}}
@media (max-width:900px){.footer-accordion.open .footer-accordion-icon{transform: rotate(180deg);}}
@media (max-width:900px){.footer-accordion-body{overflow: hidden; max-height: 0; transition: max-height 280ms ease;}}
@media (max-width:900px){.footer-accordion.open .footer-accordion-body{max-height: 400px;}}
@media (max-width:900px){.footer-links{list-style: none; display: flex; flex-direction: column; padding-bottom: 1rem;}}
@media (max-width:900px){.footer-links a{font-size: 0.875rem; color: rgba(255,255,255,0.35); padding: 0.375rem 0; display: block; -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){.footer-links a:active{color: rgba(255,255,255,0.75);}}
@media (max-width:900px){.footer-link-sale{color: rgba(196,123,30,0.75) !important;}}
@media (max-width:900px){.footer-bottom{margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.75rem; color: rgba(255,255,255,0.25); display: flex; flex-direction: column; gap: 0.75rem;}}
@media (max-width:900px){body{font-family: var(--font); color: var(--ink); background: var(--warm); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;}}
@media (max-width:1150px){.mob-drawer-search{padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0;}}
@media (max-width:1150px){.mob-cat-tile{border-radius: var(--r-lg); padding: 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; position: relative; overflow: hidden; min-height: 88px; -webkit-tap-highlight-color: transparent;}}
@media (max-width:1150px){.mob-nav-link svg{color: #d0d0d0; flex-shrink: 0;}}
@media (max-width:900px){.btn-primary{display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--action); color: var(--white); font-size: 1rem; font-weight: 700; padding: 0.9375rem 1.5rem; border-radius: var(--r); -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){.btn-primary:active{background: var(--action-dark);}}
@media (max-width:900px){.btn-ghost{display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: rgba(255,255,255,0.8); font-size: 0.9375rem; font-weight: 600; padding: 0.875rem 1.5rem; border-radius: var(--r); border: 1.5px solid rgba(255,255,255,0.22); -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){.btn-ghost:active{background: rgba(255,255,255,0.08);}}
@media (max-width:900px){.usp-strip{background: var(--action);}}
@media (max-width:900px){.usp-scroll{display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 0.5rem;}}
@media (max-width:900px){.usp-scroll::-webkit-scrollbar{display: none;}}
@media (max-width:900px){.usp-item{display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--white); padding: 0.75rem 0.875rem; white-space: nowrap; flex-shrink: 0;}}
@media (max-width:900px){.usp-sep{width: 1px; background: rgba(255,255,255,0.2); align-self: stretch; margin: 0.5rem 0; flex-shrink: 0;}}
@media (max-width:900px){.section{padding: 2.5rem 1.25rem;}}
@media (max-width:900px){.eyebrow{font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 0.375rem;}}
@media (max-width:900px){.section-title{font-size: 1.625rem; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; line-height: 1.15;}}
@media (max-width:900px){.section-desc{font-size: 0.9375rem; color: var(--ink-light); line-height: 1.7; margin-top: 0.625rem;}}
@media (max-width:900px){.section-header{display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; gap: 0.75rem;}}
@media (max-width:900px){.btn-add{font-size: 0.75rem; font-weight: 700; background: var(--action); color: var(--white); padding: 0.4375rem 0.75rem; border-radius: var(--r); -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){.footer-accordion-btn{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: none; border: none; cursor: pointer; font-family: var(--font); -webkit-tap-highlight-color: transparent;}}
@media (max-width:900px){:root{--ink: #0f1e2e; --ink-mid: #2a3f52; --ink-light: #64788a; --action: #387780; --action-dark: #2d5f66; --action-pale: #e1ebec; --warm: #faf8f5; --white: #ffffff; --surface: #f4f4f4; --border: #e8e8e8; --amber: #c47b1e; --amber-pale: #fef3e2; --success: #1a8f5a; --footer-bg: #070f18; --font: 'Figtree', sans-serif; --r: 8px; --r-lg: 16px; --r-xl: 24px; --sh: 0 1px 4px rgba(15,30,46,0.07); --sh-md: 0 4px 20px rgba(15,30,46,0.10); --sh-lg: 0 12px 48px rgba(15,30,46,0.14); --atc-height: 80px;}}
@media (max-width:900px){body{font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-bottom: var(--atc-height);}}
@media (max-width:900px){.ann-bar{background: var(--ink); color: rgba(255,255,255,0.82); font-size: 0.75rem; font-weight: 500; text-align: center; padding: 0.5rem 1rem;}}
@media (max-width:900px){.bc-inner{display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--ink-light); flex-wrap: wrap;}}
.nav-links a{font-size: 0.875rem; font-weight: 500; color: var(--ink-mid); padding: 0.5rem 0.75rem; border-radius: var(--r); transition: all 150ms;}
.btn-primary{background: var(--action); color: var(--white); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.75rem; border-radius: var(--r); transition: background 150ms;}
.btn-primary:hover{background: var(--action-dark);}
.btn-ghost{background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: var(--white); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.75rem; border-radius: var(--r); transition: background 150ms;}
.btn-ghost:hover{background: rgba(255,255,255,0.14);}
:root{--ink:#0f1e2e;--ink-mid:#2a3f52;--ink-light:#64788a;--brand:#387780;--action:#387780;--action-dark:#2d5f66;--action-pale:#e1ebec;--warm:#faf8f5;--white:#ffffff;--surface:#f4f4f4;--border:#e8e8e8;--amber:#c47b1e;--amber-pale:#fef3e2;--success:#1a8f5a;--danger:#c0392b;--font:'Figtree',sans-serif;--r:8px;--r-lg:16px;--r-xl:24px;--sh:0 1px 4px rgba(15,30,46,0.07);--sh-md:0 4px 20px rgba(15,30,46,0.10);--sh-lg:0 12px 48px rgba(15,30,46,0.14)}
html{font-size:16px;scroll-behavior:smooth}
.btn-sticky-cart{background:var(--action);color:var(--white);font-family:var(--font);font-size:0.9375rem;font-weight:700;padding:0.75rem 2rem;border-radius:var(--r);border:none;cursor:pointer;transition:background 150ms}
.btn-sticky-cart:hover{background:var(--action-dark)}
.nav-search{display:flex;align-items:center;gap:0.5rem;background:var(--surface);border-radius:100px;padding:0.5rem 0.875rem;width:280px;flex-shrink:0}
.nav-search-icon{color:var(--ink-light);flex-shrink:0}
.nav-search-input{border:none;background:none;font-family:var(--font);font-size:0.8125rem;color:var(--ink);outline:none;width:100%}
.nav-links{display:flex;align-items:center;list-style:none;margin:0 auto}
.nav-links a{font-size:0.875rem;font-weight:500;color:var(--ink-mid);padding:0.5rem 0.75rem;border-radius:var(--r);transition:all 150ms}
.btn-cart-main{width:100%;padding:1rem;background:var(--action);color:var(--white);font-family:var(--font);font-size:1rem;font-weight:700;border-radius:var(--r-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.625rem;margin-bottom:0.625rem;transition:background 150ms,transform 100ms}
.btn-cart-main:hover{background:var(--action-dark)}
.btn-cart-main:active{transform:scale(0.98)}
.btn-enquire{width:100%;padding:0.875rem;background:transparent;color:var(--ink-mid);font-family:var(--font);font-size:0.875rem;font-weight:600;border-radius:var(--r-lg);border:1.5px solid var(--border);cursor:pointer;transition:all 150ms;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;gap:0.5rem}
.btn-enquire:hover{border-color:var(--action);color:var(--action)}
@media(max-width:900px){.nav-links,.nav-search{display:none}
.footer-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Bridge layer.

   The approved designs were 14 responsive desktop files plus 3 fixed-width
   mobile mockups. Merging them into one responsive template set needs a small
   amount of glue that exists in neither source, plus fixes for accessibility
   defects the mockups carried. Everything here is additive.
   ------------------------------------------------------------------------ */

/* --- Header handover -------------------------------------------------------
   Below 900px the desktop designs hid .nav-links and .nav-search and offered
   no replacement. The mobile mockups' .mob-header is that replacement.

   The swap happens at 1150px, not 900px. The live menu carries six top-level
   items and measures 761px; with the logo, inline search and account icons the
   desktop bar needs roughly 1125px, so between 900px and that width the whole
   page scrolled sideways. split_css.py puts the .mob-* chrome under the same
   1150px query so the drawer is fully styled wherever it appears. */
.mob-header, .mob-drawer, .mob-overlay { display: none; }

@media (max-width: 1150px) {
  .site-header .nav { display: none; }
  .mob-header { display: flex; }
  .mob-drawer { display: block; }
  .mob-overlay { display: block; }
}

/* Drawer open state.

   The mobile mockup drives the drawer with an .open class: fixed to the right,
   translateX(100%) when closed, its own 320ms curve. That is left exactly as
   designed. All this adds is the accessibility half the mockup did not have,
   keyed off the same class so the two can never disagree:

     - a closed drawer must not be reachable by keyboard or screen reader
     - visibility flips in immediately on open so focus can move into it, and
       is delayed on close so the slide-out is still visible while it runs
     - the page behind must not scroll                                        */
.mob-drawer { visibility: hidden; transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 320ms; }
.mob-drawer.open { visibility: visible; transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s; }
html.is-drawer-open, html.is-drawer-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mob-drawer, .mob-overlay { transition: none; }
}

/* --- Skip link -------------------------------------------------------------
   The live site's skip link sits at -160001px and never becomes focusable,
   which Lighthouse flags. This one is off-screen until focused, then visible. */
.skip-link {
  position: absolute; left: 0; top: 0; z-index: 999;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0;
  font-weight: 700; font-size: 0.875rem;
  transform: translateY(-120%);
}
.skip-link:focus {
  position: absolute; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
  transform: translateY(0);
  outline: 3px solid var(--action); outline-offset: 2px;
}

/* --- Visible focus ---------------------------------------------------------
   The mockups styled hover states but left focus to the browser default, which
   several of the dark surfaces render almost invisibly. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 3px;
}
.hero :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: var(--white);
}

/* --- Mega panel ------------------------------------------------------------
   Panels are hidden by the hidden attribute rather than a class so the
   disclosure state and the visual state cannot drift apart. */
.mega-panel[hidden] { display: none; }
.nav-mega-trigger { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.nav-mega-trigger--adjacent { padding: 0.5rem 0.35rem; }
.nav-mega-trigger[aria-expanded="true"] .nav-mega-chevron { transform: rotate(180deg); }
.nav-mega-chevron { transition: transform 150ms; }

@media (prefers-reduced-motion: reduce) {
  .nav-mega-chevron { transition: none; }
}

/* --- Tabs ------------------------------------------------------------------ */
.tab-pane[hidden] { display: none; }

/* --- Real images in place of mockup SVG placeholders -----------------------
   The mockups drew products as inline SVG inside a fixed-ratio box. Real
   WooCommerce images take the same slot; the ratio is held so the grid does
   not shift while they load. */
.product-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.product-img img.product-img-inner { width: 100%; height: 100%; object-fit: cover; }
.product-img-inner--empty { width: 100%; height: 100%; background: var(--surface); }
.cat-card-icon img { width: 100%; height: 100%; object-fit: cover; }

/* --- Structures the mockups had no equivalent for --------------------------
   Search results, 404, pagination, long-form prose and the blog card grid. */
/* The design's .section already carries `padding: 6rem 1.5rem`, so adding
   horizontal padding here applied it twice and pushed every section's content
   24px right of the hero. Match the design: no padding. */
.section-inner { max-width: 1340px; margin: 0 auto; }
.page-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
.result-count, .cat-meta-row { color: var(--ink-light); font-size: 0.9375rem; }
.empty-state { color: var(--ink-mid); font-size: 1.0625rem; max-width: 52ch; margin-bottom: 1.5rem; }

.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 2.25em; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.75em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.625rem 0.75rem; text-align: left; }

.post-grid, .journal-grid, .search-results, .product-rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.pagination { margin-top: 3rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 0.5rem;
  border: 1px solid var(--border); border-radius: var(--r);
  margin-right: 0.375rem; font-weight: 600; background: var(--white);
}
.pagination .page-numbers.current { background: var(--action); border-color: var(--action); color: var(--white); }

/* Wide content must scroll inside itself, never the page. */
.spec-grid, .prose table, .tab-pane { max-width: 100%; }
.prose > table { display: block; overflow-x: auto; }

/* --- Trustpilot ------------------------------------------------------------
   The widget reserves its own height. Holding the box prevents the layout
   shift the live site takes when the iframe swaps in. */
.trustpilot-widget { min-height: 28px; }
.reviews-section .trustpilot-widget,
.home-reviews .trustpilot-widget { min-height: 150px; }
.tp-product-reviews .trustpilot-widget { min-height: 400px; }

/* --- Product grid as a real list -------------------------------------------
   The design marked cards up as <article role="listitem"> inside a plain div,
   which overrides the article role with one only valid inside a list. The
   cards are real <li> elements now, so the grid needs its list styling reset. */
.product-grid, .product-rail { list-style: none; margin: 0; padding: 0; }
.product-sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* --- WordPress and WooCommerce visually-hidden classes ---------------------
   The designs define .sr-only. WordPress and WooCommerce emit their own
   equivalents, and with no rule for them the text renders on screen: the price
   range on every variable product card was printing "Price range: $x through
   $y" straight after the price. */
.screen-reader-text,
.woocommerce-Price-amount .screen-reader-text,
.says,
.wp-block-search__label-wrapper .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* --- Mega menu triggers ----------------------------------------------------
   A top-level item with a panel is a button, not a link, because it opens a
   disclosure rather than navigating. The design only styled .nav-links a, so
   the buttons rendered with no padding and the nav ran together. This gives
   them the same box. */
.nav-links > li > .nav-mega-trigger,
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mid);
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  white-space: nowrap;
  transition: color 150ms, background 150ms;
}
.nav-links > li > .nav-mega-trigger:hover,
.nav-links > li > a:hover { color: var(--ink); background: var(--surface); }
.nav-links > li { position: relative; }

/* --- Add-to-cart buttons on cards ------------------------------------------
   "View options" wrapped and clipped inside the fixed-height design button. */
.product-footer .btn-view,
.product-footer .add_to_cart_button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-footer { flex-wrap: wrap; gap: 0.5rem; }

/* --- Blog, article and author: list semantics -------------------------------
   The designs marked every card grid up as a div of anchors. They are real
   lists here, so the grid rules need their list styling reset and the card
   anchor needs to fill its list item. Nothing about the visual result changes. */
.blog-grid, .author-posts-grid, .author-stats, .cred-list, .tag-list, .toc-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.post-card-item { display: flex; }
.post-card { display: flex; flex-direction: column; width: 100%; text-decoration: none; }
.post-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; flex: 1; }
.post-card-excerpt { flex: 1; }

.featured-post { text-decoration: none; }
.featured-img { position: relative; overflow: hidden; }
.featured-img img { width: 100%; height: 100%; object-fit: cover; }

/* Chips are links now, not inert buttons, so they navigate and can be crawled. */
.blog-chip { display: inline-flex; align-items: center; text-decoration: none; min-height: 24px; }

/* Ordered TOC without the numbering the design did not show. */
.toc-list { counter-reset: none; }
.toc-list a.is-current { font-weight: 700; color: var(--action); }

/* The article drops to a single column when a post has too few sections
   to justify the rail. */
.post-layout--no-toc { display: block; }
.post-layout--no-toc .post-content { margin-inline: auto; }

/* Reading progress: decorative, fixed to the top of the viewport. */
.reading-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.reading-progress-bar { height: 100%; width: 0; background: var(--action); transition: width 80ms linear; }

@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar { transition: none; }
}

.newsletter-wrap { padding: 0 1.5rem 4rem; }
.share-btn { display: inline-flex; align-items: center; min-height: 24px; }

/* --- Featured post image ----------------------------------------------------
   The design's featured card is a two-column grid whose height is set by the
   text column. With no height of its own the image column left bars above and
   below the photo, so the media side is given an aspect ratio and told to fill
   whatever height the row ends up being. */
.featured-post { align-items: stretch; }
.featured-img { position: relative; overflow: hidden; }
.featured-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; }
}

/* --- Site logo -------------------------------------------------------------
   the_custom_logo() outputs the image at its uploaded size, which here is
   400x100 and blew the header apart. The approved design sets 36px in the
   header and 28px in the footer. */
.nav-logo .custom-logo,
.mob-logo .custom-logo {
  height: 36px;
  width: auto;
  max-height: 36px;
  display: block;
}
.mob-drawer-logo .custom-logo { height: 28px; width: auto; max-height: 28px; display: block; }
/* The design whitened the footer logo with `brightness(0) invert(1)`, which
   assumes artwork on a transparent background. The real logo is flat artwork on
   an opaque white field, so the filter turned the whole rectangle into a white
   block. A reversed asset set in the Customizer carries .custom-logo--reversed
   and is left alone; the filter stays only as the fallback for the default. */
.footer-logo .custom-logo {
  height: 28px;
  width: auto;
  max-height: 28px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.footer-logo .custom-logo--reversed { filter: none; opacity: 1; }