/* ============================================================
   PR3 STUDIO — GLOBAL STYLESHEET
   Architecture & Interior Design, Pondicherry
   ------------------------------------------------------------
   Design tokens preserved from the original single-page site.
   Sections:
     01  Tokens
     02  Base + type
     03  Signature motifs (hairline, blueprint corners, grid)
     04  Loader + scroll progress
     05  Navigation + mobile menu
     06  Buttons
     07  Hero systems
     08  Reveal animations
     09  Cards (service / principle)
     10  Portfolio masonry + sliders + lightbox
     11  Process timeline
     12  Testimonials
     13  Forms
     14  Page-specific: About (editorial)
     15  Page-specific: Services (index)
     16  Page-specific: Process (journey)
     17  Page-specific: Contact
     18  Footer + floating UI
     19  Accessibility + reduced motion
   ============================================================ */


/* ============================================================
   01 — :ROOT EDITABLE DESIGN TOKENS
   Change these to re-theme the entire site.
   ============================================================ */
:root{
  --pine: #0D4F38;
  --pine-deep: #08301F;
  --gold: #C7A44A;
  --gold-soft: #E4CD8F;
  --ink: #111111;
  --fog: #F5F5F5;
  --white: #FFFFFF;
  --ease: cubic-bezier(.22,1,.36,1);

  /* spacing rhythm carried over from the original page */
  --section-y: 7rem;
  --section-y-lg: 9rem;
}

@media (min-width:768px){
  :root{ --section-y: var(--section-y-lg); }
}


/* ============================================================
   02 — BASE + TYPOGRAPHY
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,h4,.font-display{ font-family: 'Playfair Display', serif; }
nav, .font-nav, button, .btn, .btn-gold, .btn-outline, .btn-ink{ font-family: 'Poppins', sans-serif; }

img{ max-width: 100%; }

::selection{ background: var(--gold); color: var(--white); }

/* shared page container */
.shell{ max-width: 80rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.shell-narrow{ max-width: 64rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media(min-width:1024px){
  .shell, .shell-narrow{ padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* eyebrow label — the studio's existing section marker */
.eyebrow{
  font-family:'Poppins', sans-serif;
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  margin:0 0 1.25rem;
}


/* ============================================================
   03 — SIGNATURE MOTIFS
   ============================================================ */

/* thin architectural rule */
.hairline{ height:1px; background: currentColor; opacity:.18; }

/* drafting corner marks — the site's signature motif, echoing
   corner registration marks on architectural drawing sheets */
.blueprint-corners{ position:relative; }
.blueprint-corners::before,
.blueprint-corners::after{
  content:'';
  position:absolute;
  width:18px; height:18px;
  border-top:1.5px solid var(--gold);
  border-left:1.5px solid var(--gold);
  top:-9px; left:-9px;
  opacity:0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transform: translate(4px,4px);
  pointer-events:none;
}
.blueprint-corners::after{
  left:auto; right:-9px; top:auto; bottom:-9px;
  border-top:none; border-left:none;
  border-bottom:1.5px solid var(--gold);
  border-right:1.5px solid var(--gold);
  transform: translate(-4px,-4px);
}
.blueprint-corners:hover::before,
.blueprint-corners:hover::after{
  opacity:1;
  transform: translate(0,0);
}

/* subtle blueprint grid background, used sparingly */
.grid-texture{
  background-image:
    linear-gradient(rgba(13,79,56,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,79,56,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}


/* ============================================================
   04 — LOADING SCREEN + SCROLL PROGRESS
   ============================================================ */
#loader{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999;
  background: var(--pine);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; }
#loader img{ width:64px; height:64px; object-fit:contain; animation: pulse-fade 1.6s ease-in-out infinite; }
@keyframes pulse-fade{ 0%,100%{ opacity:.4; transform:scale(.94);} 50%{ opacity:1; transform:scale(1);} }

#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: var(--gold);
  z-index: 9998;
  transition: width .1s linear;
}


/* ============================================================
   05 — NAVIGATION
   ============================================================ */
#navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding: 1.75rem 0;
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
  background: transparent;
}
#navbar.scrolled{
  padding: 1rem 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(17,17,17,.06);
}

/* Pages without a dark full-bleed hero start with the solid bar,
   so nav text is legible from the very first pixel. */
body.nav-solid #navbar{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,17,17,.07);
}

#navbar .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
}

#navbar .nav-logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
#navbar .nav-logo img{ height:2.5rem; width:2.5rem; object-fit:contain; }
.nav-logo-text{
  font-family:'Poppins', sans-serif;
  font-size:.875rem;
  letter-spacing:.15em;
  transition: color .5s var(--ease);
}

#navbar .nav-links{ display:none; align-items:center; gap:2.5rem; }
@media(min-width:1024px){ #navbar .nav-links{ display:flex; } }

#navbar .nav-link{
  position:relative;
  font-family:'Poppins', sans-serif;
  font-size:.85rem;
  letter-spacing:.04em;
  font-weight:400;
  text-decoration:none;
  transition: color .4s var(--ease);
}
#navbar .nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
#navbar .nav-link:hover::after{ width:100%; }

/* current page marker — the underline stays drawn */
#navbar .nav-link.is-active::after{ width:100%; }
#navbar .nav-link.is-active{ color: var(--gold); }

/* light text over a transparent bar, ink text once scrolled */
#navbar.scrolled .nav-link,
body.nav-solid #navbar .nav-link{ color: var(--ink); }
#navbar:not(.scrolled) .nav-link{ color: var(--white); }
body.nav-solid #navbar:not(.scrolled) .nav-link{ color: var(--ink); }
#navbar.scrolled .nav-link.is-active,
body.nav-solid #navbar .nav-link.is-active{ color: var(--pine); }

#navbar.scrolled .nav-logo-text,
body.nav-solid #navbar .nav-logo-text{ color: var(--pine); }
#navbar:not(.scrolled) .nav-logo-text{ color: var(--white); }
body.nav-solid #navbar:not(.scrolled) .nav-logo-text{ color: var(--pine); }

#menu-toggle{
  display:flex; align-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  color: inherit;
}
@media(min-width:1024px){ #menu-toggle{ display:none; } }
#navbar.scrolled #menu-toggle,
body.nav-solid #navbar #menu-toggle{ color: var(--pine); }
#navbar:not(.scrolled) #menu-toggle{ color: var(--white); }
body.nav-solid #navbar:not(.scrolled) #menu-toggle{ color: var(--pine); }

/* ---- mobile fullscreen menu ---- */
#mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1100;
  background: var(--pine);
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem;
  overflow-y:auto;
  padding: 5rem 1.5rem 3rem;
}
#mobile-menu.open{ transform: translateY(0); }
@media(min-width:1024px){ #mobile-menu{ display:none; } }

#menu-close{
  position:absolute; top:2rem; right:2rem;
  background:none; border:0; padding:0; cursor:pointer;
  color: var(--white);
}

#mobile-menu .mobile-link{
  font-family:'Playfair Display', serif;
  color: var(--white);
  font-size:1.9rem;
  line-height:1.9;
  text-decoration:none;
  opacity:0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
#mobile-menu.open .mobile-link{ opacity:1; transform: translateY(0); }
#mobile-menu.open .mobile-link:nth-child(2){ transition-delay:.08s; }
#mobile-menu.open .mobile-link:nth-child(3){ transition-delay:.14s; }
#mobile-menu.open .mobile-link:nth-child(4){ transition-delay:.20s; }
#mobile-menu.open .mobile-link:nth-child(5){ transition-delay:.26s; }
#mobile-menu.open .mobile-link:nth-child(6){ transition-delay:.32s; }
#mobile-menu.open .mobile-link:nth-child(7){ transition-delay:.38s; }
#mobile-menu.open .mobile-cta{ transition-delay:.44s; }
#mobile-menu .mobile-link:hover{ color: var(--gold); }
#mobile-menu .mobile-link.is-active{ color: var(--gold); }
#mobile-menu .mobile-cta{ margin-top:1.75rem; font-size:.82rem; line-height:1; }

/* stop the page scrolling behind the open menu */
body.menu-open{ overflow:hidden; }


/* ============================================================
   06 — BUTTONS
   ============================================================ */
.btn-gold{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--gold);
  color: var(--ink);
  padding:.95rem 2.1rem;
  font-size:.82rem;
  letter-spacing:.05em;
  font-weight:500;
  text-decoration:none;
  border:0; cursor:pointer;
  transition: background .45s var(--ease), color .45s var(--ease), letter-spacing .45s var(--ease);
}
.btn-gold:hover{ background: var(--pine); color: var(--white); letter-spacing:.09em; }

.btn-outline{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(255,255,255,.5);
  color: var(--white);
  padding:.9rem 2.05rem;
  font-size:.82rem;
  letter-spacing:.05em;
  font-weight:400;
  text-decoration:none;
  background:transparent; cursor:pointer;
  transition: border-color .45s var(--ease), background .45s var(--ease), letter-spacing .45s var(--ease);
}
.btn-outline:hover{ border-color: var(--white); background: rgba(255,255,255,.08); letter-spacing:.09em; }

/* dark-on-light variant, for use on white and fog backgrounds */
.btn-ink{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(17,17,17,.25);
  color: var(--ink);
  padding:.9rem 2.05rem;
  font-size:.82rem;
  letter-spacing:.05em;
  text-decoration:none;
  background:transparent; cursor:pointer;
  transition: border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease), letter-spacing .45s var(--ease);
}
.btn-ink:hover{ border-color: var(--pine); background: var(--pine); color: var(--white); letter-spacing:.09em; }


/* ============================================================
   07 — HERO SYSTEMS
   ============================================================ */

/* ---- Home: full-bleed cinematic hero ---- */
/* The hero is the flex container itself rather than centring a
   height:100% child, which some older mobile engines collapse. */
#hero{
  height:100vh;
  min-height:640px;
  position:relative;
  overflow:hidden;
  background:#0a2a1e;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#hero .hero-bg{
  position:absolute; top:0; right:0; bottom:0; left:0;
  /* Two layers: the studio's own hero photo sits on top, with a
     bundled image behind it. If 1000011604.jpg has not been uploaded
     yet, the fallback paints instead of leaving a flat panel. */
  background-image: url('../1000011604.jpg'), url('../images/guest-house-01.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  will-change: transform;
}
#hero .hero-overlay{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(180deg, rgba(8,20,15,.55) 0%, rgba(8,20,15,.72) 55%, rgba(8,20,15,.9) 100%);
}
#hero .hero-content{
  position:relative; z-index:2;
  width:100%;
  text-align:center;
  padding: 0 1.5rem;
  display:flex; flex-direction:column; align-items:center;
}

.hero-shape{
  position:absolute;
  border:1px solid rgba(199,164,74,.35);
  animation: float 9s ease-in-out infinite;
}
@media(max-width:767px){ .hero-shape{ display:none; } }
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(3deg); }
}

.scroll-indicator{
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  z-index:2;
}
.scroll-indicator .mouse{
  width:24px; height:38px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:14px;
  position:relative;
}
.scroll-indicator .mouse::before{
  content:''; position:absolute; top:7px; left:50%;
  width:3px; height:7px;
  background:var(--gold); border-radius:2px;
  transform:translateX(-50%);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot{ 0%{ opacity:1; top:7px;} 70%{opacity:0; top:20px;} 100%{opacity:0; top:7px;} }
.scroll-indicator span{
  color: rgba(255,255,255,.6);
  font-family:'Poppins', sans-serif;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase;
}

/* ---- Inner pages: masthead band, no full-screen image ----
   Each inner page opens with this quieter masthead so the
   cinematic hero stays unique to the homepage. */
.page-masthead{
  padding: 11rem 0 4.5rem;
  background: var(--white);
  border-bottom:1px solid rgba(17,17,17,.08);
  position:relative;
}
.page-masthead .masthead-index{
  font-family:'Poppins', sans-serif;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color: rgba(17,17,17,.4);
}
.page-masthead h1{
  font-size: clamp(2.5rem, 7vw, 5.25rem);
  line-height:1.03;
  margin:1.25rem 0 0;
  font-weight:400;
}
.page-masthead .masthead-lede{
  margin-top:1.75rem;
  max-width:34rem;
  color: rgba(17,17,17,.65);
  font-size:1.05rem;
  line-height:1.8;
}
@media(min-width:768px){
  .page-masthead{ padding: 13rem 0 5.5rem; }
}

/* thin rule + running head, right aligned */
.masthead-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(17,17,17,.12);
}
.masthead-meta .meta-right{
  font-family:'Poppins', sans-serif;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(17,17,17,.4);
}


/* ============================================================
   08 — REVEAL ANIMATIONS (IntersectionObserver driven)
   ============================================================ */
.reveal{ opacity:0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fade-up{ transform: translateY(48px); }
.fade-left{ transform: translateX(-48px); }
.fade-right{ transform: translateX(48px); }
.zoom-in{ transform: scale(.92); }
.reveal.in-view{ opacity:1; transform: translate(0,0) scale(1); }

.delay-1{ transition-delay:.1s; } .delay-2{ transition-delay:.2s; }
.delay-3{ transition-delay:.3s; } .delay-4{ transition-delay:.4s; }
.delay-5{ transition-delay:.5s; }

/* Load-triggered variant for content that is always above the fold
   (the homepage hero). Runs on a CSS animation rather than the
   scroll observer, so the headline cannot be left invisible if
   JavaScript fails or IntersectionObserver is unavailable. */
.reveal-load{
  opacity:0;
  animation: rise-in .9s var(--ease) .55s both;
}
.reveal-load.delay-1{ animation-delay:.68s; }
.reveal-load.delay-2{ animation-delay:.81s; }
.reveal-load.delay-3{ animation-delay:.94s; }
@keyframes rise-in{
  from{ opacity:0; transform: translateY(40px); }
  to{ opacity:1; transform: translateY(0); }
}

/* image reveal — a gold curtain wipes off the photo */
.img-reveal{ position:relative; overflow:hidden; }
.img-reveal::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: var(--pine);
  transform-origin: right;
  transition: transform 1.1s var(--ease);
}
.img-reveal.in-view::after{ transform: scaleX(0); }

/* Text reveal — a line of type slides up behind a mask.
   Driven by a CSS animation rather than the scroll observer:
   these lines are always above the fold, and an animation can
   never leave the headline stranded off-screen if JavaScript
   fails or IntersectionObserver is unavailable. */
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{
  display:block;
  animation: line-rise 1s var(--ease) both;
}
.line-mask:nth-of-type(2) > span{ animation-delay:.08s; }
.line-mask:nth-of-type(3) > span{ animation-delay:.16s; }
@keyframes line-rise{
  from{ transform: translateY(105%); }
  to{ transform: translateY(0); }
}


/* ============================================================
   09 — SERVICE / PRINCIPLE CARDS
   ============================================================ */
.service-card{
  background: var(--white);
  padding:2.25rem;
  border:1px solid rgba(17,17,17,.08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.service-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -20px rgba(13,79,56,.25);
  border-color: var(--gold);
}
.service-icon{ transition: transform .5s var(--ease); width:3rem; height:3rem; }
.service-card:hover .service-icon{ transform: scale(1.1) rotate(-4deg); }
.service-card h3{ font-size:1.25rem; margin:0 0 .75rem; font-weight:500; }
.service-card p{ color: rgba(17,17,17,.6); font-size:.9rem; line-height:1.75; margin:0; }


/* ============================================================
   10 — PORTFOLIO: MASONRY, SLIDERS, LIGHTBOX
   ============================================================ */
.masonry{ columns:1; column-gap:1.5rem; }
@media(min-width:768px){ .masonry{ columns:2; } }
@media(min-width:1024px){ .masonry{ columns:3; } }

.masonry-item{
  break-inside: avoid;
  margin-bottom:1.5rem;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.masonry-item img{ width:100%; display:block; transition: transform 1s var(--ease); }
.masonry-item:hover img{ transform: scale(1.08); }

.masonry-overlay{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(180deg, rgba(8,20,15,0) 40%, rgba(8,20,15,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem;
  opacity:0;
  transition: opacity .5s var(--ease);
  z-index:3;
}
.masonry-item:hover .masonry-overlay,
.masonry-item:focus-within .masonry-overlay{ opacity:1; }
.masonry-overlay .cat{
  color: var(--gold);
  font-family:'Poppins', sans-serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 .35rem;
}
.masonry-overlay h3{
  color: var(--white);
  font-size:1.5rem;
  margin:0 0 1rem;
  font-weight:400;
}
.masonry-overlay .view-btn{
  opacity:0; transform: translateY(10px);
  transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s, background .45s var(--ease), color .45s var(--ease);
  width:fit-content;
  font-size:.72rem;
  padding:.7rem 1.4rem;
}
.masonry-item:hover .masonry-overlay .view-btn,
.masonry-item:focus-within .masonry-overlay .view-btn{ opacity:1; transform:translateY(0); }

/* ---- image slider (projects with multiple photos) ----
   crossfades on a timer, dots show position */
.portfolio-slider .slider-images{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#f5f5f5;
}
.portfolio-slider .slide-img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity 1.1s var(--ease), transform 1s var(--ease);
}
.portfolio-slider .slide-img.active{ opacity:1; position:relative; }
.portfolio-slider:hover .slide-img.active{ transform: scale(1.08); }
.portfolio-slider .slider-dots{
  position:absolute; top:14px; right:14px; z-index:4;
  display:flex; gap:5px;
}
.portfolio-slider .slider-dot{
  width:5px; height:5px; border-radius:50%;
  background: rgba(255,255,255,.45);
  transition: width .4s var(--ease), background .4s var(--ease), border-radius .4s var(--ease);
}
.portfolio-slider .slider-dot.active{
  background: var(--gold);
  width:16px; border-radius:3px;
}

/* ---- portfolio filter bar ---- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  align-items:center;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(17,17,17,.12);
}
.filter-btn{
  background:none; border:0; padding:.35rem 0;
  font-family:'Poppins', sans-serif;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(17,17,17,.45);
  cursor:pointer;
  position:relative;
  transition: color .35s var(--ease);
}
.filter-btn::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.filter-btn:hover{ color: var(--ink); }
.filter-btn.is-active{ color: var(--pine); }
.filter-btn.is-active::after{ width:100%; }
.filter-btn .count{ font-size:.62rem; vertical-align:super; margin-left:.2rem; opacity:.55; }

.masonry-item.is-hidden{ display:none; }

/* ---- project lightbox ---- */
#lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1200;
  background: rgba(8,20,15,.97);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
#lightbox.open{ opacity:1; visibility:visible; }

.lb-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem 1.5rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
@media(min-width:1024px){ .lb-head{ padding:2rem 2.5rem 1.25rem; } }
.lb-head .lb-cat{
  color: var(--gold);
  font-family:'Poppins', sans-serif;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 .4rem;
}
.lb-head h2{
  color: var(--white);
  font-size: clamp(1.4rem, 3.5vw, 2.25rem);
  margin:0;
  font-weight:400;
}
.lb-head .lb-meta{
  color: rgba(255,255,255,.55);
  font-size:.85rem;
  margin:.6rem 0 0;
  max-width:34rem;
  line-height:1.7;
}
#lb-close{
  background:none; border:1px solid rgba(255,255,255,.25);
  color: var(--white);
  width:2.75rem; height:2.75rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
#lb-close:hover{ border-color: var(--gold); background: var(--gold); color: var(--ink); }

.lb-stage{
  flex:1;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
  min-height:0;
}
.lb-stage img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity .5s var(--ease);
}
.lb-stage img.ready{ opacity:1; }

.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color: var(--white);
  width:3rem; height:3rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  z-index:2;
}
.lb-arrow:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
#lb-prev{ left:.75rem; }
#lb-next{ right:.75rem; }
@media(min-width:1024px){ #lb-prev{ left:2rem; } #lb-next{ right:2rem; } }

.lb-foot{
  flex-shrink:0;
  padding:1rem 1.5rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
}
@media(min-width:1024px){ .lb-foot{ padding:1rem 2.5rem 1.75rem; } }
.lb-counter{
  color: rgba(255,255,255,.5);
  font-family:'Poppins', sans-serif;
  font-size:.72rem; letter-spacing:.16em;
  margin:0 0 .85rem;
}
.lb-thumbs{
  display:flex; gap:.6rem;
  overflow-x:auto;
  padding-bottom:.35rem;
  scrollbar-width:thin;
}
.lb-thumbs img{
  width:4.5rem; height:3.25rem;
  object-fit:cover;
  flex-shrink:0;
  cursor:pointer;
  opacity:.4;
  border:1px solid transparent;
  transition: opacity .35s var(--ease), border-color .35s var(--ease);
}
.lb-thumbs img:hover{ opacity:.75; }
.lb-thumbs img.active{ opacity:1; border-color: var(--gold); }


/* ============================================================
   11 — PROCESS TIMELINE (shared base)
   ============================================================ */
.timeline-line{
  background: linear-gradient(180deg, rgba(199,164,74,.15), var(--gold) 15%, var(--gold) 85%, rgba(199,164,74,.15));
}
.timeline-node{ transition: transform .5s var(--ease), background .5s var(--ease); }
.timeline-item:hover .timeline-node{ transform: scale(1.25); background: var(--pine); }


/* ============================================================
   12 — TESTIMONIAL CAROUSEL
   ============================================================ */
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation: testi-in .6s var(--ease); }
@keyframes testi-in{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.testi-slide .testi-portrait{
  width:4rem; height:4rem; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 1.5rem;
}
.testi-slide .stars{ color: var(--gold); letter-spacing:.2em; margin-bottom:1.25rem; }
.testi-slide blockquote{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:1.125rem;
  line-height:1.8;
  margin:0 0 1.5rem;
}
@media(min-width:768px){ .testi-slide blockquote{ font-size:1.25rem; } }
.testi-slide .testi-name{ font-family:'Poppins', sans-serif; font-size:.875rem; letter-spacing:.02em; margin:0; }
.testi-slide .testi-role{ color: rgba(17,17,17,.5); font-size:.75rem; margin:.25rem 0 0; }

.testi-dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(17,17,17,.18);
  transition: width .4s var(--ease), background .4s var(--ease), border-radius .4s var(--ease);
  cursor:pointer;
  border:0; padding:0;
}
.testi-dot.active{ background: var(--gold); width:24px; border-radius:4px; }

/* dark-background variant */
.testi-dark .testi-dot{ background: rgba(255,255,255,.22); }
.testi-dark .testi-dot.active{ background: var(--gold); }
.testi-dark .testi-slide .testi-role{ color: rgba(255,255,255,.5); }


/* ============================================================
   13 — FORMS
   ============================================================ */
.field-input{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(17,17,17,.2);
  padding:.85rem .1rem;
  font-family:'Inter', sans-serif;
  font-size:.95rem;
  color: var(--ink);
  border-radius:0;
  transition: border-color .35s var(--ease);
}
.field-input:focus{ outline:none; border-color: var(--pine); }
.field-input::placeholder{ color: rgba(17,17,17,.4); }
select.field-input{ appearance:none; -webkit-appearance:none; color: rgba(17,17,17,.7); cursor:pointer; }
textarea.field-input{ resize:none; }

.field-label{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(17,17,17,.4);
  margin-bottom:.35rem;
}

.form-error{ color:#B42318; font-size:.85rem; }
.form-error[hidden]{ display:none; }


/* ============================================================
   14 — PAGE: ABOUT (editorial / magazine)
   ============================================================ */

/* oversized opening statement, set as a masked multi-line reveal */
.about-statement{
  font-size: clamp(1.75rem, 4.6vw, 3.5rem);
  line-height:1.22;
  font-weight:400;
  margin:0;
  max-width:26ch;
}

/* asymmetric editorial rows — text and image trade sides */
.editorial-row{
  display:grid;
  gap:2.5rem;
  align-items:center;
  padding: 4rem 0;
  border-bottom:1px solid rgba(17,17,17,.08);
}
@media(min-width:1024px){
  .editorial-row{
    grid-template-columns: repeat(12, 1fr);
    gap:4rem;
    padding: 6rem 0;
  }
  .editorial-row .col-text{ grid-column: span 6; }
  .editorial-row .col-image{ grid-column: span 6; }
  /* alternate: image left, and pulled off the baseline for rhythm */
  .editorial-row.flip .col-image{ grid-column: 1 / span 5; grid-row:1; }
  .editorial-row.flip .col-text{ grid-column: 7 / span 6; grid-row:1; }
}

.editorial-row .col-text p{
  color: rgba(17,17,17,.68);
  line-height:1.9;
  font-size:1.02rem;
  max-width:36rem;
}
.editorial-row h2{
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height:1.25;
  font-weight:400;
  margin:.75rem 0 1.5rem;
}

/* editorial numbering: 01 / 02 / 03 set in the gutter */
.editorial-num{
  font-family:'Playfair Display', serif;
  font-size:.95rem;
  color: var(--gold);
  letter-spacing:.08em;
  display:inline-block;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(199,164,74,.4);
}

/* principles: a numbered list, not a card grid */
.principle-list{ list-style:none; margin:0; padding:0; }
.principle-item{
  display:grid;
  gap:.75rem 2rem;
  padding:2rem 0;
  border-top:1px solid rgba(255,255,255,.14);
  align-items:start;
}
@media(min-width:768px){
  .principle-item{ grid-template-columns: 4rem 16rem 1fr; gap:2.5rem; padding:2.25rem 0; }
}
.principle-item .p-num{
  font-family:'Playfair Display', serif;
  color: var(--gold);
  font-size:1rem;
}
.principle-item h3{ margin:0; font-size:1.35rem; font-weight:400; color: var(--white); }
.principle-item p{ margin:0; color: rgba(255,255,255,.62); line-height:1.85; font-size:.95rem; max-width:34rem; }

/* stats strip */
.stat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; }
.stat-grid .stat-value{
  font-family:'Playfair Display', serif;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--pine);
  margin:0;
  line-height:1;
}
.stat-grid .stat-label{
  font-family:'Poppins', sans-serif;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color: rgba(17,17,17,.5);
  margin:.65rem 0 0;
}
.counter{ font-variant-numeric: tabular-nums; }

/* pull quote */
.pull-quote{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height:1.55;
  margin:0;
  max-width:30ch;
}


/* ============================================================
   15 — PAGE: SERVICES (structured index)
   An expanding index list rather than a grid of cards — the
   layout reads like a drawing register.
   ============================================================ */
.service-index{ border-top:1px solid rgba(17,17,17,.14); }

.service-row{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  border-bottom:1px solid rgba(17,17,17,.14);
  padding:0;
  cursor:pointer;
  position:relative;
  transition: background .5s var(--ease);
}
.service-row:hover{ background: rgba(13,79,56,.03); }
.service-row.is-open{ background: rgba(13,79,56,.04); }

.service-row .row-head{
  display:grid;
  grid-template-columns: 3.25rem 1fr 2.5rem;
  align-items:center;
  gap:1rem;
  padding:1.65rem .5rem;
}
@media(min-width:768px){
  .service-row .row-head{ grid-template-columns: 6rem 1fr 3.5rem; gap:2rem; padding:2.35rem 1rem; }
}

.service-row .row-num{
  font-family:'Playfair Display', serif;
  font-size:.9rem;
  color: var(--gold);
  letter-spacing:.06em;
}
.service-row .row-name{
  font-family:'Playfair Display', serif;
  font-size: clamp(1.35rem, 3.4vw, 2.35rem);
  font-weight:400;
  margin:0;
  line-height:1.2;
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.service-row:hover .row-name{ transform: translateX(10px); color: var(--pine); }
.service-row.is-open .row-name{ transform: translateX(10px); color: var(--pine); }

.service-row .row-toggle{
  width:2.25rem; height:2.25rem;
  border:1px solid rgba(17,17,17,.2);
  display:flex; align-items:center; justify-content:center;
  justify-self:end;
  color: var(--ink);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.service-row:hover .row-toggle{ border-color: var(--gold); }
.service-row.is-open .row-toggle{ transform: rotate(45deg); background: var(--pine); border-color: var(--pine); color: var(--white); }

.service-row .row-body{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.service-row.is-open .row-body{ grid-template-rows: 1fr; }
.service-row .row-body-inner{ overflow:hidden; }
.service-row .row-body-content{
  display:grid;
  gap:1.75rem;
  padding:0 .5rem 2.25rem;
}
@media(min-width:768px){
  .service-row .row-body-content{
    grid-template-columns: 6rem minmax(0,1fr) minmax(0,15rem);
    gap:2rem;
    padding:0 1rem 2.75rem;
    align-items:start;
  }
  .service-row .row-body-content .body-icon{ grid-column:1; }
}
.service-row .body-icon{ color: var(--pine); width:3rem; height:3rem; }
.service-row .body-copy{ color: rgba(17,17,17,.68); line-height:1.9; font-size:1rem; margin:0; max-width:38rem; }
.service-row .body-points{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.service-row .body-points li{
  font-family:'Poppins', sans-serif;
  font-size:.72rem; letter-spacing:.06em;
  border:1px solid rgba(17,17,17,.15);
  padding:.4rem .85rem;
  color: rgba(17,17,17,.62);
}
.service-row .body-cta{
  font-family:'Poppins', sans-serif;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--pine);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:.25rem;
  display:inline-block;
  transition: color .4s var(--ease), letter-spacing .4s var(--ease);
}
.service-row .body-cta:hover{ color: var(--gold); letter-spacing:.2em; }


/* ============================================================
   16 — PAGE: PROCESS (journey)
   Full-bleed alternating stages with an oversized numeral; the
   numeral is the page's one loud element.
   ============================================================ */
.stage{
  position:relative;
  padding: 4rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media(min-width:768px){ .stage{ padding: 5.5rem 0; } }
.stage:last-of-type{ border-bottom:0; }

.stage-grid{
  display:grid;
  gap:1.5rem;
  align-items:start;
}
@media(min-width:768px){
  .stage-grid{ grid-template-columns: 11rem 1fr; gap:3.5rem; }
}
@media(min-width:1024px){
  .stage-grid{ grid-template-columns: 14rem 1fr 18rem; gap:4.5rem; }
}

.stage-num{
  font-family:'Playfair Display', serif;
  font-size: clamp(3.5rem, 12vw, 8.5rem);
  line-height:.85;
  color: rgba(199,164,74,.28);
  letter-spacing:-.02em;
  margin:0;
  transition: color 1.2s var(--ease);
}
/* where the browser can draw an outlined numeral, do that instead —
   it reads as drafting linework rather than flat tinted type */
@supports (-webkit-text-stroke: 1px red){
  .stage-num{
    color: transparent;
    -webkit-text-stroke: 1px rgba(199,164,74,.55);
  }
  .stage.in-view .stage-num{ color: rgba(199,164,74,.14); }
}

.stage h2{
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight:400;
  color: var(--white);
  margin:0 0 1.25rem;
  line-height:1.15;
}
.stage p{
  color: rgba(255,255,255,.66);
  line-height:1.9;
  font-size:1.02rem;
  margin:0;
  max-width:38rem;
}

/* deliverables column — a drafting schedule */
.stage-deliverables{
  border-left:1px solid rgba(199,164,74,.3);
  padding-left:1.5rem;
}
.stage-deliverables .d-label{
  font-family:'Poppins', sans-serif;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold);
  margin:0 0 .9rem;
}
.stage-deliverables ul{ list-style:none; margin:0; padding:0; }
.stage-deliverables li{
  color: rgba(255,255,255,.62);
  font-size:.88rem;
  line-height:1.6;
  padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stage-deliverables li:last-child{ border-bottom:0; }

/* the continuous rule running down the left of the journey */
.journey{ position:relative; }
.journey::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background: linear-gradient(180deg, rgba(199,164,74,0), rgba(199,164,74,.45) 8%, rgba(199,164,74,.45) 92%, rgba(199,164,74,0));
}
@media(max-width:767px){ .journey::before{ display:none; } }
@media(min-width:768px){ .journey{ padding-left:2.5rem; } }


/* ============================================================
   17 — PAGE: CONTACT
   ============================================================ */
.contact-split{ display:grid; }
@media(min-width:1024px){ .contact-split{ grid-template-columns: 1fr 1fr; } }

.contact-visual{
  position:relative;
  min-height:22rem;
  background: var(--pine-deep);
}
@media(min-width:1024px){ .contact-visual{ min-height:100%; } }
.contact-visual img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
}
.contact-visual .visual-tint{ position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(13,79,56,.2); }
.contact-visual .visual-caption{
  position:absolute; left:1.5rem; bottom:1.5rem; right:1.5rem;
  color: var(--white);
}
@media(min-width:1024px){ .contact-visual .visual-caption{ left:2.5rem; bottom:2.5rem; } }
.contact-visual .visual-caption p{
  font-family:'Poppins', sans-serif;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  margin:0;
  color: rgba(255,255,255,.75);
}

.contact-panel{ padding: 5rem 1.5rem; }
@media(min-width:640px){ .contact-panel{ padding: 5rem 3rem; } }
@media(min-width:1024px){ .contact-panel{ padding: 7rem 4rem; } }

.detail-grid{ display:grid; gap:2rem; }
@media(min-width:640px){ .detail-grid{ grid-template-columns: repeat(2, 1fr); } }
.detail-grid .d-key{
  font-family:'Poppins', sans-serif;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(17,17,17,.4);
  margin:0 0 .5rem;
}
.detail-grid a{ color: var(--ink); text-decoration:none; transition: color .3s var(--ease); }
.detail-grid a:hover{ color: var(--pine); }
.detail-grid p{ margin:0; font-size:.95rem; line-height:1.7; }


/* ============================================================
   18 — FOOTER + FLOATING UI
   ============================================================ */
.site-footer{
  background: var(--pine);
  color: var(--white);
  padding: 5rem 0 2rem;
}
.footer-grid{ display:grid; gap:3rem; padding-bottom:4rem; }
@media(min-width:768px){ .footer-grid{ grid-template-columns: repeat(4, 1fr); } }
.site-footer .f-head{
  font-family:'Poppins', sans-serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold);
  margin:0 0 1.25rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ font-size:.875rem; color: rgba(255,255,255,.7); padding:.35rem 0; }
.site-footer a{ color: rgba(255,255,255,.7); text-decoration:none; transition: color .3s var(--ease); }
.site-footer a:hover{ color: var(--white); }
.site-footer .f-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.site-footer .f-brand img{ height:2.5rem; width:2.5rem; object-fit:contain; }
.site-footer .f-brand span{ font-family:'Poppins', sans-serif; font-size:.875rem; letter-spacing:.15em; }
.site-footer .f-blurb{ color: rgba(255,255,255,.6); font-size:.875rem; line-height:1.8; max-width:20rem; margin:0; }
.social-row{ display:flex; gap:1rem; }
.social-row a{
  width:2.25rem; height:2.25rem;
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.social-row a:hover{ border-color: var(--gold); color: var(--gold); }
.footer-base{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  padding-top:2rem;
  font-size:.75rem;
  color: rgba(255,255,255,.5);
}
@media(min-width:640px){ .footer-base{ flex-direction:row; justify-content:space-between; } }
.footer-base p{ margin:0; }

/* ---- back to top ---- */
#back-to-top{
  position:fixed; right:1.75rem; bottom:1.75rem; z-index:900;
  width:46px; height:46px;
  background: var(--pine);
  color: var(--white);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .45s var(--ease), visibility .45s var(--ease), transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background: var(--gold); color: var(--ink); }

/* ---- WhatsApp floating widget ---- */
#whatsapp-widget{
  position:fixed; left:1.75rem; bottom:1.75rem; z-index:950;
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:'Inter', sans-serif;
}
#whatsapp-toggle{
  width:52px; height:52px; border-radius:50%;
  background:#25D366;
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(37,211,102,.4);
  transition: transform .4s var(--ease);
  animation: wa-pulse 2.6s ease-in-out infinite;
}
#whatsapp-toggle:hover{ transform: scale(1.08); }
@keyframes wa-pulse{
  0%,100%{ box-shadow: 0 10px 26px rgba(37,211,102,.4); }
  50%{ box-shadow: 0 10px 30px rgba(37,211,102,.65), 0 0 0 8px rgba(37,211,102,.12); }
}
#whatsapp-panel{
  position:absolute; bottom:64px; left:0;
  width:250px;
  background: var(--white);
  box-shadow: 0 20px 50px -12px rgba(17,17,17,.28);
  border-radius:10px;
  overflow:hidden;
  opacity:0; visibility:hidden; transform: translateY(14px) scale(.96);
  transform-origin: bottom left;
  transition: opacity .4s var(--ease), visibility .4s var(--ease), transform .4s var(--ease);
}
#whatsapp-panel.open{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
#whatsapp-panel .wa-header{
  background: var(--pine);
  color: var(--white);
  padding:.9rem 1.1rem;
  font-size:.8rem;
  letter-spacing:.03em;
}
#whatsapp-panel .wa-header strong{ display:block; font-family:'Playfair Display', serif; font-size:1rem; font-weight:600; }
#whatsapp-panel .wa-contact{
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem 1.1rem;
  border-top:1px solid rgba(17,17,17,.06);
  text-decoration:none;
  transition: background .3s var(--ease);
}
#whatsapp-panel .wa-contact:hover{ background: var(--fog); }
#whatsapp-panel .wa-contact svg{ flex-shrink:0; }
#whatsapp-panel .wa-label{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(17,17,17,.45); }
#whatsapp-panel .wa-number{ display:block; font-size:.9rem; font-weight:500; color: var(--ink); }

/* keep the floating widgets clear of small screens' edges */
@media(max-width:480px){
  #whatsapp-widget{ left:1rem; bottom:1rem; }
  #back-to-top{ right:1rem; bottom:1rem; }
}


/* ============================================================
   19 — ACCESSIBILITY + REDUCED MOTION
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background: var(--pine); color: var(--white);
  padding:.75rem 1.25rem; font-size:.85rem;
  text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }

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

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* make sure nothing stays hidden when motion is switched off */
  .reveal, .reveal-load{ opacity:1 !important; transform:none !important; animation:none !important; }
  .line-mask > span{ animation:none !important; transform:none !important; }
  .img-reveal::after{ transform: scaleX(0) !important; }
  .stage-num{ color: rgba(199,164,74,.14) !important; }
}

/* fallback for visitors with JavaScript disabled */
.no-js .reveal, .no-js .reveal-load{ opacity:1; transform:none; animation:none; }
.no-js .line-mask > span{ animation:none; transform:none; }
.no-js .img-reveal::after{ display:none; }
.no-js #loader{ display:none; }


/* ============================================================
   20 — UTILITY LAYER
   A deliberately small set, replacing the Tailwind CDN the
   original page loaded. Everything the markup needs is here,
   so the site renders correctly with no external stylesheet
   and no flash of unstyled content on slow connections.
   ============================================================ */

/* sections */
.section{ padding: var(--section-y) 0; }
.section-sm{ padding: 4.5rem 0; }
.bg-white{ background: var(--white); }
.bg-fog{ background: var(--fog); }
.bg-pine{ background: var(--pine); }
.bg-pine-deep{ background: var(--pine-deep); }
.bg-black{ background:#000; }
.on-dark{ color: var(--white); }

/* text */
.t-pine{ color: var(--pine); }
.t-gold{ color: var(--gold); }
.t-white{ color: var(--white); }
.t-muted{ color: rgba(17,17,17,.6); }
.t-muted-light{ color: rgba(255,255,255,.65); }
.center{ text-align:center; }
.lede{ font-size:1.05rem; line-height:1.85; color: rgba(17,17,17,.68); }
.lede-light{ font-size:1.05rem; line-height:1.85; color: rgba(255,255,255,.68); }

.h-section{
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  line-height:1.18;
  font-weight:400;
  margin:0;
}
.h-lead{
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height:1.12;
  font-weight:400;
  margin:0;
}

/* measure + rhythm */
.measure{ max-width: 38rem; }
.measure-tight{ max-width: 30rem; }
.stack > * + *{ margin-top:1.25rem; }
.mt-0{ margin-top:0; }
.mt-1{ margin-top:.5rem; }
.mt-2{ margin-top:1rem; }
.mt-3{ margin-top:1.5rem; }
.mt-4{ margin-top:2rem; }
.mt-5{ margin-top:2.75rem; }
.mt-6{ margin-top:3.5rem; }
.mb-3{ margin-bottom:1.5rem; }
.mb-4{ margin-bottom:2rem; }
.mb-6{ margin-bottom:3.5rem; }
.mb-8{ margin-bottom:5rem; }

/* flex + grid helpers */
.row{ display:flex; flex-wrap:wrap; gap:1rem; }
.row-center{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.grid-2{ display:grid; gap:2rem; }
.grid-3{ display:grid; gap:1.5rem; }
.grid-4{ display:grid; gap:1.5rem; }
@media(min-width:640px){
  .grid-2{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1024px){
  .grid-3{ grid-template-columns: repeat(3, 1fr); gap:2rem; }
  .grid-4{ grid-template-columns: repeat(4, 1fr); gap:2rem; }
}

/* split: text one side, media the other */
.split{ display:grid; gap:2.5rem; align-items:center; }
@media(min-width:1024px){
  .split{ grid-template-columns: repeat(12,1fr); gap:4rem; }
  .split .split-media{ grid-column: span 5; }
  .split .split-body{ grid-column: span 7; }
  .split.media-right .split-media{ grid-column: 8 / span 5; grid-row:1; }
  .split.media-right .split-body{ grid-column: 1 / span 6; grid-row:1; }
}

/* header block used above section content */
.section-head{ max-width: 42rem; margin: 0 auto 4rem; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }

/* media frames */
.frame{ position:relative; overflow:hidden; background: var(--fog); }
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame-tall{ aspect-ratio: 3 / 4; }
.frame-wide{ aspect-ratio: 16 / 10; }
.frame-square{ aspect-ratio: 1 / 1; }
.frame-contain img{ object-fit:contain; }

/* video carousel (Experience PR3 Studio) */
.video-stage{ position:relative; overflow:hidden; background:#000; }
.pr3-video-slide[hidden]{ display:none; }
.pr3-video-slide video{ width:100%; height:auto; display:block; }
.pr3-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.6);
  color:#fff; border:0; cursor:pointer;
  width:2.75rem; height:2.75rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:3;
  transition: background .35s var(--ease);
}
.pr3-arrow:hover{ background: var(--gold); color: var(--ink); }
.pr3-prev{ left:1rem; } .pr3-next{ right:1rem; }
.pr3-dots{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.75rem; z-index:3;
}
.pr3-dot{
  width:.75rem; height:.75rem; border-radius:50%;
  background: rgba(255,255,255,.4);
  border:0; padding:0; cursor:pointer;
  transition: background .35s var(--ease);
}
.pr3-dot.is-current{ background: rgba(255,255,255,.95); }

/* closing call to action band */
.cta-band{
  background: var(--pine-deep);
  color: var(--white);
  padding: var(--section-y) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band h2{
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height:1.15;
  font-weight:400;
  margin:0 auto;
  max-width:20ch;
}
.cta-band p{ color: rgba(255,255,255,.65); margin:1.5rem auto 0; max-width:34rem; line-height:1.85; }


/* ============================================================
   21 — MISSING-ASSET STATE
   Projects whose photos live on the server rather than in this
   folder. Until those files are uploaded the tile shows a quiet
   placeholder instead of a row of broken-image icons. Once the
   photos are in place this state never triggers.
   ============================================================ */
.slider-images.is-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--fog);
  border:1px solid rgba(17,17,17,.1);
}
.asset-pending{
  text-align:center;
  padding:2rem 1.5rem;
  color: rgba(17,17,17,.45);
  font-family:'Poppins', sans-serif;
}
.asset-pending .ap-mark{
  display:block;
  width:2.25rem; height:2.25rem;
  margin:0 auto 1rem;
  border:1px solid rgba(199,164,74,.6);
}
.asset-pending .ap-name{
  display:block;
  font-family:'Playfair Display', serif;
  font-size:1.15rem;
  color: rgba(17,17,17,.7);
  margin-bottom:.4rem;
}
.asset-pending .ap-note{
  display:block;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.contact-visual.is-empty{ background: var(--pine-deep); }
.contact-visual.is-empty img{ display:none; }