/* ---------- SHARED BUTTON ---------- */
.btn-block{display:inline-block;background:var(--stone);color:var(--white);font-family:var(--sans);font-size:13.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;padding:17px 44px;transition:background .35s}

@media(max-width:980px){
    .nav-links{display:none}
    .menu-btn{display:block}
    .nav-links.open{display:flex;position:absolute;top:82px;left:0;right:0;background:var(--ivory);flex-direction:column;padding:34px 6vw;border-bottom:1px solid var(--line);gap:22px}
    .foot-grid{grid-template-columns:1fr;gap:44px}
}

/* ---------- CASE HERO ---------- */
.cs{background:var(--near);margin-top:83px;padding:7.9vw 6vw 0;text-align:center}
.cs .label{font-family:var(--sans);font-size:15px;letter-spacing:.30em;
  text-transform:uppercase;line-height:1;color:rgba(16,16,16,.78);margin:0;max-width:none}
.cs h1{font-size:clamp(34px,4.62vw,82px);font-weight:300;line-height:1.06;
  letter-spacing:-.006em;margin:28px 0 0}
.cs__cat{display:block;font-family:var(--sans);font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;color:rgba(16,16,16,.62);margin:26px 0 0}
.cs__shot{margin:6.2vw auto 0;width:min(1240px,88vw);aspect-ratio:16/9;object-fit:cover;
  display:block;transform:translateY(3.0vw);object-position:center 70%}
/* The hero source is a square 800x800. A centred 16:9 crop cuts the QT imaging logo off
   the bottom of the scanner, so the crop is biased low. See the note in the handoff about
   its resolution. */
.cs__pad{height:3.0vw}

/* ---------- APPROACH ---------- */
.ap{background:var(--white);padding:9.2vw 6vw 0;text-align:center}
.ap .label{font-family:var(--sans);font-size:15px;letter-spacing:.30em;
  text-transform:uppercase;line-height:1;color:rgba(16,16,16,.78);margin:0;max-width:none}
.ap h2{font-size:clamp(26px,2.70vw,48px);font-weight:300;line-height:1.18;
  letter-spacing:-.004em;margin:32px auto 0;max-width:19em}
.ap p{margin:26px auto 0;max-width:36em}

/* ---------- GALLERY ---------- */
/* 7 tiles: 4 photos, 3 mockups. Mockups keep their native 4:3.
   Left  : Dr. Jenn .80 | mockup | Tears Test 1.20 | mockup
   Right : mockup | orchids .62 | scan on screen .73
   Dr. Jenn and the Tears Test tiles sit at their native aspect, so those two are uncropped.
   Computed balance at 1778: left 1745px, right 1749px.
   Mockups sit at L2, L4, R1, whose vertical spans do not overlap. */
.gal{background:var(--white);padding:8.4vw 0 8.4vw}
.gal__grid{display:grid;grid-template-columns:24.80% 24.69%;column-gap:3.20%;
  justify-content:center}
.gal__col{display:flex;flex-direction:column;gap:3.1vw}
.gal__col img{width:100%;object-fit:cover;display:block;background:var(--cream)}
.gal__col--l img:nth-of-type(1){aspect-ratio:.80;object-position:center 28%}
.gal__col--l img:nth-of-type(2){aspect-ratio:1.3333}
.gal__col--l img:nth-of-type(3){aspect-ratio:1.20}
.gal__col--l img:nth-of-type(4){aspect-ratio:1.3333}
.gal__col--r img:nth-of-type(1){aspect-ratio:1.3333}
.gal__col--r img:nth-of-type(2){aspect-ratio:.62}
.gal__col--r img:nth-of-type(3){aspect-ratio:.73}
.gal__col--r{padding-top:.11vw}

/* ---------- CLIENT QUOTE ---------- */
.kw{position:relative;background:var(--near);padding:9.0vw 0}
.kw__inner{width:62.5%;margin-left:20.7%;position:relative}
.kw__mark{position:absolute;left:-1.9%;top:-.4vw;font-family:var(--serif);
  font-weight:300;font-size:3.6vw;line-height:1;color:var(--stone)}
.kw .label{font-family:var(--sans);font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;color:rgba(16,16,16,.78);margin:0 0 0 2.6%;max-width:none}
.kw blockquote{font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,2.87vw,51px);line-height:1.19;letter-spacing:-.004em;
  margin:49px 0 0;color:var(--ink)}
.kw__by{display:flex;align-items:center;margin-top:4.4vw}
.kw__av{width:7.2%;aspect-ratio:1;min-width:64px;border-radius:50%;overflow:hidden;
  flex:none;background:var(--stone)}
.kw__av img{width:100%;height:100%;object-fit:cover;object-position:center 8%}
.kw__name{margin-left:3.1%;font-size:18px;line-height:1.42;color:rgba(16,16,16,.78)}
.kw__todo{display:inline-block;margin:18px 0 0 2.6%;font-family:var(--sans);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B04A2F}

/* ---------- EXIT ---------- */
.exit{background:var(--white);padding:5.6vw 6vw;text-align:center}
.exit a{font-family:var(--sans);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(16,16,16,.78);border-bottom:1px solid var(--stone);
  padding-bottom:9px;transition:color .3s ease,border-color .3s ease}
.exit a:hover{color:var(--ink);border-color:var(--gold)}

/* ---------- CONTACT ---------- */
.pc{background:var(--white);padding:8.0vw 0 4.2vw}
.pc__inner{margin-left:20.70%;width:56.0%}
.pc .label{font-family:var(--sans);font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;color:rgba(16,16,16,.78);margin:0;max-width:none}
.pc h2{font-size:clamp(32px,4.30vw,76px);font-weight:300;line-height:1.06;
  text-transform:uppercase;letter-spacing:-.006em;margin:63px 0 0}
.pc h2 em{font-style:italic;text-transform:none}
.pc__row{display:flex;align-items:flex-start;margin-top:30px}
.pc__row p{width:76.4%;flex:none;margin:0}
.pc__link{display:inline-block;margin-left:13.69%;margin-top:34px;flex:none;
  white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,1.35vw,24px);color:#494949;border-bottom:2px solid #C4C4C4;
  padding-bottom:11px;transition:color .3s ease,border-color .3s ease}
.pc__link:hover{color:var(--ink);border-color:var(--gold)}

a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:980px){
  .cs{padding-top:56px}
  .cs__shot{width:88vw;transform:none;margin-top:38px}
  .cs__pad{display:none}
  .ap{padding:64px 6vw 0}
  .gal{padding:56px 0}
  .gal__grid{grid-template-columns:1fr;margin:0 6vw}
  .gal__col{gap:20px}
  .gal__col--r{padding-top:20px}
  .kw{padding:64px 0}
  .kw__inner{width:auto;margin:0 6vw}
  .kw__mark{left:0;top:-8px}
  .kw blockquote{margin-top:30px}
  .pc{padding:64px 0 40px}
  .pc__inner{margin:0 6vw;width:auto}
  .pc__row{display:block}
  .pc__row p{width:auto}
  .pc__link{margin-left:0;margin-top:36px;white-space:normal}
}

/* POSITION: pin the chat launcher to the lower right, above page content, clear of the
   iPhone home indicator. Inset only, so the widget's own sizing is untouched.
   The vendor dashboard setting takes precedence; this is the fallback. Safe to delete. */
[id*="webchat" i],[class*="webchat" i],
[id*="apigateway" i],[class*="apigateway" i]{
  left:auto !important;
  right:calc(18px + env(safe-area-inset-right, 0px)) !important;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:55 !important;
}