/*
Theme Name: The Logistics Files
Theme URI: https://olusholaawode.com
Author: Olushola Awode
Author URI: https://olusholaawode.com
Description: Case-file themed personal site and resource library for olusholaawode.com, plain-English essays, toolkits and calculators on logistics and global trade.
Version: 9.2.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: logistics-files
*/

:root{
  --paper:#f5edda; --card:#fdf8ec; --ink:#26303b; --ink-soft:#5a6472;
  --line:#d9c9a0; --stamp:#b3402e; --agency:#1e6b4f; --tab:#e8dcc0; --code-bg:#efe5cd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Sans 3",system-ui,sans-serif;font-size:19px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--agency)}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:"Zilla Slab",Georgia,serif;line-height:1.15;color:var(--ink);text-wrap:balance}
h1{font-size:2.8rem;margin:.2em 0 .3em}
h2{font-size:1.8rem;margin:1.6em 0 .4em}
h3{font-size:1.3rem;margin:1.3em 0 .35em}
p{margin:.65em 0}
code,pre{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--code-bg);border-radius:4px}
code{padding:.08em .35em}
pre{padding:12px 14px;overflow-x:auto}
blockquote{border-left:4px solid var(--stamp);margin:1em 0;padding:.4em 1em;background:var(--code-bg);border-radius:0 8px 8px 0}
hr{border:0;border-top:1px dashed var(--line);margin:2em 0}
table{border-collapse:collapse;width:100%;font-size:1rem;background:var(--card)}
th{background:var(--tab);font-family:"Zilla Slab",Georgia,serif;text-align:left}
th,td{border:1px solid var(--line);padding:7px 10px;vertical-align:top}
.tablewrap,.wp-block-table{overflow-x:auto}

/* Layout */
.site-wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.content-narrow{max-width:860px;margin:0 auto}

/* Header */
.site-header{border-bottom:2px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.site-header .site-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;padding-bottom:0}
.site-brand{text-decoration:none;color:var(--ink)}
.site-brand .name{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1.25rem;display:block}
.site-brand .creds{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--agency);letter-spacing:.06em}
.site-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.site-nav li{margin:0;padding:0;list-style:none}
.site-nav a{font-family:"Zilla Slab",Georgia,serif;font-weight:600;font-size:1rem;text-decoration:none;color:var(--ink);background:var(--tab);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:7px 13px;position:relative;top:2px}
.site-nav a:hover,.site-nav .current-menu-item>a,.site-nav .current_page_item>a,.site-nav a.active{background:var(--card)}

/* Hero */
.hero{padding:60px 0 44px}
.hero .kicker{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);font-weight:700;margin:0 0 .4em}
.hero h1{font-size:3.4rem;margin:0 0 .3em;max-width:26ch}
.hero .lede{font-size:1.25rem;color:var(--ink-soft);max-width:72ch}

/* Folder cards */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin:30px 0}
.folder{position:relative;background:var(--card);border:1px solid var(--line);border-radius:0 10px 10px 10px;padding:18px 20px;margin-top:16px;display:flex;flex-direction:column}
.folder::before{content:attr(data-tab);position:absolute;top:-25px;left:-1px;background:var(--tab);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:3px 13px;font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase}
.folder h3{margin:.1em 0 .3em}
.folder p{color:var(--ink-soft);font-size:1.02rem;flex:1}
.folder .go{font-family:"Zilla Slab",Georgia,serif;font-weight:700;text-decoration:none}

/* Buttons & stamp */
.btn{display:inline-block;background:var(--agency);color:#fdf8ec;font-family:"Zilla Slab",Georgia,serif;font-weight:700;text-decoration:none;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-size:1rem}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.stamp{display:inline-block;border:2.5px solid var(--stamp);color:var(--stamp);font-family:"Zilla Slab",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;padding:3px 12px;border-radius:6px;transform:rotate(-2deg)}

/* Post lists */
.post-list article{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:18px 0}
.post-list h2{margin:.1em 0 .2em;font-size:1.5rem}
.post-list h2 a{text-decoration:none;color:var(--ink)}
.post-meta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-soft)}
.post-list .excerpt{color:var(--ink-soft)}

/* Single */
.single-head{padding:40px 0 8px}
.single-head .post-meta{margin-top:.5em}
.entry-content{font-size:1.15rem}
.entry-content>*{max-width:76ch}
.entry-content>.folder-grid,.entry-content>.capture{max-width:none}
.entry-content h2{border-bottom:2px solid var(--line);padding-bottom:.2em}
.byline-card{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:2.2em 0}
.byline-card .who{font-size:.92rem;color:var(--ink-soft)}
.byline-card .who b{color:var(--ink)}

/* Email capture */
.capture{background:var(--card);border:1px dashed var(--stamp);border-radius:10px;padding:20px 22px;margin:2em 0}
.capture h3{margin:.1em 0 .3em}
.capture p{color:var(--ink-soft);font-size:.95rem;margin:.2em 0 .8em}
.capture form{display:flex;flex-wrap:wrap;gap:10px}
.capture input[type=email]{flex:1;min-width:220px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink)}

/* Calculator */
.calc{background:var(--card);border:1px solid var(--line);border-radius:0 10px 10px 10px;padding:22px;margin:20px 0}
.calc .row{display:grid;grid-template-columns:1fr 200px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.calc .row label{font-weight:600}
.calc .row .hint{display:block;font-weight:400;font-size:.82rem;color:var(--ink-soft)}
.calc input[type=number],.calc select{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
.calc .out .row{border-bottom:1px dashed var(--line)}
.calc .out .val{font-family:"IBM Plex Mono",monospace;text-align:right;font-size:.98rem}
.calc .total .val,.calc .total label{font-weight:700;color:var(--stamp);font-size:1.15rem}
.calc .expl{font-size:.85rem;color:var(--ink-soft)}
.disclaimer{font-size:.82rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:10px;margin-top:14px}

/* Footer */
.site-footer{border-top:2px solid var(--line);margin-top:64px;padding:38px 0 34px;color:var(--ink-soft);font-size:.95rem;background:var(--card)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.foot-brand .foot-mark{margin-bottom:10px}
.foot-brand p{margin:.5em 0;max-width:38ch}
.foot-name{font-family:"Zilla Slab",Georgia,serif;font-size:1.05rem;color:var(--ink);line-height:1.4}
.foot-social{font-weight:600}
.site-footer h4{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);margin:0 0 .9em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .6em}
.site-footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{color:var(--agency);border-bottom-color:var(--agency)}
.foot-note{margin-top:32px;padding:16px 20px;border:1px dashed var(--line);border-radius:8px;background:var(--paper)}
.foot-note p{margin:0;font-size:.9rem;line-height:1.6;max-width:none}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.04em}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

@media(max-width:640px){
  .hero h1{font-size:2rem}
  .site-header .site-wrap{flex-direction:column;align-items:flex-start}
  .calc .row{grid-template-columns:1fr}
}

/* Plain Words Glossary tooltips */
.cf-term{border-bottom:2px dotted var(--agency);cursor:help}
.cf-tip{
  position:fixed;z-index:120;max-width:min(340px,calc(100vw - 24px));
  background:var(--ink);color:var(--card);
  font-family:"Source Sans 3",system-ui,sans-serif;font-size:.95rem;line-height:1.5;font-weight:400;font-style:normal;
  padding:12px 15px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  text-transform:none;letter-spacing:normal;white-space:normal;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .14s;pointer-events:none;
}
.cf-tip.on{opacity:1;visibility:visible}
.cf-tip::after{content:"";position:absolute;left:var(--tip-arrow,50%);border:8px solid transparent;transform:translateX(-50%)}
.cf-tip.above::after{top:100%;border-top-color:var(--ink)}
.cf-tip.below::after{bottom:100%;border-bottom-color:var(--ink)}
@media (prefers-reduced-motion: reduce){.cf-tip{transition:none}}
@media (max-width:600px){
  /* On a phone, dock the meaning to the bottom of the screen so it can never be cut off. */
  .cf-tip{left:12px!important;right:12px!important;top:auto!important;bottom:14px!important;max-width:none;width:auto;font-size:1rem;padding:14px 16px}
  .cf-tip::after{display:none}
  .cf-tip .cf-tip-word{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--line);margin-bottom:5px}
  .cf-tip .cf-tip-close{position:absolute;top:8px;right:10px;color:var(--line);font-size:1.2rem;line-height:1;pointer-events:auto}
}
@media (min-width:601px){.cf-tip .cf-tip-word,.cf-tip .cf-tip-close{display:none}}

/* Subscribe pop-up */
.cf-popup{position:fixed;inset:0;background:rgba(38,48,59,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.cf-popup[hidden]{display:none}
.cf-popup-card{position:relative;background:var(--card);border:1px dashed var(--stamp);border-radius:12px;max-width:440px;width:100%;padding:26px 26px 22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cf-popup-card h3{margin:.1em 0 .3em}
.cf-popup-card p{color:var(--ink-soft);font-size:.95rem;margin:.2em 0 .9em}
.cf-popup-card form{display:flex;flex-wrap:wrap;gap:10px}
.cf-popup-card input[type=email]{flex:1;min-width:180px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink)}
.cf-popup-x{position:absolute;top:8px;right:12px;background:none;border:none;font-size:1.6rem;color:var(--ink-soft);cursor:pointer;line-height:1}
/* Cookie notice */
.cf-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:99;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px;justify-content:space-between;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:.9rem}
.cf-cookie[hidden]{display:none}
@media(min-width:700px){.cf-cookie{max-width:560px;left:auto}}

/* Brand mark */
.site-brand{display:flex;align-items:center;gap:11px}
.site-brand .mark{display:flex;align-items:center}
.site-brand .brand-text{display:flex;flex-direction:column}
.cf-icon{margin-bottom:6px}

/* Signature brand */
.site-brand .signature{font-family:"Great Vibes",cursive;font-size:3rem;-webkit-text-stroke:.7px var(--ink);letter-spacing:.01em;line-height:1;display:block;color:var(--ink)}
.sig-rule{display:block;height:3px;width:120px;border-radius:2px;margin:4px 0 3px;background:linear-gradient(90deg,var(--agency) 62%,var(--stamp) 62%)}
.brand-photo img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:2.5px solid var(--agency);display:block}
/* Modes strip */
.modes{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:16px 4px;margin:6px 0 26px}
.mode{display:flex;align-items:center;gap:9px}
.mode span{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mode .cf-icon{margin-bottom:0}
@media(max-width:760px){.modes{justify-content:flex-start}}


/* About page photo */
.about-photo{float:right;width:260px;max-width:40%;border-radius:8px;border:1px solid var(--line);box-shadow:3px 4px 0 var(--tab);margin:0 0 22px 32px;transform:rotate(1.5deg)}
@media(max-width:640px){.about-photo{float:none;display:block;width:200px;max-width:70%;margin:0 0 18px;transform:none}}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:52px;align-items:start;margin-top:10px}
.main-col{min-width:0}
.main-col>.post-list{margin-top:0}
.main-col .hero{padding-top:44px}
.main-col .modes{margin:8px 0 10px;justify-content:flex-start;gap:14px 30px}
.main-col .folder-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px;padding-top:44px}
body.sidebar-left .layout{grid-template-columns:360px minmax(0,1fr)}
body.sidebar-left .sidebar{order:-1}
.widget{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;box-shadow:2px 3px 0 var(--tab)}
.widget-title{font-family:"Zilla Slab",Georgia,serif;font-size:1.15rem;margin:0 0 .6em;padding-bottom:.35em;border-bottom:1px solid var(--line)}
.widget p{margin:.4em 0;font-size:1rem;color:var(--ink-soft)}
.widget ul{margin:0;padding:0;list-style:none}
.widget li{margin:0 0 .55em}
.widget a{color:var(--ink);text-decoration:none;font-weight:600}
.widget a:hover{color:var(--agency)}
.side-list .side-date{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em}
.side-tools li{display:flex;align-items:center;gap:10px}
.side-tools svg{flex:none;color:var(--agency)}
.widget-about{padding-top:22px}
.widget-about .side-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;margin:6px 0 14px;border:1px solid var(--line);transform:rotate(-1.2deg)}
.widget-about .widget-title{border:none;font-size:1.4rem;margin:.4em 0 .2em;padding:0}
.widget-capture{padding:0;border:none;box-shadow:none;background:none}
.widget-capture .capture{margin:0}
.single .entry-content>*{max-width:none}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{position:static}body.sidebar-left .sidebar{order:0}}

/* Clean white background option */
body.bg-white{--paper:#ffffff;--card:#fbf9f4;--tab:#f0ebdf;--line:#e3dbc8;--code-bg:#f4efe3}

/* HS code / product finder */
.hs-finder{margin-bottom:22px}
.hs-search{position:relative}
.hs-search input{width:100%;box-sizing:border-box;font-size:1.15rem;padding:14px 16px;border:2px solid var(--agency);border-radius:6px;background:var(--paper);color:var(--ink);font-family:inherit}
.hs-count{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-soft);margin-top:6px;letter-spacing:.04em}
.hs-results{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.hs-hit{display:grid;grid-template-columns:112px 1fr auto;gap:14px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:1rem;color:var(--ink)}
.hs-hit:hover,.hs-hit:focus{border-color:var(--agency);background:#fff;outline:none}
.hs-code{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--agency)}
.hs-rate{font-family:"IBM Plex Mono",monospace;font-size:.85rem;white-space:nowrap;color:var(--stamp);font-weight:600}
.hs-none{padding:12px 14px;background:var(--card);border:1px dashed var(--line);border-radius:6px;color:var(--ink-soft);font-size:.98rem}
.hs-picked{margin-top:12px;padding:14px 16px;background:var(--card);border-left:4px solid var(--agency);border-radius:0 6px 6px 0;font-size:1rem}
.hs-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hs-flag{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;border:1px solid var(--line);color:var(--ink-soft)}
.hs-flag.flag-p{background:var(--stamp);color:#fff;border-color:var(--stamp)}
.hs-flag.flag-s,.hs-flag.flag-n{background:var(--tab)}
@media(max-width:640px){.hs-hit{grid-template-columns:1fr;gap:4px}}

.hs-desc small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:2px}
.hs-picked-rate{margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--ink)}
.hs-count{min-height:1.1em}
.hs-results:empty{display:none}

/* Featured images */
.post-banner{margin:0 0 22px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:3px 4px 0 var(--tab)}
.post-banner img{display:block;width:100%;height:auto}
.post-banner figcaption{padding:8px 14px;font-size:.86rem;color:var(--ink-soft);border-top:1px solid var(--line)}
.post-banner.is-fallback{position:relative;background:var(--tab);padding:26px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.post-banner.is-fallback .fb-icons{display:flex;gap:16px;align-items:center;opacity:.5;color:var(--agency)}
.post-banner.is-fallback .fb-label{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.post-list article{display:grid;grid-template-columns:1fr;gap:0}
.post-list article.has-thumb{grid-template-columns:240px 1fr;gap:22px;align-items:start}
.post-list .thumb{display:block;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.post-list .thumb img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
@media(max-width:560px){.post-list article.has-thumb{grid-template-columns:1fr}}

/* Documents and agencies panel */
.doc-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:8px}
.doc-group h4,.agency h4{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);margin:0 0 .8em;padding-bottom:.5em;border-bottom:1px solid var(--line)}
.doc-group ul,.agency ul{list-style:none;margin:0;padding:0}
.doc-group li,.agency li{margin:0 0 .85em;padding-left:22px;position:relative;font-size:.98rem}
.doc-group li::before,.agency li::before{content:"";position:absolute;left:0;top:.35em;width:11px;height:11px;border:2px solid var(--agency);border-radius:2px}
.doc-group li b,.agency li b{display:block;color:var(--ink)}
.doc-group li b .when,.agency li b .when{margin-left:6px}
.doc-group li span:not(.when),.agency li span:not(.when){display:block;color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.doc-picked{font-family:"IBM Plex Mono",monospace;font-size:.86rem;background:var(--paper);border-left:4px solid var(--agency);padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:12px}
.doc-ban{background:var(--stamp);color:#fff;padding:14px 16px;border-radius:6px;margin-bottom:14px;font-size:1rem;line-height:1.55}
.doc-ban .stamp{border-color:#fff;color:#fff;margin-right:8px}
.agency-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:12px 0 20px}
.agency{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.agency>p{margin:.2em 0 .9em;color:var(--ink-soft);font-size:.95rem}
.agency-note{font-size:.9rem!important;border-top:1px dashed var(--line);padding-top:.7em;margin-bottom:0!important;color:var(--ink)!important}

/* Clearance flow */
.flow-section{margin-top:44px}
.flow-map{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:22px 0 6px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:8px}
.map-step{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.03em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:5px 12px}
.map-step b{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--agency);color:#fff;font-size:.66rem}
.map-arrow{color:var(--stamp);font-weight:700}
.flow{list-style:none;margin:22px 0 0;padding:0;position:relative;max-width:860px}
.flow::before{content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 7px,transparent 7px 14px)}
.flow-step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:2px 3px 0 var(--tab);margin-bottom:18px}
.flow-num{width:38px;height:38px;position:relative;z-index:1;box-shadow:0 0 0 5px var(--paper);border-radius:50%;background:var(--agency);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1.15rem}
.flow-head{display:flex;align-items:center;gap:10px;margin-bottom:.3em}
.flow-head svg{flex:none;color:var(--agency)}
.flow-body h3{margin:0;font-size:1.18rem}
.flow-who{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.06em;color:var(--agency);margin:.1em 0 .7em}
.flow-body p{margin:.4em 0;font-size:.98rem;color:var(--ink-soft)}
.flow-risk{border-top:1px dashed var(--line);padding-top:.7em;margin-top:.8em!important;color:var(--ink)!important;font-size:.92rem!important}
.flow-risk .stamp{margin-right:6px}

/* What each charge funds */
.purpose-list{margin:20px 0}
.purpose-list dt{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:1.1em}
.purpose-list dt span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin-top:.25em}
.purpose-list dd{margin:.5em 0 0;padding-left:16px;border-left:2px solid var(--line);color:var(--ink-soft)}
@media(max-width:600px){
  .flow-step{grid-template-columns:34px 1fr;gap:12px;padding:14px 16px}.flow-num{width:32px;height:32px;font-size:1rem}.flow::before{display:none}
  .flow-map{flex-direction:column;align-items:stretch;gap:0;padding:14px}
  .map-step{width:100%;box-sizing:border-box;font-size:.76rem;justify-content:flex-start}
  .map-arrow{transform:rotate(90deg);align-self:center;margin:3px 0;line-height:1}
}

/* Duty calculator: full-width intro and the flow beside the charges panel */
.lede-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 46px;margin-top:.4em}
.lede-cols>p{max-width:none;margin:0}
.flow-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,430px);gap:38px;align-items:start;margin-top:20px}
.flow-layout .flow{max-width:none;margin-top:0}
.money-panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px 24px;box-shadow:2px 3px 0 var(--tab);position:sticky;top:110px}
.money-panel h3{margin:0 0 .5em;font-size:1.35rem}
.money-panel>p{color:var(--ink-soft);font-size:.98rem;margin:.4em 0}
.money-panel .purpose-list{margin:16px 0 0}
.money-panel .purpose-list dt{font-size:1rem;margin-top:1em}
.money-panel .purpose-list dd{font-size:.93rem;margin-top:.35em;padding-left:13px}
.money-close{border-top:1px dashed var(--line);padding-top:.9em;margin-top:1.2em!important;font-size:.93rem!important}
@media(max-width:1100px){.flow-layout{grid-template-columns:1fr}.money-panel{position:static}}
@media(max-width:820px){.lede-cols{grid-template-columns:1fr;gap:14px}}

/* Duty calculator: the long explainers as two full-width columns */
.explain-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 0;margin-top:34px;align-items:start}
.explain-cols>.explain-col:first-child{padding-right:44px}
.explain-cols>.explain-col:last-child{padding-left:44px;border-left:1px solid var(--line)}
.explain-cols>.explain-col{min-width:0}
.explain-cols .explain-col>*{max-width:none}
.explain-cols .explain-col>h2:first-child{margin-top:0}
@media(max-width:900px){.explain-cols{grid-template-columns:1fr;gap:0}.explain-cols>.explain-col{padding:0!important;border:none!important}}

/* Timing badges and the pre-shipment warning */
.when{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:3px;vertical-align:2px;font-weight:600;white-space:nowrap}
.when-pre{background:var(--stamp);color:#fff}
.when-origin{background:var(--tab);color:var(--ink);border:1px solid var(--line)}
.when-port{background:var(--agency);color:#fff}
.timing-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pre-warning{border:2px solid var(--stamp);border-radius:8px;padding:18px 20px;margin:0 0 18px;background:var(--paper)}
.pre-warning .stamp{margin-bottom:10px;display:inline-block}
.pre-warning p{margin:.55em 0;font-size:1rem;line-height:1.6}
.pre-warning-rule{border-top:1px dashed var(--line);padding-top:.8em;margin-top:.9em!important;color:var(--stamp)}

/* Step 5: duty relief routes */
.relief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.relief{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.relief h4{font-family:"Zilla Slab",Georgia,serif;font-size:1.12rem;color:var(--ink);margin:0 0 .25em;text-transform:none;letter-spacing:0;border:none;padding:0}
.relief p{margin:.45em 0;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.relief-who{font-family:"IBM Plex Mono",monospace;font-size:.72rem!important;letter-spacing:.04em;color:var(--agency)!important;margin-bottom:.7em!important}
.relief-need{color:var(--ink)!important}
.relief-risk{border-top:1px dashed var(--line);padding-top:.7em;margin-top:.8em!important;color:var(--ink)!important;font-size:.92rem!important}
.relief-risk .stamp{margin-right:6px}

/* Comfortable tap targets on touch screens */
.go{display:inline-block;padding:8px 0;min-height:24px}
.side-list a,.site-footer a{display:inline-block;padding:3px 0}
@media(max-width:600px){
  .site-nav a{padding:10px 15px}
  .hs-hit{padding:14px}
  .cf-term{padding:2px 0}
}

/* Phones: fold the long explanations away, keep everything on bigger screens */
.hint-btn{display:none}
@media(max-width:700px){
  .hint-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:8px;
    border:1.5px solid var(--agency);background:var(--paper);color:var(--agency);border-radius:50%;
    font-family:"IBM Plex Mono",monospace;font-size:.82rem;font-weight:700;cursor:pointer;vertical-align:middle;flex:none}
  .calc .row > label > .hint{display:none}
  .calc .row.open > label > .hint{display:block;margin-top:8px}
  .calc .row.open .hint-btn{background:var(--agency);color:#fff}

  .collapsible > .collapse-body{display:none}
  .collapsible.open > .collapse-body{display:block}
  .collapse-toggle{cursor:pointer;position:relative;padding-right:30px!important}
  .collapse-toggle::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--agency);border-bottom:2px solid var(--agency);
    transform:translateY(-70%) rotate(45deg);transition:transform .15s}
  .collapsible.open > .collapse-toggle::after{transform:translateY(-30%) rotate(225deg)}
  .flow-step .flow-head{margin-bottom:0}
  .flow-step.collapsible .collapse-body{padding-top:10px}
  .relief h4.collapse-toggle{margin-bottom:0}
  .relief.collapsible.open h4{margin-bottom:.4em}
  .explain-col > h2.collapse-toggle{margin-bottom:0}
  .tap-hint{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
}
@media(min-width:701px){.tap-hint{display:none}}
@media(max-width:700px){
  .doc-group h4.collapse-toggle,.money-panel h3.collapse-toggle{margin-bottom:0;padding-bottom:.5em}
  .doc-group.collapsible.open h4{margin-bottom:.8em}
  .money-panel.collapsible.open h3{margin-bottom:.5em}
}

/* ============================================================
   Demurrage and Storage Clock
   ============================================================ */

/* The three clocks explainer */
.clock-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 18px}
.clock-card{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:8px;padding:14px 16px}
.clock-card.c-dem{border-left-color:var(--stamp)}
.clock-card.c-sto{border-left-color:var(--agency)}
.clock-card.c-det{border-left-color:#8a6d2f}
.clock-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.clock-head h4{margin:0;font-size:1.06rem}
.clock-card p{margin:.45em 0;font-size:.94rem}
.clock-who{color:var(--ink-soft);font-size:.86rem!important}
.clock-when{border-top:1px dashed var(--line);padding-top:8px;font-size:.86rem!important;color:var(--ink-soft)}
.clock-warn{background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:12px 14px;margin:0;font-size:.94rem}
.clock-warn .stamp{margin-right:8px}

/* Rate blocks and band editor */
.rate-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.rate-block{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.rate-block h4{margin:0 0 8px;font-size:1.02rem}
.rate-block h4 span{display:block;font-family:"Source Sans 3",system-ui,sans-serif;font-weight:400;font-size:.8rem;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.rate-block .row{grid-template-columns:1fr 84px;padding:4px 0}
.rate-block .row label{font-size:.94rem}
.band-head,.band{display:grid;grid-template-columns:60px auto 60px minmax(0,1fr) 26px;gap:6px;align-items:center}
.band-head{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:8px 0 4px;border-bottom:1px solid var(--line)}
.bh-days{grid-column:1/4}
.bh-rate{grid-column:4/5;text-align:right}
.band{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .band input[type=number]{width:100%;min-width:0;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;color:var(--ink);font-size:.9rem;font-variant-numeric:tabular-nums;text-align:right}
.calc .band input.b-from[type=number],.calc .band input.b-to[type=number]{text-align:center}
.calc .band input.b-rate[type=number]{font-weight:600}
.band-lab{font-size:.8rem;color:var(--ink-soft)}
.band-del{background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:6px;width:26px;height:26px;line-height:1;cursor:pointer;font-size:1rem;padding:0}
.band-del:hover{border-color:var(--stamp);color:var(--stamp)}
.band-add{margin-top:10px;background:var(--agency);color:#fff;border:0;border-radius:8px;padding:8px 14px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.band-add.ghost{background:none;color:var(--ink-soft);border:1px solid var(--line)}
.band-add:hover{filter:brightness(1.08)}

/* The result */
.clock-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-bottom:16px}
.ch-main{background:var(--stamp);color:#fff;border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.ch-lab{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:700}
.ch-val{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:2.5rem;line-height:1.05;margin:.12em 0;font-variant-numeric:tabular-nums}
.ch-val.small{font-size:1.35rem;color:var(--ink)}
.ch-sub{display:block;font-size:.84rem;opacity:.9}
.ch-side{display:grid;gap:10px;align-content:stretch}
.ch-cell{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.ch-cell .ch-lab{color:var(--ink-soft)}
.ch-cell.ok{border-color:var(--agency)}
.ch-cell.ok .ch-val{color:var(--agency)}
.clock-empty{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--ink-soft)}

/* Timeline bars */
.clock-bars{margin:0 0 16px}
.cbar{margin:0 0 12px}
.cbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.88rem;margin-bottom:4px}
.cbar-head span{color:var(--ink-soft);font-size:.82rem}
.cbar-track{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.cbar-fill{display:flex;height:100%;min-width:2px}
.cbar-track .seg{display:block;height:100%}
.cbar-key{font-size:.78rem;color:var(--ink-soft);margin:2px 0 0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cbar-key .k{display:inline-block;width:14px;height:10px;border-radius:3px}
.cbar-key .k-free{background:var(--agency);opacity:.55}
.cbar-key .k-paid{background:var(--stamp)}
.seg-free{background:var(--agency);opacity:.55}
.seg-left{background:var(--agency);opacity:.18}
.seg-paid{background:var(--stamp)}

/* What-if table */
.whatif{margin-top:18px}
.whatif h4{margin:20px 0 6px;font-size:1.05rem}
.whatif h4:first-child{margin-top:0}
.whatif table{font-size:.92rem}
.whatif tr.now td{background:var(--tab);font-weight:600}

.clock-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.clock-saved{font-size:.84rem;color:var(--agency)}

@media(max-width:1100px){
  .clock-cards,.rate-blocks{grid-template-columns:1fr}
  .clock-hero{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ch-val{font-size:2rem}
  .rate-block .row{grid-template-columns:1fr 80px}

  .clock-card.collapsible .collapse-body{padding-top:8px}
  .band-head,.band{grid-template-columns:52px auto 52px minmax(0,1fr) 24px;gap:5px}
}

/* Rate library picker (Step 1) */
.pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pick label{display:block;font-weight:600;font-size:.92rem;margin-bottom:5px}
.pick select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink)}
.prov{margin-top:16px;display:grid;gap:10px}
.prov-card{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--agency);border-radius:8px;padding:10px 13px;font-size:.9rem}
.prov-card b{color:var(--ink)}
.prov-note,.prov-warn{display:block;margin-top:5px;font-size:.85rem;color:var(--ink-soft)}
.prov-warn{color:var(--stamp)}
.prov-none{background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:10px 13px;font-size:.9rem;color:var(--ink-soft);margin:0}
@media(max-width:700px){.pick-grid{grid-template-columns:1fr;gap:12px}}

/* Landed cost: the where-the-money-goes split */
.lc-split{margin-top:20px}
.lc-split h4{margin:0 0 8px;font-size:1.05rem}
.lc-bar{display:flex;height:22px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.lc-bar span{display:block;height:100%}
.p-goods{background:#4a6fa5}
.p-frt{background:#6c9bc4}
.p-tax{background:var(--stamp)}
.p-loc{background:#8a6d2f}
.p-dly{background:#c9772f}
.p-fin{background:#6b5b8a}
.lc-key{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem}
.lc-key li{display:flex;align-items:center;gap:6px;margin:0}
.lc-key .k{display:inline-block;width:13px;height:13px;border-radius:3px;flex:none}
.ch-cell.bad{border-color:var(--stamp)}
.ch-cell.bad .ch-val{color:var(--stamp)}

/* Quotation Builder */
.calc .row input[type=text]{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink);width:100%}
.cw-panel{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--agency);border-radius:8px;padding:14px 16px}
.cw-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cw-lab{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.cw-val{font-family:"Zilla Slab",Georgia,serif;font-size:1.6rem;color:var(--agency)}
.cw-how{margin:.5em 0 0;font-size:.9rem;color:var(--ink-soft)}
.cw-flag{margin:.6em 0 0;font-size:.9rem}
.cw-flag .stamp{margin-right:8px}

/* Three rows per charge: the money, then what kind of charge it is, then
   the optional note. The money row is the one people work in, so it gets the
   width and the description box gives some of its own back. */
/* The money columns are fractions, not fixed pixels, so a six figure profit
   never sits cramped beside a description box that took all the width. The
   description keeps a floor and a ceiling: it stops shrinking at 140px and
   stops growing once the numbers have what they need. */
.qline-head,.qline{display:grid;grid-template-columns:minmax(140px,1.7fr) 74px minmax(94px,.62fr) 64px minmax(94px,.62fr) minmax(104px,.7fr) 58px 24px;gap:6px;align-items:center}
.qline .l-meta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding-top:2px}
.qline .l-meta .l-grp{flex:0 1 190px}
.qline .l-meta .l-kind{flex:0 1 215px}
.calc .qline .l-meta select{padding:6px 9px;font-size:.86rem}
.l-prof{text-align:right;font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:600;color:var(--agency);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-prof.bad{color:var(--stamp)}
.calc .qline input.l-mk{text-align:right;font-variant-numeric:tabular-nums;background:var(--tab)}
.calc .qline input.l-mk:disabled{background:transparent;border-color:transparent;cursor:default}
.qline .l-meta .l-unit{flex:0 1 200px}
/* What a closed line says instead of showing its rate boxes. */
.l-qtag{font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.l-qtag:empty{display:none}
/* A worked-out amount you can click to reach the rate behind it. */
.qline input.computed{cursor:pointer}
/* The client-facing note and the private rate source, side by side and
   visibly different, because confusing the two puts your supplier's name on
   your client's quotation. */
.qline .l-two{grid-column:1 / -1;display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.qline .l-note{font-size:.86rem!important;opacity:.9}
.qline .l-src{font-size:.82rem!important;background:#f2f0e9;border-style:dashed;color:#5a6472}
@media(max-width:760px){.qline .l-two{grid-template-columns:1fr}}

/* The rate row. Hidden on a lump sum, which is most lines, so a quotation of
   flat amounts looks exactly as it did before rates existed. It only appears
   for the lines that are actually priced per kilo, per ton or per container. */
.qline .l-rate{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;
  padding:8px 10px;margin:4px 0 2px;background:rgba(30,107,79,.055);
  border-left:3px solid var(--accent,#1e6b4f);border-radius:0 6px 6px 0}
.qline .l-rate[hidden]{display:none}
.l-rf{display:flex;flex-direction:column;gap:2px;flex:0 1 118px;min-width:0}
.l-rf > span{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.l-rf input{width:100%;min-width:0}
.l-qtywrap{flex:0 1 152px;position:relative}
.l-qtywrap input{padding-right:44px}
/* "auto" means this quantity is following the shipment. It is a button, not a
   label, because the user must be able to take it back. */
.l-auto{position:absolute;right:4px;bottom:5px;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);font-size:.62rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:4px;
  padding:3px 6px;cursor:pointer;line-height:1}
.l-auto.on{background:#1e6b4f;border-color:#1e6b4f;color:#fff}
.l-auto[hidden]{display:none}
.qline .l-qty.from-auto{background:rgba(30,107,79,.09);font-weight:600}
.l-basis{flex:1 1 100%;font-size:.76rem;color:var(--ink-soft);line-height:1.45}
/* A worked-out amount is shown, not typed, and has to look it. */
.qline input.computed{background:#f2f0e9;color:var(--ink);font-weight:600;
  border-style:dashed;cursor:default}
.qline-head{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:8px 0 4px;border-bottom:1px solid var(--line)}
.qline{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .qline input,.calc .qline select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:.92rem;color:var(--ink);width:100%;min-width:0}
.calc .qline select.l-grp{font-size:.84rem}
.calc .qline input.l-cost,.calc .qline input.l-sell{text-align:right;font-variant-numeric:tabular-nums}
.l-mar{font-size:.86rem;text-align:right;color:var(--agency);font-weight:600;font-variant-numeric:tabular-nums}
.l-mar.warn{color:#8a6d2f}
.l-mar.bad{color:var(--stamp)}

.margin-panel{margin-top:16px}
.mp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mp-cell{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 14px}
.mp-cell.ok{border-left:4px solid var(--agency)}
.mp-cell.warn{border-left:4px solid #8a6d2f}
.mp-cell.bad{border-left:4px solid var(--stamp)}
.mp-lab{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.mp-val{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.05rem;margin-top:2px}
.mp-warn{margin:10px 0 0;font-size:.9rem;color:var(--stamp)}
.mp-note{margin:10px 0 0;font-size:.88rem;color:var(--ink-soft)}

.term-info{margin:14px 0}
.term-card{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--agency);border-radius:8px;padding:13px 16px}
.term-card p{margin:.45em 0;font-size:.93rem}
.term-short{color:var(--ink-soft);font-style:italic}
.term-who{border-top:1px dashed var(--line);padding-top:8px;font-size:.88rem!important}
.term-warn{margin-top:.7em!important}
.term-warn .stamp,.term-clash .stamp{margin-right:8px}
.term-clash{background:var(--card);border:2px solid var(--stamp);border-radius:8px;padding:12px 15px;margin:12px 0 0;font-size:.93rem}

.score{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.score.ok{border-left:5px solid var(--agency)}
.score.warn{border-left:5px solid #8a6d2f}
.score.bad{border-left:5px solid var(--stamp)}
.score-num{font-family:"Zilla Slab",Georgia,serif;font-size:1.7rem;display:block}
.score-bar{height:10px;border-radius:5px;background:var(--tab);overflow:hidden;margin:8px 0}
.score-bar span{display:block;height:100%;background:var(--agency)}
.score.bad .score-bar span{background:var(--stamp)}
.score.warn .score-bar span{background:#8a6d2f}
.score-msg{font-size:.92rem;color:var(--ink-soft)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.chk{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.92rem}
.chk span.chk-mark{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;margin-top:1px}
.chk.yes .chk-mark{background:var(--agency)}
.chk.no .chk-mark{background:var(--stamp)}
.chk.yes{opacity:.72}
.chk div span{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:3px}

.quote-out{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:.82rem;line-height:1.55;white-space:pre;margin:0}

@media(max-width:900px){.checks{grid-template-columns:1fr}}
@media(max-width:700px){
  .mp-grid{grid-template-columns:1fr}
  .qline-head{display:none}
  .qline{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"desc desc desc" "ccy cost mk" "sell prof mar" "meta meta meta" "note note del";gap:6px;padding:12px 0}
  .qline .l-desc{grid-area:desc}
  .qline .l-ccy{grid-area:ccy}
  .qline .l-cost{grid-area:cost}
  .qline .l-mk{grid-area:mk}
  .qline .l-sell{grid-area:sell}
  .qline .l-prof{grid-area:prof;align-self:center;text-align:left}
  .qline .l-mar{grid-area:mar;align-self:center;text-align:right}
  .qline .l-meta{grid-area:meta;grid-column:auto}
  .qline .l-note{grid-area:note;grid-column:auto}
  .qline .band-del{grid-area:del;justify-self:end;align-self:center}
  .quote-out{font-size:.7rem}
}

/* Shipment Profit Calculator */
.pline-head,.pline-r{display:grid;grid-template-columns:minmax(0,1fr) 130px 28px;gap:8px;align-items:center}
.pline-head.cost,.pline-c{display:grid;grid-template-columns:minmax(0,1fr) 130px 92px 28px;gap:8px;align-items:center}
.pline-head{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:8px 0 4px;border-bottom:1px solid var(--line)}
.pline{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .pline input[type=text],.calc .pline input[type=number]{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:.92rem;color:var(--ink);width:100%;min-width:0}
.calc .pline input.p-amt{text-align:right;font-variant-numeric:tabular-nums}
.p-front{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-soft)}
.p-front input{width:auto!important;min-width:0}
.fronted-note{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:.92rem}
.fronted-note .stamp{margin-right:8px}
.ch-main.neg{background:#7a2e22}

.flags{margin-top:20px}
.flags h4{margin:0 0 8px;font-size:1.05rem}
.flag{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--stamp);border-radius:8px;padding:11px 14px;margin-bottom:9px}
.flag.ok{border-left-color:var(--agency)}
.flag .stamp{flex:none;margin-top:2px}
.flag b{display:block;font-size:.96rem}
.flag span:not(.stamp){display:block;color:var(--ink-soft);font-size:.89rem;margin-top:3px}

@media(max-width:700px){
  .pline-head{display:none}
  .pline-r{grid-template-columns:1fr 28px;grid-template-areas:"desc desc" "amt del";gap:6px;padding:10px 0}
  .pline-c{grid-template-columns:1fr 92px 28px;grid-template-areas:"desc desc desc" "amt fr del";gap:6px;padding:10px 0}
  .pline .p-desc{grid-area:desc}
  .pline .p-amt{grid-area:amt}
  .pline .p-front{grid-area:fr}
  .pline .band-del{grid-area:del;justify-self:end}
}

/* Rate Bank */
.rb-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.rb-tile{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 13px;text-align:center}
.rb-tile.ok{border-left:4px solid var(--agency)}
.rb-tile.warn{border-left:4px solid #8a6d2f}
.rb-tile.bad{border-left:4px solid var(--stamp)}
.rb-n{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.7rem;line-height:1.1}
.rb-l{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:2px}
.rb-alerts .flag{border-left-color:var(--stamp)}
.rb-alerts .flag.warn{border-left-color:#8a6d2f}
.rb-alerts .flag.ok{border-left-color:var(--agency)}

.rb-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rbf.wide{grid-column:1/-1}
.rbf label{display:block;font-weight:600;font-size:.84rem;margin-bottom:4px}
.rbf input,.rbf select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:.92rem;color:var(--ink)}

.rb-filters{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.rb-filters input{flex:1 1 240px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink)}
.rb-filters select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink)}

.rb-table{font-size:.9rem}
.rb-table th{white-space:nowrap}
.rb-table td{vertical-align:top}
.rb-table td small{display:block;color:var(--ink-soft);font-size:.78rem;margin-top:2px}
.rb-table td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-table tr.s-dead td,.rb-table tr.s-nodate td{opacity:.62}
.rb-pill{display:inline-block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:999px;color:#fff}
.rb-pill.ok{background:var(--agency)}
.rb-pill.warn{background:#8a6d2f}
.rb-pill.bad{background:var(--stamp)}
.rb-acts{white-space:nowrap}
.rb-mini{background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:6px;padding:3px 9px;font:inherit;font-size:.8rem;cursor:pointer;margin-right:4px}
.rb-mini:hover{border-color:var(--agency);color:var(--agency)}
.rb-mini.del:hover{border-color:var(--stamp);color:var(--stamp)}
.rb-empty{text-align:center;color:var(--ink-soft);padding:22px}
.rb-selected{margin-top:16px}
.rb-selected h4{margin:0 0 8px;font-size:1.05rem}

@media(max-width:1000px){.rb-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.rb-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-form{grid-template-columns:1fr}}

/* Portfolio and positioning page */
.pf-hero{padding-bottom:26px}
.pf-hero h1{font-size:2.9rem;max-width:22ch}
.pf-badges{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.pf-badge{display:inline-block;border:1.5px solid var(--agency);color:var(--agency);border-radius:999px;padding:4px 14px;font-size:.82rem;font-weight:600}
.pf-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 22px}
.pf-open h3{margin:0 0 4px;font-size:1.1rem}
.pf-open p{margin:0;color:var(--ink-soft);max-width:62ch}
.pf-contact{display:flex;flex-wrap:wrap;gap:10px}
.pf-contact .btn{display:inline-block;background:var(--agency);color:#fff;border-radius:8px;padding:10px 18px;text-decoration:none;font-weight:600;font-size:.94rem}
.pf-contact .btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.pf-contact .btn:hover{filter:brightness(1.08)}

.pf-section{margin:52px 0}
.pf-section > h2{font-size:1.9rem;margin:0 0 .35em;border-bottom:3px solid var(--line);padding-bottom:.25em}
.pf-intro{color:var(--ink-soft);max-width:78ch;font-size:1.05rem}

.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.pf-card{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--stamp);border-radius:0 0 10px 10px;padding:18px 20px;display:flex;flex-direction:column}
.pf-card-head h3{margin:0;font-size:1.18rem}
.pf-card-head h3 a{text-decoration:none;color:var(--ink)}
.pf-card-head h3 a:hover{color:var(--stamp)}
.pf-for{display:inline-block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:4px 0 10px}
.pf-card p{margin:.5em 0;font-size:.93rem}
.pf-does{color:var(--ink)}
.pf-why,.pf-shows{color:var(--ink-soft)}
.pf-shows b{color:var(--agency)}
.pf-card .go{margin-top:auto;padding-top:12px}

.pf-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.pf-step{display:flex;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:15px 18px}
.pf-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--stamp);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",Georgia,serif;font-size:1.1rem}
.pf-step b{display:block;margin-bottom:3px}
.pf-step p{margin:0;font-size:.93rem;color:var(--ink-soft)}

.pf-rigour{margin-top:22px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--agency);border-radius:0 10px 10px 0;padding:18px 22px}
.pf-rigour h3{margin:0 0 8px;font-size:1.15rem}
.pf-rigour ul{margin:0;padding-left:1.2em}
.pf-rigour li{margin:.5em 0;font-size:.95rem}

.pf-story{max-width:76ch}
.pf-story p{font-size:1.05rem}
.pf-story-close{background:var(--card);border-left:4px solid var(--stamp);padding:14px 18px;border-radius:0 8px 8px 0}

.pf-writing{list-style:none;padding:0;margin:18px 0}
.pf-writing li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)}
.pf-writing a{font-family:"Zilla Slab",Georgia,serif;font-size:1.1rem;text-decoration:none}
.pf-writing span{color:var(--ink-soft);font-size:.85rem;white-space:nowrap}

.pf-final{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 28px}
.pf-final h2{border-bottom:0;margin-bottom:.2em}
.pf-final p{max-width:74ch}

@media(max-width:1000px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .pf-hero h1{font-size:2.1rem}
  .pf-open{grid-template-columns:1fr}
  .pf-method{grid-template-columns:1fr}
}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr}.pf-section > h2{font-size:1.5rem}}

/* Email form: spam trap, validation message, consent line */
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cf-err{flex-basis:100%;margin:8px 0 0;color:var(--stamp);font-size:.9rem;font-weight:600}
.cf-consent{flex-basis:100%;margin:8px 0 0;font-size:.82rem;color:var(--ink-soft)}
.cf-sub input[aria-invalid=true]{border-color:var(--stamp);outline:2px solid var(--stamp);outline-offset:1px}

/* Homepage: two calls to action of equal weight, essays and tools */
.hero-cta{margin-top:1.4em;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-lg{font-size:1.08rem;padding:14px 28px}
.btn-alt{background:transparent;color:var(--ink);border:1.5px solid var(--agency);padding:12.5px 26.5px}
.btn-alt:hover{background:var(--agency);color:#fdf8ec;filter:none}
.hero-cta-note{flex-basis:100%;display:block;margin:2px 0 0;font-size:.9rem;color:var(--ink-soft)}
.hero-note{margin-top:1.1em;font-size:.92rem;color:var(--ink-soft);max-width:72ch}
/* Section intro line and the "see everything" link under a section */
.sec-lede{margin:0 0 10px;color:var(--ink-soft);max-width:72ch}
.sec-more{margin:22px 0 0}
@media(max-width:480px){.hero-cta .btn-lg{width:100%;text-align:center}}

/* 404 */
.e404 h1{max-width:20ch}
.e404-search{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;max-width:620px}
.e404-search input{flex:1 1 260px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);font:inherit;color:var(--ink)}
.e404-links{list-style:none;padding:0;margin:16px 0 0}
.e404-links li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line)}
.e404-links a{font-family:"Zilla Slab",Georgia,serif;font-size:1.08rem}
.e404-links span{color:var(--ink-soft);font-size:.9rem}

/* ============================================================
   Accessibility and touch: every control comfortable to tap
   ============================================================ */
.calc input[type=date],.calc input[type=search],.calc input[type=email],.calc input[type=url]{
  padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  font:inherit;color:var(--ink);width:100%;min-height:44px}
.calc input[type=number],.calc input[type=text],.calc select{min-height:44px}
.calc .band input,.calc .qline input,.calc .pline input{min-height:38px}
.hint-btn{width:34px;height:34px}
.band-add{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
[hidden]{display:none!important}
.rb-mini{min-height:32px;padding:5px 11px}
input[type=checkbox]{width:20px;height:20px}

/* Visible keyboard focus everywhere, which the default outline does not always give */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--agency);outline-offset:2px;border-radius:4px}

/* Skip link for keyboard and screen-reader users */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--agency);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

@media(max-width:700px){
  .site-nav a,.site-nav .menu a{min-height:44px;display:flex;align-items:center}
  .foot-col a,.e404-links a,.pf-writing a,.side-list a{display:inline-block;padding:3px 0;min-height:32px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
.band-del{min-width:30px;min-height:30px}

/* Documentation Toolkit */
.tk-folder{border-left:5px solid var(--agency)}
.tk-who{color:var(--ink-soft);font-size:.92rem;margin:.2em 0 .6em}
.tk-intro{margin:.2em 0 1em}
.tk-docs{list-style:none;padding:0;margin:0}
.tk-docs li{padding:11px 0;border-bottom:1px dashed var(--line)}
.tk-docs li b{display:block;font-size:1rem}
.tk-docs li b .when{margin-left:8px;vertical-align:1px}
.tk-docs li span:not(.when){display:block;color:var(--ink-soft);font-size:.93rem;margin-top:3px}
.tk-foot{margin-top:16px;background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:13px 16px}
.tk-foot p{margin:.35em 0;font-size:.94rem}
.tk-foot .stamp{margin-right:8px}
.tk-lead{color:var(--ink-soft)}
.tk-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.tk-rule{display:flex;gap:13px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:13px 16px}
.tk-rule b{display:block;margin-bottom:3px}
.tk-rule p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.timing-legend{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:baseline}
.timing-legend .when{justify-self:start}
.when-desc{font-size:.9rem;color:var(--ink-soft);margin:0}

/* Clearance Journey */
.cj-truths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cj-truth{display:flex;gap:13px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.cj-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--stamp);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",Georgia,serif}
.cj-truth b{display:block;margin-bottom:4px}
.cj-truth p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.cj-flow{margin:20px 0}
.cj-purpose{margin-bottom:1em}
.cj-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.cj-moment{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--stamp);border-radius:0 0 9px 9px;padding:15px 17px;display:flex;flex-direction:column}
.cj-when{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);font-weight:700;margin-bottom:5px}
.cj-moment b{font-size:1.06rem;display:block;margin-bottom:5px}
.cj-moment p{margin:0 0 12px;font-size:.93rem;color:var(--ink-soft)}
.cj-moment .go{margin-top:auto}

@media(max-width:1000px){.cj-truths,.cj-moments{grid-template-columns:1fr}.tk-rules{grid-template-columns:1fr}}
@media(max-width:700px){
  .tk-folder.collapsible .collapse-body{padding-top:10px}
  .tk-head.collapse-toggle{margin-bottom:0}
}

/* ============================================================
   Quotation Builder: your company, and the document it issues
   ============================================================ */
.qb-logo{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:0 0 18px}
.qb-logo-box{width:220px;min-height:104px;border:1px dashed var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;flex:0 0 auto}
.qb-logo-box span{font-size:.84rem;color:var(--ink-soft)}
.qb-logo-box img{max-width:100%;max-height:120px;width:auto;height:auto}
.qb-logo-act{flex:1 1 260px;min-width:0}
.qb-logo-act .band-add{margin-top:0;margin-right:8px;display:inline-block}
.qb-logomsg{font-size:.84rem;color:var(--agency);margin:8px 0 0;min-height:1.1em}
.qb-logomsg.bad{color:var(--stamp)}
#q_accent{padding:4px;height:42px}
.bank-handover{margin:0 0 14px}
#q-brand.folded>*:not(h3):not(.qb-fold-note){display:none}
.qb-fold-note{margin:0;font-size:.95rem;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qb-fold-note .band-add{margin-top:0}

/* ---------- what the job actually cost ---------- */
.act-table{overflow-x:auto}
.act-grid{width:100%;border-collapse:collapse;font-size:.86rem;min-width:720px}
.act-grid th{text-align:left;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line);
  vertical-align:bottom}
.act-grid th.n,.act-grid td.n{text-align:right;white-space:nowrap}
.act-grid td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
.act-grid tr.act-grp th{background:rgba(30,107,79,.07);color:var(--ink);font-size:.72rem;
  padding-top:12px;border-bottom:0}
.act-grid input{width:100%;min-width:86px;padding:5px 7px;font-size:.86rem;
  border:1px solid var(--line);border-radius:5px;background:#fff}
.act-grid input.act-ref{min-width:104px;font-size:.8rem}
.act-quoted{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.act-var{font-variant-numeric:tabular-nums;font-weight:600}
.act-var.up{color:#b3402e}
.act-var.down{color:#1e6b4f}
.act-flag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:#fbeae7;color:#8d2d1f;font-size:.66rem;font-weight:700;white-space:nowrap}
.act-flag.warn{background:#fdf5e8;color:#7a5405}
.act-disb{font-size:.7rem;color:var(--ink-soft);display:block}

.act-sum{margin:18px 0 0}
.act-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 12px}
.act-card{padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:#fff}
.act-card .l{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-bottom:3px}
.act-card .v{display:block;font-size:1.06rem;font-weight:700;font-variant-numeric:tabular-nums}
.act-card .d{display:block;font-size:.76rem;margin-top:2px}
.act-card.good{border-color:#1e6b4f;background:#e7f2ec}
.act-card.good .d{color:#12523b}
.act-card.bad{border-color:#b3402e;background:#fbeae7}
.act-card.bad .d{color:#8d2d1f}
.act-note{margin:0 0 10px;font-size:.88rem;line-height:1.6;padding:12px 14px;border-radius:8px}
.act-note.leak{background:#fbeae7;border:1.5px solid #b3402e;color:#8d2d1f}
.act-note.plain{background:#f7f4ec;border:1px solid var(--line);color:var(--ink-soft)}
.act-note ul{margin:6px 0 0;padding-left:20px}
@media(max-width:760px){
  .act-grid{min-width:640px}
}

/* ---------- the quotation register ---------- */
.reg-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.reg-count{font-size:.8rem;font-weight:400;color:var(--ink-soft);letter-spacing:0;text-transform:none}
.reg-fold{background:none;border:1px solid var(--line);border-radius:6px;padding:5px 12px;
  font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer}
.reg-fold:hover{border-color:var(--accent,#1e6b4f)}
.reg-body{margin-top:14px}
/* One line about backing up, and only when it is actually true. */
.reg-backup{margin-top:12px}
.reg-backup:empty{display:none}
.rb-note{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:10px 14px;border-radius:7px;font-size:.87rem;line-height:1.55}
.rb-note span{flex:1 1 260px}
.rb-note .band-add{margin-top:0;flex:0 0 auto}
.rb-note.due{background:#fdf5e8;border:1.5px solid #c98a12;color:#7a5405}
.rb-note.ok{background:#f7f4ec;border:1px solid var(--line);color:var(--ink-soft)}
.reg-act{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.reg-act .band-add{margin-top:0}
.reg-list{border-top:1px solid var(--line)}
.reg-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1.5fr) 108px minmax(110px,.9fr) auto;
  gap:6px 12px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line);font-size:.88rem}
.reg-row.is-open{background:rgba(30,107,79,.07);border-left:3px solid #1e6b4f;padding-left:9px}
.reg-ref{font-weight:700}
.reg-rev{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:#e8e3d4;font-size:.68rem;font-weight:700;letter-spacing:.04em}
.reg-sub{display:block;font-size:.76rem;color:var(--ink-soft);font-weight:400;margin-top:1px}
.reg-total{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.reg-flag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:#fbeae7;color:#8d2d1f;font-size:.68rem;font-weight:700}
.reg-st{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:.8rem;background:#fff}
.reg-btns{display:flex;gap:6px;justify-self:end}
.reg-btns button{background:none;border:1px solid var(--line);border-radius:6px;padding:4px 10px;
  font-size:.78rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.reg-btns button:hover{border-color:var(--accent,#1e6b4f)}
.reg-btns .reg-del:hover{border-color:#b3402e;color:#b3402e}
.reg-empty{padding:18px 8px;color:var(--ink-soft);font-size:.9rem}
.reg-msg{margin:12px 0 0;font-size:.88rem;font-weight:600;min-height:1.2em}
.reg-msg.good{color:#1e6b4f}
.reg-msg.bad{color:#b3402e}
.reg-danger{margin:18px 0 0;padding:14px 16px;border:1.5px solid #e4d9d5;border-radius:8px;
  background:rgba(179,64,46,.04)}
.reg-danger p{margin:0 0 10px;font-size:.84rem;line-height:1.6}
.band-add.danger{background:#fff;border:1.5px solid #b3402e;color:#b3402e}
.band-add.danger:hover{background:#b3402e;color:#fff}
.reg-usage{margin-left:10px;font-size:.76rem;color:var(--ink-soft)}
@media(max-width:760px){
  .reg-row{grid-template-columns:1fr auto;gap:4px 10px}
  .reg-total{text-align:left}
  .reg-btns{grid-column:1 / -1;justify-self:start;margin-top:6px}
}

/* Has this gone to the client, and does it still say what it said then? */
.qd-issue{margin:0 0 12px}
.qd-issue:empty{display:none}
.qi{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:11px 14px;border-radius:7px;border:1.5px solid var(--line);font-size:.9rem}
.qi b{font-weight:700}
.qi-new{background:#f7f4ec;color:#5a6472}
.qi-sent{background:#e7f2ec;border-color:#1e6b4f;color:#12523b}
.qi-drift{background:#fbeae7;border-color:#b3402e;color:#8d2d1f}
.qi-txt{flex:1 1 280px;line-height:1.55}
.qi .band-add{margin-top:0;flex:0 0 auto}
.qi-hist{flex:1 1 100%;font-size:.78rem;color:#6a7280;margin:0;line-height:1.5}
/* Priced under the floor you set. Not blocked, recorded. */
.qi-low-b{background:#fdf5e8;border-color:#c98a12;color:#7a5405}
.qi-appr{display:flex;flex-direction:column;gap:3px;flex:0 1 220px}
.qi-appr label{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.qi-appr input{width:100%}
.qi-low{margin:8px 0 0;font-size:.84rem;line-height:1.6;color:#7a5405}
/* The revision, beside the reference on the client's document. */
.qd-rev{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:4px;
  background:rgba(255,255,255,.22);font-size:.72em;letter-spacing:.06em;font-weight:700}
.qd-supersede{margin:6px 0 0;font-size:.8rem;color:#6a6a6a;font-style:italic}
.qd-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px}
.qd-actions .band-add{margin-top:0}
.qd-pdfnote{margin:0 0 12px}
.qd-warn .mp-warn{margin:0 0 14px}
.qd-frame{background:#8a8577;padding:22px;border-radius:12px;overflow-x:auto}
.qd-plain{margin-top:18px}
.qd-plain summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.qd-plain .quote-out{margin-top:12px}

/* the document itself: deliberately plain, because it is the visitor's
   letterhead and not this site's brand */
.qdoc{--qa:#1f3a5f;background:#fff;color:#222;max-width:820px;margin:0 auto;padding:46px 48px 34px;
  font-family:"Source Sans 3",Arial,Helvetica,sans-serif;font-size:14.5px;line-height:1.5;
  box-shadow:0 6px 26px rgba(0,0,0,.28);border-radius:2px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.qdoc h2,.qdoc h4,.qdoc .qd-name{font-family:"Source Sans 3",Arial,Helvetica,sans-serif}
.qdoc p{margin:.2em 0}
.qd-head{display:flex;justify-content:space-between;gap:26px;align-items:flex-start;padding-bottom:18px;border-bottom:3px solid var(--qa)}
.qd-id{min-width:0}
.qd-logo{display:block;max-height:76px;max-width:280px;width:auto;margin:0 0 8px}
.qd-name{font-size:1.35rem;font-weight:700;color:var(--qa);line-height:1.2}
.qd-tag{font-size:.86rem;color:#555;margin-top:2px}
.qd-contact{text-align:right;font-size:.82rem;color:#444;flex:0 0 auto;max-width:46%}
.qd-contact p{margin:.1em 0;overflow-wrap:anywhere}
.qd-band{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:20px 0 4px}
.qd-band h2{margin:0;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--qa)}
.qd-band span{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:#555}
.qd-meta{display:flex;gap:30px;flex-wrap:wrap;margin:14px 0 6px}
.qd-meta>div{flex:1 1 240px;min-width:0}
.qdoc h4.qd-h,.qd-meta h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--qa);margin:18px 0 6px;font-weight:700}
.qd-meta h4{margin-top:0}
.qd-client{font-size:1.05rem;font-weight:700}
.qd-facts table{width:100%;border-collapse:collapse;background:none;font-size:.86rem}
.qd-facts th,.qd-facts td{border:0;padding:2px 0;background:none;font-family:inherit}
.qd-facts th{width:42%;font-weight:600;color:#555}
.qd-tbl{width:100%;border-collapse:collapse;background:none;font-size:.9rem;margin:0}
.qd-tbl th,.qd-tbl td{border:0;border-bottom:1px solid #e2e2e2;padding:6px 8px;background:none;font-family:inherit;vertical-align:top}
.qd-two th{width:24%;font-weight:600;color:#555;background:none}
.qd-chg thead th{background:var(--qa);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:0}
.qd-chg .n,.qd-tbl .n{text-align:right;white-space:nowrap}
.qd-chg tfoot th{border-top:2px solid var(--qa);border-bottom:0;font-size:1.02rem;padding-top:9px;background:none}
.qd-ex{margin:4px 0 0;padding-left:20px;font-size:.88rem}
.qd-ex li{margin:2px 0}
.qd-notes{margin:18px 0 0;font-size:.8rem;color:#555}
.qd-bank p{font-size:.88rem}
/* The conditions the job is carried out under. Small type, last thing before
   the signature, which is where a reader expects to find them. */
.qd-cond{margin:20px 0 0;break-inside:avoid;page-break-inside:avoid}
.qd-cond p{font-size:.72rem;line-height:1.6;color:#5a5a5a;margin:.35em 0}

/* ---------- printing a document that runs to more than one page ----------
   A quotation that spills onto a second page has to still read as one
   document: the charge table needs its heading again, every page needs to say
   which quotation it belongs to, and no row may be sliced in half by a page
   break. Browsers will do none of that unless told. */
@media print {
  #cf-print-doc .qd-chg thead { display: table-header-group; }
  #cf-print-doc .qd-chg tfoot { display: table-footer-group; }
  #cf-print-doc .qd-chg tr,
  #cf-print-doc .qd-tbl tr { break-inside: avoid; page-break-inside: avoid; }
  #cf-print-doc .qd-grp { break-after: avoid; page-break-after: avoid; }
  #cf-print-doc .qd-h { break-after: avoid; page-break-after: avoid; }
  #cf-print-doc .qd-head,
  #cf-print-doc .qd-meta,
  #cf-print-doc .qd-accept,
  #cf-print-doc .qd-cond,
  #cf-print-doc .qd-sign { break-inside: avoid; page-break-inside: avoid; }
  /* The running footer. A loose page off a printer has to be traceable back to
     the quotation it came from, and to the company that issued it. */
  #cf-print-doc .qd-runfoot { display: block; position: fixed; bottom: 0; left: 0; right: 0;
    font-size: .62rem; color: #8a8a8a; border-top: 1px solid #e4e0d4;
    padding-top: 3px; text-align: center; }
  @page { margin: 14mm 12mm 18mm; }
}
.qd-runfoot{display:none}
.qd-sign{margin:26px 0 0;min-height:10px}
.qd-signname{font-weight:700}
.qd-sigtitle{font-size:.84rem;color:#555}
.qd-credit{margin:30px 0 0;padding-top:10px;border-top:1px solid #e2e2e2;font-size:.66rem;line-height:1.5;color:#9a9a9a;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.qd-miss{color:#c0392b;font-style:normal;font-weight:600}
/* How a charge was worked out, printed under it. Small, quiet, and checkable
   with a calculator, which is the entire reason it is there. */
.qd-basis{display:block;font-size:.76rem;color:#6a6a6a;margin-top:1px}
/* The registration and tax numbers, set apart from the address so an accounts
   department can find them at a glance instead of reading the whole block. */
.qd-regs{margin:.5em 0 0;font-size:.76rem;color:#666;letter-spacing:.01em}

/* Somewhere for the client to sign. It has to survive a photocopier and a
   phone camera, so the rules are real lines rather than dotted underlines,
   and the signature row is given room to hold an actual signature. */
.qd-accept{margin:30px 0 0;padding:18px 18px 14px;border:1.5px solid var(--qa);border-radius:8px;break-inside:avoid;page-break-inside:avoid}
.qd-accept .qd-h{margin-top:0}
.qd-acceptlead{margin:0 0 12px;font-size:.9rem}
.qd-acctbl{margin:0}
.qd-acctbl th{width:34%;vertical-align:bottom;padding-bottom:10px}
.qd-rule{border-bottom:1px solid #444;vertical-align:bottom;padding-bottom:10px}
.qd-tall{height:44px}
.qd-acceptnote{margin:12px 0 0;font-size:.78rem;color:#555}

/* The print options sit under the buttons, where a choice about the document
   belongs, rather than back up among the fields that build it. */
.qd-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
.qd-opt{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;cursor:pointer}
.qd-opt input{width:18px;height:18px;flex:0 0 auto}
.qd-opthint{flex:1 1 100%;font-size:.8rem;line-height:1.55;color:#5a6472;margin:0}

/* Keeping the working quotation. Set apart from the client downloads above it,
   because saving your own file and issuing your client's document are two
   different acts and mixing them is how people send the wrong one. */
.qd-keep{margin:16px 0 0;padding:16px 18px;border:1.5px solid var(--line);
  border-radius:8px;background:rgba(30,107,79,.04)}
.qd-keep h4{margin:0 0 6px;font-size:1rem}
.qd-keep p{margin:0 0 10px;font-size:.88rem;line-height:1.6}
.qd-keepact{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.qd-keepnote{font-size:.8rem!important;color:#5a6472;margin:0!important}
.qd-openmsg{margin:10px 0 0!important;font-size:.88rem!important;font-weight:600}
.qd-openmsg.good{color:#1e6b4f}
.qd-openmsg.bad{color:#b3402e}
.qd-openmsg .qd-openact{display:block;margin-top:8px;font-weight:400}
.qd-count{flex:1 1 100%;font-size:.78rem;color:#777}

@media(max-width:760px){
  .qdoc{padding:26px 22px 22px;font-size:13.5px}
  .qd-head{flex-direction:column;gap:12px}
  .qd-contact{text-align:left;max-width:100%}
  /* "For and on behalf of" needs room. At 34% it wraps to three lines and the
     panel stops looking like something you would sign. */
  .l-rf{flex:1 1 calc(50% - 5px)}
  .l-qtywrap{flex:1 1 100%}
  .qd-accept{padding:14px 13px 12px}
  .qd-acctbl th{width:46%;font-size:.86rem}
  .qd-frame{padding:12px}
  .qd-two th{width:34%}
  .qb-logo-box{width:100%}
}
@media(max-width:460px){
  .qdoc{padding:20px 16px 18px}
  .qd-band{flex-wrap:wrap;gap:2px}
  .qd-band h2{font-size:1.2rem;letter-spacing:.08em}
  .qd-meta{gap:14px}
  .qd-tbl th,.qd-tbl td{padding:5px 4px}
  .qd-two th{width:38%}
  .qd-actions .band-add{flex:1 1 100%}
  .qd-chg thead th.n{white-space:normal}
  .qd-logo{max-width:100%}
}

@media print{
  @page{size:A4;margin:14mm}
  html.cf-printing,html.cf-printing body{background:#fff!important;margin:0!important;padding:0!important}
  html.cf-printing body>*{display:none!important}
  html.cf-printing body>#cf-print-host{display:block!important}
  #cf-print-host .qdoc{max-width:none;width:100%;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:11.6pt}
  #cf-print-host .qd-tbl tr,#cf-print-host .qd-head,#cf-print-host .qd-meta{page-break-inside:avoid}
  #cf-print-host .qd-credit{margin-top:22px}
}

/* ============================================================
   Temporary Admission Permit page
   ============================================================ */
.tap-idea{background:linear-gradient(180deg,var(--card),var(--paper))}
.tap-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tap-steps li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:0}
.tap-n{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--agency);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1rem}
.tap-steps b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.02rem;line-height:1.25}
.tap-steps p{margin:.3em 0 0;font-size:.92rem;color:var(--ink-soft)}
.tap-plain{margin:18px 0 0;padding:12px 14px;background:var(--code-bg);border-left:4px solid var(--agency);border-radius:0 8px 8px 0;font-size:.98rem}
.tap-danger{margin:18px 0 0;padding:12px 14px;background:#fbeceb;border-left:4px solid var(--stamp);border-radius:0 8px 8px 0;font-size:.98rem}
.tap-note{margin:24px 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:1rem}

/* the guarantee estimator */
.tap-out{margin-top:18px}
.tap-head{display:flex;flex-direction:column;gap:2px;padding:16px 18px;background:var(--agency);color:#fff;border-radius:12px 12px 0 0}
.tap-head .tap-lab{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.tap-big{font-family:"Zilla Slab",Georgia,serif;font-size:2rem;font-weight:700;line-height:1.1}
.tap-sub{font-size:.88rem;opacity:.92}
.tap-stack{width:100%;border-collapse:collapse;background:var(--card);font-size:.96rem}
.tap-stack th,.tap-stack td{border:0;border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;background:none;font-family:inherit;vertical-align:top}
.tap-stack th small{display:block;font-weight:400;font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.tap-stack td.n{text-align:right;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.92rem}
.tap-stack tfoot th,.tap-stack tfoot td{font-weight:700;background:var(--tab)}
.tap-stack tfoot tr.grand th,.tap-stack tfoot tr.grand td{background:var(--code-bg);font-size:1.06rem;border-top:2px solid var(--agency)}
.tap-hold{margin-top:16px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--card)}
.tap-hold b{font-family:"Zilla Slab",Georgia,serif}
.tap-hold p{margin:.4em 0 0;font-size:.94rem}
.tap-hold .tap-warn{color:var(--stamp)}

/* the clock */
.tap-clockout{margin-top:18px}
.tap-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tap-tile{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-align:center}
.tap-tile .tap-lab{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tap-tile .tap-val{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:2rem;font-weight:700;line-height:1.1}
.tap-tile.ok{border-color:var(--agency)}
.tap-tile.ok .tap-val{color:var(--agency)}
.tap-tile.warn{border-color:#b8791f}
.tap-tile.warn .tap-val{color:#96620f}
.tap-tile.bad{border-color:var(--stamp);background:#fbeceb}
.tap-tile.bad .tap-val{color:var(--stamp)}
.tap-dates{width:100%;border-collapse:collapse;background:var(--card);font-size:.95rem}
.tap-dates th,.tap-dates td{border:0;border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;background:none;font-family:inherit;vertical-align:top}
.tap-dates th{width:26%;font-family:"Zilla Slab",Georgia,serif}
.tap-dates td:nth-child(2){white-space:nowrap;font-weight:600;width:22%}
.tap-dates tr.past th,.tap-dates tr.past td{opacity:.72}
.tap-passed{color:var(--stamp)}

/* eligible / not eligible */
.tap-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tap-two h4{margin:0 0 10px;font-size:1.05rem}
.tap-two p{margin:0 0 12px}
.tap-two b{display:block;font-size:.98rem}
.tap-two span{display:block;font-size:.9rem;color:var(--ink-soft)}
.tap-yes{padding:16px 18px;border-radius:12px;background:var(--card);border-left:4px solid var(--agency)}
.tap-no{padding:16px 18px;border-radius:12px;background:var(--card);border-left:4px solid var(--stamp)}
.tap-yes h4{color:var(--agency)}
.tap-no h4{color:var(--stamp)}

/* documents and conditions */
.qdoc h4.tap-h,h4.tap-h{margin:22px 0 10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}
.tap-docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tap-docs li{margin:0;padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.tap-docs b{display:block;font-size:.96rem}
.tap-docs span{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.tap-conds{margin:0;padding-left:0;list-style:none;counter-reset:tapc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tap-conds li{counter-increment:tapc;margin:0;padding:11px 13px 11px 44px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px}
.tap-conds li::before{content:counter(tapc);position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;
  background:var(--tab);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:600}
.tap-conds b{display:block;font-size:.96rem}
.tap-conds span{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}

/* timeline table */
.tap-time{width:100%;border-collapse:collapse;background:var(--card);font-size:.95rem}
.tap-time th,.tap-time td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.tap-time thead th{background:var(--tab)}
.tap-time .tap-dur{white-space:nowrap;font-weight:600;color:var(--agency)}

/* the three exits */
.tap-exits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tap-exit{padding:15px 17px;background:var(--card);border:1px solid var(--line);border-radius:12px;border-top:4px solid var(--agency)}
.tap-when{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);font-weight:700;margin-bottom:6px}
.tap-exit b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.08rem;line-height:1.2}
.tap-exit p{margin:.45em 0 0;font-size:.92rem;color:var(--ink-soft)}

.tap-check{margin:.3em 0 1.1em;padding-left:0;list-style:none}
.tap-check li{position:relative;padding-left:26px;margin:.3em 0;font-size:.96rem}
.tap-check li::before{content:"☐";position:absolute;left:0;top:-1px;font-size:1.05rem;color:var(--agency)}

@media(max-width:1000px){
  .tap-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tap-exits{grid-template-columns:1fr}
  .tap-docs,.tap-conds{grid-template-columns:1fr}
}
@media(max-width:700px){
  .tap-steps{grid-template-columns:1fr}
  .tap-two{grid-template-columns:1fr}
  .tap-tiles{grid-template-columns:1fr}
  .tap-big{font-size:1.6rem}
  .tap-dates th{width:auto}
  .tap-stack th,.tap-stack td,.tap-dates th,.tap-dates td{padding:8px 8px}
}

/* ============================================================
   Working in Nigerian oil and gas
   ============================================================ */
.og-law{background:linear-gradient(180deg,var(--card),var(--paper))}
.og-big{font-family:"Zilla Slab",Georgia,serif;font-size:1.32rem;line-height:1.35;margin:0 0 .7em}
.og-def{margin:18px 0;padding:16px 18px;background:var(--code-bg);border:2px solid var(--agency);border-radius:12px}
.og-deflab{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--agency);font-weight:700;margin-bottom:6px}
.og-def p{margin:0;font-size:1.06rem}
.og-note{margin:16px 0 0;padding:12px 14px;background:var(--card);border-left:4px solid var(--stamp);border-radius:0 8px 8px 0;font-size:.98rem}

.og-gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.og-gates li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 15px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.og-n{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--stamp);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Zilla Slab",Georgia,serif;font-weight:700}
.og-gates b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.04rem;line-height:1.2}
.og-gtag{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--agency);font-weight:700;margin:3px 0 4px}
.og-gates p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* the readiness check */
.og-score{margin:16px 0 20px}
.og-sc{padding:16px 18px;border-radius:12px;border:2px solid var(--line);background:var(--card)}
.og-sc.ok{border-color:var(--agency)}
.og-sc.warn{border-color:#b8791f}
.og-sc.bad{border-color:var(--stamp)}
.og-scnum{font-family:"Zilla Slab",Georgia,serif;font-size:1.1rem}
.og-scnum span{font-size:2.1rem;font-weight:700;line-height:1}
.og-sc.ok .og-scnum span{color:var(--agency)}
.og-sc.warn .og-scnum span{color:#96620f}
.og-sc.bad .og-scnum span{color:var(--stamp)}
.og-scbar{height:10px;border-radius:6px;background:var(--tab);overflow:hidden;margin:9px 0 7px}
.og-scbar span{display:block;height:100%;background:var(--agency);transition:width .25s}
.og-sc.bad .og-scbar span{background:var(--stamp)}
.og-sc.warn .og-scbar span{background:#b8791f}
.og-scmust{font-size:.86rem;color:var(--ink-soft)}
.og-verdict{margin:.6em 0 0;font-size:1rem}

.og-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.og-group{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.og-group h4{margin:0 0 10px;font-size:1.02rem;color:var(--stamp)}
.og-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
.og-group .og-item:last-child{border-bottom:0}
.og-item input{margin-top:3px;flex:0 0 20px}
.og-txt b{display:block;font-size:.95rem;font-weight:600}
.og-txt span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:1px}
.og-must{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--stamp);color:#fff;padding:1px 6px;border-radius:4px;margin-left:6px;white-space:nowrap}
.og-nice{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--agency);font-weight:700;white-space:nowrap}
.og-gaps{margin-top:22px}
.og-gaptable{width:100%;border-collapse:collapse;background:var(--card);font-size:.94rem}
.og-gaptable th,.og-gaptable td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.og-gaptable thead th{background:var(--tab)}
.og-gaptable tr.must td{background:#fbeceb}
.og-gaptable .og-lead{white-space:nowrap;font-weight:600}

/* registers */
.og-regs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.og-reg{padding:15px 17px;background:var(--card);border:1px solid var(--line);border-radius:12px;border-left:4px solid var(--agency)}
.og-reg h4{margin:0 0 8px;font-size:1.08rem}
.og-reg p{margin:.35em 0;font-size:.93rem}
.og-body,.og-who{color:var(--ink-soft);font-size:.88rem!important}
.og-tip{margin-top:.6em!important;font-size:.9rem!important}

/* money cards */
.og-money{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.og-mcard{padding:14px 16px;background:var(--card);border:1px dashed var(--line);border-radius:12px}
.og-mcard b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.05rem;margin-bottom:.25em}
.og-mcard p{margin:0;font-size:.93rem;color:var(--ink-soft)}

@media(max-width:1000px){
  .og-gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .og-groups,.og-regs,.og-money{grid-template-columns:1fr}
}
@media(max-width:700px){
  .og-gates{grid-template-columns:1fr}
  .og-big{font-size:1.15rem}
  .og-scnum span{font-size:1.7rem}
}

/* Tables inside essays, from markdown */
.essay-table{margin:1.1em 0;font-size:.95rem}
.essay-table th,.essay-table td{padding:8px 11px;vertical-align:top}
.essay-table tbody td:first-child{font-weight:600}
@media(max-width:640px){.essay-table{font-size:.88rem}.essay-table th,.essay-table td{padding:7px 8px}}

/* ============================================================
   Internal linking: the "keep reading" block and the auto links
   ============================================================ */
.related-links{margin:38px 0 0;padding:24px 26px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.rl-head{margin:0 0 14px;font-size:1.3rem}
.rl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rl-card{display:block;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s}
.rl-card:hover{border-color:var(--agency);transform:translateY(-2px)}
.rl-kicker{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);font-weight:700;margin-bottom:5px}
.rl-card b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.02rem;line-height:1.25;color:var(--agency)}
.rl-line{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:5px}
.rl-all{margin:16px 0 0;font-size:.92rem;color:var(--ink-soft)}
.entry-content .related-links a.rl-card{text-decoration:none}

/* the light in-body auto links */
.auto-link{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-thickness:1px}
.auto-link:hover{text-decoration-style:solid}

@media(max-width:1000px){.rl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rl-grid{grid-template-columns:1fr}.related-links{padding:18px 16px}}

/* ============================================================
   The small calculators: piece list, results, fit tables
   ============================================================ */
.pcs-units{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 14px;font-size:.92rem}
.pcs-units select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:.92rem;min-height:40px}
.pcs-table{width:100%;border-collapse:collapse;background:var(--card);font-size:.95rem}
.pcs-table th,.pcs-table td{border:1px solid var(--line);padding:6px 8px;vertical-align:middle}
.pcs-table thead th{background:var(--tab);font-size:.86rem;white-space:nowrap}
.pcs-table input{width:100%;min-width:70px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font:inherit;font-size:.92rem;min-height:40px}
.pcs-table .p-vol{white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--ink-soft)}
.pcs-table td.n,.pcs-table th.n{text-align:right}
.pcs-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px}
.pcs-actions .band-add{margin-top:0}
.pcs-totals{font-weight:600;font-size:.94rem;color:var(--agency)}

.cw-head{padding:16px 18px;background:var(--agency);color:#fff;border-radius:12px;display:flex;flex-direction:column;gap:2px}
.cw-head.bad{background:var(--stamp)}
.cw-lab{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:1}
.cw-big{font-family:"Zilla Slab",Georgia,serif;font-size:2.1rem;font-weight:700;line-height:1.1}
.cw-big small{font-size:1.1rem;font-weight:600;opacity:.9}
.cw-sub{font-size:.9rem;opacity:.93}
.cw-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.cw-cell{padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-align:center}
.cw-cell.win{border-color:var(--stamp);background:#fbeceb}
.cw-clab{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cw-cval{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.7rem;font-weight:700;line-height:1.15}
.cw-cell.win .cw-cval{color:var(--stamp)}
.cw-cunit{display:block;font-size:.84rem;color:var(--ink-soft)}
.cw-how{margin:14px 0 0;font-size:.95rem;color:var(--ink-soft)}

.cb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.cb-fact{padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cb-fact span{display:block;font-size:.8rem;color:var(--ink-soft)}
.cb-fact b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.2rem;margin-top:2px}
.cb-fit{width:100%;border-collapse:collapse;background:var(--card);font-size:.94rem;margin-top:6px}
.cb-fit th,.cb-fit td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.cb-fit thead th{background:var(--tab)}
.cb-fit td.n,.cb-fit th.n{text-align:right;white-space:nowrap}
.cb-fit td small{display:block;font-size:.78rem;color:var(--ink-soft);font-weight:400}
.cb-fit tr.ok td,.cb-fit tr.ok th{background:#eef6f1}
.cb-fit tr.warn td,.cb-fit tr.warn th{background:#fdf4e6}
.cb-fit tr.bad td,.cb-fit tr.bad th{background:#fbeceb}
.pf-small{margin:18px 0 0;font-size:.98rem;color:var(--ink-soft)}

@media(max-width:760px){
  .cw-two,.cb-facts{grid-template-columns:1fr}
  .cw-big{font-size:1.6rem}
  .pcs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pcs-table,.pcs-table tbody,.pcs-table tr,.pcs-table td{display:block;width:100%}
  .pcs-table tr{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .pcs-table td{border:0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .pcs-table td:last-child{border-bottom:0;justify-content:flex-end}
  .pcs-table td::before{content:attr(data-lab);flex:0 0 42%;font-weight:600;font-size:.86rem}
  .pcs-table td.p-vol{justify-content:space-between}
}

/* ============================================================
   Glossary page
   ============================================================ */
.gl-search-box{position:sticky;top:96px;z-index:5}
.gl-input{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;font-size:1.05rem;color:var(--ink);min-height:48px}
.gl-input:focus{border-color:var(--agency);outline:none}
.gl-count{font-size:.86rem;color:var(--agency);font-weight:600;min-height:1.2em;margin-top:6px}
.gl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gl-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:20px;padding:6px 13px;font:inherit;font-size:.86rem;cursor:pointer;min-height:36px}
.gl-chip span{color:var(--ink-soft);font-size:.8rem;margin-left:3px}
.gl-chip.on{background:var(--agency);border-color:var(--agency);color:#fff}
.gl-chip.on span{color:rgba(255,255,255,.85)}
.gl-chip:hover{border-color:var(--agency)}
.gl-group{margin:34px 0 0}
.gl-gh{margin:0 0 2px;font-size:1.45rem}
.gl-gsub{margin:0 0 14px;color:var(--ink-soft);font-size:.98rem}
.gl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gl-card{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.gl-card b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.08rem;color:var(--stamp)}
.gl-card p{margin:.35em 0 0;font-size:.94rem}
.gl-link{display:inline-block;margin-top:8px;font-size:.86rem;font-weight:600}
.gl-none{margin:28px 0;padding:16px;background:var(--card);border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--ink-soft)}

/* HS finder chapter grid */
.hs-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hs-ch{display:flex;gap:9px;align-items:baseline;text-align:left;padding:9px 11px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;min-height:44px;width:100%}
.hs-ch:hover{border-color:var(--agency)}
.hs-cn{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--stamp);font-weight:600;flex:0 0 auto}
.hs-cl{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.hs-next{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hs-next .btn{margin-top:0}

@media(max-width:1000px){.gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hs-chapters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .gl-grid{grid-template-columns:1fr}
  .hs-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-search-box{position:static}
}
@media(max-width:460px){.hs-chapters{grid-template-columns:1fr}}

/* ============================================================
   Import checker and forwarder questions
   ============================================================ */
.ic-out{margin-top:16px}
.ic-verdict{padding:16px 18px;border-radius:12px;color:#fff}
.ic-verdict.bad{background:var(--stamp)}
.ic-verdict.warn{background:#96620f}
.ic-verdict.ok{background:var(--agency)}
.ic-vlab{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;opacity:.95}
.ic-verdict b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.5rem;line-height:1.2;margin:3px 0 6px}
.ic-verdict p{margin:.35em 0 0;font-size:.96rem}
.ic-vnote{opacity:.94;font-style:italic}
.ic-always{margin:16px 0 0;padding:12px 14px;background:var(--code-bg);border-left:4px solid var(--agency);border-radius:0 8px 8px 0;font-size:.96rem}
.ic-next{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.ic-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ic-k{padding:13px 15px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-left-width:5px}
.ic-k.bad{border-left-color:var(--stamp)}
.ic-k.warn{border-left-color:#b8791f}
.ic-k.ok{border-left-color:var(--agency)}
.ic-k b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.05rem}
.ic-k span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:3px}
.ic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.ic-item{padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.ic-item.unsure{border-color:#b8791f;background:#fdf4e6}
.ic-item b{display:block;font-size:.95rem}
.ic-item span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:3px}
.ic-flag{display:block;margin-top:5px;font-style:normal;font-size:.78rem;font-weight:700;color:#96620f}
.ic-regs,.ic-needs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ic-needs{margin-top:8px}
.ic-reg,.ic-need{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ic-reg b,.ic-need b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.05rem;margin:6px 0 2px}
.ic-body{font-size:.86rem!important;color:var(--stamp)!important;font-weight:600;margin:0 0 .4em!important}
.ic-reg p,.ic-need p{font-size:.92rem;margin:.3em 0 0}

.af-list{display:grid;gap:12px;margin-bottom:8px}
.af-q{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.af-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--agency);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600}
.af-q b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.06rem;line-height:1.3}
.af-why{margin:.4em 0 .6em;font-size:.9rem;color:var(--ink-soft)}
.af-ans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.af-ans p{margin:0;font-size:.88rem;padding:9px 11px;border-radius:9px}
.af-good{background:#eef6f1;border-left:3px solid var(--agency)}
.af-bad{background:#fbeceb;border-left:3px solid var(--stamp)}
.af-ans span{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin-bottom:3px}
.af-good span{color:var(--agency)}
.af-bad span{color:var(--stamp)}

@media(max-width:1000px){.ic-key,.ic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ic-regs,.ic-needs{grid-template-columns:1fr}}
@media(max-width:700px){.ic-key,.ic-grid{grid-template-columns:1fr}.af-ans{grid-template-columns:1fr}.ic-verdict b{font-size:1.25rem}}

/* the plain-English legal notice under the quotation download buttons */
.qd-legal{margin:20px 0 0;padding:16px 18px;background:#f4f1e6;border:1px solid #e0d9c3;border-radius:8px}
.qd-legal h4{margin:0 0 10px;font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;color:#5d5a4e}
.qd-legal p{margin:0 0 9px;font-size:.86rem;line-height:1.55;color:#4a483f}
.qd-legal p:last-child{margin-bottom:0}
.qd-legal-more{padding-top:9px;border-top:1px solid #e0d9c3;font-size:.82rem!important}

/* ---------- shipment planner ---------- */
.pl-verdict{padding:16px 18px;border-radius:8px;margin:0 0 18px;border:1px solid}
.pl-verdict.bad{background:#a8322450;border-color:#8d2b1f;color:#fff;background:#a83224}
.pl-verdict.warn{background:#f3e6c6;border-color:#c9a33c;color:#4a3c14}
.pl-verdict.ok{background:#dcebe1;border-color:#2f7d55;color:#1c4a33}
.pl-vlab{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.95;margin-bottom:6px}
.pl-verdict b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.2rem;line-height:1.25;margin-bottom:6px}
.pl-verdict p{margin:0;font-size:.93rem;line-height:1.55}
.pl-list{display:flex;flex-direction:column;gap:0;margin:0 0 22px}
.pl-item{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line,#d9c9a0);align-items:start}
.pl-item:last-child{border-bottom:none}
.pl-item.past{opacity:.62}
.pl-date{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace}
.pl-date b{display:block;font-size:.88rem;font-weight:700;line-height:1.3}
.pl-date span{display:block;font-size:.72rem;opacity:.7}
.pl-body>b{font-family:"Zilla Slab",Georgia,serif;font-size:1.04rem;line-height:1.3}
.pl-body p{margin:.35em 0 0;font-size:.93rem;line-height:1.55}
.pl-who{font-weight:700;font-size:.85rem!important;opacity:.85}
.pl-tag{display:inline-block;margin-left:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:3px;background:#a83224;color:#fff;vertical-align:2px}
.pl-tag.late{background:#8a6a10}
.pl-item.hard .pl-date b{color:#a83224}
.pl-tool{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:.86rem;font-weight:700}
@media(max-width:560px){
  .pl-item{grid-template-columns:1fr;gap:6px}
  .pl-date{text-align:left}
  .pl-date b{display:inline}
  .pl-date span{display:inline;margin-left:8px}
}

/* ---------- printable checklists ---------- */
.ck-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 18px}
.ck-opt{text-align:left;background:#fdf8ec;border:1px solid #d9c9a0;border-radius:8px;padding:12px 14px;cursor:pointer;min-height:44px;font:inherit;color:inherit}
.ck-opt b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1rem;line-height:1.25;margin-bottom:3px}
.ck-opt span{display:block;font-size:.84rem;opacity:.75}
.ck-opt:hover{border-color:#1e6b4f}
.ck-opt.on{background:#1e6b4f;border-color:#1e6b4f;color:#fff}
.ck-opt.on span{opacity:.9}
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.ck-frame{background:#e8dcc0;padding:18px;border-radius:10px;margin:22px 0;overflow-x:auto}
.ckdoc{background:#fff;color:#26303b;max-width:800px;margin:0 auto;padding:34px 38px;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:.95rem;line-height:1.55}
.ck-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-bottom:3px solid #1e6b4f;padding-bottom:12px;margin-bottom:16px}
.ck-kicker{margin:0 0 2px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#b3402e;font-weight:700}
.ckdoc h2{font-family:"Zilla Slab",Georgia,serif;font-size:1.5rem;line-height:1.15;margin:0 0 4px}
.ck-who{margin:0;font-size:.9rem;opacity:.75}
.ck-meta{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;opacity:.65;white-space:nowrap}
.ck-meta span{display:block}
.ck-intro{margin:0 0 18px;font-size:.93rem;font-style:italic;opacity:.85}
.ck-group{margin:0 0 18px}
.ckdoc h3{font-family:"Zilla Slab",Georgia,serif;font-size:1.08rem;margin:0 0 2px;color:#1e6b4f}
.ck-blurb{margin:0 0 10px;font-size:.85rem;opacity:.72}
.ck-items{list-style:none;margin:0;padding:0}
.ck-items li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px dotted #ccc}
.ck-items li:last-child{border-bottom:none}
.ck-box{flex:0 0 auto;width:15px;height:15px;border:1.5px solid #26303b;border-radius:2px;margin-top:3px}
.ck-items b{font-size:.95rem}
.ck-tag{display:inline-block;margin-left:7px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:2px 6px;border-radius:3px;background:#e8dcc0;color:#5d5a4e;vertical-align:2px}
.ck-items p{margin:.25em 0 0;font-size:.86rem;line-height:1.5;opacity:.85}
.ck-done{display:inline-block;margin-top:5px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;opacity:.45}
.ck-note{margin:14px 0;padding:11px 14px;border-radius:5px;border-left:4px solid}
.ck-note h4{margin:0 0 4px;font-family:"Zilla Slab",Georgia,serif;font-size:.98rem}
.ck-note p{margin:0;font-size:.88rem;line-height:1.5}
.ck-note.stop{background:#f7e4e0;border-color:#b3402e}
.ck-note.time{background:#f3e6c6;border-color:#9a6a10}
.ck-note.check{background:#e4efe8;border-color:#1e6b4f}
.ck-foot{margin:18px 0 0;padding-top:10px;border-top:1px solid #ddd;font-size:.7rem;line-height:1.5;opacity:.6}
@media(max-width:620px){
  .ckdoc{padding:22px 20px}
  .ck-head{flex-direction:column;gap:8px}
  .ck-meta{text-align:left}
  .ck-meta span{display:inline;margin-right:12px}
}
@media print{
  #cf-print-host .ckdoc{max-width:none;width:100%;margin:0;padding:0;box-shadow:none;border-radius:0;font-size:10.4pt;line-height:1.42}
  #cf-print-host .ck-group,#cf-print-host .ck-note,#cf-print-host .ck-items li{page-break-inside:avoid}
  #cf-print-host .ck-head{page-break-after:avoid}
  #cf-print-host .ck-items li{padding:6px 0}
  #cf-print-host .ck-box{width:13px;height:13px}
}

/* container fit: units note and the per-container measurements */
.cf-units{margin:0 0 12px;padding:9px 12px;background:#f3e6c6;border-left:4px solid #9a6a10;border-radius:0 5px 5px 0;font-size:.86rem;line-height:1.5;color:#4a3c14}
.cb-fit th[scope="row"]{min-width:190px}
.cb-fit th[scope="row"] .cf-dims{display:block;margin-top:4px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;font-weight:400;line-height:1.5;opacity:.72;white-space:nowrap}


/* ============================================================
   Essay lists: a picture beside every essay, Title Case headings,
   and numbered pages instead of Newer / Older.
   ============================================================ */

/* The drawn tile used when an essay has no featured image yet. Upload one in
   WordPress and the real picture replaces this without any code change. */
.post-list .thumb-fb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:1200/630;min-height:104px;background:var(--tab);border:1px solid var(--line);border-radius:7px;text-decoration:none}
.post-list .thumb-fb .cf-icon{opacity:.85}
.post-list .thumb-fb-lab{font-family:"IBM Plex Mono",monospace;font-size:.63rem;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:0 8px}
.post-list .thumb-fb:hover{border-color:var(--agency)}


/* Headings are set in Title Case: the first letter of every word capitalised.
   Panels that deliberately run all in capitals, such as the footer columns and
   the quotation document, set their own rule and are not affected. */
h1,h2,h3,h4,.side-list a{text-transform:capitalize}

/* Numbered pagination */
.cf-pagination{margin:26px 0 6px}
.cf-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.cf-pagination a,.cf-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1rem;color:var(--ink);text-decoration:none}
.cf-pagination a:hover{border-color:var(--agency);color:var(--agency)}
.cf-pagination .current{background:var(--agency);border-color:var(--agency);color:#fdf8ec}
.cf-pagination .dots{border-color:transparent;background:transparent}
.pg-count{margin:10px 0 0;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:480px){.cf-pagination .pg-word{display:none}}

/* ============================================================
   Getting back out of an essay: breadcrumb at the top, previous
   and next plus a way back to the list at the bottom.
   ============================================================ */
.cf-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.cf-crumbs a{color:var(--agency);text-decoration:none}
.cf-crumbs a:hover{text-decoration:underline}
.cf-crumbs .here{color:var(--ink-soft)}
.cf-crumbs span[aria-hidden]{opacity:.6}

.cf-postnav{margin:34px 0 10px;padding-top:22px;border-top:2px solid var(--line)}
.cf-postnav>.btn{margin-bottom:18px}
.pn-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.pn:hover{border-color:var(--agency)}
.pn-lab{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);margin-bottom:6px}
.pn b{font-family:"Zilla Slab",Georgia,serif;font-size:1.06rem;line-height:1.25;display:block}
.pn-next{text-align:right}
@media(max-width:620px){.pn-pair{grid-template-columns:1fr}.pn-next{text-align:left}}

/* A link that leaves the site says so, with a small mark after it. Several of
   the carrier and government pages this site cites go down for days, and a
   reader who is not told they have left will read that failure as ours. */
.entry-content a[target="_blank"]::after,
.hint a[target="_blank"]::after,
.disclaimer a[target="_blank"]::after{content:"\2197";font-size:.8em;vertical-align:.25em;margin-left:2px;opacity:.75}
.entry-content a[target="_blank"],.hint a[target="_blank"],.disclaimer a[target="_blank"]{white-space:normal}

/* The issued quotation: charges grouped by where they happen. A client who can
   see origin, main carriage, destination and duty as separate blocks can check
   a price instead of only reading the bottom line. */
.qd-chg tr.qd-grp th{background:var(--qa);color:#fff;text-align:left;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px}
.qd-chg tr.qd-grp .qd-when{float:right;font-weight:400;opacity:.85;letter-spacing:.06em;text-transform:none}
.qd-chg tr.qd-sub td{font-weight:700;border-top:1px solid var(--line);background:rgba(0,0,0,.03)}
@media print{.qd-chg tr.qd-grp{break-inside:avoid}.qd-chg tr.qd-grp th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* A line shown at cost earns nothing, so it shows no margin percentage. */
.l-atcost{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
/* On the issued quotation, the two halves of the money are kept apart. */
.qd-cost{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-left:6px;white-space:nowrap}
.qd-chg tfoot tr.qd-half th{font-weight:600;border-top:1px solid var(--line);background:transparent;font-size:.95rem}
.qd-passnote{margin:8px 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.5}
@media(max-width:1100px){.calc .qline select.l-kind{font-size:.8rem}}

/* ============================================================
   The packing list, the HS suggestion and the tax rows.
   ============================================================ */
.pk-wrap{border:1px dashed var(--line);border-radius:10px;padding:14px 16px;margin:0 0 18px;background:rgba(255,255,255,.35)}
.pk-h{font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);margin:0 0 6px}
.pk-head,.pkline{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 62px 62px 70px 78px 26px;gap:6px;align-items:center}
.pk-head{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:6px 0 4px;border-bottom:1px solid var(--line)}
.pkline{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .pkline input{padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:.9rem;color:var(--ink);width:100%;min-width:0}
.calc .pkline input:not(.p-desc){text-align:right;font-variant-numeric:tabular-nums}
.p-cbm{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-soft);text-align:right;white-space:nowrap}
.pk-tot{margin-top:12px;font-size:1.02rem}
.pk-note{display:block;font-size:.82rem;color:var(--ink-soft);font-weight:400;margin-top:4px}
input.from-pack{background:var(--tab)!important;color:var(--ink-soft)!important}

.hs-box{margin-top:14px;border:1px solid var(--line);border-left:4px solid var(--agency);border-radius:8px;padding:12px 14px;background:var(--card)}
.hs-list{list-style:none;padding:0;margin:0}
.hs-list li{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-top:1px dashed var(--line)}
.hs-list code{font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--agency);font-weight:600}
.hs-list .hs-d{font-size:.92rem}
.hs-list .hs-r{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--stamp);white-space:nowrap;font-weight:600}

.tx-head,.txline{display:grid;grid-template-columns:minmax(0,1fr) 84px 250px 26px;gap:7px;align-items:center}
.tx-head{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:6px 0 4px;border-bottom:1px solid var(--line)}
.txline{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .txline input,.calc .txline select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:.9rem;color:var(--ink);width:100%;min-width:0}
.calc .txline input.t-rate{text-align:right;font-variant-numeric:tabular-nums}

.l-taxwrap{display:flex;align-items:center;gap:4px;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.l-taxwrap input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--agency)}

@media(max-width:860px){
  .pk-head{display:none}
  .pkline{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"desc desc desc" "pcs l w" "h kg cbm" "del del del";gap:6px;padding:10px 0}
  .pkline .p-desc{grid-area:desc}.pkline .p-pcs{grid-area:pcs}.pkline .p-l{grid-area:l}
  .pkline .p-w{grid-area:w}.pkline .p-h{grid-area:h}.pkline .p-kg{grid-area:kg}
  .pkline .p-cbm{grid-area:cbm;text-align:left;align-self:center}
  .pkline .band-del{grid-area:del;justify-self:end}
  .tx-head{display:none}
  .txline{grid-template-columns:1fr 1fr;grid-template-areas:"name rate" "base base" "del del";gap:6px;padding:10px 0}
  .txline .t-name{grid-area:name}.txline .t-rate{grid-area:rate}.txline .t-base{grid-area:base}
  .txline .band-del{grid-area:del;justify-self:end}
  .hs-list li{grid-template-columns:1fr;gap:2px}
}

/* Currencies, the quick-add list, validity buttons and remarks. */
.fx-head,.fxline{display:grid;grid-template-columns:110px minmax(0,1fr) 26px;gap:8px;align-items:center}
.fx-head{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:6px 0 4px;border-bottom:1px solid var(--line)}
.fxline{padding:6px 0;border-bottom:1px dashed var(--line)}
.calc .fxline input{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:.92rem;color:var(--ink);width:100%;min-width:0}
.calc .fxline input.f-code{text-transform:uppercase;font-family:"IBM Plex Mono",monospace;font-weight:600}
.calc .fxline input.f-rate{text-align:right;font-variant-numeric:tabular-nums}
.fx-base .f-baselab{font-size:.86rem;color:var(--ink-soft)}
.fx-warn{margin:10px 0 0;font-size:.9rem;color:var(--stamp)}
.fx-warn .stamp{margin-right:8px}
.fx-warn:empty{display:none}

.qa-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.calc .qa-row select{flex:1 1 320px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--card);font:inherit;color:var(--ink);min-width:0}

.val-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.val-wrap input[type=date]{flex:0 1 220px}
.val-quick{display:flex;gap:6px;flex-wrap:wrap}
.val-quick button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:.86rem;cursor:pointer;min-height:38px}
.val-quick button:hover{border-color:var(--agency);color:var(--agency)}

.calc textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--card);font:inherit;font-size:.96rem;color:var(--ink);line-height:1.5;resize:vertical}

.qd-src{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-soft);margin-left:8px;white-space:nowrap}
.qd-remarks p{margin:0 0 8px;font-size:.94rem;line-height:1.55}
@media(max-width:860px){
  .fx-head{display:none}
  .fxline{grid-template-columns:1fr 1fr;grid-template-areas:"code rate" "del del";gap:6px;padding:10px 0}
  .fxline .f-code{grid-area:code}.fxline .f-rate{grid-area:rate}
  .fxline .f-baselab{grid-area:rate;font-size:.8rem}
  .fxline .band-del{grid-area:del;justify-self:end}
}

/* A note the user typed against one charge, printed under it. */
.qd-lnote{display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin-top:3px;max-width:60ch}

/* ============================================================
   The Quotation Builder keeps its explanations out of the way.
   Every field's note hides behind a small green question mark and
   appears while the pointer is on it, or after a tap on a phone.
   It floats above the form rather than pushing it around, because
   a layout that jumps while you read it is worse than clutter.
   Only this page behaves this way: the teaching calculators keep
   their explanations on show.
   ============================================================ */
.quote-tool .hint-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin-left:7px;border:1.5px solid var(--agency);background:var(--paper);color:var(--agency);border-radius:50%;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:700;line-height:1;cursor:help;
  vertical-align:middle;flex:none;padding:0;min-height:0}
.quote-tool .hint-btn:hover,.quote-tool .hint-btn:focus-visible{background:var(--agency);color:#fdf8ec}
.quote-tool .calc .row > label{position:relative;display:block}
.quote-tool .calc .row > label > .hint{
  position:absolute;left:0;top:100%;z-index:60;display:none;width:min(430px,82vw);margin-top:7px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--agency);border-radius:9px;
  padding:11px 14px;box-shadow:0 10px 30px rgba(38,48,59,.18);font-size:.88rem;line-height:1.5;
  font-weight:400;color:var(--ink)}
/* The full path is repeated on purpose: the rule that hides the note is four
   classes deep, so a shorter selector here would lose to it and the hover
   would silently do nothing. */
.quote-tool .calc .row > label > .hint-btn:hover + .hint,
.quote-tool .calc .row > label > .hint-btn:focus + .hint,
.quote-tool .calc .row.open > label > .hint{display:block}

/* The longer notes that introduce a whole block fold behind one line. */
.quote-tool .hint-fold{margin:0 0 10px}
.quote-tool .hint-fold > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--agency);font-weight:600;padding:3px 0}
.quote-tool .hint-fold > summary::-webkit-details-marker{display:none}
.quote-tool .hint-fold > summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:1.5px solid var(--agency);border-radius:50%;font-size:.7rem;flex:none}
.quote-tool .hint-fold[open] > summary::before{background:var(--agency);color:#fdf8ec}
.quote-tool .hint-fold > .hint{margin:8px 0 0;padding-left:27px}

@media(max-width:700px){
  .quote-tool .hint-btn{width:28px;height:28px;font-size:.8rem;cursor:pointer}
  .quote-tool .calc .row > label > .hint{width:min(430px,86vw)}
}

/* What the service and the trade term just loaded, and why. */
.preset-note{margin:10px 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.preset-note:empty{display:none}
.preset-note b{color:var(--ink)}
.preset-note .stamp{margin-right:8px}
.preset-note .band-add{margin-left:8px;vertical-align:middle}
/* The term explanation now sits in step 2, where it can still breathe. */
.quote-tool #q-who .term-info{margin-top:4px}

/* ============================================================
   Quotation Builder: the two long explainers fold at every width,
   and Step 6 shows a mark and a title with the reason behind it.
   ============================================================ */
.quote-tool .explain-col.collapsible > .collapse-body{display:none}
.quote-tool .explain-col.collapsible.open > .collapse-body{display:block}
.quote-tool .explain-col > .collapse-toggle{cursor:pointer;position:relative;padding-right:34px!important;margin-bottom:0}
.quote-tool .explain-col > .collapse-toggle::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--agency);border-bottom:2.5px solid var(--agency);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.quote-tool .explain-col.collapsible.open > .collapse-toggle::after{transform:translateY(-30%) rotate(225deg)}
.quote-tool .explain-col > .collapse-toggle:hover{color:var(--agency)}

/* Step 6: the reason opens on a click, and only failed rows have one. */
.chk .chk-why{display:none}
.chk.is-openable{cursor:pointer;position:relative;padding-right:28px}
.chk.is-openable::after{content:"";position:absolute;right:10px;top:16px;width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);transition:transform .15s}
.chk.no.is-openable::after{color:var(--stamp)}
.chk.yes.is-openable::after{color:var(--agency)}
.chk.is-openable.open::after{transform:translateY(-50%) rotate(225deg)}
.chk.no.is-openable:hover{border-color:var(--stamp)}
.chk.yes.is-openable:hover{border-color:var(--agency)}
/* A passed row sits back, but not so far that its arrow looks broken. */
.chk.yes{opacity:.82}
.chk.yes.open{opacity:1}
.chk.is-openable.open .chk-why{display:block}
.chk.is-openable:focus-visible{outline:2px solid var(--agency);outline-offset:2px}

/* The exclusions field with its one-click standard list beside it. */
.excl-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.excl-wrap input{flex:1 1 320px;min-width:0}

/* ============================================================
   The Quotation Builder shell: tabs, rail, folding, filter
   ------------------------------------------------------------
   Four tabs for the four jobs that are genuinely separate, and a rail rather
   than tabs for the six steps of the one job, because quoting is not linear
   and hiding Step 2 while somebody prices Step 4 helps nobody.

   Everything here degrades: with no JavaScript the tab panels are never
   hidden, the rail is an ordinary list of anchor links, and nothing folds.
   ============================================================ */
.qshell{margin-top:18px}

/* ---------- the tab strip ---------- */
.qtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding:0 2px;
  position:sticky;top:var(--qrail-top,0px);z-index:31;background:var(--paper)}
.qtab{appearance:none;border:1px solid transparent;border-bottom:0;background:transparent;
  font-family:"Zilla Slab",Georgia,serif;font-size:1.02rem;color:var(--ink-soft);
  padding:10px 16px 9px;border-radius:10px 10px 0 0;cursor:pointer;position:relative;top:2px;
  display:inline-flex;align-items:center;gap:7px;line-height:1.1}
.qtab:hover{color:var(--ink);background:var(--tab)}
.qtab.on{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:700}
.qtab:focus-visible{outline:3px solid var(--agency);outline-offset:2px}
.qtab-n{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--tab);color:var(--ink-soft);font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.72rem;font-weight:700;align-items:center;justify-content:center}
.qtab-n:not(:empty){display:inline-flex}
.qtab-n.ok{background:#dff0e6;color:#1a5c3c}
.qtab-n.warn{background:#fbe9c9;color:#8a5a00}
.qtab-n.dot{background:transparent;color:var(--stamp);font-size:1.4rem;padding:0;min-width:12px}
.qtab-panel{padding-top:6px}
.qtab-panel:focus{outline:none}

/* ---------- the rail ---------- */
.qrail{position:sticky;top:calc(var(--qrail-top,0px) + var(--qtabs-h,0px));z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);margin:0 0 6px;
  box-shadow:0 6px 10px -8px rgba(38,48,59,.28)}
.qrail-in{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:thin;padding:7px 0}
.qrail a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 11px;border-radius:999px;text-decoration:none;color:var(--ink-soft);font-size:.9rem}
.qrail a b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--tab);color:var(--ink-soft);font-size:.74rem;font-weight:700}
.qrail a:hover{background:var(--tab);color:var(--ink)}
.qrail a.here{background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700}
.qrail a.here b{background:var(--agency);color:#fff}
.qrail a:focus-visible{outline:3px solid var(--agency);outline-offset:2px}
.qrail-sp{flex:1 1 auto;min-width:8px}
.qrail-undo{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  border-radius:999px;padding:5px 13px;font-size:.84rem;cursor:pointer;white-space:nowrap}
.qrail-undo:hover{color:var(--ink);border-color:var(--ink-soft)}
.qrail-tot{white-space:nowrap;font-size:.9rem;display:flex;align-items:baseline;gap:8px;padding-left:10px}
.qrt-amt{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1.02rem;color:var(--ink)}
.qrt-m{font-size:.8rem;color:var(--ink-soft)}
.qrail-tot.low .qrt-amt,.qrail-tot.low .qrt-m{color:var(--stamp)}
.qrt-none{font-size:.82rem;color:var(--ink-soft);font-style:italic}
.qrt-flash{font-size:.84rem;color:var(--agency);font-weight:600}

/* ---------- folding a step ---------- */
.qfold-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qfold-head h3{margin:0}
.qfold-btn{appearance:none;border:0;background:transparent;color:var(--ink-soft);
  font-size:.82rem;cursor:pointer;padding:4px 6px;border-radius:6px;white-space:nowrap}
.qfold-btn:hover{background:var(--tab);color:var(--ink)}
.qfold-btn:focus-visible{outline:3px solid var(--agency);outline-offset:2px}
.qfold-sum{display:none;margin:6px 0 0;font-size:.92rem;color:var(--ink-soft);cursor:pointer}
.calc.qfolded .qfold-body{display:none}
.calc.qfolded{padding-bottom:16px}
.calc.qfolded .qfold-sum{display:block}
.calc.qfolded .qfold-sum:hover{color:var(--ink)}

/* ---------- the charge filter ---------- */
.qfilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.qfilter input[type=search]{flex:1 1 240px;min-width:0;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:.94rem;color:var(--ink)}
.qfilter-n{font-size:.82rem;color:var(--ink-soft)}
.qfilter-n.on{color:var(--stamp);font-weight:700}
.qfilter-chips{display:flex;gap:4px}
.qfilter-chips button{appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);border-radius:999px;padding:5px 12px;font-size:.82rem;cursor:pointer}
.qfilter-chips button:hover,.qfilter-chips button.on{background:var(--tab);color:var(--ink)}
.qline.qhide{display:none}
.lines.filtered{border-left:3px solid var(--stamp);padding-left:8px;margin-left:-11px}

/* ---------- the first visit ---------- */
.qempty{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--agency);
  border-radius:12px;padding:18px 20px;margin:12px 0 20px}
.qempty h4{margin:0 0 .4em;font-size:1.15rem}
.qempty p{margin:.5em 0;font-size:.98rem}
.qempty-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.qempty-note{font-size:.84rem!important;color:var(--ink-soft)}

/* ---------- phones ----------
   A charge line is eight controls wide on a desktop. On a phone that has to
   become two readable rows rather than eight columns squeezed to nothing,
   because a 34-pixel-wide box holding a freight rate is how a wrong number
   gets typed and never noticed. */
@media (max-width:640px){
  .qtabs{gap:2px}
  .qtab{padding:9px 11px;font-size:.94rem;flex:1 1 auto;justify-content:center}
  .qrail-in{padding:6px 0}
  .qrail a span{display:none}
  .qrail a{padding:6px 9px}
  .qrail a.here span{display:inline}
  .qrail-tot{padding-left:6px}
  .qrt-m{display:none}
  .qfilter input[type=search]{flex:1 1 100%}
  .qempty{padding:15px 16px}
}
@media print{
  .qtabrow,.qtabs,.qrail,.qfilter,.qempty,.qclient-bar,.imp,.imp-open{display:none!important}
  .qtab-panel[hidden]{display:none!important}
  .calc.qfolded .qfold-body{display:block!important}
  .calc.qfolded .qfold-sum{display:none!important}
}

/* ---------- the tool page owns its own header ----------
   The site header is sticky everywhere on this site, and on a phone it stacks
   the portrait, the strapline and five nav buttons into 229 pixels: nearly a
   third of the screen, before the tool's own two bars. On a page you read that
   is a fair trade. On a page you WORK in, for twenty minutes, it is not. So on
   this page alone the site header scrolls away like ordinary content, and the
   sticky space goes to the tabs and the step rail, which are what you actually
   need while you are pricing. */
body.cf-quote-page .site-header{position:static}

/* ---------- the charge row on a phone ----------
   A charge line is eight controls wide. Squeezed onto a phone it became four
   stacked rows per charge, and a preset of forty charges was a page you could
   scroll for a minute without reaching the bottom.

   So on a narrow screen a charge shows only what you read at a glance: what it
   is, what it comes to, and the margin. The group, the unit, the rate boxes,
   the printed note and the private "where this rate came from" box appear when
   you tap into the line and fold away again when you leave it. That is done
   with :focus-within and no JavaScript at all, which matters because these
   rows are redrawn constantly and anything hung off them by hand would have to
   be hung again on every redraw. */
@media(max-width:700px){
  .qline{grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:"desc desc del" "ccy cost mk" "sell prof mar";
    gap:6px;padding:10px 0}
  .qline .l-desc{grid-area:desc}
  .qline .l-ccy{grid-area:ccy}
  .qline .l-cost{grid-area:cost}
  .qline .l-mk{grid-area:mk}
  .qline .l-sell{grid-area:sell}
  .qline .l-prof{grid-area:prof;align-self:center;text-align:left}
  .qline .l-mar{grid-area:mar;align-self:center;text-align:right}
  .qline .band-del{grid-area:del;justify-self:end;align-self:center}
  .qline .l-meta,.qline .l-two,.qline .l-rate{grid-area:auto;grid-column:1 / -1;display:none}
  .qline:focus-within .l-meta{display:flex}
  .qline:focus-within .l-two{display:grid}
  .qline:focus-within .l-rate:not([hidden]){display:flex}
  .qline:focus-within{background:var(--card);border-radius:10px;padding:10px;
    box-shadow:0 0 0 1px var(--line);
    grid-template-areas:"desc desc del" "lab lab lab" "ccy cost mk" "sell prof mar"}
  /* The column headings are long gone at this width, so a line you have opened
     says what its three number boxes are, above them rather than below. */
  .qline:focus-within::before{content:"currency · buying · mark % , then selling";
    grid-area:lab;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:700}
  /* One row of tabs that scrolls sideways, never two rows that steal a third
     of the screen. */
  .qtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .qtabs::-webkit-scrollbar{display:none}
  .qtab{flex:0 0 auto}
}

/* ---------- cargo that is not ordinary cargo ----------
   Off by default and out of the way, because most shipments are neither
   dangerous nor temperature controlled, and a form that asks every forwarder
   about lithium batteries on every quotation is a form people stop reading. */
.sp-cargo{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.sp-tick{display:block;margin:10px 0 0;cursor:pointer;font-size:.98rem}
.sp-tick input{margin-right:8px;transform:translateY(1px)}
.sp-why{display:block;margin:2px 0 0 26px;font-size:.86rem;color:var(--ink-soft)}
.sp-box{margin:10px 0 4px 26px;padding:14px 16px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--stamp);border-radius:0 10px 10px 0}
.sp-box[hidden]{display:none}
.sp-note{margin:0 0 12px;font-size:.9rem;color:var(--ink-soft)}
.qd-dg{font-weight:600}
@media(max-width:640px){.sp-box{margin-left:0}.sp-why{margin-left:0}}

/* ---------- client mode ----------
   One switch that takes every figure of your own off the screen, so the laptop
   can be turned round. It hides; it does not delete, and it is not a lock. The
   banner says both, because somebody who believes this deleted their costs, or
   that it stops a determined reader, has been misled by their tools. */
.qtabrow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding:0 2px;
  position:sticky;top:var(--qrail-top,0px);z-index:31;background:var(--paper)}
.qtablist{display:flex;gap:4px;flex-wrap:wrap;flex:1 1 auto}
.qclient-btn{appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);border-radius:999px;padding:6px 14px;font-size:.84rem;
  cursor:pointer;margin-bottom:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.qclient-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.qclient-btn[aria-pressed=true]{background:var(--agency);border-color:var(--agency);color:#fff}
.qcb-eye{font-size:.9rem;line-height:1}
.qclient-bar{background:#dff0e6;border:1px solid #9ec9b2;border-left:5px solid var(--agency);
  border-radius:10px;padding:13px 16px;margin:12px 0 4px;font-size:.92rem;line-height:1.5}
.qclient-bar b{color:#14523a}
.qclient-bar button{margin-left:8px}

.q-client .l-cost,.q-client .l-mk,.q-client .l-prof,.q-client .l-mar,
.q-client .l-rf-buy,.q-client .l-src,
.q-client #q_margin,.q-client .margin-panel{display:none!important}
/* The row loses three of its eight columns, so it is re-laid rather than left
   with three empty gaps where the money used to be. */
.q-client .qline-head,.q-client .qline{
  grid-template-columns:minmax(200px,2.4fr) 88px minmax(120px,.9fr) 24px}
.q-client .qline-head span:nth-child(3),
.q-client .qline-head span:nth-child(4),
.q-client .qline-head span:nth-child(6),
.q-client .qline-head span:nth-child(7){display:none}
.q-client .l-two{grid-template-columns:1fr}
.q-client #q_floor,.q-client label[for=q_floor]{display:none}
.q-client .row:has(#q_floor){display:none}
.qask{margin-top:20px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--agency);border-radius:0 12px 12px 0;padding:16px 20px}
.qask[hidden]{display:none}
.qask h4{margin:0 0 .5em;font-size:1.1rem}
.qask ol{margin:0;padding-left:20px}
.qask li{margin:.5em 0;font-size:.96rem}
.qask-note{margin:.9em 0 0;font-size:.88rem;color:var(--ink-soft)}
@media(max-width:700px){
  .qtabrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;align-items:center}
  .qtabrow::-webkit-scrollbar{display:none}
  .qtablist{flex-wrap:nowrap}
  .qclient-btn{margin-bottom:0;flex:0 0 auto}
  .q-client .qline{grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:"desc desc del" "ccy sell sell"}
}

/* ---------- pasting charges in from a spreadsheet ---------- */
.imp-open{margin-left:auto}
.imp{margin:14px 0 6px;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--agency);border-radius:0 12px 12px 0}
.imp[hidden]{display:none}
.imp h4{margin:0 0 .4em;font-size:1.1rem}
.imp-lead{margin:.4em 0;font-size:.92rem;color:var(--ink-soft)}
.imp textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--ink);
  margin-top:8px;resize:vertical}
.imp-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.imp-h{margin:16px 0 .2em;font-family:"Zilla Slab",Georgia,serif;font-size:1rem;font-weight:700}
.imp-scroll{overflow-x:auto;margin-top:8px}
.imp-tbl{font-size:.82rem;background:var(--paper);min-width:100%}
.imp-tbl th{padding:6px;vertical-align:top;background:var(--tab)}
.imp-tbl td{padding:5px 7px;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.imp-tbl select{width:100%;min-width:150px;padding:5px 7px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);font:inherit;font-size:.8rem;color:var(--ink)}
.imp-was{display:block;margin-top:3px;font-size:.7rem;color:var(--ink-soft);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-more{margin:6px 0 0;font-size:.82rem;color:var(--ink-soft)}
.imp-sum{margin:12px 0 0;padding:10px 13px;background:var(--code-bg);border-radius:8px;font-size:.9rem}
.imp-go{margin-top:12px}
.imp-msg{margin:10px 0 0;font-size:.9rem}
.imp-msg.ok{color:var(--agency);font-weight:600}
.imp-msg.bad{color:var(--stamp);font-weight:600}

/* ---------- what this does that a template does not ---------- */
/* Every page top used to carry style="padding-bottom:10px" inline, on all
   nineteen of them. Once a page is built from blocks there is nowhere to put
   an inline style, and a rule is the right home for it anyway. */
.hero.hero-wide{padding-bottom:10px}

.diff{margin:34px 0 0}
.diff h2{margin:0 0 .3em}
.diff-lede{margin:0 0 20px;font-size:1.05rem;color:var(--ink-soft);max-width:70ch}
/* Ten cards was a wall of text. Each one is now a <details>, so the section
   reads as ten headings you can scan, and you open the two that apply to you.
   Native HTML, no script, which matters because this page forbids inline
   JavaScript.

   The columns stay, because ten collapsed headings in one column is almost as
   tall as the ten open cards were, which would have defeated the point. The
   trouble with a grid is that a row is as tall as its tallest card, so an open
   card would punch empty holes beside it. So an open card takes the whole row
   to itself, and grid-auto-flow:dense pulls the later closed cards back into
   any space that leaves. Nothing ever shows a hole. */
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;
  align-items:start;grid-auto-flow:dense}
.diff-card[open]{grid-column:1/-1}
.diff-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;transition:border-color .18s ease}
.diff-card[open]{border-color:var(--agency)}
.diff-card > summary{display:flex;align-items:flex-start;gap:14px;cursor:pointer;list-style:none;
  min-height:28px}
.diff-card > summary::-webkit-details-marker{display:none}
.diff-card > summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin:.36em 2px 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;
  transform:rotate(45deg);opacity:.45;transition:transform .18s ease,opacity .18s ease}
.diff-card[open] > summary::after{transform:rotate(-135deg);margin-top:.52em;opacity:.85}
.diff-card > summary:hover::after{opacity:.9}
.diff-card > summary:focus-visible{outline:2px solid var(--agency);outline-offset:4px;border-radius:7px}
.diff-card h3{margin:0;font-size:1.06rem;flex:0 1 auto}
.diff-card p{margin:.7em 0 2px;font-size:.95rem;color:var(--ink-soft);line-height:1.6;max-width:78ch}
.diff-foot{margin:20px 0 0;padding:13px 16px;background:var(--code-bg);border-radius:10px;
  font-size:.98rem}
@media(max-width:640px){.diff-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.diff-card > summary::after{transition:none}}
/* Closed cards would print as ten bare headings. This page's print path is the
   quotation document, not the sales copy, so the section stays off the paper. */
@media print{.diff{display:none}}

/* Import or export switch, and the badges on the prohibition lists. */
.ic-mode{display:flex;flex-wrap:wrap;gap:8px 22px;margin:4px 0 0}
.ic-mode label{display:flex;align-items:center;gap:8px;font-size:1rem;cursor:pointer}
.ic-mode input{width:18px;height:18px;accent-color:var(--agency)}
.ic-item .ic-lv{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin:6px 0 2px;color:#fff}
.ic-item .ic-lv.lv-ban{background:var(--stamp)}
.ic-item .ic-lv.lv-cond{background:#b8791f}
.ic-item .ic-hs{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-soft);word-break:break-word}

/* Prohibited-import warnings in the duty calculator. */
.ban-banner{margin:6px 0 18px;padding:14px 18px;border-radius:0 10px 10px 0;border:1px solid var(--line);border-left:6px solid var(--stamp);background:#fbeae6}
.ban-banner.is-warn{border-left-color:#b8791f;background:#fdf4e6}
.ban-banner[hidden]{display:none}
.ban-banner b{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.15rem}
.ban-banner p{margin:.45em 0 0;font-size:.95rem}
.ban-banner .ban-note{font-weight:600}
.ban-banner .ban-hs{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-soft);word-break:break-word}
.ban-banner .ban-src{font-size:.8rem;color:var(--ink-soft)}
.hs-warn{margin-top:10px;padding:10px 14px;border-left:5px solid #b8791f;background:#fdf4e6;border-radius:0 8px 8px 0;font-size:.95rem}
.hs-warn[hidden]{display:none}
.hs-flag.flag-w{background:#b8791f;color:#fff;border-color:#b8791f}