/* ==========================================================================
   SUSTAINABILITY page — scoped with .sx
   ========================================================================== */

/* ---------- Hero ---------- */
.sx-hero__title { max-width: 18ch; }
:lang(tr) .sx-hero__title { font-size: clamp(40px, 5.8vw, 108px); }
.sx-hero__fig { max-width: 1400px; margin-inline: auto; }
/* aerial-solar-roof-top is 1600w: frame capped at 1400px, so it is never upscaled */
.sx-hero__media img { height: 112%; margin-top: -6%; object-position: 50% 50%; }
.sx-hero__cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); }

/* ---------- Stats ---------- */
.sx-stats { padding-block: clamp(80px, 10vw, 160px) clamp(72px, 9vw, 140px); }
.sx-stats__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); margin-bottom: 18px; }
.sx-stats .sus__stat-v small { font-size: .42em; letter-spacing: 0; margin-left: .06em; }

/* ---------- The site: two green factories ---------- */
.sx-site__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.sx-site__main { grid-column: 1 / span 7; margin: 0; }
.sx-site__main .media { aspect-ratio: 4 / 3; max-width: 1600px; }
.sx-site__main figcaption, .sx-site__inset figcaption { margin-top: 14px; }
.sx-site__body { grid-column: 9 / span 4; }
.sx-site__body .h2 { margin: 22px 0 26px; }
.sx-site__inset { margin: clamp(36px, 4vw, 64px) 0 0; max-width: 320px; }
.sx-site__inset .media { aspect-ratio: 3 / 4; }

/* ---------- Practices: editorial index ---------- */
.sx-prac-list { border-top: 1px solid var(--rule-strong); }
.sx-prac {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; padding: clamp(24px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--rule);
}
.sx-prac__k { grid-column: 1 / span 2; align-self: start; padding-top: .9em; color: var(--muted); }
.sx-prac__body { grid-column: 3 / span 5; }
.sx-prac__t { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 56px); line-height: 1.02; letter-spacing: -.015em; transition: transform .7s var(--ease), color .4s; }
.sx-prac__d { margin-top: 16px; color: var(--muted); max-width: 44ch; font-size: 16px; line-height: 1.55; }
.sx-prac__f { margin-top: 20px; }
/* uniform 7:4 frame, capped at the small images' native 448px width */
.sx-prac__media { grid-column: 9 / span 4; justify-self: end; width: 100%; max-width: 448px; aspect-ratio: 7 / 4; }
/* practices without a real photo: typographic panel in the same frame */
.sx-prac__type {
  grid-column: 9 / span 4; justify-self: end; width: 100%; max-width: 448px; aspect-ratio: 7 / 4;
  display: flex; align-items: flex-end; padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--rule-strong); background: var(--linen, transparent);
}
.sx-prac__word { font-family: var(--f-display); font-style: italic; font-size: clamp(34px, 3.4vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--madder); }
@media (hover: hover) and (min-width: 1025px) {
  .sx-prac:hover .sx-prac__t { transform: translateX(1vw); font-style: italic; color: var(--madder); }
}

/* ---------- Certificates ---------- */
.sx-certs__badges { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(48px, 6vw, 88px); }
.sx-std { border-top: 1px solid var(--rule-strong); }
.sx-std__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: baseline; padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--rule);
}
.sx-std__n { grid-column: 1 / span 3; font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
.sx-std__full { grid-column: 4 / span 3; color: var(--muted); }
.sx-std__d { grid-column: 7 / span 4; font-size: 16px; line-height: 1.5; }
.sx-std__s { grid-column: 11 / span 2; text-align: right; color: var(--madder); }

.sx-docs-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(96px, 12vw, 180px); align-items: start; }
.sx-docs__intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); }
.sx-docs__intro .h3 { margin: 18px 0 20px; }
.sx-docs__intro p.muted { max-width: 36ch; }
.sx-docs { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); position: relative; }
.sx-doc { position: relative; will-change: transform; }
.sx-doc:nth-child(1) { z-index: 2; }
.sx-doc .media { aspect-ratio: 811 / 1269; }
.sx-doc__cap { display: flex; flex-direction: column; gap: 6px; }
.sx-doc__t { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; color: var(--fg); }
.sx-doc__cap .label { color: var(--muted); }

/* ---------- Materials ---------- */
.sx-mat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.sx-mat__i { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 36px) 0 clamp(36px, 4vw, 60px); border-top: 1px solid var(--rule-strong); }
.sx-mat__n { font-family: var(--f-display); font-size: clamp(32px, 3.4vw, 60px); line-height: 1; letter-spacing: -.02em; }
.sx-mat__d { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 32ch; }

/* ---------- Eco process ---------- */
.sx-eco__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.sx-eco__fig { grid-column: 1 / span 5; border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.sx-eco__v { font-family: var(--f-display); font-size: clamp(110px, 13vw, 240px); line-height: .84; letter-spacing: -.04em; margin-top: clamp(20px, 2.4vw, 36px); font-variant-numeric: lining-nums; }
.sx-eco__v small { font-size: .36em; letter-spacing: 0; margin: 0 .04em; }
.sx-eco__fn { margin-top: 20px; max-width: 34ch; color: var(--muted); }
.sx-press { margin-top: clamp(48px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--rule); }
.sx-press__t { font-family: var(--f-display); font-style: italic; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.1; margin: 14px 0 12px; }
.sx-press__d { font-size: 15.5px; line-height: 1.55; max-width: 46ch; }
.sx-eco__body { grid-column: 8 / span 5; }
.sx-eco__t { margin: 22px 0 28px; }
.sx-eco__list { margin-top: 36px; border-top: 1px solid var(--rule); }
.sx-eco__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-display); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; }
.sx-eco__list .label { color: var(--muted); text-align: right; }

/* ---------- Closing ---------- */
.sx-closing .closing__title { max-width: none; font-size: clamp(46px, 7vw, 132px); }
:lang(tr) .sx-closing .closing__title { font-size: clamp(40px, 6vw, 112px); }
.sx-closing .closing__bg img { object-position: 50% 55%; }
.sx-closing__p { max-width: 46ch; margin-top: 32px; color: rgba(246, 244, 239, .84); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sx-prac__k { grid-column: 1 / -1; padding-top: 0; margin-bottom: 14px; }
  .sx-prac__body { grid-column: 1 / span 7; }
  .sx-prac__media, .sx-prac__type { grid-column: 8 / span 5; }
  .sx-site__main, .sx-site__body { grid-column: 1 / -1; }
  .sx-site__body { margin-top: 40px; }
  .sx-std__n { grid-column: 1 / span 4; }
  .sx-std__full { grid-column: 5 / span 8; }
  .sx-std__d { grid-column: 5 / span 6; margin-top: 8px; }
  .sx-std__s { grid-column: 11 / span 2; }
  .sx-docs__intro { grid-column: 1 / -1; position: static; }
  .sx-docs { grid-column: 1 / -1; margin-top: 48px; }
  .sx-mat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-eco__fig { grid-column: 1 / -1; order: 2; margin-top: 56px; }
  .sx-eco__body { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .sx-hero__title { max-width: none; }
  .sx-prac__body, .sx-prac__media, .sx-prac__type { grid-column: 1 / -1; }
  .sx-prac__media, .sx-prac__type { justify-self: start; margin-top: 22px; }
  .sx-prac__type { aspect-ratio: auto; min-height: 120px; }
  .sx-std__n, .sx-std__full, .sx-std__d, .sx-std__s { grid-column: 1 / -1; text-align: left; }
  .sx-std__full, .sx-std__s { margin-top: 6px; }
  .sx-std__d { margin-top: 10px; }
  .sx-docs { gap: 10px; }
  .sx-doc__t { font-size: 15px; }
  .sx-doc__cap .label { font-size: 9.5px; letter-spacing: .1em; }
  .sx-mat { grid-template-columns: 1fr; }
  .sx-eco__list li { flex-direction: column; gap: 4px; }
  .sx-eco__list .label { text-align: left; }
}

/* Closing on image: light outline button, lighter accents, and a calmer left side for the type */
.sx-closing .btn:not(.btn--solid) { --fg: var(--paper); --bg: var(--ink); }
.sx-closing .label--thread { color: #A8D5D6; }
.sx-closing .closing__contact .label { color: rgba(246, 244, 239, .7); }
.sx-closing .closing__bg::after {
  background:
    linear-gradient(90deg, rgba(20,24,38,.62) 0%, rgba(20,24,38,.2) 62%, rgba(20,24,38,0) 100%),
    linear-gradient(180deg, rgba(20,24,38,.5) 0%, rgba(20,24,38,.2) 38%, rgba(20,24,38,.86) 100%);
}

/* Balanced headline lines (no orphaned words) */
.sx-hero__title .mask > span, .sx-closing .closing__title .mask > span, .sx-prac__t, .sx-mat__n { text-wrap: balance; }

/* Phone: the documents stay side by side, so keep their captions to the title only */
@media (max-width: 720px) {
  .sx-doc__cap .label { display: none; }
  .sx-doc__t { font-size: 13.5px; line-height: 1.25; }
}