/* =========================================================
   SHAN CARLSSON INTERIORS
   Design system: warm editorial, geometric, human-made.
   Fonts: Archivo (headings, bold, high presence)
          Inter (body, UI, highly readable)
          Fraunces (restrained italic accent only)
   ========================================================= */

:root{
  /* palette, drawn from the brand's own photography */
  --ivory:#F7F4EC;
  --cream:#F1EBDD;
  --stone:#E4DBC6;
  --beige:#CDBEA0;
  --taupe:#8C7F68;
  --olive:#5E6A47;
  --sage:#93A17E;
  --wood:#5A4430;
  --charcoal:#2A2721;
  --ink:#221F1A;
  --paper:#FCFAF5;

  --line: rgba(42,39,33,.14);
  --line-strong: rgba(42,39,33,.28);
  --shadow-soft: 0 1px 2px rgba(42,39,33,.06);
  --shadow-card: 0 12px 32px -18px rgba(42,39,33,.35);

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius-s: 3px;
  --radius-m: 6px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .28s;
  --dur-m: .55s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-body);
  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:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,p,figure{margin:0;}
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--taupe);
}
.accent-serif{font-family:var(--font-accent);font-style:italic;font-weight:500;}

.h-display{
  font-size:clamp(2.6rem, 5.6vw, 5rem);
  line-height:.98;
}
.h-xl{font-size:clamp(2.1rem, 3.6vw, 3.2rem); line-height:1.04;}
.h-lg{font-size:clamp(1.6rem, 2.4vw, 2.2rem); line-height:1.08;}
.h-md{font-size:clamp(1.15rem, 1.4vw, 1.4rem); line-height:1.2;}

.lead{font-size:clamp(1.05rem, 1.3vw, 1.25rem); line-height:1.55; color:var(--charcoal);}
.body-copy{font-size:1rem; line-height:1.7; color:#443F35;}
.small{font-size:.86rem; color:var(--taupe);}

/* ---------- layout ---------- */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(64px, 10vw, 128px);}
.section-tight{padding-block:clamp(40px, 6vw, 72px);}
.grid{display:grid; gap:var(--gutter);}
.g-12{grid-template-columns:repeat(12,1fr);}

hr.rule{border:none;border-top:1px solid var(--line);margin:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.7em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:var(--radius-s);
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--charcoal);
  color:var(--paper);
}
.btn-primary:hover{background:var(--olive); transform:translateY(-1px);}
.btn-outline{
  background:transparent;
  color:var(--charcoal);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--charcoal); transform:translateY(-1px);}
.btn-ghost{
  padding:.4em 0;
  font-weight:600;
  border-bottom:1.5px solid var(--charcoal);
  border-radius:0;
}
.btn-ghost:hover{color:var(--olive); border-color:var(--olive);}
.btn[aria-disabled="true"]{opacity:.55; pointer-events:none;}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center;
  height:88px;
  padding-inline:var(--gutter);
  background:rgba(247,244,236,0);
  border-bottom:1px solid transparent;
  transition:background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), height var(--dur-m) var(--ease);
}
.site-header.is-scrolled{
  background:rgba(247,244,236,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--line);
  height:72px;
}
.header-inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem;
  letter-spacing:.14em;
  text-align:center;
  line-height:1.5;
  padding-block:2px;
  border-top:1px solid var(--charcoal);
  border-bottom:1px solid var(--charcoal);
}
.brand span{display:block;}
.nav-desktop{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);
}
.nav-desktop a{
  font-size:.86rem; font-weight:500; letter-spacing:.02em;
  position:relative; padding-block:4px;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--olive); transition:right var(--dur-s) var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after{right:0;}
.header-actions{display:flex; align-items:center; gap:18px;}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:26px;
}
.nav-toggle span{height:1.5px; background:var(--charcoal); transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; z-index:59;
  background:var(--ivory);
  display:flex; flex-direction:column;
  padding:120px var(--gutter) 48px;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--dur-m) var(--ease), visibility 0s linear var(--dur-m);
}
.mobile-nav.is-open{transform:translateY(0); visibility:visible; transition:transform var(--dur-m) var(--ease);}
.mobile-nav a{
  font-family:var(--font-head); font-weight:800;
  font-size:2rem; padding-block:14px;
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{
  margin-top:32px; align-self:flex-start;
  white-space:normal; text-align:center; max-width:100%;
}

/* ---------- hero ---------- */
.hero{
  padding-top:calc(88px + clamp(28px,6vw,72px));
  padding-bottom:clamp(48px,7vw,88px);
}
.hero-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,5vw,64px);
  align-items:end;
}
.hero-copy .eyebrow{margin-bottom:18px;}
.hero-copy h1{margin-bottom:22px;}
.hero-copy .lead{max-width:44ch; margin-bottom:32px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center;}
.hero-figure{position:static;}
.figure-media{position:relative;}
.hero-figure .frame{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  background:var(--stone);
}
.hero-figure img{width:100%; height:100%; object-fit:cover;}
.hero-caption{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.hero-mark{
  position:absolute; left:-18px; bottom:-18px;
  width:118px; height:118px;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--font-head); font-weight:800; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.5;
  color:var(--charcoal);
}

/* ---------- strip / instagram bridge ---------- */
.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:22px;
}
.strip-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.strip p{font-size:.92rem; color:var(--taupe);}
.strip a{font-weight:600; color:var(--charcoal);}
.strip a:hover{color:var(--olive);}

/* ---------- about ---------- */
.about-grid{
  grid-template-columns:.86fr 1.14fr;
  align-items:center;
}
.about-figure{aspect-ratio:3/4; overflow:hidden; background:var(--stone);}
.about-figure img{width:100%; height:100%; object-fit:cover;}
.about-copy .eyebrow{margin-bottom:16px;}
.about-copy h2{margin-bottom:24px;}
.about-copy p + p{margin-top:18px;}
.about-facts{
  margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.about-facts dt{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin-bottom:6px;}
.about-facts dd{margin:0; font-family:var(--font-head); font-weight:700; font-size:1rem;}

/* ---------- services ---------- */
.services-head{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  margin-bottom:clamp(36px,5vw,64px);
}
.services-head .lead{max-width:46ch;}
.service-row{
  display:grid;
  grid-template-columns:88px 1fr 1.3fr;
  gap:clamp(16px,3vw,40px);
  padding-block:32px;
  border-top:1px solid var(--line);
  align-items:start;
}
.service-row:last-child{border-bottom:1px solid var(--line);}
.service-num{
  font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--beige);
}
.service-row h3{font-size:1.3rem;}
.service-row p{color:#4A4437;}

/* ---------- process ---------- */
.process-strip{background:var(--charcoal); color:var(--ivory);}
.process-strip .eyebrow{color:var(--sage);}
.process-strip h2{color:var(--ivory); margin-bottom:8px;}
.process-grid{
  margin-top:clamp(36px,5vw,64px);
  grid-template-columns:repeat(4,1fr);
}
.process-step{border-top:1px solid rgba(247,244,236,.22); padding-top:22px;}
.process-step .step-num{
  font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:2.4rem; color:var(--sage);
  display:block; margin-bottom:18px;
}
.process-step h3{color:var(--ivory); font-size:1.1rem; margin-bottom:10px; letter-spacing:.02em;}
.process-step p{color:rgba(247,244,236,.72); font-size:.95rem;}

/* ---------- projects ---------- */
.projects-head{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  margin-bottom:clamp(30px,4vw,48px);
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.6vw,20px);
}
.project-card{
  position:relative;
  overflow:hidden;
  background:var(--stone);
  cursor:pointer;
  border:none;
  text-align:left;
  display:block;
  width:100%;
  padding:0;
}
.project-card .ph{position:relative; overflow:hidden; aspect-ratio:4/5;}
.project-card img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-m) var(--ease);}
.project-card:hover img{transform:scale(1.045);}
.project-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  background:linear-gradient(180deg, rgba(34,31,26,0) 0%, rgba(34,31,26,.62) 100%);
  color:var(--paper);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.project-card:hover figcaption,
.project-card:focus-visible figcaption{opacity:1; transform:translateY(0);}
.project-card figcaption .cap-title{font-family:var(--font-head); font-weight:700; font-size:.95rem;}
.project-card figcaption .cap-tag{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85;}

.project-card.c-a{grid-column:span 3; grid-row:span 2;}
.project-card.c-b{grid-column:span 3;}
.project-card.c-c{grid-column:span 2;}
.project-card.c-d{grid-column:span 2; grid-row:span 2;}
.project-card.c-e{grid-column:span 2;}
.project-card.c-f{grid-column:span 3;}
.project-card.c-g{grid-column:span 3;}
.project-card.c-h{grid-column:span 4;}
.project-card.c-i{grid-column:span 2;}

.projects-more{margin-top:clamp(28px,4vw,44px); text-align:center;}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(34,31,26,.86);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-m) var(--ease);
}
.lightbox.is-open{opacity:1; visibility:visible;}
.lightbox-panel{
  position:relative;
  width:min(1040px, 100%);
  max-height:92vh;
  overflow:auto;
  background:var(--paper);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  transform:translateY(14px);
  transition:transform var(--dur-m) var(--ease);
}
.lightbox.is-open .lightbox-panel{transform:translateY(0);}
.lightbox-media{position:relative; background:var(--stone); min-height:280px;}
.lightbox-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.lightbox-body{padding:clamp(28px,4vw,48px);}
.lightbox-body .eyebrow{margin-bottom:12px;}
.lightbox-body h3{font-size:clamp(1.4rem,2vw,1.9rem); margin-bottom:16px;}
.lightbox-body p{color:#4A4437; margin-bottom:14px;}
.lightbox-meta{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.lightbox-meta dt{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); margin-bottom:4px;}
.lightbox-meta dd{margin:0; font-weight:600;}
.lightbox-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:var(--paper); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close svg{width:16px; height:16px;}

/* ---------- faq ---------- */
.faq-list{max-width:820px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:24px; text-align:left;
}
.faq-q h3{font-size:1.05rem; font-weight:700; font-family:var(--font-head);}
.faq-icon{
  position:relative; width:18px; height:18px; flex:none;
}
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; background:var(--charcoal);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.faq-icon::before{left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%);}
.faq-icon::after{top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%);}
.faq-item[open] .faq-icon::after{opacity:0; transform:translateX(-50%) rotate(90deg);}
.faq-a{padding-bottom:26px; max-width:64ch;}
.faq-a p{color:#4A4437;}
summary{cursor:pointer; list-style:none;}
summary::-webkit-details-marker{display:none;}

/* ---------- contact ---------- */
.contact-section{background:var(--cream);}
.contact-grid{grid-template-columns:1fr 1fr; align-items:start;}
.contact-block h2{margin-bottom:20px;}
.contact-block .lead{max-width:44ch; margin-bottom:32px;}
.contact-list{display:flex; flex-direction:column; gap:18px; margin-bottom:36px;}
.contact-list li{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.contact-list .label{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); width:96px; flex:none;}
.contact-list a,.contact-list span{font-weight:600;}
.contact-list a:hover{color:var(--olive);}
.contact-cta{display:flex; flex-wrap:wrap; gap:16px;}
.contact-figure{aspect-ratio:5/6; overflow:hidden; background:var(--stone);}
.contact-figure img{width:100%; height:100%; object-fit:cover;}

/* ---------- footer ---------- */
.site-footer{padding-block:56px 40px; border-top:1px solid var(--line);}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
  padding-bottom:40px;
}
.footer-brand .brand{display:inline-flex;}
.footer-brand p{margin-top:18px; max-width:34ch; color:var(--taupe); font-size:.92rem;}
.footer-col h4{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin-bottom:16px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a:hover{color:var(--olive);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--taupe);
}
.footer-bottom .legal{display:flex; gap:20px;}
.footer-bottom .legal a:hover{color:var(--charcoal);}

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ---------- consultation page ---------- */
.page-hero{
  padding-top:calc(88px + clamp(36px,7vw,84px));
  padding-bottom:clamp(40px,6vw,72px);
  border-bottom:1px solid var(--line);
}
.page-hero-grid{grid-template-columns:1.1fr .9fr; align-items:end;}
.page-hero .lead{max-width:46ch;}
.consult-grid{grid-template-columns:1fr 1.15fr; align-items:start;}
.consult-info h2{margin-bottom:18px;}
.consult-info p + p{margin-top:14px;}
.consult-info-list{margin-top:32px; display:flex; flex-direction:column; gap:16px;}
.consult-info-list li{display:flex; gap:14px; align-items:flex-start;}
.consult-info-list .n{
  font-family:var(--font-head); font-weight:800; color:var(--beige); font-size:1rem; flex:none; width:26px;
}
.booking-block{
  margin-top:36px; padding:24px; background:var(--cream); border:1px solid var(--line);
}
.booking-block h3{font-size:1rem; margin-bottom:8px;}
.booking-block p{font-size:.92rem; color:#4A4437; margin-bottom:14px;}

.form-card{background:var(--paper); border:1px solid var(--line); padding:clamp(24px,4vw,44px);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.78rem; font-weight:600; letter-spacing:.03em;}
.field .req{color:var(--olive);}
.field input,.field select,.field textarea{
  padding:13px 14px;
  border:1px solid var(--line-strong);
  background:var(--ivory);
  border-radius:var(--radius-s);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--olive); background:var(--paper); outline:none;
}
.field textarea{resize:vertical; min-height:120px;}
.form-foot{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.form-note{font-size:.82rem; color:var(--taupe); max-width:40ch;}
.form-status{
  margin-top:16px; padding:14px 16px; font-size:.9rem;
  background:var(--sage); color:var(--paper); display:none;
}
.form-status.is-visible{display:block;}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .nav-desktop, .header-actions .btn{display:none;}
  .nav-toggle{display:flex;}
  .hero-grid, .about-grid, .contact-grid, .consult-grid, .page-hero-grid{grid-template-columns:1fr;}
  .about-grid{gap:36px;}
  .contact-grid{gap:44px;}
  .about-figure{order:-1; aspect-ratio:16/10;}
  .services-head, .projects-head{grid-template-columns:1fr; gap:16px;}
  .service-row{grid-template-columns:56px 1fr; row-gap:8px;}
  .service-row p{grid-column:1 / -1;}
  .process-grid{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
  .project-grid{grid-template-columns:repeat(4,1fr);}
  .project-card.c-a,.project-card.c-d{grid-column:span 4; grid-row:span 1; aspect-ratio:16/10;}
  .project-card.c-a .ph,.project-card.c-d .ph{aspect-ratio:16/10;}
  .project-card.c-b,.project-card.c-c,.project-card.c-e,.project-card.c-f,.project-card.c-g,.project-card.c-h,.project-card.c-i{grid-column:span 2;}
  .lightbox-panel{grid-template-columns:1fr;}
  .lightbox-media{aspect-ratio:4/3; min-height:0;}
  .lightbox-media img{position:relative;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}

@media (max-width: 640px){
  .site-header{height:76px;}
  .hero{padding-top:calc(76px + 24px);}
  .hero-mark{width:92px; height:92px; font-size:.6rem; left:-10px; bottom:-10px;}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .project-card.c-a,.project-card.c-d,.project-card.c-b,.project-card.c-c,.project-card.c-e,.project-card.c-f,.project-card.c-g,.project-card.c-h,.project-card.c-i{grid-column:span 2;}
  .about-facts{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .contact-list .label{width:78px;}
}