/* Homepage only. Colours: navy #05122b, yellow #ffc107, blue #2f4fd6, red #e02b20 */
:root{--hm-navy:#05122b;--hm-yellow:#ffc107;--hm-blue:#2f4fd6;--hm-red:#e02b20;--hm-bg:#f4f7fc;--hm-text:#1c2540;--hm-muted:#64748b}
.hm-wrap{max-width:80rem;margin:0 auto;padding:0 16px}
@media (min-width:640px){.hm-wrap{padding:0 24px}}
@media (min-width:1024px){.hm-wrap{padding:0 32px}}
.hm-section{margin-top:48px}

/* buttons */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:9999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,filter .2s,box-shadow .2s;white-space:nowrap}
.hm-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.hm-btn-yellow{background:var(--hm-yellow);color:#000}
.hm-btn-navy{background:var(--hm-navy);color:#fff}
.hm-btn-white{background:#fff;color:var(--hm-navy)}
.hm-btn-white-red{background:#fff;color:var(--hm-red)}
.hm-btn-block{display:flex;width:100%}

/* hero */
.hm-hero{background-color:var(--hm-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23dde5f3' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23dde5f3' stroke-width='1.5'/%3E%3C/svg%3E");padding:36px 0 44px;border-bottom:1px solid #e3e9f4}
.hm-hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:900px){.hm-hero-grid{grid-template-columns:1.15fr 1fr;gap:48px}}
.hm-hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.hm-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hm-hero-copy h1{font-size:clamp(28px,4vw,46px);line-height:1.08;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--hm-navy)}
.hm-pill{display:inline-block;background:var(--hm-yellow);color:#000;font-size:13px;font-weight:900;padding:9px 20px;border-radius:9999px}
.hm-sub{font-size:14px;color:#3d4a6b;font-weight:600}
.hm-dash{border:2px dashed #8da0c8;border-radius:10px;padding:11px 18px;font-size:13px;font-weight:800;color:var(--hm-navy);background:rgba(255,255,255,.6)}
.hm-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hm-btn-ghost{background:transparent;border:2px solid var(--hm-navy);color:var(--hm-navy)}
.hm-btn-ghost:hover{background:var(--hm-navy);color:#fff}

/* three promo cards */
.hm-promos{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.hm-promos{grid-template-columns:repeat(3,1fr)}}
.hm-promo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:200px;padding:26px 22px 26px 26px;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(5,18,43,.12);transition:transform .25s,box-shadow .25s}
.hm-promo:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(5,18,43,.2)}
.hm-promo-blue{background:linear-gradient(135deg,#3a5bea,#2644c2);color:#fff}
.hm-promo-yellow{background:linear-gradient(135deg,#ffd23d,#ffb800);color:var(--hm-navy)}
.hm-promo-red{background:linear-gradient(135deg,#ec3a2d,#c91f15);color:#fff}
.hm-promo-text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:relative;z-index:1}
.hm-promo-label{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.hm-promo-yellow .hm-promo-label{opacity:1}
.hm-promo h3{font-size:22px;line-height:1.15;font-weight:900}
.hm-promo .hm-btn{margin-top:10px;padding:10px 20px}
.hm-promo-img{flex:0 1 46%;max-width:46%;max-height:170px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.28))}

/* section titles */
.hm-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:2px solid var(--hm-yellow);padding-bottom:12px;margin-bottom:22px}
.hm-title h2{font-size:21px;font-weight:900;text-transform:uppercase;color:var(--hm-navy);letter-spacing:-.005em}
.hm-title p{font-size:12px;color:var(--hm-muted);margin-top:2px;width:100%}
.hm-tabs{display:flex;align-items:center;gap:8px}
.hm-tab{padding:8px 18px;border-radius:9999px;border:0;background:#eef2f9;color:#334155;font-size:12px;font-weight:900;text-transform:uppercase;cursor:pointer;transition:background .2s}
.hm-tab:hover{background:#e2e8f3}
.hm-tab.is-active{background:var(--hm-yellow);color:#000}
.hm-arrow{width:34px;height:34px;border-radius:9999px;border:1px solid #cbd5e1;background:#fff;color:var(--hm-navy);font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.hm-arrow:hover:not(:disabled){background:var(--hm-yellow);border-color:var(--hm-yellow)}
.hm-arrow:disabled{opacity:.35;cursor:default}

/* product row */
.hm-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 16px;scrollbar-width:thin}
.hm-card{flex:0 0 218px;scroll-snap-align:start;background:#fff;border:1px solid #e5eaf3;border-radius:16px;padding:14px;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(5,18,43,.05);transition:box-shadow .25s,transform .25s}
.hm-card:hover{box-shadow:0 12px 28px rgba(5,18,43,.13);transform:translateY(-3px)}
.hm-card-img{aspect-ratio:1/1;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #f0f3f9}
.hm-card-img img{max-width:100%;max-height:100%;object-fit:contain}
.hm-card-name{margin-top:12px;font-size:12.5px;font-weight:800;line-height:1.35;color:var(--hm-navy);min-height:50px}
.hm-card-spec{margin-top:6px;font-size:11px;color:var(--hm-muted);line-height:1.4;min-height:30px}
.hm-card-price{margin:8px 0 12px;font-size:12px;font-weight:900;color:var(--hm-navy)}
.hm-card .hm-btn{margin-top:auto;padding:10px 12px;font-size:11px}
.hm-card-more{background:linear-gradient(160deg,#0b1f4b,#05122b);color:#fff;justify-content:center;align-items:center;text-align:center;gap:12px;border:0}
.hm-card-more h3{font-size:14px;font-weight:900;text-transform:uppercase;line-height:1.3}
.hm-card-more p{font-size:11px;color:#cbd5e1;line-height:1.5}
.hm-card-more .hm-btn{margin-top:4px}
.hm-empty{padding:30px 10px;color:var(--hm-muted);font-size:13px}
.hm-empty a{color:var(--hm-navy);font-weight:800;text-decoration:underline}

/* wide blue banner */
.hm-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:20px;min-height:200px;padding:34px 24px;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,#2f4fd6,#2340b9);color:#fff;text-align:center;box-shadow:0 12px 30px rgba(35,64,185,.3)}
.hm-banner-copy{position:relative;z-index:1;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hm-banner h2{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.15}
.hm-banner p{font-size:14px;color:#e4e9ff;line-height:1.55}
.hm-banner-img{display:none;height:170px;width:auto;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35))}
.hm-banner-img.hm-banner-ink{height:120px}
@media (min-width:860px){.hm-banner-img{display:block}}

/* standing orders */
.hm-steps{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.hm-steps{grid-template-columns:repeat(3,1fr)}}
.hm-step{background:#fff;border:1px solid #e5eaf3;border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;box-shadow:0 4px 14px rgba(5,18,43,.05);transition:box-shadow .25s,transform .25s}
.hm-step:hover{box-shadow:0 12px 28px rgba(5,18,43,.13);transform:translateY(-3px)}
.hm-step svg{width:40px;height:40px;color:var(--hm-navy)}
.hm-step h3{font-size:16px;font-weight:900;color:var(--hm-navy)}
.hm-step p{font-size:13px;color:#51607f;line-height:1.6}
.hm-step .hm-btn{margin-top:auto;padding:10px 22px}

/* barron tiles */
.hm-tiles-panel{background:#eaf0fb;border-radius:20px;padding:20px}
.hm-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:640px){.hm-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.hm-tiles{grid-template-columns:repeat(5,1fr)}}
.hm-tile{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(5,18,43,.06);transition:box-shadow .25s,transform .25s}
.hm-tile:hover{box-shadow:0 12px 26px rgba(5,18,43,.14);transform:translateY(-3px)}
.hm-tile-img{height:150px;display:flex;align-items:center;justify-content:center;background:#f8fafd;border-radius:10px;overflow:hidden}
.hm-tile-img img{max-width:100%;max-height:100%;object-fit:contain}
.hm-tile h3{margin-top:12px;font-size:13px;font-weight:900;color:var(--hm-navy)}
.hm-tile p{font-size:11px;color:var(--hm-muted);margin-top:3px;line-height:1.4}
.hm-tile a{margin-top:auto;padding-top:12px;font-size:12px;font-weight:800;color:#b07d00;text-decoration:none}
.hm-tile a:hover{text-decoration:underline}

/* trust strip */
.hm-trust{background:#fff;border-top:1px solid #e5eaf3;border-bottom:1px solid #e5eaf3;padding:26px 0}
.hm-trust-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:640px){.hm-trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.hm-trust-grid{grid-template-columns:repeat(4,1fr)}}
.hm-trust-item{display:flex;align-items:center;gap:12px}
.hm-trust-item svg{width:30px;height:30px;color:var(--hm-yellow);flex:none}
.hm-trust-item h4{font-size:12px;font-weight:900;text-transform:uppercase;color:var(--hm-navy)}
.hm-trust-item p{font-size:11px;color:var(--hm-muted);line-height:1.4;margin-top:2px}

/* bottom banners */
.hm-duo{display:grid;grid-template-columns:1fr;gap:20px;padding-bottom:48px}
@media (min-width:900px){.hm-duo{grid-template-columns:1fr 1fr}}
.hm-big{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:240px;padding:32px;border-radius:20px;overflow:hidden;color:#fff;box-shadow:0 12px 30px rgba(5,18,43,.18)}
.hm-big-red{background:linear-gradient(135deg,#ec3a2d,#c21d13)}
.hm-big-blue{background:linear-gradient(135deg,#3a5bea,#2340b9)}
.hm-big-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1 1 55%;position:relative;z-index:1}
.hm-big h3{font-size:24px;font-weight:900;line-height:1.15}
.hm-big p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.9)}
.hm-big-print{flex:0 0 38%;max-width:38%;background:#fff;border-radius:14px;padding:8px;transform:rotate(3deg);box-shadow:0 14px 28px rgba(0,0,0,.3)}
.hm-big-phone{flex:0 0 26%;max-width:26%;max-height:240px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));transform:rotate(4deg)}
.hm-reps{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hm-rep{display:inline-flex;align-items:center;padding:8px 14px;border-radius:9999px;background:var(--hm-yellow);color:#000;font-size:11px;font-weight:900;text-decoration:none;transition:transform .2s,filter .2s}
.hm-rep:hover{transform:translateY(-2px);filter:brightness(1.06)}
@media (max-width:520px){.hm-big{flex-direction:column;align-items:flex-start}.hm-big-print,.hm-big-phone{max-width:60%;flex:none;align-self:center}}

@media (prefers-reduced-motion:reduce){.hm-btn,.hm-promo,.hm-card,.hm-step,.hm-tile,.hm-rep{transition:none}}