/* Dedicated homepage styles: NOT loaded on any other Supersize Print pages. */
:root {--hp-navy:#092b50;--hp-blue:#066ca9;--hp-sky:#0f88bd;--hp-text:#123d63;--hp-pale:#eaf6fc;}
* {box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {margin:0;color:var(--hp-text);font-family:Arial,Helvetica,sans-serif;background:#fff;-webkit-font-smoothing:antialiased;}
body.hp-menu-open {overflow:hidden;}
button,a {-webkit-tap-highlight-color:transparent;}
button {font:inherit;}
a {color:inherit;}
a:focus-visible,button:focus-visible {outline:3px solid #0c95d4;outline-offset:3px;}
[hidden] {display:none !important;}
.hp-page {min-height:80vh;}
/* Brand on top of home hero; an ordinary navy strip when selecting a category. */
.hp-header {position:absolute;top:0;left:0;right:0;z-index:20;padding:23px clamp(18px,3.7vw,60px);display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.hp-page[data-view="home"] .hp-header {background:linear-gradient(to bottom,rgba(8,20,37,.45),rgba(8,20,37,.02));}
.hp-page:not([data-view="home"]) .hp-header {position:relative;min-height:92px;align-items:center;padding-top:12px;padding-bottom:12px;background:linear-gradient(112deg,#035794,#1c99b9 56%,#074d87);}
.hp-brand {width:clamp(198px,24vw,318px);line-height:0;display:block;flex:0 1 auto;}
.hp-brand img {width:100%;height:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));}
.hp-header-actions {display:flex;align-items:center;gap:25px;padding-top:12px;flex-shrink:0;}
.hp-page:not([data-view="home"]) .hp-header-actions {padding-top:0;}
.hp-head-link {font-size:14px;color:#fff;text-decoration:none;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.35);}
.hp-head-link:hover{text-decoration:underline;}
.hp-menu-trigger {width:46px;height:44px;padding:10px 8px;border:0;background:rgba(0,0,0,.22);border-radius:9px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:5px;cursor:pointer;}
.hp-menu-trigger span {width:27px;height:3px;border-radius:9px;background:#fff;display:block;}
/* The hero is a real <img>: if CSS is blocked it still displays, unlike the first build. */
.hp-hero {position:relative;background:#253b4c;}
.hp-hero-photo {height:clamp(380px,51vw,675px);overflow:hidden;}
.hp-hero-photo picture, .hp-hero-photo img {width:100%;height:100%;display:block;}
.hp-hero-photo img {object-fit:cover;object-position:center top;}
.hp-hero-caption {position:absolute;bottom:0;left:0;right:0;min-height:98px;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:34px 24px 21px;background:linear-gradient(to bottom,transparent,rgba(8,19,31,.7));}
.hp-hero-caption h1 {font-size:clamp(20px,2.05vw,28px);line-height:1.35;color:#fff;font-weight:600;margin:0;text-shadow:0 2px 7px rgba(0,0,0,.43);}
.hp-page:not([data-view="home"]) .hp-hero {display:none;}
/* Binary choice */
.hp-panel {max-width:1230px;margin:0 auto;}
.hp-home-panel {padding:22px 30px 36px;}
.hp-promise {margin:0 0 22px;text-align:center;color:#075b93;font-weight:700;font-size:clamp(17px,1.62vw,23px);}
.hp-choice-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.hp-choice {min-height:145px;text-decoration:none;color:#0b3b6a;background:#fff;display:flex;align-items:center;gap:22px;padding:19px 25px;border:1px solid #cfdfec;border-radius:17px;box-shadow:0 6px 28px rgba(6,81,140,.09);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.hp-choice:hover {transform:translateY(-3px);border-color:#2592cb;box-shadow:0 12px 33px rgba(9,92,146,.17);}
.hp-choice-icon {color:#128bc4;width:65px;flex:0 0 65px;display:flex;align-items:center;}
.hp-choice-icon svg {width:65px;height:65px;}
.hp-choice-text {display:flex;flex:1;flex-flow:column;min-width:0;}
.hp-choice-text strong {font-size:clamp(24px,2.3vw,33px);letter-spacing:-.035em;line-height:1.1;}
.hp-choice-text>span {font-size:18px;margin-top:5px;}
.hp-choice-text small {font-size:13px;color:#62809a;margin-top:9px;}
.hp-round-arrow {width:43px;height:43px;flex:0 0 43px;border-radius:50%;background:linear-gradient(150deg,#099bd0,#055697);position:relative;}
.hp-round-arrow:after,.hp-nav-chevron:after {content:"";position:absolute;border-right:2px solid currentColor;border-top:2px solid currentColor;width:10px;height:10px;transform:rotate(45deg);}
.hp-round-arrow:after{color:white;left:15px;top:15px;}
.hp-trust {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;color:#607d93;font-size:13px;margin:25px 0 0;}
.hp-trust span:not(:first-child):before,.hp-trust a:before {content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#a4b9c8;vertical-align:middle;margin-right:18px;}
.hp-trust a {color:#075c97;text-decoration:underline;text-underline-offset:2px;}
.hp-noscript {text-align:center;}
/* In-page material/use galleries */
.hp-catalogue {padding:28px 30px 65px;}
.hp-back {background:#eaf5fb;border:1px solid #d5e9f6;color:#095a91;border-radius:9px;padding:11px 15px;cursor:pointer;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:9px;}
.hp-back:hover {background:#d9eef8;}
.hp-back-arrow {display:inline-block;border-left:2px solid #0a639c;border-bottom:2px solid #0a639c;height:8px;width:8px;transform:rotate(45deg);}
.hp-catalogue-title {text-align:center;margin:3px 0 30px;}
.hp-catalogue-title p {margin:0;color:#1a80b4;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.hp-catalogue-title h2 {color:#09395e;font-size:clamp(29px,3.5vw,44px);margin:4px 0 9px;letter-spacing:-.03em;}
.hp-catalogue-title>span {color:#557187;font-size:17px;}
.hp-products {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.hp-product {color:#123f65;text-decoration:none;border-radius:13px;overflow:hidden;border:1px solid #d7e5ee;box-shadow:0 6px 19px rgba(6,57,96,.08);position:relative;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;}
.hp-product:hover {transform:translateY(-3px);border-color:#2592cb;box-shadow:0 10px 27px rgba(6,57,96,.14);}
.hp-product-photo {height:158px;width:100%;background:#eef7fc;display:block;overflow:hidden;}
.hp-product-photo img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#eaf6fc;padding:12px 0;}
.hp-product-info {display:flex;flex-direction:column;gap:3px;padding:14px 32px 14px 16px;min-height:89px;}
.hp-product-info strong {font-size:17px;line-height:1.25;}
.hp-product-info>span {color:#5a768a;font-size:13px;line-height:1.3;}
.hp-product-arrow {position:absolute;right:16px;bottom:23px;width:9px;height:9px;border-top:2px solid #087bb6;border-right:2px solid #087bb6;transform:rotate(45deg);}
.hp-catalogue-help {text-align:center;color:#58748c;margin:29px 0 0;font-size:16px;}
.hp-catalogue-help a {color:#006d9e;text-decoration:underline;text-underline-offset:2px;}
/* Sliding menu */
.hp-menu-backdrop {position:fixed;inset:0;z-index:200;background:rgba(4,17,34,.51);}
.hp-drawer {position:fixed;z-index:201;top:0;right:0;bottom:0;width:min(380px,90vw);background:#fff;box-shadow:-16px 0 45px rgba(4,20,35,.2);padding:25px 28px;overflow-y:auto;transform:translateX(105%);visibility:hidden;transition:transform .24s ease,visibility .24s;}
.hp-drawer.hp-drawer-open {transform:translateX(0);visibility:visible;}
.hp-drawer-title {display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:#0d416b;font-size:24px;}
.hp-drawer-title button {border:0;border-radius:8px;background:#eaf2f7;color:#124c78;width:42px;height:42px;cursor:pointer;}
.hp-drawer-title svg {width:22px;height:22px;}
.hp-drawer>a {display:flex;justify-content:space-between;align-items:center;min-height:47px;padding:11px 9px;border-radius:7px;color:#154365;font-size:16px;text-decoration:none;}
.hp-drawer>a:hover,.hp-drawer>a:focus-visible {background:#eaf5fb;color:#035e97;}
.hp-drawer hr {border:0;border-top:1px solid #dce8f0;margin:12px 0;}
.hp-nav-chevron {position:relative;display:inline-block;width:24px;height:20px;color:#0674ab;}
.hp-nav-chevron:after{right:7px;top:6px;}
/* Shared information always available, but with the new site's typography and spacing. */
.hp-footer {background:#063c69;color:#dcecf7;margin-top:0;padding:39px 26px 21px;}
.hp-footer-inner {max-width:1200px;margin:0 auto;}
.hp-footer-top {display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.hp-footer-intro {display:flex;flex-flow:column;gap:7px;max-width:380px;line-height:1.45;font-size:14px;}
.hp-footer-intro strong {font-size:23px;color:white;}
.hp-footer-links {display:flex;gap:50px;flex-wrap:wrap;}
.hp-footer-links>div {display:flex;flex-direction:column;gap:9px;min-width:130px;}
.hp-footer-links strong {color:white;margin-bottom:6px;}
.hp-footer-links a {font-size:14px;color:#dcecf7;text-decoration:none;}
.hp-footer-links a:hover {text-decoration:underline;}
.hp-footer-bottom {display:flex;gap:15px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid rgba(255,255,255,.2);margin-top:35px;padding-top:17px;font-size:12px;color:#c4d8e8;}
@media(max-width:900px) {.hp-products{grid-template-columns:repeat(3,minmax(0,1fr));}.hp-choice{gap:13px;padding:15px;}.hp-choice-icon{width:49px;flex-basis:49px;}.hp-choice-icon svg{width:49px;height:49px;}}
@media(max-width:640px){
 .hp-header{padding:13px 13px;align-items:center;}.hp-page:not([data-view="home"]) .hp-header{min-height:67px;padding:10px 13px;}
 .hp-brand{width:clamp(160px,48vw,210px);}.hp-header-actions{gap:9px;padding:0;}.hp-head-link{display:none;}.hp-menu-trigger{width:41px;height:41px;}
 .hp-hero-photo{height:auto;aspect-ratio:1672 / 941;}.hp-hero-photo img{object-fit:contain;object-position:center;}
 .hp-hero-caption{position:relative;min-height:76px;padding:15px 14px 17px;background:#173d61;align-items:center;}
 .hp-hero-caption h1{font-size:clamp(17px,4.5vw,21px);line-height:1.35;text-shadow:none;}
 .hp-home-panel{padding:17px 14px 26px;}.hp-promise{font-size:16px;line-height:1.35;margin-bottom:16px;}
 .hp-choice-grid{grid-template-columns:1fr;gap:13px;}.hp-choice{min-height:115px;padding:16px;gap:14px;border-radius:14px;}
 .hp-choice-icon,.hp-choice-icon svg{width:47px;}.hp-choice-icon{flex-basis:47px;}
 .hp-choice-text strong{font-size:22px;}.hp-choice-text>span{font-size:15px;margin-top:3px;}.hp-choice-text small{font-size:12px;margin-top:5px;}
 .hp-round-arrow{width:34px;height:34px;flex-basis:34px;}.hp-round-arrow:after{width:8px;height:8px;top:12px;left:12px;}
 .hp-trust{gap:8px;margin-top:18px;line-height:1.7;font-size:12px;}.hp-trust span:not(:first-child):before,.hp-trust a:before{margin-right:8px;}
 .hp-catalogue{padding:18px 14px 45px;}.hp-catalogue-title{margin:20px 0;}.hp-catalogue-title>span{font-size:15px;}
 .hp-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.hp-product-photo{height:130px;}.hp-product-photo img{padding:10px 0;}.hp-product-info{padding:12px 23px 12px 12px;min-height:93px;}.hp-product-info strong{font-size:15px;}.hp-product-info>span{font-size:12px;}.hp-product-arrow{right:10px;bottom:18px;}
 .hp-footer{padding:29px 18px 20px;}.hp-footer-links{gap:24px;}.hp-footer-links>div{min-width:125px;}
}
@media(max-width:360px){.hp-products{grid-template-columns:1fr;}.hp-product-photo{height:166px;}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

@keyframes hp-fade-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.hp-panel:not([hidden]){animation:hp-fade-in .22s ease-out;}}

/* v5: One continuous photograph across desktop hero and shopping section.
   Only the lower shopping panel has a rectangular tint; the headline is
   positioned directly on the photograph. Buttons are completely opaque. */
.hp-hero-stack {
    position: relative;
    background-color: #253b4c;
    background-image: url('../Images/Home2026-Hero.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
/* The real IMG remains in the markup for accessibility and layout sizing.
   Its visual is provided by the single, shared background on the wrapper. */
.hp-hero-stack .hp-hero { background: transparent; }
.hp-hero-stack .hp-hero-photo img { opacity: 0; }
/* Headline over the photograph: NO rectangular background behind it.
   Text shadow keeps the white text readable on bright parts of the image. */
.hp-hero-stack .hp-hero-caption {
    background: transparent;
    min-height: 69px;
    padding: 16px 20px 18px;
}
.hp-hero-stack .hp-hero-caption h1 {
    text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.65);
}
/* ONLY the lower shopping rectangle is uniformly shaded; no second image. */
.hp-hero-stack .hp-home-panel {
    position: relative;
    max-width: none;
    padding: 24px max(24px,calc((100% - 1170px) / 2)) 35px;
    background: rgba(9,24,37,.52);
}
/* White typography in the tinted shopping panel; buttons stay SOLID white. */
.hp-hero-stack .hp-promise { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.hp-hero-stack .hp-trust { color: #edf6fb; }
.hp-hero-stack .hp-trust a { color: #fff; }
.hp-hero-stack .hp-choice { background: #fff; }
/* v6: On short but wide laptop screens, keep the hero prominent.
   The large shopping buttons begin near the foot of the viewport instead of
   squeezing the entire page (including the footer) above the fold. */
@media (min-width: 901px) and (max-height: 820px) {
    .hp-hero-stack .hp-hero-photo {
        height: clamp(480px, 78vh, 640px);
    }
    .hp-hero-stack .hp-home-panel {
        padding-top: 18px;
        padding-bottom: 26px;
    }
    .hp-hero-stack .hp-promise { margin-bottom: 18px; }
    .hp-hero-stack .hp-choice { min-height: 132px; }
}
/* Tablet and intermediate narrow browser windows: the full photo is
   displayed below a compact logo bar, rather than aggressively cropping it
   and cramming two cards over the image. No image is duplicated. */
@media (min-width: 641px) and (max-width: 900px) {
    .hp-page[data-view="home"] .hp-header {
        position: relative;
        min-height: 73px;
        align-items: center;
        padding: 12px 20px;
        background: linear-gradient(112deg,#035794,#1c99b9 56%,#074d87);
    }
    .hp-page[data-view="home"] .hp-header-actions { padding-top: 0; gap: 16px; }
    .hp-page[data-view="home"] .hp-head-link { display: none; }
    .hp-hero-stack { background: none; }
    .hp-hero-stack .hp-hero-photo {
        height: auto;
        aspect-ratio: 1672 / 941;
    }
    .hp-hero-stack .hp-hero-photo img {
        opacity: 1;
        object-fit: contain;
        object-position: center;
    }
    .hp-hero-stack .hp-hero-caption {
        padding: 16px 20px 16px;
        min-height: 0;
    }
    .hp-hero-stack .hp-home-panel {
        background: #edf6fb;
        padding: 19px 20px 30px;
    }
    .hp-hero-stack .hp-promise { color: #075b93; text-shadow: none; }
    .hp-hero-stack .hp-trust { color: #607d93; }
    .hp-hero-stack .hp-trust a { color: #075c97; }
    .hp-hero-stack .hp-choice { min-height: 128px; }
}
@media (min-width: 641px) and (max-width: 760px) {
    .hp-choice-grid { grid-template-columns: 1fr; gap: 13px; }
    .hp-hero-stack .hp-home-panel { max-width: none; }
}
/* Mobile: use the full, uncropped photo and a compact brand bar.
   The tall phone layout cannot show the entire 16:9 photo behind all buttons
   without losing the subjects, so the button panel becomes pale and readable. */
@media (max-width: 640px) {
    .hp-page[data-view="home"] .hp-header {
        position: relative;
        background: linear-gradient(112deg,#035794,#1c99b9 56%,#074d87);
        min-height: 68px;
    }
    .hp-hero-stack { background: none; }
    .hp-hero-stack .hp-hero-photo { height: auto; aspect-ratio: 1672 / 941; }
    .hp-hero-stack .hp-hero-photo img { opacity: 1; }
    /* On phones the heading overlays the bottom of the photograph too.
       No solid blue heading strip; the text shadow provides contrast. */
    .hp-hero-stack .hp-hero-caption {
        position: absolute;
        bottom: 0;
        background: transparent;
        min-height: 0;
        padding: 15px 14px;
    }
    .hp-hero-stack .hp-home-panel {
        padding: 16px 14px 26px;
        background: #edf6fb;
    }
    .hp-hero-stack .hp-promise { color: #075b93; text-shadow: none; }
    .hp-hero-stack .hp-trust { color: #607d93; }
    .hp-hero-stack .hp-trust a { color: #075c97; }
}

/* v7: Genuine Supersize Print SVG, 30-year message and lightweight nav icons. */
.hp-brand {text-decoration:none;color:#fff;}
.hp-brand-tagline {
    display:block;
    padding-top:7px;
    font-size:12px;
    line-height:1.35;
    font-weight:400;
    letter-spacing:.015em;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.hp-brand-tagline span {display:block;}
.hp-header-actions {gap:19px;}
.hp-head-link {display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap;}
.hp-head-link svg {
    width:24px;height:24px;display:block;
    fill:none;stroke:#fff;stroke-width:2.15;
    stroke-linecap:round;stroke-linejoin:round;
    flex-shrink:0;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.hp-head-link:hover svg {stroke:#e0f6ff;}
/* Softer typeweight and white text against the dark photographic panel. */
.hp-hero-stack .hp-promise {font-weight:400;color:#fff;}
@media (min-width:641px) and (max-width:900px) {
    /* Keep useful navigation available on tablets as icon-only links. */
    .hp-page[data-view="home"] .hp-head-link {display:inline-flex;}
    .hp-head-link span {display:none;}
    .hp-brand-tagline-tail {display:none;}
    .hp-hero-stack .hp-promise {color:#075b93;}
}
@media (max-width:640px) {
    .hp-brand {width:clamp(133px,40vw,166px);}
    .hp-brand-tagline {padding-top:3px;font-size:10px;line-height:1.25;}
    .hp-brand-tagline-tail {display:none;}
    .hp-header {gap:8px;}
    .hp-header-actions {gap:8px;}
    .hp-head-link {display:inline-flex;width:29px;height:36px;}
    .hp-head-link svg {width:22px;height:22px;}
    .hp-head-link span {display:none;}
    .hp-menu-trigger {flex-shrink:0;}
    /* Mobile uses the light panel introduced in v6. */
    .hp-hero-stack .hp-promise {color:#075b93;}
}