/* ==========================================================================
   AUREN INTERIORS — Core Stylesheet
   Architectural, warm, editorial. Built on Bootstrap 5 utilities.
   ========================================================================== */

:root{
  --stone:      #E8E1D6;
  --charcoal:   #252525;
  --copper:     #A86A4A;
  --taupe:      #8B8177;
  --paper:      #F7F5F1;
  --white:      #FFFFFF;
  --ink:        #171717;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Manrope', sans-serif;

  --container-pad: 6vw;
  --rule: 1px solid rgba(37,37,37,0.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  color: var(--ink);
}

h1{ font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2{ font-size: clamp(2rem, 4.2vw, 3.6rem); }
h3{ font-size: clamp(1.4rem, 2.4vw, 2rem); }

p{ line-height: 1.75; color: var(--charcoal); }

a{ color: inherit; text-decoration: none; }

.container-fluid.px-custom, .container.px-custom{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---------- Utility type ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 1px;
  background: var(--copper);
  display: inline-block;
}

.serif-italic{ font-style: italic; font-weight: 400; }

.text-copper{ color: var(--copper) !important; }
.text-taupe{ color: var(--taupe) !important; }
.bg-charcoal{ background: var(--charcoal) !important; color: var(--stone); }
.bg-ink{ background: var(--ink) !important; color: var(--stone); }
.bg-stone{ background: var(--stone) !important; }
.bg-paper{ background: var(--paper) !important; }

.hairline{ border-top: var(--rule); }
.hairline-b{ border-bottom: var(--rule); }
.vr-hairline{ border-left: var(--rule); }

/* ---------- Buttons ---------- */
.btn-auren{
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  transition: color .45s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn-auren::before{
  content:"";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  z-index: -1;
}
.btn-auren:hover{ color: var(--stone); }
.btn-auren:hover::before{ transform: translateY(0); }
.btn-auren i{ transition: transform .45s var(--ease); }
.btn-auren:hover i{ transform: translateX(4px); }

.btn-auren-light{
  border-color: rgba(247,245,241,0.55);
  color: var(--paper);
}
.btn-auren-light::before{ background: var(--paper); }
.btn-auren-light:hover{ color: var(--ink); }

.btn-auren-copper{
  border-color: var(--copper);
  color: var(--copper);
}
.btn-auren-copper::before{ background: var(--copper); }
.btn-auren-copper:hover{ color: var(--white); }

.text-link{
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 6px;
}
.text-link::after{
  content:"";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform .5s var(--ease);
  opacity: .55;
}
.text-link:hover::after{ transform: scaleX(1); opacity: 1; }

/* ---------- Logo ---------- */
.brand-mark{ display:flex; align-items:center; gap: 0.85rem; }
.brand-mark svg{ height: 34px; width: auto; display:block; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--ink);
}
.brand-word small{
  display:block;
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  color: var(--taupe);
  font-weight: 600;
  margin-top: 2px;
}

/* ---------- Navigation ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 1.6rem var(--container-pad);
  display:flex; align-items:center; justify-content:space-between;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(247,245,241,0.92);
  backdrop-filter: blur(10px);
  padding-top: 1rem; padding-bottom: 1rem;
  border-bottom-color: rgba(37,37,37,0.12);
}
.site-header.theme-light .brand-word,
.site-header.theme-light .nav-link,
.site-header.theme-light .brand-word small{ color: var(--paper); }
.site-header.theme-light .brand-mark svg .ink{ stroke: var(--paper); }
.site-header.theme-light .brand-mark svg .copper{ stroke: var(--copper); }
.site-header.is-scrolled.theme-light{ background: rgba(23,23,23,0.88); border-bottom-color: rgba(247,245,241,0.14); }
.site-header.is-scrolled.theme-light .brand-word,
.site-header.is-scrolled.theme-light .nav-link{ color: var(--paper); }

.main-nav{ display:flex; align-items:center; gap: 2.4rem; }
.nav-link{
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }
.nav-link.active{ color: var(--copper); }

.nav-toggle{
  display:flex; flex-direction:column; gap:6px; width:26px; background:none; border:0; padding:0; cursor:pointer;
}
.nav-toggle span{ height:1px; width:100%; background: currentColor; transition: all .35s var(--ease); }

/* Mobile off-canvas */
.mobile-nav{
  position: fixed; inset: 0; z-index: 1100;
  background: var(--ink); color: var(--stone);
  display:flex; flex-direction:column; justify-content:center;
  padding: 3rem var(--container-pad);
  transform: translateX(100%);
  transition: transform .55s var(--ease);
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav a{
  font-family: var(--font-display);
  font-size: 2.4rem;
  display:block;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(247,245,241,0.14);
  color: var(--stone);
}
.mobile-nav-close{
  position:absolute; top: 1.9rem; right: var(--container-pad);
  background:none; border:0; color: var(--stone); font-size: 1.6rem; cursor:pointer;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  background-size: cover; background-position: center;
  transform: scale(1.08);
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(23,23,23,0.35) 0%, rgba(23,23,23,0.15) 40%, rgba(23,23,23,0.75) 100%);
}
.hero-content{ position:relative; z-index:2; padding: 0 var(--container-pad) 5.5rem; width:100%; }
.hero h1{ color: var(--paper); max-width: 15ch; }
.hero .lede{ color: rgba(247,245,241,0.82); max-width: 42ch; font-size: 1.08rem; }

.scroll-cue{
  position:absolute; z-index:2; right: var(--container-pad); bottom: 2.4rem;
  display:flex; flex-direction:column; align-items:center; gap: .6rem;
  color: rgba(247,245,241,0.75);
  font-size: 0.68rem; letter-spacing: .22em; text-transform: uppercase;
}
.scroll-cue .line{ width:1px; height:52px; background: rgba(247,245,241,0.4); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--copper);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue{ to{ top:100%; } }

/* small page hero (interior pages) */
.page-hero{
  padding: 11rem var(--container-pad) 4.5rem;
  background: var(--stone);
}
.page-hero .eyebrow{ margin-bottom: 1.1rem; }

/* ---------- Sections ---------- */
section{ position: relative; }
.section-pad{ padding: 7.5rem 0; }
.section-pad-sm{ padding: 4.5rem 0; }

.section-head{ margin-bottom: 3.5rem; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .12s; }
.reveal-delay-2{ transition-delay: .24s; }
.reveal-delay-3{ transition-delay: .36s; }

/* image reveal wipe */
.img-reveal{ position:relative; overflow:hidden; display:block; }
.img-reveal img,
.img-reveal .visual{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: scale(1.12);
  transition: transform 1.2s var(--ease);
}
.img-reveal::after{
  content:"";
  position:absolute; inset:0; background: var(--stone);
  transform: scaleX(1); transform-origin: right;
  transition: transform .9s var(--ease);
  z-index: 2;
}
.img-reveal.is-visible::after{ transform: scaleX(0); }
.img-reveal.is-visible img,
.img-reveal.is-visible .visual{ transform: scale(1); }
.img-reveal:hover img,
.img-reveal:hover .visual{ transform: scale(1.05); }

/* ---------- Architectural "visual" placeholders (in lieu of photography) ---------- */
.visual{
  position: relative;
  width: 100%; height: 100%;
  background: var(--stone);
  overflow: hidden;
}
.visual .visual-cap{
  position:absolute; left: 1.1rem; bottom: 1rem; z-index: 4;
  font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.visual .visual-cap span{ display:block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; letter-spacing:0; text-transform:none; font-weight:500; margin-top:.15rem; }
.visual svg{ position:absolute; inset:0; width:100%; height:100%; }

.visual.v-stone{ background: linear-gradient(155deg, #EFE9DF 0%, var(--stone) 55%, #DED4C4 100%); }
.visual.v-charcoal{ background: linear-gradient(155deg, #33322F 0%, var(--charcoal) 55%, #1c1c1a 100%); color: var(--stone); }
.visual.v-copper{ background: linear-gradient(155deg, #C68B67 0%, var(--copper) 60%, #8a5138 100%); color: var(--paper); }
.visual.v-taupe{ background: linear-gradient(155deg, #A79E92 0%, var(--taupe) 55%, #6f665c 100%); color: var(--paper); }
.visual.v-paper{ background: linear-gradient(155deg, #FFFFFF 0%, var(--paper) 55%, #EAE6DE 100%); }
.visual.v-ink{ background: linear-gradient(155deg, #262624 0%, var(--ink) 55%, #0c0c0b 100%); color: var(--stone); }

.visual.on-dark .visual-cap{ color: var(--paper); }
.visual.on-light .visual-cap{ color: var(--ink); }

/* line-drawing motifs, layered as pseudo-elements so markup stays simple */
.visual.p-grid::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 15%),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12.5%);
  opacity: 0.09;
}
.visual.p-plan::before{
  content:""; position:absolute; inset:12% 10%;
  border: 1px solid currentColor; opacity: .28;
}
.visual.p-plan::after{
  content:""; position:absolute; left:12%; right:38%; top:12%; bottom:52%;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .28;
}
.visual.p-arc::before{
  content:""; position:absolute; width: 140%; height: 140%; right: -40%; bottom: -40%;
  border: 1px solid currentColor; border-radius: 50%; opacity: .22;
}
.visual.p-arc::after{
  content:""; position:absolute; width: 90%; height: 90%; right: -15%; bottom: -15%;
  border: 1px solid currentColor; border-radius: 50%; opacity: .18;
}
.visual.p-diag::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 9%);
  opacity: .1;
}
.visual.p-column::before{
  content:""; position:absolute; top:8%; bottom:8%; left:22%; width:1px; background: currentColor; opacity:.3;
}
.visual.p-column::after{
  content:""; position:absolute; top:8%; bottom:8%; left:50%; width:1px; background: currentColor; opacity:.3; box-shadow: 28% 0 0 0 currentColor, 56% 0 0 0 currentColor;
}
.visual.p-cross::before{
  content:""; position:absolute; left:50%; top:15%; bottom:15%; width:1px; background: currentColor; opacity:.25;
}
.visual.p-cross::after{
  content:""; position:absolute; top:50%; left:15%; right:15%; height:1px; background: currentColor; opacity:.25;
}

.ratio-portrait{ aspect-ratio: 3/4; }
.ratio-landscape{ aspect-ratio: 4/3; }
.ratio-wide{ aspect-ratio: 16/9; }
.ratio-square{ aspect-ratio: 1/1; }

/* ---------- Intro / asymmetric ---------- */
.intro-figure{ position: relative; }
.intro-figure .frame-num{
  position:absolute; bottom: -1.6rem; right: -1rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  color: var(--stone);
  z-index: -1;
  line-height: 1;
}

/* ---------- Project cards ---------- */
.project-card{ display:block; position:relative; }
.project-card .cap{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: var(--rule);
}
.project-card h3{ margin:0; font-size: clamp(1.3rem,1.8vw,1.7rem); }
.project-card .meta{ font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.project-card .view{
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight:600; color: var(--copper);
  display:inline-flex; align-items:center; gap:.5rem; opacity:0; transform: translateY(6px);
  transition: all .4s var(--ease);
}
.project-card:hover .view{ opacity:1; transform: translateY(0); }
.project-card .tag{
  position:absolute; top: 1rem; left: 1rem; z-index:3;
  background: rgba(247,245,241,0.92); color: var(--ink);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight:700;
  padding: 0.4rem 0.8rem;
}

/* masonry-ish grid for featured work */
.work-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap: 2.2rem; }
.work-grid .span-7{ grid-column: span 7; }
.work-grid .span-5{ grid-column: span 5; }
.work-grid .span-4{ grid-column: span 4; }
.work-grid .span-8{ grid-column: span 8; }
.work-grid .span-6{ grid-column: span 6; }
.work-grid .mt-lift{ margin-top: 4.5rem; }
@media (max-width: 900px){
  .work-grid .span-7,.work-grid .span-5,.work-grid .span-4,.work-grid .span-8,.work-grid .span-6{ grid-column: span 12; }
  .work-grid .mt-lift{ margin-top: 0; }
}

/* ---------- Numbered process ---------- */
.process-row{
  display:flex; gap: 2.5rem; padding: 2.3rem 0; border-top: var(--rule);
  align-items: baseline;
}
.process-row:last-child{ border-bottom: var(--rule); }
.process-num{ font-family: var(--font-display); font-size: 1.3rem; color: var(--copper); width: 3.2rem; flex-shrink:0; }
.process-title{ font-family: var(--font-display); font-size: 1.6rem; width: 12rem; flex-shrink:0; }
.process-text{ color: var(--taupe); max-width: 40ch; }
@media (max-width: 767px){
  .process-row{ flex-wrap: wrap; gap: 0.6rem; }
  .process-title{ width:100%; }
}

/* ---------- Counters ---------- */
.stat{ text-align: left; }
.stat .num{ font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--ink); }
.stat .label{ font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin-top: .4rem; }

/* ---------- Testimonials ---------- */
.testi-card{
  background: var(--white); padding: 2.6rem;
  border: var(--rule);
  height: 100%;
  display:flex; flex-direction:column; justify-content:space-between;
}
.testi-quote{ font-family: var(--font-display); font-size: 1.5rem; font-style: italic; line-height: 1.45; color: var(--ink); }
.testi-name{ font-size: 0.78rem; letter-spacing: .08em; font-weight:700; text-transform: uppercase; margin-top: 1.6rem; }
.testi-role{ font-size: 0.76rem; color: var(--taupe); }
.stars i{ color: var(--copper); font-size: .8rem; margin-right: 2px; }

/* ---------- Team ---------- */
.team-card .img-reveal{ margin-bottom: 1.2rem; }
.team-card h3{ margin-bottom: .1rem; }
.team-role{ color: var(--copper); font-size: 0.76rem; letter-spacing: .1em; text-transform: uppercase; font-weight:600; }
.team-specialty{ color: var(--taupe); font-size: 0.82rem; margin-top:.2rem; }

/* ---------- Materials strip ---------- */
.material-tile{ position: relative; overflow:hidden; }
.material-tile .img-reveal{ height: 100%; }
.material-tile .label{
  position:absolute; left: 1rem; bottom: 1rem; z-index: 3;
  color: var(--paper); font-family: var(--font-display); font-style: italic; font-size: 1.3rem;
}
.material-tile::before{
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(0deg, rgba(23,23,23,0.55), transparent 55%);
}

/* ---------- Project info bar ---------- */
.info-label{ font-size:0.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); font-weight:700; }

/* ---------- Services ---------- */
.service-block{ border-top: var(--rule); padding: 2.6rem 0; }
.service-block:last-of-type{ border-bottom: var(--rule); }
.service-block .cat-label{ font-size: 0.7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); font-weight:700; }
.service-list li{ padding: 0.9rem 0; border-top: var(--rule); display:flex; justify-content:space-between; align-items:center; }
.service-list li:first-child{ border-top: none; }
.service-list .num{ color: var(--taupe); font-size: .78rem; margin-right: .9rem; }

/* ---------- Forms ---------- */
.form-control-auren{
  background: transparent; border: none; border-bottom: 1px solid rgba(37,37,37,0.28);
  border-radius: 0; padding: 0.85rem 0.1rem; font-family: var(--font-body);
  color: var(--ink); font-size: 0.98rem;
}
.form-control-auren:focus{
  outline: none; border-color: var(--copper); box-shadow: none; background: transparent; color: var(--ink);
}
.form-label-auren{ font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin-bottom: .5rem; display:block; }
select.form-control-auren{ appearance: none; -webkit-appearance:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%238B8177' stroke-width='1.4'/></svg>"); background-repeat:no-repeat; background-position: right 4px center; }

.map-placeholder{
  width:100%; height: 100%; min-height: 380px;
  background:
    repeating-linear-gradient(0deg, rgba(37,37,37,0.06) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(37,37,37,0.06) 0 1px, transparent 1px 42px),
    var(--stone);
  position: relative;
  display:flex; align-items:center; justify-content:center;
}
.map-placeholder .pin{
  font-family: var(--font-display); font-style: italic; text-align:center; color: var(--ink);
}
.map-placeholder .pin i{ font-size: 1.6rem; color: var(--copper); display:block; margin-bottom:.6rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(247,245,241,0.78); padding: 5.5rem 0 2rem; }
.site-footer h4{ color: var(--paper); font-size: 0.76rem; letter-spacing: .16em; text-transform: uppercase; font-weight:700; margin-bottom: 1.4rem; font-family: var(--font-body); }
.site-footer a{ color: rgba(247,245,241,0.7); }
.site-footer a:hover{ color: var(--copper); }
.footer-links li{ margin-bottom: .7rem; font-size: 0.92rem; }
.footer-cta h2{ color: var(--paper); }
.social-row a{
  width: 42px; height:42px; border:1px solid rgba(247,245,241,0.3); border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center; margin-right: .6rem;
  transition: all .35s var(--ease);
}
.social-row a:hover{ border-color: var(--copper); background: var(--copper); color: var(--white); }
.footer-bottom{ font-size: 0.78rem; color: rgba(247,245,241,0.5); }

/* ---------- Misc ---------- */
.divider-copper{ width: 60px; height: 2px; background: var(--copper); }
.badge-auren{
  border:1px solid var(--taupe); color: var(--taupe); font-size: 0.68rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .35rem .8rem; font-weight: 600;
}
.pill-nav a{
  font-size: 0.76rem; letter-spacing: .1em; text-transform: uppercase; font-weight:600; color: var(--taupe);
  padding-bottom: .5rem; border-bottom: 2px solid transparent; margin-right: 2rem;
}
.pill-nav a.active, .pill-nav a:hover{ color: var(--ink); border-color: var(--copper); }

.back-to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--stone);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .4s var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }

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

.demo-note{
  font-size: 0.72rem; color: var(--taupe); letter-spacing: .04em;
}