/* ==========================================================================
   Kemficon — static rebuild of chemiception.wixsite.com/kemficon
   Desktop values are measured at 1440px wide. Mobile values come from Wix's
   fixed 320px mobile layout and are scaled to the screen through --u
   (1 design px = 100vw / 320, capped at 1.5px).
   ========================================================================== */

:root {
  --green: #0b3910;
  --tan: #e4c58a;
  --salmon: #f08475;
  --cream: #fff8eb;
  --maroon: #6e1919;
  --slate: #324158;
  --charcoal: #323232;
  --coral: #fe6060;
  --purple: #b45ad4;
  --plum: #522662;

  /* Hovered menu text. (The Wix site used tan, the same colour as the bar, which made
     hovered items disappear; maroon keeps them visible.) */
  --nav-hover: var(--maroon);

  /* Wix "stretched with 80px margins" boxes keep 80px side margins at every desktop width. */
  --side: 80px;

  --sans: 'Figtree', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --serif: 'Corben', Georgia, serif;
  --futura: 'Jost', Futura, 'Century Gothic', sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps in-page links (Our Mission, Services) from landing under the pinned header */
html { background: var(--green); -webkit-text-size-adjust: 100%; scroll-padding-top: 227px; }
body {
  margin: 0;
  min-width: 980px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:not([href]) { cursor: default; }
img { display: block; }
button, input, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 8px 14px; background: var(--cream); color: var(--green);
  font-size: 16px; font-weight: 800;
}
.skip-link:focus { top: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zwsp { display: block; }
.nw { white-space: nowrap; }

/* ---------- header ---------- */
/* The whole header stays pinned to the top of the window while the page scrolls. */
.site-header { position: sticky; top: 0; z-index: 20; height: 227px; background: var(--green); }
.hdr-address, .hdr-tel { position: absolute; top: 20px; white-space: nowrap; color: var(--cream); }
/* On Wix the address is docked to the left edge and the phone number to the right edge. */
.hdr-address { left: 134px; font-size: 22px; line-height: 27px; }
.hdr-tel { left: calc(100% - 439px); font-size: 21px; line-height: 25px; }
.hdr-bar { position: absolute; top: 54px; left: var(--side); right: var(--side); height: 173px; background: var(--tan); }
.site-title {
  position: absolute; left: 10px; top: 63px;
  font: 400 35px/65px var(--serif); color: var(--green); white-space: nowrap;
}
.hdr-logo { position: absolute; left: calc(var(--side) + 216px); top: 106px; width: 84px; height: 79px; object-fit: cover; }

.search {
  position: absolute; top: 71px; left: calc(50% + 184px);
  width: 280px; height: 46px;
  border: 1px solid rgba(255, 248, 235, .6); background: var(--green);
}
.search-icon { position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; color: rgba(255, 248, 235, .6); }
.search input {
  position: absolute; left: 42px; top: 0; width: 194px; height: 44px;
  padding: 8px 0; border: 0; border-radius: 0; background: transparent;
  font-size: 20px; color: var(--cream); outline: none;
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--cream); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { border-color: var(--cream); }
.search-results {
  position: absolute; top: 100%; left: -1px; right: -1px; z-index: 30;
  background: var(--green); border: 1px solid rgba(255, 248, 235, .6); border-top: 0;
  font-size: 16px; line-height: 20px;
}
.search-results a, .search-results .none { display: block; padding: 10px 14px; }
.search-results a:hover, .search-results a:focus, .search-results a.active { background: rgba(255, 248, 235, .12); outline: none; }
.search-results small { display: block; font-size: 13px; opacity: .7; }

/* desktop menu */
.main-nav { position: absolute; top: 138px; left: calc(50% - 165px); }
.main-nav > ul { display: flex; }
.main-nav li { position: relative; }
.main-nav a, .main-nav .nav-btn {
  display: block; padding: 0 15px; border: 0; background: none;
  font: 700 17px/31px Questrial, sans-serif; color: var(--green); white-space: nowrap;
}
.main-nav a:hover, .main-nav .nav-btn:hover { color: var(--nav-hover); }
.main-nav .sub {
  position: absolute; left: 0; top: 31px; z-index: 40;
  display: none; width: max-content; padding-top: 7px;
}
.main-nav .has-sub:hover > .sub,
.main-nav .has-sub:focus-within > .sub,
.main-nav .has-sub.open > .sub { display: block; }
.main-nav .sub li { background: var(--tan); }
.main-nav .sub a { padding: 0 13.5px; line-height: 32px; }

.menu-toggle, .mobile-menu { display: none; }

/* ---------- shared main / sections ---------- */
main { display: flow-root; position: relative; } /* flow-root stops the mobile hero's negative margin collapsing through main */
.anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.abs { position: absolute; }

/* ---------- home ---------- */
#our-mission { top: 550px; }   /* relative to main (the hero is always first) */
#services { top: -180px; }    /* inside .services */

/* Hero photo (free Pexels licence, see README). The photo was widened to 2.6:1 by extending
   its plain studio backdrop, so the doctor sits on the right with the title over the backdrop,
   like the Wix original. To use the original Wix photo instead (licensed copy), set
   top: -222px; height: 900px; background-position: center. */
.hero { position: relative; height: 680px; margin: 0 var(--side); overflow: hidden; background: var(--green); }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  /* soft white lift on the left keeps the bright, airy feel of the original behind the title */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .38) 42%, rgba(255, 255, 255, 0) 64%),
    #afb3b4 url(images/hero-doctor.jpg) 77% 0 / cover no-repeat;
}
.hero-title {
  position: absolute; top: 100.5px; left: calc(50% - 404px); width: 400px;
  text-align: center; font: 700 65px/78px Fahkwang, sans-serif; color: var(--maroon);
}
.hero-sub {
  position: absolute; top: 191px; left: calc(50% - 409.5px); width: 500px;
  text-align: center; font: 400 23px/43px var(--serif); letter-spacing: 3.45px; color: var(--slate);
}

.about { position: relative; height: 789px; margin: 68px var(--side) 0; background: var(--salmon); }
.about h2 {
  position: absolute; top: 104px; left: 0; right: 0; text-align: center;
  font: 700 30px/55px var(--serif); letter-spacing: 1.5px;
}
.about p {
  position: absolute; top: 225.7px; left: calc(50% - 378px); width: 755px;
  font: 700 22px/33px Barlow, sans-serif; letter-spacing: 2.2px; text-align: justify;
}

.team { position: relative; margin-top: 70px; padding: 359px 0 53px; }
.team h2 { position: absolute; top: 83px; left: 0; right: 0; text-align: center; font: 400 56px/103px var(--serif); }
.team-rule { position: absolute; top: 199px; left: calc(50% - 15px); width: 30px; height: 3px; background: var(--cream); }
/* Like the Wix repeater: three 403px cards centred; below ~1330px they wrap two per row
   (the third card starts the next row on the left), and the section grows. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, 403px);
  justify-content: center; align-items: start; gap: 60px;
}
.card { width: 403px; padding-bottom: 35px; background: rgba(110, 25, 25, .8); }
.card-media { width: 402px; height: 336px; margin-left: 1px; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .role { margin: 40.3px 0 0 31px; font-size: 16px; line-height: 22.4px; }
.card .name { margin: 4.8px 0 0 31px; font: 700 20px/28px var(--serif); }
.card .bio { width: 336px; margin: 30px 0 0 31px; font-size: 16px; line-height: 24px; }
.card .social { margin: 49.5px 0 0 24px; gap: 7px; color: #000; }
.card .social li { width: 25px; height: 25px; }
.card:first-child .role { margin-top: 41px; line-height: 19px; }
.card:first-child .name { margin-top: 8px; line-height: 37px; }
.card:first-child .bio { margin-top: 29.5px; }

.services { position: relative; height: 1076px; margin: 0 var(--side); background: var(--salmon); }
.services h2 {
  position: absolute; top: 104px; left: 0; right: 0; text-align: center;
  font: 400 38px/70px var(--serif); letter-spacing: 1.9px;
}
.services-intro {
  position: absolute; top: 244px; left: calc(50% - 357.5px); width: 715px;
  text-align: center; font-size: 20px; line-height: 30px;
}
.tile { position: absolute; top: 433px; height: 411px; overflow: hidden; background: var(--green); }
/* The two tiles each take roughly half of the (stretched) section, 35px apart. */
.tile--mcr { left: 41px; width: calc(50% - 57px); }
.tile--mc { left: calc(50% + 19px); width: calc(50% - 60px); }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .68; }
.tile-pattern { position: absolute; inset: 0; background: url(images/service-medicinal-chemistry.jpg) 50% 50% repeat; opacity: .51; }
.tile-btn {
  position: absolute; left: calc(50% - 236px); bottom: 0; width: 471px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal); color: #fff; font: 400 16px/22.4px 'EB Garamond', Garamond, serif;
}

.strip-form { position: relative; left: -8px; width: 980px; height: 244px; margin: 619px auto 0; }
.strip-form h2 { position: absolute; left: 36px; top: 90px; font: 700 20px/20px Questrial, sans-serif; color: var(--coral); }
.strip-form input {
  position: absolute; top: 138px; width: 360px; height: 50px;
  padding: 3px 3px 3px 24px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: rgba(180, 90, 212, .17); font: 800 14px var(--sans); color: var(--coral); outline: none;
}
.strip-form input::placeholder { color: var(--coral); opacity: 1; }
.strip-form input:hover, .strip-form input:focus { background: rgba(180, 90, 212, .1); }
.strip-form .f-email { left: 33px; }
.strip-form .f-subject { left: 406px; }
.strip-form button {
  position: absolute; left: 766px; top: 138px; width: 180px; height: 50px;
  border: 0; background: var(--coral); color: var(--green); font: 800 14px/19.6px var(--sans);
}

/* ---------- inner pages ---------- */
.page { position: relative; }
.page-title { position: absolute; font: 400 40px/74px var(--serif); white-space: nowrap; }

/* KPO: fixed full-viewport bokeh photo with a 20% yellow tint (same tint as Wix) */
body.kpo { background: transparent; }
body.kpo::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255, 242, 105, .2), rgba(255, 242, 105, .2)),
    #fff369 url(images/kpo-background.jpg) center / cover no-repeat;
}
.page--kpo { height: 513px; }
.kpo-title { top: 108px; left: calc(50% - 401px); }
.kpo-list { top: 213px; left: calc(50% - 401.4px); width: 600px; }
.kpo-list .zwsp { font-size: 20px; line-height: 24px; }
.kpo-list ul { list-style: disc; padding-left: 50.4px; font-size: 28px; line-height: 33px; }

/* Medicinal Chemistry: scrolling marble photo behind the whole page */
body.mc { background: #a7a7a7 url(images/marble-background.jpg) center / cover no-repeat; }
.page--mc { height: 500px; }
.mc-title { top: 37px; left: calc(50% - 260px); width: 564px; }
.mc-list {
  top: 138px; left: calc(50% - 401px); width: 745px;
  list-style: disc; padding-left: 45px; font-size: 25px; line-height: 35px;
}

/* Our Commitement */
.page--oc { height: 878px; }
.oc-title { top: 123px; left: calc(50% - 470px); }
.oc-text { top: 203.5px; left: calc(50% - 464px); width: 658px; font-size: 25px; line-height: 42.5px; text-align: justify; }

/* Contact */
.page--contact { height: 1841px; }
.ct-title { top: 123px; left: calc(50% - 476px); }
.ct-col { left: calc(50% - 476px); }
.ct-address { top: 248px; font-size: 20px; line-height: 24px; }
.ct-h2 { font: 400 26px/48px var(--serif); white-space: nowrap; }
.ct-h2--hours { top: 452px; }
.ct-hours { top: 539px; font-size: 20px; line-height: 32px; }
.ct-h2--dir { top: 673px; }
.ct-dir { top: 740px; font-size: 20px; line-height: 30px; }
.ct-map { top: 816px; left: calc(50% - 360px); width: 701px; height: 351px; border: 0; background: #e5e3df; }
.ct-form { top: 1312px; left: calc(50% - 152px); width: 574px; height: 529px; }
.ct-form h2 { position: absolute; left: 4px; top: 0; font: 700 30px/41px var(--futura); color: var(--plum); }
.ct-field { position: absolute; width: 240px; }
.ct-field label { display: block; font: 700 14px/14px var(--futura); color: var(--plum); }
.ct-field input, .ct-field textarea {
  display: block; width: 100%; height: 56px; margin-top: 9px;
  padding: 3px 3px 3px 22px; border: 0; border-radius: 0;
  background: rgba(180, 90, 212, .8); font: 300 14px var(--futura); color: #fff; outline: none;
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(255, 255, 255, .75); opacity: 1; }
.ct-field textarea { height: 60px; padding: 10.5px 10px 3px 22px; resize: none; }
.ct-first { left: 0; top: 79px; }
.ct-last { left: 280px; top: 79px; }
.ct-email { left: 0; top: 192px; }
.ct-phone { left: 280px; top: 192px; }
.ct-message { left: 0; top: 302px; width: 520px; }
.ct-form button {
  position: absolute; left: 134px; top: 413px; width: 250px; height: 45px;
  border: 3px solid var(--purple); background: #fff; color: var(--plum); font: 700 15px/21px var(--futura);
}

/* ---------- social icons ---------- */
.social { display: flex; }
.social a { display: block; width: 100%; height: 100%; }
.social svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* ---------- footer ---------- */
.site-footer { position: relative; height: 392px; background: var(--green); }
.ftr-box { position: absolute; top: -7px; left: var(--side); right: var(--side); height: 236px; background: var(--tan); }
.ftr-h { position: absolute; top: 50px; font: 400 19px/35px var(--serif); letter-spacing: .95px; color: var(--green); white-space: nowrap; }
/* Footer columns spread proportionally with the window width (measured on Wix at 1280–1920px). */
.ftr-h--addr { left: calc(147px + .155 * (100% - 1440px)); }
.ftr-h--hours { left: calc(540px + .465 * (100% - 1440px)); }
.ftr-addr { position: absolute; top: 95.5px; left: calc(138px + .155 * (100% - 1440px)); width: 285px; font-size: 22px; line-height: 30px; }
.ftr-addr > span { background: var(--salmon); padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ftr-hours { position: absolute; top: 106px; left: calc(540px + .465 * (100% - 1440px)); font-size: 15px; line-height: 30px; color: #fff; }
.ftr-social { position: absolute; top: 190px; left: calc(944px + .8115 * (100% - 1440px)); gap: 12px; color: #fff; }
.ftr-social li { width: 23px; height: 23px; }
.copyright { position: absolute; top: 340px; left: 0; right: 0; text-align: center; font-size: 15px; line-height: 18px; }

/* ---------- chat widget (rebuild of the Wix Chat button/panel) ---------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--sans); }
.chat-launch {
  display: flex; align-items: center; width: 200px; height: 56px; padding: 0 0 0 36px;
  border: 0; background: var(--maroon); box-shadow: 0 0 3px rgba(182, 180, 180, .5); color: var(--green);
}
.chat-launch-icon { flex: none; width: 26px; height: 26px; margin-right: 10px; }
.chat-launch-text { font: 400 18px/34px var(--serif); white-space: nowrap; }
.chat-bubble-icon { display: none; }
.chat.open .chat-launch { display: none; }
.chat-panel {
  position: fixed; right: 20px; bottom: 20px; width: 340px; height: 600px;
  display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 13px 2px rgba(22, 45, 61, .08);
}
.chat-head {
  position: relative; z-index: 1; flex: none; height: 80px; padding: 17px 20px 0;
  background: var(--maroon); box-shadow: 0 7px 18px rgba(0, 0, 0, .04); color: var(--green);
}
.chat-title { font: 400 19px/27px var(--serif); }
.chat-status { display: flex; align-items: center; font-size: 14px; line-height: 20px; font-weight: 300; }
.chat-dot { width: 12px; height: 12px; margin-right: 4px; border: 2px solid var(--maroon); border-radius: 50%; background: #43b72a; }
.chat-close { position: absolute; right: 12px; top: 28px; width: 24px; height: 24px; padding: 4px; border: 0; background: none; color: var(--green); }
.chat-close svg { display: block; width: 100%; height: 100%; }
.chat-body {
  flex: 1; overflow-y: auto; padding: 16px 20px; background: rgba(110, 25, 25, .1);
  display: flex; flex-direction: column; gap: 10px; color: #162d3d; font-size: 15px; line-height: 21px;
}
.chat-msg { max-width: 80%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--me { align-self: flex-end; background: var(--maroon); color: var(--cream); border-bottom-right-radius: 4px; }
.chat-msg--bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(22, 45, 61, .08); }
.chat-details { display: grid; gap: 8px; margin-top: 10px; }
.chat-details input {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d6cfcf; border-radius: 6px;
  background: #fff; font-size: 16px; color: #162d3d; /* 16px stops iOS zooming on focus */
}
.chat-details button {
  justify-self: start; height: 34px; padding: 0 18px; border: 0; border-radius: 6px;
  background: var(--maroon); color: var(--cream); font-size: 15px; font-weight: 800;
}
.chat-details :disabled { opacity: .6; }
.chat-compose { position: relative; flex: none; height: 61px; border-top: 1px solid #eee; background: #fff; }
.chat-compose textarea {
  position: absolute; left: 20px; top: 19px; width: 235px; height: 23px; padding: 0; border: 0;
  resize: none; overflow-y: auto; background: transparent; font-size: 16px; line-height: 23px; color: #162d3d; outline: none;
}
.chat-compose textarea::placeholder { color: #162d3d; opacity: 1; }
.chat-icon-btn { position: absolute; top: 18px; width: 24px; height: 24px; padding: 4px; border: 0; background: none; color: #8894ab; }
.chat-icon-btn svg { display: block; width: 100%; height: 100%; }
.chat-emoji-btn { left: 270px; }
.chat-send { left: 296px; }
.chat-send.ready { color: var(--maroon); }
.chat-emoji {
  position: absolute; right: 10px; bottom: 66px; display: grid; grid-template-columns: repeat(6, 34px);
  padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(22, 45, 61, .18);
}
.chat-emoji button { width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; font-size: 20px; line-height: 1; }
.chat-emoji button:hover, .chat-emoji button:focus-visible { background: #f3eded; }

/* ==========================================================================
   Mobile (Wix mobile layout, 320 design px scaled to the screen)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --u: min(calc(100vw / 320), 1.5px); }
  body { min-width: 0; max-width: calc(320 * var(--u)); margin: 0 auto; }

  /* header: only the tan bar (title + menu button) stays pinned; the rest scrolls away */
  html { scroll-padding-top: calc(101 * var(--u)); }
  .site-header { position: relative; height: calc(384 * var(--u)); }
  .hdr-bar {
    position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: calc(101 * var(--u));
    max-width: calc(320 * var(--u)); margin: 0 auto;
  }
  .site-title { left: calc(69 * var(--u)); top: calc(19 * var(--u)); font-size: calc(23 * var(--u)); line-height: calc(43 * var(--u)); }
  .hdr-logo { left: calc(130 * var(--u)); top: calc(166 * var(--u)); width: calc(60 * var(--u)); height: calc(57 * var(--u)); }
  .search { top: calc(111 * var(--u)); left: calc(10 * var(--u)); width: calc(300 * var(--u)); height: calc(45 * var(--u)); }
  .search-icon { left: calc(12 * var(--u)); top: calc(13 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .search input { left: calc(42 * var(--u)); width: calc(218 * var(--u)); height: calc(43 * var(--u)); padding: 0; font-size: calc(20 * var(--u)); }
  .hdr-address, .hdr-tel { left: calc(15 * var(--u)); white-space: normal; color: var(--tan); }
  .hdr-address { top: calc(233 * var(--u)); width: calc(290 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(28 * var(--u)); }
  .hdr-tel { top: calc(324 * var(--u)); width: calc(150 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(25 * var(--u)); }
  .main-nav { display: none; }

  .menu-toggle {
    display: block; position: absolute; left: calc(265 * var(--u)); top: calc(5 * var(--u));
    width: calc(50 * var(--u)); height: calc(50 * var(--u)); padding: 0; border: 0; background: transparent;
  }
  .menu-toggle span {
    position: absolute; left: calc(14 * var(--u)); width: calc(22 * var(--u)); height: calc(2 * var(--u)); background: var(--green);
  }
  .menu-toggle span:nth-child(1) { top: calc(15 * var(--u)); }
  .menu-toggle span:nth-child(2) { top: calc(24 * var(--u)); }
  .menu-toggle span:nth-child(3) { top: calc(33 * var(--u)); }

  /* full-screen menu */
  .mobile-menu { display: block; position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--tan); }
  .mm-close {
    position: absolute; left: calc(265 * var(--u)); top: calc(5 * var(--u));
    width: calc(50 * var(--u)); height: calc(50 * var(--u)); padding: calc(14 * var(--u));
    border: 0; background: transparent; color: var(--green);
  }
  .mm-close svg { display: block; width: 100%; height: 100%; }
  .mm-list { position: absolute; top: calc(84 * var(--u)); left: 0; right: 0; padding-bottom: calc(40 * var(--u)); }
  .mm-row { position: relative; display: flex; justify-content: center; align-items: center; height: calc(51 * var(--u)); }
  .mm-row > a, .mm-item > a, .mm-label {
    display: block; max-width: calc(188 * var(--u)); padding: 0; border: 0; background: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 300 calc(20 * var(--u))/calc(51 * var(--u)) var(--sans); color: var(--green);
  }
  .mm-sub .mm-row > a { font-size: calc(21 * var(--u)); }
  .mm-item { display: block; }
  .mm-item > a, .mm-item > .mm-label { padding: 0 calc(9 * var(--u)); }
  .mm-toggle {
    position: absolute; left: calc(50% + 44 * var(--u)); top: 0; width: calc(50 * var(--u)); height: 100%;
    padding: 0; border: 0; background: none; color: var(--cream);
  }
  .mm-toggle svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); transform: rotate(180deg); transition: transform .2s; }
  .mm-toggle[aria-expanded="true"] svg { transform: none; }
  .mobile-menu [aria-current="page"] { color: var(--maroon); } /* Wix used tan-on-tan (invisible) */
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* home */
  #our-mission { top: calc(292 * var(--u)); }
  #services { top: 0; }
  .hero { height: calc(308 * var(--u)); margin: calc(-26 * var(--u)) 0 0; }
  .hero::before { background-position: 0 0, 70% 0; }
  .hero-title {
    top: calc(117.65 * var(--u)); left: calc(62 * var(--u)); width: calc(200 * var(--u));
    font-size: calc(31 * var(--u)); line-height: calc(37.2 * var(--u)); color: var(--tan);
  }
  .hero-sub {
    top: calc(168 * var(--u)); left: calc(57 * var(--u)); width: calc(200 * var(--u)); text-align: left;
    font-size: calc(14 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: calc(2.1 * var(--u));
  }

  .about { height: calc(629 * var(--u)); margin: calc(10 * var(--u)) 0 0; }
  .about h2 { top: calc(54 * var(--u)); left: calc(5 * var(--u)); font-size: calc(23 * var(--u)); line-height: calc(43 * var(--u)); letter-spacing: calc(1.15 * var(--u)); }
  .about p {
    top: calc(138.45 * var(--u)); left: calc(16 * var(--u)); width: calc(289 * var(--u));
    font-size: calc(17 * var(--u)); line-height: calc(25.5 * var(--u)); letter-spacing: calc(1.7 * var(--u));
  }

  .team { margin-top: calc(46 * var(--u)); padding: calc(90 * var(--u)) 0 0; }
  .team h2 { top: 0; font-size: calc(30 * var(--u)); line-height: calc(55 * var(--u)); }
  .team-rule { top: calc(75 * var(--u)); left: calc(145 * var(--u)); width: calc(30 * var(--u)); height: calc(3 * var(--u)); }
  .cards { grid-template-columns: 1fr; gap: calc(60 * var(--u)); }
  .card { width: auto; padding: calc(20 * var(--u)) 0; }
  .card-media { width: calc(280 * var(--u)); height: calc(206 * var(--u)); margin-left: calc(20 * var(--u)); }
  /* Wix crops the "Coming Soon" artwork tighter on mobile than plain object-fit: cover */
  .card-media img.cs { transform: scale(1.137); }
  .card .role { margin: calc(9.3 * var(--u)) 0 0 calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .card .name { margin: calc(10.9 * var(--u)) calc(20 * var(--u)) 0; font-size: calc(22 * var(--u)); line-height: calc(30.8 * var(--u)); }
  .card .bio { width: calc(279 * var(--u)); margin: calc(9.2 * var(--u)) 0 0 calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .card .social { margin: calc(20.5 * var(--u)) 0 0 calc(20 * var(--u)); gap: calc(15 * var(--u)); }
  .card .social li { width: calc(35 * var(--u)); height: calc(35 * var(--u)); }
  .card:first-child .role { margin-top: calc(10 * var(--u)); line-height: calc(19 * var(--u)); }
  .card:first-child .name { margin-top: calc(10 * var(--u)); line-height: calc(40 * var(--u)); }
  .card:first-child .bio { margin-top: calc(9.5 * var(--u)); }

  .services { height: calc(944 * var(--u)); margin: 0; }
  .services h2 { top: calc(50 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(46 * var(--u)); letter-spacing: calc(1.25 * var(--u)); }
  .services-intro {
    top: calc(146.75 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u));
    font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u));
  }
  .tile { left: 0; right: 0; width: auto; height: calc(68 * var(--u)); }
  .tile--mc { top: calc(324 * var(--u)); }
  .tile-pattern { background-size: calc(275 * var(--u)) auto; }
  .tile--mcr { top: calc(417 * var(--u)); }
  .tile-btn { top: calc(10 * var(--u)); bottom: auto; height: calc(48 * var(--u)); }
  .tile--mc .tile-btn { left: calc(60 * var(--u)); width: calc(200 * var(--u)); font-size: calc(14.3158 * var(--u)); line-height: calc(20.04 * var(--u)); }
  .tile--mcr .tile-btn { left: calc(80 * var(--u)); width: calc(160 * var(--u)); font-size: calc(14.4762 * var(--u)); line-height: calc(20.27 * var(--u)); white-space: nowrap; }

  .strip-form { left: 0; width: calc(280 * var(--u)); height: calc(270 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(20 * var(--u)); }
  .strip-form h2 { left: calc(10 * var(--u)); top: calc(20 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(19 * var(--u)); }
  .strip-form input {
    left: calc(10 * var(--u)); width: calc(260 * var(--u)); height: calc(50 * var(--u));
    padding-left: calc(24 * var(--u)); font-size: calc(15 * var(--u));
  }
  .strip-form .f-email { left: calc(10 * var(--u)); top: calc(65 * var(--u)); }
  .strip-form .f-subject { left: calc(10 * var(--u)); top: calc(125 * var(--u)); }
  .strip-form button {
    left: calc(80 * var(--u)); top: calc(185 * var(--u)); width: calc(120 * var(--u)); height: calc(42 * var(--u));
    font-size: calc(14 * var(--u)); line-height: calc(19.6 * var(--u));
  }

  /* inner pages */
  .page-title { white-space: normal; }
  .page--kpo { height: calc(200 * var(--u)); }
  .kpo-title { top: calc(10 * var(--u)); left: calc(20 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(48 * var(--u)); }
  .kpo-list { top: calc(-1 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u)); }
  .kpo-list .zwsp { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .kpo-list ul { padding-left: calc(36 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }

  body.mc { background-position: center top; background-size: auto calc(772 * var(--u)); }
  body.kpo::before { bottom: auto; height: calc(772 * var(--u)); }
  .page--mc { height: calc(383 * var(--u)); }
  .mc-title { top: calc(10 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(44 * var(--u)); }
  .mc-list {
    top: calc(64.2 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u));
    padding-left: calc(34.2 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(26.6 * var(--u));
  }

  .page--oc { height: calc(539 * var(--u)); }
  .oc-title { top: calc(55 * var(--u)); left: calc(20 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(46 * var(--u)); }
  /* tiny letter-spacing makes Figtree wrap exactly where Avenir did */
  .oc-text { top: calc(112 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(35.7 * var(--u)); letter-spacing: calc(.18 * var(--u)); }

  .page--contact { height: calc(1508 * var(--u)); }
  .ct-title { top: calc(57 * var(--u)); left: calc(20 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(46 * var(--u)); }
  .ct-col { left: calc(20 * var(--u)); }
  .ct-address { top: calc(124 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }
  .ct-h2--hours { top: calc(292 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(35 * var(--u)); }
  .ct-hours { top: calc(342 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); }
  .ct-h2--dir { top: calc(437 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(37 * var(--u)); }
  .ct-dir { top: calc(493.75 * var(--u)); width: calc(200 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u)); }
  .ct-map { top: calc(616 * var(--u)); left: 0; width: 100%; height: calc(278 * var(--u)); }
  .ct-form { top: calc(904 * var(--u)); left: calc(20 * var(--u)); width: calc(280 * var(--u)); height: calc(604 * var(--u)); }
  .ct-form h2 { left: calc(10 * var(--u)); top: calc(10 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); }
  .ct-field { left: calc(10 * var(--u)); width: calc(260 * var(--u)); }
  .ct-field label { font-size: calc(16 * var(--u)); line-height: calc(16 * var(--u)); }
  .ct-field input, .ct-field textarea { margin-top: calc(9 * var(--u)); height: calc(56 * var(--u)); padding-left: calc(22 * var(--u)); font-size: calc(15 * var(--u)); }
  .ct-field textarea { height: calc(60 * var(--u)); padding-top: calc(11.25 * var(--u)); }
  .ct-first { top: calc(60 * var(--u)); }
  .ct-last { top: calc(151 * var(--u)); }
  .ct-email { top: calc(242 * var(--u)); }
  .ct-phone { top: calc(333 * var(--u)); }
  .ct-message { top: calc(424 * var(--u)); width: calc(260 * var(--u)); }
  .ct-form button {
    left: calc(80 * var(--u)); top: calc(519 * var(--u)); width: calc(120 * var(--u)); height: calc(42 * var(--u));
    font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u));
  }

  /* footer */
  .site-footer { height: calc(589 * var(--u)); }
  .ftr-box { top: 0; left: 0; right: 0; height: calc(514 * var(--u)); }
  .ftr-h { left: calc(21 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(35 * var(--u)); letter-spacing: calc(.95 * var(--u)); }
  .ftr-h--addr { top: calc(31 * var(--u)); left: calc(21 * var(--u)); }
  .ftr-h--hours { top: calc(175 * var(--u)); left: calc(21 * var(--u)); }
  .ftr-addr { top: calc(91.2 * var(--u)); left: calc(21 * var(--u)); width: calc(280 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
  .ftr-hours { top: calc(239.5 * var(--u)); left: calc(21 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(26 * var(--u)); }
  .ftr-social { top: calc(301 * var(--u)); left: calc(18 * var(--u)); gap: calc(15 * var(--u)); }
  .ftr-social li { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
  .copyright { top: calc(545 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- chat widget on phones: round bubble, full-screen panel (as on Wix) ---------- */
@media (max-width: 767px) {
  .chat { right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); }
  .chat-launch {
    justify-content: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); padding: 0;
    border-radius: 50%; background: #fff; box-shadow: none;
  }
  .chat-launch-icon, .chat-launch-text { display: none; }
  .chat-bubble-icon { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .chat-panel { inset: 0; width: auto; height: auto; box-shadow: none; }
  .chat-head { height: calc(70 * var(--u)); padding: calc(13 * var(--u)) calc(20 * var(--u)) 0; }
  .chat-title { font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); }
  .chat-status { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .chat-dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .chat-close { right: calc(12 * var(--u)); top: calc(23 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .chat-compose { height: calc(61 * var(--u)); }
  .chat-compose textarea {
    left: calc(20 * var(--u)); top: calc(19 * var(--u)); width: calc(241 * var(--u)); height: calc(23 * var(--u));
    font-size: max(16px, calc(16 * var(--u))); line-height: calc(23 * var(--u));
  }
  .chat-emoji-btn { display: none; }
  .chat-send { left: calc(276 * var(--u)); top: calc(18 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .chat-body { padding: calc(16 * var(--u)) calc(20 * var(--u)); }
  html.chat-open, html.chat-open body { overflow: hidden; }
}

/* 404 page link */
.text-link { text-decoration: underline; }