/* ============================================================================
   Footer
   ----------------------------------------------------------------------------
   Its own surface, a shade below the page, so the page has a clear foot rather
   than fading out. Text uses --fl-ink-soft, not --text-muted: the muted token
   is 4.13:1 here and fails, where ink-soft is 6.31:1.
   ========================================================================== */

:root{ --fl-footer: #ededed; }

footer{
  background: var(--fl-footer) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  /* Trimmed: at the old rhythm this stood 440px on a 900px viewport — 49% of
     the screen. The foot of a page should close it, not occupy half of it.
     The top is roomier than the bottom so the border reads as a break rather
     than a lid resting on the logo. */
  padding: round(clamp(56px, 5vw, 80px), 8px) 0 24px !important;
}

/* The footer used the 1200px centred container while the nav runs full-bleed
   at 24px, so the footer logo sat 120px inboard of the nav logo directly above
   it. Same inset as the nav, so the two line up down the page edge. */
/* The footer runs the width of the window, padded by the page margin, as the
   bar does: the two share their left and right edges at every width, wide
   screens included (2026-10-31; it used to stop at the 1360 grid and centre,
   so past 1456px its logo sat inboard of the bar's). */
footer .container{
  width: auto;
  max-width: none !important;
  padding-left: var(--fl-gutter, 48px) !important;
  padding-right: var(--fl-gutter, 48px) !important;
}

.ft-grid{
  display: grid;
  /* The 12-column grid: the brand over columns 1–6 and the three link
     columns two columns each (7–8, 9–10, 11–12), so every column of links
     starts on a column edge, the same edges as the page above. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: round(clamp(32px, 5vw, 72px), 8px) var(--fl-col-gap);
  /* Per the marked-up screenshot: the footer is a tall block with the brand
     and the link columns sitting at its TOP, the social row down at the foot
     of the brand column, and open space between. The brand column stretches
     to the full grid height so `margin-top:auto` on the social row has
     somewhere to push to; the link columns stay pinned to the top. */
  align-items: stretch;
  min-height: clamp(150px, 20vh, 240px)   /* was 27vh. The columns need 161px;
     27vh forced 243px at 900, and on a PINNED footer that air is taken
     straight out of the wordmark's budget. 20vh keeps deliberate breathing
     room over the natural height without spending it on nothing. */;
}
.ft-col{ align-self: start; grid-column: span 2; }
.ft-brand{ grid-column: 1 / span 6; }

/* ── Brand ─────────────────────────────────────────────────────────────────*/
.ft-brand{ display: flex; flex-direction: column; min-height: 100%; }

.ft-logo{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display, 'Plus Jakarta Sans', -apple-system, sans-serif);
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fl-ink, #181818);
}
.ft-logo svg{ flex: none; }
.ft-logo .ai{ font-weight: 600; }

.ft-desc{
  margin-top: 16px;
  max-width: 52ch;                       /* 2 lines instead of 3; still inside the readable 45-75ch band */
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--fl-ink-soft, #312E2E);
}

/* Pinned to the foot of the brand column so they line up with the bottom of
   the tallest link column instead of floating in the middle. */
.ft-social{
  display: flex; gap: 8px;
  margin-top: auto;
  margin-left: -8px;                     /* offset the hit-area padding */
  padding-top: round(clamp(8px, 1.2vw, 16px), 4px);
  list-style: none;
}
/* Bare glyphs — no tile, no border, no movement on hover. The padding is
   invisible but makes the hit area 44px (28 + 8 + 8), the touch guideline, so
   dropping the box does not drop the target. Colour is the only hover change. */
.ft-social a{
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 8px;
  color: var(--fl-ink-soft, #312E2E);
  transition: color .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1));
}
.ft-social a:hover{ color: var(--fl-ink, #181818); }
/* 28px, up from 22 (2026-11-02): at 22 the two marks read as small print
   beside the column titles. */
.ft-social svg{ width: 28px; height: 28px; display: block; }

/* ── Link columns ──────────────────────────────────────────────────────────*/
.ft-title{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fl-ink, #181818);
  margin: 0 0 16px;
}

.ft-col a{
  display: block;
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--fl-ink-soft, #312E2E);
  transition: color .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1));
}
.ft-col a:hover{ color: var(--fl-ink, #181818); }

/* ── Ask AI about us ───────────────────────────────────────────────────────
   Rather than read our copy about ourselves, interrogate a model about us.
   Each mark opens that assistant with the question already typed. The panel is
   the dark element on a light footer, which is what the layout leans on. */
.ft-askai{
  display: flex; align-items: center; justify-content: space-between;
  gap: round(clamp(20px, 4vw, 48px), 4px); flex-wrap: wrap;
  margin-top: round(clamp(32px, 4vw, 52px), 8px);
  padding-top: round(clamp(28px, 3vw, 40px), 4px);
  border-top: 1px solid rgba(0,0,0,.07);
}
.ft-askai-title{
  font-size: clamp(21px, 2.3vw, 29px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--fl-ink, #181818); margin: 0;
}
.ft-askai-sub{
  font-size: 14.5px; line-height: 1.3; margin: 8px 0 0;
  color: var(--fl-ink-soft, #312E2E); max-width: 34ch;
}
/* The marks sit straight on the footer, in a line. No panel: a dark slab here
   reads as a button you cannot press, and it fights the light footer it is
   sitting on. The marks alone carry it. */
.ft-askai-panel{
  display: flex; align-items: center; gap: round(clamp(20px, 3vw, 40px), 4px);
}
.ft-askai-link{
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  color: var(--fl-ink, #181818); opacity: .58;
  transition: opacity .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1)),
              transform .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1));
}
/* The tools' own marks (assets/brand), set in one ink: the row is black and
   white, so Claude's orange mark is shown in its monochrome form, as the
   others already are (brightness(0) keeps the shape and drops the colour).
   They sit back a little until pointed at, as the drawn ones did. */
.ft-askai-link img{ display: block; width: 30px; height: auto; filter: brightness(0); }
.ft-askai-link svg{ width: 29px; height: 29px; }   /* Gemini's, drawn until its file arrives */
.ft-askai-link:hover{ opacity: 1; transform: translateY(-2px); }
.ft-askai-link:focus-visible{ outline: 2px solid var(--fl-ink, #181818); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 680px){
  .ft-askai{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-askai-panel{ gap: 32px; }
}

/* ── Bottom bar ────────────────────────────────────────────────────────────*/
/* ── the wordmark at the foot of the page ─────────────────────────────────
   The brand set once, very large and very quiet: a texture under the copyright
   line rather than something to read. It is aria-hidden because the logo at
   the top of this same footer already names us — a screen reader meeting
   "Floom" twice in a row would just be noise.

   Warm Light Gray measures 1.22:1 on the footer's Light Gray ground — a mark
   you notice rather than read. Silver was the first choice and at 1.44:1 it
   came out as a solid grey slab competing with the links above it; this is the
   member that matches the weight the reference holds. The top-to-bottom fade
   is what keeps it reading as a watermark rather than a heading — the
   letterforms sink into the ground as they descend.

   The size is in vw so one value fits every width, and the row clips so a
   wide-glyph fallback face (before Plus Jakarta Sans lands) can never push a
   horizontal scrollbar onto the page. */
.ft-mark{
  margin-top: round(clamp(16px, 2.6vw, 44px), 4px);
  overflow: hidden;
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  /* Width: calibrated for "Floom AI" against the box the text actually has to
     fit — .ft-mark's content width, which is the viewport MINUS the container's
     gutters, not the viewport. Getting that wrong is what clipped the final "I"
     on phones: the gutter is clamp(20px, 2.8vw, 40px), so at 390 the real box
     is 350px, not 390, and the floor makes the gutter a larger fraction the
     narrower the screen gets. 20.8vw is the value that holds ~95% of the content
     box at every width down to 320; the 387px ceiling does the same at the
     1720px shell cap, where the box stops growing but vw does not. Calibrated
     to the STRING — change the text and both numbers must be measured again.

     Height: the vh term is the one that matters on desktop. This footer is
     PINNED (floom-footer.js) and a pinned footer taller than the viewport
     loses its top — which here is the navigation columns. Sized on width
     alone the word was 446px tall at 1440x900 and pushed the footer to 1059px
     against a 900px viewport, hiding 159px of links with no way to scroll them
     back. 33vh keeps the whole footer inside the viewport at the common
     desktop heights, so the reveal stays on and every link stays reachable.
     Below ~768px wide the width term wins again and the word is full-bleed as
     the design intends. */
  font-size: clamp(50px, min(20.8vw, 33vh), 387px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  background-image: linear-gradient(180deg, #DBD4CF 2%, rgba(219,212,207,.28) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* "AI" rides a step lighter than the name, the same relationship the lockup
   at the top of this footer uses (.ft-logo .ai is 600 against 700). It keeps
   the suffix from reading as part of the word. The gradient is clipped on the
   PARENT, so this inherits it and must not re-declare a background of its own. */
.ft-mark-in{ display: inline-block; line-height: 0.95; }
.ft-mark .ft-mark-in > span{ font-weight: 600; }

/* vw can only approximate the box, because the container's gutter is
   clamp(20px, 2.8vw, 40px) — its share of the width changes as the screen
   narrows, so one vw value is either loose in the middle or clipping at 320.
   A container query unit measures the real box instead, so the word holds the
   same ~95% at every width with no per-breakpoint tuning. The vw rule above
   stays as the fallback for browsers without container queries. */
@supports (container-type: inline-size){
  /* The text sits one level in so .ft-mark can BE the query container: a
     container query unit resolves against the nearest ANCESTOR container, so
     declaring it on the same element the font-size is on silently measured the
     viewport instead — which is how the mark went back to clipping. Containing
     .ft-mark is safe; it holds nothing but this text. */
  .ft-mark{ container-type: inline-size; }
  /* 24cqw: the measured text/font ratio for "Floom AI" is 3.97, so 0.95/3.97
     of the box puts it at ~95% at every width, gutters included, with no
     per-breakpoint tuning. The vh term still caps it on desktop, where the
     pinned footer's height is the binding constraint. */
  .ft-mark-in{ font-size: min(24cqw, 33vh); }
}

.ft-bottom{
  margin-top: round(clamp(16px, 2vw, 24px), 4px);
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px 24px;
  font-size: 13.5px;
  color: var(--fl-ink-soft, #312E2E);
}
.ft-bottom-links{ display: flex; gap: 24px; }
.ft-bottom-links a{ color: inherit; padding: 4px 0; transition: color .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1)); }
.ft-bottom-links a:hover{ color: var(--fl-ink, #181818); }

/* ── Responsive ────────────────────────────────────────────────────────────*/
@media (max-width: 900px){
  .ft-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--fl-col-gap); }   /* four columns each */
  .ft-col{ grid-column: auto; }
  .ft-brand{ grid-column: 1 / -1; min-height: 0; }
  .ft-social{ margin-top: 0; padding-top: 24px; }
  .ft-desc{ max-width: 46ch; }
}

@media (max-width: 560px){
  .ft-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* six columns each */
  .ft-col a{ padding: 8px 0; }          /* ~40px rows once line-height counts */
  .ft-bottom{ flex-direction: column; align-items: flex-start; }
}


/* ── Short viewports ───────────────────────────────────────────────────────
   The footer is a fixed height, so its share of the screen grows as the window
   gets shorter — it was 38% at 900px tall but 53% at 650px. On a laptop-height
   window the padding tightens further so the foot of the page stays a foot. */
@media (max-height: 780px){
  footer{ padding-top: 28px !important; padding-bottom: 16px !important; }
  .ft-bottom{ margin-top: 16px; padding-top: 16px; }
  .ft-grid{ min-height: clamp(160px, 24vh, 230px); }
}

/* ── Parallax reveal ──────────────────────────────────────────────────────
   The footer holds still in the viewport while the page slides up off it, so
   it reads as being uncovered rather than scrolled to.

   It works by making the wrapper a containing block for a fixed-position
   footer (clip-path does that) and reserving the footer's height in the flow.
   Both the class and the wrapper height are applied by floom-footer.js, and
   only after it has probed that this browser really does re-root fixed
   children — otherwise the footer would pin to the viewport and cover the
   page, which is a far worse failure than simply having no parallax. */

.fl-ftpx .ft-reveal{
  clip-path: inset(0);
  will-change: clip-path;
}
.fl-ftpx .ft-reveal > footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
}

@media (prefers-reduced-motion: reduce){
  .fl-ftpx .ft-reveal{ clip-path: none !important; height: auto !important; }
  .fl-ftpx .ft-reveal > footer{ position: static !important; }
}

/* ── the examination, at the foot of the page ─────────────────────────────
   The wordmark band carries one more thing: that the controls behind all of
   the above have been looked at by somebody else. Words on the left, the
   examiner's own mark on the right, both sitting over the quiet wordmark
   rather than adding a band of their own.

   One grid cell holds both layers, so the wordmark stays exactly where it was
   and the claim lies on top of it. Below 900 they stop sharing the cell — at
   that width the wordmark is most of the row and the words would land in the
   middle of it. */
.ft-foot{ display: grid; }
.ft-foot > *{ grid-area: 1 / 1; }

.ft-soc{
  align-self: end;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: round(clamp(20px, 4vw, 56px), 4px);
  padding-bottom: round(clamp(4px, 1vw, 16px), 4px);
}
.ft-soc-copy{ max-width: 44ch; }
.ft-soc-copy h2{
  margin: 0 0 8px;
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-size: 17.81px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--black, #181818);
}
.ft-soc-copy p{
  margin: 0;
  font-family: var(--font, 'Urbanist'), sans-serif;
  font-size: 13px; font-weight: 450; line-height: 1.3;
  color: var(--text-secondary, #767270);
}
/* The examiner's mark, shown as supplied: never recoloured, never restyled,
   and never standing in for Floom's own. The AICPA's logo guidelines bind us
   to two things: it links to www.aicpa.org/soc4so, and it is not altered in
   any way except size. So no hover state, filter, radius or crop here. */
.ft-soc-mark{ display: block; flex: none; line-height: 0; }
.ft-soc-mark img{
  width: clamp(72px, 8vw, 104px);
  height: auto;
  display: block;
}

@media (max-width: 900px){
  .ft-foot{ display: block; }
  .ft-soc{
    align-items: center;
    margin-top: 24px;
    padding-bottom: 0;
  }
}
@media (max-width: 560px){
  .ft-soc{ flex-direction: column; align-items: flex-start; gap: 16px; }
}