/* ============================================================
   ATELIER GILL HOMES — shared stylesheet
   Loaded by every page after the inline Tailwind CDN config.
   ============================================================ */
:root{
  --deep:#032A1B; --void:#04432B; --forest:#065C39; --royal:#08744A; --vivid:#17B377;
  --gold:#F2C037; --champagne:#FFE08A; --brass:#C99A21;
  --stone:#EAE3D6; --ivory:#F7F5F0;
  /* Lightest stop pulled off near-white (#FFF6D0) to #F6D268 so foil-clipped
     text keeps enough per-pixel contrast on the dark ground (was dipping ~1.1:1). */
  --foil: linear-gradient(90deg,#C99A21 0%,#F2C037 12%,#F6D268 25%,#F2C037 38%,#C99A21 50%,#F2C037 62%,#F6D268 75%,#F2C037 88%,#C99A21 100%);
  --gold-solid: linear-gradient(135deg,#FFE08A 0%,#F2C037 38%,#D9A521 68%,#F2C037 100%);
  --green-fill: linear-gradient(135deg,#04432B 0%,#0A6942 100%);
}
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{ background:var(--ivory); color:var(--void);
  font-family:Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--gold); color:var(--void); }

/* ---------- Film grain ---------- */
.grain::after{
  content:''; position:fixed; inset:-200%; z-index:100; pointer-events:none; opacity:.014;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(10) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)} 20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)} 40%{transform:translate(-5%,25%)} 50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)} 70%{transform:translate(0,15%)} 80%{transform:translate(3%,35%)} 90%{transform:translate(-10%,10%)}
}

/* ---------- Surfaces ---------- */
.sec-ivory{ background:var(--ivory); color:var(--void); }
.sec-stone{ background:var(--stone); color:var(--void); }
.sec-dark { background:var(--void); color:var(--ivory); }
.sec-dark .display{ color:var(--ivory); }

/* ---------- Gold foil ---------- */
.foil{ background:var(--foil); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:foilShift 9s linear infinite; }
@keyframes foilShift{ to{ background-position:200% center; } }
.foil-bg{ background:var(--gold-solid); }
.hairline{ height:1px; background:var(--gold-solid); }

/* ---------- Type ---------- */
.display{ font-family:"Playfair Display",Georgia,serif; font-weight:500; letter-spacing:-.01em; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.lede{ font-size:clamp(1rem,1.05vw,1.15rem); line-height:1.85; color:rgba(247,245,240,.78); }
.t-hero{ font-size:clamp(2.9rem,7.6vw,7.5rem); line-height:1.06; }
.t-lg  { font-size:clamp(2.3rem,4.8vw,4.4rem);  line-height:1.12; }
.t-md  { font-size:clamp(1.8rem,3vw,2.8rem);    line-height:1.3;  }

/* Light-section overrides (gold text on ivory fails contrast; use green) */
.on-light{ color:var(--void); }
.on-light .kicker{ color:var(--royal); }
.on-light .lede  { color:rgba(4,67,43,.78); }
.on-light .display{ color:var(--void); }
.on-light .accent{ color:var(--royal); }
.on-light .hairline{ background:var(--gold-solid); }

/* ---------- Reveal animations (visible by default; JS adds .anim) ---------- */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; padding-bottom:.16em; transition:transform 1.1s cubic-bezier(.19,1,.22,1); }
html.anim .mask > span{ transform:translateY(110%); }
html.anim .is-in .mask > span{ transform:translateY(0); }
html.anim .is-in .mask:nth-child(2) > span{ transition-delay:.09s }
html.anim .is-in .mask:nth-child(3) > span{ transition-delay:.18s }
.up{ transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
html.anim .up{ opacity:0; transform:translateY(30px); }
html.anim .is-in.up, html.anim .is-in .up{ opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s}

/* ---------- Arch motif ---------- */
.arch{ border-radius:50% 50% 6px 6px / 22% 22% 6px 6px; overflow:hidden; }

/* ---------- Home hero slideshow ---------- */
.slideshow{ position:absolute; inset:0; overflow:hidden; background:var(--void); }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.slide.on{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.14) contrast(1.04); transform:scale(1.08); }
/* Ken Burns pan+zoom while a slide is showing; alternate direction per slide */
.slide.on img{ animation:kb 8s ease-out forwards; }
.slide:nth-child(even).on img{ animation-name:kb2; }
@keyframes kb  { from{ transform:scale(1.08) translate(0,0); }      to{ transform:scale(1.18) translate(-2%,-1.5%); } }
@keyframes kb2 { from{ transform:scale(1.18) translate(-2%,-1%); }  to{ transform:scale(1.08) translate(1.5%,0); } }
.hero-media{ filter:saturate(1.2) contrast(1.05); }
.hero-veil{
  background:
    linear-gradient(100deg, rgba(3,42,27,.94) 0%, rgba(3,42,27,.88) 30%, rgba(4,67,43,.66) 48%, rgba(4,67,43,.22) 63%, rgba(4,67,43,0) 78%),
    linear-gradient(to top, rgba(3,42,27,.66) 0%, rgba(4,67,43,0) 32%);
}
.hero-glow{
  background:
    radial-gradient(80% 70% at 78% 28%, rgba(47,220,150,.30) 0%, rgba(47,220,150,0) 62%),
    radial-gradient(60% 55% at 88% 76%, rgba(242,192,55,.24) 0%, rgba(242,192,55,0) 60%);
  mix-blend-mode:soft-light;
}
@media (max-width:767px){
  .hero-veil{ background:linear-gradient(to top, rgba(3,42,27,.95) 0%, rgba(3,42,27,.88) 34%, rgba(4,67,43,.55) 56%, rgba(4,67,43,.1) 76%, rgba(4,67,43,0) 100%); }
}
.side-rail{ writing-mode:vertical-rl; letter-spacing:.42em; font-size:10px; }

/* ---------- Inner-page hero banner ---------- */
.page-hero{ position:relative; overflow:hidden; }
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.15); }
.page-hero .veil{ position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(3,42,27,.92) 0%, rgba(4,67,43,.72) 55%, rgba(4,67,43,.45) 100%); }

/* ---------- Marquee ---------- */
.marquee-band{ background:var(--gold-solid); }
.marquee{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee-item{ display:inline-flex; align-items:center; gap:2.5rem; padding-right:2.5rem; }

/* ---------- Services rows (on deep green) ---------- */
.svc{ position:relative; display:block; border-top:1px solid rgba(242,192,55,.28); }
.svc:last-child{ border-bottom:1px solid rgba(242,192,55,.28); }
.svc-inner{ position:relative; z-index:2; display:flex; align-items:center; gap:2rem; padding:2.4rem 0; transition:padding .6s cubic-bezier(.19,1,.22,1); }
.svc:hover .svc-inner{ padding-left:2rem; }
.svc-fill{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#0A6942 0%,rgba(10,105,66,.35) 65%,rgba(10,105,66,0) 100%); transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.19,1,.22,1); }
.svc:hover .svc-fill{ transform:scaleX(1); }
.svc-title{ font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:clamp(1.6rem,3.1vw,2.8rem); line-height:1.2; color:var(--ivory); transition:color .5s ease; }
.svc-desc{ max-width:28rem; font-size:15px; line-height:1.75; color:rgba(247,245,240,.72); transition:color .5s ease; }
.svc-arrow{ color:var(--gold); transform:translateX(-10px); opacity:.35; transition:all .5s cubic-bezier(.19,1,.22,1); }
.svc:hover .svc-title{ color:var(--gold); }
.svc:hover .svc-desc { color:rgba(247,245,240,.92); }
.svc:hover .svc-arrow{ transform:translateX(0); opacity:1; }

/* ---------- Work grid ---------- */
.chip{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.7rem 1.4rem; border-radius:999px; border:1px solid rgba(8,116,74,.35); color:var(--royal); background:transparent; transition:all .3s ease; cursor:pointer; }
.chip:hover{ border-color:var(--vivid); background:rgba(23,179,119,.12); }
.chip.is-active{ background:var(--void); border-color:var(--void); color:var(--ivory); }
.work-card{ display:block; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 6px rgba(4,67,43,.08); transition:transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; }
.work-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(4,67,43,.4); }
.work-shot{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.work-shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.19,1,.22,1); }
.work-card:hover .work-shot img{ transform:scale(1.07); }
.work-tag{ position:absolute; top:14px; left:14px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:.45rem .85rem; border-radius:999px; background:var(--gold-solid); color:var(--void); }
.work-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(4,67,43,.8),rgba(23,179,119,.2) 60%,transparent); opacity:0; transition:opacity .5s ease; }
.work-card:hover .work-veil{ opacity:1; }
.work-go{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; opacity:0; transition:opacity .45s ease; }
.work-card:hover .work-go{ opacity:1; }
.work-go span{ display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.5rem; background:var(--ivory); color:var(--void); border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.work-body{ padding:1.4rem 1.5rem 1.6rem; }
.work-meta{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:rgba(4,67,43,.55); }
.work-hidden{ display:none; }

/* ---------- Service detail blocks (services page) ---------- */
.svc-detail-img{ overflow:hidden; border-radius:14px; }
.svc-detail-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.19,1,.22,1); }
.svc-detail:hover .svc-detail-img img{ transform:scale(1.05); }
.tick{ display:flex; gap:.75rem; align-items:flex-start; font-size:15px; line-height:1.6; }
.tick svg{ flex:none; width:20px; height:20px; margin-top:2px; }

/* ---------- Process timeline ---------- */
.tl-line{ position:absolute; left:0; top:0; width:1px; background:rgba(4,67,43,.16); height:100%; }
.tl-fill{ position:absolute; left:0; top:0; width:1px; background:var(--gold-solid); height:0%; transition:height .1s linear; }
.tl-dot{ position:absolute; left:-4.5px; width:9px; height:9px; border-radius:9999px; background:var(--stone); border:1px solid var(--royal); }
.sec-dark .tl-line{ background:rgba(242,192,55,.25); }
.sec-dark .tl-dot{ background:var(--void); border-color:var(--gold); }

/* ---------- Buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:1.05rem 2.2rem; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; overflow:hidden; transition:color .45s ease, transform .3s ease; cursor:pointer; }
.btn::before{ content:''; position:absolute; inset:0; background:var(--gold-solid); transform:translateY(101%); transition:transform .5s cubic-bezier(.19,1,.22,1); z-index:0; }
.btn:hover::before{ transform:translateY(0); }
.btn > *{ position:relative; z-index:1; }
.btn-gold{ background:var(--gold-solid); color:var(--void); }
.btn-gold::before{ background:var(--green-fill); }
.btn-gold:hover{ color:var(--ivory); }
.btn-line{ border:1px solid rgba(242,192,55,.6); color:var(--gold); }
.btn-line:hover{ color:var(--void); }
.btn-dark{ background:var(--void); color:var(--ivory); }
.btn-dark::before{ background:var(--gold-solid); }
.btn-dark:hover{ color:var(--void); }
.btn-outline{ border:1px solid rgba(4,67,43,.4); color:var(--void); }
.btn-outline:hover{ color:var(--void); }

/* ---------- Form ---------- */
.field{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(242,192,55,.35); padding:.95rem 0; font-size:15px; color:var(--ivory); transition:border-color .35s ease; }
.field:focus{ outline:none; border-color:var(--gold); }
.field::placeholder{ color:rgba(247,245,240,.42); }
.field option{ background:var(--royal); color:var(--ivory); }
.on-light .field{ color:var(--void); border-bottom-color:rgba(4,67,43,.28); }
.on-light .field:focus{ border-color:var(--royal); }
.on-light .field::placeholder{ color:rgba(4,67,43,.42); }
.on-light .field option{ background:var(--ivory); color:var(--void); }
.on-light .form-label{ color:rgba(4,67,43,.6); }

/* Screen-reader-only (keeps heading hierarchy intact without visible chrome) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Header ---------- */
#header{ background:linear-gradient(180deg, rgba(4,67,43,.94) 0%, rgba(4,67,43,.6) 55%, rgba(4,67,43,0) 100%); border-bottom:1px solid transparent; transition:background .5s ease, border-color .5s ease; }
body.scrolled #header, body.solid-header #header{ background:rgba(4,67,43,.97); backdrop-filter:blur(14px); border-bottom-color:rgba(242,192,55,.3); }
#brand{ height:148px; transition:height .5s cubic-bezier(.19,1,.22,1); }
body.scrolled #brand, body.solid-header #brand{ height:56px; }
@media (max-width:1023px){ #brand{ height:96px; } body.scrolled #brand, body.solid-header #brand{ height:46px; } }
/* Inner pages: solid header sits OVER the dark page-hero (no ivory gap).
   The page-hero is full-bleed dark, so no top padding on the body. */
body.solid-header #brand{ height:56px; }
@media (max-width:1023px){ body.solid-header #brand{ height:46px; } }
/* Inner-page hero clears the fixed header from the inside */
body.solid-header .page-hero{ padding-top:96px; }
@media (max-width:1023px){ body.solid-header .page-hero{ padding-top:74px; } }

.nav-a{ position:relative; color:var(--ivory); }
.nav-a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--gold-solid); transition:width .45s cubic-bezier(.19,1,.22,1); }
.nav-a:hover::after,.nav-a.active::after{ width:100%; }

/* ---------- Mobile menu ---------- */
#mobileMenu{ clip-path:inset(0 0 100% 0); transition:clip-path .75s cubic-bezier(.76,0,.24,1); will-change:clip-path; }
#mobileMenu.is-open{ clip-path:inset(0 0 0 0); }
#mobileMenu.is-closing{ transition-duration:.5s; }
#mobileMenu .m-fade{ opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .7s cubic-bezier(.19,1,.22,1); }
#mobileMenu.is-open .m-fade{ opacity:1; transform:none; }
#mobileMenu.is-open .m-d1{ transition-delay:.26s } #mobileMenu.is-open .m-d2{ transition-delay:.32s }
#mobileMenu.is-open .m-d3{ transition-delay:.38s } #mobileMenu.is-open .m-d4{ transition-delay:.44s }
#mobileMenu.is-open .m-d5{ transition-delay:.50s } #mobileMenu.is-open .m-d6{ transition-delay:.56s }
#mobileMenu.is-open .m-d7{ transition-delay:.62s }
#mobileMenu.is-closing .m-fade{ transition-delay:0s; transition-duration:.22s; opacity:0; transform:translateY(14px); }
.mob-link{ position:relative; }
.mob-link::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-solid); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.19,1,.22,1) .34s; }
#mobileMenu.is-open .mob-link::after{ transform:scaleX(1); }
#mobileMenu.is-closing .mob-link::after{ transition-delay:0s; transition-duration:.22s; }
.mob-link:active{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  html.anim .up, html.anim .mask>span{ opacity:1!important; transform:none!important; }
  #mobileMenu{ clip-path:none!important; }
  #mobileMenu .m-fade{ opacity:1!important; transform:none!important; }
  #mobileMenu .mob-link::after{ transform:scaleX(1)!important; }
  html{ scroll-behavior:auto; }
}