:root { --paper: #e6e6e7; --ink: #050505; --side: min(9.7vw, 186px); font-family: "Della Respira", Georgia, serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); } a, button, input, textarea { font: inherit; } a { color: inherit; text-decoration: none; } button { color: inherit; cursor: pointer; }
.intro-screen { --fragment-progress: 0; --chrome-opacity: 1; background: var(--paper); color: white; height: 100svh; isolation: isolate; overflow: hidden; position: sticky; top: 0; } #intro-scroll { height: 172vh; }
.texture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -2; } .texture--full { background: linear-gradient(#00101830, #000a0e54), url("assets/home-hero.png") center / cover; will-change: left, top, width, height; }
.site-chrome { align-items: flex-start; display: grid; grid-template-columns: 150px 1fr 150px; left: var(--side); position: absolute; right: var(--side); top: 49px; z-index: 4; }.intro-screen > .site-chrome, .intro-screen > .site-footer { opacity: var(--chrome-opacity); }
.primary-nav, .language-switch, .site-footer { font-size: min(.625vw, 12px); line-height: 1.18; }.primary-nav, .language-switch { display: flex; flex-direction: column; }.language-switch { align-items: end; }.language-switch button, .text-link { background: none; border: 0; padding: 0; text-align: inherit; }.language-switch button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }.primary-nav a, .language-switch button, .site-footer a, .text-link { transition: opacity 180ms ease; }.primary-nav a:hover, .language-switch button:hover, .site-footer a:hover, .text-link:hover { opacity: .5; }
.brand { justify-self: center; width: min(7.3958vw, 142px); }.brand img { display: block; width: 100%; }.chrome--light .brand img, .footer--light .brand img { filter: invert(1); }
.intro-entry { --blason-width: min(17.3vw, 332px); --blason-height: calc(var(--blason-width) * 1.544); height: var(--blason-height); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--blason-width); z-index: 1; }.intro-entry::before { background: url("assets/blason-filaire.svg") center / 100% 100% no-repeat; content: ""; inset: 0; opacity: calc(1 - var(--fragment-progress) * 15); position: absolute; }.blason-fragment { display: block; opacity: calc(var(--fragment-progress) * 15); position: absolute; transform-origin: center; will-change: transform, opacity; }.blason-fragment img { display: block; height: 100%; width: 100%; }.fragment--one { height: 45.4%; left: 0; top: 0; width: 67.7%; }.fragment--two { height: 19.1%; left: 60.4%; top: 0; width: 39.8%; }.fragment--three { height: 56%; left: 0; top: 44%; width: 67.8%; }.fragment--four { height: 81.8%; left: 34.1%; top: 18.2%; width: 65.9%; }
.site-footer { bottom: 24px; display: flex; justify-content: space-between; left: var(--side); position: absolute; right: var(--side); z-index: 4; }.site-footer div { display: flex; flex-direction: column; }.site-footer p { margin: 0; text-align: right; }
.works-section { min-height: 100svh; overflow: hidden; position: relative; }.works-section > .site-chrome { position: absolute; }.home-hero { height: 44.0625vw; min-height: 630px; overflow: hidden; position: relative; padding-top: 12.1875vw; }.home-hero img { display: block; height: min(31.875vw, 612px); min-height: 440px; object-fit: cover; width: 100%; }.work-quote { color: white; font-size: min(1.5625vw, 30px); left: 50%; line-height: min(1.8229vw, 35px); margin: 0; max-width: min(23.125vw, 444px); position: absolute; text-align: center; text-shadow: 0 1px 5.6px #000; top: calc(12.1875vw + min(15.9375vw, 306px)); transform: translate(-50%, -50%); width: 72%; }
.factory-section { height: min(65vw, 1252px); min-height: 1020px; position: relative; }.factory-title { align-items: center; display: flex; flex-direction: column; left: 50%; line-height: .78; position: absolute; top: 13%; transform: translateX(-50%); width: min(44.5vw, 854px); z-index: 1; }.factory-title span { font-size: min(1.0417vw, 20px); letter-spacing: min(3.8333vw, 73.6px); padding-left: min(3.8333vw, 73.6px); }.factory-title b { font-size: min(2.3958vw, 46px); font-weight: 400; letter-spacing: min(8.8167vw, 169.28px); margin-top: 27px; padding-left: min(8.8167vw, 169.28px); }.factory-title strong { font-size: min(5vw, 96px); font-weight: 400; letter-spacing: min(2.85vw, 54.72px); margin-top: 38px; padding-left: min(2.85vw, 54.72px); }.factory-poster { display: block; height: min(59.167vw, 1136px); left: 50%; object-fit: cover; position: absolute; top: 8%; transform: translateX(-50%); width: min(53.854vw, 1034px); }
.works-gallery { height: min(152vw, 2920px); margin: 0 auto; max-width: 1548px; position: relative; width: 80.625vw; }.work-card { position: absolute; width: 28%; }.work-card h2 { font-size: min(1.5625vw, 30px); font-weight: 400; line-height: 1.15; margin: 0 0 27px; }.work-card img { aspect-ratio: 433 / 613; display: block; object-fit: cover; width: 100%; }.work-card p { font-size: min(1.3021vw, 25px); line-height: 1.4; margin: 24px 0 18px; }.work-card .dimensions, .work-card small { font-size: min(.78125vw, 15px); line-height: 1.2; }.work-card .dimensions { margin: 14px 0 22px; }.work-card small { display: block; }.work-card--hypeene-01 { left: 0; top: 0; }.work-card--hypeene-02 { left: 35.66%; top: 5.1%; }.work-card--miramar { right: 0; top: 17%; }.work-card--domi { left: 0; top: 35.6%; }.work-card--tommy { left: 35.66%; top: 42.6%; }.work-card--kenza { right: 0; top: 54.3%; }.work-card--murano { left: 0; top: 71.2%; }
.ornament { position: absolute; }.ornament--top-left { left: -280px; top: -430px; transform: rotate(-30deg); width: 224px; }.ornament--top-right { right: -180px; top: -300px; transform: rotate(44deg); width: 132px; }.ornament--bottom-left { bottom: 31%; left: -340px; transform: rotate(-35deg); width: 224px; }.ornament--bottom-right { bottom: 30%; right: -330px; transform: rotate(51deg); width: 218px; }.works-footer { margin-top: -35px; position: relative; }
.contact-section { min-height: min(155.6481vh, 1681px); padding: min(22.5vh, 243px) 0 150px; position: relative; }.contact-grid { display: grid; gap: min(5.0521vw, 97px); grid-template-columns: min(37.7083vw, 724px) min(28.3854vw, 545px); justify-content: start; margin-left: 9.3229vw; }.contact-image { height: min(58.1771vw, 1117px); object-fit: cover; width: min(37.7083vw, 724px); }.contact-content h1 { font-size: min(1.5625vw, 30px); font-weight: 400; line-height: min(1.8229vw, 35px); margin: min(5.2778vh, 57px) 0 min(5.0926vh, 55px); max-width: min(28.3854vw, 545px); }#contact-form { position: relative; }#contact-form label { display: block; font-size: min(.78125vw, 15px); line-height: min(1.8229vw, 35px); margin-bottom: min(1.4815vh, 16px); }#contact-form input, #contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid #222; border-radius: 0; display: block; font-family: inherit; font-size: min(.8333vw, 16px); outline-offset: 5px; padding: 0; resize: vertical; width: 100%; }#contact-form input { height: min(3.7037vh, 40px); }#contact-form textarea { height: min(10.9259vh, 118px); }.transmit { background: none; border: 0; border-bottom: 1px solid #222; display: block; font-size: min(.78125vw, 15px); line-height: min(1.8229vw, 35px); margin: min(4.6296vh, 50px) 0 0 auto; padding: 0; }#form-status { font-size: 13px; line-height: 1.3; margin: 15px 0 0; min-height: 18px; text-align: right; }.contact-details { left: 52.0833vw; margin: 0; position: absolute; top: min(95.9259vh, 1036px); }.contact-details > div + div { margin-top: min(7.8704vh, 85px); }.contact-details p { font-size: min(.78125vw, 15px); line-height: min(1.8229vw, 35px); margin: 0 0 min(4.537vh, 49px); }.contact-details a { font-size: min(1.5625vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }.contact-footer { bottom: 24px; }.contact-footer .brand { align-self: end; margin: auto; position: absolute; left: 50%; transform: translateX(-50%); width: 100px; }.contact-footer .brand img, .brand--small { width: 100px; }
@media (max-width: 900px) { :root { --side: 28px; }.site-chrome { grid-template-columns: 88px 1fr 60px; top: 26px; }.primary-nav, .language-switch, .site-footer { font-size: 10px; }.brand { width: 110px; }.home-hero { height: 600px; padding-top: 145px; }.home-hero img { height: 390px; min-height: 0; }.work-quote { font-size: 21px; line-height: 1.25; top: 340px; }.factory-section { height: 880px; min-height: 0; }.factory-title { top: 80px; width: 84vw; }.factory-title span { font-size: 13px; letter-spacing: 2.8em; padding-left: 2.8em; }.factory-title b { font-size: 28px; letter-spacing: 2.2em; padding-left: 2.2em; }.factory-title strong { font-size: 48px; letter-spacing: .65em; padding-left: .65em; }.factory-poster { height: 710px; top: 50px; width: 72vw; }.works-gallery { display: grid; gap: 68px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding: 0 28px 110px; width: 100%; }.work-card { position: static; width: auto; }.work-card h2 { font-size: 19px; margin-bottom: 14px; }.work-card p { font-size: 17px; }.work-card .dimensions, .work-card small { font-size: 12px; }.work-card--miramar { margin-top: 60px; }.work-card--domi { margin-top: 28px; }.work-card--kenza { margin-top: 55px; }.ornament { display: none; }.works-footer { margin: 0; position: relative; }.contact-section { min-height: 0; padding: 170px 28px 175px; }.contact-grid { gap: 45px; grid-template-columns: 1fr; margin-left: 0; }.contact-image { height: min(125vw, 730px); width: 100%; }.contact-content h1 { font-size: clamp(22px, 5vw, 30px); line-height: 1.17; margin: 0 0 40px; }.contact-details { margin: 110px 0 0; position: static; }.contact-details p { margin-bottom: 20px; }.contact-details a { font-size: clamp(21px, 5.5vw, 30px); }.contact-footer { left: 28px; right: 28px; } }
@media (max-width: 520px) { .site-chrome { grid-template-columns: 72px 1fr 42px; }.primary-nav { line-height: 1.1; }.brand { width: 92px; }.intro-entry { width: 46vw; }.home-hero { height: 490px; padding-top: 120px; }.home-hero img { height: 300px; }.work-quote { font-size: 17px; top: 270px; }.factory-section { height: 590px; }.factory-title { top: 54px; }.factory-title b { margin-top: 18px; }.factory-title strong { font-size: 31px; margin-top: 24px; }.factory-poster { height: 500px; top: 32px; width: 88vw; }.works-gallery { gap: 46px; grid-template-columns: 1fr; }.work-card--miramar, .work-card--domi, .work-card--kenza { margin-top: 0; }.site-footer { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 1ms !important; } }

/* Continuous intro → home sequence */
#intro-scroll { height: 200svh; }
.intro-screen { z-index: 2; }
#site-content { position: relative; z-index: 1; }
#intro-scroll[hidden] + #site-content { margin-top: 0; }
.intro-screen { --home-opacity: 0; }
.transition-home { color: var(--ink); inset: 0; opacity: var(--home-opacity); pointer-events: none; position: absolute; z-index: 3; }
.transition-home .site-chrome { color: var(--ink); }
.transition-home .brand img { filter: none; }
.transition-home .work-quote { top: calc(12.1875vw + min(15.9375vw, 306px)); }
.intro-screen > .site-chrome { color: rgb(calc(255 - 250 * var(--header-tone, 0)) calc(255 - 250 * var(--header-tone, 0)) calc(255 - 250 * var(--header-tone, 0))); opacity: 1; }
.intro-screen > .site-chrome.chrome--light .brand img { filter: invert(calc(1 - var(--header-tone, 0))); }

/* The final animated frame is the home header/hero itself.  Do not render a
   second fixed header and rock image underneath it: that was the visible
   duplicate at the end of the scroll sequence. */
.works-section > .site-chrome,
.works-section > .home-hero { display: none; }

/* Source-frame calibration: hero ends at 846px, Factory block runs 1,250px at 1,920px wide. */
.factory-section { height: min(65.1042vw, 1250px); min-height: 0; }
.factory-title { top: min(7.1354vw, 137px); }
.factory-poster { height: min(59.167vw, 1136px); top: min(6.0417vw, 116px); }
.works-footer { bottom: auto; margin: 240px 0 32px; padding-bottom: 24px; }

.work-image-button { appearance: none; background: transparent; border: 0; cursor: zoom-in; display: block; isolation: isolate; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; }
.work-image-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.work-image-button img { display: block; width: 100%; }
.work-image-color { height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity 220ms ease; width: 100%; z-index: 1; }

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .work-image-button.has-color-preview:hover .work-image-color,
  .work-image-button.has-color-preview:focus-visible .work-image-color { opacity: 1; }
}

.work-card--color-flash .work-image-color { opacity: 1; }
.work-card { scroll-margin-top: 28px; will-change: transform; }
.factory-poster { will-change: auto; }
.lightbox { align-items: center; background: rgb(5 5 5 / .88); display: flex; inset: 0; justify-content: center; padding: 48px; position: fixed; z-index: 20; }
.lightbox[hidden] { display: none; }
.lightbox-image { box-shadow: 0 12px 50px rgb(0 0 0 / .42); max-height: calc(100svh - 96px); max-width: min(92vw, 1400px); object-fit: contain; }
.lightbox-close { background: none; border: 0; color: white; cursor: pointer; font: 300 42px/1 Arial, sans-serif; padding: 8px 12px; position: absolute; right: 20px; top: 14px; }
.lightbox-close:focus-visible { outline: 2px solid white; outline-offset: 3px; }

@media (max-width: 900px) {
  #intro-scroll { height: 180svh; }
  .transition-home .work-quote { top: 340px; }
  .works-footer { margin: 100px 0 0; padding-bottom: 18px; }
  .lightbox { padding: 24px; }
  .lightbox-image { max-height: calc(100svh - 48px); max-width: 100%; }
}

@media (max-width: 520px) {
  .transition-home .work-quote { top: 270px; }
  .works-footer { margin-top: 74px; }
}

@media (min-width: 901px) {
  .factory-title { display: block; height: min(11.4583vw, 220px); top: min(7.1354vw, 137px); width: min(44.4792vw, 854px); }
  .factory-title span, .factory-title b, .factory-title strong { display: block; left: 0; position: absolute; text-align: center; white-space: nowrap; width: 100%; }
  .factory-title span, .factory-title b { height: min(1.8229vw, 35px); line-height: min(1.8229vw, 35px); }
  .factory-title span { font-size: min(1.0417vw, 20px); letter-spacing: 3.68em; padding-left: 0; top: 0; }
  .factory-title b { font-size: min(2.3958vw, 46px); letter-spacing: 3.68em; margin-top: 0; padding-left: 0; top: min(2.8125vw, 54px); }
  .factory-title strong { align-items: center; display: flex; font-size: min(5vw, 96px); height: min(5.8854vw, 113px); justify-content: center; letter-spacing: .57em; line-height: min(1.8229vw, 35px); margin-top: 0; padding-left: 0; top: min(5.2083vw, 100px); }

  /* Keep the four text blocks visually compact inside each product tile. */
  .work-card h2 { margin-bottom: 16px; }
  .work-card .dimensions { margin: 10px 0 14px; }
  .work-card p { margin: 16px 0 12px; }
  .work-card .dimensions { margin: 10px 0 14px; }
}

@media (max-width: 900px) {
  .work-card h2 { margin-bottom: 11px; }
  .work-card .dimensions { margin: 8px 0 10px; }
  .work-card p { margin: 12px 0 10px; }
}

/* Interactive Factory scene. The raster illustration remains as a loading/fallback state. */
.factory-scene { height: min(59.167vw, 1136px); isolation: isolate; left: 50%; overflow: hidden; position: absolute; top: min(6.0417vw, 116px); transform: translateX(-50%); width: min(53.854vw, 1034px); }
.factory-scene canvas { display: block; height: 100%; inset: 0; position: absolute; touch-action: pan-y; width: 100%; }
.factory-scene::after { display: none; }
.factory-scene .factory-poster--fallback { height: 100%; inset: 0; object-fit: contain; position: absolute; transform: none; transition: opacity 300ms ease; width: 100%; }
.factory-scene.is-ready .factory-poster--fallback { opacity: 0; pointer-events: none; }
.scene-tooltip { background: var(--ink); color: var(--paper); font-family: "Della Respira", Georgia, serif; font-size: 12px; left: 0; opacity: 0; padding: 6px 9px 7px; pointer-events: none; position: absolute; top: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity 130ms ease; white-space: nowrap; z-index: 2; }
.scene-tooltip.is-visible { opacity: 1; }
.work-card--highlight { animation: work-card-highlight 1.2s ease-out; }
@keyframes work-card-highlight { 0%, 100% { outline-color: transparent; outline-offset: 0; } 25% { outline: 1px solid var(--ink); outline-offset: 10px; } }

@media (max-width: 900px) {
  .factory-scene { height: 710px; top: 50px; width: 72vw; }
  .factory-scene canvas { touch-action: pan-y; }
  .scene-tooltip { display: none; }
}

@media (max-width: 520px) {
  .factory-scene { height: 500px; top: 32px; width: 88vw; }
}

/* Mobile composition: keep the quote inside its rock image, and give the
   Factory scene its own breathing room before the two-column catalogue. */
@media (max-width: 900px) {
  #intro-scroll { height: 112svh; }

  .transition-home .work-quote {
    font-size: 21px;
    line-height: 1.22;
    max-width: 360px;
    top: 210px;
    width: 78%;
  }

  .factory-section {
    height: clamp(700px, 128vw, 880px);
    min-height: 0;
  }

  .factory-title {
    top: 50px;
    width: 90vw;
  }

  .factory-scene {
    height: clamp(510px, 102vw, 640px);
    top: 38px;
    width: min(94vw, 560px);
  }

  .works-gallery {
    gap: 50px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 20px 90px;
  }

  .work-card h2 { font-size: clamp(15px, 3.1vw, 19px); line-height: 1.08; }
  .work-card p { font-size: clamp(13px, 2.8vw, 17px); line-height: 1.25; }
  .work-card .dimensions, .work-card small { font-size: clamp(10px, 2.2vw, 12px); }
}

@media (max-width: 520px) {
  .transition-home .work-quote { font-size: 19px; max-width: 320px; top: 185px; }
  .factory-section { height: 620px; }
  .factory-title { top: 44px; }
  .factory-scene { height: 510px; top: 30px; width: 94vw; }
  .works-gallery { gap: 42px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
  .work-card h2 { font-size: 14px; }
  .work-card p { font-size: 12px; }
  .work-card .dimensions, .work-card small { font-size: 10px; }
}

/* Mobile keeps the reversible blason transition, but compresses it into a
   single short scroll interval before Factory. */
@media (max-width: 900px) {
  #intro-scroll { display: block; height: 145svh; }
  #site-content { margin-top: -100svh; }
  #intro-scroll[hidden] + #site-content { margin-top: 0; }

  .intro-screen { transition: opacity 180ms ease; z-index: 2; }
  .intro-screen.is-complete { opacity: 0; pointer-events: none; }

  .works-section > .site-chrome {
    display: none;
  }

  .works-section > .home-hero {
    display: none;
  }

  .intro-screen .site-chrome {
    left: 0;
    padding: 24px var(--side) 9px;
    right: 0;
    top: 0;
  }

  .transition-home .work-quote {
    font-size: 21px;
    line-height: 1.22;
    max-width: 360px;
    top: 209px;
    width: 78%;
  }
}

@media (max-width: 520px) {
  .transition-home .work-quote { font-size: 19px; max-width: 320px; top: 209px; }

  .factory-title { display: block; height: 140px; top: 38px; width: 92vw; }
  .factory-title span, .factory-title b, .factory-title strong { display: block; left: 0; margin: 0; padding: 0; position: absolute; text-align: center; white-space: nowrap; width: 100%; }
  .factory-title span { font-size: 11px; letter-spacing: 1.45em; line-height: 1; padding-left: 1.45em; top: 0; }
  .factory-title b { font-size: 26px; font-weight: 400; letter-spacing: .95em; line-height: 1; padding-left: .95em; top: 32px; }
  .factory-title strong { font-size: 42px; font-weight: 400; letter-spacing: .21em; line-height: 1; padding-left: .21em; top: 67px; }

  .factory-scene { top: 20px; }
  .work-card { will-change: transform; }
}

/* Final mobile refinements: Factory replaces the intro at the end of the
   blason sequence; the two columns retain an intentionally uneven rhythm. */
.lightbox { gap: clamp(24px, 4vw, 70px); }
.lightbox-details { color: white; flex: 0 1 min(22vw, 330px); font-size: 14px; line-height: 1.35; }
.lightbox-details h2 { font-size: clamp(20px, 1.8vw, 34px); font-weight: 400; line-height: 1.08; margin: 0 0 20px; }
.lightbox-details p { margin: 0 0 18px; }
.lightbox-details .lightbox-dimensions, .lightbox-details small { display: block; font-size: 12px; line-height: 1.25; }
.lightbox-details .lightbox-dimensions { margin-bottom: 18px; }
.lightbox-image { max-width: min(64vw, 1120px); }
.lightbox-visual { align-items: center; display: flex; flex: 1 1 auto; justify-content: center; max-width: min(64vw, 1120px); position: relative; touch-action: pan-y; }
.lightbox-visual .lightbox-image { max-width: 100%; }
.lightbox-nav { align-items: center; background: rgb(5 5 5 / .6); border: 1px solid rgb(255 255 255 / .8); border-radius: 50%; color: white; cursor: pointer; display: flex; font: 300 24px/1 Arial, sans-serif; height: 44px; justify-content: center; padding: 0 0 2px; position: absolute; top: 50%; transform: translateY(-50%); transition: background-color .18s ease, color .18s ease; width: 44px; z-index: 1; }
.lightbox-nav:hover { background: white; color: black; }
.lightbox-nav:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.lightbox-nav[hidden], .lightbox-counter[hidden] { display: none; }
.lightbox-nav--previous { left: 14px; }
.lightbox-nav--next { right: 14px; }
.lightbox-counter { bottom: 12px; color: white; font: 12px/1 Arial, sans-serif; left: 50%; margin: 0; position: absolute; transform: translateX(-50%); }
.availability-link { background: transparent; border: 0; cursor: pointer; display: block; font-size: inherit; line-height: 1.2; padding: 0; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 900px) {
  #intro-scroll { height: 135svh; }
  .transition-home { display: none; }

  .site-chrome { grid-template-columns: 1fr auto 1fr; }
  .site-chrome .brand { grid-column: 2; }
  .site-chrome .language-switch { grid-column: 3; }

  .works-section { overflow: visible; }
  .works-gallery { margin-top: -80px; }
  .works-footer { align-items: flex-end; bottom: auto; left: auto; margin: 0; padding: 56px var(--side) 30px; position: relative; right: auto; width: 100%; }

  .lightbox { align-items: flex-start; flex-direction: column; justify-content: flex-start; overflow: auto; padding: 56px 24px 24px; }
  .lightbox-details { flex: 0 0 auto; max-width: 560px; }
  .lightbox-visual { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .lightbox-image { max-height: none; max-width: 100%; }
  .lightbox-nav--previous { left: 10px; }
  .lightbox-nav--next { right: 10px; }
}

/* Keep the animated intro in the Works page flow on phones, exactly as on
   desktop. Contact hides it completely rather than exposing it while scrolling. */
#intro-scroll[hidden] { display: none !important; }
.availability-link { font-size: min(.78125vw, 15px); text-decoration: none; }

@media (max-width: 900px) {
  #intro-scroll { height: 145svh; }
  #site-content { margin-top: 0; }
  .intro-screen { transition: none; }
  .intro-screen.is-complete { opacity: 1; pointer-events: auto; }
  .transition-home { display: block; }
  .availability-link { font-size: clamp(10px, 2.2vw, 12px); }
}

.scene-hotspot-labels { display: none; }
.factory-gallery-spacer { display: none; }

@media (max-width: 900px) {
  .scene-hotspot-labels { display: block; inset: 0; pointer-events: none; position: absolute; transition: opacity 220ms ease; z-index: 3; }
  .scene-hotspot-labels span { background: #121c1f; border: 0; color: #f8f8f9; font-size: 10px; left: 50%; line-height: 1; padding: 6px 8px 7px; position: absolute; top: 50%; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; }
  .scene-hotspot-labels:not(:has(span:not([hidden]))) { display: none; }
  .factory-scene:not(.has-hotspots) .scene-hotspot-labels { opacity: 0; }
  .factory-scene.has-hotspots .scene-hotspot-labels { opacity: 1; }
  .works-gallery { row-gap: 104px; column-gap: 14px; }
}

/* Mobile spacing and contact typography calibration. */
@media (max-width: 900px) {
  .factory-gallery-spacer { display: block; height: 10px; }
  .works-gallery { margin-top: 0; }

  .contact-section { padding: 116px 28px 140px; }
  .contact-grid { gap: 34px; }
  .contact-content h1 { font-size: clamp(25px, 6.5vw, 32px); line-height: 1.16; margin: 0 0 42px; max-width: none; width: 100%; }
  #contact-form label { font-size: 12px; line-height: 1.3; margin-bottom: 20px; }
  #contact-form input, #contact-form textarea { font-size: 15px; }
  #contact-form input { height: 38px; }
  #contact-form textarea { height: 132px; }
  .transmit { font-size: 12px; line-height: 1.3; margin-top: 34px; }
  .contact-details { margin-top: 86px; }
  .contact-details p { font-size: 12px; line-height: 1.3; margin-bottom: 16px; }
}

/* The mobile quotation follows the exact vertical centre of the rock image. */
@media (max-width: 900px) {
  .transition-home .work-quote { top: var(--texture-quote-center, 50svh); }
}

/* About: the four parts remain loose until the empty left field pulls them
   back into a single blason. The text stays above their flight path. */
.about-section { --about-magnet-x: 0px; --about-magnet-y: 0px; min-height: max(100svh, min(88.8542vw, 1706px)); overflow: hidden; position: relative; }
.about-section > .site-chrome { position: absolute; }
.about-copy { margin-left: 52.0833vw; padding: min(13.3854vw, 257px) 0 180px; position: relative; width: min(38.5938vw, 741px); z-index: 2; }
.about-copy h1 { font-size: min(2.6042vw, 50px); font-weight: 400; line-height: 1.12; margin: 0 0 min(3.6458vw, 70px); }
.about-copy p { font-size: min(1.5625vw, 30px); line-height: min(1.8229vw, 35px); margin: 0 0 min(3.3854vw, 65px); }
.about-copy p:last-child { margin-bottom: 0; }
.about-fragment-field { inset: 0 auto 0 0; position: absolute; width: 52.0833%; z-index: 1; }
.about-blason { inset: 0; pointer-events: none; position: absolute; }
.about-fragment { display: block; left: 0; position: absolute; top: 0; transform-origin: center; will-change: transform; }
.about-blason-rough { height: auto; left: 45.5%; opacity: 1; position: absolute; top: 39%; transform: translate(-50%, -50%); transition: opacity 120ms linear; width: min(31vw, 330px); }
.about-section.is-blason-whole .about-fragment { display: none; }
.about-section.is-blason-fragmented .about-blason-rough { opacity: 0; }
.about-footer { align-items: flex-end; bottom: 24px; }.about-footer .brand { left: 50%; position: absolute; transform: translateX(-50%); width: 100px; }.about-footer .brand img { display: block; width: 100%; }

@media (max-width: 900px) {
  .about-section { min-height: 100svh; padding: 124px 28px 110px; }
  .about-copy { margin: 0; padding: 0; width: 100%; }
  .about-copy h1 { font-size: clamp(32px, 8vw, 45px); line-height: 1.1; margin-bottom: 42px; }
  .about-copy p { font-size: clamp(20px, 5.3vw, 27px); line-height: 1.18; margin-bottom: 42px; }
  .about-fragment-field { display: none; }
  .about-footer { display: none; }
}