:root{
  --accent:#E2A501; --accent-2:#7F3100; --accent-soft:#F6E622;
  --dark:#0d0d0d; --dark-2:#141414; --dark-3:#1a1a1a; --line:#242424;
  --off:#f5f5f0; --gray:#8b8b93;
  --fh:'Oswald',sans-serif; --fb:'Open Sans',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--fb);background:var(--dark);color:#dcdce0;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
svg{width:1.1em;height:1.1em;flex-shrink:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);text-transform:uppercase;line-height:1.08;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-n{max-width:920px;margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fh);font-weight:600;font-size:.86rem;letter-spacing:1.5px;
  text-transform:uppercase;padding:15px 32px;border-radius:3px;
  border:2px solid transparent;cursor:pointer;text-align:center;
  transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s,border-color .2s}
.btn-solid{background:var(--accent);color:#151005;border-color:var(--accent)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--accent-2);color:#fff;
  border-color:var(--accent-2);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:#fff;color:#111;border-color:#fff;
  transform:translateY(-2px)}
.btn-dark{background:#151515;color:#fff;border-color:#151515}
.btn-dark:hover{background:var(--accent);color:#151005;border-color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:.76rem}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px}

.eyebrow{font-family:var(--fh);font-size:.72rem;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--accent);display:inline-block}
.sec{padding:92px 0}
.sec-sm{padding:64px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 3.2rem}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.85rem);margin:.7rem 0;color:#fff}
.sec-head p{color:var(--gray)}
.light{background:var(--off);color:#3a3a3a}
.light .sec-head h2{color:#141414}
.light .sec-head p{color:#5e5e5e}
.light .eyebrow{color:var(--accent-2)}

/* Cursor: martillo (el del logo). Sin aro — el martillo va solo. */
/* Umbral en 900px, NO en 1025. Windows al 125-150% de escala divide el ancho:
   un monitor de 1536px reporta 1024 CSS px y fallaba el corte por UN pixel, y
   uno de 1280px reporta 853. En esas pantallas el martillo no aparecia nunca.
   El ancho es cinturon de seguridad: `pointer:fine` ya descarta los tactiles. */
@media (pointer:fine) and (min-width:900px){
  /* El !important NO es pereza: `body.cur *` tiene especificidad (0,1,1) y hay
     selectores con `cursor:pointer` que le ganan o le empatan, asi que la MANO
     del sistema se colaba encima del martillo. Los casos reales eran
     `.vid .play` (0,2,0, le gana) y `.faq summary` (0,1,1, empata y va despues
     en el archivo). En vez de ir parchando selector por selector cada vez que se
     agregue un `cursor:pointer`, se gana la pelea de una vez: si el cursor
     personalizado esta activo, NADA muestra el cursor del sistema. */
  /* Va `body.cur` ademas de `body.cur *`: el universal cubre a los HIJOS, no al
     body, y en cualquier franja de fondo desnuda salia la flecha del sistema. */
  body.cur, body.cur *{cursor:none !important}
  /* La punta de la garra esta en (2,3) de un viewBox 32x32. A 42px de render eso
     son 2.63px y 3.94px, que es justo lo que se corre para que la punta caiga
     exactamente sobre el puntero. Si cambia el tamaño, recalcular: px*2/32 y px*3/32.
     Son 42 y no 36 porque a 36 la cabeza del martillo no alcanzaba a leerse. */
  #cur{position:fixed;top:0;left:0;width:42px;height:42px;pointer-events:none;z-index:9999;
    margin:-3.94px 0 0 -2.63px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
  #cur svg{width:42px;height:42px;display:block;
    transform-origin:6.25% 9.375%;transition:transform .16s var(--ease)}
  /* al pasar por algo clickeable el martillo gira sobre su propia punta */
  body.cur.tap #cur svg{transform:rotate(-24deg)}
}
#cur{display:none}
body.cur #cur{display:block}

/* Topbar */
.topbar{background:var(--accent-2);color:#fff;font-family:var(--fh);font-size:.72rem;
  letter-spacing:.6px;padding:.42rem 0;position:relative;z-index:901}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:.5rem;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.tb-left a,.tb-left span{color:rgba(255,255,255,.86);letter-spacing:.6px;transition:color .2s}
.tb-left a{display:inline-flex;align-items:center;gap:5px}
.tb-left a:hover{color:#fff}
.tb-div,.tb-dot{opacity:.38}
.tb-label{opacity:.55;font-size:.68rem;letter-spacing:1px}
.tb-right{display:flex;align-items:center;gap:.75rem;color:var(--accent-soft);font-weight:600}
.tb-right svg{width:.9em;height:.9em}
@media (max-width:900px){.tb-left>*:nth-child(n+6){display:none}.tb-right{display:none}}

/* Header */
header{position:fixed;top:29px;left:0;right:0;z-index:900;
  transition:background .35s,box-shadow .35s,top .3s}
header.scr{top:0;background:rgba(12,12,12,.98);box-shadow:0 2px 24px rgba(0,0,0,.5)}
nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:1rem 1.5rem;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:.7rem}
.logo img{height:62px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:opacity .2s}
.logo:hover img{opacity:.86}
.nav-links{display:flex;align-items:center;gap:.1rem;list-style:none}
.nav-links li{position:relative}
.nav-links a{font-family:var(--fh);font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.75);padding:.5rem .9rem;display:block;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent)}
.drop-menu{position:absolute;top:100%;left:0;min-width:224px;padding-top:8px;
  list-style:none;visibility:hidden;opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .15s ease .15s,visibility .15s ease .15s}
.drop-inner{background:#111;border:1px solid #222;border-radius:4px;padding:.5rem 0;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.drop-menu a{font-size:.75rem;letter-spacing:.8px;color:#bbb;padding:.55rem 1rem;
  text-transform:uppercase}
.drop-menu a:hover{color:var(--accent);background:#181818}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu{visibility:visible;opacity:1;
  pointer-events:auto;transition:opacity .12s ease 0s,visibility .12s ease 0s}
.nav-right{display:flex;align-items:center;gap:.75rem}
/* El telefono y el boton de cotizar son LO QUE GENERA LA LLAMADA: van mas grandes
   que el resto de la nav a proposito. Antes competian en tamaño con los enlaces
   del menu y se perdian. El icono tambien crece con el texto. */
.nav-phone{font-family:var(--fh);font-size:1.12rem;color:var(--accent);letter-spacing:.8px;
  display:flex;align-items:center;gap:.5rem;transition:opacity .2s;white-space:nowrap}
.nav-phone svg{width:1.05em;height:1.05em}
.nav-phone:hover{opacity:.85}
.btn-nav{background:var(--accent);color:#151005;border-color:var(--accent);
  padding:14px 30px;font-size:.92rem;letter-spacing:1.6px}
.btn-nav:hover{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.22);border-radius:3px;
  padding:8px 10px;cursor:pointer;color:#fff}
.burger svg{width:22px;height:22px}
@media (max-width:1024px){
  .nav-links,.nav-right{display:none}
  .burger{display:inline-flex}
  .logo img{height:46px}
}
/* Menu movil */
.mob{position:fixed;inset:0;z-index:950;background:rgba(9,9,9,.985);padding:78px 22px 40px;
  overflow-y:auto;display:none;flex-direction:column;gap:2px}
.mob.open{display:flex}
.mob a{font-family:var(--fh);font-size:1rem;letter-spacing:1.3px;text-transform:uppercase;
  color:#e6e6ea;padding:13px 4px;border-bottom:1px solid #1a1a1a}
.mob a:hover{color:var(--accent)}
.mob a.sub{font-size:.82rem;color:rgba(255,255,255,.58);padding-left:18px}
.mob-close{position:absolute;top:18px;right:20px;background:none;border:0;color:#fff;
  font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 12px}

/* Hero — logo centrado (estilo de la casa) */
/* 33px = alto del topbar, para que el hint de Scroll no quede cortado */
.hero{position:relative;min-height:calc(100vh - 33px);min-height:calc(100svh - 33px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0a0a}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.1);
  transition:opacity 1.5s ease-in-out}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide.on{opacity:1;animation:kbIn 7s ease-in-out forwards;will-change:transform,opacity}
.hero-slide.kb-out.on{animation:kbOut 7s ease-in-out forwards}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,
  rgba(0,0,0,.6) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.72) 100%)}
.hero-ring{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-ring::before,.hero-ring::after{content:'';position:absolute;top:50%;left:50%;
  border-radius:50%;border:1px solid rgba(226,165,1,.11);animation:spin linear infinite}
.hero-ring::before{width:650px;height:650px;margin:-325px 0 0 -325px;animation-duration:45s}
.hero-ring::after{width:420px;height:420px;margin:-210px 0 0 -210px;animation-duration:28s;
  animation-direction:reverse}
.hero-center{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:0 24px}
.hero-logo{width:auto;max-width:80vw;height:28vh;max-height:280px;min-height:170px;
  object-fit:contain;margin-bottom:26px;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.6));
  animation:logoIn .9s cubic-bezier(.22,1,.36,1) both}
.hero-tagline{font-family:var(--fh);font-size:clamp(.82rem,1.9vw,1.05rem);letter-spacing:4px;
  text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:26px;
  animation:fadeUp .8s .35s ease both}
.hero-tagline b{color:var(--accent)}
/* Los dos botones del hero son la conversion de la pagina: van mas grandes que
   un .btn normal. En movil ocupan casi todo el ancho para que se puedan picar
   con el pulgar sin apuntar. */
.hero-cta-wrap{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;
  animation:fadeUp .8s .5s ease both}
.hero-cta-wrap .btn{font-size:1.02rem;padding:19px 42px;letter-spacing:1.8px}
.hero-cta-wrap .btn svg{width:1.15em;height:1.15em}
@media (max-width:560px){
  .hero-cta-wrap{gap:11px;width:100%}
  .hero-cta-wrap .btn{width:100%;font-size:.98rem;padding:18px 24px}
}
.hero-stats-row{display:flex;align-items:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap;
  justify-content:center;animation:fadeUp .8s .8s ease both}
.hstat{text-align:center}
.hstat b{display:block;font-family:var(--fh);font-size:1.45rem;color:var(--accent);line-height:1}
.hstat span{font-size:.65rem;color:rgba(255,255,255,.55);letter-spacing:1.5px;
  text-transform:uppercase}
.hstat-div{width:1px;height:28px;background:rgba(255,255,255,.16)}
@media (max-width:600px){.hstat-div{display:none}.hero-stats-row{gap:1.4rem}}
/* Se centra con left/right + margin auto, NO con translateX(-50%).
   Motivo: `fadeUp` termina en `transform:none` y con fill-mode `both` ese estado
   se queda pegado, borrando el translateX que lo centraba. El elemento acababa
   corrido a la derecha la mitad de su ancho (~25px) — invisible en desktop,
   evidente en movil. Asi el centrado no depende de transform y ninguna animacion
   futura lo puede volver a romper. */
.scroll-hint{position:absolute;bottom:26px;left:0;right:0;
  margin-inline:auto;width:max-content;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:fadeUp .8s .9s ease both}
.scroll-hint span{font-family:var(--fh);font-size:.65rem;letter-spacing:3px;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.scroll-arrow{width:16px;height:16px;border-right:2px solid rgba(255,255,255,.4);
  border-bottom:2px solid rgba(255,255,255,.4);transform:rotate(45deg);
  animation:arrowBounce 1.8s ease-in-out infinite}
@keyframes kbIn{from{transform:scale(1.08)}to{transform:scale(1.16)}}
@keyframes kbOut{from{transform:scale(1.16)}to{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes logoIn{from{opacity:0;transform:scale(.88) translateY(22px)}
  to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes arrowBounce{0%,100%{transform:rotate(45deg) translateY(0)}
  50%{transform:rotate(45deg) translateY(6px)}}

/* Page hero (paginas internas) */
.page-hero{position:relative;overflow:hidden;padding:170px 0 90px;min-height:430px;
  display:flex;align-items:center;background:#0a0a0a}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,
  rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 60%,rgba(0,0,0,.78) 100%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(1.95rem,4.4vw,3.25rem);color:#fff;margin:.9rem 0 1rem;
  max-width:820px}
.page-hero h1 span{color:var(--accent)}
.page-hero p{max-width:620px;font-size:1.05rem;color:#cdcdd4;margin-bottom:2rem}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}

/* Ticker */
.ticker{background:var(--accent);color:#151005;overflow:hidden;white-space:nowrap;padding:.62rem 0}
.ticker-in{display:inline-block;animation:tick 34s linear infinite;font-family:var(--fh);
  font-size:.75rem;letter-spacing:2.2px;text-transform:uppercase;font-weight:600}
.ticker span{padding:0 1.5rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Cards de servicio (CON FOTO) */
/* 3 columnas. Si el total de servicios deja UNA tarjeta sola en la ultima fila
   (7 servicios, por ejemplo), se centra en vez de quedar pegada a la izquierda
   viendose como error de maquetacion. `:last-child:nth-child(3n+1)` es exacto:
   solo es cierto cuando la ultima tarjeta ademas abre fila, o sea que va sola. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards>*:last-child:nth-child(3n+1){grid-column:2}
@media (max-width:900px){.cards>*:last-child:nth-child(3n+1){grid-column:auto}}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{position:relative;border-radius:8px;overflow:hidden;display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.3);background:#111;min-height:330px}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.card:hover>img,.card:focus-visible>img{transform:scale(1.07)}
.card .ov{position:absolute;inset:0;
  background:linear-gradient(transparent 22%,rgba(0,0,0,.55) 55%,rgba(8,8,8,.95))}
.card .txt{position:absolute;left:0;right:0;bottom:0;padding:1.6rem}
.card .tag{font-family:var(--fh);font-size:.62rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.4rem}
.card h3{color:#fff;font-size:1.28rem;margin-bottom:.45rem}
.card p{color:rgba(255,255,255,.74);font-size:.88rem;line-height:1.6}
.card .lk{font-family:var(--fh);font-size:.71rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-top:.8rem;display:inline-block}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2.4rem}}
.split-img{width:100%;height:480px;object-fit:cover;border-radius:8px;
  box-shadow:0 24px 56px rgba(0,0,0,.42)}
@media (max-width:900px){.split-img{height:340px}}
.split h2{color:#fff;font-size:clamp(1.75rem,3.6vw,2.5rem);margin:.7rem 0 1.1rem}
.light .split h2{color:#141414}
.chk{display:flex;gap:.75rem;align-items:flex-start;margin:.85rem 0;color:#b4b4bb}
.chk svg{color:var(--accent);margin-top:.35rem}
.chk b{color:#fff;display:block;font-family:var(--fh);font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;font-size:.92rem}
.chk p{font-size:.9rem;color:#9a9aa2;margin-top:.15rem}
.light .chk{color:#4a4a4a}.light .chk b{color:#141414}.light .chk p{color:#63636b}
.light .chk svg{color:var(--accent-2)}

/* Stats */
/* Las columnas las decide el NUMERO DE STATS que traiga el cliente, no un 4 fijo.
   Años y proyectos son opcionales: con repeat(4,1fr) un negocio que solo declara
   dos quedaba con media caja vacia pintada del color del borde. */
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media (max-width:760px){.stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
.stat{background:var(--dark-2);padding:2.2rem 1.2rem;text-align:center}
.stat b{font-family:var(--fh);font-size:2.5rem;color:var(--accent);display:block;line-height:1}
.stat span{font-size:.71rem;letter-spacing:1.7px;text-transform:uppercase;color:var(--gray);
  display:block;margin-top:.5rem}

/* Proceso — tarjetas CON FOTO */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.step{position:relative;border-radius:8px;overflow:hidden;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-bottom:3px solid var(--accent);box-shadow:0 18px 44px rgba(0,0,0,.34);background:#111}
.step>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.step:hover>img{transform:scale(1.07)}
.step .sov{position:absolute;inset:0;
  background:linear-gradient(transparent 12%,rgba(0,0,0,.72) 48%,rgba(6,6,6,.96))}
.step .stxt{position:relative;padding:1.5rem 1.35rem}
.step .num{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--fh);
  font-size:3.4rem;line-height:1;color:rgba(255,255,255,.16);font-weight:700}
.step .lbl{font-family:var(--fh);font-size:.63rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.35rem}
.step h3{color:#fff;font-size:1.06rem;margin-bottom:.45rem}
.step p{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.6}

/* Who We Are — fotos encimadas con badge */
.about-media{position:relative;padding:0 0 62px 0}
.about-media .a1{width:82%;height:400px;object-fit:cover;border-radius:6px;
  box-shadow:0 26px 60px rgba(0,0,0,.5)}
.about-media .a2{position:absolute;right:0;bottom:0;width:52%;height:250px;object-fit:cover;
  border-radius:6px;border:6px solid var(--dark);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.light .about-media .a2{border-color:var(--off)}
.about-badge{position:absolute;left:6%;bottom:96px;z-index:3;background:var(--accent-2);
  color:#fff;padding:16px 22px;border-radius:4px;text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.about-badge b{display:block;font-family:var(--fh);font-size:2rem;line-height:1}
.about-badge span{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;opacity:.92}
@media (max-width:900px){
  .about-media{padding-bottom:52px}
  .about-media .a1{width:88%;height:290px}
  .about-media .a2{width:56%;height:190px}
  .about-badge{bottom:76px;padding:12px 16px}
  .about-badge b{font-size:1.5rem}
}

/* CTA final con mosaico de fotos (mismas medidas que el resto de la casa) */
.cta-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:480px;
  content-visibility:auto;contain-intrinsic-size:auto 480px}
@media (max-width:900px){.cta-split{grid-template-columns:1fr;min-height:0}}
.cta-split .cta-txt{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;text-align:left;overflow:hidden;
  background:linear-gradient(135deg,rgba(10,10,10,.93) 0%,rgba(16,16,16,.84) 100%),
    url('photos/new-construction-two-story-home-under-construction-knoxville-tn.webp');
  background-size:cover;background-position:center}
.cta-split .cta-txt::before{content:'';position:absolute;top:-40%;right:-10%;width:420px;
  height:420px;pointer-events:none;
  background:radial-gradient(circle,rgba(226,165,1,.14) 0%,transparent 70%)}
.cta-split .cta-txt>*{position:relative;z-index:1}
.cta-split .cta-txt h2{color:#fff;font-size:clamp(1.9rem,3.5vw,3rem);margin:.75rem 0 1rem}
/* margin-left/right en 0: la regla vieja `.cta p{margin:1rem auto}` lo centraba */
.cta-split .cta-txt p{color:#c6c6ce;font-size:.92rem;max-width:400px;
  margin:0 0 1.6rem 0}
@media (max-width:900px){.cta-split .cta-txt{padding:56px 24px}}
.cta-list{list-style:none;margin-bottom:1.9rem}
.cta-list li{display:flex;gap:.6rem;align-items:flex-start;color:#c6c6ce;margin-bottom:.6rem;
  font-size:.9rem}
.cta-list svg{color:var(--accent);margin-top:.3rem}
/* ALTURAS DEL CTA — el mosaico tiene que medir EXACTAMENTE lo que mida la columna
   de texto, y ninguna de las dos formas obvias funciona:
     · `height:480px` fijo -> si el texto crece mas de 480 (titular largo, 3 checks,
       2 botones) la fila crece y el mosaico se queda corto: franja muerta abajo.
     · `height:100%` -> es circular sobre una fila `auto`, asi que el navegador
       vuelve a medir contra el tamaño natural de las fotos y la seccion se dispara
       (medido: 1270px cuando el texto solo pedia 511).
   La salida es sacar al mosaico del calculo: `.cta-media` es la celda del grid y
   define el alto (el texto manda), y `.cta-grid` va ABSOLUTO adentro. Al estar
   fuera del flujo, las fotos ya no aportan su alto natural a nada. */
.cta-media{position:relative;min-height:480px;overflow:hidden;background:#161616}
.cta-grid{position:absolute;inset:0;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0}
.cta-grid img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.cta-grid img:hover{transform:scale(1.03)}
/* En movil se apila en una sola columna, asi que no hay nada que igualar. */
@media (max-width:900px){.cta-media{min-height:280px;height:280px}}

/* Galeria */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.gal{grid-template-columns:1fr 1fr}}
.gal figure{margin:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#111}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gal figure:hover img{transform:scale(1.08)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.ba{grid-template-columns:1fr}}
.ba figure{margin:0;border-radius:8px;overflow:hidden;background:#111;position:relative}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.82);
  color:#fff;font-family:var(--fh);font-size:.68rem;letter-spacing:2.2px;
  text-transform:uppercase;padding:6px 13px;border-radius:3px}
.ba figure.after figcaption{background:var(--accent);color:#151005}

/* Videos de obra */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.vids{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vids{grid-template-columns:1fr}}
.vid{position:relative;border-radius:8px;overflow:hidden;background:#111;
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.vid video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#111}
.vid .vcap{padding:1.1rem 1.25rem;border-top:1px solid var(--line)}
.vid .vcap h3{color:#fff;font-size:.98rem;margin-bottom:.3rem}
.vid .vcap p{font-size:.83rem;color:#8b8b93;line-height:1.55}
.vid .play{position:absolute;top:0;left:0;right:0;bottom:74px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;border:0;padding:0;
  background:rgba(0,0,0,.28);transition:background .25s}
.vid .play:hover{background:rgba(0,0,0,.12)}
.vid .play span{width:62px;height:62px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s}
.vid .play:hover span{transform:scale(1.08)}
.vid .play svg{width:22px;height:22px;color:#151005;margin-left:3px}
.vid.on .play{display:none}

/* Filtros de la galeria de Projects: All Projects + un tab por servicio + Videos.
   Reusa .tabs/.tab de service areas; aqui solo van la variante clara y el ocultado.
   Filtrar es esconder, no recargar: las fotos ya estan en el DOM. */
.gal-filters{margin-bottom:2.2rem}
.light .tab{background:#fff;border-color:#e4e4dc;color:#5e5e5e}
.light .tab:hover{border-color:var(--accent-2);color:#141414}
.light .tab[aria-pressed="true"]{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
.tab[aria-pressed="true"]{background:var(--accent);color:#151005;border-color:var(--accent)}
.tab .n{opacity:.6;margin-left:7px;font-size:.7rem}
.tab svg{width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.gal figure[hidden],.gal[hidden],[data-vids][hidden]{display:none}
.vids-lead{text-align:center;color:#5e5e5e;max-width:640px;margin:-.6rem auto 2.2rem;
  font-size:.94rem}

/* Testimonio en video (About). Es VERTICAL 9:16 —grabado en celular— asi que no
   cabe en la grilla .vids, que esta hecha para clips horizontales. Va en split:
   el video acotado a la izquierda y el texto al lado. Reusa .vid para heredar
   el boton de play y su JS; aqui solo se corrige la proporcion. */
.testi{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:2.8rem;
  align-items:center;max-width:940px;margin:0 auto}
@media (max-width:820px){.testi{grid-template-columns:1fr;gap:2rem}
  .testi .vid{max-width:320px;margin:0 auto}}
.testi .vid video{aspect-ratio:9/16}
.testi .vid .play{bottom:0}
.testi-txt h3{color:#fff;font-size:1.5rem;margin-bottom:.8rem;line-height:1.25}
.testi-txt p{color:#9a9aa2;font-size:.98rem;line-height:1.7}
.testi-txt .quote{color:var(--accent);font-size:2.6rem;line-height:1;display:block;
  margin-bottom:.4rem;font-family:var(--fh)}
/* Con dos o mas testimonios: separador entre ellos y lados alternados. Dos
   filas identicas se leen como plantilla; alternadas se leen como dos clientes.
   OJO con la especificidad: .testi.flip es (0,2,0) y le gana al .testi (0,1,0)
   del @media de arriba aunque el @media venga despues. Por eso el movil se
   apaga aqui abajo con .testi.flip, no con .testi: si se deja al de arriba,
   en celular la segunda fila se queda en dos columnas y el video sale del ancho.
   Es el mismo tropiezo del scroll-hint y del cursor. */
.testi + .testi{margin-top:3.2rem;padding-top:3.2rem;border-top:1px solid var(--line)}
.testi.flip{grid-template-columns:1fr minmax(0,320px)}
.testi.flip .vid{order:2}
@media (max-width:820px){
  .testi.flip{grid-template-columns:1fr}
  .testi.flip .vid{order:0}
  .testi + .testi{margin-top:2.4rem;padding-top:2.4rem}
}
.testi-mas{color:#8b8b93;font-size:.94rem;text-align:center;max-width:560px;
  margin:3rem auto 0}

/* Bloque de licencia y credenciales. Existe porque el numero de licencia es
   VERIFICABLE en el portal del estado y la competencia de Knoxville no publica
   el suyo: invitar a comprobarlo vale mas que solo afirmar "licensed". */
.lic{display:grid;grid-template-columns:minmax(0,1.08fr) 1fr;gap:2.4rem;align-items:center;
  max-width:1020px;margin:0 auto;background:var(--dark-2);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:8px;padding:2.2rem 2.4rem}
@media (max-width:820px){.lic{grid-template-columns:1fr;gap:1.6rem;padding:1.8rem 1.5rem}}
/* El certificado es un documento BLANCO sobre fondo oscuro: el borde claro y la
   sombra evitan que se vea como un recorte pegado encima de la seccion. */
.lic-cert{margin:0;border-radius:6px;overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.lic-cert img{width:100%;height:auto;display:block}
.lic-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.lic-badge{width:52px;height:52px;flex:none;border-radius:50%;
  background:rgba(226,165,1,.12);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center}
.lic-badge svg{width:24px;height:24px;color:var(--accent)}
.lic-num{font-family:var(--fh);font-size:1.28rem;color:var(--accent);line-height:1.2}
.lic-txt{color:#9a9aa2;font-size:.94rem;line-height:1.65}
.lic-txt b{color:#fff;font-weight:600}
.lic-links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1rem;font-size:.82rem;
  font-family:var(--fh);letter-spacing:1.2px;text-transform:uppercase}
.lic-links a{color:var(--accent);border-bottom:1px solid rgba(226,165,1,.4);
  padding-bottom:2px;transition:.2s}
.lic-links a:hover{color:#fff;border-color:#fff}
@media (max-width:700px){.lic{text-align:center}.lic-links{justify-content:center}}

/* Tarjetas de ciudad — mismo patrón compacto que Splash It */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.city-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.city-grid{grid-template-columns:1fr}}
.city-card{background:#111;border:1px solid var(--line);border-radius:6px;padding:1.75rem;
  display:block;transition:border-color .25s,transform .25s}
.city-card:hover{border-color:rgba(226,165,1,.38);transform:translateY(-4px)}
.city-card .ico{display:flex;align-items:center;gap:.5rem;color:var(--accent);margin-bottom:.6rem}
.city-card h3{font-size:1rem;color:#fff;margin-bottom:.4rem;letter-spacing:.5px}
.city-card p{font-size:.82rem;color:#7d7d85;margin-bottom:.8rem;line-height:1.6}
.city-card .arrow{font-family:var(--fh);font-size:.7rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent)}

/* Caja de mapa suelta (contacto). Sin esto el iframe sale a 300x150 por defecto. */
.map-box{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#111}
.map-box iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(.2)}

/* Areas */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.tab{font-family:var(--fh);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--line);background:var(--dark-2);color:#c8c8ce;
  border-radius:3px;cursor:pointer;transition:.2s}
.tab:hover{border-color:var(--accent);color:#fff}
.tab[aria-selected="true"]{background:var(--accent);color:#151005;border-color:var(--accent)}
.panel{display:none;background:var(--dark-2);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;grid-template-columns:1fr 1fr}
.panel[data-on="1"]{display:grid}
@media (max-width:800px){.panel[data-on="1"]{grid-template-columns:1fr}}
.panel-txt{padding:2.4rem}
.panel-txt h3{color:#fff;font-size:1.5rem;margin-bottom:.7rem}
.panel-txt p{color:#9a9aa2;font-size:.93rem}
.panel iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(.35) contrast(1.05)}
.area-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4rem}
.area-list a{font-family:var(--fh);font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--line);border-radius:3px;color:#c8c8ce;transition:.2s}
.area-list a:hover{border-color:var(--accent);color:var(--accent)}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:6px;background:var(--dark-2);
  margin-bottom:10px;overflow:hidden}
.faq summary{font-family:var(--fh);font-size:1rem;letter-spacing:.4px;color:#fff;
  padding:1.15rem 3rem 1.15rem 1.35rem;cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:1.35rem;top:50%;
  transform:translateY(-50%);color:var(--accent);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding:0 1.35rem 1.35rem;color:#9a9aa2;font-size:.94rem}

/* Reviews — widget real del cliente (GHL) */
.reviews-embed{background:#fff;border-radius:8px;padding:10px;max-width:1000px;margin:0 auto;
  box-shadow:0 20px 50px rgba(0,0,0,.35);min-height:220px}
.reviews-embed iframe{display:block;border:0;width:100%;min-height:200px}

/* Reviews honestas — sin inventar nada */
.rev-cta{background:var(--dark-2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:2.6rem;text-align:center;max-width:760px;margin:0 auto}
.rev-cta .stars{color:var(--accent);font-size:1.5rem;letter-spacing:5px;margin-bottom:.8rem}
.rev-cta h3{color:#fff;font-size:1.5rem;margin-bottom:.8rem}
.rev-cta p{color:#9a9aa2;max-width:520px;margin:0 auto 1.6rem}

/* CTA */
.cta{position:relative;overflow:hidden;background:var(--dark-2);text-align:center}
.cta::before{content:'';position:absolute;inset:0;background:
  radial-gradient(620px 340px at 15% 120%,rgba(226,165,1,.17),transparent 70%),
  radial-gradient(620px 340px at 85% -20%,rgba(127,49,0,.17),transparent 70%)}
.cta .wrap{position:relative}
.cta h2{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem)}
.cta p{color:#c6c6ce;max-width:560px;margin:1.1rem auto 2.1rem}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2.2rem}}
.info-row{display:flex;gap:.95rem;align-items:flex-start;padding:1.15rem 0;
  border-bottom:1px solid var(--line)}
.info-row svg{color:var(--accent);margin-top:.3rem;width:1.25em;height:1.25em}
.info-row b{font-family:var(--fh);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);display:block}
.info-row a,.info-row p{color:#fff;font-size:1.02rem}
.info-row a:hover{color:var(--accent)}
.form-card{background:var(--dark-2);border:1px solid var(--line);border-radius:8px;padding:2rem}
.form-card h3{color:#fff;font-size:1.32rem;margin-bottom:.4rem}
.form-card>p{color:var(--gray);font-size:.9rem;margin-bottom:1.5rem}
.field{margin-bottom:1.1rem}
.field label{font-family:var(--fh);font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;
  color:#b4b4bb;display:block;margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;background:#0f0f0f;
  border:1px solid var(--line);border-radius:4px;color:#fff;padding:12px 14px;
  font-family:var(--fb);font-size:.95rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);
  outline-offset:0;border-color:var(--accent)}
.field textarea{min-height:110px;resize:vertical}
.req{color:var(--accent)}
.form-note{font-size:.8rem;color:var(--gray);margin-top:1rem}

/* Breadcrumb (dentro del page-hero) */
.crumb{font-family:var(--fh);font-size:.74rem;letter-spacing:.6px;color:rgba(255,255,255,.5)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.crumb a{color:var(--accent);transition:opacity .2s}
.crumb a:hover{opacity:.75}
.crumb li[aria-current]{color:rgba(255,255,255,.72)}

/* Prose */
.prose p{margin-bottom:1.15rem;color:#aeaeb6}
.prose h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.2rem);margin:2.4rem 0 1rem}
.prose h3{color:#fff;font-size:1.2rem;margin:1.8rem 0 .6rem}
.prose ul{margin:0 0 1.3rem 1.2rem;color:#aeaeb6}
.prose li{margin-bottom:.5rem}
.note{background:var(--dark-2);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;
  padding:1.15rem 1.4rem;color:#b4b4bb;font-size:.92rem;margin:1.6rem 0}

/* Footer */
footer{background:#070707;border-top:1px solid var(--line);padding:60px 0 26px;
  color:#84848c;font-size:.88rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.6rem;margin-bottom:2.6rem}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.82rem;letter-spacing:2.2px;margin-bottom:1.1rem}
footer ul{list-style:none}
footer li{margin-bottom:.55rem}
footer a:hover{color:var(--accent)}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem}
.flogo{display:flex;align-items:center;gap:11px;margin-bottom:1rem}
.flogo img{height:52px;width:auto}
.flogo span{font-family:var(--fh);color:#fff;font-size:1.05rem;text-transform:uppercase;line-height:1.15}
.flogo b{color:var(--accent);display:block;font-size:.68rem;letter-spacing:2.4px}
/* Redes sociales. Los iconos van MONOCROMOS y heredan el color del texto: en un
   footer oscuro el azul de Facebook y el degradado de Instagram se ven pegados
   encima, no integrados. Se prenden en acento al pasar el mouse, igual que el
   resto de los enlaces del footer. La fila entera desaparece sola si el cliente
   no tiene ninguna de las dos: mejor nada que un icono que no lleva a ningun lado. */
.fsoc{display:flex;gap:10px;margin-top:1.2rem}
.fsoc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:#9a9aa2;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.fsoc a:hover{background:var(--accent);border-color:var(--accent);color:#151005}
.fsoc svg{width:18px;height:18px;display:block}
.credit a{color:var(--accent)}

/* Sticky mobile call bar */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:95;display:none;
  background:var(--accent);border-top:1px solid rgba(0,0,0,.2)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;
  font-family:var(--fh);font-size:.9rem;letter-spacing:1.6px;text-transform:uppercase;color:#151005}
@media (max-width:768px){.callbar{display:block}body{padding-bottom:54px}}

/* Reveal — visible por defecto; solo se oculta si el JS esta vivo */
.js .rev{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rev{opacity:1;transform:none}
  .hero-slide{transition:none}
}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#151005;
  padding:12px 20px;font-family:var(--fh);z-index:999}
.skip:focus{left:12px;top:12px}

/* FAQ sobre fondo claro */
.faq-light details{background:#fff;border-color:#e4e4dc}
.faq-light summary{color:#141414}
.faq-light details[open] summary{color:var(--accent-2)}
.faq-light summary::after{color:var(--accent-2)}
.faq-light .a{color:#5e5e5e}