/* Montano Strata — site styles.
   Pulled 1:1 from the Claude Design handoff. All inline-CSS work preserved. */

@font-face{font-family:"Whyte";src:url("../../fonts/Whyte-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Whyte";src:url("../../fonts/Whyte-Book.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Whyte";src:url("../../fonts/Whyte-Regular.ttf") format("truetype");font-weight:450;font-style:normal;font-display:swap}
@font-face{font-family:"Whyte";src:url("../../fonts/Whyte-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Whyte";src:url("../../fonts/Whyte-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Akkurat";src:url("../../fonts/Akkurat.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#F4F8FC;
  --paper:#FFFFFF;
  --ink:#0B1623;
  --ink-2:#2E3D52;
  --ink-3:#6E7D90;
  --line:#DEE8F2;
  --line-2:#BFCFE0;
  --brand:#4884C2;
  --brand-deep:#2F5F94;
  --brand-darker:#1F4775;
  --brand-soft:#E4EEF7;
  --brand-bg:#EBF3FA;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Akkurat","Inter",ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html { scroll-behavior:smooth; scroll-padding-top:88px }
::selection{background:var(--brand);color:#fff}

.display{
  font-family:"Whyte","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:500;
  letter-spacing:-0.022em;
  line-height:1.02;
  text-wrap:balance;
}

a{color:inherit;text-decoration:none;transition:color .18s ease}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{max-width:100%;display:block}
iframe{max-width:100%;display:block}
#app{min-height:100vh; overflow-x:hidden}

.eyebrow{
  font-family:"Akkurat","Inter",sans-serif;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand); font-weight:600;
}

/* Reveal animations */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0) }
.reveal-stagger > .reveal:nth-child(1){transition-delay:0ms, 0ms}
.reveal-stagger > .reveal:nth-child(2){transition-delay:80ms, 80ms}
.reveal-stagger > .reveal:nth-child(3){transition-delay:160ms, 160ms}
.reveal-stagger > .reveal:nth-child(4){transition-delay:240ms, 240ms}
.reveal-stagger > .reveal:nth-child(5){transition-delay:320ms, 320ms}
.reveal-stagger > .reveal:nth-child(6){transition-delay:400ms, 400ms}
.reveal-stagger > .reveal:nth-child(7){transition-delay:480ms, 480ms}
.reveal-stagger > .reveal:nth-child(8){transition-delay:560ms, 560ms}
.reveal-stagger > .reveal:nth-child(9){transition-delay:640ms, 640ms}
.reveal-stagger > .reveal.in-view{ transition-delay:0ms !important }

/* Header link hover */
.nav-link{ position:relative }
.nav-link::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-9px; height:1.5px;
  background:var(--brand);
  transition:left .2s ease, right .2s ease;
}
.nav-link:hover::after{ left:18px; right:18px }
.nav-link:hover{ color:var(--brand-deep) }

/* CTA pill hover */
.cta-pill{ transition:transform .2s ease, box-shadow .2s ease, background .2s ease }
.cta-pill:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(72,132,194,.5) }

/* IB. Group / opco cards — clickable, hover lift, animated arrow */
.opco-card{
  position:relative;
  transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.opco-card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--brand);
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.opco-card:hover{
  background:var(--brand-soft);
  transform:translateY(-3px);
  box-shadow:0 18px 36px -22px rgba(11,22,35,.18);
}
.opco-card:hover::before{ width:100% }
.opco-arrow{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.2,1) }
.opco-card:hover .opco-arrow{ transform:translateX(6px) }

/* Team card hover */
.team-card{ display:block }
.team-card .team-portrait{ transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.team-card:hover .team-portrait{ transform:translateY(-3px); filter:saturate(1.08) brightness(1.02); }
.team-arrow{ display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.2,1) }
.team-card:hover .team-arrow{ transform:translateX(4px) }

/* Page hero scroll cue */
.page-scroll-bar{
  width:1.5px; height:44px; background:linear-gradient(180deg, var(--ink-3), transparent);
  position:relative; overflow:hidden;
}
.page-scroll-bar::after{
  content:""; position:absolute; left:0; right:0; top:-30%;
  height:30%; background:var(--brand);
  animation: page-scroll-cue 2.2s cubic-bezier(.45,.05,.4,.95) infinite;
}
@keyframes page-scroll-cue {
  0% { transform: translateY(0) }
  70% { transform: translateY(360%) }
  100% { transform: translateY(360%) }
}

/* ── Footer ───────────────────────────────────────────── */
.ms-footer { width: 100%; position: relative; }
.ms-footer-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 60%;
  background: radial-gradient(60% 50% at 50% 20%, rgba(72,132,194,.16), transparent 70%);
  pointer-events: none;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.ms-footer:hover .ms-footer-glow { transform: translateY(-12px); }
.ms-footer-grid {
  display:grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}
.ms-pill {
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #cfd6e0; font-size: 13px; font-weight: 500;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
}
.ms-pill:hover {
  background: rgba(72,132,194,.18);
  border-color: rgba(72,132,194,.45);
  color: #fff; transform: translateY(-1px);
}
.ms-pill-dark { white-space: normal; line-height:1.3; }
.ms-pill-ico { display:inline-flex; align-items:center; justify-content:center; color: var(--brand); flex-shrink: 0; }
.ms-social { display:flex; gap:10px; margin-top: 14px; }
.ms-social-btn {
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color:#cfd6e0;
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.ms-social-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
  transform: translateY(-2px) rotate(-4deg);
}
.ms-footer-base {
  margin-top: 72px; padding-top: 28px; border-top:1px solid #1c2a40;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  font-size:13px; color:#7d8a99; letter-spacing:.02em;
}
.ms-footer-base-right { display:flex; align-items:center; gap:24px; }
.ms-back-to-top {
  display:inline-flex; align-items:center; gap:8px;
  color:#cfd6e0; padding:6px 0; cursor:pointer;
  font-size:12px; letter-spacing:.02em;
  transition: color .2s ease, gap .2s ease;
}
.ms-back-to-top svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ms-back-to-top:hover { color:#fff; gap:12px; }
.ms-back-to-top:hover svg { transform: translateY(-3px); }
@media (max-width: 1024px) {
  .ms-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 1100px) {
  .ib-about-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .ib-about-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ms-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .ms-footer-pad { padding-left: 24px !important; padding-right: 24px !important; padding-top: 56px !important; }
  .ms-footer-base { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Footer link hover */
.footer-link{ transition:color .18s ease; color:#d4dae2; }
.footer-link:hover{ color:#fff }

/* Capability / service cells subtle hover */
.capability-cell, .service-cell{ transition:background .2s ease }
.capability-cell:hover, .service-cell:hover{ background:var(--brand-soft) }

/* IB logo tiles on home — banner + row */
.opco-logo{ transition:background .18s ease; }
.opco-logo:hover{ background:var(--brand-soft); }
.opco-logo img{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.opco-logo:hover img{ transform:scale(1.06); }
.opco-logo-parent{ background:#fff }
.opco-logo-parent:hover{ background:var(--brand-bg) }

@media (max-width: 1180px){
  .ib-row{ grid-template-columns: repeat(3, 1fr) !important; }
  .ib-row > a:nth-child(3n){ border-right: none !important; }
  .ib-row > a:nth-child(-n+3){ border-bottom: 1px solid var(--line-2) !important; }
}

/* Mosaic tile hover */
.mosaic-tile{ overflow:hidden }
.mosaic-tile-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,22,35,0) 40%, rgba(11,22,35,.65) 100%);
  transition:opacity .35s ease;
}
.mosaic-tile{ transition:transform .35s ease }
.mosaic-tile:hover{ transform:translateY(-2px) }
.mosaic-tile:hover .mosaic-tile-overlay{ background:linear-gradient(180deg, rgba(11,22,35,0) 20%, rgba(11,22,35,.75) 100%); }
.mosaic-tile > *{ position:relative; z-index:1 }

/* Hero scroll cue */
.scroll-bar{
  width:1.5px; height:48px; background:linear-gradient(180deg, var(--ink-3), transparent);
  position:relative; overflow:hidden;
}
.scroll-bar::after{
  content:""; position:absolute; left:0; right:0; top:-30%;
  height:30%; background:var(--brand);
  animation: scroll-cue 2.2s cubic-bezier(.45,.05,.4,.95) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(0)   }
  70%  { transform: translateY(380%) }
  100% { transform: translateY(380%) }
}

/* Diff row hover (deep blue section) */
.diff-row{ transition:padding .25s ease, background .25s ease }
.diff-row:hover{ background:rgba(255,255,255,.04) }

/* Image break — subtle parallax via JS-friendly scale on hover */
.image-break{ transition:filter .3s }

/* Next-team link */
.next-team-link{ transition:color .2s }
.next-team-link:hover{ color:var(--brand-deep) }

/* Accreditation logos — drop their white backgrounds */
.acc-logo {
  mix-blend-mode: multiply;
  filter: contrast(1.02);
}

/* Ghost (transparent) buttons */
.ghost-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent;
  color:var(--brand-deep); font-size:14px; font-weight:500; letter-spacing:.01em;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.ghost-btn:hover { background:var(--brand-soft); border-color:var(--brand); transform:translateY(-1px); }

/* Office scroll hint (mobile) */
.office-scroll-hint { display:none; }

/* ── Responsive scaling ───────────────────────────────── */
html { font-size: clamp(16px, 0.8vw + 10px, 20px); }

@media (min-width: 721px) and (max-width: 1024px) {
  html { font-size: 19px; }
  .ms-footer-base { font-size: 14px !important; }
  .footer-link, .ms-pill { font-size: 16px !important; }
  .ms-social-btn { width: 46px !important; height: 46px !important; }
  main p { font-size: 18px !important; line-height: 1.62 !important; }
  main li { font-size: 16.5px !important; }
  .eyebrow { font-size: 13.5px !important; }
  h2.display { font-size: clamp(40px, 6.4vw, 64px) !important; }
  h3.display { font-size: clamp(28px, 4.4vw, 44px) !important; }
  .ms-footer-grid { font-size: 16px; }
}

@media (min-width: 1600px) {
  .wrap-pad { padding-left: clamp(48px, 5vw, 140px) !important; padding-right: clamp(48px, 5vw, 140px) !important; max-width: none !important; }
}
@media (min-width: 2200px) {
  body { font-size: 18px; }
  .wrap-pad { padding-left: clamp(72px, 5.6vw, 200px) !important; padding-right: clamp(72px, 5.6vw, 200px) !important; max-width: none !important; }
}
@media (min-width: 3000px) {
  body { font-size: 19px; }
  .wrap-pad { padding-left: clamp(120px, 6.5vw, 280px) !important; padding-right: clamp(120px, 6.5vw, 280px) !important; max-width: none !important; }
}

/* ── Mobile/responsive overrides ─────────────────────── */
@media (max-width: 1180px) {
  .nav-link { font-size: 14.5px !important; padding: 0 12px !important; }
}
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .ib-about-grid { grid-template-columns: 1fr !important; }
  .service-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .wrap-pad { padding-left: 32px !important; padding-right: 32px !important; max-width: none !important; }
  .office-tabs { grid-template-columns: 1fr !important; }
  .office-tabs > div:last-child { min-height: 420px !important; }
  .hero-image-frame { min-height: 420px !important; }
  .page-hero-title { font-size: clamp(48px, 7.6vw, 84px) !important; }
  .page-hero-body { font-size: 17px !important; }
  .accreditations-row { gap: 32px !important; }
  .accreditations-logos { gap: 40px !important; flex-wrap: nowrap !important; }
  .accreditations-logos img { height: 60px !important; }
  .accreditations-logos img.is-primary { height: 76px !important; }
  .ib-row { grid-template-columns: repeat(3, 1fr) !important; }
  .ib-row > a:nth-child(3n) { border-right: none !important; }
  .ib-row > a:nth-child(-n+3) { border-bottom: 1px solid var(--line-2) !important; }
  .home-ib-top, [data-block="home-ib-top"] { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .section-pad { padding-top: 48px !important; padding-bottom: 48px !important; }
  .page-hero, .page-hero-mobile { min-height: auto !important; padding-top: 104px !important; padding-bottom: 48px !important; }
  .mobile-drawer nav { min-height: auto !important; }
  .mobile-drawer a { padding: 12px 0 !important; font-size: 20px !important; }
  .mobile-drawer .m-contact { margin-top: 20px !important; }
  .mobile-drawer .m-portal { margin-top: 24px !important; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .section-pad { padding-top: 56px !important; padding-bottom: 56px !important; }
}
.page-hero-mobile { justify-content: flex-start !important; }
.page-hero-mobile .page-hero-eyebrow { color: var(--brand-deep) !important; }
.page-hero-mobile .page-hero-body { color: var(--ink) !important; margin-top: 44px !important; }
@media (max-width: 720px) {
  .page-hero-mobile > .wrap-pad { padding-top: 132px !important; padding-bottom: 56px !important; }
}
.page-hero-scrollcue { display: none; }
@media (max-width: 720px) {
  .page-hero-mobile .page-hero-scrollcue {
    display: flex; align-items: center; gap: 8px;
    position: absolute; left: 28px; bottom: 28px;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brand-deep); font-weight: 600;
  }
  .page-hero-scrollcue svg { animation: hero-arrow-bob 1.8s ease-in-out infinite; }
}
@keyframes hero-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .section-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
  .wrap-pad { padding-left: 28px !important; padding-right: 28px !important; }
  h1.display { font-size: clamp(32px, 10vw, 56px) !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
  h2.display { font-size: clamp(28px, 8.4vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -0.018em !important; }
  h3.display { font-size: clamp(24px, 7vw, 40px) !important; line-height: 1.06 !important; }
  .hero-h1 { font-size: clamp(40px, 12vw, 64px) !important; line-height: 0.96 !important; font-weight: 500 !important; }
  .diff-row { grid-template-columns: 48px 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
  .diff-row > :last-child { display: none !important; }
  .diff-row > :first-child { font-size: 22px !important; }
  .diff-row > :nth-child(2) { font-size: 18px !important; }
  .stat-band-cell { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; padding: 24px 8px !important; }
  .stat-band-cell:last-child { border-bottom: none !important; }
  .image-break > div:last-child { left: 24px !important; right: 24px !important; bottom: 28px !important; }
  .office-tabs button { padding: 22px 18px 22px 22px !important; }
  .service-cell, .capability-cell { padding: 36px 28px !important; min-height: 0 !important; }
  .service-grid { grid-template-columns: 1fr !important; }
  .ib-row { grid-template-columns: repeat(2, 1fr) !important; }
  .ib-row > a { border-right: none !important; }
  .ib-row > a:nth-child(2n+1) { border-right: 1px solid var(--line-2) !important; }
  .ib-row > a:nth-child(-n+4) { border-bottom: 1px solid var(--line-2) !important; }
  .ib-row > a { padding: 28px 14px !important; min-height: 120px !important; }
  .accreditations-row { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .accreditations-logos { width: 100% !important; gap: 8px !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
  .accreditations-logos img { height: 44px !important; max-width: 30%; object-fit: contain; }
  .accreditations-logos img.is-primary { height: 56px !important; }
  .cta-strip-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  footer .grid-4 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .office-tabs { display: flex !important; flex-direction: column !important; border: none !important; min-height: 0 !important; }
  .office-tabs-left {
    flex-direction: row !important; border-right: none !important;
    overflow-x: auto !important; gap: 10px !important;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    scrollbar-width: none;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .office-tabs-left::-webkit-scrollbar { display: none; }
  .office-tab-btn {
    flex: 0 0 auto !important; width: auto !important; min-width: 200px !important;
    padding: 16px 20px !important;
    border: 1px solid var(--line) !important; border-radius: 14px !important;
    border-left-width: 1px !important;
    background: #fff !important;
  }
  .office-tab-btn.is-active { border-color: var(--brand) !important; border-left-width: 1px !important; }
  .office-tab-detail { display: none !important; }
  .office-tab-addr { font-size: 12.5px !important; }
  .office-tab-btn .display { font-size: 16px !important; }
  .office-scroll-hint {
    display: flex !important; align-items:center; gap:8px;
    margin-top: 14px; font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
    color: var(--ink-3); font-weight: 600;
  }
  .office-tabs > div:last-child { min-height: 360px !important; margin-top: 16px; border: 1px solid var(--line); }
  .process-grid, .expertise-grid { grid-template-columns: 1fr !important; }
  .process-grid > div, .expertise-grid > div { padding-left: 0 !important; padding-right: 0 !important; border-right: none !important; border-bottom: 1px solid var(--line-2) !important; padding-top: 28px !important; padding-bottom: 28px !important; }
  .services-prompt { grid-template-columns: 1fr !important; gap: 28px !important; }
  .services-prompt-cta { justify-content: center !important; }
  .home-summary-cta { flex-direction: column !important; align-items: center !important; gap: 14px !important; }
  .home-summary-cta a { width: 100% !important; max-width: 360px !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  .wrap-pad { padding-left: 22px !important; padding-right: 22px !important; max-width: none !important; }
  .accreditations-logos { gap: 4px !important; }
  .accreditations-logos img { height: 36px !important; }
  .accreditations-logos img.is-primary { height: 48px !important; }
}
@media (max-width: 380px) {
  .wrap-pad { padding-left: 18px !important; padding-right: 18px !important; max-width: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* ── Hamburger button ─────────────────────────────────── */
.nav-burger {
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  margin-right:-10px;
}
.nav-burger-bars {
  position:relative; width:24px; height:14px;
}
.nav-burger-bars::before,
.nav-burger-bars::after,
.nav-burger-bars span {
  content:""; position:absolute; left:0; right:0; height:1.6px;
  background:var(--ink); border-radius:1px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease, top .25s ease;
}
.nav-burger-bars::before { top:0 }
.nav-burger-bars span    { top:6px }
.nav-burger-bars::after  { top:12px }
.nav-burger.is-open .nav-burger-bars::before { top:6px; transform:rotate(45deg) }
.nav-burger.is-open .nav-burger-bars::after  { top:6px; transform:rotate(-45deg) }
.nav-burger.is-open .nav-burger-bars span    { opacity:0 }

/* ── Mobile drawer ────────────────────────────────────── */
.mobile-drawer {
  position:fixed; inset:0;
  background:var(--bg);
  z-index:49;
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:88px;
}
.mobile-drawer.is-open { transform:translateY(0); }
.mobile-drawer nav {
  display:flex; flex-direction:column;
  min-height:calc(100dvh - 88px);
  padding:32px 28px 48px;
  box-sizing:border-box;
}
.mobile-drawer .m-links { display:flex; flex-direction:column; }
.mobile-drawer a {
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px, 4.4vw, 22px) 0;
  font-family:"Whyte",sans-serif;
  font-size:clamp(22px, 6.4vw, 30px); font-weight:500; letter-spacing:-0.02em;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-drawer a.is-current { color: var(--ink-3); }
.mobile-drawer a.is-current .m-arrow { display:none; }
.mobile-drawer a .m-arrow { color:var(--brand); font-size:15px }

.mobile-drawer .m-contact {
  margin-top:32px;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-drawer .m-contact-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--paper);
  font-family:"Akkurat",sans-serif; font-size:clamp(13px, 3.6vw, 15px); font-weight:500;
  color:var(--ink); letter-spacing:0;
  justify-content:flex-start;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.mobile-drawer .m-contact-row > span:last-child { display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.mobile-drawer .m-contact-row > span:last-child > :last-child {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(12.5px, 3.4vw, 15px);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.mobile-drawer .m-contact-label {
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:2px;
}
.mobile-drawer .m-contact-ico {
  flex-shrink:0; width:34px; height:34px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-bg); color:var(--brand);
}

.mobile-drawer .m-portal {
  margin-top:auto;
  background:var(--brand); color:#fff;
  padding:15px 22px; border-radius:999px;
  font-family:"Akkurat",sans-serif; font-size:13px; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
  border-bottom:0;
  display:flex; justify-content:space-between; align-items:center;
}
body.has-drawer-open { overflow:hidden }

/* Header */
.ms-nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, backdrop-filter .25s;
}
.ms-nav.is-solid {
  background: rgba(244,248,252,.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.ms-nav.is-hidden { transform:translateY(-100%); }

/* ── PageHero MOBILE: full-bleed background image with veil ─────────
   The .page-hero section carries `background-image:url(...)` inline.
   On desktop the right-column image-frame shows, so the section bg is
   suppressed below. On mobile the section bg shows + veil overlays +
   the right-column image-frame is hidden. */
@media (min-width: 721px) {
  /* Desktop: suppress section bg-image so only the right-column image shows */
  .page-hero { background-image: none !important; }
}
@media (max-width: 720px) {
  .page-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* iOS Safari: 100vh includes the URL bar; dvh is the actual visible area */
    min-height: 100dvh !important;
  }
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(244,248,252,.72) 0%, rgba(244,248,252,.86) 52%, var(--bg) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .page-hero > * { position: relative; z-index: 1; }
  /* Hide the right-column image frame — it's now the full-bleed bg */
  .page-hero .hero-image-frame { display: none !important; }
}

/* ── Home hero MOBILE: TRUE center via absolute positioning ────────
   Flex centering wasn't reliably pinning the H1 to the visual centre
   on iOS Safari (URL bar dynamics + flex centering quirks). Switch the
   section to relative + absolute-centre the wrap-pad child. The bg
   image and veil are already absolute (inset:0) so they're unaffected. */
@media (max-width: 720px) {
  body[data-page="home"] main > section:first-of-type {
    min-height: 100dvh !important;
    padding: 0 !important;
    display: block !important;
  }
  body[data-page="home"] main > section:first-of-type > .wrap-pad {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 auto !important;
    z-index: 2 !important;
  }
}

/* Contact form focus */
.ms-field { display:block; margin-bottom:32px; }
.ms-field-label { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-weight:600; }
.ms-field input,
.ms-field textarea {
  width:100%; border:0;
  border-bottom:1.5px solid var(--line-2);
  background:transparent; padding:14px 0; font-size:18px; color:var(--ink);
  outline:none; font-family:inherit; resize:vertical;
  transition:border-color .18s ease;
}
.ms-field input:focus,
.ms-field textarea:focus { border-bottom-color: var(--brand); }
.ms-field-error { color: #c53030; font-size: 13px; margin-top: 8px; }