/* 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;
}

.new-css main.fc-hero .fc-hero-shot {
  position: absolute;
  right: 5rem;
  bottom: 8rem;
  width: min(38%, 56rem);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.new-css main.fc-hero .fc-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 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;
  }
}