/* USIG San Diego hub — shared styles for guide + blog pages */
:root{
  --navy:#010e1e; --navy2:#03152a; --navy3:#0a1f39; --panel:#0c2140;
  --gold:#d4af37; --gold-soft:#e0bf4a;
  --text:#e9eff7; --muted:#a3b3c6; --white:#ffffff;
  --line:rgba(212,175,55,.30); --line-soft:rgba(255,255,255,.09);
  --maxw:1160px; --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--navy); color:var(--text); font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif; line-height:1.2; font-weight:700; color:var(--white)}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold-soft); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
[id]{scroll-margin-top:84px}
figure{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:780px; margin:0 auto; padding:0 20px}
.eyebrow{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700}
.btn{display:inline-block; padding:12px 24px; border-radius:4px; font-weight:600; font-size:1rem; cursor:pointer; border:1px solid transparent; font-family:inherit; text-align:center; transition:transform .15s ease, background .2s ease, border-color .2s ease}
.btn-gold{background:var(--gold); color:#13233b; border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft); text-decoration:none; transform:translateY(-1px)}
.btn-ghost{background:rgba(1,14,30,.35); color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold); color:var(--white); text-decoration:none}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.tel{color:var(--gold-soft); font-weight:600; white-space:nowrap}

/* header */
header.site{position:sticky; top:0; z-index:50; background:rgba(1,14,30,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:var(--maxw); margin:0 auto; position:relative}
.brand{display:flex; align-items:center; gap:12px}
.brand:hover{text-decoration:none}
.brand img{height:42px; width:auto; border-radius:3px}
.brand .n{font-family:"Playfair Display",serif; font-size:1.05rem; color:var(--white)}
.brand .n small{display:block; font-family:"Source Sans 3",sans-serif; font-size:.64rem; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; font-weight:700}
nav.links{display:flex; gap:20px; align-items:center}
nav.links a{color:var(--muted); font-size:.92rem; font-weight:600}
nav.links a:hover, nav.links a[aria-current="page"]{color:var(--gold-soft); text-decoration:none}
nav.links a.nav-phone{color:var(--gold-soft)}
nav.links .btn{color:#13233b; padding:9px 18px; white-space:nowrap}
.nav-right{display:flex; align-items:center; gap:10px}
.call-btn{display:none; background:var(--gold); color:#13233b; font-weight:700; font-size:.88rem; border-radius:4px; padding:8px 12px}
.call-btn:hover{text-decoration:none}
.menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:4px; padding:7px 12px; font-size:1.05rem; cursor:pointer}
@media(max-width:960px){
  .call-btn,.menu-btn{display:inline-block}
  nav.links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--navy2); border-bottom:1px solid var(--line)}
  nav.links.open{display:flex}
  nav.links a{padding:14px 20px; border-top:1px solid var(--line-soft)}
  nav.links .btn{margin:12px 20px}
}
.crumb{font-size:.8rem; color:var(--muted); border-bottom:1px solid var(--line-soft)}
.crumb .wrap{padding:9px 20px}
.crumb a{color:var(--muted)}

/* page hero */
.phero{position:relative; min-height:460px; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy3)}
.phero picture,.phero picture img{position:absolute; inset:0; width:100%; height:100%}
.phero picture img{object-fit:cover}
.phero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,14,30,.25) 0%, rgba(1,14,30,.62) 50%, rgba(1,14,30,.97) 100%)}
.phero .wrap{position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:44px}
.phero h1{font-size:clamp(2rem,4.6vw,3.2rem); margin:.5rem 0 .7rem; max-width:22ch}
.phero p.lead{font-size:clamp(1.02rem,2vw,1.2rem); font-weight:300; max-width:62ch; margin:0 0 1.2rem}
.meta{display:flex; gap:6px 18px; flex-wrap:wrap; font-size:.84rem; color:var(--muted)}
.meta b{color:var(--text); font-weight:600}
.photo-credit{position:absolute; right:14px; top:14px; z-index:3; font-size:.7rem; color:var(--white); background:rgba(1,14,30,.6); border:1px solid var(--line-soft); border-radius:14px; padding:3px 10px}

/* sections */
section{padding:60px 0}
section.alt{background:var(--navy2)}
.sec-head{max-width:760px; margin:0 0 30px}
.sec-head.center{margin:0 auto 34px; text-align:center}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem); margin:.4rem 0 .5rem}
.sec-head p{color:var(--muted); margin:10px 0 0; font-size:1.04rem}
.toc{display:flex; gap:8px; flex-wrap:wrap; margin:0}
.toc a{font-size:.86rem; border:1px solid var(--line); border-radius:20px; padding:5px 14px; color:var(--text)}
.toc a:hover{border-color:var(--gold); text-decoration:none; color:var(--gold-soft)}
.tocbar{border-bottom:1px solid var(--line-soft); background:var(--navy2)}
.tocbar .wrap{padding:14px 20px}

/* cards & grids */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:820px){ .g2,.g3{grid-template-columns:1fr} }
@media(max-width:540px){ .g4{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg,var(--panel),var(--navy3)); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 22px; display:flex; flex-direction:column; color:var(--text); overflow:hidden}
a.card:hover{border-color:var(--line); text-decoration:none; transform:translateY(-2px)}
a.card{transition:transform .2s ease, border-color .2s ease}
.card .tag{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px}
.card h3{font-size:1.25rem; margin:0 0 8px}
.card p{color:var(--muted); margin:0 0 12px; flex:1; font-size:.97rem}
.card .src{font-size:.76rem; color:#7f92a8}
.card.ph{padding:0}
.card.ph figure{aspect-ratio:16/10; overflow:hidden; position:relative}
.card.ph figure img{width:100%; height:100%; object-fit:cover}
.card.ph figcaption{position:absolute; left:10px; bottom:10px; font-size:.7rem; color:var(--white); background:rgba(1,14,30,.65); padding:3px 9px; border-radius:12px}
.card.ph .body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.go{color:var(--gold-soft); font-weight:600; font-size:.95rem}
.go::after{content:" \2192"}
.pill{display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); border-radius:20px; padding:3px 10px; color:var(--gold); font-weight:700}

/* feature (image + text) */
.feature{display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:center}
.feature.rev{grid-template-columns:1fr 1.1fr}
.feature.rev figure{order:2}
@media(max-width:860px){ .feature,.feature.rev{grid-template-columns:1fr} .feature.rev figure{order:0} }
.feature figure{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft); position:relative}
.feature figure img{width:100%; height:auto}
.feature figcaption{position:absolute; left:12px; bottom:12px; font-size:.72rem; color:var(--white); background:rgba(1,14,30,.65); padding:3px 10px; border-radius:12px}

/* boxes */
.box{border:1px solid var(--line-soft); border-left:3px solid var(--gold); background:rgba(212,175,55,.05); border-radius:6px; padding:16px 18px; margin:18px 0}
.box h4{margin:0 0 6px; font-size:1.02rem}
.box p{margin:0; color:var(--muted)}
.box.opinion{border-left-color:#7aa2d6; background:rgba(122,162,214,.06)}
.box .lbl{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold); display:block; margin-bottom:4px}
.box.opinion .lbl{color:#9cbbe3}
.stat{display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:var(--navy3)}
.stat b{font-family:"Playfair Display",serif; font-size:2rem; color:var(--gold); line-height:1.1}
.stat span{color:var(--muted); font-size:.9rem}
.stat small{color:#7f92a8; font-size:.74rem}

/* article prose */
.prose{font-size:1.06rem}
.prose h2{font-size:clamp(1.45rem,2.8vw,1.85rem); margin:2.2rem 0 .7rem}
.prose h3{font-size:1.25rem; margin:1.6rem 0 .5rem}
.prose p{margin:0 0 1rem; color:#d6dfeb}
.prose ul,.prose ol{margin:0 0 1.1rem; padding-left:1.3rem; color:#d6dfeb}
.prose li{margin:.35rem 0}
.prose strong{color:var(--white)}
.prose figure{margin:1.6rem 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-soft)}
.prose figure figcaption{font-size:.8rem; color:var(--muted); padding:8px 12px; background:var(--navy3)}
.prose sup a{font-size:.72rem; padding:0 1px}
.tbl{width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.95rem}
.tbl th,.tbl td{border:1px solid var(--line-soft); padding:10px 12px; text-align:left; vertical-align:top}
.tbl th{background:var(--panel); color:var(--gold); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase}
.tbl td{color:#d6dfeb}
.tbl-wrap{overflow-x:auto}

/* FAQ */
details{border:1px solid var(--line-soft); border-radius:8px; background:var(--navy3); margin:0 0 10px}
summary{cursor:pointer; padding:14px 18px; font-weight:600; color:var(--white); list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--gold); font-weight:700}
details[open] summary::after{content:"\2013"}
details .ans{padding:0 18px 16px; color:var(--muted)}

/* sources */
.sources{font-size:.86rem; color:var(--muted); counter-reset:src; list-style:none; padding:0; margin:0}
.sources li{counter-increment:src; padding:6px 0 6px 34px; position:relative; border-bottom:1px solid var(--line-soft)}
.sources li::before{content:"[" counter(src) "]"; position:absolute; left:0; color:var(--gold); font-weight:700}

/* author / cta */
.author{display:flex; gap:14px; align-items:center; border:1px solid var(--line-soft); border-radius:10px; padding:16px; background:var(--navy3); margin:2rem 0}
.author img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--gold)}
.author p{margin:0; color:var(--muted); font-size:.92rem}
.author b{color:var(--white)}
.cta-band{background:linear-gradient(120deg,var(--navy2),var(--panel)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-band .wrap{text-align:center; padding:54px 20px}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0 10px}
.cta-band p{color:var(--muted); max-width:58ch; margin:0 auto 22px}
.cta-band .cta-row{justify-content:center}

/* footer + mobile call bar */
footer{background:#01080f; border-top:1px solid var(--line-soft); padding:44px 0 28px; font-size:.9rem}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:24px}
@media(max-width:720px){ .foot-grid{grid-template-columns:1fr} }
footer h5{color:var(--gold); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px}
footer a{color:var(--muted); display:block; padding:4px 0}
footer a:hover{color:var(--gold-soft); text-decoration:none}
.legal{border-top:1px solid var(--line-soft); padding-top:18px; color:#7487a0; font-size:.78rem; line-height:1.7}
.legal div+div{margin-top:10px}
.legal .entity{color:var(--muted)}
.legal a{display:inline; padding:0; color:#8ea0b6; text-decoration:underline}
.callbar{display:none}
@media(max-width:700px){
  .callbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(1,14,30,.97); border-top:1px solid var(--line); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:8px}
  .callbar a{flex:1; text-align:center; padding:11px 8px; border-radius:5px; font-weight:700; font-size:.92rem}
  .callbar a.c1{background:var(--gold); color:#13233b}
  .callbar a.c2{border:1px solid var(--line); color:var(--text)}
  .callbar a:hover{text-decoration:none}
  body{padding-bottom:68px}
}
.card h3 a{color:inherit} .card h3 a:hover{color:var(--gold-soft)}
.cta-note{margin:14px 0 0; font-size:.92rem; color:var(--muted)} .cta-note a{color:var(--gold-soft); text-decoration:underline}
.cta-band .cta-note{max-width:none; margin:14px auto 0} nav.links a.btn:hover{color:#13233b}