/* ==========================================================================
   Arulmurugu Interiors — styles.css
   Warm ivory / charcoal / brass luxury editorial theme.
   ========================================================================== */

:root{
  --ivory:#F0E8D6;
  --ivory-deep:#E3D5B5;
  --paper:#F7F4ED;
  --charcoal:#221C17;
  --charcoal-soft:#4A3F35;
  --brass:#AD8342;
  --brass-deep:#8A6530;
  --brass-light:#E1CA9C;
  --line: rgba(34,28,23,0.14);
  --line-soft: rgba(34,28,23,0.08);
  --shadow: 0 30px 60px -30px rgba(34,28,23,0.35);

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,0,1);
  --dur: .9s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; scrollbar-gutter:stable; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
.no-scroll{ overflow:hidden; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--charcoal); color:var(--ivory); padding:.8em 1.2em; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 24px; }
.wrap--narrow{ max-width:840px; }

@media (min-width:900px){ .wrap{ padding:0 48px; } }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:14px;
  display:block;
}
.eyebrow--light{ color:var(--brass-light); }

.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:18px; }
.section-intro{ font-size:1.05rem; color:var(--charcoal-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  font-size:.92rem; font-weight:600; letter-spacing:.02em;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .45s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--brass{ background:var(--brass); color:var(--paper); }
.btn--brass:hover{ background:var(--brass-deep); }
.btn--outline-light{ border-color:rgba(247,241,230,.55); color:var(--ivory); }
.btn--outline-light:hover{ background:rgba(247,241,230,.12); }
.btn--outline-dark{ border-color:var(--charcoal); color:var(--charcoal); }
.btn--outline-dark:hover{ background:var(--charcoal); color:var(--ivory); }
.btn--ghost{ border-color:rgba(247,241,230,.5); color:inherit; padding:11px 22px; font-size:.85rem; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal.reveal--no-anim{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- Section wayfinding badge ---------- */
.section-badge{
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  z-index:60;
  display:none;
  flex-direction:column; align-items:flex-end; gap:2px;
  font-family:var(--font-sans);
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.section-badge.is-visible{ opacity:1; }
.section-badge__index{ font-size:.7rem; letter-spacing:.15em; color:var(--brass); font-weight:700; }
.section-badge__name{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); }
@media (min-width:1200px){ .section-badge{ display:flex; } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background-color .5s ease, box-shadow .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,12,9,.55) 0%, rgba(15,12,9,0) 100%);
  opacity:1; transition:opacity .5s ease;
}
.site-header.is-solid::before{ opacity:0; }
.site-header.is-solid,
.site-header.nav-is-open{
  background:rgba(240,232,214,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:var(--line-soft);
  box-shadow:0 8px 30px -20px rgba(34,28,23,.4);
}
.site-header__inner{
  max-width:1320px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (min-width:900px){ .site-header__inner{ padding:20px 48px; } }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:34px; height:34px; object-fit:contain; }
.brand__mark--light{ display:block; }
.brand__mark--dark{ display:none; }
.site-header.is-solid .brand__mark--light{ display:none; }
.site-header.is-solid .brand__mark--dark{ display:block; }

.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family:var(--font-serif); font-size:1.15rem; font-weight:500; color:var(--ivory); transition:color .5s ease; }
.brand__sub{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,241,230,.75); transition:color .5s ease; }
.site-header.is-solid .brand__name{ color:var(--charcoal); }
.site-header.is-solid .brand__sub{ color:var(--charcoal-soft); }

.main-nav{ display:none; align-items:center; gap:34px; font-size:.9rem; font-weight:600; }
.main-nav a{ color:var(--ivory); position:relative; padding:4px 0; transition:color .5s ease; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right .35s var(--ease);
}
.main-nav a:hover::after{ right:0; }
.main-nav a.is-current::after{ right:0; background:var(--brass-light); }
.site-header.is-solid .main-nav a.is-current::after{ background:var(--brass); }
.site-header.is-solid .main-nav a{ color:var(--charcoal); }
@media (min-width:900px){ .main-nav{ display:flex; } }

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-cta{ display:none; color:var(--ivory); }
.site-header.is-solid .header-cta{ color:var(--charcoal); border-color:var(--line); }
@media (min-width:1050px){ .header-cta{ display:inline-flex; } }

.nav-toggle{
  width:40px; height:40px; border:none; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
@media (min-width:900px){ .nav-toggle{ display:none; } }
.nav-toggle span{ width:22px; height:1.5px; background:var(--ivory); transition:all .35s ease; }
.site-header.is-solid .nav-toggle span,
.site-header.nav-is-open .nav-toggle span{ background:var(--charcoal); }
.nav-is-open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-is-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-is-open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:899px){
  .main-nav{
    position:fixed; inset:0; top:0; padding:110px 32px 40px;
    background:var(--ivory);
    display:flex; flex-direction:column; gap:26px; align-items:flex-start;
    font-size:1.6rem; font-family:var(--font-serif); font-weight:500;
    transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .main-nav a{ color:var(--charcoal) !important; }
  .main-nav.is-open{ transform:translateY(0); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--ivory);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 50%;
  will-change:transform;
  transform-origin:center bottom;
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,.25) 0%, rgba(20,16,12,.15) 35%, rgba(20,16,12,.75) 100%);
}
.hero__content{ position:relative; z-index:2; padding:0 24px 110px; max-width:820px; }
@media (min-width:900px){ .hero__content{ padding:0 48px 130px; } }

.hero__headline{
  font-size:clamp(2.3rem, 6vw, 4.2rem);
  line-height:1.06;
  margin-bottom:22px;
  max-width:16ch;
}
.hero__sub{ font-size:clamp(1rem,1.6vw,1.18rem); max-width:46ch; color:rgba(247,241,230,.92); margin-bottom:34px; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:16px; }

.scroll-cue{
  position:absolute; right:24px; bottom:34px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(247,241,230,.85); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.scroll-cue i{
  width:1px; height:46px; background:rgba(247,241,230,.5); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--brass-light);
  animation:scrollcue 2.4s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue i::after{ animation:none; top:0; } }
@media (min-width:900px){ .scroll-cue{ right:48px; } }

/* ==========================================================================
   Page Hero (compact banner used on inner pages)
   ========================================================================== */
.page-hero{
  position:relative; min-height:52vh;
  display:flex; align-items:flex-end;
  overflow:hidden; color:var(--ivory);
}
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,.5) 0%, rgba(20,16,12,.35) 45%, rgba(20,16,12,.82) 100%);
}
.page-hero__content{ position:relative; z-index:2; padding:150px 24px 64px; max-width:760px; }
@media (min-width:900px){ .page-hero__content{ padding:160px 48px 76px; } }
.page-hero__content h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.1; margin-bottom:16px; }
.page-hero__content p{ font-size:clamp(1rem,1.5vw,1.12rem); color:rgba(247,241,230,.9); max-width:56ch; }

/* ==========================================================================
   Positioning / About
   ========================================================================== */
.positioning{ padding:110px 0; background:var(--ivory); }
.positioning__grid{ display:grid; gap:56px; }
@media (min-width:900px){
  .positioning__grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; }
}
.positioning__copy h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:26px; }
.positioning__copy p{ color:var(--charcoal-soft); font-size:1.03rem; margin-bottom:18px; max-width:56ch; }

.check-list{ margin:28px 0; display:flex; flex-direction:column; gap:12px; }
.check-list li{
  position:relative; padding-left:30px; font-weight:600; font-size:.98rem;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px;
  border-radius:50%; border:1.5px solid var(--brass);
  background:radial-gradient(circle at center, var(--brass) 0 4px, transparent 4px);
}

.text-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:28px; font-weight:700; font-size:.92rem; color:var(--brass-deep);
  border-bottom:1px solid transparent; transition:border-color .3s ease, gap .3s ease;
}
.text-link:hover{ border-color:var(--brass-deep); gap:10px; }

.stat-row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px 20px;
  margin-top:36px; padding-top:32px; border-top:1px solid var(--line);
}
@media (min-width:560px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat-row strong{ display:block; font-family:var(--font-serif); font-size:1.5rem; color:var(--charcoal); }
.stat-row span{ font-size:.78rem; letter-spacing:.04em; color:var(--charcoal-soft); }

.positioning__media{ border-radius:6px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.positioning__media img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio{ padding:100px 0 120px; background:var(--paper); border-top:1px solid var(--line-soft); }

.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;
}
.filter-btn{
  border:1px solid var(--line); background:transparent; color:var(--charcoal-soft);
  padding:10px 20px; border-radius:999px; font-size:.84rem; font-weight:600;
  transition:all .3s ease;
}
.filter-btn:hover{ border-color:var(--brass); color:var(--charcoal); }
.filter-btn.is-active{ background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory); }

.portfolio-grid{
  column-count:1; column-gap:22px;
}
@media (min-width:640px){ .portfolio-grid{ column-count:2; } }
@media (min-width:1000px){ .portfolio-grid{ column-count:3; } }
@media (min-width:1400px){ .portfolio-grid{ column-count:4; } }

.project-card{
  break-inside:avoid; margin:0 0 22px; display:block; cursor:pointer;
  transition:transform .2s ease;
}
.project-card.is-hidden{ display:none; }
.project-card:focus-visible{ outline:2px solid var(--brass); outline-offset:4px; }

.project-card__frame{
  position:relative; overflow:hidden; border-radius:4px; background:var(--ivory-deep);
}
.project-card__frame img{
  width:100%; height:auto; display:block;
  transition:transform .7s var(--ease);
}
.project-card:hover .project-card__frame img{ transform:scale(1.06); }

.project-card--big .project-card__frame img,
.project-card--wide .project-card__frame img{ aspect-ratio:4/3; object-fit:cover; }

.project-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,16,12,.82) 0%, rgba(20,16,12,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  padding:20px;
  opacity:0; transition:opacity .4s ease;
}
.project-card:hover .project-card__overlay,
.project-card:focus-visible .project-card__overlay{ opacity:1; }
.project-card__cat{ color:var(--brass-light); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.project-card__title{ color:var(--ivory); font-family:var(--font-serif); font-size:1.1rem; }

.portfolio-cta{
  margin-top:56px; padding:48px 36px;
  background:var(--charcoal); color:var(--ivory); border-radius:8px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.portfolio-cta h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); max-width:26ch; }
.portfolio-cta .eyebrow{ margin-bottom:8px; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding:110px 0; background:var(--ivory); }
.services-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr; }
@media (min-width:700px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

.service-card{ background:var(--ivory); padding:40px 32px; transition:background .35s ease; }
.service-card:hover{ background:var(--paper); }
.service-card__num{ font-family:var(--font-serif); font-size:.85rem; color:var(--brass); }
.service-card h3{ font-size:1.22rem; margin:14px 0 12px; }
.service-card p{ color:var(--charcoal-soft); font-size:.95rem; }

/* ==========================================================================
   Philosophy (split panel)
   ========================================================================== */
.philosophy{ display:grid; grid-template-columns:1fr; background:var(--charcoal); color:var(--ivory); }
@media (min-width:900px){ .philosophy{ grid-template-columns:1fr 1fr; } }

.philosophy__media{ position:relative; min-height:360px; overflow:hidden; }
.philosophy__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

.philosophy__copy{ display:flex; align-items:center; padding:90px 24px; }
@media (min-width:900px){ .philosophy__copy{ padding:90px 64px; } }
.philosophy__inner{ max-width:520px; }
.philosophy__inner .eyebrow{ color:var(--brass-light); }
.philosophy__inner h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:22px; }
.philosophy__inner p{ color:rgba(247,241,230,.82); font-size:1.02rem; margin-bottom:16px; }

/* ==========================================================================
   Process timeline
   ========================================================================== */
.process{ padding:110px 0 100px; background:var(--paper); }

.timeline{ position:relative; display:flex; flex-direction:column; gap:44px; margin-top:20px; }
.timeline__line{ display:none; }

.timeline__step{ position:relative; padding-left:34px; opacity:.4; transition:opacity .5s ease; }
.timeline__step::before{
  content:""; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line); transition:all .4s ease;
}
.timeline__step.is-active{ opacity:1; }
.timeline__step.is-active::before{ background:var(--brass); border-color:var(--brass); }
.timeline__step::after{
  content:""; position:absolute; left:5px; top:22px; bottom:-44px; width:1px; background:var(--line);
}
.timeline__step:last-child::after{ display:none; }
.timeline__num{ font-family:var(--font-serif); color:var(--brass); font-size:.85rem; }
.timeline__step h3{ font-size:1.3rem; margin:10px 0 10px; }
.timeline__step p{ color:var(--charcoal-soft); max-width:42ch; }

@media (min-width:900px){
  .timeline{ flex-direction:row; gap:0; align-items:flex-start; }
  .timeline__line{
    display:block; position:absolute; left:0; right:0; top:6px; height:2px; background:var(--line);
  }
  .timeline__line-fill{
    display:block; height:100%; width:var(--fill,0%); background:var(--brass);
    transition:width .6s var(--ease);
  }
  .timeline__step{ flex:1; padding:34px 24px 0 0; }
  .timeline__step::before{ top:-30px; left:0; }
  .timeline__step::after{ display:none; }
}

.process-cta{ margin-top:56px; text-align:center; }

/* ==========================================================================
   Trust / Materials
   ========================================================================== */
.trust{ padding:110px 0; background:var(--ivory-deep); }
.materials-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:640px){ .materials-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .materials-grid{ grid-template-columns:repeat(4,1fr); } }

.material-card{
  background:var(--paper); padding:32px 26px; border-radius:6px; border:1px solid var(--line-soft);
}
.material-card h3{ font-size:1.1rem; margin-bottom:10px; }
.material-card p{ color:var(--charcoal-soft); font-size:.92rem; }

.trust-strip{
  margin-top:48px; padding-top:36px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:space-between;
}
.trust-strip span{ font-family:var(--font-serif); font-size:1.02rem; color:var(--charcoal-soft); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding:110px 0; background:var(--paper); }
.accordion{ border-top:1px solid var(--line); }
.accordion__item{ border-bottom:1px solid var(--line); padding:26px 0; }
.accordion__item summary{
  cursor:pointer; list-style:none; font-family:var(--font-serif); font-size:1.15rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.accordion__item summary::-webkit-details-marker{ display:none; }
.accordion__item summary::after{
  content:"+"; font-size:1.4rem; color:var(--brass); flex-shrink:0; transition:transform .3s ease;
}
.accordion__item[open] summary::after{ content:"\2212"; }
.accordion__item p{ margin-top:16px; color:var(--charcoal-soft); max-width:60ch; }

/* ==========================================================================
   Final CTA / Contact
   ========================================================================== */
.final-cta{ padding:110px 0 120px; background:var(--ivory); }
.final-cta__grid{ display:grid; gap:56px; }
@media (min-width:980px){ .final-cta__grid{ grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start; } }

.final-cta__image{ position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
.final-cta__image img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.final-cta__quote{
  position:absolute; left:0; right:0; bottom:0; padding:30px 26px;
  background:linear-gradient(0deg, rgba(20,16,12,.85), rgba(20,16,12,0));
  color:var(--ivory); font-family:var(--font-serif); font-style:italic; font-size:1.08rem; line-height:1.5;
}
@media (max-width:979px){ .final-cta__image{ display:none; } }

.final-cta__content h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin:8px 0 18px; }
.final-cta__body{ color:var(--charcoal-soft); font-size:1.02rem; max-width:56ch; margin-bottom:32px; }

.quick-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:40px; }
.quick-contact__item{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--line); border-radius:6px; transition:border-color .3s ease, background .3s ease;
  min-width:0;
}
.quick-contact__item:hover{ border-color:var(--brass); background:var(--paper); }
.quick-contact__label{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-deep); font-weight:700; }
.quick-contact__value{ font-weight:600; font-size:.94rem; overflow-wrap:anywhere; word-break:break-word; }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-row label,
.contact-form > label{ display:flex; flex-direction:column; gap:8px; font-size:.85rem; font-weight:600; color:var(--charcoal-soft); }
.form-row--full{ display:flex; }

input, select, textarea{
  font-family:var(--font-sans); font-size:.96rem; color:var(--charcoal);
  padding:13px 15px; border:1px solid var(--line); border-radius:5px; background:var(--paper);
  transition:border-color .3s ease;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--brass); }
textarea{ resize:vertical; min-height:110px; font-family:inherit; }

.contact-form .btn{ align-self:flex-start; margin-top:6px; }
.form-note{ font-size:.8rem; color:var(--charcoal-soft); opacity:.85; max-width:52ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--charcoal); color:rgba(247,241,230,.85); padding-top:80px; }
.site-footer__grid{
  display:grid; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(247,241,230,.14);
}
@media (min-width:820px){ .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }

.site-footer__mark{ width:38px; height:38px; margin-bottom:16px; }
.site-footer__brand h3{ color:var(--ivory); font-size:1.3rem; margin-bottom:14px; }
.site-footer__brand p{ max-width:38ch; font-size:.92rem; line-height:1.7; }

.site-footer__links{ display:flex; flex-direction:column; gap:14px; font-size:.92rem; }
.site-footer__links a:hover{ color:var(--brass-light); }

.site-footer__contact{ display:flex; flex-direction:column; gap:12px; font-size:.92rem; }
.site-footer__contact a:hover{ color:var(--brass-light); }

.site-footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  padding:28px 24px; font-size:.78rem; color:rgba(247,241,230,.55);
}
@media (min-width:900px){ .site-footer__bottom{ padding:28px 48px; } }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,12,9,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .35s ease;
  padding:24px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__figure{ max-width:min(900px,90vw); max-height:86vh; text-align:center; }
.lightbox__figure img{ max-height:74vh; width:auto; margin:0 auto; border-radius:4px; }
.lightbox__figure figcaption{ margin-top:18px; color:var(--ivory); }
.lightbox__figure figcaption span{ display:block; }
#lightboxTitle{ font-family:var(--font-serif); font-size:1.2rem; }
.lightbox__category{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-light); margin-top:4px; }

.lightbox__close{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(247,241,230,.3); background:transparent; color:var(--ivory); font-size:1.6rem; line-height:1;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(247,241,230,.3); background:transparent; color:var(--ivory); font-size:1.8rem;
}
.lightbox__nav--prev{ left:20px; } .lightbox__nav--next{ right:20px; }
@media (max-width:640px){
  .lightbox__nav{ width:40px; height:40px; font-size:1.4rem; }
  .lightbox__nav--prev{ left:8px; } .lightbox__nav--next{ right:8px; }
}