/* =====================================
   THE COUCH FACTORY
   Stylesheet
===================================== */

/* ---------- VARIABLES ---------- */

:root{

    --cream:#F6F1EA;
    --white:#ffffff;
    --espresso:#2F241F;
    --rust:#B86A3B;
    --rust-text:#753B1D; /* darker variant of --rust, used for small text so it passes WCAG AA contrast */
    --grey:#6F675F;
    --border:#E6DED3;

    --radius:18px;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --container:1320px;

    --space-1:20px;
    --space-2:40px;
    --space-3:60px;
    --space-4:80px;
    --space-5:60px;

}

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    max-width:100%;
}

body{

    font-family:'Jost',sans-serif;
    background:var(--cream);
    color:var(--espresso);
    line-height:1.7;
    overflow-x:hidden;
    max-width:100%;

}

img{

    width:100%;
    display:block;
    border-radius:var(--radius);
    object-fit:cover;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}

button,
input,
select,
textarea{

    font:inherit;

}

/* ---------- TYPOGRAPHY ---------- */

h1,
h2,
h3{

    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.15;

}

h1{

    font-size:clamp(2.6rem,4.5vw,3.6rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:20px;

}

h3{

    font-size:1.35rem;
    margin-bottom:10px;

}

p{

    color:var(--grey);

}

.section-label{

    color:var(--rust-text);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.8rem;
    font-weight:600;
    margin-bottom:15px;

}

.eyebrow{

    color:var(--rust);
    font-weight:600;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:.15em;

}

/* ---------- LAYOUT ---------- */

.container{

    width:min(95%,var(--container));
    margin:auto;

}

.section{

    padding:var(--space-5) 0;

}

.alt{

    background:var(--cream);

}

.grid{

    display:grid;
    gap:32px;

}

/* ---------- BUTTONS ---------- */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    font-weight:600;

    transition:.3s ease;

}

.primary{

    background:var(--espresso);
    color:white;

}

.primary:hover{

    background:#1e1714;
    transform:translateY(-2px);

}

/* ---------- CARDS ---------- */

.card{

    background:#fff;

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-6px);

}

.card img{

    aspect-ratio:4/3;

    margin-bottom:20px;

}
/* =====================================
   NAVIGATION
===================================== */

header{

    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(246,241,234,.92);
    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

}

.nav{

    height:84px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

}

.nav nav{
    margin-left:48px;
}

.nav > .btn.primary{
    margin-left:auto;
}

.logo{

    display:flex;
    flex-direction:column;
    gap:2px;

}

.logo h2{

    margin:0;
    font-size:1.55rem;

}

.logo span{

    font-size:.78rem;
    color:var(--grey);

}

nav ul{

    display:flex;
    gap:32px;

}

nav a{

    position:relative;
    font-weight:500;
    transition:.25s;

}

nav a:hover{

    color:var(--rust);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--rust);

    transition:.25s;

}

nav a:hover::after{

    width:100%;

}

/* =====================================
   HERO
===================================== */

.hero{

    padding:100px 0 80px;

}

.hero h1 span{

    display:block;
    color:var(--rust);

}

.hero p{

    margin:28px 0;

    max-width:580px;

    font-size:1.05rem;

}

.hero-buttons{

    display:flex;
    gap:18px;

    margin-bottom:28px;

}


/* =====================================
   CRAFT
===================================== */

#craft h2{

    max-width:700px;

    margin-bottom:50px;

}

.card h3{

    margin-top:18px;

}

.card p{

    font-size:.95rem;

}

.card:hover img{

    transform:scale(1.04);

}

.card img{

    transition:.45s;

    overflow:hidden;

}

/* =====================================
   GALLERY
===================================== */

.gallery-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

    margin-top:50px;

}

.gallery-item{

    margin:0;

}

.gallery-item img{

    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:.35s;
    display:block;

}

.gallery-item figcaption{

    margin-top:12px;
    text-align:center;
    font-family:'Jost',sans-serif;
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--espresso);
    min-height:1.4em;

}

.gallery-item img:hover{
    transform:scale(1.03);
}

@media(max-width:700px){
    .gallery-grid{
        grid-template-columns:1fr;
    }
}

/* =====================================
   CONTACT
===================================== */

.contact{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

}

.contact-form{

    display:grid;

    gap:18px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    padding:16px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    outline:none;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

    border-color:var(--rust);

}

/* =====================================
   FOOTER
===================================== */

footer{

    background:var(--espresso);

    color:#fff;

    padding:70px 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    gap:40px;

    align-items:flex-start;

}

.footer p{

    color:#ddd;

    margin-top:10px;

}

/* =====================================
   WHATSAPP
===================================== */

.whatsapp{

    position:fixed;

    right:24px;

    bottom:24px;

    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    font-weight:600;

    box-shadow:var(--shadow);

    z-index:999;

    transition:.3s;

}

.whatsapp:hover{

    transform:translateY(-3px);

}

/* =====================================
   UTILITIES
===================================== */

.skip-link{

    position:absolute;

    left:-9999px;

}

.skip-link:focus{

    left:20px;

    top:20px;

    background:#fff;

    padding:10px 14px;

}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:980px){

.contact,
.gallery-grid{

grid-template-columns:1fr;

}

.nav{

flex-wrap:wrap;

height:auto;

padding:20px 0;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding:70px 0;

}

.footer{

flex-direction:column;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

}

.hero-buttons .btn{

width:100%;

}

}

@media(max-width:640px){

.section{

padding:80px 0;

}

h1{

font-size:2.6rem;

}

h2{

font-size:2rem;

}

.container{

width:90%;

}

}
/* =====================================
   PATCH FIXES
   (aligning HTML classes actually used
   with matching CSS rules)
===================================== */

/* Grid column variants used in HTML (grid-2 / grid-3) */
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:980px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}

/* Hero highlights row (checklist under hero buttons) */
.hero-highlights{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:.92rem;
  color:var(--grey);
}
.hero-highlights span{
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-highlights span::before{
  content:"✓";
  color:var(--rust);
  font-weight:700;
}

/* Contact info block */
.contact-info p{
  margin-bottom:22px;
}
.contact-info strong{
  display:block;
  margin-bottom:4px;
  color:var(--espresso);
}
.contact-info a{
  color:var(--rust);
}

/* Logo sizing (header uses an <img>, not text) */
.logo img{
  height:64px;
  width:auto;
  display:block;
}
@media(max-width:640px){
  .logo img{height:52px;}
}

/* Footer logo sizing */
.footer-logo{
  height:34px;
  width:auto;
  margin-bottom:14px;
}

/* Mobile nav toggle button */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:var(--espresso);
}

@media(max-width:980px){
  .menu-toggle{display:block;}
  .nav{position:relative;flex-wrap:nowrap;}
  header nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-left:0;
    background:var(--cream);
    border-bottom:1px solid var(--border);
    display:none;
    padding:20px 0;
    box-shadow:var(--shadow);
  }
  header nav.open{display:block;}
  nav ul{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
}

/* =====================================
   NAV DROPDOWN (Our Services)
===================================== */
.has-dropdown{position:relative;}
.dropdown-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight:500;
  color:var(--espresso);
}
.dropdown-trigger:hover{color:var(--rust);}
.dropdown-trigger .caret{
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-4px;
  transition:transform .15s ease;
}
.has-dropdown.open .caret{
  transform:rotate(225deg);
  margin-top:4px;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  min-width:190px;
  padding:8px;
  border-radius:12px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:1100;
}
.has-dropdown.open .dropdown-menu{
  opacity:1;
  visibility:visible;
}
.dropdown-menu a{
  display:block;
  padding:10px 14px;
  font-size:.9rem;
  border-radius:8px;
  color:var(--espresso);
}
.dropdown-menu a:hover{
  background:var(--cream);
  color:var(--rust);
}

@media(max-width:980px){
  .dropdown-menu{
    position:static;
    transform:none;
    box-shadow:none;
    border:none;
    background:transparent;
    display:none;
    text-align:center;
  }
  .has-dropdown.open .dropdown-menu{
    display:block;
    opacity:1;
    visibility:visible;
  }
}

/* =====================================
   FILE ATTACHMENT FIELD (Quote form)
===================================== */
.contact-form input[type="file"]{
  padding:12px 16px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#fff;
  font-size:.9rem;
  color:var(--grey);
  cursor:pointer;
}
.contact-form input[type="file"]::file-selector-button{
  padding:8px 16px;
  margin-right:14px;
  border:none;
  border-radius:999px;
  background:var(--espresso);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  transition:.25s ease;
}
.contact-form input[type="file"]::file-selector-button:hover{
  background:#1e1714;
}

/* =====================================
   CONTACT SECTION — reorganized
===================================== */
.contact-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:26px;
}
.contact-row:last-child{margin-bottom:0;}
.contact-icon{
  flex:none;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--espresso);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.contact-info{
  margin-top:30px;
}
.contact-row strong{
  display:block;
  color:var(--espresso);
  margin-bottom:8px;
}
.contact-row a{
  color:var(--rust);
}
.contact-row div{
  font-size:.95rem;
  color:var(--grey);
  line-height:1.6;
}

.form-card{
  background:#fff;
  padding:36px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  gap:20px;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field label{
  font-size:.82rem;
  font-weight:600;
  color:var(--espresso);
  letter-spacing:.02em;
}

@media(max-width:640px){
  .field-row{
    grid-template-columns:1fr;
  }
  .form-card{
    padding:24px;
  }
}

/* Story stands out as white, between the cream Hero and cream Craft-onwards */

/* Contact stays white too, as the final CTA highlight */
#contact{
  background:#fff;
}

/* Built for Every Space — lighter warm tone matching the Hero photo's palette */
#spaces{
  background:#C7BCB1;
}
#clients{
  background:var(--cream);
}
#gallery{
  background:var(--cream);
}
#social{
  background:#fff;
}
#spaces .section-label{
  color:var(--rust-text);
}
#spaces h2{
  color:var(--espresso);
}

/* Why Choose Us: white section, cream cards (inverted from the norm) */
#why-us{
  background:var(--cream);
}
#why-us .card{
  background:#fff;
}

/* =====================================
   HERO — full-width photo background
   with overlaid text (replaces the old
   side-by-side split layout)
===================================== */
.hero-photo{
  position:relative;
  padding:0;
  min-height:700px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg-picture{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:82% center;
  display:block;
  border-radius:0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(30,23,19,0.82) 0%,
    rgba(30,23,19,0.68) 32%,
    rgba(30,23,19,0.30) 62%,
    rgba(30,23,19,0.08) 100%);
  z-index:1;
}

.hero-photo .container{
  position:relative;
  z-index:2;
}

.hero-photo .hero-content{
  max-width:820px;
  padding:56px 0;
}

.hero-photo .eyebrow{
  color:#E3A87C;
}

.hero-photo h1{
  color:#fff;
  white-space:nowrap;
}

.hero-photo h1 span{
  color:#E3A87C;
  white-space:nowrap;
}

.hero-photo p{
  color:#EDE6DC;
}

.hero-photo .primary{
  background:var(--rust);
  color:#fff;
}
.hero-photo .primary:hover{
  background:#9a5326;
}

.hero-photo .hero-highlights{
  color:#EDE6DC;
}
.hero-photo .hero-highlights span::before{
  color:#E3A87C;
}

@media(max-width:860px){
  .hero-photo{
    min-height:600px;
  }
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(30,23,19,0.55) 0%,
      rgba(30,23,19,0.78) 55%,
      rgba(30,23,19,0.88) 100%);
  }
  .hero-photo .hero-content{
    padding:60px 0;
    max-width:100%;
  }
}

/* Wider container specifically for the gallery, so the carousel has more room */
.container-wide{
  width:min(97%, 1500px);
  margin:auto;
}

/* =====================================
   CLIENT LOGOS
===================================== */
.clients-grid{
  display:flex;
  gap:20px;
  margin-top:50px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.clients-grid::-webkit-scrollbar{
  display:none;
}

.client-logo{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  flex:0 0 calc((100% - 60px) / 4);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  transition:.3s ease;
  scroll-snap-align:start;
}

.client-logo:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.client-logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
}

.client-logo span{
  font-family:'Jost',sans-serif;
  font-size:.85rem;
  color:var(--grey);
  text-align:center;
}

@media(max-width:980px){
  .client-logo{
    flex:0 0 calc((100% - 40px) / 3);
  }
}
@media(max-width:600px){
  .client-logo{
    flex:0 0 100%;
  }
}

/* Fuego logo is small at its source size, scale it up to match visual weight of others */
.logo-fuego{
  width:95%;
  max-width:95%;
  max-height:95%;
}

/* Clients scroll wrapper (arrows on either side) */
.clients-scroll-wrapper{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:50px;
}
.clients-scroll-wrapper .clients-grid{
  margin-top:0;
  flex:1;
  min-width:0;
}

/* Client logo arrows — distinct filled-rust design */
.client-arrow{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:#2F241F;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:none;
  transition:.25s ease;
}

.client-arrow:hover{
  transform:scale(1.15);
}

/* St. Vincent logo has light-colored text, needs a dark card to stay visible */
.client-logo-dark{
  background:var(--espresso);
}

/* =====================================
   SMALL PHONE FIXES (header, CTA, touch targets)
===================================== */
@media(max-width:480px){
  .logo img{
    height:40px;
  }
  .nav > .btn.primary{
    padding:10px 16px;
    font-size:.82rem;
  }
  .nav nav{
    margin-left:20px;
  }
  h1{
    font-size:clamp(1.8rem,7vw,2.4rem);
  }
}

/* Ensure comfortable tap targets on touch devices */
@media(max-width:980px){
  nav ul li a,
  .dropdown-trigger{
    padding:8px 4px;
    display:inline-block;
  }
  .dropdown-menu a{
    padding:12px 16px;
  }
}

/* Allow hero heading to wrap naturally on small phones instead of forcing overflow */
@media(max-width:600px){
  .hero-photo h1,
  .hero-photo h1 span{
    white-space:normal;
  }
}

/* Disable manual resizing on the project details textarea */
.contact-form textarea{
  resize:none;
}

/* Social chips inside Contact's Follow Us row */
.social-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.social-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px 8px 8px;
  border-radius:999px;
  color:var(--espresso);
  background:#fff;
  border:1px solid var(--border);
  font-size:.88rem;
  font-weight:600;
  transition:.25s ease;
}

.social-chip:hover{
  border-color:var(--rust);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.chip-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-chip-instagram .chip-icon{
  background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);
}

.social-chip-whatsapp .chip-icon{
  background:#25D366;
}