/* ==========================================================================
   CONTACT US · OUR OFFICES — split view, sections open in place
   Owner-approved option B (offices lab, round 2), applied 2026-10-07.
   Markup: contact-us.html section#office (.rb). Behaviour: assets/contact/offices.js.
   Icon size for the .r2i icons lives here too. Loaded last in <head>.
   Backup of the page before this change: /Users/vaibhav/d-backups/2026-10-07-offices-b/
   One card. Selection = a raised white tile with a full ring and a check
   badge on a quiet neutral rail. Section rows are full bordered controls; the
   opened content sits directly beneath its own row.
   ========================================================================== */
#office .rb{
  --o-ink:#0B0D12; --o-ink2:#3A414C; --o-ink3:#5B6472;
  --o-acc:#0760C6; --o-deep:#004594; --o-soft:#EEF4FD;
  --o-line:#E3E8F0; --o-rule:#EDF0F5; --o-rail:#F6F8FB; --o-paper:#FFFFFF;
  --o-ease:cubic-bezier(.2,.7,.2,1);
  display: grid; grid-template-columns: minmax(260px, 312px) minmax(0, 1fr);
  margin-top: clamp(18px, 2vw, 28px);
  background: var(--o-paper); border: 1px solid var(--o-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -18px rgba(16,24,40,.14);
  color: var(--o-ink);
}
#office .rb :where(h3, p, dl, dt, dd, ul, figure){ margin: 0; padding: 0; }
#office .rb ul{ list-style: none; }
#office .rb button{ font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
#office .rb :focus-visible{ outline: 2px solid var(--o-acc); outline-offset: 2px; }
#office .rb .r2i{ width: 18px; height: 18px; flex: none; }

/* ---- offices ------------------------------------------------------------ */
#office .rb-rail{ display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--o-rail); border-right: 1px solid var(--o-line); }
#office .rb-r{
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 22px; gap: 12px; align-items: center;
  min-height: 68px; padding: 9px 12px 9px 9px; text-align: left; color: var(--o-ink);
  background: transparent; border: 0; border-radius: 14px;
  transition: background-color .18s var(--o-ease), box-shadow .18s var(--o-ease);
}
#office .rb-th{ display: block; width: 64px; height: 48px; border-radius: 9px; background-color: var(--o-soft); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(16,24,40,.08); }
#office .rb-r-t{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#office .rb-r-n{ font-size: 15.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
#office .rb-r-k{ font-size: 13.5px; line-height: 1.32; font-weight: 500; color: var(--o-ink2); }
#office .rb-tick{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px #C9D3E1; transition: all .18s var(--o-ease); }
#office .rb-tick .r2i{ width: 13px; height: 13px; stroke-width: 2.4; }
#office .rb-r:hover{ background: rgba(255,255,255,.8); }
#office .rb-r[aria-selected="true"]{ background: var(--o-paper); box-shadow: 0 0 0 1px #BFD1EC, 0 0 0 4px rgba(7,96,198,.10), 0 2px 6px rgba(16,24,40,.06); }
#office .rb-r[aria-selected="true"] .rb-r-n{ color: var(--o-deep); font-weight: 800; }
#office .rb-r[aria-selected="true"] .rb-r-k{ color: var(--o-ink); }
#office .rb-r[aria-selected="true"] .rb-tick{ background: var(--o-acc); color: #fff; box-shadow: none; }

/* ---- the profile -------------------------------------------------------- */
#office .rb-pw{ min-width: 0; padding: clamp(22px, 2.3vw, 30px); }
#office .rb-p{ animation: rb-in .22s var(--o-ease); }
@keyframes rb-in{ from{ opacity: 0; } to{ opacity: 1; } }
#office [data-ofx]:not([data-moved]) .rb-p{ animation: none; }   /* 2026-10-08 · only an office the reader opens fades in (offices.js marks [data-moved]); the one the page opens on is simply there */
@media (prefers-reduced-motion: reduce){ #office .rb-p{ animation: none; } }
#office .rb-hd{ scroll-margin-top: 130px; }
#office .rb-role{ display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--o-soft); color: var(--o-deep); font-size: 12.5px; line-height: 1.35; font-weight: 700; letter-spacing: .02em; }
#office .rb-name{ margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
#office .rb-h3{ font-size: clamp(27px, 2.2vw, 32px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; }
#office .rb-h3 i{ font-style: normal; color: var(--o-acc); }
#office .rb-bldg{ font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--o-ink2); }

#office .rb-body{ margin-top: 20px; display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 32px); align-items: start; }
#office .rb-fig img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--o-soft); }
#office .rb-fig figcaption{ margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--o-ink3); }
#office .rb-kf{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
#office .rb-kf-r{ display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-content: start; }
#office .rb-kf-r.is-adr, #office .rb-kf-r.is-conn{ grid-column: 1 / -1; }
#office .rb-kf-r .r2i{ grid-row: 1 / span 2; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--o-soft); color: var(--o-deep); }
#office .rb-kf dt{ font-size: 12px; line-height: 1.35; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--o-ink3); }
#office .rb-kf dd{ display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; line-height: 1.48; color: var(--o-ink2); }
#office .rb-kf dd .is-first{ font-weight: 700; color: var(--o-ink); }
#office .rb-kf dd .is-note{ font-size: 13.5px; color: var(--o-ink3); }
#office .rb-kf dd b{ color: var(--o-ink); font-weight: 650; }
#office .rb-kf-r:not(.is-adr):not(.is-conn) dd{ font-weight: 650; color: var(--o-ink); }

/* section rows — content opens directly under the row that was pressed */
#office .rb-sec{ margin-top: 22px; border: 1px solid var(--o-line); border-radius: 14px; overflow: hidden; }
#office .rb-s{
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center;
  width: 100%; min-height: 56px; padding: 10px 16px 10px 12px; text-align: left;
  background: var(--o-paper); border: 0; color: var(--o-ink); transition: background-color .18s var(--o-ease);
}
#office .rb-sec > .rb-s:not(:first-child){ border-top: 1px solid var(--o-line); }
#office .rb-s-ic{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--o-soft); color: var(--o-deep); }
#office .rb-s-t{ font-size: 15px; line-height: 1.3; font-weight: 700; }
#office .rb-s-m{ font-size: 13px; font-weight: 600; color: var(--o-ink3); padding: 4px 10px; border-radius: 999px; background: #F3F5F9; }
#office .rb-s > .r2i-chev{ color: var(--o-ink3); transition: transform .22s var(--o-ease); }
#office .rb-s:hover{ background: #FAFBFD; }
#office .rb-s[aria-expanded="true"]{ background: #F7FAFE; }
#office .rb-s[aria-expanded="true"] .rb-s-ic{ background: var(--o-acc); color: #fff; }
#office .rb-s[aria-expanded="true"] > .r2i-chev{ transform: rotate(180deg); color: var(--o-deep); }
#office .rb-s-b{ padding: 4px 18px 18px 56px; background: #F7FAFE; animation: rb-in .22s var(--o-ease); }
#office .rb-des p{ font-size: 15px; line-height: 1.62; color: var(--o-ink2); max-width: 78ch; }
#office .rb-des p + p{ margin-top: 10px; }
#office .rb-des strong{ color: var(--o-ink); font-weight: 700; }
#office .rb-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
#office .rb-chips li{ padding: 7px 12px; border-radius: 999px; background: var(--o-paper); box-shadow: inset 0 0 0 1px #D6E1F1; color: #173A66; font-size: 13.5px; line-height: 1.3; font-weight: 600; }

@media (max-width: 1180px) and (min-width: 761px){
  #office .rb-body{ grid-template-columns: minmax(0, 1fr); }
  #office .rb-fig img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 960px) and (min-width: 761px){
  #office .rb{ grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); }
  #office .rb-r{ grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 10px; }
  #office .rb-th{ width: 48px; height: 38px; }
  #office .rb-kf{ grid-template-columns: minmax(0, 1fr); }
}

/* ---- phones: two-column office picker, then the profile ---------------- */
@media (max-width: 760px){
  #office .rb{ display: block; border-radius: 18px; margin-top: 14px; }
  #office .rb-rail{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--o-line); }
  #office .rb-r{ grid-template-columns: 44px minmax(0, 1fr); gap: 9px; min-height: 60px; padding: 8px; background: var(--o-paper); box-shadow: 0 0 0 1px var(--o-line); }
  #office .rb-th{ width: 44px; height: 44px; border-radius: 8px; }
  #office .rb-r-n{ font-size: 14.5px; }
  #office .rb-r-k{ font-size: 12.5px; }
  #office .rb-tick{ display: none; }
  #office .rb-r:hover{ background: var(--o-paper); }
  #office .rb-r[aria-selected="true"]{ box-shadow: 0 0 0 2px var(--o-acc), 0 0 0 5px rgba(7,96,198,.10); }
  #office .rb-pw{ padding: 18px 14px 16px; }
  #office .rb-hd{ scroll-margin-top: 110px; }
  #office .rb-h3{ font-size: 26px; }
  #office .rb-bldg{ font-size: 16px; }
  #office .rb-body{ grid-template-columns: minmax(0, 1fr); margin-top: 16px; gap: 18px; }
  #office .rb-fig img{ aspect-ratio: 16 / 9; }
  #office .rb-kf{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #office .rb-s{ padding: 10px 12px; }
  #office .rb-s-b{ padding: 2px 14px 16px; }
}


/* 2026-10-08 · smoothness: Our Google Reviews (#google-reviews, under the map) ships three loading
   skeletons, and the inline script at the very end of the page hides the block while it has nothing
   to show (no reviews feed is connected). Until the parser reached that script the skeleton block
   painted at full height and then vanished, pulling everything below it up ~540 px and throwing off
   the scroll position on refresh. Where scripts run it is now hidden from the first frame while it
   holds only skeletons — the state the script leaves; real review cards would show it again. With
   scripts off it shows, as before. */
@media (scripting: enabled){
  #office #google-reviews:not(:has(.px-rev-card:not(.is-skel))){ display: none; }
}