/* Page layouts for the public site: Home, Projects, Case study, Services,
   Contact. Tokens and shared components are in site.css. */

/* ---- shared ------------------------------------------------------------- */
.section-rule { padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
/* Small uppercase links get vertical padding so the target is ≥24px (WCAG 2.5.8). */
.textlink { display: inline-block; padding: 6px 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; }
.crumbs a, .case__services a { display: inline-block; padding: 6px 0; }
.textlink:hover, .textlink:focus-visible { color: var(--red-text); }
.textlink--muted { color: var(--grey-2); text-decoration: none; }
.u-desktop-block { display: block; }
.u-mobile-block { display: none; }
.u-desktop-flex { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 719px) {
  .u-desktop-block { display: none; }
  .u-mobile-block { display: block; }
  .u-desktop-flex { display: none; }
}

/* ---- Home: hero ----------------------------------------------------------- */
.hero { position: relative; height: 860px; color: var(--white); background: #25272A; overflow: hidden; }
.hero__media, .hero__media .ph, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media .ph { background: linear-gradient(160deg, #3A3C40, #25272A 55%, #121314); color: rgba(255,255,255,.55); }
.hero__media .ph::before { display: none; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,19,20,.55) 0%, rgba(18,19,20,0) 45%, rgba(18,19,20,.72) 100%); }
.hero__inner { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: 72px; }
.hero__h1 span { white-space: nowrap; }
@media (max-width: 719px) {
  .hero { height: 720px; }
  .hero__inner { padding-bottom: 48px; }
  .hero__h1 { font-size: 32px; }
}

/* ---- Home: introduction ---------------------------------------------------- */
.intro { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; padding-top: 140px; }
.intro__label { display: inline-flex; align-items: center; gap: 10px; }
.intro__h { margin-top: 24px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.intro__body { padding-top: 46px; }
.intro__body .body-copy { max-width: none; }
.intro__facts { margin-top: 36px; border-top: 1px solid var(--ink); }
.intro__facts li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--grey-6); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 899px) { .intro { grid-template-columns: 1fr; gap: 28px; } .intro__body { padding-top: 0; } }
@media (max-width: 719px) { .intro { padding-top: 72px; } .intro__h { font-size: 24px; } }

/* ---- Home: what we do ------------------------------------------------------ */
.wwd { padding-top: 120px; }
.wwd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 64px; margin-top: 56px; }
.wwd__link { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.wwd__media { position: relative; width: 300px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--grey-6); }
.wwd__media::after { content: ""; position: absolute; inset: 0; background: var(--c); opacity: var(--o, .85); mix-blend-mode: multiply; transition: opacity var(--dur) var(--ease); }
.wwd__item[style*="--c: var(--ink)"] .wwd__media::after { opacity: .55; }
.wwd__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.14); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.wwd__media .ph { position: absolute; inset: 0; }
.wwd__text { display: block; }
.wwd__dot { width: 14px; height: 14px; display: block; margin-bottom: 14px; }
.wwd__h { display: inline-block; font-size: 22px; font-weight: 500; line-height: 1.15; position: relative; transition: color var(--dur) var(--ease); }
.wwd__h::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.wwd__copy { display: block; margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--grey-1); max-width: 320px; }
.wwd__more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 15px; transition: color var(--dur) var(--ease); }
.wwd__link:hover .wwd__img, .wwd__link:focus-visible .wwd__img { filter: grayscale(0); transform: scale(1); }
.wwd__link:hover .wwd__media::after, .wwd__link:focus-visible .wwd__media::after { opacity: .3; }
.wwd__link:hover .wwd__h, .wwd__link:focus-visible .wwd__h, .wwd__link:hover .wwd__more, .wwd__link:focus-visible .wwd__more { color: var(--t); }
.wwd__link:hover .wwd__h::after, .wwd__link:focus-visible .wwd__h::after { transform: scaleX(1); }
/* Left column (Architectural Services, Development Advice): text first, then
   the circle, so the four circles meet in the middle. Phones go back to
   circle-then-text below. */
.wwd__item:nth-child(odd) .wwd__link { grid-template-columns: 1fr 300px; }
.wwd__item:nth-child(odd) .wwd__media { order: 2; }
@media (max-width: 1099px) {
  .wwd__link { grid-template-columns: 220px 1fr; } .wwd__media { width: 220px; }
  .wwd__item:nth-child(odd) .wwd__link { grid-template-columns: 1fr 220px; }
}
@media (max-width: 719px) {
  .wwd { padding-top: 72px; }
  .wwd__grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .wwd__item { padding: 28px 0; border-bottom: 1px solid var(--grey-6); }
  .wwd__link, .wwd__item:nth-child(odd) .wwd__link { grid-template-columns: 120px 1fr; gap: 20px; }
  .wwd__item:nth-child(odd) .wwd__media { order: 0; }
  .wwd__media { width: 120px; }
  .wwd__dot { width: 10px; height: 10px; }
  .wwd__h { font-size: 20px; }
}

/* ---- Home: featured project ------------------------------------------------ */
.featured { padding-top: 140px; }
.featured__media { position: relative; }
.featured__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.featured__media .ph { --ar: 16 / 8; }
.featured__circle { position: absolute; right: 8%; bottom: -120px; width: 26%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 12px solid var(--white); background: var(--grey-6); }
.featured__circle-img { width: 100%; height: 100%; object-fit: cover; }
/* The photos and the heading go to the case study. */
.featured__link { display: block; height: 100%; overflow: hidden; }
.featured__link img { transition: transform var(--dur) var(--ease); }
.featured__link:hover img { transform: scale(1.03); }
.featured__title-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .12em; text-decoration-thickness: 2px; transition: text-decoration-color var(--dur) var(--ease); }
.featured__title-link:hover, .featured__title-link:focus-visible { text-decoration-color: currentColor; }
.featured__circle .ph { position: absolute; inset: 0; border-radius: 50%; }
.featured__text { margin-top: 56px; max-width: 60%; }
.featured__text .fs-section { margin: 14px 0 24px; }
.featured__facts { display: grid; grid-template-columns: 104px 1fr; row-gap: 6px; margin: 0 0 24px; font-size: 15px; }
.featured__facts dt { color: var(--grey-2); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; align-self: center; }
@media (max-width: 719px) {
  .featured { padding-top: 96px; }
  .featured__img { aspect-ratio: 4 / 5; }
  .featured__media .ph { --ar: 4 / 5; }
  .featured__circle { width: 140px; bottom: -60px; border-width: 8px; right: 6%; }
  .featured__text { margin-top: 84px; max-width: none; }
}

/* ---- Home: about ------------------------------------------------------------ */
.about { padding-top: 160px; }
.about__head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.about__body { display: grid; grid-template-columns: 400px 1fr; gap: 72px; align-items: start; margin-top: 56px; }
.about__portrait { position: relative; width: 400px; aspect-ratio: 1; }
.about__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.about__badge { position: absolute; right: 6%; bottom: 6%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); border: 8px solid var(--white); }
.about__name { margin-bottom: 14px; }
.about__creds { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); line-height: 1.8; margin-bottom: 28px; }
@media (max-width: 899px) { .about__body { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 719px) {
  .about { padding-top: 96px; }
  .about__portrait { width: 260px; }
  .about__body { margin-top: 32px; }
}

/* ---- Home: alliances ------------------------------------------------------- */
/* The St Marks facade against the sky (handoff/images/mg-alliances-bg.jpg,
   1200px - the largest supplied) under a 50% wash, as Luke chose. All text in
   the band is white; over the brightest cloud that is about 3.7:1, so keep
   the copy off the top-left corner if the photo changes. No parallax. */
.alliances { margin-top: 160px; background: var(--ink) url("../img/alliances/mg-alliances-bg.60b35a8fe825.webp") center / cover no-repeat; color: var(--white); position: relative; }
.alliances::before { content: ""; position: absolute; inset: 0; background: rgba(18, 19, 20, .5); pointer-events: none; }
.alliances .container { position: relative; padding-top: 120px; padding-bottom: 120px; }
.alliances__h { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.5); }
.alliances__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 72px 80px; margin-top: 56px; }
.alliance__logo { display: block; width: 180px; height: 128px; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.alliance__logo--badge { width: 300px; }  /* the landscape Compass ISO 9001 badge */
.alliance__name { font-size: 22px; font-weight: 500; line-height: 1.2; }
.alliance__level { margin-top: 8px; color: var(--white); }
.alliance__copy { margin-top: 16px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--white); max-width: 520px; }
@media (max-width: 899px) { .alliances__grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 719px) {
  .alliances { margin-top: 96px; }
  .alliances .container { padding-top: 72px; padding-bottom: 72px; }
  .alliances__grid { margin-top: 32px; }
  .alliance__logo { width: 140px; height: 100px; margin-bottom: 20px; }
  .alliance__logo--badge { width: 240px; }
  .alliance__name { font-size: 20px; }
}

/* ---- Projects index ---------------------------------------------------------- */
.filters { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--grey-5); padding: 16px 0; margin-bottom: 48px; }
.filters__nav { flex: 1 1 auto; min-width: 0; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
/* Search: the glass at the far right turns the bar into a search box. */
.psearch__open, .psearch__close { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.psearch__open { width: 44px; height: 44px; border: 1px solid var(--grey-5); }
.psearch__open:hover, .psearch__open:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--white); }
.psearch { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 4px 0 18px; border: 1px solid var(--ink); border-radius: 999px; animation: psearch-in var(--dur) var(--ease); }
.psearch[hidden] { display: none; }
.psearch__glass { flex: none; color: var(--grey-2); }
.psearch__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.psearch__input::placeholder { color: var(--grey-3); }
.psearch__input::-webkit-search-cancel-button, .psearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.psearch:focus-within { box-shadow: 0 0 0 3px rgba(70, 136, 244, .25); }
.psearch__close { width: 36px; height: 36px; }
.psearch__close:hover, .psearch__close:focus-visible { background: var(--ink); color: var(--white); }
.filters.is-searching .filters__nav, .filters.is-searching .psearch__open { display: none; }
@keyframes psearch-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border: 1px solid var(--grey-5); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pill:hover, .pill:focus-visible { border-color: var(--ink); }
.pill.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill.on .dot { outline: 2px solid var(--white); outline-offset: -1px; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 28px; padding-bottom: 140px; }
.pcard { display: block; position: relative; }
.frame { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--grey-6); border-radius: 0; transition: border-radius var(--dur) var(--ease); }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform var(--dur) var(--ease); }
.frame .ph { position: absolute; inset: 0; }
.pcard__sector { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.pcard__name { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 1.25; }
.pcard__view { display: block; margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.pcard:hover .frame, a.pcard:focus-visible .frame { border-radius: 40px; }
a.pcard:hover .pcard__img, a.pcard:focus-visible .pcard__img { transform: scale(1); }
a.pcard:hover .pcard__view, a.pcard:focus-visible .pcard__view { opacity: 1; transform: none; }
a.pcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
.pgrid__empty { grid-column: 1 / -1; color: var(--grey-2); }
@media (max-width: 1199px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px) {
  .filters { margin-bottom: 28px; padding: 12px 0; gap: 10px; }
  /* The chips scroll sideways; the glass stays put at the right, and the
     chips fade out just before it. */
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-right: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .pill { font-size: 11px; padding: 0 16px; white-space: nowrap; }
  .pgrid { gap: 28px 12px; padding-bottom: 80px; }
  .pcard__sector { font-size: 9px; margin-top: 10px; }
  .pcard__sector .dot { width: 8px; height: 8px; }
  .pcard__name { font-size: 15px; }
  .pcard__view { display: none; }
  a.pcard:hover .frame { border-radius: 24px; }
}

/* ---- Case study ------------------------------------------------------------ */
.case__title { padding-top: 16px; }
.crumbs ol { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--ink); }
/* Projects + caret: the caret drops down All Projects and the sectors. */
.crumbs__pick { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.crumbs__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--red-text); cursor: pointer; transition: background-color .2s ease; }
.crumbs__toggle svg { transition: transform .2s ease; }
.crumbs__toggle:hover, .crumbs__toggle:focus-visible { background: var(--grey-7); }
.crumbs__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.crumbs__menu { position: absolute; top: calc(100% + 6px); left: -12px; z-index: 20; min-width: 220px; padding: 8px 0; background: var(--white); border: 1px solid var(--grey-7); border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .25); text-transform: none; letter-spacing: 0; }
.crumbs__menu[hidden] { display: none; }
.crumbs .crumbs__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 15px; font-weight: 400; color: var(--ink); }
.crumbs .crumbs__menu a:hover, .crumbs .crumbs__menu a:focus-visible { background: var(--grey-7); color: var(--ink); }
.crumbs .crumbs__menu a[aria-current] { font-weight: 500; }
/* The case study's title and Contact's: the size of Home's section headings
   (About - --fs-section, 44px, 28px on a phone) rather than the site's h1. */
.case__h1, .contact__h1 { font-size: var(--fs-section); }
.case__h1 { margin-top: 16px; }
.case__loc { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.case__sector { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.case__sector:hover, .case__sector:focus-visible { color: var(--ink); }
.case__lead { margin-top: 48px; }
.case__lead-img { width: 100%; height: 760px; object-fit: cover; }
.case__lead .ph { --ar: 16 / 7; }
.case__body { display: flex; gap: 72px; padding-top: 80px; }
/* Facts: a hairline under every row, unbroken across label and value. */
.facts { flex: 1 1 320px; display: grid; grid-template-columns: 120px 1fr; align-content: start; font-size: 15px; border-top: 1px solid var(--ink); }
.facts dt, .facts dd { padding: 14px 0; border-bottom: 1px solid var(--grey-6); }
.facts dt { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); padding-top: 17px; padding-right: 16px; }
.facts__awards { display: grid; gap: 18px; }
.award { display: flex; align-items: center; gap: 14px; }
.award__badge { width: 72px; height: 72px; object-fit: contain; flex: none; }
.award__name { display: block; font-weight: 500; line-height: 1.35; }
.award__detail { display: block; margin-top: 2px; font-size: 13px; color: var(--grey-2); line-height: 1.4; }
.case__text { flex: 2 1 560px; max-width: 720px; }
.lead { font-size: 28px; font-weight: 300; line-height: 1.35; margin-bottom: 32px; }
.quote { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ink); }
.quote p { font-size: 22px; font-weight: 500; line-height: 1.35; }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; padding-top: 96px; align-items: center; }
.gallery__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gallery__item .ph { --ar: 3 / 4; }
.gallery__item--square { text-align: center; }
.gallery__item--square .gallery__img { aspect-ratio: 1; width: 80%; margin: 0 auto; border-radius: 0; transition: border-radius var(--dur) var(--ease); }
.gallery__item--square .ph { --ar: 1; width: 80%; margin: 0 auto; }
.gallery__item--square:hover .gallery__img { border-radius: 24px; }
.gallery figcaption { margin-top: 12px; }
.figures-wrap { padding-top: 96px; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 28px; border-top: 1px solid var(--ink); }
.figures__item .dot { display: block; width: 12px; height: 12px; margin-bottom: 20px; }
.figures__value { font-size: 48px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.figures__item dt { margin-top: 10px; }
.case__closing { margin-top: 96px; }
.case__closing-img { width: 100%; height: 640px; object-fit: cover; }
.credit { margin-top: 16px; }
.case__services { margin-top: 32px; font-size: 14px; color: var(--grey-2); }
.case__services a { text-decoration: underline; text-underline-offset: .2em; color: var(--ink); }
.next { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 96px; padding-top: 48px; padding-bottom: 140px; border-top: 1px solid var(--ink); }
.next__title { display: block; margin-top: 12px; font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; max-width: 560px; }
.next__thumb { width: 200px; flex: none; aspect-ratio: 1; overflow: hidden; border-radius: 0; transition: border-radius var(--dur) var(--ease); }
.next__img { width: 100%; height: 100%; object-fit: cover; }
.next__thumb .ph { --ar: 1; }
.next:hover .next__thumb, .next:focus-visible .next__thumb { border-radius: 24px; }
@media (max-width: 899px) { .case__body { flex-direction: column; gap: 40px; } .figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px) {
  .case__lead { margin-top: 32px; }
  .case__lead-img { height: 480px; }
  .case__body { padding-top: 48px; }
  .lead { font-size: 22px; }
  .quote p { font-size: 20px; }
  .gallery { padding-top: 56px; gap: 20px; }
  .gallery__img { aspect-ratio: 4 / 5; }
  .gallery__item .ph { --ar: 4 / 5; }
  .figures-wrap { padding-top: 56px; }
  .figures__value { font-size: 32px; }
  .case__closing-img { height: 420px; }
  .next { margin-top: 56px; padding-top: 32px; padding-bottom: 80px; }
  .next__title { font-size: 22px; }
  .next__thumb { width: 96px; }
}

/* ---- Services ---------------------------------------------------------------- */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 80px; padding: 40px 0 140px; }
.svc { padding-top: 28px; border-top: 1px solid var(--ink); }
.svc__dot { width: 20px; height: 20px; display: block; margin-bottom: 20px; }
.svc__h { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 20px; }
.svc__def { max-width: 560px; }
.svc__label { display: block; margin-top: 32px; margin-bottom: 8px; font-size: 11px; }
.svc__list li { padding: 12px 0; border-top: 1px solid var(--grey-6); font-size: 16px; font-weight: 300; }
.svc__list li:last-child { border-bottom: 1px solid var(--grey-6); }
.svc .textlink { margin-top: 24px; }
@media (max-width: 899px) { .sgrid { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 719px) { .sgrid { padding: 28px 0 80px; } .svc__dot { width: 16px; height: 16px; } .svc__h { font-size: 26px; } }

/* ---- Contact ------------------------------------------------------------------ */
/* Heading over the form column; the form and the details share the next
   row, so the details' first line is level with the top of the message box. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 72px; row-gap: 32px; padding-top: 56px; padding-bottom: 64px; }
.contact__h1 { grid-column: 1; grid-row: 1; }
.contact__form { grid-column: 1; grid-row: 2; }
.contact__form form { display: grid; gap: 16px; }
.fin { width: 100%; border: 1px solid var(--input-border); border-radius: 14px; padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 300; color: var(--ink); background: var(--white);
  box-shadow: 0 0 0 0 transparent; transition: border-color .25s ease, box-shadow .25s ease; }
/* Selected: the border turns blue and thickens to 2px (a 1px ring outside
   the 1px border), fading in on select and out on deselect. */
.fin:focus, .fin:focus-visible { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 1px var(--blue-text); }
.contact__row { display: flex; gap: 12px; align-items: stretch; }
.contact__email { flex: 1 1 auto; min-width: 0; }
.captcha { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.captcha__q { font-size: 15px; font-weight: 500; color: var(--grey-1); white-space: nowrap; }
.fin--captcha { width: 64px; text-align: center; padding: 14px 10px; }
.fin::placeholder { color: var(--grey-2); }
textarea.fin { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background var(--dur) var(--ease); }
.send:hover, .send:focus-visible { background: var(--grey-1); }
.notice { font-size: 13px; color: var(--grey-2); }
.notice a { text-decoration: underline; text-underline-offset: .2em; }
.form-status { margin-top: 24px; font-size: 22px; font-weight: 500; }
.form-error { font-size: 14px; color: var(--red-text); }
.contact__dl { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 156px 1fr; align-content: start; }
.contact__dl dt, .contact__dl dd { padding: 18px 0; }
.contact__dl dt { padding-right: 16px; }  /* no column gap, so each row's line runs unbroken */
/* The first row starts flush with the message box; a hairline between the rest. */
.contact__dl dt:first-of-type { padding-top: 4px; }
.contact__dl dd:first-of-type { padding-top: 0; }
.contact__dl dt:not(:first-of-type), .contact__dl dd:not(:first-of-type) { border-top: 1px solid var(--grey-6); }
.contact__dl dt { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); padding-top: 22px; }
.contact__addr { font-style: normal; font-size: 18px; line-height: 1.35; margin-bottom: 8px; }
.big { font-size: 22px; font-weight: 300; }
.big:hover, .big:focus-visible { color: var(--red-text); }
.soc--dark a { width: 40px; height: 40px; border: 1px solid var(--ink); color: var(--ink); }
.soc--dark a:hover, .soc--dark a:focus-visible { background: var(--ink); color: var(--white); }
.soc--dark a::after { color: var(--grey-2); }
.aerial-wrap { position: relative; overflow: hidden; }
.aerial { display: block; width: 100%; height: 520px; object-fit: cover; object-position: 50% 45%; background: var(--grey-4); }
/* The studio, marked on the aerial: a red circle the size and place of the
   one on the supplied photo (handoff/images/aerial-sydney-cbd-mg.jpg),
   pulsing outward in rings. site.js positions and sizes it against the
   image as object-fit:cover has cropped it. */
.pin { position: absolute; left: 0; top: 0; width: 16px; height: 16px; transform: translate(-50%, -50%); background: var(--red); border-radius: 50%; opacity: 0; transition: opacity .3s ease; animation: pin-pulse 1.8s var(--ease) infinite; }
.pin.is-placed { opacity: 1; }
.pin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: pin-pulse 1.8s var(--ease) .9s infinite; }
@keyframes pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(233, 67, 53, .75); }
  80%  { box-shadow: 0 0 0 22px rgba(233, 67, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 67, 53, 0); }
}
@media (max-width: 899px) {
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .contact__h1, .contact__form, .contact__dl { grid-column: 1; grid-row: auto; }
  .contact__dl { margin-top: 24px; }
}
@media (max-width: 719px) {
  .contact { padding-top: 28px; padding-bottom: 64px; }
  .fin { font-size: 16px; }
  textarea.fin { min-height: 100px; }
  .contact__row { flex-wrap: wrap; }
  .contact__email { flex-basis: 100%; }
  .send { height: 48px; }
  .notice { font-size: 12px; }
  .contact__dl { grid-template-columns: 1fr; }
  /* Stacked: the line runs above each label only, not between label and value. */
  .contact__dl dt { padding: 24px 0 8px; }  /* overrides the desktop padding-right too */
  .contact__dl dd { padding: 0 0 4px; }
  .contact__dl dd:not(:first-of-type) { border-top: 0; }
  .contact__addr { font-size: 17px; }
  .big { font-size: 19px; }
  .soc--dark a { width: 40px; height: 40px; }
  .soc--dark a::after { display: none; }
  .aerial { height: 260px; object-position: 62% 50%; }
}

/* ---- Project photo carousel (templates/website/_lightbox.html) ----------- */
.lb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lb-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.gallery__all { margin-top: 28px; }
.gallery__all .textlink { cursor: pointer; }
body[data-lightbox="open"] { overflow: hidden; }
.lb[hidden] { display: none; }
.lb { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; background: rgba(18, 19, 20, .96); color: var(--white); }
.lb__top { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); }
.lb__count { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--grey-4); }
.lb__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); color: var(--white); background: rgba(18,19,20,.4); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lb__btn:hover, .lb__btn:focus-visible { background: var(--white); color: var(--ink); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__stage { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 var(--gutter); min-height: 0; }
.lb__figure { min-height: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lb__img { max-width: 100%; max-height: calc(100vh - 230px); width: auto; height: auto; object-fit: contain; }
.lb__caption { font-size: 14px; color: var(--grey-7); text-align: center; }
.lb__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 16px var(--gutter) 20px; scrollbar-width: thin; justify-content: safe center; }
.lb__thumb { flex: none; display: block; width: 96px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: .55; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover, .lb__thumb:focus-visible { opacity: .9; }
.lb__thumb[aria-current="true"] { opacity: 1; border-color: var(--white); }
@media (max-width: 719px) {
  .lb__stage { grid-template-columns: 1fr; padding: 0; }
  .lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 44px; height: 44px; }
  .lb__arrow--prev { left: 8px; }
  .lb__arrow--next { right: 8px; }
  .lb__img { max-height: calc(100vh - 200px); }
  .lb__thumb { width: 72px; height: 48px; }
}

/* ---- Inline editor (managers and the project leader only) --------------- */
.ie-bar { position: fixed; right: 16px; bottom: 16px; z-index: 65; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; background: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.ie-note { color: var(--grey-7); font-size: 13px; padding: 0 8px; }
.ie-note:empty { display: none; }
.ie-btn { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.ie-btn[hidden] { display: none; }
.ie-btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); }
.ie-btn:hover, .ie-btn:focus-visible { background: var(--grey-7); color: var(--ink); }
.ie-btn--ghost:hover, .ie-btn--ghost:focus-visible { background: rgba(255,255,255,.12); color: var(--white); }
.ie-btn:disabled { opacity: .6; }
body[data-inline-editing] [data-edit] { outline: 1px dashed var(--blue-text); outline-offset: 6px; border-radius: 2px; min-width: 4ch; }
body[data-inline-editing] [data-edit]:focus { outline: 2px solid var(--blue-text); }
[data-edit]:empty::before { content: attr(data-placeholder); color: var(--grey-3); font-style: italic; }
body:not([data-inline-editing]) [data-edit]:empty::before { content: none; }
/* An empty field (row, overview, description, quote) is in the page only for
   an editor, and only shows once Edit page is on. */
body:not([data-inline-editing]) .ie-empty { display: none; }