/* ===== SBS Clinic — Landing Page ===== */
/* Tokens mirror design/tokens/design-tokens.json */
:root{
  --deepTeal:#0A3036; --teal:#0C7681; --gold:#DCB15D; --goldDeep:#B68A3E; --goldSoft:#E7CF9F;
  --cream:#F1DCB2; --white:#fff;
  --bg:#FBF7EF; --paper:#FFFFFF;
  --ink:#0A3036; --ink2:#5C6E6A; --ink3:#94A09C; --line:#EBE2D2;
  --serif:'Cormorant',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --soft:0 1px 2px rgba(10,48,54,.04), 0 18px 40px -22px rgba(10,48,54,.22);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- typography helpers ---- */
.kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--goldDeep);font-weight:600}
.kicker--gold{color:var(--gold)}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,46px);color:var(--deepTeal);line-height:1.08;letter-spacing:-.01em;margin-top:10px}
.h2--light{color:#fff}
.h2 em,.hero__title em{font-style:italic;color:var(--teal);font-weight:500}
.h2--light em{color:var(--gold)}
.lead{font-size:16px;color:var(--ink2);margin-top:16px;max-width:54ch}
.lead em{font-style:italic;color:var(--teal)}
.lead--light{color:#cfe0e0}
.link-gold{display:inline-block;margin-top:22px;color:var(--goldDeep);font-weight:600;font-size:14px;letter-spacing:.02em}
.link-gold:hover{color:var(--teal)}

/* ---- buttons ---- */
.btn{display:inline-block;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:999px;transition:.25s ease;cursor:pointer;border:1px solid transparent}
.btn--gold{background:linear-gradient(180deg,#E6C57E,#CBA351);color:var(--deepTeal);
  box-shadow:0 12px 26px -12px rgba(182,138,62,.7), inset 0 1px 0 rgba(255,255,255,.5)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(182,138,62,.85)}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--ghost-light{border-color:rgba(255,255,255,.45);color:#fff}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s ease;padding:18px 0}
.nav.scrolled{background:rgba(10,48,54,.92);backdrop-filter:blur(12px);padding:10px 0;box-shadow:0 8px 30px -18px rgba(0,0,0,.6)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{height:36px;width:auto}
.nav__links{display:flex;gap:28px;flex:1;justify-content:center}
.nav__links a{color:rgba(255,255,255,.88);font-size:14px;font-weight:500;letter-spacing:.01em;transition:.2s}
.nav__links a:hover{color:var(--gold)}
.nav__cta{padding:11px 22px}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)}
.hero__overlay{position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(10,48,54,.94) 0%,rgba(10,48,54,.78) 45%,rgba(12,118,129,.55) 100%),
             radial-gradient(60% 50% at 80% 10%,rgba(220,177,93,.22),transparent 60%)}
.hero__inner{position:relative;padding:120px 24px 80px;max-width:820px}
.seal{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.seal__ln{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.seal__ln.r{background:linear-gradient(90deg,var(--gold),transparent)}
.seal i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(44px,7vw,84px);line-height:1.03;letter-spacing:-.015em;margin:14px 0 0}
.hero__sub{font-size:clamp(15px,1.7vw,18px);color:#d6e3e3;max-width:56ch;margin-top:22px;font-weight:300}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero__stats{display:flex;gap:40px;margin-top:54px;flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:34px;color:var(--gold);font-weight:600;display:block;line-height:1}
.stat span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b9cccc;margin-top:6px;display:block}

/* ===== Trust strip ===== */
.trust{background:var(--deepTeal);border-top:1px solid rgba(220,177,93,.18)}
.trust__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 24px}
.trust__item{display:flex;align-items:center;gap:12px;color:#cfe0e0;font-size:14px;font-weight:500;justify-content:center}
.trust__item svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ===== Sections ===== */
.section{padding:96px 0}
.section--cream{background:linear-gradient(180deg,#FBF7EF,#F4ECDD)}
.section__head{text-align:center;max-width:640px;margin:0 auto 56px}
.section__sub{font-size:15px;color:var(--ink2);margin-top:14px}

/* ===== About ===== */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about__media{position:relative}
.about__media img{border-radius:24px;box-shadow:var(--soft);aspect-ratio:4/5;object-fit:cover;width:100%}
.about__badge{position:absolute;right:-18px;bottom:34px;background:var(--deepTeal);color:#fff;border-radius:18px;
  padding:18px 22px;box-shadow:0 22px 44px -20px rgba(10,48,54,.6);border:1px solid rgba(220,177,93,.3)}
.about__badge b{font-family:var(--serif);font-size:26px;color:var(--gold);display:block;letter-spacing:.18em}
.about__badge span{font-size:11px;color:#cfe0e0;letter-spacing:.06em}
.ticks{list-style:none;margin:24px 0 0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--ink)}
.ticks li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--gold);box-shadow:inset 0 0 0 4px rgba(255,255,255,.85),0 0 0 1px var(--goldDeep)}

/* ===== Cards (services) ===== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:var(--paper);border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--soft);transition:.3s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -26px rgba(10,48,54,.4)}
.card__img{aspect-ratio:4/3;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:20px}
.card__body h3{font-family:var(--serif);font-size:21px;color:var(--deepTeal);font-weight:600;line-height:1.2}
.card__body p{font-size:13.5px;color:var(--ink2);margin-top:8px}

/* ===== Technology ===== */
.tech{background:linear-gradient(160deg,#0A3036,#0C7681);color:#fff;position:relative;overflow:hidden}
.tech::after{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 90% 0%,rgba(220,177,93,.18),transparent 60%);pointer-events:none}
.tech__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
.tech__media img{border-radius:24px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7);width:100%;object-fit:cover;aspect-ratio:5/4}
.tech__feats{display:grid;gap:22px;margin-top:34px}
.feat{display:flex;gap:18px;align-items:flex-start}
.feat__no{font-family:var(--serif);font-size:24px;color:var(--gold);font-weight:600;line-height:1;flex:0 0 auto;min-width:32px}
.feat b{display:block;font-size:16px;color:#fff;margin-bottom:2px}
.feat p{font-size:14px;color:#bcd2d2}

/* ===== Doctors ===== */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.doc{text-align:center}
.doc__img{aspect-ratio:3/4;border-radius:20px;overflow:hidden;box-shadow:var(--soft);margin-bottom:18px}
.doc__img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.doc:hover .doc__img img{transform:scale(1.05)}
.doc h3{font-family:var(--serif);font-size:22px;color:var(--deepTeal);font-weight:600}
.doc span{font-size:13px;color:var(--goldDeep);letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ===== Gallery ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px}
.gallery .g{width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:var(--soft)}
.gallery .g--tall{grid-row:span 2}
.gallery .g--wide{grid-column:span 2}

/* ===== Booking / Hours ===== */
.booking{background:linear-gradient(160deg,#0A3036,#0C7681);color:#fff;position:relative;overflow:hidden}
.booking::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 15% 100%,rgba(220,177,93,.18),transparent 60%);pointer-events:none}
.booking__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
.booking__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hours{background:rgba(255,255,255,.06);border:1px solid rgba(220,177,93,.3);border-radius:24px;padding:32px;backdrop-filter:blur(6px)}
.hours__title{font-family:var(--serif);font-size:26px;color:var(--gold);font-weight:600;margin-bottom:20px}
.hours__group{margin-bottom:22px}
.hours__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldSoft);font-weight:600;margin-bottom:10px}
.hours ul{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;color:#d6e3e3}
.hours li b{color:#fff;font-weight:600}
.hours__note{font-size:12px;color:#9fb6b6;margin-top:6px}

/* ===== Footer ===== */
.footer{background:var(--deepTeal);color:#cfe0e0;padding:70px 0 30px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer__logo{height:38px;margin-bottom:18px}
.footer__brand p{font-size:14px;color:#9fb6b6;max-width:34ch;font-weight:300}
.footer__col h4{font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:16px;font-weight:600}
.footer__col ul{list-style:none;display:grid;gap:10px}
.footer__col li,.footer__col a{font-size:14px;color:#9fb6b6;transition:.2s}
.footer__col a:hover{color:var(--gold)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:50px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#7e9595}

/* ===== Reveal animation ===== */
.section,.card,.doc{opacity:1}
[data-reveal]{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(10,48,54,.97);backdrop-filter:blur(12px);padding:18px 24px;gap:6px}
  .nav.open .nav__links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .about__grid,.tech__grid,.booking__grid{grid-template-columns:1fr;gap:40px}
  .about__badge{right:18px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .trust__inner{grid-template-columns:repeat(2,1fr);gap:22px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .section{padding:68px 0}
  .cards,.docs{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gallery .g--wide{grid-column:span 2}
  .hero__stats{gap:28px}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
}