/* ============================================
   INTERIOR STUDIO — shared stylesheet
   Colors lifted from logo (orange/blue/butterfly)
   ============================================ */

:root{
  /* Brand — from logo */
  --orange:#E59B2C;
  --orange-d:#C2811F;
  --orange-l:#F0BF7B;
  --blue:#2E8C6A;
  --blue-d:#0F5C44;
  --blue-l:#5FA88E;
  --pink:#E64A9C;
  --yellow:#F7B500;
  --green:#4CAF50;
  --purple:#0C4A37;

  /* Surface — clean white with subtle warm grey alts */
  --bg:#FFFFFF;
  --bg-2:#FAFAF8;
  --bg-3:#F4F2EE;
  --white:#FFFFFF;
  --ink:#1A1A2E;
  --ink-2:#35354A;
  --mute:#6B6B7B;
  --line:#EAE7E1;
  --line-2:#F1EFE9;

  --shadow-sm:0 2px 14px rgba(26,26,46,.06);
  --shadow-md:0 14px 40px rgba(229,155,44,.14);
  --shadow-lg:0 24px 60px rgba(46,140,106,.2);

  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Poppins',system-ui,sans-serif;
  --script:'Caveat',cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit;transition:color .3s}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ============ TYPOGRAPHY ============ */
.serif{font-family:var(--serif)}
.script{font-family:var(--script);color:var(--orange);font-size:1.35rem;display:inline-block}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--orange);display:inline-block;margin-bottom:10px}

/* ============ LAYOUT ============ */
.section{padding:100px 0;position:relative}
.section-sm{padding:70px 0}
.bg-soft{background:var(--bg-2)}
.bg-cream{background:var(--bg-3)}
.bg-ink{background:var(--ink);color:var(--white)}

.section-title{text-align:center;max-width:720px;margin:0 auto 60px}
.section-title h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px}
.section-title h2 em{font-style:italic;color:var(--orange)}
.section-title h2 .hl-blue{color:var(--blue)}
.section-title p{color:var(--mute);font-size:1rem;line-height:1.8;max-width:560px;margin:0 auto}

.divider-dot{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 22px}
.divider-dot span{width:6px;height:6px;border-radius:50%}
.divider-dot span:nth-child(1){background:var(--orange)}
.divider-dot span:nth-child(2){background:var(--pink)}
.divider-dot span:nth-child(3){background:var(--yellow)}
.divider-dot span:nth-child(4){background:var(--green)}
.divider-dot span:nth-child(5){background:var(--blue)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:13px 26px;border-radius:50px;font-size:.92rem;letter-spacing:.01em;transition:all .35s var(--ease);cursor:pointer;white-space:nowrap}
.btn-orange{background:linear-gradient(135deg,#C2811F 0%,#E59B2C 100%);color:#fff;border:1.5px solid #C2811F}
.btn-orange:hover{background:linear-gradient(135deg,#9E6816 0%,#C2811F 100%);border-color:#9E6816;transform:translateY(-2px);box-shadow:0 12px 30px rgba(229,155,44,.4);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 12px 30px rgba(46,140,106,.4);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-outline-orange{color:var(--orange-d);border:1.5px solid var(--orange);background:transparent}
.btn-outline-orange:hover{background:var(--orange);color:var(--ink)}
.btn-outline-blue{color:var(--blue);border:1.5px solid var(--blue);background:transparent}
.btn-outline-blue:hover{background:var(--blue);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--bg);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:.82rem}
.btn-lg{padding:16px 32px;font-size:1rem}

/* ============ TOP STRIP ============ */
.top-strip{background:var(--ink);color:rgba(255,255,255,.85);font-size:.78rem;padding:9px 0}
.top-strip .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.top-strip i{color:var(--yellow);margin-right:6px}
.top-strip .right a{color:rgba(255,255,255,.85);margin-left:22px}
.top-strip .right a:hover{color:var(--yellow)}

/* ============ HEADER ============ */
.site-header{background:var(--white);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:800;transition:all .3s var(--ease)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;height:88px;gap:30px;transition:height .3s}
.site-header.scrolled .header-inner{height:72px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:54px;width:auto;transition:height .3s}
.site-header.scrolled .brand img{height:44px}
.main-nav{display:flex;align-items:center;gap:28px;margin-left:20px}
.main-nav>li{position:relative}
.main-nav>li>a{font-size:.92rem;font-weight:500;color:var(--ink);padding:8px 0;display:inline-flex;align-items:center;gap:4px;position:relative}
.main-nav>li>a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.main-nav>li>a:hover::after,.main-nav>li.active>a::after{transform:scaleX(1)}
.main-nav>li>a:hover,.main-nav>li.active>a{color:var(--orange)}
.main-nav .has-dropdown>a::after{content:''}
.main-nav .has-dropdown .caret{display:inline-block;margin-left:2px;font-size:.7rem;transition:transform .3s}
.main-nav .has-dropdown:hover .caret{transform:rotate(180deg)}

.dropdown{position:absolute;top:calc(100% + 8px);left:-20px;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.12);padding:14px;min-width:260px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s var(--ease);border:1px solid var(--line-2)}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 14px;font-size:.86rem;color:var(--ink);border-radius:10px;transition:all .25s;display:flex;align-items:center;gap:10px}
.dropdown a i{color:var(--orange);font-size:1rem;width:20px}
.dropdown a:hover{background:var(--bg);color:var(--orange)}
.dropdown .dd-section{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:8px 14px 4px}
.dropdown .dd-divider{height:1px;background:var(--line-2);margin:6px 10px}

.header-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--line-2);transition:all .3s}
.icon-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.hamburger{display:none;width:42px;height:42px;border-radius:50%;background:var(--bg);color:var(--ink);font-size:1.4rem;align-items:center;justify-content:center}

/* ============ MOBILE DRAWER ============ */
.drawer-backdrop{position:fixed;inset:0;background:rgba(26,26,46,.5);z-index:1090 !important;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background:#fff;z-index:1100 !important;transform:translateX(-100%);transition:transform .4s var(--ease);overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.15)}
.mobile-drawer.show{transform:translateX(0)}
.drawer-head{padding:26px 22px;background:linear-gradient(135deg,var(--orange) 0%,var(--pink) 100%);color:var(--ink);position:relative}
.drawer-head img{height:48px;background:#fff;padding:6px 10px;border-radius:8px;margin-bottom:10px}
.drawer-head .tag{font-family:var(--script);font-size:1.3rem}
.drawer-close{position:absolute;top:16px;right:16px;color:var(--ink);font-size:1.3rem;width:36px;height:36px;display:grid;place-items:center}
.drawer-nav{padding:12px 0 30px}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:13px 22px;font-size:.94rem;color:var(--ink);transition:all .25s;border-left:3px solid transparent}
.drawer-nav a:hover{background:var(--bg);color:var(--orange);border-left-color:var(--orange)}
.drawer-nav a i{color:var(--blue);font-size:1.05rem;width:22px}
.drawer-nav .section{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);padding:14px 22px 6px}

/* ============ HERO CAROUSEL ============ */
.hero{position:relative;background:var(--bg-2)}
.hero-slide{position:relative;height:640px;overflow:hidden}
.hero-slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:heroZoom 10s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,46,.78) 0%,rgba(229,155,44,.25) 55%,rgba(46,140,106,.15) 100%);z-index:1}

/* Confetti dots in section backgrounds */
.confetti-bg{position:relative;overflow:hidden}
.confetti-bg::before{content:'';position:absolute;top:40px;right:-60px;width:300px;height:300px;background:radial-gradient(circle,var(--orange) 0%,transparent 70%);opacity:.08;border-radius:50%;pointer-events:none}
.confetti-bg::after{content:'';position:absolute;bottom:40px;left:-60px;width:300px;height:300px;background:radial-gradient(circle,var(--blue) 0%,transparent 70%);opacity:.08;border-radius:50%;pointer-events:none}

/* Colorful section stripes */
.rainbow-bar{height:6px;background:linear-gradient(to right,var(--orange) 0%,var(--orange) 20%,var(--pink) 20%,var(--pink) 40%,var(--yellow) 40%,var(--yellow) 60%,var(--green) 60%,var(--green) 80%,var(--blue) 80%,var(--blue) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:760px;padding:60px 70px;color:#fff}
.hero-content .script{color:var(--yellow);font-size:1.6rem;margin-bottom:10px}
.hero-content h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.hero-content h1 em{font-style:italic;color:var(--orange-l);font-weight:400}
.hero-content h1 .blue{color:var(--blue-l)}
.hero-content .sub{font-size:1.05rem;color:rgba(255,255,255,.9);margin-bottom:30px;max-width:540px;line-height:1.7}
.hero-content .buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:4px;margin-bottom:10px}
.hero-content .buttons .btn,
.hero-content .buttons .btn-lg{min-height:54px;display:inline-flex;align-items:center;justify-content:center}
.carousel-dots{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.carousel-dots button{width:36px;height:3px;background:rgba(255,255,255,.4);border-radius:2px;transition:all .35s}
.carousel-dots button.active{background:var(--orange);width:52px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;font-size:1.2rem;transition:all .3s;border:1px solid rgba(255,255,255,.2)}
.hero-arrow:hover{background:var(--orange);border-color:var(--orange)}
.hero-arrow.prev{left:20px}
.hero-arrow.next{right:20px}

/* ============ WHY CARDS ============ */
.why-card{background:#fff;padding:34px 26px;border-radius:20px;text-align:center;height:100%;border:1px solid var(--line-2);transition:all .4s var(--ease);position:relative;overflow:hidden}
.why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.why-card:hover::before{transform:scaleX(1)}
.why-card .ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;margin:0 auto 20px;transition:transform .4s var(--spring)}
.why-card:hover .ic{transform:rotate(-10deg) scale(1.1)}
.why-card.orange .ic{background:rgba(229,155,44,.12);color:var(--orange)}
.why-card.blue .ic{background:rgba(46,140,106,.12);color:var(--blue)}
.why-card.pink .ic{background:rgba(230,74,156,.12);color:var(--pink)}
.why-card.green .ic{background:rgba(76,175,80,.14);color:var(--green)}
.why-card.yellow .ic{background:rgba(247,181,0,.14);color:var(--yellow)}
.why-card.purple .ic{background:rgba(12,74,55,.12);color:var(--purple)}
.why-card h5{font-family:var(--serif);font-weight:500;font-size:1.22rem;margin-bottom:10px;color:var(--ink)}
.why-card p{font-size:.87rem;color:var(--mute);line-height:1.7;margin:0}

/* ============ SERVICE OVERVIEW CARDS ============ */
.service-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);height:100%;transition:all .45s var(--ease);position:relative;display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--orange)}
.service-card .media{aspect-ratio:16/10;overflow:hidden;position:relative}
.service-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.service-card:hover .media img{transform:scale(1.08)}
.service-card .badge-cat{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);color:var(--orange);padding:6px 14px;border-radius:30px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px)}
.service-card .body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.service-card h4{font-family:var(--serif);font-size:1.55rem;font-weight:500;margin-bottom:10px;color:var(--ink);letter-spacing:-.01em}
.service-card p{font-size:.9rem;color:var(--mute);margin-bottom:18px;flex:1}
.service-card .sub-list{list-style:none;margin-bottom:22px}
.service-card .sub-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.85rem;color:var(--ink-2);border-bottom:1px dashed var(--line-2)}
.service-card .sub-list li:last-child{border:none}
.service-card .sub-list i{color:var(--green);font-size:.9rem}
.service-card .arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--orange);font-size:.88rem;transition:gap .3s}
.service-card:hover .arrow-link{gap:14px}

/* ============ PORTFOLIO CARD ============ */
.portfolio-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);transition:all .45s var(--ease);display:block;color:var(--ink);height:100%;display:flex;flex-direction:column;position:relative}
.portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);color:var(--ink)}
.portfolio-card.featured{border-color:var(--orange)}
.portfolio-ribbon{position:absolute;top:14px;left:-4px;background:var(--orange);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.16em;padding:5px 14px;z-index:2;border-radius:3px;box-shadow:0 3px 10px rgba(229,155,44,.3)}
.pc-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--bg-3)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.portfolio-card:hover .pc-img img{transform:scale(1.06)}
.pc-hover{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,46,.85) 0%,transparent 55%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:20px;color:#fff}
.portfolio-card:hover .pc-hover{opacity:1}
.pc-hover .peek{font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pc-badge-top{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.95);color:var(--green);padding:5px 12px;border-radius:20px;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(6px)}
.pc-score{position:absolute;bottom:14px;left:14px;background:rgba(26,26,46,.88);color:#fff;padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(6px)}
.pc-score i{color:var(--orange)}
.pc-body{padding:16px 18px 6px;flex:1}
.pc-name{font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:4px;line-height:1.3}
.pc-meta{font-size:.78rem;color:var(--orange);font-weight:600;margin-bottom:10px;letter-spacing:.02em}
.pc-detail{font-size:.78rem;color:var(--mute);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.pc-detail i{color:var(--blue);font-size:.8rem;width:14px}
.pc-actions{padding:10px 18px 16px;display:flex;gap:8px}
.pc-btn{flex:1;padding:9px;border-radius:8px;background:var(--bg);color:var(--ink);font-size:.78rem;font-weight:600;text-align:center;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pc-btn.primary{background:var(--orange);color:#fff}
.pc-btn.primary:hover{background:var(--orange-d);color:#fff}
.pc-btn.fav{flex:0 0 40px;padding:9px}
.pc-btn.fav.active{background:var(--pink);color:#fff}

/* ============ PORTFOLIO FILTERS ============ */
.filter-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.filter-chip{padding:9px 22px;border:1.5px solid var(--line);border-radius:50px;background:transparent;color:var(--mute);font-size:.82rem;font-weight:600;letter-spacing:.03em;transition:all .3s;cursor:pointer}
.filter-chip:hover,.filter-chip.active{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ============ METRICS BAND ============ */
.metrics-band{background:linear-gradient(135deg,var(--ink) 0%,#2A2A4A 100%);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.metrics-band::before{content:'INTERIOR STUDIO';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:clamp(5rem,12vw,13rem);color:rgba(255,255,255,.03);font-style:italic;pointer-events:none;white-space:nowrap;letter-spacing:.12em;font-weight:500}
.metric{text-align:center;position:relative;z-index:1}
.metric i{font-size:2rem;color:var(--orange);margin-bottom:10px;display:block}
.m-num{font-family:var(--serif);font-size:clamp(1.35rem,5.2vw,3rem);color:#fff;line-height:1;font-weight:500;margin-bottom:6px;letter-spacing:-.01em}
.m-label{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:600}
@media(max-width:600px){
  .metric i{font-size:1.4rem;margin-bottom:6px}
  .m-num{font-size:1.12rem;margin-bottom:4px}
  .m-label{font-size:.56rem;letter-spacing:.05em}
}

/* ============ PROCESS TIMELINE ============ */
.process-wrap{position:relative;max-width:1000px;margin:0 auto}
.process-wrap::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--orange) 0,var(--orange) 6px,transparent 6px,transparent 14px);transform:translateX(-50%)}
.process-step{display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;margin-bottom:40px}
.process-step:last-child{margin-bottom:0}
.process-step .dot{width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--orange);display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--orange);font-size:1.1rem;z-index:1;position:relative;box-shadow:0 6px 18px rgba(229,155,44,.2)}
.process-step .panel{background:#fff;padding:20px 24px;border-radius:16px;border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.process-step .panel h5{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--ink);margin-bottom:6px}
.process-step .panel p{font-size:.88rem;color:var(--mute);margin:0}
.process-step:nth-child(even) .panel{grid-column:3}
.process-step:nth-child(odd) .panel{grid-column:1;text-align:right}
.process-step:nth-child(even) > :first-child{grid-column:1}
.process-step:nth-child(even) > .dot{grid-column:2}

/* ============ STORY CARDS ============ */
.story-card{background:#fff;border-radius:20px;overflow:hidden;height:100%;border:1px solid var(--line-2);transition:all .4s var(--ease)}
.story-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.story-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.story-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.story-card:hover .story-img img{transform:scale(1.05)}
.story-img .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);color:var(--orange);padding:5px 12px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(6px)}
.story-body{padding:26px}
.story-quote{font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--ink-2);font-style:italic;margin-bottom:18px}
.story-quote::before{content:'"';font-size:3rem;line-height:0;color:var(--orange);margin-right:4px;vertical-align:-0.4em}
.story-author{display:flex;align-items:center;gap:12px}
.story-author .av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.story-author .n{font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.2}
.story-author .m{font-size:.78rem;color:var(--mute)}
.story-author .stars{margin-left:auto;color:var(--yellow);font-size:.85rem;letter-spacing:1px}

/* ============ BLOG CARDS ============ */
.blog-card{background:#fff;border-radius:18px;overflow:hidden;height:100%;display:flex;flex-direction:column;border:1px solid var(--line-2);transition:all .4s var(--ease);color:var(--ink)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);color:var(--ink)}
.blog-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.blog-card:hover .blog-img img{transform:scale(1.05)}
.blog-date{position:absolute;bottom:14px;left:14px;background:#fff;color:var(--ink);padding:8px 12px;border-radius:10px;text-align:center;min-width:56px;line-height:1;box-shadow:var(--shadow-sm)}
.blog-date .d{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--orange);display:block;line-height:1}
.blog-date .m{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.blog-body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-cat{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.blog-title{font-family:var(--serif);font-size:1.25rem;font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:10px;letter-spacing:-.01em}
.blog-card:hover .blog-title{color:var(--orange)}
.blog-excerpt{font-size:.87rem;color:var(--mute);line-height:1.65;margin-bottom:16px;flex:1}
.blog-meta{display:flex;align-items:center;gap:14px;font-size:.76rem;color:var(--mute);margin-top:auto}
.blog-meta i{color:var(--blue);margin-right:4px}

/* ============ CATEGORY/SPACE PILLS ============ */
.space-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.space-item{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:26px 18px;text-align:center;color:var(--ink);transition:all .4s var(--ease);display:block;position:relative;overflow:hidden}
.space-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.space-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--orange);color:var(--orange)}
.space-item:hover::before{transform:scaleX(1)}
.space-item i{font-size:2rem;display:block;margin-bottom:12px;transition:transform .35s var(--spring)}
.space-item:hover i{transform:scale(1.15) rotate(-5deg)}
.space-item:nth-child(6n+1) i{color:var(--orange)}
.space-item:nth-child(6n+2) i{color:var(--blue)}
.space-item:nth-child(6n+3) i{color:var(--pink)}
.space-item:nth-child(6n+4) i{color:var(--green)}
.space-item:nth-child(6n+5) i{color:var(--purple)}
.space-item:nth-child(6n+6) i{color:var(--yellow)}
.space-name{font-family:var(--serif);font-size:1.08rem;font-weight:500;margin-bottom:4px}
.space-count{font-size:.76rem;color:var(--mute)}

/* ============ CTA BAND ============ */
.cta-band{background:linear-gradient(135deg,var(--orange) 0%,var(--pink) 100%);color:#fff;padding:80px 0;position:relative;overflow:hidden;border-radius:28px;margin:0 5vw}
.cta-band::before{content:'';position:absolute;top:-50px;right:-50px;width:300px;height:300px;background:rgba(255,255,255,.08);border-radius:50%}
.cta-band::after{content:'';position:absolute;bottom:-80px;left:-80px;width:400px;height:400px;background:rgba(255,255,255,.06);border-radius:50%}
.cta-band h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3rem);color:#fff;margin-bottom:14px;letter-spacing:-.01em}
.cta-band h2 em{font-style:italic}
.cta-band p{color:rgba(255,255,255,.92);font-size:1.05rem;margin-bottom:26px}

/* ============ INLINE QUOTE FORM ============ */
.quote-band{background:var(--bg-2);padding:80px 0;position:relative}
.quote-card{background:#fff;border-radius:24px;padding:44px;box-shadow:var(--shadow-sm);border:1px solid var(--line-2);position:relative;overflow:hidden}
.quote-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(to right,var(--orange),var(--pink),var(--yellow),var(--green),var(--blue))}
.quote-card h3{font-family:var(--serif);font-weight:500;font-size:2rem;margin-bottom:6px;letter-spacing:-.01em}
.quote-card h3 em{font-style:italic;color:var(--orange)}
.quote-card .sub{color:var(--mute);margin-bottom:30px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{position:relative}
.field.full{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%;padding:18px 16px 8px;border:1.5px solid var(--line);background:#fff;border-radius:12px;font-family:var(--sans);font-size:.95rem;color:var(--ink);outline:none;transition:all .3s;appearance:none}
.field textarea{resize:vertical;min-height:110px;padding-top:24px}
.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:40px}
.field label{position:absolute;left:16px;top:16px;font-size:.95rem;color:var(--mute);pointer-events:none;transition:all .25s var(--ease);background:transparent;padding:0 4px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(229,155,44,.12)}
.field input:focus~label,
.field input:not(:placeholder-shown)~label,
.field select:focus~label,
.field select:valid~label,
.field textarea:focus~label,
.field textarea:not(:placeholder-shown)~label{top:4px;font-size:.68rem;color:var(--orange);font-weight:600;letter-spacing:.05em;text-transform:uppercase}

.consent{font-size:.82rem;color:var(--mute);display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px}
.consent input{margin-top:3px;accent-color:var(--orange);width:16px;height:16px}

/* ============ MODAL ============ */
/* Solid, stable backdrop: dims behind, blurs, and does NOT fade out
   until the modal is explicitly closed. The panel animates separately
   so the dim layer stays steady. */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(15, 15, 25, 0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:1100;
  display:none;
  align-items:center; justify-content:center;
  overflow-y:auto;
  padding:4vh 4vw;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.modal-backdrop.show{ display:flex; opacity:1; }
body.modal-open{ overflow:hidden }

.modal-panel{
  background:#fff;
  border-radius:24px;
  max-width:720px;
  width:100%;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  margin:auto;
  transform:scale(.92) translateY(24px);
  opacity:0;
  transition:all .4s var(--spring);
  overflow:hidden;
}
.modal-backdrop.show .modal-panel{ transform:scale(1) translateY(0); opacity:1; }

.modal-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  display:grid; place-items:center;
  color:var(--ink);
  z-index:5;
  transition:all .3s;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.modal-close:hover{ background:var(--orange); color:#fff; transform:rotate(90deg); }

/* ------- Success state -------
   Centered vertically + horizontally inside the modal panel, min-height
   ensures it feels anchored like a full-screen acknowledgement. */
.quote-success{
  display:none;
  text-align:center;
  padding:60px 32px 50px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:460px;
  background:linear-gradient(180deg, #fff 0%, #F7F3EC 100%);
}
.quote-success.show{ display:flex }
.quote-success .circle{
  width:110px; height:110px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green), #2e8e55);
  color:#fff;
  display:grid; place-items:center;
  font-size:3.2rem;
  margin:0 auto 28px;
  animation:pop .5s var(--spring);
  box-shadow:0 12px 32px rgba(76,175,80,.4);
  position:relative;
}
.quote-success .circle::before{
  content:''; position:absolute; inset:-10px;
  border-radius:50%;
  border:3px dashed rgba(76,175,80,.45);
  animation:spin 12s linear infinite;
}
@keyframes pop{ 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes spin{ to{transform:rotate(360deg)} }
.quote-success h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.1rem;
  color:var(--ink);
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.quote-success h3 em{ color:var(--orange); font-style:italic }
.quote-success p{
  color:var(--mute);
  max-width:440px;
  margin:0 auto 28px;
  font-size:1.02rem;
  line-height:1.65;
}
.quote-success .ok-btn{
  padding:13px 36px;
  background:var(--ink);
  color:#fff;
  border-radius:30px;
  font-weight:600;
  font-size:.92rem;
  transition:all .3s;
  display:inline-flex; align-items:center; gap:8px;
}
.quote-success .ok-btn:hover{ background:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ============ FOOTER ============ */
footer{background:var(--ink);color:rgba(255,255,255,.65);padding:80px 0 28px;position:relative}
.ft-grid{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.2fr;gap:44px;margin-bottom:50px}
.ft-brand{margin-bottom:16px}
.ft-brand img{height:58px;background:#fff;padding:8px 14px;border-radius:10px}
.ft-about{font-size:.9rem;line-height:1.75;max-width:320px;margin-bottom:20px;color:rgba(255,255,255,.65)}
.ft-soc{display:flex;gap:10px}
.ft-soc a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;color:rgba(255,255,255,.7);transition:all .3s}
.ft-soc a:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)}
.ft-col h4{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:#fff;margin-bottom:18px}
.ft-col a{display:block;font-size:.88rem;color:rgba(255,255,255,.65);padding:5px 0;transition:color .3s}
.ft-col a:hover{color:var(--orange)}
.ft-col .ci{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:.88rem;color:rgba(255,255,255,.75)}
.ft-col .ci i{color:var(--orange);margin-top:3px}
.ft-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.5)}
.ft-bot a{color:rgba(255,255,255,.5)}
.ft-bot a:hover{color:var(--orange)}
.ft-bot .links{display:flex;gap:24px}

/* ============ FLOATING BUTTONS ============ */
.wa-fab,.quote-fab{position:fixed;right:24px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;box-shadow:0 10px 28px rgba(0,0,0,.2);z-index:900;transition:transform .3s}
.wa-fab{bottom:24px;background:#25D366;color:#fff;animation:pulse 2.2s infinite}
.wa-fab:hover{transform:scale(1.08);color:#fff}
.quote-fab{bottom:92px;background:var(--orange);color:#fff}
.quote-fab:hover{transform:scale(1.08);color:#fff;background:var(--orange-d)}

/* ============ ILLUSTRATION PHOTO TILES ============ */
/* Real Unsplash images injected by illustrations.js into [data-illus] divs.
   Original .illus container styling stays intact; this only styles the <img>. */
.illus{position:relative;overflow:hidden}
.illus .illus-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:transform .6s var(--ease,ease)}
.illus:hover .illus-photo{transform:scale(1.05)}
.illus .badge-cat{position:relative;z-index:2}
.illus::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 55%);z-index:1;pointer-events:none}

/* ============ MOBILE BOTTOM NAV (FULLY RESPONSIVE) ============ */
/* Container: hidden on desktop, grid on mobile.
   Grid uses 1fr 1fr auto 1fr 1fr so the centre CTA gets just the room it needs
   while the four tabs split the remaining space evenly — preventing the
   "cramped on small phones" issue the old fixed 5x1fr layout caused. */
.mobile-bottom-nav{
  display:none;
  position:fixed;
  inset:auto 0 0 0;
  background:#fff;
  border-top:1px solid var(--line-2);
  z-index:950;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr auto 1fr 1fr;
  align-items:center;
  gap:2px;
}
.mobile-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 2px;
  color:var(--mute);font-size:.7rem;font-weight:500;
  transition:color .2s;position:relative;
  min-width:0; /* allows label ellipsis instead of overflow */
}
.mobile-bottom-nav a span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.mobile-bottom-nav a i{font-size:1.25rem;line-height:1}
.mobile-bottom-nav a.active{color:var(--orange)}
.mobile-bottom-nav a.active::before{
  content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:28px;height:3px;background:var(--orange);
  border-radius:0 0 3px 3px;
}

/* Centre CTA — floating circular button raised above the bar */
.mobile-bottom-nav a.center-cta{
  background:linear-gradient(135deg,var(--orange),var(--pink));
  color:#fff;border-radius:50%;
  width:54px;height:54px;
  margin:-18px 6px 0;padding:0;
  justify-content:center;
  box-shadow:0 6px 18px rgba(229,155,44,.4);
}
.mobile-bottom-nav a.center-cta::before{display:none} /* no top indicator on CTA */
.mobile-bottom-nav a.center-cta i{font-size:1.45rem}
.mobile-bottom-nav a.center-cta span{display:none}

/* Compact small phones (≤380px) — shrink CTA + spacing so all 5 items fit */
@media (max-width:380px){
  .mobile-bottom-nav{padding:4px 2px calc(4px + env(safe-area-inset-bottom));gap:0}
  .mobile-bottom-nav a{font-size:.62rem;padding:6px 1px;gap:2px}
  .mobile-bottom-nav a i{font-size:1.1rem}
  .mobile-bottom-nav a.center-cta{width:46px;height:46px;margin:-14px 4px 0}
  .mobile-bottom-nav a.center-cta i{font-size:1.2rem}
}

/* Ultra-compact (≤340px) — hide outer labels, keep icons clean */
@media (max-width:340px){
  .mobile-bottom-nav a:not(.center-cta) span{display:none}
}

/* ============ MEGA MENU ============ */
.mega-dropdown{min-width:820px;padding:26px !important;display:grid !important;grid-template-columns:repeat(3,1fr);gap:18px}
.mega-tile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:block;padding:0 !important;background:var(--bg-2)}
.mega-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mega-tile:hover img{transform:scale(1.06)}
.mega-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 60%,transparent 100%)}
.mega-tile .mt-body{position:absolute;bottom:0;left:0;right:0;padding:16px;z-index:2;color:#fff}
.mega-tile h5{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin:0 0 4px;color:#fff}
.mega-tile p{font-size:.78rem;opacity:.85;margin:0;color:#fff}
.mega-tile .mt-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mega-tile .mt-links span{font-size:.68rem;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:20px;backdrop-filter:blur(4px);color:#fff;font-weight:500}

/* ============ GALLERY TABS ============ */
.gal-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.gal-tab{padding:12px 28px;border:2px solid var(--line-2);background:#fff;border-radius:30px;font-weight:600;font-size:.9rem;color:var(--ink-2);transition:all .3s;cursor:pointer}
.gal-tab.active,.gal-tab:hover{background:linear-gradient(135deg,var(--orange),var(--pink));color:#fff;border-color:transparent}
.gal-subtabs{display:flex;gap:8px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}
.gal-subtab{padding:8px 18px;border:1.5px solid var(--line);background:transparent;border-radius:24px;font-size:.82rem;color:var(--mute);font-weight:500;cursor:pointer;transition:all .3s}
.gal-subtab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.gal-subtab:hover{color:var(--orange)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-grid .g{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--bg-2)}
.gal-grid .g img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal-grid .g:hover img{transform:scale(1.08)}
.gal-grid .g::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);opacity:0;transition:opacity .3s}
.gal-grid .g:hover::after{opacity:1}
.gal-grid .g .z{position:absolute;bottom:14px;left:14px;color:#fff;opacity:0;transform:translateY(8px);transition:all .3s;z-index:2;font-size:.82rem;font-weight:600}
.gal-grid .g:hover .z{opacity:1;transform:translateY(0)}

/* Lightbox for gallery */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.lb.show{display:flex;animation:fadeIn .25s}
.lb .lb-close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-size:1.3rem;border:1px solid rgba(255,255,255,.2);z-index:3}
.lb .lb-close:hover{background:var(--orange)}
.lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-size:1.4rem;border:1px solid rgba(255,255,255,.2);z-index:3;cursor:pointer}
.lb .lb-nav:hover{background:var(--orange)}
.lb .lb-prev{left:20px}.lb .lb-next{right:20px}
.lb .lb-stage{max-width:92vw;max-height:84vh;position:relative;animation:modalIn .3s var(--spring)}
.lb .lb-stage img{max-width:92vw;max-height:84vh;width:auto;height:auto;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.lb .lb-caption{position:absolute;bottom:-42px;left:0;right:0;text-align:center;color:rgba(255,255,255,.9);font-size:.88rem}
.lb .lb-counter{position:absolute;top:20px;left:20px;color:rgba(255,255,255,.8);font-size:.85rem;background:rgba(255,255,255,.1);padding:8px 16px;border-radius:30px;border:1px solid rgba(255,255,255,.2)}

/* FAQ page categories */
.faq-cat{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:8px;margin-bottom:14px;transition:all .3s}
.faq-cat details{padding:14px 18px;border-radius:12px;cursor:pointer}
.faq-cat details[open]{background:var(--bg-2)}
.faq-cat summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--ink)}
.faq-cat summary::-webkit-details-marker{display:none}
.faq-cat summary i{color:var(--orange);transition:transform .3s}
.faq-cat details[open] summary i{transform:rotate(180deg)}
.faq-cat p{color:var(--mute);margin:12px 0 0;font-size:.94rem;line-height:1.75}

/* YouTube embed */
.yt-wrap{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);background:#000}
.yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Team card (detailed) */
.team-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);transition:all .4s var(--ease);height:100%}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.team-card .ph{aspect-ratio:1/1;overflow:hidden;position:relative}
.team-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.team-card:hover .ph img{transform:scale(1.08)}
.team-card .ph .soc{position:absolute;inset:auto 0 0 0;padding:12px;display:flex;gap:6px;justify-content:center;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .3s}
.team-card:hover .ph .soc{opacity:1}
.team-card .ph .soc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink);display:grid;place-items:center;font-size:.88rem}
.team-card .ph .soc a:hover{background:var(--orange);color:#fff}
.team-card .bd{padding:18px;text-align:center}
.team-card h5{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:4px}
.team-card .role{font-size:.78rem;color:var(--orange);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.team-card .bio{font-size:.82rem;color:var(--mute);margin-top:8px;line-height:1.6}
@keyframes pulse{0%,100%{box-shadow:0 10px 28px rgba(37,211,102,.35)}50%{box-shadow:0 10px 40px rgba(37,211,102,.7)}}

/* ============ PAGE HEADER (inner pages) ============ */
.page-hero{position:relative;padding:120px 0 80px;background:linear-gradient(135deg,var(--ink) 0%,#2A2A4A 100%);color:#fff;overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23E59B2C' stroke-width='.5' opacity='.15'/%3E%3C/svg%3E");opacity:.4}
.page-hero .script{color:var(--yellow);font-size:1.5rem;margin-bottom:6px;position:relative;z-index:1}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,5vw,4rem);color:#fff;letter-spacing:-.02em;position:relative;z-index:1}
.page-hero h1 em{font-style:italic;color:var(--orange-l)}
.page-hero p{max-width:640px;margin:12px auto 0;color:rgba(255,255,255,.8);font-size:1.05rem;position:relative;z-index:1}
.breadcrumb{display:flex;justify-content:center;gap:10px;margin-top:22px;font-size:.82rem;color:rgba(255,255,255,.7);position:relative;z-index:1;flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.7)}
.breadcrumb a:hover{color:var(--orange-l)}
.breadcrumb .sep{color:rgba(255,255,255,.35)}
.breadcrumb .cur{color:#fff;font-weight:600}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.on{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.3s}
.reveal.delay-4{transition-delay:.4s}
.reveal-left{opacity:0;transform:translateX(-40px);transition:all .8s var(--ease)}
.reveal-left.on{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:all .8s var(--ease)}
.reveal-right.on{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:all .8s var(--ease)}
.reveal-scale.on{opacity:1;transform:scale(1)}

/* ============ RESPONSIVE ============ */
@media(max-width:1199.98px){
  .space-grid{grid-template-columns:repeat(3,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:991.98px){
  .top-strip{display:none}
  .main-nav,.header-cta .btn-orange{display:none}
  .hamburger{display:inline-flex}
  .mobile-bottom-nav{display:grid}
  /* Account for fixed bottom nav (~68px) + safe-area inset */
  footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .wa-fab{bottom:calc(82px + env(safe-area-inset-bottom))}
  .quote-fab{display:none}
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .section{padding:70px 0}
  .hero-slide{height:auto;min-height:412px}
  .hero-content{padding:50px 28px}
  /* Keep hero CTA buttons side-by-side on mobile */
  .hero-content .buttons{flex-wrap:nowrap;gap:10px}
  .hero-content .buttons .btn,
  .hero-content .buttons .btn-lg{flex:1 1 0;min-width:0;padding:14px 14px;font-size:.9rem;justify-content:center;white-space:normal;line-height:1.15}
  .space-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .process-wrap::before{left:24px}
  .process-step{grid-template-columns:48px 1fr;gap:18px}
  .process-step:nth-child(odd) .panel,
  .process-step:nth-child(even) .panel{grid-column:2;text-align:left}
  .process-step:nth-child(even) > .dot{grid-column:1}
  .quote-card{padding:28px 22px}
  .quote-fab{display:none}
}
@media(max-width:767.98px){
  /* Show phone number in header on mobile */
  .header-cta .btn-phone.d-none{display:inline-flex !important}
  .header-cta .btn-phone{padding:6px 10px;font-size:.82rem;gap:6px;white-space:nowrap}
  .header-cta .btn-phone .cta-label{display:inline}
  .header-inner{gap:12px}
}
@media(max-width:600px){
  .hero-content{padding:40px 22px}
  .space-grid{gap:10px}
  .space-item{padding:20px 12px}
  .space-item i{font-size:1.6rem}
  .ft-grid{grid-template-columns:1fr;gap:32px}
  .cta-band{margin:0;border-radius:0}
  .ft-bot{justify-content:center;text-align:center;flex-direction:column}
  .modal-panel{border-radius:18px}
  .modal-panel > div{padding:26px 20px !important}
  .mega-dropdown{min-width:auto;grid-template-columns:1fr;gap:10px}
  .gal-tab{padding:10px 18px;font-size:.82rem}
  .header-cta .btn-phone{padding:5px 8px;font-size:.78rem}
}
@media(max-width:340px){
  /* On very narrow screens, show only the phone icon */
  .header-cta .btn-phone .cta-label{display:none}
  .header-cta .btn-phone{padding:8px 10px;font-size:.95rem}
}

/* ============ ILLUSTRATIONS ============ */
/* Hand-drawn SVG illustrations sit on soft tinted cards.
   Each service category gets its own background color. */
.illus{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.illus svg{ width:100%; height:100%; max-width:380px; }
/* Category-tinted backgrounds */
.illus-orange{ background:linear-gradient(135deg,#FFF4EC 0%,#FFE3D0 100%); }
.illus-blue  { background:linear-gradient(135deg,#EAF4FC 0%,#CFE5F8 100%); }
.illus-pink  { background:linear-gradient(135deg,#FDEBF3 0%,#FAD3E2 100%); }
.illus-yellow{ background:linear-gradient(135deg,#FFF8DF 0%,#FFEDB0 100%); }
.illus-green { background:linear-gradient(135deg,#E8F5E9 0%,#C8E6C9 100%); }
.illus-purple{ background:linear-gradient(135deg,#F0ECFF 0%,#DCD3FF 100%); }
.illus-cream { background:linear-gradient(135deg,#FDF8EE 0%,#F3E9D2 100%); }
/* Dotted paper texture overlay */
.illus::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(26,26,46,.07) 1px, transparent 1.2px);
  background-size:18px 18px;
  pointer-events:none;
  opacity:.55;
}
/* Service-card media becomes illustration */
.service-card .illus{ aspect-ratio:16/10; }

/* ============ SERVICE HERO (name + tagline + illus) ============ */
.svc-hero{
  padding:60px 0 40px;
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  position:relative;
  overflow:hidden;
}
.svc-hero .svc-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  align-items:center;
}
.svc-hero .svc-copy .script{ margin-bottom:8px }
.svc-hero h1{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4.8vw,3.6rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.svc-hero h1 em{ font-style:italic; color:var(--orange); }
.svc-hero .tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--ink-2);
  max-width:520px;
  margin-bottom:22px;
  line-height:1.45;
}
.svc-hero .svc-illus{
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:3px solid #fff;
  aspect-ratio:4/3;
}
.svc-hero .svc-illus svg{ width:100%; height:100%; }

/* ============ VIBRANT SECTION BACKGROUNDS ============ */
.bg-orange-soft{
  background:linear-gradient(135deg,#FFF4EC 0%,#FFE3D0 100%);
  position:relative;
}
.bg-blue-soft{
  background:linear-gradient(135deg,#EAF4FC 0%,#D5E8F8 100%);
}
.bg-pink-soft{
  background:linear-gradient(135deg,#FDEBF3 0%,#F7D3E3 100%);
}
.bg-yellow-soft{
  background:linear-gradient(135deg,#FFF8DF 0%,#FFE9A8 100%);
}
.bg-mint{
  background:linear-gradient(135deg,#E7F5EE 0%,#CAE8D6 100%);
}
.bg-lavender{
  background:linear-gradient(135deg,#EFE9FA 0%,#DDD0F2 100%);
}
.bg-confetti{
  background:
    radial-gradient(circle at 10% 20%, rgba(229,155,44,.10) 0, transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(46,140,106,.10) 0, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(230,74,156,.08) 0, transparent 40%),
    var(--bg-2);
}

/* ============ METRICS HEADER ============ */
.metrics-header{
  text-align:center;
  margin-bottom:48px;
  position:relative; z-index:1;
}
.metrics-header .script{ color:var(--yellow) }
.metrics-header h2{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
  margin:6px 0 12px;
}
.metrics-header h2 em{ color:var(--orange-l); font-style:italic }
.metrics-header p{
  color:rgba(255,255,255,.7);
  max-width:560px;
  margin:0 auto;
  font-size:1rem;
}

/* ============ PORTFOLIO CARD — room caption overlay ============ */
.port-card .media{ position:relative }
.port-card .room-chip{
  position:absolute;
  left:14px; bottom:14px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  color:var(--ink);
  padding:7px 14px;
  border-radius:30px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  z-index:2;
  transform:translateY(0);
  transition:all .4s var(--ease);
}
.port-card .room-chip i{ color:var(--orange); font-size:.82rem }
.port-card:hover .room-chip{
  background:var(--orange);
  color:#fff;
}
.port-card:hover .room-chip i{ color:#fff }

/* Modal backdrop — keep fully solid, no fade-out until close */
.modal-backdrop{ transition:opacity .3s var(--ease); }
.modal-backdrop.show{ opacity:1 !important }

@media (max-width:767.98px){
  .svc-hero .svc-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .svc-hero{ padding:40px 0 20px }
  .svc-hero .svc-illus{ max-width:440px; margin:0 auto }
}

/* ============ INDIAN ORNAMENTS & PATTERNS ============ */
/* Mandala watermark — soft circular pattern */
.mandala-bg{ position:relative; }
.mandala-bg::before{
  content:'';
  position:absolute;
  width:520px; height:520px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23E59B2C' stroke-width='.6' opacity='.55'><circle cx='100' cy='100' r='95'/><circle cx='100' cy='100' r='78'/><circle cx='100' cy='100' r='60'/><circle cx='100' cy='100' r='42'/><circle cx='100' cy='100' r='24'/><g><path d='M100 5 L100 195 M5 100 L195 100 M30 30 L170 170 M170 30 L30 170'/><path d='M100 5 Q120 50 100 100 Q80 50 100 5 Z'/><path d='M100 195 Q120 150 100 100 Q80 150 100 195 Z'/><path d='M5 100 Q50 80 100 100 Q50 120 5 100 Z'/><path d='M195 100 Q150 80 100 100 Q150 120 195 100 Z'/></g><g transform='rotate(22.5 100 100)'><path d='M100 5 Q120 50 100 100 Q80 50 100 5 Z'/><path d='M100 195 Q120 150 100 100 Q80 150 100 195 Z'/><path d='M5 100 Q50 80 100 100 Q50 120 5 100 Z'/><path d='M195 100 Q150 80 100 100 Q150 120 195 100 Z'/></g></g></svg>");
  background-size:contain; background-repeat:no-repeat;
  top:-120px; right:-160px;
  opacity:.16; pointer-events:none; z-index:0;
}
.mandala-bg.left::before{ left:-160px; right:auto; }
.mandala-bg > *{ position:relative; z-index:1 }

/* Block-print top border — hand-blocked decorative strip */
.block-print-top{
  height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'><g fill='%23E59B2C'><path d='M0 7 L6 0 L12 7 L6 14 Z' opacity='.85'/><path d='M14 7 L20 0 L26 7 L20 14 Z' opacity='.65'/><path d='M28 7 L34 0 L40 7 L34 14 Z' opacity='.85'/><path d='M42 7 L48 0 L54 7 L48 14 Z' opacity='.65'/><circle cx='10' cy='7' r='1.4' fill='%23fff'/><circle cx='24' cy='7' r='1.4' fill='%23fff'/><circle cx='38' cy='7' r='1.4' fill='%23fff'/><circle cx='52' cy='7' r='1.4' fill='%23fff'/></g></svg>");
  background-size:60px 14px; background-repeat:repeat-x;
}
.block-print-bot{
  height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'><g fill='%231E76C2'><path d='M0 7 L6 0 L12 7 L6 14 Z' opacity='.85'/><path d='M14 7 L20 0 L26 7 L20 14 Z' opacity='.65'/><path d='M28 7 L34 0 L40 7 L34 14 Z' opacity='.85'/><path d='M42 7 L48 0 L54 7 L48 14 Z' opacity='.65'/><circle cx='10' cy='7' r='1.4' fill='%23fff'/><circle cx='24' cy='7' r='1.4' fill='%23fff'/><circle cx='38' cy='7' r='1.4' fill='%23fff'/><circle cx='52' cy='7' r='1.4' fill='%23fff'/></g></svg>");
  background-size:60px 14px; background-repeat:repeat-x;
}

/* Ornamental section divider — temple arch motif between sections */
.ornament-divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px; padding:30px 20px;
  color:var(--orange);
}
.ornament-divider::before,.ornament-divider::after{
  content:''; flex:0 1 120px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 50%,transparent);
}
.ornament-divider svg{ width:42px; height:32px }

/* Mehndi paisley faint repeat */
.bg-paisley{
  background-color:var(--bg-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23E59B2C' stroke-width='.5' opacity='.18'><path d='M40 12 Q60 20 60 40 Q60 60 40 68 Q20 60 20 40 Q20 20 40 12 Z'/><path d='M40 22 Q52 28 52 40 Q52 52 40 58 Q28 52 28 40 Q28 28 40 22 Z'/><circle cx='40' cy='40' r='4'/></g></svg>");
  background-size:80px 80px;
}

/* Subtle pencil-sketch room watermark */
.bg-sketch{
  position:relative;
}
.bg-sketch::before{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%231A1A2E' stroke-width='.7' opacity='.06'><path d='M40 320 L40 120 L240 80 L240 320 Z M240 80 L460 120 L460 320 L240 320'/><path d='M70 320 L70 200 L160 200 L160 320'/><path d='M90 270 L140 270 M90 240 L140 240'/><path d='M280 230 L420 230 L420 320 L280 320 Z M310 230 L310 320 M340 230 L340 320 M370 230 L370 320 M400 230 L400 320'/><circle cx='350' cy='150' r='35'/><path d='M520 320 L520 240 Q540 230 540 250 L540 320'/><path d='M40 320 L560 320'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:90% auto;
  pointer-events:none;
}

/* Real-photo section — full-bleed with overlay */
.photo-band{
  position:relative;
  padding:120px 0;
  background-size:cover;
  background-position:center;
  color:#fff;
  overflow:hidden;
}
.photo-band::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(26,26,46,.72) 0%, rgba(26,26,46,.4) 60%, rgba(229,155,44,.45) 100%);
}
.photo-band > .container{ position:relative; z-index:1 }
.photo-band h2{ color:#fff; font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:14px }
.photo-band h2 em{ color:#FFD89E; font-style:italic }
.photo-band p{ color:rgba(255,255,255,.92); max-width:600px; font-size:1.05rem; margin-bottom:24px }

/* Inspiration mosaic — 3-photo grid */
.inspo-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  height:520px;
}
.inspo-grid > *{ border-radius:18px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm) }
.inspo-grid > :nth-child(1){ grid-row:span 2 }
.inspo-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.inspo-grid > *:hover img{ transform:scale(1.06) }
.inspo-grid .cap{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.95); color:var(--ink);
  padding:6px 14px; border-radius:30px;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* Diya ornament for pullquotes */
.pullquote{
  position:relative;
  padding:40px 30px 30px;
  margin:30px auto;
  max-width:760px;
  text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2vw,1.6rem);
  color:var(--ink-2);
  line-height:1.5;
}
.pullquote::before{
  content:'';
  display:block;
  width:48px; height:32px;
  margin:0 auto 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><g><ellipse cx='24' cy='22' rx='20' ry='6' fill='%23B8860B'/><path d='M4 22 Q24 30 44 22 Q24 26 4 22 Z' fill='%23704A00'/><path d='M24 0 Q22 8 24 14 Q26 8 24 0 Z' fill='%23E59B2C'/><path d='M24 2 Q23 7 24 12 Q25 7 24 2 Z' fill='%23F7B500'/></g></svg>");
  background-repeat:no-repeat; background-size:contain;
}
.pullquote::after{
  content:'\201D'; display:block;
  font-family:var(--serif);
  font-size:3rem; color:var(--orange); opacity:.4;
  margin-top:10px;
}

@media (max-width:767.98px){
  .inspo-grid{ height:auto; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,180px) }
  .inspo-grid > :nth-child(1){ grid-column:span 2; grid-row:span 1 }
  .photo-band{ padding:80px 0 }
  .mandala-bg::before{ width:340px; height:340px; top:-80px; right:-100px }
}