:root {
  --espresso:#17100b;
  --espresso-2:#24170f;
  --espresso-3:#2d1b10;
  --ivory:#f5f0e6;
  --ivory-2:#eee5d7;
  --white:#fbf7f0;
  --gold:#b8793b;
  --gold-light:#d8a76a;
  --gold-soft:#e2bd8a;
  --text:#20150e;
  --muted:#70675f;
  --line:#d6cbbd;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:92px;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  background:var(--espresso)
}

body {
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font:15px/1.65 var(--sans);
  overflow-x:hidden
}

body:before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;
  opacity:.028;
  background-image:radial-gradient(rgba(45,27,16,.7) .55px,transparent .55px);
  background-size:4px 4px
}

body.nav-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

img {
  display:block;
  max-width:100%
}

button,input,textarea,select {
  font:inherit
}

button {
  cursor:pointer
}

main {
  position:relative;
  z-index:1
}

.dark {
  background:var(--espresso);
  color:var(--white)
}

.ivory {
  background:var(--ivory);
  color:var(--text)
}

.wrap {
  width:min(1240px,88vw);
  margin-inline:auto
}

.narrow {
  width:min(800px,88vw);
  margin-inline:auto
}

.block {
  padding:112px 0
}

.eyebrow {
  display:inline-block;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700
}

.link {
  font-size:9px;
  line-height:1.2;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-weight:700;
  transition:color .3s var(--ease)
}

.link:hover {
  color:var(--gold-light)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:46px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:10px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:700;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)
}

.light {
  background:linear-gradient(135deg,#c18443,#895022);
  color:#fff;
  box-shadow:0 12px 25px rgba(0,0,0,.20)
}

.light:hover {
  background:linear-gradient(135deg,#d29a58,#a4612d);
  transform:translateY(-2px)
}

.outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.75)
}

.outline:hover {
  background:rgba(216,167,106,.12);
  border-color:var(--gold-light);
  color:var(--gold-light)
}

.darkbtn {
  background:var(--espresso);
  color:#fff
}

.darkbtn:hover {
  background:var(--gold);
  color:var(--espresso)
}

.darktxt {
  color:var(--espresso);
  border-color:var(--espresso)
}

.head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:52px
}

.head h2,.two h2,.split h2,.drone h2 {
  font:500 clamp(48px,6vw,84px)/.88 var(--serif);
  letter-spacing:-.045em;
  margin:17px 0 0
}

.head em,h1 em,h2 em {
  font-style:italic;
  color:var(--gold)
}

.two {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:8vw;
  align-items:center
}

.statement {
  background:var(--espresso);
  color:var(--white)
}

.statement p {
  max-width:590px;
  margin:25px 0 28px;
  color:#d5cbc0;
  font:400 20px/1.35 var(--serif)
}

.statement h2 {
  font-size:clamp(52px,6vw,88px)
}

/* Loader / pointer */

#loader {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  background:var(--espresso);
  color:#eee4d8;
  z-index:9999;
  transition:opacity .5s
}

.loader img {
  width:190px
}

.cursor {
  position:fixed;
  z-index:9998;
  width:12px;
  height:12px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference
}

.cursor.active {
  width:76px;
  height:76px;
  background:var(--gold-soft);
  mix-blend-mode:normal
}

.cursor span {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:8px;
  opacity:0
}

.cursor.active span {
  opacity:1
}

.progress {
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:2px;
  background:var(--gold-light);
  z-index:10000
}

/* Fixed header — one stable capsule on every viewport */

#header {
  position:fixed;
  z-index:500;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 190px;
  align-items:center;
  padding:0 10.5%;
  color:#fff;
  isolation:isolate;
  pointer-events:none;
  transition:height .3s var(--ease)
}

#header:before {
  content:'';
  position:absolute;
  z-index:-1;
  left:10.5%;
  right:10.5%;
  top:12px;
  height:64px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:linear-gradient(105deg,rgba(35,23,14,.96),rgba(20,13,9,.94) 52%,rgba(38,24,14,.96));
  box-shadow:0 12px 34px rgba(15,8,4,.30),inset 0 1px rgba(255,255,255,.08);
  pointer-events:none;
  transition:all .3s var(--ease)
}

#header.scrolled {
  height:82px
}

#header.scrolled:before {
  top:9px;
  height:58px;
  box-shadow:0 10px 30px rgba(15,8,4,.36),inset 0 1px rgba(255,255,255,.08)
}

#header .logo,#header .desktop-nav,#header .book,#header .mobile-page-toggle,#header .header-actions,#header .theme-toggle {
  pointer-events:auto
}

#header .logo {
  display:flex;
  align-items:center;
  justify-self:start;
  margin-left:24px;
  min-width:0
}

.logo img {
  width:160px;
  height:54px;
  object-fit:contain;
  object-position:left center
}

.desktop-nav {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  min-width:0
}

.desktop-nav a {
  position:relative;
  padding:12px 0;
  color:#f5eee6;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:color .3s var(--ease)
}

.desktop-nav a:after {
  content:'';
  position:absolute;
  left:50%;
  bottom:4px;
  width:0;
  height:2px;
  border-radius:99px;
  background:var(--gold-light);
  transform:translateX(-50%);
  transition:width .3s var(--ease)
}

.desktop-nav a:hover,.desktop-nav a.active {
  color:#e2ae72
}

.desktop-nav a.active:after,.desktop-nav a:hover:after {
  width:18px
}

#header .book {
  justify-self:end;
  margin-right:24px;
  min-width:165px;
  padding:12px 19px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#9b5f2b,#6d3d1e);
  color:#fff;
  font-size:10px;
  font-weight:700;
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 6px 18px rgba(0,0,0,.22);
  white-space:nowrap
}

.book:hover {
  background:linear-gradient(135deg,#bd7b3e,#804820);
  transform:translateY(-1px)
}

.book b {
  font-size:14px;
  font-weight:500
}

.mobile-page-toggle {
  display:none;
  border:0;
  background:none;
  color:#eadbc8;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-transform:uppercase
}

.mobile-page-toggle span {
  font:700 8px/1 var(--sans);
  letter-spacing:.18em;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.mobile-page-toggle i {
  font-style:normal;
  font-size:13px;
  color:var(--gold-light)
}

#mobile {
  position:fixed;
  inset:0;
  z-index:450;
  background:rgba(17,10,6,.98);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s
}

.mobile-panel {
  width:min(720px,88vw);
  height:100%;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.mobile-top {
  position:absolute;
  top:24px;
  left:6vw;
  right:6vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#eadbc8;
  font-size:9px;
  letter-spacing:.24em
}

.mobile-close {
  border:1px solid rgba(255,255,255,.25);
  width:40px;
  height:40px;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:26px
}

.mobile-panel nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px
}

.mobile-panel nav a {
  font:500 clamp(34px,9vw,58px)/.95 var(--serif);
  color:#f8f1e7
}

.mobile-panel nav a.active {
  color:var(--gold-light)
}

.mobile-panel .mobile-book {
  margin-top:22px;
  font:700 10px/1 var(--sans);
  letter-spacing:.14em;
  background:var(--gold);
  color:var(--espresso);
  padding:15px 22px;
  border-radius:999px
}

.mobile-panel .mobile-book b {
  font-size:13px
}

.nav-open #mobile {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .3s var(--ease),transform .3s var(--ease)
}

/* Home hero */

.hero {
  position:relative;
  min-height:720px;
  height:100svh;
  display:flex;
  align-items:center;
  padding:0 9vw 8vh;
  overflow:hidden;
  color:#fff;
  background:#120c08
}

.hero-slides {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#120c08
}

.hero-slides .slide-layer {
  position:absolute;
  inset:-3%;
  background-image:var(--slide-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(18px) brightness(.42) saturate(.8);
  transform:scale(1.06);
  opacity:0;
  transition:opacity 1.1s var(--ease);
  z-index:0
}

.hero-slides .slide-layer.active {
  opacity:1
}

.hero-slides .slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:#120c08;
  opacity:0;
  transform:scale(.995);
  transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);
  z-index:1
}

.hero-slides .slide.active {
  opacity:1;
  transform:scale(1)
}

.hero .shade {
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,rgba(10,6,4,.86) 0%,rgba(10,6,4,.62) 32%,rgba(10,6,4,.18) 66%,rgba(10,6,4,.38) 100%);
  pointer-events:none
}

.hero-copy {
  position:relative;
  z-index:4;
  max-width:660px;
  padding-top:5vh
}

.hero-copy .eyebrow {
  color:#e0b77e
}

.hero-copy h1 {
  font:500 clamp(58px,7.1vw,112px)/.84 var(--serif);
  letter-spacing:-.055em;
  margin:24px 0 24px;
  color:#fff
}

.hero-copy p {
  max-width:535px;
  color:#f0e7dc;
  font:400 16px/1.45 var(--serif);
  margin:0
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:21px
}

.scroll-cue {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:28px;
  padding-left:11px;
  border-left:2px solid var(--gold-light);
  width:max-content
}

.scroll-cue span {
  font-size:8px;
  letter-spacing:.22em;
  color:#ddd0c2
}

.scroll-cue b {
  font-size:18px;
  color:var(--gold-light);
  font-weight:400;
  line-height:1
}

.hero-meta {
  position:absolute;
  z-index:4;
  right:7vw;
  bottom:7vh;
  color:#e7ddd3;
  text-align:right;
  font-size:8px;
  letter-spacing:.20em;
  line-height:1.9
}

.hero-dots {
  position:absolute;
  right:5.5vw;
  top:50%;
  z-index:5;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px
}

.hero-dots button {
  position:relative;
  width:26px;
  height:38px;
  border:0;
  border-left:2px solid rgba(255,255,255,.32);
  padding:0 0 0 15px;
  background:transparent;
  color:#ddd1c5;
  text-align:left
}

.hero-dots button.active {
  border-left-color:var(--gold-light);
  color:#fff
}

.hero-dots button span {
  font:700 10px/1 var(--sans)
}

/* Shared sections */

.feature {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 18px 45px rgba(31,20,12,.16)
}

.feature img {
  width:100%;
  height:min(66vh,680px);
  object-fit:cover;
  transition:1s var(--ease)
}

.feature:hover img {
  transform:scale(1.025)
}

.feature:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(20,12,8,.58),transparent 48%);
  pointer-events:none
}

.feature b {
  position:absolute;
  left:28px;
  bottom:24px;
  z-index:2;
  color:#fff;
  font-size:9px;
  letter-spacing:.18em
}

.services-list {
  border-top:1px solid rgba(255,255,255,.18)
}

.services-list>a {
  position:relative;
  display:grid;
  grid-template-columns:55px minmax(0,1.25fr) minmax(190px,.8fr) 25px;
  gap:20px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden
}

.services-list>a>span {
  color:#9d8e80;
  font-size:9px;
  letter-spacing:.15em
}

.services-list strong {
  font:500 clamp(29px,3.3vw,52px)/1 var(--serif);
  letter-spacing:-.02em
}

.services-list small {
  color:#aaa097;
  line-height:1.4
}

.services-list>b {
  font-size:16px;
  font-weight:400;
  color:var(--gold-light)
}

.services-list>a img {
  position:absolute;
  right:70px;
  top:50%;
  width:250px;
  height:165px;
  object-fit:cover;
  border-radius:3px;
  opacity:0;
  transform:translateY(-50%) scale(.88) rotate(-3deg);
  transition:.45s var(--ease);
  pointer-events:none;
  box-shadow:0 16px 35px rgba(0,0,0,.32)
}

.services-list>a:hover strong {
  color:#e0ad6d
}

.services-list>a:hover img {
  opacity:.96;
  transform:translateY(-50%) scale(1) rotate(1deg)
}

.timeline {
  max-width:920px;
  margin:auto
}

.timeline>div {
  display:grid;
  grid-template-columns:78px 1fr;
  gap:26px;
  margin-left:34px;
  padding:8px 0 42px;
  border-left:1px solid #c8beb1
}

.timeline>div>span {
  margin-left:-36px;
  width:70px;
  height:70px;
  border:1px solid #c8beb1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ivory);
  font-size:9px;
  font-weight:700
}

.timeline article {
  padding-top:7px
}

.timeline h3 {
  font:500 34px/1 var(--serif);
  margin:0 0 10px
}

.timeline p {
  margin:0;
  color:#756c63;
  max-width:650px
}

.video-card {
  position:relative;
  min-height:68vh;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 25px 70px rgba(0,0,0,.25)
}

.video-card img {
  width:100%;
  height:68vh;
  object-fit:cover
}

.video-card:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(15,9,6,.82));
  pointer-events:none
}

.video-card button {
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:86px;
  height:86px;
  transform:translate(-50%,-50%);
  border:1px solid #e4c08f;
  border-radius:50%;
  background:rgba(25,14,8,.28);
  color:#fff;
  font-size:17px
}

.video-card>div {
  position:absolute;
  z-index:2;
  left:35px;
  bottom:28px
}

.video-card h2 {
  font:500 clamp(44px,6vw,80px)/.9 var(--serif);
  margin:12px 0;
  color:#fff
}

.masonry {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px
}

.masonry>a {
  position:relative;
  grid-column:span 6;
  height:460px;
  overflow:hidden;
  border-radius:3px;
  color:#fff;
  background:#24170f
}

.masonry>a:nth-child(3n) {
  grid-column:span 4
}

.masonry>a:nth-child(4n) {
  grid-column:span 8
}

.masonry>a img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s var(--ease)
}

.masonry>a:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(17,10,6,.74),transparent 58%);
  pointer-events:none
}

.masonry>a:hover img {
  transform:scale(1.035)
}

.masonry span,.masonry strong {
  position:absolute;
  z-index:2;
  left:20px
}

.masonry span {
  bottom:68px;
  font-size:8px;
  letter-spacing:.18em;
  color:#d8a76a
}

.masonry strong {
  bottom:25px;
  font:500 31px/1 var(--serif)
}

.split {
  background:var(--espresso)
}

.split .wrap {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:8vw;
  align-items:center
}

.split img {
  width:100%;
  height:640px;
  object-fit:cover;
  border-radius:3px
}

.split p {
  max-width:520px;
  color:#c8bfb6;
  font:400 20px/1.35 var(--serif)
}

.split .button {
  margin-top:10px
}

.why {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line)
}

.why>div {
  padding:30px 35px 34px 0;
  border-bottom:1px solid var(--line)
}

.why>div:nth-child(even) {
  padding-left:35px;
  border-left:1px solid var(--line)
}

.why h3 {
  font:500 33px/1 var(--serif);
  margin:14px 0
}

.why p {
  margin:0;
  color:#6b6259
}

.why>div>span {
  font-size:9px;
  color:#a56a35;
  letter-spacing:.15em
}

.team-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.team-grid a {
  display:block
}

.team-grid img {
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:3px;
  transition:1s var(--ease)
}

.team-grid a:hover img {
  transform:scale(1.02)
}

.team-grid span {
  display:block;
  margin-top:14px;
  color:var(--gold-light);
  font-size:8px;
  letter-spacing:.18em
}

.team-grid h3 {
  font:500 35px/1 var(--serif);
  margin:7px 0
}

.quotes article {
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
  gap:7vw;
  align-items:center
}

.quotes article img {
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:3px
}

.quotes blockquote {
  margin:16px 0 22px;
  font:500 clamp(32px,4.2vw,58px)/1.03 var(--serif);
  color:#281a11
}

.quotes article strong {
  font-size:12px;
  letter-spacing:.06em
}

.quotes>button {
  width:45px;
  height:45px;
  margin:24px 6px 0 0;
  border:1px solid #c9bdad;
  background:transparent;
  color:#5b4637;
  border-radius:50%
}

.plans-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18)
}

.plans-row a {
  display:grid;
  gap:8px;
  padding:30px 22px;
  border-right:1px solid rgba(255,255,255,.14);
  transition:background .35s var(--ease),transform .35s var(--ease)
}

.plans-row a:last-child {
  border-right:0
}

.plans-row a:hover {
  background:var(--espresso-2);
  transform:translateY(-4px)
}

.plans-row span {
  color:var(--gold-light);
  font-size:9px;
  letter-spacing:.16em
}

.plans-row strong {
  font:500 38px/1 var(--serif)
}

.plans-row small {
  color:#aaa097
}

.final {
  position:relative;
  min-height:76vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  color:#fff
}

.final>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.final:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(17,10,6,.78),rgba(17,10,6,.42))
}

.final>div {
  position:relative;
  z-index:2;
  width:min(900px,88vw)
}

.final h2 {
  font:500 clamp(58px,8vw,118px)/.82 var(--serif);
  margin:18px 0 22px
}

.final p {
  max-width:560px;
  margin:0 auto 24px;
  color:#e0d5ca;
  font:400 20px/1.35 var(--serif)
}

/* Inner pages */

.pagehero {
  position:relative;
  min-height:570px;
  display:flex;
  align-items:end;
  padding:175px 0 90px;
  background:radial-gradient(circle at 78% 25%,rgba(184,121,59,.15),transparent 25%),linear-gradient(120deg,#17100b,#24170f 60%,#120c08);
  color:#fff;
  overflow:hidden
}

.pagehero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,5,3,.16),transparent 58%,rgba(8,5,3,.2));
  pointer-events:none
}

.pagehero>.wrap {
  position:relative;
  z-index:1
}

.pagehero h1 {
  max-width:1050px;
  margin:20px 0 24px;
  font:500 clamp(58px,7.5vw,116px)/.84 var(--serif);
  letter-spacing:-.055em;
  color:#fff
}

.pagehero h1 em {
  color:var(--gold-light)
}

.pagehero p {
  max-width:650px;
  margin:0;
  color:#d8cdc1;
  font:400 20px/1.35 var(--serif)
}

.textblock {
  padding:105px 0;
  background:var(--ivory)
}

.textblock .big {
  margin:0 0 34px;
  color:#21160f;
  font:500 clamp(36px,5vw,68px)/1.02 var(--serif)
}

.textblock>div>p:not(.big) {
  color:#665d54;
  font-size:17px;
  line-height:1.75
}

.textblock h2,.legal-copy h2 {
  margin:55px 0 14px;
  color:#21160f;
  font:500 clamp(34px,4vw,52px)/.95 var(--serif)
}

.textblock h2:first-child,.legal-copy h2:first-child {
  margin-top:0
}

.band {
  height:min(68vh,720px);
  overflow:hidden;
  background:#24170f
}

.band img {
  width:100%;
  height:100%;
  object-fit:cover
}

.servicehero,.storyhero {
  position:relative;
  height:82vh;
  min-height:650px;
  display:flex;
  align-items:end;
  overflow:hidden;
  background:#17100b;
  color:#fff
}

.servicehero>img,.storyhero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.servicehero:after,.storyhero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(17,10,6,.9),rgba(17,10,6,.12) 70%,rgba(17,10,6,.25));
  pointer-events:none
}

.servicehero>div,.storyhero>div {
  position:relative;
  z-index:2;
  width:min(1240px,88vw);
  margin:auto;
  padding:0 0 78px
}

.servicehero h1,.storyhero h1 {
  max-width:1000px;
  margin:18px 0;
  font:500 clamp(58px,7.5vw,116px)/.84 var(--serif);
  letter-spacing:-.05em
}

.servicehero p,.storyhero p {
  max-width:650px;
  margin:0 0 20px;
  color:#ddd2c7;
  font:400 20px/1.35 var(--serif)
}

.service-archive {
  border-top:1px solid var(--line)
}

.service-archive>a {
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 350px;
  gap:35px;
  align-items:center;
  padding:38px 0;
  border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease)
}

.service-archive>a:hover {
  transform:translateX(7px)
}

.service-archive>a>span {
  font-size:9px;
  color:#9b6940;
  letter-spacing:.16em
}

.service-archive h2 {
  margin:0 0 8px;
  color:#21160f;
  font:500 clamp(39px,4.5vw,58px)/.92 var(--serif)
}

.service-archive p {
  margin:0 0 17px;
  color:#6c665f
}

.service-archive b {
  font-size:9px;
  letter-spacing:.18em;
  color:#9d622f
}

.service-archive img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 14px 35px rgba(38,22,13,.12)
}

.deliverables {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line)
}

.deliverables li {
  padding:18px 0;
  border-bottom:1px solid var(--line);
  color:#5f564d
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:42px
}

.filters button {
  padding:10px 15px;
  border:1px solid #cfc5b7;
  border-radius:999px;
  background:transparent;
  color:#665b51;
  font-size:8px;
  letter-spacing:.16em
}

.filters button.active,.filters button:hover {
  background:var(--espresso-2);
  color:#fff;
  border-color:var(--espresso-2)
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  width:100%;
  overflow:hidden;
}

.portfolio-grid>a {
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:0;
  background:#24170f;
  color:#fff;
}

.portfolio-grid img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s var(--ease);
  filter:saturate(.92);
}

.portfolio-grid>a:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(18,10,6,.82),transparent 58%);
  pointer-events:none;
}

.portfolio-grid>a:hover img {
  transform:scale(1.035);
}

.portfolio-grid>a>span,.portfolio-grid>a>h2,.portfolio-grid>a>small {
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
}

.portfolio-grid>a>span {
  bottom:76px;
  color:var(--gold-light);
  font-size:8px;
  letter-spacing:.18em;
}

.portfolio-grid>a>h2 {
  bottom:36px;
  margin:0;
  font:500 31px/1 var(--serif);
}

.portfolio-grid>a>small {
  bottom:17px;
  color:#ddd1c4;
  font-size:9px;
}

@media(max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .portfolio-grid>a>h2{font-size:25px;}
}

@media(max-width:600px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .portfolio-grid>a{aspect-ratio:3 / 4;}
  .portfolio-grid>a>span,.portfolio-grid>a>h2,.portfolio-grid>a>small{left:14px;right:14px;}
  .portfolio-grid>a>h2{font-size:22px;bottom:32px;}
  .portfolio-grid>a>span{bottom:66px;}
  .portfolio-grid>a>small{bottom:13px;}
}

.gallery {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px
}

.gallery button {
  grid-column:span 6;
  padding:0;
  border:0;
  border-radius:3px;
  background:#24170f;
  overflow:hidden
}

.gallery img {
  width:100%;
  height:560px;
  object-fit:cover;
  transition:1s var(--ease)
}

.gallery button:hover img {
  transform:scale(1.03)
}

.team-page {
  display:grid;
  gap:0
}

.team-page article {
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  gap:7vw;
  align-items:center;
  padding:60px 0;
  border-bottom:1px solid #d4cabc
}

.team-page article:nth-child(even) {
  direction:rtl
}

.team-page article:nth-child(even)>div {
  direction:ltr
}

.team-page article img {
  width:100%;
  height:620px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 22px 50px rgba(38,22,13,.14)
}

.team-page article h2 {
  margin:14px 0;
  font:500 clamp(48px,5vw,78px)/.88 var(--serif);
  color:#21160f
}

.team-page article p {
  max-width:520px;
  color:#6a6158;
  font:400 19px/1.35 var(--serif)
}

.team-page article b {
  display:block;
  margin-top:28px;
  color:#9d622f;
  font-size:9px;
  letter-spacing:.20em;
  text-transform:uppercase
}

.team-page article>div>span:last-child {
  display:block;
  margin-top:5px;
  color:#4b4037;
  font-size:13px
}

.plans-page {
  max-width:1080px
}

.plans-page>.big {
  margin:0 0 50px;
  color:#21160f;
  font:500 clamp(42px,5vw,70px)/.95 var(--serif)
}

.plans-page>.big em {
  color:#a9652e
}

.package {
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(260px,1.2fr) auto;
  gap:40px;
  align-items:center;
  padding:40px 0;
  border-top:1px solid #d0c5b6
}

.package:last-child {
  border-bottom:1px solid #d0c5b6
}

.package.featured {
  padding:32px 30px;
  background:var(--espresso-2);
  color:#fff;
  border-radius:4px;
  border-color:var(--espresso-2);
  box-shadow:0 22px 45px rgba(38,22,13,.18)
}

.package strong {
  display:block;
  margin:10px 0;
  font:500 clamp(40px,4vw,62px)/.9 var(--serif)
}

.package small {
  display:block;
  color:#7b7168
}

.package.featured small {
  color:#cfc1b3
}

.package ul {
  margin:0;
  padding:0;
  list-style:none;
  color:#5e554d;
  line-height:2
}

.package.featured ul {
  color:#ded2c5
}

.package .link {
  border:0;
  background:none;
  color:#9c602d
}

.package.featured .link {
  color:var(--gold-light)
}

.bloggrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:60px 25px
}

.bloggrid>a img {
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:3px;
  margin-bottom:22px;
  transition:1s var(--ease)
}

.bloggrid>a:hover img {
  transform:scale(1.015)
}

.bloggrid>a h2 {
  margin:10px 0;
  font:500 clamp(35px,4vw,54px)/.92 var(--serif);
  color:#21160f
}

.bloggrid>a p {
  max-width:580px;
  color:#6c635b
}

.search {
  display:flex;
  align-items:center;
  margin-bottom:55px;
  border-bottom:1px solid #cfc5b7
}

.search input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  padding:14px 0;
  color:#21160f
}

.search button {
  border:0;
  background:transparent;
  color:#9d622f;
  font-size:9px;
  letter-spacing:.18em
}

.booking,.contact {
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr);
  gap:7vw;
  align-items:start
}

.booking aside h2,.contact h2 {
  margin:15px 0 22px;
  color:#21160f;
  font:500 clamp(48px,5vw,75px)/.9 var(--serif)
}

.booking aside p,.contact>div:first-child p {
  max-width:450px;
  color:#6b6259
}

.booking aside .button {
  margin-top:18px;
  border-radius:999px
}

.booking form,.contact form {
  background:var(--ivory-2);
  border:1px solid #d8ccbd;
  border-radius:5px;
  padding:30px
}

.booking label,.contact label {
  display:block;
  color:#5b5047;
  font-size:12px;
  font-weight:600
}

.booking input,.booking textarea,.contact input,.contact textarea {
  width:100%;
  margin-top:7px;
  padding:12px 13px;
  border:1px solid #d1c6b8!important;
  border-radius:3px;
  background:#f8f3eb!important;
  color:#21160f!important;
  outline:0
}

.booking input:focus,.booking textarea:focus,.contact input:focus,.contact textarea:focus {
  border-color:#b8793b!important;
  box-shadow:0 0 0 2px rgba(184,121,59,.10)
}

.booking fieldset {
  border:1px solid #d1c6b8;
  padding:15px;
  margin:0
}

.booking fieldset label {
  display:inline-flex;
  align-items:center;
  margin-right:18px;
  font-weight:500
}

.booking fieldset input {
  width:auto;
  margin:0 6px 0 0
}

.booking .darkbtn,.contact .darkbtn {
  margin-top:20px;
  border-radius:999px
}

.formgrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.formgrid .full {
  grid-column:1/-1
}

.formgrid fieldset {
  grid-column:1/-1
}

.hp {
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important;
  height:1px!important;
  width:1px!important
}

.flash {
  margin-bottom:16px;
  padding:12px 15px;
  border-radius:3px;
  background:#ead5d0;
  color:#7a2f24;
  font-size:12px
}

.flash.success {
  background:#dfeadf;
  color:#315b36
}

.success {
  background:var(--espresso-2);
  color:#fff;
  border-radius:5px;
  padding:55px 40px
}

.success h2 {
  margin:15px 0;
  font:500 clamp(48px,5vw,75px)/.9 var(--serif)
}

.success h2 em {
  color:var(--gold-light)
}

.success p {
  color:#d5c8ba
}

.contact>div:first-child {
  padding-top:10px
}

.contact>div:first-child>a {
  display:block;
  margin:8px 0;
  color:#8f592d
}

.map {
    min-height:50vh;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.map h2 {
    margin:18px 0 28px;
    font:500 clamp(52px,6vw,88px)/.86 var(--serif)
}


/* Contact Page — Studio Location Map */

.contact-map-section {
    position:relative;
}

.contact-map-heading {
    max-width:760px;
    margin-bottom:42px;
}

.contact-map-heading h2 {
    margin:12px 0 18px;
}

.contact-map-heading p {
    max-width:650px;
}

.contact-map {
    width:100%;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
}

.contact-map iframe {
    display:block;
    width:100%;
    min-height:500px;
    border:0;
}

.contact-map-info {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding-top:32px;
}

.contact-map-info h3 {
    margin:8px 0 12px;
}

.contact-map-info p {
    margin:0;
    line-height:1.8;
}

.contact-map-action {
    flex-shrink:0;
}

.share {
  margin-top:35px
}

.share a {
  display:inline-flex;
  align-items:center;
  padding:11px 17px;
  border-radius:999px;
  background:var(--espresso-2);
  color:#f7f1e7;
  font-size:9px;
  letter-spacing:.16em
}

.error {
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  overflow:hidden
}

.error>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.error:after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(12,7,4,.68)
}

.error>div {
  position:relative;
  z-index:2;
  width:min(760px,88vw)
}

.error h1 {
  margin:20px 0;
  font:500 clamp(60px,8vw,110px)/.82 var(--serif)
}

.error p {
  font:400 20px var(--serif);
  color:#ddd
}

.error .button {
  margin:5px;
  border-radius:999px
}

/* Footer and modals */

.footer {
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr 1fr;
  gap:40px;
  padding:80px 6vw 28px;
  background:var(--espresso);
  color:#eee4d9
}

.footer img {
  width:180px;
  height:60px;
  object-fit:contain;
  object-position:left center
}

.footer>div p {
  max-width:300px;
  color:#a9a097
}

.footer>div>span {
  display:block;
  margin-bottom:17px;
  color:#c88a4b;
  font-size:9px;
  letter-spacing:.24em
}

.footer a {
  display:block;
  margin:7px 0;
  color:#d6cdc4;
  font-size:13px;
  transition:color .3s
}

.footer a:hover {
  color:var(--gold-light)
}

.footer small {
  grid-column:1/-1;
  border-top:1px solid #3b2d24;
  padding-top:22px;
  color:#8f867e
}


.modal {
  position:fixed;
  inset:0;
  z-index:800;
  display:grid;
  place-items:center;
  padding:30px;
  background:rgba(16,9,5,.82);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.3s
}

.modal.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.modal > div {
  width: min(1200px, 92vw);
  max-width: 1200px;
  max-height: 88vh;
}

.modal > div iframe {
  display: block;
  width: min(1200px, 92vw);
  height: min(675px, 78vh);
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 0;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.modal > div img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

.modal>button {
  position:absolute;
  top:22px;
  right:26px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:25px
}

.bookbox {
  width:min(680px,92vw);
  padding:50px;
  background:var(--ivory);
  color:#21160f;
  border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  position:relative
}

.bookbox>button {
  position:absolute;
  top:16px;
  right:18px;
  border:0;
  background:none;
  color:#21160f;
  font-size:28px
}

.bookbox h2 {
  margin:15px 0;
  font:500 58px/.9 var(--serif)
}

.bookbox p {
  color:#6c635b
}

.bookbox .button {
  margin:6px 6px 0 0
}

@media(max-width:1200px) {
  #header {
    padding:0 6.5%
  }
  #header:before {
    left:6.5%;
    right:6.5%
  }
  #header .logo {
    margin-left:20px
  }
  #header .book {
    margin-right:20px
  }
  .desktop-nav {
    gap:22px
  }
  .logo img {
    width:145px
  }
  .wrap {
    width:90vw
  }
  .services-list>a img {
    right:55px;
    width:220px
  }
  .portfolio-grid>a:nth-child(3n) {
    grid-column:span 6;
    min-height:480px
  }
  .portfolio-grid>a:nth-child(4n) {
    grid-column:span 6
  }
}

@media(max-width:900px) {
  :root {
    --header-h:78px
  }
  #header {
    height:var(--header-h);
    grid-template-columns:minmax(120px,1fr) auto minmax(90px,1fr);
    padding:0 3.5%
  }
  #header:before {
    left:3.5%;
    right:3.5%;
    top:9px;
    height:59px
  }
  .desktop-nav {
    display:none
  }
  .mobile-page-toggle {
    display:flex;
    justify-self:center
  }
  .logo img {
    width:120px;
    height:44px
  }
  .book {
    min-width:0
  }
  .book {
    font-size:0;
    padding:11px 13px
  }
  .book:before {
    content:'BOOK';
    font:700 8px/1 var(--sans);
    letter-spacing:.08em
  }
  .book b {
    font-size:12px;
    margin-left:3px
  }
  .hero {
    min-height:680px;
    padding:0 6vw 7vh
  }
  .hero-copy {
    padding-top:8vh
  }
  .hero-copy h1 {
    font-size:clamp(52px,10vw,88px)
  }
  .hero-meta {
    display:none
  }
  .hero-dots {
    right:4vw
  }
  .hero-dots button {
    height:32px;
    width:24px;
    padding-left:11px
  }
  .block {
    padding:90px 0
  }
  .head {
    align-items:start;
    flex-direction:column;
    gap:16px;
    margin-bottom:38px
  }
  .head h2,.two h2,.split h2,.drone h2 {
    font-size:clamp(44px,8vw,70px)
  }
  .two,.split .wrap,.booking,.contact {
    grid-template-columns:1fr;
    gap:42px
  }
  .statement p {
    margin-top:0
  }
  .services-list>a {
    grid-template-columns:42px minmax(0,1fr) 22px;
    gap:10px
  }
  .services-list small {
    display:none
  }
  .services-list>a img {
    display:none
  }
  .feature img {
    height:55vh
  }
  .masonry>a,.masonry>a:nth-child(3n),.masonry>a:nth-child(4n) {
    grid-column:span 6;
    height:390px
  }
  .team-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .quotes article {
    grid-template-columns:1fr;
    gap:30px
  }
  .quotes article img {
    height:420px
  }
  .plans-row {
    grid-template-columns:repeat(2,1fr)
  }
  .plans-row a:nth-child(2) {
    border-right:0
  }
  .plans-row a {
    border-bottom:1px solid rgba(255,255,255,.14)
  }
  .pagehero {
    min-height:520px;
    padding:150px 0 80px
  }
  .pagehero h1 {
    font-size:clamp(52px,12vw,82px)
  }
  .servicehero,.storyhero {
    height:76vh;
    min-height:600px
  }
  .servicehero>div,.storyhero>div {
    padding-bottom:65px
  }
  .service-archive>a {
    grid-template-columns:45px minmax(0,1fr);
    gap:22px
  }
  .service-archive img {
    grid-column:2;
    height:250px
  }
  .portfolio-grid>a,.portfolio-grid>a:nth-child(3n),.portfolio-grid>a:nth-child(4n) {
    grid-column:span 6;
    min-height:430px
  }
  .team-page article,.team-page article:nth-child(even) {
    grid-template-columns:1fr;
    direction:ltr;
    gap:35px;
    padding:45px 0
  }
  .team-page article img {
    height:500px
  }
  .package {
    grid-template-columns:1fr;
    gap:20px
  }
  .package.featured {
    padding:28px 22px
  }
  .bloggrid {
    grid-template-columns:1fr
  }
  .bloggrid>a img {
    height:360px
  }
  .formgrid {
    grid-template-columns:1fr
  }
  .formgrid .full,.formgrid fieldset {
    grid-column:auto
  }
  .booking form,.contact form {
    padding:22px
  }
  .footer {
    grid-template-columns:1fr 1fr
  }
  .footer small {
    grid-column:1/-1
  }
  .gallery button {
    grid-column:span 6
  }
  .gallery img {
    height:430px
  }
}

@media(max-width:600px) {
  body {
    font-size:14px
  }
  .wrap,.narrow {
    width:88vw
  }
  .block {
    padding:76px 0
  }
  .logo img {
    width:106px
  }
  .mobile-page-toggle span {
    max-width:80px;
    font-size:7px;
    letter-spacing:.12em
  }
  .hero {
    min-height:690px;
    padding:0 6vw 6vh
  }
  .hero .shade {
    background:linear-gradient(180deg,rgba(10,6,4,.15),rgba(10,6,4,.88) 80%)
  }
  .hero-copy {
    max-width:100%
  }
  .hero-copy .eyebrow {
    font-size:7px;
    letter-spacing:.22em
  }
  .hero-copy h1 {
    font-size:clamp(47px,13.8vw,70px);
    line-height:.86;
    margin:18px 0
  }
  .hero-copy p {
    font-size:15px;
    max-width:94%
  }
  .hero-actions {
    gap:8px
  }
  .hero-actions .button {
    min-height:43px;
    padding:12px 13px;
    font-size:8px
  }
  .hero-dots {
    right:3vw;
    gap:7px
  }
  .hero-dots button {
    height:27px;
    width:22px;
    padding-left:8px
  }
  .hero-dots button span {
    font-size:8px
  }
  .scroll-cue {
    display:none
  }
  .head h2,.two h2,.split h2,.drone h2 {
    font-size:clamp(38px,10.8vw,54px)
  }
  .statement p {
    font-size:18px
  }
  .feature img {
    height:50vh
  }
  .services-list strong {
    font-size:29px
  }
  .timeline>div {
    grid-template-columns:60px 1fr;
    gap:16px;
    margin-left:28px
  }
  .timeline>div>span {
    width:56px;
    height:56px;
    margin-left:-29px
  }
  .timeline h3 {
    font-size:28px
  }
  .video-card,.video-card img {
    min-height:55vh;
    height:55vh
  }
  .video-card>div {
    left:22px;
    bottom:20px
  }
  .video-card h2 {
    font-size:45px
  }
  .masonry>a,.masonry>a:nth-child(3n),.masonry>a:nth-child(4n) {
    grid-column:span 12;
    height:360px
  }
  .split img {
    height:430px
  }
  .team-grid {
    grid-template-columns:1fr
  }
  .team-grid img {
    height:460px
  }
  .quotes article img {
    height:360px
  }
  .quotes blockquote {
    font-size:31px
  }
  .plans-row {
    grid-template-columns:1fr
  }
  .plans-row a,.plans-row a:nth-child(2) {
    border-right:0
  }
  .pagehero {
    min-height:480px;
    padding:130px 0 70px
  }
  .pagehero h1 {
    font-size:clamp(46px,13.5vw,72px)
  }
  .pagehero p,.servicehero p,.storyhero p {
    font-size:18px
  }
  .servicehero,.storyhero {
    height:70vh;
    min-height:560px
  }
  .servicehero h1,.storyhero h1 {
    font-size:clamp(48px,13.5vw,74px)
  }
  .servicehero>div,.storyhero>div {
    padding-bottom:55px
  }
  .service-archive>a {
    grid-template-columns:1fr;
    gap:17px
  }
  .service-archive img {
    grid-column:1;
    height:220px
  }
  .service-archive h2 {
    font-size:43px
  }
  .portfolio-grid>a,.portfolio-grid>a:nth-child(3n),.portfolio-grid>a:nth-child(4n) {
    grid-column:span 12;
    min-height:390px
  }
  .team-page article img {
    height:420px
  }
  .package strong {
    font-size:48px
  }
  .bloggrid>a img {
    height:300px
  }
  .formgrid {
    gap:13px
  }
  .booking form,.contact form {
    padding:18px
  }
  .footer {
    grid-template-columns:1fr;
    padding:65px 8vw 24px
  }
  .footer small {
    grid-column:1
  }
  .gallery button {
    grid-column:span 12
  }
  .gallery img {
    height:340px
  }
  .final {
    min-height:70vh
  }
  .final h2 {
    font-size:clamp(47px,13vw,70px)
  }
  .final p {
    font-size:18px
  }
  .bookbox {
    padding:42px 24px
  }
  .bookbox h2 {
    font-size:48px
  }
  .wa {
    width:48px;
    height:48px;
    right:14px;
    bottom:14px
  }
}

@media (max-width: 600px) {
  .modal {
    padding: 15px;
  }

  .modal > div {
    width: 94vw;
  }

  .modal > div iframe {
    width: 94vw;
    height: calc(94vw * .5625);
    max-height: 70vh;
  }
}

@media(max-width:380px) {
  #header .book {
    padding:10px 8px
  }
  .book:before {
    font-size:7px
  }
  .logo img {
    width:96px
  }
  .mobile-page-toggle span {
    max-width:62px
  }
  .hero-copy h1 {
    font-size:44px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start
  }
  .hero-actions .button {
    width:auto
  }
  .pagehero h1 {
    font-size:44px
  }
  .servicehero h1,.storyhero h1 {
    font-size:45px
  }
}

@media(min-width:1500px) {
  .wrap {
    width:min(1320px,86vw)
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
  .cursor {
    display:none
  }
  .hero-slides .slide {
    transform:none!important
  }
  .hero-slides .slide-layer {
    filter:brightness(.45)
  }
}

body.leaving {
  opacity:0;
  transition:opacity .22s ease
}

@media(max-width:900px) {
  #header .logo {
    grid-column:1
  }
  #header .mobile-page-toggle {
    grid-column:2
  }
  #header .book {
    grid-column:3
  }
}

@media(max-width:1100px) {
  #header {
    grid-template-columns:minmax(120px,1fr) auto minmax(90px,1fr);
    padding:0 3.5%
  }
  #header:before {
    left:3.5%;
    right:3.5%;
    top:9px;
    height:59px
  }
  #header .logo {
    grid-column:1;
    margin-left:12px
  }
  #header .book {
    grid-column:3;
    margin-right:12px;
    min-width:0;
    padding:11px 13px;
    font-size:0
  }
  #header .book:before {
    content:'BOOK';
    font:700 8px/1 var(--sans);
    letter-spacing:.08em
  }
  #header .book b {
    font-size:12px;
    margin-left:3px
  }
  .desktop-nav {
    display:none
  }
  .mobile-page-toggle {
    display:flex;
    grid-column:2;
    justify-self:center
  }
}

/* =========================================================
   SNAP WEDDING STUDIO — FINAL LOCKED VISUAL SYSTEM
   Reference lock: cinematic black / espresso / champagne gold
   Responsive hardening + fixed header + uncropped hero images
   ========================================================= */

:root {
  --color-bg:#0B0A09;
  --color-bg-secondary:#151210;
  --color-surface:#1C1713;
  --color-surface-hover:#292017;
  --color-primary:#C98A4A;
  --color-primary-light:#E2A45F;
  --color-primary-highlight:#F0C27B;
  --color-primary-dark:#8F5D30;
  --color-text:#F7F3EC;
  --color-text-secondary:#C8C0B7;
  --color-text-muted:#91877D;
  --color-text-dark:#0B0A09;
  --color-border:#625246;
  --color-border-light:#8A6A4D;
  --color-border-gold:rgba(226,164,95,.35);
  --color-input:#120F0D;
  --color-input-border:#625246;
  --color-success:#71856A;
  --color-error:#A64B45;
  --gold-gradient:linear-gradient(135deg,#8F5D30 0%,#C98A4A 45%,#E2A45F 75%,#F0C27B 100%);
  --dark-gradient:linear-gradient(135deg,#0B0A09 0%,#151210 50%,#1C1713 100%);
  --card-gradient:linear-gradient(180deg,rgba(11,10,9,.05) 0%,rgba(11,10,9,.88) 100%);
  --hero-overlay:linear-gradient(90deg,rgba(11,10,9,.88) 0%,rgba(11,10,9,.55) 42%,rgba(11,10,9,.20) 75%,rgba(11,10,9,.45) 100%);
  --glass-bg:rgba(11,10,9,.72);
  --glass-bg-light:rgba(255,255,255,.05);
  --glass-border:rgba(226,164,95,.35);
  --shadow-dark:0 20px 60px rgba(0,0,0,.45);
  --shadow-gold:0 10px 35px rgba(201,138,74,.20);

  /* Keep existing component names mapped to the locked palette. */

  --espresso:#0B0A09;
  --espresso-2:#1C1713;
  --espresso-3:#292017;
  --ivory:#151210;
  --ivory-2:#1C1713;
  --white:#F7F3EC;
  --gold:#C98A4A;
  --gold-light:#E2A45F;
  --gold-soft:#F0C27B;
  --text:#F7F3EC;
  --muted:#C8C0B7;
  --line:#625246;
  --header-h:92px;
}

html {
  background:#0B0A09
}

body {
  background:#0B0A09;
  color:#F7F3EC
}

.dark,.ivory,.textblock {
  background:#0B0A09;
  color:#F7F3EC
}

.dark.block:nth-child(even),.ivory.block:nth-child(even) {
  background:#151210
}

.wrap,.narrow {
  max-width:1240px
}

.eyebrow {
  color:#E2A45F
}

.head em,h1 em,h2 em {
  color:#E2A45F
}

/* ---------- Fixed header: desktop + mobile ---------- */

#header {
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:10010 !important;
  height:var(--header-h) !important;
  padding:0 max(16px,5.5vw) !important;
  grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
  pointer-events:none;
  transform:translateZ(0);
  will-change:height;
  padding-top:env(safe-area-inset-top,0px) !important;
}

#header:before {
  left:max(12px,5.5vw) !important;
  right:max(12px,5.5vw) !important;
  top:12px !important;
  height:64px !important;
  background:linear-gradient(105deg,rgba(21,18,16,.96) 0%,rgba(11,10,9,.96) 52%,rgba(28,23,19,.97) 100%) !important;
  border:1px solid rgba(226,164,95,.35) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.07) !important;
}

#header.scrolled {
  height:82px !important
}

#header.scrolled:before {
  top:9px !important;
  height:58px !important
}

#header .logo {
  margin-left:18px;
  min-width:0
}

#header .logo img {
  width:160px;
  height:54px;
  object-fit:contain;
  object-position:left center
}

#header .desktop-nav {
  gap:clamp(18px,2.05vw,30px)
}

#header .desktop-nav a {
  color:#F7F3EC
}

#header .desktop-nav a:hover,#header .desktop-nav a.active {
  color:#E2A45F
}

#header .book {
  margin-right:18px;
  min-width:168px;
  background:var(--gold-gradient);
  color:#0B0A09;
  box-shadow:0 10px 28px rgba(201,138,74,.18),inset 0 1px rgba(255,255,255,.20)
}

#header .book:hover {
  background:linear-gradient(135deg,#F0C27B,#C98A4A);
  color:#0B0A09
}

#header .mobile-page-toggle {
  color:#F7F3EC
}

#header .mobile-page-toggle i {
  color:#F0C27B
}

/* ---------- Hero slider: image is NEVER cropped ---------- */

.hero {
  min-height:720px;
  height:max(720px,100svh);
  padding:calc(var(--header-h) + 52px) 9vw 8vh;
  align-items:flex-start;
}

.hero-slides {
  background:#0B0A09
}

.hero-slides .slide-layer {
  inset:-4%;
  background-size:cover;
  background-position:center;
  filter:blur(24px) brightness(.34) saturate(.72);
  transform:scale(1.08);
}

.hero-slides .slide {
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0B0A09;
  transform:none;
}

.hero-slides .slide.active {
  transform:none
}

.hero .shade {
  background:linear-gradient(90deg,rgba(11,10,9,.90) 0%,rgba(11,10,9,.62) 31%,rgba(11,10,9,.24) 63%,rgba(11,10,9,.46) 100%);
}

.hero-copy {
  padding-top:clamp(18px,4vh,48px);
  max-width:min(660px,56vw);
}

.hero-copy .eyebrow {
  color:#E2A45F
}

.hero-copy h1 {
  color:#F7F3EC
}

.hero-copy p {
  color:#C8C0B7
}

.hero-actions .light {
  background:var(--gold-gradient);
  color:#0B0A09
}

.hero-actions .outline {
  border-color:#C8C0B7;
  color:#F7F3EC
}

.hero-dots button.active {
  border-left-color:#F0C27B;
  color:#F7F3EC
}

.hero-dots button {
  border-left-color:#625246;
  color:#C8C0B7
}

/* ---------- Dark editorial surfaces ---------- */

.card,.portfolio-card,.service-card,.film-card {
  background:#1C1713;
  border-color:#625246
}

.card:hover,.service-card:hover {
  background:#292017;
  border-color:#8A6A4D
}

.portfolio-card:hover,.service-card:hover,.film-card:hover {
  border-color:#C98A4A
}

.feature,.masonry>a,.team-grid>a,.gallery button,.bloggrid>a,.service-archive>a,.package {
  border-color:#625246
}

/* Inner-page text that was previously hard-coded for ivory backgrounds. */

.textblock .big,.textblock h2,.legal-copy h2,.service-archive h2,.team-page article h2,.plans-page>.big,.bloggrid>a h2,.booking aside h2,.contact h2,.bookbox h2 {
  color:#F7F3EC
}

.textblock>div>p:not(.big),.service-archive p,.team-page article p,.bloggrid>a p,.booking aside p,.contact>div:first-child p,.bookbox p {
  color:#C8C0B7
}

.service-archive>a>span,.service-archive b,.booking .contact-info,.contact>div:first-child>a {
  color:#E2A45F
}

.service-archive img,.team-page article img,.bloggrid>a img {
  box-shadow:0 18px 45px rgba(0,0,0,.35)
}

.service-archive,.team-page article,.package,.search {
  border-color:#625246
}

.package strong {
  color:#F7F3EC
}

.package small,.package ul {
  color:#91877D
}

.package.featured {
  background:#1C1713;
  border-color:#8A6A4D
}

.booking form,.contact form {
  background:#1C1713;
  border-color:#625246
}

.booking label,.contact label {
  color:#C8C0B7
}

.booking input,.booking textarea,.contact input,.contact textarea {
  background:#120F0D !important;
  color:#F7F3EC !important;
  border-color:#625246 !important
}

.booking input::placeholder,.booking textarea::placeholder,.contact input::placeholder,.contact textarea::placeholder {
  color:#91877D
}

.booking input:focus,.booking textarea:focus,.contact input:focus,.contact textarea:focus {
  border-color:#C98A4A !important;
  box-shadow:0 0 0 2px rgba(201,138,74,.15)
}

.map h2,.statement h2 {
  color:#F7F3EC
}

.footer {
  background:#0B0A09;
  border-top-color:#625246
}

.footer>div>span {
  color:#E2A45F
}

.footer a {
  color:#C8C0B7
}

.footer small {
  border-top-color:#625246;
  color:#91877D
}

.wa {
  background:var(--gold-gradient);
  color:#0B0A09
}

/* ---------- Responsive system: no horizontal squeeze ---------- */

img,video,iframe {
  max-width:100%
}

.wrap,.narrow {
  width:min(1240px,88vw)
}

section,.pagehero,.servicehero,.storyhero,.final {
  max-width:100%;
  overflow:hidden
}

@media (max-width:1200px) {
  #header {
    grid-template-columns:minmax(145px,1fr) auto minmax(145px,1fr)
  }
  #header .logo img {
    width:145px
  }
  #header .desktop-nav {
    gap:19px
  }
  #header .desktop-nav a {
    font-size:9px
  }
  #header .book {
    min-width:150px;
    margin-right:14px
  }
  .hero {
    padding-left:7vw;
    padding-right:7vw
  }
  .hero-copy {
    max-width:min(610px,60vw)
  }
}

@media (max-width:900px) {
  :root {
    --header-h:76px
  }
  #header {
    height:var(--header-h) !important;
    padding:0 max(10px,3vw) !important;
    grid-template-columns:minmax(0,1fr) auto minmax(72px,1fr);
  }
  #header:before {
    left:max(10px,3vw) !important;
    right:max(10px,3vw) !important;
    top:8px !important;
    height:58px !important
  }
  #header.scrolled {
    height:72px !important
  }
  #header.scrolled:before {
    top:7px !important;
    height:56px !important
  }
  #header .logo {
    grid-column:1;
    margin-left:10px
  }
  #header .logo img {
    width:120px;
    height:43px
  }
  #header .desktop-nav {
    display:none
  }
  #header .mobile-page-toggle {
    display:flex;
    grid-column:2;
    justify-self:center;
    min-width:0;
    max-width:145px
  }
  #header .mobile-page-toggle span {
    max-width:105px;
    font-size:7px;
    letter-spacing:.14em
  }
  #header .book {
    grid-column:3;
    justify-self:end;
    margin-right:10px;
    min-width:0;
    padding:10px 12px;
    font-size:0
  }
  #header .book:before {
    content:'BOOK';
    font:700 8px/1 var(--sans);
    letter-spacing:.08em
  }
  #header .book b {
    font-size:12px;
    margin-left:3px
  }
  #mobile {
    z-index:10000
  }
  #mobile .mobile-panel {
    padding-top:var(--header-h)
  }
  #mobile .mobile-top {
    top:calc(14px + env(safe-area-inset-top,0px))
  }
  .hero {
    min-height:760px;
    height:max(760px,100svh);
    padding:calc(var(--header-h) + 34px) 6vw 8vh;
    align-items:flex-start;
  }
  .hero-copy {
    max-width:min(680px,92vw);
    padding-top:14px
  }
  .hero-copy h1 {
    font-size:clamp(52px,10.8vw,82px);
    line-height:.86
  }
  .hero-copy p {
    max-width:620px;
    font-size:16px
  }
  .hero-meta {
    display:none
  }
  .hero-dots {
    right:3.5vw
  }
  .hero-dots button {
    height:31px;
    padding-left:10px;
    width:23px
  }
  .block {
    padding:88px 0
  }
  .wrap,.narrow {
    width:min(92vw,760px)
  }
  .head {
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
    margin-bottom:38px
  }
  .two,.split .wrap,.booking,.contact {
    grid-template-columns:1fr;
    gap:40px
  }
  .services-list>a {
    grid-template-columns:42px minmax(0,1fr) 22px;
    gap:10px
  }
  .services-list>a img,.services-list small {
    display:none
  }
  .feature img {
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover
  }
  .masonry>a,.masonry>a:nth-child(3n),.masonry>a:nth-child(4n) {
    grid-column:span 6;
    height:390px
  }
  .team-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .quotes article {
    grid-template-columns:1fr;
    gap:30px
  }
  .plans-row {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pagehero {
    min-height:500px;
    padding:calc(var(--header-h) + 60px) 0 75px
  }
  .servicehero,.storyhero {
    height:76svh;
    min-height:590px
  }
  .service-archive>a {
    grid-template-columns:45px minmax(0,1fr);
    gap:22px
  }
  .service-archive img {
    grid-column:2;
    height:250px
  }
  .portfolio-grid>a,.portfolio-grid>a:nth-child(3n),.portfolio-grid>a:nth-child(4n) {
    grid-column:span 6;
    min-height:430px
  }
  .team-page article,.team-page article:nth-child(even) {
    grid-template-columns:1fr;
    direction:ltr;
    gap:32px;
    padding:45px 0
  }
  .team-page article img {
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover
  }
  .package {
    grid-template-columns:1fr;
    gap:20px
  }
  .bloggrid {
    grid-template-columns:1fr
  }
  .bloggrid>a img {
    height:auto;
    aspect-ratio:16/10
  }
  .formgrid {
    grid-template-columns:1fr
  }
  .formgrid .full,.formgrid fieldset {
    grid-column:auto
  }
  .footer {
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:600px) {
  body {
    font-size:14px
  }
  .wrap,.narrow {
    width:90vw
  }
  .block {
    padding:72px 0
  }
  #header {
    grid-template-columns:minmax(0,1fr) auto minmax(70px,auto)
  }
  #header:before {
    left:8px !important;
    right:8px !important
  }
  #header .logo {
    margin-left:8px
  }
  #header .logo img {
    width:105px;
    height:40px
  }
  #header .mobile-page-toggle {
    max-width:105px;
    gap:5px
  }
  #header .mobile-page-toggle span {
    max-width:72px;
    font-size:6.5px;
    letter-spacing:.10em
  }
  #header .mobile-page-toggle i {
    font-size:12px
  }
  #header .book {
    margin-right:8px;
    padding:10px 9px
  }
  #header .book:before {
    font-size:7px
  }
  #header .book b {
    font-size:11px
  }
  .hero {
    min-height:780px;
    height:max(780px,100svh);
    padding:calc(var(--header-h) + 28px) 5vw 45px;
  }
  .hero-slides .slide {
    object-fit:contain !important
  }
  .hero .shade {
    background:linear-gradient(180deg,rgba(11,10,9,.18) 0%,rgba(11,10,9,.38) 35%,rgba(11,10,9,.90) 82%,rgba(11,10,9,.96) 100%)
  }
  .hero-copy {
    max-width:90vw;
    padding-top:8px
  }
  .hero-copy .eyebrow {
    font-size:6.5px;
    letter-spacing:.20em
  }
  .hero-copy h1 {
    font-size:clamp(43px,12.8vw,66px);
    line-height:.86;
    margin:17px 0 18px
  }
  .hero-copy p {
    font-size:15px;
    line-height:1.42;
    max-width:100%
  }
  .hero-actions {
    gap:8px;
    margin-top:18px
  }
  .hero-actions .button {
    min-height:42px;
    padding:11px 12px;
    font-size:7.5px
  }
  .hero-dots {
    right:2.5vw;
    top:43%
  }
  .hero-dots button {
    height:26px;
    width:21px;
    padding-left:7px
  }
  .hero-dots button span {
    font-size:7px
  }
  .scroll-cue {
    display:none
  }
  .head h2,.two h2,.split h2,.drone h2 {
    font-size:clamp(37px,10.8vw,54px)
  }
  .statement p {
    font-size:18px
  }
  .services-list strong {
    font-size:27px
  }
  .masonry>a,.masonry>a:nth-child(3n),.masonry>a:nth-child(4n) {
    grid-column:span 12;
    height:350px
  }
  .team-grid {
    grid-template-columns:1fr
  }
  .team-grid img {
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover
  }
  .quotes article img {
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover
  }
  .plans-row {
    grid-template-columns:1fr
  }
  .pagehero {
    min-height:470px;
    padding:calc(var(--header-h) + 50px) 0 65px
  }
  .pagehero h1 {
    font-size:clamp(43px,12.5vw,66px)
  }
  .pagehero p,.servicehero p,.storyhero p {
    font-size:17px
  }
  .servicehero,.storyhero {
    height:70svh;
    min-height:550px
  }
  .servicehero h1,.storyhero h1 {
    font-size:clamp(45px,12.5vw,68px)
  }
  .servicehero>div,.storyhero>div {
    padding-bottom:50px
  }
  .service-archive>a {
    grid-template-columns:1fr;
    gap:16px
  }
  .service-archive img {
    grid-column:1;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover
  }
  .service-archive h2 {
    font-size:40px
  }
  .portfolio-grid>a,.portfolio-grid>a:nth-child(3n),.portfolio-grid>a:nth-child(4n) {
    grid-column:span 12;
    min-height:380px
  }
  .team-page article img {
    height:auto;
    aspect-ratio:4/3
  }
  .package strong {
    font-size:46px
  }
  .bloggrid>a img {
    height:auto;
    aspect-ratio:16/10
  }
  .booking form,.contact form {
    padding:18px
  }
  .footer {
    grid-template-columns:1fr;
    padding:62px 7vw 24px
  }
  .gallery button {
    grid-column:span 12
  }
  .gallery img {
    height:330px
  }
  .final {
    min-height:680px
  }
  .final h2 {
    font-size:clamp(45px,12.5vw,68px)
  }
  .bookbox {
    padding:40px 22px
  }
  .bookbox h2 {
    font-size:46px
  }
  .wa {
    width:48px;
    height:48px;
    right:13px;
    bottom:13px
  }
}

@media (max-width:380px) {
  #header {
    grid-template-columns:minmax(0,1fr) auto minmax(58px,auto)
  }
  #header .logo img {
    width:92px
  }
  #header .mobile-page-toggle {
    max-width:82px
  }
  #header .mobile-page-toggle span {
    max-width:54px;
    font-size:6px;
    letter-spacing:.07em
  }
  #header .mobile-page-toggle i {
    font-size:11px
  }
  #header .book {
    padding:9px 7px
  }
  #header .book:before {
    font-size:6.5px
  }
  #header .book b {
    font-size:10px
  }
  .hero {
    min-height:760px;
    height:max(760px,100svh);
    padding-left:5vw;
    padding-right:5vw
  }
  .hero-copy h1 {
    font-size:42px
  }
  .hero-copy p {
    font-size:14px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start
  }
  .hero-actions .button {
    width:auto
  }
  .pagehero h1 {
    font-size:42px
  }
  .servicehero h1,.storyhero h1 {
    font-size:43px
  }
}

@media (min-width:1500px) {
  .wrap {
    width:min(1320px,86vw)
  }
  #header {
    padding-left:6.5% !important;
    padding-right:6.5% !important
  }
  #header:before {
    left:6.5% !important;
    right:6.5% !important
  }
}

@media (orientation:landscape) and (max-height:600px) {
  #header {
    height:70px !important
  }
  #header:before {
    top:7px !important;
    height:54px !important
  }
  .hero {
    min-height:650px;
    height:auto;
    padding-top:100px;
    padding-bottom:70px
  }
  .hero-copy {
    padding-top:10px
  }
  .hero-copy h1 {
    font-size:clamp(44px,7vw,68px)
  }
  .pagehero {
    min-height:430px;
    padding-top:110px
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slides .slide,.hero-slides .slide-layer {
    transition:none !important
  }
}

/* Final cinematic gradient balance — intentionally subtle so the locked layout is unchanged. */

.dark {
  background:linear-gradient(135deg,#0B0A09 0%,#151210 54%,#1C1713 100%)
}

.ivory {
  background:linear-gradient(135deg,#151210 0%,#0B0A09 100%)
}

.dark.block:nth-child(even) {
  background:linear-gradient(135deg,#0B0A09 0%,#151210 52%,#1C1713 100%)
}

.ivory.block:nth-child(even) {
  background:linear-gradient(135deg,#151210 0%,#0B0A09 100%)
}

.statement {
  background:linear-gradient(135deg,#0B0A09,#151210 62%,#1C1713)
}

.final:after {
  background:linear-gradient(90deg,rgba(11,10,9,.90) 0%,rgba(11,10,9,.66) 48%,rgba(11,10,9,.32) 100%)
}

/* =========================================================
   THEME TOGGLE + COMPLETE LIGHT THEME
   Dark remains the locked default. Light is a true site-wide
   palette swap; layout, typography and imagery remain unchanged.
   ========================================================= */

html[data-theme="light"] {
  --theme-bg:#F7F3EC;
  --theme-bg-secondary:#EFE7DC;
  --theme-surface:#FFFDF8;
  --theme-surface-hover:#F2E5D4;
  --theme-text:#211811;
  --theme-text-soft:#62584F;
  --theme-muted:#8B7E72;
  --theme-border:#C9B8A5;
  --theme-border-light:#D9C8B5;
  --theme-gold:#A96831;
  --theme-gold-light:#C98A4A;
  --theme-gold-highlight:#E2A45F;
  --theme-input:#F3ECE2;
  --theme-shadow:0 20px 60px rgba(61,42,26,.13);
  --theme-overlay:linear-gradient(90deg,rgba(20,13,9,.74) 0%,rgba(20,13,9,.42) 42%,rgba(20,13,9,.12) 75%,rgba(20,13,9,.28) 100%);
}

/* Header controls */

.header-actions {
  display:flex;
  align-items:center;
  justify-self:end;
  gap:10px;
  min-width:0;
  margin-right:18px
}

.theme-toggle {
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid rgba(226,164,95,.42);
  border-radius:50%;
  background:rgba(11,10,9,.52);
  color:#F7F3EC;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.16);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),color .3s var(--ease)
}

.theme-toggle:hover {
  transform:translateY(-1px);
  border-color:#F0C27B;
  background:#292017
}

.theme-toggle span {
  grid-area:1/1;
  font:700 17px/1 Georgia,serif;
  transition:opacity .2s,transform .3s var(--ease)
}

.theme-toggle .theme-moon {
  opacity:1;
  transform:rotate(0) scale(1)
}

.theme-toggle .theme-sun {
  opacity:0;
  transform:rotate(-35deg) scale(.65)
}

html[data-theme="light"] .theme-toggle {
  background:#FFFDF8;
  color:#8F5D30;
  border-color:#C9A276;
  box-shadow:0 5px 18px rgba(75,49,27,.12)
}

html[data-theme="light"] .theme-toggle .theme-moon {
  opacity:0;
  transform:rotate(35deg) scale(.65)
}

html[data-theme="light"] .theme-toggle .theme-sun {
  opacity:1;
  transform:rotate(0) scale(1)
}

/* Mobile header follows the supplied reference: one slim floating pill,
   original logo at left, theme control and hamburger at right. */

@media(max-width:900px) {
  #header {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:70px !important;
    padding:0 8px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    transform:translate3d(0,0,0) !important;
    z-index:10010 !important;
  }
  #header:before {
    left:8px !important;
    right:8px !important;
    top:8px !important;
    height:54px !important;
    border-radius:999px !important;
    background:linear-gradient(105deg,#2B211C 0%,#1C1511 58%,#30231B 100%) !important;
    border:1px solid rgba(226,164,95,.34) !important;
    box-shadow:0 8px 25px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.08) !important;
  }
  #header.scrolled {
    height:70px !important
  }
  #header.scrolled:before {
    top:8px !important;
    height:54px !important
  }
  #header .logo {
    grid-column:1 !important;
    justify-self:start !important;
    margin-left:10px !important;
    z-index:2
  }
  #header .logo img {
    width:116px !important;
    height:42px !important;
    object-fit:contain !important
  }
  #header .desktop-nav {
    display:none !important
  }
  #header .header-actions {
    display:contents
  }
  #header .header-actions .book {
    display:none !important
  }
  #header .theme-toggle {
    grid-column:2 !important;
    justify-self:end !important;
    width:32px;
    height:32px;
    flex-basis:32px;
    margin-right:4px;
    z-index:3;
    background:rgba(11,10,9,.42);
    border-color:rgba(226,164,95,.30)
  }
  #header .theme-toggle span {
    font-size:15px
  }
  #header .mobile-page-toggle {
    grid-column:3 !important;
    display:flex !important;
    justify-self:end !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    margin-right:8px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#F7F3EC !important;
    z-index:3;
    gap:0 !important
  }
  #header .mobile-page-toggle span {
    display:none !important
  }
  #header .mobile-page-toggle i {
    font:400 19px/1 Arial,sans-serif !important;
    color:#F7F3EC !important
  }
  #header .mobile-page-toggle i {
    font-size:0 !important
  }
  #header .mobile-page-toggle i:before {
    content:'☰';
    font-size:18px !important
  }
  html[data-theme="light"] #header:before {
    background:linear-gradient(105deg,#FFFDF9 0%,#F3E9DC 58%,#FFF8EE 100%) !important;
    border-color:#C9B39A !important;
    box-shadow:0 8px 25px rgba(69,45,25,.14),inset 0 1px rgba(255,255,255,.85) !important
  }
  html[data-theme="light"] #header .mobile-page-toggle i {
    color:#211811 !important
  }
  html[data-theme="light"] #header .theme-toggle {
    background:#F7EFE5 !important;
    color:#8F5D30 !important;
    border-color:#C9A276 !important
  }
}

/* Global light surfaces — all existing pages keep their exact structure. */

html[data-theme="light"] body {
  background:var(--theme-bg);
  color:var(--theme-text)
}

html[data-theme="light"] body:before {
  background-image:radial-gradient(rgba(80,56,37,.28) .55px,transparent .55px)
}

html[data-theme="light"] html {
  background:var(--theme-bg)
}

html[data-theme="light"] .dark,
html[data-theme="light"] .ivory,
html[data-theme="light"] .textblock,
html[data-theme="light"] .statement,
html[data-theme="light"] .split,
html[data-theme="light"] .drone,
html[data-theme="light"] .final,
html[data-theme="light"] .map,
html[data-theme="light"] .footer {
  background:linear-gradient(135deg,var(--theme-bg) 0%,var(--theme-bg-secondary) 52%,#F8EFE4 100%);
  color:var(--theme-text)
}

html[data-theme="light"] .dark.block:nth-child(even),
html[data-theme="light"] .ivory.block:nth-child(even) {
  background:linear-gradient(135deg,#EFE5D9 0%,#F7F0E8 100%)
}

html[data-theme="light"] .statement {
  background:linear-gradient(135deg,#EFE3D5 0%,#F7EFE5 55%,#EBD7C0 100%)
}

html[data-theme="light"] .final {
  background-color:var(--theme-bg)
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .head em,
html[data-theme="light"] h1 em,
html[data-theme="light"] h2 em {
  color:var(--theme-gold)
}

html[data-theme="light"] .head h2,
html[data-theme="light"] .two h2,
html[data-theme="light"] .split h2,
html[data-theme="light"] .drone h2,
html[data-theme="light"] .map h2,
html[data-theme="light"] .statement h2 {
  color:var(--theme-text)
}

html[data-theme="light"] .statement p,
html[data-theme="light"] .split p,
html[data-theme="light"] .drone p {
  color:var(--theme-text-soft)
}

html[data-theme="light"] .light {
  background:linear-gradient(135deg,#8F5D30 0%,#C98A4A 55%,#E2A45F 100%);
  color:#FFFDF8;
  box-shadow:0 12px 25px rgba(88,54,28,.16)
}

html[data-theme="light"] .light:hover {
  background:linear-gradient(135deg,#A96831,#E2A45F)
}

html[data-theme="light"] .darkbtn {
  background:#211811;
  color:#FFFDF8
}

html[data-theme="light"] .darkbtn:hover {
  background:#C98A4A;
  color:#211811
}

html[data-theme="light"] .darktxt {
  color:#211811;
  border-color:#211811
}

html[data-theme="light"] .outline {
  color:#211811;
  border-color:#8F7864
}

html[data-theme="light"] .outline:hover {
  background:rgba(201,138,74,.10);
  color:#8F5D30;
  border-color:#C98A4A
}

/* Header in light mode: same geometry, inverted palette. */

html[data-theme="light"] #header:before {
  background:linear-gradient(105deg,#2B211C 0%,#1C1511 58%,#30231B 100%);
  border-color:rgba(226,164,95,.34)
}

html[data-theme="light"] #header .logo,
html[data-theme="light"] #header .desktop-nav a,
html[data-theme="light"] #header .mobile-page-toggle {
  color:#F7F3EC
}

html[data-theme="light"] #header .desktop-nav a:hover,
html[data-theme="light"] #header .desktop-nav a.active {
  color:#F0C27B
}

html[data-theme="light"] #header .book {
  background:linear-gradient(135deg,#8F5D30,#C98A4A,#E2A45F);
  color:#0B0A09
}

/* Light inner-page heroes remain cinematic over photography. */

html[data-theme="light"] .pagehero,
html[data-theme="light"] .servicehero,
html[data-theme="light"] .storyhero,
html[data-theme="light"] .hero {
  color:#F7F3EC
}

html[data-theme="light"] .pagehero:after,
html[data-theme="light"] .servicehero:after,
html[data-theme="light"] .storyhero:after {
  background:linear-gradient(90deg,rgba(11,10,9,.78),rgba(11,10,9,.40) 52%,rgba(11,10,9,.28))
}

html[data-theme="light"] .hero .shade {
  background:var(--theme-overlay)
}

html[data-theme="light"] .hero-slides,
html[data-theme="light"] .hero-slides .slide {
  background:#211811
}

html[data-theme="light"] .hero-slides .slide-layer {
  filter:blur(24px) brightness(.42) saturate(.78)
}

html[data-theme="light"] .hero-copy h1 {
  color:#F7F3EC
}

html[data-theme="light"] .hero-copy p {
  color:#EFE5D9
}

/* Cards, editorial lists and content pages. */

html[data-theme="light"] .card,
html[data-theme="light"] .portfolio-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .film-card,
html[data-theme="light"] .package,
html[data-theme="light"] .booking form,
html[data-theme="light"] .contact form {
  background:var(--theme-surface);
  border-color:var(--theme-border)
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .portfolio-card:hover,
html[data-theme="light"] .film-card:hover {
  background:var(--theme-surface-hover);
  border-color:var(--theme-border-light)
}

html[data-theme="light"] .textblock .big,
html[data-theme="light"] .textblock h2,
html[data-theme="light"] .legal-copy h2,
html[data-theme="light"] .service-archive h2,
html[data-theme="light"] .team-page article h2,
html[data-theme="light"] .plans-page>.big,
html[data-theme="light"] .bloggrid>a h2,
html[data-theme="light"] .booking aside h2,
html[data-theme="light"] .contact h2,
html[data-theme="light"] .bookbox h2,
html[data-theme="light"] .package strong {
  color:var(--theme-text)
}

html[data-theme="light"] .textblock>div>p:not(.big),
html[data-theme="light"] .service-archive p,
html[data-theme="light"] .team-page article p,
html[data-theme="light"] .bloggrid>a p,
html[data-theme="light"] .booking aside p,
html[data-theme="light"] .contact>div:first-child p,
html[data-theme="light"] .bookbox p {
  color:var(--theme-text-soft)
}

html[data-theme="light"] .service-archive>a>span,
html[data-theme="light"] .service-archive b,
html[data-theme="light"] .booking .contact-info,
html[data-theme="light"] .contact>div:first-child>a {
  color:var(--theme-gold)
}

html[data-theme="light"] .package small,
html[data-theme="light"] .package ul {
  color:var(--theme-muted)
}

html[data-theme="light"] .package.featured {
  background:linear-gradient(145deg,#FFFDF8,#F2E4D3);
  border-color:#C9A276
}

html[data-theme="light"] .service-archive,
html[data-theme="light"] .team-page article,
html[data-theme="light"] .package,
html[data-theme="light"] .search {
  border-color:var(--theme-border)
}

html[data-theme="light"] .search {
  border-bottom-color:var(--theme-border)
}

html[data-theme="light"] .search input {
  color:var(--theme-text)
}

html[data-theme="light"] .search button {
  color:var(--theme-gold)
}

html[data-theme="light"] .share a {
  background:#211811;
  color:#FFFDF8
}

/* Forms / validation */

html[data-theme="light"] .booking label,
html[data-theme="light"] .contact label {
  color:var(--theme-text-soft)
}

html[data-theme="light"] .booking input,
html[data-theme="light"] .booking textarea,
html[data-theme="light"] .contact input,
html[data-theme="light"] .contact textarea {
  background:var(--theme-input) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important
}

html[data-theme="light"] .booking input::placeholder,
html[data-theme="light"] .booking textarea::placeholder,
html[data-theme="light"] .contact input::placeholder {
  color:var(--theme-muted)
}

html[data-theme="light"] .booking input:focus,
html[data-theme="light"] .booking textarea:focus,
html[data-theme="light"] .contact input:focus,
html[data-theme="light"] .contact textarea:focus {
  border-color:var(--theme-gold) !important;
  box-shadow:0 0 0 2px rgba(169,104,49,.13)
}

html[data-theme="light"] .booking fieldset {
  border-color:var(--theme-border)
}

html[data-theme="light"] .flash {
  background:#F3DDD8;
  color:#7D3830
}

html[data-theme="light"] .flash.success {
  background:#E5EDDF;
  color:#49613E
}

html[data-theme="light"] .success {
  background:#211811;
  color:#F7F3EC
}

html[data-theme="light"] .success p {
  color:#C8C0B7
}

/* Footer / floating controls */

html[data-theme="light"] .footer {
  background:linear-gradient(135deg,#211811,#15100C);
  color:#F7F3EC
}

html[data-theme="light"] .footer>div>span {
  color:#E2A45F
}

html[data-theme="light"] .footer a {
  color:#C8C0B7
}

html[data-theme="light"] .footer a:hover {
  color:#F0C27B
}

html[data-theme="light"] .footer small {
  border-top-color:#625246;
  color:#91877D
}

html[data-theme="light"] .wa {
  background:linear-gradient(135deg,#8F5D30,#C98A4A,#E2A45F);
  color:#0B0A09
}

/* Menus and overlays */

html[data-theme="light"] #mobile {
  background:rgba(247,243,236,.98)
}

html[data-theme="light"] .mobile-top {
  color:#211811
}

html[data-theme="light"] .mobile-close {
  border-color:#C9B8A5;
  color:#211811
}

html[data-theme="light"] .mobile-panel nav a {
  color:#211811
}

html[data-theme="light"] .mobile-panel nav a.active {
  color:#A96831
}

html[data-theme="light"] .mobile-panel .mobile-book {
  background:#C98A4A;
  color:#211811
}

html[data-theme="light"] .modal {
  background:rgba(33,24,17,.78)
}

html[data-theme="light"] .bookbox {
  background:#FFFDF8;
  color:#211811
}

html[data-theme="light"] .bookbox>button {
  color:#211811
}

/* Small-screen hardening: no clipped pill, no header scroll-away, no overflow. */

@media(max-width:600px) {
  #header:before {
    left:6px !important;
    right:6px !important
  }
  #header .logo {
    margin-left:9px !important
  }
  #header .logo img {
    width:110px !important;
    height:40px !important
  }
  #header .theme-toggle {
    width:30px;
    height:30px;
    flex-basis:30px;
    margin-right:2px
  }
  #header .mobile-page-toggle {
    margin-right:7px !important
  }
  .hero {
    padding-top:96px !important
  }
  .pagehero {
    padding-top:122px !important
  }
  .servicehero,.storyhero {
    padding-top:0 !important
  }
}

@media(max-width:380px) {
  #header .logo img {
    width:96px !important
  }
  #header .theme-toggle {
    width:28px;
    height:28px;
    flex-basis:28px
  }
  #header .theme-toggle span {
    font-size:14px
  }
  #header .mobile-page-toggle {
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important
  }
}

/* =========================================================
   WHY SNAP — FULLY RESPONSIVE
   ========================================================= */

.why {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.why>div {
  min-width:0;
  width:100%;
  padding:34px 35px;
  box-sizing:border-box;
  overflow:hidden;
}

.why>div:nth-child(even) {
  padding-left:35px;
  border-left:1px solid var(--line);
}

/* Tablet */

@media (max-width:900px) {
  .why {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .why>div {
    padding:28px 24px;
  }
  .why>div:nth-child(even) {
    padding-left:24px;
  }
  .why h3 {
    font-size:30px;
  }
  .why p {
    font-size:14px;
    line-height:1.6;
  }
}

/* Mobile */

@media (max-width:600px) {
  .why {
    grid-template-columns:1fr;
    width:100%;
  }
  .why>div,
  .why>div:nth-child(even) {
    width:100%;
    min-width:0;
    padding:28px 0;
    border-left:0;
    border-bottom:1px solid var(--line);
  }
  .why>div:last-child {
    border-bottom:0;
  }
  .why h3 {
    font-size:30px;
    line-height:.95;
    max-width:100%;
    overflow-wrap:break-word;
  }
  .why p {
    max-width:100%;
    font-size:13px;
    line-height:1.6;
  }
}

/* Small phones */

@media (max-width:380px) {
  .why>div,
  .why>div:nth-child(even) {
    padding:24px 0;
  }
  .why h3 {
    font-size:27px;
  }
  .why p {
    font-size:12px;
  }
}

/* =========================================================
   PORTFOLIO — SYMMETRY / NO-GAP FINAL OVERRIDE
   ========================================================= */
.portfolio-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  width:100%;
  margin:0;
  padding:0;
}
.portfolio-grid>a,
.portfolio-grid>a:nth-child(3n),
.portfolio-grid>a:nth-child(4n){
  grid-column:auto !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
  margin:0 !important;
  border-radius:0 !important;
}
.portfolio-grid img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
@media(max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .portfolio-grid>a,
  .portfolio-grid>a:nth-child(3n),
  .portfolio-grid>a:nth-child(4n){aspect-ratio:3/4 !important;}
}

@media(max-width:768px) {

    .contact-map iframe {
        min-height:400px;
    }

    .contact-map-info {
        flex-direction:column;
        align-items:flex-start;
        gap:24px;
    }

    .contact-map-action {
        width:100%;
    }

    .contact-map-action .button {
        display:inline-flex;
    }

}

/* =========================================================
   CONTACT MAP — FINAL RESPONSIVE OVERRIDE
   Existing map CSS above is intentionally preserved.
   This block only strengthens sizing and responsive behavior.
   ========================================================= */

.contact-map-section {
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.contact-map-heading {
  width:100%;
  max-width:760px;
  margin-bottom:42px;
}

.contact-map-heading h2 {
  margin:12px 0 18px;
}

.contact-map-heading p {
  max-width:650px;
  margin:0;
}

.contact-map {
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
}

.contact-map iframe {
  display:block;
  width:100%;
  height:500px;
  min-height:500px;
  max-width:100%;
  border:0;
}

.contact-map-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  width:100%;
  padding-top:32px;
}

.contact-map-info>div {
  min-width:0;
}

.contact-map-info h3 {
  margin:8px 0 12px;
}

.contact-map-info p {
  margin:0;
  line-height:1.8;
}

.contact-map-action {
  flex-shrink:0;
}

.contact-map-action .button {
  white-space:nowrap;
}


/* Tablet */

@media (max-width:900px) {

  .contact-map-heading {
    margin-bottom:32px;
  }

  .contact-map iframe {
    height:450px;
    min-height:450px;
  }

  .contact-map-info {
    gap:28px;
  }

}


/* Mobile */

@media (max-width:768px) {

  .contact-map-heading {
    margin-bottom:28px;
  }

  .contact-map-heading h2 {
    margin:10px 0 16px;
  }

  .contact-map-heading p {
    max-width:100%;
    font-size:14px;
    line-height:1.7;
  }

  .contact-map {
    border-radius:3px;
  }

  .contact-map iframe {
    width:100%;
    height:420px;
    min-height:420px;
  }

  .contact-map-info {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:24px;
    padding-top:26px;
  }

  .contact-map-info h3 {
    font-size:28px;
    line-height:1.05;
    margin:8px 0;
  }

  .contact-map-info p {
    max-width:100%;
    font-size:14px;
    line-height:1.7;
  }

  .contact-map-action {
    width:100%;
  }

  .contact-map-action .button {
    display:inline-flex;
    width:auto;
    max-width:100%;
  }

}


/* Small phones */

@media (max-width:600px) {

  .contact-map-heading h2 {
    font-size:clamp(40px,10vw,58px);
  }

  .contact-map iframe {
    height:400px;
    min-height:400px;
  }

  .contact-map-info h3 {
    font-size:27px;
  }

  .contact-map-info p {
    font-size:13px;
  }

  .contact-map-action {
    width:100%;
  }

  .contact-map-action .button {
    width:100%;
  }

}


/* Extra-small phones */

@media (max-width:380px) {

  .contact-map-heading h2 {
    font-size:44px;
  }

  .contact-map iframe {
    height:380px;
    min-height:380px;
  }

  .contact-map-info {
    gap:20px;
    padding-top:22px;
  }

  .contact-map-info h3 {
    font-size:25px;
  }

  .contact-map-info p {
    font-size:12px;
    line-height:1.65;
  }

}


/* Prevent the map from creating horizontal overflow */

@media (max-width:768px) {

  .contact-map-section,
  .contact-map-heading,
  .contact-map,
  .contact-map-info {
    max-width:100%;
    min-width:0;
  }

  .contact-map iframe {
    max-width:100%;
  }

}

/* =========================================================
   TIMELINE + TESTIMONIAL THEME VISIBILITY FIX
   FINAL OVERRIDE
   Existing CSS is preserved.
   ========================================================= */


/* =========================================================
   TIMELINE — DARK THEME
   ========================================================= */

.timeline {
    color:var(--white);
}

.timeline > div {
    border-left-color:rgba(247,243,236,.42);
}

.timeline > div > span {
    background:var(--espresso);
    border-color:rgba(247,243,236,.65);
    color:#F7F3EC;
    text-shadow:none;
}

.timeline article {
    color:#F7F3EC;
}

.timeline h3 {
    color:#F7F3EC;
}

.timeline p {
    color:#BDB3AA;
}


/* =========================================================
   TESTIMONIALS — DARK THEME
   ========================================================= */

.quotes {
    color:#F7F3EC;
}

.quotes article {
    color:#F7F3EC;
}

.quotes blockquote {
    color:#F7F3EC;
}

.quotes article strong {
    color:#F7F3EC;
}

.quotes article .eyebrow {
    color:var(--gold-light);
}

.quotes > button {
    color:#F7F3EC;
    border-color:rgba(247,243,236,.45);
    background:transparent;
}

.quotes > button:hover {
    color:#0B0A09;
    background:var(--gold-light);
    border-color:var(--gold-light);
}


/* =========================================================
   LIGHT THEME — TIMELINE
   ========================================================= */

html[data-theme="light"] .timeline {
    color:var(--theme-text);
}

html[data-theme="light"] .timeline > div {
    border-left-color:var(--theme-border);
}

html[data-theme="light"] .timeline > div > span {
    background:var(--theme-surface);
    border-color:var(--theme-border);
    color:var(--theme-text);
    box-shadow:0 4px 15px rgba(61,42,26,.08);
}

html[data-theme="light"] .timeline article {
    color:var(--theme-text);
}

html[data-theme="light"] .timeline h3 {
    color:var(--theme-text);
}

html[data-theme="light"] .timeline p {
    color:var(--theme-text-soft);
}


/* =========================================================
   LIGHT THEME — TESTIMONIALS
   ========================================================= */

html[data-theme="light"] .quotes {
    color:var(--theme-text);
}

html[data-theme="light"] .quotes article {
    color:var(--theme-text);
}

html[data-theme="light"] .quotes blockquote {
    color:var(--theme-text);
}

html[data-theme="light"] .quotes article strong {
    color:var(--theme-text);
}

html[data-theme="light"] .quotes article .eyebrow {
    color:var(--theme-gold);
}

html[data-theme="light"] .quotes > button {
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:transparent;
}

html[data-theme="light"] .quotes > button:hover {
    color:#FFFDF8;
    background:var(--theme-gold);
    border-color:var(--theme-gold);
}


/* =========================================================
   EXTRA DARK-SECTIONS TEXT PROTECTION
   ========================================================= */

/* Timeline text should never inherit an unsuitable
   light-section text color. */

.dark .timeline h3,
.dark .timeline > div > span {
    color:#F7F3EC;
}

.dark .timeline p {
    color:#BDB3AA;
}


/* Testimonial text should remain readable on
   espresso/dark backgrounds. */

.dark .quotes blockquote {
    color:#F7F3EC;
}

.dark .quotes article strong {
    color:#F7F3EC;
}


/* =========================================================
   LIGHT THEME — PREVENT DARK TEXT COLLISIONS
   ========================================================= */

html[data-theme="light"] .dark .timeline h3,
html[data-theme="light"] .dark .timeline > div > span,
html[data-theme="light"] .dark .quotes blockquote,
html[data-theme="light"] .dark .quotes article strong {
    color:var(--theme-text);
}

html[data-theme="light"] .dark .timeline p {
    color:var(--theme-text-soft);
}


/* =========================================================
   TIMELINE NUMBER VISIBILITY
   Keep numbers visible in both themes.
   ========================================================= */

.timeline > div > span {
    opacity:1 !important;
    visibility:visible !important;
    display:grid !important;
    place-items:center;
}

.timeline > div > span::before {
    opacity:1;
    visibility:visible;
}


/* =========================================================
   MOBILE TIMELINE NUMBER VISIBILITY
   ========================================================= */

@media(max-width:900px) {

    .timeline > div > span {
        opacity:1 !important;
        visibility:visible !important;
        color:#F7F3EC !important;
    }

    html[data-theme="light"] .timeline > div > span {
        color:var(--theme-text) !important;
        background:var(--theme-surface) !important;
        border-color:var(--theme-border) !important;
    }

}


/* =========================================================
   MOBILE TESTIMONIAL VISIBILITY
   ========================================================= */

@media(max-width:768px) {

    .quotes blockquote {
        color:#F7F3EC;
    }

    .quotes article strong {
        color:#F7F3EC;
    }

    html[data-theme="light"] .quotes blockquote {
        color:var(--theme-text);
    }

    html[data-theme="light"] .quotes article strong {
        color:var(--theme-text);
    }

}


/* =========================================================
   HEADER LOGIN BUTTON — FINAL OVERRIDE
   Added for /admin/login without changing existing header.
   ========================================================= */

#header {
  grid-template-columns:220px minmax(0,1fr) auto;
}

#header .header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
  margin-right:24px;
}

#header .header-actions .theme-toggle {
  flex:0 0 auto;
}

#header .header-actions .header-login {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 auto;
  min-width:78px;
  height:40px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#F7F3EC;
  font-family:var(--sans);
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.14em;
  text-decoration:none;
  white-space:nowrap;
  transition:
    color .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    transform .3s var(--ease);
}

#header .header-actions .header-login b {
  font-size:13px;
  line-height:1;
  font-weight:500;
}

#header .header-actions .header-login:hover {
  background:#F7F3EC;
  border-color:#F7F3EC;
  color:#17100b;
  transform:translateY(-1px);
}

#header .header-actions .book {
  margin-right:0;
  flex:0 0 auto;
}

/* Desktop light theme */
html[data-theme="light"] #header .header-login {
  background:rgba(255,255,255,.08);
  border-color:rgba(247,243,236,.38);
  color:#F7F3EC;
}

html[data-theme="light"] #header .header-login:hover {
  background:#F7F3EC;
  border-color:#F7F3EC;
  color:#17100b;
}

/* Tablet / smaller desktop:
   keep login + booking visible while preserving the capsule. */
@media (max-width:1200px) and (min-width:1101px) {
  #header {
    grid-template-columns:175px minmax(0,1fr) 305px;
    padding-left:4%;
    padding-right:4%;
  }

  #header:before {
    left:4%;
    right:4%;
  }

  #header .logo {
    margin-left:14px;
  }

  #header .logo img {
    width:135px;
  }

  #header .header-actions {
    gap:7px;
    margin-right:14px;
  }

  #header .header-actions .header-login {
    min-width:70px;
    padding:0 11px;
    font-size:8px;
  }

  #header .book {
    min-width:132px;
    padding:11px 12px;
  }

  #header .theme-toggle {
    width:34px;
    height:34px;
  }
}

/* Mobile: desktop login is hidden because login is available
   inside the full-screen mobile navigation. */
@media (max-width:1100px) {
  #header .header-actions .header-login {
    display:none !important;
  }

  #header .header-actions {
    gap:0;
    margin-right:12px;
  }

  #header .book {
    margin-right:0 !important;
  }
}

/* Mobile admin login link */
.mobile-panel .mobile-login {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  padding:13px 22px;
  border:1px solid rgba(216,167,106,.55);
  border-radius:999px;
  background:transparent;
  color:#F7F3EC;
  font:700 9px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mobile-panel .mobile-login b {
  font-size:13px;
  font-weight:500;
  line-height:1;
}

.mobile-panel .mobile-login:hover {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--espresso);
}

html[data-theme="light"] .mobile-panel .mobile-login {
  border-color:#A96831;
  color:#211811;
}

html[data-theme="light"] .mobile-panel .mobile-login:hover {
  background:#C98A4A;
  border-color:#C98A4A;
  color:#211811;
}

@media (max-width:600px) {
  #header .header-actions {
    margin-right:7px;
  }

  #header .header-actions .theme-toggle {
    margin-right:2px;
  }
}

/* =========================================================
   FINAL DESKTOP HEADER — LOGO / NAV / THEME / LOGIN / BOOK
   ========================================================= */

@media (min-width:1101px) {

  #header {
    grid-template-columns:220px minmax(0,1fr) auto !important;
    padding:0 5.5% !important;
  }

  #header:before {
    left:1.2% !important;
    right:1.2% !important;
  }

  #header .logo {
    margin-left:18px !important;
  }

  #header .logo img {
    width:120px !important;
    height:48px !important;
    object-fit:contain;
  }

  #header .desktop-nav {
    justify-content:center;
    gap:32px;
  }

  #header .header-actions {
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-right:18px;
  }

  #header .theme-toggle {
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  #header .header-login {
    min-width:82px;
    height:40px;
    padding:0 16px;
  }

  #header .book {
    min-width:178px;
    height:42px;
    margin-right:0 !important;
    padding:0 22px;
  }

}

/* =========================================================
   CONTACT PAGE — VISIBILITY FIX
   ========================================================= */

.pagehero,
.pagehero.dark,
.block,
.ivory,
.dark,
.contact-map-section {
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.pagehero > *,
.block > *,
.contact-map-section > * {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.pagehero .wrap,
.contact,
.contact > *,
.map,
.contact-map-heading,
.contact-map,
.contact-map-info {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Make sure hero content is above background */
.pagehero.dark .wrap {
    position: relative;
    z-index: 2;
}

/* Contact form */
.contact form {
    position: relative;
    z-index: 2;
}

.contact form label,
.contact form input,
.contact form textarea,
.contact form button {
    position: relative;
    z-index: 3;
}

/* Google map */
.contact-map {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.contact-map iframe {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 0;
}