/* Stoltzfus Web & Office - one stylesheet for the whole site.
   The palette is taken straight off the SWO logo, the same numbers
   used in the BrandScript deck, so the site and the deck match. */

:root{
  --navy:#1c3557;
  --navy-dk:#16304f;
  --navy-lt:#274a76;
  --char:#3d444a;
  --slate:#6b7480;
  --mist:#afc2d8;
  --card:#eff3f8;
  --edge:#dce4ee;
  --paper:#f7f9fc;
  --white:#fff;
  --flag:#a8571c;
  --radius:12px;
  --shadow:0 1px 2px rgba(28,53,87,.06),0 10px 28px rgba(28,53,87,.09);
  --shadow-lg:0 4px 8px rgba(28,53,87,.08),0 26px 64px rgba(28,53,87,.16);
  --serif:"Source Serif 4",Cambria,Georgia,"Times New Roman",serif;
  --sans:"Inter",Calibri,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--char);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0 0 .5em;color:var(--navy);letter-spacing:-.008em}
h1{font-size:clamp(2.2rem,5vw,3.7rem)}
h2{font-size:clamp(1.65rem,3.1vw,2.5rem)}
h3{font-size:1.24rem}
h4{font-size:1rem}
p{margin:0 0 1.1em}
strong{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.mid{max-width:920px}
.center{text-align:center}
section{padding:78px 0}
.tight{padding:46px 0}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .9em;
}
.lede{font-size:1.19rem;color:var(--slate)}
.small{font-size:.88rem;color:var(--slate)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:0}

/* ---------- header ---------- */
.topbar{background:var(--navy-dk);color:var(--mist);font-size:.82rem;padding:8px 0;font-weight:600}
.topbar .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline}

header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* The horizontal lockup, mark plus wordmark. Big enough to actually read
   the word STOLTZFUS, which the stacked poster logo never was at this
   size. It scales down with the viewport rather than at fixed steps. */
.brand img{height:clamp(42px,4.4vw,58px);width:auto}
.nav ul{display:flex;gap:19px;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav ul a{text-decoration:none;color:var(--char);font-weight:600;font-size:.89rem;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}

/* the hamburger, hidden on a desktop and the only nav control on a phone */
.navtoggle{
  display:none;background:transparent;border:2px solid var(--edge);border-radius:9px;
  padding:9px 11px;cursor:pointer;line-height:0;box-shadow:none;
}
.navtoggle:hover{border-color:var(--navy)}
.navtoggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}
.navtoggle span + span{margin-top:5px}

@media(max-width:1080px){
  /* Seven links and a button will not sit on one line on a phone, and a
     wrapped nav pushes the whole page down. So below 1080 it folds. */
  .navtoggle{display:block;order:3}
  .nav{flex-wrap:nowrap;gap:12px}
  .nav .brand{order:1;margin-right:auto}
  .nav > .btn{order:2;padding:9px 16px;font-size:.85rem}
  .nav ul{
    order:4;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    gap:0;margin:6px 0 10px;border-top:1px solid var(--edge);
  }
  .nav ul.open{display:flex}
  .nav ul li{border-bottom:1px solid var(--edge)}
  .nav ul a{display:block;padding:14px 2px;font-size:1rem;border-bottom:0}
  .nav ul a[aria-current="page"]{border-bottom:0;color:var(--navy)}
}
@media(max-width:620px){
  /* The header cannot hold the logo, the button and the menu toggle on a
     phone. Measured at 375px: the logo alone is 234px of the 327px available,
     so the row overflowed by 105px and the whole page scrolled sideways.
     Below 620 the button moves into the folded menu instead, which app.js
     clones in. The same call to action repeats at the foot of every page. */
  .nav > .btn{display:none}
  .brand img{height:36px}
  .nav{gap:10px}
  .navtoggle{padding:8px 10px}
}
@media(max-width:420px){
  .brand img{height:32px}
  .wrap{padding:0 18px}
}

/* the call to action once it is inside the folded menu */
.nav ul li.cta-item a{
  color:var(--navy);font-weight:700;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  padding:13px 26px;border-radius:100px;border:0;cursor:pointer;font-size:1rem;font-family:var(--sans);
  transition:transform .12s ease,background .12s ease;box-shadow:0 6px 18px rgba(28,53,87,.24);
}
.btn:hover{background:var(--navy-lt);transform:translateY(-1px)}
.btn.sm{padding:9px 20px;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);box-shadow:none;padding:11px 24px}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.light{background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn.light:hover{background:var(--card);color:var(--navy-dk)}
.btn.onnavy{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);box-shadow:none;padding:11px 24px}
.btn.onnavy:hover{background:#fff;color:var(--navy)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;padding:92px 0 84px;
  background:
    radial-gradient(1100px 520px at 82% -8%,rgba(175,194,216,.20),transparent 62%),
    linear-gradient(168deg,var(--navy) 0%,var(--navy-dk) 62%,#102540 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 72% 0%,#000 18%,transparent 76%);
          mask-image:radial-gradient(120% 90% at 72% 0%,#000 18%,transparent 76%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:15ch}
.hero .eyebrow{color:var(--mist)}
.hero p{color:#dbe5f0;max-width:60ch;font-size:1.15rem}
.hero .tagline{font-family:var(--serif);font-size:1.45rem;color:#fff;font-style:italic;margin:-.2em 0 .9em;max-width:none}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.hero-facts{display:flex;gap:44px;flex-wrap:wrap;margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.hero-facts div{display:flex;flex-direction:column}
.hero-facts b{font-family:var(--serif);font-size:2rem;color:#fff;line-height:1}
.hero-facts span{font-size:.82rem;color:var(--mist);letter-spacing:.03em;margin-top:6px;max-width:20ch}

/* The mark, sitting large and faint behind the hero and behind every
   interior page banner, so part of the logo is on every page rather
   than only in the header and the footer. Decorative, so it is a
   background rather than an <img> and screen readers skip it. */
.hero::before,.pagehead::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background-image:url("../images/mark-reversed.png");
  background-repeat:no-repeat;background-size:contain;
  opacity:.07;
}
.hero::before{width:min(560px,52vw);height:min(560px,52vw);right:-90px;bottom:-130px}
.pagehead::before{width:min(340px,40vw);height:min(340px,40vw);right:-46px;bottom:-88px}
@media(max-width:700px){
  .hero::before{right:-120px;bottom:-90px;opacity:.05}
  .pagehead::before{opacity:.05}
}

/* the small page banner used on every page that is not the home page */
.pagehead{
  position:relative;overflow:hidden;
  color:#fff;padding:62px 0 56px;
  background:linear-gradient(168deg,var(--navy) 0%,var(--navy-dk) 100%);
}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:.3em}
.pagehead .eyebrow{color:var(--mist)}
.pagehead p{color:#d6e0ec;max-width:62ch;margin:0;font-size:1.1rem}

/* ---------- bands ---------- */
.band-navy{background:var(--navy);color:#fff}
.band-navy h2,.band-navy h3,.band-navy h4{color:#fff}
.band-navy p{color:#d6e0ec}
.band-navy .eyebrow{color:var(--mist)}
.band-navy a{color:#fff}
.band-card{background:var(--card)}
.band-paper{background:var(--paper)}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--edge);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card.plain{box-shadow:none;background:var(--card);border-color:transparent}
.band-navy .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.band-card .card{background:#fff}

.step-n{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--serif);font-weight:600;font-size:1.05rem;margin-bottom:16px;
}
.band-navy .step-n{background:#fff;color:var(--navy)}

/* ---------- photographs ----------
   Every picture on the site is one of these. They all keep their own
   aspect ratio, they all scale down, and none of them push the page
   sideways on a phone. */
.photo{
  border-radius:var(--radius);overflow:hidden;background:var(--card);
  box-shadow:var(--shadow);border:1px solid var(--edge);
}
.photo img{width:100%;height:auto;display:block}
.photo.lift{box-shadow:var(--shadow-lg)}
.photo.plain{border:0;box-shadow:none;background:none}
.band-navy .photo{border-color:rgba(255,255,255,.18)}

/* a picture that runs the full width of the band, with copy over it */
.photoband{position:relative;overflow:hidden;background:var(--navy-dk)}
.photoband img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;
}
.photoband::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(22,48,79,.94) 0%,rgba(22,48,79,.72) 48%,rgba(22,48,79,.30) 100%);
}
.photoband > .wrap{position:relative;z-index:2}
.photoband,.photoband h2,.photoband h3{color:#fff}
.photoband p{color:#dbe5f0}
.photoband .eyebrow{color:var(--mist)}

/* the wide diagram pictures, which are drawings rather than photographs
   and look wrong inside a card */
.diagram{max-width:1000px;margin:0 auto;border-radius:var(--radius);overflow:hidden}
.diagram img{width:100%;height:auto;display:block}

figure{margin:0}
figcaption{font-size:.85rem;color:var(--slate);margin-top:10px;line-height:1.5}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
@media(max-width:860px){.split,.split.wide-left{grid-template-columns:1fr;gap:34px}}

/* ---------- tables ---------- */
.tf{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.tf th,.tf td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--edge);vertical-align:top}
.tf th{font-family:var(--sans);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700}
.tf td:first-child{color:var(--slate)}
.tf td:last-child{color:var(--navy);font-weight:600}
.tf.plainrow td:last-child{color:var(--char);font-weight:400}
.tablescroll{overflow-x:auto}

/* ---------- lists ---------- */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:0 0 14px 34px;margin:0}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.42em;width:17px;height:9px;
  border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);
  transform:rotate(-45deg);border-radius:1px;
}
.band-navy .ticks li::before{border-color:#fff}
.ticks.tight li{padding-bottom:9px}

.crosses{list-style:none;margin:0;padding:0}
.crosses li{position:relative;padding:0 0 12px 30px;color:var(--slate)}
.crosses li::before{content:"\00d7";position:absolute;left:5px;top:-3px;font-size:1.4rem;color:var(--flag);font-weight:700;line-height:1.4}

.numlist{list-style:none;counter-reset:n;margin:0;padding:0}
.numlist li{counter-increment:n;position:relative;padding:0 0 18px 44px}
.numlist li::before{
  content:counter(n);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--card);color:var(--navy);display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:.95rem;
}

/* ---------- price ---------- */
.pricebox{background:#fff;border:2px solid var(--navy);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-lg)}
.pricebox .num{font-family:var(--serif);font-size:3rem;color:var(--navy);line-height:1;margin:0 0 .25em}
.pricebox .num small{font-family:var(--sans);font-size:1rem;color:var(--slate);font-weight:600}
.pricebox.alt{border-color:var(--edge);border-width:1px;box-shadow:var(--shadow)}

/* ---------- callouts ---------- */
.note{border-left:4px solid var(--navy);background:var(--card);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 1.4em}
.note p:last-child{margin-bottom:0}
.note.flag{border-left-color:var(--flag);background:#fbf4ec}
.band-navy .note{background:rgba(255,255,255,.10);border-left-color:#fff}

/* Bold text defaults to navy, which is invisible once it sits on a navy
   band. Anything on a dark background goes white instead. */
.band-navy strong,.photoband strong,.hero strong,
.band-navy .note strong,.band-navy em,.photoband em{color:#fff}
.band-navy .note p{color:#e2eaf3}
.band-navy .small,.photoband .small{color:var(--mist)}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:720px){.proof{grid-template-columns:1fr}}
.proof a{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--edge);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease;
}
.proof a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* 2.2 to 1, which is the shape a real browser window screenshots at.
   Anything squarer crops the sides off the site being shown. */
.shot{aspect-ratio:2.2/1;background:var(--card);display:grid;place-items:center;border-bottom:1px solid var(--edge);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot .ph{font-family:var(--serif);font-size:1rem;color:var(--slate);text-align:center;padding:22px;line-height:1.45}
.proof .body{padding:22px}
.proof .body h3{margin-bottom:.3em}
.proof .body p{margin:0;color:var(--slate);font-size:.94rem}
.proof .url{display:inline-block;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--navy)}

/* ---------- form ---------- */
.formwrap{background:#fff;border:1px solid var(--edge);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
@media(max-width:560px){.formwrap{padding:24px 20px}}
fieldset{border:0;padding:0;margin:0 0 30px}
legend{
  font-family:var(--sans);font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);padding:0 0 13px;margin:0;width:100%;border-bottom:1px solid var(--edge);
}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:.92rem;color:var(--navy);margin-bottom:6px}
.hint{display:block;font-weight:400;font-size:.82rem;color:var(--slate);margin-top:3px}
input,select,textarea{
  font-family:var(--sans);font-size:1rem;color:var(--char);padding:11px 13px;
  border:1px solid var(--edge);border-radius:8px;background:#fff;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
textarea{min-height:120px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:10px;padding:5px 0}
.check input{width:18px;height:18px;flex:0 0 18px;margin-top:4px}
.check label{font-weight:400;color:var(--char);margin:0}
.sent{background:var(--card);border:2px solid var(--navy);border-radius:var(--radius);padding:32px;text-align:center}
.sent h2{margin-top:0}

/* ---------- the short form, sitting at the top of a page ----------
   Three boxes and a button, on one line where there is room and
   stacked on a phone. This is the direct call to action and it is
   meant to be the easiest thing on the page to use. */
.quickform{
  background:#fff;border:1px solid var(--edge);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-lg);
}
.quickform .row{display:grid;grid-template-columns:1.5fr 1fr auto;gap:12px;align-items:end}
@media(max-width:820px){.quickform .row{grid-template-columns:1fr}}
.quickform label{font-size:.82rem;margin-bottom:5px}
.quickform .btn{width:100%}
.quickform .foot{margin:14px 0 0;font-size:.83rem;color:var(--slate)}
.quickform .foot strong{color:var(--navy)}

/* the same thing sitting on the navy hero */
.hero .quickform{border-color:rgba(255,255,255,.2)}

/* the big one at the top of the review page */
.topform{background:var(--card);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}

/* an optional extra block folded away under the short form, so the
   page stays easy and the detail is still there for anyone who wants
   to give it */
.more{margin-top:24px;border-top:1px solid var(--edge);padding-top:8px}
.more summary{font-size:1rem;font-family:var(--sans);font-weight:600}
.more[open]{padding-bottom:6px}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--edge);padding:18px 0}
summary{cursor:pointer;font-family:var(--serif);font-size:1.14rem;color:var(--navy);font-weight:600;list-style:none;padding-right:30px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:-2px;color:var(--slate);font-family:var(--sans);font-weight:400;font-size:1.4rem;line-height:1.3}
details[open] summary::after{content:"\2013"}
details p{margin:14px 0 0}

/* ---------- pull quote ---------- */
.pull{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.4;color:var(--navy);margin:0 0 .6em;font-style:italic}
.band-navy .pull{color:#fff}
.attrib{font-size:.86rem;color:var(--slate);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.band-navy .attrib{color:var(--mist)}

/* ---------- cta band ---------- */
.cta{padding:70px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap}
.cta h2{margin-bottom:.25em}
.cta p{margin:0;max-width:52ch}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{background:var(--navy-dk);color:var(--mist);padding:62px 0 28px;font-size:.94rem}
footer.site h4{color:#fff;font-family:var(--sans);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
footer.site a{color:var(--mist);text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site p{color:var(--mist)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{height:52px;width:auto;margin-bottom:20px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{padding:3px 0}
.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.83rem;
}

/* ---------- keyboard users and motion ----------
   A visible focus ring everywhere, because somebody filling the form
   with a keyboard should always be able to see where they are. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--navy);outline-offset:2px;border-radius:4px;
}
.hero a:focus-visible,.band-navy a:focus-visible,.photoband a:focus-visible,
footer.site a:focus-visible,.topbar a:focus-visible{outline-color:#fff}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn:hover,.proof a:hover{transform:none}
}

/* ---------- the printed page ----------
   Printing is a real use here, because these pages get taken to a
   kitchen table. So paper gets black text on white, no navigation, no
   calls to action, and the contact details put back at the bottom of
   every sheet. */
.printfoot{display:none}

@media print{
  .topbar,header.site,.hero-cta,.cta,footer.site,.navtoggle,.skip,
  .quickform form,.sent,.note.flag{display:none !important}
  body{font-size:11pt;background:#fff;color:#000}
  section{padding:22px 0;break-inside:avoid}
  .hero,.pagehead,.band-navy,.band-card,.band-paper,.photoband{
    background:#fff !important;color:#000 !important;padding:0 0 18px;
  }
  .photoband img,.photoband::after{display:none}
  .hero h1,.pagehead h1,.hero p,.pagehead p,
  .band-navy h2,.band-navy h3,.band-navy p,.band-navy td,.band-navy th,
  .photoband h2,.photoband p,.pull{color:#000 !important}
  .hero .tagline,.eyebrow,.attrib{color:#333 !important}
  h1,h2,h3{break-after:avoid}
  .card,.pricebox,.note,table,figure,li{break-inside:avoid}
  .card,.pricebox{border:1px solid #bbb;box-shadow:none;background:#fff}
  .ticks li::before{border-color:#000}
  a{color:#000;text-decoration:none}
  /* a printed page cannot be clicked, so name the destination */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  img{max-height:2.6in;object-fit:cover}
  .printfoot{
    display:block;margin-top:24px;padding-top:10px;border-top:1px solid #000;
    font-size:9.5pt;line-height:1.5;
  }
}