/* Page layouts, by section id */

/* Responsive arch: logo on desktop, gate on mobile */
.hoop--d { display: none; }
@media (max-width: 1023.98px) { .arch--resp { aspect-ratio: 4 / 5; } }
@media (min-width: 1024px) {
  .hoop--m { display: none; }
  .hoop--d { display: block; }
}

/* Page heads clear the fixed header on desktop */
.page-head { padding-top: clamp(2rem, 1.5rem + 3vw, 3.5rem); padding-bottom: var(--section-pad-s); }
@media (min-width: 1024px) {
  .page-head { padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 3vw, 5rem)); padding-bottom: var(--section-pad); }
}
.page-head__grid { row-gap: 2.5rem; align-items: center; }
.page-head .lead { margin-top: 1.5rem; max-width: 40ch; }
.page-head__figure { margin: 0; }
@media (max-width: 1023.98px) {
  .page-head__figure .arch-frame { max-width: 520px; }
}
@media (min-width: 1024px) {
  .page-head__copy { grid-column: 1 / 7; }
  .page-head h1 { font-size: min(var(--step-4), 4.6vw); }
  .page-head__figure { grid-column: 7 / 13; padding-left: calc(var(--hoop-gap) + 8px); }
}

/* =================== HOME =================== */
/* H1 the window: the Levanter loop fills the hero, graded green; the arch is a clear window into it. */
.hero { z-index: 3; }
@media (max-width: 1023.98px) {
  .hero { min-height: calc(100svh - var(--cab-h)); display: flex; flex-direction: column; justify-content: space-between; padding-top: 72px; padding-bottom: 1.5rem; }
  .hero .phero__inner { flex: 1; align-content: space-between; }
  .hero__fig { width: min(74vw, 330px, calc((100svh - 470px) * .8)); min-width: 200px; }
}
.hero__video { object-position: 60% 50%; }
html:not(.js) .hero__video { display: none; }
.js .hero__video { inset: auto; left: 0; top: 0; transform-origin: 0 0; object-fit: fill; }
.hero__more { font-weight: 600; }
.hero__quick { display: none; }
@media (min-width: 1024px) and (min-height: 620px) {
  .hero__quick { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: clamp(2rem, 6vh, 4.5rem) 0 0; padding: 0; }
  .hero__quick a { display: flex; flex-direction: column; gap: 10px; color: var(--white); text-decoration: none; font-weight: 600; font-size: var(--step--1); }
  .hero__quick a:hover span:last-child { text-decoration: underline; text-underline-offset: .25em; }
  .hero__qimg { display: block; width: clamp(84px, 8vw, 120px); margin: 6px 6px 0; }
  .hero__qimg .arch { display: block; }
  .hero__qimg .hoop path { stroke: rgb(166 206 57 / .7); }
}
/* Live: grade layers with an arch-shaped hole replace the static grade. */
.hero__tint, .hero__shade { position: absolute; inset: 0; pointer-events: none; }
.hero__tint { z-index: 1; background: #2B5E3A; mix-blend-mode: color; opacity: .78; }
.hero__shade { z-index: 2; background: linear-gradient(to bottom, rgb(9 24 15 / .78) 0%, rgb(9 24 15 / .62) 45%, rgb(9 24 15 / .8) 100%); }
@media (min-width: 1024px) {
  .hero__shade { background: linear-gradient(to right, rgb(9 24 15 / .9) 0%, rgb(9 24 15 / .74) 45%, rgb(9 24 15 / .58) 100%); }
}
.hero.is-live .phero__bg::before, .hero.is-live .phero__bg::after { display: none; }
.hero.is-live .hero__window { background: transparent; box-shadow: none; }
.hero.is-live .hero__window-img { visibility: hidden; }
.hero__statement-live {
  position: absolute; z-index: 5; left: var(--margin); bottom: 10vh; margin: 0; max-width: min(26ch, 60vw);
  font: 800 var(--step-3)/1.06 var(--font-display); letter-spacing: -0.015em; color: var(--white); text-wrap: balance;
  opacity: 0; pointer-events: none;
}
.hero__scrim { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: linear-gradient(to top, rgb(9 24 15 / .8) 0%, rgb(9 24 15 / .35) 45%, rgb(9 24 15 / 0) 75%); }
.hero__livehoop { position: absolute; z-index: 3; pointer-events: none; }
@media (min-width: 1024px) {
  .hero { height: max(600px, 100vh); height: max(600px, 100svh); min-height: 0; }
  .hero__fig { align-self: end; margin-bottom: calc(-3rem - var(--hoop-gap)); }
  .hero__fig .arch-frame { margin-bottom: 0; }
}

/* H3 what we do */
.wwd { overflow: visible; }
.wwd__title { margin-bottom: 1.5rem; max-width: 14ch; }
.wwd__block { padding-block: 1.75rem; border-top: 1px solid var(--rule); }
.wwd__block h3 { margin-bottom: .5rem; }
.wwd__block p { font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }
.wwd__own { margin: 0 var(--hoop-gap) 1.25rem; }
.wwd__stick { display: none; }
.wwd__all { margin-top: 2rem; }
@media (min-width: 1024px) {
  .wwd { padding-top: var(--section-pad); }
  .wwd__stick { display: block; grid-column: 1 / 7; grid-row: 1; position: sticky; top: calc(50vh - 22vw + 20px); align-self: start; padding: var(--hoop-gap); }
  html:not(.js) .wwd__stick { display: none; }
  .wwd__blocks { grid-column: 8 / 13; }
  html:not(.js) .wwd__blocks { grid-column: 4 / 11; }
  .js .wwd__own { display: none; }
  .wwd__block { min-height: 44vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding-block: 0; }
  .wwd__block h3 { font-size: var(--step-3); }
  .wwd__block + .wwd__block { border-top: 1px solid var(--rule); }
  .wwd__caption { min-height: 3em; }
}
.wwd__window .arch > img { clip-path: inset(100% 0 0 0); }
.wwd__window .arch > img.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.wwd__window .arch > img.was-active { clip-path: inset(0 0 0 0); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wwd__window .arch > img.is-active.is-entering { transition: clip-path var(--dur-reveal) var(--ease-out); }
}

/* H4 on the record */
.record__band { position: relative; isolation: isolate; height: 56vh; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; }
.record__band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.record__band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(9 24 15 / .85) 0%, rgb(9 24 15 / .35) 50%, rgb(9 24 15 / 0) 80%); }
.record__band-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-bottom: 28px; }
.record__band-inner h2 { color: var(--white); font-size: var(--step-4); line-height: 1; max-width: 12ch; }
.record__band-cap { margin: 0; color: rgb(246 247 242 / .8); }
.record__body { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.record__ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.record__ledger li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.record__year { font-size: var(--step-3); line-height: 1; color: var(--forest); grid-row: span 2; }
.record__site { font: 800 var(--step-1)/1.2 var(--font-display); }
.record__work { color: var(--moss); }
@media (min-width: 800px) {
  .record__ledger li { grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1fr); padding: 22px 0; }
  .record__year { grid-row: auto; }
}

/* H5 hire band: the tipper arch rises out of the band */
.hireband { position: relative; z-index: 2; padding-block: 0 var(--section-pad-s); }
.hireband__grid { row-gap: 1.75rem; }
.hireband__figure { margin: -14vw 0 0; padding-inline: var(--hoop-gap); }
.hireband__copy h2 { max-width: 14ch; }
.hireband__copy p { margin-top: .8rem; font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }
.hireband__fleet { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.hireband__item { display: block; color: var(--ink); text-decoration: none; }
.hireband__item .arch-frame { margin: 6px 6px 0; }
.hireband__label { display: block; margin-top: 12px; font-weight: 600; font-size: var(--step--1); line-height: 1.35; }
.hireband__label .stencil { display: block; font-size: 1.2rem; }
.hireband__label b { display: block; font-weight: 700; }
.hireband__item:hover .hireband__label { text-decoration: underline; }
.hireband__note { font-size: var(--step--1); margin-top: .9rem; }
@media (min-width: 1024px) {
  .hireband { padding-bottom: var(--section-pad); }
  .hireband__grid { grid-template-rows: auto auto; }
  .hireband__figure { position: absolute; top: -9vw; right: -5vw; width: 54vw; margin: 0; padding: 0; z-index: 2; }
  .hireband__copy { grid-column: 1 / 6; grid-row: 1; padding-top: var(--section-pad); min-height: calc(34vw + 2rem); }
  .hireband__copy h2 { font-size: min(var(--step-4), 4.2vw); line-height: 1; max-width: 11ch; }
  .hireband__fleet { grid-column: 1 / 9; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 170px)); justify-content: start; gap: 32px; margin: 0; }
  .hireband__foot { grid-column: 9 / 13; grid-row: 2; align-self: end; justify-self: end; text-align: right; }
}

/* H6 two prints */
.btn--white { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--white); }
.prints__grid { row-gap: 2.5rem; align-items: center; }
.prints__pair { position: relative; padding: 14px 4px 24px; }
@media (max-width: 1023.98px) {
  .prints__pair { display: grid; grid-template-columns: 1fr; }
  .prints__cart { --tilt: 3deg; position: absolute; z-index: 2; top: 0; right: 0; width: 46%; max-width: 280px; }
  .prints__yard { --tilt: -2deg; width: 64%; max-width: 380px; margin-top: 18%; }
}
.prints__copy h2 { margin-bottom: .8rem; font-size: var(--step-4); line-height: 1; }
.prints__copy .lead { margin-bottom: 1.5rem; max-width: 24ch; }
@media (min-width: 1024px) {
  .prints__pair { grid-column: 1 / 8; height: min(calc(44vw + 60px), 780px); padding: 0; }
  .prints__yard { --tilt: -2deg; --tilt-h: -1deg; position: absolute; left: 4%; top: 0; width: min(26vw, 420px); }
  .prints__cart { --tilt-h: 1.5deg; position: absolute; left: min(26vw, 420px); top: min(18vw, 300px); width: min(21vw, 340px); margin: 0; }
  .prints__pair .print:hover { transform: rotate(var(--tilt-h)) translateY(-6px); }
  .prints__copy { grid-column: 8 / 13; }
}

/* =================== SERVICES =================== */
.svc-head .page-head__copy h1 { max-width: 16ch; }
/* Jump rail: six small arches; each hoop draws on hover or focus */
.jump { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.jump__list {
  list-style: none; margin: 0; padding: 12px 4px 10px; display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--forest) transparent;
}
.jump__list li { scroll-snap-align: start; flex: none; }
.jump__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 108px; padding: 6px; color: var(--ink); text-decoration: none; font-weight: 600; }
.jump__frame { display: block; width: 96px; }
.jump__frame .arch { display: block; }
.jump__label { line-height: 1.25; }
.hoop--hover path { stroke-dasharray: var(--hl, 400px); stroke-dashoffset: var(--hl, 400px); transition: stroke-dashoffset 300ms var(--ease-arch); }
.jump__item:hover .hoop--hover path, .jump__item:focus-visible .hoop--hover path { stroke-dashoffset: 0; }
.jump__item:hover .jump__label { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 1024px) {
  .jump__list { justify-content: space-between; overflow: visible; }
  .jump__item { width: auto; }
}

/* S2 landscaping collage */
.collage { position: relative; padding-bottom: 0; }
.collage__main { margin: 0; }
.collage__main img, .collage__small img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.collage__small {
  position: relative; width: 55%; margin: -18% 0 0 auto;
  border: 10px solid var(--forest); border-bottom: 0; background: var(--forest);
}
.collage__small .caption { padding: 0 2px 4px; }
@media (max-width: 1023.98px) { .collage__main .caption { max-width: 42%; } }
.svc-land__copy h2 { margin: 2.5rem 0 1.2rem; }
.svc-list { margin-top: 1.5rem; font-weight: 500; }
.svc-land__turf { margin: 2.5rem 0 0; }
.svc-land__turf img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
  .collage { grid-column: 1 / 9; align-self: start; margin-bottom: 4rem; }
  .collage__main .caption { max-width: 52%; }
  .collage__small { position: absolute; width: 40%; right: -3%; bottom: -2%; margin: 0; }
  .svc-land__copy { grid-column: 9 / 13; }
  .svc-land__copy h2 { margin-top: 0; }
}

/* S3 the year strip */
.svc-maint__top { row-gap: 1.5rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 1024px) {
  .svc-maint__title { grid-column: 1 / 6; }
  .svc-maint__body { grid-column: 7 / 13; }
}
.year__heading { font: 700 var(--step-1)/1.3 var(--font-text); letter-spacing: 0; margin-bottom: 1.25rem; }
.year { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.year__cell { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.year__month { font-size: 1.9rem; line-height: 1; color: var(--forest); grid-row: 1 / span 2; }
.year__line { margin: 0; }
.year__photo { margin: 2px 0 12px; grid-column: 2; }
.year__photo img { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; }
.year__photo .caption { margin-top: 6px; }
.year__print { width: min(260px, 80%); padding: 6px; margin: 6px 0 16px 6px; }
.year__print figcaption { padding: 6px 2px 0; }
@media (max-width: 1099.98px) {
  .year__cell.has-photo { grid-template-rows: auto auto; }
  .year__cell.has-photo .year__line { grid-column: 2; }
}
@media (min-width: 1100px) {
  .year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; border-bottom: 1px solid var(--rule); }
  .year__cell { display: contents; }
  .year__month { grid-row: 1; padding: 16px 12px 10px; border-left: 1px solid var(--rule); font-size: clamp(1.6rem, 1rem + 1vw, 2.3rem); }
  .year__line { grid-row: 3; padding: 12px 12px 22px; border-left: 1px solid var(--rule); font-size: var(--step--1); line-height: 1.45; align-self: stretch; }
  .year__photo { grid-row: 2; margin: 0 0 4px; padding: 0 12px 0 0; align-self: end; position: relative; z-index: 1; }
  .year__photo img { max-width: none; }
  .year__photo .caption { display: none; }
  .year__cell--jan .year__month, .year__cell--jan .year__line { border-left: 0; padding-left: 0; }
  .year__cell--jan > * { grid-column: 1; }  .year__cell--feb > * { grid-column: 2; }
  .year__cell--mar > * { grid-column: 3; }  .year__cell--apr > * { grid-column: 4; }
  .year__cell--may > * { grid-column: 5; }  .year__cell--jun > * { grid-column: 6; }
  .year__cell--jul > * { grid-column: 7; }  .year__cell--aug > * { grid-column: 8; }
  .year__cell--sep > * { grid-column: 9; }  .year__cell--oct > * { grid-column: 10; }
  .year__cell--nov > * { grid-column: 11; } .year__cell--dec > * { grid-column: 12; }
  /* photos start at their month and reach into the next */
  .year__cell--feb .year__photo { grid-column: 2 / span 2; padding-left: 12px; }
  .year__cell--apr .year__photo { grid-column: 4 / span 2; padding-left: 12px; }
  .year__cell--jul .year__photo { grid-column: 7 / span 2; padding-left: 12px; }
  .year__cell--oct .year__photo { grid-column: 10 / span 2; margin-left: 18px; margin-bottom: 10px; width: auto; }
  .year__cell--jul .year__photo .caption { display: block; position: absolute; left: 20px; bottom: 6px; margin: 0; padding: 2px 6px; background: rgb(18 41 27 / .75); color: var(--white); font-size: .78rem; }
}

/* S4 tree surgery */
.svc-tree { position: relative; }
.svc-tree__grid { row-gap: 2.5rem; padding-bottom: var(--section-pad); }
.svc-tree__big { margin: 0 calc(var(--margin) * -1); position: relative; }
.svc-tree__big img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.svc-tree__bigcap { padding-inline: var(--margin); }
.svc-tree__copy h2 { margin-bottom: 1.2rem; }
.svc-tree__copy p + p { margin-top: 1rem; }
.source-line { font-size: var(--step--1); color: var(--muted); margin-top: 1.25rem !important; }
.source-line a { color: var(--link); }
.svc-tree__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; margin-top: 2.5rem; padding-inline: var(--hoop-gap); }
.svc-tree__pair figure { margin: 0; }
@media (min-width: 1024px) {
  .svc-tree__grid { padding-bottom: 0; min-height: 88vh; }
  .svc-tree__copy { grid-column: 1 / 6; grid-row: 1; padding-block: var(--section-pad); }
  .svc-tree__big { grid-column: 6 / 13; grid-row: 1; margin: 0 calc((100vw - min(100vw, var(--max) + 2 * var(--margin))) / -2 - var(--margin)) 0 0; }
  .svc-tree__big img { position: sticky; top: 0; height: max(88vh, 100vh); aspect-ratio: auto; }
  .svc-tree__big::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgb(18 41 27 / .55) 0%, rgb(18 41 27 / 0) 35%); }
  .svc-tree__bigcap { position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 16px; background: rgb(18 41 27 / .8); color: var(--white); }
  .svc-tree__grid { align-items: stretch; }
}

/* Duotone bands */
.band { position: relative; isolation: isolate; height: 34vh; min-height: 240px; display: flex; align-items: flex-end; overflow: hidden; }
.band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band--dark { height: 52vh; min-height: 320px; }
.band--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(18 41 27 / .85) 0%, rgb(18 41 27 / .5) 40%, rgb(18 41 27 / 0) 75%); }
.band--dark h2 { color: var(--white); }
.band--dark .band__credit, .band--dark .band__credit a { color: var(--on-dark-muted); }
.band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; padding-bottom: 24px; }
.band__inner h2 { font-size: var(--step-4); line-height: 1; }
.band__credit { margin: 0; }
.band__credit a { color: inherit; }

/* S5 irrigation */
.svc-irr__body { row-gap: 3rem; }
.svc-irr__media { position: relative; padding: var(--hoop-gap) var(--hoop-gap) 0; }
.svc-irr__arch { margin: 0; }
.svc-irr__head { width: 58%; margin: 1.25rem 0 0 auto; position: relative; z-index: 2; background: var(--stone); }
@media (min-width: 1024px) { .svc-irr__head { border: 10px solid var(--stone); border-bottom: 0; } }
.svc-irr__head img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-irr__copy .lead { margin-bottom: 2rem; }
@media (min-width: 700px) {
  .svc-spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 0; }
  .svc-spec > div { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); border-bottom: 0; padding-bottom: 20px; }
}
@media (min-width: 1024px) {
  .svc-irr__media { grid-column: 1 / 6; }
  .svc-irr__arch .caption { margin-left: 40%; }
  .svc-irr__head { position: absolute; width: 38%; left: -2%; bottom: -8%; margin: 0; }
  .svc-irr__copy { grid-column: 7 / 13; align-self: center; }
}

/* S6 nursery */
.svc-nursery { position: relative; }
.svc-nursery__grid { row-gap: 3rem; align-items: start; }
.svc-nursery__arch { margin: 0; padding: var(--hoop-gap) var(--hoop-gap) 0; }
.svc-nursery__copy h2 { margin-bottom: 1.2rem; }
.svc-nursery__copy p + p { margin-top: 1rem; }
.svc-nursery__print { width: 80%; margin: 2.5rem 0 0 6%; }
.svc-nursery__strip { height: 22vh; min-height: 140px; }
.svc-nursery__strip img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .svc-nursery__arch { grid-column: 1 / 8; }
  .svc-nursery__copy { grid-column: 8 / 13; padding-top: 4vw; }
  .svc-nursery__print { width: 70%; }
}

/* S7 community: dated notices */
.svc-comm__top { row-gap: 1rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 1024px) {
  .svc-comm__top h2 { grid-column: 1 / 6; }
  .svc-comm__top .lead { grid-column: 7 / 13; align-self: end; }
}
.notice { display: grid; gap: 1.5rem 0; padding-block: 2.5rem; border-top: 2px solid var(--ink); }
.notice__img { margin: 0; }
.notice__img > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.notice__img .arch-frame { margin: var(--hoop-gap) var(--hoop-gap) 0; }
.notice__date { font-size: var(--step-3); line-height: 1; color: var(--forest); margin-bottom: .6rem; }
.notice__text h3 { margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .notice { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .notice__img { grid-column: 1 / 6; }
  .notice__text { grid-column: 7 / 12; }
  .notice--flip .notice__img { grid-column: 8 / 13; grid-row: 1; }
  .notice--flip .notice__text { grid-column: 2 / 7; grid-row: 1; }
}
.quote-row { display: grid; gap: 2rem; align-items: center; padding-top: 3rem; border-top: 2px solid var(--ink); }
.porthole { margin: 0; width: 180px; }
.porthole img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--lime); }
.quote p { font: 700 var(--step-2)/1.2 var(--font-display); color: var(--forest); max-width: 30ch; text-wrap: balance; }
.quote cite { display: block; margin-top: 1rem; font-style: italic; font-size: var(--step--1); color: var(--moss); }
@media (min-width: 1024px) {
  .quote-row { grid-template-columns: 220px minmax(0, 1fr); padding-inline: 8.33%; }
}

/* S8 closing call */
.svc-call__grid { row-gap: 2.5rem; align-items: center; }
.svc-call__copy h2 { margin-bottom: 1rem; }
.svc-call__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-call__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1024px) {
  .svc-call__copy { grid-column: 1 / 6; }
  .svc-call__photos { grid-column: 7 / 13; gap: 16px; }
  .svc-call__photos img:nth-child(2) { transform: translateY(-2.5rem); }
}

/* =================== PUBLIC WORKS =================== */
.pw-head h1 { color: var(--white); }
/* P2 the register */
.register-sec__grid { row-gap: 3rem; }
.register-sec h2 { margin-bottom: 2rem; }
.register { width: 100%; border-top: 2px solid var(--ink); }
.register thead { display: none; }
.register tr { display: block; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.register th, .register td { display: block; padding: 0; text-align: left; vertical-align: top; }
.register__year .stencil { font-size: var(--step-3); line-height: 1; color: var(--forest); }
.register__site { font-weight: 700; margin-top: 10px; }
.register__work { margin-top: 2px; }
.register__how { margin-top: 6px; font-size: var(--step--1); color: var(--muted); }
.register__src { margin-top: 8px; font-size: var(--step--1); font-weight: 600; }
.register__img { display: block; margin-top: 16px; }
.register__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.register__note { margin-top: 1.5rem; font-size: var(--step--1); color: var(--moss); }
.register-sec__preview { display: none; }
@media (min-width: 1024px) {
  .register-sec__table { grid-column: 1 / 9; }
  .register { --year-w: 8.5rem; margin-left: calc(-1 * var(--margin) + 8px); width: calc(100% + var(--margin) - 8px); }
  .register thead { display: table-header-group; }
  .register tr { display: table-row; padding: 0; transition: box-shadow var(--dur-micro) linear; }
  .register th, .register td { display: table-cell; padding: 20px 14px 20px 0; border-bottom: 1px solid var(--rule); }
  .register thead th { font-size: var(--step--1); font-weight: 700; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
  .register .register__year { width: var(--year-w); padding-right: 18px; text-align: right; }
  .register tbody .register__year { padding-top: 16px; }
  .register__year .stencil { display: inline-block; padding: 2px 4px; transition: color var(--dur-micro) linear, background-color var(--dur-micro) linear; }
  .register__site { width: 22%; margin: 0; }
  .register__work { width: 26%; }
  .register__how { font-size: var(--step--1); }
  .register__src { width: 18%; }
  .register__img { display: none; }
  .register tbody tr.is-active .register__year .stencil { color: var(--lime); background: var(--forest); }
  .register tbody tr.is-active { box-shadow: inset 4px 0 0 var(--forest); }
  .register tbody tr.is-active th { box-shadow: inset 4px 0 0 var(--forest); }
  .register-sec__preview { display: block; grid-column: 9 / 13; }
  .register-sec__stick { position: sticky; top: 18vh; padding: var(--hoop-gap); padding-bottom: 0; }
  html:not(.js) .register-sec__stick { position: sticky; }
}
.preview__layer { clip-path: inset(100% 0 0 0); }
.preview__layer.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.preview__layer.was-active { clip-path: inset(0 0 0 0); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .preview__layer.is-active.is-entering { transition: clip-path 400ms var(--ease-out); }
}

/* P3 procurement */
.procure { position: relative; isolation: isolate; overflow: hidden; }
.procure__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.procure__inner { position: relative; }
.procure__lead { margin: 1.2rem 0 2.5rem; max-width: 46ch; }
.procure__plaque { max-width: 880px; margin: 0; background: rgb(18 41 27 / .55); }
.procure__plaque > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 28px; padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
.procure__plaque > div:last-child { border-bottom: 0; }
.procure__plaque dt { font-weight: 700; }
.procure__plaque dd { margin: 0; }
.procure__plaque a { color: var(--lime); }
@media (min-width: 700px) { .procure__plaque > div { grid-template-columns: 16rem minmax(0, 1fr); } }
.procure__cap { margin-top: 2.5rem; text-align: right; max-width: none; }

/* P4 mosaic */
.spaces__top { row-gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 1024px) {
  .spaces__top h2 { grid-column: 1 / 6; }
  .spaces__top .lead { grid-column: 7 / 13; align-self: end; }
}
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.mosaic__item { margin: 0; }
.mosaic__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaic__item--1 { grid-column: 1 / -1; }
.mosaic__item--1 img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); }
  .mosaic__item--1 { grid-column: 1 / 8; }
  .mosaic__item--2 { grid-column: 8 / 13; }
  .mosaic__item--1 img, .mosaic__item--2 img { aspect-ratio: auto; height: 34vw; max-height: 560px; }
  .mosaic__item--3 { grid-column: 1 / 5; }
  .mosaic__item--4 { grid-column: 5 / 9; }
  .mosaic__item--5 { grid-column: 9 / 13; }
  .mosaic__item--3 img, .mosaic__item--4 img, .mosaic__item--5 img { aspect-ratio: 4 / 5; }
}

/* =================== DEPOT =================== */
/* A1 the annotated yard */
.yard__print { max-width: 420px; margin-inline: auto; }
.yard__legend li { color: var(--white); }
.yard__grid { align-items: start; }
.yard__annot { position: relative; margin-top: 1rem; }
.yard__print { --tilt: -1.5deg; }
.yard__photo { position: relative; }
.yard__photo img { width: 100%; }
.yard__dot {
  position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--ink); font: 700 13px/1 var(--font-text);
  box-shadow: 0 0 0 2px var(--ink);
}
.yard__legend { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: callout; border-top: 1px solid var(--rule); }
.yard__legend li { counter-increment: callout; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 500; }
.yard__legend li::before {
  content: counter(callout); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--ink); font: 700 13px/1 var(--font-text); margin-top: 1px;
}
.yard__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.yard__lines path { fill: none; stroke: var(--lime); stroke-width: 1.5px; }
@media (min-width: 1024px) {
  .yard .phero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .yard__annot { margin: 0; padding-right: 200px; }
  .yard__print { width: min(28vw, calc((100svh - 230px) * .72), 440px); }
  .yard__annot.is-callouts .yard__legend { border: 0; margin: 0; position: static; }
  .yard__annot.is-callouts .yard__legend li { position: absolute; z-index: 3; display: block; padding: 0; border: 0; font-weight: 600; font-size: var(--step--1); line-height: 1.35; color: var(--white); }
  .yard__annot.is-callouts .yard__legend li::before { display: none; }
  .yard__annot.is-callouts .yard__dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px var(--forest); }
  .yard__annot.is-callouts .yard__dot span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .yard__annot.is-armed .yard__dot { transform: scale(0); }
  .yard__annot.is-armed .yard__lines path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
  .yard__annot.is-armed .yard__legend li { opacity: 0; }
  .yard__annot.is-playing .yard__dot { transform: none; transition: transform 200ms var(--ease-out); }
  .yard__annot.is-playing .yard__dot[data-dot="2"] { transition-delay: 120ms; }
  .yard__annot.is-playing .yard__dot[data-dot="3"] { transition-delay: 240ms; }
  .yard__annot.is-playing .yard__dot[data-dot="4"] { transition-delay: 360ms; }
  .yard__annot.is-playing .yard__dot[data-dot="5"] { transition-delay: 480ms; }
  .yard__annot.is-playing .yard__lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-arch); transition-delay: calc(700ms + var(--k, 0) * 120ms); }
  .yard__annot.is-playing .yard__legend li { opacity: 1; transition: opacity 300ms linear; }
  .yard__annot.is-playing .yard__legend li[data-callout="1"] { transition-delay: 1150ms; }
  .yard__annot.is-playing .yard__legend li[data-callout="2"] { transition-delay: 1270ms; }
  .yard__annot.is-playing .yard__legend li[data-callout="3"] { transition-delay: 1390ms; }
  .yard__annot.is-playing .yard__legend li[data-callout="4"] { transition-delay: 1510ms; }
  .yard__annot.is-playing .yard__legend li[data-callout="5"] { transition-delay: 1630ms; }
}

/* A2 who we work for */
.who__top { row-gap: 1.25rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.who__text .lead { margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .who__top h2 { grid-column: 1 / 5; }
  .who__text { grid-column: 6 / 13; }
}
.who__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.who__item { margin: 0; }
.who__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.who__item--1 img, .who__item--2 img { aspect-ratio: 4 / 5; }
.who__item--5 { grid-column: 1 / -1; }
.who__item--5 img { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .who__mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: start; }
  .who__item--1 { grid-column: 1 / 6; grid-row: span 2; }
  .who__item--1 img { aspect-ratio: 4 / 5; height: auto; }
  .who__item--2 { grid-column: 6 / 10; }
  .who__item--3 { grid-column: 10 / 13; }
  .who__item--2 img, .who__item--3 img { aspect-ratio: 4 / 5; }
  .who__item--4 { grid-column: 6 / 10; }
  .who__item--4 img { aspect-ratio: 4 / 3; }
  .who__item--5 { grid-column: 10 / 13; }
  .who__item--5 img { aspect-ratio: 4 / 3; }
}

/* A3 the sentence (wow 7) */
.how__sentence {
  font-size: var(--step-3); line-height: 1.12; max-width: 18ch; color: var(--ink); text-wrap: pretty;
}
@media (min-width: 1024px) { .how__sentence { font-size: var(--step-4); line-height: 1.08; max-width: 18ch; } }
.inarch { display: inline-block; vertical-align: -0.08em; overflow: hidden; width: 1.16em; height: 0.92em; margin-inline: 0.04em; }
.inarch__in { display: block; position: relative; width: 1em; height: 0.82em; margin: 0.06em 0.08em 0; }
.inarch__arch { position: absolute; inset: 0; aspect-ratio: auto; }
.inarch__arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inarch__hoop { position: absolute; left: -0.06em; top: -0.06em; width: calc(100% + 0.12em); height: calc(100% + 0.06em); overflow: visible; }
.inarch__hoop path { fill: none; stroke: var(--forest); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.how__credit { margin-top: 1.5rem; }
.notes { list-style: none; margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gap); }
.notes li { border-top: 3px solid var(--forest); padding-top: 14px; }
.notes h3 { font: 700 var(--step-1)/1.25 var(--font-text); letter-spacing: 0; margin-bottom: .5rem; }
@media (min-width: 1024px) { .notes { grid-template-columns: repeat(4, 1fr); } }

/* A4 the horizon */
.horizon { position: relative; isolation: isolate; height: 60vh; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 1024px) { .horizon { height: 78vh; min-height: 560px; } }
.horizon__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.horizon::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(18 41 27 / .82) 0%, rgb(18 41 27 / .45) 45%, rgb(18 41 27 / 0) 75%); }
.horizon__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.horizon h2 { max-width: 20ch; color: var(--white); }
.horizon__body { margin-top: 1rem; max-width: 40ch; color: var(--white); }
.horizon__cap { margin: 0; }

/* A5 find the depot */
.find__grid { row-gap: 3rem; align-items: center; }
.find__place h2 { margin-bottom: 1.5rem; }
.find__plaque { border: 1px solid var(--ink); padding: 32px; }
.find__addr { font: 800 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.find__plaque p + p { margin-top: .4rem; }
.find__plaque a { font-weight: 600; }
.find__print { width: min(90%, 420px); justify-self: center; }
@media (min-width: 1024px) {
  .find__place { grid-column: 1 / 7; }
  .find__print { grid-column: 8 / 13; width: 100%; max-width: 440px; }
}

/* A6 work with us */
.work__grid { row-gap: 2rem; align-items: center; }
.work__img { margin: 0; }
.work__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.work__copy h2 { margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .work__img { grid-column: 1 / 6; }
  .work__copy { grid-column: 7 / 12; }
}
@media (min-width: 1024px) {
  .yard__annot.is-callouts .yard__legend li[data-side="left"] { text-align: right; }
}

/* =================== CONTACT =================== */
.number__grid { row-gap: 2.5rem; align-items: end; }
.number__h1 { line-height: 1; }
.number__pre { font: 600 var(--step-1)/1.3 var(--font-text); letter-spacing: 0; color: var(--white); margin-bottom: .3rem; }
.number__tel {
  display: inline-block; white-space: nowrap; text-decoration: none; color: var(--lime);
  font: 900 clamp(3.4rem, 1rem + 11vw, 11rem)/0.95 var(--font-display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.number__tel:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .08em; }
.number__line { margin-top: .8rem; font-size: var(--step-1); color: var(--white); }
.number__line + .number__line { margin-top: .2rem; color: var(--on-dark-muted); }
.number__figure { margin: 0; width: 70%; max-width: 380px; padding: var(--hoop-gap) var(--hoop-gap) 0; }
@media (min-width: 1024px) {
  .number__copy { grid-column: 1 / 10; padding-bottom: 2rem; }
  .number__figure { grid-column: 10 / 13; width: 100%; max-width: none; }
}
.before__title { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.before__cols { display: grid; gap: 3rem var(--gap); }
@media (min-width: 800px) { .before__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.before__img { margin: 0 0 1.25rem; }
.before__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.before__col h3 { margin-bottom: 1rem; }
.before__list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
.before__list li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--rule); position: relative; }
.before__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 8px; border: 2px solid var(--forest); border-bottom: 0; border-radius: 100vmax 100vmax 0 0; }
.where { position: relative; isolation: isolate; }
.where__media { height: 60vh; min-height: 320px; }
.where__img { width: 100%; height: 100%; object-fit: cover; }
.where__inner { padding-block: 2.5rem var(--section-pad-s); }
.where__panel h2 { color: var(--white); margin-bottom: 1.5rem; }
.where__plaque { border: 1px solid var(--white); padding: 24px; font-weight: 500; font-size: var(--step-1); line-height: 1.4; margin-bottom: 1.25rem; max-width: 26rem; }
.where__panel p { margin-top: .4rem; }
.where__links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.where__links a { display: inline-block; padding: 8px 0; font-weight: 600; }
.where__cap { margin-top: 2rem; }
@media (min-width: 1024px) {
  .where { min-height: 80vh; display: flex; align-items: center; }
  .where__media { position: absolute; inset: 0; z-index: -2; height: auto; }
  .where::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgb(18 41 27 / .88) 0%, rgb(18 41 27 / .55) 45%, rgb(18 41 27 / 0) 80%); }
  .where__inner { width: 100%; padding-block: var(--section-pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
  .where__cap { margin: 0; text-align: right; }
}

/* =================== 404 =================== */
.lost h1 { color: var(--white); }
.lost__mark { width: 160px; color: var(--lime); margin-bottom: 2rem; }

/* =================== CREDITS =================== */
.credits-head__prints { position: relative; display: flex; justify-content: center; gap: 0; padding: 12px 0 20px; }
.credits-head__yard { width: 46%; }
.credits-head__cart { width: 40%; margin: 18% 0 0 -6%; }
@media (min-width: 1024px) { .credits-head__prints { grid-column: 7 / 13; } .page-head__copy + .credits-head__prints { padding-left: 4vw; } }
.credits__wrap { display: grid; gap: 3rem var(--gap); }
@media (min-width: 1024px) {
  .credits__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits__block--wide { grid-column: 1 / -1; }
}
.credits__block h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.credits__scroll { overflow-x: auto; border-top: 2px solid var(--ink); }
.credits__table { width: 100%; min-width: 860px; font-size: var(--step--1); }
.credits__table th, .credits__table td { text-align: left; vertical-align: middle; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.credits__table thead th { font-weight: 700; }
.credits__table tbody th { font-weight: 500; max-width: 34ch; }
.credits__thumb { width: 84px; }
.credits__thumb img { width: 72px; height: 72px; object-fit: cover; }
.credits__scroll:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

/* Photo heroes: page specifics */
.phero .number__tel { white-space: nowrap; font-size: min(clamp(3rem, 1rem + 8vw, 7rem), 16vh); color: var(--lime); letter-spacing: -0.03em; }
.jumpbar { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.jumpbar .jump { margin-top: 0; }