/* Trafco Hire Centre — shared styles (fonts, base, pricing). Used by index.html and pricing.html. */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-condensed-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-condensed-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-condensed-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  *{ box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Barlow', system-ui, sans-serif; color: #16202b; background: #eef2f5; -webkit-font-smoothing: antialiased; }
  ::selection { background: #1773bd; color: #fff; }
  a { text-decoration: none; color: inherit; }
  image-slot { display: block; }
  /* The <x-import> that registers <image-slot> also renders one blank default
     slot inline (the "Drop an image" box above the nav). Hide that artifact;
     the real slots below all carry an id. */
  .sc-host-x > image-slot:not([id]) { display: none; }

  /* ---- Pricing section ---- */
  #pricing, #pricing [id] { scroll-margin-top: 84px; }
  #pricing nav { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 4px; }
  #pricing nav a { font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#1773bd; background:#fff; border:1px solid #d4dde5; padding:7px 13px; transition:background .15s,color .15s,border-color .15s; }
  #pricing nav a:hover { background:#1773bd; color:#fff; border-color:#1773bd; }
  #pricing h3 { font-family:'Barlow Condensed'; font-weight:700; font-size:27px; line-height:1; text-transform:uppercase; color:#0d2230; margin:50px 0 14px; display:flex; align-items:center; gap:11px; }
  #pricing h3::before { content:""; display:inline-block; width:9px; height:9px; background:#1773bd; transform:rotate(45deg); flex:none; }
  #pricing table { width:100%; border-collapse:collapse; background:#fff; font-size:15px; box-shadow:0 2px 10px rgba(13,34,48,0.07); }
  #pricing thead th { background:#1773bd; color:#fff; text-align:left; font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; padding:11px 16px; white-space:nowrap; }
  #pricing tbody td { padding:10px 16px; border-bottom:1px solid #e7ecf1; color:#3a4651; vertical-align:top; }
  #pricing tbody tr:last-child td { border-bottom:none; }
  #pricing tbody tr:nth-child(even) td { background:#f5f8fa; }
  #pricing tbody tr:hover td { background:#eaf3fb; }
  #pricing th:first-child, #pricing td:first-child { width:36%; }
  #pricing td:first-child { font-weight:600; color:#16202b; }
  #pricing tbody td:empty::after { content:"\2013"; color:#c4d0da; }
  @media (max-width:640px){ #pricing h2 { font-size:32px !important; } #pricing table { font-size:14px; } }

/* Reviews marquee: continuous horizontal scroll, paused on hover. */
@keyframes rev-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#reviews .rev-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #reviews [style*='rev-scroll'] { animation: none !important; } }

/* ============================================================
   Mobile responsiveness
   Every rule below is gated behind a max-width query, so desktop
   (anything wider than the breakpoints) renders exactly as before.
   Layout on this site is inline `style=`, which always beats an
   external stylesheet on specificity — so these rules reach into
   it with !important plus id/attribute selectors, instead of
   editing the inline styles themselves. The one exception is the
   hamburger checkbox+label markup in the header, which doesn't
   exist yet and has to be added (hidden by inline style, so it's
   inert above the breakpoint too).
   ============================================================ */

/* ---- Header: collapse the nav into a hamburger dropdown ---- */
@media (max-width:900px){
  .nav-toggle-label{ display:flex !important; }
  header nav{
    display:none !important;
    position:absolute !important;
    top:100% !important; left:0 !important; right:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    background:#fff !important;
    padding:6px 28px 18px !important;
    border-bottom:1px solid #e0e6ec;
    box-shadow:0 16px 30px rgba(13,34,48,0.14);
  }
  header nav a{ padding:14px 0 !important; border-bottom:1px solid #eef2f5 !important; }
  #nav-toggle:checked ~ nav{ display:flex !important; }
  #nav-toggle:checked ~ .nav-toggle-label .icon-bars{ display:none !important; }
  #nav-toggle:checked ~ .nav-toggle-label .icon-close{ display:block !important; }
}

/* ---- Big two/three-column sections: collapse to one column ----
   Note: dc-runtime re-serializes inline styles through React (hex
   colors become rgb(), and spaces are normalized after colons/
   commas), so these attribute selectors match the *rendered* DOM
   style string, not the literal text in the HTML source. ---- */
@media (max-width:900px){
  #top div[style*="1.05fr 0.95fr"]{ grid-template-columns:1fr !important; min-height:auto !important; gap:32px !important; }
  /* Put the hero photo (2nd grid child) above the hero text on mobile. */
  #top div[style*="1.05fr 0.95fr"] > div:last-child{ order:-1 !important; padding:34px 0 4px !important; }
  #top div[style*="1.05fr 0.95fr"] > div:first-child{ padding:4px 0 8px !important; }
  #equipment div[style*="repeat(3, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  #services div[style*="repeat(3, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  #why div[style*="0.95fr 1.05fr"]{ grid-template-columns:1fr !important; }
  #contact div[style*="gap: 48px; align-items: stretch;"]{ grid-template-columns:1fr !important; }
  #latest div[style*="1fr 1fr; gap: 54px"]{ grid-template-columns:1fr !important; }
  #latest div[style*="1fr 1fr; gap: 54px"] > div{ min-width:0 !important; }
  #contact iframe{ min-height:320px !important; }
}
@media (max-width:560px){
  #equipment div[style*="repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
  #services div[style*="repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
}

/* ---- Typography, imagery and spacing tuned down for phones ---- */
@media (max-width:640px){
  #top h1{ font-size:44px !important; }
  #top div[style*="rgba(23, 115, 189, 0.18)"]{ font-size:11.5px !important; letter-spacing:0.06em !important; padding:6px 12px !important; }
  #equipment h2, #why h2, #contact h2, #latest h2, #reviews h2, #services h2{ font-size:34px !important; }
  section[style*="position: relative; overflow: hidden;"] h2{ font-size:30px !important; }
  #trafco-hero{ height:260px !important; }
  #trafco-about{ height:280px !important; }
  [style*="padding: 86px 28px"]{ padding:52px 20px !important; }
  #latest .fb-page{ min-height:420px !important; }
  [style*="background: rgb(12, 28, 41)"]{ font-size:10.5px !important; letter-spacing:0.02em !important; }
  /* Keep "Locally owned & operated, Darfield, Canterbury" on one line. */
  [style*="background: rgb(12, 28, 41)"] > div > span:first-child{ white-space:nowrap !important; }
}
@media (max-width:360px){
  #top div[style*="rgba(23, 115, 189, 0.18)"]{ font-size:10.5px !important; letter-spacing:0.03em !important; padding:5px 10px !important; }
  #top h1{ font-size:38px !important; }
  [style*="background: rgb(12, 28, 41)"]{ font-size:9.5px !important; }
}

/* ---- Smallest phones: tighten header, hero badges and the last grids ---- */
@media (max-width:480px){
  #why div[style*="1fr 1fr; gap: 20px 28px"]{ grid-template-columns:1fr !important; }
  #contact div[style*="1fr 1fr; gap: 16px;"]{ grid-template-columns:1fr !important; }
  header img[alt="Trafco Hire Centre"]{ height:40px !important; }
  header a[href="#contact"]{ padding:10px 16px !important; font-size:13px !important; gap:7px !important; letter-spacing:0.05em !important; box-shadow:0 4px 12px rgba(23,115,189,0.4) !important; }
  header a[href="#contact"] svg{ width:16px !important; height:16px !important; }
  #top div[style*="top: 48px; right: 16px; z-index: 3"]{ width:92px !important; height:92px !important; top:8px !important; right:4px !important; }
  #top div[style*="top: 48px; right: 16px; z-index: 3"] span{ font-size:12px !important; }
  #top div[style*="bottom: 14px; right: -16px; z-index: 2"]{ padding:8px 12px !important; right:0 !important; gap:8px !important; }
  #top div[style*="bottom: 14px; left: -16px; z-index: 2"]{ padding:8px 12px !important; left:0 !important; }
  #os-badge{ padding:4px 8px !important; bottom:14px !important; right:14px !important; }
  #os-badge img{ height:32px !important; }
}

/* ============================================================
   Draft-site password gate
   A soft, client-side login overlay used while the site is a
   draft/preview for the client. It blurs the page behind a
   centred sign-in card carrying both logos. NOTE: this is a
   visual gate to keep casual visitors out, not real security —
   the content still ships to the browser. For true protection
   the host must gate it server-side (e.g. HTTP basic auth).
   ============================================================ */
#draft-gate{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(10,23,34,0.55);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  animation:draft-fade .3s ease;
}
@keyframes draft-fade{ from{ opacity:0; } to{ opacity:1; } }
#draft-gate .dg-card{
  width:100%; max-width:410px;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
}
#draft-gate .dg-stripe{ height:6px; background:repeating-linear-gradient(45deg,#1773bd 0,#1773bd 14px,#0d2230 14px,#0d2230 28px); }
#draft-gate .dg-body{ padding:34px 32px 28px; text-align:center; }
#draft-gate .dg-badge{
  display:inline-block; background:rgba(23,115,189,0.12); color:#1773bd;
  font-weight:700; font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
#draft-gate .dg-logo{ height:56px; width:auto; display:block; margin:0 auto 18px; }
#draft-gate h2{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:31px; line-height:1; text-transform:uppercase; color:#0d2230; margin:0 0 10px; }
#draft-gate p.dg-intro{ font-size:14.5px; line-height:1.55; color:#5a6470; margin:0 0 22px; }
#draft-gate p.dg-intro strong{ color:#0d2230; }
#draft-gate .dg-field{ position:relative; margin-bottom:12px; }
#draft-gate input{
  width:100%; box-sizing:border-box; padding:14px 16px;
  font-family:inherit; font-size:15px; color:#0d2230;
  background:#f4f7fa; border:1.5px solid #dfe6ec; border-radius:11px; outline:none;
  transition:border-color .15s, background .15s;
}
#draft-gate .dg-field input{ padding-right:50px; }
#draft-gate input:focus{ border-color:#1773bd; background:#fff; }
#draft-gate input::placeholder{ color:#9aa8b4; }
/* Show/hide password eye — overrides the full-width blue button rule below. */
#draft-gate .dg-eye{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:34px; height:34px; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px;
  color:#8797a5; cursor:pointer;
  transition:color .15s, background .15s;
}
#draft-gate .dg-eye:hover{ color:#1773bd; background:#eef3f8; }
#draft-gate .dg-eye svg{ width:20px; height:20px; display:block; }
#draft-gate button{
  width:100%; padding:14px 16px;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:0.03em;
  color:#fff; background:#1773bd; border:none; border-radius:11px; cursor:pointer;
  transition:background .15s;
}
#draft-gate button:hover{ background:#1f86d4; }
#draft-gate .dg-error{ display:none; color:#d23b3b; font-size:13.5px; font-weight:600; margin:12px 0 0; }
#draft-gate.dg-shake .dg-card{ animation:dg-shake .4s; }
@keyframes dg-shake{ 0%,100%{ transform:translateX(0);} 20%,60%{ transform:translateX(-8px);} 40%,80%{ transform:translateX(8px);} }
#draft-gate .dg-foot{ margin-top:24px; padding-top:20px; border-top:1px solid #eef2f5; display:flex; flex-direction:column; align-items:center; gap:9px; }
#draft-gate .dg-foot span{ font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#9aa8b4; }
#draft-gate .dg-foot img{ height:48px; width:auto; display:block; }

/* ============================================================
   Print / "Download PDF" layout for the price list
   The Download-PDF button in pricing.html calls window.print();
   these rules reflow the on-screen page into a clean, branded,
   paginated price sheet. Screen-only chrome carries .no-print;
   the print masthead and running footer carry .print-only.
   ============================================================ */
.print-only{ display:none; }

@media print{
  /* Keep brand colours (blue table headers, zebra rows) in the PDF. */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  @page{ size:A4; margin:14mm 13mm; }

  html, body{ background:#fff !important; }
  .page-wrap{ background:#fff !important; }
  .no-print{ display:none !important; }

  /* Strip the screen frame off the pricing section: full width, no shadow. */
  #pricing{ background:#fff !important; border-top:none !important; }
  #pricing > div{ max-width:none !important; margin:0 !important; padding:0 !important; }
  #pricing div[style*="overflow"]{ overflow:visible !important; }

  /* ---- Print masthead: logo + title + contact ---- */
  .print-header{
    display:flex !important; align-items:center; gap:18px;
    padding-bottom:13px; margin-bottom:6px;
    border-bottom:3px solid #1773bd;
  }
  .print-header img{ height:54px; width:auto; display:block; }
  .print-header .ph-title{
    font-family:'Barlow Condensed', sans-serif; font-weight:700;
    font-size:30px; line-height:1; text-transform:uppercase; color:#0d2230;
  }
  .print-header .ph-contact{ font-size:11px; color:#46505b; margin-top:5px; }

  /* ---- Categories & tables ---- */
  #pricing h3{
    font-size:19px; margin:16px 0 7px; color:#0d2230;
    break-after:avoid; page-break-after:avoid;
  }
  #pricing table{
    font-size:11px; box-shadow:none !important;
    border:1px solid #cdd8e1; break-inside:auto;
  }
  #pricing thead{ display:table-header-group; }   /* repeat header on each page */
  #pricing thead th{ padding:6px 10px; }
  #pricing tbody td{ padding:5px 10px; border-bottom:1px solid #e0e7ed; }
  #pricing tbody tr{ break-inside:avoid; page-break-inside:avoid; }

  /* ---- Closing footer note (renders once, after the last table) ----
     In-flow rather than a fixed running footer: Chrome positions fixed
     print elements against the content-area edge and tiles them oddly
     across page breaks, which caused overlap. An in-flow block is
     overlap-proof in every browser. ---- */
  .print-footer{
    display:flex !important; justify-content:space-between; gap:16px; align-items:baseline;
    margin-top:22px; padding-top:8px; border-top:1px solid #d4dde5;
    font-size:10px; color:#6a7681;
    break-inside:avoid; page-break-inside:avoid;
  }
  .print-footer .pf-url{ font-weight:700; color:#1773bd; white-space:nowrap; }
}