/* ════════════════════════════════════════════════════════════
   HITECHSTUFF — Master Stylesheet (v3 — Responsive + Popup)
   ════════════════════════════════════════════════════════════ */
:root {
  --black:       #000000;
  --black1:      #0A0A08;
  --black2:      #111110;
  --black3:      #1A1A18;
  --black4:      #242420;
  --gold:        #C9A84C;
  --gold-light:  #E4C46A;
  --gold-bright: #F0D080;
  --gold-dark:   #8A6820;
  --gold-pale:   #F5E9C0;
  --white:       #FAFAF8;
  --gray:        #888880;
  --border:      rgba(201,168,76,0.18);
  --font:        'Times New Roman', Times, serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body { background:var(--black); color:var(--white); font-family:var(--font); overflow-x:hidden; max-width:100vw }
input,select,textarea,button { font-family:var(--font) }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:#000 }
::-webkit-scrollbar-thumb { background:var(--gold) }

/* Prevent any element causing horizontal scroll */
img, video, iframe { max-width:100% }

/* ── BOOTSTRAP OVERRIDES ── */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, button, input, textarea, select {
  font-family: var(--font) !important;
}
h1, h2, h3, h4, h5, h6 { color: var(--white); font-weight: bold; }
a { color: var(--gold-light); text-decoration: none; }
a:hover { color: var(--gold-bright); text-decoration: none; }
p { color: var(--white); }

/* ── LOGO TEXT ── */
.logo-text {
  font-family:var(--font);
  font-size:18px;
  font-weight:bold;
  letter-spacing:4px;
  color:var(--gold-light);
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(201,168,76,0.35);
  text-decoration:none;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 44px; height:72px;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(201,168,76,0.12);
  transition:background 0.3s;
}
nav.scrolled { background:rgba(0,0,0,0.97) }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none }
.nav-links a {
  font-family:var(--font); font-size:14px; letter-spacing:1.5px;
  color:rgba(250,250,248,0.75); text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover { color:var(--gold-light) }
.nav-cta {
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  color:var(--black)!important; padding:8px 20px;
  font-weight:bold!important; letter-spacing:1.5px!important;
}
.nav-cta:hover { filter:brightness(1.12)!important }

/* ── DROPDOWN ── */
.has-dropdown { position:relative }
.has-dropdown::before {
  content:''; display:block;
  position:absolute; top:100%; left:-10px; right:-10px; height:14px;
  z-index:1999;
}
nav ul.dropdown {
  position:absolute !important;
  top:calc(100% + 14px) !important;
  left:0 !important;
  list-style:none !important;
  min-width:210px;
  padding:8px 0 !important;
  margin:0 !important;
  z-index:2000;
  background:rgba(10,9,6,0.97) !important;
  border:1px solid rgba(201,168,76,0.2) !important;
  backdrop-filter:blur(20px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  pointer-events:none;
}
.has-dropdown:hover > ul.dropdown,
.has-dropdown:focus-within > ul.dropdown {
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto;
}
nav ul.dropdown li {
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}
nav ul.dropdown li a {
  display:block !important;
  padding:11px 22px !important;
  font-size:14px !important;
  letter-spacing:1.5px;
  color:rgba(250,250,248,0.7) !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:all 0.2s;
  background:transparent !important;
  border:none !important;
}
nav ul.dropdown li a:hover {
  color:var(--gold-light) !important;
  padding-left:30px !important;
  background:rgba(201,168,76,0.06) !important;
}

/* ── HAMBURGER ── */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer }
.hamburger span { display:block; width:22px; height:1px; background:var(--gold); transition:all 0.3s }

/* ── MOBILE MENU ── */
.mob-menu {
  display:none; position:fixed; top:72px; inset:0;
  background:#000; z-index:999;
  flex-direction:column; padding:48px 40px; gap:0; overflow-y:auto;
}
.mob-menu.open { display:flex }
.mob-menu a {
  font-family:var(--font); font-size:28px;
  color:var(--gold-pale); text-decoration:none;
  padding:18px 0; border-bottom:1px solid rgba(201,168,76,0.12);
  transition:color 0.2s, padding-left 0.2s;
}
.mob-menu a:hover { color:var(--gold); padding-left:12px }

/* ── HERO (main page) ── */
.full-hero {
  width:100%; min-height:90vh;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px;
}
.full-hero .bg-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(0.45); transition:transform 8s ease;
}
.full-hero:hover .bg-img { transform:scale(1.03) }
.full-hero .overlay {
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:120px 20px;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(10,9,6,0.6) 100%);
}
.full-hero .content {
  position:relative; z-index:2; max-width:1000px; width:100%; padding:0 24px; margin:auto;
}
.hero-video-bg { position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-video-bg video { width:100%; height:100%; object-fit:cover }
.hero-video-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(10,9,6,0.55),rgba(10,9,6,0.7));
}
.full-hero h1 {
  font-size:clamp(48px,7vw,96px); font-weight:bold; line-height:1.02;
  color:var(--white); margin-bottom:18px; letter-spacing:-1px;
  text-shadow:0 2px 40px rgba(0,0,0,0.5);
}
.full-hero h1 .gold { color:var(--gold-bright) }
.full-hero h1 em { font-style:italic }
.full-hero .sub {
  font-size:clamp(15px,2.2vw,22px); line-height:1.5;
  color:rgba(250,250,248,0.75); margin-bottom:36px; font-weight:normal;
}
.hero-links { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap }
.hl-gold {
  color:var(--black);
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));
  padding:14px 36px;
  font-size:14px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; font-weight:bold;
  transition:filter 0.2s, transform 0.15s; display:inline-block;
}
.hl-gold:hover { filter:brightness(1.1); transform:translateY(-2px) }
.hl-ghost {
  color:var(--gold-light); border:1px solid var(--gold);
  padding:13px 36px; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; transition:all 0.2s; display:inline-block;
}
.hl-ghost:hover { background:rgba(201,168,76,0.08); color:var(--gold-bright) }

/* stats bar */
.stats-row {
  display:flex; align-items:center; justify-content:center;
  margin-top:52px; border-top:1px solid rgba(201,168,76,0.2); padding-top:32px;
}
.stat { text-align:center; padding:0 40px }
.stat-n { font-size:38px; font-weight:bold; color:var(--gold-light); line-height:1 }
.stat-l { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gray); margin-top:6px }
.stat-div { width:1px; height:36px; background:rgba(201,168,76,0.2) }

/* ── GOLD TICKER ── */
.ticker {
  background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light),var(--gold),var(--gold-dark));
  padding:14px 0;
  display:flex; align-items:center; overflow:hidden; width:100%;
}
.ticker-inner {
  display:flex; align-items:center; gap:48px;
  animation:tick 28s linear infinite; white-space:nowrap;
}
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tick-item {
  font-size:14px; letter-spacing:3px; text-transform:uppercase;
  color:var(--black); font-weight:bold;
  display:flex; align-items:center; gap:10px;
}
.tick-dot { width:4px; height:4px; background:var(--black); border-radius:50%; opacity:0.4 }

/* ── PROMO GRID (Apple-style) ── */
.promo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; background:var(--black1) }
.promo-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 8px 8px; background:var(--black1) }
.promo-card {
  position:relative; overflow:hidden; background:var(--black2); min-height:480px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:52px; text-align:center; cursor:pointer;
}
.promo-card.tall { min-height:600px }
.promo-card .pc-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform 0.6s ease; filter:brightness(0.45);
}
.promo-card:hover .pc-img { transform:scale(1.04) }
.promo-card .pc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.45) 55%,rgba(0,0,0,0.2) 100%);
}
.promo-card .pc-content { position:relative; z-index:2; padding:0 28px }
.pc-eyebrow { font-size:14px; letter-spacing:4px; text-transform:uppercase; color:var(--gold-light); display:block; margin-bottom:10px }
.pc-title { font-size:clamp(22px,2.8vw,36px); font-weight:bold; color:var(--white); line-height:1.15; margin-bottom:10px }
.pc-sub { font-size:14px; color:rgba(250,250,248,0.65); margin-bottom:22px; line-height:1.5 }
.pc-links { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap }
.pc-link-gold {
  color:var(--black); background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  padding:10px 26px; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; font-weight:bold; transition:filter 0.2s; display:inline-block;
}
.pc-link-gold:hover { filter:brightness(1.1) }
.pc-link-out {
  color:var(--gold-light); font-size:14px; text-decoration:none;
  border-bottom:1px solid rgba(201,168,76,0.4); padding-bottom:2px; transition:color 0.2s;
}
.pc-link-out:hover { color:var(--gold-bright) }

/* ── SECTION COMMON ── */
.section { padding:100px 80px; background:var(--black1) }
.section.dark { background:var(--black) }
.section.mid { background:var(--black2) }
.section-center { text-align:center; margin-bottom:64px }
.eyebrow-sm { font-size:14px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block }
.eyebrow { font-size:14px; letter-spacing:4px; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; display:block }
.sec-title {
  font-family:var(--font); font-size:clamp(28px,4vw,56px);
  font-weight:bold; line-height:1.1; color:var(--white); margin-bottom:18px;
}
.sec-title em { font-style:italic; color:var(--gold-light) }
.sec-sub { font-size:16px; line-height:1.8; color:var(--gray); max-width:640px; margin:0 auto }
.g-rule { width:48px; height:2px; background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark)); margin:24px auto 0 }
.g-rule.left { margin:24px 0 0 }

/* ── SERVICES GRID ── */
.svc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:8px }
.svc-card {
  background:var(--black3); border:1px solid rgba(201,168,76,0.07);
  padding:52px 36px; position:relative; overflow:hidden;
  cursor:pointer; transition:background 0.3s,border-color 0.3s;
  display:flex; flex-direction:column;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s;
}
.svc-card:hover::after { transform:scaleX(1) }
.svc-card:hover { background:rgba(201,168,76,0.04); border-color:rgba(201,168,76,0.2) }
.svc-icon { width:52px; height:52px; color:var(--gold); margin-bottom:32px; opacity:0.8 }
.svc-num { font-size:14px; letter-spacing:3px; color:rgba(201,168,76,0.3); margin-bottom:14px }
.svc-name { font-size:20px; font-weight:bold; color:var(--white); margin-bottom:14px }
.svc-text { font-size:14px; line-height:1.9; color:var(--gray); margin-bottom:28px; flex:1 }
.svc-arrow { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); text-decoration:none; transition:color 0.2s }
.svc-arrow:hover { color:var(--gold-bright) }

/* ── SPLIT LAYOUT ── */
.split-section { display:grid; grid-template-columns:1fr 1fr }
.split-img { position:relative; overflow:hidden; background:var(--black2) }
.split-img img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity 0.4s,transform 0.4s; min-height:560px }
.split-pills { position:absolute; bottom:28px; left:28px; display:flex; flex-wrap:wrap; gap:8px }
.pill {
  background:rgba(0,0,0,0.75); border:1px solid rgba(201,168,76,0.3);
  color:rgba(250,250,248,0.7); padding:7px 18px; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:all 0.2s; backdrop-filter:blur(10px);
}
.pill.active,.pill:hover { background:var(--gold-dark); border-color:var(--gold); color:var(--white) }
.split-content { background:var(--black2); padding:80px 72px; display:flex; flex-direction:column; justify-content:center }

/* Tabs */
.tab-row { display:flex; gap:0; border-bottom:1px solid rgba(201,168,76,0.15); margin:32px 0 0 }
.tab-btn {
  background:none; border:none; color:var(--gray); cursor:pointer;
  font-size:14px; letter-spacing:2px; text-transform:uppercase; padding:12px 22px;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s;
}
.tab-btn.active,.tab-btn:hover { color:var(--gold-light); border-bottom-color:var(--gold) }
.tab-pane { display:none; padding-top:28px }
.tab-pane.active { display:block }
.tab-pane p { font-size:14px; line-height:1.9; color:var(--gray); margin-bottom:20px }
.feat-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 32px; margin-top:8px }
.feat-list li { font-size:14px; color:var(--white); display:flex; align-items:center; gap:12px }
.feat-list li::before { content:''; width:18px; height:1px; background:var(--gold); flex-shrink:0 }

/* ── FURNITURE GRID ── */
.furn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px }
.furn-card { background:var(--black3); overflow:hidden; cursor:pointer; transition:transform 0.3s }
.furn-card:hover { transform:translateY(-4px) }
.furn-img { overflow:hidden }
.furn-img img { width:100%; height:280px; object-fit:cover; display:block; transition:transform 0.6s }
.furn-card:hover .furn-img img { transform:scale(1.05) }
.furn-card.feat .furn-img img { height:380px }
.furn-card.feat { grid-column:span 2 }
.furn-body { padding:24px 26px }
.furn-cat { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:8px }
.furn-name { font-size:21px; font-weight:bold; color:var(--white); margin-bottom:8px }
.furn-desc { font-size:14px; line-height:1.7; color:var(--gray) }
.furn-cats { display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:36px; border-top:1px solid var(--border) }
.fcat-pill {
  border:1px solid rgba(201,168,76,0.3); color:var(--gold);
  padding:8px 20px; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:all 0.2s; text-decoration:none; display:inline-block;
  background:transparent;
}
.fcat-pill:hover,
.fcat-pill.active { background:var(--gold) !important; border-color:var(--gold) !important; color:var(--black) !important; font-weight:bold }

/* ── CONSTRUCTION ── */
.const-section { display:grid; grid-template-columns:3fr 2fr; background:var(--black) }
.const-img { position:relative; overflow:hidden; min-height:560px }
.const-img img { width:100%; height:100%; object-fit:cover; filter:brightness(0.55) }
.const-img-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,0.1),rgba(0,0,0,0.65)) }
.const-img-label { position:absolute; bottom:52px; left:52px }
.const-content { background:var(--black2); padding:72px 56px; display:flex; flex-direction:column; justify-content:center }
.const-list { list-style:none; margin:28px 0; display:flex; flex-direction:column; gap:0 }
.ci {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid rgba(201,168,76,0.08); cursor:pointer; transition:padding-left 0.2s;
}
.ci:hover { padding-left:10px }
.ci-name { font-size:14px; color:var(--white); letter-spacing:0.5px }
.ci-arr { width:22px; height:22px; color:var(--gold); opacity:0; transition:opacity 0.2s,transform 0.2s; transform:translateX(-8px) }
.ci:hover .ci-arr { opacity:1; transform:translateX(0) }
.calc-btn {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gold); color:var(--black); padding:14px 28px;
  font-size:14px; letter-spacing:3px; text-transform:uppercase;
  font-weight:bold; border:none; cursor:pointer; transition:filter 0.2s;
  text-decoration:none; margin-top:16px;
}
.calc-btn:hover { filter:brightness(1.1) }

/* ── HOME THEATRE ── */
.ht-split { display:grid; grid-template-columns:1fr 1fr; min-height:520px }
.ht-img { position:relative; overflow:hidden }
.ht-img img { width:100%; height:100%; object-fit:cover; filter:brightness(0.6) }
.ht-content { background:var(--black2); padding:72px 60px; display:flex; flex-direction:column; justify-content:center }
.ht-feat-card {
  background:var(--black1); border:1px solid rgba(201,168,76,0.08);
  padding:44px 32px; position:relative; overflow:hidden; cursor:default; transition:background 0.3s;
}
.ht-feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s;
}
.ht-feat-card:hover::before { transform:scaleX(1) }
.ht-feat-card:hover { background:rgba(201,168,76,0.05) }
.ht-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:#000 }

/* ── DESIGNERS CAFÉ ── */
.cafe-section { background:var(--black3); position:relative; overflow:hidden }
.cafe-bg-word {
  position:absolute; top:-30px; left:-10px;
  font-size:clamp(80px,15vw,220px); font-weight:bold;
  color:rgba(201,168,76,0.04); line-height:1; pointer-events:none; white-space:nowrap;
}
.cafe-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:center; position:relative; z-index:1 }
.cafe-feats { display:flex; flex-direction:column; gap:28px; margin:36px 0 }
.cafe-feat { display:flex; gap:20px; align-items:flex-start }
.cafe-feat-icon {
  width:42px; height:42px; background:var(--gold-dark); color:var(--gold-pale);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.cafe-feat-title { font-size:14px; font-weight:bold; color:var(--white); margin-bottom:6px }
.cafe-feat-text { font-size:14px; line-height:1.8; color:var(--gray) }
.cafe-mosaic { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:220px 220px; gap:10px }
.cafe-img { overflow:hidden }
.cafe-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s }
.cafe-img:hover img { transform:scale(1.06) }
.cafe-img:first-child { grid-row:1/3 }

/* ── PROJECTS GRID ── */
.proj-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:auto; gap:10px; margin-top:56px;
}
.proj-card { position:relative; overflow:hidden; cursor:pointer; background:var(--black2) }
.proj-card img { width:100%; height:280px; object-fit:cover; display:block; transition:transform 0.6s,opacity 0.4s }
.proj-card:hover img { transform:scale(1.06); opacity:0.65 }
.proj-info {
  position:absolute; bottom:0; left:0; right:0; padding:22px 26px;
  background:linear-gradient(to top,rgba(0,0,0,0.9),transparent);
  opacity:0; transform:translateY(8px); transition:all 0.4s;
}
.proj-card:hover .proj-info { opacity:1; transform:translateY(0) }
.proj-cat { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:5px }
.proj-name { font-size:19px; font-weight:bold; color:var(--white) }
.proj-meta { font-size:14px; color:rgba(250,250,248,0.55); margin-top:5px }

/* ── PROJECT CARD MEDIA WRAP ── */
.proj-media-wrap {
  position:relative; overflow:hidden; cursor:pointer; display:block;
}
.proj-media-wrap img {
  width:100%; height:280px; object-fit:cover; display:block; transition:transform 0.5s ease;
}
.proj-media-wrap:hover img { transform:scale(1.06) }
.proj-media-overlay {
  position:absolute; inset:0; background:rgba(10,9,6,0); transition:background 0.3s ease;
}
.proj-media-wrap:hover .proj-media-overlay { background:rgba(10,9,6,0.35) }
.proj-play-badge, .proj-zoom-badge {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  opacity:0; transition:opacity 0.3s ease, transform 0.3s ease;
  z-index:3; font-size:52px; line-height:1;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.7));
}
.proj-play-badge i { color:var(--gold-bright) }
.proj-zoom-badge i { color:#fff }
.proj-media-wrap:hover .proj-play-badge,
.proj-media-wrap:hover .proj-zoom-badge {
  opacity:1; transform:translate(-50%,-50%) scale(1);
}

/* ── PROCESS ── */
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:64px; position:relative }
.process-steps::before {
  content:''; position:absolute; top:32px; left:10%; right:10%;
  height:1px; background:rgba(201,168,76,0.2); z-index:0;
}
.step { text-align:center; padding:0 16px; position:relative; z-index:1 }
.step-num {
  width:64px; height:64px; background:var(--black1); border:1px solid rgba(201,168,76,0.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:bold; color:var(--gold);
  margin:0 auto 22px; transition:all 0.3s;
}
.step:hover .step-num { background:var(--gold); color:var(--black); border-color:var(--gold) }
.step-title { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--white); margin-bottom:10px; font-weight:bold }
.step-text { font-size:14px; line-height:1.8; color:var(--gray) }

/* ── WHY GRID ── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:56px }
.why-card { padding:48px 40px; background:var(--black3); border:1px solid rgba(201,168,76,0.06); transition:background 0.3s }
.why-card:hover { background:rgba(201,168,76,0.05) }
.why-icon { width:48px; height:48px; color:var(--gold); margin-bottom:24px; opacity:0.85 }
.why-title { font-size:21px; font-weight:bold; color:var(--white); margin-bottom:12px }
.why-text { font-size:14px; line-height:1.9; color:var(--gray) }

/* ── TESTIMONIALS ── */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
.testi-card {
  background:var(--black3); padding:40px 36px; border-left:3px solid var(--gold-dark);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.testi-q { font-size:60px; color:var(--gold); opacity:0.25; line-height:0.7; margin-bottom:14px }
.testi-text { font-size:15px; font-style:italic; color:var(--white); line-height:1.7; margin-bottom:20px; flex:1 }
.testi-stars { margin-bottom:18px; letter-spacing:3px; font-size:16px }
.testi-stars .star-filled { color:var(--gold) }
.testi-stars .star-empty { -webkit-text-stroke:1px var(--gold-dark); color:transparent }
.testi-author { display:flex; flex-direction:column; align-items:center; gap:4px; width:100% }
.t-avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--black4) }
.t-avatar img { width:100%; height:100%; object-fit:cover }
.t-name { font-size:14px; font-weight:bold; color:var(--white); text-align:center }
.t-loc { font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray) }
.testi-more-wrap { margin-top:44px; display:flex; justify-content:center }
.testi-more-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 32px; border:1px solid var(--gold);
  color:var(--gold-light); font-size:14px; letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; background:transparent; transition:background 0.25s, color 0.25s;
}
.testi-more-btn:hover { background:rgba(201,168,76,0.1); color:var(--gold-bright) }

/* ── BLOG ── */
.blog-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px; margin-top:56px }
.blog-card { background:var(--black3); overflow:hidden; cursor:pointer; transition:transform 0.3s }
.blog-card:hover { transform:translateY(-4px) }
.blog-img img { width:100%; display:block; transition:transform 0.6s }
.blog-card:hover .blog-img img { transform:scale(1.04) }
.blog-feat .blog-img img { height:280px; object-fit:cover }
.blog-sec .blog-img img { height:160px; object-fit:cover }
.blog-body { padding:24px 26px }
.blog-cat { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:10px }
.blog-title { font-size:20px; font-weight:bold; color:var(--white); line-height:1.3; margin-bottom:10px }
.blog-feat .blog-title { font-size:24px }
.blog-excerpt { font-size:14px; line-height:1.8; color:var(--gray) }
.blog-date { font-size:14px; color:rgba(201,168,76,0.45); letter-spacing:1px; margin-top:14px }

/* ── CTA BAND ── */
.cta-band {
  background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold) 40%,var(--gold-light) 60%,var(--gold) 80%,var(--gold-dark) 100%);
  padding:80px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band .sec-title { color:var(--black) }
.cta-band .eyebrow-sm { color:rgba(0,0,0,0.55) }
.cta-acts { display:flex; gap:16px; flex-wrap:wrap }
.btn-dark {
  background:var(--black); color:var(--gold);
  padding:15px 36px; font-size:14px; letter-spacing:3px; text-transform:uppercase;
  font-weight:bold; border:none; cursor:pointer; text-decoration:none;
  display:inline-block; transition:background 0.2s;
}
.btn-dark:hover { background:var(--black2) }
.btn-outline-dark {
  background:transparent; border:1.5px solid rgba(0,0,0,0.4); color:var(--black);
  padding:14px 36px; font-size:14px; letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; text-decoration:none; display:inline-block; transition:all 0.2s;
}
.btn-outline-dark:hover { border-color:rgba(0,0,0,0.8) }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.about-stack { position:relative; height:520px }
.about-main { width:80%; height:90%; object-fit:cover; position:absolute; bottom:0; left:0 }
.about-accent { width:54%; height:50%; object-fit:cover; position:absolute; top:0; right:0; border:6px solid var(--black1) }
.about-yrs { position:absolute; bottom:32px; right:14px; background:var(--gold-dark); padding:20px 24px; text-align:center }
.about-yrs-n { font-size:46px; font-weight:bold; color:var(--gold-pale); line-height:1 }
.about-yrs-l { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:rgba(245,233,192,0.7); margin-top:4px }
.about-vals { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0 }
.av-title { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:bold }
.av-text { font-size:14px; line-height:1.7; color:var(--gray) }

/* ── FOUNDER SECTION ── */
.founder-section { display:grid; grid-template-columns:1fr 1fr; min-height:500px }
.founder-img { position:relative; overflow:hidden; background:var(--black3) }
.founder-img img { width:100%; height:100%; object-fit:cover; filter:brightness(0.8) }
.founder-img-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,0.1),transparent) }
.founder-content { background:var(--black2); padding:80px 72px; display:flex; flex-direction:column; justify-content:center }
.founder-quote {
  font-size:clamp(18px,2.5vw,32px); font-style:italic; color:var(--white); line-height:1.5;
  margin:28px 0; position:relative; padding-left:24px;
}
.founder-quote::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,var(--gold-dark),var(--gold-light));
}
.founder-sig { font-size:28px; font-style:italic; color:var(--gold-light); margin-bottom:4px }
.founder-title { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gray) }

/* ── BRANCHES ── */
.branches-section { background:var(--black); padding:80px; display:flex; flex-direction:column; align-items:center }
.branch-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; width:100%; max-width:900px; margin-top:52px }
.branch-card { background:var(--black2); border:1px solid var(--border); padding:44px 48px; position:relative; overflow:hidden }
.branch-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark)) }
.branch-icon { font-size:32px; margin-bottom:20px }
.branch-name { font-size:32px; font-weight:bold; color:var(--gold-light); margin-bottom:8px }
.branch-addr { font-size:14px; line-height:1.7; color:var(--gray); margin-bottom:20px }
.branch-map { display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-size:14px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:color 0.2s }
.branch-map:hover { color:var(--gold-light) }

/* ── CONTACT ── */
.contact-section { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; background:var(--black1); padding:96px 80px; align-items:start }
.contact-details { display:flex; flex-direction:column; gap:24px; margin:36px 0 }
.ci2 { display:flex; gap:16px; align-items:flex-start }
.ci2-icon { width:42px; height:42px; border:1px solid rgba(201,168,76,0.25); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0 }
.ci2-label { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px }
.ci2-val { font-size:14px; color:var(--white) }
.socials { display:flex; gap:10px; margin-top:32px }
.soc-btn { width:40px; height:40px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.45); cursor:pointer; transition:all 0.2s; text-decoration:none }
.soc-btn:hover { border-color:var(--gold); color:var(--gold) }
.cform { display:flex; flex-direction:column; gap:14px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fg { display:flex; flex-direction:column; gap:7px }
.fl { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:rgba(250,250,248,0.35) }
.fi,.fs,.fta {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:var(--white); padding:13px 15px;
  font-size:14px; outline:none; transition:border-color 0.2s; width:100%;
}
.fi:focus,.fs:focus,.fta:focus { border-color:var(--gold) }
.fs option { background:var(--black2) }
.fta { resize:vertical; min-height:120px }
.fsub {
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  color:var(--black); padding:15px 36px;
  font-size:14px; font-weight:bold; letter-spacing:3px; text-transform:uppercase;
  border:none; cursor:pointer; width:100%; margin-top:8px; transition:filter 0.2s;
}
.fsub:hover { filter:brightness(1.1) }

/* ── FOOTER ── */
footer { background:#000; padding:60px 80px 28px }
.footer-top {
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:56px;
  padding-bottom:44px; border-bottom:1px solid rgba(201,168,76,0.1); margin-bottom:28px;
}
.footer-about { font-size:14px; line-height:1.9; color:rgba(250,250,248,0.35) }
.fc-title { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:bold }
.fc-links { list-style:none; display:flex; flex-direction:column; gap:10px }
.fc-links a { font-size:14px; color:rgba(250,250,248,0.45); text-decoration:none; transition:color 0.2s }
.fc-links a:hover { color:var(--gold-light) }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.footer-copy { font-size:14px; color:rgba(255,255,255,0.2) }
.footer-legal { display:flex; gap:20px; flex-wrap:wrap }
.footer-legal a { font-size:14px; color:rgba(255,255,255,0.2); text-decoration:none }
.footer-legal a:hover { color:rgba(255,255,255,0.45) }

/* ── WHATSAPP FAB ── */
.wa-fab {
  position:fixed; bottom:28px; right:28px; z-index:999;
  width:54px; height:54px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  cursor:pointer; text-decoration:none; transition:transform 0.2s;
  animation:wapulse 2.5s infinite;
}
.wa-fab:hover { transform:scale(1.1); animation:none }
@keyframes wapulse {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,0.4) }
  50%      { box-shadow:0 4px 36px rgba(37,211,102,0.7) }
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  min-height:52svh; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 72px;
}
.page-hero .bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.35) }
.page-hero .overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.85)) }
.page-hero .content { position:relative; z-index:2; max-width:760px; text-align:center; margin:0 auto }
.breadcrumb {
  font-size:14px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(250,250,248,0.4); margin-bottom:18px;
  text-align:center; width:100%;
}
.breadcrumb a { color:var(--gold); text-decoration:none }
.breadcrumb a:hover { color:var(--gold-light) }

/* ── LIGHTBOX (Image Popup) ── */
.ht-lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(6,5,3,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  padding:24px;
}
.ht-lightbox.active { opacity:1; visibility:visible }
.lb-close {
  position:absolute; top:20px; right:24px;
  background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.35);
  color:var(--gold-bright); font-size:20px;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s; z-index:10000;
}
.lb-close:hover { background:rgba(201,168,76,0.25) }
.lb-img-wrap { max-width:90vw; max-height:88vh; text-align:center; animation:lbFadeIn 0.3s ease }
.lb-img-wrap img {
  max-width:100%; max-height:76vh; object-fit:contain;
  border:1px solid rgba(201,168,76,0.15); display:block; margin:0 auto;
}
.lb-caption { color:var(--white); font-size:16px; font-weight:bold; letter-spacing:1px; margin-top:14px }
.lb-subcap { color:var(--gold); font-size:14px; letter-spacing:3px; text-transform:uppercase; margin-top:6px }
.lb-insta-wrap {
  width:min(540px,96vw); max-height:92vh; overflow-y:auto;
  animation:lbFadeIn 0.3s ease; text-align:center;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.lb-insta-wrap::-webkit-scrollbar { width:3px }
.lb-insta-wrap::-webkit-scrollbar-thumb { background:var(--gold) }
.lb-insta-wrap .instagram-media { margin:0 auto !important }
.lb-insta-caption { color:var(--gold); font-size:14px; letter-spacing:2px; text-transform:uppercase; margin-top:14px }
@keyframes lbFadeIn {
  from { opacity:0; transform:scale(0.96) }
  to   { opacity:1; transform:scale(1) }
}

/* ── SERVICE IMAGE POPUP (clickable images on service pages) ── */
.svc-img-popup {
  cursor:zoom-in; position:relative; overflow:hidden; display:block;
}
.svc-img-popup img {
  width:100%; display:block; transition:transform 0.5s ease;
}
.svc-img-popup:hover img { transform:scale(1.04) }
.svc-img-popup .svc-zoom-icon {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.7);
  opacity:0; transition:opacity 0.3s, transform 0.3s;
  color:#fff; font-size:40px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.7));
  z-index:2;
}
.svc-img-popup:hover .svc-zoom-icon { opacity:1; transform:translate(-50%,-50%) scale(1) }
.svc-img-popup::after {
  content:''; position:absolute; inset:0;
  background:rgba(10,9,6,0); transition:background 0.3s;
}
.svc-img-popup:hover::after { background:rgba(10,9,6,0.3) }

/* ── BLOG LISTING ── */
.blog-tag {
  display:inline-block;
  font-size:14px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,168,76,0.3);
  padding:4px 14px; margin-bottom:14px;
}
.blog-featured-card {
  display:grid; grid-template-columns:1.1fr 0.9fr;
  background:var(--black2); border:1px solid var(--border);
  text-decoration:none; overflow:hidden;
  transition:border-color 0.3s;
}
.blog-featured-card:hover { border-color:rgba(201,168,76,0.45) }
.blog-featured-img { position:relative; overflow:hidden; min-height:420px }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s }
.blog-featured-card:hover .blog-featured-img img { transform:scale(1.04) }
.blog-featured-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(10,9,6,0.4));
}
.blog-featured-body {
  padding:56px 52px; display:flex; flex-direction:column; justify-content:center;
  background:var(--black2);
}
.blog-featured-title {
  font-size:clamp(22px,2.5vw,34px); font-weight:bold; color:var(--white);
  line-height:1.25; margin-bottom:18px;
}
.blog-featured-excerpt { font-size:15px; line-height:1.8; color:var(--gray); margin-bottom:24px; flex:1 }
.blog-meta-row { display:flex; align-items:center; gap:10px; margin-bottom:20px }
.blog-date-sm { font-size:14px; color:var(--gray) }
.blog-dot { color:rgba(201,168,76,0.4); font-size:18px }
.blog-read { font-size:14px; color:var(--gold) }
.blog-read-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-light); border-bottom:1px solid rgba(201,168,76,0.35);
  padding-bottom:2px; transition:color 0.2s, border-color 0.2s;
  width:fit-content;
}
.blog-featured-card:hover .blog-read-link { color:var(--gold-bright); border-color:var(--gold) }
.blog-list-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.blog-list-card {
  background:var(--black2); border:1px solid var(--border);
  text-decoration:none; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color 0.3s, transform 0.3s;
}
.blog-list-card:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-4px) }
.blog-list-img { overflow:hidden }
.blog-list-img img { width:100%; height:220px; object-fit:cover; display:block; transition:transform 0.5s }
.blog-list-card:hover .blog-list-img img { transform:scale(1.05) }
.blog-list-body { padding:28px 28px 32px; flex:1; display:flex; flex-direction:column }
.blog-list-title { font-size:18px; font-weight:bold; color:var(--white); line-height:1.35; margin-bottom:12px; flex:1 }
.blog-list-excerpt { font-size:14px; line-height:1.75; color:var(--gray); margin-bottom:18px }

/* ── BLOG DETAIL ── */
.art-hero {
  position:relative; min-height:58vh; overflow:hidden;
  display:flex; align-items:flex-end; padding:0 0 72px;
}
.art-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.35) }
.art-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
}
.art-hero-content { position:relative; z-index:2; max-width:860px; padding:0 80px }
.art-hero-title {
  font-size:clamp(28px,4vw,54px); font-weight:bold; color:var(--white);
  line-height:1.15; margin-bottom:20px;
}
.art-hero-meta { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(250,250,248,0.55) }
.art-layout {
  display:grid; grid-template-columns:80px 1fr;
  max-width:1100px; margin:0 auto;
  padding:72px 80px; gap:60px;
  background:var(--black);
}
.art-sidebar { position:relative }
.art-sidebar-inner {
  position:sticky; top:100px;
  display:flex; flex-direction:column; align-items:center;
}
.art-sidebar-label { font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--gray); margin-bottom:14px; text-align:center }
.art-share-btns { display:flex; flex-direction:column; gap:10px }
.art-share-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(201,168,76,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; text-decoration:none; cursor:pointer;
  color:var(--gray); background:transparent;
  transition:all 0.2s;
}
.art-share-btn:hover { border-color:var(--gold); color:var(--gold-bright); background:rgba(201,168,76,0.08) }
.art-share-wa:hover  { border-color:#25D366; color:#25D366; background:rgba(37,211,102,0.08) }
.art-share-fb:hover  { border-color:#1877F2; color:#1877F2; background:rgba(24,119,242,0.08) }
.art-sidebar-cat { font-size:14px; color:var(--gold); border:1px solid rgba(201,168,76,0.3); padding:4px 10px; text-align:center }
.art-sidebar-val { font-size:14px; color:var(--white); text-align:center }
.art-body { max-width:720px }
.art-lead {
  font-size:20px; line-height:1.8; color:var(--white);
  font-style:italic; border-left:3px solid var(--gold);
  padding-left:24px; margin-bottom:40px;
}
.art-h2 {
  font-size:clamp(20px,2.5vw,28px); font-weight:bold; color:var(--white);
  margin:44px 0 16px; padding-bottom:10px;
  border-bottom:1px solid rgba(201,168,76,0.15);
}
.art-p { font-size:16px; line-height:1.9; color:rgba(250,250,248,0.8); margin-bottom:24px }
.art-figure { margin:36px 0 }
.art-figure img { width:100%; display:block; border:1px solid rgba(201,168,76,0.12) }
.art-cta-block { background:var(--black3); border-left:3px solid var(--gold); padding:32px 36px; margin-top:48px }
.art-cta-block p { font-size:16px; line-height:1.7; color:var(--white); margin:0 }

/* ════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════ */

/* ── 1200px: Large tablets / small desktops ── */
@media(max-width:1200px) {
  .section { padding:80px 48px }
  .footer-top { grid-template-columns:1.5fr 1fr 1fr; }
  .footer-top > div:last-child { grid-column:1/-1 }
  footer { padding:48px 48px 24px }
  .contact-section { padding:80px 48px }
}

/* ── 1100px: Tablet landscape ── */
@media(max-width:1100px) {
  nav { padding:0 28px }
  .nav-links { display:none }
  .hamburger { display:flex }
  .svc-grid { grid-template-columns:repeat(2,1fr) }
  .promo-grid { grid-template-columns:1fr }
  .promo-grid-3 { grid-template-columns:1fr 1fr }
  .split-section { grid-template-columns:1fr }
  .split-img img { min-height:400px }
  .split-content { padding:48px 40px }
  .const-section { grid-template-columns:1fr }
  .const-img { min-height:360px }
  .cafe-grid { grid-template-columns:1fr; gap:48px }
  .footer-top { grid-template-columns:1fr 1fr }
  .ht-grid { grid-template-columns:repeat(2,1fr) }
  .ht-split { grid-template-columns:1fr }
  .ht-img img { min-height:320px }
  .ht-content { padding:48px 40px }
  .founder-section { grid-template-columns:1fr }
  .about-grid { grid-template-columns:1fr }
  .contact-section { grid-template-columns:1fr }
}

/* ── 900px: Blog specific ── */
@media(max-width:900px) {
  .blog-featured-card { grid-template-columns:1fr }
  .blog-featured-img  { min-height:260px }
  .blog-featured-body { padding:32px 28px }
  .blog-list-grid     { grid-template-columns:1fr 1fr }
  .art-hero-content   { padding:0 28px }
  .art-layout         { grid-template-columns:1fr; padding:48px 28px; gap:0 }
  .art-sidebar        { display:none }
}

/* ── 768px: Tablet portrait / large phone ── */
@media(max-width:768px) {
  .section { padding:56px 20px }
  .cta-band { padding:48px 20px }
  footer { padding:44px 20px 20px }
  .footer-top { grid-template-columns:1fr; gap:32px }
  .contact-section { grid-template-columns:1fr; padding:56px 20px; gap:40px }

  /* Grids → single column */
  .svc-grid { grid-template-columns:1fr }
  .furn-grid { grid-template-columns:1fr }
  .furn-card.feat { grid-column:auto }
  .furn-card.feat .furn-img img { height:280px }
  .promo-grid-3 { grid-template-columns:1fr }
  .why-grid { grid-template-columns:1fr }
  .testi-grid { grid-template-columns:1fr }
  .blog-grid { grid-template-columns:1fr }
  .proj-grid { grid-template-columns:1fr 1fr }
  .proj-card img,.proj-media-wrap img { height:220px }
  .process-steps { grid-template-columns:1fr 1fr }
  .process-steps::before { display:none }
  .branch-cards { grid-template-columns:1fr }
  .about-vals { grid-template-columns:1fr }
  .about-stack { height:280px }
  .about-main { width:100%; height:85% }
  .about-accent { display:none }
  .feat-list { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }

  /* Why section header */
  .section.dark > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important; gap:24px !important;
  }

  /* Promo cards shorter on mobile */
  .promo-card { min-height:320px }
  .promo-card.tall { min-height:380px }

  /* Stats row */
  .stats-row { flex-wrap:wrap; gap:28px }
  .stat { padding:0 20px }

  /* Page hero */
  .page-hero { padding:100px 20px 56px; min-height:40svh }

  /* CTA band */
  .cta-band { text-align:center; justify-content:center }
  .cta-acts { justify-content:center }

  /* Construction content */
  .const-content { padding:44px 24px }
  .const-img-label { left:24px; bottom:24px }

  /* Cafe section */
  .cafe-section { padding:56px 20px }
  .cafe-mosaic { grid-template-rows:180px 180px }
}

/* ── 600px: Small phones ── */
@media(max-width:600px) {
  .blog-list-grid { grid-template-columns:1fr }
  .proj-grid { grid-template-columns:1fr }
  .proj-card img,.proj-media-wrap img { height:260px }
  .process-steps { grid-template-columns:1fr }
  .ht-grid { grid-template-columns:1fr }
  .promo-grid { gap:4px; padding:4px }
  .promo-grid-3 { gap:4px; padding:0 4px 4px }

  /* Navigation */
  .mob-menu { padding:32px 24px }
  .mob-menu a { font-size:22px; padding:14px 0 }

  /* Footer */
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:12px }
  .footer-legal { flex-wrap:wrap; gap:12px }

  /* Hero links stack */
  .hero-links { flex-direction:column; gap:12px; align-items:center }
  .hl-gold, .hl-ghost { width:100%; max-width:280px; text-align:center; padding:14px 20px }

  /* Ticker smaller */
  .tick-item { font-size:12px; letter-spacing:2px }

  /* Blog detail hero */
  .art-hero { padding:0 0 48px }
  .art-hero-content { padding:0 20px }
  .art-layout { padding:36px 16px }

  /* Blog featured */
  .blog-featured-body { padding:24px 20px }

  /* Section padding */
  .section { padding:48px 16px }
  .cta-band { padding:36px 16px }
  footer { padding:36px 16px 20px }
  .contact-section { padding:48px 16px }
  .page-hero { padding:90px 16px 48px }

  /* CTA inline block */
  div[style*="padding:72px 80px"] {
    padding:48px 16px !important;
  }
}

/* ── 400px: Very small phones ── */
@media(max-width:400px) {
  .logo-text { font-size:14px; letter-spacing:2px }
  nav { padding:0 16px; height:64px }
  .mob-menu { top:64px }
  .full-hero h1 { font-size:clamp(36px,10vw,64px) }
}

/* ── WHY-HEADER (index.php) ── */
@media(max-width:768px) {
  .why-header-grid {
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
}