/* Production-safe layout guardrails. The original visual system stays in
   site.css; these rules only prevent header and mobile-menu overflow. */

/* The home management portraits live in fixed 4:5 frames. Fill the frame
   explicitly so intrinsic WebP dimensions cannot leave a desktop gap or
   trigger a late layout correction. */
#top > .fo {
  min-height: 0;
  padding-bottom: clamp(72px, 8vh, 120px);
}

#top > .fo .pair {
  align-items: flex-start;
}

#top > .fo .pair img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  #top > .fo {
    padding-bottom: 64px !important;
  }
}
.nav {
  box-sizing: border-box;
  min-height: calc(var(--nh) + env(safe-area-inset-top, 0px));
  overflow: hidden;
}

/* Identities marquee: the section keeps its existing card styling while the
   logo rail moves continuously in a seamless loop. */
.idn .lgrid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: hidden;
}

.idn {
  padding: clamp(64px, 10vh, 120px) var(--m) clamp(64px, 10vh, 120px);
}

.idn-track {
  display: flex;
  flex: 0 0 max-content;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 22px);
  padding-right: clamp(12px, 1.4vw, 22px);
  will-change: transform;
  animation: identities-marquee 90s linear infinite;
}

.idn .lgrid:hover .idn-track,
.idn .lgrid:focus-within .idn-track {
  animation-play-state: paused;
}

.idn-track .mk {
  flex: 0 0 clamp(170px, 21vw, 250px);
  width: clamp(170px, 21vw, 250px);
}

@keyframes identities-marquee {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@media (max-width: 700px) {
  .idn-track .mk {
    flex-basis: clamp(150px, 45vw, 210px);
    width: clamp(150px, 45vw, 210px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idn-track {
    animation: none;
  }
}

.nav .logo {
  height: 100%;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  overflow: hidden;
}

.nav .logo #logo.bo-nav {
  width: min(108px, 30vw);
  height: min(44px, calc(var(--nh) - 16px));
  min-height: 28px;
  max-width: 100%;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
}

.nav .logo #logo.bo-nav > .bo-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.nav .logo #logo.bo-nav > .bo-logo-white {
  display: none;
}

.nav.dark .logo #logo.bo-nav > .bo-logo-blue {
  display: none;
}

.nav.dark .logo #logo.bo-nav > .bo-logo-white {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .logo #logo.bo-nav > .bo-logo-blue {
    display: none;
  }

  :root:not([data-theme="light"]) .nav .logo #logo.bo-nav > .bo-logo-white {
    display: block;
  }
}

.nav ul {
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
}

.mm {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  overscroll-behavior: contain;
}

.mm-top {
  flex: 0 0 48px;
  min-width: 0;
}

.mm-logo {
  max-width: 55vw;
  overflow: hidden;
}

.mm-l,
.mm-l a {
  min-width: 0;
}

.mm-l a {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .nav {
    padding-inline: max(16px, var(--m));
  }

  .nav .logo #logo.bo-nav {
    width: min(98px, 38vw);
    height: min(36px, calc(var(--nh) - 14px));
  }

  .mm {
    padding-inline: max(16px, var(--m));
  }

  .mm-l {
    margin-top: clamp(24px, 5vh, 48px);
  }

  .mm-c {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 370px) {
  .nav .logo #logo.bo-nav {
    width: min(84px, 38vw);
    height: 28px;
  }

  .mm-b {
    grid-template-columns: 1fr;
  }
}

/* Works responsive system. The case studies contain several bespoke visual
   systems, but they all use the same viewport gutters and overflow rules. */
#workpage,
#case {
  --works-gutter: 5%;
  --works-section-gap: var(--site-section-gap);
  --m: var(--works-gutter);
}

/* These project systems previously used 50vw-based full-bleed margins. That
   includes the browser scrollbar in the width and can push a section outside
   the viewport. Their parent already spans the case-study viewport, so a
   normal zero margin is the equivalent full-width layout without overflow. */
#case :where(.gts, .rls, .wls, .tls, .ubs, .ths, .brs, .bre) {
  --m: var(--works-gutter);
}

#case :where(.gts, .rls, .wls, .tls, .ubs, .ths, .brs, .bre) > section,
#case :where(.gts, .rls, .wls, .tls, .ubs, .ths, .brs, .bre) section,
#case :where(.tls, .tlx) {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* `.bre` is itself the section, so it is not covered by the descendant
   selector above. Reset its old 50vw bleed margin or the scrollbar makes it
   shift left by roughly one scrollbar width and clips its artwork. */
#case .bre {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

#case .br-box,
#case .br-box > svg,
#case .br-box > .br-px,
#case .br-px img {
  min-width: 0;
}

#case .br-box > svg,
#case .br-box > .br-px {
  max-width: 100%;
}

/* The brand-rationale artwork is deliberately larger than its crop window;
   its inline width/left/top values define the crop. The generic case-image
   max-width rule must not clamp that artwork back to 100%. */
#case .br-px img {
  max-width: none;
  max-height: none;
}

#case,
#caseBody,
#caseBody > *,
#caseBody img,
#caseBody video,
#caseBody iframe,
#caseBody svg {
  min-width: 0;
  max-width: 100%;
}

#caseBody .sld-track,
#caseBody .pd-row {
  max-width: 100%;
}

#caseBody .sld-track,
#caseBody .pd-row {
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

#caseBody .sld-track::-webkit-scrollbar,
#caseBody .pd-row::-webkit-scrollbar {
  display: none;
}

/* Sliders are content components, not viewport-width sections. The old
   calc(100% + 2 * --m) width made the track wider than its parent and let
   the active image grow outside the case-study column, especially on phones.
   Keep the track inside its real container and let each slide size itself
   from the available viewport. */
#caseBody .sld,
#caseBody .pd {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

#caseBody .sld-track {
  width: 100%;
  padding-inline: 0;
  align-items: center;
}

#caseBody .sld-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(82vw, 1100px);
  max-width: 100%;
  min-width: 0;
}

#caseBody .sld-slide img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(68svh, 680px);
  object-fit: contain;
}

#caseBody .pd-row {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 700px) {
  #caseBody .sld-slide {
    width: 86vw;
    padding: 10px;
  }

  #caseBody .sld-slide img {
    max-height: 62svh;
  }

  #caseBody .sld-bar {
    gap: 10px;
    padding-inline: 0;
  }

  #caseBody .sld-ct {
    min-width: 8em;
  }
}

#caseBody .facts dd,
#caseBody .case .d,
#caseBody .case .a,
#caseBody .case figcaption,
#caseBody .w-s,
#caseBody .w-t,
#caseBody .w-sl,
#caseBody .m-s,
#caseBody .m-t,
#caseBody .m-sl,
#caseBody .u-s,
#caseBody .u-t,
#caseBody .u-sl {
  overflow-wrap: anywhere;
}

#workpage .grid,
#workpage .idn,
#workpage .wp-end,
#workpage .allwork {
  width: 100%;
  max-width: none;
  padding-inline: var(--works-gutter);
}

#workpage .grid {
  row-gap: var(--works-section-gap);
}

#workpage .idn {
  margin-top: var(--works-section-gap) !important;
}

#workpage .wp-end,
#workpage .allwork {
  padding-block: var(--works-section-gap) !important;
  padding-inline: var(--works-gutter) !important;
}

@media (max-width: 1024px) {
  #workpage,
  #case {
    --works-gutter: 2.5%;
    --works-section-gap: var(--site-section-gap);
  }

  #workpage .grid {
    gap: 50px 20px;
  }

  #case .bar,
  #case .hd,
  #case .gal,
  #case .nx,
  #case .chap {
    padding-inline: var(--works-gutter);
  }
}

@media (max-width: 700px) {
  #workpage,
  #case {
    --works-gutter: 2.5%;
    --works-section-gap: var(--site-section-gap);
  }

  #workpage .grid {
    row-gap: 30px;
  }

  #workpage .wp-end,
  #workpage .allwork {
    padding-block: 30px !important;
  }

  #case .bar {
    padding-inline: max(16px, var(--works-gutter));
  }

  #case .hd,
  #case .gal,
  #case .nx,
  #case .chap {
    padding-inline: var(--works-gutter);
  }

  #caseBody .facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* One external rhythm for page sections. Only the leading edge receives the
   gap, so adjacent sections do not create a doubled top-plus-bottom space.
   Section-internal padding remains untouched and continues to control the
   content breathing room within each section. */
:root {
  --site-section-gap: 100px;
}

@media (max-width: 1024px) {
  :root {
    --site-section-gap: 50px;
  }
}

@media (max-width: 700px) {
  :root {
    --site-section-gap: 50px;
  }
}

:where(
  #top,
  #workpage,
  #aboutpage,
  #contactpage,
  #insightspage,
  #postpage,
  #caseBody
) > * + *:not(.sn),
:where(section + section) {
  margin-top: var(--site-section-gap);
}

/* Brand mark: scrolling and OS dark mode may change the navigation colours,
   but they must never invert or replace the actual Blue Owl mark. */
.nav .logo #logo.bo-nav > .bo-logo-blue,
.nav.dark .logo #logo.bo-nav > .bo-logo-blue,
:root:not([data-theme="light"]) .nav .logo #logo.bo-nav > .bo-logo-blue {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

.nav .logo #logo.bo-nav > .bo-logo-white,
.nav.dark .logo #logo.bo-nav > .bo-logo-white,
:root:not([data-theme="light"]) .nav .logo #logo.bo-nav > .bo-logo-white {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
}

.nav .logo #logo.bo-nav > .bo-logo,
.case .bar .cb-logo img {
  transition: none !important;
  filter: none !important;
}

/* Public forms: keep inline forms comfortable and the popup contact form
   compact enough to remain fully visible without an internal scrollbar. */
.ask {
  width: min(100%, 680px);
  margin: 28px auto 0;
}

.ask textarea,
.ask input {
  min-height: 46px;
  padding: 10px 14px;
  font-size: clamp(16px, 1.25vw, 19px);
}

.ask textarea {
  min-height: 72px;
  line-height: 1.35;
}

.ask label {
  display: block;
}

.ask .row {
  gap: 10px;
  margin-top: 10px;
}

.ask .btn {
  min-height: 46px;
  margin-top: 14px;
  padding: 10px 24px;
}

.lf {
  width: min(480px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  margin: auto;
  overflow: hidden;
}

.lf > form#leadF,
.lf > .lf-ok {
  min-width: 0;
  max-height: none;
  overflow: visible;
  padding: 16px 20px 18px;
}

.lf > form#leadF label {
  margin-top: 6px;
}

.lf > form#leadF input,
.lf > form#leadF textarea,
.lf > form#leadF select {
  min-height: 36px;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1.2;
}

.lf > form#leadF textarea {
  height: 46px;
  min-height: 46px;
  resize: none;
}

.lf > form#leadF .tag {
  font-size: 12px;
}

.lf > form#leadF h2,
.lf > .lf-ok h2 {
  max-width: calc(100% - 32px);
  font-size: clamp(27px, 3vw, 34px);
  margin-top: 4px;
}

.lf > form#leadF .s {
  margin: 4px 0 8px;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.25;
}

.lf > form#leadF label span {
  margin-bottom: 2px;
  font-size: 12px;
  line-height: 1.2;
}

.lf > form#leadF .btn {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 18px;
}

.lf > form#leadF .err {
  margin-top: 5px;
  font-size: 12px;
}

.lf-x {
  top: 6px;
  right: 6px;
}

.lf-x button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  font-size: 26px;
}

@media (max-width: 700px) {
  .lf {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100svh - 12px);
    margin: auto;
    border-radius: 18px;
  }

  .lf > form#leadF,
  .lf > .lf-ok {
    padding: 14px 16px 16px;
  }

  .lf > form#leadF .tag {
    font-size: 11px;
  }

  .lf > form#leadF h2,
  .lf > .lf-ok h2 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .lf > form#leadF .s {
    margin-bottom: 7px;
    font-size: 14px;
  }

  .lf > form#leadF label {
    margin-top: 5px;
  }

  .lf > form#leadF label span {
    font-size: 11px;
  }

  .lf > form#leadF input,
  .lf > form#leadF textarea,
  .lf > form#leadF select {
    min-height: 34px;
    padding-block: 3px;
    font-size: 15px;
  }

  .lf > form#leadF textarea {
    height: 42px;
    min-height: 42px;
  }

  .lf > form#leadF .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
  }
}

@media (max-height: 560px) {
  .lf {
    max-height: calc(100svh - 8px);
  }

  .lf > form#leadF,
  .lf > .lf-ok {
    padding-block: 10px 12px;
  }

  .lf > form#leadF h2,
  .lf > .lf-ok h2 {
    font-size: 24px;
  }

  .lf > form#leadF .s {
    margin-top: 2px;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .lf > form#leadF label {
    margin-top: 3px;
  }

  .lf > form#leadF input,
  .lf > form#leadF textarea,
  .lf > form#leadF select {
    min-height: 32px;
    padding-block: 2px;
  }

  .lf > form#leadF textarea {
    height: 36px;
    min-height: 36px;
  }

  .lf > form#leadF .btn {
    min-height: 40px;
    margin-top: 6px;
    padding-block: 6px;
  }
}

/* Header Showreel video. It occupies the existing stage without changing the
   header/modal layout, and is inserted by JS only after the user opens it. */
.reel .rl-stage.bo-film-stage,
.reel .rl-stage:has(.bo-brand-film) {
  padding: 0;
  background: #000;
}

.reel .bo-brand-film {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000;
}

@media (max-width: 700px) {
  .reel .bo-brand-film {
    object-fit: contain;
  }
}

/* -------------------------------------------------------------------------
   Responsive rhythm and compact mobile navigation

   The original mobile rules inherited the desktop, viewport-based section
   padding (64px–220px) and the menu used a scrollable, content-sized panel.
   That made the page feel vertically stretched and allowed the open menu to
   exceed a phone viewport.  Keep the hero's 175vh scroll stage untouched;
   only its surrounding sections and the menu are tightened here.
------------------------------------------------------------------------- */
:root {
  --site-section-gap: 100px;
}

@media (max-width: 1024px) {
  :root {
    --site-section-gap: 50px;
  }
}

@media (max-width: 700px) {
  :root {
    --site-section-gap: 50px;
  }

  /* A slightly larger header mark, while preserving the header height. */
  .nav .logo #logo.bo-nav {
    width: min(116px, 42vw);
    height: min(40px, calc(var(--nh) - 10px));
  }

  /* The open menu must fit the viewport rather than becoming a second page. */
  .mm {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .mm-top {
    flex: 0 0 48px;
    height: 48px;
  }

  .mm-logo {
    width: min(150px, 48vw);
    height: 36px;
    max-width: 48vw;
  }

  .mm-x {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
  }

  .mm-l {
    flex: 0 0 auto;
    margin-top: clamp(28px, 6vh, 60px);
  }

  .mm-l a {
    gap: 14px;
    padding: 12px 0;
    font-size: 36px;
    line-height: 1.05;
  }

  .mm-l small {
    min-width: 22px;
    font-size: 13px;
  }

  .mm-b {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

  .mm-p {
    min-height: 50px;
    gap: 8px;
    padding-inline: 10px;
    font-size: 16px;
  }

  .mm-c {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 28px;
    gap: 10px;
    font-size: 16px;
  }

  .mm-c a {
    min-height: 28px;
  }

  .mm-c p {
    margin-top: 6px;
    font-size: 13px;
  }

  /* 30px is the complete mobile section rhythm.  The hero stage is
     deliberately excluded because its height drives the text reveal motion. */
  #top > .pj,
  #top #work > .mz,
  #top > .ph,
  #top > .offers,
  #top > .nm,
  #top > .more,
  #top > .fo,
  #top > .stmt,
  #top > .end,
  #aboutpage > section,
  #contactpage > section,
  #insightspage > section,
  #postpage > section,
  #workpage .wp-hd,
  #workpage .wp-end,
  #workpage .allwork,
  #caseBody > .chap,
  #caseBody > .nx {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* The homepage's first content block and the Works heading were the two
     largest visible sources of blank space after the hero. */
  #top > .pj,
  #workpage .wp-hd {
    margin-top: 30px !important;
  }

  #workpage .wp-hd + .seg,
  #workpage .seg {
    margin-bottom: 30px !important;
  }

  #workpage .idn {
    margin-top: 30px !important;
  }

  #workpage .wp-end,
  #workpage .allwork,
  #workpage .pcta,
  #top .nmcta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #top .nmcta {
    margin-top: 30px !important;
    padding-top: 30px !important;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  /* Tablet rhythm: keep the hero stage, normalize surrounding sections. */
  #top > .pj,
  #top #work > .mz,
  #top > .ph,
  #top > .offers,
  #top > .nm,
  #top > .more,
  #top > .fo,
  #top > .stmt,
  #top > .end,
  #aboutpage > section,
  #contactpage > section,
  #insightspage > section,
  #postpage > section,
  #workpage .wp-hd,
  #workpage .wp-end,
  #workpage .allwork,
  #caseBody > .chap,
  #caseBody > .nx {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

@media (min-width: 1025px) {
  /* Desktop rhythm: one controlled 100px section rhythm, without doubled
     margins from the older viewport-height padding rules. */
  #top > .pj,
  #top #work > .mz,
  #top > .ph,
  #top > .offers,
  #top > .nm,
  #top > .more,
  #top > .fo,
  #top > .stmt,
  #top > .end,
  #aboutpage > section,
  #contactpage > section,
  #insightspage > section,
  #postpage > section,
  #workpage .wp-hd,
  #workpage .wp-end,
  #workpage .allwork,
  #caseBody > .chap,
  #caseBody > .nx {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

@media (max-width: 370px) {
  .nav .logo #logo.bo-nav {
    width: min(104px, 42vw);
    height: 34px;
  }

  .mm-logo {
    width: min(138px, 46vw);
    height: 34px;
  }

  .mm-l a {
    padding-block: 8px;
    font-size: 32px;
  }

  .mm-b {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mm-p {
    min-height: 36px;
    font-size: 12px;
  }
}

/* Header navigation hover indicator. */
.nav ul a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms ease;
}

.nav ul a:hover::after,
.nav ul a:focus-visible::after {
  transform: scaleX(1);
}

/* Final section-rhythm correction.

   The requested value is the total distance between adjacent sections, not
   the value to apply independently above and below both sections.  Each
   section therefore owns half the rhythm and the old leading-edge sibling
   margin is disabled for these page-level sections.
 */
:root {
  --site-section-gap: 100px;
}

@media (max-width: 1024px) {
  :root {
    --site-section-gap: 50px;
  }
}

@media (max-width: 700px) {
  :root {
    --site-section-gap: 50px;
  }
}

#top > .pj,
  #top > section:not(.hero),
  #top > .ph,
  #top > .offers,
  #top > .nm,
  #top > .more,
  #top > .fo,
  #top > .allwork,
  #top > .tst,
  #top > .stmt,
  #top > .end,
  #top #work > .mz,
  #aboutpage > section,
  #contactpage > section,
  #insightspage > section,
  #postpage > section,
  #workpage .wp-hd,
  #workpage .wp-end,
  #workpage .allwork,
  #caseBody > .chap,
  #caseBody > .nx {
  padding-top: calc(var(--site-section-gap) / 2) !important;
  padding-bottom: calc(var(--site-section-gap) / 2) !important;
  margin-top: 0 !important;
}

/* #work is a wrapper around the homepage's first content section. Split the
   same total rhythm between the wrapper and .mz after the hero stage. */
#top > #work {
  margin-top: calc(var(--site-section-gap) / 2) !important;
}

/* Omit the removed project from every repeated identity grid, including the
   standalone PHP pages and the SPA view. */
.mk:has(img[src*="sole-story-and-co-logo-design"]) {
  display: none !important;
}

/* Mobile menu: do not push the contact block to the bottom of the viewport.
   A fixed flow gap keeps the menu, buttons, and contact links evenly spaced. */
@media (max-width: 700px) {
  .mm-c {
    margin-top: 24px;
  }
}

/* Work ending rhythm: 100px below on large screens, 50px on tablet/mobile. */
.wp-end,
#workpage .wp-end {
  padding-bottom: 50px !important;
}

@media (min-width: 1025px) {
  .wp-end,
  #workpage .wp-end {
    padding-bottom: 100px !important;
  }
}

/* Keep the all-work link compact without changing its click target or style. */
.allwork a {
  display: inline-block;
  line-height: 1;
  padding-bottom: 2px;
}

/* Keep a consistent breathing space immediately before the shared footer. */
#top > .end,
#contactpage > .ct-start,
#aboutpage > .ab-end,
#workpage > .wp-end,
#insightspage > .pcta,
#postpage > .pcta {
  padding-bottom: 100px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  #top > .end,
  #contactpage > .ct-start,
  #aboutpage > .ab-end,
  #workpage > .wp-end,
  #insightspage > .pcta,
  #postpage > .pcta {
    padding-bottom: 50px !important;
    margin-bottom: 0 !important;
  }
}

/* The three contact choices were inheriting the global 5vh button margin.
   On mobile that margin repeated after every wrapped button. */
@media (max-width: 700px) {
  .ct-start .row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }

  .ct-start .row .btn {
    width: min(100%, 320px);
    min-height: 44px;
    margin-top: 0 !important;
    padding: 10px 18px;
  }
}

/* The selected-work section should finish at its content edge. */
.mz,
#top #work > .mz {
  padding-bottom: 0 !important;
}

/* Mobile menu rows stay as direct text links; no hover/active decoration. */
@media (max-width: 700px) {
  .mm-l a,
  .mm-l a:first-child,
  .mm-l a:hover,
  .mm-l a:focus-visible,
  .mm-l a:active {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    border-bottom-color: var(--line);
    background: transparent !important;
    font-weight: 300;
  }

  .mm-l a {
    padding-right: 0;
    background: transparent !important;
  }

  .mm-l a.active,
  .mm-l a[aria-current],
  .mm-l a[aria-current="page"] {
    background: transparent !important;
    font-weight: 300 !important;
  }

  .mm-l a::after,
  .mm-l a:first-child::after,
  .mm-l a:hover::after,
  .mm-l a:focus-visible::after {
    display: none !important;
    content: none !important;
  }
}

/* Mobile menu treatment: an edge-to-edge panel with a shared 95% inner grid. */
@media (max-width: 700px) {
  .mm {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding-inline: 0;
    box-shadow: 0 0 32px rgba(10, 22, 52, 0.14);
  }

  .mm-top {
    width: 100%;
  }

  .mm-logo {
    margin-right: auto;
  }

  .mm-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    white-space: nowrap;
  }

  .mm-x::after {
    content: "×";
    font-size: 28px;
    font-weight: 300;
    line-height: 0.7;
  }

  .mm-l {
    width: 100%;
  }

  .mm-l a {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-right: 54px;
    transition: background-color 220ms ease, padding-inline 220ms ease;
  }

  .mm-l a::after {
    content: "›";
    position: absolute;
    right: 0;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #c7d0e0;
    border-radius: 50%;
    color: var(--blue);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-50%);
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
  }

}

/* Final mobile menu grid: full-viewport panel, shared 95% inner content. */
@media (max-width: 700px) {
  .mm {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mm-top,
  .mm-l,
  .mm-b,
  .mm-c {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .mm-top {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mm-logo {
    min-width: 0;
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
    align-self: center;
    overflow: hidden;
  }

  .mm-logo > svg,
  .mm-logo > img {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .mm-x {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 44px;
    margin-left: 12px;
    touch-action: manipulation;
  }

  .mm-l {
    align-self: auto;
  }

  .mm-l a,
  .mm-l a:first-child,
  .mm-l a:hover,
  .mm-l a:focus-visible,
  .mm-l a:active,
  .mm-l a.active,
  .mm-l a[aria-current],
  .mm-l a[aria-current="page"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 54px !important;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0 !important;
    border-bottom-color: var(--line);
    background: transparent !important;
    font-weight: 300 !important;
  }

  /* Active state follows the page currently visible in the shared view shell. */
  body:has(#workpage:not([hidden])) .mm-l a[href$="/work/"],
  body:has(#aboutpage:not([hidden])) .mm-l a[href$="/about/"],
  body:has(#insightspage:not([hidden])) .mm-l a[href$="/blogs/"],
  body:has(#postpage:not([hidden])) .mm-l a[href$="/blogs/"],
  body:has(#contactpage:not([hidden])) .mm-l a[href$="/contact/"],
  .mm-l a[aria-current="page"] {
    border-bottom-color: var(--line);
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 300 !important;
  }

  .mm-b {
    align-self: auto;
  }

  .mm-p {
    min-width: 0;
    width: 100%;
    touch-action: manipulation;
  }

  .mm-c {
    align-self: auto;
  }
}