/* Self-hosted. The build originally pulled these from fonts.googleapis.com,
   which is a render-blocking third-party request and leaks every visitor's IP
   to Google. Every other site in this fleet self-hosts; this one now does too. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(font/plex-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(font/plex-600.woff2) format('woff2')}

:root{
  --paper:#F2F0EC;
  --paper-deep:#E5E2DB;
  --ink:#2B3336;
  --accent:#8F4F39;
  --rule:rgba(43,51,54,.20);
  --rule-soft:rgba(43,51,54,.11);

  --s-xs:13px;
  --s-sm:15px;
  --s-md:17px;
  --s-lg:21px;
  --s-xl:28px;
  --s-2xl:40px;

  --gutter:clamp(20px,4vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--s-md);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.012em;line-height:1.2}
h1{font-size:var(--s-2xl);letter-spacing:-0.024em}
h2{font-size:var(--s-xl)}
h3{font-size:var(--s-md);font-weight:600}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:50}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- off-centre spine ---------- */
.wrap{
  max-width:1160px;
  margin:0 auto 0 max(var(--gutter), min(9vw, 132px));
  padding-right:var(--gutter);
}
.spine{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media (min-width:900px){
  .spine{grid-template-columns:238px minmax(0,1fr);gap:0 clamp(40px,5.5vw,88px)}
}
.narrow{align-self:start}
.wide{min-width:0}
.prose{max-width:58ch}

/* ---------- mockup banner ---------- */
.mockup{
  background:var(--ink);color:var(--paper);
  font-size:var(--s-xs);letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:9px 0;
}
.mockup .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.mockup span{font-weight:400;letter-spacing:.03em;text-transform:none;font-size:var(--s-xs)}

/* ---------- header ---------- */
.site-head{padding:26px 0 24px;border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;justify-content:space-between}
.mark{margin:0;font-size:var(--s-lg);font-weight:600;letter-spacing:-0.015em;line-height:1.25}
.mark b{display:block;font-weight:400;font-size:var(--s-xs);letter-spacing:.13em;text-transform:uppercase;margin-top:5px}
.head-call{
  font-size:var(--s-md);font-weight:600;text-decoration:none;color:var(--paper);
  background:var(--accent);padding:9px 18px;display:inline-block;border-radius:2px;
}
.head-call:hover{background:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,86px) 0 0}
.hero .spine{align-items:end}
.hero h1{max-width:15ch}
.hero .lede{margin-top:26px;max-width:44ch;font-size:var(--s-lg);line-height:1.6}
.hero-meta{margin-top:30px;font-size:var(--s-sm);line-height:1.7}
.hero-fig{margin:38px 0 0;grid-column:1/-1}
@media (min-width:900px){
  .hero{padding-bottom:0}
  .hero .spine{grid-template-columns:minmax(0,1fr) 44%}
  .hero-fig{grid-column:auto;margin:0}
  .hero-fig img{filter:saturate(.82) contrast(1.02)}
}
.figcap{font-size:var(--s-xs);line-height:1.6;margin-top:10px;max-width:42ch}

/* ---------- anchor row ---------- */
.anchors{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:clamp(44px,6vw,80px);padding:18px 0}
.anchors ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 34px}
.anchors a{font-size:var(--s-xs);letter-spacing:.11em;text-transform:uppercase;font-weight:600;text-decoration:none;padding:4px 0;display:inline-block}
.anchors a:hover{box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- sections ---------- */
section{scroll-margin-top:24px}
.band{padding:clamp(52px,7vw,102px) 0}
.band + .band{border-top:1px solid var(--rule-soft)}

.label{
  font-size:var(--s-xs);letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  margin:0 0 16px;
}
.specs{margin:0;font-size:var(--s-sm);line-height:1.7}
.specs dt{font-weight:600;margin-top:18px}
.specs dt:first-of-type{margin-top:0}
.specs dd{margin:2px 0 0}
.narrow > .note{font-size:var(--s-xs);line-height:1.65;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-soft)}

.wide h2 + p{margin-top:22px}
.stack{margin-top:34px}
.stack h3{margin-bottom:6px}
.stack > div + div{margin-top:26px;padding-top:26px;border-top:1px solid var(--rule-soft)}

/* ---------- full bleed ---------- */
.bleed{margin:0;position:relative}
.bleed img{width:100%;object-fit:cover;height:clamp(300px,52vw,620px);filter:saturate(.8) contrast(1.02)}
.bleed figcaption{
  font-size:var(--s-xs);line-height:1.6;padding:12px var(--gutter) 0;
  max-width:56ch;margin-left:max(var(--gutter), min(9vw, 132px));
}

/* ---------- image pair ---------- */
.pair{display:grid;grid-template-columns:1fr;gap:20px;margin:34px 0 0}
@media (min-width:720px){.pair{grid-template-columns:1.35fr 1fr;gap:26px;align-items:start}}
.pair figure{margin:0}
.pair img{filter:saturate(.82) contrast(1.02)}
.pair figure:nth-child(2){padding-top:44px}

/* ---------- rates ---------- */
.rates{margin:0;font-size:var(--s-sm);line-height:1.7;border-top:1px solid var(--rule)}
.rates .row{display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.rates .row b{font-weight:600}
.rates .row span{font-variant-numeric:tabular-nums}
.rates .row i{display:block;width:100%;font-style:normal;font-size:var(--s-xs);line-height:1.55}

/* ---------- contact ---------- */
.contact-dl{margin:0;font-size:var(--s-sm);line-height:1.7}
.contact-dl dt{font-weight:600;margin-top:18px}
.contact-dl dt:first-of-type{margin-top:0}
.contact-dl dd{margin:2px 0 0}
.contact-dl a{color:var(--accent)}

/* ---------- footer ---------- */
.site-foot{background:var(--paper-deep);padding:clamp(46px,6vw,78px) 0;font-size:var(--s-sm);line-height:1.7}
.site-foot h2{font-size:var(--s-md);margin-bottom:18px}
.site-foot .prose{max-width:74ch}
.site-foot a{color:var(--accent)}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}