/* ==========================================================================
   Salt Beauty — brand refresh (Brand Identity Guidelines v1.0, July 2026)
   Loaded after the Webflow stylesheet on every page, so it overrides it.

   Principles applied here:
   - Light-first: Sea Salt is the default ground; Deep Water is for
     statement sections (color-scheme-3).
   - One warm spark: Terracotta is only used for the primary call to action.
   - Fraunces (upright, never italic) for headings,
     Instrument Sans for everything else, including the footer legal line.
   ========================================================================== */

:root {
  /* Brand palette */
  --brand-deep-water: #082927;
  --brand-rockpool: #0e3c38;
  --brand-sea-salt: #f7f4ed;
  --brand-white: #ffffff;
  --brand-coral: #f4784f;
  --brand-terra: #c96f4f;
  --brand-seafoam: #a9cdbf;
  --brand-shell: #e9c9b8;
  --brand-sand: #d3b8a2;
  --brand-sage: #a9b098;
  --brand-brass: #b4aa7e;

  /* Text on light grounds — softer than Deep Water, all tints of Rockpool.
     Contrast on Sea Salt: heading 11.1:1, body 6.7:1, soft 4:1 (logo / large only) */
  --brand-text-heading: var(--brand-rockpool);
  --brand-text-body: #3d5c58;
  --brand-text-soft: #5e7f79;

  /* Solid hairlines (the guide asks us not to tint colours with opacity) */
  --brand-line-light: #d8d9d1;   /* Deep Water 15% on Sea Salt, flattened */
  --brand-line-dark: #24504b;    /* between Rockpool and Seafoam */

  --brand-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --brand-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --brand-ease: cubic-bezier(.22, 1, .36, 1);
  --brand-radius: 14px;

  /* Map the Relume / Webflow tokens onto the brand palette */
  --_typography---font-styles--body: var(--brand-font-body);
  --_typography---font-styles--heading: var(--brand-font-heading);

  --_primitives---colors--neutral-lightest: var(--brand-sea-salt);
  --_primitives---colors--neutral-darkest: var(--brand-text-heading);
  --_primitives---colors--neutral-darker: var(--brand-text-heading);
  --_primitives---colors--elephant: var(--brand-rockpool);
  --_primitives---colors--elephant-dark: var(--brand-deep-water);
  --_primitives---colors--bottle-green: var(--brand-deep-water);
  --_primitives---colors--akaroa-light: var(--brand-line-light);
  --_primitives---colors--akaroa-dark: var(--brand-rockpool);
  --_primitives---colors--mongoose-dark: var(--brand-line-dark);
  --_ui-styles---radius--small: var(--brand-radius);
  --_ui-styles---radius--medium: var(--brand-radius);
  --_ui-styles---radius--large: var(--brand-radius);

  --color-scheme-1--background: var(--brand-sea-salt);
  --color-scheme-1--text: var(--brand-text-body);
  --color-scheme-1--foreground: var(--brand-white);
  --color-scheme-1--border: var(--brand-line-light);
  --color-scheme-1--accent: var(--brand-rockpool);

  --color-scheme-2--background: var(--brand-rockpool);
  --color-scheme-2--text: var(--brand-sea-salt);
  --color-scheme-2--foreground: var(--brand-deep-water);
  --color-scheme-2--border: var(--brand-line-dark);
  --color-scheme-2--accent: var(--brand-seafoam);

  --color-scheme-3--background: var(--brand-deep-water);
  --color-scheme-3--text: var(--brand-sea-salt);
  --color-scheme-3--foreground: var(--brand-rockpool);
  --color-scheme-3--border: var(--brand-line-dark);
  --color-scheme-3--accent: var(--brand-seafoam);

  /* Per-scheme helpers used below */
  --brand-label: var(--brand-rockpool);
  --brand-heading: var(--brand-text-heading);
}

/* On dark grounds headings simply take the section's Sea Salt text colour */
.color-scheme-2,
.color-scheme-3 {
  --brand-label: var(--brand-seafoam);
  --brand-heading: currentColor;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { background-color: var(--brand-sea-salt); }

body {
  font-family: var(--brand-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--brand-text-body);
  background-color: var(--brand-sea-salt);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* Book page (body.page-book): white ground — nav, menu and footer included —
   to sit flush with the white book.app booking widget */
html:has(body.page-book) { background-color: var(--brand-white); }
body.page-book {
  --color-scheme-1--background: var(--brand-white);
  background-color: var(--brand-white);
}
.page-book .page-wrapper.book { background-color: var(--brand-white); }
.page-book .navbar11_component.is-scrolled,
.page-book .navbar11_component.is-menu-open { background-color: var(--brand-white); }
@media screen and (max-width: 991px) {
  .page-book .navbar11_menu,
  .page-book .navbar11_menu.is-page-height-tablet { background-color: var(--brand-white); }
}

::selection { background-color: var(--brand-seafoam); color: var(--brand-deep-water); }

*[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
input[type="file"]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  font-family: var(--brand-font-heading);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--brand-heading);
  text-wrap: balance;
}

/* Display headlines: Fraunces regular (upright), set tight like a spoken sentence */
h1, h2,
.heading-style-h1, .heading-style-h2 {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.heading-style-h1 { line-height: 1; }

p, .text-size-medium, .text-size-large, .text-size-small { text-wrap: pretty; }
.text-size-medium { line-height: 1.55; }
.text-size-large { line-height: 1.4; }

.text-weight-medium { font-weight: 500; }
.text-weight-semibold { font-weight: 600; }

/* Small tracked labels — the only place caps survive */
.text-style-tagline {
  font-family: var(--brand-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--brand-label);
}

.text-style-tagline.timeline {
  font-family: var(--brand-font-body);
  font-weight: 600;
}

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.text-style-link { text-decoration-thickness: 1px; transition: text-decoration-color .3s var(--brand-ease); }
.text-style-link:hover { text-decoration-color: transparent; }

/* Hero heading: Terracotta second sentence, words rise in on load.
   brand.js wraps each word; until then the heading is held invisible
   (with a 2.5s safety reveal in case the script never runs). */
.hero-heading-accent { color: var(--brand-terra); }

html.w-mod-js .hero-heading:not(.is-split) {
  opacity: 0;
  animation: hero-heading-fallback 0s linear 2.5s forwards;
}
@keyframes hero-heading-fallback { to { opacity: 1; } }

.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for Fraunces ascenders and descenders inside the clipping box */
  padding: 0.1em 0 0.14em;
  margin: -0.1em 0 -0.14em;
}
.hero-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  animation: hero-word-in 1.1s var(--brand-ease) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 70ms);
}
@keyframes hero-word-in {
  to { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Logo (inline SVG, coloured with currentColor)
   -------------------------------------------------------------------------- */

/* Logo in Rockpool (nav and footer); deepens to Deep Water on hover */
.brand-logo { display: block; width: auto; color: var(--brand-rockpool); transition: color .3s var(--brand-ease); }
.color-scheme-2 .brand-logo,
.color-scheme-3 .brand-logo { color: var(--brand-sea-salt); }

.navbar11_logo { height: 2.75rem; }
.footer12_logo { height: 3.25rem; }
@media screen and (max-width: 767px) {
  .navbar11_logo { height: 2.25rem; }
  .footer12_logo { height: 2.75rem; }
}

.navbar11_logo-link,
.footer12_logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .3s var(--brand-ease);
}
.navbar11_logo-link:hover .brand-logo,
.footer12_logo-link:hover .brand-logo { color: var(--brand-deep-water); }
.color-scheme-2 .footer12_logo-link:hover .brand-logo,
.color-scheme-3 .footer12_logo-link:hover .brand-logo { color: var(--brand-seafoam); }

/* --------------------------------------------------------------------------
   Buttons
   Primary = Terracotta with light text. Secondary = outline that fills on hover.
   -------------------------------------------------------------------------- */

.button {
  --btn-bg: var(--brand-terra);
  --btn-fg: var(--brand-white);
  --btn-fill: var(--brand-deep-water);
  --btn-fill-fg: var(--brand-sea-salt);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--btn-bg);
  box-shadow: none;
  color: var(--btn-fg);
  font-family: var(--brand-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition:
    transform .5s var(--brand-ease),
    color .45s var(--brand-ease),
    box-shadow .45s var(--brand-ease);
}

/* fill that rises from the bottom on hover */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--btn-fill);
  transform: translateY(101%);
  transition: transform .55s var(--brand-ease);
}

.button:hover {
  background-color: var(--btn-bg);
  box-shadow: none;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
@media (hover: hover) {
  .button:hover { color: var(--btn-fill-fg); }
  .button:hover::before { transform: translateY(0); }
}
.button:focus-visible { color: var(--btn-fill-fg); }
.button:focus-visible::before { transform: translateY(0); }
.button:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.97); }

/* On dark sections the coral fills with Sea Salt instead */
.color-scheme-2 .button,
.color-scheme-3 .button {
  --btn-fill: var(--brand-sea-salt);
  --btn-fill-fg: var(--brand-deep-water);
}

.button.is-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-scheme-1--text);
  --btn-fill: var(--color-scheme-1--text);
  --btn-fill-fg: var(--color-scheme-1--background);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-scheme-1--text);
  color: var(--btn-fg);
}
.button.is-secondary:hover {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-scheme-1--text);
}
/* Must sit after .button.is-secondary (same specificity) so the label
   switches to the fill-foreground colour instead of matching the fill */
@media (hover: hover) {
  .button.is-secondary:hover { color: var(--btn-fill-fg); }
}
.button.is-secondary:focus-visible { color: var(--btn-fill-fg); }

.button.is-small { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

.button .icon-embed-xsmall { width: 1.125rem; height: 1.125rem; transition: transform .5s var(--brand-ease); }
/* Icons without their own fill follow the label colour (and its hover change) */
.button svg:not([fill]) { fill: currentColor; transition: fill .45s var(--brand-ease); }
@media (hover: hover) {
  .button:hover .icon-embed-xsmall { transform: translateX(3px); }
}

/* Rolling label (spans are added by brand.js) */
.btn-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.2;
}
.btn-roll > span {
  display: block;
  transition: transform .55s var(--brand-ease);
}
.btn-roll > .btn-roll__b {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
}
@media (hover: hover) {
  .button:hover .btn-roll > span { transform: translateY(-100%); }
}
.button:focus-visible .btn-roll > span { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.navbar11_component {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    transform .5s var(--brand-ease),
    background-color .4s var(--brand-ease),
    border-color .4s var(--brand-ease);
}
.navbar11_component.is-scrolled {
  background-color: var(--brand-sea-salt);
  border-bottom-color: var(--brand-line-light);
}
.navbar11_component.is-hidden { transform: translateY(-100%); }

.navbar11_link,
.navbar11_dropdown-toggle {
  position: relative;
  font-family: var(--brand-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand-text-heading);
  text-decoration: none;
  transition: color .3s var(--brand-ease);
}

/* underline that draws in from the left on hover, stays for the active link */
.navbar11_link::after,
.navbar11_dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand-seafoam);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--brand-ease);
}
.navbar11_link:hover::after,
.navbar11_dropdown-toggle:hover::after,
.navbar11_menu-dropdown.w--open .navbar11_dropdown-toggle::after,
.navbar11_link.is-active::after,
.navbar11_link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.navbar11_link.w--current { color: var(--brand-text-heading); }
.navbar11_link.is-active { font-weight: 600; }

/* when hovering the menu, quieten the links that aren't hovered */
@media (hover: hover) {
  .navbar11_menu-links:hover .navbar11_link:not(:hover),
  .navbar11_menu-links:hover .navbar11_dropdown-toggle:not(:hover) { color: var(--brand-text-soft); }
}

.dropdown-chevron { transition: transform .45s var(--brand-ease); }
.navbar11_menu-dropdown.w--open .dropdown-chevron,
.navbar11_menu-dropdown:hover .dropdown-chevron { transform: rotate(180deg); }

.navbar11_dropdown-link-list {
  background-color: var(--brand-white);
  border-color: var(--brand-line-light);
  box-shadow: 0 24px 48px -24px rgba(8, 41, 39, .35);
}
.navbar11_dropdown-link {
  text-decoration: none;
  transition: background-color .3s var(--brand-ease), transform .45s var(--brand-ease);
}
.navbar11_dropdown-link:hover { background-color: var(--brand-sea-salt); transform: translateX(4px); }
.navbar11_dropdown-link .navbar11_icon-wrapper { color: var(--brand-rockpool); }

.navbar11_menu-buttons .button.navbar { white-space: nowrap; }

/* Mobile / tablet menu */
@media screen and (max-width: 991px) {
  .navbar11_menu,
  .navbar11_menu.is-page-height-tablet { background-color: var(--brand-sea-salt); }
  .navbar11_menu-links { font-family: var(--brand-font-heading); }
  .navbar11_link,
  .navbar11_dropdown-toggle {
    font-family: var(--brand-font-heading);
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .navbar11_menu-links { grid-row-gap: 0.5rem; row-gap: 0.5rem; }
  .navbar11_link.is-active { font-weight: 400; }
  .navbar11_link::after,
  .navbar11_dropdown-toggle::after { left: 0; right: auto; width: 2.5rem; bottom: 0.25rem; }
  .w--open .navbar11_menu-links > * {
    animation: brand-menu-in .6s var(--brand-ease) both;
  }
  .w--open .navbar11_menu-links > *:nth-child(2) { animation-delay: .04s; }
  .w--open .navbar11_menu-links > *:nth-child(3) { animation-delay: .08s; }
  .w--open .navbar11_menu-links > *:nth-child(4) { animation-delay: .12s; }
  .w--open .navbar11_menu-links > *:nth-child(5) { animation-delay: .16s; }
  /* Bar matches the open menu: solid Sea Salt, no dividing line */
  .navbar11_component.is-menu-open {
    background-color: var(--brand-sea-salt);
    border-bottom-color: transparent;
  }

  /* Open menu fills exactly the screen below the bar; buttons sit at the bottom */
  .navbar11_menu[data-nav-menu-open] {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    height: calc(100dvh - var(--nav-height, 4rem));
    padding-top: 1rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .navbar11_menu[data-nav-menu-open] .navbar11_menu-links { flex: 0 0 auto; }
  .navbar11_menu[data-nav-menu-open] .navbar11_menu-buttons {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }
  /* The floating book.app button would sit on top of the menu's own Book now */
  html.is-menu-open iframe[src*="book.app/bot"] {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .navbar11_menu-buttons .button,
  .navbar11_menu-buttons .button.is-small,
  .navbar11_menu-buttons .button.is-small.navbar.w--current {
    position: relative;
    width: 100%;
    padding: 1.125rem 1.5rem;
    font-size: 1.0625rem;
  }
}

@keyframes brand-menu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.menu-icon1_line-top,
.menu-icon1_line-middle,
.menu-icon1_line-bottom { background-color: var(--brand-text-heading); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section_header107.color-scheme-1.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--brand-sea-salt);
  background-image: none;
}

/* Hero: one oversized, slowly drifting crop of the topography, tone-on-tone
   on Sea Salt (the guide's "one oversized crop on light" treatment). */
.hero-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 115vh;
  overflow: hidden;
  pointer-events: none;
  /* fade out towards the bottom, and keep it very quiet behind the copy on the left */
  -webkit-mask-image:
    linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .25) 38%, #000 70%),
    linear-gradient(to bottom, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .25) 38%, #000 70%),
    linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-composite: intersect;
}
/* pointer parallax (set by brand.js) on the wrapper, slow drift on the pattern */
.hero-topo-inner {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--topo-x, 0px), var(--topo-y, 0px), 0);
  transition: transform 1.6s var(--brand-ease);
}
.hero-topo-inner::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: url("/assets/brand/topo-light.svg") 60% 40% / cover no-repeat;
  transform-origin: 60% 40%;
  animation: hero-topo-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-topo-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.04) rotate(0deg); }
  33%  { transform: translate3d(-4%, 2%, 0) scale(1.12) rotate(2deg); }
  66%  { transform: translate3d(3%, -3%, 0) scale(1.08) rotate(-1.5deg); }
  100% { transform: translate3d(-1.5%, 3%, 0) scale(1.15) rotate(1deg); }
}

/* --------------------------------------------------------------------------
   Gallery section: Webflow clips the whole section (overflow: hidden) so the
   100vw rows can't cause sideways scrolling, but the section ends right under
   the photos and was cutting their shadows off. Clip sideways only.
   -------------------------------------------------------------------------- */
@supports (overflow: clip) {
  .section_layout414 { overflow: visible; overflow-x: clip; }
}

/* Tone-on-tone topography on deep grounds */
.section_testimonial24.color-scheme-3.topo,
.section_team10.color-scheme-3.topo {
  background-color: var(--brand-deep-water);
  background-image:
    linear-gradient(rgba(8, 41, 39, .95), rgba(8, 41, 39, .95)),
    url("/assets/68349b77f52bacda412e6344_shutterstock_198623492-Converted-.svg");
}

/* Cards: white on Sea Salt */
.layout401_card,
.layout380_card-large,
.layout380_card-medium,
.layout380_card-small {
  background-color: var(--brand-white);
  border-color: var(--brand-line-light);
}
.layout401_card { transition: transform .6s var(--brand-ease), box-shadow .6s var(--brand-ease); }
.layout401_card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(8, 41, 39, .45); }
.layout401_card-content { transition: background-color .5s var(--brand-ease), color .5s var(--brand-ease); }
.layout401_card-content:hover {
  --brand-heading: currentColor;
  color: var(--brand-sea-salt);
  background-color: var(--brand-rockpool);
  background-image:
    linear-gradient(rgba(14, 60, 56, .92), rgba(14, 60, 56, .92)),
    url("/assets/68347b2b3d6b097a6aa6b337_Contour-Topography-Background.svg");
}

.layout380_card-large-image,
.layout380_card-medium-image,
.team10_image,
.timeline18_image { transition: transform 1.2s var(--brand-ease); }
.layout380_card-large:hover .layout380_card-large-image,
.layout380_card-medium:hover .layout380_card-medium-image { transform: scale(1.04); }

/* Timeline */
.timeline18_progress-line { background-color: var(--brand-line-light); }
.timeline18_circle { background-color: var(--brand-rockpool); box-shadow: 0 0 0 8px var(--brand-sea-salt); }

/* Testimonials on Deep Water: Rockpool cards, no outline */
.testimonial18_card {
  background-color: var(--brand-rockpool);
  border-color: var(--brand-rockpool);
}
.testimonial24_card { border-color: var(--brand-line-dark); }

/* Long review list: first cards shown, the rest behind "Show all reviews"
   (brand.js adds .is-collapsed and un-hides the button; without JS all show) */
.testimonial18_list.is-collapsed > .w-dyn-item:nth-child(n+10) { display: none; }
@media screen and (max-width: 767px) {
  .testimonial18_list.is-collapsed > .w-dyn-item:nth-child(n+6) { display: none; }
}
.testimonial18_list.is-revealed > .w-dyn-item { animation: brand-card-in .7s var(--brand-ease) both; }
@keyframes brand-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.testimonials-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.testimonials-more[hidden] { display: none; }

/* Slider arrows */
.w-slider-arrow-left,
.w-slider-arrow-right { transition: transform .45s var(--brand-ease); }
.w-slider-arrow-left:hover { transform: translateX(-3px); }
.w-slider-arrow-right:hover { transform: translateX(3px); }

/* Forms */
.form_input {
  border-color: var(--brand-line-light);
  border-radius: 10px;
  background-color: var(--brand-white);
  color: var(--brand-text-heading);
  font-family: var(--brand-font-body);
  transition: border-color .3s var(--brand-ease);
}
.form_input:hover { background-color: var(--brand-white); border-color: var(--brand-rockpool); }
.form_input:focus { border-color: var(--brand-deep-water); }
.form_input::placeholder { color: #5f7472; }
.form_checkbox-icon.w--redirected-checked,
.form_radio-icon.w--redirected-checked { border-color: var(--brand-deep-water); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer12_link {
  position: relative;
  width: fit-content;
  text-decoration: none;
  transition: color .3s var(--brand-ease);
}
.footer12_link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35rem;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--brand-ease);
}
.footer12_link:hover::after,
.footer12_link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

.footer12_social-link { transition: transform .45s var(--brand-ease), color .3s var(--brand-ease); }
.footer12_social-link:hover { transform: translateY(-3px); color: var(--brand-rockpool); }

/* Small legal / credit line — Instrument Sans, same voice as body copy */
.footer12_credit-text,
.footer4_credit-text {
  font-family: var(--brand-font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3D scrolling gallery (layout414) — transforms are set by brand.js
   -------------------------------------------------------------------------- */

.layout414_component { perspective: 1600px; }

.layout414_content-bottom {
  /* Webflow clips this row container (overflow: hidden) so the wide rows don't
     cause sideways scrolling. Extra padding, cancelled by negative margins,
     gives the tile shadows room so they fade out instead of being cut off. */
  padding-top: 2.5rem;
  padding-bottom: 6rem;
  margin-top: -2.5rem;
  margin-bottom: -6rem;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  transform: rotateX(var(--gallery-tilt, 0deg)) scale(var(--gallery-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

.layout414_image-wrapper {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform:
    translateZ(var(--tile-z, 0px))
    rotateY(var(--tile-ry, 0deg));
  transition: box-shadow .6s var(--brand-ease);
  box-shadow: 0 28px 48px -30px rgba(8, 41, 39, .4);
  will-change: transform;
}
.layout414_image { transition: transform 1s var(--brand-ease), filter 1s var(--brand-ease); }
.layout414_image-wrapper:hover .layout414_image { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Custom dot cursor (enabled by brand.js on fine pointers only)
   -------------------------------------------------------------------------- */

html.has-custom-cursor,
html.has-custom-cursor * { cursor: none !important; }
html.has-custom-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html.has-custom-cursor textarea,
html.has-custom-cursor [contenteditable="true"] { cursor: text !important; }

.cursor-dot {
  --cursor-size: 10px;
  --cursor-color: var(--brand-sage);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin: calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  border-radius: 50%;
  background-color: var(--cursor-color);
  box-shadow: inset 0 0 0 1.5px var(--cursor-color);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
  transition:
    width .35s var(--brand-ease),
    height .35s var(--brand-ease),
    margin .35s var(--brand-ease),
    background-color .3s var(--brand-ease),
    box-shadow .3s var(--brand-ease),
    opacity .3s ease;
}
.cursor-dot.is-visible { opacity: 1; }
.cursor-dot.is-hover {
  --cursor-size: 44px;
  background-color: transparent;
}
.cursor-dot.is-media {
  --cursor-size: 64px;
  background-color: transparent;
}
.cursor-dot.is-text { opacity: 0; }
.cursor-dot.is-down { --cursor-size: 7px; }
.cursor-dot.is-hover.is-down { --cursor-size: 36px; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .button,
  .button::before,
  .btn-roll > span,
  .navbar11_component,
  .layout401_card,
  .layout414_image,
  .layout380_card-large-image,
  .layout380_card-medium-image { transition-duration: .01ms !important; }
  .btn-roll > span { transform: none !important; }
  .layout414_content-bottom,
  .layout414_image-wrapper { transform: none !important; }
  .w--open .navbar11_menu-links > * { animation: none !important; }
  .hero-topo-inner::before { animation: none !important; }
  .hero-topo-inner { transform: none !important; }
  .hero-word > span { transform: none !important; opacity: 1 !important; animation: none !important; }
  .testimonial18_list.is-revealed > .w-dyn-item { animation: none !important; }
  html.w-mod-js .hero-heading { opacity: 1 !important; animation: none !important; }
}