/* KANOA palette and geometric logo-style lettering on animated accents. */
@font-face {
  font-family: 'Kanoa Text';
  src: url('/assets/fonts/Poppins-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanoa Text';
  src: url('/assets/fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanoa Text';
  src: url('/assets/fonts/Poppins-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanoa Text';
  src: url('/assets/fonts/Poppins-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanoa Display';
  src: url('/assets/fonts/KanoaDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --body-font: 'Kanoa Text', Arial, sans-serif;
  --editorial: 'Kanoa Text', Arial, sans-serif;
  --signature: 'Kanoa Text', Arial, sans-serif;
  --accent-font: 'Kanoa Display', Arial, sans-serif;
  --motion-font: 'Kanoa Display', Arial, sans-serif;
  --brand-violet: #792891;
  --brand-gold: #d88825;
  --brand-sand: var(--brand-gold);
  --navy: var(--brand-violet);
  --deep: #4d1b5d;
  --ink: #28242a;
  --muted: #69616d;
  --orange: var(--brand-gold);
  --orange-dark: #9c5d12;
  --line: #e9e2e9;
  --paper: #fcfaf8;
}
body { font-family: var(--body-font); font-weight: 400; line-height: 1.65; }
button, input, select, textarea { font-family: var(--body-font); }
button, input, select, textarea, .form-field, .language-switch { font-weight: 400; }
strong, b, .button, .text-link, .eyebrow, .site-header nav { font-weight: 600; }
.brand > span { font-family: var(--body-font); }
.brand .brand-wordmark { display: block; width: 120px; height: auto; aspect-ratio: 650 / 152; overflow: hidden; }
.brand .brand-wordmark image { width: 1290px; height: 1219px; }
.site-header .brand { gap: 9px; }
.site-header .brand-logo { width: 67px; height: 64px; }
.footer-main .brand .brand-wordmark { width: 132px; }
.site-header, .site-header.scrolled { height: 108px; }
.site-header .nav-shell { width: min(1380px, calc(100% - 64px)); max-width: 1380px; gap: 18px; }
.site-header nav { font-family: var(--body-font); font-size: 14px; font-weight: 700; line-height: 1.45; gap: 18px; }
.site-header nav > .button { font-size: 14px; font-weight: 700; padding: 15px 21px; }
.language-switch { flex: 0 0 auto; order: initial; height: auto; margin: 0; }
.language-switch select {
  appearance: none;
  width: 119px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 27px 10px 13px;
  font-family: var(--body-font);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%23792891' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
.language-switch select:focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 4px; }
.button:hover, .button.dark:hover { background: #51215f; }
.button.outline:hover { background: #faf6fb; }
.site-header nav > a:not(.button)::after { background: var(--brand-sand); }
.site-header .brand > span, .footer-main .brand > span { color: var(--brand-violet); }
.mode-tabs button[aria-selected=true] { color: var(--brand-violet); }
main h1, main h2 {
  font-family: var(--editorial);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.025em;
  line-height: 1.17;
  text-wrap: balance;
}
main h2,
.gift-section h2,
.instagram-section h2,
.guide-section-intro h2,
.reservation-copy h2,
.enquiry-copy h2 {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.19;
  letter-spacing: -.025em;
}
main h1 em, main h2 em,
.hero h1 > span,
.boat-section h2 em,
.contact-brand h2 > em,
.gift-section h2 em,
.instagram-section h2 em,
.guide-section-intro h2 em,
.guide-hero h1 em,
.licence-hero h1 em,
.enquiry-copy h2 em,
.fishing-copy h2 em,
.reservation-copy h2 > span {
  font-family: var(--signature);
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--brand-violet);
}
.hero h1 {
  font-family: var(--editorial);
  font-size: clamp(46px, 5.1vw, 74px);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -.035em;
  margin: 28px 0 32px;
}
.hero h1 > span {
  display: inline-block;
  white-space: normal;
  padding-bottom: 15px;
}
.hero h1 > span::after {
  bottom: 2px;
  left: 2px;
  width: 48%;
  height: 3px;
  background: var(--brand-sand);
  border-radius: 0;
  transform: none;
}
.hero-inner { padding-top: 70px; padding-bottom: 45px; }
.hero-description { font-size: 17px; line-height: 1.7; max-width: 400px; }
.hero-photo { border-radius: 0; }
.hero .location { color: var(--muted); }
.hero .location svg { color: var(--brand-violet); }
.boat-ribbon { border-radius: 0; }
.section-intro { align-items: flex-end; margin-bottom: 43px; }
.section-intro .eyebrow { margin-bottom: 14px; }
main .script-title {
  font-family: var(--signature);
  font-size: clamp(59px, 5.4vw, 78px);
  color: var(--brand-violet);
  font-weight: 600;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: -.035em;
}
.script-title::after { display: none; }
/* The animated title and gift label share the logo's geometric lettering. */
#experience-title {
  font-family: var(--motion-font);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.24;
  letter-spacing: normal;
  text-transform: uppercase;
}
.gift-voucher > .eyebrow {
  font-family: var(--accent-font);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--brand-violet);
}
.experience-grid { gap: 20px; }
.experience-card { height: 405px; border-radius: 0; }
.experience-copy h3 {
  font-family: var(--editorial);
  font-weight: 600;
  font-size: clamp(24px, 2.25vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.experience-copy { gap: 13px; bottom: 34px; }
.experience-copy p { max-width: 205px; }
.experience-copy > svg { width: 28px; }
.experience-copy > .experience-logo { width: 45px; height: 43px; }
.experience-card > img { transition: transform .8s cubic-bezier(.2,.65,.3,1); }
.card-shade { background: linear-gradient(0deg, #302035e8, #30203580 32%, transparent 78%); }
.experience-card::after { background: linear-gradient(0deg, #302035b3, transparent 65%); }
.explore-visual > img, .permit-photo, .gallery-main, .fishing-photo,
.gift-visual > img, .licence-hero-photo > img { border-radius: 0; }
.editorial-copy h2, .fishing-copy h2 { margin-bottom: 27px; }
.editorial-copy > p:not(.eyebrow), .fishing-copy > p:not(.eyebrow) { line-height: 1.85; }
.permit-heading h2 { max-width: 720px; }
.permit-photo-note b { font-family: var(--signature); font-weight: 600; font-style: normal; font-size: 47px; line-height: 1.3; }
.gift-voucher > p { font-family: var(--editorial); font-weight: 600; font-size: 46px; line-height: 1.12; letter-spacing: -.035em; }
.gift-voucher { padding: 31px; }
.contact-brand { padding-left: 120px; }
.contact-brand > .contact-logo {
  position: absolute;
  top: 4px;
  left: 0;
  display: block;
  width: 96px;
  height: auto;
  object-fit: contain;
}
.contact-brand h2 { font-size: clamp(33px, 3vw, 43px); line-height: 1.2; }
.contact-unified h3 { font-family: var(--editorial); font-weight: 600; line-height: 1.25; }
.guide-hero h1 { font-size: clamp(43px, 4.3vw, 63px); line-height: 1.16; letter-spacing: -.035em; }
.licence-hero h1 { font-size: clamp(45px, 4.3vw, 63px); line-height: 1.16; letter-spacing: -.035em; }
.destination-copy h3, .licence-card h3, .fish-card h3, .care-grid h3 {
  font-family: var(--editorial);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.licence-card-top > span { font-family: var(--signature); font-weight: 600; font-style: normal; font-size: 31px; line-height: 1.2; }
.guide-cta h2 { font-size: clamp(29px, 3vw, 42px); line-height: 1.2; }
/* The social composition echoes the supplied reference, using KANOA's own photographs. */
.instagram-section { padding-top: 112px; padding-bottom: 112px; }
.social-intro { max-width: 970px; margin-inline: auto; text-align: center; }
.social-intro .eyebrow { margin-bottom: 18px; }
.instagram-section h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 25px; }
.instagram-section h2 em { display: inline-block; margin-right: .12em; }
.social-intro > p:last-child { max-width: 650px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.social-gallery { gap: 18px; margin: 46px 0 32px; }
.social-gallery > a { border-radius: 0; aspect-ratio: 4 / 5; }
.social-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.65,.3,1); }
.social-gallery > a:first-child img { object-position: 48% center; }
.social-gallery > a:nth-child(2) img { object-position: 52% center; }
.social-gallery > a > span {
  justify-content: center;
  gap: 14px;
  padding: 74px 20px 29px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(transparent, #4d1b5dd9);
}
.social-gallery > a > span b { font-weight: 400; }
.social-action { padding-top: 8px; }
.social-action strong { font-size: 17px; font-weight: 400; }
.hashtag-note { margin-top: 27px; color: var(--muted); }
/* Official tourism reference, followed immediately by the supplied social photos. */
.trust-section { border-top: 1px solid var(--line); background: #fff; padding-bottom: 90px; }
.trust-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.trust-intro .eyebrow { color: var(--orange-dark); }
.trust-intro h2 { margin-bottom: 23px; }
.trust-intro > p:last-child { color: var(--muted); max-width: 400px; font-size: 16px; line-height: 1.8; margin: 0; }
.trust-partner { display: block; border: 0; background: #fff; }
.trust-partner:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 5px; }
.trust-logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; background: #fff; }
.trust-logos .cmt-band { align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 26px 35px; background: #fff; border: 0; }
/* Keep the original artwork intact and show its monochrome silhouette on white. */
.trust-logos .cmt-logo { width: 165px; height: auto; object-fit: contain; filter: brightness(0); }
.trust-partner-caption { padding: 23px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.trust-partner-caption > span { font-size: 18px; }
.trust-partner-caption small { display: block; font-size: 9px; letter-spacing: 1.7px; color: var(--muted); margin-bottom: 7px; }
.trust-partner-caption > svg { color: var(--brand-violet); transition: transform .2s; }
.trust-partner:hover .trust-partner-caption > svg { transform: translateX(4px); }
.trust-section + .instagram-section { border-top: 1px solid var(--line); }
.social-gallery.social-moments { grid-template-columns: 1fr 1fr .595fr; max-width: 1030px; margin-inline: auto; gap: 24px; align-items: start; }
.social-moments > a { aspect-ratio: auto; overflow: visible; }
.social-moments img { height: auto; aspect-ratio: auto; object-fit: contain; background: #fff; }
.social-moments > a:hover img { transform: none; }
.social-moments > a > span { position: static; justify-content: space-between; background: #fff; color: var(--brand-violet); padding: 16px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.social-moments > a > span b { transition: transform .2s; }
.social-moments > a:hover > span b { transform: translate(2px, -2px); }
.step-number, .booking-steps span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  background: var(--brand-gold); color: var(--deep); font-family: var(--body-font);
  font-size: 18px; font-weight: 600; line-height: 1;
}
.care-grid > div > span { background: var(--brand-gold); color: var(--deep); border-color: var(--brand-gold); }
.form-field input:focus, .form-field select:focus { outline-color: var(--brand-violet); }
.departure-checklist input { accent-color: var(--brand-violet); }
/* A small, finite word wave is added by word-motion.js. Text stays visible without JS. */
.hero h1 > span[data-word-motion],
main h1 em[data-word-motion],
main h2 em[data-word-motion],
main h2 > span[data-word-motion] {
  font-family: var(--motion-font);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-size: .95em;
  line-height: 1.24;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero h1 > span[data-word-motion] {
  font-family: 'Kanoa Display', var(--body-font);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: uppercase;
}
html[lang=en] .hero h1 > span[data-word-motion] { font-size: .84em; }
.motion-word { display: inline-block; transform-origin: 35% 85%; }
@media (max-width: 1150px) {
  .site-header nav > a:not(.button) { font-size: 17px; }
  .site-header nav { gap: 0; }
  .trust-layout { gap: 55px; }
  .hero-inner { padding-top: 59px; }
  .hero-description { font-size: 16px; }
  .experience-card { height: 360px; }
  .experience-copy { left: 19px; right: 19px; gap: 10px; }
  .experience-copy > svg { display: none; }
  .experience-copy > .experience-logo { width: 35px; height: 33px; }
  .experience-copy h3 { font-size: 27px; }
  .gift-voucher > p { font-size: 40px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 98px; }
  .site-header, .site-header.scrolled { height: 92px; }
  .site-header .brand-logo { width: 54px; height: 51px; }
  .site-header .brand .brand-wordmark { width: 89px; }
  .site-header .nav-shell { width: calc(100% - 40px); flex-wrap: nowrap; align-items: center; gap: 12px; }
  .language-switch { flex: 0 0 auto; order: 2; margin-left: auto; height: auto; justify-content: initial; }
  .language-switch select { width: 96px; font-size: 11px; padding: 10px 23px 10px 8px; background-position: right 8px center; }
  .site-header .menu-toggle { order: 4; margin-left: 0; flex-shrink: 0; }
  .trust-section { padding-block: 68px; }
  .trust-layout { grid-template-columns: 1fr; gap: 32px; }
  .trust-intro > p:last-child { font-size: 15px; max-width: 520px; }
  .trust-logos .cmt-band { padding: 24px 25px; }
  .trust-logos .cmt-logo { width: 145px; }
  .trust-partner-caption { padding: 21px 23px; }
  main h2,
  .gift-section h2,
  .instagram-section h2,
  .guide-section-intro h2,
  .reservation-copy h2,
  .enquiry-copy h2 { font-size: clamp(28px, 7.2vw, 38px); line-height: 1.23; }
  .hero-inner { padding-top: 39px; padding-bottom: 0; }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(42px, 10.5vw, 64px); line-height: 1.13; margin: 25px 0 27px; }
  .hero h1 > span { padding-bottom: 16px; }
  .hero-description { font-size: 16px; max-width: 470px; }
  .hero-photo { width: calc(100% - 40px); height: 380px; margin-top: 24px; }
  .section-intro { gap: 22px; margin-bottom: 32px; }
  main .script-title { font-size: 60px; line-height: 1.3; }
  .experience-card { height: 370px; }
  .experience-copy { left: 26px; right: 26px; bottom: 31px; gap: 16px; }
  .experience-copy > svg { display: block; width: 28px; }
  .experience-copy > .experience-logo { width: 45px; height: 43px; }
  .experience-copy h3 { font-size: 31px; }
  .experience-copy p { max-width: 250px; }
  .permit-photo-note b { font-size: 40px; }
  .gift-voucher > p { font-size: 39px; }
  .gift-voucher { padding: 25px; }
  .guide-hero h1, .licence-hero h1 { font-size: clamp(38px, 9vw, 53px); line-height: 1.18; }
  .contact-brand { padding-left: 102px; }
  .contact-brand > .contact-logo { width: 82px; }
  .contact-brand h2 { font-size: 32px; }
  .instagram-section { padding-block: 68px; }
  .instagram-section h2 { font-size: 36px; }
  .social-intro > p:last-child { font-size: 15px; }
  .social-gallery {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 360px);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #bda3c3 transparent;
    margin: 32px -20px 26px;
    padding: 0 20px 12px;
    scroll-padding-inline: 20px;
  }
  .social-gallery > a { scroll-snap-align: start; }
  .social-gallery > a > span { padding: 60px 18px 23px; font-size: 17px; }
  .social-gallery.social-moments { grid-template-columns: none; grid-auto-columns: min(83vw, 440px); gap: 18px; margin-inline: -20px; }
  .social-moments img { aspect-ratio: 1; object-fit: contain; }
  .social-moments > a > span { padding: 15px 0; font-size: 13px; }
  .social-action { gap: 19px; }
  .social-action .button { white-space: normal; text-align: left; }
}
@media (max-width: 380px) {
  .site-header .brand-logo { width: 47px; height: 45px; }
  .site-header .brand .brand-wordmark { width: 76px; }
  .site-header .nav-shell { width: calc(100% - 32px); gap: 8px; }
  .language-switch select { width: 89px; font-size: 10px; }
  .hero h1, html[lang=en] .hero h1 { font-size: 40px; }
  .hero-photo { width: calc(100% - 32px); height: 310px; }
  .experience-copy { left: 20px; right: 20px; gap: 10px; }
  .experience-copy h3 { font-size: 28px; }
  .experience-copy > .experience-logo { width: 38px; height: 36px; }
  .instagram-section h2 { font-size: 32px; }
  .guide-hero h1, .licence-hero h1 { font-size: 35px; }
  .contact-brand { padding-left: 0; }
  .contact-brand > .contact-logo { position: static; width: 82px; margin-bottom: 18px; }
  .contact-brand > svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-word { transform: none !important; animation: none !important; }
  .experience-card > img, .social-gallery img, .button { transition: none; }
  .experience-card:hover > img, .social-gallery > a:hover img, .button:hover { transform: none; }
  .trust-partner-caption > svg, .social-moments > a > span b { transition: none; transform: none !important; }
}