/* ======================================================================
   TEKTON ELEVATORS — LUXURY RESPONSIVE POLISH v2
   Desktop • Tablet • Mobile
   Loaded last so it safely refines the existing design system.
   ====================================================================== */

:root {
  --lux-max: 1320px;
  --lux-shadow: 0 24px 70px rgba(8, 27, 54, .12);
  --lux-shadow-dark: 0 28px 80px rgba(0,0,0,.42);
  --lux-gold-ring: rgba(217,164,79,.28);
}

html { overflow-x: hidden; }
body { overflow-x: clip; }

/* A more premium, controlled reading width */
.wrap { max-width: var(--lux-max); }
section { scroll-margin-top: 96px; }

/* ----------------------------------------------------------------------
   Header / navigation
   ---------------------------------------------------------------------- */
.header { min-height: 74px; }
.header .wrap { min-height: 74px; }
.logo__img { max-width: min(224px, 44vw); object-fit: contain; }
.header__actions { margin-left: auto; }
.theme-toggle-btn { width: 42px; height: 42px; }

/* Desktop nav breathing room */
@media (min-width: 1200px) {
  .header .wrap { padding-inline: clamp(24px, 4vw, 56px); }
  .nav { gap: clamp(16px, 1.7vw, 28px); }
  .nav a { font-size: 13px; letter-spacing: .035em; }
}

/* Tablet navigation */
@media (min-width: 769px) and (max-width: 1100px) {
  .header .wrap { padding-inline: 22px; }
  .nav-toggle { display: grid; }
  .header .btn--gold { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0;
    width: min(420px, 88vw);
    height: 100dvh;
    margin: 0;
    margin-left: auto;
    padding: 88px 32px 32px;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    background: linear-gradient(180deg, #081B36 0%, #050F1C 100%);
    box-shadow: -30px 0 80px rgba(0,0,0,.35);
  }
  .nav a { padding: 16px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* ----------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.hero { min-height: clamp(620px, 78vh, 900px); display: flex; align-items: stretch; }
.hero__inner {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(72px, 10vw, 152px);
}
.hero .h-hero { max-width: 12ch; text-wrap: balance; }
.hero p.lede { max-width: 58ch; }
.hero__cta .btn { min-width: 170px; }

@media (max-width: 768px) {
  .hero { min-height: min(780px, 92svh); }
  .hero__inner { padding-block: 76px 56px; justify-content: flex-end; }
  .hero .h-hero { max-width: 11ch; font-size: clamp(2.35rem, 11vw, 4rem); }
  .hero p.lede { font-size: 1rem; max-width: 42ch; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero__cta .btn { width: 100%; min-width: 0; }
  .hero__scroll { margin-top: 34px; }
}

@media (max-width: 420px) {
  .hero { min-height: 720px; }
  .hero__inner { padding-top: 92px; }
  .hero__scroll { display: none; }
}

/* ----------------------------------------------------------------------
   Stats
   ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { min-height: 110px; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 480px) {
  .stat { padding-inline: 18px; min-height: 96px; }
  .stat__num { font-size: 1.45rem; }
}

/* ----------------------------------------------------------------------
   General sections / cards
   ---------------------------------------------------------------------- */
.sec-head { max-width: 740px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .panel, .office, .promo, .pnl, .stage, .cta-final {
  box-shadow: var(--lux-shadow);
}
[data-theme='dark'] .card,
[data-theme='dark'] .panel,
[data-theme='dark'] .office,
[data-theme='dark'] .promo,
[data-theme='dark'] .pnl,
[data-theme='dark'] .stage,
[data-theme='dark'] .cta-final {
  box-shadow: var(--lux-shadow-dark);
}
.card { border-radius: 18px; }
.card__body { padding: clamp(20px, 2vw, 30px); }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  section { padding-block: 64px; }
  .wrap { padding-inline: 18px; }
  .h-sec { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .lede { font-size: 1rem; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card:hover { transform: none; }
  .duo { gap: 14px; }
  .panel { padding: 24px; }
}

/* ----------------------------------------------------------------------
   Editorial split / modernization
   ---------------------------------------------------------------------- */
@media (max-width: 960px) {
  .split { gap: 32px; }
  .split__media--framed::before { inset: auto auto -10px -10px; }
  .promo { padding: 28px; }
}
@media (max-width: 700px) {
  .split { gap: 28px; }
  .split__media--framed::before { display: none; }
  .promo { gap: 28px; padding: 20px; border-radius: 16px; }
  .promo .hero__cta { margin-top: 24px !important; }
  .blueprint { min-height: 230px; }
}

/* ----------------------------------------------------------------------
   Technology grid
   ---------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .feat { padding: 24px; }
}

/* ----------------------------------------------------------------------
   Modernization band / media
   ---------------------------------------------------------------------- */
.band { min-height: 760px; display: flex; align-items: center; }
.band__card { max-width: 820px; }
.modernization-single-img-wrap { overflow: hidden; border-radius: 14px; margin-top: 26px; }
.modernization-single-img-wrap img { width: 100%; display: block; }
@media (max-width: 700px) {
  .band { min-height: auto; }
  .band__card { padding: 22px !important; }
  .scorecard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}
@media (max-width: 430px) {
  .scorecard-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ----------------------------------------------------------------------
   Contact / footer
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; gap: 14px; }
  .office { padding: 22px; }
  .office__lines { grid-template-columns: 1fr; gap: 18px; }
  .office--wide { gap: 24px; }
  .cta-final { padding: 28px 20px; margin-top: 36px; }
  .cta-final .row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cta-final .row .btn { width: 100%; }
  .footer { padding-block: 54px 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { margin-top: 42px; align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ----------------------------------------------------------------------
   Floating controls — keep AI and WhatsApp separated on small screens
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .float-wa { right: 16px; bottom: 16px; min-height: 48px; z-index: 1050; }
  .ai-elevator-widget { right: 16px; bottom: 76px; }
}

/* ----------------------------------------------------------------------
   Designer page
   ---------------------------------------------------------------------- */
.dsn-hero .wrap { padding-inline: clamp(18px, 4vw, 56px); }
.dsn__layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.stage__canvas-wrapper { min-height: 420px; }
.stage__canvas canvas { max-width: min(100%, 760px); }

@media (min-width: 961px) {
  .dsn__layout > aside { position: sticky; top: 98px; }
}

@media (max-width: 960px) {
  .dsn__layout { grid-template-columns: 1fr; }
  .pnl--sticky { position: static; }
  .stage__canvas-wrapper { min-height: 360px; }
}

@media (max-width: 700px) {
  .dsn-hero { padding-block: 54px 42px; }
  .dsn-hero .h-sec { font-size: clamp(2rem, 9vw, 3rem); max-width: 12ch; }
  .dsn { padding-block: 34px 60px; }
  .dsn__layout { gap: 16px; }
  .pnl__head { padding: 16px 18px; }
  .pnl__body { padding: 18px; gap: 16px; }
  .fld-row { grid-template-columns: 1fr; }
  .finishes { display: grid; grid-template-columns: 1fr; }
  .finish span { min-height: 46px; }
  .stage__bar { padding: 14px 16px; gap: 12px; }
  .stage__tools { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .stage__canvas-wrapper { min-height: 300px; padding: 12px; }
  .stage__canvas canvas { width: 100% !important; height: auto !important; }
  .spec table { font-size: .9rem; }
  .spec th, .spec td { padding: 12px 14px; vertical-align: top; }
  .spec__foot { display: grid; grid-template-columns: 1fr; }
  .spec__foot .btn { width: 100%; }
  .note { font-size: .78rem; }
}

@media (max-width: 430px) {
  .dsn-hero .wrap, .dsn .wrap { padding-inline: 14px; }
  .stage__canvas-wrapper { min-height: 250px; }
  .chip { white-space: normal; line-height: 1.25; }
  .spec th { width: 49%; }
}

/* ----------------------------------------------------------------------
   AI Chat — luxury, touch-first responsive behavior
   ---------------------------------------------------------------------- */
.ai-fab-btn {
  min-height: 52px;
  border: 1px solid var(--lux-gold-ring);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.ai-fab-btn:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 4px; }
.ai-lift-modal { max-width: calc(100vw - 28px); }
.ai-chat-form input, .ai-chat-form textarea { min-height: 48px; }

@media (max-width: 700px) {
  .ai-fab-btn { min-height: 50px; padding-inline: 16px; }
  .ai-fab-text { font-size: .75rem; }
  .ai-lift-modal {
    right: 10px;
    left: 10px;
    bottom: 74px;
    width: auto;
    height: min(660px, calc(100svh - 94px));
    max-height: calc(100svh - 94px);
    border-radius: 20px;
  }
  .ai-chat-log { padding: 16px; }
  .ai-chat-header { padding: 14px 16px; }
  .ai-suggestions { padding-inline: 12px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ai-suggestions::-webkit-scrollbar { display: none; }
  .ai-suggestions button { flex: 0 0 auto; min-height: 40px; }
  .ai-chat-form { padding: 12px; }
}

@media (max-width: 390px) {
  .ai-fab-btn .ai-fab-text { display: none; }
  .ai-fab-btn { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  .ai-lift-modal { bottom: 70px; height: calc(100svh - 84px); }
}

/* ----------------------------------------------------------------------
   Accessibility / polish
   ---------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover, .btn:hover, .float-wa:hover, .ai-fab-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg, .reveal, .card, .btn, .ai-fab-btn { animation: none !important; transition: none !important; }
}