/*
Theme Name: Kateřina Holaňová – Portfolio
Theme URI: https://katerinaholan.cz/
Author: Portfolio design conversion
Description: Schválený vizuální návrh portfolia převedený na klasickou WordPress šablonu. Nepřepíná domény ani nezasahuje do WooCommerce.
Version: 0.2.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: katerina-holanova
*/


:root{--g:#003F37;--sand:#F7F7F4;--gray:#D9D9D9;--white:#fff;--ink:#173c37}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--g);font-family:'Century Gothic','Avenir Next',Avenir,'Trebuchet MS',sans-serif;line-height:1.62}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Montserrat,'Century Gothic',Arial,sans-serif;line-height:1.06;letter-spacing:-.035em}h1,h2{text-transform:uppercase}h1{font-size:clamp(3.3rem,7.4vw,7.8rem);margin-bottom:24px}h2{font-size:clamp(2.5rem,5vw,5rem)}h3{font-size:1.4rem}.container{width:min(1260px,calc(100% - 68px));margin:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.line{width:60px;height:1px;background:var(--g);display:block;margin:24px 0}.nav{height:98px;display:flex;align-items:center;justify-content:space-between;gap:20px}.nav img{width:146px;height:70px;object-fit:contain;object-position:left}.nav-links{display:flex;align-items:center;gap:33px}.nav a{font-size:12px;letter-spacing:.12em;font-weight:700;text-decoration:none;color:var(--g)}.nav a:hover,.nav a:focus-visible{text-decoration:underline}.nav .nav-cta{border:1px solid var(--g);padding:13px 18px;border-radius:100px}.menu-btn{display:none;background:transparent;border:0;color:var(--g);font-size:27px;cursor:pointer}.hero{display:grid;grid-template-columns:1.06fr .94fr;gap:6vw;min-height:720px;align-items:center;padding:32px 0 100px}.hero h1{font-size:clamp(3.5rem,6vw,6.4rem)}.hero h1 span{display:block}.hero .intro{font-size:clamp(1.22rem,1.8vw,1.65rem);max-width:560px;font-weight:700;line-height:1.4}.hero .desc{max-width:520px;font-size:15px}.hero-visual{position:relative;padding:20px 20px 35px 40px}.hero-visual:before{position:absolute;content:'';background:#e0e7e3;top:0;right:0;width:84%;height:92%;border-radius:28px}.hero-visual img{display:block;width:100%;height:590px;object-fit:cover;object-position:right center;border-radius:28px;position:relative;box-shadow:none}.hero-visual .mark{position:absolute;bottom:2px;right:-9px;background:var(--g);color:#fff;padding:14px 23px;border-radius:40px;font-size:11px;letter-spacing:.11em}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;padding:15px 23px;border-radius:100px;border:1px solid var(--g);background:var(--g);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.2s}.btn.outline{background:transparent;color:var(--g)}.btn:hover{transform:translateY(-2px)}section{padding:95px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.section-head p{max-width:365px;font-size:14px}.section-head h2{margin:12px 0 0}.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service{background:var(--sand);padding:18px;border-radius:24px}.service .thumb{border-radius:17px;height:265px;overflow:hidden;position:relative}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.service .thumb.grad{background:linear-gradient(155deg,#e8edeb 10%,#b5cbc3 52%,var(--g) 100%);display:flex;align-items:center;justify-content:center}.service .thumb.grad img{width:65%;height:auto;object-fit:contain;border-radius:12px}.service .body{padding:27px 12px 18px}.service h3{min-height:54px;text-transform:uppercase;font-size:1.32rem}.service p{font-size:14px;color:#48615c;min-height:72px}.arrow{font-size:12px;text-decoration:none;letter-spacing:.11em;font-weight:700;color:var(--g)}.projects{background:var(--sand)}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.filter{font:700 11px 'Century Gothic',sans-serif;padding:11px 17px;border-radius:30px;border:1px solid var(--g);background:transparent;color:var(--g);cursor:pointer}.filter[aria-pressed=true]{color:white;background:var(--g)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}.project{background:#fff;border-radius:25px;overflow:hidden}.project figure{margin:0;height:360px;position:relative;background:#e5ebe8;overflow:hidden}.project img{width:100%;height:100%;object-fit:cover;display:block}.project img.contain{object-fit:contain;background:#dee5e1}.project figcaption{position:absolute;bottom:14px;left:16px;background:#fff;color:var(--g);padding:7px 14px;border-radius:50px;font-size:10px;letter-spacing:.16em;font-weight:700}.project .meta{padding:25px 28px 29px}.project .meta h3{margin:0 0 8px;text-transform:uppercase}.project .meta p{color:#62766f;font-size:13px;margin:0}.about{background:var(--g);color:#fff}.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-image{border-radius:28px;overflow:hidden;max-height:540px}.about-image img{width:100%;height:100%;object-fit:cover;display:block}.about .line{background:#fff}.about p{max-width:540px;color:#f1f6f3}.about .eyebrow{color:#c8dbd4}.about .btn{background:#fff;color:var(--g);border-color:#fff}.references{background:#fff}.references .section-head p{max-width:560px}.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.logo-card{background:var(--sand);border:1.5px solid #c9d9d3;border-radius:24px;min-height:118px;padding:20px 18px;display:flex;align-items:center;justify-content:center;text-align:center;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}.logo-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,63,55,.08);border-color:#86afa3}.logo-wordmark{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1}.logo-wordmark .mark{font-family:Montserrat,'Century Gothic',Arial,sans-serif;font-weight:700;color:var(--g);font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:-.02em;text-transform:uppercase}.logo-wordmark .sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6a837b}.logo-wordmark.simple .mark{font-size:clamp(1.22rem,2.8vw,1.95rem)}.references-note{margin-top:24px;padding:18px 22px;border-radius:20px;background:#f7f7f4;color:#47645c;font-size:14px;border:1px solid #dce7e2}.contact{background:var(--sand);text-align:center;padding:130px 0}.contact h2{font-size:clamp(3rem,7vw,7.2rem);margin:12px auto 28px;max-width:950px}.contact p{max-width:480px;margin:0 auto}.contact .btns{justify-content:center}.footer{background:var(--g);color:#fff;padding:28px 0}.footer .container{display:flex;justify-content:space-between;gap:20px;font-size:11px;flex-wrap:wrap}.footer a{color:#fff}.note{font-size:11px;color:#788b83}.project[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid #83bdb0;outline-offset:4px}@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:0;gap:35px}.hero-visual{max-width:650px}.hero-visual img{height:510px}.service-grid{grid-template-columns:1fr 1fr}.about-wrap{gap:40px}}@media(max-width:650px){.container{width:min(100% - 34px,1260px)}.nav{height:82px}.menu-btn{display:block}.nav-links{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:25px;z-index:10;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.hero{padding:22px 0 70px}.hero h1{font-size:clamp(2.8rem,14vw,4.4rem)}.hero-visual{padding:12px 9px 30px 12px}.hero-visual img{height:425px}.service-grid,.project-grid,.about-wrap{grid-template-columns:1fr}.section-head{display:block}.service .thumb{height:230px}.service h3,.service p{min-height:0}.project figure{height:280px}section{padding:65px 0}.logo-grid{grid-template-columns:1fr}.contact{padding:85px 0}.about-wrap{gap:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ===== 2026 redesign / dominant primary green + 9:16 Reel previews ===== */
body{background:var(--g);color:var(--sand)}
.nav img{width:151px;height:73px;object-fit:contain}
.nav a{color:var(--sand)}
.nav .nav-cta{border-color:rgba(247,247,244,.68)}
.menu-btn{color:var(--sand)}
.line{background:rgba(247,247,244,.75)}
.hero{padding-top:52px;padding-bottom:112px}
.hero h1{color:var(--white);letter-spacing:-.04em}
.hero .eyebrow{color:var(--gray)}
.hero .intro{color:var(--white)}
.hero .desc{color:var(--gray)}
.hero-visual:before{background:rgba(247,247,244,.14);border:1px solid rgba(247,247,244,.25)}
.hero-visual .mark{background:var(--sand);color:var(--g)}
.btn{background:var(--sand);color:var(--g);border-color:var(--sand)}
.btn.outline{color:var(--sand);border-color:rgba(247,247,244,.65);background:transparent}
section.services,section.projects,section.testimonials{background:var(--g);color:var(--sand)}
.services{border-top:1px solid rgba(247,247,244,.23)}
.services .section-head p,.projects .section-head p,.testimonials .section-head p{color:#d7e1dc}
.service{background:var(--sand);color:var(--g);padding:14px;border-radius:25px}
.service .thumb{border-radius:18px;height:255px}
.service .thumb.grad{background:linear-gradient(160deg,#F7F7F4 5%,#D9D9D9 48%,#003F37 100%)}
.service .body{padding:26px 15px 19px}
.service p{color:#405d57}
.service .arrow{color:var(--g)}
.projects{border-top:1px solid rgba(247,247,244,.23)}
.filters{gap:10px;margin-bottom:32px}
.filter{border-color:rgba(247,247,244,.65);color:var(--sand);background:transparent}
.filter[aria-pressed=true]{color:var(--g);background:var(--sand);border-color:var(--sand)}
.filter:hover{background:rgba(247,247,244,.12)}
.filter[aria-pressed=true]:hover{background:var(--sand)}
/* Authentic short-video geometry: every thumbnail is a portrait 9:16 frame. */
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;align-items:stretch}
.project{background:var(--sand);border-radius:24px;color:var(--g);overflow:hidden;display:flex;flex-direction:column}
.project figure{height:auto;aspect-ratio:9/16;background:#D9D9D9;overflow:hidden;margin:0;position:relative}
.project img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 38%}
.project img.contain{object-fit:cover;object-position:center}
.project figcaption{bottom:14px;left:12px;background:var(--sand);color:var(--g);font-size:9px;letter-spacing:.11em;padding:7px 11px}
.project .meta{padding:21px 18px 24px;flex:1}
.project .meta h3{font-size:1.11rem;line-height:1.22;letter-spacing:-.02em}
.project .meta p{color:#50645f;line-height:1.45}
.projects .note{color:#c6d5cf}
.about{background:var(--sand);color:var(--g)}
.about .line{background:var(--g)}
.about p{color:#31514a}
.about .eyebrow{color:var(--g)}
.about .btn{background:var(--g);color:var(--sand);border-color:var(--g)}
.about-image{border-radius:30px}
.testimonials{border-top:1px solid rgba(247,247,244,.23)}
.quote{border-color:rgba(247,247,244,.4)}
.quote small{color:#c5d7d0}
.contact{background:var(--g);padding:108px 0 120px}
.contact>.container{max-width:1210px;background:var(--sand);color:var(--g);border-radius:32px;padding:100px 36px}
.contact .btn{background:var(--g);border-color:var(--g);color:var(--sand)}
.contact .btn.outline{background:transparent;color:var(--g)}
.footer{border-top:1px solid rgba(247,247,244,.25);background:var(--g)}
@media(max-width:1080px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.project .meta h3{font-size:1.25rem}}
@media(max-width:650px){
 .nav-links{background:var(--g);border-top:1px solid rgba(247,247,244,.25)}
 .nav{height:83px}
 .hero{padding-top:28px;padding-bottom:85px}
 .hero-visual:before{width:88%}
 .service-grid{grid-template-columns:1fr}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
 .project figure{aspect-ratio:9/16;height:auto}
 .project{border-radius:19px}
 .project .meta{padding:16px 13px 18px}
 .project .meta h3{font-size:.94rem;line-height:1.25}
 .project .meta p{font-size:11px}
 .project figcaption{bottom:10px;left:8px;max-width:calc(100% - 16px);font-size:8px;white-space:nowrap;padding:6px 9px}
 .contact{padding:72px 0 85px}
 .contact>.container{width:min(100% - 30px,1210px);padding:75px 22px;border-radius:26px}
}
@media(max-width:360px){.project-grid{grid-template-columns:1fr}.project .meta h3{font-size:1.18rem}}


/* ===== v3 / folder motif for service tiles ===== */
.services .section-head{margin-bottom:54px}
.services .section-head h2{max-width:8ch}
.service-grid{gap:28px;align-items:stretch}
.service.folder-card{position:relative;background:transparent!important;padding:22px 16px 16px;border-radius:0;overflow:visible;isolation:isolate;display:flex;flex-direction:column}
.service.folder-card::before{content:"";position:absolute;left:0;right:22px;top:0;height:88px;background:linear-gradient(180deg,rgba(171,213,200,.42),rgba(112,150,138,.55));border-radius:34px 34px 0 0;clip-path:polygon(0 44%,31% 44%,42% 0,100% 0,100% 100%,0 100%);z-index:0}
.service.folder-card::after{content:"";position:absolute;left:0;right:0;top:22px;bottom:0;background:linear-gradient(180deg,#6DB3A2 0%,#5EA493 100%);border-radius:34px;clip-path:polygon(0 16%,34% 16%,45% 0,100% 0,100% 100%,0 100%);box-shadow:0 18px 42px rgba(0,0,0,.18);z-index:0}
.service.folder-card>*{position:relative;z-index:2}
.service.folder-card .folder-tab{position:absolute;top:36px;left:28px;display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,63,55,.78);z-index:3}
.service.folder-card .folder-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(0,63,55,.1);font-family:Montserrat,'Century Gothic',Arial,sans-serif;font-size:10px;letter-spacing:0;color:var(--g)}
.service.folder-card .folder-label{white-space:nowrap}
.service.folder-card .thumb{margin-top:76px;border-radius:22px;height:210px;box-shadow:0 16px 28px rgba(0,0,0,.09)}
.service.folder-card .thumb.grad{background:linear-gradient(160deg,#F7F7F4 5%,#d6e8e2 32%,#74B9A9 64%,#003F37 100%)}
.service.folder-card .thumb img{object-position:center}
.service.folder-card .body{padding:25px 18px 22px}
.service.folder-card h3{min-height:62px;margin:0 0 10px;font-size:1.24rem;letter-spacing:-.02em}
.service.folder-card p{min-height:92px;margin-bottom:0;color:#234942}
.service.folder-card .arrow{display:inline-flex;align-items:center;margin-top:8px}
@media(max-width:900px){
  .service-grid{gap:24px}
  .service.folder-card .thumb{height:198px}
}
@media(max-width:650px){
  .services .section-head{margin-bottom:36px}
  .service.folder-card{padding:20px 12px 14px}
  .service.folder-card::before{right:18px;height:78px;border-radius:28px 28px 0 0}
  .service.folder-card::after{top:20px;border-radius:28px}
  .service.folder-card .folder-tab{top:31px;left:23px;font-size:9px;gap:8px;letter-spacing:.14em}
  .service.folder-card .folder-no{width:24px;height:24px;font-size:9px}
  .service.folder-card .thumb{margin-top:68px;height:208px;border-radius:19px}
  .service.folder-card .body{padding:22px 14px 18px}
  .service.folder-card h3{min-height:auto;font-size:1.14rem}
  .service.folder-card p{min-height:auto;font-size:13px}
}


/* ===== v4 / service cards as proportional folder + white info bubble ===== */
.service-grid{gap:34px;align-items:start}
.service.folder-card{background:transparent!important;padding:0;border-radius:0;overflow:visible;box-shadow:none}
.service.folder-card::before,.service.folder-card::after{display:none!important}
.service.folder-card .folder-visual{position:relative;max-width:320px;margin:0 auto 18px;padding-top:26px}
.service.folder-card .folder-top{position:absolute;left:24px;top:0;width:96px;height:38px;border-radius:18px 18px 0 0;background:linear-gradient(180deg,rgba(171,213,200,.62),rgba(109,179,162,.72));z-index:1}
.service.folder-card .thumb{position:relative;margin:0;aspect-ratio:1.22/1;height:auto;min-height:auto;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#7DBDAC 0%, #5EA493 100%);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.service.folder-card .thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,63,55,.10));pointer-events:none}
.service.folder-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 36%;display:block;mix-blend-mode:normal}
.service.folder-card .thumb.grad img{width:68%;height:auto;object-fit:contain;border-radius:0;position:relative;z-index:1}
.service.folder-card .thumb.grad{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#7DBDAC 0%, #5EA493 100%)}
.service.folder-card .service-title{margin:0 0 14px;text-align:center;color:var(--sand);font-size:1.72rem;line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;min-height:auto}
.service.folder-card .service-bubble{background:var(--sand);color:var(--g);border:2px solid rgba(0,63,55,.85);border-radius:30px;padding:26px 24px 24px;box-shadow:none;max-width:100%}
.service.folder-card .service-micro{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#55756e;margin-bottom:16px}
.service.folder-card .service-bubble p{margin:0;color:#204741;font-size:14px;line-height:1.55;min-height:0}
.service.folder-card .service-bubble .arrow{margin-top:18px;display:inline-flex;align-items:center;font-size:11px}
.service.folder-card .body{padding:0}
@media(max-width:1080px){
  .service.folder-card .service-title{font-size:1.5rem}
}
@media(max-width:650px){
  .service-grid{gap:28px}
  .service.folder-card .folder-visual{max-width:250px;margin-bottom:14px;padding-top:22px}
  .service.folder-card .folder-top{left:18px;width:74px;height:30px;border-radius:14px 14px 0 0}
  .service.folder-card .thumb{border-radius:20px}
  .service.folder-card .service-title{font-size:1.34rem;margin-bottom:12px}
  .service.folder-card .service-bubble{padding:22px 18px 20px;border-radius:24px}
  .service.folder-card .service-bubble p{font-size:13px}
}

/* ===== Only two changes from approved v4: a visible folder back + photo lift ===== */
.service.folder-card .folder-visual {
  position: relative;
  isolation: isolate;
  width: min(100%, 320px);
  max-width: 320px;
  height: 305px;
  margin: 0 auto 18px;
  padding: 0;
}
/* Back cover – visible as a dark upper rim and behind the image pocket. */
.service.folder-card .folder-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 13px 1px 17px 0;
  border-radius: 27px;
  background: linear-gradient(180deg, #5e8a7b 0%, #4d7768 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .15);
}
/* Slanted folder tab attached to the back cover. */
.service.folder-card .folder-top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 136px;
  height: 55px;
  background: linear-gradient(180deg, #5e8a7b 0%, #4d7768 100%);
  border-radius: 26px 0 0 0;
  clip-path: polygon(0 0, 67% 0, 100% 40%, 100% 100%, 0 100%);
  box-shadow: none;
}
/* Keep the approved v4 photo-tile size, now as the folder's FRONT. */
.service.folder-card .thumb,
.service.folder-card .thumb.grad {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 0;
  top: 39px;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  display: block;
  overflow: visible;
  border-radius: 25px;
  background: linear-gradient(180deg, #52a58f 0%, #518574 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
/* The photo sits IN the folder with a restrained green edge. */
.service.folder-card .thumb > img,
.service.folder-card .thumb.grad > img {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 10px;
  right: auto;
  bottom: auto;
  width: calc(100% - 20px);
  height: calc(100% - 24px);
  object-fit: cover;
  object-position: center 36%;
  border-radius: 19px;
  display: block;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.2,.78,.25,1), box-shadow .55s ease;
  box-shadow: 0 5px 14px rgba(0,0,0,.07);
}
.service.folder-card .thumb.grad > img {
  object-fit: contain;
  border-radius: 17px;
}
/* Pocket lip of the folder: visible entire front edge, over the photo. */
.service.folder-card .thumb::before { display:none !important; }
.service.folder-card .thumb::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(82,165,143,.96), #518977);
  border-radius: 0 0 25px 25px;
  pointer-events: none;
  box-shadow: 0 -1px 0 rgba(255,255,255,.18);
}
/* Hover/focus: only the photo lifts; the folder remains perfectly stationary. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .service.folder-card:hover .thumb > img,
  .service.folder-card:focus-within .thumb > img {
    transform: translateY(-28px);
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
  }
}
@media (hover:none) and (prefers-reduced-motion:no-preference) {
  .service.folder-card .thumb > img { animation:folder-peek 7s ease-in-out infinite; }
  .service.folder-card:nth-child(2) .thumb > img { animation-delay:1.5s; }
  .service.folder-card:nth-child(3) .thumb > img { animation-delay:3s; }
  @keyframes folder-peek { 0%, 15%, 55%, 100% { transform:translateY(0); } 30%, 43% { transform:translateY(-17px); } }
}
@media(prefers-reduced-motion:reduce){
  .service.folder-card .thumb > img{animation:none !important;transition:none !important;}
}
@media(max-width:650px){
  .service.folder-card .folder-visual{width:min(100%,250px);max-width:250px;height:240px;margin-bottom:15px;}
  .service.folder-card .folder-visual::before{inset:11px 1px 12px 0;border-radius:23px;}
  .service.folder-card .folder-top{width:108px;height:45px;border-radius:22px 0 0 0;}
  .service.folder-card .thumb,
  .service.folder-card .thumb.grad{top:32px;left:6px;border-radius:21px;}
  .service.folder-card .thumb > img,
  .service.folder-card .thumb.grad > img{top:7px;left:8px;width:calc(100% - 16px);height:calc(100% - 19px);border-radius:16px;}
  .service.folder-card .thumb::after{height:26px;border-radius:0 0 21px 21px;}
}


.references .section-head p{max-width:620px}
.featured-feedback{display:grid;grid-template-columns:104px 1fr;gap:26px;align-items:center;margin:10px 0 34px}
.feedback-avatar{width:92px;height:92px;border-radius:999px;background:#efe9dc;border:1.5px solid #d8d0bf;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 22px rgba(0,63,55,.08)}
.feedback-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.feedback-bubble{position:relative;background:#eef0f4;border-radius:30px;padding:30px 34px;max-width:780px;box-shadow:0 12px 28px rgba(0,63,55,.06)}
.feedback-bubble::before{content:"";position:absolute;left:-10px;top:50%;width:24px;height:24px;background:#eef0f4;border-radius:8px;transform:translateY(-50%) rotate(45deg)}
.feedback-bubble p{margin:0;font-size:clamp(1.3rem,2vw,2.05rem);line-height:1.28;letter-spacing:-.02em;color:#0f1816}
.feedback-meta{margin-top:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b8078;font-weight:700}
.references-subtitle{margin:6px 0 22px;color:#5b716a;font-size:14px}
@media(max-width:650px){
  .featured-feedback{grid-template-columns:64px 1fr;gap:14px;align-items:start;margin-bottom:28px}
  .feedback-avatar{width:58px;height:58px}
  .feedback-bubble{padding:20px 20px 18px;border-radius:22px}
  .feedback-bubble::before{left:-6px;width:16px;height:16px;border-radius:5px;top:28px;transform:rotate(45deg)}
  .feedback-bubble p{font-size:1.05rem;line-height:1.33}
  .feedback-meta{margin-top:12px;font-size:11px;letter-spacing:.14em}
}

.feedback-stack{display:flex;flex-direction:column;gap:26px;margin:10px 0 34px}
.feedback-stack .featured-feedback{margin:0}
@media(max-width:650px){.feedback-stack{gap:18px;margin-bottom:28px}}

/* ===== overrides: side-by-side feedback + green reference headings ===== */
.references .section-head h2,
.references .section-head .eyebrow{color:var(--g)!important}
.references .section-head p,
.references-subtitle,
.references-note{color:#47645c}
.feedback-stack{display:grid!important;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin:10px 0 34px}
.featured-feedback{display:grid;grid-template-columns:92px 1fr;gap:22px;align-items:center}
@media(max-width:900px){
  .feedback-stack{grid-template-columns:1fr;gap:20px}
}
@media(max-width:650px){
  .featured-feedback{grid-template-columns:64px 1fr;gap:14px;align-items:start}
}


/* Logo wall composed from original client-supplied brand marks */
.references .section-head h2,.references .section-head .eyebrow{color:var(--g)!important}
.references .section-head p{color:#44665d!important}
.references .references-subtitle{font-family:Montserrat,'Century Gothic',Arial,sans-serif;font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.25;letter-spacing:.025em;text-transform:uppercase;color:var(--g);margin:70px 0 15px}
.references .logo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 24px;margin:0;padding:12px 0 20px;align-items:center}
.references .logo-item{margin:0;min-height:112px;padding:14px 7px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:16px;transition:transform .25s ease,background .25s ease}
.references .logo-item img{display:block;max-width:100%;width:auto;max-height:92px;height:auto;object-fit:contain;image-rendering:auto}
.references .logo-item:hover{background:rgba(0,63,55,.035);transform:translateY(-2px)}
@media(max-width:1160px){.references .logo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:850px){.references .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 15px}}
@media(max-width:620px){.references .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}.references .logo-item{min-height:106px;padding:12px 6px}.references .logo-item img{max-height:75px}.references .references-subtitle{margin:48px 0 8px}}
@media(prefers-reduced-motion:reduce){.references .logo-item{transition:none}}

@media(max-width:620px){.references .logo-item:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - 14px)/2)}}

/* ===== v6 portfolio phones + 3 feedback cards ===== */

.phone-project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.phone-project{background:#fff;border-radius:32px;padding:16px 16px 18px;border:1px solid #d8e4df;box-shadow:0 18px 34px rgba(0,63,55,.08)}
.phone-shell{position:relative;background:#111;border-radius:34px;padding:11px;box-shadow:inset 0 0 0 2px #1b1b1b,0 8px 18px rgba(0,0,0,.2)}
.phone-shell::before,.phone-shell::after{content:"";position:absolute;left:-4px;width:4px;background:#111;border-radius:4px}
.phone-shell::before{top:88px;height:40px}.phone-shell::after{top:138px;height:62px}
.phone-speaker{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:8px;border-radius:999px;background:#252525;z-index:3}
.phone-screen{position:relative;overflow:hidden;border-radius:26px;aspect-ratio:9/16;background:#dfe7e3}
.phone-screen img{width:100%;height:100%;object-fit:cover;display:block;animation:screenDrift 8s ease-in-out infinite}
.phone-screen-zoom img{animation:screenZoom 10s ease-in-out infinite}
.phone-screen-tilt img{animation:screenTilt 12s ease-in-out infinite}
.screen-chip{position:absolute;left:14px;bottom:14px;z-index:2;background:#fff;color:var(--g);padding:7px 12px;border-radius:999px;font-size:10px;line-height:1;letter-spacing:.16em;font-weight:700;text-transform:uppercase;box-shadow:0 8px 22px rgba(0,63,55,.14)}
.phone-meta{padding:16px 6px 2px}.phone-meta h3{margin:0 0 6px;font-size:1.05rem;text-transform:uppercase;color:var(--g)}.phone-meta p{margin:0;color:#61756e;font-size:13px;line-height:1.45}
.portfolio-note{margin:18px 2px 0;color:#d7e4df;font-size:13px;line-height:1.5}
@keyframes screenDrift{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-8px)}}
@keyframes screenZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes screenTilt{0%,100%{transform:scale(1) rotate(0deg)}35%{transform:scale(1.06) rotate(-1.2deg)}70%{transform:scale(1.03) rotate(.8deg)}}
@media(max-width:1200px){.phone-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.phone-project-grid{grid-template-columns:1fr}.phone-project{padding:14px 14px 16px}.screen-chip{font-size:9px;padding:6px 10px}.portfolio-note{font-size:12px}}

.feedback-stack-3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;margin:10px 0 34px}
.compact-feedback{display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:#fff;border:1px solid #d9e5df;border-radius:28px;padding:20px;box-shadow:0 14px 30px rgba(0,63,55,.06)}
.compact-feedback .feedback-avatar{width:70px;height:70px;margin-left:6px;background:#fff;border:1px solid #d8ddd8;box-shadow:none}
.compact-feedback .feedback-bubble{max-width:none;width:100%;padding:24px 24px 20px;background:#eef0f4;box-shadow:none}
.compact-feedback .feedback-bubble::before{left:22px;top:-8px;transform:rotate(45deg)}
.compact-feedback .feedback-bubble p{font-size:1.18rem;line-height:1.36}
.compact-feedback .feedback-meta{font-size:11px;letter-spacing:.14em;color:#688078}
.logo-grid-wall{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 24px;margin-top:8px}
@media(max-width:1100px){.feedback-stack-3{grid-template-columns:1fr 1fr}.logo-grid-wall{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.feedback-stack-3{grid-template-columns:1fr}.compact-feedback{padding:18px}.compact-feedback .feedback-bubble p{font-size:1.02rem}.logo-grid-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}}

/* horizontal logo update */
.site-logo{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}.site-logo:hover,.site-logo:focus-visible{text-decoration:none}.site-logo-mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.5px solid rgba(255,255,255,.45);border-radius:18px;color:#fff;font-weight:800;font-size:20px;letter-spacing:.08em;flex:0 0 auto}.site-logo-text{display:flex;flex-direction:column;min-width:0}.site-logo-text strong{font-size:1.16rem;line-height:1.05;letter-spacing:.02em;color:#fff;text-transform:uppercase;white-space:nowrap}.site-logo-text small{margin-top:5px;font-size:10px;line-height:1.2;letter-spacing:.18em;color:rgba(255,255,255,.82);text-transform:uppercase;white-space:nowrap}.nav .site-logo{color:#fff}.nav .site-logo *{color:inherit}.nav img{display:none}@media(max-width:760px){.site-logo-text small{display:none}.site-logo-text strong{font-size:.92rem;white-space:normal}.site-logo-mark{width:46px;height:46px;font-size:17px;border-radius:14px}.nav{height:88px}.nav-links{gap:18px}}

/* reference layout v8 */
.feedback-layout-v2{margin:10px 0 34px}.feedback-top-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.feedback-single-row{margin-top:18px}.simple-feedback{display:flex;align-items:flex-start;gap:16px;padding:0;background:transparent;border:none;box-shadow:none;border-radius:0}.simple-feedback .feedback-avatar{width:70px;height:70px;margin-top:6px;background:#fff;border:1px solid #d8ddd8}.simple-feedback .feedback-bubble{max-width:920px;background:#eef0f4;box-shadow:none;padding:24px 26px 20px}.simple-feedback .feedback-bubble::before{left:22px;top:-8px;transform:rotate(45deg)}.simple-feedback .feedback-bubble p{font-size:1.18rem;line-height:1.36}.simple-feedback .feedback-meta{font-size:11px;letter-spacing:.14em;color:#688078}.feedback-top-row .compact-feedback{height:100%}@media(max-width:760px){.feedback-top-row{grid-template-columns:1fr}.feedback-single-row{margin-top:14px}.simple-feedback{flex-direction:column}.simple-feedback .feedback-avatar{margin-left:6px}.simple-feedback .feedback-bubble p{font-size:1.02rem}}

/* v9 fixes: real horizontal logo + clean references */
.site-logo{display:flex;align-items:center;min-width:0;text-decoration:none}.site-logo-image{display:block;width:320px;max-width:min(34vw,320px);height:auto}.nav .site-logo *{color:inherit}.nav img.site-logo-image{display:block !important}.site-logo-mark,.site-logo-text{display:none !important}
.feedback-layout-v3{margin:12px 0 34px}.clean-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.feedback-bottom-row{margin-top:20px}.feedback-item{display:flex;align-items:flex-start;gap:14px}.feedback-item-wide{max-width:980px}.circle-logo{width:92px;height:92px;min-width:92px;border-radius:50%;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);background:#fff;border:1px solid rgba(0,0,0,.06)}.circle-logo img{width:100%;height:100%;object-fit:cover;display:block}.messenger-bubble{background:#eef0f4;border-radius:28px;padding:24px 28px 20px;box-shadow:none;border:none;max-width:none;position:relative}.messenger-bubble::before{content:"";position:absolute;left:20px;top:-8px;width:16px;height:16px;background:#eef0f4;border-radius:2px;transform:rotate(45deg)}.messenger-bubble p{margin:0;font-size:1.18rem;line-height:1.4;color:#171717}.messenger-bubble .feedback-meta{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5d746a}.featured-feedback,.compact-feedback,.simple-feedback{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}.references .section-head h2,.references .section-head p,.references .references-subtitle,.references .references-note{color:#0f5a49}.references .section-head p{opacity:.85}.references .references-note{opacity:.72}.references .section-head{margin-bottom:26px}
@media(max-width:980px){.site-logo-image{width:260px;max-width:50vw}.clean-row{grid-template-columns:1fr;gap:18px}.feedback-bottom-row{margin-top:18px}}
@media(max-width:760px){.site-logo-image{width:190px;max-width:56vw}.feedback-item,.feedback-item-wide{gap:12px}.circle-logo{width:74px;height:74px;min-width:74px}.messenger-bubble{padding:18px 18px 16px;border-radius:22px}.messenger-bubble p{font-size:1rem}.messenger-bubble::before{left:18px}}

/* v10: green horizontal logo + fixed circular reference logos */
.site-logo{display:flex;align-items:center;text-decoration:none;line-height:0;background:rgba(255,255,255,.94);padding:10px 16px;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.site-logo-image{display:block;width:260px;max-width:min(30vw,260px);height:auto;background:transparent}
.nav .site-logo{flex-shrink:0}
.nav .site-logo-mark,.nav .site-logo-text{display:none !important}

.references .section-head h2,
.references .section-head p,
.references .references-subtitle,
.references .references-note{color:#0f5a49}
.references .section-head p{opacity:.9}
.references .references-note{opacity:.72}

.feedback-layout-v4{margin:18px 0 30px}
.feedback-row{display:grid;gap:28px}
.feedback-row-top{grid-template-columns:1fr 1fr;align-items:start}
.feedback-row-bottom{grid-template-columns:minmax(0, 860px);margin-top:20px}
.feedback-entry{display:flex;align-items:flex-start;gap:16px;background:transparent;border:none;box-shadow:none;padding:0;margin:0}
.feedback-avatar{width:90px;height:90px;flex:0 0 90px;border-radius:50%;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.08);background:#fff}
.feedback-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.feedback-bubble{background:#eef0f4;border-radius:28px;padding:24px 28px;color:#171717;position:relative;min-height:auto;box-shadow:none;border:none;flex:1}
.feedback-bubble::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;background:#eef0f4;clip-path:polygon(0 50%,100% 0,100% 100%);transform:translateX(-90%)}
.feedback-bubble p{margin:0;font-size:1.12rem;line-height:1.48;color:#171717}
.feedback-entry-third .feedback-bubble{max-width:780px}

/* Neutralize old card styles in references */
.references .featured-feedback,
.references .compact-feedback,
.references .simple-feedback,
.references .feedback-card,
.references .feedback-shell,
.references .feedback-stack{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important;border-radius:0 !important}

@media (max-width: 1100px){
  .site-logo-image{width:240px;max-width:38vw}
}
@media (max-width: 900px){
  .feedback-row-top{grid-template-columns:1fr}
  .feedback-row-bottom{grid-template-columns:1fr;margin-top:18px}
}
@media (max-width: 760px){
  .site-logo-image{width:190px;max-width:52vw}
  .feedback-entry{gap:12px}
  .feedback-avatar{width:74px;height:74px;flex-basis:74px}
  .feedback-bubble{padding:18px 18px 18px 20px;border-radius:22px}
  .feedback-bubble::before{left:12px;top:16px;width:14px;height:14px}
  .feedback-bubble p{font-size:1rem;line-height:1.45}
}

/* v11: exact white horizontal logo on green background */
.site-logo{display:flex;align-items:center;line-height:0;background:transparent !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important}
.site-logo-image.brand-horizontal{display:block;width:255px;max-width:min(28vw,255px);height:auto;background:transparent}
.nav .site-logo-mark,.nav .site-logo-text{display:none !important}
@media (max-width:1100px){.site-logo-image.brand-horizontal{width:220px;max-width:32vw}}
@media (max-width:760px){.site-logo-image.brand-horizontal{width:170px;max-width:44vw}}

/* v12: restored captions under each reference */
.feedback-entry{align-items:flex-start}
.feedback-text{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.feedback-entry .feedback-meta{display:block;margin:2px 0 0 2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g);font-weight:700;line-height:1.35}
@media(max-width:760px){.feedback-text{gap:8px}.feedback-entry .feedback-meta{font-size:10px;letter-spacing:.13em;margin-left:1px}}


/* WordPress frontend compatibility and optional real videos within approved phone UI. */
body.admin-bar { min-height:100vh; }
.phone-screen video { display:block; width:100%; height:100%; object-fit:cover; }
.phone-screen.kh-video-playing > img { visibility:hidden; }
.phone-screen video:focus-visible { outline:3px solid #b9d7cc; outline-offset:-3px; }
.wp-block-image img { max-width:100%; height:auto; }
.kh-inner-page { min-height:60vh; padding:55px 0 95px; background:#fff; }
.kh-inner-page h1 { font-size:clamp(2.3rem,5vw,5rem); }
.kh-inner-page .entry-content { max-width:860px; }
.kh-inner-page .entry-content img {max-width:100%;height:auto;}
.kh-inner-page .post-list article { margin-bottom:2rem; padding:2rem 0; border-bottom:1px solid #d9e5df; }
.kh-inner-page .post-list h2 {font-size:1.75rem;}
.kh-inner-page a {color:#003F37;}
@media(max-width:600px){.kh-inner-page{padding:40px 0 70px;}}

/* v0.1.1: konzistentní tenké šipky bez systémových emoji */
.kh-arrow-icon{display:inline-block;width:12px;height:12px;min-width:12px;flex:none;vertical-align:-0.12em;color:inherit;overflow:visible}
.nav-cta .kh-arrow-icon{margin-left:4px}

/* v0.1.2: Editable navigation and blog; approved homepage styling unchanged. */
.nav-links .kh-nav-list { display:flex; align-items:center; gap:33px; margin:0; padding:0; list-style:none; }
.nav-links .kh-nav-list > li { margin:0; padding:0; list-style:none; }
.nav-links .kh-nav-list > li > a { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.nav-links .kh-nav-list .current-menu-item > a:not(.nav-cta) { text-decoration:underline; text-underline-offset:5px; }
.kh-blog-archive { background:var(--sand); color:var(--g); }
.kh-blog-archive .eyebrow, .kh-article-page .eyebrow { color:var(--g); }
.kh-blog-archive h1, .kh-article-page h1 { margin:16px 0 18px; font-size:clamp(2.9rem,6vw,5.3rem); }
.kh-blog-intro { max-width:640px; font-size:16px; margin-bottom:44px; }
.kh-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.kh-blog-card { overflow:hidden; border:1px solid #dae4de; background:#fff; border-radius:24px; display:flex; flex-direction:column; }
.kh-blog-card-image { display:block; aspect-ratio:16/10; overflow:hidden; }
.kh-blog-card-image img { display:block; width:100%; height:100%; object-fit:cover; }
.kh-blog-card-content { padding:24px; display:flex; flex:1; flex-direction:column; }
.kh-blog-card h2 { margin:9px 0 14px; font-size:clamp(1.3rem,2vw,1.85rem); text-transform:none; line-height:1.15; }
.kh-blog-card h2 a { text-decoration:none; }
.kh-blog-card h2 a:hover { text-decoration:underline; }
.kh-blog-date { color:#617a71; font-size:11px; font-weight:700; letter-spacing:.1em; }
.kh-blog-excerpt { color:#4e675f; font-size:14px; line-height:1.55; }
.kh-blog-excerpt p { margin:0 0 20px; }
.kh-blog-card .kh-read-more { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; font-weight:700; text-decoration:none; }
.kh-blog-pagination { margin-top:36px; }
.kh-blog-pagination .nav-links { display:block; }
.kh-blog-pagination .page-numbers { display:inline-block; padding:7px 10px; }
.kh-article { max-width:970px; margin:0 auto; }
.kh-article .entry-content { max-width:790px; margin:38px auto 0; font-size:16px; line-height:1.8; }
.kh-article .entry-content h2 { font-size:clamp(1.7rem,3vw,2.5rem); margin-top:1.8em; }
.kh-article .entry-content a { text-decoration:underline; }
.kh-article-hero img { display:block; width:100%; height:auto; max-height:520px; object-fit:cover; border-radius:24px; }
.kh-article-navigation { display:flex; justify-content:space-between; gap:24px; max-width:970px; margin:60px auto 0; font-weight:700; }
@media (max-width:1000px) {
  .nav-links .kh-nav-list { gap:20px; }
  .kh-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .nav-links .kh-nav-list { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .nav-links .kh-nav-list > li > a { display:flex; justify-content:flex-start; white-space:normal; padding:8px 2px; }
  .nav-links .kh-nav-list > li > a.nav-cta { display:inline-flex; padding:13px 18px; }
  .kh-blog-grid { grid-template-columns:1fr; }
  .kh-blog-card-content { padding:20px; }
  .kh-blog-intro { margin-bottom:28px; }
  .kh-article .entry-content { font-size:15px; }
}

/* v0.1.4: Round the actual photo pixels, not only the green folder.
   Keep the folder face overflow visible so the approved peek animation works.
   Clip the image itself, including its corners while it slides upward. */
.service.folder-card .folder-visual .thumb > img,
.service.folder-card .folder-visual .thumb.grad > img {
  border-radius: 23px !important;
  -webkit-clip-path: inset(0 round 23px);
  clip-path: inset(0 round 23px);
}
/* A contained landscape upload leaves an inner, square-edged white rectangle.
   Filling the rounded image box makes the uploaded photo itself rounded. */
.service.folder-card .folder-visual .thumb.grad > img {
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width:650px) {
  .service.folder-card .folder-visual .thumb > img,
  .service.folder-card .folder-visual .thumb.grad > img {
    border-radius: 19px !important;
    -webkit-clip-path: inset(0 round 19px);
    clip-path: inset(0 round 19px);
  }
}


/* v0.1.6: Fourth service folder — Wedding Content.
   Preserves the approved folder construction, rounded photo clipping and lift animation. */
@media (min-width:1121px) {
  .services .service-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:24px; }
}
@media (min-width:701px) and (max-width:1120px) {
  .services .service-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 26px; }
}
@media (max-width:700px) {
  .services .service-grid { grid-template-columns:1fr;gap:30px; }
}
.service.folder-card { min-width:0; }
.service.folder-card .kh-wedding-thumb { isolation:isolate; }
.service.folder-card .kh-wedding-folder-placeholder {
  position:absolute;z-index:2;top:9px;left:10px;width:calc(100% - 20px);height:calc(100% - 24px);
  border-radius:23px;clip-path:inset(0 round 23px);
  display:flex;justify-content:center;align-items:center;text-align:center;
  color:#003F37;
  background:linear-gradient(145deg,#eff2ed 0%,#c8dcd2 58%,#9dc2b5 100%);
  transition:transform .55s cubic-bezier(.2,.78,.25,1), box-shadow .55s ease;
}
.service.folder-card .kh-wedding-folder-placeholder span {
  font:700 clamp(1.05rem,1.6vw,1.4rem)/1.35 Montserrat,'Century Gothic',Arial,sans-serif;
  letter-spacing:.13em;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .service.folder-card:hover .kh-wedding-folder-placeholder,
  .service.folder-card:focus-within .kh-wedding-folder-placeholder {
    transform:translateY(-28px);box-shadow:0 12px 26px rgba(0,0,0,.18);
  }
}
@media (max-width:650px) {
 .service.folder-card .kh-wedding-folder-placeholder {top:7px;left:8px;width:calc(100% - 16px);height:calc(100% - 19px);border-radius:19px;clip-path:inset(0 round 19px);}
}
@media (hover:none) and (prefers-reduced-motion:no-preference) {
  .service.folder-card .kh-wedding-folder-placeholder {animation:kh-wedding-peek 7s ease-in-out infinite;animation-delay:3.5s;}
  @keyframes kh-wedding-peek{0%,15%,55%,100%{transform:translateY(0)}30%,43%{transform:translateY(-17px)}}
}


/* v0.1.7: Always show the Wedding Content filter and phone; no fake client photo.
   A real photo or MP4 from the Customizer replaces the empty state. */
.phone-screen.kh-wedding-phone-screen { background:#d3e5dc; }
.kh-wedding-phone-placeholder {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;padding:22px 14px;text-align:center;
  background:linear-gradient(145deg,#e7efeb 0%,#b8d5c9 50%,#8ebaaa 100%);
  color:#003F37;
}
.kh-wedding-phone-placeholder span {
  font:700 clamp(1rem,1.6vw,1.6rem)/1.18 Montserrat,'Century Gothic',Arial,sans-serif;
  letter-spacing:.08em;
}
.kh-wedding-phone-placeholder small {
  max-width:190px;display:block;font:700 9px/1.6 'Century Gothic',Arial,sans-serif;
  letter-spacing:.15em;
}

/* v0.1.8 / Safe video fallback in portfolio phones.
   Keep the existing cover visible until the video really plays.
   Otherwise an unavailable MP4 or blocked autoplay left an empty phone. */
.phone-screen > video {
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;pointer-events:none;
}
.phone-screen.kh-video-playing > video { opacity:1;pointer-events:auto; }
.phone-screen:not(.kh-video-playing) > img { visibility:visible;display:block; }
.phone-screen > .kh-video-play {
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.72);
  background:rgba(0,63,55,.78);color:#fff;cursor:pointer;
  box-shadow:0 7px 20px rgba(0,0,0,.24);font:700 24px/1 Arial,sans-serif;
  padding:0 0 0 3px;
}
.phone-screen > .kh-video-play:hover,
.phone-screen > .kh-video-play:focus-visible { background:#003f37;outline:2px solid #fff;outline-offset:3px; }
.phone-screen.kh-video-playing > .kh-video-play {display:none;}


/* v0.1.9 / Keep service names on one line with four folders.
   Only text styling changes; folder layout, motion, images and portfolio stay intact. */
@media (min-width:1121px) {
  .services .service-grid .service-title {
    font-size:clamp(19px, 1.78vw, 24px);
    letter-spacing:-.045em;
    white-space:nowrap;
  }
}
@media (min-width:701px) and (max-width:1120px) {
  .services .service-grid .service-title {
    font-size:clamp(20px, 2.4vw, 24px);
    letter-spacing:-.045em;
    white-space:nowrap;
  }
}


/* v0.2.0 — An expandable carousel while preserving the approved phone design. */
.projects .kh-carousel { width:100%;min-width:0; }
.projects .kh-carousel .phone-project-grid {
 display:flex !important;grid-template-columns:none !important;
 gap:22px;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;
 scroll-snap-type:x mandatory;scroll-padding-inline:2px;
 padding:4px 2px 24px;margin:0;
 scrollbar-width:thin;scrollbar-color:rgba(247,247,244,.44) transparent;
 -webkit-overflow-scrolling:touch;
}
.projects .kh-carousel .phone-project {
 flex:0 0 calc((100% - 66px) / 4);min-width:0;
 scroll-snap-align:start;scroll-snap-stop:normal;
 display:flex;flex-direction:column;
}
.projects .kh-carousel .phone-project[hidden] {display:none !important;}
.projects .kh-carousel .phone-project .phone-meta{flex:1;}
.projects .kh-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0 0;color:var(--sand)}
.projects .kh-carousel-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(247,247,244,.7);background:transparent;color:var(--sand);font-size:22px;cursor:pointer;line-height:1;transition:background .2s}
.projects .kh-carousel-arrow:hover:not(:disabled){background:rgba(247,247,244,.18)}
.projects .kh-carousel-arrow:disabled{opacity:.28;cursor:default}
.projects .kh-carousel-arrow:focus-visible{outline:3px solid #b9d6c8;outline-offset:3px}
.projects .kh-carousel-counter{font-size:11px;letter-spacing:.11em;min-width:100px;text-align:center}
.phone-screen .kh-instagram-preview-link{
 position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;gap:10px;
 align-items:center;justify-content:center;text-decoration:none;
 background:linear-gradient(0deg,rgba(0,63,55,.28),rgba(0,63,55,.04));color:#fff;
}
.phone-screen .kh-instagram-preview-link span{width:57px;height:57px;border-radius:100%;display:grid;place-items:center;padding-left:4px;background:rgba(0,63,55,.8);border:1px solid #fff;font-size:22px;transition:transform .18s}
.phone-screen .kh-instagram-preview-link:hover span{transform:scale(1.1)}
.phone-screen .kh-instagram-preview-link small{font-size:9px;letter-spacing:.1em;max-width:90%;text-align:center;background:rgba(0,63,55,.8);border-radius:15px;padding:6px 9px}
.phone-screen:has(.kh-instagram-preview-link) .screen-chip {pointer-events:none;}
@media(max-width:1050px){.projects .kh-carousel .phone-project{flex-basis:calc((100% - 22px) / 2)}}
@media(max-width:650px){.projects .kh-carousel .phone-project{flex-basis:100%}.projects .kh-carousel .phone-project-grid{gap:16px}}
@media(prefers-reduced-motion:reduce){.projects .kh-carousel .phone-project-grid{scroll-behavior:auto}}

/* v0.2.1 — Instagram preview is above the photo, but must never hide the
   label at the bottom of the phone. Preserve clicks on the Instagram link. */
.kh-extra-project .phone-screen .screen-chip {
  z-index:7;
  pointer-events:none;
}
/* If the featured-image URL itself is broken (also visible in wp-admin),
   never show the browser's broken-image icon/alt text on the public site. */
.kh-extra-project .phone-screen.kh-cover-missing > img { display:none !important; }
.kh-extra-project .phone-screen > .kh-cover-fallback {
  display:none;
  position:absolute; inset:0; z-index:0;
  padding:24px;
  align-items:center;justify-content:center;flex-direction:column;
  gap:14px;text-align:center;
  background:linear-gradient(155deg,#e1ede7 0%,#bed9cf 55%,#8db9a9 100%);
  color:#003F37;
}
.kh-extra-project .phone-screen.kh-cover-missing:not(.kh-video-playing) > .kh-cover-fallback { display:flex; }
.kh-cover-fallback span { font-size:10px;letter-spacing:.18em;font-weight:700; }
.kh-cover-fallback strong {font-family:Montserrat,'Century Gothic',Arial,sans-serif;font-size:clamp(18px,2vw,27px);line-height:1.25;max-width:100%;overflow-wrap:anywhere;}

/* 0.2.2: A video poster is visible until the file is actually playing.
   The play control sits above it; no video media is fetched on initial page load. */
.phone-screen .kh-video-play {
  position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:#003F37;color:#fff;font-size:23px;cursor:pointer;
  box-shadow:0 6px 28px rgba(0,0,0,.24);
}
.phone-screen .kh-video-play:focus-visible { outline:3px solid #b9d7cc;outline-offset:4px; }
.phone-screen .kh-video-play[hidden] {display:none;}
.phone-screen .kh-video-play.kh-video-loading {cursor:progress;opacity:.8;}
.phone-screen .kh-video-play.kh-video-failed {font-size:12px;width:auto;max-width:82%;height:auto;padding:12px 14px;border-radius:100px;text-align:center;}

/* v0.2.3 — Native, resilient media playback without eager downloads.
   The proper src is present in HTML. If JavaScript is delayed or fails, the
   browser still shows the video poster and native controls. Enhancements
   hide the video until the actual playing event, then display it. */
.phone-screen > video { opacity:1; pointer-events:auto; }
.phone-screen.kh-video-ready:not(.kh-video-playing) > video { opacity:0; pointer-events:none; }
.phone-screen.kh-video-ready.kh-video-playing > video { opacity:1; pointer-events:auto; }
.phone-screen .kh-cover-fallback { pointer-events:none; }