/* =========================================================
   Dr Thomas Colson — Rhinoplasty Cluster
   Aesthetic: refined clinical luxury, Paris × Abu Dhabi
   Deep charcoal, warm ivory, champagne gold accent
   ========================================================= */

:root{
  --bg:#0E0C0A;
  --bg-2:#15110D;
  --panel:#1B1611;
  --line:rgba(200,169,106,.18);
  --line-soft:rgba(242,237,228,.08);
  --ink:#F2EDE4;
  --ink-soft:#C9C1B3;
  --ink-mute:#8C8475;
  --gold:#C8A96A;
  --gold-bright:#E2C98C;
  --maxw:1180px;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(200,169,106,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(200,169,106,.04), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", -apple-system, sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
img{max-width:100%;display:block}
a{color:var(--gold-bright);text-decoration:none;transition:color .25s}
a:hover{color:var(--gold)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.1;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:.005em}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--gold-bright)}
h4{font-size:1.15rem;color:var(--ink)}
.eyebrow{
  font-family:"Hanken Grotesk",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;
  color:var(--gold);margin-bottom:1.1rem;display:block;
}
p{margin:0 0 1.15em;color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}
.lead{font-size:1.2rem;color:var(--ink);line-height:1.65}

/* ---------- Top bar / nav ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(14,12,10,.78);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;flex-direction:column;line-height:1}
.nav .brand{flex-direction:row;align-items:center;gap:12px}
.brand-logo{height:46px;width:auto;display:block;flex:none}
.brand-text{display:flex;flex-direction:column}
.brand .name{font-family:"Cormorant Garamond",serif;font-size:1.45rem;color:var(--ink);letter-spacing:.04em}
.brand .sub{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{color:var(--ink-soft);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.navlinks a:hover{color:var(--gold-bright)}
.btn{
  display:inline-block;padding:13px 26px;border-radius:50px;
  font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:all .3s ease;border:1px solid var(--gold);
}
.btn-gold{background:var(--gold);color:#1a1206;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-bright);color:#1a1206;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--gold-bright)}
.btn-ghost:hover{background:rgba(200,169,106,.12);color:var(--gold-bright)}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer}
.lang-switch{
  border:1px solid var(--line);border-radius:50px;padding:8px 16px;
  font-size:.78rem;letter-spacing:.08em;color:var(--gold-bright);
  text-transform:uppercase;font-weight:600;transition:all .25s;
  text-align:center;
}
.lang-switch:hover{background:rgba(200,169,106,.12);border-color:var(--gold)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:96px 0 78px;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-8%;top:10%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(200,169,106,.12),transparent 65%);
  filter:blur(20px);pointer-events:none;
}
.hero .crumbs{font-size:.78rem;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:28px}
.hero .crumbs a{color:var(--ink-mute)}
.hero .crumbs a:hover{color:var(--gold)}
/* two-column hero with media; mobile-first = image stacks ABOVE the copy */
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.hero-media{order:0;position:relative}
.hero-copy{order:1}
.hero-media img{
  width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(200,169,106,.08);
  display:block;
}
.hero-media::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 0 80px -30px rgba(200,169,106,.25);
}
@media(min-width:861px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:50px}
  .hero-media{order:2}
  .hero-copy{order:1}
}
.hero h1{max-width:14ch}
.hero .lead{max-width:62ch;margin-top:1.2rem}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.byline{
  display:flex;align-items:center;gap:14px;margin-top:42px;
  padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:.86rem;color:var(--ink-mute);max-width:60ch;
}
.byline .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- Sections ---------- */
section{padding:64px 0;border-top:1px solid var(--line-soft)}
.section-head{max-width:64ch;margin-bottom:38px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(160deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;transition:transform .35s ease,border-color .35s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card .num{font-family:"Cormorant Garamond",serif;font-size:2.4rem;color:var(--gold);line-height:1;margin-bottom:14px;display:block}
.card h3{margin-bottom:.5em}
.card p{font-size:.97rem;margin-bottom:0}
.card-link{display:inline-block;margin-top:18px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.card-link::after{content:" →";transition:margin .25s}
.card:hover .card-link::after{margin-left:6px}

/* ---------- Criteria / checklist ---------- */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:10px 0 10px 38px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.checklist li::before{
  content:"";position:absolute;left:6px;top:18px;width:14px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin:10px 0 0;padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .step{position:relative;padding:0 0 26px 22px}
.timeline .step::before{content:"";position:absolute;left:-29px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(200,169,106,.15)}
.timeline .when{display:block;font-family:"Cormorant Garamond",serif;font-size:1.2rem;color:var(--gold-bright)}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.95rem}
th{background:var(--bg-2);color:var(--gold);font-family:"Hanken Grotesk",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}
td{color:var(--ink-soft)}
td strong{color:var(--ink)}
tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;background:var(--panel);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:"Cormorant Garamond",serif;font-size:1.3rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.6rem;font-family:"Hanken Grotesk",sans-serif;transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 24px 22px;color:var(--ink-soft);font-size:.98rem}

/* ---------- Callouts ---------- */
.callout{
  background:linear-gradient(150deg,rgba(200,169,106,.10),rgba(200,169,106,.03));
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:26px 28px;margin:8px 0;
}
.callout h4{color:var(--gold-bright);margin-bottom:.4em}
.callout p:last-child{margin-bottom:0}

/* ---------- Related / interlinks ---------- */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related a{
  display:block;padding:22px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font-family:"Cormorant Garamond",serif;
  font-size:1.25rem;transition:all .3s;
}
.related a span{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.related a:hover{border-color:var(--gold);background:var(--bg-2);transform:translateY(-3px)}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;
  background:linear-gradient(160deg,rgba(200,169,106,.10),transparent);
  border:1px solid var(--line);border-radius:var(--r);padding:54px 30px;
}
.cta-band h2{margin-bottom:.3em}
.cta-band .lead{max-width:56ch;margin:0 auto 28px}
.contacts{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:.92rem;color:var(--ink-soft)}
.contacts b{color:var(--gold-bright);display:block;font-size:1.05rem;font-family:"Cormorant Garamond",serif}

/* ---------- Disclaimer / footer ---------- */
.disclaimer{font-size:.84rem;color:var(--ink-mute);line-height:1.6;max-width:80ch;margin:0 auto}
.disclaimer p{color:var(--ink-mute);font-size:.84rem}
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:54px 0 40px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
.foot-grid h4{color:var(--gold);font-family:"Hanken Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:18px}
.foot-grid a{display:block;color:var(--ink-soft);font-size:.9rem;padding:5px 0}
.foot-grid p a{display:inline;padding:0;color:var(--gold-bright)}
.license{border-top:1px solid var(--line-soft);padding-top:24px;font-size:.82rem;color:var(--ink-mute);text-align:center}
.license strong{color:var(--ink-soft)}

/* ---------- Load animation ---------- */
.reveal{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.27s}.d4{animation-delay:.4s}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .navlinks{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:10px 24px 22px;transform:translateY(-130%);transition:transform .35s;
  }
  .navlinks.open{transform:none}
  .navlinks a{width:100%;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
  .navlinks .btn{margin-top:14px;text-align:center}
  .navlinks .lang-switch{border-bottom:0;margin-top:14px;padding:12px 16px;text-align:center}
  .menu-toggle{display:block}
  .grid-2,.grid-3,.foot-grid{grid-template-columns:1fr}
  .related{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  body{font-size:16px}
  .related{grid-template-columns:1fr}
  section{padding:48px 0}
}