/* Бретёр · new structure — design system adapted from Apple's product-page style (via Refero):
   fog canvas, white 28px cards without shadows, one pill CTA per zone, left-aligned Optima Cyr Roman headlines,
   17–18px body text for a 45+ audience. Onest (OFL) for text, owner-supplied Optima Cyr Roman for headings. */
@layer structure {
  .structure-preview {
    --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --display: var(--sans);
    --heading: 'Cormorant SC', Georgia, serif;
    --copy: var(--sans);
    --serif: var(--sans);
    --ink: #1d1d1f;
    --secondary: #474747;
    --tertiary: #6e6e73;
    --muted: var(--secondary);
    --rule: #e3e3e6;
    --canvas: #f5f4f2;
    --card: #fff;
    --gold: #b8976a;
    --radius: 28px;
    --radius-inner: 20px;
    --header-h: 72px;
    --section-pad: 120px;
    --fs-display: clamp(30px, 2.8vw, 40px);
    --fs-h2: clamp(30px, 2.8vw, 40px);
    --fs-h3: 22px;
    --fs-h4: 17px;
    --fs-lead: 21px;
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-label: 15px;
    --ease: cubic-bezier(.25,.1,.25,1);
    font-family: var(--sans);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
  }

  /* Type */
  .structure-preview main :is(h1,h2) em { font-style: normal; }
  .structure-preview main :is(p,dd,li,blockquote) { font: 400 var(--fs-body)/1.6 var(--sans); letter-spacing: -.005em; }
  .structure-preview main p { max-width: 64ch; }
  .structure-preview .section-label { font: 600 var(--fs-label)/1.3 var(--sans); color: var(--tertiary); letter-spacing: 0; text-transform: none; margin: 0; }
  .structure-preview .section-title { font: 400 var(--fs-h2)/1.15 var(--heading); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); margin: 12px 0 0; max-width: 20ch; text-align: left; text-wrap: balance; }
  .structure-preview h3 { font: 400 var(--fs-h4)/1.25 var(--heading); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
  .structure-preview .structure-deck { font: 400 var(--fs-lead)/1.5 var(--sans); color: var(--ink); max-width: 46ch; margin: 20px 0 0; }
  .structure-preview :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .structure-preview :is(.hero-dark, .is-dark, .site-header.is-over-dark) :focus-visible { outline-color: #fff; }

  /* Actions: one pill per zone; everything else is a plain link. */
  .structure-preview .button, .structure-preview .contact-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; width: fit-content; max-width: 100%; min-width: 0; padding: 0 24px; border-radius: 999px; border: 0; font: 500 17px/1 var(--sans); letter-spacing: -.01em; background: var(--ink); color: #fff; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
  .structure-preview .button:hover, .structure-preview .contact-trigger:hover { background: #000; }
  .structure-preview .button:active, .structure-preview .contact-trigger:active { transform: scale(.98); }
  .structure-preview .contact-trigger { margin-top: 32px; }
  .structure-preview .text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; font: 500 var(--fs-small)/1.35 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .structure-preview .text-link:hover { text-decoration-thickness: 2px; }
  .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .icon text { fill: currentColor; stroke: none; font: 700 7.4px/1 var(--sans); }
  .icon.brand-icon { stroke: none; }
  .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; border-radius: 50%; transition: background-color .2s var(--ease); }
  .icon-link:hover { background: rgba(127,127,127,.14); }
  .structure-preview .round-button, .structure-preview .model-strip-controls button, .structure-preview [data-gallery] { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e8e8ed; color: var(--ink); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .structure-preview .model-strip-controls button:disabled, .structure-preview [data-gallery]:disabled { opacity: .35; cursor: default; }

  /* Header: no plate at all, only the logo and controls; they turn white over dark screens.
     It slides away while reading down and returns on the way up, so text runs to the top edge. */
  .structure-preview .site-header { position: sticky; top: 0; z-index: 60; border: 0; background: none; transition: color .3s var(--ease), transform .34s var(--ease); }
  .structure-preview .site-header.is-over-dark { color: #fff; }
  .structure-preview .site-header.is-tucked { transform: translateY(-100%); }
  .site-header.is-over-dark :is(.wordmark, .desktop-nav a, .menu-toggle, .icon-link) { color: #fff; }
  .structure-preview .masthead { height: var(--header-h); padding-top: 0; grid-template-columns: auto minmax(0,1fr) auto; gap: 32px; }
  .structure-preview .masthead .brand { grid-area: 1/1; justify-content: start; }
  .structure-preview .masthead .wordmark { font-size: 38px; }
  .structure-preview .masthead .desktop-nav { grid-area: 1/2; justify-self: center; display: flex; min-height: 0; padding: 0; gap: 28px; font: 500 15px/1 var(--sans); text-transform: none; letter-spacing: -.005em; }
  .structure-preview .masthead .desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; opacity: .88; }
  .structure-preview .masthead .desktop-nav a:hover { opacity: 1; }
  .structure-preview .header-actions { grid-area: 1/3; }
  .structure-preview .header-actions .menu-toggle { display: none; }
  .header-talk { display: flex; align-items: center; gap: 4px; margin-right: -12px; }
  /* Direct chats named in text: header, first screen, phone dock. */
  .talk-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px; font: 500 15px/1 var(--sans); color: inherit; transition: background-color .2s var(--ease); }
  .talk-link .icon { width: 20px; height: 20px; }
  .talk-link:hover { background: rgba(127,127,127,.14); }
  /* Computers: past the first screen the header is a solid strip of the page canvas, so it never shows text through it. */
  @media (min-width: 701px) { .structure-preview .site-header.is-solid { background: var(--canvas); } }
  .contact-dock { display: none; }

  /* Cards: each section is a white card on the canvas; on the home page they stack as you scroll. */
  .structure-preview main > .section:not(.hero) { position: relative; margin: 0; padding-block: var(--section-pad); background: var(--card); border-radius: 0; }
  .structure-preview main > .section::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--cover, 0) * .32); pointer-events: none; }
  .structure-preview.has-stack main > section.section { position: sticky; top: var(--stick, 0px); transform-origin: 50% 0; }
  /* Reading space after each section keeps its final CTA clear before the next card covers it. */
  .structure-preview.has-stack main > section.section:not(.hero) { padding-bottom: calc(var(--section-pad) + clamp(96px, 18svh, 180px)); }
  .structure-preview.is-measuring main > section.section { position: relative !important; top: auto !important; transform: none !important; }
  .structure-preview .structure-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 0 64px; margin-bottom: 64px; align-items: end; }
  .structure-preview .structure-heading > .section-label { grid-column: 1/-1; }
  .structure-preview .structure-heading > .structure-deck { margin: 0; }
  .structure-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: center; }
  .structure-split > div { min-width: 0; }
  .structure-image img { width: 100%; height: auto; display: block; }
  .panel { background: var(--canvas); border-radius: var(--radius-inner); }

  /* Hero: one still on black that dissolves into the page edges at any width. */
  .structure-preview main > .hero { margin-top: calc(-1 * var(--header-h)); padding: 0; }
  .hero-dark { position: relative; background: #000; color: #fff; overflow: hidden; isolation: isolate; }
  .hero-art { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; }
  .hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 100% 58%; }
  .hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#000 0,transparent 12%,transparent 92%,#000 100%), linear-gradient(180deg,#000 0,transparent 14%,transparent 86%,#000 100%); }
  .structure-preview .hero-dark .hero-panel { display: flex; flex-direction: column; justify-content: center; min-height: min(100svh, max(640px, calc(42.4vw + var(--header-h)))); padding-block: calc(56px + var(--header-h)) 72px; background: transparent; color: #fff; }
  .structure-preview .hero-dark .hero-panel > * { max-width: 540px; }
  .structure-preview .hero-dark .section-label { font-weight: 300; color: #c9c2b6; margin-bottom: 20px; }
  .structure-preview .hero-headline { font: 400 calc(var(--fs-h2) * 1.4)/1.15 var(--heading); letter-spacing: .015em; text-transform: uppercase; color: #fff; text-wrap: balance; margin: 0; }
  .structure-hero-bottom { display: grid; gap: 28px; margin-top: 24px; justify-items: start; }
  .structure-preview .structure-hero-bottom > p { font: 400 var(--fs-lead)/1.5 var(--sans); color: #e8e4de; max-width: 32ch; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .structure-preview .hero-alteration { margin: 0; font: 400 var(--fs-small)/1.4 var(--sans); color: #c9c2b6; }
  .structure-preview .hero-actions .button { width: fit-content; min-width: 0; min-height: 0; padding: 16px; line-height: 20px; justify-self: start; background: #fff; color: #000; }
  .structure-preview .hero-actions .button:hover { background: #e8e4de; }
  .structure-preview .hero-actions .text-link { color: #fff; }
  .hero-direct { display: flex; align-items: center; gap: 2px; color: #fff; }
  .hero-direct > span { font: 500 15px/1 var(--sans); color: #c9c2b6; margin-right: 4px; }
  .hero-direct .talk-link { padding: 0 10px; }

  /* Arch frames (desktop): upright photos and video only, with a fine gold ring. */
  .arch { position: relative; aspect-ratio: 3/4; border-radius: 999px 999px 0 0; overflow: hidden; outline: 1px solid var(--gold); outline-offset: 10px; background: var(--canvas); margin: 10px; }
  .arch img, .arch .video-poster, .arch iframe, .arch video { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* 02 Recognition */
  .recognition-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 56px; }
  .recognition-grid article { background: var(--canvas); border-radius: var(--radius-inner); padding: 32px; }
  .quiet-number { display: block; font: 600 var(--fs-label)/1 var(--sans); color: var(--tertiary); }
  .recognition-grid h3 { font-size: 18px; margin: 40px 0 10px; }
  .structure-preview .recognition-grid p { color: var(--secondary); }

  /* 03 Fit + alteration */
  #fit .structure-split { grid-template-columns: minmax(0,.85fr) minmax(0,1fr); }
  #fit .arch { max-width: 420px; justify-self: center; width: calc(100% - 20px); background: #fefefe; }
  #fit .arch img { object-fit: contain; padding: 16% 6% 4%; background: #fefefe; }
  .fit-facts { margin: 32px 0 24px; }
  .fit-facts > div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 20px; border-top: 1px solid var(--rule); padding-block: 18px; }
  .structure-preview .fit-facts dt { font: 600 var(--fs-body)/1.5 var(--sans); }
  .fit-facts dd { margin: 0; color: var(--secondary); }
  .alteration { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: 96px; background: var(--canvas); border-radius: var(--radius-inner); overflow: hidden; }
  .alteration-photo { overflow: hidden; }
  .alteration-photo img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
  .alteration-copy { padding: 56px; align-self: center; }
  .alteration-copy h3 { font: 400 clamp(24px,2vw,30px)/1.18 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin: 12px 0 16px; }
  .structure-preview .alteration-copy > p:not(.section-label) { color: var(--secondary); }

  /* 04 Catalogue */
  .structure-preview main > #catalog.is-dark {
    --ink: #f5f4f2;
    --secondary: #d0cecb;
    --tertiary: #b9b6b0;
    --canvas: #303030;
    --card: #1d1d1f;
    color: var(--ink);
  }
  #catalog.is-dark .contact-trigger { color: #1d1d1f; }
  #catalog.is-dark .contact-trigger:hover { background: #dedbd5; }
  .category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
  .category-card { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
  .category-media { position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--radius-inner); overflow: hidden; background: var(--canvas); }
  .category-media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: transform .6s var(--ease); }
  .category-media video { opacity: 0; transition: opacity .4s var(--ease); }
  .category-card.is-playing video { opacity: 1; }
  .category-card:hover .category-media img { transform: scale(1.03); }
  .category-name { margin-top: 18px; font: 400 var(--fs-h3)/1.15 var(--heading); letter-spacing: .03em; text-transform: uppercase; }
  .category-more { margin-top: 8px; font: 500 var(--fs-small)/1.3 var(--sans); color: var(--secondary); }
  .category-card:hover .category-more { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  #catalog .contact-trigger { margin-top: 48px; }

  /* 05 Process */
  .process-summary { align-items: center; }
  .process-summary .structure-image img { border-radius: var(--radius-inner); }
  .structure-preview .process-summary > div > h3 { font: 400 var(--fs-h3)/1.15 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }
  .process-list { list-style: none; padding: 0; margin: 32px 0 0; }
  .process-list li { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: baseline; gap: 12px; border-top: 1px solid var(--rule); padding-block: 18px; }
  .process-list li > span { font: 600 var(--fs-label)/1 var(--sans); color: var(--tertiary); }
  .process-list h4 { font: 600 var(--fs-body)/1.45 var(--sans); letter-spacing: 0; margin: 0 0 4px; }
  .structure-preview .process-list p { color: var(--secondary); }

  /* 06 Prices */
  .offer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 56px; }
  .offer { background: var(--canvas); border-radius: var(--radius-inner); padding: 40px; display: flex; flex-direction: column; min-width: 0; }
  .offer-type { display: flex; gap: 12px; font: 600 var(--fs-label)/1 var(--sans); color: var(--ink); margin-bottom: 40px; }
  .offer-type > span { color: var(--tertiary); }
  .offer h3 { font: 400 clamp(21px,1.8vw,26px)/1.2 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; }
  .structure-preview .offer-text { color: var(--secondary); }
  .structure-preview .offer-price { font: 600 22px/1.3 var(--sans); margin-top: 20px; }
  .structure-preview :is(.offer-includes, .offer-term) { margin-top: 6px; font: 400 var(--fs-small)/1.45 var(--sans); color: var(--secondary); }
  #prices .contact-trigger { margin-top: 40px; }

  /* 07 Workshop */
  .workshop-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 72px; align-items: end; }
  .workshop-intro .video-frame.arch { aspect-ratio: 3/4; max-height: 760px; }
  .structure-preview .video-start { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: #000; }
  .structure-preview .video-external { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 500 15px/1 var(--sans); display: inline-flex; align-items: center; }
  .workshop-founder figure { margin: 0; }
  .workshop-founder .arch { width: min(320px, calc(100% - 20px)); }
  .workshop-founder figcaption { display: grid; gap: 2px; padding-top: 24px; font: 600 var(--fs-body)/1.4 var(--sans); }
  .workshop-founder figcaption .muted { color: var(--secondary); font-weight: 400; }
  .workshop-gallery-heading { display: flex; gap: 24px; justify-content: space-between; align-items: end; margin-block: 96px 24px; }
  .structure-preview .workshop-gallery-heading h3 { font: 400 var(--fs-h3)/1.15 var(--heading); letter-spacing: .03em; text-transform: uppercase; }
  .structure-preview .workshop-gallery-heading p { color: var(--tertiary); font-size: var(--fs-small); }
  .structure-preview .gallery-slide { background: transparent; }
  .structure-preview .gallery-slide img { height: 380px; border-radius: var(--radius-inner); }
  .structure-preview .gallery-slide figcaption { padding-top: 12px; font: 400 var(--fs-small)/1.5 var(--sans); color: var(--secondary); }
  .structure-preview .gallery-count { font: 500 var(--fs-label)/1 var(--sans); color: var(--tertiary); }

  /* 08 Reviews: the one dark gradient screen. */
  .structure-preview main > #reviews.is-dark { background: radial-gradient(120% 90% at 85% 0%, #3b2b20 0%, #17120f 48%, #090909 100%); color: #fff; }
  #reviews.is-dark :is(.section-title, h3) { color: #fff; }
  #reviews.is-dark .section-label { color: #c9c2b6; }
  .structure-preview #reviews .large-description { font: 400 var(--fs-lead)/1.5 var(--sans); max-width: 46ch; margin: 20px 0 56px; }
  .structure-preview #reviews.is-dark .large-description { color: #e8e4de; }
  .structure-preview #reviews .reviews-grid { gap: 16px; }
  #reviews.is-dark .review { background: rgba(255,255,255,.07); border-radius: var(--radius-inner); padding: 12px 12px 28px; }
  .structure-preview .review .video-frame { border-radius: 14px; overflow: hidden; }
  #reviews.is-dark .review-byline, #reviews.is-dark .review blockquote { padding-inline: 12px; }
  .structure-preview .review-byline h3 { font: 600 var(--fs-h4)/1.3 var(--sans); letter-spacing: -.01em; margin-top: 20px; }
  .structure-preview #reviews.is-dark .review-byline p { font-size: var(--fs-small); color: #b9b2a7; }
  .structure-preview #reviews.is-dark .review blockquote, .structure-preview #reviews.is-dark .review blockquote strong { font: 400 var(--fs-body)/1.6 var(--sans); color: #ece8e2; }

  /* 09 Booking */
  .visit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; margin-top: 56px; align-items: start; }
  .structure-preview .visit-grid .structure-deck { margin-top: 0; }
  .visit-bring { margin-top: 28px; display: grid; gap: 8px; }
  .structure-preview .visit-bring p { color: var(--secondary); padding-left: 20px; position: relative; }
  .visit-bring p::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .structure-preview .visit-note { font-size: var(--fs-small); color: var(--tertiary); margin-top: 12px; }
  .visit-address { background: var(--canvas); border-radius: var(--radius-inner); padding: 40px; display: grid; gap: 10px; justify-items: start; }
  .visit-address h3 { font: 400 24px/1.2 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin-top: 8px; }
  .structure-preview .visit-address > p:not(.section-label) { color: var(--secondary); }
  .visit-phone { font: 600 22px/1.4 var(--sans); padding-top: 12px; }
  .structure-preview .visit-address .visit-note { margin-top: -6px; }

  /* Journal teasers */
  .structure-preview .journal-teasers { gap: 16px; }
  .structure-preview .article-card { background: var(--canvas); border-radius: var(--radius-inner); overflow: hidden; }
  .structure-preview .article-card > img { border-radius: 0; }
  .structure-preview .article-card-copy { padding: 20px 24px 24px; }
  .structure-preview .article-card h3 { font: 400 18px/1.3 var(--heading); letter-spacing: .03em; text-transform: uppercase; }
  .structure-preview .article-meta { font: 500 var(--fs-label)/1.4 var(--sans); color: var(--tertiary); }
  .structure-preview .journal-all { margin-top: 40px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .structure-preview .journal-all:hover { background: var(--ink); color: #fff; }

  /* Footer */
  .structure-preview .studio-footer { background: transparent; border: 0; padding: 80px 0 40px; color: var(--ink); }
  .footer-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 48px; }
  .footer-brand .wordmark { font-size: 44px; }
  .structure-preview .footer-brand p { font: 400 var(--fs-small)/1.5 var(--sans); color: var(--secondary); margin-top: 12px; max-width: 34ch; }
  .structure-preview .footer-brand .contact-trigger { margin-top: 24px; }
  .footer-col h2 { font: 600 var(--fs-label)/1.3 var(--sans); color: var(--tertiary); margin-bottom: 16px; }
  .structure-preview .footer-col p { font: 400 var(--fs-small)/1.5 var(--sans); color: var(--secondary); margin-top: 8px; }
  .footer-phone { font: 600 20px/1.4 var(--sans); }
  .footer-icons { display: flex; margin: 12px 0 0 -10px; }
  .footer-col nav { display: grid; gap: 2px; }
  .footer-col nav a { font: 400 var(--fs-small)/1.4 var(--sans); min-height: 40px; display: inline-flex; align-items: center; color: var(--ink); }
  .footer-col nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .footer-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .structure-preview .footer-legal p { font: 400 14px/1.6 var(--sans); color: var(--tertiary); max-width: none; }
  .footer-legal a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }

  /* Contact choice: compact dialog on desktop, bottom sheet on phones. */
  .choice-dialog { width: min(440px, calc(100% - 32px)); height: fit-content; max-height: calc(100svh - 32px); margin: auto; padding: 28px; border: 0; border-radius: var(--radius, 28px); background: #fff; color: var(--ink, #1d1d1f); overflow: auto; }
  .choice-dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }
  .choice-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
  .choice-dialog h2 { font: 400 22px/1.2 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin: 6px 0 0; }
  .choice-dialog h2:focus { outline: none; }
  .contact-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: #e8e8ed; font: 400 24px/1 var(--sans); color: var(--ink, #1d1d1f); cursor: pointer; }
  .contact-options { display: grid; gap: 8px; margin-top: 12px; }
  .contact-option, .contact-call { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 68px; padding: 10px 18px; border-radius: 16px; background: var(--canvas, #f5f4f2); color: var(--ink, #1d1d1f); transition: background-color .2s var(--ease); }
  .contact-option .icon, .contact-call .icon { width: 28px; height: 28px; }
  .contact-option > span, .contact-call > span { display: grid; gap: 2px; font: 600 17px/1.3 var(--sans); }
  .contact-option small, .contact-call small { font: 400 15px/1.4 var(--sans); color: var(--secondary, #474747); }
  .contact-option b { font: 400 20px/1 var(--sans); }
  .contact-option:hover, .contact-call:hover { background: #ebeae6; }
  .contact-call { grid-template-columns: 28px minmax(0,1fr); background: transparent; margin-top: 4px; }

  /* Menu */
  .menu-talk { display: grid; gap: 12px; margin-bottom: 32px; }
  .structure-preview .menu-talk .contact-trigger { margin: 0; width: fit-content; justify-self: center; }
  .menu-phone { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 600 18px/1.3 var(--sans); }
  .menu-phone small { display: block; font: 400 15px/1.4 var(--sans); color: var(--secondary); }
  .structure-preview #site-menu nav a { font: 600 26px/1.2 var(--sans); letter-spacing: -.015em; }

  @media (max-width: 1100px) {
    .structure-preview .masthead .desktop-nav { gap: 18px; font-size: 14px; }
  }
  @media (min-width: 901px) and (max-width: 1100px) {
    .hero-art img { object-fit: contain; object-position: 100% 60%; }
    .structure-preview .hero-dark .hero-panel > * { max-width: 420px; }
    .structure-preview { --fs-display: 48px; }
  }
  @media (max-width: 900px) {
    .structure-preview .masthead { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; }
    .structure-preview .masthead .brand { grid-area: 1/2; justify-content: center; }
    .structure-preview .masthead .desktop-nav { display: none; }
    .structure-preview .header-actions { display: contents; }
    .structure-preview .header-actions .menu-toggle { display: inline-flex; grid-area: 1/1; justify-self: start; position: static; margin: 0; }
    .structure-preview .header-talk { grid-area: 1/3; justify-self: end; }
    .structure-preview { --section-pad: 96px; }
    .structure-preview .structure-heading, .structure-split, .workshop-intro, .visit-grid, .footer-grid { grid-template-columns: minmax(0,1fr); }
    .structure-preview .structure-heading { gap: 0; }
    .structure-preview .structure-heading > .structure-deck { margin-top: 20px; }
  }
  @media (min-width: 701px) and (max-width: 900px) {
    .structure-preview .hero-dark { display: flex; flex-direction: column; }
    .hero-art { position: relative; order: 2; aspect-ratio: 16/9; z-index: 0; }
    .hero-art img { object-position: 88% 50%; }
    .structure-preview .hero-dark .hero-panel { min-height: 0; padding-block: calc(48px + var(--header-h)) 8px; }
  }

  /* Phones: the priority. */
  @media (max-width: 700px) {
    .structure-preview {
      --radius: 24px;
      --radius-inner: 18px;
      --header-h: 60px;
      --section-pad: 72px;
      --fs-display: clamp(24px, 6.8vw, 28px);
      --fs-h2: clamp(24px, 6.8vw, 28px);
      --fs-h3: 19px;
      --fs-h4: 16px;
      --fs-lead: 18px;
      --fs-body: 17px;
      --fs-small: 16px;
      --fs-label: 14px;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    .structure-preview .masthead { height: var(--header-h); }
    .structure-preview .masthead .wordmark { font-size: 32px; }
    .structure-preview .header-talk { display: none; }
    .structure-preview main > .section:not(.hero) { margin: 0; }
    .structure-preview .wrap { padding-inline: 20px; }
    .structure-preview .structure-heading { margin-bottom: 36px; }
    .structure-preview .section-title { max-width: none; }
    .structure-preview .contact-trigger, .structure-preview .button { width: fit-content; min-height: 54px; }

    /* Dock: two floating chat buttons, Telegram and MAX, no bar behind them; the shadow keeps them legible on light and dark cards. */
    .contact-dock { position: fixed; z-index: 40; inset: auto 0 0; display: flex; justify-content: center; gap: 8px; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; transition: transform .3s var(--ease), visibility .3s; }
    .dock-link { flex: 0 1 auto; padding-inline: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 16px/1 var(--sans); pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.16); }
    .dock-link .icon { width: 20px; height: 20px; }
    body.modal-open .contact-dock { visibility: hidden; }
    .contact-dock.is-hidden { transform: translateY(140%); visibility: hidden; }

    /* Hero */
    .structure-preview main > .hero.hero-dark { display: flex; flex-direction: column; padding: calc(24px + var(--header-h)) 0 8px; }
    .structure-preview .hero-dark .hero-panel, .structure-preview .hero-dark .structure-hero-bottom { display: contents; }
    .structure-preview .hero-dark :is(.section-label, .hero-headline, .structure-hero-bottom > p, .hero-actions, .hero-direct) { margin-inline: 20px; }
    .structure-preview .hero-dark .section-label { order: 1; margin-bottom: 12px; }
    .structure-preview .hero-headline { order: 2; line-height: 1.15; }
    .structure-preview .structure-hero-bottom > p { order: 3; margin-top: 14px; }
    .structure-preview .hero-dark .hero-actions { order: 4; display: grid; gap: 4px; margin-top: 24px; }
    .hero-actions .text-link { justify-self: start; }
    .structure-preview .hero-dark .hero-direct { order: 5; margin-top: 4px; }
    .hero-art { order: 6; position: relative; inset: auto; z-index: 0; aspect-ratio: 4/3; margin-top: 4px; }
    .hero-art img { object-position: 50% 63%; }

    /* Sections */
    .recognition-grid, .offer-grid, .alteration { grid-template-columns: minmax(0,1fr); }
    .recognition-grid { gap: 10px; margin-top: 32px; }
    .recognition-grid article { padding: 24px; }
    .recognition-grid h3 { margin-top: 20px; }
    #fit .structure-split { grid-template-columns: minmax(0,1fr); gap: 40px; }
    #fit .arch { max-width: 260px; aspect-ratio: 4/5; }
    .fit-facts > div { grid-template-columns: 84px minmax(0,1fr); gap: 14px; }
    .alteration { margin-top: 56px; }
    .alteration-photo img { min-height: 0; aspect-ratio: 4/3; }
    .alteration-copy { padding: 28px 22px 24px; }
    .structure-split { gap: 32px; }
    .offer-grid { gap: 10px; margin-top: 32px; }
    .offer { padding: 28px 24px; }
    .offer-type { margin-bottom: 28px; }
    .visit-grid { gap: 32px; margin-top: 32px; }
    .visit-address { padding: 28px 24px; }
    .visit-address h3 { font-size: 21px; }

    /* Catalogue: four categories always visible, 2 × 2 */
    .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
    .category-name { margin-top: 12px; font-size: 16px; }
    .category-more { margin-top: 4px; font-size: 14px; white-space: nowrap; }
    #catalog .contact-trigger { margin-top: 36px; }

    /* Workshop: no arch after arch — a plain rounded video card and a compact founder card. */
    .workshop-intro { gap: 12px; }
    .workshop-intro .video-frame.arch { aspect-ratio: 4/5; border-radius: var(--radius-inner); outline: 0; margin: 0; }
    .workshop-founder { background: var(--canvas); border-radius: var(--radius-inner); padding: 20px; }
    .workshop-founder figure { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 16px; align-items: center; }
    .workshop-founder .arch { width: 80px; aspect-ratio: 1/1; border-radius: 50%; outline: 0; margin: 0; }
    .workshop-founder figcaption { padding-top: 0; }
    .structure-preview .workshop-founder .contact-trigger { margin-top: 20px; }
    .workshop-gallery-heading { display: block; margin-top: 56px; }
    .workshop-gallery-heading p { margin-top: 6px; }
    .structure-preview .gallery-slide img { height: 300px; }

    /* Reviews and journal: horizontal carousels with a peek. */
    .structure-preview #reviews .reviews-grid, .structure-preview .journal-teasers { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
    .structure-preview #reviews .reviews-grid::-webkit-scrollbar, .structure-preview .journal-teasers::-webkit-scrollbar { display: none; }
    .structure-preview #reviews .review, .structure-preview .journal-teasers > * { flex: 0 0 86%; scroll-snap-align: start; }
    .structure-preview #reviews .large-description { margin-bottom: 32px; }

    /* Footer */
    .structure-preview .studio-footer { padding: 56px 0 32px; }
    .footer-grid { gap: 36px; }
    .footer-col nav { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .footer-legal { margin-top: 40px; flex-direction: column; gap: 8px; }

    /* Sheet */
    .choice-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); max-height: 90svh; border-radius: 24px 24px 0 0; }
    .choice-dialog[open] { animation: sheet-up .34s var(--ease); }
  }
  @keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .structure-preview * { scroll-behavior: auto; } .contact-dock, .structure-preview .site-header { transition: none; } .choice-dialog[open] { animation: none; } }

  /* Category pages: a short portfolio; every photo keeps its own proportions, nothing is cropped. */
  .structure-preview main > .category-page { padding-block: 48px 96px; }
  .back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; font: 500 var(--fs-small)/1 var(--sans); color: var(--secondary); }
  .back-link:hover { color: var(--ink); }
  .structure-preview .category-title { font-size: clamp(30px,3vw,44px); max-width: 18ch; margin: 0; }
  .category-page .structure-deck { max-width: 640px; margin-top: 20px; }
  .model-gallery { columns: 3 280px; column-gap: 24px; margin-top: 56px; }
  .model-gallery.is-few { columns: 2 320px; max-width: 960px; }
  .model-item { break-inside: avoid; margin-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 16px); }
  .model-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-inner); overflow: hidden; background: var(--canvas); cursor: zoom-in; }
  .model-zoom img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
  .model-zoom:hover img { transform: scale(1.02); }
  .model-angles { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font: 500 14px/1 var(--sans); color: var(--ink); }
  .model-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 14px; }
  .structure-preview .model-name { font: 400 18px/1.3 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin: 0; }
  .structure-preview .text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 500 var(--fs-small)/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
  .structure-preview .text-button:hover { text-decoration-thickness: 2px; }
  .full-catalog { margin-top: 32px; padding: 40px; border-radius: var(--radius-inner); background: var(--canvas); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
  .full-catalog h2 { font: 400 clamp(21px,1.8vw,26px)/1.2 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin: 0; max-width: 20ch; }
  .full-catalog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .structure-preview .full-catalog-actions .button { min-width: 0; }
  .full-catalog.is-general { padding: 24px 32px; }
  .structure-preview .full-catalog.is-general p { margin: 0; color: var(--secondary); }
  .category-talk .contact-trigger { margin-top: 40px; }
  .category-others { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
  .category-others span { font: 500 var(--fs-label)/1 var(--sans); color: var(--tertiary); margin-right: 8px; }
  .category-others a { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--fs-small)/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

  /* Photo viewer: the whole pair, as large as the screen allows. */
  .viewer-dialog { width: min(1100px, calc(100% - 32px)); height: fit-content; max-height: calc(100svh - 32px); margin: auto; padding: 24px 28px 28px; border: 0; border-radius: var(--radius); background: #fff; color: var(--ink); overflow: auto; }
  .viewer-dialog::backdrop { background: rgba(0,0,0,.6); }
  .viewer-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .viewer-head h2 { font: 400 20px/1.25 var(--heading); letter-spacing: .03em; text-transform: uppercase; margin: 6px 0 0; }
  .viewer-head h2:focus { outline: none; }
  .viewer-stage { display: grid; place-items: center; background: var(--canvas); border-radius: var(--radius-inner); overflow: hidden; }
  .viewer-stage img { display: block; width: 100%; height: auto; max-height: min(70svh, 760px); object-fit: contain; }
  .viewer-thumbs { display: flex; gap: 8px; margin-top: 12px; }
  .viewer-thumbs:empty { display: none; }
  .viewer-thumbs button { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--canvas); cursor: pointer; }
  .viewer-thumbs button[aria-current="true"] { border-color: var(--ink); }
  .viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .structure-preview .viewer-talk { margin-top: 20px; }

  @media (max-width: 700px) {
    .structure-preview main > .category-page { padding-block: 24px 64px; }
    .back-link { margin-bottom: 12px; }
    .structure-preview .category-title { font-size: clamp(25px,6.8vw,28px); }
    .model-gallery, .model-gallery.is-few { columns: 1; margin-top: 36px; }
    .model-item { margin-bottom: 32px; }
    .full-catalog { padding: 28px 24px; }
    .full-catalog-actions { width: 100%; }
    .structure-preview .full-catalog-actions .button { width: fit-content; }
    .full-catalog.is-general { padding: 20px 24px; }
    .viewer-dialog { width: 100%; max-width: 100%; max-height: 100svh; margin: auto 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
    .viewer-dialog[open] { animation: sheet-up .34s var(--ease); }
    .viewer-stage img { max-height: 62svh; }
  }
}

/* Roman headings use the supplied face without synthetic bold or italics.
   Unlayered so component font shorthands retain their size and line-height. */
.structure-preview :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
}

/* Owner-approved typography: display headings match the hero; explanatory copy is 14px Montserrat Light. */
.structure-preview main :is(p:not(.section-label):not(.article-meta):not(.offer-type):not(.offer-price), dd, blockquote, .large-description) {
  font-family: var(--copy);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.structure-preview .wordmark { font-family: var(--sans); font-style: normal; }

/* The menu close control stays frameless, including Safari's initial dialog focus. */
.structure-preview #site-menu .close-button { outline: none; }
.structure-preview #site-menu .close-button:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Use the Light cut throughout, preserving heading typography. */
.structure-preview :not(:is(h1,h2,h3,h4,h5,h6)):not(:is(h1,h2,h3,h4,h5,h6) *) { font-weight: 300 !important; }