/* Kameleon Kenya — WhatsApp button, Kenya section and FAQ styles (matches style.css) */

/* ---------- Floating WhatsApp button ---------- */
.kmw-btn{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;border:0;border-radius:999px;padding:13px 20px 13px 15px;
  font:800 12px/1 Inter,Arial,sans-serif;letter-spacing:.5px;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.kmw-btn:hover{background:#1ebe5b;transform:translateY(-2px)}
.kmw-btn svg{width:24px;height:24px;flex:none}
.kmw-panel{position:fixed;right:22px;bottom:86px;z-index:61;width:min(350px,calc(100vw - 32px));
  background:#090909;color:#f5f5f5;border:1px solid #242424;padding:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);font-family:Inter,Arial,sans-serif;display:none}
.kmw-panel.open{display:block}
.kmw-panel h3{margin:0 0 6px;font-size:16px;font-weight:900;letter-spacing:-.3px}
.kmw-panel p{margin:0 0 14px;color:#888;font-size:12px;line-height:1.5}
.kmw-panel label{display:block;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#ed1528;margin:12px 0 6px;text-transform:uppercase}
.kmw-panel input,.kmw-panel select{width:100%;background:#050505;color:#f5f5f5;border:1px solid #333;
  padding:11px 12px;font:15px Inter,Arial,sans-serif;border-radius:0}
.kmw-panel input:focus,.kmw-panel select:focus{outline:none;border-color:#ed1528}
.kmw-send{margin-top:18px;width:100%;background:#25D366;color:#fff;border:0;padding:14px;
  font:800 12px Inter,Arial,sans-serif;letter-spacing:.5px;cursor:pointer}
.kmw-send:hover{background:#1ebe5b}
.kmw-skip{display:block;width:100%;margin-top:10px;background:none;border:0;color:#aaa;
  font:12px Inter,Arial,sans-serif;text-decoration:underline;cursor:pointer}
.kmw-close{position:absolute;top:8px;right:12px;background:none;border:0;color:#888;font-size:24px;line-height:1;cursor:pointer}
@media (max-width:600px){.kmw-btn span{display:none}.kmw-btn{padding:14px;right:16px;bottom:16px}.kmw-panel{right:16px;bottom:80px}}

/* ---------- Homepage: "Across Kenya" section ---------- */
.kenya-areas .kenya-intro{max-width:760px;color:#bbb;font-size:15px;line-height:1.75;margin:0 0 10px}
.kenya-areas .service-list p{font-size:13px;color:#999}
.kenya-areas .service-list h3{font-size:15px}
.kenya-areas .kenya-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){.kenya-areas .service-list{grid-template-columns:1fr}}

/* ---------- FAQ blocks ---------- */
.kfaq details{border-top:1px solid #242424;padding:18px 0}
.kfaq details:last-child{border-bottom:1px solid #242424}
.kfaq summary{cursor:pointer;font-weight:800;font-size:15px;line-height:1.35;list-style:none;display:flex;justify-content:space-between;gap:20px}
.kfaq summary::-webkit-details-marker{display:none}
.kfaq summary::after{content:"+";color:#ed1528;font-size:20px;line-height:1}
.kfaq details[open] summary::after{content:"–"}
.kfaq details p{color:#999;font-size:14px;line-height:1.7;margin:12px 0 0}
.kfaq details a,.kenya-link{color:#ed1528;text-decoration:underline}

/* ---------- Phone fix: footer logo was 330px wide and pushed the page sideways ---------- */
@media (max-width:700px){
  footer{grid-template-columns:1fr 1fr!important}
  footer .brand{grid-column:1/-1}
  footer .brand img{width:min(330px,100%)!important}
  footer>div{min-width:0}
}

/* ---------- YouTube channel link ---------- */
.yt-link{display:inline-flex!important;align-items:center;gap:8px}
.yt-link .yt-ico{width:22px;height:16px;flex:none}
.yt-link:hover span{color:#fff}
.yt-btn{align-items:center;gap:10px}
.yt-btn .yt-ico{width:24px;height:17px;flex:none}

/* ---------- Homepage offer tiles: whole tile is clickable (see kameleon-whatsapp.js) ---------- */
.offer-card-video{cursor:pointer;transition:border-color .25s,transform .25s}
.offer-card-video:hover{border-color:#ed1528!important;transform:translateY(-3px)}
.offer-card-video:hover .offer-video-copy a{color:#ed1528}

/* ---------- Wedding page: hero video ---------- */
.kw-hero-video{display:block!important;min-height:0!important;align-self:center}
.kw-hero-video:before{display:none!important}
.kw-hero-frame{position:relative;aspect-ratio:16/9;width:100%;background:#000;border:1px solid #242424;overflow:hidden}
.kw-hero-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kw-caption{margin:14px 0 0;color:#aaa;font-size:13px;line-height:1.6}
.kw-caption b{color:#ed1528;font-size:11px;letter-spacing:.12em}

/* ---------- Wedding page: video gallery ---------- */
.kw-gallery{display:block!important}
.kw-gallery-head{max-width:760px;margin-bottom:34px}
.kw-gallery-head p:not(.eyebrow){color:#999;line-height:1.7}
.kw-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kw-video{border:1px solid #242424;background:#090909}
.kw-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;
  background:#000 center/cover no-repeat}
.kw-yt:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.kw-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;z-index:2;
  background:#ed1528;border-radius:12px;transition:transform .2s}
.kw-play:before{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.kw-yt:hover .kw-play{transform:scale(1.1)}
.kw-yt iframe,.kw-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kw-video-copy{padding:20px 22px 24px}
.kw-video-copy .eyebrow{margin-bottom:10px}
.kw-video-copy h3{margin:0 0 8px;font-size:20px;letter-spacing:-.3px}
.kw-video-copy p:not(.eyebrow){margin:0;color:#999;font-size:13px;line-height:1.65}
@media (max-width:1100px){.kw-videos{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.kw-videos{grid-template-columns:1fr}}

/* ---------- Wedding page: vertical Nairobi CBD proposal video ---------- */
.wedding-proposal-media.kw-vertical{aspect-ratio:9/16!important;max-height:640px;width:auto;max-width:360px;justify-self:center;margin:0 auto}
.kw-videos.kw-single{grid-template-columns:1fr!important;max-width:980px}
.kw-gallery + .kw-gallery{padding-top:0!important}

/* ---------- Homepage VP tile: YouTube video as background (covers the tile, not clickable itself) ---------- */
.offer-yt{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#000}
.offer-yt iframe{position:absolute;top:50%;left:50%;height:100%;width:auto;aspect-ratio:16/9;min-width:100%;transform:translate(-50%,-50%) scale(1.15);border:0}

/* ---------- Homepage "Our projects": two large landscape videos ---------- */
#projects .project-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px}
#projects .project{height:auto!important;aspect-ratio:16/9;min-width:0;width:100%}
#projects .project small{font-size:11px;letter-spacing:.12em}
#projects .project b{font-size:20px}
#projects .project div{left:26px;bottom:24px}
@media (max-width:800px){#projects .project-grid{grid-template-columns:minmax(0,1fr)!important}#projects .project b{font-size:16px}}

/* ---------- Menu font size = same as kameleon-light.pl (16px) ---------- */
header nav a,.nav a,nav a{font-size:16px!important;line-height:1.2!important}
@media (min-width:901px) and (max-width:1180px){.nav nav{gap:14px!important}.nav nav a{font-size:14px!important}}

/* ---------- Big headings: silver gradient like the "kameleon" logotype (same as kameleon-light.pl) ---------- */
h1,h2{color:#c4c4c4;background-image:linear-gradient(180deg,#e6e6e6 0%,#c2c2c2 48%,#929292 100%);background-size:100% 1lh;background-repeat:repeat-y;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none!important}
h1 em,h2 em{-webkit-text-fill-color:currentColor}

/* ---------- Rounded corners like kameleon-light.pl ---------- */
/* buttons: pill shape */
.btn,.k26-btn,.kmw-send,form button[type=submit]{border-radius:999px!important}
/* big cards & feature boxes: 20-24px */
.offer-card,.project,.kw-video,.kw-hero-frame,.kw-yt,.wedding-proposal-media,.wedding-box,
.service-list article,.process-grid article,.conference-box,.mapping-process-card,.mapping-video,.mapping-case-photo,
.laser-inside-video,.laser-inside-video-frame,.interactive-video-card,.k26-card,.k26-video,.tech-screen,.studio-ring,.control-room,
.service-visual.mapping-hero-video,.service-visual.kenya-vp-video,.service-visual.interactive-hero-video,
.screen-specs,.hero-visual img{border-radius:20px!important;overflow:hidden}
.kw-video .kw-yt{border-radius:0!important}
.service-cta,.kmw-panel{border-radius:24px!important}
.laser-follow-points>div,.interactive-game-points>div,.interactive-flashlight-points>div,.stats>div,.client-logo-box{border-radius:16px}
/* form fields */
input,textarea,select{border-radius:12px!important}
.kmw-btn{border-radius:999px}

/* Nov 2026 fix: hero and footer grids must never be wider than the screen
   (on phones and tablets the hero headline and text were cut off on the right) */
.service-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.service-hero>*{min-width:0}
.service-visual img,.service-visual video,.service-visual iframe{max-width:100%}
.service-copy h1{overflow-wrap:break-word}
@media(max-width:900px){.service-hero,.service-content{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.service-copy h1{font-size:clamp(32px,10.5vw,48px)}}
footer{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr)}
footer a,footer span{overflow-wrap:anywhere}
@media(max-width:900px){footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* video caption under the hero film: small grey label, not the big red decorative text */
.vp-page .service-visual .video-caption span{font-size:inherit;font-weight:600;color:inherit;letter-spacing:inherit}
.laser-follow-inner>*,.interactive-game-inner>*,.interactive-wall-inner>*,.interactive-flashlight-inner>*,.interactive-video-grid>*{min-width:0}
.laser-follow-copy h2,.interactive-game-copy h2,.interactive-wall-copy h2,.interactive-flashlight-copy h2{overflow-wrap:break-word}

/* Nov 2026: the header logo has the same size on every page (as on the home page) */
header.nav .brand img{width:auto!important;height:auto!important;max-height:70px!important;object-fit:contain}
/* Nov 2026: Kenya 2026 hero — the top label (date) must not hide under the fixed header */
.k26-hero{padding-top:185px!important}
@media(max-width:1200px){.k26-hero{padding-top:160px!important}}
@media(max-width:900px){.k26-hero{padding-top:135px!important}}