/* ============================================================  
   ATEMPO PHOTOGRAPHY — self-contained home.  
   Scoped under #atempo so WordPress theme styles can't interfere.  
   Spacing in FIXED px (no vw/svh) so it never breaks inside a  
   theme container. No scroll animation. Refined service hover.  
============================================================ */  
#atempo *{margin:0;padding:0;box-sizing:border-box}  
#atempo{  
  --ink:#231f20;--turq:#ddf0eb;--paper:#fff;  
  --ink-70:rgba(35,31,32,.70);--ink-45:rgba(35,31,32,.45);  
  --ink-12:rgba(35,31,32,.12);--ink-08:rgba(35,31,32,.08);  
  --font:"tussilago","Georgia",serif;  
  --ease:cubic-bezier(.16,1,.3,1);  
  font-family:var(--font);font-weight:300;color:var(--ink);  
  background:var(--paper);line-height:1.5;  
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;  
  position:relative;overflow-x:hidden;  
}  
#atempo h1,#atempo h2,#atempo h3{font-weight:900;line-height:1.04;letter-spacing:-.02em}  
#atempo a{color:inherit;text-decoration:none}  
#atempo img{display:block;max-width:100%}  
#atempo ::selection{background:var(--ink);color:var(--turq)}  

/* inner width limiter — fixed max, centered */  
#atempo .wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}  

/* ---------- HEADER ---------- */  
#atempo .header{  
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);  
  backdrop-filter:blur(14px);border-bottom:1px solid var(--ink-08);  
}  
#atempo .header .wrap{display:flex;align-items:center;justify-content:space-between;  
  padding-top:16px;padding-bottom:16px}  
#atempo .brand{display:flex;align-items:center;gap:14px;color:var(--ink)}  

/* Logo más grande */  
#atempo .brand__svg{width:200px;height:auto;display:block}  

#atempo .brand__pill{  
  font-size:11px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;  
  color:var(--ink-45);padding-left:14px;position:relative;  
}  
#atempo .brand__pill::before{content:"";position:absolute;left:0;top:50%;  
  transform:translateY(-50%);width:1px;height:14px;background:var(--ink-12)}  
#atempo .nav{display:flex;align-items:center;gap:32px}  

/* Tipografía más gruesa para los enlaces */  
#atempo .nav a{font-size:14px;font-weight:700;color:var(--ink-70);transition:color .3s}  
#atempo .nav a:hover{color:var(--ink)}  

/* Botón del nav negro puro y texto turquesa */  
#atempo .nav__cta {  
  background-color: #000000 !important;  
  color: #ddf0eb !important;  
  font-size: 14px;  
  font-weight: 900;  
  border-radius: 999px;  
  padding: 11px 22px;  
  transition: transform .4s var(--ease), background .3s;  
}  
#atempo .nav__cta:hover {  
  background-color: #333333 !important;  
}  

#atempo .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}  
#atempo .burger span{width:25px;height:2px;background:var(--ink);transition:.4s var(--ease)}  

/* ---------- BUTTONS - AJUSTADOS A GRIS ---------- */  
#atempo .btn{font-size:15px;font-weight:900;border-radius:999px;padding:16px 30px;  
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;  
  transition:transform .4s var(--ease),background .4s,color .4s}  
   
#atempo .btn--solid{
  /* Cambiado de var(--ink) (negro) a un gris medio */
  background-color: #555555; 
  color: #fff; /* Mantener texto claro para contraste */
}  
#atempo .btn--solid:hover{transform:translateY(-3px); background-color: #333333;}  

#atempo .btn--ghost{
  /* Cambiado de transparent a un gris muy claro */
  background-color: #e6e6e6; 
  color: var(--ink); 
  border: 1px solid var(--ink-12);
}  
#atempo .btn--ghost:hover{
  /* Al hacer hover, se invierte para un contraste mayor */
  background-color: var(--ink); 
  color: #ddf0eb; 
  border-color: var(--ink);
}  
#atempo .btn__arrow{transition:transform .4s var(--ease)}  
#atempo .btn:hover .btn__arrow{transform:translateX(4px)}  

/* ---------- HERO ---------- */  
#atempo .hero{padding-top:110px;padding-bottom:110px}  
#atempo .hero__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:32px}  
#atempo .hero__title{font-size:88px;line-height:1.0;letter-spacing:-.03em;max-width:15ch}  
#atempo .hero__title em{font-style:normal;position:relative;white-space:nowrap}  
#atempo .hero__title em::after{content:"";position:absolute;left:0;right:0;bottom:.09em;  
  height:.10em;background:var(--turq);z-index:-1}  
#atempo .hero__sub{margin-top:36px;font-size:19px;color:var(--ink-70);max-width:46ch}  
#atempo .hero__actions{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap}  

/* ---------- MARQUEE (rolling, CSS-only) ---------- */  
#atempo .marquee{border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);  
  padding-top:22px;padding-bottom:22px;overflow:hidden;white-space:nowrap}  
#atempo .marquee__track{display:inline-flex;gap:56px;padding-left:56px;  
  animation:atempo-slide 34s linear infinite}  
#atempo .marquee__item{font-size:14px;letter-spacing:.16em;text-transform:uppercase;  
  color:var(--ink-45);display:inline-flex;align-items:center;gap:56px}  
@keyframes atempo-slide{to{transform:translateX(-50%)}}  

/* ---------- STATEMENT ---------- */  
#atempo .statement{padding-top:130px;padding-bottom:130px}  
#atempo .statement__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:32px}  
#atempo .statement__text{font-size:52px;line-height:1.12;letter-spacing:-.02em;max-width:20ch}  
#atempo .statement__text .muted{color:var(--ink-45)}  


/* ---------- SERVICES ---------- */  
#atempo .services{
  /* Degradado turquesa sutil en el fondo de toda la sección */
  background: rgba(221, 240, 235, 0.25);
  padding-top:110px;padding-bottom:110px
}  
#atempo .services__head{display:flex;align-items:flex-end;justify-content:space-between;  
  gap:40px;margin-bottom:56px;flex-wrap:wrap}  
#atempo .services__title{font-size:56px;letter-spacing:-.03em}  
#atempo .services__lead{font-size:16px;color:var(--ink-70);max-width:34ch}  
#atempo .svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}  

/* TARJETAS: Altura fija y fondo oscuro */  
#atempo .svc{grid-column:span 3;background:var(--ink);border-radius:22px;padding:34px;  
  min-height:400px; /* Altura fija para escritorio */  
  display:flex;flex-direction:column;justify-content:flex-end; /* Texto siempre abajo */  
  position:relative;overflow:hidden;  
  border:1px solid rgba(255,255,255,0.1); color:#ffffff;  
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}  

/* NUEVA ORDEN SIMÉTRICA EXCLUSIVA PARA ESCRITORIO (2 arriba, 3 abajo) */  
@media(min-width: 821px) {  
  #atempo .svc:nth-child(1), #atempo .svc:nth-child(2) { grid-column: span 3; }  
  #atempo .svc:nth-child(3), #atempo .svc:nth-child(4), #atempo .svc:nth-child(5) { grid-column: span 2; }  
}  

#atempo .svc:hover{transform:translateY(-8px);
  box-shadow:0 2px 8px -4px rgba(35,31,32,.10),0 18px 30px -14px rgba(35,31,32,.16),0 40px 70px -30px rgba(35,31,32,.32);
  border-color:transparent}

/* ==================================================
   SERVICIOS - CAPAS CORREGIDAS PARA MOSTRAR FOTO Y HOVER
================================================== */

/* CAPA 1: FOTO DE FONDO */
#atempo .svc__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  z-index:1; /* CORRECCIÓN: Nivel 1 para estar delante del fondo negro */
  transition:transform .8s var(--ease);
}
#atempo .svc:hover .svc__img{transform:scale(1.06)}

/* CAPA 2: DEGRADADO OSCURO: Transición limpia de background */
#atempo .svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* CORRECCIÓN: Nivel 2, por encima de la foto */
  /* ESTADO NORMAL: Foto clara. Solo una pequeña sombra abajo para leer el texto */
  background: linear-gradient(to top, rgba(35,31,32,.5) 0%, rgba(35,31,32,0) 40%, rgba(35,31,32,0) 100%);
  transition: background 0.6s var(--ease); 
}
#atempo .svc:hover::before {
  /* ESTADO HOVER: La capa se oscurece al pasar el cursor */
  background: linear-gradient(to top, rgba(35,31,32,.8) 0%, rgba(35,31,32,.6) 55%, rgba(35,31,32,.4) 50%);
}

/* CAPA 3: BRILLO VERDE/TURQUESA AL HACER HOVER (25% OPACIDAD) */  
#atempo .svc__glow{  
  position:absolute;  
  inset:0;  
  /* Gradiente turquesa sutil con 25% de opacidad máxima */
  background: rgba(221, 240, 235, 0.25);   
  transform:translateY(101%);  
  transition:transform .65s var(--ease);  
  z-index:3; /* CORRECCIÓN: Nivel 3 */
}  
#atempo .svc:hover .svc__glow{transform:translateY(0)}

/* CAPA 4: FANTASMA BLANCO */  
#atempo .svc__ghost{
  position:absolute;top:-18px;right:6px;font-size:150px;font-weight:900;  
  line-height:1;color:#ffffff;opacity:0;transform:translate(18px,-10px);  
  transition:opacity .6s var(--ease),transform .8s var(--ease);
  z-index:4; /* CORRECCIÓN: Nivel 4 */
  pointer-events:none;letter-spacing:-.04em;
}  
#atempo .svc:hover .svc__ghost{opacity:.1;transform:translate(0,0)}  

/* CAPA 5: TEXTOS Y ELEMENTOS POR ENCIMA */
#atempo .svc__num, #atempo .svc__name, #atempo .svc__list{
  position:relative;
  z-index:5; /* CORRECCIÓN: Nivel 5, por encima de todo */
}

/* ESTILOS DE TEXTO (BLANCO) */  
#atempo .svc__num{
  font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,0.35);margin-bottom:auto;  
  transition:color .6s var(--ease)
}  
#atempo .svc__name{
  font-size:30px;letter-spacing:-.02em;margin-bottom:16px;  
  transition:transform .6s var(--ease)
}  
#atempo .svc:hover .svc__name{transform:translateX(4px)}  

/* LISTA CON RECUADROS CRISTAL AHUMADO */
#atempo .svc__list{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
}  
#atempo .svc__list li{
  font-size:13px;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.2); 
  border-radius:999px;
  padding:7px 13px;
  /* Fondo gris oscuro semi-transparente (cristal ahumado) */
  background: rgba(35, 31, 32, 0.35); 
  backdrop-filter: blur(4px);
  transition:border-color .6s var(--ease),color .6s var(--ease),background .6s var(--ease),transform .55s var(--ease)
}  
#atempo .svc:hover .svc__list li{
  border-color:rgba(255,255,255,0.5);
  background:rgba(35,31,32,0.9); /* Un poco más oscuro al hacer hover */
  transform:translateY(-2px)
}  
#atempo .svc:hover .svc__num{color:#ffffff}

/* ---------- PORTFOLIO ---------- */
/* Fondo: foto de estudio con overlay oscuro fijo, texto y controles pasan a claro */
#atempo .work{position:relative;padding-top:130px;padding-bottom:80px;overflow:hidden}
#atempo .work::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("img/photography-studio.jpg") center/cover no-repeat;
}
#atempo .work::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(35,31,32,.90) 0%, rgba(35,31,32,.78) 100%);
}
#atempo .work>.wrap,#atempo .work>.reel{position:relative;z-index:1}
#atempo .work__head{margin-bottom:52px}
#atempo .work__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px}
#atempo .work__title{font-size:56px;letter-spacing:-.03em;max-width:16ch;color:#fff}

/* Banda continua: se desliza sola en loop infinito, misma técnica EXACTA que
   la banda de ciudades (inline-flex + contenido duplicado + translateX(-50%)).
   El padding-left igual al gap hace que el ancho total sea 2x periódico, así el
   salto del -50% es imperceptible. Sin variables CSS dentro del atajo
   `animation` (Safari iOS no las resuelve ahí y dejaba la banda estática). */
#atempo .reel{width:100%;overflow:hidden;white-space:nowrap}
#atempo .reel__track {
    display: flex;
    width: max-content; /* ESTA es la clave para que el móvil reconozca todas las fotos */
    gap: 20px;
    padding: 8px 0 8px 20px;
    animation: atempo-reel 33s linear infinite;
}
#atempo .reel:hover .reel__track{animation-play-state:paused}
@keyframes atempo-reel{to{transform:translateX(-50%)}}

#atempo .reel__card{
  position:relative;
  flex:0 0 420px;
  height:560px;
  border-radius:18px;
  overflow:hidden;
  background:#231f20;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
#atempo .reel__card:hover,#atempo .reel__card:focus-within{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.35), 0 30px 50px -20px rgba(0,0,0,.5), 0 60px 90px -40px rgba(0,0,0,.55);
}
#atempo .reel__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  transition:transform .8s var(--ease);
}
#atempo .reel__card:hover .reel__img,#atempo .reel__card:focus-within .reel__img{transform:scale(1.06)}

#atempo .reel__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(35,31,32,.88) 0%, rgba(35,31,32,.32) 40%, rgba(35,31,32,0) 68%);
  opacity:0;
  transition:opacity .5s var(--ease);
}
#atempo .reel__card:hover .reel__overlay,#atempo .reel__card:focus-within .reel__overlay{opacity:1}

#atempo .reel__cat{
  position:absolute;
  left:24px;
  bottom:24px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
#atempo .reel__card:hover .reel__cat,#atempo .reel__card:focus-within .reel__cat{opacity:1;transform:translateY(0)}


/* ---------- APPROACH ---------- */  
#atempo .approach{background:var(--ink);color:var(--paper);padding-top:130px;padding-bottom:130px}  
#atempo .approach ::selection{background:var(--turq);color:var(--ink)}  
#atempo .approach__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(221,240,235,.5);margin-bottom:30px}  
#atempo .approach__title{font-size:60px;letter-spacing:-.03em;max-width:18ch;margin-bottom:70px}  
#atempo .approach__title .accent{color:var(--turq)}  
#atempo .appr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}  
#atempo .appr__n{font-size:14px;letter-spacing:.16em;color:var(--turq);margin-bottom:18px}  
#atempo .appr__div{height:1px;background:rgba(255,255,255,.12);margin-bottom:18px}  
#atempo .appr__h{font-size:22px;margin-bottom:12px}  
#atempo .appr__p{font-size:15px;color:rgba(255,255,255,.6);line-height:1.6}  

/* ---------- CTA ---------- */  
#atempo .cta{padding-top:130px;padding-bottom:130px;text-align:center}  
#atempo .cta__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:26px}  
#atempo .cta__title{font-size:84px;letter-spacing:-.03em;margin-bottom:40px}  
#atempo .cta__title em{font-style:normal;position:relative}  
#atempo .cta__title em::after{content:"";position:absolute;left:0;right:0;bottom:.07em;  
  height:.11em;background:var(--turq);z-index:-1}  

/* ---------- FOOTER ---------- */  
#atempo .footer{background:var(--turq);padding-top:70px;padding-bottom:40px}  
#atempo .footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:56px}  
#atempo .footer__brand{font-size:48px;letter-spacing:-.03em;max-width:12ch}  
#atempo .footer__cols{display:flex;gap:56px;flex-wrap:wrap}  
#atempo .footer__col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;  
  color:var(--ink-45);margin-bottom:18px}  
#atempo .footer__col a{display:block;font-size:15px;color:var(--ink-70);margin-bottom:11px;transition:color .3s}  
#atempo .footer__col a:hover{color:var(--ink)}  
#atempo .footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;  
  padding-top:26px;border-top:1px solid var(--ink-12);font-size:13px;color:var(--ink-45)}  

/* ---------- RESPONSIVE ---------- */  
@media(max-width:1024px){  
  #atempo .hero__title{font-size:64px}  
  #atempo .statement__text,#atempo .approach__title{font-size:44px}  
  #atempo .services__title,#atempo .work__title{font-size:44px}
  #atempo .cta__title{font-size:60px}
  #atempo .svc{grid-column:span 3}
  #atempo .reel__card{flex-basis:360px;height:480px}
}
@media(max-width:820px){  
  #atempo .wrap{padding-left:22px;padding-right:22px}  
  #atempo .nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--paper);  
    flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:40px;  
    transform:translateX(100%);transition:transform .5s var(--ease);  
    box-shadow:-20px 0 60px -30px rgba(35,31,32,.4);z-index:60}  
  #atempo .nav.open{transform:none}  
  #atempo .nav a{font-size:21px}  
  #atempo .burger{display:flex;z-index:70}  
  #atempo .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}  
  #atempo .burger.open span:nth-child(2){opacity:0}  
  #atempo .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}  
  #atempo .hero{padding-top:70px;padding-bottom:70px}  
  #atempo .hero__title{font-size:46px}  
  #atempo .statement,#atempo .services,#atempo .work,#atempo .approach,#atempo .cta{  
    padding-top:80px;padding-bottom:80px}  
  #atempo .statement__text,#atempo .approach__title{font-size:32px}  
  #atempo .services__title,#atempo .work__title{font-size:34px}  
  #atempo .cta__title{font-size:44px}  
  #atempo .svc{grid-column:span 6;min-height:auto}  
  
  /* AQUÍ ESTÁ LA CORRECCIÓN: Velocidad del carrusel en móvil a 30s */
  #atempo .reel__track{gap:14px;padding-left:14px;animation-duration:30s}  
  #atempo .reel__card{flex-basis:260px;height:340px;border-radius:14px}  
  #atempo .reel__cat{left:18px;bottom:18px;font-size:12px}  
  
  #atempo .appr-grid{grid-template-columns:1fr;gap:32px}
  #atempo .footer__top{flex-direction:column}
}

/* ============================================================
   SERVICE PAGES (shared) — real-estate / portraits / events /
   life-milestones / brand-content.
   Reuses .hero .btn .marquee .approach .cta from the home
   system; only the sub-service rows, the section intro and the
   cross-links below are new.
============================================================ */

/* --- Service hero (reuses .hero) --- */
#atempo .srv-hero .hero__sub{max-width:56ch}

/* --- Sub-services: intro + alternating image/text rows --- */
#atempo .srv{padding-top:120px;padding-bottom:120px}
#atempo .srv__head{max-width:760px;margin-bottom:72px}
#atempo .srv__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-bottom:22px}
#atempo .srv__intro{font-size:26px;line-height:1.32;letter-spacing:-.01em;color:var(--ink)}

#atempo .srv-list{display:flex;flex-direction:column;gap:34px}
#atempo .srv-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
#atempo .srv-row:nth-child(even) .srv-row__media{order:2}
#atempo .srv-row__media{position:relative;border-radius:20px;overflow:hidden;background:var(--ink);aspect-ratio:4/3}
#atempo .srv-row__img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
#atempo .srv-row:hover .srv-row__img{transform:scale(1.05)}
#atempo .srv-row__body{max-width:46ch}
#atempo .srv-row__k{display:block;font-size:13px;letter-spacing:.2em;color:var(--ink-45);margin-bottom:18px}
#atempo .srv-row__h{font-size:38px;letter-spacing:-.02em;margin-bottom:20px}
#atempo .srv-row__p{font-size:17px;line-height:1.65;color:var(--ink-70)}

/* --- Cross-links to the other four services (silo) --- */
#atempo .xlinks-sec{padding-top:110px;padding-bottom:120px}
#atempo .xlinks__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-bottom:28px}
#atempo .xlinks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
#atempo .xlink{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px 34px;border:1px solid var(--ink-12);border-radius:16px;color:var(--ink);
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease),color .5s var(--ease)}
#atempo .xlink__name{font-size:24px;font-weight:900;letter-spacing:-.02em}
#atempo .xlink__arrow{font-size:20px;transition:transform .5s var(--ease)}
#atempo .xlink:hover{transform:translateY(-4px);background:var(--ink);color:#ddf0eb;border-color:var(--ink)}
#atempo .xlink:hover .xlink__arrow{transform:translateX(5px)}

@media(max-width:820px){
  #atempo .srv{padding-top:80px;padding-bottom:80px}
  #atempo .srv__head{margin-bottom:48px}
  #atempo .srv__intro{font-size:21px}
  #atempo .srv-list{gap:52px}
  #atempo .srv-row{grid-template-columns:1fr;gap:22px}
  #atempo .srv-row:nth-child(even) .srv-row__media{order:0}
  #atempo .srv-row__h{font-size:30px}
  #atempo .srv-row__p{font-size:16px}
  #atempo .xlinks-sec{padding-top:70px;padding-bottom:80px}
  #atempo .xlinks{grid-template-columns:1fr}
  #atempo .xlink{padding:24px 26px}
  #atempo .xlink__name{font-size:21px}
}

/* ============================================================
   SERVICES HUB (/services/) — overview grid that links to each
   service page. Dark cards reuse the .svc language of the home.
   Media blocks use a background-image placeholder: drop a file at
   /img/services/<slug>.jpg and it fills the panel automatically.
============================================================ */
#atempo .svc-hub{padding-top:120px;padding-bottom:120px}
#atempo .svc-hub__head{max-width:720px;margin-bottom:56px}
#atempo .svc-hub__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-bottom:22px}
#atempo .svc-hub__intro{font-size:24px;line-height:1.34;letter-spacing:-.01em;color:var(--ink)}

#atempo .svc-hub__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

#atempo .svc-hub__card{display:flex;flex-direction:column;background:var(--ink);color:#fff;
  border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
#atempo .svc-hub__card:hover{transform:translateY(-8px);border-color:transparent;
  box-shadow:0 2px 8px -4px rgba(35,31,32,.10),0 18px 30px -14px rgba(35,31,32,.16),0 40px 70px -30px rgba(35,31,32,.32)}

/* Media = image placeholder (background-image). Ink fallback + ghost number
   keep it looking designed while empty. */
#atempo .svc-hub__media{position:relative;aspect-ratio:16/10;
  background:#1a1617 center/cover no-repeat;overflow:hidden}
#atempo .svc-hub__ph{position:absolute;right:22px;bottom:2px;font-size:130px;font-weight:900;
  line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.06);pointer-events:none}

#atempo .svc-hub__body{padding:34px;display:flex;flex-direction:column;flex:1}
#atempo .svc-hub__num{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px}
#atempo .svc-hub__name{font-size:30px;letter-spacing:-.02em;margin-bottom:14px}
#atempo .svc-hub__desc{font-size:15px;line-height:1.62;color:rgba(255,255,255,.72);margin-bottom:22px}
#atempo .svc-hub__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
#atempo .svc-hub__list li{font-size:12.5px;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 12px}
#atempo .svc-hub__link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-weight:900;color:var(--turq);transition:gap .4s var(--ease)}
#atempo .svc-hub__link .btn__arrow{transition:transform .4s var(--ease)}
#atempo .svc-hub__card:hover .svc-hub__link .btn__arrow{transform:translateX(5px)}

/* Featured card (first) spans full width with a side-by-side layout */
#atempo .svc-hub__card--feature{grid-column:1 / -1;flex-direction:row;align-items:stretch}
#atempo .svc-hub__card--feature .svc-hub__media{flex:0 0 56%;aspect-ratio:auto;min-height:460px}
#atempo .svc-hub__card--feature .svc-hub__ph{font-size:200px}
#atempo .svc-hub__card--feature .svc-hub__body{justify-content:center;padding:52px}
#atempo .svc-hub__card--feature .svc-hub__name{font-size:42px}
#atempo .svc-hub__card--feature .svc-hub__desc{font-size:17px;max-width:46ch}

@media(max-width:1024px){
  #atempo .svc-hub__card--feature .svc-hub__name{font-size:34px}
}
@media(max-width:820px){
  #atempo .svc-hub{padding-top:80px;padding-bottom:80px}
  #atempo .svc-hub__head{margin-bottom:40px}
  #atempo .svc-hub__intro{font-size:20px}
  #atempo .svc-hub__grid{grid-template-columns:1fr;gap:16px}
  #atempo .svc-hub__card--feature{grid-column:auto;flex-direction:column}
  #atempo .svc-hub__card--feature .svc-hub__media{flex:auto;aspect-ratio:16/10;min-height:0}
  #atempo .svc-hub__card--feature .svc-hub__ph{font-size:130px}
  #atempo .svc-hub__card--feature .svc-hub__body{padding:30px}
  #atempo .svc-hub__card--feature .svc-hub__name{font-size:30px}
  #atempo .svc-hub__card--feature .svc-hub__desc{font-size:15px}
}

/* ============================================================
   ABOUT PAGE (/about/)
   Inherits the home system (.wrap .btn .marquee). New CSS only.
   Reveal animations are GUARDED: opacity:0 applies ONLY when JS
   has added .atempo-js to <html>. With no JS, everything stays
   visible — see the footer.php reveal script.
============================================================ */

/* --- Reveal (fail-safe: visible unless JS opts in) --- */
html.atempo-js #atempo .about-reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:transform,opacity;backface-visibility:hidden}
html.atempo-js #atempo .about-reveal.is-in{opacity:1;transform:translate3d(0,0,0)}

/* --- 01 Hero --- */
#atempo .about-hero{position:relative;min-height:780px;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
#atempo .about-hero__media{position:absolute;inset:0;margin:0}
#atempo .about-hero__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
#atempo .about-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,31,32,.30) 0%,rgba(35,31,32,.55) 55%,rgba(35,31,32,.88) 100%)}
#atempo .about-hero__inner{position:relative;z-index:2;padding-top:170px;padding-bottom:120px;color:#fff}
#atempo .about-hero__kicker{font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:30px}
#atempo .about-hero__title{font-size:76px;line-height:1.02;letter-spacing:-.03em;max-width:20ch;color:#fff}
#atempo .about-hero__sub{margin-top:32px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.82);max-width:62ch}
#atempo .about-hero__actions{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap}
#atempo .about-cadence{letter-spacing:.01em}
#atempo .about-cadence a{color:#fff;text-decoration:underline;
  text-decoration-color:rgba(221,240,235,.45);text-underline-offset:3px;transition:text-decoration-color .3s}
#atempo .about-cadence a:hover{text-decoration-color:var(--turq)}
/* Buttons on dark backgrounds (hero + final CTA) — append, no override of base */
#atempo .about-hero .btn--solid,#atempo .about-cta .btn--solid{background:var(--turq);color:var(--ink)}
#atempo .about-hero .btn--ghost,#atempo .about-cta .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
#atempo .about-hero .btn--ghost:hover,#atempo .about-cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Scroll indicator — 1px line + slow travelling dot (no word, no arrow) */
#atempo .about-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:block}
#atempo .about-scroll__line{display:block;width:1px;height:58px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
#atempo .about-scroll__dot{position:absolute;left:-1px;top:0;width:3px;height:11px;border-radius:2px;
  background:var(--turq);animation:about-travel 2.6s var(--ease) infinite}
@keyframes about-travel{0%{transform:translateY(-14px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(58px);opacity:0}}

/* --- Shared asymmetric split (02 + 03) --- */
#atempo .about-who{padding-top:150px;padding-bottom:130px}
#atempo .about-craft{padding-top:130px;padding-bottom:150px}
#atempo .about-split{display:grid;grid-template-columns:1.02fr .98fr;gap:80px;align-items:start}
#atempo .about-split--mirror .about-split__quote{order:2}
#atempo .about-num{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:30px}
#atempo .about-quote{font-size:56px;line-height:1.04;letter-spacing:-.03em;max-width:14ch}
#atempo .about-body p{font-size:17px;line-height:1.72;color:var(--ink-70);margin-bottom:22px;max-width:56ch}
#atempo .about-body p:last-child{margin-bottom:0}
#atempo .about-accent{font-weight:900;font-style:normal;position:relative}
#atempo .about-accent::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.34em;
  background:var(--turq);z-index:-1}

/* Section 03 — three stacked disciplines with hairline rules */
#atempo .about-stack__item{padding:26px 0;border-top:1px solid rgba(35,31,32,.10)}
#atempo .about-stack__item:first-child{padding-top:0;border-top:0}
#atempo .about-stack__item p{font-size:17px;line-height:1.72;color:var(--ink-70);margin:0;max-width:56ch}
#atempo .about-stack__item strong{color:var(--ink);font-weight:900}
#atempo .about-stack__close{margin-top:30px;padding-top:26px;border-top:1px solid rgba(35,31,32,.10);
  font-size:17px;line-height:1.72;color:var(--ink);max-width:56ch}

/* --- 04 The turn --- */
#atempo .about-turn{text-align:center;padding-top:180px;padding-bottom:180px}
#atempo .about-turn__h{font-size:60px;line-height:1.06;letter-spacing:-.03em;max-width:20ch;margin:0 auto}
#atempo .about-turn__body{margin-top:48px}
#atempo .about-turn__body p{font-size:19px;line-height:1.7;color:var(--ink-70);max-width:52ch;margin:0 auto 22px}
#atempo .about-turn__beat{font-weight:900;color:var(--ink);font-size:22px}
#atempo .about-turn__payoff{display:block;margin-top:26px;font-size:52px;line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);font-weight:900}

/* --- 05 The promise (the ONE turquoise viewport) --- */
#atempo .about-promise{background:var(--turq);color:var(--ink);padding-top:150px;padding-bottom:150px}
#atempo .about-promise ::selection{background:var(--ink);color:var(--turq)}
#atempo .about-promise__h{font-size:60px;line-height:1.05;letter-spacing:-.03em;max-width:18ch;margin-bottom:44px}
#atempo .about-promise__body{max-width:60ch}
#atempo .about-promise__body p{font-size:19px;line-height:1.7;color:var(--ink);margin-bottom:22px}
#atempo .about-promise__body p:last-child{margin-bottom:0;font-weight:900}

/* --- 06 The place (full-bleed band) --- */
#atempo .about-place{position:relative;overflow:hidden;background:var(--ink);
  padding-top:150px;padding-bottom:150px}
#atempo .about-place__media{position:absolute;inset:0;margin:0}
#atempo .about-place__media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
#atempo .about-place__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,31,32,.86) 0%,rgba(35,31,32,.66) 55%,rgba(35,31,32,.44) 100%)}
#atempo .about-place__inner{position:relative;z-index:2;color:#fff}
#atempo .about-place__h{font-size:54px;line-height:1.05;letter-spacing:-.03em;max-width:16ch;color:#fff}
#atempo .about-place__body{margin-top:34px;max-width:56ch}
#atempo .about-place__body p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.82);margin-bottom:20px}
#atempo .about-place__lead{font-size:26px;font-weight:900;color:#fff !important}

/* --- 07 How we work (anti-cheap cards) --- */
#atempo .about-how{padding-top:130px;padding-bottom:130px}
#atempo .about-how__title{font-size:48px;letter-spacing:-.03em;margin-bottom:60px}
#atempo .about-how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
#atempo .about-card{display:flex;flex-direction:column}
#atempo .about-card__k{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);margin-bottom:26px}
#atempo .about-card__h{font-size:26px;letter-spacing:-.02em;margin-bottom:16px}
#atempo .about-card__p{font-size:16px;line-height:1.68;color:var(--ink-70)}
#atempo .about-card__p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-12);
  text-underline-offset:3px;transition:text-decoration-color .3s}
#atempo .about-card__p a:hover{text-decoration-color:var(--turq)}
#atempo .about-card__rule{display:block;height:1px;background:rgba(35,31,32,.10);margin-top:30px}

/* --- 08 The name (a whisper) --- */
#atempo .about-name{padding-top:130px;padding-bottom:130px}
#atempo .about-name__inner{max-width:900px;margin:0 auto;text-align:center}
#atempo .about-name__h{font-size:34px;letter-spacing:-.02em;margin-bottom:52px}
#atempo .about-name__beats{display:grid;grid-template-columns:1fr 1px 1fr;gap:44px;align-items:start;text-align:left}
#atempo .about-name__rule{background:var(--ink-12)}
#atempo .about-name__beat{font-size:18px;line-height:1.72;color:var(--ink-70)}
#atempo .about-name__beat em{font-style:italic;color:var(--ink);font-weight:400}
#atempo .about-name__close{margin-top:52px;font-size:18px;line-height:1.72;color:var(--ink);
  max-width:60ch;margin-left:auto;margin-right:auto}

/* --- 09 Final CTA (dark) --- */
#atempo .about-cta{background:var(--ink);color:#fff;text-align:center;padding-top:150px;padding-bottom:150px}
#atempo .about-cta ::selection{background:var(--turq);color:var(--ink)}
#atempo .about-cta__h{font-size:64px;line-height:1.04;letter-spacing:-.03em;max-width:18ch;margin:0 auto 20px;color:#fff}
#atempo .about-cta__sub{font-size:20px;color:rgba(255,255,255,.7);margin-bottom:44px}
#atempo .about-cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* --- About page responsive --- */
@media(max-width:1024px){
  #atempo .about-hero__title{font-size:58px}
  #atempo .about-quote{font-size:44px}
  #atempo .about-turn__h,#atempo .about-promise__h,#atempo .about-cta__h{font-size:48px}
  #atempo .about-turn__payoff{font-size:40px}
  #atempo .about-place__h{font-size:42px}
  #atempo .about-how__grid{gap:32px}
}
@media(max-width:820px){
  #atempo .about-hero{min-height:620px}
  #atempo .about-hero__inner{padding-top:120px;padding-bottom:90px}
  #atempo .about-hero__title{font-size:40px}
  #atempo .about-hero__sub{font-size:17px}
  #atempo .about-who,#atempo .about-craft{padding-top:80px;padding-bottom:80px}
  #atempo .about-split{grid-template-columns:1fr;gap:36px}
  #atempo .about-split--mirror .about-split__quote{order:0}
  #atempo .about-quote{font-size:36px;max-width:none}
  #atempo .about-turn{padding-top:100px;padding-bottom:100px}
  #atempo .about-turn__h{font-size:36px}
  #atempo .about-turn__payoff{font-size:32px}
  #atempo .about-promise{padding-top:90px;padding-bottom:90px}
  #atempo .about-promise__h{font-size:36px}
  #atempo .about-promise__body p{font-size:17px}
  #atempo .about-place{padding-top:90px;padding-bottom:90px}
  #atempo .about-place__h{font-size:34px}
  #atempo .about-place__scrim{background:linear-gradient(180deg,rgba(35,31,32,.55) 0%,rgba(35,31,32,.80) 100%)}
  #atempo .about-how{padding-top:80px;padding-bottom:80px}
  #atempo .about-how__title{font-size:34px;margin-bottom:40px}
  #atempo .about-how__grid{grid-template-columns:1fr;gap:0}
  #atempo .about-card{padding:30px 0;border-top:1px solid rgba(35,31,32,.10)}
  #atempo .about-card:first-child{border-top:0;padding-top:0}
  #atempo .about-card__rule{display:none}
  #atempo .about-name{padding-top:80px;padding-bottom:80px}
  #atempo .about-name__beats{grid-template-columns:1fr;gap:28px}
  #atempo .about-name__rule{height:1px;width:100%}
  #atempo .about-cta{padding-top:90px;padding-bottom:90px}
  #atempo .about-cta__h{font-size:38px}
}


/* ============================================================
   CONTACT FORM - WEB3FORMS
============================================================ */
#atempo .form-wrapper {
  max-width: 700px;
  margin: 40px auto 0;
  text-align: left;
  background: var(--paper);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--ink-12);
}
#atempo .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
#atempo .form-group {
  flex: 1;
  margin-bottom: 20px;
}
#atempo .form-row .form-group {
  margin-bottom: 0;
}
#atempo .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 8px;
}
#atempo .form-control {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 16px;
  background: #fdfdfd;
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s;
}
#atempo textarea.form-control {
  resize: vertical;
  min-height: 120px;
}
#atempo .form-control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--turq);
}
#atempo .form-submit {
  text-align: center;
  margin-top: 30px;
}
@media(max-width: 768px) {
  #atempo .form-row {
    flex-direction: column;
    gap: 20px;
  }
  #atempo .form-wrapper {
    padding: 30px 20px;
  }
}