:root{
  --navy:#0a2a3e;
  --navy-dark:#061923;
  --green:#a8c94a;
  --ink:#11191d;
  --muted:#667175;
  --paper:#f3f0e9;
  --paper-2:#ebe7df;
  --white:#ffffff;
  --line:#c9ccc8;
  --charcoal:#20282b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}

.header{
  height:86px;
  background:var(--navy);
  display:flex;
  align-items:center;
  padding:0 4vw;
  border-bottom:1px solid #ffffff1a;
  position:sticky;
  top:0;
  z-index:50;
}
.brand{
  margin-right:44px;
  height:100%;
  display:flex;
  align-items:center;
}
.brand-box{
  width:188px;
  height:58px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
}
.brand-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.nav{
  display:flex;
  align-items:stretch;
  gap:0;
  flex:1;
  height:100%;
}
.nav>a,
.services-nav>button{
  height:100%;
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  margin:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  white-space:nowrap;
  cursor:pointer;
}
.nav>a:hover,
.services-nav>button:hover{
  color:#fff;
  background:#ffffff0d;
}
.services-nav{
  height:86px;
  display:flex;
  align-items:stretch;
  position:relative;
  margin:0;
  padding:0;
}
.services-nav>button span{
  display:inline-block;
  margin-left:7px;
  transform:translateY(-1px);
  opacity:.7;
}
.service-menu{
  position:absolute;
  left:0;
  top:86px;
  width:370px;
  background:#fff;
  border:1px solid #d8d9d6;
  border-top:4px solid var(--green);
  box-shadow:0 18px 35px #0002;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:.15s ease;
}
.services-nav:hover .service-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.service-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 19px;
  border-bottom:1px solid #ececea;
  color:var(--ink);
}
.service-menu a:hover{
  background:#f4f2ed;
}
.service-menu strong{font-size:13px}
.service-menu small{
  font-size:10px;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}
.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  height:100%;
}
.search-button,
.basket{
  height:40px;
  border:1px solid #ffffff4a;
  background:transparent;
  color:#fff;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
}
.search-button:hover{background:#ffffff0d}
.basket{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:visible;
}
.basket{
  transition:transform .10s ease,box-shadow .10s ease,filter .10s ease;
}
.basket.basket-pressing{
  transform:translateY(2px) scale(.975);
  box-shadow:inset 0 2px 5px #0000002b, 0 1px 0 #ffffff55;
  filter:brightness(.95);
}
.basket span{
  display:inline-grid;
  place-items:center;
  width:auto;
  min-width:20px;
  height:20px;
  padding:0 4px;
  background:var(--navy);
  color:#fff;
  margin-left:7px;
  font-family:Arial,Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  line-height:20px;
  flex:0 0 auto;
}

.hero{
  min-height:590px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:70px;padding:76px 6vw 82px;background:var(--paper)
}
.overline{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--navy);margin-bottom:19px}
.hero h1{
  margin:0;font-size:74px;line-height:.94;letter-spacing:-4.2px;color:var(--ink);max-width:730px
}
.hero p{font-size:18px;line-height:1.58;color:var(--muted);max-width:650px;margin:28px 0 30px}
.hero-buttons{display:flex;gap:11px}
.primary,.secondary{padding:15px 19px;font-size:12px;font-weight:900}
.primary{background:var(--navy);color:#fff}
.secondary{border:1px solid var(--ink);background:transparent}
.hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:45px;padding-top:20px;border-top:1px solid #c7c9c5}
.hero-proof span{font-size:11px;color:var(--muted)}.hero-proof b{color:var(--ink)}
.hero-visual{display:flex;justify-content:center}
.visual-frame{width:min(100%,590px);background:#fff;padding:14px;box-shadow:0 20px 50px #1a282f12}
.visual-label{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#6c7477;margin:2px 0 9px}
.visual-placeholder{
  height:390px;background:linear-gradient(135deg,#b9b6ad,#d7d4cc);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#72726d;font-weight:800
}
.visual-placeholder:before{
  content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 49.7%,#ffffff33 50%,transparent 50.3%),
  linear-gradient(transparent 49.7%,#ffffff33 50%,transparent 50.3%);
  background-size:90px 90px
}
.visual-placeholder span{position:relative;z-index:1;background:#ffffffcc;padding:9px 12px;font-size:11px}
.visual-caption{display:flex;justify-content:space-between;gap:15px;padding:13px 3px 2px}
.visual-caption strong{font-size:13px}.visual-caption span{font-size:10px;color:var(--muted)}

.quick-path{background:#fff;padding:55px 6vw 65px;border-top:1px solid #dbddd9;border-bottom:1px solid #dbddd9}
.quick-title small,.simple-head small,.shop-heading small,.help small{font-size:10px;font-weight:900;letter-spacing:1.8px;color:var(--navy)}
.quick-title h2{font-size:34px;letter-spacing:-1.4px;margin:7px 0 28px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cfd2ce;border:1px solid #cfd2ce}
.quick-grid a{background:#fff;padding:24px 20px;min-height:145px;display:flex;flex-direction:column;transition:.15s}
.quick-grid a:hover{background:var(--navy);color:#fff}
.quick-grid span{font-size:10px;color:#7a8283;margin-bottom:auto}.quick-grid a:hover span{color:#c3ced3}
.quick-grid strong{font-size:18px;line-height:1.1;margin-top:24px}
.quick-grid small{font-size:11px;color:var(--muted);margin-top:6px}.quick-grid a:hover small{color:#c3ced3}

.services{padding:100px 6vw 110px;background:var(--paper-2)}
.simple-head{display:grid;grid-template-columns:1fr 1.2fr;align-items:end;gap:60px;margin-bottom:55px}
.simple-head h2{font-size:56px;line-height:.96;letter-spacing:-3px;margin:7px 0 0}
.simple-head p{margin:0;color:var(--muted);line-height:1.6;max-width:520px}
.service-list{border-top:2px solid var(--ink)}
.service-list article{
  display:grid;grid-template-columns:80px 1fr 140px;gap:24px;align-items:center;
  padding:27px 0;border-bottom:1px solid #bfc3bf
}
.service-no{font-size:12px;color:#8a9191}
.service-copy h3{font-size:25px;letter-spacing:-.8px;margin:0 0 5px}
.service-copy span{display:inline-block;font-size:9px;letter-spacing:1px;font-weight:900;color:var(--navy);margin-bottom:8px}
.service-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.service-list article>a{justify-self:end;font-size:10px;font-weight:900;text-transform:uppercase;border-bottom:1px solid;padding-bottom:4px}

.gallery{background:#f8f7f3;padding:100px 0 90px;overflow:hidden}
.gallery-copy{padding:0 6vw}
.gallery-rail{overflow:hidden}
.gallery-track{display:flex;width:max-content;gap:12px;animation:rail 36s linear infinite}
.gallery-rail:hover .gallery-track{animation-play-state:paused}
@keyframes rail{to{transform:translateX(-50%)}}
.gallery-item{
  width:400px;height:285px;background:#d7d3c9;display:flex;align-items:flex-end;justify-content:space-between;
  padding:18px;position:relative;overflow:hidden
}
.gallery-item:nth-child(3n){width:320px}
.gallery-item.video{background:var(--navy);color:#fff}
.gallery-item span{font-size:9px;font-weight:900;letter-spacing:1.3px}
.gallery-item b{font-size:52px;color:var(--navy)}
.gallery-item.video b{color:#fff}
.gallery-item:before{
  content:"";position:absolute;inset:0;background-image:
  linear-gradient(#ffffff18 1px,transparent 1px),
  linear-gradient(90deg,#ffffff18 1px,transparent 1px);
  background-size:50px 50px
}
.gallery-item>*{position:relative;z-index:1}

.shop{padding:100px 5vw 120px;background:var(--paper)}
.shop-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
.shop-heading h2{font-size:52px;letter-spacing:-2.8px;margin:7px 0 4px}
.shop-heading p{margin:0;color:var(--muted)}
.search-wrap{position:relative}
.search-wrap input{
  width:310px;height:46px;background:#fff;border:1px solid #c9cdca;padding:0 40px 0 14px;font-size:13px
}
.search-wrap span{position:absolute;right:14px;top:13px;color:var(--muted)}
.filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.filter-row button{
  border:1px solid #c9cdca;background:#fff;padding:10px 13px;font-size:10px;font-weight:900;cursor:pointer
}
.filter-row button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.shop-status{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:14px 1px;border-top:1px solid #c9cdca}
.shop-status strong{color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.product-card{background:#fff;border:1px solid #d1d4d1;cursor:pointer;transition:.16s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 15px 34px #17202612}
.product-image{height:310px;background:#efede7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:contain;padding:22px}
.placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9a9d98}
.placeholder span{font-size:48px;font-weight:900;color:#d1d0cb}
.placeholder small{font-size:8px;letter-spacing:1.3px;font-weight:900;margin-top:7px}
.product-info{padding:20px}
.category{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--navy);text-transform:uppercase}
.product-info h3{font-size:20px;line-height:1.08;letter-spacing:-.6px;margin:10px 0 8px}
.product-info>p{height:55px;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 15px}
.price-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d1d4d1;border-bottom:1px solid #d1d4d1;margin-bottom:15px}
.price-row div{padding:12px 0}.price-row div+div{border-left:1px solid #d1d4d1;padding-left:15px}
.price-row strong{display:block;font-size:19px}.price-row small{font-size:8px;font-weight:900;color:#747d7d;letter-spacing:.9px}
.product-info button{width:100%;height:42px;background:var(--navy);color:#fff;border:0;font-weight:900;cursor:pointer}

.help{
  background:#fff;padding:65px 6vw;display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid #d6d8d4
}
.help h2{font-size:42px;letter-spacing:-2px;margin:8px 0}.help p{color:var(--muted);max-width:650px;margin:0}
.help a{background:var(--navy);color:#fff;padding:15px 20px;font-size:12px;font-weight:900}

footer{
  background:var(--navy-dark);color:#fff;padding:46px 5vw;display:grid;grid-template-columns:230px 1fr 1fr;gap:50px;align-items:end
}
.footer-box{width:200px;background:var(--navy)}
footer small{font-size:9px;letter-spacing:1.3px;color:#8ba0a9}
footer p{margin:7px 0 0;color:#c1ccd0}
.footer-note{text-align:right;font-size:10px;color:#92a4ab;line-height:1.6}
.footer-note strong{color:#fff}

.modal{display:none;position:fixed;inset:0;z-index:100}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:#07131bd1}
.modal-panel{position:absolute;inset:5vh 5vw;background:var(--paper);overflow:auto;padding:45px}
.modal-close{position:absolute;right:15px;top:12px;width:38px;height:38px;background:var(--ink);color:#fff;border:0;font-size:25px}
.product-page{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.modal-image{min-height:530px;background:#ebe8e1;display:flex;align-items:center;justify-content:center}
.modal-image img{width:100%;height:530px;object-fit:contain;padding:30px}
.modal-info h2{font-size:39px;line-height:1;letter-spacing:-1.7px;margin:10px 0}
.sku{font-size:9px;font-weight:900;letter-spacing:1px;color:#7b8384;text-transform:uppercase}
.modal-price-row{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);border-bottom:1px solid #c2c6c3;margin:25px 0}
.modal-price-row div{padding:13px 0}.modal-price-row div+div{border-left:1px solid #c2c6c3;padding-left:18px}
.modal-price-row strong{display:block;font-size:27px}.modal-price-row small{font-size:8px;font-weight:900}
.long{font-size:14px;line-height:1.7;color:#505b5e}
.modal-info section{padding:15px 0;border-top:1px solid #c7cac7}
.modal-info section b{font-size:9px;letter-spacing:1.2px}
.modal-info section p{font-size:13px;line-height:1.6;color:#5d686a}
.add{background:var(--navy);color:#fff;border:0;padding:15px 20px;font-weight:900}

@media(max-width:1050px){
  .nav{gap:17px}.hero{grid-template-columns:1fr}.hero-visual{margin-top:20px}.product-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav{display:none}.header-right{margin-left:auto}.search-button{display:none}
  .hero{padding:55px 5vw}.hero h1{font-size:54px}.hero-proof{gap:15px}
  .simple-head{display:block}.simple-head p{margin-top:20px}.simple-head h2{font-size:44px}
  .service-list article{grid-template-columns:45px 1fr}.service-list article>a{grid-column:2;justify-self:start}
  .shop-heading{display:block}.search-wrap{margin-top:20px}.search-wrap input{width:100%}
  .product-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}
  .help{align-items:flex-start;flex-direction:column}
  footer{grid-template-columns:1fr}.footer-note{text-align:left}
  .product-page{grid-template-columns:1fr}.modal-panel{inset:0;padding:45px 18px}
}

.footer-box{
  width:200px;
  background:var(--navy);
  padding:5px 11px;
}

/* Real LNK project photography */
.visual-placeholder.has-photo{
  padding:0;
  background:#d5d2ca;
}
.visual-placeholder.has-photo:before{display:none}
.visual-placeholder.has-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-item.has-image{
  padding:0;
  background:#c9c5bb;
}
.gallery-item.has-image:before{display:none}
.gallery-item.has-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.gallery-item.has-image:hover img{
  transform:scale(1.025);
}
.gallery-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:18px;
  background:linear-gradient(180deg,transparent 52%,rgba(4,17,25,.68) 100%);
  color:white;
}
.gallery-overlay span{
  font-size:9px;
  letter-spacing:1.2px;
  font-weight:900;
}
.gallery-overlay b{
  font-size:28px;
  color:white;
}
.future-video{
  background:var(--navy);
  border:1px solid #ffffff18;
}
.future-video small{
  position:absolute;
  top:18px;
  right:18px;
  font-size:8px;
  letter-spacing:1px;
  color:#b6c3ca;
  font-weight:900;
}


600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
}

/* Typography system */
body{
  font-family:var(--body);
  font-size:17px;
}

h1,h2,h3,
.nav>a,.services-nav>button,
.quick-grid strong,
.service-copy h3,
.product-info h3,
.modal-info h2,
.primary,.secondary,
.filter-row button,
.product-info button,
.help a{
  font-family:var(--display);
}

/* Header: larger, stronger, calmer */
.header{
  height:104px;
  padding:0 4.5vw;
}
.brand{
  margin-right:54px;
}
.brand-box{
  width:240px;
  height:78px;
}
.nav{
  gap:2px;
}
.nav>a,
.services-nav>button{
  min-height:104px;
  height:104px;
  padding:0 22px;
  font-size:15px;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:1.15px;
}
.services-nav{
  height:104px;
}
.service-menu{
  top:104px;
  width:420px;
}
.service-menu strong{
  font-size:16px;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.service-menu small{
  font-size:11px;
}
.search-button,.basket{
  height:48px;
  padding:0 18px;
  font-size:13px;
  text-transform:uppercase;
  font-family:var(--display);
  letter-spacing:.8px;
}

/* Hero: much bigger */
.hero{
  min-height:700px;
  gap:80px;
  padding:88px 6vw 94px;
}
.overline{
  font-size:13px;
  letter-spacing:2.5px;
  margin-bottom:24px;
}
.hero h1{
  font-size:98px;
  line-height:.86;
  letter-spacing:-3.2px;
  font-weight:700;
  text-transform:uppercase;
}
.hero p{
  font-size:21px;
  line-height:1.55;
  max-width:720px;
  margin:34px 0 34px;
}
.primary,.secondary{
  padding:17px 24px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.hero-proof{
  gap:34px;
  margin-top:52px;
  padding-top:24px;
}
.hero-proof span{
  font-size:13px;
}
.visual-frame{
  width:min(100%,680px);
  padding:16px;
}
.visual-placeholder{
  height:485px;
}
.visual-caption{
  padding:16px 4px 3px;
}
.visual-caption strong{
  font-size:16px;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.visual-caption span{
  font-size:12px;
}

/* Start-here area */
.quick-path{
  padding:72px 6vw 78px;
}
.quick-title small,.simple-head small,.shop-heading small,.help small{
  font-size:12px;
  letter-spacing:2px;
}
.quick-title h2{
  font-family:var(--display);
  font-size:49px;
  font-weight:700;
  letter-spacing:-1px;
  margin:9px 0 34px;
}
.quick-grid a{
  min-height:185px;
  padding:30px 26px;
}
.quick-grid span{
  font-size:12px;
}
.quick-grid strong{
  font-size:25px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.1px;
}
.quick-grid small{
  font-size:13px;
  margin-top:9px;
}

/* Services: more commanding */
.services{
  padding:125px 6vw 135px;
}
.simple-head{
  margin-bottom:70px;
}
.simple-head h2{
  font-family:var(--display);
  font-size:76px;
  line-height:.9;
  letter-spacing:-1.8px;
  font-weight:700;
  text-transform:uppercase;
}
.simple-head p{
  font-size:17px;
  line-height:1.65;
}
.service-list article{
  grid-template-columns:90px 1fr 165px;
  gap:30px;
  padding:36px 0;
}
.service-no{
  font-size:14px;
}
.service-copy h3{
  font-size:34px;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.4px;
  margin-bottom:8px;
}
.service-copy span{
  font-size:11px;
  letter-spacing:1.2px;
}
.service-copy p{
  font-size:15px;
  line-height:1.55;
}
.service-list article>a{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.8px;
}

/* Gallery: much larger imagery */
.gallery{
  padding:125px 0 110px;
}
.gallery-copy{
  margin-bottom:70px;
}
.gallery-item{
  width:540px;
  height:385px;
}
.gallery-item:nth-child(3n){
  width:430px;
}
.gallery-overlay{
  padding:23px;
}
.gallery-overlay span{
  font-size:12px;
  letter-spacing:1.4px;
}
.gallery-overlay b{
  font-size:38px;
}
.future-video small{
  font-size:10px;
}
.gallery-item.video b{
  font-size:72px;
}

/* Shop: larger and clearer */
.shop{
  padding:125px 5vw 145px;
}
.shop-heading{
  margin-bottom:48px;
}
.shop-heading h2{
  font-family:var(--display);
  font-size:72px;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:-1.6px;
  font-weight:700;
}
.shop-heading p{
  font-size:16px;
}
.search-wrap input{
  width:370px;
  height:52px;
  font-size:15px;
}
.filter-row{
  gap:9px;
  margin-bottom:20px;
}
.filter-row button{
  padding:13px 17px;
  font-size:14px;
  font-weight:700;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.7px;
}
.shop-status{
  font-size:12px;
  padding:17px 1px;
}
.product-grid{
  gap:20px;
}
.product-image{
  height:380px;
}
.product-info{
  padding:24px;
}
.category{
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:800;
}
.product-info h3{
  font-size:28px;
  line-height:.95;
  min-height:66px;
  text-transform:uppercase;
  letter-spacing:-.3px;
  margin:14px 0 11px;
}
.product-info>p{
  font-size:14px;
  line-height:1.55;
  height:66px;
  margin-bottom:18px;
}
.price-row div{
  padding:15px 0;
}
.price-row strong{
  font-size:23px;
}
.price-row small{
  font-size:10px;
}
.product-info button{
  height:48px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

/* Help / footer */
.help{
  padding:82px 6vw;
}
.help h2{
  font-family:var(--display);
  font-size:64px;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:-1px;
}
.help p{
  font-size:16px;
  line-height:1.6;
}
.help a{
  padding:17px 23px;
  font-size:15px;
  text-transform:uppercase;
}

footer{
  padding:56px 5vw;
}
.footer-box{
  width:235px;
}
footer p{
  font-size:14px;
}
.footer-note{
  font-size:12px;
}
.footer-note strong{
  font-size:16px;
  font-family:var(--display);
  text-transform:uppercase;
}

/* Product modal */
.modal-info h2{
  font-size:54px;
  text-transform:uppercase;
  line-height:.9;
}
.long{
  font-size:16px;
}
.modal-info section p{
  font-size:15px;
}
.add{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:.6px;
}

/* Remove old visual-label spacing completely */
.visual-label{display:none!important;}

@media(max-width:1180px){
  .nav>a,.services-nav>button{padding:0 14px;font-size:13px}
  .brand-box{width:210px}
  .hero h1{font-size:80px}
}
@media(max-width:760px){
  .header{height:86px}
  .brand-box{width:200px;height:66px}
  .hero h1{font-size:61px}
  .hero p{font-size:18px}
  .quick-title h2{font-size:40px}
  .simple-head h2{font-size:55px}
  .shop-heading h2{font-size:52px}
  .product-info h3{font-size:24px}
  .gallery-item{width:390px;height:300px}
}


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root{
  --display:'Sora','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;

  /* Stronger, darker neutrals */
  --ink:#111719;
  --muted:#424b4f;
  --muted-2:#5a6468;
  --paper:#f1eee7;
  --paper-2:#e5e0d7;
  --line:#aeb4b1;
}

/* Core readability */
body{
  font-family:var(--body)!important;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
}

h1,h2,h3,
.nav>a,.services-nav>button,
.primary,.secondary,
.quick-grid strong,
.service-copy h3,
.product-info h3,
.filter-row button,
.product-info button,
.modal-info h2,
.help a{
  font-family:var(--display)!important;
}

/* Header */
.nav>a,
.services-nav>button{
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.75px!important;
  text-transform:uppercase!important;
}
.service-menu strong{
  font-family:var(--display)!important;
  font-size:16px!important;
  text-transform:uppercase!important;
}
.service-menu small{
  font-size:12px!important;
  color:#434d51!important;
}
.search-button,.basket{
  font-size:14px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
}

/* Hero */
.overline{
  font-size:14px!important;
  color:#253d49!important;
  font-weight:800!important;
}
.hero h1{
  font-family:var(--display)!important;
  font-size:84px!important;
  line-height:.95!important;
  letter-spacing:-3px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}
.hero p{
  font-size:22px!important;
  line-height:1.55!important;
  color:#333d41!important;
  max-width:720px!important;
}
.primary,.secondary{
  font-size:15px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}
.hero-proof span{
  font-size:14px!important;
  color:#3d474b!important;
}
.hero-proof b{
  color:#111719!important;
}
.visual-caption strong{
  font-size:17px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
}
.visual-caption span{
  font-size:14px!important;
  color:#404a4e!important;
}

/* Section labels + headings */
.quick-title small,
.simple-head small,
.shop-heading small,
.help small{
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:1.6px!important;
  color:#263d49!important;
  text-transform:uppercase!important;
}
.quick-title h2{
  font-family:var(--display)!important;
  font-size:48px!important;
  line-height:1!important;
  letter-spacing:-1.5px!important;
  text-transform:uppercase!important;
}
.simple-head h2{
  font-family:var(--display)!important;
  font-size:68px!important;
  line-height:.95!important;
  letter-spacing:-2px!important;
  text-transform:uppercase!important;
}
.simple-head p{
  font-size:18px!important;
  color:#3e484c!important;
}
.shop-heading h2{
  font-family:var(--display)!important;
  font-size:66px!important;
  line-height:.95!important;
  letter-spacing:-1.8px!important;
  text-transform:uppercase!important;
}
.shop-heading p{
  font-size:18px!important;
  color:#3e484c!important;
}

/* Quick choice cards */
.quick-grid span{
  font-size:13px!important;
  color:#515b5f!important;
}
.quick-grid strong{
  font-size:25px!important;
  line-height:1.05!important;
  text-transform:uppercase!important;
}
.quick-grid small{
  font-size:14px!important;
  color:#4b5559!important;
  line-height:1.45!important;
}

/* Services */
.service-no{
  font-size:15px!important;
  color:#505a5e!important;
}
.service-copy h3{
  font-size:31px!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
.service-copy span{
  font-size:12px!important;
  color:#213b49!important;
}
.service-copy p{
  font-size:16px!important;
  color:#3e484c!important;
  line-height:1.55!important;
}
.service-list article>a{
  font-size:14px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
}

/* Gallery */
.gallery-overlay span{
  font-size:13px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.future-video small{
  font-size:11px!important;
  color:#d1d8db!important;
}

/* Shop controls */
.search-wrap input{
  font-size:16px!important;
  color:#111719!important;
}
.search-wrap input::placeholder{
  color:#596366!important;
  opacity:1!important;
}
.filter-row button{
  font-size:14px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
  letter-spacing:.45px!important;
  color:#111719!important;
}
.filter-row button.active{
  color:#fff!important;
}
.shop-status{
  font-size:13px!important;
  color:#495356!important;
}
.shop-status strong{
  color:#111719!important;
}

/* Product cards */
.category{
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.75px!important;
  color:#23404f!important;
  text-transform:uppercase!important;
}
.product-info h3{
  font-size:26px!important;
  line-height:1.03!important;
  letter-spacing:-.6px!important;
  text-transform:uppercase!important;
  min-height:62px!important;
}
.product-info>p{
  font-size:15px!important;
  line-height:1.55!important;
  color:#3f494d!important;
  height:72px!important;
}
.price-row strong{
  font-size:24px!important;
}
.price-row small{
  font-size:11px!important;
  color:#4e585b!important;
  font-weight:800!important;
}
.product-info button{
  font-size:15px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
}

/* Help/footer */
.help h2{
  font-family:var(--display)!important;
  font-size:58px!important;
  line-height:.95!important;
  text-transform:uppercase!important;
}
.help p{
  font-size:18px!important;
  color:#3d474b!important;
}
.help a{
  font-size:15px!important;
  text-transform:uppercase!important;
}
footer small{
  font-size:11px!important;
  color:#b8c3c8!important;
}
footer p{
  font-size:15px!important;
  color:#d2dadd!important;
}
.footer-note{
  font-size:13px!important;
  color:#c0ccd1!important;
}
.footer-note strong{
  font-family:var(--display)!important;
  font-size:16px!important;
  text-transform:uppercase!important;
}

/* Modal/product detail */
.modal-info h2{
  font-family:var(--display)!important;
  font-size:48px!important;
  line-height:.95!important;
  text-transform:uppercase!important;
}
.sku{
  font-size:11px!important;
  color:#495356!important;
}
.long{
  font-size:17px!important;
  color:#343e42!important;
}
.modal-info section b{
  font-size:11px!important;
  font-family:var(--display)!important;
  text-transform:uppercase!important;
}
.modal-info section p{
  font-size:16px!important;
  color:#3d474b!important;
}
.modal-price-row strong{
  font-size:30px!important;
}
.modal-price-row small{
  font-size:10px!important;
}
.add{
  font-family:var(--display)!important;
  font-size:16px!important;
  text-transform:uppercase!important;
}

/* Increase contrast of pale borders/backgrounds slightly */
.quick-grid,
.product-card,
.search-wrap input,
.filter-row button,
.price-row,
.service-list article{
  border-color:var(--line)!important;
}

/* Mobile */
@media(max-width:760px){
  body{font-size:17px}
  .hero h1{font-size:55px!important}
  .hero p{font-size:19px!important}
  .quick-title h2{font-size:38px!important}
  .simple-head h2{font-size:50px!important}
  .shop-heading h2{font-size:48px!important}
  .product-info h3{font-size:24px!important}
}


/* --- Concept 08: Gallery behaves as one complete viewport destination --- */

#gallery{
  scroll-margin-top:104px;
}

.gallery{
  height:calc(100svh - 104px);
  min-height:650px;
  max-height:900px;
  padding:0!important;
  display:grid;
  grid-template-rows:minmax(230px, 36%) minmax(0, 64%);
  background:#f8f7f3;
  overflow:hidden;
}

.gallery-top{
  display:grid;
  grid-template-columns:160px minmax(430px, 1.15fr) minmax(330px,.85fr);
  gap:48px;
  align-items:center;
  padding:46px 5vw 36px;
  border-bottom:1px solid #b8bcb9;
}

.gallery-kicker{
  align-self:start;
  padding-top:10px;
  font-size:14px;
  line-height:1;
  font-weight:800;
  letter-spacing:1.7px;
  color:#263d49;
}

.gallery-title-wrap h2{
  margin:0!important;
  font-family:var(--display)!important;
  font-size:clamp(52px,5.4vw,78px)!important;
  line-height:.93!important;
  letter-spacing:-2.2px!important;
  text-transform:uppercase!important;
  color:#111719;
}

.gallery-intro{
  align-self:center;
}

.gallery-intro p{
  margin:0 0 22px;
  max-width:560px;
  font-size:17px;
  line-height:1.55;
  color:#343e42;
}

.gallery-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.gallery-controls button{
  height:42px;
  min-width:44px;
  padding:0 14px;
  border:1px solid #8f9895;
  background:#fff;
  color:#111719;
  font-family:var(--display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  cursor:pointer;
}

.gallery-controls button:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

.gallery-rail{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:stretch;
}

.gallery-track{
  height:100%;
  display:flex;
  width:max-content;
  gap:10px;
  animation:rail 42s linear infinite!important;
  will-change:transform;
}

.gallery-item{
  height:100%!important;
  width:clamp(360px,31vw,540px)!important;
  flex:0 0 auto;
}

.gallery-item:nth-child(3n){
  width:clamp(330px,27vw,470px)!important;
}

.gallery-item.has-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-overlay{
  padding:20px 22px!important;
  background:linear-gradient(180deg,transparent 55%,rgba(3,16,24,.75) 100%)!important;
}

.gallery-overlay span{
  font-size:13px!important;
}

.gallery-overlay b{
  font-size:34px!important;
}

.future-video{
  height:100%!important;
}

/* Other sections also land cleanly below sticky nav */
#shop,#services,#contact{
  scroll-margin-top:104px;
}

@media(max-height:760px) and (min-width:761px){
  .gallery{
    min-height:600px;
    grid-template-rows:220px 1fr;
  }
  .gallery-top{
    padding-top:32px;
    padding-bottom:28px;
  }
  .gallery-title-wrap h2{
    font-size:56px!important;
  }
  .gallery-intro p{
    font-size:15px;
    margin-bottom:15px;
  }
}


@media(max-width:900px){
  #gallery{
    scroll-margin-top:86px;
  }
  .gallery{
    height:auto;
    min-height:0;
    max-height:none;
    grid-template-rows:auto 380px;
  }
  .gallery-top{
    grid-template-columns:1fr;
    gap:18px;
    padding:42px 5vw 32px;
  }
  .gallery-kicker{
    padding-top:0;
  }
  .gallery-title-wrap h2{
    font-size:52px!important;
  }
  .gallery-intro p{
    max-width:680px;
  }
  .gallery-track{
    height:380px;
  }
  .gallery-item{
    height:380px!important;
    width:82vw!important;
  }
  .gallery-item:nth-child(3n){
    width:74vw!important;
  }
}


/* --- Concept 09: footer brand integrated into the whole navy footer --- */
footer{
  background:var(--navy)!important;
  color:#fff!important;
  border-top:0!important;
  padding:64px 5vw!important;
  grid-template-columns:280px 1fr 1fr!important;
  align-items:center!important;
}

.footer-brand{
  display:flex;
  align-items:center;
  min-height:88px;
}

.footer-brand img{
  width:250px;
  max-width:100%;
  height:auto;
  display:block;
}

.footer-box{
  background:transparent!important;
  padding:0!important;
  width:auto!important;
}

footer small{
  color:#c7d2d7!important;
}

footer p{
  color:#fff!important;
  font-size:16px!important;
}

.footer-note{
  color:#c4d0d5!important;
}

.footer-note strong{
  color:#fff!important;
}

@media(max-width:760px){
  footer{
    grid-template-columns:1fr!important;
    gap:28px!important;
    padding:46px 6vw!important;
  }
  .footer-brand img{
    width:220px;
  }
}


/* --- Concept 10: gallery stripped back --- */

.gallery{
  grid-template-rows:minmax(170px, 28%) minmax(0, 72%)!important;
}

.gallery-top.gallery-top-clean{
  display:grid!important;
  grid-template-columns:160px 1fr!important;
  gap:46px!important;
  align-items:center!important;
  padding:34px 5vw 28px!important;
  border-bottom:1px solid #b8bcb9!important;
}

.gallery-top-clean .gallery-kicker{
  align-self:center!important;
  padding-top:0!important;
}

.gallery-top-clean .gallery-title-wrap{
  align-self:center!important;
}

.gallery-top-clean .gallery-title-wrap h2{
  margin:0!important;
  max-width:950px!important;
}

/* No explanatory text or gallery controls */
.gallery-intro,
.gallery-controls{
  display:none!important;
}

@media(max-height:760px) and (min-width:761px){
  .gallery{
    grid-template-rows:160px 1fr!important;
  }
  .gallery-top.gallery-top-clean{
    padding:24px 5vw 20px!important;
  }
  .gallery-top-clean .gallery-title-wrap h2{
    font-size:54px!important;
  }
}

@media(max-width:900px){
  .gallery{
    grid-template-rows:auto 380px!important;
  }
  .gallery-top.gallery-top-clean{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:34px 5vw 26px!important;
  }
}


/* --- Concept 11: Shop lands immediately under the sticky header --- */

/* The old section had ~125px of internal top padding, which made clicking SHOP
   look like the anchor had stopped too early. Keep breathing room, lose the void. */
#shop.shop{
  scroll-margin-top:104px!important;
  padding-top:42px!important;
}

/* Keep the heading compact enough that products are already entering the viewport */
#shop .shop-heading{
  margin-bottom:28px!important;
}

#shop .shop-heading h2{
  margin-top:6px!important;
  margin-bottom:7px!important;
}

#shop .filter-row{
  margin-top:4px!important;
}

#shop .shop-status{
  padding-top:13px!important;
  padding-bottom:13px!important;
}

/* On smaller screens, account for the shorter sticky header too */
@media(max-width:760px){
  #shop.shop{
    scroll-margin-top:86px!important;
    padding-top:30px!important;
  }
}


/* --- Concept 12: navigation actually goes somewhere useful --- */

/* Services trigger is now a proper anchor while keeping dropdown behaviour */
.services-nav>.services-trigger{
  height:104px;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.75px;
  text-transform:uppercase;
  white-space:nowrap;
}
.services-nav>.services-trigger:hover{
  background:#ffffff0d;
  color:#fff;
}
.services-nav>.services-trigger span{
  display:inline-block;
  margin-left:7px;
  opacity:.7;
  transform:translateY(-1px);
}

/* Old button selector can no longer affect layout */
.services-nav>button{display:none!important;}

/* Clicking SERVICES should show the useful service content immediately */
#services.services{
  scroll-margin-top:104px!important;
  padding-top:42px!important;
}

/* Clicking a specific service places that row neatly below the sticky nav */
.service-anchor{
  scroll-margin-top:104px!important;
}

/* Technical Guides now lands on Ask a Human */
#help{
  scroll-margin-top:104px!important;
}

/* Reduce dead space above Services */
#services .simple-head{
  margin-bottom:32px!important;
}
#services .simple-head h2{
  margin-top:5px!important;
}

/* On mobile the header is shorter */
@media(max-width:760px){
  .services-nav>.services-trigger{
    height:86px;
    min-height:86px;
  }
  #services.services,
  .service-anchor,
  #help{
    scroll-margin-top:86px!important;
  }
  #services.services{
    padding-top:30px!important;
  }
}


/* --- Concept 13: full LNK Contact section --- */

#contact-form{
  scroll-margin-top:104px;
}

.contact-section{
  background:#e6e1d8;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);
  min-height:780px;
  border-top:1px solid #aeb4b1;
}

.contact-main{
  padding:78px 5vw 82px;
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(420px,1.25fr);
  gap:64px;
}

.contact-copy small{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.7px;
  color:#263d49;
  margin-bottom:18px;
}

.contact-copy h2{
  margin:0 0 24px;
  font-family:var(--display);
  font-size:62px;
  line-height:.95;
  letter-spacing:-1.7px;
  text-transform:uppercase;
}

.contact-copy>p{
  margin:0 0 42px;
  max-width:480px;
  font-size:17px;
  line-height:1.6;
  color:#3d474b;
}

.contact-direct{
  display:grid;
  gap:7px;
  border-top:1px solid #aeb4b1;
  padding-top:20px;
}

.contact-direct span{
  margin-top:12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.3px;
  color:#596367;
}

.contact-direct a{
  font-size:14px;
  font-weight:800;
  color:#111719;
  word-break:break-word;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:19px;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.contact-form label>span{
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  color:#333d41;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid #909896;
  background:#f8f6f0;
  color:#111719;
  border-radius:0;
  font-family:var(--body);
  font-size:16px;
  outline:none;
}

.contact-form input,
.contact-form select{
  height:52px;
  padding:0 13px;
}

.contact-form textarea{
  min-height:150px;
  padding:13px;
  resize:vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border:2px solid var(--navy);
}

.upload-field{
  border:1px dashed #8d9693;
  padding:15px;
  background:#efebe3;
}

.upload-field input{
  height:auto;
  padding:9px 0;
  border:0;
  background:transparent;
}

.upload-field small{
  font-size:11px;
  line-height:1.4;
  color:#596367;
}

.form-submit-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:3px;
}

.form-submit-row button{
  flex:0 0 auto;
  min-width:175px;
  height:52px;
  border:0;
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.7px;
  cursor:pointer;
}

.form-submit-row button:hover{
  background:#061923;
}

.form-submit-row span{
  max-width:390px;
  font-size:9px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.7px;
  color:#657074;
}

.form-submit-row span.shown{
  color:var(--navy);
}

.contact-image{
  position:relative;
  min-height:780px;
  overflow:hidden;
  background:#1c2529;
}

.contact-image>img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.contact-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(4,16,24,.72) 100%);
}

.contact-image-caption{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:2;
  color:#fff;
}

.contact-image-caption span{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
}

.contact-image-caption strong{
  display:block;
  font-family:var(--display);
  font-size:27px;
  line-height:1.03;
  letter-spacing:-.3px;
}

@media(max-width:1150px){
  .contact-section{
    grid-template-columns:1fr;
  }
  .contact-main{
    grid-template-columns:.8fr 1.2fr;
  }
  .contact-image{
    min-height:480px;
  }
}

@media(max-width:760px){
  #contact-form{
    scroll-margin-top:86px;
  }
  .contact-main{
    padding:48px 5vw 55px;
    grid-template-columns:1fr;
    gap:38px;
  }
  .contact-copy h2{
    font-size:47px;
  }
  .field-row{
    grid-template-columns:1fr;
  }
  .form-submit-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .contact-image{
    min-height:420px;
  }
}


/* --- Concept 14: technical Ask a Human section --- */
.technical-help{
  background:#fff;
  padding:78px 6vw;
  border-top:1px solid #d1d4d1;
  border-bottom:1px solid #d1d4d1;
  display:block;
}

.technical-help .help-copy{
  max-width:980px;
}

.technical-help h2{
  margin:8px 0 16px;
}

.technical-help p{
  max-width:760px;
  margin:0;
  font-size:18px!important;
  line-height:1.6;
  color:#3d474b!important;
}

.help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.help-actions a{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  font-family:var(--display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.help-call{
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
}

.help-call:hover{
  background:#061923;
}

.help-message{
  background:#fff;
  color:var(--ink);
  border:1px solid #8f9895;
}

.help-message:hover{
  border-color:var(--navy);
  color:var(--navy);
}

@media(max-width:760px){
  .technical-help{
    padding:52px 5vw;
  }
  .help-actions{
    flex-direction:column;
  }
  .help-actions a{
    width:100%;
  }
}

/* Requested micro-adjustment: homepage only — move the project-photo card slightly upward.
   No other homepage layout, sizing, text or spacing is changed. */
@media (min-width: 761px) {
  .hero-visual .visual-frame {
    transform: translateY(-28px);
  }
}

/* Exact technical-reference fallback for products with no standalone hero image yet. */
.technical-reference{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.technical-reference object{width:100%;height:100%;border:0;pointer-events:none;background:#fff}
.technical-reference span{position:absolute;left:12px;right:12px;bottom:10px;background:rgba(7,30,43,.92);color:#fff;padding:8px 10px;font-size:8px;line-height:1.15;font-weight:900;letter-spacing:.75px;text-align:center;z-index:2}
.modal-image .technical-reference{height:530px}

/* KESSEL premium product-media gallery */
.product-image{position:relative}
.media-count{
  position:absolute;right:11px;bottom:11px;z-index:2;
  background:rgba(7,30,43,.92);color:#fff;border-radius:2px;
  padding:7px 9px;font-size:8px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;
}
.product-gallery{min-width:0}
.gallery-stage{
  height:530px;background:#fff;border:1px solid #d8dbd8;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.gallery-stage img{width:100%;height:100%;object-fit:contain;padding:20px}
.gallery-caption{
  min-height:36px;padding:10px 2px 7px;color:#596468;font-size:11px;line-height:1.35;
  font-weight:800;letter-spacing:.2px;
}
.gallery-thumbs{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;
  max-height:190px;overflow:auto;padding:2px 2px 4px;
}
.gallery-thumb{
  height:78px;background:#fff;border:1px solid #c9cecb;padding:4px;cursor:pointer;overflow:hidden;
}
.gallery-thumb:hover,.gallery-thumb.active{border:2px solid var(--navy);padding:3px}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.official-links{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0}
.official-link{
  display:flex;align-items:center;justify-content:space-between;min-height:44px;
  padding:11px 13px;border:1px solid var(--navy);background:#fff;color:var(--navy);
  font-size:11px;font-weight:900;letter-spacing:.35px;text-transform:uppercase;
}
.official-link.video{background:var(--navy);color:#fff}
.official-link.muted{border-color:#bfc5c2;color:#465155}
@media(max-width:760px){
  .gallery-stage{height:400px}
  .gallery-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));max-height:175px}
  .gallery-thumb{height:72px}
}

/* --- Batch 15: product downloads & data sheets --- */
.downloads-section{
  padding:18px 0 16px!important;
  border-top:1px solid #c7cac7;
}
.download-list{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:11px;
}
.download-link{
  display:grid;
  grid-template-columns:46px 1fr 20px;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:8px 11px 8px 8px;
  border:1px solid #c8cdca;
  background:#fff;
  color:var(--ink);
  transition:.15s ease;
}
.download-link:hover{
  border-color:var(--navy);
  transform:translateY(-1px);
  box-shadow:0 7px 18px #17202610;
}
.download-kind{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 5px;
  background:var(--navy);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
}
.download-label{
  font-size:11px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
}
.download-arrow{
  text-align:right;
  font-size:16px;
  color:var(--navy);
}

/* Keep reference pages separate from downloadable technical documents. */
.official-links{
  padding-top:3px;
}

@media(max-width:520px){
  .download-link{grid-template-columns:42px 1fr 18px}
  .download-label{font-size:10px}
}

/* --- Batch 16: quick-add basket quantity controls --- */
.product-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.product-info .product-actions .view-product-btn,
.product-info .product-actions .quick-add{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 9px!important;
  border-radius:0!important;
  font-size:12px!important;
  line-height:1!important;
  font-family:var(--display)!important;
  font-weight:900!important;
  letter-spacing:.15px!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.product-info .product-actions .view-product-btn{
  background:var(--navy)!important;
  border:1px solid var(--navy)!important;
  color:#fff!important;
}
.product-info .product-actions .quick-add{
  background:#fff!important;
  border:1px solid var(--navy)!important;
  color:var(--navy)!important;
}
.product-info .product-actions .quick-add:hover{
  background:var(--navy)!important;
  color:#fff!important;
}
.product-info .product-actions .quick-add.added-state{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:var(--ink)!important;
  cursor:default!important;
}
.quick-buy-control{min-width:0}
.qty-control{
  height:42px;
  min-height:42px;
  display:grid;
  grid-template-columns:42px minmax(34px,1fr) 42px;
  align-items:stretch;
  border:1px solid var(--navy);
  background:#fff;
  overflow:hidden;
}
.product-info .qty-control button,
.modal-buy-control .qty-control button{
  width:auto!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--navy)!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.qty-control button:hover{opacity:.88}
.qty-value{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--ink);
  font-size:15px;
  font-weight:900;
  line-height:1;
}
.modal-buy-control{margin-top:18px}
.modal-buy-control>.quick-add{
  width:100%;
  min-height:48px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  cursor:pointer;
}
.modal-buy-control>.quick-add.added-state{
  background:var(--green);
  border-color:var(--green);
  color:var(--ink);
  cursor:default;
}
.modal-buy-control .qty-control{height:48px;grid-template-columns:52px 1fr 52px}
.modal-buy-control .qty-control button{height:46px!important;min-height:46px!important}
.modal-buy-control .qty-value{font-size:17px}

/* Batch 127: one permanent family ID with selectable pack sizes. */
.product-variant-picker{
  display:grid;
  gap:7px;
  margin:20px 0 8px;
}
.product-variant-picker span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
}
.product-variant-picker select{
  width:100%;
  min-height:48px;
  padding:0 42px 0 13px;
  border:1px solid var(--navy);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font:800 15px/1.2 Arial,Helvetica,sans-serif;
}
.quick-add.choose-option{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:var(--ink)!important;
}
.basket-line-variant{
  margin:8px 0 1px;
  color:var(--navy);
  font-size:11px;
  font-weight:900;
  letter-spacing:.25px;
}

@media(max-width:420px){
  .product-actions{grid-template-columns:1fr}
  .qty-control{grid-template-columns:48px 1fr 48px}
}

/* --- Batch 18: full basket page — readability pass ---------------------- */
[hidden]{display:none!important}
.basket-page{
  display:none;
  min-height:calc(100vh - 86px);
  background:var(--paper);
  padding:66px 6vw 90px;
}
.basket-page.open{display:block}
.basket-view{background:var(--paper)}
.basket-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  padding-bottom:32px;
  border-bottom:2px solid var(--ink);
}
.basket-kicker,
.basket-summary-kicker{
  color:var(--navy);
  font-size:13px;
  font-weight:900;
  letter-spacing:1.6px;
}
.basket-page-head h1{
  margin:10px 0 14px;
  font-size:60px;
  line-height:.94;
  letter-spacing:-3px;
}
.basket-page-head p{
  margin:0;
  max-width:690px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}
.basket-continue-top,
.basket-continue{
  border:0;
  background:transparent;
  color:var(--navy);
  font-weight:900;
  font-size:14px;
  letter-spacing:.35px;
  cursor:pointer;
  padding:11px 0;
}
.basket-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:52px;
  align-items:start;
  padding-top:38px;
}
.basket-items-head{
  min-height:44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  letter-spacing:.85px;
}
.basket-items-head button{
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
}
.basket-items-head button:hover,
.basket-remove:hover{color:var(--ink)}
.basket-line{
  display:grid;
  grid-template-columns:130px minmax(230px,1fr) 140px 146px 155px;
  gap:22px;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.basket-line-image{
  width:130px;
  height:130px;
  padding:0;
  border:1px solid #d5d7d3;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}
.basket-line-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.basket-line-image .placeholder{
  width:100%;
  height:100%;
  min-height:0;
}
.basket-line-info .category{
  margin-bottom:9px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.9px;
  color:var(--navy);
  text-transform:uppercase;
}
.basket-line-title{
  display:block;
  max-width:500px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  font-size:19px;
  line-height:1.3;
  font-weight:900;
  cursor:pointer;
}
.basket-line-title:hover{text-decoration:underline}
.basket-line-sku{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  letter-spacing:.4px;
}
.basket-remove{
  margin-top:14px;
  padding:3px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}
.basket-remove.is-removing{
  color:#a33a2b;
  text-decoration:none;
  cursor:default;
}
.basket-line{
  transition:opacity .30s ease, transform .30s ease;
}
.basket-line.is-removing{
  opacity:.48;
  transform:translateX(4px);
  pointer-events:none;
}
.basket-line-unit,
.basket-line-total,
.basket-line-qty{
  align-self:center;
}
.basket-line-unit small,
.basket-line-total small,
.basket-line-qty small{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.8px;
}
.basket-line-unit strong,
.basket-line-total strong{
  display:block;
  font-size:18px;
  line-height:1.15;
}
.basket-line-unit span,
.basket-line-total span{
  display:block;
  margin:4px 0 8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  font-weight:800;
}
.basket-line-unit .inc,
.basket-line-total .inc{color:var(--navy)}
.basket-page-qty{
  width:138px;
  height:46px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  border:1px solid var(--navy);
  background:#fff;
}
.basket-page-qty button{
  border:0;
  background:var(--navy);
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}
.basket-page-qty span{
  display:grid;
  place-items:center;
  font-size:17px;
  font-weight:900;
}
.basket-summary{
  position:sticky;
  top:112px;
  padding:30px;
  background:#fff;
  border:1px solid #d4d6d2;
}
.basket-summary-kicker{margin-bottom:24px}
.basket-summary-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #e1e2df;
  font-size:15px;
  line-height:1.35;
}
.basket-summary-row span{color:var(--muted)}
.basket-summary-row strong{font-size:16px}
.basket-summary-total{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding:24px 0 12px;
  font-size:16px;
  font-weight:900;
}
.basket-summary-total>div{text-align:right}
.basket-summary-total strong{
  display:block;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-1px;
}
.basket-summary-total small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.basket-delivery-note{
  margin:12px 0 22px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.basket-checkout{
  width:100%;
  min-height:56px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
}
.basket-checkout:hover{background:var(--navy-dark)}
.basket-checkout-message{
  display:none;
  margin-top:12px;
  padding:13px;
  background:var(--paper-2);
  color:var(--ink);
  font-size:13px;
  line-height:1.5;
}
.basket-checkout-message.shown{display:block}
.basket-continue{
  width:100%;
  margin-top:12px;
  text-align:center;
}
.basket-help-note{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid #e1e2df;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.basket-help-note b{color:var(--ink);font-size:14px}
.basket-help-note a{
  display:inline-block;
  margin-top:6px;
  color:var(--navy);
  font-size:13px;
  font-weight:900;
}
.basket-empty{
  max-width:660px;
  margin:80px auto 40px;
  text-align:center;
}
.basket-empty-mark{
  width:78px;
  height:78px;
  margin:0 auto 24px;
  display:grid;
  place-items:center;
  border:2px solid var(--navy);
  color:var(--navy);
  font-size:26px;
  font-weight:900;
}
.basket-empty h2{
  margin:0;
  font-size:40px;
  letter-spacing:-1.8px;
}
.basket-empty p{
  margin:16px auto 26px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}
.basket-empty button{
  min-height:52px;
  padding:0 24px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:1180px){
  .basket-layout{grid-template-columns:1fr 320px;gap:34px}
  .basket-line{grid-template-columns:108px minmax(190px,1fr) 126px 138px}
  .basket-line-image{width:108px;height:108px}
  .basket-line-unit{display:none}
}
@media(max-width:820px){
  .basket-page{padding:44px 5vw 70px}
  .basket-page-head{align-items:flex-start;flex-direction:column;gap:17px}
  .basket-page-head h1{font-size:48px}
  .basket-page-head p{font-size:16px}
  .basket-layout{grid-template-columns:1fr}
  .basket-summary{position:static}
  .basket-line{grid-template-columns:96px minmax(0,1fr) 138px;gap:16px}
  .basket-line-image{width:96px;height:96px}
  .basket-line-title{font-size:18px}
  .basket-line-total{grid-column:2 / 4;display:flex;align-items:baseline;gap:10px;padding-top:4px}
  .basket-line-total small{margin:0 auto 0 0}
  .basket-line-total span{margin:0}
}
@media(max-width:560px){
  .basket-page{padding:34px 18px 60px}
  .basket-page-head h1{font-size:42px}
  .basket-page-head p{font-size:15px}
  .basket-kicker,.basket-summary-kicker{font-size:12px}
  .basket-line{grid-template-columns:82px 1fr;gap:14px;padding:22px 0}
  .basket-line-image{width:82px;height:82px}
  .basket-line-title{font-size:17px}
  .basket-line-info .category,.basket-line-sku,.basket-remove{font-size:12px}
  .basket-line-qty{grid-column:2}
  .basket-line-total{grid-column:2;flex-wrap:wrap}
  .basket-page-qty{width:144px;height:48px;grid-template-columns:46px 1fr 46px}
  .basket-summary{padding:24px}
  .basket-summary-row{font-size:15px}
  .basket-summary-total{font-size:16px}
  .basket-summary-total strong{font-size:30px}
  .basket-delivery-note,.basket-help-note,.basket-checkout-message{font-size:13px}
}


/* Batch 25 — modal confirmation before emptying the full basket */
body.basket-confirm-open{overflow:hidden}
.basket-clear-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.basket-clear-modal.open{display:flex}
.basket-clear-backdrop{
  position:absolute;
  inset:0;
  background:rgba(18,27,34,.58);
  backdrop-filter:blur(2px);
}
.basket-clear-dialog{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  background:#fff;
  border:1px solid rgba(18,27,34,.18);
  box-shadow:0 24px 70px rgba(10,20,28,.28);
  padding:34px 36px 32px;
}
.basket-clear-dialog-kicker{
  margin-bottom:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.3px;
}
.basket-clear-dialog h2{
  margin:0;
  color:var(--ink);
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.8px;
}
.basket-clear-dialog p{
  margin:14px 0 26px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}
.basket-clear-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.basket-clear-actions button{
  min-height:50px;
  padding:0 16px;
  border:1px solid var(--navy);
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
}
.basket-clear-actions .basket-clear-confirm{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.basket-clear-actions .basket-clear-confirm:hover,
.basket-clear-actions .basket-clear-confirm:focus-visible{
  background:var(--navy);
  border-color:var(--navy);
}
.basket-clear-actions .basket-clear-cancel{
  background:#fff;
  color:var(--navy);
}
.basket-clear-actions .basket-clear-cancel:hover,
.basket-clear-actions .basket-clear-cancel:focus-visible{
  background:var(--navy);
  color:#fff;
}
@media(max-width:560px){
  .basket-clear-dialog{padding:28px 22px 22px}
  .basket-clear-dialog h2{font-size:27px}
  .basket-clear-dialog p{font-size:15px}
  .basket-clear-actions{grid-template-columns:1fr 1fr;gap:8px}
  .basket-clear-actions button{min-height:52px;padding:0 10px;font-size:12px}
}

/* =========================================================
   BATCH 33 — HOME HERO: FULL-BLEED INDUSTRIAL DIRECTION
   Built from locked Batch 30. Hero-only visual/layout change.
   ========================================================= */

/* Keep the entire opening composition inside one laptop viewport. */
.hero{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:calc(100svh - 104px)!important;
  min-height:560px!important;
  max-height:760px!important;
  padding:clamp(42px,6vh,72px) 5.5vw!important;
  gap:0!important;
  overflow:hidden!important;
  background:var(--navy-dark)!important;
  color:#fff!important;
}

/* The approved real LNK project photo becomes the atmosphere of the hero. */
.hero-visual{
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:69%!important;
  height:100%!important;
  margin:0!important;
  display:block!important;
}
.hero-visual .visual-frame,
.hero-visual .visual-placeholder{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.hero-visual .visual-placeholder:before{display:none!important}
.hero-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:52% 43%!important;
}
.hero-visual .visual-caption{display:none!important}

/* Navy veil: opaque behind the words, lighter over the job photo. */
.hero:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,25,35,1) 0%,
    rgba(6,25,35,.99) 26%,
    rgba(6,25,35,.94) 39%,
    rgba(6,25,35,.72) 50%,
    rgba(6,25,35,.28) 67%,
    rgba(6,25,35,.06) 100%);
}

.hero-text{
  position:relative!important;
  z-index:2!important;
  width:min(46vw,660px)!important;
  max-width:660px!important;
  margin:0!important;
  padding:0!important;
}
.hero .overline{
  margin:0 0 clamp(16px,2.2vh,24px)!important;
  color:var(--green)!important;
  font-size:clamp(11px,.9vw,14px)!important;
  line-height:1.2!important;
  letter-spacing:2.4px!important;
  font-weight:900!important;
}
.hero h1{
  margin:0!important;
  max-width:650px!important;
  color:#fff!important;
  font-size:clamp(48px,5vw,78px)!important;
  line-height:.91!important;
  letter-spacing:-2.4px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.hero p{
  max-width:565px!important;
  margin:clamp(19px,2.8vh,28px) 0 clamp(22px,3.2vh,31px)!important;
  color:rgba(255,255,255,.88)!important;
  font-size:clamp(16px,1.2vw,19px)!important;
  line-height:1.5!important;
}
.hero-buttons{
  display:flex!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
.hero .primary,
.hero .secondary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:0 22px!important;
  font-size:13px!important;
  line-height:1!important;
  letter-spacing:.8px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease!important;
}
.hero .primary{
  background:var(--green)!important;
  color:var(--navy-dark)!important;
  border:1px solid var(--green)!important;
}
.hero .secondary{
  background:rgba(6,25,35,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.72)!important;
}
.hero .primary:hover,.hero .secondary:hover{transform:translateY(-1px)!important}
.hero .secondary:hover{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}

.hero-proof{
  display:flex!important;
  gap:clamp(18px,2.2vw,32px)!important;
  flex-wrap:wrap!important;
  margin:clamp(24px,3.5vh,36px) 0 0!important;
  padding:clamp(15px,2vh,20px) 0 0!important;
  border-top:1px solid rgba(255,255,255,.28)!important;
}
.hero-proof span{
  color:rgba(255,255,255,.7)!important;
  font-size:clamp(11px,.9vw,13px)!important;
}
.hero-proof b{color:#fff!important}

/* Laptop/tablet: protect the text while keeping the worker visible. */
@media (max-width:1100px){
  .hero{
    height:calc(100svh - 104px)!important;
    min-height:540px!important;
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  .hero-visual{width:66%!important}
  .hero:after{
    background:linear-gradient(90deg,
      rgba(6,25,35,1) 0%,
      rgba(6,25,35,.98) 34%,
      rgba(6,25,35,.84) 51%,
      rgba(6,25,35,.25) 78%,
      rgba(6,25,35,.08) 100%)!important;
  }
  .hero-text{width:min(56vw,600px)!important}
  .hero h1{font-size:clamp(45px,6vw,64px)!important}
  .hero-proof{gap:16px!important}
}

/* Mobile stacks naturally; no overflow and no microscopic text. */
@media (max-width:760px){
  .hero{
    height:auto!important;
    min-height:calc(100svh - 86px)!important;
    max-height:none!important;
    align-items:flex-end!important;
    padding:240px 6vw 44px!important;
  }
  .hero-visual{width:100%!important;height:100%!important}
  .hero-visual img{object-position:58% 28%!important}
  .hero:after{
    background:linear-gradient(0deg,
      rgba(6,25,35,1) 0%,
      rgba(6,25,35,.98) 44%,
      rgba(6,25,35,.62) 70%,
      rgba(6,25,35,.15) 100%)!important;
  }
  .hero-text{width:100%!important;max-width:620px!important}
  .hero h1{font-size:clamp(44px,13vw,60px)!important;line-height:.93!important;letter-spacing:-1.8px!important}
  .hero p{font-size:17px!important;max-width:540px!important}
  .hero-proof{display:none!important}
  .hero .primary,.hero .secondary{font-size:13px!important;min-height:48px!important}
}


/* ===== BATCH 36: DROP-IN GALLERY VIDEO SLOTS ===== */
.gallery-video-slot{position:relative!important;padding:0!important;overflow:hidden!important;background:var(--navy)!important}
.gallery-video-slot:before{display:none!important}
.gallery-video-slot>video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;z-index:0!important;opacity:0;transition:opacity .35s ease,transform .45s ease;pointer-events:none}
.gallery-video-slot.video-ready>video{opacity:1}
.gallery-video-slot.video-ready:hover>video{transform:scale(1.025)}
.gallery-video-slot .video-placeholder{position:absolute!important;inset:0!important;z-index:1!important;display:flex;align-items:flex-end;justify-content:space-between;padding:18px;background:var(--navy);color:#fff;transition:opacity .25s ease}
.gallery-video-slot.video-ready .video-placeholder{opacity:0;pointer-events:none}
.gallery-video-slot .video-placeholder small{position:absolute;top:18px;right:18px;font-size:11px!important;font-weight:800;letter-spacing:1px;color:#d1d8db!important}
.gallery-video-slot .video-placeholder span{font-size:13px!important;font-weight:800!important;letter-spacing:1.2px!important}
.gallery-video-slot .video-placeholder b{font-size:72px!important;line-height:.8;color:#fff!important}
.gallery-video-slot .video-overlay{z-index:2!important;opacity:0;pointer-events:none;transition:opacity .25s ease}
.gallery-video-slot.video-ready .video-overlay{opacity:1}
.gallery-video-slot.video-missing>video{display:none!important}
@media(max-width:700px){.gallery-video-slot .video-placeholder{padding:16px}.gallery-video-slot .video-placeholder b{font-size:58px!important}}


/* =========================================================
   BATCH 37 — PORTRAIT-FIRST GALLERY
   All current LNK gallery photography + both project videos
   are vertical, so the gallery now presents them as such.
   ========================================================= */

/* Give much less screen height to the heading and more to the actual work. */
#gallery.gallery{
  grid-template-rows:minmax(118px, 18%) minmax(0, 82%)!important;
}

/* Smaller, calmer gallery heading. */
#gallery .gallery-top.gallery-top-clean{
  padding:20px 5vw 16px!important;
  grid-template-columns:120px 1fr!important;
  gap:28px!important;
}

#gallery .gallery-kicker{
  font-size:11px!important;
  letter-spacing:1.5px!important;
}

#gallery .gallery-top-clean .gallery-title-wrap h2{
  font-size:clamp(38px, 3.65vw, 54px)!important;
  line-height:.93!important;
  letter-spacing:-1.4px!important;
  max-width:760px!important;
}

/* The moving strip gets the height freed up above. */
#gallery .gallery-rail,
#gallery .gallery-track{
  height:100%!important;
}

/* Portrait-first cards: narrower and substantially taller. */
#gallery .gallery-item,
#gallery .gallery-item:nth-child(3n){
  height:100%!important;
  width:clamp(275px, 22vw, 350px)!important;
  flex:0 0 auto!important;
}

/* Photos and video fill the portrait frame naturally. */
#gallery .gallery-item.has-image img,
#gallery .gallery-video-slot > video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Smaller overlays so the imagery is the hero, not the labels. */
#gallery .gallery-overlay{
  padding:14px!important;
  background:linear-gradient(180deg, transparent 64%, rgba(4,17,25,.68) 100%)!important;
}

#gallery .gallery-overlay span,
#gallery .gallery-item span{
  font-size:8px!important;
  letter-spacing:1px!important;
}

#gallery .gallery-overlay b{
  font-size:23px!important;
}

#gallery .gallery-video-slot .video-placeholder{
  padding:14px!important;
}

#gallery .gallery-video-slot .video-placeholder span{
  font-size:9px!important;
}

#gallery .gallery-video-slot .video-placeholder small{
  top:14px!important;
  right:14px!important;
  font-size:7px!important;
}

#gallery .gallery-video-slot .video-placeholder b{
  font-size:56px!important;
}

/* Short laptop screens: compress heading even more so portrait work remains tall. */
@media (max-height:760px) and (min-width:901px){
  #gallery.gallery{
    grid-template-rows:105px minmax(0,1fr)!important;
  }
  #gallery .gallery-top.gallery-top-clean{
    padding:14px 5vw 12px!important;
  }
  #gallery .gallery-top-clean .gallery-title-wrap h2{
    font-size:42px!important;
  }
}

/* Mobile/tablet: still portrait, but don't create an absurdly tall section. */
@media(max-width:900px){
  #gallery.gallery{
    grid-template-rows:auto 500px!important;
  }
  #gallery .gallery-top.gallery-top-clean{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:24px 5vw 18px!important;
  }
  #gallery .gallery-top-clean .gallery-title-wrap h2{
    font-size:40px!important;
  }
  #gallery .gallery-track{
    height:500px!important;
  }
  #gallery .gallery-item,
  #gallery .gallery-item:nth-child(3n){
    height:500px!important;
    width:min(74vw, 330px)!important;
  }
}


/* =========================================================
   BATCH 40 — SITE-WIDE SEARCH OVERLAY
   ========================================================= */

body.site-search-open{
  overflow:hidden!important;
}

.site-search-overlay{
  position:fixed;
  inset:0;
  z-index:1400;
  display:none;
}

.site-search-overlay.open{
  display:block;
}

.site-search-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,17,25,.76);
  backdrop-filter:blur(5px);
}

.site-search-panel{
  position:absolute;
  left:50%;
  top:max(84px, 9vh);
  transform:translateX(-50%);
  width:min(1040px, calc(100vw - 48px));
  max-height:calc(100vh - max(110px, 13vh));
  overflow:auto;
  background:#f7f5f0;
  color:#11191d;
  box-shadow:0 28px 90px rgba(0,0,0,.32);
  border-top:5px solid var(--green);
}

.site-search-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:30px 34px 20px;
  border-bottom:1px solid #d8d8d2;
}

.site-search-kicker,
.site-search-group-title{
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--green-dark, #277f64);
}

.site-search-head h2{
  margin:7px 0 0;
  font-size:clamp(29px, 4vw, 48px);
  line-height:.92;
  letter-spacing:-1.5px;
  color:var(--navy);
}

.site-search-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #bbc2c1;
  background:transparent;
  color:var(--navy);
  font-size:31px;
  line-height:1;
  cursor:pointer;
}

.site-search-close:hover{
  background:var(--navy);
  color:#fff;
}

.site-search-field-wrap{
  position:relative;
  margin:26px 34px 0;
}

.site-search-field-wrap input{
  width:100%;
  border:0;
  border-bottom:3px solid var(--navy);
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  padding:15px 72px 15px 0;
  font:inherit;
  font-size:clamp(20px, 2.4vw, 30px);
  font-weight:800;
  letter-spacing:-.4px;
}

.site-search-field-wrap input::placeholder{
  color:#788487;
  font-weight:650;
}

.site-search-key{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  border:1px solid #bfc5c3;
  color:#657174;
  padding:5px 7px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.site-search-status{
  min-height:36px;
  padding:15px 34px 9px;
  color:#687477;
  font-size:13px;
  font-weight:700;
}

.site-search-results{
  padding:0 34px 34px;
}

.site-search-group + .site-search-group{
  margin-top:26px;
}

.site-search-group-title{
  padding:0 0 10px;
  color:#687477;
}

.site-search-result{
  width:100%;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto 26px;
  gap:18px;
  align-items:center;
  min-height:78px;
  padding:14px 12px;
  border:0;
  border-top:1px solid #d6dad7;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.site-search-page-result{
  grid-template-columns:150px minmax(0,1fr) 26px;
}

.site-search-result:last-child{
  border-bottom:1px solid #d6dad7;
}

.site-search-result:hover,
.site-search-result:focus-visible{
  outline:none;
  background:#fff;
}

.site-search-result-type{
  font-size:9px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#697477;
}

.site-search-result-main{
  min-width:0;
}

.site-search-result-main strong{
  display:block;
  color:var(--navy);
  font-size:17px;
  line-height:1.15;
}

.site-search-result-main small{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#687477;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.site-search-result-price{
  min-width:86px;
  text-align:right;
}

.site-search-result-price b{
  display:block;
  color:var(--navy);
  font-size:16px;
}

.site-search-result-price small{
  display:block;
  margin-top:2px;
  color:#7b8587;
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.site-search-result-arrow{
  color:var(--green);
  font-size:22px;
  font-weight:900;
  text-align:right;
}

.site-search-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding-top:5px;
}

.site-search-suggestions button{
  border:1px solid #bfc7c4;
  background:#fff;
  color:var(--navy);
  padding:10px 13px;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.site-search-suggestions button:hover{
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}

.site-search-empty{
  padding:28px 0 10px;
  max-width:620px;
}

.site-search-empty strong{
  color:var(--navy);
  font-size:24px;
  letter-spacing:-.5px;
}

.site-search-empty p{
  margin:8px 0 20px;
  color:#687477;
  line-height:1.55;
}

.site-search-empty button{
  border:0;
  background:var(--green);
  color:#fff;
  padding:12px 15px;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}

@media(max-width:700px){
  .site-search-panel{
    top:0;
    width:100%;
    max-height:100vh;
    min-height:100vh;
    border-top-width:4px;
  }

  .site-search-head{
    padding:22px 20px 16px;
  }

  .site-search-field-wrap{
    margin:20px 20px 0;
  }

  .site-search-status{
    padding:14px 20px 7px;
  }

  .site-search-results{
    padding:0 20px 28px;
  }

  .site-search-result,
  .site-search-page-result{
    grid-template-columns:1fr 24px;
    gap:10px;
    padding:14px 4px;
  }

  .site-search-result-type{
    grid-column:1 / 2;
    margin-bottom:-4px;
  }

  .site-search-result-main{
    grid-column:1 / 2;
  }

  .site-search-result-main small{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .site-search-result-price{
    grid-column:1 / 2;
    text-align:left;
    margin-top:3px;
  }

  .site-search-result-arrow{
    grid-column:2;
    grid-row:1 / span 3;
    align-self:center;
  }

  .site-search-key{
    display:none;
  }
}


/* =========================================================
   BATCH 41 — COMPACT HEADER SEARCH
   Search expands from the header instead of taking over screen.
   ========================================================= */

body.site-search-open{
  overflow:auto!important;
}

.search-button{
  transition:
    transform .13s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease!important;
}

.search-button.search-pressing{
  transform:translateY(2px) scale(.985);
  background:#0f354a!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.25);
}

.search-button.search-active{
  background:#fff!important;
  color:var(--navy)!important;
  border-color:#fff!important;
}

.site-search-popover{
  position:fixed;
  z-index:1450;
  top:var(--search-top, 90px);
  right:var(--search-right, 140px);
  width:var(--search-width, 520px);
  max-width:calc(100vw - 28px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px) scale(.985);
  transform-origin:top right;
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .22s;
}

.site-search-popover.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,.7,.2,1),
    visibility 0s;
}

.site-search-compact{
  background:#f7f5f0;
  color:#11191d;
  border:1px solid #c6cecc;
  border-top:3px solid var(--green);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
  overflow:hidden;
}

.site-search-compact-row{
  display:flex;
  align-items:center;
  min-height:58px;
  background:#fff;
  border-bottom:1px solid #d7dcd9;
}

.site-search-compact-row input{
  flex:1;
  min-width:0;
  height:58px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  padding:0 16px 0 18px;
  font:inherit;
  font-size:17px;
  font-weight:800;
}

.site-search-compact-row input::placeholder{
  color:#7a8789;
  font-weight:700;
}

.site-search-mini-close{
  width:50px;
  height:58px;
  border:0;
  border-left:1px solid #d7dcd9;
  background:transparent;
  color:#657174;
  font-size:25px;
  cursor:pointer;
}

.site-search-mini-close:hover{
  background:var(--navy);
  color:#fff;
}

.site-search-status{
  min-height:30px!important;
  padding:10px 16px 5px!important;
  color:#748083!important;
  font-size:11px!important;
  font-weight:750!important;
}

.site-search-results{
  padding:0 12px 12px!important;
  max-height:min(430px, calc(100vh - var(--search-top, 90px) - 24px));
  overflow:auto;
}

.site-search-suggestions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  padding:5px 4px 7px!important;
}

.site-search-suggestions button{
  padding:8px 10px!important;
  font-size:10px!important;
  border:1px solid #c4cbc8!important;
  background:#fff!important;
  color:var(--navy)!important;
}

.site-search-suggestions button:hover{
  background:var(--navy)!important;
  color:#fff!important;
  border-color:var(--navy)!important;
}

.site-search-group + .site-search-group{
  margin-top:13px!important;
}

.site-search-group-title{
  padding:7px 4px 6px!important;
  font-size:8px!important;
  letter-spacing:1.2px!important;
  color:#748083!important;
}

.site-search-result,
.site-search-page-result{
  grid-template-columns:92px minmax(0,1fr) auto 18px!important;
  gap:9px!important;
  min-height:58px!important;
  padding:9px 6px!important;
  border-top:1px solid #d9dddb!important;
}

.site-search-page-result{
  grid-template-columns:92px minmax(0,1fr) 18px!important;
}

.site-search-result-type{
  font-size:7px!important;
  letter-spacing:.8px!important;
}

.site-search-result-main strong{
  font-size:13px!important;
}

.site-search-result-main small{
  margin-top:3px!important;
  font-size:9px!important;
  line-height:1.25!important;
}

.site-search-result-price{
  min-width:62px!important;
}

.site-search-result-price b{
  font-size:12px!important;
}

.site-search-result-price small{
  font-size:6px!important;
}

.site-search-result-arrow{
  font-size:16px!important;
}

.site-search-empty{
  padding:16px 5px 8px!important;
}

.site-search-empty strong{
  font-size:16px!important;
}

.site-search-empty p{
  margin:5px 0 12px!important;
  font-size:10px!important;
}

.site-search-empty button{
  padding:9px 10px!important;
  font-size:9px!important;
}

/* Neutralise the old Batch 40 full-screen pieces entirely. */
.site-search-overlay,
.site-search-backdrop,
.site-search-panel,
.site-search-head,
.site-search-field-wrap,
.site-search-key{
  display:none!important;
}

@media(max-width:700px){
  .site-search-popover{
    top:var(--search-top, 76px);
    right:10px;
    width:calc(100vw - 20px);
    max-width:none;
  }

  .site-search-result,
  .site-search-page-result{
    grid-template-columns:1fr 18px!important;
  }

  .site-search-result-type,
  .site-search-result-main,
  .site-search-result-price{
    grid-column:1!important;
  }

  .site-search-result-arrow{
    grid-column:2!important;
    grid-row:1 / span 3!important;
  }
}


/* =========================================================
   BATCH 43 — CONTACT V2
   Compact laptop-first layout + removable/reviewable uploads.
   ========================================================= */

.contact-section.contact-v2{
  grid-template-columns:minmax(0,1fr) clamp(285px, 27vw, 390px)!important;
  min-height:620px!important;
  height:min(720px, calc(100vh - 104px));
  max-height:720px;
  background:#e6e1d8;
  overflow:hidden;
}

.contact-v2 .contact-main{
  padding:38px 4.3vw 40px!important;
  grid-template-columns:minmax(220px, .62fr) minmax(500px, 1.38fr)!important;
  gap:38px!important;
  min-height:0;
  align-items:start;
}

.contact-v2 .contact-copy small{
  margin-bottom:10px!important;
  font-size:11px!important;
}

.contact-v2 .contact-copy h2{
  margin:0 0 16px!important;
  font-size:clamp(43px, 3.7vw, 56px)!important;
  line-height:.93!important;
}

.contact-v2 .contact-copy>p{
  margin:0 0 22px!important;
  max-width:350px!important;
  font-size:14px!important;
  line-height:1.5!important;
}

.contact-direct-v2{
  gap:2px!important;
  padding-top:12px!important;
}

.contact-direct-v2 span{
  margin-top:8px!important;
  font-size:8px!important;
}

.contact-direct-v2 a{
  font-size:12px!important;
}

.contact-form-v2{
  gap:10px!important;
  min-width:0;
}

.contact-form-v2 .field-row{
  gap:10px!important;
}

.contact-form-v2 label{
  gap:5px!important;
}

.contact-form-v2 label>span,
.contact-v2 .upload-head span{
  font-size:9px!important;
  letter-spacing:.9px!important;
}

.contact-form-v2 input,
.contact-form-v2 select{
  height:44px!important;
  padding:0 11px!important;
  font-size:14px!important;
}

.contact-form-v2 textarea{
  min-height:92px!important;
  height:92px;
  padding:10px 11px!important;
  font-size:14px!important;
  resize:none!important;
}

.upload-field-v2{
  padding:10px!important;
  background:#efebe3!important;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:7px 10px;
  align-items:center;
}

.upload-head{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.upload-head>div{
  display:grid;
  gap:2px;
}

.upload-head small{
  font-size:9px!important;
  color:#596367!important;
  line-height:1.3!important;
}

.upload-head strong{
  flex:0 0 auto;
  font-family:var(--display);
  font-size:9px;
  letter-spacing:.8px;
  color:#596367;
}

.contact-file-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

.contact-add-files{
  grid-column:1;
  justify-self:start;
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:9px;
  font-weight:800;
  letter-spacing:.8px;
  cursor:pointer;
}

.contact-add-files:hover{
  background:#061923;
}

.contact-file-limit{
  grid-column:2;
  min-height:1em;
  color:#8b3a2c;
  font-size:9px;
  font-weight:700;
  line-height:1.25;
}

.contact-file-list{
  grid-column:1 / -1;
  display:grid;
  gap:4px;
  max-height:118px;
  overflow:auto;
}

.contact-file-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto;
  gap:7px;
  align-items:center;
  min-height:34px;
  padding:4px 6px;
  border-top:1px solid #c9cdc9;
  background:rgba(255,255,255,.45);
}

.contact-file-type{
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
  color:#687477;
}

.contact-file-name{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:7px;
}

.contact-file-name strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  color:var(--navy);
}

.contact-file-name small{
  flex:0 0 auto;
  font-size:8px;
  color:#7a8587;
}

.contact-file-view,
.contact-file-remove{
  min-height:26px;
  padding:0 7px;
  border:1px solid #b8c0bd;
  background:#fff;
  color:var(--navy);
  font-family:var(--display);
  font-size:7px;
  font-weight:800;
  letter-spacing:.6px;
  cursor:pointer;
}

.contact-file-view:hover{
  border-color:var(--navy);
}

.contact-file-remove:hover{
  background:#332424;
  color:#fff;
  border-color:#332424;
}

.form-submit-row-v2{
  gap:12px!important;
  margin-top:0!important;
}

.form-submit-row-v2 button{
  min-width:155px!important;
  height:44px!important;
  font-size:12px!important;
  transition:transform .12s ease, background .18s ease!important;
}

.form-submit-row-v2 button:active{
  transform:translateY(2px);
}

.form-submit-row-v2 button:disabled{
  opacity:.72;
  cursor:wait;
}

.form-submit-row-v2 span{
  max-width:340px!important;
  font-size:7px!important;
  line-height:1.3!important;
}

.contact-success{
  display:none;
  border-left:4px solid var(--green);
  padding:9px 12px;
  background:#f8f6f0;
}

.contact-success.shown{
  display:grid;
  gap:1px;
}

.contact-success strong{
  font-family:var(--display);
  font-size:13px;
  color:var(--navy);
  letter-spacing:.3px;
}

.contact-success span{
  font-size:11px;
  color:#263d49;
}

.contact-success .contact-confirmation-note{
  margin-top:6px;
  color:var(--navy);
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.contact-image-v2{
  min-height:620px!important;
  height:100%!important;
}

.contact-image-v2>img{
  object-position:62% 58%!important;
}

.contact-image-v2 .contact-image-caption{
  left:20px!important;
  right:20px!important;
  bottom:20px!important;
}

.contact-image-v2 .contact-image-caption span{
  font-size:8px!important;
}

.contact-image-v2 .contact-image-caption strong{
  font-size:20px!important;
}

/* Fit the complete Contact interaction comfortably on normal laptop screens. */
@media(max-height:780px) and (min-width:1160px){
  .contact-section.contact-v2{
    min-height:600px!important;
    height:calc(100vh - 104px);
  }

  .contact-v2 .contact-main{
    padding-top:28px!important;
    padding-bottom:28px!important;
  }

  .contact-v2 .contact-copy h2{
    font-size:44px!important;
  }

  .contact-v2 .contact-copy>p{
    font-size:13px!important;
    margin-bottom:15px!important;
  }

  .contact-form-v2{
    gap:8px!important;
  }

  .contact-form-v2 textarea{
    min-height:80px!important;
    height:80px!important;
  }

  .contact-file-list{
    max-height:90px!important;
  }
}

@media(max-width:1150px){
  .contact-section.contact-v2{
    grid-template-columns:1fr!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }

  .contact-v2 .contact-main{
    grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr)!important;
  }

  .contact-image-v2{
    min-height:380px!important;
    height:380px!important;
  }
}

@media(max-width:760px){
  .contact-v2 .contact-main{
    padding:38px 5vw 44px!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }

  .contact-v2 .contact-copy h2{
    font-size:44px!important;
  }

  .contact-form-v2 .field-row{
    grid-template-columns:1fr!important;
  }

  .upload-field-v2{
    grid-template-columns:1fr!important;
  }

  .contact-add-files,
  .contact-file-limit{
    grid-column:1!important;
  }

  .contact-file-item{
    grid-template-columns:38px minmax(0,1fr) auto;
  }

  .contact-file-remove{
    grid-column:3;
  }

  .contact-file-view{
    grid-column:3;
  }

  .form-submit-row-v2{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}


/* =========================================================
   BATCH 44 — TECHNICAL SUPPORT HUB
   A deliberate full-width bridge into Contact V2.
   ========================================================= */

#help.technical-support-hub{
  scroll-margin-top:104px!important;
  min-height:430px;
  padding:54px 5vw 28px;
  display:grid;
  grid-template-columns:minmax(280px,.68fr) minmax(680px,1.32fr);
  grid-template-rows:1fr auto;
  gap:34px 54px;
  background:var(--navy);
  color:#fff;
  border:0;
}

.technical-support-intro{
  align-self:start;
  padding-top:3px;
}

.technical-support-intro>small{
  display:block;
  margin-bottom:12px;
  color:var(--green);
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
}

.technical-support-intro h2{
  margin:0;
  max-width:460px;
  color:#fff;
  font-size:clamp(44px,4.3vw,66px);
  line-height:.9;
  letter-spacing:-2.1px;
}

.technical-support-intro p{
  margin:20px 0 0;
  max-width:460px;
  color:#c7d2d6;
  font-size:14px;
  line-height:1.55;
}

.technical-support-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-width:0;
  border:1px solid rgba(255,255,255,.22);
}

.support-option{
  min-width:0;
  min-height:276px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  background:rgba(255,255,255,.025);
  border-right:1px solid rgba(255,255,255,.22);
}

.support-option:last-child{
  border-right:0;
}

.support-option-featured{
  background:rgba(255,255,255,.07);
}

.support-option>span{
  color:#8ea3ac;
  font-family:var(--display);
  font-size:10px;
  font-weight:800;
}

.support-option small{
  display:block;
  margin-bottom:8px;
  color:var(--green);
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.support-option h3{
  margin:0 0 9px;
  color:#fff;
  font-size:20px;
  line-height:1.02;
  letter-spacing:-.5px;
}

.support-option p{
  margin:0;
  color:#c5d0d4;
  font-size:11px;
  line-height:1.45;
}

.support-option>a,
.support-option>button{
  width:100%;
  min-height:42px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-top:1px solid rgba(255,255,255,.24);
  background:transparent;
  color:#fff;
  font:inherit;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.9px;
  text-align:left;
  cursor:pointer;
}

.support-option>a b,
.support-option>button b{
  color:var(--green);
  font-size:17px;
}

.support-option>a:hover,
.support-option>button:hover{
  color:var(--green);
}

.technical-support-direct{
  grid-column:1 / -1;
  min-height:50px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.22);
  color:#aebec4;
}

.technical-support-direct span,
.technical-support-direct i{
  font-family:var(--display);
  font-size:8px;
  font-style:normal;
  font-weight:900;
  letter-spacing:1.2px;
}

.technical-support-direct a{
  color:#fff;
  font-family:var(--display);
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
}

.technical-support-direct a:hover{
  color:var(--green);
}

/* Technical Support deliberately flows directly into beige Contact V2. */
#help.technical-support-hub + .contact-section.contact-v2{
  border-top:0!important;
}

/* Briefly show the user where the technical-support action landed. */
.contact-attention{
  outline:2px solid var(--green)!important;
  outline-offset:3px;
  transition:outline-color .25s ease, background .25s ease;
}

@media(max-height:760px) and (min-width:1101px){
  #help.technical-support-hub{
    min-height:380px;
    padding-top:38px;
    padding-bottom:22px;
  }

  .technical-support-intro h2{
    font-size:50px;
  }

  .technical-support-intro p{
    margin-top:14px;
    font-size:12px;
  }

  .support-option{
    min-height:240px;
    padding:15px;
  }
}

@media(max-width:1100px){
  #help.technical-support-hub{
    grid-template-columns:1fr;
  }

  .technical-support-intro{
    max-width:720px;
  }
}

@media(max-width:760px){
  #help.technical-support-hub{
    scroll-margin-top:86px!important;
    padding:42px 5vw 28px;
    gap:28px;
  }

  .technical-support-intro h2{
    font-size:44px;
  }

  .technical-support-options{
    grid-template-columns:1fr;
  }

  .support-option{
    min-height:210px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.22);
  }

  .support-option:last-child{
    border-bottom:0;
  }

  .technical-support-direct{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
}


/* =========================================================
   BATCH 45 — OFFICIAL CUSTOMER-FACING PRODUCT IDS
   Dumb-proof spoken/search reference: X-001 ... X-082
   ========================================================= */

.product-id-line,
.modal-product-id,
.basket-line-product-id{
  display:flex;
  align-items:baseline;
  gap:6px;
  color:#5c696d;
  font-weight:900;
  line-height:1.15;
}

.product-id-line{
  margin:-1px 0 9px;
  font-size:10px;
  letter-spacing:.45px;
}

.product-id-line span,
.modal-product-id span,
.basket-line-product-id span{
  font-size:.88em;
  letter-spacing:.65px;
}

.product-id-line strong{
  color:var(--navy);
  font-size:12px;
  letter-spacing:.9px;
}

/* Product description height is slightly reduced so adding the ID does not
   unnecessarily make every catalogue card taller. */
.product-info>p{
  height:49px!important;
}

.modal-product-id{
  margin:4px 0 5px;
  font-size:11px;
}

.modal-product-id strong{
  color:var(--navy);
  font-size:14px;
  letter-spacing:1px;
}

.basket-line-product-id{
  margin-top:7px;
  font-size:11px;
}

.basket-line-product-id strong{
  color:var(--navy);
  font-size:13px;
  letter-spacing:.8px;
}

/* Keep manufacturer code visually secondary to the LNK customer-facing ID. */
.modal-product-id + .sku{
  margin-top:5px;
}

@media(max-width:560px){
  .product-id-line{
    font-size:10px;
  }
  .product-id-line strong{
    font-size:12px;
  }
  .basket-line-product-id{
    font-size:11px;
  }
}


/* =========================================================
   BATCH 46 — PRODUCT ID READABILITY BUMP
   Slightly larger everywhere, still secondary to product title.
   ========================================================= */

.product-id-line{
  font-size:11px!important;
  margin:0 0 9px!important;
}

.product-id-line strong{
  font-size:14px!important;
  letter-spacing:1px!important;
}

.modal-product-id{
  font-size:12px!important;
}

.modal-product-id strong{
  font-size:15px!important;
}

.basket-line-product-id{
  font-size:12px!important;
}

.basket-line-product-id strong{
  font-size:14px!important;
}

/* Compact search: make the reference easier to catch at a glance. */
.site-search-result-main small{
  font-size:10px!important;
  line-height:1.3!important;
}

@media(max-width:560px){
  .product-id-line{
    font-size:11px!important;
  }

  .product-id-line strong{
    font-size:14px!important;
  }

  .basket-line-product-id{
    font-size:12px!important;
  }
}


/* =========================================================
   BATCH 47 — SERVICES PAGE REDESIGN
   ========================================================= */

#services.services-v2{
  scroll-margin-top:88px;
  background:#eeeae1;
  color:var(--navy);
}

.services-hero-v2{
  min-height:660px;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);
  background:var(--navy);
  color:#fff;
}

.services-hero-copy-v2{
  padding:72px 5vw 52px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.services-hero-copy-v2>small{
  margin-bottom:15px;
  color:var(--green);
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.8px;
}

.services-hero-copy-v2 h1{
  margin:0;
  color:#fff;
  font-size:clamp(72px,7.3vw,116px);
  line-height:.82;
  letter-spacing:-4.4px;
}

.services-hero-copy-v2>p{
  max-width:760px;
  margin:27px 0 0;
  color:#c9d5d9;
  font-size:16px;
  line-height:1.62;
}

.services-hero-actions-v2{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.services-hero-actions-v2 a,
.services-hero-actions-v2 button{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  gap:22px;
  border:1px solid rgba(255,255,255,.34);
  background:transparent;
  color:#fff;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
  cursor:pointer;
}

.services-hero-actions-v2 .services-action-primary{
  border-color:var(--green);
  background:var(--green);
  color:var(--navy);
}

.services-hero-actions-v2 b{
  font-size:16px;
}

.services-scope-line{
  margin-top:34px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
  color:#8ca2aa;
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.25px;
}

.services-scope-line i{
  color:var(--green);
  font-style:normal;
}

.services-hero-image-v2{
  position:relative;
  min-height:660px;
  overflow:hidden;
}

.services-hero-image-v2 img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.76) contrast(1.04);
}

.services-image-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,29,38,.42),rgba(7,29,38,.02) 42%),
    linear-gradient(0deg,rgba(7,29,38,.74),rgba(7,29,38,0) 42%);
}

.services-image-caption{
  position:absolute;
  left:26px;
  right:26px;
  bottom:24px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  color:#fff;
}

.services-image-caption span{
  color:var(--green);
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.2px;
}

.services-image-caption strong{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.7px;
}

.services-index-v2{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:#f4f1eb;
  border-bottom:1px solid #9ba6a7;
}

.services-index-v2 a{
  min-height:188px;
  padding:21px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--navy);
  border-right:1px solid #adb6b6;
  transition:background .18s ease,color .18s ease;
}

.services-index-v2 a:last-child{
  border-right:0;
}

.services-index-v2 a:hover{
  background:var(--navy);
  color:#fff;
}

.services-index-v2 span{
  font-family:var(--display);
  font-size:10px;
  font-weight:800;
}

.services-index-v2 strong{
  font-family:var(--display);
  font-size:22px;
  line-height:.98;
}

.services-index-v2 small{
  color:#66787d;
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.services-index-v2 a:hover small{
  color:var(--green);
}

.service-story{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(390px,.84fr) minmax(0,1.16fr);
  scroll-margin-top:88px;
}

.service-story-reverse{
  grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);
}

.service-story-reverse .service-story-image,
.service-story-reverse .service-story-graphic{
  order:2;
}

.service-story-reverse .service-story-copy{
  order:1;
}

.service-story-image{
  position:relative;
  min-height:680px;
  overflow:hidden;
}

.service-story-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-story-tag{
  position:absolute;
  top:24px;
  left:24px;
  min-width:78px;
  height:30px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:var(--navy);
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.service-story-copy{
  padding:58px 5vw 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.service-story-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.service-story-top span{
  min-width:36px;
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
}

.service-story-top small{
  color:#63777d;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.25px;
}

.service-story h2{
  margin:0;
  font-size:clamp(55px,5.3vw,86px);
  line-height:.86;
  letter-spacing:-3px;
}

.service-story-lead{
  max-width:820px;
  margin:24px 0 0;
  font-size:16px;
  line-height:1.58;
}

.service-story-facts{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(9,39,49,.22);
  border-left:1px solid rgba(9,39,49,.22);
}

.service-story-facts>div{
  min-height:156px;
  padding:18px;
  border-right:1px solid rgba(9,39,49,.22);
  border-bottom:1px solid rgba(9,39,49,.22);
}

.service-story-facts span{
  display:block;
  margin-bottom:11px;
  color:#61747a;
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.1px;
}

.service-story-facts p{
  margin:0;
  font-size:11px;
  line-height:1.5;
}

.service-story-actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.service-story-actions button,
.service-story-actions a{
  min-height:44px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  gap:17px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
}

.service-story-actions b{
  font-size:15px;
}

.service-story-dark{
  background:#0d2933;
  color:#fff;
}

.service-story-dark .service-story-copy{
  background:#0d2933;
}

.service-story-blue{
  background:#193c48;
  color:#fff;
}

.service-story-blue .service-story-copy{
  background:#193c48;
}

.service-story-dark .service-story-top small,
.service-story-blue .service-story-top small{
  color:#9eb0b6;
}

.service-story-dark .service-story-lead,
.service-story-blue .service-story-lead{
  color:#d0dadd;
}

.service-story-dark .service-story-facts,
.service-story-blue .service-story-facts{
  border-color:rgba(255,255,255,.2);
}

.service-story-dark .service-story-facts>div,
.service-story-blue .service-story-facts>div{
  border-color:rgba(255,255,255,.2);
}

.service-story-dark .service-story-facts span,
.service-story-blue .service-story-facts span{
  color:var(--green);
}

.service-story-dark .service-story-actions button,
.service-story-dark .service-story-actions a,
.service-story-blue .service-story-actions button,
.service-story-blue .service-story-actions a{
  border-color:rgba(255,255,255,.42);
  color:#fff;
}

.service-story-light{
  background:#efebe3;
  color:var(--navy);
}

.service-story-pool{
  background:#dfe6e5;
  color:var(--navy);
}

.service-story-graphic{
  position:relative;
  min-height:680px;
  overflow:hidden;
  background:
    linear-gradient(180deg,#8caeb4 0 54%,#173742 54% 100%);
}

.pool-graphic-line{
  position:absolute;
  left:9%;
  right:9%;
  height:1px;
  background:rgba(255,255,255,.68);
}

.pool-graphic-line-a{ top:31%; }
.pool-graphic-line-b{ top:54%; }

.pool-graphic-water{
  position:absolute;
  top:35%;
  left:9%;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(60px,7vw,106px);
  font-weight:900;
  letter-spacing:-3px;
  opacity:.82;
}

.pool-graphic-caption{
  position:absolute;
  left:9%;
  bottom:8%;
  color:#fff;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.25px;
}

.services-end-v2{
  min-height:330px;
  padding:52px 5vw;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:38px;
  align-items:end;
  background:#e7e0d4;
}

.services-end-v2 small{
  display:block;
  margin-bottom:13px;
  color:#5d747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
}

.services-end-v2 h2{
  margin:0;
  max-width:970px;
  font-size:clamp(44px,4.8vw,76px);
  line-height:.88;
  letter-spacing:-2.5px;
}

.services-end-actions-v2{
  min-width:280px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.services-end-actions-v2 button{
  min-height:47px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
}

.services-end-actions-v2 button:first-child{
  background:var(--navy);
  color:#fff;
}

@media(max-height:760px) and (min-width:1001px){
  .services-hero-v2{
    min-height:560px;
  }

  .services-hero-image-v2{
    min-height:560px;
  }

  .services-hero-copy-v2{
    padding-top:48px;
  }

  .services-hero-copy-v2 h1{
    font-size:82px;
  }

  .service-story,
  .service-story-image,
  .service-story-graphic{
    min-height:590px;
  }

  .service-story-copy{
    padding-top:42px;
    padding-bottom:38px;
  }
}

@media(max-width:1000px){
  .services-hero-v2{
    grid-template-columns:1fr;
  }

  .services-hero-image-v2{
    min-height:420px;
  }

  .services-index-v2{
    grid-template-columns:1fr 1fr;
  }

  .services-index-v2 a:nth-child(2){
    border-right:0;
  }

  .services-index-v2 a:nth-child(-n+2){
    border-bottom:1px solid #adb6b6;
  }

  .service-story,
  .service-story-reverse{
    grid-template-columns:1fr;
  }

  .service-story-reverse .service-story-image,
  .service-story-reverse .service-story-graphic,
  .service-story-reverse .service-story-copy{
    order:initial;
  }

  .service-story-image,
  .service-story-graphic{
    min-height:440px;
  }

  .services-end-v2{
    grid-template-columns:1fr;
  }

  .services-end-actions-v2{
    min-width:0;
    max-width:420px;
  }
}

@media(max-width:650px){
  .services-hero-copy-v2{
    padding:48px 5vw 38px;
  }

  .services-hero-copy-v2 h1{
    font-size:58px;
    letter-spacing:-2.6px;
  }

  .services-hero-copy-v2>p{
    font-size:14px;
  }

  .services-hero-image-v2{
    min-height:340px;
  }

  .services-index-v2{
    grid-template-columns:1fr;
  }

  .services-index-v2 a,
  .services-index-v2 a:nth-child(2){
    min-height:150px;
    border-right:0;
    border-bottom:1px solid #adb6b6;
  }

  .service-story-copy{
    padding:42px 5vw 38px;
  }

  .service-story h2{
    font-size:50px;
    letter-spacing:-1.9px;
  }

  .service-story-lead{
    font-size:14px;
  }

  .service-story-facts{
    grid-template-columns:1fr;
  }

  .service-story-facts>div{
    min-height:auto;
  }

  .services-end-v2{
    padding:42px 5vw;
  }
}


/* =========================================================
   BATCH 48 — SERVICES: LAPTOP FIT + ACTUALLY READABLE
   Designed around a normal laptop viewport at 100% zoom.
   ========================================================= */

/* ---------- GENERAL READABILITY ---------- */

.services-hero-copy-v2>small{
  font-size:12px!important;
}

.services-hero-copy-v2>p{
  font-size:18px!important;
  line-height:1.55!important;
}

.services-scope-line{
  font-size:10px!important;
}

.services-hero-actions-v2 a,
.services-hero-actions-v2 button{
  font-size:11px!important;
}

.services-image-caption span{
  font-size:10px!important;
}

.services-image-caption strong{
  font-size:11px!important;
}

.services-index-v2 span{
  font-size:11px!important;
}

.services-index-v2 strong{
  font-size:24px!important;
  line-height:1!important;
}

.services-index-v2 small{
  font-size:10px!important;
  line-height:1.25!important;
}

.service-story-top span{
  font-size:12px!important;
}

.service-story-top small{
  font-size:11px!important;
}

.service-story-lead{
  font-size:18px!important;
  line-height:1.5!important;
}

.service-story-facts span{
  font-size:10px!important;
}

.service-story-facts p{
  font-size:14px!important;
  line-height:1.48!important;
}

.service-story-actions button,
.service-story-actions a{
  min-height:46px!important;
  font-size:10px!important;
}

.services-end-v2 small{
  font-size:10px!important;
}

.services-end-actions-v2 button{
  font-size:10px!important;
}


/* ---------- NORMAL DESKTOP / LAPTOP ---------- */

@media(min-width:1001px){

  /* Header is already substantial; services should use the remaining screen,
     rather than pretending the header doesn't exist. */
  .services-hero-v2{
    min-height:0!important;
    height:calc(100vh - 124px)!important;
    max-height:730px!important;
    min-height:570px!important;
  }

  .services-hero-image-v2{
    min-height:0!important;
    height:100%!important;
  }

  .services-hero-copy-v2{
    padding:42px 4.6vw 38px!important;
    justify-content:center!important;
  }

  .services-hero-copy-v2 h1{
    font-size:clamp(66px,5.9vw,90px)!important;
    line-height:.84!important;
    letter-spacing:-3.2px!important;
  }

  .services-hero-copy-v2>p{
    max-width:700px!important;
    margin-top:22px!important;
  }

  .services-hero-actions-v2{
    margin-top:23px!important;
  }

  .services-scope-line{
    margin-top:23px!important;
  }

  .services-index-v2 a{
    min-height:152px!important;
    padding:18px 22px!important;
  }

  /* One complete service story fits comfortably below the fixed header. */
  .service-story,
  .service-story-reverse{
    min-height:0!important;
    height:calc(100vh - 124px)!important;
    max-height:730px!important;
    min-height:590px!important;
  }

  .service-story-image,
  .service-story-graphic{
    min-height:0!important;
    height:100%!important;
  }

  .service-story-copy{
    padding:32px 4.6vw 28px!important;
    justify-content:center!important;
  }

  .service-story-top{
    margin-bottom:12px!important;
  }

  .service-story h2{
    font-size:clamp(54px,4.45vw,68px)!important;
    line-height:.88!important;
    letter-spacing:-2.1px!important;
  }

  .service-story-lead{
    max-width:820px!important;
    margin-top:16px!important;
  }

  .service-story-facts{
    margin-top:24px!important;
  }

  .service-story-facts>div{
    min-height:132px!important;
    padding:16px!important;
  }

  .service-story-facts span{
    margin-bottom:9px!important;
  }

  .service-story-actions{
    margin-top:17px!important;
  }

  .services-end-v2{
    min-height:270px!important;
    padding:40px 5vw!important;
  }

  .services-end-v2 h2{
    font-size:clamp(42px,4vw,62px)!important;
  }
}


/* ---------- THE USER'S STANDARD LAPTOP RANGE ----------
   Screenshot is ~855px high including the large header.
   This is the key QA range for the desktop design. ---------- */

@media(min-width:1100px) and (max-height:900px){

  .services-hero-v2{
    height:calc(100vh - 124px)!important;
    min-height:0!important;
    max-height:none!important;
  }

  .services-hero-copy-v2{
    padding:30px 4.6vw 26px!important;
  }

  .services-hero-copy-v2 h1{
    font-size:clamp(58px,5vw,76px)!important;
    line-height:.86!important;
  }

  .services-hero-copy-v2>p{
    margin-top:18px!important;
    font-size:17px!important;
    line-height:1.5!important;
  }

  .services-hero-actions-v2{
    margin-top:18px!important;
  }

  .services-scope-line{
    margin-top:18px!important;
  }

  .services-index-v2 a{
    min-height:138px!important;
    padding:16px 20px!important;
  }

  .services-index-v2 strong{
    font-size:21px!important;
  }

  .service-story,
  .service-story-reverse{
    height:calc(100vh - 124px)!important;
    min-height:0!important;
    max-height:none!important;
  }

  .service-story-copy{
    padding:24px 4.4vw 22px!important;
  }

  .service-story-top{
    margin-bottom:9px!important;
  }

  .service-story h2{
    font-size:clamp(48px,3.7vw,60px)!important;
    line-height:.9!important;
    letter-spacing:-1.7px!important;
  }

  .service-story-lead{
    margin-top:13px!important;
    font-size:17px!important;
    line-height:1.43!important;
  }

  .service-story-facts{
    margin-top:18px!important;
  }

  .service-story-facts>div{
    min-height:118px!important;
    padding:14px!important;
  }

  .service-story-facts p{
    font-size:13.5px!important;
    line-height:1.42!important;
  }

  .service-story-actions{
    margin-top:14px!important;
  }

  .service-story-actions button,
  .service-story-actions a{
    min-height:42px!important;
    font-size:10px!important;
  }

  .service-story-tag{
    top:18px!important;
    left:18px!important;
  }
}


/* ---------- SHORT LAPTOPS ---------- */

@media(min-width:1100px) and (max-height:760px){

  .services-hero-copy-v2 h1{
    font-size:56px!important;
  }

  .services-hero-copy-v2>p{
    font-size:16px!important;
    margin-top:14px!important;
  }

  .services-hero-actions-v2{
    margin-top:14px!important;
  }

  .services-scope-line{
    margin-top:14px!important;
  }

  .service-story h2{
    font-size:48px!important;
  }

  .service-story-lead{
    font-size:16px!important;
    margin-top:10px!important;
  }

  .service-story-facts{
    margin-top:14px!important;
  }

  .service-story-facts>div{
    min-height:106px!important;
    padding:12px!important;
  }

  .service-story-facts p{
    font-size:13px!important;
  }

  .service-story-actions{
    margin-top:11px!important;
  }
}


/* ---------- TABLET / MOBILE READABILITY ---------- */

@media(max-width:1000px){
  .services-hero-copy-v2>p,
  .service-story-lead{
    font-size:16px!important;
  }

  .service-story-facts p{
    font-size:14px!important;
  }

  .services-index-v2 strong{
    font-size:22px!important;
  }
}

@media(max-width:650px){
  .services-hero-copy-v2>p,
  .service-story-lead{
    font-size:15px!important;
  }

  .service-story-facts p{
    font-size:14px!important;
  }

  .service-story-top small{
    font-size:10px!important;
  }

  .services-index-v2 small{
    font-size:9px!important;
  }
}


/* =========================================================
   BATCH 49 — SERVICES AUTHORITY + LAPTOP FIT
   More selling message, less photograph, bigger proof text.
   ========================================================= */

.service-story-facts strong{
  display:block;
  margin:0 0 9px;
  font-family:var(--display);
  font-size:17px;
  line-height:1.08;
  letter-spacing:-.2px;
}

.service-story-dark .service-story-facts strong,
.service-story-blue .service-story-facts strong{
  color:#fff;
}

.service-story-light .service-story-facts strong,
.service-story-pool .service-story-facts strong{
  color:var(--navy);
}

@media(min-width:1001px){

  /* Give the message more room than the photo. */
  .service-story{
    grid-template-columns:minmax(330px,.68fr) minmax(0,1.32fr)!important;
  }

  .service-story-reverse{
    grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr)!important;
  }

  .service-story-copy{
    padding-left:4.2vw!important;
    padding-right:4.2vw!important;
  }

  .service-story h2{
    font-size:clamp(58px,4.9vw,76px)!important;
    line-height:.87!important;
  }

  .service-story-lead{
    max-width:900px!important;
    font-size:19px!important;
    line-height:1.42!important;
  }

  .service-story-facts{
    margin-top:22px!important;
  }

  .service-story-facts>div{
    min-height:144px!important;
    padding:17px!important;
  }

  .service-story-facts span{
    font-size:11px!important;
    margin-bottom:10px!important;
  }

  .service-story-facts strong{
    font-size:17px!important;
  }

  .service-story-facts p{
    font-size:15px!important;
    line-height:1.38!important;
  }

  .service-story-actions{
    margin-top:17px!important;
  }

  .service-story-actions button,
  .service-story-actions a{
    min-height:46px!important;
    font-size:11px!important;
  }
}


/* Standard laptop range: this is the main target. */
@media(min-width:1100px) and (max-height:900px){

  .service-story,
  .service-story-reverse{
    height:calc(100vh - 114px)!important;
    min-height:620px!important;
  }

  .service-story-copy{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  .service-story-top{
    margin-bottom:10px!important;
  }

  .service-story h2{
    font-size:clamp(56px,4.5vw,70px)!important;
  }

  .service-story-lead{
    margin-top:13px!important;
    font-size:18px!important;
  }

  .service-story-facts{
    margin-top:18px!important;
  }

  .service-story-facts>div{
    min-height:136px!important;
    padding:15px 16px!important;
  }

  .service-story-facts span{
    font-size:10.5px!important;
    margin-bottom:8px!important;
  }

  .service-story-facts strong{
    font-size:16px!important;
    margin-bottom:7px!important;
  }

  .service-story-facts p{
    font-size:14px!important;
    line-height:1.34!important;
  }

  .service-story-actions{
    margin-top:14px!important;
  }

  .service-story-actions button,
  .service-story-actions a{
    min-height:44px!important;
    font-size:10.5px!important;
  }
}


/* Shorter laptop: keep it big enough to read, trim words/spacing rather
   than returning to tiny disclaimer typography. */
@media(min-width:1100px) and (max-height:760px){

  .service-story,
  .service-story-reverse{
    height:calc(100vh - 108px)!important;
    min-height:570px!important;
  }

  .service-story h2{
    font-size:54px!important;
  }

  .service-story-lead{
    font-size:17px!important;
    line-height:1.38!important;
  }

  .service-story-facts{
    margin-top:14px!important;
  }

  .service-story-facts>div{
    min-height:122px!important;
    padding:13px 14px!important;
  }

  .service-story-facts strong{
    font-size:15px!important;
  }

  .service-story-facts p{
    font-size:13.5px!important;
    line-height:1.3!important;
  }

  .service-story-actions{
    margin-top:11px!important;
  }
}

@media(max-width:1000px){
  .service-story-facts strong{
    font-size:17px!important;
  }
}

@media(max-width:650px){
  .service-story-facts strong{
    font-size:16px!important;
  }

  .service-story-facts p{
    font-size:14px!important;
  }
}


/* =========================================================
   BATCH 50 — REAL POOL PROJECT IMAGE + QUOTE CTA
   ========================================================= */

.service-story-pool-image img{
  object-position:52% 48%!important;
}

/* Keep the real pool photograph crisp and construction-led. */
.service-story-pool-image{
  background:#1a3138;
}

@media(min-width:1001px){
  .service-story-pool-image img{
    object-position:50% 48%!important;
  }
}

@media(max-width:1000px){
  .service-story-pool-image img{
    object-position:50% 46%!important;
  }
}


/* =========================================================
   BATCH 53 — SHOP DROPDOWN: EXACT SERVICES NAV MATCH
   Desktop final header = 104px. Mobile final header = 86px.
   ========================================================= */

.shop-nav{
  height:104px;
  display:flex;
  align-items:stretch;
  position:relative;
  margin:0;
  padding:0;
}

.shop-nav>.shop-trigger{
  height:104px;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.75px;
  text-transform:uppercase;
  white-space:nowrap;
}

.shop-nav>.shop-trigger:hover{
  background:#ffffff0d;
  color:#fff;
}

.shop-nav>.shop-trigger span{
  display:inline-block;
  margin-left:7px;
  opacity:.7;
  transform:translateY(-1px);
}

.shop-menu{
  position:absolute;
  left:0;
  top:104px;
  width:420px;
  background:#fff;
  border:1px solid #d8d9d6;
  border-top:4px solid var(--green);
  box-shadow:0 18px 35px #0002;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:.15s ease;
  z-index:80;
}

.shop-nav:hover .shop-menu,
.shop-nav:focus-within .shop-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}

.shop-menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:17px 19px;
  border:0;
  border-bottom:1px solid #ececea;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.shop-menu button:last-child{
  border-bottom:0;
}

.shop-menu button:hover,
.shop-menu button:focus{
  background:#f4f2ed;
  outline:none;
}

.shop-menu strong{
  font-family:var(--display);
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

@media(max-width:760px){
  .shop-nav{
    height:86px;
  }

  .shop-nav>.shop-trigger{
    height:86px;
    min-height:86px;
    padding:0 14px;
    font-size:13px;
  }

  .shop-menu{
    top:86px;
    width:min(420px,90vw);
  }
}


/* =========================================================
   BATCH 55 — SERVICES CLEANUP
   No duplicate index. No redundant pre-Gallery CTA block.
   ========================================================= */

.services-hero-v2 + .service-story{
  border-top:1px solid rgba(255,255,255,.16);
}

/* Old index/end blocks are removed from the DOM; these safeguards stop
   any stale markup from displaying if a browser restores cached HTML. */
.services-index-v2,
.services-end-v2{
  display:none!important;
}


/* =========================================================
   BATCH 56 — ACCOUNT PREVIEW + TIGHTER HEADER
   ========================================================= */

/* Keep the existing font size. Only recover wasted horizontal space. */
@media(min-width:1101px){
  .nav{
    gap:0!important;
  }

  .nav>a,
  .services-nav>.services-trigger,
  .shop-nav>.shop-trigger{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .brand{
    margin-right:34px!important;
  }
}

/* ---------- Account utility ---------- */
.account-util{
  position:relative;
  display:flex;
  align-items:center;
}

.account-button{
  height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #ffffff4a;
  background:transparent;
  color:#fff;
  font-family:var(--display);
  font-size:13px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}

.account-button:hover,
.account-button:focus{
  background:#ffffff0d;
  outline:none;
}

.account-person{
  width:15px;
  height:15px;
  border:1.4px solid #fff;
  border-radius:50%;
  position:relative;
  display:inline-block;
}

.account-person:before{
  content:'';
  position:absolute;
  width:4px;
  height:4px;
  border:1.2px solid #fff;
  border-radius:50%;
  top:2px;
  left:4px;
}

.account-person:after{
  content:'';
  position:absolute;
  width:7px;
  height:4px;
  border:1.2px solid #fff;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  left:2.6px;
  bottom:1.8px;
}

.account-arrow{
  font-size:11px;
  opacity:.7;
}

.account-dropdown{
  position:absolute;
  right:0;
  top:58px;
  width:300px;
  background:#fff;
  color:var(--navy);
  border:1px solid #d8d9d6;
  border-top:4px solid var(--green);
  box-shadow:0 18px 35px #0002;
  opacity:0;
  visibility:hidden;
  transform:translateY(-3px);
  transition:.15s ease;
  z-index:150;
}

.account-dropdown.open{
  opacity:1;
  visibility:visible;
  transform:none;
}

.account-dropdown button{
  width:100%;
  min-height:50px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  border:0;
  border-bottom:1px solid #ececea;
  background:#fff;
  color:var(--navy);
  text-align:left;
  cursor:pointer;
}

.account-dropdown button:hover{
  background:#f4f2ed;
}

.account-dropdown strong{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.45px;
}

.account-dropdown small{
  color:#65767c;
  font-size:11px;
  line-height:1.3;
}

.account-dropdown-name{
  padding:13px 16px;
  background:#f1eee8;
  border-bottom:1px solid #ddd;
  color:#64767b;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.9px;
}

.account-logout-button strong{
  color:#7b2929;
}

/* ---------- Account drawer ---------- */
.account-drawer-open{
  overflow:hidden;
}

.account-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(4,19,26,.68);
  backdrop-filter:blur(3px);
}

.account-drawer-overlay[hidden]{
  display:none!important;
}

.account-drawer{
  position:absolute;
  top:0;
  right:0;
  width:min(680px,94vw);
  height:100%;
  background:#f1eee7;
  color:var(--navy);
  border-left:1px solid #9fa9a8;
  box-shadow:-25px 0 60px #0005;
  overflow:auto;
}

.account-drawer-head{
  min-height:104px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--navy);
  color:#fff;
  border-bottom:4px solid var(--green);
}

.account-drawer-head small{
  display:block;
  margin-bottom:4px;
  color:#a7b8be;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
}

.account-drawer-head h2{
  margin:0;
  color:#fff;
  font-size:30px;
}

.account-drawer-close{
  width:42px;
  height:42px;
  border:1px solid #ffffff66;
  background:transparent;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.account-drawer-body{
  padding:34px 28px 42px;
}

.account-view[hidden]{
  display:none!important;
}

.account-eyebrow{
  display:block;
  margin-bottom:9px;
  color:#61747a;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}

.account-view h3{
  margin:0;
  font-size:55px;
  line-height:.88;
  letter-spacing:-1.8px;
}

.account-intro{
  margin:17px 0 26px;
  max-width:560px;
  color:#455b62;
  font-size:16px;
  line-height:1.5;
}

.account-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.account-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.account-form label,
.save-list-box label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#52676d;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}

.account-form input,
.account-form textarea,
.save-list-box input{
  width:100%;
  padding:12px 13px;
  border:1px solid #aab4b4;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:14px;
  outline:none;
}

.account-form input:focus,
.account-form textarea:focus,
.save-list-box input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(168,201,74,.15);
}

.account-main-action{
  min-height:48px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
}

.account-link-action{
  padding:7px 0;
  border:0;
  background:transparent;
  color:var(--navy);
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  text-align:left;
  cursor:pointer;
}

.account-preview-warning{
  margin-top:4px;
  padding:10px 11px;
  border:1px solid #c3c8c5;
  color:#65767b;
  font-size:10px;
  line-height:1.35;
}

.account-form-error{
  padding:10px 11px;
  border:1px solid #b47b7b;
  background:#fff3f2;
  color:#762b2b;
  font-size:12px;
}

.account-form-success{
  padding:10px 11px;
  border:1px solid #9eb06d;
  background:#f3f7e8;
  color:#31451f;
  font-size:12px;
  line-height:1.4;
}

.account-form-success[hidden]{
  display:none!important;
}

.save-list-box{
  margin-bottom:18px;
  padding:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
  border:1px solid #b8c0be;
  background:#e8e5dd;
}

.save-list-box .account-main-action{
  min-width:190px;
}

.account-empty-state{
  padding:25px;
  border:1px solid #b8c0be;
  background:#faf8f3;
}

.account-empty-state strong{
  display:block;
  margin-bottom:7px;
  font-family:var(--display);
  font-size:19px;
}

.account-empty-state p{
  margin:0;
  color:#596b71;
  font-size:14px;
  line-height:1.45;
}

.account-list-row,
.account-order-row{
  margin-top:11px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  border:1px solid #b8c0be;
  background:#fff;
}

.account-list-row small,
.account-order-row small{
  color:#61747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.account-list-row h4,
.account-order-row h4{
  margin:4px 0 7px;
  font-size:22px;
}

.account-list-row p,
.account-order-row p{
  margin:0;
  color:#5a6b70;
  font-size:12px;
  line-height:1.4;
}

.account-row-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}

.account-row-actions button,
.account-row-actions a{
  min-height:39px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.account-row-actions .account-delete-lite{
  border-color:#a89090;
  color:#7a2929;
}

.account-order-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.account-order-top>span{
  color:#61747a;
  font-size:11px;
}

.account-delivery-status{
  margin:8px 0;
  display:flex;
  gap:9px;
  align-items:center;
}

.account-delivery-status span{
  color:#61747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
}

.account-delivery-status strong{
  font-size:13px;
}

.account-saved-feedback{
  min-height:18px;
  color:#3e683e;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
}

/* ---------- Basket conflict / reorder choice ---------- */
.account-choice-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,19,26,.78);
  backdrop-filter:blur(4px);
}

.account-choice-overlay[hidden]{
  display:none!important;
}

.account-choice-modal{
  width:min(680px,94vw);
  padding:26px;
  background:#f1eee7;
  color:var(--navy);
  border-top:5px solid var(--green);
  box-shadow:0 28px 70px #0006;
}

.account-choice-modal>small{
  color:#61747a;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
}

.account-choice-modal h3{
  margin:7px 0 10px;
  font-size:38px;
}

.account-choice-modal>p{
  margin:0 0 20px;
  color:#596c71;
  font-size:14px;
  line-height:1.45;
}

.account-choice-buttons{
  display:grid;
  gap:8px;
}

.account-choice-buttons button{
  min-height:65px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  border:1px solid #aab5b4;
  background:#fff;
  color:var(--navy);
  text-align:left;
  cursor:pointer;
}

.account-choice-buttons button:hover{
  border-color:var(--navy);
}

.account-choice-buttons strong{
  font-family:var(--display);
  font-size:12px;
  letter-spacing:.55px;
}

.account-choice-buttons span{
  color:#617278;
  font-size:12px;
}

.account-choice-buttons .account-choice-cancel{
  min-height:44px;
  background:transparent;
}

/* ---------- Smaller laptop / tablet ---------- */
@media(max-width:1250px) and (min-width:901px){
  .nav>a,
  .services-nav>.services-trigger,
  .shop-nav>.shop-trigger{
    padding-left:9px!important;
    padding-right:9px!important;
    font-size:14px!important;
  }

  .brand{
    margin-right:22px!important;
  }

  .account-button,
  .search-button,
  .basket{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .account-person{
    display:none;
  }
}

@media(max-width:900px){
  .account-button{
    height:42px;
    padding:0 8px;
    font-size:11px;
  }

  .account-person{
    display:none;
  }

  .account-dropdown{
    top:52px;
    width:min(300px,90vw);
  }

  .account-drawer-body{
    padding:26px 20px 34px;
  }

  .account-two-col{
    grid-template-columns:1fr;
  }

  .save-list-box{
    grid-template-columns:1fr;
  }

  .save-list-box .account-main-action{
    min-width:0;
  }

  .account-list-row,
  .account-order-row{
    grid-template-columns:1fr;
  }

  .account-row-actions{
    justify-content:flex-start;
  }
}

@media(max-width:620px){
  .account-view h3{
    font-size:44px;
  }

  .account-intro{
    font-size:15px;
  }

  .account-choice-modal{
    padding:21px 17px;
  }

  .account-choice-modal h3{
    font-size:31px;
  }
}


/* =========================================================
   BATCH 57 — ACCOUNT REFINEMENTS
   Confirm password + view saved list + structured addresses.
   ========================================================= */

.account-address-block{
  padding:17px;
  display:flex;
  flex-direction:column;
  gap:13px;
  border:1px solid #b7bfbd;
  background:#e9e6de;
}

.account-address-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-bottom:10px;
  border-bottom:1px solid #bec5c3;
}

.account-address-title>span{
  font-family:var(--display);
  font-size:12px;
  font-weight:900;
  letter-spacing:.75px;
  color:var(--navy);
}

.account-copy-address{
  padding:6px 8px;
  border:0;
  border-bottom:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}

.account-list-view-overlay{
  position:fixed;
  inset:0;
  z-index:1150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,19,26,.78);
  backdrop-filter:blur(4px);
}

.account-list-view-overlay[hidden]{
  display:none!important;
}

.account-list-view-modal{
  width:min(920px,95vw);
  max-height:min(760px,92vh);
  display:flex;
  flex-direction:column;
  background:#f1eee7;
  color:var(--navy);
  border-top:5px solid var(--green);
  box-shadow:0 30px 70px #0007;
}

.account-list-view-head{
  min-height:95px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #b9c1bf;
}

.account-list-view-head small{
  display:block;
  margin-bottom:4px;
  color:#63767b;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
}

.account-list-view-head h3{
  margin:0;
  font-size:31px;
}

.account-list-view-head>button{
  width:42px;
  height:42px;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-size:28px;
  cursor:pointer;
}

.account-list-view-body{
  min-height:0;
  display:flex;
  flex-direction:column;
}

.account-list-view-items{
  min-height:0;
  overflow:auto;
  padding:10px 22px 0;
}

.account-list-product-row{
  min-height:86px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid #c8cdca;
}

.account-list-product-qty{
  font-family:var(--display);
  font-size:19px;
  font-weight:900;
}

.account-list-product-main>strong{
  display:block;
  font-size:15px;
  line-height:1.25;
}

.account-list-product-meta{
  margin-top:7px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 13px;
  color:#617278;
  font-family:var(--display);
  font-size:10px;
  font-weight:800;
  letter-spacing:.35px;
}

.account-list-product-price{
  min-width:90px;
  text-align:right;
}

.account-list-product-price strong{
  display:block;
  font-size:15px;
}

.account-list-product-price small{
  color:#63767b;
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
}

.account-list-view-footer{
  padding:16px 22px 20px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  border-top:1px solid #b9c1bf;
  background:#e8e5dd;
}

.account-list-view-footer .account-main-action{
  min-width:205px;
}

@media(max-width:650px){
  .account-address-title{
    align-items:flex-start;
    flex-direction:column;
  }

  .account-list-view-overlay{
    padding:10px;
  }

  .account-list-view-modal{
    max-height:96vh;
  }

  .account-list-product-row{
    grid-template-columns:38px minmax(0,1fr);
  }

  .account-list-product-price{
    grid-column:2;
    text-align:left;
  }

  .account-list-view-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .account-list-view-footer .account-main-action{
    min-width:0;
  }
}


/* =========================================================
   BATCH 59 — ACCOUNT UX FIX
   Visible password mismatch + saved-list add returns Home.
   ========================================================= */

.password-mismatch-message{
  margin-top:-3px;
  padding:11px 13px;
  border:1px solid #9d5555;
  background:#fff0ee;
  color:#7d2727;
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
}

.password-mismatch-message[hidden]{
  display:none!important;
}

.account-form input.account-field-error{
  border-color:#9d5555!important;
  background:#fff7f6!important;
  box-shadow:0 0 0 2px rgba(157,85,85,.12)!important;
}


/* =========================================================
   BATCH 60 — UK POSTCODE ADDRESS LOOKUP
   ========================================================= */

.postcode-lookup-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}

.postcode-find-button{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
  white-space:nowrap;
}

.postcode-lookup-status{
  padding:9px 11px;
  border:1px solid #c3c9c6;
  background:#f6f4ef;
  color:#61747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:800;
  letter-spacing:.45px;
  line-height:1.35;
}

.postcode-lookup-status[hidden],
.postcode-select-wrap[hidden]{
  display:none!important;
}

.postcode-lookup-status.error{
  border-color:#a86565;
  background:#fff1ef;
  color:#7b2a2a;
}

.postcode-lookup-status.success{
  border-color:#93a76b;
  background:#f4f8e8;
  color:#49612f;
}

.postcode-select-wrap select{
  width:100%;
  min-height:43px;
  padding:0 12px;
  border:1px solid #aab4b4;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:14px;
}

@media(max-width:560px){
  .postcode-lookup-row{
    grid-template-columns:1fr;
  }

  .postcode-find-button{
    width:100%;
  }
}


/* =========================================================
   BATCH 61 — CHECKOUT
   ========================================================= */

.checkout-page{
  display:none;
  min-height:100vh;
  padding:92px 5vw 70px;
  background:#ece9e1;
  color:var(--navy);
}

.checkout-page.open{
  display:block;
}

body.checkout-view{
  background:#ece9e1;
}

.checkout-page-head{
  max-width:1500px;
  margin:0 auto 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
}

.checkout-kicker{
  margin-bottom:7px;
  color:#61747a;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.4px;
}

.checkout-page-head h1{
  margin:0;
  font-size:clamp(52px,7vw,92px);
  line-height:.82;
  letter-spacing:-3px;
}

.checkout-page-head p{
  max-width:700px;
  margin:18px 0 0;
  color:#53666c;
  font-size:16px;
  line-height:1.5;
}

.checkout-back-basket{
  min-height:45px;
  padding:0 15px;
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.75px;
  cursor:pointer;
  white-space:nowrap;
}

.checkout-preview-banner{
  max-width:1500px;
  margin:0 auto 18px;
  padding:11px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #b8c0bd;
  background:#f7f5ef;
  color:#5b6d72;
  font-size:12px;
}

.checkout-preview-banner strong{
  color:var(--navy);
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.9px;
}

.checkout-main{
  max-width:1500px;
  margin:0 auto;
}

.checkout-main[hidden],
.checkout-confirmation[hidden]{
  display:none!important;
}

.checkout-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,430px);
  gap:24px;
  align-items:start;
}

.checkout-left{
  display:grid;
  gap:16px;
}

.checkout-block{
  padding:22px;
  border:1px solid #bcc3c1;
  background:#f7f5ef;
}

.checkout-step-head{
  margin-bottom:20px;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.checkout-step-head>span{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
  font-family:var(--display);
  font-size:11px;
  font-weight:900;
}

.checkout-step-head small{
  display:block;
  margin-bottom:3px;
  color:#61747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.checkout-step-head h2{
  margin:0;
  font-size:27px;
  line-height:1;
}

.checkout-form label,
.checkout-address-select{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#52676d;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.85px;
}

.checkout-form input,
.checkout-form select{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid #aab4b4;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-size:14px;
  outline:none;
}

.checkout-form input:focus,
.checkout-form select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(168,201,74,.15);
}

.checkout-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.checkout-account-state{
  margin:-3px 0 16px;
  padding:10px 12px;
  display:flex;
  gap:9px;
  align-items:center;
  border:1px solid #c4cac7;
  background:#eeece6;
}

.checkout-account-state strong{
  font-family:var(--display);
  font-size:9px;
  letter-spacing:.8px;
}

.checkout-account-state span{
  color:#607177;
  font-size:12px;
}

.checkout-account-state.signed-in{
  border-color:#9eae78;
  background:#f1f6e6;
}

.checkout-address-block{
  display:grid;
  gap:12px;
}

.checkout-postcode-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}

.checkout-postcode-row>button{
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.75px;
  cursor:pointer;
}

.checkout-lookup-status{
  padding:9px 11px;
  border:1px solid #c2c8c6;
  background:#f0eee8;
  color:#617278;
  font-family:var(--display);
  font-size:9px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.35;
}

.checkout-lookup-status[hidden],
.checkout-address-select[hidden],
.checkout-address-block[hidden]{
  display:none!important;
}

.checkout-lookup-status.error{
  border-color:#aa6868;
  background:#fff1ef;
  color:#792828;
}

.checkout-lookup-status.success{
  border-color:#94a970;
  background:#f2f7e6;
  color:#4d6333;
}

.checkout-same-address{
  width:max-content;
  max-width:100%;
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px!important;
  cursor:pointer;
}

.checkout-same-address input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.checkout-checkbox-mark{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
  background:#fff;
}

.checkout-same-address input:checked + .checkout-checkbox-mark{
  background:var(--navy);
}

.checkout-same-address input:checked + .checkout-checkbox-mark:after{
  content:'✓';
  color:#fff;
  font-size:13px;
}

.checkout-same-address strong{
  color:var(--navy);
  font-size:11px;
  letter-spacing:.6px;
}

.checkout-method-card{
  min-height:88px;
  padding:16px;
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  gap:14px!important;
  align-items:center;
  border:1px solid var(--navy);
  background:#fff;
  cursor:pointer;
}

.checkout-method-card input{
  width:18px;
  min-height:18px;
  accent-color:var(--navy);
}

.checkout-method-card>div strong{
  display:block;
  color:var(--navy);
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.6px;
}

.checkout-method-card>div p{
  margin:5px 0 0;
  color:#5d6f74;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.45;
}

.checkout-method-card>span{
  color:#617278;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
}

.checkout-payment-placeholder{
  padding:16px;
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid #adb7b6;
  background:#fff;
}

.checkout-payment-icon{
  min-width:60px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
  font-family:var(--display);
  font-weight:900;
  letter-spacing:2px;
}

.checkout-payment-placeholder strong{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.5px;
}

.checkout-payment-placeholder p{
  margin:5px 0 0;
  color:#5d6f74;
  font-size:12px;
  line-height:1.45;
}

.checkout-payment-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #c1c7c5;
  color:#617278;
  font-size:11px;
  line-height:1.4;
}

.checkout-payment-note strong{
  color:var(--navy);
  font-family:var(--display);
  font-size:9px;
  letter-spacing:.65px;
}

.checkout-summary{
  min-width:0;
}

.checkout-summary-sticky{
  position:sticky;
  top:128px;
  padding:22px;
  border:1px solid #aeb8b6;
  background:var(--navy);
  color:#fff;
}

.checkout-summary-kicker{
  color:#aab9be;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
}

.checkout-summary h2{
  margin:5px 0 18px;
  color:#fff;
  font-size:31px;
}

.checkout-summary-items{
  max-height:280px;
  overflow:auto;
  border-top:1px solid #ffffff2d;
  border-bottom:1px solid #ffffff2d;
}

.checkout-summary-item{
  padding:11px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:13px;
  border-bottom:1px solid #ffffff1c;
}

.checkout-summary-item:last-child{
  border-bottom:0;
}

.checkout-summary-item strong{
  display:block;
  font-size:12px;
  line-height:1.3;
}

.checkout-summary-item span{
  display:block;
  margin-top:4px;
  color:#adbbc0;
  font-size:10px;
  line-height:1.35;
}

.checkout-summary-item>b{
  font-size:12px;
  white-space:nowrap;
}

.checkout-summary-totals{
  padding:15px 0 5px;
}

.checkout-summary-totals>div{
  min-height:35px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid #ffffff1f;
}

.checkout-summary-totals span{
  color:#b4c0c4;
  font-size:11px;
}

.checkout-summary-totals strong{
  font-size:13px;
}

.checkout-summary-totals small{
  grid-column:2;
  margin-top:-8px;
  margin-bottom:5px;
  color:#8fa0a6;
  font-size:8px;
  text-align:right;
}

.checkout-summary-totals .delivery strong{
  color:#d5e3a2;
  font-family:var(--display);
  font-size:9px;
  letter-spacing:.7px;
}

.checkout-summary-totals .grand{
  padding:12px 0;
  border-bottom:0;
}

.checkout-summary-totals .grand span{
  color:#fff;
  font-family:var(--display);
  font-weight:900;
}

.checkout-summary-totals .grand strong{
  font-size:24px;
}

.checkout-place-order{
  width:100%;
  min-height:54px;
  margin-top:8px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  background:var(--green);
  color:var(--navy);
  font-family:var(--display);
  font-size:12px;
  font-weight:900;
  letter-spacing:.85px;
  cursor:pointer;
}

.checkout-place-order:hover{
  filter:brightness(1.04);
}

.checkout-place-note{
  margin:10px 0;
  color:#aab8bd;
  font-size:10px;
  line-height:1.4;
}

.checkout-place-note strong{
  color:#fff;
  font-family:var(--display);
  font-size:9px;
}

.checkout-edit-basket{
  width:100%;
  min-height:40px;
  border:1px solid #ffffff4f;
  background:transparent;
  color:#fff;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.65px;
  cursor:pointer;
}

.checkout-legal-confirmation{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #c3c9c6;
}

.checkout-form .checkout-legal-acceptance{
  margin:0;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:11px;
  align-items:start;
  color:var(--navy);
  cursor:pointer;
}

.checkout-form .checkout-legal-acceptance input{
  width:22px;
  min-height:22px;
  height:22px;
  margin:1px 0 0;
  accent-color:var(--navy);
}

.checkout-legal-acceptance span{
  display:block;
}

.checkout-legal-acceptance strong{
  display:block;
  margin-bottom:5px;
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.7px;
}

.checkout-legal-acceptance small{
  display:block;
  color:#586a70;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.5;
}

.checkout-legal-acceptance a{
  color:var(--navy);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

.checkout-legal-acceptance .checkout-field-error{
  grid-column:2;
}

.contact-privacy-note{
  margin:14px 0 0;
  color:#59696e;
  font-size:11px;
  line-height:1.5;
}

.contact-privacy-note a{
  color:var(--navy);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Batch 132: complete statutory identity and policy navigation. */
footer{
  grid-template-columns:minmax(190px,260px) minmax(190px,.7fr) minmax(320px,1.3fr)!important;
  align-items:start!important;
  gap:34px 52px!important;
}

.footer-contact a,
.footer-company a{
  color:#fff;
  text-decoration:none;
}

.footer-contact a:hover,
.footer-legal a:hover,
.footer-legal button:hover{
  color:var(--green);
}

.footer-company p{
  margin-top:8px;
  font-size:12px!important;
  line-height:1.65;
}

.footer-company strong{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.4px;
}

.footer-legal{
  grid-column:1 / -1;
  padding-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  border-top:1px solid rgba(255,255,255,.2);
}

.footer-legal a,
.footer-legal button{
  padding:0;
  border:0;
  background:transparent;
  color:#d5dfe2;
  font:700 11px/1.4 Arial,sans-serif;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

.footer-note{
  grid-column:1 / -1;
  text-align:left!important;
}

@media(max-width:760px){
  .checkout-legal-confirmation{
    margin-top:12px;
    padding-top:12px;
  }

  .checkout-form .checkout-legal-acceptance{
    margin:0!important;
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
  }

  .checkout-form .checkout-legal-acceptance input{
    width:22px!important;
    height:22px!important;
    min-height:22px!important;
    padding:0!important;
  }

  .checkout-legal-acceptance small{
    font-size:10px;
  }

  footer{
    grid-template-columns:1fr!important;
    gap:25px!important;
  }

  .footer-legal,
  .footer-note{
    grid-column:1!important;
  }

  .footer-legal{
    display:grid;
    gap:13px;
  }
}

.checkout-confirmation{
  max-width:900px;
  margin:30px auto 0;
}

.checkout-confirmation-card{
  padding:38px;
  border:1px solid #aeb7b5;
  border-top:5px solid var(--green);
  background:#f7f5ef;
  text-align:center;
}

.checkout-confirmation-card>small{
  color:#61747a;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}

.checkout-confirmation-mark{
  width:66px;
  height:66px;
  margin:18px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:28px;
}

.checkout-confirmation-card h2{
  margin:0;
  font-size:clamp(48px,7vw,76px);
  line-height:.86;
  letter-spacing:-2px;
}

.checkout-confirmation-card>p{
  max-width:620px;
  margin:18px auto;
  color:#566a70;
  font-size:15px;
  line-height:1.5;
}

.checkout-confirmation-number{
  margin:24px auto 14px;
  padding:17px;
  max-width:500px;
  border:1px solid #aeb7b5;
  background:#fff;
}

.checkout-confirmation-number span,
.checkout-confirmation-grid span{
  display:block;
  color:#61747a;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.9px;
}

.checkout-confirmation-number strong{
  display:block;
  margin-top:5px;
  font-size:24px;
}

.checkout-confirmation-grid{
  max-width:700px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.checkout-confirmation-grid>div{
  padding:17px;
  border:1px solid #b8c0be;
  background:#eeeae2;
}

.checkout-confirmation-grid strong{
  display:block;
  margin-top:6px;
  font-size:18px;
}

.checkout-confirmation-grid small{
  display:block;
  margin-top:4px;
  color:#687a7f;
  font-size:9px;
}

.checkout-confirmation-actions{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.checkout-confirmation-actions button{
  min-height:46px;
  padding:0 17px;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}

.checkout-confirmation-actions .primary{
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
}

.checkout-confirmation-actions .secondary{
  border:1px solid var(--navy);
  background:transparent;
  color:var(--navy);
}

.checkout-confirmation-foot{
  margin-bottom:0!important;
  font-size:11px!important;
}

/* =========================================================
   BATCH 106 — COMPACT PAYMENT CONFIRMATION
   ========================================================= */
.checkout-page.confirmation-view{
  min-height:calc(100vh - 110px);
  padding-top:44px;
  padding-bottom:44px;
}

.checkout-page.confirmation-view .checkout-page-head,
.checkout-page.confirmation-view .checkout-preview-banner,
.checkout-page.confirmation-view .mobile-checkout-progress{
  display:none!important;
}

.checkout-page.confirmation-view .checkout-confirmation{
  max-width:760px;
  margin:0 auto;
}

.checkout-page.confirmation-view .checkout-confirmation-card{
  padding:28px 34px 30px;
  border-top-width:4px;
}

.checkout-page.confirmation-view .checkout-confirmation-mark{
  width:50px;
  height:50px;
  margin:13px auto 14px;
  font-size:23px;
}

.checkout-page.confirmation-view .checkout-confirmation-card h2{
  font-size:clamp(32px,4.1vw,46px);
  line-height:.96;
  letter-spacing:-1.2px;
}

.checkout-page.confirmation-view .checkout-confirmation-card>p{
  max-width:590px;
  margin:12px auto 16px;
  font-size:14px;
  line-height:1.45;
}

.checkout-page.confirmation-view .checkout-confirmation-number{
  max-width:560px;
  margin:16px auto 10px;
  padding:13px 16px;
}

.checkout-page.confirmation-view .checkout-confirmation-number strong{
  margin-top:4px;
  font-size:19px;
  overflow-wrap:anywhere;
}

.checkout-page.confirmation-view .checkout-confirmation-grid{
  max-width:620px;
}

.checkout-page.confirmation-view .checkout-confirmation-grid>div{
  padding:13px 15px;
}

.checkout-page.confirmation-view .checkout-confirmation-grid strong{
  margin-top:4px;
  font-size:17px;
}

.checkout-page.confirmation-view .checkout-confirmation-actions{
  margin-top:16px;
}

.checkout-page.confirmation-view .checkout-confirmation-actions button{
  min-height:42px;
}

@media(max-width:1100px){
  .checkout-form{
    grid-template-columns:1fr;
  }

  .checkout-summary-sticky{
    position:static;
  }
}

@media(max-width:760px){
  .checkout-page{
    padding:88px 16px 45px;
  }

  .checkout-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .checkout-page-head h1{
    font-size:60px;
  }

  .checkout-two-col{
    grid-template-columns:1fr;
  }

  .checkout-postcode-row{
    grid-template-columns:1fr;
  }

  .checkout-postcode-row>button{
    width:100%;
  }

  .checkout-method-card{
    grid-template-columns:auto 1fr;
  }

  .checkout-method-card>span{
    grid-column:2;
  }

  .checkout-confirmation-card{
    padding:28px 18px;
  }

  .checkout-confirmation-grid{
    grid-template-columns:1fr;
  }

  .checkout-confirmation-actions{
    flex-direction:column;
  }

  .checkout-page.confirmation-view{
    min-height:calc(100vh - 76px);
    padding:22px 14px 30px;
  }

  .checkout-page.confirmation-view .checkout-confirmation-card{
    padding:22px 16px 24px!important;
  }

  .checkout-page.confirmation-view .checkout-confirmation-card h2{
    font-size:32px!important;
    line-height:.96!important;
  }

  .checkout-page.confirmation-view .checkout-confirmation-card>p{
    font-size:14px!important;
    line-height:1.45!important;
  }
}


/* =========================================================
   BATCH 64 — RESPONSIVE FOUNDATION
   Priority device: iPhone 13 (~390 CSS px).
   Desktop >= 761px remains visually unchanged.
   ========================================================= */

/* Mobile menu is never present in desktop layout. */
.mobile-menu-button,
.mobile-menu{
  display:none;
}

@media(max-width:760px){

  /* ---------- GLOBAL MOBILE HEADER ---------- */
  .header{
    height:72px!important;
    min-height:72px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    position:sticky!important;
    top:0!important;
    overflow:visible!important;
  }

  .brand{
    height:72px!important;
    min-width:0!important;
    flex:0 1 auto!important;
    margin:0 auto 0 0!important;
    padding:0!important;
  }

  .brand-box{
    width:122px!important;
    height:48px!important;
  }

  /* Desktop navigation becomes a real touch menu instead of being squeezed. */
  .nav{
    display:none!important;
  }

  .header-right{
    height:72px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
  }

  .search-button{
    display:none!important;
  }

  .account-util{
    height:auto!important;
  }

  .account-button{
    height:40px!important;
    min-width:0!important;
    max-width:78px!important;
    padding:0 8px!important;
    border-color:#ffffff3d!important;
    font-size:9px!important;
    letter-spacing:.45px!important;
    gap:0!important;
  }

  .account-person{
    display:none!important;
  }

  .account-arrow{
    display:none!important;
  }

  .basket{
    height:40px!important;
    min-width:70px!important;
    padding:0 8px!important;
    font-size:9px!important;
    letter-spacing:.45px!important;
    white-space:nowrap!important;
  }

  .basket span{
    width:auto!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 4px!important;
    margin-left:5px!important;
    font-size:9px!important;
    line-height:18px!important;
  }

  .mobile-menu-button{
    width:42px;
    height:40px;
    margin-left:5px;
    padding:0 10px;
    flex:0 0 42px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid #ffffff4a;
    background:transparent;
    cursor:pointer;
    z-index:152;
  }

  .mobile-menu-button span{
    display:block;
    width:18px;
    height:1.5px;
    background:#fff;
    transition:transform .16s ease,opacity .16s ease;
  }

  .mobile-menu-button.open span:nth-child(1){
    transform:translateY(5.5px) rotate(45deg);
  }

  .mobile-menu-button.open span:nth-child(2){
    opacity:0;
  }

  .mobile-menu-button.open span:nth-child(3){
    transform:translateY(-5.5px) rotate(-45deg);
  }

  .mobile-menu{
    position:fixed;
    z-index:145;
    top:72px;
    left:0;
    right:0;
    max-height:calc(100svh - 72px);
    overflow:auto;
    display:block;
    padding:0 14px 18px;
    background:var(--navy);
    border-top:1px solid #ffffff1d;
    box-shadow:0 24px 42px #0006;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-7px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  }

  .mobile-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  body.mobile-menu-open{
    overflow:hidden;
  }

  .mobile-menu-head{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ffffff26;
  }

  .mobile-menu-head small{
    color:#9db0b7;
    font-family:var(--display);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.4px;
  }

  .mobile-menu-head button{
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:27px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-menu-main,
  .mobile-menu-search{
    width:100%;
    min-height:59px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    border-bottom:1px solid #ffffff22;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
  }

  .mobile-menu-main strong,
  .mobile-menu-search strong{
    font-family:var(--display);
    font-size:20px;
    font-weight:800;
    letter-spacing:.25px;
  }

  .mobile-menu-main span,
  .mobile-menu-search span{
    color:var(--green);
    font-family:var(--display);
    font-size:18px;
  }

  .mobile-menu-search{
    margin-top:12px;
    padding:0 14px;
    min-height:52px;
    border:1px solid #ffffff50;
  }

  .mobile-menu-search strong{
    font-size:12px;
    letter-spacing:.65px;
  }

  .mobile-menu-note{
    padding:20px 4px 4px;
  }

  .mobile-menu-note span,
  .mobile-menu-note small{
    display:block;
    color:#91a6ad;
    font-family:var(--display);
    font-size:8px;
    font-weight:800;
    letter-spacing:.7px;
    line-height:1.6;
  }

  /* Account dropdown must stay inside the phone viewport. */
  .account-dropdown{
    position:fixed!important;
    top:72px!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    max-width:none!important;
  }

  /* ---------- HOME HERO ---------- */
  #home.hero{
    height:auto!important;
    min-height:calc(100svh - 72px)!important;
    max-height:none!important;
    align-items:flex-end!important;
    padding:205px 18px 34px!important;
    overflow:hidden!important;
  }

  #home .hero-visual{
    width:100%!important;
    height:100%!important;
  }

  #home .hero-visual img{
    object-position:61% 24%!important;
  }

  #home.hero:after{
    background:linear-gradient(0deg,
      rgba(6,25,35,1) 0%,
      rgba(6,25,35,.99) 47%,
      rgba(6,25,35,.68) 71%,
      rgba(6,25,35,.16) 100%)!important;
  }

  #home .hero-text{
    width:100%!important;
    max-width:100%!important;
  }

  #home .overline{
    margin-bottom:14px!important;
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:1.8px!important;
  }

  /* WATERPROOFING must fit as a whole word on 390px without becoming tiny. */
  #home h1{
    max-width:100%!important;
    font-size:clamp(38px,10.5vw,46px)!important;
    line-height:.94!important;
    letter-spacing:-1.35px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  #home p{
    max-width:100%!important;
    margin:17px 0 20px!important;
    font-size:15.5px!important;
    line-height:1.47!important;
  }

  #home .hero-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }

  #home .hero-buttons .primary,
  #home .hero-buttons .secondary{
    width:100%!important;
    min-height:46px!important;
    padding:0 10px!important;
    font-size:10.5px!important;
    letter-spacing:.5px!important;
    white-space:nowrap!important;
  }

  #home .hero-proof{
    display:none!important;
  }

  /* Keep anchors aligned below the shorter mobile header. */
  #home,
  #services,
  #gallery,
  #shop,
  #help,
  #contact-form{
    scroll-margin-top:72px!important;
  }

  /* Basic global guardrails for the rest of the page.
     Detailed page-by-page mobile work comes in later passes. */
  img,
  video{
    max-width:100%;
  }

  body{
    overflow-x:hidden;
  }
}

@media(max-width:370px){
  .brand-box{
    width:108px!important;
  }

  .account-button{
    max-width:69px!important;
    padding:0 6px!important;
    font-size:8.5px!important;
  }

  .basket{
    min-width:65px!important;
    padding:0 6px!important;
    font-size:8.5px!important;
  }

  #home.hero{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  #home h1{
    font-size:clamp(36px,10.3vw,39px)!important;
  }
}


/* =========================================================
   BATCH 65 — MOBILE NAV + SHOP BROWSING
   Desktop stays untouched. All rules below are phone-only.
   ========================================================= */

@media(max-width:760px){

  /* ---------- MOBILE MENU ACCORDIONS ---------- */
  .mobile-menu-accordion{
    border-bottom:1px solid #ffffff22;
  }

  .mobile-menu-accordion>.mobile-menu-main{
    border-bottom:0!important;
  }

  .mobile-menu-toggle[aria-expanded="true"]{
    color:var(--green);
  }

  .mobile-toggle-mark{
    width:28px;
    text-align:center;
    color:var(--green)!important;
    font-size:27px!important;
    line-height:1;
  }

  .mobile-submenu{
    padding:0 0 11px 12px;
    border-top:1px solid #ffffff16;
  }

  .mobile-submenu[hidden]{
    display:none!important;
  }

  .mobile-submenu button{
    width:100%;
    min-height:45px;
    padding:8px 8px 8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-bottom:1px solid #ffffff14;
    background:transparent;
    color:#dce5e8;
    text-align:left;
    font-family:var(--display);
    font-size:14px;
    font-weight:700;
    letter-spacing:.15px;
    cursor:pointer;
  }

  .mobile-submenu button:last-child{
    border-bottom:0;
  }

  .mobile-submenu button small{
    margin-left:auto;
    color:#8ea5ad;
    font-size:8px;
    font-weight:900;
    letter-spacing:.8px;
  }

  .mobile-submenu .mobile-submenu-primary{
    min-height:50px;
    color:#fff;
    font-size:16px;
    font-weight:900;
  }

  .mobile-submenu .mobile-submenu-primary span{
    color:var(--green);
    font-size:17px;
  }

  /* ---------- MOBILE SEARCH ---------- */
  .site-search-popover{
    max-width:none!important;
    transform-origin:top center!important;
  }

  .site-search-compact{
    max-height:calc(100svh - 92px);
  }

  .site-search-results{
    max-height:calc(100svh - var(--search-top,80px) - 108px)!important;
  }

  /* Keep iOS from auto-zooming/dragging the page when the search field focuses. */
  .site-search-compact-row input{
    font-size:16px!important;
  }

  /* ---------- MOBILE SHOP ---------- */
  #shop.shop{
    padding:64px 12px 78px!important;
  }

  #shop .shop-heading{
    margin-bottom:18px!important;
  }

  #shop .shop-heading h2{
    font-size:36px!important;
    line-height:.94!important;
    letter-spacing:-1.4px!important;
  }

  #shop .shop-heading p{
    font-size:13px!important;
    line-height:1.45!important;
  }

  #shop .search-wrap{
    margin-top:16px!important;
  }

  #shop .search-wrap input{
    height:44px!important;
    font-size:16px!important;
  }

  /* Category filters remain visible but become a compact horizontal strip. */
  #tabs.filter-row{
    margin:0 -12px 9px!important;
    padding:0 12px 8px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  #tabs.filter-row::-webkit-scrollbar{
    display:none;
  }

  #tabs.filter-row button{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:0 11px!important;
    white-space:nowrap!important;
    font-size:9px!important;
  }

  #shop .shop-status{
    padding:11px 1px!important;
    gap:8px!important;
    align-items:center!important;
  }

  #shop .shop-status span{
    max-width:52%;
    text-align:right;
    line-height:1.25;
  }

  /* Two products per row on iPhone instead of one giant card per product. */
  #grid.product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #grid .product-card{
    min-width:0!important;
    overflow:hidden!important;
  }

  #grid .product-image{
    height:142px!important;
  }

  #grid .product-image img{
    padding:11px!important;
  }

  #grid .media-count{
    max-width:calc(100% - 10px)!important;
    left:5px!important;
    right:auto!important;
    bottom:5px!important;
    padding:4px 5px!important;
    font-size:6px!important;
  }

  #grid .product-info{
    padding:10px!important;
  }

  #grid .category{
    font-size:7px!important;
    letter-spacing:.55px!important;
    line-height:1.2!important;
  }

  #grid .product-info h3{
    min-height:46px!important;
    margin:6px 0 5px!important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:14px!important;
    line-height:1.08!important;
    letter-spacing:-.25px!important;
  }

  #grid .product-id-line{
    min-height:23px!important;
    margin-bottom:6px!important;
    font-size:7px!important;
    line-height:1.25!important;
  }

  /* Description belongs in View Product on a phone; hiding it keeps catalogue browsing fast. */
  #grid .product-info>p{
    display:none!important;
  }

  #grid .price-row{
    margin:0 0 8px!important;
    grid-template-columns:1fr 1fr!important;
  }

  #grid .price-row div{
    min-width:0!important;
    padding:8px 2px!important;
  }

  #grid .price-row div+div{
    padding-left:6px!important;
  }

  #grid .price-row strong{
    font-size:11.5px!important;
    line-height:1!important;
    letter-spacing:-.15px!important;
    white-space:nowrap!important;
  }

  #grid .price-row small{
    margin-top:3px!important;
    font-size:6px!important;
    letter-spacing:.5px!important;
  }

  /* Keep both actions available without forcing the product back to full-width cards. */
  #grid .product-actions{
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
  }

  #grid .product-info .product-actions .view-product-btn,
  #grid .product-info .product-actions .quick-add{
    height:38px!important;
    min-height:38px!important;
    padding:0 3px!important;
    font-size:7.5px!important;
    line-height:.95!important;
    letter-spacing:0!important;
  }

  #grid .qty-control{
    height:38px!important;
    min-height:38px!important;
    grid-template-columns:25px minmax(18px,1fr) 25px!important;
  }

  #grid .product-info .qty-control button{
    height:36px!important;
    min-height:36px!important;
    font-size:16px!important;
  }

  #grid .qty-value{
    font-size:11px!important;
  }
}

@media(max-width:360px){
  #grid.product-grid{
    gap:6px!important;
  }

  #grid .product-image{
    height:128px!important;
  }

  #grid .product-info{
    padding:8px!important;
  }

  #grid .product-info h3{
    font-size:13px!important;
  }

  #grid .price-row strong{
    font-size:10.5px!important;
  }
}


/* =========================================================
   BATCH 66 — MOBILE HORIZONTAL-OVERFLOW FIX
   Scope: stop normal pages being draggable sideways on iPhone.
   Approved mobile menu / Gallery composition are not redesigned.
   ========================================================= */

@media(max-width:760px){

  /* Safari scrolls the root element, not just body.
     Batch 64 only guarded body, which is why the page could still
     be dragged sideways and left there. */
  html{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important; /* fallback */
    overflow-x:clip!important;
  }

  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important; /* fallback */
    overflow-x:clip!important;
    position:relative;
  }

  /* Normal page-level blocks must never create a document wider
     than the phone viewport. */
  .header,
  #home,
  #services,
  #gallery,
  #shop,
  #help,
  #contact-form,
  footer,
  .footer,
  .basket-page,
  .checkout-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* HOME — retain Batch 64 appearance, only constrain geometry. */
  #home .hero-text,
  #home .hero-visual,
  #home .hero-buttons{
    min-width:0!important;
    max-width:100%!important;
  }

  /* SERVICES — desktop min-width assumptions must not leak into mobile. */
  #services .services-hero-v2,
  #services .services-hero-copy-v2,
  #services .services-hero-image-v2,
  #services .service-story,
  #services .service-story-copy,
  #services .service-story-media,
  #services .services-end-v2,
  #services .services-end-actions-v2{
    min-width:0!important;
    max-width:100%!important;
  }

  /* SHOP — the category strip may scroll internally, but the PAGE may not. */
  #shop .shop-heading,
  #shop .search-wrap,
  #shop .shop-status,
  #grid.product-grid{
    min-width:0!important;
    max-width:100%!important;
  }

  #tabs.filter-row{
    max-width:calc(100% + 24px)!important;
  }

  /* TECHNICAL SUPPORT */
  #help .technical-support-intro,
  #help .technical-support-options,
  #help .technical-support-direct,
  #help .support-option{
    min-width:0!important;
    max-width:100%!important;
  }

  /* CONTACT V2 was intentionally overflow:visible at tablet width.
     On phone that is not appropriate: its form must stay inside the viewport. */
  .contact-section.contact-v2{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .contact-v2 .contact-main,
  .contact-v2 .contact-copy,
  .contact-form-v2,
  .contact-form-v2 .field-row,
  .upload-field-v2,
  .contact-file-list,
  .form-submit-row-v2{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .contact-form-v2 input,
  .contact-form-v2 select,
  .contact-form-v2 textarea{
    min-width:0!important;
    max-width:100%!important;
  }

  .contact-v2 .contact-copy h2,
  .contact-v2 .contact-copy p,
  .contact-direct-v2,
  .contact-direct-v2 a{
    max-width:100%!important;
    overflow-wrap:anywhere;
  }

  /* Gallery itself was approved. Keep its internal moving rail exactly as-is;
     just make sure its clipping container cannot enlarge the root page. */
  #gallery.gallery,
  #gallery .gallery-rail{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  /* Media / long text safety without changing card/menu design. */
  img,
  video,
  svg,
  canvas{
    max-width:100%;
  }
}


/* =========================================================
   BATCH 67 — CONSISTENT MOBILE MENU + INLINE MOBILE SEARCH
   Scope:
   1) same header/menu position from every page + scroll position
   2) Search expands inside the mobile menu, below its button
   Desktop remains unchanged.
   ========================================================= */

@media(max-width:760px){

  /* When the menu opens, use one identical viewport-level header everywhere.
     body padding replaces the sticky header's normal 72px flow space. */
  body.mobile-menu-open{
    padding-top:72px!important;
    overflow:hidden!important;
  }

  body.mobile-menu-open .header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    z-index:150!important;
  }

  body.mobile-menu-open .mobile-menu{
    position:fixed!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100svh - 72px)!important;
    z-index:149!important;
  }

  /* ---------- SEARCH LIVES INSIDE MOBILE MENU ---------- */
  .mobile-menu-search-block{
    width:100%;
    margin-top:12px;
  }

  .mobile-menu-search-block .mobile-menu-search{
    margin-top:0!important;
  }

  .mobile-menu-search[aria-expanded="true"]{
    border-color:var(--green)!important;
  }

  .mobile-search-mount{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  #siteSearch.mobile-inline-search{
    position:static!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    transform:none!important;
    z-index:auto!important;
    box-shadow:none!important;
  }

  #siteSearch.mobile-inline-search.open{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  #siteSearch.mobile-inline-search .site-search-compact{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    border:1px solid #ffffff45!important;
    border-top:3px solid var(--green)!important;
    box-shadow:none!important;
  }

  #siteSearch.mobile-inline-search .site-search-compact-row{
    min-height:54px!important;
  }

  #siteSearch.mobile-inline-search .site-search-results{
    max-height:300px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  #siteSearch.mobile-inline-search .site-search-status{
    min-height:0!important;
  }

  /* Hide the note while inline search is open only if results make the menu tall;
     it returns automatically when Search closes. */
  .mobile-menu:has(#siteSearch.mobile-inline-search.open) .mobile-menu-note{
    padding-top:14px;
  }
}


/* =========================================================
   BATCH 68 — MOBILE INSTANT NAVIGATION
   Mobile menu destinations jump directly to target.
   Desktop smooth navigation is intentionally preserved.
   No visual/layout redesign in this pass.
   ========================================================= */


/* =========================================================
   BATCH 69 — MOBILE NAV WEIGHT + ALL CATEGORIES VISIBLE
   1) 180ms mobile navigation commit delay
   2) Shop categories are a 2-column visible grid, no sideways discovery
   Desktop unchanged.
   ========================================================= */

@media(max-width:760px){

  /* Replace the horizontal swipe-strip with six visible choices. */
  #tabs.filter-row{
    margin:0 0 14px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    max-width:100%!important;
  }

  #tabs.filter-row button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:7px 8px!important;
    white-space:normal!important;
    line-height:1.08!important;
    text-align:center!important;
    font-size:10.5px!important;
    letter-spacing:.15px!important;
  }
}

@media(max-width:360px){
  #tabs.filter-row{
    gap:6px!important;
  }

  #tabs.filter-row button{
    min-height:44px!important;
    padding:6px!important;
    font-size:9.5px!important;
  }
}


/* =========================================================
   BATCH 70 — MOBILE NAV WEIGHT WITHOUT ROLLER-COASTER
   Fixes the menu-close scroll restoration so global desktop
   smooth-scroll CSS cannot animate the phone back through the page.
   Keeps the 180ms weighted commit from Batch 69.
   ========================================================= */


/* =========================================================
   BATCH 71 — MOBILE PRODUCT VIEW
   Compact, app-like phone product screen.
   Desktop product modal remains visually/functionally unchanged.
   ========================================================= */

/* New semantic detail controls are visually neutral on desktop. */
.product-detail-toggle{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
}
.product-detail-toggle>span{
  display:none;
}
.product-detail-body{
  display:block;
}
.mobile-product-summary,
.mobile-gallery-nav,
.mobile-product-buybar{
  display:none;
}

/* Existing desktop spacing retained for newly wrapped details. */
.product-detail-section{
  padding:15px 0;
  border-top:1px solid #c7cac7;
}
.product-detail-section .product-detail-body>p{
  margin-bottom:0;
}
.downloads-section.product-detail-section{
  padding:18px 0 16px!important;
}

@media(max-width:760px){

  /* ---------- MODAL SHELL ---------- */
  .modal{
    z-index:170!important;
  }

  .modal-bg{
    display:none!important;
  }

  .modal-panel{
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 14px calc(92px + env(safe-area-inset-bottom))!important;
    background:var(--paper)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .modal-close{
    position:fixed!important;
    top:10px!important;
    right:10px!important;
    width:44px!important;
    height:44px!important;
    z-index:190!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    font-size:30px!important;
    line-height:1!important;
  }

  #modalContent{
    width:100%!important;
    max-width:100%!important;
    padding-top:64px!important;
  }

  .product-page{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* ---------- PRODUCT MEDIA ---------- */
  .modal-image,
  .gallery-stage{
    width:100%!important;
    height:292px!important;
    min-height:292px!important;
    max-height:292px!important;
    margin:0!important;
    background:#ebe8e1!important;
    border:1px solid #d8dbd8!important;
  }

  .modal-image img,
  .gallery-stage img{
    width:100%!important;
    height:100%!important;
    padding:12px!important;
    object-fit:contain!important;
  }

  .modal-image .technical-reference{
    height:292px!important;
  }

  .gallery-caption,
  .gallery-thumbs{
    display:none!important;
  }

  .mobile-gallery-nav{
    width:100%;
    height:42px;
    display:grid!important;
    grid-template-columns:46px 1fr 46px;
    align-items:center;
    margin:7px 0 0;
    border:1px solid #c9cecb;
    background:#fff;
  }

  .mobile-gallery-nav button{
    height:40px;
    border:0;
    background:transparent;
    color:var(--navy);
    font-size:28px;
    line-height:1;
  }

  .mobile-gallery-nav span{
    text-align:center;
    color:#4d595d;
    font-family:var(--display);
    font-size:11px;
    font-weight:900;
    letter-spacing:.8px;
  }

  /* ---------- PRIMARY PRODUCT INFO ---------- */
  .modal-info{
    width:100%!important;
    max-width:100%!important;
    padding:20px 0 0!important;
  }

  .modal-info .category{
    margin:0 0 7px!important;
    font-size:10px!important;
    line-height:1.2!important;
    letter-spacing:1px!important;
  }

  .modal-info h2{
    margin:0 0 10px!important;
    max-width:calc(100% - 2px)!important;
    font-size:clamp(29px,8.6vw,35px)!important;
    line-height:.96!important;
    letter-spacing:-1.25px!important;
    overflow-wrap:anywhere;
  }

  .modal-product-id{
    margin:0 0 4px!important;
    font-size:10px!important;
  }

  .modal-product-id strong{
    font-size:13px!important;
  }

  .modal-product-id + .sku,
  .sku{
    margin:4px 0 0!important;
    font-size:9px!important;
    line-height:1.3!important;
  }

  .modal-price-row{
    margin:16px 0 12px!important;
    border-top:1px solid var(--navy)!important;
    border-bottom:1px solid #c2c6c3!important;
  }

  .modal-price-row div{
    padding:10px 4px!important;
  }

  .modal-price-row div+div{
    padding-left:12px!important;
  }

  .modal-price-row strong{
    font-size:22px!important;
    line-height:1!important;
  }

  .modal-price-row small{
    margin-top:3px;
    display:block;
    font-size:8px!important;
  }

  .mobile-product-summary{
    display:block!important;
    margin:0 0 15px!important;
    color:#465155!important;
    font-size:14px!important;
    line-height:1.48!important;
  }

  .desktop-product-long{
    display:none!important;
  }

  /* ---------- APP-LIKE COLLAPSIBLE DETAILS ---------- */
  .product-detail-section,
  .downloads-section.product-detail-section{
    padding:0!important;
    margin:0!important;
    border-top:1px solid #c5cac7!important;
  }

  .product-detail-toggle{
    min-height:52px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 2px!important;
    cursor:pointer;
  }

  .product-detail-toggle b{
    font-family:var(--display)!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    letter-spacing:.8px!important;
    text-transform:uppercase!important;
  }

  .product-detail-toggle>span{
    width:26px;
    display:block!important;
    flex:0 0 26px;
    color:var(--green);
    text-align:center;
    font-size:24px;
    line-height:1;
    transition:transform .14s ease;
  }

  .product-detail-section.open .product-detail-toggle>span{
    transform:rotate(45deg);
  }

  .product-detail-body{
    display:none!important;
    padding:0 1px 15px;
  }

  .product-detail-section.open .product-detail-body{
    display:block!important;
  }

  .product-detail-body>p{
    margin:0!important;
    color:#465155!important;
    font-size:14px!important;
    line-height:1.5!important;
  }

  .download-list,
  .official-links{
    margin:2px 0 0!important;
  }

  .download-link{
    min-height:48px!important;
  }

  .official-link{
    min-height:46px!important;
    font-size:9.5px!important;
  }

  /* Hide duplicate desktop buy control. Purchase action lives in sticky app bar. */
  .desktop-modal-buy{
    display:none!important;
  }

  /* ---------- STICKY PURCHASE BAR ---------- */
  .mobile-product-buybar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:188!important;
    min-height:72px;
    display:grid!important;
    grid-template-columns:116px 1fr;
    align-items:center;
    gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #aeb7b5;
    background:rgba(244,241,234,.97);
    backdrop-filter:blur(10px);
  }

  .mobile-buy-price{
    min-width:0;
  }

  .mobile-buy-price strong{
    display:block;
    color:var(--ink);
    font-family:var(--display);
    font-size:18px;
    line-height:1;
  }

  .mobile-buy-price small{
    display:block;
    margin-top:4px;
    color:#596468;
    font-size:8px;
    font-weight:900;
    letter-spacing:.65px;
  }

  .mobile-buy-control{
    min-width:0;
  }

  .mobile-buy-control>.quick-add{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px!important;
    font-family:var(--display)!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.25px!important;
    text-transform:uppercase!important;
  }

  .mobile-buy-control .qty-control{
    width:100%!important;
    height:48px!important;
    grid-template-columns:48px 1fr 48px!important;
  }

  .mobile-buy-control .qty-control button{
    height:46px!important;
    min-height:46px!important;
    font-size:22px!important;
  }

  .mobile-buy-control .qty-value{
    font-size:15px!important;
  }
}

@media(max-width:360px){
  .modal-panel{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .modal-image,
  .gallery-stage{
    height:270px!important;
    min-height:270px!important;
    max-height:270px!important;
  }

  .modal-info h2{
    font-size:28px!important;
  }

  .mobile-product-buybar{
    grid-template-columns:102px 1fr;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .mobile-buy-price strong{
    font-size:16px;
  }
}


/* =========================================================
   BATCH 72 — MOBILE BASKET
   Compact app-like basket on phone.
   Desktop basket / checkout logic unchanged.
   ========================================================= */

.basket-mobile-meta,
.mobile-basket-checkoutbar{
  display:none;
}

@media(max-width:760px){

  /* ---------- BASKET PAGE SHELL ---------- */
  body.basket-view{
    padding-bottom:78px;
  }

  .basket-page{
    padding:24px 14px calc(92px + env(safe-area-inset-bottom))!important;
  }

  .basket-page-head{
    gap:8px!important;
    padding-bottom:16px!important;
    border-bottom:1px solid var(--line);
  }

  .basket-page-head>div{
    width:100%;
  }

  .basket-kicker{
    margin-bottom:5px!important;
    font-size:9px!important;
    letter-spacing:1.15px!important;
  }

  .basket-page-head h1{
    margin:0 0 8px!important;
    font-size:40px!important;
    line-height:.92!important;
    letter-spacing:-2px!important;
  }

  .basket-page-head p{
    max-width:100%!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  .basket-continue-top{
    margin:2px 0 0!important;
    padding:7px 0!important;
    font-size:11px!important;
    line-height:1.2!important;
  }

  /* ---------- ITEMS HEADER ---------- */
  .basket-layout{
    display:block!important;
    padding-top:14px!important;
  }

  .basket-items-head{
    min-height:38px!important;
    font-size:10px!important;
    letter-spacing:.55px!important;
  }

  .basket-items-head button{
    font-size:10px!important;
  }

  /* ---------- COMPACT PRODUCT ROW ---------- */
  .basket-line{
    position:relative;
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr)!important;
    grid-template-areas:
      "image info"
      "image qty"
      "meta meta"!important;
    gap:7px 12px!important;
    align-items:start!important;
    padding:16px 0!important;
  }

  .basket-line-image{
    grid-area:image!important;
    width:74px!important;
    height:74px!important;
    align-self:start!important;
  }

  .basket-line-info{
    grid-area:info!important;
    min-width:0!important;
  }

  .basket-line-info .category{
    margin:0 0 4px!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.6px!important;
  }

  .basket-line-title{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.13!important;
    letter-spacing:-.2px!important;
  }

  .basket-line-product-id{
    margin-top:5px!important;
    font-size:8px!important;
    line-height:1.25!important;
  }

  .basket-line-product-id strong{
    font-size:10px!important;
  }

  .basket-line-sku{
    display:none!important;
  }

  .basket-remove{
    position:absolute!important;
    right:0!important;
    bottom:50px!important;
    margin:0!important;
    padding:3px 0!important;
    font-size:9px!important;
    line-height:1!important;
  }

  .basket-line-qty{
    grid-area:qty!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .basket-line-qty>small{
    display:none!important;
  }

  .basket-page-qty{
    width:114px!important;
    height:36px!important;
    grid-template-columns:36px 1fr 36px!important;
  }

  .basket-page-qty button{
    height:34px!important;
    min-height:34px!important;
    font-size:17px!important;
  }

  .basket-page-qty span{
    font-size:12px!important;
  }

  /* Desktop/large-tablet pricing blocks are replaced by one compact mobile line. */
  .basket-line-unit,
  .basket-line-total{
    display:none!important;
  }

  .basket-mobile-meta{
    grid-area:meta!important;
    display:block!important;
    min-width:0!important;
    padding:8px 0 0 86px!important;
  }

  .basket-mobile-price{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:baseline!important;
    gap:5px 14px!important;
    color:var(--muted)!important;
    font-size:8px!important;
    font-weight:900!important;
    letter-spacing:.25px!important;
  }

  .basket-mobile-price span{
    white-space:nowrap;
  }

  .basket-mobile-price strong{
    margin-right:3px;
    color:var(--ink);
    font-size:13px!important;
    letter-spacing:-.2px!important;
  }

  .basket-mobile-price span:last-child strong{
    color:var(--navy);
  }

  /* ---------- ORDER SUMMARY ---------- */
  .basket-summary{
    position:static!important;
    margin-top:20px!important;
    padding:18px 16px!important;
  }

  .basket-summary-kicker{
    margin-bottom:10px!important;
    font-size:9px!important;
    letter-spacing:1px!important;
  }

  .basket-summary-row{
    padding:8px 0!important;
    font-size:12px!important;
  }

  .basket-summary-row strong{
    font-size:12px!important;
  }

  .basket-summary-total{
    padding:13px 0 7px!important;
    font-size:12px!important;
  }

  .basket-summary-total strong{
    font-size:24px!important;
    letter-spacing:-.7px!important;
  }

  .basket-summary-total small{
    margin-top:2px!important;
    font-size:8px!important;
  }

  .basket-delivery-note{
    margin:8px 0 14px!important;
    font-size:10px!important;
    line-height:1.45!important;
  }

  .basket-checkout{
    min-height:46px!important;
    font-size:12px!important;
  }

  .basket-continue{
    margin-top:6px!important;
    padding:8px 0!important;
    font-size:10px!important;
  }

  .basket-help-note{
    margin-top:12px!important;
    padding-top:12px!important;
    font-size:10px!important;
  }

  .basket-help-note b{
    font-size:11px!important;
  }

  .basket-help-note a{
    margin-top:4px!important;
    font-size:10px!important;
  }

  /* ---------- STICKY MOBILE CHECKOUT ---------- */
  .mobile-basket-checkoutbar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:188!important;
    min-height:70px;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 142px;
    align-items:center;
    gap:10px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #adb5b3;
    background:rgba(244,241,234,.97);
    backdrop-filter:blur(10px);
  }

  .mobile-basket-total{
    min-width:0;
  }

  .mobile-basket-total small{
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:7px;
    font-weight:900;
    letter-spacing:.65px;
  }

  .mobile-basket-total strong{
    display:block;
    color:var(--ink);
    font-family:var(--display);
    font-size:22px;
    line-height:1;
    letter-spacing:-.7px;
    white-space:nowrap;
  }

  .mobile-basket-checkoutbar button{
    width:100%;
    min-height:48px;
    border:1px solid var(--navy);
    background:var(--navy);
    color:#fff;
    font-family:var(--display);
    font-size:12px;
    font-weight:900;
    letter-spacing:.35px;
    cursor:pointer;
  }

  /* Empty basket does not need a meaningless checkout bar. */
  .basket-empty + .mobile-basket-checkoutbar{
    display:none!important;
  }
}

@media(max-width:360px){
  .basket-page{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .basket-line{
    grid-template-columns:68px minmax(0,1fr)!important;
    gap:7px 10px!important;
  }

  .basket-line-image{
    width:68px!important;
    height:68px!important;
  }

  .basket-line-title{
    font-size:13px!important;
  }

  .basket-mobile-meta{
    padding-left:78px!important;
  }

  .mobile-basket-checkoutbar{
    grid-template-columns:minmax(0,1fr) 128px;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .mobile-basket-total strong{
    font-size:20px!important;
  }
}


/* =========================================================
   BATCH 73 — PRODUCT VIEW RETURNS TO BASKET
   Product modal opened from Basket overlays the Basket instead of
   closing it. Closing the modal returns to the same basket position.
   ========================================================= */

@media(max-width:760px){
  /* The basket's sticky checkout bar must not sit above the product modal. */
  body.product-from-basket .mobile-basket-checkoutbar{
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* =========================================================
   BATCH 74 — MOBILE CHECKOUT FLOW
   Progressive phone checkout; desktop checkout logic/layout preserved.
   ========================================================= */

.mobile-checkout-progress,
.mobile-checkout-actionbar,
.mobile-checkout-summary-toggle,
.mobile-checkout-step-summary,
.mobile-checkout-step-state{
  display:none;
}

@media(max-width:760px){

  /* ---------- PAGE / HEADER ---------- */
  .checkout-page{
    padding:18px 12px calc(94px + env(safe-area-inset-bottom))!important;
  }

  .checkout-page-head{
    gap:10px!important;
    padding:0 0 12px!important;
  }

  .checkout-kicker{
    margin-bottom:4px!important;
    font-size:8px!important;
    letter-spacing:1.1px!important;
  }

  .checkout-page-head h1{
    margin:0 0 7px!important;
    font-size:42px!important; /* not Heathrow */
    line-height:.92!important;
    letter-spacing:-1.7px!important;
  }

  .checkout-page-head p{
    max-width:100%!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.42!important;
  }

  .checkout-back-basket{
    min-height:38px!important;
    padding:0 12px!important;
    font-size:9px!important;
  }

  /* ---------- PREVIEW STRIP ---------- */
  .checkout-preview-banner{
    margin:0 0 8px!important;
    padding:9px 11px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    border-left:3px solid var(--green)!important;
  }

  .checkout-preview-banner strong{
    flex:0 0 auto!important;
    font-size:8px!important;
    letter-spacing:.7px!important;
  }

  .checkout-preview-banner span{
    font-size:9px!important;
    line-height:1.35!important;
  }

  /* ---------- STICKY 5-STEP PROGRESS ---------- */
  .mobile-checkout-progress{
    position:sticky!important;
    top:72px!important;
    z-index:135!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin:0 0 10px!important;
    border:1px solid #bbc2bf;
    background:rgba(244,241,234,.98);
    backdrop-filter:blur(8px);
  }

  .mobile-checkout-progress button{
    min-width:0!important;
    min-height:47px!important;
    padding:5px 2px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    border:0!important;
    border-right:1px solid #d4d8d5!important;
    background:transparent!important;
    color:#778388!important;
    cursor:pointer;
  }

  .mobile-checkout-progress button:last-child{
    border-right:0!important;
  }

  .mobile-checkout-progress b{
    width:21px;
    height:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #93a0a4;
    font-family:var(--display);
    font-size:9px;
  }

  .mobile-checkout-progress span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:6px;
    font-weight:900;
    letter-spacing:.25px;
    white-space:nowrap;
  }

  .mobile-checkout-progress button.active{
    color:var(--navy)!important;
    background:#fff!important;
  }

  .mobile-checkout-progress button.active b{
    border-color:var(--navy);
    background:var(--navy);
    color:#fff;
  }

  .mobile-checkout-progress button.complete{
    color:var(--navy)!important;
  }

  .mobile-checkout-progress button.complete b{
    border-color:var(--green);
    background:var(--green);
    color:var(--navy);
  }

  /* ---------- FORM LAYOUT ---------- */
  .checkout-main,
  .checkout-form,
  .checkout-left,
  .checkout-summary{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .checkout-form{
    display:block!important;
  }

  .checkout-left{
    display:block!important;
  }

  .checkout-block{
    margin:0 0 8px!important;
    padding:14px!important;
    border:1px solid #bbc2bf!important;
    background:#f8f6f0!important;
  }

  .checkout-block.mobile-checkout-collapsed{
    padding:0!important;
  }

  .checkout-block.mobile-checkout-collapsed > :not(.checkout-step-head){
    display:none!important;
  }

  .checkout-step-head{
    position:relative;
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 28px!important;
    gap:10px!important;
    align-items:center!important;
    margin:0!important;
    cursor:pointer;
  }

  .checkout-block:not(.mobile-checkout-collapsed) .checkout-step-head{
    margin-bottom:12px!important;
  }

  .checkout-step-head>span{
    width:34px!important;
    height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:9px!important;
  }

  .checkout-step-head small{
    margin:0 0 1px!important;
    font-size:7px!important;
    letter-spacing:.8px!important;
  }

  .checkout-step-head h2{
    margin:0!important;
    font-size:25px!important;
    line-height:.92!important;
    letter-spacing:-.75px!important;
  }

  .mobile-checkout-step-summary{
    display:block!important;
    max-width:100%;
    margin-top:3px;
    overflow:hidden;
    color:#6d7a7f;
    font-size:8px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-checkout-step-state{
    width:28px;
    height:28px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    color:var(--green);
    font-family:var(--display);
    font-size:20px;
  }

  .mobile-checkout-complete .mobile-checkout-step-state{
    color:var(--navy);
    font-size:14px;
  }

  /* ---------- FIELDS ---------- */
  .checkout-two-col{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .checkout-form label{
    margin:0 0 9px!important;
    font-size:8px!important;
    letter-spacing:.65px!important;
  }

  .checkout-form input[type="text"],
  .checkout-form input[type="email"],
  .checkout-form input[type="tel"],
  .checkout-form select{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
    font-size:16px!important; /* avoids iOS zoom */
  }

  .checkout-postcode-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .checkout-postcode-row>button{
    min-height:42px!important;
    font-size:9px!important;
  }

  .checkout-lookup-status{
    margin:4px 0 8px!important;
    padding:8px!important;
    font-size:8px!important;
    line-height:1.35!important;
  }

  .checkout-account-state{
    margin:0 0 10px!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }

  .checkout-account-state strong{
    font-size:8px!important;
  }

  .checkout-account-state span{
    font-size:9px!important;
    line-height:1.25!important;
    text-align:right!important;
  }

  /* ---------- BILLING ---------- */
  .checkout-same-address{
    min-height:44px!important;
    margin:0!important;
    padding:8px 0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }

  .checkout-checkbox-mark{
    width:28px!important;
    height:28px!important;
  }

  .checkout-same-address strong{
    font-size:10px!important;
    line-height:1.2!important;
  }

  /* ---------- DELIVERY METHOD / PAYMENT ---------- */
  .checkout-method-card{
    min-height:0!important;
    margin:0!important;
    padding:13px!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
  }

  .checkout-method-card input{
    width:20px!important;
    height:20px!important;
  }

  .checkout-method-card strong{
    font-size:11px!important;
  }

  .checkout-method-card p{
    margin:3px 0 0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  .checkout-method-card>span{
    grid-column:auto!important;
    font-size:7px!important;
    white-space:nowrap!important;
  }

  .checkout-payment-placeholder{
    margin:0!important;
    padding:13px!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:10px!important;
    align-items:center!important;
  }

  .checkout-payment-icon{
    width:48px!important;
    height:40px!important;
    font-size:16px!important;
  }

  .checkout-payment-placeholder strong{
    font-size:11px!important;
  }

  .checkout-payment-placeholder p{
    margin:3px 0 0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }

  .checkout-payment-note{
    margin-top:8px!important;
    padding:8px!important;
    font-size:8px!important;
    line-height:1.35!important;
  }

  /* ---------- COLLAPSED MOBILE ORDER SUMMARY ---------- */
  .mobile-checkout-summary-toggle{
    width:100%;
    min-height:58px;
    margin:10px 0 0;
    padding:9px 12px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid var(--navy);
    background:var(--navy);
    color:#fff;
    text-align:left;
  }

  .mobile-checkout-summary-toggle span{
    min-width:0;
  }

  .mobile-checkout-summary-toggle b{
    display:block;
    font-family:var(--display);
    font-size:13px;
  }

  .mobile-checkout-summary-toggle small{
    display:block;
    margin-top:2px;
    color:#b6c3c7;
    font-size:8px;
  }

  .mobile-checkout-summary-toggle>strong{
    color:var(--green);
    font-family:var(--display);
    font-size:9px;
    letter-spacing:.5px;
    white-space:nowrap;
  }

  .checkout-summary .checkout-summary-sticky{
    display:none!important;
    position:static!important;
    top:auto!important;
    margin:0!important;
    padding:15px!important;
  }

  .checkout-summary.mobile-summary-open .checkout-summary-sticky{
    display:block!important;
  }

  .checkout-summary-kicker{
    font-size:7px!important;
  }

  .checkout-summary h2{
    margin:3px 0 8px!important;
    font-size:22px!important;
  }

  .checkout-summary-items{
    max-height:170px!important;
  }

  .checkout-summary-item{
    padding:8px 0!important;
    gap:8px!important;
  }

  .checkout-summary-item strong,
  .checkout-summary-item>b{
    font-size:9px!important;
  }

  .checkout-summary-item span{
    margin-top:2px!important;
    font-size:7.5px!important;
  }

  .checkout-summary-totals{
    padding:8px 0 2px!important;
  }

  .checkout-summary-totals>div{
    min-height:29px!important;
  }

  .checkout-summary-totals span{
    font-size:9px!important;
  }

  .checkout-summary-totals strong{
    font-size:10px!important;
  }

  .checkout-summary-totals .grand{
    padding:8px 0!important;
  }

  .checkout-summary-totals .grand strong{
    font-size:19px!important;
  }

  /* Actual form submit remains here for desktop.
     Phone uses the persistent bottom action bar instead. */
  .checkout-summary .checkout-place-order{
    display:none!important;
  }

  .checkout-place-note{
    margin:7px 0!important;
    font-size:8px!important;
  }

  .checkout-edit-basket{
    min-height:38px!important;
    font-size:8px!important;
  }

  /* ---------- STICKY MOBILE ACTION ---------- */
  .mobile-checkout-actionbar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:188!important;
    min-height:70px;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 144px;
    align-items:center;
    gap:9px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #aeb6b4;
    background:rgba(244,241,234,.97);
    backdrop-filter:blur(10px);
  }

  .mobile-checkout-action-total{
    min-width:0;
  }

  .mobile-checkout-action-total small{
    display:block;
    margin-bottom:3px;
    color:#68767b;
    font-size:7px;
    font-weight:900;
    letter-spacing:.55px;
  }

  .mobile-checkout-action-total strong{
    display:block;
    color:var(--ink);
    font-family:var(--display);
    font-size:21px;
    line-height:1;
    letter-spacing:-.6px;
    white-space:nowrap;
  }

  .mobile-checkout-actionbar>button{
    width:100%;
    min-height:48px;
    border:1px solid var(--navy);
    background:var(--navy);
    color:#fff;
    font-family:var(--display);
    font-size:10px;
    font-weight:900;
    letter-spacing:.4px;
  }

  /* ---------- CONFIRMATION ---------- */
  .checkout-confirmation{
    margin-top:10px!important;
  }

  .checkout-confirmation-card{
    padding:20px 14px!important;
  }

  .checkout-confirmation-card h2{
    font-size:38px!important;
    line-height:.9!important;
  }

  .checkout-confirmation-card>p{
    margin:12px auto!important;
    font-size:11px!important;
  }

  .checkout-confirmation-mark{
    width:50px!important;
    height:50px!important;
    margin:12px auto!important;
  }
}

@media(max-width:360px){
  .checkout-page{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .checkout-page-head h1{
    font-size:38px!important;
  }

  .checkout-step-head h2{
    font-size:22px!important;
  }

  .mobile-checkout-actionbar{
    grid-template-columns:minmax(0,1fr) 132px;
    padding-left:9px!important;
    padding-right:9px!important;
  }
}


/* =========================================================
   BATCH 75 — DESKTOP SHOP DROPDOWN CLOSE AFTER SELECTION
   A clicked Shop option closes the dropdown immediately.
   Normal hover behaviour returns after pointer leaves Shop.
   Mobile menu is untouched.
   ========================================================= */

@media(min-width:761px){
  .shop-nav.desktop-dropdown-dismissed .shop-menu{
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(-3px)!important;
    pointer-events:none!important;
  }
}


/* =========================================================
   BATCH 76 — MOBILE CHECKOUT + BUTTON FIX
   Every visible + / step header is now a genuine disclosure control.
   No visual redesign from approved Batch 74 checkout.
   ========================================================= */


/* =========================================================
   BATCH 77 — MOBILE HOME HERO PHOTO FOCUS
   SAME real LNK project image. No generated/replacement artwork.
   Mobile-only crop shifts attention from worker/ceiling toward the
   membrane, drainage fittings and waterproofing materials.
   Desktop hero is untouched.
   ========================================================= */

@media(max-width:760px){

  /* Turn the photo into a deliberate upper media band on phone.
     This creates enough crop to choose what the user actually sees,
     instead of showing nearly the whole portrait photo. */
  #home.hero .hero-visual{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:57%!important;
    overflow:hidden!important;
  }

  #home.hero .hero-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;

    /* The original asset is unchanged.
       Crop toward centre/right + lower job area:
       membrane / drainage fittings / working materials become dominant. */
    object-position:64% 70%!important;
    transform:scale(1.10)!important;
    transform-origin:64% 70%!important;
  }

  /* Keep the existing Home composition/text exactly where it belongs,
     but make the transition from the material image into navy intentional. */
  #home.hero:after{
    background:
      linear-gradient(0deg,
        rgba(6,25,35,1) 0%,
        rgba(6,25,35,1) 42%,
        rgba(6,25,35,.96) 50%,
        rgba(6,25,35,.64) 61%,
        rgba(6,25,35,.18) 78%,
        rgba(6,25,35,.05) 100%)!important;
  }
}


/* =========================================================
   BATCH 79 — PRODUCT THUMBNAILS IN SITE SEARCH
   Uses each product's existing real catalogue image.
   Service/page results remain text-only and unchanged.
   ========================================================= */

.site-search-result.site-search-product-result{
  grid-template-columns:50px minmax(0,1fr) auto 18px!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  row-gap:2px!important;
  min-height:72px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}

.site-search-product-result .site-search-result-thumb{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:center;
  display:flex;
  width:50px;
  height:50px;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  border:1px solid #d7dcda;
  background:#fff;
}

.site-search-product-result .site-search-result-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.site-search-product-result .site-search-result-thumb.is-empty{
  background:#eef0ee;
}

.site-search-product-result .site-search-result-type{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end;
}

.site-search-product-result .site-search-result-main{
  grid-column:2!important;
  grid-row:2!important;
}

.site-search-product-result .site-search-result-price{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  align-self:center;
}

.site-search-product-result .site-search-result-arrow{
  grid-column:4!important;
  grid-row:1 / span 2!important;
  align-self:center;
}

@media(max-width:700px){
  .site-search-result.site-search-product-result{
    grid-template-columns:46px minmax(0,1fr) 18px!important;
    grid-template-rows:auto auto auto!important;
    column-gap:9px!important;
    min-height:78px!important;
  }

  .site-search-product-result .site-search-result-thumb{
    grid-column:1!important;
    grid-row:1 / span 3!important;
    width:46px;
    height:46px;
  }

  .site-search-product-result .site-search-result-type{
    grid-column:2!important;
    grid-row:1!important;
  }

  .site-search-product-result .site-search-result-main{
    grid-column:2!important;
    grid-row:2!important;
  }

  .site-search-product-result .site-search-result-price{
    grid-column:2!important;
    grid-row:3!important;
    display:flex;
    min-width:0!important;
    align-items:baseline;
    gap:5px;
    text-align:left;
  }

  .site-search-product-result .site-search-result-price small{
    margin-top:0!important;
  }

  .site-search-product-result .site-search-result-arrow{
    grid-column:3!important;
    grid-row:1 / span 3!important;
  }
}


/* =========================================================
   BATCH 80 — FOUR PRODUCT CARDS ON WIDE DESKTOP
   The approved three-column smaller-desktop and two-column
   mobile layouts remain unchanged.
   ========================================================= */

@media(min-width:1500px){
  #grid.product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}


/* =========================================================
   BATCH 81 — COMPACT DESKTOP PRODUCT CARDS
   Shorter media panels and tighter vertical spacing let the
   complete card fit comfortably on screen. Mobile is untouched.
   ========================================================= */

@media(min-width:761px){
  #grid .product-image{
    height:270px!important;
  }

  #grid .product-image img{
    padding:14px!important;
  }

  #grid .product-info{
    padding:18px!important;
  }

  #grid .product-info h3{
    min-height:52px!important;
    margin:10px 0 8px!important;
    font-size:24px!important;
    line-height:1!important;
  }

  #grid .product-id-line{
    margin:-1px 0 6px!important;
  }

  #grid .product-info>p{
    height:46px!important;
    margin-bottom:12px!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  #grid .price-row{
    margin-bottom:12px!important;
  }

  #grid .price-row div{
    padding:11px 0!important;
  }

  #grid .price-row strong{
    font-size:22px!important;
  }

  #grid .price-row small{
    font-size:10px!important;
  }
}

@media(min-width:1500px){
  #grid .product-image{
    height:250px!important;
  }
}


/* =========================================================
   BATCH 82 — MOBILE PRODUCT IMAGE SPACING
   Removes excess frame padding while preserving the same
   usable photo height. No cropping, distortion or text changes.
   ========================================================= */

@media(max-width:760px){
  #grid .product-image{
    height:126px!important;
  }

  #grid .product-image img{
    padding:3px!important;
  }
}

@media(max-width:360px){
  #grid .product-image{
    height:112px!important;
  }
}


/* =========================================================
   BATCH 83 — MOBILE SERVICES: SELECTED SERVICE VIEW
   Mobile shows one service at a time and puts the useful
   summary before the real project photograph. Desktop keeps
   the approved four-story Services composition unchanged.
   ========================================================= */

.mobile-service-tabs{
  display:none;
}

/* Preserve the approved desktop divider after inserting the
   mobile-only selector between the hero and first story. */
.services-hero-v2 + .mobile-service-tabs + .service-story{
  border-top:1px solid rgba(255,255,255,.16);
}

@media(max-width:760px){
  .mobile-service-tabs{
    position:sticky;
    top:72px;
    z-index:120;
    width:100%;
    height:48px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    background:#f3f0e9;
    border-top:1px solid #c4c9c7;
    border-bottom:1px solid #aeb7b6;
  }

  .mobile-service-tabs button{
    min-width:0;
    height:47px;
    padding:0 5px;
    border:0;
    border-right:1px solid #c4c9c7;
    background:transparent;
    color:var(--navy);
    font-family:var(--display);
    font-size:12px;
    font-weight:900;
    letter-spacing:.65px;
    cursor:pointer;
  }

  .mobile-service-tabs button:last-child{
    border-right:0;
  }

  .mobile-service-tabs button.active{
    background:var(--green);
    color:var(--navy);
  }

  #services .service-story{
    display:none!important;
  }

  #services .service-story.mobile-service-active{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    scroll-margin-top:120px!important;
  }

  #services .service-story-copy,
  #services .service-story-facts,
  #services .service-story-actions{
    display:contents!important;
  }

  #services .service-story-top{
    order:1;
    width:100%;
    margin:0 0 12px!important;
    padding:28px 5vw 0!important;
  }

  #services .service-story-top small{
    font-size:11px!important;
  }

  #services .service-story h2{
    order:2;
    width:100%;
    margin:0!important;
    padding:0 5vw!important;
    font-size:clamp(32px,9.75vw,38px)!important;
    line-height:.92!important;
    letter-spacing:-1.35px!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #services .service-story-lead{
    order:3;
    width:100%;
    max-width:none!important;
    margin:17px 0 0!important;
    padding:0 5vw!important;
    font-size:16px!important;
    line-height:1.5!important;
  }

  #services .service-story-facts>div{
    width:calc(100% - 10vw)!important;
    min-height:0!important;
    margin-left:5vw!important;
    margin-right:5vw!important;
    padding:15px!important;
    border:1px solid rgba(9,39,49,.24)!important;
  }

  #services .service-story-dark .service-story-facts>div,
  #services .service-story-blue .service-story-facts>div{
    border-color:rgba(255,255,255,.24)!important;
  }

  #services .service-story-facts>div:nth-child(1){
    order:4;
    margin-top:22px!important;
  }

  #services .service-story-facts>div:nth-child(2){
    order:5;
    border-top:0!important;
  }

  #services .service-story-facts>div:nth-child(3){
    order:8;
    margin-top:22px!important;
  }

  #services .service-story-facts span{
    margin-bottom:8px!important;
    font-size:11px!important;
  }

  #services .service-story-facts strong{
    margin-bottom:7px!important;
    font-size:16px!important;
    line-height:1.12!important;
  }

  #services .service-story-facts p{
    font-size:14px!important;
    line-height:1.42!important;
  }

  #services .service-story-actions>[onclick*="openQuoteContact"]{
    order:6;
    width:calc(100% - 10vw)!important;
    min-height:52px!important;
    margin:18px 5vw 24px!important;
    padding:0 16px!important;
    justify-content:space-between!important;
    font-size:12px!important;
  }

  #services .service-story-image{
    order:7!important;
    width:100%!important;
    height:440px!important;
    min-height:440px!important;
    max-height:none!important;
  }

  #services .service-story-actions>[onclick*="filterShopForService"],
  #services .service-story-actions>a[href="#gallery"]{
    order:9;
    width:calc(100% - 10vw)!important;
    min-height:52px!important;
    margin:16px 5vw 36px!important;
    padding:0 16px!important;
    justify-content:space-between!important;
    font-size:12px!important;
  }
}


/* =========================================================
   BATCH 84 — MOBILE SERVICES: CONSISTENT PHOTO REVEAL
   Keeps every word, photograph and desktop rule unchanged.
   The longest summary is tightened slightly; shorter summaries
   share their spare height across the existing vertical rhythm.
   This makes every project photograph begin at the same point.
   ========================================================= */

@media(max-width:760px){
  #services .service-story.mobile-service-measuring{
    position:absolute!important;
    inset:0 auto auto 0!important;
    z-index:-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #services .service-story-top{
    margin-bottom:calc(10px + var(--mobile-balance-top-gap, 0px))!important;
    padding-top:calc(24px + var(--mobile-balance-top, 0px))!important;
  }

  #services .service-story-lead{
    margin-top:calc(14px + var(--mobile-balance-lead, 0px))!important;
  }

  #services .service-story-facts>div{
    padding:14px!important;
  }

  #services .service-story-facts>div:nth-child(1){
    margin-top:calc(18px + var(--mobile-balance-facts, 0px))!important;
  }

  #services .service-story-facts span{
    margin-bottom:7px!important;
  }

  #services .service-story-facts strong{
    margin-bottom:6px!important;
  }

  #services .service-story-actions>[onclick*="openQuoteContact"]{
    margin-top:calc(14px + var(--mobile-balance-quote-top, 0px))!important;
    margin-bottom:calc(18px + var(--mobile-balance-quote-bottom, 0px))!important;
  }
}


/* =========================================================
   BATCH 85 — CONTACT FORM REFINEMENT
   Shared field rules plus mobile-only spacing and name layout.
   ========================================================= */

.contact-message-heading{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.contact-message-heading small{
  flex:0 0 auto;
  color:#687477;
  font-size:8px;
  font-weight:700;
  letter-spacing:.35px;
}

.contact-message-heading small.at-limit{
  color:#8b3a2c;
}

@media(min-width:761px){
  .contact-section.contact-v2.contact-has-success{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

@media(max-width:760px){
  .contact-v2 .contact-main{
    padding:28px 5vw 32px!important;
    gap:20px!important;
  }

  .contact-v2 .contact-copy small{
    margin-bottom:8px!important;
  }

  .contact-v2 .contact-copy h2{
    margin-bottom:12px!important;
  }

  .contact-v2 .contact-copy>p{
    margin-bottom:16px!important;
  }

  .contact-direct-v2{
    gap:1px!important;
    padding-top:9px!important;
  }

  .contact-direct-v2 span{
    margin-top:6px!important;
  }

  .contact-form-v2{
    gap:7px!important;
  }

  .contact-form-v2 .field-row{
    gap:7px!important;
  }

  .contact-form-v2 .contact-name-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }

  .contact-form-v2 label{
    gap:4px!important;
  }

  .upload-field-v2{
    padding:8px!important;
    gap:5px 8px!important;
  }

  .contact-file-list{
    gap:3px!important;
  }

  .form-submit-row-v2{
    gap:7px!important;
  }
}

/* =========================================================
   BATCH 89 — ACCOUNT REQUIRED-FIELD FEEDBACK
   ========================================================= */
.account-required-mark{
  color:#8b2525;
  font-weight:900;
}

.account-inline-field-error{
  display:block;
  margin-top:6px;
  color:#8b2525;
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.55px;
}


/* =========================================================
   BATCH 92 — MOBILE ACCOUNT VIEWPORT RESET
   Prevent iOS form-focus zoom and restore Home to the normal
   viewport after Account closes, verifies or signs in.
   ========================================================= */

@media(max-width:760px){
  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  [role="button"]{
    touch-action:manipulation;
  }

  .account-drawer-overlay{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    translate:none!important;
    scale:1!important;
  }

  .account-drawer{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    width:min(680px,100%)!important;
    max-width:100%!important;
    transform:none!important;
    transform-origin:center!important;
    translate:none!important;
    scale:1!important;
  }

  .account-drawer input,
  .account-drawer select,
  .account-drawer textarea,
  .account-choice-overlay input,
  .account-choice-overlay select,
  .account-choice-overlay textarea,
  .account-list-view-overlay input,
  .account-list-view-overlay select,
  .account-list-view-overlay textarea{
    font-size:16px!important;
  }
}


/* =========================================================
   BATCH 93 — MOBILE CREATE ACCOUNT COMPACTION
   Mobile spacing only. Field and type sizes remain unchanged.
   ========================================================= */

.account-field-label{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
}

@media(max-width:760px){
  .account-view[data-account-view="create"] .account-eyebrow{
    margin-bottom:6px;
  }

  .account-view[data-account-view="create"] .account-intro{
    margin-top:11px;
    margin-bottom:15px;
  }

  #previewCreateForm{
    gap:9px;
  }

  #previewCreateForm .account-two-col{
    gap:9px;
  }

  #previewCreateForm label{
    gap:5px;
  }

  #previewCreateForm .account-link-action{
    padding-top:4px;
    padding-bottom:4px;
  }

  #previewCreateForm .account-preview-warning{
    margin-top:0;
    padding-top:8px;
    padding-bottom:8px;
  }
}


/* =========================================================
   BATCH 94 — OFFICIAL MANUFACTURER LOGOS ON HOME
   Quiet, unlabelled logo row beneath the existing Home proof.
   ========================================================= */

.home-manufacturer-logos{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(100%,430px);
  margin-top:17px;
}

.home-manufacturer-logos a{
  width:132px;
  height:48px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.28);
  border-radius:2px;
}

.home-manufacturer-logos a:hover{
  background:#fff;
}

.home-manufacturer-logos a:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
}

.home-manufacturer-logos img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:28px;
  object-fit:contain;
}

@media(max-width:760px){
  #home .home-manufacturer-logos{
    width:100%;
    gap:7px;
    margin-top:16px;
  }

  #home .home-manufacturer-logos a{
    width:auto;
    min-width:0;
    height:43px;
    flex:1 1 0;
    padding:8px 9px;
  }

  #home .home-manufacturer-logos img{
    max-height:23px;
  }
}


/* =========================================================
   BATCH 97 — HOME CTA EMPHASIS SWAP
   Services is solid green; Shop keeps the highlighted outline.
   ========================================================= */
#home .hero-buttons .primary{
  background:rgba(168,201,74,.15)!important;
  color:#e4f5b4!important;
  border:2px solid var(--green)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;
}

#home .hero-buttons .secondary{
  background:var(--green)!important;
  color:var(--navy-dark)!important;
  border:1px solid var(--green)!important;
  box-shadow:none!important;
}

#home .hero-buttons .primary:hover,
#home .hero-buttons .primary:focus-visible{
  background:var(--green)!important;
  color:var(--navy-dark)!important;
  border-color:var(--green)!important;
}

#home .hero-buttons .secondary:hover,
#home .hero-buttons .secondary:focus-visible{
  background:#b8d75d!important;
  color:var(--navy-dark)!important;
  border-color:#b8d75d!important;
}

#home .hero-buttons .primary:focus-visible,
#home .hero-buttons .secondary:focus-visible{
  outline:3px solid rgba(255,255,255,.92)!important;
  outline-offset:3px!important;
}
.checkout-field-error{
  display:block;
  margin-top:8px;
  color:#941f1f;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
.checkout-field-error[hidden]{display:none;}

.checkout-form input.checkout-invalid,
.checkout-form select.checkout-invalid,
.checkout-form input[aria-invalid="true"],
.checkout-form select[aria-invalid="true"]{
  border:2px solid #a51d1d;
  box-shadow:0 0 0 3px rgba(165,29,29,.14);
}

.checkout-place-note.error{
  padding:9px 10px;
  border:1px solid #df9999;
  background:#fff0f0;
  color:#7d1919;
}

/* =========================================================
   BATCH 105 — CONSISTENT CHECKOUT FIELD VALIDATION
   ========================================================= */
@media (max-width:760px){
  .mobile-checkout-actionbar{
    grid-template-columns:minmax(92px,1fr) minmax(176px,52%)!important;
  }

  .mobile-checkout-actionbar>button{
    padding:0 8px!important;
    font-size:8.5px!important;
    line-height:1.05!important;
    letter-spacing:.15px!important;
    white-space:nowrap!important;
  }

  .checkout-field-error{
    font-size:12px;
    line-height:1.3;
  }
}


/* =========================================================
   BATCH 108 — REAL MY ORDERS + RELIABLE SHOP NAVIGATION
   ========================================================= */
.account-paid-order-row{
  align-items:start;
}

.account-order-view-meta{
  margin:6px 0 0;
  color:#617278;
  font-size:12px;
  line-height:1.35;
}

.account-order-view-help{
  padding:12px 22px;
  border-bottom:1px solid #c8cdca;
  background:#e8e5dd;
  color:#4f6268;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.65px;
  line-height:1.45;
}

.account-order-item-row{
  min-height:92px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #c8cdca;
}

.account-order-item-select{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.account-order-item-select input{
  width:19px;
  height:19px;
  margin:0;
  accent-color:var(--navy);
}

.account-order-item-main>strong{
  display:block;
  font-size:15px;
  line-height:1.3;
}

.account-order-item-tools{
  min-width:170px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.account-order-item-tools>small{
  color:#63767b;
  font-family:var(--display);
  font-size:8px;
  font-weight:900;
}

.account-order-qty-controls{
  display:grid;
  grid-template-columns:34px 38px 34px;
  align-items:center;
  border:1px solid #9aa9aa;
  background:#fff;
}

.account-order-qty-controls button{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}

.account-order-qty-controls strong{
  text-align:center;
  font-size:14px;
}

.account-order-view-footer{
  flex-wrap:wrap;
}

.account-order-view-feedback{
  flex:1 1 220px;
  color:#3e683e;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.55px;
}

@media(max-width:650px){
  .account-order-item-row{
    grid-template-columns:28px minmax(0,1fr);
    align-items:start;
  }
  .account-order-item-tools{
    grid-column:2;
    min-width:0;
    align-items:flex-start;
  }
  .account-order-view-footer{
    flex-direction:column;
    align-items:stretch;
  }
  .account-order-view-feedback{
    flex:0 0 auto;
    min-height:18px;
  }
}

/* =========================================================
   BATCH 113 — SERVICES COPY + PUMP SERVICES
   Text leads; service photos support the explanation.
   Mobile keeps the project image compact and integrated with
   the technical explanation instead of becoming a full-screen wall.
   ========================================================= */

@media(max-width:760px){
  .mobile-service-tabs{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .mobile-service-tabs button{
    padding:0 3px;
    font-size:10.5px;
    letter-spacing:.35px;
  }

  #services .service-story.mobile-service-active{
    display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(118px,.75fr)!important;
    grid-auto-rows:auto!important;
    align-items:stretch!important;
  }

  #services .service-story-top,
  #services .service-story h2,
  #services .service-story-lead,
  #services .service-story-facts>div:nth-child(1),
  #services .service-story-facts>div:nth-child(3),
  #services .service-story-actions>[onclick*="openQuoteContact"],
  #services .service-story-actions>[onclick*="filterShopForService"],
  #services .service-story-actions>a[href="#gallery"]{
    grid-column:1 / -1!important;
  }

  #services .service-story-top{grid-row:1!important;}
  #services .service-story h2{grid-row:2!important;}
  #services .service-story-lead{grid-row:3!important;}
  #services .service-story-facts>div:nth-child(1){grid-row:4!important;}

  #services .service-story-facts>div:nth-child(2){
    grid-column:1!important;
    grid-row:5!important;
    width:auto!important;
    min-width:0!important;
    margin:18px 0 0 5vw!important;
    border-top:1px solid rgba(9,39,49,.24)!important;
  }

  #services .service-story-dark .service-story-facts>div:nth-child(2),
  #services .service-story-blue .service-story-facts>div:nth-child(2){
    border-top-color:rgba(255,255,255,.24)!important;
  }

  #services .service-story-image{
    grid-column:2!important;
    grid-row:5!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:18px 5vw 0 0!important;
    aspect-ratio:4 / 5!important;
    align-self:stretch!important;
  }

  #services .service-story-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  #services .service-story-pump-image img{
    object-fit:cover!important;
    object-position:center!important;
    background:transparent!important;
  }

  #services .service-story-actions>[onclick*="openQuoteContact"]{
    grid-row:6!important;
  }

  #services .service-story-facts>div:nth-child(3){
    grid-row:7!important;
    margin-top:0!important;
  }

  #services .service-story-actions>[onclick*="filterShopForService"],
  #services .service-story-actions>a[href="#gallery"]{
    grid-row:8!important;
  }
}

/* =========================================================
   LOCAL CONCEPT PREVIEW — DELTA SERVICE ONLY
   Asymmetrical information layout. Not a deployment batch.
   ========================================================= */
@media (min-width:1001px){
  .service-story-concept{
    min-height:690px;
    grid-template-columns:minmax(285px,.52fr) minmax(0,1.48fr)!important;
  }
  .service-story-concept .concept-service-image{
    min-height:690px;
  }
  .service-story-concept .concept-service-image img{
    object-position:center;
  }
  .service-story-concept .concept-service-copy{
    padding:48px 4.5vw 34px!important;
    justify-content:flex-start;
  }
  .service-story-concept h2{
    max-width:900px;
  }
  .service-story-concept .service-story-lead{
    max-width:760px!important;
    margin-top:18px!important;
  }
  .service-concept-map{
    margin-top:28px;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(250px,.72fr);
    grid-template-areas:
      "what designed"
      "how designed";
    column-gap:26px;
    row-gap:18px;
    align-items:start;
    position:relative;
  }
  .service-concept-map::before{
    content:"";
    position:absolute;
    left:calc(64% + 3px);
    top:10%;
    bottom:10%;
    width:1px;
    background:rgba(255,255,255,.16);
  }
  .concept-note{
    position:relative;
    border:0;
    border-top:1px solid rgba(255,255,255,.34);
    padding:17px 6px 12px 0;
    background:transparent;
  }
  .concept-note-what{
    grid-area:what;
    width:88%;
  }
  .concept-note-how{
    grid-area:how;
    width:100%;
    margin-left:8%;
    padding-left:20px;
    border-left:3px solid var(--green);
  }
  .concept-note-designed{
    grid-area:designed;
    width:100%;
    margin-top:58px;
    padding:22px 0 18px 20px;
    border-top:0;
    border-left:1px solid rgba(255,255,255,.3);
  }
  .concept-note span{
    display:block;
    margin-bottom:9px;
    color:var(--green);
    font-family:var(--display);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.15px;
  }
  .concept-note strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-family:var(--display);
    font-size:19px;
    line-height:1.05;
  }
  .concept-note p{
    max-width:690px;
    margin:0;
    color:#d0dadd;
    font-size:15px;
    line-height:1.42;
  }
  .service-story-concept .concept-actions{
    margin-top:18px!important;
  }
}

@media (max-width:1000px){
  .service-story-concept .service-concept-map{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(118px,.42fr);
    gap:14px 16px;
    margin-top:20px;
  }
  .service-story-concept .concept-note{
    padding:14px 0;
    border-top:1px solid currentColor;
  }
  .service-story-concept .concept-note-what,
  .service-story-concept .concept-note-how{
    grid-column:1;
  }
  .service-story-concept .concept-note-designed{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    padding-left:14px;
    border-left:2px solid var(--green);
    border-top:0;
  }
  .service-story-concept .concept-note span{
    display:block;
    color:var(--green);
    font-family:var(--display);
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
    margin-bottom:7px;
  }
  .service-story-concept .concept-note strong{
    display:block;
    font-family:var(--display);
    font-size:14px;
    line-height:1.08;
    margin-bottom:6px;
  }
  .service-story-concept .concept-note p{
    margin:0;
    font-size:12px;
    line-height:1.4;
  }
}

/* =========================================================
   LOCAL CONCEPT PREVIEW V2 — DELTA SERVICE ONLY
   Same asymmetrical idea, cleaned up: text leads, image supports,
   no crossing divider lines, and the three information areas remain
   staggered without looking disconnected. Not a deployment batch.
   ========================================================= */
@media (min-width:1001px){
  .service-story-concept{
    min-height:680px!important;
    grid-template-columns:minmax(250px,.42fr) minmax(0,1.58fr)!important;
    align-items:stretch!important;
  }

  .service-story-concept .concept-service-image{
    min-height:0!important;
    height:455px!important;
    max-height:455px!important;
    width:calc(100% - 3.6vw)!important;
    margin:92px 0 58px 3.6vw!important;
    align-self:center!important;
    overflow:hidden!important;
  }

  .service-story-concept .concept-service-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 42%!important;
  }

  .service-story-concept .concept-service-copy{
    padding:46px 4.4vw 34px!important;
    justify-content:flex-start!important;
  }

  .service-story-concept h2{
    max-width:860px!important;
  }

  .service-story-concept .service-story-lead{
    max-width:790px!important;
    margin-top:18px!important;
  }

  .service-story-concept .service-concept-map{
    margin-top:26px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(245px,.76fr)!important;
    grid-template-areas:
      "what designed"
      "how designed"!important;
    column-gap:24px!important;
    row-gap:17px!important;
    align-items:start!important;
    position:relative!important;
  }

  .service-story-concept .service-concept-map::before{
    content:none!important;
    display:none!important;
  }

  .service-story-concept .concept-note{
    position:relative!important;
    margin:0!important;
    border:0!important;
    padding:18px 20px!important;
    background:rgba(255,255,255,.045)!important;
    box-shadow:none!important;
  }

  .service-story-concept .concept-note-what{
    grid-area:what!important;
    width:86%!important;
    justify-self:start!important;
  }

  .service-story-concept .concept-note-how{
    grid-area:how!important;
    width:94%!important;
    margin-left:6%!important;
    background:rgba(166,209,64,.065)!important;
  }

  .service-story-concept .concept-note-designed{
    grid-area:designed!important;
    width:100%!important;
    margin-top:34px!important;
    align-self:center!important;
    background:rgba(255,255,255,.07)!important;
  }

  .service-story-concept .concept-note span{
    margin-bottom:9px!important;
    color:var(--green)!important;
    font-size:10px!important;
    letter-spacing:1.1px!important;
  }

  .service-story-concept .concept-note strong{
    margin-bottom:8px!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1.08!important;
  }

  .service-story-concept .concept-note p{
    max-width:660px!important;
    margin:0!important;
    color:#d0dadd!important;
    font-size:15px!important;
    line-height:1.42!important;
  }

  .service-story-concept .concept-actions{
    margin-top:23px!important;
  }
}

@media (min-width:1001px) and (max-height:820px){
  .service-story-concept{
    min-height:620px!important;
  }
  .service-story-concept .concept-service-image{
    height:410px!important;
    max-height:410px!important;
    margin-top:74px!important;
    margin-bottom:44px!important;
  }
  .service-story-concept .concept-service-copy{
    padding-top:36px!important;
    padding-bottom:28px!important;
  }
  .service-story-concept .service-concept-map{
    margin-top:20px!important;
  }
  .service-story-concept .concept-note{
    padding:15px 18px!important;
  }
  .service-story-concept .concept-note-designed{
    margin-top:24px!important;
  }
}

/* Keep the preview sensible on tablets/mobile without introducing the
   desktop decorative layering into the small-screen layout. */
@media (max-width:1000px){
  .service-story-concept .service-concept-map::before{
    content:none!important;
    display:none!important;
  }
  .service-story-concept .concept-note{
    border:0!important;
    background:rgba(255,255,255,.045)!important;
  }
  .service-story-concept .concept-note-how{
    background:rgba(166,209,64,.065)!important;
  }
  .service-story-concept .concept-note-designed{
    border:0!important;
    background:rgba(255,255,255,.07)!important;
  }
}

/* =========================================================
   LOCAL CONSISTENCY PREVIEW — KÖSTER MIRRORS DELTA V2
   Delta is intentionally unchanged. KÖSTER uses the same visual
   grammar with the image on the opposite side and light-surface tones.
   Preview only — not a deployment batch.
   ========================================================= */
@media (min-width:1001px){
  .service-story-concept-reverse{
    grid-template-columns:minmax(0,1.58fr) minmax(250px,.42fr)!important;
  }

  .service-story-concept-reverse .concept-service-copy{
    grid-column:1!important;
    grid-row:1!important;
  }

  .service-story-concept-reverse .concept-service-image{
    grid-column:2!important;
    grid-row:1!important;
    width:calc(100% - 3.6vw)!important;
    margin:92px 3.6vw 58px 0!important;
  }

  .service-story-light.service-story-concept .concept-note{
    background:rgba(9,50,69,.055)!important;
  }

  .service-story-light.service-story-concept .concept-note-how{
    background:rgba(166,209,64,.12)!important;
  }

  .service-story-light.service-story-concept .concept-note-designed{
    background:rgba(9,50,69,.085)!important;
  }

  .service-story-light.service-story-concept .concept-note strong{
    color:var(--navy)!important;
  }

  .service-story-light.service-story-concept .concept-note p{
    color:#46575d!important;
  }
}

@media (min-width:1001px) and (max-height:820px){
  .service-story-concept-reverse .concept-service-image{
    margin-top:74px!important;
    margin-bottom:44px!important;
  }
}

@media (max-width:1000px){
  .service-story-light.service-story-concept .concept-note{
    background:rgba(9,50,69,.055)!important;
  }
  .service-story-light.service-story-concept .concept-note-how{
    background:rgba(166,209,64,.12)!important;
  }
  .service-story-light.service-story-concept .concept-note-designed{
    background:rgba(9,50,69,.085)!important;
  }
}


/* =========================================================
   SERVICES PHOTO PREVIEW — DELTA + KÖSTER ONLY
   No other page styles are changed. Normal desktop image presence is
   increased modestly; click/tap opens an optional project-photo viewer.
   ========================================================= */
@media (min-width:1001px){
  #services .service-story-concept .concept-service-image{
    width:calc(100% - 2vw)!important;
    height:490px!important;
    max-height:490px!important;
    margin-left:2vw!important;
  }
  #services .service-story-concept-reverse .concept-service-image{
    margin-left:0!important;
    margin-right:2vw!important;
  }
}
@media (min-width:1001px) and (max-height:820px){
  #services .service-story-concept .concept-service-image{
    height:445px!important;
    max-height:445px!important;
  }
}
#services .service-photo-clickable{
  cursor:zoom-in;
  position:relative;
}
#services .service-photo-clickable:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
}
#services .service-photo-clickable::after{
  content:'VIEW PHOTO  ↗';
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  padding:7px 9px;
  background:rgba(9,50,69,.88);
  color:#fff;
  font-family:var(--display);
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  pointer-events:none;
}
.service-photo-lightbox[hidden]{display:none!important;}
.service-photo-lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 64px;
  background:rgba(3,18,26,.94);
}
.service-photo-stage{
  margin:0;
  max-width:min(1180px,88vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
}
.service-photo-stage img{
  display:block;
  max-width:100%;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.service-photo-stage figcaption{
  min-height:16px;
  color:#d8e0e3;
  font-family:var(--display);
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
}
.service-photo-close,
.service-photo-nav{
  position:fixed;
  z-index:100001;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(9,50,69,.72);
  color:#fff;
  cursor:pointer;
}
.service-photo-close{
  top:22px;
  right:24px;
  width:46px;
  height:46px;
  font-size:30px;
  line-height:1;
}
.service-photo-nav{
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:64px;
  font-size:42px;
  line-height:1;
}
.service-photo-prev{left:18px;}
.service-photo-next{right:18px;}
.service-photo-close:hover,
.service-photo-nav:hover,
.service-photo-close:focus-visible,
.service-photo-nav:focus-visible{
  border-color:var(--green);
  outline:none;
}
body.service-photo-open{overflow:hidden;}
@media (max-width:700px){
  .service-photo-lightbox{padding:54px 14px 24px;}
  .service-photo-stage{max-width:94vw;}
  .service-photo-stage img{max-height:76vh;}
  .service-photo-close{top:10px;right:10px;}
  .service-photo-nav{width:42px;height:54px;font-size:34px;}
  .service-photo-prev{left:6px;}
  .service-photo-next{right:6px;}
  #services .service-photo-clickable::after{font-size:8px;padding:6px 7px;}
}


/* =========================================================
   FULL SERVICES FINAL-CHECK PREVIEW
   Extends the approved Delta/KÖSTER visual system to KESSEL,
   Swimming Pools and Pump Services only. Other pages unchanged.
   ========================================================= */
@media (min-width:1001px){
  .service-story-pool.service-story-concept .concept-note{
    background:rgba(9,50,69,.055)!important;
  }
  .service-story-pool.service-story-concept .concept-note-how{
    background:rgba(166,209,64,.14)!important;
  }
  .service-story-pool.service-story-concept .concept-note-designed{
    background:rgba(9,50,69,.09)!important;
  }
  .service-story-pool.service-story-concept .concept-note strong{
    color:var(--navy)!important;
  }
  .service-story-pool.service-story-concept .concept-note p{
    color:#46575d!important;
  }
}
@media (max-width:1000px){
  .service-story-pool.service-story-concept .concept-note{
    background:rgba(9,50,69,.055)!important;
  }
  .service-story-pool.service-story-concept .concept-note-how{
    background:rgba(166,209,64,.14)!important;
  }
  .service-story-pool.service-story-concept .concept-note-designed{
    background:rgba(9,50,69,.09)!important;
  }
  .service-story-pool.service-story-concept .concept-note strong{
    color:var(--navy)!important;
  }
  .service-story-pool.service-story-concept .concept-note p{
    color:#46575d!important;
  }
}

/* =========================================================
   SERVICES FINAL SPACING PREVIEW — LOCKED VISUAL FRAME
   Keep each service inside the same desktop frame. The approved photo
   area is treated as a fixed slot: future project photos must crop/fit
   inside it rather than enlarging the service section.
   ========================================================= */
@media (min-width:1001px){
  #services .service-story-concept{
    box-sizing:border-box!important;
  }

  #services .service-story-concept .concept-service-copy{
    box-sizing:border-box!important;
    min-height:0!important;
    height:100%!important;
    padding-bottom:42px!important;
  }

  /* Anchor every CTA row to the same lower visual line while preserving
     enough space above it for longer Pool/Pump copy. */
  #services .service-story-concept .concept-actions{
    margin-top:auto!important;
    padding-top:22px!important;
    flex:0 0 auto!important;
  }

  /* This is the approved media slot. New photos get fitted/cropped here;
     the frame does not grow to accommodate them. */
  #services .service-story-concept .concept-service-image{
    box-sizing:border-box!important;
    flex:none!important;
  }
  #services .service-story-concept .concept-service-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

@media (min-width:1001px) and (max-height:820px){
  #services .service-story-concept .concept-service-copy{
    padding-bottom:34px!important;
  }
  #services .service-story-concept .concept-actions{
    padding-top:16px!important;
  }
}

/* =========================================================
   MOBILE SERVICES — LINEAR READABILITY PREVIEW
   Mobile only. Desktop layout is intentionally untouched.
   Content stacks in reading order; project image comes last.
   ========================================================= */
@media (max-width:700px){
  #services .service-story-concept,
  #services .service-story-concept-reverse{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  #services .service-story-concept .concept-service-copy,
  #services .service-story-concept-reverse .concept-service-copy{
    order:1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:30px 20px 18px!important;
    display:block!important;
  }

  #services .service-story-concept .service-story-top{
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    margin:0 0 18px!important;
  }
  #services .service-story-concept .service-story-top span{
    flex:0 0 auto!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  #services .service-story-concept .service-story-top small{
    display:block!important;
    max-width:none!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:1.1px!important;
  }

  #services .service-story-concept h2{
    margin:0!important;
    max-width:none!important;
    font-size:clamp(36px,10.5vw,46px)!important;
    line-height:.94!important;
    letter-spacing:-1.6px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #services .service-story-concept h2 br{
    display:none!important;
  }

  #services .service-story-concept .service-story-lead{
    max-width:none!important;
    margin:20px 0 26px!important;
    font-size:18px!important;
    line-height:1.48!important;
  }

  #services .service-story-concept .service-concept-map{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  #services .service-story-concept .service-concept-map::before{
    content:none!important;
    display:none!important;
  }

  #services .service-story-concept .concept-note,
  #services .service-story-concept .concept-note-what,
  #services .service-story-concept .concept-note-how,
  #services .service-story-concept .concept-note-designed{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0 0 12px!important;
    padding:18px 18px!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  #services .service-story-concept .concept-note span{
    display:block!important;
    margin:0 0 8px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:1px!important;
  }
  #services .service-story-concept .concept-note strong{
    display:block!important;
    margin:0 0 8px!important;
    font-size:18px!important;
    line-height:1.12!important;
  }
  #services .service-story-concept .concept-note p{
    max-width:none!important;
    margin:0!important;
    font-size:15px!important;
    line-height:1.48!important;
  }

  #services .service-story-concept .concept-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin:18px 0 0!important;
    padding:0!important;
  }
  #services .service-story-concept .concept-actions button,
  #services .service-story-concept .concept-actions a{
    width:100%!important;
    min-height:50px!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
  }

  /* Photo is deliberately last on mobile and remains supporting content. */
  #services .service-story-concept .concept-service-image,
  #services .service-story-concept-reverse .concept-service-image{
    order:2!important;
    width:min(72vw,300px)!important;
    height:230px!important;
    min-height:0!important;
    max-height:230px!important;
    margin:6px auto 30px!important;
    align-self:center!important;
    overflow:hidden!important;
    flex:none!important;
  }
  #services .service-story-concept .concept-service-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  #services .service-story-concept .service-story-tag{
    font-size:9px!important;
    padding:10px 14px!important;
  }
  #services .service-photo-clickable::after{
    font-size:8px!important;
    padding:6px 7px!important;
  }

  /* Keep light service text readable while using the same linear structure. */
  #services .service-story-light.service-story-concept .concept-note strong,
  #services .service-story-pool.service-story-concept .concept-note strong{
    color:var(--navy)!important;
  }
  #services .service-story-light.service-story-concept .concept-note p,
  #services .service-story-pool.service-story-concept .concept-note p{
    color:#46575d!important;
  }
}

/* =========================================================
   BATCH 116 — MOBILE SERVICES FINAL READABILITY + CTA HIERARCHY
   Desktop is intentionally untouched. Mobile becomes a strict,
   readable stack; authored headline breaks are preserved; quote,
   enquiry and product/project actions sit together before the photo.
   ========================================================= */
.mobile-service-enquiry{display:none!important;}

@media (max-width:700px){
  #services .service-story-concept,
  #services .service-story-concept-reverse{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  #services .service-story-concept .concept-service-copy,
  #services .service-story-concept-reverse .concept-service-copy{
    order:1!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 20px 0!important;
    display:block!important;
    box-sizing:border-box!important;
  }

  #services .service-story-concept .service-story-top{
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    width:auto!important;
    margin:0 0 16px!important;
    padding:0!important;
  }
  #services .service-story-concept .service-story-top span{
    flex:0 0 auto!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  #services .service-story-concept .service-story-top small{
    display:block!important;
    max-width:245px!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:1.05px!important;
  }

  /* Keep the deliberate desktop line breaks instead of joining words
     when <br> is hidden. This also prevents long headings overflowing. */
  #services .service-story-concept h2{
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(34px,9.6vw,41px)!important;
    line-height:.96!important;
    letter-spacing:-1.15px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #services .service-story-concept h2 br{
    display:block!important;
  }

  #services .service-story-concept .service-story-lead{
    width:auto!important;
    max-width:none!important;
    margin:18px 0 24px!important;
    padding:0!important;
    font-size:17px!important;
    line-height:1.48!important;
  }

  #services .service-story-concept .service-concept-map{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #services .service-story-concept .service-concept-map::before{
    content:none!important;
    display:none!important;
  }

  #services .service-story-concept .concept-note,
  #services .service-story-concept .concept-note-what,
  #services .service-story-concept .concept-note-how,
  #services .service-story-concept .concept-note-designed{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0 0 12px!important;
    padding:18px!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  #services .service-story-concept .concept-note span{
    display:block!important;
    margin:0 0 8px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:1px!important;
  }
  #services .service-story-concept .concept-note strong{
    display:block!important;
    margin:0 0 8px!important;
    font-size:18px!important;
    line-height:1.13!important;
  }
  #services .service-story-concept .concept-note p{
    max-width:none!important;
    margin:0!important;
    font-size:15px!important;
    line-height:1.48!important;
  }

  /* One compact action group. Reset earlier mobile margins/orders that
     separated the buttons by large blank areas. */
  #services .service-story-concept .concept-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    margin:18px 0 16px!important;
    padding:0!important;
  }
  #services .service-story-concept .concept-actions > button,
  #services .service-story-concept .concept-actions > a{
    display:flex!important;
    width:100%!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 16px!important;
    justify-content:space-between!important;
    align-items:center!important;
    box-sizing:border-box!important;
    font-size:11px!important;
    line-height:1.15!important;
    text-align:left!important;
  }
  #services .service-story-concept .concept-actions > [onclick*="openQuoteContact"]{
    order:1!important;
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:var(--navy)!important;
  }
  #services .service-story-concept .concept-actions > .mobile-service-enquiry{
    display:flex!important;
    order:2!important;
  }
  #services .service-story-concept .concept-actions > [onclick*="filterShopForService"],
  #services .service-story-concept .concept-actions > a[href="#gallery"]{
    order:3!important;
    opacity:.92!important;
  }

  /* Photo is always the final part of a mobile service. */
  #services .service-story-concept .concept-service-image,
  #services .service-story-concept-reverse .concept-service-image{
    order:2!important;
    width:min(78vw,310px)!important;
    height:225px!important;
    min-height:0!important;
    max-height:225px!important;
    margin:0 auto 30px!important;
    align-self:center!important;
    overflow:hidden!important;
    flex:none!important;
  }
  #services .service-story-concept .concept-service-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  #services .service-story-concept .service-story-pump-image img{
    object-fit:cover!important;
    object-position:center!important;
    background:transparent!important;
  }
  #services .service-story-concept .service-story-tag{
    font-size:9px!important;
    padding:9px 13px!important;
  }
  #services .service-photo-clickable::after{
    font-size:8px!important;
    padding:6px 7px!important;
  }

  #services .service-story-light.service-story-concept .concept-note strong,
  #services .service-story-pool.service-story-concept .concept-note strong{
    color:var(--navy)!important;
  }
  #services .service-story-light.service-story-concept .concept-note p,
  #services .service-story-pool.service-story-concept .concept-note p{
    color:#46575d!important;
  }
}


/* =========================================================
   BATCH 117 — MOBILE SERVICES RECOVERY
   One service at a time on phones. The selected tab is the
   only visible service, so tab state and content cannot drift.
   Desktop is intentionally untouched.
   ========================================================= */
@media (max-width:760px){
  /* Critical recovery rule: older concept-layout rules must never
     make inactive mobile services visible. */
  #services article.service-story.service-story-concept,
  #services article.service-story.service-story-concept-reverse{
    display:none!important;
  }

  #services article.service-story.service-story-concept.mobile-service-active,
  #services article.service-story.service-story-concept-reverse.mobile-service-active{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    grid-template-columns:none!important;
  }

  /* Every active service uses the exact same mobile structure. */
  #services article.mobile-service-active .concept-service-copy{
    order:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 20px 0!important;
    box-sizing:border-box!important;
  }

  #services article.mobile-service-active .service-story-top{
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    width:100%!important;
    margin:0 0 16px!important;
    padding:0!important;
  }
  #services article.mobile-service-active .service-story-top span{
    flex:0 0 auto!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  #services article.mobile-service-active .service-story-top small{
    display:block!important;
    max-width:250px!important;
    font-size:11px!important;
    line-height:1.35!important;
    letter-spacing:1.05px!important;
  }

  #services article.mobile-service-active h2{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(34px,9.6vw,41px)!important;
    line-height:.96!important;
    letter-spacing:-1.15px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  #services article.mobile-service-active h2 br{display:block!important;}

  #services article.mobile-service-active .service-story-lead{
    width:100%!important;
    max-width:none!important;
    margin:18px 0 24px!important;
    padding:0!important;
    font-size:17px!important;
    line-height:1.48!important;
  }

  #services article.mobile-service-active .service-concept-map{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #services article.mobile-service-active .service-concept-map::before{
    content:none!important;
    display:none!important;
  }

  #services article.mobile-service-active .concept-note,
  #services article.mobile-service-active .concept-note-what,
  #services article.mobile-service-active .concept-note-how,
  #services article.mobile-service-active .concept-note-designed{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0 0 12px!important;
    padding:18px!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  #services article.mobile-service-active .concept-note span{
    display:block!important;
    margin:0 0 8px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:1px!important;
  }
  #services article.mobile-service-active .concept-note strong{
    display:block!important;
    margin:0 0 8px!important;
    font-size:18px!important;
    line-height:1.13!important;
  }
  #services article.mobile-service-active .concept-note p{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:15px!important;
    line-height:1.48!important;
  }

  /* Only the approved CTAs: quote first, then relevant product/project. */
  #services article.mobile-service-active .concept-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    margin:18px 0 16px!important;
    padding:0!important;
  }
  #services article.mobile-service-active .concept-actions > button,
  #services article.mobile-service-active .concept-actions > a{
    display:flex!important;
    width:100%!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 16px!important;
    justify-content:space-between!important;
    align-items:center!important;
    box-sizing:border-box!important;
    font-size:11px!important;
    line-height:1.15!important;
    text-align:left!important;
  }
  #services article.mobile-service-active .concept-actions > [onclick*="openQuoteContact"]{
    order:1!important;
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:var(--navy)!important;
  }
  #services article.mobile-service-active .concept-actions > [onclick*="filterShopForService"],
  #services article.mobile-service-active .concept-actions > a[href="#gallery"]{
    order:2!important;
  }

  /* Project photo is the final supporting element on mobile. */
  #services article.mobile-service-active .concept-service-image{
    order:2!important;
    display:block!important;
    width:min(86vw,340px)!important;
    height:250px!important;
    min-height:0!important;
    max-height:250px!important;
    margin:0 auto 30px!important;
    align-self:center!important;
    overflow:hidden!important;
    flex:none!important;
  }
  #services article.mobile-service-active .concept-service-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  #services article.mobile-service-active .service-story-pump-image img{
    object-fit:cover!important;
    object-position:center!important;
    background:transparent!important;
  }

  /* Tabs are the source of truth for which service is visible. */
  #services .mobile-service-tabs{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}

/* =========================================================
   BATCH 120 — DELIVERY DETAILS CONTROL
   Keeps price / headline lead time visible and moves the
   fuller working-day explanation into an accessible panel.
   ========================================================= */
.delivery-details-toggle{
  min-height:42px;
  margin-top:8px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid #9aa8a9;
  background:#fff;
  color:var(--navy);
  font-family:var(--display);
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}
.delivery-details-toggle span{
  font-family:Arial,sans-serif;
  font-size:15px;
  line-height:1;
}
.delivery-details-toggle:hover,
.delivery-details-toggle:focus-visible,
.delivery-details-toggle.open{
  border-color:var(--navy);
  background:#f5f3ed;
  outline:none;
}
.delivery-details-panel{
  margin-top:7px;
  padding:14px 15px;
  border:1px solid #c6cdca;
  background:#f8f7f2;
  color:#44575d;
  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:1.5;
}
.delivery-details-panel[hidden]{display:none!important}
.delivery-details-panel section+section{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid #d5dad7;
}
.delivery-details-panel strong{
  display:block;
  margin-bottom:4px;
  color:var(--navy);
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.6px;
}
.delivery-details-panel p{margin:4px 0 0}
.delivery-details-working-days{
  margin-top:13px!important;
  padding-top:11px;
  border-top:1px solid #d5dad7;
}

@media(max-width:760px){
  .delivery-details-toggle{
    width:100%;
    min-height:44px;
    margin-top:7px;
    justify-content:flex-start;
    font-size:10px;
  }
  .delivery-details-panel{
    margin-top:6px;
    padding:12px;
    font-size:10px;
    line-height:1.5;
  }
  .delivery-details-panel strong{font-size:10px}
}


/* BATCH 124 — service photo galleries + in-frame navigation */
#services .service-story-image.service-photo-clickable{position:relative;}
#services .service-frame-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:38px;height:44px;border:1px solid rgba(255,255,255,.72);
  background:rgba(7,43,61,.76);color:#fff;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.92;transition:background .18s ease,opacity .18s ease,transform .18s ease;
}
#services .service-frame-prev{left:10px;}
#services .service-frame-next{right:10px;}
#services .service-frame-nav:hover,#services .service-frame-nav:focus-visible{background:rgba(7,43,61,.96);opacity:1;outline:2px solid #a8cf45;outline-offset:2px;}
#services .service-frame-nav:active{transform:translateY(-50%) scale(.96);}
@media(max-width:700px){
  #services .service-frame-nav{width:42px;height:48px;font-size:30px;}
  #services .service-frame-prev{left:8px;}#services .service-frame-next{right:8px;}
}
/* Keep the expanded gallery moving at roughly the same visual pace as before. */
#gallery .gallery-track{animation-duration:108s;}


/* BATCH 125 — service media polish
   Mobile Pump Services uses full-bleed project photography rather than contain,
   eliminating the side gutters introduced by the older pump-specific rule. */
@media(max-width:760px){
  #services article.mobile-service-active .service-story-pump-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    background:transparent!important;
  }
}

/* BATCH 125 — preserve the approved Gallery travel speed after adding service media.
   The Gallery now contains three times as many cards per seamless loop as Batch 123,
   so the animation duration is tripled from 42s to 126s. !important is required
   because the approved Gallery animation shorthand already sets duration !important. */
#gallery .gallery-track{animation-duration:126s!important;}


/* BATCH 131 — catalogue price-divider clearance
   Keep the EX VAT / INC VAT split while giving both values enough inner space
   that the divider cannot touch or cut through the pound sign. */
#grid .price-row > div{
  min-width:0;
  box-sizing:border-box;
  padding:15px 12px!important;
}
#grid .price-row > div + div{
  padding-left:20px!important;
}

@media(max-width:760px){
  #grid .price-row > div{
    padding:11px 5px!important;
  }
  #grid .price-row > div + div{
    padding-left:10px!important;
  }
}

/* =========================================================
   BATCH 134 — VISUAL REGRESSION REPAIR
   Restores contact media, protects multi-digit basket totals and
   removes the forced blank gap above service action buttons.
   ========================================================= */

.basket{
  gap:7px;
}

.basket span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:content-box!important;
  width:max-content!important;
  min-width:20px!important;
  max-width:none!important;
  padding:0 5px!important;
  margin-left:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

.contact-image-v2>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
}

@media (min-width:1001px){
  #services .service-story-concept .concept-service-copy{
    justify-content:center!important;
    padding-bottom:34px!important;
  }

  #services .service-story-concept .concept-actions{
    margin-top:16px!important;
    padding-top:0!important;
    gap:8px!important;
  }
}

@media (max-width:760px){
  .basket span{
    min-width:18px!important;
    padding:0 4px!important;
  }

  #services article.mobile-service-active .concept-actions{
    gap:7px!important;
    margin:14px 0 12px!important;
  }
}