/* Self-hosted webfonts.
   Google Fonts cost two extra origins on the critical path: a DNS lookup and
   a TLS handshake for fonts.googleapis.com to fetch a stylesheet, and only
   once that arrives does the browser learn which file to request from a second
   origin, fonts.gstatic.com, and pay for that connection too. Served from our
   own origin the connection is already open and the files are named in this
   stylesheet, so the fetch starts immediately.
   font-display:swap keeps text readable in the fallback face throughout, which
   is why no heading is ever invisible while a font loads.
   The unicode-range lines are carried over verbatim: they are what stops a
   browser downloading the latin-ext file for text that is pure latin. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oswald-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/oswald-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

@charset "utf-8";
/* ==========================================================================
   NEPSIS PAKISTAN - base + component layer
   Dark institutional palette drawn from the official seal: midnight navy
   foundation, metallic gold accent, emerald as a quiet supporting note.
   Utilities are generated after this block by _src/tools/tw.ps1.
   In a real Tailwind build this file is @layer base + @layer components.
   ========================================================================== */

:root{
  /* Sampled from the official seal: 48.5% #011023 navy field, 4.6% #FDF5E4
     ivory, 2.5% #E49F38 amber gold, 1.8% #0A3C26 wreath green.

     The dark surfaces are deliberately lifted well above the seal's #011023.
     An almost-black field puts the maximum possible contrast behind every
     paragraph, and over a long page that is tiring to read rather than
     dramatic. Raising the field to a true dark navy keeps the brand and the
     drama, lowers the glare, and still clears WCAG AA on every text pair by a
     wide margin. The brightest accents were pulled back for the same reason. */
  /* foundation */
  --base:#0E1E2E; --navy:#14263A; --royal:#1B3A5E;
  --card:#13243A; --elevated:#1A3350;
  /* accent: the seal's amber gold, an accent and never the dominant colour */
  --gold:#E49F38; --gold-bright:#EDAA45; --gold-soft:#EFC079; --gold-deep:#CE8A29;
  /* text */
  --ivory:#F3EDE2; --body:#C6D2E0; --dim:#8C9BAD;
  /* supporting: the wreath green */
  --emerald:#0F4A30; --emerald-soft:#235C3E;
  --line:#1D3E63;
  /* light sections: the seal's warm ivory as paper, navy as ink. Gold cannot
     carry text on ivory (#E49F38 on #FDF5E4 is 2.1:1), so light sections use a
     deep bronze drawn from the same gold for eyebrows and accents. */
  --paper:#FDF5E4; --paper-2:#F7EEDB;
  --ink:#14263A; --ink-2:#3D4B5C; --gold-ink:#8A5A12;
  --hair:rgba(239,192,121,.16);      /* gold hairline */
  --hair-soft:rgba(198,210,224,.10); /* neutral hairline */
  --glass:rgba(20,38,58,.72);

  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Oswald",var(--sans);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:104px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E");
}
@media (max-width:1023px){ :root{ --header-h:84px } }

/* -- preflight ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--line)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);tab-size:4}
body{
  margin:0;background:var(--base);color:var(--body);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
/* Display face for headings. Oswald is a condensed grotesque: it holds a lot of
   weight in a narrow column, so a headline reads as confident without needing to
   shout in capitals. Poppins stays for body text, where its open shapes are
   easier on long passages and on readers for whom English is a second language.
   Sentence case throughout, deliberately: all-caps would read as a sales pitch
   rather than a ministry. */
h1,h2{
  font-family:"Oswald",var(--sans);
  font-weight:600;color:var(--ivory);
  letter-spacing:-0.005em;line-height:1.06;
}
h3,h4{
  font-family:"Oswald",var(--sans);
  font-weight:500;color:var(--ivory);
  letter-spacing:0;line-height:1.22;
}
/* the script accent keeps its own face */
.accent-word{font-family:var(--sans)}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
/* WordPress wraps each photograph in <picture> to offer a WebP ahead of the
   JPEG. An inline <picture> would become the image's containing block, and the
   several rules here that size an image with height:100% would then measure
   against a box of no height and collapse to auto, dropping every photograph
   out of its aspect-ratio frame. display:contents removes the wrapper from
   layout entirely, so the image is laid out by its real parent exactly as it
   was before the wrapping. */
picture{display:contents}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;cursor:pointer}
table{border-collapse:collapse}
hr{border-top-width:1px}
[hidden]{display:none!important}
::selection{background:rgba(228,159,56,.32);color:var(--ivory)}

/* ambient lighting: one fixed layer behind everything, so scrolling stays cheap */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 84% -12%, rgba(27,58,94,.55), transparent 62%),
    radial-gradient(900px 700px at -12% 26%, rgba(10,60,38,.30), transparent 62%),
    radial-gradient(780px 600px at 46% 108%, rgba(228,159,56,.08), transparent 64%),
    var(--base);
}
/* very fine grain, stops the large gradients from banding on cheap panels */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -- focus ---------------------------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:6px;
}
.skip-link{
  position:absolute;left:1rem;top:-120px;z-index:200;background:var(--gold);color:#0E1E2E;
  padding:.75rem 1.25rem;border-radius:var(--r-md);font-size:1rem;font-weight:600;
  transition:top 180ms var(--ease);
}
.skip-link:focus{top:1rem}

/* -- layout --------------------------------------------------------------- */
.container-x{width:100%;max-width:1280px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:768px){.container-x{padding-inline:2rem}}
@media (min-width:1024px){.container-x{padding-inline:2.5rem}}

/* alternate band: translucent so the ambient light still reads through it */
/* Alternate band. This has to be clearly lighter than the base, not a whisper:
   on a dark site two adjacent sections with no visible band merge into one
   continuous dark field, and the padding between them reads as a void rather
   than as breathing room. */
section.on-alt{
  position:relative;background-color:rgba(20,38,58,.88);
  background-image:linear-gradient(180deg,rgba(13,44,76,.82) 0%,rgba(6,26,47,.94) 100%);
  box-shadow:inset 0 1px 0 rgba(239,192,121,.22), inset 0 -1px 0 rgba(239,192,121,.10);
}

/* -- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.875rem 1.5rem;border-radius:var(--r-md);
  font-size:1rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color 200ms var(--ease),color 200ms var(--ease),
             border-color 200ms var(--ease),box-shadow 260ms var(--ease),transform 260ms var(--ease);
}
.btn::after{
  content:"";width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--ico-arrow) center/contain no-repeat;mask:var(--ico-arrow) center/contain no-repeat;
  transition:transform 200ms var(--ease);
}
.btn--plain::after{display:none}
.btn:hover::after{transform:translateX(4px)}

/* primary: brushed gold, dark navy type (8.7:1) */
.btn-primary{
  background:linear-gradient(180deg,#F2B355 0%,var(--gold) 55%,#C0801F 100%);
  color:#0E1E2E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 6px 18px -8px rgba(228,159,56,.55);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#EDAA45 0%,#E0982F 55%,#CE8A29 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 14px 34px -10px rgba(228,159,56,.6);
  transform:translateY(-2px);
}
/* secondary: elevated navy surface with a gold hairline */
.btn-secondary{
  background:linear-gradient(180deg,rgba(26,51,80,.95),rgba(19,36,58,.95));
  color:var(--ivory);border-color:rgba(228,159,56,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px -10px rgba(0,0,0,.6);
}
.btn-secondary:hover{
  border-color:var(--gold-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(228,159,56,.16);
  transform:translateY(-2px);
}
.btn-outline{border-color:rgba(253,245,228,.26);color:var(--ivory)}
.btn-outline:hover{border-color:var(--gold-soft);background:rgba(253,245,228,.06);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(253,245,228,.30);color:var(--ivory);background:rgba(14,30,46,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold-soft);background:rgba(14,30,46,.5);transform:translateY(-2px)}
.btn-sm{min-height:46px;padding:.5rem 1.25rem;font-size:1rem}

/* -- hover craft ------------------------------------------------------------
   A light sweeps diagonally across a button on hover. It is one pseudo-element
   moving on the X axis behind the label, clipped by the button's own radius, so
   it costs a single composited layer and never touches layout.
   Buttons are also given a small magnetic pull toward the cursor by script;
   --mxp/--myp are set there and are zero until then. */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--mxp,0px),var(--myp,0px),0)}
.btn > *,.btn::after{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.btn:hover::before{opacity:1;animation:btn-sheen 760ms var(--ease)}
@keyframes btn-sheen{from{left:-60%}to{left:120%}}
.btn-primary::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}

/* nav links: a gold rule wipes in from the left rather than simply appearing */
.nav-link{position:relative}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 320ms cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}

/* the arrow link gains a drawn underline to match */
.link-arrow{position:relative}
.link-arrow::before{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:calc(100% - 23px);
  background:currentColor;opacity:.5;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 340ms cubic-bezier(.16,1,.3,1);
}
.link-arrow:hover::before,.group:hover .link-arrow::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .btn:hover::before{animation:none;opacity:0}
  .btn{transform:none}
  .nav-link::after,.link-arrow::before{transition:none}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;
  color:var(--ivory);transition:color 200ms var(--ease);
}
.link-arrow::after{
  content:"";width:15px;height:15px;flex:none;background:var(--gold-soft);
  -webkit-mask:var(--ico-arrow) center/contain no-repeat;mask:var(--ico-arrow) center/contain no-repeat;
  transition:transform 200ms var(--ease);
}
.link-arrow:hover{color:var(--gold-soft)}
.link-arrow:hover::after,.group:hover .link-arrow::after{transform:translateX(5px)}

/* -- type ----------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);line-height:1;
}

/* Phone numbers sit inline in sentences, which WCAG exempts from the 24px
   target minimum, but they are tapped on a phone more than anything else on
   the site. The extra 2px each side clears 24 without disturbing the line. */
a[href^="tel:"]{display:inline-block;padding-block:2px}
/* 57ch, not 68ch. The ch unit is the width of the "0" glyph, and in Poppins that
   is about 0.63em while the average letter is nearer 0.5em, so a 68ch cap was
   actually delivering ~85 characters a line. Past roughly 80 the eye starts
   losing its place on the return sweep. 57ch measures out at ~72 characters,
   inside the 45-75 that typographers aim for. */
.prose-x{max-width:57ch;color:var(--body)}
.prose-x>p+p{margin-top:1.2rem}
.prose-x a,.link-inline{
  color:var(--gold-soft);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size 200ms var(--ease),color 200ms var(--ease);
}
.prose-x a:hover,.link-inline:hover{background-size:100% 2px;color:var(--gold-bright)}

/* Read more, on small screens only.
 *
 * A passage that reads well on a laptop becomes an intimidating wall on a
 * phone, and people answer it by scrolling past rather than reading. On a
 * narrow screen a long passage is therefore clipped to roughly a screenful and
 * a button opens the rest.
 *
 * Two deliberate choices. The fade is a mask on the text itself, not a
 * gradient panel laid over it, so it works on every section background without
 * the stylesheet having to know which background it is sitting on. And nothing
 * is display:none and nothing is removed from the document: the complete text
 * is in the HTML on every request, collapsed only by a max-height. That is
 * what search engines read, so the page is indexed in full, and it is also why
 * the content is still there for anyone without JavaScript, who simply sees
 * the whole passage with no button.
 */
.rm-body{transition:max-height 420ms var(--ease)}
.rm-body[data-open="false"]{
  max-height:var(--rm-h,21rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 64%,transparent 100%);
}
.rm-btn{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  color:var(--gold-soft);border-bottom:1px solid rgba(239,192,121,.35);
  padding-bottom:3px;
  transition:color 200ms var(--ease),border-color 200ms var(--ease);
}
.rm-btn:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
.on-light .rm-btn{color:var(--gold-ink);border-color:rgba(138,90,18,.4)}
.on-light .rm-btn:hover{color:var(--ink);border-color:var(--ink)}
.rm-btn svg{width:1rem;height:1rem;transition:transform 300ms var(--ease)}
.rm-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .rm-body,.rm-btn svg{transition:none} }

/* The short NEPSIS sequence under the hero.
 *
 * Twelve seconds, four frames, built from CSS so there is no video file to
 * download and no second connection to open. The frames are stacked and only
 * opacity and a slow scale change, both of which the compositor can do on its
 * own thread, so this does not cause layout work while the reader scrolls.
 *
 * It is paused until it is actually on screen, and paused again when it leaves,
 * so a phone is never animating something nobody is looking at. If the reader
 * has asked for reduced motion the whole thing stops and settles on the opening
 * frame, and the figcaption carries the same words the sequence says, so a
 * screen reader gets the message without any of the motion.
 */
.brandfilm{margin:0;position:relative}
.bf-stage{
  position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;
  border-radius:var(--r-xl);background:var(--base);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
}
.bf-slide{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:2rem;opacity:0}
.bf-slide img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:inherit}
.bf-slide--mark,.bf-slide--c{background:radial-gradient(120% 90% at 50% 10%,rgba(27,58,94,.85),var(--base) 70%)}
/* Matched on img as well as the class, so this outweighs the rule above rather
   than fighting it with !important. The seal is a logo, not a backdrop: it sits
   in the normal flow at its own size with the wordmark beneath it. */
.bf-slide img.bf-mark{position:static;width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55))}
.bf-word{margin-top:1rem;font-family:"Oswald",var(--sans);font-weight:600;font-size:1.75rem;
  letter-spacing:.22em;color:var(--ivory)}
.bf-sub{margin-top:.5rem;font-size:.9375rem;letter-spacing:.06em;color:var(--gold-soft);max-width:22rem}
.bf-sub--end{font-family:"Oswald",var(--sans);font-size:1.375rem;letter-spacing:.1em;color:var(--gold-soft)}
.bf-cap{position:relative;margin-top:auto;align-self:flex-start;text-align:left;
  font-size:1.0625rem;font-weight:500;line-height:1.35;color:var(--ivory);max-width:20rem;
  text-shadow:0 2px 18px rgba(0,0,0,.9)}
/* A scrim so a caption stays readable over any photograph. */
.bf-slide--a::after,.bf-slide--b::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));pointer-events:none}
.bf-slide--a .bf-cap,.bf-slide--b .bf-cap{z-index:1}

@keyframes bf-frame{
  0%        {opacity:0;transform:scale(1.06)}
  4%        {opacity:1}
  25%       {opacity:1;transform:scale(1)}
  29%       {opacity:0;transform:scale(1)}
  100%      {opacity:0;transform:scale(1.06)}
}
.js .brandfilm[data-playing="true"] .bf-slide{animation:bf-frame 12s var(--ease) infinite}
.js .brandfilm[data-playing="true"] .bf-slide--mark{animation-delay:0s}
.js .brandfilm[data-playing="true"] .bf-slide--a{animation-delay:3s}
.js .brandfilm[data-playing="true"] .bf-slide--b{animation-delay:6s}
.js .brandfilm[data-playing="true"] .bf-slide--c{animation-delay:9s}
/* Before it ever plays, and whenever it is paused, the opening frame is shown
   rather than an empty box. */
.bf-slide--mark{opacity:1}
.js .brandfilm[data-playing="true"] .bf-slide--mark{opacity:0}

@media (prefers-reduced-motion:reduce){
  .js .brandfilm[data-playing="true"] .bf-slide{animation:none}
  .js .brandfilm[data-playing="true"] .bf-slide--mark{opacity:1}
}

.list-tick>li{position:relative;padding-left:2rem;line-height:1.7}
.list-tick>li+li{margin-top:.8rem}
.list-tick>li::before{content:"";position:absolute;left:0;top:.40em;width:1.05rem;height:1.05rem;
  background:var(--gold-soft);
  -webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}

/* -- section heading ------------------------------------------------------ */
/* Stacked on small screens. From lg the lead paragraph moves beside the
   heading instead of leaving ~430px of dead space to its right, which is what
   a single max-w-3xl column produced on every section of every page. */
/* Top-aligned, not bottom-aligned. With align-items:end the two columns were
   pinned by their lower edges, so any lead paragraph taller than its heading
   pushed its own first line up above the eyebrow and the pair read as two
   unrelated blocks. Starting them together and then dropping the lead by the
   exact height of the eyebrow puts the lead's first line on the same optical
   line as the heading's first line, which is what the eye expects. */
.sec-head{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start }
.sec-head > :first-child{ min-width:0 }
.sec-head-lead{ min-width:0 }
.sec-head-lead > p{ margin:0 }
.sec-head-lead > p + p{ margin-top:1.1rem }
@media (min-width:1024px){
  .sec-head{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:4rem }
  /* 14px eyebrow on a 1.0 line-height, plus its 20px margin-bottom = 34px */
  .sec-head-lead{ padding-top:2.125rem }
}
/* a heading with no lead paragraph is allowed more measure, so it fills
   the band on its own rather than stopping two thirds of the way across */
.sec-head--solo{ max-width:62rem }

/* -- per-page deck treatments --------------------------------------------- */
/* Our Work reads as an index. The numeral is generated, so reordering the
   cards renumbers them and the markup carries no hardcoded digits. */
.deck-numbered{counter-reset:deck}
.deck-numbered > article{counter-increment:deck;padding-top:3.5rem}
.deck-numbered > article::before{
  content:counter(deck,decimal-leading-zero);
  position:absolute;top:1.6rem;left:2rem;
  font-size:1.375rem;font-weight:700;letter-spacing:.06em;line-height:1;
  color:var(--gold);opacity:.6;
  transition:opacity 320ms var(--ease),color 320ms var(--ease);
}
.deck-numbered > article:hover::before{opacity:1;color:var(--gold-bright)}

/* Get Involved uses the seal's wreath green, which appears nowhere else,
   so the page reads as a different room in the same building. */
.card--path{
  background-image:linear-gradient(180deg,rgba(30,82,54,.40) 0%,rgba(10,60,38,.28) 100%);
  border-color:rgba(30,82,54,.55);
}
.card--path::after{
  content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--emerald-soft),transparent);
}
.card--path:hover{border-color:rgba(239,192,121,.45)}

/* Resources reads as a catalogue: entries anchored by a gold margin rule
   rather than floating boxes, so the page scans like a reading list. */
.card--entry{
  background-image:none;
  background-color:rgba(19,36,58,.58);
  border-left:3px solid var(--gold-deep);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
}
/* Resources masthead atmosphere. The photograph sits behind the band at low
   opacity, masked to fade out under the text. It is deliberately not a content
   image: the scripture in the source is legible and is not in English or Urdu,
   which would be a small lie on a Pakistani ministry site. At this opacity it
   reads as warm light on wood, which is all it is there to do. */
.atmos{position:relative;isolation:isolate}
.atmos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* The URL lives here, not in the page. A relative url() written inside a
     custom property is resolved against the stylesheet that uses it, not the
     document, so the page's --atmos-img pointed one directory too high and the
     browser asked for a doubled path under the css folder. It 404'd on every
     single load and this band never showed its image.
     Paths here are relative to /assets/css/, which is stable.
     Keep example paths out of these comments: deploy.ps1 scans this file for
     image references to decide what to publish, and would try to ship them. */
  background-image:url('../img/open-bible-warm-light-still-1200.jpg');
  background-size:cover;background-position:center 58%;
  opacity:.26;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
}
@media (max-width:767px){ .atmos::before{display:none} }
.card--entry:hover{border-left-color:var(--gold-bright);border-color:var(--hair-soft);border-left-color:var(--gold-bright)}

/* About reads as editorial. The drop cap opens the story the way a long
   feature does, once on the page, on the first paragraph only. */
.lede > p:first-of-type::first-letter{
  float:left;font-size:3.5em;line-height:.8;font-weight:600;
  margin:.08em .14em 0 0;color:var(--gold-soft);
}
/* one continuous line down the milestones, not a segment per item */
.timeline{position:relative}
.timeline > li{position:relative;padding-left:1.75rem;border-left:0}
.timeline::before{
  content:"";position:absolute;left:0;top:.45rem;bottom:.45rem;width:1px;
  background:linear-gradient(180deg,var(--gold-deep),rgba(228,159,56,.12));
}

/* Contact is a two-column desk: the form on a raised panel, the details
   sticky beside it so they stay in view while the form is filled in. */
.form-panel{
  position:relative;border-radius:var(--r-lg);padding:2.25rem;
  background-image:linear-gradient(180deg,rgba(26,51,80,.92) 0%,rgba(19,36,58,.95) 100%);
  border:1px solid var(--hair-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 56px -28px rgba(0,0,0,.75);
}
.form-panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),transparent);
}
@media (min-width:1024px){
  .split-contact{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:3.25rem;align-items:start}
  .split-contact > .contact-aside{position:sticky;top:calc(var(--header-h) + 24px)}
  .form-panel{padding:2.75rem}
}

/* Policy pages read as documents: a contents rail tracks the headings and
   also gives the long prose column something to sit beside. */
.doc-layout{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:1024px){
  .doc-layout{grid-template-columns:minmax(0,1fr) 260px;gap:4rem;align-items:start}
  .doc-toc{position:sticky;top:calc(var(--header-h) + 24px)}
}
.doc-toc-inner{
  border-left:1px solid var(--hair-soft);padding-left:1.25rem;
}
.doc-toc a{
  display:block;padding:.5rem 0;font-size:1rem;line-height:1.45;
  color:var(--dim);transition:color 180ms var(--ease);
}
.doc-toc a:hover,.doc-toc a.is-current{color:var(--gold-soft)}
/* An accordion row is a short heading, so it can span the band. Only the
   answer body needs a reading measure, which keeps the section from ending
   two thirds of the way across. */
.acc-body > *{ max-width:68ch }
@media (min-width:1024px){
  .sec-head--hero{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:4.5rem }
}

/* -- social ---------------------------------------------------------------- */
/* Social marks. Each sits in its own 40px disc with a hairline, so the row
   reads as a set of deliberate objects rather than four loose glyphs. Gaps,
   padding and optical sizes are all on the 4px grid. */
.social-row{
  display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;list-style:none;margin:0;padding:0;
}
.social-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border-radius:999px;
  color:var(--ivory);
  background:linear-gradient(180deg,rgba(26,51,80,.55) 0%,rgba(19,36,58,.55) 100%);
  border:1px solid var(--hair-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:color 220ms var(--ease),border-color 220ms var(--ease),
             background 220ms var(--ease),transform 260ms var(--ease),
             box-shadow 260ms var(--ease);
}
.social-ico{display:inline-flex;width:18px;height:18px}
.social-btn svg{width:100%;height:100%;display:block}

.social-btn:hover{
  color:var(--gold-bright);
  border-color:rgba(228,159,56,.55);
  background:linear-gradient(180deg,rgba(228,159,56,.16) 0%,rgba(228,159,56,.06) 100%);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 10px 22px -10px rgba(0,0,0,.7);
}
/* focus: gold ring, then a cobalt halo and an emerald bloom. Both supporting
   colours are already in the system, so no new colour is introduced. */
.social-btn:focus-visible{
  color:var(--gold-bright);
  outline:2px solid var(--gold-bright);outline-offset:3px;
  border-color:rgba(228,159,56,.65);
  box-shadow:0 0 0 5px rgba(27,58,94,.6), 0 0 20px -2px rgba(30,82,54,.85);
}
.social-btn:active{transform:translateY(0);background:rgba(228,159,56,.2)}
@media (prefers-reduced-motion:reduce){
  .social-btn:hover,.social-btn:active{transform:none}
}

/* header: sits between the nav and the Donate button, 24px clear of each */
.social-row--header{margin-inline:1.5rem;flex-shrink:0;gap:.375rem}
.social-row--header .social-btn{width:36px;height:36px}
.social-row--header .social-ico{width:16px;height:16px}

/* drawer: touch sized, centred, 24px under the Donate button */
.social-row--drawer{gap:.75rem;justify-content:center;margin-top:1.5rem}
.social-row--drawer .social-btn{width:48px;height:48px}
.social-row--drawer .social-ico{width:20px;height:20px}

/* footer: left aligned under its label, on the same 8px gap as the header */
.social-row--footer{gap:.5rem}
@media (max-width:1023px){
  .social-row--footer .social-btn{width:44px;height:44px}
}
/* Floating WhatsApp CTA. Emerald from the seal rather than WhatsApp green, so
   it belongs to the brand while the mark still reads as WhatsApp. Collapsed to
   a disc on small screens, where a labelled pill would cover the content. */
.wa-cta{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:inline-flex;align-items:center;gap:.625rem;
  min-height:56px;padding:0 1.25rem;border-radius:999px;
  background:linear-gradient(180deg,var(--emerald-soft) 0%,var(--emerald) 100%);
  color:var(--ivory);font-size:1rem;font-weight:600;line-height:1;
  border:1px solid rgba(239,192,121,.28);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease),border-color 200ms var(--ease);
}
.wa-cta:hover{
  transform:translateY(-2px);border-color:var(--gold-soft);
  box-shadow:0 22px 48px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14);
}
.wa-cta-icon{width:22px;height:22px;flex:none}
@media (max-width:767px){
  .wa-cta{right:1rem;bottom:1rem;width:56px;padding:0;justify-content:center}
  .wa-cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .wa-cta:hover{transform:none} }
/* -- light sections --------------------------------------------------------- */
/* One class flips a section to paper. Everything inside follows: type, eyebrows,
   links, buttons, cards, the rail and the focus ring. */
section.on-light{background:var(--paper);color:var(--ink-2);isolation:isolate}
section.on-light.paper-2{background:var(--paper-2)}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{color:var(--ink)}
.on-light .eyebrow{color:var(--gold-ink)}
.on-light .pillar-num{color:var(--gold-ink)}
.on-light .text-body,.on-light .prose-x{color:var(--ink-2)}
.on-light .text-ivory{color:var(--ink)}
.on-light .text-dim{color:#566476}
.on-light .link-arrow{color:var(--ink)}
.on-light .link-arrow::after{background:var(--gold-ink)}
.on-light .link-arrow:hover{color:var(--gold-ink)}
.on-light .prose-x a,.on-light .link-inline{color:var(--gold-ink);background-image:linear-gradient(var(--gold-ink),var(--gold-ink))}
.on-light .btn-outline{border-color:rgba(20,38,58,.30);color:var(--ink)}
.on-light .btn-outline:hover{border-color:var(--gold-ink);background:rgba(20,38,58,.04)}
.on-light .btn-secondary{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 8px 20px -12px rgba(20,38,58,.5)}
.on-light .btn-secondary:hover{background:#1B3A5E;border-color:#1B3A5E}
/* The dark card's gold glow and heavy drop shadow would look grubby on ivory,
   so the light sections get the same three layers rebuilt in the ink and
   gold-ink values: a much fainter wash, and a shadow that stays soft. */
.on-light .card{
  background-color:#FFFDF8;
  background-image:
    radial-gradient(240px circle at var(--mx) var(--my),rgba(138,90,18,calc(var(--glow) * .07)),transparent 72%),
    linear-gradient(90deg,rgba(138,90,18,0) 0%,var(--gold-ink) 45%,rgba(138,90,18,0) 100%);
  background-size:100% 100%,0% 1px;
  border-color:rgba(20,38,58,.09);
  box-shadow:0 1px 2px rgba(20,38,58,.04),0 14px 32px -20px rgba(20,38,58,.28);
}
.on-light .card:hover,.on-light .card:focus-within{
  border-color:rgba(138,90,18,.34);
  background-size:100% 100%,100% 1px;
  box-shadow:0 2px 4px rgba(20,38,58,.05),0 26px 54px -24px rgba(20,38,58,.34);
}
.on-light .icon-badge{color:var(--gold-ink);background:rgba(138,90,18,.07);border-color:rgba(138,90,18,.30);box-shadow:none}
.on-light .rail-dot{background:var(--paper);border-color:var(--gold-ink);box-shadow:none}
.on-light .rail-dot::after{background:var(--gold-ink)}
.on-light .rail-item::before{background:linear-gradient(90deg,rgba(138,90,18,.5),rgba(138,90,18,.1))}
.on-light .list-tick>li::before{background:var(--gold-ink)}
.on-light :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--ink)}

/* -- homepage hero: two columns, image right ------------------------------- */
/* -- reading progress ------------------------------------------------------
   A 2px gold line across the top of the viewport that fills as the page is
   read. On a long page it answers "how much of this is left", which is the
   only question a progress bar should ever answer. Driven by a single scaleX
   so it never triggers layout. */
.read-bar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
  will-change:transform;pointer-events:none;
}

/* -- images settle as they arrive -------------------------------------------
   A photograph entering the viewport at 1.04 and settling to 1 reads as a
   camera finding focus. Paired with the existing fade so it is one movement,
   not two. The frame clips the overshoot, so nothing ever overlaps a neighbour. */
.js .nepsis-image,.js .slider{overflow:hidden}
.js [data-reveal] .nepsis-image img,
.js .nepsis-image[data-reveal] img{
  transform:scale(1.04);
  transition:transform 1100ms cubic-bezier(.16,1,.3,1);
}
.js [data-reveal].is-in .nepsis-image img,
.js .nepsis-image[data-reveal].is-in img{transform:scale(1)}

/* Focus styling already exists further up this file using --gold-bright, which
   is the brighter of the two golds and therefore the better choice against a
   dark background. A second rule here would have been a silent duplicate at
   equal specificity, won only by source order. Removed rather than fought. */

@media (prefers-reduced-motion:reduce){
  .read-bar{display:none}
  .js .nepsis-image img{transform:none!important;transition:none!important}
}

/* -- film grain ------------------------------------------------------------
   A very fine noise layer over the whole page at 3.5% opacity. It is the thing
   that stops a large dark area reading as flat digital navy and makes it read
   as a photographed surface instead, which is most of why cinematic layouts
   feel expensive.

   The noise is an inline SVG turbulence filter, so it costs no network request
   and no image file. It sits above everything at z-index 9999 but is
   pointer-events:none, so it can never intercept a click or a hover. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media print{ body::after{display:none} }

/* -- hero: entrance, light and depth ---------------------------------------
   The masthead is the one place on the site that gets a choreographed entrance.
   Everything here is transform and opacity on composited layers, so it runs on
   the GPU and cannot cause layout work while it plays.

   The headline reveals line by line from behind a mask rather than fading in.
   A fade says "a thing appeared"; a mask reveal says "a thing was always there
   and you are being shown it", which suits a movement with a long view. */
.hero-aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;overflow:hidden}
.hero-aurora span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5;will-change:transform;
}
.hero-aurora span:first-child{
  width:62vw;height:62vw;max-width:900px;max-height:900px;right:-8%;top:-14%;
  background:radial-gradient(circle,rgba(228,159,56,.22) 0%,rgba(228,159,56,.06) 45%,transparent 70%);
  animation:aurora-a 26s var(--ease) infinite alternate;
}
.hero-aurora span:last-child{
  width:52vw;height:52vw;max-width:760px;max-height:760px;left:-12%;bottom:-18%;
  background:radial-gradient(circle,rgba(27,58,94,.55) 0%,rgba(27,58,94,.18) 50%,transparent 72%);
  animation:aurora-b 34s var(--ease) infinite alternate;
}
@keyframes aurora-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,4%,0) scale(1.14)}}
@keyframes aurora-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,-5%,0) scale(1.1)}}

/* each line is a window; the span inside it slides up into view */
.hero-head{margin:0}
.hero-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-line > span{display:block;transform:translateY(105%);will-change:transform}
.hero-rise{opacity:0;transform:translateY(18px);will-change:transform,opacity}
.js [data-hero].is-lit .hero-line > span{
  transform:translateY(0);
  transition:transform 900ms cubic-bezier(.16,1,.3,1) var(--d,0ms);
}
.js [data-hero].is-lit .hero-rise{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease) var(--d,0ms),transform 700ms cubic-bezier(.16,1,.3,1) var(--d,0ms);
}
/* without JavaScript nothing is hidden: the choreography is an enhancement */
html:not(.js) .hero-line > span{transform:none}
html:not(.js) .hero-rise{opacity:1;transform:none}

/* the portrait settles rather than appears, and carries a gold edge that draws */
.hero-figure{opacity:0;transform:translateY(26px) scale(1.04);will-change:transform,opacity}
/* --par is the scroll parallax offset written by the script. The settled state
   has to consume it, otherwise the entrance transition resolves to "none" and
   the parallax silently does nothing. */
.js [data-hero].is-lit .hero-figure{
  opacity:1;transform:translate3d(0,var(--par,0px),0);
  transition:opacity 1100ms var(--ease) 260ms,transform 1200ms cubic-bezier(.16,1,.3,1) 260ms;
}
/* once settled, the parallax must track the scroll immediately rather than
   easing over 1.2s, or it lags visibly behind the page */
.js [data-hero].is-lit.is-settled .hero-figure{transition:opacity 300ms var(--ease),transform 120ms linear}
html:not(.js) .hero-figure{opacity:1;transform:none}
/* pointer-tracked tilt and sheen, same vocabulary as the cards */
@media (hover:hover) and (pointer:fine){
  .hero-figure{transform-style:preserve-3d;transition:transform 420ms var(--ease)}
  [data-hero].is-lit .hero-figure:hover{
    transform:perspective(1300px)
      rotateX(calc(var(--ry,0) * -2.4deg))
      rotateY(calc(var(--rx,0) * 2.4deg))
      scale(1.014);
  }
  .hero-figure::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(253,245,228,.10),transparent 68%);
    opacity:0;transition:opacity 420ms var(--ease);
  }
  .hero-figure:hover::after{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .hero-aurora span{animation:none}
  .hero-line > span,.hero-rise,.hero-figure{opacity:1!important;transform:none!important;transition:none!important}
}

.hero-split{position:relative;padding-top:calc(var(--header-h) + 2.5rem);padding-bottom:3.5rem}
.hero-split-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media (min-width:1024px){
  .hero-split{min-height:760px;display:flex;align-items:center;padding-top:calc(var(--header-h) + 2rem);padding-bottom:4rem}
  .hero-split-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:4.5rem;width:100%}
}

/* -- editorial image system ------------------------------------------------- */
/* Every photograph on the homepage is a .nepsis-image figure with its own
   .nepsis-image-{slot} class, so a real NEPSIS photograph can replace a
   temporary one without touching the layout. See docs/image-sources.md. */
.nepsis-image{position:relative;margin:0;isolation:isolate}
.nepsis-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-xl)}
.ratio-4-5{aspect-ratio:4/5}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-2{aspect-ratio:3/2}
.ratio-16-9{aspect-ratio:16/9}
/* a hairline frame offset behind the image, gold on dark and bronze on light */
.ed-frame::before{
  content:"";position:absolute;z-index:-1;inset:1.25rem -1.25rem -1.25rem 1.25rem;
  border:1px solid rgba(228,159,56,.45);border-radius:var(--r-xl);
}
.ed-frame.ed-frame--left::before{inset:1.25rem 1.25rem -1.25rem -1.25rem}
.on-light .ed-frame::before{border-color:rgba(138,90,18,.40)}
/* -- warm rim light on photographs -----------------------------------------
   The reference's defining look is warm light wrapping the edge of its subject.
   That was lit on a set; these are documentary photographs taken in church
   halls and cannot be re-lit. What can be done honestly is let the page's own
   light fall onto the photograph: a warm inset glow along the edges, so the
   image sits in the room rather than being pasted onto it.

   Inset shadow rather than an overlay, so it never dims the faces in the middle
   of the frame, which is the part that matters. */
.nepsis-image img,.slider-slide img{
  box-shadow:inset 0 0 70px -24px rgba(228,159,56,.42),
             inset 0 0 0 1px rgba(253,245,228,.05);
}
.on-light .nepsis-image img{box-shadow:inset 0 0 70px -26px rgba(138,90,18,.3)}

/* -- centred section heading -----------------------------------------------
   Every section heading on the homepage is left-aligned. Over thirteen sections
   that becomes a drumbeat with no variation. The reference alternates: left for
   two-column sections, centred for full-width ones. A centred variant used two
   or three times gives the page somewhere to breathe.

   The flanking rules on the eyebrow are the reference's device, and they do real
   work: they stop a short centred label looking stranded above a wide heading. */
.sec-head--center{text-align:center;max-width:52rem;margin-inline:auto}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .eyebrow::before,
.sec-head--center .eyebrow::after{
  content:"";width:34px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:.65;
}
.sec-head--center .eyebrow::after{background:linear-gradient(90deg,currentColor,transparent)}
/* a short gold rule under the heading, the reference's section marker */
.sec-head--center h2::after{
  content:"";display:block;width:56px;height:2px;border-radius:2px;
  margin:1.25rem auto 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
}
.on-light .sec-head--center h2::after{background:var(--gold-ink)}

/* a second, smaller image laid over the corner of the first */
.ed-overlap{position:relative}
.ed-inset{
  position:absolute;right:-1.5rem;bottom:-2rem;width:42%;
  border:5px solid var(--paper);border-radius:calc(var(--r-xl) + 5px);
  box-shadow:0 22px 44px -22px rgba(20,38,58,.55);
}
.ed-inset img{border-radius:var(--r-xl)}
@media (max-width:767px){
  .ed-frame::before{inset:.75rem -.75rem -.75rem .75rem}
  .ed-frame.ed-frame--left::before{inset:.75rem .75rem -.75rem -.75rem}
  .ed-inset{right:-.5rem;bottom:-1.25rem;width:46%}
}

/* the scripture line that anchors a section */
.scripture{
  border-left:2px solid var(--gold);padding-left:1.25rem;
  font-style:italic;font-weight:300;color:var(--gold-soft);
}
.scripture cite{display:block;margin-top:.5rem;font-style:normal;font-weight:600;
  font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.on-light .scripture{border-left-color:var(--gold-ink);color:var(--ink)}
.on-light .scripture cite{color:var(--gold-ink)}

/* a numbered pillar, used for the five strategic pillars */
.pillar-num{
  display:inline-flex;align-items:center;gap:.65rem;
  /* gold-soft on dark, and only the dark gold-ink once inside a light section.
     This was hard-coded to gold-ink, which is a 5.5:1 gold chosen to survive on
     ivory; on navy it is all but invisible. The homepage now runs dark, so the
     default has to be the dark-background value. */
  font-size:.875rem;font-weight:700;letter-spacing:.12em;color:var(--gold-soft);
}
/* a gold rule grows out of the number as the card is hovered, which gives the
   numbered pillars somewhere to go without adding anything to the page at rest */
.pillar-num::after{
  content:"";height:1px;width:0;background:currentColor;opacity:.55;
  transition:width 420ms var(--ease);
}
.card:hover .pillar-num::after,.card:focus-within .pillar-num::after{width:30px}

/* the NEPSIS lattice, drawn from the seal's own compass geometry */
.pattern-bg{position:relative;isolation:isolate}
.pattern-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Same trap as .atmos above: this path is relative to /assets/css/, because
     a relative url() in a custom property set on the page resolves against the
     stylesheet. As --pattern-url it was fetched as
     /assets/css/assets/brand/nepsis-pattern.svg and the lattice never drew. */
  background-image:url('../brand/nepsis-pattern.svg');background-size:180px 180px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 72%);
}
/* -- surfaces ------------------------------------------------------------- */
/* -- image slider ----------------------------------------------------------
   Built on native scroll-snap rather than a transform carousel. That buys touch
   swipe, momentum and trackpad gestures from the browser for free, and it means
   the whole thing still works with JavaScript off: without JS it is simply a
   horizontally scrollable strip of photographs with the first one in view.
   The arrows and dots are added by script, so they never appear unless they
   actually function. */
.slider{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair)}
.slider-track{
  display:flex;height:100%;margin:0;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider-track::-webkit-scrollbar{display:none}
.slider-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative}
.slider-slide img{display:block;width:100%;height:100%;object-fit:cover}
/* a floor of darkness at the bottom edge so the dots always have something to
   sit against, whatever the photograph happens to be doing down there */
.slider::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:88px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(14,30,46,0),rgba(14,30,46,.62));
}
/* Controls stay hidden until the script has wired them up. The arrows are in
   the built HTML, so without this they would render as dead buttons for anyone
   with JavaScript off, while the track itself stays perfectly swipeable. */
.slider-btn,.slider-dots{display:none}
.slider.is-ready .slider-btn{display:grid}
.slider.is-ready .slider-dots{display:flex}
.slider-btn{
  position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;z-index:3;
  place-items:center;padding:0;cursor:pointer;
  border-radius:999px;border:1px solid rgba(239,192,121,.32);
  background:rgba(14,30,46,.58);color:var(--ivory);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:.9;transition:opacity 240ms var(--ease),background-color 240ms var(--ease),
                        border-color 240ms var(--ease),transform 240ms var(--ease);
}
.slider-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.slider-btn:hover{background:rgba(14,30,46,.82);border-color:var(--gold);transform:scale(1.06)}
.slider-btn:disabled{opacity:.28;cursor:default;transform:none}
.slider-prev{left:14px}
.slider-next{right:14px}
.slider-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  justify-content:center;align-items:center;gap:.5rem;
}
.slider-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(253,245,228,.42);
  transition:width 260ms var(--ease),background-color 260ms var(--ease);
}
.slider-dot[aria-current="true"]{width:24px;background:var(--gold)}
.slider-dot:hover{background:rgba(253,245,228,.7)}
@media (prefers-reduced-motion:reduce){
  .slider-track{scroll-behavior:auto}
  .slider-btn:hover{transform:none}
}

/* -- reviews ---------------------------------------------------------------
   Built to hold real reviews and nothing else. The markup is generated from
   config.json, so an empty list produces no section at all rather than a grid
   of placeholder faces. The Google mark appears only on an entry that actually
   came from Google; see Get-Reviews in _src/build.ps1. */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.5rem}
@media (min-width:1024px){ .rv-grid{gap:2rem} }
.rv-card{padding:2rem;display:flex;flex-direction:column;gap:1rem}
.rv-top{display:flex;align-items:center;gap:.875rem}
.rv-avatar{
  width:46px;height:46px;flex:none;border-radius:999px;
  display:grid;place-items:center;
  font-size:1.125rem;font-weight:700;color:var(--ink);
  background:rgba(138,90,18,.12);border:1px solid rgba(138,90,18,.28);
}
.rv-who{display:flex;flex-direction:column;min-width:0;flex:1}
.rv-name{font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.3}
.rv-date{font-size:.9375rem;color:#566476;line-height:1.4}
.rv-src{width:22px;height:22px;flex:none;display:block}
.rv-src svg{width:100%;height:100%;display:block}
.rv-stars{display:flex;gap:.1875rem}
.rv-star{width:19px;height:19px;fill:rgba(20,38,58,.16)}
.rv-star.is-on{fill:#F0A22E}
.rv-text{
  margin:0;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);
}
.rv-note{margin-top:1.75rem;font-size:.9375rem;color:#566476}
/* the dark-section variant, in case the block is ever moved off paper */
.on-dark .rv-avatar,.on-alt .rv-avatar{color:var(--ivory);background:rgba(228,159,56,.14);border-color:rgba(228,159,56,.32)}
.on-dark .rv-name,.on-alt .rv-name{color:var(--ivory)}
.on-dark .rv-text,.on-alt .rv-text{color:var(--body)}
.on-dark .rv-star,.on-alt .rv-star{fill:rgba(198,210,224,.2)}

/* -- trust strip -----------------------------------------------------------
   A single running line under the hero. The track holds the same row twice and
   slides exactly one row width, so the loop closes with no visible seam. It
   pauses on hover and on keyboard focus, so nobody has to read a moving target,
   and it stops being a marquee at all under reduced motion: the duplicate row
   is hidden and what is left wraps into a centred, static list. */
.trust-strip{
  background:var(--navy);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding-block:.95rem;
}
.trust-track{display:flex;width:max-content;animation:trust-scroll 52s linear infinite}
.trust-strip:hover .trust-track,.trust-track:focus-within{animation-play-state:paused}
.trust-row{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.trust-row > li{display:flex;align-items:center;white-space:nowrap}
.trust-row > li::after{
  content:"";width:5px;height:5px;border-radius:999px;flex:none;
  background:var(--gold);opacity:.5;margin-inline:2.25rem;
}
.trust-row a{
  font-size:1.0625rem;font-weight:500;color:var(--body);text-decoration:none;
  transition:color 200ms var(--ease);
}
.trust-row a:hover{color:var(--gold-soft)}
@keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){
  .trust-row a{font-size:1rem}
  .trust-row > li::after{margin-inline:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .trust-track{animation:none;width:100%}
  .trust-row[aria-hidden="true"]{display:none}
  .trust-row{flex-wrap:wrap;justify-content:center;row-gap:.35rem}
  .trust-row > li:last-child::after{display:none}
}

/* -- cards, and how they answer the pointer --------------------------------
   Ten of the fourteen cards on the homepage used to do nothing on hover but
   shift their border to 24% gold, which is invisible in practice. Three layers
   now respond, in rising order of subtlety:

     1. the card lifts and its shadow deepens and spreads
     2. a gold hairline draws itself across the top edge, left to right
     3. a soft gold light tracks the cursor inside the card

   All three are painted with a transform and background layers, so nothing
   here claims ::before or ::after. That matters: the deck numbers on Our Work
   live in ::before and the margin rule on Get Involved lives in ::after, and
   both keep theirs.

   Layer 3 needs a cursor to follow, so it is armed only for fine pointers; on
   a touch screen a finger would otherwise leave the glow stranded wherever it
   last landed. --glow is registered below so it can be interpolated, since a
   radial-gradient inside background-image cannot itself be transitioned. */
@property --glow{syntax:"<number>";inherits:false;initial-value:0}

.card{
  --mx:50%;--my:0%;--glow:0;
  position:relative;border-radius:var(--r-lg);
  background-image:
    radial-gradient(240px circle at var(--mx) var(--my),rgba(228,159,56,calc(var(--glow) * .15)),transparent 72%),
    linear-gradient(90deg,rgba(228,159,56,0) 0%,var(--gold-bright) 45%,rgba(228,159,56,0) 100%),
    linear-gradient(180deg,rgba(26,51,80,.88) 0%,rgba(19,36,58,.92) 100%);
  background-size:100% 100%,0% 1px,100% 100%;
  background-position:0 0;
  background-repeat:no-repeat;
  border:1px solid var(--hair-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 18px 40px -22px rgba(0,0,0,.7);
  transition:box-shadow 320ms var(--ease),transform 320ms var(--ease),
             border-color 320ms var(--ease),background-size 460ms var(--ease),
             --glow 320ms var(--ease);
}
.card:hover,.card:focus-within{
  --lift:-5px;
  transform:translateY(var(--lift));
  border-color:rgba(228,159,56,.38);
  background-size:100% 100%,100% 1px,100% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 30px 64px -28px rgba(0,0,0,.82),
             0 0 0 1px rgba(228,159,56,.10);
}
/* a card that is itself a link earns a little more travel than one that is not */
.card-hover:hover,a.card:hover{--lift:-7px;transform:translateY(var(--lift));border-color:rgba(228,159,56,.46)}

@media (hover:hover) and (pointer:fine){
  .card:hover,.card:focus-within{--glow:1}

  /* The cinematic layer: the card tilts toward the cursor on two axes, so the
     light on it and the angle of it agree about where the pointer is. --rx and
     --ry come from the same rAF handler that drives the glow, normalised to
     -1..1 from the centre of the card.

     3.2deg is deliberately small. A big tilt reads as a gimmick and makes the
     text inside skew visibly; at this angle the card reads as a physical panel
     catching the light, and the type stays crisp. The 320ms transition means
     the tilt trails the cursor very slightly, which is what makes it feel
     weighted rather than twitchy. */
  .card{transform-style:preserve-3d}
  .card:hover,.card-hover:hover,a.card:hover{
    transform:
      perspective(1100px)
      rotateX(calc(var(--ry,0) * -3.2deg))
      rotateY(calc(var(--rx,0) * 3.2deg))
      translateY(var(--lift,0px))
      scale(1.012);
  }
  /* Lift the contents off the surface so the tilt has real depth to it, but
     only while the card is actually hovered. Applying translateZ to every card
     child at all times would promote each one to its own compositing layer and,
     worse, make each a containing block for any absolutely positioned
     descendant, which silently changes layout inside cards that have one. */
  .card:hover > *,.card-hover:hover > *,a.card:hover > *{transform:translateZ(18px)}
}
.card-media{overflow:hidden}
.card-media img{transition:transform 700ms var(--ease)}
.group:hover .card-media img{transform:scale(1.05)}

.glass,.surface-glass{
  background:rgba(27,58,94,.26);border:1px solid var(--hair-soft);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background-color 320ms var(--ease),border-color 320ms var(--ease),transform 320ms var(--ease);
}
a.glass:hover{background:rgba(27,58,94,.4);border-color:rgba(239,192,121,.4);transform:translateY(-4px)}

.icon-badge{
  width:56px;height:56px;border-radius:999px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold-soft);
  background:radial-gradient(circle at 34% 28%, rgba(228,159,56,.26), rgba(228,159,56,.08) 70%);
  border:1px solid rgba(228,159,56,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease);
}
.icon-badge svg{width:25px;height:25px}
/* Square variant for the numbered pillars. A rounded square sits better under a
   numeral than a circle does: the two shapes stack into a column rather than
   reading as unrelated marks. */
/* display:flex, not the inherited inline-flex: the badge has to start its own
   line so the numeral sits above it rather than beside it. */
.icon-badge--sq{display:flex;width:50px;height:50px;border-radius:var(--r-md)}
.icon-badge--sq svg{width:23px;height:23px}
.icon-badge svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the badge answers a hover on its own card, not only inside a .group link */
.card:hover .icon-badge,.card:focus-within .icon-badge{
  transform:translateY(-2px);border-color:var(--gold-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px -6px rgba(228,159,56,.5);
}

/* An accent word inside a heading: italic, gold, same size. Used once per page
   at most. It gives a long heading a place for the eye to land without
   introducing another type size or weight. */
.accent-word{font-style:italic;color:var(--gold-soft);font-weight:inherit}
.on-light .accent-word{color:var(--gold-ink)}
.group:hover .icon-badge{transform:translateY(-2px);border-color:var(--gold-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px -6px rgba(228,159,56,.5)}

.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;border-radius:999px;
  font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(228,159,56,.12);color:var(--gold-soft);border:1px solid rgba(228,159,56,.3);
}
.chip-dev{background:rgba(29,85,71,.28);color:#9FD3C2;border-color:rgba(29,85,71,.6)}

/* Article layout.
 *
 * A single reading column left-aligned in a 1280px container wasted about a
 * third of the width on a laptop: the text ended two thirds of the way across
 * and the rest was empty. A reading measure is still right, so the answer is
 * not a wider paragraph but a second column that earns its place, and a layout
 * narrow enough that the pair sits balanced in the page rather than hugging
 * the left edge.
 *
 * The rail holds the contents list, related reading and a call to action. It
 * sticks while the article scrolls, so a long piece always has its navigation
 * and its next step within reach, which is the honest way to hold someone on
 * the page. Below 1024px it stops being a rail and simply follows the article.
 */
.article-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:1060px;margin-inline:auto}
.article-head,.article-hero{max-width:1060px;margin-inline:auto}
@media (min-width:1024px){
  .article-layout{grid-template-columns:minmax(0,1fr) 280px;gap:3.5rem;align-items:start}
  .article-aside{position:sticky;top:calc(var(--header-h) + 24px)}
}
/* Inside the article column the paragraph fills the column: the column itself
   is the measure now, so a second cap here would reopen the gap. */
.article-main .prose-x{max-width:none}
.article-aside{display:grid;gap:1.5rem}
.aside-card{
  padding:1.25rem;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(26,51,80,.55),rgba(19,36,58,.65));
  border:1px solid var(--hair-soft);
}
.aside-card h2,.aside-card h3{font-size:1rem;margin-bottom:.75rem}
.aside-related a{
  display:block;padding:.625rem 0;font-size:.9375rem;line-height:1.4;
  color:var(--body);border-bottom:1px solid var(--hair-soft);
  transition:color 180ms var(--ease);
}
.aside-related a:last-child{border-bottom:0}
.aside-related a:hover{color:var(--gold-soft)}
.aside-cta p{font-size:.9375rem;line-height:1.55;color:var(--body);margin-bottom:1rem}

/* A photograph set into the flow of an article, with its caption. */
.article-figure{margin:2.5rem 0}
.article-figure figcaption{
  margin-top:.75rem;font-size:.875rem;line-height:1.5;color:var(--dim);
  border-left:2px solid var(--hair);padding-left:.875rem;
}

/* Article byline and author box.
 *
 * A named author with real credentials is worth more than a logo to a reader
 * deciding whether to trust what they are reading, and search engines weigh the
 * same signal. The box at the foot of an article says who wrote it and what
 * qualifies them, and links to the page where that can be checked. */
.byline{display:flex;align-items:center;gap:.875rem;margin-top:1.75rem}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--hair)}
.byline-who{font-size:.9375rem;line-height:1.35}
.byline-name{font-weight:600;color:var(--ivory)}
.byline-meta{color:var(--dim);font-size:.875rem}

.author-box{
  display:flex;gap:1.25rem;align-items:flex-start;margin-top:3rem;
  padding:1.75rem;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(26,51,80,.6),rgba(19,36,58,.7));
  border:1px solid var(--hair-soft);border-left:2px solid var(--gold);
}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--hair)}
.author-box h3{font-size:1.125rem;margin-bottom:.35rem}
.author-box p{font-size:.9375rem;line-height:1.6;color:var(--body)}
@media (max-width:539px){ .author-box{flex-direction:column;gap:1rem} }

/* A comparison table. Tables are the clearest way to put two things side by
   side, but they are the first thing to break on a phone, so this one scrolls
   horizontally inside its own box rather than forcing the whole page wide. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.75rem;
  border:1px solid var(--hair-soft);border-radius:var(--r-md)}
.data-table{width:100%;min-width:30rem;font-size:.9375rem;text-align:left}
.data-table th,.data-table td{padding:.875rem 1rem;vertical-align:top;
  border-bottom:1px solid var(--hair-soft)}
.data-table thead th{font-family:"Oswald",var(--sans);font-weight:500;
  letter-spacing:.04em;color:var(--gold-soft);background:rgba(228,159,56,.06)}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody th{font-weight:600;color:var(--ivory)}
.data-table td{color:var(--body)}

/* Breadcrumb trail, used by the blog articles. The fixed header is already
   cleared by the padding on body, so this only needs its own breathing room.
   The separator is drawn with a pseudo element rather than typed into the
   markup, so a screen reader reads the trail as a list of links and not as a
   line of slashes. */
.crumbs{padding-top:1.25rem;padding-bottom:.25rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;
  font-size:.875rem;color:var(--dim)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.5}
.crumbs a{color:var(--dim);transition:color 200ms var(--ease)}
.crumbs a:hover{color:var(--gold-soft)}
.crumbs [aria-current="page"]{color:var(--body)}

/* A payment number a donor has to transcribe by hand into a banking app is the
   one place on this site where a mistake costs real money, so each one is a
   button that copies itself. It still reads as plain text until it is hovered
   or focused; without JavaScript it is simply selectable text, which is why the
   value is also the button's visible content rather than a tooltip. */
.copy-field{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;
  margin-top:.125rem;padding:.5rem .625rem .5rem .75rem;
  border:1px solid transparent;border-radius:var(--r-sm,.5rem);
  background:rgba(255,255,255,.02);text-align:left;
  transition:background 200ms var(--ease),border-color 200ms var(--ease);
}
.copy-value{font-weight:500;color:var(--ivory);word-break:break-all}
.copy-value-iban{letter-spacing:.04em;font-variant-numeric:tabular-nums}
.copy-tag{
  flex:none;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-soft);opacity:0;transition:opacity 200ms var(--ease);
}
.copy-field:hover,.copy-field:focus-visible{background:rgba(228,159,56,.07);border-color:rgba(228,159,56,.28)}
.copy-field:hover .copy-tag,.copy-field:focus-visible .copy-tag{opacity:1}
/* Touch has no hover, so the affordance has to be visible from the start. */
@media (hover:none){ .copy-tag{opacity:.75} }
.copy-field.is-copied{background:rgba(29,85,71,.26);border-color:rgba(29,85,71,.6)}
.copy-field.is-copied .copy-tag{opacity:1;color:#9FD3C2}
@media (prefers-reduced-motion:reduce){ .copy-field,.copy-tag{transition:none} }

.note{
  border-radius:var(--r-lg);padding:2rem;
  background-image:linear-gradient(180deg,rgba(26,51,80,.8),rgba(19,36,58,.86));
  border:1px solid var(--hair-soft);border-left:2px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* gold offset frame behind a portrait */
.gold-frame{position:relative}
.gold-frame::before{content:"";position:absolute;inset:auto -16px -16px auto;width:62%;height:62%;
  border:1px solid rgba(228,159,56,.5);border-radius:var(--r-xl);z-index:0}
/* Descendant, not direct child: the WebP delivery filter wraps images in a
   <picture> element, which would otherwise step between this rule and its
   target and silently drop the stacking context. */
.gold-frame img{position:relative;z-index:1}

/* -- the Christ to Multiplication rail ------------------------------------ */
.rail{display:grid;gap:1.5rem}
.rail-item{position:relative;padding-left:3rem}
.rail-item::before{content:"";position:absolute;left:9px;top:26px;bottom:-1.6rem;width:1px;
  background:linear-gradient(180deg,rgba(228,159,56,.45),rgba(228,159,56,.08))}
.rail-item:last-child::before{display:none}
.rail-dot{position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:999px;
  border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  background:var(--base);box-shadow:0 0 16px -4px rgba(228,159,56,.6)}
.rail-dot::after{content:"";width:7px;height:7px;border-radius:999px;background:var(--gold-soft)}
@media (min-width:900px){
  .rail-h{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
  .rail-h .rail-item{padding-left:0;padding-top:2.5rem}
  .rail-h .rail-item::before{left:19px;right:-1.1rem;top:9px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(228,159,56,.45),rgba(228,159,56,.08))}
  .rail-h .rail-dot{top:0}
}

/* -- accordion ------------------------------------------------------------ */
.acc details{border-bottom:1px solid var(--hair-soft)}
.acc summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;min-height:56px;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.0625rem;color:var(--ivory);line-height:1.5;
  transition:color 200ms var(--ease);
}
.acc summary:hover{color:var(--gold-soft)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";width:20px;height:20px;flex:none;margin-top:3px;background:var(--gold-soft);
  -webkit-mask:var(--ico-chev) center/contain no-repeat;mask:var(--ico-chev) center/contain no-repeat;
  transition:transform 320ms var(--ease);
}
.acc details[open] summary::after{transform:rotate(180deg)}
.acc .acc-body{padding:0 0 1.5rem;max-width:66ch;color:var(--body);font-size:1.0625rem;line-height:1.8}
.acc .acc-body>p+p{margin-top:.9rem}

/* -- header --------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color 360ms var(--ease),border-color 360ms var(--ease),box-shadow 360ms var(--ease);
}
.site-header.is-solid,.site-header.is-light{
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--hair);
  box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
/* the gold hairline is a gradient, brightest under the logo */
.site-header.is-solid::after,.site-header.is-light::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(228,159,56,.55),rgba(228,159,56,.12) 42%,transparent 80%);
}
body{padding-top:var(--header-h)}
body.has-transparent-header{padding-top:0}

/* logo: 200x80 slot, contained, never stretched or cropped */
.brand-logo{width:200px;height:80px;object-fit:contain;object-position:left center;flex:none;
  transition:transform 360ms var(--ease);transform-origin:left center}
.site-header.is-solid .brand-logo{transform:scale(.86)}
@media (max-width:1023px){ .brand-logo{width:150px;height:60px} }

.nav-link{
  position:relative;padding:.625rem .875rem;border-radius:var(--r-sm);
  font-size:1rem;font-weight:500;color:var(--body);white-space:nowrap;
  transition:color 200ms var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:.875rem;right:.875rem;bottom:.25rem;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease);
}
.nav-link:hover{color:var(--ivory)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--gold-soft)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,10px);
  min-width:260px;padding:.5rem;border-radius:var(--r-lg);
  background:rgba(19,36,58,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--hair);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 260ms;
}
.nav-item.is-open>.dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dropdown a{display:block;padding:.625rem .875rem;border-radius:var(--r-sm);font-size:1rem;color:var(--body);
  transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.dropdown a:hover{background:rgba(228,159,56,.12);color:var(--ivory)}

.nav-toggle{color:var(--ivory)}

/* -- drawer --------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.drawer-scrim{position:absolute;inset:0;background:rgba(3,10,18,.7);opacity:0;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity 320ms var(--ease)}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
  background:linear-gradient(180deg,#14263A 0%,#0E1E2E 100%);
  border-left:1px solid var(--hair);
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.95);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform 340ms var(--ease);overflow-y:auto;overscroll-behavior:contain;
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer-scrim{opacity:1}
.drawer.is-open .drawer-panel{transform:translateX(0)}
body.is-locked{overflow:hidden}
.m-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1rem 0;min-height:56px;font-size:1.0625rem;font-weight:500;color:var(--ivory);
  border-bottom:1px solid var(--hair-soft);transition:color 200ms var(--ease)}
.m-link:hover{color:var(--gold-soft)}

@media (max-width:1023px){ footer ul a{min-height:44px} }
footer ul a{display:inline-flex;align-items:center;min-height:24px}

/* -- in-page section nav -------------------------------------------------- */
.subnav{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(14,30,46,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--hair-soft);
}
.subnav ul{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{
  display:inline-block;white-space:nowrap;padding:1rem;font-size:1rem;font-weight:500;
  color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color 180ms var(--ease),border-color 180ms var(--ease);
}
.subnav a:hover{color:var(--ivory)}
.subnav a.is-current{color:var(--gold-soft);border-bottom-color:var(--gold)}

/* -- forms ---------------------------------------------------------------- */
.field-input{
  width:100%;padding:.875rem 1rem;min-height:54px;
  background:rgba(14,30,46,.72);
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:1.0625rem;color:var(--ivory);
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease),background-color 180ms var(--ease);
}
.field-input::placeholder{color:var(--dim)}
textarea.field-input{min-height:150px;resize:vertical;line-height:1.7}
.field-input:focus{outline:none;border-color:var(--gold);background:rgba(14,30,46,.9);
  box-shadow:0 0 0 3px rgba(228,159,56,.16)}
select.field-input option{background:#13243A;color:var(--ivory)}
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
.field-error{display:none;font-size:1rem;color:#FF9E8F;margin-top:.45rem}
.is-invalid .field-input{border-color:#FF9E8F}
.is-invalid .field-error{display:block}
.amount-btn{
  display:flex;align-items:center;justify-content:center;min-height:58px;padding:.5rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(14,30,46,.6);font-weight:600;font-size:1rem;color:var(--ivory);
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease),box-shadow 180ms var(--ease);
}
.amount-btn:hover{border-color:rgba(228,159,56,.5)}
.amount-btn.is-active{border-color:var(--gold);background:rgba(228,159,56,.14);
  box-shadow:inset 0 0 0 1px rgba(228,159,56,.4)}

/* -- cinematic overlays --------------------------------------------------- */
.scrim-hero::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,30,46,.72) 0px,rgba(14,30,46,.34) 140px,rgba(14,30,46,0) 250px),
    linear-gradient(97deg,rgba(14,30,46,.94) 0%,rgba(14,30,46,.72) 34%,rgba(14,30,46,.20) 68%,rgba(14,30,46,.05) 100%),
    linear-gradient(180deg,rgba(14,30,46,0) 40%,rgba(14,30,46,.86) 100%)}
@media (max-width:767px){
  .scrim-hero::after{background:linear-gradient(180deg,rgba(14,30,46,.86) 0%,rgba(14,30,46,.72) 45%,rgba(14,30,46,.94) 100%)}
}
.scrim-l::after{content:"";position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(14,30,46,.95) 0%,rgba(14,30,46,.78) 38%,rgba(14,30,46,.34) 72%,rgba(14,30,46,.14) 100%)}
@media (max-width:767px){
  .scrim-l::after{background:linear-gradient(180deg,rgba(14,30,46,.9),rgba(14,30,46,.72))}
}
/* For a masthead whose lead paragraph sits in a right-hand column over a
   photograph. scrim-l fades to .14 by the right edge, which is fine behind a
   single left-aligned column but leaves right-column text stranded on the
   bright part of the image. This keeps .74 at the far edge. */
.scrim-full::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,30,46,.55) 0px,rgba(14,30,46,.18) 150px,rgba(14,30,46,0) 260px),
    linear-gradient(97deg,rgba(14,30,46,.94) 0%,rgba(14,30,46,.86) 45%,rgba(14,30,46,.76) 100%)}
@media (max-width:767px){
  /* On a phone the text spans the full width, so the angled desktop scrim cannot
     be used: the copy would sit over the bright part of the photograph. A flat
     overlay is right, but .9/.8 hid the photograph almost completely, which
     wasted a real NEPSIS picture on the traffic that matters most here.
     .82/.74 still clears AA against a blown-out white pixel: body text #C6D2E0
     over white composited at .74 measures 5.5:1, against a 4.5:1 requirement. */
  .scrim-full::after{background:linear-gradient(180deg,rgba(14,30,46,.82),rgba(14,30,46,.74))}
}
.scrim-b::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,30,46,0) 35%,rgba(14,30,46,.9) 100%)}

.grad-navy{background-image:linear-gradient(168deg,#1B3A5E 0%,#14263A 48%,#0E1E2E 100%)}
.grad-navy-700{background-image:linear-gradient(150deg,#1B4C7E 0%,#1B3A5E 46%,#14263A 100%)}

/* slow gold light drifting across the hero, far from the text column */
.hero-glow::before{
  content:"";position:absolute;right:-10%;bottom:-20%;width:60vw;height:60vw;max-width:780px;max-height:780px;
  border-radius:999px;pointer-events:none;z-index:1;
  background:radial-gradient(circle, rgba(228,159,56,.20) 0%, rgba(228,159,56,.06) 45%, transparent 70%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,-8%,0) scale(1.12)}}

/* compass geometry from the seal, used once or twice, never as wallpaper */
.motif{position:relative;overflow:hidden}
.motif::before{
  content:"";position:absolute;top:50%;left:50%;width:min(720px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle, transparent 0 39.4%, rgba(228,159,56,.16) 39.4% 39.8%, transparent 39.8%),
    radial-gradient(circle, transparent 0 31.4%, rgba(228,159,56,.11) 31.4% 31.7%, transparent 31.7%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(228,159,56,.08) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg,  transparent calc(50% - .5px), rgba(228,159,56,.08) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  -webkit-mask-image:radial-gradient(circle, #000 55%, transparent 76%);
  mask-image:radial-gradient(circle, #000 55%, transparent 76%);
}

/* map: inverted to a dark basemap, hue rotated so the pin keeps its colour */
/* The map now has its own band above the footer rather than sitting under five
   columns of links, where nobody looking for the office would have found it. */
.map-band{background:var(--navy);border-top:1px solid var(--line);padding-block:4rem}
@media (min-width:1024px){ .map-band{padding-block:5rem} }
.map-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2rem;
}
.map-head h2{color:var(--ivory)}
.map-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair)}
.map-frame iframe{display:block;width:100%;height:340px;border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.72) brightness(.94) contrast(1.05)}
@media (min-width:768px){ .map-frame iframe{height:420px} }
.map-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px 6px rgba(14,30,46,.55), inset 0 0 0 1px rgba(239,192,121,.12)}

/* -- motion --------------------------------------------------------------- */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.js [data-reveal][data-d="1"].is-in{transition-delay:60ms}
.js [data-reveal][data-d="2"].is-in{transition-delay:110ms}
.js [data-reveal][data-d="3"].is-in{transition-delay:150ms}
.js [data-reveal][data-d="4"].is-in{transition-delay:180ms}
.js [data-reveal][data-d="5"].is-in{transition-delay:200ms}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.kenburns{animation:kenburns 26s var(--ease) infinite alternate}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .kenburns,.hero-glow::before{animation:none}
  /* the transitions above are already reduced to nothing, so without this the
     card would jump five pixels the instant the pointer touched it */
  .card:hover,.card:focus-within,.card-hover:hover,a.card:hover{transform:none}
  .card:hover,.card:focus-within{--glow:0}
}

/* NEPSIS utilities - generated by _src/tools/tw.ps1 from tailwind.config.js tokens.
   216 rules emitted for 358 scanned class tokens. Do not edit by hand. */
.absolute{position:absolute}
.aspect-\[4\/5\]{aspect-ratio:4/5}
.bg-base{background-color:#0E1E2E}
.bg-elevated{background-color:#1A3350}
.bg-gold{background-color:#E49F38}
.bg-navy{background-color:#14263A}
.block{display:block}
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-gold{border-color:#E49F38}
.border-l-2{border-left-width:2px;border-left-style:solid}
.border-line{border-color:#1D3E63}
.border-t{border-top-width:1px;border-top-style:solid}
.border-white\/15{border-color:rgba(255,255,255,0.15)}
.cursor-pointer{cursor:pointer}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.font-light{font-weight:300}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.gap-1{gap:0.25rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-24{height:6rem}
.h-3{height:0.75rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-full{height:100%}
.hidden{display:none}
.hover\:text-gold-soft:hover{color:#EFC079}
.inline-flex{display:inline-flex}
.inset-0{inset:0}
.isolate{isolation:isolate}
.italic{font-style:italic}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.65}
.leading-snug{line-height:1.3}
.leading-tight{line-height:1.15}
.left-\[-6px\]{left:-6px}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-md{max-width:28rem}
.max-w-xl{max-width:36rem}
.max-w-xs{max-width:20rem}
.mb-1{margin-bottom:0.25rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-14{margin-bottom:3.5rem}
.mb-16{margin-bottom:4rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-w-\[140px\]{min-width:140px}
.min-w-\[220px\]{min-width:220px}
.ml-4{margin-left:1rem}
.ml-auto{margin-left:auto}
.mt-1{margin-top:0.25rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-14{margin-top:3.5rem}
.mt-16{margin-top:4rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-7{margin-top:1.75rem}
.mt-8{margin-top:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.opacity-60{opacity:0.6}
.order-1{order:1}
.order-2{order:2}
.overflow-hidden{overflow:hidden}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-20{padding-bottom:5rem}
.pb-4{padding-bottom:1rem}
.pb-8{padding-bottom:2rem}
.pl-6{padding-left:1.5rem}
.pl-8{padding-left:2rem}
.pt-14{padding-top:3.5rem}
.pt-16{padding-top:4rem}
.pt-20{padding-top:5rem}
.pt-6{padding-top:1.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.relative{position:relative}
.rounded-2xl{border-radius:1.25rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.75rem}
.rounded-none{border-radius:0}
.shadow-lg{box-shadow:0 24px 48px -16px rgba(0,0,0,.65)}
.shadow-md{box-shadow:0 10px 24px -8px rgba(0,0,0,.55)}
.shrink-0{flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-2xl{font-size:1.75rem;line-height:1.3}
.text-3xl{font-size:2.125rem;line-height:1.24}
.text-4xl{font-size:2.5rem;line-height:1.18}
.text-base{font-size:1.0625rem;line-height:1.75}
.text-body{color:#C6D2E0}
.text-center{text-align:center}
.text-dim{color:#8C9BAD}
.text-gold-soft{color:#EFC079}
.text-ivory{color:#F3EDE2}
.text-left{text-align:left}
.text-lg{font-size:1.1875rem;line-height:1.7}
.text-sm{font-size:1rem;line-height:1.6}
.text-white{color:#FFFFFF}
.text-white\/55{color:rgba(255,255,255,0.55)}
.text-white\/60{color:rgba(255,255,255,0.6)}
.text-white\/70{color:rgba(255,255,255,0.7)}
.text-white\/75{color:rgba(255,255,255,0.75)}
.text-white\/80{color:rgba(255,255,255,0.8)}
.text-white\/85{color:rgba(255,255,255,0.85)}
.text-xl{font-size:1.375rem;line-height:1.5}
.text-xs{font-size:0.875rem;line-height:1.45}
.top-2{top:0.5rem}
.tracking-tight{letter-spacing:-0.02em}
.tracking-wide{letter-spacing:0.03em}
.tracking-widest{letter-spacing:0.16em}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.22,.61,.36,1);transition-duration:200ms}
.uppercase{text-transform:uppercase}
.w-\[150px\]{width:150px}
.w-12{width:3rem}
.w-24{width:6rem}
.w-3{width:0.75rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-full{width:100%}
.z-0{z-index:0}
.z-10{z-index:10}
@media (min-width:640px){
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm\:w-auto{width:auto}
}
@media (min-width:768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.md\:mb-16{margin-bottom:4rem}
.md\:p-10{padding:2.5rem}
.md\:p-12{padding:3rem}
.md\:pb-24{padding-bottom:6rem}
.md\:pt-24{padding-top:6rem}
.md\:py-12{padding-top:3rem;padding-bottom:3rem}
.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.md\:py-24{padding-top:6rem;padding-bottom:6rem}
.md\:text-2xl{font-size:1.75rem;line-height:1.3}
.md\:text-3xl{font-size:2.125rem;line-height:1.24}
.md\:text-4xl{font-size:2.5rem;line-height:1.18}
.md\:text-5xl{font-size:3rem;line-height:1.12}
.md\:text-6xl{font-size:3.5rem;line-height:1.08}
.md\:text-xl{font-size:1.375rem;line-height:1.5}
}
@media (min-width:1024px){
.lg\:flex{display:flex}
.lg\:flex-1{flex:1 1 0%}
.lg\:gap-14{gap:3.5rem}
.lg\:gap-16{gap:4rem}
.lg\:gap-20{gap:5rem}
.lg\:gap-8{gap:2rem}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:hidden{display:none}
.lg\:inline-flex{display:inline-flex}
.lg\:min-w-\[240px\]{min-width:240px}
.lg\:min-w-\[340px\]{min-width:340px}
.lg\:min-w-\[360px\]{min-width:360px}
.lg\:min-w-\[380px\]{min-width:380px}
.lg\:min-w-\[420px\]{min-width:420px}
.lg\:order-1{order:1}
.lg\:order-2{order:2}
.lg\:pt-24{padding-top:6rem}
.lg\:py-16{padding-top:4rem;padding-bottom:4rem}
.lg\:py-28{padding-top:7rem;padding-bottom:7rem}
.lg\:text-4xl{font-size:2.5rem;line-height:1.18}
.lg\:text-5xl{font-size:3rem;line-height:1.12}
.lg\:text-6xl{font-size:3.5rem;line-height:1.08}
.lg\:text-7xl{font-size:4rem;line-height:1.04}
.lg\:w-\[200px\]{width:200px}
.lg\:w-\[34\%\]{width:34%}
.lg\:w-\[38\%\]{width:38%}
.lg\:w-\[380px\]{width:380px}
.lg\:w-\[40\%\]{width:40%}
.lg\:w-\[400px\]{width:400px}
.lg\:w-\[42\%\]{width:42%}
.lg\:w-\[420px\]{width:420px}
.lg\:w-\[440px\]{width:440px}
.lg\:w-\[46\%\]{width:46%}
}