.site-header {
   width: 100%;
   background-color: var(--ground);
   border-bottom: var(--border-heavy) solid var(--ink);
   position: sticky;
   top: 0;
   z-index: 1000;
   transition: transform var(--duration-base) var(--ease-out-cubic),
                     background-color var(--duration-base) var(--ease-out-cubic),
                     box-shadow var(--duration-base) var(--ease-out-cubic);
}


@media (max-width: 900px) {
   .site-header { position: relative; }
}


.site-header--condensed { box-shadow: 0 4px 0 rgba(20, 17, 12, 0.15); }


.site-header--condensed .masthead-meta-row { display: none; }


.masthead-meta-row {
   background-color: var(--surface-dark);
   color: var(--ink-inverse);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   border-bottom: var(--border-width) solid var(--ink);

   padding: var(--space-2xs) 0;
}


.masthead-meta-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-md);
   flex-wrap: wrap;
}


.masthead-meta-group {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}


.masthead-meta-item {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2xs);
   color: var(--ink-inverse);
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease-out-cubic);
}


.masthead-meta-item:hover { color: var(--ground); }


.masthead-meta-item:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


/* Row 2: Nameplate & Action Row */
.masthead-primary-row {
   padding: var(--space-xs) 0;
   background-color: var(--ground);
   border-bottom: var(--border-width) solid var(--line);
}


.masthead-primary-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-md);
}


.brand {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   min-height: var(--touch-target);
   transition: opacity var(--duration-fast) var(--ease-out-cubic);
}


.brand img {
   height: 2.1rem;
   width: auto;
   max-width: 100%;
   display: block;
}


.brand:hover { opacity: 0.88; }


.brand:active { opacity: 0.72; }


.brand:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 4px;
}


.masthead-actions {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
}


.masthead-nav-row {
   background-color: var(--surface);
   border-bottom: var(--border-width) solid var(--ink);
}


.site-nav {
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
   flex-wrap: wrap;
   border-left: var(--border-width) solid var(--line);
}


.nav-link {
   font-family: var(--gogi-55e);
   font-weight: 600;
   font-size: var(--text-sm);
   letter-spacing: var(--tracking-snug);
   text-transform: uppercase;
   color: var(--ink);
   text-decoration: none;
   padding: var(--space-xs) var(--space-md);
   min-height: var(--touch-target);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-right: var(--border-width) solid var(--line);
   background: transparent;
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     color var(--duration-fast) var(--ease-out-cubic);
}


.nav-link:hover {
   background-color: var(--ground);
   color: var(--ink);
}


.nav-link:active {
   background-color: var(--accent);
   color: var(--ink-inverse);

}


.nav-link:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: -2px;
}


.nav-link[aria-current="page"] {
   background-color: var(--accent);
   color: var(--ink-inverse);
   font-weight: 700;
}


.nav-toggle {
   display: none;
   align-items: center;
   justify-content: center;
   gap: var(--space-2xs);
   min-height: var(--touch-target);
   min-width: var(--touch-target);
   padding: var(--space-xs) var(--space-sm);

   background-color: var(--accent);
   color: var(--ink-inverse);
   border: var(--border-width) solid var(--ink);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   cursor: pointer;
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     transform var(--duration-fast) var(--ease-out-cubic);
}


.nav-toggle:hover { background-color: var(--accent-surface); }


.nav-toggle:active {
   background-color: #000;
   transform: translateY(1px);
}


.nav-toggle:focus-visible {
   outline: 3px solid var(--accent-bright);
   outline-offset: 2px;
}


@media (max-width: 900px) {
   .nav-toggle { display: inline-flex; }


   .masthead-nav-row { display: none; }


   .masthead-nav-row.is-open {
      display: block;
      border-top: var(--border-width) solid var(--ink);
   }


   .site-nav {
      flex-direction: column;
      border-left: none;
   }


   .nav-link {
      width: 100%;
      justify-content: flex-start;
      border-right: none;
      border-bottom: var(--border-width) solid var(--line);
      padding: var(--space-sm) var(--space-md);
   }
}



.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-xs);
   padding: var(--space-xs) var(--space-md);
   min-height: var(--touch-target);
   font-family: var(--gogi-24f);
   font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   text-decoration: none;
   border-radius: var(--radius-none);
   cursor: pointer;
   border: var(--border-heavy) solid var(--ink);
   position: relative;
   text-align: center;
   white-space: normal;
   word-break: normal;
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     color var(--duration-fast) var(--ease-out-cubic),
                     border-color var(--duration-fast) var(--ease-out-cubic),
                     box-shadow var(--duration-fast) var(--ease-out-cubic),
                     transform var(--duration-fast) var(--ease-out-cubic);
}


/* Primary Button */
.btn--primary {
   background-color: var(--accent);
   color: var(--ink-inverse);
   box-shadow: var(--shadow-flat);
}


.btn--primary:hover {
   background-color: var(--accent-surface);
   box-shadow: var(--shadow-raised);
   transform: translate(-1px, -1px);
}


.btn--primary:active {
   background-color: #000;
   box-shadow: 1px 1px 0 rgba(20, 17, 12, 0.95);
   transform: translate(2px, 2px);
}


.btn--primary:focus-visible {
   outline: 3px solid var(--accent-bright);
   outline-offset: 2px;
}


/* Secondary / Outline Button */
.btn--secondary {
   background-color: transparent;
   color: var(--ink);
   box-shadow: var(--shadow-flat);
}


.btn--secondary:hover {
   background-color: var(--ink);
   color: var(--ink-inverse);
   box-shadow: var(--shadow-raised);
   transform: translate(-1px, -1px);
}


.btn--secondary:active {
   background-color: var(--accent);
   color: var(--ink-inverse);
   box-shadow: 1px 1px 0 rgba(20, 17, 12, 0.95);
   transform: translate(2px, 2px);
}


.btn--secondary:focus-visible {
   outline: 3px solid var(--accent-bright);
   outline-offset: 2px;
}


.btn--accent {
   background-color: var(--accent-bright);
   color: #ffffff;
   border-color: var(--ink);
   box-shadow: var(--shadow-flat);
}


.btn--accent:hover {
   background-color: #d44c00;
   box-shadow: var(--shadow-raised);
   transform: translate(-1px, -1px);
}


.btn--accent:active {
   background-color: #a33b00;
   box-shadow: 1px 1px 0 rgba(20, 17, 12, 0.95);
   transform: translate(2px, 2px);
}


.btn--accent:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 2px;
}


.btn--sm {
   min-height: 38px;
   padding: var(--space-2xs) var(--space-sm);
   font-size: var(--text-xs);
}


/* Full Width Button */
.btn--block {
   width: 100%;
   display: flex;
}


.action-link {
   font-family: var(--gogi-24f);
   font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   color: var(--ink);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2xs);
   min-height: var(--touch-target);
   border-bottom: var(--border-heavy) solid currentColor;
   padding: var(--space-2xs) 0;
   transition: color var(--duration-fast) var(--ease-out-cubic),
                     border-color var(--duration-fast) var(--ease-out-cubic),
                     gap var(--duration-fast) var(--ease-out-cubic);
}


.action-link:hover {
   color: var(--accent);
   gap: var(--space-xs);
}


.action-link:active { color: var(--accent-bright); }


.action-link:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 4px;
}



.modular-grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   border: var(--border-heavy) solid var(--ink);
   background-color: var(--ink);
   gap: var(--border-width);
   margin-top: var(--space-lg);
}


.modular-tile {
   background-color: var(--ground);
   padding: var(--space-lg);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   min-width: 0;
}


.modular-tile--contrast { background-color: var(--surface); }


.modular-tile--dark {
   background-color: var(--accent);
   color: var(--ink-inverse);
}


.modular-tile--dark h3,
.modular-tile--dark h4,
.modular-tile--dark .price-tag { color: var(--ink-inverse); }


.modular-tile--dark .meta-label { color: var(--ink-inverse-muted); }


/* Lead Story Tile (e.g. 8 cols) */
.modular-tile--lead {
   grid-column: span 8 / span 8;
   padding: var(--space-xl);
}


/* Secondary Feature Tile (e.g. 4 cols) */
.modular-tile--secondary { grid-column: span 4 / span 4; }


/* Half Tile (6 cols) */
.modular-tile--half { grid-column: span 6 / span 6; }


/* Third Tile (4 cols) */
.modular-tile--third { grid-column: span 4 / span 4; }


@media (max-width: 1024px) {
   .modular-tile--lead { grid-column: span 12 / span 12; }
   .modular-tile--secondary { grid-column: span 6 / span 6; }
   .modular-tile--half { grid-column: span 12 / span 12; }
   .modular-tile--third { grid-column: span 6 / span 6; }
}


@media (max-width: 640px) {
   .modular-tile--secondary,
   .modular-tile--third { grid-column: span 12 / span 12; }
   .modular-tile { padding: var(--space-md); }
}


/* Modular Tile Header & Body */
.modular-tile__header {
   margin-bottom: var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--space-sm);
   border-bottom: var(--border-width) solid var(--line);
   padding-bottom: var(--space-xs);
}


.modular-tile__title {
   font-size: var(--text-xl);
   margin-bottom: var(--space-2xs);
}


.modular-tile__media {
   width: 100%;
   margin-bottom: var(--space-md);
   border: var(--border-width) solid var(--ink);
   overflow: hidden;
   position: relative;
}


.modular-tile__media img {
   width: 100%;
   height: 280px;
   object-fit: cover;
   transition: transform var(--duration-base) var(--ease-out-cubic);
}


.modular-tile:hover .modular-tile__media img { transform: scale(1.02); }


.modular-tile__spec-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-xs);
   margin-top: var(--space-md);
   padding-top: var(--space-sm);
   border-top: var(--border-width) solid var(--line);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
}


.modular-tile__spec-item {
   display: flex;
   flex-direction: column;
}


.modular-tile__spec-item strong {
   font-size: var(--text-sm);
   color: var(--ink);
}


.modular-tile--dark .modular-tile__spec-item strong { color: var(--ink-inverse); }


/* Product Catalogue Card */
.catalog-card {
   display: flex;
   flex-direction: column;
   background-color: var(--surface);
   border: var(--border-width) solid var(--ink);
   padding: var(--space-md);
   position: relative;
   transition: transform var(--duration-fast) var(--ease-out-cubic),
                     box-shadow var(--duration-fast) var(--ease-out-cubic);
}


.catalog-card:hover {
   transform: translate(-2px, -2px);
   box-shadow: var(--shadow-flat);
}


.catalog-card__media {
   width: 100%;
   height: 220px;
   overflow: hidden;
   border: var(--border-width) solid var(--ink);
   margin-bottom: var(--space-sm);
}


.catalog-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


.catalog-card__heading {
   font-size: var(--text-lg);
   margin-bottom: var(--space-2xs);
}


.catalog-card__price-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-top: var(--space-sm);
   padding-top: var(--space-2xs);
   border-top: var(--border-width) solid var(--line);
}



.table-responsive {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin: var(--space-lg) 0;
   border: var(--border-heavy) solid var(--ink);
}


.spec-table {
   width: 100%;
   border-collapse: collapse;
   background-color: var(--surface);
   font-size: var(--text-sm);
   text-align: left;
}


.spec-table th,
.spec-table td {
   padding: var(--space-sm) var(--space-md);
   border: var(--border-width) solid var(--line);
   vertical-align: top;
}


.spec-table th {
   background-color: var(--accent);
   color: var(--ink-inverse);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
}


.spec-table tr:hover td { background-color: rgba(20, 17, 12, 0.05); }


.spec-table td strong { font-family: var(--gogi-24f); }



.inquiry-form {
   background-color: var(--surface);
   border: var(--border-heavy) solid var(--ink);
   padding: var(--space-xl);
   box-shadow: var(--shadow-raised);
}


.form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--space-md);
}


.form-grid--full { grid-column: span 2 / span 2; }


@media (max-width: 680px) {
   .form-grid { grid-template-columns: 1fr; }
   .form-grid--full { grid-column: span 1 / span 1; }
   .inquiry-form { padding: var(--space-md); }
}


.form-group {
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
   position: relative;
}


.form-label {
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   color: var(--ink);
   display: flex;
   justify-content: space-between;
   align-items: center;
}


.form-label__note {
   font-weight: 400;
   text-transform: none;
   color: var(--ink-muted);
}


.form-control {
   width: 100%;
   min-height: var(--touch-target);
   padding: var(--space-xs) var(--space-sm);
   background-color: var(--ground);
   color: var(--ink);
   border: var(--border-heavy) solid var(--ink);
   font-family: var(--gogi-e47);
   font-size: var(--text-base);
   border-radius: var(--radius-none);
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     border-color var(--duration-fast) var(--ease-out-cubic),
                     box-shadow var(--duration-fast) var(--ease-out-cubic);
}


textarea.form-control {
   min-height: 120px;
   resize: vertical;
}


.form-control:hover { background-color: #d49b45; }


.form-control:focus-visible {
   background-color: #ffffff;
   border-color: var(--accent);
   outline: 3px solid var(--accent-bright);
   outline-offset: 1px;
}


.form-control[aria-invalid="true"] {
   border-color: #b30000;
   background-color: #ffe6e6;
}


.form-error {
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   color: #b30000;
   font-weight: 700;
   margin-top: 2px;
   display: none;
}


.form-error.is-visible { display: block; }


/* Custom Swiss Checkbox */
.checkbox-group {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   margin-top: var(--space-xs);
   cursor: pointer;
}


.checkbox-group input[type="checkbox"] {
   width: 22px;
   height: 22px;
   min-width: 22px;
   margin-top: 2px;
   accent-color: var(--accent);
   cursor: pointer;
   border: var(--border-heavy) solid var(--ink);
   border-radius: 0;
}


.checkbox-group input[type="checkbox"]:focus-visible {
   outline: 3px solid var(--accent-bright);
   outline-offset: 2px;
}


.checkbox-text {
   font-size: var(--text-sm);
   line-height: var(--leading-snug);
   color: var(--ink);
}


.checkbox-text a {
   color: var(--accent);
   text-decoration: underline;
   font-weight: 600;
}


/* Honeypots: visually hidden, never labelled */
.inquiry-trap {
   position: absolute !important;
   left: -9999px !important;
   top: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important;
   pointer-events: none !important;
}



.site-footer {
   width: 100%;
   background-color: var(--accent);
   color: var(--ink-inverse);
   border-top: var(--border-block) solid var(--ink);
   padding-top: var(--space-2xl);
   padding-bottom: var(--space-lg);
   margin-top: auto;
}


.footer-top {
   padding-bottom: var(--space-xl);
   border-bottom: var(--border-width) solid var(--line-inverse);
}


.footer-columns {
   display: grid;
   grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
   gap: var(--space-xl);
}


@media (max-width: 1024px) {
   .footer-columns { grid-template-columns: 1fr 1fr; }
}


@media (max-width: 640px) {
   .footer-columns { grid-template-columns: 1fr; }
}


.footer-col {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}


.footer-col__title {
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   color: var(--ground);
   margin-bottom: var(--space-2xs);
}


.footer-brand img {
   height: 2.4rem;
   width: auto;
   display: block;
   margin-bottom: var(--space-xs);
}


.footer-text {
   font-size: var(--text-sm);
   line-height: var(--leading-snug);
   color: var(--ink-inverse-muted);
}


.footer-facts-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   font-size: var(--text-sm);
}


.footer-facts-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
   color: var(--ink-inverse);
}


.footer-facts-item a {
   color: var(--ink-inverse);
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease-out-cubic);
}


.footer-facts-item a:hover { color: var(--ground); }


.footer-facts-item a:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


.footer-nav-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
}


.footer-nav-link {
   font-size: var(--text-sm);
   color: var(--ink-inverse-muted);
   text-decoration: none;
   padding: 4px 0;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2xs);
   transition: color var(--duration-fast) var(--ease-out-cubic),
                     transform var(--duration-fast) var(--ease-out-cubic);
}


.footer-nav-link:hover {
   color: var(--ink-inverse);
   transform: translateX(3px);
}


.footer-nav-link:active { color: var(--ground); }


.footer-nav-link:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


/* Footer Legal Bottom Row */
.footer-legal-row {
   padding-top: var(--space-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-md);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   color: var(--ink-inverse-muted);
}


.footer-legal-links {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-md);
}


.footer-legal-link {
   color: var(--ink-inverse-muted);
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease-out-cubic);
}


.footer-legal-link:hover {
   color: var(--ink-inverse);
   text-decoration: underline;
}


.footer-legal-link:active { color: var(--ground); }


.footer-legal-link:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


.btn-reopen-consent {
   background: transparent;
   border: var(--border-width) solid var(--ink-inverse-muted);
   color: var(--ink-inverse-muted);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   letter-spacing: var(--tracking-wide);
   padding: 4px 10px;
   cursor: pointer;
   text-transform: uppercase;
   min-height: 32px;
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     color var(--duration-fast) var(--ease-out-cubic),
                     border-color var(--duration-fast) var(--ease-out-cubic);
}


.btn-reopen-consent:hover {
   background-color: var(--ink-inverse);
   color: var(--accent);
   border-color: var(--ink-inverse);
}


.btn-reopen-consent:active {
   background-color: var(--ground);
   color: var(--ink);
}


.btn-reopen-consent:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}



.cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: var(--ink);
   color: var(--ink-inverse);
   border-top: var(--border-heavy) solid var(--accent-bright);
   padding: var(--space-sm) var(--gutter);
   z-index: 9998;
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
   display: none;
}


.cookie-banner.is-active { display: block; }


.cookie-banner__inner {
   max-width: var(--container-max);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--space-sm);
}


.cookie-banner__text {
   font-size: var(--text-xs);
   line-height: var(--leading-snug);
   color: var(--ink-inverse-muted);
   max-width: 65ch;
}


.cookie-banner__text a {
   color: var(--ground);
   text-decoration: underline;
   font-weight: 600;
}


.cookie-banner__text a:hover { color: #ffffff; }


.cookie-banner__text a:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


.cookie-banner__actions {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
}


.cookie-banner__btn {
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   padding: var(--space-2xs) var(--space-sm);
   min-height: 38px;
   cursor: pointer;
   border-radius: var(--radius-none);
   border: var(--border-width) solid var(--ground);
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     color var(--duration-fast) var(--ease-out-cubic),
                     transform var(--duration-fast) var(--ease-out-cubic);
}


.cookie-banner__btn--accept {
   background-color: var(--ground);
   color: var(--ink);
}


.cookie-banner__btn--accept:hover {
   background-color: #d49b45;
   transform: translateY(-1px);
}


.cookie-banner__btn--accept:active {
   background-color: #9e6b1d;
   transform: translateY(1px);
}


.cookie-banner__btn--accept:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}


.cookie-banner__btn--decline {
   background-color: transparent;
   color: var(--ink-inverse-muted);
   border-color: rgba(247, 239, 226, 0.4);
}


.cookie-banner__btn--decline:hover {
   background-color: rgba(247, 239, 226, 0.1);
   color: var(--ink-inverse);
}


.cookie-banner__btn--decline:active { background-color: rgba(247, 239, 226, 0.2); }


.cookie-banner__btn--decline:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 2px;
}



.chat-launcher {
   position: fixed;
   bottom: var(--space-lg);
   right: var(--space-lg);
   z-index: 9990;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-xs);
   min-height: 52px;
   padding: var(--space-xs) var(--space-md);
   background-color: var(--accent);
   color: var(--ink-inverse);
   border: var(--border-heavy) solid var(--ink);
   box-shadow: var(--shadow-raised);
   font-family: var(--gogi-24f);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   cursor: pointer;
   transition: transform var(--duration-fast) var(--ease-out-cubic),
                     background-color var(--duration-fast) var(--ease-out-cubic),
                     box-shadow var(--duration-fast) var(--ease-out-cubic);
}


body.cookie-banner-active .chat-launcher { bottom: calc(var(--space-lg) + 70px); }


.chat-launcher:hover {
   background-color: var(--accent-surface);
   transform: translate(-2px, -2px);
   box-shadow: var(--shadow-high);
}


.chat-launcher:active {
   background-color: #000;
   transform: translate(2px, 2px);
   box-shadow: 1px 1px 0 rgba(20, 17, 12, 0.95);
}


.chat-launcher:focus-visible {
   outline: 3px solid var(--accent-bright);
   outline-offset: 2px;
}


.chat-badge {
   background-color: var(--accent-bright);
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 2px 6px;
   line-height: 1;
}


/* Chat Modal / Slide-out Panel */
.chat-panel {
   position: fixed;
   bottom: var(--space-lg);
   right: var(--space-lg);
   width: clamp(320px, 90vw, 400px);
   max-height: clamp(480px, 80vh, 620px);
   background-color: var(--surface);
   border: var(--border-heavy) solid var(--ink);
   box-shadow: var(--shadow-high);
   z-index: 9995;
   display: flex;
   flex-direction: column;
   transform: translateY(20px);
   opacity: 0;
   pointer-events: none;
   transition: transform var(--duration-base) var(--ease-out-cubic),
                     opacity var(--duration-base) var(--ease-out-cubic);
}


.chat-panel.is-open {
   transform: translateY(0);
   opacity: 1;
   pointer-events: auto;
}


body.cookie-banner-active .chat-panel.is-open { bottom: calc(var(--space-lg) + 70px); }


@media (max-width: 480px) {
   .chat-panel {
      right: 0;
      left: 0;
      bottom: 0 !important;
      width: 100%;
      max-height: 85vh;
   }
}


.chat-panel__header {
   background-color: var(--accent);
   color: var(--ink-inverse);
   padding: var(--space-sm) var(--space-md);
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: var(--border-heavy) solid var(--ink);
}


.chat-panel__title {
   font-family: var(--gogi-55e);
   font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: var(--tracking-wide);
   color: var(--ink-inverse);
   text-transform: uppercase;
}


.chat-panel__close {
   background: transparent;
   border: none;
   color: var(--ink-inverse);
   cursor: pointer;
   min-width: 36px;
   min-height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background-color var(--duration-fast) var(--ease-out-cubic),
                     color var(--duration-fast) var(--ease-out-cubic);
}


.chat-panel__close:hover {
   background-color: rgba(255, 255, 255, 0.15);
   color: var(--ground);
}


.chat-panel__close:active { background-color: rgba(255, 255, 255, 0.3); }


.chat-panel__close:focus-visible {
   outline: 2px solid var(--accent-bright);
   outline-offset: 1px;
}


.chat-panel__body {
   flex: 1 1 auto;
   overflow-y: auto;
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
   background-color: var(--ground);
}


.chat-msg {
   padding: var(--space-xs) var(--space-sm);
   max-width: 82%;
   font-size: var(--text-sm);
   line-height: var(--leading-snug);
   border: var(--border-width) solid var(--ink);
}


.chat-msg--desk {
   align-self: flex-start;
   background-color: var(--surface);
   color: var(--ink);
}


.chat-msg--client {
   align-self: flex-end;
   background-color: var(--accent);
   color: var(--ink-inverse);
}


.chat-msg__time {
   display: block;
   font-family: var(--gogi-24f);
   font-size: 0.65rem;
   margin-top: 4px;
   opacity: 0.75;
}


.chat-panel__footer {
   padding: var(--space-sm);
   background-color: var(--surface);
   border-top: var(--border-width) solid var(--line);
}


.chat-form {
   display: flex;
   gap: var(--space-2xs);
}


.chat-input {
   flex: 1;
   min-height: 40px;
   padding: 0 var(--space-xs);
   background-color: var(--ground);
   color: var(--ink);
   border: var(--border-heavy) solid var(--ink);
   font-size: var(--text-sm);
}


.chat-input:focus-visible { outline: 2px solid var(--accent-bright); }


.chat-send-btn {
   min-height: 40px;
   padding: 0 var(--space-sm);
   background-color: var(--accent);
   color: var(--ink-inverse);
   border: var(--border-heavy) solid var(--ink);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: background-color var(--duration-fast) var(--ease-out-cubic);
}


.chat-send-btn:hover { background-color: var(--accent-surface); }


.chat-send-btn:active { background-color: #000; }


.chat-send-btn:focus-visible { outline: 2px solid var(--accent-bright); }