/*
Theme Name: Kooka Digital
Theme URI: https://kookadigital.com.au/
Description: Custom child theme for Kooka Digital.
Author: Kooka Digital
Author URI: https://kookadigital.com.au/
Template: hello-elementor
Version: 1.0.0
Text Domain: kooka
*/

/*
  KOOKA DIGITAL - COMPLETE STYLESHEET
  All original page sections retained. Header conflicts and duplicate overrides corrected.
*/

/* RESET */
.hero-kooka *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* SECTION */
.hero-kooka{
  padding:40px 8% 70px;
  color:#fff;
  font-family:'Montserrat', sans-serif;
}
/* WRAP */
.hero-wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
}
/* LEFT */
.hero-left{
  max-width:540px;
}
/* EYEBROW */
.eyebrow{
  color:#d4af37;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:18px;
  display:block;
}
/* TITLE */
.hero-left h1{
  font-family:'Playfair Display', serif;
  font-size:56px;
  line-height:1.15;
  margin-bottom:20px;
}
.hero-left h1 span{
  color:#d4af37;
}
/* TEXT */
.hero-left p{
  color:#cfcfcf;
  font-size:17px;
  line-height:1.6;
  margin-bottom:30px;
}
/* BUTTONS */
.hero-buttons{
  display:flex;
  gap:15px;
}
.btn-primary{
  padding:14px 28px;
  background:#d4af37;
  color:#050505;
  text-decoration:none;
  border-radius:4px;
  font-size:14px;
  transition:0.3s;
}
.btn-primary:hover{
  background:#b8962e;
}
.btn-secondary{
  padding:14px 28px;
  border:1px solid #d4af37;
  color:#d4af37;
  text-decoration:none;
  border-radius:4px;
  font-size:14px;
  transition:0.3s;
}
.btn-secondary:hover{
  background:#d4af37;
  color:#050505;
}
/* RESPONSIVE */
@media(max-width:900px){
  .hero-left{
    margin:0 auto;
    text-align:center;
  }
  .hero-left h1{
    font-size:34px;
  }
  .hero-buttons{
    justify-content:center;
  }
}
/* CONTENEDOR PRINCIPAL */
.blog .site-main{
  max-width:1200px;
  margin:0 auto;
  padding:140px 30px 80px;
}
/* FORZAR LOOP COMO GRID */
.blog .site-main{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}
/* CADA POST */
.blog .site-main article{
  background:#0b0b0b;
  border:1px solid #1a1a1a;
  overflow:hidden;
  transition:0.3s;
  display:flex;
  flex-direction:column;
}
/* HOVER */
.blog .site-main article:hover{
  border-color:#d4af37;
  transform:translateY(-6px);
}
/* IMAGEN */
.blog .site-main article img{
  width:100%;
  height:220px;
  object-fit:cover;
}
/* CONTENIDO */
.blog .site-main .entry-content,
.blog .site-main .entry-summary{
  padding:20px;
}
/* TITULO */
.blog .site-main h2,
.blog .site-main .entry-title{
  font-family:'Playfair Display', serif;
  font-size:20px;
  margin-bottom:10px;
}
/* TEXTO */
.blog .site-main p{
  color:#aaa;
  font-size:14px;
}
/* LINK */
.blog .site-main a{
  text-decoration:none !important;
  color:white;
}
/* READ MORE */
.blog .site-main .more-link{
  margin-top:15px;
  color:#d4af37;
}
/* QUITAR BASURA */
.blog .entry-footer,
.blog .entry-meta{
  display:none !important;
}
/* CLAVE: quitar estructura rota */
.blog .site-main > div{
  display:contents;
}
/* ===== KOOKA COOKIE BAR (FIX REAL) ===== */
#cookie-notice{
  background:rgba(8,8,8,0.95) !important;
  backdrop-filter:blur(10px) !important;
  border-top:1px solid rgba(212,175,55,0.15) !important;
  padding:20px 30px !important;
  font-family:'Montserrat', sans-serif !important;
}
/* CONTENEDOR CENTRADO */
#cookie-notice .cn-container{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:14px !important;
}
/* TEXTO */
#cookie-notice .cn-text-container{
  color:#999 !important;
  font-size:13px !important;
  max-width:700px;
  line-height:1.5;
}
/* BOTONES */
#cookie-notice .cn-buttons-container{
  display:flex !important;
  justify-content:center !important;
}
/* BOTON OK */
#cookie-notice .cn-button{
  background:transparent !important;
  border:1px solid #d4af37 !important;
  color:#d4af37 !important;
  padding:8px 22px !important;
  font-size:12px !important;
  letter-spacing:1px;
  text-transform:uppercase;
  border-radius:3px !important;
  transition:all 0.25s ease;
}
#cookie-notice .cn-button:hover{
  background:#d4af37 !important;
  color:#050505 !important;
}
/* BOTON X */
#cookie-notice .cn-close-icon{
  position:absolute !important;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,0.1) !important;
  width:28px !important;
  height:28px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777 !important;
}
#cookie-notice .cn-close-icon:hover{
  border-color:#d4af37 !important;
  color:#d4af37 !important;
}
/* MOBILE */
@media(max-width:768px){
  #cookie-notice{
    padding:18px 20px !important;
  }
  #cookie-notice .cn-text-container{
    font-size:12px !important;
  }
}
.entry-title {
  display:none!important;
}
/* Header link hover */
.header .nav a {
  text-decoration:none;
  position:relative;
}
/* linea animada */
.header .nav a:not(.cta-btn)::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background:#d4af37;
  transition:width 0.3s ease;
}
/* hover */
.header .nav a:not(.cta-btn):hover::after,
.header .nav a:not(.cta-btn):focus-visible::after {
  width:100%;
}
.kooka-process {
  position:relative;
  background-color:#0a0a0a !important;
  padding:100px 20px;
  overflow:hidden;
}
.kp-container {
  position:relative;
  z-index:2;
}
.kooka-process::before {
  content:"";
  position:absolute;
  top:20%;
  right:-150px;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(212,175,55,0.12), transparent 70%);
  filter:blur(60px);
  z-index:0;
  pointer-events:none;
}
.kooka-process {
  background:#0a0a0a;
  color:#fff;
  padding:100px 20px;
  font-family:system-ui, -apple-system, sans-serif;
}
.kp-container {
  max-width:1200px;
  margin:auto;
  text-align:center;
}
.kp-tag {
  color:#c5a75a;
  letter-spacing:2px;
  font-size:12px;
}
.kp-title {
  font-size:42px;
  margin:20px 0;
  font-weight:500;
}
.kp-gold {
  color:#d4af37;
}
.kp-sub {
  opacity:0.7;
  max-width:750px!important;
  margin:0 auto 30px;
}
/* TRUST BAR */
.kp-trust {
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  background:#111;
  padding:15px 25px;
  border-radius:50px;
  border:1px solid rgba(212, 175, 55, 0.2);
  margin:40px auto;
}
.kp-pill {
  font-size:14px;
  opacity:0.9;
}
.kp-pill i {
  color:#d4af37;
  margin-right:8px;
}
/* TIMELINE */
.kp-timeline {
  position:relative;
  margin-top:70px;
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.kp-line {
  position:absolute;
  top:30px;
  left:5%;
  right:5%;
  height:2px;
  background:linear-gradient(90deg, transparent, #d4af37, transparent);
}
.kp-node {
  position:relative;
  flex:1;
}
.kp-circle {
  width:60px;
  height:60px;
  border:1px solid #d4af37;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d4af37;
  margin:auto;
  position:relative;
  background:#0a0a0a;
  box-shadow:0 0 15px rgba(212, 175, 55, 0.2);
}
.kp-card {
  margin-top:25px;
  padding:20px;
  border-radius:10px;
  background:#111;
  border:1px solid rgba(212, 175, 55, 0.1);
}
.kp-icon i {
  font-size:20px;
  color:#d4af37;
  margin-bottom:10px;
  display:inline-block;
  text-shadow:0 0 10px rgba(212, 175, 55, 0.3);
}
.kp-card h3 {
  margin:10px 0;
}
.kp-card p {
  font-size:14px;
  opacity:0.7;
}
/* CTA BLOCK */
.kp-cta-wrap {
  margin-top:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  background:#111;
  padding:30px;
  border-radius:12px;
  border:1px solid rgba(212, 175, 55, 0.2);
}
.kp-cta-left {
  text-align:left;
}
.kp-avatars span {
  width:35px;
  height:35px;
  border-radius:50%;
  background:#ccc;
  display:inline-block;
  margin-right:-10px;
  border:2px solid #111;
}
.kp-btn {
  background:#d4af37;
  color:#000;
  border:none;
  padding:15px 30px;
  font-weight:bold;
  border-radius:6px;
  cursor:pointer;
  transition:0.3s;
}
button:not(:disabled) {
  cursor:pointer;
  background:#d4af37;
}
button:focus:not(:focus-visible) {
  outline:none;
  background:#d4af37!important;
  color:#000!important;
}
.kp-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(212, 175, 55, 0.2);
  background-color:#000;
}
.kp-checks {
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
  font-size:14px;
}
.kp-checks li {
  margin-bottom:8px;
}
.kp-checks i {
  color:#d4af37;
  margin-right:8px;
  font-size:12px;
}
/* MOBILE */
@media (max-width:768px) {
  .kp-title {
    font-size:28px;
  }
  .kp-timeline {
    flex-direction:column;
    gap:40px;
    margin-top:40px;
  }
  .kp-line {
    left:30px;
    right:auto;
    width:2px;
    height:100%;
    top:0;
    background:linear-gradient(180deg, transparent, #d4af37, transparent);
  }
  .kp-node {
    display:flex;
    align-items:flex-start;
    gap:15px;
  }
  .kp-circle {
    margin:0;
  }
  .kp-card {
    margin-top:0;
    text-align:left;
  }
  .kp-cta-wrap {
    flex-direction:column;
    text-align:center;
  }
  .kp-checks {
    text-align:center;
  }
  .kp-cta-left {
    text-align:center;
  }
}
@media (max-width:768px) {
  .kp-timeline {
    flex-direction:column;
    position:relative;
    padding-left:50px;
  }
  .kp-line {
    position:absolute;
    left:25px;
    top:0;
    width:2px;
    height:100%;
    background:linear-gradient(180deg, transparent, #d4af37, transparent);
  }
  .kp-node {
    display:flex;
    align-items:flex-start;
    position:relative;
  }
  .kp-circle {
    position:absolute;
    left:-5px;
    top:0;
    width:40px;
    height:40px;
    font-size:14px;
  }
  .kp-card {
    margin-left:30px;
    text-align:left;
  }
}
.services {
  max-width:1200px;
  margin:0 auto;
  padding:110px 20px;
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:35px;
}
/* CARD */
.service-card {
  position:relative;
  padding:45px;
  border-radius:14px;
  background:#111111;
  border:1px solid rgba(255,255,255,0.06);
  transition:all 0.4s ease;
  overflow:hidden;
}
/* GOLD EDGE GLOW */
.service-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  padding:1px;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(212,175,55,0.6),
    transparent
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
/* SOFT HALO */
.service-card::after {
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:18px;
  background:radial-gradient(
    circle at center,
    rgba(212,175,55,0.18),
    transparent 70%
  );
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:-1;
  pointer-events:none;
}
/* HOVER */
.service-card:hover {
  transform:translateY(-8px);
  border-color:rgba(212,175,55,0.4);
  box-shadow:0 25px 60px rgba(0,0,0,0.65);
}
.service-card:hover::before {
  opacity:1;
}
.service-card:hover::after {
  opacity:1;
}
/* ICON */
.service-icon {
  font-size:30px;
  color:#d4af37;
  margin-bottom:22px;
  transition:0.3s;
}
.service-card:hover .service-icon {
  text-shadow:0 0 10px rgba(212,175,55,0.7);
}
/* NUMBER */
.service-number {
  position:absolute;
  top:22px;
  right:28px;
  color:rgba(255,255,255,0.05);
  font-size:13px;
  font-family:'Montserrat', sans-serif;
}
/* TITLE */
.service-card h3 {
  font-family:'Playfair Display', serif;
  font-size:26px;
  color:#ffffff;
  margin-bottom:18px;
}
/* TEXT */
.service-card p {
  font-family:'Montserrat', sans-serif;
  color:#d0d0d0;
  font-size:17px;
  line-height:1.75;
  margin-bottom:30px;
  max-width:280px;
}
/* LINK */
.service-card a {
  position:relative;
  z-index:2;
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  color:#d4af37;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1.6px;
  transition:0.3s;
}
.service-card a:hover {
  opacity:0.7;
  letter-spacing:2px;
}
/* MOBILE */
@media (max-width:900px) {
  .services-grid {
    grid-template-columns:1fr;
  }
  .service-card {
    padding:35px;
  }
  .service-card h3 {
    font-size:22px;
  }
  .service-card p {
    font-size:16px;
  }
}
/* =========================
   DIVIDER CON LOGO GRANDE
========================= */
.divider {
  position:relative;
  width:100%;
  height:120px;
  margin:60px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* LINEA */
.divider-line {
  position:absolute;
  width:100%;
  height:2px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
}
/* BRILLO */
.divider-line::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:35%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(212,175,55,1),
    transparent
  );
  transform:translateX(-120%);
  animation:shimmer 3s ease-in-out infinite;
}
/* LOGO */
.divider-logo {
  position:relative;
  z-index:2;
}
/* LOGO GRANDE */
.divider-logo img {
  width:200px;
  height:auto;
  opacity:0.9;
}
/* HALO */
.divider-logo::after {
  content:"";
  position:absolute;
  inset:-25px;
  background:radial-gradient(
    circle at center,
    rgba(212,175,55,0.2),
    transparent 70%
  );
  z-index:-1;
}
/* ANIMACION */
@keyframes shimmer {
  0% {
    transform:translateX(-120%);
  }
  100% {
    transform:translateX(320%);
  }
}
/* =========================
   OUR APPROACH
========================= */
.approach {
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px;
}
.approach-row {
  display:flex;
  align-items:center;
  gap:60px;
}
.approach-left {
  width:320px;
}
.approach-left span {
  color:#d4af37;
  font-size:12px;
  letter-spacing:2px;
  font-family:'Montserrat', sans-serif;
  display:block;
  margin-bottom:10px;
}
.approach-left h2 {
  font-family:'Playfair Display', serif;
  font-size:32px;
  color:#ffffff;
  line-height:1.2;
  margin-bottom:15px;
}
.approach-left p {
  font-family:'Montserrat', sans-serif;
  color:#bfbfbf;
  font-size:14.5px;
  line-height:1.6;
  margin-bottom:15px;
}
.approach-left a {
  font-family:'Montserrat', sans-serif;
  color:#d4af37;
  font-size:12px;
  letter-spacing:1.4px;
  text-decoration:none;
}
.approach-right {
  display:flex;
  align-items:stretch;
  flex:1;
}
.approach-item {
  flex:1;
  padding:0 25px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:160px;
}
.approach-item + .approach-item {
  border-left:1px solid rgba(255,255,255,0.08);
}
.approach-icon {
  font-size:20px;
  color:#d4af37;
  margin-bottom:12px;
  height:24px;
}
.approach-item h3 {
  font-family:'Playfair Display', serif;
  font-size:17px;
  color:#ffffff;
  margin-bottom:6px;
  min-height:22px;
}
.approach-item p {
  font-family:'Montserrat', sans-serif;
  color:#9f9f9f;
  font-size:13.5px;
  line-height:1.5;
  max-width:180px;
}
/* =========================
   MOBILE
========================= */
@media (max-width:900px) {
  .divider {
    height:90px;
    margin:40px 0;
  }
  .divider-logo img {
    width:140px;
  }
  .approach-row {
    flex-direction:column;
    gap:40px;
  }
  .approach-right {
    flex-direction:column;
  }
  .approach-item {
    padding:20px 0;
    border-left:none !important;
    border-top:1px solid rgba(255,255,255,0.08);
  }
}
/* =========================
   HEADER KOOKA
   FIX: header superpuesto al hero
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
:root{
  --header-height:110px;
}
body{
  background:#050505;
  font-family:'Montserrat', sans-serif !important;
  color:white;
  padding-top:0 !important;
}
/* HEADER */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-height);
  background:rgba(5,5,5,0.82);
  backdrop-filter:blur(10px);
  z-index:9999;
  border-bottom:1px solid rgba(212,175,55,0.15);
}
/* CONTENIDO */
.header-inner{
  height:100%;
  padding:0 45px !important;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
/* LOGO */
.logo{
  height:70px !important;
  width:auto;
  display:block;
}
/* NAV */
.nav{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  position:relative;
}
.nav a:hover{
  color:#d4af37;
}
/* CTA */
.cta-btn{
  margin-left:20px;
  padding:8px 18px;
  border:1px solid #d4af37;
  color:#d4af37;
  text-decoration:none;
  border-radius:4px;
  font-size:14px;
  transition:0.25s;
}
.cta-btn:hover{
  background:#d4af37;
  color:#050505;
}
/* HAMBURGER */
.menu-toggle{
  width:38px;
  height:28px;
  padding:6px;
  margin-right:10px;
  display:none;
  flex-direction:column;
  justify-content:space-between;
  appearance:none;
  background:transparent;
  border:0;
  border-radius:3px;
  cursor:pointer;
  overflow:visible;
}
.menu-toggle span{
  width:100%;
  height:2px;
  background:#d4af37;
  display:block;
  transition:0.3s;
}
/* ANIMACION X */
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}
/* OVERLAY MENU MOBILE */
#overlayMenu{
  position:fixed;
  top:var(--header-height);
  left:0;
  width:100%;
  height:calc(100% - var(--header-height));
  background:#050505;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:9998;
}
#overlayMenu.active{
  opacity:1;
  visibility:visible;
}
#overlayMenu a{
  font-family:'Playfair Display', serif;
  font-size:30px;
  color:white;
  text-decoration:none;
  margin:14px 0;
}
#overlayMenu a:hover{
  color:#d4af37;
}
/* MOBILE */
@media(max-width:900px){
  :root{
    --header-height:90px;
  }
  .nav{
    display:none;
  }
  .menu-toggle{
    display:flex;
  }
  .header-inner{
    padding:0 25px !important;
  }
  .logo{
    height:60px !important;
  }
}
/* WHATSAPP BUTTON */
.wa-btn{
  position:fixed;
  bottom:50px;
  right:20px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:#d4af37;
  color:#050505;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  text-decoration:none;
  border-radius:50px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  z-index:9999;
  transition:all 0.3s ease;
}
.wa-btn:hover{
  transform:translateY(-2px) scale(1.05);
  background:#b8962e;
}
/* ICON */
.wa-icon{
  display:flex;
  align-items:center;
}
/* TEXT */
.wa-text{
  font-weight:500;
}
/* POPUP */
.wa-popup{
  position:fixed;
  bottom:90px;
  right:20px;
  background:#d4af37;
  color:#050505;
  padding:10px 14px;
  border-radius:6px;
  font-size:13px;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  z-index:9998;
}
/* MOBILE */
@media(max-width:600px){
  .wa-text{
    display:none;
  }
  .wa-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    padding:0;
    justify-content:center;
  }
}
/* =========================
FOOTER
========================= */
.kooka-footer {
  background:#050505;
  color:#fff;
  padding-top:40px;
  font-family:'Montserrat', sans-serif;
}
.footer-grid{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 60px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:60px;
}
.footer-col h4{
  color:#d4af37;
  font-size:12px;
  letter-spacing:2px;
  margin-bottom:20px;
}
.footer-logo img{
  width:250px;
}
.footer-text{
  color:#aaa;
  line-height:1.6;
}
.footer-links a{
  display:block;
  color:#fff;
  text-decoration:none;
  margin-bottom:10px;
}
.footer-links a:hover{
  color:#d4af37;
}
.footer-contact div{
  margin-bottom:15px;
  color:#ddd;
}
.footer-divider{
  height:1px;
  background:rgba(212,175,55,0.2);
  margin:40px auto;
  max-width:1100px;
}
.footer-bottom{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
  display:flex;
  justify-content:space-between;
  color:#888;
  font-size:12px;
}
.footer-bottom a{
  color:#d4af37;
  margin-left:20px;
}
@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-bottom{
    flex-direction:column;
    gap:10px;
  }
}
/* EVITA SCROLL LATERAL */
html, body {
  overflow-x:hidden;
}
.kooka-form {
  position:relative;
  padding:40px;
  border-radius:14px;
  background:
    radial-gradient(circle at 85% 20%, rgba(212,175,55,0.12), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(212,175,55,0.08), transparent 50%),
    linear-gradient(180deg, #0a0a0a, #050505);
  border:1px solid rgba(212,175,55,0.35);
  box-shadow:
    0 0 25px rgba(212,175,55,0.08),
    0 40px 100px rgba(0,0,0,0.9);
}
/* =========================
   RESET BASE (EVITA ESTILOS DE WP / ELEMENTOR)
========================= */
.kooka-form,
.kooka-form * {
  box-sizing:border-box;
}
.kooka-form {
  color:#ffffff;
  max-width:720px;
}
/* =========================
   LAYOUT
========================= */
.kooka-form .field {
  margin-bottom:24px;
}
.kooka-form .field-row {
  display:flex;
  gap:20px;
}
.kooka-form .field-row > div {
  flex:1;
}
/* MOBILE */
@media (max-width:768px) {
  .kooka-form .field-row {
    flex-direction:column;
    gap:0;
  }
}
/* =========================
   LABELS
========================= */
.kooka-form label {
  display:block;
  margin-bottom:6px;
  font-size:14px;
  color:#c8b273;
  letter-spacing:0.5px;
  font-family:'Montserrat', sans-serif;
}
/* =========================
   INPUTS (QUITAR BLANCO)
========================= */
.kooka-form input,
.kooka-form textarea,
.kooka-form select {
  width:100%;
  background:transparent !important;
  font-family:'Montserrat', sans-serif;
  color:#ffffff !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  font-size:14px;
}
/* INPUT LINE STYLE */
.kooka-form input,
.kooka-form select {
  border-bottom:1px solid rgba(212,175,55,0.4) !important;
  padding:12px 0;
}
/* TEXTAREA */
.kooka-form textarea {
  border:1px solid rgba(212,175,55,0.4) !important;
  border-radius:10px;
  padding:14px;
  resize:vertical;
}
/* =========================
   FOCUS STATES
========================= */
.kooka-form input:focus,
.kooka-form textarea:focus,
.kooka-form select:focus {
  border-color:#d4af37 !important;
}
/* =========================
   SELECT LIMPIO
========================= */
.kooka-form select {
  appearance:none;
}
/* =========================
   PLACEHOLDER
========================= */
.kooka-form ::placeholder {
  color:rgba(255,255,255,0.4);
}
/* =========================
   LINKS (QUITAR ROJO)
========================= */
.kooka-form a {
  color:#d4af37 !important;
  text-decoration:none;
}
.kooka-form a:hover {
  opacity:0.8;
}
/* =========================
   CHECKBOX
========================= */
.kooka-form input[type="checkbox"] {
  accent-color:#d4af37;
  width:auto;
}
/* =========================
   CAPTCHA
========================= */
.kooka-form .g-recaptcha {
  margin-top:20px;
  transform:scale(0.95);
  transform-origin:left;
}
/* =========================
   BOTON
========================= */
.kooka-form button {
  width:50%;
  margin:30px auto 0;
  display:block;
  height:52px;
  background:transparent;
  border:1px solid #d4af37;
  border-radius:10px;
  color:#d4af37;
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
}
/* HOVER */
.kooka-form button:hover {
  background:#ffffff;
  color:#000000;
}
/* =========================
   TEXTO AUXILIAR
========================= */
.kooka-form small {
  color:rgba(255,255,255,0.4);
  font-size:11px;
}
@media (max-width:768px) {
  .kooka-form button {
    width:100%;
    height:54px;
    font-size:12px;
    letter-spacing:1.2px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    text-align:center;
  }
}
.contact-title {
  text-align:center;
  max-width:700px;
  margin:0 auto;
}
.contact-title .subtitle {
  color:#d4af37;
  font-size:24px;
  letter-spacing:3px;
  display:block;
  font-weight:900;
}
.contact-title h1 {
  font-family:'Playfair Display', serif;
  font-size:56px;
  line-height:1.2;
  color:#ffffff;
  margin:0 0 20px 0;
}
.contact-title .divider {
  width:120px;
  height:1px;
  background:#d4af37;
  margin:25px auto;
  position:relative;
}
.contact-title .divider span {
  position:absolute;
  top:-3px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  background:#d4af37;
  border-radius:50%;
  display:block;
}
.contact-title p {
  color:#bfbfbf;
  font-size:22px;
  line-height:1.6;
  max-width:600px;
  margin:0 auto;
}
/* MOBILE */
@media (max-width:767px) {
  .contact-title .subtitle {
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:10px;
  }
  .contact-title h1 {
    font-size:34px;
    line-height:1.3;
    margin-bottom:15px;
  }
  .contact-title .divider {
    width:80px;
    margin:20px auto;
  }
  .contact-title .divider span {
    width:5px;
    height:5px;
  }
  .contact-title p {
    font-size:16px;
    padding:0 10px;
  }
}
.branding-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:60px 60px 60px;
  background:url('https://kookadigital.com.au/wp-content/uploads/2026/05/branding-hero.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
/* overlay oscuro premium */
.branding-hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.65) 40%,
    rgba(0,0,0,0.2) 100%
  );
}
/* contenedor */
.branding-hero .container{
  position:relative;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
/* contenido */
.branding-hero .content{
  max-width:620px;
}
/* eyebrow SEO */
.branding-hero .eyebrow{
  color:#d4af37;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:20px;
  display:block;
  font-family:'Montserrat', sans-serif;
}
/* titulo */
.branding-hero h1{
  font-family:'Playfair Display', serif;
  font-size:58px;
  line-height:1.1;
  margin-bottom:20px;
}
.branding-hero h1 span{
  color:#d4af37;
}
/* texto */
.branding-hero p{
  font-family:'Montserrat', sans-serif;
  font-size:18px;
  color:#d1d1d1;
  margin-bottom:35px;
  line-height:1.6;
}
/* botones */
.buttons{
  display:flex;
  gap:20px;
}
.btn{
  padding:14px 30px;
  text-decoration:none!important;
  font-size:15px;
  border-radius:4px;
  transition:0.3s;
  font-family:'Montserrat', sans-serif;
}
/* CTA principal */
.btn.primary{
  background:#d4af37;
  color:#000;
}
.btn.primary:hover{
  background:#b8962f;
}
/* CTA secundario */
.btn.secondary{
  border:1px solid #d4af37;
  color:#d4af37;
}
.btn.secondary:hover{
  background:#d4af37;
  color:#000;
}
/* responsive */
@media(max-width:900px){
  .branding-hero{
    padding:120px 20px 80px;
  }
  .branding-hero h1{
    font-size:38px;
  }
  .branding-hero p{
    font-size:16px;
  }
  .buttons{
    flex-direction:column;
  }
}
/* CONTENEDOR */
.branding-block{
  position:relative;
  padding:120px 20px 70px;
  text-align:center;
  overflow:hidden;
}
/* GLOW DORADO */
.gold-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
/* glow principal */
.gold-bg::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(212,175,55,0.25), transparent 70%);
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  filter:blur(80px);
  animation:goldMove 10s ease-in-out infinite;
}
@keyframes goldMove{
  0%{transform:translate(-50%, -50%) scale(1);}
  50%{transform:translate(-45%, -55%) scale(1.2);}
  100%{transform:translate(-50%, -50%) scale(1);}
}
/* particulas */
.gold-bg span{
  position:absolute;
  width:3px;
  height:3px;
  background:#d4af37;
  border-radius:50%;
  opacity:0.5;
  animation:float 8s linear infinite;
}
@keyframes float{
  0%{transform:translateY(0); opacity:0;}
  50%{opacity:0.6;}
  100%{transform:translateY(-80px); opacity:0;}
}
/* contenido por encima */
.top-content,
.comparison{
  position:relative;
  z-index:2;
}
/* linea dorada */
.branding-block::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  height:1px;
  background:linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity:0.6;
}
/* TOP */
.top-content{
  max-width:800px;
  margin:0 auto 60px;
}
.eyebrow{
  margin-top: 40px;
  color:#d4af37;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:20px;
  display:block;
}
.top-content h2{
  font-family:'Playfair Display', serif;
  font-size:48px;
  line-height:1.2;
  margin-bottom:20px;
}
.top-content h2 span{
  color:#d4af37;
}
.top-content p{
  font-size:18px;
  color:#d1d1d1;
}
/* COMPARISON */
.comparison{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  max-width:880px;
  margin:0 auto;
}
/* COLUMNAS */
.col{
  padding:32px;
  border-radius:8px;
  text-align:left;
  border:1px solid rgba(212,175,55,0.2);
  background:rgba(255,255,255,0.03);
  transition:0.3s;
}
.col:hover{
  border-color:#d4af37;
}
/* TITULOS */
.col h3{
  font-size:14px;
  text-transform:uppercase;
  margin-bottom:18px;
}
/* LISTAS */
.col ul{
  list-style:none;
}
.col li{
  margin-bottom:10px;
  font-size:15px;
  position:relative;
  padding-left:20px;
}
/* ICONOS */
.left li::before{
  content:"x";
  position:absolute;
  left:0;
  color:#888;
}
.right li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#d4af37;
}
/* FLECHA */
.arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  color:#d4af37;
  text-shadow:0 0 8px rgba(212,175,55,0.4);
}
/* RESPONSIVE */
@media(max-width:900px){
  .comparison{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .arrow{
    transform:rotate(90deg);
  }
  .top-content h2{
    font-size:34px;
  }
  .top-content p{
    font-size:16px;
  }
}
/* CONTENEDOR */
.branding-services{
  position:relative;
  padding:80px 20px 100px;
  text-align:center;
  overflow:hidden;
}
/* EFECTO DORADO */
.gold-effects{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
/* ondas */
.gold-effects::before,
.gold-effects::after{
  content:"";
  position:absolute;
  width:140%;
  height:140%;
  top:-20%;
  left:-20%;
  background:radial-gradient(circle at 50% 50%, rgba(212,175,55,0.08), transparent 60%);
  animation:goldWave 12s ease-in-out infinite;
}
.gold-effects::after{
  animation-delay:6s;
  opacity:0.6;
}
@keyframes goldWave{
  0%{transform:scale(1) translateY(0); opacity:0.3;}
  50%{transform:scale(1.1) translateY(-20px); opacity:0.5;}
  100%{transform:scale(1) translateY(0); opacity:0.3;}
}
/* particulas */
.gold-effects span{
  position:absolute;
  width:3px;
  height:3px;
  background:#d4af37;
  border-radius:50%;
  opacity:0.4;
  animation:floatGlow 8s linear infinite;
}
@keyframes floatGlow{
  0%{transform:translateY(0) scale(1); opacity:0;}
  50%{opacity:0.6;}
  100%{transform:translateY(-80px) scale(1.3); opacity:0;}
}
/* CONTENIDO ENCIMA */
.branding-services .container{
  position:relative;
  z-index:2;
}
/* TITULO */
.branding-services .section-title{
  font-family:'Playfair Display', serif;
  font-size:38px;
  margin-bottom:50px;
}
/* GRID */
.branding-services .services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:1100px;
  margin:0 auto;
}
/* ITEM */
.branding-services .service{
  padding:10px;
}
/* ICONOS */
.branding-services .icon{
  margin-bottom:18px;
}
.branding-services .icon img{
  width:48px;
  transition:0.3s;
}
/* HOVER */
.branding-services .service:hover img{
  transform:scale(1.08);
  filter:drop-shadow(0 0 6px rgba(212,175,55,0.4));
}
/* TITULOS */
.branding-services .service h3{
  font-size:17px;
  margin-bottom:10px;
}
/* TEXTO */
.branding-services .service p{
  font-size:14px;
  color:#bdbdbd;
  line-height:1.6;
}
/* RESPONSIVE */
@media(max-width:900px){
  .branding-services .services-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:600px){
  .branding-services .services-grid{
    grid-template-columns:1fr;
  }
  .branding-services .section-title{
    font-size:28px;
  }
}

/* WRAPPER */
.blog-wrapper{
    max-width:1150px !important;
    margin:auto !important;
    padding:25px 25px 50px !important;
}

/* HERO */
.blog-hero{
    margin-bottom:30px !important;
    max-width:600px !important;
    margin-top: 40px;
}

.blog-hero span{
    color:#d4af37 !important;
    font-size:11px !important;
    letter-spacing:2px !important;
}

.blog-hero h1{
    font-family:'Playfair Display', serif !important;
    font-size:38px !important;
    margin:8px 0 !important;
}

.blog-hero p{
    color:#777 !important;
    font-size:14px !important;
}

/* CATEGORIES */
.blog-categories{
    margin-top:15px !important;
    display:flex !important;
    gap:8px !important;
}

.blog-categories a{
    padding:5px 10px !important;
    border:1px solid #1a1a1a !important;
    color:#777 !important;
    font-size:11px !important;
    text-decoration:none !important;
}

.blog-categories a:hover{
    border-color:#d4af37 !important;
    color:#d4af37 !important;
}

/* FEATURED */
.featured-post{
    display:grid !important;
    grid-template-columns:320px 1fr !important; /* 👈 CLAVE: imagen pequeña */
    gap:0 !important;
    margin-bottom:30px !important;
    border:1px solid #1a1a1a !important;
    background:#0b0b0b !important;
}

.featured-post img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

/* TEXTO FEATURED */
.featured-content{
    padding:20px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
}

.featured-content span{
    color:#d4af37 !important;
    font-size:11px !important;
}

.featured-content h2{
    font-family:'Playfair Display' !important;
    font-size:22px !important;
    margin:6px 0 !important;
}

.featured-content p{
    color:#777 !important;
    font-size:13px !important;
}

.featured-content a{
    margin-top:10px !important;
    color:#d4af37 !important;
    font-size:13px !important;
    text-decoration:none !important;
}

/* GRID */
.blog-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:20px !important;
}

/* CARD */
.blog-card{
    background:#0b0b0b !important;
    border:1px solid #1a1a1a !important;
    transition:0.2s !important;
}

.blog-card:hover{
    border-color:#d4af37 !important;
}

/* IMAGEN MÁS CONTROLADA */
.blog-card img{
    width:100% !important;
    height:150px !important;
    object-fit:cover !important;
}

/* CONTENT */
.blog-content{
    padding:14px !important;
}

.blog-category{
    font-size:10px !important;
    color:#d4af37 !important;
}

.blog-content h3{
    font-family:'Playfair Display' !important;
    font-size:17px !important;
    margin:6px 0 !important;
}

.blog-content p{
    color:#777 !important;
    font-size:12px !important;
}

.blog-content a{
    margin-top:8px !important;
    display:inline-block !important;
    color:#d4af37 !important;
    font-size:12px !important;
    text-decoration:none !important;
}

/* MOBILE */
@media(max-width:768px){

    .blog-wrapper{
        padding:70px 18px 40px !important;
    }

    .featured-post{
        grid-template-columns:1fr !important;
    }

    .blog-grid{
        grid-template-columns:1fr !important;
    }

}
a,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}
.ecom-block,
.ecom-block *{
    box-sizing:border-box;
}

.ecom-block{
    position:relative;
    padding:180px 8% 80px;
    color:#fff;
    font-family:'Montserrat', sans-serif;
    overflow:hidden;
}

.ecom-block::before,
.ecom-block::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    height:1px;
    background:linear-gradient(90deg, transparent, #d4af37, transparent);
}

.ecom-block::before{
    top:0;
}

.ecom-block::after{
    bottom:0;
}

.ecom-block .inner{
    position:relative;
    z-index:2;
    max-width:900px;
}

.ecom-block .left{
    max-width:720px;
}

.ecom-block .eyebrow{
    color:#d4af37;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
    display:block;
}

.ecom-block h2{
    font-family:'Playfair Display', serif;
    font-size:46px;
    line-height:1.15;
    margin:0 0 22px;
    color:#fff;
}

.ecom-block h2 span{
    color:#d4af37;
}

.ecom-block p{
    margin:0 0 22px;
    color:#d6d6d6;
    line-height:1.7;
}

.ecom-block .features{
    list-style:none;
    margin:0;
    padding:0;
    max-width:650px;
}

.ecom-block .features li{
    margin-bottom:10px;
    padding:0 0 10px 24px;
    position:relative;
    border-bottom:1px solid rgba(255,255,255,0.10);
    font-size:15px;
    color:#fff;
}

.ecom-block .features li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#d4af37;
}

.ecom-block .bottom{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:70px;
    text-align:center;
    position:relative;
    z-index:2;
}

.ecom-block .item img{
    width:46px;
    margin-bottom:14px;
    filter:brightness(0) saturate(100%) invert(78%) sepia(32%) saturate(500%);
}

.ecom-block .item h4{
    margin:0 0 8px;
    font-size:16px;
    color:#fff;
}

.ecom-block .item p{
    font-size:13px;
    color:#aaa;
    margin:0 auto;
    max-width:240px;
}

.ecom-block .cta{
    display:block;
    width:fit-content;
    margin:45px auto 0;
    padding:15px 42px;
    background:#d4af37 !important;
    color:#050505 !important;
    text-decoration:none!important;
    border-radius:4px;
    font-weight:600;
    position:relative;
    z-index:2;
    opacity:1 !important;
}

.ecom-block .cta:hover{
    background:#b8962e !important;
    color:#050505 !important;
}

@media(max-width:900px){

    .ecom-block{
        padding:140px 6% 70px;
    }

    .ecom-block h2{
        font-size:34px;
    }

    .ecom-block .bottom{
        grid-template-columns:1fr 1fr;
        gap:30px 20px;
    }

}

@media(max-width:600px){

    .ecom-block{
        padding:120px 6% 60px;
    }

    .ecom-block .bottom{
        grid-template-columns:1fr;
    }

}
/* ==========================================================
   HERO PORTFOLIO
========================================================== */

.kooka-portfolio-hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  background-image:url('https://kookadigital.com.au/wp-content/uploads/2026/06/kooka-digital-portfolio-web-design-southern-highlands.webp');
  background-size:cover;
  background-position:left center;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(212,175,55,.25);
}

.kooka-portfolio-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.18) 38%,
    rgba(0,0,0,.72) 55%,
    rgba(0,0,0,.95) 72%,
    #050505 100%
  );
  pointer-events:none;
}

.kooka-portfolio-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 72% 46%,rgba(212,175,55,.13),transparent 30%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.32));
  pointer-events:none;
}

.kooka-portfolio-hero__content{
  position:relative;
  z-index:3;
  width:min(540px,90%);
  margin-right:9vw;
  transform:translateY(8px);
}

.kooka-portfolio-hero__kicker{
  display:block;
  margin-bottom:16px;
  margin-top: 40px;
  color:#d4af37;
  font-size:12px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.kooka-portfolio-hero h1{
  margin:0 0 20px;
  color:#f7f3ea;
  font-family:Georgia,serif;
  font-size:clamp(48px,4.7vw,68px);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.045em;
}

.kooka-portfolio-hero h1 span{
  display:block;
  color:#d4af37;
}

.kooka-portfolio-hero p{
  max-width:510px;
  margin:0 0 30px;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.55;
}

.kooka-portfolio-hero__buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.kooka-portfolio-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  height:56px;
  padding:0 30px;
  border-radius:6px;
  text-decoration:none !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:.25s ease;
}

.kooka-portfolio-btn--gold{
  background:#d4af37;
  color:#050505 !important;
  border:1px solid #d4af37;
}

.kooka-portfolio-btn--gold:hover{
  background:#e2be47;
  border-color:#e2be47;
}

.kooka-portfolio-btn--outline{
  color:#d4af37 !important;
  border:1px solid rgba(212,175,55,.75);
  background:rgba(0,0,0,.25);
}

.kooka-portfolio-btn--outline:hover{
  background:#d4af37;
  color:#050505 !important;
}

.kooka-portfolio-btn:hover{
  transform:translateY(-2px);
}

@media(max-width:900px){

  .kooka-portfolio-hero{
    min-height:700px;
    align-items:flex-end;
    justify-content:flex-start;
    background-position:left top;
  }

  .kooka-portfolio-hero::before{
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.25) 34%,
      rgba(0,0,0,.86) 68%,
      #050505 100%
    );
  }

  .kooka-portfolio-hero__content{
    width:100%;
    margin:0;
    padding:330px 24px 65px;
    transform:none;
  }

  .kooka-portfolio-hero h1{
    font-size:46px;
  }

  .kooka-portfolio-hero p{
    font-size:17px;
  }
}

@media(max-width:520px){

  .kooka-portfolio-hero{
    min-height:720px;
  }

  .kooka-portfolio-hero__content{
    padding:320px 20px 60px;
  }

  .kooka-portfolio-hero__buttons{
    flex-direction:column;
  }

  .kooka-portfolio-btn{
    width:100%;
    min-width:0;
  }
}
.exp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px;
  text-align: center;
}

/* SUBTITLE */
.exp-section .subtitle {
  color: #6B6543;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 15px;
  display: block;
}

/* TITLE */
.exp-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 30px;
}

.exp-section h2 span {
  color: #6B6543;
}

/* STATS */
.exp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 60px;
}

.stat h3 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #6B6543;
  margin: 0;
}

.stat p {
  color: #bfbfbf;
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 10px;
  line-height: 1.4;
}

/* MOBILE */
@media (max-width: 900px) {
  .exp-section {
    padding: 80px 20px;
  }

  .exp-section h2 {
    font-size: 34px;
  }

  .exp-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
/* EXPERIENCE & RESULTS */

.exp-section .subtitle{
    color:#F4C430;
}

.exp-section h2 span{
    color:#F4C430;
}

.exp-section .stat h3{
    color:#F4C430;
}

.exp-section .stat{
    border-color:rgba(244,196,48,.18);
}

.exp-section .stat:hover{
    border-color:#F4C430;
    box-shadow:0 20px 45px rgba(244,196,48,.12);
}
/* ASCENT PORTFOLIO CASE */

.ascent-case{
  --ascent:#9AA36A;

  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:#050505;
  color:#fff;
  overflow:hidden;
  font-family:'Montserrat', sans-serif;
  border-top:1px solid rgba(154,163,106,.25);
  border-bottom:1px solid rgba(154,163,106,.25);
}

.ascent-case__top{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.98) 0%,
      rgba(5,5,5,.90) 30%,
      rgba(5,5,5,.46) 48%,
      rgba(5,5,5,.06) 70%,
      rgba(5,5,5,0) 100%
    ),
    url('https://kookadigital.com.au/wp-content/uploads/2026/06/ascent-building-services-website-design-kooka-digital.webp')
    center center / cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.ascent-case__copy{
  width:min(510px,90%);
  margin-left:5.5vw;
  padding:70px 0;
  position:relative;
  z-index:2;
}

.ascent-case__label,
.ascent-case__small-title{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:var(--ascent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.ascent-case__label::after,
.ascent-case__small-title::after{
  content:"";
  width:58px;
  height:1px;
  background:var(--ascent);
}

.ascent-case h2{
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(46px,4.8vw,74px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.ascent-case h2 span{
  display:block;
  color:var(--ascent);
}

.ascent-case__copy p{
  max-width:470px;
  margin:0 0 34px;
  color:rgba(255,255,255,.80);
  font-size:16px;
  line-height:1.65;
}

.ascent-case__btn{
  width:250px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ascent);
  color:#050505 !important;
  text-decoration:none !important;
  font-size:13px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:.25s ease;
}

.ascent-case__btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.ascent-case__bottom{
  display:grid;
  grid-template-columns:30% 42% 28%;
  background:#050505;
}

.ascent-case__review,
.ascent-case__details,
.ascent-case__highlights{
  padding:42px 4vw;
  border-right:1px solid rgba(255,255,255,.14);
}

.ascent-case__highlights{
  border-right:none;
}

.ascent-case__stars{
  color:#F4C430;
  font-size:21px;
  letter-spacing:.12em;
  margin-bottom:18px;
}

.ascent-case__review p{
  margin:0 0 22px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.65;
  font-style:italic;
}

.ascent-case__review strong{
  display:block;
  color:var(--ascent);
  font-size:18px;
  margin-bottom:5px;
}

.ascent-case__review small{
  color:rgba(255,255,255,.7);
  font-size:14px;
}

.ascent-case__details-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:22px;
}

.ascent-case__details-grid div{
  padding:0 20px;
  border-right:1px solid rgba(255,255,255,.14);
}

.ascent-case__details-grid div:first-child{
  padding-left:0;
}

.ascent-case__details-grid div:last-child{
  padding-right:0;
  border-right:none;
}

.ascent-case__details-grid strong{
  display:block;
  margin-bottom:10px;
  color:var(--ascent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ascent-case__details-grid small{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.45;
}

.ascent-case__highlights ul{
  list-style:none;
  padding:0;
  margin:20px 0 0;
}

.ascent-case__highlights li{
  position:relative;
  padding-left:24px;
  margin-bottom:11px;
  color:rgba(255,255,255,.8);
  font-size:14px;
  line-height:1.45;
}

.ascent-case__highlights li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ascent);
}

@media(max-width:1024px){

  .ascent-case{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  .ascent-case__top{
    min-height:720px;
    align-items:flex-end;
    background:
      linear-gradient(
        180deg,
        rgba(5,5,5,.05) 0%,
        rgba(5,5,5,.22) 36%,
        rgba(5,5,5,.88) 68%,
        #050505 100%
      ),
      url('https://kookadigital.com.au/wp-content/uploads/2026/06/ascent-building-services-website-design-kooka-digital.webp')
      center top / cover no-repeat;
  }

  .ascent-case__copy{
    width:100%;
    margin:0;
    padding:360px 28px 50px;
  }

  .ascent-case__bottom{
    grid-template-columns:1fr;
  }

  .ascent-case__review,
  .ascent-case__details,
  .ascent-case__highlights{
    padding:36px 28px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  .ascent-case__highlights{
    border-bottom:none;
  }
}

@media(max-width:600px){

  .ascent-case__top{
    min-height:700px;
    background-position:62% top;
  }

  .ascent-case__copy{
    padding:330px 20px 44px;
  }

  .ascent-case h2{
    font-size:42px;
  }

  .ascent-case__btn{
    width:100%;
  }

  .ascent-case__details-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .ascent-case__details-grid div{
    padding:0;
    border-right:none;
  }
}
/* ASCENT BOTTOM SECTION */

.ascent-case__bottom{
  display:grid;
  grid-template-columns:34% 66%;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.14);
}

.ascent-proof{
  padding:46px 4.5vw;
  border-right:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
}

.ascent-proof__quote{
  max-width:420px;
}

.ascent-proof__stars{
  color:#F4C430;
  font-size:22px;
  letter-spacing:.12em;
  margin-bottom:20px;
}

.ascent-proof__quote p{
  margin:0 0 24px;
  color:rgba(255,255,255,.84);
  font-size:18px;
  line-height:1.55;
  font-family:Georgia,serif;
  font-style:italic;
}

.ascent-proof__quote strong{
  display:block;
  color:var(--ascent);
  font-size:16px;
  margin-bottom:4px;
}

.ascent-proof__quote small{
  color:rgba(255,255,255,.65);
  font-size:13px;
}

.ascent-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.ascent-metrics div{
  padding:44px 30px;
  border-right:1px solid rgba(255,255,255,.14);
}

.ascent-metrics div:last-child{
  border-right:none;
}

.ascent-metrics span{
  display:block;
  margin-bottom:24px;
  color:rgba(154,163,106,.45);
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
}

.ascent-metrics strong{
  display:block;
  margin-bottom:14px;
  color:var(--ascent);
  font-size:17px;
  line-height:1.25;
}

.ascent-metrics small{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.55;
}

@media(max-width:1024px){
  .ascent-case__bottom{
    grid-template-columns:1fr;
  }

  .ascent-proof{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.14);
    padding:38px 28px;
  }

  .ascent-metrics{
    grid-template-columns:repeat(2,1fr);
  }

  .ascent-metrics div:nth-child(2){
    border-right:none;
  }

  .ascent-metrics div:nth-child(1),
  .ascent-metrics div:nth-child(2){
    border-bottom:1px solid rgba(255,255,255,.14);
  }
}

@media(max-width:600px){
  .ascent-metrics{
    grid-template-columns:1fr;
  }

  .ascent-metrics div{
    padding:30px 24px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  .ascent-metrics div:last-child{
    border-bottom:none;
  }

  .ascent-proof__quote p{
    font-size:17px;
  }
}
/* =========================================================
   WEB DESIGN SERVICES
========================================================= */

.web-services-clean,
.web-services-clean *,
.web-services-clean *::before,
.web-services-clean *::after {
  box-sizing: border-box;
}

.web-services-clean {
  position: relative;
  width: 100%;
  padding: 88px 7% 96px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #fff;
  overflow: hidden;
}

/* HEADER */

.web-services-clean .top {
  max-width: 1050px;
  margin: 0 auto 58px;
}

.web-services-clean .eyebrow {
  display: block;
  margin-bottom: 17px;
  color: #d4af37;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.web-services-clean h2 {
  margin: 0 0 19px;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.web-services-clean h2 span {
  color: #d4af37;
}

.web-services-clean .section-intro {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.67);
  font-size: 16px;
  line-height: 1.75;
}

/* GRID 3 X 2 */

.services-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 64px;
}

/* SERVICE */

.service {
  position: relative;
  min-width: 0;
  padding: 15px 24px 12px;
  text-align: center;
}

.service::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 70px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.55),
    transparent
  );
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service:hover::after {
  opacity: 1;
}

/* ICONOS PNG Y SVG */

.service img,
.service svg {
  width: 58px;
  height: 58px;
  margin: 0 auto 21px;
  display: block;
  object-fit: contain;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.service img {
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(32%)
    saturate(700%)
    hue-rotate(4deg)
    brightness(94%);
}

.service svg {
  fill: none;
  stroke: #d4af37;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service:hover img,
.service:hover svg {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 0 9px rgba(212, 175, 55, 0.38));
}

/* TEXTOS */

.service h3 {
  margin: 0 0 11px;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
}

.service p {
  max-width: 325px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.7;
}

/* TABLET */

@media (max-width: 950px) {

  .web-services-clean {
    padding: 75px 6% 82px;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 38px;
    row-gap: 52px;
  }

}

/* MOBILE */

@media (max-width: 600px) {

  .web-services-clean {
    padding: 65px 24px 70px;
  }

  .web-services-clean .top {
    margin-bottom: 43px;
  }

  .web-services-clean h2 {
    font-size: 38px;
  }

  .web-services-clean .section-intro {
    font-size: 15px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 43px;
  }

  .service {
    padding: 8px 5px;
  }

  .service img,
  .service svg {
    width: 55px;
    height: 55px;
    margin-bottom: 18px;
  }

  .service h3 {
    font-size: 19px;
  }

  .service p {
    max-width: 360px;
  }

}
/*======================================================
 WHY KOOKA
======================================================*/

.kd-why{
    padding:130px 0;
    position:relative;
    overflow:hidden;
}

.kd-why:before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 15% 85%,rgba(212,175,55,.08),transparent 28%);
    pointer-events:none;
}

.kd-why__heading{

    width:min(900px,90%);
    margin:0 auto 90px;
    text-align:center;

}

.kd-why__heading span{

    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    display:block;
    margin-bottom:20px;

}

.kd-why__heading h2{

    font-family:"Playfair Display",serif;
    font-size:clamp(48px,5vw,72px);
    line-height:1.05;
    color:#fff;
    margin-bottom:28px;

}

.kd-why__heading strong{

    color:#d4af37;
    font-weight:500;

}

.kd-why__heading p{

    max-width:720px;
    margin:auto;
    color:#bfbfbf;
    font-size:20px;
    line-height:1.8;

}

.kd-why__list{

    width:min(1050px,90%);
    margin:auto;

}

.kd-item{

    display:grid;
    grid-template-columns:90px 1fr;
    gap:40px;

    padding:42px 0;

    border-top:1px solid rgba(212,175,55,.15);

}

.kd-item:last-child{

    border-bottom:1px solid rgba(212,175,55,.15);

}

.kd-item__number{

    width:64px;
    height:64px;

    border:1px solid rgba(212,175,55,.35);

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#d4af37;

    font-weight:700;

    font-size:15px;

    transition:.35s;

}

.kd-item:hover .kd-item__number{

    background:#d4af37;

    color:#000;

    transform:translateY(-5px);

    box-shadow:0 0 30px rgba(212,175,55,.25);

}

.kd-item h3{

    color:#fff;

    font-size:34px;

    font-family:"Playfair Display",serif;

    margin-bottom:18px;

    font-weight:500;

}

.kd-item p{

    color:#bcbcbc;

    line-height:1.9;

    font-size:18px;

    max-width:760px;

}

@media(max-width:900px){

.kd-item{

grid-template-columns:1fr;

gap:25px;

}

.kd-item__number{

margin-bottom:10px;

}

.kd-item h3{

font-size:30px;

}

.kd-why{

padding:90px 0;

}

}
body.menu-open {
	overflow: hidden;
}
/* =========================================================
   KOOKA DIGITAL — SERVICES HOME
========================================================= */

.kd-services,
.kd-services *,
.kd-services *::before,
.kd-services *::after {
	box-sizing: border-box;
}

.kd-services {
	position: relative;
	width: 100%;
	padding: 120px 6%;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#070707 0%,
			#0d0d0d 48%,
			#060606 100%
		);
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	isolation: isolate;
}

/* TEXTURE */

.kd-services__texture {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	opacity: 0.2;
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		);
	background-size: 46px 46px;
	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			black 20%,
			black 80%,
			transparent
		);
}

/* BACKGROUND GLOWS */

.kd-services__glow {
	position: absolute;
	z-index: -2;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(100px);
	opacity: 0.14;
}

.kd-services__glow--left {
	top: -230px;
	left: -230px;
	background: #d4af37;
}

.kd-services__glow--right {
	right: -250px;
	bottom: -280px;
	background: #d4af37;
}

/* MAIN CONTAINER */

.kd-services__container {
	display: grid;
	grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.55fr);
	align-items: center;
	gap: clamp(60px, 8vw, 130px);
	width: min(1240px, 100%);
	margin: 0 auto;
}

/* =========================================================
   INTRODUCTION
========================================================= */

.kd-services__intro {
	position: relative;
	max-width: 440px;
}

.kd-services__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	color: #d4af37;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.kd-services__eyebrow::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: #d4af37;
}

.kd-services__title {
	margin: 0 0 28px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(48px, 5vw, 72px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.kd-services__title span {
	position: relative;
	color: #d4af37;
}

.kd-services__description {
	max-width: 420px;
	margin: 0 0 38px;
	color: rgba(255, 255, 255, 0.67);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
}

/* MAIN BUTTON */

.kd-services__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid rgba(212, 175, 55, 0.65);
	border-radius: 2px;
	background: transparent;
	color: #d4af37;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.13em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.kd-services__button svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kd-services__button:hover,
.kd-services__button:focus-visible {
	border-color: #d4af37;
	background: #d4af37;
	color: #050505;
	transform: translateY(-2px);
}

.kd-services__button:hover svg,
.kd-services__button:focus-visible svg {
	transform: translateX(4px);
}

/* =========================================================
   SERVICES GRID
========================================================= */

.kd-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* SERVICE CARD */

.kd-service-card {
	position: relative;
	min-width: 0;
	min-height: 340px;
	margin: 0;
	padding: clamp(32px, 4vw, 46px);
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.008)
		);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
}

.kd-service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			transparent,
			#d4af37,
			transparent
		);
	opacity: 0;
	transform: scaleX(0.3);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.kd-service-card::after {
	content: "";
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(212, 175, 55, 0.1),
			transparent 68%
		);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.kd-service-card:hover {
	background-color: rgba(212, 175, 55, 0.035);
	border-color: rgba(212, 175, 55, 0.28);
	transform: translateY(-4px);
}

.kd-service-card:hover::before {
	opacity: 1;
	transform: scaleX(1);
}

.kd-service-card:hover::after {
	opacity: 1;
}

/* ICON */

.kd-service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 30px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.035);
	color: #d4af37;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
}

.kd-service-card__icon svg {
	width: 36px;
	height: 36px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kd-service-card__icon text {
	fill: currentColor;
	stroke: none;
	font-family: Arial, sans-serif;
	font-size: 5px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.kd-service-card:hover .kd-service-card__icon {
	border-color: #d4af37;
	background: #d4af37;
	color: #050505;
	transform: translateY(-4px);
}

/* CARD CONTENT */

.kd-service-card h3 {
	margin: 0 0 16px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(24px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.kd-service-card p {
	max-width: 340px;
	margin: 0 0 27px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.75;
}

.kd-service-card > a {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.kd-service-card > a::after {
	display: none;
}

.kd-service-card > a span {
	font-size: 17px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.kd-service-card > a:hover span,
.kd-service-card > a:focus-visible span {
	transform: translateX(5px);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.kd-services a:focus-visible {
	outline: 2px solid #d4af37;
	outline-offset: 5px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.kd-services {
		padding: 100px 5%;
	}

	.kd-services__container {
		grid-template-columns: 1fr;
		gap: 65px;
	}

	.kd-services__intro {
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

	.kd-services__eyebrow {
		justify-content: center;
	}

	.kd-services__description {
		max-width: 620px;
		margin-right: auto;
		margin-left: auto;
	}

	.kd-services__title br {
		display: none;
	}

	.kd-service-card {
		min-height: 320px;
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

	.kd-services {
		padding: 78px 20px;
	}

	.kd-services__container {
		gap: 48px;
	}

	.kd-services__title {
		font-size: clamp(42px, 13vw, 56px);
		line-height: 1.02;
	}

	.kd-services__description {
		font-size: 15px;
		line-height: 1.7;
	}

	.kd-services__button {
		width: 100%;
	}

	.kd-services__grid {
		grid-template-columns: 1fr;
	}

	.kd-service-card {
		min-height: auto;
		padding: 34px 28px 36px;
	}

	.kd-service-card__icon {
		width: 62px;
		height: 62px;
		margin-bottom: 25px;
	}

	.kd-service-card__icon svg {
		width: 32px;
		height: 32px;
	}

	.kd-service-card h3 {
		font-size: 26px;
	}
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kd-services__button,
	.kd-services__button svg,
	.kd-service-card,
	.kd-service-card::before,
	.kd-service-card::after,
	.kd-service-card__icon,
	.kd-service-card > a span {
		transition: none;
	}
}
/* =========================================================
   KOOKA DIGITAL — PREMIUM FOOTER
========================================================= */

.kd-footer,
.kd-footer *,
.kd-footer *::before,
.kd-footer *::after {
	box-sizing: border-box;
}

.kd-footer {
	position: relative;
	overflow: hidden;
	padding: 0 5%;
	background:
		linear-gradient(
			180deg,
			#070707 0%,
			#030303 100%
		);
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	border-top: 1px solid rgba(212, 175, 55, 0.18);
	isolation: isolate;
}

.kd-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	opacity: 0.16;
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		);
	background-size: 48px 48px;
	mask-image:
		linear-gradient(
			to bottom,
			black,
			transparent 85%
		);
}

.kd-footer__glow {
	position: absolute;
	z-index: -2;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(110px);
	opacity: 0.1;
}

.kd-footer__glow--left {
	top: -260px;
	left: -200px;
	background: #d4af37;
}

.kd-footer__glow--right {
	right: -240px;
	bottom: -280px;
	background: #d4af37;
}

.kd-footer__container {
	width: min(1360px, 100%);
	margin: 0 auto;
}

/* =========================================================
   NEWSLETTER
========================================================= */

.kd-footer-newsletter {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
	align-items: center;
	gap: clamp(50px, 7vw, 110px);
	margin: 0;
	padding: clamp(48px, 6vw, 75px);
	overflow: hidden;
	background:
		linear-gradient(
			130deg,
			rgba(212, 175, 55, 0.13),
			rgba(255, 255, 255, 0.025) 48%,
			rgba(212, 175, 55, 0.055)
		);
border: 1px solid rgba(212, 175, 55, 0.24);
}

.kd-footer-newsletter::after {
	content: "";
	position: absolute;
	top: -130px;
	right: -100px;
	width: 350px;
	height: 350px;
	border: 1px solid rgba(212, 175, 55, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.kd-footer-newsletter__content,
.kd-footer-newsletter__form {
	position: relative;
	z-index: 2;
}

.kd-footer__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.kd-footer__eyebrow::before {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	background: #d4af37;
}

.kd-footer-newsletter h2 {
	margin: 0 0 16px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(38px, 4vw, 56px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
}

.kd-footer-newsletter h2 span {
	color: #d4af37;
}

.kd-footer-newsletter__content > p {
	max-width: 540px;
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 15px;
	line-height: 1.75;
}

.kd-footer-newsletter__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 6px;
	background: rgba(0, 0, 0, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: border-color 0.25s ease;
}

.kd-footer-newsletter__field:focus-within {
	border-color: rgba(212, 175, 55, 0.72);
}

.kd-footer-newsletter__field input {
	width: 100%;
	min-width: 0;
	height: 54px;
	padding: 0 19px;
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
}

.kd-footer-newsletter__field input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.kd-footer-newsletter__field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 150px;
	height: 54px;
	padding: 0 23px;
	background: #d4af37;
	border: 1px solid #d4af37;
	border-radius: 0;
	color: #050505;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		color 0.25s ease;
}

.kd-footer-newsletter__field button svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kd-footer-newsletter__field button:hover,
.kd-footer-newsletter__field button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
}

.kd-footer-newsletter__field button:hover svg {
	transform: translateX(4px);
}

.kd-footer-newsletter__privacy {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.43);
	font-size: 11px;
	line-height: 1.5;
}

/* =========================================================
   MAIN FOOTER
========================================================= */

.kd-footer__main {
	display: grid;
	grid-template-columns: minmax(250px, 1.45fr) 0.8fr 0.7fr minmax(250px, 1fr);
	gap: clamp(40px, 6vw, 90px);
	padding: 80px 25px 68px;
}

.kd-footer__logo {
	display: inline-block;
	margin-bottom: 24px;
}

.kd-footer__logo::after {
	display: none;
}

.kd-footer__logo img {
	display: block;
	width: 230px;
	height: auto;
}

.kd-footer__brand > p {
	max-width: 370px;
	margin: 0 0 25px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	line-height: 1.8;
}

.kd-footer__location {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
}

.kd-footer__location svg,
.kd-footer__project-link svg {
	flex: 0 0 auto;
	fill: none;
	stroke: #d4af37;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kd-footer__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.kd-footer__column h2 {
	margin: 0 0 25px;
	color: #d4af37;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kd-footer__column > a:not(.kd-footer__project-link) {
	position: relative;
	margin-bottom: 13px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.kd-footer__column > a:not(.kd-footer__project-link)::after {
	display: none;
}

.kd-footer__column > a:not(.kd-footer__project-link):hover,
.kd-footer__column > a:not(.kd-footer__project-link):focus-visible {
	color: #ffffff;
	transform: translateX(4px);
}

.kd-footer__contact > p {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	line-height: 1.7;
}

.kd-footer__contact .kd-footer__email {
	margin-bottom: 22px;
	color: #ffffff;
	word-break: break-word;
}

.kd-footer__project-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.55);
	color: #d4af37;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.kd-footer__project-link::after {
	display: none;
}

.kd-footer__project-link svg {
	transition: transform 0.25s ease;
}

.kd-footer__project-link:hover svg,
.kd-footer__project-link:focus-visible svg {
	transform: translateX(4px);
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.kd-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 30px;
	min-height: 78px;
	padding: 20px 25px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.42);
	font-size: 11px;
	margin-bottom: 20px;
}

.kd-footer__bottom p {
	margin: 0;
}

.kd-footer__signature {
	text-align: center;
}

.kd-footer__legal {
	display: flex;
	justify-content: flex-end;
	gap: 25px;
}

.kd-footer__legal a {
	color: rgba(255, 255, 255, 0.52);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kd-footer__legal a::after {
	display: none;
}

.kd-footer__legal a:hover,
.kd-footer__legal a:focus-visible {
	color: #d4af37;
}

/* ACCESSIBILITY */

.kd-footer a:focus-visible,
.kd-footer button:focus-visible,
.kd-footer input:focus-visible {
	outline: 2px solid #d4af37;
	outline-offset: 4px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

	.kd-footer-newsletter {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.kd-footer__main {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.kd-footer__contact {
		grid-column: 1 / -1;
		padding-top: 35px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.kd-footer__bottom {
		grid-template-columns: 1fr auto;
	}

	.kd-footer__signature {
		display: none;
	}
}

@media (max-width: 720px) {

	.kd-footer {
		padding: 0 18px;
	}

	.kd-footer-newsletter {
		padding: 42px 25px;
	}

	.kd-footer-newsletter h2 {
		font-size: 40px;
	}

	.kd-footer-newsletter__field {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.kd-footer-newsletter__field button {
		width: 100%;
	}

	.kd-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 45px 30px;
		padding: 62px 7px 52px;
	}

	.kd-footer__brand {
		grid-column: 1 / -1;
	}

	.kd-footer__contact {
		grid-column: 1 / -1;
	}

	.kd-footer__bottom {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 25px 7px 32px;
		text-align: center;
	}

	.kd-footer__legal {
		justify-content: center;
	}
}

@media (max-width: 440px) {

	.kd-footer__main {
		grid-template-columns: 1fr;
	}

	.kd-footer__column,
	.kd-footer__brand {
		align-items: flex-start;
		text-align: left;
	}

	.kd-footer-newsletter h2 {
		font-size: 35px;
	}

	.kd-footer-newsletter__content > p {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kd-footer a,
	.kd-footer button,
	.kd-footer svg,
	.kd-footer input {
		transition: none;
	}
}
/* =========================================================
   NEWSLETTER FORM — REFINED CELL
========================================================= */

.kd-footer-newsletter__form {
	width: 100%;
	max-width: 650px;
	justify-self: end;
	padding: 26px;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.045),
			rgba(255, 255, 255, 0.012)
		);
	border: 1px solid rgba(255, 255, 255, 0.11);
	box-shadow:
		0 28px 70px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.kd-footer-newsletter__field {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 5px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.13);
	box-shadow:
		inset 0 1px 8px rgba(0, 0, 0, 0.35);
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.kd-footer-newsletter__field:focus-within {
	border-color: rgba(212, 175, 55, 0.72);
	box-shadow:
		0 0 0 3px rgba(212, 175, 55, 0.08),
		inset 0 1px 8px rgba(0, 0, 0, 0.35);
}

.kd-footer-newsletter__field input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	outline: 0;
}

.kd-footer-newsletter__field input::placeholder {
	color: rgba(255, 255, 255, 0.46);
	opacity: 1;
}

.kd-footer-newsletter__field button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: auto;
	min-width: 148px;
	height: 52px;
	margin: 0;
	padding: 0 21px;
	background: #d4af37;
	border: 1px solid #d4af37;
	border-radius: 0;
	box-shadow: none;
	color: #050505;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.kd-footer-newsletter__field button:hover,
.kd-footer-newsletter__field button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #050505;
}

.kd-footer-newsletter__privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 530px;
	margin: 14px 2px 0;
	color: rgba(255, 255, 255, 0.43);
	font-size: 10px;
	line-height: 1.55;
}

.kd-footer-newsletter__privacy::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-top: 5px;
	border-radius: 50%;
	background: #d4af37;
	opacity: 0.75;
}

/* TABLET */

@media (max-width: 1100px) {

	.kd-footer-newsletter__form {
		max-width: 720px;
		justify-self: center;
	}
}

/* MOBILE */

@media (max-width: 620px) {

	.kd-footer-newsletter__form {
		padding: 15px;
	}

	.kd-footer-newsletter__field {
		display: grid;
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.kd-footer-newsletter__field input {
		width: 100%;
	}

	.kd-footer-newsletter__field button {
		width: 100%;
	}

	.kd-footer-newsletter__privacy {
		margin-top: 12px;
	}
}
/* =========================================================
   NEWSLETTER — FIX DOUBLE BOX
========================================================= */

.kd-footer-newsletter__form {
	display: block;
	width: 100%;
	max-width: 650px;
	justify-self: end;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.kd-footer-newsletter__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	width: 100%;
	min-height: 66px;
	margin: 0;
	padding: 5px;
	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.58),
			rgba(8, 8, 8, 0.78)
		);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 22px 55px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.kd-footer-newsletter__field:focus-within {
	border-color: rgba(212, 175, 55, 0.75);
	box-shadow:
		0 22px 55px rgba(0, 0, 0, 0.25),
		0 0 0 3px rgba(212, 175, 55, 0.07);
}

.kd-footer-newsletter__field input {
	display: block;
	width: 100%;
	min-width: 0;
	height: 58px;
	margin: 0;
	padding: 0 24px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	line-height: 58px;
}

.kd-footer-newsletter__field input::placeholder {
	color: rgba(255, 255, 255, 0.48);
	opacity: 1;
}

.kd-footer-newsletter__field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	width: auto;
	min-width: 190px;
	height: 58px;
	margin: 0;
	padding: 0 27px;
	background: #d4af37;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #050505;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
}

.kd-footer-newsletter__field button:hover,
.kd-footer-newsletter__field button:focus-visible {
	background: #ffffff;
	color: #050505;
}

.kd-footer-newsletter__privacy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	max-width: 580px;
	margin: 15px 0 0;
	padding: 0 3px;
	color: rgba(255, 255, 255, 0.46);
	font-size: 10px;
	line-height: 1.6;
}

.kd-footer-newsletter__privacy::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-top: 5px;
	border-radius: 50%;
	background: #d4af37;
}

/* TABLET */

@media (max-width: 1100px) {

	.kd-footer-newsletter__form {
		max-width: 720px;
		justify-self: center;
	}
}

/* MOBILE */

@media (max-width: 620px) {

	.kd-footer-newsletter__field {
		grid-template-columns: 1fr;
		gap: 5px;
		padding: 5px;
	}

	.kd-footer-newsletter__field input {
		height: 56px;
		line-height: 56px;
	}

	.kd-footer-newsletter__field button {
		width: 100%;
		height: 54px;
		min-width: 0;
	}

	.kd-footer-newsletter__privacy {
		margin-top: 12px;
	}
}
/* =========================================================
   KOOKA NEWSLETTER — NEW CLEAN DESIGN
========================================================= */

.kdn-newsletter,
.kdn-newsletter *,
.kdn-newsletter *::before,
.kdn-newsletter *::after {
	box-sizing: border-box;
}

.kdn-newsletter {
	position: relative;
	width: 100%;
	margin: 0;
	padding: clamp(65px, 7vw, 95px) clamp(28px, 6vw, 85px);
	overflow: hidden;
	background:
		radial-gradient(
			circle at 4% 10%,
			rgba(212, 175, 55, 0.12),
			transparent 34%
		),
		linear-gradient(
			110deg,
			rgba(212, 175, 55, 0.035),
			rgba(255, 255, 255, 0.012) 52%,
			transparent
		);
	border-top: 1px solid rgba(212, 175, 55, 0.22);
	border-bottom: 1px solid rgba(212, 175, 55, 0.15);
	isolation: isolate;
}

/* Subtle inner line */

.kdn-newsletter::before {
	content: "";
	position: absolute;
	top: 0;
	left: clamp(28px, 6vw, 85px);
	width: 85px;
	height: 1px;
	background: #d4af37;
	box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}

/* Background detail */

.kdn-newsletter__decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.kdn-newsletter__circle {
	position: absolute;
	top: -210px;
	right: -120px;
	width: 430px;
	height: 430px;
	border: 1px solid rgba(212, 175, 55, 0.11);
	border-radius: 50%;
}

.kdn-newsletter__circle::before {
	content: "";
	position: absolute;
	inset: 54px;
	border: 1px solid rgba(212, 175, 55, 0.065);
	border-radius: inherit;
}

.kdn-newsletter__line {
	position: absolute;
	right: 4%;
	bottom: 23%;
	width: 190px;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(212, 175, 55, 0.24),
			transparent
		);
	transform: rotate(-24deg);
}

/* =========================================================
   LAYOUT
========================================================= */

.kdn-newsletter__layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(300px, 0.95fr) minmax(420px, 1.05fr);
	align-items: center;
	gap: clamp(60px, 9vw, 145px);
	width: 100%;
	max-width: 1190px;
	margin: 0 auto;
}

/* =========================================================
   CONTENT
========================================================= */

.kdn-newsletter__content {
	max-width: 530px;
}

.kdn-newsletter__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 22px;
	color: #d4af37;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.23em;
	text-transform: uppercase;
}

.kdn-newsletter__eyebrow::before {
	content: "";
	display: block;
	width: 31px;
	height: 1px;
	background: #d4af37;
}

.kdn-newsletter__title {
	margin: 0 0 23px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(45px, 4.6vw, 66px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.038em;
}

.kdn-newsletter__title span {
	display: block;
	color: #d4af37;
}

.kdn-newsletter__description {
	max-width: 520px;
	margin: 0;
	color: rgba(255, 255, 255, 0.63);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.8;
}

/* =========================================================
   SIGNUP
========================================================= */

.kdn-newsletter__signup {
	width: 100%;
	max-width: 610px;
	justify-self: end;
}

.kdn-newsletter__form {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Single form line */

.kdn-newsletter__field {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	width: 100%;
	min-height: 66px;
	margin: 0;
	padding: 5px;
	background: rgba(2, 2, 2, 0.52);
	border: 1px solid rgba(255, 255, 255, 0.13);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.kdn-newsletter__field::before {
	content: "";
	position: absolute;
	left: -1px;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: #d4af37;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.kdn-newsletter__field:focus-within {
	border-color: rgba(212, 175, 55, 0.58);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.22),
		0 0 0 3px rgba(212, 175, 55, 0.055);
}

.kdn-newsletter__field:focus-within::before {
	opacity: 1;
}

/* Email input */

.kdn-newsletter__field input[type="email"] {
	display: block;
	width: 100%;
	min-width: 0;
	height: 56px;
	margin: 0;
	padding: 0 22px;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 56px;
}

.kdn-newsletter__field input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

/* Subscribe button */

.kdn-newsletter__field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	width: auto;
	min-width: 174px;
	height: 56px;
	margin: 0;
	padding: 0 25px;
	appearance: none;
	background: #d4af37;
	border: 1px solid #d4af37;
	border-radius: 0;
	box-shadow: none;
	color: #050505;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.kdn-newsletter__field button svg {
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kdn-newsletter__field button:hover,
.kdn-newsletter__field button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #050505;
}

.kdn-newsletter__field button:hover svg,
.kdn-newsletter__field button:focus-visible svg {
	transform: translateX(4px);
}

/* Privacy */

.kdn-newsletter__privacy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 570px;
	margin: 14px 2px 0;
	color: rgba(255, 255, 255, 0.42);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 10px;
	line-height: 1.6;
}

.kdn-newsletter__privacy-dot {
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	margin-top: 6px;
	border-radius: 50%;
	background: #d4af37;
}

/* Submission messages */

.kdn-newsletter__message {
	margin: 14px 2px 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
}

.kdn-newsletter__message--success {
	color: #d4af37;
}

.kdn-newsletter__message--error {
	color: #ff8b8b;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.kdn-newsletter__field input:focus-visible {
	outline: 0;
}

.kdn-newsletter__field button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

	.kdn-newsletter {
		padding: 70px 7%;
	}

	.kdn-newsletter__layout {
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.kdn-newsletter__content {
		max-width: 720px;
		text-align: center;
		margin: 0 auto;
	}

	.kdn-newsletter__eyebrow {
		justify-content: center;
	}

	.kdn-newsletter__title span {
		display: inline;
	}

	.kdn-newsletter__description {
		margin-right: auto;
		margin-left: auto;
	}

	.kdn-newsletter__signup {
		max-width: 680px;
		justify-self: center;
	}
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

	.kdn-newsletter {
		padding: 60px 20px;
	}

	.kdn-newsletter::before {
		left: 20px;
	}

	.kdn-newsletter__layout {
		gap: 37px;
	}

	.kdn-newsletter__title {
		font-size: clamp(39px, 12vw, 50px);
		line-height: 1.02;
	}

	.kdn-newsletter__title span {
		display: block;
	}

	.kdn-newsletter__description {
		font-size: 14px;
		line-height: 1.7;
	}

	.kdn-newsletter__field {
		grid-template-columns: 1fr;
		gap: 5px;
		padding: 5px;
	}

	.kdn-newsletter__field input[type="email"] {
		height: 54px;
		line-height: 54px;
		text-align: center;
	}

	.kdn-newsletter__field button {
		width: 100%;
		min-width: 0;
		height: 52px;
	}

	.kdn-newsletter__privacy {
		justify-content: center;
		text-align: left;
	}
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kdn-newsletter__field,
	.kdn-newsletter__field::before,
	.kdn-newsletter__field button,
	.kdn-newsletter__field button svg {
		transition: none;
	}
}
/* =========================================================
   NEWSLETTER — FINAL SLIM VERSION
========================================================= */

.kdn-newsletter {
	width: 100%;
	margin: 0 !important;
	padding: 54px 5% !important;
	overflow: hidden;
	background:
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.055),
			rgba(255, 255, 255, 0.012) 45%,
			transparent 80%
		) !important;
	border: 0 !important;
	border-top: 1px solid rgba(212, 175, 55, 0.16) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	box-shadow: none !important;
}

.kdn-newsletter::before {
	display: none !important;
}

/* Eliminar decoración circular */

.kdn-newsletter__decor,
.kdn-newsletter__circle,
.kdn-newsletter__line {
	display: none !important;
}

/* Franja horizontal compacta */

.kdn-newsletter__layout {
	display: grid;
	grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
	align-items: center;
	gap: clamp(55px, 8vw, 120px);
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

/* Texto */

.kdn-newsletter__content {
	max-width: 470px;
}

.kdn-newsletter__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
	color: #d4af37;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.kdn-newsletter__eyebrow::before {
	width: 24px;
}

.kdn-newsletter__title {
	margin: 0 0 12px !important;
	color: #ffffff;
	font-size: clamp(34px, 3.2vw, 45px) !important;
	font-weight: 500;
	line-height: 1.03 !important;
	letter-spacing: -0.03em;
}

.kdn-newsletter__title span {
	display: inline !important;
	color: #d4af37;
}

.kdn-newsletter__description {
	max-width: 450px;
	margin: 0;
	color: rgba(255, 255, 255, 0.58);
	font-size: 13px;
	line-height: 1.65;
}

/* Zona de suscripción */

.kdn-newsletter__signup {
	width: 100%;
	max-width: 560px;
	justify-self: end;
}

.kdn-newsletter__form {
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.kdn-newsletter__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	width: 100%;
	min-height: 52px !important;
	margin: 0;
	padding: 3px !important;
	background: rgba(0, 0, 0, 0.28) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: none !important;
}

.kdn-newsletter__field::before {
	display: none !important;
}

.kdn-newsletter__field:focus-within {
	border-color: rgba(212, 175, 55, 0.6) !important;
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.05) !important;
}

.kdn-newsletter__field input[type="email"] {
	width: 100%;
	height: 46px !important;
	margin: 0;
	padding: 0 17px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #ffffff;
	font-size: 12px !important;
	line-height: 46px !important;
}

.kdn-newsletter__field input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

/* Botón más fino */

.kdn-newsletter__field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	min-width: 132px !important;
	height: 46px !important;
	margin: 0;
	padding: 0 17px !important;
	background: #d4af37 !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #050505 !important;
	font-size: 9px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.kdn-newsletter__field button svg {
	width: 15px;
	height: 15px;
}

.kdn-newsletter__field button:hover,
.kdn-newsletter__field button:focus-visible {
	background: #ffffff !important;
	color: #050505 !important;
}

/* Texto legal discreto */

.kdn-newsletter__privacy {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	max-width: 520px;
	margin: 9px 1px 0 !important;
	color: rgba(255, 255, 255, 0.35);
	font-size: 14px !important;
	line-height: 1.5;
}

.kdn-newsletter__privacy-dot {
	width: 3px;
	height: 3px;
	margin-top: 5px;
}

/* Mensajes */

.kdn-newsletter__message {
	margin: 9px 1px 0;
	font-size: 10px;
}

/* TABLET */

@media (max-width: 900px) {

	.kdn-newsletter {
		padding: 48px 7% !important;
	}

	.kdn-newsletter__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.kdn-newsletter__content {
		max-width: 620px;
		text-align: left;
		margin: 0;
	}

	.kdn-newsletter__eyebrow {
		justify-content: flex-start;
	}

	.kdn-newsletter__signup {
		max-width: 620px;
		justify-self: start;
	}
}

/* MOBILE */

@media (max-width: 560px) {

	.kdn-newsletter {
		padding: 42px 20px !important;
	}

	.kdn-newsletter__title {
		font-size: 34px !important;
	}

	.kdn-newsletter__title span {
		display: block !important;
	}

	.kdn-newsletter__field {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.kdn-newsletter__field input[type="email"] {
		text-align: left;
	}

	.kdn-newsletter__field button {
		width: 100%;
	}
}
/* =========================================================
   MAINTENANCE & SUPPORT — HERO
========================================================= */

.kms-hero,
.kms-hero *,
.kms-hero *::before,
.kms-hero *::after {
	box-sizing: border-box;
}

.kms-hero {
	position: relative;
	min-height: 700px;
	padding: 105px 5% 80px;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 85% 35%,
			rgba(212, 175, 55, 0.075),
			transparent 35%
		),
		#050505;
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	border-bottom: 1px solid rgba(212, 175, 55, 0.13);
	isolation: isolate;
}

/* BACKGROUND */

.kms-hero__grid {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -3;
	width: 60%;
	height: 100%;
	opacity: 0.25;
	background-image:
		linear-gradient(
			rgba(212, 175, 55, 0.07) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.07) 1px,
			transparent 1px
		);
	background-size: 50px 50px;
	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 30%,
			black 80%,
			transparent
		);
}

.kms-hero__glow {
	position: absolute;
	top: 15%;
	right: 3%;
	z-index: -2;
	width: 550px;
	height: 550px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.055);
	filter: blur(110px);
	pointer-events: none;
}

/* LAYOUT */

.kms-hero__container {
	display: grid;
	grid-template-columns: minmax(360px, 0.85fr) minmax(580px, 1.15fr);
	align-items: center;
	gap: clamp(65px, 7vw, 125px);
	width: min(1480px, 100%);
	margin: 0 auto;
}

/* =========================================================
   CONTENT
========================================================= */

.kms-hero__content {
	position: relative;
	z-index: 4;
	max-width: 680px;
}

.kms-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 28px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.23em;
	text-transform: uppercase;
}

.kms-hero__eyebrow::before {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	background: #d4af37;
}

.kms-hero__title {
	margin: 0 0 28px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(55px, 5vw, 80px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.kms-hero__title span {
	display: block;
	margin-top: 12px;
	color: #d4af37;
	font-size: 0.79em;
	line-height: 1.05;
}

.kms-hero__description {
	max-width: 620px;
	margin: 0 0 38px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 16px;
	line-height: 1.8;
}

/* ACTIONS */

.kms-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
}

.kms-hero__button,
.kms-hero__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	min-height: 56px;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.kms-hero__button {
	padding: 0 27px;
	background: #d4af37;
	border: 1px solid #d4af37;
	border-radius: 2px;
	color: #050505;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.kms-hero__link {
	position: relative;
	padding: 0 3px;
	color: #d4af37;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.kms-hero__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	height: 1px;
	background: rgba(212, 175, 55, 0.5);
	transition: background-color 0.25s ease;
}

.kms-hero__button svg,
.kms-hero__link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kms-hero__button:hover,
.kms-hero__button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #050505;
	transform: translateY(-2px);
}

.kms-hero__link:hover,
.kms-hero__link:focus-visible {
	color: #ffffff;
}

.kms-hero__button:hover svg,
.kms-hero__button:focus-visible svg,
.kms-hero__link:hover svg,
.kms-hero__link:focus-visible svg {
	transform: translateX(4px);
}

/* =========================================================
   VISUAL
========================================================= */

.kms-hero__visual {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 760px;
	justify-self: end;
}

/* SIGNAL LINES */

.kms-hero__signal {
	position: absolute;
	left: -130px;
	z-index: -1;
	width: 170px;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(212, 175, 55, 0.42)
		);
}

.kms-hero__signal::after {
	content: "";
	position: absolute;
	right: 0;
	top: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #d4af37;
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

.kms-hero__signal--one {
	top: 18%;
}

.kms-hero__signal--two {
	top: 42%;
	left: -165px;
	width: 205px;
}

.kms-hero__signal--three {
	bottom: 19%;
	left: -95px;
	width: 135px;
}

/* =========================================================
   DASHBOARD
========================================================= */

.kms-dashboard {
	position: relative;
	width: 100%;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(20, 20, 19, 0.97),
			rgba(7, 7, 7, 0.98)
		);
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 13px;
	box-shadow:
		0 35px 90px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* HEADER */

.kms-dashboard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 88px;
	padding: 20px 27px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.kms-dashboard__status {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kms-dashboard__status-dot {
	position: relative;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #9db73d;
	box-shadow: 0 0 17px rgba(157, 183, 61, 0.65);
}

.kms-dashboard__status-dot::before {
	content: "";
	position: absolute;
	inset: -10px;
	border: 1px solid rgba(157, 183, 61, 0.35);
	border-radius: inherit;
}

.kms-dashboard__status strong {
	display: block;
	margin-bottom: 4px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
}

.kms-dashboard__status small {
	display: block;
	color: rgba(255, 255, 255, 0.43);
	font-size: 10px;
}

.kms-dashboard__live {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 10px;
}

.kms-dashboard__live svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* METRICS */

.kms-dashboard__metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.kms-dashboard__metric {
	min-width: 0;
	min-height: 122px;
	padding: 25px 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.kms-dashboard__metric:last-child {
	border-right: 0;
}

.kms-dashboard__label {
	display: block;
	margin-bottom: 13px;
	color: rgba(255, 255, 255, 0.52);
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.kms-dashboard__value {
	display: block;
	margin-bottom: 9px;
	color: #d4af37;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 29px;
	font-weight: 500;
	line-height: 1;
}

.kms-dashboard__metric-title {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 28px;
	margin-bottom: 8px;
	color: #d4af37;
}

.kms-dashboard__metric-title svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kms-dashboard__metric-title strong {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-weight: 500;
}

.kms-dashboard__metric small {
	display: block;
	color: rgba(255, 255, 255, 0.38);
	font-size: 8px;
	line-height: 1.4;
}

/* PERFORMANCE */

.kms-dashboard__performance {
	position: relative;
	min-height: 230px;
	padding: 25px 185px 24px 27px;
}

.kms-dashboard__chart {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 8px;
}

.kms-dashboard__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 145px;
	padding: 2px 0 1px;
	color: rgba(255, 255, 255, 0.3);
	font-size: 7px;
	text-align: right;
}

.kms-dashboard__graph {
	position: relative;
	height: 168px;
}

.kms-dashboard__graph-line {
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.055);
}

.kms-dashboard__graph-line--one {
	top: 0;
}

.kms-dashboard__graph-line--two {
	top: 36px;
}

.kms-dashboard__graph-line--three {
	top: 72px;
}

.kms-dashboard__graph-line--four {
	top: 108px;
}

.kms-dashboard__graph > svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 145px;
	overflow: visible;
}

.kms-dashboard__area {
	fill: url("#kmsAreaGradient");
}

.kms-dashboard__chart-path {
	fill: none;
	stroke: #d4af37;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.kms-dashboard__chart-point {
	fill: #d4af37;
	stroke: #ffffff;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.kms-dashboard__dates {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	color: rgba(255, 255, 255, 0.28);
	font-size: 7px;
	text-transform: uppercase;
}

/* SHIELD */

.kms-dashboard__shield {
	position: absolute;
	right: 24px;
	bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 145px;
	height: 175px;
}

.kms-dashboard__shield-ring {
	position: absolute;
	inset: -24px;
	border: 1px solid rgba(212, 175, 55, 0.14);
	border-radius: 50%;
}

.kms-dashboard__shield-ring::before,
.kms-dashboard__shield-ring::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(212, 175, 55, 0.09);
	border-radius: 50%;
}

.kms-dashboard__shield-ring::before {
	inset: 13px;
}

.kms-dashboard__shield-ring::after {
	inset: -14px;
}

.kms-dashboard__shield svg {
	position: relative;
	z-index: 2;
	width: 115px;
	height: 135px;
	overflow: visible;
	fill: rgba(212, 175, 55, 0.035);
	stroke: #d4af37;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.16));
}

.kms-dashboard__shield svg path:last-child {
	stroke-width: 4;
}

/* ORBITS */

.kms-hero__orbit {
	position: absolute;
	z-index: -1;
	border: 1px solid rgba(212, 175, 55, 0.1);
	border-radius: 50%;
	pointer-events: none;
}

.kms-hero__orbit--one {
	top: -90px;
	right: -70px;
	width: 330px;
	height: 330px;
}

.kms-hero__orbit--two {
	right: -130px;
	bottom: -120px;
	width: 420px;
	height: 420px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

	.kms-hero {
		padding-right: 4%;
		padding-left: 4%;
	}

	.kms-hero__container {
		grid-template-columns: minmax(340px, 0.8fr) minmax(540px, 1.2fr);
		gap: 50px;
	}

	.kms-hero__title {
		font-size: 57px;
	}

	.kms-dashboard__metric {
		padding-right: 13px;
		padding-left: 13px;
	}
}

@media (max-width: 1050px) {

	.kms-hero {
		padding: 90px 6% 85px;
	}

	.kms-hero__container {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.kms-hero__content {
		max-width: 760px;
		text-align: center;
		margin: 0 auto;
	}

	.kms-hero__eyebrow {
		justify-content: center;
	}

	.kms-hero__description {
		margin-right: auto;
		margin-left: auto;
	}

	.kms-hero__actions {
		justify-content: center;
	}

	.kms-hero__visual {
		max-width: 760px;
		justify-self: center;
	}

	.kms-hero__signal {
		display: none;
	}
}

@media (max-width: 720px) {

	.kms-hero {
		min-height: auto;
		padding: 72px 20px 65px;
	}

	.kms-hero__container {
		gap: 50px;
	}

	.kms-hero__title {
		font-size: clamp(43px, 13vw, 58px);
	}

	.kms-hero__title span {
		font-size: 0.72em;
	}

	.kms-hero__description {
		font-size: 14px;
		line-height: 1.7;
	}

	.kms-hero__actions {
		flex-direction: column;
		gap: 15px;
	}

	.kms-hero__button {
		width: 100%;
		max-width: 330px;
	}

	.kms-dashboard__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kms-dashboard__metric:nth-child(2) {
		border-right: 0;
	}

	.kms-dashboard__metric:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.kms-dashboard__performance {
		padding-right: 25px;
	}

	.kms-dashboard__shield {
		display: none;
	}
}

@media (max-width: 480px) {

	.kms-dashboard__header {
		padding: 19px;
	}

	.kms-dashboard__status strong {
		font-size: 12px;
	}

	.kms-dashboard__live {
		display: none;
	}

	.kms-dashboard__metric {
		min-height: 110px;
		padding: 20px 15px;
	}

	.kms-dashboard__value {
		font-size: 25px;
	}

	.kms-dashboard__metric-title strong {
		font-size: 15px;
	}

	.kms-dashboard__performance {
		min-height: 205px;
		padding: 21px 18px;
	}
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

	.kms-hero__button,
	.kms-hero__link,
	.kms-hero__button svg,
	.kms-hero__link svg,
	.kms-dashboard__field,
	.kms-dashboard__shield svg {
		transition: none;
	}
}
/* =========================================================
   MAINTENANCE SERVICES
========================================================= */

.kms-care,
.kms-care *,
.kms-care *::before,
.kms-care *::after {
	box-sizing: border-box;
}

.kms-care {
	position: relative;
	padding: 105px 5% 95px;
	overflow: hidden;
	background:
		linear-gradient(
			180deg,
			#070707 0%,
			#030303 100%
		);
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	isolation: isolate;
}

.kms-care::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	opacity: 0.15;
	background-image:
		linear-gradient(
			rgba(212, 175, 55, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.035) 1px,
			transparent 1px
		);
	background-size: 58px 58px;
	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			black 20%,
			black 78%,
			transparent
		);
}

.kms-care__glow {
	position: absolute;
	top: 10%;
	left: 50%;
	z-index: -2;
	width: 700px;
	height: 400px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.055);
	filter: blur(120px);
	transform: translateX(-50%);
	pointer-events: none;
}

.kms-care__container {
	width: min(1360px, 100%);
	margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.kms-care__header {
	max-width: 850px;
	margin: 0 auto 65px;
	text-align: center;
}

.kms-care__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-bottom: 21px;
}

.kms-care__ornament i {
	display: block;
	width: 34px;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(212, 175, 55, 0.65)
		);
}

.kms-care__ornament i:last-child {
	transform: scaleX(-1);
}

.kms-care__ornament b {
	display: block;
	width: 7px;
	height: 7px;
	border: 1px solid #d4af37;
	transform: rotate(45deg);
}

.kms-care__eyebrow {
	display: block;
	margin-bottom: 17px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.kms-care__title {
	margin: 0 0 20px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(43px, 4.5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.kms-care__title span {
	display: block;
	color: #d4af37;
}

.kms-care__intro {
	max-width: 710px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.6);
	font-size: 15px;
	line-height: 1.8;
}

/* =========================================================
   GRID
========================================================= */

.kms-care__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	border-left: 1px solid rgba(255, 255, 255, 0.09);
}

/* =========================================================
   CARD
========================================================= */

.kms-care-card {
	position: relative;
	min-width: 0;
	min-height: 340px;
	margin: 0;
	padding: 43px 40px 40px;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.025),
			rgba(255, 255, 255, 0.005)
		);
	border-right: 1px solid rgba(255, 255, 255, 0.09);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.kms-care-card::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -110px;
	width: 220px;
	height: 220px;
	border: 1px solid rgba(212, 175, 55, 0.09);
	border-radius: 50%;
	opacity: 0;
	transition:
		opacity 0.3s ease,
		transform 0.4s ease;
}

.kms-care-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			#d4af37,
			transparent
		);
	transition: width 0.35s ease;
}

.kms-care-card:hover {
	background-color: rgba(212, 175, 55, 0.027);
	border-color: rgba(212, 175, 55, 0.2);
}

.kms-care-card:hover::before {
	opacity: 1;
	transform: scale(1.08);
}

.kms-care-card:hover::after {
	width: 100%;
}

/* NUMBER */

.kms-care-card__number {
	position: absolute;
	top: 27px;
	right: 30px;
	color: rgba(255, 255, 255, 0.16);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
}

/* ICON */

.kms-care-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin-bottom: 27px;
	border: 1px solid rgba(212, 175, 55, 0.28);
	border-radius: 50%;
	color: #d4af37;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.kms-care-card__icon svg {
	width: 34px;
	height: 34px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kms-care-card:hover .kms-care-card__icon {
	background: #d4af37;
	border-color: #d4af37;
	color: #050505;
	transform: translateY(-3px);
}

/* CONTENT */

.kms-care-card h3 {
	max-width: 330px;
	margin: 0 0 16px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.kms-care-card p {
	position: relative;
	z-index: 2;
	max-width: 350px;
	margin: 0;
	color: rgba(255, 255, 255, 0.56);
	font-size: 14px;
	line-height: 1.75;
}

.kms-care-card__line {
	display: block;
	width: 42px;
	height: 1px;
	margin-top: 25px;
	background: rgba(212, 175, 55, 0.45);
	transition: width 0.3s ease;
}

.kms-care-card:hover .kms-care-card__line {
	width: 70px;
}

/* =========================================================
   BOTTOM NOTE
========================================================= */

.kms-care__bottom {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	margin-top: 38px;
	padding: 28px 33px;
	background: rgba(255, 255, 255, 0.018);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.kms-care__bottom-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 50%;
	color: #d4af37;
}

.kms-care__bottom-icon svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kms-care__bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 14px;
	line-height: 1.6;
}

.kms-care__bottom a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.kms-care__bottom a::after {
	display: none;
}

.kms-care__bottom a svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kms-care__bottom a:hover svg,
.kms-care__bottom a:focus-visible svg {
	transform: translateX(4px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

	.kms-care__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kms-care__bottom {
		grid-template-columns: auto 1fr;
	}

	.kms-care__bottom a {
		grid-column: 2;
		justify-self: start;
	}
}

@media (max-width: 700px) {

	.kms-care {
		padding: 80px 20px 75px;
	}

	.kms-care__header {
		margin-bottom: 48px;
	}

	.kms-care__title {
		font-size: 41px;
	}

	.kms-care__intro {
		font-size: 14px;
		line-height: 1.7;
	}

	.kms-care__grid {
		grid-template-columns: 1fr;
	}

	.kms-care-card {
		min-height: auto;
		padding: 35px 28px 37px;
	}

	.kms-care-card h3 {
		font-size: 24px;
	}

	.kms-care__bottom {
		grid-template-columns: 1fr;
		padding: 27px;
		text-align: center;
	}

	.kms-care__bottom-icon {
		margin: 0 auto;
	}

	.kms-care__bottom a {
		grid-column: auto;
		justify-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kms-care-card,
	.kms-care-card::before,
	.kms-care-card::after,
	.kms-care-card__icon,
	.kms-care-card__line,
	.kms-care__bottom a svg {
		transition: none;
	}
}
/* =========================================================
   PROACTIVE MAINTENANCE — FINAL CTA
========================================================= */

.kms-proactive,
.kms-proactive *,
.kms-proactive *::before,
.kms-proactive *::after {
	box-sizing: border-box;
}

.kms-proactive {
	position: relative;
	padding: 105px 5% 0;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 6% 35%,
			rgba(212, 175, 55, 0.11),
			transparent 31%
		),
		linear-gradient(
			130deg,
			#0b0a07 0%,
			#070706 45%,
			#030303 100%
		);
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
	border-top: 1px solid rgba(212, 175, 55, 0.13);
	isolation: isolate;
}

/* BACKGROUND */

.kms-proactive::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	opacity: 0.17;
	background-image:
		linear-gradient(
			rgba(212, 175, 55, 0.04) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.04) 1px,
			transparent 1px
		);
	background-size: 54px 54px;
	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 45%,
			black
		);
}

.kms-proactive__glow {
	position: absolute;
	top: 10%;
	left: -180px;
	z-index: -2;
	width: 550px;
	height: 550px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.08);
	filter: blur(120px);
	pointer-events: none;
}

.kms-proactive__rings {
	position: absolute;
	top: -170px;
	right: -180px;
	z-index: -2;
	width: 600px;
	height: 600px;
	pointer-events: none;
}

.kms-proactive__rings span {
	position: absolute;
	border: 1px solid rgba(212, 175, 55, 0.09);
	border-radius: 50%;
}

.kms-proactive__rings span:nth-child(1) {
	inset: 0;
}

.kms-proactive__rings span:nth-child(2) {
	inset: 75px;
}

.kms-proactive__rings span:nth-child(3) {
	inset: 150px;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.kms-proactive__container {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(320px, 0.82fr) minmax(500px, 1.18fr);
	align-items: center;
	gap: clamp(75px, 9vw, 150px);
	width: min(1280px, 100%);
	margin: 0 auto;
	padding-bottom: 95px;
}

/* =========================================================
   CONTENT
========================================================= */

.kms-proactive__content {
	max-width: 530px;
}

.kms-proactive__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 23px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.kms-proactive__eyebrow::before {
	content: "";
	display: block;
	width: 36px;
	height: 1px;
	background: #d4af37;
}

.kms-proactive__title {
	margin: 0 0 25px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(48px, 4.6vw, 66px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.038em;
}

.kms-proactive__title span {
	display: block;
	margin-top: 8px;
	color: #d4af37;
}

.kms-proactive__description {
	max-width: 520px;
	margin: 0 0 35px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 15px;
	line-height: 1.8;
}

/* BUTTON */

.kms-proactive__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 56px;
	padding: 0 26px;
	background: #d4af37;
	border: 1px solid #d4af37;
	border-radius: 2px;
	color: #050505;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.kms-proactive__button::after {
	display: none;
}

.kms-proactive__button svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.kms-proactive__button:hover,
.kms-proactive__button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #050505;
	transform: translateY(-2px);
}

.kms-proactive__button:hover svg,
.kms-proactive__button:focus-visible svg {
	transform: translateX(4px);
}

/* =========================================================
   STEPS
========================================================= */

.kms-proactive__steps {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.kms-proactive__steps::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50px;
	width: 1px;
	background:
		linear-gradient(
			to bottom,
			rgba(212, 175, 55, 0.45),
			rgba(212, 175, 55, 0.05)
		);
}

.kms-proactive-step {
	position: relative;
	display: grid;
	grid-template-columns: 38px 66px minmax(0, 1fr);
	align-items: center;
	gap: 27px;
	min-height: 155px;
	padding: 28px 25px 28px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	transition:
		background-color 0.3s ease,
		padding-left 0.3s ease;
}

.kms-proactive-step::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			#d4af37,
			transparent
		);
	transition: width 0.35s ease;
}

.kms-proactive-step:hover {
	padding-left: 17px;
	background: rgba(212, 175, 55, 0.025);
}

.kms-proactive-step:hover::after {
	width: 100%;
}

/* NUMBER */

.kms-proactive-step__number {
	color: rgba(255, 255, 255, 0.22);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
}

/* ICON */

.kms-proactive-step__icon {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	background: #080807;
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 50%;
	color: #d4af37;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}

.kms-proactive-step__icon svg {
	width: 33px;
	height: 33px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kms-proactive-step:hover .kms-proactive-step__icon {
	background: #d4af37;
	border-color: #d4af37;
	color: #050505;
	transform: scale(1.05);
}

/* STEP CONTENT */

.kms-proactive-step__content h3 {
	margin: 0 0 10px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

.kms-proactive-step__content p {
	max-width: 480px;
	margin: 0;
	color: rgba(255, 255, 255, 0.53);
	font-size: 13px;
	line-height: 1.7;
}

/* =========================================================
   LOCATION LINE
========================================================= */

.kms-proactive__location {
	position: relative;
	z-index: 2;
	margin: 0 -5vw;
	background: rgba(0, 0, 0, 0.28);
	border-top: 1px solid rgba(212, 175, 55, 0.16);
}

.kms-proactive__location-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	width: min(1280px, 90%);
	min-height: 76px;
	margin: 0 auto;
	text-align: center;
}

.kms-proactive__location svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #d4af37;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kms-proactive__location p {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.035em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

	.kms-proactive {
		padding-top: 85px;
	}

	.kms-proactive__container {
		grid-template-columns: 1fr;
		gap: 65px;
		padding-bottom: 75px;
	}

	.kms-proactive__content {
		max-width: 760px;
		margin: 0 auto;
		text-align: center;
	}

	.kms-proactive__eyebrow {
		justify-content: center;
	}

	.kms-proactive__description {
		margin-right: auto;
		margin-left: auto;
	}

	.kms-proactive__steps {
		width: min(760px, 100%);
		margin: 0 auto;
	}
}

@media (max-width: 650px) {

	.kms-proactive {
		padding: 72px 20px 0;
	}

	.kms-proactive__container {
		gap: 50px;
		padding-bottom: 62px;
	}

	.kms-proactive__title {
		font-size: 43px;
	}

	.kms-proactive__description {
		font-size: 14px;
		line-height: 1.7;
	}

	.kms-proactive__button {
		width: 100%;
		max-width: 340px;
	}

	.kms-proactive__steps::before {
		display: none;
	}

	.kms-proactive-step {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 19px;
		padding: 27px 5px;
	}

	.kms-proactive-step__number {
		display: none;
	}

	.kms-proactive-step__icon {
		width: 58px;
		height: 58px;
	}

	.kms-proactive-step__icon svg {
		width: 29px;
		height: 29px;
	}

	.kms-proactive-step__content h3 {
		font-size: 21px;
	}

	.kms-proactive__location {
		margin-right: -20px;
		margin-left: -20px;
		padding: 18px 20px;
	}

	.kms-proactive__location-inner {
		align-items: flex-start;
		width: 100%;
		min-height: 0;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kms-proactive__button,
	.kms-proactive__button svg,
	.kms-proactive-step,
	.kms-proactive-step::after,
	.kms-proactive-step__icon {
		transition: none;
	}
}
/* =========================================================
   KOOKA DIGITAL — PRIVACY POLICY
========================================================= */

.kdp-page,
.kdp-page *,
.kdp-page *::before,
.kdp-page *::after {
	box-sizing: border-box;
}

.kdp-page {
	background: #050505;
	color: #ffffff;
	font-family: "Montserrat", Arial, sans-serif;
}

/* =========================================================
   HERO
========================================================= */

.kdp-hero {
	position: relative;
	padding: 115px 5% 90px;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 80% 30%,
			rgba(212, 175, 55, 0.09),
			transparent 30%
		),
		#050505;
	border-bottom: 1px solid rgba(212, 175, 55, 0.15);
	isolation: isolate;
}

.kdp-hero__grid {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -2;
	width: 55%;
	opacity: 0.16;
	background-image:
		linear-gradient(
			rgba(212, 175, 55, 0.055) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(212, 175, 55, 0.055) 1px,
			transparent 1px
		);
	background-size: 52px 52px;
	mask-image: linear-gradient(90deg, transparent, black);
}

.kdp-hero__glow {
	position: absolute;
	top: -250px;
	right: -100px;
	z-index: -1;
	width: 600px;
	height: 600px;
	border: 1px solid rgba(212, 175, 55, 0.09);
	border-radius: 50%;
}

.kdp-hero__glow::before,
.kdp-hero__glow::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(212, 175, 55, 0.055);
	border-radius: inherit;
}

.kdp-hero__glow::before {
	inset: 70px;
}

.kdp-hero__glow::after {
	inset: 140px;
}

.kdp-hero__container {
	position: relative;
	z-index: 2;
	width: min(1250px, 100%);
	margin: 0 auto;
	text-align: center;
}

.kdp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 24px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.23em;
	text-transform: uppercase;
}

.kdp-eyebrow::before,
.kdp-eyebrow::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			transparent,
			#d4af37
		);
}

.kdp-eyebrow::after {
	transform: scaleX(-1);
}

.kdp-hero h1 {
	margin: 0 0 22px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(58px, 7vw, 94px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

.kdp-hero h1 span {
	color: #d4af37;
}

.kdp-hero__container > p {
	max-width: 640px;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 16px;
	line-height: 1.75;
}

.kdp-hero__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: rgba(255, 255, 255, 0.39);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kdp-hero__meta > span:nth-child(2) {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #d4af37;
}

/* =========================================================
   POLICY LAYOUT
========================================================= */

.kdp-policy {
	padding: 95px 5% 110px;
	background:
		linear-gradient(
			180deg,
			#070707,
			#030303
		);
}

.kdp-policy__container {
	display: grid;
	grid-template-columns: 250px minmax(0, 830px);
	justify-content: center;
	align-items: start;
	gap: clamp(65px, 8vw, 120px);
	width: min(1250px, 100%);
	margin: 0 auto;
}

/* =========================================================
   STICKY NAVIGATION
========================================================= */

.kdp-policy__navigation {
	position: sticky;
	top: 135px;
}

.kdp-policy__navigation-inner {
	padding-left: 23px;
	border-left: 1px solid rgba(212, 175, 55, 0.24);
}

.kdp-policy__navigation-label {
	display: block;
	margin-bottom: 22px;
	color: #d4af37;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kdp-policy__navigation nav {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.kdp-policy__navigation a {
	display: block;
	padding: 7px 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.kdp-policy__navigation a::after {
	display: none;
}

.kdp-policy__navigation a:hover,
.kdp-policy__navigation a:focus-visible {
	color: #d4af37;
	transform: translateX(4px);
}

/* =========================================================
   POLICY SECTIONS
========================================================= */

.kdp-policy__content {
	min-width: 0;
}

.kdp-policy-section {
	position: relative;
	padding: 0 0 58px;
	margin: 0 0 58px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.085);
	scroll-margin-top: 140px;
}

.kdp-policy-section:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.kdp-policy-section__number {
	display: block;
	margin-bottom: 13px;
	color: rgba(212, 175, 55, 0.55);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.kdp-policy-section h2 {
	margin: 0 0 25px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(31px, 3vw, 42px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.kdp-policy-section > p {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.9;
}

.kdp-policy-section > p:last-child {
	margin-bottom: 0;
}

.kdp-policy-section a {
	color: #d4af37;
	text-decoration: underline;
	text-decoration-color: rgba(212, 175, 55, 0.35);
	text-underline-offset: 4px;
}

/* LISTS */

.kdp-policy-list {
	display: grid;
	gap: 13px;
	padding: 0;
	margin: 25px 0;
	list-style: none;
}

.kdp-policy-list li {
	position: relative;
	padding-left: 25px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.75;
}

.kdp-policy-list li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 6px;
	height: 6px;
	border: 1px solid #d4af37;
	transform: rotate(45deg);
}

/* NOTE */

.kdp-policy-note {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 16px;
	margin: 28px 0 0;
	padding: 21px 23px;
	background: rgba(212, 175, 55, 0.045);
	border-left: 2px solid #d4af37;
}

.kdp-policy-note svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: #d4af37;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kdp-policy-note p {
	margin: 0;
	color: rgba(255, 255, 255, 0.59);
	font-size: 12px;
	line-height: 1.7;
}

/* THIRD-PARTY GRID */

.kdp-policy-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 30px 0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.kdp-policy-grid article {
	padding: 28px 23px;
	background: #080808;
}

.kdp-policy-grid svg {
	width: 37px;
	height: 37px;
	margin-bottom: 20px;
	fill: none;
	stroke: #d4af37;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kdp-policy-grid h3 {
	margin: 0 0 11px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	font-weight: 500;
}

.kdp-policy-grid p {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	line-height: 1.7;
}

/* CONTACT CARD */

.kdp-contact-card {
	position: relative;
	margin: 29px 0;
	padding: 30px;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			rgba(212, 175, 55, 0.1),
			rgba(255, 255, 255, 0.015)
		);
	border: 1px solid rgba(212, 175, 55, 0.2);
}

.kdp-contact-card::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 220px;
	height: 220px;
	border: 1px solid rgba(212, 175, 55, 0.1);
	border-radius: 50%;
}

.kdp-contact-card > span {
	display: block;
	margin-bottom: 12px;
	color: #d4af37;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.kdp-contact-card h3 {
	margin: 0 0 9px;
	color: #ffffff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 27px;
	font-weight: 500;
}

.kdp-contact-card a {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-bottom: 7px;
}

.kdp-contact-card p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 12px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

	.kdp-policy__container {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.kdp-policy__navigation {
		position: static;
	}

	.kdp-policy__navigation-inner {
		padding: 24px;
		border: 1px solid rgba(212, 175, 55, 0.18);
	}

	.kdp-policy__navigation nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3px 30px;
	}

	.kdp-policy__navigation a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
}

@media (max-width: 700px) {

	.kdp-hero {
		padding: 85px 20px 70px;
	}

	.kdp-hero h1 {
		font-size: 58px;
	}

	.kdp-hero__container > p {
		font-size: 14px;
	}

	.kdp-hero__meta {
		flex-wrap: wrap;
	}

	.kdp-policy {
		padding: 70px 20px 80px;
	}

	.kdp-policy__navigation nav {
		grid-template-columns: 1fr;
	}

	.kdp-policy-section {
		padding-bottom: 45px;
		margin-bottom: 45px;
	}

	.kdp-policy-section h2 {
		font-size: 32px;
	}

	.kdp-policy-grid {
		grid-template-columns: 1fr;
	}

	.kdp-contact-card {
		padding: 25px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kdp-policy__navigation a {
		transition: none;
	}
}
/* =========================================================
   SERVICES — INLINE SVG ICONS
========================================================= */

.services .service-card .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 0 28px;
  color: #d9b631;
  border: 1px solid rgba(217, 182, 49, 0.25);
  background:
    linear-gradient(
      145deg,
      rgba(217, 182, 49, 0.1),
      rgba(217, 182, 49, 0.015)
    );
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 35px rgba(0, 0, 0, 0.18);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.services .service-card .service-icon > svg {
  display: block;
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services .service-card:hover .service-icon {
  color: #f0cf4f;
  border-color: rgba(217, 182, 49, 0.55);
  background:
    linear-gradient(
      145deg,
      rgba(217, 182, 49, 0.17),
      rgba(217, 182, 49, 0.035)
    );
  transform: translateY(-4px);
}

.services .service-card > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.services .service-link-arrow {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.services .service-card > a:hover .service-link-arrow {
  transform: translateX(5px);
}

@media (max-width: 767px) {
  .services .service-card .service-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: 14px;
  }

  .services .service-card .service-icon > svg {
    width: 30px;
    height: 30px;
  }
}
/* =========================================================
   APPROACH — INLINE SVG ICONS
========================================================= */

.approach .approach-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 0 24px;
  color: #d9b631;
  border: 1px solid rgba(217, 182, 49, 0.24);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(217, 182, 49, 0.1),
      rgba(217, 182, 49, 0.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 30px rgba(0, 0, 0, 0.16);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.approach .approach-icon > svg {
  display: block;
  width: 30px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.approach .approach-item:hover .approach-icon {
  color: #f0cf4f;
  border-color: rgba(217, 182, 49, 0.55);
  background:
    linear-gradient(
      145deg,
      rgba(217, 182, 49, 0.17),
      rgba(217, 182, 49, 0.035)
    );
  transform: translateY(-4px);
}

/* Highlight inside the heading */

.approach .approach-left h2 em {
  color: #d9b631;
  font: inherit;
}

/* Text link and SVG arrow */

.approach .approach-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.approach .approach-link > svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.approach .approach-link:hover > svg {
  transform: translateX(5px);
}

@media (max-width: 767px) {
  .approach .approach-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border-radius: 14px;
  }

  .approach .approach-icon > svg {
    width: 28px;
    height: 28px;
  }
}
/* =========================================================
   KOOKA DIGITAL — APPROACH & PROCESS
========================================================= */

.kd-method,
.kd-method * {
  box-sizing: border-box;
}

.kd-method {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: clamp(90px, 9vw, 150px) 24px;
  color: #f4f1e9;
  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(212, 175, 55, 0.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #050505 0%,
      #080806 52%,
      #050505 100%
    );
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.kd-method__glow {
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -160px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.kd-method__glow::before,
.kd-method__glow::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(212, 175, 55, 0.065);
  border-radius: inherit;
}

.kd-method__glow::before {
  inset: 54px;
}

.kd-method__glow::after {
  inset: 112px;
}

.kd-method__container {
  width: min(100%, 1600px);
  margin: 0 auto;
}


/* INTRO */

.kd-method__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.65fr);
  align-items: end;
  gap: clamp(50px, 8vw, 150px);
  padding-bottom: clamp(60px, 7vw, 105px);
}

.kd-method__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  color: #d4af37;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.kd-method__eyebrow::before {
  width: 42px;
  height: 1px;
  content: "";
  background: currentColor;
}

.kd-method__intro h2 {
  max-width: 900px;
  margin: 0;
  color: #f5f2eb;
  font-family: "Playfair Display", serif;
  font-size: clamp(52px, 6vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.kd-method__intro h2 span {
  color: #d4af37;
}

.kd-method__intro-copy {
  max-width: 520px;
  padding-bottom: 8px;
}

.kd-method__intro-copy p {
  margin: 0 0 32px;
  color: #a7a49d;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 400;
  line-height: 1.8;
}

.kd-method__intro-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #d4af37;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-decoration: none;
  text-transform: uppercase;
}

.kd-method__intro-link svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.kd-method__intro-link:hover svg {
  transform: translateX(5px);
}


/* PROCESS GRID */

.kd-method__process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.kd-method-card {
  position: relative;
  min-height: 530px;
  padding: 42px clamp(24px, 2.3vw, 42px) 48px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.008);
  border-right: 1px solid rgba(212, 175, 55, 0.16);
  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}

.kd-method-card:first-child {
  border-left: 1px solid rgba(212, 175, 55, 0.16);
}

.kd-method-card::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(212, 175, 55, 0.14),
      transparent 43%
    );
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.kd-method-card:hover {
  background-color: rgba(212, 175, 55, 0.025);
}

.kd-method-card:hover::before {
  opacity: 1;
}

.kd-method-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(70px, 7vw, 120px);
}

.kd-method-card__number {
  color: rgba(212, 175, 55, 0.58);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
}

.kd-method-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #d4af37;
  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.11),
      rgba(212, 175, 55, 0.015)
    );
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.kd-method-card__icon svg {
  display: block;
  width: 31px;
  height: 31px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kd-method-card:hover .kd-method-card__icon {
  color: #f0cf58;
  border-color: rgba(212, 175, 55, 0.55);
  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.19),
      rgba(212, 175, 55, 0.035)
    );
  transform: translateY(-4px);
}

.kd-method-card__body {
  position: relative;
  z-index: 1;
}

.kd-method-card__label {
  display: block;
  margin-bottom: 18px;
  color: #d4af37;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.kd-method-card h3 {
  max-width: 270px;
  margin: 0 0 22px;
  color: #f2efe8;
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 2.1vw, 36px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.kd-method-card p {
  max-width: 320px;
  margin: 0;
  color: #8f8c86;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

.kd-method-card__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #d4af37;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.kd-method-card:hover .kd-method-card__line {
  transform: scaleX(1);
}


/* FOOTER MESSAGE */

.kd-method__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: clamp(48px, 5vw, 75px);
}

.kd-method__footer p {
  margin: 0;
  color: #aaa69e;
  font-family: "Playfair Display", serif;
  font-size: clamp(23px, 2.4vw, 38px);
  font-weight: 500;
  line-height: 1.3;
}

.kd-method__footer p span {
  color: #f3f0e8;
}

.kd-method__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 58px;
  padding: 0 28px;
  color: #080808;
  background: #d9b631;
  border: 1px solid #d9b631;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.kd-method__button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.kd-method__button:hover {
  color: #d9b631;
  background: transparent;
  transform: translateY(-2px);
}

.kd-method__button:hover svg {
  transform: translateX(4px);
}


/* TABLET */

@media (max-width: 1100px) {
  .kd-method__intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 38px;
  }

  .kd-method__intro-copy {
    max-width: 700px;
  }

  .kd-method__process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kd-method-card {
    min-height: 450px;
  }

  .kd-method-card:nth-child(2) {
    border-right: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-method-card:nth-child(3),
  .kd-method-card:nth-child(4) {
    border-top: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-method-card:nth-child(3) {
    border-left: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-method-card__top {
    margin-bottom: 70px;
  }
}


/* MOBILE */

@media (max-width: 700px) {
  .kd-method {
    padding: 76px 18px;
  }

  .kd-method__intro {
    padding-bottom: 54px;
  }

  .kd-method__eyebrow {
    margin-bottom: 22px;
    font-size: 11px;
  }

  .kd-method__intro h2 {
    font-size: clamp(44px, 13vw, 64px);
    line-height: 1.02;
  }

  .kd-method__intro-copy p {
    font-size: 16px;
    line-height: 1.7;
  }

  .kd-method__process {
    display: block;
    border-bottom: 0;
  }

  .kd-method-card,
  .kd-method-card:first-child,
  .kd-method-card:nth-child(3) {
    min-height: 0;
    padding: 32px 24px 38px;
    border-top: 0;
    border-right: 1px solid rgba(212, 175, 55, 0.16);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
    border-left: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-method-card__top {
    align-items: center;
    margin-bottom: 48px;
  }

  .kd-method-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .kd-method-card__icon svg {
    width: 28px;
    height: 28px;
  }

  .kd-method-card h3 {
    max-width: none;
    font-size: 29px;
  }

  .kd-method-card p {
    max-width: none;
  }

  .kd-method__footer {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 50px;
  }

  .kd-method__button {
    width: 100%;
  }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .kd-method-card,
  .kd-method-card::before,
  .kd-method-card__icon,
  .kd-method-card__line,
  .kd-method__intro-link svg,
  .kd-method__button,
  .kd-method__button svg {
    transition: none;
  }
}
/* =========================================================
   HOME — CAPABILITIES
========================================================= */

.kd-capabilities,
.kd-capabilities * {
  box-sizing: border-box;
}

.kd-capabilities {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: clamp(90px, 8vw, 145px) 24px;
  color: #f4f1e9;
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(214, 177, 55, 0.13),
      transparent 36%
    ),
    linear-gradient(180deg, #050505 0%, #080806 55%, #050505 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.kd-capabilities__glow {
  position: absolute;
  z-index: -1;
  top: 70px;
  left: 50%;
  width: min(1100px, 85vw);
  height: 300px;
  background: rgba(212, 175, 55, 0.055);
  filter: blur(120px);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.kd-capabilities__container {
  width: min(100%, 1600px);
  margin: 0 auto;
}


/* HEADER */

.kd-capabilities__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  align-items: end;
  gap: 60px;
  margin-bottom: clamp(54px, 6vw, 90px);
}

.kd-capabilities__eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  margin-bottom: -28px;
  color: #d4af37;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.kd-capabilities__eyebrow::before {
  width: 38px;
  height: 1px;
  content: "";
  background: currentColor;
}

.kd-capabilities__header h2 {
  margin: 0;
  color: #f5f2eb;
  font-family: "Playfair Display", serif;
  font-size: clamp(48px, 5.3vw, 88px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.045em;
}

.kd-capabilities__header h2 span {
  color: #d4af37;
}

.kd-capabilities__header > p {
  max-width: 490px;
  margin: 0 0 8px;
  color: #96938d;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.75;
}


/* GRID */

.kd-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(212, 175, 55, 0.23);
  border-bottom: 1px solid rgba(212, 175, 55, 0.23);
}

.kd-capability-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 590px;
  padding: 30px clamp(24px, 2.2vw, 38px) 32px;
  overflow: hidden;
  flex-direction: column;
  color: inherit;
  background: rgba(255, 255, 255, 0.008);
  border-right: 1px solid rgba(212, 175, 55, 0.16);
  text-decoration: none;
  transition:
    background-color 0.4s ease,
    transform 0.4s ease;
}

.kd-capability-card:first-child {
  border-left: 1px solid rgba(212, 175, 55, 0.16);
}

.kd-capability-card::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(212, 175, 55, 0.17),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(212, 175, 55, 0.035),
      transparent 48%
    );
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.kd-capability-card::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    #d4af37,
    #f3d569,
    transparent
  );
  transform: scaleX(0);
  transition: transform 0.45s ease;
}

.kd-capability-card:hover {
  color: inherit;
  background-color: rgba(212, 175, 55, 0.025);
}

.kd-capability-card:hover::before {
  opacity: 1;
}

.kd-capability-card:hover::after {
  transform: scaleX(1);
}


/* NUMBER */

.kd-capability-card__number {
  position: relative;
  z-index: 2;
  color: rgba(212, 175, 55, 0.52);
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}


/* VISUAL */

.kd-capability-card__visual {
  position: relative;
  z-index: 1;
  display: flex;
  height: 205px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px;
}

.kd-capability-card__icon {
  position: relative;
  z-index: 2;
  display: flex;
  width: 108px;
  height: 108px;
  align-items: center;
  justify-content: center;
  color: #d9b631;
  background:
    linear-gradient(
      145deg,
      rgba(212, 175, 55, 0.16),
      rgba(212, 175, 55, 0.025)
    );
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 25px 60px rgba(0, 0, 0, 0.35),
    0 0 45px rgba(212, 175, 55, 0.06);
  transform: rotate(-3deg);
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kd-capability-card:nth-child(even) .kd-capability-card__icon {
  transform: rotate(3deg);
}

.kd-capability-card__icon svg {
  display: block;
  width: 54px;
  height: 54px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kd-capability-card__orbit {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(212, 175, 55, 0.13);
  border-radius: 50%;
  transition:
    border-color 0.4s ease,
    transform 0.7s ease;
}

.kd-capability-card__orbit::before,
.kd-capability-card__orbit::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(212, 175, 55, 0.08);
  border-radius: 50%;
}

.kd-capability-card__orbit::before {
  inset: -18px;
}

.kd-capability-card__orbit::after {
  inset: 17px;
}

.kd-capability-card:hover .kd-capability-card__icon {
  color: #f1d25b;
  border-color: rgba(226, 190, 68, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.42),
    0 0 65px rgba(212, 175, 55, 0.15);
  transform: translateY(-10px) rotate(0deg) scale(1.04);
}

.kd-capability-card:hover .kd-capability-card__orbit {
  border-color: rgba(212, 175, 55, 0.3);
  transform: rotate(90deg) scale(1.07);
}


/* CONTENT */

.kd-capability-card__content {
  position: relative;
  z-index: 2;
  flex: 1;
}

.kd-capability-card__category {
  display: block;
  margin-bottom: 13px;
  color: #d4af37;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kd-capability-card h3 {
  margin: 0 0 20px;
  color: #f3f0e9;
  font-family: "Playfair Display", serif;
  font-size: clamp(27px, 2.1vw, 37px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  transition: color 0.3s ease;
}

.kd-capability-card:hover h3 {
  color: #ffffff;
}

.kd-capability-card p {
  max-width: 290px;
  margin: 0;
  color: #898680;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}


/* FOOTER */

.kd-capability-card__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding-top: 24px;
  color: #b8b4ac;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.kd-capability-card__arrow {
  display: flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 50%;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.kd-capability-card__arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kd-capability-card:hover .kd-capability-card__arrow {
  color: #080808;
  background: #d9b631;
  border-color: #d9b631;
  transform: translateX(5px);
}


/* TABLET */

@media (max-width: 1100px) {
  .kd-capabilities__header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .kd-capabilities__eyebrow {
    margin-bottom: 0;
  }

  .kd-capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kd-capability-card {
    min-height: 555px;
  }

  .kd-capability-card:nth-child(3),
  .kd-capability-card:nth-child(4) {
    border-top: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-capability-card:nth-child(3) {
    border-left: 1px solid rgba(212, 175, 55, 0.16);
  }
}


/* MOBILE */

@media (max-width: 650px) {
  .kd-capabilities {
    padding: 74px 18px;
  }

  .kd-capabilities__header {
    margin-bottom: 46px;
  }

  .kd-capabilities__header h2 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .kd-capabilities__grid {
    display: block;
    border-bottom: 0;
  }

  .kd-capability-card,
  .kd-capability-card:first-child,
  .kd-capability-card:nth-child(3) {
    min-height: 0;
    padding: 26px 24px 28px;
    border-top: 0;
    border-right: 1px solid rgba(212, 175, 55, 0.16);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
    border-left: 1px solid rgba(212, 175, 55, 0.16);
  }

  .kd-capability-card__visual {
    height: 170px;
  }

  .kd-capability-card__icon {
    width: 96px;
    height: 96px;
    border-radius: 26px;
  }

  .kd-capability-card__icon svg {
    width: 48px;
    height: 48px;
  }

  .kd-capability-card__orbit {
    width: 132px;
    height: 132px;
  }

  .kd-capability-card h3 {
    font-size: 32px;
  }

  .kd-capability-card p {
    max-width: none;
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .kd-capability-card,
  .kd-capability-card::before,
  .kd-capability-card::after,
  .kd-capability-card__icon,
  .kd-capability-card__orbit,
  .kd-capability-card__arrow {
    transition: none;
  }
}
/* =========================================================
   HOME — COMPACT SERVICES STRIP
========================================================= */

.kd-service-strip,
.kd-service-strip * {
  box-sizing: border-box;
}

.kd-service-strip {
  position: relative;
  width: 100%;
  padding: 0 24px;
  background: #050505;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}

.kd-service-strip::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(76%, 1450px);
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.7),
    transparent
  );
  transform: translateX(-50%);
}

.kd-service-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1600px);
  min-height: 160px;
  margin: 0 auto;
}

.kd-service-strip__item {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 30px clamp(20px, 2vw, 36px);
  overflow: hidden;
  color: #e9e6df;
  border-right: 1px solid rgba(255, 255, 255, 0.075);
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.kd-service-strip__item:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.075);
}

.kd-service-strip__item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: #d4af37;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.kd-service-strip__item:hover {
  color: #ffffff;
  background: rgba(212, 175, 55, 0.045);
}

.kd-service-strip__item:hover::after {
  transform: scaleX(1);
}


/* ICON */

.kd-service-strip__icon {
  display: flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.kd-service-strip__icon svg {
  display: block;
  width: 52px;
  height: 52px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kd-service-strip__item:hover .kd-service-strip__icon {
  color: #efd05c;
  transform: translateY(-3px);
}


/* TEXT */

.kd-service-strip__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.kd-service-strip__text small {
  color: rgba(212, 175, 55, 0.72);
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
}

.kd-service-strip__text strong {
  overflow: hidden;
  color: inherit;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ARROW */

.kd-service-strip__arrow {
  color: rgba(212, 175, 55, 0.7);
  font-family: Arial, sans-serif;
  font-size: 19px;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.kd-service-strip__item:hover .kd-service-strip__arrow {
  color: #efd05c;
  transform: translateX(5px);
}


/* TABLET */

@media (max-width: 1050px) {
  .kd-service-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kd-service-strip__item {
    min-height: 125px;
  }

  .kd-service-strip__item:nth-child(3),
  .kd-service-strip__item:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, 0.075);
  }

  .kd-service-strip__item:nth-child(3) {
    border-left: 1px solid rgba(255, 255, 255, 0.075);
  }
}


/* MOBILE */

@media (max-width: 600px) {
  .kd-service-strip {
    padding: 0 18px;
  }

  .kd-service-strip__inner {
    display: block;
    min-height: 0;
  }

  .kd-service-strip__item,
  .kd-service-strip__item:first-child,
  .kd-service-strip__item:nth-child(3) {
    grid-template-columns: 50px minmax(0, 1fr) 20px;
    min-height: 92px;
    padding: 17px 12px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    border-left: 0;
  }

  .kd-service-strip__item:last-child {
    border-bottom: 0;
  }

  .kd-service-strip__icon {
    width: 48px;
    height: 48px;
  }

  .kd-service-strip__icon svg {
    width: 46px;
    height: 46px;
  }

  .kd-service-strip__text strong {
    font-size: 15px;
  }
}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .kd-service-strip__item,
  .kd-service-strip__item::after,
  .kd-service-strip__icon,
  .kd-service-strip__arrow {
    transition: none;
  }
}
/* =========================================================
   OUR PROCESS — REPLACEMENT SVG ICONS
========================================================= */

.kooka-process .kp-svg {
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.kooka-process .kp-svg--small {
  width: 16px;
  height: 16px;
}

.kooka-process .kp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kooka-process .kp-svg--process {
  width: 30px;
  height: 30px;
}

.kooka-process .kp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kooka-process .kp-svg--arrow {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

.kooka-process .kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kooka-process .kp-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kooka-process .kp-svg--check {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
.web-services-clean {
  background: transparent !important;
}
/* =========================================================
   ECOMMERCE — INLINE SVG ICONS
========================================================= */

.ecom-block .bottom .item .ecom-item-icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    overflow: visible;
    color: #d4af37;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kd-blog-premium{
  background:#070707;
  color:#f5f2ea;
  font-family:inherit;
  overflow:hidden;
}

.kd-blog-premium *,
.kd-blog-premium *::before,
.kd-blog-premium *::after{
  box-sizing:border-box;
}


/* HERO
========================================================== */

.kd-hero-premium{
  min-height:78vh;
  display:flex;
  align-items:center;
  padding:140px 8% 100px;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.78) 42%,
      rgba(0,0,0,.25) 72%,
      rgba(0,0,0,.35) 100%
    ),
    url("https://kookadigital.com.au/wp-content/uploads/2026/07/website-cost-southern-highlands-2026.webp");
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(212,175,55,.25);
}

.kd-hero-content{
  max-width:1050px;
}

.kd-eyebrow{
  display:inline-block;
  color:#d4af37;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:30px;
}

.kd-hero-premium h1{
  max-width:1050px;
  margin:0 0 34px;
  color:#fff;
  font-size:clamp(46px,6.3vw,90px);
  font-weight:600;
  line-height:.98;
}

.kd-hero-premium p{
  max-width:790px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:21px;
  line-height:1.8;
}


/* ARTICLE
========================================================== */

.kd-article-wrap{
  max-width:1120px;
  margin:0 auto;
  padding:110px 30px 130px;
}

.kd-intro-card{
  margin-bottom:100px;
  padding:46px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:34px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.015)
    );
}

.kd-intro-card p{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.65;
}

.kd-intro-card strong{
  color:#d4af37;
  font-weight:600;
}

.kd-section{
  position:relative;
  margin:110px 0;
}

.kd-number{
  display:block;
  margin-bottom:18px;
  color:#d4af37;
  font-size:14px;
  letter-spacing:3px;
}

.kd-section h2{
  margin:0 0 28px;
  color:#fff;
  font-size:clamp(34px,4.5vw,58px);
  font-weight:500;
  line-height:1.08;
}

.kd-section > p{
  max-width:880px;
  color:rgba(255,255,255,.68);
  font-size:21px;
  line-height:1.9;
}

.kd-small-note{
  margin-top:30px;
  font-size:15px !important;
  color:rgba(255,255,255,.48) !important;
}


/* LIST BOX
========================================================== */

.kd-list-box{
  margin-top:42px;
  padding:38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:#101010;
}

.kd-list-box h3,
.kd-split h3{
  margin:0 0 22px;
  color:#fff;
  font-size:24px;
}

.kd-list-box ul,
.kd-split ul,
.kd-price-card ul{
  margin:0;
  padding-left:22px;
}

.kd-list-box li,
.kd-split li,
.kd-price-card li{
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1.9;
}


/* STATEMENT
========================================================== */

.kd-statement{
  margin:90px 0;
  padding:55px;
  border-radius:36px;
  background:linear-gradient(135deg,#d4af37,#8d6f1f);
}

.kd-statement p{
  margin:0;
  color:#070707;
  font-size:36px;
  font-weight:600;
  line-height:1.3;
}


/* PRICE CARDS
========================================================== */

.kd-price-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:52px;
}

.kd-price-card{
  position:relative;
  padding:42px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:30px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.015)
    );
}

.kd-price-card--featured{
  border-color:rgba(212,175,55,.5);
  background:
    linear-gradient(
      145deg,
      rgba(212,175,55,.14),
      rgba(255,255,255,.02)
    );
}

.kd-price-card--featured::before{
  content:"";
  position:absolute;
  top:-100px;
  right:-100px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(212,175,55,.16);
  filter:blur(60px);
}

.kd-price-label{
  display:block;
  margin-bottom:20px;
  color:#d4af37;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-price-card h3{
  position:relative;
  margin:0 0 20px;
  color:#fff;
  font-size:36px;
  font-weight:500;
}

.kd-price-card p{
  position:relative;
  min-height:84px;
  margin:0 0 24px;
  color:rgba(255,255,255,.62);
  font-size:17px;
  line-height:1.7;
}


/* FEATURE GRID
========================================================== */

.kd-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:50px;
}

.kd-card{
  min-height:270px;
  padding:38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:#101010;
}

.kd-card i{
  margin-bottom:26px;
  color:#d4af37;
  font-size:32px;
}

.kd-card h3{
  margin:0 0 16px;
  color:#fff;
  font-size:23px;
}

.kd-card p{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:17px;
  line-height:1.7;
}


/* SPLIT CONTENT
========================================================== */

.kd-split{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:34px;
  align-items:stretch;
  margin-top:48px;
}

.kd-split > div,
.kd-split > blockquote{
  margin:0;
  padding:40px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:#101010;
}

.kd-quote{
  display:flex;
  align-items:center;
  color:#d4af37;
  font-size:29px;
  font-style:normal;
  line-height:1.45;
}


/* ONGOING COSTS
========================================================== */

.kd-cost-list{
  margin-top:48px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:30px;
  overflow:hidden;
  background:#101010;
}

.kd-cost-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
  padding:26px 32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.kd-cost-row:last-child{
  border-bottom:0;
}

.kd-cost-row span{
  color:rgba(255,255,255,.72);
  font-size:18px;
}

.kd-cost-row strong{
  color:#d4af37;
  font-size:17px;
  font-weight:500;
  text-align:right;
}


/* TAGS
========================================================== */

.kd-tags{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}

.kd-tags span{
  padding:14px 22px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-size:15px;
}


/* FAQ
========================================================== */

.kd-faq-list{
  display:grid;
  gap:16px;
  margin-top:46px;
}

.kd-faq-item{
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:#101010;
  transition:border-color .3s ease;
}

.kd-faq-item[open]{
  border-color:rgba(212,175,55,.4);
}

.kd-faq-item summary{
  position:relative;
  padding:25px 65px 25px 28px;
  color:#fff;
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}

.kd-faq-item summary::-webkit-details-marker{
  display:none;
}

.kd-faq-item summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:27px;
  color:#d4af37;
  font-size:30px;
  font-weight:300;
  transform:translateY(-50%);
}

.kd-faq-item[open] summary::after{
  content:"−";
}

.kd-faq-item p{
  max-width:880px;
  margin:0;
  padding:0 28px 28px;
  color:rgba(255,255,255,.64);
  font-size:17px;
  line-height:1.8;
}


/* FINAL CTA
========================================================== */

.kd-final-cta{
  margin-top:130px;
  padding:70px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:42px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(212,175,55,.16),
      transparent 48%
    ),
    linear-gradient(145deg,#141414,#090909);
}

.kd-final-cta span{
  color:#d4af37;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-final-cta h2{
  max-width:850px;
  margin:24px auto 24px;
  color:#fff;
  font-size:clamp(34px,5vw,62px);
  font-weight:500;
  line-height:1.08;
}

.kd-final-cta p{
  max-width:720px;
  margin:0 auto 36px;
  color:rgba(255,255,255,.65);
  font-size:18px;
  line-height:1.75;
}

.kd-final-cta a{
  display:inline-block;
  padding:18px 38px;
  border:1px solid #d4af37;
  border-radius:999px;
  background:#d4af37;
  color:#070707;
  font-weight:600;
  text-decoration:none;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.kd-final-cta a:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(212,175,55,.25);
}


/* RESPONSIVE
========================================================== */

@media(max-width:900px){

  .kd-grid,
  .kd-split{
    grid-template-columns:1fr;
  }

  .kd-price-grid{
    grid-template-columns:1fr;
  }

  .kd-hero-premium{
    min-height:70vh;
    padding:120px 26px 80px;
    background-position:62% center;
  }

  .kd-article-wrap{
    padding:80px 22px 100px;
  }

  .kd-intro-card,
  .kd-statement,
  .kd-final-cta{
    padding:34px;
  }

  .kd-intro-card p,
  .kd-statement p{
    font-size:24px;
  }

  .kd-price-card p{
    min-height:0;
  }

}


@media(max-width:600px){

  .kd-hero-premium{
    min-height:620px;
    align-items:flex-end;
    padding:120px 22px 58px;
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.82) 52%,
        rgba(0,0,0,.34) 100%
      ),
      url("https://kookadigital.com.au/wp-content/uploads/2026/07/website-cost-southern-highlands-2026.webp");
    background-size:cover;
    background-position:62% center;
  }

  .kd-eyebrow{
    margin-bottom:20px;
    font-size:11px;
    line-height:1.6;
  }

  .kd-hero-premium h1{
    margin-bottom:24px;
    font-size:41px;
    line-height:1.02;
  }

  .kd-hero-premium p,
  .kd-section > p{
    font-size:18px;
  }

  .kd-section{
    margin:80px 0;
  }

  .kd-section h2{
    font-size:36px;
  }

  .kd-list-box,
  .kd-price-card,
  .kd-card,
  .kd-split > div,
  .kd-split > blockquote{
    padding:28px;
    border-radius:24px;
  }

  .kd-price-card h3{
    font-size:30px;
  }

  .kd-cost-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:23px;
  }

  .kd-cost-row strong{
    text-align:left;
  }

  .kd-final-cta{
    border-radius:28px;
  }

  .kd-final-cta h2{
    font-size:34px;
  }

}
/* ==========================================================
   KOOKA DIGITAL — LOCAL SEO ARTICLE
========================================================== */

.kd-local-seo{
  --kd-gold:#d4af37;
  --kd-gold-dark:#8d6f1f;
  --kd-black:#070707;
  --kd-panel:#101010;
  --kd-white:#ffffff;
  --kd-border:rgba(255,255,255,.09);
  --kd-muted:rgba(255,255,255,.68);

  background:var(--kd-black);
  color:#f5f2ea;
  font-family:inherit;
  overflow:hidden;
}

.kd-local-seo *,
.kd-local-seo *::before,
.kd-local-seo *::after{
  box-sizing:border-box;
}


/* HERO
========================================================== */

.kd-local-seo__hero{
  min-height:78vh;
  display:flex;
  align-items:center;
  padding:140px 8% 100px;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.82) 38%,
      rgba(0,0,0,.25) 70%,
      rgba(0,0,0,.18) 100%
    ),

    /* REPLACE THIS URL WITH THE WORDPRESS IMAGE URL */
    url("/wp-content/uploads/2026/07/local-seo-southern-highlands-google-search.webp");

  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(212,175,55,.25);
}

.kd-local-seo__hero-inner{
  width:100%;
  max-width:1080px;
}

.kd-local-seo__eyebrow{
  display:inline-block;
  margin-bottom:28px;
  color:var(--kd-gold);
  font-size:13px;
  letter-spacing:3px;
  line-height:1.5;
  text-transform:uppercase;
}

.kd-local-seo__hero h1{
  max-width:1080px;
  margin:0 0 34px;
  color:var(--kd-white);
  font-size:clamp(46px,6.2vw,88px);
  font-weight:600;
  line-height:.99;
  letter-spacing:-1.8px;
}

.kd-local-seo__hero p{
  max-width:800px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:21px;
  line-height:1.8;
}


/* MAIN CONTENT
========================================================== */

.kd-local-seo__content{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:110px 30px 130px;
}


/* INTRODUCTION
========================================================== */

.kd-local-seo__intro{
  margin-bottom:38px;
  padding:48px;
  border:1px solid rgba(212,175,55,.26);
  border-radius:34px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.015)
    );
}

.kd-local-seo__intro p{
  margin:0 0 20px;
  color:var(--kd-white);
  font-size:20px;
  line-height:1.65;
}

.kd-local-seo__intro p:last-child{
  margin-bottom:0;
}


/* QUICK ANSWER
========================================================== */

.kd-local-seo__answer{
  margin:0 0 110px;
  padding:34px 38px;
  border-left:4px solid var(--kd-gold);
  border-radius:0 24px 24px 0;
  background:rgba(212,175,55,.08);
}

.kd-local-seo__answer span{
  display:block;
  margin-bottom:12px;
  color:var(--kd-gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-local-seo__answer p{
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:19px;
  line-height:1.75;
}


/* GENERAL ARTICLE SECTION
========================================================== */

.kd-local-seo__section{
  position:relative;
  margin:115px 0;
}

.kd-local-seo__number{
  display:block;
  margin-bottom:18px;
  color:var(--kd-gold);
  font-size:14px;
  letter-spacing:3px;
}

.kd-local-seo__section h2{
  max-width:940px;
  margin:0 0 30px;
  color:var(--kd-white);
  font-size:clamp(34px,4.5vw,58px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.8px;
}

.kd-local-seo__section > p{
  max-width:900px;
  margin:0 0 24px;
  color:var(--kd-muted);
  font-size:20px;
  line-height:1.9;
}


/* SEARCH EXAMPLES
========================================================== */

.kd-local-seo__example{
  margin:44px 0;
  padding:38px;
  border:1px solid var(--kd-border);
  border-radius:28px;
  background:var(--kd-panel);
}

.kd-local-seo__example > span{
  display:block;
  margin-bottom:25px;
  color:var(--kd-white);
  font-size:23px;
  font-weight:500;
}

.kd-local-seo__example ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.kd-local-seo__example li{
  position:relative;
  padding:17px 20px 17px 48px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.72);
  font-size:17px;
}

.kd-local-seo__example li::before{
  content:"";
  position:absolute;
  top:50%;
  left:20px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--kd-gold);
  transform:translateY(-50%);
  box-shadow:0 0 14px rgba(212,175,55,.45);
}


/* GOLD STATEMENT
========================================================== */

.kd-local-seo__statement{
  margin:100px 0;
  padding:56px;
  border-radius:36px;
  background:linear-gradient(135deg,var(--kd-gold),var(--kd-gold-dark));
}

.kd-local-seo__statement p{
  max-width:950px;
  margin:0;
  color:#070707;
  font-size:35px;
  font-weight:600;
  line-height:1.32;
}


/* BENEFITS
========================================================== */

.kd-local-seo__benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:50px;
}

.kd-local-seo__benefit{
  min-height:265px;
  padding:38px;
  border:1px solid var(--kd-border);
  border-radius:30px;
  background:var(--kd-panel);
}

.kd-local-seo__benefit i{
  margin-bottom:26px;
  color:var(--kd-gold);
  font-size:32px;
}

.kd-local-seo__benefit h3{
  margin:0 0 16px;
  color:var(--kd-white);
  font-size:23px;
}

.kd-local-seo__benefit p{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:17px;
  line-height:1.75;
}


/* GOOGLE PROFILE CHECKLIST
========================================================== */

.kd-local-seo__checklist{
  margin:48px 0 36px;
  border:1px solid var(--kd-border);
  border-radius:30px;
  overflow:hidden;
  background:var(--kd-panel);
}

.kd-local-seo__checklist-heading{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding:28px 32px;
  border-bottom:1px solid var(--kd-border);
  background:rgba(212,175,55,.075);
}

.kd-local-seo__checklist-heading span{
  color:var(--kd-gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-local-seo__checklist-heading strong{
  color:var(--kd-white);
  font-size:18px;
  font-weight:500;
}

.kd-local-seo__checklist ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.kd-local-seo__checklist li{
  position:relative;
  padding:25px 28px 25px 62px;
  border-right:1px solid var(--kd-border);
  border-bottom:1px solid var(--kd-border);
  color:rgba(255,255,255,.7);
  font-size:17px;
  line-height:1.65;
}

.kd-local-seo__checklist li:nth-child(even){
  border-right:0;
}

.kd-local-seo__checklist li::before{
  content:"✓";
  position:absolute;
  top:25px;
  left:28px;
  color:var(--kd-gold);
  font-size:18px;
  font-weight:700;
}


/* NAP
========================================================== */

.kd-local-seo__nap{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:48px 0;
}

.kd-local-seo__nap > div{
  padding:34px;
  border:1px solid var(--kd-border);
  border-radius:26px;
  background:var(--kd-panel);
}

.kd-local-seo__nap > div > span{
  display:flex;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  border-radius:50%;
  background:var(--kd-gold);
  color:#070707;
  font-size:20px;
  font-weight:700;
}

.kd-local-seo__nap strong{
  display:block;
  margin-bottom:10px;
  color:var(--kd-white);
  font-size:23px;
}

.kd-local-seo__nap p{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:16px;
  line-height:1.65;
}


/* SPLIT SECTION
========================================================== */

.kd-local-seo__split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  margin:48px 0;
}

.kd-local-seo__split > div,
.kd-local-seo__split blockquote{
  margin:0;
  padding:40px;
  border:1px solid var(--kd-border);
  border-radius:30px;
  background:var(--kd-panel);
}

.kd-local-seo__split h3{
  margin:0 0 24px;
  color:var(--kd-white);
  font-size:24px;
}

.kd-local-seo__split ul{
  margin:0;
  padding-left:22px;
}

.kd-local-seo__split li{
  color:rgba(255,255,255,.7);
  font-size:17px;
  line-height:1.95;
}

.kd-local-seo__split blockquote{
  display:flex;
  align-items:center;
  color:var(--kd-gold);
  font-size:28px;
  font-style:normal;
  line-height:1.5;
}


/* SERVICE PAGE COMPARISON
========================================================== */

.kd-local-seo__comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin-top:48px;
}

.kd-local-seo__comparison-card{
  padding:40px;
  border:1px solid var(--kd-border);
  border-radius:30px;
  background:var(--kd-panel);
}

.kd-local-seo__comparison-card--weak{
  opacity:.72;
}

.kd-local-seo__comparison-card--strong{
  border-color:rgba(212,175,55,.42);
  background:
    linear-gradient(
      145deg,
      rgba(212,175,55,.12),
      rgba(255,255,255,.02)
    );
}

.kd-local-seo__comparison-card > span{
  display:block;
  margin-bottom:18px;
  color:var(--kd-gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-local-seo__comparison-card h3{
  margin:0 0 22px;
  color:var(--kd-white);
  font-size:26px;
  line-height:1.3;
}

.kd-local-seo__comparison-card ul{
  margin:0;
  padding-left:22px;
}

.kd-local-seo__comparison-card li{
  color:rgba(255,255,255,.68);
  font-size:17px;
  line-height:1.9;
}


/* LOCATIONS
========================================================== */

.kd-local-seo__locations{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:40px 0;
}

.kd-local-seo__locations span{
  padding:14px 22px;
  border:1px solid rgba(212,175,55,.27);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.78);
  font-size:15px;
}


/* REVIEW BLOCK
========================================================== */

.kd-local-seo__review-box{
  margin-top:48px;
  padding:45px;
  border:1px solid rgba(212,175,55,.3);
  border-radius:30px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(212,175,55,.14),
      transparent 38%
    ),
    var(--kd-panel);
}

.kd-local-seo__stars{
  display:flex;
  gap:7px;
  margin-bottom:24px;
  color:var(--kd-gold);
  font-size:21px;
}

.kd-local-seo__review-box h3{
  margin:0 0 16px;
  color:var(--kd-white);
  font-size:27px;
}

.kd-local-seo__review-box p{
  max-width:790px;
  margin:0;
  color:rgba(255,255,255,.64);
  font-size:18px;
  line-height:1.8;
}

.kd-local-seo__list-box{
  margin-top:25px;
  padding:38px;
  border:1px solid var(--kd-border);
  border-radius:28px;
  background:var(--kd-panel);
}

.kd-local-seo__list-box h3{
  margin:0 0 22px;
  color:var(--kd-white);
  font-size:23px;
}

.kd-local-seo__list-box ul{
  margin:0;
  padding-left:22px;
}

.kd-local-seo__list-box li{
  color:rgba(255,255,255,.7);
  font-size:17px;
  line-height:1.95;
}


/* WEBSITE PERFORMANCE
========================================================== */

.kd-local-seo__performance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:48px;
}

.kd-local-seo__performance article{
  padding:34px;
  border:1px solid var(--kd-border);
  border-radius:26px;
  background:var(--kd-panel);
}

.kd-local-seo__performance i{
  margin-bottom:22px;
  color:var(--kd-gold);
  font-size:29px;
}

.kd-local-seo__performance h3{
  margin:0 0 12px;
  color:var(--kd-white);
  font-size:23px;
}

.kd-local-seo__performance p{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:16px;
  line-height:1.7;
}


/* AUTHORITY GRID
========================================================== */

.kd-local-seo__authority-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:48px;
}

.kd-local-seo__authority-grid > div{
  min-height:190px;
  padding:30px;
  border:1px solid var(--kd-border);
  border-radius:24px;
  background:var(--kd-panel);
}

.kd-local-seo__authority-grid span{
  display:block;
  margin-bottom:30px;
  color:var(--kd-gold);
  font-size:13px;
  letter-spacing:2px;
}

.kd-local-seo__authority-grid p{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:17px;
  line-height:1.7;
}


/* METRICS
========================================================== */

.kd-local-seo__metrics{
  margin-top:48px;
  border:1px solid var(--kd-border);
  border-radius:30px;
  overflow:hidden;
  background:var(--kd-panel);
}

.kd-local-seo__metrics > div{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:30px;
  padding:27px 32px;
  border-bottom:1px solid var(--kd-border);
}

.kd-local-seo__metrics > div:last-child{
  border-bottom:0;
}

.kd-local-seo__metrics strong{
  color:var(--kd-gold);
  font-size:17px;
  font-weight:500;
}

.kd-local-seo__metrics span{
  color:rgba(255,255,255,.64);
  font-size:17px;
}


/* SEO TIMELINE
========================================================== */

.kd-local-seo__timeline{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:48px;
}

.kd-local-seo__timeline > div{
  position:relative;
  padding:36px;
  border:1px solid var(--kd-border);
  border-radius:28px;
  background:var(--kd-panel);
}

.kd-local-seo__timeline > div::before{
  content:"";
  position:absolute;
  top:0;
  left:36px;
  width:58px;
  height:3px;
  background:var(--kd-gold);
}

.kd-local-seo__timeline span{
  display:block;
  margin-bottom:26px;
  color:var(--kd-gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-local-seo__timeline h3{
  margin:0 0 15px;
  color:var(--kd-white);
  font-size:23px;
  line-height:1.3;
}

.kd-local-seo__timeline p{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:16px;
  line-height:1.7;
}


/* FAQ
========================================================== */

.kd-local-seo__faq-list{
  display:grid;
  gap:16px;
  margin-top:46px;
}

.kd-local-seo__faq details{
  border:1px solid var(--kd-border);
  border-radius:22px;
  background:var(--kd-panel);
  transition:border-color .3s ease;
}

.kd-local-seo__faq details[open]{
  border-color:rgba(212,175,55,.42);
}

.kd-local-seo__faq summary{
  position:relative;
  padding:25px 65px 25px 28px;
  color:var(--kd-white);
  font-size:19px;
  font-weight:500;
  line-height:1.45;
  cursor:pointer;
  list-style:none;
}

.kd-local-seo__faq summary::-webkit-details-marker{
  display:none;
}

.kd-local-seo__faq summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:27px;
  color:var(--kd-gold);
  font-size:30px;
  font-weight:300;
  transform:translateY(-50%);
}

.kd-local-seo__faq details[open] summary::after{
  content:"−";
}

.kd-local-seo__faq details p{
  max-width:880px;
  margin:0;
  padding:0 28px 28px;
  color:rgba(255,255,255,.64);
  font-size:17px;
  line-height:1.8;
}


/* FINAL CTA
========================================================== */

.kd-local-seo__cta{
  margin-top:135px;
  padding:72px;
  border:1px solid rgba(212,175,55,.27);
  border-radius:42px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(212,175,55,.17),
      transparent 48%
    ),
    linear-gradient(145deg,#141414,#090909);
}

.kd-local-seo__cta > span{
  color:var(--kd-gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.kd-local-seo__cta h2{
  max-width:880px;
  margin:24px auto;
  color:var(--kd-white);
  font-size:clamp(36px,5vw,62px);
  font-weight:500;
  line-height:1.08;
}

.kd-local-seo__cta p{
  max-width:740px;
  margin:0 auto 38px;
  color:rgba(255,255,255,.65);
  font-size:18px;
  line-height:1.75;
}

.kd-local-seo__cta-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.kd-local-seo__button{
  display:inline-block;
  padding:17px 30px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

.kd-local-seo__button:hover{
  transform:translateY(-3px);
}

.kd-local-seo__button--primary{
  border:1px solid var(--kd-gold);
  background:var(--kd-gold);
  color:#070707;
}

.kd-local-seo__button--primary:hover{
  box-shadow:0 18px 35px rgba(212,175,55,.24);
}

.kd-local-seo__button--secondary{
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:var(--kd-white);
}

.kd-local-seo__button--secondary:hover{
  border-color:var(--kd-gold);
  color:var(--kd-gold);
}


/* TABLET
========================================================== */

@media(max-width:900px){

  .kd-local-seo__hero{
    min-height:72vh;
    padding:120px 26px 80px;
    background-position:65% center;
  }

  .kd-local-seo__content{
    padding:82px 22px 105px;
  }

  .kd-local-seo__benefits,
  .kd-local-seo__nap,
  .kd-local-seo__authority-grid,
  .kd-local-seo__timeline{
    grid-template-columns:1fr;
  }

  .kd-local-seo__split,
  .kd-local-seo__comparison{
    grid-template-columns:1fr;
  }

  .kd-local-seo__checklist ul{
    grid-template-columns:1fr;
  }

  .kd-local-seo__checklist li{
    border-right:0;
  }

  .kd-local-seo__intro,
  .kd-local-seo__statement,
  .kd-local-seo__cta{
    padding:38px;
  }

  .kd-local-seo__intro p{
    font-size:23px;
  }

  .kd-local-seo__statement p{
    font-size:27px;
  }

}


/* MOBILE
========================================================== */

@media(max-width:600px){

  .kd-local-seo__hero{
    min-height:650px;
    align-items:flex-end;
    padding:120px 22px 58px;

    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.86) 53%,
        rgba(0,0,0,.28) 100%
      ),

      /* REPLACE THIS URL WITH THE WORDPRESS IMAGE URL */
      url("/wp-content/uploads/2026/07/local-seo-southern-highlands-google-search.webp");

    background-size:cover;
    background-position:68% center;
  }

  .kd-local-seo__eyebrow{
    margin-bottom:19px;
    font-size:11px;
    line-height:1.6;
  }

  .kd-local-seo__hero h1{
    margin-bottom:23px;
    font-size:39px;
    line-height:1.03;
    letter-spacing:-.8px;
  }

  .kd-local-seo__hero p{
    font-size:17px;
    line-height:1.7;
  }

  .kd-local-seo__content{
    padding:70px 18px 90px;
  }

  .kd-local-seo__intro{
    padding:28px;
    border-radius:26px;
  }

  .kd-local-seo__intro p{
    font-size:20px;
  }

  .kd-local-seo__answer{
    padding:28px;
  }

  .kd-local-seo__section{
    margin:82px 0;
  }

  .kd-local-seo__section h2{
    font-size:35px;
  }

  .kd-local-seo__section > p{
    font-size:18px;
    line-height:1.8;
  }

  .kd-local-seo__example{
    padding:27px;
  }

  .kd-local-seo__example ul{
    grid-template-columns:1fr;
  }

  .kd-local-seo__statement{
    padding:34px 28px;
    border-radius:28px;
  }

  .kd-local-seo__statement p{
    font-size:24px;
  }

  .kd-local-seo__benefit,
  .kd-local-seo__nap > div,
  .kd-local-seo__split > div,
  .kd-local-seo__split blockquote,
  .kd-local-seo__comparison-card,
  .kd-local-seo__review-box,
  .kd-local-seo__list-box,
  .kd-local-seo__performance article,
  .kd-local-seo__authority-grid > div,
  .kd-local-seo__timeline > div{
    padding:28px;
    border-radius:24px;
  }

  .kd-local-seo__checklist-heading{
    display:block;
    padding:25px;
  }

  .kd-local-seo__checklist-heading span{
    margin-bottom:10px;
  }

  .kd-local-seo__checklist-heading strong{
    display:block;
  }

  .kd-local-seo__checklist li{
    padding:23px 22px 23px 54px;
  }

  .kd-local-seo__checklist li::before{
    top:23px;
    left:23px;
  }

  .kd-local-seo__performance{
    grid-template-columns:1fr;
  }

  .kd-local-seo__metrics > div{
    grid-template-columns:1fr;
    gap:8px;
    padding:24px;
  }

  .kd-local-seo__cta{
    padding:38px 25px;
    border-radius:28px;
  }

  .kd-local-seo__cta h2{
    font-size:34px;
  }

  .kd-local-seo__cta-buttons{
    display:grid;
    grid-template-columns:1fr;
  }

  .kd-local-seo__button{
    width:100%;
    text-align:center;
  }

}
.featured-post__image,
.blog-card__image{
	display:block;
	overflow:hidden;
}

.featured-post__image img,
.blog-card__image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.featured-post:hover .featured-post__image img,
.blog-card:hover .blog-card__image img{
	transform:scale(1.035);
}

.featured-content h2 a,
.blog-content h3 a{
	color:inherit;
	text-decoration:none;
	transition:color .3s ease;
}

.featured-content h2 a:hover,
.blog-content h3 a:hover{
	color:#d4af37;
}

.blog-read-more{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:#d4af37;
	text-decoration:none;
}

.blog-read-more span{
	transition:transform .3s ease;
}

.blog-read-more:hover span{
	transform:translateX(5px);
}

.blog-empty{
	padding:80px 30px;
	border:1px solid rgba(255,255,255,.08);
	text-align:center;
}

.blog-empty h2{
	margin:0 0 15px;
	color:#fff;
}

.blog-empty p{
	margin:0;
	color:rgba(255,255,255,.6);
}
/* =========================================================
   COMFORT SHOES — COMPLETE CSS
========================================================= */

.comfort-case {
  --comfort-bg: #050505;
  --comfort-border: rgba(255, 255, 255, 0.11);
  --comfort-white: #f4f2ee;
  --comfort-text: rgba(255, 255, 255, 0.62);
  --comfort-rust: #7d382d;
  --comfort-rust-light: #9c4b3d;
  --comfort-navy: #293654;

  width: 100%;
  overflow: hidden;
  color: var(--comfort-white);
  background: var(--comfort-bg);
  border-top: 1px solid var(--comfort-border);
  border-bottom: 1px solid var(--comfort-border);
}


/* =========================================================
   TOP
========================================================= */

.comfort-case__top {
  position: relative;
  display: grid;
  grid-template-columns: 57% 43%;
  min-height: 590px;
  overflow: hidden;
  background: #050505;
}


/*
 * El mockup queda contenido exclusivamente
 * dentro del 57% izquierdo.
 */

.comfort-case__top::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 57%;

  background-image:
    url("https://kookadigital.com.au/wp-content/uploads/2026/07/comfort-shoes-shopify-redesign-kooka-digital.webp");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}


/*
 * Sombra suave en la unión entre imagen y texto.
 */

.comfort-case__top::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 48%;
  width: 12%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(5, 5, 5, 0),
    rgba(5, 5, 5, 0.82),
    #050505
  );
}


/* =========================================================
   COPY — COLUMNA DERECHA
========================================================= */

.comfort-case__copy {
  position: relative;
  z-index: 2;
  grid-column: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  max-width: 610px;
  padding: 60px clamp(35px, 5vw, 90px) 60px 35px;
}

.comfort-case__label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 23px;

  color: var(--comfort-rust-light);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.comfort-case__label::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  background: var(--comfort-rust);
}

.comfort-case__copy h2 {
  width: 100%;
  margin: 0 0 23px;

  color: var(--comfort-white);
  font-size: clamp(48px, 4vw, 70px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.comfort-case__copy h2 span {
  display: block;
  color: var(--comfort-rust-light);
}

.comfort-case__copy > p {
  width: 100%;
  max-width: 530px;
  margin: 0 0 30px;

  color: var(--comfort-text);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.7;
}

.comfort-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 16px 27px;

  color: #fff;
  background: var(--comfort-rust);
  border: 1px solid var(--comfort-rust);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.comfort-case__btn:hover {
  color: #fff;
  background: var(--comfort-navy);
  border-color: #455574;
  transform: translateY(-2px);
}


/* =========================================================
   BOTTOM
========================================================= */

.comfort-case__bottom {
  display: grid;
  grid-template-columns: minmax(310px, 1.4fr) minmax(0, 4fr);

  background: #030303;
  border-top: 1px solid var(--comfort-border);
}


/* =========================================================
   REVIEW
========================================================= */

.comfort-proof {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--comfort-border);
}

.comfort-proof__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  min-height: 315px;
  padding: 38px clamp(35px, 4vw, 62px);
}

.comfort-proof__stars {
  margin: 0 0 21px;

  color: #e8b52c;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 2px;
}

.comfort-proof__quote > p {
  max-width: 470px;
  margin: 0 0 26px;

  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.3vw, 22px);
  font-style: italic;
  line-height: 1.48;
}

.comfort-proof__quote strong {
  display: block;
  margin: 0 0 5px;

  color: var(--comfort-rust-light);
  font-size: 16px;
  font-weight: 700;
}

.comfort-proof__quote small {
  display: block;

  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   METRICS
========================================================= */

.comfort-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.comfort-metrics > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 315px;
  padding: 38px clamp(22px, 1.8vw, 34px);

  border-right: 1px solid var(--comfort-border);

  transition: background-color 0.25s ease;
}

.comfort-metrics > div:last-child {
  border-right: 0;
}

.comfort-metrics > div:hover {
  background: rgba(125, 56, 45, 0.08);
}

.comfort-metrics span {
  display: block;
  margin: 0 0 27px;

  color: var(--comfort-rust-light);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

.comfort-metrics strong {
  display: block;
  margin: 0 0 15px;

  color: var(--comfort-rust-light);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.comfort-metrics small {
  display: block;

  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.58;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1300px) and (min-width: 901px) {

  .comfort-case__top {
    grid-template-columns: 55% 45%;
    min-height: 540px;
  }

  .comfort-case__top::before {
    width: 55%;
    background-size: auto 92%;
    background-position: left center;
  }

  .comfort-case__top::after {
    left: 46%;
    width: 12%;
  }

  .comfort-case__copy {
    padding: 50px 35px 50px 25px;
  }

  .comfort-case__copy h2 {
    font-size: clamp(43px, 4vw, 58px);
  }

  .comfort-case__copy > p {
    font-size: 15px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .comfort-case__top {
    display: block;
    min-height: 0;
  }

  .comfort-case__top::before {
    position: relative;
    display: block;

    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;

    background-size: cover;
    background-position: center;
  }

  .comfort-case__top::after {
    display: none;
  }

  .comfort-case__copy {
    display: flex;
    grid-column: auto;

    width: 100%;
    max-width: none;
    padding: 48px 32px 58px;

    align-items: center;
    text-align: center;
  }

  .comfort-case__label {
    justify-content: center;
  }

  .comfort-case__copy h2 {
    max-width: 650px;
    font-size: clamp(46px, 9vw, 68px);
  }

  .comfort-case__copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .comfort-case__bottom {
    grid-template-columns: 1fr;
  }

  .comfort-proof {
    border-right: 0;
    border-bottom: 1px solid var(--comfort-border);
  }

  .comfort-proof__quote {
    min-height: 0;
    align-items: center;
    padding: 42px 35px;
    text-align: center;
  }

  .comfort-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comfort-metrics > div {
    min-height: 230px;
    border-bottom: 1px solid var(--comfort-border);
  }

  .comfort-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .comfort-metrics > div:nth-child(3),
  .comfort-metrics > div:nth-child(4) {
    border-bottom: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .comfort-case__top::before {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: 29% center;
  }

  .comfort-case__copy {
    padding: 40px 22px 48px;
  }

  .comfort-case__label {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .comfort-case__label::after {
    width: 35px;
  }

  .comfort-case__copy h2 {
    margin-bottom: 20px;
    font-size: clamp(39px, 13vw, 54px);
    line-height: 0.92;
  }

  .comfort-case__copy > p {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.62;
  }

  .comfort-case__btn {
    width: 100%;
    min-height: 52px;
  }

  .comfort-proof__quote {
    padding: 39px 23px;
  }

  .comfort-proof__stars {
    margin-bottom: 19px;
    font-size: 21px;
  }

  .comfort-proof__quote > p {
    margin-bottom: 24px;
    font-size: 18px;
  }

  .comfort-metrics {
    grid-template-columns: 1fr;
  }

  .comfort-metrics > div {
    min-height: 0;
    padding: 29px 23px 32px;

    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--comfort-border);
  }

  .comfort-metrics > div:nth-child(3) {
    border-bottom: 1px solid var(--comfort-border);
  }

  .comfort-metrics > div:last-child {
    border-bottom: 0;
  }

  .comfort-metrics span {
    margin-bottom: 16px;
  }

  .comfort-metrics strong {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .comfort-metrics small {
    max-width: 310px;
    margin: 0 auto;
  }
}
/* =========================================================
   THE LOVE HOUSE — PORTFOLIO CASE STUDY
========================================================= */

.lovehouse-case {
  --lovehouse-bg: #040403;
  --lovehouse-panel: #070705;
  --lovehouse-gold: #a88854;
  --lovehouse-gold-light: #c6a66e;
  --lovehouse-cream: #eee9df;
  --lovehouse-text: rgba(255, 255, 255, 0.62);
  --lovehouse-border: rgba(198, 166, 110, 0.18);

  width: 100%;
  overflow: hidden;
  color: var(--lovehouse-cream);
  background: var(--lovehouse-bg);
  border-top: 1px solid var(--lovehouse-border);
  border-bottom: 1px solid var(--lovehouse-border);
}


/* =========================================================
   TOP
========================================================= */

.lovehouse-case__top {
  position: relative;
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 590px;
  overflow: hidden;
  background: var(--lovehouse-bg);
}


/*
 * Mockup independiente alineado a la derecha.
 * El texto nunca puede colocarse encima.
 */

.lovehouse-case__top::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background-image:
    url("https://kookadigital.com.au/wp-content/uploads/2026/07/the-love-house-branding-special-features-kooka-digital.webp");

  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}


/*
 * Transición oscura entre textos y dispositivos.
 */

.lovehouse-case__top::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 35%;
  width: 17%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    var(--lovehouse-bg) 0%,
    rgba(4, 4, 3, 0.88) 35%,
    rgba(4, 4, 3, 0) 100%
  );
}


/* =========================================================
   TOP COPY — LEFT
========================================================= */

.lovehouse-case__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  max-width: 660px;
  padding:
    60px
    30px
    60px
    clamp(35px, 5.5vw, 105px);
}

.lovehouse-case__label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 23px;

  color: var(--lovehouse-gold-light);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lovehouse-case__label::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  background: var(--lovehouse-gold);
}

.lovehouse-case__copy h2 {
  width: 100%;
  margin: 0 0 23px;

  color: var(--lovehouse-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 4.5vw, 82px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.lovehouse-case__copy h2 span {
  display: block;
  color: var(--lovehouse-gold-light);
}

.lovehouse-case__copy > p {
  width: 100%;
  max-width: 535px;
  margin: 0 0 30px;

  color: var(--lovehouse-text);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.7;
}

.lovehouse-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 16px 28px;

  color: var(--lovehouse-cream);
  background: rgba(168, 136, 84, 0.08);
  border: 1px solid var(--lovehouse-gold);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.lovehouse-case__btn:hover {
  color: #080705;
  background: var(--lovehouse-gold-light);
  border-color: var(--lovehouse-gold-light);
  transform: translateY(-2px);
}


/* =========================================================
   BOTTOM
========================================================= */

.lovehouse-case__bottom {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(0, 4fr);

  background: #030302;
  border-top: 1px solid var(--lovehouse-border);
}


/* =========================================================
   PROJECT INTRO — NO TESTIMONIAL
========================================================= */

.lovehouse-proof {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--lovehouse-border);
}

.lovehouse-proof__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  min-height: 315px;
  padding: 38px clamp(35px, 4vw, 62px);
}

.lovehouse-proof__label {
  display: block;
  margin: 0 0 22px;

  color: var(--lovehouse-gold-light);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lovehouse-proof__content > p {
  max-width: 490px;
  margin: 0 0 27px;

  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.3vw, 23px);
  font-style: italic;
  line-height: 1.48;
}

.lovehouse-proof__content strong {
  display: block;
  margin: 0 0 5px;

  color: var(--lovehouse-gold-light);
  font-size: 16px;
  font-weight: 700;
}

.lovehouse-proof__content small {
  display: block;

  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   PROJECT FEATURES
========================================================= */

.lovehouse-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.lovehouse-metrics > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 315px;
  padding: 38px clamp(22px, 1.8vw, 34px);

  border-right: 1px solid var(--lovehouse-border);

  transition: background-color 0.25s ease;
}

.lovehouse-metrics > div:last-child {
  border-right: 0;
}

.lovehouse-metrics > div:hover {
  background: rgba(168, 136, 84, 0.07);
}

.lovehouse-metrics span {
  display: block;
  margin: 0 0 27px;

  color: var(--lovehouse-gold);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

.lovehouse-metrics strong {
  display: block;
  margin: 0 0 15px;

  color: var(--lovehouse-gold-light);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.lovehouse-metrics small {
  display: block;

  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.58;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1300px) and (min-width: 901px) {

  .lovehouse-case__top {
    grid-template-columns: 45% 55%;
    min-height: 540px;
  }

  .lovehouse-case__top::before {
    background-size: auto 92%;
    background-position: right center;
  }

  .lovehouse-case__top::after {
    left: 37%;
    width: 17%;
  }

  .lovehouse-case__copy {
    padding:
      50px
      25px
      50px
      clamp(30px, 4vw, 65px);
  }

  .lovehouse-case__copy h2 {
    font-size: clamp(48px, 4.5vw, 66px);
  }

  .lovehouse-case__copy > p {
    font-size: 15px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .lovehouse-case__top {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
  }

  .lovehouse-case__top::before {
    position: relative;
    display: block;
    flex: 0 0 auto;

    width: 100%;
    aspect-ratio: 16 / 9;

    background-position: center;
    background-size: cover;
  }

  .lovehouse-case__top::after {
    display: none;
  }

  .lovehouse-case__copy {
    grid-column: auto;
    align-items: center;

    width: 100%;
    max-width: none;
    padding: 48px 32px 58px;

    text-align: center;
  }

  .lovehouse-case__label {
    justify-content: center;
  }

  .lovehouse-case__copy h2 {
    max-width: 700px;
    font-size: clamp(49px, 9vw, 72px);
  }

  .lovehouse-case__copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .lovehouse-case__bottom {
    grid-template-columns: 1fr;
  }

  .lovehouse-proof {
    border-right: 0;
    border-bottom: 1px solid var(--lovehouse-border);
  }

  .lovehouse-proof__content {
    min-height: 0;
    align-items: center;
    padding: 42px 35px;
    text-align: center;
  }

  .lovehouse-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lovehouse-metrics > div {
    min-height: 230px;
    border-bottom: 1px solid var(--lovehouse-border);
  }

  .lovehouse-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .lovehouse-metrics > div:nth-child(3),
  .lovehouse-metrics > div:nth-child(4) {
    border-bottom: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .lovehouse-case__top::before {
    aspect-ratio: 4 / 3;
    background-position: 70% center;
    background-size: cover;
  }

  .lovehouse-case__copy {
    padding: 40px 22px 48px;
  }

  .lovehouse-case__label {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .lovehouse-case__label::after {
    width: 35px;
  }

  .lovehouse-case__copy h2 {
    margin-bottom: 20px;
    font-size: clamp(42px, 13vw, 57px);
    line-height: 0.93;
  }

  .lovehouse-case__copy > p {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.62;
  }

  .lovehouse-case__btn {
    width: 100%;
    min-height: 52px;
  }

  .lovehouse-proof__content {
    padding: 39px 23px;
  }

  .lovehouse-proof__label {
    margin-bottom: 18px;
  }

  .lovehouse-proof__content > p {
    margin-bottom: 24px;
    font-size: 18px;
  }

  .lovehouse-metrics {
    grid-template-columns: 1fr;
  }

  .lovehouse-metrics > div {
    min-height: 0;
    padding: 29px 23px 32px;

    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--lovehouse-border);
  }

  .lovehouse-metrics > div:nth-child(3) {
    border-bottom: 1px solid var(--lovehouse-border);
  }

  .lovehouse-metrics > div:last-child {
    border-bottom: 0;
  }

  .lovehouse-metrics span {
    margin-bottom: 16px;
  }

  .lovehouse-metrics strong {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .lovehouse-metrics small {
    max-width: 310px;
    margin: 0 auto;
  }
}
/* =========================================================
   BAILEY'S LAW — PORTFOLIO CASE STUDY
========================================================= */

.bailey-case {
  --bailey-bg: #03070b;
  --bailey-panel: #050a10;
  --bailey-blue: #32afe4;
  --bailey-blue-dark: #177aa8;
  --bailey-blue-soft: rgba(50, 175, 228, 0.08);
  --bailey-white: #f3f5f6;
  --bailey-text: rgba(255, 255, 255, 0.62);
  --bailey-border: rgba(50, 175, 228, 0.17);

  width: 100%;
  overflow: hidden;
  color: var(--bailey-white);
  background: var(--bailey-bg);
  border-top: 1px solid var(--bailey-border);
  border-bottom: 1px solid var(--bailey-border);
}


/* =========================================================
   TOP
========================================================= */

.bailey-case__top {
  position: relative;
  display: grid;
  grid-template-columns: 57% 43%;
  min-height: 590px;
  overflow: hidden;
  background: var(--bailey-bg);
}


/*
 * El mockup queda alineado a la izquierda.
 * El texto ocupa una columna independiente a la derecha.
 */

.bailey-case__top::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background-image:
    url("https://kookadigital.com.au/wp-content/uploads/2026/07/baileys-law-campaign-website-kooka-digital.webp");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}


/*
 * Transición entre mockup y zona de contenido.
 */

.bailey-case__top::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 44%;
  width: 17%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(3, 7, 11, 0),
    rgba(3, 7, 11, 0.82) 45%,
    var(--bailey-bg) 100%
  );
}


/* =========================================================
   COPY — RIGHT
========================================================= */

.bailey-case__copy {
  position: relative;
  z-index: 2;
  grid-column: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  max-width: 650px;
  padding:
    60px
    clamp(35px, 5vw, 95px)
    60px
    30px;
}

.bailey-case__label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 23px;

  color: var(--bailey-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.bailey-case__label::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  background: var(--bailey-blue-dark);
}

.bailey-case__copy h2 {
  width: 100%;
  margin: 0 0 23px;

  color: var(--bailey-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 4.6vw, 84px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.bailey-case__copy h2 span {
  display: block;
  color: var(--bailey-blue);
}

.bailey-case__copy > p {
  width: 100%;
  max-width: 550px;
  margin: 0 0 30px;

  color: var(--bailey-text);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.7;
}

.bailey-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 16px 28px;

  color: #031019;
  background: var(--bailey-blue);
  border: 1px solid var(--bailey-blue);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.bailey-case__btn:hover {
  color: var(--bailey-white);
  background: var(--bailey-blue-dark);
  border-color: var(--bailey-blue-dark);
  transform: translateY(-2px);
}


/* =========================================================
   BOTTOM
========================================================= */

.bailey-case__bottom {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(0, 4fr);

  background: #020508;
  border-top: 1px solid var(--bailey-border);
}


/* =========================================================
   REVIEW
========================================================= */

.bailey-proof {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--bailey-border);
}

.bailey-proof__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  min-height: 315px;
  padding: 38px clamp(35px, 4vw, 62px);
}

.bailey-proof__stars {
  margin: 0 0 21px;

  color: #e8b52c;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 2px;
}

.bailey-proof__quote > p {
  max-width: 480px;
  margin: 0 0 26px;

  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.3vw, 22px);
  font-style: italic;
  line-height: 1.48;
}

.bailey-proof__quote strong {
  display: block;
  margin: 0 0 5px;

  color: var(--bailey-blue);
  font-size: 16px;
  font-weight: 700;
}

.bailey-proof__quote small {
  display: block;

  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   PROJECT FEATURES
========================================================= */

.bailey-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.bailey-metrics > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 315px;
  padding: 38px clamp(22px, 1.8vw, 34px);

  border-right: 1px solid var(--bailey-border);

  transition: background-color 0.25s ease;
}

.bailey-metrics > div:last-child {
  border-right: 0;
}

.bailey-metrics > div:hover {
  background: var(--bailey-blue-soft);
}

.bailey-metrics span {
  display: block;
  margin: 0 0 27px;

  color: var(--bailey-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

.bailey-metrics strong {
  display: block;
  margin: 0 0 15px;

  color: var(--bailey-blue);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.bailey-metrics small {
  display: block;

  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.58;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1300px) and (min-width: 901px) {

  .bailey-case__top {
    grid-template-columns: 55% 45%;
    min-height: 540px;
  }

  .bailey-case__top::before {
    background-size: auto 92%;
    background-position: left center;
  }

  .bailey-case__top::after {
    left: 43%;
    width: 16%;
  }

  .bailey-case__copy {
    padding: 50px 35px 50px 25px;
  }

  .bailey-case__copy h2 {
    font-size: clamp(48px, 4.4vw, 65px);
  }

  .bailey-case__copy > p {
    font-size: 15px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .bailey-case__top {
    display: block;
    min-height: 0;
  }

  .bailey-case__top::before {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    background-position: center;
    background-size: cover;
  }

  .bailey-case__top::after {
    display: none;
  }

  .bailey-case__copy {
    grid-column: auto;
    align-items: center;

    width: 100%;
    max-width: none;
    padding: 48px 32px 58px;

    text-align: center;
  }

  .bailey-case__label {
    justify-content: center;
  }

  .bailey-case__copy h2 {
    max-width: 700px;
    font-size: clamp(50px, 9vw, 72px);
  }

  .bailey-case__copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .bailey-case__bottom {
    grid-template-columns: 1fr;
  }

  .bailey-proof {
    border-right: 0;
    border-bottom: 1px solid var(--bailey-border);
  }

  .bailey-proof__quote {
    min-height: 0;
    align-items: center;
    padding: 42px 35px;
    text-align: center;
  }

  .bailey-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bailey-metrics > div {
    min-height: 230px;
    border-bottom: 1px solid var(--bailey-border);
  }

  .bailey-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .bailey-metrics > div:nth-child(3),
  .bailey-metrics > div:nth-child(4) {
    border-bottom: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .bailey-case__top::before {
    aspect-ratio: 4 / 3;
    background-position: 28% center;
    background-size: cover;
  }

  .bailey-case__copy {
    padding: 40px 22px 48px;
  }

  .bailey-case__label {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.15em;
  }

  .bailey-case__label::after {
    width: 35px;
  }

  .bailey-case__copy h2 {
    margin-bottom: 20px;
    font-size: clamp(42px, 13vw, 57px);
    line-height: 0.92;
  }

  .bailey-case__copy > p {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.62;
  }

  .bailey-case__btn {
    width: 100%;
    min-height: 52px;
  }

  .bailey-proof__quote {
    padding: 39px 23px;
  }

  .bailey-proof__stars {
    margin-bottom: 19px;
    font-size: 21px;
  }

  .bailey-proof__quote > p {
    margin-bottom: 24px;
    font-size: 18px;
  }

  .bailey-metrics {
    grid-template-columns: 1fr;
  }

  .bailey-metrics > div {
    min-height: 0;
    padding: 29px 23px 32px;

    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--bailey-border);
  }

  .bailey-metrics > div:nth-child(3) {
    border-bottom: 1px solid var(--bailey-border);
  }

  .bailey-metrics > div:last-child {
    border-bottom: 0;
  }

  .bailey-metrics span {
    margin-bottom: 16px;
  }

  .bailey-metrics strong {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .bailey-metrics small {
    max-width: 310px;
    margin: 0 auto;
  }
}
/* =========================================================
   ACE AUTOMOTIVE SERVICES — PORTFOLIO CASE STUDY
========================================================= */

.aceauto-case {
  --aceauto-bg: #030609;
  --aceauto-panel: #05090d;
  --aceauto-blue: #1687ff;
  --aceauto-blue-dark: #0d63bd;
  --aceauto-blue-soft: rgba(22, 135, 255, 0.08);
  --aceauto-white: #f4f6f8;
  --aceauto-text: rgba(255, 255, 255, 0.62);
  --aceauto-border: rgba(22, 135, 255, 0.17);

  width: 100%;
  overflow: hidden;
  color: var(--aceauto-white);
  background: var(--aceauto-bg);
  border-top: 1px solid var(--aceauto-border);
  border-bottom: 1px solid var(--aceauto-border);
}


/* =========================================================
   TOP
========================================================= */

.aceauto-case__top {
  position: relative;
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 590px;
  overflow: hidden;
  background: var(--aceauto-bg);
}


/*
 * Mockup anclado a la derecha.
 * La imagen no utiliza cover en escritorio.
 */

.aceauto-case__top::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background-image:
    url("https://kookadigital.com.au/wp-content/uploads/2026/07/ace-automotive-custom-website-kooka-digital.webp");

  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}


/*
 * Transición oscura entre la columna de texto
 * y el mockup.
 */

.aceauto-case__top::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 35%;
  width: 18%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    var(--aceauto-bg) 0%,
    rgba(3, 6, 9, 0.88) 40%,
    rgba(3, 6, 9, 0) 100%
  );
}


/* =========================================================
   COPY — LEFT
========================================================= */

.aceauto-case__copy {
  position: relative;
  z-index: 2;
  grid-column: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  max-width: 680px;
  padding:
    60px
    25px
    60px
    clamp(35px, 5.5vw, 105px);
}

.aceauto-case__label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 23px;

  color: var(--aceauto-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.aceauto-case__label::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  background: var(--aceauto-blue);
}

.aceauto-case__copy h2 {
  width: 100%;
  margin: 0 0 23px;

  color: var(--aceauto-white);
  font-size: clamp(48px, 4vw, 72px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.aceauto-case__copy h2 span {
  display: block;
  color: var(--aceauto-blue);
}

.aceauto-case__copy > p {
  width: 100%;
  max-width: 545px;
  margin: 0 0 30px;

  color: var(--aceauto-text);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.7;
}

.aceauto-case__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 16px 28px;

  color: #fff;
  background: var(--aceauto-blue);
  border: 1px solid var(--aceauto-blue);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.aceauto-case__btn:hover {
  color: #fff;
  background: var(--aceauto-blue-dark);
  border-color: var(--aceauto-blue-dark);
  transform: translateY(-2px);
}


/* =========================================================
   BOTTOM
========================================================= */

.aceauto-case__bottom {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(0, 4fr);

  background: #020406;
  border-top: 1px solid var(--aceauto-border);
}


/* =========================================================
   PROJECT INTRO / FUTURE REVIEW
========================================================= */

.aceauto-proof {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--aceauto-border);
}

.aceauto-proof__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  min-height: 315px;
  padding: 38px clamp(35px, 4vw, 62px);
}

.aceauto-proof__label {
  display: block;
  margin: 0 0 21px;

  color: var(--aceauto-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.aceauto-proof__content > p {
  max-width: 480px;
  margin: 0 0 26px;

  color: rgba(255, 255, 255, 0.84);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.3vw, 22px);
  font-style: italic;
  line-height: 1.48;
}

.aceauto-proof__content strong {
  display: block;
  margin: 0 0 5px;

  color: var(--aceauto-blue);
  font-size: 16px;
  font-weight: 700;
}

.aceauto-proof__content small {
  display: block;

  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   PROJECT FEATURES
========================================================= */

.aceauto-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.aceauto-metrics > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 315px;
  padding: 38px clamp(22px, 1.8vw, 34px);

  border-right: 1px solid var(--aceauto-border);

  transition: background-color 0.25s ease;
}

.aceauto-metrics > div:last-child {
  border-right: 0;
}

.aceauto-metrics > div:hover {
  background: var(--aceauto-blue-soft);
}

.aceauto-metrics span {
  display: block;
  margin: 0 0 27px;

  color: var(--aceauto-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

.aceauto-metrics strong {
  display: block;
  margin: 0 0 15px;

  color: var(--aceauto-blue);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.aceauto-metrics small {
  display: block;

  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  line-height: 1.58;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1300px) and (min-width: 901px) {

  .aceauto-case__top {
    grid-template-columns: 45% 55%;
    min-height: 540px;
  }

  .aceauto-case__top::before {
    background-size: auto 92%;
    background-position: right center;
  }

  .aceauto-case__top::after {
    left: 37%;
    width: 17%;
  }

  .aceauto-case__copy {
    padding:
      50px
      25px
      50px
      clamp(30px, 4vw, 65px);
  }

  .aceauto-case__copy h2 {
    font-size: clamp(43px, 4.2vw, 60px);
  }

  .aceauto-case__copy > p {
    font-size: 15px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aceauto-case__top {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
  }

  .aceauto-case__top::before {
    position: relative;
    display: block;
    flex: 0 0 auto;

    width: 100%;
    aspect-ratio: 16 / 9;

    background-position: center;
    background-size: cover;
  }

  .aceauto-case__top::after {
    display: none;
  }

  .aceauto-case__copy {
    grid-column: auto;
    align-items: center;

    width: 100%;
    max-width: none;
    padding: 48px 32px 58px;

    text-align: center;
  }

  .aceauto-case__label {
    justify-content: center;
  }

  .aceauto-case__copy h2 {
    max-width: 700px;
    font-size: clamp(44px, 8vw, 65px);
  }

  .aceauto-case__copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .aceauto-case__bottom {
    grid-template-columns: 1fr;
  }

  .aceauto-proof {
    border-right: 0;
    border-bottom: 1px solid var(--aceauto-border);
  }

  .aceauto-proof__content {
    min-height: 0;
    align-items: center;
    padding: 42px 35px;
    text-align: center;
  }

  .aceauto-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aceauto-metrics > div {
    min-height: 230px;
    border-bottom: 1px solid var(--aceauto-border);
  }

  .aceauto-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .aceauto-metrics > div:nth-child(3),
  .aceauto-metrics > div:nth-child(4) {
    border-bottom: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .aceauto-case__top::before {
    aspect-ratio: 4 / 3;
    background-position: 70% center;
    background-size: cover;
  }

  .aceauto-case__copy {
    padding: 40px 22px 48px;
  }

  .aceauto-case__label {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .aceauto-case__label::after {
    width: 35px;
  }

  .aceauto-case__copy h2 {
    margin-bottom: 20px;
    font-size: clamp(37px, 11vw, 51px);
    line-height: 0.93;
  }

  .aceauto-case__copy > p {
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.62;
  }

  .aceauto-case__btn {
    width: 100%;
    min-height: 52px;
  }

  .aceauto-proof__content {
    padding: 39px 23px;
  }

  .aceauto-proof__label {
    margin-bottom: 18px;
  }

  .aceauto-proof__content > p {
    margin-bottom: 24px;
    font-size: 18px;
  }

  .aceauto-metrics {
    grid-template-columns: 1fr;
  }

  .aceauto-metrics > div {
    min-height: 0;
    padding: 29px 23px 32px;

    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--aceauto-border);
  }

  .aceauto-metrics > div:nth-child(3) {
    border-bottom: 1px solid var(--aceauto-border);
  }

  .aceauto-metrics > div:last-child {
    border-bottom: 0;
  }

  .aceauto-metrics span {
    margin-bottom: 16px;
  }

  .aceauto-metrics strong {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .aceauto-metrics small {
    max-width: 310px;
    margin: 0 auto;
  }
}
/* =========================================================
   SCORE GRID
========================================================= */

.kooka-performance__scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  background: rgba(255, 255, 255, 0.008);

  border-top: 1px solid var(--kp-border);
  border-bottom: 1px solid var(--kp-border);
}


/* =========================================================
   SCORE CELL
========================================================= */

.kooka-score-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  padding: clamp(45px, 4vw, 68px) clamp(25px, 2.8vw, 45px);

  text-align: center;

  border-right: 1px solid var(--kp-border);

  opacity: 0;
  transform: translateY(40px);

  animation:
    kooka-score-enter
    0.85s
    cubic-bezier(0.2, 0.75, 0.25, 1)
    var(--delay)
    forwards;

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.kooka-score-card:last-child {
  border-right: 0;
}

.kooka-score-card:hover {
  background: rgba(200, 164, 63, 0.055);
}

.kooka-score-card:hover .kooka-score-card__circle {
  transform: translateY(-7px) scale(1.03);

  filter:
    drop-shadow(0 0 14px rgba(226, 198, 100, 0.32))
    drop-shadow(0 0 35px rgba(200, 164, 63, 0.2));
}


/* =========================================================
   THICK PAGESPEED CIRCLE
========================================================= */

.kooka-score-card__circle {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(155px, 11vw, 185px);
  height: clamp(155px, 11vw, 185px);
  margin: 0 auto 34px;

  border-radius: 50%;

  /*
   * Golden progress up to --score.
   * Remaining percentage shown in dark grey.
   */

  background:
    conic-gradient(
      from -90deg,
      #f0d873 0%,
      #c8a43f calc(var(--score) * 1%),
      #292820 calc(var(--score) * 1%),
      #292820 100%
    );

  box-shadow:
    0 0 18px rgba(200, 164, 63, 0.3),
    0 0 50px rgba(200, 164, 63, 0.13);

  filter:
    drop-shadow(0 0 9px rgba(226, 198, 100, 0.2));

  transition:
    transform 0.3s ease,
    filter 0.3s ease;

  animation:
    kooka-circle-enter
    1s
    cubic-bezier(0.2, 0.8, 0.25, 1)
    calc(var(--delay) + 0.12s)
    both;
}


/*
 * Dark centre.
 *
 * 18px inset creates one clearly visible
 * thick outer circumference.
 */

.kooka-score-card__circle::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(226, 198, 100, 0.13) 0%,
      #0a0907 62%,
      #050504 100%
    );

  box-shadow:
    inset 0 0 32px rgba(200, 164, 63, 0.1);
}


/*
 * Remove all previous circles and markers.
 */

.kooka-score-card__circle::before {
  display: none;
}


/* =========================================================
   NUMBER
========================================================= */

.kooka-score-card__ring {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.kooka-score-card__ring::before,
.kooka-score-card__ring::after {
  display: none;
}

.kooka-score-card__ring strong {
  position: relative;
  z-index: 4;

  color: #ffffff;

  font-size: clamp(40px, 3.3vw, 55px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;

  text-shadow:
    0 0 15px rgba(255, 255, 255, 0.12),
    0 0 30px rgba(226, 198, 100, 0.22);
}

.kooka-score-card__ring strong span {
  color: var(--kp-gold-light);

  font-size: 0.5em;
  vertical-align: top;
}


/* =========================================================
   CENTRED SCORE CONTENT
========================================================= */

.kooka-score-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 290px;
  margin: 0 auto;

  text-align: center;
}

.kooka-score-card__content > span {
  display: block;

  margin: 0 0 16px;

  color: var(--kp-gold);

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.17em;
}

.kooka-score-card__content h3 {
  width: 100%;
  margin: 0 0 13px;

  color: var(--kp-white);

  font-size: clamp(19px, 1.45vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.kooka-score-card__content p {
  width: 100%;
  max-width: 270px;
  margin: 0 auto;

  color: rgba(255, 255, 255, 0.52);

  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}


/* =========================================================
   ENTRY ANIMATIONS
========================================================= */

@keyframes kooka-score-enter {

  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kooka-circle-enter {

  from {
    opacity: 0;
    transform: rotate(-80deg) scale(0.65);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .kooka-performance__scores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kooka-score-card:nth-child(2) {
    border-right: 0;
  }

  .kooka-score-card:nth-child(1),
  .kooka-score-card:nth-child(2) {
    border-bottom: 1px solid var(--kp-border);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .kooka-performance__scores {
    grid-template-columns: 1fr;
  }

  .kooka-score-card {
    min-height: 0;
    padding: 40px 24px;

    border-right: 0;
    border-bottom: 1px solid var(--kp-border);
  }

  .kooka-score-card:nth-child(3) {
    border-bottom: 1px solid var(--kp-border);
  }

  .kooka-score-card:last-child {
    border-bottom: 0;
  }

  .kooka-score-card__circle {
    width: 160px;
    height: 160px;
    margin-bottom: 29px;
  }

  .kooka-score-card__circle::after {
    inset: 17px;
  }

  .kooka-score-card__content {
    max-width: 320px;
  }

  .kooka-score-card__content h3 {
    font-size: 21px;
  }

  .kooka-score-card__content p {
    max-width: 290px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kooka-score-card,
  .kooka-score-card__circle {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* =========================================================
   GOOGLE PAGESPEED SOURCE
========================================================= */

.kooka-performance__source {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  width: fit-content;
  max-width: 100%;
  margin: 28px auto 20px;
  padding: 12px 18px;

  color: rgba(255, 255, 255, 0.52);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  border: 1px solid rgba(200, 164, 63, 0.2);
  border-radius: 100px;

  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.015),
    0 12px 35px rgba(0, 0, 0, 0.35);

  overflow: hidden;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


/* Subtle gold highlight */

.kooka-performance__source::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;

  width: 70%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(226, 198, 100, 0.6),
    transparent
  );
}


/* Hover */

.kooka-performance__source:hover {
  color: rgba(255, 255, 255, 0.82);

  background:
    linear-gradient(
      180deg,
      rgba(200, 164, 63, 0.075),
      rgba(200, 164, 63, 0.025)
    );

  border-color: rgba(226, 198, 100, 0.48);

  box-shadow:
    0 0 0 1px rgba(200, 164, 63, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(200, 164, 63, 0.1);

  transform: translateY(-2px);
}


/* Google icon */

.kooka-performance__source-icon {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 29px;
  height: 29px;

  color: #ffffff;

  background:
    conic-gradient(
      from -45deg,
      #4285f4 0deg 90deg,
      #34a853 90deg 180deg,
      #fbbc05 180deg 270deg,
      #ea4335 270deg 360deg
    );

  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  box-shadow:
    0 0 15px rgba(66, 133, 244, 0.18);
}


/* Source text */

.kooka-performance__source > span:not(
  .kooka-performance__source-icon,
  .kooka-performance__source-arrow
) {
  position: relative;
  z-index: 2;
}

.kooka-performance__source strong {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 700;
}


/* External link arrow */

.kooka-performance__source-arrow {
  position: relative;
  z-index: 2;

  color: var(--kp-gold-light);
  font-size: 14px;
  line-height: 1;

  transition: transform 0.25s ease;
}

.kooka-performance__source:hover
.kooka-performance__source-arrow {
  transform: translate(2px, -2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .kooka-performance__source {
    width: 100%;
    padding: 13px 15px;

    border-radius: 12px;

    font-size: 10px;
    text-align: left;
  }

  .kooka-performance__source-icon {
    width: 28px;
    height: 28px;
  }
}
/* =========================================================
   PERFORMANCE SECTION — INTRO / HEADER
========================================================= */

.kooka-performance {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(218, 179, 45, 0.09),
            transparent 36%
        ),
        #030303;
    border-top: 1px solid rgba(218, 179, 45, 0.18);
    border-bottom: 1px solid rgba(218, 179, 45, 0.18);
}

/* Compatible con cualquiera de estas clases */
.kooka-performance__intro,
.kooka-performance__header,
.kooka-performance__head {
    position: relative;
    width: min(100% - 48px, 1050px);
    margin-inline: auto;
    padding: clamp(80px, 9vw, 130px) 0 clamp(55px, 6vw, 85px);
    text-align: center;
}

/* Pequeño resplandor superior */
.kooka-performance__intro::before,
.kooka-performance__header::before,
.kooka-performance__head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(680px, 80vw);
    height: 240px;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(218, 179, 45, 0.11),
        transparent 70%
    );
    filter: blur(15px);
    transform: translateX(-50%);
}

/* EYEBROW — Designed to Perform */
.kooka-performance__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 25px;
    color: #d9b633;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.kooka-performance__eyebrow::before,
.kooka-performance__eyebrow::after {
    content: "";
    width: 52px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #d9b633
    );
}

.kooka-performance__eyebrow::after {
    background: linear-gradient(
        90deg,
        #d9b633,
        transparent
    );
}

/* TÍTULO */
.kooka-performance__intro h2,
.kooka-performance__header h2,
.kooka-performance__head h2 {
    position: relative;
    max-width: 900px;
    margin: 0 auto 25px;
    color: #f7f3e9;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(46px, 5.5vw, 82px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.035em;
}

/* Segunda parte dorada */
.kooka-performance__intro h2 span,
.kooka-performance__header h2 span,
.kooka-performance__head h2 span {
    display: block;
    color: #d9b633;
    font-style: italic;
}

/* TEXTO PRINCIPAL */
.kooka-performance__intro > p,
.kooka-performance__header > p,
.kooka-performance__head > p {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.62);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1.8;
}

/* Última frase: Built for users. Built for Google. */
.kooka-performance__intro > p + p,
.kooka-performance__header > p + p,
.kooka-performance__head > p + p {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.kooka-performance__intro strong,
.kooka-performance__header strong,
.kooka-performance__head strong {
    color: #ffffff;
    font-weight: 700;
}

/* Separador antes de las métricas */
.kooka-performance__intro::after,
.kooka-performance__header::after,
.kooka-performance__head::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(760px, 70%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(218, 179, 45, 0.42),
        transparent
    );
    transform: translateX(-50%);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .kooka-performance__intro,
    .kooka-performance__header,
    .kooka-performance__head {
        width: min(100% - 32px, 620px);
        padding: 72px 0 52px;
    }

    .kooka-performance__eyebrow {
        gap: 11px;
        margin-bottom: 21px;
        font-size: 10px;
        letter-spacing: 0.22em;
    }

    .kooka-performance__eyebrow::before,
    .kooka-performance__eyebrow::after {
        width: 28px;
    }

    .kooka-performance__intro h2,
    .kooka-performance__header h2,
    .kooka-performance__head h2 {
        margin-bottom: 22px;
        font-size: clamp(42px, 13vw, 58px);
        line-height: 0.98;
    }

    .kooka-performance__intro > p,
    .kooka-performance__header > p,
    .kooka-performance__head > p {
        font-size: 15px;
        line-height: 1.75;
    }

    .kooka-performance__intro > p + p,
    .kooka-performance__header > p + p,
    .kooka-performance__head > p + p {
        margin-top: 18px;
        font-size: 12px;
    }
}
/* =====================================================
   PERFORMANCE HERO — CABECERA DEFINITIVA
===================================================== */

.performance-hero {
    position: relative;
    width: min(100% - 48px, 1150px);
    margin: 0 auto;
    padding: 105px 0 85px;
    text-align: center;
}

/* Resplandor de fondo */
.performance-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 10px;
    left: 50%;
    width: 780px;
    max-width: 90vw;
    height: 330px;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(220, 182, 48, 0.12) 0%,
        rgba(220, 182, 48, 0.04) 42%,
        transparent 72%
    );
    filter: blur(20px);
    transform: translateX(-50%);
}

.performance-hero > * {
    position: relative;
    z-index: 1;
}

/* DESIGNED TO PERFORM */
.performance-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 29px;
    color: #dcb630;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.performance-hero__eyebrow span {
    display: block;
    width: 64px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #dcb630
    );
}

.performance-hero__eyebrow span:last-child {
    background: linear-gradient(
        90deg,
        #dcb630,
        transparent
    );
}

/* TÍTULO PRINCIPAL */
.performance-hero__title {
    max-width: 970px;
    margin: 0 auto 29px !important;
    padding: 0 !important;
    color: #f5f1e8 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(58px, 6.2vw, 92px) !important;
    font-weight: 500 !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    text-transform: none !important;
}

.performance-hero__title strong {
    display: block;
    margin-top: 9px;
    color: #dcb630;
    font-family: inherit;
    font-weight: 500;
    font-style: italic;
}

/* DESCRIPCIÓN */
.performance-hero__description {
    max-width: 800px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

/* BUILT FOR USERS / GOOGLE */
.performance-hero__statement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 27px;
    padding: 12px 22px;
    border: 1px solid rgba(220, 182, 48, 0.2);
    border-radius: 100px;
    background: rgba(220, 182, 48, 0.035);
    color: rgba(255, 255, 255, 0.58);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.performance-hero__statement strong {
    color: #ffffff;
    font-weight: 700;
}

/* Separador inferior */
.performance-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(820px, 75%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(220, 182, 48, 0.42),
        transparent
    );
    transform: translateX(-50%);
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .performance-hero {
        padding: 85px 0 70px;
    }

    .performance-hero__title {
        font-size: clamp(55px, 8vw, 76px) !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .performance-hero {
        width: min(100% - 32px, 620px);
        padding: 70px 0 55px;
    }

    .performance-hero__eyebrow {
        gap: 11px;
        margin-bottom: 23px;
        font-size: 9px;
        letter-spacing: 0.22em;
    }

    .performance-hero__eyebrow span {
        width: 27px;
    }

    .performance-hero__title {
        max-width: 480px;
        margin-bottom: 23px !important;
        font-size: clamp(46px, 14vw, 62px) !important;
        line-height: 0.95 !important;
    }

    .performance-hero__title strong {
        margin-top: 6px;
    }

    .performance-hero__description {
        max-width: 540px;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .performance-hero__statement {
        flex-wrap: wrap;
        margin-top: 23px;
        padding: 10px 17px;
        font-size: 11px;
    }
}
/* =========================================================
   KOOKA PERFORMANCE — BRUTAL INTRO
========================================================= */

.kooka-performance__heading {
    position: relative;
    isolation: isolate;
    width: min(calc(100% - 48px), 1180px);
    margin: 0 auto;
    padding: clamp(95px, 10vw, 150px) 0 clamp(75px, 8vw, 115px);
    overflow: visible;
    text-align: center;
}

/* Resplandor ambiental */
.kooka-performance__heading::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 42%;
    left: 50%;
    width: min(1000px, 95vw);
    height: 540px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(225, 187, 48, 0.14) 0%,
            rgba(225, 187, 48, 0.055) 34%,
            transparent 70%
        );
    filter: blur(25px);
    transform: translate(-50%, -50%);
}

/* Línea inferior */
.kooka-performance__heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(900px, 82%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(225, 187, 48, 0.18),
        rgba(225, 187, 48, 0.65),
        rgba(225, 187, 48, 0.18),
        transparent
    );
    transform: translateX(-50%);
}

/* =========================================================
   EYEBROW
========================================================= */

.kooka-performance__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0 auto 34px;
    color: #dfba35;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.kooka-performance__eyebrow::before,
.kooka-performance__eyebrow::after {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
}

.kooka-performance__eyebrow::before {
    background: linear-gradient(
        90deg,
        transparent,
        #dfba35
    );
}

.kooka-performance__eyebrow::after {
    background: linear-gradient(
        90deg,
        #dfba35,
        transparent
    );
}

/* =========================================================
   MAIN TITLE
========================================================= */

.kooka-performance__heading h2 {
    max-width: 1100px;
    margin: 0 auto 35px !important;
    padding: 0 !important;
    color: #f5f1e8 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(68px, 7.8vw, 122px) !important;
    font-weight: 500 !important;
    line-height: 0.82 !important;
    letter-spacing: -0.055em !important;
    text-align: center !important;
    text-transform: none !important;
    text-wrap: balance;
}

/* Built for speed */
.kooka-performance__heading h2 > span {
    position: relative;
    display: block;
    width: fit-content;
    margin: 18px auto 0;
    color: #dfba35;
    font-family: inherit;
    font-weight: 500;
    font-style: italic;
    line-height: 0.9;
    text-shadow:
        0 0 20px rgba(223, 186, 53, 0.12),
        0 0 60px rgba(223, 186, 53, 0.08);
}

/* Trazo dorado debajo del título */
.kooka-performance__heading h2 > span::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: -17px;
    width: 42%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #dfba35
    );
    transform: skewX(-32deg);
    opacity: 0.75;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.kooka-performance__heading > p {
    max-width: 780px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: clamp(16px, 1.25vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    letter-spacing: -0.01em;
    text-align: center !important;
}

/* =========================================================
   GOOGLE LINE
========================================================= */

.kooka-performance__google-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 31px;
    padding: 13px 23px;
    border: 1px solid rgba(223, 186, 53, 0.24);
    border-radius: 100px;
    background:
        linear-gradient(
            135deg,
            rgba(223, 186, 53, 0.075),
            rgba(223, 186, 53, 0.015)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 35px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.55);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.025em;
    backdrop-filter: blur(10px);
}

.kooka-performance__google-line strong {
    color: #ffffff;
    font-weight: 700;
}

/* Punto dorado */
.kooka-performance__google-line::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 4px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #dfba35;
    box-shadow:
        0 0 0 5px rgba(223, 186, 53, 0.09),
        0 0 18px rgba(223, 186, 53, 0.6);
}

/* =========================================================
   ENTRY ANIMATION
========================================================= */

@keyframes kookaHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(32px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.kooka-performance__heading > * {
    opacity: 0;
    animation: kookaHeadingReveal 0.9s
        cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kooka-performance__eyebrow {
    animation-delay: 0.05s;
}

.kooka-performance__heading h2 {
    animation-delay: 0.16s;
}

.kooka-performance__heading > p {
    animation-delay: 0.27s;
}

.kooka-performance__google-line {
    animation-delay: 0.38s;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .kooka-performance__heading {
        padding: 95px 0 78px;
    }

    .kooka-performance__heading h2 {
        font-size: clamp(66px, 9vw, 94px) !important;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .kooka-performance__heading {
        width: min(calc(100% - 32px), 620px);
        padding: 72px 0 58px;
    }

    .kooka-performance__eyebrow {
        gap: 11px;
        margin-bottom: 25px;
        font-size: 9px;
        letter-spacing: 0.22em;
    }

    .kooka-performance__eyebrow::before,
    .kooka-performance__eyebrow::after {
        width: 30px;
        height: 1px;
    }

    .kooka-performance__heading h2 {
        max-width: 560px;
        margin-bottom: 31px !important;
        font-size: clamp(50px, 15.5vw, 68px) !important;
        line-height: 0.88 !important;
        letter-spacing: -0.045em !important;
    }

    .kooka-performance__heading h2 > span {
        margin-top: 12px;
    }

    .kooka-performance__heading h2 > span::after {
        right: 8%;
        bottom: -11px;
        height: 2px;
    }

    .kooka-performance__heading > p {
        max-width: 520px;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .kooka-performance__google-line {
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 25px;
        padding: 11px 17px;
        font-size: 11px;
    }

    .kooka-performance__google-line::before {
        width: 6px;
        height: 6px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .kooka-performance__heading > * {
        opacity: 1;
        animation: none;
    }
}
/* =========================================================
   KOOKA BLOG — CARDS TYPOGRAPHY FIX
========================================================= */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: min(calc(100% - 48px), 1400px);
    margin-inline: auto;
}

/* Tarjeta */
.blog-card {
    min-width: 0;
    border: 1px solid rgba(218, 179, 45, 0.15);
    background: #080808;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.blog-card:hover {
    transform: translateY(-7px);
    border-color: rgba(218, 179, 45, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

/* Imagen */
.blog-card__image {
    display: block;
    overflow: hidden;
}

.blog-card__image img {
    display: block;
    width: 100%;
    height: clamp(260px, 24vw, 390px);
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.035);
}

/* Contenido */
.blog-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 31px 32px 35px !important;
}

/* Categoría */
.blog-category {
    display: block;
    margin: 0 0 17px !important;
    color: #d8b32e !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
}

/* Título */
.blog-content h3 {
    margin: 0 0 18px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.blog-content h3 a {
    display: block;
    margin: 0 !important;
    color: #f4efe4 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(30px, 2.4vw, 43px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    text-decoration: none !important;
    text-wrap: balance;
    transition: color 0.3s ease;
}

.blog-content h3 a:hover {
    color: #d8b32e !important;
}

/* Extracto */
.blog-content > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 28px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* Read Article */
.blog-read-more {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: auto 0 0 !important;
    color: #d8b32e !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

.blog-read-more::after {
    content: "→";
    font-size: 18px;
    transition: transform 0.3s ease;
}

.blog-read-more:hover::after {
    transform: translateX(6px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .blog-grid {
        gap: 24px !important;
    }

    .blog-content {
        padding: 26px 25px 30px !important;
    }

    .blog-content h3 a {
        font-size: clamp(28px, 3.5vw, 36px) !important;
    }

    .blog-content > p {
        font-size: 15px !important;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .blog-grid {
        grid-template-columns: 1fr !important;
        width: min(calc(100% - 28px), 620px);
        gap: 24px !important;
    }

    .blog-card__image img {
        height: 235px;
    }

    .blog-content {
        padding: 24px 21px 27px !important;
    }

    .blog-category {
        margin-bottom: 13px !important;
        font-size: 10px !important;
    }

    .blog-content h3 {
        margin-bottom: 15px !important;
    }

    .blog-content h3 a {
        font-size: clamp(29px, 9vw, 38px) !important;
        line-height: 1.04 !important;
    }

    .blog-content > p {
        margin-bottom: 23px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        -webkit-line-clamp: 4;
    }

    .blog-read-more {
        font-size: 11px !important;
    }
}
/* =========================================================
   KOOKA BLOG — FEATURED POSTS
========================================================= */

.featured-post {
    display: grid !important;
    grid-template-columns: minmax(360px, 38%) minmax(0, 1fr) !important;
    width: min(calc(100% - 48px), 1400px);
    min-height: 350px;
    margin: 0 auto 34px !important;
    overflow: hidden;
    border: 1px solid rgba(218, 179, 45, 0.16);
    background: #080808;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.featured-post:hover {
    transform: translateY(-6px);
    border-color: rgba(218, 179, 45, 0.4);
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.45);
}

/* Imagen */
.featured-post__image {
    display: block;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.featured-post__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-post:hover .featured-post__image img {
    transform: scale(1.04);
}

/* Contenido */
.featured-content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 40px 46px !important;
}

/* Categoría */
.featured-content > span {
    display: block;
    margin: 0 0 17px !important;
    color: #d8b32e !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
}

/* Título */
.featured-content h2 {
    width: 100%;
    margin: 0 0 19px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.featured-content h2 a {
    display: block;
    margin: 0 !important;
    color: #f4efe4 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(34px, 3vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    text-decoration: none !important;
    text-wrap: balance;
    transition: color 0.3s ease;
}

.featured-content h2 a:hover {
    color: #d8b32e !important;
}

/* Extracto */
.featured-content > p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 900px;
    margin: 0 0 28px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* Read Article */
.featured-content .blog-read-more,
.featured-content .featured-read-more,
.featured-content > a:last-child {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: auto 0 0 !important;
    color: #d8b32e !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Evita la doble flecha que aparece ahora */
.featured-content .blog-read-more::after,
.featured-content .featured-read-more::after,
.featured-content > a:last-child::after {
    content: "→" !important;
    display: inline-block;
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Si el HTML ya contiene una flecha, usa esto en lugar del bloque anterior:
.featured-content .blog-read-more::after,
.featured-content .featured-read-more::after,
.featured-content > a:last-child::after {
    display: none !important;
}
*/

.featured-content .blog-read-more:hover::after,
.featured-content .featured-read-more:hover::after,
.featured-content > a:last-child:hover::after {
    transform: translateX(6px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .featured-post {
        grid-template-columns: minmax(300px, 42%) minmax(0, 1fr) !important;
        min-height: 330px;
    }

    .featured-post__image img {
        min-height: 330px;
    }

    .featured-content {
        padding: 32px 34px !important;
    }

    .featured-content h2 a {
        font-size: clamp(31px, 4vw, 40px) !important;
    }

    .featured-content > p {
        font-size: 15px !important;
        -webkit-line-clamp: 4;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .featured-post {
        grid-template-columns: 1fr !important;
        width: min(calc(100% - 28px), 620px);
        min-height: 0;
        margin-bottom: 24px !important;
    }

    .featured-post__image {
        height: 245px;
    }

    .featured-post__image img {
        min-height: 0;
        height: 100%;
    }

    .featured-content {
        justify-content: flex-start;
        padding: 25px 22px 29px !important;
    }

    .featured-content > span {
        margin-bottom: 13px !important;
        font-size: 10px !important;
    }

    .featured-content h2 {
        margin-bottom: 16px !important;
    }

    .featured-content h2 a {
        font-size: clamp(31px, 9vw, 39px) !important;
        line-height: 1.03 !important;
    }

    .featured-content > p {
        margin-bottom: 23px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        -webkit-line-clamp: 4;
    }

    .featured-content .blog-read-more,
    .featured-content .featured-read-more,
    .featured-content > a:last-child {
        font-size: 11px !important;
    }
}
.page-eyebrow {
  padding-top: 20px !important;
}
@media (max-width: 1024px) {

  .menu-toggle,
  .mobile-menu-toggle,
  .kooka-menu-toggle {
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 1px solid #d8b333 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    appearance: none !important;
  }

  .menu-toggle span,
  .mobile-menu-toggle span,
  .kooka-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: #d8b333 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
  }

}
/* =========================================================
   KOOKA DIGITAL — SOLUTIONS & PRICING
   ========================================================= */

.ksp-page {
  --ksp-black: #050505;
  --ksp-panel: #090909;
  --ksp-cream: #f3efe6;
  --ksp-muted: #aaa69f;
  --ksp-gold: #d4ae38;
  --ksp-gold-soft: #c9a35f;
  --ksp-line: rgba(212, 174, 56, 0.72);

  /* Distancia del menú respecto a la parte superior */
  --ksp-header-offset: 110px;

  width: 100%;
  position: relative;
  overflow: visible !important;

  color: var(--ksp-cream);
  background: var(--ksp-black);

  font-family: Montserrat, Arial, sans-serif;
}


.ksp-page *,
.ksp-page *::before,
.ksp-page *::after {
  box-sizing: border-box;
}


.ksp-page a {
  color: inherit;
  text-decoration: none;
}


.ksp-page img {
  display: block;
  max-width: 100%;
}


/* Permite funcionar al position: sticky dentro de Elementor */

.elementor:has(.ksp-page),
.e-con:has(.ksp-page),
.elementor-element:has(.ksp-page),
.elementor-widget-container:has(.ksp-page) {
  overflow: visible !important;
}


/* =========================================================
   ESTRUCTURA PRINCIPAL
   ========================================================= */

.ksp-layout {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    270px;

  align-items: start;

  overflow: visible !important;

  border-top:
    1px solid
    rgba(212, 174, 56, 0.22);
}


.ksp-main {
  min-width: 0;

  padding:
    0
    clamp(24px, 2vw, 34px)
    72px
    clamp(28px, 4.4vw, 68px);
}


/* =========================================================
   HERO
   ========================================================= */

.ksp-hero {
  min-height: 270px;

  padding:
    30px
    0
    32px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    radial-gradient(
      circle at 84% 46%,
      rgba(212, 174, 56, 0.11),
      transparent 35rem
    );
}


.ksp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin:
    0
    0
    17px;

  color: #e2b91e;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}


.ksp-eyebrow::after {
  content: "";

  width: 50px;
  height: 1px;

  background: currentColor;
}


.ksp-hero h1 {
  margin: 0;

  color: var(--ksp-cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(48px, 4.2vw, 66px);

  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.035em;
}


.ksp-hero h1 em {
  color: var(--ksp-gold);
  font-weight: 400;
}


.ksp-hero p {
  margin:
    18px
       0
    0;

  color: var(--ksp-muted);

  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   CONTENEDOR DE TARJETAS
   ========================================================= */

.ksp-cards {
  display: grid;
  gap: 28px;
}


/* =========================================================
   TARJETAS
   IZQUIERDA 60%
   IMAGEN 40%
   ========================================================= */

.ksp-card {
  min-width: 0;
  min-height: 0;

  display: grid;

  /*
   * 3fr + 2fr:
   * izquierda = 60%
   * derecha = 40%
   */

  grid-template-columns:
    minmax(0, 3fr)
    minmax(0, 2fr);

  align-items: stretch;

  overflow: hidden;

  border:
    1px solid
    var(--ksp-line);

  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      #090909,
      #050505
    );

  scroll-margin-top:
    calc(
      var(--ksp-header-offset) + 18px
    );
}


/* =========================================================
   CELDA IZQUIERDA
   ========================================================= */

.ksp-card__content {
  min-width: 0;

  padding:
    27px
    38px
    26px;

  display: flex;
  flex-direction: column;
}


.ksp-card__topline {
  display: flex;
  align-items: center;
  gap: 12px;

  color: #e2b91e;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}


.ksp-card__topline span {
  display: flex;
  align-items: center;
  gap: 11px;
}


.ksp-card__topline span::after {
  content: "";

  width: 15px;
  height: 1px;

  background: currentColor;
}


.ksp-card__topline b {
  font-size: 11px;
}


.ksp-card h2 {
  max-width: 650px;

  margin:
    16px
    0
    9px;

  color: var(--ksp-cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(37px, 2.65vw, 48px);

  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
}


.ksp-card h2 em {
  color: var(--ksp-gold);
  font-weight: 400;
}


/* =========================================================
   PRECIO
   ========================================================= */

.ksp-price {
  margin:
    0
    0
    8px;

  display: flex;
  align-items: flex-end;
  gap: 8px;
}


.ksp-price > span {
  padding-bottom: 5px;

  color: var(--ksp-muted);

  font-size: 13px;
}


.ksp-price strong {
  color: var(--ksp-gold);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 44px;
  font-weight: 500;
  line-height: 0.9;
}


.ksp-price small {
  margin-left: 6px;

  color: var(--ksp-muted);

  font-family:
    Montserrat,
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   TEXTO Y LISTAS
   ========================================================= */

.ksp-card__content > p {
  max-width: 650px;

  margin:
    4px
    0
    11px;

  color: #bbb7af;

  font-size: 12px;
  line-height: 1.5;
}


.ksp-card ul {
  margin:
    0
    0
    15px;

  padding: 0;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    7px
    24px;

  list-style: none;
}


.ksp-card li {
  position: relative;
  min-width: 0;

  padding-left: 24px;

  color: #d0ccc4;

  font-size: 11px;
  line-height: 1.4;
}


.ksp-card li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: -1px;

  width: 15px;
  height: 15px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--ksp-gold);

  border-radius: 50%;

  color: var(--ksp-gold);

  font-size: 8px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.ksp-actions {
  margin-top: auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap:
    12px
    20px;
}


.ksp-btn {
  min-height: 44px;

  padding:
    12px
    22px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  color: #090806 !important;

  background:
    linear-gradient(
      100deg,
      #edc932,
      #c99b21
    );

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}


.ksp-btn:hover {
  filter: brightness(1.09);
  transform: translateY(-2px);
}


.ksp-btn span {
  font-size: 17px;
}


.ksp-link {
  padding-bottom: 6px;

  border-bottom:
    1px solid
    var(--ksp-gold);

  color: #e8bd25 !important;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}


.ksp-footnote {
  color: #8e8a83;

  font-size: 10px;
  font-style: italic;
}


/* =========================================================
   CELDA DERECHA — IMAGEN 40%
   ========================================================= */

.ksp-card__visual {
  min-width: 0;
  min-height: 100%;

  position: relative;

  overflow: hidden;

  background: #080808;
}


.ksp-card__visual img {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.45s ease;
}


.ksp-card:hover
.ksp-card__visual img {
  transform: scale(1.015);
}


/* =========================================================
   WORDPRESS FEATURES
   ========================================================= */

.ksp-feature-grid {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  background:
    radial-gradient(
      circle at center,
      rgba(212, 174, 56, 0.12),
      #070707 75%
    );
}


.ksp-feature-grid > div {
  min-width: 0;
  min-height: 112px;

  padding: 18px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-right:
    1px solid
    rgba(212, 174, 56, 0.28);

  border-bottom:
    1px solid
    rgba(212, 174, 56, 0.28);
}


.ksp-feature-grid span {
  color: var(--ksp-gold);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 18px;
}


.ksp-feature-grid b {
  color: var(--ksp-cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.05;
}


.ksp-feature-grid .is-gold {
  background:
    rgba(212, 174, 56, 0.13);
}


/* =========================================================
   MENÚ LATERAL ANCLADO
   ========================================================= */

.ksp-side {
  width: 270px;
  min-width: 0;

  height:
    calc(
      100vh - var(--ksp-header-offset)
    );

  position: sticky;

  z-index: 20;

  top: var(--ksp-header-offset);

  align-self: start;

  overflow: hidden;

  border-left:
    1px solid
    rgba(255, 255, 255, 0.13);

  background: #050505;
}


.ksp-side__inner {
  width: 100%;
  height: 100%;

  padding:
    28px
    28px
    26px
    25px;

  display: flex;
  flex-direction: column;

  overflow-y: auto;

  scrollbar-width: none;
}


.ksp-side__inner::-webkit-scrollbar {
  display: none;
}


.ksp-side__label {
  margin-bottom: 10px;

  color: #66625d;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.ksp-side__nav {
  display: grid;
  margin-top:30px;
}


.ksp-side__nav a {
  min-height: 52px;

  display: grid;

  grid-template-columns:
    31px
    minmax(0, 1fr)
    35px;

  gap: 9px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);

  color: #7d7a74;

  font-size: 11px;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.ksp-side__nav a span,
.ksp-side__nav a b {
  font-weight: 500;
}


.ksp-side__nav a b {
  white-space: nowrap;
}


.ksp-side__nav a i {
  width: 100%;
  height: 1px;

  position: relative;

  background: transparent;
}


.ksp-side__nav a i::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 8px;
  height: 8px;

  border:
    1px solid
    transparent;

  border-radius: 50%;

  background: #050505;

  transform:
    translateY(-50%);
}


.ksp-side__nav a:hover,
.ksp-side__nav a.is-active {
  color: #e5b81e;
  transform: translateX(3px);
}


.ksp-side__nav a.is-active i {
  background: #a9840d;
}


.ksp-side__nav a.is-active i::after {
  border-color: #e5b81e;
}


.ksp-side__button {
  min-height: 42px;

  margin-top: auto;

  padding:
    11px
    17px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    #c69d19;

  border-radius: 3px;

  color: #e0b624 !important;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}



/* =========================================================
   NAVEGACIÓN MÓVIL
   ========================================================= */

.ksp-mobile-nav {
  display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

  .ksp-layout {
    grid-template-columns:
      minmax(0, 1fr)
      220px;
  }


  .ksp-main {
    padding-left: 28px;
  }


  .ksp-card__content {
    padding:
      25px
      27px;
  }


  .ksp-card ul {
    grid-template-columns: 1fr;
    gap: 6px;
  }


  .ksp-side {
    width: 220px;
  }


  .ksp-side__inner {
    padding-inline:
      20px
      18px;
  }


  .ksp-side__nav a {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      24px;
  }


  .ksp-feature-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   MÓVIL Y TABLET PEQUEÑA
   ========================================================= */

@media (max-width: 900px) {

  .ksp-page {
    --ksp-header-offset: 72px;
  }


  .ksp-layout {
    display: block;
  }


  .ksp-main {
    padding:
      0
      22px
      55px;
  }


  .ksp-side {
    display: none;
  }


  .ksp-hero {
    min-height: auto;

    padding:
      55px
      0
      36px;
  }


  .ksp-mobile-nav {
    position: sticky;

    z-index: 40;

    top: 0;

    margin:
      0
      -22px
      25px;

    padding:
      10px
      18px;

    display: flex;

    gap: 7px;

    overflow-x: auto;

    border-block:
      1px solid
      rgba(212, 174, 56, 0.25);

    background:
      rgba(5, 5, 5, 0.94);

    backdrop-filter:
      blur(12px);

    -webkit-backdrop-filter:
      blur(12px);

    scrollbar-width: none;
  }


  body.admin-bar .ksp-mobile-nav {
    top: 46px;
  }


  .ksp-mobile-nav::-webkit-scrollbar {
    display: none;
  }


  .ksp-mobile-nav a {
    flex:
      0
      0
      auto;

    padding:
      8px
      11px;

    border:
      1px solid
      rgba(255, 255, 255, 0.13);

    color: #8f8b83;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
  }


  .ksp-mobile-nav a.is-active {
    border-color: var(--ksp-gold);
    background: var(--ksp-gold);
    color: #070707;
  }


  .ksp-card {
    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 2fr);
  }


  .ksp-card h2 {
    font-size: 38px;
  }


  .ksp-card__content > p {
    font-size: 11px;
  }


  .ksp-card li {
    font-size: 10px;
  }


  .ksp-feature-grid > div {
    min-height: 100px;
  }

}


/* =========================================================
   TELÉFONO
   ========================================================= */

@media (max-width: 700px) {

  .ksp-main {
    padding-inline: 16px;
  }


  .ksp-hero {
    padding-top: 45px;
  }


  .ksp-hero h1 {
    font-size: 47px;
    line-height: 0.94;
  }


  .ksp-hero p br {
    display: none;
  }


  .ksp-mobile-nav {
    margin-inline: -16px;
  }


  .ksp-cards {
    gap: 20px;
  }


  .ksp-card {
    display: flex;
    flex-direction: column;

    scroll-margin-top: 68px;
  }


  .ksp-card__content {
    padding:
      25px
      22px
      27px;
  }


  .ksp-card h2 {
    max-width: none;

    margin-top: 18px;

    font-size: 41px;
  }


  .ksp-card__content > p {
    max-width: none;

    font-size: 12px;
  }


  .ksp-card ul {
    gap: 7px;

    margin-bottom: 22px;
  }


  .ksp-card li {
    font-size: 11px;
  }


  .ksp-actions {
    margin-top: 7px;

    align-items: flex-start;
    flex-direction: column;
  }


  .ksp-btn {
    width: 100%;
  }


  .ksp-card__visual {
    min-height: 0;

    aspect-ratio:
      1.2 / 1;
  }


  .ksp-card__visual img {
    position: static;
  }


  .ksp-feature-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .ksp-feature-grid > div {
    min-height: 120px;

    padding: 18px;
  }


  .ksp-feature-grid b {
    font-size: 18px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ksp-page *,
  .ksp-page *::before,
  .ksp-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }

}
/* =========================================================
   MENÚ FIJO — CENTRO DEL LATERAL DERECHO
   ========================================================= */

.ksp-side {
  width: 270px;

  position: fixed !important;
  right: 0;
  top: 50% !important;

  z-index: 999;

  height: min(680px, calc(100vh - 40px));

  transform: translateY(-50%);

  overflow: hidden;

  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: #050505;
}


.ksp-side__inner {
  width: 100%;
  height: 100%;

  padding:
    28px
    28px
    26px
    25px;

  display: flex;
  flex-direction: column;

  overflow-y: auto;

  scrollbar-width: none;
}


.ksp-side__inner::-webkit-scrollbar {
  display: none;
}


/* Mantiene libre la columna derecha para que
   el menú no se monte sobre las tarjetas */

.ksp-layout {
  grid-template-columns:
    minmax(0, 1fr)
    270px;
}


/* El admin bar ya no modifica la posición */

body.admin-bar .ksp-side {
  top: 50% !important;
  height: min(680px, calc(100vh - 72px));
}


/* Ocultar menú lateral en móvil */

@media (max-width: 900px) {

  .ksp-side {
    display: none !important;
  }

  .ksp-layout {
    display: block;
  }

}

/* =========================================================
   PAID ADS — MENÚ LATERAL COMO FOOTER HORIZONTAL
   ========================================================= */

/* Cuando el menú se acopla, el contenido recupera la columna
   que antes quedaba reservada en el lateral derecho. */

.ksp-layout.is-paid-ads-menu {
  grid-template-columns: minmax(0, 1fr) !important;
}


/* El mismo menú pasa a formar parte de la base de Paid Ads. */

#paid-ads > .ksp-side.is-paid-ads-menu {
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: 0;

  position: relative !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;

  z-index: 2;

  grid-column: 1 / -1;

  display: block !important;

  overflow: visible;

  border: 0;
  border-top: 1px solid rgba(212, 174, 56, 0.38);

  background:
    linear-gradient(
      105deg,
      rgba(212, 174, 56, 0.11),
      rgba(5, 5, 5, 0.98) 42%,
      #050505
    );

  transform: none !important;

  animation: kspPaidAdsMenuIn 0.42s ease both;
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__inner {
  width: 100%;
  height: auto;

  padding: 22px 26px 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px 30px;
  align-items: end;

  overflow: visible;
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__label {
  grid-column: 1 / -1;

  margin: 0;

  color: var(--ksp-gold);
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__nav {
  min-width: 0;

  margin: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__nav a {
  min-width: 0;
  min-height: 43px;

  grid-template-columns:
    27px
    minmax(0, 1fr)
    20px;

  font-size: 10px;

  transform: none;
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__nav a:hover,
#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__nav a.is-active {
  transform: translateX(3px);
}


#paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__button {
  width: max-content;
  min-width: 180px;

  margin: 0;

  white-space: nowrap;
}


@keyframes kspPaidAdsMenuIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 1180px) and (min-width: 901px) {

  #paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__inner {
    grid-template-columns: 1fr;
  }


  #paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  #paid-ads > .ksp-side.is-paid-ads-menu .ksp-side__button {
    width: 100%;
  }

}


@media (max-width: 900px) {

  .ksp-layout.is-paid-ads-menu {
    display: block;
  }


  #paid-ads > .ksp-side.is-paid-ads-menu {
    display: none !important;
  }

}

/* =========================================================
   KOOKA SOLUTIONS — HERO
   ========================================================= */

.kooka-solutions-hero {
  --kooka-black: #050505;
  --kooka-gold: #d4ae38;
  --kooka-gold-light: #e8bd25;
  --kooka-cream: #f1eadc;
  --kooka-muted: #aaa59b;

  width: 100%;
  min-height: calc(100vh - 110px);

  position: relative;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 77% 50%,
      rgba(212, 174, 56, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 0%,
      rgba(212, 174, 56, 0.07),
      transparent 32%
    ),
    var(--kooka-black);

  color: var(--kooka-cream);
}


/* Resplandor dorado */

.kooka-solutions-hero__glow {
  width: 520px;
  height: 520px;

  position: absolute;
  right: 5%;
  top: 50%;

  border: 1px solid rgba(212, 174, 56, 0.17);
  border-radius: 50%;

  box-shadow:
    0 0 100px rgba(212, 174, 56, 0.08),
    inset 0 0 100px rgba(212, 174, 56, 0.04);

  transform: translateY(-50%);
}

.kooka-solutions-hero__glow::before,
.kooka-solutions-hero__glow::after {
  content: "";

  position: absolute;
  inset: 12%;

  border: 1px solid rgba(212, 174, 56, 0.1);
  border-radius: inherit;
}

.kooka-solutions-hero__glow::after {
  inset: 26%;
}


/* Cuadrícula de fondo */

.kooka-solutions-hero__grid {
  position: absolute;
  inset: 0;

  opacity: 0.11;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    );

  background-size: 80px 80px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 50%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 50%,
      transparent
    );
}


/* Contenedor */

.kooka-solutions-hero__inner {
  width: min(100% - 48px, 1380px);

  margin: 0 auto;
  padding: 110px 0 130px;

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(320px, 0.6fr);

  gap: clamp(60px, 8vw, 140px);

  align-items: center;
}


/* Contenido principal */

.kooka-solutions-hero__content {
  max-width: 900px;
}

.kooka-solutions-hero__kicker {
  margin-bottom: 28px;

  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: var(--kooka-gold-light);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kooka-solutions-hero__kicker::before {
  content: "";

  width: 44px;
  height: 1px;

  background: var(--kooka-gold);
}

.kooka-solutions-hero h1 {
  max-width: 950px;

  margin: 0;

  color: var(--kooka-cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: clamp(64px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.87;
  letter-spacing: -0.045em;
}

.kooka-solutions-hero h1 span {
  display: block;

  color: var(--kooka-gold-light);
  font-style: italic;
}

.kooka-solutions-hero__content > p {
  max-width: 680px;

  margin: 35px 0 0;

  color: var(--kooka-muted);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.8;
}


/* Botones */

.kooka-solutions-hero__buttons {
  margin-top: 42px;

  display: flex;
  flex-wrap: wrap;

  gap: 14px;
}

.kooka-solutions-btn {
  min-height: 52px;

  padding: 15px 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--kooka-gold);
  border-radius: 3px;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.kooka-solutions-btn:hover {
  transform: translateY(-2px);
}

.kooka-solutions-btn--gold {
  background: var(--kooka-gold);
  color: #070707 !important;
}

.kooka-solutions-btn--gold:hover {
  background: var(--kooka-gold-light);
  border-color: var(--kooka-gold-light);
}

.kooka-solutions-btn--outline {
  background: transparent;
  color: var(--kooka-gold-light) !important;
}

.kooka-solutions-btn--outline:hover {
  background: rgba(212, 174, 56, 0.09);
}


/* Plataformas */

.kooka-solutions-hero__platforms {
  position: relative;

  border-top:
    1px solid
    rgba(212, 174, 56, 0.35);
}

.kooka-solutions-platform {
  min-height: 116px;

  padding: 24px 4px;

  display: grid;

  grid-template-columns:
    45px
    minmax(0, 1fr);

  gap: 18px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(212, 174, 56, 0.25);

  transition:
    padding 0.25s ease,
    background 0.25s ease;
}

.kooka-solutions-platform:hover {
  padding-inline: 18px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 174, 56, 0.1),
      transparent
    );
}

.kooka-solutions-platform > span {
  color: var(--kooka-gold);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 17px;
  font-style: italic;
}

.kooka-solutions-platform strong {
  display: block;

  color: var(--kooka-cream);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 29px;
  font-weight: 500;
  line-height: 1;
}

.kooka-solutions-platform small {
  margin-top: 7px;

  display: block;

  color: #827e76;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* Indicador inferior */

.kooka-solutions-hero__scroll {
  position: absolute;
  z-index: 3;

  left: 50%;
  bottom: 30px;

  display: flex;
  align-items: center;

  gap: 14px;

  color: #77736c !important;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-decoration: none !important;
  text-transform: uppercase;

  transform: translateX(-50%);
}

.kooka-solutions-hero__scroll i {
  width: 42px;
  height: 1px;

  position: relative;

  background: rgba(212, 174, 56, 0.5);
}

.kooka-solutions-hero__scroll i::after {
  content: "";

  width: 5px;
  height: 5px;

  position: absolute;
  right: 0;
  top: 50%;

  border-top: 1px solid var(--kooka-gold);
  border-right: 1px solid var(--kooka-gold);

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .kooka-solutions-hero__inner {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(280px, 0.75fr);

    gap: 50px;
  }

  .kooka-solutions-hero h1 {
    font-size: clamp(62px, 8vw, 86px);
  }

  .kooka-solutions-hero__glow {
    right: -150px;
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767px) {

  .kooka-solutions-hero {
    min-height: auto;
  }

  .kooka-solutions-hero__inner {
    width: min(100% - 32px, 1380px);

    padding:
      74px
      0
      90px;

    display: block;
  }

  .kooka-solutions-hero__kicker {
    margin-bottom: 22px;

    font-size: 9px;
  }

  .kooka-solutions-hero h1 {
    font-size: clamp(50px, 15vw, 69px);
    line-height: 0.9;
  }

  .kooka-solutions-hero__content > p {
    margin-top: 27px;

    font-size: 13px;
    line-height: 1.7;
  }

  .kooka-solutions-hero__buttons {
    margin-top: 31px;

    display: grid;
  }

  .kooka-solutions-btn {
    width: 100%;
  }

  .kooka-solutions-hero__platforms {
    margin-top: 68px;
  }

  .kooka-solutions-platform {
    min-height: 96px;
  }

  .kooka-solutions-platform strong {
    font-size: 25px;
  }

  .kooka-solutions-hero__glow {
    width: 400px;
    height: 400px;

    right: -230px;
    top: 28%;
  }

  .kooka-solutions-hero__grid {
    background-size: 55px 55px;
  }

  .kooka-solutions-hero__scroll {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kooka-solutions-hero *,
  .kooka-solutions-hero *::before,
  .kooka-solutions-hero *::after {
    transition: none !important;
  }

}
/* =========================================================
   SOLUTIONS — WORDPRESS
   ========================================================= */

.kooka-solutions-section {
  --kooka-black: #080808;
  --kooka-soft-black: #11110f;
  --kooka-gold: #d4ae38;
  --kooka-gold-light: #e8bd25;
  --kooka-cream: #f1eadc;
  --kooka-muted: #aaa59b;

  width: 100%;
  padding: clamp(85px, 9vw, 145px) 24px;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(212, 174, 56, 0.09),
      transparent 28%
    ),
    var(--kooka-black);

  color: var(--kooka-cream);
}

.kooka-solutions-section__inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}


/* Heading */

.kooka-solutions-section__heading {
  margin-bottom: clamp(55px, 7vw, 95px);

  display: grid;
  grid-template-columns: 80px minmax(300px, 0.9fr) minmax(300px, 0.7fr);
  gap: clamp(30px, 5vw, 80px);

  align-items: end;
}

.kooka-solutions-section__number {
  color: var(--kooka-gold);

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-style: italic;
}

.kooka-solutions-section__kicker {
  margin-bottom: 20px;

  display: block;

  color: var(--kooka-gold);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.kooka-solutions-section__intro h2 {
  margin: 0;

  color: var(--kooka-cream);

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(50px, 5vw, 78px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.kooka-solutions-section__intro h2 span {
  display: block;

  color: var(--kooka-gold-light);
  font-style: italic;
}

.kooka-solutions-section__heading > p {
  max-width: 520px;
  margin: 0;

  color: var(--kooka-muted);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
}


/* Functionality grid */

.kooka-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-top: 1px solid rgba(212, 174, 56, 0.25);
  border-left: 1px solid rgba(212, 174, 56, 0.25);
}

.kooka-solution-card {
  min-height: 270px;
  padding: clamp(28px, 3vw, 43px);

  position: relative;

  border-right: 1px solid rgba(212, 174, 56, 0.25);
  border-bottom: 1px solid rgba(212, 174, 56, 0.25);

  background: rgba(255, 255, 255, 0.012);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.kooka-solution-card:hover {
  z-index: 2;

  background:
    linear-gradient(
      145deg,
      rgba(212, 174, 56, 0.13),
      rgba(212, 174, 56, 0.025)
    );

  transform: translateY(-4px);
}

.kooka-solution-card > span {
  margin-bottom: 52px;

  display: block;

  color: var(--kooka-gold);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.kooka-solution-card h3 {
  margin: 0 0 15px;

  color: var(--kooka-cream);

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(27px, 2.1vw, 34px);
  font-weight: 500;
  line-height: 1.05;
}

.kooka-solution-card p {
  max-width: 340px;
  margin: 0;

  color: #918d85;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}


/* Tablet */

@media (max-width: 1000px) {

  .kooka-solutions-section__heading {
    grid-template-columns: 55px 1fr;
  }

  .kooka-solutions-section__heading > p {
    grid-column: 2;
  }

  .kooka-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* Mobile */

@media (max-width: 767px) {

  .kooka-solutions-section {
    padding-inline: 16px;
  }

  .kooka-solutions-section__heading {
    display: block;
  }

  .kooka-solutions-section__number {
    margin-bottom: 25px;
  }

  .kooka-solutions-section__intro h2 {
    font-size: clamp(49px, 14vw, 64px);
  }

  .kooka-solutions-section__heading > p {
    margin-top: 28px;

    font-size: 13px;
    line-height: 1.7;
  }

  .kooka-solutions-grid {
    grid-template-columns: 1fr;
  }

  .kooka-solution-card {
    min-height: auto;
    padding: 30px 26px 34px;
  }

  .kooka-solution-card > span {
    margin-bottom: 30px;
  }

}
/* =========================================================
   WORDPRESS SOLUTIONS
   ========================================================= */

.kooka-wp-solutions {
  width: 100%;
  padding: 70px 32px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 76% 45%,
      rgba(212, 174, 56, 0.055),
      transparent 34%
    ),
    #080808;

  color: #f1eadc;
}

.kooka-wp-solutions__inner {
  width: min(100%, 1160px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 78px;
  align-items: center;
}


/* Hidden SVG library */

.kooka-wp-solutions__svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* =========================================================
   INTRO
   ========================================================= */

.kooka-wp-solutions__intro {
  max-width: 280px;
}

.kooka-wp-solutions__logo {
  width: 45px;
  height: 45px;
  margin-bottom: 22px;
  color: #d4ae38;
}

.kooka-wp-solutions__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kooka-wp-solutions__eyebrow {
  display: block;
  margin-bottom: 13px;

  color: #d4ae38;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kooka-wp-solutions__intro h2 {
  margin: 0;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.kooka-wp-solutions__intro h2 span {
  display: block;
  color: #e8bd25;
  font-style: italic;
}

.kooka-wp-solutions__intro > p {
  margin: 21px 0 0;

  color: #aaa59b;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

.kooka-wp-solutions__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: 23px;
  padding-bottom: 6px;

  border-bottom: 1px solid rgba(212, 174, 56, 0.5);

  color: #d4ae38 !important;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.kooka-wp-solutions__link span {
  font-size: 17px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.kooka-wp-solutions__link:hover span {
  transform: translateX(4px);
}


/* =========================================================
   FEATURES
   ========================================================= */

.kooka-wp-solutions__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kooka-wp-feature {
  min-width: 0;
  min-height: 112px;
  padding: 17px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  border: 1px solid rgba(212, 174, 56, 0.16);
  border-radius: 3px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.kooka-wp-feature:hover {
  border-color: rgba(212, 174, 56, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(212, 174, 56, 0.095),
      rgba(212, 174, 56, 0.018)
    );

  transform: translateY(-2px);
}

.kooka-wp-feature > svg {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  fill: none;
  stroke: #d4ae38;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kooka-wp-feature > div {
  min-width: 0;
}

.kooka-wp-feature h3 {
  margin: 1px 0 6px;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.05;
}

.kooka-wp-feature p {
  margin: 0;

  color: #8f8a82;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .kooka-wp-solutions__inner {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 45px;
  }

  .kooka-wp-solutions__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 800px) {

  .kooka-wp-solutions {
    padding: 65px 28px;
  }

  .kooka-wp-solutions__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .kooka-wp-solutions__intro {
    max-width: 520px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .kooka-wp-solutions {
    padding: 55px 20px;
  }

  .kooka-wp-solutions__inner {
    gap: 35px;
  }

  .kooka-wp-solutions__intro h2 {
    font-size: 47px;
  }

  .kooka-wp-solutions__features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kooka-wp-feature {
    min-height: 0;
    padding: 17px;
  }

}
/* =========================================================
   SHOPIFY SOLUTIONS
   ========================================================= */

.kooka-shopify-solutions {
  width: 100%;
  padding: 70px 32px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 23% 48%,
      rgba(149, 191, 71, 0.065),
      transparent 34%
    ),
    #0c0c0b;

  color: #f1eadc;
}

.kooka-shopify-solutions__inner {
  width: min(100%, 1160px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 78px;
  align-items: center;
}

.kooka-shopify-solutions__svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* INTRO */

.kooka-shopify-solutions__intro {
  width: 100%;
  max-width: 280px;
}

.kooka-shopify-solutions__logo {
  width: 47px;
  height: 54px;
  margin-bottom: 20px;
}

.kooka-shopify-solutions__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.kooka-shopify-solutions__eyebrow {
  display: block;
  margin-bottom: 13px;

  color: #d4ae38;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kooka-shopify-solutions__intro h2 {
  margin: 0;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.kooka-shopify-solutions__intro h2 span {
  display: block;
  color: #e8bd25;
  font-style: italic;
}

.kooka-shopify-solutions__intro > p {
  margin: 21px 0 0;

  color: #aaa59b;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

.kooka-shopify-solutions__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: 23px;
  padding-bottom: 6px;

  border-bottom: 1px solid rgba(212, 174, 56, 0.5);

  color: #d4ae38 !important;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.kooka-shopify-solutions__link span {
  font-size: 17px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.kooka-shopify-solutions__link:hover span {
  transform: translateX(4px);
}


/* FEATURES */

.kooka-shopify-solutions__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kooka-shopify-feature {
  min-width: 0;
  min-height: 112px;
  padding: 17px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  border: 1px solid rgba(212, 174, 56, 0.16);
  border-radius: 3px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.kooka-shopify-feature:hover {
  border-color: rgba(149, 191, 71, 0.48);

  background:
    linear-gradient(
      145deg,
      rgba(149, 191, 71, 0.1),
      rgba(149, 191, 71, 0.018)
    );

  transform: translateY(-2px);
}

.kooka-shopify-feature > svg {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  fill: none;
  stroke: #d4ae38;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kooka-shopify-feature > div {
  min-width: 0;
}

.kooka-shopify-feature h3 {
  margin: 1px 0 6px;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.05;
}

.kooka-shopify-feature p {
  margin: 0;

  color: #8f8a82;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}


/* TABLET */

@media (max-width: 1024px) {

  .kooka-shopify-solutions__inner {
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 45px;
  }

  .kooka-shopify-solutions__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* TABLET VERTICAL */

@media (max-width: 800px) {

  .kooka-shopify-solutions {
    padding: 65px 28px;
  }

  .kooka-shopify-solutions__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 42px;
  }

  .kooka-shopify-solutions__intro {
    max-width: 520px;
    order: 1;
  }

  .kooka-shopify-solutions__features {
    order: 2;
  }

}


/* MOBILE */

@media (max-width: 560px) {

  .kooka-shopify-solutions {
    padding: 55px 20px;
  }

  .kooka-shopify-solutions__inner {
    gap: 35px;
  }

  .kooka-shopify-solutions__intro h2 {
    font-size: 47px;
  }

  .kooka-shopify-solutions__features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kooka-shopify-feature {
    min-height: 0;
    padding: 17px;
  }

}
/* =========================================================
   CUSTOM DEVELOPMENT
   ========================================================= */

.kooka-custom-solutions {
  width: 100%;
  padding: 70px 32px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(131, 112, 255, 0.075),
      transparent 35%
    ),
    #080808;

  color: #f1eadc;
}

.kooka-custom-solutions__inner {
  width: min(100%, 1160px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 78px;
  align-items: center;
}

.kooka-custom-solutions__svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* =========================================================
   INTRO
   ========================================================= */

.kooka-custom-solutions__intro {
  width: 100%;
  max-width: 280px;
}

.kooka-custom-solutions__logo {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;

  color: #d4ae38;
}

.kooka-custom-solutions__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kooka-custom-solutions__eyebrow {
  display: block;
  margin-bottom: 13px;

  color: #d4ae38;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kooka-custom-solutions__intro h2 {
  margin: 0;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.kooka-custom-solutions__intro h2 span {
  display: block;

  color: #e8bd25;
  font-style: italic;
}

.kooka-custom-solutions__intro > p {
  margin: 21px 0 0;

  color: #aaa59b;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
}

.kooka-custom-solutions__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: 23px;
  padding-bottom: 6px;

  border-bottom: 1px solid rgba(212, 174, 56, 0.5);

  color: #d4ae38 !important;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.kooka-custom-solutions__link span {
  font-size: 17px;
  line-height: 1;

  transition: transform 0.2s ease;
}

.kooka-custom-solutions__link:hover span {
  transform: translateX(4px);
}


/* =========================================================
   FEATURES
   ========================================================= */

.kooka-custom-solutions__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kooka-custom-feature {
  min-width: 0;
  min-height: 112px;
  padding: 17px;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  border: 1px solid rgba(212, 174, 56, 0.16);
  border-radius: 3px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.kooka-custom-feature:hover {
  border-color: rgba(131, 112, 255, 0.52);

  background:
    linear-gradient(
      145deg,
      rgba(131, 112, 255, 0.11),
      rgba(131, 112, 255, 0.018)
    );

  transform: translateY(-2px);
}

.kooka-custom-feature > svg {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  fill: none;
  stroke: #d4ae38;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kooka-custom-feature > div {
  min-width: 0;
}

.kooka-custom-feature h3 {
  margin: 1px 0 6px;

  color: #f1eadc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.05;
}

.kooka-custom-feature p {
  margin: 0;

  color: #8f8a82;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .kooka-custom-solutions__inner {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 45px;
  }

  .kooka-custom-solutions__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 800px) {

  .kooka-custom-solutions {
    padding: 65px 28px;
  }

  .kooka-custom-solutions__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .kooka-custom-solutions__intro {
    max-width: 520px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .kooka-custom-solutions {
    padding: 55px 20px;
  }

  .kooka-custom-solutions__inner {
    gap: 35px;
  }

  .kooka-custom-solutions__intro h2 {
    font-size: 47px;
  }

  .kooka-custom-solutions__features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kooka-custom-feature {
    min-height: 0;
    padding: 17px;
  }

}
/* =========================================================
   FINAL KOOKA CTA
   ========================================================= */

.kooka-final-cta {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 760px;
  padding: 95px 30px 105px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(232, 189, 37, 0.13) 0%,
      rgba(212, 174, 56, 0.035) 27%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #080808 0%,
      #0c0b08 48%,
      #050505 100%
    );

  color: # #f4eee2;
}


/* =========================================================
   BACKGROUND EFFECTS
   ========================================================= */

.kooka-final-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 42%,
      rgba(232, 189, 37, 0.045) 50%,
      transparent 58%,
      transparent 100%
    );

  transform: translateX(-100%);
  animation: kooka-final-light-sweep 8s ease-in-out infinite;
}

.kooka-final-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 189, 37, 0.65),
    transparent
  );
}

.kooka-final-cta__noise {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;

  opacity: 0.16;

  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 79px,
      rgba(255, 255, 255, 0.025) 80px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 79px,
      rgba(255, 255, 255, 0.018) 80px
    );

  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 25%,
    #000 75%,
    transparent
  );
}

.kooka-final-cta__glow {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  background: rgba(232, 189, 37, 0.065);
  filter: blur(85px);

  transform: translate(-50%, -50%);
  animation: kooka-final-glow 5s ease-in-out infinite;
}


/* =========================================================
   GIANT BACKGROUND WORD
   ========================================================= */

.kooka-final-cta__giant-word {
  position: absolute;
  z-index: -1;
  top: 47%;
  left: 50%;

  color: transparent;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(130px, 21vw, 340px);
  font-weight: 800;
  line-height: 0.75;
  letter-spacing: -0.075em;
  white-space: nowrap;

  -webkit-text-stroke: 1px rgba(232, 189, 37, 0.08);

  transform: translate(-50%, -50%);
  user-select: none;
}


/* =========================================================
   ORBITS
   ========================================================= */

.kooka-final-cta__orbit {
  position: absolute;
  z-index: -1;
  top: 43%;
  left: 50%;

  border: 1px solid rgba(232, 189, 37, 0.12);
  border-radius: 50%;

  pointer-events: none;
}

.kooka-final-cta__orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #e8bd25;
  box-shadow:
    0 0 10px rgba(232, 189, 37, 0.75),
    0 0 30px rgba(232, 189, 37, 0.42);
}

.kooka-final-cta__orbit--one {
  width: 410px;
  height: 410px;

  transform: translate(-50%, -50%) rotate(-18deg);
  animation: kooka-final-orbit-one 16s linear infinite;
}

.kooka-final-cta__orbit--two {
  width: 530px;
  height: 285px;

  opacity: 0.55;

  transform: translate(-50%, -50%) rotate(16deg);
  animation: kooka-final-orbit-two 20s linear infinite reverse;
}


/* =========================================================
   CONTENT
   ========================================================= */

.kooka-final-cta__inner {
  position: relative;
  z-index: 2;

  width: min(100%, 920px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.kooka-final-cta__eyebrow {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 24px;

  color: #d4ae38;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.kooka-final-cta__eyebrow::before,
.kooka-final-cta__eyebrow::after {
  content: "";

  width: 32px;
  height: 1px;

  background: rgba(212, 174, 56, 0.55);
}


/* =========================================================
   KOOKA IMAGE
   ========================================================= */

.kooka-final-cta__bird-wrap {
  position: relative;

  width: clamp(145px, 18vw, 205px);
  aspect-ratio: 1;

  margin-bottom: 25px;

  display: grid;
  place-items: center;
}

.kooka-final-cta__bird-halo {
  position: absolute;
  inset: 3%;

  border: 1px solid rgba(232, 189, 37, 0.24);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(232, 189, 37, 0.13),
      rgba(232, 189, 37, 0.025) 55%,
      transparent 72%
    );

  box-shadow:
    0 0 60px rgba(232, 189, 37, 0.07),
    inset 0 0 40px rgba(232, 189, 37, 0.045);

  animation: kooka-final-halo 4s ease-in-out infinite;
}

.kooka-final-cta__bird {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(0 20px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(232, 189, 37, 0.09));

  animation: kooka-final-float 4.5s ease-in-out infinite;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.kooka-final-cta h2 {
  max-width: 900px;
  margin: 0;

  color: #f4eee2;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(58px, 7.7vw, 102px);
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.045em;
}

.kooka-final-cta h2 span {
  display: block;

  margin-top: 10px;

  color: #e8bd25;
  font-style: italic;
}

.kooka-final-cta__inner > p {
  max-width: 660px;
  margin: 30px auto 0;

  color: #aaa59b;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.kooka-final-cta__actions {
  margin-top: 34px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
}

.kooka-final-cta__button {
  position: relative;
  overflow: hidden;

  min-width: 190px;
  min-height: 55px;
  padding: 16px 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  border: 1px solid #d4ae38;
  border-radius: 2px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  text-transform: uppercase;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.kooka-final-cta__button svg {
  position: relative;
  z-index: 2;

  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.25s ease;
}

.kooka-final-cta__button span {
  position: relative;
  z-index: 2;
}

.kooka-final-cta__button--primary {
  color: #080808 !important;
  background: #e8bd25;
}

.kooka-final-cta__button--primary::before {
  content: "";
  position: absolute;
  inset: 0;

  background: #f5d65a;

  transform: translateX(-102%);
  transition: transform 0.3s ease;
}

.kooka-final-cta__button--secondary {
  color: #e8bd25 !important;
  background: rgba(232, 189, 37, 0.025);
  backdrop-filter: blur(10px);
}

.kooka-final-cta__button:hover {
  transform: translateY(-3px);
}

.kooka-final-cta__button--primary:hover {
  box-shadow: 0 14px 35px rgba(232, 189, 37, 0.18);
}

.kooka-final-cta__button--primary:hover::before {
  transform: translateX(0);
}

.kooka-final-cta__button--secondary:hover {
  color: #080808 !important;
  background: #e8bd25;
  box-shadow: 0 14px 35px rgba(232, 189, 37, 0.14);
}

.kooka-final-cta__button:hover svg {
  transform: translateX(4px);
}

.kooka-final-cta__button:focus-visible {
  outline: 2px solid #f4eee2;
  outline-offset: 4px;
}

.kooka-final-cta__note {
  margin-top: 24px;

  color: #6f6b63;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes kooka-final-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-11px) rotate(1deg);
  }
}

@keyframes kooka-final-halo {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes kooka-final-glow {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes kooka-final-light-sweep {
  0%,
  25% {
    transform: translateX(-110%);
  }

  60%,
  100% {
    transform: translateX(110%);
  }
}

@keyframes kooka-final-orbit-one {
  from {
    transform: translate(-50%, -50%) rotate(-18deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(342deg);
  }
}

@keyframes kooka-final-orbit-two {
  from {
    transform: translate(-50%, -50%) rotate(16deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(376deg);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

  .kooka-final-cta {
    min-height: 700px;
    padding: 80px 26px 90px;
  }

  .kooka-final-cta__orbit--one {
    width: 350px;
    height: 350px;
  }

  .kooka-final-cta__orbit--two {
    width: 440px;
    height: 250px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .kooka-final-cta {
    min-height: 0;
    padding: 70px 20px 78px;
  }

  .kooka-final-cta__eyebrow {
    letter-spacing: 0.13em;
  }

  .kooka-final-cta__eyebrow::before,
  .kooka-final-cta__eyebrow::after {
    width: 18px;
  }

  .kooka-final-cta__bird-wrap {
    width: 145px;
    margin-bottom: 21px;
  }

  .kooka-final-cta h2 {
    font-size: clamp(49px, 15vw, 66px);
    line-height: 0.88;
  }

  .kooka-final-cta h2 span {
    margin-top: 8px;
  }

  .kooka-final-cta__inner > p {
    margin-top: 25px;
    font-size: 13px;
    line-height: 1.7;
  }

  .kooka-final-cta__actions {
    width: 100%;
    margin-top: 30px;
    gap: 10px;
  }

  .kooka-final-cta__button {
    width: 100%;
    min-width: 0;
  }

  .kooka-final-cta__giant-word {
    top: 42%;
    font-size: 34vw;
  }

  .kooka-final-cta__orbit--one {
    top: 38%;
    width: 270px;
    height: 270px;
  }

  .kooka-final-cta__orbit--two {
    top: 38%;
    width: 340px;
    height: 205px;
  }

  .kooka-final-cta__note {
    max-width: 290px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kooka-final-cta::before,
  .kooka-final-cta__glow,
  .kooka-final-cta__orbit,
  .kooka-final-cta__bird,
  .kooka-final-cta__bird-halo {
    animation: none;
  }

}
/* =========================================================
   KOOKA FOUNDER BLOCK
   ========================================================= */

.kooka-founder {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 520px;
  min-height: 0;
  overflow: hidden;

  background: #080808;
  color: #f2eadc;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.kooka-founder__background {
  position: absolute;
  z-index: -3;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* Darkens the text area without hiding the photograph */

.kooka-founder__overlay {
  position: absolute;
  z-index: -2;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.98) 0%,
      rgba(5, 5, 5, 0.94) 28%,
      rgba(5, 5, 5, 0.74) 47%,
      rgba(5, 5, 5, 0.15) 69%,
      rgba(5, 5, 5, 0.04) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 5, 5, 0.55) 0%,
      transparent 36%
    );
}


/* =========================================================
   GIANT BACKGROUND WORD
   ========================================================= */

.kooka-founder__word {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 4.5%;

  color: transparent;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(105px, 13vw, 210px);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.06em;
  white-space: nowrap;

  -webkit-text-stroke: 1px rgba(212, 174, 56, 0.09);

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.kooka-founder__inner {
  position: relative;

  width: min(100%, 1440px);
  height: 100%;
  margin: 0 auto;
  padding: 78px 64px 48px;

  display: flex;
  align-items: center;
}

.kooka-founder__content {
  width: min(100%, 650px);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.kooka-founder__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 21px;

  color: #d6a84d;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.kooka-founder__eyebrow i {
  position: relative;

  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.kooka-founder__eyebrow i::before,
.kooka-founder__eyebrow i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 1px;

  background: #8c72e8;
  transform: translate(-50%, -50%);
}

.kooka-founder__eyebrow i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.kooka-founder__eyebrow i {
  transform: rotate(45deg);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.kooka-founder h2 {
  max-width: 650px;
  margin: 0;

  color: #eee7dc;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.kooka-founder h2 span {
  display: block;
  margin-top: 8px;

  color: #d6a84d;
  font-style: italic;
  font-weight: 400;
}

.kooka-founder__line {
  width: 46px;
  height: 1px;
  margin: 25px 0 20px;

  background: #d6a84d;
}

.kooka-founder__content > p {
  max-width: 500px;
  margin: 0;

  color: #b6b0a7;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}


/* =========================================================
   LINK
   ========================================================= */

.kooka-founder__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;

  margin-top: 22px;
  padding-bottom: 7px;

  border-bottom: 1px solid rgba(214, 168, 77, 0.55);

  color: #d6a84d !important;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.kooka-founder__link span {
  font-size: 19px;
  font-weight: 400;
  line-height: 0.8;

  transition: transform 0.25s ease;
}

.kooka-founder__link:hover span {
  transform: translateX(5px);
}


/* =========================================================
   SIGNATURE
   ========================================================= */

.kooka-founder__signature {
  position: absolute;
  right: 31%;
  bottom: 38px;

  padding-left: 18px;
  border-left: 1px solid rgba(214, 168, 77, 0.7);

  font-family: "Montserrat", Arial, sans-serif;
}

.kooka-founder__signature span,
.kooka-founder__signature small {
  display: block;
}

.kooka-founder__signature span {
  margin-bottom: 5px;

  color: #d6a84d;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.kooka-founder__signature small {
  color: #d2cec6;

  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .kooka-founder {
    height: 500px;
  }

  .kooka-founder__inner {
    padding: 70px 38px 42px;
  }

  .kooka-founder__background {
    object-position: 58% center;
  }

  .kooka-founder__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 5, 5, 0.98) 0%,
        rgba(5, 5, 5, 0.91) 42%,
        rgba(5, 5, 5, 0.4) 72%,
        rgba(5, 5, 5, 0.12) 100%
      ),
      linear-gradient(
        0deg,
        rgba(5, 5, 5, 0.55),
        transparent 40%
      );
  }

  .kooka-founder__content {
    max-width: 570px;
  }

  .kooka-founder__signature {
    right: 25px;
    bottom: 28px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .kooka-founder {
    height: 560px;
  }

  .kooka-founder__background {
    object-position: 65% center;
  }

  .kooka-founder__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 5, 5, 0.96) 0%,
        rgba(5, 5, 5, 0.79) 60%,
        rgba(5, 5, 5, 0.34) 100%
      ),
      linear-gradient(
        0deg,
        rgba(5, 5, 5, 0.93) 0%,
        rgba(5, 5, 5, 0.56) 48%,
        rgba(5, 5, 5, 0.18) 100%
      );
  }

  .kooka-founder__word {
    top: 19px;
    left: 18px;

    font-size: 25vw;
  }

  .kooka-founder__inner {
    padding: 53px 22px 28px;
    align-items: flex-start;
  }

  .kooka-founder__content {
    width: 100%;
  }

  .kooka-founder__eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: 0.17em;
  }

  .kooka-founder h2 {
    max-width: 420px;

    font-size: clamp(38px, 11vw, 50px);
    line-height: 0.94;
  }

  .kooka-founder__content > p {
    max-width: 390px;

    font-size: 12px;
    line-height: 1.65;
  }

  .kooka-founder__line {
    margin: 20px 0 17px;
  }

  .kooka-founder__link {
    margin-top: 19px;
    font-size: 10px;
  }

  .kooka-founder__signature {
    right: auto;
    bottom: 25px;
    left: 22px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .kooka-founder {
    height: 575px;
  }

  .kooka-founder h2 {
    font-size: 37px;
  }

}
/* CORRECCIÓN DE LA FOTOGRAFÍA */

.kooka-founder__background {
  inset: auto 3% auto auto !important;
  top: 50% !important;

  width: auto !important;
  height: 180% !important;

  object-fit: contain !important;
  object-position: center !important;

  opacity: 1 !important;
  transform: translateY(-50%);
}

/* Oscuridad solo detrás del texto */

.kooka-founder__overlay {
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      rgba(5, 5, 5, 0.98) 34%,
      rgba(5, 5, 5, 0.88) 47%,
      rgba(5, 5, 5, 0.38) 60%,
      rgba(5, 5, 5, 0.06) 74%,
      transparent 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 5, 5, 0.48) 0%,
      transparent 35%
    ) !important;
}

@media (max-width: 1024px) {
  .kooka-founder__background {
    right: -6% !important;
    height: 165% !important;
  }
}

@media (max-width: 680px) {
  .kooka-founder__background {
    right: -38% !important;
    height: 140% !important;
    opacity: 0.72 !important;
  }

  .kooka-founder__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 5, 5, 0.96) 0%,
        rgba(5, 5, 5, 0.84) 55%,
        rgba(5, 5, 5, 0.28) 100%
      ),
      linear-gradient(
        0deg,
        rgba(5, 5, 5, 0.92) 0%,
        rgba(5, 5, 5, 0.32) 72%,
        transparent 100%
      ) !important;
  }
}
.kb-admin-header {
    grid-template-columns: 757px 1fr auto !important;
}
/* =========================================================
   KOOKA DIGITAL — WEBSITE DESIGN HERO
   CSS COMPLETO · BARRA DE BENEFICIOS A TODO EL ANCHO
   ========================================================= */

.kooka-web-hero {
    --kooka-black: #030303;
    --kooka-black-soft: #080808;
    --kooka-gold: #d7ad2d;
    --kooka-gold-light: #f1d064;
    --kooka-white: #f7f4eb;
    --kooka-grey: #aaa69d;
    --kooka-border: rgba(215, 173, 45, 0.24);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    min-height: 620px;
    padding-bottom: 74px;

    display: flex;
    align-items: center;

    color: var(--kooka-white);

    background:
        radial-gradient(
            circle at 73% 42%,
            rgba(215, 173, 45, 0.1),
            transparent 31%
        ),
        linear-gradient(
            110deg,
            #020202 0%,
            #060606 54%,
            #020202 100%
        );

    border-bottom: 1px solid var(--kooka-border);
}

/* =========================================================
   FONDO
   ========================================================= */

.kooka-web-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -3;

    pointer-events: none;
    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}

.kooka-web-hero::after {
    content: "";

    position: absolute;
    inset: 0 auto 74px 0;
    z-index: -2;

    width: 64%;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(2, 2, 2, 1) 0%,
        rgba(2, 2, 2, 0.99) 50%,
        rgba(2, 2, 2, 0.82) 73%,
        rgba(2, 2, 2, 0.18) 96%,
        transparent 100%
    );
}

.kooka-web-hero__glow {
    position: absolute;
    top: 13%;
    left: 5%;

    z-index: -1;

    width: 320px;
    height: 320px;

    pointer-events: none;
    border-radius: 50%;

    background: rgba(215, 173, 45, 0.065);
    filter: blur(115px);
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.kooka-web-hero__container {
    position: relative;
    z-index: 2;

    width: min(1420px, calc(100% - 80px));
    min-height: 546px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(520px, 0.95fr)
        minmax(620px, 1.2fr);
    padding-left: 50px;
    align-items: center;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.kooka-web-hero__content {
    /*
     * Debe permanecer static: así la barra absoluta de beneficios
     * toma como referencia el contenedor completo, no esta columna.
     */
    position: static;
    z-index: 4;

    width: 100%;
    max-width: 705px;

    padding: 22px 0;

    margin-top: -18px;
    margin-bottom: 18px;
    transform: none;
}

.kooka-web-hero__eyebrow {
    position: relative;

    margin: 0 0 18px;
    padding-left: 52px;

    color: var(--kooka-gold);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.kooka-web-hero__eyebrow::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 33px;
    height: 1px;

    background: var(--kooka-gold);

    transform: translateY(-50%);
}

.kooka-web-hero__title {
    max-width: 690px;
    margin: 0;

    color: var(--kooka-white);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(58px, 4.75vw, 82px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.038em;

    text-wrap: balance;
}

.kooka-web-hero__title span {
    display: block;
    color: var(--kooka-gold);
}

.kooka-web-hero__description {
    max-width: 655px;

    margin: 24px 0 0;

    color: var(--kooka-grey);

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

/* =========================================================
   BOTONES
   ========================================================= */

.kooka-web-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;
    margin-top: 29px;
}

.kooka-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
    padding: 14px 27px;

    border: 1px solid transparent;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.055em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform 220ms ease,
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.kooka-button:hover {
    transform: translateY(-2px);
}

.kooka-button--primary {
    color: #070707;

    background: linear-gradient(
        135deg,
        var(--kooka-gold-light),
        var(--kooka-gold)
    );

    box-shadow:
        0 14px 35px rgba(215, 173, 45, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.kooka-button--primary:hover {
    color: #030303;

    box-shadow:
        0 18px 46px rgba(215, 173, 45, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.kooka-button--primary span {
    font-size: 19px;
    font-weight: 400;

    transition: transform 220ms ease;
}

.kooka-button--primary:hover span {
    transform: translateX(4px);
}

.kooka-button--secondary {
    color: var(--kooka-white);

    border-color: rgba(215, 173, 45, 0.58);

    background: rgba(255, 255, 255, 0.012);

    backdrop-filter: blur(7px);
}

.kooka-button--secondary:hover {
    color: var(--kooka-gold-light);
    border-color: var(--kooka-gold);

    background: rgba(215, 173, 45, 0.06);
}

/* =========================================================
   IMAGEN DEL HERO
   ========================================================= */

.kooka-web-hero__visual {
    position: absolute;
    top: 0;

    right: calc(
        (100vw - min(1420px, calc(100vw - 80px))) / -2
    );

    z-index: 1;

    width: min(66vw, 1100px);
    height: 546px;
}

.kooka-web-hero__image {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 2, 2, 1) 0%,
            rgba(2, 2, 2, 0.84) 13%,
            rgba(2, 2, 2, 0.37) 31%,
            rgba(2, 2, 2, 0.04) 52%,
            transparent 100%
        ),
        url("/wp-content/uploads/2026/08/kooka-website-design-hero.webp");

    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.008);

    animation:
        kookaHeroReveal
        1.15s
        cubic-bezier(.2, .75, .2, 1)
        both;
}

.kooka-web-hero__image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.09) 0%,
            transparent 44%,
            rgba(0, 0, 0, 0.18) 100%
        );
}

@keyframes kookaHeroReveal {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1.008);
    }
}

/* =========================================================
   BARRA DE BENEFICIOS A TODO EL ANCHO
   ========================================================= */

.kooka-web-hero__features {
    position: absolute;
    left: 50%;
    bottom: 0;

    z-index: 6;

    width: 100vw;
    min-height: 74px;
    margin: 0;
    padding:
        0
        max(40px, calc((100vw - 1420px) / 2));

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    transform: translateX(-50%);

    border-top: 1px solid rgba(215, 173, 45, 0.24);
    border-bottom: 1px solid rgba(215, 173, 45, 0.14);

    background:
        linear-gradient(
            180deg,
            rgba(9, 9, 9, 0.97),
            rgba(3, 3, 3, 0.99)
        );

    box-shadow:
        0 -14px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);

    list-style: none;
    overflow: hidden;
}

.kooka-web-hero__features li {
    position: relative;

    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
    padding: 14px 24px;

    color: #d8d4cb;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;

    text-align: center;
    white-space: normal;
}

.kooka-web-hero__features li:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 16px;
    right: 0;
    bottom: 16px;

    width: 1px;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(215, 173, 45, 0.3),
        transparent
    );
}

.kooka-feature-icon {
    width: 26px;
    height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 26px;

    color: var(--kooka-gold);

    border: 1px solid rgba(215, 173, 45, 0.72);
    border-radius: 50%;

    background: rgba(215, 173, 45, 0.03);

    font-size: 10px;
    line-height: 1;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.012),
        0 0 16px rgba(215, 173, 45, 0.055);
}

/* =========================================================
   ESCRITORIO MEDIO
   ========================================================= */

@media (max-width: 1280px) {
    .kooka-web-hero {
        min-height: 600px;
        padding-bottom: 70px;
    }

    .kooka-web-hero::after {
        bottom: 70px;
    }

    .kooka-web-hero__container {
        width: min(100% - 56px, 1180px);
        min-height: 530px;

        grid-template-columns:
            minmax(465px, 0.96fr)
            minmax(500px, 1fr);
    }

    .kooka-web-hero__content {
        max-width: 625px;
        padding: 24px 0;
    }

    .kooka-web-hero__title {
        font-size: clamp(54px, 5.25vw, 73px);
    }

    .kooka-web-hero__description {
        max-width: 590px;
        font-size: 15px;
    }

    .kooka-web-hero__visual {
        right: -28px;
        width: 65vw;
        height: 530px;
    }

    .kooka-web-hero__features {
        min-height: 70px;
        padding-inline: 28px;
    }

    .kooka-web-hero__features li {
        min-height: 70px;
        padding: 13px 16px;
        font-size: 10.5px;
    }
}

/* =========================================================
   TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1024px) {
    .kooka-web-hero {
        min-height: 580px;
        padding-bottom: 68px;
    }

    .kooka-web-hero::after {
        bottom: 68px;
    }

    .kooka-web-hero__container {
        width: min(100% - 38px, 980px);
        min-height: 512px;

        grid-template-columns:
            minmax(410px, 0.96fr)
            minmax(420px, 1fr);
    }

    .kooka-web-hero__content {
        max-width: 555px;
        padding: 22px 0;
    }

    .kooka-web-hero__title {
        font-size: clamp(49px, 5.7vw, 64px);
    }

    .kooka-web-hero__description {
        max-width: 515px;
        margin-top: 20px;

        font-size: 14px;
        line-height: 1.65;
    }

    .kooka-web-hero__actions {
        margin-top: 25px;
    }

    .kooka-web-hero__visual {
        right: -65px;
        width: 69vw;
        height: 512px;
    }

    .kooka-web-hero__features {
        min-height: 68px;
        padding-inline: 18px;
    }

    .kooka-web-hero__features li {
        min-height: 68px;

        gap: 8px;
        padding: 12px 10px;

        font-size: 10px;
    }

    .kooka-feature-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
}

/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 860px) {
    .kooka-web-hero {
        min-height: auto;
        padding-bottom: 0;

        align-items: stretch;

        background: #030303;
    }

    .kooka-web-hero::after {
        display: none;
    }

    .kooka-web-hero__container {
        width: 100%;
        min-height: auto;
        padding-left:20px;
        padding-right:20px;
        display: flex;
        flex-direction: column;
    }

    .kooka-web-hero__visual {
        position: relative;
        inset: auto;

        order: 1;

        width: 100%;
        height: clamp(285px, 59vw, 450px);
    }

    .kooka-web-hero__image {
        background-image:
            linear-gradient(
                180deg,
                rgba(2, 2, 2, 0.02) 0%,
                rgba(2, 2, 2, 0.07) 53%,
                rgba(2, 2, 2, 1) 100%
            ),
            url("/wp-content/uploads/2026/08/kooka-website-design-hero.webp");

        background-position: 66% center;
        background-size: cover;
    }

    .kooka-web-hero__content {
        order: 2;

        width: min(100% - 40px, 680px);
        max-width: none;

        margin: -46px auto 0;
        padding: 0 0 52px;

        transform: none;
    }

    .kooka-web-hero__eyebrow {
        margin-bottom: 15px;

        font-size: 10px;
    }

    .kooka-web-hero__title {
        max-width: 100%;

        font-size: clamp(45px, 10.5vw, 68px);
        line-height: 0.98;
    }

    .kooka-web-hero__description {
        max-width: 630px;

        margin-top: 20px;

        font-size: 15px;
        line-height: 1.65;
    }

    .kooka-web-hero__actions {
        margin-top: 26px;
    }

    .kooka-web-hero__features {
        position: relative;
        left: auto;
        bottom: auto;

        width: 100%;
        margin-top: 25px;
        padding: 0;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        transform: none;
    }

    .kooka-web-hero__features li {
        min-height: 62px;

        padding: 12px 14px;

        font-size: 10px;
    }

    .kooka-web-hero__features li:nth-child(2)::after {
        display: none;
    }

    .kooka-web-hero__features li:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(215, 173, 45, 0.15);
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 560px) {
    .kooka-web-hero__visual {
        height: 255px;
    }

    .kooka-web-hero__content {
        width: min(100% - 28px, 520px);

        margin-top: -18px;
        padding-bottom: 44px;
    }

    .kooka-web-hero__eyebrow {
        padding-left: 38px;

        font-size: 9px;
        letter-spacing: 0.17em;
    }

    .kooka-web-hero__eyebrow::before {
        width: 24px;
    }

    .kooka-web-hero__title {
        font-size: clamp(41px, 12vw, 55px);
    }

    .kooka-web-hero__description {
        font-size: 14px;
        line-height: 1.65;
    }

    .kooka-web-hero__actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        gap: 12px;
    }

    .kooka-button {
        width: 100%;
        min-height: 51px;
    }

    .kooka-web-hero__features {
        margin-top: 22px;
    }

    .kooka-web-hero__features li {
        min-height: 58px;

        padding: 10px 8px;

        font-size: 9px;
    }

    .kooka-feature-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;

        font-size: 9px;
    }
}

/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 390px) {
    .kooka-web-hero__visual {
        height: 230px;
    }

    .kooka-web-hero__content {
        width: calc(100% - 22px);
    }

    .kooka-web-hero__title {
        font-size: 39px;
    }

    .kooka-web-hero__features {
        grid-template-columns: 1fr;
    }

    .kooka-web-hero__features li {
        min-height: 54px;
    }

    .kooka-web-hero__features li::after {
        display: none;
    }

    .kooka-web-hero__features li:not(:last-child) {
        border-bottom: 1px solid rgba(215, 173, 45, 0.14);
    }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.kooka-button:focus-visible {
    outline: 2px solid var(--kooka-gold-light);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .kooka-web-hero__image {
        animation: none;
    }

    .kooka-button,
    .kooka-button--primary span {
        transition: none;
    }
}
/* =========================================================
   KOOKA DIGITAL — WEBSITE PILLARS
   ========================================================= */

.kd-pillars {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(194, 145, 28, 0.045) 0%,
            rgba(194, 145, 28, 0) 38%
        ),
        #090a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kd-pillars::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 760px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(193, 144, 26, 0.45),
        transparent
    );
}

.kd-pillars__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    width: min(100% - 80px, 1380px);
    margin: 0 auto;
    padding: 52px 0 54px;
}

.kd-pillars__intro,
.kd-pillars__item {
    position: relative;
    min-width: 0;
}

.kd-pillars__intro {
    padding: 0 48px 0 18px;
}

.kd-pillars__item {
    padding: 0 38px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.kd-pillars__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 30px;
    height: 30px;
    margin: 0 0 20px;
    color: #c69520;
}

.kd-pillars__icon svg {
    display: block;
    width: 27px;
    height: 27px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kd-pillars h2,
.kd-pillars h3 {
    margin: 0;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.kd-pillars h2 {
    max-width: 360px;
    font-size: clamp(30px, 2.35vw, 43px);
    line-height: 1.08;
}

.kd-pillars h3 {
    min-height: 64px;
    font-size: clamp(25px, 1.7vw, 32px);
    line-height: 1.06;
}

.kd-pillars p {
    max-width: 245px;
    margin: 19px 0 0;
    color: rgba(238, 235, 228, 0.72);
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   HOVER — MUY SUTIL
   ========================================================= */

.kd-pillars__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -54px;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198, 149, 32, 0.85),
        transparent
    );
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.kd-pillars__item:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.kd-pillars__item .kd-pillars__icon {
    transition: transform 0.3s ease, color 0.3s ease;
}

.kd-pillars__item:hover .kd-pillars__icon {
    color: #e0ad34;
    transform: translateY(-3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .kd-pillars__inner {
        grid-template-columns: repeat(2, 1fr);
        width: min(100% - 48px, 900px);
        padding: 24px 0 48px;
    }

    .kd-pillars__intro,
    .kd-pillars__item {
        min-height: 250px;
        padding: 38px;
    }

    .kd-pillars__intro,
    .kd-pillars__item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .kd-pillars__item:nth-child(2) {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .kd-pillars__item:nth-child(3) {
        border-left: 0;
    }

    .kd-pillars__item:nth-child(4) {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .kd-pillars h3 {
        min-height: auto;
    }

    .kd-pillars p {
        max-width: 320px;
    }

    .kd-pillars__item::after {
        display: none;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kd-pillars__inner {
        display: block;
        width: min(100% - 40px, 560px);
        padding: 18px 0 30px;
    }

    .kd-pillars__intro,
    .kd-pillars__item {
        min-height: 0;
        padding: 32px 4px 34px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
        border-left: 0 !important;
    }

    .kd-pillars__item:last-child {
        border-bottom: 0;
    }

    .kd-pillars__icon {
        width: 28px;
        height: 28px;
        margin-bottom: 16px;
    }

    .kd-pillars__icon svg {
        width: 25px;
        height: 25px;
    }

    .kd-pillars h2 {
        max-width: 410px;
        font-size: clamp(30px, 9vw, 39px);
        line-height: 1.08;
    }

    .kd-pillars h3 {
        font-size: 28px;
        line-height: 1.08;
    }

    .kd-pillars p {
        max-width: 430px;
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .kd-pillars__inner {
        width: calc(100% - 32px);
    }

    .kd-pillars__intro,
    .kd-pillars__item {
        padding: 28px 2px 30px;
    }

    .kd-pillars h2 {
        font-size: 32px;
    }

    .kd-pillars h3 {
        font-size: 26px;
    }
}
/* =========================================================
   KOOKA DIGITAL — OUR APPROACH
   CSS COMPATIBLE CON EL HTML REAL
   ========================================================= */

.kd-approach,
.kd-approach *,
.kd-approach *::before,
.kd-approach *::after {
    box-sizing: border-box;
}

.kd-approach {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 62% 20%,
            rgba(198, 149, 32, 0.055) 0%,
            transparent 38%
        ),
        #090a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kd-approach::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198, 149, 32, 0.45),
        transparent
    );
}

.kd-approach__inner {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 215px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 42px !important;
    width: min(calc(100% - 80px), 1440px) !important;
    max-width: 1440px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 54px 0 58px !important;
}


/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.kd-approach__intro {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
}

.kd-approach__eyebrow {
    display: block;
    margin: 0 0 18px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

.kd-approach__intro h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(34px, 2.65vw, 44px);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.kd-approach__intro h2 span {
    color: #c8951f;
}


/* =========================================================
   CONTENEDOR DE PASOS
   ========================================================= */

.kd-approach__steps {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kd-approach__step {
    position: relative;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 9px !important;
    text-align: center;
}


/* =========================================================
   MARCADORES, CÍRCULOS Y CONEXIONES
   ========================================================= */

.kd-approach__marker {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 76px !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
}

/* Línea discontinua entre círculos */

.kd-approach__step:not(:last-child) .kd-approach__marker::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: calc(50% + 38px);
    width: calc(100% - 76px);
    height: 1px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
        90deg,
        rgba(200, 150, 31, 0.72) 0,
        rgba(200, 150, 31, 0.72) 3px,
        transparent 3px,
        transparent 7px
    );
}

.kd-approach__icon {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex: 0 0 72px;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c8951f;
    border: 1px solid rgba(202, 152, 33, 0.9);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(198, 149, 32, 0.1),
            transparent 68%
        ),
        #090a0a;
    box-shadow:
        0 0 0 5px #090a0a,
        0 0 22px rgba(198, 149, 32, 0.06);
    transition:
        transform 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.kd-approach__icon svg {
    display: block;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TEXTOS
   ========================================================= */

.kd-approach__step h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.kd-approach__step h3 span {
    display: inline;
    margin-right: 3px;
    color: rgba(241, 238, 231, 0.55);
    font-family: "Inter", Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
}

.kd-approach__step p {
    width: 100%;
    max-width: 148px;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    color: rgba(235, 232, 225, 0.66);
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   HOVER
   ========================================================= */

.kd-approach__step:hover .kd-approach__icon {
    color: #e3ae31;
    border-color: #dda82e;
    transform: translateY(-4px);
    box-shadow:
        0 0 0 5px #090a0a,
        0 0 28px rgba(198, 149, 32, 0.17);
}


/* =========================================================
   PORTÁTILES
   ========================================================= */

@media (max-width: 1250px) {

    .kd-approach__inner {
        grid-template-columns: 190px minmax(0, 1fr) !important;
        gap: 26px !important;
        width: calc(100% - 48px) !important;
    }

    .kd-approach__step {
        padding: 0 5px !important;
    }

    .kd-approach__marker {
        height: 68px !important;
    }

    .kd-approach__icon {
        flex-basis: 64px;
        width: 64px !important;
        height: 64px !important;
    }

    .kd-approach__icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    .kd-approach__step:not(:last-child)
    .kd-approach__marker::after {
        left: calc(50% + 34px);
        width: calc(100% - 68px);
    }

    .kd-approach__step h3 {
        font-size: 17px;
    }

    .kd-approach__step p {
        max-width: 130px;
        font-size: 11px;
    }
}


/* =========================================================
   TABLET — 3 × 2
   ========================================================= */

@media (max-width: 960px) {

    .kd-approach__inner {
        display: block !important;
        width: min(calc(100% - 48px), 780px) !important;
        padding: 48px 0 52px !important;
    }

    .kd-approach__intro {
        margin: 0 0 40px !important;
        text-align: center;
    }

    .kd-approach__intro h2 br {
        display: none;
    }

    .kd-approach__intro h2 span::before {
        content: " ";
    }

    .kd-approach__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 44px !important;
    }

    .kd-approach__step {
        padding: 0 15px !important;
    }

    .kd-approach__step:nth-child(3)
    .kd-approach__marker::after,
    .kd-approach__step:nth-child(6)
    .kd-approach__marker::after {
        display: none;
    }

    .kd-approach__marker {
        height: 74px !important;
    }

    .kd-approach__icon {
        flex-basis: 70px;
        width: 70px !important;
        height: 70px !important;
    }

    .kd-approach__step:not(:last-child)
    .kd-approach__marker::after {
        left: calc(50% + 37px);
        width: calc(100% - 74px);
    }

    .kd-approach__step h3 {
        font-size: 20px;
    }

    .kd-approach__step p {
        max-width: 175px;
        font-size: 12px;
    }
}


/* =========================================================
   MÓVIL — TIMELINE VERTICAL
   ========================================================= */

@media (max-width: 640px) {

    .kd-approach::before {
        width: calc(100% - 40px);
    }

    .kd-approach__inner {
        width: min(calc(100% - 40px), 500px) !important;
        padding: 43px 0 44px !important;
    }

    .kd-approach__intro {
        margin-bottom: 36px !important;
        text-align: left;
    }

    .kd-approach__eyebrow {
        margin-bottom: 14px;
    }

    .kd-approach__intro h2 {
        font-size: 36px;
        line-height: 1.04;
    }

    .kd-approach__intro h2 br {
        display: initial;
    }

    .kd-approach__intro h2 span::before {
        content: "";
    }

    .kd-approach__steps {
        display: block !important;
    }

    .kd-approach__step {
        display: grid !important;
        grid-template-columns: 66px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 21px !important;
        min-height: 122px !important;
        padding: 0 !important;
        text-align: left;
    }

    .kd-approach__marker {
        grid-column: 1;
        grid-row: 1 / 3;
        align-items: flex-start !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .kd-approach__icon {
        flex: 0 0 60px;
        width: 60px !important;
        height: 60px !important;
    }

    .kd-approach__icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    .kd-approach__step:not(:last-child)
    .kd-approach__marker::after {
        display: block;
        top: 60px;
        left: 30px;
        width: 1px;
        height: calc(100% - 60px);
        transform: none;
        background: repeating-linear-gradient(
            180deg,
            rgba(200, 150, 31, 0.7) 0,
            rgba(200, 150, 31, 0.7) 3px,
            transparent 3px,
            transparent 8px
        );
    }

    .kd-approach__step:nth-child(3)
    .kd-approach__marker::after {
        display: block;
    }

    .kd-approach__step h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        padding-top: 5px !important;
        font-size: 23px;
        white-space: normal;
    }

    .kd-approach__step p {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        max-width: 330px;
        margin: 7px 0 27px !important;
        font-size: 13px;
        line-height: 1.55;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kd-approach__inner {
        width: calc(100% - 32px) !important;
    }

    .kd-approach__intro h2 {
        font-size: 33px;
    }

    .kd-approach__step {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        column-gap: 16px !important;
    }

    .kd-approach__icon {
        flex-basis: 54px;
        width: 54px !important;
        height: 54px !important;
    }

    .kd-approach__step:not(:last-child)
    .kd-approach__marker::after {
        top: 54px;
        left: 27px;
        height: calc(100% - 54px);
    }

    .kd-approach__step h3 {
        font-size: 21px;
    }
}
/* =========================================================
   KOOKA DIGITAL — WHAT'S INCLUDED
   ========================================================= */

.kd-project-includes,
.kd-project-includes *,
.kd-project-includes *::before,
.kd-project-includes *::after {
    box-sizing: border-box;
}

.kd-project-includes {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200, 150, 31, 0.055),
            transparent 38%
        ),
        #0d0e0e;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.kd-project-includes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 150, 31, 0.42),
        transparent
    );
}

.kd-project-includes__inner {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 80px), 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 62px 0 66px !important;
}


/* =========================================================
   CABECERA
   ========================================================= */

.kd-project-includes__header {
    margin: 0 0 46px !important;
    padding: 0 !important;
    text-align: center;
}

.kd-project-includes__eyebrow {
    display: block;
    margin: 0 0 15px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
}

.kd-project-includes__header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(38px, 3.6vw, 55px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.kd-project-includes__header h2 span {
    color: #c8951f;
}


/* =========================================================
   CUADRÍCULA 3 × 2
   ========================================================= */

.kd-project-includes__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kd-project-includes__item {
    position: relative;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 20px !important;
    min-width: 0 !important;
    min-height: 136px !important;
    margin: 0 !important;
    padding: 28px 38px !important;
    background: transparent;
}

/* Separadores verticales */

.kd-project-includes__item:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Separadores horizontales */

.kd-project-includes__item:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* =========================================================
   ICONOS
   ========================================================= */

.kd-project-includes__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c8951f;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.kd-project-includes__icon svg {
    display: block;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TEXTOS
   ========================================================= */

.kd-project-includes__content {
    min-width: 0;
    padding: 1px 0 0;
}

.kd-project-includes__content h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(20px, 1.45vw, 24px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.kd-project-includes__content p {
    max-width: 310px;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.6);
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   HOVER
   ========================================================= */

.kd-project-includes__item {
    transition: background-color 0.3s ease;
}

.kd-project-includes__item:hover {
    background: rgba(255, 255, 255, 0.018);
}

.kd-project-includes__item:hover .kd-project-includes__icon {
    color: #e1ad31;
    transform: translateY(-3px);
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1120px) {

    .kd-project-includes__inner {
        width: calc(100% - 48px) !important;
    }

    .kd-project-includes__item {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        padding: 26px 24px !important;
    }

    .kd-project-includes__icon {
        width: 38px !important;
        height: 38px !important;
    }

    .kd-project-includes__icon svg {
        width: 30px !important;
        height: 30px !important;
    }

    .kd-project-includes__content h3 {
        font-size: 20px;
    }
}


/* =========================================================
   TABLET — 2 × 3
   ========================================================= */

@media (max-width: 820px) {

    .kd-project-includes__inner {
        width: min(calc(100% - 48px), 720px) !important;
        padding: 56px 0 60px !important;
    }

    .kd-project-includes__header {
        margin-bottom: 38px !important;
    }

    .kd-project-includes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .kd-project-includes__item {
        min-height: 145px !important;
        padding: 27px 25px !important;
        border: 0 !important;
    }

    .kd-project-includes__item:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .kd-project-includes__item:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}


/* =========================================================
   MÓVIL — 1 COLUMNA
   ========================================================= */

@media (max-width: 580px) {

    .kd-project-includes::before {
        width: calc(100% - 40px);
    }

    .kd-project-includes__inner {
        width: calc(100% - 40px) !important;
        padding: 47px 0 50px !important;
    }

    .kd-project-includes__header {
        margin-bottom: 31px !important;
    }

    .kd-project-includes__eyebrow {
        margin-bottom: 13px;
    }

    .kd-project-includes__header h2 {
        font-size: 38px;
    }

    .kd-project-includes__header h2 br {
        display: none;
    }

    .kd-project-includes__grid {
        grid-template-columns: 1fr !important;
    }

    .kd-project-includes__item {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        column-gap: 18px !important;
        min-height: 0 !important;
        padding: 24px 13px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .kd-project-includes__item:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .kd-project-includes__icon {
        width: 42px !important;
        height: 42px !important;
    }

    .kd-project-includes__icon svg {
        width: 32px !important;
        height: 32px !important;
    }

    .kd-project-includes__content h3 {
        margin-bottom: 7px !important;
        font-size: 21px;
    }

    .kd-project-includes__content p {
        max-width: 390px;
        font-size: 12px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kd-project-includes__inner {
        width: calc(100% - 32px) !important;
    }

    .kd-project-includes__header h2 {
        font-size: 34px;
    }

    .kd-project-includes__item {
        grid-template-columns: 43px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .kd-project-includes__icon {
        width: 38px !important;
        height: 38px !important;
    }

    .kd-project-includes__icon svg {
        width: 29px !important;
        height: 29px !important;
    }

    .kd-project-includes__content h3 {
        font-size: 19px;
    }
}
/* =========================================================
   KOOKA DIGITAL — SELECTED WORK
   Imágenes: 1240 × 806 px
   Tamaño mínimo de texto: 12px
   ========================================================= */

.kooka-work-showcase,
.kooka-work-showcase *,
.kooka-work-showcase *::before,
.kooka-work-showcase *::after {
    box-sizing: border-box;
}

.kooka-work-showcase {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(196, 145, 26, 0.045),
            transparent 38%
        ),
        #0d0e0e;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.kooka-work-showcase::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 150, 31, 0.38),
        transparent
    );
}

.kooka-work-showcase__inner {
    position: relative;
    z-index: 1;
    display: block;
    width: min(calc(100% - 80px), 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 58px 0 64px !important;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.kooka-work-showcase__header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 34px !important;
    padding: 0 !important;
    text-align: center !important;
}

.kooka-work-showcase__header h2 {
    display: block;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(35px, 3vw, 46px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
    text-align: center;
}

.kooka-work-showcase__header h2 span {
    color: #c8951f;
}

.kooka-work-showcase__header p {
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.66);
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}


/* =========================================================
   GRID
   ========================================================= */

.kooka-work-showcase__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 26px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.kooka-work-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.022),
            rgba(255, 255, 255, 0.005)
        ),
        #101111;
    border: 1px solid rgba(255, 255, 255, 0.105);
    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.kooka-work-card:hover {
    border-color: rgba(200, 149, 31, 0.42);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   IMÁGENES — PROPORCIÓN 1240 × 806
   ========================================================= */

.kooka-work-card__image {
    position: relative;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    aspect-ratio: 1240 / 806;
    background: #161717;
    text-decoration: none;
    isolation: isolate;
}

.kooka-work-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 65%,
        rgba(5, 6, 6, 0.18) 100%
    );
}

.kooka-work-card__image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1240 / 806;
    object-fit: cover !important;
    object-position: center !important;
    border: 0;
    transform: scale(1.001);
    transition:
        transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1),
        filter 0.4s ease;
}

.kooka-work-card:hover .kooka-work-card__image img {
    transform: scale(1.035);
}


/* =========================================================
   FLECHA SOBRE LA IMAGEN
   ========================================================= */

.kooka-work-card__image-arrow {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    color: #0b0c0c;
    background: #c8951f;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}

.kooka-work-card:hover .kooka-work-card__image-arrow {
    opacity: 1;
    transform: translateY(0);
}

.kooka-work-card__image-arrow svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.kooka-work-card__content {
    display: flex !important;
    flex: 1;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 23px 24px 25px !important;
}

.kooka-work-card__content h3 {
    width: 100%;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(24px, 1.8vw, 30px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.kooka-work-card__content h3 a {
    color: #f1eee7;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.kooka-work-card:hover .kooka-work-card__content h3 a {
    color: #e1ac2c;
}


/* Categoría — nunca inferior a 12px */

.kooka-work-card__category {
    display: block;
    margin: 0 0 13px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.015em;
}

.kooka-work-card__content p {
    width: 100%;
    max-width: 360px;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.66);
    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   VIEW PROJECT
   ========================================================= */

.kooka-work-card__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.kooka-work-card__link svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.kooka-work-card__link:hover {
    color: #e1ac2c;
}

.kooka-work-card__link:hover svg,
.kooka-work-card:hover .kooka-work-card__link svg {
    transform: translateX(4px);
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1180px) {

    .kooka-work-showcase__inner {
        width: calc(100% - 48px) !important;
        padding: 54px 0 60px !important;
    }

    .kooka-work-showcase__grid {
        gap: 20px !important;
    }

    .kooka-work-card__content {
        padding: 20px 20px 22px !important;
    }

    .kooka-work-card__content h3 {
        font-size: 25px;
    }
}


/* =========================================================
   TABLET — DOS COLUMNAS
   ========================================================= */

@media (max-width: 860px) {

    .kooka-work-showcase__inner {
        width: min(calc(100% - 48px), 740px) !important;
        padding: 52px 0 58px !important;
    }

    .kooka-work-showcase__header {
        margin-bottom: 31px !important;
    }

    .kooka-work-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .kooka-work-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 12px) !important;
        justify-self: center;
    }

    .kooka-work-card__image-arrow {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   MÓVIL — UNA COLUMNA
   ========================================================= */

@media (max-width: 620px) {

    .kooka-work-showcase::before {
        width: calc(100% - 40px);
    }

    .kooka-work-showcase__inner {
        width: calc(100% - 40px) !important;
        padding: 46px 0 50px !important;
    }

    .kooka-work-showcase__header {
        margin-bottom: 28px !important;
    }

    .kooka-work-showcase__header h2 {
        margin-bottom: 8px !important;
        font-size: 36px;
    }

    .kooka-work-showcase__header p {
        max-width: 320px;
        font-size: 13px;
        line-height: 1.6;
    }

    .kooka-work-showcase__grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .kooka-work-card,
    .kooka-work-card:last-child {
        grid-column: auto;
        width: 100% !important;
    }

    .kooka-work-card__content {
        padding: 20px 21px 23px !important;
    }

    .kooka-work-card__content h3 {
        font-size: 27px;
    }

    .kooka-work-card__category {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .kooka-work-card__content p {
        max-width: none;
        font-size: 13px;
    }

    .kooka-work-card__link {
        font-size: 12px;
    }

    .kooka-work-card__image-arrow {
        right: 13px;
        bottom: 13px;
        width: 39px;
        height: 39px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kooka-work-showcase__inner {
        width: calc(100% - 32px) !important;
    }

    .kooka-work-showcase__header h2 {
        font-size: 33px;
    }

    .kooka-work-showcase__header p {
        font-size: 12px;
    }

    .kooka-work-card__content {
        padding: 19px 18px 22px !important;
    }

    .kooka-work-card__content h3 {
        font-size: 25px;
    }

    .kooka-work-card__category,
    .kooka-work-card__content p,
    .kooka-work-card__link {
        font-size: 12px;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-work-card,
    .kooka-work-card__image img,
    .kooka-work-card__image-arrow,
    .kooka-work-card__content h3 a,
    .kooka-work-card__link,
    .kooka-work-card__link svg {
        transition: none !important;
    }
}
/* =========================================================
   KOOKA DIGITAL — WEBSITE DESIGN PROCESS
   Seis pasos conectados
   Tamaño mínimo de texto: 12px
   ========================================================= */

.kooka-process,
.kooka-process *,
.kooka-process *::before,
.kooka-process *::after {
    box-sizing: border-box;
}

.kooka-process {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #f1eee7;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200, 149, 31, 0.055),
            transparent 35%
        ),
        #0a0b0b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.kooka-process::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 149, 31, 0.36),
        transparent
    );
}

.kooka-process__inner {
    position: relative;
    z-index: 1;
    display: block;
    width: min(calc(100% - 80px), 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 74px 0 82px !important;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.kooka-process__header {
    display: block !important;
    width: min(100%, 760px) !important;
    margin: 0 auto 55px !important;
    padding: 0 !important;
    text-align: center !important;
}

.kooka-process__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 15px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kooka-process__eyebrow::before,
.kooka-process__eyebrow::after {
    content: "";
    display: block;
    width: 27px;
    height: 1px;
    background: rgba(200, 149, 31, 0.72);
}

.kooka-process__header h2 {
    display: block;
    margin: 0 0 17px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 4.2vw, 60px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-align: center;
}

.kooka-process__header h2 span {
    color: #c8951f;
}

.kooka-process__header p {
    display: block;
    width: min(100%, 650px);
    margin: 0 auto !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.66);
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
}


/* =========================================================
   CONTENEDOR DE LOS SEIS PASOS
   ========================================================= */

.kooka-process__steps {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Línea dorada horizontal */

.kooka-process__steps::before {
    content: "";
    position: absolute;
    top: 27px;
    right: calc(100% / 12);
    left: calc(100% / 12);
    z-index: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(200, 149, 31, 0.25),
        #c8951f 15%,
        #c8951f 85%,
        rgba(200, 149, 31, 0.25)
    );
}


/* =========================================================
   CADA PASO
   ========================================================= */

.kooka-process__step {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    text-align: center !important;
}


/* =========================================================
   MARCADORES NUMERADOS
   ========================================================= */

.kooka-process__marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin: 0 0 22px;
    color: #c8951f;
    background: #0a0b0b;
    border: 1px solid rgba(200, 149, 31, 0.78);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px #0a0b0b,
        0 0 0 8px rgba(200, 149, 31, 0.12);
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.kooka-process__marker span {
    display: block;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
}

.kooka-process__step:hover .kooka-process__marker {
    color: #0a0b0b;
    background: #c8951f;
    border-color: #c8951f;
    transform: translateY(-3px);
    box-shadow:
        0 0 0 7px #0a0b0b,
        0 8px 22px rgba(200, 149, 31, 0.2);
}


/* =========================================================
   TEXTOS
   ========================================================= */

.kooka-process__step h3 {
    display: block;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(22px, 1.65vw, 27px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-align: center;
    transition: color 0.3s ease;
}

.kooka-process__step:hover h3 {
    color: #e1ac2c;
}

.kooka-process__step p {
    display: block;
    width: 100%;
    max-width: 185px;
    margin: 0 auto !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.6);
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1180px) {

    .kooka-process__inner {
        width: calc(100% - 48px) !important;
        padding: 68px 0 74px !important;
    }

    .kooka-process__header {
        margin-bottom: 50px !important;
    }

    .kooka-process__step {
        padding: 0 10px !important;
    }

    .kooka-process__step h3 {
        font-size: 22px;
    }

    .kooka-process__step p {
        max-width: 165px;
        font-size: 12px;
        line-height: 1.6;
    }
}


/* =========================================================
   TABLET — 3 PASOS POR FILA
   ========================================================= */

@media (max-width: 900px) {

    .kooka-process__inner {
        width: min(calc(100% - 48px), 760px) !important;
        padding: 64px 0 68px !important;
    }

    .kooka-process__header {
        margin-bottom: 46px !important;
    }

    .kooka-process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 48px !important;
    }

    .kooka-process__steps::before {
        display: none;
    }

    .kooka-process__step {
        padding: 0 18px !important;
    }

    .kooka-process__step::before {
        content: "";
        position: absolute;
        top: 27px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 1px;
        background: rgba(200, 149, 31, 0.6);
    }

    .kooka-process__step:nth-child(3n + 1)::before {
        left: 50%;
        width: 50%;
    }

    .kooka-process__step:nth-child(3n)::before {
        width: 50%;
    }

    .kooka-process__step h3 {
        font-size: 24px;
    }

    .kooka-process__step p {
        max-width: 190px;
        font-size: 13px;
    }
}


/* =========================================================
   MÓVIL — PROCESO VERTICAL
   ========================================================= */

@media (max-width: 620px) {

    .kooka-process::before {
        width: calc(100% - 40px);
    }

    .kooka-process__inner {
        width: calc(100% - 40px) !important;
        padding: 52px 0 58px !important;
    }

    .kooka-process__header {
        margin-bottom: 39px !important;
    }

    .kooka-process__eyebrow {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 0.09em;
    }

    .kooka-process__eyebrow::before,
    .kooka-process__eyebrow::after {
        width: 19px;
    }

    .kooka-process__header h2 {
        margin-bottom: 16px !important;
        font-size: 39px;
        line-height: 1;
    }

    .kooka-process__header h2 span {
        display: block;
    }

    .kooka-process__header p {
        max-width: 420px;
        font-size: 13px;
        line-height: 1.68;
    }

    .kooka-process__steps {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: min(100%, 460px) !important;
        margin: 0 auto !important;
    }

    .kooka-process__step {
        display: grid !important;
        grid-template-columns: 55px minmax(0, 1fr) !important;
        column-gap: 22px !important;
        align-items: start !important;
        width: 100% !important;
        min-height: 145px;
        padding: 0 0 29px !important;
        text-align: left !important;
    }

    .kooka-process__step:last-child {
        min-height: 0;
        padding-bottom: 0 !important;
    }

    .kooka-process__step::before {
        top: 55px;
        bottom: 0;
        left: 27px !important;
        width: 1px !important;
        height: auto;
        background: rgba(200, 149, 31, 0.62);
    }

    .kooka-process__step:last-child::before {
        display: none;
    }

    .kooka-process__marker {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0 !important;
    }

    .kooka-process__step h3 {
        grid-column: 2;
        margin: 4px 0 8px !important;
        font-size: 26px;
        text-align: left;
    }

    .kooka-process__step p {
        grid-column: 2;
        width: 100%;
        max-width: 330px;
        margin: 0 !important;
        font-size: 13px;
        line-height: 1.65;
        text-align: left;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kooka-process__inner {
        width: calc(100% - 32px) !important;
    }

    .kooka-process__header h2 {
        font-size: 35px;
    }

    .kooka-process__header p {
        font-size: 12px;
    }

    .kooka-process__step {
        grid-template-columns: 49px minmax(0, 1fr) !important;
        column-gap: 17px !important;
        min-height: 142px;
    }

    .kooka-process__marker {
        width: 49px;
        height: 49px;
        box-shadow:
            0 0 0 5px #0a0b0b,
            0 0 0 6px rgba(200, 149, 31, 0.12);
    }

    .kooka-process__step::before {
        top: 49px;
        left: 24px !important;
    }

    .kooka-process__step h3 {
        margin-top: 2px !important;
        font-size: 24px;
    }

    .kooka-process__step p {
        font-size: 12px;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-process__marker,
    .kooka-process__step h3 {
        transition: none !important;
    }
}
/* =========================================================
   KOOKA DIGITAL — THE KOOKA DIFFERENCE
   Tamaño mínimo de texto: 12px
   ========================================================= */

.kooka-difference,
.kooka-difference *,
.kooka-difference *::before,
.kooka-difference *::after {
    box-sizing: border-box;
}

.kooka-difference {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #f1eee7;
    background:
        radial-gradient(
            circle at 12% 48%,
            rgba(200, 149, 31, 0.085),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #111212 0%,
            #0a0b0b 48%,
            #080909 100%
        );
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.kooka-difference::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 149, 31, 0.38),
        transparent
    );
}

.kooka-difference::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -180px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(200, 149, 31, 0.055);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}


/* =========================================================
   ESTRUCTURA GENERAL
   ========================================================= */

.kooka-difference__inner {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns:
        minmax(340px, 0.82fr)
        minmax(580px, 1.18fr) !important;
    align-items: center !important;
    gap: clamp(70px, 8vw, 130px) !important;
    width: min(calc(100% - 80px), 1320px) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 92px 0 96px !important;
}


/* =========================================================
   COLUMNA IZQUIERDA
   ========================================================= */

.kooka-difference__intro {
    position: relative;
    width: 100% !important;
    max-width: 510px;
    margin: 0 !important;
    padding: 0 !important;
}

.kooka-difference__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 20px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kooka-difference__eyebrow::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 1px;
    background: rgba(200, 149, 31, 0.8);
}

.kooka-difference__intro h2 {
    margin: 0 0 25px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(46px, 4.7vw, 68px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.kooka-difference__intro h2 span {
    display: block;
    color: #c8951f;
}

.kooka-difference__lead {
    max-width: 480px;
    margin: 0 0 31px !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.68);
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.78;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.kooka-difference__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 23px !important;
    color: #0a0b0b !important;
    background: #c8951f;
    border: 1px solid #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.025em;
    text-decoration: none !important;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.kooka-difference__button svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.kooka-difference__button:hover {
    color: #f1eee7 !important;
    background: transparent;
    border-color: rgba(200, 149, 31, 0.9);
    transform: translateY(-2px);
}

.kooka-difference__button:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   COLUMNA DERECHA
   ========================================================= */

.kooka-difference__points {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   PUNTOS DIFERENCIALES
   ========================================================= */

.kooka-difference__point {
    position: relative;
    display: block !important;
    min-width: 0;
    min-height: 245px;
    margin: 0 !important;
    padding: 34px 32px 35px !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.012);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease;
}

.kooka-difference__point::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #c8951f;
    transition: width 0.4s ease;
}

.kooka-difference__point:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(200, 149, 31, 0.24);
}

.kooka-difference__point:hover::before {
    right: auto;
    left: 0;
    width: 100%;
}


/* =========================================================
   NUMERACIÓN
   ========================================================= */

.kooka-difference__number {
    display: block;
    margin: 0 0 38px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
}

.kooka-difference__number::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    margin: 0 0 3px 11px;
    background: rgba(200, 149, 31, 0.52);
    transition: width 0.35s ease;
}

.kooka-difference__point:hover .kooka-difference__number::after {
    width: 44px;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.kooka-difference__content {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.kooka-difference__content h3 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(25px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}

.kooka-difference__point:hover .kooka-difference__content h3 {
    color: #e1ac2c;
}

.kooka-difference__content p {
    max-width: 270px;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(235, 232, 224, 0.62);
    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.68;
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1180px) {

    .kooka-difference__inner {
        grid-template-columns:
            minmax(300px, 0.75fr)
            minmax(540px, 1.25fr) !important;
        gap: 55px !important;
        width: calc(100% - 48px) !important;
        padding: 78px 0 82px !important;
    }

    .kooka-difference__intro h2 {
        font-size: 52px;
    }

    .kooka-difference__point {
        min-height: 250px;
        padding: 30px 25px 31px !important;
    }

    .kooka-difference__number {
        margin-bottom: 33px;
    }

    .kooka-difference__content h3 {
        font-size: 26px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .kooka-difference__inner {
        grid-template-columns: 1fr !important;
        gap: 49px !important;
        width: min(calc(100% - 48px), 760px) !important;
        padding: 68px 0 72px !important;
    }

    .kooka-difference__intro {
        max-width: 650px;
        text-align: center;
        margin: 0 auto !important;
    }

    .kooka-difference__eyebrow {
        justify-content: center;
    }

    .kooka-difference__eyebrow::after {
        content: "";
        display: block;
        width: 32px;
        height: 1px;
        background: rgba(200, 149, 31, 0.8);
    }

    .kooka-difference__intro h2 {
        font-size: clamp(48px, 7vw, 60px);
    }

    .kooka-difference__lead {
        max-width: 600px;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .kooka-difference__point {
        min-height: 225px;
        padding: 31px 30px 32px !important;
    }

    .kooka-difference__content p {
        max-width: 300px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 620px) {

    .kooka-difference::before {
        width: calc(100% - 40px);
    }

    .kooka-difference::after {
        display: none;
    }

    .kooka-difference__inner {
        gap: 40px !important;
        width: calc(100% - 40px) !important;
        padding: 54px 0 58px !important;
    }

    .kooka-difference__eyebrow {
        margin-bottom: 16px;
        font-size: 12px;
        letter-spacing: 0.09em;
    }

    .kooka-difference__eyebrow::before,
    .kooka-difference__eyebrow::after {
        width: 21px;
    }

    .kooka-difference__intro h2 {
        margin-bottom: 20px !important;
        font-size: 40px;
        line-height: 0.99;
    }

    .kooka-difference__intro h2 span {
        display: block;
    }

    .kooka-difference__lead {
        margin-bottom: 26px !important;
        font-size: 13px;
        line-height: 1.7;
    }

    .kooka-difference__button {
        min-height: 47px;
        font-size: 12px;
    }

    .kooka-difference__points {
        grid-template-columns: 1fr !important;
    }

    .kooka-difference__point {
        min-height: 0;
        padding: 27px 24px 29px !important;
    }

    .kooka-difference__number {
        margin-bottom: 24px;
    }

    .kooka-difference__content h3 {
        margin-bottom: 9px !important;
        font-size: 27px;
    }

    .kooka-difference__content p {
        max-width: 440px;
        font-size: 13px;
        line-height: 1.65;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kooka-difference__inner {
        width: calc(100% - 32px) !important;
    }

    .kooka-difference__intro h2 {
        font-size: 36px;
    }

    .kooka-difference__lead {
        font-size: 12px;
    }

    .kooka-difference__point {
        padding: 25px 20px 27px !important;
    }

    .kooka-difference__content h3 {
        font-size: 25px;
    }

    .kooka-difference__content p {
        font-size: 12px;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-difference__button,
    .kooka-difference__button svg,
    .kooka-difference__point,
    .kooka-difference__point::before,
    .kooka-difference__number::after,
    .kooka-difference__content h3 {
        transition: none !important;
    }
}
/* =========================================================
   KOOKA DIGITAL — THE DIFFERENCE
   Tabla comparativa fiel al mockup
   ========================================================= */

.kooka-comparison,
.kooka-comparison *,
.kooka-comparison *::before,
.kooka-comparison *::after {
    box-sizing: border-box;
}

.kooka-comparison {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #f1eee7;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200, 149, 31, 0.055),
            transparent 34%
        ),
        #0a0b0b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.kooka-comparison::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 80px), 1440px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 149, 31, 0.38),
        transparent
    );
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.kooka-comparison__inner {
    position: relative;
    z-index: 1;
    display: block;
    width: min(calc(100% - 80px), 1120px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 78px 0 88px !important;
}


/* =========================================================
   CABECERA
   ========================================================= */

.kooka-comparison__header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 46px !important;
    padding: 0 !important;
    text-align: center !important;
}

.kooka-comparison__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 15px;
    color: #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kooka-comparison__eyebrow::before,
.kooka-comparison__eyebrow::after {
    content: "";
    display: block;
    width: 27px;
    height: 1px;
    background: rgba(200, 149, 31, 0.75);
}

.kooka-comparison__header h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f1eee7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(46px, 5vw, 66px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-align: center;
}

.kooka-comparison__header h2 span {
    color: #c8951f;
}


/* =========================================================
   TABLA
   ========================================================= */

.kooka-comparison__table {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
}


/* Línea divisoria central */

.kooka-comparison__heading:nth-child(odd),
.kooka-comparison__cell:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.13);
}


/* =========================================================
   CABECERAS DE COLUMNA
   ========================================================= */

.kooka-comparison__heading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 76px;
    margin: 0 !important;
    padding: 18px 28px !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(24px, 2.2vw, 31px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.kooka-comparison__heading--other {
    color: rgba(241, 238, 231, 0.68);
    background: rgba(255, 255, 255, 0.018);
}

.kooka-comparison__heading--kooka {
    position: relative;
    color: #e0aa2b;
    background: rgba(200, 149, 31, 0.06);
}

.kooka-comparison__heading--kooka::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 2px;
    background: #c8951f;
}


/* =========================================================
   CELDAS
   ========================================================= */

.kooka-comparison__cell {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0;
    min-height: 84px;
    margin: 0 !important;
    padding: 20px 35px !important;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.105);
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

/* Quita el borde inferior de la última fila */

.kooka-comparison__cell:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.kooka-comparison__cell--other {
    color: rgba(235, 232, 224, 0.55);
    background: rgba(255, 255, 255, 0.01);
}

.kooka-comparison__cell--kooka {
    color: rgba(241, 238, 231, 0.9);
    background: rgba(200, 149, 31, 0.025);
}

.kooka-comparison__cell--other:hover {
    background: rgba(255, 255, 255, 0.025);
}

.kooka-comparison__cell--kooka:hover {
    color: #ffffff;
    background: rgba(200, 149, 31, 0.07);
}


/* =========================================================
   ICONOS
   ========================================================= */

.kooka-comparison__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.kooka-comparison__icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kooka-comparison__icon--cross {
    color: rgba(241, 238, 231, 0.38);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kooka-comparison__icon--check {
    color: #0a0b0b;
    background: #c8951f;
    border: 1px solid #c8951f;
    box-shadow: 0 0 18px rgba(200, 149, 31, 0.12);
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1180px) {

    .kooka-comparison__inner {
        width: calc(100% - 48px) !important;
        padding: 70px 0 78px !important;
    }

    .kooka-comparison__cell {
        padding: 19px 28px !important;
    }
}


/* =========================================================
   MÓVIL
   Mantiene la comparación de izquierda a derecha
   ========================================================= */

@media (max-width: 620px) {

    .kooka-comparison::before {
        width: calc(100% - 40px);
    }

    .kooka-comparison__inner {
        width: calc(100% - 40px) !important;
        padding: 53px 0 58px !important;
    }

    .kooka-comparison__header {
        margin-bottom: 34px !important;
    }

    .kooka-comparison__eyebrow {
        margin-bottom: 13px;
        font-size: 12px;
        letter-spacing: 0.09em;
    }

    .kooka-comparison__eyebrow::before,
    .kooka-comparison__eyebrow::after {
        width: 20px;
    }

    .kooka-comparison__header h2 {
        font-size: 41px;
    }

    .kooka-comparison__heading {
        min-height: 66px;
        padding: 14px 10px !important;
        font-size: 22px;
    }

    .kooka-comparison__cell {
        grid-template-columns: 25px minmax(0, 1fr) !important;
        gap: 9px !important;
        min-height: 91px;
        padding: 15px 12px !important;
        font-size: 12px;
        line-height: 1.45;
    }

    .kooka-comparison__icon {
        width: 24px;
        height: 24px;
    }

    .kooka-comparison__icon svg {
        width: 13px;
        height: 13px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kooka-comparison__inner {
        width: calc(100% - 24px) !important;
    }

    .kooka-comparison__header h2 {
        font-size: 37px;
    }

    .kooka-comparison__heading {
        min-height: 61px;
        padding: 12px 7px !important;
        font-size: 19px;
    }

    .kooka-comparison__cell {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 7px !important;
        min-height: 94px;
        padding: 13px 8px !important;
        font-size: 12px;
    }

    .kooka-comparison__icon {
        width: 21px;
        height: 21px;
    }

    .kooka-comparison__icon svg {
        width: 12px;
        height: 12px;
    }
}
/* =========================================================
   KOOKA DIGITAL — CTA HORIZONTAL
   ========================================================= */

.kooka-grow-cta,
.kooka-grow-cta *,
.kooka-grow-cta *::before,
.kooka-grow-cta *::after {
    box-sizing: border-box;
}

.kooka-grow-cta {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    color: #f1eee7;
    background:
        linear-gradient(
            112deg,
            rgba(7, 8, 8, 0.98) 0%,
            rgba(13, 12, 9, 0.95) 42%,
            rgba(22, 18, 9, 0.91) 100%
        ),
        #0a0b0b;
}


/* Textura dorada, sin necesidad de imagen */

.kooka-grow-cta::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.82;
    background:
        radial-gradient(
            ellipse at 82% 5%,
            rgba(207, 157, 39, 0.26) 0%,
            rgba(207, 157, 39, 0.09) 18%,
            transparent 47%
        ),
        radial-gradient(
            ellipse at 94% 100%,
            rgba(179, 126, 19, 0.17) 0%,
            transparent 42%
        ),
        linear-gradient(
            128deg,
            transparent 0%,
            transparent 59%,
            rgba(200, 149, 31, 0.065) 59.5%,
            transparent 60.5%
        );
    pointer-events: none;
}


/* Líneas decorativas del fondo */

.kooka-grow-cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -145px;
    right: -65px;
    width: 570px;
    height: 480px;
    opacity: 0.18;
    transform: rotate(-8deg);
    background:
        repeating-linear-gradient(
            114deg,
            transparent 0,
            transparent 19px,
            rgba(218, 169, 48, 0.17) 20px,
            transparent 21px
        );
    -webkit-mask-image:
        radial-gradient(ellipse at center, #000 12%, transparent 72%);
    mask-image:
        radial-gradient(ellipse at center, #000 12%, transparent 72%);
    pointer-events: none;
}


/* =========================================================
   ESTRUCTURA
   ========================================================= */

.kooka-grow-cta__inner {
    position: relative;
    display: grid !important;
    grid-template-columns:
        minmax(400px, 1.08fr)
        minmax(420px, 0.92fr) !important;
    align-items: center !important;
    width: min(calc(100% - 80px), 1240px) !important;
    min-height: 220px;
    margin: 0 auto !important;
    padding: 42px 0 !important;
}


/* Línea dorada superior */

.kooka-grow-cta__inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(200, 149, 31, 0.45),
        transparent
    );
}


/* =========================================================
   TÍTULO
   ========================================================= */

.kooka-grow-cta__heading {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    min-height: 132px;
    margin: 0 !important;
    padding: 0 clamp(45px, 5vw, 76px) 0 0 !important;
    border-right: 1px solid rgba(200, 149, 31, 0.31);
}

.kooka-grow-cta__heading h2 {
    width: 100%;
    max-width: 620px;
    margin: 0 !important;
    padding: 0 !important;
    color: #f2efe7;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(39px, 3.5vw, 54px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.kooka-grow-cta__heading h2 span {
    display: block;
    color: #c8951f;
}


/* =========================================================
   CONTENIDO DERECHO
   ========================================================= */

.kooka-grow-cta__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 0 clamp(45px, 5vw, 76px) !important;
}

.kooka-grow-cta__content p {
    max-width: 390px;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(239, 236, 228, 0.68);
    font-family: "Inter", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.kooka-grow-cta__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    gap: 10px !important;
    min-width: 170px;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 21px !important;
    color: #090a0a !important;
    background: #c8951f;
    border: 1px solid #c8951f;
    font-family: "Inter", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.kooka-grow-cta__button svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}

.kooka-grow-cta__button:hover {
    color: #f1eee7 !important;
    background: transparent;
    transform: translateY(-2px);
}

.kooka-grow-cta__button:hover svg {
    transform: translateX(3px);
}

.kooka-grow-cta__button:focus-visible {
    outline: 2px solid #f1eee7;
    outline-offset: 4px;
}


/* =========================================================
   PORTÁTIL
   ========================================================= */

@media (max-width: 1100px) {

    .kooka-grow-cta__inner {
        grid-template-columns: 1fr 1fr !important;
        width: calc(100% - 48px) !important;
    }

    .kooka-grow-cta__heading {
        padding-right: 42px !important;
    }

    .kooka-grow-cta__content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding-left: 42px !important;
    }

    .kooka-grow-cta__button {
        justify-self: start;
    }
}


/* =========================================================
   TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 767px) {

    .kooka-grow-cta::after {
        top: auto;
        right: -190px;
        bottom: -160px;
        width: 520px;
        height: 430px;
    }

    .kooka-grow-cta__inner {
        grid-template-columns: 1fr !important;
        gap: 27px !important;
        width: calc(100% - 40px) !important;
        min-height: 0;
        padding: 48px 0 51px !important;
    }

    .kooka-grow-cta__heading {
        min-height: 0;
        padding: 0 0 27px !important;
        border-right: 0;
        border-bottom: 1px solid rgba(200, 149, 31, 0.31);
    }

    .kooka-grow-cta__heading h2 {
        max-width: 560px;
        font-size: 40px;
    }

    .kooka-grow-cta__content {
        grid-template-columns: 1fr !important;
        gap: 23px !important;
        padding: 0 !important;
    }

    .kooka-grow-cta__content p {
        max-width: 540px;
        font-size: 13px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .kooka-grow-cta__inner {
        width: calc(100% - 32px) !important;
        padding: 42px 0 45px !important;
    }

    .kooka-grow-cta__heading h2 {
        font-size: 35px;
    }

    .kooka-grow-cta__content p {
        font-size: 12px;
    }

    .kooka-grow-cta__button {
        width: 100%;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-grow-cta__button,
    .kooka-grow-cta__button svg {
        transition: none !important;
    }
}
/* =========================================================
   ELIMINAR ESPACIOS ENTRE BLOQUES — PÁGINA 2529
   ========================================================= */

body.page-id-2529 .elementor-element-f08adde {
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Widgets colocados dentro del contenedor principal */
body.page-id-2529
.elementor-element-f08adde
> .elementor-element {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Elimina el margen automático entre widgets de Elementor */
body.page-id-2529
.elementor-element-f08adde
.elementor-widget:not(:last-child) {
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}

/* Contenedores internos de los widgets HTML */
body.page-id-2529
.elementor-element-f08adde
.elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Evita espacios producidos por las propias secciones */
body.page-id-2529
.elementor-element-f08adde
section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Flecha creada con CSS: evita caracteres corruptos */
.blog-read-more .blog-arrow {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 12px;
	margin-left: 8px;
	flex: 0 0 18px;
}

.blog-read-more .blog-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 17px;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

.blog-read-more .blog-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
/* ELIMINA CUALQUIER SÍMBOLO O FLECHA ANTERIOR */
.blog-read-more span,
.blog-read-more .blog-arrow {
	display: none !important;
}

.blog-read-more::before {
	content: none !important;
	display: none !important;
}

.blog-read-more::after {
	content: "" !important;
	display: inline-block !important;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	vertical-align: 1px;
}
/* ELIMINAR DEFINITIVAMENTE EL SÍMBOLO CORRUPTO */
a.blog-read-more::before,
a.blog-read-more::after,
a.blog-read-more span {
	content: none !important;
	display: none !important;
}

/* Por ahora dejamos exclusivamente el texto */
a.blog-read-more {
	font-family: "Montserrat", sans-serif !important;
}
/* =========================================================
   KOOKA DIGITAL — $10K WEBSITE GIVEAWAY HERO
   Brand colour: #d4af37
   ========================================================= */

.kooka-giveaway-hero {
    --kooka-yellow: #d4af37;
    --kooka-black: #050505;
    --kooka-white: #ffffff;

    position: relative;
    min-height: 680px;
    overflow: hidden;
    isolation: isolate;
    color: var(--kooka-white);
    background-color: var(--kooka-black);
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.98) 0%,
            rgba(3, 3, 3, 0.88) 34%,
            rgba(3, 3, 3, 0.28) 63%,
            rgba(3, 3, 3, 0.05) 100%
        ),
        url("https://kookadigital.com.au/wp-content/uploads/2026/08/background_10k_free_website.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.kooka-giveaway-hero,
.kooka-giveaway-hero * {
    box-sizing: border-box;
}

/* Texture */

.kooka-giveaway-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.018) 0,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px,
        transparent 7px
    );
    mix-blend-mode: soft-light;
}

/* Bottom shadow */

.kooka-giveaway-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0, 0, 0, 0.9)
    );
}

/* =========================================================
   LAYOUT
   ========================================================= */

.kooka-giveaway-hero__container {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(370px, 0.9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 58px);
    width: min(1380px, calc(100% - 80px));
    min-height: 620px;
    margin: 0 auto;
    padding: 70px 0 82px;
}

/* =========================================================
   CONTENT
   ========================================================= */

.kooka-giveaway-hero__content {
    position: relative;
    z-index: 8;
    max-width: 650px;
    animation: kookaContentEntrance 0.9s
        cubic-bezier(.2, .75, .25, 1) both;
}

.kooka-giveaway-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.kooka-giveaway-hero__eyebrow span {
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 1px;
    background: var(--kooka-yellow);
}

.kooka-giveaway-hero__title {
    max-width: 680px;
    margin: 0;
    color: var(--kooka-white);
    font-family: "Playfair Display", serif;
    font-size: clamp(56px, 5vw, 82px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.kooka-giveaway-hero__title em {
    display: inline;
    color: var(--kooka-yellow);
    font-family: inherit;
    font-weight: 400;
    line-height: inherit;
}

.kooka-giveaway-hero__description {
    max-width: 570px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.67);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

.kooka-giveaway-hero__description strong {
    color: var(--kooka-white);
    font-weight: 600;
}

/* Actions */

.kooka-giveaway-hero__actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 33px;
}

.kooka-giveaway-hero__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 56px;
    padding: 0 25px;
    overflow: hidden;
    border: 1px solid var(--kooka-yellow);
    color: var(--kooka-black);
    background: var(--kooka-yellow);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.kooka-giveaway-hero__button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kooka-white);
    transform: translateX(-105%) skewX(-15deg);
    transition: transform 0.45s cubic-bezier(.2, .75, .25, 1);
}

.kooka-giveaway-hero__button span,
.kooka-giveaway-hero__button svg {
    position: relative;
    z-index: 2;
}

.kooka-giveaway-hero__button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s ease;
}

.kooka-giveaway-hero__button:hover {
    color: var(--kooka-black);
    border-color: var(--kooka-white);
    box-shadow: 0 15px 45px rgba(212, 175, 55, 0.2);
    transform: translateY(-3px);
}

.kooka-giveaway-hero__button:hover::before {
    transform: translateX(0) skewX(0);
}

.kooka-giveaway-hero__button:hover svg {
    transform: translateX(4px);
}

.kooka-giveaway-hero__link {
    position: relative;
    padding: 8px 0;
    color: var(--kooka-white);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
}

.kooka-giveaway-hero__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--kooka-yellow);
    transform-origin: right;
    transition: transform 0.35s ease;
}

.kooka-giveaway-hero__link:hover::after {
    transform: scaleX(0.35);
}

/* Note */

.kooka-giveaway-hero__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.46);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.kooka-giveaway-hero__note svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--kooka-yellow);
    stroke-width: 1.2;
}

/* =========================================================
   GOLDEN RAYS — SEPARATE LAYER BEHIND DEVICES
   ========================================================= */

.kooka-giveaway-hero__energy {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.kooka-giveaway-hero__beam {
    position: absolute;
    left: 44%;
    display: block;
    width: 78%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.08) 12%,
        var(--kooka-yellow) 48%,
        rgba(212, 175, 55, 0.32) 78%,
        transparent 100%
    );
    filter:
        drop-shadow(0 0 5px rgba(212, 175, 55, 0.8))
        drop-shadow(0 0 18px rgba(212, 175, 55, 0.65));
    transform-origin: center;
}

.kooka-giveaway-hero__beam::before,
.kooka-giveaway-hero__beam::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(8px);
    opacity: 0.65;
}

.kooka-giveaway-hero__beam--one {
    top: 38%;
    transform: rotate(-14deg) scaleX(0);
    animation: kookaBeamOne 1.2s 0.45s
        cubic-bezier(.2, .75, .25, 1) forwards;
}

.kooka-giveaway-hero__beam--two {
    top: 63%;
    height: 1px;
    opacity: 0.55;
    transform: rotate(11deg) scaleX(0);
    animation: kookaBeamTwo 1.3s 0.62s
        cubic-bezier(.2, .75, .25, 1) forwards;
}

.kooka-giveaway-hero__glow {
    position: absolute;
    top: 22%;
    right: 3%;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.34;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.24) 0%,
        rgba(212, 175, 55, 0.07) 32%,
        transparent 70%
    );
    filter: blur(20px);
    animation: kookaGlow 5s ease-in-out infinite;
}

/* =========================================================
   DEVICE COMPOSITION
   ========================================================= */

.kooka-giveaway-hero__visual {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 510px;
    pointer-events: none;
}

.kooka-giveaway-hero__visual-glow {
    position: absolute;
    bottom: 1%;
    left: 49%;
    width: 78%;
    height: 27%;
    border-radius: 50%;
    opacity: 0.38;
    background: radial-gradient(
        ellipse,
        rgba(212, 175, 55, 0.25) 0%,
        rgba(212, 175, 55, 0.07) 38%,
        transparent 72%
    );
    filter: blur(22px);
    transform: translateX(-50%);
}

/* Laptop */

.kooka-giveaway-hero__laptop {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 47%;
    width: min(112%, 850px);
    max-width: none;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 35px 35px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 22px rgba(212, 175, 55, 0.09));
    opacity: 0;
    transform:
        translate(-50%, -48%)
        translateY(55px)
        scale(0.9);
    animation:
        kookaLaptopEntrance 1.15s 0.22s
        cubic-bezier(.18, .8, .22, 1) forwards,
        kookaLaptopFloat 6s 1.5s ease-in-out infinite;
}

/* Phone */

.kooka-giveaway-hero__phone {
    position: absolute;
    z-index: 5;
    right: -1%;
    bottom: 0;
    width: clamp(125px, 15vw, 205px);
    max-width: none;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 28px 28px rgba(0, 0, 0, 0.8))
        drop-shadow(0 0 18px rgba(212, 175, 55, 0.12));
    opacity: 0;
    transform:
        translate(50px, 45px)
        rotate(3deg)
        scale(0.88);
    animation:
        kookaPhoneEntrance 1s 0.72s
        cubic-bezier(.18, .8, .22, 1) forwards,
        kookaPhoneFloat 5s 1.8s ease-in-out infinite;
}

/* Sparks */

.kooka-giveaway-hero__spark {
    position: absolute;
    z-index: 6;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kooka-yellow);
    box-shadow:
        0 0 8px var(--kooka-yellow),
        0 0 22px var(--kooka-yellow);
}

.kooka-giveaway-hero__spark--one {
    top: 19%;
    right: 14%;
    animation: kookaSpark 3.8s ease-in-out infinite;
}

.kooka-giveaway-hero__spark--two {
    right: 40%;
    bottom: 13%;
    width: 3px;
    height: 3px;
    animation: kookaSpark 4.5s 1.1s ease-in-out infinite;
}

/* =========================================================
   BOTTOM LABELS
   ========================================================= */

.kooka-giveaway-hero__bottom {
    position: absolute;
    right: 40px;
    bottom: 23px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.42);
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.kooka-giveaway-hero__bottom i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--kooka-yellow);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes kookaContentEntrance {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kookaLaptopEntrance {
    from {
        opacity: 0;
        transform:
            translate(-50%, -48%)
            translateY(55px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -48%)
            translateY(0)
            scale(1);
    }
}

@keyframes kookaLaptopFloat {
    0%,
    100% {
        transform:
            translate(-50%, -48%)
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -48%)
            translateY(-8px)
            scale(1);
    }
}

@keyframes kookaPhoneEntrance {
    from {
        opacity: 0;
        transform:
            translate(50px, 45px)
            rotate(3deg)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(3deg)
            scale(1);
    }
}

@keyframes kookaPhoneFloat {
    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(3deg)
            scale(1);
    }

    50% {
        transform:
            translate(-3px, -13px)
            rotate(1deg)
            scale(1);
    }
}

@keyframes kookaBeamOne {
    from {
        opacity: 0;
        transform: rotate(-14deg) scaleX(0);
    }

    to {
        opacity: 1;
        transform: rotate(-14deg) scaleX(1);
    }
}

@keyframes kookaBeamTwo {
    from {
        opacity: 0;
        transform: rotate(11deg) scaleX(0);
    }

    to {
        opacity: 0.55;
        transform: rotate(11deg) scaleX(1);
    }
}

@keyframes kookaGlow {
    0%,
    100% {
        opacity: 0.24;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.44;
        transform: scale(1.05);
    }
}

@keyframes kookaSpark {
    0%,
    100% {
        opacity: 0.15;
        transform: scale(0.65);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
    .kooka-giveaway-hero {
        min-height: 640px;
    }

    .kooka-giveaway-hero__container {
        grid-template-columns: minmax(330px, 0.9fr) minmax(410px, 1.1fr);
        width: min(1200px, calc(100% - 48px));
        min-height: 600px;
        gap: 10px;
        padding-top: 60px;
    }

    .kooka-giveaway-hero__title {
        font-size: clamp(50px, 6vw, 68px);
    }

    .kooka-giveaway-hero__visual {
        min-height: 440px;
    }

    .kooka-giveaway-hero__laptop {
        left: 44%;
        width: 118%;
    }

    .kooka-giveaway-hero__phone {
        right: -2%;
        width: clamp(120px, 16vw, 170px);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .kooka-giveaway-hero {
        min-height: auto;
        background-image:
            linear-gradient(
                180deg,
                rgba(3, 3, 3, 0.94) 0%,
                rgba(3, 3, 3, 0.76) 40%,
                rgba(3, 3, 3, 0.16) 72%,
                rgba(3, 3, 3, 0.88) 100%
            ),
            url("https://kookadigital.com.au/wp-content/uploads/2026/08/background_10k_free_website.webp");
        background-position: 62% center;
    }

    .kooka-giveaway-hero__container {
        display: flex;
        flex-direction: column;
        width: calc(100% - 36px);
        min-height: 0;
        padding: 54px 0 68px;
    }

    .kooka-giveaway-hero__content {
        width: 100%;
        max-width: none;
    }

    .kooka-giveaway-hero__eyebrow {
        align-items: flex-start;
        margin-bottom: 19px;
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: 0.18em;
    }

    .kooka-giveaway-hero__eyebrow span {
        flex-basis: 25px;
        width: 25px;
        margin-top: 7px;
    }

    .kooka-giveaway-hero__title {
        font-size: clamp(44px, 13vw, 61px);
        line-height: 0.98;
        letter-spacing: -0.04em;
    }

    .kooka-giveaway-hero__description {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.75;
    }

    .kooka-giveaway-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px;
        margin-top: 27px;
    }

    .kooka-giveaway-hero__button {
        width: 100%;
        min-height: 55px;
        padding: 0 18px;
    }

    .kooka-giveaway-hero__note {
        align-items: flex-start;
        font-size: 9px;
    }

    .kooka-giveaway-hero__visual {
        width: 100%;
        min-height: 310px;
        margin-top: 18px;
    }

    .kooka-giveaway-hero__laptop {
        top: 49%;
        left: 45%;
        width: 116%;
    }

    .kooka-giveaway-hero__phone {
        right: 1%;
        bottom: -4%;
        width: clamp(92px, 27vw, 130px);
    }

    .kooka-giveaway-hero__beam {
        left: 12%;
        width: 120%;
    }

    .kooka-giveaway-hero__beam--one {
        top: 65%;
    }

    .kooka-giveaway-hero__beam--two {
        top: 78%;
    }

    .kooka-giveaway-hero__bottom {
        right: auto;
        bottom: 21px;
        left: 18px;
        gap: 9px;
        font-size: 6px;
        letter-spacing: 0.14em;
    }
}

@media (max-width: 390px) {
    .kooka-giveaway-hero__title {
        font-size: 43px;
    }

    .kooka-giveaway-hero__visual {
        min-height: 275px;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .kooka-giveaway-hero *,
    .kooka-giveaway-hero *::before,
    .kooka-giveaway-hero *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
/* =========================================================
   KOOKA DIGITAL — GIVEAWAY FACTS BANNER
   HTML con cuatro iconos SVG
   ========================================================= */

.kooka-giveaway-facts {
    --kooka-yellow: #d4af37;
    --kooka-black: #050505;
    --kooka-white: #ffffff;

    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    color: var(--kooka-white);
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.035),
            transparent 18%,
            transparent 82%,
            rgba(212, 175, 55, 0.035)
        ),
        #080808;
    border-top: 1px solid rgba(212, 175, 55, 0.34);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    isolation: isolate;
}

.kooka-giveaway-facts,
.kooka-giveaway-facts * {
    box-sizing: border-box;
}

/* Luz superior procedente del hero */

.kooka-giveaway-facts::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -90px;
    left: 50%;
    width: min(900px, 80vw);
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        ellipse,
        rgba(212, 175, 55, 0.13) 0%,
        rgba(212, 175, 55, 0.035) 42%,
        transparent 72%
    );
    filter: blur(25px);
    transform: translateX(-50%);
}

/* Textura sutil */

.kooka-giveaway-facts::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.016) 0,
        rgba(255, 255, 255, 0.016) 1px,
        transparent 1px,
        transparent 8px
    );
}

/* =========================================================
   TRACK
   ========================================================= */

.kooka-giveaway-facts__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}

/* =========================================================
   ITEM
   ========================================================= */

.kooka-giveaway-facts__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    min-height: 132px;
    margin: 0;
    padding: 27px clamp(22px, 2.2vw, 38px);
    overflow: hidden;
    background: transparent;
    transition: background-color 0.35s ease;
}

/* Separadores verticales */

.kooka-giveaway-facts__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    right: 0;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(212, 175, 55, 0.25) 25%,
        rgba(212, 175, 55, 0.25) 75%,
        transparent
    );
}

/* Barra amarilla inferior en hover */

.kooka-giveaway-facts__item::before {
    content: "";
    position: absolute;
    right: 20%;
    bottom: 0;
    left: 20%;
    height: 2px;
    pointer-events: none;
    background: var(--kooka-yellow);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.2, .75, .25, 1);
}

.kooka-giveaway-facts__item:hover {
    background: rgba(255, 255, 255, 0.018);
}

.kooka-giveaway-facts__item:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* =========================================================
   SVG ICONS
   ========================================================= */

.kooka-giveaway-facts__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    color: var(--kooka-yellow);
}

/* Rombo exterior */

.kooka-giveaway-facts__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.38);
    background: rgba(212, 175, 55, 0.025);
    transform: rotate(45deg);
    transition:
        border-color 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.5s cubic-bezier(.2, .75, .25, 1);
}

/* Rombo interior */

.kooka-giveaway-facts__icon::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    transform: rotate(45deg);
    transition:
        border-color 0.35s ease,
        transform 0.5s cubic-bezier(.2, .75, .25, 1);
}

/* Dibujo SVG */

.kooka-giveaway-facts__icon svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 29px;
    height: 29px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

/* Animación del icono */

.kooka-giveaway-facts__item:hover
.kooka-giveaway-facts__icon::before {
    border-color: var(--kooka-yellow);
    background: var(--kooka-yellow);
    box-shadow:
        0 0 16px rgba(212, 175, 55, 0.22),
        0 0 34px rgba(212, 175, 55, 0.1);
    transform: rotate(135deg);
}

.kooka-giveaway-facts__item:hover
.kooka-giveaway-facts__icon::after {
    border-color: rgba(5, 5, 5, 0.24);
    transform: rotate(-45deg);
}

.kooka-giveaway-facts__item:hover
.kooka-giveaway-facts__icon svg {
    color: var(--kooka-black);
    transform: scale(1.08);
}

/* =========================================================
   CONTENT
   ========================================================= */

.kooka-giveaway-facts__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kooka-giveaway-facts__content strong {
    display: block;
    margin: 0 0 8px;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(19px, 1.45vw, 24px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    white-space: nowrap;
    transition: color 0.35s ease;
}

.kooka-giveaway-facts__content span {
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color 0.35s ease;
}

.kooka-giveaway-facts__item:hover
.kooka-giveaway-facts__content strong {
    color: var(--kooka-yellow);
}

.kooka-giveaway-facts__item:hover
.kooka-giveaway-facts__content span {
    color: rgba(255, 255, 255, 0.64);
}

/* =========================================================
   SMALL DESKTOP / TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .kooka-giveaway-facts__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(920px, calc(100% - 48px));
    }

    .kooka-giveaway-facts__item {
        min-height: 120px;
        padding: 25px 34px;
    }

    /* Quitamos el separador tras el segundo elemento */

    .kooka-giveaway-facts__item:nth-child(2)::after {
        display: none;
    }

    /* Separador horizontal entre las dos filas */

    .kooka-giveaway-facts__item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    }

    .kooka-giveaway-facts__content strong {
        font-size: 22px;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .kooka-giveaway-facts__track {
        display: block;
        width: calc(100% - 36px);
    }

    .kooka-giveaway-facts__item {
        gap: 20px;
        min-height: 98px;
        padding: 21px 15px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    }

    .kooka-giveaway-facts__item:last-child {
        border-bottom: 0;
    }

    /* En móvil desaparecen todos los separadores verticales */

    .kooka-giveaway-facts__item::after {
        display: none;
    }

    .kooka-giveaway-facts__item::before {
        right: 0;
        left: 0;
    }

    .kooka-giveaway-facts__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .kooka-giveaway-facts__icon::after {
        inset: 6px;
    }

    .kooka-giveaway-facts__icon svg {
        width: 25px;
        height: 25px;
    }

    .kooka-giveaway-facts__content strong {
        margin-bottom: 6px;
        font-size: 20px;
        white-space: normal;
    }

    .kooka-giveaway-facts__content span {
        font-size: 7px;
        line-height: 1.5;
        letter-spacing: 0.11em;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-giveaway-facts *,
    .kooka-giveaway-facts *::before,
    .kooka-giveaway-facts *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   KOOKA DIGITAL — HOW IT WORKS INTRO
   Compacto · Centrado · Texto mínimo 14px
   ========================================================= */

.kooka-process-intro {
    --kooka-yellow: #d4af37;
    --kooka-black: #050505;
    --kooka-white: #ffffff;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    color: var(--kooka-white);
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(212, 175, 55, 0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #080808 52%,
            #050505 100%
        );
}

.kooka-process-intro,
.kooka-process-intro * {
    box-sizing: border-box;
}

/* Cuadrícula ambiental */

.kooka-process-intro::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.13;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 16%,
        #000 84%,
        transparent
    );
}

/* Profundidad lateral */

.kooka-process-intro::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(5, 5, 5, 0.6),
        transparent 22%,
        transparent 78%,
        rgba(5, 5, 5, 0.6)
    );
}

/* =========================================================
   GLOW
   ========================================================= */

.kooka-process-intro__glow {
    position: absolute;
    z-index: -1;
    top: 15%;
    left: 50%;
    width: min(680px, 65vw);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.17;
    background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.25) 0%,
        rgba(212, 175, 55, 0.07) 36%,
        transparent 70%
    );
    filter: blur(28px);
    transform: translateX(-50%);
    animation: kookaProcessGlow 7s ease-in-out infinite;
}

/* =========================================================
   CONTAINER
   Altura considerablemente reducida
   ========================================================= */

.kooka-process-intro__container {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 80px));
    margin: 0 auto;
    padding: clamp(60px, 6vw, 86px) 0 clamp(58px, 6vw, 82px);
}

/* =========================================================
   TOP
   ========================================================= */

.kooka-process-intro__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}

.kooka-process-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.kooka-process-intro__eyebrow i {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--kooka-yellow);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.38);
    transform-origin: center;
    animation: kookaProcessLineIn 0.9s 0.15s both;
}

.kooka-process-intro__index {
    position: absolute;
    top: 50%;
    right: 0;
    color: rgba(255, 255, 255, 0.32);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;
    transform: translateY(-50%);
}

/* =========================================================
   TÍTULO CENTRADO
   ========================================================= */

.kooka-process-intro__heading {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 12px;
    text-align: center;
}

.kooka-process-intro__heading h2 {
    position: relative;
    z-index: 3;
    margin: 0;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(64px, 7.2vw, 108px);
    font-weight: 400;
    line-height: 0.91;
    letter-spacing: -0.055em;
    text-align: center;
    text-wrap: balance;
    animation: kookaProcessTitleIn 1s
        cubic-bezier(.16, .78, .22, 1) both;
}

.kooka-process-intro__heading h2 em {
    display: block;
    margin: 2px 0 0;
    color: var(--kooka-yellow);
    font-family: inherit;
    font-weight: 400;
    line-height: inherit;
}

/* Texto outline detrás */

.kooka-process-intro__outline {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    color: transparent;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(100px, 13vw, 190px);
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: -0.07em;
    white-space: nowrap;
    opacity: 0.11;
    -webkit-text-stroke: 1px var(--kooka-yellow);
    transform: translate(-50%, -50%);
    animation:
        kookaProcessOutlineIn 1.2s
        cubic-bezier(.16, .78, .22, 1) both,
        kookaProcessOutlineDrift 9s 1.2s
        ease-in-out infinite;
}

/* Línea diagonal */

.kooka-process-intro__stroke {
    position: absolute;
    z-index: 4;
    top: 58%;
    left: 50%;
    width: min(850px, 72vw);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.3) 15%,
        var(--kooka-yellow) 50%,
        rgba(212, 175, 55, 0.3) 85%,
        transparent
    );
    box-shadow:
        0 0 8px rgba(212, 175, 55, 0.5),
        0 0 20px rgba(212, 175, 55, 0.18);
    transform: translateX(-50%) rotate(-5deg) scaleX(0);
    transform-origin: center;
    animation: kookaProcessStrokeIn 1.15s 0.45s
        cubic-bezier(.2, .75, .25, 1) forwards;
}

/* =========================================================
   COPY INFERIOR
   Centrada y compacta
   ========================================================= */

.kooka-process-intro__footer {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(42px, 6vw, 84px);
    width: min(970px, 100%);
    margin: clamp(36px, 4.5vw, 56px) auto 0;
}

.kooka-process-intro__statement {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-align: right;
}

.kooka-process-intro__statement span {
    color: var(--kooka-yellow);
}

.kooka-process-intro__description {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: rgba(255, 255, 255, 0.66);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    text-align: left;
}

.kooka-process-intro__description::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        var(--kooka-yellow),
        rgba(212, 175, 55, 0.12)
    );
}

/* =========================================================
   MARQUEE
   ========================================================= */

.kooka-process-intro__marquee {
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    background: rgba(212, 175, 55, 0.025);
}

.kooka-process-intro__marquee-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    min-height: 54px;
    padding-right: 34px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    white-space: nowrap;
    text-transform: uppercase;
    animation: kookaProcessMarquee 25s linear infinite;
}

.kooka-process-intro__marquee-track span:nth-of-type(3n + 2) {
    color: var(--kooka-yellow);
}

.kooka-process-intro__marquee-track i {
    display: block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    background: var(--kooka-yellow);
    transform: rotate(45deg);
}

.kooka-process-intro__marquee:hover
.kooka-process-intro__marquee-track {
    animation-play-state: paused;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes kookaProcessTitleIn {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(0.97);
        filter: blur(7px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes kookaProcessOutlineIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }

    to {
        opacity: 0.11;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes kookaProcessOutlineDrift {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-48%, -50%);
    }
}

@keyframes kookaProcessLineIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes kookaProcessStrokeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) rotate(-5deg) scaleX(0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) rotate(-5deg) scaleX(1);
    }
}

@keyframes kookaProcessGlow {
    0%,
    100% {
        opacity: 0.12;
        transform: translateX(-50%) scale(0.94);
    }

    50% {
        opacity: 0.22;
        transform: translateX(-50%) scale(1.06);
    }
}

@keyframes kookaProcessMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .kooka-process-intro__container {
        width: min(920px, calc(100% - 48px));
        padding: 64px 0 68px;
    }

    .kooka-process-intro__heading h2 {
        font-size: clamp(62px, 9vw, 88px);
    }

    .kooka-process-intro__footer {
        gap: 44px;
        width: min(820px, 100%);
    }

    .kooka-process-intro__statement {
        font-size: 26px;
    }

    .kooka-process-intro__description {
        font-size: 14px;
    }

}

/* =========================================================
   MOBILE
   Ningún texto por debajo de 14px
   ========================================================= */

@media (max-width: 767px) {

    .kooka-process-intro::before {
        background-size: 46px 46px;
    }

    .kooka-process-intro__container {
        width: calc(100% - 36px);
        padding: 52px 0 54px;
    }

    .kooka-process-intro__top {
        justify-content: flex-start;
        margin-bottom: 34px;
    }

    .kooka-process-intro__eyebrow {
        gap: 11px;
        font-size: 14px;
        letter-spacing: 0.15em;
    }

    .kooka-process-intro__eyebrow i {
        width: 24px;
    }

    .kooka-process-intro__eyebrow i:last-child {
        display: none;
    }

    .kooka-process-intro__index {
        font-size: 14px;
    }

    .kooka-process-intro__heading {
        padding: 0;
    }

    .kooka-process-intro__heading h2 {
        font-size: clamp(49px, 14vw, 68px);
        line-height: 0.94;
        letter-spacing: -0.05em;
    }

    .kooka-process-intro__heading h2 em {
        margin-top: 3px;
    }

    .kooka-process-intro__outline {
        font-size: clamp(78px, 25vw, 116px);
        opacity: 0.08;
    }

    .kooka-process-intro__stroke {
        top: 60%;
        width: 115%;
    }

    .kooka-process-intro__footer {
        display: block;
        width: 100%;
        margin-top: 38px;
    }

    .kooka-process-intro__statement {
        max-width: 370px;
        margin: 0 auto;
        font-size: 25px;
        line-height: 1.2;
        text-align: center;
    }

    .kooka-process-intro__description {
        max-width: 430px;
        margin: 27px auto 0;
        padding: 22px 0 0;
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }

    .kooka-process-intro__description::before {
        top: 0;
        right: 25%;
        bottom: auto;
        left: 25%;
        width: auto;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            var(--kooka-yellow),
            transparent
        );
    }

    .kooka-process-intro__glow {
        top: 20%;
        width: 120vw;
    }

    .kooka-process-intro__marquee-track {
        gap: 25px;
        min-height: 50px;
        padding-right: 25px;
        font-size: 14px;
        letter-spacing: 0.13em;
        animation-duration: 20s;
    }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .kooka-process-intro__container {
        width: calc(100% - 30px);
    }

    .kooka-process-intro__heading h2 {
        font-size: 47px;
    }

    .kooka-process-intro__statement {
        font-size: 23px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-process-intro *,
    .kooka-process-intro *::before,
    .kooka-process-intro *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* =========================================================
   KOOKA DIGITAL — PROCESS + COUNTDOWN + SEO
   No text below 14px
   ========================================================= */

.kooka-giveaway-process {
    --kooka-yellow: #d4af37;
    --kooka-black: #050505;
    --kooka-panel: #0a0a0a;
    --kooka-white: #ffffff;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    color: var(--kooka-white);
    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(212, 175, 55, 0.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 72%,
            rgba(212, 175, 55, 0.05),
            transparent 28%
        ),
        #050505;
}

.kooka-giveaway-process,
.kooka-giveaway-process * {
    box-sizing: border-box;
}

.kooka-giveaway-process::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
}

.kooka-giveaway-process::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(5, 5, 5, 0.78),
        transparent 20%,
        transparent 80%,
        rgba(5, 5, 5, 0.78)
    );
}

.kooka-giveaway-process__ambient {
    position: absolute;
    z-index: -1;
    top: 180px;
    left: 50%;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(212, 175, 55, 0.07);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

.kooka-giveaway-process__ambient::before,
.kooka-giveaway-process__ambient::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(212, 175, 55, 0.045);
}

.kooka-giveaway-process__ambient::after {
    inset: 28%;
}

.kooka-giveaway-process__container {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
    padding: clamp(68px, 6vw, 94px) 0;
}

/* =========================================================
   SHARED LABEL
   ========================================================= */

.kooka-giveaway-process__label {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kooka-giveaway-process__label::before {
    content: "";
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 1px;
    background: var(--kooka-yellow);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.38);
}

/* =========================================================
   COUNTDOWN
   ========================================================= */

.kooka-giveaway-process__countdown {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
    align-items: center;
    gap: clamp(55px, 7vw, 105px);
    padding-bottom: clamp(68px, 7vw, 96px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.kooka-giveaway-process__countdown-copy h2 {
    max-width: 670px;
    margin: 22px 0 24px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(46px, 4.3vw, 70px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.kooka-giveaway-process__countdown-copy h2 em {
    display: block;
    margin-top: 7px;
    color: var(--kooka-yellow);
    font-weight: 400;
}

.kooka-giveaway-process__countdown-copy p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

.kooka-giveaway-process__timer {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(90px, 1fr) auto
        minmax(90px, 1fr) auto
        minmax(90px, 1fr) auto
        minmax(90px, 1fr);
    align-items: center;
    min-height: 190px;
    padding: 30px 25px;
    border: 1px solid rgba(212, 175, 55, 0.24);
    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.07),
            rgba(255, 255, 255, 0.012) 45%,
            rgba(212, 175, 55, 0.025)
        ),
        rgba(10, 10, 10, 0.8);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(212, 175, 55, 0.018);
}

.kooka-giveaway-process__timer::before,
.kooka-giveaway-process__timer::after {
    content: "";
    position: absolute;
    width: 42px;
    height: 42px;
    pointer-events: none;
}

.kooka-giveaway-process__timer::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--kooka-yellow);
    border-left: 2px solid var(--kooka-yellow);
}

.kooka-giveaway-process__timer::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--kooka-yellow);
    border-bottom: 2px solid var(--kooka-yellow);
}

.kooka-giveaway-process__time {
    min-width: 0;
    text-align: center;
}

.kooka-giveaway-process__time strong {
    display: block;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(45px, 4.2vw, 66px);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kooka-giveaway-process__time span {
    display: block;
    margin-top: 13px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.kooka-giveaway-process__timer > i {
    display: block;
    width: 5px;
    height: 5px;
    background: var(--kooka-yellow);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.65);
    transform: rotate(45deg);
}

/* =========================================================
   THREE STEPS
   ========================================================= */

.kooka-giveaway-process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(70px, 7vw, 100px) 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.kooka-giveaway-process__steps::before {
    content: "";
    position: absolute;
    top: clamp(115px, 11vw, 152px);
    right: 13%;
    left: 13%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.6) 16%,
        rgba(212, 175, 55, 0.22) 50%,
        rgba(212, 175, 55, 0.6) 84%,
        transparent
    );
}

.kooka-giveaway-process__step {
    position: relative;
    min-width: 0;
    padding: 0 clamp(30px, 3.5vw, 56px);
    text-align: center;
}

.kooka-giveaway-process__step + .kooka-giveaway-process__step {
    border-left: 1px solid rgba(212, 175, 55, 0.12);
}

.kooka-giveaway-process__number {
    position: absolute;
    top: -45px;
    left: 22px;
    color: transparent;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(90px, 8vw, 126px);
    font-weight: 400;
    line-height: 1;
    opacity: 0.13;
    -webkit-text-stroke: 1px var(--kooka-yellow);
}

.kooka-giveaway-process__step-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 38px;
    color: var(--kooka-yellow);
    background: #080808;
}

.kooka-giveaway-process__step-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.025);
    transform: rotate(45deg);
    transition:
        transform 0.55s cubic-bezier(.2, .75, .25, 1),
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

.kooka-giveaway-process__step-icon svg {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.kooka-giveaway-process__step:hover
.kooka-giveaway-process__step-icon::before {
    background: var(--kooka-yellow);
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.22),
        0 0 45px rgba(212, 175, 55, 0.1);
    transform: rotate(135deg);
}

.kooka-giveaway-process__step:hover
.kooka-giveaway-process__step-icon svg {
    color: var(--kooka-black);
    transform: scale(1.08);
}

.kooka-giveaway-process__step-copy > span {
    display: block;
    margin-bottom: 13px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kooka-giveaway-process__step h3 {
    max-width: 330px;
    margin: 0 auto 18px;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(28px, 2.3vw, 36px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.kooka-giveaway-process__step p {
    max-width: 370px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.62);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

/* =========================================================
   SEO CONTENT
   ========================================================= */

.kooka-giveaway-process__seo {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(60px, 9vw, 135px);
    padding: clamp(76px, 8vw, 112px) 0 clamp(62px, 7vw, 92px);
}

.kooka-giveaway-process__seo-heading h2 {
    max-width: 630px;
    margin: 24px 0 0;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 4.6vw, 70px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.045em;
}

.kooka-giveaway-process__seo-heading h2 em {
    display: block;
    margin-top: 9px;
    color: var(--kooka-yellow);
    font-weight: 400;
}

.kooka-giveaway-process__seo-copy {
    position: relative;
    padding-left: clamp(28px, 3vw, 48px);
    border-left: 1px solid rgba(212, 175, 55, 0.3);
}

.kooka-giveaway-process__seo-copy p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.62);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.kooka-giveaway-process__seo-copy p:last-child {
    margin-bottom: 0;
}

.kooka-giveaway-process__seo-copy
.kooka-giveaway-process__lead {
    color: rgba(255, 255, 255, 0.92);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* =========================================================
   SERVICES
   ========================================================= */

.kooka-giveaway-process__services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.kooka-giveaway-process__service {
    position: relative;
    min-width: 0;
    padding: 42px clamp(24px, 2.5vw, 38px);
    transition: background-color 0.35s ease;
}

.kooka-giveaway-process__service + .kooka-giveaway-process__service {
    border-left: 1px solid rgba(212, 175, 55, 0.14);
}

.kooka-giveaway-process__service:hover {
    background: rgba(212, 175, 55, 0.045);
}

.kooka-giveaway-process__service > span {
    display: block;
    margin-bottom: 25px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.kooka-giveaway-process__service h3 {
    margin: 0 0 15px;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(24px, 1.8vw, 29px);
    font-weight: 400;
    line-height: 1.12;
}

.kooka-giveaway-process__service p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.72;
}

/* =========================================================
   CTA
   ========================================================= */

.kooka-giveaway-process__cta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding-top: clamp(68px, 7vw, 96px);
}

.kooka-giveaway-process__cta > div > span {
    display: block;
    margin-bottom: 15px;
    color: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.kooka-giveaway-process__cta h2 {
    max-width: 800px;
    margin: 0;
    color: var(--kooka-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 4.6vw, 68px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.045em;
}

.kooka-giveaway-process__cta h2 em {
    display: block;
    color: var(--kooka-yellow);
    font-weight: 400;
}

.kooka-giveaway-process__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex: 0 0 auto;
    min-height: 64px;
    padding: 0 27px;
    border: 1px solid var(--kooka-yellow);
    color: var(--kooka-black);
    background: var(--kooka-yellow);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.kooka-giveaway-process__button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.kooka-giveaway-process__button:hover {
    color: var(--kooka-yellow);
    background: transparent;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.12);
    transform: translateY(-3px);
}

.kooka-giveaway-process__button:hover svg {
    transform: translateX(5px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .kooka-giveaway-process__container {
        width: min(940px, calc(100% - 48px));
    }

    .kooka-giveaway-process__countdown {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .kooka-giveaway-process__countdown-copy {
        max-width: 760px;
    }

    .kooka-giveaway-process__timer {
        width: 100%;
    }

    .kooka-giveaway-process__steps {
        gap: 0;
    }

    .kooka-giveaway-process__step {
        padding-right: 25px;
        padding-left: 25px;
    }

    .kooka-giveaway-process__services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kooka-giveaway-process__service:nth-child(3) {
        border-left: 0;
    }

    .kooka-giveaway-process__service:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(212, 175, 55, 0.14);
    }

    .kooka-giveaway-process__cta {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kooka-giveaway-process__container {
        width: calc(100% - 36px);
        padding: 58px 0 64px;
    }

    .kooka-giveaway-process__ambient {
        top: 250px;
        width: 125vw;
        height: 125vw;
    }

    .kooka-giveaway-process__label {
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.55;
        letter-spacing: 0.1em;
    }

    .kooka-giveaway-process__label::before {
        flex-basis: 23px;
        width: 23px;
        margin-top: 10px;
    }

    .kooka-giveaway-process__countdown {
        gap: 34px;
        padding-bottom: 57px;
    }

    .kooka-giveaway-process__countdown-copy h2 {
        margin: 20px 0;
        font-size: clamp(42px, 12vw, 58px);
        line-height: 1;
    }

    .kooka-giveaway-process__countdown-copy p {
        font-size: 15px;
        line-height: 1.72;
    }

    .kooka-giveaway-process__timer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 130px;
        padding: 24px 8px;
    }

    .kooka-giveaway-process__timer > i {
        display: none;
    }

    .kooka-giveaway-process__time + .kooka-giveaway-process__time {
        border-left: 1px solid rgba(212, 175, 55, 0.15);
    }

    .kooka-giveaway-process__time strong {
        font-size: clamp(33px, 10vw, 45px);
    }

    .kooka-giveaway-process__time span {
        margin-top: 10px;
        font-size: 14px;
        letter-spacing: 0.05em;
    }

    .kooka-giveaway-process__steps {
        display: block;
        padding: 58px 0;
    }

    .kooka-giveaway-process__steps::before {
        top: 90px;
        right: auto;
        bottom: 90px;
        left: 38px;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            transparent,
            rgba(212, 175, 55, 0.55) 10%,
            rgba(212, 175, 55, 0.18) 90%,
            transparent
        );
    }

    .kooka-giveaway-process__step {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 25px;
        padding: 0;
        text-align: left;
    }

    .kooka-giveaway-process__step
    + .kooka-giveaway-process__step {
        margin-top: 55px;
        padding-top: 0;
        border-left: 0;
    }

    .kooka-giveaway-process__number {
        top: -32px;
        right: 0;
        left: auto;
        font-size: 84px;
    }

    .kooka-giveaway-process__step-icon {
        width: 58px;
        height: 58px;
        margin: 12px auto 0;
    }

    .kooka-giveaway-process__step-icon svg {
        width: 33px;
        height: 33px;
    }

    .kooka-giveaway-process__step-copy {
        position: relative;
        z-index: 2;
    }

    .kooka-giveaway-process__step-copy > span {
        font-size: 14px;
        letter-spacing: 0.1em;
    }

    .kooka-giveaway-process__step h3,
    .kooka-giveaway-process__step p {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    .kooka-giveaway-process__step h3 {
        font-size: 29px;
    }

    .kooka-giveaway-process__step p {
        font-size: 15px;
    }

    .kooka-giveaway-process__seo {
        display: block;
        padding: 60px 0 52px;
    }

    .kooka-giveaway-process__seo-heading h2 {
        margin-top: 21px;
        font-size: clamp(40px, 11vw, 53px);
    }

    .kooka-giveaway-process__seo-copy {
        margin-top: 38px;
        padding: 25px 0 0;
        border-top: 1px solid rgba(212, 175, 55, 0.28);
        border-left: 0;
    }

    .kooka-giveaway-process__seo-copy p {
        font-size: 15px;
        line-height: 1.75;
    }

    .kooka-giveaway-process__seo-copy
    .kooka-giveaway-process__lead {
        font-size: 24px;
        line-height: 1.32;
    }

    .kooka-giveaway-process__services {
        display: block;
    }

    .kooka-giveaway-process__service {
        padding: 32px 5px;
    }

    .kooka-giveaway-process__service
    + .kooka-giveaway-process__service {
        border-top: 1px solid rgba(212, 175, 55, 0.14);
        border-left: 0;
    }

    .kooka-giveaway-process__service:nth-child(-n + 2) {
        border-bottom: 0;
    }

    .kooka-giveaway-process__service h3 {
        font-size: 27px;
    }

    .kooka-giveaway-process__service p {
        font-size: 15px;
    }

    .kooka-giveaway-process__cta {
        gap: 36px;
        padding-top: 58px;
    }

    .kooka-giveaway-process__cta h2 {
        font-size: clamp(40px, 11vw, 53px);
    }

    .kooka-giveaway-process__button {
        width: 100%;
        min-height: 62px;
        font-size: 14px;
    }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .kooka-giveaway-process__timer {
        padding-right: 4px;
        padding-left: 4px;
    }

    .kooka-giveaway-process__time strong {
        font-size: 31px;
    }

    .kooka-giveaway-process__time span {
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
    }

    .kooka-giveaway-process__step {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 19px;
    }

    .kooka-giveaway-process__steps::before {
        left: 29px;
    }

    .kooka-giveaway-process__step-icon {
        width: 48px;
        height: 48px;
    }

    .kooka-giveaway-process__step-icon svg {
        width: 28px;
        height: 28px;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-giveaway-process *,
    .kooka-giveaway-process *::before,
    .kooka-giveaway-process *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   KOOKA DIGITAL — $10K GIVEAWAY TERMS
   ========================================================= */

.kooka-terms {
    --kt-gold: #d4af37;
    --kt-gold-light: #ebcd68;
    --kt-black: #050505;
    --kt-panel: #0a0a0a;
    --kt-white: #ffffff;
    --kt-text: rgba(255, 255, 255, 0.68);
    --kt-border: rgba(212, 175, 55, 0.17);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    color: var(--kt-white);
    background:
        radial-gradient(
            circle at 5% 8%,
            rgba(212, 175, 55, 0.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 60%,
            rgba(212, 175, 55, 0.05),
            transparent 28%
        ),
        var(--kt-black);
}

.kooka-terms,
.kooka-terms * {
    box-sizing: border-box;
}

.kooka-terms::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
}

.kooka-terms__ambient {
    position: absolute;
    z-index: -1;
    top: 230px;
    right: -320px;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(212, 175, 55, 0.08);
    transform: rotate(45deg);
    pointer-events: none;
}

.kooka-terms__ambient::before,
.kooka-terms__ambient::after {
    content: "";
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(212, 175, 55, 0.05);
}

.kooka-terms__ambient::after {
    inset: 30%;
}

.kooka-terms__container {
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */

.kooka-terms__hero {
    position: relative;
    padding: 60px 0 clamp(74px, 8vw, 112px);
    border-bottom: 1px solid var(--kt-border);
}

.kooka-terms__back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(70px, 8vw, 110px);
    color: rgba(255, 255, 255, 0.62);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.kooka-terms__back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kooka-terms__back:hover {
    color: var(--kt-gold);
    transform: translateX(-4px);
}

.kooka-terms__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr);
    align-items: end;
    gap: clamp(65px, 10vw, 150px);
}

.kooka-terms__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kooka-terms__eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--kt-gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.kooka-terms__hero-copy h1 {
    max-width: 800px;
    margin: 27px 0 28px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(58px, 6.5vw, 98px);
    font-weight: 400;
    line-height: 0.91;
    letter-spacing: -0.055em;
}

.kooka-terms__hero-copy h1 em {
    display: block;
    margin-top: 10px;
    color: var(--kt-gold);
    font-weight: 400;
}

.kooka-terms__hero-copy > p {
    max-width: 680px;
    margin: 0;
    color: var(--kt-text);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;
}

.kooka-terms__summary {
    position: relative;
    padding: 34px 36px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.07),
            transparent 45%
        ),
        rgba(10, 10, 10, 0.88);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}

.kooka-terms__summary::before,
.kooka-terms__summary::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
}

.kooka-terms__summary::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--kt-gold);
    border-left: 2px solid var(--kt-gold);
}

.kooka-terms__summary::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--kt-gold);
    border-bottom: 2px solid var(--kt-gold);
}

.kooka-terms__summary-label {
    display: block;
    margin-bottom: 23px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kooka-terms__summary dl {
    margin: 0;
}

.kooka-terms__summary dl div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kooka-terms__summary dt,
.kooka-terms__summary dd {
    margin: 0;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

.kooka-terms__summary dt {
    color: rgba(255, 255, 255, 0.47);
}

.kooka-terms__summary dd {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.kooka-terms__navigation {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--kt-border);
    background: rgba(5, 5, 5, 0.94);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kooka-terms__navigation .kooka-terms__container {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.kooka-terms__navigation .kooka-terms__container::-webkit-scrollbar {
    display: none;
}

.kooka-terms__navigation a {
    flex: 0 0 auto;
    padding: 21px 23px;
    border-left: 1px solid rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.6);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-decoration: none;
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.kooka-terms__navigation a:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.kooka-terms__navigation a:hover {
    color: var(--kt-gold);
    background: rgba(212, 175, 55, 0.05);
}

/* =========================================================
   CONTENT LAYOUT
   ========================================================= */

.kooka-terms__content {
    padding: clamp(75px, 8vw, 115px) 0;
}

.kooka-terms__layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.36fr) minmax(0, 0.64fr);
    align-items: start;
    gap: clamp(65px, 9vw, 135px);
}

.kooka-terms__sidebar {
    position: sticky;
    top: 105px;
}

.kooka-terms__sidebar-card {
    padding: 36px;
    border: 1px solid var(--kt-border);
    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, 0.055),
            transparent 48%
        ),
        var(--kt-panel);
}

.kooka-terms__sidebar-card > span {
    display: block;
    margin-bottom: 18px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kooka-terms__sidebar-card h2 {
    margin: 0 0 24px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 3vw, 45px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.kooka-terms__sidebar-card h2 em {
    display: block;
    margin-top: 6px;
    color: var(--kt-gold);
    font-weight: 400;
}

.kooka-terms__sidebar-card p {
    margin: 0 0 30px;
    color: var(--kt-text);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}

.kooka-terms__intro {
    margin-bottom: 30px;
    padding: 0 0 45px;
    border-bottom: 1px solid var(--kt-border);
}

.kooka-terms__intro p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.88);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(22px, 2vw, 29px);
    line-height: 1.4;
    letter-spacing: -0.015em;
}

.kooka-terms__intro p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   ARTICLES
   ========================================================= */

.kooka-terms__article {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 27px;
    scroll-margin-top: 110px;
    padding: 48px 0;
    border-bottom: 1px solid var(--kt-border);
}

.kooka-terms__number {
    display: block;
    padding-top: 6px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.kooka-terms__article h2 {
    margin: 0 0 23px;
    color: var(--kt-white);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.kooka-terms__article p,
.kooka-terms__article li {
    color: var(--kt-text);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.82;
}

.kooka-terms__article p {
    margin: 0 0 19px;
}

.kooka-terms__article p:last-child {
    margin-bottom: 0;
}

.kooka-terms__article ul,
.kooka-terms__article ol {
    margin: 20px 0 23px;
    padding: 0;
    list-style: none;
    counter-reset: terms-list;
}

.kooka-terms__article li {
    position: relative;
    padding: 8px 0 8px 31px;
}

.kooka-terms__article ul li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 2px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--kt-gold);
    transform: rotate(45deg);
}

.kooka-terms__article ol li {
    counter-increment: terms-list;
}

.kooka-terms__article ol li::before {
    content: counter(terms-list, decimal-leading-zero);
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--kt-gold);
    font-weight: 700;
}

.kooka-terms__article a {
    color: var(--kt-gold-light);
    text-decoration-color: rgba(212, 175, 55, 0.45);
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.kooka-terms__article a:hover {
    color: var(--kt-white);
}

.kooka-terms__article strong {
    color: rgba(255, 255, 255, 0.93);
}

.kooka-terms__notice {
    margin-top: 28px;
    padding: 22px 24px;
    border-left: 2px solid var(--kt-gold);
    color: rgba(255, 255, 255, 0.72);
    background: rgba(212, 175, 55, 0.055);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.72;
}

.kooka-terms__notice strong {
    color: var(--kt-gold);
}

/* =========================================================
   BUTTON
   ========================================================= */

.kooka-terms__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 58px;
    padding: 0 22px;
    border: 1px solid var(--kt-gold);
    color: var(--kt-black);
    background: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.kooka-terms__button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.kooka-terms__button:hover {
    color: var(--kt-gold);
    background: transparent;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.13);
    transform: translateY(-3px);
}

.kooka-terms__button:hover svg {
    transform: translateX(5px);
}

/* =========================================================
   DOCUMENT INFORMATION
   ========================================================= */

.kooka-terms__updated {
    margin-top: 50px;
    padding: 28px 30px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.018);
}

.kooka-terms__updated span {
    display: block;
    margin-bottom: 13px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.kooka-terms__updated p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.kooka-terms__cta {
    border-top: 1px solid var(--kt-border);
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.065),
            transparent 40%
        ),
        #070707;
}

.kooka-terms__cta .kooka-terms__container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding-top: clamp(70px, 7vw, 100px);
    padding-bottom: clamp(70px, 7vw, 100px);
}

.kooka-terms__cta > .kooka-terms__container > div > span {
    display: block;
    margin-bottom: 17px;
    color: var(--kt-gold);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kooka-terms__cta h2 {
    max-width: 800px;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.kooka-terms__cta h2 em {
    display: block;
    margin-top: 6px;
    color: var(--kt-gold);
    font-weight: 400;
}

.kooka-terms__button--large {
    flex: 0 0 auto;
    min-height: 64px;
    padding-right: 28px;
    padding-left: 28px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .kooka-terms__container {
        width: min(940px, calc(100% - 48px));
    }

    .kooka-terms__hero-grid {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 55px;
    }

    .kooka-terms__summary {
        width: min(100%, 670px);
    }

    .kooka-terms__layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 55px;
    }

    .kooka-terms__sidebar-card {
        padding: 27px;
    }

    .kooka-terms__article {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 20px;
    }

    .kooka-terms__cta .kooka-terms__container {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kooka-terms__container {
        width: calc(100% - 36px);
    }

    .kooka-terms__hero {
        padding: 34px 0 62px;
    }

    .kooka-terms__back {
        margin-bottom: 58px;
        font-size: 14px;
    }

    .kooka-terms__hero-grid {
        gap: 42px;
    }

    .kooka-terms__eyebrow {
        align-items: flex-start;
        font-size: 14px;
        letter-spacing: 0.1em;
    }

    .kooka-terms__eyebrow::before {
        flex: 0 0 24px;
        width: 24px;
        margin-top: 10px;
    }

    .kooka-terms__hero-copy h1 {
        margin: 22px 0;
        font-size: clamp(51px, 15vw, 70px);
        line-height: 0.94;
    }

    .kooka-terms__hero-copy > p {
        font-size: 15px;
        line-height: 1.72;
    }

    .kooka-terms__summary {
        padding: 28px 22px;
    }

    .kooka-terms__summary dl div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 13px 0;
    }

    .kooka-terms__summary dt,
    .kooka-terms__summary dd {
        font-size: 14px;
    }

    .kooka-terms__navigation .kooka-terms__container {
        width: 100%;
        padding-left: 18px;
    }

    .kooka-terms__navigation a {
        padding: 18px 17px;
        font-size: 14px;
    }

    .kooka-terms__content {
        padding: 58px 0 70px;
    }

    .kooka-terms__layout {
        display: block;
    }

    .kooka-terms__sidebar {
        position: static;
        margin-bottom: 55px;
    }

    .kooka-terms__sidebar-card {
        padding: 29px 24px;
    }

    .kooka-terms__sidebar-card h2 {
        font-size: 37px;
    }

    .kooka-terms__button {
        width: 100%;
    }

    .kooka-terms__intro {
        padding-bottom: 35px;
    }

    .kooka-terms__intro p {
        font-size: 23px;
        line-height: 1.38;
    }

    .kooka-terms__article {
        grid-template-columns: 1fr;
        gap: 14px;
        scroll-margin-top: 90px;
        padding: 40px 0;
    }

    .kooka-terms__number {
        padding-top: 0;
    }

    .kooka-terms__article h2 {
        margin-bottom: 20px;
        font-size: 32px;
    }

    .kooka-terms__article p,
    .kooka-terms__article li,
    .kooka-terms__notice {
        font-size: 15px;
    }

    .kooka-terms__article li {
        padding-left: 28px;
    }

    .kooka-terms__notice {
        padding: 19px 20px;
    }

    .kooka-terms__updated {
        margin-top: 38px;
        padding: 24px 21px;
    }

    .kooka-terms__cta .kooka-terms__container {
        gap: 37px;
        padding-top: 62px;
        padding-bottom: 68px;
    }

    .kooka-terms__cta h2 {
        font-size: clamp(42px, 12vw, 57px);
    }

    .kooka-terms__button--large {
        width: 100%;
    }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kooka-terms *,
    .kooka-terms *::before,
    .kooka-terms *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

}
.kd-maintenance .kd-local-seo__hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(8, 16, 20, 0.92) 0%,
            rgba(8, 16, 20, 0.72) 48%,
            rgba(8, 16, 20, 0.28) 100%
        ),
        url("https://kookadigital.com.au/wp-content/uploads/2026/07/kooka-wordpress-maintenance-support.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   KOOKA APPS — HERO
========================================================= */

.kooka-apps-hero {
	position: relative;
	isolation: isolate;

	width: 100%;
	min-height: 690px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background-image:
		url("https://kookadigital.com.au/wp-content/uploads/2026/08/kooka-digital-business-apps-hero.webp");

	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;

	border-bottom: 1px solid rgba(218, 181, 53, 0.32);
}


/* =========================================================
   OVERLAY
========================================================= */

.kooka-apps-hero__overlay {
	position: absolute;
	inset: 0;

	z-index: -1;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.96) 0%,
			rgba(0, 0, 0, 0.83) 26%,
			rgba(0, 0, 0, 0.38) 51%,
			rgba(0, 0, 0, 0.05) 74%,
			rgba(0, 0, 0, 0.03) 100%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.12) 0%,
			rgba(0, 0, 0, 0) 60%,
			rgba(0, 0, 0, 0.30) 100%
		);

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.kooka-apps-hero__container {
	width: min(100% - 48px, 1360px);

	margin: 0 auto;

	padding: 90px 0 85px;
}


/* =========================================================
   CONTENT
========================================================= */

.kooka-apps-hero__content {
	width: 100%;
	max-width: 610px;
}


/* =========================================================
   EYEBROW
========================================================= */

.kooka-apps-hero__eyebrow {
	margin-bottom: 18px;

	color: #dcb936;

	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 4px;
	text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.kooka-apps-hero__title {
	margin: 0;

	color: #ffffff;

	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(48px, 4.5vw, 74px);
	font-weight: 400;
	line-height: 1.08;

	letter-spacing: -1.5px;
}

.kooka-apps-hero__title span {
	color: #dcb936;
}


/* =========================================================
   GOLD DETAIL
========================================================= */

.kooka-apps-hero__line {
	position: relative;

	width: 72px;
	height: 10px;

	margin: 25px 0 24px;
}

.kooka-apps-hero__line::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 72px;
	height: 1px;

	background: linear-gradient(
		90deg,
		#dcb936,
		rgba(220, 185, 54, 0.22)
	);
}

.kooka-apps-hero__line span {
	position: absolute;

	top: 50%;
	left: 31px;

	width: 6px;
	height: 6px;

	background: #dcb936;

	border-radius: 50%;

	transform: translateY(-50%);

	box-shadow:
		0 0 10px rgba(220, 185, 54, 0.45);
}


/* =========================================================
   TEXT
========================================================= */

.kooka-apps-hero__text {
	max-width: 570px;

	margin: 0;

	color: rgba(255, 255, 255, 0.76);

	font-family: "Montserrat", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
}


/* =========================================================
   ACTIONS
========================================================= */

.kooka-apps-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 16px;

	margin-top: 34px;
}


/* =========================================================
   BUTTONS
========================================================= */

.kooka-apps-hero__btn {
	min-height: 52px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 14px 24px;

	border-radius: 4px;

	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;

	text-decoration: none !important;

	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		border-color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}


/* PRIMARY */

.kooka-apps-hero__btn--primary {
	color: #080808 !important;

	background: #dcb936;

	border: 1px solid #dcb936;

	box-shadow:
		0 8px 24px rgba(220, 185, 54, 0.12);
}

.kooka-apps-hero__btn--primary:hover,
.kooka-apps-hero__btn--primary:focus {
	color: #dcb936 !important;

	background: transparent;

	transform: translateY(-2px);

	box-shadow:
		0 10px 28px rgba(220, 185, 54, 0.15);
}


/* SECONDARY */

.kooka-apps-hero__btn--secondary {
	color: #dcb936 !important;

	background: rgba(0, 0, 0, 0.22);

	border: 1px solid rgba(220, 185, 54, 0.78);
}

.kooka-apps-hero__btn--secondary:hover,
.kooka-apps-hero__btn--secondary:focus {
	color: #080808 !important;

	background: #dcb936;

	border-color: #dcb936;

	transform: translateY(-2px);
}


/* =========================================================
   DESKTOP MEDIUM
========================================================= */

@media (max-width: 1200px) {

	.kooka-apps-hero {
		min-height: 640px;

		background-position: 58% center;
	}

	.kooka-apps-hero__content {
		max-width: 540px;
	}

	.kooka-apps-hero__text {
		max-width: 510px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.kooka-apps-hero {
		min-height: 650px;

		background-position: 64% center;
	}

	.kooka-apps-hero__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(0,0,0,0.97) 0%,
				rgba(0,0,0,0.88) 43%,
				rgba(0,0,0,0.42) 75%,
				rgba(0,0,0,0.20) 100%
			);
	}

	.kooka-apps-hero__container {
		width: min(100% - 40px, 1360px);

		padding: 76px 0;
	}

	.kooka-apps-hero__content {
		max-width: 520px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.kooka-apps-hero {
		min-height: 710px;

		align-items: flex-end;

		background-size: auto 100%;
		background-position: 67% center;
	}

	.kooka-apps-hero__overlay {
		background:
			linear-gradient(
				180deg,
				rgba(0,0,0,0.18) 0%,
				rgba(0,0,0,0.46) 32%,
				rgba(0,0,0,0.88) 61%,
				rgba(0,0,0,0.98) 100%
			);
	}

	.kooka-apps-hero__container {
		width: calc(100% - 32px);

		padding:
			210px
			0
			52px;
	}

	.kooka-apps-hero__content {
		max-width: 100%;
	}

	.kooka-apps-hero__eyebrow {
		margin-bottom: 14px;

		font-size: 13px;

		letter-spacing: 3px;
	}

	.kooka-apps-hero__title {
		font-size: clamp(40px, 11vw, 54px);
		line-height: 1.05;

		letter-spacing: -1px;
	}

	.kooka-apps-hero__text {
		max-width: 100%;

		font-size: 16px;
		line-height: 1.65;
	}

	.kooka-apps-hero__actions {
		gap: 12px;

		margin-top: 28px;
	}

	.kooka-apps-hero__btn {
		min-height: 50px;

		padding: 14px 20px;

		font-size: 14px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.kooka-apps-hero {
		min-height: 690px;
	}

	.kooka-apps-hero__container {
		width: calc(100% - 28px);
	}

	.kooka-apps-hero__actions {
		align-items: stretch;
	}

	.kooka-apps-hero__btn {
		flex: 1 1 100%;
		width: 100%;
	}

}
/* =========================================================
   KOOKA APPS — OUR APPS
========================================================= */

.ka-apps {
	position: relative;

	padding: 84px 0 92px;

	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(201, 159, 28, 0.035),
			transparent 32%
		),
		#050505;

	border-bottom:
		1px solid rgba(220, 185, 54, 0.16);

	overflow: hidden;
}


.ka-apps__container {
	width: min(100% - 48px, 1360px);

	margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.ka-apps__header {
	max-width: 830px;

	margin:
		0 auto
		50px;

	text-align: center;
}


.ka-apps__eyebrow {
	margin:
		0 0 13px;

	color: #dcb936;

	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 3.5px;

	text-transform: uppercase;
}


.ka-apps__title {
	margin: 0;

	color: #f7f4ee;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(36px, 3.2vw, 50px);

	font-weight: 400;

	line-height: 1.16;

	letter-spacing: -0.8px;
}


.ka-apps__divider {
	position: relative;

	width: 70px;
	height: 11px;

	margin:
		19px auto 0;
}


.ka-apps__divider::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 100%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			#dcb936 28%,
			#dcb936 72%,
			transparent
		);
}


.ka-apps__divider span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 5px;
	height: 5px;

	background: #dcb936;

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	box-shadow:
		0 0 10px
		rgba(220, 185, 54, 0.5);
}


/* =========================================================
   GRID
========================================================= */

.ka-apps__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 20px;
}


/* =========================================================
   CARD
========================================================= */

.ka-app-card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;

	padding: 28px 24px 22px;

	background:
		linear-gradient(
			145deg,
			rgba(15, 15, 15, 0.98),
			rgba(6, 6, 6, 0.99)
		);

	border:
		1px solid rgba(220, 185, 54, 0.55);

	border-radius: 8px;

	box-shadow:
		inset 0 1px 0
		rgba(255, 255, 255, 0.02),
		0 20px 50px
		rgba(0, 0, 0, 0.20);

	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}


.ka-app-card:hover {
	transform:
		translateY(-4px);

	border-color:
		rgba(220, 185, 54, 0.85);

	box-shadow:
		0 24px 55px
		rgba(0, 0, 0, 0.34),
		0 0 30px
		rgba(220, 185, 54, 0.035);
}


/* =========================================================
   INTRO
========================================================= */

.ka-app-card__intro {
	display: grid;

	grid-template-columns:
		48px 1fr;

	gap: 17px;

	min-height: 145px;
}


.ka-app-card__icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	padding-top: 2px;
}


.ka-app-card__icon svg {
	width: 42px;
	height: 42px;

	fill: none;
	stroke: #dcb936;

	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.ka-app-card__title {
	margin:
		0 0 9px;

	color: #f5f1e9;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 24px;
	font-weight: 400;

	line-height: 1.2;
}


.ka-app-card__text {
	margin: 0;

	color:
		rgba(255, 255, 255, 0.68);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 15px;
	font-weight: 400;

	line-height: 1.65;
}


/* =========================================================
   UI PREVIEW COMMON
========================================================= */

.ka-preview {
	position: relative;

	height: 270px;

	margin-top: 13px;

	padding: 10px;

	background:
		linear-gradient(
			180deg,
			#111111,
			#080808
		);

	border:
		1px solid rgba(255,255,255,0.08);

	border-radius: 8px;

	overflow: hidden;

	box-shadow:
		inset 0 1px 0
		rgba(255,255,255,0.025);
}


.ka-ui-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;

	margin-bottom: 10px;

	color: rgba(255,255,255,0.88);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 500;
}


.ka-ui-heading small {
	color: #dcb936;

	font-size: 12px;
	font-weight: 400;
}


/* =========================================================
   TAKE AWAY MOCKUP
========================================================= */

.ka-preview--takeaway {
	display: grid;

	grid-template-columns:
		0.88fr 1.35fr;

	gap: 8px;
}


.ka-phone,
.ka-menu-ui {
	min-width: 0;

	padding: 11px;

	background: #0b0b0b;

	border:
		1px solid rgba(255,255,255,0.07);

	border-radius: 7px;
}


.ka-order {
	display: grid;

	grid-template-columns:
		30px 1fr auto;

	align-items: center;

	gap: 7px;

	padding:
		7px 0;

	border-bottom:
		1px solid rgba(255,255,255,0.05);
}


.ka-order:last-child {
	border-bottom: 0;
}


.ka-order__image,
.ka-menu-product__image {
	display: flex;
	align-items: center;
	justify-content: center;

	background:
		rgba(220, 185, 54, 0.06);

	border-radius: 5px;
}


.ka-order__image {
	width: 28px;
	height: 28px;
}


.ka-order__image span,
.ka-menu-product__image span {
	font-size: 17px;
}


.ka-order__content {
	min-width: 0;
}


.ka-order__content strong,
.ka-menu-product__content strong {
	display: block;

	overflow: hidden;

	color: rgba(255,255,255,0.83);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 11px;
	font-weight: 500;

	line-height: 1.3;

	text-overflow: ellipsis;
	white-space: nowrap;
}


.ka-order__content small,
.ka-menu-product__content small {
	display: block;

	margin-top: 2px;

	color: rgba(255,255,255,0.36);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
}


.ka-order__price {
	color: rgba(255,255,255,0.66);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
}


.ka-menu-tabs {
	display: flex;

	gap: 7px;

	margin:
		1px 0 11px;

	color:
		rgba(255,255,255,0.38);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
}


.ka-menu-tabs span {
	padding:
		4px 7px;

	border-radius: 3px;
}


.ka-menu-tabs .active {
	color: #060606;

	background: #dcb936;
}


.ka-menu-product {
	display: grid;

	grid-template-columns:
		42px 1fr auto;

	align-items: center;

	gap: 8px;

	padding:
		10px 0;

	border-bottom:
		1px solid rgba(255,255,255,0.055);
}


.ka-menu-product:last-child {
	border-bottom: 0;
}


.ka-menu-product__image {
	width: 40px;
	height: 40px;
}


.ka-menu-product button {
	padding:
		5px 8px;

	color: #050505;

	background: #dcb936;

	border: 0;
	border-radius: 3px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
	font-weight: 600;
}


/* =========================================================
   BOOKINGS MOCKUP
========================================================= */

.ka-bookings-ui,
.ka-custom-ui {
	height: 100%;

	padding: 11px;

	background: #0a0a0a;

	border:
		1px solid rgba(255,255,255,0.06);

	border-radius: 6px;
}


.ka-calendar {
	padding:
		9px 10px;

	background: #080808;

	border:
		1px solid rgba(255,255,255,0.055);

	border-radius: 5px;
}


.ka-calendar__days,
.ka-calendar__dates {
	display: grid;

	grid-template-columns:
		repeat(7, 1fr);

	text-align: center;

	font-family:
		"Montserrat",
		sans-serif;
}


.ka-calendar__days {
	margin-bottom: 6px;

	color:
		rgba(255,255,255,0.34);

	font-size: 9px;
}


.ka-calendar__dates {
	row-gap: 5px;

	color:
		rgba(255,255,255,0.68);

	font-size: 9px;
}


.ka-calendar__dates span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 20px;
	height: 20px;

	margin: auto;

	border-radius: 50%;
}


.ka-calendar__dates .active {
	color: #050505;

	background: #dcb936;

	font-weight: 700;
}


.ka-bookings-date {
	margin:
		10px 0 4px;

	color:
		rgba(255,255,255,0.78);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 11px;
	font-weight: 500;
}


.ka-booking-row {
	display: grid;

	grid-template-columns:
		42px 1fr auto;

	align-items: center;

	gap: 7px;

	padding:
		7px 0;

	border-top:
		1px solid rgba(255,255,255,0.05);

	font-family:
		"Montserrat",
		sans-serif;
}


.ka-booking-row__time {
	color: #dcb936;

	font-size: 10px;
}


.ka-booking-row__content strong {
	display: block;

	color:
		rgba(255,255,255,0.78);

	font-size: 10px;
	font-weight: 500;
}


.ka-booking-row__content small {
	display: block;

	margin-top: 2px;

	color:
		rgba(255,255,255,0.34);

	font-size: 9px;
}


.ka-status {
	padding:
		4px 6px;

	color: #65bb79;

	background:
		rgba(101,187,121,0.07);

	border-radius: 3px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 8px;
}


/* =========================================================
   CUSTOM MOCKUP
========================================================= */

.ka-stats {
	display: grid;

	grid-template-columns:
		repeat(3, 1fr);

	gap: 7px;

	margin:
		6px 0 12px;
}


.ka-stat {
	padding: 9px;

	background: #0e0e0e;

	border:
		1px solid rgba(255,255,255,0.055);

	border-radius: 4px;
}


.ka-stat small,
.ka-stat span {
	display: block;

	color:
		rgba(255,255,255,0.35);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 9px;
}


.ka-stat strong {
	display: block;

	margin:
		4px 0 2px;

	color: #ffffff;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 19px;
	font-weight: 500;
}


.ka-activity-title {
	margin-bottom: 5px;

	color:
		rgba(255,255,255,0.72);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 11px;
	font-weight: 500;
}


.ka-activity-row {
	display: grid;

	grid-template-columns:
		8px 1fr;

	gap: 8px;

	align-items: start;

	padding:
		8px 0;

	border-top:
		1px solid rgba(255,255,255,0.05);
}


.ka-activity-dot {
	width: 5px;
	height: 5px;

	margin-top: 5px;

	background: #dcb936;

	border-radius: 50%;
}


.ka-activity-row strong {
	display: block;

	color:
		rgba(255,255,255,0.7);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
	font-weight: 400;
}


.ka-activity-row small {
	display: block;

	margin-top: 2px;

	color:
		rgba(255,255,255,0.3);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 9px;
}


/* =========================================================
   CARD LINK
========================================================= */

.ka-app-card__link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	align-self: flex-start;

	margin-top: 19px;

	color: #dcb936 !important;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 500;

	line-height: 1.3;

	text-decoration: none !important;
}


.ka-app-card__link span {
	transition:
		transform 0.18s ease;
}


.ka-app-card__link:hover span {
	transform:
		translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

	.ka-apps__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.ka-app-card:last-child {
		grid-column:
			1 / -1;

		max-width: 660px;

		margin: 0 auto;
	}

}


@media (max-width: 767px) {

	.ka-apps {
		padding:
			66px 0 72px;
	}

	.ka-apps__container {
		width:
			calc(100% - 30px);
	}

	.ka-apps__header {
		margin-bottom:
			36px;
	}

	.ka-apps__eyebrow {
		font-size: 12px;
		letter-spacing: 3px;
	}

	.ka-apps__title {
		font-size:
			clamp(32px, 9vw, 42px);
	}

	.ka-apps__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ka-app-card,
	.ka-app-card:last-child {
		grid-column: auto;

		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			24px 20px 21px;
	}

	.ka-app-card__intro {
		min-height: auto;

		margin-bottom: 8px;
	}

	.ka-app-card__title {
		font-size: 22px;
	}

	.ka-app-card__text {
		font-size: 15px;
	}

	.ka-preview {
		height: 255px;
	}

}


@media (max-width: 460px) {

	.ka-app-card__intro {
		grid-template-columns:
			40px 1fr;

		gap: 13px;
	}

	.ka-app-card__icon svg {
		width: 36px;
		height: 36px;
	}

	.ka-preview--takeaway {
		grid-template-columns:
			0.85fr 1.2fr;
	}

	.ka-phone,
	.ka-menu-ui,
	.ka-bookings-ui,
	.ka-custom-ui {
		padding: 8px;
	}

	.ka-stats {
		gap: 5px;
	}

	.ka-stat {
		padding: 7px 5px;
	}

}
/* =========================================================
   KOOKA APPS — WHY CHOOSE US
========================================================= */

.ka-why {
	position: relative;

	padding: 34px 0 72px;

	background: #050505;

	overflow: hidden;
}


.ka-why__container {
	width: min(100% - 48px, 1360px);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ka-why__header {
	display: flex;
	align-items: center;
	justify-content: center;

	margin-bottom: 30px;
}


.ka-why__header::before,
.ka-why__header::after {
	content: "";

	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(220, 185, 54, 0.28)
		);
}


.ka-why__header::after {
	background:
		linear-gradient(
			90deg,
			rgba(220, 185, 54, 0.28),
			transparent
		);
}


.ka-why__eyebrow {
	flex: 0 0 auto;

	margin: 0;
	padding: 0 20px;

	color: #dcb936;

	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 2.8px;

	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
   GRID
========================================================= */

.ka-why__grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	align-items: stretch;
}


/* =========================================================
   ITEM
========================================================= */

.ka-why__item {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding: 12px 34px 6px;

	text-align: center;
}


/*
 * Vertical separators
 */

.ka-why__item:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 24px;
	right: 0;
	bottom: 12px;

	width: 1px;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(220, 185, 54, 0.30) 25%,
			rgba(220, 185, 54, 0.30) 75%,
			transparent
		);
}


/* =========================================================
   ICON
========================================================= */

.ka-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 62px;
	height: 62px;

	margin-bottom: 18px;

	color: #dcb936;

	border:
		1px solid rgba(220, 185, 54, 0.72);

	border-radius: 50%;

	background:
		radial-gradient(
			circle at center,
			rgba(220, 185, 54, 0.045),
			transparent 70%
		);

	box-shadow:
		0 0 22px
		rgba(220, 185, 54, 0.025);

	transition:
		transform 0.22s ease,
		border-color 0.22s ease,
		box-shadow 0.22s ease;
}


.ka-why__icon svg {
	width: 31px;
	height: 31px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.45;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.ka-why__item:hover .ka-why__icon {
	transform:
		translateY(-3px);

	border-color:
		#dcb936;

	box-shadow:
		0 0 26px
		rgba(220, 185, 54, 0.08);
}


/* =========================================================
   TITLE
========================================================= */

.ka-why__title {
	margin:
		0 0 11px;

	color: #f5f1e9;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 22px;
	font-weight: 400;

	line-height: 1.25;

	letter-spacing: -0.2px;
}


/* =========================================================
   TEXT
========================================================= */

.ka-why__text {
	max-width: 255px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.62);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 400;

	line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

	.ka-why__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		row-gap: 38px;
	}


	.ka-why__item {
		padding:
			12px 36px 8px;
	}


	.ka-why__item:nth-child(2)::after {
		display: none;
	}


	.ka-why__item:nth-child(1),
	.ka-why__item:nth-child(2) {
		padding-bottom: 30px;

		border-bottom:
			1px solid
			rgba(220, 185, 54, 0.12);
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.ka-why {
		padding:
			22px 0 62px;
	}


	.ka-why__container {
		width:
			calc(100% - 30px);
	}


	.ka-why__header {
		margin-bottom: 34px;
	}


	.ka-why__header::before,
	.ka-why__header::after {
		display: none;
	}


	.ka-why__eyebrow {
		padding: 0;

		font-size: 12px;

		letter-spacing: 2.3px;
	}


	.ka-why__grid {
		grid-template-columns: 1fr;

		gap: 0;
	}


	.ka-why__item {
		padding:
			30px 18px;

		border-bottom:
			1px solid
			rgba(220, 185, 54, 0.14);
	}


	.ka-why__item:first-child {
		padding-top: 8px;
	}


	.ka-why__item:last-child {
		padding-bottom: 0;

		border-bottom: 0;
	}


	.ka-why__item::after {
		display: none !important;
	}


	.ka-why__icon {
		width: 60px;
		height: 60px;

		margin-bottom: 17px;
	}


	.ka-why__title {
		font-size: 22px;
	}


	.ka-why__text {
		max-width: 330px;

		font-size: 14px;
	}

}
/* =========================================================
   KOOKA APPS — HOW IT WORKS
========================================================= */

.ka-process {
	position: relative;
	overflow: hidden;

	padding: 76px 0 92px;

	background:
		radial-gradient(
			circle at 18% 35%,
			rgba(220, 185, 54, 0.075),
			transparent 29%
		),
		radial-gradient(
			circle at 82% 68%,
			rgba(220, 185, 54, 0.055),
			transparent 30%
		),
		linear-gradient(
			180deg,
			#070707 0%,
			#030303 100%
		);

	border-top:
		1px solid rgba(220, 185, 54, 0.08);

	border-bottom:
		1px solid rgba(220, 185, 54, 0.12);
}


/* =========================================================
   REMOVE OLD BACKGROUND IMAGE / ANAGRAM
========================================================= */

.ka-process__bg-mark {
	display: none !important;
}


/* =========================================================
   MOVING BACKGROUND GLOWS
========================================================= */

.ka-process::before,
.ka-process::after {
	content: "";

	position: absolute;

	border-radius: 50%;

	filter: blur(90px);

	pointer-events: none;
}


.ka-process::before {
	top: 70px;
	left: -140px;

	width: 430px;
	height: 430px;

	background:
		rgba(220, 185, 54, 0.075);

	animation:
		kaProcessGlowLeft
		9s
		ease-in-out
		infinite
		alternate;
}


.ka-process::after {
	right: -120px;
	bottom: -70px;

	width: 390px;
	height: 390px;

	background:
		rgba(220, 185, 54, 0.055);

	animation:
		kaProcessGlowRight
		11s
		ease-in-out
		infinite
		alternate;
}


@keyframes kaProcessGlowLeft {

	from {
		transform:
			translate(0, 0)
			scale(1);

		opacity: 0.45;
	}

	to {
		transform:
			translate(80px, 35px)
			scale(1.18);

		opacity: 0.9;
	}

}


@keyframes kaProcessGlowRight {

	from {
		transform:
			translate(0, 0)
			scale(1);

		opacity: 0.4;
	}

	to {
		transform:
			translate(-65px, -35px)
			scale(1.14);

		opacity: 0.8;
	}

}


/* =========================================================
   CONTAINER
========================================================= */

.ka-process__container {
	position: relative;
	z-index: 2;

	width:
		min(100% - 48px, 1360px);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ka-process__header {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 28px;

	margin-bottom: 52px;
}


.ka-process__header::before,
.ka-process__header::after {
	content: "";

	flex: 1;

	height: 1px;
}


.ka-process__header::before {
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(220, 185, 54, 0.35)
		);
}


.ka-process__header::after {
	background:
		linear-gradient(
			90deg,
			rgba(220, 185, 54, 0.35),
			transparent
		);
}


.ka-process__eyebrow {
	flex: 0 0 auto;

	margin: 0;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 3px;

	text-transform: uppercase;
	text-align: center;
}


/* =========================================================
   STEPS GRID
========================================================= */

.ka-process__steps {
	position: relative;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 28px;

	align-items: stretch;
}


/* =========================================================
   ANIMATED CONNECTING LINE
========================================================= */

.ka-process__steps::before {
	content: "";

	position: absolute;

	z-index: 0;

	top: 59px;
	left: 16.5%;
	right: 16.5%;

	height: 1px;

	background:
		repeating-linear-gradient(
			90deg,
			rgba(220, 185, 54, 0.78) 0,
			rgba(220, 185, 54, 0.78) 7px,
			transparent 7px,
			transparent 16px
		);

	opacity: 0.72;

	animation:
		kaProcessLine
		4s
		linear
		infinite;
}


@keyframes kaProcessLine {

	from {
		background-position: 0 0;
	}

	to {
		background-position: 32px 0;
	}

}


/* =========================================================
   STEP
========================================================= */

.ka-process__step {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding:
		18px 26px 30px;

	text-align: center;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.014),
			rgba(255, 255, 255, 0.004)
		);

	border:
		1px solid transparent;

	border-radius: 14px;

	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		background 0.3s ease,
		box-shadow 0.3s ease;
}


.ka-process__step:hover {
	transform:
		translateY(-7px);

	border-color:
		rgba(220, 185, 54, 0.18);

	background:
		linear-gradient(
			180deg,
			rgba(220, 185, 54, 0.035),
			rgba(255, 255, 255, 0.005)
		);

	box-shadow:
		0 24px 50px
		rgba(0, 0, 0, 0.35),
		0 0 30px
		rgba(220, 185, 54, 0.025);
}


/* =========================================================
   TOP
========================================================= */

.ka-process__top {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	margin-bottom: 20px;
}


/* =========================================================
   NUMBER
========================================================= */

.ka-process__number {
	position: relative;
	z-index: 4;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin-bottom: 18px;

	color: #080808;

	background:
		linear-gradient(
			135deg,
			#e2c44d,
			#d5ae25
		);

	border-radius: 50%;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 15px;
	font-weight: 700;

	box-shadow:
		0 0 0 8px #050505,
		0 0 0 9px rgba(220, 185, 54, 0.18),
		0 0 28px rgba(220, 185, 54, 0.16);

	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease;
}


.ka-process__step:hover
.ka-process__number {
	transform:
		scale(1.08);

	box-shadow:
		0 0 0 8px #050505,
		0 0 0 9px rgba(220, 185, 54, 0.35),
		0 0 32px rgba(220, 185, 54, 0.28);
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.ka-process__icon {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100px;
	height: 100px;

	overflow: hidden;

	color: #dcb936;

	background:
		radial-gradient(
			circle at center,
			rgba(220, 185, 54, 0.06),
			transparent 68%
		);

	border:
		1px solid
		rgba(220, 185, 54, 0.64);

	border-radius: 50%;

	box-shadow:
		inset 0 0 22px
		rgba(220, 185, 54, 0.025);

	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}


/* rotating glow */

.ka-process__icon::before {
	content: "";

	position: absolute;

	width: 160%;
	height: 160%;

	background:
		conic-gradient(
			from 0deg,
			transparent 0deg,
			transparent 260deg,
			rgba(220, 185, 54, 0.20) 310deg,
			transparent 360deg
		);

	animation:
		kaProcessIconRotate
		7s
		linear
		infinite;
}


.ka-process__icon::after {
	content: "";

	position: absolute;

	inset: 3px;

	background:
		#070707;

	border-radius: 50%;
}


@keyframes kaProcessIconRotate {

	to {
		transform:
			rotate(360deg);
	}

}


.ka-process__step:hover
.ka-process__icon {
	transform:
		scale(1.05);

	border-color: #dcb936;

	box-shadow:
		0 0 28px
		rgba(220, 185, 54, 0.10),
		inset 0 0 26px
		rgba(220, 185, 54, 0.035);
}


/* =========================================================
   SVG ICON
========================================================= */

.ka-process__icon svg {
	position: relative;
	z-index: 3;

	width: 42px;
	height: 42px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.45;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.3s ease;
}


.ka-process__step:hover
.ka-process__icon svg {
	transform:
		scale(1.08);
}


/* =========================================================
   TITLE
========================================================= */

.ka-process__title {
	margin:
		0 0 13px;

	color: #f5f1e9;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 25px;
	font-weight: 400;
	line-height: 1.22;

	letter-spacing: -0.25px;
}


/* =========================================================
   TEXT
========================================================= */

.ka-process__text {
	max-width: 340px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.58);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

	.ka-process {
		padding:
			68px 0 80px;
	}


	.ka-process__steps {
		gap: 15px;
	}


	.ka-process__step {
		padding:
			18px 15px 28px;
	}


	.ka-process__title {
		font-size: 23px;
	}


	.ka-process__text {
		max-width: 290px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.ka-process {
		padding:
			60px 0 68px;
	}


	.ka-process__container {
		width:
			calc(100% - 30px);
	}


	.ka-process__header {
		margin-bottom: 36px;
	}


	.ka-process__header::before,
	.ka-process__header::after {
		display: none;
	}


	.ka-process__eyebrow {
		font-size: 12px;

		letter-spacing: 2.5px;
	}


	.ka-process__steps {
		grid-template-columns: 1fr;

		gap: 26px;
	}


	.ka-process__steps::before {
		display: none;
	}


	.ka-process__step {
		padding:
			26px 20px 30px;

		border-color:
			rgba(220, 185, 54, 0.10);
	}


	.ka-process__number {
		width: 46px;
		height: 46px;

		font-size: 14px;
	}


	.ka-process__icon {
		width: 92px;
		height: 92px;
	}


	.ka-process__icon svg {
		width: 39px;
		height: 39px;
	}


	.ka-process__title {
		font-size: 24px;
	}


	.ka-process__text {
		max-width: 340px;

		font-size: 14px;
		line-height: 1.7;
	}


	/*
	 * Less animation on mobile
	 */

	.ka-process::before,
	.ka-process::after {
		animation-duration: 14s;
	}

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.ka-process::before,
	.ka-process::after,
	.ka-process__steps::before,
	.ka-process__icon::before {
		animation: none !important;
	}

	.ka-process__step,
	.ka-process__number,
	.ka-process__icon,
	.ka-process__icon svg {
		transition: none !important;
	}

}
/* =========================================================
   KOOKA TAKE AWAY — HERO
========================================================= */

.kta-hero {
	position: relative;
	isolation: isolate;

	display: flex;
	align-items: center;

	width: 100%;
	min-height: 720px;

	overflow: hidden;

	background-image:
		url("https://kookadigital.com.au/wp-content/uploads/2026/08/kooka-take-away-online-ordering-system-hero.webp");

	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;

	border-bottom:
		1px solid rgba(220, 185, 54, 0.28);
}


/* =========================================================
   OVERLAY
========================================================= */

.kta-hero__shade {
	position: absolute;
	inset: 0;

	z-index: -1;

	background:
		linear-gradient(
			90deg,
			rgba(2, 5, 7, 0.99) 0%,
			rgba(2, 5, 7, 0.96) 21%,
			rgba(2, 5, 7, 0.79) 38%,
			rgba(2, 5, 7, 0.34) 56%,
			rgba(2, 5, 7, 0.06) 76%,
			rgba(2, 5, 7, 0.05) 100%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.16) 0%,
			transparent 55%,
			rgba(0, 0, 0, 0.30) 100%
		);

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.kta-hero__container {
	width: min(100% - 48px, 1360px);

	margin: 0 auto;

	padding:
		65px 0 54px;
}


/* =========================================================
   CONTENT
========================================================= */

.kta-hero__content {
	width: 100%;
	max-width: 595px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.kta-hero__breadcrumb {
	display: flex;
	align-items: center;

	gap: 10px;

	margin-bottom: 28px;

	color:
		rgba(255, 255, 255, 0.48);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 12px;
	font-weight: 500;

	line-height: 1.3;

	letter-spacing: 1px;

	text-transform: uppercase;
}


.kta-hero__breadcrumb a {
	color: #dcb936 !important;

	text-decoration: none !important;

	transition:
		color 0.2s ease;
}


.kta-hero__breadcrumb a:hover {
	color: #f3d769 !important;
}


.kta-hero__breadcrumb > span:last-child {
	color:
		rgba(255, 255, 255, 0.62);
}


/* =========================================================
   EYEBROW
========================================================= */

.kta-hero__eyebrow {
	margin:
		0 0 15px;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 3.4px;

	text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.kta-hero__title {
	margin: 0;

	color: #f7f4ee;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(52px, 4.3vw, 72px);

	font-weight: 400;

	line-height: 1.045;

	letter-spacing: -1.7px;
}


.kta-hero__title span {
	color: #dcb936;

	font-style: italic;
}


/* =========================================================
   GOLD DETAIL
========================================================= */

.kta-hero__line {
	position: relative;

	width: 78px;
	height: 11px;

	margin:
		25px 0 23px;
}


.kta-hero__line::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 78px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#dcb936,
			rgba(220, 185, 54, 0.18)
		);
}


.kta-hero__line span {
	position: absolute;

	top: 50%;
	right: 0;

	width: 6px;
	height: 6px;

	background: #dcb936;

	border-radius: 50%;

	transform:
		translateY(-50%);

	box-shadow:
		0 0 11px
		rgba(220, 185, 54, 0.48);
}


/* =========================================================
   TEXT
========================================================= */

.kta-hero__text {
	max-width: 555px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.72);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 17px;
	font-weight: 400;

	line-height: 1.75;
}


/* =========================================================
   ACTIONS
========================================================= */

.kta-hero__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 15px;

	margin-top: 31px;
}


/* =========================================================
   BUTTON COMMON
========================================================= */

.kta-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 14px;

	min-height: 52px;

	padding:
		14px 22px;

	border-radius: 4px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 600;

	line-height: 1;

	text-decoration: none !important;

	transition:
		color 0.22s ease,
		background-color 0.22s ease,
		border-color 0.22s ease,
		transform 0.22s ease,
		box-shadow 0.22s ease;
}


.kta-hero__btn span {
	font-size: 17px;

	transition:
		transform 0.22s ease;
}


/* =========================================================
   PRIMARY
========================================================= */

.kta-hero__btn--primary {
	color: #080808 !important;

	background:
		linear-gradient(
			135deg,
			#e2c24a,
			#d6ad28
		);

	border:
		1px solid #dcb936;

	box-shadow:
		0 10px 24px
		rgba(220, 185, 54, 0.13);
}


.kta-hero__btn--primary:hover {
	color: #dcb936 !important;

	background:
		rgba(0, 0, 0, 0.28);

	transform:
		translateY(-2px);

	box-shadow:
		0 12px 28px
		rgba(220, 185, 54, 0.10);
}


.kta-hero__btn--primary:hover span {
	transform:
		translateX(4px);
}


/* =========================================================
   SECONDARY
========================================================= */

.kta-hero__btn--secondary {
	color: #dcb936 !important;

	background:
		rgba(3, 5, 6, 0.48);

	border:
		1px solid
		rgba(220, 185, 54, 0.75);

	backdrop-filter:
		blur(7px);
}


.kta-hero__btn--secondary:hover {
	color: #080808 !important;

	background: #dcb936;

	border-color: #dcb936;

	transform:
		translateY(-2px);
}


.kta-hero__btn--secondary:hover span {
	transform:
		translateY(3px);
}


/* =========================================================
   MINI FEATURES
========================================================= */

.kta-hero__features {
	display: grid;

	grid-template-columns:
		repeat(5, auto);

	align-items: start;

	width: fit-content;

	margin-top: 43px;
}


/* =========================================================
   FEATURE
========================================================= */

.kta-hero__feature {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 92px;

	padding:
		0 18px;

	color:
		rgba(255, 255, 255, 0.78);

	text-align: center;
}


/* separators */

.kta-hero__feature:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 8px;
	right: 0;

	width: 1px;
	height: 56px;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(220, 185, 54, 0.35),
			transparent
		);
}


/* =========================================================
   FEATURE ICON
========================================================= */

.kta-hero__feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 35px;
	height: 35px;

	margin-bottom: 8px;

	color: #dcb936;
}


.kta-hero__feature-icon svg {
	display: block;

	width: 30px;
	height: 30px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.2s ease;
}


.kta-hero__feature:hover
.kta-hero__feature-icon svg {
	transform:
		translateY(-3px);
}


/* =========================================================
   FEATURE LABEL
========================================================= */

.kta-hero__feature > span {
	font-family:
		"Montserrat",
		sans-serif;

	font-size: 12px;
	font-weight: 500;

	line-height: 1.35;

	text-transform: uppercase;

	letter-spacing: 0.5px;
}


/* =========================================================
   LARGE / MEDIUM DESKTOP
========================================================= */

@media (max-width: 1250px) {

	.kta-hero {
		min-height: 680px;

		background-position:
			58% center;
	}


	.kta-hero__content {
		max-width: 535px;
	}


	.kta-hero__title {
		font-size:
			clamp(48px, 4.2vw, 62px);
	}


	.kta-hero__features {
		margin-top: 36px;
	}


	.kta-hero__feature {
		min-width: 82px;

		padding:
			0 13px;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

	.kta-hero {
		min-height: 700px;

		background-position:
			65% center;
	}


	.kta-hero__shade {
		background:
			linear-gradient(
				90deg,
				rgba(2, 5, 7, 0.98) 0%,
				rgba(2, 5, 7, 0.91) 40%,
				rgba(2, 5, 7, 0.58) 68%,
				rgba(2, 5, 7, 0.18) 100%
			);
	}


	.kta-hero__container {
		width:
			calc(100% - 40px);
	}


	.kta-hero__features {
		grid-template-columns:
			repeat(3, auto);

		row-gap: 20px;
	}


	.kta-hero__feature:nth-child(3)::after {
		display: none;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.kta-hero {
		min-height: 820px;

		align-items: flex-end;

		background-size:
			auto 100%;

		background-position:
			67% center;
	}


	.kta-hero__shade {
		background:
			linear-gradient(
				180deg,
				rgba(2, 5, 7, 0.12) 0%,
				rgba(2, 5, 7, 0.28) 25%,
				rgba(2, 5, 7, 0.80) 51%,
				rgba(2, 5, 7, 0.97) 70%,
				#020405 100%
			);
	}


	.kta-hero__container {
		width:
			calc(100% - 32px);

		padding:
			220px 0 45px;
	}


	.kta-hero__content {
		max-width: none;
	}


	.kta-hero__breadcrumb {
		margin-bottom: 18px;
	}


	.kta-hero__eyebrow {
		margin-bottom: 12px;

		font-size: 13px;

		letter-spacing: 2.7px;
	}


	.kta-hero__title {
		font-size:
			clamp(40px, 11.2vw, 52px);

		line-height: 1.05;

		letter-spacing: -1px;
	}


	.kta-hero__line {
		margin:
			21px 0 19px;
	}


	.kta-hero__text {
		max-width: 100%;

		font-size: 16px;

		line-height: 1.65;
	}


	.kta-hero__actions {
		gap: 11px;

		margin-top: 26px;
	}


	.kta-hero__btn {
		min-height: 50px;

		padding:
			14px 18px;
	}


	.kta-hero__features {
		grid-template-columns:
			repeat(5, 1fr);

		width: 100%;

		margin-top: 34px;
	}


	.kta-hero__feature {
		min-width: 0;

		padding:
			0 7px;
	}


	.kta-hero__feature > span {
		font-size: 12px;

		letter-spacing: 0;
	}


	.kta-hero__feature-icon svg {
		width: 27px;
		height: 27px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

	.kta-hero {
		min-height: 850px;
	}


	.kta-hero__actions {
		align-items: stretch;
	}


	.kta-hero__btn {
		flex: 1 1 100%;

		width: 100%;
	}


	.kta-hero__features {
		grid-template-columns:
			repeat(3, 1fr);

		gap:
			18px 0;
	}


	.kta-hero__feature {
		padding:
			0 8px;
	}


	.kta-hero__feature:nth-child(3)::after {
		display: none;
	}


	.kta-hero__feature:nth-child(4)::after {
		display: block;
	}


	.kta-hero__feature:nth-child(4) {
		grid-column: 1 / 2;
	}


	.kta-hero__feature:nth-child(5) {
		grid-column: 2 / 3;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kta-hero__btn,
	.kta-hero__btn span,
	.kta-hero__feature-icon svg {
		transition: none;
	}

}
/* =========================================================
   KOOKA TAKE AWAY — CORE FEATURES
========================================================= */

.kta-core {
	position: relative;
	overflow: hidden;

	padding: 76px 0 82px;

	background:
		radial-gradient(
			circle at 50% -20%,
			rgba(220, 185, 54, 0.06),
			transparent 38%
		),
		linear-gradient(
			180deg,
			#050708 0%,
			#020405 100%
		);

	border-bottom:
		1px solid rgba(220, 185, 54, 0.18);
}


/* subtle ambient light */

.kta-core::before {
	content: "";

	position: absolute;

	top: -180px;
	left: 50%;

	width: 700px;
	height: 340px;

	transform: translateX(-50%);

	background:
		radial-gradient(
			ellipse at center,
			rgba(220, 185, 54, 0.06),
			transparent 68%
		);

	pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.kta-core__container {
	position: relative;
	z-index: 2;

	width: min(100% - 48px, 1360px);

	margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.kta-core__header {
	max-width: 820px;

	margin: 0 auto 52px;

	text-align: center;
}


.kta-core__eyebrow {
	margin: 0 0 12px;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.kta-core__title {
	margin: 0;

	color: #f5f1e9;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(38px, 3.1vw, 50px);

	font-weight: 400;

	line-height: 1.15;

	letter-spacing: -0.7px;
}


/* =========================================================
   DIVIDER
========================================================= */

.kta-core__divider {
	position: relative;

	width: 72px;
	height: 10px;

	margin: 20px auto 0;
}


.kta-core__divider::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 100%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			#dcb936 25%,
			#dcb936 75%,
			transparent
		);
}


.kta-core__divider span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 5px;
	height: 5px;

	background: #dcb936;

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	box-shadow:
		0 0 10px
		rgba(220, 185, 54, 0.45);
}


/* =========================================================
   GRID
========================================================= */

.kta-core__grid {
	display: grid;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	align-items: stretch;
}


/* =========================================================
   ITEM
========================================================= */

.kta-core__item {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	padding:
		8px 28px 12px;

	text-align: center;

	transition:
		transform 0.25s ease;
}


.kta-core__item:hover {
	transform:
		translateY(-5px);
}


/* vertical separator */

.kta-core__item:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 18px;
	right: 0;
	bottom: 12px;

	width: 1px;

	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(220, 185, 54, 0.32) 22%,
			rgba(220, 185, 54, 0.32) 78%,
			transparent
		);
}


/* =========================================================
   ICON
========================================================= */

.kta-core__icon {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	margin-bottom: 18px;

	color: #dcb936;

	border-radius: 50%;

	transition:
		background 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}


.kta-core__icon::before {
	content: "";

	position: absolute;

	inset: 8px;

	border:
		1px solid
		rgba(220, 185, 54, 0.14);

	border-radius: 50%;

	opacity: 0;

	transform:
		scale(0.8);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


.kta-core__item:hover
.kta-core__icon {
	transform:
		translateY(-2px);

	background:
		rgba(220, 185, 54, 0.025);

	box-shadow:
		0 0 25px
		rgba(220, 185, 54, 0.07);
}


.kta-core__item:hover
.kta-core__icon::before {
	opacity: 1;

	transform:
		scale(1);
}


.kta-core__icon svg {
	position: relative;
	z-index: 2;

	width: 42px;
	height: 42px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.25s ease;
}


.kta-core__item:hover
.kta-core__icon svg {
	transform:
		scale(1.07);
}


/* =========================================================
   TITLES
========================================================= */

.kta-core__item-title {
	margin:
		0 0 10px;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 16px;
	font-weight: 600;

	line-height: 1.3;
}


/* =========================================================
   TEXT
========================================================= */

.kta-core__text {
	max-width: 220px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.64);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 400;

	line-height: 1.65;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.kta-core__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		row-gap: 42px;
	}


	.kta-core__item:nth-child(3)::after {
		display: none;
	}


	.kta-core__item:nth-child(4),
	.kta-core__item:nth-child(5) {
		padding-top: 18px;
	}


	.kta-core__item:nth-child(4) {
		grid-column: 1 / 2;
	}


	.kta-core__item:nth-child(5) {
		grid-column: 2 / 3;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.kta-core {
		padding:
			62px 0 68px;
	}


	.kta-core__container {
		width:
			calc(100% - 30px);
	}


	.kta-core__header {
		margin-bottom:
			36px;
	}


	.kta-core__eyebrow {
		font-size: 12px;

		letter-spacing: 2.5px;
	}


	.kta-core__title {
		font-size:
			clamp(32px, 8.8vw, 42px);
	}


	.kta-core__grid {
		grid-template-columns: 1fr;

		row-gap: 0;
	}


	.kta-core__item,
	.kta-core__item:nth-child(4),
	.kta-core__item:nth-child(5) {
		grid-column: auto;

		padding:
			28px 16px;
	}


	.kta-core__item:first-child {
		padding-top: 6px;
	}


	.kta-core__item:last-child {
		padding-bottom: 0;
	}


	.kta-core__item:not(:last-child)::after {
		top: auto;
		left: 20%;
		right: 20%;
		bottom: 0;

		width: auto;
		height: 1px;

		background:
			linear-gradient(
				90deg,
				transparent,
				rgba(220, 185, 54, 0.22),
				transparent
			);
	}


	.kta-core__icon {
		width: 66px;
		height: 66px;

		margin-bottom: 15px;
	}


	.kta-core__icon svg {
		width: 39px;
		height: 39px;
	}


	.kta-core__item-title {
		font-size: 16px;
	}


	.kta-core__text {
		max-width: 330px;

		font-size: 14px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kta-core__item,
	.kta-core__icon,
	.kta-core__icon::before,
	.kta-core__icon svg {
		transition: none;
	}

}
/* =========================================================
   KOOKA TAKE AWAY — REAL CASE
========================================================= */

.kta-case {
	position: relative;
	overflow: hidden;

	padding: 96px 0 105px;

	background:
		radial-gradient(
			circle at 78% 42%,
			rgba(220, 185, 54, 0.07),
			transparent 31%
		),
		linear-gradient(
			135deg,
			#080808 0%,
			#030405 52%,
			#050505 100%
		);

	border-bottom:
		1px solid rgba(220, 185, 54, 0.20);
}


/* =========================================================
   AMBIENT DECORATION
========================================================= */

.kta-case::before {
	content: "";

	position: absolute;

	left: -240px;
	bottom: -280px;

	width: 570px;
	height: 570px;

	border:
		1px solid rgba(220, 185, 54, 0.08);

	border-radius: 50%;

	box-shadow:
		0 0 0 55px rgba(220, 185, 54, 0.018),
		0 0 0 110px rgba(220, 185, 54, 0.012);

	pointer-events: none;
}


.kta-case__ambient {
	position: absolute;

	top: 25%;
	right: 5%;

	width: 400px;
	height: 400px;

	background:
		radial-gradient(
			circle,
			rgba(220, 185, 54, 0.07),
			transparent 67%
		);

	filter: blur(30px);

	pointer-events: none;

	animation:
		ktaCaseAmbient
		8s
		ease-in-out
		infinite
		alternate;
}


@keyframes ktaCaseAmbient {

	from {
		transform:
			translate(0, 0)
			scale(1);

		opacity: 0.55;
	}

	to {
		transform:
			translate(-30px, 20px)
			scale(1.12);

		opacity: 0.9;
	}

}


/* =========================================================
   CONTAINER
========================================================= */

.kta-case__container {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 0.88fr)
		minmax(0, 1.35fr);

	align-items: center;

	gap: 72px;

	width:
		min(100% - 48px, 1360px);

	margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.kta-case__eyebrow-row {
	display: flex;
	align-items: center;

	gap: 15px;

	margin-bottom: 16px;
}


.kta-case__eyebrow {
	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.kta-case__live {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	padding:
		5px 9px;

	color:
		rgba(255, 255, 255, 0.75);

	background:
		rgba(255, 255, 255, 0.04);

	border:
		1px solid rgba(255, 255, 255, 0.08);

	border-radius: 999px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 11px;
	font-weight: 600;

	letter-spacing: 1px;
}


.kta-case__live > span {
	width: 6px;
	height: 6px;

	background: #4bc06a;

	border-radius: 50%;

	box-shadow:
		0 0 9px
		rgba(75, 192, 106, 0.65);

	animation:
		ktaLivePulse
		1.8s
		ease-in-out
		infinite;
}


@keyframes ktaLivePulse {

	50% {
		opacity: 0.35;
	}

}


/* =========================================================
   TITLE
========================================================= */

.kta-case__title {
	margin: 0;

	color: #f6f2eb;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(45px, 4vw, 64px);

	font-weight: 400;

	line-height: 1.02;

	letter-spacing: -1px;
}


.kta-case__title span {
	display: block;

	color: #dcb936;

	font-style: italic;
}


/* =========================================================
   LINE
========================================================= */

.kta-case__line {
	position: relative;

	width: 78px;
	height: 10px;

	margin:
		24px 0 23px;
}


.kta-case__line::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 78px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#dcb936,
			rgba(220, 185, 54, 0.14)
		);
}


.kta-case__line span {
	position: absolute;

	top: 50%;
	right: 0;

	width: 6px;
	height: 6px;

	background: #dcb936;

	border-radius: 50%;

	transform:
		translateY(-50%);
}


/* =========================================================
   COPY
========================================================= */

.kta-case__lead {
	max-width: 520px;

	margin:
		0 0 13px;

	color: #f0ede6;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 18px;
	font-weight: 500;

	line-height: 1.65;
}


.kta-case__text {
	max-width: 550px;

	margin: 0;

	color:
		rgba(255, 255, 255, 0.60);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 15px;
	font-weight: 400;

	line-height: 1.78;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.kta-case__features {
	display: grid;

	gap: 12px;

	margin-top: 28px;
}


.kta-case__feature {
	display: grid;

	grid-template-columns:
		28px 1fr;

	align-items: start;

	gap: 11px;
}


.kta-case__check {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 23px;
	height: 23px;

	margin-top: 2px;

	color: #dcb936;

	border:
		1px solid rgba(220, 185, 54, 0.65);

	border-radius: 50%;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 12px;
}


.kta-case__feature strong {
	display: block;

	margin-bottom: 2px;

	color:
		rgba(255, 255, 255, 0.90);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 600;
}


.kta-case__feature span {
	display: block;

	color:
		rgba(255, 255, 255, 0.48);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;

	line-height: 1.55;
}


/* =========================================================
   ACTIONS
========================================================= */

.kta-case__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 31px;
}


.kta-case__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 11px;

	min-height: 49px;

	padding:
		13px 18px;

	border-radius: 4px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none !important;

	transition:
		transform 0.22s ease,
		color 0.22s ease,
		background 0.22s ease;
}


.kta-case__btn span {
	font-size: 17px;

	transition:
		transform 0.22s ease;
}


.kta-case__btn:hover {
	transform:
		translateY(-2px);
}


.kta-case__btn:hover span {
	transform:
		translateX(3px);
}


.kta-case__btn--primary {
	color: #090909 !important;

	background: #dcb936;

	border:
		1px solid #dcb936;
}


.kta-case__btn--primary:hover {
	color: #dcb936 !important;

	background: transparent;
}


.kta-case__btn--secondary {
	color: #dcb936 !important;

	background: transparent;

	border:
		1px solid
		rgba(220, 185, 54, 0.55);
}


.kta-case__btn--secondary:hover {
	color: #090909 !important;

	background: #dcb936;
}


/* =========================================================
   VISUAL
========================================================= */

.kta-case__visual {
	position: relative;

	min-width: 0;

	padding:
		28px 8px 46px 34px;
}


/* =========================================================
   BROWSER
========================================================= */

.kta-case__browser {
	position: relative;

	overflow: hidden;

	background: #090909;

	border:
		1px solid
		rgba(220, 185, 54, 0.28);

	border-radius: 11px;

	box-shadow:
		0 35px 70px
		rgba(0, 0, 0, 0.50),
		0 0 40px
		rgba(220, 185, 54, 0.025);

	transform:
		perspective(1300px)
		rotateY(-2deg)
		rotateX(1deg);

	transition:
		transform 0.4s ease,
		border-color 0.4s ease;
}


.kta-case__visual:hover
.kta-case__browser {
	transform:
		perspective(1300px)
		rotateY(0)
		rotateX(0)
		translateY(-4px);

	border-color:
		rgba(220, 185, 54, 0.50);
}


/* Browser chrome */

.kta-case__browser-bar {
	display: grid;

	grid-template-columns:
		auto 1fr;

	align-items: center;

	gap: 17px;

	height: 45px;

	padding:
		0 14px;

	background:
		linear-gradient(
			180deg,
			#151515,
			#0e0e0e
		);

	border-bottom:
		1px solid
		rgba(255, 255, 255, 0.06);
}


.kta-case__browser-dots {
	display: flex;

	gap: 6px;
}


.kta-case__browser-dots span {
	width: 7px;
	height: 7px;

	background:
		rgba(255, 255, 255, 0.18);

	border-radius: 50%;
}


.kta-case__browser-url {
	justify-self: center;

	display: flex;
	align-items: center;

	gap: 7px;

	min-width: 255px;

	padding:
		6px 16px;

	color:
		rgba(255, 255, 255, 0.48);

	background:
		#080808;

	border:
		1px solid
		rgba(255, 255, 255, 0.05);

	border-radius: 5px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 11px;

	text-align: center;
}


.kta-case__lock {
	color: #59b978;

	font-size: 6px;
}


/* =========================================================
   SCREENSHOT
========================================================= */

.kta-case__browser-screen {
	position: relative;

	aspect-ratio:
		16 / 9;

	overflow: hidden;

	background:
		#111;
}


.kta-case__browser-screen img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: top center;

	transition:
		transform 6s
		cubic-bezier(.16,.84,.44,1);
}


/*
 * Subtle "website scroll" effect on hover
 */

@media (hover: hover) and (pointer: fine) {

	.kta-case__visual:hover
	.kta-case__browser-screen img {
		transform:
			scale(1.015)
			translateY(-2%);
	}

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.kta-case__float {
	position: absolute;
	z-index: 6;

	display: flex;
	align-items: center;

	gap: 11px;

	padding:
		12px 15px;

	background:
		rgba(8, 9, 9, 0.94);

	border:
		1px solid
		rgba(220, 185, 54, 0.38);

	border-radius: 8px;

	box-shadow:
		0 16px 35px
		rgba(0, 0, 0, 0.38);

	backdrop-filter:
		blur(12px);
}


.kta-case__float small {
	display: block;

	margin-bottom: 3px;

	color:
		rgba(255, 255, 255, 0.42);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
}


.kta-case__float strong {
	display: block;

	color: #ffffff;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	white-space: nowrap;
}


/* order card */

.kta-case__float--order {
	top: 4px;
	left: 0;

	animation:
		ktaFloatOne
		5s
		ease-in-out
		infinite;
}


.kta-case__float-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	color: #dcb936;
}


.kta-case__float-icon svg {
	width: 31px;
	height: 31px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* Kitchen card */

.kta-case__float--kitchen {
	right: -12px;
	top: 42%;

	display: block;

	min-width: 160px;

	animation:
		ktaFloatTwo
		6s
		ease-in-out
		infinite;
}


.kta-case__float-status {
	display: flex;
	align-items: center;

	gap: 6px;

	margin-bottom: 6px;

	color: #60bf74;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 1px;
}


.kta-case__float-status span {
	width: 6px;
	height: 6px;

	background: #60bf74;

	border-radius: 50%;

	box-shadow:
		0 0 9px
		rgba(96, 191, 116, 0.60);
}


@keyframes ktaFloatOne {

	50% {
		transform:
			translateY(-7px);
	}

}


@keyframes ktaFloatTwo {

	50% {
		transform:
			translateY(8px);
	}

}


/* =========================================================
   SYSTEM BAR
========================================================= */

.kta-case__system {
	position: absolute;

	z-index: 7;

	left: 9%;
	right: 5%;
	bottom: 0;

	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	background:
		rgba(7, 8, 8, 0.97);

	border:
		1px solid
		rgba(220, 185, 54, 0.45);

	border-radius: 8px;

	box-shadow:
		0 20px 45px
		rgba(0, 0, 0, 0.46);

	backdrop-filter:
		blur(10px);
}


.kta-case__system > div {
	position: relative;

	padding:
		14px 12px;

	text-align: center;
}


.kta-case__system
> div:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 18%;
	right: 0;
	bottom: 18%;

	width: 1px;

	background:
		rgba(220, 185, 54, 0.22);
}


.kta-case__system small {
	display: block;

	margin-bottom: 4px;

	color:
		rgba(255, 255, 255, 0.38);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 10px;
}


.kta-case__system strong {
	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 12px;
	font-weight: 600;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

	.kta-case__container {
		grid-template-columns: 1fr;

		gap: 60px;
	}


	.kta-case__content {
		max-width: 680px;
	}


	.kta-case__visual {
		max-width: 900px;

		width: 100%;

		margin: 0 auto;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.kta-case {
		padding:
			70px 0 76px;
	}


	.kta-case__container {
		width:
			calc(100% - 30px);

		gap: 45px;
	}


	.kta-case__title {
		font-size:
			clamp(40px, 11vw, 54px);
	}


	.kta-case__lead {
		font-size: 17px;
	}


	.kta-case__text {
		font-size: 14px;
	}


	.kta-case__actions {
		align-items: stretch;
	}


	.kta-case__btn {
		flex:
			1 1 100%;

		width: 100%;
	}


	.kta-case__visual {
		padding:
			30px 0 70px;
	}


	.kta-case__browser {
		transform: none;
	}


	.kta-case__browser-url {
		min-width: 0;

		width: 100%;

		font-size: 10px;
	}


	.kta-case__float--order {
		left: 8px;
		top: 4px;
	}


	.kta-case__float--kitchen {
		right: 5px;

		top: auto;
		bottom: 47px;
	}


	.kta-case__system {
		left: 0;
		right: 0;
		bottom: 0;

		grid-template-columns:
			repeat(2, 1fr);
	}


	.kta-case__system
	> div:nth-child(2)::after {
		display: none;
	}


	.kta-case__system
	> div:nth-child(-n+2) {
		border-bottom:
			1px solid
			rgba(220, 185, 54, 0.15);
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.kta-case__browser-bar {
		grid-template-columns:
			auto 1fr;

		gap: 8px;
	}


	.kta-case__float {
		transform:
			scale(0.9);
	}


	.kta-case__float--order {
		transform-origin:
			left top;
	}


	.kta-case__float--kitchen {
		transform-origin:
			right bottom;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kta-case__ambient,
	.kta-case__live > span,
	.kta-case__float--order,
	.kta-case__float--kitchen {
		animation: none;
	}


	.kta-case__browser,
	.kta-case__browser-screen img,
	.kta-case__btn,
	.kta-case__btn span {
		transition: none;
	}

}
/* =========================================================
   KOOKA TAKE AWAY — FINAL CTA
========================================================= */

.kta-final {
	position: relative;
	overflow: hidden;

	padding: 105px 0 110px;

	background:
		radial-gradient(
			circle at 50% 45%,
			rgba(220, 185, 54, 0.075),
			transparent 34%
		),
		linear-gradient(
			180deg,
			#050606 0%,
			#020303 100%
		);

	border-top:
		1px solid rgba(220, 185, 54, 0.14);
}


/* =========================================================
   AMBIENT GLOWS
========================================================= */

.kta-final__glow {
	position: absolute;

	border-radius: 50%;

	filter: blur(100px);

	pointer-events: none;
}


.kta-final__glow--one {
	top: -160px;
	left: 12%;

	width: 400px;
	height: 400px;

	background:
		rgba(220, 185, 54, 0.055);

	animation:
		ktaFinalGlowOne
		10s ease-in-out infinite alternate;
}


.kta-final__glow--two {
	right: 8%;
	bottom: -180px;

	width: 460px;
	height: 460px;

	background:
		rgba(220, 185, 54, 0.045);

	animation:
		ktaFinalGlowTwo
		12s ease-in-out infinite alternate;
}


@keyframes ktaFinalGlowOne {

	from {
		transform:
			translate(0, 0)
			scale(1);
	}

	to {
		transform:
			translate(70px, 35px)
			scale(1.18);
	}

}


@keyframes ktaFinalGlowTwo {

	from {
		transform:
			translate(0, 0)
			scale(1);
	}

	to {
		transform:
			translate(-60px, -30px)
			scale(1.12);
	}

}


/* =========================================================
   CONTAINER
========================================================= */

.kta-final__container {
	position: relative;
	z-index: 2;

	width:
		min(100% - 48px, 980px);

	margin: 0 auto;

	text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.kta-final__eyebrow {
	margin-bottom: 17px;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 3.2px;

	text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.kta-final__title {
	margin: 0;

	color: #f6f2eb;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size:
		clamp(50px, 5.6vw, 78px);

	font-weight: 400;

	line-height: 1;

	letter-spacing: -1.7px;
}


.kta-final__title span {
	color: #dcb936;

	font-style: italic;
}


/* =========================================================
   DIVIDER
========================================================= */

.kta-final__divider {
	position: relative;

	width: 88px;
	height: 11px;

	margin:
		29px auto 25px;
}


.kta-final__divider::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 0;

	width: 100%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			#dcb936 25%,
			#dcb936 75%,
			transparent
		);
}


.kta-final__divider span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 6px;
	height: 6px;

	background: #dcb936;

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	box-shadow:
		0 0 14px
		rgba(220, 185, 54, 0.55);
}


/* =========================================================
   INTRO
========================================================= */

.kta-final__intro {
	max-width: 720px;

	margin:
		0 auto;

	color:
		rgba(255, 255, 255, 0.63);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 17px;
	font-weight: 400;

	line-height: 1.75;
}


/* =========================================================
   PRICE
========================================================= */

.kta-final__price {
	position: relative;

	width:
		min(100%, 470px);

	margin:
		42px auto 0;

	padding:
		28px 30px 24px;

	background:
		linear-gradient(
			180deg,
			rgba(220, 185, 54, 0.045),
			rgba(255, 255, 255, 0.008)
		);

	border:
		1px solid rgba(220, 185, 54, 0.42);

	border-radius: 10px;

	box-shadow:
		0 25px 60px
		rgba(0, 0, 0, 0.32),
		inset 0 1px 0
		rgba(255,255,255,0.025);

	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}


.kta-final__price:hover {
	transform:
		translateY(-5px);

	border-color:
		rgba(220, 185, 54, 0.75);

	box-shadow:
		0 30px 65px
		rgba(0, 0, 0, 0.4),
		0 0 32px
		rgba(220, 185, 54, 0.045);
}


/* =========================================================
   PRICE LABEL
========================================================= */

.kta-final__price-label {
	margin-bottom: 11px;

	color:
		rgba(255, 255, 255, 0.55);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 12px;
	font-weight: 600;

	letter-spacing: 2px;
}


/* =========================================================
   PRICE ROW
========================================================= */

.kta-final__price-row {
	display: flex;
	align-items: baseline;
	justify-content: center;

	gap: 5px;
}


.kta-final__from {
	margin-right: 5px;

	color:
		rgba(255, 255, 255, 0.48);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
}


.kta-final__currency {
	align-self: flex-start;

	margin-top: 11px;

	color: #dcb936;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 23px;
	font-weight: 500;
}


.kta-final__price-row strong {
	color: #f6f2eb;

	font-family:
		"Playfair Display",
		Georgia,
		serif;

	font-size: 70px;
	font-weight: 400;

	line-height: 1;
}


.kta-final__period {
	color:
		rgba(255, 255, 255, 0.54);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 15px;
}


/* =========================================================
   PRICE DESCRIPTION
========================================================= */

.kta-final__price p {
	margin:
		11px 0 0;

	color:
		rgba(255, 255, 255, 0.50);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;

	line-height: 1.5;
}


/* =========================================================
   BENEFITS
========================================================= */

.kta-final__benefits {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap:
		13px 28px;

	margin-top: 31px;
}


.kta-final__benefit {
	display: flex;
	align-items: center;

	gap: 8px;

	color:
		rgba(255, 255, 255, 0.72);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
}


.kta-final__benefit > span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 21px;
	height: 21px;

	color: #dcb936;

	border:
		1px solid
		rgba(220, 185, 54, 0.55);

	border-radius: 50%;

	font-size: 11px;
}


/* =========================================================
   ACTIONS
========================================================= */

.kta-final__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	gap: 14px;

	margin-top: 35px;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.kta-final__primary,
.kta-final__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 53px;

	padding:
		14px 24px;

	border-radius: 4px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 14px;
	font-weight: 600;

	text-decoration: none !important;

	transition:
		transform 0.22s ease,
		color 0.22s ease,
		background 0.22s ease,
		border-color 0.22s ease,
		box-shadow 0.22s ease;
}


.kta-final__primary {
	gap: 18px;

	color: #080808 !important;

	background:
		linear-gradient(
			135deg,
			#e1c34c,
			#d5ac26
		);

	border:
		1px solid #dcb936;

	box-shadow:
		0 12px 30px
		rgba(220, 185, 54, 0.13);
}


.kta-final__primary span {
	font-size: 18px;

	transition:
		transform 0.22s ease;
}


.kta-final__primary:hover {
	color: #dcb936 !important;

	background: transparent;

	transform:
		translateY(-3px);
}


.kta-final__primary:hover span {
	transform:
		translateX(5px);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.kta-final__secondary {
	color: #dcb936 !important;

	background:
		rgba(0, 0, 0, 0.20);

	border:
		1px solid
		rgba(220, 185, 54, 0.50);
}


.kta-final__secondary:hover {
	color: #080808 !important;

	background: #dcb936;

	border-color: #dcb936;

	transform:
		translateY(-3px);
}


/* =========================================================
   NOTE
========================================================= */

.kta-final__note {
	max-width: 570px;

	margin:
		23px auto 0;

	color:
		rgba(255, 255, 255, 0.38);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 13px;

	line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.kta-final {
		padding:
			76px 0 80px;
	}


	.kta-final__container {
		width:
			calc(100% - 30px);
	}


	.kta-final__title {
		font-size:
			clamp(43px, 12vw, 59px);
	}


	.kta-final__intro {
		font-size: 16px;

		line-height: 1.68;
	}


	.kta-final__price {
		margin-top: 34px;

		padding:
			26px 20px 23px;
	}


	.kta-final__price-row strong {
		font-size: 62px;
	}


	.kta-final__benefits {
		flex-direction: column;
		align-items: flex-start;

		width:
			fit-content;

		margin:
			28px auto 0;
	}


	.kta-final__actions {
		align-items: stretch;
	}


	.kta-final__primary,
	.kta-final__secondary {
		flex:
			1 1 100%;

		width: 100%;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kta-final__glow,
	.kta-final__price {
		animation: none;
	}


	.kta-final__price,
	.kta-final__primary,
	.kta-final__secondary,
	.kta-final__primary span {
		transition: none;
	}

}
.kd-local {
    position: relative;
    background: #0a0a0a;
    border-top: 1px solid rgba(214, 164, 28, 0.22);
    border-bottom: 1px solid rgba(214, 164, 28, 0.22);
    padding: 95px 40px;
}

.kd-local__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 100px;
    align-items: start;
}

.kd-local__heading {
    max-width: 600px;
}

.kd-local__eyebrow {
    display: block;
    margin-bottom: 20px;
    color: #d6a41c;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kd-local__heading h2 {
    margin: 0;
    color: #f4f1e8;
    font-family: inherit;
    font-size: clamp(42px, 4vw, 66px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.kd-local__heading h2 span {
    display: block;
    color: #d6a41c;
}

.kd-local__content {
    max-width: 680px;
    padding-top: 32px;
}

.kd-local__content p {
    margin: 0 0 22px;
    color: rgba(244, 241, 232, 0.62);
    font-size: 17px;
    line-height: 1.75;
}

.kd-local__content .kd-local__lead {
    color: rgba(244, 241, 232, 0.9);
    font-size: 20px;
    line-height: 1.65;
}

.kd-local__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.kd-local__areas span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid rgba(214, 164, 28, 0.35);
    color: #d6a41c;
    font-size: 13px;
    letter-spacing: 0.03em;
    border-radius: 999px;
}


/* Tablet */

@media (max-width: 1024px) {

    .kd-local {
        padding: 80px 32px;
    }

    .kd-local__inner {
        gap: 60px;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .kd-local {
        padding: 65px 22px;
    }

    .kd-local__inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .kd-local__content {
        padding-top: 0;
    }

    .kd-local__heading h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .kd-local__content .kd-local__lead {
        font-size: 18px;
    }

    .kd-local__content p {
        font-size: 16px;
    }

}