/* ==========================================================================
   Kingdom Global Fellowship — Design System
   Editorial, photography-forward redesign.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500;1,600&display=swap');

:root{
  /* Brand */
  --navy:#061b3a;
  --black:#080c16;
  --blue:#0b3d91;
  --royal:#1257c7;
  --sky:#69c4eb;
  --gold:#d6ad43;
  --gold-deep:#b8892f;
  --red:#5c151b;

  /* Neutrals */
  --ink:#10151f;
  --muted:#5b6577;
  --line:#e3e8f0;
  --paper:#ffffff;
  --offwhite:#f5f7fb;

  /* Type */
  --font:'Inter',Arial,Helvetica,sans-serif;
  --font-serif:'Lora',Georgia,'Times New Roman',serif;

  /* Rhythm */
  --gutter:28px;
  --radius:4px;
  --topbar-h:0px;
  --nav-h:82px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Anchor targets clear the fixed navigation instead of hiding beneath it. */
:target,section[id],header[id],h2[id],h3[id],div[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  line-height:1.65;
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.container{width:min(1240px,92%);margin:auto}

/* ---- Motion (respect reduced-motion) ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.nav.scrolled{background:rgba(255,255,255,.98);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(8,12,22,.08)}
.navin{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h);gap:24px}
.brand{font-weight:900;font-size:1rem;letter-spacing:.03em;color:#fff;line-height:1.05;white-space:nowrap;transition:color .3s ease}
.brand small{display:block;color:#c9d6ea;font-weight:700;font-size:.66rem;letter-spacing:.06em;margin-top:5px;text-transform:uppercase;transition:color .3s ease}
.menu{display:flex;gap:26px;align-items:center;font-size:.86rem;font-weight:700;letter-spacing:.01em}
.menu a{padding:6px 0;position:relative;color:#fff;transition:color .3s ease}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--sky)}
.nav.scrolled .brand{color:var(--navy)}
.nav.scrolled .brand small{color:var(--muted)}
.nav.scrolled .menu a:not(.btn){color:var(--ink)}
.nav.scrolled .menu a[aria-current="page"]{color:var(--blue)}

/* Desktop dropdown (Leadership) */
.dropdown{position:relative}
.dropdown>a::after{content:none}
.dropdown>a .caret{display:inline-block;margin-left:5px;font-size:.62em;transform:translateY(-1px)}
.dropdown-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);width:620px;max-width:88vw;background:#fff;border-radius:12px;box-shadow:0 22px 48px rgba(8,12,22,.22);padding:26px;margin-top:14px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:70;display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:8px}
.dropdown-panel a{display:block;padding:9px 10px;border-radius:6px;color:var(--ink)!important;font-weight:700;font-size:.84rem;margin:0}
.dropdown-panel a:hover{background:var(--offwhite)}
.dropdown-panel a::after{content:none}
.dropdown:hover .dropdown-panel,.dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown-panel.dropdown-simple{display:block;width:auto;min-width:210px;padding:10px}
.dropdown-col{border-left:1px solid var(--line);padding-left:20px}
.dropdown-col:first-child{border-left:0;padding-left:0}
.dropdown-col h4{margin:0 0 10px;padding:0 10px;color:var(--sky);text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;font-weight:800}
.dropdown-col-single{display:flex;align-items:center}
.dropdown-panel a.dropdown-feature{background:var(--navy)!important;color:#fff!important;border-radius:8px;padding:20px 16px!important;font-size:.9rem!important;line-height:1.3;width:100%}
.dropdown-feature:hover{background:var(--blue)!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;background:var(--royal);color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.03em;border-radius:var(--radius);border:1px solid var(--royal);transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:#0d47b8;transform:translateY(-2px)}
.btn.alt{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn.alt:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1305}
.btn.gold:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:var(--black)}
.btn.small{padding:10px 18px;font-size:.78rem}

/* Mobile nav toggle */
.hamburger{display:none;flex-direction:column;gap:5px;width:32px;height:24px;background:none;border:0;cursor:pointer;padding:0}
.hamburger span{display:block;height:2px;width:100%;background:#fff;transition:transform .25s ease,opacity .25s ease,background .3s ease}
.nav.scrolled .hamburger span{background:var(--navy)}
.mobilepanel{display:none}

@media (max-width:960px){
  .menu{display:none}
  .hamburger{display:flex}
  body.nav-open{overflow:hidden}
  .mobilepanel{
    display:block;position:fixed;inset:0;top:0;z-index:60;
    background:var(--navy);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .35s ease,opacity .35s ease,visibility .35s ease;
    padding:26px var(--gutter) 40px;overflow-y:auto;
  }
  body.nav-open .mobilepanel{transform:translateY(0);opacity:1;visibility:visible}
  .mobilepanel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}
  /* The brand never wraps in the top bar, but inside the panel it must, or the
     subtitle pushes the page wider than the viewport on small phones. */
  .mobilepanel-top .brand{color:#fff;white-space:normal;min-width:0;flex:1}
  .mobilepanel-top .brand small{color:#9db4d9;letter-spacing:.04em}
  .mobilepanel-top .mp-close{flex:none}
  .mp-close{background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
  .mobilepanel a{display:block;color:#fff;font-size:1.5rem;font-weight:800;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .mobilepanel .btn{margin-top:26px;width:100%;text-align:center}
  .mobile-dropdown{border-bottom:1px solid rgba(255,255,255,.12)}
  .mobile-dropdown-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;color:#fff;font-size:1.5rem;font-weight:800;padding:16px 0;cursor:pointer;font-family:inherit;text-align:left}
  .mobile-dropdown-toggle .chevron{width:12px;height:12px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);transition:transform .25s ease;flex:none}
  .mobile-dropdown.open .mobile-dropdown-toggle .chevron{transform:rotate(-135deg)}
  .mobile-dropdown-panel{max-height:0;overflow:hidden;transition:max-height .35s ease}
  .mobile-dropdown.open .mobile-dropdown-panel{max-height:640px}
  .mobile-dropdown-panel a{font-size:1.05rem;font-weight:700;padding:12px 0 12px 16px;border-bottom:0;color:#cfe0f7}
  .mobile-dropdown-panel h5{margin:18px 0 2px 16px;color:var(--sky);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800}
  .mobile-dropdown-panel h5:first-child{margin-top:6px}
  .mobile-dropdown-panel .dropdown-feature{display:inline-block;margin:14px 0 6px 16px;padding:12px 18px!important;background:rgba(255,255,255,.12);border-radius:8px;font-size:1.02rem}
}

/* ==========================================================================
   Heroes

   The whole hero box is one photograph with the words laid over it. There is
   no picture card beside the text any more.

   The photograph is passed in on the page as --hero-image, so a hero without
   one still renders as the old navy gradient rather than a bare box — which
   is what happens on a page whose photograph has not been chosen yet, and
   what happens for the moment before a slow image arrives.

   Three background layers, top to bottom:
     1. a dark wash, so white text stays readable over any photograph
     2. the photograph
     3. the original gradient, as the floor
   ========================================================================== */
.hero,.pagehero{
  position:relative;color:#fff;overflow:hidden;
  background-color:var(--navy);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover;
  background-position:center,var(--hero-pos,50% 40%),center;
}

.hero{
  padding:calc(var(--topbar-h) + var(--nav-h) + 96px) 0 200px;
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);
  background-image:
    linear-gradient(100deg,rgba(3,10,22,.94) 0%,rgba(6,27,58,.86) 44%,rgba(6,27,58,.62) 100%),
    var(--hero-image,none),
    linear-gradient(125deg,var(--black) 0%,var(--navy) 55%,var(--blue) 130%);
}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;opacity:.45;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:920px}
.eyebrow{color:var(--sky);text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.76rem}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:900;line-height:.98;letter-spacing:-.01em;margin:16px 0 24px;text-transform:uppercase;text-shadow:0 3px 26px rgba(0,0,0,.5)}
.hero p{max-width:680px;font-size:1.18rem;color:#dce7f8;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ==========================================================================
   Interior page hero
   ========================================================================== */
.pagehero{
  padding:calc(var(--topbar-h) + var(--nav-h) + 76px) 0 140px;
  clip-path:polygon(0 0,100% 0,100% 90%,50% 100%,0 90%);
  background-image:
    linear-gradient(100deg,rgba(4,14,30,.92) 0%,rgba(6,27,58,.84) 46%,rgba(11,61,145,.58) 100%),
    var(--hero-image,none),
    linear-gradient(125deg,var(--navy),var(--blue));
}
.pagehero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;opacity:.4;pointer-events:none}
.pagehero .container{position:relative;z-index:1}
.pagehero .container>div{max-width:880px}
.pagehero h1{font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:900;line-height:1.04;letter-spacing:-.01em;margin:10px 0 18px;text-shadow:0 3px 22px rgba(0,0,0,.5)}
.pagehero p{max-width:660px;color:#dce7f8;font-size:1.05rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}

@media (max-width:700px){
  .hero{padding:calc(var(--topbar-h) + var(--nav-h) + 54px) 0 130px}
  .pagehero{padding:calc(var(--topbar-h) + var(--nav-h) + 44px) 0 96px}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:96px 0}
.section.tight{padding:64px 0}
.section.light{background:var(--offwhite)}
.section.gray{background:#e6e9ef}
.section.mint{background:#c9d451}
.section.gold{background:#e8cf94}
.section.sky{background:var(--sky)}
.section.sky .card{background:transparent;border:2px solid var(--navy);border-radius:14px;overflow:hidden}
.section.sky .card h3,.section.sky .card p{color:var(--navy)}
.section.gold .eyebrow{color:#000}
.section.gold .lead{color:#000}
.section.navy{background:var(--navy);color:#fff}
.section.black{background:var(--black);color:#fff}
.section.red{background:var(--red);color:#fff}
.section h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;line-height:1.08;letter-spacing:-.01em;margin:10px 0 20px;color:var(--navy)}
.section.navy h2,.section.black h2,.section.red h2{color:#fff}
.lead{font-size:1.14rem;color:var(--muted);max-width:820px}
.section.navy .lead,.section.black .lead,.section.red .lead{color:#c9d6ea}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse{direction:rtl}
.split.reverse>*{direction:ltr}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.reverse{direction:ltr}}

.divider{border:0;border-top:1px solid var(--line);margin:18px 0}
.section.navy .divider,.section.black .divider,.section.red .divider{border-top-color:rgba(255,255,255,.18)}

/* ==========================================================================
   Photographs

   A picture block is a <figure class="photo"> with one <img> in it. The
   figure carries the shape — the image is cropped to fill it — so a portrait
   photograph and a landscape one sit in a row of cards without one of them
   knocking the row out of line.

   The navy background is what shows for the instant before the photograph
   paints, and if a file were ever missing.
   ========================================================================== */
.photo{
  position:relative;overflow:hidden;border-radius:var(--radius);margin:0;
  aspect-ratio:4/3;background:linear-gradient(150deg,#0e2547,#123a73 55%,#0a1c3a);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.tall{aspect-ratio:4/5}
.photo.short{aspect-ratio:3/4}
.photo.wide{aspect-ratio:16/9}

/* The old placeholder look, kept only so a block the portal has not filled
   still looks deliberate rather than broken. */
.ph-media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),
    linear-gradient(150deg,#0e2547,#123a73 55%,#0a1c3a);
  min-height:280px;display:flex;align-items:flex-end;
}
.ph-media .ph-tag{
  margin:18px;padding:8px 14px;background:rgba(6,27,58,.72);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.25);border-radius:999px;
  color:#eaf2ff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.ph-media.tall{min-height:420px}
.ph-media.short{aspect-ratio:3/4;min-height:260px}
.ph-media.wide{min-height:340px}

/* ==========================================================================
   Full-bleed photographic banner

   Same three-layer treatment as the heroes: wash, photograph, gradient floor.
   ========================================================================== */
.banner{
  position:relative;color:#fff;padding:120px 0;
  background-color:var(--navy);
  background-image:
    linear-gradient(110deg,rgba(4,14,30,.92),rgba(11,61,145,.68)),
    var(--hero-image,none),
    linear-gradient(120deg,rgba(6,17,34,.94),rgba(11,61,145,.86));
  background-size:cover,cover,cover;
  background-position:center,var(--hero-pos,50% 42%),center;
  background-repeat:no-repeat;
  clip-path:polygon(0 4%,100% 0,100% 100%,0 96%);
}
.banner .container{position:relative;z-index:1}
.banner h2{color:#fff;max-width:760px;text-shadow:0 3px 22px rgba(0,0,0,.45)}
.banner .lead{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;padding:0;border-top:3px solid var(--sky)}
.card-body{padding:26px 24px 30px}
.card h3{margin:0 0 10px;font-size:1.14rem;color:var(--navy);font-weight:800}
.card p{margin:0;color:var(--muted)}
.card .number{display:block;font-size:1.6rem;font-weight:900;color:var(--sky);margin-bottom:6px}

.card.media{border-top:0}
.card.media .ph-media{margin-bottom:0}

.search-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 10px 30px rgba(8,12,22,.06)}
.search-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px}
.search-form input,.search-form select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff}
.search-form button{white-space:nowrap}
@media (max-width:800px){.search-form{grid-template-columns:1fr}}

.pill{display:inline-block;background:#eaf4ff;color:var(--blue);padding:6px 12px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.02em}
.section.navy .pill,.section.black .pill,.section.red .pill{background:rgba(255,255,255,.12);color:#eaf2ff}

/* ==========================================================================
   Pillars — three-across photo/headline cards (homepage, under hero)
   ========================================================================== */
.pillars-head{max-width:760px;margin:0 auto 52px;text-align:center}
.pillars-head .eyebrow{display:block}
.pillars-head h2{margin:14px 0 16px;font-weight:500;font-size:clamp(1.05rem,2.7vw,2.3rem);line-height:1.15;white-space:nowrap}
.pillars-head h2 em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--ink)}
.pillars-head h2 strong{font-family:var(--font);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;color:var(--navy)}
.pillars-head .lead.pillars-lead{margin:0 auto;max-width:none}
.pillars-head .lead.pillars-lead .ln{display:block;white-space:nowrap;font-size:clamp(.78rem,2vw,1.14rem)}

.pillar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pillar-card{padding:0 34px;position:relative}
.pillar-card+.pillar-card{border-left:1px solid var(--line)}
.pillar-card .ph-media{aspect-ratio:4/3;min-height:0;transition:transform .35s ease}
.pillar-card:hover .ph-media{transform:translateY(-4px)}
.pillar-card h3{margin:24px 0 10px;font-size:1.28rem;color:var(--navy);font-weight:800}
.pillar-card p{margin:0 0 20px;color:var(--muted)}
.tag-ribbon{display:inline-flex;align-items:center;background:var(--blue);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;padding:11px 24px 11px 16px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}

@media (max-width:900px){
  .pillar-cards{grid-template-columns:1fr;gap:48px}
  .pillar-card{padding:0!important;border-left:0!important}
}

/* On phones the headline is allowed to wrap. Held on one line it forces the
   whole page wider than the viewport. */
@media (max-width:720px){
  .pillars-head h2{white-space:normal;font-size:clamp(1.45rem,6vw,2rem)}
  .pillars-head .lead.pillars-lead .ln{white-space:normal;display:inline;font-size:1rem}
}

/* ==========================================================================
   Council cards — tall portrait tiles with a brand colour wash over photography
   (Leadership page: Qodesh, Apostolic Council, Quorum, Education, Global Ministries)

   The photograph comes in on the page as --hero-image, the same way the
   heroes take theirs, so the portal can replace either from one place. With
   no photograph the striped texture shows through the wash exactly as before.
   ========================================================================== */
.council-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.council-card{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  flex:0 1 calc(33.333% - 18px);min-width:250px;aspect-ratio:3/4.1;
  color:#fff;isolation:isolate;
}
.cc-photo{
  position:absolute;inset:0;z-index:0;
  background-color:#4a5a72;
  background-image:
    var(--hero-image,none),
    radial-gradient(120% 80% at 50% 10%,rgba(255,255,255,.26),rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 2px,transparent 2px 15px);
  background-size:cover,cover,auto;
  background-position:var(--hero-pos,50% 35%),center,center;
  background-repeat:no-repeat,no-repeat,repeat;
  transform:scale(1.02);transition:transform .5s ease;
}
.council-card:hover .cc-photo{transform:scale(1.08)}
/* The pastel wash reads as colour, not paint: heavier at the base where the
   title and the Read More tab sit, lighter at the top so the photograph
   underneath is still a photograph. */
.cc-wash{
  position:absolute;inset:0;z-index:1;
  background:var(--cc-color,#8aa9dc);opacity:.80;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.92) 46%,#000);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.92) 46%,#000);
  transition:opacity .35s ease;
}
/* A gentle shade along the base only — anchors the Read More tab without
   clouding the middle of the card. The wash itself stays flat and even. */
.cc-wash::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,38,58,.30),rgba(28,38,58,0) 38%);
}
.council-card:hover .cc-wash{opacity:.80}
.cc-title{
  position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-58%);
  margin:0;padding:0 22px;text-align:center;
  font-family:var(--font);font-weight:800;font-style:normal;
  font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.015em;
  color:#fff;text-shadow:0 1px 2px rgba(28,38,58,.45),0 2px 12px rgba(28,38,58,.35);
}
.cc-more{
  position:absolute;z-index:2;left:0;bottom:0;
  padding:13px 26px;background:rgba(12,16,26,.9);
  color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,padding .25s ease;
}
.council-card:hover .cc-more{background:var(--gold);color:#1a1305;padding-right:34px}
.council-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media (max-width:900px){
  .council-card{flex:0 1 calc(50% - 13px)}
}
@media (max-width:560px){
  .council-card{flex:0 1 100%;aspect-ratio:4/3.4}
  .cc-title{font-size:1.6rem}
}

.callout{padding:32px;border-radius:var(--radius);background:var(--offwhite);border:1px solid var(--line);border-left:4px solid var(--gold)}
.callout h3{margin:10px 0 14px;color:var(--navy);font-size:1.2rem}
.callout p{margin:6px 0}

.quote{border-left:4px solid var(--gold);padding:20px 26px;background:var(--offwhite);color:var(--ink);font-size:1.1rem;font-style:italic}

/* Benefit list (membership) */
.benefit-list{columns:2;column-gap:56px}
@media (max-width:700px){.benefit-list{columns:1}}
.benefit{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.benefit .number{font-size:1.5rem;font-weight:900;color:var(--sky);min-width:44px}
.benefit b{color:var(--navy);display:block;margin-bottom:4px}
.benefit p{margin:0;color:var(--muted)}

/* Numbered steps */
.steps{counter-reset:s}
.step{position:relative;padding:0 0 30px 66px;counter-increment:s}
.step::before{content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--royal);color:#fff;font-weight:900}
.section.navy .step::before,.section.black .step::before,.section.red .step::before{background:var(--gold);color:#1a1305}
.step h3{margin:0 0 6px;color:var(--navy);font-size:1.08rem}
.section.navy .step h3,.section.black .step h3,.section.red .step h3{color:#fff}
.step p{margin:0;color:var(--muted)}
.section.navy .step p,.section.black .step p,.section.red .step p{color:#c9d6ea}

/* Table */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:16px;border-bottom:1px solid var(--line);text-align:left}
th{background:var(--offwhite);color:var(--navy);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.notice{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:20px}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--black);color:#a9b7cd;padding:70px 0 26px}
.footer h3{color:#fff;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 18px}
.footergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer a{display:block;margin:9px 0;color:#a9b7cd;transition:color .15s ease}
.footer a:hover{color:#fff}
.footer .fbrand{color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:.02em;margin-bottom:14px}
.footer .ftag{color:#8194ae;max-width:340px}
.copy{border-top:1px solid #1c2a3f;margin-top:44px;padding-top:22px;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#7c8ba3}
@media (max-width:900px){.footergrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footergrid{grid-template-columns:1fr}}

/* ==========================================================================
   Forms — application, contact, and enquiry
   ========================================================================== */
.form-shell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px;box-shadow:0 14px 40px rgba(8,12,22,.07)}
@media (max-width:600px){.form-shell{padding:24px 20px}}

.form-section{padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.form-section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.form-section > h3{
  margin:0 0 4px;color:var(--navy);font-size:1.12rem;font-weight:800;
  display:flex;align-items:center;gap:12px;
}
.form-section > h3 .step-dot{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--royal);color:#fff;
  display:grid;place-items:center;font-size:.82rem;font-weight:900;
}
.form-section > p.hint{margin:0 0 22px 42px;color:var(--muted);font-size:.92rem}
@media (max-width:600px){.form-section > p.hint{margin-left:0}}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field-grid.one{grid-template-columns:1fr}
.field-grid.three{grid-template-columns:repeat(3,1fr)}
.field.span-2{grid-column:1/-1}
@media (max-width:700px){.field-grid,.field-grid.three{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label{font-size:.82rem;font-weight:800;color:var(--navy);letter-spacing:.01em}
.field > label .req{color:#b42318;margin-left:3px}
.field > label .opt{color:var(--muted);font-weight:600;margin-left:5px;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6577' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--royal);box-shadow:0 0 0 3px rgba(18,87,199,.14);
}
.field .err{display:none;font-size:.8rem;font-weight:700;color:#b42318}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d0534b;background:#fffafa}
.field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{box-shadow:0 0 0 3px rgba(208,83,75,.16)}
.field.invalid .err{display:block}

/* Checkbox + radio groups */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.choice{
  display:flex;gap:12px;align-items:flex-start;padding:15px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.choice:hover{border-color:#b9c7dd;background:var(--offwhite)}
.choice input{flex:none;margin:2px 0 0;width:17px;height:17px;accent-color:var(--royal);cursor:pointer}
.choice span{font-size:.9rem;line-height:1.45}
.choice span b{display:block;color:var(--navy);font-weight:800;margin-bottom:2px}
.choice span small{display:block;color:var(--muted);font-size:.82rem;line-height:1.45}
.choice:has(input:checked){border-color:var(--royal);background:#f4f8ff;box-shadow:0 0 0 1px var(--royal) inset}
.field.invalid .choice{border-color:#d0534b}

.consent{display:flex;gap:13px;align-items:flex-start;padding:20px;border-radius:10px;background:var(--offwhite);border:1px solid var(--line);border-left:4px solid var(--gold)}
.consent input{flex:none;margin:3px 0 0;width:17px;height:17px;accent-color:var(--royal);cursor:pointer}
.consent label{font-size:.9rem;line-height:1.6;color:var(--ink)}
.consent a{color:var(--blue);font-weight:700;text-decoration:underline}

.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.form-actions .btn{padding:16px 34px}
.form-note{font-size:.84rem;color:var(--muted);margin:0}

.form-alert{
  display:none;margin-bottom:26px;padding:15px 18px;border-radius:10px;
  background:#fdf2f2;border:1px solid #f0c8c4;color:#8f2c25;
  font-size:.9rem;font-weight:700;
}
.form-alert.show{display:block}

/* Success panel shown in place of the form */
.form-success{display:none;text-align:center;padding:26px 10px 14px}
.form-success.show{display:block}
.form-success .tick{
  width:66px;height:66px;margin:0 auto 22px;border-radius:50%;
  background:#e8f6ee;color:#177245;display:grid;place-items:center;
  font-size:1.9rem;font-weight:900;
}
.form-success h3{margin:0 0 12px;color:var(--navy);font-size:1.5rem;font-weight:900}
.form-success p{margin:0 auto 10px;color:var(--muted);max-width:520px}
.form-success .actions{justify-content:center}

/* ==========================================================================
   Credential verification (verify.html)
   ========================================================================== */
.verify-box{
  max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:34px;box-shadow:0 14px 40px rgba(8,12,22,.07);
}
@media (max-width:600px){.verify-box{padding:24px 20px}}
.verify-form{display:grid;gap:16px}
.verify-form .field input{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.22rem;letter-spacing:.14em;text-align:center;padding:16px 14px;
}
.verify-form .btn{width:100%;padding:16px}

.verify-card{border-radius:12px;padding:26px 28px;margin-top:26px;border:1px solid var(--line)}
.verify-card.valid{background:#f0f9f4;border-color:#b7e0c6;border-top:4px solid #177245}
.verify-card.invalid{background:#fdf3f2;border-color:#f0c8c4;border-top:4px solid #b42318}
.verify-card.unknown{background:var(--offwhite);border-top:4px solid var(--muted)}
@media (max-width:600px){.verify-card{padding:20px}}

.verify-status{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.verify-mark{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:1.4rem;font-weight:900;color:#fff;
}
.verify-card.valid .verify-mark{background:#177245}
.verify-card.invalid .verify-mark{background:#b42318}
.verify-card.unknown .verify-mark{background:var(--muted)}
.verify-status b{font-size:1.06rem;color:var(--navy);line-height:1.35}
.verify-card.invalid .verify-status b{color:#8f2c25}
.verify-card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.65}

.verify-details{
  display:grid;grid-template-columns:auto 1fr;gap:11px 22px;margin:0;
  padding-top:18px;border-top:1px solid rgba(8,12,22,.09);font-size:.94rem;
}
.verify-details dt{color:var(--muted);font-weight:700}
.verify-details dd{margin:0;color:var(--ink);font-weight:600}
.verify-details dd:last-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
@media (max-width:520px){
  .verify-details{grid-template-columns:1fr;gap:2px}
  .verify-details dd{margin-bottom:12px}
}

.privacy-note{
  max-width:620px;margin:22px auto 0;font-size:.86rem;color:var(--muted);
  line-height:1.65;text-align:center;
}

/* ==========================================================================
   Costs page
   ========================================================================== */
.cost-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
@media (max-width:760px){.cost-cards{grid-template-columns:1fr}}
.cost-card{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);
  border-radius:var(--radius);padding:28px;
}
.cost-card .tag{
  display:inline-block;padding:5px 11px;border-radius:999px;background:#eaf4ff;
  color:var(--blue);font-size:.7rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:14px;
}
.cost-card h3{margin:0 0 12px;color:var(--navy);font-size:1.2rem;font-weight:800}
.cost-card p{margin:0 0 12px;color:var(--muted);font-size:.95rem;line-height:1.7}
.cost-card p:last-child{margin-bottom:0}
.cost-card .when{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.84rem;font-weight:800;color:var(--navy);
}

/* ==========================================================================
   Application stepper (apply.html)
   ========================================================================== */
.stepper{
  display:flex;align-items:flex-start;gap:0;margin:0 0 34px;
  counter-reset:step;list-style:none;padding:0;
}
.stepper li{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:8px;min-width:0;
}
/* connecting rule between markers */
.stepper li::before{
  content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;
  background:var(--line);z-index:0;
}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.current::before{background:var(--royal)}

.step-dot-lg{
  position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  color:var(--muted);font-weight:900;font-size:.86rem;
  transition:background .2s,border-color .2s,color .2s;
}
.stepper li.done .step-dot-lg{background:var(--royal);border-color:var(--royal);color:#fff}
.stepper li.current .step-dot-lg{background:#fff;border-color:var(--royal);color:var(--royal);box-shadow:0 0 0 4px rgba(18,87,199,.13)}
.stepper li.invalid .step-dot-lg{border-color:#d0534b;color:#b42318}

.step-name{font-size:.74rem;font-weight:800;letter-spacing:.02em;color:var(--muted);line-height:1.3}
.stepper li.current .step-name{color:var(--navy)}
.stepper li.done .step-name{color:var(--ink)}
@media (max-width:700px){
  .step-name{display:none}
  .stepper li::before{top:17px}
}

.step-panel{display:none}
.step-panel.active{display:block}
.step-head{margin-bottom:22px}
.step-head .eyebrow{display:block;margin-bottom:8px}
.step-head h2{margin:0 0 8px;font-size:clamp(1.3rem,2.6vw,1.7rem)}
.step-head p{margin:0;color:var(--muted);font-size:.96rem;max-width:64ch}

.step-nav{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
}
.step-nav .spacer{flex:1}
.step-nav .save-note{font-size:.82rem;color:var(--muted)}

/* Referral confirmation */
.lookup{
  display:none;align-items:center;gap:10px;margin-top:10px;padding:11px 14px;
  border-radius:6px;font-size:.88rem;font-weight:700;
}
.lookup.found{display:flex;background:var(--success-soft,#e8f6ee);color:#146239;border:1px solid #b7e0c6}
.lookup.missing{display:flex;background:#fdf2f2;color:#8f2c25;border:1px solid #f0c8c4}
.lookup.checking{display:flex;background:var(--offwhite);color:var(--muted);border:1px solid var(--line)}

/* Placement options */
.placement-list{display:grid;gap:12px;margin-top:6px}
.placement{
  display:flex;gap:14px;align-items:flex-start;padding:16px 18px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.placement:hover{border-color:#b9c7dd;background:var(--offwhite)}
.placement input{flex:none;margin:3px 0 0;width:17px;height:17px;accent-color:var(--royal)}
.placement:has(input:checked){border-color:var(--royal);background:#f4f8ff;box-shadow:0 0 0 1px var(--royal) inset}
.placement b{display:block;color:var(--navy);font-weight:800;font-size:.98rem;margin-bottom:3px}
.placement small{display:block;color:var(--muted);font-size:.85rem;line-height:1.5}
.placement .pill{margin-top:8px}

.formation-note{
  margin-top:16px;padding:16px 18px;background:var(--offwhite);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;
}
.formation-note h4{margin:0 0 6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.formation-note p{margin:0;font-size:.9rem;color:var(--ink);line-height:1.6}

/* Commitments with expandable detail */
.commitments{display:grid;gap:12px}
.commitment{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.commitment.checked{border-color:var(--royal);box-shadow:0 0 0 1px var(--royal) inset}
.commitment-top{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;cursor:pointer}
.commitment-top input{flex:none;margin:2px 0 0;width:17px;height:17px;accent-color:var(--royal)}
.commitment-top b{display:block;color:var(--navy);font-weight:800;font-size:.95rem}
.commitment-more{
  background:none;border:0;padding:0;margin-top:6px;cursor:pointer;font-family:inherit;
  color:var(--blue);font-size:.82rem;font-weight:700;text-decoration:underline;
}
.commitment-detail{display:none;padding:0 18px 16px 49px;color:var(--muted);font-size:.89rem;line-height:1.65}
.commitment.open .commitment-detail{display:block}

/* Review */
.review-group{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;background:#fff}
.review-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--offwhite);
}
.review-head h3{margin:0;font-size:.92rem;color:var(--navy);font-weight:800}
.review-edit{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  color:var(--blue);font-size:.82rem;font-weight:800;text-decoration:underline;
}
.review-body{padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.9rem}
.review-body dt{color:var(--muted);font-weight:700}
.review-body dd{margin:0;color:var(--ink)}
@media (max-width:560px){.review-body{grid-template-columns:1fr;gap:4px 0}.review-body dd{margin-bottom:10px}}

/* Applicant journey timeline */
.journey{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.journey li{position:relative;padding:0 0 26px 44px}
.journey li::before{
  content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--line);
}
.journey li:last-child{padding-bottom:0}
.journey li:last-child::before{display:none}
.journey .marker{
  position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  color:var(--muted);font-size:.72rem;font-weight:900;
}
.journey li.done .marker{background:var(--royal);border-color:var(--royal);color:#fff}
.journey li.current .marker{border-color:var(--gold);background:var(--gold);color:#1a1305}
.journey b{display:block;color:var(--navy);font-size:.96rem;font-weight:800;margin-bottom:4px}
.journey p{margin:0;color:var(--muted);font-size:.89rem;line-height:1.6}

/* ==========================================================================
   Directory results (Find a Member)
   ========================================================================== */
.results-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.results-bar .count{font-size:.88rem;font-weight:800;color:var(--navy)}
.results-bar .count b{color:var(--blue)}
.results-bar .reset{font-size:.84rem;font-weight:800;color:var(--blue);text-decoration:underline;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}

.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.member-card{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);border-radius:var(--radius);
  padding:22px;transition:box-shadow .2s ease,transform .2s ease;
}
.member-card:hover{box-shadow:0 12px 30px rgba(8,12,22,.10);transform:translateY(-2px)}
.member-card .mc-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.member-card .avatar{
  flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--royal));color:#fff;
  font-weight:900;font-size:1rem;letter-spacing:.02em;
}
.member-card h3{margin:0;font-size:1.02rem;color:var(--navy);font-weight:800;line-height:1.3}
.member-card .role{display:block;font-size:.78rem;font-weight:700;color:var(--blue);margin-top:3px}
.member-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:.86rem}
.member-card dt{color:var(--muted);font-weight:700}
.member-card dd{margin:0;color:var(--ink)}

.empty-state{text-align:center;padding:64px 20px;border:1px dashed var(--line);border-radius:14px;background:#fff}
.empty-state h3{margin:0 0 10px;color:var(--navy);font-size:1.2rem}
.empty-state p{margin:0 auto;color:var(--muted);max-width:440px}

.data-notice{
  margin-top:26px;padding:14px 18px;border-radius:8px;
  background:#fff8e6;border:1px solid #f0dcae;color:#6b5316;
  font-size:.84rem;line-height:1.6;
}
.data-notice b{color:#4d3b0c}

/* ==========================================================================
   Contact detail blocks
   ========================================================================== */
.contact-block{padding:26px;background:#fff;border:1px solid var(--line);border-radius:12px;height:100%}
.contact-block h3{margin:0 0 8px;color:var(--navy);font-size:1.02rem;font-weight:800}
.contact-block p{margin:0 0 6px;color:var(--muted);font-size:.92rem;line-height:1.6}
.contact-block a{color:var(--blue);font-weight:700}
.contact-block .tbd{color:#9aa4b5;font-style:italic}

/* ==========================================================================
   Utility
   ========================================================================== */
.mt-lg{margin-top:60px}
.center{text-align:center}
.max-720{max-width:720px;margin-left:auto;margin-right:auto}