/* Warm editorial contact page. Direction: PROJECT_DESIGN.md. */
/* ---------------------------------------------------------------- tokens */
body.kisaka-contact-page
   {
      --contact-bg: #f4f1ed;
      --contact-surface: #fff;
      --contact-field: #faf9f7;
      --contact-well: #efeae4;
      --contact-well-hover: #e6dfd8;
      --contact-well-error: #f8eeef;
      --contact-focus-ring: 0 0 0 2px var(--contact-surface), 0 0 0 4px var(--contact-accent);
      --contact-error-ring: 0 0 0 2px var(--contact-surface), 0 0 0 4px var(--contact-error);
      --contact-hover: #f5eeeb;
      --contact-text: #251c1f;
      --contact-muted: #665b5f;
      --contact-soft: #70646a;
      --contact-line: #e2dad6;
      --contact-rule: #ddd5d1;
      --contact-control-line: #c3b7b3;
      --contact-control-line-strong: #97858c;
      --contact-accent: var(--kisaka-red);
      --contact-error: #b1162b;
      --contact-shadow: 0 1px 2px rgba(47, 28, 30, 0.04), 0 18px 48px rgba(47, 28, 30, 0.07);
      --contact-chrome: rgba(244, 241, 237, 0.82);
      background: var(--contact-bg);
      color: var(--contact-text);
   }

/* --------------------------------------------------------- header chrome */
/* A translucent band the full width of the viewport, so page content passes
   cleanly underneath instead of showing through beside the container. */
body.kisaka-contact-page .header .header-inner,
body.kisaka-contact-page .header.sticky .header-inner
   {
      min-height: var(--kisaka-header-h);
      background: var(--contact-chrome);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      backdrop-filter: blur(18px) saturate(180%);
      border: 0;
      box-shadow: none;
   }

body.kisaka-contact-page .header .nav li a::before
   {
      background: var(--kisaka-red);
   }

body.kisaka-contact-page .header .logo,
body.kisaka-contact-page .header .kisaka-logo-text,
body.kisaka-contact-page .header .nav.menu > li > a
   {
      color: var(--contact-text);
   }

body.kisaka-contact-page .header .nav.menu > li.active > a,
body.kisaka-contact-page .header .nav.menu > li > a:hover
   {
      color: var(--contact-accent);
   }

body.kisaka-contact-page .header .kisaka-logo-tagline
   {
      color: var(--contact-muted);
   }

body.kisaka-contact-page .header .slicknav_menu .slicknav_icon-bar
   {
      background: var(--contact-text);
   }

/* The contact view is one screen. Lenis owns the scroll into the footer. */
html:has(body.kisaka-contact-page)
   {
      scroll-behavior: auto;
      scroll-snap-type: none;
   }

body.kisaka-contact-page
   {
      scroll-snap-type: none;
   }

/* ------------------------------------------------------------ page basis */
.contact-page
   {
      font-family: var(--kisaka-font-accent);
      font-optical-sizing: auto;
   }

.contact-page, .contact-page *, .contact-page *::before, .contact-page *::after
   {
      box-sizing: border-box;
   }

.contact-page p
   {
      color: var(--contact-muted);
      font-size: 1rem;
      line-height: 1.65;
   }

.contact-page svg
   {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
   }

.contact-page a, .contact-page button, .contact-page summary
   {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
   }

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page summary:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible,
.kisaka-contact-page .header a:focus-visible
   {
      outline: 2px solid var(--contact-accent);
      outline-offset: 4px;
   }

.contact-skip
   {
      position: fixed;
      top: 12px;
      left: 16px;
      z-index: 100000;
      padding: 14px 20px;
      background: #fff;
      color: var(--contact-text);
      border-radius: 8px;
      transform: translateY(-180%);
   }

.contact-skip:focus
   {
      transform: none;
   }

.contact-shell, .kisaka-contact-page .header .header-inner .container
   {
      width: min(1280px, calc(100% - 2 * clamp(24px, 6vw, 100px)));
      margin-inline: auto;
      padding-inline: 0;
   }

.kisaka-contact-page .header .kisaka-header-row
   {
      margin-inline: 0;
   }

.kisaka-contact-page .header .kisaka-header-brand
   {
      margin-left: 0;
   }

/* ----------------------------------------------------------------- intro */
.contact-intro
   {
      padding: calc(var(--kisaka-header-h) + 4.5rem) 0 5.5rem;
   }

.contact-intro__grid
   {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(40px, 6vw, 96px);
      align-items: stretch;
   }

.contact-intro__copy
   {
      min-width: 0;
   }

.contact-intro h1
   {
      margin: 0;
      color: var(--contact-text);
      font-family: var(--kisaka-font-accent);
      font-size: clamp(2.75rem, 4.6vw, 4rem);
      font-weight: 500;
      letter-spacing: -0.04em;
      line-height: 1.02;
      overflow-wrap: anywhere;
   }

.contact-intro h1 > .contact-word--accent
   {
      color: var(--contact-accent);
   }

.contact-form-link
   {
      display: none;
   }

.contact-page .contact-intro__lead
   {
      max-width: 28rem;
      margin-top: 1.25rem;
      color: var(--contact-muted);
      font-size: 1.0625rem;
      line-height: 1.6;
   }

/* ------------------------------------------------------- direct contacts */
.contact-direct
   {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 2rem 1.5rem;
      margin: 2.75rem 0 0;
      padding: 0;
   }

.contact-direct__item
   {
      min-width: 0;
   }

.contact-direct__item dt
   {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-bottom: 0.625rem;
      color: var(--contact-accent);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
   }

.contact-direct__item dd
   {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
   }

.contact-direct__item a
   {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 44px;
      max-width: 100%;
      color: var(--contact-text);
      font-size: 1.0625rem;
      font-weight: 400;
      line-height: 1.5;
      overflow-wrap: anywhere;
      text-decoration: none;
   }

.contact-direct__item a[href^="mailto:"], .contact-direct__item a[href^="tel:"]
   {
      transition: opacity 240ms var(--kisaka-ease-out);
   }

.contact-page .contact-direct__icon
   {
      flex: none;
      width: 1rem;
      height: 1rem;
      stroke-width: 1.75;
      color: currentColor;
   }

.contact-direct__item a[href^="mailto:"]:hover,
.contact-direct__item a[href^="mailto:"]:focus-visible,
.contact-direct__item a[href^="tel:"]:hover,
.contact-direct__item a[href^="tel:"]:focus-visible
   {
      opacity: 0.6;
      color: var(--contact-text);
      text-decoration: none;
   }

/* Shared alignment and space establish groups without rules or containers. */
.contact-office
   {
      grid-column: 1 / -1;
      padding-top: 0.5rem;
   }

.contact-office address
   {
      margin: 0;
      color: var(--contact-text);
      font-size: 1.0625rem;
      font-style: normal;
      line-height: 1.6;
   }

.contact-map
   {
      display: block;
      width: 100%;
      max-width: 100%;
      margin-top: 1rem;
      border-radius: 20px;
      overflow: hidden;
      color: inherit;
      text-decoration: none;
      transform-origin: 50% 50%;
      transition: transform 100ms ease-out;
   }

.contact-map:hover, .contact-map:focus-visible
   {
      text-decoration: none;
   }

.contact-map:active
   {
      transform: scale(0.99);
      transition-duration: 0ms;
   }

.contact-map__frame
   {
      display: block;
      position: relative;
      width: 100%;
      height: 320px;
      background: var(--contact-well);
      pointer-events: none;
   }

.contact-map__frame iframe
   {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      pointer-events: none;
   }

.contact-form-link > span[aria-hidden="true"]
   {
      font-size: 0.875em;
      line-height: 1;
      color: var(--contact-soft);
   }

.contact-form-link
   {
      align-items: center;
      gap: 0.75rem;
      min-height: 44px;
      color: var(--contact-text);
      font-size: 0.9375rem;
      line-height: 1.5;
      text-decoration: none;
      transition: color 160ms ease;
   }

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

.contact-page a:active
   {
      color: var(--kisaka-red-800);
      transition-duration: 0ms;
   }

/* ------------------------------------------------------------- RFP route */
/* A real control, not a card. Same flying arrow as the rest of the site;
   sentence case so it does not twin the form’s tracked Send label. */
.contact-rfp
   {
      display: grid;
      justify-items: start;
      gap: 0.35rem;
      min-width: 0;
      margin-top: 1.5rem;
      padding: 0;
   }

.contact-page .contact-rfp__ask
   {
      margin: 0;
      color: var(--contact-text);
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-size: 1.25rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.3;
   }

.contact-rfp__action, .contact-rfp__action:visited
   {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      margin-top: 0.55rem;
      padding: 12px 20px 12px 22px;
      border: 1px solid var(--contact-accent);
      border-radius: var(--kisaka-btn-radius, 8px);
      background: var(--contact-accent);
      color: #fff;
      font-family: var(--kisaka-font-accent);
      font-size: 0.9375rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      text-decoration: none;
      transform-origin: 50% 50%;
      transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease-out;
   }

.contact-rfp__action > span:first-child
   {
      white-space: nowrap;
   }

.contact-rfp__action .kisaka-home-launch__btn-arrow-box
   {
      width: 14px;
      height: 14px;
   }

.contact-rfp__action .kisaka-home-launch__btn-arrow
   {
      width: 100%;
      height: 100%;
      stroke-width: 2;
   }

.contact-rfp__action:hover, .contact-rfp__action:focus-visible
   {
      background: var(--kisaka-red-700);
      border-color: var(--kisaka-red-700);
      color: #fff;
      text-decoration: none;
   }

.contact-page .contact-rfp__action:active
   {
      background: var(--kisaka-red-800);
      border-color: var(--kisaka-red-800);
      color: #fff;
      transform: scale(0.97);
      transition-duration: 0ms;
   }

.contact-page .contact-rfp__hint
   {
      display: block;
      max-width: 34ch;
      margin: 0;
      color: var(--contact-muted);
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.55;
   }

/* ------------------------------------------------------------ form panel */
/* Height is locked in JS to the resting form. Errors only tint the fields
   and reword the note under the heading, and the status line borrows height
   from the message field, so the card itself does not grow or shrink. */
.contact-panel
   {
      align-self: start;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: clamp(1.75rem, 2.6vw, 2.5rem);
      background: var(--contact-surface);
      border: 0;
      border-radius: 20px;
      box-shadow: var(--contact-shadow);
      scroll-margin-top: calc(var(--kisaka-header-h) + 28px);
   }

.contact-panel__form-view
   {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
   }

.contact-panel__heading
   {
      margin-bottom: 1.75rem;
      padding-bottom: 0.25rem;
   }

.contact-panel__heading h2
   {
      font-family: "Newsreader", Georgia, "Times New Roman", serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-size: clamp(1.375rem, 1.9vw, 1.625rem);
      letter-spacing: -0.01em;
      color: var(--contact-text);
      line-height: 1.25;
   }

.contact-page .contact-panel__heading p
   {
      margin-top: 6px;
      font-size: 0.8125rem;
      color: var(--contact-soft);
      transition: color 160ms ease;
   }

.contact-page .contact-panel__heading p.is-error
   {
      color: var(--contact-error);
      font-weight: 500;
   }

.contact-field
   {
      position: relative;
      min-width: 0;
      margin-bottom: 1.25rem;
   }

.contact-field > label
   {
      display: block;
      margin-bottom: 0.4375rem;
      color: var(--contact-text);
      font-size: 0.875rem;
      line-height: 1.4;
      font-weight: 500;
      letter-spacing: 0;
   }

.contact-optional
   {
      color: var(--contact-soft);
      font-size: 0.8125rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
   }

.contact-field input:not([type="checkbox"]), .contact-field select, .contact-field textarea
   {
      display: block;
      width: 100%;
      min-width: 0;
      min-height: 48px;
      margin: 0;
      padding: 12px 14px;
      border: 0;
      border-radius: 10px;
      background: var(--contact-well);
      color: var(--contact-text);
      font-family: var(--kisaka-font-accent);
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 400;
      box-shadow: none;
      transition: background-color 160ms ease, box-shadow 160ms ease;
      color-scheme: light;
   }

.contact-field input::placeholder, .contact-field textarea::placeholder
   {
      color: var(--contact-soft);
      opacity: 1;
   }

.contact-field input:hover, .contact-field select:hover, .contact-field textarea:hover
   {
      background: var(--contact-well-hover);
   }

.contact-field input:active, .contact-field select:active, .contact-field textarea:active
   {
      background: var(--contact-well-hover);
      transition-duration: 0ms;
   }

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus,
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible
   {
      outline: none;
      background: var(--contact-well);
      box-shadow: var(--contact-focus-ring);
   }

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus
   {
      -webkit-text-fill-color: var(--contact-text);
      caret-color: var(--contact-text);
      box-shadow: 0 0 0 1000px var(--contact-well) inset;
      transition: background-color 5000s ease-out;
   }

.contact-field input:-webkit-autofill:focus
   {
      box-shadow: 0 0 0 1000px var(--contact-well) inset, var(--contact-focus-ring);
   }

.contact-field textarea
   {
      min-height: 128px;
      resize: none;
   }

.contact-form
   {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
   }

.contact-field--message
   {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
   }

.contact-panel.is-fixed .contact-field--message textarea
   {
      flex: 1 1 auto;
      height: auto;
      min-height: 3.5rem;
   }

.contact-field select
   {
      appearance: none;
      padding-right: 40px;
      cursor: pointer;
   }

.contact-field select:invalid
   {
      color: var(--contact-soft);
   }

.contact-field select option
   {
      color: var(--contact-text);
      background: var(--contact-field);
   }

.contact-select
   {
      position: relative;
      z-index: 1;
   }

/* niceSelect copies classes onto its div — hide the native control by tag, not class. */
.contact-select > select
   {
      display: none !important;
      pointer-events: none !important;
   }

.contact-select > svg
   {
      pointer-events: none;
      position: absolute;
      right: 14px;
      top: 15px;
      z-index: 2;
      width: 18px;
      height: 18px;
      color: var(--contact-muted);
   }

.contact-select:has(.nice-select.open)
   {
      z-index: 5;
   }

.contact-select .nice-select
   {
      float: none;
      width: 100%;
      min-height: 48px;
      height: auto;
      margin: 0;
      padding: 12px 40px 12px 14px;
      border: 0;
      border-radius: 10px;
      background: var(--contact-well);
      color: var(--contact-text);
      font-family: var(--kisaka-font-accent);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      box-shadow: none;
      transition: background-color 160ms ease, box-shadow 160ms ease;
   }

.contact-select .nice-select:hover
   {
      background: var(--contact-well-hover);
   }

.contact-select .nice-select:active
   {
      background: var(--contact-well-hover);
      transition-duration: 0ms;
   }

.contact-select .nice-select:focus, .contact-select .nice-select.open
   {
      outline: none;
      background: var(--contact-well);
      box-shadow: var(--contact-focus-ring);
   }

.contact-select .nice-select::after
   {
      display: none;
   }

.contact-select .nice-select .current
   {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

.contact-select > select:invalid + .nice-select .current
   {
      color: var(--contact-soft);
   }

.contact-select .nice-select .list
   {
      width: 100%;
      margin-top: 6px;
      padding: 6px 0;
      border: 1px solid var(--contact-line);
      border-radius: 10px;
      background: var(--contact-surface);
      box-shadow: var(--contact-shadow);
      overflow: hidden;
      z-index: 20;
      transform-origin: 50% 0;
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 200ms var(--kisaka-ease-out), opacity 200ms var(--kisaka-ease-out);
   }

.contact-select .nice-select.open .list
   {
      transform: translateY(0);
      opacity: 1;
   }

.contact-select .nice-select .option
   {
      min-height: 40px;
      padding: 10px 14px;
      line-height: 1.4;
      color: var(--contact-text);
      font-weight: 400;
   }

.contact-select .nice-select .option:hover,
.contact-select .nice-select .option.focus,
.contact-select .nice-select .option.selected.focus
   {
      background: var(--contact-hover);
      color: var(--contact-text);
   }

.contact-select .nice-select .option.selected
   {
      font-weight: 500;
      color: var(--contact-accent);
      background: transparent;
   }

.contact-select .nice-select.disabled
   {
      cursor: wait;
      opacity: 0.65;
   }

.contact-select .nice-select[aria-invalid="true"],
.contact-select .nice-select[aria-invalid="true"]:hover,
.contact-select .nice-select[aria-invalid="true"]:active
   {
      background: var(--contact-well-error);
      box-shadow: inset 0 0 0 1.5px var(--contact-error);
   }

.contact-select .nice-select[aria-invalid="true"]:focus,
.contact-select .nice-select[aria-invalid="true"].open
   {
      background: var(--contact-well-error);
      box-shadow: var(--contact-error-ring);
   }

.contact-form__row
   {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
   }

.contact-field input[aria-invalid="true"]:not([type="checkbox"]),
.contact-field select[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"],
.contact-field input[aria-invalid="true"]:hover,
.contact-field select[aria-invalid="true"]:hover,
.contact-field textarea[aria-invalid="true"]:hover,
.contact-field input[aria-invalid="true"]:active,
.contact-field select[aria-invalid="true"]:active,
.contact-field textarea[aria-invalid="true"]:active
   {
      background: var(--contact-well-error);
      box-shadow: inset 0 0 0 1.5px var(--contact-error);
   }

.contact-field input[aria-invalid="true"]:focus,
.contact-field select[aria-invalid="true"]:focus,
.contact-field textarea[aria-invalid="true"]:focus,
.contact-field input[aria-invalid="true"]:focus-visible,
.contact-field select[aria-invalid="true"]:focus-visible,
.contact-field textarea[aria-invalid="true"]:focus-visible
   {
      background: var(--contact-well-error);
      box-shadow: var(--contact-error-ring);
   }

.contact-consent
   {
      margin-bottom: 1.5rem;
   }

.contact-consent input[aria-invalid="true"]
   {
      outline: 2px solid var(--contact-error);
      outline-offset: 2px;
      border-radius: 3px;
   }

.contact-consent:has(input[aria-invalid="true"]) > label,
.contact-consent:has(input[aria-invalid="true"]) > label a
   {
      color: var(--contact-error);
   }

.contact-consent > label
   {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      min-height: 44px;
      padding: 5px 0;
      font-size: 0.8125rem;
      line-height: 1.6;
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
   }

.contact-consent input
   {
      appearance: auto;
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      margin: 2px 0 0;
      accent-color: var(--kisaka-red);
      color-scheme: light;
   }

.contact-consent a, .contact-form__fallback a
   {
      color: var(--contact-text);
      text-decoration: none;
      transition: color 160ms ease;
   }

.contact-consent a:hover,
.contact-consent a:focus-visible,
.contact-form__fallback a:hover,
.contact-form__fallback a:focus-visible
   {
      color: var(--contact-accent);
   }

.contact-trap
   {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
   }

/* The page's primary action: it must outweigh the secondary RFP route. */
.contact-send
   {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      min-height: 52px;
      padding: 16px 30px;
      border: 1px solid var(--contact-accent);
      border-radius: var(--kisaka-btn-radius, 10px);
      background: var(--contact-accent);
      color: #fff;
      font-family: var(--kisaka-font-accent);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 200ms ease, border-color 200ms ease, transform 100ms ease-out;
   }

.contact-send > span:first-child
   {
      white-space: nowrap;
   }

.contact-send .kisaka-home-launch__btn-arrow-box
   {
      width: 14px;
      height: 14px;
   }

.contact-send .kisaka-home-launch__btn-arrow
   {
      width: 100%;
      height: 100%;
      stroke-width: 2;
   }

.contact-send:hover, .contact-send:focus-visible
   {
      background: var(--kisaka-red-700);
      border-color: var(--kisaka-red-700);
      color: #fff;
   }

.contact-send:active
   {
      background: var(--kisaka-red-800);
      border-color: var(--kisaka-red-800);
      transform: scale(0.985);
      transition-duration: 0ms;
   }

.contact-send:disabled
   {
      cursor: wait;
      opacity: 0.65;
   }

.contact-page .contact-form__status
   {
      flex: 0 0 auto;
      margin-top: 0.75rem;
      margin-bottom: 0;
      padding: 10px 12px;
      border: 1px solid var(--contact-rule);
      border-radius: 10px;
      background: var(--contact-field);
      color: var(--contact-text);
      font-size: 0.8125rem;
      line-height: 1.4;
   }

.contact-page .contact-form__status[data-state="error"]
   {
      color: var(--contact-error);
      border-color: var(--contact-error);
      background: transparent;
   }

.contact-page .contact-form__fallback
   {
      margin-top: 16px;
      font-size: 0.875rem;
   }

/* ------------------------------------------------------ success confirm */
.contact-panel__form-view, .contact-panel__done
   {
      transition: opacity 200ms ease, visibility 200ms ease;
   }

.contact-panel__done[hidden]
   {
      display: none !important;
   }

.contact-panel:not(.is-done) .contact-panel__done
   {
      position: absolute;
      inset: clamp(1.75rem, 2.6vw, 2.5rem);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }

.contact-panel.is-done .contact-panel__form-view
   {
      visibility: hidden;
      pointer-events: none;
   }

.contact-panel.is-done .contact-panel__done
   {
      position: absolute;
      inset: clamp(1.75rem, 2.6vw, 2.5rem);
      opacity: 1;
      visibility: visible;
   }

.contact-done__title
   {
      margin: 0;
      max-width: 28ch;
      color: var(--contact-text);
      font-family: var(--kisaka-font-family);
      font-size: clamp(1.375rem, 1.9vw, 1.625rem);
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1.3;
   }

.contact-done__title:focus
   {
      outline: none;
   }

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

.contact-done__actions
   {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
      margin-top: 1.75rem;
   }

.contact-done__link
   {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      color: var(--contact-accent);
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      transition: color 160ms ease;
   }

.contact-done__link:hover, .contact-done__link:focus-visible
   {
      color: var(--kisaka-red-800);
   }

.contact-done__again
   {
      appearance: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      margin-top: 0.75rem;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--contact-text);
      font-family: var(--kisaka-font-accent);
      font-size: 0.9375rem;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: color 160ms ease;
   }

.contact-done__again:hover, .contact-done__again:focus-visible
   {
      color: var(--contact-accent);
   }

.contact-done__again:active
   {
      color: var(--kisaka-red-800);
      transition-duration: 0ms;
   }

/* --------------------------------------------------------------- arrival */
/* The page lands in order inside the 1.2s page fade: headline word by word
   (Insights' word-in, minus the tilt), then the copy, then the form.
   `backwards` only holds the hidden frame during the delay, so nothing keeps
   a transform once it lands and nothing ever blocks a click. */
.contact-word
   {
      display: inline-block;
      animation: contact-word-in 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
      animation-delay: 80ms;
   }

.contact-word--accent
   {
      animation-delay: 125ms;
   }

.contact-page .contact-intro__lead,
.contact-rfp,
.contact-form-link,
.contact-direct,
.contact-panel
   {
      animation: contact-rise var(--kisaka-dur-reveal) var(--kisaka-ease-out) backwards;
   }

.contact-page .contact-intro__lead
   {
      animation-delay: 180ms;
   }

.contact-rfp
   {
      animation-delay: 240ms;
   }

.contact-form-link, .contact-direct
   {
      animation-delay: 300ms;
   }

.contact-panel
   {
      --contact-rise: 16px;
      animation-delay: 360ms;
   }

/* Side by side, the copy column clips at the map's bottom edge, so any rise
   slices the map flat until it lands. Fade the contacts in place instead. */
@media (min-width: 901px)
   {
      .contact-direct
         {
            animation-name: contact-fade;
         }
   }

@keyframes contact-word-in
   {
      from
         {
            opacity: 0;
            transform: translate3d(0, 0.35em, 0);
         }
   }

@keyframes contact-rise
   {
      from
         {
            opacity: 0;
            transform: translate3d(0, var(--contact-rise, 12px), 0);
         }
   }

@keyframes contact-fade
   {
      from
         {
            opacity: 0;
         }
   }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px)
   {
      .contact-intro__grid
         {
            gap: 2.5rem;
         }

      .contact-direct
         {
            grid-template-columns: 1fr;
            gap: 1.5rem;
         }

      .contact-form__row
         {
            grid-template-columns: 1fr;
            gap: 0;
         }
   }

@media (max-width: 900px)
   {
      .contact-intro
         {
            padding-top: calc(var(--kisaka-header-h) + 3rem);
            padding-bottom: 3.5rem;
         }

      .contact-intro__grid
         {
            grid-template-columns: 1fr;
            gap: 2.5rem;
         }

      .contact-intro h1
         {
            font-size: clamp(2.5rem, 7vw, 3.5rem);
         }

      .contact-form-link
         {
            display: inline-flex;
            margin-top: 1.25rem;
         }

      .contact-direct
         {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1.75rem 2rem;
            margin-top: 2.25rem;
         }

      .contact-office
         {
            grid-column: 1 / -1;
         }

      .contact-map__frame
         {
            height: 280px;
         }

      .contact-panel
         {
            padding: 2rem;
         }

      .contact-form__row
         {
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
         }
   }

@media (max-width: 767px)
   {
      body.kisaka-contact-page
         {
            --kisaka-header-h: 76px;
            --kisaka-header-pad-x: 20px;
         }

      .kisaka-contact-page .header .header-inner
         {
            padding-bottom: 0;
         }

      .kisaka-contact-page .header .kisaka-header-row
         {
            margin: 0;
         }

      .kisaka-contact-page .header .kisaka-header-brand
         {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 100%;
            padding: 0 !important;
         }

      .kisaka-contact-page .header .kisaka-header-nav-col
         {
            display: none;
         }

      .kisaka-contact-page .header .logo
         {
            min-height: 76px;
            gap: 8px;
            padding: 0;
         }

      .kisaka-contact-page .header .logo img
         {
            width: 36px;
         }

      .kisaka-contact-page .header .kisaka-logo-text
         {
            font-size: clamp(16px, 4.9vw, 19px);
         }

      .kisaka-contact-page .mobile-nav
         {
            position: static;
         }

      .kisaka-contact-page .slicknav_btn
         {
            display: flex;
            align-items: center;
            justify-content: center;
            float: none;
            min-width: 44px;
            min-height: 44px;
            margin: 0 -8px 0 0;
         }

      .kisaka-contact-page .slicknav_menu .slicknav_icon
         {
            margin: 0;
         }

      .kisaka-contact-page .slicknav_nav
         {
            position: absolute;
            top: 100%;
            left: -20px;
            right: -20px;
            padding: 12px 20px 20px;
            background: var(--contact-bg);
            border-bottom: 1px solid var(--contact-rule);
         }

      .kisaka-contact-page .slicknav_nav li a
         {
            display: flex;
            align-items: center;
            min-height: 44px;
            color: var(--contact-text);
            font-family: var(--kisaka-font-accent);
         }

      .kisaka-contact-page .slicknav_nav .active > a
         {
            color: var(--contact-accent);
         }
   }

@media (max-width: 600px)
   {
      .contact-form__row
         {
            grid-template-columns: 1fr;
            gap: 0;
         }
   }

/* Side by side, the map fills whatever is left under the address so its
   bottom edge meets the form card. Stacked layouts keep a fixed map height. */
@media (min-width: 901px)
   {
      /* One viewport. The form and the map flex inside it, so a scroll
         leaves this screen and enters the footer. */
      .contact-intro
         {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            height: 100svh;
            height: 100dvh;
            max-height: 100dvh;
            padding-top: calc(var(--kisaka-header-h) + clamp(1.25rem, 3vh, 3.25rem));
            padding-bottom: clamp(1rem, 2.2vh, 1.75rem);
            overflow: hidden;
         }

      .contact-intro__grid
         {
            flex: 1 1 auto;
            align-items: stretch;
            height: 100%;
            min-height: 0;
         }

      .contact-intro__copy, .contact-panel
         {
            height: 100%;
            max-height: 100%;
            min-height: 0;
         }

      .contact-intro__copy
         {
            overflow: hidden;
         }

      .contact-panel
         {
            align-self: stretch;
            overflow: visible;
         }

      .contact-direct
         {
            margin-top: clamp(1.25rem, 3vh, 2.75rem);
         }

      .contact-panel__heading
         {
            margin-bottom: clamp(0.85rem, 2vh, 1.75rem);
         }

      .contact-field
         {
            margin-bottom: clamp(0.7rem, 1.5vh, 1.25rem);
         }

      .contact-field textarea
         {
            min-height: 0;
         }

      .contact-intro__copy
         {
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .contact-direct
         {
            flex: 1 1 auto;
            grid-template-rows: auto minmax(0, 1fr);
            min-height: 0;
         }

      .contact-office
         {
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .contact-office > dd
         {
            flex: 1 1 auto;
            align-items: stretch;
            width: 100%;
            min-height: 0;
         }

      .contact-map
         {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
         }

      .contact-map__frame
         {
            flex: 1 1 auto;
            height: auto;
            min-height: 0;
         }
   }

@media (max-width: 480px)
   {
      .contact-shell, .kisaka-contact-page .header .header-inner .container
         {
            width: calc(100% - 40px);
         }

      .contact-intro
         {
            padding-top: calc(var(--kisaka-header-h) + 2.5rem);
         }

      .contact-intro h1
         {
            font-size: clamp(2rem, 1.5rem + 6vw, 3rem);
         }

      .contact-direct
         {
            grid-template-columns: 1fr;
         }

      .contact-rfp
         {
            margin-top: 1.25rem;
         }

      .contact-panel
         {
            padding: 1.5rem 1.25rem;
            border-radius: 16px;
         }

      .contact-panel__heading h2
         {
            font-size: 1.375rem;
         }

      .contact-map
         {
            border-radius: 16px;
         }

      .contact-map__frame
         {
            height: 240px;
         }
   }

/* --------------------------------------------------------- user settings */
@media (prefers-reduced-motion: reduce)
   {
      .contact-page *, .contact-page *::before, .contact-page *::after
         {
            animation: none !important;
            transition: none !important;
         }

      /* Arrival keeps a plain fade, no movement. */
      .contact-page .contact-word,
      .contact-page .contact-intro__lead,
      .contact-page .contact-rfp,
      .contact-page .contact-form-link,
      .contact-page .contact-direct,
      .contact-page .contact-panel
         {
            animation: contact-fade 200ms ease-out backwards !important;
         }

      .contact-page .contact-rfp__action:active, .contact-map:active
         {
            transform: none;
         }

      .contact-select .nice-select .list
         {
            transform: none !important;
            transition: opacity 200ms var(--kisaka-ease-out) !important;
         }
   }

@media (prefers-reduced-transparency: reduce)
   {
      body.kisaka-contact-page .header .header-inner,
      body.kisaka-contact-page .header.sticky .header-inner
         {
            background: var(--contact-bg);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
         }
   }

@media (prefers-contrast: more)
   {
      body.kisaka-contact-page
         {
            --contact-muted: #251c1f;
            --contact-soft: #251c1f;
            --contact-control-line: #251c1f;
            --contact-control-line-strong: #251c1f;
            --contact-rule: #8a7f7b;
            --contact-line: #8a7f7b;
         }

      body.kisaka-contact-page .header .header-inner
         {
            background: var(--contact-bg);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
         }

      .contact-panel,
      .contact-field input:not([type="checkbox"]),
      .contact-field select,
      .contact-field textarea,
      .contact-select .nice-select,
      .contact-map
         {
            border: 1px solid var(--contact-line);
         }
   }

@media (forced-colors: active)
   {
      .contact-send,
      .contact-rfp__action,
      .contact-panel,
      .contact-field input,
      .contact-field select,
      .contact-field textarea,
      .contact-select .nice-select,
      .contact-map
         {
            border: 1px solid ButtonText;
         }

      .contact-send, .contact-rfp__action
         {
            forced-color-adjust: none;
         }
   }