/* Page-level components: search, catalogue, product page, company, services, forms. Uses the tokens in site.css. */

/* ---------- search overlay ---------- */
.search { position: fixed; inset: 0; z-index: 140; background: color-mix(in srgb, var(--inox) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: auto; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; padding-top: env(safe-area-inset-top, 0px); }
.search.is-open { opacity: 1; visibility: visible; transition: opacity .35s; }
.search__box { padding-block: 22px 60px; display: grid; gap: 26px; }
.search__bar { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.search__bar > svg { width: 30px; height: 30px; flex: none; }
.search__bar input { flex: 1; min-width: 0; border: 0; background: transparent; font: 800 clamp(2rem, 5vw, 4rem)/1.1 var(--f-display); text-transform: uppercase; padding: 6px 0; outline: none; }
.search__bar input::placeholder { color: color-mix(in srgb, var(--steel) 55%, transparent); }
.search__res { display: grid; gap: 16px; }
.search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search__chips .chip { font-size: .8rem; padding: 9px 12px; min-height: 36px; display: inline-flex; align-items: center; }
.search__chips .chip:hover { border-color: var(--ink); color: var(--ink); }
.pgrid--search { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* ---------- catalogue landing ---------- */
.fam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.fam { position: relative; background: var(--inox); padding: 22px 22px 18px; display: grid; gap: 10px; align-content: start; min-height: 380px; overflow: hidden; transition: background-color .3s; }
.fam:hover { background: var(--plate); }
.fam h2 { font: 800 clamp(1.9rem, 2.6vw, 2.6rem)/.92 var(--f-display); text-transform: uppercase; position: relative; z-index: 1; }
.fam h2 a::after { content: ""; position: absolute; inset: -400px; }
.fam__n { font: .72rem var(--f-mono); color: var(--steel); letter-spacing: .06em; position: relative; z-index: 1; }
.fam__subs { font-size: .82rem; color: var(--steel); line-height: 1.5; position: relative; z-index: 1; max-width: 28ch; }
.fam__img { position: absolute; right: -5%; bottom: -7%; width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--lightbox); display: grid; place-items: center; transition: transform .7s var(--ease); }
.fam__img img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; }
.fam:hover .fam__img { transform: scale(1.06) rotate(-4deg); }
@media (max-width: 1100px) { .fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fam { min-height: 280px; padding: 16px; } .fam__subs { display: none; } }
@media (max-width: 420px) { .fam-grid { grid-template-columns: 1fr; } }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.coll { position: relative; border-radius: var(--radius); padding: 22px; min-height: 240px; display: grid; align-content: space-between; overflow: hidden; background: var(--forest); color: var(--on-forest); }
.coll:nth-child(2) { background: var(--yolk); color: #111A15; }
.coll:nth-child(3) { background: var(--plate); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.coll:nth-child(4) { background: var(--green); color: #fff; }
.coll h3 { font: 800 clamp(1.8rem, 2.4vw, 2.4rem)/.92 var(--f-display); text-transform: uppercase; }
.coll h3 a::after { content: ""; position: absolute; inset: 0; }
.coll p { font-size: .88rem; opacity: .85; max-width: 26ch; }
.coll .mono { opacity: .8; }
.coll img { position: absolute; right: -8%; bottom: -10%; width: 55%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: var(--lightbox); padding: 9%; mix-blend-mode: normal; transition: transform .7s var(--ease); }
.coll:hover img { transform: scale(1.07) rotate(4deg); }
@media (max-width: 960px) { .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cols4 { grid-template-columns: 1fr; } }
.brand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--rule); }
.brand-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); margin-right: 24px; }
.brand-list b { font: 800 1.6rem/1 var(--f-display); text-transform: uppercase; transition: color .25s; }
.brand-list span { font: .72rem var(--f-mono); color: var(--steel); }
.brand-list a:hover b { color: var(--green); }

/* ---------- category page ---------- */
.cat-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px clamp(16px, 2vw, 32px); align-items: end; }
.cat-head h1 { grid-column: 1 / span 9; }
.cat-head .cat-count { grid-column: 10 / -1; justify-self: end; text-align: right; }
.cat-count b { display: block; font: 800 clamp(3rem, 6vw, 5.4rem)/.85 var(--f-display); color: var(--green); }
.cat-count span { font: .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.subchips { display: flex; flex-wrap: wrap; gap: 8px; }
.subchips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); font-size: .88rem; transition: border-color .25s, background-color .25s; }
.subchips a small { font: .68rem var(--f-mono); color: var(--steel); }
.subchips a:hover { border-color: var(--ink); }
.subchips a[aria-current] { background: var(--ink); color: var(--inox); border-color: var(--ink); }
.subchips a[aria-current] small { color: inherit; opacity: .7; }
.shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.filters { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 22px; max-height: calc(100vh - var(--head-h) - 40px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.filters legend { font: .7rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; width: 100%; }
.check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: .9rem; cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--steel); border-radius: 4px; display: grid; place-items: center; flex: none; margin: 0; cursor: pointer; }
.check input:checked { background: var(--green); border-color: var(--green); }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]:checked::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.check input:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check small { margin-left: auto; font: .7rem var(--f-mono); color: var(--steel); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.toolbar .mono { color: var(--steel); }
.select { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; }
.select select { appearance: none; border: 1px solid var(--rule); border-radius: 999px; background: transparent; padding: 10px 36px 10px 14px; min-height: 40px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.filter-btn { display: none; }
.more-wrap { display: grid; justify-items: center; gap: 12px; margin-top: 48px; }
@media (max-width: 960px) {
  .shop { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; z-index: 135; background: var(--inox); max-height: none; padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 90px) var(--gut); transform: translateY(102%); transition: transform .5s var(--ease); }
  .filters.is-open { transform: none; }
  .filter-btn { display: inline-flex; }
  .filters__close { position: sticky; bottom: 0; }
}
@media (min-width: 961px) { .filters__close { display: none; } }
.empty-state { display: grid; justify-items: start; gap: 14px; padding: 40px 0; }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: start; padding-top: calc(var(--head-h) + 28px); }
.pdp__gallery { display: grid; gap: 12px; }
.pdp__main { position: relative; aspect-ratio: 1; background: var(--lightbox); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.pdp__main img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); view-transition-name: pimg; }
.pdp__main.is-zoom img { transform: scale(2); }
.pdp__main.is-zoom { cursor: zoom-out; }
.pdp__ring { position: absolute; inset: 6%; pointer-events: none; opacity: .5; }
.pdp__ring circle { fill: rgba(17, 26, 21, .22); }
.pdp__thumbs { display: flex; gap: 10px; }
.pdp__thumbs button { width: 84px; aspect-ratio: 1; background: var(--lightbox); border-radius: 3px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px transparent; }
.pdp__thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.pdp__thumbs img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__panel { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 22px; }
.pdp__brand { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pdp__brand b { font: 500 .78rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.pdp__brand span { font: .72rem var(--f-mono); color: var(--steel); }
.pdp h1 { font: 800 clamp(2.6rem, 4.6vw, 4.6rem)/.9 var(--f-display); text-transform: uppercase; }
.pdp__model { font: 500 clamp(1.05rem, 1.4vw, 1.3rem)/1.2 var(--f-mono); color: var(--green); }
.kf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.kf li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .95rem; line-height: 1.45; }
.kf li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--green); margin-top: .45em; }
.pdp__ctas { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pdp__ctas .btn { justify-content: center; }
.pdp__call { font-size: .9rem; color: var(--steel); }
.pdp__call a { color: var(--ink); font-weight: 500; }
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.assure div { background: var(--inox); padding: 12px; display: grid; gap: 6px; font-size: .78rem; line-height: 1.35; color: var(--steel); }
.assure svg { width: 22px; height: 22px; color: var(--green); }
.opts { display: grid; gap: 10px; }
.opts .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.specs th { font: 400 .78rem var(--f-mono); letter-spacing: .04em; color: var(--steel); width: 42%; padding-right: 16px; }
.specs td { font: 500 .95rem var(--f-mono); }
.pdp-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; overflow-x: auto; }
.pdp-tabs button { padding: 14px 4px; margin-right: 22px; font: 800 1.5rem/1 var(--f-display); text-transform: uppercase; color: var(--steel); position: relative; white-space: nowrap; }
.pdp-tabs button[aria-selected="true"] { color: var(--ink); }
.pdp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--yolk); }
.prose { max-width: 70ch; display: grid; gap: 1em; }
.prose h2 { font: 800 clamp(1.8rem, 2.8vw, 2.6rem)/.95 var(--f-display); text-transform: uppercase; margin-top: .8em; }
.prose h3 { font: 500 1.2rem/1.3 var(--f-body); margin-top: .6em; }
.prose h4 { font: 500 1rem/1.3 var(--f-body); }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 82%, var(--inox)); }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose .lede { font-size: var(--t-lede); color: var(--ink); }
.prose .tip { border-left: 3px solid var(--yolk); padding-left: 14px; font-size: .95rem; }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 400 1.08rem/1.35 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transform: translateY(-50%); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq__a { padding: 0 0 20px; display: grid; gap: .8em; color: var(--steel); max-width: 70ch; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); color: var(--inox); padding: 10px var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 10px) var(--gut); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .45s var(--ease); }
.buybar.is-on { transform: none; }
.buybar b { font-weight: 500; font-size: .9rem; line-height: 1.2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__panel { position: static; }
  .buybar { display: flex; }
}
@media (max-width: 480px) { .assure { grid-template-columns: 1fr; } .pdp__ctas { grid-template-columns: 1fr; } }

/* ---------- company: timeline ---------- */
.tl-wrap { overflow: hidden; }
.tl { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; padding-inline: max(var(--pad-x), env(safe-area-inset-left, 0px)) max(var(--pad-x), env(safe-area-inset-right, 0px)); }
.tl__item { width: clamp(280px, 30vw, 420px); display: grid; gap: 14px; align-content: start; flex: none; }
.tl__year { font: 900 clamp(4.4rem, 8vw, 8rem)/.8 var(--f-display); color: var(--leaf); font-variant-numeric: tabular-nums; }
.tl__item figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.tl__item img { width: 100%; aspect-ratio: 19 / 15; object-fit: cover; }
.tl__item h3 { font: 500 1.2rem/1.3 var(--f-body); }
.tl__item p { color: var(--on-forest-dim); font-size: .95rem; }
.tl-bar { height: 2px; background: rgba(232, 239, 231, .16); margin-top: 36px; position: relative; }
.tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--yolk); width: 0; }
@media (max-width: 860px) {
  .tl { flex-direction: column; width: auto; }
  .tl__item { width: auto; }
  .tl-bar { display: none; }
}
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.numbers div { padding: 22px 20px 22px 0; border-right: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.numbers div + div { padding-left: 20px; }
.numbers div:last-child { border-right: 0; }
.numbers b { font: 900 clamp(3.2rem, 6vw, 5.6rem)/.82 var(--f-display); color: var(--green); font-variant-numeric: tabular-nums; }
.numbers span { font-size: .92rem; color: var(--steel); max-width: 24ch; }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers div:nth-child(2) { border-right: 0; } .numbers div:nth-child(3) { padding-left: 0; } .numbers div { border-bottom: 1px solid var(--rule); } }
.split2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(16px, 2vw, 32px); }
.split2 > :first-child { grid-column: 1 / span 5; }
.split2 > :last-child { grid-column: 7 / -1; }
@media (max-width: 860px) { .split2 > :first-child, .split2 > :last-child { grid-column: 1 / -1; } }
.photo-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.photo-strip figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.photo-strip figure:first-child img { aspect-ratio: auto; }
@media (max-width: 760px) { .photo-strip { grid-template-columns: 1fr 1fr; } .photo-strip figure:first-child { grid-column: 1 / -1; } .photo-strip figure:first-child img { aspect-ratio: 16 / 10; } }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sup { background: var(--inox); padding: 18px; min-height: 120px; display: grid; align-content: space-between; gap: 10px; transition: background-color .25s; }
.sup:hover { background: var(--plate); }
.sup b { font: 800 1.9rem/.95 var(--f-display); text-transform: uppercase; }
.sup span { font: .7rem var(--f-mono); color: var(--steel); letter-spacing: .04em; }
.sup em { font-style: normal; font: .66rem var(--f-mono); color: var(--green); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- services page ---------- */
.svc-list { border-top: 1px solid var(--rule); }
.svc-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); gap: clamp(16px, 3vw, 48px); padding: clamp(28px, 4vw, 56px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.svc-row__deg { font: 900 clamp(3rem, 5vw, 5rem)/.8 var(--f-display); color: var(--green); font-variant-numeric: tabular-nums; }
.svc-row__deg sup { font-size: .4em; vertical-align: top; color: var(--yolk); }
.svc-row h2 { font: 800 var(--t-l)/.9 var(--f-display); text-transform: uppercase; margin-bottom: 16px; }
.svc-row p + p { margin-top: .9em; }
.svc-row figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.svc-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; border-top: 2px solid var(--ink); }
.steps li { counter-increment: s; padding: 20px 20px 20px 0; display: grid; gap: 10px; align-content: start; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 .8rem var(--f-mono); color: var(--green); }
.steps b { font: 800 1.8rem/.95 var(--f-display); text-transform: uppercase; }
.steps span { font-size: .92rem; color: var(--steel); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- projects page ---------- */
.case { display: grid; gap: 28px; }
.case__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.case__gal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.case__gal figure { margin: 0; border-radius: var(--radius); overflow: hidden; grid-column: span 2; background: var(--plate); }
.case__gal figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.case__gal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1.2s var(--ease); }
.case__gal figure:nth-child(1) img { aspect-ratio: auto; }
.case__gal figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .case__gal { grid-template-columns: 1fr 1fr; } .case__gal figure, .case__gal figure:nth-child(1) { grid-column: span 1; grid-row: auto; } .case__gal figure:nth-child(1) { grid-column: 1 / -1; } .case__gal figure:nth-child(1) img { aspect-ratio: 4 / 3; } }

/* ---------- news ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); font-size: .9rem; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--inox); border-color: var(--ink); }
.article-hero { padding-top: calc(var(--head-h) + clamp(40px, 6vw, 96px)); }
.article-hero figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.article-hero img { width: 100%; max-height: 72vh; object-fit: cover; }
.article-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(16px, 2vw, 32px); }
.article-body aside { grid-column: 1 / span 3; display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--head-h) + 24px); }
.article-body .prose { grid-column: 5 / span 7; }
@media (max-width: 860px) { .article-body aside, .article-body .prose { grid-column: 1 / -1; position: static; } }

/* ---------- forms (contact, quote) ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font: .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid var(--rule); padding: 10px 0 12px; font-size: 1.05rem; border-radius: 0; transition: border-color .25s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 center / 6px 6px no-repeat; padding-right: 22px; }
.field .err { font-size: .82rem; color: #C2410C; min-height: 1em; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: #C2410C; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); font-size: .92rem; transition: background-color .25s, color .25s, border-color .25s; }
.seg input:checked + span { background: var(--ink); color: var(--inox); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--yolk); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--steel); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.success { display: grid; gap: 16px; justify-items: start; padding: 40px 0; }
.success svg { width: 120px; height: 120px; }
.success svg circle { fill: var(--green); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); }
.contact-grid > .dept { grid-column: span 6; }
.dept { display: grid; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); align-content: start; }
.dept h2 { font: 800 var(--t-m)/1 var(--f-display); text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.dept a.big { font: 800 clamp(2rem, 3.2vw, 3rem)/1 var(--f-display); }
.dept a.big:hover { color: var(--green); }
@media (max-width: 760px) { .contact-grid > .dept { grid-column: 1 / -1; } }
.mapcard { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--forest); color: var(--on-forest); min-height: 340px; display: grid; align-content: end; padding: 24px; }
.mapcard svg.grid-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; }
.mapcard .pin { position: absolute; left: 58%; top: 40%; width: 120px; height: 120px; transform: translate(-50%, -50%); }
.mapcard .pin circle { fill: var(--yolk); }
.mapcard > * { position: relative; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.quote-items { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 0; }
@media (max-width: 960px) { .quote-layout { grid-template-columns: 1fr; } .quote-items { position: static; } }