:root {
  --paper: #f3f2ed;
  --paper-deep: #e9e8e1;
  --ink: #20211f;
  --muted: #64665f;
  --line: #cecec5;
  --dark: #181a17;
  --dark-soft: #252823;
  --accent: #9b8766;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(22px, 4.9vw, 86px);
  --max: 1540px;
  --header: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: transparent; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #bda77e;
  outline-offset: 5px;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex-shrink: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
p + p { margin-top: 20px; }
[hidden] { display: none !important; }
.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font: 12px/1.45 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  z-index: 300;
  top: -80px;
  left: 12px;
  padding: 12px 20px;
  background: white;
  color: black;
}
.skip:focus { top: 12px; }
.arrow { width: 19px; height: 19px; }
.rule-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  min-height: 48px;
  padding-block: 8px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
}
.rule-link .arrow { transition: transform .3s ease; }
.rule-link:hover .arrow { transform: translate(3px, -3px); }

/* Header */
.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  width: 100%;
  height: var(--header);
  padding-inline: var(--gutter);
  background: var(--dark);
  color: var(--paper);
  transition: background-color .35s ease, height .35s ease, backdrop-filter .35s ease;
}
[data-page="home"] .site-header {
  position: fixed;
  background: linear-gradient(180deg, rgba(10, 12, 10, .55), transparent);
}
[data-page="home"] .site-header.is-scrolled {
  height: 76px;
  background: rgba(24, 26, 23, .94);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; min-width: 64px; min-height: 56px; flex-shrink: 0; }
.brand img { width: auto; height: 52px; transition: height .35s ease; }
.site-header.is-scrolled .brand img { height: 46px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.desktop-nav a { position: relative; display: flex; align-items: center; min-height: 48px; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 8px;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: right .25s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { right: 0; }
.portal-nav { gap: 10px; margin-left: 8px; padding-left: 28px; border-left: 1px solid #62655d; }
.portal-nav .arrow { width: 14px; height: 14px; }
.menu-button { display: none; align-items: center; gap: 13px; min-height: 48px; }
.menu-glyph { display: grid; gap: 7px; width: 25px; }
.menu-glyph i { display: block; width: 25px; height: 1px; background: currentColor; }
.noscript-menu { position: relative; }
.noscript-menu summary { min-height: 48px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 13px; }
.noscript-menu summary::-webkit-details-marker { display: none; }
.noscript-menu nav { position: absolute; top: calc(100% + 8px); right: 0; display: grid; min-width: 210px; padding: 12px; border: 1px solid #565a50; background: var(--dark); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.noscript-menu a { min-height: 44px; padding: 12px; border-bottom: 1px solid #454940; }
.noscript-menu a:last-child { border-bottom: 0; }
.site-main { min-height: 65vh; }
.site-main:focus { outline: none; }

/* Home hero — R9.4 cinematic architectural drift */
.hero {
  --hero-scale-start: 1.040;
  --hero-scale-end: 1.105;
  --hero-x-start: .75%;
  --hero-x-end: -1.55%;
  --hero-y-start: .30%;
  --hero-y-end: -1.00%;
  position: relative;
  height: 100svh;
  min-height: 660px;
  overflow: hidden;
  background: #6d6252;
  color: white;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: translate3d(var(--hero-x-start), var(--hero-y-start), 0) scale(var(--hero-scale-start));
  transform-origin: 48% 54%;
  animation: hero-cinematic-drift 20s cubic-bezier(.42,0,.22,1) infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
.hero.is-motion-paused .hero-media { animation-play-state: paused; will-change: auto; }
@keyframes hero-cinematic-drift {
  0% { transform: translate3d(var(--hero-x-start), var(--hero-y-start), 0) scale(var(--hero-scale-start)); }
  52% { transform: translate3d(-.35%, -.28%, 0) scale(1.074); }
  100% { transform: translate3d(var(--hero-x-end), var(--hero-y-end), 0) scale(var(--hero-scale-end)); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 14, 12, .6) 0%, rgba(12, 14, 12, .14) 48%, rgba(12, 14, 12, .08) 100%),
    linear-gradient(0deg, rgba(12, 14, 12, .76) 0%, transparent 54%);
  pointer-events: none;
}
.hero-content {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(42px, 7vh, 88px);
  left: var(--gutter);
  max-width: calc(var(--max) - (2 * var(--gutter)));
  margin-inline: auto;
}
.hero-kicker { margin-bottom: 22px; color: rgba(255,255,255,.76); }
.hero h1 { max-width: 760px; font-size: clamp(54px, 6.4vw, 102px); }
.hero-tag { max-width: 470px; margin-top: 22px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; }
.js [data-page="home"] .hero-content > * { animation: hero-content-in .85s cubic-bezier(.22,.75,.25,1) both; }
@keyframes hero-content-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
.hero-motion {
  position: absolute;
  z-index: 3;
  top: calc(var(--header) + 22px);
  right: var(--gutter);
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 24px;
  background: rgba(18, 21, 18, .32);
  color: white;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.js .hero-motion { display: flex; }
.hero-motion-dot { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; }
.hero-motion[aria-pressed="true"] .hero-motion-dot { background: currentColor; }

/* Editorial motion: progressive enhancement only. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .72s ease-out, transform .9s cubic-bezier(.22,.75,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-delay="1"] { --reveal-delay: 70ms; }
[data-reveal-delay="2"] { --reveal-delay: 140ms; }
.motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Home editorial sections */
.section { padding-block: clamp(82px, 10vw, 150px); }
.statement {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 9vw;
  align-items: end;
  padding-block: clamp(88px, 12vw, 170px);
}
.statement h2 { max-width: 970px; font-size: clamp(52px, 7vw, 110px); }
.statement-copy { max-width: 390px; padding-bottom: 8px; color: var(--muted); font-size: 16px; }
.statement-copy .eyebrow { margin-bottom: 24px; color: var(--ink); }
.portfolio-intro {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  gap: 9vw;
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 100px);
}
.portfolio-intro .eyebrow { margin-bottom: 25px; }
.portfolio-intro h2 { font-size: clamp(48px, 6.2vw, 94px); }
.portfolio-intro > p { max-width: 330px; padding-bottom: 8px; color: var(--muted); }
.home-projects { padding-block: clamp(82px, 10vw, 150px); }
.home-projects .portfolio-intro { margin-bottom: clamp(48px, 6vw, 88px); }
.home-narrative-projects { padding-block: 0; }
.home-narrative-projects .narrative-project { min-height: min(68svh, 740px); margin-block: clamp(28px, 4vw, 60px); }
.home-projects .section-foot { margin-top: clamp(50px, 6vw, 82px); }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(42px, 6vw, 92px) 2.4vw; align-items: start; }
.project-card { display: block; min-width: 0; }
.project-card.position-0 { grid-column: 1 / span 7; }
.project-card.position-1 { grid-column: 9 / span 4; margin-top: 150px; }
.project-card.position-2 { grid-column: 2 / span 5; }
.project-card.position-3 { grid-column: 8 / span 5; margin-top: 80px; }
.project-card.position-4 { grid-column: 1 / span 4; }
.project-card.position-5 { grid-column: 6 / span 7; margin-top: 70px; }
.project-photo { position: relative; overflow: hidden; background: var(--paper-deep); }
.project-photo.is-landscape { aspect-ratio: 1.38; }
.project-photo.is-portrait { aspect-ratio: .82; }
.project-photo.is-wide { aspect-ratio: 1.82; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.65,.25,1); }
.project-card .arrow, .service-line .arrow, .service-line h3 { transition: transform .35s cubic-bezier(.2,.65,.25,1); }
.project-card:is(:hover, :focus-visible) .project-photo img { transform: scale(1.035); }
.project-card:is(:hover, :focus-visible) .arrow,
.service-line:is(:hover, :focus-visible) .arrow { transform: translate3d(4px, -4px, 0); }
.service-line:is(:hover, :focus-visible) h3 { transform: translateX(6px); }
.project-meta { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; margin-top: 18px; }
.project-index { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.project-meta h3 { margin-bottom: 9px; font-size: clamp(29px, 2.4vw, 39px); }
.project-meta p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.project-meta p + p { margin-top: 1px; }
.project-meta .arrow { margin-top: 7px; }
.section-foot { display: flex; justify-content: flex-end; margin-top: 74px; }

.services-band { padding-block: clamp(84px, 9vw, 140px); background: var(--dark); color: var(--paper); }
.services-intro { display: grid; grid-template-columns: 1.4fr .6fr; gap: 10vw; align-items: end; margin-bottom: 72px; }
.services-intro .eyebrow { margin-bottom: 24px; color: #c1c4ba; }
.services-intro h2 { font-size: clamp(48px, 6.1vw, 90px); }
.services-intro > p { max-width: 390px; color: #bdc0b6; }
.service-line {
  display: grid;
  grid-template-columns: 56px minmax(0, .9fr) minmax(260px, 1fr) 26px;
  gap: 28px;
  align-items: start;
  padding-block: 34px;
  border-top: 1px solid #4e5249;
}
.service-line:last-of-type { border-bottom: 1px solid #4e5249; }
.service-line .num { padding-top: 9px; color: #aeb2a8; font-size: 12px; }
.service-line h3 { font-size: clamp(31px, 3vw, 45px); }
.service-line p { max-width: 460px; color: #bdc0b6; font-size: 15px; }
.service-line .arrow { margin-top: 9px; }
.service-contexts { margin-top: 34px; color: #afb3a9; font-size: 13px; }

.about-teaser { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: center; }
.about-teaser .image-wrap { height: min(72vw, 760px); max-height: 760px; overflow: hidden; }
.about-teaser .image-wrap.pencil-art { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 0; }
.about-teaser img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser .image-wrap.pencil-art img { object-fit: contain; }
.about-teaser .eyebrow { margin-bottom: 28px; }
.about-teaser h2 { margin-bottom: 32px; font-size: clamp(48px, 5.3vw, 78px); }
.about-teaser p { max-width: 480px; color: var(--muted); font-size: 17px; }
.about-teaser .rule-link { margin-top: 34px; }

/* Footer */
.site-footer { padding-block: 86px 110px; background: var(--dark); color: var(--paper); }
.footer-main { display: grid; grid-template-columns: 1.45fr .55fr; gap: 8vw; align-items: end; padding-bottom: 72px; }
.footer-main .eyebrow { color: #b8bcb1; }
.footer-main h2 { max-width: 900px; margin-top: 25px; font-size: clamp(50px, 6.5vw, 98px); }
.footer-main .rule-link { justify-self: end; white-space: nowrap; }
.footer-bottom { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; padding-top: 34px; border-top: 1px solid #4d5148; font-size: 13px; }
.footer-bottom strong { font-weight: 400; letter-spacing: .13em; }
.footer-bottom a, .footer-bottom p { display: block; margin-top: 7px; }
.footer-bottom .copyright { margin-top: 28px; color: #b9bdb3; font-size: 12px; }
.footer-bottom .right { text-align: right; }
.preview-note { margin-top: 12px; color: #b9bdb3; font-size: 12px; line-height: 1.5; }
.whatsapp-float {
  position: fixed;
  z-index: 65;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 21px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  background: rgba(31, 37, 31, .96);
  box-shadow: 0 8px 30px rgba(12, 19, 13, .22);
  color: white;
  font-size: 14px;
  backdrop-filter: blur(8px);
}
.whatsapp-float:hover { background: #465044; }
.whatsapp-float svg { width: 24px; height: 24px; }
.modal-open .whatsapp-float { visibility: hidden; }

/* Internal pages */
.page-head { display: grid; align-content: end; min-height: 62svh; padding-top: 100px; padding-bottom: clamp(62px, 8vw, 110px); background: var(--dark); color: var(--paper); }
.page-head .eyebrow { margin-bottom: 30px; color: #b8bcb1; }
.page-head h1 { max-width: 1180px; font-size: clamp(58px, 7.5vw, 116px); }
.page-head .head-bottom { display: flex; justify-content: flex-end; margin-top: 42px; }
.page-head .head-bottom p { max-width: 520px; color: #c0c4ba; font-size: 17px; }
.listing { padding-block: clamp(86px, 10vw, 150px); }
.listing-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-bottom: 82px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.listing-intro p { max-width: 520px; color: var(--muted); }
.listing .project-grid { row-gap: clamp(68px, 8vw, 120px); }

/* R3.1 — controlled comparison of four Projects layouts */
.layout-study-bar {
  position: sticky;
  z-index: 70;
  top: var(--header);
  border-bottom: 1px solid #c6c4ba;
  background: rgba(239, 237, 230, .96);
  color: var(--ink);
  backdrop-filter: blur(12px);
}
.layout-study-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 64px; }
.layout-study-inner > p { flex: 0 0 auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.layout-study-inner > p span { margin-right: 8px; color: var(--accent); }
.layout-study-links { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.layout-study-links::-webkit-scrollbar { display: none; }
.layout-study-links a { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; white-space: nowrap; font-size: 12px; }
.layout-study-links a span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #aaa99f; border-radius: 50%; font-size: 10px; }
.layout-study-links a:is(:hover, [aria-current="page"]) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.layout-study-links a:is(:hover, [aria-current="page"]) span { border-color: rgba(255,255,255,.55); }

.layout-option-head { padding-block: clamp(72px, 8vw, 124px) clamp(62px, 7vw, 105px); background: var(--dark); color: var(--paper); }
.layout-option-label { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: clamp(48px, 7vw, 88px); color: #bfc2b9; }
.layout-option-label span { font-size: 12px; letter-spacing: .06em; }
.layout-option-title { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr); gap: 8vw; align-items: end; }
.layout-option-title h1 { max-width: 1000px; font-size: clamp(64px, 8.3vw, 128px); }
.layout-option-title > p { max-width: 480px; color: #c3c7bc; font-size: 17px; }
.layout-option-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; width: min(100%, 760px); margin: 58px 0 0 auto; padding-top: 26px; border-top: 1px solid #50544b; }
.layout-option-notes div { display: grid; grid-template-columns: 92px 1fr; gap: 18px; }
.layout-option-notes dt { color: #aeb3a8; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.layout-option-notes dd { margin: 0; color: #d4d7cf; font-size: 13px; line-height: 1.55; }

.comparison-head { padding-block: clamp(76px, 9vw, 138px); background: var(--dark); color: var(--paper); }
.comparison-head .eyebrow { margin-bottom: 54px; color: #b8bcb1; }
.comparison-head > .wrap > div { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr); gap: 8vw; align-items: end; }
.comparison-head h1 { font-size: clamp(63px, 8.2vw, 126px); }
.comparison-head div > p { max-width: 490px; color: #c3c7bc; font-size: 17px; }
.comparison-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding-block: 50px; border-bottom: 1px solid var(--line); }
.comparison-intro p { max-width: 590px; color: var(--muted); }
.comparison-intro strong { color: var(--ink); font-weight: 500; }
.layout-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 82px 3vw; padding-block: clamp(72px, 9vw, 130px); }
.layout-comparison-card { min-width: 0; }
.layout-comparison-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.layout-miniature { position: relative; height: clamp(280px, 34vw, 510px); margin-block: 18px 25px; overflow: hidden; background: #deddd5; }
.layout-miniature img { width: 100%; height: 100%; object-fit: cover; }
.layout-comparison-copy h2 { font-size: clamp(40px, 4.2vw, 64px); }
.layout-comparison-copy > p { max-width: 560px; margin-top: 18px; color: var(--muted); }
.layout-comparison-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.layout-comparison-copy dt { margin-bottom: 6px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.layout-comparison-copy dd { margin: 0; font-size: 13px; line-height: 1.5; }
.compare-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px; }
.compare-preview-grid img { min-height: 0; }
.compare-preview-rows { display: grid; grid-template-columns: 58% 42%; grid-template-rows: 1fr 1fr; gap: 8px; padding: 16px; }
.compare-preview-rows img:nth-child(n+3) { display: none; }
.compare-preview-rows img:nth-child(2) { grid-column: 2; grid-row: 2; }
.compare-preview-rows i { display: block; align-self: center; width: 68%; height: 1px; margin-inline: auto; background: #77786f; }
.compare-preview-rows i:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.compare-preview-rows i:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.compare-preview-index { display: grid; grid-template-columns: 62% 38%; gap: 0; padding: 16px; }
.compare-preview-index img:first-child { grid-row: 1 / span 4; }
.compare-preview-index img:nth-child(n+2) { display: none; }
.compare-preview-index i { display: block; width: calc(100% - 22px); height: 1px; margin: auto; background: #77786f; }
.compare-preview-covers { display: grid; grid-template-rows: 1fr 1fr; gap: 7px; padding: 16px; }
.compare-preview-covers img:nth-child(n+3) { display: none; }
.compare-preview-covers i { display: none; }

/* Option A: one disciplined 3 × 4 matrix. */
.uniform-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(58px, 6vw, 96px) 2.4vw; padding-block: clamp(82px, 10vw, 150px); }
.uniform-project-card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
.uniform-project-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.65,.25,1); }
.uniform-project-card:is(:hover, :focus-visible) figure img { transform: scale(1.035); }
.uniform-project-copy { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 13px; align-items: start; margin-top: 18px; }
.uniform-number { padding-top: 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.uniform-project-copy h2 { margin-bottom: 9px; font-size: clamp(28px, 2.5vw, 40px); }
.uniform-project-copy p, .uniform-project-copy div > span, .uniform-project-copy small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.uniform-project-copy small { margin-top: 9px; color: var(--ink); letter-spacing: .05em; text-transform: uppercase; }
.uniform-project-copy .arrow { margin-top: 7px; transition: transform .3s ease; }
.uniform-project-card:is(:hover, :focus-visible) .arrow { transform: translate(3px, -3px); }

/* Projects: large alternating editorial chapters. */
.narrative-projects { padding-block: clamp(44px, 7vw, 100px); }
.narrative-project { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr); min-height: min(76svh, 820px); margin-block: clamp(44px, 7vw, 100px); background: var(--paper-deep); }
.narrative-project:first-child { margin-top: 0; }
.narrative-project:last-child { margin-bottom: 0; }
.narrative-project.is-reversed { grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); }
.narrative-project > figure { min-width: 0; overflow: hidden; }
.narrative-project.is-reversed > figure { grid-column: 2; }
.narrative-project > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.65,.25,1); }
.narrative-project:is(:hover, :focus-visible) > figure img { transform: scale(1.025); }
.narrative-project-copy { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(34px, 5vw, 78px); }
.narrative-project.is-reversed .narrative-project-copy { grid-column: 1; grid-row: 1; }
.narrative-number { color: var(--muted); font-size: 11px; letter-spacing: .13em; }
.narrative-project-copy h2 { margin-bottom: 22px; font-size: clamp(48px, 5.6vw, 84px); }
.narrative-meta { max-width: 370px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.narrative-open { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }

/* Option C: aligned project index with one shared visual stage. */
.living-index { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); gap: clamp(48px, 6vw, 100px); align-items: start; padding-block: clamp(78px, 9vw, 138px); }
.living-index-stage { position: sticky; top: calc(var(--header) + 92px); min-width: 0; }
.living-index-frame { display: grid; place-items: center; height: min(70svh, 760px); min-height: 540px; overflow: hidden; background: var(--dark-soft); }
.living-index-image { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease, transform .65s cubic-bezier(.2,.65,.25,1); }
.living-index-stage.is-changing .living-index-image { opacity: .12; transform: scale(1.012); }
.living-index-stage figcaption { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; padding-top: 15px; border-top: 1px solid var(--ink); font-size: 12px; }
.living-index-stage figcaption strong { font-weight: 500; text-align: center; }
.living-index-stage figcaption span { color: var(--muted); }
.living-index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.living-index-list li { border-bottom: 1px solid var(--line); }
.index-project-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(104px, 140px) 20px; gap: 15px; align-items: center; min-height: 106px; padding-block: 18px; transition: padding .3s ease, color .25s ease; }
.index-project-row::before { position: absolute; inset: -1px auto -1px 0; width: 2px; background: var(--accent); content: ""; transform: scaleY(0); transition: transform .28s ease; }
.index-project-row:is(:hover, :focus-visible, .is-previewing) { padding-left: 14px; }
.index-project-row:is(:hover, :focus-visible, .is-previewing)::before { transform: scaleY(1); }
.index-project-thumb { display: none; }
.index-project-number { align-self: start; padding-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.index-project-identity { display: grid; gap: 7px; }
.index-project-identity strong { font: 400 clamp(25px, 2vw, 34px)/1 var(--serif); letter-spacing: -.035em; }
.index-project-identity small { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.index-project-status { color: var(--muted); text-align: right; font-size: 10px; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; }
.index-project-row .arrow { width: 16px; height: 16px; }

/* Option D: full-width project covers. */
.immersive-projects { background: var(--dark); }
.immersive-project { position: relative; display: block; height: min(72svh, 820px); min-height: 560px; overflow: hidden; color: white; }
.immersive-project > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.65,.25,1); }
.immersive-project:is(:hover, :focus-visible) > img { transform: scale(1.025); }
.immersive-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,10,.72), rgba(10,12,10,.08) 68%), linear-gradient(0deg, rgba(10,12,10,.72), transparent 55%); }
.immersive-copy { position: absolute; inset: 0; display: grid; grid-template-columns: 100px 1fr auto; gap: 28px; align-items: end; padding-top: 48px; padding-bottom: 48px; }
.immersive-number { align-self: start; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .12em; }
.immersive-title { display: grid; gap: 13px; }
.immersive-title .eyebrow { color: rgba(255,255,255,.72); }
.immersive-title strong { font: 400 clamp(58px, 7.2vw, 112px)/.9 var(--serif); letter-spacing: -.05em; }
.immersive-title > span:last-child { color: rgba(255,255,255,.8); font-size: 13px; }
.immersive-open { display: flex; align-items: center; gap: 28px; min-width: 160px; padding-block: 14px; border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.35); font-size: 12px; }

.project-title { padding-top: clamp(54px, 7vw, 96px); padding-bottom: 52px; }
.back-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-bottom: 36px; color: var(--muted); font-size: 13px; }
.back-link .arrow { width: 15px; transform: rotate(225deg); }
.project-title .title-row { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; }
.project-title h1 { font-size: clamp(60px, 8vw, 126px); }
.project-spec-top { max-width: 320px; text-align: right; font-size: 13px; line-height: 1.7; }
.project-spec-top .media-status { display: inline-block; margin-bottom: 10px; padding: 5px 9px; border: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero-photo-button { position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in; background: var(--dark); }
.project-hero { width: 100%; max-height: 84svh; object-fit: cover; object-position: center 52%; }
.hero-photo-button.is-landscape .project-hero { aspect-ratio: 1.76; }
.hero-photo-button.is-portrait { width: min(920px, calc(100% - (2 * var(--gutter)))); margin-inline: auto; background: transparent; }
.hero-photo-button.is-portrait .project-hero { aspect-ratio: .8; max-height: none; object-fit: cover; }
.expand-label { position: absolute; right: var(--gutter); bottom: 24px; padding: 10px 15px; background: rgba(22, 27, 21, .78); color: white; font-size: 12px; backdrop-filter: blur(7px); }
.hero-photo-button.is-portrait .expand-label { right: 20px; }
.project-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; padding-block: clamp(80px, 10vw, 140px); }
.project-intro .eyebrow { margin-bottom: 26px; }
.project-intro h2 { max-width: 770px; font-size: clamp(47px, 5vw, 76px); }
.project-intro p { max-width: 540px; color: var(--muted); font-size: 17px; }
.project-gallery { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 6vw 2.5vw; padding-bottom: 80px; }
.gallery-button { display: block; grid-column: span 6; width: 100%; padding: 0; text-align: left; cursor: zoom-in; }
.gallery-button.is-portrait { grid-column: span 5; }
.gallery-button.offset { grid-column-start: 7; margin-top: 100px; }
.gallery-button.is-portrait.offset { grid-column-start: 8; }
.gallery-button img { width: 100%; height: auto; }
.gallery-button .caption { display: block; max-width: 520px; padding-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.project-story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; padding-block: 70px 120px; border-top: 1px solid var(--line); }
.project-story h2 { font-size: clamp(45px, 4.8vw, 72px); }
.project-story p { max-width: 470px; color: var(--muted); font-size: 17px; }
.project-story .rule-link { margin-top: 28px; }
.next-project { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; align-items: center; padding-block: 68px 90px; border-top: 1px solid var(--line); }
.next-project h2 { margin-block: 20px 22px; font-size: clamp(45px, 5vw, 74px); }
.next-project .next-picture { overflow: hidden; aspect-ratio: 1.55; background: var(--paper-deep); }
.next-project img { width: 100%; height: 100%; object-fit: cover; }

/* Services */
.service-hero-image { width: 100%; max-height: 72svh; aspect-ratio: 2.05; object-fit: cover; object-position: center 48%; }
.contexts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; padding-block: 72px; border-bottom: 1px solid var(--line); }
.context-item .eyebrow { margin-bottom: 18px; }
.context-item h2 { margin-bottom: 18px; font-size: 36px; }
.context-item p { max-width: 370px; color: var(--muted); font-size: 15px; }
.service-detail { display: grid; grid-template-columns: 60px .9fr 1.1fr; gap: 34px; padding-block: 58px; border-top: 1px solid var(--line); }
.service-detail .num { padding-top: 10px; font-size: 12px; }
.service-detail h2 { font-size: clamp(40px, 4vw, 59px); }
.service-detail .service-body > p { max-width: 570px; color: var(--muted); font-size: 16px; }
.deliverables { margin: 27px 0 0; padding: 0; list-style: none; font-size: 14px; }
.deliverables li { padding-block: 13px; border-bottom: 1px solid var(--line); }
.service-detail .rule-link { margin-top: 20px; }
.scope-note { max-width: 970px; padding-block: 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* About, contact and client */
.about-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10vw; align-items: start; }
.about-layout img { width: 100%; }
.about-founder { min-width: 0; }
.about-portrait { aspect-ratio: 2 / 3; object-fit: cover; background: #d9d9d4; }
.about-founder figcaption { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 12px; }
.about-founder figcaption strong { font-weight: 500; }
.about-founder figcaption span { color: var(--muted); text-align: right; }
.about-copy { padding-top: 24px; }
.about-copy h2 { margin-bottom: 31px; font-size: clamp(45px, 5vw, 72px); }
.about-copy p { color: var(--muted); font-size: 17px; }
.about-copy .rule-link { margin-top: 30px; }
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 95px; padding-top: 48px; border-top: 1px solid var(--line); }
.approach h3 { margin-block: 18px; font-size: 33px; }
.approach p { color: var(--muted); }
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9vw; padding-block: 90px 120px; }
.contact-image { width: 100%; aspect-ratio: 1.02; object-fit: cover; }
.contact-copy { align-self: center; }
.contact-copy h2 { margin-block: 26px; font-size: clamp(43px, 4.7vw, 68px); }
.contact-copy > p { max-width: 500px; color: var(--muted); }
.button-solid { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; min-height: 56px; padding: 14px 21px; background: var(--dark); color: var(--paper); font-size: 14px; }
.button-solid:hover { background: #3c4238; }
.contact-copy .button-solid { max-width: 470px; margin-block: 32px 12px; }
.contact-context { font-size: 13px; }
.contact-links { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.contact-links a { display: block; padding-block: 9px; }
.client-block { width: min(100%, 920px); margin-inline: auto; padding: 70px var(--gutter) 120px; }
.client-panel { padding: clamp(30px, 5vw, 62px); border: 1px solid var(--line); background: var(--paper-deep); }
.status-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.client-panel h2 { margin-block: 28px; font-size: clamp(42px, 4.5vw, 64px); }
.client-panel p { color: var(--muted); font-size: 17px; }
.client-panel .rule-link { margin-top: 28px; }
.privacy-copy { max-width: 860px; margin-inline: auto; padding-block: 72px 120px; }
.privacy-copy h2 { margin: 42px 0 18px; font-size: 34px; }
.privacy-copy p { color: var(--muted); font-size: 17px; }

/* Dialogs */
dialog { padding: 0; border: 0; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(18, 24, 17, .64); backdrop-filter: blur(5px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; }
.icon-button svg { width: 20px; height: 20px; }
.contact-dialog { width: 580px; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; overflow: auto; }
.dialog-inner { padding: 33px 38px max(40px, env(safe-area-inset-bottom)); }
.dialog-inner h2 { margin-bottom: 20px; font-size: 48px; }
.dialog-intro { max-width: 450px; margin-bottom: 28px; color: var(--muted); font-size: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { font-size: 13px; line-height: 1.55; }
.field label span { color: var(--muted); font-size: 12px; }
.field input, .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px; border: 1px solid #b9bbb1; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; }
.field textarea { min-height: 92px; resize: vertical; }
.field input[aria-invalid="true"] { border-color: #913c2e; }
.field-error { color: #833728; font-size: 12px; line-height: 1.45; }
.form-types { margin: 24px 0; padding: 0; border: 0; }
.form-types legend { margin-bottom: 12px; font-size: 13px; }
.type-choices { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.type-choice { position: relative; display: block; }
.type-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.type-choice span { display: grid; place-items: center; min-height: 58px; padding: 10px 6px; border: 1px solid #b9bbb1; text-align: center; font-size: 12px; line-height: 1.4; }
.type-choice input:checked + span { border-color: var(--dark); background: var(--dark); color: var(--paper); }
.type-choice input:focus-visible + span { outline: 3px solid #bda77e; outline-offset: 3px; }
.extra-message { margin-top: 8px; }
.extra-message summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; cursor: pointer; }
.extra-message summary::before { content: "+"; font-size: 17px; }
.extra-message[open] summary::before { content: "−"; }
.extra-message .field { margin-top: 7px; }
.form-note { margin-block: 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.form-note a { text-decoration: underline; }
.demo-note { margin-top: 14px; color: #5e6258; font-size: 12px; line-height: 1.65; }
.summary-text { width: 100%; height: 250px; margin: 20px 0; padding: 18px; border: 1px solid var(--line); background: white; color: var(--ink); font: 14px/1.7 var(--sans); resize: vertical; }
.summary-actions { display: grid; gap: 12px; }
.button-outline { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 18px; border: 1px solid var(--ink); font-size: 14px; }
.button-text { min-height: 44px; font-size: 13px; text-decoration: underline; }
.copy-status { margin: 15px 0; color: var(--muted); font-size: 13px; }
.mobile-menu { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; background: var(--dark); color: var(--paper); }
.mobile-menu .dialog-top { margin: 0; padding: 20px 24px 0; }
.mobile-menu .icon-button { border-color: #5a5f55; }
.mobile-links { display: grid; padding: 28px 24px; }
.mobile-links a { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid #555a4e; font: 38px/1.15 var(--serif); letter-spacing: -.03em; }
.mobile-links a[aria-current="page"] { color: #d6c6a8; }
.mobile-links .client-menu-link { min-height: 58px; margin-top: 26px; border: 0; font: 18px/1.4 var(--sans); }
.mobile-menu .menu-foot { padding: 24px; color: #b8beb1; font-size: 13px; }
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; background: #141713; color: #f6f5f0; }
.lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 74px; padding: 10px 28px; font-size: 13px; }
.lightbox .icon-button { border-color: #6f7667; }
.lightbox-stage { position: relative; display: grid; place-items: center; height: calc(100dvh - 153px); padding-inline: 78px; }
.lightbox-image { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.lb-nav { position: absolute; top: 45%; border-color: #727d68; background: rgba(30,37,28,.9); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lightbox-caption { max-width: 1000px; margin: auto; padding: 14px 60px; color: #d2d6ca; text-align: center; font-size: 13px; }
.zoom-hint { color: #b9c1b1; font-size: 11px; }

@media (min-width: 1700px) {
  .site-header { padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2)); }
}

@media (min-width: 761px) {
  .noscript-menu { display: none; }
}

@media (max-width: 1000px) {
  .hero-media { object-position: 38% 54%; }
  .desktop-nav { gap: 19px; }
  .portal-nav { padding-left: 18px; }
  .statement, .portfolio-intro, .services-intro { gap: 5vw; }
  .project-card.position-1 { margin-top: 95px; }
  .service-line { grid-template-columns: 44px .9fr 1fr 24px; gap: 18px; }
  .about-teaser, .about-layout, .contact-layout { gap: 6vw; }
  .project-intro, .project-story, .next-project { gap: 6vw; }
  .layout-study-inner { display: block; padding-block: 10px; }
  .layout-study-inner > p { margin-bottom: 7px; }
  .layout-study-links { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .layout-option-title, .comparison-head > .wrap > div { gap: 5vw; }
  .uniform-projects { grid-template-columns: 1fr 1fr; }
  .living-index { grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); gap: 40px; }
  .living-index-stage { top: calc(var(--header) + 113px); }
  .index-project-row { grid-template-columns: 28px minmax(0, 1fr) 19px; }
  .index-project-status { grid-column: 2; text-align: left; }
  .index-project-row .arrow { grid-column: 3; grid-row: 1; }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; --header: 76px; }
  body { font-size: 16px; }
  .desktop-nav { display: none; }
  .menu-button { display: none; }
  .js .menu-button { display: flex; }
  .brand { min-width: 54px; }
  .brand img, .site-header.is-scrolled .brand img { width: auto; height: 44px; }
  .site-header { gap: 15px; }
  [data-page="home"] .site-header.is-scrolled { height: 70px; }
  .hero {
    --hero-scale-start: 1.055;
    --hero-scale-end: 1.125;
    --hero-x-start: .55%;
    --hero-x-end: -1.25%;
    --hero-y-start: .20%;
    --hero-y-end: -.75%;
    min-height: 620px;
  }
  .hero-media { object-position: 30% 52%; transform-origin: 30% 52%; }
  .hero-media { animation-duration: 18s; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(12,14,12,.35), rgba(12,14,12,.02)),
      linear-gradient(0deg, rgba(12,14,12,.9) 0%, rgba(12,14,12,.12) 70%);
  }
  .hero-content { right: 22px; bottom: 30px; left: 22px; display: block; }
  .hero-kicker { margin-bottom: 16px; }
  .hero h1 { max-width: 330px; font-size: 52px; }
  .hero-tag { max-width: 310px; margin-top: 16px; font-size: 16px; }
  .hero-motion { top: calc(var(--header) + 13px); right: 18px; min-height: 38px; padding: 7px 10px; }
  .hero-motion [data-motion-label] { display: none; }
  .statement { display: block; padding-block: 82px 92px; }
  .statement h2 { font-size: 52px; }
  .statement-copy { margin-top: 34px; font-size: 16px; }
  .section { padding-block: 78px; }
  .portfolio-intro { display: block; margin-bottom: 48px; }
  .portfolio-intro h2 { font-size: 51px; }
  .portfolio-intro > p { margin-top: 26px; }
  .home-projects { padding-block: 78px; }
  .home-projects .portfolio-intro { margin-bottom: 48px; }
  .home-narrative-projects { padding-bottom: 0; }
  .home-narrative-projects .narrative-project { min-height: 0; margin-block: 24px; }
  .home-narrative-projects .narrative-project-copy { min-height: 350px; }
  .home-projects .section-foot { margin-top: 48px; }
  .project-grid { display: block; }
  .project-card,
  .project-card.position-0,
  .project-card.position-1,
  .project-card.position-2,
  .project-card.position-3,
  .project-card.position-4,
  .project-card.position-5 { width: 100%; margin: 0 0 52px; }
  .project-photo.is-landscape { aspect-ratio: 1.22; }
  .project-photo.is-portrait { aspect-ratio: .88; }
  .project-photo.is-wide { aspect-ratio: 1.45; }
  .project-meta h3 { font-size: 31px; }
  .section-foot { justify-content: flex-start; margin-top: 6px; }
  .services-band { padding-block: 72px; }
  .services-intro { display: block; margin-bottom: 45px; }
  .services-intro h2 { font-size: 50px; }
  .services-intro > p { margin-top: 27px; }
  .service-line { grid-template-columns: 28px 1fr 22px; gap: 12px; padding-block: 28px; }
  .service-line .num { grid-column: 1; }
  .service-line h3 { grid-column: 2; font-size: 31px; }
  .service-line p { grid-column: 2; font-size: 14px; }
  .service-line .arrow { grid-column: 3; grid-row: 1; }
  .about-teaser { display: flex; flex-direction: column; gap: 48px; }
  .about-teaser .image-wrap { width: 100%; height: 112vw; max-height: 590px; }
  .about-teaser .image-wrap.pencil-art { padding: 0; }
  .about-teaser h2 { font-size: 49px; }
  .about-teaser p { font-size: 16px; }
  .site-footer { padding-block: 64px 112px; }
  .footer-main { display: block; padding-bottom: 50px; }
  .footer-main h2 { font-size: 50px; }
  .footer-main .rule-link { margin-top: 30px; }
  .footer-bottom { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom .right { text-align: left; }
  .whatsapp-float { right: 17px; bottom: max(17px, env(safe-area-inset-bottom)); min-height: 54px; padding: 12px 17px; font-size: 13px; }
  .page-head { min-height: 56svh; padding-top: 66px; padding-bottom: 54px; }
  .page-head h1 { font-size: 54px; }
  .page-head .head-bottom { display: block; margin-top: 28px; }
  .page-head .head-bottom p { font-size: 16px; }
  .listing { padding-block: 72px; }
  .listing-intro { display: block; margin-bottom: 48px; }
  .listing-intro p + p { margin-top: 16px; }
  .layout-study-bar { top: var(--header); }
  .layout-study-inner { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .layout-study-inner > p { display: none; }
  .layout-study-links { gap: 4px; }
  .layout-study-links a { min-height: 36px; padding: 7px 10px; }
  .layout-option-head { padding-block: 58px 62px; }
  .layout-option-label { display: block; margin-bottom: 44px; }
  .layout-option-label span { display: block; margin-top: 10px; }
  .layout-option-title { display: block; }
  .layout-option-title h1 { font-size: 58px; }
  .layout-option-title > p { margin-top: 29px; font-size: 16px; }
  .layout-option-notes { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .layout-option-notes div { grid-template-columns: 84px 1fr; }
  .comparison-head { padding-block: 62px 68px; }
  .comparison-head .eyebrow { margin-bottom: 38px; }
  .comparison-head > .wrap > div { display: block; }
  .comparison-head h1 { font-size: 57px; }
  .comparison-head div > p { margin-top: 30px; font-size: 16px; }
  .comparison-intro { grid-template-columns: 1fr; gap: 22px; padding-block: 38px; }
  .layout-comparison-grid { grid-template-columns: 1fr; gap: 68px; padding-block: 62px 84px; }
  .layout-miniature { height: min(78vw, 420px); }
  .layout-comparison-copy h2 { font-size: 44px; }
  .layout-comparison-copy dl { gap: 14px; }
  .uniform-projects { grid-template-columns: 1fr; gap: 58px; padding-block: 68px 84px; }
  .uniform-project-card figure { aspect-ratio: 1.18; }
  .uniform-project-copy { grid-template-columns: 27px minmax(0, 1fr) 19px; }
  .uniform-project-copy h2 { font-size: 34px; }
  .narrative-projects { padding-block: 20px 55px; }
  .narrative-project, .narrative-project.is-reversed { display: flex; flex-direction: column; min-height: 0; margin-block: 34px; }
  .narrative-project:first-child { margin-top: 0; }
  .narrative-project:last-child { margin-bottom: 0; }
  .narrative-project > figure, .narrative-project.is-reversed > figure { width: 100%; aspect-ratio: 1.18; }
  .narrative-project-copy, .narrative-project.is-reversed .narrative-project-copy { min-height: 390px; padding: 28px 24px 31px; }
  .narrative-project-copy h2 { font-size: 52px; }
  .living-index { display: block; padding-block: 57px 84px; }
  .living-index-stage { display: none; }
  .index-project-row { grid-template-columns: 94px 28px minmax(0, 1fr) 18px; gap: 12px; min-height: 126px; padding-block: 16px; }
  .index-project-row:is(:hover, :focus-visible, .is-previewing) { padding-left: 0; }
  .index-project-row::before { display: none; }
  .index-project-thumb { display: block; grid-column: 1; grid-row: 1 / span 2; width: 94px; height: 94px; overflow: hidden; background: var(--paper-deep); }
  .index-project-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .index-project-number { grid-column: 2; grid-row: 1; }
  .index-project-identity { grid-column: 3; grid-row: 1; }
  .index-project-identity strong { font-size: 28px; }
  .index-project-status { grid-column: 3; grid-row: 2; align-self: start; }
  .index-project-row .arrow { grid-column: 4; grid-row: 1; }
  .immersive-project { height: 68svh; min-height: 540px; }
  .immersive-shade { background: linear-gradient(0deg, rgba(10,12,10,.86), rgba(10,12,10,.05) 78%); }
  .immersive-copy { grid-template-columns: 1fr auto; gap: 18px; align-content: end; padding-top: 28px; padding-bottom: 28px; }
  .immersive-number { position: absolute; top: 24px; left: 22px; }
  .immersive-title strong { font-size: 57px; }
  .immersive-open { min-width: 0; align-self: end; font-size: 0; }
  .immersive-open .arrow { width: 22px; height: 22px; }
  .project-title { padding-top: 38px; padding-bottom: 34px; }
  .back-link { margin-bottom: 22px; }
  .project-title .title-row { display: block; }
  .project-title h1 { font-size: 57px; }
  .project-spec-top { margin-top: 27px; text-align: left; }
  .hero-photo-button.is-landscape .project-hero { aspect-ratio: .98; object-position: center; }
  .hero-photo-button.is-portrait { width: 100%; }
  .expand-label, .hero-photo-button.is-portrait .expand-label { right: 17px; bottom: 17px; }
  .project-intro { display: block; padding-block: 64px; }
  .project-intro h2 { margin-bottom: 31px; font-size: 45px; }
  .project-intro p { font-size: 16px; }
  .project-gallery { display: block; padding-bottom: 34px; }
  .gallery-button,
  .gallery-button.is-portrait,
  .gallery-button.offset,
  .gallery-button.is-portrait.offset { width: 100%; margin: 0 0 34px; }
  .project-story { display: block; padding-block: 48px 72px; }
  .project-story h2 { margin-bottom: 28px; font-size: 45px; }
  .project-story p { font-size: 16px; }
  .next-project { display: block; padding-block: 48px 58px; }
  .next-project h2 { font-size: 47px; }
  .next-project .next-picture { margin-top: 34px; aspect-ratio: 1.2; }
  .service-hero-image { aspect-ratio: 1.03; }
  .contexts { grid-template-columns: 1fr; gap: 38px; padding-block: 52px; }
  .context-item h2 { font-size: 34px; }
  .service-detail { grid-template-columns: 27px 1fr; gap: 18px; padding-block: 40px; }
  .service-detail h2 { font-size: 40px; }
  .service-detail .service-body { grid-column: 2; }
  .about-layout { display: block; }
  .about-copy { padding-top: 42px; }
  .about-copy h2 { font-size: 45px; }
  .about-copy p { font-size: 16px; }
  .approach { grid-template-columns: 1fr; gap: 38px; margin-top: 55px; }
  .contact-layout { display: flex; flex-direction: column; gap: 42px; padding-block: 64px 78px; }
  .contact-image { aspect-ratio: 1.06; }
  .contact-copy h2 { font-size: 43px; }
  .client-block { padding-top: 54px; padding-bottom: 78px; }
  .client-panel h2 { font-size: 41px; }
  .privacy-copy { padding-block: 54px 78px; }
  .contact-dialog { width: 100%; height: 96dvh; max-height: 96dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .dialog-inner { padding: 20px 23px max(31px, env(safe-area-inset-bottom)); }
  .dialog-top { margin-bottom: 22px; }
  .dialog-inner h2 { font-size: 40px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .type-choices { gap: 6px; }
  .type-choice span { min-height: 59px; padding-inline: 4px; font-size: 12px; }
  .lightbox-toolbar { height: 76px; padding: 12px 18px; font-size: 12px; }
  .lightbox-stage { height: calc(100dvh - 172px); padding-inline: 10px; }
  .lb-nav { top: auto; bottom: -47px; z-index: 5; width: 41px; height: 41px; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lightbox-caption { padding: 53px 64px 12px; font-size: 12px; }
  .zoom-hint { display: none; }
}

@media (max-width: 365px) {
  .hero h1 { font-size: 46px; }
  .statement h2, .portfolio-intro h2, .services-intro h2 { font-size: 45px; }
  .page-head h1 { font-size: 48px; }
  .project-title h1 { font-size: 51px; }
  .brand img, .site-header.is-scrolled .brand img { width: auto; height: 42px; }
  .type-choice span { padding-inline: 2px; font-size: 11px; }
  .dialog-inner { padding-inline: 19px; }
  .layout-option-title h1, .comparison-head h1 { font-size: 51px; }
  .index-project-row { grid-template-columns: 82px 24px minmax(0, 1fr) 16px; gap: 9px; }
  .index-project-thumb { width: 82px; height: 88px; }
  .index-project-identity strong { font-size: 25px; }
  .immersive-title strong { font-size: 49px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .hero { height: 100svh; min-height: 430px; }
  .hero-content { bottom: 24px; }
  .hero h1 { font-size: clamp(44px, 8vh, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .hero-media,
  .project-card:is(:hover, :focus-visible) .project-photo img,
  .uniform-project-card:is(:hover, :focus-visible) figure img,
  .narrative-project:is(:hover, :focus-visible) > figure img,
  .immersive-project:is(:hover, :focus-visible) > img,
  .project-card:is(:hover, :focus-visible) .arrow,
  .service-line:is(:hover, :focus-visible) .arrow,
  .service-line:is(:hover, :focus-visible) h3 { transform: none !important; }
  .hero-motion { display: none !important; }
  .living-index-image, .index-project-row, .index-project-row::before { transition: none !important; }
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (hover: none) {
  .project-card:hover .project-photo img,
  .project-card:hover .arrow,
  .service-line:hover .arrow,
  .service-line:hover h3 { transform: none; }
}



.baco-editorial-view{background:var(--paper)}
.baco-editorial-head{padding-top:70px;padding-bottom:58px}
.baco-editorial-head .back-link{display:inline-flex;margin-bottom:48px}
.baco-title-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:8vw;align-items:end}
.baco-title-grid h1{margin:16px 0 0;font:400 clamp(74px,10vw,148px)/.82 var(--serif);letter-spacing:-.055em}
.baco-project-facts{padding-bottom:8px;text-align:right}
.baco-project-facts span{display:inline-block;margin-bottom:18px;padding:6px 9px;border:1px solid var(--line);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.baco-project-facts p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.baco-editorial-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;padding-bottom:90px}
.baco-photo{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;background:#d9d8d2;cursor:zoom-in}
.baco-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .35s}
.baco-photo:hover img{transform:scale(1.012);filter:brightness(1.025)}
.baco-zoom{position:absolute;right:12px;bottom:12px;display:grid;width:36px;height:36px;place-items:center;background:rgba(12,15,12,.78);color:#fff;font-size:16px;opacity:0;transition:opacity .25s}
.baco-photo:hover .baco-zoom,.baco-photo:focus-visible .baco-zoom{opacity:1}
.baco-hero{grid-column:1/9;aspect-ratio:1.44}.baco-portrait{grid-column:9/13;aspect-ratio:.73}
.baco-text{grid-column:1/7;padding:60px 7vw 60px 0}.baco-text h2{max-width:680px;margin:20px 0 27px;font:400 clamp(46px,5.4vw,78px)/.92 var(--serif);letter-spacing:-.045em}.baco-text p:last-child{max-width:590px;color:var(--muted)}
.baco-wide{grid-column:7/13;align-self:end;aspect-ratio:1.48}.baco-wide-2{grid-column:1/8;aspect-ratio:1.35}.baco-tall{grid-column:8/11;aspect-ratio:.72}
.baco-note{grid-column:11/13;align-self:end;padding:0 0 14px}.baco-note span{display:block;padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.baco-note p{padding-top:14px;color:var(--muted);font-size:13px;line-height:1.55}
.baco-end{grid-column:4/11;margin-top:50px;aspect-ratio:1.48}.baco-editorial-story{margin-top:0}
@media(max-width:760px){
 .baco-editorial-head{padding-top:42px;padding-bottom:32px}.baco-editorial-head .back-link{margin-bottom:27px}
 .baco-title-grid{display:block}.baco-title-grid h1{font-size:68px}.baco-project-facts{margin-top:25px;text-align:left}
 .baco-editorial-collage{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-bottom:55px}
 .baco-hero{grid-column:1/7;aspect-ratio:1}.baco-portrait{grid-column:1/3;aspect-ratio:.71}.baco-wide{grid-column:3/7;aspect-ratio:1.08}
 .baco-text{grid-column:1/7;padding:50px 0 42px}.baco-text h2{font-size:44px}
 .baco-wide-2{grid-column:1/7;aspect-ratio:1.08}.baco-tall{grid-column:1/4;aspect-ratio:.72}
 .baco-note{grid-column:4/7;padding:18px 9px}.baco-note p{font-size:12px}
 .baco-end{grid-column:1/7;margin-top:16px;aspect-ratio:1.05}.baco-zoom{opacity:1;width:32px;height:32px}
}



.project-editorial-view{background:var(--paper)}
.editorial-head{padding-top:70px;padding-bottom:58px}.editorial-head .back-link{display:inline-flex;margin-bottom:48px}
.editorial-title-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:8vw;align-items:end}
.editorial-title-grid h1{max-width:980px;margin:16px 0 0;font:400 clamp(68px,9.2vw,138px)/.86 var(--serif);letter-spacing:-.055em}
.editorial-project-facts{padding-bottom:8px;text-align:right}.editorial-project-facts span{display:inline-block;margin-bottom:18px;padding:6px 9px;border:1px solid var(--line);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.editorial-project-facts p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.editorial-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;padding-bottom:90px}
.editorial-photo{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;background:#d9d8d2;cursor:zoom-in}.editorial-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .35s}.editorial-photo:hover img{transform:scale(1.012);filter:brightness(1.025)}
.editorial-zoom{position:absolute;right:12px;bottom:12px;display:grid;width:36px;height:36px;place-items:center;background:rgba(12,15,12,.78);color:#fff;font-size:16px;opacity:0;transition:opacity .25s}.editorial-photo:hover .editorial-zoom,.editorial-photo:focus-visible .editorial-zoom{opacity:1}
.editorial-hero{grid-column:1/9;aspect-ratio:1.44}.editorial-side{grid-column:9/13;aspect-ratio:.73}.editorial-text{grid-column:1/7;padding:60px 7vw 60px 0}.editorial-text h2{max-width:680px;margin:20px 0 27px;font:400 clamp(46px,5.4vw,78px)/.92 var(--serif);letter-spacing:-.045em}.editorial-text>p:not(.eyebrow){max-width:590px;color:var(--muted)}.editorial-area{margin-top:18px;font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.editorial-wide{grid-column:7/13;align-self:end;aspect-ratio:1.48}.editorial-wide-2{grid-column:1/8;aspect-ratio:1.35}.editorial-tall{grid-column:8/11;aspect-ratio:.72}.editorial-note{grid-column:11/13;align-self:end;padding:0 0 14px}.editorial-note span{display:block;padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.editorial-note p{padding-top:14px;color:var(--muted);font-size:13px;line-height:1.55}.editorial-end{grid-column:4/11;margin-top:50px;aspect-ratio:1.48}
.editorial-extra-left{grid-column:1/7;aspect-ratio:1.35;margin-top:36px}.editorial-extra-right{grid-column:7/13;aspect-ratio:1.35;margin-top:36px}.editorial-extra-large{grid-column:2/12;aspect-ratio:1.75;margin-top:36px}.editorial-story{margin-top:0}
@media(max-width:760px){.editorial-head{padding-top:42px;padding-bottom:32px}.editorial-head .back-link{margin-bottom:27px}.editorial-title-grid{display:block}.editorial-title-grid h1{font-size:62px}.editorial-project-facts{margin-top:25px;text-align:left}.editorial-collage{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-bottom:55px}.editorial-hero{grid-column:1/7;aspect-ratio:1}.editorial-side{grid-column:1/3;aspect-ratio:.71}.editorial-wide{grid-column:3/7;aspect-ratio:1.08}.editorial-text{grid-column:1/7;padding:50px 0 42px}.editorial-text h2{font-size:44px}.editorial-wide-2{grid-column:1/7;aspect-ratio:1.08}.editorial-tall{grid-column:1/4;aspect-ratio:.72}.editorial-note{grid-column:4/7;padding:18px 9px}.editorial-note p{font-size:12px}.editorial-end{grid-column:1/7;margin-top:16px;aspect-ratio:1.05}.editorial-extra-left,.editorial-extra-right,.editorial-extra-large{grid-column:1/7;margin-top:8px;aspect-ratio:1.1}.editorial-zoom{opacity:1;width:32px;height:32px}}



/* R7 — grade editorial disciplinado.
   Mantém a narrativa aprovada das listagens e reorganiza apenas os cases internos. */
.editorial-collage,
.baco-editorial-collage{
  --r7-row:clamp(58px,4.7vw,76px);
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:var(--r7-row);
  gap:18px;
  align-items:stretch;
  padding-bottom:clamp(86px,9vw,132px);
}
.editorial-collage>*,
.baco-editorial-collage>*{
  min-width:0;
  min-height:0;
  margin-top:0!important;
}
.editorial-photo,
.baco-photo{
  align-self:stretch!important;
  aspect-ratio:auto!important;
  min-height:0;
}
.editorial-photo img,
.baco-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.editorial-photo:hover img,
.baco-photo:hover img{
  transform:scale(1.008);
  filter:none;
}

/* Faixa 01 — abertura: uma imagem dominante + contraponto vertical. */
.editorial-hero{grid-column:1/span 8!important;grid-row:1/span 7!important}
.editorial-side{grid-column:9/span 4!important;grid-row:1/span 7!important}

/* Faixa 02 — texto e imagem compartilham a mesma linha-base. */
.editorial-text{
  grid-column:1/span 5!important;
  grid-row:8/span 5!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,4vw,58px) clamp(22px,4vw,58px) clamp(32px,4vw,58px) 0!important;
}
.editorial-text h2{
  margin:18px 0 24px;
  font-size:clamp(44px,4.8vw,70px);
  line-height:.93;
}
.editorial-wide{
  grid-column:6/span 7!important;
  grid-row:8/span 5!important;
}

/* Faixa 03 — composição em três módulos com topo e base coincidentes. */
.editorial-wide-2{grid-column:1/span 7!important;grid-row:13/span 6!important}
.editorial-tall{grid-column:8/span 3!important;grid-row:13/span 6!important}
.editorial-note{
  grid-column:11/span 2!important;
  grid-row:13/span 6!important;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 0 12px!important;
}

/* Cases compactos: texto, terceira vista e nota ocupam uma única faixa. */
.editorial-collage:not(:has(.editorial-wide-2)) .editorial-wide{
  grid-column:6/span 5!important;
  grid-row:8/span 5!important;
}
.editorial-collage:not(:has(.editorial-wide-2)) .editorial-note{
  grid-column:11/span 2!important;
  grid-row:8/span 5!important;
}

/* Case de duas imagens: fecha a página com texto e nota perfeitamente alinhados. */
[data-view="horizonte-mineral"] .editorial-text{
  grid-column:1/span 8!important;
  grid-row:8/span 5!important;
}
[data-view="horizonte-mineral"] .editorial-note{
  grid-column:9/span 4!important;
  grid-row:8/span 5!important;
}

/* Fechamentos de cases ricos. */
.editorial-end{
  grid-column:1/span 12!important;
  grid-row:19/span 6!important;
  margin-top:0!important;
}

/* Casa Pequi: três pares finais, sem imagens soltas ou desalinhadas. */
[data-view="casa-pequi"] [data-photo="pequi-0306"]{grid-column:1/span 6!important;grid-row:19/span 6!important}
[data-view="casa-pequi"] [data-photo="pequi-0242"]{grid-column:7/span 6!important;grid-row:19/span 6!important}
[data-view="casa-pequi"] [data-photo="pequi-0324"]{grid-column:1/span 6!important;grid-row:25/span 6!important}
[data-view="casa-pequi"] [data-photo="pequi-0384"]{grid-column:7/span 6!important;grid-row:25/span 6!important}
[data-view="casa-pequi"] [data-photo="pequi-0309"]{grid-column:1/span 6!important;grid-row:31/span 6!important}
[data-view="casa-pequi"] [data-photo="pequi-0416"]{grid-column:7/span 6!important;grid-row:31/span 6!important}

/* Baco recebe o mesmo sistema modular da família editorial. */
.baco-hero{grid-column:1/span 8!important;grid-row:1/span 7!important;aspect-ratio:auto!important}
.baco-portrait{grid-column:9/span 4!important;grid-row:1/span 7!important;aspect-ratio:auto!important}
.baco-text{
  grid-column:1/span 5!important;
  grid-row:8/span 5!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,4vw,58px) clamp(22px,4vw,58px) clamp(32px,4vw,58px) 0!important;
}
.baco-text h2{
  margin:18px 0 24px;
  font-size:clamp(44px,4.8vw,70px);
  line-height:.93;
}
.baco-wide{grid-column:6/span 7!important;grid-row:8/span 5!important;aspect-ratio:auto!important}
.baco-wide-2{grid-column:1/span 7!important;grid-row:13/span 6!important;aspect-ratio:auto!important}
.baco-tall{grid-column:8/span 3!important;grid-row:13/span 6!important;aspect-ratio:auto!important}
.baco-note{
  grid-column:11/span 2!important;
  grid-row:13/span 6!important;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 0 12px!important;
}
.baco-end{
  grid-column:1/span 12!important;
  grid-row:19/span 6!important;
  margin-top:0!important;
  aspect-ratio:auto!important;
}

/* Pequeno refinamento da fotografia já tratada: hover não volta a estourar as altas luzes. */
[data-asset^="pequi-"],
[data-asset^="711-"],
[data-asset^="1613-"],
[data-asset^="baco-"]{
  image-rendering:auto;
}

/* Tablet: mantém o grid, reduzindo a escala tipográfica antes de empilhar. */
@media (min-width:761px) and (max-width:1100px){
  .editorial-collage,.baco-editorial-collage{--r7-row:60px;gap:14px}
  .editorial-text h2,.baco-text h2{font-size:clamp(42px,5vw,54px)}
  .editorial-text,.baco-text{padding:28px 24px 28px 0!important}
  .editorial-note p,.baco-note p{font-size:12px}
}

/* Mobile: uma coluna editorial limpa, sem o falso mosaico que quebrava alinhamentos. */
@media (max-width:760px){
  .editorial-collage,
  .baco-editorial-collage{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:12px;
    padding-bottom:58px;
  }
  .editorial-collage>*,
  .baco-editorial-collage>*{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    margin:0!important;
    aspect-ratio:auto!important;
  }
  .editorial-photo img,
  .baco-photo img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .editorial-text,
  .baco-text{
    padding:46px 0 38px!important;
  }
  .editorial-text h2,
  .baco-text h2{
    font-size:44px;
  }
  .editorial-note,
  .baco-note{
    display:block;
    padding:26px 0 34px!important;
    border-top:1px solid var(--line);
  }
  .editorial-end,
  .baco-end{
    margin-top:0!important;
  }
}