@layer components;

.site-header {
	position: absolute;
	z-index: 20;
	inset: 0 0 auto;
	color: var(--white);
	border-bottom: 1px solid rgba(255,255,255,.28);
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.site-header:has(+ main > .page-intro:not(.surface-ink)) { color: var(--ink); border-color: var(--line); }
.site-header.is-condensed {
	position: fixed;
	background: rgba(247,249,248,.97);
	color: var(--ink);
	border-color: var(--line);
	box-shadow: 0 4px 20px rgba(23,33,38,.08);
	backdrop-filter: blur(12px);
}
.header-inner { width: min(100% - 2 * var(--gutter), var(--shell)); min-height: 5.25rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; view-transition-name: site-logo; }
.brand img { width: auto; height: 2.1rem; max-width: min(68vw, 34rem); }
.brand .logo-inverse { display: none; }
.site-header:not(.is-condensed) .brand .logo-default { display: none; }
.site-header:not(.is-condensed) .brand .logo-inverse { display: block; }
.header-nav { display: flex; align-items: center; gap: .2rem; }
.header-nav a, .header-phone { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .8rem; color: inherit; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .035em; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.header-nav a:hover, .header-phone:hover { background: rgba(158,228,209,.18); color: inherit; }
.header-nav a:active, .header-phone:active { background: var(--mint); color: var(--ink); }
.header-nav a:focus-visible, .header-phone:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; box-shadow: inset 0 0 0 2px rgba(23,33,38,.3); }
.header-phone { gap: .45rem; border-left: 1px solid currentColor; }
.header-phone .icon { width: .95rem; height: .95rem; }
.nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .6rem; background: transparent; color: inherit; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.nav-toggle:hover { background: rgba(158,228,209,.2); }
.nav-toggle:active { background: var(--mint); color: var(--ink); transform: scale(.97); }
.nav-toggle:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-menu { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

.button, .button-secondary, .text-button { display: inline-flex; width: fit-content; max-width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: .65rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: 0; font-family: var(--mono); font-size: var(--text-sm); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.button { background: var(--mint); color: var(--ink); }
.button:hover { background: var(--white); color: var(--ink); box-shadow: 0 4px 0 rgba(158,228,209,.75); transform: translateY(-1px); }
.button:active { background: var(--deep-mint); color: var(--white); box-shadow: none; transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px var(--deep-mint); }

.button-secondary { border-color: var(--deep-mint); background: transparent; color: var(--deep-mint); }
.button-secondary:hover { background: var(--soft-mint); color: var(--deep-mint-dark); box-shadow: 0 3px 0 var(--mint); transform: translateY(-1px); }
.button-secondary:active { background: var(--deep-mint); color: var(--white); transform: translateY(1px); }
.button-secondary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(35,102,93,.15); }
.text-button { padding-inline: 0; border-color: transparent; background: transparent; color: var(--deep-mint); text-decoration: underline; text-underline-offset: .24em; }
.site-footer .footer-preferences { color: var(--mint); }
.text-button:hover { color: var(--ink); background: var(--soft-mint); box-shadow: 0 2px 0 var(--mint); }
.text-button:active { color: var(--white); background: var(--deep-mint); }
.text-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.button .icon, .button-secondary .icon { width: 1rem; height: 1rem; }

.service-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-index a { min-width: 0; min-height: 44px; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), padding var(--duration-fast) var(--ease-standard); }
.service-index a:hover { background: var(--soft-mint); color: var(--deep-mint-dark); padding-left: 1.45rem; }
.service-index a:active { background: var(--mint); color: var(--ink); }
.service-index a:focus-visible { outline: 2px solid var(--deep-mint); outline-offset: -3px; }
.service-index strong { font-family: var(--display); font-size: var(--text-lg); font-weight: 400; line-height: 1.15; }
.service-index .meta { margin-top: .2rem; }

.data-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.data-label::before { width: .45rem; height: .45rem; background: var(--mint); content: ""; }

.rule-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rule-list li { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.5fr); gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.rule-list dt { color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.rule-list dd { margin: 0; }

.spec-table-wrap { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-sm); }
.spec-table th, .spec-table td { padding: .9rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.spec-table th { background: var(--wash); color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.spec-table td:first-child { width: 28%; font-weight: 700; }

.inquiry-form { display: grid; gap: var(--space-5); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: grid; gap: .45rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--text-sm); font-weight: 700; line-height: 1.35; }
.field label span, .field legend span { color: var(--muted); font-family: var(--mono); font-size: var(--text-xs); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 47px; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 0; background: var(--white); color: var(--ink); font-size: var(--text-base); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--deep-mint); background: var(--soft-mint); }
.field input:active, .field select:active, .field textarea:active { border-color: var(--deep-mint-dark); background: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--deep-mint); box-shadow: 0 0 0 3px rgba(158,228,209,.65); }
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--danger); background: var(--danger-wash); }
.field-error { color: var(--danger); font-size: var(--text-sm); }
.checkbox-field { display: flex; align-items: flex-start; gap: .75rem; }
.checkbox-field input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--deep-mint); }
.checkbox-field label { font-size: var(--text-sm); font-weight: 400; }
.form-status { padding: .8rem 1rem; border-left: 3px solid var(--deep-mint); background: var(--soft-mint); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.site-footer { padding-block: clamp(4rem, 8vw, 7rem) 2rem; background: var(--ink); color: var(--white); }
.footer-top { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 9rem); padding-bottom: var(--space-9); }
.site-footer .brand img { height: 2.7rem; }
.site-footer .meta { color: rgba(255,255,255,.82); }
.footer-copy { max-width: 31rem; }
.footer-address { display: grid; gap: .45rem; align-content: start; }
.footer-address a { color: var(--white); }
.footer-address a:hover { color: var(--mint); }
.footer-address a:active { color: var(--mint); background: var(--deep-mint); }
.footer-address a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.footer-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.footer-label { display: block; margin-bottom: .5rem; color: var(--mint); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.contact-close-details .footer-label { color: var(--deep-mint-dark); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.72); font-size: var(--text-sm); }
.footer-legal a { min-height: 44px; display: inline-flex; align-items: center; color: var(--white); }
.footer-legal a:hover { color: var(--mint); }
.footer-legal a:active { color: var(--ink); background: var(--mint); }
.footer-legal a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.footer-legal .legal-separator { color: var(--mint); }
.footer-note { margin-top: 1.75rem; color: rgba(255,255,255,.67); font-size: var(--text-sm); }

.cookie-banner { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; left: 1rem; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: var(--shadow-float); }
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { font-size: var(--text-sm); line-height: 1.45; }
.cookie-banner a { white-space: nowrap; }
.cookie-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .5rem; }
.cookie-actions button { min-height: 44px; padding: .6rem .85rem; border: 1px solid var(--deep-mint); background: var(--white); color: var(--deep-mint); font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.cookie-actions button:hover { background: var(--soft-mint); box-shadow: 0 2px 0 var(--mint); }
.cookie-actions button:active { background: var(--deep-mint); color: var(--white); }
.cookie-actions button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.cookie-actions button:first-child { background: var(--deep-mint); color: var(--white); }
.cookie-actions button:first-child:hover { background: var(--deep-mint-dark); }

.chat-launcher { position: fixed; z-index: 55; right: 1rem; bottom: 1rem; display: none; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--ink); background: var(--mint); color: var(--ink); box-shadow: 0 6px 18px rgba(23,33,38,.2); font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.js .chat-launcher { display: inline-flex; }
.chat-launcher:hover { background: var(--white); box-shadow: 0 8px 20px rgba(23,33,38,.24); transform: translateY(-1px); }
.chat-launcher:active { background: var(--deep-mint); color: var(--white); box-shadow: 0 3px 10px rgba(23,33,38,.18); transform: translateY(1px); }
.chat-launcher:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.chat-launcher .icon { width: 1.1rem; height: 1.1rem; }
.chat-unread { display: none; min-width: 1.25rem; min-height: 1.25rem; padding: .1rem .3rem; background: var(--ink); color: var(--white); font-size: .7rem; text-align: center; }
.chat-unread.has-count { display: inline-block; }
.chat-panel { position: fixed; z-index: 57; right: 1rem; bottom: 1rem; display: none; width: min(25rem, calc(100vw - 2rem)); max-height: min(42rem, calc(100vh - 2rem)); flex-direction: column; border: 1px solid var(--ink); background: var(--white); box-shadow: var(--shadow-float); }
.chat-panel.is-open { display: flex; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--ink); color: var(--white); }
.chat-head h2 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.chat-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem; background: transparent; color: var(--white); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.chat-close:hover { background: rgba(158,228,209,.2); color: var(--mint); }
.chat-close:active { background: var(--mint); color: var(--ink); }
.chat-close:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.chat-body { display: grid; gap: .8rem; overflow: auto; padding: 1rem; }
.chat-intro { color: var(--muted); font-size: var(--text-sm); }
.chat-transcript { display: grid; gap: .65rem; max-height: 17rem; overflow: auto; }
.chat-message { width: fit-content; max-width: 90%; padding: .65rem .75rem; background: var(--wash); font-size: var(--text-sm); }
.chat-message.visitor { margin-left: auto; background: var(--soft-mint); }
.chat-message time { display: block; margin-top: .25rem; color: var(--muted); font-family: var(--mono); font-size: .66rem; }
.chat-compose { display: grid; gap: .6rem; padding: 1rem; border-top: 1px solid var(--line); }
.chat-compose textarea { min-height: 4.5rem; width: 100%; padding: .7rem; border: 1px solid var(--line); resize: vertical; }
.chat-compose textarea:hover { border-color: var(--deep-mint); background: var(--soft-mint); }
.chat-compose textarea:active { border-color: var(--deep-mint-dark); }
.chat-compose textarea:focus { outline: 0; border-color: var(--deep-mint); box-shadow: 0 0 0 3px rgba(158,228,209,.65); }
.chat-first-contact { display: grid; gap: .7rem; }

@media (max-width: 56rem) {
	.header-inner { min-height: 4.75rem; }
	.header-nav { display: none; position: absolute; inset: 100% 0 auto; padding: .75rem var(--gutter) 1rem; border-top: 1px solid currentColor; background: var(--ink); box-shadow: 0 1rem 2rem rgba(23,33,38,.18); }
	.site-header.is-condensed .header-nav { background: var(--white); }
	.header-nav.is-open { display: grid; }
	.header-nav a { min-height: 48px; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }
	.site-header.is-condensed .header-nav a { border-color: var(--line); }
	.header-phone { display: none; }
	.nav-toggle { display: inline-flex; }
	.brand img { height: 1.8rem; }
}
@media (max-width: 47.99rem) {
	.service-index, .form-grid, .footer-details { grid-template-columns: 1fr; }
	.rule-list li { grid-template-columns: 1fr; gap: .35rem; }
	.footer-top { grid-template-columns: 1fr; }
	.cookie-banner { right: .5rem; bottom: .5rem; left: .5rem; align-items: stretch; flex-direction: column; gap: .65rem; }
	.cookie-banner p { max-width: none; }
	.cookie-actions { width: 100%; }
	.cookie-actions button { flex: 1 1 8rem; }
	.chat-launcher { right: .75rem; bottom: .75rem; }
	.chat-panel { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
}