/* ==========================================================================
   HABITAT — styles.css
   One file for the whole site. Sections follow the page order.
   Breakpoints: tablet ≤ 1100px · mobile ≤ 760px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --cream: #fff0d7;
  --red: #f7150b;
  --blue: #334ca7;
  --line: #e3d8bc;          /* hairlines on cream */
  --line-red: #fbb9a6;      /* soft red hairlines (FAQ, lists) */
  --line-cream: rgba(255, 240, 215, 0.3);
  --ph: #f4e2c1;            /* image placeholder fill */

  --sans: "neue-haas-unica", "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "degular-mono", "Degular Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --frame: 6px;             /* red viewport frame, all four sides */
  --pad: 72px;              /* inner margin: frame + pad = 78px to content */
  --gap: 24px;              /* column gutter */
  --top: 72px;              /* fixed top bar height (inside the frame) */
  --cta: 52px;              /* mobile "Request a call" bar along the bottom */

  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1100px) {
  :root { --pad: 40px; }
}

@media (max-width: 760px) {
  :root { --pad: 18px; --top: 56px; }
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--red);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

p, h1, h2, h3, ul, figure, blockquote { margin: 0; }
ul { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.ground-blue :focus-visible,
.ground-red :focus-visible,
.ground-blue:focus-visible { outline-color: var(--cream); }

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--red);
}
.skip:focus { left: 18px; }


/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

.display {
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.label {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.caption {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.b { font-weight: 700; font-size: 18px; line-height: 20px; }
.small { font-size: 17px; font-weight: 400; }
.meta { color: var(--blue); }
.ground-blue .meta { color: inherit; }

.copy { display: flex; flex-direction: column; gap: 10px; }

.hang { text-indent: -0.42em; }

.m-only { display: none; }

@media (max-width: 760px) {
  .display { font-size: 32px; line-height: 36px; }
  .d-only { display: none; }
  .m-only { display: inline; }
}


/* --------------------------------------------------------------------------
   4. Layout: frame, wrap, 4-column grid
   -------------------------------------------------------------------------- */

.frame {
  position: fixed;
  inset: 0;
  z-index: 60;
  border: var(--frame) solid var(--red);
  pointer-events: none;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: calc(var(--frame) + var(--pad));
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
}

.g-1  { grid-column: 1; }
.g-2  { grid-column: 2; }
.g-3  { grid-column: 3; }
.g-4  { grid-column: 4; }
.g-12 { grid-column: 1 / span 2; }
.g-23 { grid-column: 2 / span 2; }
.g-24 { grid-column: 2 / span 3; }
.g-34 { grid-column: 3 / span 2; }

/* Headline row, then label (col 2) beside copy (cols 3–4) */
.stack { row-gap: 40px; align-items: baseline; }

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > [class*="g-"] { grid-column: 1; grid-row: auto; }
  /* Mobile: label first, headline 20 below it, copy 32 below that */
  .stack { row-gap: 0; }
  .stack > * { margin-top: 32px; }
  .stack > .first-m { order: -1; margin-top: 0; }
  .stack > .display { margin-top: 20px; }
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.btn:hover { background: var(--red); border-color: var(--red); color: var(--cream); }

.btn--cream { color: var(--cream); border-color: var(--cream); }
.ground-blue .btn--cream:hover { background: var(--cream); border-color: var(--cream); color: var(--blue); }
.ground-red .btn--cream:hover { background: var(--cream); border-color: var(--cream); color: var(--red); }

.btn--blue { background: var(--blue); border-color: var(--blue); color: var(--cream); }
.btn--blue:hover { background: var(--red); border-color: var(--red); }

.btn--fill { background: var(--cream); border-color: var(--cream); color: var(--blue); }
.btn--fill:hover { background: var(--red); border-color: var(--red); color: var(--cream); }

.ground-blue { background: var(--blue); color: var(--cream); }
.ground-red { background: var(--red); color: var(--cream); }


/* --------------------------------------------------------------------------
   6. Fixed top bar (inside the frame) + "Request a call" rail / bottom bar
   -------------------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--frame) + var(--top) + 12px); }

/* Milky, translucent cream — content blurs as it scrolls underneath */
.top {
  position: fixed;
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
  z-index: 55;
  height: var(--top);
  background: rgba(255, 240, 215, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top { background: rgba(255, 240, 215, 0.96); }
}

.top__inner {
  position: relative;
  max-width: calc(1440px - var(--frame) * 2);
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
}

.top__home { display: flex; align-items: center; min-width: 0; height: 44px; }
.top__logo { width: auto; height: 22px; }
.top__section { display: none; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top__nav { display: flex; gap: 48px; margin-left: auto; }
.top__nav a { transition: color .2s; }
.top__nav a:hover,
.top__nav a[aria-current="true"] { color: var(--blue); }

/* DE tab hanging from the top of the frame */
.top__lang {
  position: absolute;
  top: 0;
  right: var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 21px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.top__menu {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: var(--red);
  color: var(--cream);
  cursor: pointer;
}

/* Desktop: red tab on the left edge of the frame */
.rail {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 152px;
  padding: 24px 0;
  white-space: nowrap;
  background: var(--red);
  color: var(--cream);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color .2s;
}
.rail:hover { background: var(--blue); }

@media (max-width: 1100px) {
  .top__nav { gap: 24px; }
}

@media (max-width: 760px) {
  body { padding-top: calc(var(--frame) + var(--top)); padding-bottom: var(--cta); }

  .top__inner { padding: 0 6px 0 var(--pad); gap: 12px; }
  .top__home { flex: 1; }
  .top__logo { height: 18px; }
  .top__nav, .top__lang { display: none; }
  .top__menu { display: flex; }
  .top.is-section .top__logo { display: none; }
  .top.is-section .top__section { display: block; }

  /* Mobile: the rail becomes the bottom edge of the frame */
  .rail {
    top: auto;
    bottom: 0;
    right: 0;
    width: auto;
    height: var(--cta);
    min-height: 0;
    padding: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }
  .rail:hover { background: var(--red); }
  .rail:active { background: var(--blue); }
}


/* --------------------------------------------------------------------------
   7. Sections — shared spacing
   -------------------------------------------------------------------------- */

.section { padding-block: 160px; }

@media (max-width: 760px) {
  .section { padding-block: 100px; }
}


/* --------------------------------------------------------------------------
   8. 01 Hero
   -------------------------------------------------------------------------- */

.hero .wrap { padding-top: calc(var(--frame) + var(--top)); }

.hero__title { margin-top: 96px; }
.hero__intro { margin-top: 20px; align-items: last baseline; }
.hero__meta { text-align: right; }

.hero__img {
  width: 100%;
  height: 480px;
  margin-top: 20px;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .hero__title { margin-top: 72px; }
  .hero__intro .g-12 { grid-column: 1 / span 3; }
}

@media (max-width: 760px) {
  .hero .wrap { padding-top: 0; padding-bottom: 24px; }
  .hero__title { margin-top: 48px; }
  .hero__intro .g-12 { grid-column: 1; }
  .hero__meta { margin-top: 20px; text-align: left; font-size: 13px; letter-spacing: 0.06em; }
  .hero__img { height: auto; aspect-ratio: 4 / 5; margin-top: 32px; }
}


/* --------------------------------------------------------------------------
   9. 02 Challenge · 03 Handled
   -------------------------------------------------------------------------- */

.section--challenge { padding: 80px 0 0; }
.section--handled { padding-block: 80px; }

.handled {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 60px;
  align-items: start;
}
.handled p { margin-top: 20px; }
.handled p + p { margin-top: 10px; }

@media (max-width: 1100px) {
  .handled { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

@media (max-width: 760px) {
  .section--challenge { padding: 100px 0 0; }
  .section--handled { padding-block: 100px; }
}


/* --------------------------------------------------------------------------
   10. 04 Why HABITAT (blue)
   -------------------------------------------------------------------------- */

.why__quote { margin-top: 40px; row-gap: 20px; }
.why__bio { margin-top: 40px; align-items: start; }
.why__bio img { grid-row: 1; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.why__bio p { grid-row: 1; margin-top: -4px; }

@media (max-width: 1100px) {
  .why__bio p { grid-column: 2 / span 2; }
}

@media (max-width: 760px) {
  .why__quote { margin-top: 20px; }
  .why__bio img { aspect-ratio: 4 / 5; object-position: 50% 25%; }
  .why__bio p { margin-top: 24px; }
}


/* --------------------------------------------------------------------------
   11. 05 Projects
   -------------------------------------------------------------------------- */

.projects { margin-top: 80px; }

.projects__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 60px;
  list-style: none;
}

.project.is-hidden { display: none; }
.project.is-new { animation: rise .5s var(--ease) both; }

.project__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.project__card > .label { margin-top: 12px; }
.project__name { font-weight: 700; }
.project__card:hover .project__name,
.project__card:focus-visible .project__name { color: var(--blue); }

.project__card img,
.ph--card { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Image placeholder — replace with <img> when photos exist */
.ph {
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: var(--ph);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.projects__more { display: flex; align-items: center; gap: 24px; margin-top: 60px; }
.projects__more[hidden] { display: none; }

@media (max-width: 760px) {
  .projects { margin-top: 40px; }
  .projects__list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .projects__more { justify-content: space-between; margin-top: 40px; }
}


/* --------------------------------------------------------------------------
   12. 06 Plans (blue) + How we work
   -------------------------------------------------------------------------- */

.section--plans .stack > *,
.section--how .stack > * { grid-row: 1; }

.plans {
  margin-top: 80px;
  grid-template-rows: repeat(6, auto);
}

.plan {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  border-top: 1px solid var(--cream);
  padding-top: 20px;
}

.plan__name { font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; }
.plan__price { padding-top: 40px; font-size: 48px; line-height: 48px; font-weight: 500; letter-spacing: -0.02em; }
.plan__unit { padding-top: 10px; }
.plan__lead { padding-top: 40px; }
.plan__list { padding-top: 20px; list-style: none; }
.plan__list li { padding: 10px 0; border-top: 1px solid var(--line-cream); }
.plan__more { display: none; padding-top: 20px; font-size: 17px; font-weight: 400; }
.plan__more .label { margin-bottom: 10px; }
.plans.is-open .plan__more { display: block; animation: rise .4s var(--ease) both; }

/* Signature: the one light card on the blue ground */
.plans { align-items: stretch; }
.plan--featured,
.plan--addon {
  position: relative;
  padding: 20px 20px 24px;
  border: 1px solid var(--cream);
}
.plan--featured { background: var(--cream); color: var(--blue); }
.plan--featured .plan__list li { border-top-color: rgba(51, 76, 167, 0.22); }
.plan__flag {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 2px 8px;
  background: var(--blue);
  color: var(--cream);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
}

/* Paid promotion: outline only, the quieter add-on */
.plan--addon { background: transparent; }

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.toggle:hover { color: #fff; }

.nextstep {
  margin: 60px calc(var(--gap) * -1) 0;
  padding: var(--gap);
  align-items: center;
  background: var(--cream);
  color: var(--blue);
}
.nextstep .btn { width: 100%; }

.section--how { padding-bottom: 0; }
.how { margin-top: 60px; align-items: start; }
.how__col { border-top: 1px solid var(--red); padding-top: 20px; }
.how__col .label + p { margin-top: 20px; }
.how__list { padding-top: 20px; list-style: none; }
.how__list li { padding: 10px 0; border-top: 1px solid var(--line-red); }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 48px; }
  .plan { grid-row: auto; display: block; }
  .plan__price { font-size: 40px; line-height: 40px; }
  .nextstep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nextstep .g-1 { grid-column: 1 / -1; margin-bottom: 12px; }
  .nextstep .g-23 { grid-column: 1 / span 2; }
  .nextstep .g-4 { grid-column: 3; }
}

@media (max-width: 760px) {
  .section--plans .stack > *,
  .section--how .stack > * { grid-row: auto; }

  .plans { margin-top: 48px; grid-template-columns: minmax(0, 1fr); }
  .plan__name { font-size: 24px; line-height: 28px; }
  .plan__price { padding-top: 24px; }
  .plan__unit { padding-top: 8px; }
  .plan__lead { padding-top: 20px; }
  .plan__list { padding-top: 16px; }
  .toggle { margin-top: 24px; }

  .nextstep {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 40px calc(var(--frame) * -1) 0;
    padding: 20px 18px 18px;
  }
  .nextstep .g-1 { margin-bottom: 0; }
  .nextstep .b { margin-top: 12px; }
  .nextstep .btn { margin-top: 20px; }

  .section--how { padding-bottom: 0; }
  .how { margin-top: 40px; row-gap: 40px; }
  .how__col .label + p { margin-top: 12px; }
  .how__list { padding-top: 16px; }
}


/* --------------------------------------------------------------------------
   13. 07 FAQ
   -------------------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 40px; margin-top: 80px; }
.faq__group { align-items: start; }
.faq__title { padding-top: 25px; }
.faq__items { border-top: 1px solid var(--red); }

.faq details { border-bottom: 1px solid var(--line-red); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--blue);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--blue); }

.faq__a { display: flex; flex-direction: column; gap: 10px; padding: 0 48px 24px 24px; }
.faq details[open] .faq__a { animation: rise .4s var(--ease) both; }

@media (max-width: 760px) {
  .faq { margin-top: 48px; }
  .faq__title { padding-top: 0; margin-bottom: 12px; }
  .faq summary { gap: 16px; padding: 20px 0; }
  .faq__a { padding: 0 24px 20px 0; }
}


/* --------------------------------------------------------------------------
   14. 08 Contact
   -------------------------------------------------------------------------- */

.contact__btn { margin-top: 20px; }

@media (max-width: 760px) {
  .contact__btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   15. 09 Footer (red)
   -------------------------------------------------------------------------- */

.footer {
  padding: 120px 0 40px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer a:hover { color: #fff; }

.footer__cols { align-items: start; }
.footer__col { display: flex; flex-direction: column; }
.footer__h { margin-bottom: 20px; }

.footer__mark { width: auto; height: 20px; margin-bottom: 20px; margin-right: auto; }

.footer__legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cream);
  align-items: baseline;
}
.footer__lang { justify-self: end; }

@media (max-width: 1100px) {
  .footer { font-size: 13px; letter-spacing: 0.06em; }
}

@media (max-width: 760px) {
  .footer { padding: 64px 0 40px; }
  .footer__cols,
  .footer__legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cols { row-gap: 32px; }
  .footer__contact { grid-column: 1 / -1; order: -1; }
  .footer__page { grid-column: 1 / -1; }
  .footer__h { margin-bottom: 12px; }
  .footer__mark { margin-top: 64px; }
  .footer__legal { margin-top: 24px; padding-top: 16px; row-gap: 8px; }
  .footer__legal > :nth-child(even) { justify-self: end; }
}


/* --------------------------------------------------------------------------
   16. Dialogs — shared
   -------------------------------------------------------------------------- */

dialog {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: var(--frame) solid var(--red);
  background: var(--cream);
  color: var(--red);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: transparent; }
dialog[open] { animation: fade .3s ease-out both; }

.dialog-wrap,
.pdialog__inner,
.cdialog__inner {
  max-width: 1428px;
  margin: 0 auto;
  padding: 0 var(--pad) 24px;
}


/* --------------------------------------------------------------------------
   17. Menu dialog (mobile)
   -------------------------------------------------------------------------- */

.menu.ground-red { background: var(--red); color: var(--cream); }
.menu[open] {
  display: flex;
  flex-direction: column;
  padding: 0 18px 32px;
}

.menu__head { display: flex; justify-content: space-between; align-items: center; flex: none; height: 56px; margin-right: -12px; }
.menu__head img { width: auto; height: 18px; }

.menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cream);
  background: none;
  color: var(--cream);
  cursor: pointer;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 64px;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.02em;
}
.menu__nav a:hover { color: #fff; }

.menu__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 48px;
}


/* --------------------------------------------------------------------------
   18. Project dialog
   -------------------------------------------------------------------------- */

/* The dialog always fills the screen: bar on top, body grows, nav pinned to the bottom */
.pdialog[open] .pdialog__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 0;
}

.pdialog__bar { flex: none; align-items: center; padding-top: 24px; }
.pdialog__close { justify-self: end; }

.pdialog__body {
  flex: 1 0 auto;
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  row-gap: 24px;
  margin-top: 24px;
}

.pdialog__title { grid-column: 1 / span 3; grid-row: 1; }
/* Category sits right-aligned on the title row, like the hero's "Vienna / Monthly plans" */
.pdialog__tag { grid-column: 4; grid-row: 1; align-self: end; text-align: right; }

/* Large image, cols 1–2, 3:2 */
.pdialog__main { grid-column: 1 / span 2; grid-row: 2; }
.pdialog__main > * { display: flex; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Right half: two upright images side by side (cols 3 and 4), exactly as tall as the large image —
   at this width that is close to 2:3. height 0 + min-height 100%: the row takes its height from the large image. */
.pdialog__thumbs {
  grid-column: 3 / span 2;
  grid-row: 2;
  align-self: stretch;
  height: 0;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
/* Absolutely placed, so no photo can push the row taller — upright or landscape */
.pdialog__thumbs { position: relative; }
.pdialog__thumbs > * {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  width: calc(50% - var(--gap) / 2);
  height: 100%;
  object-fit: cover;
}
.pdialog__thumbs > :nth-child(1) { left: 0; }
.pdialog__thumbs > :nth-child(2) { right: 0; }

/* … and the text below them, starting at the middle of the screen */
.pdialog__body { grid-template-rows: auto auto 1fr; }
.pdialog__text { grid-column: 3 / span 2; grid-row: 3; }

.detail__role {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pdialog__text p + p { margin-top: 10px; }
.pdialog__text .detail__snippet { margin-top: 20px; font-weight: 700; }

/* Previous / Next: always in the same place at the bottom */
.pdialog__nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: none;
  margin-top: 24px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.pdialog__nav .g-4 { justify-self: end; }
.pdialog__nav .g-1 { justify-self: start; }

@media (max-width: 760px) {
  .pdialog__bar { display: flex; gap: 16px; padding-top: 12px; }
  .pdialog__close { margin-left: auto; padding: 0 16px; }

  .pdialog__body { grid-template-rows: none; row-gap: 20px; margin-top: 20px; }
  .pdialog__body > * { grid-column: 1; grid-row: auto; }
  .pdialog__tag { order: -1; text-align: left; margin-bottom: -8px; }
  .pdialog__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .pdialog__thumbs { height: auto; min-height: 0; }
  .pdialog__thumbs > * { position: static; width: 100%; height: auto; aspect-ratio: 2 / 3; }

  .pdialog__nav { display: flex; justify-content: space-between; padding: 12px 0; }
  .pdialog__nav .btn { padding: 0 16px; }
}


/* --------------------------------------------------------------------------
   19. Request-a-call dialog (blue) + form
   -------------------------------------------------------------------------- */

.cdialog.ground-blue { background: var(--blue); color: var(--cream); }
.cdialog__inner { padding-bottom: 48px; }

.cdialog__bar { align-items: center; padding-top: 24px; }
.cdialog__bar .btn { justify-self: end; }

.cdialog__body { margin-top: 48px; align-items: start; }
.cdialog__anna img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.cdialog__anna figcaption { margin-top: 12px; }

.cform { margin-top: -7px; }
.cform__intro { margin-top: 24px; }

.cform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
  margin-top: 40px;
}
.field--wide { grid-column: 1 / -1; }

.field input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cream);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus { outline: none; border-bottom-width: 2px; }
.field input[aria-invalid="true"] { border-bottom-width: 2px; }
.field__err { margin-top: 8px; }

.cform__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; }
.cform__foot .btn { flex: none; }
.cform__foot a { text-decoration: underline; text-underline-offset: 3px; }
.cform__fail { margin-top: 20px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cthanks { display: flex; flex-direction: column; align-items: flex-start; }
.cthanks p { margin-top: 40px; }
.cthanks .btn { margin-top: 60px; }

@media (max-width: 760px) {
  .cdialog__inner { padding-bottom: 24px; }
  .cdialog__bar { display: flex; justify-content: space-between; padding-top: 12px; }
  .cdialog__bar .btn { padding: 0 16px; }

  .cdialog__body { margin-top: 20px; }
  .cdialog__anna { display: flex; align-items: flex-end; gap: 16px; }
  .cdialog__anna img { width: 48px; height: 64px; aspect-ratio: auto; flex: none; }
  .cdialog__anna figcaption { margin-top: 0; }

  .cform { margin-top: 24px; }
  .cform__intro { margin-top: 12px; }
  .cform__fields { row-gap: 20px; margin-top: 28px; }
  .cform__foot { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; }
  .cform__foot .btn { width: 100%; }

  .cthanks { margin-top: 48px; }
  .cthanks p { margin-top: 24px; }
  .cthanks .btn { width: 100%; margin-top: 40px; }
}


/* --------------------------------------------------------------------------
   20. Motion
   -------------------------------------------------------------------------- */

/* Scroll reveals — main.js adds .reveal / .reveal-img to elements and
   .is-in when they enter the viewport. Without JS (or with reduced motion)
   nothing is hidden. --d is a small per-element stagger. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Images unveil top to bottom */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal-img.is-in { clip-path: inset(0 0 0 0); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* --------------------------------------------------------------------------
   21. Footer privacy links, project note, legal pages
   -------------------------------------------------------------------------- */

.footer__privacy { display: flex; flex-wrap: wrap; column-gap: 16px; }
.footer__btn,
.legal__btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.footer__btn:hover { color: #fff; }
.legal__btn { text-decoration: underline; text-underline-offset: 3px; }

.projects__note { margin-top: 60px; max-width: 46em; font-size: 15px; line-height: 20px; font-weight: 400; color: var(--blue); }
.projects__note a { text-decoration: underline; text-underline-offset: 3px; }

.top__back { margin-left: auto; transition: color .2s; }
.top__back:hover { color: var(--blue); }

.legal { padding-top: calc(var(--frame) + var(--top) + 96px); }
.legal__sub { color: var(--blue); }
.legal__block { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); align-items: start; }
.legal__block:first-of-type { margin-top: 80px; }
.legal__text p + p { margin-top: 12px; }
.legal__text a { text-decoration: underline; text-underline-offset: 3px; }
.legal__text a:hover { color: var(--blue); }

@media (max-width: 760px) {
  .projects__note { margin-top: 40px; }
  .page-legal { padding-bottom: 0; }
  .top__back { font-size: 13px; letter-spacing: 0.06em; }
  .legal { padding-top: 48px; }
  .legal__block { margin-top: 32px; }
  .legal__block:first-of-type { margin-top: 48px; }
  .legal__block .label { margin-bottom: 12px; }
}


/* --------------------------------------------------------------------------
   22. Fonts consent notice (Adobe Fonts load only after "Load fonts")
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: calc(var(--frame) + 48px);
  bottom: calc(var(--frame) + 24px);
  z-index: 80;
  width: min(420px, calc(100vw - var(--frame) * 2 - 72px));
  padding: 20px;
  border: 1px solid var(--red);
  background: var(--cream);
  color: var(--red);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  animation: rise .4s var(--ease) both;
}
.consent[hidden] { display: none; }
.consent__title { margin-bottom: 8px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.consent__actions .btn { flex: 1; padding: 0 16px; }
.consent .btn--solid { background: var(--red); border-color: var(--red); color: var(--cream); }
.consent .btn--solid:hover { background: var(--blue); border-color: var(--blue); }

@media (max-width: 760px) {
  .consent {
    left: var(--frame);
    right: var(--frame);
    bottom: var(--cta);
    width: auto;
    border-width: 1px 0 0;
    padding: 16px 18px;
  }
  .page-legal .consent { bottom: var(--frame); }
  .consent__actions .btn { flex: 1; }
}