/* Dr. Fabio Castro: Artistic Plastic Surgery
   Shared stylesheet, loaded by every page (main site + procedure pages).
   Landing pages (see /landing/) load a trimmed subset via .landing-page scope. */

:root{
  --navy:#14161d;
  --navy-2:#0c0d12;
  --navy-soft:#1e212b;
  --gold:#c8a97e;
  --gold-light:#e6d3b3;
  --gold-deep:#a3814f;
  --teal:#2f6b68;
  --teal-light:#428f8a;
  --cream:#faf7f2;
  --cream-2:#f1e9dc;
  --white:#ffffff;
  --ink:#211d1a;
  --ink-soft:#655d54;
  /* Untouched copy of the line above, kept in sync by every color theme
     (see CMS_SITE_COLOR_THEMES in admin/includes/cms-bootstrap.php). The
     "Text Contrast" control (cms_text_contrast_css()) overrides
     --ink-soft directly to turn High Contrast on; when Desktop is High
     Contrast but Mobile is Standard, its mobile media-query rule points
     --ink-soft back at this property instead, so the original softer
     tone from whichever theme is active can be restored at small widths
     without the CSS needing to know that theme's actual hex value. */
  --ink-soft-theme:#655d54;
  --line:rgba(33,29,26,0.12);
  --line-dark:rgba(230,211,179,0.16);
  --shadow:0 24px 60px -24px rgba(12,13,18,0.4);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, sans-serif;
  --ok:#3f7d5c;
  --err:#b5493f;
  /* Line-height multiplier for body copy; see cms_line_height_css() in
     admin/includes/cms-bootstrap.php (Fonts & Settings' "Line Height"
     control). 1 = each selector's own base line-height below, unchanged. */
  --lh-scale:1;
  /* Body/paragraph text weight; see cms_text_weight_css() in
     admin/includes/cms-bootstrap.php (Fonts & Settings' "Text Weight"
     control). 300 = the site's original default (Light), unchanged. */
  --body-weight:300;
  /* Multiplier for the padding between page sections and the gap below
     each interior page's header banner; see cms_section_spacing_css() in
     admin/includes/cms-bootstrap.php (Fonts & Settings' "Section Spacing"
     control). 1 = each selector's own base spacing below, unchanged. */
  --section-spacing-scale:1;
  /* Multiplier for h1-h4 font sizes; see cms_heading_size_css() in
     admin/includes/cms-bootstrap.php (Fonts & Settings' "Heading Size"
     control). 1 = each heading's own base size below, unchanged. */
  --heading-scale:1;
  /* Multiplier for header navigation link font sizes (desktop mega-menu
     and mobile menu); see cms_menu_size_css() ("Menu Font Size"
     control). 1 = each nav selector's own base size below, unchanged. */
  --menu-scale:1;
  /* Multiplier for the size of gallery captions (case labels, before/
     after tags, compare-modal notes); see cms_caption_size_css()
     ("Gallery Caption Size" control). 1 = unchanged. */
  --caption-scale:1;
  /* Additive letter-spacing offset applied on top of every existing
     letter-spacing value sitewide (buttons, nav, labels, badges) and to
     headings/paragraphs (which otherwise have none); see
     cms_letter_spacing_css() ("Letter Spacing" control). 0 = unchanged. */
  --ls-add:0em;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; font-weight:var(--body-weight);
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; color:var(--navy); line-height:1.1; text-wrap:balance; letter-spacing:var(--ls-add);}
em{font-style:italic; color:var(--gold-deep);}
p{margin:0; line-height:calc(1.75 * var(--lh-scale)); color:var(--ink-soft); font-weight:var(--body-weight); letter-spacing:var(--ls-add);}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:var(--sans);}
section{position:relative;}
.wrap{max-width:1220px; margin:0 auto; padding:0 40px;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-deep); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

.skip-link{position:absolute; left:-999px; top:auto; background:var(--gold); color:var(--navy); padding:12px 20px; z-index:999; font-size:13px; font-weight:600;}
.skip-link:focus{left:16px; top:16px;}

.eyebrow{
  font-size:11.5px; letter-spacing:calc(0.26em + var(--ls-add)); text-transform:uppercase; font-weight:600;
  color:var(--gold-deep); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:''; width:30px; height:1px; background:var(--gold-deep);}
.eyebrow.center{justify-content:center;}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-dark::before{background:var(--gold);}

.btn{
  display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:calc(0.16em + var(--ls-add));
  text-transform:uppercase; font-weight:600; padding:16px 30px; border:1px solid currentColor;
  cursor:pointer; background:none; transition:all .25s ease; white-space:nowrap;
}
.btn svg{width:13px; height:13px; transition:transform .25s ease;}
.btn:hover svg{transform:translateX(4px);}
.btn-gold{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-light); border-color:var(--gold-light);}
.btn-line-light{color:#fff; border-color:rgba(255,255,255,0.4);}
.btn-line-light:hover{border-color:var(--gold); color:var(--gold);}
.btn-line-dark{color:var(--navy); border-color:var(--navy);}
.btn-line-dark:hover{background:var(--navy); color:#fff;}
.btn-ghost-gold{color:var(--gold); border-color:rgba(200,169,126,0.5);}
.btn-ghost-gold:hover{background:var(--gold); color:var(--navy);}
.btn[disabled]{opacity:0.55; cursor:not-allowed;}

/* ---------- HEADER ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(20,22,29,0.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark);}
.headwrap{max-width:1400px; margin:0 auto; padding:0 36px; display:flex; align-items:center; justify-content:space-between; height:82px;}
.logo{display:flex; align-items:center; gap:16px;}
.logo-img{height:28px; width:auto; display:block; flex:none;}
.logo-tagline{font-size:9px; letter-spacing:calc(0.22em + var(--ls-add)); text-transform:uppercase; color:var(--gold); font-weight:500; padding-left:16px; border-left:1px solid rgba(200,169,126,0.35); line-height:1.4; max-width:90px;}
@media (max-width:640px){ .logo-tagline{display:none;} }
nav.mainnav{display:flex; align-items:center; height:100%;}
.nitem{position:relative; height:100%; display:flex; align-items:center;}
.nlink{font-size:calc(11.5px * var(--menu-scale)); letter-spacing:calc(0.13em + var(--ls-add)); text-transform:uppercase; color:rgba(255,255,255,0.82); font-weight:500; padding:0 17px; height:100%; display:flex; align-items:center; gap:6px; cursor:pointer;}
.nlink:hover, .nlink.active{color:var(--gold);}
.nlink svg{width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2;}
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); background:rgba(12,13,18,0.99);
  border:1px solid var(--line-dark); padding:30px; display:grid; grid-template-columns:repeat(5,150px); gap:0;
  opacity:0; visibility:hidden; transition:opacity .25s ease; min-width:700px;
}
.nitem:hover .mega, .nitem:focus-within .mega{opacity:1; visibility:visible;}
.mega-col{padding-right:20px;}
.mega-title{font-size:10px; letter-spacing:calc(0.16em + var(--ls-add)); text-transform:uppercase; color:var(--gold); font-weight:600; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line-dark);}
.mega-link{display:block; font-size:calc(12.5px * var(--menu-scale)); color:rgba(255,255,255,0.72); padding:5px 0;}
.mega-link:hover{color:var(--gold);}

/* ---------- simple dropdown for admin-managed extra menu items (admin/menus.php) ---------- */
.simple-drop{
  position:absolute; top:100%; left:0; background:rgba(12,13,18,0.99); border:1px solid var(--line-dark);
  padding:10px 0; min-width:200px; opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:5;
}
.nitem-simple:hover .simple-drop, .nitem-simple:focus-within .simple-drop{opacity:1; visibility:visible;}
.simple-drop a{display:block; font-size:calc(12.5px * var(--menu-scale)); color:rgba(255,255,255,0.78); padding:9px 20px; letter-spacing:calc(0.03em + var(--ls-add));}
.simple-drop a:hover{color:var(--gold); background:rgba(255,255,255,0.04);}
.head-actions{display:flex; align-items:center; gap:18px;}
.head-phone{display:flex; align-items:center; gap:8px; color:#fff; font-size:13px;}
.head-phone svg{width:14px; height:14px; color:var(--gold);}
.lang-switch{display:flex; align-items:center; gap:2px; border:1px solid var(--line-dark); border-radius:3px; overflow:hidden;}
.lang-switch a{font-size:10.5px; letter-spacing:calc(0.06em + var(--ls-add)); padding:6px 8px; color:rgba(255,255,255,0.55); text-transform:uppercase; font-weight:600;}
.lang-switch a.active{color:var(--navy); background:var(--gold);}
.lang-switch a:hover:not(.active){color:var(--gold);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:22px; height:1.5px; background:#fff;}
#mobileNav{flex-direction:column; background:var(--navy-2); padding:8px 28px 26px; gap:0; max-height:80vh; overflow-y:auto;}
#mobileNav a{padding:12px 0; border-bottom:1px solid var(--line-dark); font-size:calc(13px * var(--menu-scale)); letter-spacing:calc(0.08em + var(--ls-add)); text-transform:uppercase; color:#e9e2d6; display:block;}
#mobileNav .msub{padding-left:14px;}
#mobileNav .mcat{color:var(--gold); font-size:calc(10.5px * var(--menu-scale)); letter-spacing:calc(0.16em + var(--ls-add)); padding-top:16px; border-bottom:none;}
#mobileNav .mlangs{display:flex; gap:8px; padding:16px 0 4px; border-bottom:none;}
#mobileNav .mlangs a{border:1px solid var(--line-dark); padding:8px 14px; flex:1; text-align:center;}
#mobileNav .mlangs a.active{background:var(--gold); color:var(--navy); border-color:var(--gold);}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:600px; height:100vh; display:flex; align-items:flex-end; background-size:cover; background-position:center;}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,13,18,0.92) 0%, rgba(12,13,18,0.62) 48%, rgba(12,13,18,0.28) 78%), linear-gradient(0deg, rgba(12,13,18,0.7) 0%, rgba(12,13,18,0.1) 55%);}
.hero-inner{position:relative; z-index:2; padding:0 40px 90px; max-width:1400px; margin:0 auto; width:100%;}
.hero h1{color:#fff; font-size:clamp(calc(40px * var(--heading-scale)),calc(5.6vw * var(--heading-scale)),calc(74px * var(--heading-scale))); max-width:820px; margin-top:16px; font-weight:300;}
.hero .sub{font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); color:rgba(255,255,255,0.62); margin-top:6px; font-style:italic;}
.hero p.desc{color:rgba(255,255,255,0.68); max-width:520px; margin-top:22px; font-size:15.5px;}
.hero-cta{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- TRUST BAND ---------- */
.trust{background:var(--navy); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.trust-item{padding:30px 20px; text-align:center; border-left:1px solid var(--line-dark);}
.trust-item:first-child{border-left:none;}
.trust-num{font-family:var(--serif); font-size:clamp(26px,3vw,38px); color:var(--gold); font-weight:400; font-variant-numeric:tabular-nums;}
.trust-label{font-size:10.5px; letter-spacing:calc(0.12em + var(--ls-add)); text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:5px; font-weight:500;}

/* ---------- SECTION GENERIC ---------- */
.section{padding:calc(104px * var(--section-spacing-scale)) 0;}
.section.cream{background:var(--cream);}
.section.white{background:var(--white);}
.section.tint{background:var(--cream-2);}
.section-head{max-width:660px; margin-bottom:calc(52px * var(--section-spacing-scale));}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(calc(30px * var(--heading-scale)),calc(3.6vw * var(--heading-scale)),calc(46px * var(--heading-scale))); margin-top:14px; font-weight:400;}
.section-head p{margin-top:16px; font-size:16px;}

/* ---------- ABOUT TEASER ---------- */
.about-split{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.about-media{position:relative;}
.about-media img{width:100%; height:540px; object-fit:cover;}
.about-media .frame{position:absolute; top:-20px; left:-20px; width:100%; height:100%; border:1px solid var(--gold-deep); z-index:-1;}
.quote-block{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--navy); line-height:calc(1.55 * var(--lh-scale)); padding-left:26px; border-left:2px solid var(--gold); margin:22px 0; letter-spacing:var(--ls-add);}
.about-copy p + p{margin-top:15px;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:34px 0; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-row .n{font-family:var(--serif); font-size:34px; color:var(--gold-deep); font-weight:400;}
.stat-row .l{font-size:10.5px; letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--ink-soft); margin-top:3px; font-weight:500;}

/* ---------- PROCEDURE TABS + GRID ---------- */
.proc-tabs{display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:0 auto 50px; border:1px solid var(--line); width:fit-content;}
.proc-tab{font-size:11px; letter-spacing:calc(0.12em + var(--ls-add)); text-transform:uppercase; font-weight:600; padding:13px 26px; background:none; border:none; border-right:1px solid var(--line); cursor:pointer; color:var(--ink-soft);}
.proc-tab:last-child{border-right:none;}
.proc-tab.active, .proc-tab:hover{background:var(--navy); color:var(--gold);}
.proc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px;}
.proc-card{position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer; background:var(--navy); display:block;}
.proc-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:saturate(0.9);}
.proc-card:hover img{transform:scale(1.06);}
.proc-card::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,13,18,0.94) 0%, rgba(12,13,18,0.2) 55%, rgba(12,13,18,0.05) 100%);}
.proc-num{position:absolute; top:18px; left:22px; z-index:2; font-family:var(--serif); font-size:11px; color:rgba(200,169,126,0.55); letter-spacing:calc(0.14em + var(--ls-add));}
.proc-body{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; transition:transform .3s ease;}
.proc-cat{font-size:9.5px; letter-spacing:calc(0.16em + var(--ls-add)); text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:600;}
.proc-body h3{color:#fff; font-size:calc(21px * var(--heading-scale)); font-weight:400;}
.proc-body p{color:rgba(255,255,255,0.6); font-size:12.5px; margin-top:7px; line-height:calc(1.55 * var(--lh-scale));}
.proc-link{font-size:10.5px; letter-spacing:calc(0.12em + var(--ls-add)); text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:12px; display:flex; align-items:center; gap:7px;}
.proc-card[hidden]{display:none;}
.proc-more{text-align:center; margin-top:48px;}

/* ---------- CHIP LIST ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:11px;}
.chip{border:1px solid var(--line); padding:10px 18px; font-size:12.5px; color:var(--ink); background:var(--white);}

/* ---------- DARK CREDENTIALS PANEL ---------- */
.dark-panel{background:var(--navy); color:#fff; padding:56px;}
.tabbtns{display:flex; flex-wrap:wrap; gap:2px; margin-bottom:32px;}
.tabbtn{background:rgba(255,255,255,0.06); color:#e9e2d6; border:none; padding:13px 22px; font-size:10.5px; letter-spacing:calc(0.14em + var(--ls-add)); text-transform:uppercase; cursor:pointer; font-weight:600;}
.tabbtn.active{background:var(--gold); color:var(--navy);}
.tabpane{display:none; flex-direction:column; gap:18px;}
.tabpane.active{display:flex;}
.tabpane .row b{display:block; color:var(--gold); font-size:14px; margin-bottom:3px; font-weight:600;}
.tabpane .row span{font-size:13.5px; color:#cfc6b8; line-height:calc(1.6 * var(--lh-scale));}

/* ---------- TEAM GRID ---------- */
.team-grid{display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:230px; gap:3px;}
.team-cell{position:relative; overflow:hidden; grid-row:span 1;}
.team-cell.big{grid-row:span 2;}
.team-cell img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.team-cell:hover img{transform:scale(1.06);}
.team-cell::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,13,18,0.85), transparent 55%);}
.team-info{position:absolute; left:18px; bottom:16px; z-index:2;}
.team-info b{display:block; color:#fff; font-size:14.5px; font-weight:500;}
.team-info span{font-size:10.5px; color:var(--gold); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase;}

/* ---------- GALLERY ---------- */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.gal-item{position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer; border:none; padding:0; width:100%; display:block;}
.gal-item[hidden]{display:none;}
.gal-item img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.85) brightness(0.9); transition:filter .4s ease, transform .5s ease;}
.gal-item:hover img{filter:grayscale(0) brightness(1); transform:scale(1.05);}
.gal-label{position:absolute; top:10px; left:10px; z-index:2; font-size:9px; letter-spacing:calc(0.12em + var(--ls-add)); text-transform:uppercase; font-weight:700; background:rgba(12,13,18,0.8); color:#fff; padding:4px 9px;}
.gal-info{position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg, rgba(12,13,18,0.92), transparent); z-index:2; opacity:0; transform:translateY(6px); transition:all .3s ease;}
.gal-item:hover .gal-info{opacity:1; transform:translateY(0);}
.gal-info b{color:#fff; font-size:13px; font-weight:500;}
.gal-info span{display:block; color:var(--gold); font-size:11px; margin-top:2px;}
.gal-disclaimer{font-size:13px; color:var(--ink-soft); margin-bottom:20px; background:var(--cream-2); border-left:2px solid var(--gold); padding:14px 18px;}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:600; background:rgba(12,13,18,0.94); display:flex; align-items:center; justify-content:center; padding:40px;}
.lightbox[hidden]{display:none;}
.lightbox-inner{max-width:1000px; width:100%;}
.lightbox-inner img{width:100%; max-height:72vh; object-fit:contain; background:#000;}
.lightbox-cap{color:#e9e2d6; text-align:center; margin-top:16px; font-size:13.5px; letter-spacing:var(--ls-add);}
.lightbox-close{position:absolute; top:22px; right:28px; color:#fff; font-size:28px; background:none; border:none; cursor:pointer; line-height:1;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:34px; cursor:pointer; padding:10px 16px;}
.lightbox-prev{left:10px;}
.lightbox-next{right:10px;}

/* ---------- BEFORE/AFTER PATIENT GALLERY (procedure detail pages) ----------
   Modern card: before + after shown side by side (no divider/carousel).
   Clicking a case pops up a modal with both images at full size at once --
   never a one-at-a-time sliding lightbox. Each case is fully independent. */
.ba-strip{margin:22px 0 6px;}
.ba-strip-top{margin-top:8px;}
.ba-strip h4{font-size:calc(13px * var(--heading-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:14px;}
.ba-track{display:grid; grid-template-columns:1fr; gap:12px;}
.ba-note{font-size:calc(12px * var(--caption-scale)); color:var(--ink-soft); margin-top:14px; font-style:italic; letter-spacing:var(--ls-add);}

/* Borderless "gold hairline editorial" treatment: no card, no border --
   just square photos with a thin gold rule and a small uppercase caption
   underneath, echoing the serif/gold vocabulary used across the rest of
   the site (About page pull-quotes, section eyebrows). */
.ba-case{position:relative; cursor:pointer; padding-bottom:14px;}
.ba-case:focus-visible{outline:2px solid var(--gold-deep); outline-offset:8px;}
.ba-case-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; max-width:480px;}
.ba-case-label{font-family:var(--serif); font-style:italic; font-size:calc(18px * var(--caption-scale)); font-weight:500; color:var(--gold-deep); letter-spacing:var(--ls-add);}
.ba-case-badge{font-size:calc(8.5px * var(--caption-scale)); letter-spacing:calc(0.05em + var(--ls-add)); text-transform:uppercase; color:var(--gold-deep); background:rgba(200,169,126,0.14); padding:4px 8px; border-radius:20px; font-weight:600; white-space:nowrap;}
.ba-case-expand{font-size:calc(9.5px * var(--caption-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--ink-soft); font-weight:600; transition:color .2s ease;}
.ba-case:hover .ba-case-expand, .ba-case:focus-visible .ba-case-expand{color:var(--gold-deep);}
.ba-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:480px;}
.ba-tile-group{display:flex; flex-direction:column;}
.ba-tile{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; background:#fff;}
.ba-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.ba-case:hover .ba-tile img{transform:scale(1.04);}
.ba-underline{height:1px; background:var(--gold); opacity:0.5; margin-top:7px; transition:opacity .25s ease;}
.ba-case:hover .ba-underline, .ba-case:focus-visible .ba-underline{opacity:1;}
.ba-cap{font-size:calc(10.5px * var(--caption-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-top:4px;}

/* Compare modal: opened by a .ba-case click, shows every view (front, and
   side when present) for that one case, before/after side by side. */
.compare-modal{position:fixed; inset:0; z-index:500; background:rgba(10,11,15,0.86); display:flex; align-items:flex-start; justify-content:center; padding:5vh 20px; overflow-y:auto;}
.compare-modal[hidden]{display:none;}
.compare-modal-inner{position:relative; background:var(--white); width:100%; max-width:920px; border-radius:14px; padding:32px 32px 28px; margin:auto;}
.compare-modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--white); font-size:20px; line-height:1; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.compare-modal-close:hover{background:var(--cream-2);}
.compare-modal-title{font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:22px; padding-right:40px; letter-spacing:var(--ls-add);}
.compare-view + .compare-view{margin-top:28px; padding-top:28px; border-top:1px solid var(--line);}
.compare-modal-note + .compare-view{margin-top:24px; padding-top:24px; border-top:1px solid var(--line);}
.compare-view-label{font-size:calc(10.5px * var(--caption-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-bottom:12px;}
.compare-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.compare-pair figure{margin:0;}
.compare-pair img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; display:block;}
.compare-pair figcaption{text-align:center; font-size:calc(10.5px * var(--caption-scale)); letter-spacing:calc(0.09em + var(--ls-add)); text-transform:uppercase; font-weight:600; color:var(--ink-soft); margin-top:9px;}
.compare-modal-note{font-size:calc(12px * var(--caption-scale)); color:var(--ink-soft); font-style:italic; margin-top:14px; text-align:center; letter-spacing:var(--ls-add);}
@media (max-width:560px){
  .compare-modal-inner{padding:26px 18px 22px;}
  .compare-pair{gap:10px;}
}

/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testi-card{background:rgba(255,255,255,0.045); border:1px solid var(--line-dark); padding:34px;}
.testi-stars{color:var(--gold); font-size:13px; letter-spacing:calc(2px + var(--ls-add)); margin-bottom:16px;}
.testi-text{font-family:var(--serif); font-style:italic; font-size:17.5px; color:rgba(255,255,255,0.85); line-height:calc(1.6 * var(--lh-scale)); letter-spacing:var(--ls-add);}
.testi-name{margin-top:22px; font-size:13px; font-weight:600; color:#fff;}
.testi-loc{font-size:11.5px; color:var(--gold); margin-top:2px;}
.review-bar{display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin-top:56px; padding-top:36px; border-top:1px solid var(--line-dark);}
.rp{text-align:center;}
.rp .n{font-family:var(--serif); font-size:28px; color:var(--gold);}
.rp .l{font-size:10.5px; letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:3px;}

/* ---------- FINANCING / CONSULT ---------- */
.consult-grid{display:grid; grid-template-columns:1fr 1fr;}
.consult-left{background:var(--navy); padding:74px 60px; color:#fff;}
.consult-right{background:var(--cream-2); padding:74px 60px;}
.ftitle{font-size:clamp(28px,3vw,38px); color:#fff; margin-bottom:14px; letter-spacing:var(--ls-add);}
.consult-right .ftitle{color:var(--navy);}
.fsub{font-size:14px; color:rgba(255,255,255,0.55); margin-bottom:30px; max-width:420px; letter-spacing:var(--ls-add);}
.consult-right .fsub{color:var(--ink-soft);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.fgroup{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0;}
.fgroup.full{grid-column:1/-1;}
.flabel{font-size:9.5px; letter-spacing:calc(0.14em + var(--ls-add)); text-transform:uppercase; color:var(--gold); font-weight:600;}
.finput, .fselect, .ftextarea{background:rgba(255,255,255,0.06); border:1px solid var(--line-dark); color:#fff; padding:12px 13px; font-size:13px; font-family:var(--sans); width:100%; min-width:0;}
.finput::placeholder, .ftextarea::placeholder{color:rgba(255,255,255,0.3);}
.finput:focus, .fselect:focus, .ftextarea:focus{outline:none; border-color:var(--gold);}
.fselect option{background:var(--navy);}
.ftextarea{resize:vertical; min-height:76px;}
.fprivacy{font-size:11px; color:rgba(255,255,255,0.35); margin-top:4px; grid-column:1/-1;}
.fp-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}
.fp{border:1px solid var(--line); background:#fff; padding:13px 20px; font-size:13px; font-weight:600; color:var(--navy); letter-spacing:calc(0.02em + var(--ls-add));}
.perk-list{display:flex; flex-direction:column; gap:12px;}
.perk{display:flex; gap:11px; align-items:flex-start;}
.perk-dot{width:6px; height:6px; border-radius:50%; background:var(--gold-deep); margin-top:7px; flex:none;}
.perk span{font-size:14px; color:var(--ink-soft); line-height:calc(1.6 * var(--lh-scale));}
.honeypot{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0;}
.form-msg{margin-top:14px; font-size:13px; font-weight:600; padding:12px 14px; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{background:rgba(63,125,92,0.12); color:var(--ok); border-left:3px solid var(--ok);}
.form-msg.err{background:rgba(181,73,63,0.12); color:var(--err); border-left:3px solid var(--err);}
.form-msg.on-dark.ok{background:rgba(63,125,92,0.18);}
.form-msg.on-dark.err{background:rgba(181,73,63,0.18);}

/* ---------- PAGE HERO (inner) ---------- */
.page-hero{padding:186px 0 calc(84px * var(--section-spacing-scale)); background:var(--navy); position:relative; overflow:hidden; background-size:cover; background-position:center;}
.page-hero::after{content:''; position:absolute; inset:0; background:rgba(12,13,18,0.82);}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{color:#fff; font-size:clamp(calc(32px * var(--heading-scale)),calc(4.2vw * var(--heading-scale)),calc(50px * var(--heading-scale))); margin-top:14px;}
.page-hero .sub{color:var(--gold-light); font-family:var(--serif); font-style:italic; font-size:19px; margin-top:6px;}
.crumb{font-size:12px; color:#c9c2b8; margin-top:16px;}
.crumb a{color:var(--gold); font-weight:500;}
.crumb a:hover{text-decoration:underline;}

/* ---------- PROCEDURE DETAIL TEMPLATE ---------- */
.pd-grid{display:grid; grid-template-columns:1.3fr 0.9fr; gap:64px;}
.pd-tagline{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--gold-deep); margin:14px 0 22px; letter-spacing:var(--ls-add);}
.pd-body p{margin-bottom:16px; font-size:15.5px;}
.pd-list{list-style:none; margin:22px 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.pd-list li{display:flex; gap:12px; font-size:14.5px; color:var(--ink); align-items:flex-start;}
.pd-list li::before{content:'\2022'; color:var(--gold-deep); flex:none; font-family:var(--serif); font-size:18px; line-height:1;}
.pd-candidacy{background:var(--cream-2); border-left:2px solid var(--gold); padding:18px 22px; font-size:13.5px; color:var(--ink-soft); margin-top:8px;}
.pd-side{position:sticky; top:110px; align-self:start;}
.pd-side img{width:100%; height:360px; object-fit:cover; margin-bottom:22px;}
.pd-help{background:var(--navy); color:#fff; padding:30px; margin-bottom:22px;}
.pd-help h4{color:var(--gold); font-size:calc(13px * var(--heading-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; font-family:var(--sans); font-weight:600; margin-bottom:10px;}
.pd-help p{color:#d9d1c4; font-size:13.5px; line-height:calc(1.7 * var(--lh-scale));}
.pd-related{margin-top:16px;}
.pd-related h4{font-size:calc(12px * var(--heading-scale)); letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:12px;}
.pd-related a{display:block; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--navy);}
.pd-related a:hover{color:var(--gold-deep);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact-card{background:var(--navy); color:#fff; padding:46px;}
.contact-card h3{color:#fff; font-size:calc(24px * var(--heading-scale));}
.cc-row{display:flex; gap:15px; margin-top:24px; align-items:flex-start;}
.cc-row svg{width:18px; height:18px; color:var(--gold); flex:none; margin-top:3px;}
.cc-row b{display:block; font-size:11px; letter-spacing:calc(0.1em + var(--ls-add)); text-transform:uppercase; color:var(--gold); margin-bottom:4px; font-weight:600;}
.cc-row span{font-size:14px; color:#e9e2d6; line-height:calc(1.6 * var(--lh-scale));}
.social-row{display:flex; gap:11px; margin-top:30px;}
.social-row a{width:37px; height:37px; border:1px solid rgba(200,169,126,0.5); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.social-row svg{width:15px; height:15px; color:var(--gold);}
.map-note{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-dark); font-size:12.5px; color:#b9b0a2; line-height:calc(1.7 * var(--lh-scale));}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-2); color:#b6ada0; padding:64px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line-dark);}
.foot-grid > div{min-width:0;}
footer h4{color:#fff; font-size:calc(11px * var(--heading-scale)); letter-spacing:calc(0.14em + var(--ls-add)); text-transform:uppercase; margin-bottom:16px; font-weight:600;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer ul a{font-size:13px; color:#b6ada0;}
footer ul a:hover{color:var(--gold);}
.foot-logo{display:flex; align-items:center; flex-wrap:wrap; row-gap:6px; gap:16px; margin-bottom:16px; max-width:100%;}
.foot-logo .logo-img{height:24px;}
.foot-bio{font-size:13px; color:#8f887c; line-height:calc(1.7 * var(--lh-scale)); max-width:270px;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:11.5px; color:#726b60; flex-wrap:wrap; gap:10px;}
.foot-langs{display:flex; gap:10px;}
.foot-langs a{color:#8f887c;}
.foot-langs a.active{color:var(--gold);}

/* ---------- FLOATING CTA CLUSTER (call / whatsapp / book) ---------- */
.float-cluster{position:fixed; right:24px; bottom:24px; z-index:150; display:flex; align-items:center; gap:10px;}
.float-cta{background:var(--navy); color:var(--gold); padding:15px 22px; display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:calc(0.12em + var(--ls-add)); text-transform:uppercase; font-weight:600; box-shadow:var(--shadow); cursor:pointer; border:1px solid var(--line-dark); white-space:nowrap;}
.float-cta svg{width:16px; height:16px;}
.float-icon-btn{
  flex:none; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--gold); box-shadow:var(--shadow); border:1px solid var(--line-dark); cursor:pointer;
  transition:transform .2s ease;
}
.float-icon-btn:hover{transform:translateY(-2px);}
.float-icon-btn svg{width:20px; height:20px;}
.float-whatsapp{background:#25D366; color:#fff; border-color:#25D366;}

@media (max-width:480px){
  .float-cluster{right:14px; bottom:14px; gap:8px;}
  .float-cta{padding:13px 16px;}
  .float-cta svg{display:none;}
  .float-icon-btn{width:44px; height:44px;}
  .float-icon-btn svg{width:18px; height:18px;}
  /* Two-column name/email/phone form fields (home "Book Your Consultation"
     panel + contact page) don't shrink below their inputs' natural width,
     which pushed the whole section wider than the screen on phones and
     caused the page to scroll horizontally. Stack to one column here. */
  .form-grid{grid-template-columns:1fr;}
  .consult-left, .consult-right{padding:48px 24px;}
  /* Some buttons pair a longer translated label with an icon on one
     nowrap line, which is wider than very narrow phones (~320px) and
     was pushing the page into horizontal scroll. Let them wrap instead. */
  .btn{white-space:normal; text-align:center; padding:14px 20px;}
}

/* ==================================================================
   STANDALONE LANDING PAGES (no header/footer chrome, own single CTA)
   ================================================================== */
body.landing-page{background:var(--cream);}
.lp-header{position:static; background:var(--navy); border-bottom:1px solid var(--line-dark);}
.lp-header .headwrap{height:70px; justify-content:center;}
.lp-hero{padding:70px 0 60px; background:var(--navy); background-size:cover; background-position:center; position:relative;}
.lp-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,13,18,0.93) 0%, rgba(12,13,18,0.72) 55%, rgba(12,13,18,0.4) 100%);}
.lp-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start;}
.lp-hero h1{color:#fff; font-size:clamp(calc(32px * var(--heading-scale)),calc(4.4vw * var(--heading-scale)),calc(52px * var(--heading-scale))); margin-top:14px;}
.lp-hero .sub{font-family:var(--serif); font-style:italic; color:var(--gold-light); font-size:19px; margin-top:8px;}
.lp-hero p.desc{color:rgba(255,255,255,0.72); margin-top:20px; font-size:15.5px; max-width:520px;}
.lp-trust-row{display:flex; gap:26px; flex-wrap:wrap; margin-top:28px;}
.lp-trust-row div{color:rgba(255,255,255,0.7); font-size:12.5px; display:flex; align-items:center; gap:8px;}
.lp-trust-row div::before{content:'✓'; color:var(--gold); font-weight:700;}
.lp-form-card{background:var(--white); padding:36px; box-shadow:var(--shadow); border-top:3px solid var(--gold);}
.lp-form-card h3{font-size:calc(22px * var(--heading-scale));}
.lp-form-card .fnote{font-size:12.5px; color:var(--ink-soft); margin-top:6px; margin-bottom:20px;}
.lp-form-card .fgroup{margin-bottom:14px;}
.lp-form-card .flabel{color:var(--gold-deep);}
.lp-form-card .finput, .lp-form-card .fselect, .lp-form-card .ftextarea{background:var(--cream-2); color:var(--ink); border-color:var(--line);}
.lp-body{padding:80px 0;}
.lp-body .wrap{max-width:840px;}
.lp-body h2{font-size:clamp(calc(26px * var(--heading-scale)),calc(3vw * var(--heading-scale)),calc(36px * var(--heading-scale))); margin-bottom:18px;}
.lp-body p{font-size:15.5px; margin-bottom:16px;}
.lp-body ul{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; margin:22px 0;}
.lp-body ul li{display:flex; gap:12px; font-size:15px; color:var(--ink);}
.lp-body ul li::before{content:'\2022'; color:var(--gold-deep); font-family:var(--serif); flex:none; font-size:18px; line-height:1;}
.lp-body.white{background:var(--white);}
.lp-body.tint{background:var(--cream-2);}
.lp-body.lp-extra-info h2{font-size:calc(26px * var(--heading-scale));}
.lp-body.lp-mini-gallery .wrap{max-width:760px;}
.lp-body.lp-mini-gallery .ba-track{grid-template-columns:repeat(2,1fr); max-width:none;}
@media (max-width:640px){
  .lp-body.lp-mini-gallery .ba-track{grid-template-columns:1fr;}
}
.lp-cta-band{background:var(--navy); padding:54px 0; text-align:center;}
.lp-cta-band h3{color:#fff; font-size:calc(26px * var(--heading-scale)); margin-bottom:18px;}
.lp-footer{background:var(--navy-2); color:#8f887c; padding:30px 0; font-size:12px; text-align:center;}
.lp-footer a{color:var(--gold);}
@media (max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr;}
  .lp-hero-grid > *{min-width:0;}
}

/* ---------------- FAQ page ---------------- */
.faq-tabs{display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:0 auto 56px; border:1px solid var(--line); width:fit-content; max-width:100%;}
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item[hidden]{display:none;}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 4px; font-family:var(--serif); font-size:18.5px; color:var(--ink); font-weight:500; transition:color .2s ease;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold-deep);}
.faq-icon{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); font-size:16px; font-family:var(--sans); transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;}
.faq-item[open] .faq-icon{background:var(--gold); border-color:var(--gold); color:var(--navy); transform:rotate(45deg);}
.faq-a{padding:0 46px 26px 4px; max-width:700px;}
.faq-cat-tag{display:inline-block; font-size:8.5px; letter-spacing:calc(0.08em + var(--ls-add)); text-transform:uppercase; color:var(--gold-deep); background:rgba(200,169,126,0.14); padding:4px 9px; border-radius:20px; font-weight:600; margin-bottom:12px;}
.faq-a p{font-size:14.5px; color:var(--ink-soft); line-height:calc(1.7 * var(--lh-scale));}

/* ---------- CMS content blocks (admin-authored pages, includes/cms-render.php) ---------- */
.cms-block + .cms-block{padding-top:0;}
.cms-heading-wrap h2, .cms-heading-wrap h3{margin-top:10px;}
.cms-richtext{max-width:760px; margin:0 auto; font-size:16px; line-height:calc(1.75 * var(--lh-scale)); color:var(--ink-soft);}
.cms-richtext p{margin:0 0 16px;}
.cms-richtext a{color:var(--gold-deep); text-decoration:underline;}
.cms-image-wrap{text-align:center;}
.cms-figure{margin:0;}
.cms-figure img{max-width:100%; height:auto; border-radius:2px;}
.cms-figure figcaption{margin-top:12px; font-size:12.5px; color:var(--ink-soft); font-style:italic;}
.cms-image-full img{width:100%; display:block; max-height:640px; object-fit:cover;}
.cms-gallery{display:grid; grid-template-columns:repeat(var(--cms-gal-cols,3), 1fr); gap:4px;}
.cms-gallery-item{margin:0; aspect-ratio:4/5; overflow:hidden;}
.cms-gallery-item img{width:100%; height:100%; object-fit:cover; display:block;}
.cms-box-grid{display:grid; grid-template-columns:repeat(var(--cms-box-cols,3), 1fr); gap:28px;}
.cms-box{border:1px solid var(--line); padding:30px 26px; background:var(--white);}
.cms-box h3{font-size:calc(19px * var(--heading-scale)); margin-bottom:10px;}
.cms-box p{margin:0; font-size:14.5px;}
.cms-cta{padding:80px 0;}
.cms-cta-navy{background:var(--navy); color:#fff;}
.cms-cta-navy p{color:rgba(255,255,255,0.72);}
.cms-cta-gold{background:var(--gold); color:var(--navy);}
.cms-cta-gold p{color:rgba(20,22,29,0.75);}
.cms-cta-inner{max-width:640px; text-align:center; margin:0 auto;}
.cms-cta-inner h2{margin-top:10px; color:inherit;}
.cms-cta-inner .btn{margin-top:22px;}
.cms-html-wrap{max-width:100%; overflow-x:auto;}

[hidden]{display:none !important;}

@media (max-width:1080px){
  nav.mainnav{display:none;}
  .burger{display:flex;}
  .about-split, .pd-grid, .contact-grid, .consult-grid{grid-template-columns:1fr;}
  .cms-box-grid{grid-template-columns:repeat(2,1fr);}
  .cms-gallery{grid-template-columns:repeat(2,1fr);}
  /* Once these grids stack to one column, their direct children still carry
     a CSS Grid item's default automatic minimum width (based on their
     content's min-content size), which can be wider than the column itself
     on narrow phones and push the whole page into horizontal scroll.
     min-width:0 lets them actually shrink to fit. */
  .about-split > *, .pd-grid > *, .contact-grid > *, .consult-grid > *{min-width:0;}
  .pd-side{position:static;}
  .proc-grid{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-left:none; border-bottom:1px solid var(--line-dark); min-width:0;}
  .trust-label{overflow-wrap:break-word;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .team-cell.big{grid-column:span 2;}
  .testi-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .dark-panel{padding:34px 22px;}
  .head-phone, .lang-switch, .head-book-btn{display:none;}
  .faq-item summary{font-size:16px; gap:14px;}
  .faq-a{padding-right:14px;}
}

@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
  .cms-box-grid, .cms-gallery{grid-template-columns:1fr;}
}