/* ==========================================================================
   Customer Stories, 11 Sep 2026
   Brings customers.html onto the home page's visual system. Page-specific
   rules only: everything the home page already answers (nav, footer, CTA
   card, press wall, grain, section rhythm) is inherited, not restated.
   ========================================================================== */

/* --- One typeface ---------------------------------------------------------
   site.css still points --ui at Inter. Nothing on this page may use it. */
:root{
  --ui:"TWK Lausanne","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   1. Hero
   The home hero, minus the workflow animation: one column of copy sitting
   on the routes field, with the press wall closing the section.
   -------------------------------------------------------------------------- */
/* The opener sits on the home hero's grid: the label starts on the same line
   (178px under the section's top edge, where the home page's counter sits),
   and the press wall closes the section the same 102px under the copy. The
   section itself is shorter because this page has no mock to hold open; a
   full-height hero would leave a void where the home page has its animation. */
.home-refresh .hero--stories{
  min-height:0;
  padding-top:clamp(96px,20vh,178px);
  padding-bottom:32.4px;
}
.home-refresh .hero--stories .hero__grid{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.home-refresh .hero--stories .hero__copy{
  max-width:760px;
  gap:0;
}
.home-refresh .hero--stories .kicker{margin-bottom:20px}
.home-refresh .hero--stories .t-display{
  font-size:clamp(42px,4.5vw,64px);
  line-height:1.06;
  letter-spacing:-.045em;
}
.home-refresh .hero--stories .hero__lead{
  max-width:52ch;
  margin-top:22px;
  font-size:18px;
  line-height:1.55;
}
/* The routes field is the only decoration: keep it off the copy. */
.home-refresh .hero--stories .routefield{
  top:0;bottom:auto;height:78%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 100%);
          mask-image:linear-gradient(180deg,transparent 0,#101010 30%,#101010 100%);
}
.home-refresh .hero--stories .hero__logos{
  /* the wall carried 60px of its own padding on top of the margin, which is
     where the 162px hole between the lead and the caption came from */
  margin-top:56px;padding-top:0!important;
}

/* --------------------------------------------------------------------------
   2. Case studies
   White lifted cards on the paper ground, 4px radius, one hairline.
   -------------------------------------------------------------------------- */
.home-refresh .stories{
  padding-top:clamp(64px,8vh,100px);
  padding-bottom:clamp(64px,8vh,100px);
}
.home-refresh .stories__grid{
  display:grid;
  /* two across, so Foxquilt sits on the left of its own row with the space
     to its right left open — her call */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.home-refresh .story{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--lift);
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--t-mid) var(--ease-out);
}
/* Hover only lifts the card. The page has one card shadow and it stays --lift. */
.home-refresh .story:hover{transform:translateY(-3px)}

.home-refresh .story__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding:28px;
  flex:1 1 auto;
  min-width:0;
}
.home-refresh .story__logo{
  height:30px;width:auto;
  object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.85;
  transition:filter var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease);
}
.home-refresh .story:hover .story__logo{filter:none;opacity:1}

.home-refresh .story__title{
  margin:0;
  font-weight:400;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.3px;
  color:var(--ink);
  max-width:26ch;
}
.home-refresh .story__cta{
  margin-top:auto;align-self:stretch;
  padding-top:18px;border-top:1px solid var(--line);
}

/* The media sits inside the card, the way the home testimonial card holds
   its photo: inset, 3px radius, hairline. */
.home-refresh .story__media{
  position:relative;
  margin:0 12px 12px;
  border-radius:3px;
  overflow:hidden;
  background:var(--bg-alt);
}
.home-refresh .story__media video,
.home-refresh .story__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Featured story: copy left, media right, across both columns. */
.home-refresh .story--wide{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:stretch;
}
.home-refresh .story--wide .story__body{
  flex:0 0 42%;max-width:42%;
  padding:40px;
  gap:28px;
}
.home-refresh .story--wide .story__title{
  font-size:32px;line-height:1.2;letter-spacing:-.9px;max-width:22ch;
}
.home-refresh .story--wide .story__media{
  flex:1 1 auto;min-width:0;
  margin:12px 12px 12px 0;
  min-height:340px;
}

/* Last story runs the full width as a single line: logo and title left,
   the action right. */
.home-refresh .story--row{grid-column:1 / -1}
.home-refresh .story--row .story__body{
  flex-direction:row;
  align-items:center;
  gap:32px;
  padding:28px 32px;
}
.home-refresh .story--row .story__logo{flex:0 0 auto}
.home-refresh .story--row .story__title{
  flex:1 1 auto;max-width:46ch;margin:0;
}
.home-refresh .story--row .story__cta{margin-top:0;margin-left:auto;flex:0 0 auto}

/* --------------------------------------------------------------------------
   3. CTA band spacing, matched to the home page
   -------------------------------------------------------------------------- */
.home-refresh .ctaband{padding:0 var(--pad-x) clamp(72px,9vh,120px)}

/* --------------------------------------------------------------------------
   4. Narrower screens
   -------------------------------------------------------------------------- */
@media (max-width:1099.98px){
  .home-refresh .story--wide{flex-direction:column}
  .home-refresh .story--wide .story__body{flex:1 1 auto;max-width:none;padding:32px}
  .home-refresh .story--wide .story__title{font-size:28px;letter-spacing:-.6px}
  .home-refresh .story--wide .story__media{margin:0 12px 12px;min-height:0;height:280px}
}

@media (max-width:809.98px){
  .home-refresh .stories__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .home-refresh .story--wide,
  .home-refresh .story--row{grid-column:auto}
  .home-refresh .story--row .story__body{
    flex-direction:column;align-items:flex-start;gap:24px;padding:28px;
  }
  .home-refresh .story--row .story__cta{margin-top:auto;margin-left:0}
}

@media (max-width:599.98px){
  .home-refresh .hero--stories{padding-top:40px;padding-bottom:32px}
  .home-refresh .hero--stories .hero__lead{font-size:16px;margin-top:18px}
  .home-refresh .story__body{padding:24px;gap:20px}
  .home-refresh .story--wide .story__body{padding:24px}
  .home-refresh .story__title{font-size:18px}
  .home-refresh .story--wide .story__title{font-size:20px;letter-spacing:-.4px}
  .home-refresh .story--wide .story__media{height:200px}
  .home-refresh .ctaband{padding:0 20px 64px}
  /* This page's CTA line is longer than the home page's, so it steps down a
     size on the phone instead of running to five lines. */
  .home-refresh .ctacard__body .t-h2{font-size:32px!important;line-height:1.2!important;letter-spacing:-.9px!important}
}
/* titles on the scale: featured story 32, the smaller ones 20 */
.home-refresh .story__title{font-size:20px!important;line-height:1.35!important;letter-spacing:-.3px!important}
.home-refresh .story--wide .story__title{font-size:32px!important;line-height:1.2!important;letter-spacing:-.9px!important}
.home-refresh .story video{display:block;width:100%;height:100%;object-fit:cover;background:#e9e8e3}

/* --------------------------------------------------------------------------
   5. One way of asking to read a story
   The home page ends every customer card with a green line and an arrow
   (.tcard__cta). Four filled buttons in a row read as four competing calls
   to action, and the page already has one: the closing card. So the story
   action takes the home page's line, and the arrow moves when the card is
   hovered, because the whole card is the link.
   -------------------------------------------------------------------------- */
.home-refresh .story__cta.btn{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;border-radius:0;
  color:var(--green-deep,#0f4a38)!important;
  font-size:16px;font-weight:450;line-height:24px;
}
.home-refresh .story__cta.btn::after{
  content:"→";margin-left:8px;display:inline-block;
  transition:transform var(--t-fast) var(--ease);
}
.home-refresh .story:hover .story__cta.btn::after{transform:translateX(3px)}

/* ── The story card, tightened ────────────────────────────────────────────
   The card stretched to the row's height and pushed the link to the bottom,
   which left a hole the size of a paragraph in the middle of every card. It
   is now as tall as its contents, the logo reads at rest instead of being
   washed out, and the action sits on its own hairline at the foot.
   -------------------------------------------------------------------------- */
.home-refresh .stories__grid{align-items:start}
.home-refresh .story{height:auto}
.home-refresh .story__body{gap:18px}
.home-refresh .story__title{flex:0 0 auto!important}
/* the action reads from the card's left edge, like everything above it */
.home-refresh .story__cta.btn{text-align:left!important;display:block}

/* ── The story cards carry their customer, not a footnote of one ──────────
   The marks were 30px and washed to grey, which is what made three cards of
   plain type look like placeholders. They are their own colour now and half
   again as large — the logo is the reason anyone reads the card — the cards
   in a row match height, and a quiet label says what the card is.
   -------------------------------------------------------------------------- */
.home-refresh .stories__grid{align-items:stretch}
.home-refresh .story{height:100%}
.home-refresh .story__logo{
  height:44px!important;max-width:190px;
  filter:none!important;opacity:1!important;
}
.home-refresh .story--wide .story__logo{height:48px!important}
.home-refresh .story__kicker{
  margin:0;font-size:11px;font-weight:450;line-height:1.6;letter-spacing:.08em;
  text-transform:uppercase;color:#007a57;
}
.home-refresh .story__body{gap:14px}
.home-refresh .story__title{margin-top:2px}
.home-refresh .story__cta{margin-top:auto}

/* ── The story cards are flat (her call) ──────────────────────────────────
   The window treatment put three rails on every card and the page turned
   into bands. No card, no shadow, no fill: the stories sit straight on the
   paper under one hairline each, which is all the separation they need.
   Logo, headline, one line of fact, the green link. Nothing else.
   -------------------------------------------------------------------------- */
.home-refresh .story--win{
  display:flex;flex-direction:column;height:100%;
  background:none!important;border:0!important;border-top:1px solid var(--line)!important;
  border-radius:0!important;box-shadow:none!important;overflow:visible;
  padding:26px 0 0;
}
.home-refresh .story--win:hover{transform:none}
.home-refresh .story--win .story__rail{
  display:block;margin:0;padding:0!important;border:0!important;background:none!important;
}
.home-refresh .story--win .story__chip{display:none}
.home-refresh .story--win .story__logo{height:30px!important;max-width:150px;margin:0}
.home-refresh .story--win .story__body{padding:20px 0 0;flex:1 1 auto}
.home-refresh .story--win .story__title{
  margin:0!important;font-size:20px!important;line-height:28px!important;
  letter-spacing:-.3px!important;max-width:26ch;color:var(--ink);
}
.home-refresh .story--win .story__foot{
  display:flex;align-items:baseline;gap:10px;margin:16px 0 0;padding:0!important;
  border:0!important;background:none!important;
  font-size:13px;line-height:20px;color:var(--muted);
}
.home-refresh .story--win .story__foot b{font-weight:400;color:var(--muted)}
.home-refresh .story--win .story__foot b::before{content:"· "}
.home-refresh .story--win .story__cta{
  margin:20px 0 0!important;padding:0!important;border:0!important;text-align:left!important;
}
/* the lead story keeps its card: it is the one thing on the page that is not
   flat. The three shorter ones run across the full width in one row, so the
   page ends on a line of three rather than a pair and an orphan. */
.home-refresh .stories__grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0 40px;row-gap:0;
}
.home-refresh .story--wide{grid-column:1/-1;margin-bottom:clamp(40px,5vh,64px)}
.home-refresh .stories__more{
  grid-column:1/-1;margin:0 0 22px!important;
}
@media (max-width:1099.98px){
  .home-refresh .stories__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:8px}
}
@media (max-width:809.98px){
  .home-refresh .stories__grid{grid-template-columns:minmax(0,1fr)!important}
}

/* the lead story starts a comfortable distance under the wall, not a screen */
.home-refresh .hero--stories{padding-bottom:0!important}
.home-refresh .stories{padding-top:clamp(56px,6vh,80px)!important}

/* ── Air between the lead story and the ones under it ─────────────────────
   The label sat flush against the featured card: the card's own bottom
   margin does nothing inside a grid whose row-gap is zero, so the space has
   to come from the label itself. And the marks read small on this page of
   all pages, so every logo goes up a size. */
.home-refresh .stories__more{
  margin-top:clamp(56px,7vh,88px)!important;
  margin-bottom:26px!important;
}
.home-refresh .story--win .story__logo{height:40px!important;max-width:180px}
.home-refresh .story--wide .story__logo{height:56px!important;max-width:220px}
.home-refresh .story--win{padding-top:28px}