/* ═══════════════════════════════════════════════
   OLUWASETO F. OLUSETO & CO. — SHARED STYLESHEET
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }

:root {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  --gold:         #B8965A;
  --gold-light:   #D4AF70;
  --gold-pale:    #F5EDD8;
  --navy:         #0D1B2A;
  --navy-mid:     #1A2E42;
  --navy-soft:    #233547;
  --cream:        #FAF8F4;
  --cream-light:  #F2EFE9;
  --white:        #FFFFFF;
  --text-dark:    #0D1B2A;
  --muted:        #5A6A7A;
  --text-light:   #8A96A3;
  --border-light: #DDD5C5;
  --border-med:   #C8BBA8;
}

html  { scroll-behavior: smooth }
body  { font-family:'Jost',sans-serif; background:var(--cream); color:var(--text-dark); line-height:1.6; overflow-x:hidden }

/* ── TYPOGRAPHY ── */
h1,h2,h3 { font-family:'Playfair Display',serif }
h1        { font-size:clamp(2.4rem,4vw,3.6rem); font-weight:700; line-height:1.12 }
h2        { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; line-height:1.2 }
h3        { font-size:clamp(1.2rem,2vw,1.5rem); font-weight:600; line-height:1.3 }
p         { line-height:1.8 }

.section-title    { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; color:var(--navy); line-height:1.2; margin-bottom:.8rem }
.section-title em { font-style:italic; color:var(--gold) }
.section-desc     { font-size:.97rem; font-weight:300; color:var(--muted); line-height:1.9; max-width:620px }

/* ── LAYOUT ── */
.container { max-width:1280px; margin:0 auto; padding:0 2.5rem }
section    { padding:90px 0 }

/* ── EYEBROW ── */
.section-eyebrow      { display:flex; align-items:center; gap:12px; margin-bottom:1.1rem }
.section-eyebrow span { font-size:.62rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase; color:var(--gold) }
.eyebrow-line         { width:32px; height:1px; background:var(--gold); flex-shrink:0 }

/* ── BUTTONS ── */
.btn-primary { display:inline-block; background:var(--gold); color:var(--navy); padding:13px 30px; font-family:'Jost',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:background .2s }
.btn-primary:hover { background:var(--gold-light) }
.btn-outline  { display:inline-block; background:transparent; color:rgba(255,255,255,.8); padding:13px 30px; font-family:'Jost',sans-serif; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid rgba(255,255,255,.25); cursor:pointer; transition:all .2s }
.btn-outline:hover { border-color:var(--gold); color:var(--gold) }

/* ── CLOCK BAR ── */
.clock-bar { position:fixed; top:0; width:100%; background:var(--navy); border-bottom:1px solid rgba(184,150,90,.25); z-index:201; height:32px; display:flex; align-items:center }
.clock-bar-inner { max-width:1280px; margin:0 auto; padding:0 2.5rem; width:100%; display:flex; justify-content:space-between; align-items:center }
.clock-left { display:flex; align-items:center; gap:1.8rem }
.clock-item { display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:400; letter-spacing:.1em; color:rgba(255,255,255,.45) }
.clock-item .ci-icon { font-size:.75rem }
.clock-item .ci-val  { color:rgba(255,255,255,.7); font-weight:500 }
.clock-item .ci-label{ color:rgba(255,255,255,.32) }
.clock-right { display:flex; align-items:center; gap:1.5rem }
.clock-contact-link { font-size:.6rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-decoration:none; transition:color .2s }
.clock-contact-link:hover { color:var(--gold-light) }
#live-time { font-family:'Cormorant Garamond',serif; font-size:.82rem; font-weight:500; color:var(--gold-light); letter-spacing:.08em; min-width:80px }
#live-date { font-size:.62rem; font-weight:300; color:rgba(255,255,255,.5); letter-spacing:.06em }
.clock-divider { width:1px; height:14px; background:rgba(184,150,90,.2) }

/* ── NAV ── */
nav { position:fixed; top:32px; width:100%; background:rgba(13,27,42,.97); backdrop-filter:blur(8px); z-index:200; border-bottom:1px solid rgba(184,150,90,.2) }
.nav-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem; height:68px }
.nav-brand { text-decoration:none; display:flex; flex-direction:row; align-items:center; gap:0px }
.firm-name  { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:500; color:#fff; letter-spacing:.04em; white-space:nowrap }
.firm-sub   { font-size:.6rem; font-weight:300; color:var(--gold-light); letter-spacing:.18em; text-transform:uppercase }
.nav-links  { display:flex; gap:2rem; align-items:center }
.nav-links a { color:rgba(255,255,255,.72); text-decoration:none; font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; transition:color .2s }
.nav-links a:hover { color:var(--gold-light) }
.nav-cta    { background:var(--gold)!important; color:var(--navy)!important; padding:8px 18px; font-size:.66rem!important }
.nav-cta:hover { background:var(--gold-light)!important }
.hamburger  { display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer }

/* ── PAGE HERO (inner pages) ── */
.page-hero { background:var(--navy); padding:192px 0 80px; position:relative; overflow:hidden }
.page-hero-pattern { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(184,150,90,.04) 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(184,150,90,.04) 60px) }
.page-hero-accent  { position:absolute; right:0; top:0; width:40%; height:100%; background:linear-gradient(180deg,rgba(184,150,90,.05) 0%,transparent 70%); border-left:1px solid rgba(184,150,90,.12) }
.page-hero-inner   { position:relative; z-index:2 }
.page-hero h1      { color:#fff; margin-bottom:1rem }
.page-hero h1 em   { font-style:italic; color:var(--gold-light) }
.page-hero-desc    { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.58); line-height:1.9; max-width:620px; margin-top:1rem }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:1.5rem }
.breadcrumb a,.breadcrumb span { font-size:.65rem; font-weight:400; letter-spacing:.15em; text-transform:uppercase; text-decoration:none }
.breadcrumb a { color:var(--gold); }
.breadcrumb a:hover { color:var(--gold-light) }
.breadcrumb .sep,.breadcrumb .current { color:rgba(255,255,255,.35) }

/* ── GOLD DIVIDER ── */
.gold-rule { width:55px; height:2px; background:var(--gold); margin:1.4rem 0 }

/* ── CTA BAND ── */
.cta-band       { background:var(--gold-pale); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); padding:70px 0 }
.cta-inner      { display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap }
.cta-text h2    { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,2.5vw,2rem); font-weight:700; color:var(--navy); line-height:1.25; margin-bottom:.5rem }
.cta-text p     { font-size:.93rem; font-weight:300; color:var(--muted) }
.cta-actions    { display:flex; gap:1rem; flex-shrink:0; flex-wrap:wrap }

/* ── DARK CTA BAND ── */
.cta-dark       { background:var(--navy); padding:70px 0 }
.cta-dark .cta-text h2 { color:#fff }
.cta-dark .cta-text p  { color:rgba(255,255,255,.5) }

/* ── FOOTER ── */
footer               { background:var(--navy); padding:65px 0 30px }
.footer-grid         { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; margin-bottom:50px }
.footer-brand-col    {}
.footer-firm-name    { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:500; color:#fff; letter-spacing:.04em; margin-bottom:4px }
.footer-firm-tag     { font-size:.6rem; font-weight:300; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem }
.footer-brand-col p  { font-size:.79rem; font-weight:300; color:rgba(255,255,255,.38); line-height:1.8; max-width:300px }
footer h5            { font-size:.61rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem }
footer ul            { list-style:none }
footer ul li         { margin-bottom:.6rem }
footer ul li a       { font-size:.79rem; font-weight:300; color:rgba(255,255,255,.48); text-decoration:none; transition:color .2s }
footer ul li a:hover { color:var(--gold-light) }
.footer-divider      { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:1.5rem }
.footer-bottom       { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem }
.footer-bottom p     { font-size:.7rem; font-weight:300; color:rgba(255,255,255,.28) }
.footer-bar-links    { display:flex; gap:2rem }
.footer-bar-links a  { font-size:.67rem; font-weight:300; color:rgba(255,255,255,.28); text-decoration:none; transition:color .2s }
.footer-bar-links a:hover { color:var(--gold) }

/* ── CONTENT BLOCKS ── */
.two-col      { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start }
.three-col    { display:grid; grid-template-columns:repeat(3,1fr); gap:30px }
.card-border  { border:1px solid var(--border-light); padding:2rem }
.card-navy    { background:var(--navy); padding:2rem }
.card-cream   { background:var(--cream-light); padding:2rem }
.card-gold    { background:var(--gold-pale); padding:2rem; border-left:3px solid var(--gold) }

/* ── TABLE ── */
table            { width:100%; border-collapse:collapse }
th               { text-align:left; font-size:.65rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); padding:1rem 1.2rem; border-bottom:2px solid var(--gold-pale); background:var(--navy); color:var(--gold) }
td               { padding:.9rem 1.2rem; border-bottom:1px solid var(--border-light); font-size:.85rem; font-weight:300; color:var(--muted); vertical-align:top }
tr:hover td      { background:var(--gold-pale) }

/* ── QUOTE ── */
.pull-quote       { border-left:3px solid var(--gold); padding:1.2rem 1.8rem; margin:2rem 0 }
.pull-quote p     { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-style:italic; font-weight:300; color:var(--navy); line-height:1.8 }
.pull-quote .attr { margin-top:.7rem; font-size:.65rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold) }

/* ── LIST STYLES ── */
.check-list      { list-style:none }
.check-list li   { display:flex; align-items:flex-start; gap:10px; padding:.5rem 0; border-bottom:1px solid var(--cream-light); font-size:.85rem; font-weight:300; color:var(--muted); line-height:1.6 }
.check-list li::before { content:'→'; color:var(--gold); font-size:.8rem; margin-top:2px; flex-shrink:0 }
.dot-list        { list-style:none }
.dot-list li     { display:flex; align-items:flex-start; gap:10px; padding:.4rem 0; font-size:.84rem; font-weight:300; color:var(--muted); line-height:1.6 }
.dot-list li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:.45rem }

/* ── SERVICE CARD ── */
.service-card         { background:#fff; border:1px solid var(--border-light); padding:2rem 1.8rem; transition:all .22s; border-top:3px solid transparent; cursor:default }
.service-card:hover   { border-top-color:var(--gold); box-shadow:0 4px 24px rgba(13,27,42,.07) }
.service-card .sc-num { font-family:'Cormorant Garamond',serif; font-size:.72rem; letter-spacing:.18em; color:var(--gold); display:block; margin-bottom:.9rem }
.service-card h3      { font-family:'Playfair Display',serif; font-size:1rem; font-weight:600; color:var(--navy); line-height:1.35; margin-bottom:.7rem }
.service-card p       { font-size:.8rem; font-weight:300; color:var(--muted); line-height:1.75 }

/* ── TAG/BADGE ── */
.tag           { display:inline-block; font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); background:var(--gold-pale); padding:3px 9px; margin-bottom:.8rem }
.tag-navy      { display:inline-block; font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); background:rgba(184,150,90,.15); padding:3px 9px; margin-bottom:.8rem }

/* ── DARK SECTION ── */
.dark-section       { background:var(--navy); color:#fff }
.dark-section .section-title { color:#fff }
.dark-section .section-desc  { color:rgba(255,255,255,.5) }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .two-col      { grid-template-columns:1fr; gap:40px }
  .three-col    { grid-template-columns:1fr 1fr; gap:20px }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:35px }
}
@media (max-width:768px) {
  .container    { padding:0 1.5rem }
  section       { padding:60px 0 }
  .three-col    { grid-template-columns:1fr }
  .footer-grid  { grid-template-columns:1fr }
  .clock-bar    { height:auto; min-height:28px; padding:4px 0 }
  .clock-bar-inner { flex-direction:column; gap:4px; padding:4px 1.5rem; align-items:flex-start }
  .clock-left   { gap:1rem; flex-wrap:wrap }
  .clock-right  { gap:1rem }
  nav           { top:auto; top:0; position:fixed }
  .nav-links    { display:none; flex-direction:column; position:fixed; top:68px; left:0; width:100%; background:var(--navy); padding:1.5rem 2rem; gap:1rem; border-top:1px solid rgba(184,150,90,.15) }
  .nav-links.open { display:flex }
  .hamburger    { display:block }
  .cta-inner    { flex-direction:column; align-items:flex-start }
  .footer-bottom { flex-direction:column; align-items:flex-start }
  .footer-bar-links { flex-wrap:wrap; gap:1rem }
}

/* ── ACCESSIBILITY — WCAG 2.1 Focus Styles ── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── PRINT STYLES ── */
@media print {
  .clock-bar, nav, .cta-band, .hamburger { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .page-hero { background: #fff; color: #000; padding: 20px 0; }
  .section-title { color: #000; }
}

/* ── SELECTION COLOUR ── */
::selection { background: var(--gold); color: var(--navy); }
::-moz-selection { background: var(--gold); color: var(--navy); }