@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- Raw palette ---- */
  --cream:#f7f3ec;
  --cream-2:#efe8da;
  --cream-3:#e8dfcb;
  --paper:#fffdf8;          /* cards lifting off the cream page */
  --ink:#191813;
  --stone:#5c574b;

  /* Gold has to be used in three different weights, because the brand gold is
     only 2.11:1 on cream — fine as a fill or a rule, unreadable as small text. */
  --gold:#c7a652;           /* fills, rules, borders — never small text on cream */
  --gold-deep:#a88a3c;      /* hover state for gold fills */
  --gold-head:#8a7238;      /* LARGE gold text — 4.18:1 on cream, 3.49:1 on the deep band */
  --gold-text:#75602c;      /* small gold text — passes 4.5:1 on ALL three cream surfaces */
  --gold-light:#e4cd8c;     /* gold on dark media only */

  --line:#ddd2b8;
  --line-strong:#cbbd96;

  /* ---- Semantic ---- */
  --bg:var(--cream);
  --text:var(--ink);
  --text-muted:var(--stone);

  /* ---- Over photography/video: stays light regardless of page theme ---- */
  --on-media:#f4efe4;
  --on-media-muted:#d9d2c2;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-sm:220ms;
  --dur-md:420ms;
  --dur-lg:700ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink);}

.font-serif{font-family:'Playfair Display',serif;}

.surface-1{background:var(--cream-2);}
.surface-2{background:var(--cream-3);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream-2);}
::-webkit-scrollbar-thumb{background:var(--gold-head);border-radius:0;}

/* ---- Text sitting over hero photography/video ----
   The page is light, but hero copy sits on a dark scrim over imagery, so it has
   to stay light. Scoped overrides beat Tailwind's single-class utilities. */
.on-media{color:var(--on-media);}
.on-media .text-text{color:var(--on-media);}
.on-media .text-text-muted{color:var(--on-media-muted);}
.on-media .eyebrow{color:var(--gold-light);}
.on-media .text-gold,
.on-media .text-gold-head,
.on-media .text-gold-text{color:var(--gold-light);}

/* Project captions sit on a dark gradient over the photo, so they stay light
   regardless of page theme. Scoped here rather than per-element so new figures
   inherit it automatically. (.lb-caption is the lightbox, handled separately.) */
figcaption:not(.lb-caption) .text-text,
figcaption:not(.lb-caption) p{color:var(--on-media);}
figcaption:not(.lb-caption) .text-gold,
figcaption:not(.lb-caption) .text-gold-head,
figcaption:not(.lb-caption) .text-gold-text{color:var(--gold-light);}

/* Cursor affordance */
a,button,[role="button"],input[type="submit"]{cursor:pointer;}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Hairline gold rule */
.hr-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.hr-gold-solid{height:1px;background:var(--gold);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 2.1rem;
  font-family:'Inter',sans-serif;font-weight:500;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--gold);
  transition:background var(--dur-sm) var(--ease-out),color var(--dur-sm) var(--ease-out),border-color var(--dur-sm) var(--ease-out),transform var(--dur-sm) var(--ease-out);
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}

/* Outline button over moving footage (hero video) — needs a constant backing so it
   never flickers/blends into brighter frames of the clip underneath. */
.btn-outline.on-video,
.on-media .btn-outline{
  background:rgba(10,10,9,0.4);
  color:var(--on-media);
  border-color:rgba(238,230,212,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.btn-outline.on-video:hover,
.on-media .btn-outline:hover{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.btn:active{transform:translateY(0) scale(.98);}

/* Eyebrow label — darker gold so it stays legible as small caps on cream */
.eyebrow{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;
}

/* Nav
   Pages with a media hero start transparent (light text over the imagery) and
   turn to cream on scroll. Pages without one are cream from the top, otherwise
   light nav text would be invisible against the cream page. */
#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--dur-md) var(--ease-out),padding var(--dur-md) var(--ease-out),border-color var(--dur-md) var(--ease-out);
  border-bottom:1px solid transparent;
}
#site-nav.scrolled,
#site-nav:not([data-nav="over-media"]){
  background:rgba(247,243,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav-link{
  position:relative;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);opacity:.82;
  transition:opacity var(--dur-sm) var(--ease-out),color var(--dur-sm) var(--ease-out);
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold-head);
  transition:width var(--dur-sm) var(--ease-out);
}
.nav-link:hover{opacity:1;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link.active{opacity:1;color:var(--gold-text);}

/* Before scroll on a media-hero page, nav content sits on the imagery */
#site-nav[data-nav="over-media"]:not(.scrolled) .nav-link{color:var(--on-media);}
#site-nav[data-nav="over-media"]:not(.scrolled) .nav-link.active{color:var(--gold-light);}
#site-nav[data-nav="over-media"]:not(.scrolled) .text-text{color:var(--on-media);}
#site-nav[data-nav="over-media"]:not(.scrolled) .text-gold,
#site-nav[data-nav="over-media"]:not(.scrolled) .text-gold-head,
#site-nav[data-nav="over-media"]:not(.scrolled) .text-gold-text{color:var(--gold-light);}
#site-nav[data-nav="over-media"]:not(.scrolled) .hamburger span{background:var(--on-media);}

/* Mobile menu */
#mobile-menu{
  position:fixed;inset:0;z-index:90;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;
  transform:translateY(-100%);
  transition:transform var(--dur-lg) var(--ease-out);
}
#mobile-menu.open{transform:translateY(0);}
#menu-btn{padding:13px 9px;margin:-13px -9px;}
.hamburger{display:inline-block;width:26px;height:18px;position:relative;}
.hamburger span{position:absolute;left:0;width:100%;height:1px;background:var(--text);transition:transform var(--dur-sm) var(--ease-out),opacity var(--dur-sm) var(--ease-out),background var(--dur-sm) var(--ease-out);}
.hamburger span:nth-child(1){top:0;}
.hamburger span:nth-child(2){top:8px;}
.hamburger span:nth-child(3){top:16px;}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Reveal-on-scroll — visible by default; JS opts elements into the animated version.
   If JS never runs (or errors), content stays visible. */
.js-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);}
.js-ready .reveal.in-view{opacity:1;transform:translateY(0);}
.js-ready .reveal-fade{opacity:0;transition:opacity 900ms var(--ease-out);}
.js-ready .reveal-fade.in-view{opacity:1;}

/* Hero entrance — same progressive-enhancement pattern */
[data-hero-in]{opacity:1;}
.js-ready [data-hero-in]{opacity:0;animation:heroIn 800ms var(--ease-out) forwards;}
@keyframes heroIn{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}

/* Ken burns hero media */
.kenburns{
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.09) translate(-1%,-1%);}
}

/* Gold LED strip (before Recent Work) — a continuous glowing line, not discrete
   bulbs. Lit by default; JS dims it until scrolled into view, then it switches
   on as one continuous strip, with a one-shot sweep of brighter light. */
.led-strip{
  position:relative;
  height:2px;
  width:100%;
  background:var(--gold);
  border-radius:1px;
  overflow:hidden;
  opacity:1;
  /* On cream a pale glow is invisible — it has to be a saturated gold so the
     blur tints the background into a warm haze rather than washing out. */
  box-shadow:0 0 14px rgba(199,166,82,.85),0 0 34px rgba(199,166,82,.45),0 0 64px rgba(199,166,82,.22);
}
.led-strip::after{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:16%;
  /* Sweep runs along the gold strip itself, so a near-white highlight still reads */
  background:linear-gradient(90deg,transparent,rgba(255,251,240,.98),transparent);
  transform:translateX(-150%);
  opacity:0;
}
.js-ready [data-light-trigger] .led-strip{
  opacity:.30;
  box-shadow:0 0 4px rgba(199,166,82,.18);
  transition:opacity 1s var(--ease-out),box-shadow 1s var(--ease-out);
}
.js-ready [data-light-trigger].in-view .led-strip{
  opacity:1;
  box-shadow:0 0 14px rgba(199,166,82,.85),0 0 34px rgba(199,166,82,.45),0 0 64px rgba(199,166,82,.22);
}
.js-ready [data-light-trigger].in-view .led-strip::after{
  animation:led-sweep 1.1s ease-out .2s forwards;
}
@keyframes led-sweep{
  0%{transform:translateX(-150%);opacity:0;}
  12%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translateX(750%);opacity:0;}
}

/* Marquee for cert badges */
.badge-track{display:flex;gap:clamp(2.5rem,6vw,5rem);align-items:center;width:max-content;}

/* Card lift */
.card-lift{transition:transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out);}
.card-lift:hover{transform:translateY(-8px);box-shadow:0 24px 48px -12px rgba(0,0,0,.28);}

/* Image zoom on hover */
.img-zoom{overflow:hidden;}
.img-zoom img{transition:transform 900ms var(--ease-out);}
.img-zoom:hover img{transform:scale(1.07);}

/* Video testimonial play button */
.play-btn{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-sm) var(--ease-out),background var(--dur-sm) var(--ease-out);
  background:rgba(11,11,10,0.55);
}
.play-btn:hover{transform:scale(1.1);background:var(--gold);}
.play-btn:hover svg{fill:var(--ink);}

/* Pricing tier card — near-white paper lifting off the cream page */
.tier-card{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);
  transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out);
}
.tier-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 20px 44px -18px rgba(60,48,20,.30);}
.tier-card.featured{border-color:var(--gold);box-shadow:0 20px 44px -18px rgba(60,48,20,.30);}

/* Accreditation badge chip */
.badge-chip{
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  border:1px solid var(--line);color:var(--text);opacity:.85;
  background:var(--paper);
  padding:.6rem 1.1rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  transition:opacity var(--dur-sm) var(--ease-out),border-color var(--dur-sm) var(--ease-out);
}
.badge-chip:hover{opacity:1;border-color:var(--gold);}
/* Logo slot — sized to sit level with the label whether it's an icon or a real logo */
.badge-logo{
  height:22px;width:auto;max-width:64px;object-fit:contain;flex-shrink:0;display:block;
}

/* Testimonial card — bordered paper card with a decorative serif quote mark */
.testimonial-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:2.25rem 2rem;
  transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease-out);
}
.testimonial-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(60,48,20,.28);}
.testimonial-card .quote-mark{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:3.25rem;line-height:1;color:var(--gold-head);opacity:.85;
  display:block;margin-bottom:.25rem;
}

/* Service icon (Phosphor) */
.service-icon{
  font-size:1.9rem;color:var(--gold-head);display:inline-block;margin-bottom:1rem;
  transition:color var(--dur-sm) var(--ease-out),transform var(--dur-sm) var(--ease-out);
}
.group:hover .service-icon{color:var(--gold-text);transform:translateY(-2px);}

/* ============ GALLERY ============ */
.filter-btn{
  padding:.6rem 1.4rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-muted);background:var(--paper);
  transition:color var(--dur-sm) var(--ease-out),border-color var(--dur-sm) var(--ease-out),background var(--dur-sm) var(--ease-out);
}
.filter-btn:hover{color:var(--text);border-color:var(--gold-head);}
.filter-btn.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600;}
.filter-count{opacity:.6;margin-left:.4rem;font-size:.7rem;}
.filter-btn.is-active .filter-count{opacity:.75;}

.gal-item{
  position:relative;overflow:hidden;display:block;width:100%;height:100%;
  border:1px solid transparent;background:var(--cream-3);
  transition:border-color var(--dur-md) var(--ease-out),transform var(--dur-md) var(--ease-out);
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out);}
.gal-item:hover{border-color:var(--gold);transform:translateY(-3px);}
.gal-item:hover img{transform:scale(1.06);}
.gal-item.is-hidden{display:none;}
.gal-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;gap:.25rem;padding:1.1rem 1.2rem;text-align:left;
  background:linear-gradient(180deg,transparent 45%,rgba(10,10,9,.88) 100%);
  opacity:0;transition:opacity var(--dur-md) var(--ease-out);
}
.gal-item:hover .gal-overlay,.gal-item:focus-visible .gal-overlay{opacity:1;}
/* Overlay sits on the photo's dark gradient, so it keeps light type */
.gal-cat{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);}
.gal-cap{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--on-media);line-height:1.25;}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,5,.96);padding:4.5rem 1rem 5.5rem;
  opacity:0;transition:opacity var(--dur-md) var(--ease-out);
}
.lb[hidden]{display:none;}
.lb.is-open{opacity:1;}
.lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;}
/* Lightbox stays dark deliberately — a cream backdrop makes photographs glare
   and washes out their contrast. Standard for image viewing. */
.lb-figure img{
  max-width:100%;max-height:78vh;object-fit:contain;
  border:1px solid rgba(199,166,82,0.22);
  opacity:0;transform:scale(.985);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.lb-figure img.is-loaded{opacity:1;transform:scale(1);}
.lb-caption{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;}
.lb-caption #lb-text{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--on-media);}
.lb-cat{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);}
.lb-count{font-size:.72rem;letter-spacing:.12em;color:var(--on-media-muted);}
.lb-close,.lb-nav{
  position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;color:var(--on-media);
  background:rgba(10,10,9,.6);border:1px solid rgba(199,166,82,0.22);
  transition:background var(--dur-sm) var(--ease-out),color var(--dur-sm) var(--ease-out),border-color var(--dur-sm) var(--ease-out);
}
.lb-close:hover,.lb-nav:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.lb-close{top:1.1rem;right:1.1rem;}
.lb-nav{top:50%;transform:translateY(-50%);}
.lb-prev{left:1.1rem;}
.lb-next{right:1.1rem;}
@media (max-width:640px){
  .lb{padding:4rem .5rem 6rem;}
  .lb-nav{top:auto;bottom:1.1rem;transform:none;}
  .lb-prev{left:calc(50% - 56px);}
  .lb-next{right:calc(50% - 56px);}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .kenburns{animation:none;}
}

/* Utility: dvh-safe min height */
.min-h-screen-safe{min-height:100vh;}
@supports (height: 100dvh){
  .min-h-screen-safe{min-height:100dvh;}
}