/* Motion and service design. Keep these overrides separate and easy to edit. */
.hero-motion-media {
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s;
}
.hero-motion-active .hero-motion-media { opacity: 1; }

/* Section-specific text entrances: cinematic fade, wipe, rise, scale, letters. */
.motion-title > .motion-line,
.motion-title .motion-line-inner { color: inherit; }
.hero h1.motion-title > .motion-line { animation: none; }
.motion-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.motion-line-inner { display: block; }
html[data-motion="on"] .motion-title .motion-line-inner {
  transition: transform 1.15s cubic-bezier(.16,1,.3,1), opacity 1s,
    clip-path 1.3s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--line-delay, 0ms);
}
html[data-motion="on"] [data-title-motion="cinema"] .motion-line-inner {
  opacity: 0; transform: translateY(12px) scale(1.025);
  transform-origin: left center;
}
html[data-motion="on"] [data-title-motion="wipe"] .motion-line-inner {
  clip-path: inset(0 100% 0 0); transform: translateX(-18px);
}
html[data-motion="on"] [data-title-motion="rise"] .motion-line-inner {
  transform: translateY(110%); opacity: 0;
}
html[data-motion="on"] [data-title-motion="scale"] .motion-line-inner {
  transform: scale(.88); opacity: 0; transform-origin: left center;
}
html[data-motion="on"] .motion-title.is-inview .motion-line-inner {
  transform: none; opacity: 1; clip-path: inset(0);
}
.hero h1 .motion-line { white-space: nowrap; }
.hero-location, .hero-description { animation: none; }
.motion-title .motion-glyph { display: inline-block; color: inherit; }
html[data-motion="on"] [data-title-motion="letters"] .motion-glyph {
  transform: translateY(125%) rotate(9deg);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), opacity .65s;
  transition-delay: var(--glyph-delay, 0ms);
  transform-origin: left bottom;
}
html[data-motion="on"] [data-title-motion="letters"].is-inview .motion-glyph {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
.copy-line { display: block; overflow: hidden; }
.copy-line-inner { display: block; }
html[data-motion="on"] .motion-copy .copy-line-inner {
  opacity: 0;
  transform: none;
  transition: opacity .85s, transform 1.2s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--copy-delay, 180ms);
}
html[data-motion="on"] [data-copy-motion="rise"] .copy-line-inner {
  transform: translateY(110%);
}
html[data-motion="on"] .motion-copy.is-inview .copy-line-inner { opacity: 1; transform: none; }

/* Each group has a different rhythm: landscapes reveal, equipment zooms. */
html[data-motion="on"] .water-card.motion-item {
  opacity: 0;
  clip-path: inset(14% 0 0 round 23px);
  transform: translateY(50px);
  transition: opacity .8s, clip-path 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
html[data-motion="on"] .water-card.is-inview { opacity: 1; clip-path: inset(0 round 23px); transform: none; }
.water-card:nth-child(2) { transition-delay: .12s !important; }
.water-card:nth-child(3) { transition-delay: .24s !important; }
html[data-motion="on"] .equipment-card .feature-photo {
  transform: scale(1.13);
  clip-path: inset(8% 5% round 28px);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), clip-path 1.3s cubic-bezier(.16,1,.3,1);
}
html[data-motion="on"] .equipment-card.is-inview .feature-photo { transform: scale(1); clip-path: inset(0 round 0); }
.equipment-card.is-inview:hover .feature-photo { transform: scale(1.035); }

/* A staggered vertical species collection, with opposing photo entrances. */
.fish-section { position: relative; overflow: hidden; padding: 95px 0 100px; background: radial-gradient(ellipse at 80% 20%, #174b56, transparent 55%), #061e2b; }
.fish-section .section-heading { margin-bottom: 46px; }
.fish-section h2 { font-size: clamp(42px, 6vw, 84px); }
.fish-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px 22px; align-items: start; }
.fish-card { position: relative; padding: 0 0 21px; border: 0; border-radius: 22px; background: #113545; overflow: hidden; }
.fish-card:nth-child(even) { margin-top: 40px; background: #183f4c; }
.fish-card:nth-child(3n) { background: #153b39; }
.fish-card:hover { background: #204c59; }
.fish-card > div:not(.fish-methods), .fish-card > .fish-season, .fish-card > .fish-methods { margin-left: 22px; margin-right: 22px; }
.fish-photo { width: 100%; height: 180px; margin: 0 0 21px; object-fit: cover; }
.fish-card h3 { font-size: 30px; letter-spacing: -.045em; margin-bottom: 5px; }
.fish-card > div > span { font-size: 13px; }
.fish-card .fish-season { margin-top: 15px; margin-bottom: 13px; font-size: 13px; color: #c2e8df; }
.fish-card .fish-methods { gap: 6px; }
.fish-methods span { font-size: 12px; background: #ffffff0a; border-color: #8dbfac38; color: #b4e5d8; }
html[data-motion="on"] .fish-card.motion-item {
  opacity: 0;
  transform: translateY(var(--entry-y)) rotate(var(--entry-angle));
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .7s, background .3s;
  transition-delay: var(--entry-delay);
}
html[data-motion="on"] .fish-card .fish-photo {
  transform: translateY(var(--entry-y)) scale(1.09);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(.16,1,.3,1), opacity .8s;
  transition-delay: var(--entry-delay);
}
html[data-motion="on"] .fish-card.is-inview,
html[data-motion="on"] .fish-card.is-inview .fish-photo { opacity: 1; transform: none; }

/* Food travels about a third faster, over the exact measured repeat width. */
html[data-motion="on"] .food-track { animation-duration: 28s; }
.food-window.is-offscreen .food-track { animation-play-state: paused; }
@keyframes food-glide { to { transform: translateX(calc(-1 * var(--food-travel, 1000px))); } }

/* Two bold fares, two useful extras, one complimentary service strip. */
.pricing { padding: 100px 0 70px; background: #f0f5f4; }
.pricing .section-heading { margin-bottom: 38px; }
.pricing .section-heading p { max-width: 220px; }
.price-grid { gap: 20px; }
.price-card { border-radius: 26px; padding: 38px; border: 1px solid #d5e5e1; }
.charter-price { background: #103d4c; border-color: #103d4c; }
.price-note { display: block; margin-top: 22px; font-size: 14px; color: #6d9099; }
.charter-price .price-note { color: #b6d6d9; }
.trip-services { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 20px; }
.service-card { position: relative; min-height: 350px; padding: 35px; border-radius: 26px; overflow: hidden; }
.rental-service { background: #b7efdb; color: #123e40; }
.service-copy { position: relative; z-index: 2; width: 65%; }
.service-type { display: inline-block; font-size: 12px; letter-spacing: .14em; border: 1px solid currentColor; border-radius: 30px; padding: 5px 12px; opacity: .7; margin-bottom: 18px; }
.service-card h3 { font-size: clamp(28px, 3vw, 41px); line-height: 1.25; letter-spacing: -.04em; }
.service-card p { font-size: 14px; line-height: 1.8; margin-top: 16px; color: #486e6b; }
.service-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 25px; }
.service-price strong { font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.service-price > span { font-size: 13px; opacity: .75; }
.rental-service > img { position: absolute; right: -7%; top: 0; width: 55%; height: 100%; object-fit: cover; object-position: center; opacity: .8; mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.tackle-service { background: #dfebed; color: #183f50; }
.tackle-service p { color: #5a7c87; position: relative; z-index: 1; }
.tackle-art { position: absolute; right: 15px; bottom: 20px; width: 115px; height: 205px; stroke-width: 1.2; color: #83abb0; opacity: .5; transform: rotate(-12deg); }
html[data-motion="on"] .service-card.motion-item { opacity: 0; transform: translateY(45px); transition: opacity .8s, transform 1s cubic-bezier(.16,1,.3,1); }
html[data-motion="on"] .service-card.is-inview { opacity: 1; transform: none; }
.included-services { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid #d5e4e2; padding: 30px 6px; gap: 24px; }
.included-services > p { color: #547982; font-size: 15px; }
.included-services > div { display: grid; grid-template-columns: 36px auto; align-items: center; column-gap: 12px; row-gap: 3px; }
.included-symbol { grid-row: 1/3; font-size: 27px; font-weight: 500; color: #306f74; }
.included-symbol svg { width: 29px; height: 29px; }
.included-services strong { font-size: 17px; font-weight: 550; }
.included-services div > span:last-child { font-size: 12px; color: #608989; }
.trip-timing { margin-top: 30px; }

/* User-supplied photographs fill both service cards; a shade keeps copy legible. */
.photo-service { color: #fff; background: #0c2c3d; isolation: isolate; }
.photo-service .service-copy { width: 100%; }
.service-card > img.service-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; mask-image: none; z-index: -2;
}
.photo-service::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #031a2be8, #031a2b70 70%, #031a2b25),
    linear-gradient(0deg, #031a2bbd, transparent 70%);
}
.photo-service .service-type { opacity: .9; }
.photo-service p { color: #d5e7ee; }
.photo-service .service-price > span { opacity: 1; color: #d5e7ee; }
.rental-service .service-photo { object-position: 65% 55%; }
.tackle-service .service-photo { object-position: center; }

@media (min-width:761px) and (max-width:1100px) {
  .fish-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fish-photo { height: 180px; }
  .service-card { padding: 28px; }
}
@media (max-width:760px) {
  .hero h1 { font-size: clamp(38px, 12vw, 50px); }
  .water-grid { display: grid; grid-template-columns: 1fr; overflow: visible; margin-right: 0; padding-bottom: 0; gap: 22px; }
  .water-card { width: 100%; }
  .water-image { height: 230px; }
  .water-copy { padding: 22px; }
  .water-copy p { font-size: 14px; }
  .fish-section { padding: 65px 0 70px; }
  .fish-section .section-heading { margin-bottom: 30px; }
  .fish-section h2 { font-size: 42px; }
  .fish-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .fish-card { padding: 0 0 18px; border-radius: 18px; }
  .fish-card:nth-child(even) { margin-top: 25px; }
  .fish-photo { height: 135px; width: 100%; margin: 0 0 15px; }
  .fish-card > div:not(.fish-methods), .fish-card > .fish-season, .fish-card > .fish-methods { margin-left: 15px; margin-right: 12px; }
  .fish-card h3 { font-size: 25px; }
  .fish-card > div > span { font-size: 12px; }
  .fish-card .fish-season { font-size: 12px; min-height: 34px; margin-top: 12px; }
  .fish-methods span { font-size: 11px; padding: 4px 7px; }
  .pricing { padding: 65px 0 45px; }
  .price-card { padding: 28px; }
  .price-note { margin-top: 18px; }
  .trip-services { grid-template-columns: 1fr; gap: 15px; margin-top: 15px; }
  .service-card { padding: 28px; min-height: 315px; }
  .service-card h3 { font-size: 34px; }
  .service-price strong { font-size: 39px; }
  .included-services { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 8px; padding: 28px 0; }
  .included-services > p { grid-column: 1/-1; font-size: 14px; }
  .included-services > div { grid-template-columns: 26px auto; gap: 3px 8px; }
  .included-symbol { font-size: 24px; }
  .included-symbol svg { width: 24px; }
  .included-services strong { font-size: 15px; }
  .included-services div > span:last-child { font-size: 12px; }
}
html[data-motion="off"] .motion-item,
html[data-motion="off"] .motion-title .motion-line-inner,
html[data-motion="off"] .motion-title .motion-glyph,
html[data-motion="off"] .motion-copy .copy-line-inner,
html[data-motion="off"] .fish-photo {
  opacity: 1; transform: none; clip-path: none; transition: none;
}