/*! Prontastic theme styles — ported from the Flutter source via the React rebuild.
    Tokens come from lib/constants/app_colors.dart + lib/themes/themes.dart. */

/* ============================= global.css ============================= */
/* ------------------------------------------------------------------
   Design tokens ported 1:1 from the Flutter source:
   lib/constants/app_colors.dart + lib/themes/themes.dart (darkTheme)
   ------------------------------------------------------------------ */
:root {
  --black: #000000;
  --white: #ffffff;
  --bg-color: #e9e9e9; /* AppColors.bgColor - body copy colour on dark */
  --lime-green: #9dff50; /* AppColors.limeGreen - single accent */
  --dark-charcoal: #333333; /* social icon circles */
  --hover-text: #9e9e9e; /* Colors.grey on hover (HoverableController) */
  --hover-accent: #4caf50; /* Colors.green on hover (HoverableController) */

  --font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Flutter padded the page with size.width * 0.05 */
  --page-pad-x: 5vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* the fixed header must not cover anchored sections */
  scroll-padding-top: 2vh;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


.contact__address{
    margin: 20px 00;
}

img,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--lime-green);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lime-green);
  color: var(--black);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------
   Shared layout helpers
   ------------------------------------------------------------------ */
.page-pad {
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   Buttons
   Outlined "Get in touch" pill: BorderRadius.circular(48), white border,
   italic Montserrat 22 / w400 + arrow.png at 15px (home_page.dart).
   ------------------------------------------------------------------ */
.pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  border: 1px solid var(--white);
  border-radius: 48px;
  padding: 1vh 1vw;
  background: transparent;
  color: var(--white);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}
.pill-outline img {
  width: 15px;
  height: auto;
  transition: transform 0.25s ease;
}
.pill-outline:hover,
.pill-outline:focus-visible {
  background: var(--white);
  color: var(--black);
}
.pill-outline:hover img,
.pill-outline:focus-visible img {
  transform: translateX(4px);
}

/* Learn more button: Color(0xFF9DFF50), radius 30, 18px w500 black
   (widget/containe.dart -> learnmorebtn) */
.btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime-green);
  border: 1px solid var(--lime-green);
  border-radius: 30px;
  color: var(--black);
  font-size: 18px;
  font-weight: 500;
  padding: 22px 33px;
  line-height: 1;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.btn-learn-more svg {
  transition: transform 0.25s ease;
}
.btn-learn-more:hover,
.btn-learn-more:focus-visible {
  filter: brightness(1.08);
}
.btn-learn-more:hover svg,
.btn-learn-more:focus-visible svg {
  transform: translateX(5px);
}

/* ------------------------------------------------------------------
   Dividers (widget/app_divider.dart + horizontal_app_divider.dart)
   ------------------------------------------------------------------ */
.rule-h {
  height: 2px;
  background: var(--bg-color);
  border: 0;
  margin: 0;
}
.rule-v {
  width: 2px;
  background: var(--bg-color);
}

/* ------------------------------------------------------------------
   Scroll reveal (IntersectionObserver driven, see hooks/useReveal.js)
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------
   Mobile type scale. The Flutter build branches at 800px
   (isMobile = size.width < 800) - the same breakpoint is used here.
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .pill-outline {
    font-size: 14px;
    gap: 2vw;
    padding: 1vh 3vw;
  }
  .pill-outline img {
    width: 13px;
  }
  .btn-learn-more {
    font-size: 15px;
    padding: 14px 22px;
  }
}

/* ============================= Navbar.css ============================= */
/* header_section.dart:
   Container padding = horizontal 7vw / vertical 4vh, black background,
   logo height 7vh, nav items 20px bold with 2vw gaps, then the lime
   "Contact Us" pill (radius 32, padding 32/10, black 18 w600).
   The original header is not sticky - it scrolls with the page. */
.site-header {
  background: var(--black);
  position: relative;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding: 4vh 7vw;
}

.site-header__logo img {
  height: 7vh;
  min-height: 44px;
  width: auto;
  border-radius: 4px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-left: auto;
}

.nav-link {
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  padding: 10px 15px;
  transition: color 0.2s ease;
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--lime-green);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15vw;
  padding: 10px 32px;
  border-radius: 32px;
  background: var(--lime-green);
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  transition: filter 0.2s ease;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  filter: brightness(1.08);
}

.site-header__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
}
.site-header__burger img {
  width: 7vw;
  min-width: 26px;
  height: auto;
}

/* ---------------- Drawer (Flutter Drawer, black, slides from left) -------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
}
.drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 340px);
  background: var(--black);
  display: flex;
  flex-direction: column;
  padding: 4vh 7vw;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 60;
  visibility: hidden;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.drawer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.drawer__logo {
  height: 7vh;
  min-height: 44px;
  width: auto;
  border-radius: 4px;
}
.drawer__close {
  background: none;
  border: 0;
  color: var(--white);
  font-size: 32px;
  line-height: 1;
  padding: 0 4px;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  padding: 15px 0;
}
.nav-link--mobile {
  font-size: 18px;
}

.drawer__cta {
  margin-top: auto;
  margin-bottom: 4vh;
  display: block;
  text-align: center;
  background: var(--lime-green);
  color: var(--black);
  border-radius: 32px;
  padding: 10px 32px;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 800px) {
  .site-header__nav {
    display: none;
  }
  .site-header__burger {
    display: block;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .nav-link {
    font-size: 16px;
    padding: 10px 6px;
  }
  .nav-cta {
    font-size: 15px;
    padding: 9px 20px;
    min-width: 0;
  }
  .site-header__nav {
    gap: 1vw;
  }
}

/* ============================= ServiceRow.css ============================= */
.service-row {
  display: block;
  width: 40vw; /* SizedBox(width: size.width * 0.4) around the Divider */
  margin-bottom: 20px;
}

.service-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 6px;
}

.service-row__label {
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  transition: color 0.2s ease;
}

.service-row__arrow {
  color: var(--white);
  flex: 0 0 auto;
  transition: transform 0.2s ease, color 0.2s ease;
}

.service-row__divider {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: background-color 0.2s ease;
}

.service-row:hover .service-row__label,
.service-row:focus-visible .service-row__label {
  color: var(--hover-text);
}
.service-row:hover .service-row__arrow,
.service-row:focus-visible .service-row__arrow {
  color: var(--hover-accent);
  transform: translateX(-10px);
}
.service-row:hover .service-row__divider,
.service-row:focus-visible .service-row__divider {
  background: var(--hover-accent);
}

@media (max-width: 1024px) {
  .service-row__label {
    font-size: 18px;
  }
}

@media (max-width: 800px) {
  .service-row {
    width: 100%;
  }
  .service-row__label {
    font-size: 4vw;
  }
}

/* ============================= ContactForm.css ============================= */
/* White OutlineInputBorder fields, blue focus ring, lime 30px-radius Submit. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
}

.contact-form__input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  padding: 16px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form__input::placeholder {
  color: var(--white);
  opacity: 0.85;
}
.contact-form__input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: inset 0 0 0 1px #2196f3;
}
.contact-form__input--area {
  resize: vertical;
  min-height: 140px;
}
.contact-form__input.has-error {
  border-color: #f04242;
}

.contact-form__error {
  color: #f04242;
  font-size: 13px;
  margin-top: 6px;
}

.contact-form__submit {
  width: 100%;
  background: var(--lime-green);
  border: 1px solid var(--lime-green);
  border-radius: 30px;
  color: var(--black);
  font-size: 30px;
  font-weight: 500;
  padding: 10px;
  margin-top: 4px;
  transition: filter 0.2s ease;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  filter: brightness(1.08);
}

.contact-form__status {
  color: var(--lime-green);
  font-size: 15px;
  min-height: 20px;
}

@media (max-width: 1024px) {
  .contact-form__submit {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .contact-form__submit {
    font-size: 20px;
  }
}

/* ============================= WhatWeDoColumns.css ============================= */
/* what_wew_do_footer.dart: "What We Do" 3.5vw, column titles 2vw lime,
   list copy 1.2vw white, four columns spaceBetween. */
.wwd__heading {
  font-size: 3.5vw;
  font-weight: 400;
  margin-bottom: 2vh;
}
.wwd__heading--sm {
  font-size: 2.5vw;
  margin-top: 4vh;
}
.wwd--lime .wwd__heading {
  color: var(--lime-green);
}
/* skill_and_tech.dart renders the same block with white section headings. */
.wwd--white .wwd__heading {
  color: var(--white);
}

.wwd__columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3vw;
}

.wwd__column {
  flex: 1 1 0;
  min-width: 0;
}

.wwd__column-title {
  display: flex;
  flex-direction: column;
  font-size: 2vw;
  font-weight: 400;
  color: var(--lime-green);
  line-height: 1.15;
  margin-bottom: 1.5vh;
}

.wwd__list {
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.55;
  color: var(--white);
}

@media (max-width: 800px) {
  .wwd__columns {
    flex-wrap: wrap;
    gap: 4vw 3vw;
  }
  .wwd__column {
    flex: 1 1 42%;
  }
  .wwd__column-title {
    font-size: 2.6vw;
  }
  .wwd__list {
    font-size: 1.8vw;
  }
}

@media (max-width: 600px) {
  .wwd__heading {
    font-size: 28px;
  }
  .wwd__heading--sm {
    font-size: 22px;
  }
  .wwd__column {
    flex: 1 1 100%;
  }
  .wwd__column-title {
    font-size: 18px;
  }
  .wwd__list {
    font-size: 13px;
  }
}

/* ============================= ProjectCarousel.css ============================= */
/* ProjectCard: 285x350, BorderRadius.circular(12), BoxFit.cover. */
.project-carousel {
  display: flex;
  gap: 2vw;
  padding: 2vh 2vw;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-carousel::-webkit-scrollbar {
  display: none;
}

.project-carousel__card {
  flex: 0 0 auto;
  width: 285px;
  height: 350px;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 800px) {
  .project-carousel {
    gap: 10px;
    padding: 2vh 5vw;
  }
  .project-carousel__card {
    width: 200px;
    height: 245px;
  }
}

/* ============================= PartnerGrid.css ============================= */
/* Flutter used a horizontally scrolling GridView with crossAxisCount 5
   (10 on mobile) and white rounded tiles. The Dart childAspectRatio of 0.35
   produced very narrow tiles; the tiles here keep a logo-friendly ratio so
   the marks stay legible, with the same 5-row horizontal scroll. */
.partner-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  gap: 2vh 1.2vw;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.partner-grid__tile {
  background: var(--white);
  border-radius: 12px;
  width: 150px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.partner-grid__tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 800px) {
  .partner-grid {
    grid-template-rows: repeat(10, 1fr);
    gap: 2vh 3vw;
  }
  .partner-grid__tile {
    width: 110px;
    height: 60px;
  }
}

/* ============================= Footer.css ============================= */
/* Footer shell. The What We Do / Cyber Security columns live in
   WhatWeDoColumns.css so the Skill & Tech page can reuse them. */
.site-footer {
  padding-top: 5vh;
  padding-bottom: 8vh;
  background: var(--black);
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  margin-top: 8vh;
}

.footer__copyright {
  font-size: 2vw;
  font-weight: 400;
  color: var(--white);
  max-width: 48vw;
  margin-right: auto;
  line-height: 1.3;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}
.footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-charcoal);
  border-radius: 50%;
  padding: 0.8vw;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.footer__socials a:hover,
.footer__socials a:focus-visible {
  background: var(--lime-green);
  transform: translateY(-2px);
}
.footer__socials img {
  width: 2vw;
  min-width: 16px;
  height: auto;
}

@media (max-width: 800px) {
  .footer__copyright {
    font-size: 2vw;
    max-width: 48vw;
  }
}

@media (max-width: 600px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer__copyright {
    font-size: 13px;
    max-width: 100%;
  }
  .footer__socials {
    gap: 14px;
  }
  .footer__socials a {
    padding: 10px;
  }
  .footer__socials img {
    width: 20px;
  }
}

/* ============================= Hero.css ============================= */
/* Flutter: padding symmetric(horizontal 5vw, vertical 3vh); the desktop
   headline is fixed at 80px, the aside column is 28vw wide. */
.hero {
  padding-top: 3vh;
  padding-bottom: 3vh;
  background: var(--black);
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
}

.hero__title {
  width: 60vw;
  flex: 0 0 auto;
  font-size: 80px;
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 0;
}

.hero__aside {
  width: 28vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__copy {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--white);
  margin-bottom: 5vh;
}

/* Below 1280px the fixed 80px headline no longer fits the 60vw column. */
@media (max-width: 1280px) {
  .hero__title {
    font-size: 62px;
  }
  .hero__copy {
    font-size: 19px;
  }
}

@media (max-width: 1024px) {
  .hero__title {
    font-size: 50px;
  }
  .hero__copy {
    font-size: 17px;
  }
}

/* Mobile branch of the Flutter build */
@media (max-width: 800px) {
  .hero {
    padding-top: 5vw;
    padding-bottom: 8vw;
  }
  .hero__inner {
    flex-direction: column;
    align-items: center;
    width: 80vw;
    margin: 0 auto;
    gap: 3vh;
  }
  .hero__title {
    width: 100%;
    font-size: 32px;
    text-align: center;
  }
  .hero__aside {
    width: 100%;
    align-items: center;
  }
  .hero__copy {
    font-size: 15px;
    text-align: center;
    margin-bottom: 3vh;
  }
}

/* ============================= HeroVideo.css ============================= */
/* Centre(child: AspectRatio(...)) - full-bleed, native aspect ratio kept. */
.hero-video {
  background: var(--black);
  display: flex;
  justify-content: center;
}

.hero-video__player {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--black);
}

/* ============================= Clients.css ============================= */
/* Flutter: Container(color: white) wrapping a Stack of Snow.png (full width,
   BoxFit.cover) with Positioned.fill content padded 5vw / 5vh.
   Heading 53px w500 black; PageView height 14vh, 5 logos per page,
   spaceBetween, animating every 3s over 500ms easeInOut. */
.clients {
  position: relative;
  background: var(--white);
  overflow: hidden;
  /* Snow.png is 7680x2204 (ratio 3.484) - the plate keeps that height while
     the overlay content is free to grow past it on narrower screens. */
  min-height: 28.7vw;
}

.clients__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.clients__overlay {
  position: relative;
  padding: 5vh 5vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.clients__title {
  color: var(--black);
  font-size: 53px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 8vh;
}

.clients__carousel {
  width: 100%;
  height: 14vh;
  overflow: hidden;
}

.clients__track {
  display: flex;
  width: 100%;
  height: 100%;
  /* Curves.easeInOut over 500ms */
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.clients__page {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

.clients__page img {
  max-height: 100%;
  max-width: 16%;
  width: auto;
  object-fit: contain;
}

.clients__dots {
  display: flex;
  gap: 10px;
  margin-top: 2.5vh;
}
.clients__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  transition: background-color 0.25s ease;
}
.clients__dot.is-active {
  background: #000;
}

/* The Snow.png plate is 7680x2204 (ratio 3.48). Below ~1100px the overlay
   content no longer fits inside that band, so the plate becomes a cover
   background and the section takes its own height instead. */
@media (max-width: 1100px) {
  .clients__title {
    font-size: 4.6vw;
    margin-bottom: 4vh;
  }
}

@media (max-width: 800px) {
  .clients {
    min-height: 34vh;
  }
  .clients__overlay {
    padding: 2vh 5vw 3vh;
  }
  .clients__title {
    font-size: 4.5vw;
    margin-bottom: 3vh;
  }
  .clients__carousel {
    height: 8vh;
  }
  .clients__page {
    gap: 3vw;
  }
  .clients__page img {
    max-width: 17%;
  }
}

/* ============================= Services.css ============================= */
/* home_page.dart desktop branch: padding 5vw / 3vh, heading 53px,
   left column 30vw with 10vh gaps, service list offset by 15vw. */
.services {
  padding-top: 3vh;
  padding-bottom: 3vh;
}

.services__title {
  font-size: 53px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 2vh;
}

.services__body {
  display: flex;
  align-items: flex-start;
}

.services__intro {
  width: 30vw;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.services__copy {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 10vh;
}
.services__copy--cta {
  margin-bottom: 10vh;
}

.services__list {
  margin-left: 15vw;
  flex: 1 1 auto;
}

@media (max-width: 1280px) {
  .services__title {
    font-size: 44px;
  }
  .services__copy {
    font-size: 24px;
    margin-bottom: 6vh;
  }
  .services__list {
    margin-left: 8vw;
  }
}

@media (max-width: 1024px) {
  .services__copy {
    font-size: 20px;
  }
  .services__list {
    margin-left: 5vw;
  }
}

@media (max-width: 800px) {
  .services {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }
  .services__title {
    font-size: 4.5vw;
    margin-bottom: 3vh;
  }
  .services__body {
    flex-direction: column;
  }
  .services__intro {
    width: 100%;
  }
  .services__copy {
    font-size: 3.2vw;
    margin-bottom: 3vh;
  }
  .services__list {
    margin-left: 0;
    margin-top: 7vh;
    width: 100%;
  }
}

/* ============================= OurWork.css ============================= */
/* Heading: Padding(left: 70) + 40px w500 in AppColors.bgColor. */
.work {
  padding-top: 30px;
}

.work__title {
  padding-left: 70px;
  font-size: 40px;
  font-weight: 500;
  color: var(--bg-color);
}

.work__case {
  display: flex;
  align-items: center;
}

/* sevice.dart: Padding(left: 138) */
.work__case--railed {
  padding-left: 138px;
  padding-right: 5vw;
}

.work__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--bg-color);
  flex: 0 0 auto;
}
.work__rail-line {
  height: 85vh;
}

.work__connector {
  display: flex;
  align-items: center;
  color: var(--bg-color);
  flex: 0 0 auto;
}
.work__connector-line {
  width: 200px;
}

.work__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.work__meta {
  display: flex;
  align-items: flex-start;
  gap: 2.5vw;
  margin-bottom: 10px;
  color: var(--bg-color);
}

.work__case-name {
  font-size: 40px;
  font-weight: 600;
  color: var(--bg-color);
  flex: 0 0 auto;
  margin: 0;
}

.work__meta-copy {
  font-size: 15px;
  line-height: 1.4;
  width: 20vw;
  color: var(--bg-color);
}
.work__meta-copy--wide {
  width: 30vw;
}

.work__stat {
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-color);
  flex: 0 0 auto;
}

.work__shot {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}
.work__shot--swarail {
  max-width: 70vw;
}

.work__caption {
  font-size: 25px;
  font-weight: 500;
  color: var(--bg-color);
  margin: 0;
}
.work__caption--lg {
  font-size: 35px;
}

.work__caption-copy {
  font-size: 15px;
  line-height: 1.45;
  color: var(--bg-color);
  margin-bottom: 15px;
}
.work__caption-copy--lg {
  font-size: 16px;
  max-width: 60vw;
}

/* containe.dart: Padding(left: 70) with an 860px rule above the block
   and the screenshot boxed at 860x600 (BoxFit.contain). */
.work__case--pms {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 70px;
  padding-right: 5vw;
  margin-top: 25px;
}
.work__pms-rule {
  width: 860px;
  max-width: 100%;
  margin-bottom: 25px;
}
.work__shot--pms {
  max-width: 860px;
  max-height: 600px;
  object-fit: contain;
}

@media (max-width: 1280px) {
  .work__case--railed {
    padding-left: 70px;
  }
  .work__connector-line {
    width: 90px;
  }
  .work__case-name {
    font-size: 32px;
  }
}

@media (max-width: 1024px) {
  .work__rail,
  .work__connector {
    display: none;
  }
  .work__case--railed,
  .work__case--pms {
    padding-left: 5vw;
  }
  .work__shot--swarail {
    max-width: 100%;
  }
}

/* Mobile branch: the rail/connector are dropped and the meta row stacks,
   matching the simplified mobile column in home_page.dart. */
@media (max-width: 800px) {
  .work__title {
    padding-left: 5vw;
    font-size: 3.2vw;
  }
  .work__case--railed,
  .work__case--pms {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .work__meta {
    flex-direction: column;
    gap: 8px;
  }
  .work__case-name {
    font-size: 2.6vw;
  }
  .work__meta-copy,
  .work__meta-copy--wide {
    width: 100%;
    font-size: 1.6vw;
  }
  .work__stat {
    font-size: 2.6vw;
  }
  .work__caption,
  .work__caption--lg {
    font-size: 2.8vw;
  }
  .work__caption-copy,
  .work__caption-copy--lg {
    font-size: 2vw;
    max-width: 100%;
  }
  .work__pms-rule {
    width: 100%;
  }
}

/* Below 480px the vw-driven mobile scale from Flutter becomes unreadable,
   so it is floored at usable pixel sizes. */
@media (max-width: 480px) {
  .work__title {
    font-size: 22px;
  }
  .work__case-name {
    font-size: 22px;
  }
  .work__meta-copy,
  .work__meta-copy--wide {
    font-size: 13px;
  }
  .work__stat {
    font-size: 20px;
  }
  .work__caption,
  .work__caption--lg {
    font-size: 20px;
  }
  .work__caption-copy,
  .work__caption-copy--lg {
    font-size: 14px;
  }
}

/* ============================= OtherProjects.css ============================= */
/* custom_widget.dart: Padding(left: 225), heading 52.45px,
   subtitle 19.94px, cards right-aligned with 20px gutters. */
.other-projects {
  padding-left: 225px;
  padding-right: 5vw;
  margin-top: 5vh;
}

.other-projects__title {
  font-size: 52.45px;
  font-weight: 600;
  color: var(--bg-color);
  line-height: 1.1;
}

.other-projects__subtitle {
  font-size: 19.94px;
  color: var(--bg-color);
  margin-bottom: 10px;
}

.other-projects__grid {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.project-card {
  width: 338.25px;
  max-width: 100%;
}

.project-card__img {
  width: 338.25px;
  height: 454.72px;
  max-width: 100%;
  object-fit: cover;
  margin-bottom: 10px;
}

.project-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--bg-color);
  margin-bottom: 4px;
}

.project-card__copy {
  font-size: 10px;
  line-height: 1.5;
  color: var(--bg-color);
}

.other-projects__cta {
  margin-top: 35px;
}

@media (max-width: 1280px) {
  .other-projects {
    padding-left: 70px;
  }
  .other-projects__title {
    font-size: 42px;
  }
}

@media (max-width: 1024px) {
  .other-projects {
    padding-left: 5vw;
  }
  .other-projects__grid {
    justify-content: flex-start;
  }
  .project-card,
  .project-card__img {
    width: 280px;
    height: auto;
  }
  .project-card__img {
    aspect-ratio: 338 / 455;
  }
}

@media (max-width: 800px) {
  .other-projects {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .other-projects__title {
    font-size: 3.2vw;
  }
  .other-projects__subtitle {
    font-size: 2vw;
  }
  .other-projects__grid {
    justify-content: space-between;
    gap: 3vw;
    flex-wrap: nowrap;
  }
  .project-card {
    width: 25vw;
  }
  .project-card__img {
    width: 100%;
  }
  .project-card__title {
    font-size: 1.6vw;
  }
  .project-card__copy {
    font-size: 1.2vw;
  }
}

@media (max-width: 480px) {
  .other-projects__title {
    font-size: 22px;
  }
  .other-projects__subtitle {
    font-size: 14px;
  }
  .other-projects__grid {
    flex-wrap: wrap;
  }
  .project-card {
    width: 100%;
  }
  .project-card__title {
    font-size: 15px;
  }
  .project-card__copy {
    font-size: 12px;
  }
}

/* ============================= Culture.css ============================= */
.culture {
  display: flex;
  align-items: flex-start;
  padding-left: 70px;
  padding-right: 5vw;
  margin-top: 5vh;
  gap: 80px;
}

.culture__image {
  width: 600px;
  height: 900px;
  max-width: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.culture__body {
  padding-bottom: 100px;
  max-width: 640px;
}

.culture__title {
  font-size: 53.47px;
  font-weight: 500;
  color: var(--bg-color);
  margin-bottom: 20px;
}

.culture__copy {
  font-size: 23px;
  line-height: 1.5;
  color: var(--bg-color);
}

@media (max-width: 1280px) {
  .culture {
    gap: 40px;
  }
  .culture__image {
    width: 440px;
    height: 680px;
  }
  .culture__title {
    font-size: 42px;
  }
  .culture__copy {
    font-size: 19px;
  }
}

@media (max-width: 1024px) {
  .culture {
    padding-left: 5vw;
  }
  .culture__image {
    width: 340px;
    height: 520px;
  }
  .culture__copy {
    font-size: 17px;
  }
}

/* Mobile branch renders the Culture heading + paragraph only. */
@media (max-width: 800px) {
  .culture {
    flex-direction: column;
    padding-left: 5vw;
    padding-right: 5vw;
    gap: 3vh;
  }
  .culture__image {
    display: none;
  }
  .culture__body {
    padding-bottom: 0;
    max-width: 100%;
  }
  .culture__title {
    font-size: 3.2vw;
  }
  .culture__copy {
    font-size: 2vw;
  }
}

@media (max-width: 480px) {
  .culture__title {
    font-size: 22px;
  }
  .culture__copy {
    font-size: 14px;
  }
}

/* ============================= ContactBlock.css ============================= */
/* home_page.dart contact block: padding 5vw / 1vh, eyebrow 4vw,
   a 2:1 Flex that stacks below 800px. */
.contact {
  padding-top: 5vh;
  padding-bottom: 1vh;
}

.contact__eyebrow {
  font-size: 4vw;
  font-weight: 500;
  margin-bottom: 2vh;
}
.contact--lime .contact__eyebrow {
  color: var(--lime-green);
}
.contact--white .contact__eyebrow {
  color: var(--white);
}

.contact__body {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.contact__intro {
  flex: 2 1 0;
  min-width: 0;
}

.contact__headline {
  font-size: 3vw;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 10px;
}

.contact__copy {
  font-size: 2.3vw;
  font-weight: 400;
  color: var(--white);
  max-width: 60vw;
  line-height: 1.3;
}

.contact__form-wrap {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 800px) {
  .contact__body {
    flex-direction: column;
    gap: 20px;
  }
  .contact__eyebrow {
    font-size: 3.2vw;
  }
  .contact__headline {
    font-size: 3vw;
  }
  .contact__copy {
    font-size: 2vw;
    max-width: 100%;
  }
  .contact__form-wrap {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact__eyebrow {
    font-size: 22px;
  }
  .contact__headline {
    font-size: 22px;
  }
  .contact__copy {
    font-size: 15px;
  }
}

/* ============================= Services.css ============================= */
/* Shared full-bleed page hero image used by Services, About and Careers. */
.page-hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Intro copy: 28px on desktop, left padding 30px (services_page.dart). */
.services-page__intro {
  padding: 20px 30px;
}
.services-page__intro h1 {
  font-size: 28px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.35;
  max-width: 46ch;
}

/* Second block sits right-aligned in the original (a 604px spacer column). */
.services-page__detail {
  padding: 20px 20px 20px 604px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.services-page__detail p {
  font-size: 25px;
  color: var(--white);
  line-height: 1.35;
  max-width: 46ch;
}

/* White "OUR SERVICES" panel. */
.services-page__list {
  background: var(--white);
  padding: 20px 30px;
  margin-top: 5vh;
}
.services-page__list h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 30px;
}
.services-page__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 18px 15px;
  font-size: 25px;
  font-weight: 600;
  color: var(--black);
  text-align: left;
}
.services-page__chevron {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.services-page__chevron.is-open {
  transform: rotate(180deg);
}

@media (max-width: 1280px) {
  .services-page__detail {
    padding-left: 40vw;
  }
}

@media (max-width: 1024px) {
  .services-page__intro h1 {
    font-size: 22px;
  }
  .services-page__detail {
    padding-left: 30vw;
  }
  .services-page__detail p {
    font-size: 20px;
  }
}

/* Mobile branch: both copy blocks are half-width, the second right-aligned. */
@media (max-width: 800px) {
  .services-page__intro {
    padding: 20px 5vw 10px;
  }
  .services-page__intro h1 {
    font-size: 2.2vw;
    max-width: 50vw;
  }
  .services-page__detail {
    padding: 20px 5vw;
    align-items: flex-end;
  }
  .services-page__detail p {
    font-size: 2vw;
    max-width: 50vw;
  }
  .services-page__row {
    font-size: 4vw;
  }
  .services-page__list h2 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .services-page__intro h1 {
    font-size: 15px;
    max-width: 100%;
  }
  .services-page__detail {
    align-items: flex-start;
  }
  .services-page__detail p {
    font-size: 14px;
    max-width: 100%;
  }
  .services-page__row {
    font-size: 17px;
    padding: 14px 0;
  }
}

/* ============================= About.css ============================= */
/* aboutus_page.dart desktop branch. Type sizes are the Dart values:
   intro 2.3vw / 2.2vw, right column 25px, team headline 5.2vw,
   "Think you'd be..." 3.8vw, OUR VALUES 2.5vw, values list 70px / 32px,
   closing copy 2.8vw. */
.about__intro {
  padding: 2vh 2vw;
}
.about__intro h1 {
  font-size: 2.3vw;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 2vh;
}
.about__intro p {
  font-size: 2.2vw;
  color: var(--white);
  line-height: 1.3;
}

/* The Dart layout used a 669px spacer column to push this block right. */
.about__detail {
  padding: 20px 20px 20px 669px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 10vh;
}
.about__detail p {
  font-size: 25px;
  color: var(--white);
  line-height: 1.35;
  max-width: 42ch;
}
.about__pill {
  margin-top: 10px;
}

/* 300px band: black -> green -> green -> black, topLeft to bottomRight. */
.about__gradient {
  height: 300px;
  width: 100%;
  margin-top: 10vh;
  background: linear-gradient(
    135deg,
    #000000 0%,
    #1b5e20 30%,
    #388e3c 70%,
    #000000 100%
  );
}

.about__team {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  padding: 2vh 2vw;
}
.about__team-title {
  flex: 1 1 0;
  font-size: 5.2vw;
  font-weight: 400;
  color: var(--white);
  line-height: 1.05;
}
.lime {
  color: var(--lime-green);
}
.about__team-copy {
  flex: 1 1 0;
  align-self: center;
  font-size: 1.3vw;
  color: var(--white);
  line-height: 1.5;
}

.about__careers {
  padding: 3vh 2vw;
}
.about__careers h2 {
  font-size: 3.8vw;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2vh;
}
.about__rule {
  border: 0;
  height: 2px;
  background: rgba(157, 255, 80, 0.6);
  margin-top: 10vh;
}

.about__values {
  padding: 3vw;
}
.about__values-eyebrow {
  font-size: 2.5vw;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5vh;
}
.about__values-body {
  display: flex;
  align-items: flex-start;
  gap: 10vw;
}
.about__values-title {
  font-size: 70px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.05;
  flex: 0 0 auto;
}
.about__values-list {
  flex: 1 1 auto;
  min-width: 0;
}
.about__values-list button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid #424242;
  color: var(--white);
  font-size: 32px;
  font-weight: 400;
  padding: 16px 16px;
  text-align: left;
}
.about__values-icon {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.about__values-icon.is-open {
  transform: rotate(45deg);
}

.about__closing {
  padding: 2vh 2vw;
  margin-top: 6vh;
}
.about__closing p {
  font-size: 2.8vw;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 3vh;
}

@media (max-width: 1280px) {
  .about__detail {
    padding-left: 45vw;
  }
  .about__values-title {
    font-size: 54px;
  }
  .about__values-list button {
    font-size: 26px;
  }
}

@media (max-width: 1024px) {
  .about__detail {
    padding-left: 32vw;
  }
  .about__detail p {
    font-size: 20px;
  }
  .about__values-body {
    gap: 5vw;
  }
  .about__values-title {
    font-size: 40px;
  }
  .about__values-list button {
    font-size: 24px;
  }
}

/* Mobile branch of aboutus_page.dart */
@media (max-width: 800px) {
  .about__intro {
    padding: 20px 5vw 10px;
  }
  .about__intro h1,
  .about__intro p {
    font-size: 2.2vw;
    max-width: 60vw;
  }
  .about__detail {
    padding: 10px 5vw;
    align-items: flex-end;
    margin-top: 3vh;
  }
  .about__detail p {
    font-size: 2vw;
    max-width: 60vw;
  }
  .about__gradient {
    height: 100px;
    margin-top: 3vh;
  }
  .about__team {
    padding: 20px 5vw;
  }
  .about__team-title {
    font-size: 3vw;
  }
  .about__team-copy {
    font-size: 1.3vw;
  }
  .about__careers h2 {
    font-size: 3vw;
  }
  .about__rule {
    margin-top: 4vh;
  }
  .about__values {
    padding: 4vw 5vw;
  }
  .about__values-eyebrow {
    font-size: 3.5vw;
  }
  .about__values-body {
    flex-direction: column;
    gap: 3vh;
  }
  .about__values-title {
    font-size: 3vw;
  }
  .about__values-list {
    width: 100%;
  }
  .about__values-list button {
    font-size: 2.5vw;
    padding: 12px 0;
  }
  .about__closing p {
    font-size: 2.5vw;
  }
}

@media (max-width: 480px) {
  .about__intro h1,
  .about__intro p {
    font-size: 16px;
    max-width: 100%;
  }
  .about__detail {
    align-items: flex-start;
  }
  .about__detail p {
    font-size: 14px;
    max-width: 100%;
  }
  .about__team {
    flex-direction: column;
  }
  .about__team-title {
    font-size: 26px;
  }
  .about__team-copy {
    font-size: 14px;
  }
  .about__careers h2 {
    font-size: 22px;
  }
  .about__values-eyebrow {
    font-size: 18px;
  }
  .about__values-title {
    font-size: 26px;
  }
  .about__values-list button {
    font-size: 17px;
  }
  .about__closing p {
    font-size: 17px;
  }
}

/* ============================= Careers.css ============================= */
/* career_page.dart desktop: headline 90px, body 21.5px, the white
   "Why work at Prontastic?" panel with 90px heading and two-column
   reason rows, then "Open Roles" 90px with a 55vw paragraph. */
.careers__intro {
  padding: 20px 30px;
}
.careers__intro h1 {
  font-size: 90px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 20px;
}
.careers__intro p {
  font-size: 21.5px;
  color: var(--white);
  line-height: 1.4;
  max-width: 62ch;
}

/* Pushed right by a 710px spacer column in the original. */
.careers__aside {
  padding: 20px 20px 20px 710px;
}
.careers__aside p {
  font-size: 21.5px;
  color: var(--white);
  line-height: 1.4;
  max-width: 50ch;
}

.careers__why {
  background: var(--white);
  color: var(--black);
  padding: 16px 16px 40px;
  margin-top: 4vh;
}
.careers__why h2 {
  font-size: 90px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 30px;
}
.careers__reason {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}
.careers__reason:last-child {
  border-bottom: 0;
}
.careers__reason dt {
  flex: 3 1 0;
  display: flex;
  flex-direction: column;
  font-size: 2.8vw;
  font-weight: 700;
  line-height: 1.1;
  color: var(--black);
}
.careers__reason dd {
  flex: 3 1 0;
  margin: 0;
  font-size: 1.5vw;
  line-height: 1.45;
  color: #616161;
}

.careers__roles {
  padding: 30px;
}
.careers__roles-head {
  display: flex;
  align-items: flex-start;
  gap: 4vw;
}
.careers__roles-head h2 {
  font-size: 90px;
  font-weight: 700;
  color: var(--white);
  flex: 0 0 auto;
}
.careers__roles-head p {
  width: 55vw;
  margin-left: auto;
  font-size: 25px;
  color: var(--white);
  line-height: 1.4;
}

.careers__jobs {
  margin-top: 40px;
}
.careers__jobs li {
  border-bottom: 1px solid #424242;
}
.careers__jobs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  font-size: 40px;
  color: var(--white);
  transition: color 0.2s ease;
}
.careers__jobs svg {
  color: #69f0ae; /* Colors.greenAccent */
  transition: transform 0.2s ease;
}
.careers__jobs a:hover,
.careers__jobs a:focus-visible {
  color: var(--lime-green);
}
.careers__jobs a:hover svg,
.careers__jobs a:focus-visible svg {
  transform: translate(3px, -3px);
}

@media (max-width: 1280px) {
  .careers__intro h1,
  .careers__why h2,
  .careers__roles-head h2 {
    font-size: 64px;
  }
  .careers__aside {
    padding-left: 45vw;
  }
}

@media (max-width: 1024px) {
  .careers__intro h1,
  .careers__why h2,
  .careers__roles-head h2 {
    font-size: 48px;
  }
  .careers__aside {
    padding-left: 30vw;
  }
  .careers__roles-head {
    flex-direction: column;
    gap: 20px;
  }
  .careers__roles-head p {
    width: 100%;
    margin-left: 0;
    font-size: 20px;
  }
  .careers__jobs a {
    font-size: 30px;
  }
}

/* Mobile branch */
@media (max-width: 800px) {
  .careers__intro {
    padding: 3vh 4vw;
  }
  .careers__intro h1 {
    font-size: 6vw;
    max-width: 70vw;
  }
  .careers__intro p {
    font-size: 2vw;
    max-width: 65vw;
  }
  .careers__aside {
    padding: 0 4vw 3vh;
    display: flex;
    justify-content: flex-end;
  }
  .careers__aside p {
    font-size: 2vw;
    max-width: 61vw;
  }
  .careers__why {
    padding: 16px;
  }
  .careers__why h2 {
    font-size: 4vw;
  }
  .careers__reason {
    flex-direction: column;
    gap: 8px;
  }
  .careers__reason dt {
    font-size: 3.4vw;
  }
  .careers__reason dd {
    font-size: 2vw;
  }
  .careers__roles {
    padding: 3vh 4vw;
  }
  .careers__roles-head h2 {
    font-size: 6vw;
  }
  .careers__jobs a {
    font-size: 3vw;
    padding: 14px 0;
  }
}

@media (max-width: 480px) {
  .careers__intro h1 {
    font-size: 30px;
    max-width: 100%;
  }
  .careers__intro p,
  .careers__aside p {
    font-size: 14px;
    max-width: 100%;
  }
  .careers__why h2 {
    font-size: 26px;
  }
  .careers__reason dt {
    font-size: 18px;
  }
  .careers__reason dd {
    font-size: 14px;
  }
  .careers__roles-head h2 {
    font-size: 26px;
  }
  .careers__roles-head p {
    font-size: 14px;
  }
  .careers__jobs a {
    font-size: 20px;
  }
}

/* ============================= JobDescription.css ============================= */
/* job_description.dart: title 5vw / subtitle 3.5vw, section headings 2.6vw,
   body 1.5vw, bullets 1.8vw. text_three.dart indents its column by 22vw. */
.jd__head {
  padding: 4vh 4vw;
}
.jd__head h1 {
  font-size: 5vw;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
}
.jd__head p {
  font-size: 3.5vw;
  font-weight: 500;
  color: var(--white);
}

.jd__about {
  padding: 0 4vw 4vh 2.5vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.jd__about h2,
.jd__role h2 {
  font-size: 2.6vw;
  font-weight: 400;
  color: var(--white);
}
.jd__about p,
.jd__role p {
  font-size: 1.5vw;
  color: var(--white);
  line-height: 1.5;
  max-width: 70ch;
}

.jd__rule {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 4vh 4vw;
}

.jd__role {
  padding: 0 4vw 4vh 22vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.jd__role h3 {
  font-size: 2.6vw;
  font-weight: 400;
  color: var(--white);
  margin-top: 1vh;
}

.jd__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jd__bullets li {
  position: relative;
  padding-left: 2vw;
  font-size: 1.8vw;
  color: var(--white);
  line-height: 1.45;
}
.jd__bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: 2vw;
  line-height: 1.2;
}

/* The white "Apply with LinkedIn" placeholder panel from text_three.dart. */
.jd__apply {
  background: var(--white);
  padding: 50px;
  min-height: 60vh;
}
.jd__apply p {
  font-size: 2.6vw;
  color: var(--black);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .jd__role {
    padding-left: 8vw;
  }
}

@media (max-width: 800px) {
  .jd__head {
    padding: 3vh 4vw;
  }
  .jd__about,
  .jd__role {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .jd__apply {
    padding: 24px;
    min-height: 40vh;
  }
}

@media (max-width: 480px) {
  .jd__head h1 {
    font-size: 26px;
  }
  .jd__head p {
    font-size: 16px;
  }
  .jd__about h2,
  .jd__role h2,
  .jd__role h3,
  .jd__apply p {
    font-size: 20px;
  }
  .jd__about p,
  .jd__role p,
  .jd__bullets li {
    font-size: 14px;
  }
  .jd__bullets li {
    padding-left: 18px;
  }
  .jd__bullets li::before {
    font-size: 16px;
  }
}

/* ============================= OurClients.css ============================= */
/* our_clientpage_text_one.dart: left padding 5vw, 80vw wide, 4.5vw w500. */
.clients-page__intro {
  padding: 5vh 5vw 3vh;
}
.clients-page__intro h1 {
  width: 80vw;
  max-width: 100%;
  font-size: 4.5vw;
  font-weight: 500;
  color: var(--white);
  line-height: 1.15;
}

/* "Our Authorized Partners": 3vw w500 white, 80px above the block. */
.clients-page__partners {
  padding-top: 80px;
  padding-bottom: 3vh;
}
.clients-page__partners h2 {
  font-size: 3vw;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4vh;
}

@media (max-width: 800px) {
  .clients-page__intro h1 {
    font-size: 5vw;
    text-align: center;
    width: 100%;
  }
  .clients-page__partners {
    padding-top: 40px;
  }
  .clients-page__partners h2 {
    font-size: 5vw;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .clients-page__intro h1 {
    font-size: 24px;
  }
  .clients-page__partners h2 {
    font-size: 22px;
  }
}

/* ============================= SkillTech.css ============================= */
/* skill_and_tech.dart desktop: headline 65px w600 with 30px left padding,
   copy column 22px offset by 5vw and dropped 100px. */
.skill__hero {
  display: flex;
  align-items: flex-start;
  gap: 5vw;
  padding: 4vh 5vw 2vh 30px;
}

.skill__hero h1 {
  font-size: 65px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  flex: 1;
}

.skill__hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 100px;
  max-width: 46ch;
}
.skill__hero-aside p {
  font-size: 22px;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 8vh;
}

.skill__banner {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;
}

.skill__capabilities {
  padding-top: 3vw;
  padding-bottom: 3vw;
}

@media (max-width: 1280px) {
  .skill__hero h1 {
    font-size: 50px;
  }
  .skill__hero-aside {
    padding-top: 40px;
  }
  .skill__hero-aside p {
    font-size: 19px;
    margin-bottom: 5vh;
  }
}

@media (max-width: 1024px) {
  .skill__hero {
    flex-direction: column;
    gap: 3vh;
    padding-left: 5vw;
  }
  .skill__hero-aside {
    padding-top: 0;
  }
}

/* Mobile branch centres the hero copy. */
@media (max-width: 800px) {
  .skill__hero {
    align-items: center;
    text-align: center;
    padding: 3vw 3vw;
  }
  .skill__hero h1 {
    font-size: 5vw;
  }
  .skill__hero-aside {
    align-items: center;
    max-width: 100%;
  }
  .skill__hero-aside p {
    font-size: 15px;
    margin-bottom: 3vh;
  }
}

@media (max-width: 480px) {
  .skill__hero h1 {
    font-size: 26px;
  }
}

/* ============================= ContactPage.css ============================= */
/* contact_us.dart: title 80px in green, journey line 50px, copy 30px,
   address 30px, 80px gutter before the form. */
.contact-page {
  padding: 30px 3vw 12vh;
}

.contact-page__title {
  font-size: 80px;
  font-weight: 400;
  color: #4caf50; /* Colors.green in the Dart source */
  margin-bottom: 20px;
}

.contact-page__body {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.contact-page__intro {
  flex: 1 1 0;
  min-width: 0;
}

.contact-page__headline {
  font-size: 50px;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.contact-page__copy {
  font-size: 30px;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 20px;
  max-width: 24ch;
}

.contact-page__address {
  font-size: 30px;
  font-style: normal;
  color: var(--white);
  line-height: 1.4;
}
.contact-page__address a:hover {
  color: var(--lime-green);
}

.contact-page__form {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1280px) {
  .contact-page__title {
    font-size: 60px;
  }
  .contact-page__headline {
    font-size: 38px;
  }
  .contact-page__copy,
  .contact-page__address {
    font-size: 22px;
  }
  .contact-page__body {
    gap: 40px;
  }
}

@media (max-width: 800px) {
  .contact-page {
    padding: 20px 5vw 8vh;
  }
  .contact-page__body {
    flex-direction: column;
    gap: 30px;
  }
  .contact-page__title {
    font-size: 5vw;
  }
  .contact-page__headline {
    font-size: 3vw;
  }
  .contact-page__copy,
  .contact-page__address {
    font-size: 2vw;
    max-width: 100%;
  }
  .contact-page__form {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .contact-page__title {
    font-size: 30px;
  }
  .contact-page__headline {
    font-size: 22px;
  }
  .contact-page__copy,
  .contact-page__address {
    font-size: 15px;
  }
}

/* ============================= wordpress-additions.css ============================= */
/* Rules that only exist in the WordPress build: disclosure panels, the
   generic page/blog fallback templates and a few admin-bar niceties. */

.about__values-panel,
.services-page__panel {
  padding: 0 16px 18px;
}
.about__values-panel p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--bg-color);
}
.services-page__panel p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}
.about__values-panel p:empty,
.services-page__panel p:empty {
  display: none;
}

.careers__empty {
  margin-top: 30px;
  font-size: 20px;
  color: var(--white);
}

.jd__editor {
  font-size: 1.5vw;
  color: var(--white);
  line-height: 1.5;
  max-width: 70ch;
}
.jd__editor p {
  margin-bottom: 1em;
}

/* Generic page / archive fallback */
.page-content {
  padding-top: 6vh;
  padding-bottom: 10vh;
  color: var(--white);
}
.page-content__title {
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 3vh;
}
.page-content__body,
.page-content__entry {
  font-size: 18px;
  line-height: 1.6;
  max-width: 70ch;
}
.page-content__body p,
.page-content__entry p {
  margin-bottom: 1em;
}
.page-content__entry h2 {
  font-size: 28px;
  margin-bottom: 0.4em;
}
.page-content a {
  color: var(--lime-green);
}
.page-content a:hover {
  text-decoration: underline;
}

/* The admin bar is fixed at the top for logged-in users. */
.admin-bar .drawer {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .drawer {
    top: 46px;
  }
}

@media (max-width: 480px) {
  .page-content__title {
    font-size: 28px;
  }
  .jd__editor {
    font-size: 14px;
  }
  .about__values-panel p,
  .services-page__panel p {
    font-size: 15px;
  }
}

/* ============================= key-solutions.css ============================= */
/* Key Solutions block on Skill & Tech, styled to sit under the capability
   columns without competing with them. */
.skill__solutions {
  padding-bottom: 4vw;
}
.skill__solutions h2 {
  font-size: 2.5vw;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 2vh;
}
.skill__solutions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.skill__solutions-list li {
  border: 1px solid var(--lime-green);
  border-radius: 32px;
  padding: 10px 24px;
  font-size: 1.2vw;
  color: var(--white);
  line-height: 1.3;
}

/* External "Learn more" inside a Services disclosure panel. */
.services-page__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--black);
  border-bottom: 2px solid var(--lime-green);
  padding-bottom: 2px;
}
.services-page__link:hover,
.services-page__link:focus-visible {
  border-bottom-color: var(--black);
}

@media (max-width: 800px) {
  .skill__solutions h2 {
    font-size: 4vw;
  }
  .skill__solutions-list li {
    font-size: 2vw;
    padding: 8px 18px;
  }
}

@media (max-width: 600px) {
  .skill__solutions h2 {
    font-size: 22px;
  }
  .skill__solutions-list li {
    font-size: 14px;
  }
  .services-page__link {
    font-size: 15px;
  }
}