/* Service spreads: each is one viewport; native and reading layouts are untouched. */
@media screen {
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) {
    --scene-width:100vw;
    width:100vw;
    flex-basis:100vw;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .scene-scroll {
    --service-gap:clamp(22px,4vw,64px);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:20px;
    width:100%;
    height:100%;
    min-height:0;
    padding:28px 4vw 28px;
    overflow:clip;
    box-sizing:border-box;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .scene-kicker {
    grid-column:1;
    grid-row:1;
    align-self:start;
    position:relative;
    z-index:4;
    margin:0!important;
    font-size:10px;
    line-height:1.4;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-columns {
    position:relative;
    display:grid!important;
    width:100%;
    max-width:none!important;
    min-width:0;
    min-height:0;
    padding:0;
    margin:0!important;
    gap:18px var(--service-gap)!important;
    box-sizing:border-box;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) :is(.service-index,.service-title,.service-body) {
    min-width:0;
    max-width:none;
    margin:0!important;
    padding:0;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-number {
    position:static;
    margin:0;
    color:inherit;
    font:400 42px/.9 Georgia,'Times New Roman',serif;
    letter-spacing:-.065em;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-title h3 {
    margin:0 0 12px;
    font-size:clamp(26px,2.6vw,40px);
    font-weight:400;
    line-height:1.4;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-title .eyebrow {
    margin:0;
    font:10px/1.45 Arial,sans-serif;
    letter-spacing:.06em;
    opacity:1;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body h4 {
    max-width:none;
    margin:0 0 16px;
    font-size:clamp(18px,1.65vw,24px);
    font-weight:400;
    line-height:1.65;
    letter-spacing:0;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body p {
    max-width:36em;
    margin:0;
    font-size:15px;
    line-height:1.9;
    letter-spacing:0;
    overflow-wrap:anywhere;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body details {
    min-width:0;
    max-width:36em;
    padding:0;
    margin:20px 0 0;
    border:0;
    border-top:1px solid var(--m-line);
    font-size:14px;
    line-height:1.75;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body summary {
    gap:16px;
    min-height:40px;
    padding:8px 0;
    box-sizing:border-box;
    font-size:14px;
    line-height:1.6;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body details>p {
    margin:6px 0 0;
    font-size:14px;
    line-height:1.85;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-ghost {
    position:relative;
    inset:auto;
    display:block;
    width:auto;
    max-width:100%;
    margin:0;
    padding:0;
    color:inherit;
    opacity:1;
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    line-height:.8;
    letter-spacing:-.065em;
    white-space:nowrap;
    transform:none;
    pointer-events:none;
  }

  /* Production: the name forms the foot of the spread; the copy stays above it. */
  .panorama-desktop .scene-oem .service-columns {
    grid-column:1;
    grid-row:2;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows:auto auto;
    align-content:center;
    align-items:start;
    align-self:center;
  }
  .panorama-desktop .scene-oem .service-index {
    position:absolute;
    top:0;
    left:0;
    grid-column:1;
    grid-row:1;
  }
  .panorama-desktop .scene-oem .service-title {
    grid-column:1;
    grid-row:1;
    padding-top:58px;
    align-self:start;
  }
  .panorama-desktop .scene-oem .service-body { display:contents; }
  .panorama-desktop .scene-oem .service-body h4 {
    grid-column:2;
    grid-row:1;
    align-self:end;
    margin:0;
  }
  .panorama-desktop .scene-oem .service-body>p {
    grid-column:2;
    grid-row:2;
    align-self:start;
  }
  .panorama-desktop .scene-oem .service-body details {
    grid-column:1;
    grid-row:2;
    width:100%;
    margin:0;
  }
  .panorama-desktop .scene-oem .service-ghost {
    grid-column:1;
    grid-row:3;
    align-self:end;
    font-size:min(20.8vw,24vh);
    font-style:normal;
    letter-spacing:-.07em;
  }

  /* Pattern: an upper title, with the sequence number balancing the text below. */
  .panorama-desktop .scene-pattern .scene-scroll {
    grid-template-rows:auto auto minmax(0,1fr);
  }
  .panorama-desktop .scene-pattern .service-ghost {
    grid-column:1;
    grid-row:2;
    justify-self:end;
    font-size:min(25vw,25vh);
    font-style:italic;
    text-align:right;
  }
  .panorama-desktop .scene-pattern .service-columns {
    grid-column:1;
    grid-row:3;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-rows:auto minmax(0,1fr);
    align-content:center;
    align-items:start;
  }
  .panorama-desktop .scene-pattern .service-title {
    grid-column:1;
    grid-row:1;
    padding-top:8px;
  }
  .panorama-desktop .scene-pattern .service-index {
    grid-column:1;
    grid-row:2;
    align-self:end;
    text-align:left;
  }
  .panorama-desktop .scene-pattern .service-number {
    font-size:min(17vw,21vh);
    font-style:normal;
    line-height:.77;
    letter-spacing:-.07em;
  }
  .panorama-desktop .scene-pattern .service-body {
    grid-column:2;
    grid-row:1/3;
    align-self:center;
  }

  /* Sample: the image is a narrow plate; its type runs with the fabric grain. */
  .panorama-desktop .scene-sample .scene-scroll {
    grid-template-rows:auto minmax(0,1fr);
    padding-right:4vw;
  }
  .panorama-desktop .scene-sample .sample-photo {
    position:absolute;
    inset:0 0 0 auto;
    z-index:0;
    width:34%;
    height:100%;
    margin:0;
    overflow:clip;
  }
  .panorama-desktop .scene-sample .sample-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:58% 50%;
  }
  .panorama-desktop .scene-sample .sample-photo figcaption {
    inset:auto 14px 18px;
    margin:0;
    font-size:9px;
    line-height:1.5;
    color:#fff4e6;
  }
  .panorama-desktop .scene-sample .service-columns {
    grid-column:1;
    grid-row:2;
    width:61%;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:24px 18px!important;
    align-content:center;
    align-items:start;
    z-index:2;
  }
  /* Outrank the earlier sample-specific display:block!important declaration. */
  body.panorama-desktop .scene-sample .service-columns { display:grid!important; }
  .panorama-desktop .scene-sample .service-title {
    grid-column:1;
    grid-row:1;
  }
  .panorama-desktop .scene-sample .service-index {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    padding-top:4px;
  }
  .panorama-desktop .scene-sample .service-number {
    font-size:36px;
    font-style:italic;
  }
  .panorama-desktop .scene-sample .service-title h3 {
    font-size:clamp(24px,2.3vw,36px);
  }
  .panorama-desktop .scene-sample .service-body {
    grid-column:1/3;
    grid-row:2;
    display:block;
    max-width:36em;
  }
  .panorama-desktop .scene-sample .service-ghost {
    position:absolute;
    inset:36px 5vw auto auto;
    z-index:3;
    max-width:none;
    font-size:min(16vw,19vh);
    line-height:.82;
    font-style:italic;
    color:#fff4e6;
    writing-mode:vertical-rl;
    text-orientation:mixed;
  }
}

/* Narrow desktop windows retain a comfortable paragraph measure. */
@media screen and (max-width:1100px) {
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .scene-scroll { gap:18px; }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body p {
    font-size:14px;
    line-height:1.8;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body details>p { line-height:1.8; }
  .panorama-desktop .scene-sample .sample-photo { width:31%; }
  .panorama-desktop .scene-sample .service-columns { width:65%; }
  .panorama-desktop .scene-sample .service-title h3 { font-size:25px; }
}

/* Short viewports give the expanded copy space instead of reducing it below 14px. */
@media screen and (max-height:700px) {
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .scene-scroll {
    gap:14px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-columns { gap:12px var(--service-gap)!important; }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-number { font-size:34px; }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-title h3 {
    margin-bottom:7px;
    font-size:26px;
    line-height:1.35;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-title .eyebrow { font-size:9px; }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body h4 {
    margin-bottom:10px;
    font-size:18px;
    line-height:1.6;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body p {
    font-size:14px;
    line-height:1.65;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body details { margin-top:12px; }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body summary {
    min-height:36px;
    padding:6px 0;
  }
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .service-body details>p {
    margin-top:6px;
    line-height:1.65;
  }
  .panorama-desktop .scene-oem .service-title { padding-top:40px; }
  .panorama-desktop .scene-oem .service-body h4 { margin:0; }
  .panorama-desktop .scene-oem .service-body details { margin:0; }
  .panorama-desktop .scene-oem .service-ghost { font-size:min(19vw,15vh); }
  .panorama-desktop .scene-pattern .service-ghost { font-size:min(22vw,17vh); }
  .panorama-desktop .scene-pattern .service-number { font-size:min(15vw,17vh); }
  .panorama-desktop .scene-pattern .service-title { padding-top:0; }
  .panorama-desktop .scene-sample .service-columns { gap:16px 18px!important; }
  .panorama-desktop .scene-sample .service-title h3 { font-size:24px; }
  .panorama-desktop .scene-sample .service-number { font-size:30px; }
  .panorama-desktop .scene-sample .service-ghost { top:24px; font-size:min(15vw,18vh); }
}
@media screen and (max-height:600px) {
  .panorama-desktop :is(.scene-oem,.scene-pattern,.scene-sample) .scene-scroll {
    gap:10px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .panorama-desktop .scene-oem .service-title { padding-top:36px; }
}