/* ==========================================================================
   Pixels Photo Studio — editorial light theme
   Cormorant Garamond (display) + Jost (UI). Photos are the subject; the
   interface stays quiet around them.
   ========================================================================== */

:root {
  /* Warm off-white rather than #fff — pure white makes photographs look
     clinical and reveals every difference in their white balance. */
  --paper:      #FBFAF8;
  --paper-2:    #F4F2EE;
  --paper-3:    #EBE7E1;
  --ink:        #1C1B19;
  --ink-2:      #4A4843;
  --ink-3:      #86827A;
  --line:       #E2DED7;

  /* Brand green #6CB644 desaturated toward sage. The logo keeps the original;
     at large areas the raw lime fights the warm neutrals and reads cheap. */
  --accent:     #62804A;
  --accent-2:   #7D9B62;
  --gold:       #B08D57;

  /* EB Garamond, not Cormorant: Cormorant's caron/acute sit so high and thin
     that on Croatian display headings the accent reads as detached from the
     letter. See tools/fetch_fonts.py. */
  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.87rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.2vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.5rem + 3vw, 4rem);
  --step-4:  clamp(2.8rem, 1.6rem + 6vw, 7rem);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 76px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.9rem 1.4rem;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- helpers -- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.kicker::before {
  content: "";
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: var(--accent);
  flex: none;
}
.kicker--center { justify-content: center; }

h1, h2, h3 {
  font-family: var(--font-display);
  /* EB Garamond's axis starts at 400 — asking for 300 just clamps here. */
  font-weight: 400;
  /* 1.06 was tuned for Cormorant; EB Garamond has a larger x-height and needs
     slightly more room, especially with stacked Croatian accents. */
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- btns -- */
.btn {
  --bg: var(--ink);
  --fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
/* Wipe-up fill on hover — cheap (transform only) and feels considered. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--bg); }
.btn:hover::after { transform: translateY(0); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn--light {
  --bg: transparent;
  --fg: #fff;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--light::after { background: #fff; }
.btn--light:hover { color: var(--ink); border-color: #fff; }

/* Understated text link with an underline that draws in from the left. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s ease;
}
.tlink:hover { background-size: 100% 1px; color: var(--accent); }
.tlink svg { transition: transform 0.4s var(--ease); }
.tlink:hover svg { transform: translateX(5px); }

/* -------------------------------------------------------------- header -- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              transform 0.5s var(--ease);
}
.hdr__in {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Over the hero the header is transparent with white text; once scrolled past
   it flips to solid paper. Both states live here, toggled by JS. */
.hdr--over { color: #fff; }
/* The hero scrim alone isn't enough behind the logo/nav on a bright photo. */
.hdr--over .brand__txt,
.hdr--over .nav__a,
.hdr--over .lang__btn { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.hdr--solid {
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.hdr--hide { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__txt {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.brand__txt small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.nav__a {
  position: relative;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.4rem 0;
}
.nav__a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__a:hover::after,
.nav__a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.hdr__side { display: flex; align-items: center; gap: 1.1rem; }

/* language switcher */
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.4rem 0.2rem;
}
.lang__btn svg { transition: transform 0.3s var(--ease); }
.lang[data-open="true"] .lang__btn svg { transform: rotate(180deg); }
.lang__list {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 132px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              visibility 0.3s;
}
.lang[data-open="true"] .lang__list {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang__a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  font-size: var(--step--1);
  transition: background 0.25s ease;
}
.lang__a:hover { background: var(--paper-2); }
.lang__a[aria-current="true"] { color: var(--accent); }
.lang__a small { color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

.burger {
  display: none;
  width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 4px; right: 4px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.25s ease;
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 21px; }
[data-menu="true"] .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
[data-menu="true"] .burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
}
/* Hero art must FILL the section. The .ph box carries an inline aspect-ratio
   (from the photo) which otherwise wins over the bottom inset even on an
   absolutely-positioned box — on a phone that collapsed a landscape hero to a
   ~250px band with dead space below. Stating BOTH dimensions explicitly leaves
   aspect-ratio nothing to resolve, so the box fills its container. */
.hero__media .ph,
.phero__media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Slow push-in. Starts scaled so it never reveals an edge. */
  animation: kenburns 22s var(--ease-io) forwards;
}
@keyframes kenburns {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}
/* Scrim. The hero photo is a bright limestone wall, so white text needs real
   help — the earlier, lighter gradient left the kicker and the logo illegible.
   Three layers: top band for the header, bottom band for the headline block,
   and a light overall wash to hold the middle together. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,9,0.55) 0%, rgba(10,10,9,0.12) 22%, rgba(10,10,9,0) 40%),
    linear-gradient(0deg, rgba(10,10,9,0.82) 0%, rgba(10,10,9,0.55) 28%, rgba(10,10,9,0.12) 62%, rgba(10,10,9,0) 82%),
    linear-gradient(90deg, rgba(10,10,9,0.35) 0%, rgba(10,10,9,0) 55%);
}
.hero__in {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 7rem);
  color: #fff;
}
.hero .kicker {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero .kicker::before { background: rgba(255, 255, 255, 0.7); }
.hero h1 {
  margin: 1.5rem 0 1.6rem;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.28);
}
.hero__sub {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
}
.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}
/* :not(.btn--light) matters — without it this also repaints the ghost button
   white, and .btn--light's own white text then vanishes into it. */
.hero__btns .btn:not(.btn--light) { --bg: #fff; --fg: var(--ink); }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 9vh, 7rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hero__scroll i {
  width: 1px; height: 54px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  animation: trickle 2.4s var(--ease-io) infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------ page hero (sub) -- */
/* Shorter than the homepage hero — a photo band with the page title, not a
   full-viewport statement. */
.phero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  margin-top: 0;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: kenburns 22s var(--ease-io) forwards;
}
.phero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,9,0.5) 0%, rgba(10,10,9,0) 32%),
    linear-gradient(0deg, rgba(10,10,9,0.78) 0%, rgba(10,10,9,0.3) 42%, rgba(10,10,9,0) 72%);
}
.phero__in {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem);
  color: #fff;
}
.phero .kicker {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.phero .kicker::before { background: rgba(255, 255, 255, 0.7); }
.phero h1 {
  /* Smaller than the homepage hero (--step-4). A subpage title can run to 3
     lines; at homepage size that overflowed upward into the header. */
  font-size: var(--step-3);
  margin: 1.3rem 0 1.3rem;
  max-width: 18ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}
.phero__sub {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Service intro: lead heading beside body copy. */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.intro__lead h2 { margin-top: 1.3rem; }
.intro__body p + p { margin-top: 1.1rem; }
.intro__body p {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
}
.intro__approach {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.intro__approach h3 { color: var(--accent); margin-bottom: 0.8rem; }
.intro__approach p { font-size: var(--step-0); color: var(--ink-2); }

/* 5-up why grid — flexible so five reasons wrap evenly. */
.why__grid--5 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Legal pages — plain, readable long-form text. */
.legal__body { max-width: 68ch; margin-inline: auto; }
.legal__body h1 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.legal__updated { color: var(--ink-3); font-size: var(--step--1); margin-bottom: 2.5rem; }
.legal__body h2 { font-size: var(--step-1); margin: 2.2rem 0 0.8rem; }
.legal__body p { color: var(--ink-2); margin-bottom: 0.9rem; }
.legal__body a { color: var(--accent); }

/* About page — a readable, generously-set story column. */
.about__body {
  max-width: 56ch;
  margin-inline: auto;
}
.about__body p {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
}
.about__body p + p { margin-top: 1.3rem; }
.about__body p:first-child {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 1.8rem;
}

/* --------------------------------------------------------------- proof -- */
.proof {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
/* Same strip used mid-page on service pages — border top+bottom, not just one. */
.proof--band { border-top: 1px solid var(--line); }
.proof__in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding: 1.15rem 0;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.proof__stars { display: flex; gap: 3px; color: var(--gold); }
.proof__rating { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); }
.proof__sep { width: 1px; height: 15px; background: var(--line); }

/* ------------------------------------------------------------ sections -- */
.sec { padding-block: clamp(4.5rem, 11vw, 9.5rem); }
.sec--tight { padding-block: clamp(3rem, 7vw, 6rem); }
.sec__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec__head h2 { margin-top: 1.3rem; }
.sec__head--center { text-align: center; }
.sec__head--center .lede { margin-inline: auto; }

/* story: portrait photo + copy */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.story__fig { position: relative; }
.story__fig .ph { aspect-ratio: 3 / 4; }
.story__fig::after {
  /* thin offset rule — an editorial tell, costs nothing */
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 55%; height: 55%;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  opacity: 0.5;
  z-index: -1;
}
.story__body p + p { margin-top: 1.1rem; }
.story__body h2 { margin: 1.3rem 0 1.8rem; }
.story__body .tlink { margin-top: 2.2rem; }

/* categories */
.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.cat {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-2);
}
.cat .ph { aspect-ratio: 4 / 5.4; }
.cat img { transition: transform 1.1s var(--ease); }
.cat:hover img { transform: scale(1.055); }
.cat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12,12,10,0.82) 0%, rgba(12,12,10,0.22) 42%, rgba(12,12,10,0) 68%);
  transition: opacity 0.6s var(--ease);
}
.cat:hover::after { opacity: 0.88; }
.cat__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  color: #fff;
}
.cat__body h3 { font-size: var(--step-2); }
.cat__txt {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.7rem;
  /* Collapsed by default; expands on hover. grid-template-rows animates
     cleanly from 0 without needing a hard-coded height. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease), opacity 0.4s ease;
  opacity: 0;
}
.cat__txt > span { overflow: hidden; }
.cat:hover .cat__txt,
.cat:focus-visible .cat__txt { grid-template-rows: 1fr; opacity: 1; }
.cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cat__cta svg { transition: transform 0.4s var(--ease); }
.cat:hover .cat__cta svg { transform: translateX(5px); }

/* why: numbered rules */
.why { background: var(--paper-2); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.why__item { padding-top: 1.6rem; border-top: 1px solid var(--line); }
.why__n {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.why__item h3 { margin: 0.9rem 0 0.8rem; }
.why__item p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.7; }

/* Gallery — masonry via CSS columns. Every photo keeps its true aspect ratio
   (the .ph box is built from the real w/h), so NOTHING is cropped and there are
   no gaps. Photographer's work must be shown as shot. */
.gal {
  column-count: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.gal__i {
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.6rem, 1.4vw, 1.1rem);
  padding: 0;
  border: 0;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.gal__i img { transition: transform 1.2s var(--ease); }
.gal__i:hover img { transform: scale(1.04); }
/* Subtle affordance that these open. */
.gal__i::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(12, 12, 10, 0);
  transition: background 0.5s var(--ease);
  pointer-events: none;
}
.gal__i:hover::after { background: rgba(12, 12, 10, 0.14); }
.gal__zoom {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(20, 20, 18, 0.45);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.gal__i:hover .gal__zoom { opacity: 1; transform: scale(1); }

/* reviews */
.revs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.rev {
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
}
.rev__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.rev__stars { display: flex; gap: 3px; color: var(--gold); }
.rev__meta {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The flex child is the <blockquote>, not the <p> inside it — putting flex:1
   on the <p> silently does nothing and the author lines end up unaligned. */
.rev blockquote { flex: 1; margin: 0; }
.rev p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.rev__by {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.revs__foot { margin-top: 3rem; text-align: center; }

/* cta band */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding-block: clamp(5rem, 12vw, 10rem);
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(14, 14, 12, 0.55);
}
.band .kicker { color: rgba(255, 255, 255, 0.78); justify-content: center; }
.band .kicker::before { background: rgba(255, 255, 255, 0.5); }
.band h2 { margin: 1.4rem 0 1.2rem; }
.band p {
  max-width: 46ch;
  margin: 0 auto 2.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--step-1);
}

/* ---------------------------------------------------------------- form -- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}
.contact__aside h2 { margin: 1.3rem 0 1.4rem; }
.contact__aside p { color: var(--ink-2); }
.contact__meta { margin-top: 2.6rem; display: grid; gap: 1.1rem; }
.contact__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--step-0);
}
.contact__row svg { color: var(--accent); flex: none; }
.contact__row a { transition: color 0.3s ease; }
.contact__row a:hover { color: var(--accent); }

.contact__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.8rem;
}
.contact__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.contact__social a:hover {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.contact__social svg { flex: none; }

/* Map: full width under the two columns. Greyscaled to sit inside the editorial
   palette; colour restores on hover so it reads as interactive. */
.contact__map {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  overflow: hidden;
  line-height: 0;
}
.contact__map iframe {
  width: 100%;
  height: clamp(300px, 42vw, 440px);
  border: 0;
  filter: grayscale(1) contrast(0.95);
  transition: filter 0.6s var(--ease);
}
.contact__map:hover iframe { filter: none; }

.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* Floating label: the label sits in the field until it has focus or content. */
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0 0.7rem;
  font-size: var(--step-0);
  font-weight: 300;
  border-radius: 0;
  transition: border-color 0.35s ease;
}
.field textarea { resize: vertical; min-height: 122px; }
.field label {
  position: absolute;
  left: 0; top: 1.5rem;
  font-size: var(--step-0);
  color: var(--ink-3);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.35s var(--ease), color 0.35s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.45rem) scale(0.76);
  color: var(--ink-3);
}
.field label small { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field__err {
  display: block;
  min-height: 1.15rem;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: #A6402F;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.field[data-bad="true"] input,
.field[data-bad="true"] textarea { border-color: #A6402F; }
.field[data-bad="true"] .field__err { opacity: 1; }

/* -------- custom date picker (replaces the native calendar popup) -------- */
.field--date { position: relative; }
.field--date input { cursor: pointer; padding-right: 1.8rem; }
.field__cal {
  position: absolute;
  right: 0; top: 1.6rem;
  color: var(--ink-3);
  pointer-events: none;
  transition: color 0.3s ease;
}
.field--date.field--open .field__cal,
.field--date input:focus ~ .field__cal { color: var(--accent); }

.dp {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 312px;
  max-width: calc(100vw - 2 * var(--gutter));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
  padding: 1.1rem 1.1rem 0.9rem;
  animation: dpin 0.28s var(--ease);
}
@keyframes dpin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dp[hidden] { display: none; }

.dp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.dp__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: -0.01em;
}
.dp__nav { display: flex; gap: 0.35rem; }
.dp__navbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.dp__navbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp__wds { margin-bottom: 0.3rem; }
.dp__wd {
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.4rem;
}
.dp__days { gap: 2px; }
.dp__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dp__day:hover { background: var(--paper-3); }
.dp__day--today { box-shadow: inset 0 0 0 1px var(--accent-2); }
.dp__day--sel,
.dp__day--sel:hover { background: var(--ink); color: var(--paper); }

.dp__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.dp__link {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.25s ease;
}
.dp__link:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .dp { animation: none; }
}

/* Anti-spam: a field only a bot will fill in. Hidden from sight AND from
   screen readers, and never focusable by keyboard. */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.form__note { font-size: 0.76rem; color: var(--ink-3); max-width: 42ch; line-height: 1.5; }
.form__msg {
  padding: 1rem 1.2rem;
  font-size: var(--step--1);
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  display: none;
}
.form__msg[data-show="true"] { display: block; }
.form__msg[data-kind="err"] { border-color: #A6402F; }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* -------------------------------------------------------------- footer -- */
.ftr {
  background: var(--ink);
  color: var(--paper-3);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
}
.ftr__brand .brand { color: var(--paper); margin-bottom: 1.4rem; }
.ftr__tag {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--paper-3);
  opacity: 0.8;
  max-width: 22ch;
}
.ftr__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--paper-3);
  opacity: 0.8;
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.ftr__social a:hover {
  opacity: 1;
  color: var(--ink);
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.ftr h4 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.ftr a {
  font-size: var(--step--1);
  color: var(--paper-3);
  opacity: 0.78;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.ftr a:hover { opacity: 1; color: var(--accent-2); }
.ftr__bot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.74rem;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- lightbox -- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 13, 12, 0.94);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }

.lb__stage {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  min-width: 0;
}
.lb__img {
  max-width: 100%;
  max-height: calc(100svh - 6rem);
  width: auto;
  height: auto;
  /* contain, never cover: the whole photo is shown, uncropped. */
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.lb__img.is-in { opacity: 1; transform: none; }

.lb__x, .lb__nav {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.lb__nav { width: clamp(44px, 6vw, 58px); height: clamp(44px, 6vw, 58px); }
.lb__x {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px;
  z-index: 2;
}
.lb__x:hover, .lb__nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
}
.lb__nav:hover { transform: scale(1.06); }
.lb__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
}

@media (max-width: 760px) {
  .lb { grid-template-columns: 1fr; }
  /* On phones the arrows overlay the bottom corners rather than flanking. */
  .lb__nav {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 2;
  }
  .lb__prev { left: clamp(1rem, 6vw, 3rem); }
  .lb__next { right: clamp(1rem, 6vw, 3rem); }
  .lb__count { bottom: auto; top: clamp(1.4rem, 5vw, 2rem); left: auto; right: auto; text-align: left; }
}

/* ---------------------------------------------- progressive image loads -- */
/* .ph reserves the exact aspect box and holds the blurred LQIP, so nothing
   reflows when the real file lands. */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--paper-2);
  background-size: cover;
  background-position: center;
}
.ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.ph img.is-in { opacity: 1; }
.ph::before {
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.7s var(--ease);
}
.ph.is-done::before { opacity: 0; }

/* ------------------------------------------------------ scroll reveals -- */
/* Gated behind .js — set by an inline script in <head>. If JS never runs
   (error, blocked, old browser) these rules never apply and the content is
   simply visible. Hiding content by default and relying on JS to reveal it
   means one bad script = a blank site. */
.js [data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-rv].is-rv { opacity: 1; transform: none; }

/* Split-line headline reveal: each line rises out of its own mask. */
.rv-line { display: block; overflow: hidden; }
.js .rv-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .is-rv .rv-line > span { transform: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .story__grid,
  .intro__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .story__fig { max-width: 480px; }
  .cats { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .cat .ph { aspect-ratio: 4 / 3.2; }
  .cat__txt { grid-template-rows: 1fr; opacity: 1; }
  .why__grid { grid-template-columns: 1fr; }
  .revs { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .gal { column-count: 2; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: var(--paper);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
  }
  [data-menu="true"] .nav { opacity: 1; visibility: visible; }
  .nav__a { font-family: var(--font-display); font-size: 2rem; text-transform: none; letter-spacing: 0; }
  .nav__a::after { display: none; }
  .burger { display: block; z-index: 2; }
  [data-menu="true"] .hdr { color: var(--ink); }
  .hero__scroll { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .gal { column-count: 1; }
  .contact__social { flex-wrap: wrap; }
  .brand__txt { font-size: 1.1rem; }
}

/* ------------------------------------------------------------- a11y/print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-rv] { opacity: 1; transform: none; }
  .rv-line > span { transform: none; }
  .hero__media img { animation: none; }
}

@media print {
  .hdr, .hero__scroll, .band, .form { display: none; }
  body { background: #fff; }
}