@font-face {
  font-family: "Sculptwerk Manrope";
  src: url("/assets/fonts/Manrope-Variable.woff2?v=91e63810abd5") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* One brand, one palette. This file declared --paper #f5f1eb, --ink
   #1c1916 and --ember #ca5637 while figuren.css declared --bg #f6f4f1,
   --ink #1d1a17 and --accent #d3603e: two papers, two inks and two
   terracottas one click apart, and the shift was perceptible moving
   between the pages (UX review F21). The values below are figuren.css's,
   spelled once here under the names this page already uses, so no rule in
   this file had to change to adopt them. The consumer page keeps its own
   declaration for now because it is a single-stylesheet load by design;
   a genuinely shared token file is the follow-up, and the studio's third
   set is the studio lane's to fold in.

   --serif is gone with it. Six rules declared it and two later rules
   killed the only two that were visible, three of the remaining four
   selectors named markup that does not exist, and the one surviving use
   was the FAQ plus glyph, which is why that glyph looked like a different
   family from everything around it (UX review F24). Decided: the sans. */
:root {
  --paper: #f6f4f1;
  --paper-warm: #ece7e0;
  --surface: #ffffff;
  --ink: #1d1a17;
  /* One shade darker than the consumer page's --dim. That value is
     4.996:1 on the paper, which passes, but the process band is a warmer
     #ebe6df where the same ink measures 4.41:1 and carried the six
     smallest labels in the edition rail. #68613a would still fail there;
     #68615a is 4.909:1 on the band and 5.551:1 on the paper. */
  --muted: #68615a;
  --line: rgba(29, 26, 23, 0.12);
  --line-soft: rgba(29, 26, 23, 0.07);
  --ember: #d3603e;
  --ember-dark: #b8402c;
  --cream: #fff8f3;
  --sage: #586659;
  --sans: "Sculptwerk Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --max: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* overflow-x: clip stood here and hid whatever overflowed rather than
   fixing it (UX review F30). The two candidates were the rotated
   dedication plaque, which is now a card under the picture, and the
   edition-grid scale transform, which is gone with the four stage
   pictures. Both are fixed, so the clip is not needed to hide them; it
   stays off and the browser acceptance run asserts zero horizontal
   overflow at 1440, 390, 375 and 320. */
html { scroll-behavior: smooth; background: var(--paper); }
body { color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
::selection { background: rgba(202, 86, 55, 0.2); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; z-index: 100; top: .75rem; left: .75rem;
  padding: .7rem 1rem; transform: translateY(-160%);
  background: var(--ink); color: white; border-radius: .25rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: none; }

.site-head {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  min-height: 72px; padding: .75rem var(--gutter);
  border-bottom: 1px solid transparent; background: rgba(245, 241, 235, .93);
  backdrop-filter: blur(15px);
}
.site-head.scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(28,25,22,.04); }
.brand { display: inline-flex; align-items: center; gap: .62rem; font-weight: 760; font-size: 1.25rem; letter-spacing: -.03em; text-decoration: none; }
.brand img { width: 2rem; height: 2rem; }
.brand span span { color: var(--ember-dark); }
.site-head nav { justify-self: center; display: flex; gap: clamp(.8rem, 2vw, 1.8rem); }
.site-head nav a, .head-link { color: var(--muted); font-size: .86rem; font-weight: 600; text-decoration: none; }
.site-head nav a:hover, .head-link:hover { color: var(--ink); }
.head-link { font-size: .78rem; padding: .62rem .85rem; border: 1px solid var(--line); border-radius: 999px; }

.hero {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
  max-width: var(--max); min-height: min(760px, calc(100vh - 72px));
  margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.8rem) var(--gutter);
}
.eyebrow { margin-bottom: 1rem; color: var(--ember-dark); font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { max-width: 11.5ch; font-size: clamp(3.2rem, 5.7vw, 5.8rem); font-weight: 650; line-height: .91; letter-spacing: -.07em; }
.hero h1 em { color: var(--ember-dark); font-weight: 400; letter-spacing: -.05em; }
.hero-lead { max-width: 49ch; margin-top: 2rem; font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.45; }
.hero-detail { max-width: 59ch; margin-top: 1.1rem; color: var(--muted); font-size: .88rem; }
.hero-actions { display: flex; gap: 1.15rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .78rem 1.12rem; border: 1px solid transparent; border-radius: .3rem; font-weight: 720; line-height: 1.2; text-decoration: none; }
.button-primary { color: white; background: var(--ember-dark); }
.button-primary:hover { background: #842d20; }
.button-secondary { background: transparent; border-color: var(--line); }
.button-secondary:hover { background: var(--line-soft); }
.button-light { color: var(--ink); background: var(--cream); }
.button:disabled { cursor: wait; opacity: .7; }
.text-link { font-size: .92rem; font-weight: 650; text-underline-offset: .25rem; }

.edition-stage { min-width: 0; }
.edition-grid { position: relative; height: min(640px, 62vw); max-height: 640px; min-height: 490px; overflow: hidden; background: #ded3c7; border-radius: 1.2rem; box-shadow: 0 35px 80px rgba(36,28,21,.16); }
.edition-grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 44%), linear-gradient(0deg, rgba(28,25,22,.12), transparent 30%); }
.business-hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.edition-stage figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .85rem; color: var(--muted); font-size: .72rem; }
.edition-stage figcaption span { flex: none; color: var(--ember-dark); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }


.possibilities { padding: clamp(5rem, 9vw, 9rem) var(--gutter); background: var(--surface); }
.section-intro { display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; max-width: var(--max); margin: 0 auto clamp(4rem, 7vw, 7rem); }
.section-intro h2, .process h2, .fit h2, .enquiry h2, .faq h2 { font-size: clamp(2.25rem, 4.4vw, 4.4rem); font-weight: 560; line-height: 1.02; letter-spacing: -.055em; }
.section-intro > p:last-child { color: var(--muted); }

.process { padding: clamp(5rem, 9vw, 9rem) var(--gutter); color: white; background: var(--ink); }
.process-heading { display: grid; grid-template-columns: .7fr 2.3fr; gap: clamp(1.5rem, 4vw, 4rem); max-width: var(--max); margin: 0 auto clamp(4rem, 7vw, 7rem); }
.process .eyebrow { color: #ee9b82; }
.process h2 { max-width: 18ch; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto; list-style: none; border-top: 1px solid rgba(255,255,255,.22); }
.process-steps li { min-height: 320px; padding: 1.5rem clamp(1rem, 2vw, 1.7rem) 1rem; border-right: 1px solid rgba(255,255,255,.15); }
.process-steps li:first-child { padding-left: 0; }
.process-steps li:last-child { border-right: 0; }
.process-steps span { color: #ee9b82; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.process-steps h3 { margin-top: 4rem; font-size: 1.38rem; line-height: 1.15; }
.process-steps p { margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .88rem; }

.fit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: clamp(3rem, 8vw, 8rem); max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) var(--gutter); }
.fit-copy h2 { max-width: 12ch; }
.fit-copy > p:last-child { max-width: 57ch; margin-top: 1.5rem; color: var(--muted); }

/* Every track is minmax(0, ...). A grid track sized 1fr or .72fr keeps an
   automatic minimum of the item's min-content, so one long word in the
   enquiry heading held the whole section 373 px wide inside a 288 px box
   and pushed the form, the only conversion path on this page, off the
   right edge below 390 px (four-eyes B1). The floor was the second half
   of it: minmax(300px, .72fr) cannot shrink under 300 px whatever the
   viewport is. */
.enquiry { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(5rem, 9vw, 9rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); background: var(--surface); }
.enquiry-intro { min-width: 0; align-self: start; position: sticky; top: 110px; }
.enquiry-intro h2 { max-width: 12ch; }
.enquiry-intro > p:not(.eyebrow) { max-width: 48ch; margin-top: 1.5rem; color: var(--muted); }
.form-shell { min-width: 0; padding: clamp(1.4rem, 4vw, 3.5rem); border: 1px solid var(--line); background: var(--paper); }
fieldset { border: 0; }
fieldset + fieldset { margin-top: 2.5rem; }
legend { width: 100%; margin-bottom: 1.35rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); font-size: 1.15rem; font-weight: 720; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
label { display: block; margin-bottom: .42rem; font-size: .82rem; font-weight: 700; }
label span { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 48px; padding: .78rem .85rem; border: 1px solid rgba(28,25,22,.28); border-radius: .24rem; background: var(--surface); }
textarea { min-height: 150px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: rgba(28,25,22,.5); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: #a92626; box-shadow: 0 0 0 2px rgba(169,38,38,.08); }
.field-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; color: var(--muted); font-size: .7rem; }
.field-meta span:first-child { max-width: 55ch; }
.field-meta span:last-child { flex: none; }
.privacy-check { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; margin-top: 2.2rem; font-weight: 500; line-height: 1.45; }
.privacy-check input { width: 1.2rem; min-height: 1.2rem; margin-top: .12rem; accent-color: var(--ember-dark); }
.privacy-check a { text-underline-offset: .2rem; }
.submit-button { width: 100%; margin-top: 1.5rem; }
.form-footnote { margin-top: .7rem; color: var(--muted); font-size: .72rem; text-align: center; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; min-height: 1px !important; opacity: 0 !important; }
.form-error { margin-bottom: 1.5rem; padding: 1rem; border-left: 4px solid #a92626; background: #fff1ef; }
.form-error p { margin-top: .25rem; color: #7f1c1c; font-size: .84rem; }
.conflict-action { margin-top: .9rem; border-color: rgba(127,28,28,.3); }
.form-success { min-height: 520px; padding: clamp(2rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem); }
.form-success h3 { max-width: 17ch; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.05em; }
.form-success > p:not(.eyebrow) { margin-top: 1.2rem; color: var(--muted); }
.form-success .button { margin-top: 2rem; }
.reference-code { display: inline-block; padding: .6rem .75rem; color: var(--ink); background: white; border: 1px solid var(--line); font-family: var(--mono); font-weight: 700; letter-spacing: .05em; }
.noscript-note { margin-top: 1rem; padding: 1rem; background: #fff4d9; font-size: .82rem; }

.faq { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) var(--gutter); }
.faq h2 { max-width: 12ch; }
.faq-list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.4rem 2.4rem 1.4rem 0; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; font-size: 1.5rem; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 66ch; padding: 0 2rem 1.6rem 0; color: var(--muted); }

.closing { padding: clamp(5rem, 10vw, 10rem) var(--gutter); color: white; background: var(--ember-dark); text-align: center; }
.closing .eyebrow { color: #ffd5c8; }
.closing h2 { font-size: clamp(2.7rem, 6.5vw, 6.5rem); font-weight: 400; line-height: .97; letter-spacing: -.055em; }
.closing .button { margin-top: 2.5rem; }

.site-foot { display: grid; grid-template-columns: .8fr 1.2fr 1.1fr; gap: 2rem; align-items: start; padding: 3rem var(--gutter); color: rgba(255,255,255,.62); background: var(--ink); font-size: .78rem; }
.foot-brand { color: white; }
.site-foot nav { display: flex; justify-content: flex-end; gap: 1.2rem; flex-wrap: wrap; }
.site-foot a:hover { color: white; }

@media (hover: hover) {
}

@media (max-width: 980px) {
  .site-head { grid-template-columns: auto 1fr; }
  .site-head nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; order: 3; overflow-x: auto; margin: .6rem calc(var(--gutter) * -1) -.75rem; padding: .65rem var(--gutter) .7rem; border-top: 1px solid var(--line-soft); white-space: nowrap; scrollbar-width: none; }
  .site-head nav::-webkit-scrollbar { display: none; }
  .head-link { justify-self: end; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 720px; }
  .edition-grid { height: 680px; }
  .section-intro { grid-template-columns: 1fr 2fr; }
  .section-intro > p:last-child { grid-column: 2; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps li { min-height: 260px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .process-steps li:nth-child(2) { border-right: 0; }
  .process-steps li:nth-child(3) { padding-left: 0; }
  .fit { grid-template-columns: 1fr; }
  .fit-copy h2 { max-width: 15ch; }
  .enquiry { grid-template-columns: minmax(0, 1fr); }
  .enquiry-intro { position: static; }
  .enquiry-intro h2 { max-width: 16ch; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { max-width: 18ch; }
}

@media (max-width: 650px) {
  body { font-size: .96rem; }
  .site-head { min-width: 0; min-height: 64px; }
  .site-head > * { min-width: 0; }
  .brand { font-size: 1.08rem; }
  .brand img { width: 1.75rem; height: 1.75rem; }
  .head-link { padding: .55rem .68rem; font-size: .7rem; white-space: nowrap; }
  .hero { display: grid; gap: 0; padding-top: 2.2rem; }
  .hero-copy { display: contents; }
  .hero h1 { max-width: 100%; font-size: clamp(2.7rem, 12vw, 3.15rem); }
  .hero h1 em { overflow-wrap: anywhere; }
  .hero-lead { margin-top: 1.5rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .text-link { padding: .6rem 0; text-align: center; }
  .edition-stage {
    grid-row: 3;
    position: static;
    width: 100%;
    margin-top: 1.35rem;
  }
  .edition-grid { height: 175px; min-height: 0; border-radius: .55rem; }
  .business-hero-image { object-position: 60% 58%; }
  .edition-stage figcaption { display: block; }
  .edition-stage figcaption { margin-top: .45rem; font-size: .62rem; line-height: 1.35; }
  .edition-stage figcaption span { display: inline; margin-right: .35rem; }
  .section-intro { display: block; }
  .section-intro h2 { margin-bottom: 1.5rem; }
  .process-heading { display: block; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li, .process-steps li:nth-child(3) { min-height: 0; padding: 1.5rem 0 2rem; border-right: 0; }
  .process-steps h3 { margin-top: 2rem; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .form-shell { margin-inline: calc(var(--gutter) * -.4); padding: 1.2rem; }
  .field-meta { display: block; }
  .field-meta span:last-child { display: block; margin-top: .2rem; }
  .site-foot { grid-template-columns: 1fr; }
  .site-foot nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Sculptwerk: an object-led invitation, with a dedication the visitor can try. */
:root { --paper:#f6f4f1; --surface:#fff; --paper-warm:#ece7e0; --ember:#d3603e; --ember-dark:#a43e2b; --max:1360px; }
.hero { grid-template-columns: .95fr 1.05fr; gap:clamp(2rem,4vw,4rem); min-height:690px; padding-top:3rem; padding-bottom:4rem; }
.hero h1 { max-width:none; font-size:clamp(3.5rem,6.3vw,6.5rem); line-height:1.01; font-weight:650; letter-spacing:-.065em; }
.hero h1 em { font:inherit; color:var(--ember-dark); }
.hero-lead { font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:34ch; line-height:1.65; margin-top:1.8rem; }
.hero-detail { display:flex; align-items:center; gap:.8rem; margin-top:2.1rem; font-size:.8rem; }
.swiss-cross { display:grid; place-items:center; width:2.7rem; height:2.7rem; border:1px solid var(--ember-dark); border-radius:50%; color:var(--ember-dark); font-size:1.6rem; }
.button { gap:1.2rem; border-radius:5px; padding:.95rem 1.25rem; }
.button-primary { background:var(--ink); }
.button-primary:hover { background:var(--ember-dark); }
.edition-grid { height:590px; min-height:0; max-height:none; border-radius:4px; overflow:visible; background:transparent; box-shadow:none; }
.edition-grid::after { display:none; }
.business-hero-image { border-radius:4px; object-position:54% center; transform:translateY(var(--scene-y,0px)); }
.edition-dedication { position:absolute; left:-2rem; bottom:3rem; z-index:2; width:300px; padding:1.4rem 1.6rem; background:#fffdf9; box-shadow:0 18px 45px #1c191621; transform:translateY(calc(var(--scene-y,0px) * -.65)) rotate(-4deg); }
.edition-dedication span { display:block; margin-bottom:.65rem; font-size:.67rem; color:var(--muted); letter-spacing:.015em; }
.edition-dedication strong { font-size:1.22rem; line-height:1.45; letter-spacing:-.025em; font-weight:600; }
.edition-stage figcaption { display:block; margin-top:1.25rem; font-size:.73rem; }
.possibilities { padding-top:6rem; padding-bottom:6rem; }
.section-intro { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:3.5rem; }
.section-intro h2 { max-width:20ch; font-size:clamp(2.5rem,4.2vw,4.1rem); line-height:1.1; }
.section-intro > p:last-child { max-width:29ch; padding-bottom:.3rem; }
.occasion-studio { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.occasion-menu { border-top:1px solid var(--line); }
.occasion-choice { display:block; width:100%; position:relative; background:transparent; text-align:left; border:0; border-bottom:1px solid var(--line); padding:1.8rem 2rem 1.8rem 0; }
.occasion-choice > span { display:block; font-size:.78rem; color:var(--muted); margin-bottom:.7rem; }
.occasion-choice strong { display:block; font-weight:550; font-size:clamp(1.65rem,2.55vw,2.6rem); line-height:1.12; letter-spacing:-.045em; }
.occasion-choice small { display:block; color:var(--muted); max-width:38ch; line-height:1.6; font-size:.82rem; margin-top:.85rem; }
.occasion-choice i { position:absolute; right:0; top:2.5rem; font-style:normal; font-size:1.8rem; opacity:0; }
.occasion-choice.is-active strong,.occasion-choice.is-active i { color:var(--ember-dark); }
.occasion-choice.is-active i { opacity:1; }
.occasion-choice:hover strong { color:var(--ember-dark); }
.occasion-object { min-width:0; }
.dedication-stage { position:relative; padding-bottom:2rem; }
.dedication-stage img { width:100%; height:460px; object-fit:cover; border-radius:4px; }
.dedication-plaque { position:absolute; left:8%; bottom:0; display:grid; gap:.75rem; width:84%; padding:1.4rem 1.75rem; color:#fff8f3; background:#302824; box-shadow:0 12px 22px #1c191629; transform:rotate(-2deg); text-align:center; }
.dedication-plaque > span { font-size:.62rem; color:#daccc0; letter-spacing:.07em; }
.dedication-plaque > strong { font-size:clamp(1.1rem,2vw,1.6rem); font-weight:550; line-height:1.3; overflow-wrap:anywhere; }
.dedication-control { margin-top:2rem; }
.dedication-control label { font-size:.85rem; font-weight:650; }
.dedication-control > div { position:relative; }
.dedication-control input { padding-right:2.5rem; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; padding-left:0; }
.dedication-control > div > span { position:absolute; right:0; top:.8rem; color:var(--ember-dark); }
.dedication-control p { margin-top:.5rem; font-size:.69rem; color:var(--muted); }
.occasion-enquire { display:inline-block; margin-top:1.2rem; padding:.4rem 0; font-size:.82rem; }
.process { background:#ebe6df; color:var(--ink); padding-top:5rem; padding-bottom:4.5rem; }
.process-heading { display:block; margin-bottom:3rem; }
.process .eyebrow { color:var(--ember-dark); }
.process h2 { max-width:24ch; font-size:clamp(2.5rem,4.2vw,4rem); line-height:1.1; }
.process-steps { gap:1.5rem; border-top:none; }
.process-steps li { min-height:0; border:0; border-top:1px solid #aca297; padding:1.3rem 0 0; position:relative; }
.process-steps li::before { content:''; position:absolute; top:-2px; left:0; width:100%; height:3px; background:var(--ember-dark); transform:scaleX(0); transform-origin:left; transition:transform .7s ease; }
.process-steps li.is-seen::before { transform:scaleX(1); }
.process-steps li:nth-child(2)::before { transition-delay:.15s; }.process-steps li:nth-child(3)::before { transition-delay:.3s; }.process-steps li:nth-child(4)::before { transition-delay:.45s; }
.process-steps span { color:var(--ember-dark); text-transform:none; font:.75rem var(--sans); letter-spacing:0; }
.process-steps h3 { margin-top:2.3rem; font-size:1.35rem; font-weight:600; letter-spacing:-.035em; }
.process-steps p { color:var(--muted); line-height:1.6; max-width:28ch; }
.fit { grid-template-columns:1.2fr .8fr; padding-top:5rem; padding-bottom:5rem; gap:clamp(2rem,7vw,7rem); align-items:center; }
.fit-copy h2 { max-width:23ch; font-size:clamp(2.2rem,3.2vw,3rem); line-height:1.15; }
.fit-copy > p:last-child { font-size:.9rem; max-width:50ch; }
.fit-facts { display:grid; gap:1.2rem; font-size:.95rem; }
.fit-facts > span::before { content:'✓'; margin-right:1rem; color:var(--ember-dark); }
.fit-facts .text-link { font-size:.8rem; margin-top:.5rem; }
.enquiry { padding-top:5rem; padding-bottom:5rem; gap:clamp(2rem,6vw,5rem); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.enquiry-intro h2 { max-width:none; line-height:1.1; font-size:clamp(2.5rem,4.5vw,4.4rem); }
.enquiry-intro > p:not(.eyebrow) { font-size:1rem; max-width:32ch; }
.enquiry-assurance { border-top:1px solid var(--line); margin-top:3rem; padding-top:1.5rem; }
.enquiry-assurance > span { display:block; color:var(--ember-dark); font-size:2rem; line-height:1; margin-bottom:1rem; }
.enquiry-assurance strong { font-size:1.35rem; font-weight:550; line-height:1.4; letter-spacing:-.02em; }
.enquiry-assurance p { color:var(--muted); font-size:.82rem; margin-top:.8rem; }
.form-shell { background:var(--paper); border:0; border-radius:5px; padding:clamp(1.25rem,3vw,2.5rem); }
legend { font-size:1rem; }
input,select,textarea { border-color:#c7beb5; border-radius:3px; }
textarea { min-height:120px; }
.faq { padding-top:4rem; padding-bottom:4rem; }
.faq h2 { font-size:clamp(2rem,3vw,3rem); }
.closing { background:var(--ink); padding:4rem var(--gutter); }
.closing h2 { font-family:var(--sans); font-size:clamp(2.3rem,4.5vw,4.5rem); font-weight:550; line-height:1.15; letter-spacing:-.05em; }
.closing h2 span { color:#d4b9a8; }
@media (max-width:900px) {
 .hero { min-height:0; grid-template-columns:1fr 1fr; gap:2rem; }.hero h1 { font-size:4rem; }.edition-grid{height:500px;}.edition-dedication{left:-1rem;width:255px;}
 .occasion-studio{gap:2rem;}.dedication-stage img{height:400px;}.enquiry{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem;}
}
@media (max-width:700px) {
 .hero{grid-template-columns:1fr;padding-top:2.5rem;padding-bottom:3rem;gap:2.5rem;}.hero h1{font-size:clamp(3.1rem,11.5vw,4.5rem);max-width:none;}.hero-lead{margin-top:1.4rem;max-width:35ch;}.hero-actions{margin-top:1.5rem;gap:1rem;}.hero-detail{margin-top:1.5rem;}.edition-grid{height:380px;}.business-hero-image{object-position:center center;}.edition-dedication{left:.8rem;bottom:1.3rem;width:245px;padding:1rem 1.2rem;}.edition-dedication strong{font-size:1.1rem;}.edition-stage figcaption{margin-top:1rem;}
 .possibilities{padding-top:3rem;padding-bottom:3rem;}.section-intro{display:block;margin-bottom:2rem;}.section-intro h2{font-size:2.5rem;}.section-intro > p:last-child{margin-top:1rem;font-size:.9rem;}.occasion-studio{grid-template-columns:1fr;gap:2rem;}.occasion-choice{padding:1.3rem 2rem 1.3rem 0;}.occasion-choice strong{font-size:1.5rem;}.occasion-choice strong br{display:none;}.occasion-choice small{margin-top:.5rem;}.occasion-choice i{top:2rem;}.dedication-stage img{height:390px;}.dedication-plaque{padding:1.2rem;}.dedication-control{margin-top:1.5rem;}
 .process{padding:3rem var(--gutter);}.process h2{font-size:2.4rem;}.process-steps{grid-template-columns:1fr 1fr;gap:2rem 1.2rem;}.process-steps li{padding:1rem 0 0;min-height:0;}.process-steps h3{margin-top:1.3rem;font-size:1.2rem;}.process-steps p{font-size:.8rem;}
 .fit{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:3rem;padding-bottom:3rem;}.enquiry{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:3rem;padding-bottom:3rem;}.enquiry-intro{position:static;}
 /* Fluid, because 2.8rem made "Gespraech." 373 px wide and no track can
    hold that in a 288 px box. The cap keeps the 700 px rendering. */
 .enquiry-intro h2{font-size:clamp(2rem,8.5vw,2.8rem);}.enquiry-intro h2 br:last-child{display:none;}.enquiry-assurance{display:none;}.field-grid{gap:1rem;}.faq{padding-top:3rem;padding-bottom:3rem;}.closing{padding-top:3rem;padding-bottom:3rem;}
}
@media (prefers-reduced-motion:reduce) {
 .business-hero-image{transform:none;}.edition-dedication{transform:rotate(-4deg);}.process-steps li::before{transform:scaleX(1);transition:none;}
}
.edition-path { max-width:var(--max); margin:0 auto 2.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
.edition-path-image { position:relative; height:300px; overflow:hidden; background:#ded4c8; }
.edition-path-image img { width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform:scale(1.12);transition:transform .7s ease; }
.edition-path-image[data-stage="3"] img { transform:scale(1); }
.edition-path-caption { position:absolute; bottom:1rem;left:1rem;right:1rem; width:fit-content; padding:.65rem .8rem; background:#fffdf9; font-size:.8rem; }
.edition-path-controls { display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center; }
.edition-path-controls > span { color:#8b7d70; }
.edition-path-controls > span:nth-of-type(2) { display:none; }
.edition-path-controls button { padding:1.2rem .8rem; text-align:center; border:1px solid #b5a89a; background:transparent; border-radius:3px; font-size:1.15rem; }
.edition-path-controls button.is-active { color:white;background:var(--ink);border-color:var(--ink); }
.process-steps li.is-current h3 { color:var(--ember-dark); }
@media(max-width:700px){
 .hero{gap:1rem;}.hero-copy{display:contents;}.hero .eyebrow{margin-bottom:.5rem;}.hero h1{grid-row:2;font-size:3rem;}.hero-lead{grid-row:3;margin-top:0;font-size:1rem;line-height:1.5;}.hero-actions{grid-row:4;flex-direction:row;align-items:center;gap:1rem;margin-top:.3rem;}.hero-actions .text-link{font-size:.8rem;}.hero-actions .button{padding:.85rem 1rem;font-size:.86rem;}.edition-stage{grid-row:5;margin-top:.7rem;}.edition-grid{height:300px;}.hero-detail{grid-row:6;margin-top:.3rem;}.edition-path{grid-template-columns:1fr;gap:1rem;}.edition-path-image{height:240px;}.edition-path-controls{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:.3rem;}.edition-path-controls button{font-size:.72rem;padding:.8rem .2rem;min-height:44px;}.edition-path-controls > span:nth-of-type(2){display:block;}.dedication-plaque{left:10%;width:80%;}.site-foot>*{min-width:0;}
}
@media(prefers-reduced-motion:reduce){.edition-path-image img{transform:none;transition:none;}}
fieldset { min-width:0; }
@media(max-width:700px){.form-shell{margin-inline:0;width:100%;}}
/* One object and one decision rail. Each button carries its explanation. */
.edition-path { grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); margin-bottom:0; }
.edition-path-image { height:520px; }
.process-steps.edition-path-controls { display:grid;grid-template-columns:1fr;gap:0;width:100%;margin:0; }
.edition-path-controls li { padding:0; min-height:0; border-top:1px solid #c5b9ac; }
.edition-path-controls li::before { display:none; }
.edition-path-controls li:last-child { border-bottom:1px solid #c5b9ac; }
.edition-path-controls button { display:block; width:100%; padding:1.2rem 1rem; border:0; border-left:3px solid transparent; border-radius:0; background:transparent; text-align:left; }
.edition-path-controls button.is-active { background:#ffffff60; color:var(--ink); border-color:var(--ember-dark); }
.edition-path-controls button > span { display:block;color:var(--muted);font-size:.7rem;margin-bottom:.45rem; }
.edition-path-controls button > strong { display:block;font-size:1.4rem;font-weight:600;letter-spacing:-.035em;line-height:1.2; }
.edition-path-controls button > small { display:block;font-size:.8rem;line-height:1.5;color:var(--muted);margin-top:.45rem;max-width:42ch; }
.edition-path-controls button.is-active > strong { color:var(--ember-dark); }
.swiss-cross { color:#fff; background:var(--ember-dark); }
@media(max-width:700px){.edition-path{grid-template-columns:1fr;gap:1.4rem;}.edition-path-image{height:300px;}.edition-path-controls li,.edition-path-controls li:nth-child(3){padding:0;}.edition-path-controls button{padding:1.1rem .85rem;}.edition-path-controls button>strong{font-size:1.22rem;}.edition-path-caption{font-size:.73rem;}.edition-path-controls button>small{font-size:.78rem;}}

/* --- 10.09.2026 audit fixes ------------------------------------------- */

/* The sprite is a definitions-only SVG; it must take no space. Sized here
   rather than in a style attribute, because the CSP is style-src 'self'
   with no unsafe-inline and it blocks one. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.05em; height: 1.05em; flex: none;
  vertical-align: -0.15em;
}

.occasion-arrow {
  position: absolute; right: 0; top: 2.5rem;
  width: 1.5rem; height: 1.5rem; opacity: 0;
}
.occasion-choice.is-active .occasion-arrow { opacity: 1; color: var(--ember-dark); }

/* flex-wrap, because justify-content: flex-end on a nowrap line that is
   too narrow pushes the overflow out of the start edge, which is the
   brand's side: at 320 and 360 px the two links sat under the wordmark
   and the wordmark painted over "Anmelden" (four-eyes B1). Wrapping keeps
   every line inside the track whatever the labels grow to. */
.head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.7rem, 1.6vw, 1.2rem);
}
.head-signin { color: var(--muted); text-decoration: none; }
.head-signin:hover { color: var(--ink); }

/* On a phone the three-column header collapses its flexible middle track
   to nothing and the sign-in butts straight against the wordmark. Two
   named rows instead: brand and actions across the top, the four section
   links under them. */
@media (max-width: 780px) {
  .site-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand actions" "nav nav";
    row-gap: .55rem;
    column-gap: 1rem;
  }
  .site-head .brand { grid-area: brand; }
  .site-head nav { grid-area: nav; justify-self: start; flex-wrap: wrap; }
  .head-actions { grid-area: actions; }
}

/* The plaque covered the chin and shoulders of the object it was
   dedicating, and the rotation cost legibility for nothing. It is a
   full-width card under the picture now, same ground, same type sizes
   (UX review F12). Out of the image, the rotation also stops being one of
   the two things that could overflow the document horizontally (F30). */
.edition-dedication {
  position: static; width: auto; margin-top: 1rem;
  padding: 1.15rem 1.4rem; background: var(--surface);
  box-shadow: 0 10px 30px rgba(29,26,23,.10); transform: none;
  border-radius: 4px;
}
.edition-dedication span { display: block; margin-bottom: .55rem; font-size: .78rem; color: var(--muted); }
.edition-dedication strong { font-size: 1.18rem; line-height: 1.45; letter-spacing: -.025em; font-weight: 600; }

/* The rightmost figure of the edition row used to be cut vertically two
   centimetres from its edge, which reads as a mistake rather than as a
   crop (UX review F17). The bust hero has one subject and no row to slice,
   and the frame keeps the plinth and the desk it stands on. */
.edition-grid { height: 560px; min-height: 0; max-height: none; overflow: hidden; border-radius: 4px; background: var(--paper-warm); box-shadow: none; }
.edition-grid::after { display: none; }
.edition-grid picture { display: block; width: 100%; height: 100%; }
.business-hero-image { object-position: 50% 46%; transform: none; }

/* The dedication plaque under the occasion picture, same treatment. */
.dedication-plaque {
  position: static; width: auto; transform: none;
  margin-top: 1rem; text-align: left; border-radius: 4px;
}
.dedication-stage { padding-bottom: 0; }
.dedication-plaque > span { font-size: .72rem; }

/* One idea holds the edition, and now the section shows one: the copy and
   the three facts stand in one column, the picture beside them. */
.fit {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy media" "facts media";
  align-content: center;
  align-items: start;
  row-gap: 2rem;
}
.fit-copy { grid-area: copy; }
.fit-facts { grid-area: facts; align-self: start; }
.fit-media { grid-area: media; align-self: center; min-width: 0; margin: 0; }
.fit-media picture { display: block; }
.fit-media img { width: 100%; height: auto; border-radius: 4px; }

@media (max-width: 900px) {
  .fit {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "media" "facts";
  }
}

/* Nothing under 12 px, and the caption that carried the smallest type on
   the page was the legal one (UX review F14, perf audit F13). */
.edition-stage figcaption,
.dedication-plaque > span,
.dedication-control p,
.form-footnote,
#dedication-hint,
#brief-help { font-size: .78rem; }

/* #a43e2b on #1c1916 measured 2.75:1, under the 3:1 large-text floor
   (perf audit F13). The lighter ember on the same ground is 4.59:1. */
.site-foot .brand span span { color: var(--ember); }

.field-error {
  margin-top: .4rem;
  color: var(--ember-dark);
  font-size: .8rem;
  font-weight: 600;
}

/* The border used to come from :user-invalid, which the browser sets while
   it is the one validating. business.js validates now, so the mark hangs
   off the attribute the script writes and the one a screen reader reads
   are the same fact. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #a92626;
  box-shadow: 0 0 0 2px rgba(169, 38, 38, .08);
}

@media (max-width: 700px) {
  /* 44 by 44 is the floor; the header links measured 21 px tall, and the
     four-eyes added the wordmark at 33. */
  .site-head nav a, .head-link, .head-signin, .text-link, .site-foot nav a,
  .site-head .brand {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* A 19 px checkbox is under the WCAG 2.5.8 minimum of 24 by 24. */
  .privacy-check input[type="checkbox"] { width: 24px; height: 24px; }
  .edition-grid { height: 320px; }
  .edition-dedication { margin-top: .8rem; padding: .95rem 1.1rem; }
  .edition-dedication strong { font-size: 1.05rem; }
}

/* Under 380 px the header row holds the wordmark and two links in 288 px
   of content box and the second link has to go. "Anmelden" stays because
   it is the one the returning customer needs; the cross-link to the
   consumer page keeps its place in the footer nav of this same page, so
   nothing becomes unreachable. */
@media (max-width: 379px) {
  .head-actions .head-link { display: none; }
}

/* The same rule the consumer page took for UX F09, mirrored here. The
   four section links were 67 px of a 142 px header at 390 and 123 px of a
   199 px header at 320: a third of the first fold on a phone, spent on
   anchors into a page the visitor is about to scroll anyway. The sections
   keep their ids, the hero action still points at the enquiry, and the
   footer nav carries the cross-page links. */
@media (max-width: 860px) {
  .site-head nav { display: none; }
}

/* Ad and anchor landings (?anlass=pensionierung, #pensionierung) stop below
   the sticky header, which is about 78 px tall, instead of under it. */
.occasion-choice, .occasion-object, .occasion-studio { scroll-margin-top: 96px; }

/* --- phone pass, 08.10.2026 ------------------------------------------------------------- */

/* SD reviewed the site on a phone on 08.10.2026. Each rule below fixes a
   defect a phone audit measured at 320 to 430 and 844x390, and was
   measured again injected into the page before it was written here. */

/* Every field computed to 15.36 px, and an iPhone zooms into any focused
   field under 16 px and stays zoomed. */
input, select, textarea { font-size: max(16px, 1rem); }

/* The sticky header hid what an anchor or a focused error jumped to:
   after «Projekt besprechen» the eyebrow sat under it. Offsets on the
   targets themselves, so the occasion landing keeps its own 96 px. */
#moeglichkeiten, #prozess, #rahmen, #anfrage, .form-error { scroll-margin-top: 5.5rem; }

@media (max-width: 860px) {
  /* The nav row is hidden below 860 px but its grid row and gap stayed,
     which made the header 20 px taller than its content. */
  .site-head {
    grid-template-areas: "brand actions";
    grid-template-rows: auto;
    row-gap: 0;
    min-height: 0;
    padding-block: 0.4rem;
  }
  #moeglichkeiten, #prozess, #rahmen, #anfrage, .form-error { scroll-margin-top: 4.75rem; }
}

/* The FAQ plus sat below its question line. */
.faq summary::after { top: 50%; transform: translateY(-50%); line-height: 1; }

@media (max-width: 700px) {
  /* Three competing rules left the H1 at 48 px on every phone: five
     lines at 320. The line breaks are for wide screens; on a phone the
     heading balances itself. */
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); letter-spacing: -0.04em; text-wrap: balance; }
  .hero h1 br,
  .section-intro h2 br,
  .process h2 br,
  .fit h2 br,
  .enquiry h2 br,
  .closing h2 br { display: none; }
  .section-intro h2,
  .process h2,
  .fit h2,
  .enquiry h2,
  .closing h2 { letter-spacing: -0.035em; text-wrap: balance; }
  .closing h2 span { display: block; }
  .text-link { gap: 0.35rem; }
  .site-foot nav { gap: 0 1.2rem; }
  .foot-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .edition-path-image { scroll-margin-top: 4.75rem; }
}

/* Landscape phones: the H1 took 323 px of a 390 px screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero h1 { font-size: 2.6rem; }
}

/* Touch screens wider than 700 px (a phone in landscape) got 19 to 23 px
   tall links and a 19 px checkbox. */
@media (pointer: coarse) {
  .site-head nav a,
  .head-link,
  .head-signin,
  .text-link,
  .site-foot nav a,
  .site-head .brand,
  .foot-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .privacy-check input[type="checkbox"] { width: 24px; height: 24px; }
}

/* Labels under the 12 px floor and sentences under 14 px. */
.edition-path-controls button > span,
.field-meta { font-size: 0.78rem; }
.edition-path-caption { font-size: 0.8rem; }
.occasion-choice small,
.edition-path-controls button > small,
#brief-help,
#dedication-hint { font-size: 0.875rem; }

/* A tap is not a hover. */
@media (hover: none) {
  .button-primary:hover { background: var(--ink); }
  .occasion-choice:hover strong { color: inherit; }
  .occasion-choice.is-active:hover strong { color: var(--ember-dark); }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- phone section menu, 08.10.2026 --------------------------------------- */

.menu-toggle { display: none; }

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .site-head.menu-open .menu-toggle { background: rgba(29, 26, 23, 0.06); }
  .site-head.menu-open nav#site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    margin: 0;
    padding: 0.4rem var(--menu-pad, 1rem) 0.8rem;
    background: var(--menu-bg, #f6f4f1);
    border-bottom: 1px solid rgba(29, 26, 23, 0.12);
    box-shadow: 0 18px 32px -24px rgba(29, 26, 23, 0.45);
    overflow: visible;
    white-space: normal;
  }
  .site-head.menu-open nav#site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.25rem;
    border-bottom: 1px solid rgba(29, 26, 23, 0.07);
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
  }
  .site-head.menu-open nav#site-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  /* Still sticky, which is positioned, so the open list hangs from it. */
  .site-head {
    --menu-pad: var(--gutter);
    --menu-bg: #f5f1eb;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand actions menu";
    column-gap: 0.75rem;
  }
  .head-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 0.6rem; }
  .menu-toggle { grid-area: menu; }
}
/* The cross-page link lives in the header on wide screens and in the menu
   on a phone, where the header has no room for it (it wrapped to a second
   row at 390 px). */
.site-head nav .nav-cross { display: none; }
@media (max-width: 860px) {
  .head-actions .head-link { display: none; }
}
/* An absolutely placed grid child with a grid area takes that area as its
   frame, and justify-self:start shrinks it to its content; auto placement
   and stretch hang it from the whole header. */
@media (max-width: 860px) {
  .site-head.menu-open nav#site-nav { grid-area: auto; justify-self: stretch; }
}