/* zied.lab website styles */
:root{
  --cobalt:#16295C;
  --cobalt-d:#0E1B40;
  --ink:#0B1437;
  --cream:#F6F1E7;
  --sand:#E8DFCB;
  --paper:#FFFFFF;
  --accent:#FF5A36;
  --muted:#59607F;
  --line:rgba(22,41,92,.14);
  --nav-h:72px;
  --r:18px;
  --shadow:0 18px 50px -20px rgba(11,20,55,.35);
  --font-h:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;
  --font-b:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
html,body{background:var(--cream)!important}
body{overflow-x:hidden}
body{font-family:var(--font-b)!important;font-size:17px!important;line-height:1.6;color:var(--ink);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--cobalt);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:flex;align-items:center;gap:8px;padding:0 clamp(14px,2.4vw,32px);background:rgba(246,241,231,.98);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:48px;width:auto}
.menu-wrap{display:flex;align-items:center;flex:1;gap:16px}
.menu{display:flex;align-items:center;gap:2px;margin-left:clamp(8px,2vw,28px);flex:1}
.menu-btn{display:inline-flex;align-items:center;gap:6px;padding:17.56px 23.56px;border-radius:999px;font-weight:800;font-size:15.5px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s;text-transform:uppercase;letter-spacing:.02em}
.menu-btn:hover,.has-dd.open>.menu-btn,.has-dd:focus-within>.menu-btn{background:var(--cobalt);color:#fff}
.chev{transition:transform .2s}
.has-dd.open .chev,.has-dd:hover .chev{transform:rotate(180deg)}
.has-dd{position:relative}
.dd{position:absolute;top:100%;left:0;min-width:270px;padding:8px;margin-top:6px;background:var(--paper);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s}
.has-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.has-dd:hover>.dd,.has-dd.open>.dd,.has-dd:focus-within>.dd{opacity:1;visibility:visible;transform:none}
.dd a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:500;font-size:15.5px}
.dd a:hover,.dd a:focus-visible{background:var(--cream);color:var(--cobalt)}
.dd .sep{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.dd .sep a{font-weight:700;color:var(--cobalt)}
.pill{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--sand);color:var(--cobalt-d);white-space:nowrap}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--sand);flex:none}
.lang button{padding:6px 12px;border-radius:999px;font-weight:700;font-size:13.5px;letter-spacing:.04em;transition:.2s}
.lang button[aria-pressed="true"]{background:var(--cobalt);color:#fff}
.nav-toggle{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center}

/* ---------- HERO ---------- */
.hero{margin-top:var(--nav-h);display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.stage{position:relative;display:flex;flex-direction:column;background:var(--ink);color:#fff;min-height:0;overflow:hidden}
.slides{position:relative;flex:1;min-height:340px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.slide.active{opacity:1}
.slide .bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(30px) brightness(.5) saturate(1.2)}
.slide video,.slide img.main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.slide-ui{position:absolute;left:0;right:0;bottom:var(--strip-h,138px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 20px;background:linear-gradient(to top,rgba(11,20,55,.85),transparent);z-index:3}
.slide-cap{display:flex;flex-direction:column;gap:6px;min-width:0}
.slide-cap strong{font-family:var(--font-h);font-size:clamp(17px,1.5vw,22px);line-height:1.2}
.chip{align-self:flex-start;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.slide-ctrl{display:flex;align-items:center;gap:8px;flex:none}
.slide-ctrl button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:.2s}
.slide-ctrl button:hover{background:#fff;color:var(--ink)}
.dots{display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
.dots i.on{background:#fff;width:22px;border-radius:6px}
.progress{position:absolute;left:0;right:0;bottom:var(--strip-h,138px);height:3px;background:rgba(255,255,255,.15);z-index:4}
.progress i{display:block;height:100%;width:0;background:var(--accent)}

/* services graphic strip */
.svc-strip{position:relative;height:var(--strip-h,138px);flex:none;background:var(--cobalt);display:grid;grid-template-columns:repeat(6,1fr);align-items:center;padding:0 14px}
.svc-line{position:absolute;left:8%;right:8%;top:46px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 8px,transparent 8px 16px);animation:dash 1.4s linear infinite;background-size:16px 2px}
@keyframes dash{to{background-position:16px 0}}
.svc-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;font-size:13px;font-weight:700;line-height:1.2;color:#fff;padding:0 4px}
.svc-node .ico{width:64px;height:64px;border-radius:50%;background:var(--cream);color:var(--cobalt);display:grid;place-items:center;box-shadow:0 0 0 6px var(--cobalt);transition:transform .25s,background .25s,color .25s}
.svc-node:hover .ico{transform:translateY(-4px) scale(1.06);background:var(--accent);color:#fff}
.svc-node.soon .ico{opacity:.75;border:2px dashed var(--cobalt)}
.svc-node .pill{position:absolute;top:-6px;right:calc(50% - 46px);background:var(--accent);color:#fff;font-size:10px;padding:2px 7px}

/* right half */
.cta-panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,64px);background:var(--cream);position:relative;overflow:hidden}
.cta-panel::before{content:"";position:absolute;width:520px;height:520px;right:-200px;top:-200px;border-radius:50%;background:var(--sand);opacity:.7}
.cta-panel::after{content:"";position:absolute;width:300px;height:300px;left:-190px;bottom:-190px;border-radius:50%;border:2px dashed rgba(22,41,92,.3)}
.cta-inner{position:relative;z-index:1;width:100%;max-width:560px}
.eyebrow{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--cobalt);margin-bottom:16px}
.cta-inner h1{font-family:var(--font-h);font-weight:800;font-size:clamp(32px,3.6vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--muted);margin-bottom:30px;max-width:46ch}
.fine{margin-top:16px;font-size:14.5px;color:var(--muted)}

.btn-primary,.btn-ghost,.btn-light{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:700;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-primary{background:var(--cobalt);color:#fff;padding:18px 30px;font-size:19px;box-shadow:0 14px 30px -12px rgba(22,41,92,.7)}
.btn-primary:hover{transform:translateY(-3px);background:var(--cobalt-d);box-shadow:0 20px 34px -14px rgba(22,41,92,.8)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-primary svg,.btn-light svg{transition:transform .2s}
.btn-primary.sm{padding:13px 22px;font-size:16px}
.btn-ghost{padding:13px 22px;font-size:16px;border:2px solid var(--cobalt);color:var(--cobalt)}
.btn-ghost:hover{background:var(--cobalt);color:#fff}
.btn-light{background:var(--cream);color:var(--cobalt);padding:18px 30px;font-size:19px}
.btn-light:hover{transform:translateY(-3px);background:#fff}

/* form */
.form{display:grid;gap:14px;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.form h2{font-family:var(--font-h);font-size:clamp(24px,2.3vw,34px);line-height:1.1;letter-spacing:-.01em}
.back{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-weight:700;font-size:14.5px;color:var(--cobalt);padding:4px 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px;font-size:14.5px;font-weight:700}
.field .lbl{display:block}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(11,20,55,.2);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical;min-height:120px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(22,41,92,.14)}
input.bad,textarea.bad{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,90,54,.15)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.4}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--cobalt);flex:none}
.form-actions{display:flex}
.form-actions .btn-primary{width:100%}
.form-status{min-height:1.4em;font-size:14.5px;font-weight:500}
.form-status.err{color:#c4300f}
.thanks{text-align:center;animation:rise .45s ease}
.thanks .tick{width:74px;height:74px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;margin:0 auto 20px}
.thanks h2{font-family:var(--font-h);font-size:34px;margin-bottom:8px}
.thanks p{color:var(--muted);margin-bottom:22px}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(64px,8vw,110px) clamp(18px,4vw,48px)}
.section.alt{background:var(--paper)}
.section.dark{background:var(--cobalt);color:#fff}
.wrap{max-width:1200px;margin:0 auto}
.kicker{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:13px;color:var(--cobalt);margin-bottom:12px}
.dark .kicker{color:var(--sand)}
.h2{font-family:var(--font-h);font-weight:800;font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.02em;max-width:22ch;margin-bottom:16px}
.h3{font-family:var(--font-h);font-size:26px;margin:48px 0 16px}
.lead2{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:60ch;margin-bottom:40px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.card-svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card-svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--cobalt)}
.card-svc .ico{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--cobalt);color:#fff;margin-bottom:18px}
.card-svc h3{font-family:var(--font-h);font-size:23px;line-height:1.15;margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-svc p{color:var(--muted)}
.card-svc.soon{background:transparent;border-style:dashed}
.card-svc.soon .ico{background:var(--sand);color:var(--cobalt)}
:target.card-svc{animation:flash 1.6s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px var(--accent)}100%{box-shadow:none}}

/* portfolio */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{padding:9px 18px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid var(--line);background:var(--cream);transition:.2s}
.tab:hover{border-color:var(--cobalt)}
.tab[aria-selected="true"]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.masonry{columns:4 220px;column-gap:16px}
.pcard{position:relative;display:block;width:100%;break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;background:var(--ink);cursor:pointer;text-align:left;color:#fff}
.pcard img,.pcard video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pcard.v{aspect-ratio:9/16}.pcard.s{aspect-ratio:1/1}.pcard.h{aspect-ratio:16/9}.pcard.w{aspect-ratio:2/1}
.pcard.g{aspect-ratio:auto}
.pcard.g img{height:auto}
.pcard video{position:absolute;inset:0}
.pcard:hover img,.pcard:hover video{transform:scale(1.04)}
.pcard .cap{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;background:linear-gradient(to top,rgba(11,20,55,.9),transparent);font-size:14px;font-weight:700;line-height:1.25}
.pcard .play{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--cobalt);display:grid;place-items:center}
.pcard .play svg{margin-left:2px}

/* prices */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:stretch}
/* monthly packages: break out of the centered 1200px column so the two cards use the full width of the page */
#prices .plans.two{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px);box-sizing:border-box}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px}
.plan.featured{background:var(--cobalt);color:#fff;border-color:var(--cobalt);box-shadow:var(--shadow)}
.plan h3{font-family:var(--font-h);font-size:24px}
.price{display:flex;align-items:baseline;gap:8px}
.price span{font-family:var(--font-h);font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1}
.price small{font-size:15px;opacity:.75}
.plan ul{display:grid;gap:10px;margin:6px 0 10px;flex:1}
.plan li{position:relative;padding-left:28px;font-size:16px}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.plan.featured li::before{background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316295C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.plan.featured .btn-primary{background:var(--cream);color:var(--cobalt)}
.badge{position:absolute;top:-13px;left:24px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px}
.ph{outline:2px dashed var(--accent);outline-offset:4px;border-radius:4px}
.table{max-width:640px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tr{display:flex;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);font-weight:500}
.tr:last-child{border-bottom:0}
.tr b{font-family:var(--font-h);font-size:18px}
.fine2{margin-top:16px;color:var(--muted);font-size:15px}

/* blog */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.post{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:28px;border-radius:var(--r);background:var(--cream);border:1px dashed rgba(22,41,92,.35);min-height:190px}
.post h3{font-family:var(--font-h);font-size:22px;line-height:1.2}
.post .pill{background:var(--cobalt);color:#fff}

/* about */
/* the photo/text row sits exactly 1cm under the "About me" head row - a fixed row-gap, not a
   responsive one, so the gap is a literal 1cm regardless of viewport width */
.about{display:grid;grid-template-columns:minmax(260px,420px) 1fr;grid-template-areas:"head head" "photo text";column-gap:clamp(28px,5vw,72px);row-gap:37.8px;align-items:center}
.about-head{grid-area:head;display:flow-root}
/* align-items:center above centers the photo/text row's shorter item against the taller one - since
   the text column usually runs much taller than the photo, that centering was adding a lot of extra
   invisible space above the photo, so the 1cm row-gap above never actually showed up visually.
   align-self:start pins the photo to the top of its row, right after that 1cm gap. */
.about-photo{grid-area:photo;position:relative;align-self:start}
.about-text{grid-area:text}
.about-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:var(--r);background:var(--cobalt);opacity:.9}
.about-photo img{position:relative;border-radius:var(--r);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about-text p{margin-bottom:16px;max-width:58ch;color:var(--muted)}
.about-text .h2{color:var(--ink)}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:26px 0 30px}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--font-h);font-size:40px;line-height:1;color:var(--cobalt)}
.stats span{font-size:14.5px;color:var(--muted)}

/* contacts */
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:32px 0 40px;max-width:960px}
.contact-list>*{display:flex;align-items:center;gap:16px;padding:22px;border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);text-decoration:none;transition:background .2s}
.contact-list a:hover{background:rgba(255,255,255,.2)}
.contact-list small{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.contact-list span{font-weight:700;font-size:17px;word-break:break-word}

.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px clamp(18px,4vw,48px);background:var(--ink);color:rgba(255,255,255,.75);font-size:14.5px}
.footer img{height:36px;width:auto}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,12,36,.94);padding:24px}
.lb-body{display:grid;place-items:center;max-width:min(92vw,1100px);max-height:80vh}
.lb-body video,.lb-body img{max-height:80vh;max-width:min(92vw,1100px);border-radius:12px;background:#000}
.lb-cap{color:#fff;font-weight:700;text-align:center}
.lb-close,.lb-nav{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:.2s}
.lb-close:hover,.lb-nav:hover{background:#fff;color:var(--ink)}
.lb-close{top:18px;right:18px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:18px}.lb-nav.next{right:18px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .menu-btn{padding:9px 12px;font-size:14.5px}
}
@media (max-width:980px){
  :root{--strip-h:132px}
  .nav-toggle{display:flex}
  .menu-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:20px;padding:16px 18px 32px;background:var(--cream);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s}
  .nav.open .menu-wrap{transform:none;visibility:visible}
  .menu{flex-direction:column;align-items:stretch;margin:0;flex:none;gap:4px}
  .menu-btn{width:100%;justify-content:space-between;font-size:18px;padding:14px 16px}
  .dd{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;margin:0;padding:0 0 8px 12px;min-width:0}
  .has-dd.open>.dd{display:block}
  .has-dd:hover>.dd{opacity:1}
  .has-dd:hover .chev{transform:none}
  .has-dd.open .chev{transform:rotate(180deg)}
  .has-dd::after{display:none}
  .lang{align-self:flex-start}
  .hero{grid-template-columns:1fr;min-height:0}
  .slides{min-height:min(72vh,560px);flex:none}
  .stage{min-height:0}
  .cta-panel{padding:44px 20px 56px}
}
@media (max-width:640px){
  body{font-size:16px}
  .row2{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;grid-template-areas:"head" "photo" "text"}
  .about-photo{max-width:340px}
  .svc-strip{padding:0 4px}
  .svc-node{font-size:11px}
  .svc-node .ico{width:48px;height:48px}
  .svc-node .ico svg{width:22px;height:22px}
  .svc-line{top:38px}
  .svc-node .pill{right:calc(50% - 34px);font-size:9px}
  .slide-ui{padding:14px}
  .dots{display:none}
  .masonry{columns:2 150px;column-gap:10px}
  .pcard{margin-bottom:10px}
  .lb-nav.prev{left:6px}.lb-nav.next{right:6px}
  .footer{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.thanks-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.flash{animation:flash 1.6s ease}

/* price list additions */
.plans.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:900px}
.plans.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan .alt{font-size:15px;opacity:.85;margin-top:-6px}
.plan.mini{gap:8px;padding:24px}
.plan.mini h3{font-size:21px}
.plan.mini .price span{font-size:36px}
.plan.mini p:last-child{color:var(--muted);font-size:16px}
.table{max-width:900px}
.tr{align-items:center}
.tr span{display:flex;flex-direction:column;gap:2px}
.tr small{font-size:14.5px;color:var(--muted);font-weight:400;line-height:1.4}
.tr b{font-family:var(--font-b);font-size:18.5px;font-weight:800}
.tr em{font-style:normal;font-family:var(--font-h);font-weight:800;font-size:22px;white-space:nowrap;color:var(--cobalt)}

.travel{max-width:60ch;margin:-12px 0 32px;font-size:18px;opacity:.92}

/* mega dropdowns: 3 columns, everything visible at once */
.dd.mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px;min-width:min(790px,calc(100vw - 32px));padding:12px}
.dd.mega li{min-width:0}
.dd.mega a{height:100%}
.dd.mega .r4{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.dd.mega .strong{font-weight:700;color:var(--cobalt)}
.nav{box-shadow:0 6px 24px -18px rgba(11,20,55,.5)}
/* hero services strip with 9 items */
.svc-strip{grid-template-columns:repeat(9,minmax(0,1fr));padding:0 8px}
.svc-node{font-size:11.5px;gap:7px}
.svc-node .ico{width:46px;height:46px;box-shadow:0 0 0 5px var(--cobalt)}
.svc-node .ico svg{width:22px;height:22px}
.svc-line{top:41px;left:5%;right:5%}
@media (max-width:980px){
  .dd.mega{grid-template-columns:1fr;min-width:0;padding:0 0 8px 12px}
  .dd.mega .r4{margin-top:2px}
  .svc-strip{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:92px;overflow-x:auto;padding:0 10px;scrollbar-width:thin}
  .svc-line{left:40px;right:auto;width:calc(9*92px - 80px)}
}

/* slide counter */
.dots{font-size:13px;font-weight:700;letter-spacing:.06em;min-width:64px;justify-content:center;opacity:.95;font-variant-numeric:tabular-nums}
.slide img.main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media (max-width:980px){
  .dd.mega{display:none}
  .has-dd.open>.dd.mega{display:grid}
}

/* ---- realistic pen handwriting (Kalam + per-letter jitter + ink filter) ---- */
:root{--font-hand:"Kalam","Segoe Script","Bradley Hand",cursive;--pen:#16215e}
.cta-inner h1,.h2,.h3,.form h2,.thanks h2,.card-svc h3,.plan h3,.post h3,.slide-cap strong{font-family:var(--font-hand);font-weight:400;letter-spacing:0;color:var(--pen)}
.cta-inner h1{font-size:clamp(30px,3.1vw,46px);line-height:1.5}
.h2{font-size:clamp(28px,3.3vw,44px);line-height:1.5;max-width:min(100%,24ch)}
.h3{font-size:28px;line-height:1.35}
.form h2,.thanks h2{font-size:clamp(27px,2.4vw,34px);line-height:1.25}
.card-svc h3{font-size:23px;line-height:1.25}
.plan h3,.plan.mini h3{font-size:24px;line-height:1.2}
.post h3{font-size:22px;line-height:1.25}
.slide-cap strong{font-size:clamp(20px,1.6vw,26px)}
.plan h3,.plan.mini h3{color:inherit}
/* the scribbled text itself */
.ink-w>.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ink{filter:url(#ink-s);transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ink.big{filter:url(#ink-b)}
.ink .w{display:inline-block;white-space:nowrap}
.ink .l{display:inline-block;will-change:transform}

/* ---- a scanned sheet of lined notebook paper for the MAIN headings ---- */
:root{
  --paper:#FFFCF3;
  --sheet:#FBF8F0;
  --rule:rgba(78,118,178,.42);--margin:rgba(200,64,64,.6);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .34 -.02'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .3 0 0 0 .3 -.09'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E");
  --blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .58 0 0 0 0 .34 0 0 0 .45 -.1'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23b)'/%3E%3C/svg%3E");
}
.cta-inner h1,.h2{
  position:relative;display:block;width:fit-content;max-width:100%;
  padding:.5em .7em .3em 2.2em;margin-bottom:28px;
  background-color:var(--sheet);
  background-image:
    var(--grain),
    var(--fibre),
    var(--blot),
    repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.5em - 1.4px),var(--rule) calc(1.5em - 1.4px),var(--rule) 1.5em),
    linear-gradient(to right,rgba(0,0,0,.06),transparent 5%,transparent 95%,rgba(90,60,10,.10)),
    linear-gradient(to bottom,rgba(90,60,10,.07),transparent 9%,transparent 91%,rgba(90,60,10,.12));
  background-size:260px 260px,420px 420px,700px 700px,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 .06em,0 0,0 0;
  border-radius:2px 3px 2px 4px;
  box-shadow:0 0 0 .5px rgba(60,40,10,.18),0 1px 1px rgba(40,25,5,.16),1px 5px 10px -3px rgba(30,20,5,.30),0 22px 28px -22px rgba(30,20,5,.35);
  transform:rotate(-.7deg);
  isolation:isolate;
}
.cta-inner h1{margin-top:6px}
/* red margin: a faint double line, like real school paper */
.cta-inner h1::before,.h2::before{content:"";position:absolute;left:1.5em;top:0;bottom:0;width:3px;
  border-left:1px solid var(--margin);border-right:1px solid var(--margin);opacity:.75;z-index:-1;pointer-events:none}
/* masking tape holding the note, like before */
.cta-inner h1::after,.h2::after{content:"";position:absolute;top:-14px;left:50%;width:88px;height:26px;margin-left:-44px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0) 30%,rgba(255,255,255,.18) 70%,rgba(0,0,0,.05)),rgba(232,201,120,.7);
  transform:rotate(2.5deg);box-shadow:0 1px 3px rgba(0,0,0,.18);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,88% 0,92% 10%,96% 0,100% 8%,100% 92%,96% 100%,92% 90%,88% 100%,12% 100%,8% 90%,4% 100%,0 92%)}
#portfolio .h2::after,#contacts .h2::after{margin-left:-20px;transform:rotate(-3deg)}
#prices .h2::after{margin-left:-70px;transform:rotate(1.5deg)}
#portfolio .h2,#blog .h2,#contacts .h2{transform:rotate(.55deg)}
#prices .h2{transform:rotate(-.4deg)}
.h3{position:relative;display:inline-block;padding:0 .25em}
.h3::before{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.5em;background:rgba(255,90,54,.22);z-index:-1;border-radius:2px;transform:skewX(-6deg) rotate(-.4deg)}
.h3{isolation:isolate}
@media(max-width:700px){
  .cta-inner h1,.h2{padding:.45em .5em .25em 1.9em;transform:rotate(-.5deg)}
  .cta-inner h1{font-size:clamp(25px,7.3vw,34px)}
  .h2{font-size:clamp(24px,7vw,32px)}
}

/* ---- platform frames in the hero slideshow ---- */
.slide{display:grid;place-items:center;padding:14px 20px 104px}
.slide .bg{z-index:0}
.frame{position:relative;z-index:1;width:var(--mw,320px);color:#111;font-family:var(--font-b);font-size:13px;line-height:1.35;text-align:left;box-shadow:0 24px 50px -18px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.3)}
.frame .fm{position:relative;background:#000;overflow:hidden}
.frame .fm video,.frame .fm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .fm.contain video,.frame .fm.contain img{object-fit:contain}
.frame .av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cobalt);color:#fff;font-weight:700;font-size:15px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.frame .av img{width:100%;height:100%;object-fit:cover;background:#fff}
.frame .av[data-k]{background:linear-gradient(135deg,#FF5A36,#16295C)}
.frame .fr-more{margin-left:auto;color:#555;display:grid}
.frame .fr-btn{display:inline-block;border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px;background:#111;color:#fff;white-space:nowrap}
/* Instagram feed post */
.f-igvideo,.f-igpost{background:#fff;border-radius:6px;overflow:hidden;width:var(--mw)}
.f-igvideo .fr-head,.f-igpost .fr-head{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px}
.f-igvideo .fr-name,.f-igpost .fr-name{font-weight:700;font-size:13.5px}
.f-igvideo .fm,.f-igpost .fm{width:100%;aspect-ratio:4/5}
.fr-acts{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 12px;color:#111}
.fr-acts span{display:flex;gap:14px}
.f-igvideo .fr-cap,.f-igpost .fr-cap{padding:0 12px 12px;height:82px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;margin:0}
/* YouTube Short */
.f-yt{aspect-ratio:9/16;background:#000;border-radius:16px;overflow:hidden;color:#fff}
.f-yt .fm{position:absolute;inset:0}
.yt-top{position:absolute;top:0;left:0;right:0;padding:12px 14px;font-weight:700;font-size:15px;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2}
.yt-top::before{content:"";display:inline-block;width:14px;height:18px;margin-right:6px;vertical-align:-3px;background:#FF0033;border-radius:4px}
.yt-rail{position:absolute;right:8px;bottom:96px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2}
.yt-rail span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.35)}
.yt-bot{position:absolute;left:0;right:0;bottom:0;padding:40px 60px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:2}
.yt-chan{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.yt-chan .av{width:30px;height:30px}
.yt-chan .fr-name{font-size:13px}
.yt-chan .fr-btn{background:#fff;color:#111;padding:5px 12px;font-size:12px}
.f-yt .fr-desc{margin:0;font-size:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Facebook feed ad */
.f-fbad{background:#fff;border-radius:8px;overflow:hidden;width:var(--mw)}
.f-fbad .fr-head{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px}
.f-fbad .fr-who{display:flex;flex-direction:column;line-height:1.2}
.f-fbad .fr-who b{font-size:13.5px}
.f-fbad .fr-who small{display:flex;align-items:center;gap:4px;color:#65676B;font-size:11.5px}
.f-fbad .fr-text{margin:0;padding:0 12px 10px;height:62px;overflow:hidden;font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.f-fbad .fm{width:100%;aspect-ratio:1/1}
.fr-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;height:58px;background:#F0F2F5}
.fr-cta small{display:block;color:#65676B;font-size:10.5px;letter-spacing:.04em}
.fr-cta b{font-size:13.5px}
.fr-cta .fr-btn{background:#E4E6EB;color:#111;border-radius:6px;font-size:12.5px}
.fr-react{display:flex;justify-content:space-around;align-items:center;height:40px;color:#65676B;font-weight:600;font-size:12.5px}
.fr-react span{display:flex;align-items:center;gap:6px}
.fr-react em{font-style:normal}
/* Facebook page: logo as profile picture */
.f-fbpage{background:#fff;border-radius:10px;overflow:hidden;width:var(--mw)}
.pg-cover{height:calc(var(--mw)*.36);background:linear-gradient(120deg,#16295C,#3552A8 60%,#FF5A36)}
.f-fbpage .pg-pic{width:calc(var(--mw)*.36);height:calc(var(--mw)*.36);border-radius:50%;border:4px solid #fff;margin:calc(var(--mw)*-.18) 0 0 16px;background:#fff}
.f-fbpage .pg-pic img{object-fit:cover}
.pg-body{padding:10px 16px 16px;display:flex;flex-direction:column;gap:2px}
.pg-body b{font-size:17px}
.pg-body small{color:#65676B;font-size:12.5px}
.pg-body p{margin:8px 0 12px;font-size:12.5px;color:#333;height:64px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.pg-btns{display:flex;gap:8px}
.pg-btns .fr-btn{background:#1B74E4;border-radius:6px;padding:7px 18px}
.pg-btns .fr-btn.ghost{background:#E4E6EB;color:#111}
@media (max-width:980px){.slide{padding-bottom:96px}}

.f-igvideo .fm.sq,.f-igpost .fm.sq{aspect-ratio:1/1}
.f-igvideo .fm.land,.f-igpost .fm.land{aspect-ratio:16/9}
.f-igvideo .fm.land2,.f-igpost .fm.land2{aspect-ratio:1.91/1}
.yt-chan .fr-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-chan .fr-btn{flex:none}
.f-fbad .fr-text{padding:0 12px;margin:0 0 10px;height:52px}
.f-igvideo .fr-cap,.f-igpost .fr-cap{padding:0 12px;margin:0 0 12px;height:70px}

/* Instagram Reel */
.f-reel,.f-yt{aspect-ratio:9/16;background:#000;border-radius:16px;overflow:hidden;color:#fff;width:var(--mw)}
.f-reel .fm{position:absolute;inset:0}
.f-reel .fm.contain video,.f-reel .fm.contain img{object-fit:contain}
.rl-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:17px;background:linear-gradient(rgba(0,0,0,.5),transparent);z-index:2}
.rl-rail{position:absolute;right:8px;bottom:104px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2}
.rl-rail span,.yt-rail span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600}
.rl-rail span{width:40px}
.rl-rail em,.yt-rail em{font-style:normal;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.rl-bot{position:absolute;left:0;right:0;bottom:0;padding:44px 58px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:2}
.rl-bot .fr-desc{margin:0 0 8px;font-size:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rl-audio{display:flex;align-items:center;gap:6px;font-size:11.5px;overflow:hidden;white-space:nowrap}
.rl-audio span{overflow:hidden;text-overflow:ellipsis}
.frame .fr-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff;padding:4px 12px}
.f-fbpage .fr-btn.ghost{border:0;background:#E4E6EB;color:#111;padding:7px 18px}
.yt-rail span{width:42px;height:auto;background:none;border-radius:0}
.yt-rail span svg{background:rgba(0,0,0,.35);border-radius:50%;padding:8px;box-sizing:content-box;width:26px;height:26px}
.f-fbad .fm.p45{aspect-ratio:4/5}
.f-fbad .fm.land2{aspect-ratio:1.91/1}
.f-fbad .fm.contain video,.f-fbad .fm.contain img{object-fit:contain}
.fr-likes{font-weight:700}
p.fr-likes{margin:0;padding:0 12px 4px;font-size:13px;height:22px}
.pg-body small.fr-likes{font-weight:600}
.f-igpost .fr-cap{height:58px;-webkit-line-clamp:3}
.yt-chan .fr-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;font-size:12.5px}
.f-fbad .fr-who{min-width:0;flex:1}
.f-fbad .fr-who b,.fr-cta b,.f-igpost .fr-head .fr-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-cta>div{min-width:0;flex:1}
.yt-chan .fr-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;min-width:0}
.yt-chan .fr-btn{padding:4px 10px;font-size:11.5px}
@media (max-width:640px){.frame .fr-btn{padding:5px 10px;font-size:11.5px}.fr-cta{gap:6px}}

/* "most presentable" videos: shown as they are, no phone frame */
.slide .f-plain{position:absolute;inset:0;width:auto;box-shadow:none;background:transparent;z-index:1;padding:0}
.f-plain .fm{position:absolute;inset:0;background:transparent}
.f-plain .fm video,.f-plain .fm img{object-fit:contain}
.slide:has(.f-plain){padding:0}


.slide{padding:12px 20px 88px}
.frame{font-size:clamp(12.5px,calc(var(--mw,320px)*.04),16px)}
.f-igpost .fm.land2.contain video,.f-igpost .fm.land2.contain img{object-fit:contain}

.fr-cta>div{overflow:hidden}
.f-igpost .fr-cap{height:auto;min-height:58px;-webkit-line-clamp:5}
.f-fbad .fr-text{height:auto;min-height:52px;-webkit-line-clamp:4}


/* ===================== TOP BAR ===================== */
.quick{display:none}

/* laptop and desktop (1181px and up): one row, the 8 buttons are spread from the logo to the LV/ES/EN switch */
@media (min-width:1181px){
  .menu{flex:1;gap:0;margin-left:clamp(6px,1vw,22px)}
  .menu>li{flex:1 1 0;display:flex;min-width:0}
  .menu>li>.menu-btn{width:100%;justify-content:center;text-align:center;font-size:clamp(12.5px,1.05vw,17.5px);padding:10px clamp(3px,.7vw,14px);gap:4px;line-height:1.12;white-space:normal}
  .menu>li.has-dd>.dd{min-width:max(100%,270px)}
  .menu-wrap{gap:clamp(6px,1vw,18px)}
  .menu-btn .chev{width:12px;height:12px;flex:none}
}

/* phones and tablets (1180px and down): logo, 3 quick buttons, then the 3-line button, all in one row */
@media (max-width:1180px){
  :root{--nav-h:72px}
  .nav-toggle{display:flex}
  .menu-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:20px;padding:16px 18px 32px;background:var(--cream);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s}
  .nav.open .menu-wrap{transform:none;visibility:visible}
  .menu{flex-direction:column;align-items:stretch;margin:0;flex:none;gap:4px}
  .menu-btn{width:100%;justify-content:space-between;font-size:18px;padding:14px 16px}
  .dd{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;margin:0;padding:0 0 8px 12px;min-width:0}
  .has-dd.open>.dd{display:block}
  .has-dd:hover>.dd{opacity:1}
  .has-dd:hover .chev{transform:none}
  .has-dd.open .chev{transform:rotate(180deg)}
  .has-dd::after{display:none}
  .lang{align-self:flex-start}
  .nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:0 12px}
  .brand{grid-column:1}
  .brand img{height:38px;width:auto}
  .nav-toggle{grid-column:3;margin-left:0;width:42px}
  .quick{display:flex;grid-column:2;gap:5px;height:71.12px;width:100%;max-width:600px;justify-self:center;align-items:stretch}
  .quick .has-dd{position:static;flex:1 1 0;min-width:0;display:flex}
  .quick .menu-btn{width:100%;height:71.12px;padding:9.56px 4px;font-size:12px;line-height:1.08;justify-content:center;text-align:center;white-space:normal;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--paper);border-radius:12px;gap:0;letter-spacing:0}
  .quick .menu-btn .chev{display:none}
  .quick .dd{position:absolute;top:100%;left:8px;right:8px;margin-top:4px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:120;max-height:calc(100svh - var(--nav-h) - 16px);overflow-y:auto}
  .quick .has-dd.open>.dd{display:block}
  .quick .has-dd.open>.dd.mega{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 6px}
  .quick .dd a{font-size:15.5px;padding:10px 12px}
  .quick .dd.mega .r4{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
  .menu-btn{font-size:18px}
  .quick .menu-btn{font-size:12px}
  #ddSocial,#ddVideo,#ddBrand{display:none}
  .slide{padding-bottom:84px}
}
@media (max-width:400px){
  .brand img{height:32px}
  .nav{column-gap:6px;padding:0 10px}
  .quick{gap:4px}
  .quick .menu-btn{font-size:10.8px;padding:9.56px 2px;line-height:1.05}
  .nav-toggle{width:38px}
}
@media (max-width:1180px){
  .brand,.quick,.nav-toggle{grid-row:1}
}
@media (max-width:370px){
  .quick .menu-btn{font-size:10px;letter-spacing:-.1px}
  .brand img{height:28px}
  .nav-toggle{width:34px}
}
@media (min-width:600px) and (max-width:1180px){
  .quick .menu-btn{font-size:14.5px}
  .brand img{height:44px}
}

/* portfolio dropdown: keep the wide 3-column layout and never split words with hyphens */
@media (min-width:1181px){
  .menu>li.has-dd>.dd.mega{min-width:min(790px,calc(100vw - 32px));width:max-content}
}
.dd a{hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:normal;white-space:normal}
.dd.mega a{white-space:nowrap}
.contact-list .also{display:block;font-size:.92em;opacity:.85}
@media (min-width:1181px){
  .menu>li.has-dd>.dd:not(.mega){min-width:max(100%,320px)}
}
.contact-list a{font-size:15.5px}
.contact-list a span{min-width:0}

/* Facebook personal profile: cover photo design */
.f-fbcover{background:#fff;border-radius:10px;overflow:hidden;width:var(--mw)}
.f-fbcover .cv-cover{aspect-ratio:900/441;width:100%}
.f-fbcover .cv-cover img{object-fit:cover}
.cv-row{display:flex;align-items:flex-end;gap:12px;padding:0 14px}
.f-fbcover .av.cv-pic{position:relative;z-index:2;width:calc(var(--mw)*.2);height:calc(var(--mw)*.2);margin-top:calc(var(--mw)*-.1);border:4px solid #fff;font-size:calc(var(--mw)*.08);flex:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.cv-id{padding-bottom:4px;min-width:0}
.cv-id b{display:block;font-size:17px;line-height:1.2}
.cv-id small{color:#65676B;font-size:12px}
.cv-btns{display:flex;gap:8px;padding:10px 14px 0}
.cv-btns .fr-btn{background:#1B74E4;border-radius:6px;padding:7px 14px;color:#fff}
.f-fbcover .cv-btns .fr-btn.ghost{background:#E4E6EB;color:#111;border:0;padding:7px 14px}
.cv-tabs{display:flex;gap:16px;padding:10px 14px 0;margin-top:10px;border-top:1px solid #E4E6EB;font-weight:600;font-size:12.5px;color:#65676B}
.cv-tabs span{padding-bottom:8px;border-bottom:3px solid transparent;white-space:nowrap}
.cv-tabs span.on{color:#1B74E4;border-bottom-color:#1B74E4}
.cv-desc{margin:0;padding:0 14px 12px;font-size:12px;color:#333;height:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- service icons in the hero are filters for the slideshow ---- */
.svc-node{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.svc-node.on .ico{background:var(--accent);color:#fff;transform:translateY(-3px) scale(1.08)}
.svc-more{display:none}

/* ---- phones: slideshow + headline + contact button on the very first screen ---- */
@media (max-width:980px){
  .svc-more{position:absolute;right:6px;bottom:calc(var(--strip-h,138px) - 62px);width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
    display:grid;place-items:center;z-index:6;box-shadow:0 2px 10px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s}
  .svc-more.show{opacity:1;pointer-events:auto;animation:nudge 1.5s ease-in-out infinite}
  .svc-more::before{content:"";position:absolute;right:100%;top:-16px;bottom:-16px;width:24px;margin-right:-4px;background:linear-gradient(to left,rgba(22,41,92,.85),transparent);pointer-events:none;z-index:-1}
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (max-width:700px){
  .stage{--strip-h:92px}
  .slides{flex:none;min-height:0;height:clamp(300px,calc(100svh - var(--nav-h) - var(--strip-h) - 218px),560px)}
  .slide{padding:6px 8px 44px}
  .slide-ui{padding:6px 10px}
  .chip{font-size:10.5px;padding:3px 8px}
  .slide-ctrl button{width:32px;height:32px}
  .slide-ctrl button svg{width:16px;height:16px}
  .dots{display:flex;min-width:0;font-size:11px;padding:0 2px}
  .svc-strip{align-items:start;padding:6px 6px 0;grid-auto-columns:72px}
  .svc-line{top:26px;left:36px;width:calc(9*72px - 72px)}
  .svc-node{font-size:10.2px;gap:4px;padding:0 2px;line-height:1.15}
  .svc-node .ico{width:40px;height:40px;box-shadow:0 0 0 4px var(--cobalt)}
  .svc-node .ico svg{width:19px;height:19px}
  .svc-more{bottom:calc(var(--strip-h) - 44px);width:30px;height:30px}
  .cta-panel{padding:14px 16px 26px;align-items:flex-start}
  .cta-panel::before{width:300px;height:300px;right:-160px;top:-160px}
  #ctaIntro{display:flex;flex-direction:column;align-items:flex-start}
  #ctaIntro .eyebrow{display:none}
  #ctaIntro h1{order:1;margin-bottom:16px}
  #ctaIntro .btn-primary{order:2;padding:13px 22px;font-size:16px}
  #ctaIntro .lead{order:3;margin:18px 0 6px}
  #ctaIntro .fine{order:4}
  .cta-inner h1{font-size:clamp(21px,6vw,27px);padding:.4em .45em .2em 1.7em}
}

/* ---- hero headline: mobile shows the question, laptop keeps the tagline ---- */
.only-m{display:none}
@media (max-width:700px){
  .only-d{display:none}
  .only-m{display:inline}
  .slides{height:clamp(280px,calc(100svh - var(--nav-h) - var(--strip-h) - 190px),560px)}
  .slide{padding:4px 8px 40px}
  .cta-panel{padding:12px 14px 14px}
  #ctaIntro h1{margin:4px 0 12px}
  .cta-inner h1{font-size:clamp(14.5px,4.1vw,16.5px);line-height:1.5;padding:.4em .5em .2em 1.9em}
  #ctaIntro .btn-primary{padding:11px 20px;font-size:15.5px}
  /* section labels ("Pakalpojumi" etc.) big enough to read at a glance */
  .kicker{font-size:22px;font-weight:900;letter-spacing:.06em;margin-bottom:22px}
}

/* ---- portfolio: tiny square thumbnails, like a phone photo library; tap one to open it full size ---- */
.masonry{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:4px}
.pcard{margin:0;break-inside:auto;border-radius:3px;aspect-ratio:1/1!important;height:auto}
.pcard.g img{height:100%}
.pcard:hover img,.pcard:hover video{transform:scale(1.08)}
.pcard .cap{padding:18px 6px 5px;font-size:10.5px;font-weight:600;line-height:1.2;opacity:0;transition:opacity .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard:hover .cap,.pcard:focus-visible .cap{opacity:1}
.pcard .play{top:auto;bottom:4px;right:4px;width:18px;height:18px;background:rgba(0,0,0,.55);color:#fff}
.pcard .play svg{width:9px;height:9px;margin-left:1px}
@media (max-width:640px){
  .masonry{grid-template-columns:repeat(4,1fr);gap:3px}
  .pcard{margin:0}
  .pcard .cap{display:none}
}

/* ---- one hero headline for every screen: the small, more natural-looking scribble ---- */
.only-d{display:none}
.only-m{display:inline}
.cta-inner h1{font-size:clamp(22px,1.9vw,28px);line-height:1.5;max-width:min(100%,520px);padding:.45em .6em .25em 2em}
.h2{font-size:clamp(26px,2.5vw,34px);line-height:1.5;max-width:min(100%,30ch)}
.h3{font-size:24px}
@media (max-width:700px){
  .cta-inner h1{font-size:clamp(14.5px,4.1vw,16.5px);line-height:1.5;padding:.4em .5em .2em 1.9em;max-width:100%}
  .h2{font-size:clamp(22px,6.4vw,28px);max-width:100%}
  .h3{font-size:22px}
}

/* web only: the very first note (hero) is bigger than the default, but sized to still fit on screen with no scrolling */
@media (min-width:701px){
  .cta-inner{max-width:600px}
  .cta-inner h1{font-size:clamp(25px,2.3vw,32px);line-height:1.4;max-width:100%;padding:.48em .6em .28em 2.05em}
  .cta-inner h1::after{width:100px;height:28px;margin-left:-50px;top:-16px}
}

/* ---- service icons in the hero: beige circle, bigger picture ---- */
.svc-node .ico{background:var(--sand);width:50px;height:50px}
.svc-node .ico svg{width:32px;height:32px;stroke-width:1.6}
.svc-line{top:43px}
@media (max-width:980px){.svc-line{top:43px}}
@media (max-width:700px){
  .svc-node .ico{width:42px;height:42px}
  .svc-node .ico svg{width:28px;height:28px}
  .svc-line{top:27px}
  .svc-node.on .ico,.svc-node:hover .ico{background:var(--accent);color:#fff}
}
.svc-node.on .ico,.svc-node:hover .ico{background:var(--accent);color:#fff}

/* ---- print-outs: a file window where a mouse pointer clicks the file and it opens ---- */
.f-print{background:transparent;width:var(--mw);box-shadow:none}
.pr-win{background:#F3F1EC;border-radius:10px;overflow:hidden;box-shadow:0 24px 50px -18px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.3)}
.pr-bar{height:30px;background:#E2DFD8;display:flex;align-items:center;gap:6px;padding:0 12px;position:relative}
.pr-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57;position:relative;z-index:1}
.pr-bar i:nth-child(2){background:#FEBC2E}.pr-bar i:nth-child(3){background:#28C840}
.pr-bar span{position:absolute;left:0;right:0;text-align:center;font-size:12px;font-weight:700;color:#555;pointer-events:none}
.pr-body{position:relative;aspect-ratio:16/10;overflow:hidden;background:#FBFAF7}
.pr-files{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:center;padding:0 4%}
.pr-file{width:26%;text-align:center;padding:6px;border-radius:8px}
.pr-file img{display:block;width:100%;aspect-ratio:634/900;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.25);background:#fff}
.pr-file small{display:block;margin-top:6px;font-size:11px;color:#333}
.pr-ripple{position:absolute;left:var(--tx);top:var(--ty);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(27,116,228,.5);opacity:0;z-index:4;pointer-events:none}
.f-print .pr-view.fm{position:absolute;inset:0;z-index:3;background:rgba(15,20,35,.66);opacity:0;display:flex;align-items:center;justify-content:center;transform-origin:var(--tx) var(--ty)}
.f-print .pr-view.fm img{position:relative;inset:auto;width:auto;height:92%;max-width:70%;flex:none;object-fit:contain;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pr-cursor{position:absolute;left:92%;top:96%;z-index:5;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));pointer-events:none}
.f-print .pr-desc{margin:10px 2px 0;font-size:12.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slide.active .pr-cursor{animation:pr-move 6s ease-in-out .7s both}
.slide.active .pr-ripple{animation:pr-rip 6s ease-out .7s both}
.slide.active .pr-file.me{animation:pr-sel 6s .7s both}
.slide.active .f-print .pr-view.fm{animation:pr-open 6s ease-out .7s both}
@keyframes pr-move{
  0%{left:92%;top:96%;opacity:0;transform:scale(1)}
  6%{opacity:1}
  34%{left:var(--tx);top:var(--ty);transform:scale(1)}
  38%{transform:scale(.8)}
  43%{transform:scale(1)}
  60%{left:var(--tx);top:var(--ty);opacity:1}
  100%{left:calc(var(--tx) + 14%);top:calc(var(--ty) + 24%);opacity:1}
}
@keyframes pr-rip{0%,36%{opacity:0;transform:scale(0)}38%{opacity:.9;transform:scale(1)}50%{opacity:0;transform:scale(3.4)}100%{opacity:0}}
@keyframes pr-sel{0%,36%{background:transparent;box-shadow:none}39%,100%{background:rgba(27,116,228,.2);box-shadow:0 0 0 2px rgba(27,116,228,.6)}}
@keyframes pr-open{0%,44%{opacity:0;transform:scale(.4)}60%,100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .f-print .pr-view.fm{opacity:1}
}

/* ---- phone: contact button climbs onto the paper note, freeing room for a bigger slideshow ---- */
@media (max-width:700px){
  .cta-inner h1{padding-bottom:1.15em}
  #ctaIntro h1{margin-bottom:0}
  #ctaIntro .btn-primary{margin:-22px 0 0 12px;position:relative;z-index:4}
  .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--strip-h) - 168px),580px)}
}

@media (max-width:700px){
  #ctaIntro .btn-primary{margin:-22px 12px 0 auto;align-self:flex-end}
  #ctaIntro .fine{align-self:flex-end;text-align:right;margin-right:12px}
}
@media (max-width:700px){
  #ctaIntro .btn-primary{margin-top:-41px}
  .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--strip-h) - 149px),600px)}
}
@media (max-width:700px){
  /* longer Latvian / Spanish text: leave room so the button never covers the last line */
  html[lang="lv"] .cta-inner h1,html[lang="es"] .cta-inner h1{padding-bottom:2.7em}
  html[lang="lv"] .slides,html[lang="es"] .slides{height:clamp(270px,calc(100svh - var(--nav-h) - var(--strip-h) - 179px),600px)}
}

/* ---- phone: squeeze the chrome so the slideshow can be as tall as possible ---- */
@media (max-width:700px){
  :root{--nav-h:64px}
  .quick .menu-btn{height:50px}
  .stage{--strip-h:90px}
  .slide{padding:2px 6px 28px}
  .slide-ui{padding:3px 8px;background:none}
  .slide-ctrl{gap:6px}
  .slide-ctrl button{width:26px;height:26px}
  .slide-ctrl button svg{width:14px;height:14px}
  .chip{font-size:10px;padding:2px 8px}
  .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--strip-h) - 149px),640px)}
  html[lang="lv"] .slides,html[lang="es"] .slides{height:clamp(280px,calc(100svh - var(--nav-h) - var(--strip-h) - 179px),640px)}
}

/* ---- phone: smaller contact button, more room for the slideshow ---- */
@media (max-width:700px){
  #ctaIntro .btn-primary{padding:8px 16px;font-size:14.5px;gap:8px;box-shadow:0 8px 18px -10px rgba(22,41,92,.7)}
  #ctaIntro .btn-primary svg{width:17px;height:17px}
  .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--strip-h) - 141px),660px)}
  html[lang="lv"] .slides,html[lang="es"] .slides{height:clamp(280px,calc(100svh - var(--nav-h) - var(--strip-h) - 171px),660px)}
}
@media (max-width:700px){
  .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--strip-h) - 133px),680px)}
  html[lang="lv"] .slides,html[lang="es"] .slides{height:clamp(280px,calc(100svh - var(--nav-h) - var(--strip-h) - 159px),680px)}
}

/* ---- phone: the service icons stand on both sides of the phone simulation (no bottom row) ---- */
@media (max-width:700px){
  .stage{--strip-h:0px}
  .stage .svc-strip{position:absolute;left:0;right:0;top:0;bottom:30px;height:auto;flex:none;background:none;overflow:visible;z-index:5;pointer-events:none;
    display:grid;grid-template-columns:62px 1fr 62px;grid-template-rows:repeat(10,1fr);grid-auto-flow:row;padding:4px 0;align-items:center}
  .stage .svc-line,.stage .svc-more{display:none!important}
  .stage .svc-node{pointer-events:auto;font-size:9.3px;gap:3px;line-height:1.12;padding:0 2px;align-self:center;text-shadow:0 1px 3px rgba(0,0,0,.85);grid-row:auto}
  .stage .svc-node .ico{width:40px;height:40px;box-shadow:0 0 0 3px rgba(22,41,92,.55)}
  .stage .svc-node .ico svg{width:26px;height:26px}
  .stage .svc-node:nth-child(2){grid-column:1;grid-row:1/span 2}
  .stage .svc-node:nth-child(3){grid-column:1;grid-row:3/span 2}
  .stage .svc-node:nth-child(4){grid-column:1;grid-row:5/span 2}
  .stage .svc-node:nth-child(5){grid-column:1;grid-row:7/span 2}
  .stage .svc-node:nth-child(6){grid-column:1;grid-row:9/span 2}
  .stage .svc-node:nth-child(7){grid-column:3;grid-row:2/span 2}
  .stage .svc-node:nth-child(8){grid-column:3;grid-row:4/span 2}
  .stage .svc-node:nth-child(9){grid-column:3;grid-row:6/span 2}
  .stage .svc-node:nth-child(10){grid-column:3;grid-row:8/span 2}
  .slide{padding:2px 62px 28px}
  .slide-ui{bottom:0}
  .progress{bottom:0}
  /* contact button per language */
  #ctaIntro .btn-primary{margin-right:40px}
  html[lang="lv"] #ctaIntro .btn-primary{align-self:center;margin-left:auto;margin-right:auto}
  html[lang="es"] #ctaIntro .btn-primary{margin-top:-60px;margin-right:12px}
  html[lang="es"] .cta-inner h1{padding-bottom:2.7em}
  #ctaIntro .fine{margin-right:12px}
}
@media (max-width:700px){
  html[lang="es"] .stage .svc-node{font-size:8.4px;padding:0}
  .stage .svc-node>span:last-child{max-width:100%;overflow:hidden;text-overflow:clip}
}

/* ---- colour try-out: blue buttons with beige text / beige pictures ---- */
@media (max-width:1180px){
  .quick .menu-btn{background:var(--cobalt);color:var(--sand);border-color:var(--cobalt);box-shadow:0 4px 10px -6px rgba(22,41,92,.8)}
  .quick .menu-btn .chev{color:var(--sand)}
}
.svc-node .ico{background:var(--cobalt);color:var(--sand);border:2px solid var(--sand);box-shadow:0 0 0 3px rgba(22,41,92,.35)}
.svc-node:hover .ico,.svc-node.on .ico{background:var(--accent);color:#fff;border-color:var(--sand)}
@media (max-width:700px){
  .stage .svc-node .ico{border-width:1.5px;box-shadow:0 0 0 3px rgba(11,20,55,.35)}
}

/* ---- no ring around the circles ---- */
.svc-node .ico,.svc-node:hover .ico,.svc-node.on .ico{border:0;box-shadow:0 3px 10px rgba(0,0,0,.35)}
@media (max-width:700px){.stage .svc-node .ico{border:0;box-shadow:0 2px 8px rgba(0,0,0,.4)}}

/* ---- laptop: top buttons in the same blue / beige style ---- */
@media (min-width:1181px){
  .menu{gap:6px}
  .menu>li>.menu-btn{background:var(--cobalt);color:var(--sand);border-radius:12px;padding:12px clamp(10.56px,calc(.7vw + 7.56px),19.56px);box-shadow:0 4px 10px -6px rgba(22,41,92,.8)}
  .menu>li>.menu-btn .chev{color:var(--sand)}
  .menu>li>.menu-btn:hover,.menu>li.has-dd.open>.menu-btn,.menu>li.has-dd:focus-within>.menu-btn{background:var(--ink);color:#fff}
}

/* ---- laptop / tablet: service circles stand around the phone simulation too ---- */
@media (min-width:701px){
  .stage{--strip-h:0px}
  /* grid-auto-rows:min-content (not a fixed repeat(10,1fr) division of whatever height happens to be
     available) means a row track can never be squeezed smaller than the icon+label it holds - when
     the window is short, align-content:space-between just packs the nodes closer together instead of
     overlapping a neighbour. With repeat(10,1fr), a short window (common once the browser isn't
     maximised) forced every row shorter than its content, so one node's icon/label spilled down into
     the next node's row and visually covered it - worse with longer LV/ES labels that wrap to more lines. */
  .stage .svc-strip{position:absolute;left:0;right:0;top:0;bottom:80px;height:auto;flex:none;background:none;overflow:visible;z-index:5;pointer-events:none;
    display:grid;grid-template-columns:96px 1fr 96px;grid-auto-rows:min-content;align-content:space-between;grid-auto-flow:row;padding:10px 0;align-items:center}
  .stage .svc-line,.stage .svc-more{display:none!important}
  .stage .svc-node{pointer-events:auto;font-size:12px;gap:6px;line-height:1.15;padding:0 4px;align-self:center;text-shadow:0 1px 4px rgba(0,0,0,.85);grid-row:auto}
  .stage .svc-node .ico{width:54px;height:54px}
  .stage .svc-node .ico svg{width:34px;height:34px}
  .stage .svc-node:nth-child(2){grid-column:1;grid-row:1/span 2}
  .stage .svc-node:nth-child(3){grid-column:1;grid-row:3/span 2}
  .stage .svc-node:nth-child(4){grid-column:1;grid-row:5/span 2}
  .stage .svc-node:nth-child(5){grid-column:1;grid-row:7/span 2}
  .stage .svc-node:nth-child(6){grid-column:1;grid-row:9/span 2}
  .stage .svc-node:nth-child(7){grid-column:3;grid-row:2/span 2}
  .stage .svc-node:nth-child(8){grid-column:3;grid-row:4/span 2}
  .stage .svc-node:nth-child(9){grid-column:3;grid-row:6/span 2}
  .stage .svc-node:nth-child(10){grid-column:3;grid-row:8/span 2}
  .slide{padding:12px 96px 84px}
  .slide-ui{bottom:0}
  .progress{bottom:0}
}

/* ---- top buttons: white lettering, slightly larger ---- */
@media (max-width:1180px){
  .quick .menu-btn{color:#fff;font-size:13.2px}
  .quick .menu-btn .chev{color:#fff}
}
@media (max-width:400px){.quick .menu-btn{font-size:12px}}
@media (max-width:370px){.quick .menu-btn{font-size:10px}}
@media (min-width:1181px){
  .menu>li>.menu-btn{color:#fff;font-size:clamp(13px,1.1vw,18px);font-weight:900}
  .menu>li>.menu-btn .chev{color:#fff}
}

/* ---- phone: note + contact button first (right under the top buttons), slideshow underneath ---- */
@media (max-width:700px){
  .hero .cta-panel{order:-1;padding:20px 14px 12px}
  .hero .stage .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--cta-h,190px)),720px)}
  html[lang="lv"] .hero .stage .slides,html[lang="es"] .hero .stage .slides{height:clamp(290px,calc(100svh - var(--nav-h) - var(--cta-h,190px)),720px)}
  #ctaIntro .fine{margin-top:6px;font-size:12px;align-self:flex-end;text-align:right;margin-right:12px}
  html[lang="lv"] #ctaIntro .fine{align-self:center;text-align:center;margin-right:0}
}
@media (max-width:700px){
  #ctaIntro .fine{position:relative;z-index:2;margin-top:10px;line-height:1.25}
  html[lang="lv"] .quick .menu-btn{font-size:10.4px}
}
@media (max-width:370px){html[lang="lv"] .quick .menu-btn{font-size:9.2px}}

/* ---- emphasis inside the scribbled note: bold words and hand-drawn underlines ---- */
.cta-inner h1 b{font-weight:700}
.cta-inner h1 .ul{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C15 1.4 30 5 48 3S80 3.7 99 2' fill='none' stroke='%2316215e' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 6.6C30 5.3 62 7.2 96 5.8' fill='none' stroke='%2316215e' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.7'/%3E%3C/svg%3E") no-repeat 0 100%/100% .34em;
  padding-bottom:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media (max-width:700px){
  .cta-inner h1,html[lang="lv"] .cta-inner h1,html[lang="es"] .cta-inner h1{padding-bottom:2.7em}
}
.ink{word-spacing:.12em}

/* mobile hero headline: sentence 2 is a real block that clears the floated button, so it always renders as
   its own normal full-width line(s) below the button instead of squeezing in beside it (see main.js centerHeroBtn). */
.only-m-s2{display:block;clear:both}

/* ---- phone: note 5 mm higher, small print written on the paper under the button, same carousel size in every language ---- */
@media (max-width:700px){
  .hero .cta-panel{padding:2px 14px 8px}
  .cta-inner h1::after{top:-3px}
  .cta-inner h1,html[lang="lv"] .cta-inner h1,html[lang="es"] .cta-inner h1{padding-bottom:70px;min-height:calc(6.4em + 70px)}
  #ctaIntro{padding-bottom:18px}
  #ctaIntro .btn-primary,html[lang="lv"] #ctaIntro .btn-primary,html[lang="es"] #ctaIntro .btn-primary{margin-top:-68px;padding:6px 13px;font-size:13.5px;gap:6px}
  #ctaIntro .btn-primary svg{width:15px;height:15px}
  html[lang="lv"] #ctaIntro .btn-primary{align-self:flex-end;margin-left:auto;margin-right:10px}
  html[lang="en"] #ctaIntro .btn-primary{margin-right:40px}
  #ctaIntro .fine,html[lang="lv"] #ctaIntro .fine{margin:5px 12px 0 auto;align-self:flex-end;text-align:right;font-family:var(--font-hand);color:var(--pen);font-size:12.5px;line-height:1.25;position:relative;z-index:2}
}
@media (max-width:700px){
  /* tape sits on the top-left corner of the note so it never covers the first line */
  .cta-inner h1::after,#portfolio .h2::after,#contacts .h2::after{}
  .cta-inner h1::after{top:2px;left:-8px;margin-left:0;width:50px;height:18px;transform:rotate(-42deg)}
}

/* ---- circle buttons: beige with a blue picture while hovered, pressed or selected ---- */
.svc-node:hover .ico,.svc-node:active .ico,.svc-node:focus-visible .ico,.svc-node.on .ico{background:var(--sand);color:var(--cobalt)}

/* phone: small print and button on one row, paper trimmed to fit */
@media (max-width:700px){
  html[lang] #ctaIntro{display:grid;grid-template-columns:1fr auto;align-items:start;padding-bottom:4px}
  html[lang] #ctaIntro h1{grid-column:1/-1;grid-row:1;padding-bottom:42px;min-height:calc(6.4em + 42px);margin-bottom:0}
  html[lang] #ctaIntro button.btn-primary{grid-column:2;grid-row:2;align-self:start;justify-self:end;margin:-37px 10px 0 0}
  html[lang] #ctaIntro p.fine{grid-column:1;grid-row:2;align-self:start;justify-self:start;text-align:left;margin:-37px 0 0 34px;max-width:200px;font-size:12px;line-height:1.25;display:flex;align-items:center;min-height:32px}
}

/* phone: no small print, button higher on the note; top buttons match the desktop solid pill (no outline) */
@media (max-width:700px){
  html[lang] #ctaIntro p.fine{display:none}
  html[lang] #ctaIntro h1{padding-bottom:16px;min-height:calc(6.4em + 16px)}
  html[lang] #ctaIntro button.btn-primary{margin:-37px 10px 0 0}
  .quick .menu-btn{background:var(--cobalt);color:var(--sand);border:0;box-shadow:0 4px 10px -6px rgba(22,41,92,.8);font-size:12.6px}
  .quick .menu-btn .chev{color:var(--sand)}
  html[lang="lv"] .quick .menu-btn{font-size:9.9px}
}
@media (max-width:400px){.quick .menu-btn{font-size:10.3px}}
@media (max-width:370px){.quick .menu-btn{font-size:9.6px}html[lang="lv"] .quick .menu-btn{font-size:8.8px}}


/* ---- reviews ---- */
.section.sand{background:var(--sand)}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px);margin-top:34px;align-items:stretch}
.review{position:relative;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 26px;box-shadow:0 14px 30px -22px rgba(11,20,55,.5)}
.review:nth-child(1){transform:rotate(-.35deg)}
.review:nth-child(2){transform:rotate(.3deg)}
.review blockquote{margin:0;font-size:clamp(19.5px,1.5vw,21.5px);line-height:1.6;color:var(--ink)}
.review figcaption{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.review .av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:var(--sand);font-family:var(--font-h);font-weight:700;font-size:20px}
.review .who{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--muted)}
.review .who b{color:var(--ink);font-size:16px}
.review .ver{display:inline-flex;align-items:center;gap:5px;color:var(--cobalt);font-weight:600;font-size:13px;margin-top:2px}
@media (max-width:820px){
  .reviews{grid-template-columns:1fr}
  .review{padding:32px 20px 22px}
  .review:nth-child(n){transform:none}
}
@media (min-width:1181px) and (max-width:1259px){.nav-rev{display:none}}

/* web top bar: every button the same height, text centred, never more than two lines */
@media (min-width:1181px){
  .menu{align-items:center}
  .menu>li{align-self:center}
  .menu>li>.menu-btn{height:44px;padding-top:0;padding-bottom:0;display:flex;align-items:center}
}
@media (min-width:1181px){
  html[lang="lv"] .menu>li>.menu-btn,html[lang="es"] .menu>li>.menu-btn{font-size:clamp(11.5px,.92vw,16px);line-height:1.1}
}


/* ================= round: phone headings, services, reviews; price titles; about letter; footer ================= */
/* price sub-headings (Monthly packages / Price per item / Branding / Cómo es trabajar conmigo):
   all 4 share one plain style - the same sans-serif font as the section kickers (e.g. "SERVICES"),
   bold, blue. No paper/tape note treatment on any of them. "Cómo es trabajar conmigo" additionally
   goes in capital letters, like the kicker label itself. */
.h3{font-family:var(--font-h);font-weight:800;letter-spacing:-.01em;color:var(--cobalt);line-height:1.15;font-size:clamp(22px,2vw,28px);display:block;padding:0;margin:48px 0 16px}
.h3::before{display:none}
#prices h3[data-i18n="prices.process.title"]{text-transform:uppercase}

/* about: personal letter */
.letter p{margin-bottom:14px;max-width:58ch;color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.6}
.letter b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 60%,rgba(255,90,54,.24) 60%);padding:0 .12em;border-radius:2px}
.letter .sign{font-family:var(--font-hand);font-size:30px;line-height:1.1;color:var(--pen);margin:6px 0 22px}

/* footer instagram */
.foot-ig{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);transition:background .2s,color .2s}
.foot-ig:hover{background:var(--accent);color:#fff}

/* reviews: short quote on phones, full quote on the web */
.rq-short,.rq-more{display:none}
@media (max-width:700px){
  .rq-full{display:none}
  .rq-short{display:inline}
  .review.open .rq-full{display:inline}
  .review.open .rq-short{display:none}
  .rq-more{display:inline-flex;align-self:flex-start;background:none;border:0;padding:0;margin-top:-10px;color:var(--cobalt);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .rq-more .t-less{display:none}
  .review.open .rq-more .t-more{display:none}
  .review.open .rq-more .t-less{display:inline}
  .review{gap:16px}
}

@media (max-width:700px){
  /* no outline on the three top buttons - same cream-fill, cobalt-text look as the desktop nav buttons;
     background matches the nav/logo background; ~3mm shorter top and bottom */
  .quick .menu-btn{border:0;background:var(--cream);color:var(--cobalt);box-shadow:none;height:28px}
  .quick .menu-btn .chev{color:var(--cobalt)}
  .quick{height:34px;align-items:center}

  /* every section note: smaller, up on the right, in line with the section label. The note is pulled up
     with position:relative (so it sits level with the kicker), which only ever shifts where it's PAINTED —
     it doesn't move the note's float layout, so nothing else knows to avoid the note in its new spot. A long
     kicker word (e.g. LV "Pakalpojumi", ES "Lista de precios") could stretch far enough right to sit under
     the note's new position and get its tail painted over by the note's opaque card background. Capping the
     kicker's width keeps it short enough to never reach that zone (wrapping to two lines instead). */
  .section .kicker{float:left;margin:12px 22px 0 0;font-size:19px;max-width:150px}
  .section .h2{float:right;clear:none;width:fit-content;max-width:56%;font-size:clamp(14px,4vw,16.5px);margin:0 0 20px auto;padding:.4em .45em .2em 1.7em}
  .section .h2::after,#portfolio .h2::after,#contacts .h2::after,#prices .h2::after{top:-8px;width:50px;height:15px;margin-left:-25px}
  .section .h2 + *{clear:both}

  /* services: one slim button per service, tap to read */
  .cards{grid-template-columns:1fr;gap:8px}
  .card-svc{display:grid;grid-template-columns:42px 1fr 22px;align-items:center;column-gap:12px;padding:9px 14px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .card-svc:hover{transform:none;box-shadow:none}
  .card-svc .ico{width:42px;height:42px;border-radius:12px;margin:0}
  .card-svc .ico svg{width:24px;height:24px}
  .card-svc h3{font-size:18px;margin:0}
  .card-svc::after{content:"";width:8px;height:8px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(45deg) translate(-2px,-2px);justify-self:center;transition:transform .2s}
  .card-svc.open::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .card-svc p{grid-column:1/-1;display:none;margin:10px 0 4px;font-size:15.5px;line-height:1.5}
  .card-svc.open p{display:block}
  .card-svc.open{border-color:var(--cobalt)}

  /* portfolio: smaller topic buttons and thumbnails - padding kept tall enough that each pill
     stays a comfortable ~36-38px thumb target even though the text itself is compact */
  .tabs{gap:6px;margin-bottom:16px}
  .tab{padding:10.5px 14px;font-size:12.5px;border-width:1px}
  .masonry{grid-template-columns:repeat(5,1fr);gap:3px}
}
@media (max-width:700px){
  .card-svc .ico{grid-column:1;grid-row:1}
  .card-svc h3{grid-column:2;grid-row:1}
  .card-svc::after{grid-column:3;grid-row:1}
  .card-svc p{grid-row:2}
}


/* ================= round: notes, chips, dividers, pen highlights, footer ================= */
/* pen (marker) highlights in the About letter: uneven, hand-drawn, red and green */
.letter mark{background-color:transparent;color:var(--ink);font-weight:600;padding:.02em .22em;margin:0 -.06em;background-repeat:no-repeat;background-size:100% 96%;background-position:0 55%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.letter mark.r1{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 12 C40 6 90 14 140 8 S190 10 197 7 L198 30 C160 35 110 28 60 34 S15 32 4 35 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.34%22/%3E%3Cpath d=%22M8 17 C60 12 120 21 194 14 L195 22 C130 28 60 22 9 27 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.153%22/%3E%3C/svg%3E")}
.letter mark.r2{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M2 9 C50 13 100 5 150 10 S188 6 198 11 L196 33 C150 28 100 36 50 30 S12 36 3 31 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.34%22/%3E%3Cpath d=%22M6 14 C70 10 130 17 195 12 L194 20 C120 26 50 20 8 25 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.136%22/%3E%3C/svg%3E")}
.letter mark.r3{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M4 14 C45 8 95 12 150 6 S192 9 199 12 L197 31 C150 36 105 27 55 33 S14 30 2 34 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.34%22/%3E%3Cpath d=%22M10 12 C80 16 140 9 196 15 L195 23 C130 19 60 27 7 22 Z%22 fill=%22%23ff5a36%22 fill-opacity=%220.136%22/%3E%3C/svg%3E")}
.letter mark.g1{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M2 9 C50 13 100 5 150 10 S188 6 198 11 L196 33 C150 28 100 36 50 30 S12 36 3 31 Z%22 fill=%22%234fd167%22 fill-opacity=%220.42%22/%3E%3Cpath d=%22M6 14 C70 10 130 17 195 12 L194 20 C120 26 50 20 8 25 Z%22 fill=%22%234fd167%22 fill-opacity=%220.168%22/%3E%3C/svg%3E")}
.letter mark.g2{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M4 14 C45 8 95 12 150 6 S192 9 199 12 L197 31 C150 36 105 27 55 33 S14 30 2 34 Z%22 fill=%22%234fd167%22 fill-opacity=%220.42%22/%3E%3Cpath d=%22M10 12 C80 16 140 9 196 15 L195 23 C130 19 60 27 7 22 Z%22 fill=%22%234fd167%22 fill-opacity=%220.168%22/%3E%3C/svg%3E")}
.letter mark.g3{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 12 C40 6 90 14 140 8 S190 10 197 7 L198 30 C160 35 110 28 60 34 S15 32 4 35 Z%22 fill=%22%234fd167%22 fill-opacity=%220.42%22/%3E%3Cpath d=%22M8 17 C60 12 120 21 194 14 L195 22 C130 28 60 22 9 27 Z%22 fill=%22%234fd167%22 fill-opacity=%220.189%22/%3E%3C/svg%3E")}

/* dividers between sections */
.divider{display:flex;align-items:center;gap:20px;max-width:620px;margin:46px auto 0;color:var(--cobalt)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:currentColor;opacity:.32}
.divider svg{flex:none;opacity:.78}

/* show-more button for the portfolio (phones only) */
.btn-more{display:none}
.btn-more[hidden]{display:none!important}

/* footer instagram on the right, level with the logo */
.footer{position:relative}

/* services: plain readable titles, not handwriting (harder to read) */
.card-svc h3{font-family:var(--font-h);font-weight:700;letter-spacing:-.005em;color:var(--ink)}

/* gimbal divider: superseded below by the "round 5" background-graphic rules (no reserved space, bigger, sits behind the surrounding cards/text) */

/* auto-lit service icon: same look as hovered, plus a soft glow */
.svc-node.hl .ico{background:var(--sand);color:var(--cobalt);transform:translateY(-3px) scale(1.08);box-shadow:0 0 0 3px rgba(232,223,203,.45),0 0 18px rgba(232,223,203,.75)}

@media (max-width:700px){
  /* notes: a bit bigger, higher up, feel like a design element */
  .section .h2{font-size:clamp(16px,4.6vw,19px);max-width:57%;position:relative;top:-26px;margin-bottom:0}
  .section .h2::after,#portfolio .h2::after,#contacts .h2::after,#prices .h2::after{top:-9px;width:56px;height:17px;margin-left:-28px}
  .section .kicker{letter-spacing:.04em}
  .section .h2 + *{clear:both}

  /* services: small chips, two per row, everything about a third of the screen */
  .cards{grid-template-columns:1fr 1fr;gap:6px;grid-auto-flow:dense}
  .card-svc{grid-template-columns:30px 1fr;padding:6px 8px;column-gap:8px;border-radius:12px;min-height:46px}
  .card-svc .ico{width:30px;height:30px;border-radius:9px;grid-column:1;grid-row:1}
  .card-svc .ico svg{width:18px;height:18px}
  .card-svc h3{font-size:14px;line-height:1.2;grid-column:2;grid-row:1}
  .card-svc h3 .pill{font-size:9px;padding:1px 6px}
  .card-svc::after{display:none}
  .card-svc p{grid-column:1/-1;grid-row:2;margin:8px 2px 4px}
  .card-svc.open{grid-column:1/-1;padding:10px 12px}
  .card-svc.open h3{font-size:17px}

  /* portfolio: first 8 tiles, then a button */
  #grid:not(.expanded)>.pcard:nth-child(n+9){display:none}
  .btn-more{display:block;margin:18px auto 0;padding:10px 26px;border-radius:999px;border:1.5px solid var(--cobalt);background:transparent;color:var(--cobalt);font-weight:700;font-size:15px}
  .divider{margin-top:34px}
  .divider svg{width:auto;height:84px}

  /* footer: logo and Instagram on one row */
  .footer{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:12px}
  .footer img{grid-column:1;grid-row:1}
  .foot-ig{grid-column:2;grid-row:1}
  .footer p{grid-column:1/-1;grid-row:2}
}

/* web: language switch stacked in the top right corner, more room for the menu buttons */
@media (min-width:1181px){
  .lang{flex-direction:column;gap:1px;padding:3px;border-radius:14px}
  .lang button{padding:2px 9px;font-size:11.5px;line-height:1.35;border-radius:10px}
  .menu-wrap{gap:clamp(4px,.6vw,12px)}
  html[lang="lv"] .menu>li>.menu-btn,html[lang="es"] .menu>li>.menu-btn{font-size:clamp(11.5px,.93vw,15.5px)}
}
@media (max-width:700px){
  .section .h2{font-size:clamp(19px,5.6vw,23px);max-width:60%;margin-left:auto;top:-22px}
  .section .h2::after,#portfolio .h2::after,#contacts .h2::after,#prices .h2::after{top:-11px;width:66px;height:20px;margin-left:-33px}
  .section .h2 + *{margin-top:16px}
  .divider svg{height:96px}
}
@media (max-width:700px){.section .h2{max-width:44%}}

@media (max-width:700px){
  /* note shape fix: Servicios/Reseñas/Blog/Sobre mí had long headline text squeezed into the default
     44%-wide note, wrapping into 5-6 narrow lines (tall and skinny instead of a natural note shape).
     Widening just these four (each tuned so it still clears its own kicker label - see the float-overlap
     warning above) lets the same text sit in 2-3 wider lines instead. */
  /* services/reviews: widened further still (2nd round) and given less padding inside the note
     (the note's left/right padding is reserved for the red-margin/tape look - shrinking it on just
     these two claws back real text width without changing the box's outer size), so the same text
     needs noticeably fewer, wider lines than the first round. Re-verified zero kicker overlap across
     lv/en/es at 360-430px with the LV-specific kicker shrink just below. */
  #services .h2{max-width:58%;padding-left:1.4em;padding-right:.35em}
  #reviews .h2{max-width:62%;padding-left:1.4em;padding-right:.35em}
  #blog .h2{max-width:65%}
  #about .h2{max-width:52%}
  /* Portfolio / Lista de precios / Contacto notes keep their width, just sit ~1cm higher */
  #portfolio .h2,#prices .h2,#contacts .h2{top:-59.8px}
  /* contacts: same shape fix as services/reviews above - wider and shorter instead of tall and thin */
  #contacts .h2{max-width:55%;padding-left:1.4em;padding-right:.35em}
  /* price list: the note's own float box still reserves its ORIGINAL (un-shifted) height even
     though position:relative only ever moves where it's painted - so the text below it (cleared
     below the float) was clearing a much lower line than the note visually sits at, leaving a big
     gap. Pulling the float's own reserved bottom edge up closes that gap by about 1cm. */
  #prices .h2{margin-bottom:-37.8px}
  /* section kicker labels (SERVICIOS, PORTFOLIO, ...) a size bigger. overflow-wrap/word-break is a
     safety net: LV has single long words here (e.g. "Pakalpojumi", "Atsauksmes") with nowhere to
     break, so without it a long word would just overflow past max-width instead of respecting it -
     exactly the kind of long-word-in-LV case that caused the services-grid bug before. Letting it
     wrap mid-word if it must keeps it inside its box in every language, so it can never run into
     the note next to it. The widths above are each tuned against the longest of the 3 languages. */
  .section .kicker{font-size:21px;max-width:160px;overflow-wrap:anywhere;word-break:break-word}
  /* LV-only: "Pakalpojumi"/"Atsauksmes" are the single longest unbreakable kicker words on the
     whole site, and they're what capped how wide the services/reviews notes above could go. A
     smaller kicker just for these two sections, just in Latvian, buys the extra note width without
     touching the kicker in EN/ES (where it was never the bottleneck) or in LV elsewhere. */
  html[lang="lv"] #services .kicker,html[lang="lv"] #reviews .kicker{font-size:15px;max-width:108px}
}
/* "Lista de precios" is 3 words - too wide to also go bigger and still fit one line next to its
   note, so it keeps the smaller size but gets enough room to stop wrapping to 2 lines. Only done
   from 405px up - on narrower phones there just isn't room before the note and forcing one line
   would run the text under it, so it falls back to wrapping normally there. */
@media (min-width:405px) and (max-width:700px){
  #prices .kicker{font-size:19px;max-width:210px;white-space:nowrap}
}

/* prices (mobile): the "how working with me looks" intro text above the numbered steps, centered -
   same as the web version already does; the steps themselves stay left-aligned (title+number+text
   together read better that way), only the lead paragraph is centered. */
@media (max-width:700px){
  #prices p[data-i18n="prices.process.lead"]{text-align:center}
}

/* mobile hero note: drop the notebook-paper card, keep just the handwritten line + the button. The button is a real float, so text runs full width and only narrows beside it. It's vertically centered against the headline by JS (centerHeroBtn in main.js), which moves the button node itself to sit mid-way through the wrapped text — a margin-top push doesn't work here: a float's exclusion zone is its full margin box, so pushing it down with margin still blocks text above it, leaving a blank gap (that was the bug reported after the first attempt). Desktop gets an order fix below so the button being a different DOM sibling doesn't move it there. */
@media (max-width:700px){
  .cta-inner h1{background:none;box-shadow:none;border-radius:0;transform:none}
  .cta-inner h1::before,.cta-inner h1::after{content:none}
  html[lang] #ctaIntro{display:block;padding-bottom:0;position:relative}
  html[lang] #ctaIntro h1{padding:0;min-height:0;margin:0;max-width:100%}
  html[lang] #ctaIntro button.btn-primary{float:right;margin:2px 0 0 16px;width:auto;padding:10px 18px;font-size:14px;line-height:1.2;white-space:nowrap;text-align:center;gap:8px}
  html[lang] #ctaIntro button.btn-primary svg{width:15px;height:15px;flex:none}
  .hero .cta-panel{padding:1px 14px 8px}
}
/* desktop: keep h1 → button → fine in that visual order even though the button now comes first in the markup */
@media (min-width:701px){
  #ctaIntro{display:flex;flex-direction:column;align-items:flex-start}
  #ctaIntro h1{order:1}
  #ctaIntro .btn-primary{order:2}
  #ctaIntro .fine{order:3}
}

/* web: the section kicker becomes the real, visible heading; the note sits beside it, at the same
   level (same idea as mobile). Restored to its original size/weight/letter-spacing - the only
   actual change is capital letters instead of none, which is what was asked for. */
@media (min-width:701px){
  .section .kicker{float:left;clear:none;margin:8px 0 0;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:0;text-transform:uppercase;font-family:var(--font-h);font-weight:800;color:var(--cobalt)}
  .dark .kicker{color:var(--sand)}
  .section .h2{float:right;clear:none;margin:0 0 28px}
  .section .h2 + *{clear:both}
}

/* web: reviews shrunk to about 2/3 of their previous size */
@media (min-width:701px){
  .reviews{max-width:800px;gap:20px}
  .review{padding:20px 20px 18px;gap:16px}
  .review blockquote{font-size:clamp(10.5px,.85vw,12px);line-height:1.55}
  .review figcaption{gap:10px;padding-top:12px}
  .review .av{width:32px;height:32px;font-size:14px}
  .review .who{font-size:10px;gap:1px}
  .review .who b{font-size:11px}
  .review .ver{font-size:9.5px;gap:3px;margin-top:1px}
}

/* web: portfolio grid shows the first 12 tiles, then a "show more" button reveals the rest */
@media (min-width:701px){
  #grid:not(.expanded)>.pcard:nth-child(n+25){display:none}
  .btn-more{display:block;margin:32px auto 0;padding:12px 30px;border-radius:999px;border:1.5px solid var(--cobalt);background:transparent;color:var(--cobalt);font-weight:700;font-size:15.5px;cursor:pointer}
  .btn-more:hover{background:var(--cobalt);color:#fff}
}

/* web: services are click-to-open buttons too, same idea as the phone version */
@media (min-width:701px){
  .card-svc{cursor:pointer;position:relative}
  .card-svc p{display:none;margin-top:6px}
  .card-svc.open p{display:block}
  .card-svc::after{content:"";position:absolute;top:34px;right:28px;width:9px;height:9px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(45deg);transition:transform .2s}
  .card-svc.open::after{transform:rotate(-135deg)}
}

/* web nav buttons: same colour scheme as the mobile quick buttons (cream fill, blue outline and text) */
@media (min-width:1181px){
  .menu>li>.menu-btn{background:var(--cream);color:var(--cobalt);border:0;box-shadow:none}
  .menu>li>.menu-btn .chev{color:var(--cobalt)}
  .menu>li>.menu-btn:hover,.menu>li.has-dd.open>.menu-btn,.menu>li.has-dd:focus-within>.menu-btn{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
  .menu>li>.menu-btn:hover .chev,.menu>li.has-dd.open>.menu-btn .chev,.menu>li.has-dd:focus-within>.menu-btn .chev{color:#fff}
}

/* ================= round 5 ================= */

/* button heights: mobile top-3 buttons ~1mm thicker again, web nav buttons ~1mm thinner still */
@media (max-width:700px){
  .quick .menu-btn{height:51.12px}
  .quick{height:57.12px}
}
@media (min-width:1181px){
  .menu>li>.menu-btn{height:51.12px}
}

/* web nav buttons: fixed height:51.12px above + padding-top/bottom:0 (set earlier) left zero room for a
   3-word label like "Brand identity design" - at these widths that label wraps to 2-3 lines, and 3
   lines at this font size add up to MORE than 51px tall, so the text was overflowing its own pill with
   no breathing room top or bottom (read as "no free space around them"). Also the 6px gap between
   buttons put their borders almost touching, with the whole row reading as one solid block instead of
   separate buttons. Let each pill grow to fit its own label (min-height, not height, and real vertical
   padding restored) and open the row out with a real gap. */
@media (min-width:1181px){
  .menu{gap:12px}
  .menu>li>.menu-btn{height:auto;min-height:51.12px;padding:9px clamp(12px,1.1vw,20px);line-height:1.28}
}

/* web nav buttons: same width AND same height for every button, not just some. The 9 buttons used
   flex:1 1 auto, so each one's own content set its own width (a short label like "Blog" stayed
   narrow, a long one like "Social media managing" stretched wide) - visibly different-sized pills in
   one row. flex:1 1 0 (above, .menu>li) makes every column exactly equal width regardless of label
   length. That still left uneven HEIGHTS, because the longest labels wrap to more lines than the
   short ones at any given width - fixed with align-items:stretch on the row so every button's pill
   matches the tallest one, plus a touch smaller font so the longest labels need fewer wrapped lines
   in their narrower equal-width column. */
@media (min-width:1181px){
  .menu{align-items:stretch}
  .menu>li{align-self:auto}
  .menu>li>.menu-btn{height:100%}
}

/* services (web): note higher, lead paragraph flows up under the heading (beside/under the note, not pushed below it), buttons much more compact */
@media (min-width:701px){
  #services .h2{margin-top:-37.8px}
  /* the lead paragraph only needs to clear the kicker (the actual "Services" title) - clearing
     the note too (the default .section .h2 + * rule) makes it wait for the note's full height,
     which reads as a big gap under the title even though the note itself sits higher up */
  #services .lead2{clear:left}
  /* the card grid, unlike the lead paragraph, must never share a row with the floated note: if the
     note (h2) wraps to extra lines - which happens with longer LV/ES text at plenty of ordinary
     desktop widths, not just at some narrow edge case - it can still be floating by the time the
     grid starts, and the grid then only gets the leftover width beside it, silently collapsing from
     2-3 columns down to 1 even though there's a full row of space available just below the note. */
  #services .cards{clear:both}
  .card-svc{padding-top:2px;padding-bottom:2px}
}

/* gimbal graphic: redesigned to look like a real gimbal again (phone, roll + yaw motors, handle with grip and trigger), bigger, and turned into a true background element with no reserved space — it sits behind the services cards and the free space below them, and can extend under text/buttons on both phone and web */
#services .wrap{position:relative;isolation:isolate}
.divider-gimbal{display:block;position:absolute;left:50%;transform:translateX(-50%);margin:0;max-width:none;pointer-events:none;z-index:-1;color:var(--cobalt);bottom:calc(0px - clamp(64px,8vw,110px) - 16.5vw)}
.divider-gimbal::before,.divider-gimbal::after{content:none}
.divider-gimbal svg{display:block;opacity:.6;width:14.85vw;height:auto;transform:rotate(45deg)}

/* portfolio & reviews (web): notes bigger by 1cm on every side, moved up 1cm and left 2cm */
@media (min-width:701px){
  #portfolio .h2{
    margin:-75.6px 75.6px 28px 0;
  }
}

/* reviews (web): shifted 2cm back to the right (relative to the thumbs-up icon) by dropping the
   old margin-right, and shrunk down to the site's standard note size/padding/text ratio instead of
   the old custom fixed box - smaller note, text sized to match it like every other note does */
@media (min-width:701px){
  #reviews .h2{
    margin:-93.8px 0 28px;
  }
}
@media (max-width:700px){
  /* this used to be the old fixed-size custom box mentioned above, left over with a huge fixed-pixel
     padding (46/50/43/75px) that was never cleaned up - it was silently overriding the normal
     em-based note padding, eating most of the box in empty space and forcing the short review quote
     to wrap across far more lines than it needed (the real cause of the oversized, mostly-empty
     "big paper, small letter" note). Only the vertical position needs to live here now; width,
     padding and font-size all come from the shared note rules like every other section. */
  #reviews .h2{position:relative;top:-59.8px}
}

/* reviews (web): cards fill the full width of the page again (keeping the smaller text/padding) */
@media (min-width:701px){
  .reviews{max-width:none}
}

/* price list (web): note higher, package feature lists run in two columns (more horizontal, less vertical stacking) */
@media (min-width:701px){
  #prices .h2{margin:-75.6px 0 28px}
  .plan ul{grid-template-columns:repeat(2,1fr);column-gap:16px}
}

/* prices (web): "what working with me looks like" intro (title + lead) centered, and the numbered
   step list centered as a block in the middle of the page - step text itself stays left-aligned
   next to its number, since centering multi-line sentence text would be unreadable */
@media (min-width:701px){
  #prices h3[data-i18n="prices.process.title"],
  #prices p[data-i18n="prices.process.lead"]{text-align:center}
  /* same heading size as the section kicker ("Cenrādis") beside it */
  #prices h3[data-i18n="prices.process.title"]{font-size:clamp(26px,2.6vw,34px)}
  /* text-align only centers the lines of text inside the paragraph's own box - the box itself
     still sat at the left edge because .lead2's max-width:60ch has no auto margins, so the whole
     paragraph looked left-anchored even with its text centered. Centering the box itself too. */
  #prices p[data-i18n="prices.process.lead"]{margin-left:auto;margin-right:auto}
  #prices .process{margin:12px auto 0}
  /* the "Ask for an offer" button right after the list was left hugging the page's left edge while
     everything above it is now centered - centered to match the title/lead/list above it */
  #prices .wrap>a.btn-primary{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
}

/* prices (web): "Price per item" laid out like the packages above it - a 2-column grid of its own
   cards (3 rows of 2) instead of one long list, each row's title/description/price stacked in its
   own bordered card matching the .plan card style. Same full-bleed treatment as the monthly
   package cards above it (#prices .plans.two), so the columns are just as wide, not capped narrow. */
@media (min-width:701px){
  #prices .table{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    background:none;
    border:0;
    border-radius:0;
    overflow:visible;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:clamp(18px,4vw,48px);
    padding-right:clamp(18px,4vw,48px);
    box-sizing:border-box;
  }
  #prices .tr{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:14px 26px;
  }
  #prices .tr em{font-size:24px}
}

/* blog (web): note higher; new decorative graphic (someone reclining in a chair, reading on a tablet) centered in the empty space above the heading, same unfilled blue-outline style as the gimbal, sitting behind the text/buttons without shifting the rest of the section */
@media (min-width:701px){
  #blog .h2{margin:-75.6px 0 28px}
}
#blog .wrap{position:relative;isolation:isolate}
.blog-graphic{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);margin:0;pointer-events:none;z-index:-1;opacity:.45}
.blog-graphic svg{display:block;width:150px;height:auto}
/* on tablet/desktop the graphic was tall enough that its bottom third - the crossed legs, the whole
   point of the redraw - fell behind the opaque "Coming soon" cards below and was completely hidden
   (z-index:-1 puts it behind everything in the section, so an opaque card painted right over the
   legs). Measured the real overlap (27-35% of the graphic's height, worst case at the top of each
   breakpoint) and sized it down so the full figure, legs included, always clears the card row with
   margin to spare - confirmed with no overlap at any width from 701px up. */
@media (min-width:701px){
  .blog-graphic{top:-30px;transform:translateX(-50%) rotate(-3deg)}
  .blog-graphic svg{width:112px}
}
@media (min-width:1181px){
  .blog-graphic{top:-40px}
  .blog-graphic svg{width:130px}
}
/* blog (mobile): ~3x bigger, and moved so its centre sits in the empty band between the Prices "Ask for an offer" button and the Blog note — the rest can bleed up under that button and down under the note, same idea as the gimbal/thumbs-up */
@media (max-width:700px){
  .blog-graphic{top:-245px}
  .blog-graphic svg{width:auto;height:340px}
}

/* about (web): note higher; the letter reads as handwritten too, same style as the note, keeping every emoji and highlight colour as they are */
@media (min-width:701px){
  #about .h2{margin:-75.6px 0 28px}
  .letter p{font-family:var(--font-hand);color:var(--pen);font-size:clamp(19px,1.5vw,22px);line-height:1.55}
}

/* about (web): the kicker and note float inside .about-head, which never gets cleared - so the
   letter's first line was flowing into the leftover space beside them instead of starting cleanly
   on its own line underneath (very visible in Latvian, where "Par mani" is short enough to leave
   room for "Esmu cilvēks aiz" right next to it). Clear both floats before the letter starts. */
@media (min-width:701px){
  #about .letter{clear:both}
}

/* services (web): the first note - text sized up (the padding is plain em-based, so it scales
   with the bigger font on its own without an extra flat "+1cm" on top - that combination is what
   made the paper balloon last time). margin-top for the 1cm lift is already set above. */
@media (min-width:701px){
  #services .h2{
    font-size:clamp(30px,2.8vw,38px);
  }
}

/* services (web): the icon was stacking above the title instead of sitting beside it (icon is a
   grid box with margin-bottom, so it renders as its own block), and with padding-top/bottom
   squeezed to 2px (round 5) the icon nearly touched the card's top/bottom edge. Make the card a
   row - icon then title, centred together - with real breathing room restored on every side; the
   description still drops to its own full-width line underneath when a card is opened. */
@media (min-width:701px){
  .card-svc{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;row-gap:8px;padding:24px 30px 24px 26px}
  .card-svc .ico{margin-bottom:0;flex:none}
  /* flex-wrap's wrap decision is made from each item's CONTENT width (flex-basis:auto resolves to
     the title's full text width), before any shrinking happens - so a long title ("management",
     "eye-catching") never fit next to the icon on paper and the whole title fell to its own line
     below the icon, even though it could easily have shrunk to fit. flex-basis:0 (not auto) makes
     the title start from zero for that wrap check and grow to fill the row instead, so it always
     stays beside the icon and only its own text wraps. This is why only the few cards with short
     titles ("Real estate tours", "Graphic design", "Logo design") ever looked centered - the rest
     were silently stacked underneath. */
  .card-svc h3{margin-bottom:0;flex:1 1 0;min-width:0;padding-right:20px}
  .card-svc p{flex-basis:100%;width:100%;margin-top:2px}
  .card-svc::after{top:50%;right:28px;margin-top:-5px;transform:rotate(45deg)}
  .card-svc.open::after{transform:rotate(-135deg)}
}

/* contacts (web): note higher */
@media (min-width:701px){
  #contacts .h2{margin:-75.6px 0 28px}
}

/* ================= round 6 ================= */

/* services: the intro line is web-only now (removed on phones) */
@media (max-width:700px){
  #services .lead2{display:none}
}

/* ================= round 7 ================= */

/* services (mobile): with the intro line hidden, the card grid is the element right after the note now — it needs its own clear:both (the old rule only cleared the now-hidden lead2), otherwise it squeezes into the leftover space beside the floated note instead of sitting below it. Note also nudged up 5mm. */
@media (max-width:700px){
  #services .cards{clear:both}
  #services .h2{margin-top:-18.9px}
}

/* portfolio: the lead paragraph flows up under the heading too, same idea as services */


/* thumbs-up divider after portfolio: bigger, and a background element with no reserved space, same idea as the gimbal */
#portfolio .wrap{position:relative;isolation:isolate}
.divider-like{display:block;position:absolute;left:50%;transform:translateX(-50%);margin:0;pointer-events:none;z-index:-1;color:var(--cobalt)}
.divider-like::before,.divider-like::after{content:none}
.divider-like svg{display:block;opacity:.6}
@media (max-width:700px){
  .divider-like{bottom:-16px}
  .divider-like svg{width:auto;height:120px;stroke-width:.08}
}
@media (min-width:701px){
  #portfolio .wrap{padding-bottom:0}
  .divider-like{bottom:-137px}
  .divider-like svg{width:130px;height:auto;stroke-width:.17}
}
@media (min-width:1181px){
  #portfolio .wrap{padding-bottom:0}
  .divider-like{bottom:-185px}
  .divider-like svg{width:150px;stroke-width:.23}
}

/* reviews (web): bigger quote text, and the same short-quote / "read more" toggle used on phones */
@media (min-width:701px){
  .review blockquote{font-size:clamp(19px,1.35vw,21px);line-height:1.58}
  .rq-full{display:none}
  .rq-short{display:inline}
  .review.open .rq-full{display:inline}
  .review.open .rq-short{display:none}
  .rq-more{display:inline-flex;align-self:flex-start;background:none;border:0;padding:0;margin-top:6px;color:var(--cobalt);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .rq-more .t-less{display:none}
  .review.open .rq-more .t-more{display:none}
  .review.open .rq-more .t-less{display:inline}
}

/* mobile hero: the button now sits at mid-height on the right, so give the note a little more size with the space that frees up */
@media (max-width:700px){
  .cta-inner h1{font-size:clamp(16px,4.6vw,18.5px)}
}

/* about (mobile): .about-head is now its own full-width row above the photo, a direct sibling of
   .about-photo/.about-text - the DOM order (head, photo, text) already matches the wanted visual
   order, so no display:contents/order reshuffling is needed any more. */
@media (max-width:640px){
  #about{padding-top:calc(64px + 38px)}
  /* same float/clear gap issue as the price list note above: the shifted-up note still reserves its
     un-shifted height, so the photo row below was clearing a line further down than the note's
     actual visual bottom - pulling the reserved bottom edge up closes about 1cm of that gap. */
  .about-head .h2{margin-top:-75.6px;margin-bottom:-37.8px}
}

/* portfolio (mobile): the thumbs-up was overlapping the "show more" button — move it fully below the button instead, with room reserved so it doesn't get cut off by the Reviews section that follows, and make it bigger */
@media (max-width:700px){
  #portfolio .wrap{padding-bottom:0}
  .divider-like{bottom:-139px}
  .divider-like svg{height:150px;stroke-width:.08}
}

/* prices: "what working with me looks like" step list */
.process{display:grid;gap:16px;max-width:640px;margin-top:12px}
.process li{display:flex;gap:14px;align-items:flex-start}
.process-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-family:var(--font-h);font-weight:800;font-size:14px}
.process li p{margin:0;padding-top:4px;color:var(--muted);font-size:16px;line-height:1.55}