[hidden] { display: none !important; }
.nav-atelier {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
  min-height: 43px;
}
.nav-atelier::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; }
.nav-atelier:hover, .nav-atelier[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.hero-copy .kicker::before { width: 53px; }
.tile { transition: border-color .18s, transform .18s, box-shadow .18s; }
@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #1222380c; }
}
.atelier-teaser { background: #f5f8f7; border-bottom: 1px solid var(--line); }
.teaser-panel { display: grid; grid-template-columns: .93fr 1.07fr; align-items: stretch; }
.teaser-copy {
  padding: clamp(25px, 4.2vw, 60px);
  background: var(--navy);
  color: #f5faf9;
  border-top: 3px solid var(--accent);
}
.teaser-copy .kicker { color: #8cddd5; }
.teaser-copy h2 { color: #fff; max-width: 13ch; }
.teaser-copy p:not(.kicker) { color: #d8e5e9; max-width: 38ch; margin-top: 15px; }
.teaser-copy ol { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 16px; padding: 0; margin: 20px 0 25px; counter-reset: step; }
.teaser-copy li { font-size: 12px; font-weight: 750; counter-increment: step; }
.teaser-copy li::before { content: "0" counter(step); margin-right: 7px; color: #8cddd5; }
.teaser-copy .button { color: var(--navy); background: #fff; }
.teaser-copy .button:hover { background: #c5eee9; }
.teaser-panel figure { position: relative; min-height: 360px; overflow: hidden; background: #d9e5e6; }
.teaser-panel figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teaser-panel figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: #ffffffec; padding: 10px 15px; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.teaser-panel figcaption span { color: var(--teal); margin-right: 10px; }
.material-feature figure, .catalog-intro figure, .quote-copy figure { background: #e4ebea; position: relative; }
.material-feature figure img, .catalog-intro figure img, .quote-copy figure img { width: 100%; height: auto; aspect-ratio: 1.55; object-fit: cover; }
.material-feature figcaption, .quote-copy figcaption { position: absolute; bottom: 10px; left: 10px; background: #fff; padding: 5px 9px; font-size: 10px; font-weight: 750; }
.material-feature .quality-links { margin-top: 17px; }
.materials-link { padding-top: 25px; }

.studio-page { padding-block: clamp(36px, 4.6vw, 73px); background: #f4f7f6; border-bottom: 1px solid var(--line); }
.studio-heading { max-width: 1050px; margin-bottom: clamp(25px, 3vw, 41px); }
.studio-heading h1 { font-size: clamp(40px, 5.1vw, 78px); }
.studio-heading .lead { margin-top: 13px; }
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, .9fr);
  border: 1px solid #ccd9d8;
  background: #fff;
}
.lab-controls { padding: clamp(18px, 4vw, 53px); min-width: 0; }
.lab-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; border-bottom: 1px solid var(--line); margin-bottom: clamp(23px, 3.2vw, 42px); }
.lab-progress button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0 5px 13px 0; border: 0; background: transparent; color: var(--navy);
  font-size: 13px; font-weight: 800; text-align: left;
}
.lab-progress button:disabled { color: #526477; cursor: default; }
.lab-progress button span { color: var(--teal); font-size: 11px; font-variant-numeric: tabular-nums; }
.lab-progress li { position: relative; }
.lab-progress li[aria-current]::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -1px; height: 2px; background: var(--teal); }
.lab-controls fieldset { padding: 0; margin: 0; min-width: 0; border: 0; }
.lab-controls legend { color: var(--navy); font-size: clamp(20px, 2.3vw, 31px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 15px; }
.lab-controls legend:focus { outline: none; }
.lab-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lab-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.lab-choice input { position: absolute; opacity: 0; top: 11px; right: 11px; }
.choice-body {
  height: 100%; min-height: 122px; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid #cdd9dc; padding: 14px;
  color: var(--navy); transition: border-color .18s, background .18s;
}
.choice-body svg { color: var(--teal); margin-bottom: 2px; }
.choice-body strong { font-size: 15px; line-height: 1.22; }
.choice-body small { color: var(--muted); font-size: 12px; line-height: 1.36; }
.lab-choice input:focus-visible + .choice-body { outline: 2px solid var(--teal); outline-offset: 3px; }
.lab-choice:hover .choice-body { border-color: var(--teal); }
.lab-choice input:checked + .choice-body { border-color: var(--teal); background: var(--pale); box-shadow: inset 0 0 0 1px var(--teal); }
.compact-choice .choice-body { min-height: 66px; justify-content: center; }
[data-pane="0"] .choice-body { min-height: 108px; }
.profile-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 13px; }
.profile-filters button {
  padding: 7px 10px; min-height: 36px; border: 1px solid #cdd9dc; border-radius: 3px;
  background: #fff; color: var(--navy); font: inherit; font-size: 12px; font-weight: 800;
}
.profile-filters button:hover { border-color: var(--teal); }
.profile-filters button[aria-pressed="true"] { color: #fff; background: var(--teal); border-color: var(--teal); }
.lab-flavour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border: 1px solid #d4e1e2; background: #f6f9f9; font-size: 13px; font-weight: 800; }
.lab-flavour small { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }
.lab-flavour select { min-width: 0; min-height: 42px; padding: 8px; border: 1px solid #b8c9ce; border-radius: 3px; color: var(--navy); background: #fff; font: inherit; font-size: 14px; }
.studio-presets { margin-top: clamp(40px, 6vw, 91px); }
.preset-heading { margin-bottom: 17px; }
.preset-heading h2 { margin-top: 4px; font-size: clamp(28px, 4vw, 49px); }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 17px); }
.preset-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #cdd9dc; color: var(--navy); background: #fff; font: inherit; text-align: left; transition: border-color .18s, box-shadow .18s; }
.preset-card:hover { border-color: var(--teal); box-shadow: 0 4px 16px #103b3915; }
.preset-card > img { width: 100%; aspect-ratio: 1.83; height: auto; object-fit: cover; }
.preset-label { display: flex; justify-content: space-between; align-items: center; flex: 1; gap: 8px; padding: clamp(10px, 1.65vw, 20px); }
.preset-label strong, .preset-label small { display: block; }
.preset-label strong { font-size: clamp(13px, 1.55vw, 18px); font-weight: 800; line-height: 1.25; }
.preset-label small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.32; }
.preset-label svg { color: var(--teal); flex: 0 0 auto; transition: transform .18s; }
.preset-card:hover .preset-label svg { transform: translateX(3px); }
@media (max-width: 790px) { .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .preset-label { align-items: flex-start; } .preset-label svg { width: 15px; } }
@media (prefers-reduced-motion: reduce) { .preset-card, .preset-label svg { transition: none; } }
.lab-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
button.button:disabled { opacity: .55; cursor: default; }
.lab-sheet { min-width: 0; background: #eaf1f0; border-left: 1px solid #cdd9dc; }
.lab-sheet figure { position: relative; background: #d9e4e4; }
.lab-sheet figure img { width: 100%; height: auto; aspect-ratio: 1.77; object-fit: cover; }
.lab-sheet figcaption {
  position: absolute; bottom: 10px; left: 10px; background: #fff;
  padding: 5px 8px; color: var(--navy); font-size: 9px; letter-spacing: .05em; font-weight: 800;
}
.sheet-body { padding: clamp(16px, 3.5vw, 40px); }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px clamp(16px, 3.5vw, 40px); }
.sheet-title::before { content: ""; height: 1px; background: #b8cdcc; flex: 1; order: 1; }
.sheet-title > span { padding: 3px 7px; font-size: 10px; font-weight: 800; color: #fff; background: var(--teal); order: 2; white-space: nowrap; }
.lab-actions .primary { background: var(--teal); }
.lab-actions .primary:hover { background: #005d59; }
.lab-sheet dl { margin: 0; border-top: 1px solid #cad8d8; }
.lab-sheet dl > div { display: flex; justify-content: space-between; gap: 14px; padding-block: 10px; border-bottom: 1px solid #cad8d8; font-size: 13px; }
.lab-sheet dt { color: var(--muted); font-weight: 650; }
.lab-sheet dd { margin: 0; text-align: right; font-weight: 800; color: var(--navy); }
.sheet-note { font-size: 12px; color: var(--muted); margin-top: 13px; }

.catalog-intro { padding-block: clamp(42px, 6vw, 88px); background: #f1f6f5; border-bottom: 1px solid var(--line); }
.catalog-intro h1 { font-size: clamp(41px, 5.3vw, 78px); }
.catalog-intro .lead { margin-top: 14px; max-width: 42ch; }
.catalog-note { margin-top: 14px; color: var(--muted); font-size: 13px; }
.catalog-main { padding-block: clamp(29px, 5vw, 67px); }
.catalog-tools label { display: block; font-weight: 800; margin-bottom: 8px; }
.catalog-tools input, .native-form input, .native-form select, .native-form textarea {
  display: block; width: 100%; min-height: 46px; border: 1px solid #aebfca;
  border-radius: 3px; padding: 10px 11px; color: var(--navy); background: #fff; font: inherit; font-size: 15px;
}
.catalog-tools input { max-width: 560px; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 11px; }
.catalog-filters a { padding: 7px 11px; font-size: 12px; font-weight: 750; border: 1px solid var(--line); background: white; border-radius: 3px; }
.catalog-filters a:hover { border-color: var(--teal); }
.catalog-filters a[aria-current] { color: #fff; background: var(--teal); border-color: var(--teal); }
.catalog-tools [role="status"], [data-empty] { color: var(--muted); font-size: 13px; }
[data-empty] { padding-block: 32px; }
.ingredient-family { margin-top: clamp(29px, 4.1vw, 55px); }
.ingredient-heading { display: flex; align-items: baseline; gap: 11px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.ingredient-heading h2 { font-size: clamp(25px, 3vw, 42px); }
.ingredient-heading > span { color: var(--teal); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800; }
.ingredient-heading > span:last-child { margin-left: auto; }
.ingredient-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; list-style: none; padding: 0; }
.ingredient-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); }
.ingredient-card:target { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.ingredient-card img { width: 100%; height: auto; aspect-ratio: 1.54; object-fit: cover; background: #eef4f3; border-bottom: 1px solid var(--line); }
.ingredient-copy { display: flex; flex-direction: column; flex: 1; padding: 12px; }
.ingredient-copy h3 { font-size: clamp(15px, 1.45vw, 21px); }
.ingredient-copy > p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.46; }
.ingredient-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; margin-top: auto; padding-top: 10px; }
.ingredient-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; color: var(--teal); font-size: 11px; font-weight: 800; }
.ingredient-links a svg { width: 13px; height: 13px; }
.ingredient-links a:hover { text-decoration: underline; }
.ingredient-links .ingredient-detail { color: var(--navy); }

.quote-native { padding-block: clamp(36px, 6vw, 94px); background: #f3f7f6; }
.quote-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.27fr); align-items: start; gap: clamp(24px, 5.5vw, 79px); }
.quote-copy h1 { font-size: clamp(42px, 5.3vw, 75px); max-width: 11ch; }
.quote-copy .lead { margin-top: 15px; }
.quote-direct { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 800; color: var(--teal); margin-block: 15px 19px; }
.quote-direct a:hover { text-decoration: underline; }
.quote-studio { margin-top: 16px; }
.quote-copy address { color: var(--muted); font-style: normal; font-size: 13px; margin-top: 13px; }
.native-form { background: #fff; border: 1px solid #cad9d8; border-top: 3px solid var(--accent); padding: clamp(18px, 3.5vw, 47px); }
.form-heading h2 { font-size: clamp(31px,3.3vw,52px); margin-top: 5px; }
.form-heading p:last-child { color: var(--muted); font-size: 12px; margin: 7px 0 18px; }
.quote-project { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--pale); border-left: 2px solid var(--teal); padding: 9px 11px; margin-bottom: 15px; }
.quote-project p:last-child { color: var(--navy); font-weight: 750; font-size: 13px; }
.quote-project a { color: var(--teal); font-weight: 800; font-size: 12px; }
.quote-project a:hover { text-decoration: underline; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.field-grid label { display: grid; gap: 4px; align-content: start; color: var(--navy); font-size: 13px; font-weight: 800; }
.field-grid .field-wide { grid-column: 1/-1; }
.native-form textarea { resize: vertical; }
.form-trap { position: absolute; left: -10000px; height: 1px; width: 1px; overflow: hidden; }
.form-privacy { color: var(--muted); font-size: 12px; margin-block: 13px 15px; }
.quote-submit { min-width: min(235px, 100%); }
.quote-status { font-size: 14px; font-weight: 750; }
.quote-status:not(:empty) { margin-top: 13px; padding: 10px; }
.quote-status[data-state="success"] { background: var(--pale); color: var(--teal); }
.quote-status[data-state="error"] { background: #fff1ed; color: #843328; }

@media (max-width: 1020px) {
  .nav-atelier { display: flex; border-bottom: 1px solid var(--line); }
  .ingredient-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 790px) {
  .ingredient-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .workbench, .teaser-panel, .quote-layout { grid-template-columns: 1fr; }
  .teaser-panel figure { min-height: 0; aspect-ratio: 1.57; }
  .lab-sheet { border-left: 0; border-top: 1px solid #cdd9dc; }
  .lab-sheet figure img { aspect-ratio: 2.15; }
  .quote-copy figure, .quote-copy address { display: none; }
  .quote-copy h1 { max-width: none; }
  .quote-studio { margin-top: 0; }
  .quote-direct { margin-block: 10px; }
}
@media (max-width: 520px) {
  .ingredient-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ingredient-copy { padding: 9px; }
  .ingredient-copy > p { font-size: 11px; }
  .lab-progress button { gap: 4px; font-size: 12px; }
  .choice-body { padding: 11px; }
  .choice-body strong { font-size: 14px; }
  .native-form input, .native-form select, .native-form textarea, .catalog-tools input { font-size: 16px; }
  .field-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tile:hover { transform: none; }
}