/* ============================================================
   25A Print Shop — site.css
   One stylesheet, every page. Extends the type and color of the
   old one-pager rather than replacing it: Fraunces for anything
   big, Inter for everything else, hard edges, hairline rules,
   no rounded corners except the pill buttons that were already
   there. The new material is the photography — it runs full
   bleed and edge to edge, and it is the only thing on the site
   allowed to be messy.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --black:#0a0a0a;
  --offblack:#1a1a1a;
  --dgray:#2e2e2e;
  --mgray:#767676;      /* darkened from #888 — #888 on white fails WCAG AA */
  --lgray:#ddd;
  --offwhite:#f5f5f5;
  --white:#fff;
  --wrap:1040px;
  --pad:40px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--black);background:var(--white);line-height:1.6;
     font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
img,picture,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid #0a0a0a;outline-offset:3px}
.hero :focus-visible,footer :focus-visible,.band :focus-visible,.tail :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--black);color:#fff;
      padding:12px 18px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- type scale ---------- */
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.06;font-weight:900}
h1{font-size:clamp(38px,6.4vw,72px)}
h2{font-size:clamp(24px,3.6vw,40px)}
h3{font-size:clamp(18px,2vw,22px);line-height:1.25}
.eyebrow{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:4px;
         text-transform:uppercase;color:var(--mgray);margin-bottom:12px}
.lede{font-size:clamp(16px,1.7vw,19px);color:var(--dgray);max-width:60ch;line-height:1.7}
.sub{font-size:15px;color:var(--mgray);max-width:62ch;line-height:1.75;margin-top:14px}
.prose p{margin-top:14px;color:var(--dgray);max-width:66ch}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--black)}
.prose a{color:var(--black);font-weight:700;text-underline-offset:3px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--lgray)}
.bar-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
        display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.bar-brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.bar-logo{height:74px;width:auto}
.bar-rule{width:1px;height:30px;background:var(--lgray)}
.bar-bns{height:38px;width:auto;opacity:.75;transition:opacity .2s}
.bar-bns:hover{opacity:1}
.bar-nav{display:flex;align-items:center;gap:26px}
.bar-nav a{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
           text-decoration:none;color:var(--black);opacity:.5;transition:opacity .18s;
           padding:6px 0;border-bottom:2px solid transparent}
.bar-nav a:hover{opacity:1}
.bar-nav a[aria-current=page]{opacity:1;border-bottom-color:var(--black)}
.bar-cta{opacity:1 !important;background:var(--black);color:#fff !important;
         padding:11px 18px !important;border-bottom:none !important}
.bar-cta:hover{background:var(--dgray)}
.navtoggle,.burger{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 28px;font-family:var(--body);font-size:12px;font-weight:700;
     letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;border:1px solid transparent;
     cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn-fill{background:#fff;color:var(--black)}
.btn-fill:hover{background:var(--lgray)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn-line:hover{border-color:#fff}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:var(--dgray)}
.btn-ghost{background:transparent;color:var(--black);border-color:var(--black)}
.btn-ghost:hover{background:var(--black);color:#fff}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* ---------- hero banner ---------- */
.hero{position:relative;background:var(--black);color:#fff;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
/* <picture> inherits height:auto from the global img rule, and an <img> set to
   height:100% of an auto-height parent resolves back to auto — which left the
   banner photo sitting at its natural ratio with black below it. */
.hero-media picture,.band-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.86) 34%,rgba(10,10,10,.5) 62%,rgba(10,10,10,.34) 100%)}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:74px var(--pad) 84px}
.hero-mark{width:min(330px,66%);height:auto;margin-bottom:26px}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
              color:rgba(255,255,255,.55);margin-bottom:18px}
.hero h1{margin-bottom:22px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero p{font-size:16.5px;color:rgba(255,255,255,.78);max-width:50ch;line-height:1.72}
.hero-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:46px;
            border-top:1px solid rgba(255,255,255,.18)}
.hero-facts div{padding:18px 26px 4px 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.14)}
.hero-facts div:last-child{border-right:none}
.hero-facts b{display:block;font-family:var(--display);font-size:26px;font-weight:900;letter-spacing:-.02em}
.hero-facts span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ---------- page header (inner pages) ---------- */
.phead{background:var(--black);color:#fff;padding:64px 0 60px}
.phead .eyebrow{color:rgba(255,255,255,.45)}
.phead p{color:rgba(255,255,255,.7);max-width:58ch;margin-top:20px;font-size:16.5px;line-height:1.72}
.crumbs{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:22px}
.crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.crumbs a:hover{color:#fff}

/* ---------- sections ---------- */
section{padding:76px 0}
section.tight{padding:56px 0}
.shade{background:var(--offwhite);border-top:1px solid var(--lgray);border-bottom:1px solid var(--lgray)}
.dark{background:var(--black);color:#fff}
.dark .eyebrow{color:rgba(255,255,255,.45)}
.dark .sub,.dark .prose p{color:rgba(255,255,255,.62)}
.dark .prose strong,.dark .prose a{color:#fff}
.head-block{margin-bottom:44px}

/* ---------- pillar grid ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:1px;
         background:var(--lgray);border:1px solid var(--lgray)}
.pillar{background:#fff;padding:28px 24px}
.pillar h3{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.6px;
           text-transform:uppercase;margin-bottom:9px;line-height:1.4}
.pillar p{font-size:13.5px;color:var(--mgray);line-height:1.7}
.dark .pillars{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.dark .pillar{background:var(--black)}
.dark .pillar h3{color:#fff}
.dark .pillar p{color:rgba(255,255,255,.58)}

/* ---------- two-column split with a photograph ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Grid items are min-width:auto by default, so a wide table inside .scroller
   drags its whole column past the viewport instead of scrolling on its own.
   This is what caused a horizontal scroll on the phone homepage. */
.split>*,.napgrid>*,.pillars>*,.notes>*,.strip>*{min-width:0}
.split.narrow-left{grid-template-columns:.85fr 1.15fr}
.split.narrow-right{grid-template-columns:1.15fr .85fr}

/* ---------- figures ---------- */
.fig figcaption{font-size:12px;line-height:1.6;color:var(--mgray);margin-top:10px;
                padding-top:10px;border-top:1px solid var(--lgray);max-width:52ch}
.dark .fig figcaption{color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.16)}

/* ---------- full-bleed photo band ---------- */
.band{position:relative;background:var(--black);color:#fff;overflow:hidden;isolation:isolate}
.band-media{position:absolute;inset:0;z-index:-2}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.66)}
.band-in{max-width:var(--wrap);margin:0 auto;padding:96px var(--pad)}
.band h2{max-width:18ch}
.band p{color:rgba(255,255,255,.75);max-width:52ch;margin-top:18px;font-size:16px;line-height:1.75}

/* ---------- gallery ---------- */
.gallery{columns:3;column-gap:16px}
.gallery .fig{break-inside:avoid;margin:0 0 16px}
.gallery figcaption{border-top-color:var(--lgray)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:40px}
.strip img{width:100%}

/* ---------- rate tables ---------- */
.rate{margin-bottom:34px}
.rate-head{background:var(--black);color:#fff;padding:14px 18px;display:flex;
           justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.rate-head h3{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.rate-head span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.swipe{display:none;font-size:12px;color:var(--mgray);padding:0 18px 12px;
       border:1px solid var(--lgray);border-top:none;background:var(--offwhite)}
.rate-blurb{font-size:13.5px;color:var(--mgray);line-height:1.7;padding:14px 18px;
            border:1px solid var(--lgray);border-top:none;background:var(--offwhite)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;border:1px solid var(--lgray);border-top:none;
      min-width:440px;background:#fff}
caption{caption-side:bottom;text-align:left;font-size:12px;color:var(--mgray);padding:10px 2px}
thead tr{background:var(--offwhite)}
th,td{padding:12px 14px;font-size:14px;text-align:center;border-bottom:1px solid var(--lgray)}
thead th{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--black)}
thead th:first-child,tbody th{text-align:left}
tbody th{font-weight:700;font-size:14px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}

/* ---------- process steps ---------- */
.steps{border-top:1px solid var(--lgray)}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--lgray)}
.step-n{font-family:var(--display);font-size:34px;font-weight:900;line-height:1;color:var(--lgray)}
.step h3{margin-bottom:8px}
.step p{font-size:14.5px;color:var(--mgray);line-height:1.75;max-width:62ch}
.step p+p{margin-top:10px}

/* ---------- notes grid ---------- */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:36px 40px}
.note h3{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:1.4px;
         text-transform:uppercase;margin-bottom:9px}
.note p{font-size:13.5px;color:var(--mgray);line-height:1.75}
.note a{color:var(--black);font-weight:700}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--lgray)}
.faq-item{border-bottom:1px solid var(--lgray);padding:24px 2px}
.faq-item h2,
.faq-item h3{font-family:var(--body);font-size:16.5px;font-weight:700;letter-spacing:0;margin-bottom:9px;line-height:1.4}
.faq-item p{font-size:14.5px;color:var(--mgray);line-height:1.75;max-width:70ch}
.faq-item p+p{margin-top:10px}
.faq-item a{color:var(--black);font-weight:700}

/* ---------- forms ---------- */
.card{background:#fff;border:1px solid var(--lgray);padding:clamp(24px,4vw,40px);max-width:600px}
.field{margin-bottom:20px}
label{display:block;font-size:11px;font-weight:700;margin-bottom:7px;
      text-transform:uppercase;letter-spacing:1.2px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--lgray);border-radius:0;
  font-size:15px;font-family:inherit;background:#fff;-webkit-appearance:none;transition:border-color .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
textarea{resize:vertical;min-height:96px}
select{background-image:linear-gradient(45deg,transparent 50%,#0a0a0a 50%),linear-gradient(135deg,#0a0a0a 50%,transparent 50%);
       background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input[type=file]{width:100%;padding:13px 14px;border:1px dashed var(--lgray);background:#fff;font-size:13px;font-family:inherit}
.wide-btn{width:100%;padding:15px;font-size:12px;letter-spacing:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.checkbox{background:var(--offwhite);border:1px solid var(--lgray);padding:15px 16px}
.checkbox label{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.65;
                color:var(--dgray);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;margin:0}
.checkbox input{margin-top:2px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--black)}
.hint{font-size:12.5px;color:var(--mgray);margin-top:8px;line-height:1.6}
.art-box{border:1px solid var(--lgray);padding:20px}
.art-box p{font-size:13.5px;line-height:1.7;color:var(--mgray);margin-bottom:10px}
.art-box ul{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--mgray)}
.art-box strong{color:var(--black)}
.art-box a{color:var(--black);font-weight:700}
.callout{margin-top:18px;padding:14px 16px;background:var(--offwhite);border-left:3px solid var(--black);
         font-size:13px;line-height:1.7;color:var(--mgray)}
.callout strong{color:var(--black)}
.callout a{color:var(--black);font-weight:700}

/* ---------- quote result ---------- */
.result{margin-top:28px;border-top:1px solid var(--lgray);padding-top:28px;display:none}
.result.show{display:block}
.result-for{font-size:10px;font-weight:700;color:var(--mgray);text-transform:uppercase;letter-spacing:2px;margin-bottom:5px}
.result-name{font-family:var(--display);font-size:28px;font-weight:900;margin-bottom:22px;letter-spacing:-.02em;line-height:1.1}
.r-line{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
        border-bottom:1px solid var(--lgray);font-size:13.5px;color:var(--mgray)}
.r-line span:last-child{color:var(--black);font-weight:600;text-align:right}
.price-box{margin-top:20px;background:var(--black);color:#fff;padding:20px 24px;
           display:flex;justify-content:space-between;align-items:center;gap:16px}
.price-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.price-big{font-family:var(--display);font-size:clamp(30px,5vw,42px);font-weight:900;letter-spacing:-.02em;line-height:1}
.profit{margin-top:2px;border:1px solid var(--lgray);border-top:none;padding:16px 20px}
.profit-t{font-size:10px;font-weight:700;color:var(--mgray);text-transform:uppercase;letter-spacing:1.6px;margin-bottom:12px}
.profit-r{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0}
.profit-r span:last-child{font-weight:700}
.status{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--mgray);display:none}
.status.show{display:block}
.status.ok{color:#1f6f3d}
.status.err{color:#9b1c1c}
button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- closing CTA + footer ---------- */
.tail{background:var(--offblack);color:#fff;padding:62px 0}
.tail-in{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.tail .eyebrow{color:rgba(255,255,255,.4)}
.tail-h{font-size:clamp(24px,3.4vw,36px)}
.tail-p{color:rgba(255,255,255,.6);margin-top:12px;max-width:44ch;font-size:15px}
.tail-btns{display:flex;gap:12px;flex-wrap:wrap}

footer{background:var(--black);color:#fff;padding:60px 0 36px}
.foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(182px,1fr));gap:36px;
         padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-col h2{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:3px;
             text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:14px}
.foot-col a,.foot-col p,.foot-col address{display:block;font-size:13.5px;color:rgba(255,255,255,.62);
        line-height:1.95;text-decoration:none;font-style:normal}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;
             padding-top:28px;flex-wrap:wrap;gap:16px}
.foot-logo{height:34px;width:auto}
.foot-bottom p{font-size:11px;color:rgba(255,255,255,.3)}
.bns{display:flex;align-items:center;gap:10px;text-decoration:none}
.bns span{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.bns img{height:32px;width:auto}
.bns:hover span{color:rgba(255,255,255,.75)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .gallery{columns:2}
  .split,.split.narrow-left,.split.narrow-right{grid-template-columns:1fr;gap:32px}
}
@media(max-width:820px){
  :root{--pad:22px}
  .bar-in{min-height:66px}
  .bar-logo{height:54px}
  .bar-bns{height:28px}

  /* CSS-only mobile menu: a hidden checkbox drives the panel.
     No JS, so the menu works before scripts load. */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
          width:44px;height:44px;padding:10px;cursor:pointer;margin-left:auto}
  .burger span{display:block;height:2px;background:var(--black);transition:transform .2s,opacity .2s}
  .navtoggle:checked+.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked+.burger span:nth-child(2){opacity:0}
  .navtoggle:checked+.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .bar-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
           align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--lgray);
           box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}
  .navtoggle:checked~.bar-nav{display:flex}
  .bar-nav a{opacity:1;padding:16px var(--pad);border-bottom:1px solid var(--lgray);font-size:13px}
  .bar-nav a[aria-current=page]{border-bottom-color:var(--lgray);background:var(--offwhite)}
  .bar-cta{padding:17px var(--pad) !important;text-align:center}
  .bar{position:relative}

  .hero-in{padding:52px var(--pad) 60px}
  .hero-mark{width:min(240px,64%)}
  .hero::after{background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.72) 42%,rgba(10,10,10,.9) 100%)}
  .hero-facts div{padding-right:18px;margin-right:18px}
  .band-in{padding:66px var(--pad)}
  section{padding:56px 0}
  .row2{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step-n{font-size:26px}
  .swipe{display:block}
  .tail-in{align-items:flex-start}
}
@media(max-width:560px){
  .gallery{columns:1}
  .foot-bottom{justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media print{
  .bar,.tail,.hero-media,.band-media,.btns{display:none}
  body{color:#000}
}

/* ---------- long-form document pages (artwork guidelines) ---------- */
.doc{max-width:74ch}
.doc h2{font-size:clamp(22px,3vw,30px);margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--lgray)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:none}
.doc h3{font-family:var(--body);font-size:16px;font-weight:700;letter-spacing:0;margin:30px 0 10px}
.doc p{font-size:15.5px;line-height:1.78;color:var(--dgray);margin-bottom:14px}
.doc p.lead{font-size:18px;font-weight:600;color:var(--black)}
.doc strong{color:var(--black);font-weight:700}
.doc a{color:var(--black);font-weight:700}
.doc ul,.doc ol{margin:0 0 18px 20px;font-size:15.5px;line-height:1.78;color:var(--dgray)}
.doc li{margin-bottom:9px}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
          background:var(--offwhite);border:1px solid var(--lgray);padding:2px 6px}
.doc ol.numbered{counter-reset:s;list-style:none;margin-left:0}
.doc ol.numbered li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:14px}
.doc ol.numbered li::before{content:counter(s);position:absolute;left:0;top:-1px;
  width:28px;height:28px;background:var(--black);color:#fff;font-family:var(--body);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.doc ol.numbered li span{display:block;font-size:13.5px;color:var(--mgray);margin-top:4px}
.tiers{display:grid;gap:1px;background:var(--lgray);border:1px solid var(--lgray);margin:22px 0 8px}
.tier{background:#fff;padding:22px 24px}
.tier-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.tier-best{border-left:4px solid #1f6f3d}
.tier-ok{border-left:4px solid #0a0a0a}
.tier-no{border-left:4px solid #9b1c1c}
.tier p{margin:0;font-size:14.5px}
.box{background:var(--offwhite);border:1px solid var(--lgray);padding:20px 24px;margin:22px 0}
.box p:last-child{margin-bottom:0}
.doc .callout{margin:26px 0;padding:22px 24px;font-size:14.5px}
.doc .callout h3{margin:0 0 10px;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.doc .callout p{font-size:14px;color:var(--mgray)}
.doc .callout p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.napgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.nap{font-style:normal;font-size:17px;line-height:1.9}
.nap a{color:var(--black);font-weight:700}
.mapframe{border:1px solid var(--lgray);width:100%;aspect-ratio:4/3;display:block}
@media(max-width:820px){.napgrid{grid-template-columns:1fr;gap:32px}}