/* =====================================================================
   Olsen & Partners — Foundations
   Crafted to Endure.
   ===================================================================== */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel.woff2") format("woff2"), url("fonts/Cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat.woff2") format("woff2"), url("fonts/Montserrat.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Signature";
  src: url("fonts/Signature.woff2") format("woff2"), url("fonts/Signature.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quattrocento";
  src: url("fonts/Quattrocento.woff2") format("woff2"), url("fonts/Quattrocento.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* Header brand on phones: the emblem, the wordmark and the menu button all have to fit one
   row. Rather than drop the emblem (it's a CMS toggle — if it's on, it should show), scale
   the pair down and tighten the gap so the whole lockup fits. The heights are inline styles
   on the elements, hence the !important. .op-logotype is on the mobile-menu mark too, so the
   header/menu crossfade stays the same size. */
@media (max-width: 520px) {
  .op-brand { gap: 10px !important; }
  .op-header-emblem { height: 22px !important; }
  .op-logotype, .op-logotype img { height: 24px !important; }
}
@media (max-width: 360px) {
  .op-brand { gap: 7px !important; }
  .op-header-emblem { height: 19px !important; }
  .op-logotype, .op-logotype img { height: 20px !important; }
}

/* Smaller map/atlas popup card on phones */
@media (max-width: 520px) {
  .op-map-popup__card { width: 240px !important; }
  .op-map-popup__img { height: 104px !important; }
  .op-map-popup__title { font-size: 18px !important; }
}

/* =====================================================================
   Design tokens
   ===================================================================== */
:root {
  /* -------- Brand colors (canonical) -------- */
  --op-black:       #28272a;   /* O&P Black   — primary text, bold surfaces */
  --op-white:       #f0efeb;   /* O&P White   — primary page background (warm off-white) */
  --op-lite-brown:  #e4d7c9;   /* O&P Lite Brown — soft support surface, dividers */
  --op-brown:       #cfb79f;   /* O&P Brown   — primary accent, buttons, highlights */
  --op-patina:      #7f9688;   /* O&P Patina  — secondary accent, quiet contrast */

  /* -------- Extended neutrals (derived from O&P Black) -------- */
  --op-ink:         #28272a;
  --op-ink-80:      rgba(40, 39, 42, 0.80);
  --op-ink-60:      rgba(40, 39, 42, 0.60);
  --op-ink-40:      rgba(40, 39, 42, 0.40);
  --op-ink-20:      rgba(40, 39, 42, 0.20);
  --op-ink-10:      rgba(40, 39, 42, 0.10);
  --op-ink-05:      rgba(40, 39, 42, 0.05);

  /* -------- Semantic surfaces -------- */
  --bg-page:        var(--op-white);
  --bg-elevated:    #f7f6f2;           /* very subtle lift above page */
  --bg-inverse:     var(--op-black);
  --bg-accent:      var(--op-lite-brown);
  --bg-accent-soft: #eee5d9;            /* between white and lite-brown */

  /* -------- Semantic foreground -------- */
  --fg-1:           var(--op-black);    /* primary text */
  --fg-2:           var(--op-ink-80);   /* secondary text */
  --fg-3:           var(--op-ink-60);   /* tertiary / meta */
  --fg-4:           var(--op-ink-40);   /* disabled / captions on dark */
  --fg-inverse:     var(--op-white);    /* text on dark surfaces */
  --fg-accent:      #8a6b4c;            /* darker brown for text legibility */

  /* -------- Lines / borders -------- */
  --border-hair:    rgba(40, 39, 42, 0.14);
  --border-soft:    rgba(40, 39, 42, 0.08);
  --border-strong:  rgba(40, 39, 42, 0.40);
  --rule:           1px solid var(--border-hair);

  /* -------- Type families -------- */
  --font-display:   "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  --font-subtitle:  "Quattrocento", "Cormorant Garamond", Georgia, serif;
  --font-body:      "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script:    "Signature", "Allura", cursive;
  --font-mono:      "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* -------- Type scale (fluid, disciplined) -------- */
  --fs-display-xl: clamp(56px, 7vw, 112px);
  --fs-display-l:  clamp(44px, 5.2vw, 80px);
  --fs-display-m:  clamp(34px, 3.8vw, 56px);
  --fs-h1:         clamp(28px, 3vw, 44px);
  --fs-h2:         clamp(22px, 2.2vw, 32px);
  --fs-h3:         18px;
  --fs-eyebrow:    11px;
  --fs-body-l:     17px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-caption:    11px;

  /* -------- Tracking (letter-spacing) -------- */
  /* Cinzel and small sans-caps benefit from generous tracking */
  --tr-eyebrow:    0.28em;
  --tr-caps:       0.18em;
  --tr-display:    0.04em;
  --tr-body:       0.01em;
  --tr-tight:      -0.01em;

  /* -------- Leading -------- */
  --lh-display:    1.08;
  --lh-heading:    1.2;
  --lh-body:       1.6;
  --lh-tight:      1.35;

  /* -------- Spacing scale (8px base, with 4 and 2 for fine work) -------- */
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  64px;
  --s-10: 96px;
  --s-11: 128px;
  --s-12: 160px;

  /* -------- Radii (restrained — residences, not apps) -------- */
  --r-0:  0px;      /* default: no radius. O&P is rectilinear. */
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;  /* used only for tags */

  /* -------- Shadows (quiet, close-to-surface) -------- */
  --shadow-1: 0 1px 2px rgba(40, 39, 42, 0.06);
  --shadow-2: 0 6px 18px rgba(40, 39, 42, 0.08);
  --shadow-3: 0 20px 48px rgba(40, 39, 42, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border-hair);

  /* -------- Motion -------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* composed, measured */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 520ms;
  --dur-4: 900ms;

  /* -------- Layout -------- */
  --container:    1280px;
  --container-wide: 1440px;
  --gutter:       clamp(20px, 4vw, 56px);
}

/* =====================================================================
   Base element styles (semantic defaults)
   ===================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 400;
}

/* ---------- Display & headings (Cinzel, small caps feel) ---------- */
.display-xl, .display-l, .display-m,
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 400;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.display-l {
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.display-m {
  font-size: var(--fs-display-m);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-display); }

/* Subtitle — Quattrocento serif, a softer counterpart to Cinzel display.
   Used for section subtitles, supporting headings, and editorial callouts. */
.subtitle, .subtitle-l, .subtitle-m, .subtitle-s {
  font-family: var(--font-subtitle);
  color: var(--fg-1);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.subtitle-l { font-size: 28px; line-height: 1.25; }
.subtitle, .subtitle-m { font-size: 22px; line-height: 1.3; }
.subtitle-s { font-size: 18px; line-height: 1.4; }

/* h3 is a small-caps sans label, a common O&P device */
h3, .label {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Body text ---------- */
p { margin: 0 0 1em; max-width: 64ch; }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.body   { font-size: var(--fs-body);   line-height: var(--lh-body); }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-3); letter-spacing: var(--tr-body); }

/* ---------- Script (restrained use: signatures, tagline accents) ---------- */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1;
  color: var(--fg-accent);
}

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border-hair);
  transition: border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}
a:hover { border-color: var(--op-black); }

/* ---------- Horizontal rule (brand device — a thin hairline) ---------- */
hr {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: var(--s-7) 0;
}

/* ---------- Selection ---------- */
::selection { background: var(--op-brown); color: var(--op-black); }

/* ---------- Arrow link (shared CTA: text + small arrow) ---------- */
.op-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
}
.op-arrowlink:hover { border: 0; }
.op-arrowlink__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 3px 0;
}
.op-arrowlink__text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-arrowlink:hover .op-arrowlink__text::after,
.op-arrowlink:focus-visible .op-arrowlink__text::after { transform: scaleX(1); }
.op-arrowlink__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-arrowlink:hover .op-arrowlink__arrow,
.op-arrowlink:focus-visible .op-arrowlink__arrow { transform: translateX(4px); }

/* ============================================================
   Burger button (mobile only)
   ============================================================ */
.op-burger {
  display: none;
  position: relative;
  width: 30px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}
.op-burger span {
  position: absolute;
  left: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-burger span:nth-child(1) { top: 2px; right: 0; width: 100%; }
.op-burger span:nth-child(2) { bottom: 2px; width: 64%; }
.op-burger:hover span:nth-child(2) { width: 100%; }

/* ============================================================
   Mobile full-screen menu
   ============================================================ */
.op-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--op-black);
  color: var(--op-white);
  display: flex;
  flex-direction: column;
  padding: 24px 22px 30px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 480ms;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.op-mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.op-mm__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The close button is taller than the brand lockup, so leaving it in the flow would set the
     row height and push the logo below where the header's logo sits — the two crossfade, so
     that reads as the logo jumping. Taking it out of the flow makes the row exactly the height
     of the lockup at every breakpoint, so the logo lands on the header's position, and the X
     still centres on the lockup the way the burger does in the header. */
  position: relative;
}
.op-mm__close {
  position: absolute;
  right: 0;
  top: 50%;
  background: transparent;
  border: 0;
  color: var(--op-white);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  transform: translateY(-50%);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms;
}
/* Keep the centring translate in the hover transform, or the X drops as it spins. */
.op-mm__close:hover { transform: translateY(-50%) rotate(90deg); opacity: 0.7; }

.op-mm__stage {
  position: relative;
  margin-top: 44px;
}
.op-mm__nav {
  display: flex;
  flex-direction: column;
  transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mobile-menu[data-sub="true"] .op-mm__nav {
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
}
.op-mm__sub {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mobile-menu[data-sub="true"] .op-mm__sub {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.op-mm__nav a,
.op-mm__sub a {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 15px 0;
  border: 0;
  text-decoration: none;
  color: var(--op-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mobile-menu[data-open="true"] .op-mm__nav a { opacity: 1; transform: none; }
.op-mobile-menu[data-sub="true"] .op-mm__sub a { opacity: 1; transform: none; }
/* parent items that open a submenu */
.op-mm__nav a.op-mm__hassub {
  width: min(320px, 100%);
  justify-content: space-between;
  gap: 28px;
}
.op-mm__chev {
  width: 7px;
  height: 7px;
  border-right: 1.25px solid currentColor;
  border-top: 1.25px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms;
  flex: 0 0 auto;
}
.op-mm__hassub:hover .op-mm__chev { opacity: 1; transform: translateX(2px) rotate(45deg); }
/* back control inside submenu */
.op-mm__back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--op-white);
  padding: 4px 0 26px;
  opacity: 0.62;
  transition: opacity 200ms;
}
.op-mm__back:hover { opacity: 1; }
.op-mm__back:hover .op-mm__back-arrow { transform: translateX(-3px) rotate(-135deg); }
.op-mm__back-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.25px solid currentColor;
  border-top: 1.25px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mm__back-lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.op-mm__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.op-mm__foot { margin-top: auto; padding-top: 40px; }
.op-mm__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  margin-bottom: 28px;
}
.op-mm__lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 239, 235, 0.45);
  margin: 0 0 8px;
}
.op-mm__link {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(240, 239, 235, 0.85);
  border: 0;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mm__link:hover { color: var(--op-brown); border: 0; }
.op-mm__social {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 8px;
  margin-bottom: 22px;
}
.op-mm__social span {
  width: 1px;
  height: 11px;
  background: rgba(240, 239, 235, 0.20);
}
/* kill the mobile gray tap-highlight box on all menu links */
.op-mobile-menu a,
.op-mobile-menu button { -webkit-tap-highlight-color: transparent; }
.op-mm__legal {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(240, 239, 235, 0.45);
  margin: 0;
}
.op-mm__minor {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.op-mm__minor-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 239, 235, 0.42);
  border: 0;
  text-decoration: none;
  transition: color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-mm__minor-link:hover { color: var(--op-brown); border: 0; }
.op-mm__minor span {
  width: 1px;
  height: 9px;
  background: rgba(240, 239, 235, 0.18);
}

/* ============================================================
   Projects index page
   ============================================================ */
.op-projects-page { background: var(--op-white); }

/* Intro band: background photo + hero grain (transparent header over it) */
.op-pintro {
  position: relative;
  background: #0e0d0f;
  color: var(--op-white);
  overflow: hidden;
  padding: 0 56px;
}
.op-pintro__bg { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.op-pintro__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
  transform: scale(1.04);
  display: block;
}
/* Safari/iOS overlays a large "play" glyph on a hero video when muted autoplay is blocked
   (Low Power / battery mode). The heroes are decorative and carry no controls, so hide it —
   the hero then shows a clean still frame, and JS retries playback on the first pointer/
   touch/scroll gesture. Harmlessly ignored by non-WebKit browsers. */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}
.op-pintro__weave {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: soft-light;
  opacity: 0.6;
  pointer-events: none;
}
.op-pintro__topshade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.22) 16%,
    rgba(0,0,0,0.0) 36%);
}
.op-pintro__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,15,0.40) 0%, rgba(14,13,15,0.26) 44%, rgba(14,13,15,0.56) 100%);
}
.op-pintro__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 184px 0 76px;
}
.op-pintro__title {
  margin: 18px 0 0;
  color: var(--op-white);
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(42px, 7vw, 104px);
  letter-spacing: 0.04em;
  line-height: 1.0;
  text-transform: uppercase;
}
.op-pintro__lede {
  margin: 22px 0 0;
  max-width: 540px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--op-white);
}

/* White grid section */
.op-pgrid-wrap { background: var(--op-white); padding: 0 56px 132px; }
.op-pgrid-inner { max-width: 1280px; margin: 0 auto; }

/* Filter bar */
.op-pfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px 48px;
  padding: 44px 0 30px;
  border-bottom: 1px solid rgba(40, 39, 42, 0.14);
  margin-bottom: 56px;
}
.op-pfilter__row { display: flex; flex-direction: column; gap: 14px; }
.op-pfilter__lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--op-ink-40);
}
.op-pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.op-chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--op-ink-80);
  background: transparent;
  border: 1px solid rgba(40, 39, 42, 0.18);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 240ms cubic-bezier(0.22,0.61,0.36,1),
              background 240ms cubic-bezier(0.22,0.61,0.36,1),
              border-color 240ms cubic-bezier(0.22,0.61,0.36,1);
  -webkit-tap-highlight-color: transparent;
}
.op-chip:hover { border-color: var(--op-black); color: var(--op-black); }
.op-chip.is-active {
  background: var(--op-black);
  border-color: var(--op-black);
  color: var(--op-white);
}
.op-pcount {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
  align-self: flex-end;
}
.op-pcount__n {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: var(--op-black);
}
.op-pcount__t {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--op-ink-40);
}

/* Project tile hover (shared by the homepage Selected Work + the Projects listing) */
.op-tile { cursor: pointer; border: 0; }
.op-tile .op-tile__img { transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1); overflow: hidden; }
.op-tile .op-tile__img > * { transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1); }
.op-tile:hover .op-tile__img > * { transform: scale(1.04); }
.op-tile .op-tile__title { transition: color 320ms cubic-bezier(0.22,0.61,0.36,1); }
.op-tile .op-tile__arrow { opacity: 0; transform: translateX(-6px); transition: all 320ms cubic-bezier(0.22,0.61,0.36,1); }
.op-tile:hover .op-tile__arrow { opacity: 1; transform: translateX(0); }

/* Grid */
.op-pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px 48px;
}
.op-pcard {
  opacity: 0;
  animation: projCardIn 640ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes projCardIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state */
.op-pempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 96px 0 120px;
  text-align: center;
  animation: projCardIn 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.op-pempty__mark {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  color: var(--op-ink-40);
}
.op-pempty__t {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--op-ink-60);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .op-pcard, .op-pempty { animation: none; opacity: 1; }
}

/* Enquiry form column — start aligned with the section title, not the eyebrow */
.op-enquire-formcol { margin-top: 52px; }

/* Mobile "see more" body clamp — smooth height reveal */
.op-clampbody__rest {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.op-clampbody__rest[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.op-clampbody__resttext { overflow: hidden; }

/* ============================================================
   Responsive — stack every section cleanly on mobile
   ============================================================ */
html, body { overflow-x: clip; }

/* ── Project-detail page sections (CMS "Page sections" blocks, in any editor order) ──────────
   Position-aware vertical rhythm so EVERY order looks right: the first block gets the generous
   gap under the hero, blocks are evenly spaced, and the last gets room before the back link.
   Type-agnostic — a gallery or video placed first gets the same top gap a text block would. */
.op-pd-sec { padding: 90px 56px 0; }
.op-pd-sec--first { padding-top: 110px; }
.op-pd-sec--last { padding-bottom: 40px; }

@media (max-width: 860px) {
  .op-desktop-nav { display: none !important; }
  .op-burger { display: inline-flex !important; }
  header { padding-left: 22px !important; padding-right: 22px !important; }

  /* Section side + vertical padding */
  /* Eyebrows are hidden on mobile, so the old top padding reads as too much empty space above each
     heading. Trim the TOP of the content sections (keep the bottoms, so inter-section rhythm holds). */
  #about, #work, #process, #enquire { padding: 44px 22px 84px !important; }
  #services { padding: 52px 22px 100px !important; }
  #map { padding: 70px 22px 84px !important; }

  /* Two-column grids → single column */
  .op-stack-md { grid-template-columns: 1fr !important; gap: 44px !important; }
  .op-stack-md > * { min-width: 0; }
  .op-stat-row { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .op-stat-val { font-size: 26px !important; }
  .op-step-row { grid-template-columns: 1fr !important; gap: 26px !important; }
  .op-work-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .op-tile { margin-top: 0 !important; }
  .op-pgrid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .op-pintro { padding: 0 22px !important; }
  .op-pintro__inner { padding: 152px 0 56px !important; }
  .op-pgrid-wrap { padding: 0 22px 96px !important; }
  .op-pfilter { gap: 22px 30px !important; }
  .op-pcount { margin-left: 0 !important; width: 100%; }
  .op-work-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  .op-form-grid { grid-template-columns: 1fr !important; }
  .op-enquire-formcol { margin-top: 0 !important; }

  /* Hero copy inset */
  .op-hero-copy { left: 22px !important; right: 22px !important; bottom: 44px !important; }

  /* Project-detail hero — overlaid copy + body/gallery insets */
  .op-pd-hero__copy { left: 0 !important; right: 0 !important; padding: 0 22px !important; bottom: 40px !important; }
  .op-pd-hero__meta { gap: 16px 32px !important; margin-top: 26px !important; padding-top: 22px !important; }
  /* Legacy fixed-layout path (section-less data — dead in practice; kept isolated) */
  .op-pd-body { padding: 72px 22px !important; }
  .op-pd-gallery { padding-left: 22px !important; padding-right: 22px !important; gap: 28px !important; }
  .op-pd-feature { padding: 40px 22px 8px !important; }
  /* CMS page-section blocks — position-aware rhythm (mobile) */
  .op-pd-sec { padding: 56px 22px 0 !important; }
  .op-pd-sec--first { padding-top: 60px !important; }
  .op-pd-sec--last { padding-bottom: 28px !important; }
  .op-pd-vgallery { gap: 28px !important; }

  /* Footer */
  .op-foot-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .op-foot-edge { margin-left: 22px !important; margin-right: 22px !important; }
  .op-foot-main { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; padding-left: 22px !important; padding-right: 22px !important; }
  .op-foot-main h3 { font-size: 16px !important; margin-bottom: 16px !important; }
  .op-foot-base { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* Mobile-only tweaks (2026-06-24): hide decorative section eyebrows + their rule; About Us text
     before photo; smaller monogram watermark nudged toward the right. (Desktop unaffected.) */
  .op-eyebrow:not(.op-eyebrow--keep), .op-erule { display: none !important; }
  .op-m-photolast > :first-child { order: 2; }
  .op-foot-mono { width: 460px !important; height: 460px !important; right: -70px !important; bottom: -120px !important; }
}

@media (max-width: 520px) {
  #about, #work, #process, #enquire { padding: 36px 20px 68px !important; }
  #services { padding: 44px 20px 92px !important; }
  .op-mm__label { font-size: 20px; }
}