/* ==========================================================================
   1. Fonts — self-hosted, subset.
   ========================================================================== */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('fonts/source-serif-latin.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root{
  --navy-900:#0a1a30;
  --navy-800:#10233f;
  --navy-600:#1e4478;
  --saffron:#ff9933;
  --saffron-ink:#a85806;
  --green:#138808;
  --ink:#14181f;
  --ink-2:#48525f;
  --line:#e2e6ec;
  --line-2:#cdd5e0;
  --bg:#ffffff;
  --bg-tint:#f6f8fb;
  --link:#0b4a8f;
  --link-hover:#062f5c;
  --focus:#b5390d;
  --focus-dark:#ffb870;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --maxw:1000px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --radius:10px;
  --shadow:0 1px 2px rgba(10,26,48,.04),0 12px 28px -18px rgba(10,26,48,.28);
  --shadow-lift:0 2px 4px rgba(10,26,48,.05),0 22px 44px -22px rgba(10,26,48,.38);
  --ease:cubic-bezier(.2,.7,.3,1);
}

html[data-textsize="s"]{font-size:93.75%}
html[data-textsize="m"]{font-size:100%}
html[data-textsize="l"]{font-size:112.5%}

html[data-contrast="high"]{
  --ink:#000; --ink-2:#000; --bg:#fff; --bg-tint:#fff;
  --line:#000; --line-2:#000; --link:#0000cc; --link-hover:#000080;
  --navy-900:#000; --navy-800:#000; --navy-600:#000;
  --saffron-ink:#000; --shadow:none; --shadow-lift:none;
}
html[data-contrast="high"] .arealist,
html[data-contrast="high"] .step,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .note{border-width:2px}
html[data-contrast="high"] .hero{background:#000}
html[data-contrast="high"] .hero-grid{display:none}
html[data-contrast="high"] .note{background:#fff}
html[data-contrast="high"] .utility,
html[data-contrast="high"] .foot,
html[data-contrast="high"] .legal,
html[data-contrast="high"] .hero .sub,
html[data-contrast="high"] .hero .marker,
html[data-contrast="high"] .a11y .lbl{color:#fff}
html[data-contrast="high"] .btn--ghost,
html[data-contrast="high"] .a11y button{border-color:#fff;color:#fff}
html[data-contrast="high"] .a11y button[aria-pressed="true"]{background:#fff;color:#000}
html[data-contrast="high"] .foot a{border-bottom-color:#fff}

/* ==========================================================================
   3. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);color:var(--navy-900);margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.07;letter-spacing:-.022em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.17;letter-spacing:-.017em}
h3{font-size:1.12rem;line-height:1.32;letter-spacing:-.008em}
p{margin:0 0 .95em}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.foot :focus-visible{outline-color:var(--focus-dark)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.marker{
  display:flex;align-items:center;gap:.7rem;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 1rem;
}
.marker .n{font-variant-numeric:tabular-nums;color:var(--saffron-ink);font-weight:700}
.marker .n::after{content:'';display:inline-block;width:1.6rem;height:1px;background:var(--line-2);margin:0 0 .28em .7rem;vertical-align:middle}
.hero .marker{color:#a9bcd6}
.hero .marker .n{color:var(--saffron)}
.hero .marker .n::after{background:rgba(255,255,255,.28)}

.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--ink-2);max-width:56ch}
.section{padding:clamp(2.6rem,5.2vw,4.25rem) 0}
.section--tint{background:var(--bg-tint);border-top:1px solid var(--line)}

/* ==========================================================================
   4. Skip link + tricolour
   ========================================================================== */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy-900);
  padding:.8rem 1.3rem;font-weight:600;border:3px solid var(--focus);border-radius:0 0 6px 0;
}
.skip:focus{left:0;top:0}
.tricolour{height:3px;display:flex}
.tricolour span{flex:1}
.tricolour :nth-child(1){background:var(--saffron)}
.tricolour :nth-child(2){background:#fff}
.tricolour :nth-child(3){background:var(--green)}

/* ==========================================================================
   5. Utility bar
   ========================================================================== */
.utility{background:var(--navy-900);color:#c6d3e6;font-size:.8125rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:space-between;min-height:40px;padding-top:.3rem;padding-bottom:.3rem}
.utility p{margin:0}
.a11y{display:none;align-items:center;gap:.4rem}
html.js .a11y{display:flex}
.a11y .lbl{color:#8fa5c2;margin-right:.15rem}
.a11y button{
  font:inherit;font-weight:600;color:#dbe5f2;background:transparent;
  border:1px solid rgba(255,255,255,.22);border-radius:4px;
  min-width:34px;min-height:30px;padding:0 .5rem;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.a11y button:hover{background:rgba(255,255,255,.1);color:#fff}
.a11y button[aria-pressed="true"]{background:#fff;color:var(--navy-900);border-color:#fff}
.a11y .s1{font-size:.78em}.a11y .s2{font-size:.92em}.a11y .s3{font-size:1.06em}

/* ==========================================================================
   6. Header
   ========================================================================== */
.masthead{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease);
}
html.scrolled .masthead{box-shadow:0 10px 30px -22px rgba(10,26,48,.5)}
.masthead .wrap{display:flex;align-items:center;gap:1rem;min-height:74px;padding-top:.7rem;padding-bottom:.7rem;transition:min-height .3s var(--ease)}
html.scrolled .masthead .wrap{min-height:62px}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;min-width:0;margin-right:auto}
.brand img{height:50px;width:auto;flex:0 0 auto;transition:height .3s var(--ease)}
html.scrolled .brand img{height:40px}
.brand .en{
  display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;
  color:var(--navy-900);line-height:1.25;letter-spacing:-.012em;
}
.brand:hover .en{color:var(--navy-600)}
.masthead .btn{padding:.6rem 1.05rem;min-height:44px;font-size:.9rem;white-space:nowrap}

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#eaf0f8;
  background:
    radial-gradient(1000px 560px at 80% -14%,#1e4478 0%,rgba(30,68,120,0) 62%),
    linear-gradient(158deg,#12294a 0%,#0a1a30 58%,#081524 100%);
  padding:clamp(2.75rem,6vw,4.75rem) 0 clamp(2.4rem,5vw,3.75rem);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(120% 95% at 82% 8%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 95% at 82% 8%,#000 0%,transparent 72%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:17ch;margin-bottom:.4em}
.hero h1 em{font-style:normal;color:var(--saffron)}
.hero .sub{font-size:clamp(1rem,1.35vw,1.14rem);color:#c3d2e6;max-width:52ch;line-height:1.58;margin-bottom:1.5rem}

/* ==========================================================================
   8. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.97rem;font-weight:600;text-decoration:none;
  padding:.82rem 1.5rem;min-height:48px;border-radius:7px;border:2px solid transparent;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn svg{transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--saffron);color:#25190a;border-color:var(--saffron)}
.btn--primary:hover{background:#ffab54;border-color:#ffab54;color:#25190a;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(255,153,51,.9)}
.btn--solid{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn--solid:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--lg{font-size:1.05rem;padding:1rem 1.9rem;min-height:56px}

/* ==========================================================================
   9. Roster — names only, no photographs or biographies
   ========================================================================== */
.roster{
  margin-top:1.75rem;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.65rem;box-shadow:var(--shadow);
}
.roster .grp + .grp{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--line)}
.roster .lbl{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--saffron-ink);margin:0 0 .55rem;
}
.roster .nm{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  color:var(--navy-900);margin:0;line-height:1.3;
}
.roster ul{
  list-style:none;margin:0;padding:0;display:grid;gap:.5rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.roster li{
  font-family:var(--serif);font-size:1.1rem;font-weight:600;
  color:var(--navy-900);margin:0;line-height:1.35;
}

/* ==========================================================================
   10. Areas of work
   ========================================================================== */
.arealist{
  margin:1.9rem 0 0;padding:1.5rem 1.65rem 1.5rem 1.5rem;list-style:none;counter-reset:area;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;gap:.85rem 2rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.arealist li{
  position:relative;padding-left:2.3rem;margin:0;
  font-family:var(--serif);font-size:1.06rem;font-weight:600;
  color:var(--navy-900);line-height:1.35;
}
.arealist li::before{
  counter-increment:area;content:counter(area,decimal-leading-zero);
  position:absolute;left:0;top:.12em;
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  color:var(--saffron-ink);font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   10. Feedback template
   ========================================================================== */
.steps{list-style:none;margin:1.9rem 0 0;padding:0;counter-reset:step}
.step{
  position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem 1.5rem 1.4rem 4.2rem;margin-bottom:1rem;
  box-shadow:var(--shadow);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:1.3rem;top:1.3rem;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--navy-800);color:#fff;
  font-size:.9rem;font-weight:700;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;
}
.step h3{margin-bottom:.45rem}
.step p{margin:0;color:var(--ink-2);font-size:.95rem}
.opts{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 0;padding:0;list-style:none}
.opts li{
  background:var(--bg-tint);border:1px solid var(--line-2);border-radius:100px;
  padding:.3rem .8rem;font-size:.87rem;font-weight:500;color:var(--navy-900);margin:0;
}

.panel{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;margin-top:1.75rem;text-align:center;box-shadow:var(--shadow);
}
.panel p{margin:0 0 1rem}
.panel .after{margin:1rem 0 0;font-size:.9rem;color:var(--ink-2)}

.note{
  background:#fffaf1;border:1px solid #f0dcbb;border-radius:var(--radius);
  padding:1.2rem 1.35rem;margin-top:1.75rem;
}
.note h3{font-size:1rem;margin-bottom:.45rem}
.note p{font-size:.93rem;color:var(--ink-2)}
.note p:last-child{margin-bottom:0}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.foot{background:var(--navy-900);color:#b9c8dd;font-size:.92rem;padding:clamp(2.2rem,4vw,3rem) 0 1.8rem}
.foot-brand{font-family:var(--serif);font-size:1.1rem;color:#fff;font-weight:600;line-height:1.3;margin-bottom:.6rem}
.foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .18s}
.foot a:hover{border-bottom-color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:1.75rem;padding-top:1.25rem;color:#93a7c2;font-size:.84rem}
.legal p{margin:0 0 .45rem}
.legal p:last-child{margin-bottom:0}

/* ==========================================================================
   12. Scroll reveal
   ========================================================================== */
html.js .reveal{opacity:0;transform:translateY(16px)}
html.js .reveal.in-view{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .reveal.d1.in-view{transition-delay:.07s}
html.js .reveal.d2.in-view{transition-delay:.14s}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width:640px){
  body{font-size:1rem}
  .brand .en{font-size:.9rem}
  .brand img{height:42px}
  html.scrolled .brand img{height:36px}
  .masthead .btn{padding:.55rem .85rem;font-size:.85rem}
  .step{padding:1.2rem 1.2rem 1.2rem 3.6rem}
  .step::before{left:1rem;top:1.15rem;width:1.8rem;height:1.8rem;font-size:.85rem}
  .btn--lg{width:100%;justify-content:center}
}

/* ==========================================================================
   14. User preferences
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html.js .reveal{opacity:1;transform:none}
  .area:hover,.btn:hover{transform:none}
}
@media (forced-colors:active){
  .arealist,.step,.panel,.note{border:1px solid CanvasText}
  .btn{border:2px solid ButtonText}
  .hero-grid{display:none}
}

/* ==========================================================================
   15. Print
   ========================================================================== */
@media print{
  .utility,.tricolour,.skip,.hero-grid,.masthead .btn{display:none}
  .masthead{position:static;box-shadow:none;border-bottom:2px solid #000}
  body{font-size:11pt;color:#000;background:#fff}
  .hero,.foot{background:#fff;color:#000}
  .hero h1,.hero .sub,.foot-brand,.foot a{color:#000}
  .legal{color:#333}
  html.js .reveal{opacity:1!important;transform:none!important}
  .section{padding:1.25rem 0}
  /* Keep individual blocks whole rather than whole sections — a section taller
     than a page makes the browser ignore the rule and leaves a big gap instead. */
  .roster,.arealist li,.step,.panel,.note{page-break-inside:avoid}
  h2,.marker,.lede{page-break-after:avoid}
  .marker{margin-bottom:.5rem}
  .arealist,.steps{margin-top:1rem}
  /* The Submit href is a ~1000-character encoded mailto template. Never expand
     it after the link — print the plain address instead (.print-only, below). */
  .panel .btn{display:none}
  .print-only{display:block!important}
}
.print-only{display:none}

/* ==========================================================================
   16. Feedback form  (form-version only)
   ========================================================================== */
.fbform{margin-top:1.9rem}
.fbform .q{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  padding:1.35rem 1.45rem;margin:0 0 1rem;box-shadow:var(--shadow);
}
.fbform .q.has-err{border-color:#b5390d;border-width:2px}
/* A <legend> is rendered straddling the fieldset's top border, which pushed the
   question headings half outside the card. Floating it takes it out of that
   special layout and makes it behave as an ordinary block inside the box; the
   ::after on .q clears the float. */
.fbform legend{
  float:left;width:100%;padding:0;margin:0 0 .35rem;
  font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--navy-900);
  display:flex;align-items:center;gap:.6rem;
}
.fbform .q::after{content:'';display:table;clear:both}
/* Everything after the legend must clear it. A flex container establishes its
   own formatting context, so without this it sits BESIDE the floated legend
   instead of below it — which shoved question 1's options off the card. */
.fbform .q > :not(legend){clear:both}
/* A <label> inside a legend picked up the small grey field-label styling below.
   `.fbform label[for]` is (0,2,1); this needs the attribute selector too to
   reach (0,2,2) and win, or questions 3 and 5 render smaller than 1 and 2. */
.fbform legend label,
.fbform legend label[for]{
  display:inline;font:inherit;color:inherit;margin:0;cursor:pointer;
}
.fbform .qn{
  font-family:var(--sans);font-size:.8rem;font-weight:700;color:#fff;
  background:var(--navy-800);border-radius:50%;
  width:1.65rem;height:1.65rem;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
}
.fbform .opt{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:100px;padding:.1rem .5rem;
}
.fbform .hint{font-size:.9rem;color:var(--ink-2);margin:0 0 .85rem}
.fbform .err{
  font-size:.9rem;font-weight:600;color:#a3300a;margin:0 0 .7rem;
  padding-left:1.4rem;position:relative;
}
.fbform .err::before{content:'!';position:absolute;left:0;top:0;
  width:1rem;height:1rem;border-radius:50%;background:#a3300a;color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}

.choices{display:flex;flex-wrap:wrap;gap:.55rem}
.choices--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.5rem 1.25rem}
.choice{
  display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  padding:.5rem .8rem;border:1px solid var(--line-2);border-radius:7px;
  background:var(--bg);font-size:.96rem;line-height:1.4;min-height:44px;
  transition:border-color .18s,background .18s;
}
.choices--grid .choice{border-color:transparent;padding:.45rem .5rem}
.choice:hover{border-color:var(--navy-600);background:var(--bg-tint)}
.choice input{margin:.15rem 0 0;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--navy-800)}
.choice input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.choice .idx{
  font-size:.72rem;font-weight:700;color:var(--saffron-ink);
  font-variant-numeric:tabular-nums;margin-right:.15rem;
}
.choice.consent{align-items:flex-start;border-color:var(--line-2);margin-top:.9rem;font-size:.92rem}

.fbform textarea,.fbform input[type=text],.fbform input[type=email]{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:7px;padding:.7rem .8rem;
  transition:border-color .18s,box-shadow .18s;
}
.fbform textarea{min-height:9.5rem;resize:vertical;line-height:1.55}
.fbform textarea:focus,.fbform input:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 3px rgba(30,68,120,.16);
}
.fbform textarea:focus-visible,.fbform input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fbform label[for]{display:block;font-size:.88rem;font-weight:600;color:var(--ink-2);margin-bottom:.3rem}
.pair{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.challenge{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.challenge .sum{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--navy-900);
  background:var(--bg-tint);border:1px solid var(--line-2);border-radius:7px;padding:.55rem .95rem;
}
.challenge input{width:5.5rem!important;text-align:center}

.formnote{font-size:.86rem;color:var(--ink-2);margin:.9rem 0 0}

/* The honeypot must be unreachable for humans but present in the DOM. Using
   display:none would let a smarter bot skip it, so it is moved off-screen. */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
    width:1px!important;height:1px!important;overflow:hidden!important}

.alert{border-radius:var(--radius);padding:1.2rem 1.35rem;margin:1.5rem 0 0;border:1px solid}
.alert h3{margin-bottom:.4rem}
.alert p:last-child{margin-bottom:0}
.alert--ok{background:#f1f9f2;border-color:#b6ddbc}
.alert--err{background:#fdf3ef;border-color:#e6bfae;color:#7c2408}
.alert--err p{margin:0;font-weight:600}

html[data-contrast="high"] .fbform .q,
html[data-contrast="high"] .choice,
html[data-contrast="high"] .alert{border-color:#000;border-width:2px}
html[data-contrast="high"] .alert--ok,
html[data-contrast="high"] .alert--err{background:#fff;color:#000}

@media (max-width:640px){
  .fbform .q{padding:1.1rem 1rem}
  .choices--grid{grid-template-columns:1fr}
  .fbform .btn--lg{width:100%;justify-content:center}
}