/* ============================================================
   JCA Architecture + Design — Site stylesheet  (v2 · cinematic)
   Direction: "Classic Luxury" refinement meets "Gallery" cinema.
   Full-viewport imagery, text overlaid. Cormorant Garamond + Mulish.
   ============================================================ */

:root{
  --green:#16312a; --green2:#0f241f; --green3:#1c3c33;
  --ivory:#f4f0e6; --paper:#fbf9f3; --paper2:#f6f2e9;
  --brass:#b08d4f; --brass-lt:#c9a25e; --gold:#e7d4ac;
  --ink:#23271f; --mute:#6f7269; --line:#e2dccc; --line-d:rgba(255,255,255,.14);
  --maxw:1200px; --maxw-wide:1440px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Mulish',sans-serif; font-weight:300; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.pf{font-family:'Cormorant Garamond',serif}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
.wrap-wide{max-width:var(--maxw-wide); margin:0 auto; padding:0 48px}
.brass{color:var(--brass)}
.label{font-size:11px; letter-spacing:.36em; text-transform:uppercase; color:var(--brass)}
.label.on-dark{color:var(--gold)}
.rule{display:inline-flex; align-items:center; gap:14px}
.rule::before,.rule::after{content:""; height:1px; width:38px; background:currentColor; opacity:.55}

/* grain + reveal */
.grain{position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-reveal]{opacity:0; transform:translateY(30px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1; transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* buttons */
.btn{display:inline-block; background:var(--brass); color:#23271f; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:600; padding:17px 40px; transition:.3s; cursor:pointer; border:none}
.btn:hover{background:var(--gold)}
.btn.outline{background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff}
.btn.outline:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn.dark{background:var(--green); color:var(--gold)}
.btn.dark:hover{background:var(--green2)}
.btn.ghost{background:transparent; border:1px solid var(--brass); color:var(--brass)}
.btn.ghost:hover{background:var(--brass); color:#fff}

/* ---------- top bar ---------- */
.topbar{background:var(--green2); color:var(--ivory); font-size:12px; letter-spacing:.12em; position:relative; z-index:60}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 40px}
.topbar a{opacity:.85; transition:.25s}
.topbar a:hover{opacity:1; color:var(--brass)}

/* ---------- header / nav (transparent over hero, solid on scroll) ---------- */
header.site{position:fixed; top:0; left:0; right:0; z-index:70; transition:background .4s, box-shadow .4s, border-color .4s;
  background:transparent; border-bottom:1px solid transparent}
header.site nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:88px; max-width:var(--maxw-wide); margin:0 auto; padding:0 48px}
header.site .navlinks a, header.site .brand .name{color:#f4f0e6}
header.site .brand .sub{color:rgba(244,240,230,.7)}
header.site.solid{background:rgba(251,249,243,.94); backdrop-filter:blur(12px); border-bottom-color:var(--line); box-shadow:0 6px 30px rgba(20,30,25,.06)}
header.site.solid .navlinks a, header.site.solid .brand .name{color:var(--ink)}
header.site.solid .brand .sub{color:var(--mute)}
header.site.solid .burger span{background:var(--ink)}
.navlinks{display:flex; gap:34px; font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.navlinks a{position:relative; transition:.25s; padding:4px 0}
.navlinks a:hover, .navlinks a.active{color:var(--brass) !important}
.navlinks a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--brass)}
.navlinks.right{justify-content:flex-end}
.brand{text-align:center}
.brand .name{font-family:'Cormorant Garamond',serif; font-size:28px; letter-spacing:.02em; line-height:1; transition:color .4s}
.brand .sub{font-size:9px; letter-spacing:.42em; text-transform:uppercase; margin-top:3px; transition:color .4s}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px}
.burger span{width:26px; height:2px; background:#f4f0e6; transition:.3s}
.mobile-menu{position:fixed; inset:0; z-index:95; background:var(--green); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .4s}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu a{font-family:'Cormorant Garamond',serif; font-size:36px; padding:10px}
.mobile-menu a:hover{color:var(--brass)}
.mobile-menu .close{position:absolute; top:24px; right:34px; font-size:28px; font-family:'Mulish'; font-weight:300}

/* =========================================================
   CINEMATIC FULL-VIEWPORT PANELS  (the core visual language)
   ========================================================= */
.cine{position:relative; min-height:100vh; display:flex; overflow:hidden; color:var(--ivory)}
.cine .bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.cine .scrim{position:absolute; inset:0; z-index:1}
/* scrim variants */
.scrim-bl{background:linear-gradient(115deg,rgba(9,16,13,.82) 0%,rgba(9,16,13,.42) 42%,rgba(9,16,13,.12) 72%)}
.scrim-br{background:linear-gradient(245deg,rgba(9,16,13,.82) 0%,rgba(9,16,13,.42) 42%,rgba(9,16,13,.12) 72%)}
.scrim-c{background:radial-gradient(ellipse at center,rgba(9,16,13,.35) 0%,rgba(9,16,13,.78) 100%)}
.scrim-btm{background:linear-gradient(180deg,rgba(9,16,13,.25) 0%,rgba(9,16,13,.05) 40%,rgba(9,16,13,.82) 100%)}
.cine .cell{position:relative; z-index:2; width:100%; max-width:var(--maxw-wide); margin:0 auto; padding:0 48px;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:12vh}
.cine.center .cell{justify-content:center; align-items:center; text-align:center; padding-bottom:0}
.cine.mid .cell{justify-content:center}
.cine .inner{max-width:640px}
.cine.wide-inner .inner{max-width:820px}
.cine.right .cell{align-items:flex-end}
.cine.right .inner{text-align:right}
.cine.center .inner{max-width:900px}

.cine h1{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(52px,8vw,118px); line-height:1.02; margin:24px 0}
.cine h1 em, .cine h2 em{font-style:italic; color:var(--gold)}
.cine h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(38px,6vw,88px); line-height:1.04; margin:20px 0}
.cine p.lede{max-width:540px; color:#e8e4d8; font-size:clamp(16px,1.4vw,19px); margin:0 0 34px}
.cine.right p.lede, .cine.center p.lede{margin-left:auto; margin-right:auto}
.cine.right p.lede{margin-right:0}
.cine .cta-row{display:flex; gap:14px; flex-wrap:wrap}
.cine.center .cta-row, .cine.right .cta-row{justify-content:center}
.cine.right .cta-row{justify-content:flex-end}

/* zoom on reveal for panel backgrounds */
.cine .bg{transform:scale(1.07); transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.cine.in-view .bg{transform:scale(1)}

/* fixed / parallax only where it behaves */
@media(min-width:1001px){
  .cine.fixed .bg{background-attachment:fixed; transform:none}
}

/* scroll cue */
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:rgba(244,240,230,.72);
  display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-cue i{width:1px; height:36px; background:var(--brass); display:block; transform-origin:top; animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3); opacity:.4}50%{transform:scaleY(1); opacity:1}}

/* HERO first-load fade + slow zoom */
.hero .bg{animation:heroZoom 16s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}

/* project panel overlay meta (portfolio + home features) */
.pj-num{font-family:'Cormorant Garamond',serif; font-size:clamp(20px,2vw,26px); color:var(--gold); letter-spacing:.04em}
.pj-loc{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-lt); margin-top:8px}
.pj-spec{display:flex; gap:36px; margin-top:26px; border-top:1px solid rgba(255,255,255,.24); padding-top:18px}
.cine.right .pj-spec{justify-content:flex-end}
.pj-spec .k{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,240,230,.6)}
.pj-spec .v{font-family:'Cormorant Garamond',serif; font-size:20px; margin-top:5px; color:var(--ivory)}

/* =========================================================
   LIGHT / DARK CONTENT SECTIONS  (breathers)
   ========================================================= */
section.pad{padding:130px 0}
.center-head{text-align:center; max-width:720px; margin:0 auto 66px}
.center-head h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(34px,4.4vw,58px); margin:18px 0; line-height:1.1}
.center-head p{color:var(--mute)}
.on-green{background:var(--green); color:var(--ivory)}
.on-green .center-head p{color:#cdd2c6}
.on-ivory{background:var(--ivory)}

/* services */
.srow{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12)}
.srow .s{background:var(--green); padding:52px 38px; text-align:center; transition:.35s}
.srow .s:hover{background:var(--green3)}
.srow .s .pf{font-size:42px; color:var(--brass)}
.srow .s h4{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px; margin:16px 0 10px; color:var(--ivory)}
.srow .s p{color:#c3c8bc; font-size:15px}

/* stats overlaid on image */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; width:100%; max-width:var(--maxw); margin:0 auto}
.stat-row .n{font-family:'Cormorant Garamond',serif; font-size:clamp(48px,6vw,86px); color:var(--gold); line-height:1}
.stat-row .k{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,240,230,.72); margin-top:14px}

/* =========================================================
   PORTFOLIO gallery = stack of cinematic panels (in HTML via .cine)
   Town ticker
   ========================================================= */
.ticker{background:var(--green); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
  overflow:hidden; white-space:nowrap; padding:30px 0}
.ticker-row{display:inline-block; animation:slide 44s linear infinite}
.ticker-row span{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:30px; padding:0 32px; color:#9aa092}
.ticker-row span b{color:var(--brass); font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* =========================================================
   ABOUT — team
   ========================================================= */
.principles{background:var(--green); color:var(--ivory)}
.plist{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:20px}
.plist .p .no{font-family:'Cormorant Garamond',serif; font-size:38px; color:var(--brass)}
.plist .p h4{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; margin:12px 0 12px; color:var(--ivory)}
.plist .p p{color:#c3c8bc; font-size:15px}

.team{background:var(--paper)}
.tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
.member .photo{aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--green);
  display:grid; place-items:center; border:1px solid var(--line)}
.member .photo img{width:100%; height:100%; object-fit:cover}
.member .photo .mono{font-family:'Cormorant Garamond',serif; font-size:66px; color:var(--brass); opacity:.85}
.member h4{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:24px; margin:18px 0 2px}
.member .role{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.member .bio{color:var(--mute); font-size:14px; margin-top:12px}

.story-copy{max-width:760px; margin:0 auto; text-align:center}
.story-copy h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(30px,4vw,52px); line-height:1.14; margin-bottom:24px}
.story-copy h2 em{font-style:italic; color:var(--brass)}
.story-copy p{color:var(--mute); margin-top:18px; font-size:17px}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-wrap{display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:start}
.contact-info h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(30px,3.6vw,46px); margin:16px 0 22px; line-height:1.14}
.contact-info h2 em{font-style:italic; color:var(--brass)}
.contact-info p.lead{color:var(--mute); margin-bottom:34px; max-width:42ch}
.info-block{border-top:1px solid var(--line); padding:22px 0}
.info-block .k{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:8px}
.info-block a,.info-block p{font-size:16px; color:var(--ink); line-height:1.8}
.info-block a:hover{color:var(--brass)}

form.inquiry{background:var(--paper2); border:1px solid var(--line); padding:48px}
form.inquiry .fh{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:28px; margin-bottom:6px}
form.inquiry .fs{color:var(--mute); font-size:14px; margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:8px}
.field label .req{color:var(--brass)}
.field input,.field select,.field textarea{width:100%; background:var(--paper); border:1px solid var(--line);
  padding:14px 16px; font-family:'Mulish',sans-serif; font-size:15px; color:var(--ink); transition:.25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(176,141,79,.12)}
.field textarea{resize:vertical; min-height:120px}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:0}
.field.two > div{margin-bottom:20px}
.form-note{font-size:12px; color:var(--mute); margin-top:10px}
.form-status{display:none; padding:16px 18px; margin-bottom:20px; font-size:14px; border-left:3px solid var(--brass); background:rgba(176,141,79,.1)}
.form-status.show{display:block}
.form-status.ok{border-color:#3f7d4e; background:rgba(63,125,78,.1)}
.form-status.err{border-color:#a1443a; background:rgba(161,68,58,.1)}
.map{border:1px solid var(--line); width:100%; height:380px; filter:grayscale(.35) contrast(1.02)}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{background:var(--green2); color:#aeb4a6; padding:78px 0 36px}
.foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.12)}
.foot .name{font-family:'Cormorant Garamond',serif; font-size:27px; color:var(--ivory)}
.foot h5{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:14px}
.foot a,.foot p{display:block; font-size:14px; line-height:2; color:#cdd2c6}
.foot a:hover{color:var(--brass)}
.copy{padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; letter-spacing:.1em; color:#7d8378}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1000px){
  .foot{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .plist{grid-template-columns:1fr; gap:34px}
  .contact-wrap{grid-template-columns:1fr; gap:44px}
  .stat-row{grid-template-columns:repeat(2,1fr); gap:44px}
  .srow{grid-template-columns:1fr}
}
@media(max-width:900px){
  .topbar{display:none}
  header.site nav{grid-template-columns:1fr auto; height:70px; padding:0 24px}
  .navlinks{display:none}
  .burger{display:flex}
  .brand{text-align:left}
  section.pad{padding:80px 0}
  .cine{min-height:92vh}
  .cine .cell{padding:0 24px 12vh}
  .cine.right .cell{align-items:flex-start}
  .cine.right .inner{text-align:left}
  .cine.right .pj-spec, .cine.right .cta-row{justify-content:flex-start}
  .pj-spec{gap:26px}
  .field.two{grid-template-columns:1fr; gap:0}
  form.inquiry{padding:30px}
}
@media(max-width:560px){
  .wrap,.wrap-wide{padding:0 22px}
  .tgrid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr; gap:34px}
  .copy{flex-direction:column}
  .pj-spec{flex-wrap:wrap; gap:18px 26px}
}