/*
Theme Name: Seal Point Waterproofing
Theme URI: https://sealpoint.com.au
Author: Gilic Systems
Author URI: https://gilicsystems.com
Description: Custom theme for Seal Point Waterproofing, waterproofing membranes and floor coatings, Australia wide.
Version: 1.0
Text Domain: seal-point
*/

  :root{
    --bg-page:#EEF3F6;
    --bg-page-alt:#E2EBF0;
    --bg-navy:#123863;
    --bg-navy-2:#0D2C4E;
    --ink:#0F2135;
    --ink-soft:#526676;
    --paper:#FFFFFF;
    --accent-teal:#12888C;
    --accent-teal-light:#5FD1CE;
    --accent-green:#3E9B3F;
    --accent-green-dark:#2C7A2E;
    --line:rgba(15,33,53,0.15);
    --line-dark:rgba(255,255,255,0.16);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0;
    background:var(--bg-page);
    color:var(--ink);
    font-family:'Archivo',sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    position:relative;
    overflow-x:hidden;
  }
  /* film-grain overlay, kills the flat-vector "AI" look */
  body::after{
    content:'';
    position:fixed; inset:0; z-index:200; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1,h2,h3,h4{font-family:'Archivo',sans-serif; margin:0; letter-spacing:-0.01em; color:var(--ink); text-transform:uppercase; font-weight:800;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  button{font-family:inherit; cursor:pointer;}
  .mono{font-family:'Space Mono',monospace; letter-spacing:0.04em;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px; position:relative;}
  .eyebrow{
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent-teal);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:18px; height:1px; background:var(--accent-teal); display:inline-block;}
  .ph{
    background:
      repeating-linear-gradient(135deg, rgba(15,33,53,0.06) 0px, rgba(15,33,53,0.06) 2px, transparent 2px, transparent 14px),
      linear-gradient(180deg, #D3E1E8, #BCD1DB);
    border:1px solid var(--line);
    position:relative;
    display:flex; align-items:flex-end;
    color:var(--ink-soft);
    filter:saturate(1) hue-rotate(0deg);
    transition:filter .35s ease;
  }
  .ph span{
    font-family:'Space Mono',monospace;
    font-size:11px;
    letter-spacing:0.05em;
    background:rgba(255,255,255,0.92);
    padding:5px 9px;
    margin:10px;
    border:1px solid var(--line);
  }

  /* brush-stroke headline highlight — echoes the logo's paintbrush mark */
  .brush{position:relative; display:inline-block; padding:0 8px; color:#fff;}
  .brush::before{
    content:'';
    position:absolute; inset:-8px -10px;
    background:linear-gradient(100deg, var(--accent-teal), var(--accent-green));
    clip-path:polygon(2% 22%,7% 4%,15% 17%,23% 1%,31% 19%,41% 3%,51% 16%,61% 2%,71% 20%,81% 4%,91% 18%,98% 7%,99% 84%,91% 96%,81% 79%,73% 98%,63% 81%,53% 97%,43% 80%,33% 99%,23% 82%,13% 97%,5% 81%,1% 91%);
    transform:scaleX(0); transform-origin:left center;
    z-index:-1;
    animation:brushIn .65s cubic-bezier(.16,.84,.44,1) .45s forwards;
  }
  @keyframes brushIn{to{transform:scaleX(1);}}

  /* blueprint grid texture for dark navy sections */
  .blueprint{
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:34px 34px;
  }

  /* diagonal seal-seam dividers — the logo's own diagonal, repeated as a structural device */
  .seam{height:52px; position:relative; overflow:hidden;}
  .seam svg{display:block; width:100%; height:100%;}

  /* ---------- Top utility bar ---------- */
  .utility{background:var(--bg-navy-2); color:#fff; font-size:12.5px;}
  .utility .wrap{display:flex; justify-content:space-between; align-items:center; height:36px;}
  .utility-left{display:flex; gap:22px; align-items:center; color:rgba(255,255,255,0.6);}
  .utility-left a{color:rgba(255,255,255,0.88);}
  .utility-right{display:flex; gap:20px; align-items:center;}
  .utility-right a{color:rgba(255,255,255,0.82);}

  /* ---------- Nav ---------- */
  header.main{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
  .navbar{display:flex; align-items:center; justify-content:space-between; height:80px;}
  .logo-lockup{display:flex; flex-direction:column; line-height:1;}
  .logo-lockup .name{font-size:24px; font-weight:700; color:var(--bg-navy); font-family:'Archivo',sans-serif; text-transform:uppercase;}
  .logo-lockup .name .dot{color:var(--accent-green);}
  .logo-lockup .sub{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.2em; color:var(--accent-teal); margin-top:3px;}
  nav.primary{display:flex; gap:8px;}
  nav.primary a{
    font-size:13.5px; font-weight:500; color:var(--ink); position:relative; padding:9px 14px;
    font-family:'Space Mono',monospace; letter-spacing:0.02em; text-transform:uppercase; font-size:11.5px;
    transition:color .2s ease;
  }
  nav.primary a::before{
    content:''; position:absolute; inset:0; background:var(--accent-green);
    clip-path:polygon(0 100%, 100% 100%, 88% 0, 0 0); opacity:0; transition:opacity .2s ease; z-index:-1;
  }
  nav.primary a:hover{color:#fff;}
  nav.primary a:hover::before{opacity:1;}
  .nav-actions{display:flex; align-items:center; gap:20px;}
  .icon-btn{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500;}
  .cart-btn{position:relative; display:flex; align-items:center; gap:8px; border:1.5px solid var(--bg-navy); padding:9px 16px; font-size:13px; font-weight:700; background:transparent; color:var(--bg-navy); font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.02em;}
  .cart-count{background:var(--accent-green); color:#fff; font-size:11px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:absolute; top:-8px; right:-8px;}

  /* ---------- Hero ---------- */
  .hero{padding:70px 0 64px; overflow:hidden; position:relative;}
  .hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
  .hero h1{font-size:58px; line-height:0.98; margin:20px 0 24px; font-weight:700;}
  .hero p.lead{font-size:17px; color:var(--ink-soft); max-width:460px; margin-bottom:30px; font-family:'Archivo';}
  .hero-ctas{display:flex; gap:14px; margin-bottom:38px;}

  .btn{
    padding:16px 27px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
    font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:0.025em;
    position:relative; overflow:hidden; border:1.5px solid transparent; z-index:1;
  }
  .btn-primary{background:var(--accent-green); border-color:var(--accent-green-dark); color:#fff;}
  .btn-primary::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.4), transparent 65%);
    opacity:0; transition:opacity .3s ease;
  }
  .btn-primary:hover::before{opacity:1;}
  .btn-primary::after{
    content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform:skewX(-18deg); transition:left .55s ease;
  }
  .btn-primary:hover::after{left:130%;}
  .btn-ghost{
    color:var(--bg-navy); border:1.5px solid var(--bg-navy);
    background:linear-gradient(var(--bg-navy), var(--bg-navy)) no-repeat;
    background-size:0% 100%; transition:background-size .3s ease, color .3s ease;
  }
  .btn-ghost:hover{background-size:100% 100%; color:#fff;}

  .trust-row{display:flex; gap:26px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px;}
  .trust-row div{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; font-family:'Space Mono',monospace; font-weight:700;}
  .trust-row b{color:var(--ink); font-weight:600;}

  /* Signature diagram — annotated like a spec drawing, not a card list */
  .xsec-wrap{position:relative;}
  .xsec{background:var(--bg-navy); border:1px solid var(--bg-navy-2); padding:26px 26px 20px; position:relative;}
  .xsec-label{color:#fff; font-size:11px; display:flex; justify-content:space-between; margin-bottom:16px; font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:.05em;}
  .xsec-label .accent{color:var(--accent-teal-light);}
  .xsec-diagram{display:flex; flex-direction:column; border:1px solid var(--line-dark);}
  .xlayer{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--line-dark);
    cursor:pointer; transition:padding-left .15s ease, background .15s ease;
  }
  .xlayer:last-child{border-bottom:none;}
  .xlayer:hover{padding-left:26px; background:rgba(255,255,255,0.06);}
  .xlayer .name{color:#fff; font-family:'Archivo'; font-weight:600; font-size:14px; text-transform:none;}
  .xlayer .mm{color:rgba(255,255,255,0.5); font-size:11px; font-family:'Space Mono',monospace;}
  .xlayer .swatch{width:14px; height:14px; margin-right:12px; flex-shrink:0; border:1px solid rgba(255,255,255,0.3);}
  .xlayer-left{display:flex; align-items:center;}
  .xnote{margin-top:14px; font-size:12px; color:rgba(255,255,255,0.62); min-height:16px; font-family:'Archivo';}
  /* leader-line callouts, blueprint-annotation style */
  .callout{position:absolute; font-family:'Space Mono',monospace; font-size:10.5px; color:var(--accent-teal); text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:6px; opacity:0; animation:calloutIn .5s ease forwards;}
  .callout::before{content:''; width:26px; height:1px; background:var(--accent-teal); border-top:1px dashed var(--accent-teal);}
  .callout.c1{top:-14px; right:36px; animation-delay:1.1s;}
  .callout.c2{bottom:-16px; right:40px; flex-direction:row; animation-delay:1.3s;}
  .callout.c2::before{background:var(--accent-green); border-top-color:var(--accent-green);}
  @keyframes calloutIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- Marquee ticker ---------- */
  .marquee{background:var(--bg-navy-2); overflow:hidden; padding:14px 0; white-space:nowrap; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
  .marquee-track{display:inline-flex; animation:marquee 26s linear infinite;}
  .marquee-track span{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,0.75); text-transform:uppercase; padding:0 22px; display:inline-flex; align-items:center; gap:22px;}
  .marquee-track span::after{content:'✦'; color:var(--accent-green); font-size:9px;}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ---------- Stats strip ---------- */
  .stats{background:var(--bg-navy-2); color:#fff; padding:36px 0;}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .stat b{display:block; font-family:'Archivo',sans-serif; font-size:34px; color:var(--accent-teal-light); font-weight:700;}
  .stat span{font-size:11.5px; color:rgba(255,255,255,0.62); text-transform:uppercase; letter-spacing:0.07em; font-family:'Space Mono',monospace;}

  /* ---------- Section shell ---------- */
  section{padding:80px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px;}
  .section-head h2{font-size:36px; font-weight:700; margin-top:14px;}
  .section-head p{color:var(--ink-soft); max-width:400px; font-size:14px; font-family:'Archivo';}

  /* scroll-reveal */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .apps-grid .reveal:nth-child(1){transition-delay:.02s;} .apps-grid .reveal:nth-child(2){transition-delay:.08s;}
  .apps-grid .reveal:nth-child(3){transition-delay:.14s;} .apps-grid .reveal:nth-child(4){transition-delay:.2s;}
  .apps-grid .reveal:nth-child(5){transition-delay:.26s;} .apps-grid .reveal:nth-child(6){transition-delay:.32s;}
  .shop-grid .reveal:nth-child(1){transition-delay:.02s;} .shop-grid .reveal:nth-child(2){transition-delay:.1s;}
  .shop-grid .reveal:nth-child(3){transition-delay:.18s;} .shop-grid .reveal:nth-child(4){transition-delay:.26s;}

  /* ---------- Applications grid — diagonal-cut tiles, corner-bracket hover ---------- */
  .apps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 18px;}
  .app-card{position:relative; height:270px; overflow:visible;}
  .app-card .tile{position:relative; height:100%; overflow:hidden; clip-path:polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);}
  .app-card .ph{width:100%; height:100%; padding:18px;}
  .app-card:hover .ph{filter:saturate(1.5) hue-rotate(150deg) brightness(.85);}
  .app-card .info{position:absolute; left:0; right:0; bottom:0; padding:18px 20px 22px; background:linear-gradient(180deg, transparent, rgba(13,44,78,0.92) 55%); color:#fff;}
  .app-card h4{color:#fff; font-size:19px;}
  .app-card p{font-size:12px; color:rgba(255,255,255,0.75); margin-top:5px; font-family:'Archivo'; text-transform:none;}
  .app-card::before, .app-card::after{content:''; position:absolute; width:20px; height:20px; opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:3;}
  .app-card::before{top:8px; left:8px; border-top:2px solid var(--accent-teal-light); border-left:2px solid var(--accent-teal-light); transform:translate(-6px,-6px);}
  .app-card::after{bottom:14px; right:14px; border-bottom:2px solid var(--accent-green); border-right:2px solid var(--accent-green); transform:translate(6px,6px);}
  .app-card:hover::before, .app-card:hover::after{opacity:1; transform:translate(0,0);}

  /* ---------- Systems comparison table ---------- */
  .table-wrap{border:1px solid var(--line); overflow-x:auto; background:var(--paper);}
  table.systems{width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px; font-family:'Archivo';}
  table.systems th{
    text-align:left; font-family:'Space Mono',monospace; font-weight:500; font-size:10.5px;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);
    padding:14px 18px; border-bottom:2px solid var(--bg-navy); background:var(--bg-page-alt);
  }
  table.systems td{padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; position:relative;}
  table.systems tbody tr{transition:background .15s ease;}
  table.systems tbody tr:hover{background:rgba(18,136,140,0.06);}
  table.systems tbody tr td:first-child::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-teal); transform:scaleY(0); transition:transform .18s ease; transform-origin:top;}
  table.systems tbody tr:hover td:first-child::before{transform:scaleY(1);}
  table.systems tr:last-child td{border-bottom:none;}
  table.systems td.name{font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; text-transform:uppercase;}
  .pill{display:inline-block; padding:3px 9px; font-size:10.5px; font-family:'Space Mono',monospace; border:1px solid var(--line); color:var(--accent-teal);}

  /* ---------- Membrane spotlight (dark navy, blueprint texture) ---------- */
  .waterproof{background:var(--bg-navy); color:#fff;}
  .waterproof .section-head h2{color:#fff;}
  .waterproof .section-head p{color:rgba(255,255,255,0.6);}
  .waterproof .eyebrow{color:var(--accent-teal-light);}
  .waterproof .eyebrow::before{background:var(--accent-teal-light);}
  .membranes{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
  .colour-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:22px 16px; padding:8px 0 12px;}
  .colour-swatch{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
  .colour-swatch .dot{width:52px; height:52px; border-radius:50%; box-shadow:0 3px 10px rgba(0,0,0,0.35); transition:transform .2s ease;}
  .colour-swatch:hover .dot{transform:scale(1.08);}
  .colour-swatch .label{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,0.75);}
  .membrane-card{background:var(--bg-navy); padding:26px 22px; transition:background .2s ease, transform .2s ease;}
  .membrane-card:hover{background:var(--bg-navy-2); transform:translateY(-4px);}
  .membrane-card .idx{font-family:'Space Mono',monospace; font-size:12px; color:var(--accent-green);}
  .membrane-card h4{color:#fff; font-size:17px; margin:14px 0 10px;}
  .membrane-card p{font-size:12px; color:rgba(255,255,255,0.6); font-family:'Archivo'; text-transform:none;}

  /* ---------- Shop preview — horizontal cards, image beside desc + price ---------- */
  .shop-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
  .product-card{position:relative; display:flex; flex-direction:row; border:1px solid var(--line); background:var(--paper); overflow:hidden;}
  .product-card::before, .product-card::after{content:''; position:absolute; width:16px; height:16px; opacity:0; transition:opacity .2s ease; z-index:3;}
  .product-card::before{top:8px; right:8px; border-top:2px solid var(--accent-teal); border-right:2px solid var(--accent-teal);}
  .product-card::after{bottom:8px; left:8px; border-bottom:2px solid var(--accent-green); border-left:2px solid var(--accent-green);}
  .product-card:hover::before, .product-card:hover::after{opacity:1;}
  .product-media{position:relative; width:140px; min-width:140px; overflow:hidden;}
  .product-media .ph{width:140px; min-width:140px; height:100%; display:block; transition:opacity .35s ease;}
  .hover-floor{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease;}
  .hover-floor-tag{position:absolute; left:8px; bottom:8px; z-index:2; background:rgba(13,44,78,0.85); color:#fff; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:4px 7px; opacity:0; transition:opacity .35s ease;}
  .product-card:hover .hover-floor, .product-card:hover .hover-floor-tag{opacity:1;}
  .product-card:hover .product-media .ph{opacity:0;}
  .product-body{flex:1; padding:16px 20px; display:flex; flex-direction:column; justify-content:center; gap:5px;}
  .product-body .cat{font-family:'Space Mono',monospace; font-size:10px; color:var(--accent-teal); text-transform:uppercase; letter-spacing:.04em;}
  .product-body h4{font-size:16px;}
  .product-body .desc{font-size:12.5px; color:var(--ink-soft); line-height:1.4; font-family:'Archivo'; text-transform:none;}
  .product-foot{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
  .product-foot .price{font-family:'Archivo',sans-serif; font-weight:700; font-size:19px;}
  .add-btn{padding:10px 17px; background:var(--bg-navy); color:#fff; border:none; font-size:12px; font-weight:700; letter-spacing:0.02em; font-family:'Archivo',sans-serif; text-transform:uppercase; transition:background .2s ease;}
  .add-btn:hover{background:var(--accent-green);}

  /* ---------- CTA banner ---------- */
  .cta-banner{background:var(--accent-green); color:#fff; text-align:center; position:relative; overflow:hidden;}
  .cta-banner h2{color:#fff; font-size:34px; max-width:640px; margin:0 auto 16px;}
  .cta-banner p{color:rgba(255,255,255,0.9); max-width:480px; margin:0 auto 28px; font-size:14.5px; font-family:'Archivo'; text-transform:none;}
  .cta-banner .btn-ghost{border-color:#fff; color:#fff; background-image:linear-gradient(#fff,#fff);}
  .cta-banner .btn-ghost:hover{color:var(--accent-green-dark);}

  /* ---------- Footer ---------- */
  footer{background:var(--bg-navy-2); color:rgba(255,255,255,0.7); padding:60px 0 0;}
  .footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:40px; border-bottom:1px solid var(--line-dark);}
  .footer-logo{color:#fff; font-size:22px; font-weight:700; font-family:'Archivo',sans-serif;}
  .footer-logo .dot{color:var(--accent-green);}
  footer h5{color:#fff; font-size:12px; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.08em; font-family:'Space Mono',monospace; font-weight:500;}
  footer li{margin-bottom:9px; font-size:13px;}
  footer li a{transition:color .15s ease;}
  footer li a:hover{color:var(--accent-teal-light);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:12px; color:rgba(255,255,255,0.4); font-family:'Space Mono',monospace;}
  .pay-icons{display:flex; gap:7px; align-items:center;}
  .pay-icons svg{display:block; border:1px solid var(--line-dark); border-radius:4px;}

  /* ---------- Cart drawer ---------- */
  .overlay{position:fixed; inset:0; background:rgba(13,44,78,0.55); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:90;}
  .overlay.active{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw;
    background:var(--paper); z-index:91; transform:translateX(100%); transition:transform .3s cubic-bezier(.16,.84,.44,1);
    display:flex; flex-direction:column; border-left:1px solid var(--line);
  }
  .drawer.active{transform:translateX(0);}
  .drawer-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line);}
  .drawer-head h3{font-size:19px;}
  .drawer-close{background:none; border:none; font-size:20px; color:var(--ink);}
  .drawer-items{flex:1; overflow-y:auto; padding:10px 24px;}
  .cart-line{display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--line);}
  .cart-line .ph{width:64px; height:64px; flex-shrink:0;}
  .cart-line-body{flex:1; display:flex; flex-direction:column;}
  .cart-line-body .name{font-weight:600; font-size:13px; font-family:'Archivo';}
  .cart-line-body .cat{font-size:10.5px; color:var(--ink-soft); font-family:'Space Mono',monospace; text-transform:uppercase;}
  .cart-line-body .row{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
  .qty-ctrl{display:flex; align-items:center; border:1px solid var(--line);}
  .qty-ctrl button{background:none; border:none; width:24px; height:24px; font-size:14px;}
  .qty-ctrl span{width:24px; text-align:center; font-size:12.5px;}
  .cart-empty{padding:60px 0; text-align:center; color:var(--ink-soft); font-size:13px; font-family:'Archivo';}
  .drawer-foot{padding:22px 24px 26px; border-top:1px solid var(--line);}
  .subtotal-row{display:flex; justify-content:space-between; font-size:15px; font-weight:600; margin-bottom:16px; font-family:'Archivo';}
  .pay-buttons{display:flex; flex-direction:column; gap:10px;}
  .pay-btn{padding:14px; border:none; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.02em;}
  .pay-stripe{background:#635BFF; color:#fff;}
  .pay-paypal{background:#FFC439; color:#111;}
  .pay-secure{font-size:10.5px; color:var(--ink-soft); text-align:center; margin-top:12px; font-family:'Space Mono',monospace;}

  @media (max-width:980px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero h1{font-size:42px;}
    .apps-grid{grid-template-columns:repeat(2,1fr);}
    .shop-grid{grid-template-columns:1fr;}
    .membranes{grid-template-columns:repeat(2,1fr);}
    .colour-grid{grid-template-columns:repeat(4,1fr);}
    .stats .wrap{grid-template-columns:repeat(2,1fr); row-gap:24px;}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
    nav.primary{display:none;}
    .callout{display:none;}
  }
  .hero .wrap{position:relative; z-index:1;}
  .hero-bg-product{
    position:absolute; top:-70px; right:-40px; width:960px; max-width:none;
    z-index:0; opacity:.34; pointer-events:none;
    filter:saturate(1.05) contrast(1.1);
    -webkit-mask-image:radial-gradient(circle at 60% 42%, black 46%, transparent 82%);
    mask-image:radial-gradient(circle at 60% 42%, black 46%, transparent 82%);
  }
  @media (max-width:980px){
    .hero-bg-product{ width:480px; top:-20px; right:-80px; opacity:.24; }
  }

  /* ---------- Mobile overhaul (phones) ---------- */
  @media (max-width:640px){
    .wrap{padding:0 18px;}
    section{padding:48px 0;}

    /* utility bar: too many items for a phone width, drop it entirely */
    .utility{display:none;}

    .navbar{height:76px; gap:14px;}
    .logo-lockup .name{font-size:19px;}
    .logo-lockup .sub{font-size:8.5px; letter-spacing:0.16em;}
    .nav-actions{gap:14px;}
    .icon-btn .label{display:none;}
    .icon-btn{font-size:17px;}
    .cart-btn{padding:8px 12px; font-size:11.5px; gap:6px;}
    .cart-btn .label{display:none;}

    /* hero: kill the oversized background bucket, it only fights the headline on narrow screens */
    .hero{padding:36px 0 44px;}
    .hero-bg-product{display:none;}
    .hero h1{font-size:32px; line-height:1.05;}
    .hero p.lead{font-size:15px; max-width:100%;}
    .hero-ctas{flex-direction:column; gap:10px; margin-bottom:28px;}
    .hero-ctas .btn{width:100%; justify-content:center; padding:15px 20px;}
    .trust-row{gap:16px 22px;}

    .xsec{padding:20px 18px 16px;}
    .xsec-label{flex-wrap:wrap; gap:6px 12px;}

    /* any two-column header (title + intro paragraph) stacks instead of overflowing */
    .section-head{flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:30px;}
    .section-head h2{font-size:26px;}
    .section-head p{max-width:100%;}

    .stats .wrap{grid-template-columns:repeat(2,1fr); gap:22px 16px;}
    .stat b{font-size:26px;}

    .apps-grid{grid-template-columns:1fr; gap:14px;}
    .app-card{height:220px;}

    .membranes{grid-template-columns:1fr;}
    .colour-grid{grid-template-columns:repeat(3,1fr); gap:20px 10px;}
    .colour-swatch .dot{width:44px; height:44px;}

    /* product cards: switch from side-by-side to stacked so price/button never collide */
    .product-card{flex-direction:column;}
    .product-media{width:100%; min-width:0; height:190px;}
    .product-media .ph{width:100%;}
    .product-body{padding:16px 18px 18px;}
    .product-foot{margin-top:12px;}
    .add-btn{padding:11px 16px; font-size:11.5px; white-space:nowrap;}

    .cta-banner h2{font-size:24px;}
    .cta-banner p{font-size:13.5px; padding:0 6px;}

    .footer-grid{grid-template-columns:1fr; gap:28px;}
    .footer-bottom{flex-direction:column; gap:14px; align-items:flex-start;}

    table.systems{min-width:640px;}
  }


  /* ---------- FAQ ---------- */
  .faq-section{background:var(--bg-page-alt);}
  .faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); max-width:820px;}
  .faq-item{background:var(--paper);}
  .faq-item summary{
    list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px;
    font-family:'Archivo'; font-weight:700; font-size:15.5px; color:var(--ink); text-transform:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-family:'Space Mono',monospace; font-size:20px; color:var(--accent-teal); flex-shrink:0; transition:transform .2s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item .faq-answer{padding:0 22px 20px; color:var(--ink-soft); font-family:'Archivo'; font-size:14px; line-height:1.6; text-transform:none;}

  /* ---------- Legal pages ---------- */
  .legal-body{max-width:720px; color:var(--ink); font-family:'Archivo'; font-size:15px; line-height:1.7; text-transform:none;}
  .legal-body h3{font-size:16px; margin:28px 0 8px; text-transform:none; font-weight:700;}
  .legal-body p{margin-bottom:4px;}
  .legal-disclaimer{margin-top:32px; padding:16px 18px; background:var(--bg-page-alt); border-left:3px solid var(--accent-teal); font-size:13px; color:var(--ink-soft);}
  .legal-bar{background:var(--bg-navy-2); border-top:1px solid var(--line-dark);}
  .legal-bar .wrap{display:flex; gap:22px; padding:16px 0; flex-wrap:wrap;}
  .legal-bar a{font-family:'Space Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,0.55);}
  .legal-bar a:hover{color:#fff;}