:root{
  --bg:#FFFFFF; --band:#F3F5F7; --ink:#0F1B26; --accent:#3D5A80;
  --muted:#5B6773; --border:#E3E7EB;
  --spectrum: linear-gradient(90deg,#3D5A80,#4F8A7B,#C8963E);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;overflow-x:hidden;}
body.menu-open{overflow:hidden;}
h1,h2,h3{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.5em;}
h1{font-size:36px;line-height:1.1;}
h2{font-size:28px;line-height:1.15;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:600;}
.hero-full .eyebrow,.page-hero .eyebrow{color:rgba(255,255,255,.8);}
.muted{color:var(--muted);}
.band{background:var(--band);}
.hairline{height:2px;border:none;background:var(--spectrum);}
.numeral{font-family:'Sora',sans-serif;font-weight:300;color:var(--accent);}
.hero-full .numeral,.page-hero .numeral{color:#fff;}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;flex-direction:column;gap:3px;}
.logo span{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--ink);}
.logo .hairline{width:40px;}
nav.primary{display:flex;gap:32px;}
nav.primary a{font-size:15px;font-weight:600;color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent;}
nav.primary a:hover{color:var(--ink);}
nav.primary a.active{color:var(--ink);border-image:var(--spectrum) 1;border-bottom:2px solid;border-image-slice:1;}
.nav-actions{display:flex;align-items:center;gap:14px;}
.menu-btn{display:none;background:none;border:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:3px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.mobile-sheet{display:flex;position:fixed;inset:0;background:#fff;z-index:100;flex-direction:column;padding:24px 20px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;}
.mobile-sheet.open{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease, transform .22s ease;}
.mobile-sheet .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px;}
.mobile-sheet nav{display:flex;flex-direction:column;gap:28px;}
.mobile-sheet nav a{font-size:28px;font-family:'Sora',sans-serif;font-weight:600;color:var(--ink);display:block;padding:4px 0;}
.close-btn{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);width:44px;height:44px;flex-shrink:0;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;-webkit-tap-highlight-color:transparent;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:var(--accent);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-light{background:#fff;color:var(--ink);}
.btn svg{transition:transform .15s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn:active{transform:scale(0.97);}
.btn-sm{padding:10px 18px;font-size:14px;}

/* cards */
.card{border-radius:18px;border:1px solid var(--border);background:#fff;}
.icon-circle{width:44px;height:44px;border-radius:999px;background:#EDF1F5;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.photo-ph{background:#EDEFF1;display:flex;align-items:center;justify-content:center;color:#9AA6B0;font-size:13px;text-align:center;padding:16px;}
.floating-pill{position:absolute;background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(15,27,38,0.14);white-space:nowrap;}
.chip{display:inline-flex;padding:9px 18px;border-radius:999px;background:var(--band);font-size:13px;font-weight:600;color:var(--ink);border:none;cursor:pointer;min-height:40px;align-items:center;}
.chip.active{background:var(--ink);color:#fff;}
.tag{display:inline-flex;padding:7px 14px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:600;}
.badge-soon{font-size:11px;font-weight:600;color:#9AA6B0;background:var(--band);padding:6px 10px;border-radius:999px;}

/* sections */
section{padding:80px 0;}
.hero{padding-top:72px;padding-bottom:0;}
.hero-full,
.page-hero{position:relative;overflow:hidden;background-size:cover;background-position:center;color:#fff;min-height:680px;display:flex;align-items:flex-end;padding-top:120px;padding-bottom:90px;}
.hero-full::before,
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,27,38,0.82),rgba(15,27,38,0.48),rgba(15,27,38,0.3));}
.hero-full .wrap,
.page-hero .wrap{position:relative;z-index:1;width:100%;}
.hero-full .hero-panel,
.page-hero .hero-panel{max-width:700px;}
.hero-full h1,
.page-hero h1{font-size:clamp(42px,5vw,72px);max-width:820px;margin:14px 0 18px;letter-spacing:-0.04em;}
.hero-full p,
.page-hero p{font-size:18px;max-width:620px;color:rgba(255,255,255,0.86);}
.hero-full .btn,
.page-hero .btn{margin-top:8px;}
.contrast{background:var(--ink);color:#fff;position:relative;}
.contrast h2{color:#fff;}

/* media cards */
.photo-card{background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid var(--border);border-radius:18px;overflow:hidden;position:relative;}
.photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,38,0.08),rgba(15,27,38,0.26));}
.photo-card > *{position:relative;z-index:1;}

/* grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}

/* forms */
label{font-size:13px;font-weight:600;display:block;margin-bottom:6px;}
input,select,textarea{font-family:'Inter',sans-serif;font-size:16px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);width:100%;background:#fff;color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.error{color:#B4433A;font-size:13px;margin-top:6px;display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B4433A;}
.field.invalid .error{display:block;}
.success-banner{display:none;padding:16px 20px;border-radius:14px;background:var(--band);align-items:center;gap:12px;font-size:14px;margin-bottom:24px;}
.success-banner.show{display:flex;}

/* footer */
footer.site{background:var(--ink);color:#fff;}
.footer-inner{max-width:1200px;margin:0 auto;padding:64px 20px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-cols .col{display:flex;flex-direction:column;gap:10px;}
.footer-cols .col a{padding:6px 0;display:inline-block;}
footer.site a{color:#E3E7EB;}
footer.site a:hover{color:#fff;}
.copyright{max-width:1200px;margin:0 auto;padding:0 20px 32px;color:#7C8894;font-size:13px;}

/* whatsapp float */
.wa-float{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right));width:52px;height:52px;border-radius:999px;background:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(15,27,38,0.3);z-index:40;}

/* scroll fade-in */
.fade-up{opacity:0;transform:translateY(8px);transition:opacity .3s ease, transform .3s ease;}
.fade-up.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.fade-up{opacity:1;transform:none;transition:none;} .mobile-sheet{transition:none;}}

@media (max-width:900px){
  nav.primary{display:none;}
  .menu-btn{display:flex;}
  .nav-inner{height:64px;padding:0 16px;}
  .nav-actions{gap:8px;}
  .nav-actions .btn{display:inline-flex;padding:10px 18px;font-size:14px;}
  .nav-actions .btn svg{width:14px;height:14px;}
  body{font-size:15px;}
  h1{font-size:32px;}
  section{padding:56px 0;}
  .wrap{padding:0 16px;}
  .grid-2{grid-template-columns:1fr;gap:28px;}
  .grid-3{grid-template-columns:1fr;}

  /* services preview: horizontal swipe carousel instead of a stack */
  .grid-5{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    gap:14px;
    padding-bottom:8px;
    margin:0 -16px;
    padding-left:16px;
    padding-right:16px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .grid-5::-webkit-scrollbar{display:none;}
  .grid-5 > *{flex:0 0 78%;scroll-snap-align:start;min-height:0 !important;}

  .field-row{grid-template-columns:1fr;}
  .hero-collage{grid-template-columns:1fr !important;gap:16px !important;padding-bottom:56px !important;}
  .hero-collage > *{height:auto !important;min-height:0 !important;}
  .photo-card{height:auto !important;min-height:220px;aspect-ratio:4/3;}
  .floating-pill{font-size:12px;padding:7px 13px;}
  .hero-full,
  .page-hero{min-height:500px;padding-top:90px;padding-bottom:54px;}
  .hero-full h1,
  .page-hero h1{font-size:clamp(32px,9vw,44px);}
  .hero-full p,
  .page-hero p{font-size:16px;}
  .mobile-sheet{padding:20px 16px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));}
  .mobile-sheet nav{gap:20px;}
  .mobile-sheet nav a{font-size:24px;}
  .footer-inner{padding:48px 16px 24px;}
  .footer-cols{gap:36px;}
  .copyright{padding:0 16px 24px;}
  .wa-float{width:50px;height:50px;}
}

@media (max-width:560px){
  .logo span{font-size:18px;}
  .nav-inner{padding:0 14px;}
  .nav-actions .btn{padding:9px 14px;font-size:13px;gap:6px;}
  .wrap{padding:0 14px;}
  .grid-5 > *{flex-basis:84%;}
  .hero-full,
  .page-hero{min-height:460px;padding-top:84px;padding-bottom:42px;}
  .hero-full h1,
  .page-hero h1{font-size:clamp(28px,10vw,38px);}
  .mobile-sheet nav a{font-size:22px;}
  .btn{width:100%;justify-content:center;}
  .hero-full .btn,
  .page-hero .btn{width:auto;}
  .nav-actions .btn{width:auto;}
}