/* FastCAD public page (fastcad.aspx): page-specific layout on top of assets/css2025/style.css.
   Every rule is scoped to .new-css and prefixed fc- so nothing here leaks into other pages. */

/* ---- hero ------------------------------------------------------------ */
.new-css main.fc-hero {
  background: radial-gradient(60% 70% at 85% 15%, #0d7a52 0%, rgba(0, 61, 34, 0) 65%), #003d22;
}

.new-css main.fc-hero::before {
  background: linear-gradient(rgba(0, 38, 21, 0) 35%, rgba(0, 38, 21, 0.92));
}

.new-css main.fc-hero .content {
  max-width: 62rem;
  z-index: 2;
}

.new-css main.fc-hero .fc-hero-logo {
  height: 6.4rem;
  width: auto;
  max-width: 100%;
  align-self: flex-start;   /* the hero content is a flex column: without this the image is stretched to the column width */
  object-fit: contain;
}

.new-css main.fc-hero .fc-eyebrow {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8fe0c2;
  font-weight: 500;
}

/* the brand strapline sits under the logo, as on the FastCAD marketing graphics */
.new-css main.fc-hero .fc-tagline {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
  margin-top: -0.4rem;
  color: #c9f0e0;
}

/* the logo is the visual headline, so the H1 is a smaller descriptive sentence rather than the brand name again */
.new-css main.fc-hero .content h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  font-weight: 400;
}

/* The shot fills the hero's height on wide screens: the box runs from 8rem under the fixed
   header (itself 8rem tall) to the content baseline (8rem), so the gaps above and below the
   image match. It starts clear of the text column, and the image grows to the biggest size
   that fits the box while keeping its own proportions. */
.new-css main.fc-hero .fc-hero-shot {
  position: absolute;
  top: 16rem;
  right: 5rem;
  bottom: 8rem;
  left: max(55%, 70rem);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.new-css main.fc-hero .fc-hero-shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 2rem;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* The site's main panels stretch to the full viewport height; on a tall monitor that leaves
   the FastCAD hero mostly empty, so cap it at the shared 80rem design height instead. */
@media (min-width: 961px) {
  .new-css main.fc-hero {
    min-height: 0;
    height: min(80rem, 100dvh);
  }
}

/* The site's catch-all rule paints every element in the dark text colour, which leaves the
   play and arrow icons dark inside white-text buttons; let them take the button's colour. */
.new-css main.fc-hero .cta button i,
.new-css .fc-cta-buttons button i {
  color: inherit;
}

/* ---- shared bits ----------------------------------------------------- */
.new-css .fc-kicker {
  display: block;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.new-css .fc-lead {
  max-width: 90rem;
  margin: -2rem auto 5rem;
  text-align: center;
  font-size: 1.9rem;
}

.new-css .fc-intro-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- intro stats ----------------------------------------------------- */
.new-css .fc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 6rem;
}

.new-css .fc-stat {
  border: var(--border);
  border-radius: 2rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.new-css .fc-stat strong {
  font-size: 4.4rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 500;
}

.new-css .fc-stat span {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub-text);
}

/* ---- how it works ---------------------------------------------------- */
.new-css section.fc-how {
  background: #f4f7f5;
}

.new-css .fc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.new-css .fc-step {
  position: relative;
  background: white;
  border: var(--lite-border);
  border-radius: 2rem;
  box-shadow: rgba(149, 157, 165, 0.1) 0 8px 24px;
  padding: 3.5rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.new-css .fc-step-num {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 700;
  color: #003d22;
  opacity: 0.08;
}

.new-css .fc-step .ico {
  background: var(--primary);
  border: none;
}

.new-css .fc-step .ico i {
  color: white;
}

.new-css .fc-step h3 {
  font-size: 2.4rem;
  text-transform: none;
  line-height: 1.15;
}

.new-css .fc-step p {
  line-height: 1.5;
}

/* ---- demo video ------------------------------------------------------ */
.new-css section.fc-video {
  background: #003d22;
}

.new-css section.fc-video :is(h2, p) {
  color: white;
}

.new-css section.fc-video .fc-kicker {
  color: #8fe0c2;
}

.new-css .fc-video-frame {
  max-width: 112rem;
  margin: 0 auto;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  background: #000;
}

.new-css .fc-video-frame video {
  display: block;
  width: 100%;
  height: auto;
}

.new-css .fc-video-caption {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1.5rem;
  opacity: 0.8;
}

/* ---- benefits -------------------------------------------------------- */
.new-css .fc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.new-css .fc-benefit {
  border: var(--border);
  border-radius: 2rem;
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: 0.3s;
}

.new-css .fc-benefit:hover {
  border-color: var(--primary);
  box-shadow: rgba(0, 164, 120, 0.12) 0 12px 32px;
}

.new-css .fc-benefit h3 {
  font-size: 2.2rem;
  text-transform: none;
  line-height: 1.2;
}

.new-css .fc-benefit p {
  line-height: 1.55;
}

/* ---- overlay story (shares .grid-2.overlay with casting-services) ---- */
.new-css .fc-story .grid-2.overlay .frame img.fc-fit-top {
  object-position: center 40%;
}

/* the CAD-to-cast rings photo is shown whole rather than cropped to the square frame, with extra room
   on the right so the green panel's 5rem overlap never covers the sketch ring (marketing feedback) */
.new-css .fc-story .grid-2.overlay .frame img.fc-fit-whole {
  object-fit: contain;
  background: #fff;
  padding: 2rem 9rem 2rem 2rem;
}

.new-css .fc-story .grid-2.overlay .content ul {
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.new-css .fc-story .grid-2.overlay .content li {
  color: white;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
}

/* ---- testimonials ---------------------------------------------------- */
.new-css section.fc-quotes {
  background: #eef5f1;
}

.new-css .fc-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.new-css .fc-quote {
  background: white;
  border-radius: 2rem;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: var(--lite-border);
  box-shadow: rgba(149, 157, 165, 0.1) 0 8px 24px;
  margin: 0;
}

.new-css .fc-quote i {
  font-size: 4rem;
  color: var(--primary);
  line-height: 1;
}

.new-css .fc-quote blockquote {
  margin: 0;
}

.new-css .fc-quote blockquote p {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 300;
}

.new-css .fc-quote figcaption {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-weight: 500;
}

/* ---- faq ------------------------------------------------------------- */
.new-css .fc-faq-list {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: var(--border);
}

.new-css .fc-faq-item {
  border-bottom: var(--border);
}

.new-css .fc-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 0;
  font-size: 2rem;
  font-weight: 500;
}

.new-css .fc-faq-item summary::-webkit-details-marker {
  display: none;
}

.new-css .fc-faq-item summary::after {
  content: "+";
  flex: none;
  width: 4rem;
  height: 4rem;
  border: var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--primary);
  transition: 0.3s;
}

.new-css .fc-faq-item[open] summary::after {
  content: "\2013";
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.new-css .fc-faq-a {
  padding: 0 0 2.5rem;
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sub-text);
  max-width: 85rem;
}

.new-css .fc-faq-a a {
  color: var(--primary);
  text-decoration: underline;
}

/* ---- final call to action -------------------------------------------- */
.new-css .fc-cta-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.new-css section.cta-bg .fc-cta-buttons button.empty {
  background: transparent;
  color: white;
  border: 1px solid white;
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .new-css .fc-steps,
  .new-css .fc-stats,
  .new-css .fc-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .new-css main.fc-hero .fc-hero-shot {
    display: none;
  }
}

@media (max-width: 660px) {
  .new-css .fc-steps,
  .new-css .fc-stats,
  .new-css .fc-benefits,
  .new-css .fc-quote-grid {
    grid-template-columns: 1fr;
  }

  .new-css main.fc-hero .fc-hero-logo {
    height: 5rem;
  }

  .new-css main.fc-hero .fc-tagline {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
  }

  .new-css main.fc-hero .content h1 {
    font-size: 2.3rem;
  }

  .new-css .fc-lead {
    margin-top: 0;
  }

  /* the panel no longer overlaps the frame on small screens, so even padding is enough */
  .new-css .fc-story .grid-2.overlay .frame img.fc-fit-whole {
    padding: 1.5rem;
  }

  .new-css .fc-quote {
    padding: 3rem;
  }

  .new-css .fc-faq-item summary {
    font-size: 1.8rem;
  }
}