/* ==========================================================================
   FUSION CNC — INNER PAGES
   About · Gallery · Videos · Contact
   Shares every token, button and motion rule with the home page; only the
   page-specific layouts live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HEAD — the banner at the top of every inner page
   Shorter and quieter than the home hero: these pages are read, not sold to.
   Was a near-black photo banner (heavy dark scrim over a machine photo) —
   client feedback ruled out black anywhere on the site, so this now washes
   the same photo toward a light ground instead of a dark one. The photo
   stays as texture, just much quieter, with dark text sitting on top.
   -------------------------------------------------------------------------- */
.page-head{
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-16);
  background: var(--surface-2);
  color: var(--ink-3);
  overflow: hidden;
  isolation: isolate;
}
.page-head__img{
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.page-head::after{
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(245,245,245,0.95) 0%, rgba(245,245,245,0.7) 60%, rgba(245,245,245,0.5) 100%),
    linear-gradient(0deg,  rgba(245,245,245,0.85) 0%, rgba(245,245,245,0.25) 60%);
}
.page-head__grid{
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17,17,17,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 25% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 80% at 25% 30%, #000 0%, transparent 78%);
}
.page-head h1{
  color: var(--ink);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}
.page-head__lead{
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
}

/* Breadcrumb */
.crumbs{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-xs);
  color: var(--ink-4);
}
.crumbs a:hover{ color: var(--ink); text-decoration: underline; }
.crumbs [aria-current]{ color: var(--brand-ink); }
.crumbs span{ opacity:1; }

/* --------------------------------------------------------------------------
   PROSE — long-form copy blocks (About)
   -------------------------------------------------------------------------- */
.prose > * + *{ margin-top: var(--s-5); }
.prose p{ font-size: 1.0625rem; line-height: 1.75; color: var(--ink-3); }
.prose p.lead{ font-size: var(--t-lead); color: var(--ink-2); }
.prose strong{ color: var(--ink); font-weight: 600; }

/* Pull quote / leadership note */
.note{
  position: relative;
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-7) var(--s-7) var(--s-8);
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.note p{ font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.note cite{
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ink);
}
.note cite span{ display: block; font-family: var(--font-body); font-weight: 400; color: var(--ink-4); margin-top: 2px; }

/* --------------------------------------------------------------------------
   STORY MEDIA — About page

   The workshop photographs are 1920x702 banner crops (2.74:1). Forcing one
   into the 4:3 slot used elsewhere threw away roughly two thirds of the
   frame, so the main image here keeps its NATIVE ratio and crops nothing.

   Beneath it sits a strip of the three machine categories, which is what the
   surrounding copy is actually about — the range. Those are catalogue shots
   on plain backgrounds, so they are contained rather than cropped, on a
   light panel that suits them.
   -------------------------------------------------------------------------- */
.story-media{ position: relative; }

.story-media__main{
  position: relative;
  margin: 0;
  aspect-ratio: 1920 / 702;   /* the photographs' own ratio — no cropping */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}
.story-media__main img{ width: 100%; height: 100%; object-fit: cover; }

/* The plaque sits on the image, as it does on the home page. */
.story-media .split__plaque{ position: absolute; left: 0; bottom: 0; }

.story-range{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.story-range__item{
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-3) var(--ease);
}
.story-range__item:hover{
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.story-range__item figure{ margin: 0; }
.story-range__item img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;        /* catalogue cut-outs — never crop a machine */
  padding: var(--s-3);
  background: var(--surface);
}
.story-range__item figcaption{
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  transition: color var(--dur-2) var(--ease-io);
}
.story-range__item:hover figcaption{ color: var(--brand-ink); }

@media (max-width: 900px){
  .story-media{ margin-bottom: var(--s-8); }
}
@media (max-width: 420px){
  .story-range__item figcaption{ font-size: 0.625rem; letter-spacing: 0.06em; }
}

/* --------------------------------------------------------------------------
   PILLAR CARDS — Vision / Mission / Quality
   Sits inside .dark-canvas, which is a light ground now (see layout.css) —
   these were translucent-white cards built for a near-black backdrop, so
   they're rewritten here as ordinary light cards rather than patched.
   -------------------------------------------------------------------------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-5);
}
.pillar{
  padding: var(--s-8) var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-3) var(--ease-io),
              box-shadow var(--dur-3) var(--ease),
              transform var(--dur-2) var(--ease);
}
.pillar:hover{
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.pillar__num{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-ink);
  margin-bottom: var(--s-5);
}
.pillar h3{ font-size: 1.25rem; color: var(--ink); }
.pillar p{ margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   VALUES — numbered rows, same editorial language as "Why Fusion CNC"
   -------------------------------------------------------------------------- */
.values-list{ border-top: 1px solid var(--line); }
.value-row{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-4) var(--ease);
}
.value-row::before{
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--brand);
  transition: width var(--dur-4) var(--ease);
}
.value-row:hover::before{ width: 100%; }
.value-row:hover{ padding-left: var(--s-4); }
.value-row__num{
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  transition: color var(--dur-3) var(--ease-io);
}
.value-row:hover .value-row__num{ color: var(--brand-ink); }
.value-row h3{ font-size: 1.1875rem; letter-spacing: var(--tracking-tight); }
.value-row p{ margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.65; color: var(--ink-3); max-width: 60ch; }
@media (max-width: 560px){
  .value-row{ grid-template-columns: 1fr; gap: var(--s-2); }
}



/* =========================================================
   FOUNDER'S VISION
   ========================================================= */

.founder-vision {
  position: relative;
  padding-top: 40px;
  padding-bottom: 80px;
}

.founder-vision__content {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 70px;
  margin-top: 0;
}

.founder-vision__intro {
  border-left: 3px solid var(--brand);
  padding-left: 24px;
  height: fit-content;
  position: sticky;
  top: 120px;
}

.founder-vision__intro h3 {
  margin: 0 0 8px;
}

.founder-vision__intro span {
  display: block;
  font-size: 14px;
  opacity: .7;
}

.founder-vision__content .prose {
  max-width: 850px;
}

.founder-vision__closing {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.founder-vision__closing p {
  margin-bottom: 12px;
}

.founder-vision__closing cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 700;
}


/* Mobile */
@media (max-width: 767px) {
  .founder-vision {
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .founder-vision__content {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-top: 0;
  }

  .founder-vision__intro {
    position: static;
  }
}


/* --------------------------------------------------------------------------
   LOCATION CARDS — office + factory
   -------------------------------------------------------------------------- */
.locations{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s-5);
}
.location{
  padding: var(--s-8) var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease-io),
              box-shadow var(--dur-3) var(--ease),
              transform var(--dur-2) var(--ease);
}
.location:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.location__tag{
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--s-4);
}
.location h3{ font-size: 1.125rem; }
.location address{
  font-style: normal;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-3);
}
.location .link-arrow{ margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.filter-bar{
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.filters{ display: flex; gap: var(--s-2); flex-wrap: wrap; }
.filter-btn{
  padding: 0.6rem 1.1rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: color var(--dur-1) var(--ease-io),
              border-color var(--dur-1) var(--ease-io),
              background var(--dur-1) var(--ease-io);
}
.filter-btn:hover{ color: var(--ink); border-color: var(--ink); }
.filter-btn.is-active{
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}
.filter-count{
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  white-space: nowrap;
}

/* A GRID, NOT MASONRY COLUMNS.
   CSS multi-column flows items top-to-bottom down column one, then column
   two — so the DOM order and the visual left-to-right reading order do not
   match, and the lightbox's "next" lands on the tile below rather than the
   one beside it. A grid keeps DOM order and visual order identical, which is
   what makes next/previous behave the way people expect.
   56 of the 57 photographs are square already, so nothing is lost. */
.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1100px){ .gallery{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){  .gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){  .gallery{ grid-template-columns: 1fr; } }

.gallery__item{
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-3);
  cursor: zoom-in;
  padding: 0;
  border: 0;
}
/* REQUIRED: the browser's own [hidden] rule is display:none, but an author
   rule of display:block beats it on specificity — so the filter would set
   hidden and nothing would disappear. This puts the filter back in charge. */
.gallery__item[hidden]{ display: none; }

/* Filter transition — matching tiles replay a short rise-and-settle, offset
   by their position in the filtered set so the new selection assembles
   rather than snapping into place. site.js sets --fi and re-triggers the
   animation on each filter change. */
@keyframes galleryIn{
  from{ opacity: 0; transform: translateY(16px) scale(0.96); }
  to  { opacity: 1; transform: none; }
}
.gallery__item.is-entering{
  animation: galleryIn 0.55s var(--ease) both;
  animation-delay: calc(var(--fi, 0) * 26ms);
}
@media (prefers-reduced-motion: reduce){
  .gallery__item.is-entering{ animation: none; }
}
.gallery__item img{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gallery__item::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 55%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-io);
}
.gallery__item:hover img{ transform: scale(1.06); }
.gallery__item:hover::after{ opacity: 1; }
.gallery__tag{
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-3) var(--ease-io), transform var(--dur-2) var(--ease);
}
.gallery__item:hover .gallery__tag{ opacity: 1; transform: none; }

.gallery__empty{
  display: none;
  padding: var(--s-16) 0;
  text-align: center;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   VIDEOS — click-to-load facades
   Nine live iframes would cost several megabytes and a dozen third-party
   requests on load, so each card is a poster until the visitor asks for it.
   -------------------------------------------------------------------------- */
.videos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s-6);
}
.video-card{ display: flex; flex-direction: column; }

.video-facade{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  display: block;
}
.video-facade img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity var(--dur-3) var(--ease-io);
}
.video-facade::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.05) 60%);
  transition: background var(--dur-3) var(--ease-io);
}
.video-facade:hover img{ transform: scale(1.05); }

.video-play{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.video-play span{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--glow);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.video-play svg{ width: 22px; height: 22px; margin-left: 3px; }
.video-facade:hover .video-play span{ transform: scale(1.08); box-shadow: var(--glow-hover); }

/* The iframe that replaces the facade inherits its shape. */
.videos iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-lg);
  display: block;
  background: #000;
}

.video-card__meta{ padding-top: var(--s-5); }
.video-card__meta h3{ font-size: 1.0625rem; letter-spacing: var(--tracking-tight); }
.video-card__meta p{ margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-4); }

/* --------------------------------------------------------------------------
   CTA BAND — inner-page closing call to action

   Stacked head-over-buttons left a wide dead zone down the right of the
   section. Setting the heading and the actions side by side fills the band,
   puts the buttons on the eye's natural exit path, and lets the copy keep a
   sane measure instead of stretching to the container width.
   -------------------------------------------------------------------------- */
.cta-band{
  display: grid;
  grid-template-columns: 1.25fr auto;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.cta-band .cta-head{ max-width: 62ch; }
.cta-band .cta-actions{
  margin-top: 0;
  flex-direction: column;
  align-items: stretch;
  min-width: min(300px, 100%);
}
.cta-band .cta-actions .btn{ width: 100%; }

@media (max-width: 860px){
  .cta-band{ grid-template-columns: 1fr; gap: var(--s-8); }
  .cta-band .cta-head{ max-width: none; }
  .cta-band .cta-actions{ flex-direction: row; flex-wrap: wrap; }
  .cta-band .cta-actions .btn{ width: auto; flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}
@media (max-width: 940px){ .contact-grid{ grid-template-columns: 1fr; } }

.form-card{
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; gap: 0; } }

/* Contact detail list */
.detail-list{ border-top: 1px solid var(--line); }
.detail{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.detail__icon{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--brand-wash);
  color: var(--brand-ink);
}
.detail__icon svg{ width: 18px; height: 18px; }
.detail__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-2);
}
.detail a, .detail span.detail__value{
  display: block;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-2);
}
.detail a:hover{ color: var(--brand-ink); }
.detail address{ font-style: normal; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-3); }

/* Quick-action buttons above the details */
.quick-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}
@media (max-width: 420px){ .quick-actions{ grid-template-columns: 1fr; } }