/* ==========================================================================
   Wraptech Machines — inner page styles
   Loaded AFTER css/styles.css. Reuses the same tokens from :root, so a
   palette change in styles.css flows through everything here too.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Current nav item
   -------------------------------------------------------------------------- */
.nav-link.is-current{ color:var(--white); background:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   Mega menu footer row
   -------------------------------------------------------------------------- */
.mega-foot{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  margin-top:10px; padding-top:12px; padding-left:.7rem;
}

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--tint);
  padding:clamp(40px,5vw,72px) 0 clamp(36px,4.5vw,60px);
}
.page-hero-inner{ position:relative; max-width:860px; }
.page-hero h1{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:.6rem; }
.page-hero-sub{ font-size:1.05rem; color:#4C5B6B; margin:0; }

.crumbs{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--muted); margin-bottom:1rem;
}
.crumbs a{ color:var(--blue); }
.crumbs a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   Section head variants
   -------------------------------------------------------------------------- */
.section-head--left{ text-align:left; margin-left:0; max-width:760px; }
.section-foot{ text-align:center; margin-top:clamp(28px,3.5vw,44px); }
.sub-head{ margin-top:2rem; font-size:1.05rem; }
.card-kicker{
  font-family:var(--font-head); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 .25rem;
}

/* --------------------------------------------------------------------------
   Split layout (copy beside media / panel)
   -------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,60px); align-items:start; }
.split-copy h2{ margin-bottom:1rem; }
.split-media img{
  width:100%; border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  border:6px solid var(--white);
}
.pull-quote{
  margin:1.6rem 0; padding:1rem 0 1rem 1.25rem;
  border-left:3px solid var(--blue);
  font-family:var(--font-head); font-weight:500; font-size:1.05rem;
  color:var(--ink); font-style:normal;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; max-width:860px; }
.timeline::before{
  content:""; position:absolute; left:19px; top:14px; bottom:14px;
  width:2px; background:linear-gradient(var(--blue), rgba(8,40,161,.12));
}
.tl-item{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:22px; padding-bottom:36px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-marker{
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  box-shadow:0 0 0 6px var(--tint-2); position:relative; z-index:1;
}
.tl-period{
  font-family:var(--font-head); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  margin:0 0 .25rem;
}
.tl-body h3{ margin-bottom:.5rem; font-size:1.25rem; }

/* --------------------------------------------------------------------------
   Icon / capability grid
   -------------------------------------------------------------------------- */
.icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.icon-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 22px;
  box-shadow:var(--shadow-sm);
}
.icon-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.icon-card p{ margin:0; font-size:.92rem; }

/* --------------------------------------------------------------------------
   Jump bar (machine categories)
   -------------------------------------------------------------------------- */
.jumpbar{
  position:sticky; top:var(--header-h); z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.jumpbar-inner{ display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:thin; }
.jumpbar a{
  flex:none; display:grid; gap:1px;
  padding:.5rem .85rem; border-radius:10px;
  font-family:var(--font-head); font-size:.82rem; font-weight:600; color:var(--ink);
  white-space:nowrap; transition:background .16s ease, color .16s ease;
}
.jumpbar a:hover{ background:var(--tint); color:var(--blue); }
.jump-sub{ font-weight:400; font-size:.7rem; color:var(--muted); }

/* --------------------------------------------------------------------------
   Machine detail hero
   -------------------------------------------------------------------------- */
.machine-hero{
  position:relative; overflow:hidden; background:var(--tint);
  padding:clamp(36px,4.5vw,64px) 0;
}
.machine-hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px); align-items:center;
}
.machine-hero h1{ font-size:clamp(2rem,4.2vw,3.2rem); margin-bottom:.5rem; }
.hero-actions--left{ justify-content:flex-start; margin-bottom:0; margin-top:1.6rem; }
.machine-hero-media{
  background:linear-gradient(150deg, #FFFFFF 0%, #E3EEFB 100%);
  border-radius:var(--r-xl); padding:26px;
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  display:grid; place-items:center; min-height:320px;
}
.machine-hero-media img{ max-height:380px; width:auto; object-fit:contain; }

/* --------------------------------------------------------------------------
   Spec panel
   -------------------------------------------------------------------------- */
.spec-panel{
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px;
  position:sticky; top:calc(var(--header-h) + 20px);
}
.spec-panel h3{ font-size:1rem; margin-bottom:1rem; }
.spec-list{ margin:0 0 1.2rem; display:grid; gap:.7rem; }
.spec-list > div{ display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:start; }
.spec-list dt{
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding-top:.15rem;
}
.spec-list dd{ margin:0; font-size:.92rem; color:var(--ink); }
.spec-note{ font-size:.8rem; color:var(--muted); }
.btn-block{ width:100%; justify-content:center; }

/* --------------------------------------------------------------------------
   Format cards
   -------------------------------------------------------------------------- */
.format-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.format-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.format-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.format-art{
  height:140px;
  background:linear-gradient(150deg, #EAF2FF 0%, #CFE2F8 100%);
  display:grid; place-items:center; padding:16px;
  border-bottom:1px solid var(--line);
}
.format-art-label{
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  color:var(--blue-700); text-align:center; opacity:.65;
}
.format-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.format-body h2{ font-size:1.15rem; margin-bottom:.4rem; }
.format-body p{ font-size:.92rem; }
.format-runs{
  font-family:var(--font-head); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin:auto 0 .5rem;
}
.tag-row li a{ color:inherit; }
.tag-row li:hover{ background:#D2E5F7; }

/* the homepage format chips are now links */
a.format{ display:block; }

/* --------------------------------------------------------------------------
   Quote band extras
   -------------------------------------------------------------------------- */
.quote-sub{ color:rgba(255,255,255,.78); max-width:560px; margin:-0.8rem 0 1.6rem; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-layout{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px); align-items:start; }
.contact-form-wrap h2{ margin-bottom:1.4rem; }
.contact-form{ display:grid; gap:16px; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-family:var(--font-head); font-size:.8rem; font-weight:600; color:var(--ink);
}
.req{ color:var(--blue); }
.field input, .field textarea{
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.8rem 1rem;
  border:1px solid var(--line); border-radius:12px;
  background:var(--white); width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(8,40,161,.14);
}
.field input.has-error, .field textarea.has-error{ border-color:#B3261E; }
.field--inline{ grid-template-columns:auto 120px; align-items:center; gap:12px; }
.contact-form .btn{ justify-self:start; }

.contact-details{ display:grid; gap:16px; }
.contact-card{
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px;
}
.contact-card h3{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.contact-card p{ margin:0; font-size:.95rem; line-height:1.7; }
.contact-card a{ color:var(--blue); }
.contact-card a:hover{ text-decoration:underline; }
.contact-card--accent{ background:var(--blue); border-color:var(--blue); }
.contact-card--accent h3{ color:rgba(255,255,255,.75); }
.contact-card--accent p{ color:#fff; }

.map-wrap{ height:clamp(300px,38vw,440px); border-top:1px solid var(--line); }
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.25); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound{ text-align:center; padding-block:clamp(70px,10vw,140px); }
.notfound .section-sub{ margin-bottom:1.6rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .icon-grid{ grid-template-columns:repeat(2,1fr); }
  .format-cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .machine-hero-inner{ grid-template-columns:1fr; }
  .machine-hero-media{ order:-1; min-height:240px; }
  .machine-hero-media img{ max-height:260px; }
  .spec-panel{ position:static; }
  .contact-layout{ grid-template-columns:1fr; }
  .jumpbar{ top:0; }
  .mega-foot{ padding-left:0; }
}

@media (max-width:640px){
  .icon-grid{ grid-template-columns:1fr; }
  .format-cards{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:32px 1fr; gap:16px; }
  .tl-marker{ width:32px; height:32px; font-size:.82rem; }
  .timeline::before{ left:15px; }
  .field--inline{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Components added with the new site tree (stub pages, wide footer, RFQ)
   ========================================================================== */

/* Marks a page whose structure exists but whose copy does not */
.stub-flag{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--font-head); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-700); background:var(--tint-3);
  border:1px dashed #A9CBE8; border-radius:999px;
  padding:.3rem .8rem;
}

/* Child-page cards on section landing pages */
.link-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.link-card{
  display:flex; flex-direction:column; gap:.4rem;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.link-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#BFD8EE; }
.link-card h3{ margin:0; font-size:1.05rem; }
.link-card p{ margin:0; font-size:.9rem; }
.link-card-meta{ font-size:.75rem !important; color:var(--muted); }
.link-card .link-arrow{ margin-top:auto; padding-top:.8rem; }

/* Topic blocks for content items that have no route of their own */
.item-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.item-block{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.item-block h3{ font-size:.98rem; margin-bottom:.3rem; }
.item-placeholder{ margin:0; font-size:.82rem; color:var(--muted); font-style:italic; }

/* Reserved page with no children and no items */
.empty-note{
  text-align:center; max-width:560px; margin-inline:auto;
  background:var(--tint-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(32px,5vw,56px);
}
.empty-note code{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:.1rem .4rem; font-size:.85em;
}
.empty-note .btn{ margin-top:1.2rem; }

/* Two fields side by side */
.field--pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field--pair > div{ display:grid; gap:.4rem; }
.field select{
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px;
  background:var(--white); width:100%;
}
.field select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,40,161,.14);
}

/* Footer with five columns */
.footer-grid--wide{ grid-template-columns:1.6fr repeat(4, .85fr) 1.25fr; gap:28px; }
.footer-col h3 a{ color:var(--white); }
.footer-col h3 a:hover{ color:var(--blue); }
.footer-bottom-links{ display:flex; gap:18px; }

@media (max-width:1100px){
  .link-cards{ grid-template-columns:repeat(2,1fr); }
  .footer-grid--wide{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .item-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .link-cards, .item-grid{ grid-template-columns:1fr; }
  .field--pair{ grid-template-columns:1fr; }
  .footer-grid--wide{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   Photo row — captioned facility/plant photographs (About page)
   -------------------------------------------------------------------------- */
.photo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.photo-card{
  margin:0; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.photo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.photo-card img{
  width:100%; height:220px; object-fit:cover; display:block;
  border-bottom:1px solid var(--line);
}
.photo-card figcaption{ padding:20px 22px 24px; }
.photo-card h3{ font-size:1.02rem; margin-bottom:.35rem; }
.photo-card p{ margin:0; font-size:.9rem; }

@media (max-width:900px){ .photo-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .photo-row{ grid-template-columns:1fr; } }


/* --------------------------------------------------------------------------
   Prose column — a single readable measure inside a full-width shell, for
   sections that have body copy but no accompanying image
   -------------------------------------------------------------------------- */
.prose-col{ max-width:820px; }
.prose-col h2{ margin-bottom:1rem; }

/* --------------------------------------------------------------------------
   Image placeholder — a labelled slot where a photograph will go
   -------------------------------------------------------------------------- */
.img-placeholder{
  display:grid; place-content:center; gap:.3rem; text-align:center;
  width:100%; min-height:240px; padding:28px;
  background:
    repeating-linear-gradient(45deg, rgba(8,40,161,.05) 0 10px, transparent 10px 20px),
    linear-gradient(150deg, #FFFFFF 0%, #E3EEFB 100%);
  border:1px dashed #A9CBE8; border-radius:var(--r-lg);
}
.img-placeholder--tall{ min-height:340px; }
.img-placeholder-label{
  font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--blue-700);
}
.img-placeholder-note{
  font-size:.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em;
}

/* --------------------------------------------------------------------------
   Specification table
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.spec-table{ width:100%; border-collapse:collapse; min-width:520px; }
.spec-table th, .spec-table td{
  text-align:left; padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line); font-size:.92rem;
}
.spec-table thead th{
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:var(--tint-2); white-space:nowrap;
}
.spec-table tbody th{
  font-family:var(--font-head); font-weight:700; color:var(--ink); white-space:nowrap;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td{ border-bottom:0; }
.spec-table tbody tr:hover{ background:var(--tint); }
.table-note{ margin:.8rem 0 0; font-size:.82rem; color:var(--muted); }

/* Single-figure spec cards beside the table */
.spec-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;
}
.spec-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px;
}
.spec-card h3{
  font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.5rem;
}
.spec-figure{
  margin:0; font-family:var(--font-head); font-weight:700;
  font-size:1.15rem; color:var(--ink); letter-spacing:-.01em;
}
.spec-sub{ margin:.2rem 0 0; font-size:.78rem; color:var(--muted); }

@media (max-width:900px){ .spec-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .spec-cards{ grid-template-columns:1fr; } }


/* --------------------------------------------------------------------------
   Long text values in a stat row ("100 mg–50 g") need a smaller size than a
   bare figure, or they wrap once the column narrows. Never let them break.
   -------------------------------------------------------------------------- */
.stat-num--tight{
  font-size:clamp(1.2rem, 2.7vw, 2rem);
  white-space:nowrap;
}


/* --------------------------------------------------------------------------
   Jumpbar "back to the top of this page" link — first chip, visually set
   apart from the section links that follow it
   -------------------------------------------------------------------------- */
.jumpbar a.jump-top{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--blue); font-weight:700;
  border-right:1px solid var(--line);
  padding-right:.95rem; margin-right:.25rem;
  border-radius:10px 0 0 10px;
}
.jumpbar a.jump-top::before{
  content:""; flex:none; width:7px; height:7px; margin-top:2px;
  border-left:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(45deg);
}
.jumpbar a.jump-top:hover{ background:var(--tint); }


/* --------------------------------------------------------------------------
   Dosing head thumbnails inside an .icon-card
   -------------------------------------------------------------------------- */
.dose-thumb{
  height:150px; margin:-4px 0 16px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  display:grid; place-items:center;
}
.dose-thumb img{
  width:100%; height:100%; object-fit:contain; padding:12px;
}

/* --------------------------------------------------------------------------
   Alternating model rows on a category page
   -------------------------------------------------------------------------- */
.split--flip .split-media{ order:-1; }
.split--flip .split-copy{ order:1; }

/* Machine photographs: cap the height so a portrait shot doesn't tower over
   the copy beside it */
.split-media--contain img{
  max-height:420px; width:auto; margin-inline:auto;
  object-fit:contain; background:var(--white);
}

.model-line{
  font-family:var(--font-head); font-weight:600; font-size:1.05rem;
  color:var(--ink); margin-bottom:.9rem;
}
.format-label{
  font-family:var(--font-head); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin:1.4rem 0 .5rem;
}
.split-copy .hero-actions{ margin-top:1.4rem; }

@media (max-width:900px){
  /* on one column the image should lead, whichever way the row alternates */
  .split--flip .split-media, .split--flip .split-copy{ order:0; }
}

/* ==========================================================================
   TOUCH ERGONOMICS
   Audit across 53 routes at 360 / 390 / 768 / 1024 / 1280 found no layout
   breakage, but a number of link rows sat well under a comfortable 36px tap
   height on a phone, and a few labels rendered below 12px. Desktop density is
   unchanged; these only relax spacing where a finger is doing the pointing.
   ========================================================================== */

/* Nothing should render below 12px anywhere */
.tag-row li{ font-size:.75rem; }
.stub-flag{ font-size:.75rem; }
.format-label{ font-size:.75rem; }
.spec-table thead th{ font-size:.75rem; }

@media (max-width: 900px){

  /* Footer link columns — 37 links a page, previously ~16px tall */
  .footer-col a{ padding:.55rem 0; }
  .footer-contact a:not(.link-arrow){ padding:0; }   /* inline phone/email, not rows */

  /* Pouch format chips — the <a> inside the pill is the tap target, so the
     padding has to live on the link, not on the <li> around it */
  .tag-row{ gap:10px; }
  .tag-row li{ padding:0; font-size:.78rem; }
  .tag-row li a{ display:block; padding:.5rem .85rem; }
  .tag-row li:not(:has(a)){ padding:.5rem .85rem; }   /* plain, non-link chips */

  /* Sitemap page — 32 plain links in nested lists */
  .sitemap-branch li{ line-height:1.5; }
  .sitemap-branch a{ display:inline-block; padding:.6rem 0; }
  .sm-items li{ padding:.3rem 0; }

  /* Breadcrumbs stay deliberately compact — a secondary, rarely-tapped row */
  .crumbs{ gap:.6rem; }
  .crumbs a{ display:inline-block; padding:.35rem 0; }

  /* "View range" / "Read more" arrows are real actions, not decoration */
  .link-arrow{ padding:.5rem 0; }
  .link-card .link-arrow{ padding-top:.8rem; }

  /* Header controls and footer odds and ends */
  /* nav.css loads after this file, so .burger alone would lose */
  .header-actions .burger{ padding:12px 10px; }
  .socials a{ width:40px; height:40px; }
  .footer-bottom-links a{ display:inline-block; padding:.45rem 0; }
}


/* ==========================================================================
   FOOTER NEWSLETTER (Brevo)
   Sits inside the dark footer rather than as another pale band, so the RFQ
   band above it stays the single loud call to action on the page.
   ========================================================================== */
.footer-newsletter{
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:clamp(28px,4vw,40px);
  margin-bottom:clamp(28px,4vw,40px);
}
.nl-inner{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,56px); align-items:center;
}
.nl-copy .eyebrow{ color:#ffc24d; }
.nl-copy h2{ color:var(--white); font-size:clamp(1.25rem,2.2vw,1.65rem); margin-bottom:.5rem; }
.nl-copy p{ margin:0; font-size:.92rem; color:#AFC1D2; }

.nl-form{ display:grid; gap:12px; }
.nl-row{ display:flex; gap:10px; flex-wrap:wrap; }
.nl-row input[type="email"]{
  flex:1 1 220px; min-width:0;
  font-family:var(--font-body); font-size:.95rem; color:var(--white);
  padding:.8rem 1rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.nl-row input[type="email"]::placeholder{ color:#7E93A8; }
.nl-row input[type="email"]:focus{
  outline:none; background:rgba(255,255,255,.12);
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,40,161,.25);
}
.nl-row input.has-error{ border-color:#E8756B; }
.nl-row .btn{ flex:0 0 auto; }

.nl-consent{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.82rem; line-height:1.55; color:#AFC1D2; cursor:pointer;
}
.nl-consent input{
  flex:none; width:17px; height:17px; margin-top:.15rem;
  accent-color:var(--blue); cursor:pointer;
}
.nl-consent a{ color:#ffc24d; text-decoration:underline; }
.nl-consent input.has-error{ outline:2px solid #E8756B; outline-offset:2px; }

/* Honeypot — off-screen rather than display:none, which some bots detect */
.nl-trap{
  position:absolute; left:-5000px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.footer-newsletter .form-msg{ margin:0; min-height:0; }
.footer-newsletter .form-msg.ok{ color:#7FD6A8; }
.footer-newsletter .form-msg.err{ color:#F0948B; }
.nl-note{ margin:0; font-size:.75rem; color:#7E93A8; font-style:italic; }
.nl-note code{
  font-style:normal; background:rgba(255,255,255,.08);
  padding:.1rem .35rem; border-radius:5px;
}

@media (max-width:900px){
  .nl-inner{ grid-template-columns:1fr; gap:22px; }
  .nl-row .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   COOKIE CONSENT + EMBED GATES
   ========================================================================== */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  background:var(--navy); color:#D8E4EF;
  border-top:2px solid var(--blue);
  box-shadow:0 -14px 40px rgba(7,18,74,.32);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.consent.is-up{ transform:translateY(0); }
.consent-inner{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,40px); align-items:center;
  padding-block:20px;
}
.consent-title{
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  color:var(--white); margin:0 0 .35rem;
}
.consent-body{ margin:0; font-size:.88rem; line-height:1.6; max-width:62ch; }

.consent-detail{ margin-top:.7rem; }
.consent-detail summary{
  cursor:pointer; font-size:.8rem; color:#ffc24d;
  font-family:var(--font-head); font-weight:600;
}
.consent-detail summary:hover{ text-decoration:underline; }
.consent-table{ display:grid; gap:.7rem; margin-top:.8rem; max-width:70ch; }
.consent-row{ display:grid; grid-template-columns:150px 1fr; gap:14px; font-size:.82rem; }
.consent-row strong{ color:var(--white); font-family:var(--font-head); font-size:.78rem; }
.consent-row span{ color:#AFC1D2; line-height:1.55; }

.consent-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Reject carries the same visual weight as Accept — a reject that is harder
   to find than accept is not freely given consent. */
.btn-reject{
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,.45);
}
.btn-reject:hover{ background:rgba(255,255,255,.1); border-color:var(--white); transform:translateY(-2px); }
.consent-link{ font-size:.82rem; color:#9FB3C6; text-decoration:underline; }
.consent-link:hover{ color:var(--white); }

/* ------------------------------------------------------------ embed gates */
.embed-gate{ position:relative; }
.embed-gate__cover{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; gap:.35rem; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(45deg, rgba(8,40,161,.05) 0 10px, transparent 10px 20px),
    linear-gradient(150deg, #F2F7FD 0%, #DCE9F8 100%);
}
.embed-gate.is-loaded .embed-gate__cover{ display:none; }
.embed-gate__title{
  margin:0; font-family:var(--font-head); font-weight:700;
  font-size:1rem; color:var(--ink);
}
.embed-gate__note{ margin:0 0 .7rem; font-size:.82rem; color:var(--body); }
.embed-gate__load{ justify-self:center; }

@media (max-width:900px){
  .consent-inner{ grid-template-columns:1fr; padding-block:18px; }
  .consent-actions{ width:100%; }
  .consent-actions .btn{ flex:1 1 auto; justify-content:center; }
  .consent-link{ width:100%; text-align:center; padding-top:.4rem; }
  .consent-row{ grid-template-columns:1fr; gap:2px; }
  .consent-body{ font-size:.85rem; }
}

/* ==========================================================================
   DENSITY
   The client found the layout too airy. Every vertical rhythm value in the
   system is re-derived here from a single multiplier, so the whole site
   tightens or loosens by changing one number — no hunting through rules.

   --density: 1    original spacing
              .75  current — roughly a quarter out of the whitespace
              .85  if this ends up feeling too tight
              .65  if it needs to go further

   Only spacing is touched. Type sizes, colours and the touch-ergonomics
   block above are deliberately left alone: shrinking tap targets to save
   pixels would undo work done for a reason.
   ========================================================================== */
:root{ --density:.75; }

/* ----------------------------------------------------- section rhythm */
.section{ padding-block:calc(clamp(56px,7vw,96px) * var(--density)); }
.section-head{ margin-bottom:calc(clamp(32px,4vw,56px) * var(--density)); }
.section-foot{ margin-top:calc(clamp(28px,3.5vw,44px) * var(--density)); }
.sub-head{ margin-top:calc(2rem * var(--density)); }

/* ------------------------------------------------------------- heroes */
.hero{
  padding-top:calc(clamp(56px,7vw,104px) * var(--density));
  padding-bottom:calc(clamp(48px,6vw,80px) * var(--density));
}
.hero-actions{ margin-bottom:calc(clamp(36px,5vw,64px) * var(--density)); }
.page-hero{
  padding-top:calc(clamp(40px,5vw,72px) * var(--density));
  padding-bottom:calc(clamp(36px,4.5vw,60px) * var(--density));
}
.machine-hero{ padding-block:calc(clamp(36px,4.5vw,64px) * var(--density)); }

/* --------------------------------------------------------------- bands */
.stats{ padding-block:calc(clamp(36px,4.5vw,60px) * var(--density)); }
.stats-grid{ padding:calc(clamp(24px,3vw,36px) * var(--density)); }
.quote-band{ padding-block:calc(clamp(56px,7vw,92px) * var(--density)); }
.cta{ padding-block:calc(clamp(56px,7vw,92px) * var(--density)); }

/* ---------------------------------------------------- grids and gutters */
.product-grid{ gap:calc(22px * var(--density)); }
.link-cards{ gap:calc(20px * var(--density)); }
.icon-grid{ gap:calc(20px * var(--density)); }
.item-grid{ gap:calc(16px * var(--density)); }
.format-grid{ gap:calc(16px * var(--density)); }
.format-cards{ gap:calc(22px * var(--density)); }
.photo-row{ gap:calc(22px * var(--density)); }
.spec-cards{ gap:calc(16px * var(--density)); margin-top:calc(24px * var(--density)); }
.two-up{ gap:calc(24px * var(--density)); }
.sitemap-grid{ gap:calc(24px * var(--density)); }
.split{ gap:calc(clamp(28px,4vw,60px) * var(--density)); }
.video-layout{ gap:calc(clamp(28px,4vw,56px) * var(--density)); }
.contact-layout{ gap:calc(clamp(28px,4vw,56px) * var(--density)); }
.machine-hero-inner{ gap:calc(clamp(24px,4vw,56px) * var(--density)); }

/* ---------------------------------------------------------- card insides */
.product-card{ padding:calc(22px * var(--density)); }
.product-media{ height:calc(210px * var(--density)); margin-bottom:calc(18px * var(--density)); }
.icon-card{ padding:calc(26px * var(--density)) calc(22px * var(--density)); }
.link-card{ padding:calc(24px * var(--density)); }
.item-block{ padding:calc(20px * var(--density)); }
.feature-card{ padding:calc(clamp(24px,3vw,38px) * var(--density)); }
.feature-media{ padding-top:calc(24px * var(--density)); }
.feature-media img{ height:calc(230px * var(--density)); }
.spec-panel{ padding:calc(26px * var(--density)); }
.spec-card{ padding:calc(20px * var(--density)); }
.format{ padding:calc(26px * var(--density)) calc(14px * var(--density)); }
.format-body{ padding:calc(22px * var(--density)); }
.photo-card figcaption{ padding:calc(20px * var(--density)) calc(22px * var(--density)) calc(24px * var(--density)); }
.photo-card img{ height:calc(220px * var(--density)); }
.sitemap-branch{ padding:calc(26px * var(--density)); }
.empty-note{ padding:calc(clamp(32px,5vw,56px) * var(--density)); }
.contact-card{ padding:calc(22px * var(--density)); }

/* --------------------------------------------------------------- lists */
.tl-item{ padding-bottom:calc(36px * var(--density)); }
.check-list{ gap:calc(.6rem * var(--density)); }

/* -------------------------------------------------------------- footer */
.site-footer{ padding-top:calc(clamp(48px,6vw,76px) * var(--density)); }
.footer-grid{ padding-bottom:calc(44px * var(--density)); gap:calc(28px * var(--density)); }
.footer-newsletter{
  padding-bottom:calc(clamp(28px,4vw,40px) * var(--density));
  margin-bottom:calc(clamp(28px,4vw,40px) * var(--density));
}