:root{--bg:#f4f8f7;--card:#fff;--ink:#17313b;--muted:#5d7276;--line:#dce8e5;--gold:#d7a34a;--green:#168b78;--navy:#102b3a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1b22;--card:#142833;--ink:#e6f0ef;--muted:#9bb2b5;--line:#25404b}}
:root[data-theme="dark"]{--bg:#0d1b22;--card:#142833;--ink:#e6f0ef;--muted:#9bb2b5;--line:#25404b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Georgia,"Times New Roman",serif}
h1,h2,h3,.btn,.nav,.chip,.k{font-family:"Trebuchet MS",Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(1040px,calc(100% - 36px));margin:auto}
.banner{position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#091f2e,#123a4a 55%,#0f5a56)}
.banner svg{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:560px;max-width:none;opacity:.55}
.nav{position:relative;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-weight:700;letter-spacing:.04em}
.nav a.call{background:var(--gold);color:#17313b;padding:9px 16px;border-radius:10px;font-size:14px}
.banner-body{position:relative;padding:54px 0 84px;}
.banner h1{font-size:40px;line-height:1.05;letter-spacing:-.04em;margin:0 0 14px}
.banner p{margin:0;color:#d6e5e5;font-size:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{border:1px solid #ffffff44;background:#ffffff14;border-radius:999px;padding:5px 13px;font-size:13px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;margin-top:-48px;position:relative;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px}
.card+.card{margin-top:22px}
h2{font-size:24px;letter-spacing:-.02em;margin:0 0 12px}
.card p{margin:0 0 12px;color:var(--muted); text-align:justify;}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.svc div{border:1px solid var(--line);border-radius:12px;padding:16px}
.svc h3{margin:0 0 4px;font-size:16px}.svc p{margin:0;font-size:14px}
dl{margin:0;display:grid;gap:14px}dt{font-family:"Trebuchet MS",sans-serif;font-size:13px;color:var(--muted)}dd{margin:0;font-weight:700;font-family:"Trebuchet MS",sans-serif}
.btn{display:flex;justify-content:center;padding:13px;border-radius:12px;font-weight:800;margin-top:12px}
.b-call{background:var(--gold);color:#17313b}.b-wa{background:var(--green);color:#fff}
.side{position:sticky;top:16px}.faq details{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card)}.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:"Trebuchet MS",sans-serif;font-weight:700;display:flex;justify-content:space-between;gap:14px;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:22px;color:var(--gold);line-height:1}.faq details[open] summary:after{content:"\2212"}.faq details p{margin:0;padding:0 18px 16px;color:var(--muted)}.mbar{display:none}@media(max-width:820px){.mbar{display:flex;position:fixed;z-index:20;left:0;right:0;bottom:0;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px #0000001f}.mbar .btn{flex:1;margin:0;padding:12px 8px;font-size:15px}footer{padding-bottom:90px}}
.steps{padding-left:20px;margin:0;color:var(--muted)}.steps li{margin-bottom:8px}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--gold);padding-left:14px}
footer{padding:30px 0 40px;color:var(--muted);font-size:13px;font-family:"Trebuchet MS",sans-serif}
@media(max-width:820px){.layout{grid-template-columns:1fr}.side{position:static}.banner svg{right:-200px;opacity:.35}.svc{grid-template-columns:1fr}}
.about{
  display:flex;
  gap:26px;
  align-items:center;      /* use flex-start if you want the image aligned to the top */
}
.avatar{
  flex:0 0 170px;          /* fixed image column on desktop */
}
.avatar img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/4.5;
  object-fit:cover;        /* crops instead of stretching */
  border-radius:20px;
  border:3px solid #d7a34a;
}
.about-text{
  flex:1;
  min-width:0;             /* lets the text wrap instead of overflowing */
}

/* Mobile: image on top, text below */
@media (max-width:600px){
  .about{
    flex-direction:column;
    text-align:center;
  }
  .avatar{
    flex-basis:auto;
    width:180px;
  }
}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gallery figure{ margin:0; }
.gallery img{
  display:block;
  width:100%;
  aspect-ratio:1/1;        /* square tiles; use 4/3 for wider ones */
  object-fit:cover;        /* crops to fit, never stretches */
  border-radius:14px;
  border:1px solid var(--line);
}
.gallery figcaption{
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
  text-align:center;
}
@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; }
}

.btn{
  display:inline-flex;      /* or flex, if the button is full width */
  align-items:center;       /* vertical centering */
  justify-content:center;
  gap:8px; 
  width: 100%;                 /* space between icon and text */
  line-height:1;
}

.btn i{
  font-size:1.15em;         /* a little larger than the text */
  line-height:1;
  width:1.2em;              /* fixed width so every icon lines up the same */
  text-align:center;
}