/* Brand controls: update these variables to swap in the owner's final palette. */
:root {
  --color-ink: #151b28;
  --color-ink-soft: #4c5362;
  --color-paper: #f7f4ed;
  --color-paper-deep: #eeeadf;
  --color-white: #fffefa;
  --color-line: #d6d5d3;
  --color-accent: #1746b2;
  --color-accent-deep: var(--color-accent);
  --color-accent-soft: #dbe5ff;
  --color-highlight: #d3a11f;
  --color-highlight-soft: #f4e3aa;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --shell: 1240px;
  --shadow-soft: 0 24px 70px rgba(21, 27, 40, .12);
  --shadow-photo: 0 32px 90px rgba(12, 31, 78, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-paper); scroll-padding-top: 92px; }  /* clears the sticky header so anchored sections land flush under it rather than behind it */
html.lightbox-open { overflow: hidden; }
body { margin: 0; overflow-x: hidden; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { display: block; }
::selection { color: var(--color-white); background: var(--color-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; color: var(--color-white); background: var(--color-accent); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.utility-bar { color: #f8f5ed; background: var(--color-accent-deep); font-size: 12px; letter-spacing: .03em; }
.utility-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-inner p { margin: 0; }
.utility-inner div { display: flex; align-items: center; gap: 26px; }
.utility-inner a { color: #fff; font-weight: 700; }
.utility-inner span { color: #cad6f3; }
.utility-brief { display: none; }
.site-header { position: sticky; z-index: 90; top: 0; border-bottom: 1px solid rgba(21, 27, 40, .1); background: rgba(247, 244, 237, .94); backdrop-filter: blur(18px); }
.header-inner { min-height: 92px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 46px; }
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; }
.brand-mark { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; color: var(--color-accent); }
.brand-mark svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-family: var(--font-display); font-size: 23px; line-height: .95; font-weight: 600; }
.brand small { display: block; margin-top: 5px; color: var(--color-ink-soft); font-size: 9px; font-weight: 700; letter-spacing: .19em; line-height: 1; text-transform: uppercase; }
.site-nav { display: flex; justify-content: center; gap: clamp(22px, 3vw, 42px); }
.site-nav a { position: relative; padding-block: 8px; color: #394150; font-size: 13px; font-weight: 600; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-legal { display: none; }  /* only appears in the mobile dropdown */
.menu-toggle { display: none; border: 0; background: none; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; border: 1px solid var(--color-accent); color: var(--color-white); background: var(--color-accent); font-size: 13px; font-weight: 700; letter-spacing: .01em; transition: color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease; }
.button:hover { color: var(--color-accent); background: transparent; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23, 70, 178, .16); }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-small { min-height: 44px; padding: 0 19px; }
.button-light { border-color: var(--color-white); color: var(--color-accent-deep); background: var(--color-white); }
.button-light:hover { color: var(--color-white); background: transparent; }
.button-outline { color: var(--color-accent); background: transparent; }
.button-outline:hover { color: var(--color-white); background: var(--color-accent); }
/* Primary call to action. Gold reads ahead of the blue and white buttons, and
   dark ink on gold clears AA contrast comfortably. */
.button-cta { border-color: var(--color-highlight); color: var(--color-ink); background: var(--color-highlight); box-shadow: 0 14px 30px rgba(211, 161, 31, .26); }
.button-cta:hover { border-color: var(--color-highlight-soft); color: var(--color-ink); background: var(--color-highlight-soft); box-shadow: 0 18px 38px rgba(211, 161, 31, .34); }
.button-cta svg { fill: currentColor; stroke: none; }
.text-link, .arrow-link { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 700; }
.text-link { padding-block: 10px; border-bottom: 1px solid currentColor; }
.text-link span, .arrow-link span { transition: transform .3s ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.arrow-link { color: var(--color-accent); }
.arrow-link:hover span { transform: translateX(5px); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.hero { min-height: 0; padding: 72px 0 85px; background: var(--color-white); }
.hero-layout { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(55px, 8vw, 115px); }
.hero-copy { position: relative; z-index: 2; padding: 30px 0; }
.review-line { width: max-content; min-width: 286px; display: flex; align-items: center; gap: 18px; margin-bottom: 42px; padding: 13px 18px 13px 14px; border: 1px solid var(--color-line); border-bottom: 3px solid var(--color-highlight); background: rgba(255,254,250,.62); box-shadow: 0 9px 26px rgba(21,27,40,.07); }
.review-score { color: var(--color-accent); font-family: var(--font-body); font-size: 47px; font-weight: 600; letter-spacing: -.055em; line-height: .8; }
.review-meta { display: grid; gap: 3px; color: var(--color-ink-soft); font-size: 11px; line-height: 1.2; }
.review-line .stars { color: var(--color-highlight); font-size: 13px; letter-spacing: .11em; }
.kicker { margin: 0 0 18px; color: var(--color-accent); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.kicker::before { content: ""; width: 34px; height: 1px; display: inline-block; margin: 0 13px 3px 0; background: currentColor; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.045em; line-height: .92; }
h1 { max-width: 720px; font-size: clamp(70px, 7.3vw, 112px); }
h2 { font-size: clamp(52px, 5.5vw, 82px); }
h1 em, h2 em { color: var(--color-accent); font-weight: 500; }
.hero-intro { max-width: 590px; margin: 32px 0; color: var(--color-ink-soft); font-size: 18px; line-height: 1.75; }
.hero-note { display: flex; align-items: center; margin-top: 42px; padding-left: 18px; border-left: 2px solid var(--color-highlight); }
.hero-note p { margin: 0; color: var(--color-ink-soft); font-size: 12px; line-height: 1.55; }
.hero-note strong { color: var(--color-ink); }
.monogram { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-accent); font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.hero-visual { position: relative; width: min(100%, 510px); margin: 0 0 0 auto; padding: 0 18px 18px 0; }
.hero-image-wrap { position: relative; height: 480px; overflow: hidden; box-shadow: var(--shadow-photo); }
.hero-image-wrap img { height: 100%; object-fit: cover; object-position: center 62%; }
.hero-image-caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 18px; padding: 21px 25px; color: var(--color-white); background: linear-gradient(90deg, rgba(8,28,80,.95), rgba(8,28,80,.78)); backdrop-filter: blur(8px); }
.hero-image-caption p { margin: 0; line-height: 1.3; }
.hero-image-caption strong, .hero-image-caption small { display: block; }
.hero-image-caption strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.hero-image-caption small { margin-top: 3px; color: #d8e1f6; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gold-rule { position: absolute; z-index: -1; right: 0; bottom: 0; width: 68%; height: 70%; border-right: 1px solid var(--color-highlight); border-bottom: 1px solid var(--color-highlight); }
.trust-ledger { color: var(--color-white); background: var(--color-accent-deep); }
.ledger-grid { display: flex; align-items: center; min-height: 108px; padding: 0; background: var(--color-accent-deep); overflow: hidden; }
.ledger-grid div { position: relative; min-width: 0; flex: 1 1 25%; display: flex; flex-direction: column; justify-content: center; padding: 18px clamp(12px, 2.8vw, 34px); background: transparent; }
.ledger-grid div:first-child { padding-left: clamp(28px, 4vw, 48px); }
.ledger-grid div:first-child::before { content: "★"; position: absolute; top: 50%; left: clamp(10px, 1.7vw, 22px); color: var(--color-highlight); font-size: 15px; transform: translateY(-54%); }
.ledger-grid div:not(:first-child)::before { content: "•"; position: absolute; top: 50%; left: 0; color: var(--color-highlight); font-size: 18px; transform: translate(-50%, -54%); }
.ledger-grid strong { font-family: var(--font-display); font-size: clamp(23px, 3vw, 38px); font-weight: 500; line-height: 1; white-space: nowrap; }
.ledger-grid span { margin-top: 5px; color: #c1cdec; font-size: clamp(7px, .7vw, 10px); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.service-map-link { padding: 30px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-white); }
.service-map-link-inner { display: flex; align-items: center; gap: 28px; }
.service-map-link .kicker { flex: 0 0 auto; margin: 0; }
.service-map-link-inner > p:not(.kicker) { margin: 0 auto 0 0; color: var(--color-ink-soft); font-size: 13px; }
.service-map-link .button { min-height: 46px; padding-inline: 20px; }
.section { padding: 130px 0; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: end; gap: 90px; margin-bottom: 70px; }
.section-heading > p { max-width: 470px; margin: 0 0 7px; color: var(--color-ink-soft); font-size: 16px; line-height: 1.8; }
.section-heading.compact { margin-bottom: 55px; }
.service-intro { background: var(--color-white); }
.service-feature { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 640px; box-shadow: var(--shadow-soft); }
.service-photo { min-height: 100%; overflow: hidden; }
.service-photo img { width: 104%; max-width: none; height: 100%; margin-left: -4%; object-fit: cover; object-position: center 58%; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.service-feature:hover .service-photo img { transform: scale(1.035); }
.service-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 90px); background: var(--color-paper); }
.service-number { margin: 0 0 27px; color: var(--color-highlight); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.service-panel h3 { max-width: 480px; margin: 0; font-family: var(--font-display); font-size: clamp(42px, 4vw, 62px); font-weight: 500; letter-spacing: -.035em; line-height: .98; }
.service-panel > p:not(.service-number) { margin: 25px 0; color: var(--color-ink-soft); line-height: 1.8; }
.clean-list { display: grid; gap: 12px; margin: 0 0 34px; padding: 24px 0 0; border-top: 1px solid var(--color-line); list-style: none; }
.clean-list li { position: relative; padding-left: 25px; font-size: 13px; font-weight: 600; }
.clean-list li::before { content: ""; position: absolute; top: .69em; left: 0; width: 12px; height: 1px; background: var(--color-highlight); }
.process-section { background: var(--color-paper); }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 28px 0 12px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.process-grid::before { content: ""; position: absolute; z-index: 0; top: 82px; right: 16.66%; left: 16.66%; border-top: 1px solid var(--color-highlight); }
.process-card { position: relative; min-height: 0; padding: 0 28px 18px; text-align: center; }
.process-card + .process-card { border-left: 1px solid var(--color-line); }
.process-card > span { position: relative; z-index: 1; display: block; margin-bottom: 9px; color: var(--color-highlight); font-family: var(--font-body); font-size: clamp(30px, 3.4vw, 38px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.line-icon { position: relative; z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 19px; border: 1px solid var(--color-highlight); border-radius: 50%; color: var(--color-accent); background: var(--color-paper); }
.line-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.process-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.process-card p { max-width: 270px; margin: 0 auto; color: var(--color-ink-soft); font-size: 12px; line-height: 1.65; }
.story-section { overflow: hidden; background: var(--color-white); }
.story-layout { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .77fr); align-items: center; gap: clamp(80px, 11vw, 150px); }
.story-collage { position: relative; min-height: 660px; }
.story-collage figure { margin: 0; box-shadow: var(--shadow-photo); }
.story-image-main { position: absolute; top: 0; left: 0; width: 68%; }
.story-image-main img { height: 550px; object-fit: cover; object-position: 48% 55%; }
.story-image-small { position: absolute; right: 0; bottom: 0; width: 45%; border: 10px solid var(--color-white); }
.story-image-small img { height: 340px; object-fit: cover; object-position: center 55%; }
.story-stamp { position: absolute; z-index: 3; right: 25%; bottom: 30px; width: 142px; height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid var(--color-white); border-radius: 50%; color: var(--color-white); background: var(--color-accent); text-align: center; }
.story-stamp strong { font-family: var(--font-display); font-size: 38px; font-weight: 500; line-height: 1; }
.story-stamp span { margin-top: 5px; font-size: 9px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.story-copy h2 { font-size: clamp(49px, 5vw, 72px); }
.story-copy > p:not(.kicker) { margin: 30px 0; color: var(--color-ink-soft); line-height: 1.9; }
.story-copy blockquote { margin: 36px 0; padding: 25px 0 25px 26px; border-left: 1px solid var(--color-highlight); color: var(--color-accent-deep); font-family: var(--font-display); font-size: 25px; font-style: italic; line-height: 1.35; }
.gallery-preview { background: var(--color-paper-deep); }
.preview-grid { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 340px 340px; gap: 18px; }
.preview-grid figure { position: relative; margin: 0; overflow: hidden; background: #d9d6cf; }
.preview-grid img { height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.preview-grid figure:hover img { transform: scale(1.035); }
.preview-tall { grid-row: 1 / 3; }
.preview-tall img { object-position: center 57%; }
.preview-wide img { object-position: center 68%; }
.preview-small img { object-position: center 50%; }
.preview-grid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 22px 25px; color: #fff; background: linear-gradient(transparent, rgba(7,20,58,.82)); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.service-area { padding: 105px 0; color: var(--color-white); background: var(--color-accent); }
.service-area-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 100px; }
.service-area h2 { color: #fff; }
.service-area h2 em { color: var(--color-highlight-soft); }
.service-area-inner > div:last-child > p { margin: 0 0 30px; color: #ced9f2; line-height: 1.85; }
.kicker.light { color: var(--color-highlight-soft); }
.light-link { color: #fff; }
.site-footer { padding: 80px 0 25px; background: var(--color-white); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 70px; padding-bottom: 70px; }
.footer-brand p { max-width: 310px; margin: 25px 0 0; color: var(--color-ink-soft); font-size: 13px; }
.footer-grid h2 { margin: 5px 0 22px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.footer-grid > div > p { color: var(--color-ink-soft); font-size: 13px; line-height: 1.9; }
.footer-links { display: grid; gap: 11px; color: var(--color-ink-soft); font-size: 13px; }
.footer-links a:hover { color: var(--color-accent); }
.footer-base { min-height: 62px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-line); color: #777c78; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: #777c78; }
.footer-legal a:hover { color: var(--color-accent); }

/* Privacy and terms: one readable column, nothing decorative. */
.legal-section { padding-top: 0; }
.legal-body > * { max-width: 760px; }  /* .legal-body is itself a .shell; narrowing it would re-centre the column away from the page heading */
.legal-body .legal-updated { margin: 0 0 34px; color: #777c78; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.legal-body h2 { margin: 40px 0 12px; font-family: var(--font-display); font-size: clamp(23px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--color-ink-soft); font-size: 14px; line-height: 1.8; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 19px; }
.legal-body li { margin-bottom: 7px; }
.legal-body strong { color: var(--color-ink); }
.legal-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.mobile-contact { display: none; }

/* Interior pages */
.page-hero { position: relative; overflow: hidden; padding: 105px 0 100px; border-bottom: 1px solid var(--color-line); background: var(--color-paper-deep); }
.page-hero::after { content: ""; position: absolute; top: -210px; right: -150px; width: 560px; height: 560px; border: 1px solid rgba(211,161,31,.35); border-radius: 50%; }
.page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .65fr; align-items: end; gap: 80px; }
.page-hero h1 { max-width: 850px; font-size: clamp(68px, 8vw, 116px); }
.page-hero h1 em { display: block; }
.page-hero-copy { margin: 0 0 8px; color: var(--color-ink-soft); font-size: 17px; line-height: 1.85; }
.page-intro { padding: 48px 0 44px; border-bottom: 1px solid var(--color-line); background: var(--color-paper-deep); }
.page-intro .breadcrumb { margin-bottom: 19px; }
.page-intro-line { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(320px, 1.3fr); align-items: end; gap: 70px; }
.page-intro h1 { font-size: clamp(48px, 5vw, 70px); line-height: .9; }
.page-intro-line p { max-width: 620px; margin: 0 0 2px; color: var(--color-ink-soft); font-size: 15px; line-height: 1.75; }
.breadcrumb { display: flex; gap: 9px; margin-bottom: 35px; color: #7a7e79; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.breadcrumb a:hover { color: var(--color-accent); }
.editorial-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); align-items: center; gap: clamp(60px, 10vw, 140px); }
.editorial-grid.reverse { grid-template-columns: minmax(400px, 1.1fr) minmax(0, .9fr); }
.editorial-grid.reverse .editorial-media { order: 2; }
.editorial-media { position: relative; padding: 0 24px 24px 0; }
.editorial-media::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 65%; height: 65%; border-right: 1px solid var(--color-highlight); border-bottom: 1px solid var(--color-highlight); }
.editorial-media img { height: 680px; object-fit: cover; box-shadow: var(--shadow-photo); }
.editorial-content h2 { font-size: clamp(50px, 5vw, 73px); }
.editorial-content > p:not(.kicker) { margin: 28px 0; color: var(--color-ink-soft); line-height: 1.9; }
.detail-list { margin: 34px 0; border-top: 1px solid var(--color-line); }
.detail-list div { display: grid; grid-template-columns: 52px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--color-line); }
.detail-list span { color: var(--color-highlight); font-family: var(--font-body); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.detail-list strong { font-size: 13px; }
.dark-panel { color: var(--color-white); background: var(--color-accent-deep); }
.dark-panel h2 { color: #fff; }
.dark-panel h2 em { color: var(--color-highlight-soft); }
.dark-panel .editorial-content > p:not(.kicker) { color: #cad6f3; }
.dark-panel .detail-list { border-color: rgba(255,255,255,.15); }
.dark-panel .detail-list div { border-color: rgba(255,255,255,.15); }
.dark-panel .editorial-media::after { border-color: var(--color-highlight-soft); }
.service-photo-banner { position: relative; height: 610px; overflow: hidden; }
.service-photo-banner img { height: 100%; object-fit: cover; object-position: center 42%; }
.service-photo-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,31,91,.8), rgba(7,31,91,.05) 65%); }
.service-photo-copy { position: absolute; z-index: 2; top: 50%; left: max(24px, calc((100% - var(--shell)) / 2)); width: min(530px, calc(100% - 48px)); color: #fff; transform: translateY(-50%); }
.service-photo-copy h2 { font-size: clamp(52px, 6vw, 82px); }
.service-photo-copy h2 em { color: var(--color-highlight-soft); }
.service-photo-copy p { color: #dbe3f7; }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { padding: 0; border-bottom: 1px solid var(--color-line); }
.faq-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 38px 20px 0; color: var(--color-ink); font-family: var(--font-display); font-size: 27px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 4px; color: var(--color-accent); font-family: var(--font-body); font-size: 25px; font-weight: 400; transform: translateY(-50%); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { height: 0; overflow: hidden; transition: height .21s ease-in-out; }
.faq-item p { max-width: 780px; margin: -2px 0 22px; color: var(--color-ink-soft); line-height: 1.8; }
.proof-band { padding: 80px 0; background: var(--color-highlight-soft); }
.proof-band-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 35px; }
.proof-score { color: var(--color-accent); font-family: var(--font-display); font-size: 78px; line-height: 1; }
.proof-band h2 { font-size: clamp(38px, 4vw, 56px); }
.proof-band p { margin: 8px 0 0; color: var(--color-ink-soft); }
.gallery-shell { padding: 80px 0 130px; background: var(--color-white); }
.gallery-intro { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.gallery-intro p { max-width: 600px; margin: 0; color: var(--color-ink-soft); }
.gallery-intro-actions { display: flex; align-items: center; gap: 28px; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-controls button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-accent); background: transparent; cursor: pointer; transition: .25s ease; }
.gallery-controls button:hover { color: var(--color-white); border-color: var(--color-accent); background: var(--color-accent); }
.gallery-grid { display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 24px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-highlight) var(--color-paper-deep); overscroll-behavior-inline: contain; }
.gallery-grid::-webkit-scrollbar { height: 6px; }
.gallery-grid::-webkit-scrollbar-track { background: var(--color-paper-deep); }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--color-highlight); }
.gallery-item { position: relative; flex: 0 0 clamp(285px, 29vw, 385px); margin: 0; overflow: hidden; background: var(--color-paper-deep); cursor: zoom-in; scroll-snap-align: start; }
.gallery-item img { height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.gallery-item:hover img { transform: scale(1.025); filter: saturate(1.04); }
.gallery-item:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: -3px; }
.gallery-item figcaption { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(8,28,80,.78); backdrop-filter: blur(6px); font-size: 13px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.gallery-item figcaption span:first-child { display: none; }
.gallery-hint { margin: 13px 0 0; color: #7c817d; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gallery-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: rgba(5,13,38,.98); overflow: hidden; }
.gallery-lightbox[open] { display: grid; grid-template-columns: 74px 1fr 74px; align-items: center; }
.gallery-lightbox::backdrop { background: rgba(5,13,38,.88); }
.lightbox-track { min-width: 0; height: 100dvh; display: flex; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-slide { height: 100%; flex: 0 0 100%; display: grid; place-items: center; padding: 58px 24px; scroll-snap-align: center; }
.lightbox-slide img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 116px); object-fit: contain; }
.lightbox-close, .lightbox-arrow { position: relative; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(255,255,255,.04); cursor: pointer; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; font-size: 28px; }
.lightbox-arrow { width: 48px; height: 48px; justify-self: center; font-size: 20px; }
.lightbox-counter { position: absolute; bottom: 22px; left: 50%; color: rgba(255,255,255,.75); font-size: 11px; font-weight: 700; letter-spacing: .14em; transform: translateX(-50%); }
.contact-section { padding: 56px 0; background: var(--color-white); }
.contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }  /* form first. The launch-stabilization block below collapses this to one column at every width, so in practice the form stacks above the direct-contact card. */
.contact-card, .form-card { padding: clamp(38px, 5vw, 65px); border: 1px solid var(--color-line); background: var(--color-paper); }
/* Carries the gold of the "Request Service Instantly" button through to
   the form it sends people to. */
.form-card { border-top: 3px solid var(--color-highlight); }
.contact-card { display: flex; flex-direction: column; }
.contact-card h2, .form-card h2 { font-size: clamp(44px, 4.5vw, 64px); }
.contact-card > p, .form-card > p { color: var(--color-ink-soft); }
.contact-methods { display: grid; margin: 30px 0 auto; border-top: 1px solid var(--color-line); }
.contact-card > .arrow-link { margin-top: 25px; }
.contact-method { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--color-line); }
.contact-method svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-method span { display: block; color: #8a8e89; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.contact-method strong { display: block; margin-top: 2px; font-size: 14px; }
.service-form { display: grid; gap: 21px; margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 0; border-bottom: 1px solid #b9b5aa; border-radius: 0; outline: none; color: var(--color-ink); background: transparent; }
.form-field input, .form-field select { height: 49px; }
.form-field textarea { min-height: 112px; padding-top: 12px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-accent); }
.form-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.form-actions small { color: #777c78; line-height: 1.5; }
.form-status { padding: 14px 16px; border-left: 2px solid var(--color-highlight); color: var(--color-accent-deep); background: var(--color-highlight-soft); font-size: 12px; }
.form-status[data-tone="ok"] { border-left-color: #1f7a4d; background: #eaf6ef; color: #17492f; }
.form-status[data-tone="warn"] { border-left-color: #b3541e; background: #fdf1e7; color: #7d3a12; }
.form-status .status-action { display: inline-block; margin: 8px 14px 0 0; padding: 9px 15px; border-radius: 2px; color: var(--color-white); background: var(--color-accent); font-weight: 700; text-decoration: none; }
.form-status .status-action:hover { background: var(--color-accent-deep); }
.form-status small { display: block; margin-top: 9px; opacity: .8; }
.form-noscript { margin: 0 0 18px; padding: 14px 16px; border-left: 2px solid #b3541e; background: #fdf1e7; color: #7d3a12; font-size: 12px; }
.honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 15px 28px; margin-top: 25px; }
.file-field { margin-top: 4px; padding: 18px; border: 1px solid var(--color-line); background: rgba(255,254,250,.52); }
.file-field label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-field label span { color: #777c78; font-size: 9px; font-weight: 600; letter-spacing: .08em; }
.form-field input[type="file"] { height: auto; padding: 7px 0; border-bottom: 0; color: var(--color-ink-soft); font-size: 12px; }
.form-field input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 14px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; font: 700 11px var(--font-body); cursor: pointer; }
.file-field small, .file-selection { margin: 0; color: #777c78; font-size: 10px; line-height: 1.5; }
.file-selection:not(:empty) { color: var(--color-accent); font-weight: 700; }
.map-section { padding: 0 0 36px; background: var(--color-white); }
.about-summary { padding: 90px 0; }
.about-copy { max-width: 850px; }
.about-summary .editorial-media img { height: 590px; }
.map-layout { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 520px; }
.map-frame { min-height: 520px; border: 0; filter: saturate(.7) contrast(.95); }
.map-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 78px); color: #fff; background: var(--color-accent-deep); }
.map-copy h2 { color: #fff; font-size: clamp(44px, 4vw, 63px); }
.map-copy h2 em { color: var(--color-highlight-soft); }
.map-copy p { color: #cad6f3; }
.map-copy .button { margin-top: 18px; border-color: var(--color-white); color: var(--color-accent-deep); background: var(--color-white); }
.map-copy .button:hover { color: var(--color-white); background: transparent; }
/* Service catalog. Each entry is a <details> so the same markup can be an
   always-open card on the grid and a real accordion on phones, where ten open
   cards would otherwise be an endless scroll. Panels ship open, so the list
   still reads in full if the script never runs. */
.service-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.service-item { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-paper); transition: background .3s ease; }
.service-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--color-highlight); opacity: 0; transition: opacity .3s ease; }
.service-item:hover { background: var(--color-white); }
.service-item:hover::before { opacity: 1; }
.service-item summary { padding: clamp(28px, 3.2vw, 40px) clamp(26px, 3vw, 38px) 0; cursor: default; list-style: none; }
.service-item summary::-webkit-details-marker { display: none; }
.service-num { display: block; margin-bottom: clamp(20px, 2.2vw, 30px); color: var(--color-highlight); font-family: var(--font-body); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; line-height: 1; }
.service-item h3 { max-width: 420px; margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.1vw, 31px); font-weight: 600; letter-spacing: -.022em; line-height: 1.08; }
.service-detail { overflow: hidden; }
.service-detail p { max-width: 460px; margin: 0; padding: 13px clamp(26px, 3vw, 38px) clamp(28px, 3.2vw, 40px); color: var(--color-ink-soft); font-size: 12.5px; line-height: 1.78; }
.catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 42px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (min-width: 821px) {
  .preview-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(320px, 420px)); }
  .preview-tall { grid-row: auto; }
  .preview-small img { object-position: center 50%; }
}
@media (max-width: 1040px) {
  .header-inner { gap: 24px; }
  .site-nav { gap: 20px; }
  .hero { height: auto; min-height: auto; }
  .hero-layout { height: auto; grid-template-columns: 1fr; gap: 50px; }
  h1 { font-size: clamp(65px, 8.2vw, 88px); }
  .hero-visual { height: auto; margin: 0; padding: 0 24px 27px 0; }
  .hero-image-wrap { height: auto; box-shadow: var(--shadow-photo); }
  .hero-image-wrap img { height: 540px; }
  .section { padding: 105px 0; }
  .story-layout { gap: 65px; }
  .footer-grid { gap: 38px; }
}
@media (max-width: 820px) {
  .shell { width: min(calc(100% - 36px), var(--shell)); }
  .service-map-link-inner { align-items: flex-start; flex-wrap: wrap; gap: 12px 20px; }
  .service-map-link-inner > p:not(.kicker) { flex: 1 1 220px; }
  .service-map-link .button { flex: 0 0 auto; }
  /* Narrow screens keep the service area and drop the phone number; the header
     directly below still carries a call button. */
  .utility-inner > p { display: block; text-align: center; }
  .utility-full { display: none; }
  .utility-brief { display: inline; color: #f8f5ed; }
  .utility-inner > div { display: none; }
  .utility-inner { justify-content: center; }
  .header-inner { min-height: 78px; grid-template-columns: auto 1fr; }
  .header-cta { display: none; }
  .menu-toggle { justify-self: end; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 23px; height: 1px; display: block; background: var(--color-ink); transition: transform .25s ease, opacity .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 0; padding: 10px 18px 25px; border-bottom: 1px solid var(--color-line); background: var(--color-paper); box-shadow: 0 25px 45px rgba(21,27,40,.1); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: .25s ease; }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav a { padding: 14px 5px; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 24px; }
  .site-nav a::after { display: none; }
  /* Out of flow on purpose. The nav is an auto-sized, centred grid column, so
     an in-flow row of two words is wider than "Services" and would size the
     column itself, shifting the five main links off centre. Positioned
     absolutely it centres on the nav without touching them. */
  .site-nav { padding-bottom: 64px; }
  .nav-legal { position: absolute; right: 18px; bottom: 24px; left: 18px; display: flex; justify-content: center; gap: 32px; }
  .nav-legal a { padding: 0; border-bottom: 0; color: #777c78; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
  .hero { padding: 60px 0 70px; background: var(--color-white); }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { padding: 0; }
  .review-line { margin-bottom: 32px; }
  .hero-visual { width: min(100%, 570px); margin: 0 0 0 auto; padding: 0 12px 15px 0; }
  .hero-image-wrap img { height: min(650px, 90vw); object-position: center 66%; }
  .section-heading, .service-area-inner { grid-template-columns: 1fr; gap: 35px; }
  .section-heading > p { max-width: 620px; }
  .service-feature { grid-template-columns: 1fr; }
  .service-photo { height: 520px; }
  .service-photo img { object-position: center 70%; }
  .preview-tall { background: var(--color-accent-deep); }
  .preview-tall img { object-fit: contain; object-position: center; }
  .preview-tall:hover img { transform: none; }
  .process-grid { grid-template-columns: 1fr; padding: 0; }
  .process-grid::before { display: none; }
  .process-card { min-height: 0; padding: 24px; text-align: left; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
  .process-card + .process-card { border-left: 1px solid var(--color-line); }
  .process-card:last-child { border-bottom: 0; }
  .process-card > span { position: absolute; top: 24px; right: 24px; margin: 0; }
  .line-icon { margin: 0 0 18px; }
  .story-layout { grid-template-columns: 1fr; }
  .story-collage { width: min(100%, 650px); }
  .story-copy { max-width: 670px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .page-hero { padding: 80px 0; }
  .page-hero-grid, .editorial-grid, .editorial-grid.reverse, .contact-layout, .map-layout { grid-template-columns: 1fr; }
  .page-intro-line { grid-template-columns: minmax(180px, .55fr) minmax(280px, 1.45fr); gap: 35px; }
  .editorial-grid.reverse .editorial-media { order: initial; }
  .editorial-media { width: min(100%, 650px); }
  .editorial-media img { height: 590px; }
  .faq-item { gap: 35px; }
  .proof-band-inner { grid-template-columns: auto 1fr; }
  .proof-band-inner .button { grid-column: 1 / -1; width: max-content; }
  .map-copy { min-height: 430px; }
}
@media (max-width: 580px) {
  body { padding-bottom: 66px; }
  .brand strong { font-size: 21px; }
  .brand-mark { width: 48px; height: 48px; }
  h1 { font-size: clamp(57px, 18vw, 78px); }
  h2 { font-size: clamp(46px, 14vw, 64px); }
  .hero-intro { font-size: 16px; }
  .review-line { width: 100%; min-width: 0; gap: 14px; padding: 12px 14px; }
  .review-score { font-size: 44px; }
  .button-row { align-items: flex-start; flex-direction: column; gap: 15px; }
  .button-row .button { width: 100%; }
  .hero-image-wrap img { height: 530px; }
  .hero-image-caption { padding: 16px 18px; }
  .hero-image-caption strong { font-size: 19px; }
  .hero-image-caption small { font-size: 8px; }
  .section { padding: 85px 0; }
  .contact-section { padding: 34px 0; }
  .about-summary { padding: 65px 0; }
  .section-heading { margin-bottom: 45px; }
  .service-photo { height: 420px; }
  .service-panel { padding: 42px 28px; }
  .process-card { padding: 30px; }
  .story-collage { min-height: 500px; }
  .story-image-main img { height: 420px; }
  .story-image-small { width: 48%; border-width: 6px; }
  .story-image-small img { height: 240px; }
  .story-stamp { right: 23%; bottom: 0; width: 118px; height: 118px; border-width: 5px; }
  .preview-grid { grid-template-columns: 1fr; grid-template-rows: 480px 330px 330px; }
  .preview-tall { grid-row: auto; }
  .service-area { padding: 80px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 30px; }
  .footer-base { display: grid; gap: 7px; padding: 18px 0; }
  .mobile-contact { position: fixed; z-index: 100; right: 18px; bottom: 18px; left: auto; height: 52px; display: grid; grid-template-columns: 1fr; border-radius: 999px; color: var(--color-white); background: var(--color-accent-deep); box-shadow: 0 8px 28px rgba(8,24,69,.22); }
  .mobile-contact a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; font-size: 13px; font-weight: 700; }
  .mobile-contact a + a { border-left: 1px solid rgba(255,255,255,.18); }
  .mobile-contact svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .page-hero-grid { gap: 35px; }
  .page-hero h1 { font-size: clamp(58px, 17vw, 78px); }
  .page-hero-copy { font-size: 15px; }
  .page-intro { padding: 34px 0 30px; }
  .page-intro .breadcrumb { margin-bottom: 12px; }
  .page-intro-line { grid-template-columns: 1fr; gap: 13px; }
  .page-intro h1 { font-size: 52px; }
  .page-intro-line p { font-size: 13px; }
  .editorial-media { padding: 0 12px 14px 0; }
  .editorial-media img { height: 500px; }
  .faq-item { padding: 0; }
  .proof-band-inner { grid-template-columns: 1fr; }
  .proof-score { font-size: 65px; }
  .gallery-shell { padding: 60px 0 90px; }
  .gallery-intro { align-items: flex-start; flex-direction: column; }
  .gallery-intro-actions { width: 100%; align-items: flex-end; justify-content: space-between; }
  .gallery-item { flex-basis: min(82vw, 345px); }
  .gallery-controls button { width: 42px; height: 42px; }
  .gallery-lightbox[open] { display: block; }
  .lightbox-track { width: 100%; }
  .lightbox-slide { padding: 64px 16px 80px; }
  .lightbox-arrow { position: absolute; bottom: 18px; width: 44px; height: 44px; }
  .lightbox-prev { left: 18px; }
  .lightbox-next { right: 18px; }
  .contact-card, .form-card { padding: 35px 25px; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .map-section { padding-bottom: 20px; }
  .map-frame { min-height: 420px; }
}

/* Launch stabilization: keep primary page content in a predictable vertical flow. */
.section-heading,
.service-feature,
.process-grid,
.story-layout,
.preview-grid,
.service-area-inner,
.page-hero-grid,
.page-intro-line,
.editorial-grid,
.editorial-grid.reverse,
.proof-band-inner,
.contact-layout,
.form-row,
.map-layout,
.footer-grid {
  grid-template-columns: 1fr;
}

.section-heading,
.service-area-inner,
.page-hero-grid,
.page-intro-line,
.editorial-grid,
.editorial-grid.reverse,
.contact-layout,
.map-layout {
  gap: 32px;
}

.section-heading > p,
.page-intro-line p,
.editorial-content,
.story-copy,
.service-area-inner > div {
  max-width: 820px;
}

.button-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
}

.service-feature { min-height: 0; }
.service-photo { min-height: 0; height: clamp(360px, 62vw, 620px); }
.service-photo img { height: 100%; }

.process-grid { padding: 0; }
.process-grid::before { display: none; }
.process-grid .process-card { min-height: 0; padding: 26px 28px; border: 1px solid var(--color-line); border-bottom: 0; text-align: left; }
.process-grid .process-card:last-child { border-bottom: 1px solid var(--color-line); }
.process-grid .process-card + .process-card { border-left: 1px solid var(--color-line); }
.process-grid .process-card > span { position: absolute; top: 26px; right: 28px; margin: 0; }
.process-grid .line-icon { margin: 0 0 18px; }
.process-grid .process-card p { max-width: 620px; margin: 0; }

.preview-grid { grid-template-rows: none; }
.preview-tall { grid-row: auto; }
.preview-grid figure { min-height: 0; }
.preview-grid img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.preview-tall img,
.preview-wide img { object-position: center; }
/* Portrait source in a landscape box: hold the crop low so the windshield and
   the technician's hands stay in frame instead of empty sky. */
.preview-small img { object-position: center 50%; }

.service-photo-banner { height: auto; overflow: visible; background: var(--color-accent); }
.service-photo-banner img { height: auto; max-height: 620px; object-fit: cover; object-position: center; }
.service-photo-banner::after { display: none; }
.service-photo-copy { position: static; width: min(100%, var(--shell)); margin: 0 auto; padding: clamp(44px, 7vw, 80px) 24px; transform: none; }

.gallery-intro,
.gallery-intro-actions { align-items: flex-start; flex-direction: column; }
/* The gallery keeps its own horizontal carousel and arrows; the stacking
   rules above are not applied to it. Frames stay 3:4 so the portrait work
   photos are never cropped. */

.map-frame { width: 100%; min-height: 440px; }
.map-copy { min-height: 0; }

.footer-grid { gap: 34px; }
.footer-brand { grid-column: auto; }
.footer-base { align-items: flex-start; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 0; }

@media (max-width: 1100px) {
  html { scroll-padding-top: 78px; }
  .header-inner { min-height: 78px; grid-template-columns: auto 1fr; gap: 24px; }
  .header-cta { display: none; }
  .menu-toggle { justify-self: end; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 23px; height: 1px; display: block; background: var(--color-ink); transition: transform .25s ease, opacity .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 0; padding: 10px 18px 25px; border-bottom: 1px solid var(--color-line); background: var(--color-paper); box-shadow: 0 25px 45px rgba(21,27,40,.1); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: .25s ease; }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav a { padding: 14px 5px; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 24px; }
  .site-nav a::after { display: none; }
  /* Out of flow on purpose. The nav is an auto-sized, centred grid column, so
     an in-flow row of two words is wider than "Services" and would size the
     column itself, shifting the five main links off centre. Positioned
     absolutely it centres on the nav without touching them. */
  .site-nav { padding-bottom: 64px; }
  .nav-legal { position: absolute; right: 18px; bottom: 24px; left: 18px; display: flex; justify-content: center; gap: 32px; }
  .nav-legal a { padding: 0; border-bottom: 0; color: #777c78; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
}

@media (max-width: 580px) {
  .preview-grid img,
  .gallery-item img { aspect-ratio: 3 / 4; }

  /* The wide panel holds the landscape van shot. A 3:4 box crops it to the
     middle 56% of its width, which cuts the lettering off both ends. */
  .preview-wide img { aspect-ratio: 4 / 3; }
  .map-frame { min-height: 360px; }
  .catalog-actions { align-items: flex-start; flex-direction: column; }
  .catalog-actions .button { width: 100%; }
  .contact-socials { display: grid; }
}

/* Trust ledger: the four-across strip only survives while every label fits on
   one line. Below ~900px it collapses to a 2x2 block so all four proof points
   stay visible at once and the labels can return to a legible size. */
@media (max-width: 900px) {
  .ledger-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  .ledger-grid div { flex: none; padding: clamp(16px, 2.6vw, 20px) clamp(15px, 3.4vw, 24px); }
  .ledger-grid div:first-child { padding-left: clamp(15px, 3.4vw, 24px); }
  /* The inline star and bullet marks read as separators on one row only. */
  .ledger-grid div:first-child::before,
  .ledger-grid div:not(:first-child)::before { content: none; }
  .ledger-grid div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); }
  .ledger-grid div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .ledger-grid strong { font-size: clamp(22px, 5.2vw, 31px); line-height: 1.05; white-space: normal; }
  .ledger-grid span { margin-top: 7px; font-size: clamp(8px, 1.9vw, 10px); letter-spacing: .09em; white-space: normal; }
}

/* Below the two-column grid the catalog becomes a real accordion: compact rows
   that show the ten service names in about a screen, each opening on tap. */
@media (max-width: 767px) {
  .service-catalog { grid-template-columns: 1fr; border-left: 0; }
  .service-item { border-right: 0; }
  .service-item:hover { background: var(--color-paper); }
  .service-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; }
  .service-item summary::after { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-accent); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1; transition: color .2s ease, border-color .2s ease, background .2s ease; }
  .service-item[open] summary::after { content: "\2212"; border-color: var(--color-accent); color: var(--color-white); background: var(--color-accent); }
  .service-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  .service-num { margin: 0; font-size: 15px; }
  .service-item h3 { max-width: none; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
  .service-detail { height: 0; transition: height .21s ease-in-out; }
  .service-detail p { max-width: none; padding: 0 16px 18px; font-size: 13px; line-height: 1.7; }
}