:root{
  --pink:#FF2AA1; --pink-deep:#D4147F; --pink-soft:#FFD3EC;
  --mint:#BDF2EE; --mint-soft:#E6FAF8;
  --ink:#1B1B1F; --gray:#55555C; --card:#F5F5F6; --line:#E3E3E6;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px; --w:1120px;
  --bg:#fff; --surface:#fff; --chip:#fff; --link:var(--pink-deep); --tag-ink:#8A0B52;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; }
h1,h2,h3{ margin:0; line-height:1.2; }
p{ margin:0 0 .9em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg); padding:.6rem 1rem; z-index:200; }
.skip:focus{ left:1rem; top:1rem; }

/* PROFILE */
.profile{ text-align:center; padding:3.2rem 1.25rem 1.8rem; }
.avatar{ width:160px; height:160px; border-radius:50%; object-fit:cover; margin:0 auto 1.1rem; border:4px solid var(--pink); display:block; }
.profile h1{ font-size:clamp(2rem,5vw,2.9rem); font-weight:800; letter-spacing:-.02em; }
.role{ font-size:1.15rem; font-weight:500; margin:.4rem 0 0; }
.visitors{
  display:inline-flex; align-items:center; gap:.5rem; margin:.9rem 0 0; padding:.35rem .9rem;
  border-radius:999px; background:var(--mint-soft); border:1px solid var(--mint);
  font-size:.9rem; color:var(--gray);
}
.visitors[hidden]{ display:none; }
.visitors strong{ color:var(--link); font-weight:800; font-variant-numeric:tabular-nums; }

main{ max-width:var(--w); margin:0 auto; padding:0 1.25rem; }

/* TOOLS: single animated row */
.tools{
  border:2px solid var(--line); border-radius:var(--r); padding:1.1rem 0 1.2rem;
  background:linear-gradient(100deg,var(--mint) 0%,var(--mint-soft) 55%,var(--surface) 100%);
  margin-bottom:1.6rem; overflow:hidden;
}
.tools-title{ font-size:1rem; font-weight:800; margin:0 1.6rem .8rem; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.track{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.6rem; }
.track li{
  flex:none; white-space:nowrap; background:var(--chip); border:1px solid var(--line);
  border-radius:999px; padding:.4rem 1rem .4rem .55rem; font-size:.88rem; font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}
.track li img{ height:22px; width:auto; border-radius:0; display:block; }
.track li.wordmark{ padding:.4rem .9rem; }
.track li.logo-only{ padding:.4rem .6rem; }
.track li.round img{ border-radius:5px; }
.track li.wordmark img{ height:26px; }
.track.is-animated{ flex-wrap:nowrap; width:max-content; padding:0; animation:scroll 64s linear infinite; }
.track.is-animated li{ margin-right:.5rem; }
.marquee:hover .track.is-animated{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* BENTO (summaries) */
.bento-wrap{
  border:2px solid var(--line); border-radius:28px; padding:2rem;
  background:linear-gradient(90deg,var(--surface) 0%,var(--pink-soft) 40%,#FF8FCB 100%);
}
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem; }
.card{
  position:relative; background:var(--card); border-radius:var(--r); padding:1.5rem;
  min-width:0; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(212,20,127,.22); }
.card:focus-within{ box-shadow:0 0 0 3px var(--ink); }
.card h2{ font-size:1.2rem; font-weight:800; margin:.9rem 0 .5rem; }
.card p{ color:var(--gray); font-size:.95rem; margin:0 0 1rem; }
.open{ background:none; border:0; padding:0; cursor:pointer; text-align:left; font-weight:800; }
.open:focus-visible{ outline:none; }
.open::after{ content:''; position:absolute; inset:0; border-radius:var(--r); } /* whole card clickable */
.ico{
  width:42px; height:42px; border-radius:10px; background:var(--pink); color:#fff;
  display:inline-grid; place-items:center; font-size:1.15rem; flex:none;
}
.more-cue{ margin-top:auto; font-weight:700; font-size:.9rem; color:var(--link); }
.more-cue::after{ content:' \2192'; transition:margin .2s ease; }
.card:hover .more-cue::after{ margin-left:.3rem; }

.card-about{ grid-column:span 5; grid-row:span 2; background:var(--pink-deep); min-height:340px; }
.card-about .ico{ background:#fff; color:var(--pink-deep); }
.card-about h2,.card-about p,.card-about .lead,.card-about .more-cue,.card-about .mini{ color:#fff; }
.card-about .lead{ font-size:1.2rem; font-weight:700; line-height:1.4; }
.mini{ margin:0 0 1.2rem; display:grid; gap:.35rem; font-size:.93rem; }
.mini li::before{ content:'\2713'; margin-right:.5rem; font-weight:800; }
.card-projects,.card-services{ grid-column:span 7; }
.card-how,.card-quote,.card-testi{ grid-column:span 4; min-height:190px; }

/* BUTTONS */
.btn{
  display:inline-block; font-weight:800; font-size:.92rem; text-decoration:none; text-align:center;
  padding:.75rem 1.4rem; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-pink{ background:var(--pink-deep); color:#fff; }
.btn-mint{ background:var(--mint); border-color:#5BCFC6; color:var(--ink); }

/* CTA BAR */
.cta-bar{
  max-width:var(--w); margin:1.6rem auto 6rem; width:calc(100% - 2.5rem);
  border:2px solid var(--line); border-radius:var(--r); padding:1.2rem 1.6rem;
  background:linear-gradient(100deg,var(--mint) 0%,var(--mint-soft) 55%,var(--surface) 100%);
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
}
.social{ display:flex; gap:.8rem; }
.social a{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--chip); border:1px solid var(--line); transition:transform .15s ease; }
.social a:hover{ transform:translateY(-2px); }
.social img{ display:block; }

/* DETAIL SHEETS */
.sheet{
  border:0; padding:0; border-radius:26px; width:min(720px,calc(100% - 2rem));
  max-height:calc(100dvh - 3rem); color:var(--ink); background:var(--surface);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.sheet[open]{ display:flex; flex-direction:column; animation:slideIn .32s cubic-bezier(.2,.7,.2,1); }
.sheet[open]::backdrop{ animation:fadeIn .32s ease-out; }
.sheet.closing{ animation:slideOut .2s ease-in forwards; }
.sheet.closing::backdrop{ animation:fadeOut .2s ease-in forwards; }
.sheet::backdrop{ background:rgba(60,5,35,.55); backdrop-filter:blur(3px); }
@keyframes slideIn{ from{ opacity:0; transform:translateY(24px); } }
@keyframes slideOut{ to{ opacity:0; transform:translateY(24px); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes fadeOut{ to{ opacity:0; } }
.sheet-head{
  display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--surface),var(--pink-soft));
  flex:none;
}
.sheet-head h2{ font-size:1.25rem; font-weight:800; flex:1; }
.close{
  width:40px; height:40px; border-radius:50%; border:0; background:var(--surface); font-size:1.6rem; line-height:1;
  cursor:pointer; box-shadow:0 0 0 1px var(--line);
}
.close:hover{ background:var(--pink-soft); }
.sheet-body{ padding:1.5rem 1.6rem 1.8rem; overflow:auto; }
.sheet-body h3{ font-size:1rem; font-weight:800; }
.prose p{ max-width:62ch; }
.prose h3{ margin:1.4rem 0 .6rem; }
.lead{ font-size:1.1rem; font-weight:600; }
.small{ font-size:.9rem; color:var(--gray); }
.bullets{ display:grid; gap:.35rem; margin:.5rem 0 1rem; }
.bullets li{ position:relative; padding-left:1.1rem; font-size:.94rem; }
.bullets li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--pink); }

.project-list{ display:grid; gap:.9rem; margin-bottom:1.4rem; }
.project-list li{ background:var(--card); border-radius:16px; padding:1.1rem 1.2rem; }
.project-list p{ font-size:.92rem; color:var(--gray); margin:.35rem 0 0; }
.tag{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--pink-soft); color:var(--tag-ink); border-radius:999px; padding:.15rem .65rem; margin-bottom:.5rem;
}
.service-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem; margin-bottom:1.4rem; }
.service-list>li{ border-left:3px solid var(--pink); padding-left:1rem; }
.price{ font-weight:700; font-size:.88rem; }

.steps{ counter-reset:s; display:grid; gap:1.1rem; margin-bottom:1.6rem; }
.steps li{ counter-increment:s; position:relative; padding-left:3rem; }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:800;
}
.steps p{ margin:.15rem 0 0; color:var(--gray); font-size:.94rem; }

.form{ display:grid; gap:.8rem; margin:1rem 0; }
.form label{ font-size:.85rem; font-weight:600; display:grid; gap:.3rem; }
.form input,.form select,.form textarea{
  font:inherit; font-size:.95rem; padding:.65rem .8rem; border:1.5px solid var(--line);
  border-radius:10px; background:var(--surface); width:100%;
}
.form textarea{ resize:vertical; }

.testi-list{ display:grid; gap:1rem; }
.testi-list figure{ margin:0; background:var(--card); border-radius:16px; padding:1.2rem; }
.testi-list blockquote{ margin:0 0 .7rem; font-size:.95rem; }
.testi-list blockquote::before{ content:'\201C'; color:var(--link); font-weight:800; font-size:1.4em; line-height:0; margin-right:.1em; }
.testi-list figcaption{ font-size:.85rem; font-weight:700; }
.testi-list figcaption span{ display:block; font-weight:500; color:var(--gray); }

/* FAQ CHAT */
.chat-fab{
  cursor:pointer;
  display:flex; align-items:center; gap:.6rem; background:var(--surface); border:2px solid var(--pink);
  border-radius:999px; padding:.3rem 1.1rem .3rem .3rem; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 20px rgba(212,20,127,.3);
}
.chat-fab img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.faq{
  position:fixed; right:1.25rem; bottom:5.6rem; z-index:70; width:min(380px,calc(100% - 2.5rem));
  max-height:min(560px,calc(100dvh - 7.5rem)); display:flex; flex-direction:column;
  background:var(--surface); border-radius:22px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
  animation:slideIn .28s cubic-bezier(.2,.7,.2,1);
}
.faq[hidden]{ display:none; }
.faq.closing{ animation:slideOut .2s ease-in forwards; }
.faq-head{
  display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; color:#fff;
  background:linear-gradient(90deg,var(--pink-deep),#8B2BE2);
}
.faq-head img{ width:40px; height:40px; border-radius:50%; }
.faq-head div{ flex:1; display:grid; line-height:1.25; }
.faq-head span{ font-size:.78rem; opacity:.9; }
.faq-head .close{ width:34px; height:34px; font-size:1.4rem; color:var(--ink); }
.faq-log{ padding:1rem; overflow:auto; display:flex; flex-direction:column; gap:.6rem; flex:1; min-height:120px; }
.msg{ max-width:86%; padding:.6rem .85rem; border-radius:16px; font-size:.9rem; line-height:1.45; }
.msg.bot{ background:var(--card); border-bottom-left-radius:4px; align-self:flex-start; }
.msg.user{ background:var(--pink-deep); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.msg.typing{ letter-spacing:.2em; color:var(--gray); }
.faq-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.2rem 1rem .8rem; max-height:150px; overflow:auto; }
.faq-chips button{
  background:var(--surface); border:1.5px solid var(--pink-deep); color:var(--link); border-radius:999px;
  padding:.35rem .8rem; font-size:.82rem; font-weight:600; cursor:pointer; text-align:left;
}
.faq-chips button:hover{ background:var(--pink-soft); }
.faq-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.7rem 1rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--gray); }
.faq-mail{ font-weight:800; color:var(--link); text-underline-offset:4px; }

/* RESPONSIVE */
@media (max-width:960px){
  .card-about,.card-projects,.card-services,.card-how,.card-quote,.card-testi{ grid-column:span 12; grid-row:auto; min-height:0; }
  .card-about{ min-height:300px; }
}
@media (max-width:620px){
  .bento-wrap{ padding:1rem; border-radius:20px; }
  .service-list{ grid-template-columns:1fr; }
  .sheet{ width:100%; max-width:none; margin:auto 0 0; border-radius:26px 26px 0 0; max-height:92dvh; }
  .chat-fab span{ display:none; }
  .chat-fab{ padding:.3rem; }
  .faq{ right:.75rem; width:calc(100% - 1.5rem); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .card,.btn,.more-cue::after{ transition:none; }
  .sheet[open],.sheet[open]::backdrop,.sheet.closing,.faq,.faq.closing{ animation:none; }
}

/* QUOTE FORM */
.req{ color:var(--link); font-weight:800; }
.opt{ font-weight:500; color:var(--gray); font-size:.8rem; }
.form fieldset{ border:0; padding:0; margin:0; min-width:0; }
.form legend{ font-size:.85rem; font-weight:600; padding:0; margin-bottom:.4rem; }
.choices{ display:flex; flex-wrap:wrap; gap:.5rem; }
.choices legend{ width:100%; }
.choice{ display:block !important; position:relative; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice span{
  display:inline-block; padding:.5rem 1rem; border:1.5px solid var(--line); border-radius:999px;
  font-size:.9rem; font-weight:600; cursor:pointer; background:var(--surface); transition:background .15s ease, border-color .15s ease;
}
.choice input:checked + span{ background:var(--pink-deep); border-color:var(--pink-deep); color:#fff; }
.choice input:focus-visible + span{ outline:3px solid var(--ink); outline-offset:2px; }
.form input[type=file]{ padding:.5rem; font-size:.88rem; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ margin:0; font-size:.9rem; min-height:1.3em; }
.form-status.error{ color:#B00020; font-weight:600; }
.form-status a{ color:inherit; }
.done{ text-align:center; padding:1.5rem 0; }
.done h3{ font-size:1.2rem; margin-bottom:.5rem; }
.form button[disabled]{ opacity:.6; cursor:progress; }

/* TESTIMONIAL PHOTOS */
.testi-list figure{ display:grid; grid-template-columns:72px 1fr; gap:1rem; align-items:start; }
.t-photo{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid var(--pink); }
.avatar-stack{ display:flex; margin:0 0 1rem; }
.avatar-stack img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--surface); margin-left:-10px; }
.avatar-stack img:first-child{ margin-left:0; }

/* CALLS TO ACTION IN CAPITALS (display only, the page text stays normal for screen readers and search) */
.btn, .more-cue, .link-arrow, .chat-fab span, .faq-mail{ text-transform:uppercase; letter-spacing:.04em; }
.more-cue, .link-arrow, .faq-mail{ font-size:.82rem; }
.btn{ font-size:.85rem; }
@media (max-width:620px){ .testi-list figure{ grid-template-columns:56px 1fr; } .t-photo{ width:56px; height:56px; } }

/* PROJECT MEDIA */
.p-media{ margin-top:.9rem; background:var(--chip); border:1px solid var(--line); border-radius:14px; padding:.6rem; overflow:hidden; }
.p-media img{ display:block; width:100%; height:auto; border-radius:10px; }
.p-video{ display:grid; grid-template-columns:3.1fr 1fr; gap:.6rem; background:transparent; border:0; padding:0; }
.p-video img{ height:100%; object-fit:cover; }
.project-list li{ border-top:4px solid var(--pink); }
.thumb-strip{ display:flex; gap:.6rem; margin:0 0 1rem; }
.thumb-strip img{ height:64px; width:auto; max-width:30%; object-fit:cover; background:var(--chip); border:1px solid var(--line); border-radius:10px; padding:2px; }
@media (max-width:620px){ .p-video{ grid-template-columns:2.4fr 1fr; } }

/* HOW IT WORKS: TIMELINE (minimal motion) */
.timeline{ position:relative; margin:0 0 1.6rem; padding-left:2.4rem; }
.timeline::before{
  content:''; position:absolute; left:10px; top:8px; bottom:14px; width:2px;
  background:linear-gradient(var(--pink-deep), var(--pink-soft)); transform-origin:top;
}
.timeline li{ position:relative; padding-bottom:1.35rem; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:''; position:absolute; left:-2.4rem; top:.2rem; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:3px solid var(--pink-deep);
}
.timeline li:last-child::before{ background:var(--pink-deep); }
.timeline h3{ font-size:1.02rem; font-weight:800; }
.timeline p{ margin:.15rem 0 0; color:var(--gray); font-size:.92rem; }
.sheet[open] .timeline::before{ animation:tlLine .8s ease-out both; }
.sheet[open] .timeline li{ animation:tlIn .4s ease-out both; }
.sheet[open] .timeline li:nth-child(1){ animation-delay:.10s; }
.sheet[open] .timeline li:nth-child(2){ animation-delay:.18s; }
.sheet[open] .timeline li:nth-child(3){ animation-delay:.26s; }
.sheet[open] .timeline li:nth-child(4){ animation-delay:.34s; }
.sheet[open] .timeline li:nth-child(5){ animation-delay:.42s; }
.sheet[open] .timeline li:nth-child(6){ animation-delay:.50s; }
.sheet[open] .timeline li:nth-child(7){ animation-delay:.58s; }
@keyframes tlIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes tlLine{ from{ transform:scaleY(0); } }
@media (prefers-reduced-motion:reduce){ .sheet[open] .timeline::before,.sheet[open] .timeline li{ animation:none; } }
.ico b{ font-size:1.3rem; font-weight:800; line-height:1; }

/* SOFT ANIMATED BACKGROUND (white base, slow and subtle) */
body::before{
  content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(255,42,161,.10), transparent 70%),
    radial-gradient(34% 30% at 82% 26%, rgba(189,242,238,.60), transparent 70%),
    radial-gradient(44% 38% at 62% 84%, rgba(255,211,236,.60), transparent 70%),
    radial-gradient(30% 28% at 10% 80%, rgba(189,242,238,.40), transparent 70%);
  animation:bgDrift 32s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes bgDrift{
  from{ transform:translate3d(-3%, 2%, 0) scale(1.06); }
  50%{ transform:translate3d(2%, -2%, 0) scale(1); }
  to{ transform:translate3d(4%, 3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }

/* ===== UX POLISH ===== */
.hero-line{ max-width:560px; margin:.9rem auto 0; color:var(--gray); font-size:1.02rem; }
.hero-cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem; }
.btn-ghost{ background:var(--surface); color:var(--link); border-color:var(--pink-deep); }
.btn-ghost:hover{ background:var(--pink-soft); }
.btn:active, .card:active{ transform:scale(.98); }
.card:focus-within{ box-shadow:0 0 0 3px var(--pink-deep); }
.card .open:focus-visible{ outline:none; }
.profile .avatar, .profile h1, .profile .role, .profile .hero-line, .profile .hero-cta, .profile .visitors{ animation:rise .6s ease backwards; }
.profile h1{ animation-delay:.05s; } .profile .role{ animation-delay:.1s; } .profile .hero-line{ animation-delay:.15s; }
.profile .hero-cta{ animation-delay:.2s; } .profile .visitors{ animation-delay:.25s; }
.bento .card{ animation:rise .6s ease backwards; }
.bento .card:nth-child(2){ animation-delay:.08s; } .bento .card:nth-child(3){ animation-delay:.14s; }
.bento .card:nth-child(4){ animation-delay:.2s; } .bento .card:nth-child(5){ animation-delay:.26s; } .bento .card:nth-child(6){ animation-delay:.32s; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:620px){
  .profile{ padding-top:2.2rem; }
  .hero-cta .btn{ flex:1 1 100%; }
  .cta-bar{ margin-bottom:6rem; }
}
@media (prefers-reduced-motion:reduce){
  .profile *, .bento .card{ animation:none !important; }
}


/* ===== ACCESSIBILITY ===== */
.dock{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:60; display:flex; align-items:center; gap:.6rem; }
.a11y-fab{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--pink); background:var(--surface); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px rgba(212,20,127,.3);
}
.a11y-fab svg{ width:28px; height:28px; }
.a11y{
  position:fixed; right:1.25rem; bottom:5.6rem; z-index:70; width:min(340px,calc(100% - 2.5rem));
  max-height:calc(100dvh - 7.5rem); overflow:auto; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:1.1rem 1.2rem 1.2rem;
}
.a11y[hidden]{ display:none; }
.a11y-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.a11y-head h2{ font-size:1.05rem; font-weight:800; }
.a11y-head .close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:1.4rem; line-height:1; cursor:pointer; }
.a11y fieldset{ border:0; padding:0; margin:0 0 1rem; }
.a11y legend{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray); margin-bottom:.45rem; padding:0; }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem; }
.seg label{ display:block; position:relative; }
.seg input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg span{ display:block; text-align:center; padding:.55rem .4rem; border:1.5px solid var(--line); border-radius:12px; font-weight:700; font-size:.9rem; background:var(--surface); }
.seg input:checked + span{ background:var(--pink-deep); border-color:var(--pink-deep); color:#fff; }
.seg input:focus-visible + span{ outline:3px solid var(--ink); outline-offset:2px; }
.sw{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; border-top:1px solid var(--line); font-weight:600; font-size:.92rem; cursor:pointer; }
.sw input{ appearance:none; -webkit-appearance:none; width:44px; height:26px; border-radius:999px; background:var(--line); position:relative; flex:none; cursor:pointer; transition:background .2s; }
.sw input::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s; }
.sw input:checked{ background:var(--pink-deep); }
.sw input:checked::after{ transform:translateX(18px); }
.sw input:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.a11y-reset{ margin-top:.6rem; width:100%; }

/* text size (3 levels) */
html{ font-size:100%; }
html[data-text="1"]{ font-size:112.5%; }
html[data-text="2"]{ font-size:128%; }

/* dark theme */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F3F3F6; --gray:#B9B9C4; --card:#24242B; --line:#3C3C47;
  --bg:#0E0E12; --surface:#17171D; --pink-soft:#4B1738; --mint:#0F4D4A; --mint-soft:#10302F;
  --link:#FF7BC6; --tag-ink:#FFD3EC;
}
html[data-theme="dark"] .form input, html[data-theme="dark"] .form select, html[data-theme="dark"] .form textarea{ color:var(--ink); }
html[data-theme="dark"] .form ::placeholder{ color:#8E8E9A; }
html[data-theme="dark"] .track li, html[data-theme="dark"] .p-media, html[data-theme="dark"] .social a{ color:#1B1B1F; }
html[data-theme="dark"] body::before{ opacity:.45; }
html[data-theme="dark"] .card-about .more-cue{ color:#fff; }
html[data-theme="dark"] .sheet::backdrop{ background:rgba(0,0,0,.65); }

/* easy-read font, links, motion */
html[data-font="easy"]{ --font:Verdana,Tahoma,'Segoe UI',Arial,sans-serif; }
html[data-font="easy"] body{ letter-spacing:.02em; word-spacing:.08em; line-height:1.8; }
html[data-links="on"] a:not(.btn):not(.chat-fab):not(.skip), html[data-links="on"] .more-cue{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
html[data-motion="reduce"] .track.is-animated{ flex-wrap:wrap; width:auto; padding:0 1.6rem; }
html[data-motion="reduce"] .track.is-animated li[aria-hidden="true"]{ display:none; }

@media (max-width:620px){
  .dock{ right:.9rem; bottom:.9rem; }
  .a11y-fab{ width:52px; height:52px; }
  .a11y{ right:.9rem; bottom:5rem; }
}

/* ===== ABOUT POPUP ===== */
.sheet-wide{ width:min(920px,calc(100% - 2rem)); }
.about{ --plum:#35112B; }
.eyebrow{ margin:0 0 .6rem; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--pink); }
.eyebrow.dim{ color:var(--gray); }
.ab-hero{ display:grid; grid-template-columns:1.25fr 1fr; gap:1.6rem; align-items:center; }
.ab-title{ margin:0 0 .8rem; font-size:clamp(1.8rem,4.2vw,2.6rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; max-width:none; }
.ab-intro{ margin:0; color:var(--gray); font-size:1.02rem; max-width:none; }
.ab-card{ background:var(--plum); color:#fff; border-radius:24px; padding:1.4rem; }
.ab-id{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
.ab-id img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--pink); flex:none; }
.ab-id strong{ display:block; font-size:1.05rem; line-height:1.25; }
.ab-id span{ display:block; font-size:.85rem; color:#F3C9E0; margin-top:.2rem; line-height:1.35; }
.ab-card blockquote{ margin:0; font-size:.98rem; line-height:1.55; }
.ab-stats{ display:grid; grid-template-columns:repeat(3,1fr); margin:1.6rem 0 2rem; border:1.5px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card); }
.ab-stats li{ text-align:center; padding:1.1rem .6rem; }
.ab-stats li + li{ border-left:1.5px solid var(--line); }
.ab-stats strong{ display:block; font-size:clamp(1.15rem,2.6vw,1.6rem); font-weight:800; letter-spacing:-.02em; }
.ab-stats span{ display:block; font-size:.85rem; color:var(--gray); margin-top:.15rem; }
.ab-h{ margin:0 0 .5rem; font-size:clamp(1.3rem,3vw,1.8rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.ab-sub{ margin:0 0 1.3rem; color:var(--gray); max-width:none; }
.ab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.ab-grid li{ display:flex; gap:.9rem; align-items:flex-start; background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:1.1rem; }
.ab-grid li.alt{ background:var(--pink-soft); }
.ab-ico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--pink); display:grid; place-items:center; }
.ab-grid h4{ margin:0 0 .25rem; font-size:1rem; font-weight:800; }
.ab-grid p{ margin:0; font-size:.9rem; color:var(--gray); }
html[data-theme="dark"] .ab-grid li.alt p{ color:#E6C7D8; }
.ab-proof{ display:grid; grid-template-columns:1fr 1.6fr; gap:1.8rem; background:var(--plum); color:#fff; border-radius:24px; padding:1.8rem; margin:2rem 0 1rem; }
.ab-proof .ab-h.light{ color:#fff; }
.ab-sub.light{ color:#F3C9E0; margin:0; }
.ab-proof ol{ display:grid; }
.ab-proof li{ display:flex; gap:1rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.18); }
.ab-proof li:first-child{ border-top:0; padding-top:0; }
.ab-proof .n{ flex:none; width:2rem; color:#FFB3DC; font-weight:800; }
.ab-proof h4{ margin:0 0 .25rem; font-size:1.02rem; font-weight:800; }
.ab-proof p{ margin:0; font-size:.9rem; color:#F3D9E7; }
.ab-values{ display:flex; flex-wrap:wrap; gap:.55rem; background:var(--pink); padding:1.1rem; border-radius:20px; margin:0 0 1.6rem; }
.ab-values li{ background:#FFF0F7; color:#35112B; font-weight:700; font-size:.88rem; padding:.5rem 1rem; border-radius:999px; }
@media (max-width:760px){
  .ab-hero, .ab-proof{ grid-template-columns:1fr; }
  .ab-grid{ grid-template-columns:1fr; }
  .ab-proof{ padding:1.3rem; }
}
@media (max-width:480px){
  .ab-stats strong{ font-size:.95rem; } .ab-stats span{ font-size:.75rem; }
  .ab-stats li{ padding:1rem .4rem; }
}
.sheet-body .ab-h{ font-size:clamp(1.3rem,3vw,1.8rem); font-weight:800; margin:0 0 .5rem; }
.about .ab-sub, .about .ab-intro{ max-width:none; }

/* About popup: aligned to home branding (hot pink, mint, soft pink gradient) */
.about{ --plum:var(--pink-deep); }
.eyebrow{ color:var(--link); }
.ab-id span, .ab-sub.light{ color:rgba(255,255,255,.88); }
.ab-id img{ border-color:#fff; }
.ab-card{ box-shadow:0 10px 26px rgba(212,20,127,.25); }
.ab-stats{ background:linear-gradient(100deg,var(--mint) 0%,var(--mint-soft) 55%,var(--surface) 100%); border:2px solid var(--line); }
.ab-stats li + li{ border-left:1.5px solid rgba(0,0,0,.08); }
html[data-theme="dark"] .ab-stats li + li{ border-left-color:rgba(255,255,255,.12); }
.ab-proof .n{ color:#fff; opacity:.8; }
.ab-proof li{ border-top-color:rgba(255,255,255,.28); }
.ab-proof p{ color:rgba(255,255,255,.9); }
.ab-values{ background:linear-gradient(90deg,var(--surface) 0%,var(--pink-soft) 40%,#FF8FCB 100%); border:2px solid var(--line); }
.ab-values li{ background:var(--surface); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.05); }
html[data-theme="dark"] .ab-values li{ color:var(--ink); }
.ab-grid li{ background:var(--card); }
.ab-grid li.alt{ background:var(--pink-soft); border-color:transparent; }
html[data-theme="light"] .ab-grid li.alt, html:not([data-theme]) .ab-grid li.alt{ background:var(--pink-soft); }

/* Proof in practice: cards in the same style as the home bento */
.ab-proof{ display:block; background:linear-gradient(90deg,var(--surface) 0%,var(--pink-soft) 40%,#FF8FCB 100%); color:var(--ink); border:2px solid var(--line); border-radius:28px; padding:1.6rem; margin:2rem 0 1rem; }
.ab-proof-head{ margin-bottom:1.2rem; }
.ab-proof .ab-sub{ color:var(--gray); margin:0; }
html[data-theme="light"] .ab-proof .ab-sub, html:not([data-theme]) .ab-proof .ab-sub{ color:#55555C; }
.ab-cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ab-cases li{ display:flex; flex-direction:column; background:var(--card); border-radius:22px; padding:1.3rem; border:0; }
.ab-cases .ab-ico{ margin-bottom:.9rem; }
.ab-cases h4{ margin:0 0 .4rem; font-size:1.02rem; font-weight:800; line-height:1.25; }
.ab-cases p{ margin:0 0 1rem; font-size:.9rem; color:var(--gray); max-width:none; }
.case-cta{ margin-top:auto; align-self:flex-start; background:none; border:0; padding:.35rem 0; cursor:pointer; text-align:left; }
.case-cta:hover::after{ margin-left:.3rem; }
.project-list li.flash{ animation:flashBg 1.6s ease-out; }
@keyframes flashBg{ 0%,40%{ box-shadow:0 0 0 3px var(--pink); } 100%{ box-shadow:0 0 0 3px transparent; } }
@media (max-width:760px){ .ab-cases{ grid-template-columns:1fr; } .ab-proof{ padding:1.1rem; } }
html[data-motion="reduce"] .project-list li.flash{ animation:none; box-shadow:0 0 0 3px var(--pink); }
.ab-proof .ab-cases li, .ab-proof .ab-cases li:first-child{ padding:1.3rem; border-top:0; gap:0; }
.ab-proof .eyebrow{ color:var(--link); }
html[data-theme="light"] .ab-proof .eyebrow, html:not([data-theme]) .ab-proof .eyebrow{ color:var(--pink-deep); }

/* ===== ABOUT: polish + animation ===== */
.sheet-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.6rem; border-top:1px solid var(--line); background:var(--surface);
  border-radius:0 0 26px 26px;
}
.sheet-foot p{ margin:0; font-weight:700; }
.sheet-foot-btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.sheet-foot .btn{ padding:.65rem 1.2rem; font-size:.85rem; }
.about{ padding-bottom:1.2rem; }
.about .ab-values{ margin-bottom:.4rem; }

.ab-grid li, .ab-cases li{ transition:transform .2s ease, box-shadow .2s ease; }
.ab-grid li:hover, .ab-cases li:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(212,20,127,.18); }
.ab-stats li{ transition:background .2s ease; }
.ab-stats li:hover{ background:rgba(255,255,255,.45); }
html[data-theme="dark"] .ab-stats li:hover{ background:rgba(255,255,255,.06); }
.ab-values li{ transition:transform .15s ease; }
.ab-values li:hover{ transform:translateY(-2px); }
.ab-stats strong{ font-variant-numeric:tabular-nums; }

/* gentle staggered reveal, same feel as the timeline */
@keyframes abIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.sheet[open] .about > *{ animation:abIn .5s ease-out backwards; }
.sheet[open] .about > :nth-child(1){ animation-delay:.10s; }
.sheet[open] .about > :nth-child(2){ animation-delay:.20s; }
.sheet[open] .about > :nth-child(3){ animation-delay:.30s; }
.sheet[open] .about > :nth-child(4){ animation-delay:.40s; }
.sheet[open] .about > :nth-child(5){ animation-delay:.50s; }
.sheet[open] .ab-grid li, .sheet[open] .ab-cases li{ animation:abIn .5s ease-out backwards; }
.sheet[open] .ab-grid li:nth-child(1), .sheet[open] .ab-cases li:nth-child(1){ animation-delay:.38s; }
.sheet[open] .ab-grid li:nth-child(2), .sheet[open] .ab-cases li:nth-child(2){ animation-delay:.46s; }
.sheet[open] .ab-grid li:nth-child(3), .sheet[open] .ab-cases li:nth-child(3){ animation-delay:.54s; }
.sheet[open] .ab-grid li:nth-child(4){ animation-delay:.62s; }
.sheet[open] .ab-values li{ animation:abIn .4s ease-out backwards; }
.sheet[open] .ab-values li:nth-child(1){ animation-delay:.60s; } .sheet[open] .ab-values li:nth-child(2){ animation-delay:.65s; }
.sheet[open] .ab-values li:nth-child(3){ animation-delay:.70s; } .sheet[open] .ab-values li:nth-child(4){ animation-delay:.75s; }
.sheet[open] .ab-values li:nth-child(5){ animation-delay:.80s; } .sheet[open] .ab-values li:nth-child(6){ animation-delay:.85s; }
@media (prefers-reduced-motion:reduce){
  .sheet[open] .about > *, .sheet[open] .ab-grid li, .sheet[open] .ab-cases li, .sheet[open] .ab-values li{ animation:none; }
  .ab-grid li, .ab-cases li, .ab-values li{ transition:none; }
}
@media (max-width:620px){
  .sheet-foot{ padding:.8rem 1rem; }
  .sheet-foot p{ display:none; }
  .sheet-foot-btns{ width:100%; }
  .sheet-foot-btns .btn{ flex:1 1 100%; }
}
.ab-stats strong span{ display:inline; font-size:inherit; color:inherit; margin:0; }
@media (max-width:620px){
  .sheet.sheet-wide{ width:100%; max-width:none; }
  .sheet-foot .btn-ghost{ display:none; }
}

/* ===== CASE STUDY ===== */
.case .cs-back{ background:none; border:0; padding:0 0 .8rem; cursor:pointer; font-weight:700; font-size:.85rem; color:var(--link); text-transform:uppercase; letter-spacing:.04em; }
.case .cs-back:hover{ text-decoration:underline; text-underline-offset:4px; }
.case .ab-title{ font-size:clamp(1.6rem,3.8vw,2.3rem); margin:0 0 1rem; }
.cs-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.cs-tags li{ background:var(--pink-soft); color:var(--tag-ink); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .8rem; border-radius:999px; }
.cs-cover{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:22px; border:2px solid var(--line); display:block; }
.cs-sec{ margin-top:2rem; }
.cs-two{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.cs-sec p{ max-width:none; }
.cs-sec .eyebrow{ color:var(--link); }
.cs-lead{ font-weight:600; }
.cs-checks{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; margin:.8rem 0 1rem; }
.cs-checks li{ position:relative; padding:.65rem .9rem .65rem 2.4rem; background:var(--card); border-radius:14px; font-size:.92rem; }
.cs-checks li::before{ content:'\2713'; position:absolute; left:.8rem; top:.62rem; width:1.2rem; height:1.2rem; border-radius:50%; background:var(--pink); color:#fff; font-size:.72rem; font-weight:800; display:grid; place-items:center; }
.cs-note{ background:var(--mint-soft); border-left:4px solid #5BCFC6; padding:.8rem 1rem; border-radius:0 14px 14px 0; font-size:.92rem; margin:0; }
html[data-theme="dark"] .cs-note{ color:var(--ink); }
.cs-panel{ margin-top:2rem; padding:1.6rem; border-radius:28px; background:linear-gradient(90deg,var(--surface) 0%,var(--pink-soft) 40%,#FF8FCB 100%); border:2px solid var(--line); }
.cs-panel .eyebrow{ color:var(--pink-deep); }
html[data-theme="dark"] .cs-panel .eyebrow{ color:var(--link); }
.cs-deliver{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.cs-deliver li{ background:var(--card); border-radius:18px; padding:1rem 1.1rem; font-weight:700; font-size:.95rem; }
.cs-deliver li:last-child:nth-child(odd){ grid-column:1 / -1; }
.cs-quote{ margin:0; align-self:start; }
.cs-q-lead{ font-size:.92rem; margin:0 0 .6rem; color:rgba(255,255,255,.9); max-width:none; }
.cs-quote blockquote{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; }
.cs-services{ background:none; border:0; padding:0; margin:.5rem 0 0; }
.cs-services li{ background:var(--card); border:1.5px solid var(--line); }
.sheet[open] .case > *{ animation:abIn .5s ease-out backwards; }
.sheet[open] .case > :nth-child(1){ animation-delay:.1s; } .sheet[open] .case > :nth-child(2){ animation-delay:.2s; }
.sheet[open] .case > :nth-child(3){ animation-delay:.3s; } .sheet[open] .case > :nth-child(4){ animation-delay:.4s; }
.sheet[open] .case > :nth-child(5){ animation-delay:.5s; } .sheet[open] .case > :nth-child(6){ animation-delay:.55s; }
@media (prefers-reduced-motion:reduce){ .sheet[open] .case > *{ animation:none; } }
@media (max-width:760px){ .cs-two, .cs-checks, .cs-deliver{ grid-template-columns:1fr; } .cs-panel{ padding:1.1rem; } }

/* case study extras */
.cs-banner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.4rem 1.6rem; border-radius:22px; color:#fff; background:linear-gradient(100deg,var(--pink-deep) 0%,var(--pink) 100%); }
.cs-banner strong{ display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }
.cs-banner span{ display:block; font-size:.9rem; opacity:.92; }
.cs-panel-sub{ margin:.2rem 0 1rem; color:#55555C; max-width:none; }
html[data-theme="dark"] .cs-panel-sub{ color:var(--ink); }
.cs-journeys{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.cs-journey{ background:var(--card); border-radius:18px; padding:1rem 1.1rem; }
.cs-journey:last-child:nth-child(odd){ grid-column:1 / -1; }
.cs-journey h4{ margin:0 0 .6rem; font-size:1rem; font-weight:800; }
.cs-flow{ display:flex; flex-wrap:wrap; gap:.35rem .25rem; align-items:center; }
.cs-flow li{ font-size:.8rem; font-weight:600; padding:.25rem .65rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.cs-flow li:not(:last-child)::after{ content:'\2192'; margin-left:.55rem; color:var(--link); font-weight:800; }
.cs-flow li:not(:last-child){ padding-right:.5rem; }
.cs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin:.8rem 0 1rem; }
.cs-stats li{ background:linear-gradient(100deg,var(--mint) 0%,var(--mint-soft) 100%); border:2px solid var(--line); border-radius:20px; padding:1.1rem; text-align:center; }
.cs-stats strong{ display:block; font-size:2rem; font-weight:800; letter-spacing:-.02em; }
.cs-stats span{ display:block; font-size:.85rem; color:var(--gray); }
.cs-checks-1{ grid-template-columns:1fr; margin-top:0; }
.cs-q-foot{ margin:.8rem 0 0; font-size:.92rem; color:rgba(255,255,255,.92); max-width:none; }
.cs-quote blockquote{ font-size:1.3rem; line-height:1.25; }
.case .bullets li{ font-size:.92rem; }
.sheet[open] .case > :nth-child(n+7){ animation-delay:.6s; }
@media (max-width:760px){ .cs-journeys, .cs-stats{ grid-template-columns:1fr; } .cs-banner{ padding:1.1rem; } }
.cs-shot{ display:block; margin-bottom:1rem; }
.cs-shot .cs-cover{ aspect-ratio:auto; object-fit:cover; transition:transform .2s ease, box-shadow .2s ease; }
.cs-shot:hover .cs-cover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(212,20,127,.22); }
@media (prefers-reduced-motion:reduce){ .cs-shot .cs-cover{ transition:none; } }

/* book formatting case study */
.cs-cover-books{ aspect-ratio:auto; max-height:360px; object-fit:contain; background:var(--card); padding:.8rem; }
.cs-projs{ display:grid; gap:1rem; margin-top:.8rem; }
.cs-proj{ background:var(--card); border-radius:22px; padding:1.3rem; }
.cs-proj-head{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:.8rem; }
.cs-num{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:800; }
.cs-proj h4{ margin:0; font-size:1.1rem; font-weight:800; line-height:1.25; }
.cs-proj-sub{ margin:.15rem 0 0; font-weight:600; color:var(--link); font-size:.9rem; max-width:none; }
.cs-proj p{ max-width:none; font-size:.94rem; }
.cs-proj-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:1.2rem; margin-top:.6rem; }
.cs-mini{ margin:0 0 .4rem !important; font-size:.78rem !important; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.cs-result{ background:var(--mint-soft); border-left:4px solid #5BCFC6; border-radius:0 16px 16px 0; padding:.9rem 1rem; align-self:start; }
html[data-theme="dark"] .cs-result{ color:var(--ink); }
.cs-extra{ margin-top:.6rem; font-size:.88rem !important; color:var(--gray); }
@media (max-width:760px){ .cs-proj-grid{ grid-template-columns:1fr; } .cs-proj{ padding:1.1rem; } }

.ab-fun{ display:inline-block; margin:1rem 0 0 !important; padding:.45rem .9rem; border-radius:999px; background:var(--pink-soft); color:var(--tag-ink); font-weight:700; font-size:.9rem; max-width:none; }
.cs-quote .cs-quote-text{ font-size:1.12rem; font-weight:700; line-height:1.45; letter-spacing:0; }
.cs-q-by{ margin-top:.9rem; font-weight:800; font-size:.92rem; }
.cs-q-by span{ display:block; font-weight:500; font-size:.82rem; opacity:.9; margin-top:.15rem; }

/* case study: at a glance */
.cs-glance{ margin-top:1.4rem; }
.cs-glance ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.cs-glance li{ background:linear-gradient(100deg,var(--mint) 0%,var(--mint-soft) 100%); border:2px solid var(--line); border-radius:20px; padding:1rem 1.1rem; }
.cs-glance li span{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-deep); margin-bottom:.3rem; }
.cs-glance li p{ margin:0; font-size:.92rem; font-weight:600; max-width:none; color:#1B1B1F; }
html[data-theme="dark"] .cs-glance li p{ color:var(--ink); }
html[data-theme="dark"] .cs-glance li span{ color:var(--link); }
@media (max-width:760px){ .cs-glance ul{ grid-template-columns:1fr; } }

.ab-loc{ display:flex !important; align-items:center; gap:.45rem; }
.ab-loc img{ width:20px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.ab-open{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .8rem; margin:0 0 1rem; padding:.7rem .8rem; border-radius:14px; background:rgba(255,255,255,.14); }
.ab-open > span{ font-size:.8rem; font-weight:700; letter-spacing:.04em; }
.ab-open ul{ display:flex; gap:.5rem; }
.ab-open img{ display:block; width:28px; height:21px; border-radius:4px; object-fit:cover; box-shadow:0 0 0 1.5px rgba(255,255,255,.75); }

/* ===== ABOUT UX POLISH ===== */
.sheet-head{ position:relative; }
.sheet-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; overflow:hidden; }
.sheet-progress i{ display:block; height:100%; background:var(--pink-deep); transform:scaleX(0); transform-origin:left; transition:transform .12s linear; }
html[data-motion="reduce"] .sheet-progress i{ transition:none; }
.sheet-body h3.ab-title{ font-size:clamp(1.8rem,4.2vw,2.6rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin:0 0 .8rem; text-wrap:balance; }
.case h3.ab-title{ font-size:clamp(1.6rem,3.8vw,2.3rem); }
.ab-intro, .ab-sub, .cs-sec p{ text-wrap:pretty; }
.ab-values-label{ margin:1.6rem 0 .5rem; }
.ab-proof-head .ab-h{ margin-top:.2rem; }
.ab-hero{ align-items:start; }
.ab-card{ position:relative; }
/* whole case-study card is clickable */
.ab-cases li{ position:relative; cursor:pointer; }
.case-cta::before{ content:''; position:absolute; inset:0; border-radius:22px; }
.case-cta:focus-visible{ outline:none; }
.ab-cases li:focus-within{ box-shadow:0 0 0 3px var(--pink-deep); }
@media (max-width:480px){
  .ab-stats{ grid-template-columns:1fr; }
  .ab-stats li{ display:flex; align-items:center; justify-content:space-between; text-align:left; gap:1rem; padding:.85rem 1rem; }
  .ab-stats li + li{ border-left:0; border-top:1.5px solid rgba(0,0,0,.08); }
  html[data-theme="dark"] .ab-stats li + li{ border-top-color:rgba(255,255,255,.12); }
  .ab-stats strong{ font-size:1.05rem; white-space:nowrap; }
  .ab-stats span{ margin:0; text-align:right; font-size:.8rem; }
}

/* ===== ABOUT STATS: big, counting numbers ===== */
.ab-stats{ margin:1.8rem 0 2.2rem; }
.ab-stats li{ padding:1.5rem .8rem 1.3rem; }
.ab-stats strong{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:.15rem .5rem; line-height:1; }
.ab-stats .num{ font-size:clamp(2.6rem,6vw,3.9rem); font-weight:800; letter-spacing:-.04em; color:var(--pink-deep); font-variant-numeric:tabular-nums; display:inline-block; min-width:1ch; }
html[data-theme="dark"] .ab-stats .num{ color:var(--link); }
.ab-stats .num span{ display:inline; font-size:inherit; color:inherit; margin:0; }
.ab-stats small{ font-size:clamp(1rem,2.2vw,1.35rem); font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.ab-stats .lbl{ display:block; margin-top:.55rem; font-size:.88rem; color:var(--gray); }
.ab-stats li.pop .num{ animation:statPop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes statPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .ab-stats li.pop .num{ animation:none; } }
@media (max-width:480px){
  .ab-stats li{ padding:1rem 1.1rem; }
  .ab-stats strong{ justify-content:flex-start; flex-wrap:nowrap; }
  .ab-stats .num{ font-size:2.3rem; }
  .ab-stats small{ font-size:1rem; }
  .ab-stats .lbl{ margin:0; }
  .ab-stats li{ flex-wrap:wrap; }
}
@media (max-width:480px){
  .ab-stats li{ display:block; text-align:left; }
  .ab-stats .lbl{ margin-top:.35rem; text-align:left; font-size:.85rem; }
}


/* ===== HOW IT WORKS: icon timeline ===== */
.timeline{ padding-left:3.7rem; }
.timeline::before{ left:19px; top:20px; bottom:24px; }
.timeline li{ padding-bottom:1.5rem; min-height:40px; }
.timeline li::before{ display:none; }
.timeline li:last-child::before{ display:none; }
.tl-ico{
  position:absolute; left:-3.7rem; top:0; width:40px; height:40px; border-radius:12px; background:var(--pink);
  display:grid; place-items:center; box-shadow:0 0 0 4px var(--surface);
}
.timeline li:last-child .tl-ico{ background:var(--pink-deep); }
.timeline h3{ margin-top:.45rem; }
.tl-portal .tl-ico{ background:var(--pink-deep); }
.tl-badge{
  display:inline-block; margin-top:.5rem; padding:.2rem .7rem; border-radius:999px; background:var(--pink-soft); color:var(--tag-ink);
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.ico svg{ display:block; }
.sheet[open] .timeline li:hover .tl-ico{ transform:scale(1.06); }
.tl-ico{ transition:transform .2s ease; }
@media (prefers-reduced-motion:reduce){ .tl-ico{ transition:none; } }

/* stats: calm, balanced, no pink and no animation */
.ab-stats li{ padding:1.4rem .8rem; }
.ab-stats strong{ flex-direction:column; align-items:center; gap:.3rem; }
.ab-stats .num, html[data-theme="dark"] .ab-stats .num{ color:var(--ink); font-size:clamp(2.2rem,5vw,3.2rem); }
.ab-stats small, html[data-theme="dark"] .ab-stats small{ color:var(--ink); font-size:clamp(1rem,2vw,1.2rem); font-weight:700; }
.ab-stats li.pop .num{ animation:none; }
.ab-stats .lbl{ margin-top:.4rem; }
@media (max-width:480px){
  .ab-stats strong{ flex-direction:row; align-items:baseline; justify-content:flex-start; gap:.5rem; }
  .ab-stats .num{ font-size:2rem; }
}

/* ===== HOW IT WORKS: expandable details + sticky CTA ===== */
#d-how .sheet-body{ padding-bottom:1rem; }
#d-how .timeline{ margin-bottom:0; }
.tl-more{ margin-top:.55rem; }
.tl-more summary{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; list-style:none;
  font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--link); padding:.2rem 0;
}
.tl-more summary::-webkit-details-marker{ display:none; }
.tl-more summary::after{ content:'+'; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--pink-soft); color:var(--tag-ink); font-size:.9rem; line-height:1; transition:transform .2s ease; }
.tl-more[open] summary::after{ content:'\2212'; }
.tl-more summary:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:6px; }
.tl-more dl{ margin:.5rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; animation:tlIn .3s ease-out; }
.tl-more dl > div{ background:var(--card); border-radius:14px; padding:.7rem .9rem; }
.tl-more dt{ font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); margin-bottom:.15rem; }
.tl-more dd{ margin:0; font-size:.9rem; font-weight:600; }
@media (max-width:620px){ .tl-more dl{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .tl-more dl{ animation:none; } }

/* presentation deck samples */
.p-decks{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; }
.p-decks img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:var(--chip); }
@media (max-width:620px){ .p-decks{ grid-template-columns:1fr 1fr; } .p-decks img:first-child{ grid-column:1 / -1; } }

/* social media graphic samples */
.p-social{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; align-items:center; }
.p-social img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:var(--chip); }
@media (max-width:620px){ .p-social{ grid-template-columns:1fr 1fr; } .p-social img:last-child{ grid-column:1 / -1; max-width:60%; margin:0 auto; } }
.p-social.p-sq{ grid-template-columns:repeat(4,1fr); }
.p-social.p-sq img{ aspect-ratio:1/1; object-fit:cover; }
@media (max-width:620px){ .p-social.p-sq{ grid-template-columns:1fr 1fr; } .p-social.p-sq img:last-child{ grid-column:auto; max-width:none; margin:0; } }

/* Amazon A+ content samples */
.p-amz{ column-count:3; column-gap:.7rem; margin-top:.9rem; }
.p-amz figure{ break-inside:avoid; margin:0 0 .7rem; }
.p-amz img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:var(--chip); }
.p-amz figcaption{ margin-top:.3rem; font-size:.78rem; font-weight:600; color:var(--muted,inherit); text-align:center; }
@media (max-width:620px){ .p-amz{ column-count:2; } }

/* swipeable galleries (keeps Projects light) */
.gal-wrap{ position:relative; margin-top:.9rem; }
.gal{ display:flex !important; gap:.65rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:0 0 .6rem; margin:0 !important; column-count:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--tag-ink,#D4147F) transparent; }
.gal > *{ flex:0 0 auto; scroll-snap-align:start; margin:0 !important; }
.gal img{ display:block; height:250px; width:auto !important; max-width:none !important; aspect-ratio:auto !important; object-fit:contain; border-radius:12px; border:1px solid var(--line); background:var(--chip); }
.gal figure{ margin:0; }
.gal figcaption{ margin-top:.3rem; font-size:.78rem; font-weight:600; text-align:center; }
.gal-btn{ position:absolute; top:calc(50% - 1.6rem); width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--tag-ink,#D4147F); font-size:1.15rem; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(212,20,127,.18); display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .2s, opacity .2s; }
.gal-btn:hover{ transform:scale(1.08); }
.gal-btn:focus-visible{ outline:3px solid #D4147F; outline-offset:2px; }
.gal-btn.prev{ left:-8px; } .gal-btn.next{ right:-8px; }
.gal-btn[disabled]{ opacity:0; pointer-events:none; }
.gal-hint{ font-size:.75rem; color:var(--muted,#6b6b6b); margin:.1rem 0 0; text-align:right; }
@media (max-width:620px){ .gal img{ height:210px; } .gal-btn{ display:none; } }
html[data-motion="reduce"] .gal{ scroll-behavior:auto; }
.project-list li{ min-width:0; }
.gal-wrap{ min-width:0; width:100%; max-width:100%; }
.p-amz.gal img{ height:320px; }
@media (max-width:620px){ .p-amz.gal img{ height:260px; } }

/* lightbox */
.lb{ border:0; padding:0; margin:0; width:100%; height:100%; max-width:none; max-height:none; background:transparent; color:#fff; overflow:hidden; }
.lb::backdrop{ background:rgba(12,6,14,.88); }
.lb[open]{ display:flex; align-items:center; justify-content:center; animation:lbIn .25s ease both; }
@keyframes lbIn{ from{opacity:0} to{opacity:1} }
.lb-fig{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:calc(100vw - 7.5rem); }
.lb-fig img{ display:block; max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.lb-fig figcaption{ margin-top:.7rem; font-size:.9rem; text-align:center; display:flex; gap:.75rem; align-items:center; justify-content:center; flex-wrap:wrap; max-width:60ch; }
.lb-count{ font-size:.78rem; font-weight:700; letter-spacing:.05em; background:rgba(255,255,255,.16); padding:.15rem .6rem; border-radius:99px; }
.lb-close,.lb-nav{ position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.16); border-radius:50%; width:46px; height:46px; font-size:1.6rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.lb-close:hover,.lb-nav:hover{ background:#D4147F; transform:scale(1.06); }
.lb-close:focus-visible,.lb-nav:focus-visible{ outline:3px solid #FFD3EC; outline-offset:2px; }
.lb-close{ top:14px; right:14px; font-size:1.8rem; }
.lb-prev{ left:14px; } .lb-next{ right:14px; }
.lb-nav[hidden]{ display:none; }
.gal img, .p-media img{ cursor:zoom-in; }
@media (max-width:620px){ .lb-fig{ max-width:calc(100vw - 1.5rem); } .lb-nav{ top:auto; bottom:14px; width:42px; height:42px; } .lb-prev{ left:calc(50% - 56px); } .lb-next{ right:calc(50% - 56px); left:auto; } .lb-fig img{ max-height:74vh; } }
html[data-motion="reduce"] .lb[open]{ animation:none; }

/* project filter, chips and actions */
.p-filter{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1rem; }
.p-fbtn{ font:inherit; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.45rem .95rem; border-radius:99px; border:1.5px solid var(--pink); background:var(--surface); color:var(--tag-ink,#D4147F); cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.p-fbtn:hover{ transform:translateY(-1px); }
.p-fbtn[aria-pressed="true"]{ background:var(--pink-deep); border-color:var(--pink-deep); color:#fff; }
.p-fbtn:focus-visible{ outline:3px solid var(--pink); outline-offset:2px; }
.project-list li[hidden]{ display:none !important; }
.project-list li.p-in{ animation:slideIn .35s ease both; }
.p-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.8rem 0 0; padding:0; list-style:none; }
.project-list .p-chips li{ background:var(--chip); color:var(--gray); border:1px solid var(--line); border-top:1px solid var(--line); border-radius:99px; padding:.18rem .65rem; font-size:.74rem; font-weight:600; }
.p-actions{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; }
.p-actions .btn{ font-size:.78rem; padding:.55rem 1rem; }
.btn-line{ background:transparent; color:var(--tag-ink,#D4147F); border:1.5px solid var(--pink); cursor:pointer; }
.btn-line:hover{ background:var(--chip); }
html[data-motion="reduce"] .project-list li.p-in{ animation:none; }

/* clickable video thumbnails */
.p-video .yt{ position:relative; display:block; border-radius:12px; overflow:hidden; }
.p-video .yt img{ display:block; width:100%; height:100%; cursor:pointer; transition:transform .35s ease, filter .2s; }
.p-video .yt::after{ content:''; position:absolute; left:50%; top:50%; width:54px; height:38px; transform:translate(-50%,-50%); border-radius:11px; background:#D4147F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center/26px no-repeat; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .2s; }
.p-video .yt:hover img{ transform:scale(1.04); filter:brightness(.92); }
.p-video .yt:hover::after{ transform:translate(-50%,-50%) scale(1.1); }
.p-video .yt:focus-visible{ outline:3px solid #D4147F; outline-offset:3px; }
@media (max-width:620px){ .p-video .yt::after{ width:42px; height:30px; background-size:20px; } }
html[data-motion="reduce"] .p-video .yt img, html[data-motion="reduce"] .p-video .yt::after{ transition:none; }

/* ===== UI/UX polish pass ===== */
h1,h2,h3,h4,.lead,.hero-line,.ab-title{ text-wrap:balance; }
p,li{ text-wrap:pretty; }

/* About card quick facts fill the empty space and add credibility */
.card-about .ab-facts{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:auto 0 0; padding:1.1rem 0 0; }
.card-about .ab-facts li{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:.78rem; font-weight:700; padding:.3rem .75rem; border-radius:99px; }
.card-about .more-cue{ margin-top:1rem; }

/* testimonials: clearer quote mark */
.testi-list blockquote{ position:relative; line-height:1.6; }
.testi-list blockquote::before{ content:'\201C'; display:block; float:none; font-family:Georgia,'Times New Roman',serif; font-size:2.6rem; line-height:.6; height:1.1rem; margin:0 0 .25rem; color:var(--pink); font-weight:700; }

/* projects filter stays visible while scrolling */
.p-filter{ position:sticky; top:0; z-index:5; margin:-.2rem -.2rem 1rem; padding:.6rem .2rem .7rem; background:linear-gradient(var(--surface) 80%, transparent); }

/* footer note */
.foot-note{ flex-basis:100%; width:100%; text-align:center; margin:.9rem 0 0; font-size:.82rem; color:var(--gray); line-height:1.6; }
.foot-note small{ font-size:.74rem; opacity:.85; }
.cta-bar{ flex-wrap:wrap; }

/* comfortable tap targets on touch screens */
@media (max-width:620px){
  .p-fbtn{ min-height:44px; padding:.5rem 1rem; }
  .p-actions .btn, .sheet-foot .btn, .hero-cta .btn{ min-height:46px; }
  .gal img{ cursor:pointer; }
}
@media (pointer:coarse){ .close{ min-width:44px; min-height:44px; } }

/* smoother, calmer card interaction */
.card{ transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover){ .card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(212,20,127,.16); } }
.card:focus-within{ box-shadow:0 0 0 3px var(--ink); }
html[data-motion="reduce"] .card, html[data-motion="reduce"] .card:hover{ transition:none; transform:none; }
.p-filter{ background:var(--surface); box-shadow:0 8px 12px -10px rgba(0,0,0,.28); margin:-.2rem -1.6rem 1rem; padding:.7rem 1.6rem .75rem; }
.foot-note{ margin:-.5rem 0 0; }
@media (max-width:620px){ .p-filter{ margin:-.2rem -1.2rem 1rem; padding:.6rem 1.2rem .65rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .p-filter::-webkit-scrollbar{ display:none; } .p-fbtn{ flex:0 0 auto; } }
.p-filter{ top:-1.5rem; margin:-1.5rem -1.6rem 1rem; padding:.75rem 1.6rem .8rem; }
@media (max-width:620px){ .p-filter{ margin:-1.5rem -1.6rem 1rem; padding:.7rem 1.6rem .75rem; } }


/* ===== SERVICES popup layout ===== */
.sv-kicker{ margin:0 0 .5rem; color:var(--pink); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.sv-title{ margin:0 0 .6rem; font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; text-wrap:balance; }
.sv-intro{ margin:0 0 1.6rem; max-width:62ch; color:var(--muted,#555); }
.sv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:stretch; }
.sv-card{ display:flex; flex-direction:column; gap:1.1rem; padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--line,#e8e1e6); border-top:5px solid var(--pink); border-radius:1.2rem; background:var(--surface,#fff); min-width:0; }
.sv-mint{ border-top-color:#5fd0c6; }
.sv-card header{ display:flex; gap:.9rem; align-items:flex-start; padding-bottom:1rem; border-bottom:1px solid var(--line,#e8e1e6); }
.sv-n{ font-weight:700; font-size:.95rem; color:var(--pink); padding-top:.35rem; }
.sv-mint .sv-n{ color:#1f8f86; }
.sv-card h4{ margin:0 0 .25rem; font-size:1.3rem; line-height:1.2; }
.sv-card header p{ margin:0; color:var(--muted,#555); }
.sv-item h5{ margin:0 0 .3rem; font-size:1.05rem; }
.sv-item p{ margin:0; color:var(--muted,#555); }
.sv-sub{ margin:1rem 0 .55rem !important; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink,#222) !important; }
.sv-opts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.sv-opts li{ display:flex; flex-direction:column; gap:.3rem; padding:.75rem .8rem; border:1px solid var(--line,#e8e1e6); border-radius:.8rem; background:rgba(255,211,236,.25); font-size:.88rem; }
.sv-opts span{ color:var(--muted,#555); font-size:.82rem; }
.sv-price{ margin:.9rem 0 0 !important; }
.sv-price strong{ color:var(--ink,#222); }
.sv-two{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line,#e8e1e6); margin-top:auto; }
.sv-mint .sv-item{ padding-bottom:1.05rem; border-bottom:1px solid var(--line,#e8e1e6); }
.sv-note{ margin-top:auto; display:flex; flex-direction:column; gap:.15rem; padding:.9rem 1rem; border-radius:.8rem; background:rgba(189,242,238,.4); font-size:.92rem; }
.sv-built{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; margin-top:1.2rem; padding:1rem 1.3rem; border-radius:1rem; background:linear-gradient(90deg,rgba(255,211,236,.55),rgba(189,242,238,.55)); }
@media (max-width:760px){
  .sv-grid{ grid-template-columns:1fr; }
  .sv-opts{ grid-template-columns:1fr; }
  .sv-two{ grid-template-columns:1fr; }
}
html[data-theme="dark"] .sv-opts li{ background:rgba(212,20,127,.14); }
html[data-theme="dark"] .sv-note{ background:rgba(95,208,198,.14); }
html[data-theme="dark"] .sv-built{ background:linear-gradient(90deg,rgba(212,20,127,.2),rgba(95,208,198,.18)); }
.sheet-body .sv-title{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; font-weight:800; margin:0 0 .6rem; }

/* Services: boxed items + plus/minus for more info */
.sv-card .sv-item{ padding:.95rem 1.05rem; border:1px solid var(--line,#e8e1e6); border-radius:.9rem; background:var(--surface,#fff); }
.sv-mint .sv-item{ padding-bottom:.95rem; border-bottom:1px solid var(--line,#e8e1e6); }
.sv-two{ border-top:0; padding-top:0; }
.sv-more summary{ list-style:none; display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; cursor:pointer; }
.sv-more summary::-webkit-details-marker{ display:none; }
.sv-more summary:focus-visible{ outline:3px solid var(--pink); outline-offset:4px; border-radius:.5rem; }
.sv-pm{ flex:none; position:relative; width:2rem; height:2rem; border-radius:50%; background:var(--pink); margin-top:.1rem; }
.sv-pm::before,.sv-pm::after{ content:''; position:absolute; left:50%; top:50%; width:.8rem; height:2px; background:#fff; transform:translate(-50%,-50%); transition:transform .2s; }
.sv-pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.sv-more[open] .sv-pm::after{ transform:translate(-50%,-50%) rotate(0deg); }
.sv-more-body{ margin-top:.6rem; padding-top:.2rem; border-top:1px dashed var(--line,#e8e1e6); }
.sv-more summary h5{ margin:0 0 .3rem; }
.sv-more summary p{ margin:0; }
@media (prefers-reduced-motion:reduce){ .sv-pm::before,.sv-pm::after{ transition:none; } }
.sv-mint .sv-note{ margin-top:auto; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sv-two{ margin-top:0; }
.sv-more summary > span:first-child{ flex:1; min-width:0; }

/* ===== Services UX polish ===== */
.sv-bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 .9rem; }
.sv-hint{ margin:0; font-size:.9rem; color:var(--muted,#555); }
.sv-toggle{ font:inherit; font-size:.85rem; font-weight:600; color:var(--pink); background:none; border:1.5px solid var(--pink); border-radius:999px; padding:.4rem .9rem; min-height:40px; cursor:pointer; }
.sv-toggle:hover{ background:rgba(212,20,127,.08); }
.sv-toggle:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }
.sv-more{ transition:border-color .2s, box-shadow .2s; }
.sv-more:hover{ border-color:var(--pink); }
.sv-more[open]{ border-color:var(--pink); box-shadow:0 6px 22px rgba(212,20,127,.10); }
.sv-mint .sv-more:hover,.sv-mint .sv-more[open]{ border-color:#5fd0c6; box-shadow:0 6px 22px rgba(95,208,198,.18); }
.sv-more summary{ align-items:center; gap:.9rem; min-height:48px; }
.sv-ico{ flex:none; width:2.6rem; height:2.6rem; border-radius:.8rem; display:grid; place-items:center; background:rgba(255,211,236,.6); color:var(--pink); }
.sv-mint .sv-ico{ background:rgba(189,242,238,.6); color:#1f8f86; }
.sv-sum{ flex:1; min-width:0; }
.sv-sum h5{ margin:0 0 .2rem; }
.sv-sum p{ margin:0; font-size:.92rem; }
.sv-tools{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:.55rem 0 0; padding:0; }
.sv-tools li{ font-size:.72rem; font-weight:600; padding:.15rem .55rem; border-radius:999px; background:rgba(0,0,0,.05); color:var(--muted,#555); }
.sv-pm{ margin-top:0; }
.sv-more-body{ margin-top:.8rem; padding-top:.9rem; }
.sv-list{ margin:0 0 .9rem; padding:0; list-style:none; display:grid; gap:.4rem; }
.sv-list li{ position:relative; padding-left:1.4rem; font-size:.93rem; }
.sv-list li::before{ content:''; position:absolute; left:0; top:.45em; width:.55rem; height:.55rem; border-radius:50%; background:var(--pink); }
.sv-mint .sv-list li::before{ background:#5fd0c6; }
.sv-more-body .btn{ margin-top:.5rem; min-height:44px; }
.sv-more[open] .sv-more-body{ animation:svIn .22s ease; }
@keyframes svIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
html[data-motion="reduce"] .sv-more[open] .sv-more-body{ animation:none; }
.sv-two{ display:block; }
html[data-theme="dark"] .sv-tools li{ background:rgba(255,255,255,.1); }
html[data-theme="dark"] .sv-ico{ background:rgba(212,20,127,.22); }
html[data-theme="dark"] .sv-mint .sv-ico{ background:rgba(95,208,198,.2); }
@media (max-width:760px){ .sv-bar{ flex-direction:column; align-items:flex-start; } .sv-hint{ font-size:.85rem; } }
.sv-more summary > span:first-child{ flex:none; }
.sv-more summary > .sv-sum{ flex:1; }
.sv-ico{ width:2.6rem; height:2.6rem; }

/* AI chat button: picture only */
.chat-fab{ padding:.25rem; width:68px; height:68px; justify-content:center; }
.chat-fab img{ width:56px; height:56px; }
.chat-fab span{ display:none; }
.chat-fab:hover{ transform:translateY(-2px); }
.chat-fab:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

/* AI chat: online dot + greeting bubble */
.dock{ flex-wrap:nowrap; }
.chat-fab{ position:relative; }
.chat-fab::after{ content:''; position:absolute; right:3px; top:3px; width:15px; height:15px; border-radius:50%; background:#22c55e; border:2.5px solid #fff; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:onlinePulse 2.4s ease-out infinite; }
@keyframes onlinePulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%,100%{ box-shadow:0 0 0 9px rgba(34,197,94,0);} }
html[data-motion="reduce"] .chat-fab::after{ animation:none; }
@media (prefers-reduced-motion:reduce){ .chat-fab::after{ animation:none; } }
.chat-hello{ position:absolute; right:0; bottom:calc(100% + .7rem); display:flex; align-items:center; gap:.5rem; background:var(--surface); color:var(--ink); border:1.5px solid var(--pink); border-radius:1rem 1rem .3rem 1rem; padding:.55rem .5rem .55rem .9rem; font-weight:600; font-size:.92rem; white-space:nowrap; box-shadow:0 8px 24px rgba(212,20,127,.25); animation:helloIn .35s ease both; }
.chat-hello[hidden]{ display:none; }
.chat-hello-x{ border:0; background:none; color:var(--muted,#666); font-size:1.2rem; line-height:1; width:28px; height:28px; border-radius:50%; cursor:pointer; }
.chat-hello-x:hover{ background:rgba(0,0,0,.07); }
.chat-hello-x:focus-visible{ outline:3px solid var(--pink); }
@keyframes helloIn{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none; } }
html[data-motion="reduce"] .chat-hello{ animation:none; }