/* ==========================================================================
   Key Creations — Luxury Artisan Design-Build Firm
   Design system: editorial, architectural, quietly luxurious.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* Color tokens — warm, desaturated, architectural. No bold color. */
  --ink:        #1B1814;
  --charcoal:   #2C2823;
  --stone:      #837A6C;
  --stone-light:#A89F8F;
  --line:       #DCD4C3;
  --line-soft:  #E9E3D6;
  --ivory:      #F4F0E8;
  --paper:      #FBF9F4;
  --paper-deep: #EFE9DC;
  --brass:      #9C7C45;
  --brass-deep: #7C611F;
  --navy:       #243040;
  --navy-deep:  #1A2535;
  --white:      #FFFFFF;

  /* Type scale */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
  --step-4:  clamp(2.7rem, 2rem + 2.8vw, 4.4rem);
  --step-5:  clamp(3.4rem, 2.4rem + 4vw, 6rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --space-7: 10rem;

  --container: 1280px;
  --container-narrow: 880px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- Typography ---------- */
h1,h2,h3,.font-display{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
h1{ font-size:var(--step-5); line-height:1.04; font-weight:500; }
h2{ font-size:var(--step-3); line-height:1.12; }
h3{ font-size:var(--step-2); line-height:1.2; }
h4{ font-size:var(--step-1); line-height:1.3; font-family:var(--font-display); font-weight:500; }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.75em;
  font-family:var(--font-body); font-size:0.74rem; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--brass-deep);
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--brass); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }

.lede{ font-size:var(--step-1); line-height:1.55; color:var(--charcoal); font-weight:300; font-family:var(--font-display); }
.text-stone{ color:var(--stone); }
.measure{ max-width:62ch; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 4rem); }
.wrap--narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 4rem); }
.section{ padding-block:var(--space-6); }
.section--tight{ padding-block:var(--space-5); }
.section--ivory{ background:var(--ivory); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink h2,.section--ink h3,.section--ink h4{ color:var(--paper); }
.section--navy{
  background:var(--navy); color:var(--paper);
  position:relative; z-index:2;
  margin-block:-3.5rem;
  padding-block:calc(var(--space-6) + 3.5rem);
}
.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--paper); }
.section--navy .eyebrow{ color:var(--brass); }
.section--navy .eyebrow::before{ background:var(--brass); }
.section--navy .pull-quote cite{ color:rgba(244,240,232,0.55); }
.section--navy .hr{ background:rgba(244,240,232,0.18); }
.section--navy + .section,
.section--navy + .section--ivory,
.section--navy + .wrap{ position:relative; z-index:1; }
.hr{ height:1px; background:var(--line); border:none; }
.section--ink .hr{ background:rgba(244,240,232,0.18); }

.grid{ display:grid; gap:var(--space-4); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}
@media (min-width:901px) and (max-width:1199px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:1.05em 2em; border:1px solid var(--ink); color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--light{ border-color:var(--paper); color:var(--paper); }
.btn--light:hover{ background:var(--paper); color:var(--ink); }
.btn--brass{ border-color:var(--brass); color:var(--ink); }
.btn--brass:hover{ background:var(--brass); color:var(--paper); border-color:var(--brass); }
.btn--text{ border:none; padding:0; letter-spacing:0.12em; }
.btn--text::after{ content:'→'; margin-left:0.5em; transition:transform .3s var(--ease); display:inline-block; }
.btn--text:hover::after{ transform:translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,249,244,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:1.3rem; }
.logo{ display:inline-flex; align-items:center; gap:0.55em; line-height:1; }
.logo__icon{ height:1.35rem; width:auto; display:block; flex-shrink:0; }
.logo__badge-nav{ height:52px; width:auto; display:block; }
.logo__key{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.55rem; letter-spacing:0.005em; color:var(--ink); }
.logo__rule{ width:1px; height:1.05em; background:var(--brass); flex-shrink:0; }
.logo__creations{ font-family:var(--font-body); font-size:0.66rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--stone); }
.nav-desktop{ display:flex; align-items:center; gap:var(--space-4); }
.nav-desktop ul{ display:flex; gap:var(--space-3); }
.nav-desktop a{
  font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--charcoal); position:relative; padding-block:0.3em;
}
.nav-desktop a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-toggle{ display:none; }
@media (max-width:980px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; padding:0.5rem; }
  .nav-toggle span{ width:24px; height:1px; background:var(--ink); display:block; transition:transform .3s, opacity .3s; }
}
.nav-mobile{
  display:none; flex-direction:column; gap:1.5rem; padding:2rem clamp(1.25rem,4vw,4rem) 3rem;
  background:var(--paper); border-bottom:1px solid var(--line-soft);
}
.nav-mobile.is-open{ display:flex; }
.nav-mobile a{ font-family:var(--font-display); font-size:1.4rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--ink);
  color:var(--paper); overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0.6;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(27,24,20,0.45) 0%, rgba(27,24,20,0.25) 40%, rgba(27,24,20,0.72) 100%);
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,240,232,0.03) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(244,240,232,0.02) 0 1px, transparent 1px 120px);
}
.hero::after{
  content:''; position:absolute; right:-10%; top:-15%; width:65%; height:130%; z-index:2;
  background:radial-gradient(ellipse at center, rgba(156,124,69,0.12), transparent 70%);
}
.hero__inner{ position:relative; z-index:3; padding-block:var(--space-6) var(--space-5); width:100%; }
.hero__split{ display:grid; grid-template-columns:1fr 1px 1fr; align-items:center; gap:0 clamp(1.5rem,3vw,3rem); overflow:visible; max-width:860px; margin-inline:0 auto; }
.hero__logo-col{ display:flex; align-items:center; justify-content:center; overflow:visible; }
.hero__badge{ width:clamp(160px,29vw,320px); max-width:none; height:auto; filter:drop-shadow(0 8px 40px rgba(0,0,0,0.6)); }
.hero__divider-line{ background:rgba(244,240,232,0.28); align-self:stretch; margin-block:3rem; }
.hero__content-col{ display:flex; flex-direction:column; }
.hero__eyebrow{ color:var(--brass); margin-bottom:var(--space-3); }
.hero__eyebrow::before{ background:var(--brass); }
.hero h1{ color:var(--paper); max-width:16ch; }
.hero__sub{ margin-top:var(--space-3); max-width:46ch; font-size:var(--step-1); font-weight:300; color:rgba(244,240,232,0.82); font-family:var(--font-display); }
.hero__cta{ margin-top:var(--space-4); display:flex; gap:1.5rem; flex-wrap:wrap; }
@media(max-width:900px){
  .hero__split{ grid-template-columns:1fr; gap:var(--space-4) 0; max-width:600px; margin-inline:auto; }
  .hero__divider-line{ display:none; }
  .hero__badge{ width:clamp(120px,40vw,200px); }
  .hero__logo-col{ justify-content:flex-start; }
  .hero h1{ font-size:var(--step-3); }
  .hero__eyebrow{ flex-wrap:wrap; }
  .hero__sub{ font-size:var(--step-0); max-width:none; }
}
.hero__meta{ position:absolute; right:clamp(1.25rem,4vw,4rem); bottom:var(--space-5); z-index:3; text-align:right; display:none; }
@media (min-width:1100px){ .hero__meta{ display:block; } }
.hero__meta .num{ font-family:var(--font-display); font-size:3rem; color:var(--brass); line-height:1; }
.hero__meta .label{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,240,232,0.6); margin-top:0.4rem; }

/* ---------- Media frame (photography placeholder system) ----------
   Drop real photography into /assets/images using the filenames noted
   in data-src; the <img> will replace this placeholder automatically.
------------------------------------------------------------------- */
.media-frame{
  position:relative; overflow:hidden; aspect-ratio:var(--ar,4/5);
  background:linear-gradient(150deg,var(--charcoal),var(--stone) 130%);
  isolation:isolate;
}
.media-frame img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); }
.media-frame img.is-loaded{ opacity:1; }
.media-frame__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:1.4rem; color:rgba(244,240,232,0.85);
}
.media-frame__placeholder::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(244,240,232,0.22);
  pointer-events:none;
}
.media-frame__tag{ font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,240,232,0.55); position:relative; z-index:1; }
.media-frame__caption{ font-family:var(--font-display); font-size:0.95rem; font-style:italic; color:rgba(244,240,232,0.9); position:relative; z-index:1; }
.media-frame.is-loaded .media-frame__placeholder{ display:none; }

/* Gallery trigger cue */
.gallery-trigger{ position:relative; display:block; }
.gallery-trigger .gallery-cue{
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  padding:0.65rem 1rem;
  background:linear-gradient(to top, rgba(17,13,10,0.78) 0%, transparent 100%);
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  color:var(--paper); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  font-family:var(--font-body); font-weight:500;
  transition:background 0.25s var(--ease);
  pointer-events:none;
}
.gallery-trigger .gallery-cue::after{
  content:'→'; font-size:0.85rem; transition:transform 0.2s var(--ease);
}
.gallery-trigger:hover .gallery-cue{ background:linear-gradient(to top, rgba(17,13,10,0.88) 0%, rgba(17,13,10,0.2) 100%); }
.gallery-trigger:hover .gallery-cue::after{ transform:translateX(3px); }

/* ---------- Cards / project tiles ---------- */
.project-card{ display:block; }
.project-card__media{ margin-bottom:1.1rem; }
.project-card__cat{ font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-deep); }
.project-card__title{ font-family:var(--font-display); font-size:1.3rem; margin-top:0.35rem; }
.project-card__loc{ font-size:0.85rem; color:var(--stone); margin-top:0.2rem; }

/* ---------- Stat strip ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ padding:var(--space-4) var(--space-2); text-align:center; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family:var(--font-display); font-size:var(--step-3); color:var(--brass-deep); }
.stat .label{ margin-top:0.5rem; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }
@media (max-width:780px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
}

/* ---------- Process timeline ---------- */
.process-list{ display:flex; flex-direction:column; }
.process-item{ display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); padding-block:var(--space-4); border-top:1px solid var(--line); }
.process-item:last-child{ border-bottom:1px solid var(--line); }
.process-item__num{ font-family:var(--font-display); font-size:var(--step-2); color:var(--line-soft); }
.process-item h3{ margin-bottom:0.6rem; }
@media (max-width:700px){
  .process-item{ grid-template-columns:1fr; gap:0.75rem; }
}

/* ---------- Marquee / logos / quote ---------- */
.pull-quote{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:var(--step-2); line-height:1.45; max-width:24ch; }
.pull-quote cite{ display:block; margin-top:var(--space-3); font-family:var(--font-body); font-style:normal; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); }

/* ---------- Forms ---------- */
.field{ margin-bottom:var(--space-3); }
.field label{ display:block; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); margin-bottom:0.6rem; }
.field input, .field textarea, .field select{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:0.75em 0.1em; color:var(--ink); font-size:1rem; transition:border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--brass); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field--required label::after{ content:' *'; color:var(--brass-deep); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(244,240,232,0.78); padding-block:var(--space-5) var(--space-4); }
.site-footer h4{ color:var(--paper); font-size:1rem; margin-bottom:1rem; }
.site-footer a:hover{ color:var(--brass); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-4); }
.footer-grid li{ margin-bottom:0.65rem; font-size:0.92rem; }
.footer-bottom{ margin-top:var(--space-5); padding-top:var(--space-3); border-top:1px solid rgba(244,240,232,0.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.78rem; color:rgba(244,240,232,0.5); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Page intro (sub-pages) ---------- */
.page-intro{ padding-top:var(--space-6); padding-bottom:var(--space-5); border-bottom:1px solid var(--line); }
.page-intro h1{ font-size:var(--step-4); max-width:18ch; margin-top:var(--space-2); }

/* ---------- Filter / portfolio ---------- */
.filter-bar{ display:flex; gap:1.75rem; flex-wrap:wrap; padding-block:var(--space-3); }
.filter-bar button{ font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); padding-bottom:0.4rem; border-bottom:1px solid transparent; }
.filter-bar button.is-active, .filter-bar button:hover{ color:var(--ink); border-color:var(--brass); }

/* ---------- Animations: reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-1{ margin-top:var(--space-1);} .mt-2{ margin-top:var(--space-2);} .mt-3{ margin-top:var(--space-3);} .mt-4{ margin-top:var(--space-4);} .mt-5{ margin-top:var(--space-5);}
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-2{ gap:1rem; }
.hide-mobile{ display:initial; }
@media (max-width:780px){ .hide-mobile{ display:none; } }

/* ---------- Lightbox ---------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(17,13,10,0.97);
  flex-direction:column; align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox__img-wrap{
  position:relative; max-width:90vw; max-height:82vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__img-wrap img{
  max-width:90vw; max-height:82vh;
  object-fit:contain; display:block;
  opacity:0; transition:opacity 0.28s var(--ease);
}
.lightbox__img-wrap img.is-loaded{ opacity:1; }
.lightbox__close{
  position:fixed; top:1.5rem; right:1.75rem;
  background:none; border:none; cursor:pointer;
  color:rgba(244,240,232,0.6); font-size:1.75rem; line-height:1;
  transition:color 0.18s; padding:0.25rem;
}
.lightbox__close:hover{ color:var(--paper); }
.lightbox__nav{
  position:fixed; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:rgba(244,240,232,0.5); font-size:2rem; padding:1rem;
  transition:color 0.18s; line-height:1;
}
.lightbox__nav:hover{ color:var(--paper); }
.lightbox__prev{ left:0.5rem; }
.lightbox__next{ right:0.5rem; }
.lightbox__counter{
  position:fixed; bottom:1.75rem; left:50%; transform:translateX(-50%);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(244,240,232,0.45); font-family:var(--font-body);
}
.lightbox__caption{
  margin-top:1rem; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--brass); font-family:var(--font-body);
}