/* Hobforge — site styles. Equipment first: photographs large, chrome quiet. */
:root{
  --navy:#0B2E6B; --navy-deep:#082250; --copper:#C2600F; --copper-text:#A34E0C;
  --ink:#0E1116; --body:#46525F; --mute:#6B7684;
  --line:#E2E7EE; --line-soft:#EDF1F6; --paper:#FFFFFF; --shell:#F6F7F9;
  --radius:14px;
  --shadow:0 1px 2px rgba(12,25,50,.05), 0 8px 24px rgba(12,25,50,.06);
  --shadow-lift:0 2px 6px rgba(12,25,50,.07), 0 18px 44px rgba(12,25,50,.12);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--body);
  font:16px/1.6 "Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--copper-text); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink); margin:0; letter-spacing:-.02em; line-height:1.14}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(24px,3vw,34px)}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-left:1.1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap.narrow{max-width:800px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
section{padding:64px 0}
section.pad-t{padding:38px 0 24px}
section.pad-b{padding:8px 0 64px}
section.thin{padding:44px 0}
.eyebrow{font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--copper-text); margin:0 0 10px}
.lede{font-size:clamp(16px,1.5vw,18px); color:var(--body); max-width:66ch}

/* ------------------------------------------------------------------ header */
header.site{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:flex; align-items:center; flex:0 0 auto}
.brand svg{height:30px; width:auto; display:block}
nav.main{display:flex; gap:24px; flex:1 1 auto}
nav.main a{color:var(--ink); font-size:14.5px; font-weight:500; padding:6px 0;
  border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{border-bottom-color:var(--copper); text-decoration:none}
.actions{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; cursor:pointer; font-size:15px}

/* search */
.hf-search{position:relative; width:260px}
.hf-search input{width:100%; padding:10px 12px 10px 34px; border:1px solid var(--line);
  border-radius:10px; font-size:14px; color:var(--ink);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 10px 50%/15px no-repeat}
.hf-search input:focus{outline:2px solid var(--navy); outline-offset:1px}
.q-out{position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lift);
  max-height:60vh; overflow:auto; z-index:130; width:380px; max-width:80vw}
.q-out a{display:block; padding:9px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink)}
.q-out a:last-child{border-bottom:0}
.q-out a:hover,.q-out a.sel{background:#F3F7FD; text-decoration:none}
.q-out .code{font:600 11.5px/1 ui-monospace,Menlo,monospace; color:var(--navy); display:block;
  margin-bottom:2px}
.q-out .ctx{font-size:12px; color:var(--mute)}
.q-out .none{padding:12px; font-size:13.5px; color:var(--mute)}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:10px; cursor:pointer;
  font-size:14.5px; font-weight:600; padding:11px 18px; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; white-space:nowrap}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-deep); box-shadow:0 6px 18px rgba(11,46,107,.28)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
.btn-copper{background:var(--copper-text); color:#fff}
.btn-copper:hover{background:#8E430A}

/* ------------------------------------------------------------- breadcrumbs */
.crumbs{border-bottom:1px solid var(--line-soft); background:#FCFDFE}
.crumbs .wrap{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; padding-top:11px; padding-bottom:11px; color:var(--mute)}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--navy)}
.crumbs i{font-style:normal; color:#C3CCD8}
.crumbs span[aria-current]{color:var(--ink); font-weight:500}

/* ------------------------------------------------------------------- hero */
.hero{padding:60px 0 56px; border-bottom:1px solid var(--line-soft);
  background:radial-gradient(120% 100% at 88% 0%, #F2F6FC 0%, rgba(242,246,252,0) 62%)}
.hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(34px,5vw,58px); letter-spacing:-.03em; margin:0 0 18px}
.hero h1 em{font-style:normal; color:var(--navy); display:block}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-figure img{width:100%; border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); background:#fff}
.hero-figure .caption{font-size:12.5px; color:var(--mute); margin:10px 2px 0}

/* ------------------------------------------------------------------- cards */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:28px;
  margin-bottom:28px; flex-wrap:wrap}
.filter{flex:0 0 290px; max-width:100%}
.filter input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:14.5px; color:var(--ink)}
.filter input:focus{outline:2px solid var(--navy); outline-offset:1px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px}
.card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:#CFD8E4;
  text-decoration:none}
.card .shot{background:#fff; border-bottom:1px solid var(--line-soft); aspect-ratio:4/3}
.card .shot img{width:100%; height:100%; object-fit:contain}
.card .body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1}
.card h3{font-size:16.5px}
.card .chips{font-size:12.5px; color:var(--body); margin:0}
.card .meta{display:flex; justify-content:space-between; align-items:center; margin-top:auto;
  font-size:12.5px; color:var(--mute); padding-top:9px; border-top:1px solid var(--line-soft)}
.card .meta .code{font:600 11.5px/1 ui-monospace,Menlo,monospace; color:var(--navy)}
.no-hits{display:none; color:var(--mute); padding:24px 0}

/* ------------------------------------------------------------ product page */
.prod-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:46px; align-items:start}
.gallery .main{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff}
.gallery .main img{width:100%; aspect-ratio:4/3; object-fit:contain}
.thumbs{display:flex; gap:9px; margin-top:11px; flex-wrap:wrap}
.thumbs button{padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:#fff; cursor:pointer; width:74px; aspect-ratio:4/3}
.thumbs button[aria-pressed="true"]{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}
.thumbs img{width:100%; height:100%; object-fit:contain}
.prod-body h1{margin-bottom:10px}
.ref-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px}
.ref-line .code{font:700 13px/1 ui-monospace,Menlo,monospace; color:var(--navy);
  background:#EEF3FB; border-radius:6px; padding:6px 9px}
.ref-line .sub{font-size:13px; color:var(--mute)}
.glance{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0}
.glance b{font-size:12.5px; font-weight:600; color:var(--ink); background:#F5F8FB;
  border:1px solid var(--line); border-left:2px solid var(--copper); border-radius:7px;
  padding:6px 10px}
ul.features{columns:2; column-gap:28px; padding-left:1.05em; margin:0 0 18px}
ul.features li{font-size:14.4px; margin-bottom:5px; break-inside:avoid}
.warranty-line{font-size:13.5px; color:var(--mute); border-top:1px solid var(--line-soft);
  padding-top:14px; margin:0}
.models-h{font-size:20px; margin:34px 0 14px; display:flex; align-items:center; gap:10px}
.models-h span{font:600 11.5px/1 ui-monospace,Menlo,monospace; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:4px 9px}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table.spec{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
table.spec th{background:var(--navy); color:#fff; text-align:left; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:11px 12px; font-weight:700;
  white-space:nowrap}
table.spec td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.spec tr:last-child td{border-bottom:0}
table.spec tbody tr:nth-child(even){background:#FAFBFC}
table.spec td.ref{font:700 12.5px/1 ui-monospace,Menlo,monospace; color:var(--navy);
  white-space:nowrap}
table.spec tr.hit{background:#FFF6EC !important; box-shadow:inset 3px 0 0 var(--copper)}
.models{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.model{display:flex; gap:14px; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; background:#fff}
.model.hit{border-color:var(--copper); box-shadow:0 0 0 2px #F5D9C0}
.mshot{flex:0 0 96px}
.mshot img{width:96px; aspect-ratio:4/3; object-fit:contain}
.model h3{font-size:15.5px; margin:0 0 7px}
.model ul{padding-left:1em; margin:0}
.model li{font-size:13.2px; margin-bottom:3px}
.ask{margin-top:26px; font-size:14.4px; background:#F6F8FB; border:1px solid var(--line);
  border-left:3px solid var(--copper); border-radius:10px; padding:14px 16px}

/* ---------------------------------------------------------------- sections */
.shell{background:var(--shell); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.value{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 44px; margin-top:30px}
.value>div{border-top:2px solid var(--copper); padding-top:15px}
.value h3{font-size:17px; margin-bottom:6px}
.value p{font-size:14.6px; margin:0}
.other h2{font-size:19px; margin-bottom:14px}
.pills{display:flex; flex-wrap:wrap; gap:9px}
.pills a{font-size:13.4px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; color:var(--ink)}
.pills a:hover{border-color:var(--navy); color:var(--navy); text-decoration:none}
.band{background:var(--navy); color:#DCE6F5; padding:48px 0}
.band .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap}
.band h2{color:#fff; margin-bottom:8px}
.band p{margin:0; max-width:60ch; color:#C6D5EC}
.band a.terms{color:#E8A05A; text-decoration:underline}
.cta-band{text-align:center}
.cta-band .lede{margin:0 auto 24px}
.cta-band .btn{margin:0 6px}

/* ------------------------------------------------------------ prose pages */
.prose h2{font-size:19px; margin:30px 0 10px}
.prose p,.prose li{font-size:15px}
.prose .lede{margin-bottom:22px}
.prose .company-info{background:#F6F8FB; border:1px solid var(--line); border-radius:10px;
  padding:14px 16px}
.prose .note{font-size:13px; color:var(--mute)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:22px 0}
.contact-grid h2{margin-top:0}
a.big{font-size:19px; font-weight:600}

/* ------------------------------------------------------------------ footer */
footer{background:var(--ink); color:#98A3B2; padding:52px 0 28px; font-size:14px}
footer .cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px}
footer h4{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:12px}
footer a{color:#B9C4D2; display:block; padding:3.5px 0}
footer a:hover{color:#fff; text-decoration:none}
footer .about p{max-width:38ch}
footer .brand svg{height:26px}
footer a.pdf{color:#E8A05A}
footer .legal{border-top:1px solid #222B36; margin-top:34px; padding-top:18px; display:flex;
  justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:#77828F}
footer .legal a{color:#8B96A4; display:inline; padding:0}
footer .legal a:hover{color:#fff}

@media (max-width:1000px){
  .hero-grid,.prod-grid{grid-template-columns:1fr; gap:32px}
  .value,.contact-grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  nav.main{display:none}
  .menu-toggle{display:inline-flex}
  nav.main.open{display:flex; position:absolute; top:74px; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; padding:8px 24px 16px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow)}
  nav.main.open a{padding:12px 0; border-bottom:1px solid var(--line-soft)}
  .hf-search{width:190px}
}
@media (max-width:700px){
  .bar{height:64px; gap:12px}
  .hf-search{display:none}
  section{padding:44px 0}
  ul.features{columns:1}
  footer .cols{grid-template-columns:1fr}
  .q-out{width:min(90vw,380px)}
}


/* ------------------------------------------------- homepage: quiet by design */
.hero{padding:96px 0 72px}
.hero-grid{grid-template-columns:1fr 1.15fr; gap:64px}
.hero-copy .eyebrow{color:var(--mute); letter-spacing:.2em}
.hero h1{font-size:clamp(36px,4.6vw,56px); font-weight:600; letter-spacing:-.032em;
  line-height:1.08; margin-bottom:22px}
.hero h1 em{font-style:normal; color:var(--mute); display:block; font-weight:400}
.hero .lede{max-width:44ch; font-size:17px}
.hero-links{display:flex; gap:26px; align-items:center; margin:30px 0 0; flex-wrap:wrap}
a.lnk{font-size:15px; font-weight:600; color:var(--ink); border-bottom:2px solid var(--copper);
  padding-bottom:3px}
a.lnk:hover{text-decoration:none; color:var(--navy); border-bottom-color:var(--navy)}
a.lnk.quiet{font-weight:500; color:var(--mute); border-bottom-color:var(--line)}
a.lnk.quiet:hover{color:var(--ink); border-bottom-color:var(--mute)}
.hero-figure img{border-radius:2px; border:1px solid var(--line-soft); box-shadow:none}

.facts{list-style:none; display:flex; flex-wrap:wrap; gap:0 44px; margin:76px 0 0; padding:20px 0 0;
  border-top:1px solid var(--line); font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.facts b{color:var(--navy); font-weight:700; margin-right:6px}

.statement{border-top:1px solid var(--line); padding:72px 0 88px}
.statement p{font-size:clamp(18px,2vw,22px); line-height:1.5; color:var(--ink);
  letter-spacing:-.012em; margin-bottom:20px}
.statement .quiet{font-size:14.5px; color:var(--mute); line-height:1.7; margin:0}

/* the range grid is the body of the homepage, so it gets the room */
.sec-head h2{font-size:clamp(20px,2.2vw,26px); font-weight:600}
@media (max-width:1000px){
  .hero{padding:56px 0 48px}
  .facts{margin-top:44px; gap:0 28px}
}

/* ------------------------------------------- homepage: an index, not a wall */
.index-sec{padding:74px 0 10px}
.index-head{display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:8px}
.index-head h2{font-size:clamp(20px,2.2vw,26px); font-weight:600}
.index-list{list-style:none; margin:0; padding:0; columns:3; column-gap:52px}
.index-list li{break-inside:avoid}
.index-list a{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); font-size:15.5px}
.index-list a:hover{text-decoration:none; color:var(--navy)}
.index-list a:hover span{border-bottom:1px solid var(--navy)}
.index-list i{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal;
  color:var(--mute)}

.routes{padding:64px 0 72px}
.route-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line)}
.route-grid a{display:flex; flex-direction:column; background:#fff; padding:26px 24px 24px;
  color:inherit; transition:background .16s ease}
.route-grid a:hover{background:#FBFCFE; text-decoration:none}
.route-grid h3{font-size:17px; margin-bottom:9px}
.route-grid p{font-size:14px; color:var(--body); margin:0 0 16px}
.route-grid span{margin-top:auto; font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em; text-transform:uppercase; color:var(--copper-text)}
.route-grid a:hover span{color:var(--navy)}

@media (max-width:1000px){
  .index-list{columns:2}
  .route-grid{grid-template-columns:repeat(2,1fr)}
  .index-sec{padding-top:52px}
}
@media (max-width:700px){
  .index-list{columns:1}
  .route-grid{grid-template-columns:1fr}
}

/* the homepage photograph is a scene, so it fills its frame rather than
   sitting on white like a product cut-out */
.hero-figure img{aspect-ratio:16/9; object-fit:cover; border-radius:2px;
  border:1px solid var(--line-soft)}   /* the photograph is 16:9 as supplied */

/* ============================================================ the opening ===
   The photograph runs off the right edge of the screen rather than sitting in
   a box: it reads as a window onto a kitchen, not a picture pasted on a page.
   Two crop-mark brackets and a reference plate do the framing — the same
   language as a specification drawing, and nothing more than lines. */
.hero{padding:78px 0 0; overflow:hidden}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:52px;
  align-items:center}
.hero-copy{position:relative; z-index:2}
.hero-copy .eyebrow{display:flex; align-items:center; gap:10px}
.hero-copy .eyebrow::before{content:""; width:22px; height:2px;
  background:var(--copper); flex:0 0 auto}

.hero-figure{position:relative; margin:0 calc(50% - 50vw) 0 0}
.hero-figure .shot{position:relative; overflow:hidden; background:#fff}
.hero-figure img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border:0; border-radius:0}
/* crop marks: copper into the light corner, white into the dark one */
.hero-figure .shot::before, .hero-figure .shot::after{content:""; position:absolute;
  width:64px; height:64px; pointer-events:none}
.hero-figure .shot::before{top:16px; left:16px;
  border-top:2px solid var(--copper); border-left:2px solid var(--copper)}
.hero-figure .shot::after{right:16px; bottom:16px;
  border-bottom:2px solid rgba(255,255,255,.9); border-right:2px solid rgba(255,255,255,.9)}

/* the plate: the reference, stamped on the corner the way a rating plate is */
.plate{position:absolute; left:-30px; bottom:34px; margin:0; z-index:3;
  box-shadow:0 14px 34px rgba(11,46,107,.26)}
.plate a{display:flex; align-items:center; gap:11px; background:var(--navy);
  color:#fff; padding:13px 18px; text-decoration:none;
  border-left:3px solid var(--copper)}
.plate a:hover{background:var(--navy-deep); text-decoration:none}
.plate b{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; color:#E8A05A}
.plate span{font-size:12.5px; font-weight:500; letter-spacing:.03em; color:#fff}

@media (max-width:1000px){
  .hero{padding-top:46px}
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .hero-figure{margin:0 calc(50% - 50vw)}
  .plate{left:22px; bottom:20px}
  .hero-figure .shot::before, .hero-figure .shot::after{width:40px; height:40px}
}
@media (max-width:700px){
  .plate a{padding:10px 13px}
  .plate span{font-size:11.5px}
}

/* --- the opening, in proportion -------------------------------------------
   Bleeding the photograph to the edge let it grow with the window: on a wide
   screen it swelled to half the page. Fixing its height instead turns it into
   a band that crops wider as the screen grows, so it stays emphatic without
   taking over. The copy column now leads on width. */
.hero{padding-top:66px}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:58px}
.hero-figure .shot{height:clamp(288px, 33vw, 424px)}
.hero-figure img{aspect-ratio:auto; height:100%; object-fit:cover}
.hero-figure .shot::before, .hero-figure .shot::after{width:52px; height:52px}
.plate{bottom:28px}

@media (max-width:1000px){
  .hero{padding-top:42px}
  .hero-figure .shot{height:clamp(220px, 46vw, 320px)}
  .plate{bottom:16px}
}

/* ==================================================== fitting a phone ======
   The lockup is 8.8 times wider than it is tall, so at the desktop height of
   30px it is 265px across — most of a phone's width before the quote button
   and the menu icon are in the bar at all. Everything below is about width. */
@media (max-width:900px){
  .bar{gap:14px}
  .brand svg{height:23px}                 /* 265px → 203px */
  .hf-basket{font-size:13px; padding:9px 13px; border-radius:9px}
  .menu-toggle{padding:8px 10px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}                   /* 12px back on each side */
  .bar{height:60px; gap:10px}
  .brand svg{height:19px}                 /* 168px */
  .hf-basket{font-size:12.5px; padding:8px 11px}
  .hf-count{min-width:1.1rem; font-size:.66rem}
  .menu-toggle{padding:7px 9px; font-size:14px}
  nav.main.open{top:60px; padding:6px 18px 14px}

  .hero h1{font-size:clamp(27px,7.6vw,34px); letter-spacing:-.022em}
  .hero .lede{font-size:15.5px}
  .hero-links{gap:18px}
  .facts{gap:10px 22px; font-size:11.5px}
  .facts li{white-space:nowrap}

  .sec-head{gap:16px; margin-bottom:20px}
  h2{font-size:clamp(21px,5.6vw,26px)}
  .models{grid-template-columns:1fr}
  .model{gap:12px; padding:12px}
  .mshot{flex:0 0 78px}
  .mshot img{width:78px}
  table.spec{min-width:520px; font-size:13px}
  table.spec th, table.spec td{padding:9px 10px}
  .prod-grid{gap:26px}
  ul.features li{font-size:14px}
  .glance b{font-size:12px; padding:5px 9px}
  footer{padding:40px 0 24px}
  .index-head{padding-bottom:11px}
}
/* the photograph should stop exactly at the edge of the screen, whatever the
   screen is: half the gap either side of the wrap, plus its padding */
.hero-figure{margin-right:calc(-1 * ((100vw - min(100vw, 1200px)) / 2 + 24px))}
@media (max-width:1000px){
  .hero-figure{margin:0 calc(-1 * ((100vw - min(100vw, 1200px)) / 2 + 24px))}
}
@media (max-width:620px){
  .hero-figure{margin:0 -18px}
}
/* a bled element can never widen the page */
html, body{overflow-x:hidden}

/* the smallest phones still in use (320px): give the mark one more step down */
@media (max-width:380px){
  .wrap{padding:0 14px}
  .bar{gap:8px}
  .brand svg{height:16px}
  .hf-basket{font-size:12px; padding:7px 9px}
  .menu-toggle{padding:6px 8px}
  nav.main.open{padding:6px 14px 12px}
  .hero-figure{margin:0 -14px}
  .plate{left:14px}
  .hero h1{font-size:26px}
}

/* ============================================== the mark, on a small screen ==
   The lockup is 8.8:1, so on a phone it can only fit by shrinking to the point
   where the quote button — a control — outweighs the brand. The badge solves
   it properly: it is square, it reads at any size, and it is the mark. The
   wordmark returns as soon as there is room for it. */
.brand .mark-badge{display:none}
.brand .mark-badge svg{display:block; border-radius:7px}
.brand .mark-full{display:block}

@media (max-width:620px){
  .brand .mark-full{display:none}
  .brand .mark-badge{display:block}
  .brand .mark-badge svg{height:38px; width:38px}   /* taller than the button */
  .hf-basket{font-size:13.5px; padding:9px 14px}    /* no longer squeezed */
  .bar{gap:12px}
}
@media (max-width:380px){
  .wrap{padding:0 16px}
  .brand .mark-badge svg{height:34px; width:34px}
  .hf-basket{font-size:12.5px; padding:8px 11px}
  .hero-figure{margin:0 -16px}
  .plate{left:16px}
}

/* --- the opening, on a phone ----------------------------------------------
   A fixed height turned the photograph into a letterbox strip and cropped the
   sides away with it. At this width it should simply be itself: full width,
   its own proportions, the whole frame including the mark in the corner. */
@media (max-width:1000px){
  .hero-figure .shot{height:auto}
  .hero-figure img{aspect-ratio:16/9; height:auto}
  .hero-figure .shot::before, .hero-figure .shot::after{width:34px; height:34px;
    top:12px; left:12px}
  .hero-figure .shot::after{top:auto; left:auto; right:12px; bottom:12px}
  .hero-copy{padding-bottom:4px}
  .plate{bottom:14px}
  .plate a{padding:10px 14px}
}

/* ==========================================================================
   THE OPENING ON A PHONE — one definition, last word
   Eight media queries had accumulated over this hero, each patching the one
   before. Everything about the mobile opening is settled here instead.
   The order changes deliberately: on a phone the photograph comes first,
   full width and hard under the header, and the words follow it.
   ========================================================================== */
@media (max-width:620px){
  .hero{padding:0 0 32px; overflow:hidden}
  .hero-grid{display:flex; flex-direction:column; gap:0; align-items:stretch}

  /* photograph first, edge to edge */
  .hero-figure{order:-1; margin:0 -18px 24px; position:relative}
  .hero-figure .shot{height:auto}
  .hero-figure img{aspect-ratio:16/9; height:auto; width:100%; object-fit:cover}
  .hero-figure .shot::before{top:11px; left:11px; width:30px; height:30px}
  .hero-figure .shot::after{top:auto; left:auto; right:11px; bottom:11px;
    width:30px; height:30px}
  .plate{left:18px; bottom:13px}
  .plate a{padding:9px 12px; gap:8px; border-left-width:3px}
  .plate b{font-size:11px}
  .plate span{font-size:11.5px}

  /* then the words, with room to breathe */
  .hero-copy{padding:0}
  .hero-copy .eyebrow{margin-bottom:9px; letter-spacing:.14em}
  .hero-copy .eyebrow::before{width:16px}
  .hero h1{font-size:clamp(28px,8.2vw,34px); line-height:1.07; margin:0 0 13px;
    letter-spacing:-.024em}
  .hero .lede{font-size:15.5px; line-height:1.58; max-width:38ch; margin:0}
  .hero-links{margin-top:20px; gap:16px 20px}
  a.lnk{font-size:14.5px}

  /* three facts, in a row, reading as a plate rather than loose fragments */
  .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    margin:24px 0 0; padding-top:15px; text-align:left; letter-spacing:.04em}
  .facts li{white-space:normal; font-size:10px; line-height:1.35; color:var(--mute);
    border-left:1px solid var(--line-soft); padding:0 8px 0 10px}
  .facts li:first-child{border-left:2px solid var(--copper)}
  .facts li:nth-child(2), .facts li:nth-child(4){display:none}
  .facts b{display:block; margin:0 0 3px; font-size:13.5px; letter-spacing:-.01em}
}
@media (max-width:380px){
  .hero-figure{margin:0 -16px 22px}
  .plate{left:16px}
  .plate span{font-size:11px}
  .hero h1{font-size:27px}
  .facts li{font-size:9.5px; padding:0 6px 0 8px}
  .facts b{font-size:12.5px}
}

:root{
  --marka:#0B2E6B; --rule:#E2E7EE; --rule-soft:#EDF1F6; --panel:#F6F8FB;
  --ink:#0E1116; --ink-soft:#46525F; --ink-faint:#C7D1DC;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --display:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 18px 44px rgba(12,25,50,.16);
}

/* ---------------- quote basket ---------------- */
/* --ink-faint is a hairline grey meant for rules, not for reading;
   the panel uses a darker mute that clears 4.5:1 on white. */
.hf-quote-in { --hf-mute: #4E5A68; font-size: 1rem; }
.hf-add {
  font: inherit; font-size: .72rem; font-family: var(--mono); letter-spacing: .04em;
  color: #A34E0C; background: #fff; border: 1px solid var(--rule);
  border-radius: 3px; padding: .12rem .4rem; cursor: pointer; white-space: nowrap; line-height: 1.5;
}
.hf-add span { margin-left: .18rem; }
.hf-add:hover { border-color: #A34E0C; background: #fff6ee; }
.hf-add.in { color: #1c6b3a; border-color: #7cc39a; background: #eefbf3; }
.spec td.qcell { text-align: right; padding-right: .5rem; }
.spec th.qcell { text-align: right; }
.model-ref .hf-add { margin-left: .45rem; }

.hf-basket {
  font: inherit; font-size: .82rem; font-family: var(--display); letter-spacing: .04em;
  background: var(--marka); color: #fff; border: 0; border-radius: 3px;
  padding: .46rem .8rem; cursor: pointer; white-space: nowrap; display: flex;
  align-items: center; gap: .5rem; flex: 0 0 auto;
}
.hf-basket:hover { background: #154aa8; }
.hf-count {
  background: #C2600F; border-radius: 999px; min-width: 1.25rem; text-align: center;
  font-family: var(--mono); font-size: .7rem; padding: .05rem .3rem;
}
.hf-basket[data-empty="1"] .hf-count { background: #46525f; }

.hf-quote {
  position: fixed; inset: 0; z-index: 90; background: rgba(12,17,23,.55);
  display: grid; place-items: start end; padding: 0;
}
.hf-quote[hidden] { display: none; }
.hf-quote-in {
  background: var(--panel); width: min(45rem, 100%); height: 100%; overflow-y: auto;
  box-shadow: -12px 0 40px -20px rgba(12,17,23,.6); padding: 0 clamp(1rem,3vw,1.75rem) 2rem;
}
.hf-quote header {
  position: sticky; top: 0; background: var(--panel); display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; padding: 1.1rem 0 .8rem;
  border-bottom: 2px solid #C2600F; margin-bottom: 1.1rem;
}
.hf-quote h3 { margin: 0; font-family: var(--display); font-size: 1.25rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marka); }
.hf-x { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--ink-soft);
  cursor: pointer; padding: 0; }
.hf-x:hover { color: var(--ink); }
.hf-empty p { margin: 0 0 .6rem; }
.hf-empty .sub { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }
.hf-grid ::placeholder { color: #6B7684; opacity: 1; }
.hf-lines .q, .hf-lines th.q { text-align: center; }

.hf-lines { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 1.6rem; }
.hf-lines th {
  text-align: left; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hf-mute); border-bottom: 1.5px solid var(--rule);
  padding: 0 .6rem .45rem 0;
}
.hf-lines td { padding: .7rem .6rem .7rem 0; border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle; color: var(--ink); }
.hf-lines .ref { font-family: var(--mono); font-weight: 700; color: var(--marka); white-space: nowrap; }
.hf-goto {
  font: inherit; font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--marka);
  background: none; border: 0; border-bottom: 1px dashed var(--rule); padding: 0; cursor: pointer;
}
.hf-goto:hover, .hf-goto:focus-visible { color: #A34E0C; border-bottom-color: currentColor; }
.hf-lines .q, .hf-lines th.q { text-align: center; width: 6.5rem; }
.hf-lines .sub { display: block; font-size: .84rem; color: var(--hf-mute); margin-top: .18rem; }
.hf-qty { display: inline-flex; align-items: center; gap: .3rem; }
.hf-qty button {
  font: inherit; width: 1.5rem; height: 1.5rem; border: 1px solid var(--rule); background: #fff;
  border-radius: 3px; cursor: pointer; line-height: 1; color: var(--ink-soft);
}
.hf-qty button:hover { border-color: var(--marka); color: var(--marka); }
.hf-qty input {
  width: 2.6rem; text-align: center; font: inherit; font-size: .85rem; padding: .2rem;
  border: 1px solid var(--rule); border-radius: 3px;
}
.hf-del { font: inherit; font-size: .84rem; background: none; border: 0; color: var(--hf-mute);
  cursor: pointer; text-decoration: underline; }
.hf-del:hover { color: #8a1414; }

.hf-form h4, .hf-actions + .hf-send { margin-top: 0; }
.hf-form h4 {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 700; margin: 0 0 .8rem;
}
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; }
.hf-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem;
  font-weight: 600; color: var(--ink); }
.hf-grid label.wide { grid-column: 1 / -1; }
.hf-grid span { color: #A34E0C; }
.hf-grid input, .hf-grid textarea {
  font: inherit; font-size: .95rem; color: var(--ink); padding: .55rem .7rem;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff; resize: vertical;
}
.hf-grid input:focus, .hf-grid textarea:focus {
  outline: 2px solid #C2600F; outline-offset: -1px;
}
.hf-grid .bad { border-color: #b3261e; background: #fff7f6; }
.hf-grid label.check {
  flex-direction: row; align-items: flex-start; gap: .55rem; background: #f7f9fc;
  border: 1px solid var(--rule); border-radius: 3px; padding: .6rem .7rem; cursor: pointer;
}
.hf-grid label.check input { margin: .12rem 0 0; width: 1rem; height: 1rem; flex: 0 0 auto;
  accent-color: #C2600F; }
.hf-grid label.check .ck { font-size: .84rem; color: var(--ink); line-height: 1.45; }
.hf-grid label.check.bad { border-color: #b3261e; background: #fff7f6; }

.hf-addr {
  border: 1px solid var(--rule); border-left: 3px solid #C2600F; border-radius: 3px;
  margin: 1.2rem 0 0; padding: .5rem .9rem 1rem;
}
.hf-addr legend {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding: 0 .4rem; margin-left: -.4rem; font-weight: 700;
}
.hf-grid label.cc { position: relative; }
.hf-cc {
  position: absolute; z-index: 5; top: 100%; left: 0; right: 0; background: #fff;
  border: 1px solid var(--rule); border-top: 2px solid #C2600F;
  box-shadow: var(--shadow); max-height: 12rem; overflow-y: auto;
}
.hf-cc button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .85rem;
  background: none; border: 0; border-bottom: 1px solid var(--rule-soft);
  padding: .38rem .6rem; cursor: pointer; color: var(--ink);
}
.hf-cc button:last-child { border-bottom: 0; }
.hf-cc button:hover, .hf-cc button.on { background: #eef3fb; }
.hf-cc b { color: #A34E0C; }
.hf-cc .none { padding: .45rem .6rem; font-size: .82rem; color: var(--hf-mute); }
.hf-grid label.pc input {
  font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; max-width: 9rem;
}
.hf-err { margin: .7rem 0 0; font-size: .82rem; color: #b3261e; }

.hf-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1rem; }
.hf-go {
  font: inherit; font-size: .92rem; background: var(--marka); color: #fff; border: 1px solid var(--marka);
  border-radius: 3px; padding: .6rem 1rem; cursor: pointer;
}
.hf-go:hover { background: #154aa8; border-color: #154aa8; }
.hf-go.alt { background: #fff; color: var(--marka); }
.hf-go.alt:hover { background: #eef3fb; }
.hf-clear { font: inherit; font-size: .88rem; background: none; border: 0; color: var(--hf-mute);
  cursor: pointer; margin-left: auto; text-decoration: underline; }
.hf-clear:hover { color: #8a1414; }
.hf-send { font-size: .92rem; line-height: 1.65; color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft); padding-top: .9rem; }
.hf-send a { color: #A34E0C; }

.hf-letter { display: none; }

@media (max-width: 620px) {
  .hf-grid { grid-template-columns: 1fr; }
  .hf-basket span.lbl { display: none; }
}

/* the request letter is the only thing that prints while the panel is open */
@media print {
  body.hf-printing > *:not(.hf-letter) { display: none !important; }
  body.hf-printing .hf-letter { display: block !important; }
  body.hf-printing { background: #fff; }
}

/* ---- the panel, positioned for a site rather than a single document ---- */
.hf-basket{ font-family:var(--display); font-weight:600; font-size:14px; border-radius:10px;
  padding:11px 16px; }
.hf-quote{ z-index:120; }
.hf-add{ font-size:11.5px; border-radius:6px; padding:4px 9px; }
.hf-add:focus-visible, .hf-basket:focus-visible{ outline:2px solid var(--marka); outline-offset:2px; }
@media print{ .hf-basket, header.site, footer, .hf-quote{ display:none !important; } }

/* ------------------------------------------------- the drawn background ---- */
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22700%22%20height%3D%22700%22%20viewBox%3D%220%200%20700%20700%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B2E6B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20opacity%3D%220.08%22%3E%3Cg%20transform%3D%22translate%28104%2C92%29%20rotate%280%29%20scale%280.86%29%22%3E%3Cpath%20d%3D%22M-50-34h100v14h-100z%22%2F%3E%3Cpath%20d%3D%22M-50-20h100v46h-100z%22%2F%3E%3Cpath%20d%3D%22M-44-34v-8h26v8M-9-34v-8h18v8M18-34v-8h26v8%22%2F%3E%3Cpath%20d%3D%22M-42-2h84v22h-84z%22%2F%3E%3Cpath%20d%3D%22M-30%204h60%22%2F%3E%3Ccircle%20cx%3D%22-36%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-18%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-42%2026v12h6M42%2026v12h-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28322%2C84%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-40-46h80v62h-80z%22%2F%3E%3Cpath%20d%3D%22M-33-39h48v48h-48z%22%2F%3E%3Cpath%20d%3D%22M20-38v42%22%2F%3E%3Cpath%20d%3D%22M24-46v-6h12v6%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-30%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-14%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M26%200h8M26%208h8%22%2F%3E%3Cpath%20d%3D%22M-40%2016v26h80v-26%22%2F%3E%3Cpath%20d%3D%22M-40%2030h80%22%2F%3E%3Cpath%20d%3D%22M-34%2042v6M34%2042v6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28540%2C74%29%20rotate%280%29%20scale%280.84%29%22%3E%3Cpath%20d%3D%22M-52%2020l16-40h72l16%2040z%22%2F%3E%3Cpath%20d%3D%22M-52%2020h104%22%2F%3E%3Cpath%20d%3D%22M-46%2010h92%22%2F%3E%3Cpath%20d%3D%22M-32-10l8%2020M-16-10l8%2020M0-10l8%2020M16-10l8%2020M32-10l-8%2020%22%2F%3E%3Cpath%20d%3D%22M-30-20v-12M30-20v-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28108%2C292%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-48-38h96v30h-96zM-48-4h96v30h-96z%22%2F%3E%3Cpath%20d%3D%22M-38-32h64v18h-64zM-38%202h64v18h-64z%22%2F%3E%3Cpath%20d%3D%22M32-32h10v18h-10zM32%202h10v18h-10z%22%2F%3E%3Cpath%20d%3D%22M-48%2026v14h96v-14%22%2F%3E%3Cpath%20d%3D%22M-40%2040v6M40%2040v6%22%2F%3E%3Cpath%20d%3D%22M30-38v-8h10v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28316%2C268%29%20rotate%280%29%20scale%280.86%29%22%3E%3Cpath%20d%3D%22M-42-24h38v40h-38zM4-24h38v40h-38z%22%2F%3E%3Cpath%20d%3D%22M-36-18h26v26h-26zM10-18h26v26h-26z%22%2F%3E%3Cpath%20d%3D%22M-36-18l-12-14M10-18l-12-14%22%2F%3E%3Cpath%20d%3D%22M-42%2016v10h-6M42%2016v10h6%22%2F%3E%3Ccircle%20cx%3D%22-23%22%20cy%3D%2222%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2222%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28528%2C276%29%20rotate%280%29%20scale%280.78%29%22%3E%3Cpath%20d%3D%22M-32-46h64v84h-64z%22%2F%3E%3Cpath%20d%3D%22M-25-39h50v70h-50z%22%2F%3E%3Cpath%20d%3D%22M18-8h12v10h-12z%22%2F%3E%3Cpath%20d%3D%22M24%202v10%22%2F%3E%3Cpath%20d%3D%22M-32-30h-8v10h8M-32%2014h-8v10h8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2896%2C486%29%20rotate%280%29%20scale%280.82%29%22%3E%3Cpath%20d%3D%22M-46-22h92v40h-92z%22%2F%3E%3Cpath%20d%3D%22M-60%204h120%22%2F%3E%3Cpath%20d%3D%22M-56%204v6h112v-6%22%2F%3E%3Cpath%20d%3D%22M-40%204v-14h60v14%22%2F%3E%3Cpath%20d%3D%22M-30%2010v6M-14%2010v6M2%2010v6M18%2010v6M34%2010v6%22%2F%3E%3Cpath%20d%3D%22M-40%2018v10M40%2018v10%22%2F%3E%3Cpath%20d%3D%22M32-22v-8h12v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28320%2C466%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-56-10h112v30h-112z%22%2F%3E%3Cpath%20d%3D%22M-60-10h120%22%2F%3E%3Cpath%20d%3D%22M-48-22h28v12h-28zM-14-22h28v12h-28zM20-22h28v12h-28z%22%2F%3E%3Cpath%20d%3D%22M-50%208h100%22%2F%3E%3Ccircle%20cx%3D%22-44%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28524%2C470%29%20rotate%280%29%20scale%280.78%29%22%3E%3Cpath%20d%3D%22M-28-48h56v82h-56z%22%2F%3E%3Cpath%20d%3D%22M-28-30h56%22%2F%3E%3Cpath%20d%3D%22M20-24v34%22%2F%3E%3Cpath%20d%3D%22M-20-42h40v10h-40z%22%2F%3E%3Cpath%20d%3D%22M-22%2034v8M22%2034v8%22%2F%3E%3Ccircle%20cx%3D%22-16%22%20cy%3D%2242%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2242%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28636%2C148%29%20rotate%280%29%20scale%280.72%29%22%3E%3Cpath%20d%3D%22M-46-16h92v30h-92z%22%2F%3E%3Cpath%20d%3D%22M-42-24h84%22%2F%3E%3Cpath%20d%3D%22M-36-24v-8M-24-24v-8M-12-24v-8M0-24v-8M12-24v-8M24-24v-8M36-24v-8%22%2F%3E%3Cpath%20d%3D%22M-38%206h76%22%2F%3E%3Ccircle%20cx%3D%22-30%22%20cy%3D%22-4%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-40%2014v10M40%2014v10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28646%2C386%29%20rotate%280%29%20scale%280.70%29%22%3E%3Cpath%20d%3D%22M-46-22h92v30h-92z%22%2F%3E%3Cpath%20d%3D%22M-38-15h76M-38-7h76M-38%201h76%22%2F%3E%3Cpath%20d%3D%22M-46%208v10M46%208v10%22%2F%3E%3Cpath%20d%3D%22M-40%2018h80%22%2F%3E%3Cpath%20d%3D%22M-34%2018v6M0%2018v6M34%2018v6%22%2F%3E%3Cpath%20d%3D%22M-52-22v34M52-22v34%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C620%29%20rotate%280%29%20scale%280.72%29%22%3E%3Cpath%20d%3D%22M-40-24h80a4%204%200%200%201%204%204v40a4%204%200%200%201-4%204h-80a4%204%200%200%201-4-4v-40a4%204%200%200%201%204-4z%22%2F%3E%3Cpath%20d%3D%22M-33-17h66v33h-66z%22%2F%3E%3Cpath%20d%3D%22M-14-24v-6h28v6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28430%2C616%29%20rotate%280%29%20scale%280.76%29%22%3E%3Cpath%20d%3D%22M-38%200h76v28h-76z%22%2F%3E%3Cpath%20d%3D%22M-38-30h76v30h-76z%22%2F%3E%3Cpath%20d%3D%22M-30-24h60v18h-60z%22%2F%3E%3Cpath%20d%3D%22M-20-24v18M-4-24v18M12-24v18%22%2F%3E%3Cpath%20d%3D%22M-30%208h60%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-34%2028v8M34%2028v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28620%2C620%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M-50-34h100v14h-100z%22%2F%3E%3Cpath%20d%3D%22M-50-20h100v46h-100z%22%2F%3E%3Cpath%20d%3D%22M-44-34v-8h26v8M-9-34v-8h18v8M18-34v-8h26v8%22%2F%3E%3Cpath%20d%3D%22M-42-2h84v22h-84z%22%2F%3E%3Cpath%20d%3D%22M-30%204h60%22%2F%3E%3Ccircle%20cx%3D%22-36%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-18%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-42%2026v12h6M42%2026v12h-6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22700%22%20height%3D%22700%22%20viewBox%3D%220%200%20700%20700%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230B2E6B%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20opacity%3D%220.045%22%3E%3Cg%20transform%3D%22translate%28104%2C92%29%20rotate%280%29%20scale%280.86%29%22%3E%3Cpath%20d%3D%22M-50-34h100v14h-100z%22%2F%3E%3Cpath%20d%3D%22M-50-20h100v46h-100z%22%2F%3E%3Cpath%20d%3D%22M-44-34v-8h26v8M-9-34v-8h18v8M18-34v-8h26v8%22%2F%3E%3Cpath%20d%3D%22M-42-2h84v22h-84z%22%2F%3E%3Cpath%20d%3D%22M-30%204h60%22%2F%3E%3Ccircle%20cx%3D%22-36%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-18%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-42%2026v12h6M42%2026v12h-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28322%2C84%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-40-46h80v62h-80z%22%2F%3E%3Cpath%20d%3D%22M-33-39h48v48h-48z%22%2F%3E%3Cpath%20d%3D%22M20-38v42%22%2F%3E%3Cpath%20d%3D%22M24-46v-6h12v6%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-30%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-14%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M26%200h8M26%208h8%22%2F%3E%3Cpath%20d%3D%22M-40%2016v26h80v-26%22%2F%3E%3Cpath%20d%3D%22M-40%2030h80%22%2F%3E%3Cpath%20d%3D%22M-34%2042v6M34%2042v6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28540%2C74%29%20rotate%280%29%20scale%280.84%29%22%3E%3Cpath%20d%3D%22M-52%2020l16-40h72l16%2040z%22%2F%3E%3Cpath%20d%3D%22M-52%2020h104%22%2F%3E%3Cpath%20d%3D%22M-46%2010h92%22%2F%3E%3Cpath%20d%3D%22M-32-10l8%2020M-16-10l8%2020M0-10l8%2020M16-10l8%2020M32-10l-8%2020%22%2F%3E%3Cpath%20d%3D%22M-30-20v-12M30-20v-12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28108%2C292%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-48-38h96v30h-96zM-48-4h96v30h-96z%22%2F%3E%3Cpath%20d%3D%22M-38-32h64v18h-64zM-38%202h64v18h-64z%22%2F%3E%3Cpath%20d%3D%22M32-32h10v18h-10zM32%202h10v18h-10z%22%2F%3E%3Cpath%20d%3D%22M-48%2026v14h96v-14%22%2F%3E%3Cpath%20d%3D%22M-40%2040v6M40%2040v6%22%2F%3E%3Cpath%20d%3D%22M30-38v-8h10v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28316%2C268%29%20rotate%280%29%20scale%280.86%29%22%3E%3Cpath%20d%3D%22M-42-24h38v40h-38zM4-24h38v40h-38z%22%2F%3E%3Cpath%20d%3D%22M-36-18h26v26h-26zM10-18h26v26h-26z%22%2F%3E%3Cpath%20d%3D%22M-36-18l-12-14M10-18l-12-14%22%2F%3E%3Cpath%20d%3D%22M-42%2016v10h-6M42%2016v10h6%22%2F%3E%3Ccircle%20cx%3D%22-23%22%20cy%3D%2222%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2222%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28528%2C276%29%20rotate%280%29%20scale%280.78%29%22%3E%3Cpath%20d%3D%22M-32-46h64v84h-64z%22%2F%3E%3Cpath%20d%3D%22M-25-39h50v70h-50z%22%2F%3E%3Cpath%20d%3D%22M18-8h12v10h-12z%22%2F%3E%3Cpath%20d%3D%22M24%202v10%22%2F%3E%3Cpath%20d%3D%22M-32-30h-8v10h8M-32%2014h-8v10h8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2896%2C486%29%20rotate%280%29%20scale%280.82%29%22%3E%3Cpath%20d%3D%22M-46-22h92v40h-92z%22%2F%3E%3Cpath%20d%3D%22M-60%204h120%22%2F%3E%3Cpath%20d%3D%22M-56%204v6h112v-6%22%2F%3E%3Cpath%20d%3D%22M-40%204v-14h60v14%22%2F%3E%3Cpath%20d%3D%22M-30%2010v6M-14%2010v6M2%2010v6M18%2010v6M34%2010v6%22%2F%3E%3Cpath%20d%3D%22M-40%2018v10M40%2018v10%22%2F%3E%3Cpath%20d%3D%22M32-22v-8h12v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28320%2C466%29%20rotate%280%29%20scale%280.80%29%22%3E%3Cpath%20d%3D%22M-56-10h112v30h-112z%22%2F%3E%3Cpath%20d%3D%22M-60-10h120%22%2F%3E%3Cpath%20d%3D%22M-48-22h28v12h-28zM-14-22h28v12h-28zM20-22h28v12h-28z%22%2F%3E%3Cpath%20d%3D%22M-50%208h100%22%2F%3E%3Ccircle%20cx%3D%22-44%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2224%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28524%2C470%29%20rotate%280%29%20scale%280.78%29%22%3E%3Cpath%20d%3D%22M-28-48h56v82h-56z%22%2F%3E%3Cpath%20d%3D%22M-28-30h56%22%2F%3E%3Cpath%20d%3D%22M20-24v34%22%2F%3E%3Cpath%20d%3D%22M-20-42h40v10h-40z%22%2F%3E%3Cpath%20d%3D%22M-22%2034v8M22%2034v8%22%2F%3E%3Ccircle%20cx%3D%22-16%22%20cy%3D%2242%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2242%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28636%2C148%29%20rotate%280%29%20scale%280.72%29%22%3E%3Cpath%20d%3D%22M-46-16h92v30h-92z%22%2F%3E%3Cpath%20d%3D%22M-42-24h84%22%2F%3E%3Cpath%20d%3D%22M-36-24v-8M-24-24v-8M-12-24v-8M0-24v-8M12-24v-8M24-24v-8M36-24v-8%22%2F%3E%3Cpath%20d%3D%22M-38%206h76%22%2F%3E%3Ccircle%20cx%3D%22-30%22%20cy%3D%22-4%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-40%2014v10M40%2014v10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28646%2C386%29%20rotate%280%29%20scale%280.70%29%22%3E%3Cpath%20d%3D%22M-46-22h92v30h-92z%22%2F%3E%3Cpath%20d%3D%22M-38-15h76M-38-7h76M-38%201h76%22%2F%3E%3Cpath%20d%3D%22M-46%208v10M46%208v10%22%2F%3E%3Cpath%20d%3D%22M-40%2018h80%22%2F%3E%3Cpath%20d%3D%22M-34%2018v6M0%2018v6M34%2018v6%22%2F%3E%3Cpath%20d%3D%22M-52-22v34M52-22v34%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C620%29%20rotate%280%29%20scale%280.72%29%22%3E%3Cpath%20d%3D%22M-40-24h80a4%204%200%200%201%204%204v40a4%204%200%200%201-4%204h-80a4%204%200%200%201-4-4v-40a4%204%200%200%201%204-4z%22%2F%3E%3Cpath%20d%3D%22M-33-17h66v33h-66z%22%2F%3E%3Cpath%20d%3D%22M-14-24v-6h28v6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28430%2C616%29%20rotate%280%29%20scale%280.76%29%22%3E%3Cpath%20d%3D%22M-38%200h76v28h-76z%22%2F%3E%3Cpath%20d%3D%22M-38-30h76v30h-76z%22%2F%3E%3Cpath%20d%3D%22M-30-24h60v18h-60z%22%2F%3E%3Cpath%20d%3D%22M-20-24v18M-4-24v18M12-24v18%22%2F%3E%3Cpath%20d%3D%22M-30%208h60%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-34%2028v8M34%2028v8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28620%2C620%29%20rotate%280%29%20scale%280.68%29%22%3E%3Cpath%20d%3D%22M-50-34h100v14h-100z%22%2F%3E%3Cpath%20d%3D%22M-50-20h100v46h-100z%22%2F%3E%3Cpath%20d%3D%22M-44-34v-8h26v8M-9-34v-8h18v8M18-34v-8h26v8%22%2F%3E%3Cpath%20d%3D%22M-42-2h84v22h-84z%22%2F%3E%3Cpath%20d%3D%22M-30%204h60%22%2F%3E%3Ccircle%20cx%3D%22-36%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22-18%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22-11%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M-42%2026v12h6M42%2026v12h-6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:700px 700px, 470px 470px;
  background-position:0 0, 235px 150px;
  background-attachment:fixed, fixed;
}
/* Anything carrying text or data sits on its own solid ground, so the drawing
   behind it never costs legibility. */
.card, table.spec, .model, .gallery .main, .thumbs button, .hf-quote-in,
.filter input, .hf-search input, .q-out, .route-grid a, .step{
  background-color:#fff;
}
.shell{ background-color:rgba(246,247,249,.9); }
.crumbs{ background-color:rgba(252,253,254,.92); }
header.site{ background:rgba(255,255,255,.95); }
.hero{
  background:radial-gradient(120% 100% at 88% 0%, rgba(242,246,252,.92) 0%,
             rgba(255,255,255,.78) 62%);
}
.index-sec, .routes{ background:rgba(255,255,255,.78); }
.prose .wrap{ background:rgba(255,255,255,.9); }
@media print{ body{ background-image:none; } }