/* ==========================================================================
   MR Ingeniería Estructural — Design System
   ========================================================================== */

:root{
  --c-teal:        #104357;
  --c-teal-dark:   #0a2e3d;
  --c-teal-darker: #082530;
  --c-ink:         #10161b;
  --c-ink-soft:    #1b232b;
  --c-gold:        #c6a15b;
  --c-gold-light:  #e3caa0;
  --c-cream:       #f6f3ec;
  --c-cream-soft:  #efece2;
  --c-white:       #ffffff;
  --c-body:        #5c6a72;
  --c-body-dark:   #b9c3c8;
  --c-line:        #e2ddce;

  --f-head: 'Playfair Display', 'Georgia', serif;
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container: 1400px;
  --gutter: clamp(20px, 3vw, 48px);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.22,.61,.22,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur: .6s;

  --shadow-xs: 0 1px 2px rgba(16,22,27,.05), 0 1px 1px rgba(16,22,27,.04);
  --shadow-sm: 0 1px 2px rgba(16,22,27,.05), 0 8px 20px -12px rgba(16,22,27,.16);
  --shadow-md: 0 2px 4px rgba(16,22,27,.05), 0 20px 40px -18px rgba(16,22,27,.22);
  --shadow-lift: 0 34px 64px -30px rgba(16,22,27,.28);
  --shadow-gold: 0 16px 34px -12px rgba(198,161,90,.45);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 140px; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-body);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; }
h1,h2,h3,h4,h5{ font-family:var(--f-head); color:var(--c-ink); margin:0; font-weight:600; line-height:1.12; }
p{ margin:0; }
svg{ display:block; }
::selection{ background: var(--c-gold); color:var(--c-ink); }

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.section{ position:relative; padding: clamp(72px, 10vw, 140px) 0; }
.section--dark{ background: var(--c-ink); }
.section--cream{ background: var(--c-cream); }
.section--white{ background: var(--c-white); }

.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-size: 13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color: var(--c-teal);
}
.eyebrow::before{
  content:''; width:28px; height:1px; background: var(--c-gold);
}
.section-head.on-dark .eyebrow{ color: var(--c-gold-light); }

.section-head{ max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(32px, 4.2vw, 52px); margin-top:14px; letter-spacing:-.01em; }
@media (min-width:640px){ .h2-nowrap{ white-space:nowrap; max-width:none; } }
.section-head p{ margin-top:18px; font-size:17px; line-height:1.7; color: var(--c-body); }
.section-head.on-dark h2{ color:var(--c-white); }
.section-head.on-dark p{ color: var(--c-body-dark); }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items:center; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 17px 34px; border-radius: 999px; font-weight:700; font-size:14.5px;
  letter-spacing:.02em; border:1px solid transparent; white-space:nowrap;
  overflow:hidden; isolation:isolate; transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; transform: translateY(101%);
  transition: transform .5s var(--ease-soft);
}
.btn:hover::before{ transform: translateY(0); }
.btn:active{ transform: scale(.97); }

.btn--gold{ background: var(--c-gold); color: var(--c-ink); box-shadow: var(--shadow-gold); }
.btn--gold::before{ background: var(--c-ink); }
.btn--gold:hover{ color: var(--c-white); box-shadow: 0 20px 40px -12px rgba(198,161,90,.6); }
.btn--gold::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); pointer-events:none;
}
.btn--gold:hover::after{ animation: btnShine .9s var(--ease-soft); }
@keyframes btnShine{ from{ left:-60%; } to{ left:140%; } }

.btn--outline-light{ border-color: rgba(255,255,255,.4); color:#fff; }
.btn--outline-light::before{ background: #fff; }
.btn--outline-light:hover{ color: var(--c-ink); border-color:#fff; }

.btn--outline-dark{ border-color: rgba(16,22,27,.2); color: var(--c-ink); }
.btn--outline-dark::before{ background: var(--c-ink); }
.btn--outline-dark:hover{ color: #fff; border-color: var(--c-ink); }

.btn--ghost{ padding:0; border-radius:0; gap:12px; color:var(--c-ink); }
.btn--ghost::before{ display:none; }
.btn--ghost .ic{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.btn--ghost:hover .ic{ background: var(--c-teal); border-color:var(--c-teal); transform: rotate(45deg); }
.btn--ghost:hover .ic svg{ stroke:#fff; }
.btn--ghost.on-dark{ color:#fff; }
.btn--ghost.on-dark .ic{ border-color: rgba(255,255,255,.25); }

.btn--sm{ padding:12px 22px; font-size:13px; }

/* ============================= HEADER ============================= */
.topbar{
  background: var(--c-ink); color: rgba(255,255,255,.65); font-size:13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:44px; }
.topbar-left{ display:flex; align-items:center; gap:28px; }
.topbar-left a{ color: rgba(255,255,255,.85); transition:color .3s; display:flex; align-items:center; gap:8px; }
.topbar-left a:hover{ color: var(--c-gold-light); }
.topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar-social a{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); transition: all .3s var(--ease); }
.topbar-social a:hover{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.topbar-social svg{ width:13px; height:13px; }

.site-header{
  position: fixed; top:44px; left:0; right:0; z-index:200;
  transition: top .4s var(--ease), background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block: 26px; transition: padding .4s var(--ease); }
.site-header.is-scrolled{ top:0; background: rgba(16,22,27,.92); backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.site-header.is-scrolled .container{ padding-block: 14px; }

.brand{ display:flex; align-items:center; gap:14px; color:#fff; }
.brand .mr-mark{ width:38px; height:38px; color:#fff; flex-shrink:0; transition: transform .5s var(--ease); }
.brand:hover .mr-mark{ transform: rotate(-6deg) scale(1.05); }
.brand-div{ width:1px; height:30px; background: rgba(255,255,255,.3); }
.brand-word{ font-family: var(--f-head); line-height:1.05; }
.brand-word b{ display:block; font-size:21px; font-weight:600; letter-spacing:.01em; }
.brand-word span{ display:block; font-family:var(--f-body); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color: var(--c-gold-light); margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a{
  position:relative; color: rgba(255,255,255,.82); font-size:14.5px; font-weight:600; padding:6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--c-gold);
  transition: width .4s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color:#fff; }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:26px; }
.header-phone{ display:flex; align-items:center; gap:12px; color:#fff; }
.header-phone .ic{ width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.header-phone .ic svg{ width:17px; height:17px; }
.header-phone small{ display:block; font-size:10.5px; color: rgba(255,255,255,.55); letter-spacing:.06em; }
.header-phone strong{ font-family: var(--f-head); font-size:15.5px; font-weight:600; }

.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; }
.burger span{ width:18px; height:1.5px; background:#fff; transition: all .35s var(--ease); }
.burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav{
  position: fixed; inset:0; z-index:199; background: var(--c-ink);
  display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 156px var(--gutter) 48px;
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path .7s var(--ease-soft);
}
.mobile-nav.is-open{ clip-path: circle(150% at calc(100% - 40px) 40px); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; }
.mobile-nav ul a{ font-family: var(--f-head); font-size: clamp(26px,7vw,38px); color:#fff; display:block; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-nav-foot{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex-shrink:0; }
.mobile-nav-foot .btn{ padding:14px 28px; font-size:13.5px; }
.mobile-nav-foot a:not(.btn){ color: var(--c-gold-light); font-weight:600; font-size:15px; font-family:var(--f-body); }

/* ============================= HERO ============================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background: var(--c-ink); overflow:hidden; padding-top:160px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg picture{ display:block; width:100%; height:100%; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; transform: scale(1.12); will-change:transform; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,14,18,.75) 0%, rgba(10,25,33,.35) 35%, rgba(9,19,25,.55) 65%, rgba(8,13,17,.96) 100%),
    linear-gradient(90deg, rgba(8,13,17,.55) 0%, rgba(8,13,17,0) 45%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom: 80px; }
.hero-tag{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 8px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:13px; font-weight:600;
  margin-bottom:30px; backdrop-filter: blur(6px);
}
.hero-tag .dot{ width:26px; height:26px; border-radius:50%; background: var(--c-gold); display:flex; align-items:center; justify-content:center; color:var(--c-ink); }
.hero-tag .dot svg{ width:13px; height:13px; }

.hero h1{
  color:#fff; font-size: clamp(40px, 6.6vw, 96px); letter-spacing:-.015em; max-width: 17ch;
}
.hero h1 em{ font-style:italic; color: var(--c-gold-light); font-weight:500; }
.hero .split{ margin-top:44px; align-items:flex-end; grid-template-columns: 1.3fr .9fr; }
.hero-lead{ font-size:17.5px; line-height:1.75; color: rgba(255,255,255,.72); max-width:46ch; }
.hero-actions{ display:flex; align-items:center; gap:30px; margin-top:30px; flex-wrap:wrap; }


.hero-badge{
  position:absolute; z-index:3; width:132px; height:132px; right: clamp(20px, 6vw, 120px); top: 150px;
  animation: spin 22s linear infinite;
}
.hero-badge-wrap{ position:relative; width:132px; height:132px; }
.hero-badge svg text{ font-family: var(--f-body); font-weight:700; font-size:9.6px; fill: rgba(255,255,255,.88); text-transform:uppercase; }
.hero-badge-core{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background: var(--c-gold);
  display:flex; align-items:center; justify-content:center; animation: spin 22s linear infinite reverse;
}
.hero-badge-core svg{ width:22px; height:22px; color: var(--c-ink); }
@keyframes spin{ to{ transform: rotate(360deg); } }

.love-band{ background: var(--c-cream-soft); padding: 22px 0; overflow:hidden; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.love-track{ display:flex; align-items:center; width:max-content; animation: marquee 46s linear infinite; }
.love-band:hover .love-track{ animation-play-state:paused; }
.love-set{ display:flex; align-items:center; flex-shrink:0; }
.lv-item{
  display:inline-flex; align-items:baseline; gap:8px; font-family: var(--f-head); font-style:italic; font-weight:500;
  font-size:19px; color: var(--c-teal); white-space:nowrap; padding:0 22px; opacity:.85;
}
.lv-item em{ font-style:italic; font-weight:600; color: var(--c-gold); }
.lv-sep{ display:flex; color: var(--c-gold); opacity:.45; flex-shrink:0; }
.lv-sep svg{ width:5px; height:5px; }

.hero-scroll{
  position:absolute; right: var(--gutter); bottom:215px; z-index:3; display:flex; align-items:center; gap:12px;
  color: rgba(255,255,255,.65); font-size:12px; letter-spacing:.14em; text-transform:uppercase; writing-mode: vertical-rl;
}
.hero-scroll .line{ width:1px; height:52px; background: rgba(255,255,255,.3); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--c-gold); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100% } 50%{ top:0 } 100%{ top:100% } }

/* marquee under hero */
.marquee-strip{
  position:relative; background: var(--c-ink); overflow:hidden; padding: 15px 0;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee-track{
  display:flex; width:max-content; animation: marquee 46s linear infinite;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }
.marquee-set{ display:flex; align-items:center; flex-shrink:0; }
.mq-item{
  font-family: var(--f-mono); font-style:normal; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.32); white-space:nowrap; padding:0 20px; transition: color .3s var(--ease);
}
.mq-item--accent{ font-weight:700; color: rgba(230,196,142,.7); }
.marquee-strip:hover .mq-item{ color: rgba(255,255,255,.5); }
.marquee-strip:hover .mq-item--accent{ color: var(--c-gold-light); }
.mq-sep{ display:flex; color: var(--c-gold); opacity:.4; flex-shrink:0; }
.mq-sep svg{ width:3.5px; height:3.5px; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ============================= PAGE HERO (inner pages) ============================= */
.page-hero{
  position:relative; display:flex; align-items:flex-end; min-height: clamp(360px, 46vw, 480px);
  padding-top:160px; background: var(--c-ink); overflow:hidden;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(8,14,18,.72) 0%, rgba(10,25,33,.4) 40%, rgba(8,13,17,.92) 100%),
    linear-gradient(90deg, rgba(8,13,17,.5) 0%, rgba(8,13,17,0) 50%);
}
.page-hero-inner{ position:relative; z-index:2; padding-bottom:56px; width:100%; }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color: rgba(255,255,255,.55); margin-bottom:22px; }
.breadcrumb a{ color: rgba(255,255,255,.75); transition: color .3s; }
.breadcrumb a:hover{ color: var(--c-gold-light); }
.breadcrumb span.sep{ opacity:.5; }
.breadcrumb span.current{ color: var(--c-gold-light); }
.page-hero h1{ color:#fff; font-size: clamp(38px, 5.4vw, 68px); letter-spacing:-.01em; }
.page-hero p{ margin-top:18px; font-size:16.5px; line-height:1.7; color: rgba(255,255,255,.68); max-width:52ch; }

/* ============================= EYEBROW MONO / ACTION BUTTONS (editorial system) ============================= */
.eyebrow-mono{
  display:inline-flex; align-items:center; gap:12px; font-family: var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--c-teal);
}
.eyebrow-mono span{ width:28px; height:1px; background:currentColor; display:block; }
.eyebrow-mono.on-dark{ color: var(--c-gold-light); }

.double-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.action-main{
  display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:222px; height:56px;
  padding:0 6px 0 24px; border-radius:999px; background: var(--c-ink); border:1px solid var(--c-ink); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.action-main i{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color: var(--c-ink);
  font-style:normal; font-size:16px; transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.action-main:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(16,22,27,.35); }
.action-main:hover i{ background: var(--c-gold); transform: rotate(45deg); }

.action-alt{ display:flex; align-items:center; gap:13px; height:56px; font-size:12.5px; font-weight:700; color: var(--c-ink); transition: transform .3s var(--ease); }
.action-alt i{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--c-line); font-style:normal; font-size:16px;
  transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.action-alt:hover{ transform: translateX(4px); }
.action-alt:hover i{ background: var(--c-ink); border-color: var(--c-ink); color:#fff; transform: rotate(-45deg); }

.double-actions-light .action-main{ background:#fff; border-color:#fff; color: var(--c-ink); }
.double-actions-light .action-main i{ background: var(--c-ink); color:#fff; }
.double-actions-light .action-main:hover i{ background: var(--c-gold); color: var(--c-ink); }
.double-actions-light .action-alt{ color:#fff; }
.double-actions-light .action-alt i{ border-color: rgba(255,255,255,.35); color:#fff; }
.double-actions-light .action-alt:hover i{ background:#fff; color: var(--c-ink); }

/* ============================= ABOUT (editorial v2) ============================= */
.about-v2{ padding-bottom: clamp(56px,7vw,90px); position:relative; overflow:hidden; }
.why-teaser-section{ position:relative; overflow:hidden; }
.svc-section{ position:relative; overflow:hidden; }
.about-grid{ display:grid; grid-template-columns: 27% 1fr; gap: 6%; }
.about-side{ padding-top:4px; }
.about-sidenote{ width:200px; margin-top:52px; font-size:13px; line-height:1.65; color: var(--c-body); }
.about-heading{
  font-size: clamp(34px, 4.4vw, 58px); font-weight:600; letter-spacing:-.015em; line-height:1.08;
}
.about-heading em{ font-style:italic; color: var(--c-teal); font-weight:600; }
.about-copy{
  display:grid; grid-template-columns: .8fr 1.2fr; gap:44px; margin: 38px 0 34px; padding-top:26px;
  border-top:1px solid var(--c-line);
}
.about-copy p{ font-size:15px; line-height:1.78; color: var(--c-body); }

/* ============================= WHY US TEASER (home) ============================= */
.why-teaser-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
.why-teaser-card{
  position:relative; padding: 38px 32px; border-radius: var(--radius-md); background: var(--c-white);
  border:1px solid var(--c-line); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.why-teaser-card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-gold)); transform: scaleX(0); transform-origin:left;
  transition: transform .5s var(--ease);
}
.why-teaser-card:hover{ transform: translateY(-7px); border-color: transparent; box-shadow: var(--shadow-lift); }
.why-teaser-card:hover::before{ transform: scaleX(1); }
.why-teaser-icon{
  display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%;
  background: var(--c-cream-soft); margin-bottom:22px; transition: background .4s var(--ease), transform .4s var(--ease);
}
.why-teaser-icon svg{ width:23px; height:23px; color: var(--c-teal); transition: color .4s var(--ease); }
.why-teaser-card:hover .why-teaser-icon{ background: var(--c-teal); transform: rotate(-8deg) scale(1.08); }
.why-teaser-card:hover .why-teaser-icon svg{ color:#fff; }
.why-teaser-num{ display:block; font-family:var(--f-mono); font-size:12px; font-weight:700; color: var(--c-gold); letter-spacing:.08em; }
.why-teaser-card h3{ font-size:19.5px; margin:10px 0 12px; }
.why-teaser-card p{ font-size:14px; line-height:1.7; color: var(--c-body); }

/* ============================= PHOTO BANNER (full-bleed) ============================= */
.photo-banner{ position:relative; height: clamp(440px, 56vw, 640px); color:#fff; overflow:hidden; }
.photo-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,13,17,.92) 0%, rgba(8,13,17,.2) 55%),
    linear-gradient(rgba(8,13,17,0) 55%, rgba(8,13,17,.55) 100%);
}
.banner-content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; }
.banner-content h2{ color:#fff; font-size: clamp(38px,5.4vw,72px); font-weight:500; letter-spacing:-.02em; line-height:1.02; margin:24px 0 20px; }
.banner-content h2 em{ font-style:italic; color: var(--c-gold-light); font-weight:500; }
.banner-content p{ max-width:520px; font-size:15px; line-height:1.75; color: rgba(255,255,255,.7); }
.banner-content .double-actions{ margin-top:30px; }

/* ============================= SERVICES ============================= */
.svc-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background: var(--c-line); border-radius: var(--radius-lg); overflow:hidden; }
.svc-card{
  background: var(--c-white); padding: 44px 36px; position:relative; overflow:hidden; transition: background .5s var(--ease);
}
.svc-card::before{
  content:''; position:absolute; inset:0; background: var(--c-teal); transform: translateY(100%); transition: transform .55s var(--ease-soft); z-index:0;
}
.svc-card:hover::before{ transform: translateY(0); }
.svc-card > *{ position:relative; z-index:1; }
.svc-num{ font-family: var(--f-head); font-size:13px; color: var(--c-gold); font-weight:600; letter-spacing:.05em; }
.svc-icon{ width:54px; height:54px; margin: 20px 0 26px; color: var(--c-teal); transition: color .5s var(--ease), transform .5s var(--ease); }
.svc-card:hover .svc-icon{ color: var(--c-gold-light); transform: scale(1.08) rotate(-4deg); }
.svc-card h3{ font-size:21px; margin-bottom:12px; transition: color .5s var(--ease); }
.svc-card:hover h3{ color:#fff; }
.svc-card p{ font-size:14.5px; line-height:1.7; transition: color .5s var(--ease); }
.svc-card:hover p{ color: rgba(255,255,255,.75); }
.svc-more{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; font-weight:700; color:var(--c-teal); opacity:0; transform: translateY(6px); transition: all .5s var(--ease); }
.svc-card:hover .svc-more{ opacity:1; transform:none; color: var(--c-gold-light); }
.svc-more svg{ width:14px; height:14px; transition: transform .4s var(--ease); }
.svc-card:hover .svc-more svg{ transform: translateX(4px); }

/* ============================= PROCESS ============================= */
.process-wrap{ position:relative; }
.process-line{ position:absolute; top:34px; left:0; right:0; height:1px; background: rgba(255,255,255,.15); }
.process-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position:relative; }
.process-item{ position:relative; padding-top:0; }
.process-num{
  width:68px; height:68px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-family: var(--f-head); font-size:22px; color:#fff; background: var(--c-ink); position:relative; z-index:2; margin-bottom:26px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.process-item:hover .process-num{ background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); transform: translateY(-4px); }
.process-item h3{ color:#fff; font-size:19.5px; margin-bottom:12px; }
.process-item p{ color: var(--c-body-dark); font-size:14px; line-height:1.7; }
.process-item .pnum-bg{ position:absolute; top:-46px; right:0; font-family:var(--f-head); font-size:88px; color: rgba(255,255,255,.04); font-weight:600; z-index:0; line-height:1; }

/* ============================= PROJECTS ============================= */
.proj-section{ position:relative; }

/* ---- Project detail blocks (spec sheet + gallery, pymingenieria-style) ---- */
.pd-list{ display:flex; flex-direction:column; }
.pd-row{ padding: clamp(48px,6vw,80px) 0; background: var(--c-cream); }
.pd-row.is-dark{ background: #e8e4d7; }
.pd-block{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,72px); align-items:center;
}
.pd-block--reverse .pd-media{ order:2; }
.pd-block--reverse .pd-info{ order:1; }

.pd-info h3{ font-size: clamp(26px,2.8vw,36px); margin: 14px 0 22px; }
.pd-specs{ display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.pd-specs li{ display:flex; gap:16px; align-items:flex-start; }
.pd-specs .ic{
  width:40px; height:40px; flex-shrink:0; border-radius:50%; background: var(--c-cream-soft);
  display:flex; align-items:center; justify-content:center;
}
.pd-specs .ic svg{ width:17px; height:17px; color: var(--c-teal); }
.pd-specs small{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--c-body); margin-bottom:3px; }
.pd-specs strong{ font-weight:600; font-size:15px; line-height:1.55; color: var(--c-ink); display:block; }
.pd-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.pd-plans{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.pd-plan-link{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color: var(--c-teal);
  padding:10px 16px; border-radius:999px; border:1px solid var(--c-line); transition: all .3s var(--ease);
}
.pd-plan-link:hover{ background: var(--c-teal); border-color: var(--c-teal); color:#fff; }
.pd-plan-link svg{ width:14px; height:14px; }

.pd-carousel{ display:flex; flex-direction:column; gap:16px; }
.pd-carousel-frame{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; cursor:pointer; background: var(--c-ink);
}
.pd-carousel-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; transition: opacity .4s var(--ease); }
.pd-carousel-frame img.is-out{ opacity:0; }

.pd-gallery-expand{
  position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(-6px); transition: all .35s var(--ease); pointer-events:none;
}
.pd-carousel:hover .pd-gallery-expand{ opacity:1; transform:none; }
.pd-gallery-expand svg{ width:13px; height:13px; color:#fff; }

.pd-carousel-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; opacity:0; transition: all .3s var(--ease);
}
.pd-carousel:hover .pd-carousel-arrow{ opacity:1; }
.pd-carousel-arrow:hover{ background: rgba(255,255,255,.32); }
.pd-carousel-arrow svg{ width:13px; height:13px; color:#fff; }
.pd-carousel-prev{ left:14px; }
.pd-carousel-next{ right:14px; }
.pd-carousel[data-single] .pd-carousel-arrow, .pd-carousel[data-single] .pd-carousel-dots{ display:none; }

.pd-carousel-dots{ display:flex; justify-content:center; align-items:center; gap:8px; }
.pd-dot{ width:6px; height:6px; border-radius:50%; background: var(--c-line); padding:0; transition: all .35s var(--ease); flex-shrink:0; }
.pd-dot:hover{ background: var(--c-gold); }
.pd-dot.is-active{ background: var(--c-teal); width:18px; border-radius:4px; }
@media (hover:none){ .pd-carousel-arrow, .pd-gallery-expand{ opacity:1; } }

.filters{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:46px; }
.filters button{
  display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; color: var(--c-body); font-size:13.5px; font-weight:700; transition: all .35s var(--ease);
}
.filters button i{
  font-style:normal; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px;
  background: var(--c-cream-soft); color: var(--c-body); transition: all .35s var(--ease);
}
.filters button:hover{ border-color: var(--c-teal); color: var(--c-teal); }
.filters button.active{ background: var(--c-teal); border-color:var(--c-teal); color:#fff; }
.filters button.active i, .filters button:hover i{ background: rgba(255,255,255,.18); color:#fff; }
.filters button:hover i{ background: var(--c-teal); color:#fff; }

.proj-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.proj-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/5; cursor:pointer;
  background: var(--c-ink);
}
.proj-card img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-soft), filter .6s var(--ease); }
.proj-card:hover img{ transform: scale(1.09); }
.proj-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,14,18,0) 30%, rgba(8,13,17,.94) 100%);
}
.proj-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 28px; }
.proj-tag{ display:inline-block; padding:5px 12px; border-radius:999px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; }
.proj-overlay h3{ color:#fff; font-size:22px; margin-bottom:4px; }
.proj-overlay span{ color: rgba(255,255,255,.6); font-size:13px; }
.proj-expand{
  position:absolute; top:20px; right:20px; z-index:2; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(-8px); transition: all .4s var(--ease);
}
.proj-card:hover .proj-expand{ opacity:1; transform:none; }
.proj-expand svg{ width:16px; height:16px; color:#fff; }
.proj-card.hide{ display:none; }
.pd-row.hide{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:500; background: rgba(8,13,17,.96); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .45s var(--ease);
  padding: 40px var(--gutter);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox figure{ max-width:1100px; width:100%; margin:0; text-align:center; }
.lightbox img{ max-height:74vh; margin-inline:auto; border-radius:10px; width:auto; }
.lightbox figcaption{ color:#fff; margin-top:22px; font-family: var(--f-head); font-size:20px; }
.lightbox figcaption small{ display:block; font-family:var(--f-body); color:var(--c-gold-light); font-size:13px; margin-top:6px; letter-spacing:.04em; }
.lightbox-close, .lightbox-nav{
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }
.lightbox-close{ position:absolute; top:32px; right:var(--gutter); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.lightbox-close svg{ width:18px; height:18px; color:#fff; }
.lightbox-nav{ position:absolute; top:50%; transform: translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.lightbox-nav svg{ width:18px; height:18px; color:#fff; }
.lightbox-prev{ left: var(--gutter); }
.lightbox-next{ right: var(--gutter); }

/* ============================= WHY US ============================= */
.why-section{ position:relative; }
.why-wrap{ position:relative; z-index:1; display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,6vw,90px); align-items:start; }

.why-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: .82; position:sticky; top:120px; }
.why-media img{ width:100%; height:100%; object-fit:cover; }
.why-media-shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,13,17,.05) 0%, rgba(8,13,17,.15) 55%, rgba(8,13,17,.75) 100%); }
.why-media-tag{
  position:absolute; left:24px; top:24px; right:24px; background: rgba(16,22,27,.5); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); padding:18px 20px; color:#fff;
}
.why-media-tag b{ font-family:var(--f-head); font-size:16px; display:block; }
.why-media-tag span{ font-size:12px; color: rgba(255,255,255,.65); }
.why-stat-badge{
  position:absolute; left:24px; bottom:24px; right:24px; z-index:1; display:flex; align-items:center; gap:16px;
  background: var(--c-teal); border-radius: var(--radius-md); padding:20px 22px; box-shadow: 0 24px 50px -20px rgba(16,67,87,.6);
}
.why-stat-badge strong{ font-family:var(--f-head); font-size:38px; font-weight:600; color:#fff; line-height:1; flex-shrink:0; }
.why-stat-badge strong sup{ font-family:var(--f-mono); font-size:13px; color: var(--c-gold-light); top:-1em; }
.why-stat-badge span{ font-size:12.5px; line-height:1.4; color: rgba(255,255,255,.75); }

.why-list{ display:flex; flex-direction:column; }
.why-item{ display:flex; gap:22px; padding: 30px 0; border-bottom:1px solid var(--c-line); transition: padding-left .35s var(--ease); }
.why-item:first-child{ padding-top:4px; }
.why-item:last-child{ border-bottom:none; }
.why-item:hover{ padding-left:12px; }
.why-icon{
  width:58px; height:58px; border-radius:50%; background: var(--c-cream-soft); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition: background .35s var(--ease), transform .35s var(--ease);
}
.why-icon svg{ width:27px; height:27px; color: var(--c-teal); transition: color .35s var(--ease); }
.why-item:hover .why-icon{ background: var(--c-teal); transform: scale(1.06) rotate(-4deg); }
.why-item:hover .why-icon svg{ color:#fff; }
.why-item-body{ flex:1; padding-top:4px; }
.why-num{ font-family:var(--f-mono); font-size:11.5px; font-weight:700; color: var(--c-gold); letter-spacing:.14em; }
.why-item h3{ font-size:20px; margin:6px 0 9px; }
.why-item p{ font-size:14.5px; line-height:1.7; }

/* ============================= CTA BANNER ============================= */
.cta-banner{ position:relative; overflow:hidden; }
.cta-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-banner::after{ content:''; position:absolute; inset:0; background: linear-gradient(120deg, rgba(8,13,17,.94) 20%, rgba(10,30,40,.7) 100%); }
.cta-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-block: 80px; }
.cta-inner h2{ color:#fff; font-size: clamp(28px,3.6vw,44px); max-width:22ch; }
.cta-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* ============================= CONTACT ============================= */
.contact-section{ position:relative; overflow:hidden; }
.contact-watermark, .section-watermark{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-52%); z-index:0;
  font-family:var(--f-head); font-style:italic; font-weight:600; white-space:nowrap;
  font-size: clamp(90px,16vw,260px); color: var(--c-teal); opacity:.05; pointer-events:none; user-select:none;
}
.contact-wrap{ position:relative; z-index:1; display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,70px); align-items:stretch; }

/* ============================= LOGO WATERMARK (decorative) ============================= */
.logo-watermark{ position:absolute; z-index:0; pointer-events:none; user-select:none; opacity:.04; color: var(--c-teal); }
.logo-watermark svg{ width: clamp(220px, 30vw, 520px); height:auto; display:block; }
.on-dark .logo-watermark, .logo-watermark.on-dark{ color:#fff; opacity:.035; }
.logo-watermark--tr{ top:-8%; right:-4%; transform: rotate(8deg); }
.logo-watermark--bl{ bottom:-10%; left:-5%; transform: rotate(-7deg); }
.logo-watermark--center{ top:50%; left:50%; transform: translate(-50%,-50%) rotate(4deg); }
@media (max-width:760px){ .logo-watermark{ display:none; } }

.contact-card{ position:relative; border-radius: var(--radius-lg); overflow:hidden; color:#fff; min-height:640px; }
.contact-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.contact-card-shade{ position:absolute; inset:0; background: linear-gradient(175deg, rgba(8,13,17,.88) 0%, rgba(10,25,33,.93) 55%, rgba(8,13,17,.97) 100%); }
.contact-card-body{ position:relative; z-index:1; padding: clamp(32px,4vw,52px); height:100%; display:flex; flex-direction:column; }

.contact-badge{
  display:inline-flex; align-items:center; gap:9px; width:fit-content; padding:8px 16px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:12px; font-weight:700;
  letter-spacing:.03em; color: var(--c-gold-light); margin-bottom:24px; backdrop-filter: blur(6px);
}
.contact-badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--c-gold); box-shadow: 0 0 0 3px rgba(198,161,91,.25); }

.contact-card h3{ color:#fff; font-size: clamp(24px,2.4vw,30px); margin-bottom:10px; }
.contact-card-body > p{ color: var(--c-body-dark); font-size:14.5px; line-height:1.7; margin-bottom:30px; }
.contact-item{ display:flex; align-items:center; gap:16px; padding: 17px 4px; border-top:1px solid rgba(255,255,255,.1); border-radius:10px; transition: background .3s var(--ease), padding-left .3s var(--ease); }
.contact-item:first-of-type{ border-top:none; }
a.contact-item:hover{ background: rgba(255,255,255,.05); padding-left:12px; }
.contact-item .ic{ width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .3s var(--ease); }
a.contact-item:hover .ic{ background: var(--c-gold); }
a.contact-item:hover .ic svg{ color: var(--c-ink); }
.contact-item .ic svg{ width:18px; height:18px; color: var(--c-gold-light); transition: color .3s var(--ease); }
.contact-item small{ display:block; color: rgba(255,255,255,.5); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; }
.contact-item strong{ font-weight:700; font-size:16px; }
.contact-item .go{ width:15px; height:15px; margin-left:auto; color: rgba(255,255,255,.3); opacity:0; transform: translateX(-6px); transition: all .35s var(--ease); flex-shrink:0; }
a.contact-item:hover .go{ opacity:1; transform:none; color: var(--c-gold-light); }
.contact-social{ display:flex; gap:12px; margin-top:auto; padding-top:30px; }
.contact-social a{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition: all .35s var(--ease); }
.contact-social a:hover{ background: var(--c-gold); border-color:var(--c-gold); transform: translateY(-3px); }
.contact-social svg{ width:16px; height:16px; color:#fff; }
.contact-social a:hover svg{ color: var(--c-ink); }

.contact-form-card{
  background:#fff; border-radius: var(--radius-lg); padding: clamp(32px,4.5vw,56px);
  box-shadow: 0 40px 90px -40px rgba(16,22,27,.22); border:1px solid rgba(16,22,27,.04);
}
.contact-form-card > .eyebrow{ margin-bottom:14px; }
.contact-form-card > h2{ font-size: clamp(26px,3vw,36px); margin-bottom:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--c-ink); margin-bottom:9px; }
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--c-line); background:transparent; padding: 12px 2px;
  font-size:15.5px; color: var(--c-ink); transition: border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--c-teal); }
.field input::placeholder, .field textarea::placeholder{ color:#b7bfc3; }
.contact-form-card .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.form-note{ font-size:12.5px; color:#909a9f; margin-top:14px; line-height:1.6; text-align:center; }

/* ============================= FOOTER ============================= */
.site-footer{
  --footer-x: 80%; --footer-y: 0%;
  background: linear-gradient(150deg, #0c1013 0%, var(--c-ink) 55%, #0a0d10 100%);
  color: rgba(255,255,255,.6); position:relative; overflow:hidden; isolation:isolate;
}
.footer-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(560px circle at var(--footer-x) var(--footer-y), rgba(198,161,91,.14), transparent 68%);
  transition: background .15s linear;
}
.footer-ring{
  position:absolute; z-index:-1; top:-280px; right:-140px; width:640px; height:640px; border-radius:50%;
  border:1px solid rgba(198,161,91,.12);
  box-shadow: 0 0 0 100px rgba(198,161,91,.025), 0 0 0 200px rgba(198,161,91,.012);
  pointer-events:none;
}

.footer-cta{ border-bottom:1px solid rgba(255,255,255,.1); }
.footer-cta-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:56px; padding: clamp(56px,8vw,96px) var(--gutter) clamp(48px,6vw,76px); flex-wrap:wrap; }
.footer-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:20px; color:var(--c-gold-light); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.footer-eyebrow span{ width:30px; height:1px; background:currentColor; }
.footer-cta h2{ color:#fff; font-size: clamp(34px, 5vw, 62px); font-weight:500; letter-spacing:-.02em; line-height:1; max-width:16ch; }
.footer-cta h2 em{ font-style:italic; color:var(--c-gold); font-weight:500; }

.footer-orbit{
  position:relative; flex:0 0 auto; width:170px; height:170px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; transition: all .45s var(--ease-soft);
}
.footer-orbit:hover{ background: var(--c-gold); border-color: var(--c-gold); transform: rotate(-6deg) scale(1.04); }
.footer-orbit-ring{ position:absolute; inset:0; width:100%; height:100%; animation: spin 16s linear infinite; }
.footer-orbit-ring text{ font-family: var(--f-body); font-size:10px; font-weight:700; fill: rgba(255,255,255,.8); text-transform:uppercase; }
.footer-orbit:hover .footer-orbit-ring text{ fill: rgba(16,22,27,.8); }
.footer-orbit-core{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; transition: color .4s var(--ease); }
.footer-orbit-core svg{ color:var(--c-gold); transition: color .4s var(--ease); }
.footer-orbit:hover .footer-orbit-core, .footer-orbit:hover .footer-orbit-core svg{ color: var(--c-ink); }

.footer-top{ display:grid; grid-template-columns: 1.35fr .75fr .8fr 1.1fr; gap: clamp(36px,5vw,70px); padding: clamp(56px,7vw,90px) 0 clamp(50px,6vw,72px); }
.footer-brand .brand{ margin-bottom:22px; }
.footer-brand p{ font-size:13.5px; line-height:1.75; max-width:32ch; color: rgba(255,255,255,.5); }
.footer-social{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.footer-social a{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  font-size:11.5px; font-weight:600; transition: all .35s var(--ease);
}
.footer-social a:hover{ background:#fff; border-color:#fff; color: var(--c-ink); }
.footer-social svg{ width:14px; height:14px; }
.footer-col-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; position:relative;
  background:none; border:none; padding:0; margin-bottom:24px; cursor:default; text-align:left;
  color:#fff; font-size:11px; font-family:var(--f-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.footer-col-chevron{ width:14px; height:14px; flex-shrink:0; display:none; transition: transform .35s var(--ease); }
.footer-col ul{ display:flex; flex-direction:column; gap:15px; }
.footer-col a{ font-family: var(--f-head); font-size:17px; transition: color .3s var(--ease), transform .3s var(--ease); display:inline-block; }
.footer-col a:hover{ color:var(--c-gold-light); transform: translateX(6px); }

.footer-contact{ padding: 30px; border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); backdrop-filter: blur(12px); border-radius: var(--radius-md); }
.footer-contact-label{ font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--c-gold-light); font-size:10.5px; margin-bottom:12px; }
.footer-contact h3{ color:#fff; font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.1; max-width:16ch; margin-bottom:22px; }
.footer-whatsapp{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding:14px 0;
  border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.footer-whatsapp i{ color:var(--c-gold); display:flex; transition: transform .35s var(--ease); }
.footer-whatsapp:hover i{ transform: translateX(4px); }
.footer-contact p{ font-size:13px; color: rgba(255,255,255,.55); margin-bottom:10px; }
.footer-contact p a:hover{ color:#fff; }

.footer-bottom{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px;
  padding: 24px 0; font-size:12px; color: rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom i{ color: var(--c-gold); font-style:normal; }
.footer-bottom a:hover{ color:#fff; }
.footer-copy{ text-align:left; }
.footer-tagline{ display:flex; justify-content:center; color: var(--c-gold); opacity:.7; transition: opacity .3s var(--ease), color .3s var(--ease); }
.footer-tagline svg{ width:20px; height:20px; }
.footer-tagline:hover{ opacity:1; color: var(--c-gold-light); }
.footer-credit{ display:flex; align-items:center; justify-content:flex-end; gap:16px; text-align:right; }
.back-top{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); flex-shrink:0; }
.back-top:hover{ background:var(--c-gold); border-color:var(--c-gold); }
.back-top svg{ width:16px; height:16px; color:#fff; }
.back-top:hover svg{ color:var(--c-ink); }

/* ============================= SCROLL REVEAL ============================= */
[data-reveal]{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.4s; }
[data-reveal-delay="6"]{ transition-delay:.48s; }

.count{ display:inline-block; }

/* progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; background: var(--c-gold); z-index:999; width:0%; }

/* ============================= WHATSAPP FLOAT ============================= */
.whatsapp-float{
  position:fixed; right:26px; bottom:26px; z-index:220;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px -8px rgba(37,211,102,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.whatsapp-float svg{ width:27px; height:27px; color:#fff; }
.whatsapp-float:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 20px 44px -8px rgba(37,211,102,.65); }
.whatsapp-float:active{ transform: translateY(-1px) scale(.98); }
.whatsapp-ring{
  position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,.55);
  animation: wa-pulse 2.6s ease-out infinite; pointer-events:none;
}
@keyframes wa-pulse{
  0%{ transform:scale(.88); opacity:.85; }
  75%{ transform:scale(1.55); opacity:0; }
  100%{ opacity:0; }
}
.whatsapp-tip{
  position:absolute; right:72px; top:50%; transform: translateY(-50%) translateX(8px);
  background: var(--c-ink); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:700;
  white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.whatsapp-tip::after{
  content:''; position:absolute; right:-5px; top:50%; transform: translateY(-50%) rotate(45deg);
  width:10px; height:10px; background: var(--c-ink);
}
.whatsapp-float:hover .whatsapp-tip{ opacity:1; transform: translateY(-50%) translateX(0); }
body.nav-open .whatsapp-float{ opacity:0; pointer-events:none; }
@media (max-width:760px){
  .whatsapp-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .whatsapp-float svg{ width:24px; height:24px; }
  .whatsapp-tip{ display:none; }
}

/* ============================= BACK-TO-TOP FLOAT ============================= */
.back-top-float{
  position:fixed; left:26px; bottom:26px; z-index:220;
  width:48px; height:48px; border-radius:50%; background: var(--c-ink); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 14px 30px -10px rgba(8,13,17,.55);
  opacity:0; visibility:hidden; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.back-top-float.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-top-float:hover{ background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); transform: translateY(-4px); }
.back-top-float svg{ width:17px; height:17px; }
body.nav-open .back-top-float{ opacity:0; pointer-events:none; }
@media (max-width:760px){
  .back-top-float{ width:44px; height:44px; left:16px; bottom:16px; }
  .back-top-float svg{ width:16px; height:16px; }
}

/* cursor dot (desktop only, decorative) */
.cursor-dot{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background:var(--c-gold); pointer-events:none; z-index:600; transform: translate(-50%,-50%); mix-blend-mode:difference; opacity:0; transition: opacity .3s, width .3s, height .3s; }

/* ============================= RESPONSIVE ============================= */
@media (max-width: 1080px){
  .main-nav, .header-phone{ display:none; }
  .burger{ display:flex; }
  .svc-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-spotlight{ grid-template-columns: 1fr; }
  .proj-spotlight-media{ min-height:320px; }
  .why-wrap{ grid-template-columns:1fr; }
  .why-media{ position:relative; top:auto; aspect-ratio: 1.3; }
  .process-grid{ grid-template-columns: repeat(2,1fr); gap:44px 28px; }
  .process-line{ display:none; }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap:44px; }
  .footer-cta-inner{ align-items:flex-start; }
  .footer-orbit{ width:140px; height:140px; }
  .about-grid{ grid-template-columns: 1fr; gap:28px; }
  .about-sidenote{ width:auto; margin-top:0; }
  .about-copy{ grid-template-columns:1fr; gap:18px; }
  .hero-scroll{ display:none; }
}
@media (max-width: 560px){
  .header-cta{ gap:14px; }
  .header-cta > .btn--gold{ display:none; }
}
@media (max-width: 760px){
  .topbar-left span.hide-sm, .topbar .container > .topbar-left a:nth-child(2){ display:none; }
  .split, .why-wrap, .contact-wrap{ grid-template-columns:1fr; }
  .hero .split{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns: 1fr; }
  .why-teaser-grid{ grid-template-columns: 1fr; }
  .proj-grid{ grid-template-columns: 1fr; }
  .pd-block, .pd-block--reverse{ grid-template-columns:1fr; gap:26px; }
  .pd-block--reverse .pd-media{ order:1; }
  .pd-block--reverse .pd-info{ order:2; }
  .pd-carousel-arrow, .pd-gallery-expand{ opacity:1; }
  .process-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .contact-card{ min-height:460px; }
  .contact-watermark, .section-watermark{ font-size: clamp(60px,20vw,120px); }
  .why-stat-badge{ flex-direction:column; align-items:flex-start; gap:6px; }
  .footer-top{ grid-template-columns: 1fr; row-gap:8px; }
  .footer-cta-inner{ flex-direction:column; align-items:center; text-align:center; gap:34px; }
  .footer-eyebrow{ justify-content:center; }
  .footer-cta h2{ max-width:none; margin-inline:auto; }
  .footer-orbit{ width:120px; height:120px; align-self:center; }
  .footer-bottom{ grid-template-columns: 1fr; text-align:center; gap:16px; padding:28px 0; }
  .footer-copy, .footer-tagline{ text-align:center; }
  .footer-copy{ line-height:1.6; }
  .footer-credit{ justify-content:center; flex-wrap:wrap; text-align:center; gap:8px; }
  .footer-credit .back-top{ display:none; }

  /* footer: centered content + collapsed nav/services accordions (mobile only) */
  .footer-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); }
  .footer-brand p{ max-width:40ch; }
  .footer-social{ justify-content:center; }
  .footer-col{ text-align:center; border-bottom:1px solid rgba(255,255,255,.08); padding:22px 0; }
  .footer-col-toggle{ cursor:pointer; justify-content:center; gap:10px; margin-bottom:0; }
  .footer-col-chevron{ display:block; }
  .footer-col.is-open .footer-col-chevron{ transform:rotate(180deg); }
  .footer-col ul{ align-items:center; overflow:hidden; max-height:0; opacity:0; transition: max-height .4s var(--ease-soft), opacity .3s var(--ease), margin-top .4s var(--ease); }
  .footer-col.is-open ul{ max-height:400px; opacity:1; margin-top:20px; }
  .footer-contact{ text-align:center; }
  .footer-contact h3{ max-width:none; margin-inline:auto; }
  .footer-whatsapp{ justify-content:center; gap:14px; }
  .photo-banner{ height:auto; min-height:520px; }
  .banner-content p{ max-width:100%; }
  .action-main{ min-width:0; width:100%; }
  .double-actions{ width:100%; }
  .cta-inner{ padding-block: 60px; flex-direction:column; align-items:center; text-align:center; }
  .cta-actions{ justify-content:center; }
  .lightbox-nav{ width:42px; height:42px; }
  .hero-scroll{ display:none; }
  .hero-badge{ display:none; }
  .page-hero{ padding-top:130px; min-height:340px; }
  .page-hero-inner{ padding-bottom:36px; }
}