/** Shopify CDN: Minification failed

Line 710:0 Unexpected "}"

**/
/* ==========================================================================
   Flow - Inspo Homepage
   Ported from the Next.js landing page at
   meaden-inspo-landing-client-imagery.vercel.app (2026-09-01).

   Everything is scoped under .fi so it cannot leak into the rest of the Luxe
   theme, and nothing here restyles a bare element outside that scope. The
   source used Tailwind utilities in JSX; there is no build step in a Shopify
   theme, so those are hand-ported to purpose-named classes.
   ========================================================================== */

.fi {
  --fi-bg: #fbfbfb;
  --fi-panel: #f4f3f0;
  --fi-ink: #111111;
  --fi-ink-soft: #333333;
  --fi-sub: #6b6b67;
  --fi-line: #e4e2dd;
  --fi-dark: #0c0c0b;
  --fi-dark-panel: #171715;
  --fi-dark-sub: #a9a7a1;
  --fi-dark-line: #34332f;
  --fi-head: Figtree, Helvetica, Arial, sans-serif;
  --fi-ease: cubic-bezier(0.625, 0.05, 0, 1);

  background: var(--fi-bg);
  color: var(--fi-ink);
  /* Running text uses the theme's body font so this page reads like the rest of
     the store; display type stays on the heading font. Measured on
     /collections/all and /pages/story: body is Helvetica/Arial 400, headings
     are Figtree. */
  font-family: var(--fi-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.fi *, .fi *::before, .fi *::after { box-sizing: border-box; }

/* base.css:679 sets font-family, weight and style on every <button> with
   !important, from the theme's accent font, which on this store is a serif.
   That drags the panel controls, the sketch picker, the tile captions and the
   lightbox close into New York while everything around them is Figtree. Same
   weapons, higher specificity: .fi button is 0,1,1 against the theme's 0,0,1.
   Child spans inherit once the button itself is right.
   A plain button is mostly running text - a tile caption, a sketch label - so
   it follows the body font; the actual buttons keep the display face. */
.fi button {
  font-family: var(--fi-body) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.fi .fi-btn {
  font-family: var(--fi-head) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.fi img { display: block; max-width: 100%; }
/* :where() keeps these at the specificity of `.fi` alone, so they still beat
   the theme's bare-element rules but lose to any .fi-* class that wants a
   margin. Written as `.fi p` they were 0,1,1 and silently zeroed the margin on
   every single-class rule below - the hero heading, the bullet list, every
   paragraph - which is what made the page read squashed. */
.fi :where(p) { margin: 0; }
.fi :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* Display type gets weight and tight tracking; body stays light. The contrast
   between the two is what reads as a designed page rather than a document. */
.fi :where(h1, h2, h3, h4) {
  font-family: var(--fi-head);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  text-transform: none;
}
.fi :where(h1) { font-weight: 600; letter-spacing: -0.035em; }
.fi a { color: inherit; }
.fi :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.fi-wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .fi-wrap { padding-inline: 32px; } }

.fi-eyebrow {
  font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  font-family: var(--fi-head); font-weight: 400;
}

/* ---------- buttons ---------- */
.fi .fi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; font-family: var(--fi-head); font-size: 16px; font-weight: 400;
  letter-spacing: -0.01em; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background-color .35s var(--fi-ease), color .35s var(--fi-ease),
              border-color .35s var(--fi-ease), opacity .2s linear;
}
.fi .fi-btn-primary { background: var(--fi-ink); color: #fff; border-color: var(--fi-ink); }
.fi .fi-btn-primary:hover { background: transparent; color: var(--fi-ink); }
.fi .fi-btn-invert { background: #fff; color: var(--fi-ink); border-color: #fff; }
.fi .fi-btn-invert:hover { background: transparent; color: #fff; }
.fi .fi-btn-ghost { background: transparent; color: var(--fi-ink); border-color: var(--fi-ink); }
.fi .fi-btn-ghost:hover { background: var(--fi-ink); color: #fff; }
.fi .fi-btn:disabled { opacity: .45; cursor: not-allowed; }

/* base.css:1951 is `a:not(.button), a:not(.button):visited { color: inherit }`.
   The second selector is 0,2,1, which outranks `.fi .fi-btn-invert` at 0,2,0,
   so the moment a visitor has the button's href in their history the label is
   repainted with `inherit`: white on the white invert button in the dark
   closing CTA, and near-black on the black primary button. The button looks
   empty.

   It never showed up in testing because `getComputedStyle` deliberately
   reports the UNVISITED style for privacy, so every computed-style check
   passes while the pixels are wrong. Only a real browser with history shows
   it. Each variant therefore names its :visited state explicitly, at 0,3,1. */
.fi a.fi-btn-primary,
.fi a.fi-btn-primary:visited { color: #fff; }
.fi a.fi-btn-primary:hover { color: var(--fi-ink); }

.fi a.fi-btn-invert,
.fi a.fi-btn-invert:visited { color: var(--fi-ink); }
.fi a.fi-btn-invert:hover { color: #fff; }

.fi a.fi-btn-ghost,
.fi a.fi-btn-ghost:visited { color: var(--fi-ink); }
.fi a.fi-btn-ghost:hover { color: #fff; }

.fi .fi-glass a.fi-btn-primary,
.fi .fi-glass a.fi-btn-primary:visited { color: #111; }
.fi .fi-glass a.fi-btn-primary:hover { color: #fff; }

.fi .fi-glass a.fi-btn-ghost,
.fi .fi-glass a.fi-btn-ghost:visited { color: #fff; }
.fi .fi-btn-sm { padding: 10px 24px; font-size: 15px; }
.fi .fi-btn-block { width: 100%; }

.fi .fi-field {
  width: 100%; border: 1px solid var(--fi-line); background: #fff;
  padding: 16px 18px; font-family: var(--fi-body); font-size: 16px;
  color: var(--fi-ink); border-radius: 0;
  transition: border-color .25s var(--fi-ease);
}
.fi .fi-field::placeholder { color: var(--fi-sub); }
.fi .fi-field:focus { outline: none; border-color: var(--fi-ink); }
.fi .fi-field-sm { padding-block: 14px; }

/* ---------- scroll reveal ---------- */
.fi-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--fi-ease), transform .8s var(--fi-ease);
  will-change: opacity, transform;
}
.fi-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fi-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   THEME HEADER, on this page only
   The one place this stylesheet reaches outside .fi, and deliberately.

   Luxe renders a second logo, .header--logo-inverted, whenever the header is
   transparent, which it is on the homepage (header.liquid:28, template ==
   'index' and trans_hp). The store has `logo_inverted` pointing at the same
   dark PNG as `logo_main`, so the dark mark lands on the dark hero and all but
   disappears. Painting it white here fixes it for this page without touching a
   global theme setting or asking the client to upload a second file.

   .hdr-trans-hp only exists on a homepage with a transparent header, so this
   cannot reach any other template.
   ========================================================================== */
.hdr-trans-hp .header--logo-inverted img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.fi-hero { position: relative; background: var(--fi-dark); color: #fff; overflow: hidden; }
.fi-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Luxe's base.css hides every empty element (`div:empty { display: none }` at
   base.css:1184). All three hero washes are empty divs by design, so without
   this they never paint and the headline sits on raw video. Specificity 0,2,0
   beats the theme's 0,1,1. */
.fi .fi-hero-veil,
.fi .fi-hero-grad,
.fi .fi-hero-scrim { display: block; }
.fi-hero-veil { position: absolute; inset: 0; background: rgba(12,12,11,.4); }
/* Two stacked washes. The diagonal is the one that does the work for the
   headline, darkest at top left and clearing by the bottom right so the frame
   still reads. The left-weighted wash underneath is what keeps the bullets and
   the review row legible at the bottom of the copy column, which a diagonal
   alone would leave lighter than it found them.
   If you change these stops, change scrimAt() in flow-inspo-glass.js to match,
   or the pane will visibly disagree with the page behind it. */
.fi-hero-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(12,12,11,.62) 0%, rgba(12,12,11,.38) 45%, rgba(12,12,11,0) 100%),
    linear-gradient(to right, rgba(12,12,11,.72) 0%, rgba(12,12,11,.55) 32%,
                    rgba(12,12,11,.22) 62%, rgba(12,12,11,.05) 100%);
}
/* Top-down scrim. The cut runs through bright frames, so the top of the section
   needs its own contrast rather than trusting whatever the video is showing. */
.fi-hero-scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 200px;
  background: linear-gradient(to bottom, rgba(12,12,11,.78) 0%, rgba(12,12,11,.5) 40%,
              rgba(12,12,11,.18) 74%, rgba(12,12,11,0) 100%);
}
@media (min-width: 768px) { .fi-hero-scrim { height: 240px; } }

/* The header overlays the hero and is 56px tall on a phone, so a 64px top pad
   left the kicker 8px clear of it. Measured, not guessed: one header height of
   breathing room under it. */
.fi-hero-inner { position: relative; padding-block: 112px 40px; }
@media (min-width: 768px) { .fi-hero-inner { padding-block: 84px 48px; } }
@media (min-width: 1024px) { .fi-hero-inner { padding-block: 96px 56px; } }

.fi-hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) {
  .fi-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,470px); gap: 56px; }
}
@media (min-width: 1280px) {
  .fi-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,520px); }
}
.fi-hero-copy { max-width: 640px; }
.fi-hero-kicker { color: rgba(255,255,255,.7); }
.fi-hero-h1 { margin-top: 20px; font-size: 44px; color: #fff; }
@media (min-width: 640px)  { .fi-hero-h1 { font-size: 60px; } }
@media (min-width: 1024px) { .fi-hero-h1 { font-size: 74px; } }
@media (min-width: 1280px) { .fi-hero-h1 { font-size: 82px; } }

/* Two columns of tight proof points, not one long ticked list. Same content,
   half the height, reads as a spec sheet rather than a bullet dump. */
.fi-hero-bullets {
  margin-top: 32px; display: grid; gap: 12px 32px; max-width: 600px;
}
@media (min-width: 640px) { .fi-hero-bullets { grid-template-columns: 1fr 1fr; } }
.fi-hero-bullets li { display: flex; align-items: flex-start; gap: 10px; }
.fi-hero-bullets .fi-dash {
  margin-top: 9px; width: 12px; height: 1px; background: rgba(255,255,255,.6); flex-shrink: 0;
}
.fi-hero-bullets span:last-child { font-size: 14.5px; line-height: 1.35; color: rgba(255,255,255,.85); }

.fi-hero-rating {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; transition: opacity .25s var(--fi-ease);
}
/* Stacked on a phone the review row sat in a lot of air on both sides; on
   desktop it closes the copy column and the original spacing is right. */
@media (min-width: 1024px) { .fi-hero-rating { margin-top: 36px; } }
.fi-hero-rating:hover { opacity: .75; }
.fi-hero-rating .fi-score { font-family: var(--fi-head); font-size: 14px; font-weight: 500; color: #fff; }
.fi-hero-rating .fi-dot { font-size: 14px; color: rgba(255,255,255,.6); }
.fi-hero-rating .fi-count { font-size: 14px; color: rgba(255,255,255,.75); }
.fi-hero-panel-col { width: 100%; scroll-margin-top: 96px; }
@media (min-width: 1024px) { .fi-hero-panel-col { justify-self: end; } }

/* ==========================================================================
   GLASS PANEL
   The panel is built on the colour tokens, so glass is a token override rather
   than a restyle: inside .fi-glass the ink is white, the ground is dark
   translucent, the lines are white hairlines. The Next build paints this with a
   WebGL shader and falls back to backdrop-filter; the theme ships the fallback
   only, so there is no three.js in the theme. Radius 32 deliberately breaks the
   zero-radius brand rule, because the bezel refraction is corner-driven.
   Client-approved.
   ========================================================================== */
.fi-glass {
  --fi-ink: #ffffff;
  --fi-ink-soft: rgba(255,255,255,.85);
  --fi-sub: rgba(255,255,255,.72);
  --fi-panel: rgba(17,17,17,.38);
  --fi-line: rgba(255,255,255,.2);
  color: #fff; border-radius: 32px; overflow: hidden;
  position: relative; z-index: 1;
  /* Frosted by default, so a page with no JS, no WebGL, or a failed shader
     still gets a panel rather than a transparent hole. flow-inspo-glass.js
     stamps data-fi-glass on <html> to pick the live treatment. */
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(.4) brightness(.9);
  -webkit-backdrop-filter: blur(22px) saturate(.4) brightness(.9);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18);
}
/* The shader paints the pane, its bezel and its shadow in the canvas
   underneath, so the shell gets out of the way entirely. */
html[data-fi-glass="webgl"] .fi-glass {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Sits above the hero video and its three scrims, below the panel content. */
.fi-glass-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: none;
}
@media (min-width: 1024px) { .fi-glass-canvas { display: block; } }
.fi-glass h2, .fi-glass label, .fi-glass legend { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.fi-glass p { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.fi .fi-glass .fi-field {
  background: rgba(17,17,17,.38); border-color: rgba(255,255,255,.28); color: #fff;
}
.fi .fi-glass .fi-field::placeholder { color: rgba(255,255,255,.4); }
.fi .fi-glass .fi-field:focus { border-color: #fff; }
.fi .fi-glass .fi-btn-primary { background: #fff; color: #111; border-color: #fff; }
.fi .fi-glass .fi-btn-primary:hover { background: transparent; color: #fff; }
.fi .fi-glass .fi-btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.fi .fi-glass .fi-btn-ghost:hover { background: transparent; color: #fff; border-color: #fff; }
.fi .fi-glass .fi-btn-primary:disabled {
  opacity: 1; background: transparent; color: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.22);
}

.fi-panel-pad { padding: 24px; }
@media (min-width: 640px) { .fi-panel-pad { padding: 32px; } }
.fi-panel-title { font-size: 24px; }
@media (min-width: 640px) { .fi-panel-title { font-size: 28px; } }
.fi-panel-body { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--fi-sub); }

/* Each step replaces the last in place. */
.fi-step[hidden] { display: none; }
.fi-step-in { animation: fi-step-in .5s var(--fi-ease) both; }
@keyframes fi-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fi-step-in { animation: none; } }

.fi-drop {
  margin-top: 24px; padding: 24px; text-align: center;
  background: var(--fi-panel); border: 1px solid transparent;
  transition: border-color .25s var(--fi-ease);
}
.fi-drop:hover { border-color: var(--fi-line); }
.fi-drop.is-dragging { border-color: var(--fi-ink); }
.fi-drop-icon { margin-inline: auto; color: var(--fi-ink); }
.fi-drop-title { font-family: var(--fi-head); margin-top: 12px; font-size: 16px; font-weight: 500; }
.fi-drop-limit { margin-top: 10px; font-size: 11.5px; color: var(--fi-sub); }
.fi-err { margin-top: 8px; font-size: 12px; }
.fi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.fi-linkrow { margin-top: 16px; }
.fi-linkrow-label { display: block; margin-bottom: 8px; color: var(--fi-sub); }
.fi-linkrow-controls { display: flex; gap: 8px; }
.fi-linkrow-field { position: relative; flex: 1; }
.fi-linkrow-field .fi-icon-inline {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fi-sub);
}
.fi-linkrow-field .fi-field { padding-left: 40px; padding-block: 14px; }

.fi .fi-textlink {
  margin-top: 16px; display: inline-block; background: none; border: 0; padding: 0;
  font-family: var(--fi-body); font-size: 14px; color: var(--fi-sub); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .25s var(--fi-ease);
}
.fi .fi-textlink:hover { color: var(--fi-ink); }
.fi .fi-backlink {
  background: none; border: 0; padding: 0; font-family: var(--fi-body); font-size: 13px;
  color: var(--fi-sub); cursor: pointer; transition: color .25s var(--fi-ease);
}
.fi .fi-backlink:hover { color: var(--fi-ink); }

.fi-sketch-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.fi .fi-sketch { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.fi-sketch-img {
  position: relative; display: block; aspect-ratio: 1; background: #fff;
}
/* The sketches are white line art for the dark hero, so they are inverted here
   to read as pencil on the card. */
.fi-sketch-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px;
  filter: invert(1); opacity: .45; transition: opacity .25s var(--fi-ease);
}
.fi-sketch:hover .fi-sketch-img img { opacity: .8; }
.fi-sketch[aria-pressed="true"] .fi-sketch-img img { opacity: 1; }
.fi-sketch-label {
  margin-top: 4px; display: block; font-size: 12px; line-height: 1.2; padding-bottom: 2px;
  border-bottom: 1px solid transparent; color: var(--fi-sub); transition: color .25s var(--fi-ease);
}
.fi-sketch[aria-pressed="true"] .fi-sketch-label { color: var(--fi-ink); border-bottom-color: var(--fi-ink); }

.fi-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.fi-chip { position: relative; }
.fi-chip-link {
  display: flex; align-items: center; gap: 8px; height: 56px; padding-inline: 12px;
  border: 1px solid var(--fi-line); font-size: 12px; max-width: 170px;
}
.fi-chip-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-chip-img {
  display: block; position: relative; width: 56px; height: 56px;
  border: 1px solid var(--fi-line); overflow: hidden;
}
.fi-chip-img img { width: 100%; height: 100%; object-fit: cover; }
.fi-chip-img.is-example { background: var(--fi-dark); }
.fi-chip-img.is-example img { object-fit: contain; padding: 4px; }
.fi .fi-chip-x {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
  background: var(--fi-ink); color: #fff; font-size: 11px; line-height: 1;
  display: grid; place-items: center; border: 0; cursor: pointer;
}

.fi-budget { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--fi-line); }
.fi-budget-label { font-family: var(--fi-head); font-size: 15px; font-weight: 500; }
.fi-budget-row { margin-top: 10px; display: flex; align-items: center; padding: 0; }
.fi-budget-row .fi-prefix { padding-left: 16px; font-size: 17px; opacity: .7; }
.fi-budget-row input {
  flex: 1; background: transparent; border: 0; outline: none; padding: 14px 8px;
  font-family: var(--fi-body); font-size: 17px; font-variant-numeric: tabular-nums; color: inherit;
}
.fi-budget-help { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--fi-sub); }

.fi-panel-cta { margin-top: 20px; }
.fi-panel-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--fi-sub); }
.fi-panel-nudge { margin-top: 12px; text-align: center; font-size: 12.5px; }

.fi-fields { margin-top: 20px; display: grid; gap: 12px; }
.fi-fields label { display: block; }
.fi-fields .fi-eyebrow { color: var(--fi-sub); }
.fi-fields .fi-field { margin-top: 8px; }
.fi-fields textarea.fi-field { min-height: 72px; resize: vertical; }
.fi-formerr { margin-top: 16px; font-size: 13px; border: 1px solid var(--fi-ink); padding: 8px 12px; }
.fi-fineprint { margin-top: 12px; font-size: 12px; color: var(--fi-sub); }

.fi-done { text-align: center; padding-block: 16px; }
.fi-done-tick {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--fi-line);
}
.fi-done h2 { margin-top: 20px; font-size: 24px; }
.fi-done p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--fi-sub); }
.fi-done .fi-btn { margin-top: 24px; }

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */
.fi-sec { padding-block: 64px; }
@media (min-width: 768px) { .fi-sec { padding-block: 96px; } }
.fi-sec-panel { background: var(--fi-panel); }
.fi-sec-dark { background: var(--fi-dark); color: #fff; }
.fi-sec-dark h2, .fi-sec-dark h3 { color: #fff; }

.fi-head-center { text-align: center; max-width: 720px; margin-inline: auto; }
.fi-h2 { font-size: 32px; }
@media (min-width: 640px)  { .fi-h2 { font-size: 44px; } }
@media (min-width: 1024px) { .fi-h2 { font-size: 52px; } }
.fi-sub { margin-top: 16px; font-size: 16px; color: var(--fi-sub); }
.fi-sec-dark .fi-sub { color: var(--fi-dark-sub); }

/* ==========================================================================
   RECENT CUSTOMER CREATIONS
   ========================================================================== */
.fi-creations { padding-block: 64px; }
@media (min-width: 768px) { .fi-creations { padding-block: 96px; } }
.fi-creations-h2 { font-size: 30px; }
@media (min-width: 640px)  { .fi-creations-h2 { font-size: 40px; } }
@media (min-width: 1024px) { .fi-creations-h2 { font-size: 46px; } }
.fi-tiles {
  margin-top: 40px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
}
@media (min-width: 768px)  { .fi-tiles { margin-top: 56px; grid-template-columns: repeat(4,1fr); gap: 12px; } }
@media (min-width: 1024px) { .fi-tiles { grid-template-columns: repeat(6,1fr); } }
.fi .fi-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  background: var(--fi-panel); border: 0; padding: 0; cursor: default;
}
.fi-tile[data-video] { cursor: pointer; }
.fi-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--fi-ease);
}
.fi-tile:hover img { transform: scale(1.05); }
.fi-tile-play { position: absolute; inset: 0; display: grid; place-items: center; }
.fi-tile-play span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(2px); transition: transform .5s var(--fi-ease);
}
.fi-tile:hover .fi-tile-play span { transform: scale(1.1); }
.fi-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 10px; padding-top: 40px;
  font-size: 11px; line-height: 1.3; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  opacity: 0; transition: opacity .5s var(--fi-ease);
}
.fi-tile:hover .fi-tile-cap { opacity: 1; }

.fi-lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.9);
  display: grid; place-items: center; padding: 16px;
}
.fi-lightbox[hidden] { display: none; }
.fi-lightbox video { max-width: min(1100px, 94vw); max-height: 86vh; width: auto; }
.fi .fi-lightbox-x {
  position: absolute; top: 16px; right: 20px; background: none; border: 0;
  color: #fff; font-size: 28px; line-height: 1; padding: 8px; cursor: pointer;
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.fi-rating-row { display: inline-flex; align-items: center; gap: 12px; }
.fi-rating-row .fi-score { font-size: 15px; }
.fi-reviews-grid {
  margin-top: 40px; display: grid; gap: 16px;
}
@media (min-width: 640px)  { .fi-reviews-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .fi-reviews-grid { margin-top: 56px; grid-template-columns: repeat(4,1fr); gap: 20px; } }
.fi-review {
  height: 100%; background: #fff; border: 1px solid var(--fi-line); padding: 24px;
  display: flex; flex-direction: column; margin: 0;
}
.fi-review blockquote { margin: 16px 0 0; flex: 1; font-size: 14px; line-height: 1.6; color: var(--fi-ink-soft); }
.fi-review figcaption {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fi-line);
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.fi-readall { margin-top: 40px; text-align: center; }
.fi-readall a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.fi-readall a:hover { text-decoration: none; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.fi-process { padding-block: 80px; }
@media (min-width: 768px) { .fi-process { padding-block: 128px; } }
.fi-process-head { text-align: center; max-width: 760px; margin-inline: auto; }
.fi-process-head .fi-eyebrow { color: var(--fi-dark-sub); }
.fi-process-h2 { margin-top: 16px; font-size: 32px; }
@media (min-width: 640px)  { .fi-process-h2 { font-size: 44px; } }
@media (min-width: 1024px) { .fi-process-h2 { font-size: 54px; } }
.fi-steps { margin-top: 48px; display: grid; gap: 32px; }
@media (min-width: 640px)  { .fi-steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1280px) { .fi-steps { margin-top: 64px; grid-template-columns: repeat(4,1fr); gap: 28px; } }
.fi-step-img {
  position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--fi-dark-panel);
}
.fi-step-img img { width: 100%; height: 100%; object-fit: cover; }
.fi-step-n { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; }
.fi-step-n span:first-child { font-family: var(--fi-head); font-size: 13px; color: var(--fi-dark-sub); }
.fi-step-rule { height: 1px; flex: 1; background: var(--fi-dark-line); }
.fi-steps h3 { margin-top: 12px; font-size: 21px; }
.fi-steps p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--fi-dark-sub); }

/* ==========================================================================
   WHAT WE CREATE
   ========================================================================== */
.fi-cats {
  margin-top: 40px; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}
@media (min-width: 768px)  { .fi-cats { margin-top: 56px; grid-template-columns: repeat(3,1fr); gap: 20px; } }
@media (min-width: 1024px) { .fi-cats { grid-template-columns: repeat(5,1fr); } }
.fi-cat { display: block; text-decoration: none; }
.fi-cat-img {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--fi-panel);
}
.fi-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--fi-ease); }
.fi-cat:hover .fi-cat-img img { transform: scale(1.05); }
.fi-cat-row {
  margin-top: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.fi-cat-row .fi-cat-title { font-size: 14px; line-height: 1.3; }
.fi-cat-row .fi-cat-arrow {
  color: var(--fi-sub); font-size: 13px; margin-top: 2px;
  transition: transform .5s var(--fi-ease);
}
.fi-cat:hover .fi-cat-arrow { transform: translateX(4px); }
.fi-cats-cta { margin-top: 48px; text-align: center; }

/* ==========================================================================
   WHY CUSTOM
   ========================================================================== */
.fi-why-custom-head { max-width: 760px; }
.fi-why-custom-head .fi-sub { line-height: 1.6; }
.fi-table-scroll { margin-top: 40px; overflow-x: auto; }
@media (min-width: 768px) { .fi-table-scroll { margin-top: 48px; } }
.fi-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.fi-table th, .fi-table td { padding: 16px; text-align: left; vertical-align: top; }
.fi-table thead th:nth-child(1) { width: 22%; border-bottom: 1px solid var(--fi-line); }
.fi-table thead th:nth-child(2) {
  width: 39%; background: var(--fi-ink); color: #fff; border-bottom: 1px solid var(--fi-ink);
}
.fi-table thead th:nth-child(3) { width: 39%; border-bottom: 1px solid var(--fi-line); }
.fi-table thead span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fi-head); font-size: 17px; font-weight: 400;
}
.fi-table thead th:nth-child(3) span { color: var(--fi-sub); }
.fi-table th { font-weight: 400; }
.fi-table tbody th {
  font-weight: 400; font-size: 13px; color: var(--fi-sub); border-bottom: 1px solid var(--fi-line);
}
.fi-table tbody td { font-size: 15px; border-bottom: 1px solid var(--fi-line); }
.fi-table tbody td:nth-of-type(1) { background: #fff; }
.fi-table tbody td:nth-of-type(2) { color: var(--fi-sub); }

/* Under 768 the table stops being a table (variation E2, approved 2026-09-02).
   A 680px scroller inside a 350px column is only discoverable if you already
   suspect it is there, and the card version that replaced it read as heavy. So
   each row becomes two lines: the Meaden answer, and the alternative struck
   through beneath it. The strikethrough carries the whole comparison, which is
   why this version needs no column headers and no ticks and crosses. */
@media (max-width: 767px) {
  .fi-table-scroll { overflow-x: visible; }
  .fi-table { min-width: 0; display: block; }
  .fi-table thead { display: none; }
  .fi-table tbody, .fi-table tr { display: block; width: 100%; }
  .fi-table tbody tr { padding: 16px 0; border-bottom: 1px solid var(--fi-line); }
  .fi-table tbody tr:first-child { border-top: 1px solid var(--fi-line); }
  .fi-table tbody th,
  .fi-table tbody td { display: block; width: auto; border: 0; padding: 0; }
  .fi-table tbody th {
    font-family: var(--fi-head);
    font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--fi-sub); margin-bottom: 7px;
  }
  .fi-table tbody td:nth-of-type(1) {
    background: none; color: var(--fi-ink); font-size: 16px; line-height: 1.4;
  }
  .fi-table tbody td:nth-of-type(2) {
    margin-top: 5px; color: #9a9a96; font-size: 13.5px; line-height: 1.4;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
}

/* ==========================================================================
   WHY MEADEN
   ========================================================================== */
.fi-wm-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .fi-wm-grid { grid-template-columns: minmax(0,.72fr) minmax(0,1fr); gap: 64px; }
}
/* Explicit aspect: the tiles are absolutely positioned fills, so without it the
   grid rows collapse to zero height. */
.fi-wm-photos {
  display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,1fr);
  gap: 12px; aspect-ratio: 4/5;
}
@media (min-width: 768px) { .fi-wm-photos { gap: 16px; } }
.fi-wm-photos span { position: relative; display: block; overflow: hidden; background: var(--fi-panel); }
.fi-wm-photos img { width: 100%; height: 100%; object-fit: cover; }
.fi-wm-a { grid-column: span 5; grid-row: span 4; }
.fi-wm-a img { object-position: center 22%; }
.fi-wm-b { grid-column: span 3; }
.fi-wm-c { grid-column: span 2; }
.fi-wm-points { margin-top: 36px; display: grid; gap: 28px; }
@media (min-width: 640px) { .fi-wm-points { grid-template-columns: repeat(2,1fr); } }
.fi-wm-points h3 { margin-top: 12px; font-size: 17px; }
.fi-wm-points p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--fi-sub); }
.fi-awards { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--fi-line); }
.fi-awards .fi-eyebrow { color: var(--fi-sub); }
.fi-awards ul { margin-top: 16px; display: grid; gap: 6px; }
.fi-awards li { font-size: 12.5px; color: var(--fi-sub); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.fi-final { padding-block: 96px; text-align: center; scroll-margin-top: 80px; }
@media (min-width: 768px) { .fi-final { padding-block: 144px; } }
.fi-final-inner { max-width: 760px; margin-inline: auto; }
.fi-final h2 { font-size: 36px; }
@media (min-width: 640px)  { .fi-final h2 { font-size: 52px; } }
@media (min-width: 1024px) { .fi-final h2 { font-size: 64px; } }
.fi-final-body {
  margin-top: 20px; font-size: 16.5px; line-height: 1.6; color: var(--fi-dark-sub);
  max-width: 52ch; margin-inline: auto;
}
.fi-final-actions {
  margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 16px;
}
.fi-final-phone {
  display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 16px;
  padding: 16px; text-decoration: none; transition: opacity .25s var(--fi-ease);
}
.fi-final-phone:hover { opacity: .7; }
.fi-final-foot {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--fi-dark-line);
  font-size: 13px; line-height: 1.6; color: var(--fi-dark-sub);
}

/* ==========================================================================
   STICKY CTA (mobile only)
   ========================================================================== */
.fi-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  border-top: 1px solid var(--fi-dark-line); background: var(--fi-dark);
  transform: translateY(100%); transition: transform .5s var(--fi-ease);
}
.fi-sticky.is-in { transform: translateY(0); }
@media (min-width: 1024px) { .fi-sticky { display: none; } }
.fi-sticky-inner { display: flex; align-items: stretch; }
.fi-sticky-phone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 20px; color: #fff; font-size: 13px;
  border-right: 1px solid var(--fi-dark-line); text-decoration: none;
}
.fi-sticky .fi-btn { flex: 1; border: 0; padding-block: 16px; }

.fi-stars { display: inline-flex; gap: 2px; }

}