/* Cemtone — homepage.
   Every colour, typeface, duration and easing in this file is a token from brand.css,
   referenced by name. There is no literal hex, no font stack and no raw duration below this
   line. If a value is not in brand.css it does not go on the site — the answer is a
   different size or a different weight, not a new value. */

/* ---------- reset -----------------------------------------------------------------------
   brand.css sets box-sizing and the body margin but nothing else. A <figure> keeps the
   browser's own `margin: 1em 40px`, which is why every feature image sat 40px inside the
   column its neighbours filled — three different right edges on one page. */
h1,h2,h3,p,figure,ul,blockquote{margin:0;padding:0}
ul{list-style:none}

/* ---------- layout primitives ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 24px}
.band{padding:clamp(56px,7vw,104px) 0}
.band--tint{background:var(--paper-light)}
.band--ink{background:var(--ink);color:var(--white)}

/* The type scale from the brand guide, page 3. Nothing sets a size outside it. */
.t-hero{font-family:var(--display);font-weight:700;font-size:clamp(42px,6.4vw,74px);
  line-height:1.05;letter-spacing:-.01em;margin:0}
.t-sect{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,48px);
  line-height:1.05;margin:0}
.t-panel{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;margin:0}
.t-lead{font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0}
.t-cap{font-size:15px;line-height:1.5;color:var(--ink-muted);margin:0}
.t-over{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);margin:0 0 14px}   /* red-deep: --red fails contrast below 24px */
.band--ink .t-over{color:var(--paper)}
.band--ink .t-cap{color:var(--board)}
.band--ink .t-lead{color:var(--board)}
.measure{max-width:62ch}

/* ---------- header --------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--paper-edge);transition:box-shadow var(--t-fast) var(--ease-out)}
.hdr__in{display:flex;align-items:center;gap:32px;height:76px}
/* colour set explicitly: an anchor with no colour rule computes to the browser's default
   link blue, which is a colour outside the palette even when nothing visible uses it. */
/* The client's revised logo stacks the house above the wordmark, at 2.37:1. The header is a
   77px strip: shrunk to fit, the wordmark would be under 11px and unreadable. Side by side is
   the only arrangement that keeps both legible without making the header taller — which on a
   phone would cost permanent reading space. The tagline is not here; it is live text in the
   footer, because the supplied artwork has no embedded font for it. */
.hdr__logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink)}
.hdr__logo img{display:block}
.hdr__icon{width:71px;height:28px}
.hdr__word{width:146px;height:20px}
.hdr__nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.hdr__nav a{font-size:15px;color:var(--ink-soft);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.hdr__burger{display:none;margin-left:auto;background:none;border:0;padding:12px;
  font-family:var(--text);color:var(--ink);cursor:pointer;
  min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* ---------- buttons -------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--text);font-size:16px;
  font-weight:600;text-decoration:none;padding:14px 26px;border:1px solid transparent;
  cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),
  color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.btn--primary{background:var(--red);color:var(--white)}      /* white on red = 5.5:1 */
.btn--primary:hover{background:var(--red-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.band--ink .btn--ghost{color:var(--white);border-color:var(--board-dark)}
.band--ink .btn--ghost:hover{background:var(--white);color:var(--ink)}
.btn .icon{width:18px;height:18px}

/* ---------- icons ---------------------------------------------------------------------- */
.icon{width:1.5em;height:1.5em;flex:0 0 auto;stroke:currentColor;fill:none;
  vertical-align:-.3em}

/* ---------- hero ----------------------------------------------------------------------- */
.hero{background:var(--paper);overflow:hidden}
/* 24px sides, not 0. `padding: <v> 0` here silently overrode .wrap's own 0 24px, which
   put the hero 24px left of every other section and hard against the edge on a phone. */
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding:clamp(48px,6vw,88px) 24px}
.hero__txt{min-width:0}
.hero__txt > * + *{margin-top:22px}
.hero__rule{width:56px;height:3px;background:var(--red);margin:0 0 6px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__fig{position:relative;aspect-ratio:4/4.4;overflow:hidden}
.hero__fig img{width:100%;height:100%;object-fit:cover;display:block}
.hero__stat{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:40px;padding-top:28px;
  border-top:1px solid var(--paper-edge)}
.hero__stat b{display:block;font-family:var(--display);font-weight:700;font-size:32px;
  line-height:1;color:var(--ink)}
.hero__stat span{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:7px}

/* ---------- what it is ----------------------------------------------------------------- */
.what{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.what__fig img{width:100%;height:auto;display:block}
.what__list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.what__list li{display:flex;gap:14px;align-items:flex-start;font-size:17px;
  color:var(--ink-soft)}
.what__list .icon{color:var(--red-deep);width:22px;height:22px;margin-top:2px}

/* ---------- benefits ------------------------------------------------------------------- */
/* Four, not auto-fit. Seven items in an auto-fit grid wrapped 6 + 1 at desktop, which
   leaves the last benefit hanging alone on its own line. 4 + 3 reads as a decision. */
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 28px;margin-top:48px}
.ben__i{display:flex;flex-direction:column;gap:14px}
.ben__i .icon{width:34px;height:34px;color:var(--red-deep)}
.ben__i b{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.15;
  color:var(--ink)}
.ben__i span{font-size:15px;line-height:1.5;color:var(--ink-muted)}

/* ---------- applications --------------------------------------------------------------- */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.app{display:block;text-decoration:none;color:inherit;background:var(--paper)}
.app__fig{aspect-ratio:4/3;overflow:hidden;background:var(--board-light)}
.app__fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-base) var(--ease-out)}
.app:hover .app__fig img{transform:scale(1.03)}
.app__b{display:flex;align-items:center;gap:10px;padding:16px 0 0}
.app__b .icon{width:20px;height:20px;color:var(--red-deep)}
.app__b b{font-size:17px;font-weight:600;color:var(--ink)}
.app__t{font-size:14px;color:var(--ink-muted);margin:6px 0 0}
.app__t em{font-style:normal;color:var(--ink-soft);font-weight:600}

/* ---------- thickness selector --------------------------------------------------------- */
.thk{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);
  align-items:stretch;margin-top:48px}
.thk__opts{display:grid;gap:2px;background:var(--paper-edge);border:1px solid var(--paper-edge)}
.thk__opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--paper-light);border:0;padding:16px 18px;cursor:pointer;
  font-family:var(--text);font-size:16px;color:var(--ink-soft);
  transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.thk__opt .icon{width:22px;height:22px;color:var(--ink-muted);
  transition:color var(--t-fast) var(--ease-out)}
.thk__opt:hover{background:var(--white)}
.thk__opt[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.thk__opt[aria-pressed="true"] .icon{color:var(--white)}

.thk__out{background:var(--paper-light);padding:clamp(24px,3vw,36px);min-height:100%}
.thk__scale{display:flex;gap:10px;margin:22px 0 0}
.thk__v{flex:1 1 0;text-align:center;padding:18px 6px;background:var(--white);
  border-bottom:3px solid var(--paper-edge);
  transition:background-color var(--t-fast) var(--ease-out),
  border-color var(--t-fast) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
.thk__v b{display:block;font-family:var(--display);font-weight:700;font-size:28px;
  line-height:1;color:var(--ink)}
.thk__v span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:6px}
/* .34 measured 2.30:1 on the numeral and 1.73:1 on the unit — below legibility for
   something that still says a real thing (the board exists in that thickness). */
.thk__v[data-on="no"]{opacity:.62}
.thk__v[data-on="yes"]{border-bottom-color:var(--red)}
.thk__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--paper-edge)}
.thk__wt{display:flex;gap:28px;margin-top:14px;flex-wrap:wrap}
.thk__wt div span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted)}
.thk__wt div b{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink)}

/* ---------- factory / contact ---------------------------------------------------------- */
.fac{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.fac__fig img{width:100%;height:auto;display:block}
.cnt{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.cnt__i{display:flex;gap:14px;align-items:flex-start}
.cnt__i .icon{width:22px;height:22px;color:var(--paper);margin-top:3px}
.cnt__i span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--board);margin-bottom:6px}
.cnt__i p{font-size:16px;line-height:1.5;margin:0;color:var(--white)}

/* ---------- footer --------------------------------------------------------------------- */
.ftr{background:var(--ink);color:var(--board);padding:56px 0 32px;
  border-top:1px solid var(--board-dark)}
.ftr__in{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;
  flex-wrap:wrap}
.ftr img{width:150px;height:auto;display:block}
.ftr nav{display:flex;gap:24px;flex-wrap:wrap}
.ftr a{color:var(--board);text-decoration:none;font-size:15px;display:inline-block;
  padding:3px 0;  /* 24px, the smallest target a pointer should be asked to hit */
  transition:color var(--t-fast) var(--ease-out)}
.ftr a:hover{color:var(--white)}
.ftr__legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--board-dark);
  font-size:13px;line-height:1.6;color:var(--board-dark)}

/* ---------- reveal on scroll ----------------------------------------------------------- */
/* 14px rise, once, never on re-scroll. brand.css zeroes this for prefers-reduced-motion. */
.js .rise{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.js .rise.is-in{opacity:1;transform:none}
/* Without JS, .rise is simply content. Also keeps the page whole when printed or saved to
   PDF for a project file before anyone has scrolled it. */
@media print{ .rise{opacity:1!important;transform:none!important} }

/* ---------- responsive ----------------------------------------------------------------- */
@media (max-width:1040px){
  .ben{grid-template-columns:repeat(3,1fr)}
  .apps{grid-template-columns:repeat(2,1fr)}
  .cnt{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
  .hdr__nav.is-open{display:flex;position:absolute;left:0;right:0;top:76px;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--paper-edge);padding:8px 24px 20px}
  .hdr__nav.is-open a{padding:13px 0;border-bottom:1px solid var(--paper-edge)}
  .hero__in,.what,.thk,.fac{grid-template-columns:1fr}
  .hero__fig{aspect-ratio:4/3;order:-1}
  .what__fig,.fac__fig{order:-1}
  .thk__scale{flex-wrap:wrap}
  /* 28% gave 3 + 3 + 1 once there were seven thicknesses, and the orphaned 18 mm stretched
     the full width — the same broken-row look the calculator chips had. 20% gives 4 + 3. */
  .thk__v{flex:1 1 20%}
}
@media (max-width:560px){
  .ben{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
  .cnt{grid-template-columns:1fr}
  .hero__stat{gap:28px}
}

/* ---------- inner pages ------------------------------------------------------------------ */
.phead{background:var(--paper-light);padding:clamp(44px,5vw,76px) 0 clamp(36px,4vw,56px);
  border-bottom:1px solid var(--paper-edge)}
.phead .t-lead{max-width:60ch;margin-top:18px}

.prose{max-width:62ch}
.prose > * + *{margin-top:18px}
.prose p{font-size:17px;line-height:1.65;color:var(--ink-soft)}
.prose strong{color:var(--ink)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.split img{width:100%;height:auto;display:block}

/* data tables — the reason a specifier is on the page */
.dt{width:100%;border-collapse:collapse;margin-top:26px}
.dt caption{text-align:left;font-size:15px;color:var(--ink-muted);margin-top:14px;
  caption-side:bottom;line-height:1.5}
.dt th{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);text-align:left;padding:0 18px 10px 0;
  border-bottom:1px solid var(--paper-edge);white-space:nowrap}
.dt td{font-size:17px;padding:13px 18px 13px 0;border-bottom:1px solid var(--paper-edge);
  color:var(--ink-soft);vertical-align:top}
.dt tr:last-child td{border-bottom:none}
.dt td:first-child{font-weight:600;color:var(--ink)}
.dt .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dt .tick{color:var(--red-deep);font-weight:700;text-align:center}
.dt .no{color:var(--paper-edge);text-align:center}
.dt th.c,.dt td.c{text-align:center;padding-right:0}

.callout{border-left:2px solid var(--red);background:var(--red-wash);
  padding:20px 24px;margin-top:26px}
.callout p{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.callout p + p{margin-top:10px}
.callout b{color:var(--ink)}

.note-rule{border-top:1px solid var(--paper-edge);padding-top:20px;margin-top:30px}
.note-rule p{font-size:15px;line-height:1.6;color:var(--ink-muted);max-width:62ch}

.steps{counter-reset:s;list-style:none;margin-top:26px}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 40px;font-size:17px;
  line-height:1.6;color:var(--ink-soft)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:700;font-size:20px;color:var(--red-deep)}

/* ---------- footer, four columns ---------------------------------------------------------- */
.ftr__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr;gap:40px}
.ftr__grid h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);margin:0 0 16px}
.ftr__col{display:flex;flex-direction:column;gap:10px}
.ftr__addr{font-style:normal;font-size:15px;line-height:1.6;color:var(--board)}
@media (max-width:860px){
  .ftr__grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}

/* A data table on a phone must still show its data. Scrolling a 4-column table sideways put
   the Value column 162px off-screen with no affordance, so the technical page read as a list
   of properties with no numbers. Below 720px each row becomes a block and every cell carries
   its own column label. */
@media (max-width:720px){
  .dt, .dt tbody, .dt tr, .dt td{display:block;width:100%}
  .dt thead, .dt tr:first-child{display:none}
  .dt tr{border-bottom:1px solid var(--paper-edge);padding:14px 0}
  .dt tr:last-child{border-bottom:none}
  .dt td{border:none;padding:3px 0;font-size:16px}
  .dt td:first-child{font-size:18px;font-weight:700;color:var(--ink);padding-bottom:8px}
  .dt td[data-l]::before{content:attr(data-l) "  ";font-size:13px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
  .dt td.c,.dt th.c{text-align:left}
  /* The rule above turns .dt and its rows into blocks, which leaves <caption> the only
     table-role box left in a parent that is no longer a table. The browser then wraps it in
     an anonymous table box that shrink-wraps to its narrowest word — it measured 76px, one
     or two words per line. It has to be told to be a block like everything else. */
  .dt caption{display:block;width:100%;margin-top:18px}
  /* the thickness matrix keeps its grid, it is a matrix — but each cell says which column */
  .dt.matrix td.c::before{content:attr(data-l) " ";color:var(--ink-muted);font-size:13px;
    font-weight:600}
  .dt.matrix td.c{display:inline-block;width:auto;margin-right:18px}
}
/* headers were butting together at narrow widths because the centred ones dropped their
   right padding: "6 MM9 MM12 MM15 MM18 MM" */
.dt th.c{padding-right:10px}
.dt th.c:last-child{padding-right:0}
@media (max-width:560px){ .ftr__grid{grid-template-columns:1fr} }

/* ---------- enquiry form ------------------------------------------------------------------ */
.form{max-width:560px;margin-top:30px}
.form .row{margin-bottom:20px}
.form label{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;font-family:var(--text);font-size:17px;
  color:var(--ink);background:var(--white);border:1px solid var(--paper-edge);
  padding:13px 14px;min-height:48px;
  transition:border-color var(--t-fast) var(--ease-out)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  border-color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .hint{font-size:15px;color:var(--ink-muted);margin-top:8px;line-height:1.5}
@media (max-width:560px){ .form .two{grid-template-columns:1fr} }

/* Links inside the dark contact block inherited the browser's default link blue — a colour
   outside the palette, on the one band where it is most visible. */
.cnt__i a{color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--board-dark);
  transition:border-color var(--t-fast) var(--ease-out)}
.cnt__i a:hover{border-bottom-color:var(--white)}
.band--ink .prose a,.band--ink p a{color:var(--white)}

/* Any link in body copy or a table. Without this they fall back to the browser's default
   blue, which is a colour the palette does not contain. */
.prose a,.dt a,.cnt__i a,.callout a,.note-rule a{color:var(--red-deep);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease-out)}
.prose a:hover,.dt a:hover,.callout a:hover{color:var(--ink)}
.band--ink .cnt__i a{color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--board-dark)}

/* ---------- tap targets on a phone -------------------------------------------------------- */
/* Inline phone, email and map links measured 17-21px tall on the live site. A thumb needs
   about 44. Padding the inline box rather than changing the type keeps the copy identical. */
@media (max-width:860px){
  .cnt__i a, .dt a, .prose a,
  a[href^="tel:"], a[href^="mailto:"]{
    display:inline-block;padding:13px 0;line-height:1.3}
  .cnt__i p a{padding:13px 0}
  .hdr__logo{display:flex;align-items:center;min-height:44px}
  /* The line box is 18px, so 44px -- the minimum for a thumb -- needs 13px, not the 7px
     that was here (33px) nor the 10px I first reached for (38px). Measured, not guessed. */
  .ftr a{display:inline-block;padding:13px 0}
  /* 19.5px line box, so a 44px target needs 13px. The phone numbers and the email are
     the most likely things in the whole footer to be tapped. */
  .ftr__addr a{padding:13px 0}
}


/* One hero stat is a word rather than a figure; keep it on one line beside the numerals. */
.hero__stat b{font-size:clamp(20px,2.2vw,32px)}

/* ---------- benefit cards ------------------------------------------------------------------ */
/* The seven reasons were icon-plus-text floating on the band with nothing holding them. As
   cards they read as seven discrete things a buyer can scan, which is what that section is for.
   Deliberately NOT flip cards: the brand guide's motion rules rule out spinning, a flip hides
   technical detail behind an interaction a specifier should not have to discover, and on a
   phone the flip gesture fights the card being a link. */
.ben__i{background:var(--paper-light);padding:26px 24px;gap:12px;
  border-bottom:2px solid var(--paper-edge);
  transition:border-color var(--t-fast) var(--ease-out)}
.band--tint .ben__i{background:var(--white)}
.ben__i:hover{border-bottom-color:var(--red)}
.ben__i .icon{width:30px;height:30px}
.ben__i b{font-size:19px}
@media (max-width:560px){ .ben__i{padding:22px 20px} }

/* ---------- contact method cards ---------------------------------------------------------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.way{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);
  background:var(--paper-light);padding:26px 24px;
  border-bottom:2px solid var(--paper-edge);
  transition:border-color var(--t-fast) var(--ease-out)}
.way:hover{border-bottom-color:var(--red)}
.way .icon{width:30px;height:30px;color:var(--red-deep);margin-bottom:6px}
.way b{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink)}
.way span{font-size:17px;color:var(--ink);font-weight:600}
.way em{font-style:normal;font-size:15px;line-height:1.5;color:var(--ink-muted);margin-top:4px}
@media (max-width:860px){ .ways{grid-template-columns:1fr} }

/* ---------- floating WhatsApp control ----------------------------------------------------- */
/* Cemtone red, not WhatsApp green. The brand guide says there is no thirteenth colour and
   that rule holds for a platform affordance too — the glyph is what identifies WhatsApp, the
   colour does not have to. White on --red measures 5.53:1, which passes AA. */
.wa{position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:var(--white);text-decoration:none;
  box-shadow:0 2px 10px rgba(20,20,16,.22);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out),
             visibility var(--t-base) var(--ease-out),
             background-color var(--t-fast) var(--ease-out)}
.wa svg{width:30px;height:30px;display:block}
.wa.is-in{opacity:1;visibility:visible;transform:none}
.wa:hover{background:var(--red-deep)}
/* Clear of the footer, so it never sits on top of the contact details it duplicates. */
.wa.is-low{transform:translateY(-10px);opacity:.0;visibility:hidden}
@media (max-width:560px){ .wa{right:16px;bottom:16px;width:52px;height:52px} .wa svg{width:28px;height:28px} }

/* ---------- FAQ ----------------------------------------------------------------------------- */
/* <details>/<summary> rather than a scripted accordion: it opens without JavaScript, it prints
   open, and a browser's find-on-page can reach the answers. */
.faq-group{margin:0 0 18px}
.faq{border-top:1px solid var(--paper-edge);max-width:72ch;margin-bottom:46px}
.faq details{border-bottom:1px solid var(--paper-edge)}
.faq summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:18px;font-weight:600;color:var(--ink);min-height:44px;
  transition:color var(--t-fast) var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-deep)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--red-deep);border-bottom:2px solid var(--red-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--t-fast) var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details > p{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0 0 18px;
  max-width:64ch;padding-right:44px}
.faq details > p:first-of-type{margin-top:-4px}
@media print{ .faq details{display:block} .faq details > p{display:block} }

/* ---------- the take-off calculator --------------------------------------------------------- */
/* Same shape as the thickness guide on the homepage: what you choose on the left, what it comes
   to on the right. The results panel reuses .thk__out and .thk__note verbatim. Only four things
   below did not already exist on the site — a fieldset with its browser chrome removed, a row of
   radio chips, a figure that carries its own provenance line, and a note that shows only when
   JavaScript is off. Every colour is a brand.css token. */
.calc{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,64px);
  align-items:start;margin-top:44px}
.calc > *{min-width:0}                     /* a grid child's min-content width is its content;
                                              without this a long label pushes the column wider
                                              than the track and the page scrolls sideways */
.calc .form{max-width:none;margin-top:0}
/* A <label for> focuses the field it names, which makes it a tap target like any other. The
   site's .form label is a 21px line of small caps; the padding here takes the hit area to 44
   without moving the text off its field. Scoped to a direct child of .row so it cannot reach
   the .pick chips, which set their own 48px. */
.calc .form .row > label{padding:12px 0 11px;margin-bottom:0}

/* <fieldset> arrives with a border, its own padding and a legend sitting inside that border.
   Every other group on this site is a small uppercase label over a control, so it is stripped
   back to that. min-width:0 because a fieldset ignores the flex/grid minimum without it. */
.calc fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.calc legend{display:block;padding:0;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:7px}

/* A row of radio chips. .thk__opt is the nearest thing already here, but it is a full-width row
   built for a vertical stack with an icon; five thicknesses want to sit side by side. Same
   colours, same selected state, same minimum 48px. The radio itself is taken out of sight, not
   out of the accessibility tree — it is still what the keyboard and the screen reader operate,
   and :checked/:focus on it is what colours the label. */
.pick{position:relative;display:flex;flex-wrap:wrap;gap:2px;
  background:var(--paper-edge);border:1px solid var(--paper-edge)}
.pick input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pick label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 16px;background:var(--paper-light);color:var(--ink-soft);
  font-size:16px;line-height:1.2;text-align:center;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.pick label:hover{background:var(--white)}
.pick input:checked + label{background:var(--ink);color:var(--white)}
/* :focus first so a browser without :focus-visible still shows the ring, then withdrawn for a
   mouse click. Keyboard users arrow through a radio group and must be able to see where they are. */
.pick input:focus + label{outline:2px solid var(--ink);outline-offset:-4px}
.pick input:focus:not(:focus-visible) + label{outline:none}
.pick input:checked:focus + label{outline-color:var(--red)}
/* A thickness Cemtone does not list for the chosen application. Struck through as well as
   muted, so the state does not depend on colour. --ink-muted on --paper-light is 5.48:1. */
.pick input:disabled + label{color:var(--ink-muted);text-decoration:line-through;
  cursor:not-allowed}
.pick input:disabled + label:hover{background:var(--paper-light)}
/* These are controls, not meta labels, so they opt out of the uppercase and letter-spacing
   that .form label applies to every other label on the page. That styling is also what made
   them too wide to fit five across: at 390px they wrapped 4 + 1 and flex:1 1 auto then
   stretched the orphaned 18 mm to the full 340px, which reads as a broken row. */
.pick label{text-transform:none;letter-spacing:0}
/* Seven thicknesses are a scale and belong on one row at every width. A grid cannot orphan one.
   Seven will not fit at 320px carrying "mm" on every chip, so the chips are the number alone and
   the legend says the unit once. Each radio keeps an aria-label with the unit, because "6" on
   its own is not what a screen reader should announce. */
.pick--thk{display:grid;grid-template-columns:repeat(7,1fr)}

/* Area, or length x height. The radios above drive this in CSS, so the choice works with no
   JavaScript at all; the script sets [hidden] to the same effect for anything without :has().
   Both groups simply show if neither mechanism is available, which is the harmless outcome. */
.calc__grp[hidden]{display:none}
.calc:has(#c-mode-area:checked) .calc__grp[data-mode="lh"]{display:none}
.calc:has(#c-mode-lh:checked) .calc__grp[data-mode="area"]{display:none}

/* Shown only when the document still carries the no-js class — that is, when the inline script
   in the head never ran. It is the one thing on the page that JavaScript removes rather than
   adds, so nothing here is hidden from a visitor without it. */
.calc__nojs{display:none}
.no-js .calc__nojs{display:block;border-left:2px solid var(--red);background:var(--red-wash);
  padding:16px 20px;margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.no-js .calc__nojs b{color:var(--ink)}

/* The one-line summary. It is the live region: a screen reader hears the whole take-off in a
   sentence as the figures change, instead of five disconnected numbers. */
.calc__say{font-size:16px;line-height:1.5;color:var(--ink-soft);margin:14px 0 0;
  font-variant-numeric:tabular-nums}

/* A figure, its label, and the line that says where it came from. The remark is the point of
   the page, so it is part of the component and cannot be left off one. */
.res{display:grid;gap:24px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--paper-edge)}
.res__l{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted)}
.res__v{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,32px);
  line-height:1.1;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums}
.res__r{display:block;font-style:normal;font-size:14px;line-height:1.55;
  color:var(--ink-muted);margin-top:7px;max-width:52ch}
.res__r b{color:var(--ink-soft)}
/* Derived, not published. White on --red-deep is 7.8:1, which carries at this size. */
.res__tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--white);background:var(--red-deep);
  padding:2px 7px;margin-left:7px;vertical-align:1px}
.calc__out .thk__note a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.calc__out .thk__note a:hover{color:var(--ink)}

@media (max-width:860px){
  .calc{grid-template-columns:1fr;gap:36px}
  /* a 44px minimum applies to the two jump links under the panel as much as to a chip */
  .calc__out .thk__note a{display:inline-block;padding:11px 0}
}
@media (max-width:420px){
  /* 227px of lockup plus a 44px menu target does not sit comfortably inside 320px */
  .hdr__icon{width:56px;height:22px}
  .hdr__word{width:117px;height:16px}
  .pick label{padding:12px 10px;font-size:15px}
  /* 270px of row at 320px is 38px a column, which a two-digit number fits and "12 mm" does not. */
  .pick--thk label{padding:12px 2px;font-size:15px}
}