/* UnisunPack — site stylesheet
   Design tokens first, then layout primitives, then components. */

:root{
  --ink:#0d1b2a;
  --ink-2:#25384d;
  --muted:#5d6b7a;
  --line:#e3e8ee;
  --line-2:#eef1f5;
  --bg:#ffffff;
  --bg-alt:#f6f8fa;
  --brand:#1268ab;
  --brand-d:#0e4e80;
  --brand-l:#ecf3f8;
  --kraft:#a35718;
  --kraft-l:#fbf1e6;
--radius:14px;
  --radius-s:9px;
  --maxw:1220px;
  --shadow-s:0 1px 2px rgba(13,27,42,.06),0 4px 14px -8px rgba(13,27,42,.16);
  --shadow-m:0 2px 4px rgba(13,27,42,.05),0 18px 40px -22px rgba(13,27,42,.28);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16.5px;line-height:1.7;color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-d)}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.18;letter-spacing:-.018em;font-weight:700}
h1{font-size:clamp(2rem,4.2vw,3.1rem)}
h2{font-size:clamp(1.55rem,2.7vw,2.2rem)}
h3{font-size:1.2rem}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
strong{color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.sec{padding-block:clamp(56px,7vw,96px)}
.sec--alt{background:var(--bg-alt);border-block:1px solid var(--line-2)}
.sec--tight{padding-block:clamp(40px,5vw,64px)}
.sechead{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}
.sechead--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:.7em}
.lead{font-size:1.09rem;color:var(--muted);margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px}

/* Inline icon safety net: an <svg> without explicit size would default to 300x150
   and blow the layout apart. Any inline icon inherits the surrounding text size. */
svg{flex:none}
p svg,li svg,span svg,h1 svg,h2 svg,h3 svg,blockquote svg,summary svg,label svg{width:1.05em;height:1.05em;vertical-align:-.14em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:1rem;line-height:1;
  padding:15px 26px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;transition:.18s ease;text-align:center}
.btn svg{width:17px;height:17px;flex:none}
.btn--p{background:var(--brand);color:#fff}
.btn--p:hover{background:var(--brand-d);color:#fff;transform:translateY(-1px)}
.btn--k{background:var(--brand);color:#fff}
.btn--k:hover{background:var(--brand-d);color:#fff;transform:translateY(-1px)}
.btn--o{border-color:var(--line);background:#fff;color:var(--ink)}
.btn--o:hover{border-color:var(--brand);color:var(--brand)}
.btn--g{border-color:rgba(255,255,255,.42);color:#fff}
.btn--g:hover{background:rgba(255,255,255,.13);color:#fff}
.btn--sm{padding:11px 18px;font-size:.92rem}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#c8d4e0;font-size:.82rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;min-height:40px;padding-block:7px}
.topbar a{color:#eaf1f8}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar b{color:#fff;font-weight:600}
.topbar ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.topbar li{margin:0;display:flex;align-items:center;gap:7px}
.topbar svg{width:14px;height:14px;color:#94bbd9}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:26px;min-height:74px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.24rem;color:var(--ink);letter-spacing:-.03em;flex:none}
.logo:hover{color:var(--ink)}
.logo .mark{width:36px;height:36px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:800}
.logo small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:-3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>.ni{position:relative}
.nav a.nl{display:flex;align-items:center;gap:5px;padding:10px 13px;border-radius:9px;font-size:.95rem;font-weight:600;color:var(--ink)}
.nav a.nl:hover{background:var(--bg-alt);color:var(--brand)}
.nav .ni:hover>a.nl,.nav .ni:focus-within>a.nl{background:var(--bg-alt);color:var(--brand)}
.nav a.nl::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.nav .ni--plain a.nl::after{display:none}
.dd{position:absolute;top:calc(100% + 10px);left:0;min-width:276px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-m);padding:9px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease}
.nav .ni:hover>.dd,.nav .ni:focus-within>.dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:10px 13px;border-radius:var(--radius-s);font-size:.93rem;color:var(--ink-2)}
.dd a:hover{background:var(--brand-l);color:var(--brand-d)}
.dd a b{display:block;font-size:.94rem;color:var(--ink);font-weight:650}
.dd a span{font-size:.79rem;color:var(--muted)}
.dd hr{border:0;border-top:1px solid var(--line-2);margin:7px 4px}
.hdr .cta{margin-left:6px;flex:none}
.navtog{display:none}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.78}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,20,33,.94) 0%,rgba(9,20,33,.80) 44%,rgba(9,20,33,.30) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(62px,8vw,112px)}
.hero h1{color:#fff;max-width:20ch;margin-bottom:.6em}
.hero p.hl{font-size:1.12rem;color:#e3edf5;max-width:60ch;margin-bottom:1.6em}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  padding:7px 15px;border-radius:99px;font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:22px;color:#e8f1fa}
.hero--sm .wrap{padding-block:clamp(34px,4.5vw,58px)}
.hero--sm h1{font-size:clamp(1.75rem,3.2vw,2.5rem);max-width:none}

.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.trustbar div{background:#fff;padding:22px 24px;display:flex;gap:13px;align-items:flex-start}
.trustbar svg{width:22px;height:22px;color:var(--brand);flex:none;margin-top:3px}
.trustbar b{display:block;font-size:.97rem;color:var(--ink)}
.trustbar span{font-size:.85rem;color:var(--muted);line-height:1.5}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:24px}
/* grid and flex children default to min-width:auto, so a wide child (a spec table,
   a long button label) would stretch its column past the viewport on phones.
   Reset it and let the child scroll inside its own track instead. */
.grid>*,.split>*,.pl>*,.trustbar>*,.ft .cols>*{min-width:0}
.tablewrap{max-width:100%}
.icard .btn{max-width:100%;white-space:normal}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  transition:.2s ease;box-shadow:var(--shadow-s)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:#cfdae6}
/* B: 卡片图完整显示（不再 cover 裁切）——白底 + 统一内边距 */
.card .ph{aspect-ratio:4/3;overflow:hidden;background:#fff}
.card .ph img{width:100%;height:100%;object-fit:contain;padding:10px;transition:.4s ease}
.card:hover .ph img{transform:scale(1.045)}
.card .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.4em;font-size:1.13rem}
.card p{font-size:.93rem;color:var(--muted);margin-bottom:1em}
.card .more{margin-top:auto;font-size:.9rem;font-weight:650;display:inline-flex;align-items:center;gap:6px}
.card .more svg{width:15px;height:15px;transition:.2s}
.card:hover .more svg{transform:translateX(3px)}
.card .tag{position:absolute;top:12px;left:12px;background:rgba(13,27,42,.82);color:#fff;font-size:.72rem;font-weight:650;
  padding:5px 11px;border-radius:99px;letter-spacing:.03em}
.card .ph{position:relative}

.icard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.2s}
.icard:hover{border-color:var(--brand);box-shadow:var(--shadow-s)}
.icard .ic{width:44px;height:44px;border-radius:11px;background:var(--brand-l);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.icard .ic svg{width:22px;height:22px}
.icard h3{font-size:1.05rem;margin-bottom:.35em}
.icard p{font-size:.91rem;color:var(--muted);margin:0}

.checks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;margin:0}
.checks svg{width:19px;height:19px;color:var(--brand);flex:none;margin-top:3px}
.checks--2{grid-template-columns:repeat(2,1fr);gap:11px 26px}

.steps{counter-reset:s;display:grid;gap:20px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.step h3{margin-bottom:.25em;font-size:1.03rem}
.step p{margin:0;font-size:.93rem;color:var(--muted)}

.quote{border-left:3px solid var(--brand);padding:4px 0 4px 20px;margin:0 0 18px}
.quote p{font-size:1rem;font-style:italic;color:var(--ink-2);margin-bottom:.7em}
.qwho{display:flex;align-items:center;gap:12px}
.qwho img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.qwho b{display:block;font-size:.92rem;color:var(--ink)}
.qwho span{font-size:.82rem;color:var(--muted)}

/* ---------- spec table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.spec{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
table.spec caption{text-align:left;padding:16px 20px 0;font-weight:700;color:var(--ink)}
table.spec th,table.spec td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
table.spec th{width:34%;font-weight:650;color:var(--ink);background:var(--bg-alt)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal a{display:block;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:#fff;position:relative}
/* B: REFERENCE WORK 相册图完整显示（不再 cover 裁切） */
.gal img{aspect-ratio:1/1;object-fit:contain;background:#fff;padding:10px;width:100%;transition:.3s}
.gal a:hover img{transform:scale(1.05)}
.gal a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--brand);transition:.2s}
.gal--wide{grid-template-columns:repeat(3,1fr)}
.gal--wide img{aspect-ratio:4/3}

/* product page hero gallery */
.pgal{display:grid;gap:12px}
.pgal .main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pgal .main img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.pgal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pgal .thumbs img{aspect-ratio:1/1;object-fit:contain;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px;cursor:pointer;transition:.2s}
.pgal .thumbs img:hover,.pgal .thumbs img.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-l)}
.pgal .hint{font-size:.81rem;color:var(--muted);margin:11px 0 0}

/* ---------- product page layout ---------- */
.pl{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(26px,3.4vw,48px);align-items:start}
.sticky{position:sticky;top:96px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-m);overflow:hidden}
.qcard .hd{background:var(--ink);color:#fff;padding:20px 24px}
.qcard .hd h3{color:#fff;margin:0 0 .2em;font-size:1.16rem}
.qcard .hd p{margin:0;font-size:.86rem;color:#b9c9d8}
.qcard .bd{padding:22px 24px 26px}
.qcard .cl{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px}
.qcard .cl li{display:flex;gap:11px;font-size:.9rem;margin:0;color:var(--ink-2)}
.qcard .cl svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:3px}
.qcard .alt{font-size:.86rem;color:var(--muted);text-align:center;margin:14px 0 0}
.qcard .alt a{font-weight:650}

.bcrumb{font-size:.83rem;color:var(--muted);padding-block:15px}
.bcrumb a{color:var(--muted)}
.bcrumb a:hover{color:var(--brand)}
.bcrumb span{margin-inline:7px;opacity:.5}
.bcrumb b{color:var(--ink-2);font-weight:600}

/* ---------- faq ---------- */
.faq{display:grid;gap:11px;max-width:900px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 22px;transition:.18s}
.faq details[open]{border-color:#cfdae6;box-shadow:var(--shadow-s)}
.faq summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;font-weight:650;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:17px;font-size:1.35rem;font-weight:400;color:var(--brand);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 20px;font-size:.95rem;color:var(--muted)}
.faq .ans p:last-child{margin:0}

/* ---------- cta band + form ---------- */
.band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16}
.band .wrap{position:relative;z-index:2;padding-block:clamp(52px,6vw,84px)}
.band h2{color:#fff}
.band .split{align-items:start}
.band p{color:#bacbdb;margin-bottom:1.5em}
.band .contactlist{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px}
.band .contactlist li{display:flex;gap:13px;align-items:flex-start;font-size:.95rem;color:#e2ecf5;margin:0}
.band .contactlist svg{width:19px;height:19px;color:#94bbd9;flex:none;margin-top:3px}
.band .contactlist b{color:#fff;display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:650}
.band .contactlist a{color:#e2ecf5}

form.qf{background:#fff;border-radius:var(--radius);padding:26px 26px 28px;box-shadow:var(--shadow-m);display:grid;gap:14px;
  grid-template-columns:1fr 1fr;color:var(--ink-2)}
form.qf h3{grid-column:1/-1;margin:0 0 .1em;font-size:1.14rem}
form.qf .full{grid-column:1/-1}
form.qf label{display:block;font-size:.83rem;font-weight:650;color:var(--ink);margin-bottom:5px}
form.qf input,form.qf select,form.qf textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.94rem;color:var(--ink);background:#fff;transition:.16s}
form.qf input:focus,form.qf select:focus,form.qf textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
form.qf textarea{min-height:104px;resize:vertical}
form.qf .note{grid-column:1/-1;font-size:.78rem;color:var(--muted);margin:0;line-height:1.5}
form.qf button{grid-column:1/-1;justify-content:center}
form.qf .hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.ft{background:#0a1622;color:#9fb1c2;font-size:.9rem;padding-top:clamp(48px,5vw,70px)}
.ft h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.ft .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ft li{margin:0}
.ft a{color:#9fb1c2}
.ft a:hover{color:#fff}
.ft .logo{color:#fff;margin-bottom:16px}
.ft .logo small{color:#7f93a6}
.ft p{font-size:.88rem;line-height:1.65}
.ft .bar{border-top:1px solid rgba(255,255,255,.1);padding-block:20px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;font-size:.83rem}
.ft .bar a{margin-right:0}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#e3edf5}
.socials a:hover{background:var(--brand);color:#fff}
.socials svg{width:17px;height:17px}

/* ---------- misc ---------- */
.note{background:var(--brand-l);border:1px solid #cbdeed;border-radius:var(--radius);padding:18px 20px;font-size:.93rem}
.note b{color:var(--ink)}
.pill{display:inline-block;background:var(--brand-l);color:var(--brand-d);font-size:.78rem;font-weight:650;padding:5px 12px;border-radius:99px;margin:0 6px 6px 0}
.ratio{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.ratio iframe,.ratio img{width:100%;height:100%;object-fit:cover;border:0}
.toc{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.toc a{display:block;padding:11px 15px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:.92rem;font-weight:600}
.toc a:hover{border-color:var(--brand);background:var(--brand-l)}

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .trustbar{grid-template-columns:repeat(2,1fr)}
  .ft .cols{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:960px){
  .nav{display:none}
  .hdr .wrap{gap:12px}
  .navtog{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:12px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}
  /* keep a quote CTA reachable on phones: compact header button instead of hiding it */
  .hdr .cta{margin-left:auto;padding:11px 14px;font-size:.88rem;flex:none}
  .navtog svg{width:22px;height:22px;color:var(--ink)}
  .mtog{display:none}
  .mtog:checked~.mnav{display:block}
  .mnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);max-height:78vh;overflow:auto;padding:14px 22px 26px}
  .mnav h5{margin:18px 0 8px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
  .mnav a{display:block;padding:11px 12px;border-radius:9px;font-weight:600;color:var(--ink);font-size:.97rem}
  .mnav a:hover{background:var(--bg-alt)}
  .mnav .btn{display:flex;margin-top:20px;justify-content:center}
  .hdr .wrap{position:relative}
  .split,.pl,.g3{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .sticky{position:static}
  .checks--2{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  /* keep logo + quote CTA + menu on one phone-width line */
  .logo{font-size:1.05rem;gap:9px}
  .logo .mark{width:32px;height:32px;font-size:.78rem}
  .logo small{display:none}
  .hdr .wrap{min-height:66px;gap:10px}
  .hdr .cta{padding:10px 12px;font-size:.84rem}
  .g2,.g4,.gal,.gal--wide{grid-template-columns:repeat(2,1fr)}
  form.qf{grid-template-columns:1fr}
  .trustbar{grid-template-columns:1fr}
  .topbar ul.tr{display:none}
  .ft .cols{grid-template-columns:1fr}
  .pgal .thumbs{grid-template-columns:repeat(4,1fr)}
}

/* ---- Conversion path on small screens (the two Google Ads landing pages) ---------------
   Those pages carry the real form inside the quote card (qcard(with_form=True)). On a phone the
   two-column block stacks, and without the reorder the card follows the entire page - the form
   sat ~11,000px down, 14 screens below the fold. Ordering it back to the top of the stacked
   block puts it directly under the page heading, where desktop already had it. The bar is the
   second route to a conversion.
   The bar's base rule MUST come before the media query that shows it: at equal specificity the
   later rule wins, so a base rule written after it would hide the bar at every width. */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:1px;background:var(--line)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;
  font:inherit;font-weight:650;font-size:.98rem;text-decoration:none;background:#fff;color:var(--ink)}
.mbar a svg{width:19px;height:19px;flex:none}
.mbar .mbar__q{background:var(--brand);color:#fff}
@media (max-width:960px){
  .pl{display:grid;grid-template-columns:1fr}
  .pl > aside{order:-1;margin-bottom:10px}
  .qcard .cl{display:none}      /* the checklist repeats what the page body already says */
  .qcard .alt{margin-top:14px}
}
@media (max-width:760px){
  body{padding-bottom:62px}
  .mbar{display:flex}
}

/* Cookie consent banner. Hidden until site.js decides there is no stored choice yet, so the
   no-JS visitor simply sees no banner and stays untracked (the head defaults to denied). */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:18px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:16px 22px;background:var(--ink);color:#fff;
  box-shadow:0 -6px 24px rgba(9,20,33,.28)}
.cc[hidden]{display:none}
.cc p{margin:0;font-size:.92rem;line-height:1.55;max-width:72ch;color:#dfe7ef}
.cc a{color:#88b4d5}
.cc__act{display:flex;gap:10px;flex:none}
.cc .btn{padding:11px 20px;font-size:.92rem}
@media (max-width:760px){
  .cc{padding:14px 16px;gap:12px}
  /* the action bar already owns the bottom edge, so the banner stacks above it instead of
     on top of it (they were overlapping by the bar's full height) */
  .cc{bottom:62px}
  .cc__act{width:100%}      /* buttons go full width under the text on a phone */
  .cc__act .btn{flex:1;justify-content:center}
  body{padding-bottom:150px}   /* banner + action bar + their gap */
}
/* iOS Safari zooms the whole page when a field it focuses is under 16px, which on a form this
   long reads as the page jumping around - keep form controls at 16px on small screens. */
@media (max-width:760px){
  /* Same selector as the design's field rule, later in the file so it wins: iOS Safari zooms
     the whole page when a focused field is under 16px, which on a long form reads as the page
     jumping around. (No .unisun prefix here - that namespace belongs to the WordPress build.) */
  form.qf input,form.qf select,form.qf textarea{font-size:16px}
}

/* Form-error notice (see site.js): shown above the form when quote.php rejects a submission,
   so a rate limit or a typo never looks like the form silently doing nothing. */
.qferr{margin:0 0 16px;padding:14px 16px;border:1px solid #e0b4a0;border-left:4px solid var(--brand);
  border-radius:var(--radius-s);background:#fdf6f1;color:var(--ink);font-size:.94rem;line-height:1.55}
.qferr a{color:var(--brand);font-weight:600}

/* Header brand: wordmark logo on top, product line underneath. Footer .logo untouched. */
.logo--nav,.logo--stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.logo--nav .logo-img,.logo--stack .logo-img{display:block;width:auto;height:30px}
.logo--nav .logo-txt,.logo--stack .logo-txt{line-height:1}
.logo--nav small,.logo--stack small{display:block;margin-top:1px}

.ft .logo--stack .logo-img{height:32px}

/* Homepage 'Two product families' cards: cap the product photos so a tall bag no longer
   takes a full square column. contain keeps the whole bag visible, no cropping. */
.split--fam img{width:100%;height:360px;object-fit:contain;background:#fff;padding:12px}
@media (max-width:760px){.split--fam img{height:260px}}