@import url('https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root{
  --blue:#3A5C8C; --sky:#4F76A6; --pale:#DFE8F3; --subtitle:#B7CBE4;
  --purple:#5B3F82; --pink:#E5BDCB; --ink:#2A3347;
  --font-head:'Charis SIL','Georgia',serif;
  --font-body:'Libre Franklin','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--ink);line-height:1.65;background:var(--pale);font-size:1rem}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.25}

/* Links: scheme colors instead of browser defaults */
a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
.prose a{font-weight:600}

/* Hero (doodle pattern + 2x2 tiles or avatar) */
.hero{background:var(--blue) url(../images/doodle-pattern.png);color:#fff;text-align:center;padding:56px 20px 40px}
.hero h1{margin:.5em 0 .15em;font-size:2.3rem}
.hero p{font-family:var(--font-head);font-style:italic;color:var(--subtitle);font-size:1.2rem;margin:0}
.tiles{display:grid;grid-template-columns:repeat(2,320px);gap:12px;justify-content:center}
.tiles img{width:320px;height:220px;object-fit:cover;border-radius:80px}
.avatar{width:340px;height:340px;border-radius:50%;margin:0 auto}
@media(max-width:700px){
  .tiles{grid-template-columns:repeat(2,140px);gap:8px}
  .tiles img{width:140px;height:96px;border-radius:38px}
  .avatar{width:170px;height:170px}
}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--sky)}
.nav-inner{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:8px 20px}
.nav-inner>a{display:block;text-decoration:none}
.nav img{height:64px;width:auto}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav ul a{color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;padding-bottom:2px}
.nav ul a.active,.nav ul a:hover{border-bottom-color:var(--pink)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.9rem;cursor:pointer}
@media(max-width:900px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--sky);padding:10px 20px 16px}
  .nav ul.open{display:flex}
}
@media(max-width:700px){
  .nav img{height:40px}
}

/* Bands */
.band{padding:56px 20px;text-align:center}
.band>.wrap{max-width:1000px;margin:auto}
.band h2{font-size:1.9rem;margin:0 0 .7em}
.purple{background:var(--purple);color:#fff}
.pink{background:var(--pink);color:var(--purple)}
.blue{background:var(--blue);color:#fff}
.pale{background:var(--pale);color:var(--blue)}
.prose{max-width:760px;margin:auto;text-align:left}
.bubble{background:var(--sky);color:#fff;border-radius:28px;padding:22px 28px;max-width:660px;margin:0 auto 20px;text-align:left}
.bubble a{color:#fff;font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:2px}
.bubble.deep{background:var(--blue)}
.bubble.light{background:var(--subtitle);color:var(--ink)}
.bubble.light a{color:var(--purple);text-decoration-color:currentColor}

/* Centered text variant for bands */
.band.centered .prose,
.band.centered .bubble{text-align:center}

/* Buttons */
.btn{display:inline-block;background:var(--sky);color:#fff;padding:10px 22px;border-radius:4px;text-decoration:none;font:600 1rem var(--font-body);border:0;cursor:pointer;margin-top:10px}
.btn.pink{background:var(--pink);color:var(--purple)}
.btn.purple{background:var(--purple);color:#fff}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.stat-icon{font-size:2.2rem}
.stat-num{font:700 2.6rem var(--font-head)}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.card{background:var(--purple);color:#fff;border-radius:18px;padding:22px 12px;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.2);display:block;font-weight:600}
.card span{font-size:2.2rem;display:block;margin-bottom:6px}
.card.light{background:var(--subtitle);color:var(--ink);text-align:center;box-shadow:none;font-weight:400}
.card.light h3{margin:0 0 .3em;color:var(--purple)}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){
  .cards.three{grid-template-columns:1fr}
}

/* Galleries (portfolio + SvF): fixed-size items, centered, including the last row */
.panel{background:var(--sky);border-radius:28px;padding:18px}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gallery .item{flex:0 0 auto;width:140px}
.gallery.wide{gap:10px}
.gallery.wide .item{width:230px}
.item{position:relative;display:block;overflow:hidden;background:#222}
.item img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .2s}
.wide .item img{aspect-ratio:1/1}
.item:hover img{transform:scale(1.05)}
.cap{position:absolute;left:0;right:0;bottom:0;background:rgba(91,63,130,.92);color:#fff;font-size:.78rem;padding:5px 7px;opacity:0;transition:opacity .2s;text-align:center}
.item:hover .cap,.item:focus .cap{opacity:1}
.filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.filters button{background:var(--sky);color:#fff;border:0;padding:6px 16px;border-radius:4px;cursor:pointer;font:600 .9rem var(--font-body)}
.filters button.on{background:var(--pink);color:var(--purple)}
@media(max-width:700px){
  .gallery .item{width:120px}
  .gallery.wide .item{width:100%;max-width:320px}
}

/* Touch screens have no hover, so always show captions */
@media (hover: none){
  .cap{opacity:1;font-size:.7rem;padding:3px 5px}
}

/* Blog cards */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;text-align:left}
.post{background:var(--subtitle);color:var(--ink);border-radius:12px;overflow:hidden;text-decoration:none;display:block;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.post img,.post .noimg{width:100%;height:150px;object-fit:cover;background:var(--sky)}
.post div.t{padding:14px 16px}
.post h3{margin:0 0 .3em;color:var(--purple);font-size:1.1rem}
.post small{color:var(--ink)}
.post p{margin:.4em 0 0;font-size:.95rem;text-align:justify}

/* Services accordion */
details.service{background:var(--subtitle);color:var(--ink);border-radius:14px;margin:0 0 14px;text-align:left;overflow:hidden}
details.service summary{cursor:pointer;padding:18px 22px;font:700 1.3rem var(--font-head);color:var(--purple);list-style:none}
details.service summary::after{content:'+';float:right}
details.service[open] summary::after{content:'–'}
details.service .body{padding:0 22px 20px}
.price{background:var(--purple);color:#fff;border-radius:10px;padding:12px 16px;margin:12px 0}
.terms{background:var(--sky);color:#fff;border-radius:14px;padding:22px;text-align:left;font-size:.95rem}

/* About */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}
.facts{text-align:left;columns:2;column-gap:30px;max-width:760px;margin:auto}
.facts p{margin:0 0 .4em;break-inside:avoid}
.video{aspect-ratio:16/9;width:100%;max-width:760px;border:0;border-radius:12px}
.links a{margin:0 8px;color:#fff;font-weight:600}

/* Contact form */
.contact-card{display:grid;grid-template-columns:1fr 1.4fr;max-width:900px;margin:auto;background:#fff;border-radius:16px;overflow:hidden;text-align:left;color:var(--ink)}
.contact-card>img{width:100%;height:100%;object-fit:cover}
.form{padding:26px}
.form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:12px}
.form input[type=text],.form input[type=email],.form textarea{width:100%;padding:9px;border:1px solid #b9c7da;border-radius:4px;font:inherit}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form fieldset{border:0;padding:0;margin:0 0 12px}
.form .radio{font-weight:400;margin:2px 0}
.form .hp{position:absolute;left:-9999px}
.form button{width:100%;background:var(--purple);color:#fff;border:0;padding:12px;font:600 1rem var(--font-body);border-radius:4px;cursor:pointer}
@media(max-width:700px){.form .row,.contact-card,.two-col{grid-template-columns:1fr}.facts{columns:1}.contact-card>img{height:160px}}

/* Legal / long-form text pages (privacy): stays white */
.legal{background:#fff;color:var(--ink);max-width:860px;margin:auto;padding:30px}
.legal h2{font-size:1.5rem;color:var(--purple);margin:1.6em 0 .5em}
.legal h2:first-child{margin-top:0}
.legal h3{color:var(--purple);margin:1.2em 0 .4em}
.legal ul{padding-left:1.4em}
.legal li{margin-bottom:.5em}
.legal a{color:var(--blue)}
.legal .toc{line-height:2}
.legal .table-wrap{overflow-x:auto;margin:1em 0}
.legal table{border-collapse:collapse;width:100%;font-size:.88rem}
.legal th,.legal td{border:1px solid #b9c7da;padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--pale);color:var(--purple)}

/* Footer */
.footer{background:var(--purple);color:#fff;text-align:center;padding:36px 20px}
.footer a{color:#fff;margin:0 8px}
.footer .small{font-size:.85rem;opacity:.85}