/* Studio CAVA. One stylesheet, no build step.
   Type scale and spacing are fluid clamps measured at 390, 768 and 1440 px.
   Font: Inter Tight stands in for PP Neue Montreal until a web licence is bought.
   To switch, uncomment the @font-face below, drop the licensed WOFF2 in
   assets/fonts/, and put "PP Neue Montreal" first in --font. */

/*
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
*/

/* Inter Tight, served from the site (SIL Open Font License, assets/fonts/OFL.txt): one variable file per
   subset, 300 to 700, the Latin one preloaded in every page's head. Was Google Fonts: a second host and a
   render-blocking stylesheet before any text could show. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --black: #080807;
  --white: #fcfcfc;
  --grey: #dcddde;
  --dark-grey: #545454;
  --mid-grey: #8b8b88;
  --light-grey: #f1f0ee;
  --input: #292929;
  --req: #ff6a5f;

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --w-display: 480;
  --w-strong: 600;
  --w-text: 440;

  --margin: clamp(0.875rem, 0.434rem + 1.23vw, 2.429rem);
  --gap: 1rem;
  --col: calc((100vw - 2 * var(--margin) - 11 * var(--gap)) / 12);

  --f-display: clamp(2.5rem, 1.325rem + 6.86vw, 9.5rem);
  --f-h3: clamp(2rem, 1.46rem + 2.26vw, 3.5rem);
  --f-foot: clamp(2.25rem, 2.04rem + 1.07vw, 3rem);
  --f-h4: clamp(1.2rem, 0.9rem + 1.6vw, 2.05rem);
  --f-large: clamp(1rem, 0.85rem + 0.8vw, 1.3rem);
  --f-main: clamp(1rem, 0.986rem + 0.07vw, 1.071rem);
  --f-small: 0.875rem;

  --s-2: clamp(1.75rem, 1.678rem + 0.36vw, 2.108rem);
  --s-3: clamp(2.25rem, 2.036rem + 1.07vw, 3.321rem);
  --s-4: clamp(2.5rem, 2.072rem + 2.14vw, 4.642rem);
  --pad-v: clamp(4rem, 3.142rem + 4.29vw, 8.287rem);
  --pad-v-lg: clamp(5.5rem, 4.214rem + 6.43vw, 11.929rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--f-main);
  font-weight: var(--w-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, ol, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-align: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.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; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.cq { container-type: inline-size; }
.center { display: flex; justify-content: center; }

/* Type roles */
.label { font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; line-height: 1.2; letter-spacing: -0.01em; }
.large { font-size: var(--f-large); line-height: 1.2; }
.h3 { font-size: var(--f-h3); font-weight: var(--w-strong); line-height: 1.05; letter-spacing: -0.03em; }
.display { font-size: var(--f-display); font-weight: var(--w-display); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.display > span { display: block; }
.indent-2 { padding-left: calc(2 * (var(--col) + var(--gap))); }
.display .right { text-align: right; }
/* a two-line title steps down: the second line starts where the first ends, a little before it
   (titles.js sets it right instead when it is too long for the room left) */
.display:has(> .right) { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.display:has(> .right) > span:first-child { grid-column: 1; }
.display:has(> .right) > .right { grid-column: 2; grid-row: 2; text-align: left; margin-left: -0.3em; }
.display:has(> .right) > .right.is-wide { grid-column: 1 / -1; text-align: right; margin-left: 0; }

/* Links and buttons */
.ulink {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size 0.5s var(--ease);
  padding-bottom: 1px;
}
.ulink:hover { background-size: 100% 1px; background-position: 0 100%; }

.btn {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: 100vw;
  font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; line-height: 1;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: #262624; }
.btn--light { background: var(--light-grey); color: var(--black); }
.btn--light:hover { background: var(--grey); }
/* on the dark enquiry sheet the light buttons stay white */
.modal .btn--light { background: var(--white); }
.modal .btn--light:hover { background: var(--grey); }
.btn__dot {
  display: inline-block; width: 0.45rem; height: 0.45rem; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s var(--ease);
}
.btn:hover .btn__dot, .hero__view:hover .btn__dot { background: currentColor; transform: scale(1.35); }
.pill {
  display: inline-flex; align-items: center;
  padding: 1rem 1.1rem; border-radius: 100vw;
  background: var(--light-grey); color: var(--black);
  font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; line-height: 1;
}
.pill:hover { background: var(--grey); }

/* Hero: pinned while the page slides over it */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 34rem;
  overflow: hidden; color: var(--white); background: var(--black);
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img { transition: opacity 1.6s var(--ease); }
.hero__img.is-off { opacity: 0; }
.hero__row > * { transition: opacity 0.35s var(--ease); }
.hero__row.is-fading > [data-hero-name], .hero__row.is-fading > [data-hero-place] { opacity: 0; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(#08080752, #0808076b); }

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: var(--margin) var(--margin) 0;
}
.nav__brand { grid-column: 1 / span 6; justify-self: start; font-size: var(--f-h3); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.05; }
.nav__links { grid-column: 7 / span 4; }
.nav__cta { grid-column: 11 / span 2; justify-self: end; }
.nav__menu { display: none; }
/* The same page in the other language: last in the nav row (after an en space, so a wrapped
   line starts flush), in the menu and in the footer */
.menu__links .menu__lang { margin-top: 0.9rem; font-size: var(--f-h4); color: var(--mid-grey); }
.menu__links .menu__lang:hover { color: inherit; }

.hero__row {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--margin);
}
.hero__row > :nth-child(1) { grid-column: 1 / span 4; }
.hero__row > :nth-child(2) { grid-column: 5 / span 4; }
.hero__row > :nth-child(3) { grid-column: 9 / span 3; }
.hero__row > :nth-child(4) { grid-column: 12; justify-self: end; display: inline-flex; align-items: center; gap: 0.75rem; white-space: nowrap; }

.hero__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
  padding: var(--margin);
}
.hero__title { max-width: 28.5ch; font-size: var(--f-h4); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.hero__scroll { white-space: nowrap; }

/* Floating pills once the hero is gone */
.float {
  position: fixed; top: var(--margin); right: var(--margin); z-index: 50;
  display: flex; gap: 0.5rem;
  opacity: 0; transform: translateY(-0.5rem); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.float.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* WhatsApp, bottom right. Same height and ink as the pills; the label opens to the left on hover. */
.wa {
  position: fixed; right: var(--margin); bottom: var(--margin); z-index: 50;
  display: inline-flex; flex-direction: row-reverse; align-items: center;
  height: 3.05rem; padding: 0 0.95rem; border-radius: 100vw;
  background: var(--black); color: var(--white);
  box-shadow: 0 0 0 1px rgba(252, 252, 252, 0.16);
  opacity: 0; transform: translateY(0.5rem); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background-color 0.3s;
}
.wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa:hover { background: #262624; }
.wa__icon { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }
.wa__label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s var(--ease), margin-right 0.5s var(--ease); }
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 7rem; margin-right: 0.7rem; }

/* Everything after the hero covers it */
.page { position: relative; z-index: 1; background: var(--white); }

/* About */
.about { padding: var(--s-3) var(--margin) var(--pad-v-lg); }
.about .display { margin-bottom: var(--s-2); }
.about__body { row-gap: var(--s-2); }
.about__img { grid-column: 5 / span 4; grid-row: 1; }
.about__img img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.about__text { grid-column: 5 / span 4; grid-row: 2; }
.about__text .large { max-width: 34ch; margin-bottom: 1em; }
.about__text .btn { margin-top: 1rem; }
.about__label { grid-column: 12; grid-row: 2; justify-self: end; white-space: nowrap; }

/* Works */
.works { padding: 0 var(--margin) var(--pad-v); }
.works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: var(--s-2); }
.works__title .indent-2 { padding-left: calc(2 * ((100cqw - 11 * var(--gap)) / 12 + var(--gap))); }
.work__media { display: block; width: 100%; overflow: hidden; background: var(--light-grey); cursor: zoom-in; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work__media:hover img, .work__media:focus-visible img { transform: scale(1.035); }
.work__cap { display: flex; align-items: baseline; gap: 1.1rem; margin-top: 0.6rem; }
.work__meta { margin-left: auto; color: var(--dark-grey); font-weight: var(--w-text); text-align: right; }
.cards.works__cards { margin-bottom: var(--pad-v); } /* .cards, later in the file, resets margins */
.works__more { flex-wrap: wrap; gap: 0.5rem; }
.works__renders { background: var(--light-grey); }

/* Process */
.process { padding: var(--pad-v) var(--margin); row-gap: var(--s-3); align-items: start; }
.process__aside { grid-column: 1 / span 3; position: sticky; top: 6rem; }
.steps { list-style: none; padding: 0; margin: 0.9rem 0 1rem; font-size: var(--f-small); border-top: 1px solid var(--grey); }
.steps li { border-bottom: 1px solid var(--grey); }
.steps__btn { display: flex; gap: 0.9rem; width: 100%; padding: 0.55rem 0; border: 0; background: none; font: inherit; color: var(--dark-grey); text-align: left; cursor: pointer; transition: color 0.3s var(--ease); }
.steps__btn span { font-variant-numeric: tabular-nums; }
.steps__btn[aria-pressed="true"], .steps__btn:hover { color: var(--black); }
.steps__btn[aria-pressed="true"] { font-weight: var(--w-strong); }
.steps__btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.steps__more { font-size: var(--f-small); }
.process__fig { margin: 0 0 var(--s-3); }
.process__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--light-grey); }
.process__pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s var(--ease); }
.process__pic.is-on { opacity: 1; }
.process__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process__cap { display: grid; margin-top: 0.6rem; }
.process__capline { grid-area: 1 / 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease); }
.process__capline.is-on { opacity: 1; visibility: visible; }
/* a row of process images that scrolls sideways (studio stages, service pages) */
.pstrip { list-style: none; margin: 0; padding: 0 0 0.6rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 28%); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pstrip li { scroll-snap-align: start; min-width: 0; }
.pstrip:has(> li:only-child) { grid-auto-columns: minmax(14rem, 56%); }
.pstrip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--light-grey); }
.stage__strip { grid-column: 3 / -1; margin-top: var(--s-2); }
.svc__pics { padding: 0 0 var(--s-3); }
.process__main { grid-column: 5 / span 8; }
.process__main .h3 { max-width: 24ch; margin-bottom: var(--s-3); text-wrap: pretty; }
.process__main .indent { text-indent: 1.45em; }

/* Interiors */
.interiors { padding: var(--pad-v) var(--margin); row-gap: 1rem; align-items: start; }
.interiors__label { grid-column: 1 / -1; }
.interiors__left { grid-column: 1 / span 5; }
.interiors__media { aspect-ratio: 1.52; margin-bottom: 1.25rem; }
.interiors__left .large { max-width: 40ch; margin-bottom: 1.25rem; }
.interiors__right { grid-column: 8 / span 5; }
.interiors__right .work__media { aspect-ratio: 0.75; }

/* Closing statement */
.cta { padding: var(--pad-v) var(--margin) var(--s-2); }
.cta .center { margin-top: var(--s-2); }

/* Map */
.map { border-top: 1px solid var(--grey); padding-top: 1rem; }
.map__head { display: flex; justify-content: space-between; gap: 1rem; padding: 0 var(--margin) 1rem; }
.map__frame { position: relative; }
.map__canvas { height: 80vh; height: 80svh; min-height: 28rem; max-height: 60rem; background: var(--light-grey); }
.map__card {
  position: absolute; left: var(--margin); bottom: var(--margin); z-index: 2;
  display: grid; gap: 0.6rem; max-width: 22rem; padding: 1.25rem;
  background: var(--white); color: var(--black);
}
.map__name { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.1; }
.map__fallback { display: grid; place-items: center; height: 100%; padding: 2rem; text-align: center; color: var(--dark-grey); }
.pin { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; pointer-events: none; }
.pin__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 4px rgba(252, 252, 252, 0.95), 0 0 0 5px rgba(8, 8, 7, 0.18); }
.pin__label { background: var(--black); color: var(--white); padding: 0.45rem 0.65rem; border-radius: 100vw; font-size: 0.75rem; font-weight: var(--w-strong); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.maplibregl-ctrl-attrib { font-family: var(--font); font-size: 11px; }
.maplibregl-ctrl-group { border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--grey); }
.maplibregl-cooperative-gesture-screen { font-family: var(--font); }

/* Footer */
.footer { border-top: 1px solid var(--grey); padding: var(--s-2) var(--margin) 1.5rem; }
.footer__top { row-gap: 2.5rem; }
.footer__brand { grid-column: 1 / span 3; }
.footer__img { width: 100%; aspect-ratio: 0.8; object-fit: cover; margin-bottom: 1.25rem; }
.footer__word { font-size: calc(100cqw / 2.62); font-weight: 700; line-height: 0.78; letter-spacing: -0.045em; margin-left: -0.04em; }
/* two lines frame the footer: the photo (or the word), the large links and the studio text start on
   one; the word CAVA and the small link groups end on the other */
.footer__brand { grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.footer__brand .footer__img { flex: 1 0 auto; height: auto; }   /* where the links run taller, the photo grows to meet their top line */
.footer__nav { grid-column: 5 / span 4; grid-row: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
.footer__info { grid-row: 1; align-self: start; }
.footer__more { grid-column: 5 / -1; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.75rem; }
.footer__group { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; font-size: var(--f-main); line-height: 1.3; }
.footer__group .label { margin-bottom: 0.6rem; }
.footer__nav .label { margin-bottom: 1rem; }
.footer__link { font-size: var(--f-foot); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.05; }
.footer__link:hover { color: var(--dark-grey); }
.footer__info { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 2.5rem; }
.footer__info .label { display: block; margin-bottom: 1rem; }
.footer__info p { max-width: 36ch; }
.footer__careers { display: inline-block; margin-top: 0.9rem; }
.info div { display: flex; gap: 0.3rem; }
.info dt { font-weight: var(--w-strong); }
.footer__mark { width: 3.5rem; height: 3.5rem; }
.footer__bottom { margin-top: var(--pad-v); align-items: end; row-gap: 1rem; }
.footer__bottom > :nth-child(1) { grid-column: 1 / span 4; }
.footer__bottom > :nth-child(2) { grid-column: 5 / span 4; }
.footer__bottom > :nth-child(3) { grid-column: 9 / span 3; }
.footer__bottom > :nth-child(4) { grid-column: 12; justify-self: end; white-space: nowrap; }

/* Sheets: enquiry and menu */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: flex-end;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear 0.8s;
}
.modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal__overlay { position: absolute; inset: 0; background: rgba(8, 8, 7, 0.65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.6s var(--ease); }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 50rem; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem; background: var(--black); color: var(--white);
  transform: translateX(100%); transition: transform 0.8s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }
.progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.progress__bar { display: block; height: 100%; width: 12.5%; background: var(--white); transition: width 0.875s var(--ease); }
.modal__top { display: flex; justify-content: space-between; gap: 1rem; }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 1rem; }
.modal__intro { max-width: 31ch; }
.modal__thumb { width: 10rem; aspect-ratio: 0.75; object-fit: cover; flex: none; }

.enq, .enq__done { margin-top: auto; padding-top: 3rem; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.step.is-active { display: block; animation: step-in 0.5s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.step__title { display: flex; justify-content: space-between; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--dark-grey); }
.field { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.field label, .q { font-size: var(--f-main); }
.req { color: var(--req); }
.hint { color: var(--mid-grey); }
.input {
  width: 100%; height: 4rem; padding: 0 0.9rem;
  background: var(--input); color: var(--white);
  border: 0; border-radius: 4px; font: inherit; font-size: 1rem; letter-spacing: 0;
}
textarea.input { height: 9rem; padding: 0.9rem; resize: vertical; line-height: 1.35; }
.input::placeholder { color: var(--mid-grey); }
.input:focus { outline: 1px solid var(--white); outline-offset: 0; }
.input[aria-invalid="true"] { outline: 1px solid var(--req); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.tile { position: relative; display: block; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile span {
  display: flex; align-items: center; justify-content: center; min-height: 3.9rem; padding: 0.75rem;
  background: var(--input); border-radius: 4px; cursor: pointer;
  font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; text-align: center; line-height: 1.2; text-wrap: balance;
  transition: background-color 0.25s, color 0.25s;
}
.tile span:hover { background: #333331; }
.tile input:checked + span { background: var(--white); color: var(--black); }
.tile input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.note { font-size: 0.8125rem; color: var(--mid-grey); max-width: 62ch; line-height: 1.3; }
.err { display: none; font-size: 0.8125rem; color: var(--req); }
.err.is-on { display: block; }
.enq__nav { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.enq__thanks { font-size: var(--f-h3); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.05; margin: 1rem 0; outline: none; }
.enq__done p:not(.enq__thanks) { max-width: 44ch; }

.menu__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: auto; padding-top: 3rem; }
.menu__links a { font-size: var(--f-h3); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.08; }
.menu__links a:hover { color: var(--mid-grey); }
.menu__foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--dark-grey); }

/* Render viewer */
.lb {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem;
  padding: 1.5rem var(--margin); background: var(--black); color: var(--white);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.lb__top, .lb__bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.lb__title { flex: 1; text-align: center; }
.lb__alt { flex: 1; text-align: center; color: var(--mid-grey); font-weight: var(--w-text); text-transform: none; }
.lb__stage { min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Brand mark (the C and A of the logo) next to the name */
.brand__mark { width: 0.8em; height: 0.8em; fill: currentColor; flex: none; }
.nav__brand, .bar__brand { display: inline-flex; align-items: center; gap: 0.3em; }

/* ---------- Subpages: /projects/ and each project ---------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: 0.85rem var(--margin);
  background: rgba(252, 252, 252, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grey);
}
.bar__brand { grid-column: 1 / span 5; justify-self: start; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1; }
.bar__links { grid-column: 7 / span 4; }
.bar__links [aria-current="page"] { background-size: 100% 1px; background-position: 0 100%; }
.bar__cta { grid-column: 11 / span 2; justify-self: end; }

.plist { padding: var(--s-3) var(--margin) var(--pad-v); }
.plist__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: var(--s-3); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); }
.card__link { display: block; }
.card__media { display: block; aspect-ratio: 1.455; overflow: hidden; background: var(--light-grey); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card__link:hover img, .card__link:focus-visible img { transform: scale(1.035); }
.card__cap { display: flex; align-items: baseline; gap: 1.1rem; margin-top: 0.6rem; }
.card__meta { margin-left: auto; color: var(--dark-grey); font-weight: var(--w-text); text-align: right; }

.proj__head { padding: var(--s-3) var(--margin) var(--s-2); }
.proj__crumb { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: var(--s-2); }
.proj__title { text-wrap: balance; }
.proj__cover img { width: 100%; max-height: 92vh; max-height: 92svh; object-fit: cover; }
.proj__body { padding: var(--s-3) var(--margin) var(--pad-v); row-gap: 1rem; align-items: start; }
.sheet__label { grid-column: 1 / span 4; grid-row: 1; }
/* the label sits on its own row, so the map and the sheet start on one line: the map's top edge on the sheet's top rule */
.sheet { grid-column: 5 / span 8; grid-row: 2 / span 3; border-top: 1px solid var(--black); }
.sheet > div { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; column-gap: var(--gap); padding: 0.8rem 0; border-bottom: 1px solid var(--grey); }
.sheet dt { font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; padding-top: 0.2em; }
.sheet dd { font-size: var(--f-large); }
.sheet .tbc { color: var(--mid-grey); }
.sheet__note { grid-column: 5 / span 8; grid-row: 5; margin-top: 0.25rem; }
/* Location map: under the sheet label on wide screens, after the sheet on phones */
.pmap { grid-column: 1 / span 3; grid-row: 2 / span 3; margin-top: 0; }
.pmap__canvas { aspect-ratio: 1; background: var(--light-grey); overflow: hidden; }
.pmap__canvas .maplibregl-ctrl-attrib { font-size: 10px; }
.pmap__cap { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.6rem; }
.pmap__note { color: var(--dark-grey); font-weight: var(--w-text); }
.pmap__ph { margin-top: 0.4rem; }
.pin--placeholder .pin__dot { background: var(--light-grey); box-shadow: 0 0 0 2px var(--black), 0 0 0 5px rgba(252, 252, 252, 0.95); }
.pin--placeholder .pin__label { background: var(--white); color: var(--dark-grey); box-shadow: 0 0 0 1px var(--grey); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--margin) var(--pad-v); }
.gallery--one { grid-template-columns: minmax(0, 1fr); }
.gallery--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--three .gallery__item:last-child:nth-child(odd) { grid-column: auto; }
.gallery--three .gallery__item:last-child:nth-child(odd) img { aspect-ratio: var(--ratio); }
.gallery--one img { max-height: 92vh; max-height: 92svh; object-fit: cover; }
.gallery__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gallery__item img { width: 100%; aspect-ratio: var(--ratio, auto); object-fit: cover; }
.gallery__item:last-child:nth-child(odd) img, .gallery--one .gallery__item img { aspect-ratio: auto; }
.next { border-top: 1px solid var(--grey); }
.next__link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: var(--s-3) var(--margin); }
.next__name { text-align: right; transition: color 0.3s; }
.next__link:hover .next__name { color: var(--dark-grey); }

.reach { padding: var(--pad-v) var(--margin); border-top: 1px solid var(--grey); row-gap: 1rem; align-items: start; }
.reach__label { grid-column: 1 / span 4; }
.reach__main { grid-column: 5 / span 8; }
.reach__main .h3 { max-width: 22ch; margin-bottom: var(--s-2); text-wrap: pretty; }
.reach__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reach__mail { background: var(--light-grey); }

/* ---------- Studio: what we believe (one word per belief, opens like a drawer), then the process ---------- */
:root { --f-belief: clamp(2.5rem, 1.4rem + 4.8vw, 6.75rem); }
.mf { padding: var(--s-3) var(--margin) var(--pad-v); }
.mf__head { row-gap: var(--s-2); margin-bottom: var(--s-4); }
.mf__label, .mf__title { grid-column: 1 / -1; }
.mf__intro { grid-column: 5 / -1; text-wrap: pretty; }
.beliefs { border-bottom: 1px solid var(--grey); }
.belief { border-top: 1px solid var(--grey); }
.belief__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: 1rem 0 0.85rem; cursor: pointer; list-style: none;
}
.belief__head::-webkit-details-marker { display: none; }
.belief__word {
  grid-column: 3 / span 9; font-size: var(--f-belief); font-weight: var(--w-display); line-height: 0.95;
  letter-spacing: -0.03em; text-transform: uppercase; transition: color 0.3s var(--ease);
}
.belief__head:hover .belief__word { color: var(--dark-grey); }
.belief__sign { grid-column: 12; justify-self: end; font-size: var(--f-h4); font-weight: 300; line-height: 1; }
.belief__sign::before { content: "+"; }
.belief[open] .belief__sign::before { content: "\2212"; }
.belief__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-2);
  align-items: start; padding: 0.6rem 0 var(--s-4);
}
.belief__sub { grid-column: 3 / span 3; color: var(--dark-grey); }
.belief__text { grid-column: 6 / span 6; display: grid; gap: 1em; max-width: 44rem; }
.belief__img { grid-column: 6 / -1; }
.belief__img img { width: 100%; }
.belief__img figcaption { margin-top: 0.6rem; }

.stages-sec { padding: var(--pad-v) var(--margin) var(--s-4); scroll-margin-top: 4.5rem; }
.stages__head { row-gap: var(--s-2); margin-bottom: var(--s-4); }
.stages__label, .stages__title { grid-column: 1 / -1; }
.stages__intro { grid-column: 5 / -1; text-wrap: pretty; }
.stages { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey); }
.stage {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0.6rem;
  align-items: baseline; padding: 1.1rem 0 1.5rem; border-top: 1px solid var(--grey);
}
.stage__n { grid-column: 1 / span 2; color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.stage__title { grid-column: 3 / span 4; margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.stage__text { grid-column: 7 / span 6; max-width: 40rem; }

/* ---------- Town pages: what building in one place involves, from its data ---------- */
.tw__title { margin: 0; }
.tw__title .display { display: block; margin-top: 0.6rem; }
.tw__intro { padding: 0 var(--margin) var(--s-2); }
.tw__lead { grid-column: 5 / -1; display: grid; gap: 1.25rem; justify-items: start; }
.tw__standfirst { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; max-width: 40ch; }
.tw__lead .large { max-width: 46ch; }
.tw__facts { padding-bottom: var(--s-4); }
.pmap__town { margin-top: 0.9rem; }
.tw__sec { padding: var(--s-3) var(--margin) var(--s-4); border-top: 1px solid var(--grey); margin: 0 var(--margin); padding-left: 0; padding-right: 0; row-gap: var(--s-2); align-items: start; }
.tw__label { grid-column: 1 / span 4; }
.tw__fig { grid-column: 5 / -1; margin: 0; }
.tw__text { grid-column: 5 / -1; display: grid; gap: 1em; max-width: 46rem; }
.tw__aside { grid-column: 5 / -1; max-width: 46rem; }
.tw__sources { grid-column: 1 / -1; margin: 0 var(--margin) var(--pad-v); padding-top: var(--s-2); border-top: 1px solid var(--grey); max-width: none; }

/* rain by month: HTML bars, so the numbers stay readable at any width */
.rain { --rg: clamp(2px, 0.7vw, 0.75rem); --band: 3.4rem; }
.rain__plot { position: relative; height: clamp(11rem, 16vw, 15rem); margin: var(--band) 0 0 2rem; border-bottom: 1px solid var(--black); }
.rain__tick { position: absolute; left: 0; right: 0; bottom: calc(var(--v) * 100%); border-top: 1px solid var(--grey); }
.rain__tick > span { position: absolute; right: calc(100% + 0.4rem); top: -0.6em; font-size: 0.6875rem; color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.rain__bars, .rain__months, .rain__days { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rg); list-style: none; margin: 0; padding: 0; }
.rain__bars { position: absolute; inset: 0; }
.rain__col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.rain__bar { display: block; height: calc(var(--v) * 100%); min-height: 1px; background: var(--black); }
.rain__col.is-dry .rain__bar { background: var(--mid-grey); }
.rain__val { margin-bottom: 0.25rem; font-size: 0.6875rem; text-align: center; color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.rain__months { margin: 0.45rem 0 0 2rem; font-size: 0.6875rem; font-weight: var(--w-strong); text-transform: uppercase; text-align: center; }
.rain figcaption { margin-top: 0.9rem; }
/* the best time to build, dimensioned like a drawing: it closes the year, so it sits at the right end */
.rain__window {
  /* extension lines start just above the dimension line, as on a drawing; the text sits above them */
  --ext: 1.2rem;
  position: absolute; top: calc(-1 * var(--ext)); bottom: 0; right: 0;
  left: calc((12 - var(--wn)) * ((100% - 11 * var(--rg)) / 12 + var(--rg)) - var(--rg) / 2);
  border-left: 1px dashed var(--dark-grey); border-right: 1px dashed var(--dark-grey);
  pointer-events: none;
}
.rain__hatch { position: absolute; inset: var(--ext) 0 0 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--black) 16%, transparent) 0 1px, transparent 1px 7px); }
.rain__dim { position: absolute; left: 0; right: 0; top: 0.35rem; border-top: 1px solid var(--black); }
.rain__dim::before, .rain__dim::after { content: ""; position: absolute; top: -0.42rem; width: 1px; height: 0.8rem; background: var(--black); transform: rotate(45deg); }
.rain__dim::before { left: 0; }
.rain__dim::after { right: 0; }
.rain__dimlabel { position: absolute; right: 0; bottom: calc(100% + 0.3rem); display: grid; justify-items: end; gap: 0.15rem; white-space: nowrap; font-size: 0.6875rem; line-height: 1.15; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rain__dimlabel b { font-weight: var(--w-strong); }
.rain__dimlabel span { color: var(--dark-grey); }
/* the rest of the year: building goes on in the rains; a lighter dimension, from the left */
.rain__rest {
  --ext: 1.2rem;
  position: absolute; top: calc(-1 * var(--ext)); left: 0; height: var(--ext);
  width: calc((12 - var(--wn)) * ((100% - 11 * var(--rg)) / 12 + var(--rg)) - var(--rg) * 1.5);
  pointer-events: none;
}
.rain__rest .rain__dim { border-top-color: var(--mid-grey); }
.rain__rest .rain__dim::before, .rain__rest .rain__dim::after { background: var(--mid-grey); }
.rain__rest .rain__dimlabel { right: auto; left: 0; justify-items: start; white-space: normal; max-width: 100%; }
.rain__rest .rain__dimlabel b { color: var(--dark-grey); }
@media (max-width: 599px) {
  .rain { --band: 6.6rem; }
  .rain__rest .rain__dimlabel { bottom: calc(100% + 2.3rem); }
}
.rain__days { margin: 0.35rem 0 0 2rem; font-size: 0.625rem; text-align: center; color: var(--mid-grey); font-variant-numeric: tabular-nums; position: relative; }
.rain__days::before { content: attr(data-row); position: absolute; right: calc(100% + 0.4rem); top: 0; color: var(--dark-grey); }
.rain__days .is-many { color: var(--black); font-weight: var(--w-strong); }
.tw__build { padding-top: var(--s-2); border-top: 1px solid var(--grey); }
.tw__build-title { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; }

/* wind and sun map */
.cmap { margin: 0; }
.cmap__canvas { position: relative; aspect-ratio: 16 / 10; background: var(--light-grey); overflow: hidden; }
.cmap__wind { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cmap__canvas .maplibregl-ctrl-top-left, .cmap__canvas .maplibregl-ctrl-bottom-right { z-index: 3; }
.cmap__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.9rem; }
.cmap__seg { display: inline-flex; border: 1px solid var(--black); border-radius: 100vw; overflow: hidden; }
.cmap__seg button, .cmap__toggle { padding: 0.6rem 0.95rem; border: 0; background: transparent; color: var(--black); font: inherit; font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; line-height: 1; cursor: pointer; }
.cmap__toggle { border: 1px solid var(--black); border-radius: 100vw; }
.cmap__seg button[aria-pressed="true"], .cmap__toggle[aria-pressed="true"] { background: var(--black); color: var(--white); }
.cmap__sun { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.9rem; color: var(--dark-grey); }
.cmap__sun[hidden] { display: none; }
.cmap__scale { display: inline-grid; width: min(16rem, 100%); gap: 0.25rem; }
.cmap__bar { display: block; height: 0.55rem; opacity: 0.85; }
.cmap__ticks { display: flex; justify-content: space-between; font-weight: var(--w-text); font-variant-numeric: tabular-nums; }
.cmap figcaption { margin-top: 0.7rem; }
.hub__map { margin-top: var(--s-2); }
.tw__sec > .cmap { grid-column: 5 / -1; }

/* wind roses: petals point into the wind */
.roses__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 44rem; }
.roses__row--one { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.rose { margin: 0; }
.rose svg { display: block; width: 100%; height: auto; overflow: visible; }
.rose figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
.rose__calm { color: var(--dark-grey); font-weight: var(--w-text); }
.rose__ring { fill: none; stroke: var(--grey); stroke-dasharray: 2 3; }
.rose__axis { fill: none; stroke: var(--grey); }
.rose__card { font-size: 11px; font-weight: 600; fill: var(--dark-grey); text-anchor: middle; }
.rose__pct { font-size: 9px; fill: var(--mid-grey); }
.rose__b0 { fill: var(--grey); background: var(--grey); }
.rose__b1 { fill: color-mix(in srgb, var(--grey), var(--mid-grey)); background: color-mix(in srgb, var(--grey), var(--mid-grey)); }
.rose__b2 { fill: var(--mid-grey); background: var(--mid-grey); }
.rose__b3 { fill: var(--dark-grey); background: var(--dark-grey); }
.rose__b4 { fill: var(--black); background: var(--black); }
.rose__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.1rem 0 0.7rem; }
.rose__key { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--w-text); }
.rose__key i { display: inline-block; width: 0.75rem; height: 0.75rem; }

/* sun path, seen from above */
.sunpath { grid-column: 5 / span 4; }
.sunpath svg { display: block; width: 100%; max-width: 26rem; height: auto; overflow: visible; }
.sun__ring { fill: none; stroke: var(--black); stroke-width: 1; }
.sun__ring--in { stroke: var(--grey); stroke-dasharray: 2 3; }
.sun__axis { stroke: var(--grey); stroke-width: 1; fill: none; }
.sun__card, .sun__hour { font-size: 10px; font-weight: 600; fill: var(--dark-grey); text-anchor: middle; }
.sun__hour { font-weight: 440; font-size: 9px; }
.sun__jun, .sun__equ, .sun__dec { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.sun__jun { stroke: var(--black); }
.sun__equ { stroke: var(--mid-grey); }
.sun__dec { stroke: var(--black); stroke-dasharray: 5 3; }
.sun__dot { fill: var(--black); }
.sun__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; }
.sun__key { display: inline-flex; align-items: center; gap: 0.5rem; }
.sun__key::before { content: ""; width: 1.6rem; border-top: 2px solid var(--black); }
.sun__key--equ::before { border-top-color: var(--mid-grey); }
.sun__key--dec::before { border-top-style: dashed; }
.tw__text--side { grid-column: 9 / -1; }

/* the 3D sun path, once loaded: it takes the full width and the text moves below */
.sunpath.is-3d { grid-column: 5 / -1; }
.sunpath.is-3d > svg, .is-3d .sun__legend { display: none; }
.tw__sec:has(.sunpath.is-3d) .tw__text--side { grid-column: 5 / -1; max-width: 46rem; }
.sun3d { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sun3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.sun3d canvas:active { cursor: grabbing; }
.sun3d__labels { position: absolute; inset: 0; pointer-events: none; }
.sun3d__labels span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.sun3d__card { font-size: 0.75rem; font-weight: var(--w-strong); color: var(--dark-grey); }
.sun3d__hour { font-size: 0.6875rem; color: var(--mid-grey); font-variant-numeric: tabular-nums; }
.sun3d__hint { position: absolute; right: 0; bottom: 0.25rem; color: var(--mid-grey); font-weight: var(--w-text); transition: opacity 0.4s var(--ease); pointer-events: none; }
.sun3d__hint.is-off { opacity: 0; }
.sun3d__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: end; margin-top: 1rem; }
.sun3d__ctl { display: grid; gap: 0.5rem; }
.sun3d__ctl input { width: 100%; accent-color: var(--black); }
.sun3d__read { grid-column: 1 / -1; font-size: var(--f-main); font-weight: var(--w-text); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sun3d__legend, .sun3d__note { display: none; }
.is-3d .sun3d__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 1.1rem; }
.is-3d .sun3d__note { display: block; margin-top: 0.6rem; }
.sun3d__legend-title { width: 100%; color: var(--dark-grey); }
.sun3d__key { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--w-text); }
.sun3d__key i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.sun3d__t0 { background: #8ea3b6; } .sun3d__t1 { background: #c8c7c1; } .sun3d__t2 { background: #e2b45c; } .sun3d__t3 { background: #e07b39; } .sun3d__t4 { background: #c23b22; }

.tw__steps { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey); }
.tw__steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--gap); align-items: baseline; padding: 0.9rem 0 1.1rem; border-top: 1px solid var(--grey); }
.tw__steps .label { color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.tw__steps h3 { margin: 0; font-size: var(--f-large); font-weight: var(--w-strong); line-height: 1.2; }
.tw__steps p { margin: 0; }

.tw__work { display: grid; row-gap: var(--s-2); }
/* guides: long pages with sources */
.guide__head { padding-bottom: var(--s-2); }
.guide__reviewed { grid-column: 5 / -1; max-width: 46rem; }
.guide__contents { list-style: decimal-leading-zero; margin: 0; padding-left: 2.2rem; display: grid; gap: 0.35rem; font-size: var(--f-large); }
.guide__contents ::marker { color: var(--mid-grey); font-size: var(--f-small); }
.guide__toc .guide__contents { grid-column: 5 / -1; }
.guide__body { max-width: 50rem; }
.guide__h2 { margin: 0 0 0.4rem; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.guide__steps { margin: 0.6rem 0; }
/* inside a text column, the steps take that column: their own grid placement is for section grids */
.guide__body > .tw__steps, .guide__body > .guide__sources { grid-column: auto; }
.guide__body { grid-template-columns: minmax(0, 1fr); }
.hub__table.guide__table { min-width: 36rem; } /* .hub__table asks for 56rem; a guide's tables are narrower */
.guide__table { min-width: 36rem; }
.guide__table td, .guide__table tbody th { font-size: var(--f-main); white-space: normal; }
.guide__tips { margin: 0.4rem 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.guide__tips li { padding-left: 1.4rem; position: relative; font-size: var(--f-large); line-height: 1.3; }
.guide__tips li::before { content: "→"; position: absolute; left: 0; color: var(--mid-grey); }
.cite { font-size: 0.65em; line-height: 0; margin-left: 0.1em; font-variant-numeric: tabular-nums; }
.cite a { color: var(--dark-grey); }
.guide__sources { grid-column: 5 / -1; margin: 0; padding-left: 1.6rem; display: grid; gap: 0.45rem; font-size: var(--f-small); color: var(--dark-grey); max-width: 50rem; }
.guide__sources li:target { color: var(--black); background: var(--light-grey); }
.guide__sources--inline { padding-top: 1rem; margin-top: 0.6rem; border-top: 1px solid var(--grey); }
/* fine print: the method and its sources at the foot of a tool page, small and light in a centred column */
.fine { padding: var(--s-3) var(--margin) var(--s-4); border-top: 1px solid var(--grey); }
.fine__in { max-width: 58rem; margin: 0 auto; display: grid; gap: 0.75rem; font-size: 0.78rem; line-height: 1.6; font-weight: 360; color: var(--dark-grey); }
.fine__title { margin: 0; font-size: 0.78rem; font-weight: var(--w-strong); line-height: 1.4; color: var(--black); }
.fine p { margin: 0; }
.fine .cite { font-size: 0.85em; }
.fine .cite a { color: inherit; }
.fine__sources { margin: 0.35rem 0 0; padding: 0.9rem 0 0 1.15rem; border-top: 1px solid var(--grey); display: grid; gap: 0.3rem; font-size: 0.72rem; line-height: 1.5; }
.fine__sources a { color: inherit; }
.fine__sources li:target { color: var(--black); background: var(--light-grey); }
.guide__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.guide__links a { font-size: var(--f-large); font-weight: var(--w-strong); }

/* ---------- the cost estimator ---------- */
.est > .mf__head { padding: var(--s-3) var(--margin) var(--s-3); }
.est .input, .pr .input { background: var(--white); color: var(--black); border: 1px solid var(--black); border-radius: 0.9rem; padding: 0.75rem 0.9rem; font-size: var(--f-large); }
.est__app { padding: 0 var(--margin) var(--s-4); column-gap: var(--gap); row-gap: var(--s-3); align-items: start; }
.est__form { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: 1.4rem; }
/* the instrument: the estimate and the volume, held in view while the choices scroll past */
.est__panel { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: stretch; }
.est__panel-in { position: sticky; top: 5.25rem; display: flex; flex-direction: column; gap: 1rem; }
.est__form, .est__panel, .est__out { min-width: 0; }
/* the rest of the estimate, under the choices, while the panel stays in view */
.est__out { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.est__out > [aria-labelledby="est-parts-t"] { order: 1; }
.est__out > [aria-labelledby="est-sched-t"] { order: 2; }
.est__out > .est__budget { order: 3; }
.est__out > [aria-labelledby="est-flags-t"] { order: 4; }
.est__out > [aria-labelledby="est-scope-t"] { order: 5; }
.est__out > .est__actions { order: 6; }
/* a compact head, so the tool and its drawing show on arrival */
.est > .mf__head { row-gap: 1rem; padding-top: var(--s-2); padding-bottom: 1.25rem; align-items: end; }
.est > .mf__head .mf__title { grid-column: 1 / span 6; padding-right: 2rem; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.8rem); }
.est > .mf__head .mf__intro { grid-column: 7 / -1; }
.est > .mf__head .mf__intro.h3 { font-size: var(--f-large); line-height: 1.35; letter-spacing: -0.01em; max-width: 40rem; }
.est__actions .btn { white-space: normal; }
.est__failed, .est__noscript { display: none; padding: 0 var(--margin); }
.est.is-failed .est__failed { display: block; }
.est:not(.is-ready) :is(.est__panel, .est__out) { opacity: 0.35; }
.est__field { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; min-width: 0; }
.est__field legend { padding: 0; margin-bottom: 0.6rem; }
.est__select { width: 100%; }
.est__seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--black); border-radius: 0.9rem; overflow: hidden; }
.est__opt { position: relative; display: grid; align-content: center; gap: 0.15rem; padding: 0.7rem 0.6rem; text-align: center; cursor: pointer; border-left: 1px solid var(--black); }
.est__opt:first-child { border-left: 0; }
.est__opt input { position: absolute; opacity: 0; pointer-events: none; }
.est__opt span { font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; line-height: 1.1; }
.est__opt small { font-size: 0.6875rem; line-height: 1.2; color: var(--dark-grey); }
.est__opt:has(input:checked) { background: var(--black); color: var(--white); }
.est__opt:has(input:checked) small { color: color-mix(in srgb, var(--white) 75%, transparent); }
.est__opt:has(input:focus-visible) { outline: 2px solid var(--black); outline-offset: 2px; }
.est__area { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.8rem; align-items: center; }
.est__area input[type=range] { width: 100%; accent-color: var(--black); }
.est__field:has(input[name=deck]) .est__area { grid-template-columns: minmax(0, 1fr); }
.est__num { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.est__checks label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--f-large); }
.est__checks input[type=checkbox] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--black); }
.est__block { display: grid; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--grey); }
.est__totals { display: grid; gap: 0.55rem; padding-top: 0.2rem; container-type: inline-size; }
.est__totals > * { margin: 0; }
.est__choices { display: none; }
/* four figures in a row: what moves when a choice moves */
.est__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0.3rem; padding-top: 0.8rem; border-top: 1px solid var(--grey); }
@container (max-width: 36rem) { .est__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.3rem; } .est__stat:nth-child(n+3) { margin-top: 0.8rem; } }
/* label, figure and note line up across the four, whatever the labels' length */
.est__stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.est__stat dt { align-self: end; color: var(--dark-grey); line-height: 1.2; }
.est__stat dd { margin: 0; font-size: 1.3rem; font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est__stat dd .u { font-size: 0.62em; margin-right: 0.08em; }
.est__stat dd .w { font-size: 0.62em; }
.est__stat .est__stat-sub { font-size: var(--f-small); font-weight: var(--w-text); letter-spacing: 0; color: var(--dark-grey); }
.est__stat .est__stat-sub :is(.u, .w) { font-size: 1em; }
/* the volume fills what the panel has left */
.est__vol { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--grey); }
.est__vol-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; }
/* the range on one line: as large as the column allows for its length */
.est__total { margin: 0; font-size: min(calc(var(--f-h3) * 0.86), calc(100cqi / (var(--len, 26) * 0.6))); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.02; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* figures: the number in black, the currency and the words in grey, smaller and lighter */
.est__totals .u { color: var(--mid-grey); font-weight: var(--w-text); letter-spacing: 0; }
.est__totals .w { color: var(--mid-grey); font-weight: var(--w-text); letter-spacing: 0; font-size: 0.5em; }
.est__total .u { font-size: 0.44em; vertical-align: 0.9em; margin-right: 0.06em; }
.est__total .w { margin: 0 0.1em; }
/* tall enough to read, short enough that the whole house shows on arrival */
.est__massing { display: block; width: 100%; height: clamp(14rem, calc(100svh - 35rem), 28rem); }
/* the volume: white faces, a heavy outline drawn underneath them, thin seams on top */
.est__massing polygon, .est__massing polyline, .est__massing line { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.m-sil { fill: var(--black); stroke: var(--black); stroke-width: 4px; }
.m-face { stroke: var(--black); stroke-width: 0.8px; }
.m-rf { fill: #fcfcfc; } .m-s { fill: #f4f3f0; } .m-e { fill: #e4e3df; } .m-rb { fill: #ecebe7; }
.m-seam { fill: none; stroke: var(--black); stroke-width: 0.6px; }
.m-shadow { fill: #ebe9e4; }
.m-pool { fill: #d9e8ee; stroke: var(--black); stroke-width: 0.8px; }
.m-tree line { stroke: var(--black); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-person { fill: var(--black); }
.m-dim { stroke: var(--dark-grey); stroke-width: 0.8px; }
.m-text { fill: var(--dark-grey); text-anchor: middle; font-weight: 600; }
.est__bar { display: flex; height: 1.6rem; gap: 2px; }
.est__bar span { display: flex; align-items: center; justify-content: center; min-width: 2px; overflow: hidden; font-size: 0.6875rem; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; transition: opacity 0.25s var(--ease); }
.est__bar .is-dim, .est__list .is-dim { opacity: 0.28; }
.est__list li { transition: opacity 0.25s var(--ease); }
.est__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.est__list li { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr) auto 2.6rem; gap: 0.6rem; align-items: baseline; padding-bottom: 0.35rem; border-bottom: 1px solid var(--grey); }
.est__list i { width: 0.7rem; height: 0.7rem; display: inline-block; }
.est__list b { font-weight: var(--w-strong); }
.est__list em { font-style: normal; color: var(--mid-grey); text-align: right; font-size: var(--f-small); }
.est__list--soft li { grid-template-columns: minmax(0, 1fr) auto; }
.est__sub { margin-top: 0.8rem; }
/* schedule: a Gantt over months, dry seasons hatched behind */
.est__gantt { font-size: 0.6875rem; }
.g-head, .g-row, .g-bands { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.g-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; position: relative; }
.g-track { position: relative; height: 1.05rem; }
.g-head .g-track { height: 1.1rem; border-bottom: 1px solid var(--black); }
.g-tick { position: absolute; bottom: 0.2rem; transform: translateX(-1px); padding-left: 3px; border-left: 1px solid var(--black); white-space: nowrap; font-weight: var(--w-strong); text-transform: uppercase; }
.g-tick--end { transform: translateX(-100%); padding: 0 3px 0 0; border-left: 0; border-right: 1px solid var(--black); }
.g-bands { position: absolute; inset: 0; pointer-events: none; }
.g-bands .g-track { height: 100%; }
.g-dry { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--black) 13%, transparent) 0 1px, transparent 1px 6px); }
.g-now { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--dark-grey); }
.g-name { color: var(--dark-grey); line-height: 1.15; }
.g-bar { position: absolute; top: 0.15rem; bottom: 0.15rem; min-width: 3px; }
.g-design .g-bar { background: var(--mid-grey); } .g-permits .g-bar { background: #e2b45c; } .g-build .g-bar { background: var(--black); }
.est__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-weight: var(--w-text); }
.est__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.est__key::before { content: ""; width: 0.9rem; height: 0.6rem; }
.est__key--design::before { background: var(--mid-grey); } .est__key--permits::before { background: #e2b45c; } .est__key--build::before { background: var(--black); }
.est__key--dry::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--black) 30%, transparent) 0 1px, transparent 1px 4px); outline: 1px solid var(--grey); }
.est__key[hidden] { display: none; }
.est__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.est__sticky { display: none; }
/* what each option changes in the likely total */
.est__delta { font-style: normal; font-size: 0.6875rem; line-height: 1.1; color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.est__delta:empty { display: none; }
.est__opt:has(input:checked) .est__delta { display: none; }
.est__checks .est__delta { margin-left: auto; }
.est__checks .est__lot { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; gap: 0.8rem; margin: -0.2rem 0 0.1rem 1.7rem; font-size: var(--f-main); color: var(--dark-grey); }
.est__checks .est__lot .input { height: 2.6rem; padding: 0 0.75rem; font-size: var(--f-main); border-radius: 0.7rem; }
.est__checks:not(:has(input[name=land]:checked)) .est__lot { display: none; }
.est__list .est__land { border-top: 1px solid var(--black); padding-top: 0.35rem; }
/* from a budget */
.est__budget-in { display: grid; grid-template-columns: auto minmax(0, 12rem); align-items: center; gap: 0.8rem; }
.est__fits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.est__fit { width: 100%; display: grid; gap: 0.2rem; text-align: left; padding: 0.7rem 0.8rem; border: 1px solid var(--black); border-radius: 0.9rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.est__fit b { font-size: var(--f-large); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.est__fit span { font-size: var(--f-small); text-transform: uppercase; font-weight: var(--w-strong); color: var(--dark-grey); }
.est__fit:hover, .est__fit.is-on { background: var(--black); color: var(--white); }
.est__fit:hover span, .est__fit.is-on span { color: color-mix(in srgb, var(--white) 75%, transparent); }
.est__fit:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.est__fit.is-none { border-color: var(--grey); color: var(--mid-grey); }
/* what the estimate covers */
.est__scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.est__scope h3 { margin: 0 0 0.5rem; }
.est__scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.est__scope li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); padding-bottom: 0.35rem; border-bottom: 1px solid var(--grey); line-height: 1.3; }
.est__scope li::before { font-weight: var(--w-strong); }
.est__scope-in li::before { content: "+"; }
.est__scope-out h3, .est__scope-out li { color: var(--mid-grey); }
.est__scope-out li::before { content: "\2212"; }
/* what you are building: the search over every type */
.est__combo { position: relative; }
.est__combo-in { width: 100%; padding-right: 2.6rem; text-overflow: ellipsis; }
.est .input:focus, .pr .input:focus { outline: 2px solid var(--black); outline-offset: 2px; }
.est__combo-caret { position: absolute; right: 0; top: 0; bottom: 0; width: 2.6rem; border: 0; background: none; cursor: pointer; }
.est__combo-caret::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); transition: transform 0.25s var(--ease); }
.est__combo.is-open .est__combo-caret::before { transform: translate(-50%, -30%) rotate(225deg); }
.est__combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.35rem); max-height: min(24rem, 60vh); overflow-y: auto; margin: 0; padding: 0.35rem 0; list-style: none; background: var(--white); border: 1px solid var(--black); border-radius: 0.9rem; box-shadow: 0 14px 34px rgba(8, 8, 7, 0.14); overscroll-behavior: contain; }
.est__combo-group { padding: 0.75rem 0.9rem 0.3rem; color: var(--mid-grey); }
.est__combo-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0.9rem; cursor: pointer; }
.est__combo-opt em { font-style: normal; font-size: var(--f-small); color: var(--mid-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.est__combo-opt.is-active { background: var(--light-grey); }
.est__combo-opt[aria-selected="true"] span { font-weight: var(--w-strong); }
.est__combo-none { padding: 0.6rem 0.9rem; }
.est__work .card[hidden] { display: none; }

/* photos of Costa Rica: a full-width band, credit underneath */
.place { margin: 0 var(--margin) var(--s-3); }
.place img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; background: var(--light-grey); }
.mf .place { margin-left: 0; margin-right: 0; }
.place--hub { margin-bottom: var(--s-2); }
.est > .place { margin-top: calc(-1 * var(--s-2)); }

/* services: the list on the home, the cards, and each service page */
.svc-home { padding: var(--pad-v) var(--margin) 0; row-gap: var(--s-2); align-items: start; }
.svc-home__label { grid-column: 1 / span 4; }
.svc-home__list { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey); }
.svc-home__row { display: grid; grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr) 1.5rem; column-gap: var(--gap); row-gap: 0.45rem; align-items: baseline; padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--grey); color: inherit; text-decoration: none; }
.svc-home__name { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; }
.svc-home__card { grid-column: 3; color: var(--dark-grey); line-height: 1.35; max-width: 34rem; }
.svc-home__meta { grid-column: 3; color: var(--black); font-weight: var(--w-strong); }
.svc-home__go { grid-column: 4; grid-row: 1; text-align: right; transition: transform 0.25s var(--ease); }
.svc-home__row:hover .svc-home__go, .svc-home__row:focus-visible .svc-home__go { transform: translateX(0.3rem); }
.svc-home__row:hover .svc-home__name { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.svc__cards { margin-bottom: var(--s-4); }
.svc__card-text { display: block; margin-top: 0.5rem; color: var(--dark-grey); line-height: 1.35; max-width: 34rem; }
.svc__card-fee { display: inline-block; margin-top: 0.6rem; padding: 0.3rem 0.6rem; border: 1px solid var(--black); border-radius: 100vw; font-size: 0.6875rem; }
.svc .tw__sec { margin-left: 0; margin-right: 0; }
.svc__cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.svc__cta .btn { white-space: normal; text-align: left; }
.svc__glance { grid-column: 5 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gap); }
.svc__glance dt { margin-bottom: 0.4rem; color: var(--dark-grey); }
.svc__glance dd { margin: 0; font-size: var(--f-large); line-height: 1.3; }
.svc__for { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; }
.svc__for li { padding: 0.8rem 0; border-top: 1px solid var(--grey); font-size: var(--f-large); }
.svc__for li:last-child { border-bottom: 1px solid var(--grey); }
.svc__not li { color: var(--dark-grey); }
.svc__phases { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; }
.svc__phase { display: grid; gap: 0.6rem; padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--grey); }
.svc__phase:last-child { border-bottom: 1px solid var(--grey); }
.svc__ph-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; }
.svc__ph-head h3 { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; }
.svc__time { color: var(--dark-grey); font-weight: var(--w-text); text-align: right; }
.svc__cfia { margin: 0 0 0 4rem; color: var(--dark-grey); font-weight: var(--w-text); }
.svc__phase > .large, .svc__get-label, .svc__get { margin-left: 4rem; }
.svc__phase > .large { margin-top: 0; margin-bottom: 0; max-width: 46rem; }
.svc__get-label { margin-top: 0.4rem; margin-bottom: 0; }
.svc__get { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem var(--gap); }
.svc__get li { position: relative; padding-left: 1.1rem; line-height: 1.35; }
.svc__get li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.45rem; height: 0.45rem; border: 1px solid var(--black); border-radius: 50%; }
.svc__work { padding-left: 0; padding-right: 0; }

/* the permit route: questions on one side, the flow on the other */
.prp .pr { padding: 0 0 var(--s-3); }
.pr { display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); gap: var(--s-2) calc(var(--gap) * 3); align-items: start; }
.pr__form { display: grid; gap: 1.2rem; position: sticky; top: 5.5rem; }
.pr__seg { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
.pr__seg .est__opt { border-left: 0; border-top: 1px solid var(--black); }
.pr__seg .est__opt:nth-child(-n+2) { border-top: 0; }
.pr__seg .est__opt:nth-child(even) { border-left: 1px solid var(--black); }
.pr__seg .est__opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pr__seg .est__opt span { text-transform: none; font-size: var(--f-small); }
.pr__checks label { font-size: var(--f-main); }
.pr__out { min-width: 0; transition: opacity 0.2s; }
.pr__out.is-drawing { opacity: 0.4; }
.pr__disclaimer { margin: 0 0 var(--s-3); max-width: 60rem; }
.pf__card { margin: 0 0 1.4rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--black); font-size: var(--f-large); line-height: 1.35; max-width: 46rem; }
.pf { list-style: none; margin: 0; padding: 0; display: grid; }
.pf__stage { position: relative; padding-top: 2.4rem; }
.pf__stage:first-child { padding-top: 0; }
/* the line from one stage to the next, with its arrowhead */
.pf__stage:not(:first-child)::before { content: ""; position: absolute; top: 0.25rem; left: 1.4rem; height: 1.7rem; border-left: 1px solid var(--black); }
.pf__stage:not(:first-child)::after { content: ""; position: absolute; top: 1.55rem; left: calc(1.4rem - 4px); border: 4.5px solid transparent; border-top: 6px solid var(--black); border-bottom: 0; }
.pf__stage.is-sub { padding-top: 1.6rem; }
.pf__stage.is-sub::before { height: 0.9rem; }
.pf__stage.is-sub::after { top: 0.85rem; }
.pf__name { margin: 0 0 0.7rem; color: var(--dark-grey); }
.pf__row { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.7rem; position: relative; }
/* steps asked for together hang from one bar */
.is-parallel .pf__row { padding-top: 1rem; }
.is-parallel .pf__row::before { content: ""; position: absolute; top: 0; left: 1.4rem; right: 1.4rem; border-top: 1px solid var(--black); }
.is-parallel .pf__node::before { content: ""; position: absolute; top: -1rem; left: 1.4rem; height: 1rem; border-left: 1px solid var(--black); }
/* steps one after the other are joined by an arrow */
.is-chain .pf__node + .pf__node::before { content: "→"; position: absolute; left: -0.62rem; top: 50%; transform: translate(-50%, -50%); font-size: 0.85rem; line-height: 1; color: var(--black); background: var(--white); padding: 0.1rem 0; }
.pf__node { position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 0.95rem 1rem 1rem; border: 1px solid var(--black); border-radius: 0.9rem; background: var(--white); min-width: 0; }
.pf__node.is-off { border-style: dashed; border-color: var(--mid-grey); background: transparent; color: var(--dark-grey); }
.is-parallel .pf__node.is-off::before { border-left-style: dashed; border-color: var(--mid-grey); }
.pf__who { color: var(--dark-grey); font-size: 0.6875rem; }
.pf__title { margin: 0; font-size: var(--f-large); font-weight: var(--w-strong); letter-spacing: -0.01em; line-height: 1.15; }
.pf__note { margin: 0; font-size: var(--f-small); line-height: 1.4; color: var(--dark-grey); }
.pf__note .cite a { color: inherit; }
.pf__skip { justify-self: start; margin-top: 0.2rem; padding: 0.15rem 0.5rem; border: 1px dashed var(--mid-grey); border-radius: 100vw; font-size: 0.625rem; color: var(--dark-grey); }
/* on a town page the route sits in the text column, questions above */
.tw__route { grid-column: 5 / -1; display: grid; gap: 1rem; min-width: 0; }
.tw__route .pr { grid-template-columns: 1fr; }
.tw__route .pr__form { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.tw__route .pr__form > :nth-child(3), .tw__route .pr__form > :nth-child(4) { align-self: start; }

/* the free call in a sheet over any page (book-sheet.js) */
.bks { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 3vh 2vw; }
.bks.is-on { display: grid; }
.bks__scrim { position: absolute; inset: 0; background: rgba(8, 8, 7, 0.5); opacity: 0; transition: opacity 0.4s var(--ease); }
.bks.is-open .bks__scrim { opacity: 1; }
.bks__panel { position: relative; width: min(74rem, 100%); max-height: 94vh; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--white); border-radius: 1.2rem; box-shadow: 0 30px 90px rgba(8, 8, 7, 0.28); opacity: 0; transform: translateY(2.5rem) scale(0.985); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.bks.is-open .bks__panel { opacity: 1; transform: none; }
.bks__panel::-webkit-scrollbar { display: none; }
/* close: the same square as the calendar's arrows, on the same line as the month and the day */
.bks__close { position: absolute; top: 1.7rem; right: 1.5rem; z-index: 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--grey); border-radius: 0.7rem; background: var(--white); color: var(--black); cursor: pointer; }
.bks__close:hover { border-color: var(--black); }
.bks__close svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bks__loading { padding: 4rem 2rem; text-align: center; }
.bks .bk { margin: 0; border: 0; border-radius: 0; }
.bks .bk__info { padding-top: 1.6rem; }
.bks .bk__cal-head { padding-right: 0; }
.bks .bk__times-head { flex-wrap: wrap; row-gap: 0.8rem; padding-right: 3rem; white-space: nowrap; }
.bks .bk__form-title { padding-right: 3rem; }
html.bks-lock, html.bks-lock body { overflow: hidden; }
/* the steps slide: forward to the form, back to the calendar */
@keyframes bkNext { from { opacity: 0; transform: translateX(1.75rem); } to { opacity: 1; transform: none; } }
@keyframes bkBack { from { opacity: 0; transform: translateX(-1.75rem); } to { opacity: 1; transform: none; } }
@keyframes bkFade { from { opacity: 0; } to { opacity: 1; } }
.bk[data-step="form"] .bk__form, .bk[data-step="done"] .bk__done { animation: bkNext 0.5s var(--ease) both; }
.bk[data-dir="back"][data-step="pick"] .bk__cal, .bk[data-dir="back"][data-step="pick"] .bk__times { animation: bkBack 0.5s var(--ease) both; }
.bk[data-step="form"] .bk__picked, .bk[data-step="done"] .bk__picked { animation: bkFade 0.5s var(--ease) both; }
.bk__time { transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.bk__time:active { transform: scale(0.98); }

/* book a free call: the call, a month, the times of a day; then the form */
.bkp .tw__sec { margin-left: 0; margin-right: 0; }
.bk { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(13rem, 17rem); border: 1px solid var(--grey); border-radius: 1.2rem; overflow: hidden; background: var(--white); margin-bottom: var(--s-4); min-height: 34rem; }
.bk > * { padding: 1.6rem 1.5rem; min-width: 0; }
.bk__info { display: flex; flex-direction: column; gap: 0.9rem; border-right: 1px solid var(--grey); }
.bk__mark { width: 2.25rem; height: 2.25rem; }
.bk__who { color: var(--dark-grey); margin: 0; }
.bk__title { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; }
.bk__text { margin: 0; color: var(--dark-grey); line-height: 1.4; }
.bk__facts { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.bk__facts li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.7rem; align-items: center; }
.bk__facts svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bk__tz select { width: 100%; padding: 0.3rem 1.6rem 0.3rem 0; border: 0; background-color: transparent; color: inherit; font: inherit; cursor: pointer; }
.bk__picked { display: none !important; font-weight: var(--w-strong); }
.bk__picked-tz { color: var(--dark-grey); font-weight: var(--w-text); margin-top: -0.5rem; }
.bk:is([data-step="form"], [data-step="done"]) .bk__picked { display: grid !important; }
.bk:is([data-step="form"], [data-step="done"]) .bk__tzrow { display: none; }
.bk__cal-head, .bk__times-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; min-height: 2.6rem; }
.bk__month { margin: 0; font-size: var(--f-large); text-transform: capitalize; }
.bk__month b { font-weight: var(--w-strong); }
.bk__nav { display: flex; gap: 0.3rem; }
.bk__nav button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--grey); border-radius: 0.7rem; background: transparent; color: inherit; cursor: pointer; }
.bk__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bk__nav button:hover:not(:disabled) { border-color: var(--black); }
.bk__nav button:disabled { opacity: 0.35; cursor: default; }
.bk__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.bk__grid[aria-busy="true"] { opacity: 0.4; }
.bk__dow { padding-bottom: 0.4rem; text-align: center; font-size: var(--f-small); font-weight: var(--w-strong); letter-spacing: 0.04em; color: var(--dark-grey); }
.bk__day { display: grid; place-items: center; aspect-ratio: 1 / 0.86; border: 0; border-radius: 0.7rem; font: inherit; font-variant-numeric: tabular-nums; }
button.bk__day { background: var(--light-grey); color: var(--black); font-weight: var(--w-strong); cursor: pointer; box-shadow: inset 0 0 0 1px var(--grey); }
button.bk__day:hover { box-shadow: inset 0 0 0 1px var(--black); }
button.bk__day[aria-pressed="true"] { background: var(--black); color: var(--white); box-shadow: none; }
.bk__day.is-off { color: var(--mid-grey); }
.bk__status { margin-top: 1rem; }
.bk__times { border-left: 1px solid var(--grey); }
.bk__day-title, .bk__day { text-transform: capitalize; }
.bk__times-head .bk__day { margin: 0; font-size: var(--f-large); font-weight: var(--w-strong); aspect-ratio: auto; display: block; }
.bk__h24 button { padding: 0.5rem 0.75rem; }
.bk__list { list-style: none; margin: 0; padding: 0 0 1.5rem; display: grid; gap: 0.5rem; max-height: 27rem; overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); }
.bk__list::-webkit-scrollbar { display: none; }
.bk__time { width: 100%; padding: 0.85rem 1rem; text-align: center; border: 1px solid var(--black); border-radius: 0.9rem; background: transparent; color: var(--black); font: inherit; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; cursor: pointer; }
.bk__time:hover, .bk__time:focus-visible { background: var(--black); color: var(--white); }
.bk__form, .bk__done { display: none; grid-column: 2 / -1; }
.bk[data-step="form"] .bk__cal, .bk[data-step="form"] .bk__times, .bk[data-step="done"] .bk__cal, .bk[data-step="done"] .bk__times { display: none; }
.bk[data-step="form"] .bk__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem var(--gap); align-content: start; }
.bk__form-title { margin: 0; display: flex; align-items: center; min-height: 2.6rem; color: var(--dark-grey); }
.bk[data-step="done"] .bk__done { display: grid; gap: 0.9rem; align-content: center; justify-items: start; max-width: 40rem; }
.bk__field { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.bk__field i { font-style: normal; color: var(--mid-grey); text-transform: none; font-weight: var(--w-text); }
.bk__field legend { padding: 0; margin-bottom: 0.5rem; }
.bk__wide { grid-column: 1 / -1; }
.bk .input { width: 100%; height: 3rem; background: var(--white); color: var(--black); border: 1px solid var(--grey); border-radius: 0.9rem; padding: 0 0.95rem; font-size: var(--f-main); }
.bk .input:focus { outline: 1px solid var(--black); border-color: var(--black); }
.bk textarea.input { height: 4.8rem; min-height: 3rem; padding: 0.7rem 0.95rem; resize: vertical; }
.bk__seg { grid-auto-columns: minmax(0, 1fr); }
.bk__seg .est__opt span { text-transform: none; font-weight: var(--w-strong); font-size: var(--f-small); }
.bk__legal { margin: 0; }
.bk__error { margin: 0; color: #a3341f; font-weight: var(--w-strong); }
.bk__error:empty { display: none; }
.bk__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.bk__done-title { margin: 0; font-size: var(--f-h3); font-weight: var(--w-strong); letter-spacing: -0.03em; line-height: 1.05; }
.bk__done-text { color: var(--dark-grey); }
.bk:not(.is-ready) > * { opacity: 0.5; }

/* land prices: the zone map and the town table */
.lt .tw__sec { margin-left: 0; margin-right: 0; }
.lt__map-wrap { margin-bottom: var(--s-3); }
.lmap { margin: 0; }
.lmap__canvas { position: relative; aspect-ratio: 16 / 10; max-height: 80vh; width: 100%; background: var(--light-grey); overflow: hidden; }
.lmap__canvas .maplibregl-ctrl-top-left, .lmap__canvas .maplibregl-ctrl-bottom-right { z-index: 3; }
.lmap__controls { justify-content: space-between; }
.lmap__go { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.lmap__select { padding: 0.55rem 2rem 0.55rem 0.9rem; border: 1px solid var(--black); border-radius: 100vw; background-color: var(--white); color: var(--black); font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; }
.lmap__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.9rem; color: var(--dark-grey); }
.lmap__legend ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: var(--f-small); font-variant-numeric: tabular-nums; color: var(--black); }
.lmap__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.lmap__legend i { display: inline-block; width: 0.9rem; height: 0.9rem; box-shadow: inset 0 0 0 1px rgba(8, 8, 7, 0.08); }
.lmap figcaption { margin-top: 0.7rem; max-width: 62rem; }
/* a zone's card: a bubble that follows the pointer and opens in place into the zone's detail */
.lmap__card { position: absolute; left: 0; top: 0; z-index: 4; overflow: hidden; width: max-content; max-width: min(16rem, calc(100% - 16px)); border-radius: 0.8rem; background: var(--white); color: var(--black); box-shadow: 0 1px 2px rgba(8, 8, 7, 0.1), 0 8px 26px rgba(8, 8, 7, 0.18); pointer-events: none; font-variant-numeric: tabular-nums; transform-origin: 0 0; }
.lmap__card[hidden] { display: none; }
.lmap__card.is-open { width: min(19rem, calc(100% - 16px)); max-width: none; pointer-events: auto; }
.lmap__c-in { position: relative; display: grid; gap: 0.12rem; padding: 0.6rem 0.75rem 0.6rem; }
.is-open .lmap__c-in { padding: 0.85rem 1rem 0.95rem; }
.lmap__card p, .lmap__card ul { margin: 0; }
.lmap__c-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8125rem; font-weight: var(--w-strong); line-height: 1.3; }
.is-open .lmap__c-name { padding-right: 2rem; white-space: normal; font-size: 1rem; line-height: 1.2; margin-bottom: 0.35rem; }
.lmap__c-v b { font-size: 1.15rem; font-weight: var(--w-strong); letter-spacing: -0.02em; }
.is-open .lmap__c-v b { font-size: 1.55rem; }
.lmap__c-v--ft b { font-size: 0.9375rem; }
.is-open .lmap__c-v--ft b { font-size: 1.1rem; }
.lmap__c-v i { font-style: normal; font-size: 0.75rem; color: var(--dark-grey); }
.lmap__c-v span { margin-left: 0.35rem; font-size: 0.75rem; color: var(--mid-grey); }
.lmap__c-cta { margin-top: 0.4rem !important; font-size: 0.6875rem; font-weight: var(--w-strong); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dark-grey); }
.lmap__c-more { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-top: 0.55rem; border-top: 1px solid var(--grey); font-size: var(--f-small); line-height: 1.35; color: var(--dark-grey); }
.lmap__c-list { list-style: none; padding: 0; }
.lmap__c-warn { margin-top: 0.2rem !important; color: var(--black); }
.lmap__c-x { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--black); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background-color 0.2s var(--ease); }
.lmap__c-x:hover { background: var(--light-grey); }
.lmap__c-x:focus { outline: none; }
.lmap__c-x:focus-visible { outline: 2px solid var(--black); outline-offset: 1px; }
.lt__table { min-width: 62rem; }
.lt__table td, .lt__table tbody th { vertical-align: top; }
.lt__v { display: block; font-weight: var(--w-strong); }
.lt__u { display: block; margin-top: 0.15rem; font-size: var(--f-small); color: var(--dark-grey); }
.lt__tag { padding: 0.05rem 0.35rem; border: 1px solid currentColor; border-radius: 100vw; font-size: 0.6875rem; font-weight: var(--w-strong); color: var(--dark-grey); vertical-align: 0.1em; }
.lt__na { color: var(--mid-grey); }
.lt__map { margin-left: 0.4rem; font-size: 0.6875rem; color: var(--dark-grey); }
.lt__towns > .note { margin-top: 0.9rem; max-width: 62rem; }
.lt__zones { min-width: 52rem; }
.lt__zones tbody th { font-size: var(--f-main); font-weight: var(--w-strong); white-space: normal; }
.lt__zones td.label { color: var(--dark-grey); }
.ls { display: block; width: 100%; max-width: 46rem; height: auto; overflow: visible; }
.ls__dots circle { fill: var(--black); fill-opacity: 0.32; }
.ls__iqr { fill: var(--light-grey); stroke: var(--grey); }
.ls__median { stroke: var(--black); stroke-width: 2; }
.ls__axis, .ls__tick line { stroke: var(--mid-grey); stroke-width: 1; }
.ls__tick text { fill: var(--dark-grey); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.ls__label { fill: var(--black); font-size: 11px; font-weight: 600; text-anchor: middle; }
.ls__unit { fill: var(--dark-grey); font-size: 11px; text-anchor: end; }
.lt--town .lt__map-wrap { margin-bottom: var(--s-3); }
.lt__work { padding-left: 0; padding-right: 0; }
.sc__facts { margin-bottom: var(--s-2); }
.sc__moves { max-width: 40rem; margin-bottom: 0.6rem; }
.sc__moves b { font-variant-numeric: tabular-nums; }

/* other projects at the foot of a page: similar projects, our work */
.related { display: grid; row-gap: var(--s-2); padding: 0 var(--margin) var(--pad-v); }
.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.faq { grid-column: 5 / -1; border-bottom: 1px solid var(--grey); }
.faq__item { border-top: 1px solid var(--grey); }
.faq__q { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1rem 0 1.05rem; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.faq__item h3 { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; transition: color 0.3s var(--ease); }
.faq__q:hover h3 { color: var(--dark-grey); }
.faq__sign { flex: none; font-size: var(--f-h4); font-weight: 300; line-height: 1; }
.faq__sign::before { content: "+"; }
.faq__item[open] .faq__sign::before { content: "\2212"; }
.faq__a { padding-bottom: 1.35rem; }
.faq__a p { max-width: 46rem; margin: 0; }

.near { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.near li { display: flex; align-items: baseline; gap: 1rem; }
.near a { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.15; }
.near .label { color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.near .near__all { margin-top: 0.75rem; font-size: var(--f-large); }

/* where we work: one table, every town */
.hub__wrap { overflow-x: auto; margin-top: var(--s-2); -webkit-overflow-scrolling: touch; }
.hub__table { width: 100%; min-width: 56rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hub__table th, .hub__table td { text-align: left; vertical-align: baseline; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--grey); }
.hub__table thead th { font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; color: var(--dark-grey); border-bottom-color: var(--black); }
.hub__table tbody th { font-size: var(--f-large); font-weight: var(--w-strong); white-space: nowrap; }
.hub__table td { font-size: var(--f-main); }
.hub__region th { padding-top: 1.8rem; font-size: var(--f-small) !important; text-transform: uppercase; color: var(--dark-grey); border-bottom-color: var(--black); }

/* The links stay on one line on desktop. Below 1280 px six of them no longer fit beside the button:
   Process leaves the bar (it stays in the footer, the menu and on the Studio page), and below 1200 px
   the size steps down a little. */
@media (min-width: 992px) { .bar__links, .nav__links { white-space: nowrap; } }
@media (min-width: 1100px) and (max-width: 1199px) { .bar__links, .nav__links { font-size: 0.8125rem; } }
@media (min-width: 992px) and (max-width: 1099px) { .bar__links, .nav__links { font-size: 0.72rem; } }

/* Tablet */
@media (max-width: 991px) {
  .nav__links, .bar__links { grid-column: 7 / span 3; }
  .pr { grid-template-columns: 1fr; }
  .pr__form { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .bk { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); }
  .bk__info { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--grey); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
  .bk__info > :not(.bk__mark) { grid-column: 2; }
  .bk__mark { grid-row: 1 / span 4; }
  .bk__form, .bk__done { grid-column: 1 / -1; }
  .svc-home__label, .svc-home__list { grid-column: 1 / -1; }
  .svc-home__row { grid-template-columns: 2.4rem minmax(0, 1fr) 1.2rem; row-gap: 0.35rem; }
  .svc-home__card, .svc-home__meta { grid-column: 2 / 3; }
  .svc-home__meta { text-align: left; white-space: normal; }
  .svc-home__go { grid-row: 1; grid-column: 3; }
  /* "View project" is wider than its column here: keep it clear of the place name */
  .hero__row > :nth-child(1) { grid-column: 1 / span 3; }
  .hero__row > :nth-child(2) { grid-column: 4 / span 4; }
  .hero__row > :nth-child(3) { grid-column: 8 / span 3; }
  .about__img, .about__text { grid-column: 4 / span 6; }
  .process__aside { grid-column: 1 / span 4; }
  .process__main { grid-column: 6 / span 7; }
  .interiors__left { grid-column: 1 / span 6; }
  .interiors__right { grid-column: 7 / span 6; }
  .pmap { grid-column: 1 / span 4; }
  .mf__intro, .stages__intro { grid-column: 3 / -1; }
  .belief__sub { grid-column: 3 / span 4; }
  .belief__text, .belief__img { grid-column: 3 / -1; }
  .stage__title { grid-column: 3 / span 5; }
  .stage__text { grid-column: 8 / span 5; }
  .tw__lead, .tw__fig, .tw__text, .tw__aside, .tw__steps, .faq, .near, .guide__toc .guide__contents, .guide__sources, .guide__reviewed { grid-column: 4 / -1; }
  .tw__label { grid-column: 1 / span 3; }
  .sunpath { grid-column: 4 / span 6; }
  .tw__text--side { grid-column: 4 / -1; }
  .sunpath.is-3d, .tw__sec:has(.sunpath.is-3d) .tw__text--side, .tw__sec > .cmap { grid-column: 4 / -1; }
  .est__form, .est__out { grid-column: 1 / span 6; }
  .est__panel { grid-column: 7 / -1; }
  .est > .mf__head .mf__title { grid-column: 1 / -1; }
  .est > .mf__head .mf__intro { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 767px) {
  .nav { display: flex; align-items: center; gap: 1rem; }
  .nav__brand { margin-right: auto; font-size: 1.55rem; }
  .nav__cta, .nav__sec { display: none; }
  .nav__menu { display: inline-flex; }
  .hero__row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; }
  .hero__row > * { white-space: nowrap; }
  .hero__place { display: none; }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .float .btn { display: none; }

  .about__img, .about__text { grid-column: 3 / -1; }
  .about__label { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .about__text { grid-row: 3; }

              .work__cap { gap: 0.6rem; flex-wrap: wrap; }

  .process__aside, .process__main { grid-column: 1 / -1; }
  .process__aside { position: static; }
  .process__main { display: contents; }
  .process__main > .h3 { grid-column: 1 / -1; order: 1; }
  .process__aside { order: 2; }
  .process__fig { grid-column: 1 / -1; order: 3; margin: 0; }
  .process__main > .btn { grid-column: 1 / -1; order: 4; justify-self: start; }
  .stage__strip { grid-column: 1 / -1; }
  .pstrip { grid-auto-columns: 78%; }
  .interiors__left, .interiors__right { grid-column: 1 / -1; }
  .interiors__right { margin-top: var(--s-3); }

  .map__card { position: static; max-width: none; padding: 1.25rem var(--margin) 0; }
  .map__canvas { height: 70svh; min-height: 24rem; }

  .footer__brand, .footer__nav, .footer__info, .footer__more { grid-column: 1 / -1; grid-row: auto; }
  .footer__more { grid-template-columns: repeat(2, minmax(0, 1fr)); order: 1; }   /* on a phone the smaller links follow the large ones */
  .footer__info { order: 2; }
  .footer__group { grid-column: auto; }
  .footer__bottom > :nth-child(1) { grid-column: 1 / span 7; }
  .footer__bottom > :nth-child(2) { grid-column: 8 / span 5; justify-self: end; }
  .footer__bottom > :nth-child(3) { grid-column: 1 / span 7; }
  .footer__bottom > :nth-child(4) { grid-column: 8 / span 5; }

  .modal__panel { padding: 1.25rem var(--margin); }
  .modal__thumb { width: 6.5rem; }
  .tiles { grid-template-columns: 1fr; }
  .lb__alt { display: none; }

  .bar { row-gap: 0.7rem; }
  .bar__brand { grid-column: 1 / span 7; font-size: 1.35rem; }
  .bar__cta { grid-column: 8 / span 5; padding: 0.85rem 1rem; gap: 0.7rem; }
  .bar__links { grid-column: 1 / -1; grid-row: 2; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .sheet__label, .sheet, .sheet__note, .pmap, .reach__label, .reach__main { grid-column: 1 / -1; grid-row: auto; }
  .pmap { margin-top: var(--s-2); }
  .pmap__canvas { aspect-ratio: 4 / 3; }
  .sheet > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .gallery, .gallery--three { grid-template-columns: minmax(0, 1fr); }
  .proj__cover img { max-height: none; }
  .next__link { flex-direction: column; align-items: flex-start; }
  .next__name { text-align: left; }

  .mf__intro, .stages__intro { grid-column: 1 / -1; }
  .belief__word { grid-column: 1 / span 10; }
  .belief__sign { grid-column: 11 / span 2; }
  .belief__sub, .belief__text, .belief__img { grid-column: 1 / -1; }
  .stages-sec { scroll-margin-top: 6.5rem; }
  .stage__n { grid-column: 1 / span 3; }
  .stage__title { grid-column: 4 / -1; }
  .stage__text { grid-column: 4 / -1; }

  .tw__lead, .tw__label, .tw__fig, .tw__text, .tw__aside, .tw__steps, .faq, .near, .sunpath, .tw__text--side, .guide__toc .guide__contents, .guide__sources, .guide__reviewed { grid-column: 1 / -1; }
  .tw__steps li { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 0.4rem; }
  .tw__steps p { grid-column: 2; }
  .cards--three { grid-template-columns: minmax(0, 1fr); }
  .roses__row { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
  .sunpath.is-3d, .tw__sec:has(.sunpath.is-3d) .tw__text--side, .tw__sec > .cmap { grid-column: 1 / -1; }
  .sun3d { aspect-ratio: 1; }
  .est__form, .est__panel, .est__out { grid-column: 1 / -1; grid-row: auto; }
  /* on a phone the instrument comes first, the choices under it */
  .est__panel { order: -1; }
  .est__out { order: 2; }
  .est__panel-in { position: static; height: auto; min-height: 0; max-height: none; }
  .est__massing { height: clamp(12rem, 52vw, 17rem); }
  .est__scope { grid-template-columns: 1fr; }
  .lmap__canvas { aspect-ratio: 4 / 5; }
  .place img { aspect-ratio: 16 / 9; }
  /* on the estimator the black total bar sits at the bottom: the WhatsApp button goes above it */
  body:has(.est__sticky) .wa { bottom: calc(var(--margin) + 2.9rem); }
  .pr { grid-template-columns: 1fr; }
  .pr__form { position: static; }
  .tw__route { grid-column: 1 / -1; }
  .tw__route .pr__form { grid-template-columns: 1fr; }
  .pf__row { grid-auto-flow: row; grid-auto-columns: auto; }
  .is-parallel .pf__row { padding-top: 0; padding-left: 1rem; }
  .is-parallel .pf__row::before { top: 1.4rem; bottom: 1.4rem; left: 0; right: auto; border-top: 0; border-left: 1px solid var(--black); }
  .is-parallel .pf__node::before { top: 1.4rem; left: -1rem; height: 0; width: 1rem; border-left: 0; border-top: 1px solid var(--black); }
  .is-chain .pf__node + .pf__node::before { content: "↓"; left: 1.4rem; top: -0.62rem; transform: translate(-50%, -50%); }
  .bk { grid-template-columns: 1fr; min-height: 0; }
  .bks { padding: 0.5rem; place-items: end stretch; }
  .bks__panel { width: 100%; max-height: calc(100svh - 1rem); border-radius: 1.2rem; transform: translateY(100%); }
  .bks__close { top: 1.25rem; right: 1.1rem; }
  .bks .bk__times { padding-top: 1.3rem; }
  .bks .bk__times-head { padding-right: 0; }
  .bks .bk__info { padding-top: 1.6rem; padding-right: 4rem; }
  .bk > * { padding: 1.3rem 1.1rem; }
  .bk__info { border-right: 0; border-bottom: 1px solid var(--grey); }
  .bk__times { border-left: 0; border-top: 1px solid var(--grey); }
  .bk__list { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk__form, .bk__done { grid-column: 1; }
  .bk[data-step="form"] .bk__form { grid-template-columns: 1fr; }
  .bk__seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk__seg .est__opt { border-left: 0; border-top: 1px solid var(--black); }
  .bk__seg .est__opt:nth-child(-n+2) { border-top: 0; }
  .bk__seg .est__opt:nth-child(even) { border-left: 1px solid var(--black); }
  .svc-home__label, .svc-home__list { grid-column: 1 / -1; }
  .svc-home__row { grid-template-columns: 2.4rem minmax(0, 1fr) 1.2rem; row-gap: 0.35rem; }
  .svc-home__card, .svc-home__meta { grid-column: 2 / 3; }
  .svc-home__meta { text-align: left; white-space: normal; }
  .svc-home__go { grid-row: 1; grid-column: 3; }
  .svc__glance { grid-template-columns: 1fr; }
  .svc__glance, .svc__for, .svc__phases { grid-column: 1 / -1; }
  .svc__ph-head { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .svc__time { grid-column: 2; text-align: left; margin-top: 0.3rem; }
  .svc__cfia, .svc__phase > .large, .svc__get-label, .svc__get { margin-left: 3.4rem; }
  .svc__get { grid-template-columns: 1fr; }
  .est__sticky { display: flex; justify-content: space-between; gap: 1rem; position: sticky; bottom: 0; z-index: 30; margin: 0; padding: 0.85rem var(--margin); background: var(--black); color: var(--white); }
  .g-head, .g-row, .g-bands { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .cmap__canvas { aspect-ratio: 4 / 5; }
  .sun3d__controls { grid-template-columns: minmax(0, 1fr); }
  .rain__val { font-size: 0.5625rem; }
  .rain__plot { margin-left: 1.6rem; }
  .rain__months, .rain__days { margin-left: 1.6rem; }
}

/* Phones where the project name and "View project" need the whole row */
@media (max-width: 479px) {
  /* service names run to 14 letters ("arquitectónico"): scale them to the screen */
  .svc .mf__title, .est--town .mf__title, .lt--town .mf__title { font-size: min(var(--f-display), 10.4vw); }
  .hero__row > :first-child { display: none; }
}

/* Small phones */
@media (max-width: 359px) {
  .bar__cta .btn__dot { display: none; }
  .bar__cta { padding: 0.8rem 0.85rem; }
}
/* the count drops under a long title (the Spanish one) rather than push the page sideways */
@media (max-width: 479px) {
  .works__head { flex-wrap: wrap; }
  .works__count { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bks__scrim, .bks__panel { transition: none; }
  .bk[data-step] .bk__form, .bk[data-step] .bk__done, .bk[data-step] .bk__cal, .bk[data-step] .bk__times, .bk[data-step] .bk__picked { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* printing the estimate: just the result and its sources */
.est__print-head, .est__print-foot { display: none; }
/* The estimate on paper: two A4 pages with the studio's mark, every block whole */
@page { size: A4; margin: 14mm 14mm 18mm; @bottom-right { content: counter(page) " / " counter(pages); font: 8pt sans-serif; color: #8b8b88; } }
@media print {
  html { font-size: 10px; }
  html, body, .page, main, .est, .est__app, .est__panel, .est__out { background: #fff !important; }
  .bar, .wa, .footer, .reach, .cmap, .float, #top { display: none !important; }
  /* everything but the estimate itself */
  .est > :not(.est__print-head):not(.est__app):not(.est__out):not(.est__print-foot) { display: none !important; }
  .est__form, .est__actions, .est__budget, .est__guides, .est__work, .est__sticky, .est__method, .est__scope + .note { display: none !important; }
  .est__print-head { display: grid; grid-template-columns: auto 1fr auto; gap: 4mm; align-items: center; padding-bottom: 4mm; margin-bottom: 5mm; border-bottom: 1px solid #080807; }
  .est__print-head img { width: 11mm; height: 11mm; }
  .est__print-head p { margin: 0; }
  .est__print-brand { font-size: 15pt; font-weight: 700; letter-spacing: -0.02em; }
  .est__print-kind { font-size: 9pt; color: #545454; }
  .est__print-meta { text-align: right; font-size: 8.5pt; color: #545454; }
  .est__app { display: block; padding: 0; }
  .est__panel, .est__panel-in { display: block; position: static; height: auto; min-height: 0; max-height: none; }
  .est__out { display: block; padding: 0; }
  .est__choices { display: block; }
  .est__vol { display: block; margin: 4mm 0; }
  .est__block { break-inside: avoid; page-break-inside: avoid; padding-top: 3.5mm; margin-bottom: 4mm; }
  .est__totals { border-top: 0; padding-top: 0; }
  .est__total { font-size: 24pt; }
  .est__massing { height: 52mm; }
  .est__list li { break-inside: avoid; }
  /* the second page starts with what the estimate covers */
  .est__block:has(.est__scope) { break-before: page; page-break-before: always; }
  .est__print-foot { display: block; margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #dcddde; font-size: 8pt; color: #545454; break-inside: avoid; }
  .est__print-foot p { margin: 0 0 1mm; word-break: break-all; }
  a[href]::after { content: none !important; }
}


/* ---------- /studio/identity/: how the mark was drawn ---------- */
.idn-hero { margin: 0 var(--margin) var(--s-2); background: var(--light-grey); display: grid; place-items: center; }
.idn-hero svg { width: min(100%, 44rem); height: auto; display: block; }
.idn svg path:not([fill]), .idn-teaser svg path { fill: var(--black); }
.idn-sec { row-gap: var(--s-2); }
.idn-text .idn-h { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.idn-fig { grid-column: 5 / -1; min-width: 0; }
.idn-fig:empty { display: none; }
.idn-sec:has(.idn-tries) .idn-fig { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
/* the tries on a design tool's canvas (triesCanvas): one drawing; on a phone it scrolls sideways */
.idn-sec:has(.fg) .idn-fig { grid-column: 1 / -1; }
.fg { overflow-x: auto; border: 1px solid var(--grey); scrollbar-width: thin; }
.fg__svg { display: block; width: 100%; min-width: 880px; height: auto; font-family: var(--font); }
.fg-grid path { stroke: #dcdcdc; stroke-width: 1; }
.fg-frame { fill: #fcfcfc; }
.fg-col { fill: rgba(255, 72, 72, 0.06); }
.fg-fname { font-size: 11px; fill: #757575; }
.fg-fname--sel { fill: #0d99ff; }
.fg-pill { font-size: 11px; font-weight: 600; fill: #fff; text-anchor: middle; }
.fg-av { font-size: 10px; font-weight: 600; fill: #fff; text-anchor: middle; }
.fg-ui { font-size: 11.5px; fill: #1e1e1e; letter-spacing: 0.005em; }
.fg-b { font-weight: 600; }
.fg-dim { fill: #757575; }
.fg-sel { fill: #1e1e1e; font-weight: 500; }
.fg-btn { fill: #fff; font-weight: 600; text-anchor: middle; }
.idn-tries__group, .idn-tries li { min-width: 0; }
/* the explorations, in the order they were drawn */
.idn-tries__group { display: grid; gap: 0.7rem; }
.idn-tries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* nine and three go three to a row, at the same tile size as four to a row */
.idn-tries:has(> li:nth-child(9):last-child), .idn-tries:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: calc(75% + var(--gap) / 4); }
.idn-tries li { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1rem; background: var(--white); border: 1px solid var(--grey); }
.idn-tries img { width: 100%; height: 100%; min-width: 0; max-width: 100%; object-fit: contain; }
.idn-tries .is-final { border: 2px solid var(--black); }
/* diagrams: black is drawn, colour is read, coral lines are the construction */
.idn-t { font: var(--w-strong) 18px var(--font); fill: var(--black); }
.idn-t--g { fill: #d4502a; font-size: 13px; }
.idn-t--s { font-size: 12px; }
.idn svg path.idn-tick { stroke: var(--black); stroke-width: 1; fill: none; }
.idn svg path.idn-g, .idn svg circle.idn-g, .idn svg rect.idn-g { fill: none; stroke: #d4502a; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.idn-g--axis { stroke-dasharray: 2 4; opacity: 0.7; }
.idn-g--dash { stroke-dasharray: 6 4; }
.idn-g--dim { stroke-width: 0.8px; }
.idn-dot { fill: #d4502a; }
.idn-pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-2); align-items: end; }
.idn-pair svg { width: 100%; height: auto; display: block; overflow: visible; }
.idn-pair--sq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.idn-trio figure { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.idn-trio svg { width: 100%; height: auto; display: block; border: 1px solid var(--grey); }
.idn-nolli { margin: 0; display: grid; gap: 0.6rem; }
.idn-nolli img { width: 100%; height: auto; display: block; }
.idn-nolli a { color: inherit; }
.idn-pair figure { margin: 0; display: grid; gap: 0.6rem; }
.idn-key { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; }
.idn-key i { width: 0.8rem; height: 0.8rem; display: inline-block; }
.idn-key i + i { margin-right: 0.3rem; }
.idn-grid { width: min(100%, 34rem); height: auto; display: block; overflow: visible; }
.idn-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.idn-tile { margin: 0; display: grid; gap: 0.6rem; }
.idn-tile > svg, .idn-tile > div { aspect-ratio: 1; width: 100%; height: auto; display: block; border: 1px solid var(--grey); background: var(--white); }
.idn-tile--dark > svg { background: var(--black); border-color: var(--black); }
.idn-tile--sizes > div { display: flex; align-items: flex-end; justify-content: center; gap: 1.6rem; padding-bottom: 32%; }
/* type */
.idn-type { display: grid; gap: var(--s-2); }
.idn-weights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.idn-weights li { display: grid; gap: 0.35rem; padding-top: 0.8rem; border-top: 1px solid var(--grey); }
.idn-aa { font-size: clamp(3rem, 2rem + 3vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; }
.idn-scale { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--grey); }
.idn-scale li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--gap); align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--grey); }
.idn-scale__n { color: var(--dark-grey); }
.idn-scale__x { min-width: 0; text-wrap: balance; }
.idn-scale__x--0 { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: var(--w-display); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.idn-scale__x--1 { font-size: var(--f-h3); font-weight: var(--w-strong); line-height: 1.05; letter-spacing: -0.035em; }
.idn-scale__x--2 { font-size: var(--f-large); }
.idn-scale__x--3 { font-size: var(--f-main); }
.idn-scale__x--4 { font-size: var(--f-small); font-weight: var(--w-strong); text-transform: uppercase; }
/* colour */
.idn-colour { display: grid; gap: 0.8rem; }
.idn-sw { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.idn-sw li { display: grid; gap: 0.25rem; font-size: var(--f-small); }
.idn-sw i { aspect-ratio: 1.5; box-shadow: inset 0 0 0 1px rgba(8, 8, 7, 0.1); }
.idn-sw span { color: var(--dark-grey); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.idn-sw--data { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.5rem; }
.idn-sw--data i { aspect-ratio: 1; }
.idn-sw--data span { font-size: 0.625rem; overflow-wrap: anywhere; }
.idn-ramp { list-style: none; margin: 0; padding: 0; display: flex; height: 1.6rem; }
.idn-ramp li { flex: 1; }
/* in use: the mock-ups, full width */
.idn-sec:has(.idn-uses) .idn-fig { grid-column: 1 / -1; }
.idn-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.idn-u { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.6rem; min-width: 0; }
.idn-u img, .idn-u .idn-tab { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 5; background: var(--light-grey); }
.idn-u--wide { grid-column: span 2; }
.idn-u--wide img { aspect-ratio: auto; min-height: 0; }
.idn-u .idn-tab { place-content: center; justify-items: center; }
/* in use */
.idn-use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.idn-use figure { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.idn-use img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--light-grey); }
.idn-tab { aspect-ratio: 3 / 2; display: grid; align-content: start; gap: 0.6rem; padding: 1.4rem 1.2rem; background: var(--light-grey); }
.idn-tab__bar { display: flex; align-items: center; gap: 0.6rem; width: 80%; padding: 0.6rem 0.8rem; border-radius: 0.6rem 0.6rem 0 0; background: var(--white); font-size: var(--f-small); }
.idn-tab__bar svg { width: 16px; height: 16px; flex: none; }
.idn-tab__bar b { font-weight: var(--w-text); flex: 1; }
.idn-tab__bar i { font-style: normal; color: var(--mid-grey); }
.idn-tab__url { padding: 0.55rem 0.9rem; border-radius: 100vw; background: var(--white); color: var(--dark-grey); font-size: var(--f-small); }
/* the link from /studio/ */
.idn-teaser { padding: 0 var(--margin) var(--s-4); }
.idn-teaser__link { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1.2rem; padding: 1.2rem 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--grey); }
.idn-teaser__link svg { width: 3rem; height: 3rem; }
.idn-teaser__t { justify-self: end; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; }
.idn-teaser__link:hover .idn-teaser__t { color: var(--dark-grey); }
@media (max-width: 991px) {
  .idn-fig { grid-column: 4 / -1; }
}
@media (max-width: 767px) {
  .idn-fig { grid-column: 1 / -1; }
  .idn-pair, .idn-marks, .idn-use { grid-template-columns: minmax(0, 1fr); }
  .idn-pair--sq, .idn-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idn-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idn-uses { grid-template-columns: minmax(0, 1fr); }
  .idn-u--wide { grid-column: auto; }
  .idn-u--wide img { aspect-ratio: 3 / 2; }
  .idn-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idn-scale li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .idn-teaser__link { grid-template-columns: auto minmax(0, 1fr); }
  .idn-teaser__t { grid-column: 1 / -1; justify-self: start; }
  .idn-tries, .idn-tries:has(> li:nth-child(9):last-child), .idn-tries:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .idn-tries li { padding: 0.5rem; }
  .idn-sw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idn-sw--data { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .idn-aa { font-size: 3rem; }
}

/* ---------- a sheet that explains things (info-sheet.js): the permit glossary, the finish levels ---------- */
.isheet { position: fixed; inset: 0; z-index: 210; display: none; }
.isheet.is-on { display: block; }
.isheet__scrim { position: absolute; inset: 0; background: rgba(8, 8, 7, 0.42); opacity: 0; transition: opacity 0.35s var(--ease); }
.isheet.is-open .isheet__scrim { opacity: 1; }
.isheet__panel { position: absolute; top: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: min(34rem, calc(100% - 1.2rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--white); border-radius: 1.2rem; box-shadow: 0 30px 80px rgba(8, 8, 7, 0.25); transform: translateX(calc(100% + 1rem)); transition: transform 0.5s var(--ease); outline: none; }
.isheet__panel::-webkit-scrollbar { display: none; }
.isheet.is-open .isheet__panel { transform: none; }
.isheet--wide .isheet__panel { width: min(52rem, calc(100% - 1.2rem)); }
html.isheet-lock, html.isheet-lock body { overflow: hidden; }
.isheet__close { position: sticky; top: 1.2rem; margin: 1.2rem 1.2rem -3.6rem auto; z-index: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--grey); border-radius: 0.7rem; background: var(--white); color: var(--black); cursor: pointer; }
.isheet__close:hover { border-color: var(--black); }
.isheet__close svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.isheet__body { padding: 1.6rem 1.6rem 2.2rem; display: grid; gap: 1.2rem; }
.isheet__kicker { margin: 0.6rem 0 0; color: var(--dark-grey); }
.isheet__title { margin: -0.6rem 3.2rem 0 0; font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.isheet__lead { margin: 0; font-size: var(--f-large); line-height: 1.35; }
.isheet__part { display: grid; gap: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--grey); }
.isheet__part h3, .lv-sec h3 { margin: 0; color: var(--dark-grey); }
.isheet__part p { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.isheet__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; }
.isheet__facts div { padding: 0.75rem 0.85rem; border-radius: 0.8rem; background: var(--light-grey); display: grid; gap: 0.25rem; align-content: start; }
.isheet__facts dt { color: var(--dark-grey); }
.isheet__facts dd { margin: 0; font-weight: var(--w-strong); line-height: 1.25; }
.isheet__rel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.isheet__rel button { padding: 0.5rem 0.8rem; border: 1px solid var(--grey); border-radius: 100vw; background: transparent; color: var(--black); font: inherit; font-size: var(--f-small); font-weight: var(--w-strong); cursor: pointer; }
.isheet__rel button:hover { border-color: var(--black); }
.isheet__src { margin: 0; }
@media (max-width: 767px) {
  .isheet__panel { top: auto; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-height: calc(100svh - 3rem); transform: translateY(calc(100% + 1rem)); }
}
/* the route: steps, institutions and terms that open their explanation */
.pf__term { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 0.2s var(--ease); }
.pf__term:hover, .pf__term:focus-visible { text-decoration-color: currentColor; }
.pf__title-b::after { content: "?"; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: 0.35em; border: 1px solid currentColor; border-radius: 50%; font-size: 0.62em; font-weight: var(--w-strong); vertical-align: 0.25em; opacity: 0.55; text-decoration: none; }
.pf__title-b:hover::after { opacity: 1; }
.pf__node.is-off .pf__term { text-decoration-color: transparent; }
/* the estimator's finish levels */
.est__legend-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.est__help { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.65rem 0.3rem 0.35rem; border: 1px solid var(--grey); border-radius: 100vw; background: var(--white); color: var(--black); font: inherit; font-size: 0.75rem; font-weight: var(--w-strong); text-transform: none; letter-spacing: 0; cursor: pointer; }
.est__help span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--black); color: var(--white); font-size: 0.75rem; }
.est__help:hover { border-color: var(--black); }
.lv-bars { margin: 0; display: grid; gap: 0.7rem; padding: 1rem; border-radius: 0.9rem; background: var(--light-grey); }
.lv-bars figcaption { color: var(--dark-grey); }
.lv-dots { position: relative; height: 2.2rem; margin: 0 7.5rem 0 5.5rem; }
.lv-dot { position: absolute; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 0.2rem; }
.lv-dot i { order: 2; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--black); }
.lv-dot b { font-size: 0.625rem; font-weight: var(--w-strong); color: var(--dark-grey); white-space: nowrap; }
.lv-dot:nth-child(even) b { transform: translateY(-0.85rem); }
.lv-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 7.5rem; align-items: center; gap: 0; padding: 0.25rem 0; }
.lv-row.is-on .lv-name { font-weight: var(--w-strong); }
.lv-name { font-size: var(--f-small); }
.lv-track { position: relative; height: 0.9rem; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(8, 8, 7, 0.08) calc(10% - 1px) 10%); }
.lv-band { position: absolute; top: 0; bottom: 0; border-radius: 0.45rem; background: var(--grey); }
.lv-row.is-on .lv-band { background: var(--black); }
.lv-likely { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; margin-left: -1px; background: var(--black); }
.lv-row.is-on .lv-likely { background: var(--white); }
.lv-fig { justify-self: end; text-align: right; font-size: 0.75rem; font-weight: var(--w-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.lv-fig em { display: block; font-style: normal; font-weight: var(--w-text); color: var(--dark-grey); }
.lv-sec { display: grid; gap: 0.6rem; }
.lv-table { display: grid; font-size: var(--f-small); line-height: 1.3; }
.lv-tr { display: grid; grid-template-columns: 7rem repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--grey); }
.lv-tr > span:first-child { color: var(--dark-grey); font-weight: var(--w-strong); }
.lv-th { border-top: 1px solid var(--black); font-weight: var(--w-strong); text-transform: uppercase; font-size: 0.75rem; }
.lv-tr .is-on { font-weight: var(--w-strong); }
.lv-th .is-on { text-decoration: underline; text-underline-offset: 0.25em; }
.lv-coast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.lv-coast li { display: grid; gap: 0.35rem; align-content: start; padding: 0.8rem; border: 1px solid var(--grey); border-radius: 0.8rem; font-size: var(--f-small); line-height: 1.35; }
.lv-coast li.is-on { border-color: var(--black); }
.lv-coast p { margin: 0; }
.lv-codes { list-style: none; margin: 0; padding: 0; font-size: var(--f-small); }
.lv-codes li { display: grid; grid-template-columns: 3.4rem 5.2rem minmax(0, 1fr); gap: 0.2rem 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--grey); align-items: baseline; }
.lv-code { font-weight: var(--w-strong); }
.lv-v { font-variant-numeric: tabular-nums; }
.lv-note { line-height: 1.3; }
.lv-in { grid-column: 3; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.lv-in i { font-style: normal; font-size: 0.6875rem; font-weight: var(--w-strong); padding: 0.1rem 0.5rem; border-radius: 100vw; background: var(--light-grey); }
.lv-in i.is-on { background: var(--black); color: var(--white); }
.lv-how { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; }
.lv-how li { counter-increment: s; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--grey); font-size: var(--f-small); align-items: baseline; }
.lv-how li::before { content: counter(s); font-weight: var(--w-strong); color: var(--dark-grey); }
.lv-how b { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) {
  .lv-tr { grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); font-size: 0.75rem; gap: 0.4rem; }
  .lv-coast { grid-template-columns: minmax(0, 1fr); }
  .lv-how li { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .lv-how b { grid-column: 2; }
  .lv-dots { margin: 0 4.5rem 0 4rem; }
  .lv-row { grid-template-columns: 4rem minmax(0, 1fr) 4.5rem; }
  .lv-fig { font-size: 0.6875rem; }
}

/* ---------- a project's two views of one place, with a divider to drag (compare.js) ---------- */
.compare { margin: 0; padding: 0 var(--margin) var(--pad-v); display: grid; gap: 0.7rem; }
.compare__frame { position: relative; aspect-ratio: var(--ratio); overflow: hidden; background: var(--light-grey); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.compare__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 0 1px rgba(8, 8, 7, 0.12); pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--white); color: var(--black); transform: translate(-50%, -50%); box-shadow: 0 4px 18px rgba(8, 8, 7, 0.25); }
.compare__knob svg { width: 1.3rem; height: 0.65rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.compare__tag { position: absolute; top: 1rem; padding: 0.35rem 0.7rem; border-radius: 100vw; background: rgba(252, 252, 252, 0.9); color: var(--black); pointer-events: none; }
.compare__tag--a { left: 1rem; }
.compare__tag--b { right: 1rem; background: rgba(8, 8, 7, 0.7); color: var(--white); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible + * , .compare__frame:has(.compare__range:focus-visible) .compare__knob { outline: 2px solid var(--black); outline-offset: 3px; }
.compare__cap { display: flex; justify-content: space-between; gap: 1rem; }
.compare__hint { color: var(--mid-grey); font-weight: var(--w-text); }
.gallery + .compare { margin-top: calc(var(--gap) - var(--pad-v)); }

/* ---------- a project's numbered plan, with its key ---------- */
.pplan { margin: 0; padding: 0 var(--margin) var(--pad-v); align-items: end; row-gap: var(--s-2); }
.pplan__img { grid-column: 1 / span 8; background: #fcfcfc; }
.pplan__img img { width: 100%; height: auto; display: block; }
.pplan__key { grid-column: 9 / -1; display: grid; gap: 0.9rem; padding-bottom: 0.5rem; }
.pplan__key ol { list-style: none; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--black); display: grid; gap: 0.35rem; font-size: var(--f-main); }
.pplan__key li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); }
.pplan__key b { font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .pplan__img, .pplan__key { grid-column: 1 / -1; }
  .pplan__key ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); font-size: var(--f-small); }
}
/* the titled plate carries its own key on a wide screen */
@media (min-width: 768px) {
  .pplan--plate .pplan__img { grid-column: 1 / -1; width: 90%; justify-self: center; }
  .pplan--plate .pplan__key { display: none; }
}
/* a row of plans at one scale: widths in proportion to what each drawing covers */
.prow__set { display: flex; align-items: flex-start; gap: 4rem; }
.prow__fig { margin: 0; flex: var(--w) 1 0; min-width: 0; display: grid; gap: 0.6rem; }
.prow__fig img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.prow__cap { margin: 0; }
@media (max-width: 767px) {
  .prow__set { flex-direction: column; gap: var(--s-3); }
  .prow__fig { flex: none; width: 82%; }
}
/* drawings and views: small, two to a row in the left two thirds, captioned */
.pview { padding: 0 var(--margin) var(--pad-v); display: grid; row-gap: var(--s-2); }
.prow + .pview { margin-top: calc(var(--s-3) - var(--pad-v)); }
.pview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); width: calc(66.66% - var(--gap) / 3); align-items: end; }
.pview__fig { margin: 0; display: grid; gap: 0.7rem; }
.pview__fig img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.pview__cap { margin: 0; }
@media (max-width: 767px) {
  .pview__grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
}
/* design iterations: small diagrams in a row, all in the same light grey */
.iter { padding: 0 var(--margin) var(--pad-v); display: grid; row-gap: var(--s-2); }
.iter + .prow { margin-top: calc(var(--s-3) - var(--pad-v)); }
.iter__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); max-width: 44rem; }
.iter__item img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; opacity: 0.55; }
.iter__cap { display: flex; flex-wrap: wrap; column-gap: 0.5rem; margin: 0.7rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--grey); }
.iter__date { color: var(--mid-grey); }
@media (max-width: 767px) {
  .iter__list { grid-template-columns: repeat(5, 5.5rem); overflow-x: auto; max-width: none; padding-bottom: 0.5rem; }
}
/* plans in rows: each at its own width, the keys stacked beside them (placed by --c / --r) */
.prow { padding: 0 var(--margin) var(--pad-v); row-gap: var(--s-2); align-items: end; }
.prow__img img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }   /* white ground: the page's shows through */
.prow > * { grid-column: 1 / -1; }
.prow + .prow { margin-top: calc(var(--s-3) - var(--pad-v)); }
@media (min-width: 768px) {
  .prow { row-gap: var(--s-3); }
  .prow > .prow__img, .prow > .prow__key { grid-column: var(--c); grid-row: var(--r); }
  .prow > .prow__img, .prow > .prow__key { align-self: start; }
  .prow > .prow__key ol { font-size: var(--f-small); }
}

/* ---------- a project's construction drawings: one row per part of the house, one scale per row ---------- */
.pdraw { display: grid; row-gap: var(--s-2); padding: 0 var(--margin) var(--pad-v); }
.pdraw__set { display: flex; align-items: flex-end; gap: var(--s-2); }
.pdraw__set + .pdraw__set { margin-top: var(--s-3); }
.pdraw__fig { margin: 0; flex: var(--span) 1 0; min-width: 0; display: grid; gap: 0.7rem; }
.pdraw__fig img { width: 100%; height: auto; display: block; background: #fcfcfc; }
.pdraw__cap { display: flex; flex-wrap: wrap; column-gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--grey); }
.pdraw__view { color: var(--mid-grey); }
@media (max-width: 767px) {
  .pdraw__set { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .pdraw__fig { flex: none; }
}

/* ---------- the client portal: its button in the nav, and the sign-in page ---------- */
.lock { width: 0.95rem; height: 0.95rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* the same box as the button beside it: 1rem above and below a 0.875rem line = 2.875rem */
.portal-btn { gap: 0.5rem; height: 2.875rem; padding: 0 1.25rem; }
.portal-btn[aria-current="page"] { background: var(--grey); }
.bar__acts, .nav__acts { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.bar__acts > *, .nav__acts > * { flex: none; }
/* the actions share columns with the links, so on a wide screen both are pinned to the first row */
.bar__acts { grid-column: 9 / span 4; grid-row: 1; justify-self: end; }
.nav__acts { grid-column: 9 / span 4; grid-row: 1; justify-self: end; }
@media (min-width: 768px) { .bar__links, .nav__links, .bar__brand, .nav__brand { grid-row: 1; } }
.nav__acts .pill { background: rgba(252, 252, 252, 0.92); }
.nav__acts .pill:hover { background: var(--white); }
/* where the links leave no room for the word, the button is the lock alone (a circle) */
@media (max-width: 1439px) {
  .portal-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .portal-btn { padding: 0; width: 2.875rem; justify-content: center; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .bar__links, .nav__links { grid-column: 6 / span 5; }
}
/* tablet: the links take three columns (two lines) so the lock and the button fit beside them */
@media (min-width: 768px) and (max-width: 991px) {
  .bar__links, .nav__links { grid-column: 6 / span 3; }
}

.portal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--margin); min-height: calc(100vh - 4.7rem); min-height: calc(100svh - 4.7rem); }
.portal__media { grid-column: 1 / span 6; position: relative; margin: var(--gap) 0; overflow: hidden; background: var(--light-grey); }
.portal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portal__cap { position: absolute; left: 1rem; bottom: 1rem; margin: 0; color: var(--white); text-shadow: 0 0 1.2rem rgba(8, 8, 7, 0.45); }
.portal__panel { grid-column: 8 / span 4; align-self: center; display: grid; gap: 1.1rem; padding: var(--s-4) 0; max-width: 30rem; }
.portal__title { margin: 0; }
.portal__intro { margin: 0 0 0.6rem; font-size: var(--f-large); line-height: 1.3; color: var(--dark-grey); }
.portal__form { display: grid; gap: 1rem; }
.portal__field { display: grid; gap: 0.45rem; }
.portal .input { height: 3.4rem; background: var(--white); color: var(--black); border: 1px solid var(--grey); border-radius: 0.9rem; padding: 0 1rem; font-size: var(--f-main); transition: border-color 0.2s; }
.portal .input:hover { border-color: var(--mid-grey); }
.portal .input:focus { outline: 1px solid var(--black); border-color: var(--black); }
.portal .input[aria-invalid="true"] { border-color: var(--req); outline-color: var(--req); }
.portal__pw { position: relative; display: block; }
.portal__pw .input { padding-right: 4.5rem; }
.portal__show { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); padding: 0.55rem 0.7rem; border: 0; border-radius: 100vw; background: none; color: var(--dark-grey); cursor: pointer; }
.portal__show:hover { background: var(--light-grey); color: var(--black); }
.portal__go { justify-content: space-between; width: 100%; padding-top: 1.15rem; padding-bottom: 1.15rem; margin-top: 0.3rem; }
.portal__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin: 0; font-size: var(--f-small); }
.portal__alt button { border: 0; padding: 0 0 1px; background: none; color: var(--dark-grey); font: inherit; cursor: pointer; }
.portal__alt button:hover { color: var(--black); }
.portal__status { margin: 0; padding: 0.9rem 1rem; border-radius: 0.9rem; background: var(--light-grey); font-size: var(--f-small); line-height: 1.4; opacity: 0; transform: translateY(-0.3rem); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.portal__status.is-in { opacity: 1; transform: none; }
.portal__inside { display: grid; gap: 0.6rem; padding-top: 1.1rem; margin-top: 0.4rem; border-top: 1px solid var(--grey); }
.portal__inside p { margin: 0; }
.portal__inside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portal__inside li { padding: 0.45rem 0.75rem; border: 1px solid var(--grey); border-radius: 100vw; font-size: var(--f-small); color: var(--dark-grey); }
.portal__new { display: grid; gap: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--grey); }
.portal__new p { margin: 0; }
.portal__new-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem !important; }
@media (max-width: 991px) {
  .portal__media { grid-column: 1 / span 5; }
  .portal__panel { grid-column: 7 / -1; }
}
@media (max-width: 767px) {
  .portal { min-height: 0; }
  .portal__media { grid-column: 1 / -1; height: 15rem; margin-bottom: 0; }
  .portal__panel { grid-column: 1 / -1; padding: var(--s-3) 0 var(--s-4); max-width: none; }
  .bar__acts { grid-column: 8 / span 5; }
  .bar__acts .portal-btn { width: 2.575rem; height: 2.575rem; }   /* the phone bar's button: 0.85rem padding */
}
@media (prefers-reduced-motion: reduce) { .portal__status { transition: none; } }
/* the smallest phones: the bar keeps the brand and the call to action; the portal is in the menu and footer */
@media (max-width: 379px) { .bar__acts .portal-btn, .nav__acts .portal-btn { display: none; } }

/* ---------- a service's strategy cards and certification cards ---------- */
.strats { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); }
.strat { display: flex; flex-direction: column; gap: 0.7rem; }
.strat__fig { margin: 0 0 0.4rem; display: grid; gap: 0.6rem; }
.strat__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--light-grey); }
.strat__cap { margin: 0; color: var(--dark-grey); }
.strat__n { margin: 0; }
.strat__name { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); line-height: 1.1; letter-spacing: -0.02em; }
.strat__text { margin: 0; font-size: var(--f-main); line-height: 1.45; color: var(--dark-grey); max-width: 38rem; }
.strat__items { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); font-size: var(--f-small); line-height: 1.3; }
.strat__items li { padding: 0.5rem 0; border-top: 1px solid var(--grey); }
.strat__link { align-self: flex-start; margin-top: 0.2rem; font-size: var(--f-small); }
/* a service opened by one project's image, full width (the master plan) */
.svc__hero { margin: 0 0 var(--pad-v); padding: 0 var(--margin); display: grid; gap: 0.7rem; }
.svc__hero img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .svc__hero img { aspect-ratio: 1.8; object-fit: cover; } }
.svc__hero-cap { display: flex; justify-content: space-between; gap: var(--gap); color: var(--dark-grey); }
/* a strategy drawn from a site analysis: the layer on black, whole */
.strat__fig--dark img { background: #0b0b0a; object-fit: contain; padding: 7% 9%; box-sizing: border-box; }
/* the smaller services on /services/: three cards across, after the order */
.svc-x .svc-x__list { grid-column: 1 / -1; padding: 0; margin-top: var(--s-2); }
/* the seven services: four and three, so no card stands alone (two and three on a tablet) */
/* the time goes under the name, so a narrow card keeps the name on one line */
.svc__cards .card__cap { flex-wrap: wrap; row-gap: 0.15rem; column-gap: 0.6rem; }
.svc__cards .card__meta { flex-basis: 100%; margin-left: 0; text-align: left; }
@media (min-width: 992px) {
  .svc__cards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc__cards > li { grid-column: span 4; }
  .svc__cards > li:nth-child(-n + 4) { grid-column: span 3; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .svc__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc__cards > li { grid-column: span 2; }
  .svc__cards > li:nth-child(-n + 4) { grid-column: span 3; }
}
.certs { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cert { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem 1.3rem 1.5rem; background: var(--light-grey); border-radius: 0.9rem; }
.cert__kicker { margin: 0; color: var(--dark-grey); }
.cert__name { margin: 0; font-size: var(--f-h4); font-weight: var(--w-strong); line-height: 1.1; letter-spacing: -0.02em; }
.cert__text { margin: 0 0 auto; font-size: var(--f-small); line-height: 1.45; color: var(--dark-grey); }
.cert__facts { margin: 0.6rem 0 0; display: grid; gap: 0; }
.cert__facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--grey); font-size: var(--f-small); }
.cert__facts dt { color: var(--dark-grey); }
.cert__facts dd { margin: 0; }
@media (max-width: 991px) {
  .strats, .certs { grid-column: 1 / -1; }
  .certs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .strats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the studio's library: covers standing on a shelf line ---------- */
.lib__books { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); }
.book { display: flex; flex-direction: column; gap: 0.55rem; }
.book__cover { display: flex; align-items: flex-end; height: 17rem; padding-bottom: 0; border-bottom: 1px solid var(--black); margin-bottom: 0.6rem; }
.book__cover img { max-height: 100%; max-width: 78%; width: auto; height: auto; display: block; box-shadow: 0 0 0 1px rgba(8, 8, 7, 0.06), 0 14px 22px -16px rgba(8, 8, 7, 0.55); transition: transform 0.45s var(--ease); transform-origin: 50% 100%; }
.book__cover:hover img { transform: translateY(-0.35rem); }
.book__title { margin: 0; font-size: var(--f-main); font-weight: var(--w-strong); line-height: 1.25; letter-spacing: -0.01em; }
.book__by { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.book__by span { color: var(--dark-grey); font-weight: var(--w-text); text-transform: none; }
.book__why { margin: 0.2rem 0 0; font-size: var(--f-small); line-height: 1.45; color: var(--dark-grey); }
.lib__note { margin: 0 var(--margin) var(--pad-v); padding-top: var(--s-2); border-top: 1px solid var(--grey); color: var(--dark-grey); }
@media (max-width: 991px) {
  .lib__books { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .lib__books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book__cover { height: 12.5rem; }
  .book__cover img { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .book__cover img { transition: none; } }
/* "Obras seleccionadas": the long Spanish word, indented two columns, needs a smaller size on a phone */
@media (max-width: 767px) { html[lang="es"] .works__title { font-size: min(var(--f-display), 9.8vw); } }
@media (max-width: 1099px) { html[lang="es"] .works__head { flex-wrap: wrap; } html[lang="es"] .works__count { margin-left: auto; } }

/* ---------- a project's site analysis: the layers of a view, switched in place, on black ---------- */
.anl { background: var(--black); color: var(--white); padding: var(--pad-v) var(--margin); margin: 0 0 var(--pad-v); }
.proj__body + .anl { margin-top: calc(-1 * var(--pad-v) + var(--s-3)); }
.anl__head { row-gap: 1rem; margin-bottom: var(--s-3); }
.anl__label { grid-column: 1 / span 4; }
.anl__lead { grid-column: 5 / -1; margin: 0; max-width: 44rem; }
.anl__note { grid-column: 5 / -1; margin: 0; max-width: 40rem; color: #8b8b88; font-size: var(--f-main); }
.anl__body { align-items: start; row-gap: var(--s-2); }
/* the legend of the layer on show: a colour ramp, or line and block keys */
.anl__legend { position: absolute; left: 1.6rem; bottom: 0.9rem; margin: 0; display: flex; align-items: center; gap: 0.7rem; color: #dcddde; opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.anl__legend.is-on { opacity: 1; }
.anl__ramp { width: 7rem; height: 0.4rem; border-radius: 100vw; background: linear-gradient(90deg, #f0261b, #f6d21d 33%, #2ee82e 66%, #2fe9f2); }
.anl__lo, .anl__hi { color: #8b8b88; }
.anl__key { display: inline-flex; align-items: center; gap: 0.45rem; }
.anl__sub { font-weight: var(--w-text); color: #8b8b88; text-transform: none; }
.anl__legend { flex-wrap: wrap; row-gap: 0.4rem; max-width: calc(100% - 3.2rem); }
.anl__key i { display: inline-block; flex: none; }
.anl__key i.is-line { width: 1.2rem; height: 2px; background: var(--c); }
.anl__key i.is-box { width: 0.7rem; height: 0.7rem; background: var(--c); }
.anl__list { grid-column: 1 / span 3; list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid #2a2a28; }
.anl__tab { width: 100%; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; padding: 0.75rem 0; border: 0; border-bottom: 1px solid #2a2a28; background: none; color: #8b8b88; font: inherit; font-size: var(--f-main); text-align: left; cursor: pointer; transition: color 0.25s; }
.anl__tab:hover { color: #dcddde; }
.anl__tab[aria-selected="true"] { color: var(--white); }
.anl__tab[aria-selected="true"] .anl__n { color: var(--white); }
.anl__n { font-size: var(--f-small); font-variant-numeric: tabular-nums; color: #5c5c59; }
.anl__tab:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
.anl__main { grid-column: 5 / -1; display: grid; gap: 1.1rem; }
.anl__stage { position: relative; aspect-ratio: 1.62; }
/* drawing-sheet corner marks */
.anl__stage::before, .anl__stage::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 1px solid #5c5c59; pointer-events: none; }
.anl__stage::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.anl__stage::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.anl__frame { position: absolute; inset: 2.2rem 1.4rem 1.4rem; opacity: 0; transition: opacity 0.45s var(--ease); }
.anl__frame.is-on { opacity: 1; }
.anl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.45s var(--ease); }
.anl__img.is-on { opacity: 1; }
.anl__tag { position: absolute; left: 1.6rem; top: 0.9rem; margin: 0; display: flex; gap: 0.9rem; color: #dcddde; }
.anl__tag span:first-child { color: #8b8b88; font-variant-numeric: tabular-nums; }
.anl__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); padding-top: 1rem; border-top: 1px solid #2a2a28; }
.anl__text { margin: 0; max-width: 40rem; color: #dcddde; font-size: var(--f-main); line-height: 1.45; min-height: 2.9em; }
.anl__views { display: flex; gap: 0.35rem; flex: none; }
.anl__view { padding: 0.55rem 0.85rem; border: 1px solid #3a3a37; border-radius: 100vw; background: none; color: #8b8b88; cursor: pointer; }
.anl__view[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--black); }
.anl__view:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
@media (max-width: 991px) {
  .anl__list { grid-column: 1 / span 4; }
  .anl__main { grid-column: 5 / -1; }
}
@media (max-width: 767px) {
  .anl__label, .anl__lead, .anl__note, .anl__list, .anl__main { grid-column: 1 / -1; }
  .anl__ramp { width: 4.5rem; }
  /* phones: the image keeps its own box and the legend of the layer on show sits under it, in the flow */
  .anl__stage { aspect-ratio: auto; padding-top: calc(2.2rem + (100% - 0.8rem) / 1.45); padding-bottom: 0.9rem; }
  .anl__frame { inset: 2.2rem 0.4rem auto; aspect-ratio: 1.45; }
  .anl__legend { position: static; display: none; max-width: none; margin: 0.6rem 0.9rem 0; padding-right: 1rem; }
  .anl__legend.is-on { display: flex; opacity: 1; min-height: 6.6rem; align-content: flex-start; }   /* the tallest legend, so the box does not jump between layers */
  .anl__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-top: 0; gap: 0.4rem; padding-bottom: 0.4rem; scrollbar-width: none; }
  .anl__list::-webkit-scrollbar { display: none; }
  .anl__tab { border: 1px solid #3a3a37; border-radius: 100vw; padding: 0.5rem 0.85rem; grid-template-columns: auto auto; column-gap: 0.45rem; font-size: var(--f-small); }
  .anl__tab[aria-selected="true"] { border-color: var(--white); }

  .anl__tag { left: 0.9rem; }
  .anl__foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .anl__frame, .anl__img { transition: none; } }
/* autoplay: a line fills under the active layer for the length of each step */
.anl__tab { position: relative; }
.anl__tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--white); }
.anl.is-playing .anl__tab[aria-selected="true"]::after { animation: anl-fill var(--anl-step, 3600ms) linear forwards; }
@keyframes anl-fill { to { width: 100%; } }
.anl__play { padding: 0.55rem 0.85rem; border: 1px solid #3a3a37; border-radius: 100vw; background: none; color: #dcddde; cursor: pointer; margin-right: 0.35rem; }
.anl__play:hover { border-color: #8b8b88; }
.anl__play:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
@media (max-width: 767px) {
  .anl__tab::after { left: 0.85rem; right: auto; bottom: 0.25rem; max-width: calc(100% - 1.7rem); }
  .anl.is-playing .anl__tab[aria-selected="true"]::after { animation-name: anl-fill-pill; }
}
@keyframes anl-fill-pill { to { width: calc(100% - 1.7rem); } }

/* the cover of a project with a site analysis: all its views at once, small, on black */
.pmx { background: var(--black); padding: var(--s-4) var(--margin); }
.pmx__grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-2); }
.pmx__row { grid-column: 1 / -1; margin: 0; color: #dcddde; }
.pmx__row:not(:first-child) { margin-top: var(--s-2); }
.pmx__cell { display: grid; gap: 0.7rem; padding: 0; border: 0; background: none; color: #8b8b88; cursor: pointer; text-align: left; }
.pmx__cell img { width: 100%; height: auto; aspect-ratio: 1.62; object-fit: contain; display: block; transition: transform 0.45s var(--ease); }
.pmx__cell:hover img { transform: translateY(-0.3rem); }
.pmx__cell:hover, .pmx__cell:focus-visible { color: var(--white); }
.pmx__cell:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.pmx__cap { display: flex; gap: 0.45rem; font-size: 0.6875rem; line-height: 1.2; }
.pmx__cap span { color: #5c5c59; font-variant-numeric: tabular-nums; }
@media (max-width: 991px) { .pmx__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .pmx { padding: var(--s-3) var(--margin); } .pmx__grid { row-gap: 1.1rem; } .pmx__cap { font-size: 0.625rem; } .pmx__cap { visibility: hidden; height: 0; margin-top: -0.7rem; } }   /* phones: the names are in the analysis below */
@media (prefers-reduced-motion: reduce) { .pmx__cell img { transition: none; } .anl.is-playing .anl__tab[aria-selected="true"]::after { animation: none; } }
/* the typologies under the matrix: volumes at one scale, from the smallest to the largest */
.pmx__tot { margin-left: 0.9rem; color: #8b8b88; text-transform: none; }
.pmx__ty { grid-column: span 2; display: grid; gap: 0.5rem; align-content: start; padding: 0; border: 0; background: none; color: #dcddde; text-align: left; cursor: pointer; font: inherit; }
.tyx { display: block; border-bottom: 1px solid #2a2a28; padding-bottom: 0.4rem; }
.tyx__svg { display: block; width: 58%; margin: 0 auto; height: auto; overflow: visible; transition: transform 0.45s var(--ease); }
.tyx__fl { fill: none; stroke: #0b0b0a; stroke-width: 0.05; }
.pmx__ty:hover .tyx__svg { transform: translateY(-0.3rem); }
.pmx__ty:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.tyx__f { stroke: #0b0b0a; stroke-width: 0.05; stroke-linejoin: round; }
.tyx__plate { stroke: #3a3a37; stroke-width: 0.06; stroke-dasharray: 0.4 0.3; }
.tyx__pool { stroke: #0b0b0a; stroke-width: 0.05; }
.pmx__tyhead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-top: 0.3rem; }
.pmx__tyname { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--f-main); font-weight: var(--w-strong); color: var(--white); }
.pmx__tyname i { width: 0.7rem; height: 0.7rem; background: var(--c); display: inline-block; }
.pmx__tyhead b { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.pmx__tyarea { font-size: var(--f-main); color: #dcddde; font-variant-numeric: tabular-nums; }
.pmx__tyarea span { color: #8b8b88; }
.pmx__typrog { font-size: var(--f-small); line-height: 1.4; color: #8b8b88; max-width: 22rem; }
@media (max-width: 991px) { .pmx__ty { grid-column: span 2; } }
@media (max-width: 479px) { .pmx__tot { display: block; margin: 0.3rem 0 0; } .pmx__tyhead b { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .tyx__svg { transition: none; } }
/* labels on the plan: the image's own box inside the frame (contain), so the points land where they belong */
.anl__frame { container-type: size; }
.anl__notes { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; z-index: 2; }
.anl__notes.is-on { opacity: 1; }
.anl__notebox { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * var(--ar)); height: min(100cqh, 100cqw / var(--ar)); }
.anl__pin { position: absolute; display: flex; align-items: center; gap: 0.35rem; transform: translate(-0.3rem, -50%); white-space: nowrap; }
.anl__pin i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(11, 11, 10, 0.55); flex: none; }
.anl__pin .label { padding: 0.25rem 0.5rem; border-radius: 100vw; background: rgba(11, 11, 10, 0.78); color: var(--white); font-size: 0.6875rem; }
.anl__pin.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 0.3rem), -50%); }
.pmx__am { grid-column: span 2; display: grid; gap: 0.35rem; align-content: start; padding: 0.9rem 0 0; border: 0; border-top: 1px solid #2a2a28; background: none; color: #dcddde; text-align: left; cursor: pointer; font: inherit; }
.pmx__amname { font-size: var(--f-main); font-weight: var(--w-strong); color: var(--white); }
.pmx__am:hover .pmx__amname { text-decoration: underline; text-underline-offset: 0.2em; }
.pmx__am:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
@media (max-width: 767px) { .anl__pin .label { font-size: 0.5625rem; padding: 0.18rem 0.4rem; } .anl__pin i { width: 0.4rem; height: 0.4rem; } }
@media (max-width: 767px) { .tyx__svg { width: 84%; } }
/* the typologies and the master plan: five alike, the master plan last, as what the analysis comes to */
.pmx__tys { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-2); }
.pmx__tys .pmx__ty { grid-column: auto; }
.tyx--img img { display: block; width: 100%; height: auto; transition: transform 0.45s var(--ease); }
.pmx__mp:hover .tyx--img img { transform: translateY(-0.3rem); }
@media (min-width: 992px) {
  .pmx__tys .tyx { aspect-ratio: 1.8; display: flex; align-items: flex-end; }
  .pmx__tys .tyx__svg { width: 66%; }
  .tyx--img img { height: 100%; object-fit: cover; }
}
@media (max-width: 991px) {
  .pmx__tys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmx__tys .pmx__mp { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .tyx--img img { transition: none; } }

/* ---------- recognition before the studio, on the Studio page ---------- */
.rec { padding: var(--s-4) var(--margin) var(--pad-v); border-top: 1px solid var(--grey); scroll-margin-top: 4.5rem; }
.rec__label { margin: 0 0 var(--s-3); }
.rec__head { row-gap: 1rem; margin-bottom: var(--s-3); }
.rec__award { grid-column: 1 / span 4; margin: 0; align-self: start; max-width: 22rem; }
.rec__title { grid-column: 5 / -1; margin: 0; display: grid; gap: 0.3rem; font-size: var(--f-h3); font-weight: var(--w-strong); line-height: 1.05; letter-spacing: -0.03em; }
.rec__title .rec__sub { font-size: var(--f-h4); font-weight: var(--w-text); letter-spacing: -0.02em; color: var(--mid-grey); }
/* the press, one card per article */
.rec__press { margin-top: var(--s-3); row-gap: 1rem; align-items: start; }
.rec__presslabel { grid-column: 1 / span 4; margin: 0; }
.rec__cards { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pcard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); height: 100%; background: var(--light-grey); border-radius: 0.9rem; overflow: hidden; transition: background-color 0.3s; }
.pcard:hover { background: var(--grey); }
.pcard__img { display: block; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.2rem 1.2rem; min-width: 0; }
.pcard__pub { display: flex; flex-direction: column; gap: 0.1rem; }
.pcard__pub b { font-size: var(--f-h4); font-weight: var(--w-strong); letter-spacing: -0.02em; line-height: 1; }
.pcard__pub span { font-size: var(--f-small); color: var(--dark-grey); }
.pcard__title { font-size: var(--f-small); line-height: 1.4; }
.pcard__meta { margin-top: auto; display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; color: var(--dark-grey); }
.pcard:hover .pcard__meta span:last-child { color: var(--black); }
.pcard:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.rec__pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--s-3); }
.rec__fig { margin: 0; }
.rec__fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.rec__body { row-gap: var(--s-2); align-items: start; }
.rec__text { grid-column: 5 / span 5; display: grid; gap: 1em; }
.rec__text p { margin: 0; }
.rec__facts { grid-column: 10 / -1; margin: 0; display: grid; gap: 1rem; }
.rec__facts > div { display: grid; gap: 0.35rem; padding-top: 0.7rem; border-top: 1px solid var(--grey); }
.rec__facts dd { margin: 0; font-size: var(--f-small); line-height: 1.45; }
.rec__credit { color: var(--dark-grey); }
@media (max-width: 1199px) { .rec__cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 991px) {
  .rec__presslabel, .rec__cards { grid-column: 1 / -1; }
  .rec__award, .rec__title { grid-column: 1 / -1; }
  .rec__text { grid-column: 1 / span 7; }
  .rec__facts { grid-column: 8 / -1; }
}
@media (max-width: 767px) {
  .rec__pics { grid-template-columns: minmax(0, 1fr); }
  .rec__text, .rec__facts { grid-column: 1 / -1; }
  .pcard { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .pcard__body { padding: 0.9rem; gap: 0.5rem; }
  .pcard__pub b { font-size: 1.15rem; }
}

/* /guides/: the guides as three cards across the page, each with its own contents, like the press cards */
.gcards { list-style: none; margin: 0; padding: 0 var(--margin) var(--s-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.gcard { min-width: 0; }
.gcard__link { height: 100%; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.2rem 1.3rem 1.1rem; background: var(--light-grey); border-radius: 0.9rem; box-shadow: 0 1px 2px rgba(8, 8, 7, 0.04), 0 6px 18px rgba(8, 8, 7, 0.05); transition: background-color 0.3s, box-shadow 0.3s; }
.gcard__link:hover { background: var(--grey); box-shadow: 0 1px 2px rgba(8, 8, 7, 0.05), 0 10px 24px rgba(8, 8, 7, 0.07); }
.gcard__link:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.gcard__top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.3rem; }
.gcard__thumb { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 0.5rem; overflow: hidden; background: var(--grey); }
.gcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gcard__kind { display: flex; flex-direction: column; gap: 0.15rem; }
.gcard__count { color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.gcard__title { font-size: clamp(1.25rem, 0.95rem + 0.6vw, 1.6rem); font-weight: var(--w-strong); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.gcard__text { font-size: var(--f-small); line-height: 1.45; color: var(--dark-grey); }
.gcard__list { display: grid; margin-top: 0.4rem; font-size: var(--f-small); line-height: 1.3; }
.gcard__listlabel { padding-bottom: 0.45rem; color: var(--dark-grey); }
.gcard__row { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); padding: 0.45rem 0; border-top: 1px solid var(--grey); }
.gcard__link:hover .gcard__row { border-color: #c9cacb; }
.gcard__k { color: var(--dark-grey); font-variant-numeric: tabular-nums; }
.gcard__sub { display: block; margin-top: 0.15rem; color: var(--dark-grey); font-size: 0.8125rem; }
@media (min-width: 1300px) { .gcard__sub { display: none; } }   /* wide cards: the regions alone keep the three cards even; the town names fill the narrower ones */
.gcard__foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--black); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.6rem; color: var(--dark-grey); }
.gcard__go { margin-left: auto; color: var(--black); white-space: nowrap; }
@media (max-width: 899px) { .gcards { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); } }