/*
Theme Name: House of Havendale
Theme URI: https://houseofhavendale.com
Author: House of Havendale
Author URI: https://houseofhavendale.com
Description: Custom one-page theme for House of Havendale, a premium design-build studio in Northeast India.
Version: 1.0
License: Proprietary
Text Domain: havendale
*/

  :root{
    --ink:#1F2E27;
    --ink-soft:#2C4A3B;
    --cream:#F5F1E8;
    --paper:#FBF9F4;
    --gold:#B8935F;
    --bronze:#8A6A3E;
    --text:#2A2C28;
    --text-soft:#5C6058;
    --line:rgba(31,46,39,0.14);
    --line-on-dark:rgba(245,241,232,0.22);
    --max:1180px;
    --serif:'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:90px;}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; line-height:1.12;}
  p{margin:0;}
  .eyebrow{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--bronze); letter-spacing:0.02em;}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
    font-family:var(--sans); font-size:15px; font-weight:600; text-decoration:none;
    border-radius:2px; border:1px solid transparent; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-primary{background:var(--gold); color:var(--ink); border-color:var(--gold);}
  .btn-primary:hover{background:#c9a370;}
  .btn-ghost-dark{background:transparent; color:var(--cream); border-color:var(--line-on-dark);}
  .btn-ghost-dark:hover{border-color:var(--gold); color:var(--gold);}
  .btn-ghost-light{background:transparent; color:var(--ink); border-color:var(--line);}
  .btn-ghost-light:hover{border-color:var(--bronze); color:var(--bronze);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

  /* NAV */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(251,249,244,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand svg{width:26px; height:26px;}
  .brand-word{font-family:var(--serif); font-size:19px; color:var(--ink); letter-spacing:0.02em;}
  nav.links{display:flex; gap:32px; font-size:14px; font-weight:500;}
  nav.links a{text-decoration:none; color:var(--text); padding:4px 0; border-bottom:1px solid transparent;}
  nav.links a:hover{border-color:var(--gold);}
  .nav-cta{display:flex; align-items:center; gap:20px;}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-btn span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

  /* HERO */
  .hero{
    background:var(--ink); color:var(--cream); position:relative; overflow:hidden;
    padding:170px 0 120px;
  }
  .hero-mark{
    position:absolute; right:-60px; top:50%; transform:translateY(-50%);
    width:560px; height:560px; opacity:0.10; pointer-events:none;
  }
  .hero-inner{max-width:640px; position:relative; z-index:1;}
  .hero .eyebrow{color:var(--gold);}
  .hero h1{font-size:52px; margin-top:18px; color:var(--cream);}
  .hero p.lede{margin-top:24px; font-size:18px; color:rgba(245,241,232,0.82); max-width:520px;}
  .hero-actions{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
  .hero-meta{
    display:flex; gap:40px; margin-top:80px; padding-top:32px; border-top:1px solid var(--line-on-dark);
    max-width:640px;
  }
  .hero-meta div span{display:block;}
  .hero-meta .num{font-family:var(--serif); font-size:28px; color:var(--gold);}
  .hero-meta .lbl{font-size:13px; color:rgba(245,241,232,0.65); margin-top:4px;}

  section{padding:110px 0;}
  .section-head{max-width:620px; margin-bottom:56px;}
  .section-head h2{font-size:36px; margin-top:14px;}
  .section-head p{margin-top:18px; font-size:17px; color:var(--text-soft);}

  /* INTRO */
  .intro{background:var(--paper);}
  .intro-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
  .intro-grid p{font-size:17px; color:var(--text-soft); margin-bottom:18px;}
  .intro-grid .lead{font-family:var(--serif); font-size:24px; color:var(--ink); line-height:1.45; margin-bottom:0;}

  /* CONTEXT / built for northeast */
  .context{background:var(--ink); color:var(--cream);}
  .context .eyebrow{color:var(--gold);}
  .context-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
  .context h2{color:var(--cream); font-size:34px; margin-top:14px;}
  .context p{color:rgba(245,241,232,0.78); font-size:17px; margin-top:20px;}
  .terrain{width:100%; height:auto;}

  /* SERVICES — list, not cards */
  .services{background:var(--paper);}
  .service-list{border-top:1px solid var(--line);}
  .service-row{
    display:grid; grid-template-columns:220px 1fr 1fr; gap:32px;
    padding:36px 0; border-bottom:1px solid var(--line); align-items:start;
  }
  .service-row h3{font-size:23px;}
  .service-row .desc{color:var(--text-soft); font-size:16px;}
  .service-row .fit{font-size:14px; color:var(--bronze);}
  .service-row .fit strong{display:block; color:var(--ink); font-weight:600; margin-bottom:4px; font-family:var(--sans);}

  /* PROCESS */
  .process{background:var(--ink); color:var(--cream);}
  .process .eyebrow{color:var(--gold);}
  .process h2{color:var(--cream);}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-dark); margin-top:56px; border:1px solid var(--line-on-dark);}
  .step{background:var(--ink); padding:36px 28px;}
  .step .n{font-family:var(--serif); font-size:34px; color:var(--gold);}
  .step h3{color:var(--cream); font-size:19px; margin-top:16px;}
  .step p{color:rgba(245,241,232,0.72); font-size:15px; margin-top:12px;}

  /* WHY US */
  .why{background:var(--paper);}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
  .why-item{padding:32px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  .why-item h3{font-size:18px; font-family:var(--sans); font-weight:600; display:flex; align-items:center; gap:12px;}
  .why-item h3 .tick{width:20px; height:20px; flex:none; color:var(--gold);}
  .why-item p{margin-top:10px; color:var(--text-soft); font-size:15px; padding-left:32px;}

  /* PORTFOLIO */
  .portfolio{background:var(--ink); color:var(--cream);}
  .portfolio .eyebrow{color:var(--gold);}
  .portfolio h2{color:var(--cream);}
  .proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:56px;}
  .proj{aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--ink-soft);}
  .proj svg{position:absolute; inset:0; width:100%; height:100%;}
  .proj .cap{position:absolute; left:0; right:0; bottom:0; padding:20px; background:linear-gradient(to top, rgba(15,20,17,0.85), transparent);}
  .proj .cap .name{font-family:var(--serif); font-size:17px; color:var(--cream);}
  .proj .cap .loc{font-size:12px; color:var(--gold); margin-top:2px;}

  /* SERVICE AREA */
  .areas{background:var(--paper); text-align:center;}
  .areas .section-head{margin-left:auto; margin-right:auto; text-align:center;}
  .area-list{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-top:16px; max-width:760px; margin-left:auto; margin-right:auto;}
  .area-list span{font-family:var(--serif); font-size:19px; color:var(--ink);}
  .area-list .dot{color:var(--gold); margin:0 4px;}

  /* CONTACT */
  .contact{background:var(--ink); color:var(--cream);}
  .contact .eyebrow{color:var(--gold);}
  .contact h2{color:var(--cream);}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:48px;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:13px; color:rgba(245,241,232,0.7); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; background:rgba(245,241,232,0.06); border:1px solid var(--line-on-dark);
    color:var(--cream); padding:12px 14px; font-family:var(--sans); font-size:15px; border-radius:2px;
  }
  .field input::placeholder, .field textarea::placeholder{color:rgba(245,241,232,0.4);}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .info-block{margin-bottom:36px;}
  .info-block h3{color:var(--gold); font-size:14px; font-family:var(--sans); font-weight:600; margin-bottom:10px;}
  .info-block p{color:rgba(245,241,232,0.85); font-size:16px; line-height:1.7;}
  .socials{display:flex; gap:18px; margin-top:8px;}
  .socials a{font-size:14px; color:rgba(245,241,232,0.75); text-decoration:none; border-bottom:1px solid var(--line-on-dark);}
  .socials a:hover{color:var(--gold); border-color:var(--gold);}

  /* FOOTER */
  footer{background:#16221C; color:rgba(245,241,232,0.65); padding:56px 0 32px;}
  .foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line-on-dark);}
  .foot-brand{display:flex; align-items:center; gap:10px;}
  .foot-brand svg{width:24px; height:24px; opacity:0.85;}
  .foot-brand span{font-family:var(--serif); font-size:18px; color:var(--cream);}
  .foot-links{display:flex; gap:36px; font-size:14px;}
  .foot-links a{text-decoration:none; color:rgba(245,241,232,0.65);}
  .foot-links a:hover{color:var(--gold);}
  .foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:13px;}

  @media (max-width:980px){
    .intro-grid, .context-grid, .contact-grid{grid-template-columns:1fr; gap:36px;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr;}
    .proj-grid{grid-template-columns:repeat(2,1fr);}
    .service-row{grid-template-columns:1fr; gap:10px;}
    .hero h1{font-size:40px;}
    .hero-mark{width:380px; height:380px; opacity:0.08;}
  }
  /* WHATSAPP */
  .wa-float{
    position:fixed; right:24px; bottom:24px; z-index:60;
    width:58px; height:58px; border-radius:50%; background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.28); text-decoration:none;
    transition:transform .2s ease;
  }
  .wa-float:hover{transform:scale(1.06);}
  .wa-float svg{width:30px; height:30px;}
  .wa-btn{
    display:inline-flex; align-items:center; gap:10px; padding:13px 24px;
    background:#25D366; color:#0b2b1c; border-radius:2px; text-decoration:none;
    font-family:var(--sans); font-size:15px; font-weight:600;
  }
  .wa-btn svg{width:19px; height:19px;}
  @media (max-width:680px){
    .wrap{padding:0 20px;}
    nav.links{display:none;}
    .menu-btn{display:block;}
    .nav{padding:14px 20px;}
    .brand-word{font-size:15px;}
    .nav-cta{gap:10px;}
    .nav-cta .btn{padding:10px 14px; font-size:13px;}
    .hero{padding:140px 0 80px;}
    .hero h1{font-size:32px;}
    .hero-meta{flex-wrap:wrap; gap:28px;}
    section{padding:72px 0;}
    .steps{grid-template-columns:1fr;}
    .proj-grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
    .foot-top{flex-direction:column;}
  }

  /* POLICY / GENERIC PAGES */
  .policy-hero{background:var(--ink); color:var(--cream); padding:170px 0 60px;}
  .policy-hero h1{color:var(--cream); font-size:38px;}
  .policy-hero p{color:rgba(245,241,232,0.7); margin-top:10px; font-size:14px;}
  .policy-body{background:var(--paper); padding:70px 0 110px;}
  .policy-content{max-width:760px; margin:0 auto;}
  .policy-content h2{font-size:22px; margin-top:44px; margin-bottom:14px;}
  .policy-content h2:first-child{margin-top:0;}
  .policy-content p{color:var(--text-soft); font-size:16px; margin-bottom:16px; line-height:1.75;}
  .policy-content ul{color:var(--text-soft); font-size:16px; line-height:1.75; padding-left:22px; margin-bottom:16px;}
  .policy-content li{margin-bottom:8px;}
  .policy-content a{color:var(--bronze); text-decoration:underline;}

  /* CTA BLOCK inside blog articles */
  .cta-block{
    background:var(--ink); color:var(--cream); padding:36px 40px; margin:48px 0;
    border-left:4px solid var(--gold);
  }
  .cta-block h3{color:var(--cream); font-size:22px; margin-bottom:12px; font-family:var(--serif);}
  .cta-block p{color:rgba(245,241,232,0.82); font-size:16px; margin-bottom:18px;}
  .cta-block .cta-button{
    display:inline-block; background:var(--gold); color:var(--ink); padding:12px 26px;
    text-decoration:none; font-weight:600; font-size:15px; border-radius:2px;
  }
  .cta-block .cta-button:hover{background:#c9a370;}

  /* BLOG LISTING */
  .blog-listing{background:var(--paper); padding:80px 0 110px;}
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
  .blog-card{display:block; text-decoration:none; color:inherit;}
  .blog-card-img{aspect-ratio:16/9; overflow:hidden; background:var(--ink);}
  .blog-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
  .blog-card:hover .blog-card-img img{transform:scale(1.04);}
  .blog-card-body{padding-top:18px;}
  .blog-card-cat{font-size:12px; color:var(--bronze); font-weight:600; letter-spacing:1px; text-transform:uppercase;}
  .blog-card h2{font-size:21px; color:var(--ink); margin-top:8px; line-height:1.3;}
  .blog-card p{font-size:14px; color:var(--text-soft); margin-top:8px; line-height:1.6;}
  .blog-card-link{display:inline-block; margin-top:12px; font-size:13px; color:var(--bronze); font-weight:600;}
  .blog-pagination{margin-top:60px; display:flex; justify-content:center; gap:16px;}
  .blog-pagination a, .blog-pagination span{padding:8px 16px; border:1px solid var(--line); font-size:14px; text-decoration:none; color:var(--ink);}
  .blog-pagination .current{background:var(--ink); color:var(--cream); border-color:var(--ink);}

  /* SINGLE POST */
  .single-post-hero{padding-bottom:0;}
  .single-post-featured-img{max-width:900px; margin:-40px auto 0; padding:0 32px;}
  .single-post-featured-img img{width:100%; height:auto; display:block;}
  .single-post-content h2{font-family:var(--serif);}
  .single-post-content strong{color:var(--ink);}
  .single-post-back{max-width:760px; margin:0 auto; padding-top:20px; border-top:1px solid var(--line);}
  .single-post-back a{color:var(--bronze); text-decoration:none; font-size:15px; font-weight:600;}

  @media (max-width:980px){
    .blog-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:680px){
    .blog-grid{grid-template-columns:1fr;}
    .cta-block{padding:28px 24px;}
  }