/* Editorial manufacturing story, Figma 1270:255. */
.process-page { background: #fff; color: #111; font-family: Inter, Arial, sans-serif; }
.process-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.process-first-screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.process-first-screen > .site-navigation { flex-shrink: 0; }
.admin-bar .process-first-screen { min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); }
@media (max-width: 782px) {
  .admin-bar .process-first-screen { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); }
}
.process-intro { flex: 1; display: flex; align-items: flex-end; background: linear-gradient(180deg, #63704b, #8fa169); color: #fff; }
.process-intro__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; width: 81%; margin-inline: auto; padding-block: 32px clamp(32px, 8svh, 110px); }
.process-intro p { max-width: 766px; width: 52%; margin: 0; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.4; }
.process-typewriter { display: inline-grid; vertical-align: bottom; }
.process-typewriter__space, .process-typewriter__active { grid-area: 1 / 1; white-space: nowrap; }
.process-typewriter__space { visibility: hidden; padding-right: .18em; }
.process-typewriter__active { justify-self: start; }
.process-typewriter__active::after { content: ''; display: inline-block; height: 1em; width: 2px; margin-left: .12em; vertical-align: -.12em; background: currentColor; animation: process-caret 1s step-end infinite; }
@keyframes process-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .process-typewriter__active::after { animation: none; } }
.process-scroll { flex-shrink: 0; width: 71px; height: 71px; margin: 0 2.5% 34px 0; }
.process-scroll img { display: block; width: 100%; height: 100%; }
.process-scroll:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.process-story { padding-top: clamp(100px, 12vw, 230px); overflow: hidden; }
.process-story section { scroll-margin-top: 30px; }
.process-story img { display: block; object-fit: cover; }
.process-copy { max-width: 310px; margin: 0; font-size: 16px; line-height: 1.3; }
.process-specification { display: grid; grid-template-columns: 64.17% 1fr; align-items: center; gap: 8.18%; }
.process-specification > img { width: 100%; height: clamp(460px, 48.86vw, 938px); }
.process-specification h2 { max-width: 349px; padding-right: 24px; margin: 0; font: 400 clamp(28px, 2.05vw, 39.43px)/1.18 Lobster, cursive; }
.process-inset { width: 68.75%; margin-inline: auto; }
.process-frame { display: grid; grid-template-columns: 1fr 47.65%; gap: 6%; align-items: center; margin-top: clamp(40px, 3.96vw, 76px); }
.process-frame .process-copy { max-width: 240px; margin-left: 18%; }
.process-frame > img { width: 100%; height: clamp(440px, 44.01vw, 845px); }
.process-cutting { display: grid; grid-template-columns: 47.08% 32.76%; column-gap: 3.91%; margin-top: clamp(40px, 3.96vw, 76px); }
.process-cutting > img { width: 100%; height: clamp(300px, 27.76vw, 533px); }
.process-sewing { display: grid; grid-template-columns: 47.08% 1fr; column-gap: 3.91%; align-items: center; margin-top: clamp(40px, 4.69vw, 90px); }
.process-sewing .process-copy { max-width: 282px; margin-left: 45.6%; }
.process-sewing > img { width: 100%; height: clamp(300px, 27.76vw, 533px); }
.process-foam { margin-top: clamp(40px, 3.78vw, 73px); }
.process-foam > img { width: 76.25%; height: clamp(460px, 48.86vw, 938px); }
.process-upholstery { display: grid; grid-template-columns: 47.08% 1fr; align-items: center; margin-top: clamp(40px, 3.78vw, 73px); }
.process-upholstery .process-copy { margin-left: 45.6%; margin-right: 20px; }
.process-upholstery > img { width: 100%; height: clamp(460px, 48.86vw, 938px); }
.process-delivery { display: grid; grid-template-columns: 45.76% 1fr; gap: 19.4%; align-items: center; margin-top: clamp(60px, 6.56vw, 126px); }
.process-delivery > img { width: 100%; height: clamp(460px, 44.01vw, 845px); }
.process-delivery .process-copy { max-width: 282px; }
.process-technology { display: grid; grid-template-columns: 1fr 49.43%; align-items: center; gap: 7%; width: 78.4%; margin: clamp(100px, 10.2vw, 196px) auto 0; }
.process-quote { position: relative; margin: 0; padding: 44px 40px; }
.process-quote blockquote { margin: 0; font: 400 clamp(28px, 2.05vw, 39.43px)/1.18 Lobster, cursive; }
.process-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; font-style: italic; }
.process-quote figcaption::before { content: ''; flex: 0 0 29px; border-top: 1px solid #111; }
.process-quote__open, .process-quote__close { position: absolute; width: 38px; height: 27px; }
.process-quote__open { left: 0; top: 8px; }
.process-quote__close { right: 0; bottom: 0; }
.process-technology__image { width: 100%; height: clamp(320px, 26.82vw, 515px); }
.process-social { padding: clamp(100px, 11.15vw, 214px) 2.66% clamp(100px, 9.06vw, 174px); text-align: center; }
.process-social > p { margin: 0 0 10px; font-size: 14px; font-weight: 300; }
.process-social h2 { margin: 0 0 40px; font-size: 24px; text-transform: uppercase; }
.process-social__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.process-social > p a { color: inherit; text-decoration: none; }
.process-social > p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.process-social a { cursor: pointer; }
.process-social a:focus-visible { outline: 2px solid #63704b; outline-offset: 5px; }
.process-social__gallery > a { display: block; overflow: hidden; }
.process-social__gallery img { width: 100%; height: auto; aspect-ratio: 428 / 465; transition: transform .55s ease; }
.process-social__gallery > a:is(:hover, :focus-visible) img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .process-social__gallery img { transition: none; }
}
@media (max-width: 1100px) {
  .process-intro p { width: 70%; }
  .process-inset { width: 84%; }
  .process-frame .process-copy { margin-left: 5%; }
  .process-sewing .process-copy, .process-upholstery .process-copy { margin-left: 15%; margin-right: 24px; }
  .process-delivery { gap: 10%; }
  .process-technology { width: 90%; gap: 3%; }
  .process-quote { padding-inline: 26px; }
  .process-quote figcaption { font-size: 12px; }
  .process-social__gallery { gap: 16px; }
}
@media (max-width: 700px) {
  .process-intro__inner { width: calc(100% - 40px); flex-direction: column; gap: clamp(20px, 4svh, 38px); padding-block: 24px clamp(24px, 5svh, 46px); }
  .process-intro p { width: 100%; font-size: 18px; }
  .process-scroll { width: 52px; height: 52px; margin: 0; }
  .process-story { padding-top: 70px; }
  .process-specification, .process-frame, .process-cutting, .process-sewing, .process-upholstery, .process-delivery, .process-technology { width: 100%; grid-template-columns: 1fr; gap: 30px; }
  .process-specification h2 { max-width: 400px; padding: 0 24px; }
  .process-frame, .process-cutting, .process-sewing, .process-foam, .process-upholstery, .process-delivery { margin-top: 64px; }
  .process-copy, .process-frame .process-copy, .process-sewing .process-copy, .process-upholstery .process-copy, .process-delivery .process-copy { max-width: none; margin: 0; padding-inline: 24px; line-height: 1.6; }
  .process-specification > img, .process-frame > img, .process-cutting > img, .process-sewing > img, .process-foam > img, .process-upholstery > img, .process-delivery > img { width: 100%; height: auto; max-height: 580px; }
  .process-specification > img, .process-foam > img { aspect-ratio: 4 / 3; }
  .process-frame > img, .process-delivery > img { aspect-ratio: 4 / 5; }
  .process-cutting > img, .process-sewing > img { aspect-ratio: 3 / 2; }
  .process-upholstery > img { aspect-ratio: 1; }
  .process-technology { margin-top: 80px; }
  .process-quote { margin-inline: 24px; }
  .process-technology__image { height: auto; aspect-ratio: 744 / 515; }
  .process-social { padding: 80px 20px; }
  .process-social__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Revised manufacturing story — Figma 7:5195. Image crops follow the design layers. */
.process-photo { position: relative; min-width: 0; overflow: hidden; }
.process-photo img { position: absolute; max-width: none; }
.process-photo--specification { width: 119.1558%; margin-left: -19.1558%; aspect-ratio: 1468 / 938; }
.process-photo--specification img { width: 128.9%; height: 100%; left: -14.45%; top: 0; }
.process-photo--frame { aspect-ratio: 629 / 845; }
.process-photo--frame img { width: 106.59%; height: 119%; left: -5.28%; top: -9.5%; }
.process-sewing { display: block; margin-top: 8.1771vw; }
.process-photo--sewing { width: 82.7083%; margin-left: -13.6458%; aspect-ratio: 1588 / 803; }
.process-photo--sewing img { width: 100%; height: 352.32%; left: 1.2%; top: -130.47%; }
.process-upholstery { grid-template-columns: 32.7604vw 1fr; gap: 12.4479vw; margin: 10.1042vw 0 0 17.2396%; }
.process-upholstery .process-copy { grid-column: 2; grid-row: 1; margin: 0 24px 0 0; }
.process-photo--upholstery { grid-column: 1; grid-row: 1; aspect-ratio: 629 / 845; }
.process-photo--upholstery img { width: 223.66%; height: 111.01%; left: -13.18%; top: 0; }
.process-foam { margin-top: 10.1042vw; }
.process-photo--foam { width: 82.7604%; margin-left: 17.2396%; aspect-ratio: 1646 / 938; }
.process-photo--foam img { width: 107.47%; height: 125.74%; left: -.03%; top: -12.87%; }
.process-delivery { width: 66.1458%; grid-template-columns: 47.5591% 1fr; gap: 17.4016%; margin-top: 11.9271vw; }
.process-photo--delivery { width: 100%; }
.process-photo--delivery img { position: static; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
@media (max-width: 700px) {
  .process-photo--specification { width: 119.1558%; }
  .process-sewing, .process-upholstery, .process-foam, .process-delivery { margin-top: 64px; }
  .process-photo--sewing { width: 119.759%; margin-left: -19.759%; }
  .process-upholstery { width: 100%; margin-left: 0; grid-template-columns: 1fr; gap: 30px; }
  .process-upholstery .process-copy { grid-column: 1; grid-row: 2; margin: 0; }
  .process-photo--upholstery { grid-column: 1; grid-row: 1; }
  .process-photo--frame, .process-photo--upholstery, .process-photo--delivery { width: min(100%, 432px); justify-self: center; }
  .process-photo--foam { width: 100%; margin-left: 0; }
  .process-delivery { width: 100%; grid-template-columns: 1fr; gap: 30px; }
}