/* Blaecwood NG shared page system.
 *
 * Lifted verbatim from the original /payments-partner-ready page so every
 * standalone page carries the same palette, rhythm and type scale. Additions
 * below that line are the site header nav, the long-form prose block used by
 * the legal pages, and the corporate footer. No new visual language. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Palette and roles per the canonical Blaecwood brand sheet. */
  --white:#FFFFFF;   /* primary canvas */
  --bg:#F7F7F6;      /* soft background: alternate sections/cards */
  --ink:#000000;     /* authority: logo, nav, headlines, footer */
  --body:#3A322A;    /* supporting dark: body headings, dark panels */
  --muted:#6B6055;   /* secondary: descriptions, metadata, borders */
  --accent:#5A1F2A;  /* oxblood: CTAs, regulatory highlights, NDPA/CBN */
  --dark:#3A322A;
  --dim:#B3A99C;      /* hairline borders, as on the homepage */
  --rule:rgba(58,50,42,0.14);
  --rule-inv:rgba(255,255,255,0.20);
  --sans:'Inter',system-ui,sans-serif;
  --section-y:clamp(56px,7vh,84px);
  --gutter:32px;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--sans);font-weight:400;font-size:15px;
  -webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.site-footer :focus-visible,.band :focus-visible{outline-color:#fff}

.wrap{max-width:1220px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y);background:var(--white);border-top:1px solid var(--rule)}
.section.tinted{background:var(--bg);border-top:none}
.label{
  font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.label::before{content:'';width:16px;height:1px;background:var(--accent);display:block;flex-shrink:0}

.btn{
  display:inline-block;background:var(--ink);color:var(--white);
  font-size:13px;font-weight:600;letter-spacing:.05em;
  padding:11px 26px;border:none;cursor:pointer;font-family:var(--sans);
  transition:background .2s;
}
.btn:hover{background:var(--body);color:var(--white)}
.btn-ghost{
  display:inline-block;background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;letter-spacing:.05em;
  padding:11px 26px;border:1px solid var(--dim);cursor:pointer;font-family:var(--sans);
  transition:border-color .2s,color .2s;
}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:200;
  padding-top:20px;padding-bottom:20px;
  background:rgba(247,247,246,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{font-size:14px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.header-link{
  font-size:13px;font-weight:600;color:var(--body);white-space:nowrap;
  background:none;border:none;cursor:pointer;font-family:var(--sans);
  transition:color .2s;
}
.header-link:hover{color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.site-nav a{font-size:13px;font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav .header-cta{
  background:var(--ink);color:var(--white);padding:9px 20px;
  font-size:13px;font-weight:600;letter-spacing:.05em;
}
.site-nav .header-cta:hover{background:var(--body);color:var(--white)}

/* HERO */
/* White hero over the soft-grey canvas, so the fold reads the same way the
   homepage hero does rather than merging into the tinted section below. */
#hero{padding-top:clamp(28px,4vh,48px);padding-bottom:var(--section-y);
  background:var(--white);border-bottom:1px solid var(--rule)}
#hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
#hero.hero-single .wrap{display:block}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--body)}
.hero-h1{
  margin-top:16px;font-size:clamp(36px,4.6vw,64px);line-height:1.06;
  font-weight:700;letter-spacing:-.025em;color:var(--ink);text-wrap:pretty;
}
.hero-deck{margin-top:18px;font-size:16px;line-height:1.55;color:var(--body);max-width:48ch;text-wrap:pretty}
.hero-cta{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-coda{font-size:14px;color:var(--muted)}

/* VIDEO */
.video-media{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.video-media video{display:block;width:100%;height:100%;object-fit:cover}
.video-media video[hidden]{display:none}
.video-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:20px;text-align:center;font-size:14px;color:rgba(255,255,255,.6);
}
/* display:flex above outranks the user-agent rule for the hidden attribute, so
   without this the "coming soon" panel keeps painting over a video that loaded
   successfully. Same reason .video-media video[hidden] is declared. */
.video-fallback[hidden]{display:none}
.video-caption{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted)}

/* THREE-COLUMN CONTENT BLOCK */
.trio{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.duo{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,48px)}
.lede{
  font-size:clamp(24px,2.6vw,34px);line-height:1.14;font-weight:700;
  letter-spacing:-.022em;color:var(--ink);text-wrap:pretty;
}
.trio p.body,.duo p.body{margin-top:14px;font-size:14px;line-height:1.65;color:var(--body);text-wrap:pretty}

/* COMPACT LISTS */
.list li{
  font-size:14px;line-height:1.5;color:var(--body);
  padding:9px 0;border-bottom:1px solid var(--rule);text-wrap:pretty;
}
.list li:last-child{border-bottom:none}
.list li strong{font-weight:500;color:var(--ink)}
/* Oxblood is sanctioned for regulatory highlights on .ng, not just CTAs. */
.reg{color:var(--accent);font-weight:600}

/* NUMBERED SERVICE ITEMS */
.steps-list{display:grid;grid-template-columns:1fr;gap:0}
.steps-list li{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
.steps-list li:last-child{border-bottom:1px solid var(--rule)}
.steps-list .sn{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--accent);min-width:24px;padding-top:3px}
.steps-list .st{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.steps-list .sb{font-size:14px;font-weight:400;color:var(--body);line-height:1.6;text-wrap:pretty}

/* DARK BAND: deliverables + delivery steps in one block */
.band{background:var(--ink);color:var(--white);border-top:none}
.band .label{color:#CFC6BA}
.band .label::before{background:#CFC6BA}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,34px)}
.band-grid li{
  font-size:14px;line-height:1.5;color:var(--white);
  border-top:1px solid var(--rule-inv);padding-top:12px;text-wrap:pretty;
}
.idx{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,30px);
  margin-top:clamp(26px,3.5vh,44px);padding-top:clamp(22px,3vh,34px);
  border-top:1px solid var(--rule-inv);
}
.steps li{font-size:15px;font-weight:600;line-height:1.3;color:var(--white);letter-spacing:-.008em}
.step-n{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.62)}

/* CALLOUT: framed aside used for deadline and scope notes */
.callout{border:1px solid var(--rule);background:var(--bg);padding:24px 26px}
.callout h3{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:10px}
.callout p{font-size:14px;line-height:1.65;color:var(--body);text-wrap:pretty}
.callout p+p{margin-top:10px}

/* CLOSING BLOCK */
.close-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(24px,3vw,48px);align-items:start}
.cta-h{
  font-size:clamp(24px,2.9vw,40px);line-height:1.08;font-weight:700;
  letter-spacing:-.024em;color:var(--ink);text-wrap:pretty;
}
/* Small warm grey. The standing assurance and self-assessment notes. */
.note p{font-size:12.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.note p+p{margin-top:8px}
.microcopy{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:62ch;text-wrap:pretty}

/* LONG-FORM PROSE: privacy, cookie and terms notices */
.prose{max-width:74ch}
.prose h2{
  font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.018em;
  color:var(--ink);margin-top:40px;margin-bottom:12px;text-wrap:pretty;
}
.prose h3{font-size:15px;font-weight:600;color:var(--ink);margin-top:24px;margin-bottom:8px}
.prose p{font-size:14.5px;line-height:1.7;color:var(--body);text-wrap:pretty}
.prose p+p{margin-top:12px}
.prose ul{margin-top:12px}
.prose ul li{
  position:relative;padding-left:18px;margin-top:8px;
  font-size:14.5px;line-height:1.65;color:var(--body);text-wrap:pretty;
}
.prose ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--accent)}
.prose a{color:var(--accent);font-weight:600;text-decoration:underline}
.prose strong{font-weight:600;color:var(--ink)}
.prose .meta{font-size:12.5px;color:var(--muted);margin-top:8px}
.tbl{width:100%;border-collapse:collapse;margin-top:14px;display:block;overflow-x:auto}
.tbl th,.tbl td{
  border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top;
  font-size:13.5px;line-height:1.6;color:var(--body);
}
.tbl th{background:var(--bg);font-weight:600;color:var(--ink)}
/* Unresolved facts are marked, never guessed. */
.tbc{color:var(--accent);font-weight:600;white-space:nowrap}

/* FOOTER */
.site-footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding-top:40px;padding-bottom:40px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:flex-start;justify-content:space-between}
.f-left{display:flex;flex-direction:column;gap:8px}
.f-mark{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.f-copy{font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}
.f-corp{font-size:11.5px;line-height:1.8;color:rgba(255,255,255,.66);max-width:54ch}
.f-corp span{display:block}
.f-corp a{color:inherit;text-decoration:underline}
.f-corp a:hover{color:#fff}
.f-nav{display:flex;flex-wrap:wrap;gap:10px 22px;max-width:460px}
.f-nav a{font-size:12px;font-weight:600;color:rgba(255,255,255,.62);transition:color .2s}
.f-nav a:hover{color:#fff}

.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

@media(max-width:1000px){
  .trio,.close-grid{grid-template-columns:1fr 1fr}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  :root{--gutter:22px;--section-y:clamp(34px,4vh,52px)}
  #hero .wrap,.trio,.duo,.close-grid{grid-template-columns:1fr}
  .band-grid,.steps{grid-template-columns:1fr 1fr}
  .site-nav{gap:16px}
  .site-header{padding-top:16px;padding-bottom:16px}
}