/* ===== reveal utilities (gated: never hides content in editor / no-JS) ===== */
html.js-motion .martel-reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
html.js-motion .martel-reveal--left { transform: translateX(-46px); }
html.js-motion .martel-reveal--right { transform: translateX(46px); }
html.js-motion .martel-reveal--scale { transform: scale(.94); }
html.js-motion .martel-reveal.is-inview { opacity: 1; transform: none; }
html.js-motion.reduced-motion .martel-reveal { opacity: 1; transform: none; transition: none; }

/* ===== arrow CTA (shared: martel/arrow-cta block + section repeaters) ===== */
.martel-arrow-cta { text-decoration: none; display: inline-flex; align-items: center; gap: 13px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.martel-arrow-cta:hover, .martel-arrow-cta:focus-visible { color: var(--wp--preset--color--red-bright); transform: translateX(6px); text-decoration: none; }
.martel-arrow-cta .martel-arrow-cta__label { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transform: translateX(-6px); transition: opacity .65s ease, transform .8s cubic-bezier(.2,.7,.2,1), max-width .75s ease; }
.martel-arrow-cta:hover .martel-arrow-cta__label, .martel-arrow-cta:focus-visible .martel-arrow-cta__label, .martel-arrow-cta-scope:hover .martel-arrow-cta__label, .martel-arrow-cta-scope:focus-within .martel-arrow-cta__label { max-width: 300px; opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.martel-header .is-menu-open .wp-block-navigation__responsive-dialog { animation: none; }
	.martel-flyout__link a, .martel-header .wp-block-navigation__responsive-container-close { transition: none; }
}

/* ===== keyboard focus (2.4.7 / 2.4.11) =====
   Two-tone ring: a dark halo hugging the element (0-2px) with a white band
   just outside it (2-4px, drawn by the outline over the shadow). One tone
   always clears 3:1 whatever sits behind - white reads on the ink/surface
   panels and the photo heroes, dark reads on base/tertiary, and over a photo
   the two read against each other at 15:1 regardless of the image.
   Selectors are kept as a plain list, not :is(), so the a/button branches stay
   at (0,1,1) and the per-element rules below can still override the shadow. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(20,18,16,.92); }
/* These three carry a resting drop shadow that the ring's box-shadow would
   otherwise replace, popping the element on focus - so re-declare it. */
.martel-pgal__arrowbtn:focus-visible { box-shadow: 0 0 0 2px rgba(20,18,16,.92), 0 4px 18px rgba(0,0,0,.24); }
.martel-featured__arrow:focus-visible { box-shadow: 0 0 0 2px rgba(20,18,16,.92), var(--wp--preset--shadow--small); }
.martel-hero__video-btn:focus-visible { box-shadow: 0 0 0 2px rgba(20,18,16,.92), 0 26px 60px rgba(0,0,0,.4); }

/* ===== header ===== */
.martel-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; }
/* The solid/frosted backdrop lives on ::before, NOT on .martel-header itself:
   backdrop-filter makes an element the containing block for fixed-position
   descendants, which trapped the open flyout (fixed, inset 0 / 100vh) inside
   the 96px header bar whenever the header was solid. */
.martel-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20,18,16,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
/* Solid header by default off-home; pages with their own full-bleed dark hero
   (.martel-page-hero block / .martel-phero project hero) start transparent and
   go solid on scroll via .is-scrolled. No-:has() browsers fall back to always-solid. */
.martel-header.is-scrolled::before, body:not(.home):not(:has(.martel-page-hero)):not(:has(.martel-phero)) .martel-header::before { opacity: 1; }
.martel-header__inner { max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--gutter)); margin: 0 auto; padding: 0 var(--wp--custom--gutter); height: 96px; }
.martel-header__logo img { width: 176px; height: auto; }
.martel-header__nav { gap: 38px; }
.martel-header__contact a { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--main-accent); text-decoration: none; }
.martel-header__contact a:hover { color: #f1a8b3; text-decoration: none; }
/* hamburger: three 64px lines */
.martel-header .wp-block-navigation__responsive-container-open { display: flex !important; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 64px; height: 26px; min-height: 44px; padding: 9px 0; background: linear-gradient(#fff, #fff) center / 64px 1px no-repeat; border: none; cursor: pointer; }
.martel-header .wp-block-navigation__responsive-container-open svg { display: none; }
.martel-header .wp-block-navigation__responsive-container-open::before, .martel-header .wp-block-navigation__responsive-container-open::after { content: ""; display: block; width: 64px; height: 1px; background: #fff; }
/* flyout drawer (nav overlay)
   Note: WP 7.0.3 renders `.wp-block-navigation__responsive-container.is-menu-open`
   with `flex-direction: column` (not row). So: force row direction for right-anchoring,
   and pin the actual white-panel wrapper (`.wp-block-navigation__responsive-dialog`,
   confirmed via live DOM inspection) with position:fixed so it docks to the right
   independent of the container's own flex quirks.
   Core also ships a class-based fallback overlay-background rule
   (`.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){background:#fff}`)
   with higher specificity (5 classes) than ours (3 classes), so the scrim/panel
   backgrounds below need `!important` to win. (The block's mobileMenuBackgroundColor
   attribute was removed from parts/header.html specifically to avoid the separate,
   even-stronger ID-scoped !important rule WP generates when that attribute is set.) */
.martel-header .wp-block-navigation__responsive-container.is-menu-open { background: rgba(0,0,0,.85) !important; display: flex; flex-direction: row; justify-content: flex-end; padding: 0; overflow: hidden; overflow: clip; }
/* The overflow declarations above are load-bearing, not cosmetic. Core animates
   this container with its own transform on open, which makes it the containing
   block for the fixed-position dialog inside it - and core ships it as
   overflow: auto. That combination made the martelDrawer start frame
   (translateX(100%), ~340px past the right edge) into real scrollable overflow
   inside this box. Core then focuses the first menu link on open, which lives in
   that translated panel, so the browser scrolled the container to scrollLeft 339
   to reveal it and panned the whole overlay sideways for the full 600ms.
   overflow: clip makes this a non-scroll container, so there is nothing to pan;
   `hidden` is kept first as the pre-16 Safari fallback. Note clip must be set on
   BOTH axes - `overflow-x: clip` alone computes back to `hidden` when overflow-y
   is auto/scroll, which still builds a scroll container. Vertical scrolling for
   tall menus therefore moves to the panel itself, below. */
.martel-header .is-menu-open .wp-block-navigation__responsive-close { width: auto; height: 100%; background: transparent !important; }
.martel-header .is-menu-open .wp-block-navigation__responsive-dialog { position: fixed; top: 0; right: 0; left: auto; width: min(440px, 33vw); height: 100vh; background: var(--wp--preset--color--ink) !important; border-left: 1px solid var(--wp--preset--color--border-dark); box-shadow: -30px 0 80px rgba(0,0,0,.3); animation: martelDrawer .6s cubic-bezier(.62,.05,.2,1); }
@keyframes martelDrawer { from { transform: translateX(100%); } to { transform: none; } }
.martel-header .is-menu-open .wp-block-navigation__responsive-container-content { padding: 34px 56px 48px; height: calc(100% - 80px); overflow-y: auto; overscroll-behavior: contain; }
.martel-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--on-dark-body); background: transparent; transition: color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.martel-header .wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--red-bright); transform: rotate(90deg); }
.martel-flyout { height: 100%; gap: 34px !important; padding-top: 48px; }
.martel-flyout__link a { font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--wp--preset--color--main-accent); text-decoration: none; display: inline-block; transition: color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.martel-flyout__link a:hover { color: var(--wp--preset--color--red-bright); transform: translateX(8px); text-decoration: none; }
.martel-flyout__social { margin-top: auto !important; }
@media (max-width: 1024px) { .martel-header .is-menu-open .wp-block-navigation__responsive-dialog { width: min(440px, 60vw); } .martel-header__inner { height: 80px; } .martel-header__logo img { width: 150px; } }
@media (max-width: 600px) { .martel-header .is-menu-open .wp-block-navigation__responsive-dialog { width: 88vw; max-width: 400px; } .martel-header__inner { height: 66px; } .martel-header__logo img { width: 124px; } .martel-header .wp-block-navigation__responsive-container-open, .martel-header .wp-block-navigation__responsive-container-open::before, .martel-header .wp-block-navigation__responsive-container-open::after { width: 40px; background-size: 40px 1px; } }

/* ===== footer ===== */
.martel-footer { padding: 96px 0 0; }
/* gap is set on the Columns block itself (spacing preset "large") so it stays client-editable */
.martel-footer__grid { max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--gutter)); margin: 0 auto; padding: 0 var(--wp--custom--gutter) 60px; }
.martel-footer__blurb { font-size: 14.5px; font-weight: 600; line-height: 1.62; color: rgba(255,255,255,.62); max-width: 380px; margin-top: 50px; }
.martel-footer__social .wp-block-social-link a { transition: color .3s ease, transform .3s ease; }
.martel-footer__social .wp-block-social-link:hover { transform: translateY(-3px); }
.martel-footer__label { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--red-bright); }
.martel-footer__link a { font-size: 18px; font-weight: 500; color: rgba(255,255,255,.92); text-decoration: none; transition: color .3s ease; }
.martel-footer__link a:hover { color: var(--wp--preset--color--red-bright); text-decoration: none; }
.martel-footer__link { margin-bottom: 18px; }
.martel-footer__office { display: grid; grid-template-columns: 96px 1fr; column-gap: 24px; padding: 16px 0; border-top: 1px solid var(--wp--preset--color--border-dark); }
.martel-footer__office:first-of-type { border-top: none; padding-top: 0; }
.martel-footer__office p.martel-footer__office-city { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--on-dark-faint); }
.martel-footer__office p { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: #fff; }
/* city label and address must share a baseline row: kill the inherited block-gap */
.martel-footer__office > * { margin-top: 0; margin-bottom: 0; }
.martel-footer__office > div > * + * { margin-top: 8px; }
.martel-footer__legal { max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--gutter)); margin: 0 auto; padding: 30px var(--wp--custom--gutter) 44px; border-top: 1px solid var(--wp--preset--color--border-dark); align-items: center; }
.martel-footer__legal p, .martel-footer__legal a { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.62); text-decoration: none; }
.martel-footer__legal a:hover { color: #fff; text-decoration: none; }
.martel-footer__legal p.martel-footer__credit { margin-left: auto; }
@media (max-width: 1024px) { .martel-footer__grid { flex-wrap: wrap !important; } }

/* ===== reveal stagger delays (shared) ===== */
html.js-motion .martel-reveal--d1 { transition-delay: .09s; }
html.js-motion .martel-reveal--d2 { transition-delay: .2s; }
html.js-motion .martel-reveal--d3 { transition-delay: .3s; }
html.js-motion.reduced-motion .martel-reveal--d1, html.js-motion.reduced-motion .martel-reveal--d2, html.js-motion.reduced-motion .martel-reveal--d3 { transition-delay: 0s; }

/* Taxonomy archives and the search header (templates/archive.html, search.html) are the light-ground views on a
   dark site: the global red-bright link colour is 2.81:1 on base, primary is 5.50:1. */
.martel-archive a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--primary); }
.martel-archive a:where(:not(.wp-element-button)):hover,
.martel-archive a:where(:not(.wp-element-button)):focus { color: var(--wp--preset--color--red-hover); }