/* ==========================================================================
   AluShade — global styles
   Brand tokens, base element resets, a small 12-column grid + utility layer
   (replacing Bootstrap's grid/utilities so the site ships no framework), and
   a handful of site-wide primitives (buttons, section rhythm, eyebrows).
   Component-specific styles live in components.css; media queries live in
   responsive.css.
   ========================================================================== */

:root{
  /* sampled from the client's own logo and brochure */
  --blue:#25A2D7;
  --blue-bright:#009EE3;
  --blue-dark:#1B87B8;
  --blue-soft:#E8F5FC;
  --navy:#102E48;
  --navy-2:#173B5A;
  --orange:#F3661B;
  --orange-text:#B8430A;
  --orange-hover:#DA560E;
  --orange-soft:#FEF0E8;
  --ink:#102E48;
  --body:#5C6B77;
  --muted:#EEF3F8;
  --line:#DCE5EE;
  --font-body:'Inter',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',"Helvetica Neue",Arial,sans-serif;
  --font-accent:'Instrument Serif',Georgia,"Times New Roman",serif;
  --font-sans:var(--font-body);
  --font-head:var(--font-display);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 20px 60px rgba(16,46,72,.10);
  --shadow-sm:0 10px 30px rgba(16,46,72,.07);

  /* type scale */
  --fs-h1:clamp(2.2rem,4.2vw,3.4rem);
  --fs-h2:clamp(1.95rem,3.5vw,2.95rem);
  --fs-h3:clamp(1.45rem,2.4vw,1.95rem);
  --fs-card:1.18rem;
  --fs-card-sm:1.05rem;
  --fs-lead:1.06rem;
  --lh-tight:1.14;
  --lh-head:1.28;
  /* rhythm */
  --sp-section:100px;
  --sp-section-sm:68px;
  --sp-head:1.1rem;
  --sp-card-head:.6rem;

  /* grid gutter, set by .g-* helpers */
  --gx:1.5rem;
  --gy:0px;
}

/* ---------------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------------- */
*{-webkit-font-smoothing:antialiased;box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--body);font-size:16px;line-height:1.8;background:#fff;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.025em;
  margin:0 0 1rem;
}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
a{color:var(--ink);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--orange)}
img{max-width:100%;height:auto;border:0}
button{font:inherit}
table{border-collapse:collapse}
figure{margin:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
[hidden]{display:none!important}

/* ---------------------------------------------------------------------------
   Layout: container + 12-column flex grid
   A compact stand-in for Bootstrap's grid, sized to the same breakpoints
   (576 / 768 / 992 / 1200) the design was built against. Kept as its own
   small system, named plainly, rather than shipping an external framework.
   --------------------------------------------------------------------------- */
.container{width:100%;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto}
.container-fluid{width:100%;padding-left:15px;padding-right:15px}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}

.row{
  display:flex;flex-wrap:wrap;
  margin-left:calc(var(--gx) / -2);margin-right:calc(var(--gx) / -2);
  row-gap:var(--gy);
}
.row > *{padding-left:calc(var(--gx) / 2);padding-right:calc(var(--gx) / 2);width:100%}

.g-0{--gx:0px;--gy:0px}
.g-2{--gx:.5rem;--gy:.5rem}
.g-3{--gx:1rem;--gy:1rem}
.g-4{--gx:1.5rem;--gy:1.5rem}
.g-5{--gx:3rem;--gy:3rem}

.col{flex:1 0 0%}
.col-6{width:50%}
.col-12{width:100%}

/* small (>=576px) */
.col-sm-6{width:100%}
@media (min-width:576px){.col-sm-6{width:50%}}

/* medium (>=768px) */
.col-md-4,.col-md-6{width:100%}
@media (min-width:768px){
  .col-md-4{width:33.3333%}
  .col-md-6{width:50%}
}

/* large (>=992px) */
.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{width:100%}
@media (min-width:992px){
  .col-lg-2{width:16.6667%}
  .col-lg-3{width:25%}
  .col-lg-4{width:33.3333%}
  .col-lg-5{width:41.6667%}
  .col-lg-6{width:50%}
  .col-lg-7{width:58.3333%}
  .col-lg-8{width:66.6667%}
  .col-lg-9{width:75%}
  .offset-lg-1{margin-left:8.3333%}
  .g-lg-4{--gx:1.5rem;--gy:1.5rem}
  .g-lg-5{--gx:3rem;--gy:3rem}
}

/* ---------------------------------------------------------------------------
   Utilities — the small set actually used across the templates, not a full
   atomic-CSS system.
   --------------------------------------------------------------------------- */
.d-block{display:block}
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-inline-grid{display:inline-grid}
.d-grid{display:grid}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
@media (min-width:768px){.flex-md-row{flex-direction:row}}
.align-items-start{align-items:flex-start}
.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}
.align-items-stretch{align-items:stretch}
@media (min-width:992px){.align-items-lg-center{align-items:center}}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}
.text-center{text-align:center}
@media (min-width:992px){.text-lg-end{text-align:right}}
.text-white{color:#fff}
.gap-2{gap:.5rem}
.gap-3{gap:1rem}
.gap-4{gap:1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-auto{margin-top:auto}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
@media (min-width:992px){.ms-lg-4{margin-left:1.5rem}.mt-lg-0{margin-top:0}}
.h3{font-size:1.75rem;font-family:var(--font-head);color:var(--ink);font-weight:800}
.h4{font-size:1.5rem;font-family:var(--font-head);color:var(--ink);font-weight:800}
.h5{font-size:1.25rem;font-family:var(--font-head);color:var(--ink);font-weight:800}
.h6{font-size:1rem;font-family:var(--font-head);color:var(--ink);font-weight:800}
.pt-0{padding-top:0}
.pt-4{padding-top:1.5rem}
.pt-5{padding-top:3rem}
.pb-2{padding-bottom:.5rem}
.pb-3{padding-bottom:1rem}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.p-0{padding:0}
.p-4{padding:1.5rem}
.px-0{padding-left:0;padding-right:0}
.d-none{display:none}
@media (min-width:768px){.d-md-inline{display:inline}}
@media (min-width:992px){.p-lg-5{padding:3rem}}
.w-100{width:100%}
.h-100{height:100%}
.rounded-3{border-radius:var(--radius)}
.border{border:1px solid var(--line)}
.border-0{border:0}
.shadow-none{box-shadow:none!important}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------------------------------------------------------------------------
   Site-wide primitives
   --------------------------------------------------------------------------- */
.section{padding:var(--sp-section) 0}
.section-sm{padding:var(--sp-section-sm) 0}
.bg-muted{background:var(--muted)}
.bg-navy{background:var(--navy)}
.bg-blue-soft{background:var(--blue-soft)}
.eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans);
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-text);margin-bottom:1rem;
}
.eyebrow.on-dark{color:#fff}
.section-title{font-size:var(--fs-h2);line-height:var(--lh-tight);margin-bottom:var(--sp-head)}
.section-title.mb-0{margin-bottom:0}
.section-title on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.section-title.on-dark{color:#fff}
.on-dark,.on-dark p,.on-dark li{color:rgba(255,255,255,.78)}
.lead-muted{font-size:var(--fs-lead);line-height:1.85;max-width:64ch}
.rule-accent{width:56px;height:3px;background:var(--orange);border-radius:2px}
.text-orange{color:var(--orange-text)}
.text-blue{color:var(--blue-bright)}
.srule{display:block;width:210px;height:16px;margin:0 auto 1.1rem;position:relative}
.srule::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--orange);transform:translateY(-50%);
}
.srule::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;
  background:var(--orange);transform:translate(-50%,-50%);
}
.srule.start{margin-left:0;margin-right:auto}

.btn{
  display:inline-block;
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  border-radius:6px;padding:.9rem 1.9rem;border:2px solid transparent;
  transition:all .25s ease;cursor:pointer;
  position:relative;overflow:hidden;z-index:0;
}
.btn::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;
  background:var(--navy);transition:height .35s cubic-bezier(.2,.7,.3,1);
}
.btn:hover::before{height:100%}
.btn-brand{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-brand:hover{background:var(--orange-hover);border-color:var(--orange-hover);color:#fff;transform:translateY(-2px)}
.btn-ink{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-ink::before{background:var(--orange)}
.btn-ink:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-ghost-ink{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost-ink::before{background:var(--navy)}
.btn-ghost-ink:hover{color:#fff;border-color:var(--navy)}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost-light::before{background:#fff}
.btn-ghost-light:hover{color:var(--navy);border-color:#fff}
.btn-sm{padding:.6rem 1.4rem;font-size:.9rem}
.btn-with-icon{display:inline-flex;align-items:center;justify-content:center;gap:.6rem}
.btn-with-icon svg{flex:none}

.small-print{font-size:.82rem;color:rgba(255,255,255,.5)}
.small-print-ink{font-size:.85rem;color:var(--body)}

@media (max-width:991.98px){
  :root{--sp-section:64px;--sp-section-sm:46px}
}
/* ==========================================================================
   AluShade — components
   Header, footer, hero, cards, product/category/panel/blog layouts, forms,
   modals — every named component on the site. Ported from the original
   design system 1:1; base tokens and the grid live in style.css, and every
   @media block has been lifted out into responsive.css.
   ========================================================================== */

/* One margin down both sides of every page. Bootstrap's 12px is tight and the
   sections that set their own padding drifted away from it. A row's negative
   margin is cancelled by its columns' padding, so content in and out of a row
   lines up on the same edge. */
/* ==========================================================================
   Home page — built to the XD layout
   ========================================================================== */
/* --- header ------------------------------------------------------------- */
/* Sticky on every page. On home it starts transparent over the hero photograph
   and turns solid past it — but it never leaves the top, which it used to do
   because it was absolutely positioned there. */
.site-header{
  position:sticky;top:0;z-index:60;padding:1rem 0;background:#fff;
  box-shadow:0 2px 18px rgba(16,46,72,.07);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header .brand img{width:168px;height:auto;display:block}
.site-header .nav-link{
  font-family:var(--font-sans);font-weight:600;color:var(--ink);
  padding:.5rem .9rem;font-size:.95rem;
}
.site-header .nav-link:hover,.site-header .nav-link.active{color:var(--orange)}
.site-header .btn-sm{padding:.6rem 1.4rem;font-size:.9rem}
.site-header .dropdown-menu{
  border:0;border-top:3px solid var(--orange);border-radius:10px;padding:.45rem;
  margin-top:.2rem;box-shadow:0 18px 44px rgba(16,46,72,.18);
}
.site-header .dropdown-item{border-radius:6px;padding:.55rem .85rem;font-weight:500;font-size:.93rem}
.site-header .dropdown-item:hover{background:var(--muted);color:var(--orange)}
/* transparent state, home hero only */
.site-header.overlay{
  background:transparent;box-shadow:none;padding:1.4rem 0;
}
.site-header.overlay .nav-link{color:#fff}
.site-header.overlay .nav-link:hover,.site-header.overlay .nav-link.active{color:var(--orange)}
.site-header.overlay .navbar-toggler-icon{filter:invert(1)}
/* The scrim is a sibling of the header, not a pseudo-element on it: a negative
   z-index child paints above its own parent's background, which tinted the
   header bar along with the page. Sitting just under the header's z-index puts
   it over the page and beneath the menu. Tapping it closes the menu. */
.nav-scrim{
  position:fixed;inset:0;z-index:59;border:0;padding:0;
  background:rgba(8,20,32,.5);backdrop-filter:blur(2px);
  animation:menu-scrim .25s ease both;
}
@keyframes menu-scrim{from{opacity:0}to{opacity:1}}
/* ---------- back to top --------------------------------------------------- */
.scroll-top{
  position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:46px;border:0;
  border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(243,102,27,.42);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.scroll-top.on{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{background:var(--navy)}
.scroll-top svg{transform:rotate(-90deg)}
.hero-card{
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:var(--radius);padding:2.6rem 2.4rem;max-width:460px;margin-left:auto;
  box-shadow:0 30px 70px rgba(16,46,72,.28);
}
.hero-card h1{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;margin-bottom:1rem}
.hero-card h1 span{display:block}
.hero-card h1 span:last-child{color:var(--orange)}
.hero-card p{font-size:.99rem;margin-bottom:1.6rem}
/* the sheet graphic bridging hero and next section */
.sheet-bridge{position:relative;margin-top:-92px;z-index:5;pointer-events:none}
.sheet-bridge img{display:block;margin:0 auto;width:min(1100px,92%);height:auto}
/* --- category cards ------------------------------------------------------ */
/* The card used to take height:100%, which resolves to the whole column, but
   the kicker sits above it inside that same column. The card was therefore its
   column's height starting 60px down, overhung the bottom by 60px, and dropped
   its Explore link across the next card's heading. It fills what is left of the
   column instead, which keeps the cards level in a row without the overhang. */
.cat-col{display:flex;flex-direction:column}
.cat-col > .cat-card{flex:1 1 auto}
.cat-card{position:relative;height:auto;display:flex;flex-direction:column}
.cat-card .shot{position:relative;height:300px;overflow:hidden;border-radius:var(--radius)}
.cat-card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.cat-card:hover .shot img{transform:scale(1.06)}
/* the orange panel is its own rounded block lifted over the image, and the
   Explore link sits below it rather than inside — as in the XD */
.cat-card .panel{
  background:linear-gradient(165deg,#FF7A2F 0%,var(--orange) 55%,#E0530C 100%);
  color:#fff;padding:1.7rem 1.5rem 1.6rem;border-radius:var(--radius);
  margin:-84px 1rem 0;position:relative;z-index:2;
  box-shadow:0 16px 34px rgba(243,102,27,.28);
}
.cat-card .panel h3{color:#fff;font-size:1.28rem;line-height:1.16;margin-bottom:.65rem}
.cat-card .panel h3 span{display:block}
.cat-card .panel p{color:rgba(255,255,255,.92);font-size:.92rem;margin:0}
.cat-card .panel{flex:1}
.cat-card .explore{
  display:inline-flex;align-items:center;gap:.45rem;margin:1.1rem auto 0;
  color:var(--orange);font-weight:600;font-size:.95rem;
}
.cat-card .explore:hover{color:var(--navy)}
.cat-kicker{
  text-align:center;font-family:var(--font-head);font-weight:800;
  font-size:1.12rem;letter-spacing:.01em;color:var(--ink);
  margin-bottom:1rem;display:block;
}
.cat-kicker::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--orange);margin:.55rem auto 0;
}
/* Stacked on a phone, the gap between two cards was 24px while the gap from a
   card's own heading down to its image was 16px. With the two almost equal
   there was nothing to say where one card ended and the next began, and the
   Explore link read as if it belonged to the heading below it. The heading now
   binds tightly to its own card and the cards stand well apart. */
/* --- navy stat panel ----------------------------------------------------- */
.stat-panel{background:var(--navy);color:#fff;border-radius:var(--radius);padding:2.4rem 2rem}
.stat-panel h4{color:var(--orange);font-size:1.02rem;margin-bottom:.3rem}
.stat-panel p{color:rgba(255,255,255,.74);font-size:.92rem;margin-bottom:1.5rem}
.stat-panel > div:last-child p{margin-bottom:0}
.pill-stat{
  display:inline-flex;flex-direction:column;background:var(--blue-soft);
  border-radius:10px;padding:.85rem 1.3rem;
}
.pill-stat .n{font-family:var(--font-sans);font-weight:700;font-size:1.5rem;color:var(--navy);line-height:1}
.pill-stat .l{font-size:.8rem;color:var(--body);margin-top:.15rem}
/* --- why choose panel ---------------------------------------------------- */
.why-panel{background:var(--navy);border-radius:var(--radius);padding:2.6rem 2.2rem;color:#fff}
.why-item{padding-left:1.1rem;border-left:3px solid var(--orange);margin-bottom:1.6rem}
.why-item:last-child{margin-bottom:0}
.why-item h4{color:var(--orange);font-size:1.02rem;margin-bottom:.3rem}
.why-item p{color:rgba(255,255,255,.75);font-size:.92rem;margin:0}
/* --- process ------------------------------------------------------------- */
.step-card{background:var(--blue-soft);border-radius:var(--radius);padding:2.4rem 1.4rem 1.6rem;text-align:center;height:100%;position:relative}
.step-card .n{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-family:var(--font-sans);font-weight:700;
  border:5px solid #fff;
}
.step-card h4{color:var(--orange);font-size:1.02rem;margin-bottom:.5rem}
.step-card p{font-size:.9rem;margin:0}
/* --- comparison table ---------------------------------------------------- */
.cmp{border-radius:var(--radius);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;margin:0}
.cmp th,.cmp td{padding:.95rem 1.3rem;font-size:.93rem;border-bottom:1px solid rgba(255,255,255,.08)}
.cmp thead th{font-family:var(--font-sans);font-weight:700;font-size:1rem}
/* The head is one continuous band so it reads as a title row, with the
   column colours picking up again in the body beneath it. AluShade sits in
   the middle column, so the accent stays with it. */
.cmp thead th{background:var(--navy-2)}
.cmp thead th:first-child{color:#fff}
.cmp thead th:nth-child(2){color:var(--orange)}
.cmp thead th:last-child{color:rgba(255,255,255,.78)}
.cmp thead th{
  padding-top:1.15rem;padding-bottom:1.15rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  letter-spacing:.04em;
}
.cmp tbody td:first-child{background:var(--blue-soft);color:var(--ink);font-weight:500;border-bottom-color:#fff}
.cmp tbody td:nth-child(2){background:var(--navy-2);color:var(--orange);font-weight:600}
.cmp tbody td:last-child{background:var(--navy);color:rgba(255,255,255,.7)}
/* --- testimonials -------------------------------------------------------- */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.7rem;height:100%}
.tcard .stars{color:#F5A623;letter-spacing:.14em;margin-bottom:.9rem}
.tcard p.q{font-size:.94rem;margin-bottom:1.3rem}
.tcard .who{display:flex;align-items:center;gap:.8rem}
.tcard .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tcard .who b{display:block;color:var(--ink);font-size:.94rem}
.tcard .who span{font-size:.82rem}
/* --- post list ----------------------------------------------------------- */
.post-row{border-top:1px solid var(--line);padding-top:1.6rem}
.post-row .meta{
  font-family:var(--font-sans);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem;
}
.post-row .meta span{color:var(--body);font-weight:500;letter-spacing:0;text-transform:none;font-size:.8rem}
.post-row h3{font-size:1.06rem;margin-bottom:.5rem}
.post-row p{font-size:.92rem;margin:0}
.post-row .shot{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/10;margin-bottom:1.1rem}
.post-row .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-row:hover .shot img{transform:scale(1.05)}
/* --- footer -------------------------------------------------------------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.72);padding:80px 0 0;margin-top:0}
.site-footer h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.25}
.site-footer .sub{color:var(--blue)}
.site-footer h4{
  color:#fff;font-size:1.02rem;font-family:var(--font-head);font-weight:700;
  margin-bottom:1.3rem;padding-bottom:.6rem;position:relative;letter-spacing:.005em;
}
.site-footer h4::after{
  content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;
  background:var(--orange);border-radius:2px;
}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--orange)}
.footer-top{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:2.6rem}
.footer-links,.footer-contact{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.35rem}
.footer-links a{display:inline-block;padding:.34rem 0}
/* two columns halve the tallest block in the footer, so the whole band is
   shorter without dropping a single link */
.footer-links.two-col{columns:2;column-gap:2rem}
.footer-links.two-col li{break-inside:avoid;-webkit-column-break-inside:avoid}
.footer-contact li{display:flex;gap:.75rem;margin-bottom:.9rem;font-size:.93rem}
.footer-contact svg{flex:none;margin-top:.3rem;color:var(--orange)}
.footer-offices{border-top:1px solid rgba(255,255,255,.14)}
.footer-offices .role{font-family:var(--font-sans);font-weight:700;color:var(--orange);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.3rem}
.footer-offices .state{font-family:var(--font-sans);font-weight:700;color:#fff;font-size:1rem;margin-bottom:.4rem}
.footer-offices .addr{font-size:.88rem;line-height:1.6;margin:0;color:rgba(255,255,255,.66)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding:1.4rem 0;font-size:.86rem}
.small-print{font-size:.82rem;color:rgba(255,255,255,.5)}
/* ---------- section rule (orange line with a dot) ------------------------
   The divider used above every section heading in the XD. Drawn in CSS rather
   than shipped as a PNG so it stays crisp and recolours with the brand.
   ------------------------------------------------------------------------ */
.srule{display:block;width:210px;height:16px;margin:0 auto 1.1rem;position:relative}
.srule::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--orange);transform:translateY(-50%);
}
.srule::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;
  background:var(--orange);transform:translate(-50%,-50%);
}
.srule.start{margin-left:0;margin-right:auto}
/* Below a tablet every section head is centred. The two-column sections set
   their heads to the left, which is right beside a picture but reads as a
   different treatment once the columns stack into one. */
/* ---------- roof sheet bridge + its shadow ------------------------------- */
.sheet-bridge{position:relative;margin-top:-104px;z-index:5;pointer-events:none;padding-bottom:34px}
.sheet-bridge img{display:block;margin:0 auto;width:min(1180px,94%);height:auto;position:relative;z-index:2}
.sheet-bridge::after{
  content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:min(1180px,94%);height:40px;z-index:1;border-radius:50%;
  background:radial-gradient(ellipse 50% 52% at 50% 40%,
    rgba(6,14,22,.66) 0%, rgba(6,14,22,.36) 44%, rgba(6,14,22,0) 78%);
  filter:blur(9px);
}
/* ---------- about band ---------------------------------------------------
   Three columns meeting edge to edge with no gutters: photograph, navy points,
   then the light-blue panel carrying the copy. All three run the full height of
   the band, so no column sits in white space.
   ------------------------------------------------------------------------ */
.about-band{position:relative;overflow:hidden}
/* 640px was the old three-column band's height. With the head lifted out to
   its own centred block the row holds less, so the minimum left a gap between
   the heading and the copy rather than filling it. */
.about-band .row{min-height:0}
.about-band .col-lg-2,.about-band .col-lg-3,.about-band .col-lg-7{display:flex}
.about-shot{position:relative;width:100%;min-height:100%}
.about-points{
  position:relative;background:var(--navy);color:#fff;width:100%;
  padding:3.2rem 2rem;display:flex;flex-direction:column;justify-content:center;
}
.about-points h4{color:var(--blue-bright);font-size:1.12rem;margin-bottom:.4rem}
.about-points p{color:rgba(255,255,255,.76);font-size:.86rem;line-height:1.65;margin-bottom:1.6rem}
.about-points > div:last-of-type p{margin-bottom:0}
/* the orange tab on the panel's edge, from the design */
.about-tab{
  position:absolute;right:-19px;top:50%;transform:translateY(-50%);
  width:38px;height:190px;border-radius:22px;background:var(--orange);z-index:3;
}
.about-copy{
  background:var(--blue-soft);width:100%;
  padding:3.4rem clamp(1.6rem,5vw,4.4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.about-render{max-width:min(430px,72%);height:auto;margin:.4rem 0 1.8rem}
.about-foot{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.about-foot .stat{
  font-size:.92rem;color:var(--orange);font-weight:600;line-height:1.35;
  padding-right:1.6rem;border-right:1px solid rgba(16,46,72,.18);
}
.about-foot .stat:nth-of-type(2){border-right:0}
.about-foot .stat b{font-size:1.15rem;font-weight:700}
/* ---------- why choose ---------------------------------------------------
   Text block on plain white with the photograph beneath it, and the points
   panel alongside. Previously a full-bleed image behind a scrim, which buried
   the photograph and made the band far taller than the design.
   ------------------------------------------------------------------------ */
.why-band{background:#fff}
.why-shot{border-radius:var(--radius);overflow:hidden;margin-top:1.8rem}
.why-shot img{width:100%;height:290px;object-fit:cover;display:block}
.why-box{background:var(--navy);border-radius:var(--radius);padding:2rem 1.8rem;color:#fff}
.why-box .why-item{padding-left:1rem;border-left:3px solid var(--blue-bright);margin-bottom:1.15rem}
.why-box .why-item:last-child{margin-bottom:0}
.why-box h4{color:var(--blue-bright);font-size:.95rem;margin-bottom:.2rem}
.why-box p{color:rgba(255,255,255,.74);font-size:.85rem;margin:0;line-height:1.6}
/* ---------- comparison: rounded block blended across two grounds ---------- */
.cmp-band{position:relative;overflow:hidden}
.cmp-band::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:var(--blue-soft);z-index:0;
}
.cmp-band > .container{position:relative;z-index:1}
.cmp{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(16,46,72,.18)}
.cmp table{border-radius:18px;overflow:hidden}
/* ==========================================================================
   Ported from the current site so the inner pages render unchanged.
   Layout, buttons, header, hero, category cards and footer are deliberately
   NOT ported — the rebuild defines its own and those must win.
   ========================================================================== */
/* ---------- inner page banner ------------------------------------------- */
.page-banner{position:relative;background:var(--navy);padding:84px 0 76px;color:#fff;overflow:hidden}
.page-banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.page-banner > .container{position:relative;z-index:2}
.page-banner h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:.6rem}
.breadcrumb-brand{font-size:.92rem;color:rgba(255,255,255,.66)}
.breadcrumb-brand a{color:rgba(255,255,255,.88)}
.breadcrumb-brand a:hover{color:var(--orange)}
.breadcrumb-brand .sep{margin:0 .5rem;color:var(--orange)}
/* ---------- product cards (large image, generous padding) --------------- */
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* fixed height, not aspect-ratio: the renders are a mix of portrait and
   landscape, and a ratio box lets a tall one stretch its whole card */
.product-card .thumb{
  height:270px;display:grid;place-items:center;background:var(--muted);padding:1.8rem;overflow:hidden;
}
.product-card .thumb img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s ease;
}
.product-card:hover .thumb img{transform:scale(1.05)}
.product-card .body{padding:2rem 1.9rem 2.1rem;display:flex;flex-direction:column;flex:1}
.product-card .cat{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:.5rem;display:block;
}
.product-card h3{font-size:1.3rem;margin-bottom:.9rem}
.product-card .link-arrow{margin-top:auto;font-size:.93rem}
.spec-list{list-style:none;padding:0;margin:0 0 1.3rem}
.spec-list li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;font-size:.9rem;border-bottom:1px dashed var(--line)}
.spec-list li:last-child{border-bottom:0}
.spec-list .k{color:var(--body);font-weight:600}
.spec-list .v{color:var(--ink);text-align:right}
/* ---------- colour swatch key ------------------------------------------- */
.swatch-group h5{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
  font-family:var(--font-display),sans-serif;margin-bottom:.8rem;
}
.swatch{display:flex;align-items:center;gap:.6rem;font-size:.88rem;margin-bottom:.5rem}
.swatch i{width:22px;height:22px;border-radius:5px;border:1px solid rgba(16,46,72,.16);flex:none;display:block}
/* ---------- category tabs ------------------------------------------------ */
.cat-tab{
  border:0;background:transparent;text-align:center;padding:0;transition:all .25s ease;
  font-family:var(--font-display),sans-serif;font-weight:600;color:var(--ink);
}
.cat-tab .ico{
  width:74px;height:74px;border-radius:50%;background:var(--blue-bright);color:#fff;
  display:grid;place-items:center;margin:0 auto .9rem;transition:all .25s ease;
}
.cat-tab .lbl{display:block;font-size:1.02rem;padding-bottom:.7rem;border-bottom:3px solid transparent}
.cat-tab:hover .ico{transform:translateY(-4px)}
.cat-tab.active{color:var(--blue-bright)}
.cat-tab.active .lbl{border-bottom-color:var(--blue-bright)}
/* ---------- feature / icon lists ---------------------------------------- */
.feature-item{display:flex;gap:1.2rem;align-items:flex-start}
.feature-icon{flex:none;width:58px;height:58px;border-radius:12px;background:var(--orange);display:grid;place-items:center;color:#fff}
.feature-icon.soft{background:var(--blue-soft);color:var(--blue-bright)}
.feature-icon.blue{background:var(--blue-bright);color:#fff}
.feature-item h4{font-size:1.1rem;margin-bottom:.4rem}
.feature-item p{font-size:.96rem;margin:0}
.on-dark .feature-icon.soft{background:rgba(255,255,255,.12);color:#fff}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem 2.1rem;height:100%}
.info-card .thumb{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/11;margin-bottom:1.6rem}
.info-card .thumb img{width:100%;height:100%;object-fit:cover}
.info-card h3{font-size:1.22rem;margin-bottom:.7rem}
.info-card p{font-size:.96rem;margin-bottom:1.3rem}
/* ---------- comparison table -------------------------------------------- */
.compare-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.table-compare{margin:0;width:100%;border-collapse:separate;border-spacing:0}
.table-compare th,.table-compare td{padding:1.15rem 1.4rem;vertical-align:middle;border-bottom:1px solid var(--line)}
.table-compare thead th{font-family:var(--font-display),sans-serif;font-size:1rem;font-weight:700;color:#fff;background:var(--navy);border-bottom:0}
.table-compare thead th.col-alushade{background:var(--orange)}
.table-compare thead th.col-criteria{background:var(--navy-2);width:34%}
.table-compare tbody th{font-family:var(--font-display),sans-serif;font-size:.95rem;font-weight:700;color:var(--ink);background:var(--muted);width:34%}
.table-compare td.old{color:var(--body)}
.table-compare td.new{color:var(--ink);font-weight:600;background:rgba(243,102,27,.05)}
.table-compare tbody tr:last-child th,.table-compare tbody tr:last-child td{border-bottom:0}
.cmp-ico{flex:none;width:20px;height:20px;margin-right:.6rem}
.cmp-cell{display:flex;align-items:center}
/* ---------- testimonials ------------------------------------------------- */
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 2rem;height:100%}
.testimonial .stars{color:#F5A623;letter-spacing:.15em;font-size:1rem;margin-bottom:1rem}
.testimonial p.quote{font-size:.98rem;margin-bottom:1.5rem}
.testimonial .who{display:flex;align-items:center;gap:.9rem}
.testimonial .lead-in{
  font-family:var(--font-display),sans-serif;font-weight:700;color:var(--ink);
  font-size:1.02rem;margin-bottom:.6rem;
}
.testimonial .who .av{
  width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--blue-soft);
}
.testimonial .who .n{font-weight:600;color:var(--ink);display:block;line-height:1.3}
.testimonial .who .r{font-size:.84rem;display:block}
/* ---------- warranty seal ------------------------------------------------ */
.seal{width:132px;height:132px;flex:none}
.seal-sm{width:96px;height:96px}
/* ---------- stats / process / video / marquee (retained pages) ---------- */
.stat{text-align:center}
.stat .num{font-family:var(--font-display),sans-serif;font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);color:#fff;line-height:1}
.stat .label{color:rgba(255,255,255,.68);font-size:.92rem;margin-top:.4rem}
.stat.on-light .num{color:var(--ink)}
.stat.on-light .label{color:var(--body)}
.process-step{text-align:center;padding:0 .5rem}
.process-step .step-ring{width:96px;height:96px;margin:0 auto 1.4rem;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;background:#fff}
.process-step .step-ring span{width:72px;height:72px;border-radius:50%;background:var(--muted);display:grid;place-items:center;font-family:var(--font-display),sans-serif;font-weight:700;font-size:1.5rem;color:var(--ink);transition:all .3s ease}
.process-step:hover .step-ring span{background:var(--orange);color:#fff}
.process-step h4{font-size:1.12rem;margin-bottom:.5rem}
.process-step p{font-size:.94rem;margin:0}
.video-frame{aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;background:#000}
.play-btn{width:92px;height:92px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;margin:0 auto;border:0;animation:pulse 2.4s infinite}
.play-btn:hover{background:#fff;color:var(--orange)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,102,27,.55)}70%{box-shadow:0 0 0 26px rgba(243,102,27,0)}100%{box-shadow:0 0 0 0 rgba(243,102,27,0)}}
.marquee{background:var(--orange);overflow:hidden;padding:.9rem 0}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:scrollx 26s linear infinite;width:max-content}
.marquee-track span{font-family:var(--font-display),sans-serif;font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;gap:3rem}
.marquee-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- profile / project / post cards (retained pages) ------------- */
.profile-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.profile-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.profile-card .thumb{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--muted)}
.profile-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.profile-card:hover .thumb img{transform:scale(1.06)}
.profile-card .num{position:absolute;left:0;bottom:0;background:var(--orange);color:#fff;font-family:var(--font-display),sans-serif;font-weight:700;font-size:.88rem;padding:.4rem .85rem;border-radius:0 8px 0 0}
.profile-card .body{padding:1.9rem 1.7rem 2rem;display:flex;flex-direction:column;flex:1}
.profile-card h3{font-size:1.24rem;margin-bottom:.6rem}
.profile-card p{font-size:.95rem;margin-bottom:1.2rem}
.profile-card .link-arrow{margin-top:auto;font-size:.92rem}
.filter-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:100px;padding:.6rem 1.5rem;font-family:var(--font-display),sans-serif;font-weight:600;font-size:.95rem;transition:all .25s ease}
.filter-btn:hover{border-color:var(--navy)}
.filter-btn.active{background:var(--orange);border-color:var(--orange);color:#fff}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .thumb img{transform:scale(1.06)}
.post-card .body{padding:1.8rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:.82rem;color:var(--body);margin-bottom:.7rem}
.post-meta .tag{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
.post-card h3{font-size:1.16rem;margin-bottom:.6rem}
.post-card p{font-size:.94rem;margin-bottom:1.1rem}
.post-card .link-arrow{margin-top:auto;font-size:.92rem}
.post-body h2{font-size:1.6rem;margin:2.2rem 0 .9rem}
.post-body h3{font-size:1.25rem;margin:1.8rem 0 .7rem}
.post-body p{margin-bottom:1.1rem}
.blockquote-brand{border-left:4px solid var(--orange);background:var(--muted);padding:1.4rem 1.6rem;border-radius:0 8px 8px 0;font-size:1.05rem;color:var(--ink);font-weight:500;margin:1.8rem 0}
.sidebar-card{background:var(--muted);border-radius:var(--radius);padding:1.8rem}
.sidebar-card h4{font-size:1.05rem;margin-bottom:1rem}
.sidebar-list{list-style:none;padding:0;margin:0}
.sidebar-list li{border-bottom:1px solid var(--line)}
.sidebar-list li:last-child{border-bottom:0}
.sidebar-list a{display:block;padding:.65rem 0;font-size:.94rem;font-weight:500}
/* ---------- spec table / lists / accordion ------------------------------ */
.spec-table{width:100%;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec-table th,.spec-table td{padding:1rem 1.3rem;border-bottom:1px solid var(--line);font-size:.95rem}
.spec-table th{background:var(--muted);color:var(--ink);font-weight:600;width:44%;font-family:var(--font-display),sans-serif}
.spec-table td{color:var(--body)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem 0;font-size:.98rem}
.check-list li svg{flex:none;margin-top:.35rem}
.check-list.on-dark li{color:rgba(255,255,255,.8)}
.dodont{border-radius:var(--radius);padding:2.2rem;height:100%}
.dodont.do{background:#F1F8F4;border:1px solid #D6E9DE}
.dodont.dont{background:#FEF2EC;border:1px solid #F8DACB}
.dodont h3{font-size:1.2rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.accordion-brand .accordion-item{border:1px solid var(--line);border-radius:var(--radius-sm)!important;margin-bottom:1rem;overflow:hidden}
.accordion-brand .accordion-button{font-family:var(--font-display),sans-serif;font-weight:600;color:var(--ink);font-size:1.05rem;padding:1.25rem 1.5rem;background:#fff}
.accordion-brand .accordion-button:not(.collapsed){background:var(--muted);color:var(--orange);box-shadow:none}
.accordion-brand .accordion-button:focus{box-shadow:none;border-color:var(--line)}
.accordion-brand .accordion-body{padding:0 1.5rem 1.5rem;font-size:.98rem}
.cert-badge{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.2rem;text-align:center;height:100%;transition:all .3s ease}
.cert-badge:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.cert-badge img{width:82px;height:82px;margin-bottom:1rem}
.cert-badge h4{font-size:1.02rem;margin-bottom:.3rem}
.cert-badge p{font-size:.86rem;margin:0}
/* ---------- forms -------------------------------------------------------- */
.form-control,.form-select{border:1px solid var(--line);border-radius:8px;padding:.9rem 1.1rem;font-size:.97rem;color:var(--ink);background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,102,27,.12)}
.form-label{font-family:var(--font-display),sans-serif;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:.45rem}
.form-note{font-size:.84rem;color:var(--body)}
/* ---------- scroll reveal ------------------------------------------------
   Only elements the script has actively hidden carry .reveal-hidden. Nothing is
   hidden by default, so a failure in the animation path can never blank a
   section — the worst case is no animation.
   ------------------------------------------------------------------------ */
/* The hidden state has to hold the animation's STARTING transform, not just
   opacity. Without it the element sits at its natural position while hidden and
   snaps to translateY(52px) the instant the animation begins — which is the
   flick you see as a section comes up. */
.reveal-hidden{opacity:0;transform:translateY(52px)}
.reveal-hidden[data-anim="zoom"]{transform:scale(.92)}
/* only while it is actually waiting to move */
.reveal-hidden{will-change:opacity,transform}
/* ---------- brochure download dialog ------------------------------------ */
.brochure-overlay{
  position:fixed;inset:0;z-index:1080;display:grid;place-items:center;padding:1.25rem;
  background:rgba(16,46,72,.62);backdrop-filter:blur(3px);
  animation:brFade .22s ease both;
}
.brochure-dialog{
  position:relative;width:100%;max-width:440px;background:#fff;border-radius:var(--radius);
  padding:2.4rem 2.2rem;box-shadow:0 30px 80px rgba(16,46,72,.32);
  animation:brRise .3s cubic-bezier(.16,1,.3,1) both;
  max-height:calc(100dvh - 2.5rem);overflow-y:auto;
}
.brochure-close{
  position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--muted);color:var(--ink);display:grid;place-items:center;transition:all .2s ease;
}
.brochure-close:hover{background:var(--orange);color:#fff}
@keyframes brFade{from{opacity:0}to{opacity:1}}
@keyframes brRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
/* ---------- About page devices ------------------------------------------
   Adapted from the Roofnox about-page layout the client picked out: an offset
   image pair, a badge card overlapping a photo, a split dark band, and oversized
   outlined figures. Brand palette and type throughout.
   ------------------------------------------------------------------------ */
/* offset image pair */
.img-pair{position:relative;padding-bottom:70px}
.img-pair .a{width:78%;border-radius:var(--radius);display:block;object-fit:cover}
.img-pair .b{
  position:absolute;right:0;bottom:0;width:56%;border-radius:var(--radius);
  border:8px solid #fff;box-shadow:var(--shadow);object-fit:cover;
}
/* statement strip */
.statement{border-top:1px solid var(--line);padding-top:2.6rem;margin-top:2.6rem}
.statement p{
  font-family:var(--font-display),sans-serif;font-weight:600;color:var(--ink);
  font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.5;margin:0;
}
.statement img{border-radius:var(--radius-sm);object-fit:cover;width:100%;height:150px}
/* split band: photo one side, navy panel the other */
.split-band{background:var(--navy)}
.split-band .media{position:relative;min-height:460px}
.split-band .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-band .badge-card{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:var(--orange);color:#fff;padding:1.9rem 1.5rem;max-width:220px;text-align:center;z-index:2;
}
.split-band .badge-card .n{
  display:block;font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:2.1rem;line-height:1;margin-bottom:.35rem;
}
.split-band .badge-card p{margin:0;font-size:.94rem;line-height:1.45;color:#fff}
.split-band .panel{padding:5rem 3.4rem}
/* oversized outlined figures */
.figures{
  position:relative;isolation:isolate;overflow:hidden;
  background-image:url('../images/about-story.jpg');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center 38%;
  background-size:cover;
}
.figures .lip{
  position:absolute;left:0;right:0;top:0;height:26px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,46,72,.16) 0%, rgba(16,46,72,0) 100%);
}
/* the outlined figures are strokes, not solid type, so the wash under them has
   to be heavier than the one on the home page */
.figures .veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.93) 55%,
    rgba(255,255,255,.90) 100%);
}
.figures .blueprint{
  position:absolute;right:-40px;bottom:0;width:min(46%,640px);opacity:.10;
  pointer-events:none;user-select:none;z-index:0;   /* after .veil, so on top of it */
}
.figures > .container{position:relative;z-index:1}
.figure-stat{margin-bottom:2.6rem}
.figure-stat:last-child{margin-bottom:0}
.figure-stat .n{
  font-family:var(--font-display),sans-serif;font-weight:800;line-height:.9;
  font-size:clamp(3.4rem,6.6vw,6.4rem);  /* 8vw orphaned the unit onto line 2 at ~1024 */
  color:transparent;-webkit-text-stroke:2px var(--navy);
  display:block;letter-spacing:-.03em;
}
.figure-stat .l{
  display:block;margin-top:.5rem;color:var(--ink);font-weight:600;font-size:1rem;
}
@supports not ((-webkit-text-stroke: 2px var(--navy))){
  .figure-stat .n{color:var(--navy)}
}
/* ---------- blueprint section backgrounds -------------------------------
   Faint technical-drawing washes, recoloured from near-white line art to brand
   navy so they read on a light section instead of disappearing into it.
   ------------------------------------------------------------------------ */
.bp-wide, .bp-blog{position:relative;overflow:hidden}
.bp-wide::before, .bp-blog::before{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none;
}
.bp-wide::before{
  background-image:url('../images/bg-blueprint-wide.png');
  background-size:cover;background-position:center;opacity:.32;
}
.bp-blog::before{
  background-image:url('../images/bg-blueprint-blog.png');
  background-size:auto 118%;background-position:right bottom;opacity:.16;
}
.bp-wide > .container, .bp-blog > .container{position:relative;z-index:1}
/* ---------- brand watermark feature block -------------------------------- */
.watermark-block{position:relative;overflow:hidden}
.watermark-block .brand-watermark{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:var(--font-display),sans-serif;font-weight:800;
  font-size:clamp(5rem,17vw,15rem);line-height:1;letter-spacing:-.04em;
  color:rgba(16,46,72,.055);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;
}
.watermark-block > .container{position:relative;z-index:1}
.wm-point{display:flex;gap:1rem;align-items:flex-start;margin-bottom:2.4rem}
.wm-point:last-child{margin-bottom:0}
.wm-point .ico{
  flex:none;width:54px;height:54px;border-radius:12px;border:2px solid var(--orange);
  color:var(--orange);display:grid;place-items:center;background:#fff;
}
.wm-point h4{font-size:1.06rem;margin-bottom:.3rem}
/* the fill orange is 3.1:1 on white, so accented body copy takes the darker one */
.wm-point .hl{color:var(--orange-text);font-weight:800}
/* the fifth point sits under the sheet, centred with it */
.wm-point-under{margin-top:1.6rem;margin-bottom:0}
/* sits under the block without pushing into it */
.why-terms{
  margin:1.4rem 0 0;text-align:center;font-size:.82rem;color:var(--body);opacity:.85;
}
.wm-point p{font-size:.94rem;margin:0}
/* ---------- closing CTA band --------------------------------------------
   Plain tint, no blueprint: it sits directly after the blog section, and two
   textured bands in a row fought each other.
   ------------------------------------------------------------------------ */
.cta-plain{background:var(--blue-soft)}
/* ==========================================================================
   Mobile
   ========================================================================== */
/* Bootstrap rows pull negative margins equal to half the gutter. With g-5 that
   is -24px a side against a container's 12px padding, so any g-5 row sitting
   directly in a container overflows the viewport on phones. Capping the gutter
   below the lg breakpoint fixes it everywhere at once. */
/* the watermark is deliberately oversized; keep it from widening the page */
.watermark-block{contain:paint}
/* ---------- dark-panel text ---------------------------------------------
   Missed in the original port: headings inside .on-dark were falling back to
   --ink, which is navy, so they were invisible on the navy panels.
   ------------------------------------------------------------------------ */
.eyebrow.on-dark{color:#fff}
.section-title.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark,.on-dark p,.on-dark li{color:rgba(255,255,255,.78)}
.rule-accent{width:56px;height:3px;background:var(--orange);border-radius:2px}
.text-orange{color:var(--orange-text)}
.text-blue{color:var(--blue-bright)}
.bg-blue-soft{background:var(--blue-soft)}
/* ==========================================================================
   Product detail — catalogue layout
   ========================================================================== */
.pd-top{padding-top:70px}
.pd-stage{
  position:relative;display:grid;place-items:center;height:440px;padding:1.5rem;
}
.pd-stage .blob{
  position:absolute;inset:4%;border-radius:47% 53% 45% 55% / 51% 45% 55% 49%;
  background:radial-gradient(circle at 36% 32%, #EAF1F8 0%, #F4F8FB 52%, #FBFCFE 100%);
}
.pd-stage img{
  position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;filter:drop-shadow(0 26px 46px rgba(16,46,72,.2));
}
.pd-thumbs{display:flex;gap:.7rem;margin-top:.9rem}
.pd-thumb{
  flex:1;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--muted);
  padding:0;height:82px;cursor:pointer;transition:border-color .2s ease,transform .2s ease;
}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{transform:translateY(-2px)}
.pd-thumb.on{border-color:var(--orange)}
.pd-cat{
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-bright);margin-bottom:.5rem;
}
.pd-cat a{color:inherit}
.pd-cat a:hover{color:var(--orange)}
.pd-name{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:.9rem}
.pd-best{color:var(--ink);font-weight:600;font-size:.96rem;margin-bottom:1.6rem}
.pd-block{border-top:1px solid var(--line);padding-top:1.2rem;margin-bottom:1.2rem}
.pd-label{
  font-weight:700;color:var(--ink);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.7rem;
}
.pd-label span{
  color:var(--orange);font-weight:600;letter-spacing:0;text-transform:none;font-size:.92rem;
  margin-left:.4rem;
}
.pd-swatches{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.7rem}
.pd-swatch{
  width:34px;height:34px;border-radius:8px;border:2px solid rgba(16,46,72,.16);
  cursor:pointer;padding:0;transition:transform .18s ease,box-shadow .18s ease;
}
.pd-swatch:hover{transform:translateY(-2px)}
.pd-swatch.on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(243,102,27,.22)}
.pd-options{display:flex;flex-wrap:wrap;gap:.6rem}
.pd-option{
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:.55rem 1.1rem;
  font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;transition:all .2s ease;
}
.pd-option:hover{border-color:var(--navy)}
.pd-option.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pd-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
/* tabs */
.pd-tabs{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.pd-tab{
  border:0;background:transparent;padding:.9rem 1.4rem;font-weight:600;font-size:.96rem;
  color:var(--body);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;
}
.pd-tab:hover{color:var(--ink)}
.pd-tab.on{color:var(--orange);border-bottom-color:var(--orange)}
.pd-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.pd-downloads{list-style:none;padding:0;margin:0}
.pd-downloads li{border-bottom:1px solid var(--line)}
.pd-downloads li:last-child{border-bottom:0}
.pd-downloads a{display:flex;align-items:center;gap:.7rem;padding:.9rem 0;font-weight:600;font-size:.96rem}
.pd-downloads a:hover{color:var(--orange)}
/* related */
.pd-related{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;height:100%;
  transition:transform .3s ease,box-shadow .3s ease;
}
.pd-related:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pd-related .shot{display:grid;place-items:center;height:190px;background:var(--muted);padding:1.4rem}
.pd-related .shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-related .body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.pd-related strong{color:var(--ink);font-size:1.08rem;margin-bottom:.45rem}
.pd-related em{font-style:normal;font-size:.9rem;margin-bottom:1rem}
.pd-related .link-arrow{margin-top:auto;font-size:.9rem}
/* ---------- roof maintenance cards --------------------------------------- */
.care-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:2.2rem 1.7rem 1.8rem;height:100%;position:relative;
}
.care-card .n{
  position:absolute;top:-18px;left:1.7rem;width:44px;height:44px;border-radius:12px;
  background:var(--orange);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:1rem;box-shadow:0 8px 20px rgba(243,102,27,.32);
}
.care-card h3{font-size:1.12rem;margin:.6rem 0 1rem}
.care-card ul{list-style:none;padding:0;margin:0}
.care-card li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;padding:.4rem 0}
.care-card li svg{flex:none;margin-top:.3rem;color:var(--orange)}
/* ---------- quote dialog -------------------------------------------------- */
.quote-overlay{
  position:fixed;inset:0;z-index:1090;display:grid;place-items:center;padding:1.25rem;
  background:rgba(16,46,72,.62);backdrop-filter:blur(3px);animation:qFade .22s ease both;
}
.quote-dialog{
  position:relative;width:100%;max-width:540px;background:#fff;border-radius:var(--radius);
  padding:2.4rem 2.2rem;box-shadow:0 30px 80px rgba(16,46,72,.34);
  animation:qRise .3s cubic-bezier(.16,1,.3,1) both;
  max-height:calc(100dvh - 2.5rem);overflow-y:auto;
}
.quote-close{
  position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--muted);color:var(--ink);display:grid;place-items:center;transition:all .2s ease;
}
.quote-close:hover{background:var(--orange);color:#fff}
.quote-context{
  background:var(--blue-soft);border-radius:8px;padding:.6rem .9rem;font-size:.9rem;
  color:var(--ink);margin:0;
}
@keyframes qFade{from{opacity:0}to{opacity:1}}
@keyframes qRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
/* ==========================================================================
   Category page
   ========================================================================== */
.cat-rail{position:sticky;top:96px}
.cat-list{list-style:none;padding:0;margin:0 0 1.6rem}
.cat-list li{margin-bottom:.6rem}
.cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--muted);border-radius:10px;padding:.95rem 1.2rem;
  font-weight:600;font-size:.96rem;color:var(--ink);transition:all .22s ease;
}
.cat-list a:hover{background:var(--blue-soft);color:var(--ink)}
.cat-list a.on{background:var(--orange);color:#fff}
.cat-list a svg{flex:none;opacity:.6}
.cat-call{
  background:linear-gradient(165deg,#FF7A2F 0%,var(--orange) 55%,#E0530C 100%);
  border-radius:var(--radius);padding:2rem 1.6rem;text-align:center;color:#fff;
}
.cat-call .ico{
  width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;margin:0 auto 1.1rem;color:#fff;
}
.cat-call .lead{
  font-weight:700;font-size:1.22rem;line-height:1.3;margin-bottom:1rem;color:#fff;
}
.cat-call .num{font-size:.86rem;color:rgba(255,255,255,.85);margin:0;line-height:1.7}
.cat-call .num a{color:#fff;font-weight:700;font-size:1.02rem}
.cat-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:1.8rem}
.cat-hero img{width:100%;height:360px;object-fit:cover;display:block}
.cat-hero .badge-mark{
  position:absolute;right:0;bottom:0;width:62px;height:62px;background:var(--orange);
  color:#fff;display:grid;place-items:center;
}
/* the category heading sits noticeably above the body copy, as in the design */
.cat-h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.14;margin-bottom:1.1rem}
.cat-pull{
  color:var(--orange);font-weight:700;font-size:clamp(1.06rem,1.7vw,1.3rem);
  line-height:1.45;margin:1.4rem 0;
}
.cat-point{display:flex;gap:.9rem;align-items:flex-start}
.cat-point .ico{
  flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--orange);
  color:var(--orange);display:grid;place-items:center;
}
.cat-point p{margin:0;font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.5}
/* ==========================================================================
   Product card — full-bleed image with an accent mark, divider above the link
   ========================================================================== */
.pcard{
  background:#fff;border-radius:var(--radius);overflow:hidden;height:100%;
  display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(16,46,72,.08);
  transition:transform .35s ease, box-shadow .35s ease;
}
.pcard:hover{transform:translateY(-8px);box-shadow:0 22px 52px rgba(16,46,72,.16)}
.pcard .shot{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  /* the renders carry their own white ground, so the frame matches it
     rather than showing a paler rectangle behind every sheet */
  background:#fff;border-bottom:1px solid var(--line);
}
.pcard .shot img{
  /* Contain, not cover. Cropping a square out of these renders cut the profile
     out of frame and upscaled a small source until it went soft — the whole
     sheet has to be visible and sharp, so the box is padded instead. */
  width:100%;height:100%;object-fit:contain;display:block;padding:1.6rem;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .shot img{transform:scale(1.05)}
.pcard .shot::after{
  content:"";position:absolute;inset:0;background:rgba(16,46,72,.28);
  opacity:0;transition:opacity .35s ease;
}
.pcard:hover .shot::after{opacity:1}
.pcard .mark{
  position:absolute;right:0;bottom:0;z-index:2;width:56px;height:56px;
  background:var(--orange);color:#fff;display:grid;place-items:center;
  transition:width .3s ease, height .3s ease, background .3s ease;
}
.pcard:hover .mark{background:var(--navy);width:62px;height:62px}
.pcard .body{padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;flex:1}
.pcard .cat{
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-bright);margin-bottom:.45rem;
}
.pcard h3{font-size:1.14rem;margin-bottom:.55rem}
.pcard p{font-size:.92rem;margin-bottom:1.1rem}
.pcard .more{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.pcard .more svg{color:var(--orange);transition:transform .25s ease}
.pcard .more:hover{color:var(--orange)}
.pcard:hover .more svg{transform:translateX(4px)}
/* ---------- product page spacing ----------------------------------------
   The video slot and the related heading were both sitting flush against
   their neighbours.
   ------------------------------------------------------------------------ */
.pd-video{padding-top:74px;padding-bottom:74px}
.pd-related-head{margin-bottom:3.2rem;padding-top:.5rem}
/* ==========================================================================
   Interaction layer
   The site read as static because almost nothing responded to a pointer. These
   are site-wide defaults so any image, card, link or button reacts without the
   component having to opt in.
   ========================================================================== */
/* --- images: every framed image pushes in slightly on hover ---------------- */
.cat-hero, .pd-stage, .blog-card .shot, .tcard .shot,
.about-shot, .why-shot, .detail-shot{ overflow:hidden }
.cat-hero img, .blog-card .shot img, .tcard .shot img,
.about-shot img, .why-shot img, .detail-shot img{
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.cat-hero:hover img, .blog-card:hover .shot img, .tcard:hover .shot img,
.about-shot:hover img, .why-shot:hover img, .detail-shot:hover img{
  transform:scale(1.07);
}
/* a generic frame any image can sit in */
.img-frame{position:relative;overflow:hidden;border-radius:var(--radius);display:block}
.img-frame img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.img-frame::after{content:"";position:absolute;inset:0;background:var(--navy);
  opacity:0;transition:opacity .45s ease;pointer-events:none}
.img-frame:hover img{transform:scale(1.07)}
.img-frame:hover::after{opacity:.14}
/* --- cards lift ----------------------------------------------------------- */
.wcard, .blog-card, .tcard, .fact, .step-card{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wcard:hover, .blog-card:hover, .tcard:hover,
.fact:hover, .step-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);
}
/* A point has no background of its own, so lifting it onto a card shadow drew
   a shadow around nothing. Only the icon answers the pointer. */
.cat-point{transition:none}
.cat-point:hover .ico{background:var(--orange);border-color:var(--orange);color:#fff}
.cat-point .ico{transition:background .3s ease, color .3s ease, border-color .3s ease}
/* --- buttons: the accent sweeps up through the button ---------------------- */
.btn::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;
  background:var(--navy);transition:height .35s cubic-bezier(.2,.7,.3,1);
}
.btn:hover::before{height:100%}
.btn-ink::before{background:var(--orange)}
.btn-ghost-ink::before{background:var(--navy)}
/* --- links: the arrow slides --------------------------------------------- */
.link-arrow svg, .explore svg, .cat-list a svg{transition:transform .3s ease}
.link-arrow:hover svg, .explore:hover svg, .cat-list a:hover svg{transform:translateX(5px)}
/* --- section headings get a touch of weight ------------------------------- */
/* respect the user's motion preference throughout */
/* ==========================================================================
   Colour and depth pass
   The flat fills read as dead space next to the reference kits. Nothing here
   changes the palette — it gives the existing brand colours some modelling.
   ========================================================================== */
/* --- page banner: gradient, a sheet-rib pattern and an accent rule --------- */
/* A flat navy panel took a third of a phone screen and said nothing. A roof
   sits behind it now, dark enough under the wash for the title and the crumbs
   to hold, and the band is shorter where the screen is smaller. */
.page-banner{
  /* the mill is the default behind every banner now, at the wash the About
     page was using */
  background-image:
    linear-gradient(118deg, rgba(16,46,72,.88) 0%, rgba(23,59,90,.80) 50%, rgba(12,35,56,.88) 100%),
    var(--banner-img, url('../images/banner-mill.jpg'));
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  padding:66px 0 58px;
}
.page-banner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background:repeating-linear-gradient(104deg,
    rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 26px);
}
.page-banner::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:-40%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,102,27,.20) 0%,rgba(243,102,27,0) 68%);
}
.page-banner h1{
  font-size:clamp(2.3rem,4.6vw,3.5rem);margin-bottom:.9rem;
}
.page-banner h1::after{
  content:"";display:block;width:64px;height:4px;border-radius:2px;
  background:var(--orange);margin-top:1.1rem;
}
/* --- info cards: match the depth the product cards now carry -------------- */
.info-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;padding:0 0 1.6rem;
  box-shadow:0 10px 30px rgba(16,46,72,.07);border:0;
  transition:transform .35s ease, box-shadow .35s ease;
}
.info-card:hover{transform:translateY(-8px);box-shadow:0 22px 52px rgba(16,46,72,.15)}
.info-card .thumb{overflow:hidden;margin-bottom:1.4rem;aspect-ratio:16/10}
.info-card .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.info-card:hover .thumb img{transform:scale(1.08)}
.info-card h3,.info-card p,.info-card .link-arrow{margin-left:1.5rem;margin-right:1.5rem}
.info-card .link-arrow{padding-top:1rem;border-top:1px solid var(--line)}
/* --- dark sections get a little modelling too ----------------------------- */
.on-dark-panel,section.bg-navy{
  background:linear-gradient(126deg,var(--navy) 0%,var(--navy-2) 62%,#0C2338 100%);
}
/* --- soft sections warm up very slightly so the whites read as white ------ */
/* ==========================================================================
   Video blocks
   Poster frame and a play button until the viewer asks for the player, so a
   page with several of these costs one image each.
   ========================================================================== */
.vblock{margin:0}
.vblock-stage{
  position:relative;width:100%;overflow:hidden;border-radius:var(--radius);
  background:var(--navy);box-shadow:0 18px 44px rgba(16,46,72,.16);
}
.vblock-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vblock-play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;display:block;
}
.vblock-play img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.vblock-play:hover img{transform:scale(1.05)}
.vblock-play .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,24,38,.12) 0%,rgba(9,24,38,.52) 100%);
  transition:opacity .35s ease;
}
.vblock-play:hover .scrim{opacity:.75}
.vblock-play .btn-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#fff;
  box-shadow:0 0 0 0 rgba(243,102,27,.55);
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.vblock-play:hover .btn-play{transform:translate(-50%,-50%) scale(1.09);background:var(--orange-hover)}
.vblock-play .btn-play::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:vpulse 2.6s ease-out infinite;
}
@keyframes vpulse{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.vblock figcaption{
  margin-top:1rem;font-weight:700;color:var(--ink);font-size:1rem;line-height:1.45;
  font-family:var(--font-head);letter-spacing:-.015em;
}
/* the works rail sits quietly under the catalogue */
.works-grid .vblock figcaption{font-size:.95rem}
/* the hero slot on a category page holds a player rather than a still */
.cat-hero-video{border-radius:0;overflow:visible;box-shadow:none;margin-bottom:1.8rem}
.cat-hero-video .vblock-stage{border-radius:var(--radius)}
/* the works rail alternates ground with the catalogue above it */
.works-section{background:#fff}
/* ---------- profile drawing card ----------------------------------------- */
.pd-drawings{margin-top:0;padding-top:0;border-top:0}
.drawing-card{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;height:100%;
}
.drawing-card img{width:100%;height:auto;display:block;margin:auto 0}
.drawing-card figcaption{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-bright);
}
/* a button that carries an icon beside its label */
.btn-with-icon{display:inline-flex;align-items:center;justify-content:center;gap:.6rem}
.btn-with-icon svg{flex:none}
/* ---------- category specification table --------------------------------- */
.spec-wide{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem}
.spec-wide th,.spec-wide td{padding:.85rem 1rem;text-align:left;vertical-align:middle}
.spec-wide thead th{
  background:var(--navy);color:#fff;font-weight:700;font-family:var(--font-head);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.spec-wide thead th:first-child{border-top-left-radius:var(--radius-sm)}
.spec-wide thead th:last-child{border-top-right-radius:var(--radius-sm)}
.spec-wide tbody tr:nth-child(odd) td{background:var(--muted)}
.spec-wide tbody td{border-bottom:1px solid var(--line)}
.spec-wide tbody th{
  background:#fff;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);
  white-space:nowrap;
}
.spec-wide tbody tr:nth-child(odd) th{background:var(--muted)}
.spec-wide a{color:var(--ink);font-weight:700}
.spec-wide a:hover{color:var(--orange)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}
/* ---- the spec tables below a desktop -------------------------------------
   Seven or eight dimension columns cannot fit a phone and stacking them as
   cards loses the comparison, which is the whole point of the table. The
   profile column is pinned instead, so whatever figure you scroll to, you can
   still see which profile it belongs to. The cells need opaque backgrounds
   and border-collapse:separate for this, which .spec-wide already has.
   ------------------------------------------------------------------------ */
.table-note{font-size:.88rem;color:var(--body);margin-top:1rem}
/* Below a desktop the two columns stack, and the rail is first in the source,
   so a phone opened on a category page led with a list of the other categories
   and a phone number before any of this category's own content. */
/* the header CTA is a button element now, so it needs the nav's own spacing
   rules rather than the anchor's */
.site-nav .btn-with-icon svg{opacity:.9}
/* ---------- mobile menu button ------------------------------------------- */
.navbar-toggler{padding:.35rem .25rem}
.navbar-toggler:focus{box-shadow:none}
.burger{display:block;width:28px;height:20px;position:relative}
.burger i{
  position:absolute;left:0;right:0;height:2.5px;border-radius:2px;
  background:var(--ink);transition:transform .3s ease, opacity .25s ease, background .3s ease;
}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:50%;margin-top:-1.25px}
.burger i:nth-child(3){bottom:0}
/* white while the header sits over the hero */
.site-header.overlay .burger i{background:#fff}
/* ==========================================================================
   Video hero
   The footage runs the seasons itself, so there is no image sequence and no
   season meter here — just the film, a scrim, and a headline that keys off
   the video's own clock.
   ========================================================================== */
.video-hero{
  position:relative;min-height:100svh;height:100svh;
  display:flex;align-items:center;overflow:hidden;background:var(--navy);
}
.vh-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:0;
}
/* No overlay over the film — the footage plays as shot. The copy carries its
   own shadow so it still reads against the bright parts of the frame. */
.vh-copy{position:relative;z-index:2;width:100%;text-align:left;color:#fff}
.vh-block{max-width:min(660px,92%)}
/* the strapline does the eyebrow's job here, so the mark is not repeated
   under the header that already carries it */
.vh-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.3rem;
  font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.vh-eyebrow svg{color:var(--orange);flex:none}
/* two blocks, one line each, the emphasis swapping ends between them */
.vh-head{
  margin:0;color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:-.03em;
}
.vh-head span{display:block}
.vh-head em{
  font-family:var(--font-accent),Georgia,serif;
  font-style:italic;font-weight:400;letter-spacing:-.01em;
  /* the serif sits smaller on its body than the sans, so it is sized up to
     share a baseline weight with the roman beside it */
  font-size:1.12em;padding-right:.04em;
}
.vh-lead{
  margin:1.5rem 0 0;max-width:46ch;
  color:rgba(255,255,255,.9);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.62;
}
/* sound toggle */
.vh-foot{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(20px,4vh,40px);
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  padding:0 clamp(18px,5vw,64px);
}
.vh-sound{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(8,20,32,.42);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:999px;padding:.5rem 1rem;cursor:pointer;
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(7px);transition:background .25s ease, border-color .25s ease;
}
.vh-sound:hover{background:none}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* over the film the header is a gradient, not a bar — a solid white strip
   across the top of the video was the thing that read badly */
.site-header.overlay{
  background:linear-gradient(180deg, rgba(6,18,30,.76) 0%, rgba(6,18,30,.42) 58%, rgba(6,18,30,0) 100%);
  border-bottom:0;box-shadow:none;backdrop-filter:none;
}
.site-header.overlay .nav-link,
.site-header.overlay .dropdown-toggle{color:rgba(255,255,255,.92)}
.site-header.overlay .nav-link:hover,
.site-header.overlay .nav-link.active{color:#fff}
/* ==========================================================================
   Sandwich Panel — the premium page
   More air, larger type and a floated product shot. Same tokens as the rest of
   the site so it reads as the top of this range, not a different brand.
   ========================================================================== */
.panel-hero{position:relative;overflow:hidden;padding-top:86px}
.panel-hero .ghost{
  position:absolute;left:-2.5%;top:-6%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-head);font-weight:800;font-size:clamp(16rem,30vw,34rem);
  line-height:.8;color:var(--ink);opacity:.035;letter-spacing:-.05em;
}
.panel-hero > .container{position:relative;z-index:1}
.panel-h1{
  font-size:clamp(2.1rem,4.1vw,3.4rem);line-height:1.08;margin-bottom:1.2rem;
}
.panel-h1 em{font-style:normal;color:var(--orange)}
.panel-stage{position:relative;display:grid;place-items:center;padding:1rem}
.panel-stage .blob{
  position:absolute;inset:4% 2%;z-index:0;border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;
  background:radial-gradient(circle at 38% 34%, #EAF2F9 0%, #F3F7FB 46%, #FAFCFD 100%);
}
.panel-stage .shot{
  position:relative;z-index:1;width:100%;height:auto;
  filter:drop-shadow(0 34px 54px rgba(16,46,72,.22));
}
.panel-chip{
  position:absolute;right:2%;bottom:6%;z-index:2;
  background:#fff;border-radius:var(--radius-sm);padding:.9rem 1.2rem;
  box-shadow:0 16px 38px rgba(16,46,72,.14);text-align:center;
}
.panel-chip strong{display:block;font-family:var(--font-head);font-size:1.16rem;color:var(--ink)}
.panel-chip span{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-bright);
}
/* benefits + applications */
.panel-benefit,.panel-use{height:100%}
.panel-benefit .ico,.panel-use .ico{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
  background:var(--orange-soft);color:var(--orange);margin-bottom:1.1rem;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.panel-benefit:hover .ico,.panel-use:hover .ico{
  background:var(--orange);color:#fff;transform:translateY(-4px);
}
.panel-benefit h3,.panel-use h3{font-size:1.08rem;margin-bottom:.5rem}
.panel-benefit p,.panel-use p{font-size:.94rem;margin:0}
.panel-use{background:#fff;border-radius:var(--radius);padding:1.7rem 1.5rem;
  box-shadow:0 10px 30px rgba(16,46,72,.06);transition:transform .35s ease,box-shadow .35s ease}
.panel-use:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(16,46,72,.14)}
/* the build-up */
.panel-layers{list-style:none;counter-reset:none;padding:0;margin:0}
.panel-layers li{
  display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--line);
}
.panel-layers li:first-child{border-top:0;padding-top:0}
.panel-layers .n{
  flex:none;font-family:var(--font-head);font-weight:800;font-size:1.5rem;
  color:var(--blue-bright);opacity:.5;line-height:1.1;min-width:2.6rem;
}
.panel-layers h3{font-size:1.14rem;margin-bottom:.4rem}
.panel-layers p{margin:0;font-size:.96rem}
/* ---- finishes: a morphing plate and a rail of blades ---------------------- */
.fin-plate{
  /* the colour is set inline rather than through a custom property: a
     transitioned background reading from var() keeps its first computed value
     and never actually changes. */
  position:relative;aspect-ratio:7/5;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 26px 56px rgba(16,46,72,.2);
  transition:background-color .7s cubic-bezier(.4,0,.2,1);
}
.fin-plate .ribs{
  position:absolute;inset:0;
  background:repeating-linear-gradient(104deg,
    rgba(255,255,255,.14) 0 3px, rgba(255,255,255,0) 3px 12px,
    rgba(0,0,0,.09) 12px 15px, rgba(0,0,0,0) 15px 44px);
}
.fin-plate .sheen{
  position:absolute;inset:0;
  background:linear-gradient(118deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%,
                                     rgba(0,0,0,.16) 100%);
}
.fin-plate .edge{position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.fin-read{margin-top:1.4rem}
.fin-group{
  font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 .2rem;
}
.fin-name{
  font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--ink);
  letter-spacing:-.02em;margin:0;
}
.fin-rail{display:flex;gap:.55rem;height:330px}
.fin-blade{
  position:relative;flex:1 1 0;min-width:0;border:0;padding:0;cursor:pointer;
  border-radius:var(--radius-sm);background:var(--fin);overflow:hidden;
  transition:flex-grow .55s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease, opacity .4s ease;
  /* near full strength: at .62 a matt black swatch reads as grey, which is
     no use to someone picking a colour */
  opacity:.94;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.fin-blade::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.10) 100%);
}
.fin-blade.on{flex-grow:4.2;opacity:1;box-shadow:0 18px 38px rgba(16,46,72,.22)}
.fin-blade .lbl{
  position:absolute;left:0;right:0;bottom:1rem;z-index:2;
  color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease .12s, transform .35s ease .12s;
  text-shadow:0 1px 10px rgba(0,0,0,.45);padding:0 .5rem;
}
.fin-blade.on .lbl{opacity:1;transform:translateY(0)}
.panel-close{
  background:linear-gradient(126deg,var(--navy) 0%,var(--navy-2) 60%,#0C2338 100%);
}
.btn-ghost-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost-light:hover{color:var(--navy);border-color:#fff}
.btn-ghost-light::before{background:#fff}
/* ---------- home: the premium line ---------------------------------------- */
.panel-promo{background:#fff;overflow:hidden}
.panel-promo-stage{position:relative;display:grid;place-items:center;padding:1.5rem}
.panel-promo-stage .blob{
  position:absolute;inset:2%;border-radius:48% 52% 46% 54% / 52% 44% 56% 48%;
  background:radial-gradient(circle at 36% 32%, #E9F1F8 0%, #F3F7FB 50%, #FBFCFE 100%);
}
.panel-promo-stage img{
  position:relative;z-index:1;width:100%;height:auto;
  filter:drop-shadow(0 28px 48px rgba(16,46,72,.2));
}
.panel-promo-list{list-style:none;padding:0;margin:1.4rem 0 1.8rem}
.panel-promo-list li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.6rem;font-weight:600;color:var(--ink)}
.panel-promo-list svg{flex:none;color:var(--orange);margin-top:.28rem}
/* burger becomes a cross while the menu is open */
.site-header.menu-open .burger i:nth-child(1){transform:translateY(8.75px) rotate(45deg)}
.site-header.menu-open .burger i:nth-child(2){opacity:0}
.site-header.menu-open .burger i:nth-child(3){transform:translateY(-8.75px) rotate(-45deg)}
/* ---------- the panel, opened out with callouts ---------------------------- */
.panel-made{overflow:hidden}
.exploded{position:relative;max-width:1200px;margin:0 auto;padding:2.5rem 0}
.exploded .shot{
  display:block;width:min(50%,540px);height:auto;margin:0 auto;
  filter:drop-shadow(0 30px 52px rgba(16,46,72,.2));
}
.exploded .call{
  position:absolute;width:min(21%,220px);cursor:default;outline:0;
  opacity:0;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.25,1);
}
/* they come in from the side they sit on, toward the drawing */
.exploded .call-l{transform:translateX(-16px)}
.exploded .call-r{transform:translateX(16px)}
.exploded.shown .call{
  opacity:1;transform:none;
  transition-delay:calc(var(--i, 0) * .16s);
}
/* dimming the others only applies once they are in */
.exploded.shown.focused .call{opacity:.34}
.exploded.shown.focused .call.on{opacity:1}
.exploded .call-l{left:1%;text-align:right}
.exploded .call-r{right:1%;text-align:left}
.exploded .call h3{
  font-size:1rem;margin:0 0 .45rem;letter-spacing:-.015em;
}
.exploded .call ul{list-style:none;padding:0;margin:0}
.exploded .call li{font-size:.88rem;color:var(--body);line-height:1.65}
.exploded .call .dot{
  position:absolute;top:.4rem;width:11px;height:11px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 0 rgba(243,102,27,.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.exploded .call-l .dot{right:-20px}
.exploded .call-r .dot{left:-20px}
.exploded .call.on .dot{transform:scale(1.35);box-shadow:0 0 0 8px rgba(243,102,27,.16)}
.exploded .call .line{
  position:absolute;top:calc(.4rem + 5px);height:1px;background:var(--line);
  width:0;transition:width .5s cubic-bezier(.2,.8,.25,1), background .35s ease;
}
.exploded .call-l .line{right:-20px}
.exploded .call-r .line{left:-20px}
.exploded .call.on .line{width:52px;background:var(--orange)}
/* a head on the pointer, so it reads as aimed at the layer rather than as a
   rule that happens to end there */
.exploded .call .line::after{
  content:"";position:absolute;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--orange);border-right:1px solid var(--orange);
  opacity:0;transition:opacity .35s ease .15s;
}
.exploded .call-l .line::after{left:-1px;transform:rotate(-135deg)}
.exploded .call-r .line::after{right:-1px;transform:rotate(45deg)}
.exploded .call.on .line::after{opacity:1}
.panel-pills{
  list-style:none;padding:0;margin:3rem auto 0;max-width:1000px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
}
.panel-pills li{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;
  font-size:.83rem;font-weight:600;color:var(--ink);background:#fff;
  transition:border-color .3s ease, transform .3s ease;
}
.panel-pills li:hover{border-color:var(--orange);transform:translateY(-2px)}
.panel-pills svg{color:var(--orange);flex:none}
/* ==========================================================================
   All Products — the flat listing and its detail pages
   A second route kept alongside the category pages, not a replacement.
   ========================================================================== */
.ap-intro .lead-muted{max-width:60ch}
.ap-row{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,5rem);
  padding:clamp(2.5rem,5vw,4.5rem) 0;border-bottom:1px solid var(--line);
}
.ap-row:last-child{border-bottom:0}
.ap-row.flip .ap-shot{order:2}
.ap-row.flip .ap-body{order:1}
.ap-shot{position:relative;display:grid;place-items:center;padding:1.5rem}
.ap-shot .blob{
  position:absolute;inset:4%;border-radius:47% 53% 45% 55% / 51% 45% 55% 49%;
  background:radial-gradient(circle at 36% 32%, #EAF1F8 0%, #F4F8FB 52%, #FBFCFE 100%);
  transition:transform .8s cubic-bezier(.2,.8,.25,1);
}
.ap-shot img{
  position:relative;z-index:1;width:100%;height:auto;max-height:320px;object-fit:contain;
  filter:drop-shadow(0 24px 44px rgba(16,46,72,.18));
  transition:transform .8s cubic-bezier(.2,.8,.25,1);
}
.ap-row:hover .ap-shot img{transform:translateY(-8px) scale(1.03)}
.ap-row:hover .ap-shot .blob{transform:scale(1.04)}
.ap-body{position:relative}
.ap-index{
  position:absolute;right:0;top:-2.4rem;font-family:var(--font-head);font-weight:800;
  font-size:5.5rem;line-height:1;color:var(--ink);opacity:.055;letter-spacing:-.05em;
}
.ap-tag{
  font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 .5rem;
}
.ap-body h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.8rem;letter-spacing:-.025em}
.ap-lead{max-width:48ch;margin-bottom:1.5rem}
.ap-figures{display:flex;flex-wrap:wrap;gap:2.2rem;margin:0 0 1.6rem}
.ap-figures dt{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);margin-bottom:.25rem;
}
.ap-figures dd{
  margin:0;font-family:var(--font-head);font-weight:800;font-size:1.06rem;color:var(--ink);
}
/* detail */
.apd-hero{position:relative;overflow:hidden;padding-top:86px}
.apd-hero .ghost{
  position:absolute;right:-3%;top:2%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-head);font-weight:800;font-size:clamp(9rem,17vw,18rem);
  line-height:.85;color:var(--ink);opacity:.035;letter-spacing:-.05em;
}
.apd-hero > .container{position:relative;z-index:1}
.apd-h1{font-size:clamp(2.1rem,4.1vw,3.3rem);line-height:1.08;margin-bottom:1.1rem}
.apd-best{font-weight:700;color:var(--orange-text);margin-top:1rem}
.apd-stage{position:relative;display:grid;place-items:center;padding:1rem}
.apd-stage .blob{
  position:absolute;inset:3%;border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;
  background:radial-gradient(circle at 38% 34%, #EAF2F9 0%, #F3F7FB 46%, #FAFCFD 100%);
}
.apd-stage img{
  position:relative;z-index:1;width:100%;height:auto;max-height:420px;object-fit:contain;
  filter:drop-shadow(0 32px 52px rgba(16,46,72,.2));
}
/* ---------- legal pages ---------------------------------------------------- */
.legal{max-width:70ch}
.legal-date{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-bright);margin-bottom:2.2rem;
}
.legal h2{font-size:1.5rem;margin:2.6rem 0 .9rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.18rem;margin:2.2rem 0 .8rem}
.legal p{margin-bottom:1.1rem}
.legal a{color:var(--orange);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal-rule{margin:3.4rem 0;border:0;border-top:1px solid var(--line)}
.legal-list{padding-left:1.4rem;margin-bottom:1.6rem}
.legal-list li{margin-bottom:.7rem;line-height:1.75}
.legal-list-alpha{list-style:lower-alpha}
.legal-note{font-size:.93rem;color:var(--body);padding-top:.6rem;border-top:1px solid var(--line)}
/* ==========================================================================
   Type and spacing scale
   These had drifted: eleven different sizes were doing the job of one card
   heading, four page headings sat within 0.4rem of each other, and section
   padding was set five different ways. Everything below resolves to the same
   few tokens. Declared last so it settles the cascade over the rules above
   rather than needing every one of them edited.
   ========================================================================== */
/* ---- vertical rhythm ----------------------------------------------------- */
.section-sm{padding:var(--sp-section-sm) 0}
.pd-top,.panel-hero,.apd-hero{padding-top:var(--sp-section)}
.pd-video{padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
/* ---- display sizes ------------------------------------------------------- */
.page-banner h1,.panel-h1,.apd-h1,.hero-card h1{
  font-size:var(--fs-h1);line-height:var(--lh-tight);
}
.section-title,.cat-h2{
  font-size:var(--fs-h2);line-height:var(--lh-tight);margin-bottom:var(--sp-head);
}
.section-title.mb-0,.cat-h2.mb-0{margin-bottom:0}
.ap-body h3,.post-body h2,.fin-name{
  font-size:var(--fs-h3);line-height:1.2;
}
/* ---- card titles: one size for full cards, one for compact ones ---------- */
.product-card h3,.info-card h3,.profile-card h3,.cat-card .panel h3,
.dodont h3,.post-body h3,.legal h3{
  font-size:var(--fs-card);line-height:var(--lh-head);margin-bottom:var(--sp-card-head);
}
.pcard h3,.post-card h3,.post-row h3,.care-card h3,
.panel-benefit h3,.panel-use h3,.panel-layers h3,.exploded .call h3{
  font-size:var(--fs-card-sm);line-height:var(--lh-head);margin-bottom:var(--sp-card-head);
}
.legal h2{font-size:1.45rem;line-height:1.3}
/* ---- body copy ----------------------------------------------------------- */
/* ---- floating WhatsApp --------------------------------------------------- */
.wa-float{
  position:fixed;right:20px;bottom:88px;z-index:60;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 10px 26px rgba(16,46,72,.28);
  transition:transform .3s ease, box-shadow .3s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.06);color:#fff;box-shadow:0 16px 34px rgba(37,211,102,.4)}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);animation:wapulse 2.8s ease-out infinite;
}
@keyframes wapulse{
  0%{transform:scale(1);opacity:.8}
  70%,100%{transform:scale(1.5);opacity:0}
}
/* ---- footer badges ------------------------------------------------------- */
.footer-badges{
  list-style:none;padding:0;margin:0;
  display:flex;align-items:center;justify-content:flex-start;gap:1.2rem;flex-wrap:wrap;
}
.footer-badges img{width:auto;height:74px;display:block}
/* ---------- parent-company timeline --------------------------------------- */
.legacy{list-style:none;padding:0;margin:0;counter-reset:none}
.legacy li{
  display:grid;grid-template-columns:120px 1fr;gap:clamp(1rem,3vw,2.4rem);
  padding:1.5rem 0;border-top:1px solid var(--line);align-items:start;
}
.legacy li:first-child{border-top:0;padding-top:0}
.legacy .yr{
  font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--orange);
  letter-spacing:-.02em;line-height:1.3;
}
.legacy h3{font-size:var(--fs-card);line-height:var(--lh-head);margin-bottom:.35rem}
.legacy p{margin:0;font-size:.96rem}
/* ==========================================================================
   Adapted from the Masters India site
   Same family: a pill button with the arrow in its own disc, a feature row
   under the banner, and the two-tone heading where the second half carries
   the weight.
   ========================================================================== */
/* ---- hero call to action ------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:1rem;margin-top:2.1rem;
  background:var(--orange);color:#fff;border-radius:999px;
  padding:.46rem .46rem .46rem 1.75rem;font-family:var(--font-head);font-weight:700;
  font-size:1rem;box-shadow:0 14px 34px rgba(4,14,24,.3);
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, background .3s ease;
}
.pill i{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--orange-text);flex:none;
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
.pill:hover{
  transform:translateY(-3px);box-shadow:0 20px 44px rgba(4,14,24,.38);
  background:var(--orange-hover);color:#fff;
}
/* the arrow already points out of the button, so it travels rather than turns */
.pill:hover i{transform:translate(3px,-3px)}
/* ---- feature row under the banner ---------------------------------------- */
.vh-features{
  position:absolute;left:0;right:0;bottom:clamp(74px,11vh,116px);z-index:2;
  list-style:none;margin:0;padding:0 clamp(18px,5vw,64px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,4vw,3.2rem);
}
.vh-features li{
  display:inline-flex;align-items:center;gap:.6rem;
  color:rgba(255,255,255,.9);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 14px rgba(4,14,24,.5);
}
.vh-features .dot{
  width:9px;height:9px;border-radius:50%;background:var(--blue-bright);flex:none;
  box-shadow:0 0 0 4px rgba(0,158,227,.22);
}
/* ---- the two lockups in the home about block ----------------------------- */
.about-lockups{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;
  margin:1.8rem 0 .4rem;
}
.about-lockups img{
  width:auto;height:clamp(42px,4.6vw,58px);object-fit:contain;
  transition:transform .4s cubic-bezier(.2,.8,.25,1), filter .4s ease;
}
.about-lockups img:hover{transform:translateY(-3px)}
.about-lockups .tie{
  width:1px;height:46px;background:var(--line);flex:none;
}
/* ---- two-tone headings, the way the parent site sets them ---------------- */
.section-title b,.section-title strong{font-weight:800;color:var(--ink)}
.section-title.duo{font-weight:500}
.section-title.duo b{font-weight:800}
/* ---- a calmer, common easing for the hover lifts across the site --------- */
.pcard,.info-card,.panel-use,.blog-card,.tcard,.fact,.step-card,.cat-point,.wcard{
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease, border-color .35s ease;
}
/* the parent mark is a light-on-dark lockup, so it sits on its own dark chip */
.about-lockups img.mi{height:clamp(52px,5.4vw,68px)}
/* ---- hero copy without a scrim behind it --------------------------------- */
/* The overlay is gone, so the type has to hold on its own. A tight shadow
   plus a wider soft one keeps it legible over a bright sky without laying a
   grey wash across the footage. */
.vh-head,.vh-eyebrow,.vh-lead{
  text-shadow:0 1px 3px rgba(4,14,24,.55), 0 3px 26px rgba(4,14,24,.5);
}
.vh-features li{text-shadow:0 1px 3px rgba(4,14,24,.6), 0 2px 16px rgba(4,14,24,.5)}
/* ---- home about: the lockups need air between the copy and the figures --- */
.about-lockups{margin:2.6rem 0 0;padding-bottom:2.2rem}
.about-foot{margin-top:0;padding-top:2rem;border-top:1px solid rgba(16,46,72,.12)}
.about-foot .stat{line-height:1.5}
/* ==========================================================================
   Comparison table, rebuilt light
   The dark block was heavy and the head sat inside it. This is the layout
   from the reference: a pale ground, each column its own panel with a soft
   tint, titles standing clear at the top, hairlines between rows.
   ========================================================================== */
.cmp-band::before{background:linear-gradient(180deg,#F7FAFD 0%,#EEF5FA 100%);height:64%}
.cmp{
  border-radius:22px;overflow:visible;box-shadow:none;background:transparent;
}
.cmp table{
  width:100%;border-collapse:separate;border-spacing:14px 0;margin:0;border-radius:0;
  table-layout:fixed;
}
.cmp th,.cmp td{border-bottom:0;padding:1.15rem 1.5rem;font-size:.94rem;vertical-align:middle}
/* the three column panels */
.cmp thead th{
  position:relative;
  font-family:var(--font-head);font-size:1.12rem;font-weight:800;letter-spacing:-.02em;
  padding:1.9rem 1.5rem 1.5rem;border-radius:20px 20px 0 0;
}
/* a rule inside each panel sets the title apart from the rows */
.cmp thead th::after{
  content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:1px;
  background:rgba(16,46,72,.13);
}
.cmp thead th b,.cmp thead th strong{font-weight:800}
.cmp tbody td{border-radius:0}
.cmp tbody tr:last-child td{border-radius:0 0 20px 20px;padding-bottom:1.7rem}
.cmp thead th:first-child,.cmp tbody td:first-child{
  background:linear-gradient(170deg,#EAF3FA 0%,#F4F8FC 60%,#FBF6F1 100%);color:var(--ink);
}
.cmp thead th:nth-child(2),.cmp tbody td:nth-child(2){
  background:linear-gradient(170deg,#E9F4EE 0%,#F1F8F4 55%,#EAF2F9 100%);color:var(--ink);
}
.cmp thead th:last-child,.cmp tbody td:last-child{
  background:linear-gradient(170deg,#FCF1EC 0%,#FBF3EE 55%,#FAECEC 100%);color:#6C5C57;
}
.cmp thead th:first-child{color:#5C6B77;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.76rem}
/* row rules, drawn inside each panel so they do not cross the gaps */
.cmp tbody td{position:relative}
.cmp tbody tr:not(:last-child) td::after{
  content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:1px;
  background:rgba(16,46,72,.09);
}
.cmp tbody td:first-child{font-weight:700;color:var(--ink)}
.cmp tbody td:nth-child(2){font-weight:600}
/* ---- header gains a backdrop the moment the page moves ------------------- */
/* A blur over a bright frame of the film lifts it toward white, which is what
   read as a pale wash behind white menu text. It is a dark pane instead, and
   stays dark for the whole hero; past the hero the header turns solid as it
   already did. */
.site-header.overlay.floated{
  background:linear-gradient(180deg, rgba(6,18,30,.93) 0%, rgba(6,18,30,.80) 100%);
  backdrop-filter:none;
  box-shadow:0 8px 28px rgba(4,14,24,.26);
}
/* ---- the panel promo lifts gently under the pointer ---------------------- */
.panel-promo-stage{transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.panel-promo-stage img{transition:transform .7s cubic-bezier(.2,.8,.25,1)}
.panel-promo-stage .blob{transition:transform .8s cubic-bezier(.2,.8,.25,1)}
.panel-promo:hover .panel-promo-stage img{transform:translateY(-14px)}
.panel-promo:hover .panel-promo-stage .blob{transform:scale(1.04)}
/* ---- video testimonials -------------------------------------------------- */
/* a rail that scrolls, so five testimonials do not stack into a block */
.vt-slider{position:relative}
.vt-rail{
  /* proximity, not mandatory: when the cards are wider than the remaining
     scroll range the only valid mandatory snap point is 0, so the rail springs
     back and the arrows look dead */
  display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:.25rem .25rem 1rem;margin:0 -.25rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.vt-rail::-webkit-scrollbar{display:none}
.vt-card{flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start}
.vt-nav{display:flex;justify-content:center;gap:.8rem;margin-top:1.4rem}
.vt-nav button{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.vt-nav button:first-child svg{transform:rotate(180deg)}
.vt-nav button:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.vt-card{margin:0}
.vt-stage{
  position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  background:var(--navy);box-shadow:0 18px 44px rgba(16,46,72,.16);
}
.vt-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vt-play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;display:block;
}
.vt-play img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.vt-play:hover img{transform:scale(1.05)}
.vt-play .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,24,38,.06) 0%,rgba(9,24,38,.42) 100%);
}
.vt-play .btn-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--navy);
  transition:transform .3s ease, background .3s ease;
}
.vt-play:hover .btn-play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.vt-card figcaption{
  margin-top:1.1rem;display:flex;flex-direction:column;gap:.15rem;text-align:center;
}
.vt-card figcaption strong{
  font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:1.05rem;
  letter-spacing:-.015em;
}
.vt-card figcaption span{font-size:.88rem;color:var(--body)}
/* the callouts stack under the drawing once there is no room beside it */
/* ==========================================================================
   Product showcase
   Built on the entry from the reference: the disc grows out of a point, then
   the sheet grows out of the disc. The sheet arriving toward the viewer
   rather than sliding across is what gives it depth.
   ========================================================================== */
.ps{position:relative;padding:0 clamp(0px,3vw,44px)}
.ps-stage{position:relative;min-height:clamp(440px,46vw,560px)}
.ps-scene{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1.06fr .94fr;align-items:center;
  gap:clamp(1rem,3vw,3rem);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease, visibility 0s .45s;
}
.ps-scene.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .45s ease, visibility 0s 0s;
}
/* the numeral sits behind the sheet and arrives last */
.ps-n{
  position:absolute;left:24%;top:-14%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-head);font-weight:800;line-height:.8;letter-spacing:-.05em;
  font-size:clamp(11rem,23vw,21rem);color:var(--ink);
  opacity:0;transform:scale(.94);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.ps-scene.on .ps-n{opacity:.06;transform:scale(1);transition-delay:.52s}
.ps-shot{position:relative;z-index:1;display:grid;place-items:center;isolation:isolate}
/* 1. the disc, growing from a point */
.ps-shot .disc{
  /* smaller than the sheet now, so it sits off-centre and reads as an accent
     behind it rather than disappearing underneath */
  position:absolute;z-index:0;left:63%;top:34%;
  width:clamp(205px,22vw,295px);aspect-ratio:1;border-radius:50%;
  translate:-50% -50%;
  transform:scale(.06);opacity:0;overflow:hidden;
  background:radial-gradient(circle at 34% 30%, #2C6E9B 0%, var(--navy) 58%, #0B2438 100%);
  box-shadow:0 30px 70px rgba(11,36,56,.34);
  transition:transform .62s cubic-bezier(.22,.9,.28,1), opacity .3s ease;
}
.ps-scene.on .ps-shot .disc{transform:scale(1);opacity:1}
/* the faint diagonal ribbing the reference puts on its disc */
.ps-shot .disc i{
  position:absolute;inset:0;display:block;
  background:repeating-linear-gradient(108deg,
    rgba(255,255,255,.07) 0 2px, rgba(255,255,255,0) 2px 15px);
}
/* 2. then the sheet, growing out of the disc toward the viewer */
.ps-shot img{
  position:relative;z-index:1;width:100%;height:auto;
  max-height:clamp(285px,34vw,420px);object-fit:contain;
  opacity:0;transform:scale(.16);
  filter:drop-shadow(0 30px 44px rgba(11,36,56,.4));
  transition:transform .78s cubic-bezier(.2,.86,.3,1) .26s, opacity .4s ease .26s;
}
.ps-scene.on .ps-shot img{opacity:1;transform:scale(1)}
/* 3. then the copy */
.ps-copy{position:relative;z-index:2;max-width:44ch}
.ps-copy > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.25,1);
}
.ps-scene.on .ps-copy > *{opacity:1;transform:translateY(0)}
.ps-scene.on .ps-copy > :nth-child(1){transition-delay:.60s}
.ps-scene.on .ps-copy > :nth-child(2){transition-delay:.68s}
.ps-scene.on .ps-copy > :nth-child(3){transition-delay:.78s}
.ps-scene.on .ps-copy > :nth-child(4){transition-delay:.86s}
.ps-scene.on .ps-copy > :nth-child(5){transition-delay:.94s}
.ps-cat{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 .7rem;
}
/* the reference's ratio: a very large name against small running text */
.ps-copy h3{
  margin:0 0 1rem;line-height:1.02;letter-spacing:-.035em;font-weight:500;
}
.ps-copy h3 span{
  display:block;font-size:clamp(1.15rem,2vw,1.6rem);color:var(--body);
  font-weight:500;letter-spacing:-.01em;margin-bottom:.1rem;
}
.ps-copy h3 b{
  display:block;font-weight:800;color:var(--ink);
  font-size:clamp(2.3rem,4.6vw,3.9rem);
}
.ps-copy h3 em{
  font-style:normal;font-weight:700;color:var(--orange);
  font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:.01em;
}
.ps-lead{margin-bottom:1.5rem;color:var(--body);font-size:.97rem;max-width:40ch}
/* dot rail */
.ps-rail{
  position:absolute;right:0;top:50%;translate:0 -50%;z-index:5;
  display:flex;flex-direction:column;gap:.75rem;
}
.ps-dot{
  position:relative;width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(16,46,72,.22);cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.ps-dot:hover{background:rgba(16,46,72,.45);transform:scale(1.2)}
.ps-dot.on{background:var(--orange);transform:scale(1.3)}
.ps-dot .tip{
  position:absolute;right:18px;top:50%;translate:6px -50%;
  white-space:nowrap;font-size:.72rem;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.24rem .65rem;
  opacity:0;pointer-events:none;transition:opacity .25s ease, translate .25s ease;
}
.ps-dot:hover .tip,.ps-dot:focus-visible .tip{opacity:1;translate:0 -50%}
.ps-arrows{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.ps-arrows button{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.ps-arrows button:first-child svg{transform:rotate(180deg)}
.ps-arrows button:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.ps-count{font-size:.82rem;color:var(--body);letter-spacing:.06em}
.ps-count b{font-family:var(--font-head);font-weight:800;color:var(--ink)}
/* ---------- the story block's footprint list ----------------------------- */
.about-foot{display:block}
.about-foot-title{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-bright);margin:0 0 .9rem;
}
.about-list{list-style:none;padding:0;margin:0 0 1.6rem}
.about-list li{
  display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.55rem;
  font-size:.95rem;font-weight:600;color:var(--ink);
}
.about-list svg{flex:none;color:var(--orange);margin-top:.26rem}
/* the panel promo bullets carry a lead-in now */
.panel-promo-list li b{font-weight:800;color:var(--ink)}
.panel-promo-list li span{font-weight:500;color:var(--body)}
/* ---- hero: a pool of shade under the copy, not a wash over the film ------ */
/* sized from the edges, not a percentage — the copy block is a flex child with
   no resolved width, so a % here collapsed the pool to nothing */
/* A pool that followed the copy left still left the headline crossing a bright
   wall, because the footage changes through the loop and a soft ellipse cannot
   be relied on. A scrim raked from the left holds the whole block at every
   frame and still leaves most of the roof clear. */
.vh-copy::before{
  content:"";position:absolute;inset:-30vh -8vw;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(6,18,30,.88) 0%,  rgba(6,18,30,.80) 22%,
    rgba(6,18,30,.58) 42%, rgba(6,18,30,.26) 60%,
    rgba(6,18,30,.06) 76%, rgba(6,18,30,0)   88%);
}
.vh-copy{position:relative;z-index:2}
.vh-copy .container{position:relative;z-index:1}
/* The sound control is just the icon. It was a 40px disc with the icon
   flex-start inside it, since padding and gap were zeroed but nothing ever
   centred it, so the glyph sat off to one side of its own circle. The disc
   is gone; the box stays 44px as a finger target with nothing drawn on it. */
.vh-sound{
  width:44px;height:44px;padding:0;gap:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
  color:#fff;transition:opacity .25s ease, transform .25s ease;
}
.vh-sound svg{
  filter:drop-shadow(0 1px 3px rgba(4,14,24,.75)) drop-shadow(0 2px 14px rgba(4,14,24,.5));
}
.vh-sound:hover{background:none;border:0;opacity:.75}
.vh-sound:active{transform:scale(.92)}
/* footer mark keeps its strapline */
.foot-caption{
  margin:.7rem 0 1.4rem;font-size:.86rem;font-style:italic;
  color:rgba(255,255,255,.62);letter-spacing:.01em;
}
/* ---- roofcare: the maintenance photo, framed rather than dropped in ----- */
.rc-shot{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--muted);   /* so a slow-decoding photo never flashes white */
  box-shadow:0 22px 50px rgba(16,46,72,.16);
}
.rc-shot img{width:100%;height:340px;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.rc-shot:hover img{transform:scale(1.05)}
.rc-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.5rem 1.3rem;
  display:flex;flex-direction:column;gap:.15rem;color:#fff;
  background:linear-gradient(180deg,rgba(6,18,30,0) 0%,rgba(6,18,30,.76) 100%);
}
.rc-shot figcaption b{font-family:var(--font-head);font-weight:800;font-size:1.06rem}
.rc-shot figcaption span{font-size:.88rem;color:rgba(255,255,255,.82)}
/* ---- roofcare: the invitation to ask, as a band under the answers ------- */
.rc-ask{
  margin-top:2.6rem;padding:2rem clamp(1.4rem,3vw,2.6rem);
  background:#fff;border-radius:var(--radius);
  box-shadow:0 14px 36px rgba(16,46,72,.08);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;
}
.rc-ask h3{font-size:1.24rem;margin-bottom:.4rem}
.rc-ask p{margin:0;max-width:62ch;font-size:.95rem}
.rc-ask .btn{flex:none}
/* ==========================================================================
   Story timeline
   A centre line with the year on one side and the chapter on the other,
   alternating. The launch year carries the mark rather than a dot.
   ========================================================================== */
.tl{list-style:none;padding:0;margin:0;position:relative;max-width:1060px;margin-inline:auto}
.tl::before{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;translate:-.5px 0;
  background:linear-gradient(180deg,rgba(16,46,72,0) 0%,var(--line) 8%,
                                    var(--line) 92%,rgba(16,46,72,0) 100%);
}
.tl-row{
  position:relative;display:grid;
  grid-template-columns:1fr 78px 1fr;align-items:center;
  gap:0 clamp(.5rem,2vw,1.4rem);
  padding:clamp(1.6rem,3.4vw,2.6rem) 0;
}
.tl-year{text-align:right;padding-right:clamp(.5rem,2vw,1.6rem)}
.tl-year span{
  font-family:var(--font-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--ink);opacity:.34;
  transition:opacity .35s ease, color .35s ease;
}
.tl-body{padding-left:clamp(.5rem,2vw,1.6rem)}
.tl-body h3{font-size:var(--fs-card);margin-bottom:.5rem}
.tl-body p{margin:0;font-size:.95rem;max-width:46ch}
/* alternate: chapter left, year right */
.tl-row.flip .tl-year{order:3;text-align:left;padding:0 0 0 clamp(.5rem,2vw,1.6rem)}
.tl-row.flip .tl-mark{order:2}
.tl-row.flip .tl-body{order:1;text-align:right;padding:0 clamp(.5rem,2vw,1.6rem) 0 0}
.tl-row.flip .tl-body p{margin-left:auto}
.tl-mark{display:grid;place-items:center;position:relative;z-index:1}
.tl-mark .dot{
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--line), 0 0 0 6px #fff;
}
.tl-row .tl-mark .badge{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 8px #fff, 0 14px 30px rgba(243,102,27,.34);
}
.tl-row .tl-mark .badge svg{color:#fff}
/* the launch reads louder than the rest */
.tl-row.on .tl-year span{opacity:1;color:var(--orange)}
.tl-row.on .tl-body h3{font-size:var(--fs-h3);line-height:1.2}
.tl-row.on .tl-body p{font-weight:500;color:var(--ink)}
/* ==========================================================================
   Why choose us — the sheet at the centre, four advantages around it
   The wordmark behind this was competing with the copy. A soft glow does the
   same job of holding the middle without adding anything to read.
   ========================================================================== */
.uses-block{position:relative;overflow:hidden;background:#fff}
.uses-stage{position:relative;display:grid;place-items:center;padding:1rem 0}
.uses-stage .glow{
  position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 48% at 50% 52%,
    rgba(0,158,227,.16) 0%, rgba(243,102,27,.09) 38%, rgba(255,255,255,0) 72%);
}
.uses-stage img{
  position:relative;z-index:1;width:100%;height:auto;
  filter:drop-shadow(0 24px 40px rgba(16,46,72,.18));
  animation:uses-float 7s ease-in-out infinite;
}
@keyframes uses-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(-.4deg)}
}
/* circular badges, the way the reference sets them */
.uses-block .wm-point{gap:1.15rem;margin-bottom:2.8rem}
.uses-block .wm-point .ico{
  width:60px;height:60px;border-radius:50%;border:0;background:#fff;
  color:var(--orange);
  box-shadow:0 0 0 1px var(--line), 0 12px 26px rgba(16,46,72,.09);
  transition:transform .35s cubic-bezier(.2,.8,.25,1), color .3s ease, box-shadow .35s ease;
}
.uses-block .wm-point:hover .ico{
  transform:translateY(-4px);color:var(--blue-bright);
  box-shadow:0 0 0 1px rgba(0,158,227,.4), 0 16px 32px rgba(16,46,72,.14);
}
.uses-block .wm-point h4{margin-bottom:.4rem}
.uses-block .wm-point p{font-size:.93rem;line-height:1.72;max-width:34ch}
/* one block of specifications now, so it gets a heading instead of a tab strip */
.pd-spec-head{margin-bottom:2rem}
.pd-spec-head .section-title{font-size:var(--fs-h3)}
/* outbound link to the parent group */
.legacy-copy .out,.about-copy .out,p .out{color:var(--orange);font-weight:700}
p .out:hover{text-decoration:underline}
/* ---- footer: the number is the point of the footer, so it looks like it --- */
.foot-call{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:1.4rem;
  background:var(--orange);color:#fff;border-radius:999px;padding:.7rem 1.5rem .7rem .7rem;
  transition:background .3s ease, transform .3s ease;
}
.foot-call:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px)}
.foot-call:hover b{color:rgba(255,255,255,.9)}
.foot-call:hover .ico{background:rgba(255,255,255,.16)}
.foot-call .ico{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;flex:none;
}
.foot-call .txt{display:flex;flex-direction:column;line-height:1.2}
.foot-call b{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.foot-call em{font-style:normal;font-family:var(--font-head);font-weight:800;font-size:1.16rem}
/* ---- the mark reads the same in every position ------------------------- */
.brand{display:inline-flex;flex-direction:column;gap:.18rem;line-height:1}
.brand-strap{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--body);white-space:nowrap;
}
.site-header.overlay .brand-strap{color:rgba(255,255,255,.78)}
/* The strapline belongs to the mark, so it is never dropped. On the narrowest
   phones it is set down rather than hidden, which is what used to happen below
   420px and left the logo without its line on a Samsung-sized screen. */
/* ---- the parent company sits above the product line -------------------- */
.about-lockups{flex-direction:column;align-items:flex-start;gap:1.3rem}
.about-lockups .parent{display:flex;flex-direction:column;gap:.5rem}
.about-lockups .parent .tag{
  margin:0;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body);
}
.about-lockups img.mi{height:clamp(46px,4.8vw,60px)}
.about-lockups img.child{height:clamp(40px,4.4vw,54px)}
.about-lockups .tie{display:none}
/* ==========================================================================
   Our Story
   The roof is held still behind the section so the page travels over it. Two
   things make that legible: a shadow along the top edge, so the section above
   reads as sitting on top of this one, and a wash under the copy, because a
   photograph is not reliably pale where dark text lands.
   ========================================================================== */
.about-band{
  position:relative;isolation:isolate;
  background-image:url('../images/about-roof.jpg');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center 35%;
  background-size:cover;
  padding:clamp(2.6rem,5vw,4.2rem) 0;
}
/* the section above is white and so is the wash, so without this the join is
   invisible and nothing appears to pass underneath anything */
.about-band .lip{
  position:absolute;left:0;right:0;top:0;height:26px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,46,72,.16) 0%, rgba(16,46,72,0) 100%);
}
/* The foot of the band ran straight into the white section under it. This has
   to hang off the band, not off .lip, which is itself a 26px strip pinned to
   the top, so bottom:0 inside it would land 26px from the top of the section. */
.about-band::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:2;
  pointer-events:none;
  background:linear-gradient(0deg, rgba(16,46,72,.14) 0%, rgba(16,46,72,0) 100%);
}
/* Three white sections in a row meant the held roof never registered as an
   image at all. The wash is graded instead of flat: heavy where the copy sits,
   thinning across the right so the roof is plainly visible behind the marks.
   The marks are dark artwork and read fine at .62; they are the reason it does
   not thin further on the left of that column. */
.about-band .veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 40%,
    rgba(255,255,255,.64) 58%, rgba(255,255,255,.46) 78%,
    rgba(255,255,255,.32) 100%);
}
.about-band > .container{position:relative;z-index:1}
/* the legacy three-column band painted this column blue-soft; this section is flat */
.about-band .about-copy{background:transparent;padding:0}
.about-band .lead-muted{margin-bottom:1.4rem}
.about-band .about-foot{padding-top:1.4rem}
.about-band .about-list{margin-bottom:1.2rem}
/* the marks, parent above and product line below */
.about-marks{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.8rem 1.6rem;
  /* its own stacking context, so the halo below sits behind the marks rather
     than escaping to the band and landing under the wash */
  position:relative;z-index:1;
}
/* Thinning the wash to show the roof left the strapline and the company line
   sitting on the tile pattern. This lifts them without putting the card back:
   a soft pool with no edge to it, so the roof still reads around the marks. */
.about-marks::before{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 56% at 50% 50%,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.46) 50%, rgba(255,255,255,0) 80%);
}
.about-marks .mi{width:clamp(250px,25vw,340px);height:auto}
.about-marks .rule{width:44px;height:1px;background:rgba(16,46,72,.22);margin:.7rem 0}
/* the lockup this replaced was 640x151; the plain mark is 358x59, so the same
   width would have set it about half the height beside the parent's mark */
.about-marks .al{width:clamp(185px,19vw,250px);height:auto}
.about-marks .tag{
  margin:.5rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body);
}
/* a link that stands apart from the paragraph without dressing up as a button */
.link-cta{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.4rem;
  font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--ink);
  padding-bottom:.4rem;border-bottom:2px solid var(--orange);
  transition:gap .3s ease, color .3s ease;
}
.link-cta svg{color:var(--orange);transition:transform .3s ease}
.link-cta:hover{gap:1rem;color:var(--orange)}
.link-cta:hover svg{transform:translateX(3px)}
/* ---- comparison table on a phone -----------------------------------------
   Three columns will not fit, and a sideways scroll hides two of them. Each
   row becomes its own small card instead, with the column names carried in
   as labels. */
/* A sideways start transform on a full-width column pushes the page 64px wider
   than the viewport on a phone, which is a horizontal scrollbar nobody asked
   for. Below lg everything arrives from underneath instead. */
/* ---- the three infrastructure points under the about intro -------------- */
.about-pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.6rem 2rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);
}
.about-pillars h3{font-size:1.02rem;margin-bottom:.4rem}
.about-pillars p{margin:0;font-size:.92rem;line-height:1.7}
/* ---- the mark has to survive a bright sky ------------------------------- */
/* At rest the overlay header is fully transparent, so a white wordmark over a
   bright frame of the film disappears. A shallow scrim at the very top holds
   it without reading as a bar. */
.site-header.overlay::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,18,30,.60) 0%, rgba(6,18,30,.30) 58%,
                                     rgba(6,18,30,0) 100%);
}
.site-header.overlay{position:sticky;isolation:isolate}
.site-header.overlay .brand img{filter:drop-shadow(0 1px 4px rgba(4,14,24,.55))}
.site-header.overlay .brand-strap{
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(4,14,24,.75);
}
.site-header.overlay .nav-link{text-shadow:0 1px 3px rgba(4,14,24,.5)}
/* nothing to move, so the arrows say so rather than sitting there inert */
.vt-nav.idle{opacity:.3;pointer-events:none}
/* an arrow at its end says so rather than quietly doing nothing */
.vt-nav button:disabled{
  opacity:.32;cursor:default;background:transparent;
  border-color:var(--line);color:var(--body);
}
.vt-nav button:disabled:hover{background:transparent;border-color:var(--line);color:var(--body)}
/* ---- the line fills as the reader moves down it ------------------------- */
.tl-fill{
  position:absolute;left:50%;top:6px;bottom:6px;width:2px;translate:-1px 0;
  background:linear-gradient(180deg,var(--orange) 0%,var(--orange) 70%,rgba(243,102,27,.35) 100%);
  transform-origin:top center;transform:scaleY(0);
  transition:transform .18s linear;z-index:0;border-radius:2px;
}
/* a year is muted until its marker is reached */
.tl-year span{opacity:.24;transition:opacity .45s ease, color .45s ease}
.tl-row.lit .tl-year span{opacity:1;color:var(--orange)}
.tl-body h3{transition:color .45s ease}
.tl-row.lit .tl-body h3{color:var(--ink)}
.tl-row:not(.lit) .tl-body h3{color:var(--body)}
.tl-mark .dot{transition:background .45s ease, box-shadow .45s ease}
.tl-row.lit .tl-mark .dot{
  background:var(--orange);box-shadow:0 0 0 2px var(--orange), 0 0 0 6px #fff;
}
/* the launch keeps its own emphasis on top of all that */
.tl-row.on .tl-year span{opacity:1;color:var(--orange)}
/* ---- finishes grouped by family ----------------------------------------- */
.fin-groups{display:flex;flex-direction:column;gap:1.5rem}
.fin-group-block .fin-rail{height:150px}
.fin-group-label{
  margin:0 0 .5rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);
}
.fin-group-block .fin-blade.on{flex-grow:2.6}
/* ---- footer statement ---------------------------------------------------
   The one line in the footer that is a sentiment rather than a label, so it is
   set apart: a serif italic reads as a signature next to the sans everywhere
   else, and "building trust" carries the emphasis.
   ------------------------------------------------------------------------ */
.site-footer h2.foot-statement{
  font-family:var(--font-accent),Georgia,"Times New Roman",serif;
  font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.18;letter-spacing:.005em;color:#fff;margin:0;
}
.site-footer h2.foot-statement em{
  font-style:italic;color:var(--blue);
}
/* ---- count-up holds its own box ----------------------------------------
   Both spans share one grid cell, so the hidden final string sizes the box
   and the live number cannot rewrap the section as it climbs.
   ------------------------------------------------------------------------ */
.countup{display:inline-grid}
.countup > *{grid-area:1 / 1}
.cu-ghost{visibility:hidden;pointer-events:none}
.cu-unit{
  font-size:.34em;letter-spacing:.02em;margin-left:.18em;vertical-align:.34em;
  -webkit-text-stroke-width:1px;   /* 2px around small type reads as a smudge */
}
/* fixed attachment is ignored or janky on phones, same as the home band */
/* ---- warranty registration ----------------------------------------------
   Sits above the terms, since registering is the thing the warranty depends
   on and the terms are what you read afterwards.
   ------------------------------------------------------------------------ */
.reg-card{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  flex-wrap:wrap;
  background:var(--blue-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.9rem 2rem;
}
.reg-card h2{font-size:1.32rem;margin:0 0 .45rem}
.reg-card p{margin:0;font-size:.95rem;color:var(--body);max-width:52ch}
.reg-card .btn{flex:none}
/* ---- category points ----------------------------------------------------
   The benefit leads on its own line so it is readable at a glance; the
   technical half sits under it for anyone who wants it.
   ------------------------------------------------------------------------ */
.cat-point .pt-lead{
  display:block;margin-bottom:.25rem;
  font-family:var(--font-head);font-weight:800;color:var(--ink);font-size:1rem;
}
/* ---- offices on the contact page ----------------------------------------
   Four addresses stacked one under another read as one block of text with no
   way in. Each gets its own card, two across where there is room.
   ------------------------------------------------------------------------ */
.office-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.office-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.1rem 1.2rem;
}
.office-card .role{
  margin:0 0 .35rem;font-family:var(--font-sans);font-weight:700;color:var(--orange-text);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
}
.office-card .state{margin:0 0 .4rem;font-weight:700;color:var(--ink);font-size:1rem}
.office-card .addr{margin:0;font-size:.88rem;line-height:1.6;color:var(--body)}
.office-card .addr a{color:var(--ink);font-weight:600}
.office-card .addr a:hover{color:var(--orange)}
/* ---- who the roof has gone on -------------------------------------------
   A plate per organisation. While `logo` is null the name is set in type, so
   the block can be laid out and judged without borrowing anyone's artwork.
   ------------------------------------------------------------------------ */
.partners-label{
  text-align:center;margin:0 0 1.6rem;
  font-family:var(--font-sans);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--body);
}
.partner-grid{
  list-style:none;margin:0 auto;padding:0;max-width:780px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.partner-grid li{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  min-height:104px;display:grid;place-items:center;padding:1rem;
}
.partner-grid img{
  /* a round mark needs more height than a wordmark to read at the same weight,
     and the wordmarks are held by width anyway */
  max-width:82%;max-height:76px;width:auto;height:auto;object-fit:contain;
}
.partner-name{
  font-family:var(--font-head);font-weight:800;color:var(--ink);
  font-size:1rem;text-align:center;line-height:1.25;
}
/* The mill is a bright, busy frame, so it carries a heavier wash than the roof
   the other banners use, or the title and the crumbs sit on highlights. */
.page-banner.on-photo{
  background-image:
    linear-gradient(118deg, rgba(16,46,72,.88) 0%, rgba(23,59,90,.80) 50%, rgba(12,35,56,.88) 100%),
    var(--banner-img);
}
.page-banner{background-position:center 44%}
/* ---- specification tables ------------------------------------------------
   Bare white on a white page gave the rows nothing to sit in. A tint, a
   hairline and banded rows read as a table without needing heavy rules.
   ------------------------------------------------------------------------ */
.spec-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--muted);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
}
.spec-table th,.spec-table td{padding:.82rem 1.1rem;font-size:.93rem;vertical-align:top}
.spec-table th{
  width:42%;text-align:left;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.62);
}
.spec-table td{color:var(--body)}
.spec-table tr + tr th,.spec-table tr + tr td{border-top:1px solid var(--line)}
.table-scroll .spec-wide{background:var(--muted)}
.drawing-card{
  background:var(--muted);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.4rem;margin:0;
}
.drawing-card img{width:100%;height:auto;display:block}
.drawing-card figcaption{
  margin-top:.9rem;font-size:.84rem;color:var(--body);text-align:center;
}
/* ---- the hero runs under the header -------------------------------------
   The header is sticky, so it takes layout height and the hero began below it.
   Its gradient then faded into the page rather than into the film, which is
   what read as a pale band across the top. The hero pulls itself up by the
   header's own height so the film starts at the very top and the header sits
   over it. The header carries z-index 60, so it still paints above.
   ------------------------------------------------------------------------ */
.video-hero{margin-top:calc(var(--header-h, 0px) * -1)}
/* ---- the gap under the why block ----------------------------------------
   Its own bottom padding, plus the terms line, plus the next section's top
   padding, stacked into a band of nothing. The section closes tighter and the
   comparison picks straight up.
   ------------------------------------------------------------------------ */
.uses-block{padding-bottom:calc(var(--sp-section) * .55)}
.cmp-band{padding-top:calc(var(--sp-section) * .7)}

/* ==========================================================================
   Navigation, dropdown, accordion — vanilla replacements
   Bootstrap's JS bundle drove these in the original build (collapse, dropdown,
   accordion). main.js now toggles the same `.show`/`.collapsed` classes by
   hand, so this is the plain CSS those classes need to mean something.
   ========================================================================== */
.navbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative}
.navbar-toggler{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;
}
.navbar-nav{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.nav-link{display:block;color:var(--ink);cursor:pointer}
.navbar-collapse{flex-basis:100%;flex-grow:1}
.navbar-collapse:not(.show){display:none}
.navbar-collapse.show{display:block}

.dropdown{position:relative}
.dropdown-toggle{cursor:pointer}
.dropdown-menu{
  position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:11rem;
  margin:.2rem 0 0;padding:.5rem 0;background:#fff;list-style:none;
}
.dropdown-menu.show{display:block}
.dropdown-item{display:block;width:100%;padding:.55rem .85rem;background:transparent;border:0;text-align:left;cursor:pointer}

.accordion-item{background:#fff}
.accordion-header{margin:0}
.accordion-button{
  display:flex;align-items:center;gap:1rem;width:100%;
  background:transparent;border:0;text-align:left;cursor:pointer;
}
.accordion-button::after{
  content:"";width:9px;height:9px;flex:none;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(225deg);transition:transform .25s ease;
}
.accordion-button.collapsed::after{transform:rotate(45deg)}

.collapse:not(.show){display:none}

/* ==========================================================================
   Quote / brochure request dialogs
   One dialog instance per page, reused by every "Get a Quote" / "Download
   Brochure" button on it — main.js fills in the context line and shows it.
   ========================================================================== */
.quote-overlay[hidden]{display:none}
.quote-dialog form .col-12,.quote-dialog form .col-sm-6{margin-bottom:0}
.quote-done{display:none;text-align:center;padding:1rem 0}
.quote-done.show{display:block}
.quote-form.hide{display:none}
.quote-icon{
  display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-bright);margin-bottom:1rem;
}
.quote-icon.brochure{background:var(--orange-soft);color:var(--orange)}
.form-invalid{border-color:var(--orange)!important}
/* ==========================================================================
   AluShade — responsive
   Every @media rule from the design, in the order it was written, so mobile
   and tablet behaviour for a component sits in one predictable place.
   ========================================================================== */

/* ---- navbar breakpoint (Bootstrap's .navbar-expand-lg, hand-rolled) ------ */
@media (min-width:992px){
  .navbar-toggler{display:none}
  .navbar-collapse,.navbar-collapse:not(.show){display:flex!important;flex-basis:auto}
  .navbar-nav{flex-direction:row}
}
@media (max-width:991.98px){
  .navbar-nav .dropdown-menu{position:static;box-shadow:none}
}

@media (max-width:991.98px){.section{padding:60px 0}}
@media (max-width:767.98px){
  .container,.container-fluid{padding-left:20px;padding-right:20px}
}
@media (max-width:400px){
  .container,.container-fluid{padding-left:16px;padding-right:16px}
}
@media (max-width:991.98px){
  .site-header.overlay{background:var(--navy)}
  .site-header .dropdown-menu{box-shadow:none;border-top:0;background:transparent}
  .site-header.overlay .dropdown-item{color:#fff}

  /* The menu used to open as bare links on the header's own white, with the
     page white behind it, so there was no telling where the menu ended and
     the page began. It is a panel now, over a scrim. */
  .site-header .navbar-collapse{
    padding:.5rem .25rem .9rem;
  }
  .site-header .navbar-collapse.show,
  .site-header .navbar-collapse.collapsing{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    margin-top:.85rem;padding:.7rem .85rem 1rem;
    box-shadow:0 26px 54px rgba(16,46,72,.22);
  }
  .site-header.overlay .navbar-collapse.show,
  .site-header.overlay .navbar-collapse.collapsing{
    background:var(--navy-2,#0C2438);border-color:rgba(255,255,255,.14);
  }
  .site-header .navbar-collapse.show .nav-link{padding:.72rem .6rem}
  .site-header .navbar-collapse.show .nav-item + .nav-item{
    border-top:1px solid var(--line);
  }
  .site-header.overlay .navbar-collapse.show .nav-item + .nav-item{
    border-top-color:rgba(255,255,255,.12);
  }
}
@media (min-width:992px){ .nav-scrim{display:none} }
@media (prefers-reduced-motion: reduce){.scroll-top{transition:none}}
@media (max-width:991.98px){
  .hero-card{margin:0;max-width:none;padding:2rem 1.6rem}
}
@media (max-width:767.98px){
  .season-step{padding:.8rem .7rem 1rem}
}
@media (max-width:767.98px){.sheet-bridge{margin-top:-40px}}
@media (max-width:767.98px){
  #solutions .row{--gy:3.4rem}
  .cat-kicker{margin-bottom:.7rem}
  .cat-card .explore{margin-top:1.4rem}
}
@media (max-width:767.98px){.cmp th,.cmp td{padding:.7rem .8rem;font-size:.85rem}}
@media (max-width:767.98px){
  .srule.start{margin-left:auto;margin-right:auto}
  *:has(> .srule.start) > .eyebrow,
  *:has(> .srule.start) > .section-title,
  *:has(> .srule.start) > .panel-h1{text-align:center}
  *:has(> .srule.start) > .lead-muted{margin-inline:auto}
}
@media (max-width:767.98px){.sheet-bridge{margin-top:-38px;padding-bottom:20px}}
@media (max-width:991.98px){
  .about-band .row{min-height:0}
  .about-points{padding:2.4rem 1.6rem}
  .about-tab{display:none}
  .about-copy{padding:2.6rem 1.6rem}
  .about-render{max-width:70%}
}
@media (max-width:575.98px){.product-card .thumb{height:220px}}
@media (max-width:767.98px){.table-compare th,.table-compare td{padding:.85rem .9rem;font-size:.9rem}}
@media (prefers-reduced-motion: reduce){
  .brochure-overlay,.brochure-dialog{animation:none}
}
@media (max-width:575.98px){
  .img-pair{padding-bottom:46px}
  .img-pair .b{border-width:5px}
}
@media (max-width:991.98px){
  .split-band .media{min-height:320px}
  .split-band .panel{padding:3rem 1.6rem}
  .split-band .badge-card{right:1rem;max-width:190px;padding:1.4rem 1.1rem}
}
@media (min-width:992px){
  .wm-point-under{max-width:none;text-align:left}
}
@media (max-width:991.98px){
  /* only the wide gutters — targeting .row itself would override .g-0 and
     re-introduce margins on the full-bleed bands that rely on zero */
  .row.g-5,.row.g-lg-5,.row.g-4,.row.g-lg-4{--gx:1.5rem;--gy:1.5rem}
}
@media (max-width:767.98px){
  .brand-watermark{font-size:clamp(3rem,15vw,5rem)}
}
@media (max-width:991.98px){
  .hero-card{padding:1.8rem 1.4rem}
  .hero-card h1{font-size:clamp(1.6rem,7vw,2.1rem)}
  .hero-card p{font-size:.95rem}
  /* the photograph is hidden on phones by the grid, so bring it back above
     the points rather than losing it entirely */
  .about-band .about-shot-mobile{display:block;height:230px;position:relative}
  .about-points{padding:2.2rem 1.5rem}
  .about-copy{padding:2.4rem 1.5rem}
  .about-render{max-width:78%}
  .about-foot{gap:1rem}
  .about-foot .stat{padding-right:1rem;font-size:.86rem}
  .cat-card .shot{height:240px}
  .cat-card .panel{margin:-70px .75rem 0}
  /* the comparison table scrolls inside its own box instead of the page */
  .cmp .table-responsive{-webkit-overflow-scrolling:touch}
  .cmp table{min-width:520px}
  .why-box{padding:1.7rem 1.4rem}
  .step-card{padding:2.2rem 1rem 1.4rem}
  .tcard{padding:1.6rem 1.3rem}
}
@media (max-width:991.98px){
  .figures .blueprint{right:-90px;width:min(64%,340px);opacity:.10}
}
@media (max-width:575.98px){
  .figures .blueprint{display:none}
  .scroll-top{right:14px;bottom:14px;width:42px;height:42px}
  .sheet-bridge{margin-top:-22px}
}
@media (max-width:991.98px){
  .pd-top{padding-top:44px}
  .pd-stage{height:300px;padding:1.4rem}
  .pd-thumb{height:66px}
  .pd-panel{padding:1.4rem}
  .pd-tab{padding:.75rem 1rem;font-size:.9rem}
}
@media (prefers-reduced-motion: reduce){.quote-overlay,.quote-dialog{animation:none}}
@media (max-width:991.98px){
  .cat-rail{position:static}
  .cat-hero img{height:250px}
}
@media (max-width:991.98px){
  .pd-video{padding-top:48px;padding-bottom:48px}
  .pd-related-head{margin-bottom:2.2rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .img-frame:hover img,.cat-hero:hover img{transform:none}
}
@media (max-width:991.98px){
  .page-banner{padding:48px 0 42px;background-position:center 46%}
}
@media (max-width:575.98px){
  .page-banner{padding:34px 0 30px}
  .page-banner h1::after{margin-top:.7rem}
}
@media (max-width:575.98px){
  .vblock-play .btn-play{width:62px;height:62px}
}
@media (prefers-reduced-motion: reduce){
  .vblock-play .btn-play::before{animation:none}
}
@media (max-width:1199.98px){
  .spec-wide thead th:first-child,
  .spec-wide tbody th{position:sticky;left:0;z-index:2}
  .spec-wide thead th:first-child{z-index:3}
  /* an edge, so the pinned column reads as held rather than overlapping.
     A box-shadow rather than a pseudo-element: an absolutely positioned one
     sits outside the cell and adds its own width to the table's scrollWidth. */
  .spec-wide thead th:first-child,
  .spec-wide tbody th{box-shadow:9px 0 10px -8px rgba(16,46,72,.30)}
  .table-scroll{overscroll-behavior-x:contain}
}
@media (max-width:575.98px){
  .spec-wide{font-size:.86rem}
  .spec-wide th,.spec-wide td{padding:.7rem .8rem}
  /* the pinned column cannot take half the screen */
  .spec-wide tbody th,.spec-wide thead th:first-child{max-width:118px;white-space:normal}
}
@media (max-width:991.98px){
  .cat-top > .col-lg-4{order:2}
  .cat-top > .col-lg-8{order:1}
}
@media (max-width:991.98px){
  .site-nav .btn-brand.btn-sm{width:100%}
  /* 36x31 is under the 44px finger target, and this is the only way into the
     menu on a phone */
  .navbar-toggler{
    width:46px;height:46px;display:inline-flex;align-items:center;
    justify-content:center;padding:0;
  }
}
@media (max-width:575.98px){
  .vh-block{max-width:100%}
}
@media (max-width:991.98px){
  .fin-rail{height:220px}
  .panel-hero{padding-top:56px}
  .panel-chip{right:auto;left:2%;bottom:2%}
}
@media (max-width:575.98px){
  .fin-rail{flex-wrap:wrap;height:auto}
  .fin-blade{flex:1 1 27%;height:74px}
  .fin-blade.on{flex-grow:1}
  .fin-blade .lbl{opacity:1;transform:none;font-size:.72rem;letter-spacing:.04em}
}
@media (prefers-reduced-motion: reduce){
  .fin-plate,.fin-blade{transition:none}
}
@media (prefers-reduced-motion: reduce){
  .exploded .call{opacity:1;transform:none;transition:opacity .2s ease}
}
@media (max-width:991.98px){
}
@media (max-width:991.98px){
  .ap-row{grid-template-columns:1fr;gap:1.8rem}
  .ap-row.flip .ap-shot{order:0}
  .ap-row.flip .ap-body{order:1}
  .ap-index{top:-1.6rem;font-size:4rem}
  .apd-hero{padding-top:56px}
}
@media (max-width:991.98px){
  :root{--sp-section:64px;--sp-section-sm:46px}
}
@media (max-width:575.98px){
  .wa-float{right:14px;bottom:76px;width:48px;height:48px}
}
@media (prefers-reduced-motion: reduce){.wa-float::after{animation:none}}
@media (min-width:992px){.footer-badges{justify-content:flex-end}}
@media (max-width:575.98px){.footer-badges{gap:.9rem}.footer-badges img{height:58px}}
@media (max-width:575.98px){
  .legacy li{grid-template-columns:1fr;gap:.35rem;padding:1.25rem 0}
  .legacy .yr{font-size:1.05rem}
}
@media (prefers-reduced-motion: reduce){
  .pill,.pill i{transition:background .2s ease}
  .pill:hover{transform:none}
  .pill:hover i{transform:none}
}
@media (max-width:767.98px){
  .vh-features{display:none}     /* the phone has no room for it under the copy */
}
@media (max-width:575.98px){
  .about-lockups{gap:1rem}
  .about-lockups .tie{display:none}
  .about-lockups img{height:38px}
}
@media (max-width:575.98px){
  .about-lockups{margin:1.8rem 0 1.6rem}
}
@media (max-width:767.98px){
  .cmp table{border-spacing:8px 0}
  .cmp th,.cmp td{padding:.85rem .9rem;font-size:.84rem}
  .cmp tbody tr:not(:last-child) td::after{left:.9rem;right:.9rem}
}
@media (prefers-reduced-motion: reduce){
  .panel-promo:hover .panel-promo-stage img{transform:none}
}
@media (max-width:991.98px){
  .exploded .shot{width:100%}
  .exploded .call{position:static;width:100%;text-align:left;margin-top:1.6rem;
    padding-left:1.1rem;border-left:2px solid var(--line)}
  .exploded .call .dot,.exploded .call .line{display:none}
  .exploded.focused .call{opacity:1}
}
@media (max-width:991.98px){
  .ps{padding:0}
  .ps-scene{grid-template-columns:1fr;gap:1.2rem;align-content:center}
  .ps-stage{min-height:clamp(580px,104vw,720px)}
  .ps-shot img{max-height:275px}
  .ps-shot .disc{width:clamp(165px,42vw,225px);left:66%;top:30%}
  .ps-copy{max-width:none}
  .ps-n{left:8%;top:-6%;font-size:clamp(8rem,30vw,12rem)}
  .ps-rail{position:static;translate:none;flex-direction:row;justify-content:center;margin-top:1.3rem}
  .ps-dot .tip{display:none}
  .ps-arrows{justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .ps-scene,.ps-n,.ps-shot .disc,.ps-shot img,.ps-copy > *{transition-duration:.01ms}
  .ps-shot .disc,.ps-shot img{transform:none}
}
@media (max-width:991.98px){
  /* the block runs the full width on a phone, so the scrim runs up it instead */
  .vh-copy::before{
    background:linear-gradient(180deg,
      rgba(6,18,30,.34) 0%, rgba(6,18,30,.72) 38%, rgba(6,18,30,.86) 100%);
  }
}
@media (max-width:575.98px){
  .rc-ask{flex-direction:column;align-items:flex-start}
  .rc-shot img{height:250px}
}
@media (max-width:767.98px){
  .tl::before{left:19px;translate:0}
  .tl-row,.tl-row.flip{grid-template-columns:38px 1fr;gap:0 1rem;padding:1.4rem 0}
  .tl-row .tl-mark,.tl-row.flip .tl-mark{order:1;justify-self:start}
  .tl-row .tl-year,.tl-row.flip .tl-year{order:2;text-align:left;padding:0 0 .2rem}
  .tl-row .tl-body,.tl-row.flip .tl-body{
    order:3;grid-column:2;text-align:left;padding:0;
  }
  .tl-row.flip .tl-body p{margin-left:0}
  .tl-year span{font-size:1.6rem}
  .tl-row .tl-mark .badge{width:40px;height:40px;box-shadow:0 0 0 6px #fff}
  .tl-row .tl-mark .badge svg{width:18px;height:18px}
}
@media (max-width:991.98px){
  .uses-stage{padding:.5rem 0 1.5rem}
  .uses-block .wm-point{margin-bottom:2rem}
}
@media (prefers-reduced-motion: reduce){
  .uses-stage img{animation:none}
}
@media (max-width:480px){
  .site-header .brand img{width:150px}
  .brand-strap{font-size:.72rem;letter-spacing:.04em}
}
@media (max-width:360px){
  .site-header .brand img{width:138px}
  .brand-strap{font-size:.68rem;letter-spacing:.03em}
}
@media (max-width:991.98px){
  /* fixed attachment is ignored or janky on phones */
  .about-band{background-attachment:scroll;background-position:center}
  /* the columns stack here, so the wash grades down the page instead of across
     it: heavy over the copy at the top, thinning over the marks at the foot so
     the roof shows there too */
  .about-band .veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.91) 44%,
      rgba(255,255,255,.70) 70%, rgba(255,255,255,.46) 100%);
  }
}
@media (max-width:991.98px){
  .about-stage{position:static;height:auto;min-height:340px;padding:3rem 1rem}
  .about-marks{padding:0}
}
@media (max-width:767.98px){
  /* Nine stacked rows ran the comparison over two screens. It is a swipe rail
     now: one attribute per card, both answers on it, with the next card
     peeking so the gesture is visible without a label telling you to swipe.
     Proximity snap, never mandatory, a card wider than the remaining scroll
     range makes 0 the only valid mandatory snap point and the rail springs
     back. */
  .cmp{background:none;box-shadow:none;border-radius:0;overflow:visible}
  .cmp .table-responsive{
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:.2rem 0 .5rem;
  }
  .cmp .table-responsive::-webkit-scrollbar{display:none}
  /* the desktop rule clips the table to give it an 18px radius, which also
     clipped the rail: the table's own scrollWidth was 1884 while the scroller
     outside it still measured 328 and never scrolled */
  .cmp table{display:block;min-width:0;border-spacing:0;box-shadow:none;overflow:visible;border-radius:0}
  .cmp thead{display:none}
  .cmp tbody{display:flex;gap:.7rem;padding-right:20%}
  .cmp tbody tr{
    flex:0 0 min(78vw,320px);scroll-snap-align:center;
    display:flex;flex-direction:column;margin:0;
    background:#fff;border-radius:14px;overflow:hidden;
    box-shadow:0 10px 26px rgba(16,46,72,.10);
  }
  .cmp tbody td{display:block;width:100%;border-radius:0!important;padding:.85rem 1rem;font-size:.87rem}
  .cmp tbody td:first-child{
    background:var(--navy);color:#fff;font-weight:800;font-family:var(--font-head);
    font-size:.92rem;padding:.8rem 1rem;
  }
  .cmp tbody td:nth-child(2){flex:1;background:var(--orange-soft);color:var(--ink);font-weight:600}
  .cmp tbody td:last-child{flex:1;color:var(--body)}
  .cmp tbody td:nth-child(2)::before{content:"AluShade"}
  .cmp tbody td:last-child::before{content:"GI roofing"}
  .cmp tbody td:nth-child(2)::before,.cmp tbody td:last-child::before{
    display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--body);margin-bottom:.25rem;
  }
  .cmp tbody td:nth-child(2)::before{color:var(--orange-text)}
  .cmp tbody tr:not(:last-child) td::after{display:none}
}
@media (max-width:767.98px){ .tl-fill{left:19px;translate:0} }
@media (prefers-reduced-motion: reduce){
  .tl-fill{transition:none}
  .tl-year span,.tl-body h3{opacity:1;transition:none}
}
@media (max-width:575.98px){
  .fin-group-block .fin-rail{height:auto}
}
@media (max-width:991.98px){
  .site-footer h2.foot-statement{font-size:clamp(1.7rem,6vw,2.2rem)}
}
@media (max-width:991.98px){
  .figures{background-attachment:scroll;background-position:center}
  .figures .veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.93) 70%, rgba(255,255,255,.92) 100%);
  }
}
@media (max-width:767.98px){
  .reg-card{padding:1.5rem 1.3rem;gap:1.1rem}
  .reg-card .btn{width:100%}
}
@media (max-width:767.98px){
  .office-grid{grid-template-columns:1fr}
}
@media (max-width:575.98px){
  .partner-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .partner-grid li{min-height:84px}
}
@media (max-width:575.98px){
  .spec-table th,.spec-table td{padding:.7rem .8rem;font-size:.86rem}
  .spec-table th{width:46%}
}