/* ==========================================================================
   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;

  /* Where the hero's film begins: below the bar, with a little air under it
     so the picture never finishes hard against a menu link. The bar itself
     stands on the hero's own navy above this line. */
  --hero-top:calc(var(--nav-h) + clamp(10px, 1.4vw, 26px));

  /* THE hero blue. One value, used by every part of the hero, taken from the
     film itself.

     It is measured, not chosen. The strip above the film, the plinth below
     it and the fade between them were all set to rgb(7,16,32), which is the
     colour along the film's BOTTOM edge. But the row of the film that meets
     the strip is its top edge, and that renders at rgb(6,13,27) — the film
     carries a faint vertical shading of its own, four points darker at the
     head than at the foot.

     Four points is nothing on a photograph and very visible on a flat field:
     it put a hard step across the full width of the page, one pixel below
     the navigation, and that step is the second colour KGF could see. Sampled
     from the rendered page at 1920 and at 1440, the film's first row is
     rgb(6,13,27) at every column.

     So this is that colour, and nothing in the hero is allowed its own. */
  --hero-ground:#060d1b;
}

*{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)}
/* The bar holds two things that must never crowd each other: the mark on the
   left and the menu on the right. `gap` here is a floor, not a look — flex
   will happily push the first link up against the wordmark once the row runs
   short of room, and that is exactly what it had been doing on laptop widths.
   The floor is generous and grows with the window, so the mark always sits in
   its own air. */
.navin{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h);gap:clamp(40px,5vw,72px)}
/* Neither side may be squeezed. A shrunken menu is how links end up touching
   the mark instead of the row simply folding into the panel. */
.brand,.menu{flex:0 0 auto}
.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}
/* The spacing between links tightens with the window before anything else
   gives, so the whole menu narrows rather than the row overflowing. */
.menu{display:flex;gap:clamp(16px,1.6vw,26px);align-items:center;font-size:.86rem;font-weight:700;letter-spacing:.01em;flex-wrap:nowrap}
.menu a{padding:6px 0;position:relative;color:#fff;transition:color .3s ease;white-space:nowrap}
.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}

/* Where the menu folds away.
   It used to be 960px, which was wishful: the eight links plus the Apply
   button need about 660px and the mark takes 326, so below roughly 1180 the
   row could not hold both and the menu was quietly overflowing the window —
   the Apply button ran off the right edge and the links pressed against the
   wordmark. The bar now folds into the panel at the width where it stops
   fitting rather than the width where it stops being a phone. */
@media (max-width:1180px){
  .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%);
}

/* ==========================================================================
   THE HOME PAGE HERO
   ==========================================================================

   The hero IS the film. KGF's instruction was to take everything off it and
   put the video there instead, and the film carries the wording itself — it
   animates through Equipping Leaders, Empowering Priests, Impacting Nations
   and settles on the seal. So there is no headline over it, no paragraph, no
   buttons, and nothing to make legible. Every scrim, every gradient and every
   overlay this hero used to carry is gone with them: they existed to hold
   words apart from a picture, and there are no words.

   THE FRAME IS SHOWN WHOLE. That is the one rule everything else follows
   from. The wording is centred inside a 16:9 frame, so cropping to fill an
   arbitrary window would cut the ends off the sentences — which is exactly
   what `cover` does on a wide short screen. The hero is therefore given the
   film's own shape and the video fills it exactly, with nothing lost at any
   width. */

.hero.has-motion{
  position:relative;
  overflow:hidden;
  padding:0;

  /* The hero box itself is square-cornered, because a diagonal taken across
     a frame of film cuts into the picture. The V is not gone — it has moved
     to the foot of the navy block, below the buttons, where it cuts through
     the fellowship's own colour instead of through the film. See
     .hero-actions. */
  clip-path:none;

  /* Nothing layered, nothing tinted. The flat colour exists only for the
     instant before the first frame paints. */
  background-image:none;
  background-color:var(--hero-ground);

  /* The film's own shape, so the whole frame shows and nothing is cropped.

     Height rather than aspect-ratio, and that is not a stylistic choice:
     aspect-ratio with a max-height narrows the BOX, so a wide short window
     produced a hero that did not reach the sides of the page. Setting the
     height directly leaves the hero full width always, and the frame is
     letterboxed inside it against the same navy the film itself opens on,
     so the join is invisible.

     56.25vw is 16:9 of the window, so on any window narrower than it is tall
     the hero IS the film's shape and nothing is cropped at all.

     There used to be a third term here, a flat 900px. It did nothing on a
     laptop and wrecked a desktop: at 2560 across it held the hero to 900px
     tall while the width ran on, giving a 2.84:1 letterbox that cropped 38%
     off the film and blew the rest up by a third. That is what turned the
     backdrop's soft shading and its ghosted photo panels into visible blocks
     of different blues, and what cut the seal into the menu. A laptop never
     hit the cap, which is exactly why one looked right and the other did not.

     88vh alone keeps the hero clear of the fold without ever squaring it off
     like that. */
  width:100%;

  /* The film's own box, plus the strip the bar stands on.

     The bar used to float directly on the film, and it read as crowded: the
     montage ran up under the links and the seal's rim finished a few pixels
     below them, so the two were touching without ever quite overlapping.

     A top margin is not the way to fix that, and this was tried. The
     navigation is fixed, transparent and white — its links stay white until
     the page scrolls and the bar turns solid — so pushing the hero down
     leaves the bar sitting on the white page background with white text on
     it, which is a menu nobody can read.

     What works is to keep the hero starting at the very top of the page and
     make its own navy the thing the bar stands on. The hero is that much
     taller, the film is inset by the same amount below (see .hero-motion),
     and the strip between is var(--hero-ground) — the film's own colour,
     so it reads as the film's own ground rather than a band above it. The
     white links keep their dark backing, and the picture keeps clear of
     them. */
  height:calc(min(56.25vw, 88vh) + var(--hero-top));
}

/* The dotted texture was a treatment for a flat hero. */
.hero.has-motion:before,
.hero.has-motion:after{display:none}

.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}

.hero-motion{
  position:absolute;

  /* Below the bar, not under it. The top inset is the bar's own height plus
     a little air, so nothing in the picture finishes hard against a link. */
  inset:var(--hero-top) 0 0 0;
  z-index:0;

  /* Shown until the first frame arrives, and left showing wherever the video
     is not played at all — reduced motion, or a browser that can decode
     neither source. It is the film's closing frame, so what stands in for the
     film is the picture the film ends on. */
  background:url("../images/hero/hero-still.jpg?v=edac3d94c7") center/cover no-repeat var(--hero-ground);
}

/* cover, so the film fills the hero edge to edge with no bands.

   The trade is a crop rather than a squash. `fill` would stretch the picture
   to whatever shape the window happens to be — faces widened, the seal turned
   into an ellipse — and that is not what "fills the space" should ever mean.
   `cover` keeps every proportion true and loses a little off the top and
   bottom on a window wider than 16:9.

   What that costs is nothing that matters: the film's wording and its seal
   are centred in the frame, so the crop takes empty ground from the edges and
   never a word. On a phone the hero IS 16:9, so nothing is cropped at all. */
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;

  /* The film's own ground. For the instant before the first frame paints,
     and behind the poster wherever the video never plays at all. */
  background:var(--hero-ground);
}

/* The join between the strip the bar stands on and the head of the film.

   Exactly the same problem as the foot, and it took the same answer.

   Setting the strip to one flat navy is not enough on its own, and the
   measurements say why: `cover` crops the frame by a different amount at
   every window shape, so the first row of film actually showing is a
   different interior row each time. At 1920x1080 it renders rgb(6,13,27) and
   the flat strip matches it exactly; at 1600x1000 the same strip meets
   rgb(7,13,29) and there is a two-point step. No single colour can sit
   against all of them.

   So the film's first inch is faded into the ground, head-down, the way its
   last inch has always been faded into it foot-up. This is not a second
   colour — it is the one colour, brought over the film for a couple of
   centimetres so that whatever the film is doing behind it, the row where it
   meets the strip IS the strip. */
.hero-motion:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:clamp(40px, 6vw, 90px);
  pointer-events:none;
  z-index:1;
  background:linear-gradient(to top,
    rgba(6,13,27,0) 0%,
    rgba(6,13,27,.35) 38%,
    rgba(6,13,27,.82) 74%,
    var(--hero-ground) 100%);
}

/* The join between the film and the plinth beneath it.

   `cover` crops the frame on a window wider than 16:9, so the row actually
   showing at the foot is an interior one, and its colour moves as the film
   plays. A single flat colour underneath can therefore match it at one moment
   and not the next, which is exactly the line you can see.

   So the last inch of the film is faded into the ground colour. Whatever the
   film is doing, its foot arrives at var(--hero-ground) and the plinth begins
   at var(--hero-ground), and there is no edge to find. */
.hero-motion:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(56px, 9vw, 120px);
  pointer-events:none;
  /* Above the video, like its opposite number at the head. Without this the
     <video> paints over both fades and neither does anything. */
  z-index:1;
  background:linear-gradient(to bottom,
    rgba(6,13,27,0) 0%,
    rgba(6,13,27,.35) 38%,
    rgba(6,13,27,.82) 74%,
    var(--hero-ground) 100%);
}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}

/* The plinth beneath the film.

   Slim on purpose: it carries two links and nothing else. It begins in the
   film's own edge colour so there is no seam where the picture stops, and
   is that colour all the way down, which gives the light
   section below it something to start from. */
.hero-actions{
  /* The same one blue as everything else in the hero. Not a value of its
     own — var(--hero-ground), so it cannot drift away from the strip above
     the film the way it did before. */
  background:var(--hero-ground);

  /* Pulled up one pixel, and that is not a fudge — it is the fix for a real
     seam.

     The hero's height is min(56.25vw, 88vh, 900px), and 88vh of a 780px
     window is 686.4px. A box cannot be painted on a fraction of a pixel, so
     the browser rounds, and between the hero's last row and the plinth's
     first there is a sliver where the page's own near-white background shows
     through. Measured, it was rgb(130,135,143) against a ground of
     the hero's ground — a bright hairline exactly where the film ends.

     It only appears at window heights whose 88% is fractional, which is why
     it shows on one screen and not another. Overlapping by a pixel closes it
     at every height. The two surfaces meet on the same colour, so the overlap
     itself cannot be seen. */
  margin-top:-1px;

  /* The V the hero has always ended on.

     It sits here rather than on the hero because the hero is now a frame of
     film, and a diagonal across a picture cuts the picture. Beneath the
     buttons there is nothing but the fellowship's navy, so the point can be
     cut there and the whole block — film, buttons, V — reads as one shape,
     exactly as the hero did before the film replaced its contents.

     The depth is a fixed 90px rather than a percentage. A percentage of this
     band would be a shallow nick; the original was about 90px of a much
     taller hero, and it is that DEPTH the eye recognises. */
  padding:16px 0 calc(18px + 90px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 90px), 50% 100%, 0 calc(100% - 90px));
}

.hero-actions .container{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
}

@media (max-width:600px){
  /* Side by side would give two buttons too narrow to read on a phone, so
     they stack and each takes the full width. */
  .hero-actions .container{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }

  /* And a shallower point: 90px of a narrow screen is a chasm. */
  .hero-actions{
    padding-bottom:calc(18px + 52px);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 52px), 50% 100%, 0 calc(100% - 52px));
  }
}

/* ---- Narrow screens ---------------------------------------------------
   Nothing to override any more.

   This block used to hold the phone's own treatment: the bar's height added
   on top of the frame and the film inset below it, because at 390px across
   the frame is only about 220px tall and an overlaid 82px bar covered a
   third of the film.

   That was the right answer everywhere, not only on a phone — KGF reported
   the same crowding on a laptop — so it is now the rule for every width, up
   in .hero.has-motion and .hero-motion. Kept as a note rather than deleted
   silently, so the reasoning is not lost: the film is the hero at every
   size, whole and uncropped, never hidden and never swapped for a still,
   because hiding it would leave an empty box. */

.eyebrow{color:var(--sky);text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.76rem}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-.01em;margin:16px 0 22px;text-transform:uppercase;text-shadow:0 3px 26px rgba(0,0,0,.5)}
/* The middle clause of the mandate, in the fellowship's gold. */
.hero h1 .hero-accent{color:var(--gold)}

/* One phrase to a line, at every width.

   On a laptop the words were wide enough to break this way on their own; on a
   phone the type is smaller and "PRIESTS. IMPACTING" ran together on one line,
   so the headline read as a different shape on the two. Stating the breaks
   makes them the same everywhere rather than an accident of how much happens
   to fit.

   Spans rather than <br>: the line structure stays in the stylesheet, so it
   can be relaxed at a width where it stops making sense without touching the
   markup, and a screen reader still meets one continuous sentence. */
.hero h1 .hero-line{display:block}
.hero p{max-width:640px;font-size:1.02rem;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}


/* ---------------------------------------------------------------------------
   The official seal
   ---------------------------------------------------------------------------
   The fellowship's own mark, cut out of its white square so it sits on the
   navy bar, on white, and on the deep hero gradient without carrying a pale
   box around with it.

   It sits to the LEFT of the wordmark, which is the fellowship's own
   preference: the mark first, then the name it belongs to.

   Sized in the markup as well as here: width and height attributes on the
   image stop the header jumping while it loads, which on a slow connection is
   the first thing a visitor sees the site do.
   ------------------------------------------------------------------------ */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/*
 * The wordmark is its own inline-block.
 *
 * `.brand small` is display:block, and a block box inside an inline one splits
 * the inline into anonymous blocks — which puts the seal on one line and the
 * name underneath it. That is exactly what a visitor sees if their browser has
 * the new markup and a cached copy of the old stylesheet, and it is why the
 * stylesheet is now fingerprinted at build time.
 *
 * Belt and braces: as an inline-block the wordmark cannot split the line even
 * without the flex rule above.
 */
.brand > span {
  display: inline-block;
  vertical-align: middle;
  min-width: 0;
}

.brand-seal {
  flex: none;
  width: 44px;
  height: 44px;
  display: block;
  /* A whisper of shadow so the gold rim separates from the navy behind it. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.nav.scrolled .brand-seal {
  filter: drop-shadow(0 1px 2px rgba(8, 20, 40, .18));
}

.mobilepanel-top .brand-seal { width: 38px; height: 38px; }

@media (max-width: 700px) {
  .brand-seal { width: 36px; height: 36px; }
  .brand { gap: 9px; }
}

/* The seal in the footer.

   Enlarged at KGF's instruction. It sits on the black band at the foot of
   every page and is the last thing anybody sees, so it is given the size of a
   mark rather than the size of an icon — and it scales with the viewport so a
   narrow screen does not hand a quarter of its width to it. */
.foot-seal {
  display: block;
  width: clamp(110px, 13vw, 176px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 0 18px;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .38));
}

/* The hidden attribute must actually hide.

   This is not a nicety. `[hidden]{display:none}` lives in the browser's own
   stylesheet, where ANY class selector outranks it — so `.btn{display:flex}`
   quietly beat it, and every button the form marked hidden went on being
   drawn. The Submit button sat beside Continue from step one, and Back was on
   screen before there was anywhere to go back to.

   Every script on this site hides things by setting `el.hidden = true`, which
   is the right way to do it. This is what makes that mean something. It is
   deliberately `!important`: the whole point is to outrank whatever component
   rule the element also carries, and an element with `hidden` on it is not
   meant to be seen whatever else it is. */
[hidden]{ display: none !important; }

/* The application form: what is said where the submit button would be.

   The button is withheld until the application can actually be sent, so this
   takes its place and says why. Amber rather than red: nothing has gone
   wrong, there is simply more to do. */
.not-ready{
  display: inline-block;
  max-width: 380px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold, #d6ad43);
  background: #fff8e6;
  color: #624a0b;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width:600px){ .not-ready{ max-width:none; width:100%; } }