/* ==========================================================================
   FUSION CNC — HOME PAGE
   ========================================================================== */

/* .dark-canvas now lives in css/layout.css — it's a shared system used
   beyond just this page (about's Vision/Mission block, every page's closing
   CTA), so it moved to the shared layout stylesheet when it was repointed
   from near-black to a light ground. */

/* --------------------------------------------------------------------------
   HERO
   Photo slider used as a full-bleed background behind a left-aligned
   caption (title, support line, CTA). A faded white overlay sits between
   the slides and the text so the caption stays legible while the photo
   is still visible on the right. Four slides.
   -------------------------------------------------------------------------- */
.hero{
  position: relative;
  background: var(--ink);
  overflow: hidden;
  /* The header is fixed and opaque (brand red) at var(--header-h) tall, so
     this reserves exactly that much space rather than letting the header
     sit on top of / hide the first strip of the slider. */
  padding-top: var(--header-h);
  /* Height of the slider body below the header — scales with the viewport
     (tall on big screens) but never drops below a usable floor or runs
     away on very tall ones. */
  min-height: calc(var(--header-h) + clamp(640px, 82vh, 880px));
}

/* Drop-in slot for the client's own footage. */
.hero-video{
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Fills the .hero box (set by min-height above) rather than being sized off
   the images' own ratio — this is now a background layer behind the
   caption, so object-fit:cover crops as needed to fill the frame edge to
   edge instead of leaving bars. */
.hero-slideshow{
  position: absolute;
  inset: var(--header-h) 0 0 0;
  width: 100%;
  height: calc(100% - var(--header-h));
}
.hero-slideshow img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease-io);
}
.hero-slideshow img.is-active{ opacity: 1; z-index: 1; }

/* Faded white overlay — strong at the left (behind the caption), clearing
   to fully transparent toward the right so the photo still reads. */
.hero-overlay{
  position: absolute;
  inset: var(--header-h) 0 0 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.94) 0%,
    rgba(255,255,255,0.86) 30%,
    rgba(255,255,255,0.45) 55%,
    rgba(255,255,255,0.05) 78%
  );
}

/* --------------------------------------------------------------------------
   HERO CAPTION — left-aligned title, support line, CTA, aligned to the
   site's .container (same left edge as every other section) rather than
   the raw viewport edge.
   -------------------------------------------------------------------------- */
.hero-caption-frame{
  position: absolute;
  inset: var(--header-h) 0 0 0;
  height: calc(100% - var(--header-h));
  z-index: 2;
  display: flex;
  align-items: center;
}
.hero-caption{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 0.95s var(--ease) forwards;
  animation-delay: 0.1s;
}
.hero-caption__title{
  font-size: var(--t-h1);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.hero-caption__text{
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 42ch;
  margin: 0 0 var(--s-7);
}
@media (prefers-reduced-motion: reduce){ .hero-caption{ opacity: 1; transform: none; animation: none; } }

@media (max-width: 900px){
  .hero{ min-height: calc(var(--header-h) + clamp(600px, 86vh, 780px)); }
  .hero-overlay{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.9) 45%,
      rgba(255,255,255,0.55) 70%,
      rgba(255,255,255,0.15) 100%
    );
  }
  .hero-caption{ max-width: 100%; }
}

/* --------------------------------------------------------------------------
   HERO SLIDER CONTROLS — arrows + dots
   -------------------------------------------------------------------------- */
.hero-slider-nav{
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 0.95s var(--ease) forwards;
  animation-delay: 0.3s;
}
@keyframes heroIn{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .hero-slider-nav{ opacity: 1; transform: none; animation: none; } }

.hero-slider-dots{ display: flex; align-items: center; gap: 8px; }
.hero-slider-dot{
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-io), width var(--dur-2) var(--ease-io);
}
.hero-slider-dot:hover{ background: rgba(255,255,255,0.65); }
.hero-slider-dot.is-active{ width: 22px; border-radius: 3px; background: var(--brand); }

.hero-slider-arrow{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  color: #fff;
  transition: background var(--dur-2) var(--ease-io), border-color var(--dur-2) var(--ease-io);
}
.hero-slider-arrow svg{ width: 16px; height: 16px; }
.hero-slider-arrow:hover{ background: var(--brand); border-color: var(--brand); }

@media (max-width: 700px){
  .hero-slider-nav{ right: var(--gutter); bottom: var(--s-6); gap: var(--s-3); }
  .hero-slider-arrow{ width: 32px; height: 32px; }
}

/* --------------------------------------------------------------------------
   CAPABILITY STRIP
   -------------------------------------------------------------------------- */
/* Structure comes from a ruled top edge per column rather than icons or
   vertical dividers — the language of a spec sheet, which is what this strip
   actually is. The rule is a grey hairline that an orange bar draws across
   as the tile arrives, so the section states its own progression. */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
}

.stat{
  position: relative;
  padding-top: var(--s-6);
}
/* base hairline */
.stat::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line);
}
/* orange fill that draws left-to-right, offset per column */
.stat::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}
.stats[data-revealed] .stat::after{ transform: scaleX(1); }

.stat__index{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  margin-bottom: var(--s-5);
}

.stat__value{
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The trailing "+" is set smaller and in orange so the figure itself stays
   the thing you read first. */
.stat__value sup{
  font-size: 0.5em;
  font-weight: 700;
  vertical-align: super;
  margin-left: 0.06em;
  color: var(--brand);
  letter-spacing: 0;
}
/* "Pan India" is words, not a figure — a smaller size keeps it on the same
   optical weight as the numerals beside it instead of shouting. */
.stat__value--text{
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat__label{
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.stat__sub{
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-4);
}

@media (max-width: 900px){
  .stats{ grid-template-columns: repeat(2, 1fr); row-gap: var(--s-10); }
}
@media (max-width: 520px){
  .stats{ grid-template-columns: 1fr; row-gap: var(--s-8); }
  .stat__value{ font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   CATEGORY CARDS — tall, photographic, graded to the brand
   -------------------------------------------------------------------------- */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 1000px){ .cat-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .cat-grid{ grid-template-columns: 1fr; } }

.cat{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 470px;
  padding: var(--s-8) var(--s-7, 1.75rem) var(--s-8);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.cat:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.cat__img{
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ease);
}
.cat:hover .cat__img{ transform: scale(1.07); }

/* Same duotone technique as the hero — keeps three very different machine
   photographs reading as one considered palette. */
.cat__grade{
  position: absolute; inset: 0; z-index: -2;
  mix-blend-mode: multiply;
  background: linear-gradient(200deg, rgba(var(--brand-rgb), 0.24) 0%, rgba(17,17,17,0) 42%);
}
.cat::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(8,8,8,0.93) 0%, rgba(8,8,8,0.34) 52%, rgba(8,8,8,0.14) 100%);
}

.cat__count{
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-bright);   /* small text over a dark photo card */
  margin-bottom: var(--s-4);
}
.cat h3{ font-size: var(--t-h3); color: #fff; }
.cat p{
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.74);
  max-width: 36ch;
}
.cat__go{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-bottom: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  align-self: flex-start;
  transition: gap var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease-io),
              border-color var(--dur-2) var(--ease-io);
}
.cat__go svg{ width: 13px; height: 13px; }
.cat:hover .cat__go{ gap: var(--s-4); color: var(--brand); border-color: var(--brand); }
/* Whole card clickable; the <a> stays the real focus target. */
.cat__link::after{ content: ""; position: absolute; inset: 0; z-index: 3; }

/* --------------------------------------------------------------------------
   MACHINE RANGE — dark accordion listing the real catalogue
   -------------------------------------------------------------------------- */
.range{
  margin-top: var(--s-12);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Each row carries a thin orange rail on its leading edge. It scales from
   the centre — a short tick on hover, full height when open. This replaces
   the earlier translateX nudge and heavy orange drop shadow: the row no
   longer moves under the cursor, and "which one is open" is stated by a
   precise 2px rule rather than a glow. */
.range__item{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transition: background var(--dur-3) var(--ease-io);
}
.range__item::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-4) var(--ease);
}
.range__item:hover{ background: rgba(255,255,255,0.022); }
.range__item:hover::before{ transform: scaleY(0.28); }

.range__item[data-open]{ background: rgba(255,255,255,0.035); }
.range__item[data-open]::before{ transform: scaleY(1); }

.range__head{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-7) var(--s-6);
  background: transparent;
  color: #fff;
  text-align: left;
  transition: padding-left var(--dur-4) var(--ease);
}
/* A small, deliberate indent on open — the row settles rather than jumps,
   and it reads as a nested/expanded state. */
.range__item[data-open] .range__head{ padding-left: calc(var(--s-6) + 10px); }

.range__title{ display: flex; align-items: baseline; gap: var(--s-5); min-width: 0; }

.range__num{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  flex: none;
  transition: color var(--dur-3) var(--ease-io);
}
.range__item:hover .range__num{ color: rgba(255,255,255,0.6); }
.range__item[data-open] .range__num{ color: var(--brand-bright); }

.range__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  letter-spacing: -0.015em;
  color: rgba(255,255,255,0.78);
  transition: color var(--dur-3) var(--ease-io), font-weight var(--dur-2) linear;
}
.range__item:hover .range__name{ color: #fff; }
.range__item[data-open] .range__name{ color: #fff; font-weight: 800; }

.range__meta{ display: flex; align-items: center; gap: var(--s-5); flex: none; }
.range__count{
  font-size: var(--t-xs);
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  transition: color var(--dur-3) var(--ease-io);
}
.range__item:hover .range__count{ color: rgba(255,255,255,0.55); }

/* Toggle: a machined square, not a circle — consistent with the 2-4px radii
   used everywhere else. Outlined rather than filled, so the open state is
   legible without adding visual weight. */
.range__toggle{
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.2);
  flex: none;
  transition: transform var(--dur-4) var(--ease),
              border-color var(--dur-2) var(--ease-io),
              background var(--dur-2) var(--ease-io);
}
.range__toggle svg{
  width: 12px; height: 12px;
  color: rgba(255,255,255,0.75);
  transition: color var(--dur-2) var(--ease-io);
}
.range__item:hover .range__toggle{ border-color: rgba(255,255,255,0.4); }
.range__item:hover .range__toggle svg{ color: #fff; }
.range__item[data-open] .range__toggle{
  transform: rotate(135deg);
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), 0.12);
}
.range__item[data-open] .range__toggle svg{ color: var(--brand); }

/* Height animation via grid-template-rows 0fr -> 1fr. This animates to the
   panel's true height, so there is no max-height cap to outgrow when a
   category gains models, and no snap at the end of the transition. */
.range__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-4) var(--ease);
}
.range__item[data-open] .range__panel{ grid-template-rows: 1fr; }
.range__panel > *{ overflow: hidden; min-height: 0; }

.range__body{
  padding: 0 var(--s-6) var(--s-8) calc(var(--s-6) + 10px);
}
/* Content fades and settles slightly after the row opens, so the panel
   reads as revealing rather than unfolding a block of text. */
.range__models{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-3) var(--ease) 60ms,
              transform var(--dur-2) var(--ease) 60ms;
}
.range__item[data-open] .range__models{ opacity: 1; transform: none; }

.range__model{
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease-io),
              color var(--dur-1) var(--ease-io),
              background var(--dur-1) var(--ease-io);
}
.range__model:hover{
  border-color: rgba(var(--brand-rgb), 0.6);
  background: rgba(var(--brand-rgb), 0.10);
  color: #fff;
}

.range__more{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-bottom: 3px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--brand-bright);
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.35);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease) 140ms,
              gap var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease-io);
}
.range__item[data-open] .range__more{ opacity: 1; }
.range__more svg{ width: 13px; height: 13px; }
.range__more:hover{ gap: var(--s-4); border-color: var(--brand); }

@media (max-width: 700px){
  .range__head{ padding: var(--s-6) var(--s-4); gap: var(--s-4); }
  .range__item[data-open] .range__head{ padding-left: calc(var(--s-4) + 8px); }
  .range__title{ gap: var(--s-4); }
  .range__count{ display: none; }
  .range__body{ padding: 0 var(--s-4) var(--s-7) calc(var(--s-4) + 8px); }
}

/* Without grid-template-rows animation support the panel still opens and
   closes correctly — it simply does so instantly. */
@supports not (grid-template-rows: 1fr){
  .range__panel{ display: block; max-height: 0; overflow: hidden; }
  .range__item[data-open] .range__panel{ max-height: 600px; }
}

/* --------------------------------------------------------------------------
   ABOUT SPLIT
   -------------------------------------------------------------------------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }

.split__media{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.split__media img{ width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   IMAGE PLACEHOLDER
   Holds the exact aspect ratio and states the spec, so whoever supplies the
   final photograph knows the size, filename and the one composition rule
   that matters here. Styled as unmistakably unfinished — dashed edge, no
   photograph — so it can never be mistaken for the finished section.

   Full art direction and generation prompts: docs/image-brief-about.md
   TO REPLACE: delete .img-ph and drop in
     <img src="images/about-facility.jpg" alt="..." width="1600" height="1200">
   -------------------------------------------------------------------------- */
/* TEMPORARY FILL — remove this whole placeholder block with the markup.
   The tone is deliberately dark rather than a pale grey box: the final
   photograph will be a dark industrial scene, so filling the slot with
   near-black previews the section's real visual balance — a heavy block on
   the left against the text column on the right. A light grey placeholder
   would make the layout look correct now and wrong later. */
.split__media--placeholder{
  --ph-bg:     #171615;                       /* warm near-black */
  --ph-line:   rgba(255,255,255,0.10);
  --ph-text:   rgba(255,255,255,0.92);
  --ph-muted:  rgba(255,255,255,0.52);

  box-shadow: none;
  background:
    radial-gradient(ellipse 90% 70% at 70% 25%, rgba(var(--brand-rgb), 0.16) 0%, rgba(var(--brand-rgb), 0) 62%),
    linear-gradient(160deg, #201d1b 0%, var(--ph-bg) 55%, #121110 100%);
}
.sticky.split__media{    position: sticky;
    top: calc(var(--header-h-sm) + var(--s-10)); 
    aspect-ratio: 4 / 5;
  }
    

.img-ph{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-8);
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: var(--r-lg);
  /* Faint measuring grid — reads as a layout slot, not a broken image. */
  background-image:
    linear-gradient(var(--ph-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ph-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 85%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 85%);
}
/* The mask above softens the grid but would also fade the text, so the
   content sits in its own unmasked layer. */
.img-ph > *{ -webkit-mask-image: none; mask-image: none; }

.img-ph__icon{
  width: 34px; height: 34px;
  color: var(--brand);
  margin-bottom: var(--s-2);
  opacity: 0.9;
}
.img-ph__icon svg{ width: 100%; height: 100%; }
.img-ph__title{
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ph-text);
}
.img-ph__spec{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ph-muted);
  letter-spacing: 0.02em;
}
.img-ph__path{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--brand-bright);
  background: rgba(var(--brand-rgb), 0.10);
  border: 1px solid rgba(var(--brand-rgb), 0.35);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
}
.img-ph__note{
  max-width: 30ch;
  margin-top: var(--s-2);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ph-muted);
}
.img-ph__note b{ color: rgba(255,255,255,0.72); font-weight: 600; }

/* Marks the region the orange plaque will cover, so the composition
   constraint is visible while the slot is still empty. */
.img-ph__safe{
  position: absolute;
  left: 0; bottom: 0;
  width: 62%; height: 120px;
  border-top: 1px dashed rgba(var(--brand-rgb), 0.55);
  border-right: 1px dashed rgba(var(--brand-rgb), 0.55);
  background: rgba(var(--brand-rgb), 0.07);
  pointer-events: none;
}
.img-ph__safe span{
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
@media (max-width: 560px){
  .img-ph{ padding: var(--s-5); gap: var(--s-2); }
  .img-ph__note, .img-ph__icon{ display: none; }
  .img-ph__safe{ height: 88px; }
}
.split__plaque{
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--s-5) var(--s-6);
  background: var(--brand);
  color: var(--ink);
  box-shadow: var(--glow);
}
.split__plaque b{
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}
.split__plaque span{ display: block; margin-top: 5px; font-size: var(--t-xs); font-weight: 600; }

/* Two-up facts strip — the company's real locations, stated plainly. Replaces
   the earlier values checklist, which restated the quality claims now covered
   in the "Why Fusion CNC" section. */
.about-facts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}
@media (max-width: 460px){ .about-facts{ grid-template-columns: 1fr; gap: var(--s-5); } }

.about-fact__label{
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--s-2);
}
.about-fact__value{
  display: block;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   WHY FUSION CNC

   Deliberately NOT a card grid. The three sections before this one (category
   cards, range accordion, machine photography) all present grouped product
   content, and a fourth grid of boxes made the page read as one repeated
   idea. This is editorial instead: a sticky heading on the left, numbered
   rows separated by hairlines on the right. No boxes, no icon chips, no
   background panels — the change of structure is what breaks the rhythm.
   -------------------------------------------------------------------------- */
.why{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px){ .why{ grid-template-columns: 1fr; } }

/* The heading holds position while the reasons scroll past it — the section
   reads as one argument rather than four disconnected claims. */
.why__head{
  position: sticky;
  top: calc(var(--header-h-sm) + var(--s-10));
}
@media (max-width: 900px){ .why__head{ position: static; } }

.why__list{ border-top: 1px solid var(--line); }

.why__item{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding: var(--s-8) 0 var(--s-8) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-4) var(--ease);
}
/* A hairline that draws in from the left on hover, echoing the range rail
   without repeating its orange block. */
.why__item::before{
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--brand);
  transition: width var(--dur-4) var(--ease);
}
.why__item:hover::before{ width: 100%; }
.why__item:hover{ padding-left: var(--s-4); }

.why__num{
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  padding-top: 5px;
  transition: color var(--dur-3) var(--ease-io);
}
.why__item:hover .why__num{ color: var(--brand-ink); }

.why__item h3{
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  letter-spacing: var(--tracking-tight);
}
.why__item p{
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 52ch;
}

/* Inline material tags on the first row — carries the four industries that
   used to have a section of their own, without spending a section on them. */
.why__tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.why__tag{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease-io), color var(--dur-1) var(--ease-io);
}
.why__item:hover .why__tag{ border-color: var(--brand); color: var(--ink); }

@media (max-width: 560px){
  .why__item{ grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-7); }
  .why__num{ padding-top: 0; }
}

/* --------------------------------------------------------------------------
   STONE CNC MACHINE RANGE — home page rail
   Reuses the .machine-card component (components.css) and the same
   edge-bleed slider mechanics as .work-wrap/.work-track above, just sized
   for a wider card. Content is injected by js/home-stone-rail.js once the
   sheet loads, so the cards themselves carry no page-specific styling.
   -------------------------------------------------------------------------- */
.head-row__side{
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

/* Accent span for "CNC Machine" inside the H2 — the only place on the site
   a heading mixes ink and brand colour inline, matching the reference. */
h2 .hl{ color: var(--brand-ink); }

.stone-wrap{ margin-top: var(--s-9); }
.stone-wrap.work-wrap[hidden]{ display: none; }

/* .quotes-btns/.quotes-controls set their own `display`, which otherwise
   ties with the plain [hidden] UA rule on specificity and can win by source
   order. The extra attribute here outweighs it so hidden reliably wins. */
[data-stone-nav][hidden]{ display: none; }

.stone-track .machine-card{
  scroll-snap-align: start;
  flex: none;
  width: 300px;
  background: var(--surface);
}
.stone-track .machine-card__actions{ margin-top: auto; padding-top: var(--s-5); }

@media (max-width: 640px){
  .stone-track .machine-card{ width: min(78vw, 300px); }
}

/* --------------------------------------------------------------------------
   SAMPLE WORK — edge-bleeding card slider
   Same native-scroll + snap + rail mechanism as the testimonials carousel
   below (and the same [data-carousel] JS drives both). Each card is a small
   square photograph with a caption strip, styled after the reference
   "small card image + name" layout the client supplied.
   -------------------------------------------------------------------------- */
.work-wrap{
  margin-top: var(--s-9);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-bottom: var(--s-2);
}
.work-wrap::-webkit-scrollbar{ display: none; }

.work-track{
  display: flex;
  gap: var(--s-4);
  width: max-content;
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
}

.work-card{
  scroll-snap-align: start;
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease-io);
}
.work-card:hover{
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.work-card__img{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-3);
}
.work-card__img img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.work-card:hover .work-card__img img{ transform: scale(1.08); }

.work-card__label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
}
.work-card__name{
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.work-card__arrow{
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand);
  transition: background var(--dur-2) var(--ease-io), color var(--dur-2) var(--ease-io), transform var(--dur-2) var(--ease);
}
.work-card__arrow svg{ width: 14px; height: 14px; }
.work-card:hover .work-card__arrow{ background: var(--brand); color: var(--on-dark); transform: translate(1px, -1px); }

.work-controls{ margin-top: var(--s-7); }

@media (max-width: 640px){
  .work-card{ width: min(42vw, 168px); }
  .work-card__label{ padding: var(--s-3) var(--s-3); }
  .work-card__name{ font-size: 0.8125rem; }
  .work-controls{ margin-top: var(--s-5); }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS — fixed 3-up video grid

   Always exactly 3 videos, so this is a plain grid rather than a carousel —
   no scroll, no rail, no prev/next buttons needed. Each card is just the
   video player itself; no name/location/tag footer.
   -------------------------------------------------------------------------- */
.testimonials-grid{
  margin-top: var(--s-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.quote-card{
  overflow: hidden; /* clips the video to the card's rounded corners */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease-io);
}
.quote-card:hover{
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.quote-card__video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.quote-card__video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER CARDS — awaiting the real client videos.
   Deliberately styled as unmistakably unfinished: dashed edge, muted ground.
   Delete [data-placeholder] from a card once its real video is in. */
.quote-card[data-placeholder]{
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}
.quote-card[data-placeholder]:hover{ transform: none; box-shadow: none; border-color: var(--line-strong); }

@media (max-width: 900px){
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .testimonials-grid{ grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-10); }
}

/* --- Carousel controls ---------------------------------------------------- */
.quotes-controls{
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-8);
}
.quotes-rail{
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--line);
}
.quotes-rail__fill{
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: calc(var(--rail, 0) * 100%);
  min-width: 42px;
  background: var(--brand);
  transition: width var(--dur-2) var(--ease);
}
.quotes-btns{ display: flex; gap: var(--s-3); flex: none; }
.quotes-btn{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
  transition: background var(--dur-2) var(--ease-io),
              border-color var(--dur-2) var(--ease-io),
              color var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.quotes-btn svg{ width: 16px; height: 16px; }
.quotes-btn:hover:not(:disabled){
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.quotes-btn:disabled{ opacity: 0.32; cursor: default; }

@media (max-width: 640px){
  .quotes-controls{ margin-top: var(--s-6); gap: var(--s-5); }
}

/* --------------------------------------------------------------------------
   CLOSING CTA + CONTACT CARDS
   The closing band went from near-black, to full brand red (read as a
   hazard/alert colour at full-bleed size), to a darkened oxide-red (client
   feedback: still didn't read as the brand) — settling here on plain white,
   the same ground as most of the rest of the page. Brand red now appears
   only as an accent (eyebrow, primary button, card icons), which is the
   role it plays everywhere else on the site. No .dark-canvas, no glow/grid
   overlay — those were both built for a dark ground this section no longer
   uses.
   -------------------------------------------------------------------------- */
.cta-final{ background: var(--surface); }

.cta-head{ max-width: 62ch; }
.cta-head p{ margin-top: var(--s-4); font-size: var(--t-lead); color: var(--ink-3); }

.cta-actions{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

.contact-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-16);
}
@media (max-width: 900px){ .contact-cards{ grid-template-columns: 1fr; } }

.contact-card{
  display: block;
  padding: var(--s-7, 1.75rem) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease-io);
}
.contact-card:hover{
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.contact-card__icon{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  background: var(--brand-wash);
  color: var(--brand-ink);
  margin-bottom: var(--s-5);
  transition: background var(--dur-3) var(--ease-io), color var(--dur-3) var(--ease-io);
}
.contact-card__icon svg{ width: 18px; height: 18px; }
.contact-card:hover .contact-card__icon{ background: var(--brand); color: #fff; }
.contact-card__label{
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}
.contact-card__value{
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.contact-card__sub{
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-4);
}