/* ==========================================================================
   MAXIMUM GLOBAL PACKAGING LIMITED — Design System
   Palette pulled directly from brand mark: deep navy (#002060), steel gray,
   white, plus a signature strap-amber accent (tension/hazard-tape yellow —
   the colour of the tooling this company's product wraps around a crate).
   Type: Oswald (condensed industrial headline) + Work Sans (body) +
   IBM Plex Mono (spec data / eyebrows — technical, tape-measure precision).
   ========================================================================== */

:root{
  /* ---- Color: brand navy scale ---- */
  --navy-900:#0A1730;
  --navy-800:#002060;   /* exact brand navy sampled from logo */
  --navy-700:#0C2E70;
  --navy-600:#1B4B8F;
  --blue-500:#2E63AC;
  --blue-100:#E6EDF7;

  /* ---- Color: steel scale (from "GLOBAL PACKAGING" wordmark gray) ---- */
  --steel-700:#525B68;
  --steel-500:#657080;   /* darkened from initial sample for WCAG AA text contrast */
  --steel-300:#B7C0CC;
  --steel-100:#EEF1F5;
  --steel-050:#F6F8FA;

  /* ---- Color: signature accent — strap-tension amber ---- */
  --amber-500:#E8A23C;
  --amber-600:#9C6419;   /* darkened from initial sample for WCAG AA text contrast */
  --amber-100:#FCF0DD;

  /* ---- Neutrals ---- */
  --white:#FFFFFF;
  --ink:#1B2333;
  --ink-soft:#4A5262;
  --line:#E2E6EC;

  /* ---- State ---- */
  --success:#1E7A4C;
  --danger:#C23B3B;

  /* ---- Type ---- */
  --f-display:'Oswald', 'Arial Narrow', sans-serif;
  --f-body:'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Layout ---- */
  --container:1240px;
  --container-narrow:840px;
  --radius-sm:4px;
  --radius:8px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(10,23,48,0.08);
  --shadow-md:0 8px 24px rgba(10,23,48,0.10);
  --shadow-lg:0 20px 48px rgba(10,23,48,0.16);
  --header-h:88px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --speed:.25s;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul[class],ol[class]{list-style:none;padding:0;}
img,picture,svg{display:block;max-width:100%;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}

body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--amber-500);color:var(--navy-900);}

:focus-visible{
  outline:3px solid var(--amber-500);
  outline-offset:2px;
  border-radius:2px;
}

/* ---- Typography ---- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--navy-800);
  line-height:1.08;
  font-weight:600;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.4rem,4.4vw,4.2rem);text-transform:uppercase;letter-spacing:.01em;}
h2{font-size:clamp(1.9rem,3.2vw,2.75rem);text-transform:uppercase;}
h3{font-size:clamp(1.25rem,2vw,1.6rem);text-transform:uppercase;}
h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;}

p{color:var(--ink-soft);max-width:64ch;}
p.lead{font-size:1.2rem;color:var(--ink);max-width:56ch;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber-600);
  font-weight:500;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:'';
  width:28px;height:2px;
  background:var(--amber-500);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--amber-500);}

.section-head{max-width:var(--container-narrow);margin-bottom:3rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{margin-top:1rem;}
.section-head.center p{margin-left:auto;margin-right:auto;}

.mono-label{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel-500);
}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.wrap-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:24px;}
section{padding-block:clamp(56px,8vw,108px);}
.section-tight{padding-block:clamp(40px,5vw,64px);}
.bg-steel{background:var(--steel-050);}
.bg-navy{background:var(--navy-800);color:var(--white);}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--white);}
.bg-navy p{color:#C6D0E2;}
.bg-blue-100{background:var(--blue-100);}

.grid{display:grid;gap:32px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

.stack{display:flex;flex-direction:column;}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}

.divider{height:1px;background:var(--line);border:0;margin-block:0;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  padding:15px 28px;
  border-radius:2px;
  border:2px solid transparent;
  transition:transform var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--speed) var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-amber{background:var(--amber-500);color:var(--navy-900);border-color:var(--amber-500);}
.btn-amber:hover{background:var(--amber-600);border-color:var(--amber-600);transform:translateY(-2px);}
.btn-navy{background:var(--navy-800);color:var(--white);border-color:var(--navy-800);}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
.btn-outline-navy{background:transparent;color:var(--navy-800);border-color:var(--navy-800);}
.btn-outline-navy:hover{background:var(--navy-800);color:var(--white);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:11px 20px;font-size:.74rem;}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand img{height:56px;width:auto;}

.main-nav{display:flex;align-items:center;height:100%;}
.main-nav > ul{display:flex;align-items:center;height:100%;gap:2px;}
.main-nav > ul > li{height:100%;position:relative;}
.nav-link{
  display:flex;align-items:center;gap:6px;height:100%;
  padding-inline:16px;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--navy-800);
  position:relative;
}
.nav-link::after{
  content:'';position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--amber-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--speed) var(--ease);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--navy-800);}
.nav-caret{width:10px;height:10px;transition:transform var(--speed) var(--ease);}
li.has-dropdown:hover .nav-caret{transform:rotate(180deg);}

/* Products mega-dropdown */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:560px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  border-radius:var(--radius);
  padding:14px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
li.has-dropdown:hover .mega,
li.has-dropdown:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.mega a{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:var(--radius-sm);
  color:var(--ink);
}
.mega a:hover{background:var(--steel-050);color:var(--navy-800);}
.mega a .p-name{font-family:var(--f-body);font-weight:600;font-size:.92rem;}
.mega a .p-sub{font-family:var(--f-mono);font-size:.68rem;color:var(--steel-500);letter-spacing:.04em;}
.mega .cat-label{
  grid-column:1/-1;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-600);padding:8px 14px 2px;
}
.mega .cat-label:not(:first-child){border-top:1px solid var(--line);margin-top:6px;padding-top:12px;}
.mega .submenu-group{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-left:10px;border-left:2px solid var(--steel-100);margin-left:14px;}

.header-cta{flex:none;display:flex;align-items:center;gap:14px;}
.header-tel{
  display:flex;flex-direction:column;
  font-family:var(--f-mono);font-size:.75rem;color:var(--steel-500);
  text-align:right;line-height:1.3;
}
.header-tel a{color:var(--navy-800);font-weight:600;}

.nav-toggle{display:none;background:none;border:0;padding:8px;flex:none;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:'';display:block;width:26px;height:2px;background:var(--navy-800);
  transition:transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-toggle span{position:relative;}
.nav-toggle span::before{position:absolute;top:-8px;}
.nav-toggle span::after{position:absolute;top:8px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span::after{transform:translateY(-8px) rotate(-45deg);}

/* ---- Breadcrumb ---- */
.breadcrumb{
  padding-block:16px;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;
  color:var(--steel-500);
  background:var(--steel-050);
  border-bottom:1px solid var(--line);
}
.breadcrumb a{color:var(--steel-700);}
.breadcrumb a:hover{color:var(--amber-600);}
.breadcrumb .sep{margin-inline:8px;color:var(--steel-300);}
.breadcrumb .current{color:var(--navy-800);font-weight:600;}

/* ==========================================================================
   SIGNATURE ELEMENT — "THE STRAP LINE"
   A taut diagonal band motif referencing tensioned strapping wrapped over a
   crate corner, used sparingly: page hero corner + section dividers.
   ========================================================================== */
.strap-corner{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.strap-corner .band{
  position:absolute;
  background:linear-gradient(90deg, transparent, rgba(232,162,60,.9) 18%, rgba(232,162,60,.55) 82%, transparent);
  height:46px;
  width:160%;
  transform-origin:left center;
}
.strap-corner .band.b1{top:-8%;left:-30%;transform:rotate(-32deg);}
.strap-corner .band.b2{top:6%;left:-30%;transform:rotate(-32deg);height:10px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 18%, rgba(255,255,255,.28) 82%, transparent);}

.strap-divider{
  position:relative;height:64px;overflow:hidden;
}
.strap-divider svg{width:100%;height:100%;display:block;}

/* Coil / roll motif — concentric rings echoing a strap roll viewed end-on */
.coil-deco{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.14);
  pointer-events:none;
}
.coil-deco::before{
  content:'';position:absolute;inset:22%;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.14);
}
.coil-deco::after{
  content:'';position:absolute;inset:44%;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.2);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  background:var(--navy-800);
  background-image:radial-gradient(ellipse 900px 500px at 85% -10%, rgba(46,99,172,.55), transparent 60%),
                    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #051133 100%);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(72px,11vw,132px) clamp(64px,9vw,110px);
}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero h1{color:var(--white);}
.hero h1 .accent{color:var(--amber-500);}
.hero p.lead{color:#C6D0E2;}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:2.2rem;}
.hero-stats{display:flex;gap:30px;margin-top:3rem;flex-wrap:wrap;}
.hero-stats .stat b{
  display:block;font-family:var(--f-display);font-size:2.1rem;color:var(--white);
  text-transform:uppercase;
}
.hero-stats .stat span{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-300);
}
.hero-visual{position:relative;min-height:340px;}

/* page (non-home) header/hero — shorter */
.page-hero{
  position:relative;background:var(--navy-800);
  background-image:radial-gradient(ellipse 700px 420px at 90% 0%, rgba(46,99,172,.5), transparent 60%),
                    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, #051133 100%);
  color:var(--white);overflow:hidden;
  padding-block:56px 64px;
}
.page-hero h1{color:var(--white);margin-bottom:.6rem;}
.page-hero p{color:#C6D0E2;font-size:1.08rem;}
.page-hero .wrap{position:relative;z-index:2;}

/* ---- Stat strip ---- */
.stat-strip{
  background:var(--navy-900);
  color:var(--white);
  padding-block:34px;
}
.stat-strip .grid{gap:24px;}
.stat-strip .stat{border-left:2px solid rgba(232,162,60,.5);padding-left:18px;}
.stat-strip .stat b{
  display:block;font-family:var(--f-display);font-size:2.1rem;line-height:1;margin-bottom:6px;
}
.stat-strip .stat span{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-300);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}

/* Product card */
.product-card{display:flex;flex-direction:column;height:100%;}
.product-thumb{
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--steel-100), var(--steel-050));
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-thumb img{width:100%;height:100%;object-fit:cover;}
.product-thumb .ph-icon{width:64px;height:64px;color:var(--steel-300);}
.product-thumb .ph-label{
  position:absolute;bottom:10px;left:10px;right:10px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-500);text-align:center;
}
.product-card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.product-card .cat{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-600);}
.product-card h3{font-size:1.15rem;margin:0;}
.product-card p{font-size:.92rem;flex:1;margin:0;}
.product-card .go{
  margin-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-800);font-weight:600;
}
.product-card .go svg{width:14px;height:14px;transition:transform var(--speed) var(--ease);}
.product-card:hover .go svg{transform:translateX(4px);}

/* Feature card */
.feature-card{padding:30px 26px;}
.feature-card .ic{
  width:52px;height:52px;border-radius:var(--radius-sm);
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.feature-card .ic svg{width:26px;height:26px;}
.feature-card h3{font-size:1.05rem;margin-bottom:8px;}
.feature-card p{font-size:.92rem;margin:0;}

/* Value / icon-list row */
.icon-row{display:flex;gap:16px;align-items:flex-start;}
.icon-row .ic{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--amber-100);color:var(--amber-600);
  display:flex;align-items:center;justify-content:center;
}
.icon-row .ic svg{width:22px;height:22px;}
.icon-row h4{margin-bottom:4px;font-size:.95rem;}
.icon-row p{font-size:.9rem;margin:0;}

/* Process steps (real sequence -> numbered markers justified) */
.process{display:flex;gap:0;counter-reset:step;position:relative;}
.process::before{
  content:'';position:absolute;top:26px;left:5%;right:5%;height:2px;
  background:repeating-linear-gradient(90deg, var(--steel-300) 0 10px, transparent 10px 18px);
}
.process-step{flex:1;text-align:center;position:relative;padding-inline:12px;}
.process-step .num{
  counter-increment:step;
  width:52px;height:52px;border-radius:50%;
  background:var(--navy-800);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:1.2rem;
  margin:0 auto 18px;position:relative;z-index:2;
  border:4px solid var(--white);box-shadow:0 0 0 2px var(--steel-300);
}
.process-step h4{font-size:.92rem;margin-bottom:6px;}
.process-step p{font-size:.85rem;margin:0;}
@media (max-width:800px){
  .process{flex-direction:column;gap:28px;}
  .process::before{display:none;}
}

/* Testimonial */
.testimonial{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;
}
.testimonial .quote-mark{font-family:var(--f-display);font-size:3rem;color:var(--amber-500);line-height:1;display:block;margin-bottom:6px;}
.testimonial p{font-size:.98rem;color:var(--ink);}
.testimonial .who{margin-top:16px;font-family:var(--f-mono);font-size:.74rem;color:var(--steel-500);text-transform:uppercase;letter-spacing:.04em;}

/* ==========================================================================
   SPEC TABLE (product pages)
   ========================================================================== */
.spec-table{
  width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  font-family:var(--f-mono);font-size:.86rem;
}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table tr:last-child{border-bottom:0;}
.spec-table tr:nth-child(odd){background:var(--steel-050);}
.spec-table th,.spec-table td{padding:13px 18px;text-align:left;}
.spec-table th{
  width:38%;color:var(--steel-700);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;font-size:.72rem;
}
.spec-table td{color:var(--ink);font-weight:500;}
.spec-note{font-size:.82rem;color:var(--steel-500);margin-top:14px;font-style:italic;}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--steel-100);color:var(--steel-700);padding:7px 14px;border-radius:100px;
}

/* Applications chip grid */
.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){.chip-grid{grid-template-columns:repeat(2,1fr);}}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 14px;text-align:center;font-size:.86rem;color:var(--ink);font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.chip svg{width:26px;height:26px;color:var(--navy-600);}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-field{margin-bottom:20px;}
.form-field label{
  display:block;margin-bottom:8px;font-family:var(--f-mono);font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--steel-700);font-weight:500;
}
.form-field .req{color:var(--amber-600);}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);font-size:.96rem;transition:border-color var(--speed) var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--navy-600);outline:none;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-note{font-size:.82rem;color:var(--steel-500);margin-top:-8px;margin-bottom:20px;}
.file-drop{
  border:1.5px dashed var(--steel-300);border-radius:var(--radius-sm);
  padding:26px;text-align:center;font-size:.88rem;color:var(--steel-500);
  background:var(--steel-050);cursor:pointer;
}
.file-drop.dragover{border-color:var(--navy-600);background:var(--blue-100);}
.form-status{
  margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.9rem;display:none;
}
.form-status.show{display:block;}
.form-status.ok{background:#E7F5EC;color:var(--success);border:1px solid #B9E3C6;}
.form-status.err{background:#FBEAEA;color:var(--danger);border:1px solid #F0C2C2;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  background:var(--amber-500);
  position:relative;overflow:hidden;
}
.cta-band .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-block:52px;position:relative;z-index:2;
}
.cta-band h2{color:var(--navy-900);margin-bottom:6px;}
.cta-band p{color:var(--navy-900);opacity:.8;margin:0;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-900);color:#B9C3D6;}
.footer-top{padding-block:64px 40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{font-family:var(--f-display);color:var(--white);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;}
.footer-brand span{color:var(--amber-500);}
.footer-tagline{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-300);margin-top:8px;}
.footer-col h4{color:var(--white);font-size:.82rem;margin-bottom:18px;letter-spacing:.06em;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:.9rem;color:#B9C3D6;transition:color var(--speed) var(--ease);}
.footer-col a:hover{color:var(--amber-500);}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;}
.footer-contact svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--amber-500);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:22px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.03em;color:var(--steel-500);
}
.footer-bottom a{color:var(--steel-300);}
.footer-bottom a:hover{color:var(--amber-500);}
.social-row{display:flex;gap:10px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  transition:all var(--speed) var(--ease);
}
.social-row a:hover{background:var(--amber-500);border-color:var(--amber-500);color:var(--navy-900);}
.social-row svg{width:17px;height:17px;}

/* back to top */
.back-top{
  position:fixed;right:22px;bottom:22px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--navy-800);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all var(--speed) var(--ease);
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-top:hover{background:var(--amber-500);color:var(--navy-900);}
.back-top svg{width:20px;height:20px;}

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
@media (max-width:1080px){
  .main-nav{
    position:fixed;top:var(--header-h);right:0;bottom:0;left:0;
    height:calc(100vh - var(--header-h));background:var(--white);
    transform:translateX(100%);transition:transform var(--speed) var(--ease);
    overflow-y:auto;padding:8px 0 40px;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;height:auto;gap:0;}
  .main-nav > ul > li{height:auto;border-bottom:1px solid var(--line);}
  .nav-link{height:auto;padding:18px 24px;justify-content:space-between;}
  .nav-link::after{display:none;}
  .mega{
    position:static;transform:none;width:auto;box-shadow:none;border:0;
    border-radius:0;background:var(--steel-050);
    display:none;grid-template-columns:1fr;padding:6px 12px 14px;
  }
  li.has-dropdown.open .mega{display:grid;opacity:1;visibility:visible;}
  li.has-dropdown .mega{opacity:1;visibility:visible;pointer-events:auto;} /* override hover css so JS toggle controls it */
  .mega .submenu-group{grid-template-columns:1fr;}
  .header-tel{display:none;}
  .nav-toggle{display:block;}
  .header-cta .btn{display:none;}
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
/* Content is always visible — never gated behind JS, scroll position or an
   IntersectionObserver callback firing in time. .in is added by main.js purely
   for a subtle one-time settle transition; its absence never hides anything. */
.reveal{opacity:1;transform:none;transition:opacity .5s var(--ease), transform .5s var(--ease);}
.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--navy-800);color:var(--white);
  padding:12px 18px;z-index:2000;
}
.skip-link:focus{left:12px;top:12px;}

.pill{
  display:inline-block;padding:5px 14px;border-radius:100px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--blue-100);color:var(--navy-800);
}

.img-frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--steel-050);
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:36px;}}
.two-col.reverse{direction:rtl;}
.two-col.reverse > *{direction:ltr;}

.list-check{display:flex;flex-direction:column;gap:14px;}
.list-check li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--ink-soft);}
.list-check svg{flex:none;width:20px;height:20px;color:var(--amber-600);margin-top:2px;}

.map-frame{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  filter:grayscale(15%);
}
.map-frame iframe{width:100%;height:420px;border:0;display:block;}


/* ==========================================================================
   PRE-LAUNCH ADDITIONS — credibility strip, intro band, range heads,
   documentation cards, core-value grid
   ========================================================================== */

/* ---- Credibility strip (sits directly under the hero) ---- */
.cred-strip{
  background:var(--navy-900);
  border-top:3px solid var(--amber-500);
  padding-block:26px;
}
.cred-strip ul{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
  list-style:none;margin:0;padding:0;
}
.cred-strip li{
  display:flex;align-items:center;gap:12px;
  color:var(--white);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.35;
}
.cred-strip li + li{border-left:1px solid rgba(255,255,255,.13);padding-left:18px;}
.cred-strip svg{width:26px;height:26px;flex:none;color:var(--amber-500);}

/* ---- Intro band ---- */
.intro-band{background:var(--steel-050);border-bottom:1px solid var(--line);}
.intro-band .eyebrow{display:flex;align-items:center;}

/* ---- Product range group headings ---- */
.range-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:12px;
  border-bottom:2px solid var(--line);
}
.range-head span{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel-500);font-weight:400;
}
.range-head span a{color:var(--navy-800);text-decoration:underline;text-underline-offset:3px;}
.range-head span a:hover{color:var(--amber-600);}

/* ---- Documentation cards ---- */
.doc-grid{align-items:stretch;}
.doc-card{
  display:flex;flex-direction:column;gap:10px;
  padding:26px 24px 24px;height:100%;color:var(--ink);
}
.doc-card .ic{
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
}
.doc-card .ic svg{width:24px;height:24px;}
.doc-card h3{font-size:1rem;margin:6px 0 0;}
.doc-card p{font-size:.9rem;margin:0;flex:1;}
.doc-card .go{
  margin-top:8px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-800);font-weight:600;
}
.doc-card .go svg{width:14px;height:14px;transition:transform var(--speed) var(--ease);}
.doc-card:hover .go svg{transform:translateX(4px);}
.doc-note{
  margin-top:32px;text-align:center;font-size:.92rem;color:var(--steel-700);
}
.doc-note a{color:var(--navy-800);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.doc-note a:hover{color:var(--amber-600);}

/* ---- Core values grid (7 items) ---- */
.value-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 28px;}
.value-item{flex:0 1 240px;max-width:280px;}
.value-item{text-align:center;}
.value-item .ic{
  margin-inline:auto;width:56px;height:56px;border-radius:50%;
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.value-item .ic svg{width:26px;height:26px;}
.value-item h4{margin-bottom:6px;}
.value-item p{font-size:.92rem;}

@media (max-width:1080px){
  .cred-strip ul{grid-template-columns:repeat(3,1fr);gap:16px;}
  .cred-strip li + li{border-left:0;padding-left:0;}
  .value-item{flex-basis:220px;}
}
@media (max-width:760px){
  .cred-strip ul{grid-template-columns:repeat(2,1fr);}
  .cred-strip li{font-size:.68rem;}
  .value-item{flex-basis:200px;}
  .range-head{font-size:1.15rem;}
}
@media (max-width:480px){
  .cred-strip ul{grid-template-columns:1fr;}
  .value-item{flex-basis:100%;}
}


/* ---- Product imagery: show the whole product, consistent framing ---- */
.img-frame{
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
}
.img-frame img{
  width:100%;height:100%;
  object-fit:contain;
  padding:0;
  border-radius:0;
}

/* Feature (film) cards on the home + products pages */
.product-card.film-card .product-thumb{
  aspect-ratio:16/10;
  background:var(--white);
}
.product-card.film-card .product-thumb img{object-fit:contain;padding:0;}

/* placeholder illustrations inside an image frame stay icon-sized */
.img-frame > svg{width:64px;height:64px;flex:none;color:var(--steel-300);}
.img-frame .mono-label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.img-frame .ph-icon{width:64px;height:64px;}


/* ---- Media gallery ---- */
.gallery-grid{row-gap:28px;}
.gallery-item{margin:0;}
.gallery-item figcaption{
  margin-top:10px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel-500);text-align:center;
}

/* product photos are delivered on a 4:3 white canvas with the margin baked in,
   so the thumb needs no gradient or padding of its own */
.product-thumb{background:var(--white);}
.product-thumb img{object-fit:contain;}


/* ==========================================================================
   RANGE EXPANSION — wide mega menu, markets, FAQ, performance metrics,
   equipment compatibility, comparison tables
   ========================================================================== */

/* ---- Wide mega menu -------------------------------------------------------
   The Films/PET/PP menu outgrew a 560px box once the stretch and shrink film
   ranges were split into individual pages. On desktop it is pinned to the
   viewport (the header is sticky at top:0, so top:var(--header-h) sits it
   flush under the bar) rather than to the <li>. Anchoring to the <li> would
   push a panel this wide off the left edge of the screen. The mobile rules
   further down the file reset it back to a static, single-column accordion. */
@media (min-width:1081px){
  .mega{
    position:fixed;top:var(--header-h);left:50%;
    transform:translateX(-50%) translateY(8px);
    width:min(1080px, calc(100vw - 32px));
    grid-template-columns:repeat(3,1fr);
    gap:4px 18px;padding:20px 18px 14px;
    max-height:calc(100vh - var(--header-h) - 24px);overflow-y:auto;
  }
  li.has-dropdown:hover .mega,
  li.has-dropdown:focus-within .mega{transform:translateX(-50%) translateY(0);}
}
.mega-col{display:flex;flex-direction:column;min-width:0;}
.mega-col .cat-label{grid-column:auto;padding:8px 14px 2px;}
.mega-col .cat-label:not(:first-child){margin-top:14px;padding-top:14px;}
a.cat-label{display:block;}
a.cat-label:hover{color:var(--navy-800);background:transparent;text-decoration:underline;text-underline-offset:3px;}
.mega-foot{
  grid-column:1/-1;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.mega-foot a{
  flex-direction:row;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-800);font-weight:600;padding:8px 14px;
}
.mega-foot svg{width:14px;height:14px;}

/* The reset only strips markers from ul[class]/ol[class], and the nav and footer
   lists carry no class of their own — so they were rendering disc bullets. Strip
   them here rather than by adding classes to markup duplicated across 29 pages.
   Deliberately scoped: content lists (.faq-answer ul) still want their markers. */
.main-nav ul,
.site-footer ul{list-style:none;padding:0;margin:0;}

/* The header already carries a "Request a Quote" button through to the contact
   page, so the Contact Us nav item is for the mobile drawer only. */
.show-contact-mobile{display:none;}
@media (max-width:1080px){.show-contact-mobile{display:block;}}

/* Markets and FAQ pushed the nav past what a 1080–1280px window can hold beside
   the phone numbers. In that band the header sheds the tel block (the numbers
   are still one tap away in the footer and on the contact page) and tightens the
   link padding, rather than letting the bar overflow horizontally. */
@media (min-width:1081px) and (max-width:1280px){
  .header-tel{display:none;}
  .nav-link{padding-inline:11px;}
  .nav-link::after{left:11px;right:11px;}
}

/* ---- Markets we serve ---- */
.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:1080px){.market-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.market-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.market-grid{grid-template-columns:1fr;}}
.market-card{
  display:flex;flex-direction:column;gap:10px;padding:26px 24px;height:100%;color:var(--ink);
}
.market-card .ic{
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.market-card .ic svg{width:24px;height:24px;}
.market-card h3{font-size:1.02rem;margin:4px 0 0;}
.market-card p{font-size:.9rem;margin:0;flex:1;}
.market-card ul{
  list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
}
.market-card li{
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--steel-100);color:var(--steel-700);padding:5px 10px;border-radius:100px;
}

/* ---- FAQ accordion (native <details>, works with JS off) ---- */
.faq-list{display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.faq-item > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 24px;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.35;
  color:var(--navy-800);
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary:hover{background:var(--steel-050);}
.faq-item > summary .plus{
  flex:none;width:22px;height:22px;position:relative;margin-top:2px;color:var(--amber-600);
}
.faq-item > summary .plus::before,
.faq-item > summary .plus::after{
  content:'';position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform var(--speed) var(--ease);
}
.faq-item > summary .plus::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-item > summary .plus::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.faq-item[open] > summary .plus::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-item[open] > summary{background:var(--steel-050);border-bottom:1px solid var(--line);}
.faq-answer{padding:20px 24px 22px;}
.faq-answer p{font-size:.95rem;}
.faq-answer p + p{margin-top:12px;}
.faq-answer ul{margin:12px 0 0;padding-left:20px;color:var(--ink-soft);font-size:.95rem;}
.faq-answer li + li{margin-top:6px;}
.faq-answer a{color:var(--navy-800);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.faq-answer a:hover{color:var(--amber-600);}

/* ---- Performance metrics ---- */
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:760px){.metric-grid{grid-template-columns:1fr;}}
.metric{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:flex;flex-direction:column;gap:6px;
}
.metric .m-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.metric h4{margin:0;font-size:1rem;}
.metric .m-value{
  font-family:var(--f-mono);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--navy-800);background:var(--blue-100);padding:5px 12px;border-radius:100px;
  white-space:nowrap;
}
.metric p{font-size:.9rem;margin:0;}

/* ---- Equipment compatibility ---- */
.equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:760px){.equip-grid{grid-template-columns:1fr;}}
.equip{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;
}
.equip svg{width:24px;height:24px;flex:none;color:var(--navy-600);margin-top:2px;}
.equip b{display:block;font-family:var(--f-body);font-weight:600;font-size:.95rem;color:var(--ink);}
.equip span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:3px;}

/* ==========================================================================
   ROLL FORMATS — the hand / machine / jumbo axis, colour variants,
   at-a-glance specs and machine power grades
   ========================================================================== */

/* ---- Roll format trio (stretch film hub) ---- */
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:860px){.format-grid{grid-template-columns:1fr;}}
.format-card{
  display:flex;flex-direction:column;color:var(--ink);overflow:hidden;height:100%;
}
.format-card .fmt-visual{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  padding:30px 24px 24px;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:150px;
}
.format-card .fmt-visual svg{height:92px;width:auto;}
.format-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1;}
.format-card .cat{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-600);
}
.format-card h3{margin:0;font-size:1.28rem;}
.format-card p{font-size:.93rem;margin:0;flex:1;}
.format-card dl{
  margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;
  font-family:var(--f-mono);font-size:.72rem;
}
.format-card dt{color:var(--steel-500);text-transform:uppercase;letter-spacing:.04em;}
.format-card dd{margin:0;color:var(--navy-800);font-weight:600;}
.format-card .go{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-800);font-weight:600;
}
.format-card .go svg{width:14px;height:14px;transition:transform var(--speed) var(--ease);}
.format-card:hover .go svg{transform:translateX(4px);}

/* ---- At a glance strip ---- */
.glance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(186px,100%),1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media (max-width:960px){.glance{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.glance{grid-template-columns:1fr;}}
.glance > div{background:var(--white);padding:20px 20px 22px;}
.glance dt{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-500);margin-bottom:8px;
}
.glance dd{
  margin:0;font-family:var(--f-display);font-weight:600;font-size:1.12rem;
  color:var(--navy-800);line-height:1.25;
}
.glance dd small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.82rem;
  color:var(--ink-soft);margin-top:5px;line-height:1.45;
}

/* ---- Colour variants ---- */
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:960px){.swatch-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.swatch-grid{grid-template-columns:repeat(2,1fr);}}
.swatch{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.swatch:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.swatch svg{width:64px;height:78px;display:block;margin-bottom:8px;}
.swatch b{font-size:.98rem;color:var(--ink);}
.swatch span{font-size:.82rem;color:var(--ink-soft);line-height:1.45;flex:1;}
.swatch em{
  font-style:normal;margin-top:10px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;
}
.swatch em.std{background:var(--blue-100);color:var(--navy-800);}
.swatch em.order{background:var(--steel-100);color:var(--steel-700);}

/* ---- Specialty options ---- */
.option-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:960px){.option-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.option-grid{grid-template-columns:1fr;}}
.option{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  border-top:3px solid var(--amber-500);
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;
}
.option .ic{
  width:40px;height:40px;border-radius:var(--radius-sm);
  background:var(--blue-100);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
}
.option .ic svg{width:21px;height:21px;}
.option b{font-size:.98rem;color:var(--ink);}
.option span{font-size:.86rem;color:var(--ink-soft);line-height:1.5;}

/* ---- Machine power grades ---- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.tier-grid{grid-template-columns:1fr;}}
.tier{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;display:flex;flex-direction:column;overflow:hidden;height:100%;
}
.tier .tier-head{
  background:var(--navy-800);color:var(--white);padding:18px 22px;
}
.tier .tier-head .n{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-500);display:block;margin-bottom:5px;
}
.tier .tier-head h3{margin:0;color:var(--white);font-size:1.12rem;}
.tier .tier-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.tier .stretch-band{
  font-family:var(--f-mono);font-weight:600;font-size:.86rem;color:var(--navy-800);
  background:var(--blue-100);border-radius:100px;padding:7px 14px;align-self:flex-start;
}
.tier p{font-size:.9rem;margin:0;}
.tier ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.tier li{
  font-size:.86rem;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start;line-height:1.45;
}
.tier li::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--amber-500);margin-top:7px;
}

/* ---- Comparison table (scrolls horizontally on narrow screens) ---- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem;}
.compare-table th,.compare-table td{
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
}
.compare-table thead th{
  background:var(--navy-800);color:var(--white);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;
}
.compare-table tbody tr:nth-child(even){background:var(--steel-050);}
.compare-table tbody tr:last-child td{border-bottom:0;}
.compare-table tbody th{
  font-family:var(--f-body);font-weight:600;color:var(--navy-800);white-space:nowrap;
}
.compare-table tbody th a{color:var(--navy-800);text-decoration:underline;text-underline-offset:3px;}
.compare-table tbody th a:hover{color:var(--amber-600);}
.compare-table .yes,.compare-table .no{
  font-family:var(--f-mono);font-weight:600;text-align:center;font-size:1rem;
}
.compare-table .yes{color:var(--success);}
.compare-table .no{color:var(--steel-300);}
.compare-table .col-mid{text-align:center;}
.table-note{font-size:.82rem;color:var(--steel-500);margin-top:14px;font-style:italic;}