/* Revision 36: photography establishes the light-to-dark rhythm without edge fades. */
.product-hero { padding-bottom:20px; }
.power-transition {
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#fff;
  color:#242925;
}
.power-copy {
  order:-1;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  column-gap:12%;
  width:min(var(--max),calc(100% - var(--gutter)*2));
  max-width:none;
  margin:0 auto;
  padding:34px 0 42px;
  border-top:1px solid #e5e7e1;
  align-items:end;
}
.power-copy>.eyebrow {
  grid-column:1 / -1;
  margin:0 0 20px;
  color:#6c756b;
}
.power-copy h2 {
  margin:0;
  color:#222a24;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.45;
  letter-spacing:-.035em;
}
.power-copy>p.field-capabilities {
  margin:0 0 3px;
  color:#606a60;
  font-size:14px;
  line-height:1.9;
}
.field-capabilities span { display:block; }
.field-capabilities span+span { margin-top:7px; }
.power-photo {
  position:relative;
  inset:auto;
  width:100%;
  height:clamp(330px,calc(100svh - 325px),620px);
  aspect-ratio:auto;
  background:#171918;
}
.power-photo svg {
  display:block;
  width:100%;
  height:100%;
  filter:grayscale(1) brightness(.94);
}
.power-photo::before,.power-photo::after { content:none; }
.passage-intro,.passage-art { background:#171918; }
.passage-intro { padding-top:0; }
#passage-image { mask-image:none; -webkit-mask-image:none; }
.passage-title .eyebrow { color:#c3cbc1; }

/* The material photograph regains its photographed outline and spans the composition. */
.material-story { background:#f5f5f3; }
.material-story .material-layout {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:42px;
  padding:82px 0 0;
  border-top:1px solid #d7dcd4;
}
.material-heading {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  column-gap:11%;
  max-width:none;
}
.material-heading>.eyebrow { grid-column:1 / -1; margin:0 0 26px; }
.material-heading h2 {
  grid-column:1;
  grid-row:2 / 4;
  margin:0;
  font-size:clamp(33px,3.4vw,49px);
  line-height:1.5;
}
.material-heading>p:not(.eyebrow) {
  grid-column:2;
  margin:0;
  font-size:14px;
  line-height:1.95;
  color:#657060;
}
.material-heading>p:last-child { margin-top:17px; }
.material-story .texture-figure {
  width:min(1100px,100%);
  max-width:none;
  margin:0 auto;
  line-height:0;
}
.material-story .texture-figure button {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4107 / 2690;
  background:transparent;
  border:0;
  padding:0;
  overflow:visible;
  filter:none;
}
.material-story .texture-figure .product-cutout { width:100%; height:100%; }
.material-story+.hardware-band .hardware { border-top:1px solid #d7dcd4; }

@media(max-width:980px) {
  .power-copy { column-gap:7%; }
  .power-copy h2 { font-size:32px; }
  .power-copy>p.field-capabilities { font-size:12px; }
  .material-heading { column-gap:7%; }
  .material-heading h2 { font-size:32px; }
  .material-heading>p:not(.eyebrow) { font-size:13px; }
}
@media(max-width:760px) {
  .product-hero { padding-bottom:25px; }
  .power-copy {
    display:block;
    width:calc(100% - var(--gutter)*2);
    padding:37px 0 32px;
  }
  .power-copy>.eyebrow { margin-bottom:20px; }
  .power-copy h2 { font-size:32px; line-height:1.5; }
  .power-copy>p.field-capabilities { margin:23px 0 0; font-size:12px; line-height:1.9; }
  .field-capabilities span+span { margin-top:5px; }
  .power-photo { height:auto; aspect-ratio:1.35; }
  .passage-intro { padding-top:0; }
  .passage-title { background:#171918; padding-top:42px; padding-bottom:27px; }
  .material-story .material-layout { padding-top:50px; gap:30px; }
  .material-heading { display:contents; }
  .material-heading>.eyebrow { margin:0; }
  .material-heading h2 { margin:-10px 0 0; font-size:31px; }
  .material-story .texture-figure { order:1; width:calc(100% + 24px); margin:0 -12px; }
  .material-heading>p:not(.eyebrow) { order:2; font-size:13px; line-height:1.95; }
  .material-heading>p:last-child { margin:-12px 0 38px; }
}