/* Knightsoft Media 2027 prototype: the one stylesheet.
   Colours follow the original site: white-led, brand red #E03A3E, dark grey #363636 text,
   light grey section backgrounds, dark image bands for statements. */

@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/raleway-latin-var.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/opensans-latin-var.woff2) format("woff2")}

:root{
  /* #E03A3E is the brand red for headings and highlights. Small white text needs 4.5:1 contrast,
     so buttons and red blocks use the slightly deeper --red-btn, and links use --red-dark. */
  --red:#E03A3E;--red-btn:#CC3236;--red-dark:#B8292D;--red-tint:#FDECEC;
  --ink:#363636;--ink-soft:#555;--muted:#606060;
  --white:#fff;--grey:#F6F6F6;--warm:#FBF7F5;--line:#E7E2DF;
  --dark:#1E1C1D;--dark-2:#2A2728;
  --head:"Raleway","Segoe UI",Arial,sans-serif;
  --body:"Open Sans","Segoe UI",Arial,sans-serif;
  --wrap:1180px;--gutter:clamp(16px,4vw,32px);
  --radius:6px;--shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.65 var(--body);font-variant-numeric:lining-nums}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--red-dark);text-underline-offset:2px}
a:hover{color:#8E1F22}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type */
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.2;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:300;font-size:clamp(32px,5vw,52px);letter-spacing:-.01em}
h2{font-weight:300;font-size:clamp(26px,3.4vw,38px)}
h3{font-weight:600;font-size:20px}
h4{font-weight:700;font-size:16px}
.red{color:var(--red)}
h1 strong,h2 strong{font-weight:600}
p{margin:0 0 1em;max-width:70ch}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft)}
.eyebrow{display:block;font:700 12.5px/1.2 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--red-dark);margin-bottom:12px}
.rule{display:block;width:64px;height:3px;background:var(--red);border:0;margin:14px 0 22px}
.center{text-align:center}.center p{margin-inline:auto}.center .rule{margin-inline:auto}
.small{font-size:14px;color:var(--muted)}
ul.ticks{list-style:none;padding:0;margin:0 0 1.2em}
ul.ticks li{position:relative;padding-left:28px;margin:.45em 0}
ul.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:4px;border:2px solid var(--red-btn);background:var(--red-btn);color:#fff;font:700 15px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:#A8282B;border-color:#A8282B;color:#fff}
.btn.ghost{background:transparent;color:var(--red-dark);border-color:var(--red-btn)}
.btn.ghost:hover{background:var(--red-btn);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--red-dark)}
.btn.light:hover{background:var(--red-tint);border-color:var(--red-tint);color:var(--red-dark)}
.btn.outline-light{background:transparent;border-color:#fff;color:#fff}
.btn.outline-light:hover{background:#fff;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Top strip + header */
.topbar{background:var(--dark);color:#ddd;font-size:13.5px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:space-between;align-items:center;padding-block:7px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:#ffb3b5}
.topbar .tb-left{display:flex;flex-wrap:wrap;gap:4px 22px}
.topbar .tb-tag{color:#bbb}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.logo{display:block;flex:0 0 auto}
.logo img{width:176px;height:auto}
.nav{margin-left:auto}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:block;padding:10px 10px;color:var(--ink);text-decoration:none;font:600 14.5px/1.2 var(--body);border-radius:4px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--red)}
.nav .has-sub{position:relative}
.nav .sub{display:none;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:var(--shadow);list-style:none;margin:0;padding:6px 0}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:block}
.nav .sub a{padding:9px 16px;font-weight:500}
.header-cta{display:flex;gap:10px;align-items:center}
.header-cta .btn{min-height:42px;padding:9px 16px;font-size:14px}
.menu-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:4px;padding:8px 10px;font:700 14px var(--body);color:var(--ink);cursor:pointer;min-height:44px}
@media (max-width:1060px){
  .header-cta .login{display:none}
}
@media (max-width:920px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--red);box-shadow:var(--shadow);display:none;max-height:calc(100vh - 110px);overflow:auto}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;padding:8px var(--gutter) 16px}
  .nav a{padding:12px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 14px;min-width:0}
  .nav .sub a{font-size:14px;color:var(--ink-soft)}
  .header-cta{display:none}
  .nav .mobile-cta{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px}
  .nav .mobile-cta a{border:2px solid var(--red);border-bottom:2px solid var(--red)}
}
@media (min-width:921px){.nav .mobile-cta{display:none}}
@media (max-width:520px){.topbar .tb-tag{display:none}.logo img{width:150px}}

/* Sections */
.section{padding-block:clamp(56px,8vw,96px)}
.section.tight{padding-block:clamp(40px,6vw,64px)}
.bg-grey{background:var(--grey)}
.bg-warm{background:var(--warm)}
.section-head{max-width:760px;margin-bottom:40px}
.section-head.center{margin-inline:auto}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.flip>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.flip>:first-child{order:0}}
.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--grey)}
.media img{width:100%;height:100%;object-fit:cover}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,var(--warm) 100%);border-bottom:3px solid var(--red);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,84px)}
.hero h1 .red{font-weight:400}
.hero .promise{display:inline-flex;align-items:center;gap:10px;margin:4px 0 18px;padding:7px 14px;border-radius:999px;background:var(--red-tint);color:var(--red-dark);font:700 14px/1.2 var(--body)}
.hero .promise::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.hero-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.16);aspect-ratio:16/10;background:#ddd}
.hero-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.page-hero{background:var(--warm);border-bottom:3px solid var(--red)}
.page-hero .wrap{padding-block:clamp(40px,6vw,72px)}
.page-hero.with-media .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media (max-width:860px){.page-hero.with-media .wrap{grid-template-columns:1fr}}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin-inline:6px}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
a.card{color:inherit;text-decoration:none}
a.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 34px rgba(0,0,0,.10)}
.card .card-img{aspect-ratio:16/10;background:var(--grey)}
.card .card-img img{width:100%;height:100%;object-fit:cover}
.card .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:8px}
.card p{font-size:15px;color:var(--ink-soft)}
.card .more{margin-top:auto;font-weight:700;font-size:14.5px;color:var(--red-dark)}
.card .more::after{content:" \2192"}
.icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--red-tint);color:var(--red);margin-bottom:14px}
.icon svg{width:22px;height:22px}
.feature{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.feature h3{font-size:18px}
.feature p{font-size:15px;color:var(--ink-soft);margin:0}

/* Red feature blocks (Manage / Design / Install) */
.red-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.red-block{background:var(--red-btn);color:#fff;border-radius:var(--radius);padding:30px 26px;text-align:center}
.red-block .ico{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;margin:0 auto 16px}
.red-block .ico svg{width:30px;height:30px}
.red-block h3{color:#fff;font-weight:500;font-size:24px}
.red-block p{font-size:15px;margin:0 auto;color:#fff;opacity:.95}
.red-block .step{display:block;font:700 12px var(--head);letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:6px}
@media (max-width:860px){.red-blocks{grid-template-columns:1fr}}

/* Dark image band (statement) */
.band{position:relative;color:#fff;background:var(--dark);overflow:hidden;isolation:isolate}
.band>picture{position:absolute;inset:0;z-index:-2}
.band>picture img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,19,.92) 0%,rgba(20,18,19,.78) 45%,rgba(20,18,19,.45) 100%);z-index:-1}
.band .wrap{padding-block:clamp(64px,9vw,112px)}
.band h2{color:#fff;font-weight:300;max-width:22ch}
.band p{color:#e9e9e9;max-width:56ch}
.band .rule{background:var(--red)}

/* CMS highlight */
.cms-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:22px 0 4px}
.cms-points div{border-left:3px solid var(--red);padding-left:14px}
.cms-points b{display:block;font:600 16px/1.3 var(--head)}
.cms-points span{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:560px){.cms-points{grid-template-columns:1fr}}

/* Video */
.video{position:relative;border-radius:var(--radius);overflow:hidden;background:#111;aspect-ratio:16/9;box-shadow:0 20px 50px rgba(0,0,0,.16)}
.video img,.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video button{position:absolute;inset:0;width:100%;height:100%;border:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55));cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;color:#fff;font:700 16px var(--body)}
.video button .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s}
.video button:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.video button .play svg{width:30px;height:30px;margin-left:5px;fill:#fff}

/* Sector tiles */
.sector{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;color:#fff;text-decoration:none;box-shadow:var(--shadow);isolation:isolate}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .4s}
.sector::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78));z-index:-1}
.sector:hover img{transform:scale(1.04)}
.sector .txt{position:absolute;left:0;right:0;bottom:0;padding:18px 20px}
.sector h3{color:#fff;margin:0 0 2px;font-weight:600}
.sector span{font-size:14px;color:#eee}
.sector:hover{color:#fff}

/* Pricing */
.price-table{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;box-shadow:var(--shadow)}
.price .band-name{font:700 13px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.price .amt{font:300 44px/1.1 var(--head);color:var(--ink);margin:10px 0 2px}
.price .amt sup{font-size:20px;vertical-align:top;position:relative;top:8px}
.price .per{font-size:14px;color:var(--muted)}
.price.featured{border:2px solid var(--red)}
@media (max-width:860px){.price-table{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.price-table{grid-template-columns:1fr}}

/* Catalogue */
.product{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.product .p-img{aspect-ratio:4/3;background:var(--grey)}
.product .p-img img{width:100%;height:100%;object-fit:cover}
.product .p-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.product h3{font-size:19px;margin-bottom:6px}
.product dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;margin:10px 0 16px}
.product dt{color:var(--muted)}
.product dd{margin:0}
.product .from{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.product .from b{font:600 22px var(--head)}
.product .from small{color:var(--muted)}
/* Quote-only products (totems): "Call or email for a quote" instead of a price */
.p-quote{display:flex;flex-direction:column;gap:3px;min-width:0}
.product .from .p-quote b,.pdp-price .p-quote b{font:600 18px/1.25 var(--head)}
.pdp-price .p-quote b{font-size:22px}
.p-quote small{font-size:13.5px;overflow-wrap:anywhere}
.product .btn{margin-top:14px;width:100%}
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cat-nav a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;background:#fff}
.cat-nav a:hover{border-color:var(--red);color:var(--red)}
.placeholder{display:inline-block;background:#FFF4CC;color:#6B5200;border:1px dashed #C9A200;border-radius:4px;padding:1px 6px;font-size:12.5px;font-weight:700;letter-spacing:.02em}

/* Forms */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
input,select,textarea{width:100%;font:16px var(--body);color:var(--ink);background:#fff;border:1px solid #CFC8C4;border-radius:4px;padding:11px 12px;min-height:46px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
textarea{min-height:120px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:20px;min-height:20px;height:20px;margin-top:2px;accent-color:var(--red)}
.notice{border-left:4px solid var(--red);background:var(--red-tint);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;font-size:15px}
.notice.ok{border-color:#2E8B57;background:#EAF6EF}

/* Quote calculator */
.calc{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.panel h3{margin-bottom:14px}
.tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.tabs button{flex:1 1 200px;min-height:52px;border:2px solid var(--line);background:#fff;border-radius:var(--radius);font:700 15px var(--body);color:var(--ink);cursor:pointer;padding:10px 14px}
.tabs button[aria-selected="true"]{border-color:var(--red-btn);color:var(--red-dark);background:var(--red-tint)}
.stepper{display:flex;align-items:center;gap:0;max-width:200px}
.stepper button{width:46px;height:46px;border:1px solid #CFC8C4;background:var(--grey);font:700 20px var(--body);cursor:pointer;color:var(--ink)}
.stepper button:first-child{border-radius:4px 0 0 4px}.stepper button:last-child{border-radius:0 4px 4px 0}
.stepper input{border-radius:0;text-align:center;border-inline:0;font-weight:700}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:400;margin:0}
.opt:has(input:checked){border-color:var(--red);background:var(--red-tint)}
.opt input{width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--red);flex:0 0 auto}
.opt b{display:block;font-weight:700}
.opt small{color:var(--muted);font-size:13.5px}
.opts{display:grid;gap:8px}
.summary{position:sticky;top:96px}
.summary table{width:100%;border-collapse:collapse;font-size:15px}
.summary td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.summary td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:12px}
.summary .total td{border-bottom:0;padding-top:14px;font:600 20px var(--head)}
.summary .yearly td{font-weight:700}
.fieldset{border:0;padding:0;margin:0 0 22px}
.fieldset legend{font:600 17px var(--head);margin-bottom:10px;padding:0}
.hint{font-size:13.5px;color:var(--muted);margin-top:6px}

/* Tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--grey);font:700 13px var(--head);letter-spacing:.06em;text-transform:uppercase}
.tbl tr:last-child td{border-bottom:0}

/* Steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red-btn);color:#fff;font:700 16px var(--head);margin-bottom:12px}
.steps h3{font-size:17px}
.steps p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Testimonials placeholder */
.quote-card{background:#fff;border:1px dashed #C9A200;border-radius:var(--radius);padding:22px}
.quote-card blockquote{margin:0 0 12px;font-size:15.5px;color:var(--ink-soft)}
.quote-card cite{font-style:normal;font-weight:700;font-size:14px}

/* Players strip */
.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:760px){.players{grid-template-columns:1fr}}

/* CTA strip */
.cta{background:var(--red-btn);color:#fff}
.cta .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;padding-block:clamp(40px,6vw,60px)}
.cta h2{color:#fff;margin:0 0 6px;font-weight:300}
.cta p{margin:0;color:#fff;opacity:.95}
.cta .btn-row{margin:0}

/* Footer */
.site-footer{background:var(--dark);color:#cfcfcf;font-size:14.5px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:#ffb3b5;text-decoration:underline}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-block:56px 36px}
@media (max-width:900px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h2.f-head{color:#fff;font:600 15px var(--head);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:7px 0}
.site-footer .f-logo{width:180px;margin-bottom:14px}
.site-footer .legal{border-top:1px solid #3a3637;padding-block:20px;font-size:13px;color:#a9a9a9;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.site-footer .legal p{margin:0;max-width:none}
.contact-list li{display:flex;gap:10px;align-items:flex-start}
.contact-list svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;fill:var(--red)}

/* Utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt2{margin-top:24px}.mt3{margin-top:40px}
.stack>*+*{margin-top:16px}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 0}
.pill-list li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}
.proto-note{background:#FFF4CC;color:#5a4500;font-size:13px;text-align:center;padding:6px 12px;border-bottom:1px solid #E7CF6B}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* FAQ */
details.feature summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.feature summary::-webkit-details-marker{display:none}
details.feature summary::after{content:"+";font:300 26px/1 var(--head);color:var(--red)}
details.feature[open] summary::after{content:"\2212"}
figure.card figcaption{gap:2px}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* Client logos */
.logo-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.logo-strip li{display:grid;place-items:center;height:96px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.logo-strip img{max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain}
.logo-strip .logo-slot{border-style:dashed;border-color:#C9A200;background:#FFFBEA;text-align:center;align-content:center;gap:2px}
.logo-slot span{font-weight:700;font-size:14px}
.logo-slot small{font-size:12px;color:#6B5200}

/* Client logo marquee: two identical rows slide left; static and wrapped for reduced motion */
.marquee{display:flex;overflow:hidden;gap:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-row{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;padding-right:56px;flex:0 0 auto;animation:marquee 38s linear infinite}
.marquee:hover .logo-row{animation-play-state:paused}
.logo-row li{flex:0 0 auto;height:64px;display:flex;align-items:center}
.logo-row img{width:auto;max-width:none;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.logo-row img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .logo-row{animation:none;flex-wrap:wrap;justify-content:center;gap:24px 40px;padding:0}
  .logo-row[aria-hidden]{display:none}
}

/* Full-width photo hero (home) */
.hero-full{position:relative;isolation:isolate;color:#fff;background:var(--dark);border-bottom:3px solid var(--red);overflow:hidden}
.hero-full>picture{position:absolute;inset:0;z-index:-2}
.hero-full>picture img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.hero-full::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,20,21,.9) 0%,rgba(22,20,21,.78) 38%,rgba(22,20,21,.2) 70%,rgba(22,20,21,0) 100%)}
.hero-full .wrap{min-height:min(640px,82vh);display:flex;flex-direction:column;justify-content:center;padding-block:72px}
.hero-full .inner{max-width:600px}
.hero-full h1{color:#fff;font-weight:300}
.hero-full h1 .rot{color:#ff6b6e;font-weight:500;display:inline-block;min-width:6ch}
.hero-full .lede{color:#eee}
.hero-full .eyebrow{color:#ff9a9c}
.hero-full .promise{background:rgba(224,58,62,.18);color:#ffd0d1}
.hero-full .small{color:#d6d6d6}
@media (max-width:760px){
  .hero-full::before{background:linear-gradient(180deg,rgba(22,20,21,.55) 0%,rgba(22,20,21,.86) 45%,rgba(22,20,21,.94) 100%)}
  .hero-full .wrap{min-height:0;padding-block:220px 40px}
}

/* Why us */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.why .feature{border-top:3px solid var(--red)}
@media (max-width:960px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* Big testimonial slot */
.big-quote{max-width:860px;margin:0 auto;text-align:center;padding:36px 28px;border:1px dashed #C9A200;border-radius:var(--radius);background:#fff}
.big-quote blockquote{font:300 clamp(20px,2.4vw,28px)/1.45 var(--head);margin:0 0 16px;color:var(--ink)}

/* Case study + guide cards */
.cs-card .card-img{display:grid;place-items:center;background:var(--grey);color:var(--muted);font-size:14px}
.tag{display:inline-block;font:700 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--red-dark);margin-bottom:8px}
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.prose table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}

/* Scroll reveal: only when JS is running, and never for reduced motion */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
.glance{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px;margin:0 0 8px}
.glance dt{color:var(--muted)}.glance dd{margin:0}
.big-quote.named,.quote-card.named{border:1px solid var(--line);border-left:4px solid var(--red);box-shadow:var(--shadow);margin:0}
.big-quote.named{border-left-width:1px;border-top:4px solid var(--red)}
.q-logo{height:36px;width:auto;max-width:180px;object-fit:contain;margin:0 auto 18px}
.quote-card .q-logo{margin:0 0 14px;height:30px}
.q-org{font:700 20px/30px var(--head);color:var(--muted);margin:0 0 14px;letter-spacing:.04em}
.quote-card figcaption{font-size:14px}

/* Shop grid */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:600 14px var(--body);cursor:pointer}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip[aria-pressed="true"]{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:16px;background:var(--grey);border-radius:var(--radius);margin-bottom:12px}
.filters label{font-size:13px;margin-bottom:4px}
.filters select{min-height:42px;padding:8px 10px;font-size:15px}
@media (max-width:900px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.filters{grid-template-columns:1fr}}
.p-grid{align-items:stretch}
.p-card h3{font-size:17px;margin-bottom:4px}
.p-card h3 a{color:var(--ink);text-decoration:none}
.p-card h3 a:hover{color:var(--red)}
.p-link{display:block}
.p-none{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;background:#F4F2F2;color:#6b6b6b;font-size:13.5px;font-weight:600;aspect-ratio:4/3}
.p-none img{width:56px;height:56px;opacity:.55}
.p-specs{list-style:none;margin:6px 0 12px;padding:0;font-size:13.5px;color:var(--ink-soft)}
.p-specs li{padding:3px 0;border-bottom:1px dashed var(--line)}
.p-actions{display:grid;gap:8px;margin-top:12px}
.p-actions .btn{width:100%;margin:0;min-height:42px;font-size:14px}
.btn[disabled]{background:#E6E2E0;border-color:#E6E2E0;color:#6b6b6b;cursor:not-allowed}
.stock{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:700 12.5px var(--body);white-space:nowrap}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stock-in{background:#E6F4EC;color:#1E7A45}
.stock-low{background:#FFF1D6;color:#94600A}
.stock-out{background:#ECECEC;color:#5d5d5d}
.stock-preorder{background:#E3EEFB;color:#1F5FA8}
.stock-quote{background:var(--red-tint);color:var(--red-dark)}
/* Product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.pdp{grid-template-columns:1fr}}
.gallery .g-main{border-radius:var(--radius);overflow:hidden}
.g-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.g-thumbs .p-none{border-radius:4px;font-size:12px}
.pdp-price{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;padding:14px 0;border-block:1px solid var(--line)}
.pdp-price b{font:600 28px var(--head)}
.pdp-price small{color:var(--muted)}
.tbl th[scope="row"]{background:var(--grey);text-transform:none;letter-spacing:0;font:600 14.5px var(--body);width:38%}

.panel h2.h3{font:600 20px/1.2 var(--head);margin-bottom:14px}

/* Works-with strip: plain text + generic icons (no third-party logos) */
.works-with{margin-top:28px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center}
.works-with .ww-label{display:block;font:700 12.5px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.works-with ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.works-with li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.works-with svg{width:22px;height:22px;fill:none;stroke:var(--red-btn);stroke-width:1.8}
.works-with .small{margin:10px auto 0;font-size:12.5px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .8s}
.hero-video.on{opacity:1}
.hero-pause{position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:8px 14px;font:600 13px var(--body);cursor:pointer}
.hero-pause:hover{background:rgba(0,0,0,.75)}

/* Full-width photo hero for inner pages (sector, content, about, demo...). The CMS page opts out with .split-hero */
.page-hero.with-media:not(.split-hero){position:relative;isolation:isolate;background:var(--dark);color:#fff;overflow:hidden}
.page-hero.with-media:not(.split-hero) .wrap{display:flex;align-items:center;min-height:min(560px,72vh);padding-block:64px}
.page-hero.with-media:not(.split-hero) .wrap>div:first-child{max-width:620px}
.page-hero.with-media:not(.split-hero) .media{position:absolute;inset:0;border-radius:0;box-shadow:none;z-index:-2;background:var(--dark)}
.page-hero.with-media:not(.split-hero) .media picture{display:block;height:100%}
.page-hero.with-media:not(.split-hero) .media img{object-position:65% 30%}
.page-hero.with-media:not(.split-hero)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,20,21,.92) 0%,rgba(22,20,21,.8) 40%,rgba(22,20,21,.25) 75%,rgba(22,20,21,.05) 100%)}
.page-hero.with-media:not(.split-hero) h1{color:#fff}
.page-hero.with-media:not(.split-hero) h1 .red,.hero-full .red{color:#ff6b6e}
.page-hero.with-media:not(.split-hero) .eyebrow{color:#ff9a9c}
.page-hero.with-media:not(.split-hero) .lede{color:#eee}
.page-hero.with-media:not(.split-hero) .crumbs,.page-hero.with-media:not(.split-hero) .crumbs a{color:#ddd}
.page-hero.with-media:not(.split-hero) .small{color:#d9d9d9}
.page-hero.with-media:not(.split-hero) .lede a,.page-hero.with-media:not(.split-hero) .small a{color:#fff}
.page-hero.with-media:not(.split-hero) .btn.ghost{color:#fff;border-color:#fff}
.page-hero.with-media:not(.split-hero) .btn.ghost:hover{background:#fff;color:var(--ink)}
.page-hero.with-media:not(.split-hero) .notice{color:var(--ink)}
@media (max-width:760px){
  .page-hero.with-media:not(.split-hero)::before{background:linear-gradient(180deg,rgba(22,20,21,.45) 0%,rgba(22,20,21,.85) 40%,rgba(22,20,21,.95) 100%)}
  .page-hero.with-media:not(.split-hero) .wrap{min-height:0;padding-block:200px 36px}
}

/* Bigger photo cards (16:10) */
.card .card-img{aspect-ratio:16/10}
.sector{aspect-ratio:4/3}
.band-service::before{background:linear-gradient(90deg,rgba(20,18,19,.9) 0%,rgba(20,18,19,.72) 45%,rgba(20,18,19,.2) 100%)}
.band-service>picture img{object-position:70% 40%}
.new-badge{display:inline-block;background:var(--red-btn);color:#fff;border-radius:4px;padding:2px 7px;margin-right:6px;font:700 11px/1.4 var(--body);letter-spacing:.06em;vertical-align:1px}
.band .eyebrow{color:#ff9a9c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pay-note{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--grey);font-size:15px}
.price .price-btn{margin-top:16px;width:100%;min-height:42px;padding:8px 12px;font-size:14px}
.licence-buy{margin:24px auto 0;max-width:820px;padding:18px 20px;border:2px solid var(--red-btn);border-radius:var(--radius);background:#fff}
p.center{margin-inline:auto}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red-btn);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.stat b{display:block;font:500 clamp(30px,3.6vw,42px)/1.1 var(--head);color:var(--red-dark);margin-bottom:8px}
.stat span{font-size:15px;color:var(--ink-soft)}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
/* Product photos: square white-background shots shown whole (contain), on white */
.p-photo{background:#fff;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden}
.p-photo picture{display:block;width:100%;height:100%}
.p-photo img{width:100%;height:100%;object-fit:contain}
/* Cards: the picture overflowed the 4:3 box (grid row grew to the square) and the card rule's 'cover' won, so the
   bottom quarter of every product photo was cut off. Pin the picture to the box and show the photo whole. */
.p-photo{position:relative}.p-photo>picture{position:absolute;inset:0}.product .p-img.p-photo{background:#fff}.product .p-img.p-photo img{object-fit:contain}
.gallery .g-main.p-photo{aspect-ratio:1/1;border:1px solid var(--line)}
.g-thumbs .p-photo{aspect-ratio:1/1;border:1px solid var(--line);border-radius:4px}
.g-thumbs>*{min-width:0;aspect-ratio:1/1}
.g-thumbs .p-photo{display:block}
.g-thumbs .p-photo picture,.g-thumbs .p-photo img{display:block;width:100%;height:100%;object-fit:contain}
.setup-fee{max-width:820px;margin:20px auto 0;padding:14px 18px;background:var(--grey);border-radius:var(--radius);text-align:center;font-size:15.5px}
.stock-ask{background:#F1EEEC;color:#4f4f4f}
.socials{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:0}
.socials a{display:inline-flex;align-items:center;gap:8px;min-width:40px;min-height:40px;justify-content:center;border-radius:999px;background:#3a3637;color:#fff}
.socials a:hover{background:var(--red-btn);text-decoration:none}
.socials svg{width:20px;height:20px;fill:currentColor}
.socials-dark a{background:var(--grey);color:var(--ink);padding:8px 14px;border:1px solid var(--line);font-weight:600;text-decoration:none}
.socials-dark a:hover{background:var(--red-btn);color:#fff}