/* ---------- 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)}
.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 ---------- */
/* Slot map retuned for this client, twice over.
   1. All three of Mike's mockups are landscape 4:3 (1448x1086), not the portrait tablet
      and 3:2 laptop the template assumed, so they keep native aspect and the photo tiles
      absorb the difference instead.
   2. Five photos arrived, not six, so the grid runs 8 tiles (4 + 4) rather than 9.
      Nothing is duplicated to pad the count.
   Computed balance at 1778: left 1714px, right 1716px.
   Mockups sit at L2, R1, R4, which do not overlap vertically, so no two device shots
   ever sit side by side. */
.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:.70}
.gal__col--l img:nth-of-type(2){aspect-ratio:1.3333}
.gal__col--l img:nth-of-type(3){aspect-ratio:1.50}
.gal__col--l img:nth-of-type(4){aspect-ratio:1.50}
.gal__col--r img:nth-of-type(1){aspect-ratio:1.3333}
.gal__col--r img:nth-of-type(2){aspect-ratio:1.00}
.gal__col--r img:nth-of-type(3){aspect-ratio:.97}
.gal__col--r img:nth-of-type(4){aspect-ratio:1.3333}
.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}
}
.foot-adr{margin:0 0 14px;font-style:normal;line-height:1.7}

/* 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;
}