
:root{
  --void:#06080b;
  --ink:#101214;
  --ivory:#f6f1e8;
  --paper:#f7f3ec;
  --sand:#efe5d4;
  --graphite:#0c1116;
  --navy:#071727;
  --gold:#c8a977;
  --gold2:#d4a840;
  --gold3:#8a681a;
  --muted:#6b6460;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",Arial,sans-serif;
  --max:1220px;
  --fs-hero:clamp(42px,5.4vw,86px);
  --fs-h2:clamp(30px,3.4vw,54px);
  --fs-body:clamp(14px,1.05vw,16px);
  --fs-xs:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--void)}
body{background:var(--void);color:var(--ivory);font-family:var(--sans);font-weight:300;overflow-x:hidden}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.18;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='380' height='380' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.container{width:min(var(--max),calc(100% - 8vw));margin-inline:auto}

/* Navigation */
.nav{position:fixed;inset:0 0 auto 0;height:82px;z-index:1000;display:flex;align-items:center;background:linear-gradient(to bottom,rgba(6,8,11,.88),rgba(6,8,11,.36));backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.045);transition:.3s}
.nav.scrolled{height:70px;background:rgba(6,8,11,.94);border-bottom-color:rgba(200,169,119,.13)}
.nav-inner{width:min(var(--max),calc(100% - 8vw));margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:32px}
.wordmark{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1;text-transform:uppercase}
.wordmark .wl{color:var(--ivory);font-size:14px;font-weight:500;letter-spacing:5.5px}
.wordmark .wl2{margin-top:6px;padding-right:.04em;font-size:11px;letter-spacing:8px;color:var(--gold)}
.wordmark .wr{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold));margin-top:7px}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:var(--fs-xs);letter-spacing:2.4px;text-transform:uppercase;color:rgba(246,241,232,.56);position:relative;padding:8px 0;transition:color .24s}
.nav-links a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--gold);transition:width .25s}
.nav-links a:hover,.nav-links a.active{color:var(--ivory)}
.nav-links a:hover:after,.nav-links a.active:after{width:100%}
.mobile-toggle{display:none;background:none;border:0;color:var(--ivory);font-size:11px;letter-spacing:2.4px;text-transform:uppercase}

/* Image handling */
.image-section{position:relative;overflow:hidden;isolation:isolate;background:#06080b}
.image-layer{position:absolute;inset:0;z-index:-4;display:flex;align-items:center;justify-content:center;background:#06080b}
.image-layer img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center}
.image-layer.contain img{object-fit:contain}
.image-section:after{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 62% 36%,rgba(212,168,64,.09),transparent 32%),linear-gradient(90deg,rgba(6,8,11,.86) 0%,rgba(6,8,11,.56) 42%,rgba(6,8,11,.18) 100%),linear-gradient(to bottom,rgba(6,8,11,.08),rgba(6,8,11,.72))}
.hero:after{background:linear-gradient(90deg,rgba(6,8,11,.76) 0%,rgba(6,8,11,.42) 38%,rgba(6,8,11,.08) 100%),linear-gradient(to bottom,rgba(6,8,11,.05),rgba(6,8,11,.45))}
.contact-section:after{background:linear-gradient(90deg,rgba(6,8,11,.86) 0%,rgba(6,8,11,.64) 45%,rgba(6,8,11,.18) 100%),linear-gradient(to bottom,rgba(6,8,11,.05),rgba(6,8,11,.62))}
.grid-overlay{position:absolute;inset:0;z-index:-2;opacity:.08;background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:72px 72px;pointer-events:none}
.haze{position:absolute;left:-20%;right:-20%;bottom:-32%;height:58%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(200,169,119,.12),rgba(6,8,11,.96));filter:blur(36px);z-index:-1;pointer-events:none}

/* Type */
.kicker{display:flex;align-items:center;gap:14px;color:var(--gold2);font-size:var(--fs-xs);letter-spacing:5px;text-transform:uppercase;font-weight:500}
.kicker:before{content:"";width:36px;height:1px;background:var(--gold)}
.heading{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.4px}
.heading em{font-style:italic;color:var(--gold2)}
.lead{color:rgba(246,241,232,.76);font-size:clamp(16px,1.2vw,19px);line-height:1.85}
.body{font-size:var(--fs-body);line-height:1.95}
.section-title{font-family:var(--serif);font-size:var(--fs-h2);font-weight:400;line-height:1.12;letter-spacing:-.3px}
.section-title em{font-style:italic;color:var(--gold)}
.label{display:block;color:var(--gold);font-size:var(--fs-xs);font-weight:600;letter-spacing:5px;text-transform:uppercase;margin-bottom:18px}

/* Hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:82px}
.hero-content{max-width:790px;padding:10vh 0 12vh}
.hero .kicker{margin-bottom:34px}
.hero h1{font-size:var(--fs-hero);max-width:900px}
.hero p{max-width:640px;margin-top:34px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 32px;border:1px solid transparent;font-size:var(--fs-xs);letter-spacing:2.5px;text-transform:uppercase;font-weight:500;transition:.25s}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:var(--gold3)}
.btn-ghost{border-color:rgba(246,241,232,.24);color:rgba(246,241,232,.75)}
.hero-note{position:absolute;right:4vw;bottom:34px;max-width:330px;color:rgba(246,241,232,.52);font-size:12px;letter-spacing:.12em;line-height:1.9;text-transform:uppercase;border-left:1px solid rgba(200,169,119,.45);padding-left:18px}

/* Sections */
.section{padding:clamp(88px,9vw,140px) 0;position:relative}
.paper{background:var(--paper);color:var(--ink)}
.sand{background:var(--sand);color:var(--ink)}
.dark{background:var(--graphite);color:var(--ivory)}
.navy{background:var(--navy);color:var(--ivory)}
.split{display:grid;grid-template-columns:1fr 1.65fr;gap:clamp(54px,7vw,88px);align-items:start}
.sticky{position:sticky;top:112px}
.gold-bar{display:block;width:44px;height:2px;background:var(--gold);margin-top:28px}
.bodycol{display:flex;flex-direction:column;gap:30px}
.para{color:var(--muted);border-left:2px solid rgba(184,146,42,.22);padding-left:26px;font-size:var(--fs-body);line-height:1.95}
.para strong{color:var(--ink);font-weight:500}
.dark .para,.navy .para,.image-section .para{color:rgba(216,209,195,.74);border-left-color:rgba(200,169,119,.30)}
.dark .para strong,.navy .para strong,.image-section .para strong{color:var(--ivory)}
.dark .section-title,.navy .section-title,.image-section .section-title{color:var(--ivory)}
.dark .section-title em,.navy .section-title em,.image-section .section-title em{color:var(--gold2)}

.focus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:64px;background:rgba(16,18,20,.08);border:1px solid rgba(16,18,20,.08)}
.focus-card{background:#fff;padding:36px 26px 40px;min-height:285px;position:relative;overflow:hidden}
.focus-card:before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.focus-card small{font-family:var(--serif);font-size:36px;color:rgba(184,146,42,.18);display:block;margin-bottom:24px}
.focus-card h3{font-family:var(--serif);font-size:22px;font-weight:500;margin-bottom:14px}
.focus-card p{font-size:13px;line-height:1.85;color:var(--muted)}

.motto{min-height:64vh;display:grid;place-items:center}
.motto .image-layer img{object-fit:cover;object-position:center center}
.motto:after{background:radial-gradient(circle at 50% 42%,rgba(200,169,119,.20),transparent 34%),linear-gradient(90deg,rgba(6,8,11,.60),rgba(6,8,11,.30),rgba(6,8,11,.52)),linear-gradient(to bottom,rgba(6,8,11,.08),rgba(6,8,11,.76))}
.motto-box{text-align:center;padding:0 24px;position:relative;z-index:2}
.motto-box h2{font-family:var(--serif);font-size:clamp(34px,4.5vw,70px);font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--gold2);text-shadow:0 0 34px rgba(200,169,119,.22)}
.motto-box p{margin-top:20px;color:rgba(246,241,232,.8);font-size:12px;letter-spacing:.28em;text-transform:uppercase}

/* Subtle philosophy band */
.philosophy-section{min-height:auto;padding:72px 0}
.philosophy-wrap{display:grid;grid-template-columns:.85fr 1.7fr;gap:70px;align-items:center}
.philosophy-statement{font-family:var(--serif);font-size:clamp(22px,2.4vw,36px);font-weight:400;line-height:1.24;color:rgba(246,241,232,.78);max-width:420px}
.philosophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 58px}
.value-item{display:flex;align-items:center;gap:24px;color:rgba(246,241,232,.58);letter-spacing:.32em;text-transform:uppercase;font-size:clamp(10px,.9vw,13px);font-weight:500;white-space:nowrap}
.value-item:before{content:"";width:34px;height:1px;background:var(--gold)}
.value-item:after{content:"";width:1px;height:48px;background:linear-gradient(to bottom,transparent,var(--gold),transparent);opacity:.8;margin-left:auto}

/* Leadership flip */
.leadership-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:62px}
.flip-card{min-height:390px;perspective:1200px}
.flip-inner{position:relative;width:100%;height:100%;min-height:390px;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);padding:42px 34px;display:flex;flex-direction:column}
.card-back{transform:rotateY(180deg);background:rgba(6,8,11,.70)}
.initial{width:54px;height:54px;border:1px solid rgba(200,169,119,.38);display:grid;place-items:center;color:var(--gold2);font-family:var(--serif);font-size:18px;margin-bottom:28px}
.card-face h3{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:18px}
.role{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.role span{color:var(--gold2);font-size:var(--fs-xs);letter-spacing:2.5px;text-transform:uppercase;line-height:1.3}
.card-face p{color:rgba(216,209,195,.76);line-height:1.88;font-size:13px}
.flip-hint{margin-top:auto;color:rgba(216,209,195,.38);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding-top:24px}
.back-block{border-left:1px solid rgba(200,169,119,.35);padding-left:16px;margin-bottom:20px}
.back-block small{display:block;color:var(--gold2);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;margin-bottom:6px}
.back-block p{font-size:13px;color:rgba(216,209,195,.68);line-height:1.7}

/* Contact */
.contact-section{min-height:92vh;display:flex;align-items:center}
.contact-section .image-layer img{object-fit:contain;object-position:center center}
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(54px,8vw,96px);align-items:start}
.contact-side{position:sticky;top:112px}
.contact-side h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:400;line-height:1.12;margin:24px 0}
.contact-side h2 em{font-style:italic;color:var(--gold2)}
.contact-detail{border-left:2px solid rgba(200,169,119,.38);padding-left:20px;margin-top:26px}
.contact-detail small{display:block;color:var(--gold2);font-size:var(--fs-xs);letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.contact-detail span,.contact-detail a{color:rgba(216,209,195,.72);line-height:1.7;font-size:13px}
.form-card{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);backdrop-filter:blur(12px);padding:48px}
.form-card h3{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:10px}
.form-card p{color:rgba(216,209,195,.54);font-size:13px;line-height:1.7;margin-bottom:30px}
.fg{margin-bottom:26px}.fg2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
label{display:block;color:var(--gold2);font-size:var(--fs-xs);font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);color:var(--ivory);padding:12px 0;outline:none;border-radius:0}
select option{background:#0d1e3a;color:var(--ivory)}
textarea{min-height:112px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;color:rgba(216,209,195,.55);font-size:11px;line-height:1.7;margin-bottom:26px}
.consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--gold)}
.submit{width:100%;border:0;background:var(--gold);color:#fff;padding:17px;font-size:var(--fs-xs);font-weight:600;letter-spacing:3px;text-transform:uppercase}

.footer{position:relative;background:#06080b;border-top:1px solid rgba(255,255,255,.06);min-height:140px}
.footer-inner{width:min(var(--max),calc(100% - 8vw));margin-inline:auto;padding:44px 0 72px;display:flex;justify-content:space-between;gap:40px}
.footer-links{display:flex;gap:30px;flex-wrap:wrap}
.footer-links a{font-size:var(--fs-xs);letter-spacing:2.5px;text-transform:uppercase;color:rgba(216,209,195,.32)}
.footer-motto{font-family:var(--serif);font-style:italic;color:rgba(200,169,119,.58)}
.copyright{position:absolute;right:28px;bottom:20px;color:rgba(216,209,195,.24);font-size:10px;letter-spacing:.08em}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@media(max-width:1180px){.philosophy-wrap{grid-template-columns:1fr;gap:42px}}
@media(max-width:1060px){.focus-grid{grid-template-columns:1fr 1fr}.focus-card:last-child{grid-column:span 2}.philosophy-grid{grid-template-columns:1fr 1fr}}
@media(max-width:960px){
  .nav{height:70px}.mobile-toggle{display:block}
  .nav-links{position:fixed;top:70px;left:4vw;right:4vw;display:none;flex-direction:column;align-items:flex-start;gap:18px;padding:24px;background:rgba(6,8,11,.98);border:1px solid rgba(255,255,255,.08)}
  .nav-links.open{display:flex}
  .hero{padding-top:70px}
  .hero .image-layer img{object-fit:cover;object-position:center center}
  .contact-section .image-layer img{object-fit:cover;object-position:center center}
  .split,.contact-grid{grid-template-columns:1fr}
  .sticky,.contact-side{position:static}
  .leadership-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
}
@media(max-width:620px){
  .container,.nav-inner,.footer-inner{width:calc(100% - 42px)}
  .wordmark .wl{font-size:12px;letter-spacing:4px}.wordmark .wl2{font-size:9px;letter-spacing:6px}
  .hero h1{font-size:clamp(38px,12vw,58px)}
  .hero-content{max-width:100%}
  .hero-actions{flex-direction:column}.btn{width:100%}
  .hero-note{display:none}
  .focus-grid,.philosophy-grid{grid-template-columns:1fr}
  .focus-card:last-child{grid-column:auto}
  .value-item:after{display:none}
  .fg2{grid-template-columns:1fr}
  .flip-card,.flip-inner{min-height:430px}
}


/* V17 wordmark override: original-inspired right-stacked alignment */
.wordmark{display:inline-flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1;text-transform:uppercase;min-width:170px}
.wordmark .wl{color:var(--ivory);font-size:15px;font-weight:600;letter-spacing:6px;width:100%}
.wordmark .wl2{margin-top:7px;width:72%;align-self:flex-end;padding-right:1px;font-size:11px;font-weight:500;letter-spacing:8.5px;color:var(--gold)}
.wordmark .wr{display:block;width:72%;align-self:flex-end;height:1px;background:linear-gradient(90deg,transparent,var(--gold));margin-top:8px}

/* V17 image handling: centered Majlis, high-res secondary assets, wide-perspective contact */
.motto .image-layer img{object-fit:cover;object-position:center center}
.contact-section .image-layer img{object-fit:contain;object-position:center center}
@media(max-width:960px){
  .contact-section .image-layer img{object-fit:cover;object-position:center center}
}
@media(max-width:620px){
  .wordmark{min-width:142px}
  .wordmark .wl{font-size:12px;letter-spacing:4.8px}
  .wordmark .wl2{font-size:9px;letter-spacing:6.6px;width:72%}
  .wordmark .wr{width:72%}
}


/* V18 precise wordmark lock:
   CAPITAL right edge finishes flush with AUDENTIA.
   CAPITAL is tucked beneath the DENTIA area rather than sitting below the full word.
   No icon. No underline. */
.wordmark{
  --wm-width: 178px;
  --capital-width: 66%;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  text-align:right !important;
  width:var(--wm-width) !important;
  min-width:var(--wm-width) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}
.wordmark .wl{
  display:block !important;
  width:100% !important;
  color:var(--ivory) !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:6px !important;
  text-align:justify !important;
  text-align-last:justify !important;
  white-space:nowrap !important;
}
.wordmark .wl2{
  display:block !important;
  width:var(--capital-width) !important;
  align-self:flex-end !important;
  margin-top:7px !important;
  padding-right:0 !important;
  color:var(--gold) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:6.8px !important;
  text-align:justify !important;
  text-align-last:justify !important;
  white-space:nowrap !important;
}
.wordmark .wr{display:none !important}

/* V18 finesse */
.nav{background:linear-gradient(to bottom,rgba(6,8,11,.91),rgba(6,8,11,.42))}
.hero-content{max-width:760px}
.hero h1{letter-spacing:-.6px}
.motto-box h2{letter-spacing:.10em}
.motto-box p{opacity:.72;font-size:10px}
.philosophy-section{padding:64px 0}
.philosophy-statement{font-size:clamp(21px,2.15vw,32px)}
.value-item{font-size:clamp(10px,.82vw,12px);letter-spacing:.30em}

@media(max-width:620px){
  .wordmark{
    --wm-width: 146px;
    --capital-width: 66%;
  }
  .wordmark .wl{
    font-size:12px !important;
    letter-spacing:4.8px !important;
  }
  .wordmark .wl2{
    font-size:8.5px !important;
    letter-spacing:5.3px !important;
    margin-top:6px !important;
  }
}


/* V19 FINAL WORDMARK LOCK
   This matches the approved visual:
   AUDENTIA sits above CAPITAL.
   CAPITAL is tucked beneath the right-side DENTIA region.
   The right edge of CAPITAL finishes precisely flush with the right edge of AUDENTIA.
   No icon. No underline. Both words align from the right. */
.wordmark{
  --wm-width: 168px;
  --capital-width: 59%;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  width:var(--wm-width) !important;
  min-width:var(--wm-width) !important;
  line-height:1 !important;
  text-align:right !important;
  text-transform:uppercase !important;
}
.wordmark .wl{
  display:block !important;
  width:100% !important;
  color:var(--ivory) !important;
  font-family:var(--serif) !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:6.8px !important;
  line-height:1 !important;
  text-align:right !important;
  white-space:nowrap !important;
}
.wordmark .wl2{
  display:block !important;
  width:var(--capital-width) !important;
  align-self:flex-end !important;
  margin-top:7px !important;
  padding:0 !important;
  color:var(--gold) !important;
  font-family:var(--serif) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:5.1px !important;
  line-height:1 !important;
  text-align:right !important;
  white-space:nowrap !important;
}
.wordmark .wr{
  display:none !important;
}

/* Keep same treatment in footer */
.footer .wordmark{
  --wm-width: 168px;
  --capital-width: 59%;
}

@media(max-width:620px){
  .wordmark,
  .footer .wordmark{
    --wm-width: 140px;
    --capital-width: 59%;
  }
  .wordmark .wl{
    font-size:12px !important;
    letter-spacing:5.35px !important;
  }
  .wordmark .wl2{
    font-size:8.7px !important;
    letter-spacing:4.05px !important;
    margin-top:6px !important;
  }
}
