/* ===DESIGN TOKENS-variables=== */
:root {  
  --font-main: 'Poppins', sans-serif;  
     --font-serif: 'Bodoni Moda', serif;
 --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(2rem, 4vw, 3.5rem);
  --text-2xl: clamp(2.5rem, 6vw, 5rem);
  --black: #000;
  --white: #fff;
  --grey-50: #f7f7f7;
  --grey-80: rgba(0,0,0,0.2);
  --grey-50-text: rgba(0,0,0,0.5);
  --grey-30: rgba(0,0,0,0.3);

  --container: 75%; 
   --page-padding: 1rem; 
    --nav-height: 20px;
    /* Layout */
  --container-width-mobile: 100%;
  --container-padding-mobile: 1rem;
  /* Spacing */
  --gap-lg: 100px;
  --gap-md: 2rem;
  --gap-sm: .5rem;
  --border-thin: 1px;
  /* Effects */  --blur: 6px;
  /* Shadows */
  --shadow: 5px 5px 10px rgba(0,0,0,0.1);
  --shadow-hover: 8px 8px 20px rgba(0,0,0,0.2);--s1: 0.5rem;
--s2: 1rem;
--s4: 2rem;
}

* {  
  box-sizing: border-box;}
html, body {  overflow-x: hidden;}

body {    margin: calc(var(--nav-height) + 50px) auto 10px;
font-family: var(--font-main);
  background: var(--grey-50);
  color: var(--black);
  line-height: 1.6;
  -webkit-print-color-adjust: exact;}

h1 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.01em; margin-bottom: 2rem;}
.page-banner {
  position: relative;
  width: 100%;
  height: 420px;

  /* IMPORTANT: variable must be used here */
  background-image:
    linear-gradient(
      to right,      var(--page-bg, #ffffff) 0%,      var(--page-bg, #ffffff) 55%,      rgba(255,255,255,0) 100%
    ),    var(--banner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}
/* Content (TOP layer) */
.banner-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  color: #111;  max-width: 600px;}
h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.7;}
h3 { font-size: var(--md); font-weight: 500; }
p {   margin:0 0 1rem 1rem; line-height: 1.6; font-size: var(--text-base); }
.p2 { line-height: .9; font-size: var(--p2); }
.p3 {  font-size: var(--p3);  color: var(--grey-50-text);}
.caption {  font-size: var(--caption);  color: var(--grey-50-text);}
a {  color: var(--black);  text-decoration: underline double;}
ul, ol {  padding-left: 1.2rem;  margin: 0 0 var(--s2);}
li {  margin-bottom: var(--s1);}
.image-credit {
  position: absolute;

  left: 14px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 8px;
  display: block;
    width: fit-content;    padding: 3px 6px;
\   z-index: 2;
  pointer-events: none;}
.hero{
  aspect-ratio: 16 / 6;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;    /* vertical centering */
  justify-content: flex-start; /* push content to the left */
  padding-left: 60px;  
}
.hero-id {
    background-image: url('/images/interior/LH_91-banner.png');}
.hero-planning {
  background-image: url('/images/interior/A102-Proposed_FF_Plan1.png');    }

.hero-content {
  text-align: left;
  color: rgb(0, 0, 0); /* ensure contrast */}
  .accordion-item {
  border-bottom: 1px solid #ddd;  padding: 12px 0;}
.accordion-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  position: relative;
  padding-right: 24px;}
.accordion-item summary::-webkit-details-marker {
  display: none;}

.accordion-item summary::after {
  content: "+";
  position: absolute;
  right: 0;  top: 0;}

.accordion-item[open] summary::after {
  content: "−";
}

.accordion-item p {
  margin-top: 12px;}

  .container {
  max-width: 72%;
  width: var(--container);
  margin: calc(var(--nav-height) + 10px) auto 10px;
  padding: 2rem var(--page-padding);}
.container-full{
    width:100%;
    margin:auto;
    padding-top:2rem;padding-bottom:2rem;}

.container-wide{
    width:88%;
    max-width:1600px;
    margin:auto;}

.container-narrow{
    width:58%;
    max-width:760px;
    margin:auto;
}
.bg-grey-blu{
  padding:2rem;
  background-color: #adc2d4;
}
/* SIMPLE CTA SECTION */
.cta-section{
  min-height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s4);}

.split-section {
  display: flex;
  min-height: 500px;
  width: 100%;}
/* IMAGE HALF */
.split-media {
  flex: 1;
  position:relative;
  background-size: cover;
  background-position: center;}
.split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
  max-width: 600px;}

.text-block {  max-width: 85%;   margin:1rem auto;
  padding: 1rem;  color: #1f2937;    }

.white-bg { background-color: #ffffff; }
.grid {    display: grid;    gap: var(--s4);   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
.grid-2 {  grid-template-columns: repeat(2, 1fr);}
.grid-3 {  grid-template-columns: repeat(3, 1fr);}

    .faq-category h2 {      font-size: 24px;
      border-bottom: 2px solid #ddd;      padding-bottom: 10px;
      margin-bottom: 20px;    }
    .faq-item {      background: #fff;      padding: 20px;      margin-bottom: 15px;      border-radius: 8px;      box-shadow: 0 2px 6px rgba(0,0,0,0.05);    }
    .faq-item h3 {      margin-top: 0;      font-size: 18px;    }
    .faq-item p {      margin: 10px 0;    }
.card {      
  width:100%;
   position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3.4;     
display: flex;    
    flex-direction: column;   
    transition: transform 0.2s ease, box-shadow 0.2s ease;    }  
.card::after {  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(255, 255, 255,1) 5%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(0,0,0,0) 45%  );
  opacity: 0.95;
  transition: opacity 0.4s ease;}
.card:hover {
  transform: translateY(0);}    
.card:hover img {
  transform: scale(1.08);}
.card:hover::after {  opacity: 1;}
.card-img {
      width: 100%;   height: 100%; 
      object-fit: cover;   
         display: block;  
  transform: scale(1.02);
  transition: transform 0.7s ease;  }
  .card-content {
 position: absolute;
  bottom: 0;  left: 0;  right: 0;
      padding: 0 0.4rem 0.2rem 0.2rem;
      display: flex;   
         flex-direction: column;
      gap: 2px;  z-index: 2;
  transform: translateY(-6px);
  transition: transform 0.4s ease;    }
.card h3 {/*gallery*/
  font-family: var(--font-serif);
  font-size: 1.25rem;  line-height:1.2;
  font-weight: 500;
  margin: 0 0 1rem 1rem;
    color:#111;}

.card p {
  font-size: 0.95rem;
   line-height:1.2;
  color:#111;  max-width: 90%;}

.card-title {     
   font-size: 18px;    
     font-weight: 600;
      margin: 0;      
      color: #111;    }
.card-button { 
   display: inline-block; 
    padding: 10px 14px;    
     background: #c5c5c5;    
     color: #fff;    
        text-decoration: none; 
      text-align: center;  
      margin-top: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase; 
  opacity: 0;
  transition: opacity 0.3s ease;}

.card-button:hover {    
    background: #757575;    }
.price {  font-size: 24px;  font-weight: 700;}
.price-note {  font-size: 12px;  color: #6b7280; /* gray-500 */}
.btn{    padding: 0.9rem 1.2rem;
  font-weight: 700;
text-decoration: none;}
.btn-primary {
  background: var(--black);
  color: var(--white);}
.btn-primary:hover,
.btn:hover {
  background-color: #ffffff; color: var(--black);
} 

@media (max-width: 900px) {
    .container,.container-full,.container-wide,  .container-narrow,
  .text-block {
    
  width: 100%;
    max-width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .grid-2 {
    grid-template-columns: 1fr;  }
  .grid-3 {
    grid-template-columns: 1fr;  }}


  @media (max-width: 600px) {
  .form-2,
  .form-3 {
    grid-template-columns: 1fr;  }}


/* FOOTER */.site-footer {
  width: 100%;
  border-top: 1px solid #d1d5db;
  padding: 8px 0;
  background-color: #ffffff;}

.footer-inner {
  display: flex;  flex-direction: column;  justify-content: space-between;
  align-items: center;  font-size: 12px;  color: #1f2937;
  gap: 6px;}

.footer-links {  display: flex;  gap: 4px;}
.footer-links a {  text-decoration: none;  color: inherit;}

/* FLOATING CONTAINER */
.social-float {
  position: fixed;
  bottom: 20px;
    right: 20px;  z-index: 9999;
  display: flex;
  align-items: center;  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;   /* stack vertically */
  align-items:flex-end;
  gap:12px;}

.social-label {
  background-color: #000000;
  color: #fff;  padding: 8px 12px;  border-radius: 6px 0 0 6px;
  font-size: 12px;  font-weight: 500;  box-shadow: 0 4px 10px rgba(0,0,0,0.2);  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;}

.social-btn {
    width:40px;
  height:40px;
  background-color: #ffffff;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);  display: flex;
  align-items: center;  justify-content: center;
  text-decoration: none;}

.social-icon {  width: 24px;
  height: 24px;}

.social-float:hover .social-label {  opacity: 1;
  transform: translateX(0);}
  
.social-btn:hover{
  transform:translateY(-4px);}

  .print-item {  break-inside: avoid;
  page-break-inside: avoid;}