/* Site-wide overrides (loaded last on every page) */
@font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/roboto-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:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/roboto-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}
:root{--font-sans:"Roboto",ui-sans-serif,system-ui,sans-serif}
html,body,button,input,select,textarea,body *{font-family:"Roboto",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

/* Header: bigger logo + nav; bag sits left of the Contact pill */
header .hdr-logo{height:48px;width:auto}
@media (min-width:640px){header .hdr-logo{height:58px}}
header nav{gap:34px}
header nav a{font-size:15px;font-weight:700}
.hdr-right{gap:14px}
.hdr-contact{font-size:13px;padding:11px 24px}

/* Hero CTAs: one gold, one dark */
.hm-hero-actions .hm-btn-ghost{background:#05122b;border-color:#05122b;color:#fff}
.hm-hero-actions .hm-btn-ghost:hover{background:#0d2250}
.hm-pill{display:none}

/* Trust strip + footer commitments: bigger icons */
.hm-trust-item{gap:16px}
.hm-trust-item svg{width:46px;height:46px;padding:10px;background:#fff6d6;border-radius:50%;box-sizing:border-box}
.hm-trust-item h4{font-size:14px}
.hm-trust-item p{font-size:12.5px}
footer li svg.w-4{width:26px;height:26px}
footer li.flex{gap:12px}
footer li.flex span{font-size:13px}

/* Partner strip: one row on desktop, two balanced rows on small screens */
footer > div:first-child .flex-wrap{flex-wrap:nowrap;justify-content:space-between;gap:16px}
footer > div:first-child .flex-wrap>div{flex:0 1 auto;min-width:0;height:34px}
footer > div:first-child .flex-wrap img{max-width:96px;max-height:34px}
@media (max-width:899px){
  footer > div:first-child .flex-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 10px;justify-items:center}
  footer > div:first-child .flex-wrap>div{height:26px;width:100%;justify-content:center}
  footer > div:first-child .flex-wrap img{max-width:100%;max-height:26px}
}
.hm-sub{font-size:17px;line-height:1.5}

/* White product tiles on colour cards/banners */
.hm-promo-img.panel{background:#fff;border-radius:12px;padding:6px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25));flex:0 1 44%;max-width:44%;max-height:170px;width:auto}
img.tile{background:#fff;border-radius:12px;padding:6px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3))}
.hm-banner-img.tile{height:140px;width:auto}
.hm-tile-img{height:176px}
.hm-tile-img img{width:100%;height:100%;object-fit:contain}
.hm-tile-img img[src$=".jpg"]{mix-blend-mode:multiply}
.hm-trust-item svg{width:54px;height:54px;padding:12px}
.cp-art .base{width:68%}
.cp-art .app{right:0;bottom:0;width:30%}

/* ---- Mobile optimisation ---- */
@media (max-width:719px){
  .ow-table{display:block;width:100%;min-width:0}
  .ow-table thead{display:none}
  .ow-table tbody,.ow-table tr{display:block;width:100%}
  .ow-table tr{background:#fff;border:1px solid #e5eaf3;border-radius:14px;margin-bottom:12px;padding:6px 14px;box-shadow:0 4px 12px rgba(5,18,43,.05)}
  .ow-table td{display:flex;justify-content:space-between;gap:14px;width:100%;padding:9px 0;border:0;border-bottom:1px solid #eef2f9;text-align:right;font-size:13.5px}
  .ow-table td:first-child{display:block;text-align:left;font-weight:900;color:#05122b;border-bottom:2px solid #ffc107;padding-top:10px}
  .ow-table td:last-child{border-bottom:0}
  .ow-table td[data-label]:before{content:attr(data-label);font-weight:700;color:#6b7799;text-align:left;flex:none;max-width:45%}
}
@media (max-width:640px){
  .hm-tile a{display:inline-block;padding:12px 0 4px;min-height:40px}
  .ct-row a,.ct-row span{display:inline-block;padding:4px 0}
  .hm-btn{min-height:44px}
}


/* ===== PHONE / SMALL TABLET (desktop untouched) ===== */
@media (max-width:899px){
  /* Heroes: picture first, centred type below */
  .hm-hero-grid,.ow-hero-grid,.cp-hero-grid,.sv-hero-grid,.ct-hero-grid{gap:18px;text-align:center}
  .hm-hero-art,.ow-hero-art,.sv-hero-art,.cp-art{order:-1;max-width:560px;margin:0 auto;width:100%}
  .hm-hero-copy,.ow-hero-copy,.cp-hero-copy,.ct-hero-copy{align-items:center;text-align:center;gap:14px}
  .hm-hero-copy p,.ow-hero-copy p,.cp-hero-copy p,.ct-hero-copy p{margin-left:auto;margin-right:auto}
  .hm-hero-actions{justify-content:center}
  .hm-hero{padding:22px 0 34px}
  .ct-hero-copy{padding-bottom:28px}
  .ab-hero-grid>div:first-child{text-align:center}
  .ab-hero p{margin-left:auto;margin-right:auto}
  .ab-hero{padding:34px 0}
  /* Section headings centred */
  .hm-title{justify-content:center;text-align:center}
  .hm-title h2{width:100%;text-align:center}
  .hm-title p{text-align:center}
  .hm-tabs{justify-content:center;width:100%}
  .ow-certs{justify-content:center}
  /* Promo cards: picture on top, centred copy below */
  .hm-promo{flex-direction:column-reverse;text-align:center;gap:14px;padding:22px 20px 24px}
  .hm-promo-text{align-items:center;max-width:none!important;width:100%}
  .hm-promo-img,.hm-promo-img.panel,.sv-bleed{position:static!important;order:0;max-width:78%!important;width:auto;height:auto;max-height:170px!important;flex:none!important;-webkit-mask-image:none!important;mask-image:none!important;border-radius:12px}
  .sv-bleed{width:100%!important;max-width:100%!important;height:150px!important;object-fit:contain;border-radius:0}
  .hm-promo{flex-direction:column}
  /* Trust + benefit cards centred */
  .hm-trust-item{flex-direction:column;text-align:center;gap:10px}
  .ow-benefit-head{flex-direction:column;text-align:center}
  .ow-benefit p{text-align:center}
  .ab-item{flex-direction:column;align-items:center;text-align:center}
  .sv-step{text-align:center}.sv-step .ow-ico{margin-left:auto;margin-right:auto}
  .ct-quote{text-align:center}
}
/* Readable type on phones */
@media (max-width:767px){
  body{font-size:16px}
  .hm-hero-copy h1,.ow-hero-copy h1,.cp-hero-copy h1,.ct-hero-copy h1,.ab-hero h1{font-size:clamp(27px,8vw,34px);line-height:1.12}
  .hm-sub{font-size:18px}
  .hm-hero-copy p,.ow-hero-copy p,.cp-hero-copy p,.ct-hero-copy p,.ab-hero p{font-size:17px;line-height:1.6}
  .hm-btn{font-size:14px;padding:14px 26px}
  .hm-title h2{font-size:24px}
  .hm-title p{font-size:15px}
  .hm-promo-label{font-size:12px}
  .hm-promo h3{font-size:26px}
  .hm-promo-desc{font-size:16px!important;line-height:1.5}
  .cp-tag{font-size:12px}.cp-name{font-size:15px}.cp-spec,.cp-fits,.cp-price{font-size:13.5px}
  .hm-card h3,.hm-card .hm-card-name{font-size:15px}.hm-card p{font-size:13.5px}
  .hm-tile h3{font-size:16px}.hm-tile p{font-size:14px}.hm-tile a{font-size:14px}
  .hm-trust-item h4{font-size:16px}.hm-trust-item p{font-size:15px}
  .ow-benefit h3{font-size:17px}.ow-benefit p{font-size:15px}
  .ow-cert{font-size:14px}
  .ab-item h3{font-size:15px}.ab-item p{font-size:15px}.ab-panel>p{font-size:16px}
  .ab-pillar span{font-size:13px}
  .ab-line{font-size:15px}.ab-rep h3{font-size:18px}.ab-role{font-size:12px}
  .sv-step h3{font-size:17px}.sv-step p{font-size:15px}
  .ct-row b,.ct-row span,.ct-row a{font-size:15px}.ct-q b{font-size:16px}.ct-q span.t{font-size:13.5px}
  .ct-form label{font-size:12.5px}.ct-form input,.ct-form select,.ct-form textarea{font-size:16px}
  .hm-banner h2{font-size:26px}.hm-banner p{font-size:16px}
  .hm-step h3,.hm-step h4{font-size:17px}.hm-step p{font-size:15px}
  .hm-rep{font-size:13px;padding:11px 16px}
  footer,footer li,footer a,footer p,footer span{font-size:14px!important}
  footer h4{font-size:15px!important}
  .ow-table td{font-size:15px}
  .cp-cats .lbl{font-size:14px}.cp-search input{font-size:16px}
  .hm-pill{display:none}
}

/* ===== Dynamic guarantee banner (angled shapes, products bursting out) ===== */
.hm-banner:not(.sv-banner){min-height:250px;padding:0;background:linear-gradient(105deg,#1d3aa8 0%,#2f4fd6 55%,#3b61ee 100%);isolation:isolate}
.hm-banner:not(.sv-banner)::before{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:-6%;width:36%;transform:skewX(-20deg);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}
.hm-banner:not(.sv-banner)::after{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;right:-4%;width:34%;transform:skewX(-20deg);background:linear-gradient(180deg,#ffc107 0,#ffc107 5px,rgba(5,18,43,.28) 5px);border-left:10px solid #ffc107}
.hm-banner:not(.sv-banner) .hm-banner-copy{max-width:560px;padding:36px 12px;z-index:2}
.hm-banner:not(.sv-banner) h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.01em}
.hm-banner .hl{color:#ffc107;display:inline-block;background:linear-gradient(transparent 70%,rgba(255,193,7,.25) 70%)}
.hm-banner:not(.sv-banner)>img.hm-banner-img{position:absolute;z-index:1;display:none}
@media (min-width:860px){
  .hm-banner:not(.sv-banner)>img.hm-banner-img{display:block}
  .hm-banner:not(.sv-banner)>img.hm-banner-img.tile{left:3%;bottom:-18px;height:215px;width:auto;transform:rotate(-7deg);box-shadow:0 22px 34px rgba(0,0,0,.4);filter:none;padding:8px;border-radius:14px}
  .hm-banner:not(.sv-banner)>img.hm-banner-ink{right:4%;bottom:-6px;height:215px;width:auto;transform:rotate(9deg);filter:drop-shadow(-10px 22px 22px rgba(0,0,0,.45))}
}
@media (max-width:859px){
  .hm-banner:not(.sv-banner){display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy copy" "l r";gap:6px 8px;padding:6px 14px 26px;justify-items:center;align-items:end;min-height:0}
  .hm-banner:not(.sv-banner)::before{width:60%;left:-20%}
  .hm-banner:not(.sv-banner)::after{width:46%;right:-18%}
  .hm-banner:not(.sv-banner) .hm-banner-copy{grid-area:copy;padding:28px 6px 8px}
  .hm-banner:not(.sv-banner)>img.hm-banner-img{position:relative;display:block;max-width:92%}
  .hm-banner:not(.sv-banner)>img.hm-banner-img.tile{grid-area:l;height:112px;width:auto;transform:rotate(-6deg);box-shadow:0 14px 22px rgba(0,0,0,.4);filter:none;border-radius:12px}
  .hm-banner:not(.sv-banner)>img.hm-banner-ink{grid-area:r;height:112px;width:auto;transform:rotate(7deg);filter:drop-shadow(-6px 14px 14px rgba(0,0,0,.45))}
}
@media (max-width:859px){
  .hm-banner:not(.sv-banner)::after{top:52%;bottom:-30%;width:70%;right:-30%;border-left-width:8px}
  .hm-banner:not(.sv-banner)::before{top:-30%;bottom:50%}
}

/* ===== Phone type + spacing, round 2 (bigger, roomier) ===== */
@media (max-width:899px){
  header>div{padding-top:20px!important;padding-bottom:20px!important}
  header .hdr-logo{height:62px}
  .quote-bag{width:50px;height:50px}.quote-bag svg{width:24px;height:24px}
  .nav-toggle-label svg{width:32px;height:32px}
  .hm-hero{padding:34px 0 44px}
  .hm-hero-grid,.ow-hero-grid,.cp-hero-grid,.sv-hero-grid,.ct-hero-grid{gap:30px}
  .hm-hero-copy,.ow-hero-copy,.cp-hero-copy,.ct-hero-copy{gap:24px}
  .hm-hero-copy h1,.ow-hero-copy h1,.cp-hero-copy h1,.ct-hero-copy h1,.ab-hero h1{font-size:clamp(30px,6.4vw,44px)!important}
  .hm-sub{font-size:clamp(19px,4.8vw,26px)!important;line-height:1.45;font-weight:600}
  .hm-hero-copy p,.ow-hero-copy p,.cp-hero-copy p,.ct-hero-copy p,.ab-hero p{font-size:clamp(17px,4.4vw,22px)!important}
  .hm-hero-actions{gap:14px;margin-top:8px}
  .hm-btn{font-size:clamp(15px,3.9vw,18px)!important;padding:17px 34px!important;min-height:54px}
  .hm-promo-label{font-size:clamp(13px,3.3vw,16px)!important;letter-spacing:.1em}
  .hm-promo h3{font-size:clamp(26px,6.6vw,34px)!important}
  .hm-promo-desc{font-size:clamp(16px,4.2vw,20px)!important}
  .hm-promo .hm-btn{padding:15px 30px!important}
  .hm-title h2{font-size:clamp(24px,6vw,32px)!important}
  .hm-trust-item h4{font-size:clamp(16px,4.2vw,20px)!important}.hm-trust-item p{font-size:clamp(15px,3.9vw,18px)!important}
  .cp-name{font-size:clamp(15px,3.8vw,18px)!important}.cp-spec,.cp-fits,.cp-price,.cp-tag{font-size:clamp(13px,3.4vw,15px)!important}
  .hm-banner h2{font-size:clamp(26px,6.6vw,36px)!important}.hm-banner p{font-size:clamp(16px,4.2vw,20px)!important}
}
@media (max-width:899px){
  .hm-promo>img{order:-1;align-self:center}
  .hm-promo .hm-promo-text{order:1}
  .sv-promos .hm-promo>img.sv-bleed{width:100%!important;max-width:100%!important;height:190px!important;object-fit:cover!important;object-position:center 35%;border-radius:12px;-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 55%,transparent 100%)!important;mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,#000 55%,transparent 100%)!important}
}
@media (max-width:899px){
  .sv-promos .hm-promo>img.sv-bleed{width:auto!important;max-width:70%!important;height:180px!important;object-fit:contain!important;-webkit-mask-image:none!important;mask-image:none!important;border-radius:14px;box-shadow:0 12px 24px rgba(0,0,0,.28)}
}

/* ===== FINAL PHONE TYPE SCALE (all text, scales with screen width) ===== */
@media (max-width:899px){
  :root{--tb:clamp(17px,2.9vw,22px);--ts:clamp(16px,2.6vw,19px);--tl:clamp(16px,2.6vw,19px);--th:clamp(20px,3.5vw,28px)}
  /* body copy */
  .hm-sub,.hm-banner p,.hm-step p,.hm-big p,.hm-empty,.hm-title p,.hm-promo-desc,.cp-hero-copy p,.cp-promo p,.cp-note,.cp-empty,.ow-hero-copy p,.ow-benefit p,.ow-sub,.ow-claim,.sv-step p,.sv-promos .hm-promo-desc,.ab-hero p,.ab-panel>p,.ab-item p,.ct-hero-copy p,.ct-quote p,.ct-row span,.ct-row a,.ct-note,.quote-empty,.hm-card-more p,.hm-trust-item p,.hm-tile p,.ow-table,.cp-count{font-size:var(--tb)!important;line-height:1.55!important}
  /* card meta */
  .hm-card-spec,.cp-spec,.cp-fits,.cp-price,.hm-card-price,.hm-card-name,.cp-name,.owa-grid .cp-name,.hm-tile h3,.hm-trust-item h4,.ow-cert,.ow-link,.ab-line,.ab-line b,.ab-role,.ab-pillar span,.ab-kicker,.ct-row b,.ct-q b,.ct-q span.t,.ct-form label,.ct-form input,.ct-form select,.ct-form textarea,.cp-search input,.cp-tools,.cp-tools select,.cp-chip,.cp-cat,.cp-cat .n,.cp-cats-head,.hm-tab,.hm-empty,.quote-item-name,.quote-step span,.quote-remove,.quote-send,.quote-clear,.quote-toast{font-size:var(--ts)!important;line-height:1.45!important}
  .hm-card-name,.cp-name,.owa-grid .cp-name{font-size:clamp(16px,2.8vw,20px)!important;font-weight:800}
  .cp-tag,.hm-promo-label,.hm-pill,.ow-table th{font-size:var(--tl)!important}
  /* buttons */
  .hm-btn,.hm-card .hm-btn,.cp-card .hm-btn,.owa-grid .hm-btn,.cp-note .hm-btn,.ab-rep .hm-btn,.hm-rep,.hm-tab,.hm-tile a{font-size:var(--tl)!important}
  .hm-card .hm-btn,.cp-card .hm-btn,.owa-grid .hm-btn,.ab-rep .hm-btn{padding:14px 10px!important;min-height:50px}
  /* headings */
  .hm-promo h3,.hm-step h3,.hm-card-more h3,.ow-benefit h3,.sv-step h3,.ab-item h3,.ab-rep h3,.ct-quote h3,.quote-drawer-head h2{font-size:var(--th)!important;line-height:1.2!important}
  .hm-title h2{font-size:clamp(26px,4.6vw,36px)!important}
  /* header / mobile menu */
  header nav a,header label,#nav-toggle~* nav a{font-size:clamp(17px,3vw,22px)!important}
  /* footer */
  footer,footer li,footer a,footer p,footer span,footer li span{font-size:clamp(16px,2.6vw,19px)!important;line-height:1.5}
  footer h4{font-size:clamp(16px,2.8vw,20px)!important}
  footer .text-xs,footer .text-sm,footer .text-\[11px\]{font-size:clamp(16px,2.6vw,19px)!important}
  /* banner: no stripe through the button, bigger pictures */
  .hm-banner:not(.sv-banner)::after{display:none}
  .hm-banner:not(.sv-banner){padding-bottom:30px}
  .hm-banner:not(.sv-banner)>img.hm-banner-img.tile,.hm-banner:not(.sv-banner)>img.hm-banner-ink{height:clamp(120px,24vw,200px)}
}
@media (max-width:899px){.cp-cat .lbl,.cp-cat span{font-size:var(--ts)!important}}

/* Phone/tablet layout: fewer, bigger cards so the larger type fits */
@media (max-width:899px){
  .hm-card{flex:0 0 min(300px,72vw)}
  .cp-grid{grid-template-columns:repeat(2,1fr)!important}
  .hm-tiles{grid-template-columns:repeat(2,1fr)!important}
  .ab-team{grid-template-columns:repeat(2,1fr)!important}
  .ow-table{display:block;width:100%;min-width:0}
  .ow-table thead{display:none}
  .ow-table tbody,.ow-table tr{display:block;width:100%}
  .ow-table tr{background:#fff;border:1px solid #e5eaf3;border-radius:14px;margin-bottom:12px;padding:6px 16px;box-shadow:0 4px 12px rgba(5,18,43,.05)}
  .ow-table td{display:flex;justify-content:space-between;gap:14px;width:100%;padding:11px 0;border:0;border-bottom:1px solid #eef2f9;text-align:right}
  .ow-table td:first-child{display:block;text-align:left;font-weight:900;color:#05122b;border-bottom:2px solid #ffc107}
  .ow-table td:last-child{border-bottom:0}
  .ow-table td[data-label]:before{content:attr(data-label);font-weight:700;color:#6b7799;text-align:left;flex:none;max-width:45%}
}
@media (max-width:480px){.ab-team{grid-template-columns:1fr!important}.cp-grid{gap:12px}}
@media (max-width:899px){.ow-table td,.ow-table td:before,.ow-table td:first-child{font-size:clamp(16px,2.8vw,20px)!important;line-height:1.4}}
@media (max-width:899px){.cp-grid>*,.cp-card,.cp-body,.cp-text{min-width:0}.cp-card *{overflow-wrap:anywhere;hyphens:auto}.cp-card .hm-btn{padding-left:6px!important;padding-right:6px!important}}@media (max-width:380px){.hm-btn{padding-left:20px!important;padding-right:20px!important}}
@media (max-width:899px){.cp-card *{overflow-wrap:break-word!important;hyphens:none!important}.cp-card .hm-btn svg{display:none}}

/* Small-text bias: lift paragraph/meta/label sizes more than headings */
@media (max-width:899px){
  :root{--tb:clamp(19px,3.4vw,25px);--ts:clamp(18px,3.1vw,23px);--tl:clamp(17px,3vw,22px)}
  .hm-card-name,.cp-name,.owa-grid .cp-name{font-size:clamp(18px,3.2vw,23px)!important}
  .cp-tag,.hm-promo-label{font-size:clamp(15px,2.8vw,19px)!important}
  footer,footer li,footer a,footer p,footer span,footer li span,footer .text-xs,footer .text-sm{font-size:clamp(17.5px,3.1vw,22px)!important}
  footer h4{font-size:clamp(18px,3.2vw,23px)!important}
  .ow-table td,.ow-table td:before,.ow-table td:first-child{font-size:clamp(18px,3.1vw,23px)!important}
  .hm-sub{font-size:clamp(21px,4.6vw,30px)!important}
  .hm-hero-copy p,.ow-hero-copy p,.cp-hero-copy p,.ct-hero-copy p,.ab-hero p{font-size:clamp(19px,3.6vw,25px)!important}
}
@media (max-width:560px){
  .cp-grid,.owa-grid,.sv-grid{grid-template-columns:1fr!important}
  .hm-tiles{grid-template-columns:1fr 1fr!important}
  .hm-tile h3{font-size:19px!important}.hm-tile p{font-size:17px!important}
}
@media (max-width:899px){.cp-tag,.hm-promo-label{font-size:clamp(16.5px,2.9vw,20px)!important}}

/* ===== Centre everything on phones/small tablets ===== */
@media (max-width:899px){
  .hm-step,.hm-big,.hm-tile,.hm-card,.hm-card-more,.cp-card,.cp-body,.cp-text,.ow-benefit,.ab-rep,.sv-step,.ab-item,.hm-trust-item,.ct-quote,.hm-promo-text,.cp-promo,.cp-note,.hm-rep-wrap,.hm-banner-copy{text-align:center!important}
  .hm-step,.hm-big,.hm-tile,.hm-card,.hm-card-more,.cp-body,.cp-text,.ow-benefit,.sv-step,.cp-promo,.cp-note{display:flex;flex-direction:column;align-items:center}
  .hm-step svg,.hm-step .ow-ico,.sv-step .ow-ico{margin-left:auto;margin-right:auto}
  .hm-step .hm-btn,.hm-big .hm-btn,.cp-promo .hm-btn,.cp-note .hm-btn,.ct-quote .hm-btn{align-self:center;margin-left:auto;margin-right:auto}
  .hm-card .hm-btn,.cp-card .hm-btn{align-self:stretch}
  .hm-tile a{display:block;text-align:center;width:100%}
  .hm-reps{justify-content:center}
  .cp-count,.cp-tools{text-align:center;justify-content:center}
  .cp-chips,.cp-brand-chips{justify-content:center}
  .hm-banner-copy,.hm-banner-copy *{text-align:center}
  /* footer */
  footer .grid>div,footer .space-y-3,footer .space-y-4{text-align:center}
  footer ul,footer .flex{justify-content:center}
  footer li.flex{justify-content:center;text-align:center}
  footer img[alt*="Cherry"]{margin-left:auto;margin-right:auto}
  footer .max-w-7xl .flex.flex-wrap{justify-content:center;text-align:center}
}
@media (max-width:899px){
  .hm-tiles>.hm-tile:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
  .cp-main h2,.cp-head h2,.cp-toolbar h2{text-align:center;width:100%}
  footer .bg-\[\#05122b\].text-white.py-4>div,footer .bg-\[\#05122b\].text-white.py-4 .flex{justify-content:center;text-align:center}
  footer .uppercase.tracking-wider{text-align:center;width:100%}
  footer .border-t>div,footer .border-t .flex{justify-content:center!important;text-align:center!important;flex-direction:column;gap:8px}
  footer .border-t span{text-align:center}
}

.hm-hero-art img{mix-blend-mode:normal!important}

/* Desktop: roomier hero (promo cards may peek below the fold) */
@media (min-width:900px){
  .hm-hero{padding:0;min-height:min(calc(100vh - 87px - 170px),600px);display:flex;align-items:center}
  .hm-hero>.hm-hero-grid{width:100%;padding-top:36px;padding-bottom:44px}
  .hm-hero-grid{gap:56px}
  .hm-hero-copy{gap:24px}
  .hm-hero-copy h1{font-size:clamp(28px,2.7vw,40px)}
  .hm-hero-copy .hm-sub{font-size:16px}
  .hm-hero-actions{gap:16px;margin-top:6px}
  .hm-hero-actions .hm-btn{padding:14px 28px;font-size:13px}
  .hm-hero+.hm-wrap,.hm-hero~.hm-section{margin-top:72px}
  .hm-section{margin-top:72px}
}
@media (min-width:860px){
  .hm-banner:not(.sv-banner)>img.hm-banner-ink{height:185px;right:5%;bottom:-4px}
}

/* Clean studio backdrop with a soft floor instead of the hex grid */
.hm-hero{background-color:#f4f7fc}
.hm-hero-art{position:relative}
.hm-hero-art::after{content:"";position:absolute;left:8%;right:6%;bottom:2%;height:9%;background:radial-gradient(ellipse at center,rgba(5,18,43,.20) 0%,rgba(5,18,43,.08) 45%,rgba(5,18,43,0) 72%);filter:blur(5px);z-index:0;pointer-events:none}
.hm-hero-art img{position:relative;z-index:1}

/* Balance: faint hex pattern that fades out behind the products + soft glow */
.hm-hero{position:relative;overflow:hidden}
.hm-hero::before{display:none}
.hm-hero::after{content:"";position:absolute;left:0;top:0;width:60%;height:100%;background:radial-gradient(ellipse 48% 58% at 36% 54%,rgba(244,247,252,.78) 0%,rgba(244,247,252,.5) 38%,rgba(244,247,252,0) 72%);pointer-events:none}
.hm-hero>*{position:relative;z-index:1}
@media (max-width:899px){.hm-hero::after{width:100%;height:60%;top:0;background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(255,255,255,.95),rgba(255,255,255,0))}.hm-hero::before{-webkit-mask-image:radial-gradient(ellipse 70% 40% at 50% 25%,transparent 30%,#000 100%);mask-image:radial-gradient(ellipse 70% 40% at 50% 25%,transparent 30%,#000 100%)}}
.cp-art .base,.ow-hero-art img,.sv-hero-art img.cut{mix-blend-mode:normal!important}
.ow-hero-art{position:relative}
.ow-hero-art::after{content:"";position:absolute;left:8%;right:6%;bottom:2%;height:9%;background:radial-gradient(ellipse at center,rgba(5,18,43,.20) 0%,rgba(5,18,43,.08) 45%,rgba(5,18,43,0) 72%);filter:blur(5px);z-index:0;pointer-events:none}
.ow-hero-art img{position:relative;z-index:1}
@media (min-width:900px){
  .hm-hero:has(.ow-hero-grid,.cp-hero-grid,.sv-hero-grid,.ct-hero-grid){padding:56px 0 64px;min-height:0;display:block}
  .hm-hero:has(.ow-hero-grid,.cp-hero-grid,.sv-hero-grid,.ct-hero-grid)>*{padding-top:0;padding-bottom:0}
}

@media (min-width:1024px){.hm-tiles{grid-template-columns:repeat(6,1fr)!important}}
@media (max-width:899px){.hm-steps{grid-template-columns:minmax(0,1fr)!important}.hm-step{min-width:0}}
@media (min-width:768px) and (max-width:899px){footer .md\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}footer a,footer p{overflow-wrap:anywhere}}
@media (min-width:768px) and (max-width:899px){header nav{gap:16px!important}header nav a{font-size:14px!important}header .hdr-logo{height:46px!important}}
@media (min-width:768px) and (max-width:899px){html header nav a,html #nav-toggle~* nav a{font-size:14px!important}}

/* Home hero typography: sentence case, blue full stop, arrows */
.hm-hero-copy h1{text-transform:none!important;letter-spacing:-.02em;font-weight:800;line-height:1.08}
.hm-hero-copy h1 .hm-dot{color:#ffc107}
.hm-hero-copy .hm-sub{font-weight:500;color:#3d4a6b}
.hm-hero-actions .hm-btn .hm-arrow{flex:none;margin-left:4px}
@media (min-width:900px){
  .hm-hero-copy h1{font-size:clamp(30px,2.9vw,42px)!important;max-width:620px}
  .hm-hero-copy .hm-sub{font-size:18px!important;max-width:540px;line-height:1.55}
  .hm-hero-grid{grid-template-columns:1.12fr 1fr!important;gap:36px!important}
  .hm-hero-art{margin-left:-3%;padding-right:2%}
  .hm-hero-art img{width:100%;max-width:none}
  .hm-hero-actions .hm-btn{padding:14px 28px;font-size:13px}
}

.hm-hero-actions .hm-btn svg.hm-arrow{width:18px!important;height:18px!important;background:none!important;border-radius:0!important;padding:0!important;margin-left:4px;display:inline-block}
.hm-hero-actions .hm-chev{font-size:26px;line-height:1;font-weight:700;margin-left:6px;position:relative;top:-1px}

/* All hero headings: sentence case, blue full stop */
.ow-hero-copy h1,.cp-hero-copy h1,.sv-hero-copy h1,.ct-hero-copy h1,.ab-hero h1,.hm-hero h1{text-transform:none!important;letter-spacing:-.02em;font-weight:800;line-height:1.1}
.hm-hero h1 .hm-dot,.ab-hero h1 .hm-dot{color:#ffc107}
.ab-hero h1 .hm-dot{color:#ffc107}
@media (min-width:900px){
  .ow-hero-copy h1,.cp-hero-copy h1,.sv-hero-copy h1,.ct-hero-copy h1,.ab-hero h1{font-size:clamp(30px,2.9vw,42px)!important}
}
@media (min-width:900px){.hm-hero-copy .hm-sub{font-size:17px!important}.hm-hero-actions .hm-chev{font-size:22px;margin-left:4px}}

/* Print & Signage: white-background renders shown on clean white panels */
.sv-hero-art img{-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important;border-radius:20px;box-shadow:0 18px 44px rgba(5,18,43,.14)}
@media (min-width:900px){
  .sv-promos .sv-bleed{background:#fff;border-radius:14px;padding:6px;object-fit:contain;object-position:center;width:42%;height:auto;max-height:78%;top:50%;right:18px;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none;box-shadow:0 12px 26px rgba(0,0,0,.25)}
}
@media (min-width:860px){
  .sv-banner .sv-b-img{background:#fff;border-radius:14px;padding:6px;object-fit:contain;width:auto;height:70%;top:15%;-webkit-mask-image:none!important;mask-image:none!important;box-shadow:0 18px 30px rgba(0,0,0,.35)}
  .sv-banner .sv-b-l{left:4%;transform:rotate(-5deg)}
  .sv-banner .sv-b-r{right:4%;transform:rotate(5deg)}
}
@media (max-width:899px){.sv-promos .sv-bleed{background:#fff;border-radius:12px;padding:6px;object-fit:contain!important}}
@media (min-width:900px){
  .sv-promos .hm-promo{padding-right:24px}
  .sv-promos .hm-promo-text{max-width:54%}
  .sv-promos .sv-bleed{width:38%;right:16px;max-height:70%}
  .sv-promos .hm-promo-red .sv-bleed{width:40%}
}
@media (min-width:900px){.sv-hero-art{display:flex;justify-content:center}.sv-hero-art img{width:auto;max-width:100%;max-height:420px;object-fit:contain}}

.sv-hero-art img{box-shadow:none!important;border-radius:0!important;background:none!important;filter:drop-shadow(0 22px 26px rgba(5,18,43,.22))}
@media (min-width:900px){.sv-hero-art img{max-height:480px}}

/* Hamburger menu until 1024px (tabs only when there is room) */
@media (max-width:1023px){
  header .md\:flex{display:none!important}
  header label.md\:hidden,header .nav-toggle-label{display:inline-flex!important}
  .nav-toggle-input:checked ~ .mobile-drawer{display:block!important}
  .mobile-drawer{padding:10px 16px 18px}
  .mobile-drawer a{font-size:clamp(17px,2.6vw,21px);padding:13px 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-drawer a:last-child{border-bottom:0}
  .nav-toggle-label svg{width:32px;height:32px}
}

/* Bigger logo on phones and small tablets */
@media (max-width:639px){header .hdr-logo{height:62px!important}}
@media (min-width:640px) and (max-width:1023px){header .hdr-logo{height:70px!important}}