/* ============================================================
   Architect Interior Studio — Public Site CSS
   Editorial, premium. Warm minimal — charcoal + clay/terracotta on warm white.
   --primary / --accent / --dark are overridden inline by _Layout
   (from SiteSettings). The brand neutrals below are stable.
   NOTE: --brass is the warm ACCENT token (now a clay/terracotta, not gold).
   ============================================================ */

:root {
    --bg: #FAF8F3;          /* warm paper-white page */
    --surface: #FFFFFF;     /* cards / panels */
    --ink: #141416;         /* primary text — press ink */
    --muted: #6B6B70;       /* secondary text — grey */
    --brass: #00AEEF;       /* ACCENT — process cyan (Press Ink theme) */
    --brass-dark: #0089BC;  /* darker cyan for hover */
    --rule: #E7E4DD;        /* hairline rules — soft warm grey */

    /* Injected inline by _Layout from SiteSettings (fallbacks here): */
    --primary: #141416;     /* press ink */
    --accent: #00AEEF;      /* process cyan */
    --dark: #141416;        /* ink (dark sections) */

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bengali: 'Hind Siliguri', 'Noto Sans Bengali', var(--sans);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.7;
    font-size: 16px;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
:lang(bn), :lang(bn) body { font-family: var(--bengali); }

a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brass); }

h1, h2, h3, h4, h5, .display-head { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.15; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3, :lang(bn) h4, :lang(bn) h5, :lang(bn) .display-head { font-family: var(--bengali); font-weight: 600; }

.display-head { font-size: clamp(1.8rem, 3.4vw, 2.9rem); margin: .25rem 0 0; letter-spacing: .2px; }
.lead-text { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); line-height: 1.5; margin: 1rem 0; }
:lang(bn) .lead-text { font-family: var(--bengali); font-size: 1.2rem; }
.body-text { color: var(--muted); font-size: 1.02rem; }

/* ===== §12.1 mobile safety-net ===== */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.container, .container-fluid { overflow-wrap: break-word; }
h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; }
.page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }

/* ===== Shared editorial bits ===== */
.eyebrow {
    display: inline-block; font-family: var(--sans);
    text-transform: uppercase; letter-spacing: 3px;
    font-size: .72rem; font-weight: 600; color: var(--brass);
}
:lang(bn) .eyebrow { letter-spacing: 1px; }
.brass-rule { display: block; width: 56px; height: 2px; background: var(--brass); margin: 1.1rem auto 0; }
.link-arrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600; font-size: .95rem; color: var(--ink);
    border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.link-arrow i { transition: transform .25s ease; }
.link-arrow:hover { color: var(--brass); border-color: var(--brass); }
.link-arrow:hover i { transform: translateX(4px); }

.section { padding: 96px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; text-align: left; max-width: none; }
.section-head-split .brass-rule { margin-left: 0; }

/* ===== Buttons ===== */
.btn { border-radius: 0; font-family: var(--sans); font-weight: 600; letter-spacing: .3px; padding: .7rem 1.4rem; transition: all .2s ease; }
.btn-cta {
    background: var(--brass); color: #fff; border: 1px solid var(--brass);
}
.btn-cta:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; }
.btn-lg { padding: .9rem 2rem; font-size: 1rem; }
.btn-outline-dark { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { background: var(--ink); color: #fff; }
.btn-outline-light { border: 1px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-primary { background: var(--primary); border-color: var(--primary); border-radius: 0; }
.btn-primary:hover { background: var(--dark); border-color: var(--dark); }

.form-control { border-radius: 0; border-color: var(--rule); padding: .65rem .85rem; }
.form-control:focus { border-color: var(--brass); box-shadow: 0 0 0 .15rem rgba(0,174,239,.20); }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(250,248,245,.92); backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(31,41,55,.07); background: rgba(250,248,245,.98); }
.site-header .navbar { padding: .85rem 0; }
.navbar-brand { display: flex; align-items: center; gap: .65rem; }
.brand-logo { height: 40px; width: auto; }
.brand-mark { width: 38px; height: 38px; border: 1px solid var(--brass); color: var(--brass); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.brand-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: .3px; }
:lang(bn) .brand-name { font-family: var(--bengali); }
.site-header .nav-link {
    color: var(--ink); font-weight: 500; font-size: .94rem;
    padding: .5rem .9rem; letter-spacing: .2px; position: relative;
}
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--brass); }
.lang-toggle { color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .4px; }
.lang-toggle:hover { color: var(--brass); }
.btn-cta.btn-cta { color: #fff; }

/* ===== Hero ===== */
.hero { position: relative; min-height: 88vh; background: var(--dark); color: #fff; overflow: hidden; display: flex; align-items: center; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,39,.35) 0%, rgba(17,24,39,.30) 40%, rgba(17,24,39,.78) 100%); z-index: 1; }
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 760px; padding: 7rem 0 5rem; }
.hero-eyebrow { display: inline-block; color: var(--brass); text-transform: uppercase; letter-spacing: 4px; font-size: .78rem; font-weight: 600; margin-bottom: 1.2rem; }
:lang(bn) .hero-eyebrow { letter-spacing: 1.5px; }
.hero-content h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 600; line-height: 1.08; margin-bottom: 1.2rem; }
.hero-sub { color: rgba(255,255,255,.85); font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; max-width: 560px; margin-bottom: 2rem; }
:lang(bn) .hero-sub { font-family: var(--bengali); }

/* ===== Intro ===== */
.section-intro { background: var(--bg); }
.intro-figure { position: relative; padding-left: 2rem; }
.intro-rule { position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; background: var(--brass); }
.intro-figure blockquote { font-family: var(--serif); font-size: 1.7rem; line-height: 1.4; color: var(--ink); margin: 0; font-style: italic; }
:lang(bn) .intro-figure blockquote { font-family: var(--bengali); font-style: normal; font-size: 1.35rem; }

/* ===== Services (editorial numbered list) ===== */
.section-services { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.services-list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--rule); }
.service-row {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.9rem .5rem; border-bottom: 1px solid var(--rule);
    color: var(--ink); transition: background .25s ease, padding-left .25s ease;
}
.service-row:hover { background: var(--bg); padding-left: 1.2rem; color: var(--ink); }
.service-num { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); width: 2.5rem; flex: 0 0 auto; }
.service-icon { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--brass); }
.service-body { flex: 1 1 auto; }
.service-name { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
:lang(bn) .service-name { font-family: var(--bengali); font-size: 1.25rem; }
.service-desc { display: block; color: var(--muted); font-size: .95rem; margin-top: .2rem; }
.service-go { color: var(--muted); font-size: 1.2rem; transition: transform .25s ease, color .25s ease; }
.service-row:hover .service-go { color: var(--brass); transform: translateX(5px); }

/* ===== Featured projects ===== */
.section-featured { background: var(--bg); }
.project-card { display: block; color: var(--ink); }
.pc-figure { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e3dc; }
.pc-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .pc-figure img { transform: scale(1.05); }
.pc-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #b9b0a3; font-size: 2.5rem; }
.pc-award { position: absolute; top: 1rem; left: 1rem; background: var(--brass); color: #fff; font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; padding: .3rem .6rem; }
.pc-meta { padding: 1.3rem 0 0; }
.pc-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }
.pc-tags span { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.pc-tags span:not(:last-child)::after { content: "·"; margin-left: .6rem; color: var(--brass); }
.pc-title { font-size: 1.6rem; margin: 0 0 .5rem; transition: color .2s ease; }
.project-card:hover .pc-title { color: var(--brass); }
.pc-facts { display: flex; gap: 1.4rem; color: var(--muted); font-size: .9rem; }
.pc-facts i { color: var(--brass); margin-right: .4rem; }

/* ===== Process ===== */
.section-process { background: var(--surface); border-top: 1px solid var(--rule); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; }
.process-step { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--rule); }
.process-step .ps-num { position: absolute; top: -1.6rem; right: 0; font-family: var(--serif); font-size: 3.4rem; color: var(--rule); line-height: 1; }
.ps-icon { font-size: 1.5rem; color: var(--brass); display: block; margin-bottom: .6rem; }
.process-step h4 { font-size: 1.35rem; margin: 0 0 .5rem; }
.process-step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ===== Before / After teaser ===== */
.section-beforeafter { background: var(--bg); }
.ba-teaser { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); }
.ba-figure { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e8e3dc; }
.ba-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ba-teaser:hover .ba-figure img { transform: scale(1.04); }
.ba-chip { position: absolute; bottom: 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; padding: .35rem .7rem; color: #fff; }
.ba-chip-before { left: 1rem; background: rgba(31,41,55,.85); }
.ba-chip-after { left: 5rem; background: var(--brass); }
.ba-body { padding: 3rem; }
.ba-body .display-head { margin: .4rem 0 1rem; }

/* ===== Stats band ===== */
.stats-band { background: var(--dark); color: #fff; padding: 72px 0; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-item { padding: .5rem; }
.stat-num { font-family: var(--serif); font-size: 3.2rem; font-weight: 600; line-height: 1; color: #fff; }
.stat-suffix { color: var(--brass); }
.stat-label { color: rgba(255,255,255,.7); font-size: .9rem; text-transform: uppercase; letter-spacing: 1.5px; margin-top: .7rem; }
:lang(bn) .stat-label { letter-spacing: .5px; }

/* ===== Design styles ===== */
.section-styles { background: var(--surface); border-top: 1px solid var(--rule); }
.style-card { display: block; color: var(--ink); }
.style-figure { aspect-ratio: 3/2; overflow: hidden; background: #e8e3dc; }
.style-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.style-card:hover .style-figure img { transform: scale(1.05); }
.style-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--brass); }
.style-body { padding: 1.2rem 0 0; }
.style-body h4 { font-size: 1.4rem; margin: 0 0 .3rem; transition: color .2s ease; }
.style-card:hover .style-body h4 { color: var(--brass); }
.style-body p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ===== Testimonials ===== */
.section-testimonials { background: var(--bg); }
.testi-card { background: var(--surface); border: 1px solid var(--rule); padding: 2rem; margin: 0; display: flex; flex-direction: column; }
/* §9.21 — equal-height only inside a grid column, never on a lone base card */
.row > [class*="col"] > .testi-card { height: 100%; }
.testi-stars { color: var(--brass); font-size: .85rem; margin-bottom: 1rem; }
.testi-msg { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--ink); font-style: italic; margin: 0 0 1.5rem; flex: 1 1 auto; }
:lang(bn) .testi-msg { font-family: var(--bengali); font-style: normal; font-size: 1.1rem; }
.testi-author { display: flex; align-items: center; gap: .85rem; margin: 0; }
.testi-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testi-name { display: block; font-weight: 600; color: var(--ink); }
.testi-role { display: block; color: var(--muted); font-size: .85rem; }

/* ===== Awards ===== */
.section-awards { background: var(--surface); border-top: 1px solid var(--rule); }
.awards-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--rule); }
.award-row { display: flex; align-items: baseline; gap: 1.8rem; padding: 1.6rem .25rem; border-bottom: 1px solid var(--rule); }
.award-year { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); width: 5rem; flex: 0 0 auto; }
.award-body { flex: 1 1 auto; }
.award-body h4 { font-size: 1.3rem; margin: 0; }
.award-issuer { display: block; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.award-link { color: var(--muted); font-size: 1.1rem; }
.award-link:hover { color: var(--brass); }

/* ===== Journal / blog ===== */
.section-journal { background: var(--bg); }
.journal-card { display: block; color: var(--ink); }
.jc-figure { aspect-ratio: 3/2; overflow: hidden; background: #e8e3dc; }
.jc-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.journal-card:hover .jc-figure img { transform: scale(1.05); }
.jc-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--brass); }
.jc-body { padding: 1.1rem 0 0; }
.jc-cat { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brass); font-weight: 600; margin-bottom: .4rem; }
.jc-title { font-size: 1.4rem; margin: 0 0 .4rem; transition: color .2s ease; }
.journal-card:hover .jc-title { color: var(--brass); }
.jc-date { color: var(--muted); font-size: .85rem; }

/* ===== Partners strip ===== */
.partners-strip { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 0; }
.partners-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3.5rem; }
.partner-logo { opacity: .55; filter: grayscale(100%); transition: opacity .25s ease, filter .25s ease; }
.partner-logo:hover { opacity: 1; filter: grayscale(0); }
.partner-logo img { max-height: 48px; max-width: 140px; width: auto; }

/* ===== CTA ===== */
.section-cta { background: var(--dark); color: #fff; }
.cta-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-inner .display-head { color: #fff; margin: .5rem 0 1rem; }
.cta-inner .eyebrow { color: var(--brass); }
.cta-inner .body-text { color: rgba(255,255,255,.78); }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ===== Footer ===== */
.site-footer { background: var(--dark); color: rgba(255,255,255,.65); padding: 0 0 28px; position: relative; }
.footer-accent { height: 3px; background: var(--brass); width: 100%; }
.site-footer .container { padding-top: 72px; }
.site-footer h5 { color: #fff; font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 1.3rem; }
.footer-brand { margin-bottom: 1rem; }
.footer-logo { max-height: 44px; width: auto; }
.footer-brand-name { font-family: var(--serif); font-size: 1.7rem; color: #fff; font-weight: 600; }
:lang(bn) .footer-brand-name { font-family: var(--bengali); }
.footer-about { font-size: .92rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.footer-social { display: flex; gap: 1rem; margin-top: 1.2rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 1rem; transition: all .2s ease; }
.footer-social a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .94rem; }
.footer-links a:hover { color: var(--brass); }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .8rem; font-size: .92rem; color: rgba(255,255,255,.65); }
.footer-contact li i { color: var(--brass); margin-top: .15rem; }
.footer-contact a { color: rgba(255,255,255,.65); }
.footer-contact a:hover { color: var(--brass); }
/* Long unbreakable strings (email/phone) in a flex <li> must be allowed to
   shrink + wrap, or they overflow the footer column on mobile (min-width:auto
   on a flex item is the classic culprit). */
.footer-contact li { min-width: 0; }
.footer-contact li > a, .footer-contact li > span { min-width: 0; overflow-wrap: anywhere; }
.newsletter-form { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter-form .form-control { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form .form-control:focus { background: rgba(255,255,255,.1); border-color: var(--brass); box-shadow: none; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.footer-bottom a { color: var(--brass); font-weight: 600; }
.footer-bottom a:hover { color: #fff; }
.admin-link a { color: rgba(255,255,255,.5); font-weight: 500; }
.admin-link a:hover { color: var(--brass); }

/* ===== "Developed by iSoft" credit badge ===== */
.dev-credit { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.6); }
.dev-credit__pill { display: inline-flex; align-items: center; gap: .38rem; padding: .26rem .7rem; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff !important; font-weight: 600; line-height: 1;
    transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.dev-credit__pill:hover { background: var(--brass); border-color: var(--brass); color: #fff !important; transform: translateY(-1px); }
.dev-credit__heart { color: var(--brass); font-size: .8rem; animation: devHeart 1.4s ease-in-out infinite; }
.dev-credit__pill:hover .dev-credit__heart { color: #fff; }
@keyframes devHeart { 0%,100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .dev-credit__heart { animation: none; } }

/* ===== Promotional share buttons (_ShareButtons partial) ===== */
.share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.4rem 0; }
.share-buttons .share-label { font-weight: 600; color: var(--muted); font-size: .9rem; margin-right: .2rem; }
.share-buttons a, .share-buttons button { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 1.05rem; cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.share-buttons a:hover, .share-buttons button:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.share-buttons .s-fb:hover { background: #1877F2; }
.share-buttons .s-x:hover { background: #0f1419; }
.share-buttons .s-wa:hover { background: #25D366; }
.share-buttons .s-in:hover { background: #0A66C2; }
.share-buttons .s-copy:hover { background: var(--brass); }

/* ===== Floating actions ===== */
.float-actions { position: fixed; right: 20px; bottom: 20px; z-index: 1030; display: flex; flex-direction: column; gap: 12px; }
.float-actions a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.35rem; box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: transform .2s ease; }
.float-actions a:hover { transform: translateY(-3px); color: #fff; }
.float-actions .fa-whatsapp { background: #25D366; }
.float-actions .fa-call { background: var(--brass); }

/* ===== Back to top ===== */
.back-to-top { position: fixed; right: 20px; bottom: 86px; z-index: 1029; width: 46px; height: 46px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; cursor: pointer; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brass); color: #fff; border-color: var(--brass); }

/* ===== Error / Privacy ===== */
.error-page { min-height: 70vh; display: flex; align-items: center; }
.error-code { font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--brass); margin-bottom: .5rem; }
.error-page .brass-rule { margin-left: auto; margin-right: auto; }

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

/* ===== TABLET (≤991) ===== */
@media (max-width: 991.98px) {
    .section { padding: 72px 0; }
    .section-head { margin-bottom: 44px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
    .ba-teaser { grid-template-columns: 1fr; }
    .ba-body { padding: 2rem; }
    .hero { min-height: 78vh; }
    .hero-content { padding: 6rem 0 4rem; }
    .site-header .navbar-collapse { background: var(--bg); border-top: 1px solid var(--rule); margin-top: .85rem; padding: 1rem 0; }
    .site-header .nav-link { padding: .6rem 0; }
    .lang-toggle { display: inline-block; padding: .6rem 0; }
    .btn-cta { display: inline-block; margin-top: .4rem; }
}

/* ===== MOBILE (≤767) ===== */
@media (max-width: 767.98px) {
    .section { padding: 56px 0; }
    .section-head { margin-bottom: 36px; }
    .section-head-split { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .display-head { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .lead-text { font-size: 1.2rem; }
    .hero { min-height: 84vh; }
    .hero-content { padding: 5rem 0 3.5rem; }
    .hero-content h1 { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .hero-sub { font-size: 1.05rem; }
    .hero-eyebrow { letter-spacing: 2.5px; font-size: .7rem; }
    .intro-figure { padding-left: 1.4rem; margin-top: 2rem; }
    .intro-figure blockquote { font-size: 1.4rem; }
    .service-row { gap: 1rem; padding: 1.4rem .25rem; }
    .service-num { width: 1.8rem; font-size: 1.2rem; }
}

/* ============================================================
   COMPARE (Phase 11) — toggle on cards + /compare page
   ============================================================ */

/* Compare toggle on project cards — sits beside the favorite heart (top-left). */
.pc-compare {
    position: absolute;
    top: 1rem;
    left: 3.4rem; /* clear of .pc-fav (38px wide @ left:1rem) */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: rgba(31, 41, 55, .42);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pc-compare:hover { background: rgba(31, 41, 55, .72); color: #fff; transform: translateY(-1px); }
.pc-compare:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pc-compare.is-compare { background: #fff; border-color: #fff; color: var(--brass); }
.pc-compare.is-compare:hover { background: #fff; color: var(--brass-dark); }
.pc-compare.cmp-full { animation: cmpShake .4s ease; border-color: #e0a; }
@keyframes cmpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* /compare page */
.cmp-head { padding: 64px 0 0; background: var(--bg); }
.cmp-head .eyebrow { margin-bottom: .4rem; }
.cmp-head .display-head { margin-bottom: .6rem; }
.cmp-head .cmp-lede { color: var(--muted); max-width: 640px; font-size: 1.02rem; }
.cmp-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.cmp-section { background: var(--bg); }
.cmp-loading { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.cmp-loading .spinner-border { color: var(--brass); }
.cmp-empty { text-align: center; padding: 4rem 1rem; }
.cmp-empty i { font-size: 2.6rem; color: var(--brass); }
.cmp-empty h4 { margin-top: 1rem; }
.cmp-empty p { color: var(--muted); max-width: 460px; margin: .4rem auto 1.4rem; }

.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: .85rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.cmp-table tbody tr:nth-child(odd) td, .cmp-table tbody tr:nth-child(odd) .cmp-rowhead { background: var(--bg); }
.cmp-rowhead { font-size: .78rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); width: 150px; white-space: nowrap; }
:lang(bn) .cmp-rowhead { text-transform: none; letter-spacing: 0; }
.cmp-table thead th { vertical-align: top; position: relative; border-bottom: 2px solid var(--brass); }
.cmp-col { min-width: 180px; }
.cmp-card-link { display: block; color: var(--ink); }
.cmp-card-link:hover .cmp-name { color: var(--brass); }
.cmp-fig { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #e8e3dc; margin-bottom: .5rem; }
.cmp-fig img { width: 100%; height: 100%; object-fit: cover; }
.cmp-fig-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); font-size: 1.6rem; }
.cmp-status { display: inline-block; margin-bottom: .35rem; }
.cmp-name { display: block; font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; }
:lang(bn) .cmp-name { font-family: var(--bengali); }
.cmp-remove {
    position: absolute; top: .4rem; right: .4rem; z-index: 2;
    width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%;
    background: var(--surface); color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: background .2s ease, color .2s ease;
}
.cmp-remove:hover { background: var(--brass); color: #fff; border-color: var(--brass); }

/* ============================================================
   FLOOR-PLAN HOTSPOTS (Phase 11) — public project detail
   ============================================================ */
.proj-floorplan .fp-stage { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--rule); background: var(--surface); }
.proj-floorplan .fp-stage img { display: block; max-width: 100%; height: auto; }
.fp-hotspot {
    position: absolute; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #fff; background: var(--brass); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; cursor: pointer; padding: 0; line-height: 1;
    box-shadow: 0 2px 8px rgba(31, 41, 55, .35);
    animation: fpPulse 2s infinite;
}
.fp-hotspot:hover, .fp-hotspot:focus-visible { background: var(--brass-dark, #8a6d1f); outline: none; transform: translate(-50%, -50%) scale(1.12); }
.fp-hotspot .fp-tip {
    position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: var(--ink, #141416); color: #fff;
    font-size: .75rem; padding: .25rem .55rem; border-radius: 3px; pointer-events: none;
    opacity: 0; transition: opacity .15s ease;
}
.fp-hotspot:hover .fp-tip, .fp-hotspot:focus-visible .fp-tip { opacity: 1; }
@keyframes fpPulse {
    0% { box-shadow: 0 0 0 0 rgba(180, 140, 40, .5); }
    70% { box-shadow: 0 0 0 10px rgba(180, 140, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 140, 40, 0); }
}

@media (max-width: 575.98px) {
    .cmp-head { padding-top: 40px; }
    .pc-compare { left: 3rem; }
    .service-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    .service-name { font-size: 1.25rem; }
    .pc-title { font-size: 1.4rem; }
    .process-step .ps-num { font-size: 2.8rem; top: -1.3rem; }
    .ba-chip-after { left: 4.6rem; }
    .ba-body { padding: 1.5rem 1.25rem 2rem; }
    .stat-num { font-size: 2.6rem; }
    .cta-actions .btn { width: 100%; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; text-align: left; }
    .float-actions { right: 14px; bottom: 14px; }
    .float-actions a { width: 46px; height: 46px; font-size: 1.2rem; }
    .back-to-top { right: 14px; bottom: 74px; width: 42px; height: 42px; }
}

/* ===== EXTRA SMALL (≤480) ===== */
@media (max-width: 480px) {
    .process-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .partners-row { gap: 1.5rem 2rem; }
    .partner-logo img { max-height: 38px; max-width: 110px; }
    .newsletter-form { flex-wrap: wrap; }
    .newsletter-form .form-control, .newsletter-form .btn { flex: 1 1 100%; }
    .award-row { gap: 1rem; }
    .award-year { width: 3.5rem; font-size: 1.25rem; }
    .testi-msg { font-size: 1.1rem; }
}

/* ===== PRINT ===== */
@media print {
    .site-header, .site-footer, .float-actions, .back-to-top, .hero-overlay { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding: 16px 0; }
    a { color: #000; text-decoration: underline; }
    .hero { min-height: auto; }
}

/* ============================================================
   Mobile safety-net & responsive QA  (§12.1 / §12.2 / §9.21)
   Guarantees no horizontal overflow at 375px and that every
   multi-column row stacks. Additive only — does not restructure
   the working layouts above.
   ============================================================ */
@media (max-width: 480px) {
    /* Hard stack of remaining multi-column editorial rows */
    .process-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr; }
    .service-row { flex-wrap: wrap; }
    /* Compare table stays scrollable, not overflowing the page */
    .cmp-table-wrap { max-width: 100%; }
}

@media (max-width: 375px) {
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   QA fix (2026-06-11): real-device mobile horizontal overflow.
   The long bilingual brand name ("Atelier — Architecture & Interior")
   overflowed the sticky header on phones (~390px) → a horizontal
   scrollbar (the "not responsive" symptom). The previous guard only
   fired at ≤375px (used overflow-x:hidden, which would also break the
   position:sticky header), so a 390px phone slipped through.
   Fix the SOURCE — truncate the brand on mobile — and add a global
   overflow-x:clip safety net (clip ≠ hidden: it does NOT create a
   scroll container, so the sticky header keeps working) at ANY width.
   ============================================================ */
body { overflow-x: clip; }
.navbar-brand { min-width: 0; max-width: 100%; }
@media (max-width: 991.98px) {
    .brand-name {
        font-size: 1.1rem; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; max-width: calc(100vw - 96px);
    }
}
@media (max-width: 480px) {
    .brand-name { font-size: 1rem; max-width: calc(100vw - 84px); }
}

/* ROOT CAUSE of the mobile left-cut: a Bootstrap row with a large gutter
   (`g-5` → --bs-gutter-x:3rem → -1.5rem/-24px side margins) overflows a
   `.container` (only .75rem/12px padding) by ~12px each side. On phones that
   pushed the page wider than the viewport (and overflow-x:clip then cut the
   negative-margin content on the LEFT). Cap the horizontal gutter of g-5/gx-5
   rows to 1.5rem on tablet/mobile — exactly what the container padding absorbs
   — so NO row can overflow regardless of which view used a bare `g-5`. */
@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* DESKTOP header overlap fix: the long brand name ("Atelier — Architecture &
   Interior") was colliding with the nav. A navbar-brand with the default
   min-width:auto refuses to shrink, so it forces the nav to overflow LEFT and
   overlap it. Let the brand shrink/ellipsize as the ultimate guard, give the
   header bar more width, and tighten the nav + search so the FULL studio name
   stays visible on normal desktops. */
.navbar-brand { min-width: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) {
    .site-header .navbar > .container { max-width: 1480px; }
    .brand-name { font-size: 1.3rem; }
    .site-header .nav-link { padding: .5rem .62rem; font-size: .9rem; }
    .header-search .form-control { max-width: 168px; }
}
/* Header now collapses to a hamburger below 1200px (navbar-expand-xl) — the full
   horizontal nav + search + CTA + long brand don't fit between 992–1199px. Style
   the collapsed dropdown through 1199px (mirrors the ≤991 rules) so the menu,
   search and CTA stack cleanly. */
@media (max-width: 1199.98px) {
    .site-header .navbar-collapse { background: var(--bg); border-top: 1px solid var(--rule); margin-top: .85rem; padding: 1rem 0; }
    .site-header .nav-link { padding: .6rem 0; }
    .lang-toggle { display: inline-block; padding: .6rem 0; }
    .btn-cta { display: inline-block; margin-top: .4rem; }
    .header-search { margin: .4rem 0; width: 100%; }
    .header-search .form-control { max-width: 100%; }
}

/* ============================================================
   EDITORIAL HOME REDESIGN (magazine direction)
   ============================================================ */
.ed-eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:3.5px; font-size:.72rem; font-weight:600; color:var(--brass); margin-bottom:1.4rem; }
:lang(bn) .ed-eyebrow { letter-spacing:1.2px; }

/* ---- Hero ---- */
.ed-hero { padding: clamp(2.2rem,5vw,5rem) 0 clamp(3rem,7vw,7rem); overflow:hidden; }
.ed-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.ed-hero-copy { max-width:640px; }
.ed-hero-title { font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.5px; font-size:clamp(2.5rem,5.4vw,5rem); color:var(--ink); margin:0 0 1.4rem; }
:lang(bn) .ed-hero-title { font-family:var(--bengali); line-height:1.18; letter-spacing:0; }
.ed-hero-sub { font-family:var(--serif); font-size:clamp(1.1rem,1.6vw,1.4rem); font-weight:400; color:var(--muted); max-width:30em; margin:0 0 2.2rem; }
:lang(bn) .ed-hero-sub { font-family:var(--bengali); }
.ed-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.8rem; margin-bottom:2.6rem; }
.ed-hero-link { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--ink); letter-spacing:.3px; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.ed-hero-link:hover { color:var(--brass); border-color:var(--brass); }
.ed-hero-meta { display:flex; gap:clamp(1.3rem,3vw,2.6rem); border-top:1px solid var(--rule); padding-top:1.6rem; }
.ed-hero-stat { display:flex; flex-direction:column; }
.ed-hero-statnum { font-family:var(--serif); font-size:clamp(1.6rem,2.3vw,2.1rem); font-weight:600; color:var(--ink); line-height:1; }
.ed-hero-statlbl { font-size:.76rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin-top:.45rem; }
:lang(bn) .ed-hero-statlbl { letter-spacing:.3px; text-transform:none; }
.ed-hero-visual { position:relative; }
.ed-hero-frame { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--dark); box-shadow:0 30px 70px rgba(17,24,39,.22); }
.ed-hero-frame::after { content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35); pointer-events:none; z-index:3; }
.ed-hero-frame .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background:none; }
.ed-hero-frame .hero-slide.active { opacity:1; }
.ed-hero-frame .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
.ed-hero-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); font-size:4rem; }
.ed-hero-tag { position:absolute; left:-14px; bottom:30px; z-index:4; display:inline-flex; align-items:center; gap:.5rem; background:var(--bg); color:var(--ink); padding:.7rem 1.1rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1.8px; box-shadow:0 10px 26px rgba(17,24,39,.14); }
.ed-hero-tag i { color:var(--brass); }
:lang(bn) .ed-hero-tag { letter-spacing:.3px; text-transform:none; }

/* ---- Featured: numbered, alternating L/R ---- */
.ed-features { display:flex; flex-direction:column; gap:clamp(4rem,8vw,8rem); margin-top:clamp(2.5rem,5vw,4.5rem); }
.ed-feature { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(1.6rem,4vw,4rem); align-items:center; color:inherit; }
.ed-feature .ed-feature-visual { grid-column:1; } .ed-feature .ed-feature-copy { grid-column:2; }
.ed-feature--rev { grid-template-columns:.88fr 1.12fr; }
.ed-feature--rev .ed-feature-visual { grid-column:2; } .ed-feature--rev .ed-feature-copy { grid-column:1; }
.ed-feature-visual { position:relative; }
.ed-feature-img { position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--rule); }
.ed-feature-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.22,.8,.3,1); }
.ed-feature:hover .ed-feature-img img { transform:scale(1.05); }
.ed-feature-num { position:absolute; top:-.5em; left:-.12em; z-index:2; font-family:var(--serif); font-weight:600; font-size:clamp(3.4rem,7vw,6.4rem); line-height:1; color:rgba(0,174,239,.22); -webkit-text-stroke:1px rgba(0,174,239,.75); }
.ed-feature--rev .ed-feature-num { left:auto; right:-.12em; }
.ed-feature-award { position:absolute; top:1rem; right:1rem; z-index:2; background:var(--ink); color:#fff; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; padding:.4rem .8rem; }
.ed-feature-award i { color:var(--accent); }
.ed-feature-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.ed-feature-tags span { font-size:.72rem; text-transform:uppercase; letter-spacing:1.4px; color:var(--brass); font-weight:600; }
.ed-feature-tags span:not(:last-child)::after { content:"·"; margin-left:.55rem; color:var(--muted); }
.ed-feature-title { font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.08; color:var(--ink); margin:0 0 1rem; transition:color .25s; }
:lang(bn) .ed-feature-title { font-family:var(--bengali); line-height:1.25; }
.ed-feature:hover .ed-feature-title { color:var(--brass); }
.ed-feature-desc { color:var(--muted); font-size:1.02rem; line-height:1.7; margin:0 0 1.3rem; max-width:42ch; }
.ed-feature-facts { display:flex; flex-wrap:wrap; gap:1.3rem; margin-bottom:1.5rem; color:var(--muted); font-size:.9rem; }
.ed-feature-facts i { color:var(--brass); margin-right:.4rem; }

@media (max-width: 991.98px) {
    .ed-hero-grid { grid-template-columns:1fr; gap:2.4rem; }
    .ed-hero-visual { order:-1; }
    .ed-hero-frame { aspect-ratio:4/3; }
    .ed-feature, .ed-feature--rev { grid-template-columns:1fr; gap:1.4rem; }
    .ed-feature .ed-feature-visual, .ed-feature--rev .ed-feature-visual,
    .ed-feature .ed-feature-copy, .ed-feature--rev .ed-feature-copy { grid-column:auto; }
    .ed-feature--rev .ed-feature-num { left:-.05em; right:auto; }
    .ed-feature-num { font-size:3.2rem; }
}
@media (max-width: 575.98px) {
    .ed-hero-meta { gap:1.1rem; flex-wrap:wrap; }
    .ed-hero-frame { aspect-ratio:1/1; }
    .ed-hero-tag { left:0; bottom:16px; }
}

/* ============================================================
   CMYK brand motif (PrintCraft BD) — process-colour bar + halftone
   ============================================================ */
.cmyk-bar { display:block; height:4px; width:100%; border:0;
    background: linear-gradient(to right,
        #00AEEF 0 25%, #EC008C 25% 50%, #FFF200 50% 75%, #141416 75% 100%); }
.cmyk-bar--thin { height:3px; }
.cmyk-rule { display:inline-block; width:64px; height:4px; margin:1rem 0;
    background: linear-gradient(to right,
        #00AEEF 0 25%, #EC008C 25% 50%, #FFF200 50% 75%, #141416 75% 100%); }
.section--halftone { position:relative; }
.section--halftone::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image: radial-gradient(rgba(0,174,239,.07) 1.4px, transparent 1.5px);
    background-size: 14px 14px; }
.section--halftone > * { position:relative; }

/* Nav: keep header on one line on desktop (PP-WORKFLOW point 14) */
@media (min-width: 1200px) { .site-header .navbar-nav { flex-wrap: nowrap; } }