.portfolio-page { min-width: 1440px; color: #3e3131; background: #fff; }
.portfolio-page * { box-sizing: border-box; }
.portfolio-frame { width: 100%; min-width: 1440px; margin: 0; overflow: hidden; }
.portfolio-header { position: relative; z-index: 20; width: 100%; height: 145px; min-width: 1440px; }
.portfolio-header .top-logo { left: 90px; }
.portfolio-header .top-nav { left: 636px; }
.portfolio-page main h2 { margin: 0; color: #c90606; font-size: 45px; line-height: 1.1; text-align: center; }
.portfolio-page a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mesh-section { background: #ffe3e5 url("../assets/portfolio/Mesh gradient 2-01.webp") center/cover no-repeat; }
.portfolio-hero-strip { background: #ffe3e5 url("../assets/portfolio/Mesh gradient 2-01.webp") center/cover no-repeat; }
.portfolio-intro { display: grid; grid-template-columns: 521px 1fr; column-gap: 66px; padding: 76px 114px 72px; min-height: 995px; }
.intro-media { width: 521px; height: 299px; margin-top: 0; overflow: hidden; border-radius: 20px; background: #fff; }
.intro-media iframe { width: 100%; height: 100%; border: 0; }
.intro-lead h1 { width: 610px; margin: -7px 0 20px; color: #c90606; font-size: 51px; line-height: 1.05; }
.intro-lead p, .intro-story p { margin: 0; font-size: 25px; line-height: 1.22; }
.intro-lead p, .intro-story p { line-height: 1.55; }
.intro-story { grid-column: 1 / -1; align-self: start; padding: 38px 7px 0; }
.intro-story p + p { margin-top: 22px; }
.intro-story a {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-color: var(--primary);
}
.intro-story a:hover,
.intro-story a:focus-visible { text-decoration-thickness: 2px; }
.services-section { min-height: 1083px; padding: 90px 120px 66px; }
.section-lede { margin: 28px 0 66px; font-size: 25px; line-height: 1.55; text-align: left; }
.service-grid { display: grid; grid-template-columns: 401px 445px; justify-content: space-between; padding: 0 13px; }
.service-card { position: relative; min-height: 748px; overflow: hidden; padding: 20px 31px 84px; border: 2px solid #c9bebe; border-radius: 20px; background: #eaeaea; box-shadow: 0 18px 22px -14px rgb(0 0 0 / 30%); }
.service-card h3 { margin: 0 -31px; padding: 0 31px 19px; font-size: 25px; line-height: 1.25; text-align: center; }
.service-card h3 {
  margin-top: -20px;
  padding-top: 20px;
  background: #ff8c8c;
}
.service-card .price { margin: 0 -31px 18px; padding: 15px; background: #f5f5f5; color: #c90606; font-size: 25px; font-weight: 700; text-align: center; }
.service-card ul { margin: 3px 0 0; padding-left: 29px; font-size: 20px; line-height: 1.78; }
.service-card.standalone ul { margin-top: 28px; }
.service-card li { font-weight: 500; }
.service-info-icon { display: inline-block; width: 16px; height: 16px; margin-left: 3px; vertical-align: -1px; }
.service-info { position: relative; display: inline-flex; align-items: center; outline: none; }
.service-tooltip { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 11px); width: 220px; padding: 12px 15px; border-radius: 6px; background: #fff; box-shadow: 0 5px 16px rgb(0 0 0 / 22%); color: #3e3131; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity 150ms ease, transform 150ms ease; }
.service-tooltip::after { position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: 7px solid transparent; border-top-color: #fff; content: ""; transform: translateX(-50%); }
.service-info:hover .service-tooltip,
.service-info:focus-visible .service-tooltip { opacity: 1; transform: translate(-50%, 0); }
.service-card strong { color: #c90606; }
.portfolio-button { display: inline-flex; min-width: 210px; height: 52px; align-items: center; justify-content: center; border-radius: 10px; background: #ff4242; color: #fff; font-size: 21px; font-weight: 600; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.portfolio-button:hover, .portfolio-button:focus-visible { background: #d91f1f; transform: translateY(-2px); }

.audit-field select { width: 415px; height: 64px; border: 0; padding: 0 18px; background: #fff; color: var(--text-1); font: 400 20px/1.2 "Roboto", Arial, sans-serif; outline: none; }
.audit-field select:focus { box-shadow: 0 0 0 3px rgba(214, 239, 255, 0.62); }
.audit-field.is-invalid select { box-shadow: inset 0 0 0 3px var(--error); }
.inquiry-dialog--standalone, .inquiry-form--standalone { height: 750px; }
.inquiry-form--standalone { padding-top: 46px; }
.inquiry-form--standalone .audit-field { margin-top: 27px; }
.service-card > .portfolio-button { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); }
.service-card > .portfolio-button:hover, .service-card > .portfolio-button:focus-visible { transform: translate(-50%, -2px); }
.tech-section { min-height: 1490px; padding: 60px 120px 80px; background: #f6f6f6; }
.tech-grid { display: grid; grid-template-columns: 487px 487px; grid-auto-flow: column; grid-template-rows: auto auto auto; gap: 42px 88px; margin-top: 66px; justify-content: center; align-items: start; }
.tech-card { padding: 26px 40px 28px; border-radius: 19px; background: #fff; box-shadow: 0 28px 45px rgb(0 0 0 / 15%); transition: transform 180ms ease, box-shadow 180ms ease; }
.tech-card:hover,
.tech-card:focus-within { transform: translateY(-6px) scale(1.01); box-shadow: 0 34px 55px rgb(0 0 0 / 20%); }
@media (prefers-reduced-motion: reduce) {
  .tech-card { transition: none; }
  .tech-card:hover,
  .tech-card:focus-within { transform: none; }
}
.tech-card:nth-child(1), .tech-card:nth-child(2), .tech-card:nth-child(3) { grid-column: 1; }
.tech-card:nth-child(4), .tech-card:nth-child(5), .tech-card:nth-child(6) { grid-column: 2; }
.tech-card h3 { margin: 0 0 22px; font-size: 30px; line-height: 1.1; }
.tool { display: flex; min-height: 48px; align-items: center; gap: 21px; font-size: 22px; font-weight: 500; }
.tool + .tool { margin-top: 13px; }
.tool img { width: 48px; height: 48px; object-fit: contain; }
.tool img.wide-logo { width: 92px; object-fit: contain; }
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool-row .tool { gap: 11px; }
.short { min-height: 186px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.case-section { min-height: 0; padding: 62px 104px 96px; }
.case-carousel-window { overflow: visible; }
.case-grid { display: grid; grid-template-columns: 581px 581px; gap: 47px 69px; margin-top: 55px; }
.case-slide { display: contents; }
.case-carousel-nav { display: none; }
.case-card { display: flex; min-height: 466px; flex-direction: column; align-items: flex-start; padding: 22px 14px 28px; border-radius: 15px; background: #f9f9f9; box-shadow: 0 18px 55px rgb(0 0 0 / 18%); }
.case-card > img { display: block; width: 220px; height: 55px; margin: 0 auto 15px; object-fit: contain; }
.case-card p { margin: 0 0 24px; font-size: 22px; line-height: 1.3; }
.case-card .result { margin-top: auto; font-size: 24px; font-weight: 600; }
.case-card .result strong { color: #c90606; }
.case-card .portfolio-button { margin: 0 auto; }
.portfolio-testimonials { min-height: 918px; padding: 75px 119px 58px; }
.testimonial-carousel-window { overflow: hidden; }
.testimonial-track { display: flex; width: 100%; gap: 57px; will-change: transform; }
.testimonial-track.is-animating { transition: transform 600ms ease-in-out; }
.testimonial-pair { display: grid; width: 100%; min-height: 600px; flex: 0 0 100%; grid-template-columns: 576px 576px; align-items: start; gap: 57px; margin-top: 80px; }
.testimonial-pair .quote-card:only-child { grid-column: 1 / -1; width: 576px; justify-self: center; }
.quote-card { min-height: 492px; padding: 32px 35px 35px; border-radius: 20px; background: #ebeff2; box-shadow: 0 19px 45px rgb(0 0 0 / 12%); }
.quote-card header { display: flex; align-items: center; gap: 24px; }
.quote-card header img { width: 128px; height: 128px; flex: 0 0 128px; border-radius: 50%; object-fit: cover; }
.quote-card h3 { margin: 0 0 7px; color: #c90606; font-size: 22px; line-height: 1.1; }
.quote-card header p { margin: 0; font-size: 20px; line-height: 1.2; }
.quote-card blockquote { margin: 28px 0 0; font-size: 22px; line-height: 1.35; }
.carousel-dots { display: flex; justify-content: center; gap: 20px; margin-top: 78px; }
.portfolio-testimonials > .carousel-dots { width: 1209px; margin: 32px 0 0; }
.carousel-dots button, .carousel-dots i { width: 19px; height: 19px; border: 0; border-radius: 50%; background: #99adae; padding: 0; cursor: pointer; }
.carousel-dots .is-active, .carousel-dots i:first-child { background: #d51717; }
.cert-section { min-height: 727px; padding: 67px 136px 35px; background-color: #fffdf7; background-image: radial-gradient(#eedfc9 0.8px, transparent 0.8px); background-size: 5px 5px; }
.certificate-carousel-window { overflow: hidden; }
.certificate-track { display: flex; width: 100%; gap: 46px; will-change: transform; }
.certificate-track.is-animating { transition: transform 600ms ease-in-out; }
.certificate-row { display: flex; width: 100%; min-height: 330px; flex: 0 0 100%; align-items: flex-start; justify-content: center; gap: 46px; margin-top: 62px; }
.certificate-row figure { width: 390px; max-width: calc((100% - 138px) / 4); margin: 0; }
.certificate-row figure > a { display: block; color: inherit; text-decoration: none; }
.certificate-row figure > div, .certificate-row figure > a > div { border: 9px solid #f6aa3e; background: white; }
.certificate-row img { display: block; width: 100%; height: auto; }
.certificate-row figcaption { margin-top: 16px; font-size: 22px; font-weight: 500; line-height: 1.25; }
.cert-section .carousel-dots { width: 100%; margin-top: 44px; }
.certificate-mobile-dots { display: none; }
.portfolio-page .footer { width: 100%; min-width: 1440px; }
.portfolio-page .footer-blurb { line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-track.is-animating,
  .certificate-track.is-animating,
  .case-grid.is-animating { transition: none; }
}
@media (max-width: 767px) {
  .audit-field select { width: 100%; height: 48px; font-size: 16px; }
  .inquiry-dialog--standalone { height: auto; }
  .inquiry-form--standalone { height: auto; padding-top: 50px; }
  .inquiry-form--standalone .audit-field { margin-top: 24px; }
  .portfolio-page { min-width: 0; }
  .portfolio-frame { width: 100%; min-width: 0; }
  .portfolio-header { height: 60px; min-width: 0; }
  .portfolio-header .top-logo { left: 29px; top: 15px; width: 163px; height: 28px; }
  .portfolio-header .nav-toggle { right: 41px; top: 17px; }
  .portfolio-header .top-nav { left: auto; right: 18px; top: 56px; background: #f6f6f6; }

  .portfolio-intro { display: flex; min-height: 0; flex-direction: column; padding: 10px 20px 48px; }
  .intro-lead { display: contents; }
  .intro-lead h1 { order: 1; width: 100%; margin: 0; font-size: clamp(42px, 11.8vw, 50.7px); line-height: 1.02; }
  .intro-media { order: 2; width: calc(100% - 36px); height: auto; margin: 24px auto 0; aspect-ratio: 354 / 203; border-radius: 5px; }
  .intro-lead p { order: 3; margin: 42px 5px 0; }
  .intro-story { order: 4; padding: 0 5px; }
  .intro-lead p, .intro-story p { font-size: 16px; line-height: 1.55; }
  .intro-story p { margin-top: 22px; }

  .service-grid, .tech-grid, .case-grid, .testimonial-pair { display: block; }
  .testimonial-pair { min-height: 0; }
  .portfolio-testimonials > .carousel-dots { width: 100%; }
  .testimonial-pair .quote-card:only-child { width: 100%; }

  .services-section, .tech-section, .case-section, .portfolio-testimonials, .cert-section { min-height: 0; }
  .portfolio-page main h2 { font-size: clamp(34px, 9.3vw, 40px); line-height: 1.12; }

  .services-section { padding: 25px 16px 54px; }
  .portfolio-page .services-section h2 { text-align: left; }
  .section-lede { margin: 24px 0 20px; font-size: 16px; font-weight: 500; line-height: 1.55; }
  .service-grid { padding: 0; }
  .service-card { width: min(317px, 100%); min-height: 0; margin: 26px auto 0; padding: 20px 24px 72px; border: 2px solid #c9bebe; border-radius: 20px; }
  .service-card h3 { margin-right: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; font-size: 16px; }
  .service-card .price { margin-right: -24px; margin-left: -24px; font-size: 16px; }
  .service-card ul, .service-card.standalone ul { margin-top: 8px; padding-left: 24px; font-size: 14px; line-height: 2.02; }
  .service-card > .portfolio-button { bottom: 20px; width: 208px; min-width: 0; height: 40px; border-radius: 10px; font-size: 14px; }
  .service-tooltip { left: auto; right: -20px; width: 205px; transform: translateY(5px); }
  .service-tooltip::after { right: 18px; left: auto; transform: none; }
  .service-info:hover .service-tooltip,
  .service-info:focus-visible .service-tooltip { transform: translateY(0); }

  .tech-section { padding: 47px 25px 60px; }
  .tech-section h2 { text-align: left; }
  .tech-grid { margin-top: 30px; }
  .tech-card { width: 100%; min-height: 0; margin: 34px 0 0; padding: 22px 24px 26px; border-radius: 15px; }
  .tech-card:first-child { margin-top: 0; }
  .tech-card:nth-child(n) { grid-column: auto; }
  .tech-card h3 { margin-bottom: 18px; font-size: 30px; }
  .tool { min-height: 42px; gap: 14px; font-size: 14px; }
  .tool + .tool { margin-top: 12px; }
  .tool img { width: 40px; height: 40px; }
  .tool-row { display: block; }

  .case-section { padding: 30px 35px 46px; }
  .case-section h2 { text-align: center; }
  .case-carousel-window { width: calc(100% + 32px); margin: -16px; overflow: hidden; padding: 16px; }
  .case-grid { display: flex; width: 100%; gap: 32px; margin-top: 18px; overflow: visible; touch-action: pan-y; will-change: transform; }
  .case-grid.is-animating { transition: transform 480ms cubic-bezier(.22, .61, .36, 1); }
  .case-slide { display: block; width: 100%; flex: 0 0 100%; padding: 0 2px; }
  .case-card { width: 100%; min-height: 330px; margin: 28px 0 0; padding: 15px 15px 20px; box-shadow: 0 10px 22px rgb(0 0 0 / 12%); }
  .case-card:first-child { margin-top: 0; }
  .case-card > img { width: 220px; height: 35px; margin-bottom: 20px; }
  .case-card p { margin-bottom: 24px; font-size: 13.33px; line-height: 1.1; }
  .case-card .result { font-size: 13.33px; }
  .case-card .portfolio-button { min-width: 124px; height: 30px; border-radius: 8px; font-size: 12px; }
  .case-carousel-nav { display: flex; width: 100%; justify-content: center; margin-top: 30px; }

  .portfolio-testimonials { padding: 31px 35px 48px; }
  .portfolio-testimonials h2 { text-align: left; }
  .testimonial-carousel-window { width: calc(100% + 32px); margin: -16px; overflow: hidden; padding: 16px; }
  .testimonial-track { display: flex; width: 100%; align-items: stretch; gap: 32px; touch-action: pan-y; will-change: transform; }
  .testimonial-track.is-animating { transition: transform 480ms ease-in-out; }
  .testimonial-pair { width: 100%; min-height: 0; flex: 0 0 100%; margin-top: 30px; }
  .quote-card { width: 100%; min-height: 329px; margin-top: 28px; padding: 15px; border-radius: 10px; box-shadow: 0 8px 20px rgb(0 0 0 / 14%); }
  .quote-card:first-child { margin-top: 0; }
  .quote-card header { gap: 13px; }
  .quote-card header img { width: 93px; height: 93px; flex-basis: 93px; }
  .quote-card h3 { font-size: 13.33px; }
  .quote-card header p, .quote-card blockquote { font-size: 13.33px; line-height: 1.12; }
  .quote-card blockquote { margin-top: 22px; }
  .portfolio-testimonials > .carousel-dots { margin-top: 28px; }

  .cert-section { padding: 31px 46px 48px; }
  .certificate-carousel-window { width: calc(100% + 32px); margin: -16px; overflow: hidden; padding: 16px; }
  .certificate-track { display: flex; width: 100%; align-items: stretch; gap: 32px; touch-action: pan-y; will-change: transform; }
  .certificate-track.is-animating { transition: transform 480ms ease-in-out; }
  .certificate-row { display: contents; }
  .certificate-row[hidden] { display: none; }
  .certificate-row figure { width: 100%; max-width: none; flex: 0 0 100%; margin-top: 38px; }
  .certificate-row figcaption { margin-top: 12px; font-size: 16px; line-height: 1.18; }
  .cert-section .carousel-dots { width: 100%; }
  .certificate-desktop-dots { display: none; }
  .certificate-mobile-dots { display: flex; gap: 12px; }
  .certificate-mobile-dots button { width: 14px; height: 14px; }
  .portfolio-page .footer { width: 100%; min-width: 0; }
}