/* =========================
   T3 — Unified CSS (Mobile-first)
   ========================= */

:root{
  --brand:#1d3557;
  --accent:#e63946;
  --ink:#101828;
  --muted:#667085;
  --bg:#ffffff;
  --card:#f8fafc;

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-sm:0 4px 14px rgba(0,0,0,.08);
  --shadow-md:0 10px 24px rgba(0,0,0,.12);
  --shadow-lg:0 16px 38px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}

/* Progress bar + toast */
#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),#ff7a7a);z-index:1001;transition:width .08s linear}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(17,17,17,.94);color:#fff;padding:.6rem .9rem;border-radius:var(--radius-sm);font-size:.95rem;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:1002}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Disclosure */
.disclosure{position:sticky;top:0;z-index:1000;background:linear-gradient(90deg,var(--accent),#ff7a7a);color:#fff;padding:.65rem 1rem;text-align:center;font-size:.95rem}
.disclosure strong{font-weight:700}

/* Nav */
.nav{position:sticky;top:40px;z-index:999;backdrop-filter:saturate(1.15) blur(6px);background:rgba(255,255,255,.7);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.85rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--brand);font-weight:700}
.brand img.main-logo{height:68px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));transition:transform .25s,filter .25s;border-bottom:3px solid var(--accent)}
.brand img.main-logo:hover{transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 6px 12px rgba(0,0,0,.36))}
.spacer{flex:1}
.nav a{color:var(--ink);margin-left:1rem;font-weight:600;text-decoration:none}
.nav a:hover{color:var(--accent)}

/* Microproof */
.microproof{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px;padding:10px 12px;border-bottom:1px solid #eee;text-align:center;font-size:.92rem;color:#374151;background:#fff}
.microproof>div{background:#fff;border:1px solid #e9edf3;padding:8px 10px;border-radius:999px}

/* Hero */
.hero{min-height:68vh;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.52)),url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;padding:6.5rem 1rem 5rem}
.hero>div{width:100%;max-width:980px;margin:0 auto;padding-inline:12px}
.hero h1{font-size:clamp(1.9rem,4.2vw,3rem);margin:.4rem 0 1rem;font-weight:800;letter-spacing:.2px}
.hero p{max-width:820px;margin:0 auto 1.25rem;font-size:clamp(1rem,1.6vw,1.2rem);color:#f1f5f9}

/* Buttons (unified) */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;line-height:1;padding:.85rem 1.1rem;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 10px 24px rgba(230,57,70,.35)}
.btn-primary:hover{box-shadow:0 14px 30px rgba(230,57,70,.42)}
.btn-outline{background:#fff;color:var(--brand);border-color:#e3e8ef;box-shadow:var(--shadow-sm)}
.btn-outline:hover{border-color:var(--brand)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25);backdrop-filter:blur(6px) saturate(1.1)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:.6rem .9rem;font-weight:700}
.btn-lg{padding:1rem 1.2rem;font-size:1.05rem}
.btn-fat{display:block;width:100%}

/* Hero bullets */
.hero .hero-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:24px auto 0;max-width:860px}
.hero .hero-points li{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);text-shadow:0 1px 0 rgba(0,0,0,.25);backdrop-filter:blur(6px) saturate(1.1);box-shadow:0 6px 14px rgba(0,0,0,.18)}

/* Sections */
section{scroll-margin-top:100px}
.wrap{max-width:1100px;margin:0 auto;padding:2.5rem 1rem}
.section-title{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:0 0 .75rem;color:var(--brand);font-weight:800}
.lead{color:var(--muted);max-width:820px;margin:0 0 1rem}

/* Grid + cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.card{grid-column:span 12;background:#fff;border:1px solid #eaeef3;border-radius:var(--radius-lg);padding:1.35rem;box-shadow:var(--shadow-sm);transition:box-shadow .18s,transform .18s,border-color .18s}
@media (min-width:720px){.card.span-4{grid-column:span 4}.card.span-6{grid-column:span 6}}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.card h3{margin:0 0 .4rem;font-size:1.15rem;color:var(--brand);font-weight:800}
.card p{margin:0;color:#334155}

/* =========================
   SERVICES — banner collage + readable header block
   ========================= */

/* Hide collage on mobile */
#services .collage{ display:none; }

/* Desktop: collage as TOP BANNER; cards on solid surface; header text on its own light panel */
@media (min-width:900px){
  #services{ position:relative; background:#fff; }

  /* Top banner */
  #services .collage{
    display:grid;
    position:absolute; left:0; right:0; top:0; height:320px;
    grid-template-columns:1.1fr .9fr 1.1fr; gap:22px;
    opacity:.58; filter:saturate(1.06) contrast(1.06) brightness(1.02);
    pointer-events:none; z-index:0;
    padding:0 12px;
  }
  #services .collage img{
    width:100%; height:100%; object-fit:cover;
    border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.18);
  }

  /* Subtle scrim so images look rich but not overpowering */
  #services::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:320px; z-index:0;
    background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 100%);
    pointer-events:none;
  }

  /* Real content above banner */
  #services .section-title,
  #services .lead,
  #services .grid{ position:relative; z-index:1 }

  /* Push content below the banner so cards never overlap images */
  #services .section-title{ margin-top:340px; } /* 320 banner + spacing */

  /* READABLE HEADER BLOCK (clean, minimal) */
  #services .section-title,
  #services .lead{
    display:inline-block;
    padding:.55rem .9rem;
    border-radius:12px;
    background:rgba(255,255,255,.95);
    box-shadow:0 6px 20px rgba(0,0,0,.10);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  #services .section-title{ margin-bottom:.5rem }
}

/* =========================
   About (panel)
   ========================= */
#about{background:linear-gradient(180deg,#f6f8fb 0%,#fafbfe 100%);border:1px solid #e7ecf3;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:2.25rem 1rem}
#about .about{display:grid;grid-template-columns:1.2fr .8fr;gap:1.6rem;align-items:center}
#about .about img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
@media (max-width:880px){#about .about{grid-template-columns:1fr}}

/* =========================
   Contact / Consult
   ========================= */
#contact{text-align:center}
#contact .lead{margin-left:auto;margin-right:auto}
.btn-fat{max-width:420px;margin:14px auto 0}

/* Email + Copy Email — identical sizing */
#contact .contact-row{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
#contact .chip,#contact .copy-btn{
  display:block;width:100%;max-width:360px;margin:0 auto;text-align:center;
  border-radius:999px;padding:.62rem .9rem;font-weight:800;
  box-shadow:var(--shadow-sm);
  border:1px solid #e3e8ef;background:#fff;color:var(--brand);
  transition:border-color .15s,box-shadow .15s,color .15s,background .15s
}
#contact .chip:hover,#contact .copy-btn:hover{border-color:var(--brand)}

/* Sticky CTA */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;background:var(--accent);color:#fff;text-align:center;padding:14px 16px;border-radius:999px;font-weight:900;box-shadow:0 10px 24px rgba(230,57,70,.38);transform:translateY(140%);transition:transform .25s ease;z-index:1000}
.sticky-cta.show{transform:translateY(0)}

/* Footer */
footer{background:#f8fafc;border-top:1px solid #eaeef3}
.foot{max-width:1100px;margin:0 auto;padding:2rem 1rem;text-align:center;color:#667085;font-size:.95rem}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.revealed{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}

/* Focus styles */
a:focus-visible,button:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 65%,white);outline-offset:2px;border-radius:8px}

/* Responsive polish */
@media (max-width:899.98px){
  .wrap{padding:2.25rem 1rem}
  .grid{gap:1rem}
  .section-title{font-size:1.35rem}
  .btn-fat{width:100%;max-width:480px}
  #contact .chip,#contact .copy-btn{max-width:480px}
}
@media (min-width:900px){
  .hero>div{max-width:980px;margin:0 auto}
  .hero .hero-points{margin:26px auto 0;max-width:860px;transform:translateX(10px)}
  #contact .lead{max-width:760px}
  .card{padding:1.25rem}
}