/* ==========================================================================
   Refined theme layer
   Loaded last on every page (after main.css and the inline <style> blocks),
   so it restyles the template without touching main.css. Pairs with
   js/refine.js, which adds the reveal / cursor / header behaviour; rules that
   hide content until JS reveals it are scoped under html.refine so the page
   still renders if the script fails.
   ========================================================================== */

:root {
  /* Surfaces: black */
  --bg: #0a0a0a;
  --bg-2: #101010;
  --bg-3: #181818;

  /* Ink: pale lichen and sage, not cream */
  --ink: #dfe8d6;
  --ink-2: #a3b29b;
  --muted: #71806b;
  --line: rgba(190, 212, 178, 0.12);
  --line-strong: rgba(190, 212, 178, 0.30);

  /* Accents: moss for interaction, clay/ochre for labels */
  --accent: #8db56a;
  --accent-ink: #0a0a0a; /* text on a moss fill */
  --earth: #c08a52;

  /* Type: headings in Public Sans (the U.S. government's typeface), set
     uppercase and tracked like a drawing title block; Inter for reading;
     Italianno, a fine calligraphic script, for the Latin names */
  --font-display: "Public Sans", "Segoe UI", Arial, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Italianno", "Segoe Script", cursive;

  /* Motion: smooth for things that settle, snap for things you press */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ease-wipe: cubic-bezier(0.77, 0, 0.18, 1);
  --dur-snap: 180ms;
  --dur-base: 450ms;
  --dur-slow: 1000ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html body.bg-white,
html.bg-white {
  background: var(--bg) !important;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

h4, h5, h6, .h4, .h5, .h6,
button, input, textarea {
  font-family: var(--font-sans);
}

/* Bootstrap's .text-white is pure #fff; use the palette's lichen white */
.text-white {
  color: var(--ink) !important;
}

::selection {
  background-color: rgba(141, 181, 106, 0.4);
  color: var(--ink);
}

a {
  transition: color var(--dur-base) var(--ease-out);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Quiet, thin scrollbar */
html {
  scrollbar-color: #2a2a2a var(--bg);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border: 3px solid var(--bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* --------------------------------------------------------------------------
   Surfaces: one dark, flat palette instead of the dotted template grids
   -------------------------------------------------------------------------- */
.gallery-area,
.grid1 {
  background-color: var(--bg);
  background-image: none;
}

.blog-area,
.contact-area {
  background-color: var(--bg-2);
  background-image: none;
}

.grid2 {
  background-image: none;
}

.footer-area {
  background-color: var(--bg);
}

.section-gap {
  padding: 110px 0;
}

@media (max-width: 767px) {
  .section-gap { padding: 72px 0; }
}

/* --------------------------------------------------------------------------
   Scroll progress hairline (element added by refine.js)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 1200;
  pointer-events: none;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.default-header {
  background-color: transparent;
  transition:
    transform var(--dur-base) var(--ease-snap),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.is-sticky .default-header,
.default-header.is-solid {
  background-color: rgba(10, 10, 10, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

/* Slides away while scrolling down, snaps back on the way up */
.default-header.is-tucked {
  transform: translateY(-100%);
}

.logo img {
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-snap) var(--ease-snap);
}
.logo a:hover img { opacity: 0.75; }
.logo a:active img { transform: scale(0.96); }

/* Hamburger: snappy press, quick spin when the icon swaps */
.menu-bar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--dur-snap) var(--ease-snap), transform var(--dur-snap) var(--ease-snap);
}
.menu-bar:hover { background-color: rgba(190, 212, 178, 0.08); }
.menu-bar:active { transform: scale(0.9); }
.menu-bar span {
  color: var(--ink);
  font-size: 20px;
  display: inline-block;
}
.menu-bar .lnr-cross { animation: icon-in-cross 320ms var(--ease-snap); }
.menu-bar .lnr-menu { animation: icon-in-menu 320ms var(--ease-snap); }
@keyframes icon-in-cross { from { transform: rotate(-90deg) scale(0.6); opacity: 0; } }
@keyframes icon-in-menu { from { transform: rotate(90deg) scale(0.6); opacity: 0; } }

/* Nav: fade + stagger instead of the template's scale(0) pop */
nav {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s;
}
nav.hide {
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}

nav > a,
nav > .nav-item-dropdown {
  transition:
    opacity 420ms var(--ease-out) calc(var(--i, 0) * 40ms),
    transform 520ms var(--ease-out) calc(var(--i, 0) * 40ms);
}
nav.hide > a,
nav.hide > .nav-item-dropdown {
  opacity: 0;
  transform: translateX(16px);
  transition-delay: 0s;
}

nav a {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 0 18px;
}

/* Underline that wipes in from the left and out to the right */
nav > a,
nav > .nav-item-dropdown > a {
  position: relative;
  padding: 6px 0;
}
nav > a::after,
nav > .nav-item-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 320ms var(--ease-snap);
}
nav > a:hover::after,
nav > .nav-item-dropdown:hover > a::after,
nav > a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
nav a:hover {
  color: var(--ink);
}

/* Galleries dropdown */
.dropdown-content,
.nav1-dropdown-content {
  background-color: rgba(16, 16, 16, 0.92) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 0;
  min-width: 210px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(-6px);
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-snap);
}
.nav-item-dropdown:hover .dropdown-content,
.nav-item-dropdown:hover .nav1-dropdown-content,
.nav-item-dropdown:focus-within .dropdown-content,
.nav-item-dropdown:focus-within .nav1-dropdown-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-content a,
.nav1-dropdown-content a {
  position: relative;
  margin: 0;
  padding: 8px 22px !important;
  background-color: transparent !important;
  color: var(--ink-2) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  text-align: left;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    color var(--dur-snap) var(--ease-snap),
    padding-left 260ms var(--ease-snap),
    opacity 300ms var(--ease-out) calc(var(--i, 0) * 22ms),
    transform 360ms var(--ease-out) calc(var(--i, 0) * 22ms);
}
.nav-item-dropdown:hover .dropdown-content a,
.nav-item-dropdown:hover .nav1-dropdown-content a,
.nav-item-dropdown:focus-within .dropdown-content a,
.nav-item-dropdown:focus-within .nav1-dropdown-content a {
  opacity: 1;
  transform: none;
}
.dropdown-content a::before,
.nav1-dropdown-content a::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 260ms var(--ease-snap);
}
.dropdown-content a:hover,
.nav1-dropdown-content a:hover {
  color: var(--ink) !important;
  background-color: transparent !important;
  padding-left: 40px !important;
}
.dropdown-content a:hover::before,
.nav1-dropdown-content a:hover::before {
  transform: scaleX(1);
}

/* Mobile nav: dark panel instead of the white template box */
@media (max-width: 767px) {
  nav {
    top: 52px;
    right: 0;
    min-width: 220px;
    padding: 14px 0;
    text-align: left;
    background: rgba(10, 10, 10, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
  nav a,
  nav a:hover {
    color: var(--ink) !important;
  }
  nav > a,
  nav > .nav-item-dropdown {
    display: table; /* one item per row, underline sized to the label */
    margin: 8px 24px;
  }
  nav > .nav-item-dropdown > a {
    margin: 0;
  }
  .dropdown-content { display: none; }
}

/* Loading ring: thin and on-palette */
#loading-progress-circle circle {
  stroke: var(--accent) !important;
  stroke-width: 2;
}
#loading-progress-circle text {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0.6) 100%
  );
}
.carousel-caption { z-index: 2; }

/* Crossfade between slides (Bootstrap 4 beta has no .carousel-fade) */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev,
.carousel-fade .active.carousel-item-right,
.carousel-fade .active.carousel-item-next {
  transform: none;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Prev / next: hidden until the hero is hovered, nudge on hover */
.carousel-control-prev,
.carousel-control-next {
  width: 9%;
  opacity: 0;
  z-index: 3;
  transition: opacity var(--dur-base) var(--ease-out);
}
.banner-area:hover .carousel-control-prev,
.banner-area:hover .carousel-control-next,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  opacity: 0.75;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1 !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 22px;
  height: 22px;
  transition: transform 260ms var(--ease-snap);
}
.carousel-control-prev:hover .carousel-control-prev-icon { transform: translateX(-4px); }
.carousel-control-next:hover .carousel-control-next-icon { transform: translateX(4px); }
.carousel-control-prev:active .carousel-control-prev-icon,
.carousel-control-next:active .carousel-control-next-icon { transform: scale(0.85); }

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero-title .hero-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.14em;
  padding-left: 0.14em; /* balances the trailing letter-spacing */
  text-transform: uppercase;
}
.hero-title .hero-sub {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  padding-left: 0.5em; /* balances the trailing letter-spacing */
  color: rgba(255, 255, 255, 0.85);
}
.hero-title .hero-sub::before,
.hero-title .hero-sub::after {
  content: "";
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

/* Hero entrance: name rises out of a mask, the rule lines draw outward */
.refine .hero-title .mask__inner {
  transition: transform 1.1s var(--ease-wipe) 0.1s;
}
.refine .hero-title .hero-sub {
  opacity: 0;
  letter-spacing: 0.9em;
  transition: opacity 1.2s var(--ease-out) 0.55s, letter-spacing 1.6s var(--ease-out) 0.55s;
}
.refine .hero-title .hero-sub::before,
.refine .hero-title .hero-sub::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-wipe) 0.9s;
}
.refine .hero-title .hero-sub::before { transform-origin: 100% 50%; }
.refine .hero-title .hero-sub::after { transform-origin: 0 50%; }
.refine .hero-title.is-in .hero-sub {
  opacity: 1;
  letter-spacing: 0.5em;
}
.refine .hero-title.is-in .hero-sub::before,
.refine .hero-title.is-in .hero-sub::after {
  transform: scaleX(1);
}

/* Scroll cue at the bottom of the hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding-left: 0.3em;
}
.scroll-cue:hover { color: #fff; }
/* Only shown until the visitor first scrolls (refine.js adds .is-gone) */
.scroll-cue {
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0s;
}
.scroll-cue.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  animation: scroll-cue 2.2s var(--ease-wipe) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (max-width: 767px) {
  .scroll-cue { display: none; }
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.header-text h1,
.contact-right h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.header-text h4 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-2) !important;
}

/* Gallery headings: title-block heading, Latin name in a moss-green
   calligraphic script */
.gallery-area .col-md-8 h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.gallery-area .col-md-8 .text-italic {
  font-family: var(--font-hand);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400; /* Italianno has one weight; anything heavier is faux-bold */
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent) !important;
}

/* Mask used by refine.js for headline reveals */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.mask__inner {
  display: inline-block;
}
.refine .reveal--mask .mask__inner,
.refine .hero-title .mask__inner {
  transform: translateY(110%);
}
.refine .reveal--mask .mask__inner {
  transition: transform 0.95s var(--ease-wipe) var(--d, 0s);
}
.refine .reveal--mask.is-in .mask__inner,
.refine .hero-title.is-in .mask__inner {
  transform: none;
}

/* --------------------------------------------------------------------------
   Scroll reveals (classes added by refine.js; replaces the GSAP fade-up)
   -------------------------------------------------------------------------- */
.refine .reveal--fade {
  opacity: 0;
  translate: 0 28px;
}
.refine .reveal--fade.is-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 1s var(--ease-out) var(--d, 0s),
    translate 1.1s var(--ease-out) var(--d, 0s);
}

/* Framed images (grid photos, story thumbnails): a cover panel retracts
   upward while the photo settles from a slight zoom. Every animated
   property here is a transform, so the GPU runs it without repainting.
   The photo zoom uses the individual `scale` property so hover can use
   `transform` independently. */
.refine .reveal--frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-3);
  transform-origin: 50% 0;
  pointer-events: none;
}
.refine .reveal--frame.is-in.is-loaded::after {
  transform: scaleY(0);
  transition: transform 0.9s var(--ease-wipe) var(--d, 0s);
}
.refine .reveal--frame img {
  scale: 1.08;
}
.refine .reveal--frame.is-in.is-loaded img {
  scale: 1;
  transition:
    scale 1.3s var(--ease-out) var(--d, 0s),
    transform 0.8s var(--ease-out);
}

/* Unframed images just fade in */
.refine .reveal--img {
  opacity: 0;
}
.refine .reveal--img.is-in.is-loaded {
  opacity: 1;
  transition: opacity 0.9s var(--ease-out) var(--d, 0s);
}

/* Frames near the viewport keep their photo on its own GPU layer, so the
   zoom never re-rasterises mid-animation or snaps when it ends
   (refine.js toggles .is-near; far-off frames release the memory). */
.gal > a.is-near img,
.media-frame.is-near img {
  will-change: transform, scale;
  backface-visibility: hidden;
}

/* main.css marks every section `will-change: filter` for its nav-scroll
   motion blur, which holds page-sized GPU layers the whole time (and blows
   Firefox's will-change budget of 3x the viewport). Only hint while that
   blur is running.
   ponytail: image zooms are smooth in Chromium but still stutter in Gecko
   browsers (Firefox, Zen). Opacity-only dimming, scoped will-change and a
   pixel-snapping rotate trick didn't fix it there; treated as a Gecko
   limitation. Revisit if Firefox's compositor changes or a Gecko-specific
   cause turns up. */
.scroll-blur-target {
  will-change: auto;
}
body.nav-scrolling .scroll-blur-target {
  will-change: filter;
}

/* Dimming is a black overlay that only animates opacity, never `filter`.
   Firefox can't run filter on the GPU, and an element animating filter and
   transform together drops both onto the main thread, so the zoom stutters.
   Opacity and transform both stay on the compositor in every browser. */
.gal > a::before,
.media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Photo grids: framed images, slow zoom, the rest of the grid steps back
   -------------------------------------------------------------------------- */
.gal {
  column-gap: 14px;
}
.gal > a {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background-color: var(--bg-3);
  transition: transform var(--dur-snap) var(--ease-snap);
}
.gal img,
.single-blog .gal .f-img1 {
  display: block;
  width: 100%;
  padding: 0;
  opacity: 1;
}
.single-blog .f-img1,
.single-blog .f-img1:hover {
  opacity: 1;
}
.gal > a:active {
  transform: scale(0.985);
}

@media (hover: hover) {
  .gal > a img {
    transition: transform 0.8s var(--ease-out);
  }
  .gal > a:hover img {
    transform: scale(1.04);
  }
  .gal:hover > a::before {
    opacity: 0.45;
  }
  .gal:hover > a:hover::before {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Editing reels + animation grid
   -------------------------------------------------------------------------- */
/* Editing Work reels stay put on hover: no lift, zoom or glyph scale.
   The only hover response is the thumbnail overlay fading out (main.css)
   to reveal the YouTube player. */
.video-container {
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.youtube-custom-overlay {
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.6s var(--ease-out);
}

/* Animation grid: shadow fixed, and the dimmed videos get an opacity
   overlay instead of main.css's brightness/blur filter (filtering eight
   playing videos every frame made the expand stutter, worst in Firefox) */
.video-box {
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.7s var(--ease-out);
}
.video-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.video-box video {
  border-radius: 3px;
  transition: none;
}
.video-box.expanded {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.gallery.dimmed .video-box:not(.expanded) {
  filter: none;
}
.gallery.dimmed .video-box:not(.expanded)::after {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Stories (the light "blog" area, now on the dark palette)
   -------------------------------------------------------------------------- */
.blog-area .single-blog h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-top: 28px;
}
.blog-area .single-blog h4 a {
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 420ms var(--ease-snap), color var(--dur-base) var(--ease-out);
}
.blog-area .single-blog h4 a:hover {
  color: var(--ink);
  background-size: 100% 1px;
}
.blog-area .single-blog p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
}
.blog-area .single-blog p a,
.contact-right p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.blog-area .single-blog p a:hover,
.contact-right p a:hover {
  color: var(--earth);
  text-decoration-color: var(--earth);
}
.blog-area .single-blog .bottom {
  border-color: var(--line);
}

/* Thumbnail links get a frame (class added by refine.js) */
.media-frame {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-3);
  transition: transform var(--dur-snap) var(--ease-snap);
}
.media-frame:active { transform: scale(0.985); }
.single-blog .media-frame .f-img {
  display: block;
  width: 100%;
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .single-blog .media-frame .f-img {
    transition: transform 0.8s var(--ease-out);
  }
  .single-blog .media-frame:hover .f-img {
    transform: scale(1.04);
  }
  .media-frame:hover::before {
    opacity: 0.15;
  }
}

/* "See the whole journey" toggle */
.expand-trigger {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 0;
  transition: color var(--dur-base) var(--ease-out);
}
.expand-trigger:hover { color: var(--accent); }
.expand-trigger::before,
.expand-trigger::after {
  font-size: 8px;
  transition: transform 360ms var(--ease-snap);
}

/* --------------------------------------------------------------------------
   Buttons: hairline outline, ink fill sweeps up on hover, press feedback
   -------------------------------------------------------------------------- */
.primary-btn,
.primary-btn2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 50px;
  padding-left: 30px;
  padding-right: 62px;
  transition:
    color 380ms var(--ease-snap),
    border-color 380ms var(--ease-snap),
    transform var(--dur-snap) var(--ease-snap);
}
.primary-btn::after,
.primary-btn2::after,
.primary-btn:after,
.primary-btn2:after {
  z-index: -1;
  opacity: 1;
  border-radius: 0;
  background: var(--accent);
  background-image: none;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 420ms var(--ease-wipe);
}
.primary-btn:hover,
.primary-btn2:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.primary-btn:hover::after,
.primary-btn2:hover::after {
  transform: scaleY(1);
}
.primary-btn:active,
.primary-btn2:active {
  transform: scale(0.97);
}
.primary-btn span,
.primary-btn2 span,
.primary-btn:hover span,
.primary-btn2:hover span {
  color: inherit;
  right: 28px;
  transition: transform 380ms var(--ease-snap);
}
.primary-btn:hover span,
.primary-btn2:hover span {
  transform: translate(5px, -60%);
}

/* Keep the submit button's width/opacity morph from main.js */
.submit-btn.primary-btn {
  transition:
    width 0.6s var(--ease-out),
    opacity 0.6s var(--ease-out),
    color 380ms var(--ease-snap),
    border-color 380ms var(--ease-snap),
    background-color 0.6s var(--ease-out),
    transform var(--dur-snap) var(--ease-snap);
}
.submit-btn.primary-btn.success {
  background-color: #2f6b4a;
  border-color: #2f6b4a;
  color: #fff;
}
.submit-btn.primary-btn.error {
  background-color: #7a2d2d;
  border-color: #7a2d2d;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-right {
  color: var(--ink-2);
}
.contact-right h1 {
  color: var(--ink);
}
.contact-right p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.8;
}
#myForm,
.contact-right .booking-form {
  background-color: transparent !important;
}
.contact-right .form-control,
.contact-right input,
.contact-right textarea {
  color: var(--ink);
  font-size: 15px;
  font-weight: 300;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 14px 0;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  box-shadow: none;
  transition: background-size 0.6s var(--ease-wipe), border-color var(--dur-base) var(--ease-out);
}
.contact-right .form-control:focus,
.contact-right input:focus,
.contact-right textarea:focus {
  color: var(--ink);
  background-color: transparent;
  background-size: 100% 1px;
  box-shadow: none;
  outline: none;
}
.contact-right ::placeholder {
  color: var(--muted);
  opacity: 1;
}
.contact-right textarea {
  resize: vertical;
}

.contact-left img {
  display: block;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}
.footer-social a {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  background-image: none;
  transition:
    background-color 300ms var(--ease-snap),
    border-color 300ms var(--ease-snap),
    transform 300ms var(--ease-snap);
}
.footer-social a i {
  color: var(--ink);
  font-size: 12px;
  transition: color 300ms var(--ease-snap);
}
.footer-social a:hover {
  background-color: var(--accent);
  background-image: none;
  border-color: var(--accent);
  transform: translateY(-3px);
}
.footer-social a:hover i {
  color: var(--accent-ink);
}
.footer-social a:active {
  transform: translateY(0) scale(0.92);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.sl-overlay,
.mfp-bg {
  background: rgba(8, 8, 8, 0.86) !important;
}
.sl-wrapper .sl-image img {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button {
  color: var(--ink) !important;
  font-family: var(--font-sans);
  font-weight: 200;
  opacity: 0.7;
  transition: opacity var(--dur-snap) var(--ease-snap), transform 260ms var(--ease-snap);
}
.sl-wrapper .sl-close:hover,
.sl-wrapper .sl-navigation button:hover {
  opacity: 1;
}
.sl-wrapper .sl-close:hover { transform: rotate(90deg); }
.sl-wrapper .sl-navigation button.sl-prev:hover { transform: translateX(-5px); }
.sl-wrapper .sl-navigation button.sl-next:hover { transform: translateX(5px); }
.sl-wrapper .sl-close:active,
.sl-wrapper .sl-navigation button:active { transform: scale(0.88); }
.sl-wrapper .sl-counter {
  color: var(--ink-2) !important;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   Galleries page: floating "Galleries" switcher
   -------------------------------------------------------------------------- */
section:has(nav1) {
  background-color: var(--bg) !important; /* inline #222 on galleries.html */
}
nav1 h1 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}
nav1 > a:hover h1 {
  color: var(--accent) !important;
}
.is-sticky .default-header1 {
  background-color: rgba(10, 10, 10, 0.78) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-radius: 0 0 6px 6px;
}
.dropdown-trigger-svg {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  transition: transform 300ms var(--ease-snap) !important;
}

/* --------------------------------------------------------------------------
   Cursor dot over openable media (element added by refine.js): a small,
   faint grey disc that trails the pointer; no text
   -------------------------------------------------------------------------- */
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10070;
  pointer-events: none;
  will-change: transform;
}
.cursor-label__inner {
  display: block;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.22);
  border: 1px solid rgba(220, 220, 220, 0.35);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 220ms var(--ease-snap), transform 320ms var(--ease-snap);
}
.cursor-label.is-active .cursor-label__inner {
  opacity: 1;
  transform: scale(1);
}
.cursor-label.is-pressed .cursor-label__inner {
  transform: scale(0.85);
  transition-duration: 120ms;
}

/* --------------------------------------------------------------------------
   Reduced motion: reveals become plain fades (no travel, wipe or zoom-in)
   and looping motion stops. Hover/press feedback stays, since it only
   happens in direct response to the pointer.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .refine .reveal--fade {
    translate: none;
  }
  .refine .reveal--fade.is-in {
    transition: opacity 0.8s var(--ease-out) var(--d, 0s);
  }
  .refine .reveal--frame img {
    scale: none;
  }
  .refine .reveal--frame.is-in.is-loaded::after {
    transform: none;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out) var(--d, 0s);
  }
  .refine .reveal--mask .mask__inner,
  .refine .hero-title .mask__inner {
    transform: none;
    opacity: 0;
    transition: opacity 0.8s var(--ease-out) var(--d, 0s);
  }
  .refine .reveal--mask.is-in .mask__inner,
  .refine .hero-title.is-in .mask__inner {
    opacity: 1;
  }
  .refine .hero-title .hero-sub {
    letter-spacing: 0.5em;
    transition: opacity 0.8s var(--ease-out) 0.3s;
  }
  .refine .hero-title .hero-sub::before,
  .refine .hero-title .hero-sub::after {
    transform: none;
  }
  .scroll-cue__line::after {
    animation: none;
  }
}