/* PCE — Shared styles
 * Used by every page. Edit here to change the whole site.
 * Colours, typography and component patterns follow pce_developer_notes.md
 */

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue:#1A3A9C;
  --navy:#0C1640;
  --sky:#4A8FD4;
  --cream:#FAF7F2;
  --warm:#F5F0E8;
  --mist:#EEF2F8;
  --gold:#C8860A;
  --gold-mid:#E8A020;
  --gold-light:#F0C050;
  --gold-pale:#FDF6E3;
  --sage:#5A8A6A;
  --ink:#1C1C2E;
  --fd:'Cormorant Garamond','Cormorant Garant',serif;
  --fb:'Inter',sans-serif;
}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}

/* ---------- Navigation ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2.5rem;background:var(--cream);border-bottom:1px solid rgba(26,58,156,0.08);position:sticky;top:0;z-index:100;}
.nav-brand{display:flex;align-items:center;}
.nav-brand img{height:40px;display:block;}
.nav-links{display:flex;gap:1.75rem;list-style:none;align-items:center;}
.nav-links a{font-size:12.5px;color:rgba(28,28,46,0.55);text-decoration:none;letter-spacing:0.04em;font-weight:400;transition:color 0.2s;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-guide{display:inline-flex;align-items:center;gap:0.4rem;font-size:12px;color:var(--blue);font-weight:500;cursor:pointer;background:rgba(26,58,156,0.07);padding:0.45rem 1rem;border-radius:20px;border:none;font-family:var(--fb);transition:background 0.2s;}
.nav-guide:hover{background:rgba(26,58,156,0.14);}

/* ---------- Inner-page hero (simpler than homepage) ---------- */
.page-hero{background:var(--cream);padding:4rem 2.5rem 3rem;text-align:center;border-bottom:1px solid rgba(26,58,156,0.06);position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 4px rgba(200,134,10,0.35);margin-top:1.25rem;}
.page-eyebrow{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:0.85rem;}
.page-title{font-family:var(--fd);font-size:46px;font-weight:300;line-height:1.15;color:var(--navy);margin-bottom:1rem;max-width:760px;margin-left:auto;margin-right:auto;}
.page-title em{font-style:italic;color:var(--gold);}
.page-lead{font-family:var(--fd);font-size:20px;font-style:italic;font-weight:300;color:rgba(28,28,46,0.7);max-width:640px;margin:0 auto;line-height:1.5;}

/* ---------- Generic prose sections ---------- */
.section{padding:4rem 2.5rem;}
.section.alt{background:var(--mist);}
.section.warm{background:var(--warm);}
.section.gold{background:var(--gold-pale);}
.section.dark{background:var(--navy);color:#fff;}
.section.dark .sec-h{color:#fff;}
.section.dark .prose{color:rgba(255,255,255,0.82);}
.container{max-width:840px;margin:0 auto;}
.container-wide{max-width:1080px;margin:0 auto;}
.sec-eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:0.65rem;}
.sec-h{font-family:var(--fd);font-size:33px;font-weight:300;color:var(--navy);margin-bottom:1.5rem;line-height:1.25;}
.sec-h.italic{font-style:italic;}
.sec-h.center{text-align:center;}
.sub-h{font-family:var(--fd);font-size:22px;font-weight:400;color:var(--navy);margin-top:2rem;margin-bottom:0.75rem;line-height:1.3;}
.prose{font-size:15px;line-height:1.85;color:rgba(28,28,46,0.78);font-weight:300;}
.prose p{margin-bottom:1.1rem;}
.prose em{color:var(--gold);font-style:italic;}
.prose strong{font-weight:500;color:var(--navy);}
.prose blockquote{font-family:var(--fd);font-size:19px;font-style:italic;font-weight:300;color:var(--navy);border-left:2px solid var(--gold);padding:0.25rem 0 0.25rem 1.25rem;margin:1.5rem 0;line-height:1.5;}
.prose ul{margin:1rem 0 1.5rem 1.25rem;}
.prose li{margin-bottom:0.5rem;}
.prose a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(26,58,156,0.3);}
.prose a:hover{border-bottom-color:var(--blue);}
.divider-dot{display:block;text-align:center;margin:2.5rem 0;color:var(--gold);font-size:12px;letter-spacing:1em;}

/* ---------- Cards / grids ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.card{background:var(--warm);border-radius:16px;padding:1.75rem 1.5rem;border:1px solid rgba(200,134,10,0.1);transition:transform 0.2s,box-shadow 0.2s;}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(12,22,64,0.06);}
.card-eyebrow{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage);font-weight:500;margin-bottom:0.5rem;}
.card-h{font-family:var(--fd);font-size:20px;font-weight:500;color:var(--navy);margin-bottom:0.6rem;line-height:1.3;}
.card-body{font-size:13.5px;color:rgba(28,28,46,0.65);line-height:1.7;font-weight:300;}
.card-link{display:inline-block;margin-top:0.85rem;font-size:12.5px;color:var(--blue);font-weight:500;text-decoration:none;letter-spacing:0.02em;}
.card-link:hover{color:var(--gold);}

/* ---------- Profile blocks (Our People) ---------- */
.profile{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start;margin-bottom:2.5rem;}
.profile-photo{width:220px;height:220px;border-radius:50%;background:var(--warm);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:14px;color:rgba(28,28,46,0.4);font-style:italic;border:1px solid rgba(200,134,10,0.15);overflow:hidden;}
.profile-photo img{width:100%;height:100%;object-fit:cover;}
.profile-name{font-family:var(--fd);font-size:30px;font-weight:400;color:var(--navy);margin-bottom:0.25rem;line-height:1.2;}
.profile-role{font-size:13px;color:var(--sage);letter-spacing:0.05em;font-weight:500;text-transform:uppercase;margin-bottom:1.25rem;}

/* ---------- CTA section ---------- */
.cta{background:var(--gold-pale);padding:5rem 2.5rem;text-align:center;border-top:1px solid rgba(200,134,10,0.15);}
.cta-h{font-family:var(--fd);font-size:42px;font-weight:300;font-style:italic;color:var(--navy);line-height:1.2;margin-bottom:1.25rem;}
.cta-p{font-size:15px;color:rgba(28,28,46,0.7);max-width:520px;margin:0 auto 1.75rem;line-height:1.8;}
.cta-button{display:inline-block;background:var(--blue);color:#fff;font-family:var(--fb);font-size:14px;font-weight:500;padding:0.85rem 1.85rem;border-radius:30px;text-decoration:none;letter-spacing:0.02em;transition:background 0.2s;border:none;cursor:pointer;}
.cta-button:hover{background:var(--navy);}
.cta-button.gold{background:var(--gold);}
.cta-button.gold:hover{background:var(--gold-mid);}
.cta-button-secondary{display:inline-block;color:var(--blue);font-family:var(--fb);font-size:14px;font-weight:500;padding:0.85rem 1.5rem;text-decoration:none;letter-spacing:0.02em;margin-left:0.5rem;}
.cta-button-secondary:hover{color:var(--gold);}

/* ---------- Footer ---------- */
.foot{background:var(--navy);padding:2rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,0.1);}
.foot-left{display:flex;align-items:center;gap:1rem;}
.foot-left img{height:30px;opacity:0.9;filter:brightness(0) invert(1);}
.foot-copy{font-size:12.5px;color:rgba(255,255,255,0.7);font-family:var(--fb);font-weight:400;letter-spacing:0.02em;}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;}
.foot-links a{font-size:12.5px;color:rgba(255,255,255,0.7);text-decoration:none;font-weight:400;}
.foot-links a:hover{color:#fff;}

/* ---------- Guide drawer (Ask Your Guide chatbot stub) ---------- */
.guide-drawer{position:fixed;top:0;right:0;width:420px;max-width:100vw;height:100vh;background:#fff;box-shadow:-12px 0 40px rgba(12,22,64,0.18);z-index:300;transform:translateX(100%);transition:transform 0.35s ease;display:flex;flex-direction:column;}
.guide-drawer.open{transform:translateX(0);}
.guide-drawer-head{background:var(--navy);color:#fff;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;}
.guide-drawer-head .gd-title{font-family:var(--fd);font-size:18px;font-style:italic;}
.guide-drawer-head .gd-close{background:none;border:none;color:rgba(255,255,255,0.7);font-size:22px;cursor:pointer;line-height:1;}
.guide-drawer-body{flex:1;overflow-y:auto;padding:1.5rem;background:var(--cream);}
.guide-msg{font-family:var(--fd);font-size:16px;font-style:italic;color:var(--navy);line-height:1.6;margin-bottom:1rem;background:var(--warm);padding:1rem 1.25rem;border-radius:14px;border:1px solid rgba(200,134,10,0.15);}
.guide-msg em{color:var(--gold);}
.guide-drawer-input{padding:1rem 1.5rem;border-top:1px solid rgba(26,58,156,0.1);background:#fff;}
.guide-input-box{display:flex;gap:0.5rem;background:var(--mist);border-radius:28px;padding:0.75rem 1rem;}
.guide-input-box input{flex:1;border:none;background:none;outline:none;font-family:var(--fb);font-size:14px;color:var(--ink);}
.guide-input-box input::placeholder{color:rgba(28,28,46,0.45);font-style:italic;font-family:var(--fd);}
.guide-input-send{background:var(--blue);color:#fff;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px;}
.guide-stub-note{font-size:12px;color:rgba(28,28,46,0.5);font-style:italic;text-align:center;padding:0.5rem;background:var(--gold-pale);border-radius:8px;margin-top:0.75rem;}
.guide-backdrop{position:fixed;inset:0;background:rgba(12,22,64,0.4);z-index:250;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.guide-backdrop.open{opacity:1;pointer-events:auto;}

/* ---------- Responsive ---------- */
@media(max-width:840px){
  .nav{padding:1rem 1.5rem;}
  .nav-links{display:none;}
  .nav-links.mobile-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--cream);padding:1rem 1.5rem;gap:1rem;border-bottom:1px solid rgba(26,58,156,0.08);}
  .nav-toggle{display:flex;background:none;border:none;font-size:22px;color:var(--navy);cursor:pointer;padding:0.25rem;}
  .page-hero{padding:3rem 1.5rem 2.5rem;}
  .page-title{font-size:34px;}
  .page-lead{font-size:17px;}
  .section,.cta{padding:3rem 1.5rem;}
  .sec-h{font-size:26px;}
  .cta-h{font-size:30px;}
  .profile{grid-template-columns:1fr;gap:1.5rem;}
  .profile-photo{width:160px;height:160px;margin:0 auto;}
  .foot{flex-direction:column;text-align:center;}
}
@media(min-width:841px){
  .nav-toggle{display:none;}
}