/* Foundations (5 Sep 2026). Drawn by novamira-sandbox/foundations-page.php. */
.soma-fd{--fd-max:1180px;background:var(--soma-base)}
.soma-fd h1,.soma-fd h2{text-wrap:balance}
.soma-fd p{margin:0}
.soma-fd .soma-eyebrow span,.soma-fd .soma-eyebrow i{display:inline-block;margin-left:8px;font-size:.75rem;letter-spacing:0;text-transform:none;font-weight:500;font-style:normal;color:var(--soma-secondary)}
.soma-fd a.soma-fd-ghost{background:transparent;color:var(--soma-white);box-shadow:inset 0 0 0 1.5px var(--soma-line-inverse)}
.soma-fd a.soma-fd-ghost:hover{background:var(--soma-white-12)}
/* hero */
.soma-fd-hero{background:var(--soma-primary);color:var(--soma-white);position:relative;overflow:hidden;padding:clamp(3rem,2rem + 4vw,6rem) var(--soma-gutter) clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.soma-fd-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 90% at 15% 20%,rgba(13,124,104,.35) 0%,rgba(13,124,104,0) 60%),radial-gradient(50% 70% at 95% 100%,rgba(204,213,255,.18) 0%,rgba(204,213,255,0) 60%);pointer-events:none}
.soma-fd-hero__in{position:relative;max-width:var(--fd-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,1rem + 5vw,6rem);align-items:end}
.soma-fd-hero .soma-eyebrow{color:var(--soma-periwinkle)}
.soma-fd-hero .soma-eyebrow span{color:var(--soma-white-70)}
.soma-fd-hero h1{color:var(--soma-white);font-size:clamp(2.5rem,1.2rem + 4.6vw,4.6rem);letter-spacing:-.01em;margin:18px 0 22px}
.soma-fd-lead{color:var(--soma-white-70);font-size:clamp(1.125rem,1.05rem + .35vw,1.375rem);line-height:1.6;max-width:34em}
.soma-fd-note{color:var(--soma-white-50);font-size:1rem;line-height:1.6;max-width:34em;margin-top:12px}
.soma-fd-hero__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.soma-fd-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.soma-fd-facts div{background:var(--soma-white-12);border-radius:var(--soma-r-md);padding:16px 18px}
.soma-fd-facts dt{font-family:var(--soma-font-display);font-weight:600;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);line-height:1;color:var(--soma-white);font-variant-numeric:tabular-nums}
.soma-fd-facts dd{margin:6px 0 0;font-size:.875rem;color:var(--soma-white-70)}
/* sections */
.soma-fd-sec{padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) var(--soma-gutter)}
.soma-fd-sec--white{background:var(--soma-white)}
.soma-fd-sec__in{max-width:var(--fd-max);margin:0 auto}
.soma-fd-sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:end;margin-bottom:24px}
.soma-fd-sec__head p{color:var(--soma-text);font-size:1.0625rem;line-height:1.6;max-width:34em}
.soma-fd-sec h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.6rem);margin-top:8px;letter-spacing:-.01em}
/* the two cards */
.soma-fd-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,.75rem + 1vw,1.5rem)}
.soma-fd-card{background:var(--soma-white);border-radius:var(--soma-r-lg);padding:clamp(1.5rem,1rem + 2vw,2.5rem);display:flex;flex-direction:column;gap:12px;border-left:6px solid var(--c,var(--soma-secondary))}
.soma-fd-card h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin:0}
.soma-fd-card p{color:var(--soma-text);font-size:1rem;line-height:1.6}
.soma-fd-card--dark{background:var(--soma-primary);color:var(--soma-white);border-left-color:var(--soma-secondary)}
.soma-fd-card--dark .soma-eyebrow{color:var(--soma-periwinkle)}
.soma-fd-card--dark h2{color:var(--soma-white)}
.soma-fd-card--dark p{color:var(--soma-white-70)}
.soma-fd-card__acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.soma-fd .soma-fd-card--dark a.soma-fd-btn-light{background:var(--soma-white);color:var(--soma-primary) !important}
.soma-fd .soma-fd-card__link{font-weight:600;color:var(--soma-white);text-decoration:none;font-size:.9375rem;opacity:.85}
.soma-fd-card__reads{font-size:.9375rem}
.soma-fd .soma-fd-card__reads a{color:var(--soma-secondary);font-weight:600;text-decoration:none}
/* rows */
.soma-fd-rows{display:flex;flex-direction:column;gap:12px}
.soma-fd .soma-fd-row{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:22px;align-items:center;background:var(--soma-base);border-radius:var(--soma-r-lg);overflow:hidden;color:var(--soma-primary);text-decoration:none;transition:transform var(--soma-dur-lift) var(--soma-ease),box-shadow var(--soma-dur-lift) var(--soma-ease)}
.soma-fd .soma-fd-row:hover{transform:translateY(-3px);box-shadow:0 20px 40px var(--soma-shadow)}
.soma-fd-row__media{display:block;align-self:stretch;min-height:150px;border-left:6px solid var(--c);background:var(--soma-primary-deep)}
.soma-fd-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.soma-fd-row__body{display:flex;flex-direction:column;gap:6px;padding:18px 0}
.soma-fd-row__field{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--c)}
.soma-fd-row__title{font-family:var(--soma-font-display);font-weight:600;font-size:1.5rem;line-height:1.15}
.soma-fd-row__q{color:var(--soma-text);font-size:1rem;line-height:1.5}
.soma-fd-row__meta{color:var(--soma-text);font-size:.8125rem}
.soma-fd-row__go{padding:18px 22px 18px 0}
/* steps */
.soma-fd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.soma-fd-step{background:var(--soma-white);border-radius:var(--soma-r-lg);padding:24px;display:flex;flex-direction:column;gap:8px;color:var(--soma-text);font-size:.9375rem;line-height:1.55}
.soma-fd-step b{font-family:var(--soma-font-display);font-weight:500;font-size:2.2rem;line-height:1;color:var(--soma-secondary)}
.soma-fd-step__t{font-family:var(--soma-font-display);font-weight:600;font-size:1.4rem;color:var(--soma-primary)}
/* ending */
.soma-fd-end{background:var(--soma-primary);color:var(--soma-white);padding:clamp(3.5rem,2rem + 5vw,7rem) var(--soma-gutter)}
.soma-fd-end__in{max-width:var(--fd-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.soma-fd-end .soma-eyebrow{color:var(--soma-periwinkle)}
.soma-fd-end h2{color:var(--soma-white);font-size:clamp(2rem,1.3rem + 3vw,3.4rem);margin:14px 0 14px}
.soma-fd-end p{color:var(--soma-white-70);max-width:36em;font-size:1.0625rem}
.soma-fd-end__acts{display:flex;flex-direction:column;gap:10px;min-width:280px}
.soma-fd-end__acts .soma-btn{justify-content:center}
@media (max-width:1100px){
  .soma-fd-hero__in{grid-template-columns:1fr;align-items:start}
  .soma-fd-facts{max-width:560px}
  .soma-fd-pair{grid-template-columns:1fr}
  .soma-fd-sec__head{grid-template-columns:1fr}
  .soma-fd .soma-fd-row{grid-template-columns:160px minmax(0,1fr)}
  .soma-fd-row__go{grid-column:2;padding:0 0 18px}
  .soma-fd-steps{grid-template-columns:1fr}
  .soma-fd-end__in{grid-template-columns:1fr}
  .soma-fd-end__acts{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .soma-fd-hero h1{font-size:clamp(2.25rem,8.6vw,2.9rem)}
  .soma-fd-facts{grid-template-columns:1fr 1fr;gap:8px}
  .soma-fd-facts div{padding:12px 14px}
  .soma-fd-hero__acts .soma-btn{flex:1;justify-content:center}
  .soma-fd .soma-fd-row{grid-template-columns:1fr;gap:0}
  .soma-fd-row__media{min-height:0;aspect-ratio:16/9;border-left:0;border-top:5px solid var(--c)}
  .soma-fd-row__body{padding:16px 18px 6px}
  .soma-fd-row__go{grid-column:1;padding:0 18px 18px}
  .soma-fd-end__acts{flex-direction:column}
}

/* The card is dark, but the site-wide link hover is written for light ground:
   .soma-page a:hover turns a link near-black. On this card that meant "Read the
   five ideas first" disappeared into the card the moment you pointed at it. It
   keeps its white and picks up an underline as the hover cue instead. */
.soma-fd a.soma-fd-card__link:hover,
.soma-fd a.soma-fd-card__link:focus-visible{
  color:var(--soma-white);opacity:1;
  text-decoration:underline;text-underline-offset:3px;
}


/* soma: green closing band */
/* The band and the footer were the same navy, so the page's last call to action
   dissolved into the footer. Green separates them. */
.soma-fd-end{background:var(--soma-secondary)}
.soma-fd-end .soma-eyebrow{color:rgba(255,255,255,.72)}
.soma-fd-end p{color:rgba(255,255,255,.82)}
.soma-fd-end__acts .soma-btn:not(.soma-fd-ghost){background:var(--soma-white);color:var(--soma-secondary);border-color:var(--soma-white)}
/* templates.css turns every .soma-page link navy on hover, which blacks out
   links on a coloured surface. Hold white here. */
section.soma-fd-end a:hover,section.soma-fd-end a:focus-visible{color:var(--soma-white)}
section.soma-fd-end .soma-fd-end__acts a.soma-btn:not(.soma-fd-ghost):hover,
section.soma-fd-end .soma-fd-end__acts a.soma-btn:not(.soma-fd-ghost):focus-visible{color:var(--soma-secondary)}


/* soma: section heads align at the top */
/* These heads were bottom-aligned, which pushed the brief above the heading it
   belongs to -- and by a different amount on every section, depending on
   whether the heading wrapped. The two columns now start together. */
.soma-fd-sec__head{align-items:start}
.soma-fd-sec__head > :nth-child(2){padding-top:4px}