/*
   * ============================================================
   * KINARA HEADER DESIGN TOKENS
   * Edit these values to customise the header without searching
   * through the rest of the CSS.
   * ============================================================
   */
  :root {
    --kn-header-primary: #0c4d48;
    --kn-header-primary-hover: #176b63;
    --kn-header-deep: #173f3b;
    --kn-header-muted: #607a75;
    --kn-header-white: #ffffff;

    --kn-header-surface-rgb: 255, 253, 250;
    --kn-header-surface-opacity: 1;
    --kn-header-surface-opacity-scrolled: 0.97;

    --kn-header-border: transparent;
    --kn-header-border-glow: transparent;
    --kn-header-focus: rgba(12, 77, 72, 0.32);

    --kn-header-shadow: none;

    --kn-header-shadow-scrolled:
      0 10px 28px rgba(12, 77, 72, 0.07);

    --kn-header-radius: 16px;
    --kn-header-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --kn-header-fast: 180ms;
    --kn-header-spring: 420ms;
  }

  /*
   * Hide the native Squarespace header only.
   * The custom header remains independent of Squarespace's
   * standard header markup.
   */
  body > #header,
  body > .header-announcement-bar-wrapper > #header {
    display: none !important;
  }

  html {
    scroll-padding-top: 92px;
  }

  #kinara-site-header {
    position: sticky;
    top: 0;
    z-index: 99999;
    width: 100%;

    border-bottom: 0;
    background: #fffdfa;

    color: var(--kn-header-deep);
    font-family: "KoHo", "Segoe UI", Arial, sans-serif;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Stabilise Chromium/WebKit compositing for a sticky glass surface. */
    transform: translateZ(0);
    backface-visibility: hidden;

    transition:
      background var(--kn-header-spring) var(--kn-header-ease),
      box-shadow var(--kn-header-spring) var(--kn-header-ease),
      border-color var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header.is-scrolled {
    background: rgba(255, 253, 250, 0.97);
    box-shadow: var(--kn-header-shadow-scrolled);
    backdrop-filter: blur(12px) saturate(105%);
    -webkit-backdrop-filter: blur(12px) saturate(105%);
  }

  #kinara-site-header,
  #kinara-site-header * {
    box-sizing: border-box;
  }

  #kinara-site-header a,
  #kinara-site-header button {
    font: inherit;
  }

  #kinara-site-header .kh-shell {
    width: min(1240px, calc(100% - 30px));
    min-height: 78px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 24px;

    transition:
      min-height var(--kn-header-spring) var(--kn-header-ease),
      padding var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header.is-scrolled .kh-shell {
    /* Deliberately keep the sticky header height constant to prevent scroll jitter. */
    min-height: 78px;
  }

  /*
   * Image-only brand link.
   * Only the new KINARA sailboat mark is shown in the header.
   */
  #kinara-site-header .kh-brand {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 62px;
    height: 62px;
    border-radius: 16px;
    overflow: visible;

    color: var(--kn-header-primary);
    text-decoration: none;

    transition:
      transform var(--kn-header-fast) var(--kn-header-ease),
      background var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-brand:hover {
    transform: translateY(-1px) scale(1.025);
    background: rgba(255, 255, 255, 0.34);
  }

  #kinara-site-header.is-scrolled .kh-brand {
    width: 54px;
    height: 54px;
  }

  /*
   * The image and its waves are one contained logo mark.
   * This prevents the wave artwork from escaping to the centre
   * of the header.
   */
  #kinara-site-header .kh-logo-mark {
    position: relative;
    display: block;
    width: 56px;
    height: 58px;
    overflow: visible;
    flex: 0 0 auto;

    transition:
      width var(--kn-header-spring) var(--kn-header-ease),
      height var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header.is-scrolled .kh-logo-mark {
    width: 49px;
    height: 51px;
  }

  #kinara-site-header .kh-logo-boat {
    position: absolute;
    left: 50%;
    top: 0;

    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;

    transform: translateX(-50%);

    user-select: none;
    -webkit-user-drag: none;

    transition:
      width var(--kn-header-spring) var(--kn-header-ease),
      height var(--kn-header-spring) var(--kn-header-ease),
      transform var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header.is-scrolled .kh-logo-boat {
    width: 45px;
    height: 45px;
  }

  /*
   * Two intact KINARA wave lines directly beneath the hull.
   * SVG paths are fixed; they are not morphed or detached.
   */
  #kinara-site-header .kh-logo-waves {
    position: absolute;
    left: 50%;
    bottom: -1px;

    display: block;
    width: 54px;
    height: 16px;

    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;

    transition:
      width var(--kn-header-spring) var(--kn-header-ease),
      height var(--kn-header-spring) var(--kn-header-ease),
      bottom var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header .kh-logo-waves path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  #kinara-site-header .kh-logo-wave--rear {
    stroke: rgba(145, 174, 164, .78);
    stroke-width: 1.7;
  }

  #kinara-site-header .kh-logo-wave--front {
    stroke: rgba(87, 139, 130, .92);
    stroke-width: 1.8;
  }

  #kinara-site-header.is-scrolled .kh-logo-waves {
    width: 47px;
    height: 14px;
    bottom: 0;
  }

  #kinara-site-header .kh-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
  }

  /*
   * Secondary navigation:
   * underline expands from the centre on hover and focus.
   */
  #kinara-site-header .kh-link,
  #kinara-site-header .kh-menu-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 44px;
    padding: 10px 12px;

    border: 0;
    border-radius: 10px;
    background: transparent;

    color: var(--kn-header-deep);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;

    cursor: pointer;

    transition:
      color var(--kn-header-fast) var(--kn-header-ease),
      background var(--kn-header-fast) var(--kn-header-ease),
      transform var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-link::after,
  #kinara-site-header .kh-menu-button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;

    width: calc(100% - 24px);
    height: 2px;
    border-radius: 999px;

    background: var(--kn-header-primary);

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;

    transition:
      transform var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header .kh-link:hover,
  #kinara-site-header .kh-menu-button:hover,
  #kinara-site-header .kh-menu.is-open > .kh-menu-button,
  #kinara-site-header .kh-menu.is-current > .kh-menu-button {
    color: var(--kn-header-primary);
    background: rgba(223, 242, 251, 0.58);
  }

  #kinara-site-header .kh-link:hover::after,
  #kinara-site-header .kh-link[aria-current="page"]::after,
  #kinara-site-header .kh-menu-button:hover::after,
  #kinara-site-header .kh-menu.is-open > .kh-menu-button::after,
  #kinara-site-header .kh-menu.is-current > .kh-menu-button::after {
    transform: translateX(-50%) scaleX(1);
  }

  #kinara-site-header .kh-link:active,
  #kinara-site-header .kh-menu-button:active {
    transform: scale(0.97);
  }

  #kinara-site-header .kh-link:focus-visible,
  #kinara-site-header .kh-menu-button:focus-visible,
  #kinara-site-header .kh-mobile-toggle:focus-visible,
  #kinara-site-header .kh-book:focus-visible,
  #kinara-site-header .kh-brand:focus-visible {
    outline: 3px solid var(--kn-header-focus);
    outline-offset: 3px;
  }

  #kinara-site-header .kh-menu {
    position: relative;
  }

  #kinara-site-header .kh-chevron {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
      transform var(--kn-header-spring) var(--kn-header-ease);
  }

  #kinara-site-header .kh-menu.is-open .kh-chevron {
    transform: rotate(180deg);
  }

  /*
   * Contact action icon:
   * rotates and pulses when the contact dropdown opens.
   */
  #kinara-site-header .kh-contact-icon {
    display: inline-grid;
    place-items: center;

    width: 24px;
    height: 24px;
    border-radius: 999px;

    background: rgba(13, 79, 130, 0.08);
    color: var(--kn-header-primary);

    transition:
      transform 560ms var(--kn-header-ease),
      background var(--kn-header-fast) var(--kn-header-ease),
      box-shadow var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-contact-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #kinara-site-header .kh-menu--contact.is-open .kh-contact-icon {
    transform: rotate(360deg);
    background: rgba(13, 79, 130, 0.15);
    box-shadow: 0 0 0 7px rgba(13, 79, 130, 0.07);
  }

  /*
   * Dropdown:
   * click-controlled, keyboard-accessible, and animated with
   * a gentle upward drift.
   */
  #kinara-site-header .kh-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: max-content;
    min-width: 238px;
    max-width: min(350px, calc(100vw - 28px));

    display: none;
    gap: 3px;
    padding: 10px;

    border: 1px solid rgba(18, 82, 122, 0.15);
    border-radius: var(--kn-header-radius);

    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 55px rgba(22, 75, 104, 0.18);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #kinara-site-header .kh-menu.is-open .kh-dropdown {
    display: grid;
    animation:
      khDropdownEnter 360ms var(--kn-header-ease) both;
  }

  #kinara-site-header .kh-menu--services .kh-dropdown {
    left: 0;
    right: auto;
    min-width: 270px;
  }

  @keyframes khDropdownEnter {
    from {
      opacity: 0;
      transform: translateY(-9px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  #kinara-site-header .kh-dropdown a {
    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 12px 13px;
    border-radius: 11px;

    color: var(--kn-header-deep);
    text-decoration: none;

    transition:
      background var(--kn-header-fast) var(--kn-header-ease),
      color var(--kn-header-fast) var(--kn-header-ease),
      transform var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-dropdown a:hover {
    color: var(--kn-header-primary);
    background: #edf8fc;
    transform: translateX(2px);
  }

  #kinara-site-header .kh-dropdown a:focus-visible {
    outline: 3px solid var(--kn-header-focus);
    outline-offset: 1px;
  }

  #kinara-site-header .kh-dropdown strong {
    font-size: 0.94rem;
    font-weight: 700;
  }

  #kinara-site-header .kh-dropdown small {
    color: var(--kn-header-muted);
    font-size: 0.77rem;
    line-height: 1.4;
  }

  /*
   * Primary CTA:
   * subtle glowing border, hover shimmer, scale-up hover,
   * and a magnetic push on press.
   */
  #kinara-site-header .kh-book {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    margin-left: 7px;
    padding: 11px 19px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 13px;

    background: var(--kn-header-primary);
    color: var(--kn-header-white);

    font-weight: 700;
    letter-spacing: 0.015em;
    text-decoration: none;

    box-shadow:
      0 10px 25px rgba(13, 79, 130, 0.22),
      0 0 0 1px rgba(20, 117, 169, 0.12);

    transition:
      transform var(--kn-header-fast) var(--kn-header-ease),
      background var(--kn-header-fast) var(--kn-header-ease),
      box-shadow var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-book::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2px;

    border-radius: inherit;

    background:
      conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.2) 70deg,
        rgba(126, 210, 255, 0.95) 120deg,
        transparent 175deg,
        transparent 360deg
      );

    opacity: 0;
    transform: rotate(0deg);

    transition:
      opacity var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-book::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
      linear-gradient(
        110deg,
        transparent 18%,
        rgba(255, 255, 255, 0.8) 47%,
        transparent 76%
      );

    transform: translateX(-135%);
  }

  #kinara-site-header .kh-book:hover {
    transform: translateY(-2px) scale(1.035);
    background: var(--kn-header-primary-hover);

    box-shadow:
      0 15px 32px rgba(13, 79, 130, 0.28),
      0 0 24px rgba(20, 117, 169, 0.24);
  }

  #kinara-site-header .kh-book:hover::before {
    opacity: 1;
    animation:
      khBorderGlow 1.45s linear infinite;
  }

  #kinara-site-header .kh-book:hover::after {
    animation:
      khShimmer 850ms var(--kn-header-ease);
  }

  #kinara-site-header .kh-book:active {
    transform: translateY(1px) scale(0.965);
  }

  @keyframes khBorderGlow {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes khShimmer {
    to {
      transform: translateX(135%);
    }
  }


  #kinara-site-header .kh-service-title-line { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
  #kinara-site-header .kh-service-tag { display:inline-flex;align-items:center;min-height:21px;padding:1px 7px;border:1px solid rgba(18,82,122,.14);border-radius:999px;background:#edf8fc;color:var(--kn-header-primary);font-size:.64rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase; }
  #kinara-site-header .kh-service-tag[hidden] { display:none!important; }

  /* V11: optional featured services, shown only when the public view returns rows. */
  #kinara-site-header .kh-featured-services{display:flex;align-items:center;gap:6px;max-width:360px;margin-left:2px;overflow-x:auto;scrollbar-width:none}
  #kinara-site-header .kh-featured-services::-webkit-scrollbar{display:none}
  #kinara-site-header .kh-featured-services[hidden]{display:none!important}
  #kinara-site-header .kh-featured-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;max-width:180px;padding:6px 10px;border:1px solid rgba(13,79,130,.18);border-radius:999px;background:rgba(255,255,255,.76);color:var(--kn-header-primary);font-size:.76rem;font-weight:800;line-height:1.15;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background var(--kn-header-fast) var(--kn-header-ease),transform var(--kn-header-fast) var(--kn-header-ease)}
  #kinara-site-header .kh-featured-link:hover{background:#edf8fc;transform:translateY(-1px)}

  /*
   * Mobile menu control.
   */
  #kinara-site-header .kh-mobile-toggle {
    display: none;

    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;

    border: 1px solid var(--kn-header-border);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.78);
    color: var(--kn-header-deep);

    cursor: pointer;

    transition:
      transform var(--kn-header-fast) var(--kn-header-ease),
      background var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-mobile-toggle:active {
    transform: scale(0.94);
  }

  #kinara-site-header .kh-mobile-toggle span,
  #kinara-site-header .kh-mobile-toggle::before,
  #kinara-site-header .kh-mobile-toggle::after {
    content: "";
    display: block;

    width: 21px;
    height: 2px;
    margin: 4px auto;

    border-radius: 99px;
    background: currentColor;

    transition:
      transform var(--kn-header-spring) var(--kn-header-ease),
      opacity var(--kn-header-fast) var(--kn-header-ease);
  }

  #kinara-site-header .kh-mobile-toggle.is-open span {
    opacity: 0;
  }

  #kinara-site-header .kh-mobile-toggle.is-open::before {
    transform: translateY(6px) rotate(45deg);
  }

  #kinara-site-header .kh-mobile-toggle.is-open::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  @media (max-width: 900px) {
    #kinara-site-header .kh-shell,
    #kinara-site-header.is-scrolled .kh-shell {
      min-height: 68px;
      flex-wrap: wrap;
      padding: 7px 0;
    }

    #kinara-site-header .kh-brand,
    #kinara-site-header.is-scrolled .kh-brand {
      width: 52px;
      height: 52px;
    }

    #kinara-site-header .kh-logo-mark,
    #kinara-site-header.is-scrolled .kh-logo-mark {
      width: 49px;
      height: 51px;
    }

    #kinara-site-header .kh-logo-boat,
    #kinara-site-header.is-scrolled .kh-logo-boat {
      width: 45px;
      height: 45px;
    }

    #kinara-site-header .kh-logo-waves,
    #kinara-site-header.is-scrolled .kh-logo-waves {
      width: 47px;
      height: 14px;
      bottom: 0;
    }

    #kinara-site-header .kh-mobile-toggle {
      display: block;
    }

    #kinara-site-header .kh-nav {
      flex: 1 0 100%;
      display: none;
      align-items: stretch;
      padding: 8px 0 6px;
    }

    #kinara-site-header .kh-nav.is-open {
      display: grid;
      gap: 4px;
      animation:
        khMobileMenuEnter 320ms var(--kn-header-ease) both;
    }

    @keyframes khMobileMenuEnter {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #kinara-site-header .kh-link,
    #kinara-site-header .kh-menu-button,
    #kinara-site-header .kh-book {
      width: 100%;
      justify-content: space-between;
      margin: 0;
      padding: 13px 14px;
    }

    #kinara-site-header .kh-link::after,
    #kinara-site-header .kh-menu-button::after {
      bottom: 4px;
    }

    #kinara-site-header .kh-book {
      justify-content: center;
      margin-top: 4px;
    }

    #kinara-site-header .kh-featured-services {
      width: 100%;
      max-width: none;
      margin: 2px 0 0;
      display: grid;
      grid-template-columns: 1fr;
      overflow: visible;
    }

    #kinara-site-header .kh-featured-link {
      width: 100%;
      max-width: none;
      min-height: 40px;
      border-radius: 11px;
    }

    #kinara-site-header .kh-dropdown {
      position: static;
      left: auto;
      right: auto;

      width: 100%;
      min-width: 0;
      max-width: none;
      margin-top: 4px;

      border-radius: 13px;
      box-shadow: none;

      background: rgba(237, 248, 252, 0.78);
    }

    #kinara-site-header .kh-menu--services .kh-dropdown {
      left: auto;
      right: auto;
      width: 100%;
      min-width: 0;
      max-width: none;
    }
  }

  @media (max-width: 430px) {
    #kinara-site-header .kh-shell {
      width: min(100% - 20px, 1240px);
    }

    #kinara-site-header .kh-brand,
    #kinara-site-header.is-scrolled .kh-brand {
      width: 48px;
      height: 48px;
    }

    #kinara-site-header .kh-logo-mark,
    #kinara-site-header.is-scrolled .kh-logo-mark {
      width: 46px;
      height: 48px;
    }

    #kinara-site-header .kh-logo-boat,
    #kinara-site-header.is-scrolled .kh-logo-boat {
      width: 42px;
      height: 42px;
    }

    #kinara-site-header .kh-logo-waves,
    #kinara-site-header.is-scrolled .kh-logo-waves {
      width: 44px;
      height: 13px;
      bottom: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #kinara-site-header *,
    #kinara-site-header *::before,
    #kinara-site-header *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }