/* Reachout Marketing — site stylesheet
   Warm architectural elegance: ivory surfaces, charcoal ink, restrained turquoise, gold details. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks reduce layout shift while web fonts load */
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 88%; ascent-override: 98%; descent-override: 30%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 102%; descent-override: 29%; }

:root {
  --ivory: #E6F0F0;
  --paper: #FBF7F0;
  --white: #FFFCF7;
  --ink: #222827;
  --ink-soft: #545B59;
  --charcoal: #1C2322;
  --charcoal-2: #263130;
  --line: rgba(34, 40, 39, .14);
  --line-strong: rgba(34, 40, 39, .28);
  --teal: #079CB6;
  --teal-strong: #08798C;
  --teal-deep: #076574;
  --teal-light: #61D3E4;
  --gold: #C8A878;
  --gold-ink: #7B6644;
  --peach: #F5D8C0;
  --blue: #DDEAF6;
  --lilac: #E6DFF0;

  --f-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --f-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 4.2vw, 80px);
  --wrap: min(100% - 2 * var(--gutter), 84rem);
  --wrap-wide: min(100% - 2 * var(--gutter), 100rem);
  --wrap-narrow: min(100% - 2 * var(--gutter), 46rem);
  --space: clamp(4rem, 2.6rem + 4.6vw, 7.5rem);
  --radius: 18px;
  --radius-lg: clamp(22px, 2.2vw, 40px);
  --header-h: 84px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 200ms;
  --t-med: 320ms;
  --t-slow: 700ms;
  --shadow: 0 24px 48px -28px rgba(28, 35, 34, .45);
  --shadow-soft: 0 12px 32px -20px rgba(28, 35, 34, .35);

  --accent: var(--teal-deep);
  --accent-bg: #DCEFF1;
}

/* Proportional scaling for large and 4K displays: rem grows gently above 1920px. */
html { font-size: 100%; }
@media (min-width: 1920px) { html { font-size: calc(100% + (100vw - 1920px) * .0042); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #F7FCFB;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.0625rem, .98rem + .22vw, 1.15rem);
  line-height: 1.68;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
address { font-style: normal; }
::selection { background: var(--teal-light); color: var(--ink); }

:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 3px; border-radius: 4px; }
.site-header[data-mode="overlay"]:not(.is-solid) :focus-visible,
.hero :focus-visible, .site-footer :focus-visible, .on-dark :focus-visible { outline-color: var(--teal-light); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-wide { width: var(--wrap-wide); margin-inline: auto; }
.wrap-narrow { width: var(--wrap-narrow); margin-inline: auto; }
.section { padding-block: var(--space); position: relative; }
.section--tight { padding-block: calc(var(--space) * .5); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--pure-white, .svc-benefits { background: #FFFFFF; }

/* ---------- typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: .7; }
.section-title, .display {
  font-family: var(--f-display); font-weight: 500; letter-spacing: -.012em;
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.75rem); line-height: 1.06;
  text-wrap: balance;
}
.section-title em, .display em, .page-hero__title em, .cta-band__title em {
  font-style: italic; color: var(--teal-strong); font-weight: 500;
}
.section-lead { margin-top: 1.1rem; max-width: 40rem; color: var(--ink-soft); font-size: 1.04em; }
.section-head { margin-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); max-width: 52rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lead { margin-inline: auto; }

/* Shared prose defaults; site-wide justification below also covers page-specific copy. */
.just, .prose p, .prose li, .svc-overview__text, .benefit p, .step p, .acc__body p, .quote__text, .bio p, .timeline__text, .feature-text {
  text-align: left; hyphens: manual; -webkit-hyphens: manual; word-spacing: normal; text-wrap: pretty;
}

.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.45rem); line-height: 1.12; margin-top: 2.2em; text-wrap: balance; }
.prose h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); line-height: 1.2; margin-top: 1.8em; }
.prose h4 { font-size: 1.02em; font-weight: 700; margin-top: 1.6em; letter-spacing: .01em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--teal-strong); }
.prose a { color: var(--teal-deep); text-decoration-color: rgba(7, 101, 116, .4); font-weight: 600; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.4em; border-left: 2px solid var(--gold); font-family: var(--f-display); font-size: 1.35em; font-style: italic; line-height: 1.4; }
.prose img { border-radius: 12px; margin-block: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .7em .8em; text-align: left; vertical-align: top; }
.prose th { font-weight: 700; background: var(--paper); }
.prose details { border-top: 1px solid var(--line); padding: 1em 0; }
.prose details summary { font-weight: 700; cursor: pointer; }
.callout { padding: clamp(1.3rem, 1rem + 1vw, 2rem); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.callout > * + * { margin-top: .8em; }
.callout > h2:first-child, .callout > h3:first-child, .callout > h4:first-child { margin-top: 0; }
.callout--tip { background: #E3F1F2; border-color: rgba(8, 121, 140, .25); }
.callout--soft { background: var(--paper); border-style: dashed; }
.lede { font-size: 1.12em; }
.ticks { list-style: none; display: grid; gap: .7rem; margin-top: 1.6rem; padding: 0; }
.ticks li { position: relative; padding-left: 2rem; text-align: left; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.ticks li::after { content: ""; position: absolute; left: .37rem; top: .62em; width: .42rem; height: .24rem; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }

/* ---------- accents ---------- */
.accent-teal { --accent: var(--teal-deep); --accent-bg: #DCEFF1; --accent-soft: #EAF5F6; }
.accent-peach { --accent: #A0582E; --accent-bg: var(--peach); --accent-soft: #FAEADD; }
.accent-blue { --accent: #2E5E8E; --accent-bg: var(--blue); --accent-soft: #EBF2FA; }
.accent-lilac { --accent: #6A548E; --accent-bg: var(--lilac); --accent-soft: #F1EDF6; }
.accent-gold { --accent: var(--gold-ink); --accent-bg: #EFE3CF; --accent-soft: #F6EEE1; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--teal-strong); --btn-fg: #fff; --disc-bg: rgba(255, 255, 255, .18); --disc-fg: #fff;
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.25rem; padding: .35rem .4rem .35rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .95rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background var(--t-med) var(--ease), color var(--t-med), border-color var(--t-med), transform var(--t-fast);
}
.btn__disc { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--disc-bg); color: var(--disc-fg); transition: transform var(--t-med) var(--ease), background var(--t-med); flex: none; }
.btn__disc .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--t-med) var(--ease); }
.btn:hover .btn__disc .icon, .btn:focus-visible .btn__disc .icon { transform: translateX(3px); }
.btn:hover .btn__disc { transform: rotate(-35deg); }
.btn:active { transform: translateY(1px); }
.btn--primary:hover { --btn-bg: var(--teal-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --disc-bg: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .12); border-color: #fff; }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); --disc-bg: var(--teal-strong); --disc-fg: #fff; }
.btn--light:hover { --btn-bg: #fff; --disc-bg: var(--teal-deep); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --disc-bg: var(--ink); --disc-fg: #fff; border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); --btn-bg: rgba(34, 40, 39, .04); }
.btn--sm { min-height: 2.75rem; padding-left: 1.15rem; font-size: .88rem; }
.btn--sm .btn__disc { width: 2.1rem; height: 2.1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; margin-top: 2rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { background: rgba(127, 127, 127, .12); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--teal-deep); text-decoration: none; }
.link-arrow .icon { transition: transform var(--t-med) var(--ease); }
.link-arrow:hover .icon, .link-arrow:focus-visible .icon { transform: translateX(4px); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--ink); background: rgba(255, 252, 247, .97); box-shadow: 0 1px 0 var(--line); transition: background var(--t-med) var(--ease), box-shadow var(--t-med), color var(--t-med); }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); transition: height var(--t-med) var(--ease); }
.site-header[data-mode="overlay"]:not(.is-solid) { background: transparent; box-shadow: none; color: #fff; }
.site-header[data-mode="overlay"]:not(.is-solid) .site-header__bar { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.site-header.is-compact { --header-h: 68px; }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-solid, .site-header[data-mode="solid"] { background: rgba(255, 252, 247, .9); backdrop-filter: saturate(1.4) blur(14px); }
}
.brand { flex: none; display: block; width: clamp(150px, 10vw + 40px, 200px); }
.brand img { width: 100%; height: auto; }
.brand__light { display: none; }
.site-header[data-mode="overlay"]:not(.is-solid) .brand__light { display: block; }
.site-header[data-mode="overlay"]:not(.is-solid) .brand__dark { display: none; }
.nav { margin-inline: auto; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(1.2rem, .4rem + 1.6vw, 2.4rem); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: inline-block; padding: .6rem 0; font-size: .93rem; font-weight: 600; text-decoration: none; letter-spacing: .01em; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-left: .15rem; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.nav__toggle .icon { width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease); }
.has-menu.is-open .nav__toggle .icon { transform: rotate(180deg); }
.site-header__actions { display: flex; align-items: center; gap: .7rem; }
.header-call, .menu-btn { display: none; }
.site-header[data-mode="overlay"]:not(.is-solid) .btn--light { --btn-bg: rgba(255, 252, 247, .95); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; width: min(40rem, 86vw);
  transform: translate(-42%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  color: var(--ink);
}
.mega::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.has-menu.is-open .mega, .has-menu:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-42%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .has-menu:hover .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-42%, 0); transition-delay: 0s; } }
.mega__inner { display: grid; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px rgba(28, 35, 34, .5), 0 0 0 1px var(--line); overflow: hidden; }
.mega__col { padding: 1.8rem; }
.mega__grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; }
.mega__link { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 12px; font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background var(--t-fast); }
.mega__link:hover, .mega__link:focus-visible { background: var(--accent-soft); }
.mega__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent-bg); color: var(--accent); flex: none; }
.mega__icon .icon { width: 1.05rem; height: 1.05rem; }
.mega__all { margin: 1.2rem 0 0 .6rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--teal-deep); text-decoration: none; }

/* drawer (mobile navigation) */
.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(28, 35, 34, .45); }
.drawer[hidden] { display: none; }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--white); overflow-y: auto; padding: 1.1rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: 1.5rem; animation: drawer-in var(--t-med) var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__top img { width: 160px; }
.drawer__nav { list-style: none; }
.drawer__nav > li { border-bottom: 1px solid var(--line); }
.drawer__nav a, .drawer__nav summary { display: flex; justify-content: space-between; align-items: center; padding: .95rem 0; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; text-decoration: none; cursor: pointer; list-style: none; }
.drawer__nav summary::-webkit-details-marker { display: none; }
.drawer__group[open] summary .icon { transform: rotate(45deg); }
.drawer__group summary .icon { transition: transform var(--t-med); }
.drawer__group ul { list-style: none; padding: 0 0 .8rem .2rem; }
.drawer__group ul a { font-family: var(--f-body); font-size: 1rem; padding: .5rem 0; color: var(--ink-soft); }
.drawer__nav [aria-current="page"] { color: var(--teal-deep); }
.drawer__contact { display: grid; gap: .9rem; margin-top: auto; }
.drawer__contact a:not(.btn) { display: flex; gap: .7rem; align-items: center; text-decoration: none; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.drawer__contact .btn { justify-content: space-between; }

@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .header-call, .menu-btn { display: inline-grid; }
  .site-header__bar { justify-content: space-between; }
  :root { --header-h: 72px; }
}

/* ---------- home hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--charcoal); min-height: max(640px, min(100svh, 62vw)); display: flex; flex-direction: column; overflow: clip; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 42%; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 27, 27, .84) 0%, rgba(20, 27, 27, .66) 24%, rgba(20, 27, 27, .22) 44%, rgba(20, 27, 27, 0) 56%),
    linear-gradient(180deg, rgba(20, 27, 27, .55) 0%, rgba(20, 27, 27, 0) 20%),
    linear-gradient(0deg, rgba(20, 27, 27, .45) 0%, rgba(20, 27, 27, 0) 32%);
}
.hero__inner { flex: 1; display: grid; grid-template-columns: minmax(0, 44rem) 1fr minmax(16rem, 20rem); gap: 2rem; align-items: center; padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3.5rem)); padding-bottom: clamp(8.5rem, 15vh, 11rem); }
.hero__copy { max-width: 44rem; }
.hero .eyebrow { color: var(--gold); }
.hero__title { font-family: var(--f-display); font-weight: 500; letter-spacing: -.015em; line-height: .98;
  font-size: clamp(2.6rem, min(1.3rem + 4vw, 9.4svh), 6.6rem); text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--teal-light); display: inline-block; }
.hero__lead { margin-top: 1.5rem; max-width: 33rem; font-size: clamp(1.02rem, .95rem + .25vw, 1.2rem); color: rgba(255, 255, 255, .88); text-align: left; }
.hero .actions { margin-top: 2.2rem; }
.proof { display: flex; flex-wrap: wrap; gap: 1.2rem clamp(1.6rem, 3vw, 3rem); margin-top: clamp(1.6rem, 4vh, 2.8rem); padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .22); list-style: none; }
.proof li { display: grid; gap: .15rem; }
.proof strong { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 1.3vw, 2.9rem); font-weight: 600; line-height: 1; }
.proof span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }

/* curved service rail */
.rail { position: relative; align-self: center; justify-self: end; width: 100%; }
.rail__arc { position: absolute; top: -8%; bottom: -8%; right: -14%; width: 150%; height: 116%; pointer-events: none; overflow: visible; }
.rail__arc path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; stroke-dasharray: 2 7; }
.rail__arc .rail__trace { stroke: var(--gold); stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-width: 1.4; animation: trace 2.2s var(--ease-out) .5s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.rail__list { list-style: none; display: grid; gap: .85rem; position: relative; }
.rail__item { transform: translateX(var(--arc, 0)); }
.rail__item:nth-child(2), .rail__item:nth-child(4) { --arc: -2.2rem; }
.rail__item:nth-child(3) { --arc: -3.3rem; }
.rail__list { padding-left: 3.3rem; }
.rail__card {
  display: flex; align-items: center; gap: .85rem; padding: .62rem .7rem .62rem .62rem;
  border-radius: 999px; background: rgba(255, 252, 247, .93); color: var(--ink); text-decoration: none;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55);
  transition: background var(--t-med) var(--ease), color var(--t-med), transform var(--t-med) var(--ease), box-shadow var(--t-med);
}
.rail__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-bg); color: var(--accent); flex: none; transition: background var(--t-med), color var(--t-med); }
.rail__name { font-weight: 700; font-size: .92rem; line-height: 1.2; flex: 1; }
.rail__go { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; transition: transform var(--t-med) var(--ease), border-color var(--t-med); }
.rail__go .icon { width: .95rem; height: .95rem; }
.rail__card:hover, .rail__card:focus-visible, .rail__item.is-featured .rail__card {
  background: var(--teal-strong); color: #fff; transform: translateX(-6px); box-shadow: 0 20px 36px -18px rgba(7, 101, 116, .8);
}
.rail__card:hover .rail__icon, .rail__card:focus-visible .rail__icon, .rail__item.is-featured .rail__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.rail__card:hover .rail__go, .rail__card:focus-visible .rail__go, .rail__item.is-featured .rail__go { border-color: rgba(255, 255, 255, .6); transform: rotate(-35deg); }
.rail__list:hover .rail__item.is-featured .rail__card:not(:hover), .rail__list:focus-within .rail__item.is-featured .rail__card:not(:focus-visible) {
  background: rgba(255, 252, 247, .93); color: var(--ink); transform: none; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55);
}
.rail__list:hover .rail__item.is-featured .rail__card:not(:hover) .rail__icon, .rail__list:focus-within .rail__item.is-featured .rail__card:not(:focus-visible) .rail__icon { background: var(--accent-bg); color: var(--accent); }
.rail__list:hover .rail__item.is-featured .rail__card:not(:hover) .rail__go, .rail__list:focus-within .rail__item.is-featured .rail__card:not(:focus-visible) .rail__go { border-color: var(--line-strong); transform: none; }
.rail__caption { margin: 0 0 1rem 3.3rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }

/* dark curved band at the bottom of the hero */
.hero__band { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; color: #fff; }
.hero__band svg.band-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__band svg.band-shape path { fill: var(--charcoal); }
.hero__band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-top: clamp(2.6rem, 4.2vw, 4.4rem); padding-bottom: clamp(1.1rem, 1.8vw, 1.8rem); }
.band-play { display: inline-flex; align-items: center; gap: .9rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; background: none; border: 0; padding: 0; cursor: pointer; }
.band-play__disc { position: relative; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--teal-strong); transition: transform var(--t-med) var(--ease), background var(--t-med); }
.band-play__disc::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(97, 211, 228, .45); }
.band-play:hover .band-play__disc { transform: scale(1.06); background: var(--teal-deep); }
.band-play small { display: block; font-weight: 500; color: rgba(255, 255, 255, .7); font-size: .78rem; }
.band-strap { font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); color: rgba(255, 255, 255, .92); text-align: center; }
.band-strap span { color: var(--gold); font-style: normal; padding-inline: .4em; }
.band-scroll { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-decoration: none; }
.band-scroll .icon { width: 1rem; height: 1rem; }

@media (max-width: 1180px) and (min-width: 1081px) { .hero__inner { grid-template-columns: minmax(0, 34rem) 1fr minmax(14rem, 16rem); } }
@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; padding-bottom: 7.5rem; }
  .rail { display: none; }
}
@media (max-width: 759px) {
  .hero__media { bottom: auto; height: min(78svh, 135vw); }
  .hero__shade { bottom: auto; height: min(78svh, 135vw);
    background: linear-gradient(180deg, rgba(20, 27, 27, .55) 0%, rgba(20, 27, 27, 0) 22%, rgba(20, 27, 27, 0) 40%, rgba(28, 35, 34, .78) 72%, var(--charcoal) 100%); }
  .hero__inner { padding-top: calc(min(78svh, 135vw) - 11.5rem); padding-bottom: 2.5rem; }
  .hero__title { font-size: clamp(2.55rem, 9.6vw + .4rem, 3.4rem); }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { justify-content: space-between; }
  .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .proof span { font-size: .7rem; letter-spacing: .05em; }
  .hero__band { position: static; }
  .hero__band svg.band-shape { display: none; }
  .hero__band-inner { flex-direction: column; align-items: flex-start; padding: 0 0 2rem; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 1.6rem; }
  .band-strap { text-align: left; }
  .band-scroll { display: none; }
}
.hero-services { display: none; }
@media (max-width: 1080px) {
  .hero-services { display: block; background: var(--charcoal); padding: 0 0 2.6rem; color: #fff; }
  .hero-services__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; }
  .hero-services .rail__card { transform: none; }
  .hero-services .eyebrow { color: var(--gold); }
}

/* curved transition into ivory sections */
.curve-top { position: relative; }
.curve-top::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(40px, 5vw, 90px); background: var(--charcoal); border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* ---------- agency intro ---------- */
.intro { padding-top: calc(var(--space) + clamp(40px, 5vw, 90px)); background: #FFFFFF; }
.people { background: #fffffc; }
.insights { background: #FFFFFF; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.intro__statement { font-family: var(--f-display); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.35rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 1.6rem; }
.intro__statement em { color: var(--teal-strong); }
.intro__text { color: var(--ink-soft); max-width: 36rem; }
.intro__media { position: relative; padding: 0 0 clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 5rem); }
.intro__main { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: var(--shadow); }
.intro__main img, .intro__inset img { width: 100%; height: 100%; object-fit: cover; }
.intro__inset { position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--ivory); box-shadow: var(--shadow); }
.intro__caption { position: absolute; right: clamp(1rem, 2vw, 1.6rem); bottom: clamp(4rem, 8vw, 7rem); max-width: 15rem; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(255, 252, 247, .94); box-shadow: var(--shadow-soft); font-size: .84rem; line-height: 1.45; }
.intro__caption strong { display: block; font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; }
.badge-ring { position: absolute; right: -1.2rem; top: -2.4rem; width: clamp(6.5rem, 9vw, 9rem); aspect-ratio: 1; color: var(--teal-deep); }
.badge-ring text { font-size: 9.4px; letter-spacing: 2.3px; text-transform: uppercase; font-weight: 700; fill: currentColor; font-family: var(--f-body); }
.badge-ring__core { fill: var(--teal-strong); }

/* ---------- service explorer ---------- */
.explorer { background: var(--white); }
.explorer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.explorer__list { list-style: none; border-top: 1px solid var(--line); counter-reset: svc; }
.explorer__row { border-bottom: 1px solid var(--line); }
.explorer__link { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .2rem 1.2rem; align-items: center; padding: 1.25rem .4rem; text-decoration: none; position: relative; transition: padding var(--t-med) var(--ease), background var(--t-med); border-radius: 12px; }
.explorer__no { font-family: var(--f-display); font-size: 1.1rem; color: var(--gold-ink); font-variant-numeric: lining-nums; }
.explorer__name { font-family: var(--f-display); font-size: clamp(1.45rem, 1.1rem + 1vw, 2.15rem); line-height: 1.15; transition: color var(--t-med); }
.explorer__go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: background var(--t-med), border-color var(--t-med), color var(--t-med), transform var(--t-med) var(--ease); }
.explorer__go .icon { width: 1rem; height: 1rem; }
.explorer__desc { grid-column: 2 / 4; font-size: .94rem; color: var(--ink-soft); line-height: 1.55; max-width: 34rem; text-align: left; }
.explorer__dot { position: absolute; left: -.9rem; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); transform: translateY(-50%) scale(0); transition: transform var(--t-med) var(--ease); }
.explorer__link:hover, .explorer__link:focus-visible, .explorer__row.is-active .explorer__link { background: var(--accent-soft); padding-left: 1.1rem; }
.explorer__link:hover .explorer__name, .explorer__row.is-active .explorer__name { color: var(--accent); }
.explorer__link:hover .explorer__go, .explorer__link:focus-visible .explorer__go, .explorer__row.is-active .explorer__go { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-35deg); }
.explorer__row.is-active .explorer__dot { transform: translateY(-50%) scale(1); }
.js .explorer__desc { display: none; }
.js .explorer__row.is-active .explorer__desc { display: block; }
.explorer__preview { position: sticky; top: calc(var(--header-h) + 2rem); display: none; }
.js .explorer__preview { display: block; }
.preview { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--accent-bg); aspect-ratio: 4 / 4.6; box-shadow: var(--shadow); }
.preview__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 520ms var(--ease), transform 900ms var(--ease-out); }
.preview__img.is-active { opacity: 1; transform: none; }
.preview__img img { width: 100%; height: 100%; object-fit: cover; }
.preview__card { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: rgba(255, 252, 247, .95); box-shadow: var(--shadow-soft); }
.preview__card .eyebrow { margin-bottom: .5rem; }
.preview__title { font-family: var(--f-display); font-size: 1.65rem; line-height: 1.12; margin-bottom: .5rem; }
.preview__text { font-size: .93rem; color: var(--ink-soft); margin-bottom: .9rem; line-height: 1.55; text-align: left; }
@media (max-width: 900px) {
  .explorer__grid { grid-template-columns: 1fr; }
  .js .explorer__preview { display: none; }
  .js .explorer__desc { display: block; }
  .explorer__link { grid-template-columns: 2.4rem 1fr auto; padding-inline: .2rem; }
  .explorer__link:hover, .explorer__row.is-active .explorer__link { padding-left: .2rem; background: none; }
}

/* ---------- selected work ---------- */
.work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 2.2vw, 2.4rem); align-items: start; }
.work-item { grid-column: span 4; }
.work-item--lg { grid-column: 1 / span 6; grid-row: span 2; }
.work-item--md { grid-column: 7 / span 6; }
.work-item--sm { grid-column: span 3; }
.work-item--offset { margin-top: clamp(2rem, 6vw, 6rem); }
.work-item a { display: block; text-decoration: none; }
.work-item__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.work-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.work-item a:hover .work-item__media img, .work-item a:focus-visible .work-item__media img { transform: scale(1.04); }
.work-item__media--logo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 12%; background: var(--white); }
.work-item__media--logo img { object-fit: contain; height: auto; max-height: 100%; }
.work-item__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.work-item__cap h3 { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + .6vw, 1.75rem); line-height: 1.15; }
.work-item__tag { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
.work-item p { margin-top: .4rem; font-size: .93rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work-item, .work-item--lg, .work-item--md, .work-item--sm { grid-column: span 1; grid-row: auto; }
  .work-item--lg { grid-column: 1 / -1; }
  .work-item--offset { margin-top: 0; }
}
@media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } }

/* home: selected-work bento */
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.work__head .section-head { margin-bottom: 0; }
.work__bento { display: grid; grid-template-columns: 1.15fr .55fr .55fr; grid-template-rows: auto auto; gap: clamp(1rem, 1.8vw, 1.6rem); }
.work-card--lg { grid-column: 1; grid-row: 1 / span 2; }
.work-card--md { grid-column: 2 / span 2; }
.work-card a { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); text-decoration: none; color: inherit; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.work-card a:hover, .work-card a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--teal-strong), var(--shadow); }
.work-card__media { position: relative; flex: 1; min-height: 14rem; margin: 0; overflow: hidden; background: var(--paper); }
.work-card__media picture, .work-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.work-card a:hover .work-card__media img, .work-card a:focus-visible .work-card__media img { transform: scale(1.04); }
.work-card__media--logo { min-height: 12rem; background: linear-gradient(135deg, #fff, var(--accent-bg)); }
.work-card__media--logo picture { display: grid; place-items: center; padding: 10% 12%; }
.work-card__media--logo img { position: static; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.work-card__media--logo:hover img, .work-card a:hover .work-card__media--logo img { transform: scale(1.03); }
.work-card__body { padding: 1.1rem 4.2rem 1.25rem 1.4rem; }
.work-card__body h3 { margin-top: .3rem; font-family: var(--f-display); font-size: clamp(1.3rem, 1.05rem + .6vw, 1.7rem); line-height: 1.15; }
.work-card__body p { margin-top: .35rem; font-size: .93rem; color: var(--ink-soft); }
.work-card__tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.work-card__go { position: absolute; right: 1.2rem; bottom: 1.25rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.work-card__go svg { width: 1rem; height: 1rem; }
.work-card a:hover .work-card__go, .work-card a:focus-visible .work-card__go { background: var(--teal-strong); border-color: var(--teal-strong); color: #fff; transform: rotate(-45deg); }
.work-card--sm .work-card__body { padding-right: 3.6rem; }
.work-card--sm .work-card__body h3 { font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); }
.work-card--sm .work-card__go { width: 2.1rem; height: 2.1rem; right: 1rem; }
@media (min-width: 901px) {
  .work-card--lg .work-card__media { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
}
@media (max-width: 900px) {
  .work__bento { grid-template-columns: 1fr 1fr; }
  .work-card--lg, .work-card--md { grid-column: 1 / -1; grid-row: auto; }
  .work-card--lg .work-card__media { min-height: 0; aspect-ratio: 1 / 1; flex: none; }
  .work-card--md .work-card__media { min-height: 0; aspect-ratio: 16 / 7; flex: none; }
  .work-card--sm .work-card__media { min-height: 0; aspect-ratio: 4 / 4.4; flex: none; }
}
@media (max-width: 560px) {
  .work-card--sm .work-card__body { padding: .9rem 1rem 3.4rem; }
  .work-card--sm .work-card__go { bottom: .9rem; left: 1rem; right: auto; }
}

.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 40vw), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logo-wall li { display: grid; place-items: center; background: var(--white); padding: 1.3rem 1.2rem; aspect-ratio: 16 / 9; }
.logo-wall img { max-height: 3.4rem; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .78; transition: filter var(--t-med), opacity var(--t-med); }
.logo-wall li:hover img { filter: none; opacity: 1; }

/* ---------- partnership reasons ---------- */
.reasons { background: var(--charcoal); color: #fff; overflow: clip; }
.reasons .eyebrow { color: var(--gold); }
.reasons .section-title em { color: var(--teal-light); }
.reasons__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); }
.reasons__head { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
.reasons__head p { color: rgba(255, 255, 255, .72); margin-top: 1.2rem; max-width: 26rem; }
.reasons__figure { margin-top: 2.4rem; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; max-width: 26rem; }
.reasons__figure img { width: 100%; height: 100%; object-fit: cover; }
.reasons__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 3rem); }
.reason { padding: 1.8rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.reason__no { font-family: var(--f-display); font-size: 1rem; color: var(--gold); }
.reason h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 1.15rem + .7vw, 1.85rem); line-height: 1.15; margin: .5rem 0 .7rem; }
.reason p { color: rgba(255, 255, 255, .74); font-size: .96rem; }
@media (max-width: 900px) { .reasons__grid { grid-template-columns: 1fr; } .reasons__head { position: static; } }
@media (max-width: 620px) { .reasons__list { grid-template-columns: 1fr; } }

/* ---------- people ---------- */
.people__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.people__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.person:nth-child(2) { margin-top: clamp(2.5rem, 7vw, 6rem); }
.people__cards--single { grid-template-columns: minmax(0, 24rem); justify-content: center; }
.person__media { border-radius: 200px 200px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--peach); }
.person__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 900ms var(--ease-out); }
.person:hover .person__media img { transform: scale(1.03); }
.person__name { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.15; margin-top: 1rem; }
.person__role { font-size: .82rem; color: var(--ink-soft); letter-spacing: .02em; }
@media (max-width: 900px) { .people__grid { grid-template-columns: 1fr; } }

/* ---------- testimonials ---------- */
.voices { background: var(--paper); }
.voices__grid { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.voices__tabs { list-style: none; display: grid; gap: .5rem; }
.voices__tab { position: relative; display: block; width: 100%; text-align: left; padding: 1rem 1.2rem 1rem 1.6rem; border: 1px solid transparent; border-radius: 14px; background: none; cursor: pointer; transition: background var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.voices__tab::before { content: ""; position: absolute; left: .7rem; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--teal-strong); transform: translateY(-50%); transition: height var(--t-med) var(--ease); }
.voices__tab strong { display: block; font-size: .96rem; color: var(--ink-soft); transition: color var(--t-med); }
.voices__tab span { font-size: .82rem; color: var(--ink-soft); }
.voices__tab:hover { background: rgba(255, 252, 247, .7); }
.voices__tab:hover strong { color: var(--ink); }
.voices__tab[aria-selected="true"] { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-soft); }
.voices__tab[aria-selected="true"]::before { height: 55%; }
.voices__tab[aria-selected="true"] strong { color: var(--ink); }
/* Panels share one grid cell so switching clients never changes the section height */
.voices__panels { display: grid; }
.js .voices .quote { grid-area: 1 / 1; }
.voices .quote { display: flex; flex-direction: column; padding: clamp(1.8rem, 1rem + 3vw, 3.4rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); }
.voices .quote__mark { width: 2.75rem; height: 2.75rem; margin-bottom: 1.2rem; }
.voices .quote__text { font-size: clamp(1.3rem, 1.02rem + .85vw, 1.9rem); line-height: 1.45; text-align: left; hyphens: manual; -webkit-hyphens: manual; margin-bottom: 2rem; }
.voices .quote footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.quote { position: relative; }
.quote + .quote { margin-top: 3rem; }
.js .voices .quote + .quote { margin-top: 0; }
.js .voices .quote[hidden] { display: flex; visibility: hidden; }
.quote__mark { width: 3rem; height: 3rem; color: var(--gold); margin-bottom: 1rem; }
.quote__text { font-family: var(--f-display); font-size: clamp(1.45rem, 1.05rem + 1.25vw, 2.3rem); line-height: 1.32; letter-spacing: -.005em; }
.quote footer { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.quote__logo { width: 7.5rem; height: 3.5rem; border-radius: 12px; background: var(--white); display: grid; place-items: center; padding: .4rem .6rem; box-shadow: 0 0 0 1px var(--line); }
.quote__logo img { max-height: 100%; width: auto; object-fit: contain; }
.quote cite { font-style: normal; display: grid; }
.quote cite strong { font-size: 1rem; }
.quote cite span { font-size: .86rem; color: var(--ink-soft); }
.js .quote.is-entering { animation: quote-in 560ms var(--ease-out); }
@keyframes quote-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 860px) {
  .voices__grid { grid-template-columns: 1fr; }
  .voices__tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem .2rem .8rem; scrollbar-width: thin; }
  .voices__tab { width: auto; flex: none; white-space: nowrap; padding: .7rem 1.1rem; }
  .voices__tab::before { display: none; }
  .voices__tab[aria-selected="true"] { border-color: var(--teal-strong); }
  .voices .quote__text { font-size: 1.3rem; }
}

/* ---------- posts ---------- */
.magazine { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.magazine__side { display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem); align-content: start; }
.post-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.6rem, 3vw, 3rem) clamp(1.2rem, 2.4vw, 2.4rem); }
.post-card { list-style: none; }
.post-card a { display: block; text-decoration: none; }
.post-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--white); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.post-card a:hover img, .post-card a:focus-visible img { transform: scale(1.04); }
.post-card__meta { margin: 1rem 0 .4rem; font-size: .8rem; color: var(--ink-soft); letter-spacing: .02em; }
.post-card__title { font-family: var(--f-display); font-size: clamp(1.3rem, 1.12rem + .5vw, 1.6rem); line-height: 1.2; text-wrap: pretty; }
.post-card__more { display: inline-flex; gap: .45rem; align-items: center; margin-top: .8rem; font-size: .88rem; font-weight: 700; color: var(--teal-deep); }
.post-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease); }
.post-card a:hover .post-card__more .icon { transform: translateX(4px); }
.post-card--feature .post-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.post-card--feature .post-card__title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); }
.post-card--row a { display: grid; grid-template-columns: minmax(8rem, 42%) 1fr; gap: 1.2rem; align-items: center; }
.post-card--row .post-card__meta { margin-top: 0; }
.post-card--row .post-card__title { font-size: clamp(1.15rem, 1.02rem + .4vw, 1.4rem); }
@media (max-width: 900px) { .magazine { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .post-card--row a { grid-template-columns: 1fr; } }

.blog-tools { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 2.4rem; }
.search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.search input { width: 100%; height: 3.1rem; padding: 0 1rem 0 2.9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); font: inherit; font-size: .95rem; }
.search .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.blog-count { font-size: .9rem; color: var(--ink-soft); }
.blog-empty { padding: 2rem 0; color: var(--ink-soft); }

/* ---------- inner page hero ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(2.2rem, 5vw, 4.5rem)); padding-bottom: clamp(2.5rem, 5vw, 5rem); background: linear-gradient(180deg, var(--paper), #EAF8FF); overflow: clip; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.page-hero--text .page-hero__grid { grid-template-columns: minmax(0, 52rem); }
.page-hero__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.page-hero__lead { margin-top: 1.3rem; font-size: 1.12em; color: var(--ink-soft); max-width: 36rem; text-align: left; }
.page-hero__media { position: relative; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 200px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--accent-bg, var(--peach)); box-shadow: var(--shadow); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; font-size: .82rem; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 90px; }
}

/* ---------- service detail ---------- */
.svc-intro__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.svc-intro__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 34rem; background: var(--accent-bg); box-shadow: var(--shadow-soft); }
.svc-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-overview { background: var(--charcoal); color: #fff; }
.svc-overview .eyebrow { color: var(--gold); }
.svc-overview .section-title { margin-bottom: 1.2rem; }
.svc-overview__text { font-family: var(--f-display); font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); line-height: 1.45; color: rgba(255, 255, 255, .92); }
.svc-overview__text a { color: var(--teal-light); }
.svc-overview__text + .svc-overview__text { margin-top: 1rem; }
.benefits { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); counter-reset: b; }
.benefit { padding: 1.8rem 0 2rem; border-top: 1px solid var(--line-strong); position: relative; }
.benefit::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 2px; background: var(--accent); transition: width var(--t-slow) var(--ease-out); }
.benefit:hover::before { width: 100%; }
.benefit__no { font-family: var(--f-display); font-size: 1.05rem; color: var(--accent); }
.benefit__title { font-family: var(--f-display); font-size: clamp(1.35rem, 1.15rem + .6vw, 1.75rem); line-height: 1.18; margin: .4rem 0 .7rem; }
.benefit p { color: var(--ink-soft); font-size: .98rem; }
.svc-provided { background: var(--white); }
.svc-provided__grid, .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.svc-provided__head, .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .svc-intro__grid, .svc-provided__grid, .faq__grid { grid-template-columns: 1fr; } .svc-provided__head, .faq__head { position: static; } .svc-intro__media { max-height: none; aspect-ratio: 4 / 3; } }
.accordion { border-top: 1px solid var(--line-strong); }
.acc { border-bottom: 1px solid var(--line-strong); }
.acc summary { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.acc summary::-webkit-details-marker { display: none; }
.acc__no { font-family: var(--f-display); font-weight: 500; color: var(--gold-ink); font-size: 1rem; min-width: 1.8rem; }
.acc__title { flex: 1; }
.acc__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; transition: transform var(--t-med) var(--ease), background var(--t-med), color var(--t-med); }
.acc__icon .icon { width: 1rem; height: 1rem; }
.acc[open] .acc__icon { transform: rotate(45deg); background: var(--teal-strong); color: #fff; border-color: var(--teal-strong); }
.acc summary:hover .acc__title { color: var(--teal-deep); }
.acc__body { padding: 0 0 1.5rem 2.8rem; color: var(--ink-soft); }
.faq .acc__body { padding-left: 0; }
.js .acc[open] .acc__body { animation: acc-open 380ms var(--ease-out); }
@keyframes acc-open { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) { .acc__body { padding-left: 0; } }

.steps-section { background: #FFFFFF; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: clamp(1.4rem, 2.4vw, 2.4rem); position: relative; }
.step { position: relative; padding-top: 4.4rem; }
.step::before { content: ""; position: absolute; left: 3.6rem; right: -1.2rem; top: 1.5rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.step:last-child::before { display: none; }
.step__no { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--gold); font-family: var(--f-display); font-size: 1.1rem; background: var(--ivory); transition: background var(--t-med), color var(--t-med); }
.step:hover .step__no { background: var(--teal-strong); color: #fff; border-color: var(--teal-strong); }
.step__title { font-family: var(--f-display); font-size: clamp(1.3rem, 1.12rem + .5vw, 1.6rem); line-height: 1.18; margin-bottom: .6rem; }
.step p { font-size: .95rem; color: var(--ink-soft); }
.section--paper .step__no { background: var(--paper); }

.related { background: var(--paper); }
.related__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.related__list a { display: grid; gap: .8rem; height: 100%; padding: 1.8rem; border-radius: var(--radius-lg); background: var(--white); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.related__list a:hover, .related__list a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--accent), var(--shadow-soft); }
.related__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-bg); color: var(--accent); }
.related__name { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; }
.related__text { font-size: .93rem; color: var(--ink-soft); }
.related__more { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; font-size: .88rem; color: var(--accent); margin-top: auto; }

/* regional */
.svc-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); }
.svc-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--t-med), transform var(--t-med) var(--ease); }
.svc-card:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-soft); transform: translateY(-3px); }
.svc-card__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--accent-bg); color: var(--accent); }
.svc-card__title { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; }
.svc-card p { font-size: .94rem; color: var(--ink-soft); text-align: left; }
.svc-card__link { margin-top: auto; display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; font-size: .88rem; color: var(--accent); text-decoration: none; }
.svc-card__link .icon { width: 1rem; height: 1rem; }
.region-text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.region-text .section-title { margin-bottom: 1.4rem; }
.region-text__media { display: grid; gap: 1.2rem; }
.region-text__media figure { border-radius: var(--radius-lg); overflow: hidden; }
.region-text__media figure:nth-child(2) { width: 78%; margin-left: auto; margin-top: -3rem; border: 6px solid var(--ivory); }
.section--paper .region-text__media figure:nth-child(2) { border-color: var(--paper); }
@media (max-width: 900px) { .region-text { grid-template-columns: 1fr; } }
.wide-figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.wide-figure figcaption { padding: .9rem 1.2rem; font-size: .86rem; color: var(--ink-soft); }

/* ---------- about ---------- */
.about-band { position: relative; height: clamp(22rem, 52vw, 46rem); overflow: hidden; }
.about-band img { width: 100%; height: 100%; object-fit: cover; }
.about-band__cap { position: absolute; left: var(--gutter); bottom: 1.6rem; color: #fff; font-size: .85rem; letter-spacing: .06em; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.story__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); }
.story__grid .prose { max-width: 40rem; }
.story__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.story__facts { list-style: none; display: grid; gap: 1.2rem; margin-top: 2rem; }
.story__facts li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.story__facts strong { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } .story__aside { position: static; } }

.bio { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.bio + .bio { margin-top: var(--space); }
.bio--reverse { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.bio--reverse .bio__media { order: 2; }
.bio__media { position: sticky; top: calc(var(--header-h) + 2rem); }
.bio__frame { border-radius: 240px 240px var(--radius-lg) var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--peach); }
.bio__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bio__name { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 1.8vw, 3.2rem); line-height: 1.05; }
.bio__cred { margin: .6rem 0 1.6rem; font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.bio__intro { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.38; margin-bottom: 1.4rem; text-align: left !important; }
.bio p + p { margin-top: 1em; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; }
.chips li { padding: .4rem .9rem; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .86rem; font-weight: 600; }
@media (max-width: 900px) { .bio, .bio--reverse { grid-template-columns: 1fr; } .bio--reverse .bio__media { order: 0; } .bio__media { position: static; max-width: 24rem; } }

.timeline { list-style: none; position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--gold), rgba(200, 168, 120, .2)); }
.timeline__item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; position: relative; }
.timeline__item::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: .9rem; border-radius: 50%; background: var(--teal-strong); box-shadow: 0 0 0 6px var(--ivory); transform: translate(-50%, -50%); }
.timeline__item:nth-child(even) .timeline__media { order: 2; }
.timeline__media { justify-self: end; width: min(100%, 21rem); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.timeline__media--stock { position: relative; }
.timeline__media--stock::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 48, 52, .65)); pointer-events: none; }
.timeline__image-year { position: absolute; z-index: 1; bottom: 0; left: .7rem; color: #fff; font-family: var(--f-display); font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 700; line-height: 1; }
.timeline__item:nth-child(even) .timeline__media { justify-self: start; }
.timeline__date { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.timeline__title { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); line-height: 1.1; margin: .4rem 0 .8rem; }
.timeline__text { color: var(--ink-soft); max-width: 30rem; }
@media (max-width: 760px) {
  .timeline::before { left: .45rem; }
  .timeline__item { grid-template-columns: 1fr; padding-left: 2rem; gap: 1.2rem; }
  .timeline__item::after { left: .45rem; top: 1rem; }
  .timeline__item:nth-child(even) .timeline__media { order: 0; }
  .timeline__media, .timeline__item:nth-child(even) .timeline__media { justify-self: start; width: min(100%, 17rem); }
}
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
.mv__card { padding: clamp(1.8rem, 3vw, 3rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.mv__card--dark { background: var(--charcoal); color: #fff; box-shadow: none; }
.mv__card--dark .eyebrow { color: var(--gold); }
.mv__card--dark p { color: rgba(255, 255, 255, .82); }
.mv__card h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.7rem); line-height: 1.08; margin-bottom: 1rem; }
@media (max-width: 760px) { .mv { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(7rem, 12vw, 13rem); gap: clamp(.8rem, 1.5vw, 1.4rem); }
.gallery figure { border-radius: var(--radius); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery .g1 { grid-column: 1 / span 7; grid-row: span 3; }
.gallery .g2 { grid-column: 8 / span 5; grid-row: span 2; }
.gallery .g3 { grid-column: 8 / span 2; grid-row: span 2; }
.gallery .g4 { grid-column: 10 / span 3; grid-row: span 2; }
.gallery .g5 { grid-column: 1 / span 4; grid-row: span 1; }
.gallery .g6 { grid-column: 5 / span 3; grid-row: span 1; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 11rem; }
  .gallery figure { grid-column: auto !important; grid-row: span 1 !important; }
  .gallery .g1 { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
}

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.contact__info { display: grid; gap: 1.6rem; }
.contact__item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.contact__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--teal-deep); }
.contact__item h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-bottom: .2rem; }
.contact__item a, .contact__item p { font-size: 1.05rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; margin: 0; }
.contact__item a:hover { text-decoration: underline; }
.contact__item small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .86rem; margin-top: .15rem; }
.form-card { padding: clamp(1.6rem, 3.5vw, 3.2rem); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); }
.form-card h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.8rem); line-height: 1.06; margin-bottom: .5rem; }
.form-card > p { color: var(--ink-soft); margin-bottom: 1.8rem; }
.map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 7; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .map { aspect-ratio: 4 / 3; } }

/* forms */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 700; }
.field .req { color: #A1391E; }
.field .opt { font-weight: 500; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; min-height: 3.1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-strong); background: #fff; box-shadow: 0 0 0 3px rgba(8, 121, 140, .18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #A1391E; box-shadow: 0 0 0 3px rgba(161, 57, 30, .12); }
.field__error { font-size: .82rem; color: #A1391E; font-weight: 600; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
.form__note { flex: 1 1 16rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.form__status { margin-top: 1.2rem; font-weight: 600; }
.form__status:empty { display: none; }
.form__status.is-success { padding: 1rem 1.2rem; border-radius: 12px; background: #E3F1EC; color: #1F5E45; }
.form__status.is-error { padding: 1rem 1.2rem; border-radius: 12px; background: #F8E6E1; color: #8A2F17; }
.form.is-busy button[type="submit"] { opacity: .7; pointer-events: none; }
.form.is-busy button[type="submit"] .btn__disc { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } .form__foot .btn { width: 100%; justify-content: space-between; } }

/* ---------- article ---------- */
.article__head { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)); padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.article__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.article__meta span::before { content: "·"; margin-right: 1.2rem; }
.article__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 4.1rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.article__hero { max-width: 72rem; }
.article__hero picture { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.article__hero img { width: 100%; height: auto; }
.article__layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 44rem) minmax(0, 15rem); justify-content: center; gap: clamp(2rem, 4vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.article__body { grid-column: 2; max-width: 44rem; }
.article__body > aside:first-child, .article__body > p:first-child { margin-top: 0; }
.article__toc { grid-column: 1; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; font-size: .86rem; max-height: calc(100vh - var(--header-h) - 4rem); overflow-y: auto; }
.article__toc ol { list-style: none; display: grid; gap: .2rem; border-left: 1px solid var(--line); }
.article__toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-soft); line-height: 1.4; }
.article__toc a:hover { color: var(--ink); }
.article__toc a.is-current { color: var(--teal-deep); border-left-color: var(--teal-strong); font-weight: 600; }
@media (max-width: 1180px) { .article__layout { grid-template-columns: minmax(0, 44rem); } .article__body { grid-column: 1; } .article__toc { display: none !important; } }
.article__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.back-link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 700; text-decoration: none; }
.back-link .icon { transform: rotate(180deg); }
.share { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: var(--ink-soft); }
.share a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.share a:hover { background: var(--white); }
.share .icon { width: 1.05rem; height: 1.05rem; }
.article-enquiry { background: var(--white); }
.article-enquiry .section-title { margin-bottom: .4rem; }
.article-enquiry .section-lead { margin-bottom: 2rem; }

/* ---------- CTA band + footer ---------- */
.cta-band { background: var(--teal-deep); color: #fff; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); position: relative; overflow: clip; }
.cta-band::before { content: ""; position: absolute; right: -10vw; top: -40%; width: 60vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
.cta-band::after { content: ""; position: absolute; right: -2vw; top: -10%; width: 40vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(200, 168, 120, .3); }
.cta-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 4rem; align-items: end; }
.cta-band .eyebrow { color: var(--peach); }
.cta-band__title { font-family: var(--f-display); font-size: clamp(2.2rem, 1.3rem + 3vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.cta-band__title em { color: var(--peach) !important; }
.cta-band__lead { margin-top: 1rem; color: rgba(255, 255, 255, .85); max-width: 34rem; }
.cta-band__actions { display: grid; gap: 1rem; justify-items: start; }
.cta-band .btn--primary { --btn-bg: var(--white); --btn-fg: var(--ink); --disc-bg: var(--teal-deep); }
.cta-band .btn--primary:hover { --btn-bg: #fff; --disc-bg: var(--charcoal); }
.cta-band__link { display: inline-flex; gap: .6rem; align-items: center; color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cta-band__link:hover { text-decoration: underline; }
.cta-band :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .cta-band__grid { grid-template-columns: 1fr; } }

.site-footer { background: var(--charcoal); color: rgba(255, 255, 255, .82); padding: clamp(3.5rem, 6vw, 6rem) 0 2rem; font-size: .95rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(2.5rem, 5vw, 6rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__brand img { width: 210px; }
.footer__line { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; line-height: 1.25; color: #fff; margin: 1.6rem 0; max-width: 20rem; }
.footer__brand address { display: grid; gap: .9rem; }
.footer__brand address a { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; text-decoration: none; overflow-wrap: anywhere; }
.footer__brand address a:hover { color: #fff; text-decoration: underline; }
.footer__brand .icon { color: var(--gold); margin-top: .2rem; width: 1.15rem; height: 1.15rem; }
.footer__cols { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 2rem; }
.footer__title { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 1rem; }
.footer__title:not(:first-child) { margin-top: 2rem; }
.footer__cols ul { list-style: none; display: grid; gap: .55rem; }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { color: #fff; text-decoration: underline; }
.footer__social a { display: inline-flex; gap: .65rem; align-items: center; }
.footer__social .icon { width: 1.1rem; height: 1.1rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-size: .84rem; color: rgba(255, 255, 255, .6); }
.footer__bottom p { margin: 0; }
.footer__bottom a { color: rgba(255, 255, 255, .8); }
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols > div:first-child { grid-column: 1 / -1; } }

.wa-float { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 50; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #1F7A4D; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: transform var(--t-med) var(--ease), opacity var(--t-med); }
.wa-float .icon { width: 1.6rem; height: 1.6rem; }
.wa-float:hover { transform: scale(1.07); }
body.form-in-view .wa-float { opacity: 0; pointer-events: none; transform: scale(.8); }

/* ---------- video modal ---------- */
.modal { border: 0; padding: 0; background: transparent; width: min(1100px, 92vw); max-height: 92vh; overflow: visible; }
.modal::backdrop { background: rgba(14, 19, 19, .82); }
.modal__frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; }
.modal video { width: 100%; height: auto; max-height: 84vh; display: block; }
.modal__close { position: absolute; top: -3.4rem; right: 0; color: #fff; border-color: rgba(255, 255, 255, .6); }
.modal__title { color: #fff; margin: 0 0 .8rem; font-size: .95rem; font-weight: 600; }

/* ---------- misc ---------- */
.img-missing { display: grid; place-items: center; min-height: 12rem; padding: 1rem; background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 10px, var(--ivory) 10px, var(--ivory) 20px); color: var(--ink-soft); font-size: .85rem; text-align: center; border-radius: var(--radius); }
.notice { padding: 1rem 1.2rem; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font-size: .9rem; color: var(--ink-soft); }
.split-cta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.chip-row { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-row button { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-size: .88rem; font-weight: 600; }
.chip-row button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- reveal motion (enhancement only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { transform: translateY(16px); transition: transform 500ms var(--ease-out); transition-delay: var(--d, 0ms); }
  /* Keep pending images unclipped so IntersectionObserver can detect them. */
  .reveal-ready [data-reveal="mask"] { transform: none; transition: none; }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  .reveal-ready [data-reveal="mask"].is-in { animation: lift 500ms var(--ease-out) both; }
  @keyframes reveal-mask {
    from { clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
    to { clip-path: inset(0 0 0 0 round 0); }
  }
  .hero__copy > * { animation: rise 900ms var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 90ms; }
  .hero__copy > :nth-child(3) { animation-delay: 180ms; }
  .hero__copy > :nth-child(4) { animation-delay: 270ms; }
  .hero__copy > :nth-child(5) { animation-delay: 360ms; }
  .rail__item { animation: rail-in 800ms var(--ease-out) both; }
  .rail__item:nth-child(1) { animation-delay: 300ms; } .rail__item:nth-child(2) { animation-delay: 380ms; } .rail__item:nth-child(3) { animation-delay: 460ms; } .rail__item:nth-child(4) { animation-delay: 540ms; } .rail__item:nth-child(5) { animation-delay: 620ms; }
  .hero__media img { animation: settle 1800ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes rail-in { from { opacity: 0; transform: translateX(calc(var(--arc, 0px) + 40px)); } to { transform: translateX(var(--arc, 0px)); } }
@keyframes settle { from { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rail__arc .rail__trace { stroke-dashoffset: 0; }
}

@media print {
  .site-header, .site-footer, .wa-float, .cta-band, .article-enquiry, .article__toc { display: none !important; }
  body { background: #fff; }
}

/* selected-work column placement (desktop only) */
@media (min-width: 901px) {
  .work-item--c7 { grid-column: 7 / span 3; }
  .work-item--c10 { grid-column: 10 / span 3; }
}
.post-card--row a { grid-template-areas: "media meta" "media title" "media more"; grid-template-rows: auto auto 1fr; align-items: start; row-gap: .3rem; }
.post-card--row .post-card__media { grid-area: media; }
.post-card--row .post-card__meta { grid-area: meta; margin: 0; }
.post-card--row .post-card__title { grid-area: title; }
.post-card--row .post-card__more { grid-area: more; margin-top: .3rem; align-self: start; }
@media (max-width: 480px) { .post-card--row a { grid-template-areas: "media" "meta" "title" "more"; } }
.logo-wall { background: var(--white); gap: 0; }
.logo-wall li { box-shadow: 0 0 0 .5px var(--line); }
.reason p { text-align: left; }
@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__media { padding-left: 1.5rem; }
  .badge-ring { right: -.4rem; top: -2rem; }
  .explorer__dot { display: none; }
}
@media (max-width: 480px) { .intro__caption { position: static; max-width: none; margin-top: 1rem; } .intro__media { padding-bottom: 0; } .intro__inset { position: relative; width: 52%; margin-top: -30%; } }
@media (max-width: 600px) { .quote__text { text-align: left; font-size: 1.35rem; } }

/* services overview index */
.svc-index { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.svc-index__item { border-bottom: 1px solid var(--line); }
.svc-index__item a { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: center; padding: clamp(1.4rem, 2.5vw, 2.4rem) 0; text-decoration: none; }
.svc-index__item:nth-child(even) a { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.svc-index__item:nth-child(even) .svc-index__media { order: 2; }
.svc-index__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--accent-bg); }
.svc-index__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.svc-index__item a:hover .svc-index__media img { transform: scale(1.05); }
.svc-index__no { font-family: var(--f-display); color: var(--accent); font-size: 1.1rem; }
.svc-index__name { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 3rem); line-height: 1.06; margin: .3rem 0 .8rem; transition: color var(--t-med); }
.svc-index__item a:hover .svc-index__name { color: var(--accent); }
.svc-index__body p { color: var(--ink-soft); max-width: 40rem; margin-bottom: 1rem; }
.svc-index .link-arrow { color: var(--accent); }
@media (max-width: 760px) { .svc-index__item a, .svc-index__item:nth-child(even) a { grid-template-columns: 1fr; } .svc-index__item:nth-child(even) .svc-index__media { order: 0; } }
.place-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.place-list a { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); text-decoration: none; font-family: var(--f-display); font-size: 1.5rem; transition: background var(--t-med), color var(--t-med); }
.place-list a:hover { background: var(--teal-strong); color: #fff; }

/* promotion */
.promo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem); }
.promo__card picture { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.promo__card figcaption { margin-top: .8rem; font-size: .86rem; color: var(--ink-soft); }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; } }

/* blog feature */
.feature-post a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: center; text-decoration: none; }
.feature-post__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--white); }
.feature-post__media img { transition: transform 900ms var(--ease-out); }
.feature-post a:hover .feature-post__media img { transform: scale(1.03); }
.feature-post__title { font-family: var(--f-display); font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3.1rem); line-height: 1.08; text-wrap: balance; }
.feature-post__excerpt { color: var(--ink-soft); margin: .8rem 0 1.2rem; }
.blog-tools .section-title { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.8rem); }
@media (max-width: 900px) { .feature-post a { grid-template-columns: 1fr; } }

/* contact extras + 404 */
.contact__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: .6rem; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact__item a + a { display: block; margin-top: .2rem; }
.contact__social { list-style: none; display: flex; gap: .6rem; padding-left: 4rem; }
.contact__social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.notfound { padding-top: calc(var(--header-h) + var(--space)); }
.notfound__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.notfound__media { border-radius: 240px 240px var(--radius-lg) var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.notfound__media img { width: 100%; height: 100%; object-fit: cover; }
.notfound__links { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2rem; }
.notfound__links a { font-weight: 700; color: var(--teal-deep); }
@media (max-width: 800px) { .notfound__grid { grid-template-columns: 1fr; } .notfound__media { max-width: 20rem; } }

/* pictures inside fixed-ratio frames fill their frame */
[class*="__media"] > picture, [class*="__frame"] > picture, [class*="__main"] > picture, [class*="__inset"] > picture,
.preview__img > picture, .gallery figure > picture, .about-band > picture, .reasons__figure > picture, .contact__photo > picture,
.region-text__media figure > picture, .svc-intro__media > picture { width: 100%; height: 100%; }
.work-item__media--logo > picture { height: auto; }
.article__hero picture, .feature-post__media > picture, .promo__card picture, .timeline__media > picture { height: auto; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist li { padding-left: .2em; }
.wide-figure { max-width: 64rem; margin-inline: auto; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .btn { white-space: normal; text-align: left; line-height: 1.3; } .page-hero .actions .btn { width: 100%; justify-content: space-between; } }

/* very large displays: let the layout breathe across the viewport */
@media (min-width: 2200px) {
  :root { --gutter: 6vw; --wrap-wide: calc(100% - 2 * var(--gutter)); --wrap: min(100% - 2 * var(--gutter), 92rem); }
}
.skip-link { top: 12px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width: 1080px) and (min-width: 760px) {
  .hero__shade { background: linear-gradient(90deg, rgba(20, 27, 27, .86) 0%, rgba(20, 27, 27, .7) 50%, rgba(20, 27, 27, .35) 100%), linear-gradient(180deg, rgba(20, 27, 27, .5), rgba(20, 27, 27, 0) 20%); }
}
/* above-the-fold entrance on inner pages: transform only, so content paints immediately (LCP) */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__copy > *, .article__head > * { animation: lift 800ms var(--ease-out) both; }
  .page-hero__copy > :nth-child(2), .article__head > :nth-child(2) { animation-delay: 70ms; }
  .page-hero__copy > :nth-child(3), .article__head > :nth-child(3) { animation-delay: 140ms; }
  .page-hero__copy > :nth-child(4) { animation-delay: 210ms; }
  .page-hero__media img, .article__hero img, .about-band img, .feature-post__media img { animation: settle 1400ms var(--ease-out) both; }
}
@keyframes lift { from { transform: translateY(18px); } }

/* ---------- founder card (home) ---------- */
.person__card { position: relative; margin: -2.6rem 1rem 0; padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow); text-align: center; }
.person__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: 999px; background: var(--teal-deep); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.person__badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold); }
.person__card .person__name { margin: .8rem 0 .5rem; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.person__card .person__role { margin: 0; line-height: 1.6; text-wrap: balance; }
.person__card :is(.person__name, .person__role) { text-align: center; text-align-last: auto; }

/* ---------- post cards: blog listing, latest insights, keep reading ---------- */
.post-card a { height: 100%; padding: .7rem .7rem 1.3rem; border-radius: calc(var(--radius) + 6px); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.post-card a:hover, .post-card a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--teal-strong), var(--shadow); }
.post-card__media { position: relative; border-radius: var(--radius); }
.post-card__meta, .post-card__title, .post-card__more { padding-inline: .6rem; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.post-card__meta time { padding: .2rem .6rem; border-radius: 999px; background: var(--accent-bg); color: var(--teal-deep); font-weight: 700; }
.post-card--feature a { padding: .8rem .8rem 1.6rem; }
.post-card--feature .post-card__media { border-radius: calc(var(--radius-lg) - 8px); }
.post-card--feature .post-card__meta, .post-card--feature .post-card__title, .post-card--feature .post-card__more { padding-inline: 1rem; }
.post-card--row a { padding: .6rem 1rem .6rem .6rem; column-gap: 1.2rem; align-items: center; }
.post-card--row .post-card__media { aspect-ratio: auto; height: 100%; min-height: 9rem; align-self: stretch; }
.post-card--row .post-card__meta, .post-card--row .post-card__title, .post-card--row .post-card__more { padding-inline: 0; }
.post-card--row .post-card__meta { align-self: end; padding-top: .4rem; }
.magazine__side { gap: clamp(1rem, 1.8vw, 1.6rem); }
.insights .magazine__side .post-card a { padding-block: .6rem; }
.feature-post__media { border: 8px solid var(--white); }
.article__hero picture { display: block; aspect-ratio: 16 / 8; border: 10px solid var(--white); }
.article__hero img { height: 100%; object-fit: cover; }

/* ---------- services hero note ---------- */
.page-hero__note { position: absolute; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: .9rem; max-width: 19rem; padding: .9rem 1.1rem; border-radius: var(--radius); background: rgba(255, 252, 247, .95); box-shadow: var(--shadow-soft); font-size: .86rem; line-height: 1.4; color: var(--ink); }
.page-hero__note strong { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--teal-deep); color: #fff; font-family: var(--f-body); font-size: 1.25rem; line-height: 1; font-weight: 800; }
@media (max-width: 560px) { .page-hero__note { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } }

/* ---------- contact ---------- */
.contact__photo { position: relative; box-shadow: var(--shadow); }
.contact__photo-note { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .95rem; border-radius: 999px; background: rgba(255, 252, 247, .95); box-shadow: var(--shadow-soft); font-size: .82rem; font-weight: 700; }
.contact__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #1F9D6B; box-shadow: 0 0 0 4px rgba(31, 157, 107, .18); }
.contact__item { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) var(--ease); }
.contact__item:hover { box-shadow: 0 0 0 1px var(--teal-strong), var(--shadow-soft); }
.contact__icon { background: var(--accent-bg); box-shadow: none; }
.contact__info { gap: 1rem; }
.contact__social { padding-left: 0; margin-top: .4rem; }

/* ---------- services picker (enquiry form) ---------- */
.svc-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.svc-pick__box { border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.svc-pick__box[open] { background: #fff; border-color: var(--teal-strong); box-shadow: 0 0 0 3px rgba(8, 121, 140, .12); }
.svc-pick summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.svc-pick summary::-webkit-details-marker { display: none; }
.svc-pick summary > span { display: grid; gap: .15rem; }
.svc-pick__label { font-size: .86rem; font-weight: 700; }
.svc-pick__count { font-size: .9rem; color: var(--ink-soft); }
.svc-pick__count.is-set { color: var(--teal-deep); font-weight: 700; }
.svc-pick summary .icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--teal-deep); transition: transform var(--t-med) var(--ease); }
.svc-pick__box[open] summary .icon { transform: rotate(45deg); }
.svc-pick__list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .2rem 1rem 1rem; }
.svc-pick__box[open] .svc-pick__list { animation: svc-drop 260ms var(--ease-out); }
@keyframes svc-drop { from { opacity: 0; transform: translateY(-6px); } }
.svc-pick__opt { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: .9rem; font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.svc-pick__opt:hover { border-color: var(--teal-strong); }
.svc-pick__opt input { flex: none; width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--teal-strong); box-shadow: none; }
.svc-pick__opt:has(input:checked) { border-color: var(--teal-strong); background: var(--accent-bg); color: var(--teal-deep); font-weight: 700; }
.svc-pick__opt:has(input:focus-visible) { outline: 2px solid var(--teal-strong); outline-offset: 2px; }
@media (max-width: 620px) { .svc-pick__list { grid-template-columns: 1fr; } }

/* ---------- find us (about) ---------- */
.find-us__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: stretch; }
.find-us__card { padding: clamp(1.6rem, 3.5vw, 3rem); border-radius: var(--radius-lg); background: var(--charcoal); color: #fff; }
.find-us__card .eyebrow { color: var(--gold); }
.find-us__card .section-title { color: #fff; }
.find-us__card .section-title em { color: var(--teal-light); }
.find-us__addr { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; margin-top: 1.6rem; font-style: normal; font-size: 1.05rem; line-height: 1.5; }
.find-us__addr .contact__icon { background: rgba(255, 255, 255, .1); color: var(--teal-light); }
.find-us__links { list-style: none; display: grid; gap: .6rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.find-us__links a { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.find-us__links a:hover { color: var(--teal-light); }
.find-us__links .icon { width: 1.1rem; height: 1.1rem; color: var(--teal-light); flex: none; }
.find-us__card .actions { margin-top: 1.8rem; }
.find-us__map { aspect-ratio: auto; min-height: 26rem; }
@media (max-width: 900px) { .find-us__grid { grid-template-columns: 1fr; } .find-us__map { min-height: 20rem; } }

/* ---------- your digital partner (home) ---------- */
.reasons__collage { position: relative; margin-top: 2.4rem; max-width: 30rem; padding: 0 0 3.5rem; }
.reasons__collage .reasons__figure { margin-top: 0; max-width: none; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.reasons__inset { position: absolute; right: -1.5rem; bottom: 0; width: 42%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--charcoal); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.reasons__inset > picture { display: block; height: 100%; }
.reasons__inset img { width: 100%; height: 100%; object-fit: cover; }
.reasons__chip { position: absolute; left: 1rem; bottom: 1.6rem; display: flex; align-items: center; gap: .75rem; margin: 0; padding: .7rem 1rem .7rem .7rem; border-radius: 999px; background: var(--white); color: var(--ink); font-size: .8rem; font-weight: 700; line-height: 1.25; box-shadow: var(--shadow); }
.reasons .reasons__chip { max-width: none; margin-top: 0; color: var(--ink); }
.reasons__chip strong { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--teal-deep); color: #fff; font-size: 1.15rem; }
.reasons__list:has(.reason--card) { gap: clamp(.9rem, 1.6vw, 1.4rem); }
.reason--card { position: relative; padding: 1.6rem 1.5rem 1.7rem; border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.reason--card:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(97, 211, 228, .45); transform: translateY(-3px); }
.reason--card .reason__no { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(200, 168, 120, .14); color: var(--gold); font-family: var(--f-body); font-size: .85rem; font-weight: 800; letter-spacing: .04em; }
.reason--card h3 { margin-top: 1rem; }
.reason--card:hover .reason__no { background: var(--teal-strong); color: #fff; }
@media (max-width: 900px) { .reasons__inset { right: 0; } }

/* ---------- client logo marquee ---------- */
.marquee { display: grid; gap: clamp(.8rem, 1.4vw, 1.2rem); padding-block: .6rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__row { --gap: clamp(.8rem, 1.4vw, 1.2rem); --speed: calc(var(--count) * 3.6s); display: flex; gap: var(--gap); width: max-content; }
.marquee__track { list-style: none; display: flex; gap: var(--gap); flex: none; animation: marquee var(--speed) linear infinite; }
.marquee__row--reverse .marquee__track { animation-direction: reverse; }
.marquee__row:hover .marquee__track, .marquee__row:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
.marquee__logo { display: grid; place-items: center; width: clamp(9rem, 14vw, 12.5rem); aspect-ratio: 16 / 8; padding: 1rem 1.3rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -20px rgba(28, 35, 34, .45); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.marquee__logo picture { display: contents; }
.marquee__logo img { max-height: 3.2rem; width: auto; max-width: 100%; object-fit: contain; transition: transform var(--t-med) var(--ease); }
.marquee__logo:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--teal-strong), var(--shadow-soft); }
.marquee__logo:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__track { animation: none; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; }
  .marquee__track[aria-hidden] { display: none; }
}

/* ======================================================================
   UI/UX pass — November 2026
   ====================================================================== */

/* ---------- home hero: shorter on phones ---------- */
.rail__caption { display: inline-block; margin-left: 3.3rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(20, 27, 27, .62); color: #fff; backdrop-filter: blur(6px); }
@media (max-width: 759px) {
  .hero-services, .hero__band { display: none; }
  .hero__inner { padding-bottom: 3rem; }
  .intro { padding-top: var(--space); }
  .curve-top::before { display: none; }
}

/* ---------- floating WhatsApp button ---------- */
@media (max-width: 759px) {
  .wa-float { width: 3rem; height: 3rem; right: 12px; bottom: 12px; }
  .wa-float .icon { width: 1.4rem; height: 1.4rem; }
  .js body:not(.wa-ready) .wa-float { opacity: 0; pointer-events: none; transform: scale(.8); }
  body.page-contact .wa-float { display: none; }
  .site-footer { padding-bottom: 5rem; }
}

/* ---------- map with overlaid address card ---------- */
.map--live { position: relative; aspect-ratio: auto; min-height: 26rem; background: var(--paper); }
.map--live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map--live .map__card { position: absolute; right: clamp(.8rem, 2vw, 1.4rem); top: clamp(.8rem, 2vw, 1.4rem); z-index: 1; max-width: 26rem; }
.map__card { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; max-width: 34rem; padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); }
.map__title { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; margin-bottom: .3rem; }
.map__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 1rem; }

/* ---------- home: services list shows titles only on small screens ---------- */
@media (max-width: 900px) {
  .js .explorer__desc, .explorer__desc { display: none; }
  .explorer__link { padding-block: 1rem; }
}

/* ---------- home: reasons become a swipeable row on phones ---------- */
.reasons__hint { display: none; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .82rem; color: rgba(255, 255, 255, .62); }
.reasons__hint .icon { width: 1rem; height: 1rem; }
@media (max-width: 620px) {
  .reasons__list { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: .3rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .reasons__list::-webkit-scrollbar { display: none; }
  .reasons__list .reason--card { flex: 0 0 82%; scroll-snap-align: start; }
  .reasons__list .reason--card:hover { transform: none; }
  .reasons__hint { display: flex; }
  .reasons__collage { max-width: 22rem; }
}

/* ---------- testimonials ---------- */
.voices__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); }
.voices__head .section-head { margin-bottom: 0; }
.voices__grid > *, .voices__panels > * { min-width: 0; }
@media (max-width: 860px) {
  .js .voices .quote[hidden] { display: none; }
  .voices .quote { padding: 1.4rem 1.3rem; }
  .voices .quote__mark { width: 2rem; height: 2rem; margin-bottom: .7rem; }
  .voices .quote__text { font-size: 1.12rem; line-height: 1.5; margin-bottom: 1rem; }
  .voices .quote footer { padding-top: 1rem; }
}

/* ---------- trust badge (Google reviews) ---------- */
.trust-badge { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; transition: box-shadow var(--t-fast); }
.trust-badge:hover { box-shadow: 0 0 0 1px var(--teal-strong), var(--shadow-soft); }
.trust-badge__stars { display: inline-flex; color: #E8A317; }
.trust-badge__stars .icon { width: 1rem; height: 1rem; }
.trust-badge strong { font-weight: 800; }
.contact__info .trust-badge { justify-self: start; }

/* ---------- client logos ---------- */
.marquee__logo { padding: .8rem 1rem; }
.marquee__logo img { max-height: 3.6rem; }
@media (prefers-reduced-motion: reduce) {
  .marquee { grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 42vw), 1fr)); }
  .marquee__row, .marquee__track { display: contents; }
  .marquee__logo { width: auto; }
}

/* ---------- home work card: logo with breathing room ---------- */
.work-card__media--logo picture { padding: 8% 14%; }
.work-card__media--logo img { width: auto; max-width: 100%; max-height: 72%; }

/* ---------- blog listing ---------- */
.blog-topics { margin: -1rem 0 1.4rem; }
.blog-more { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- article ---------- */
.article__layout { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.article__main { grid-column: 2; min-width: 0; }
.article__main .article__body { max-width: none; }
.article__body > h2:first-child { margin-top: 0; }
@media (max-width: 1180px) { .article__main { grid-column: 1; } }
.share--head { margin-top: 1.3rem; }
.article__toc-mobile { display: none; margin-bottom: 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 1180px) { .article__toc-mobile:not([hidden]) { display: block; } }
.article__toc-mobile summary { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; cursor: pointer; list-style: none; font-weight: 700; font-size: .92rem; }
.article__toc-mobile summary::-webkit-details-marker { display: none; }
.article__toc-mobile summary .icon { transition: transform var(--t-med) var(--ease); }
.article__toc-mobile[open] summary .icon { transform: rotate(180deg); }
.article__toc-mobile ol { list-style: none; margin: 0; padding: 0 1.1rem 1rem; display: grid; gap: .1rem; font-size: .9rem; }
.article__toc-mobile a { display: block; padding: .4rem 0; color: var(--ink-soft); text-decoration: none; border-top: 1px solid var(--line); }
.prose .article-cta { margin: 2.6em 0; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-lg); background: var(--teal-deep); color: #fff; }
.prose .article-cta .eyebrow { color: var(--peach); margin-bottom: .6rem; }
.prose .article-cta__title { font-family: var(--f-display); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; margin: 0; }
.prose .article-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin-top: 1.3rem; }
.prose .article-cta .btn { --btn-bg: var(--white); --btn-fg: var(--ink); --disc-bg: var(--teal-deep); text-decoration: none; font-weight: 700; }
.prose .article-cta .link-arrow { color: #fff; text-decoration: none; }

/* ---------- forms ---------- */
.field__hint { font-size: .8rem; color: var(--ink-soft); }
.field input::placeholder { color: rgba(84, 91, 89, .6); }
.svc-pick__label { display: block; margin-bottom: .55rem; font-size: .86rem; font-weight: 700; padding: 0; }
.svc-pick .svc-pick__list { padding: 0; }
.svc-pick__opt { border-radius: 999px; padding: .5rem .85rem; }

/* ---------- footer ---------- */
.footer__hours { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; margin: 0; }
.footer__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.8rem; }
.site-footer .trust-badge { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.site-footer .trust-badge:hover { box-shadow: inset 0 0 0 1px var(--teal-light); }

/* ---------- header CTA fits beside the nav on mid-size screens ---------- */
@media (max-width: 1320px) and (min-width: 1081px) {
  .header-cta { padding-left: .9rem; font-size: .84rem; }
  .nav__list { gap: 1.1rem; }
}
.footer__actions .icon { margin-top: 0; color: inherit; }
.footer__actions .trust-badge__stars .icon { color: #E8A317; }
.voices .quote { margin: 0; }
.svc-pick .svc-pick__list { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 560px) {
  .map__card { grid-template-columns: 1fr; padding: 1.2rem; }
  .map__card > .contact__icon { display: none; }
  .map--live { display: flex; flex-direction: column; min-height: 0; }
  .map--live iframe { position: static; height: 18rem; }
  .map--live .map__card { position: static; max-width: none; border-radius: 0; box-shadow: none; }
}
.blog-more[hidden], .chip-row[hidden], .article__toc-mobile[hidden] { display: none; }

/* Focused history, service photography and enquiry updates. */
.history-gallery { padding-top: 0; }
.gallery--editorial { grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(7, clamp(3rem, 5vw, 5.3rem)); grid-auto-rows: auto; }
.gallery--editorial .g1 { grid-area: 1 / 1 / 5 / 15; }
.gallery--editorial .g2 { grid-area: 1 / 15 / 4 / 25; }
.gallery--editorial .g3 { grid-area: 4 / 15 / 8 / 20; }
.gallery--editorial .g4 { grid-area: 4 / 20 / 8 / 25; }
.gallery--editorial .g5 { grid-area: 5 / 1 / 8 / 9; }
.gallery--editorial .g6 { grid-area: 5 / 9 / 8 / 15; }
.gallery--editorial .g3 img, .gallery--editorial .g4 img { object-fit: contain; background: var(--paper); }
.gallery__note { margin-top: 1rem; color: var(--ink-soft); font-size: .8rem; }
.timeline__year { display: grid; place-items: center; min-height: 12rem; background: var(--paper); border: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(4rem, 8vw, 7rem); color: var(--teal-deep); }
.timeline__state { display: inline-block; margin-top: .6rem; padding: .25rem .7rem; border: 1px solid var(--gold-ink); border-radius: 999px; font-size: .78rem; color: var(--gold-ink); }
.timeline__item--planned .timeline__year { border-style: dashed; color: var(--gold-ink); }
.timeline__item--planned::after { background: var(--paper); border: 2px solid var(--gold-ink); }
.page-hero--photo { position: relative; isolation: isolate; }
.page-hero--photo .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
.page-hero--photo .page-hero__copy { position: relative; z-index: 1; max-width: 43rem; width: 58%; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 252, 247, .98); box-shadow: var(--shadow-soft); }
.page-hero--photo .page-hero__media { position: absolute; z-index: -1; inset: 0 0 0 35%; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.page-hero--photo .page-hero__media > picture { height: 100%; }
.page-hero--photo .page-hero__media img { width: 100%; height: 100%; object-fit: cover; animation: none; }
.page-hero--photo .page-hero__note { right: 2rem; max-width: 17rem; }
.service-consultation { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.service-consultation__image { position: absolute; inset: 0; z-index: -1; }
.service-consultation__image img { width: 100%; height: 100%; object-fit: cover; }
.service-consultation__copy { max-width: 35rem; padding: clamp(1.5rem, 4vw, 3rem); background: rgba(255,252,247,.98); border-radius: var(--radius-lg); }
.service-consultation__copy > p:not(.eyebrow) { margin-top: 1.2rem; }
.form__foot .form__note { flex-basis: 100%; }
.form__foot .form__whatsapp {
  justify-content: center;
  gap: .65rem;
  max-width: 100%;
  padding: .8rem 1.3rem;
  color: var(--teal-deep);
  line-height: 1.4;
  white-space: normal;
}
.form__whatsapp > .icon { display: block; width: 1.1rem; height: 1.1rem; }
.form__whatsapp > span { min-width: 0; text-align: center; }
.form__whatsapp[hidden] { display: none; }
.form.is-busy button { opacity: .7; cursor: wait; }
@media (min-width: 600px) and (max-width: 999px) {
  .gallery--editorial { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; grid-auto-rows: auto; }
  .gallery.gallery--editorial figure { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 2; }
  .gallery--editorial .g1, .gallery--editorial .g2 { aspect-ratio: 3 / 2; }
  .gallery--editorial .g3, .gallery--editorial .g4 { aspect-ratio: 2 / 3; }
}
@media (max-width: 599px) {
  .gallery--editorial { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; grid-auto-rows: auto; gap: .8rem; }
  .gallery.gallery--editorial figure { grid-area: auto !important; grid-row: auto !important; grid-column: 1 / -1 !important; aspect-ratio: 3 / 2; }
  .gallery.gallery--editorial .g3, .gallery.gallery--editorial .g4 { grid-column: auto !important; aspect-ratio: 2 / 3; }
}
@media (max-width: 999px) {
  .page-hero--photo { padding-bottom: 0; }
  .page-hero--photo .page-hero__copy { width: 100%; max-width: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .page-hero--photo .page-hero__media { position: relative; z-index: 0; inset: auto; width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); height: clamp(16rem, 48vw, 28rem); }
  .page-hero--photo .page-hero__note { right: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery img { transition: none; }
  .gallery figure:hover img { transform: none; }
}

/* White backgrounds for the requested About and Blog introduction sections. */
.page-about .page-hero,
.page-about .about-values,
.page-blog .page-hero { background: #FFFFFF; }

/* Justify reading copy across all pages, including page-specific stylesheets.
   Keep short labels, metadata, prices and decorative display lines aligned as designed. */
body p:not(
  .eyebrow, .pf-kicker, .prom-note-title, .band-strap, .footer__line,
  .person__name, .person__role,
  .form__status, .blog-count, .pf-project-category, .pf-service,
  [class*="__meta"], [class*="__price"], [class*="__qualifier"],
  [class*="__no"], [class*="__count"], [class*="__title"], [class*="__cred"]
),
body .prose li,
body .ticks li {
  text-align: justify !important;
  text-align-last: start;
  text-justify: inter-word;
}