/* =====================================================================
   UNIVARO — platform identity page (operator host only).

   Deliberately standalone: it does NOT extend site.css. That stylesheet is
   driven by per-tenant colour tokens the layout injects at runtime, and
   Univaro's own page must look identical no matter which tenant's brand
   happens to be resolved. Nothing here leaks into a tenant site, and a
   tenant theme change can never restyle the platform's own front door.
   ===================================================================== */

@font-face{ font-family:'Satoshi'; src:url('/fonts/satoshi/satoshi-400.woff2') format('woff2');
            font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('/fonts/satoshi/satoshi-500.woff2') format('woff2');
            font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('/fonts/satoshi/satoshi-700.woff2') format('woff2');
            font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('/fonts/satoshi/satoshi-900.woff2') format('woff2');
            font-weight:900; font-style:normal; font-display:swap; }

:root{
  /* Brand palette, exactly as issued on the identity sheet. */
  --u-navy:      #0B1F44;
  --u-blue:      #3B82F6;
  --u-purple:    #8B5CF6;
  --u-green:     #06D6A0;

  /* --u-green is ~1.9:1 on white, so it can never carry text. It exists as a fill, a rule, or an icon,
     and anything written on top of it is --u-navy. The same goes for --u-blue on white at small sizes:
     --u-blue-ink is the darkened version used for link text. */
  --u-blue-ink:  #1D4ED8;

  --u-ink:       #0B1F44;
  --u-ink-soft:  #55637D;
  --u-ink-faint: #8A94AB;
  --u-bg:        #FFFFFF;
  --u-surface:   #F6F8FC;
  --u-surface-2: #EEF2F9;
  --u-border:    #DFE5F0;
  --u-on-navy:   #E8EDF7;

  --u-radius:    16px;
  --u-radius-lg: 26px;
  --u-pill:      999px;
  --u-shadow:    0 8px 28px rgba(11,31,68,.08), 0 2px 8px rgba(11,31,68,.05);
  --u-shadow-lg: 0 26px 70px rgba(11,31,68,.20);
  --u-maxw:      1180px;
  --u-ease:      cubic-bezier(.22,.61,.36,1);

  /* The pennant gradient off the mark. Used as a hairline or a small accent — never as a background
     wash, which is what turns a considered brand into a 2014 startup template. */
  --u-gradient:  linear-gradient(120deg, var(--u-purple), var(--u-blue) 52%, var(--u-green));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* scroll-padding keeps an anchored section clear of the sticky header when jumped to from the nav. */
html{ scroll-padding-top:86px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body.u-body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight:400; font-size:17px; line-height:1.65;
  color:var(--u-ink); background:var(--u-bg);
  -webkit-font-smoothing:antialiased;
}
.u-body img,.u-body svg{ max-width:100%; }
.u-container{ width:100%; max-width:var(--u-maxw); margin-inline:auto; padding-inline:24px; }
.u-main{ flex:1 0 auto; }

.u-skip{ position:absolute; left:-9999px; top:0; background:var(--u-navy); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--u-radius) 0; z-index:100; }
.u-skip:focus{ left:0; }
.u-body :focus-visible{ outline:3px solid var(--u-blue); outline-offset:3px; border-radius:6px; }

/* ---------- Type scale ---------- */
.u-h1{ font-weight:900; font-size:clamp(2.3rem,5.2vw,4rem); line-height:1.06;
  letter-spacing:-.028em; margin:0 0 20px; }
.u-h2{ font-weight:700; font-size:clamp(1.75rem,3.2vw,2.6rem); line-height:1.15;
  letter-spacing:-.022em; margin:0 0 14px; }
.u-h3{ font-weight:700; font-size:1.1rem; line-height:1.35; letter-spacing:-.01em; margin:0 0 8px; }
.u-lede{ font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.6; color:var(--u-ink-soft);
  margin:0 0 28px; max-width:62ch; }
.u-eyebrow{ display:inline-block; font-weight:700; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--u-ink-faint); margin:0 0 14px; }
.u-muted{ color:var(--u-ink-soft); }

/* ---------- Brand lockup ----------
   The symbol stands in for the letter U, with "NIVARO" beside it. Every size below is in em against the
   lockup's own font-size, so the whole thing scales as one unit and the header and footer cannot drift.

   Proportions are read off the supplied univaro-symbol-plus-nivaro.svg, where the symbol is drawn at
   scale 0.55 against text at font-size 150: the visible artwork ends up 2.03x the cap height, and its
   centre sits on the cap centre. Two adjustments that are easy to miss:

     * The symbol's 512 canvas carries padding — the artwork occupies y 60..462, so only 78.5% of the box
       height is ink. Hence 1.86em of box for 1.46em of visible mark.
     * That padding also shows up horizontally (~11.7% on the right), which is most of the gap already.
       The flex gap only supplies the remainder, which is why it looks too small written down. */
.u-lockup{ display:inline-flex; align-items:center; gap:.14em; text-decoration:none; color:inherit;
  font-size:1.45rem; }
.u-lockup__mark{ height:1.86em; width:auto; flex:none; }
/* Satoshi, per the brand sheet's typography. Tracking is the supplied wordmark's: font-size 150 with
   letter-spacing 8 is 0.053em, where this once guessed 0.16em. line-height:1 matters — it puts the cap
   centre on the box centre, which is what lets align-items:center land the mark correctly. */
.u-lockup__name{ font-weight:700; font-size:1em; letter-spacing:.053em; line-height:1;
  text-transform:uppercase; }
.u-lockup--onNavy .u-lockup__name{ color:#fff; }

/* A brand-coloured dot. Was one of three under the lockup's tagline; the tagline went when the NIVARO
   lockup became primary, and the words survive as the spine of the Applications section instead. Only the
   green one is still used — on the hero's "now taking new organisations" badge — so the other two are
   gone rather than left as dead rules. */
.u-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; vertical-align:middle;
  margin:0 6px 2px; }
.u-dot--3{ background:var(--u-green); }

/* ---------- Header ---------- */
.u-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--u-border); }
.u-header__inner{ display:flex; align-items:center; gap:28px; min-height:74px; }
.u-nav{ display:flex; align-items:center; gap:26px; margin-inline-start:auto; }
/* Scoped to .u-nav__links, NOT .u-nav — the "Register interest" button is a sibling <a> inside the same
   nav. As `.u-nav a` this rule scored 0,1,1 against .u-btn--primary's 0,1,0 and quietly won, so the CTA
   rendered in muted grey at weight 500 on a saturated blue pill instead of white and bold. Nothing was
   broken enough to notice as a bug; it just looked wrong. Keep element selectors out of this file's
   component rules for the same reason. */
.u-nav__links a{ color:var(--u-ink-soft); text-decoration:none; font-weight:500; font-size:.95rem; }
.u-nav__links a:hover{ color:var(--u-ink); }
.u-nav__cta{ margin-inline-start:4px; }
@media (max-width:860px){ .u-nav__links{ display:none; } }
.u-nav__links{ display:flex; align-items:center; gap:26px; }

/* ---------- Buttons ---------- */
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:700; font-size:.97rem; line-height:1;
  padding:14px 24px; border-radius:var(--u-pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .18s var(--u-ease),
  box-shadow .18s var(--u-ease), background-color .18s var(--u-ease); }
.u-btn:hover{ transform:translateY(-1px); }
.u-btn:active{ transform:translateY(0); }
.u-btn--primary{ background:var(--u-blue); color:#fff; box-shadow:0 8px 20px rgba(59,130,246,.30); }
.u-btn--primary:hover{ background:#2f74e8; box-shadow:0 12px 26px rgba(59,130,246,.36); }
/* The header's CTA keeps the fill but loses the glow. A 20px coloured shadow reads as depth under a large
   in-page button; inside a 74px sticky bar it spills past the header's hairline border and onto the blurred
   backdrop, which looks like a rendering fault rather than a choice. The form's submit button keeps it.

   Two classes deliberately, so this wins on specificity rather than on where it sits in the file — the same
   trap that made this button grey in the first place. */
.u-btn--primary.u-nav__cta,
.u-btn--primary.u-nav__cta:hover{ box-shadow:none; }
.u-btn--ghost{ background:transparent; color:var(--u-ink); border-color:var(--u-border); }
.u-btn--ghost:hover{ border-color:var(--u-ink-faint); background:var(--u-surface); }
.u-btn--onNavy{ background:#fff; color:var(--u-navy); }
.u-btn--onNavyGhost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.u-btn--onNavyGhost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.u-btn--lg{ padding:17px 32px; font-size:1.03rem; }
.u-btn--block{ width:100%; }
@media (prefers-reduced-motion:reduce){ .u-btn{ transition:none; } .u-btn:hover{ transform:none; } }

/* ---------- Sections ---------- */
.u-section{ padding:clamp(64px,8vw,110px) 0; }
.u-section--tint{ background:var(--u-surface); }
.u-section--navy{ background:var(--u-navy); color:var(--u-on-navy); }
.u-section--navy .u-h2,.u-section--navy .u-h3{ color:#fff; }
.u-section--navy .u-lede,.u-section--navy .u-muted{ color:#A9B6D4; }
.u-section--navy .u-eyebrow{ color:#7E8FB8; }
.u-section__head{ max-width:74ch; margin:0 0 clamp(34px,4vw,54px); }
.u-section__head--centred{ margin-inline:auto; text-align:center; }
.u-rule{ height:3px; width:76px; border-radius:2px; background:var(--u-gradient); margin:0 0 22px; }
.u-section__head--centred .u-rule{ margin-inline:auto; }

/* ---------- Hero ---------- */
.u-hero{ position:relative; overflow:hidden; background:var(--u-navy); color:#fff;
  padding:clamp(72px,10vw,132px) 0 clamp(64px,8vw,104px); }
/* Two soft brand-coloured pools rather than a full gradient wash — the gradient stays a hairline accent. */
.u-hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52rem 30rem at 78% -12%, rgba(139,92,246,.34), transparent 62%),
    radial-gradient(44rem 26rem at 6% 108%, rgba(6,214,160,.20), transparent 60%); }
.u-hero__inner{ position:relative; }
.u-hero .u-h1{ color:#fff; max-width:19ch; }
.u-hero__lede{ color:#B7C4E0; font-size:clamp(1.08rem,1.8vw,1.36rem); max-width:60ch; margin:0 0 34px; }
.u-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.u-hero__note{ margin:22px 0 0; font-size:.92rem; color:#8FA0C4; }
.u-hero__badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px;
  border-radius:var(--u-pill); background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16); font-size:.83rem; font-weight:500;
  color:#D5DEF2; margin:0 0 26px; }

/* ---------- Cards ---------- */
.u-grid{ display:grid; gap:22px; }
.u-grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.u-grid--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.u-grid--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.u-card{ background:var(--u-bg); border:1px solid var(--u-border); border-radius:var(--u-radius);
  padding:26px; }
.u-section--tint .u-card{ background:#fff; }
.u-card--navy{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.u-card__icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--u-surface-2); color:var(--u-navy); margin:0 0 16px; }
.u-card--navy .u-card__icon{ background:rgba(255,255,255,.10); color:#fff; }
.u-card__icon svg{ width:22px; height:22px; }
.u-card p{ margin:0; color:var(--u-ink-soft); font-size:.97rem; }
.u-card--navy p{ color:#A9B6D4; }

/* ---------- The status-quo list (what Univaro replaces) ---------- */
.u-problems{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.u-problems li{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
  background:#fff; border:1px solid var(--u-border); border-radius:var(--u-radius);
  color:var(--u-ink-soft); font-size:1rem; }
.u-problems li::before{ content:''; flex:none; width:8px; height:8px; margin-top:9px;
  border-radius:50%; background:#C6CFE0; }

/* ---------- Proof points ---------- */
.u-proof{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.u-proof__item{ border-top:3px solid transparent; border-image:var(--u-gradient) 1;
  padding-top:20px; }
.u-proof__item h3{ font-weight:700; font-size:1.05rem; margin:0 0 8px; }
.u-proof__item p{ margin:0; color:var(--u-ink-soft); font-size:.97rem; }
.u-section--navy .u-proof__item p{ color:#A9B6D4; }

/* ---------- Applications, grouped under the tagline's three words ---------- */
.u-apps{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.u-app{ background:#fff; border:1px solid var(--u-border); border-radius:var(--u-radius-lg);
  padding:30px; display:flex; flex-direction:column; }
.u-app__word{ font-weight:900; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 6px; }
.u-app--1 .u-app__word{ color:var(--u-blue-ink); }
.u-app--2 .u-app__word{ color:#6D3FE0; }
.u-app--3 .u-app__word{ color:#03795B; }
.u-app__claim{ font-weight:700; font-size:1.22rem; line-height:1.3; letter-spacing:-.015em;
  margin:0 0 10px; }
.u-app__body{ color:var(--u-ink-soft); font-size:.97rem; margin:0 0 20px; }
.u-app__list{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:9px; }
.u-app__list li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem;
  color:var(--u-ink); }
.u-app__list svg{ width:17px; height:17px; flex:none; margin-top:3px; }
.u-app--1 .u-app__list svg{ color:var(--u-blue); }
.u-app--2 .u-app__list svg{ color:var(--u-purple); }
.u-app--3 .u-app__list svg{ color:#03795B; }

/* ---------- The rotating word in the hero ----------
   The headline names one kind of body at a time so a visitor sees their own word appear, rather than
   being told abstractly that the platform is general. Screen readers get a single static noun instead
   (.u-sr below) — a heading that rewrites itself mid-sentence is unreadable aloud. */
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.u-rotator{ position:relative; display:inline-grid; vertical-align:bottom; }
/* Every word is stacked in the same grid cell, so the box is as wide as the longest one and the rest of
   the headline never shifts as they cycle. */
.u-rotator__word{ grid-area:1 / 1; opacity:0; transform:translateY(.22em);
  transition:opacity .42s var(--u-ease), transform .42s var(--u-ease);
  background:linear-gradient(96deg, #A78BFA, #60A5FA 48%, #34E7BC);
  -webkit-background-clip:text; background-clip:text;
  color:#7DD3FC; -webkit-text-fill-color:transparent;
  white-space:nowrap; }
.u-rotator__word.is-on{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  /* No cycling at all: the first word stays put. The section below still teaches the same breadth. */
  .u-rotator__word{ transition:none; transform:none; }
}

/* ---------- Industry picker ---------- */
/* Pure CSS: a radio group drives which panel shows, so the whole thing works with JavaScript off.
   The per-key rules are generated in the view from Industries.All(), so adding an industry cannot
   leave a chip that selects nothing. */
.u-pick__radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.u-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 30px; }
.u-chip{ display:inline-flex; align-items:center; padding:9px 17px; border-radius:var(--u-pill);
  border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.05); color:#C6D2EA;
  font-size:.92rem; font-weight:500; cursor:pointer; user-select:none;
  transition:background-color .16s var(--u-ease), border-color .16s var(--u-ease), color .16s var(--u-ease); }
.u-chip:hover{ background:rgba(255,255,255,.11); color:#fff; }
.u-pick__radio:focus-visible + .u-chip{ outline:3px solid var(--u-blue); outline-offset:3px; }

.u-panel{ display:none; }
.u-panel__inner{ display:grid; gap:30px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:30px; border-radius:var(--u-radius-lg); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); }
@media (max-width:820px){ .u-panel__inner{ grid-template-columns:1fr; gap:22px; } }
.u-panel__pitch{ font-size:1.22rem; font-weight:700; line-height:1.4; letter-spacing:-.015em;
  color:#fff; margin:0; }
.u-panel__kicker{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#7E8FB8; margin:0 0 12px; }
.u-panel__runs{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.u-panel__runs li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:#C6D2EA; }
.u-panel__runs svg{ width:17px; height:17px; flex:none; margin-top:4px; color:var(--u-green); }
.u-panel__cta{ margin:22px 0 0; }

/* The open-ended note that stops the picker reading as a closed list of who may apply. */
.u-industries__note{ margin:26px 0 0; padding:22px 26px; border-radius:var(--u-radius);
  background:rgba(6,214,160,.09); border:1px solid rgba(6,214,160,.30); color:#D6E4F5;
  font-size:1rem; }
.u-industries__note strong{ color:#fff; }

/* ---------- How it works ---------- */
.u-steps{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  counter-reset:u-step; }
.u-step{ counter-increment:u-step; }
.u-step::before{ content:counter(u-step); display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%; background:var(--u-navy); color:#fff; font-weight:900; font-size:1.02rem;
  margin:0 0 16px; }
.u-step h3{ font-size:1.08rem; font-weight:700; margin:0 0 8px; }
.u-step p{ margin:0; color:var(--u-ink-soft); font-size:.97rem; }

/* ---------- Interest form ---------- */
.u-form-wrap{ display:grid; gap:44px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start; }
@media (max-width:900px){ .u-form-wrap{ grid-template-columns:1fr; } }
.u-form{ background:#fff; border:1px solid var(--u-border); border-radius:var(--u-radius-lg);
  padding:clamp(26px,3.4vw,40px); box-shadow:var(--u-shadow); }
.u-field{ margin:0 0 20px; }
.u-field__label{ display:block; font-weight:700; font-size:.9rem; margin:0 0 7px; }
.u-field__hint{ display:block; font-weight:400; font-size:.84rem; color:var(--u-ink-soft);
  margin:3px 0 8px; }
.u-req{ color:var(--u-blue-ink); }
.u-input,.u-select,.u-textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--u-ink);
  background:#fff; border:1.5px solid var(--u-border); border-radius:12px; padding:13px 15px;
  transition:border-color .16s var(--u-ease), box-shadow .16s var(--u-ease); }
.u-input:focus,.u-select:focus,.u-textarea:focus{ outline:none; border-color:var(--u-blue);
  box-shadow:0 0 0 4px rgba(59,130,246,.16); }
.u-textarea{ min-height:104px; resize:vertical; }
.u-row{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .u-row{ grid-template-columns:1fr; } }
/* Dial code + number read as one control, so they are drawn as one. */
.u-phone{ display:grid; grid-template-columns:minmax(118px,auto) 1fr; gap:10px; }
.u-slug{ display:flex; align-items:stretch; }
.u-slug .u-input{ border-start-end-radius:0; border-end-end-radius:0; border-inline-end:none; }
.u-slug__suffix{ display:flex; align-items:center; padding:0 15px; font-size:.95rem; font-weight:500;
  color:var(--u-ink-soft); background:var(--u-surface-2); border:1.5px solid var(--u-border);
  border-start-end-radius:12px; border-end-end-radius:12px; white-space:nowrap; }
/* Honeypot. Off-screen rather than display:none — a bot reading computed styles skips hidden fields,
   but a human never tabs here either, because it is aria-hidden and out of the tab order. */
.u-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.u-form__foot{ margin:26px 0 0; }
.u-form__privacy{ margin:14px 0 0; font-size:.88rem; color:var(--u-ink-soft); }

.u-error{ display:block; margin:6px 0 0; font-size:.88rem; font-weight:500; color:#B42318; }
/* Every field renders its validation span unconditionally, so the empty ones must not claim space —
   otherwise a clean form is spaced differently from one that has been submitted once. */
.u-error:empty{ display:none; margin:0; }
.u-input--bad,.u-select--bad{ border-color:#B42318; }
.u-alert{ padding:16px 20px; border-radius:var(--u-radius); margin:0 0 24px; font-size:.96rem; }
.u-alert--bad{ background:#FEF3F2; border:1px solid #FDA29B; color:#912018; }

/* The post-submission panel. Green earns its keep here — as a fill behind navy text. */
.u-done{ background:#fff; border:1px solid var(--u-border); border-radius:var(--u-radius-lg);
  padding:clamp(30px,4vw,48px); box-shadow:var(--u-shadow); text-align:center; }
.u-done__tick{ width:62px; height:62px; border-radius:50%; background:rgba(6,214,160,.18);
  color:#03795B; display:grid; place-items:center; margin:0 auto 20px; }
.u-done__tick svg{ width:30px; height:30px; }
.u-done h2{ font-size:1.6rem; font-weight:900; letter-spacing:-.02em; margin:0 0 12px; }
.u-done p{ margin:0 auto 8px; color:var(--u-ink-soft); max-width:52ch; }
.u-done__ref{ display:inline-block; margin:18px 0 0; padding:9px 18px; border-radius:var(--u-pill);
  background:var(--u-surface-2); font-weight:700; font-size:.92rem; }

/* ---------- Footer ---------- */
.u-footer{ background:var(--u-navy); color:#8FA0C4; padding:56px 0 34px; margin-top:auto; }
.u-footer__top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between;
  align-items:flex-start; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12); }
.u-footer__links{ display:flex; flex-wrap:wrap; gap:26px; }
.u-footer a{ color:#B7C4E0; text-decoration:none; font-size:.94rem; }
.u-footer a:hover{ color:#fff; text-decoration:underline; }
.u-footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding-top:24px; font-size:.88rem; }