/* Page-only styles for environmental-studies.html — loaded after styles.css, only on this page. */

/* overview: 848-wide intro, 1360x600 image, four icon points 60 below */
@media (min-width: 768px) { .env-overview .section-head { max-width: min(58.89vw, 848px); } }
.env-about-img { aspect-ratio: 1360 / 600; margin-bottom: min(4.17vw, 60px); }
.value-row.env-points li { padding-top: 0; }
.value-row.env-points .icon { display: block; }
.value-row.env-points .icon svg { width: min(2.78vw, 40px); height: min(2.78vw, 40px); stroke-width: 1.3; }
.value-row.env-points h3 { margin-top: min(2.22vw, 32px); line-height: 1.1; }
.value-row.env-points p { margin-top: min(1.11vw, 16px); line-height: 1.3; max-width: 260px; }
@media (min-width: 768px) {
  .value-row.env-points { column-gap: min(5.83vw, 84px); }
  .value-row.env-points li { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .value-row.env-points .icon svg { width: 32px; height: 32px; }
  .value-row.env-points h3 { margin-top: 16px; }
  .value-row.env-points li { padding-bottom: 20px; }
}

/* approach: description box 596 wide */
@media (min-width: 768px) { .env-approach .section-head .body { max-width: min(41.39vw, 596px); } }

/* risk & impact: image 730x627 | 90 gap | copy 490 (list 433) */
.env-risk { padding-top: min(11.25vw, 162px); padding-bottom: var(--section); }
.env-risk .risk { grid-template-columns: 730fr 90fr 490fr 50fr; gap: 0; align-items: start; }
.env-risk .risk-img { grid-column: 1; aspect-ratio: 730 / 627; }
.env-risk .risk-copy { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; }
.env-risk .risk-copy .h2 { margin-top: min(1.11vw, 16px); line-height: 1.1; text-wrap: initial; }
.env-risk .risk-copy .body { margin-top: min(1.11vw, 16px); }
.env-risk .risk-link { margin-top: min(1.67vw, 24px); font-size: var(--fs-small); color: var(--ink); line-height: 18px; gap: 4px; }
.env-risk .risk-link svg { width: 20px; height: 20px; }
.env-risk .risk-tabs { margin-top: min(3.33vw, 48px); width: min(30.07vw, 433px); max-width: 100%; }
.env-risk .risk-tabs button { padding: min(1.46vw, 21px) 0 min(1.39vw, 20px); gap: min(.83vw, 12px); }
.env-risk .risk-tabs .t { line-height: 22px; gap: 8px; }
.env-risk .risk-tabs .d { line-height: 18px; max-width: 409px; }
/* shape markers (like conceptzilla.com): their own 24px column, so the title and text line up after them;
   they spin in when the block appears and turn a quarter on the active / hovered item */
.env-risk .risk-tabs button { grid-template-columns: 24px 1fr; column-gap: 0; }
.env-risk .risk-tabs .t, .env-risk .risk-tabs .d { grid-column: 2; }
.env-risk .risk-tabs .t::before { display: none; }
.env-risk .risk-tabs button::before {
  content: ""; grid-column: 1; grid-row: 1; align-self: center; width: 10px; height: 10px; background: var(--muted);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: transform .7s var(--ease-out), background-color .3s;
}
.env-risk .risk-tabs button[data-shape="0"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.env-risk .risk-tabs button[data-shape="2"]::before { clip-path: circle(50% at 50% 50%); }
.env-risk .risk-tabs button[data-shape="3"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.env-risk .risk-tabs button:is(:hover, [aria-selected="true"])::before { background: var(--ink); transform: rotate(90deg); }
.env-risk .risk-tabs button:hover .t { color: var(--ink); }
.js .env-risk .risk-copy.reveal:not(.in) .risk-tabs button::before { opacity: 0; }
.env-risk .risk-copy.in .risk-tabs button::before { animation: shapeIn .9s var(--ease-out) calc(.4s + var(--k, 0) * 90ms) backwards; }
@keyframes shapeIn { from { opacity: 0; transform: rotate(-180deg) scale(0); } }
@media (max-width: 767px) {
  .env-risk { padding-top: var(--section); }
  .env-risk .risk { grid-template-columns: 1fr; gap: 32px; }
  .env-risk .risk-img, .env-risk .risk-copy { grid-column: auto; }
  .env-risk .risk-copy .h2, .env-risk .risk-copy .body { margin-top: 12px; }
  .env-risk .risk-tabs { width: 100%; margin-top: 32px; }
  .env-risk .risk-tabs button { padding: 18px 0; }
}

/* closing statement: button 48 below the lead */
.env-statement .statement-block > .btn { margin-top: min(1.39vw, 20px); }

/* capability topics: chips/image sit 44px under the description (design) */
@media (min-width: 768px) {
  .cap-row { margin-top: min(3.06vw, 44px); }
}

/* design's manual line breaks in capability descriptions (wide screens only) */
.br-cap { display: none; }
@media (min-width: 1200px) { .br-cap { display: inline; } }
/* capability list ends 162px above the dark approach block */
#services { padding-bottom: min(11.25vw, 162px); }
@media (max-width: 767px) { #services { padding-bottom: var(--section); } }
@media (min-width: 768px) {
  /* topics start 51px right of the hairline; the last topic has no bottom padding */
  .cap-item { padding-left: min(3.54vw, 51px); }
  .cap-item:last-child { padding-bottom: 0; }
}

/* hero: tagline 18/23, subheading box 799 wide (design) */
@media (min-width: 768px) {
  .hero .eyebrow { font-size: min(1.25vw, 18px); }
  .hero .intro { max-width: min(55.49vw, 799px); }
}

/* overview arch: the design's #fafafa ellipse is 1780 wide with a shallow curve
   (64px rise at the frame edges); the label sits ~284px under the apex */
.env-overview.arch-top::before { left: -11.8%; right: -11.8%; border-radius: 50% 50% 0 0 / min(11.1vw, 160px) min(11.1vw, 160px) 0 0; }
@media (min-width: 768px) { .env-overview { padding-top: calc(var(--section) + min(3.68vw, 53px)); } }

/* approach: the step row runs past the right edge, so it gets prev/next arrows,
   mouse drag and keyboard focus (assets/js/pages/environmental-studies.js) */
.ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ap-head .section-head { flex: 1 1 auto; min-width: 0; }
.ap-ctrl { flex: none; margin: 0 0 min(4.444vw, 64px); }
.ap-ctrl.is-idle { visibility: hidden; }
.ap-ctrl button { transition: background .2s, color .2s, opacity .2s; }
.ap-ctrl button:disabled { opacity: .3; cursor: default; }
.ap-ctrl button:disabled:hover { background: none; color: var(--white); }
.ap-ctrl button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
#env-steps[tabindex] { cursor: grab; }
#env-steps:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; border-radius: var(--radius); }
#env-steps.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 767px) {
  .ap-head { display: block; }
  .ap-ctrl { display: none; }
}

/* approach cards: number at +32 (18/23), title 16 below (24/26), text 18/23 #ddd bottom-inset 32 */
@media (min-width: 768px) {
  .env-approach .steps.tall .step { padding: min(2.22vw, 32px) min(1.67vw, 24px); gap: 0; }
  .env-approach .steps.tall .step .n { line-height: min(1.6vw, 23px); }
  .env-approach .steps.tall .step h3 { margin-top: min(1.11vw, 16px); line-height: min(1.81vw, 26px); }
  .env-approach .steps.tall .step p { line-height: min(1.6vw, 23px); color: #ddd; }
}

/* closing statement: 1060-wide text box */
@media (min-width: 768px) { .env-statement .lead { max-width: min(73.61vw, 1060px); } }
@media (max-width: 767px) {
  .env-approach .step h3 { margin-top: 4px; }
  .env-approach .step p { margin-top: 6px; color: #ddd; }
}

/* closing statement: the 44/48 text sits 32 below the 20px label (grid gap is 28) */
@media (min-width: 768px) { .env-statement .lead { margin-top: min(.28vw, 4px); } }
/* phones: the proportional 16px/24px gaps collapse to ~4-6px; keep them readable */
@media (max-width: 767px) {
  .value-row.env-points p { margin-top: 8px; }
  .env-risk .risk-link { margin-top: 16px; }
}