.skip-link {
   position: absolute;
   top: -120px;
   left: var(--space-4);
   z-index: 900;
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0.6rem 1rem;
   background-color: var(--accent);
   color: var(--accent-ink);
   font-weight: 700;
   font-size: var(--text-sm);
   text-decoration: none;
   border-radius: var(--radius);
   transition: top var(--dur-fast) var(--ease-out);
}


.skip-link:focus {
   top: var(--space-3);
   outline: 2px solid var(--ink);
   outline-offset: 2px;
}


.site-rail {
   background-color: var(--surface);
   border-bottom: var(--border-thin);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-3) var(--gutter);
   min-width: 0;

}


.brand {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   text-decoration: none;
   border-radius: var(--radius);
   transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.brand img {
   height: 2.05rem;
   width: auto;

   max-width: 40vw;
   object-fit: contain;
}


.brand:hover { opacity: 0.84; }


.brand:active { transform: translateY(1px); }


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


.rail-nav,
.rail-meta { display: none; }


@media (min-width: 1024px) {
   .site-rail {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--gutter);
      border-bottom: var(--border-thin);
      border-right: 0;
      gap: var(--space-6);
   }


   .site-rail .rail-list {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
   }


   .site-rail .rail-nav {
      border-top: 0;
      padding-top: 0;
   }


   .site-rail .rail-meta { display: none; }


   .brand img {
      height: 2.25rem;
      max-width: 100%;
   }


   .rail-nav { display: block; }
}


.rail-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}


.rail-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   min-height: 44px;
   padding: 0.55rem 0.75rem;
   border-radius: var(--radius);
   border-left: 2px solid transparent;
   font-family: var(--tani-e9d);
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--ink);
   text-decoration: none;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}


.rail-link:hover {
   background-color: var(--surface-2);
   border-left-color: var(--ink-soft);
}


.rail-link:active { background-color: var(--line); }


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


.rail-link[aria-current='page'] {
   background-color: var(--ground);
   border-left-color: var(--accent);
   color: var(--accent);
   font-weight: 700;
}


.rail-link[aria-current='page'] span { color: #20626b !important; }


.rail-link .icon {
   color: var(--ink-soft);
   width: 1em;
   height: 1em;
}


.rail-link[aria-current='page'] .icon { color: var(--accent); }


.rail-meta-title {
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--ink-soft);
}


.rail-contact-link {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--space-2);
   min-height: 44px;
   padding-block: 0.35rem;
   font-size: var(--text-sm);
   color: var(--ink);
   text-decoration: none;
   border-radius: var(--radius);
   transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.rail-contact-link:hover { color: var(--accent); }


.rail-contact-link:active { transform: translateY(1px); }


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


.rail-address {
   font-style: normal;
   font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--ink-soft);
}


.rail-hours {
   font-family: var(--tani-cd5);

   font-size: var(--text-xs);
   color: var(--ink-soft);
}


.mobile-dock {
   position: fixed;
   inset: auto 0 0 0;
   z-index: 420;
   display: flex;
   align-items: stretch;
   min-height: var(--dock-h);
   padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
   background-color: var(--dock-bg);
   border-top: var(--border-thin);
   box-shadow: var(--shadow-dock);
}


@supports (backdrop-filter: blur(8px)) {
   .mobile-dock { backdrop-filter: blur(8px); }
}


@media (min-width: 1024px) {
   .mobile-dock,
   .dock-drawer,
   .dock-backdrop { display: none; }
}


.dock-item {
   flex: 1 1 0;
   min-width: 0;
   min-height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.2rem;
   padding: 0.35rem 0.2rem;
   color: var(--ink-soft);
   text-decoration: none;
   border-radius: var(--radius);
   appearance: none;
   background: none;
   border: 0;
   cursor: pointer;
   transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.dock-item .icon {
   width: 22px;
   height: 22px;
}


.dock-label {
   font-family: var(--tani-b6f);
   font-size: 11px;
   font-weight: 600;
   line-height: 1.1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
}


.dock-item:hover {
   background-color: var(--surface-2);
   color: var(--ink);
}


.dock-item:active {
   background-color: var(--line);
   transform: translateY(1px);
}


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


.dock-item[aria-current='page'],
.dock-item[aria-expanded='true'] {
   color: var(--accent);
   font-weight: 700;
}


.dock-backdrop {
   position: fixed;
   inset: 0;
   z-index: 440;
   background-color: var(--scrim);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}


.dock-backdrop.is-open {
   opacity: 1;
   visibility: visible;
}


.dock-drawer {
   position: fixed;
   inset: auto 0 0 0;
   z-index: 460;
   max-height: 82vh;
   overflow-y: auto;
   background-color: var(--ground);
   border-top: var(--border-strong);
   padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
   box-shadow: var(--shadow-lift);
   transform: translateY(100%);
   visibility: hidden;
   transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}


.dock-drawer.is-open {
   transform: translateY(0);
   visibility: visible;
}


.dock-drawer-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   padding-bottom: var(--space-3);
   border-bottom: var(--border-thin);
   margin-bottom: var(--space-4);
}


.dock-drawer-title {
   font-family: var(--tani-e9d);
   font-size: var(--text-lg);
   font-weight: 700;
   color: var(--ink);
}


.dock-drawer-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   padding: 0.5rem;
   background-color: var(--surface);
   border: var(--border-thin);
   border-radius: var(--radius);
   color: var(--ink);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.dock-drawer-close:hover {
   background-color: var(--surface-2);
   border-color: var(--ink);
}


.dock-drawer-close:active {
   background-color: var(--line);
   transform: translateY(1px);
}


.dock-drawer-close:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}


.dock-drawer-links {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-1);
}


.dock-drawer-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 44px;
   padding: 0.65rem 0.75rem;
   border-radius: var(--radius);
   font-family: var(--tani-e9d);
   font-size: var(--text-base);
   font-weight: 600;
   color: var(--ink);
   text-decoration: none;
   border-left: 2px solid transparent;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}


.dock-drawer-link:hover {
   background-color: var(--surface);
   border-left-color: var(--ink-soft);
}


.dock-drawer-link:active { background-color: var(--surface-2); }


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


.dock-drawer-link[aria-current='page'] {
   background-color: var(--surface);
   border-left-color: var(--accent);
   color: var(--accent);
}


.dock-drawer-meta {
   margin-top: var(--space-5);
   padding-top: var(--space-4);
   border-top: var(--border-thin);
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   font-size: var(--text-sm);
   color: var(--ink-soft);
}


.lockup {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
   gap: 0.14em;
   max-width: 100%;
   margin-left: 0;
   margin-right: auto;
}


.lockup-top {
   display: block;
   max-width: 100%;
}


.lockup-bottom {
   display: flex;
   align-items: center;
   gap: clamp(0.65rem, 2vw, 1.35rem);
   padding-left: clamp(0.75rem, 4vw, 3.25rem);
   max-width: 100%;
}


.lockup-rule {
   display: block;
   width: clamp(1.75rem, 5vw, 3.5rem);
   height: 2px;
   background-color: var(--accent);
   flex-shrink: 0;
}


.lockup-shift {
   display: block;
   min-width: 0;
}


.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.55rem;
   min-height: var(--control-h);
   height: var(--control-h);
   padding: 0 1.35rem;
   border-radius: var(--radius);
   border: 1px solid transparent;
   font-family: var(--tani-b6f);
   font-size: var(--text-base);
   font-weight: 700;
   line-height: 1.2;
   text-decoration: none;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.btn--primary {
   background-color: var(--accent);
   color: var(--accent-ink);
   border-color: var(--accent);
}


.btn--primary:hover {
   background-color: var(--accent-hover);
   border-color: var(--accent-hover);
   box-shadow: var(--shadow-card);
}


.btn--primary:active {
   background-color: var(--accent-active);
   border-color: var(--accent-active);
   transform: translateY(1px);
}


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


.btn--secondary {
   background-color: var(--surface);
   color: var(--ink);
   border-color: var(--line);
}


.btn--secondary:hover {
   background-color: var(--surface-2);
   border-color: var(--ink);
}


.btn--secondary:active {
   background-color: var(--line);
   transform: translateY(1px);
}


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


.btn--ghost {
   background-color: transparent;
   color: var(--ink);
   border-color: var(--line);
}


.btn--ghost:hover {
   background-color: var(--surface);
   border-color: var(--ink);
}


.btn--ghost:active {
   background-color: var(--surface-2);
   transform: translateY(1px);
}


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


.btn--sm {
   min-height: 44px;
   padding: 0.55rem 0.95rem;
   font-size: var(--text-sm);
}


.inline-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   min-height: 44px;
   padding-block: 0.4rem;
   font-weight: 700;
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 0.24em;
   border-radius: var(--radius);
   transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.inline-link:hover { color: var(--accent-hover); }


.inline-link:active {
   color: var(--accent-active);
   transform: translateY(1px);
}


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


.dialogue-stream {
   display: flex;
   flex-direction: column;
   gap: clamp(2rem, 4vw, 3.25rem);
}


.exchange {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   padding-top: var(--space-5);
   border-top: var(--border-thin);
}


.exchange:first-child {
   padding-top: 0;
   border-top: 0;
}


.customer-ask {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   max-width: 58ch;
   padding: var(--space-4) var(--space-5);
   background-color: var(--surface);
   border: var(--border-thin);
   border-left: 3px solid var(--ink-soft);
   border-radius: var(--radius);
}


.speaker-tag {
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--ink-soft);
   letter-spacing: 0.02em;
}


.customer-prompt {
   font-family: var(--tani-e9d);
   font-size: var(--text-xl);
   font-weight: 700;
   line-height: var(--leading-snug);
   color: var(--ink);
}


.crew-reply {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   padding-left: clamp(0.85rem, 2.5vw, 2rem);
   border-left: var(--border-accent);
}


.crew-reply-head {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--space-2) var(--space-4);
}


.crew-tag {
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--accent);
}


.rate-tag {
   display: inline-block;
   padding: 0.25rem 0.6rem;
   background-color: var(--surface);
   border: var(--border-thin);
   border-radius: var(--radius);
   font-family: var(--tani-cd5);
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
}


.reply-photo {
   margin-top: var(--space-2);
   border: var(--border-thin);
   border-radius: var(--radius);
   background-color: var(--surface);
   overflow: hidden;
}


.reply-photo img {
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
}


.reply-photo figcaption {
   padding: var(--space-3) var(--space-4);
   border-top: var(--border-thin);
   background-color: var(--surface);
   font-size: var(--text-sm);
   color: var(--ink-soft);
}


.spec-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
   min-width: 540px;
}


.spec-table th,
.spec-table td {
   padding: 0.85rem 1rem;
   text-align: left;
   vertical-align: top;
   border-bottom: var(--border-thin);
}


.spec-table thead th {
   background-color: var(--surface);
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--ink);
   border-bottom: 2px solid var(--ink);
}


.spec-table tbody tr:hover td { background-color: var(--surface); }


.spec-table td.num,
.spec-table th.num {
   font-family: var(--tani-cd5);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}


.panel-form {
   background-color: var(--surface);
   border: var(--border-thin);
   border-radius: var(--radius);
   padding: clamp(1.25rem, 3vw, 2.25rem);
}


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


@media (min-width: 640px) {
   .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.field {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   min-width: 0;
}


.field-label {
   font-size: var(--text-sm);
   font-weight: 700;
   color: var(--ink);
}


.field-hint {
   font-size: var(--text-xs);
   color: var(--ink-soft);
}


.field-input,
.field-select {
   width: 100%;
   min-height: var(--control-h);
   height: var(--control-h);
   padding: 0 0.85rem;
   background-color: var(--ground);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   color: var(--ink);
   font-size: var(--text-base);
   transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}


.field-textarea {
   width: 100%;
   min-height: 128px;
   padding: 0.65rem 0.85rem;
   background-color: var(--ground);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   color: var(--ink);
   font-size: var(--text-base);
   transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}


.field-textarea {
   min-height: 128px;
   resize: vertical;
   line-height: var(--leading-normal);
}


.field-input:hover,
.field-select:hover,
.field-textarea:hover {
   border-color: var(--ink-soft);
   background-color: #fff;
}


.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 0;
   border-color: var(--accent);
   background-color: #fff;
}


.field.is-invalid .field-input,
.field.is-invalid .field-select,
.field.is-invalid .field-textarea,
.field-input[aria-invalid='true'],
.field-select[aria-invalid='true'],
.field-textarea[aria-invalid='true'] {
   border-color: var(--error);
   background-color: var(--error-bg);
}


.field-error {
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--error);
   min-height: 1.25em;
}


.field-error:empty { display: none; }


.field-check {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   min-height: 44px;
   padding: 0.45rem 0;
   cursor: pointer;
}


.field-check input[type='checkbox'] {
   width: 22px;
   height: 22px;
   margin-top: 0.1rem;
   flex-shrink: 0;
   accent-color: var(--accent);
   cursor: pointer;
}


.field-check input[type='checkbox']:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}


.field-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
}


.form-status {
   padding: var(--space-4);
   border-radius: var(--radius);
   border: var(--border-thin);
   background-color: var(--ground);
   font-size: var(--text-base);
}


.form-status:empty { display: none; }


.form-status.is-error {
   border-color: var(--error);
   background-color: var(--error-bg);
   color: var(--error);
   font-weight: 600;
}


.form-status.is-success {
   border-color: var(--accent);
   background-color: var(--accent-tint);
   color: var(--ink);
   font-weight: 600;
}


.site-footer {
   margin-top: auto;
   background-color: var(--surface);
   border-top: var(--border-strong);
   padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) var(--space-6);
}


.footer-inner {
   max-width: var(--content-max);
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
}


.footer-top {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-5);
   padding-bottom: var(--space-5);
   border-bottom: var(--border-thin);
}


.footer-brand img {
   height: 2.35rem;
   width: auto;
   max-width: 72vw;
}


.footer-top-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   min-height: 44px;
   padding: 0.5rem 0.9rem;
   background-color: var(--ground);
   border: var(--border-thin);
   border-radius: var(--radius);
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--ink);
   text-decoration: none;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.footer-top-link:hover {
   background-color: var(--surface-2);
   border-color: var(--ink);
}


.footer-top-link:active {
   background-color: var(--line);
   transform: translateY(1px);
}


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


.footer-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-6);
}


@media (min-width: 720px) {
   .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


.footer-heading {
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ink-soft);
   margin-bottom: var(--space-3);
}


.footer-nav-list {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
}


.footer-link,
.footer-pref-btn {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0.35rem 0;
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--ink);
   text-decoration: none;
   appearance: none;
   background: none;
   border: 0;
   cursor: pointer;
   text-align: left;
   border-radius: var(--radius);
   transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.footer-link:hover,
.footer-pref-btn:hover {
   color: var(--accent);
   text-decoration: underline;
}


.footer-link:active,
.footer-pref-btn:active {
   color: var(--accent-active);
   transform: translateY(1px);
}


.footer-link:focus-visible,
.footer-pref-btn:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}


.footer-link[aria-current='page'] {
   color: var(--accent);
   font-weight: 700;
}


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


.footer-facts address {
   font-style: normal;
   color: var(--ink-soft);
   line-height: 1.5;
}


.footer-bottom {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   padding-top: var(--space-4);
   border-top: var(--border-thin);
   font-size: var(--text-xs);
   color: var(--ink-soft);
}


.cookie-banner {
   position: fixed;
   inset: auto 0 calc(var(--dock-h) + env(safe-area-inset-bottom)) 0;
   z-index: 480;
   background-color: var(--ink);
   color: var(--ground);
   border-top: 2px solid var(--accent);
   padding: 0.65rem var(--gutter);
   box-shadow: var(--shadow-lift);
}


@media (min-width: 1024px) {
   .cookie-banner { inset: auto 0 0 0; }
}


.cookie-banner[hidden] { display: none; }


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


.cookie-banner-copy {
   font-size: var(--text-sm);
   line-height: 1.4;
   color: var(--ground);
   max-width: 62ch;
}


.cookie-banner-copy a {
   color: #b4e1e7;
   font-weight: 600;
   text-decoration: underline;
   border-radius: var(--radius);
   transition: color var(--dur-fast) var(--ease-out);
}


.cookie-banner-copy a:hover { color: #fff; }


.cookie-banner-copy a:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}


.cookie-banner-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-2);
}


.cookie-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;
   padding: 0.45rem 0.95rem;
   border-radius: var(--radius);
   font-size: var(--text-sm);
   font-weight: 700;
   cursor: pointer;
   border: 1px solid transparent;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.cookie-btn--accept {
   background-color: var(--accent);
   color: var(--accent-ink);
   border-color: var(--accent);
}


.cookie-btn--accept:hover {
   background-color: var(--accent-hover);
   border-color: var(--accent-hover);
}


.cookie-btn--accept:active {
   background-color: var(--accent-active);
   transform: translateY(1px);
}


.cookie-btn--accept:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}


.cookie-btn--decline {
   background-color: transparent;
   color: var(--ground);
   border-color: var(--line);
}


.cookie-btn--decline:hover {
   background-color: rgba(255, 255, 255, 0.12);
   border-color: var(--ground);
}


.cookie-btn--decline:active {
   background-color: rgba(255, 255, 255, 0.22);
   transform: translateY(1px);
}


.cookie-btn--decline:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}


.chat-launcher {
   position: fixed;
   right: var(--space-4);
   bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--space-3));
   z-index: 430;
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   min-height: 46px;
   padding: 0.65rem 1rem;
   background-color: var(--ink);
   color: var(--ground);
   border: 1px solid var(--accent);
   border-radius: var(--radius);
   box-shadow: var(--shadow-lift);
   font-size: var(--text-sm);
   font-weight: 700;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), bottom var(--dur-base) var(--ease-out);
}


@media (min-width: 1024px) {
   .chat-launcher {
      right: var(--space-5);
      bottom: var(--space-5);
   }
}


body.has-consent-banner .chat-launcher { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 9.5rem); }


@media (max-width: 480px) {
   body.has-consent-banner .chat-launcher { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 11.5rem); }
}


@media (min-width: 1024px) {
   body.has-consent-banner .chat-launcher { bottom: 5.5rem; }
}


.chat-launcher:hover {
   background-color: var(--accent);
   border-color: var(--accent);
   color: var(--accent-ink);
   box-shadow: var(--shadow-lift);
}


.chat-launcher:active {
   background-color: var(--accent-active);
   transform: translateY(1px);
}


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


.chat-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 1.35rem;
   height: 1.35rem;
   padding: 0 0.35rem;
   background-color: var(--accent);
   color: var(--accent-ink);
   border-radius: var(--radius);
   font-family: var(--tani-cd5);
   font-size: 0.75rem;
   font-weight: 700;
}


.chat-badge[hidden] { display: none; }


.chat-panel {
   position: fixed;
   right: var(--space-3);
   left: var(--space-3);
   bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--space-3));
   z-index: 490;
   display: flex;
   flex-direction: column;
   max-height: min(74vh, 540px);
   background-color: var(--ground);
   border: var(--border-strong);
   border-radius: var(--radius);
   box-shadow: var(--shadow-lift);
}


@media (min-width: 520px) {
   .chat-panel {
      left: auto;
      width: 390px;
      right: var(--space-5);
   }
}


@media (min-width: 1024px) {
   .chat-panel { bottom: var(--space-5); }
}


.chat-panel[hidden] { display: none; }


.chat-panel-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   background-color: var(--ink);
   color: var(--ground);
   border-bottom: 2px solid var(--accent);
}


.chat-panel-title {
   font-family: var(--tani-e9d);
   font-size: var(--text-base);
   font-weight: 700;
   color: var(--ground);
}


.chat-panel-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: var(--radius);
   color: var(--ground);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}


.chat-panel-close:hover {
   background-color: rgba(255, 255, 255, 0.14);
   border-color: var(--ground);
}


.chat-panel-close:active {
   background-color: rgba(255, 255, 255, 0.24);
   transform: translateY(1px);
}


.chat-panel-close:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}


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


.chat-msg {
   padding: 0.65rem 0.85rem;
   border-radius: var(--radius);
   border: var(--border-thin);
   font-size: var(--text-sm);
   line-height: 1.5;
   max-width: 88%;
}


.chat-msg--crew {
   align-self: flex-start;
   background-color: var(--surface);
   color: var(--ink);
   border-left: 2px solid var(--accent);
}


.chat-msg--visitor {
   align-self: flex-end;
   background-color: var(--ink);
   color: var(--ground);
   border-color: var(--ink);
}


.chat-msg-meta {
   display: block;
   margin-top: 0.25rem;
   font-family: var(--tani-cd5);
   font-size: 0.72rem;
   opacity: 0.78;
}


.chat-form {
   padding: var(--space-3) var(--space-4) var(--space-4);
   background-color: var(--surface);
   border-top: var(--border-thin);
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}


.chat-compose-row {
   display: flex;
   gap: var(--space-2);
   align-items: stretch;
}


.chat-compose-row .field-input {
   flex: 1 1 auto;
   min-width: 0;
}


.tool-box {
   background-color: var(--surface);
   border: var(--border-thin);
   border-radius: var(--radius);
   padding: clamp(1.25rem, 3vw, 2.25rem);
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
}


.tool-controls {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-4);
}


@media (min-width: 640px) {
   .tool-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.tool-readout {
   background-color: var(--ground);
   border: var(--border-thin);
   border-left: 3px solid var(--accent);
   border-radius: var(--radius);
   padding: var(--space-5);
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}


.tool-output-value {
   font-family: var(--tani-cd5);
   font-size: var(--text-2xl);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: var(--ink);
   line-height: 1.2;
}


.tool-note {
   font-size: var(--text-base);
   color: var(--ink);
   max-width: 62ch;
}


.tool-disclaimer {
   font-family: var(--tani-cd5);
   font-size: var(--text-xs);
   color: var(--ink-soft);
}