/* ==========================================================================
   HANIYA INTERIOR DESIGN — custom.css
   Paste this entire file into WordPress Customizer → Additional CSS
   after the Elementor template has been built.
   ========================================================================== */

/* ---- Design tokens ---- */
:root{
  --color-bg:            #FBF8F3;   /* warm ivory page background */
  --color-bg-alt:        #F1EAD e0; /* fallback, overridden below */
  --color-bg-alt:        #F1EADD;   /* deeper cream section background */
  --color-ink:           #211D1A;   /* near-black charcoal, dark sections */
  --color-ink-soft:      #322C26;   /* charcoal, slightly lighter */
  --color-brass:         #B08D57;   /* primary accent — brass hardware */
  --color-brass-deep:    #8C6D3F;   /* brass hover / pressed */
  --color-brass-pale:    #E7D9BE;   /* brass tint for hairlines on dark */
  --color-sage:          #5F6F52;   /* secondary accent — fresh herb green */
  --color-sage-deep:     #47543D;
  --color-text:          #2B2622;   /* body text on light bg */
  --color-text-muted:    #6E6459;   /* secondary text on light bg */
  --color-cream-text:    #F5EFE4;   /* text on dark bg */
  --color-cream-muted:   #C8BEAE;   /* secondary text on dark bg */
  --color-line:          #DDD2C0;   /* hairline borders on light bg */
  --color-line-dark:     #453E36;   /* hairline borders on dark bg */
  --color-card:          #FFFFFF;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  --shadow-card: 0 1px 2px rgba(33,29,26,0.04), 0 12px 28px -14px rgba(33,29,26,0.18);
  --shadow-float: 0 20px 45px -18px rgba(33,29,26,0.35);
}

html{scroll-behavior:smooth;}
@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;}
}

body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
}

/* ---- Skip link ---- */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--color-ink);
  color:var(--color-cream-text);
  padding:12px 20px;
  z-index:999;
  border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-body);
  font-weight:600;
}
.skip-link:focus{
  left:0;
  top:0;
}

/* ---- Focus states (accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--color-brass);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- Typography rhythm ---- */
.hn-eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--color-brass-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hn-eyebrow::before{
  content:"";
  display:inline-block;
  width:28px;
  height:1px;
  background:var(--color-brass);
}
.hn-eyebrow--onDark{color:var(--color-brass-pale);}

.hn-heading{
  font-family:var(--font-display);
  color:var(--color-ink);
  letter-spacing:-0.01em;
  font-weight:600;
  line-height:1.05;
}
.hn-heading--onDark{color:var(--color-cream-text);}
.hn-heading em{
  font-style:italic;
  font-weight:400;
  color:var(--color-brass-deep);
}
.hn-heading--onDark em{color:var(--color-brass);}

.hn-body-text{
  font-family:var(--font-body);
  color:var(--color-text-muted);
  line-height:1.7;
}
.hn-body-text--onDark{color:var(--color-cream-muted);}

/* ---- Measuring-tape rule motif (signature detail) ---- */
.hn-tape-rule{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:16px;
  margin:18px 0 0;
}
.hn-tape-rule span{
  display:block;
  width:1px;
  background:var(--color-brass);
  opacity:0.55;
}
.hn-tape-rule span:nth-child(odd){height:16px;}
.hn-tape-rule span:nth-child(even){height:8px;}
.hn-tape-rule--onDark span{background:var(--color-brass-pale);}

/* ---- Header ---- */
.hn-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent;
  transition:background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, backdrop-filter .35s ease;
  padding:22px 0;
}
.hn-header.is-scrolled{
  background:rgba(251,248,243,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--color-line), 0 12px 30px -20px rgba(33,29,26,0.3);
  padding:12px 0;
}
.hn-logo-word{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.5rem;
  color:var(--color-cream-text);
  letter-spacing:0.01em;
  transition:color .35s ease;
}
.hn-header.is-scrolled .hn-logo-word{color:var(--color-ink);}
.hn-logo-sub{
  font-family:var(--font-body);
  font-size:0.6rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--color-brass-pale);
  transition:color .35s ease;
}
.hn-header.is-scrolled .hn-logo-sub{color:var(--color-brass-deep);}

.hn-nav-link{
  font-family:var(--font-body);
  font-size:0.86rem;
  font-weight:500;
  color:var(--color-cream-text);
  position:relative;
  padding-bottom:4px;
  transition:color .3s ease;
}
.hn-header.is-scrolled .hn-nav-link{color:var(--color-ink-soft);}
.hn-nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--color-brass);
  transition:width .3s ease;
}
.hn-nav-link:hover::after,
.hn-nav-link.is-active::after{width:100%;}
.hn-nav-link.is-active{color:var(--color-brass);}
.hn-header.is-scrolled .hn-nav-link.is-active{color:var(--color-brass-deep);}

.hn-btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.02em;
  border-radius:999px;
  padding:13px 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.hn-btn--brass{
  background:var(--color-brass);
  color:var(--color-ink);
}
.hn-btn--brass:hover{background:var(--color-brass-deep); color:var(--color-cream-text); transform:translateY(-2px); box-shadow:var(--shadow-float);}
.hn-btn--outline{
  background:transparent;
  color:var(--color-cream-text);
  border:1px solid rgba(245,239,228,0.5);
}
.hn-btn--outline:hover{border-color:var(--color-brass); color:var(--color-brass); transform:translateY(-2px);}
.hn-btn--ink{
  background:var(--color-ink);
  color:var(--color-cream-text);
}
.hn-btn--ink:hover{background:var(--color-brass-deep); color:var(--color-ink); transform:translateY(-2px); box-shadow:var(--shadow-float);}
.hn-btn--ink-outline{
  background:transparent;
  color:var(--color-ink);
  border:1px solid var(--color-ink);
}
.hn-btn--ink-outline:hover{background:var(--color-ink); color:var(--color-cream-text);}

.hn-mobile-toggle{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid rgba(245,239,228,0.4);
}
.hn-header.is-scrolled .hn-mobile-toggle{border-color:var(--color-line);}
.hn-mobile-toggle span{
  color:var(--color-cream-text);
}
.hn-header.is-scrolled .hn-mobile-toggle span{color:var(--color-ink);}

.hn-mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  background:var(--color-bg);
  border-top:1px solid var(--color-line);
}
.hn-mobile-menu.is-open{max-height:520px;}

/* ---- Hero ---- */
.hn-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-color:var(--color-ink);
}
.hn-hero-media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 60%;
}
.hn-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,17,14,0.72) 0%, rgba(20,17,14,0.52) 42%, rgba(20,17,14,0.86) 100%);
}
.hn-hero-inner{position:relative; z-index:2;}

.hn-hero h1{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.015em;
}

.hn-feature-section{
  background:var(--color-bg);
  padding:56px 0 64px;
}
.hn-feature-strip{
  position:relative;
  z-index:3;
}
.hn-feature-card{
  background:var(--color-card);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:26px 22px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hn-feature-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-float);}
.hn-feature-icon{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-brass-deep);
  margin-bottom:16px;
}

/* ---- Sections ---- */
.hn-section{padding:110px 0;}
.hn-section--tight{padding:88px 0;}
.hn-section--alt{background:var(--color-bg-alt);}
.hn-section--ink{
  background:var(--color-ink);
  color:var(--color-cream-text);
}

/* ---- About ---- */
.hn-about-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.hn-about-badge{
  position:absolute;
  left:-24px;
  bottom:-24px;
  background:var(--color-ink);
  color:var(--color-cream-text);
  border-radius:var(--radius-md);
  padding:22px 26px;
  box-shadow:var(--shadow-float);
  border:1px solid var(--color-line-dark);
}
@media (max-width:767px){
  .hn-about-badge{left:16px; bottom:-20px; padding:16px 18px;}
}
.hn-about-badge .hn-badge-number{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--color-brass);
  line-height:1;
}

.hn-value-icon{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--color-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-brass-deep);
  flex:none;
}

/* ---- Before / After slider (signature interactive element) ---- */
.hn-compare{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-float);
  user-select:none;
  touch-action:pan-y;
  background:#000;
}
.hn-compare-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hn-compare-before{z-index:1;}
.hn-compare-after{
  z-index:2;
  clip-path:inset(0 50% 0 0);
}
.hn-compare-tag{
  position:absolute;
  top:18px;
  z-index:3;
  background:rgba(33,29,26,0.72);
  color:var(--color-cream-text);
  font-family:var(--font-body);
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}
.hn-compare-tag--before{left:18px;}
.hn-compare-tag--after{right:18px;}
.hn-compare-handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  z-index:4;
  width:0;
  transform:translateX(-50%);
  cursor:ew-resize;
}
.hn-compare-handle::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-1px;
  width:2px;
  background:var(--color-cream-text);
}
.hn-compare-grip{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:var(--color-cream-text);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-ink);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.hn-compare-range{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:5;
}

/* ---- Services grid ---- */
.hn-service-card{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:1/1;
  isolation:isolate;
}
.hn-service-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.hn-service-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(33,29,26,0) 35%, rgba(20,17,14,0.9) 100%);
  z-index:1;
}
.hn-service-card:hover img{transform:scale(1.08);}
.hn-service-card-body{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:20px;
}
.hn-service-card-title{
  font-family:var(--font-display);
  color:var(--color-cream-text);
  font-size:1.05rem;
  font-weight:600;
}
.hn-service-card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--color-brass);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-top:8px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.hn-service-card:hover .hn-service-card-link,
.hn-service-card:focus-within .hn-service-card-link{opacity:1; transform:translateY(0);}

/* ---- Process / promise ---- */
.hn-process-card{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:30px 22px;
  height:100%;
  transition:border-color .3s ease, transform .3s ease;
}
.hn-process-card:hover{border-color:var(--color-brass); transform:translateY(-4px);}
.hn-process-index{
  font-family:var(--font-display);
  font-style:italic;
  font-size:0.95rem;
  color:var(--color-brass-deep);
}

/* ---- Stats bar ---- */
.hn-stats-bar{
  background:var(--color-ink);
  border-top:1px solid var(--color-line-dark);
  border-bottom:1px solid var(--color-line-dark);
}
.hn-stat-figure{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.4rem);
  color:var(--color-brass);
  line-height:1;
}
.hn-stat-label{
  font-family:var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--color-cream-muted);
}
.hn-stat-divider{
  width:1px;
  background:var(--color-line-dark);
}

/* ---- CTA banner ---- */
.hn-cta-banner{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background-color:var(--color-ink);
}
.hn-cta-media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.hn-cta-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,17,14,0.92) 20%, rgba(20,17,14,0.55) 100%);
}

/* ---- Why choose ---- */
.hn-choose-item{
  border:1px solid var(--color-line-dark);
  border-radius:var(--radius-md);
  padding:26px;
  transition:background-color .3s ease, border-color .3s ease;
}
.hn-choose-item:hover{background:rgba(176,141,87,0.08); border-color:var(--color-brass);}
.hn-choose-number{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--color-brass);
  font-size:1rem;
}

/* ---- Reviews ---- */
.hn-review-card{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:28px;
  box-shadow:var(--shadow-card);
  height:100%;
}
.hn-star-row{color:var(--color-brass); display:flex; gap:3px;}
.hn-review-avatar{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--color-bg-alt);
  color:var(--color-ink);
  font-family:var(--font-display);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---- Service areas / map ---- */
.hn-area-chip{
  border:1px solid var(--color-line);
  border-radius:999px;
  padding:9px 18px;
  font-size:0.85rem;
  color:var(--color-text);
  transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.hn-area-chip:hover{border-color:var(--color-brass); color:var(--color-brass-deep); background:var(--color-bg-alt);}
.hn-map-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-card);
}

/* ---- Contact ---- */
.hn-contact-panel{
  background:var(--color-ink);
  color:var(--color-cream-text);
  border-radius:var(--radius-lg);
}
.hn-form-field label{
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--color-cream-muted);
  display:block;
  margin-bottom:8px;
}
.hn-form-field input,
.hn-form-field textarea,
.hn-form-field select{
  width:100%;
  background:rgba(245,239,228,0.06);
  border:1px solid var(--color-line-dark);
  border-radius:var(--radius-sm);
  padding:13px 14px;
  color:var(--color-cream-text);
  font-family:var(--font-body);
  font-size:0.92rem;
}
.hn-form-field input::placeholder,
.hn-form-field textarea::placeholder{color:var(--color-cream-muted); opacity:0.7;}
.hn-form-field input:focus,
.hn-form-field textarea:focus,
.hn-form-field select:focus{border-color:var(--color-brass); outline:none;}

.hn-form-field input.has-error,
.hn-form-field textarea.has-error,
.hn-form-field select.has-error{border-color:#D9534F;}
.hn-form-error{
  min-height:1em;
  margin-top:6px;
  font-size:0.78rem;
  color:#E8837E;
}
.hn-form-status{
  font-size:0.85rem;
  margin-top:12px;
}
.hn-form-status.is-error{color:#E8837E;}
.hn-form-status.is-success{color:var(--color-brass-pale);}

.hn-contact-info-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid var(--color-line);
}
.hn-contact-info-item:last-child{border-bottom:none;}
.hn-contact-info-icon{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--color-bg-alt);
  color:var(--color-brass-deep);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}

/* ---- Footer ---- */
.hn-footer{
  background:var(--color-ink);
  color:var(--color-cream-muted);
}
.hn-footer a{transition:color .25s ease;}
.hn-footer a:hover{color:var(--color-brass);}
.hn-footer-heading{
  font-family:var(--font-body);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--color-cream-text);
  margin-bottom:20px;
}
.hn-social-icon{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--color-line-dark);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-cream-text);
  transition:border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}
.hn-social-icon:hover{background:var(--color-brass); border-color:var(--color-brass); color:var(--color-ink); transform:translateY(-3px);}

/* ---- Sticky Call / WhatsApp buttons ---- */
.hn-sticky-btn{
  position:fixed;
  bottom:24px;
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-float);
  z-index:95;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hn-sticky-btn:hover{transform:translateY(-3px) scale(1.05);}
.hn-sticky-call{
  left:24px;
  background:var(--color-ink);
  color:var(--color-cream-text);
}
.hn-sticky-call:hover{background:var(--color-brass); color:var(--color-ink);}
.hn-sticky-whatsapp{
  right:24px;
  background:#25D366;
  color:#FFFFFF;
}
.hn-sticky-whatsapp:hover{background:#1EBE5A;}

@media (max-width:480px){
  .hn-sticky-btn{width:50px; height:50px; bottom:16px;}
  .hn-sticky-call{left:16px;}
  .hn-sticky-whatsapp{right:16px;}
}

/* ---- Back to top ---- */
.hn-to-top{
  position:fixed;
  right:24px;
  bottom:92px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--color-ink);
  color:var(--color-cream-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-float);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .3s ease;
  z-index:90;
}
.hn-to-top.is-visible{opacity:1; visibility:visible; transform:translateY(0);}
.hn-to-top:hover{background:var(--color-brass); color:var(--color-ink);}

/* ---- Reveal-on-scroll (subtle, respects reduced motion) ---- */
.hn-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.hn-reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---- Utility: fluid section headers width ---- */
.hn-section-head{max-width:640px;}