/* Big Sky Imaging — site.css | Apple-inspired design system */
:root{
  --navy:#10314e; --navy-2:#1c4a72; --sky:#f2994a; --sky-2:#f7b878; --sky-soft:#fdf1e4;
  --ink:#1d1d1f; --muted:#5f6b76; --line:#e6e9ec; --bg:#ffffff; --bg-soft:#f5f7f9;
  --ok:#1fad5b; --shadow:0 2px 20px rgba(16,49,78,.07); --shadow-lg:0 20px 50px rgba(16,49,78,.14);
  --r:18px; --r-lg:26px; --maxw:1140px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:17px;}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.022em;margin:0 0 .5em;font-weight:700;}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);}
h3{font-size:1.35rem;letter-spacing:-.015em;}
p{margin:0 0 1em;color:#37424d;}
a{color:var(--navy);text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:84px 0;}
.section.soft{background:var(--bg-soft);}
.center{text-align:center;}
.lead{font-size:1.2rem;color:var(--muted);max-width:640px;}
.center .lead{margin-left:auto;margin-right:auto;}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700;color:var(--sky);margin-bottom:14px;}
.muted{color:var(--muted);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s,background .2s;font-family:var(--font);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(16,49,78,.22);}
.btn-primary:hover{background:#0b2740;}
.btn-sky{background:var(--sky);color:#fff;box-shadow:0 10px 24px rgba(242,153,74,.28);}
.btn-sky:hover{background:#e0862f;}
.btn-ghost{background:#fff;color:var(--navy);border-color:#d3dae1;}
.btn-ghost:hover{border-color:var(--navy);}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px);}
.btn-light:hover{background:rgba(255,255,255,.24);}

/* header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--navy);letter-spacing:-.02em;}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--navy),var(--sky));display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:.95rem;font-weight:500;color:#33404b;}
.nav-links a:hover{color:var(--navy);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-phone{font-weight:600;color:var(--navy);font-size:.95rem;white-space:nowrap;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;transition:.2s;}
@media(max-width:920px){
  .nav-links,.nav-cta .nav-phone{display:none;}
  .nav-toggle{display:block;}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:16px;}
}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:linear-gradient(155deg,#0b2740 0%,var(--navy) 45%,#245c8a 100%);}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 500px at 80% -10%,rgba(242,153,74,.35),transparent 60%);}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:96px 24px 104px;}
.hero h1{color:#fff;max-width:14ch;}
.hero p{color:rgba(255,255,255,.86);font-size:1.25rem;max-width:52ch;margin-bottom:30px;}
.hero .btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.hero-sub{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;color:rgba(255,255,255,.8);font-size:.95rem;}
.hero-sub b{color:#fff;}

/* image placeholder */
.ph{position:relative;border-radius:var(--r-lg);background:linear-gradient(140deg,var(--sky-soft),#dbe7f1);display:flex;align-items:center;justify-content:center;color:#7f95a8;font-size:.85rem;font-weight:600;letter-spacing:.02em;min-height:280px;overflow:hidden;}
.ph:empty::before{content:"◎ photo";opacity:.7;}
.ph.tall{min-height:420px;}
.ph.wide{min-height:340px;}

/* grid + cards */
.grid{display:grid;gap:22px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card h3{margin-bottom:.35em;}
.card p{font-size:.98rem;color:var(--muted);margin-bottom:.8em;}
.card .icon{width:48px;height:48px;border-radius:13px;background:var(--sky-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:22px;}
.card-link{font-weight:600;color:var(--sky);font-size:.95rem;}
.card-link:hover{color:#e0862f;}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.rev .split-media{order:-1;}
@media(max-width:840px){.split{grid-template-columns:1fr;gap:32px;}.split.rev .split-media{order:0;}}

/* two-up media/text within container */
.kicker-list{list-style:none;padding:0;margin:18px 0 0;}
.kicker-list li{padding:10px 0 10px 30px;position:relative;color:#37424d;border-bottom:1px solid var(--line);}
.kicker-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700;}

/* stats / badges */
.stats{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;}
.stat b{display:block;font-size:2.4rem;color:var(--navy);letter-spacing:-.02em;}
.stat span{color:var(--muted);font-size:.95rem;}
.badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--sky-soft);color:var(--navy);font-weight:600;font-size:.9rem;padding:9px 16px;border-radius:999px;}

/* location cards */
.loc{display:flex;flex-direction:column;}
.loc .ph{min-height:170px;margin-bottom:16px;border-radius:16px;}
.loc h3{margin-bottom:.2em;}
.loc .addr{color:var(--muted);font-size:.92rem;margin-bottom:12px;}

/* CTA band */
.cta{background:linear-gradient(150deg,var(--navy),#245c8a);color:#fff;border-radius:var(--r-lg);padding:56px 40px;text-align:center;}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto 26px;}
.cta .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow);}
.field{margin-bottom:18px;}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;color:#2a3540;}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid #d7dde3;border-radius:12px;font-family:var(--font);font-size:1rem;background:#fff;transition:border .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky);}
.field textarea{min-height:110px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:620px){.field-row{grid-template-columns:1fr;}}
.req{color:#c0392b;}
.form-note{font-size:.82rem;color:var(--muted);margin-top:10px;}

/* accordion */
.acc{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;}
.acc details{border-bottom:1px solid var(--line);}
.acc details:last-child{border-bottom:none;}
.acc summary{padding:20px 24px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";font-size:1.4rem;color:var(--sky);font-weight:400;}
.acc details[open] summary::after{content:"–";}
.acc .acc-body{padding:0 24px 22px;color:var(--muted);}

/* breadcrumb + page head */
.pagehead{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:52px 0 44px;}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px;}
.crumb a{color:var(--muted);}

/* footer */
.footer{background:var(--navy);color:rgba(255,255,255,.72);padding:64px 0 34px;font-size:.92rem;}
.footer a{color:rgba(255,255,255,.72);}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px;}}
.footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.footer ul{list-style:none;padding:0;margin:0;}
.footer li{margin-bottom:9px;}
.footer .brand{color:#fff;margin-bottom:12px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;}
.footer-legal{background:#0b2740;color:rgba(255,255,255,.5);}

/* utilities */
.mt-0{margin-top:0;}.mb-0{margin-bottom:0;}
.stack>*+*{margin-top:14px;}
.hide{display:none;}

/* brand logos */
.brand-logo{height:46px;width:auto;display:block;}
.brand-logo-footer{height:44px;width:auto;margin-bottom:12px;}
@media(max-width:520px){.brand-logo{height:36px;}}

/* photos */
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero.has-photo .hero-bg{background:linear-gradient(120deg,rgba(11,39,64,.9),rgba(16,49,78,.6)),var(--bgimg) center/cover;}

/* branded icons */
.icon img,.svg-icon{width:28px;height:28px;display:block;}
.townphoto{margin-top:34px;margin-bottom:8px;}

/* blog post */
.post{max-width:760px;margin:0 auto;}
.post h2{margin-top:1.4em;}
.post img{border-radius:16px;margin:24px 0;}
.meta{color:var(--muted);font-size:.9rem;}

/* maps */
.coverage-map{height:560px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.map-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:16px 0 0;color:var(--muted);font-size:.9rem;}
.map-legend i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px;}
.lg-hub{background:#10314e;border:2px solid #f2994a;}
.lg-town{background:#f2994a;border:1px solid #fff;}
.lg-area{background:rgba(242,153,74,.3);border:1px solid #f2994a;}
.hubpin{width:18px;height:18px;border-radius:50%;background:#10314e;border:3px solid #f2994a;box-shadow:0 0 0 2px #fff;}
.mapembed{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- dropdown navigation ---- */
.nav-links{height:64px;}
.nav-links>li{display:flex;align-items:center;height:100%;position:relative;}
.dd-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:var(--font);font-size:.95rem;font-weight:500;color:#33404b;padding:0;}
.dd-toggle:hover{color:var(--navy);}
.nav-links a.active,.dd-toggle.active{color:var(--navy);font-weight:600;}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);position:relative;top:-2px;transition:transform .2s;}
.dd{position:absolute;top:100%;left:0;min-width:210px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:60;}
.has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:translateY(0);}
.has-dd:hover .caret,.has-dd.open .caret{transform:rotate(-135deg);top:1px;}
.dd li{display:block;height:auto;}
.dd a{display:block;padding:9px 12px;border-radius:9px;font-size:.93rem;font-weight:500;color:#33404b;white-space:nowrap;}
.dd a:hover{background:var(--sky-soft);color:var(--navy);}
@media(max-width:920px){
  .nav-links{height:auto;}
  .nav-links>li{display:block;height:auto;width:100%;}
  .nav-links.open>li{border-bottom:1px solid var(--line);padding:4px 0;}
  .nav-links.open>li:last-child{border-bottom:0;}
  .dd-toggle{width:100%;justify-content:space-between;padding:8px 0;font-size:1rem;}
  .dd{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 6px 14px;min-width:0;}
  .has-dd.open .dd{display:block;}
  .dd a{padding:8px 0;}
}

/* ---- home hero: team photo, right-anchored, left scrim keeps text/buttons legible ---- */
.hero.hero-team{min-height:560px;display:flex;align-items:center;}
.hero.hero-team .hero-inner{width:100%;}
.hero.hero-team .hero-bg{
  background:
    linear-gradient(90deg, rgba(11,39,64,.94) 0%, rgba(11,39,64,.80) 26%, rgba(12,42,66,.34) 46%, rgba(16,49,78,0) 64%),
    var(--bgimg) center right / cover;
}
.hero.hero-team .hero-bg::after{opacity:.5;}
@media(max-width:820px){
  .hero.hero-team{min-height:0;}
  .hero.hero-team .hero-bg{
    background:
      linear-gradient(180deg, rgba(11,39,64,.9) 0%, rgba(11,39,64,.72) 55%, rgba(11,39,64,.82) 100%),
      var(--bgimg) center top / cover;
  }
}

/* transparent portrait cutout (no box background) */
.portrait-cutout{width:100%;max-width:440px;height:auto;margin:0 auto;display:block;object-fit:contain;background:transparent;filter:drop-shadow(0 22px 34px rgba(16,49,78,.16));}


/* ---- engine a11y patch (added by gen/import/import-design.py, not in the source design) ---- */
/* footer column headings are <h2> so the document never skips a heading level; these rules
   reproduce the source's .footer h4 appearance exactly */
.footer h2{font-size:.95rem;font-weight:700;letter-spacing:.01em;margin:0 0 14px;color:#fff;line-height:1.1;}
/* links inside body copy need more than colour to be distinguishable */
.lead a,.muted a,.pagehead p a,.card p a,.kicker-list a,.prose a{text-decoration:underline;text-underline-offset:2px;}
.footer a,.nav a,.btn,.card-link,.crumb a{text-decoration:none;}
/* headings that exist for screen readers and the document outline only */
/* Skip link — WCAG 2.4.1 (Level A). Without it a keyboard or screen-reader user tabs
   through the whole header, including both dropdowns, on every one of the 84 pages before
   reaching the content. Off-screen until focused, then pinned top-left over the nav. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy,#10314e);
  color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;outline:3px solid #f2994a;outline-offset:2px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- art direction: physician portrait on /about/ ---- */
/* .ph is a fixed 340px-tall box that .media covers. The Purdy family group is 74% of its
   source frame height even at full frame, so between roughly 600px and 840px viewport the
   box goes wide enough that object-fit:cover clips heads and feet. No crop fixes that; the
   box must carry the image aspect. Scoped so nothing else in the approved design moves. */
.split-media .ph.photo-fit{min-height:0;aspect-ratio:1201/788;}

/* ---- art direction: second-location storefront on a hub page ---- */
/* Cheyenne is the only hub with two addresses. The storefront sits under the second address as
   a proof-of-place shot, not a banner: it carries its own 16:9 aspect so .ph's 170px floor does
   not crop it, and it is capped so it stays subordinate to the hub photo above. */
.ph.loc2photo{min-height:0;aspect-ratio:16/9;max-width:420px;margin:14px 0 24px;border-radius:14px;}
@media(max-width:720px){.ph.loc2photo{max-width:100%;}}

/* ---- art direction: home hero ---- */
/* The supplied hero image already carries its own navy-to-light gradient and the subjects are
   cut out on it, so it is shown almost untouched: a softer left scrim than the generic hero uses,
   and the orange radial glow switched off so the right-hand side stays clean and light. */
.hero.hero-team .hero-bg{
  background:
    linear-gradient(90deg, rgba(11,39,64,.90) 0%, rgba(11,39,64,.78) 30%, rgba(12,42,66,.34) 50%, rgba(16,49,78,0) 66%),
    var(--bgimg) center right / cover;
}
.hero.hero-team .hero-bg::after{display:none;}
/* keep the strapline inside the dark half of the plate — unconstrained it ran onto the light
   right-hand side and became unreadable */
.hero.hero-team .hero-sub{max-width:480px;row-gap:9px;}

/* ---- mobile sweep patch (added 4 Sep 2026 by the mobile audit, not in the source design) ---- */
/* 1. A single long word in a heading overflowed the viewport on small phones. At the h1 clamp
      minimum, "Echocardiograms" renders 299px wide inside a 272px column, which pushed the
      document 3px past the viewport and produced a horizontal scrollbar. break-word is the
      safety net for any future long word; the 360px step keeps it from having to break. */
h1,h2,h3,h4{overflow-wrap:break-word;}
@media(max-width:360px){h1{font-size:2rem;}}

/* 2. WCAG 2.2 target size (2.5.8). Standalone links measured 15-17px tall on mobile. Links
      inside running sentences are exempt from that rule and are left alone; these are not
      inside sentences. Vertical padding only, with the list margins reduced by the same
      amount, so the tap area grows and the visual rhythm does not move. */
.card-link{display:inline-block;padding:5px 0;}
.footer li{margin-bottom:4px;}
.footer li a{display:inline-block;padding:5px 0;}
.crumb a{display:inline-block;padding:3px 0;}
@media(max-width:920px){.nav-links.open a{display:block;padding:5px 0;}}

/* 3. Second pass. The remaining sub-24px targets were the footer legal links (45x15), the
      nearby-town chips (72x19) and standalone card CTAs. Padding grows the hit area; the
      matching negative margin cancels the layout growth, so nothing moves on screen. The
      .card p a rule stays inline (no display change) so links inside sentences still wrap. */
.footer-bottom a{display:inline-block;padding:5px 0;margin:-5px 0;}
.kicker-list a{display:inline-block;padding:6px 0;margin:-6px 0;}
.card p a{padding:4px 0;}

/* 4. The footer phone number was the last sub-24px target and it appears on all 74 pages.
      On a mobile healthcare site the tap-to-call link is the primary conversion, so it is
      worth the extra rule. Same padding-plus-negative-margin trick: 26px tall, nothing moves. */
.footer-grid p a[href^="tel"]{display:inline-block;padding:5px 0;margin:-5px 0;}
/* Any other tap-to-call link in body copy, as a general safety net. Padding on an inline
   element grows the hit box without changing the line box, so no layout moves and links
   inside sentences still wrap normally. Buttons already carry 14px of padding. */
a[href^="tel"]:not(.btn){padding:4px 0;}

/* 5. The header "Refer / Order" pill wrapped to three lines below 414px and spilled 15px
      out of the 65px nav bar, on every page, at the three most common phone widths. Cause:
      a 20px flex gap plus 24px container padding left only ~101px for a button that needs
      107px. Tightening the gap and padding on small screens and forcing a single line fits
      it with room to spare. Nothing above 430px changes. */
@media(max-width:430px){
  .nav-inner{gap:10px;padding:0 16px;}
  .nav-cta .btn{white-space:nowrap;padding:10px 12px;font-size:.85rem;}
}

/* ---- engine component: payment app QR cards ---- */
.payapp{display:flex;flex-direction:column;align-items:center;gap:6px;}
.payapp .payqr{width:100%;max-width:230px;height:auto;border-radius:14px;}
.payapp h3{margin:6px 0 0;font-size:1.1rem;}
.payapp a{display:block;width:100%;}

/* ---- engine component: full-bleed reviews carousel (not in the source design) ---- */
/* The section breaks out of .container so the rail runs edge to edge, but the heading block
   and the rail's first card still line up with the 1140px grid via the same 24px gutter. */
.reviews-full{overflow:hidden;}
.reviews-head{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.rev-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((min(100vw,var(--maxw)) - 48px - 3*20px)/4);
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px max(24px,calc((100vw - var(--maxw))/2 + 24px)) 22px;margin-top:40px;
  scrollbar-width:none;-ms-overflow-style:none;}
.rev-rail::-webkit-scrollbar{display:none;}
.rev-card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px 24px;display:flex;flex-direction:column;text-align:left;min-height:100%;}
.rev-stars{color:var(--sky);letter-spacing:.12em;font-size:1rem;margin-bottom:12px;}
.rev-text{color:#37424d;margin:0 0 18px;font-size:1rem;line-height:1.6;}
.rev-meta{margin-top:auto;font-size:.9rem;color:var(--muted);}
.rev-meta b{display:block;color:var(--ink);font-size:.98rem;font-weight:700;}
.rev-nav{display:flex;gap:12px;justify-content:center;margin-top:6px;}
.rev-nav button{width:46px;height:46px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  cursor:pointer;color:var(--navy);font-size:1.1rem;line-height:1;transition:border .15s,opacity .15s;}
.rev-nav button:hover:not(:disabled){border-color:var(--navy);}
.rev-nav button:disabled{opacity:.35;cursor:default;}
.rev-embed{width:100%;padding:0 max(24px,calc((100vw - var(--maxw))/2 + 24px));margin-top:36px;}
.rev-embed iframe{width:100%;min-height:520px;border:0;display:block;}
@media(max-width:1100px){.rev-rail{grid-auto-columns:calc((100vw - 48px - 2*20px)/3);}}
@media(max-width:860px){.rev-rail{grid-auto-columns:calc((100vw - 48px - 20px)/2);}}
@media(max-width:600px){.rev-rail{grid-auto-columns:calc(100vw - 68px);}}
@media(prefers-reduced-motion:reduce){.rev-rail{scroll-behavior:auto;}}

/* ---- art direction: home hero on phones (7 Sep 2026) ---- */
/* Desktop is deliberately untouched. Three problems were specific to the phone:

   1. The source design has a max-width:820px rule for .hero-team, but the later art-direction
      block above it in this same file re-declares .hero.hero-team .hero-bg outside any media
      query, so it wins everywhere and the mobile rule has never applied. That is why the phone
      was showing "center right" — the far-right corner of the frame — rather than the mobile
      treatment anyone intended. Everything below sits after that block and is scoped to the
      query, so it is the first mobile rule that actually takes effect.

   2. The frame is 1920x1080 and the phone hero is portrait, so cover throws away most of the
      picture and which tech survives is an accident of the position keyword. The phone now
      loads its own crop instead, built by gen/make-assets.py: the tech beside the cart, framed
      at about 70% across so she clears the headline and the buttons, and about three-quarters
      of the hero's height. It is also a third of the bytes of the desktop frame on the
      connection least able to afford them.

   3. The strapline and the three-item sub-list ran across her and pushed the buttons down the
      fold. On a phone the h1 and the two calls to action are the whole job; the strapline
      repeats the meta description and the sub-list repeats the section below it. Both stay in
      the markup for wider screens and for crawlers, and are hidden here only. */
/* Tablets and large phones in landscape. Still the desktop frame, because the crop below is
   portrait and cover would guillotine it at these aspect ratios, but positioned so the tech
   beside the cart is the subject rather than the far-right corner. 20% holds her between 58%
   and 71% across everywhere in this band. The strapline stays: there is room for it here. */
@media(max-width:820px){
  .hero.hero-team .hero-bg{
    background:
      linear-gradient(105deg, rgba(11,39,64,.95) 0%, rgba(11,39,64,.88) 32%, rgba(11,39,64,.58) 50%, rgba(11,39,64,.26) 68%, rgba(11,39,64,.15) 100%),
      var(--bgimg) 20% center / cover;
  }
}

/* Phones. The portrait crop, and the hero reduced to the two things worth a tap.

   The 520px ceiling and the 58% vertical anchor are both load-bearing. The crop is 600x830
   and the hero box is 560 tall, so above about 405px wide cover starts scaling by width and
   has to discard height. The crop carries 118px of air above her head and 86px of floor below
   her feet — 204px of slack — and 58% is that slack's split, so whatever cover discards comes
   off in the proportion the frame can afford. That holds until roughly 537px wide, where the
   discard exceeds the slack and it would start cutting her head. 520 stops short of it.
   Anything wider falls through to the desktop frame in the block above. */
@media(max-width:520px){
  .hero.hero-team{min-height:560px;}
  .hero.hero-team .hero-bg{
    background:
      linear-gradient(105deg, rgba(11,39,64,.95) 0%, rgba(11,39,64,.88) 32%, rgba(11,39,64,.58) 50%, rgba(11,39,64,.26) 68%, rgba(11,39,64,.15) 100%),
      url('/assets/images/localized/home-wallpaper-mobile.webp') center 58% / cover;
  }
  .hero.hero-team .hero-inner{padding:40px 24px 44px;}
  .hero.hero-team h1{max-width:11ch;margin-bottom:26px;}
  .hero.hero-team > .hero-inner > p,
  .hero.hero-team .hero-sub{display:none;}
  .hero.hero-team .btn-row{flex-direction:column;align-items:flex-start;gap:12px;}
  .hero.hero-team .btn-row .btn{width:auto;}
}

/* ---- header: taller bar, bigger logo, calmer CTA (7 Sep 2026) ---- */
/* The "Refer / Order" pill was 57px inside a 64px bar, so it had about 3px of air above and
   below and read as a button wedged into the header rather than sitting in it. The cause is
   .btn inheriting the body's 1.6 line-height on top of 14px of vertical padding, which is
   right for a hero button and too much for a nav one.

   Three changes, in the order they matter: the bar grows, the logo grows into the new room,
   and the pill gets a nav-appropriate line-height so it settles to about 45px. That leaves
   roughly 16px of clearance on desktop instead of 3.

   The bar height was hardcoded at 64px in three places that have to agree — the flex row, the
   desktop link row that draws the underline, and the top offset of the mobile dropdown. A
   custom property is what keeps them agreeing. */
:root{--navh:78px;}
@media(max-width:920px){:root{--navh:72px;}}
.nav-inner{height:var(--navh);}
.nav-links{height:var(--navh);}
@media(max-width:920px){
  /* The source gives .nav-links height:auto below 920 because that is where the row stops
     being a row and becomes the dropdown panel. Restating it is not redundant: the rule above
     is unconditional and later in the file, so without this the open menu is pinned to the bar
     height and its items spill out of their own white background over the hero. */
  .nav-links{height:auto;}
  .nav-links.open{top:var(--navh);}
}

/* object-fit:contain is a guard, not a style. The logo is a flex item under a global
   img{max-width:100%}, so on a narrow phone the row can compress it horizontally while the
   height rule holds — a squashed wordmark rather than a smaller one. contain letterboxes
   instead of squashing, so the worst case is a logo that is smaller than intended and still
   the right shape. The 380px step below is what stops it from ever needing to. */
.brand-logo{height:56px;width:auto;object-fit:contain;}
/* Narrow laptops. The header carries the logo, six nav items, the phone number and the pill,
   and at 1024 that already added up to more than the bar had: the pill was wrapping onto two
   lines at 64px tall and the logo was being compressed. Tightening the link row and stepping
   the logo down reclaims about 90px; dropping the phone number below 1000 reclaims another
   130, which is what makes 921px — the first width above the mobile menu — fit. */
@media(max-width:1150px){
  .brand-logo{height:48px;}
  .nav-links{gap:18px;}
  .nav-links a{font-size:.9rem;}
}
@media(max-width:1000px){.nav-cta .nav-phone{display:none;}}
@media(max-width:920px){.brand-logo{height:46px;}}
@media(max-width:520px){.brand-logo{height:44px;}}

/* nowrap is the rule that actually stops the two-line pill. Without it the button is free to
   break "Refer / Order" the moment the row is tight, and a 64px button in a 78px bar is worse
   than the 57px one this change set out to fix. */
.nav-cta .btn{padding:12px 22px;line-height:1.15;white-space:nowrap;}
@media(max-width:430px){.nav-cta .btn{padding:13px 14px;font-size:.85rem;line-height:1.15;}}

/* Smallest phones. At 320px the header has 288px of usable width and the 44px logo alone
   wants 147 of it, which left the wordmark 111px wide and visibly squashed. Stepping the
   logo and the pill down together buys back the room. Still larger than the 36px the logo
   was before today. */
@media(max-width:380px){
  .nav-inner{gap:8px;padding:0 12px;}
  .brand-logo{height:38px;}
  .nav-cta .btn{padding:11px 12px;font-size:.8rem;}
}