/* Shared geometry for the homepage, service pages, and catalogue. */
:root {
  --radius: 8px;
  --ice: #f2f7fa;
  --mist: #eaf3fa;
  --edge: #d4e2ea;
  --muted: #46596b;
  --gutter: clamp(18px, 2vw, 32px);
  --section-space: clamp(48px, 5vw, 84px);
  --quick: 120ms ease-out;
  scroll-behavior: auto;
}
.bar {border-bottom: 1px solid var(--edge)}
.btn, .about .about-cta, .sheet, .sheet .close, .office-card, .tile,
.thumb, .office-scope > img, .sheet :is(input, select, textarea), .hamb {
  border-radius: var(--radius);
}
.btn, .tile, .under, .all-services, .nav a, .lang a, .catalogue-groups li button {
  transition: color var(--quick), background-color var(--quick), border-color var(--quick), box-shadow var(--quick);
}
.btn:hover {transform: none; box-shadow: 0 2px 5px #142e4c26}
.sheet .close {margin: 0 0 8px 12px}
.heroimg {transition: opacity 120ms linear}
.tile {
  background: var(--paper);
  border: 1px solid var(--edge);
  overflow: hidden;
  color: var(--ink);
}
.tile:hover, .tile:focus-visible {border-color: #96b3cf; box-shadow: 0 2px 5px #16375912}
.tile .thumb {border-radius: 0; background: var(--ice); aspect-ratio: 4 / 3}
.tile .thumb img {transition: none}
.tile:hover .thumb img, .tile:focus-visible .thumb img {transform: none}
.tile .tit, .tile .sub, .tile .linkline {padding-inline: clamp(16px, 1.4vw, 24px)}
.tile .linkline {padding-bottom: 18px}
.contact {background: var(--mist); color: var(--ink)}
.contact .services-label {color: var(--blue)}
.info-row {border-color: #bacfde}
.info-row > span, .info-row small, .contact .directions-link {color: var(--muted)}
.contact .btn.light {background: var(--blue); color: white}
.contact .btn.light:hover {background: #123d9f}
.footer {background: white; border-top: 1px solid var(--edge)}
.office-benefits {background: white}
.office-card {background: var(--ice); border: 1px solid var(--edge)}
.office-scope {background: var(--ice)}
.hero-media {display: contents}
@media (min-width: 961px) {
  :root {--pad: max(5vw, calc((100vw - 1560px) / 2))}
  .bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gutter);
  }
  .brand {justify-self: start}
  .actions {justify-self: end}
  .grid {gap: var(--gutter)}
  .tile {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .tile .tit {margin: 0; padding-top: 18px; padding-bottom: 8px}
  .tile .linkline {margin: 0; padding-top: 16px}
}
@media (min-width: 768px) {
  .office-hero, .about, .contact, .office-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding: var(--section-space) var(--pad);
  }
  .office-hero {
    background: var(--ice);
    color: var(--ink);
    height: auto;
    min-height: 0;
    padding-block: clamp(32px, 3.5vw, 60px);
  }
  .office-cover {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 100%;
    height: clamp(370px, 32vw, 550px);
    position: relative;
    inset: auto;
    overflow: hidden;
    border-radius: var(--radius);
  }
  .office-cover {grid-row: 1; object-fit: cover; object-position: 76% center; z-index: auto}
  .office-hero::after {display: none}
  .office-cover-copy {
    grid-column: 1;
    grid-row: 1;
    position: static;
    transform: none;
    align-self: center;
    padding: 0;
    min-width: 0;
  }
  .office-cover-copy h1 {margin: 0 0 20px; line-height: 1.02; letter-spacing: -.063em}
  .office-cover-copy h1 {font-size: clamp(39px, 4.15vw, 76px)}
  .office-cover-copy > p {color: var(--muted)}
  .office-cover-copy .btn.light {background: var(--blue); color: white}
  .office-cover-copy .btn.light:hover {background: #123d9f}
  .body-sec {padding-block: var(--section-space); background: white}
  .about {background: var(--ice); min-height: 0; align-items: center}
  .about > img {
    height: clamp(340px, 32vw, 530px);
    max-height: none;
    border-radius: var(--radius);
  }
  .about-copy {padding: clamp(18px, 2vw, 32px)}
  .contact {align-items: start}
  .contact-info {align-self: start}
  .office-benefits {gap: var(--gutter); padding-block: var(--section-space)}
  .office-scope > img {height: clamp(360px, 33vw, 550px)}
  .office-contact {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: center}
  .office-contact .btn {justify-self: end}
}
@media (prefers-reduced-motion: reduce) {
  .heroimg, .btn, .tile, .catalogue-groups li button {transition: none}
}
.thumb img[src$="obra-clara.webp"] {object-position: 85% center}

@media (max-width: 767px) {
  :root {
    --mobile-section: 48px;
    --mobile-header: 66px;
    scroll-padding-top: var(--mobile-header);
  }
  .bar {position: sticky; top: 0; z-index: 20; height: var(--mobile-header)}
  .bar .head-quote {
    min-height: 44px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--quick);
  }
  .bar.past-hero .head-quote {visibility: visible; opacity: 1; pointer-events: auto}
  .bar .hamb, .sheet .close {min-width: 44px; min-height: 44px}
  .mobile-nav {position: fixed; top: var(--mobile-header); z-index: 19; max-height: calc(100dvh - var(--mobile-header)); overflow-y: auto}
  .body-sec, .about, .contact, .office-benefits, .office-scope, .office-contact, .footer {
    padding: var(--mobile-section) var(--pad);
  }
  .body-sec .grid {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
    padding: 0; overflow: visible; scroll-snap-type: none;
  }
  .tile {width: 100%; min-width: 0; scroll-snap-align: none}
  .tile .thumb {aspect-ratio: 16 / 10}
  .tile .linkline {min-height: 48px; padding-block: 10px; align-items: center}
  .services-heading {margin: 0 0 24px; gap: 10px}
  .services-title .stitle {margin-inline: 0}
  .about {gap: 24px}
  .about > img {height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius)}
  .about-copy {padding: 0; width: 100%}
  .contact-info {margin-top: 24px}
  .hero-links {display: grid; gap: 8px}
  .hero-copy {bottom: 60px}
  .hero-links .btn,.hero-more,.all-services,.about .about-cta,.contact .btn,
  .office-cover-copy .btn,.office-contact .btn,.sheet .btn,.sheet .alt {
    width: 100%; min-height: 48px; border-radius: var(--radius);
  }
  .all-services,.hero-more,.sheet .alt,
  .contact-info a[href^="tel:"], .contact-info a[href^="mailto:"] {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--blue); color: var(--blue); padding: 10px 14px;
    font-weight: 650; text-decoration: none; text-align: center; border-radius: var(--radius);
  }
  .hero-more {color: white; border-color: #ffffffbb; background: #101d2e44}
  .info-row:has(a[href^="tel:"]), .info-row:has(a[href^="mailto:"]) {grid-template-columns: minmax(0,1fr); gap: 8px}
  .contact-info a[href^="tel:"], .contact-info a[href^="mailto:"] {width: 100%; min-height: 44px; background: var(--paper)}
  .info-row small:has(a[href^="tel:"]) {margin-top: 10px}
  .catalogue li button {min-height: 44px}
  .footer {background: var(--ink); color: #f2f7fa; border: 0; gap: 8px}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .bar .head-quote {transition: none}
}